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

🚧 wip: add video subtitle embedding

Browse Source
This commit is contained in:
Timothy Yin
2025-01-02 11:48:56 +08:00
parent 3a9a769237
commit 30e03e818f
12 changed files with 561 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

295
components/aigc/generation/CGTaskCard.client.vue Normal file
View File

@@ -0,0 +1,295 @@
<script setup lang="ts">
import type { PropType } from 'vue'
import dayjs from 'dayjs'
import { useDownload } from '~/composables/useDownload'
import gsap from 'gsap'
import SRTEditor from '~/components/aigc/generation/SRTEditor.vue'
const toast = useToast()
const { metaSymbol } = useShortcuts()
const srtEditor = ref()
const props = defineProps({
course: {
type: Object as PropType<resp.gen.CourseGenItem>,
required: true,
},
})
const emit = defineEmits(['delete'])
defineShortcuts({
'p': {
handler: () => {
if (isDropdownOpen.value && isDownloadable.value) {
isPreviewModalOpen.value = true
}
},
},
'meta_d': {
handler: () => {
if (isDropdownOpen.value && isDownloadable.value) {
srtEditor.value.open()
isDropdownOpen.value = false
}
},
},
'meta_s': {
handler: async () => {
if (isDropdownOpen.value && isDownloadable.value) {
await startDownload(await fetchCourseSubtitleUrl(props.course), `眩生花微课_${props.course.title}_${props.course.task_id}.srt`)
}
},
},
'delete': {
handler: () => {
if (isDropdownOpen.value) {
emit('delete', props.course.task_id)
}
},
},
})
const isDropdownOpen = ref(false)
const isPreviewModalOpen = ref(false)
const stateDisplay = computed(() => {
if (props.course.progress === -1) return {
color: 'red',
text: '失败',
}
if (props.course.progress === 100) return {
color: 'green',
text: '完成',
}
return {
color: 'blue',
text: !!props.course.progress ? `${tweenedGenerateProgress.value.toFixed(0)}%` : '队列中',
}
})
const isFailed = computed(() => props.course.progress === -1)
const isDownloadable = computed(() => !isFailed.value && props.course.progress === 100)
const generateProgress = computed(() => {
return props.course.progress || 0
})
const tweenedGenerateProgress = ref(0)
watch(generateProgress, (newValue) => {
gsap.to(tweenedGenerateProgress, {
duration: 5,
value: newValue,
})
}, {
immediate: true,
})
const downloadProgress = ref(0)
const startDownload = async (
url: string,
filename: string,
) => {
downloadProgress.value = 0
const {
download,
progressEmitter,
} = useDownload(url, filename)
progressEmitter.on('done', () => {
downloadProgress.value = 100
toast.add({
title: '下载完成',
description: '资源下载已完成',
color: 'green',
icon: 'i-tabler-check',
})
})
progressEmitter.on('progress', (progress) => {
downloadProgress.value = progress
})
progressEmitter.on('error', err => {
downloadProgress.value = 0
toast.add({
title: '下载失败',
description: err.message || '下载失败，未知错误',
color: 'red',
icon: 'i-tabler-alert-triangle',
})
})
download()
}
const copyTaskId = (extraMessage?: string) => {
navigator.clipboard.writeText(props.course.task_id + (extraMessage ? ` ${extraMessage}` : ''))
toast.add({
title: '复制成功',
description: '已复制任务 ID',
color: 'green',
icon: 'i-tabler-check',
})
}
const isCombinationModalOpen = ref(false)
const combinationState = ref<0 | 1 | undefined>(0)
const onCombination = () => {
isCombinationModalOpen.value = true
combinationState.value = undefined
useVideoSubtitleEmbedding(props.course.video_url, props.course.subtitle_url).then(src => {
startDownload(src, `眩生花微课_${props.course.title}_${props.course.task_id}_combinated.mp4`)
combinationState.value = 1
}).catch(err => {
toast.add({
title: '嵌入字幕失败',
description: err.message || '未知错误',
color: 'red',
icon: 'i-tabler-alert-triangle',
})
combinationState.value = 0
}).finally(() => {
setTimeout(() => {
combinationState.value = 0
isCombinationModalOpen.value = false
}, 3000)
})
}
</script>
<template>
<div
class="w-full rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow transition overflow-hidden">
<div class="relative w-full aspect-video">
<NuxtImg class="w-full aspect-video object-cover pointer-events-none absolute inset-0" v-if="!!course.video_cover"
:src="course.video_cover" alt="image" loading="lazy" />
<div v-else
class="absolute inset-0 bg-gradient-to-br from-purple-400 to-primary-400 flex justify-center items-center pattern">
<Icon v-if="isFailed" class="text-white text-[64px] opacity-50" name="i-tabler-alert-triangle" />
<Icon v-else class="text-white text-[64px] animate-pulse" name="i-tabler-photo-video" />
</div>
<div class="absolute inset-2 flex justify-end items-start">
<UTooltip :prevent="course.progress > -1" :text="course.message || ''">
<UBadge :color="stateDisplay.color" :variant="isFailed ? 'solid' : 'subtle'" class="shadow" size="sm">
<Icon v-if="isFailed" class="text-base mr-0.5" name="i-tabler-alert-triangle" />
{{ stateDisplay.text }}
</UBadge>
</UTooltip>
</div>
</div>
<div class="px-2 pt-1 pb-2 flex justify-between">
<div class="flex-1 overflow-hidden pt-1">
<h1 :title="course.title"
class="inline-flex items-center text-sm font-medium overflow-hidden text-ellipsis text-nowrap">
<Icon class="text-base" name="i-tabler-book-2" />
<span class="pl-0.5">{{ course.title }}</span>
</h1>
<p class="text-xs pt-0.5 text-neutral-400 space-x-2">
<span>{{ dayjs(course.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
<button v-if="course.task_id" class="hover:text-primary font-medium" tabindex="-1" :title="course.task_id"
@click="copyTaskId(isFailed ? `\n\n${course.message}\n${course.ppt_url}` : '')">
复制ID
</button>
</p>
</div>
<div class="flex items-center gap-1">
<UButtonGroup>
<UButton color="white" :disabled="!isDownloadable" label="下载" leading-icon="i-tabler-download" size="xs"
@click="onCombination" />
<UDropdown v-model:open="isDropdownOpen" :items="[
[{
label: '下载原视频',
icon: 'i-tabler-file-plus',
click: () => startDownload(course.video_url, `眩生花微课_${props.course.title}_${props.course.task_id}.mp4`),
}, {
label: '预览课程',
icon: 'i-tabler-play',
shortcuts: ['P'],
disabled: !isDownloadable,
click: () => isPreviewModalOpen = true,
}, {
label: '编辑字幕',
icon: 'i-solar-subtitles-linear',
shortcuts: [metaSymbol, 'D'],
disabled: !isDownloadable,
click: () => {
srtEditor.open()
isDropdownOpen = false
}
}, {
label: '下载字幕',
icon: 'i-tabler-file-download',
shortcuts: [metaSymbol, 'S'],
disabled: !isDownloadable,
click: async () => {
await startDownload(await fetchCourseSubtitleUrl(course), `眩生花微课_${props.course.title}_${props.course.task_id}.srt`)
}
}], [{
label: '删除记录',
icon: 'i-tabler-trash-x',
shortcuts: ['Delete'],
click: () => emit('delete', course.task_id)
}],
]" :popper="{ placement: 'bottom-end' }">
<UButton :disabled="course.progress > 1 && course.progress < 100" color="white" size="xs"
trailing-icon="i-tabler-dots" />
</UDropdown>
</UButtonGroup>
</div>
</div>
<UModal v-model="isPreviewModalOpen">
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header>
<div class="flex items-center justify-between">
<div class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden">
<p>微课视频预览</p>
<p class="text-xs text-blue-500 w-full overflow-hidden text-nowrap text-ellipsis">
{{ course.title }}
</p>
</div>
<UButton class="-my-1" color="gray" icon="i-tabler-x" variant="ghost" @click="isPreviewModalOpen = false" />
</div>
</template>
<video class="w-full rounded shadow" controls autoplay :src="course.video_url" />
</UCard>
</UModal>
<UModal v-model="isCombinationModalOpen">
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header>
<div class="flex items-center justify-between">
<div class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden">
<p>嵌入视频字幕</p>
<p class="text-xs text-blue-500 w-full overflow-hidden text-nowrap text-ellipsis">
{{ course.title }}
</p>
</div>
<UButton class="-my-1" color="gray" icon="i-tabler-x" variant="ghost"
@click="isCombinationModalOpen = false" />
</div>
</template>
<UProgress animation="carousel" :value="combinationState" :max="[
'嵌入字幕中',
'合并完成，开始下载',
]">
<template #step-0="{ step }">
<span class="inline-flex items-center gap-1 text-emerald-500">
<UIcon name="tabler:text-caption" /> {{ step }}
</span>
</template>
<template #step-1="{ step }">
<span class="inline-flex items-center gap-1 text-primary-500">
<UIcon name="tabler:paperclip" /> {{ step }}
</span>
</template>
</UProgress>
</UCard>
</UModal>
<SRTEditor ref="srtEditor" :course="course" />
</div>
</template>
<style scoped></style>

296
components/aigc/generation/CGTaskCard.vue
View File

@@ -1,296 +0,0 @@
<script setup lang="ts">
import type { PropType } from 'vue'
import dayjs from 'dayjs'
import { useDownload } from '~/composables/useDownload'
import gsap from 'gsap'
import SRTEditor from '~/components/aigc/generation/SRTEditor.vue'
const toast = useToast()
const { metaSymbol } = useShortcuts()
const srtEditor = ref()
const props = defineProps({
course: {
type: Object as PropType<resp.gen.CourseGenItem>,
required: true,
},
})
const emit = defineEmits([
'delete',
])
defineShortcuts({
'p': {
handler: () => {
if (isDropdownOpen.value && isDownloadable.value) {
isPreviewModalOpen.value = true
}
},
},
'meta_d': {
handler: () => {
if (isDropdownOpen.value && isDownloadable.value) {
srtEditor.value.open()
isDropdownOpen.value = false
}
},
},
'meta_s': {
handler: async () => {
if (isDropdownOpen.value && isDownloadable.value) {
await startDownload(await fetchCourseSubtitleUrl(props.course), `眩生花微课_${ props.course.title }_${ props.course.task_id }.srt`)
}
},
},
'delete': {
handler: () => {
if (isDropdownOpen.value) {
emit('delete', props.course.task_id)
}
},
},
})
const isDropdownOpen = ref(false)
const isPreviewModalOpen = ref(false)
const stateDisplay = computed(() => {
if (props.course.progress === -1) return {
color: 'red',
text: '失败',
}
if (props.course.progress === 100) return {
color: 'green',
text: '完成',
}
return {
color: 'blue',
text: !!props.course.progress ? `${ tweenedGenerateProgress.value.toFixed(0) }%` : '队列中',
}
})
const isFailed = computed(() => props.course.progress === -1)
const isDownloadable = computed(() => !isFailed.value && props.course.progress === 100)
const generateProgress = computed(() => {
return props.course.progress || 0
})
const tweenedGenerateProgress = ref(0)
watch(generateProgress, (newValue) => {
gsap.to(tweenedGenerateProgress, {
duration: 5,
value: newValue,
})
}, {
immediate: true,
})
const downloadProgress = ref(0)
const startDownload = async (
url: string,
filename: string,
) => {
downloadProgress.value = 0
const {
download,
progressEmitter,
} = useDownload(url, filename)
progressEmitter.on('done', () => {
downloadProgress.value = 100
toast.add({
title: '下载完成',
description: '资源下载已完成',
color: 'green',
icon: 'i-tabler-check',
})
})
progressEmitter.on('progress', (progress) => {
downloadProgress.value = progress
})
progressEmitter.on('error', err => {
downloadProgress.value = 0
toast.add({
title: '下载失败',
description: err.message || '下载失败，未知错误',
color: 'red',
icon: 'i-tabler-alert-triangle',
})
})
download()
}
const copyTaskId = (extraMessage?: string) => {
navigator.clipboard.writeText(props.course.task_id + (extraMessage ? ` ${ extraMessage }` : ''))
toast.add({
title: '复制成功',
description: '已复制任务 ID',
color: 'green',
icon: 'i-tabler-check',
})
}
</script>
<template>
<div
class="w-full rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow transition overflow-hidden"
>
<div class="relative w-full aspect-video">
<NuxtImg
class="w-full aspect-video object-cover pointer-events-none absolute inset-0"
v-if="!!course.video_cover"
:src="course.video_cover"
alt="image"
loading="lazy"
/>
<div
v-else
class="absolute inset-0 bg-gradient-to-br from-purple-400 to-primary-400 flex justify-center items-center pattern"
>
<Icon
v-if="isFailed"
class="text-white text-[64px] opacity-50"
name="i-tabler-alert-triangle"
/>
<Icon v-else class="text-white text-[64px] animate-pulse" name="i-tabler-photo-video"/>
</div>
<div class="absolute inset-2 flex justify-end items-start">
<UTooltip :prevent="course.progress > -1" :text="course.message || ''">
<UBadge
:color="stateDisplay.color"
:variant="isFailed ? 'solid' : 'subtle'"
class="shadow"
size="sm"
>
<Icon
v-if="isFailed"
class="text-base mr-0.5"
name="i-tabler-alert-triangle"
/>
{{ stateDisplay.text }}
</UBadge>
</UTooltip>
</div>
</div>
<div class="px-2 pt-1 pb-2 flex justify-between">
<div class="flex-1 overflow-hidden pt-1">
<h1
:title="course.title"
class="inline-flex items-center text-sm font-medium overflow-hidden text-ellipsis text-nowrap"
>
<Icon class="text-base" name="i-tabler-book-2"/>
<span class="pl-0.5">{{ course.title }}</span>
</h1>
<p class="text-xs pt-0.5 text-neutral-400 space-x-2">
<span>{{ dayjs(course.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
<button
v-if="course.task_id"
class="hover:text-primary font-medium"
tabindex="-1"
:title="course.task_id"
@click="copyTaskId(isFailed ? `\n\n${course.message}\n${course.ppt_url}` : '')"
>
复制ID
</button>
</p>
</div>
<div class="flex items-center gap-1">
<UButtonGroup>
<UButton
color="white"
:disabled="!isDownloadable"
:loading="downloadProgress > 0 && downloadProgress < 100"
:label="downloadProgress > 0 && downloadProgress < 100 ? `${downloadProgress.toFixed(0)}%` : '下载'"
leading-icon="i-tabler-download"
size="xs"
@click="startDownload(course.video_url, `眩生花微课_${ props.course.title }_${ props.course.task_id }.mp4`)"
/>
<UDropdown
v-model:open="isDropdownOpen"
:items="[
[{
label: '预览课程',
icon: 'i-tabler-play',
shortcuts: ['P'],
disabled: !isDownloadable,
click: () => isPreviewModalOpen = true,
}, {
label: '编辑字幕',
icon: 'i-solar-subtitles-linear',
shortcuts: [metaSymbol, 'D'],
disabled: !isDownloadable,
click: () => {
srtEditor.open()
isDropdownOpen = false
}
}, {
label: '下载字幕',
icon: 'i-tabler-file-download',
shortcuts: [metaSymbol, 'S'],
disabled: !isDownloadable,
click: async () => {
await startDownload(await fetchCourseSubtitleUrl(course), `眩生花微课_${ props.course.title }_${ props.course.task_id }.srt`)
}
}], [{
label: '删除记录',
icon: 'i-tabler-trash-x',
shortcuts: ['Delete'],
click: () => emit('delete', course.task_id)
}],
]"
:popper="{ placement: 'bottom-end' }"
>
<UButton
:disabled="course.progress > 1 && course.progress < 100"
color="white"
size="xs"
trailing-icon="i-tabler-dots"
/>
</UDropdown>
</UButtonGroup>
</div>
</div>
<UModal
v-model="isPreviewModalOpen"
>
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header>
<div class="flex items-center justify-between">
<div class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden">
<p>微课视频预览</p>
<p class="text-xs text-blue-500 w-full overflow-hidden text-nowrap text-ellipsis">
{{ course.title }}
</p>
</div>
<UButton
class="-my-1"
color="gray"
icon="i-tabler-x"
variant="ghost"
@click="isPreviewModalOpen = false"
/>
</div>
</template>
<video
class="w-full rounded shadow"
controls
autoplay
:src="course.video_url"
/>
</UCard>
</UModal>
<SRTEditor
ref="srtEditor"
:course="course"
/>
</div>
</template>
<style scoped>
</style>

14
components/aigc/generation/GBTaskCard.vue
View File

@@ -90,7 +90,7 @@ const onClick = () => {
<span class="text-xs font-medium text-white/50">{{ video.progress }}%</span>
</div>
</div>
<NuxtImg v-else :src="video.video_cover" class="brightness-90 object-cover"/>
<NuxtImg v-else :src="video.video_cover" class="w-full h-full brightness-90 object-cover"/>
</div>
<div class="flex-1 flex flex-col justify-between gap-2">
<div class="flex-1 rounded-lg bg-neutral-100 dark:bg-neutral-800 p-2 px-2.5">
@@ -109,15 +109,19 @@ const onClick = () => {
</li>
<li class="col-span-2 cursor-pointer" @click="isFullContentOpen = true">
<h2 class="text-2xs font-medium text-primary-500">驱动文本</h2>
<p class="text-xs line-clamp-3 text-justify">{{ video.content }}</p>
<p class="text-xs line-clamp-4 text-justify">{{ video.content }}</p>
</li>
</ul>
</div>
<div class="flex justify-end sm:justify-between items-center group flex-nowrap whitespace-nowrap">
<!-- <div-->
<!-- class="hidden sm:flex items-center gap-1 transition-all group-hover:opacity-0 group-hover:pointer-events-none">-->
<!-- <UIcon class="text-primary text-lg" name="i-tabler-user-square-rounded"/>-->
<!-- <p class="text-xs">数字人 {{ video.digital_human_id }}</p>-->
<!-- </div>-->
<div
class="hidden sm:flex items-center gap-1 transition-all group-hover:opacity-0 group-hover:pointer-events-none">
<UIcon class="text-primary text-lg" name="i-tabler-user-square-rounded"/>
<p class="text-xs">数字人 {{ video.digital_human_id }}</p>
class="w-fit hidden sm:flex items-center gap-1 transition-all group-hover:opacity-0 group-hover:pointer-events-none">
<p class="text-2xs text-neutral-400 dark:text-neutral-500">{{ video.digital_human_id }}</p>
</div>
<div class="space-x-2">
<UButton

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

@@ -1,6 +1,7 @@
<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;
@@ -9,6 +10,8 @@ interface Subtitle {
active?: boolean
}
type SubtitleStyleEdit = Pick<SubtitleEmbeddingOptions, 'color' | 'fontSize' | 'bottomOffset' | 'strokeStyle' | 'textShadow'>
const props = defineProps({
course: {
type: Object as PropType<resp.gen.CourseGenItem>,
@@ -29,6 +32,33 @@ 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 {
@@ -40,7 +70,7 @@ const loadSrt = async () => {
} catch (err) {
toast.add({
title: '加载字幕失败',
description: `${ err }` || '未知错误',
description: `${err}` || '未知错误',
color: 'red',
})
} finally {
@@ -78,7 +108,7 @@ const parseSrt = (srt: string) => {
const generateSrt = () => {
return subtitles.value.map((subtitle, index) => {
return `${ index + 1 }\n${ subtitle.start } --> ${ subtitle.end }\n${ subtitle.text }\n`
return `${index + 1}\n${subtitle.start} --> ${subtitle.end}\n${subtitle.text}\n`
}).join('\n')
}
@@ -114,7 +144,7 @@ const syncSubtitles = () => {
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({
@@ -178,25 +208,14 @@ defineExpose({
<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'
}"
>
<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"
/>
<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">
字幕编辑器
@@ -211,48 +230,87 @@ defineExpose({
<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"/>
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"/>
repeatCount="indefinite" values="19;16;19" />
</circle>
<animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate"
values="0 12 12;360 12 12"/>
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 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"
/>
<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}">
<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') }}
-
@@ -261,18 +319,11 @@ defineExpose({
[{{ 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>
<Icon v-if="subtitle.active" name="tabler:keyframe-align-vertical-filled"/>
<Icon v-if="subtitle.active" name="tabler:keyframe-align-vertical-filled" />
</template>
</UInput>
</div>