358 lines
12 KiB
Vue
358 lines
12 KiB
Vue
<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;
|
|
end: string;
|
|
text: string;
|
|
active?: boolean
|
|
}
|
|
|
|
type SubtitleStyleEdit = Pick<SubtitleEmbeddingOptions, 'color' | 'fontSize' | 'bottomOffset' | 'strokeStyle' | 'textShadow'>
|
|
|
|
const props = defineProps({
|
|
course: {
|
|
type: Object as PropType<resp.gen.CourseGenItem>,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const dayjs = useDayjs()
|
|
const toast = useToast()
|
|
const loginState = useLoginState()
|
|
|
|
const isDrawerActive = ref(false)
|
|
const isLoading = ref(true)
|
|
const isSaving = ref(false)
|
|
const rawSrt = ref<string | null>(null)
|
|
const subtitles = ref<Subtitle[]>([])
|
|
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 {
|
|
// const response = await fetch(props.course.subtitle_url)
|
|
const response = await fetch(await fetchCourseSubtitleUrl(props.course))
|
|
const text = await response.text()
|
|
rawSrt.value = text
|
|
parseSrt(text)
|
|
} catch (err) {
|
|
toast.add({
|
|
title: '加载字幕失败',
|
|
description: `${err}` || '未知错误',
|
|
color: 'red',
|
|
})
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
|
|
const parseSrt = (srt: string) => {
|
|
const lines = srt.split(/\r?\n/)
|
|
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 => {
|
|
if (/^\d+$/.test(line.trim())) return
|
|
|
|
const match = line.match(regex)
|
|
if (match) {
|
|
if (subtitle) {
|
|
subtitles.value.push(subtitle)
|
|
}
|
|
subtitle = {
|
|
start: match[1],
|
|
end: match[2],
|
|
text: '',
|
|
}
|
|
} else if (subtitle) {
|
|
subtitle.text += (line.trim() ? line : '')
|
|
}
|
|
})
|
|
|
|
if (subtitle) {
|
|
subtitles.value.push(subtitle)
|
|
}
|
|
}
|
|
|
|
const generateSrt = () => {
|
|
return subtitles.value.map((subtitle, index) => {
|
|
return `${index + 1}\n${subtitle.start} --> ${subtitle.end}\n${subtitle.text}\n`
|
|
}).join('\n')
|
|
}
|
|
|
|
const formatTime = (time: string) => {
|
|
const parts = time.split(',')
|
|
const timeParts = parts[0].split(':')
|
|
return {
|
|
hours: parseInt(timeParts[0]),
|
|
minutes: parseInt(timeParts[1]),
|
|
seconds: parseInt(timeParts[2]),
|
|
milliseconds: parseInt(parts[1]),
|
|
}
|
|
}
|
|
|
|
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]))
|
|
}
|
|
|
|
const syncSubtitles = () => {
|
|
if (!videoElement.value) return
|
|
|
|
const currentTime = videoElement.value.currentTime * 1000 // convert to milliseconds
|
|
|
|
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
|
|
|
|
subtitle.active = currentTime >= startTime && currentTime <= endTime
|
|
// scroll active subtitle into view
|
|
if (subtitle.active) {
|
|
const element = document.getElementById(`subtitle-${subtitles.value.indexOf(subtitle)}`)!
|
|
const parent = element?.parentElement
|
|
// scroll element to the center of parent
|
|
parent?.scrollTo({
|
|
top: element.offsetTop,
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
const onSubtitleInputClick = (subtitle: Subtitle) => {
|
|
if (!videoElement.value) return
|
|
if (!subtitle.active) {
|
|
videoElement.value.currentTime = formatTime(subtitle.start).hours * 3600 +
|
|
formatTime(subtitle.start).minutes * 60 +
|
|
formatTime(subtitle.start).seconds + 1
|
|
}
|
|
videoElement.value.pause()
|
|
}
|
|
|
|
const saveNewSubtitle = () => {
|
|
isSaving.value = true
|
|
const encodedSubtitle = encode(generateSrt())
|
|
useFetchWrapped<
|
|
req.gen.CourseSubtitleCreate & AuthedRequest,
|
|
BaseResponse<resp.gen.CourseSubtitleCreate>
|
|
>('App.Digital_VideoSubtitle.CreateFile', {
|
|
token: loginState.token!,
|
|
user_id: loginState.user.id,
|
|
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
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (rawSrt.value) {
|
|
parseSrt(rawSrt.value)
|
|
}
|
|
})
|
|
|
|
defineExpose({
|
|
open() {
|
|
isDrawerActive.value = true
|
|
if (!rawSrt.value) loadSrt()
|
|
},
|
|
close() {
|
|
isDrawerActive.value = false
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<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'
|
|
}">
|
|
<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" />
|
|
<div class="flex flex-col">
|
|
<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">
|
|
{{ 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">
|
|
<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" />
|
|
</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>
|
|
<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" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<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" />
|
|
</div>
|
|
<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') }}
|
|
-
|
|
{{ formatTimeToDayjs(subtitle.end).format('HH:mm:ss') }}
|
|
<span class="opacity-50">
|
|
[{{ 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 }">
|
|
<template #trailing>
|
|
<Icon v-if="subtitle.active" name="tabler:keyframe-align-vertical-filled" />
|
|
</template>
|
|
</UInput>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<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 :disabled="!modified" :loading="isSaving" icon="i-tabler-device-floppy" @click="saveNewSubtitle">
|
|
保存{{ isSaving ? '中' : '' }}
|
|
</UButton>
|
|
</div>
|
|
</template>
|
|
</UCard>
|
|
</USlideover>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.overshadow {
|
|
@apply relative;
|
|
}
|
|
|
|
.overshadow:after {
|
|
content: "";
|
|
inset: 80% 0 0;
|
|
position: absolute;
|
|
@apply bg-gradient-to-b from-transparent to-white dark:to-neutral-950;
|
|
}
|
|
</style> |