add luma extend

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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",

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: {

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" />
+      </video>
+    </vue-plyr>
+  </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: '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: 450px;
+}
+</style>

src/components/luma/config/ExtendFromInput.vue

@@ -0,0 +1,65 @@
+<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" />
+          </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>

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">
@@ -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($event, modelValue?.response)">
+              {{ $t('luma.button.extend') }}
+            </el-button>
+          </el-tooltip>
         </div>
         <el-alert :closable="false" class="mt-2 success">
           <p class="description">
@@ -95,18 +85,20 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { ElImage, ElAlert, ElButton } from 'element-plus';
-import { ILumaTask } from '@/models';
+import { ElImage, ElAlert, ElButton, ElTooltip } from 'element-plus';
+import { ILumaTask, ILumaGenerateResponse } 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: {
     ElImage,
     CopyToClipboard,
     FontAwesomeIcon,
     ElAlert,
+    VideoPlayer,
+    ElTooltip,
     ElButton
   },
   props: {
@@ -124,8 +116,19 @@ export default defineComponent({
     }
   },
   methods: {
-    onOpenLink(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',
+        thumbnail_url: response.thumbnail_url,
+        video_url: response.video_url
+      });
     },
     onReload(event: Event) {
       const target = event.target as HTMLImageElement;
@@ -146,7 +149,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 +264,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>

src/i18n/zh-CN/luma.json

@@ -75,6 +75,10 @@
     "message": "提示词增强",
     "description": "要生成的 QR 码的高级设置"
   },
+  "name.extend": {
+    "message": "扩展视频来自",
+    "description": "内容输入的提示"
+  },
   "name.loop": {
     "message": "视频循环播放",
     "description": "要生成的 QR 码的高级设置"
@@ -196,8 +200,8 @@
     "description": "生成Luma视频的按钮文本"
   },
   "button.extend": {
-    "message": "继续生成",
-    "description": "继续生成按钮文本"
+    "message": "扩展视频",
+    "description": "扩展视频按钮文本"
   },
   "button.uploadStartImageUrl": {
     "message": "上传图片",
@@ -343,6 +347,10 @@
     "message": "生成中...",
     "description": "图像正在生成时的消息"
   },
+  "message.extendVideo": {
+    "message": "继续生成此视频",
+    "description": "图像正在生成时的消息"
+  },
   "message.generateFailed": {
     "message": "生成图像失败",
     "description": "图像生成失败时的消息"

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 {

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'];