XuanShengHua/xsh-assistant-next
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Timothy Yin
2025-10-28 15:00:59 +08:00
parent d748306ab3
commit a821157453
1 changed files with 351 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

476
components/aigc/generation/SRTEditor.vue
View File

@@ -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;
end: string;
text: string;
start: string
end: 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 `${index + 1}\n${subtitle.start} --> ${subtitle.end}\n${subtitle.text}\n`
}).join('\n')
return subtitles.value
.map((subtitle, index) => {
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 endTime = (end.hours * 3600 + end.minutes * 60 + end.seconds) * 1000 + end.milliseconds
const startTime =
(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' ? {
offsetX: 2,
offsetY: 2,
blur: 6,
color: "rgba(0, 0, 0, 0.35)",
} : {
offsetX: 0,
offsetY: 0,
blur: 0,
color: 'transparent',
},
textShadow:
subtitleStyleState.effect === 'shadow'
? {
offsetX: 2,
offsetY: 2,
blur: 6,
color: 'rgba(0, 0, 0, 0.35)',
}
: {
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' }">
<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'
}">
<USlideover
v-model="isDrawerActive"
:prevent-close="modified"
:ui="{ width: 'max-w-lg' }"
>
<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"
class="flex sm:hidden absolute end-5 top-5 z-10" square padded @click="isDrawerActive = false" />
<UButton
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">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
<div
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" />
<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" />
<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"
/>
</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" />
<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"
/>
</circle>
<animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate"
values="0 12 12;360 12 12" />
<animateTransform
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="{
'stroke': subtitleStyleState.effect === 'stroke',
}" :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
}">
{{ subtitles.find(sub => sub.active)?.text }}
<div
class="absolute w-fit mx-auto inset-x-0 font-sans font-bold subtitle"
:class="{
stroke: subtitleStyleState.effect === 'stroke',
}"
: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,
}"
>
{{ subtitles.find((sub) => sub.active)?.text }}
</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>
<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">
<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"
<div
class="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 subtitle"
:class="{
'stroke': subtitleStyleState.effect === 'stroke',
}" :style="{
stroke: subtitleStyleState.effect === 'stroke',
}"
: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">
<USelectMenu :options="[{
label: '黑色',
value: '#000',
}, {
label: '白色',
value: '#fff',
}]" option-attribute="label" value-attribute="value" v-model="subtitleStyleState.color" />
<UFormGroup
label="字幕颜色"
name="fontColor"
class="w-full"
size="xs"
>
<USelectMenu
: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">
<USelectMenu :options="[{
label: '阴影',
value: 'shadow',
}, {
label: '描边',
value: 'stroke',
}]" option-attribute="label" value-attribute="value" v-model="subtitleStyleState.effect" />
<UFormGroup
label="字幕效果"
name="effect"
class="w-full"
size="xs"
>
<USelectMenu
: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">
<URange :max="64" :min="20" :step="2" size="sm" v-model="subtitleStyleState.fontSize" />
<UFormGroup
: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">
<URange :max="30" :min="0" :step="1" size="sm" v-model="subtitleStyleState.bottomOffset" />
<UFormGroup
: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">
<li v-for="(subtitle, index) in subtitles" :key="index" :id="'subtitle-' + index">
<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') }}
-
{{ 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"
: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>
<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>
<UButton :loading="isExporting" variant="soft" icon="i-tabler-file-export" @click="exportVideo">
<span
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"
@click="saveNewSubtitle">
<UButton
:disabled="isExporting || !modified"
:loading="isSaving"
icon="i-tabler-device-floppy"
@click="saveNewSubtitle"
>
保存{{ isSaving ? '中' : '' }}
</UButton>
</div>
@@ -377,16 +603,14 @@ 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,
-1px -1px 0 #000,
1px -1px 0 #000,
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000,
-1px 1px 0 #000;
}