From 2d73a131a4892b4173f36163495834f4a22cce71 Mon Sep 17 00:00:00 2001
From: hyf-github-user <1348977728@qq.com>
Date: Sun, 18 Aug 2024 14:05:45 +0800
Subject: [PATCH 1/5] add luma video-play

---
 package.json                         |   1 +
 src/components/luma/VideoPlayer.vue  |  40 ++++++
 src/components/luma/task/Preview.vue |  58 +++++---
 src/i18n/zh-CN/common.json           |   4 +
 src/i18n/zh-CN/luma.json             |   8 +-
 yarn.lock                            | 204 ++++++++++++++++++++++++++-
 6 files changed, 290 insertions(+), 25 deletions(-)
 create mode 100644 src/components/luma/VideoPlayer.vue

diff --git a/package.json b/package.json
index 65b17ecc..82ef11e0 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@fortawesome/vue-fontawesome": "^3.0.2",
     "@icon-park/vue-next": "^1.3.6",
+    "@skjnldsv/vue-plyr": "^7.5.0",
     "axios": "^1.6.0",
     "codemirror": "^6.0.1",
     "copy-to-clipboard": "^3.3.3",
diff --git a/src/components/luma/VideoPlayer.vue b/src/components/luma/VideoPlayer.vue
new file mode 100644
index 00000000..c0debff6
--- /dev/null
+++ b/src/components/luma/VideoPlayer.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <vue-plyr :options="options" class="video">
+      <video controls crossorigin playsinline :data-poster="modelValue?.response?.thumbnail_url">
+        <source size="1080" :src="modelValue?.response?.video_url" type="video/mp4" />
+        <a download="" href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"> Download </a>
+      </video>
+    </vue-plyr>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import VuePlyr from '@skjnldsv/vue-plyr';
+// @ts-ignore
+import { ILumaTask } from '@/models';
+import '@skjnldsv/vue-plyr/dist/vue-plyr.css';
+export default defineComponent({
+  name: 'VideoPlayer',
+  components: { VuePlyr },
+  props: {
+    modelValue: {
+      type: Object as () => ILumaTask | undefined,
+      required: true
+    }
+  },
+  data() {
+    return {
+      options: { quality: { default: '1080p' } }
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.video {
+  max-width: 100%; /* 使播放器自适应父容器宽度 */
+  height: 500px; /* 设置播放器高度 */
+}
+</style>
diff --git a/src/components/luma/task/Preview.vue b/src/components/luma/task/Preview.vue
index 964d46df..a9206b33 100644
--- a/src/components/luma/task/Preview.vue
+++ b/src/components/luma/task/Preview.vue
@@ -19,24 +19,14 @@
       <!-- Display success message -->
       <div v-if="modelValue?.response?.success === true" :class="{ content: true, failed: true }">
         <div class="image-wrapper">
-          <img
-            v-if="modelValue?.response?.thumbnail_url"
-            v-loading="!modelValue?.response?.thumbnail_url"
-            :src="modelValue?.response?.thumbnail_url"
-            class="image mb-3"
-          />
-          <div v-if="modelValue?.response?.video_url" class="play-icon">
-            <font-awesome-icon icon="fa-solid fa-play-circle" />
-          </div>
-          <el-button
-            v-if="modelValue?.response?.video_url"
-            type="info"
-            round
-            class="btn-raw"
-            @click="onOpenUrl(modelValue?.response?.video_url)"
-          >
-            {{ $t('common.button.seeRawVideo') }}
-          </el-button>
+          <VideoPlayer :model-value="modelValue" />
+        </div>
+        <div v-if="modelValue?.response" :class="{ operations: true, 'mt-2': true }">
+          <el-tooltip class="box-item" effect="dark" :content="$t('luma.message.extendVideo')" placement="top-start">
+            <el-button type="info" size="small" class="btn-action" @click="onExtend(modelValue?.response.video_id)">
+              {{ $t('luma.button.extend') }}
+            </el-button>
+          </el-tooltip>
         </div>
         <el-alert :closable="false" class="mt-2 success">
           <p class="description">
@@ -95,11 +85,11 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { ElImage, ElAlert, ElButton } from 'element-plus';
+import { ElImage, ElAlert, ElButton, ElTooltip } from 'element-plus';
 import { ILumaTask } from '@/models';
 import CopyToClipboard from '@/components/common/CopyToClipboard.vue';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-
+import VideoPlayer from '../VideoPlayer.vue';
 export default defineComponent({
   name: 'TaskPreview',
   components: {
@@ -107,6 +97,8 @@ export default defineComponent({
     CopyToClipboard,
     FontAwesomeIcon,
     ElAlert,
+    VideoPlayer,
+    ElTooltip,
     ElButton
   },
   props: {
@@ -124,7 +116,7 @@ export default defineComponent({
     }
   },
   methods: {
-    onOpenLink(url: string) {
+    onExtend(url: string) {
       window.open(url, '_blank');
     },
     onReload(event: Event) {
@@ -146,7 +138,7 @@ export default defineComponent({
       // set the new url
       target.src = url.toString();
     },
-    onOpenUrl(url: string) {
+    onOpenVideo(url: string) {
       window.open(url, '_blank');
     },
     onDownload(url: string) {
@@ -261,11 +253,33 @@ $left-width: 70px;
         .btn-raw {
           display: block;
         }
+
         .play-icon {
           display: none;
         }
       }
     }
+    .operations {
+      display: flex;
+      justify-content: left;
+      flex-direction: row;
+      width: 100%;
+      align-items: baseline;
+      flex-wrap: wrap;
+      overflow: hidden;
+      text-align: center;
+      color: var(--el-text-color-regular);
+      font-size: 14px;
+      overflow-y: scroll;
+
+      &.full {
+        height: 70px;
+      }
+
+      .btn-action {
+        margin-bottom: 10px;
+      }
+    }
   }
 }
 </style>
diff --git a/src/i18n/zh-CN/common.json b/src/i18n/zh-CN/common.json
index 8d770c06..9230a44c 100644
--- a/src/i18n/zh-CN/common.json
+++ b/src/i18n/zh-CN/common.json
@@ -23,6 +23,10 @@
     "message": "查看视频",
     "description": "按钮文本，用于查看原始图片"
   },
+  "button.extendVideo": {
+    "message": "扩展视频",
+    "description": "按钮文本，用于查看原始图片"
+  },
   "button.edit": {
     "message": "编辑",
     "description": "按钮文本，用于编辑某些内容"
diff --git a/src/i18n/zh-CN/luma.json b/src/i18n/zh-CN/luma.json
index d9ebda3e..d85b9216 100644
--- a/src/i18n/zh-CN/luma.json
+++ b/src/i18n/zh-CN/luma.json
@@ -196,8 +196,8 @@
     "description": "生成Luma视频的按钮文本"
   },
   "button.extend": {
-    "message": "继续生成",
-    "description": "继续生成按钮文本"
+    "message": "扩展视频",
+    "description": "扩展视频按钮文本"
   },
   "button.uploadStartImageUrl": {
     "message": "上传图片",
@@ -343,6 +343,10 @@
     "message": "生成中...",
     "description": "图像正在生成时的消息"
   },
+  "message.extendVideo": {
+    "message": "继续生成此视频",
+    "description": "图像正在生成时的消息"
+  },
   "message.generateFailed": {
     "message": "生成图像失败",
     "description": "图像生成失败时的消息"
diff --git a/yarn.lock b/yarn.lock
index 6974b64a..9e55dffd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -26,11 +26,21 @@
   dependencies:
     "@babel/highlight" "^7.16.7"
 
+"@babel/helper-string-parser@^7.24.8":
+  version "7.24.8"
+  resolved "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz#5b3329c9a58803d5df425e5785865881a81ca48d"
+  integrity sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==
+
 "@babel/helper-validator-identifier@^7.16.7", "@babel/helper-validator-identifier@^7.22.20":
   version "7.22.20"
   resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz"
   integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
 
+"@babel/helper-validator-identifier@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db"
+  integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==
+
 "@babel/highlight@^7.10.4":
   version "7.23.4"
   resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz"
@@ -54,6 +64,22 @@
   resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.17.0.tgz"
   integrity sha512-VKXSCQx5D8S04ej+Dqsr1CzYvvWgf20jIw2D+YhQCrIlr2UZGaDds23Y0xg75/skOxpLCRpUZvk/1EAVkGoDOw==
 
+"@babel/parser@^7.24.7":
+  version "7.25.3"
+  resolved "https://registry.npmmirror.com/@babel/parser/-/parser-7.25.3.tgz#91fb126768d944966263f0657ab222a642b82065"
+  integrity sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==
+  dependencies:
+    "@babel/types" "^7.25.2"
+
+"@babel/types@^7.25.2":
+  version "7.25.2"
+  resolved "https://registry.npmmirror.com/@babel/types/-/types-7.25.2.tgz#55fb231f7dc958cd69ea141a4c2997e819646125"
+  integrity sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==
+  dependencies:
+    "@babel/helper-string-parser" "^7.24.8"
+    "@babel/helper-validator-identifier" "^7.24.7"
+    to-fast-properties "^2.0.0"
+
 "@capacitor/android@^6.1.1":
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/@capacitor/android/-/android-6.1.1.tgz#a0843ddea92cc9739739a82a8fcd2ed6b1eaab8a"
@@ -570,6 +596,11 @@
   resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz"
   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
 
+"@jridgewell/sourcemap-codec@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
+
 "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.20"
   resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz"
@@ -702,6 +733,14 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
+"@skjnldsv/vue-plyr@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.npmmirror.com/@skjnldsv/vue-plyr/-/vue-plyr-7.5.0.tgz#3ff56fb2f62cbbd7a235dffb3d3441030f589dc1"
+  integrity sha512-JmbKPe8Eh0yTP+7w4VYeqGhrUqDKM4qSsCn37CbADAvvwMvceBwYC0IBXil0RBtyzStxwXPtOj1oI//lQ5DeTw==
+  dependencies:
+    plyr "^3.7.8"
+    vue "^3.3.4"
+
 "@transmart/cli@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@transmart/cli/-/cli-0.5.0.tgz#dddbd0b09bb0046c0f237da35eb627bf06ec5928"
@@ -1004,6 +1043,17 @@
     estree-walker "^2.0.2"
     source-map "^0.6.1"
 
+"@vue/compiler-core@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.4.38.tgz#326dfe3c92fa2b0f1dc9b39a948a231980253496"
+  integrity sha512-8IQOTCWnLFqfHzOGm9+P8OPSEDukgg3Huc92qSG49if/xI2SAwLHQO2qaPQbjCWPBcQoO1WYfXfTACUrWV3c5A==
+  dependencies:
+    "@babel/parser" "^7.24.7"
+    "@vue/shared" "3.4.38"
+    entities "^4.5.0"
+    estree-walker "^2.0.2"
+    source-map-js "^1.2.0"
+
 "@vue/compiler-dom@3.2.29":
   version "3.2.29"
   resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.29.tgz"
@@ -1020,6 +1070,14 @@
     "@vue/compiler-core" "3.2.47"
     "@vue/shared" "3.2.47"
 
+"@vue/compiler-dom@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.4.38.tgz#90348fac1130e0bbd408b650635cb626b3b9df06"
+  integrity sha512-Osc/c7ABsHXTsETLgykcOwIxFktHfGSUDkb05V61rocEfsFDcjDLH/IHJSNJP+/Sv9KeN2Lx1V6McZzlSb9EhQ==
+  dependencies:
+    "@vue/compiler-core" "3.4.38"
+    "@vue/shared" "3.4.38"
+
 "@vue/compiler-sfc@3.2.29", "@vue/compiler-sfc@^3.0.5":
   version "3.2.29"
   resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.29.tgz"
@@ -1036,6 +1094,21 @@
     postcss "^8.1.10"
     source-map "^0.6.1"
 
+"@vue/compiler-sfc@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.4.38.tgz#954c3f6777bbbcca28771ba59b795f12f76ef188"
+  integrity sha512-s5QfZ+9PzPh3T5H4hsQDJtI8x7zdJaew/dCGgqZ2630XdzaZ3AD8xGZfBqpT8oaD/p2eedd+pL8tD5vvt5ZYJQ==
+  dependencies:
+    "@babel/parser" "^7.24.7"
+    "@vue/compiler-core" "3.4.38"
+    "@vue/compiler-dom" "3.4.38"
+    "@vue/compiler-ssr" "3.4.38"
+    "@vue/shared" "3.4.38"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.10"
+    postcss "^8.4.40"
+    source-map-js "^1.2.0"
+
 "@vue/compiler-sfc@^3.2.47":
   version "3.2.47"
   resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz"
@@ -1068,6 +1141,14 @@
     "@vue/compiler-dom" "3.2.47"
     "@vue/shared" "3.2.47"
 
+"@vue/compiler-ssr@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.4.38.tgz#9ded18f6d9c8b2440039a58492cfff36fa1a7774"
+  integrity sha512-YXznKFQ8dxYpAz9zLuVvfcXhc31FSPFDcqr0kyujbOwNhlmaNvL2QfIy+RZeJgSn5Fk54CWoEUeW+NVBAogGaw==
+  dependencies:
+    "@vue/compiler-dom" "3.4.38"
+    "@vue/shared" "3.4.38"
+
 "@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.0.0-beta.18", "@vue/devtools-api@^6.0.0-beta.7":
   version "6.0.0-beta.21.1"
   resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.0-beta.21.1.tgz"
@@ -1102,6 +1183,13 @@
   dependencies:
     "@vue/shared" "3.2.29"
 
+"@vue/reactivity@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.4.38.tgz#ec2d549f4b831cd03d0baabf7d77e840b8536000"
+  integrity sha512-4vl4wMMVniLsSYYeldAKzbk72+D3hUnkw9z8lDeJacTxAkXeDAP1uE9xr2+aKIN0ipOL8EG2GPouVTH6yF7Gnw==
+  dependencies:
+    "@vue/shared" "3.4.38"
+
 "@vue/reactivity@^3.2.47":
   version "3.2.47"
   resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.47.tgz"
@@ -1117,6 +1205,14 @@
     "@vue/reactivity" "3.2.29"
     "@vue/shared" "3.2.29"
 
+"@vue/runtime-core@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.4.38.tgz#bead9085e9a1c5a446e27d74ffb450f9261cf097"
+  integrity sha512-21z3wA99EABtuf+O3IhdxP0iHgkBs1vuoCAsCKLVJPEjpVqvblwBnTj42vzHRlWDCyxu9ptDm7sI2ZMcWrQqlA==
+  dependencies:
+    "@vue/reactivity" "3.4.38"
+    "@vue/shared" "3.4.38"
+
 "@vue/runtime-dom@3.2.29":
   version "3.2.29"
   resolved "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.29.tgz"
@@ -1126,6 +1222,16 @@
     "@vue/shared" "3.2.29"
     csstype "^2.6.8"
 
+"@vue/runtime-dom@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.4.38.tgz#52678ba0b85f94400a0a9c8dd23ddef4dd65657d"
+  integrity sha512-afZzmUreU7vKwKsV17H1NDThEEmdYI+GCAK/KY1U957Ig2NATPVjCROv61R19fjZNzMmiU03n79OMnXyJVN0UA==
+  dependencies:
+    "@vue/reactivity" "3.4.38"
+    "@vue/runtime-core" "3.4.38"
+    "@vue/shared" "3.4.38"
+    csstype "^3.1.3"
+
 "@vue/server-renderer@3.2.29":
   version "3.2.29"
   resolved "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.29.tgz"
@@ -1134,6 +1240,14 @@
     "@vue/compiler-ssr" "3.2.29"
     "@vue/shared" "3.2.29"
 
+"@vue/server-renderer@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.4.38.tgz#457401ef2b0f969156702061e56915acecc9fe2c"
+  integrity sha512-NggOTr82FbPEkkUvBm4fTGcwUY8UuTsnWC/L2YZBmvaQ4C4Jl/Ao4HHTB+l7WnFCt5M/dN3l0XLuyjzswGYVCA==
+  dependencies:
+    "@vue/compiler-ssr" "3.4.38"
+    "@vue/shared" "3.4.38"
+
 "@vue/shared@3.2.29":
   version "3.2.29"
   resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.29.tgz"
@@ -1144,6 +1258,11 @@
   resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz"
   integrity sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==
 
+"@vue/shared@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.4.38.tgz#552a6770098bfd556fa3e2c686c9d3b4f4cd94c2"
+  integrity sha512-q0xCiLkuWWQLzVrecPb0RMsNWyxICOjPrcrwxTUEHb1fsnvni4dcuyG7RT/Ie7VPTvnjzIaWzRMUBsrqNj/hhw==
+
 "@vueuse/core@^9.1.0":
   version "9.12.0"
   resolved "https://registry.npmjs.org/@vueuse/core/-/core-9.12.0.tgz"
@@ -1619,6 +1738,11 @@ copy-to-clipboard@^3.3.3:
   dependencies:
     toggle-selection "^1.0.6"
 
+core-js@^3.26.1:
+  version "3.38.0"
+  resolved "https://registry.npmmirror.com/core-js/-/core-js-3.38.0.tgz#8acb7c050bf2ccbb35f938c0d040132f6110f636"
+  integrity sha512-XPpwqEodRljce9KswjZShh95qJ1URisBeKCjUdq27YdenkslVe7OO0ZJhlYXAChW7OhXaRLl8AAba7IBfoIHug==
+
 cosmiconfig-typescript-loader@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-5.0.0.tgz#0d3becfe022a871f7275ceb2397d692e06045dc8"
@@ -1759,6 +1883,16 @@ csstype@^2.6.8:
   resolved "https://registry.npmjs.org/csstype/-/csstype-2.6.19.tgz"
   integrity sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==
 
+csstype@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
+custom-event-polyfill@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.npmmirror.com/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz#9bc993ddda937c1a30ccd335614c6c58c4f87aee"
+  integrity sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==
+
 dayjs@^1.10.7:
   version "1.10.7"
   resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz"
@@ -2013,7 +2147,7 @@ entities@^3.0.1, entities@~3.0.1:
   resolved "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz"
   integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
 
-entities@^4.2.0:
+entities@^4.2.0, entities@^4.5.0:
   version "4.5.0"
   resolved "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
@@ -3217,6 +3351,11 @@ linkify-it@^4.0.1:
   dependencies:
     uc.micro "^1.0.1"
 
+loadjs@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.npmmirror.com/loadjs/-/loadjs-4.3.0.tgz#38c578cbb2e08835aa4407bd4ac6507dd1f7ed10"
+  integrity sha512-vNX4ZZLJBeDEOBvdr2v/F+0aN5oMuPu7JTqrMwp+DtgK+AryOlpy6Xtm2/HpNr+azEa828oQjOtWsB6iDtSfSQ==
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz"
@@ -3296,6 +3435,13 @@ magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.4"
 
+magic-string@^0.30.10:
+  version "0.30.11"
+  resolved "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.11.tgz#301a6f93b3e8c2cb13ac1a7a673492c0dfd12954"
+  integrity sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.5.0"
+
 markdown-it@^13.0.1:
   version "13.0.1"
   resolved "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.1.tgz"
@@ -3738,6 +3884,11 @@ picocolors@^1.0.0:
   resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
+picocolors@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
+  integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
+
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
@@ -3762,6 +3913,17 @@ plist@^3.0.5, plist@^3.1.0:
     base64-js "^1.5.1"
     xmlbuilder "^15.1.1"
 
+plyr@^3.7.8:
+  version "3.7.8"
+  resolved "https://registry.npmmirror.com/plyr/-/plyr-3.7.8.tgz#b79bccc23687705b5d9a283b2a88c124bf7471ed"
+  integrity sha512-yG/EHDobwbB/uP+4Bm6eUpJ93f8xxHjjk2dYcD1Oqpe1EcuQl5tzzw9Oq+uVAzd2lkM11qZfydSiyIpiB8pgdA==
+  dependencies:
+    core-js "^3.26.1"
+    custom-event-polyfill "^1.0.7"
+    loadjs "^4.2.0"
+    rangetouch "^2.0.1"
+    url-polyfill "^1.1.12"
+
 pngjs@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz"
@@ -4016,6 +4178,15 @@ postcss@^8.1.10, postcss@^8.4.13, postcss@^8.4.23, postcss@^8.4.32:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.4.40:
+  version "8.4.41"
+  resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.41.tgz#d6104d3ba272d882fe18fc07d15dc2da62fa2681"
+  integrity sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.0.1"
+    source-map-js "^1.2.0"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
@@ -4097,6 +4268,11 @@ queue-microtask@^1.2.2:
   resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+rangetouch@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmmirror.com/rangetouch/-/rangetouch-2.0.1.tgz#c01105110fd3afca2adcb1a580692837d883cb70"
+  integrity sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA==
+
 read-cache@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz"
@@ -4320,6 +4496,11 @@ slice-ansi@^4.0.0:
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
+source-map-js@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
+  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
+
 source-map@0.6.1, source-map@^0.6.1:
   version "0.6.1"
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
@@ -4578,6 +4759,11 @@ tmp@^0.2.1:
   dependencies:
     rimraf "^3.0.0"
 
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+  integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
+
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz"
@@ -4714,6 +4900,11 @@ url-join@^5.0.0:
   resolved "https://registry.npmjs.org/url-join/-/url-join-5.0.0.tgz"
   integrity sha512-n2huDr9h9yzd6exQVnH/jU5mr+Pfx08LRXXZhkLLetAMESRj+anQsTAh940iMrIetKAmry9coFuZQ2jY8/p3WA==
 
+url-polyfill@^1.1.12:
+  version "1.1.12"
+  resolved "https://registry.npmmirror.com/url-polyfill/-/url-polyfill-1.1.12.tgz#6cdaa17f6b022841b3aec0bf8dbd87ac0cd33331"
+  integrity sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
@@ -4840,6 +5031,17 @@ vue@^3.2.6:
     "@vue/server-renderer" "3.2.29"
     "@vue/shared" "3.2.29"
 
+vue@^3.3.4:
+  version "3.4.38"
+  resolved "https://registry.npmmirror.com/vue/-/vue-3.4.38.tgz#0ccbb64ed03ef3c4ab73e540793290b18e7c4236"
+  integrity sha512-f0ZgN+mZ5KFgVv9wz0f4OgVKukoXtS3nwET4c2vLBGQR50aI8G0cqbFtLlX9Yiyg3LFGBitruPHt2PxwTduJEw==
+  dependencies:
+    "@vue/compiler-dom" "3.4.38"
+    "@vue/compiler-sfc" "3.4.38"
+    "@vue/runtime-dom" "3.4.38"
+    "@vue/server-renderer" "3.4.38"
+    "@vue/shared" "3.4.38"
+
 vuex-persistedstate@^4.0.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-4.1.0.tgz"

From 33f86a2afa3974a102d0b46cb1417f002666096b Mon Sep 17 00:00:00 2001
From: hyf-github-user <1348977728@qq.com>
Date: Sun, 18 Aug 2024 14:25:28 +0800
Subject: [PATCH 2/5] add luma extend

---
 src/components/luma/VideoPlayer.vue  |  4 ++--
 src/components/luma/task/Preview.vue | 17 +++++++++++++----
 src/i18n/zh-CN/common.json           |  4 ----
 src/store/luma/persist.ts            |  2 +-
 4 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/luma/VideoPlayer.vue b/src/components/luma/VideoPlayer.vue
index c0debff6..ee58ab96 100644
--- a/src/components/luma/VideoPlayer.vue
+++ b/src/components/luma/VideoPlayer.vue
@@ -34,7 +34,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .video {
-  max-width: 100%; /* 使播放器自适应父容器宽度 */
-  height: 500px; /* 设置播放器高度 */
+  max-width: 100%;
+  height: 450px;
 }
 </style>
diff --git a/src/components/luma/task/Preview.vue b/src/components/luma/task/Preview.vue
index a9206b33..b439f591 100644
--- a/src/components/luma/task/Preview.vue
+++ b/src/components/luma/task/Preview.vue
@@ -23,7 +23,7 @@
         </div>
         <div v-if="modelValue?.response" :class="{ operations: true, 'mt-2': true }">
           <el-tooltip class="box-item" effect="dark" :content="$t('luma.message.extendVideo')" placement="top-start">
-            <el-button type="info" size="small" class="btn-action" @click="onExtend(modelValue?.response.video_id)">
+            <el-button type="info" size="small" class="btn-action" @click="onExtend($event, modelValue?.response)">
               {{ $t('luma.button.extend') }}
             </el-button>
           </el-tooltip>
@@ -86,7 +86,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { ElImage, ElAlert, ElButton, ElTooltip } from 'element-plus';
-import { ILumaTask } from '@/models';
+import { ILumaTask, ILumaGenerateResponse } from '@/models';
 import CopyToClipboard from '@/components/common/CopyToClipboard.vue';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import VideoPlayer from '../VideoPlayer.vue';
@@ -116,8 +116,17 @@ export default defineComponent({
     }
   },
   methods: {
-    onExtend(url: string) {
-      window.open(url, '_blank');
+    onExtend(event: MouseEvent, response: ILumaGenerateResponse) {
+      event.stopPropagation();
+      console.log('on extend');
+      // download url here
+      console.debug('set config', response);
+      this.$store.commit('luma/setConfig', {
+        ...this.$store.state.luma?.config,
+        video_id: response.video_id,
+        prompt: response.prompt,
+        action: 'extend'
+      });
     },
     onReload(event: Event) {
       const target = event.target as HTMLImageElement;
diff --git a/src/i18n/zh-CN/common.json b/src/i18n/zh-CN/common.json
index 9230a44c..8d770c06 100644
--- a/src/i18n/zh-CN/common.json
+++ b/src/i18n/zh-CN/common.json
@@ -23,10 +23,6 @@
     "message": "查看视频",
     "description": "按钮文本，用于查看原始图片"
   },
-  "button.extendVideo": {
-    "message": "扩展视频",
-    "description": "按钮文本，用于查看原始图片"
-  },
   "button.edit": {
     "message": "编辑",
     "description": "按钮文本，用于编辑某些内容"
diff --git a/src/store/luma/persist.ts b/src/store/luma/persist.ts
index 11ad26eb..a8e18ab4 100644
--- a/src/store/luma/persist.ts
+++ b/src/store/luma/persist.ts
@@ -1 +1 @@
-export default ['luma.config', 'luma.credential', 'luma.application', 'luma.tasks'];
+export default ['luma.credential', 'luma.application', 'luma.tasks'];

From 1e14ca01f30546483e9109bae99c82af7ac6278b Mon Sep 17 00:00:00 2001
From: hyf-github-user <1348977728@qq.com>
Date: Sun, 18 Aug 2024 14:33:29 +0800
Subject: [PATCH 3/5] add change

---
 ...acloud-nexior-9d071564-d327-4321-b8d2-e5fdadeaf7a7.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@acedatacloud-nexior-9d071564-d327-4321-b8d2-e5fdadeaf7a7.json

diff --git a/change/@acedatacloud-nexior-9d071564-d327-4321-b8d2-e5fdadeaf7a7.json b/change/@acedatacloud-nexior-9d071564-d327-4321-b8d2-e5fdadeaf7a7.json
new file mode 100644
index 00000000..992d210d
--- /dev/null
+++ b/change/@acedatacloud-nexior-9d071564-d327-4321-b8d2-e5fdadeaf7a7.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add luma extend and videoplayer",
+  "packageName": "@acedatacloud/nexior",
+  "email": "1348977728@qq.com",
+  "dependentChangeType": "patch"
+}

From 5125a8699aefd617d5ec2fb386d0146053a2d616 Mon Sep 17 00:00:00 2001
From: hyf-github-user <1348977728@qq.com>
Date: Sun, 18 Aug 2024 15:10:32 +0800
Subject: [PATCH 4/5] add luma video preview

---
 src/components/luma/ConfigPanel.vue           |  7 +-
 .../luma/config/ExtendFromInput.vue           | 66 +++++++++++++++++++
 src/components/luma/task/Preview.vue          |  6 +-
 src/i18n/zh-CN/luma.json                      |  4 ++
 src/models/luma.ts                            |  1 +
 5 files changed, 80 insertions(+), 4 deletions(-)
 create mode 100644 src/components/luma/config/ExtendFromInput.vue

diff --git a/src/components/luma/ConfigPanel.vue b/src/components/luma/ConfigPanel.vue
index 82081c92..0965b5c7 100644
--- a/src/components/luma/ConfigPanel.vue
+++ b/src/components/luma/ConfigPanel.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="panel">
     <div class="config">
+      <extend-from-input v-if="config?.action === 'extend'" class="mb-4" />
       <prompt-input class="mb-4" />
-      <start-image-url-input class="mb-4" />
+      <start-image-url-input v-if="!config?.action === 'extend'" class="mb-4" />
       <end-image-url-input class="mb-4" />
       <enhancement-selector class="mb-4" />
       <loop-selector class="mb-4" />
@@ -29,6 +30,7 @@ import LoopSelector from './config/LoopSelector.vue';
 import EndImageUrlInput from './config/EndImageUrlInput.vue';
 import StartImageUrlInput from './config/StartImageUrlInput.vue';
 import PromptInput from './config/PromptInput.vue';
+import ExtendFromInput from './config/ExtendFromInput.vue';
 export default defineComponent({
   name: 'PresetPanel',
   components: {
@@ -38,7 +40,8 @@ export default defineComponent({
     EnhancementSelector,
     ElButton,
     FontAwesomeIcon,
-    PromptInput
+    PromptInput,
+    ExtendFromInput
   },
   emits: ['generate'],
   computed: {
diff --git a/src/components/luma/config/ExtendFromInput.vue b/src/components/luma/config/ExtendFromInput.vue
new file mode 100644
index 00000000..b99a87ef
--- /dev/null
+++ b/src/components/luma/config/ExtendFromInput.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="field">
+    <div class="box">
+      <h2 class="title">{{ $t('luma.name.extend') }}</h2>
+    </div>
+    <div class="task">
+      <div>
+        <vue-plyr :options="options" class="video">
+          <video controls crossorigin playsinline :data-poster="config?.thumbnail_url">
+            <source size="1080" :src="config?.video_url" type="video/mp4" />
+            <a download="" href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"> Download </a>
+          </video>
+        </vue-plyr>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+// @ts-ignore
+import VuePlyr from '@skjnldsv/vue-plyr';
+// @ts-ignore
+import { ILumaTask } from '@/models';
+import '@skjnldsv/vue-plyr/dist/vue-plyr.css';
+export default defineComponent({
+  name: 'ExtendFromInput',
+  components: { VuePlyr },
+  props: {
+    modelValue: {
+      type: Object as () => ILumaTask | undefined,
+      required: true
+    }
+  },
+  data() {
+    return {
+      options: { quality: { default: '1080p' } }
+    };
+  },
+  computed: {
+    config() {
+      return this.$store.state.luma?.config;
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.field {
+  .box {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between; // 添加这行
+    position: relative;
+    .title {
+      font-size: 14px;
+      margin-bottom: 10px;
+    }
+    .input-wrapper {
+      width: 150px; // 根据需要调整宽度
+      margin-left: 30px; // 增加左边距
+    }
+  }
+}
+</style>
diff --git a/src/components/luma/task/Preview.vue b/src/components/luma/task/Preview.vue
index b439f591..94ecdd12 100644
--- a/src/components/luma/task/Preview.vue
+++ b/src/components/luma/task/Preview.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="preview">
     <div class="left">
-      <el-image src="https://cdn.acedata.cloud/bcml67.png" class="avatar" />
+      <el-image src="https://cdn.acedata.cloud/yu04pc.png" class="avatar" />
     </div>
     <div class="main">
       <div class="bot">
@@ -125,7 +125,9 @@ export default defineComponent({
         ...this.$store.state.luma?.config,
         video_id: response.video_id,
         prompt: response.prompt,
-        action: 'extend'
+        action: 'extend',
+        thumbnail_url: response.thumbnail_url,
+        video_url: response.video_url
       });
     },
     onReload(event: Event) {
diff --git a/src/i18n/zh-CN/luma.json b/src/i18n/zh-CN/luma.json
index d85b9216..ef4842a1 100644
--- a/src/i18n/zh-CN/luma.json
+++ b/src/i18n/zh-CN/luma.json
@@ -75,6 +75,10 @@
     "message": "提示词增强",
     "description": "要生成的 QR 码的高级设置"
   },
+  "name.extend": {
+    "message": "扩展视频来自",
+    "description": "内容输入的提示"
+  },
   "name.loop": {
     "message": "视频循环播放",
     "description": "要生成的 QR 码的高级设置"
diff --git a/src/models/luma.ts b/src/models/luma.ts
index 3f1722cd..56d738ff 100644
--- a/src/models/luma.ts
+++ b/src/models/luma.ts
@@ -7,6 +7,7 @@ export interface ILumaConfig {
   end_image_url?: string;
   enhancement?: boolean;
   loop?: boolean;
+  thumbnail_url?: string;
 }
 
 export interface ILumaGenerateRequest {

From efac4864cbe6671f74282dc92bd38915b1d8c456 Mon Sep 17 00:00:00 2001
From: hyf-github-user <1348977728@qq.com>
Date: Sun, 18 Aug 2024 15:15:24 +0800
Subject: [PATCH 5/5] fit luma extend

---
 src/components/luma/VideoPlayer.vue            | 2 +-
 src/components/luma/config/ExtendFromInput.vue | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/luma/VideoPlayer.vue b/src/components/luma/VideoPlayer.vue
index ee58ab96..bad7c29c 100644
--- a/src/components/luma/VideoPlayer.vue
+++ b/src/components/luma/VideoPlayer.vue
@@ -3,7 +3,6 @@
     <vue-plyr :options="options" class="video">
       <video controls crossorigin playsinline :data-poster="modelValue?.response?.thumbnail_url">
         <source size="1080" :src="modelValue?.response?.video_url" type="video/mp4" />
-        <a download="" href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"> Download </a>
       </video>
     </vue-plyr>
   </div>
@@ -11,6 +10,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+// @ts-ignore
 import VuePlyr from '@skjnldsv/vue-plyr';
 // @ts-ignore
 import { ILumaTask } from '@/models';
diff --git a/src/components/luma/config/ExtendFromInput.vue b/src/components/luma/config/ExtendFromInput.vue
index b99a87ef..452eb50b 100644
--- a/src/components/luma/config/ExtendFromInput.vue
+++ b/src/components/luma/config/ExtendFromInput.vue
@@ -8,7 +8,6 @@
         <vue-plyr :options="options" class="video">
           <video controls crossorigin playsinline :data-poster="config?.thumbnail_url">
             <source size="1080" :src="config?.video_url" type="video/mp4" />
-            <a download="" href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"> Download </a>
           </video>
         </vue-plyr>
       </div>