🚧 wip: add video subtitle embedding

components/aigc/generation/SRTEditor.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
 import { encode } from '@monosky/base64'
+import { object, string, number, type InferType } from 'yup';
 
 interface Subtitle {
   start: string;
@@ -9,6 +10,8 @@ interface Subtitle {
   active?: boolean
 }
 
+type SubtitleStyleEdit = Pick<SubtitleEmbeddingOptions, 'color' | 'fontSize' | 'bottomOffset' | 'strokeStyle' | 'textShadow'>
+
 const props = defineProps({
   course: {
     type: Object as PropType<resp.gen.CourseGenItem>,
@@ -29,6 +32,33 @@ const modified = ref(false)
 
 const videoElement = ref<HTMLVideoElement | null>(null)
 
+const subtitleStyleSchema = object({
+  color: string().required(),
+  fontSize: number().required(),
+  bottomOffset: number().required(),
+  strokeStyle: string().required(),
+  textShadow: object({
+    offsetX: number().required(),
+    offsetY: number().required(),
+    blur: number().required(),
+    color: string().required(),
+  }).required(),
+})
+type subtitleStyleSchema = InferType<typeof subtitleStyleSchema>
+
+const subtitleStyleState = reactive<SubtitleStyleEdit>({
+  color: '#000',
+  fontSize: 20,
+  bottomOffset: 0,
+  strokeStyle: 'none',
+  textShadow: {
+    offsetX: 0,
+    offsetY: 0,
+    blur: 0,
+    color: '#000',
+  },
+})
+
 const loadSrt = async () => {
   isLoading.value = true
   try {
@@ -40,7 +70,7 @@ const loadSrt = async () => {
   } catch (err) {
     toast.add({
       title: '加载字幕失败',
-      description: `${ err }` || '未知错误',
+      description: `${err}` || '未知错误',
       color: 'red',
     })
   } finally {
@@ -78,7 +108,7 @@ const parseSrt = (srt: string) => {
 
 const generateSrt = () => {
   return subtitles.value.map((subtitle, index) => {
-    return `${ index + 1 }\n${ subtitle.start } --> ${ subtitle.end }\n${ subtitle.text }\n`
+    return `${index + 1}\n${subtitle.start} --> ${subtitle.end}\n${subtitle.text}\n`
   }).join('\n')
 }
 
@@ -114,7 +144,7 @@ const syncSubtitles = () => {
     subtitle.active = currentTime >= startTime && currentTime <= endTime
     // scroll active subtitle into view
     if (subtitle.active) {
-      const element = document.getElementById(`subtitle-${ subtitles.value.indexOf(subtitle) }`)!
+      const element = document.getElementById(`subtitle-${subtitles.value.indexOf(subtitle)}`)!
       const parent = element?.parentElement
       // scroll element to the center of parent
       parent?.scrollTo({
@@ -178,25 +208,14 @@ defineExpose({
 <template>
   <div>
     <USlideover v-model="isDrawerActive" :ui="{ width: 'max-w-xl' }">
-      <UCard
-        class="flex flex-col flex-1 overflow-hidden"
-        :ui="{
-          body: { base: 'overflow-auto flex-1' },
-          ring: '',
-          divide: 'divide-y divide-gray-100 dark:divide-gray-800'
-        }"
-      >
+      <UCard class="flex flex-col flex-1 overflow-hidden" :ui="{
+        body: { base: 'overflow-auto flex-1' },
+        ring: '',
+        divide: 'divide-y divide-gray-100 dark:divide-gray-800'
+      }">
         <template #header>
-          <UButton
-            color="gray"
-            variant="ghost"
-            size="sm"
-            icon="i-tabler-x"
-            class="flex sm:hidden absolute end-5 top-5 z-10"
-            square
-            padded
-            @click="isDrawerActive = false"
-          />
+          <UButton color="gray" variant="ghost" size="sm" icon="i-tabler-x"
+            class="flex sm:hidden absolute end-5 top-5 z-10" square padded @click="isDrawerActive = false" />
           <div class="flex flex-col">
             <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
               字幕编辑器
@@ -211,48 +230,87 @@ defineExpose({
           <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
             <defs>
               <filter id="svgSpinnersGooeyBalls20">
-                <feGaussianBlur in="SourceGraphic" result="y" stdDeviation="1"/>
-                <feColorMatrix in="y" result="z" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"/>
-                <feBlend in="SourceGraphic" in2="z"/>
+                <feGaussianBlur in="SourceGraphic" result="y" stdDeviation="1" />
+                <feColorMatrix in="y" result="z" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" />
+                <feBlend in="SourceGraphic" in2="z" />
               </filter>
             </defs>
             <g filter="url(#svgSpinnersGooeyBalls20)">
               <circle cx="5" cy="12" r="4" fill="currentColor">
                 <animate attributeName="cx" calcMode="spline" dur="2s" keySplines=".36,.62,.43,.99;.79,0,.58,.57"
-                         repeatCount="indefinite" values="5;8;5"/>
+                  repeatCount="indefinite" values="5;8;5" />
               </circle>
               <circle cx="19" cy="12" r="4" fill="currentColor">
                 <animate attributeName="cx" calcMode="spline" dur="2s" keySplines=".36,.62,.43,.99;.79,0,.58,.57"
-                         repeatCount="indefinite" values="19;16;19"/>
+                  repeatCount="indefinite" values="19;16;19" />
               </circle>
               <animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate"
-                                values="0 12 12;360 12 12"/>
+                values="0 12 12;360 12 12" />
             </g>
           </svg>
         </div>
-        <div v-else class="flex flex-col h-full overflow-hidden overscroll-y-none overshadow">
+        <div v-else class="flex flex-col h-full gap-2 overflow-hidden overscroll-y-none overshadow">
           <div class="relative">
             <div class="absolute w-fit mx-auto inset-x-0 bottom-3">
               <span class="text-white font-bold text-shadow-lg">
                 {{ subtitles.find(sub => sub.active)?.text }}
               </span>
             </div>
-            <video
-              controls
-              ref="videoElement"
-              class="rounded"
-              style="-webkit-user-drag: none;"
-              :src="course.video_url"
-              @timeupdate="syncSubtitles"
-            />
+            <video controls ref="videoElement" class="rounded" style="-webkit-user-drag: none;" :src="course.video_url"
+              @timeupdate="syncSubtitles" />
           </div>
-          <ul class="flex-1 px-0.5 pb-[100%] overflow-y-auto mt-2 space-y-0.5 scroll-smooth relative">
-            <li
-              v-for="(subtitle, index) in subtitles"
-              :key="index"
-              :id="'subtitle-' + index"
-            >
-              <div :class="{'text-primary': subtitle.active}">
+          <UAccordion :items="[{ label: '字幕选项' }]" color="gray" size="lg">
+            <template #item>
+              <div class="border dark:border-neutral-700 rounded-lg space-y-4 p-4 pb-6">
+                <div class="w-full flex justify-center items-center">
+                  <div class="border-2 dark:border-neutral-700 rounded-md w-full aspect-video relative overflow-hidden">
+                    <img class="object-cover w-full h-full rounded-md"
+                      src="https://static-xsh.oss-cn-chengdu.aliyuncs.com/file/2024-08-04/9ed1e5c0133824f0bcf79d1ad9e9ecbb.png" />
+                    <span class="absolute font-sans font-bold bottom-0 left-1/2 transform -translate-x-1/2" :style="{
+                      color: '#fff',
+                      textShadow: '0 0 5px #000',
+                      fontSize: '20px',
+                      lineHeight: '1',
+                      bottom: '10px',
+                    }">
+                      字幕样式预览
+                    </span>
+                  </div>
+                </div>
+                <UForm :schema="subtitleStyleSchema" :state="subtitleStyleState" class="flex flex-col gap-4">
+                  <div class="flex gap-4">
+                    <UFormGroup label="字幕颜色" name="fontColor" class="w-full">
+                      <USelectMenu :options="[{
+                        label: '黑色',
+                        value: '#000',
+                      }, {
+                        label: '白色',
+                        value: '#fff',
+                      }]" option-attribute="label" value-attribute="value" />
+                    </UFormGroup>
+                    <UFormGroup label="字幕效果" name="effect" class="w-full">
+                      <USelectMenu :options="[{
+                        label: '阴影',
+                        value: 'shadow',
+                      }, {
+                        label: '描边',
+                        value: 'stroke',
+                      }]" option-attribute="label" value-attribute="value" />
+                    </UFormGroup>
+                  </div>
+                  <UFormGroup :label="`字幕大小`" name="fontSize">
+                    <URange :max="40" :min="20" :step="1" class="pt-4" size="sm" />
+                  </UFormGroup>
+                  <UFormGroup label="字幕偏移量" name="offset">
+                    <URange :max="30" :min="0" :step="1" class="pt-4" size="sm" />
+                  </UFormGroup>
+                </UForm>
+              </div>
+            </template>
+          </UAccordion>
+          <ul class="flex-1 px-0.5 pb-[100%] overflow-y-auto space-y-0.5 scroll-smooth relative">
+            <li v-for="(subtitle, index) in subtitles" :key="index" :id="'subtitle-' + index">
+              <div :class="{ 'text-primary': subtitle.active }">
                 <span class="text-xs font-medium opacity-60">
                   {{ formatTimeToDayjs(subtitle.start).format('HH:mm:ss') }}
                   -
@@ -261,18 +319,11 @@ defineExpose({
                     [{{ formatTimeToDayjs(subtitle.end).diff(formatTimeToDayjs(subtitle.start), 'second') }}s]
                   </span>
                 </span>
-                <UInput
-                  v-model="subtitle.text"
-                  class="w-full"
-                  placeholder="请输入字幕内容"
-                  :name="'subtitle-' + index"
-                  :autofocus="false"
-                  :color="subtitle.active ? 'primary' : undefined"
-                  @click="onSubtitleInputClick(subtitle)"
-                  @input="() => { if(!modified) modified = true }"
-                >
+                <UInput v-model="subtitle.text" class="w-full" placeholder="请输入字幕内容" :name="'subtitle-' + index"
+                  :autofocus="false" :color="subtitle.active ? 'primary' : undefined"
+                  @click="onSubtitleInputClick(subtitle)" @input="() => { if (!modified) modified = true }">
                   <template #trailing>
-                    <Icon v-if="subtitle.active" name="tabler:keyframe-align-vertical-filled"/>
+                    <Icon v-if="subtitle.active" name="tabler:keyframe-align-vertical-filled" />
                   </template>
                 </UInput>
               </div>