feat: 绿幕视频创建和微课视频创建
This commit is contained in:
307
components/aigc/generation/SRTEditor.vue
Normal file
307
components/aigc/generation/SRTEditor.vue
Normal file
@@ -0,0 +1,307 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user