40 lines
965 B
TypeScript
40 lines
965 B
TypeScript
// frontend\src\components\ui\ModelPreview.tsx
|
|
'use client'
|
|
|
|
import { useMemo } from 'react'
|
|
import HoverPopover from './HoverPopover'
|
|
import LiveHlsVideo from './LiveHlsVideo'
|
|
|
|
export default function ModelPreview({ jobId }: { jobId: string }) {
|
|
const low = useMemo(
|
|
() => `/api/record/preview?id=${encodeURIComponent(jobId)}&file=index.m3u8`,
|
|
[jobId]
|
|
)
|
|
const hq = useMemo(
|
|
() => `/api/record/preview?id=${encodeURIComponent(jobId)}&file=index_hq.m3u8`,
|
|
[jobId]
|
|
)
|
|
|
|
return (
|
|
<HoverPopover
|
|
content={
|
|
<div className="w-[420px]">
|
|
<div className="aspect-video">
|
|
<LiveHlsVideo
|
|
src={hq}
|
|
muted={false}
|
|
className="w-full h-full bg-black"
|
|
/>
|
|
</div>
|
|
</div>
|
|
}
|
|
>
|
|
<LiveHlsVideo
|
|
src={low}
|
|
muted
|
|
className="w-20 h-16 object-cover rounded bg-gray-100 dark:bg-white/5"
|
|
/>
|
|
</HoverPopover>
|
|
)
|
|
}
|