307 lines
9.5 KiB
Vue
307 lines
9.5 KiB
Vue
<script setup lang="ts">
|
|
import type { PropType } from 'vue'
|
|
import { encode } from '@monosky/base64'
|
|
|
|
interface Subtitle {
|
|
start: string;
|
|
end: string;
|
|
text: string;
|
|
active?: boolean
|
|
}
|
|
|
|
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 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 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>
|
|
<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}">
|
|
<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> |