fix(SRTEditor): 修复字幕编辑器中导出视频使用的字幕源

components/aigc/generation/SRTEditor.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
 import { encode } from '@monosky/base64'
-import { object, string, number, type InferType } from 'yup';
+import { object, string, number, type InferType } from 'yup'
 
 interface Subtitle {
-  start: string;
+  start: string
-  end: string;
+  end: string
-  text: string;
+  text: string
   active?: boolean
 }
 
@@ -70,7 +70,7 @@ const parseSrt = (srt: string) => {
   const regex = /(\d{2}:\d{2}:\d{2},\d{3}) --> (\d{2}:\d{2}:\d{2},\d{3})/
   let subtitle: Subtitle | null = null
 
-  lines.forEach(line => {
+  lines.forEach((line) => {
     if (/^\d+$/.test(line.trim())) return
 
     const match = line.match(regex)
@@ -84,7 +84,7 @@ const parseSrt = (srt: string) => {
         text: '',
       }
     } else if (subtitle) {
-      subtitle.text += (line.trim() ? line : '')
+      subtitle.text += line.trim() ? line : ''
     }
   })
 
@@ -94,9 +94,13 @@ const parseSrt = (srt: string) => {
 }
 
 const generateSrt = () => {
-  return subtitles.value.map((subtitle, index) => {
+  return subtitles.value
-    return `${index + 1}\n${subtitle.start} --> ${subtitle.end}\n${subtitle.text}\n`
+    .map((subtitle, index) => {
-  }).join('\n')
+      return `${index + 1}\n${subtitle.start} --> ${subtitle.end}\n${
+        subtitle.text
+      }\n`
+    })
+    .join('\n')
 }
 
 const formatTime = (time: string) => {
@@ -113,7 +117,11 @@ const formatTime = (time: string) => {
 const formatTimeToDayjs = (time: string) => {
   const parts = time.split(',')
   const timeParts = parts[0].split(':')
-  return dayjs().hour(parseInt(timeParts[0])).minute(parseInt(timeParts[1])).second(parseInt(timeParts[2])).millisecond(parseInt(parts[1]))
+  return dayjs()
+    .hour(parseInt(timeParts[0]))
+    .minute(parseInt(timeParts[1]))
+    .second(parseInt(timeParts[2]))
+    .millisecond(parseInt(parts[1]))
 }
 
 const syncSubtitles = () => {
@@ -121,17 +129,23 @@ const syncSubtitles = () => {
 
   const currentTime = videoElement.value.currentTime * 1000 // convert to milliseconds
 
-  subtitles.value.forEach(subtitle => {
+  subtitles.value.forEach((subtitle) => {
     const start = formatTime(subtitle.start)
     const end = formatTime(subtitle.end)
 
-    const startTime = (start.hours * 3600 + start.minutes * 60 + start.seconds) * 1000 + start.milliseconds
+    const startTime =
-    const endTime = (end.hours * 3600 + end.minutes * 60 + end.seconds) * 1000 + end.milliseconds
+      (start.hours * 3600 + start.minutes * 60 + start.seconds) * 1000 +
+      start.milliseconds
+    const endTime =
+      (end.hours * 3600 + end.minutes * 60 + end.seconds) * 1000 +
+      end.milliseconds
 
     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({
@@ -144,9 +158,11 @@ const syncSubtitles = () => {
 const onSubtitleInputClick = (subtitle: Subtitle) => {
   if (!videoElement.value) return
   if (!subtitle.active) {
-    videoElement.value.currentTime = formatTime(subtitle.start).hours * 3600 +
+    videoElement.value.currentTime =
+      formatTime(subtitle.start).hours * 3600 +
       formatTime(subtitle.start).minutes * 60 +
-      formatTime(subtitle.start).seconds + 1
+      formatTime(subtitle.start).seconds +
+      1
   }
   videoElement.value.pause()
 }
@@ -163,42 +179,63 @@ const saveNewSubtitle = () => {
     sub_type: 1,
     sub_content: encodedSubtitle,
     task_id: props.course?.task_id,
-  }).then(_ => {
-    modified.value = false
-    toast.add({
-      color: 'green',
-      title: '字幕已保存',
-      description: '修改后的字幕文件已保存',
-    })
-  }).finally(() => {
-    isSaving.value = false
   })
+    .then((_) => {
+      modified.value = false
+      toast.add({
+        color: 'green',
+        title: '字幕已保存',
+        description: '修改后的字幕文件已保存',
+      })
+    })
+    .finally(() => {
+      isSaving.value = false
+    })
 }
 
-const exportVideo = () => {
+const exportVideo = async () => {
   isExporting.value = true
-  useVideoSubtitleEmbedding(props.course.video_url, props.course.subtitle_url, {
+  const srtResponse = await (
+    await fetch(await fetchCourseSubtitleUrl(props.course))
+  ).blob()
+  if (!srtResponse) {
+    toast.add({
+      title: '获取字幕失败',
+      description: '无法获取字幕文件，请稍后重试',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+    return
+  }
+  const srtBlob = new Blob([srtResponse], { type: 'text/plain' })
+  const srtUrl = URL.createObjectURL(srtBlob)
+  useVideoSubtitleEmbedding(props.course.video_url, srtUrl, {
     color: subtitleStyleState.color,
     fontSize: subtitleStyleState.fontSize,
-    textShadow: subtitleStyleState.effect === 'shadow' ? {
+    textShadow:
-      offsetX: 2,
+      subtitleStyleState.effect === 'shadow'
-      offsetY: 2,
+        ? {
-      blur: 6,
+            offsetX: 2,
-      color: "rgba(0, 0, 0, 0.35)",
+            offsetY: 2,
-    } : {
+            blur: 6,
-      offsetX: 0,
+            color: 'rgba(0, 0, 0, 0.35)',
-      offsetY: 0,
+          }
-      blur: 0,
+        : {
-      color: 'transparent',
+            offsetX: 0,
-    },
+            offsetY: 0,
+            blur: 0,
+            color: 'transparent',
+          },
     strokeStyle: subtitleStyleState.effect === 'stroke' ? '#000 2px' : 'none',
     bottomOffset: subtitleStyleState.bottomOffset,
-  }).then(blobUrl => {
-    const { download } = useDownload(blobUrl, 'combined_video.mp4')
-    download()
-  }).finally(() => {
-    isExporting.value = false
   })
+    .then((blobUrl) => {
+      const { download } = useDownload(blobUrl, 'combined_video.mp4')
+      download()
+    })
+    .finally(() => {
+      isExporting.value = false
+    })
 }
 
 onMounted(() => {
@@ -220,133 +257,308 @@ defineExpose({
 
 <template>
   <div>
-    <USlideover v-model="isDrawerActive" :prevent-close="modified" :ui="{ width: 'max-w-lg' }">
+    <USlideover
-      <UCard class="flex flex-col flex-1 overflow-hidden" :ui="{
+      v-model="isDrawerActive"
-        body: { base: 'overflow-auto flex-1' },
+      :prevent-close="modified"
-        ring: '',
+      :ui="{ width: 'max-w-lg' }"
-        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="tabler:x"
+          <UButton
-            class="flex sm:hidden absolute end-5 top-5 z-10" square padded @click="isDrawerActive = false" />
+            color="gray"
+            variant="ghost"
+            size="sm"
+            icon="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">
+            <h3
+              class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
+            >
               字幕编辑器
             </h3>
-            <h3 class="text-xs font-semibold text-blue-500" v-if="course.title">
+            <h3
+              class="text-xs font-semibold text-blue-500"
+              v-if="course.title"
+            >
               {{ course.title }}
             </h3>
           </div>
         </template>
 
-        <div v-if="isLoading" class="flex justify-center items-center text-primary">
+        <div
-          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+          v-if="isLoading"
+          class="flex justify-center items-center text-primary"
+        >
+          <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" />
+                <feGaussianBlur
-                <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" />
+                  in="SourceGraphic"
-                <feBlend in="SourceGraphic" in2="z" />
+                  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">
+              <circle
-                <animate attributeName="cx" calcMode="spline" dur="2s" keySplines=".36,.62,.43,.99;.79,0,.58,.57"
+                cx="5"
-                  repeatCount="indefinite" values="5;8;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"
+                />
               </circle>
-              <circle cx="19" cy="12" r="4" fill="currentColor">
+              <circle
-                <animate attributeName="cx" calcMode="spline" dur="2s" keySplines=".36,.62,.43,.99;.79,0,.58,.57"
+                cx="19"
-                  repeatCount="indefinite" values="19;16;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"
+                />
               </circle>
-              <animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate"
+              <animateTransform
-                values="0 12 12;360 12 12" />
+                attributeName="transform"
+                dur="0.75s"
+                repeatCount="indefinite"
+                type="rotate"
+                values="0 12 12;360 12 12"
+              />
             </g>
           </svg>
         </div>
-        <div v-else class="flex flex-col h-full gap-2 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 w-full aspect-video flex-1">
-            <div class="absolute w-fit mx-auto inset-x-0 font-sans font-bold subtitle" :class="{
+            <div
-              'stroke': subtitleStyleState.effect === 'stroke',
+              class="absolute w-fit mx-auto inset-x-0 font-sans font-bold subtitle"
-            }" :style="{
+              :class="{
-              lineHeight: '1',
+                stroke: subtitleStyleState.effect === 'stroke',
-              color: subtitleStyleState.color,
+              }"
-              fontSize: subtitleStyleState.fontSize / 1.5 + 'px',
+              :style="{
-              bottom: subtitleStyleState.bottomOffset / 1.5 + 'px',
+                lineHeight: '1',
-              textShadow: subtitleStyleState.effect === 'shadow' ? '2px 2px 4px rgba(0, 0, 0, 0.25)' : undefined
+                color: subtitleStyleState.color,
-            }">
+                fontSize: subtitleStyleState.fontSize / 1.5 + 'px',
-              {{ subtitles.find(sub => sub.active)?.text }}
+                bottom: subtitleStyleState.bottomOffset / 1.5 + 'px',
+                textShadow:
+                  subtitleStyleState.effect === 'shadow'
+                    ? '2px 2px 4px rgba(0, 0, 0, 0.25)'
+                    : undefined,
+              }"
+            >
+              {{ subtitles.find((sub) => sub.active)?.text }}
             </div>
-            <video controls ref="videoElement" class="rounded" style="-webkit-user-drag: none;" :src="course.video_url"
+            <video
-              @timeupdate="syncSubtitles" />
+              controls
+              ref="videoElement"
+              class="rounded"
+              style="-webkit-user-drag: none"
+              :src="course.video_url"
+              @timeupdate="syncSubtitles"
+            />
           </div>
-          <UAccordion :items="[{ label: '字幕选项' }]" color="gray" size="lg">
+          <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="border dark:border-neutral-700 rounded-lg space-y-4 p-4 pb-6"
+              >
                 <div class="w-full flex flex-col justify-center">
-                  <div class="rounded-md w-full aspect-video relative overflow-hidden">
+                  <div
-                    <img class="object-cover w-full h-full rounded-md"
+                    class="rounded-md w-full aspect-video relative overflow-hidden"
-                      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 subtitle"
+                    <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 subtitle"
                       :class="{
-                        'stroke': subtitleStyleState.effect === 'stroke',
+                        stroke: subtitleStyleState.effect === 'stroke',
-                      }" :style="{
+                      }"
+                      :style="{
                         lineHeight: '1',
                         color: subtitleStyleState.color,
                         fontSize: subtitleStyleState.fontSize / 1.5 + 'px',
                         bottom: subtitleStyleState.bottomOffset / 1.5 + 'px',
-                        textShadow: subtitleStyleState.effect === 'shadow' ? '2px 2px 4px rgba(0, 0, 0, 0.25)' : undefined,
+                        textShadow:
-                      }">
+                          subtitleStyleState.effect === 'shadow'
+                            ? '2px 2px 4px rgba(0, 0, 0, 0.25)'
+                            : undefined,
+                      }"
+                    >
                       字幕样式预览
                     </span>
                   </div>
-                  <span class="text-sm italic opacity-50">字幕预览仅供参考，以实际渲染效果为准</span>
+                  <span class="text-sm italic opacity-50">
+                    字幕预览仅供参考，以实际渲染效果为准
+                  </span>
                 </div>
-                <UForm :schema="subtitleStyleSchema" :state="subtitleStyleState" class="flex flex-col gap-4">
+                <UForm
+                  :schema="subtitleStyleSchema"
+                  :state="subtitleStyleState"
+                  class="flex flex-col gap-4"
+                >
                   <div class="flex gap-4">
-                    <UFormGroup label="字幕颜色" name="fontColor" class="w-full" size="xs">
+                    <UFormGroup
-                      <USelectMenu :options="[{
+                      label="字幕颜色"
-                        label: '黑色',
+                      name="fontColor"
-                        value: '#000',
+                      class="w-full"
-                      }, {
+                      size="xs"
-                        label: '白色',
+                    >
-                        value: '#fff',
+                      <USelectMenu
-                      }]" option-attribute="label" value-attribute="value" v-model="subtitleStyleState.color" />
+                        :options="[
+                          {
+                            label: '黑色',
+                            value: '#000',
+                          },
+                          {
+                            label: '白色',
+                            value: '#fff',
+                          },
+                        ]"
+                        option-attribute="label"
+                        value-attribute="value"
+                        v-model="subtitleStyleState.color"
+                      />
                     </UFormGroup>
-                    <UFormGroup label="字幕效果" name="effect" class="w-full" size="xs">
+                    <UFormGroup
-                      <USelectMenu :options="[{
+                      label="字幕效果"
-                        label: '阴影',
+                      name="effect"
-                        value: 'shadow',
+                      class="w-full"
-                      }, {
+                      size="xs"
-                        label: '描边',
+                    >
-                        value: 'stroke',
+                      <USelectMenu
-                      }]" option-attribute="label" value-attribute="value" v-model="subtitleStyleState.effect" />
+                        :options="[
+                          {
+                            label: '阴影',
+                            value: 'shadow',
+                          },
+                          {
+                            label: '描边',
+                            value: 'stroke',
+                          },
+                        ]"
+                        option-attribute="label"
+                        value-attribute="value"
+                        v-model="subtitleStyleState.effect"
+                      />
                     </UFormGroup>
                   </div>
-                  <UFormGroup :label="`字幕大小 ${subtitleStyleState.fontSize}px`" name="fontSize" size="xs">
+                  <UFormGroup
-                    <URange :max="64" :min="20" :step="2" size="sm" v-model="subtitleStyleState.fontSize" />
+                    :label="`字幕大小 ${subtitleStyleState.fontSize}px`"
+                    name="fontSize"
+                    size="xs"
+                  >
+                    <URange
+                      :max="64"
+                      :min="20"
+                      :step="2"
+                      size="sm"
+                      v-model="subtitleStyleState.fontSize"
+                    />
                   </UFormGroup>
-                  <UFormGroup :label="`字幕偏移量 ${subtitleStyleState.bottomOffset}px`" name="offset" size="xs">
+                  <UFormGroup
-                    <URange :max="30" :min="0" :step="1" size="sm" v-model="subtitleStyleState.bottomOffset" />
+                    :label="`字幕偏移量 ${subtitleStyleState.bottomOffset}px`"
+                    name="offset"
+                    size="xs"
+                  >
+                    <URange
+                      :max="30"
+                      :min="0"
+                      :step="1"
+                      size="sm"
+                      v-model="subtitleStyleState.bottomOffset"
+                    />
                   </UFormGroup>
                 </UForm>
               </div>
             </template>
           </UAccordion>
-          <ul class="flex-1 px-0.5 pb-[100%] overflow-y-auto space-y-0.5 scroll-smooth relative">
+          <ul
-            <li v-for="(subtitle, index) in subtitles" :key="index" :id="'subtitle-' + index">
+            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') }}
                   -
                   {{ formatTimeToDayjs(subtitle.end).format('HH:mm:ss') }}
                   <span class="opacity-50">
-                    [{{ formatTimeToDayjs(subtitle.end).diff(formatTimeToDayjs(subtitle.start), 'second') }}s]
+                    [{{
+                      formatTimeToDayjs(subtitle.end).diff(
+                        formatTimeToDayjs(subtitle.start),
+                        'second'
+                      )
+                    }}s]
                   </span>
                 </span>
-                <UInput v-model="subtitle.text" class="w-full" placeholder="请输入字幕内容" :name="'subtitle-' + index"
+                <UInput
-                  :autofocus="false" :color="subtitle.active ? 'primary' : undefined"
+                  v-model="subtitle.text"
-                  @click="onSubtitleInputClick(subtitle)" @input="() => { if (!modified) modified = true }">
+                  class="w-full"
+                  placeholder="请输入字幕内容"
+                  :name="'subtitle-' + index"
+                  :autofocus="false"
+                  :color="subtitle.active ? 'primary' : undefined"
+                  @click="onSubtitleInputClick(subtitle)"
+                  @input="
+                    () => {
+                      if (!modified) modified = true
+                    }
+                  "
+                >
                   <template #trailing>
-                    <UIcon v-show="subtitle.active" name="tabler:keyframe-align-vertical-filled" />
+                    <UIcon
+                      v-show="subtitle.active"
+                      name="tabler:keyframe-align-vertical-filled"
+                    />
                   </template>
                 </UInput>
               </div>
@@ -356,12 +568,26 @@ defineExpose({
 
         <template #footer>
           <div class="flex justify-end items-center gap-2">
-            <span v-if="modified" class="text-sm text-yellow-500 font-medium">已更改但未保存</span>
+            <span
-            <UButton :loading="isExporting" variant="soft" icon="i-tabler-file-export" @click="exportVideo">
+              v-if="modified"
+              class="text-sm text-yellow-500 font-medium"
+            >
+              已更改但未保存
+            </span>
+            <UButton
+              :loading="isExporting"
+              variant="soft"
+              icon="i-tabler-file-export"
+              @click="exportVideo"
+            >
               导出视频
             </UButton>
-            <UButton :disabled="isExporting || !modified" :loading="isSaving" icon="i-tabler-device-floppy"
+            <UButton
-              @click="saveNewSubtitle">
+              :disabled="isExporting || !modified"
+              :loading="isSaving"
+              icon="i-tabler-device-floppy"
+              @click="saveNewSubtitle"
+            >
               保存{{ isSaving ? '中' : '' }}
             </UButton>
           </div>
@@ -377,20 +603,18 @@ defineExpose({
 }
 
 .overshadow:after {
-  content: "";
+  content: '';
   inset: 80% 0 0;
   position: absolute;
   @apply bg-gradient-to-b from-transparent to-white dark:to-neutral-950 pointer-events-none;
 }
 
 .subtitle.stroke {
-  text-shadow: 1px 1px 0 #000,
+  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000,
-    -1px -1px 0 #000,
-    1px -1px 0 #000,
     -1px 1px 0 #000;
 }
 
 .subtitle.shadow {
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
 }
-</style>
+</style>