2539 lines
79 KiB
TypeScript
2539 lines
79 KiB
TypeScript
// frontend\src\components\ui\Player.tsx
|
||
'use client'
|
||
|
||
import * as React from 'react'
|
||
import type { RecordJob } from '../../types'
|
||
import Card from './Card'
|
||
import videojs from 'video.js'
|
||
import type VideoJsPlayer from 'video.js/dist/types/player'
|
||
import 'video.js/dist/video-js.css'
|
||
import { createPortal } from 'react-dom'
|
||
import {
|
||
ArrowsPointingOutIcon,
|
||
ArrowsPointingInIcon,
|
||
XMarkIcon,
|
||
} from '@heroicons/react/24/outline'
|
||
import { DEFAULT_PLAYER_START_MUTED } from './videoPolicy'
|
||
import RecordJobActions from './RecordJobActions'
|
||
import Button from './Button'
|
||
import { apiUrl, apiFetch } from '../../lib/api'
|
||
import LiveHlsVideo from './LiveHlsVideo'
|
||
|
||
// ✅ Video.js Gear Menu (nur Quality)
|
||
function ensureGearControlRegistered() {
|
||
const vjsAny = videojs as any
|
||
if (vjsAny.__gearControlRegistered) return
|
||
vjsAny.__gearControlRegistered = true
|
||
|
||
const MenuButton = videojs.getComponent('MenuButton')
|
||
const MenuItem = videojs.getComponent('MenuItem')
|
||
|
||
class GearMenuItem extends (MenuItem as any) {
|
||
private _onSelect?: () => void
|
||
constructor(player: any, options: any) {
|
||
super(player, options)
|
||
this._onSelect = options?.onSelect
|
||
this.on('click', () => this._onSelect?.())
|
||
}
|
||
}
|
||
|
||
class GearMenuButton extends (MenuButton as any) {
|
||
constructor(player: any, options: any) {
|
||
super(player, options)
|
||
this.controlText('Settings')
|
||
|
||
// Icon ersetzen: ⚙️ SVG in den Placeholder
|
||
const el = this.el() as HTMLElement
|
||
const ph = el.querySelector('.vjs-icon-placeholder') as HTMLElement | null
|
||
if (ph) {
|
||
ph.innerHTML = `
|
||
<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
|
||
<path fill="currentColor" d="M19.14,12.94c0.04-0.31,0.06-0.63,0.06-0.94s-0.02-0.63-0.06-0.94l2.03-1.58
|
||
c0.18-0.14,0.23-0.41,0.12-0.61l-1.92-3.32c-0.11-0.2-0.36-0.28-0.57-0.2l-2.39,0.96c-0.5-0.38-1.04-0.7-1.64-0.94
|
||
L14.4,2.81C14.37,2.59,14.18,2.42,13.95,2.42h-3.9c-0.23,0-0.42,0.17-0.45,0.39L9.27,5.37
|
||
C8.67,5.61,8.13,5.93,7.63,6.31L5.24,5.35c-0.21-0.08-0.46,0-0.57,0.2L2.75,8.87
|
||
C2.64,9.07,2.69,9.34,2.87,9.48l2.03,1.58C4.86,11.37,4.84,11.69,4.84,12s0.02,0.63,0.06,0.94L2.87,14.52
|
||
c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.11,0.2,0.36,0.28,0.57,0.2l2.39-0.96c0.5,0.38,1.04,0.7,1.64,0.94
|
||
l0.33,2.56c0.03,0.22,0.22,0.39,0.45,0.39h3.9c0.23,0,0.42-0.17,0.45-0.39l0.33-2.56c0.6-0.24,1.14-0.56,1.64-0.94
|
||
l2.39,0.96c0.21,0.08,0.46,0,0.57-0.2l1.92-3.32c0.11-0.2,0.06-0.47-0.12-0.61L19.14,12.94z M12,15.5
|
||
c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.93,15.5,12,15.5z"/>
|
||
</svg>
|
||
`
|
||
}
|
||
|
||
// ✅ Nur Quality refreshen
|
||
const p: any = this.player()
|
||
p.on('gear:refresh', () => this.update())
|
||
}
|
||
|
||
update() {
|
||
try {
|
||
super.update?.()
|
||
} catch {}
|
||
|
||
const p: any = this.player()
|
||
const curQ = String(p.options_?.__gearQuality ?? 'auto')
|
||
const autoApplied = String(p.options_?.__autoAppliedQuality ?? '')
|
||
|
||
const items = (this.items || []) as any[]
|
||
for (const it of items) {
|
||
const kind = it?.options_?.__kind
|
||
const val = it?.options_?.__value
|
||
if (kind === 'quality') it.selected?.(String(val) === curQ)
|
||
}
|
||
|
||
// ✅ Auto-Label: "Auto (720p)" wenn Auto aktiv
|
||
try {
|
||
for (const it of items) {
|
||
if (it?.options_?.__kind !== 'quality') continue
|
||
if (String(it?.options_?.__value) !== 'auto') continue
|
||
const el = it.el?.() as HTMLElement | null
|
||
const text = el?.querySelector?.('.vjs-menu-item-text') as HTMLElement | null
|
||
if (!text) continue
|
||
|
||
if (curQ === 'auto' && autoApplied && autoApplied !== 'auto') {
|
||
text.textContent = `Auto (${autoApplied})`
|
||
} else {
|
||
text.textContent = 'Auto'
|
||
}
|
||
}
|
||
} catch {}
|
||
}
|
||
|
||
createItems() {
|
||
const player: any = this.player()
|
||
const items: any[] = []
|
||
|
||
// ✅ KEIN "Quality" Header mehr
|
||
|
||
const qualities = (player.options_?.gearQualities || [
|
||
'auto',
|
||
'1080p',
|
||
'720p',
|
||
'480p',
|
||
]) as string[]
|
||
const currentQ = String(player.options_?.__gearQuality ?? 'auto')
|
||
|
||
for (const q of qualities) {
|
||
const label = q === 'auto' ? 'Auto' : q === '2160p' ? '4K' : q
|
||
|
||
items.push(
|
||
new GearMenuItem(player, {
|
||
label,
|
||
selectable: true,
|
||
selected: currentQ === q,
|
||
__kind: 'quality',
|
||
__value: q,
|
||
onSelect: () => {
|
||
player.options_.__gearQuality = q
|
||
player.trigger({ type: 'gear:quality', quality: q })
|
||
player.trigger('gear:refresh')
|
||
},
|
||
})
|
||
)
|
||
}
|
||
|
||
return items
|
||
}
|
||
}
|
||
|
||
// ✅ Typing-Fix
|
||
const VjsComponent = videojs.getComponent('Component') as any
|
||
videojs.registerComponent(
|
||
'GearMenuButton',
|
||
GearMenuButton as unknown as typeof VjsComponent
|
||
)
|
||
|
||
// ✅ CSS nur 1x injizieren
|
||
if (!vjsAny.__gearControlCssInjected) {
|
||
vjsAny.__gearControlCssInjected = true
|
||
const css = document.createElement('style')
|
||
css.textContent = `
|
||
#player-root .vjs-gear-menu .vjs-icon-placeholder {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* ✅ Menübreite nicht aufblasen */
|
||
#player-root .vjs-gear-menu .vjs-menu {
|
||
min-width: 0 !important;
|
||
width: fit-content !important;
|
||
}
|
||
|
||
/* ✅ die UL auch nicht breit ziehen */
|
||
#player-root .vjs-gear-menu .vjs-menu-content {
|
||
width: fit-content !important;
|
||
min-width: 0 !important;
|
||
padding: 2px 0 !important;
|
||
}
|
||
|
||
/* ✅ Items kompakter */
|
||
#player-root .vjs-gear-menu .vjs-menu-content .vjs-menu-item {
|
||
padding: 4px 10px !important;
|
||
line-height: 1.1 !important;
|
||
}
|
||
|
||
/* ✅ Gear-Button als Anker */
|
||
#player-root .vjs-gear-menu {
|
||
position: relative !important;
|
||
}
|
||
|
||
/* ✅ Popup wirklich über dem Gear-Icon zentrieren */
|
||
#player-root .vjs-gear-menu .vjs-menu {
|
||
position: absolute !important;
|
||
|
||
left: 0% !important;
|
||
right: 0% !important;
|
||
|
||
transform: translateX(-50%) !important;
|
||
transform-origin: 50% 100% !important;
|
||
|
||
z-index: 9999 !important;
|
||
}
|
||
|
||
/* ✅ Manche Skins setzen am UL noch Layout/Width – neutralisieren */
|
||
#player-root .vjs-gear-menu .vjs-menu-content {
|
||
width: max-content !important;
|
||
min-width: 0 !important;
|
||
}
|
||
|
||
/* ✅ Menü horizontal zentrieren über dem Gear-Icon */
|
||
#player-root .vjs-gear-menu .vjs-menu {
|
||
z-index: 9999 !important;
|
||
}
|
||
`
|
||
document.head.appendChild(css)
|
||
}
|
||
}
|
||
|
||
const baseName = (p: string) => (p || '').replaceAll('\\', '/').split('/').pop() || ''
|
||
const stripHotPrefix = (s: string) => (s.startsWith('HOT ') ? s.slice(4) : s)
|
||
const lower = (s: string) => (s || '').trim().toLowerCase()
|
||
|
||
type StoredModelFlagsLite = {
|
||
tags?: string
|
||
favorite?: boolean
|
||
liked?: boolean | null
|
||
watching?: boolean | null
|
||
}
|
||
|
||
// Tags kommen aus dem ModelStore als String (meist komma-/semicolon-getrennt)
|
||
const parseTags = (raw?: string): string[] => {
|
||
const s = String(raw ?? '').trim()
|
||
if (!s) return []
|
||
|
||
const parts = s
|
||
.split(/[\n,;|]+/g)
|
||
.map((p) => p.trim())
|
||
.filter(Boolean)
|
||
|
||
// stable dedupe (case-insensitive), aber original casing behalten
|
||
const seen = new Set<string>()
|
||
const out: string[] = []
|
||
for (const p of parts) {
|
||
const k = p.toLowerCase()
|
||
if (seen.has(k)) continue
|
||
seen.add(k)
|
||
out.push(p)
|
||
}
|
||
|
||
// alphabetisch (case-insensitive)
|
||
out.sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }))
|
||
return out
|
||
}
|
||
|
||
function formatDuration(ms: number): string {
|
||
if (!Number.isFinite(ms) || ms <= 0) return '—'
|
||
const totalSec = Math.floor(ms / 1000)
|
||
const h = Math.floor(totalSec / 3600)
|
||
const m = Math.floor((totalSec % 3600) / 60)
|
||
const s = totalSec % 60
|
||
if (h > 0) return `${h}h ${m}m`
|
||
if (m > 0) return `${m}m ${s}s`
|
||
return `${s}s`
|
||
}
|
||
|
||
function formatBytes(bytes?: number | null): string {
|
||
if (typeof bytes !== 'number' || !Number.isFinite(bytes) || bytes <= 0) return '—'
|
||
const units = ['B', 'KB', 'MB', 'GB', 'TB']
|
||
let v = bytes
|
||
let i = 0
|
||
while (v >= 1024 && i < units.length - 1) {
|
||
v /= 1024
|
||
i++
|
||
}
|
||
const digits = i === 0 ? 0 : v >= 100 ? 0 : v >= 10 ? 1 : 2
|
||
return `${v.toFixed(digits)} ${units[i]}`
|
||
}
|
||
|
||
function formatDateTime(v?: string | number | Date | null): string {
|
||
if (!v) return '—'
|
||
const d = v instanceof Date ? v : new Date(v)
|
||
const t = d.getTime()
|
||
if (!Number.isFinite(t)) return '—'
|
||
return d.toLocaleString(undefined, {
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
})
|
||
}
|
||
|
||
const pickNum = (...vals: any[]): number | null => {
|
||
for (const v of vals) {
|
||
const n = typeof v === 'string' ? Number(v) : v
|
||
if (typeof n === 'number' && Number.isFinite(n) && n > 0) return n
|
||
}
|
||
return null
|
||
}
|
||
|
||
function formatFps(n?: number | null): string {
|
||
if (!n || !Number.isFinite(n)) return '—'
|
||
const digits = n >= 10 ? 0 : 2
|
||
return `${n.toFixed(digits)} fps`
|
||
}
|
||
|
||
function formatResolution(h?: number | null): string {
|
||
if (!h || !Number.isFinite(h)) return '—'
|
||
return `${Math.round(h)}p`
|
||
}
|
||
|
||
function parseDateFromOutput(output?: string): Date | null {
|
||
const fileRaw = baseName(output || '')
|
||
const file = stripHotPrefix(fileRaw)
|
||
|
||
if (!file) return null
|
||
|
||
const stem = file.replace(/\.[^.]+$/, '')
|
||
// model_MM_DD_YYYY__HH-MM-SS
|
||
const m = stem.match(/_(\d{1,2})_(\d{1,2})_(\d{4})__(\d{1,2})-(\d{2})-(\d{2})$/)
|
||
if (!m) return null
|
||
|
||
const mm = Number(m[1])
|
||
const dd = Number(m[2])
|
||
const yyyy = Number(m[3])
|
||
const hh = Number(m[4])
|
||
const mi = Number(m[5])
|
||
const ss = Number(m[6])
|
||
|
||
if (![mm, dd, yyyy, hh, mi, ss].every((n) => Number.isFinite(n))) return null
|
||
return new Date(yyyy, mm - 1, dd, hh, mi, ss)
|
||
}
|
||
|
||
const modelNameFromOutput = (output?: string) => {
|
||
const fileRaw = baseName(output || '')
|
||
const file = stripHotPrefix(fileRaw)
|
||
if (!file) return '—'
|
||
|
||
const stem = file.replace(/\.[^.]+$/, '')
|
||
const m = stem.match(/^(.*?)_\d{1,2}_\d{1,2}_\d{4}__\d{1,2}-\d{2}-\d{2}$/)
|
||
if (m?.[1]) return m[1]
|
||
|
||
const i = stem.lastIndexOf('_')
|
||
return i > 0 ? stem.slice(0, i) : stem
|
||
}
|
||
|
||
const sizeBytesOf = (job: RecordJob): number | null => {
|
||
const anyJob = job as any
|
||
const v = anyJob.sizeBytes ?? anyJob.fileSizeBytes ?? anyJob.bytes ?? anyJob.size ?? null
|
||
return typeof v === 'number' && Number.isFinite(v) && v > 0 ? v : null
|
||
}
|
||
|
||
function cn(...parts: Array<string | false | null | undefined>) {
|
||
return parts.filter(Boolean).join(' ')
|
||
}
|
||
|
||
function useMediaQuery(query: string) {
|
||
const [matches, setMatches] = React.useState(false)
|
||
|
||
React.useEffect(() => {
|
||
if (typeof window === 'undefined') return
|
||
const mql = window.matchMedia(query)
|
||
const onChange = () => setMatches(mql.matches)
|
||
onChange()
|
||
|
||
if (mql.addEventListener) mql.addEventListener('change', onChange)
|
||
else mql.addListener(onChange)
|
||
|
||
return () => {
|
||
if (mql.removeEventListener) mql.removeEventListener('change', onChange)
|
||
else mql.removeListener(onChange)
|
||
}
|
||
}, [query])
|
||
|
||
return matches
|
||
}
|
||
|
||
function installAbsoluteTimelineShim(p: any) {
|
||
if (!p || p.__absTimelineShimInstalled) return
|
||
p.__absTimelineShimInstalled = true
|
||
|
||
// Originale Methoden sichern
|
||
p.__origCurrentTime = p.currentTime.bind(p)
|
||
p.__origDuration = p.duration.bind(p)
|
||
|
||
// Helper: relative Zeit (innerhalb des aktuell geladenen Segments) setzen,
|
||
// OHNE server-seek auszulösen.
|
||
p.__setRelativeTime = (rel: number) => {
|
||
try {
|
||
p.__origCurrentTime(Math.max(0, rel || 0))
|
||
} catch {}
|
||
}
|
||
|
||
// currentTime(): GET => absolute Zeit, SET => absolute Zeit (-> server seek falls vorhanden)
|
||
p.currentTime = function (v?: number) {
|
||
const off = Number(this.__timeOffsetSec ?? 0) || 0
|
||
|
||
// SET (Seekbar / API)
|
||
if (typeof v === 'number' && Number.isFinite(v)) {
|
||
const abs = Math.max(0, v)
|
||
|
||
// Wenn wir server-seek können: als absolute Zeit interpretieren
|
||
if (typeof this.__serverSeekAbs === 'function') {
|
||
this.__serverSeekAbs(abs)
|
||
return abs
|
||
}
|
||
|
||
// Fallback: innerhalb aktueller Datei relativ setzen
|
||
return this.__origCurrentTime(Math.max(0, abs - off))
|
||
}
|
||
|
||
// GET
|
||
const rel = Number(this.__origCurrentTime() ?? 0) || 0
|
||
return Math.max(0, off + rel)
|
||
}
|
||
|
||
// duration(): immer volle Original-Dauer zurückgeben, wenn bekannt
|
||
p.duration = function () {
|
||
const full = Number(this.__fullDurationSec ?? 0) || 0
|
||
if (full > 0) return full
|
||
|
||
// Fallback: offset + segment-dauer
|
||
const off = Number(this.__timeOffsetSec ?? 0) || 0
|
||
const relDur = Number(this.__origDuration() ?? 0) || 0
|
||
return Math.max(0, off + relDur)
|
||
}
|
||
}
|
||
|
||
function gearQualitiesForHeight(h?: number | null): string[] {
|
||
const srcH = typeof h === 'number' && Number.isFinite(h) && h > 0 ? Math.round(h) : 0
|
||
const ladder = [2160, 1440, 1080, 720, 480, 360, 240] // gewünschte Stufen
|
||
|
||
const toQ = (n: number) => `${n}p`
|
||
const uniq = (arr: string[]) => Array.from(new Set(arr))
|
||
|
||
// Wenn unbekannt: trotzdem Ladder anbieten + Auto
|
||
if (!srcH) {
|
||
return ['auto', ...ladder.map(toQ)]
|
||
}
|
||
|
||
// native Höhe (immer anzeigen, auch wenn nicht genau Ladder)
|
||
const allowed = ladder.filter((x) => x <= srcH + 8)
|
||
|
||
// native immer rein (und dann absteigend sortiert)
|
||
const allHeights = Array.from(new Set([...allowed, srcH])).sort((a, b) => b - a)
|
||
|
||
return uniq(['auto', ...allHeights.map(toQ)])
|
||
}
|
||
|
||
export type PlayerProps = {
|
||
job: RecordJob
|
||
expanded: boolean
|
||
onClose: () => void
|
||
onToggleExpand: () => void
|
||
className?: string
|
||
modelKey?: string
|
||
|
||
// ✅ neu: ModelStore für Tags wie FinishedDownloads
|
||
modelsByKey?: Record<string, StoredModelFlagsLite>
|
||
|
||
// states für Buttons
|
||
isHot?: boolean
|
||
isFavorite?: boolean
|
||
isLiked?: boolean
|
||
isWatching?: boolean
|
||
|
||
// actions
|
||
onKeep?: (job: RecordJob) => void | Promise<void>
|
||
onDelete?: (job: RecordJob) => void | Promise<void>
|
||
onToggleHot?: (
|
||
job: RecordJob
|
||
) =>
|
||
| void
|
||
| { ok?: boolean; oldFile?: string; newFile?: string }
|
||
| Promise<void | { ok?: boolean; oldFile?: string; newFile?: string }>
|
||
onToggleFavorite?: (job: RecordJob) => void | Promise<void>
|
||
onToggleLike?: (job: RecordJob) => void | Promise<void>
|
||
onToggleWatch?: (job: RecordJob) => void | Promise<void>
|
||
|
||
// ✅ neu: laufenden Download stoppen
|
||
onStopJob?: (id: string) => void | Promise<void>
|
||
|
||
startMuted?: boolean
|
||
}
|
||
|
||
export default function Player({
|
||
job,
|
||
expanded,
|
||
onClose,
|
||
onToggleExpand,
|
||
modelKey,
|
||
modelsByKey,
|
||
isHot = false,
|
||
isFavorite = false,
|
||
isLiked = false,
|
||
isWatching = false,
|
||
onKeep,
|
||
onDelete,
|
||
onToggleHot,
|
||
onToggleFavorite,
|
||
onToggleLike,
|
||
onToggleWatch,
|
||
onStopJob,
|
||
startMuted = DEFAULT_PLAYER_START_MUTED,
|
||
}: PlayerProps) {
|
||
const title = React.useMemo(
|
||
() => baseName(job.output?.trim() || '') || job.id,
|
||
[job.output, job.id]
|
||
)
|
||
|
||
const fileRaw = React.useMemo(() => baseName(job.output?.trim() || ''), [job.output])
|
||
const playName = React.useMemo(() => baseName(job.output?.trim() || ''), [job.output])
|
||
const sizeLabel = React.useMemo(() => formatBytes(sizeBytesOf(job)), [job])
|
||
const anyJob = job as any
|
||
|
||
const [fullDurationSec, setFullDurationSec] = React.useState<number>(() => {
|
||
return (
|
||
Number((job as any)?.meta?.durationSeconds) ||
|
||
Number((job as any)?.durationSeconds) ||
|
||
0
|
||
)
|
||
})
|
||
|
||
const [metaReady, setMetaReady] = React.useState<boolean>(() => {
|
||
// live ist egal, finished: erst mal false (wir holen gleich)
|
||
return job.status === 'running'
|
||
})
|
||
|
||
const [metaDims, setMetaDims] = React.useState<{ h: number; fps: number | null }>(() => ({
|
||
h: 0,
|
||
fps: null,
|
||
}))
|
||
|
||
// ✅ Live nur, wenn es wirklich Preview/HLS-Assets gibt (nicht nur status==="running")
|
||
const isRunning = job.status === 'running'
|
||
const [hlsReady, setHlsReady] = React.useState(false)
|
||
const isLive = isRunning && hlsReady
|
||
|
||
// ✅ Backend erwartet "id=" (nicht "name=")
|
||
// running: echte job.id (jobs-map lookup)
|
||
// finished: Dateiname ohne Extension als Stem (wenn dein Backend finished so mapped)
|
||
const finishedStem = React.useMemo(() => (playName || '').replace(/\.[^.]+$/, ''), [playName])
|
||
|
||
const previewId = React.useMemo(
|
||
() => (isRunning ? job.id : finishedStem || job.id),
|
||
[isRunning, job.id, finishedStem]
|
||
)
|
||
|
||
React.useEffect(() => {
|
||
if (isRunning) return
|
||
if (fullDurationSec > 0) return
|
||
|
||
const fileName = baseName(job.output?.trim() || '')
|
||
if (!fileName) return
|
||
|
||
let alive = true
|
||
const ctrl = new AbortController()
|
||
|
||
;(async () => {
|
||
try {
|
||
// ✅ Backend-Endpoint existiert bei dir bereits: /api/record/done/meta
|
||
// Ich gebe hier file mit, weil du finished oft darüber mapst.
|
||
const url = apiUrl(`/api/record/done/meta?file=${encodeURIComponent(fileName)}`)
|
||
const res = await apiFetch(url, { signal: ctrl.signal, cache: 'no-store' })
|
||
if (!res.ok) return
|
||
|
||
const j = await res.json()
|
||
const dur = Number(j?.durationSeconds || j?.meta?.durationSeconds || 0) || 0
|
||
if (!alive || dur <= 0) return
|
||
|
||
setFullDurationSec(dur)
|
||
|
||
// ✅ Video.js Duration-Shim nachträglich füttern + UI refreshen
|
||
const p: any = playerRef.current
|
||
if (p && !p.isDisposed?.()) {
|
||
try {
|
||
p.__fullDurationSec = dur
|
||
p.trigger?.('durationchange')
|
||
p.trigger?.('timeupdate')
|
||
} catch {}
|
||
}
|
||
} catch {}
|
||
})()
|
||
|
||
return () => {
|
||
alive = false
|
||
ctrl.abort()
|
||
}
|
||
}, [isRunning, fullDurationSec, job.output])
|
||
|
||
const isHotFile = fileRaw.startsWith('HOT ')
|
||
const model = React.useMemo(() => {
|
||
const k = (modelKey || '').trim()
|
||
return k ? k : modelNameFromOutput(job.output)
|
||
}, [modelKey, job.output])
|
||
const file = React.useMemo(() => stripHotPrefix(fileRaw), [fileRaw])
|
||
|
||
const runtimeLabel = React.useMemo(() => {
|
||
const sec = Number(fullDurationSec || 0) || 0
|
||
return sec > 0 ? formatDuration(sec * 1000) : '—'
|
||
}, [fullDurationSec])
|
||
|
||
// Datum: bevorzugt aus Dateiname, sonst startedAt/endedAt/createdAt — ✅ inkl. Uhrzeit
|
||
const dateLabel = React.useMemo(() => {
|
||
const fromName = parseDateFromOutput(job.output)
|
||
if (fromName) return formatDateTime(fromName)
|
||
|
||
const fallback =
|
||
anyJob.startedAt ??
|
||
anyJob.endedAt ??
|
||
anyJob.createdAt ??
|
||
anyJob.fileCreatedAt ??
|
||
anyJob.ctime ??
|
||
null
|
||
|
||
const d = fallback ? new Date(fallback) : null
|
||
return formatDateTime(d && Number.isFinite(d.getTime()) ? d : null)
|
||
}, [job.output, anyJob.startedAt, anyJob.endedAt, anyJob.createdAt, anyJob.fileCreatedAt, anyJob.ctime])
|
||
|
||
// ✅ Tags wie in FinishedDownloads: aus ModelStore (modelsByKey)
|
||
const effectiveModelKey = React.useMemo(() => lower((modelKey || model || '').trim()), [modelKey, model])
|
||
|
||
const tags = React.useMemo(() => {
|
||
const flags = modelsByKey?.[effectiveModelKey]
|
||
return parseTags(flags?.tags)
|
||
}, [modelsByKey, effectiveModelKey])
|
||
|
||
// Vorschaubild oben
|
||
const previewA = React.useMemo(
|
||
() => apiUrl(`/api/record/preview?id=${encodeURIComponent(previewId)}&file=preview.jpg`),
|
||
[previewId]
|
||
)
|
||
|
||
const previewB = React.useMemo(
|
||
() => apiUrl(`/api/record/preview?id=${encodeURIComponent(previewId)}&file=thumbs.webp`),
|
||
[previewId]
|
||
)
|
||
|
||
// ✅ Live-Stream URL (Playback) -> play=1 hält Preview sicher am Leben
|
||
const liveHlsSrc = React.useMemo(
|
||
() => apiUrl(`/api/record/preview?id=${encodeURIComponent(previewId)}&play=1&file=index_hq.m3u8`),
|
||
[previewId]
|
||
)
|
||
|
||
const [previewSrc, setPreviewSrc] = React.useState(previewA)
|
||
|
||
React.useEffect(() => {
|
||
setPreviewSrc(previewA)
|
||
}, [previewA])
|
||
|
||
const videoH = React.useMemo(
|
||
() => pickNum(metaDims.h, anyJob.videoHeight, anyJob.height, anyJob.meta?.height),
|
||
[metaDims.h, anyJob.videoHeight, anyJob.height, anyJob.meta?.height]
|
||
)
|
||
|
||
const fps = React.useMemo(
|
||
() => pickNum(metaDims.fps, anyJob.fps, anyJob.frameRate, anyJob.meta?.fps, anyJob.meta?.frameRate),
|
||
[metaDims.fps, anyJob.fps, anyJob.frameRate, anyJob.meta?.fps, anyJob.meta?.frameRate]
|
||
)
|
||
|
||
const [intrH, setIntrH] = React.useState<number | null>(null)
|
||
|
||
const resolutionLabel = React.useMemo(() => formatResolution(intrH ?? videoH), [intrH, videoH])
|
||
const fpsLabel = React.useMemo(() => formatFps(fps), [fps])
|
||
|
||
React.useEffect(() => {
|
||
const onKeyDown = (e: KeyboardEvent) => e.key === 'Escape' && onClose()
|
||
window.addEventListener('keydown', onKeyDown)
|
||
return () => window.removeEventListener('keydown', onKeyDown)
|
||
}, [onClose])
|
||
|
||
const hlsIndexUrl = React.useMemo(() => {
|
||
const u = `/api/record/preview?id=${encodeURIComponent(previewId)}&file=index_hq.m3u8&play=1`
|
||
return apiUrl(isRunning ? `${u}&t=${Date.now()}` : u)
|
||
}, [previewId, isRunning])
|
||
|
||
React.useEffect(() => {
|
||
if (!isRunning) {
|
||
setHlsReady(false)
|
||
return
|
||
}
|
||
|
||
let alive = true
|
||
const ctrl = new AbortController()
|
||
setHlsReady(false)
|
||
|
||
const poll = async () => {
|
||
for (let i = 0; i < 120 && alive && !ctrl.signal.aborted; i++) {
|
||
try {
|
||
const res = await apiFetch(hlsIndexUrl, {
|
||
method: 'GET',
|
||
cache: 'no-store',
|
||
signal: ctrl.signal,
|
||
headers: { 'cache-control': 'no-cache' },
|
||
})
|
||
|
||
if (res.ok) {
|
||
const text = await res.text()
|
||
|
||
// ✅ muss wirklich wie eine m3u8 aussehen und mindestens 1 Segment enthalten
|
||
const hasM3u = text.includes('#EXTM3U')
|
||
const hasSegment =
|
||
/#EXTINF:/i.test(text) || /\.ts(\?|$)/i.test(text) || /\.m4s(\?|$)/i.test(text)
|
||
|
||
if (hasM3u && hasSegment) {
|
||
if (alive) setHlsReady(true)
|
||
return
|
||
}
|
||
}
|
||
} catch {}
|
||
await new Promise((r) => setTimeout(r, 500))
|
||
}
|
||
}
|
||
|
||
poll()
|
||
return () => {
|
||
alive = false
|
||
ctrl.abort()
|
||
}
|
||
}, [isRunning, hlsIndexUrl])
|
||
|
||
const buildVideoSrc = React.useCallback(
|
||
(params: { file?: string; id?: string; quality?: string; startSec?: number }) => {
|
||
const q = String(params.quality || 'auto').trim()
|
||
|
||
const startSec =
|
||
typeof params.startSec === 'number' && Number.isFinite(params.startSec) && params.startSec > 0
|
||
? Math.floor(params.startSec)
|
||
: 0
|
||
|
||
// ✅ query params sauber bauen
|
||
const qp = new URLSearchParams()
|
||
if (params.file) qp.set('file', params.file)
|
||
if (params.id) qp.set('id', params.id)
|
||
|
||
const qToH = (qq: string): number => {
|
||
const m = String(qq).match(/(\d{3,4})p/i)
|
||
return m ? Number(m[1]) : 0
|
||
}
|
||
|
||
// Quelle (für Downscale-Erkennung)
|
||
const sourceH =
|
||
typeof videoH === 'number' && Number.isFinite(videoH) && videoH > 0 ? Math.round(videoH) : 0
|
||
|
||
if (q && q !== 'auto') {
|
||
qp.set('quality', q)
|
||
|
||
// ✅ stream=1 nur für "Start bei 0" (schneller Start ohne Full-Transcode)
|
||
// Bei startSec>0 wollen wir i.d.R. Segment-Cache + Range (besseres Seek/Quality-Switch)
|
||
const targetH = qToH(q)
|
||
if (startSec === 0 && sourceH && targetH && targetH < sourceH - 8) {
|
||
qp.set('stream', '1')
|
||
}
|
||
}
|
||
|
||
if (startSec > 0) {
|
||
qp.set('t', String(startSec)) // oder qp.set('start', String(startSec))
|
||
}
|
||
|
||
return apiUrl(`/api/record/video?${qp.toString()}`)
|
||
},
|
||
[videoH]
|
||
)
|
||
|
||
// ✅ requested = UI (Auto oder fix), applied = echte Source-Qualität
|
||
const [requestedQuality, setRequestedQuality] = React.useState<string>('auto')
|
||
const [appliedQuality, setAppliedQuality] = React.useState<string>('auto')
|
||
|
||
const requestedQualityRef = React.useRef(requestedQuality)
|
||
React.useEffect(() => {
|
||
requestedQualityRef.current = requestedQuality
|
||
}, [requestedQuality])
|
||
|
||
const appliedQualityRef = React.useRef(appliedQuality)
|
||
React.useEffect(() => {
|
||
appliedQualityRef.current = appliedQuality
|
||
}, [appliedQuality])
|
||
|
||
const media = React.useMemo(() => {
|
||
// ✅ Live wird NICHT mehr über Video.js gespielt
|
||
if (isRunning) return { src: '', type: '' }
|
||
|
||
// ✅ Warten bis meta.json existiert + Infos geladen
|
||
if (!metaReady) return { src: '', type: '' }
|
||
|
||
const file = baseName(job.output?.trim() || '')
|
||
|
||
if (file) {
|
||
const ext = file.toLowerCase().split('.').pop()
|
||
const type =
|
||
ext === 'mp4' ? 'video/mp4' : ext === 'ts' ? 'video/mp2t' : 'application/octet-stream'
|
||
return { src: buildVideoSrc({ file, quality: appliedQuality }), type }
|
||
}
|
||
|
||
return { src: buildVideoSrc({ id: job.id, quality: appliedQuality }), type: 'video/mp4' }
|
||
}, [isRunning, metaReady, job.output, job.id, appliedQuality, buildVideoSrc])
|
||
|
||
const containerRef = React.useRef<HTMLDivElement | null>(null)
|
||
const playerRef = React.useRef<VideoJsPlayer | null>(null)
|
||
const videoNodeRef = React.useRef<HTMLVideoElement | null>(null)
|
||
const skipNextMediaSrcRef = React.useRef(false)
|
||
|
||
const [mounted, setMounted] = React.useState(false)
|
||
const [playerReadyTick, setPlayerReadyTick] = React.useState(0)
|
||
|
||
const updateIntrinsicDims = React.useCallback(() => {
|
||
const p: any = playerRef.current
|
||
if (!p || p.isDisposed?.()) return
|
||
const h = typeof p.videoHeight === 'function' ? p.videoHeight() : 0
|
||
if (typeof h === 'number' && h > 0 && Number.isFinite(h)) {
|
||
setIntrH(h)
|
||
}
|
||
}, [])
|
||
|
||
// pro Datei einmal default setzen (damit beim nächsten Video wieder sinnvoll startet)
|
||
const playbackKey = React.useMemo(() => {
|
||
// finished: Dateiname; running ist eh LiveHlsVideo, also egal
|
||
return baseName(job.output?.trim() || '') || job.id
|
||
}, [job.output, job.id])
|
||
|
||
const defaultQuality = React.useMemo(() => {
|
||
const h = typeof videoH === 'number' && Number.isFinite(videoH) && videoH > 0 ? Math.round(videoH) : 0
|
||
return h ? `${h}p` : 'auto'
|
||
}, [videoH])
|
||
|
||
const lastPlaybackKeyRef = React.useRef<string>('')
|
||
|
||
React.useEffect(() => {
|
||
if (lastPlaybackKeyRef.current !== playbackKey) {
|
||
lastPlaybackKeyRef.current = playbackKey
|
||
setRequestedQuality(defaultQuality)
|
||
setAppliedQuality(defaultQuality)
|
||
setIntrH(null)
|
||
|
||
// player-Optionen syncen, falls schon gemountet
|
||
const p: any = playerRef.current
|
||
if (p && !p.isDisposed?.()) {
|
||
try {
|
||
p.options_.__gearQuality = defaultQuality
|
||
p.options_.__autoAppliedQuality = defaultQuality
|
||
p.trigger?.('gear:refresh')
|
||
} catch {}
|
||
}
|
||
}
|
||
}, [playbackKey, defaultQuality])
|
||
|
||
React.useEffect(() => {
|
||
if (isRunning) {
|
||
setMetaReady(true)
|
||
return
|
||
}
|
||
|
||
const fileName = baseName(job.output?.trim() || '')
|
||
if (!fileName) {
|
||
// wenn kein file → fail-open
|
||
setMetaReady(true)
|
||
return
|
||
}
|
||
|
||
let alive = true
|
||
const ctrl = new AbortController()
|
||
|
||
setMetaReady(false)
|
||
|
||
;(async () => {
|
||
// Poll bis metaExists=true (oder fail-open nach N Versuchen)
|
||
for (let i = 0; i < 80 && alive && !ctrl.signal.aborted; i++) {
|
||
try {
|
||
const url = apiUrl(`/api/record/done/meta?file=${encodeURIComponent(fileName)}`)
|
||
const res = await apiFetch(url, { signal: ctrl.signal, cache: 'no-store' })
|
||
|
||
if (res.ok) {
|
||
const j = await res.json()
|
||
|
||
const exists = Boolean(j?.metaExists)
|
||
const dur = Number(j?.durationSeconds || 0) || 0
|
||
const h = Number(j?.height || 0) || 0
|
||
const fps = Number(j?.fps || 0) || 0
|
||
|
||
// ✅ Infos neu in den Player-State übernehmen
|
||
if (dur > 0) {
|
||
setFullDurationSec(dur)
|
||
const p: any = playerRef.current
|
||
if (p && !p.isDisposed?.()) {
|
||
try {
|
||
p.__fullDurationSec = dur
|
||
p.trigger?.('durationchange')
|
||
p.trigger?.('timeupdate')
|
||
} catch {}
|
||
}
|
||
}
|
||
|
||
if (h > 0) {
|
||
setMetaDims({ h, fps: fps > 0 ? fps : null })
|
||
}
|
||
|
||
if (exists) {
|
||
setMetaReady(true)
|
||
return
|
||
}
|
||
}
|
||
} catch {}
|
||
|
||
await new Promise((r) => setTimeout(r, 250))
|
||
}
|
||
|
||
// fail-open (damit der Player nicht “für immer” blockiert)
|
||
if (alive) setMetaReady(true)
|
||
})()
|
||
|
||
return () => {
|
||
alive = false
|
||
ctrl.abort()
|
||
}
|
||
}, [isRunning, playbackKey, job.output])
|
||
|
||
// ✅ iOS Safari: visualViewport changes (address bar / bottom bar / keyboard) need a rerender
|
||
const [, setVvTick] = React.useState(0)
|
||
|
||
React.useEffect(() => {
|
||
if (typeof window === 'undefined') return
|
||
const vv = window.visualViewport
|
||
if (!vv) return
|
||
|
||
const bump = () => setVvTick((x) => x + 1)
|
||
|
||
bump()
|
||
vv.addEventListener('resize', bump)
|
||
vv.addEventListener('scroll', bump)
|
||
window.addEventListener('resize', bump)
|
||
window.addEventListener('orientationchange', bump)
|
||
|
||
return () => {
|
||
vv.removeEventListener('resize', bump)
|
||
vv.removeEventListener('scroll', bump)
|
||
window.removeEventListener('resize', bump)
|
||
window.removeEventListener('orientationchange', bump)
|
||
}
|
||
}, [])
|
||
|
||
const [controlBarH, setControlBarH] = React.useState(56)
|
||
const [portalTarget, setPortalTarget] = React.useState<HTMLElement | null>(null)
|
||
|
||
const mini = !expanded
|
||
|
||
type WinRect = { x: number; y: number; w: number; h: number }
|
||
type ResizeDir = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw'
|
||
|
||
const isDesktop = useMediaQuery('(min-width: 640px)')
|
||
const miniDesktop = mini && isDesktop
|
||
|
||
const WIN_KEY = 'player_window_v1'
|
||
|
||
const DEFAULT_W = 420
|
||
const DEFAULT_H = 280
|
||
const MARGIN = 12
|
||
const MIN_W = 320
|
||
const MIN_H = 200
|
||
|
||
React.useEffect(() => {
|
||
if (!mounted) return
|
||
const p = playerRef.current
|
||
if (!p || (p as any).isDisposed?.()) return
|
||
|
||
const root = p.el() as HTMLElement | null
|
||
if (!root) return
|
||
|
||
const bar = root.querySelector('.vjs-control-bar') as HTMLElement | null
|
||
if (!bar) return
|
||
|
||
const update = () => {
|
||
const h = Math.round(bar.getBoundingClientRect().height || 0)
|
||
if (h > 0) setControlBarH(h)
|
||
}
|
||
|
||
update()
|
||
|
||
let ro: ResizeObserver | null = null
|
||
if (typeof ResizeObserver !== 'undefined') {
|
||
ro = new ResizeObserver(update)
|
||
ro.observe(bar)
|
||
}
|
||
|
||
window.addEventListener('resize', update)
|
||
return () => {
|
||
window.removeEventListener('resize', update)
|
||
ro?.disconnect()
|
||
}
|
||
}, [mounted, expanded])
|
||
|
||
// ✅ zentrale Umschalt-Funktion (Quality Switch, inkl. t= Segment)
|
||
const applyQualitySwitch = React.useCallback(
|
||
(p: any, fileName: string, nextQ: string) => {
|
||
if (isRunning) return
|
||
|
||
installAbsoluteTimelineShim(p)
|
||
|
||
const wasPaused = Boolean(p.paused?.())
|
||
|
||
// absolute Zeit (Shim)
|
||
const absNow = Number(p.currentTime?.() ?? 0) || 0
|
||
const startSec = absNow > 0 ? Math.floor(absNow / 2) * 2 : 0
|
||
const rel = absNow - startSec
|
||
|
||
p.__timeOffsetSec = startSec
|
||
|
||
// media-effect darf nicht direkt danach drüberbügeln
|
||
skipNextMediaSrcRef.current = true
|
||
|
||
// ✅ applied wechseln
|
||
setAppliedQuality(nextQ)
|
||
|
||
// fürs Label "Auto (720p)"
|
||
p.options_.__autoAppliedQuality = nextQ
|
||
|
||
const nextSrc = buildVideoSrc({
|
||
file: fileName,
|
||
quality: nextQ,
|
||
startSec,
|
||
})
|
||
|
||
const knownFull = Number(fullDurationSec || 0) || 0
|
||
if (knownFull > 0) p.__fullDurationSec = knownFull
|
||
|
||
try {
|
||
const prev = p.__onLoadedMetaQSwitch
|
||
if (prev) p.off('loadedmetadata', prev)
|
||
} catch {}
|
||
|
||
const onLoadedMeta = () => {
|
||
updateIntrinsicDims()
|
||
|
||
if (!(Number(p.__fullDurationSec) > 0)) {
|
||
try {
|
||
const segDur = Number(p.__origDuration?.() ?? 0) || 0
|
||
if (segDur > 0) p.__fullDurationSec = startSec + segDur
|
||
} catch {}
|
||
}
|
||
|
||
try {
|
||
p.__setRelativeTime?.(rel)
|
||
} catch {}
|
||
try {
|
||
p.trigger?.('timeupdate')
|
||
} catch {}
|
||
|
||
// Auto-label refresh
|
||
try {
|
||
p.trigger?.('gear:refresh')
|
||
} catch {}
|
||
|
||
if (!wasPaused) {
|
||
const ret = p.play?.()
|
||
if (ret && typeof ret.catch === 'function') ret.catch(() => {})
|
||
}
|
||
}
|
||
|
||
p.__onLoadedMetaQSwitch = onLoadedMeta
|
||
p.one('loadedmetadata', onLoadedMeta)
|
||
|
||
try {
|
||
p.src({ src: nextSrc, type: 'video/mp4' })
|
||
} catch {}
|
||
try {
|
||
p.load?.()
|
||
} catch {}
|
||
},
|
||
[isRunning, buildVideoSrc, updateIntrinsicDims, fullDurationSec]
|
||
)
|
||
|
||
// ✅ Gear-Auswahl: requestedQuality setzen, bei manual sofort umschalten
|
||
React.useEffect(() => {
|
||
const p = playerRef.current as any
|
||
if (!p || p.isDisposed?.()) return
|
||
|
||
installAbsoluteTimelineShim(p)
|
||
|
||
const onQ = (ev: any) => {
|
||
const q = String(ev?.quality ?? 'auto').trim()
|
||
if (isRunning) return
|
||
|
||
const fileName = baseName(job.output?.trim() || '')
|
||
if (!fileName) return
|
||
|
||
// requested immer updaten (UI)
|
||
setRequestedQuality(q)
|
||
|
||
// Auto: applied bleibt erstmal wie aktuell
|
||
if (q === 'auto') {
|
||
try {
|
||
p.options_.__gearQuality = 'auto'
|
||
p.options_.__autoAppliedQuality = appliedQualityRef.current || defaultQuality
|
||
p.trigger?.('gear:refresh')
|
||
} catch {}
|
||
return
|
||
}
|
||
|
||
// Manual: direkt umschalten
|
||
try {
|
||
p.options_.__gearQuality = q
|
||
p.options_.__autoAppliedQuality = q
|
||
p.trigger?.('gear:refresh')
|
||
} catch {}
|
||
|
||
applyQualitySwitch(p, fileName, q)
|
||
}
|
||
|
||
p.on('gear:quality', onQ)
|
||
return () => {
|
||
try {
|
||
p.off('gear:quality', onQ)
|
||
} catch {}
|
||
}
|
||
}, [playerReadyTick, job.output, isRunning, applyQualitySwitch, defaultQuality])
|
||
|
||
// ✅ Auto-Controller: buffer/stall-basiert hoch/runter
|
||
React.useEffect(() => {
|
||
if (!mounted) return
|
||
if (isRunning) return
|
||
if (requestedQuality !== 'auto') return
|
||
|
||
const p: any = playerRef.current
|
||
if (!p || p.isDisposed?.()) return
|
||
|
||
installAbsoluteTimelineShim(p)
|
||
|
||
const fileName = baseName(job.output?.trim() || '')
|
||
if (!fileName) return
|
||
|
||
const getLadder = (): string[] => {
|
||
const q = (p.options_?.gearQualities || gearQualitiesForHeight(intrH ?? videoH)) as string[]
|
||
return q.filter((x) => x && x !== 'auto')
|
||
}
|
||
|
||
const qToNum = (qq: string) => {
|
||
const m = String(qq).match(/(\d{3,4})p/i)
|
||
return m ? Number(m[1]) : 0
|
||
}
|
||
|
||
const sortDesc = (arr: string[]) => [...arr].sort((a, b) => qToNum(b) - qToNum(a))
|
||
|
||
const pickLower = (cur: string, ladder: string[]) => {
|
||
const L = sortDesc(ladder)
|
||
const curN = qToNum(cur)
|
||
for (let i = 0; i < L.length; i++) {
|
||
const n = qToNum(L[i])
|
||
if (n > 0 && n < curN - 8) return L[i]
|
||
}
|
||
return L[L.length - 1] || cur
|
||
}
|
||
|
||
const pickHigher = (cur: string, ladder: string[]) => {
|
||
const L = sortDesc(ladder)
|
||
const curN = qToNum(cur)
|
||
for (let i = L.length - 1; i >= 0; i--) {
|
||
const n = qToNum(L[i])
|
||
if (n > curN + 8) return L[i]
|
||
}
|
||
return L[0] || cur
|
||
}
|
||
|
||
let lastStallAt = 0
|
||
let lastSwitchAt = 0
|
||
let stableSince = 0
|
||
|
||
const onStall = () => {
|
||
lastStallAt = Date.now()
|
||
}
|
||
p.on('waiting', onStall)
|
||
p.on('stalled', onStall)
|
||
|
||
const getBufferAheadSec = () => {
|
||
try {
|
||
const relNow = Number(p.__origCurrentTime?.() ?? 0) || 0
|
||
const buf = p.buffered?.()
|
||
if (!buf || buf.length <= 0) return 0
|
||
const end = buf.end(buf.length - 1)
|
||
return Math.max(0, (Number(end) || 0) - relNow)
|
||
} catch {
|
||
return 0
|
||
}
|
||
}
|
||
|
||
const tick = () => {
|
||
const now = Date.now()
|
||
if (now - lastSwitchAt < 8000) return // hysteresis
|
||
|
||
const ladder = getLadder()
|
||
if (!ladder.length) return
|
||
|
||
const cur = appliedQualityRef.current && appliedQualityRef.current !== 'auto' ? appliedQualityRef.current : ladder[0]
|
||
const ahead = getBufferAheadSec()
|
||
const recentlyStalled = now - lastStallAt < 2500
|
||
|
||
// downgrade schnell, wenn buffer knapp / stall
|
||
if (ahead < 4 || recentlyStalled) {
|
||
const next = pickLower(cur, ladder)
|
||
if (next && next !== cur) {
|
||
lastSwitchAt = now
|
||
stableSince = 0
|
||
try {
|
||
p.options_.__autoAppliedQuality = next
|
||
p.trigger?.('gear:refresh')
|
||
} catch {}
|
||
applyQualitySwitch(p, fileName, next)
|
||
}
|
||
return
|
||
}
|
||
|
||
// stable => upgrade langsam
|
||
if (ahead > 20 && now - lastStallAt > 20000) {
|
||
if (!stableSince) stableSince = now
|
||
if (now - stableSince > 20000) {
|
||
const next = pickHigher(cur, ladder)
|
||
if (next && next !== cur) {
|
||
lastSwitchAt = now
|
||
stableSince = now
|
||
try {
|
||
p.options_.__autoAppliedQuality = next
|
||
p.trigger?.('gear:refresh')
|
||
} catch {}
|
||
applyQualitySwitch(p, fileName, next)
|
||
}
|
||
}
|
||
} else {
|
||
stableSince = 0
|
||
}
|
||
}
|
||
|
||
const id = window.setInterval(tick, 2000)
|
||
tick()
|
||
|
||
return () => {
|
||
window.clearInterval(id)
|
||
try {
|
||
p.off('waiting', onStall)
|
||
} catch {}
|
||
try {
|
||
p.off('stalled', onStall)
|
||
} catch {}
|
||
}
|
||
}, [mounted, isRunning, requestedQuality, job.output, intrH, videoH, applyQualitySwitch])
|
||
|
||
React.useEffect(() => setMounted(true), [])
|
||
|
||
React.useEffect(() => {
|
||
let el = document.getElementById('player-root') as HTMLElement | null
|
||
if (!el) {
|
||
el = document.createElement('div')
|
||
el.id = 'player-root'
|
||
}
|
||
|
||
// ✅ Mobile: immer in <body>, damit "fixed bottom-0" am echten Viewport hängt
|
||
// ✅ Desktop: in den obersten offenen Dialog, damit er im Top-Layer vor dem Modal liegt
|
||
let host: HTMLElement | null = null
|
||
|
||
if (isDesktop) {
|
||
const dialogs = Array.from(document.querySelectorAll('dialog[open]')) as HTMLElement[]
|
||
host = dialogs.length ? dialogs[dialogs.length - 1] : null
|
||
}
|
||
|
||
host = host ?? document.body
|
||
host.appendChild(el)
|
||
|
||
el.style.position = 'relative'
|
||
el.style.zIndex = '2147483647'
|
||
|
||
setPortalTarget(el)
|
||
}, [isDesktop])
|
||
|
||
React.useEffect(() => {
|
||
const p: any = playerRef.current
|
||
if (!p || p.isDisposed?.()) return
|
||
if (isRunning) return // live nutzt Video.js nicht
|
||
|
||
installAbsoluteTimelineShim(p)
|
||
|
||
const fileName = baseName(job.output?.trim() || '')
|
||
if (!fileName) return
|
||
|
||
// volle Dauer: nimm was du hast (durationSeconds ist bei finished normalerweise da)
|
||
const knownFull = Number(fullDurationSec || 0) || 0
|
||
if (knownFull > 0) p.__fullDurationSec = knownFull
|
||
|
||
// absolute server-seek
|
||
p.__serverSeekAbs = (absSec: number) => {
|
||
const abs = Math.max(0, Number(absSec) || 0)
|
||
|
||
// ✅ effektive Quality: bei Auto die applied nehmen
|
||
const effectiveQ =
|
||
requestedQualityRef.current === 'auto'
|
||
? String(appliedQualityRef.current || 'auto').trim()
|
||
: String(requestedQualityRef.current || 'auto').trim()
|
||
|
||
// helper: "1080p" -> 1080
|
||
const qToH = (qq: string): number => {
|
||
const m = String(qq).match(/(\d{3,4})p/i)
|
||
return m ? Number(m[1]) : 0
|
||
}
|
||
|
||
// Quelle (wie in buildVideoSrc-Logik): wenn target < source => Downscale
|
||
const sourceH =
|
||
typeof videoH === 'number' && Number.isFinite(videoH) && videoH > 0 ? Math.round(videoH) : 0
|
||
const targetH = qToH(effectiveQ)
|
||
|
||
const needsDownscale =
|
||
effectiveQ !== 'auto' && sourceH > 0 && targetH > 0 && targetH < sourceH - 8
|
||
|
||
// ✅ 1) NICHT runterskalieren => NUR client seek (kein FFmpeg)
|
||
if (!needsDownscale) {
|
||
const wasPaused = Boolean(p.paused?.())
|
||
const off = Number(p.__timeOffsetSec ?? 0) || 0
|
||
const curSrc = String(p.currentSrc?.() || '')
|
||
const isSegmented = off > 0 || curSrc.includes('t=') || curSrc.includes('start=')
|
||
|
||
if (isSegmented) {
|
||
p.__timeOffsetSec = 0
|
||
|
||
const nextSrc = buildVideoSrc({
|
||
file: fileName,
|
||
quality: effectiveQ,
|
||
// startSec absichtlich NICHT setzen
|
||
})
|
||
|
||
const onMeta = () => {
|
||
updateIntrinsicDims()
|
||
try {
|
||
p.__origCurrentTime?.(abs)
|
||
try {
|
||
p.trigger?.('timeupdate')
|
||
} catch {}
|
||
} catch {
|
||
try {
|
||
p.currentTime?.(abs)
|
||
} catch {}
|
||
}
|
||
if (!wasPaused) {
|
||
const ret = p.play?.()
|
||
if (ret && typeof ret.catch === 'function') ret.catch(() => {})
|
||
}
|
||
}
|
||
|
||
try {
|
||
p.one('loadedmetadata', onMeta)
|
||
} catch {}
|
||
try {
|
||
p.src({ src: nextSrc, type: 'video/mp4' })
|
||
} catch {}
|
||
try {
|
||
p.load?.()
|
||
} catch {}
|
||
return
|
||
}
|
||
|
||
try {
|
||
p.__origCurrentTime?.(abs)
|
||
try {
|
||
p.trigger?.('timeupdate')
|
||
} catch {}
|
||
} catch {
|
||
try {
|
||
p.currentTime?.(abs)
|
||
} catch {}
|
||
}
|
||
return
|
||
}
|
||
|
||
// ✅ 2) Downscale aktiv => Server-Seek (Segment)
|
||
const wasPaused = Boolean(p.paused?.())
|
||
const startSec = Math.floor(abs / 2) * 2
|
||
const rel = abs - startSec
|
||
|
||
p.__timeOffsetSec = startSec
|
||
|
||
const nextSrc = buildVideoSrc({
|
||
file: fileName,
|
||
quality: effectiveQ,
|
||
startSec,
|
||
})
|
||
|
||
const onMeta = () => {
|
||
updateIntrinsicDims()
|
||
p.__setRelativeTime?.(rel)
|
||
try {
|
||
p.trigger?.('timeupdate')
|
||
} catch {}
|
||
if (!wasPaused) {
|
||
const ret = p.play?.()
|
||
if (ret && typeof ret.catch === 'function') ret.catch(() => {})
|
||
}
|
||
}
|
||
|
||
try {
|
||
p.one('loadedmetadata', onMeta)
|
||
} catch {}
|
||
try {
|
||
p.src({ src: nextSrc, type: 'video/mp4' })
|
||
} catch {}
|
||
try {
|
||
p.load?.()
|
||
} catch {}
|
||
}
|
||
|
||
return () => {
|
||
try {
|
||
delete p.__serverSeekAbs
|
||
} catch {}
|
||
}
|
||
}, [playerReadyTick, job.output, isRunning, buildVideoSrc, updateIntrinsicDims, videoH])
|
||
|
||
React.useLayoutEffect(() => {
|
||
if (!mounted) return
|
||
if (!containerRef.current) return
|
||
if (playerRef.current) return
|
||
if (isRunning) return // ✅ neu: für Live keinen Video.js mounten
|
||
if (!metaReady) return
|
||
|
||
const videoEl = document.createElement('video')
|
||
videoEl.className = 'video-js vjs-big-play-centered w-full h-full'
|
||
videoEl.setAttribute('playsinline', 'true')
|
||
|
||
containerRef.current.appendChild(videoEl)
|
||
videoNodeRef.current = videoEl
|
||
|
||
ensureGearControlRegistered()
|
||
|
||
const initialGearQualities = gearQualitiesForHeight(videoH)
|
||
|
||
const initialSelectedQuality = (() => {
|
||
const h = typeof videoH === 'number' && Number.isFinite(videoH) && videoH > 0 ? Math.round(videoH) : 0
|
||
return h ? `${h}p` : 'auto'
|
||
})()
|
||
|
||
setRequestedQuality(initialSelectedQuality)
|
||
setAppliedQuality(initialSelectedQuality)
|
||
|
||
const p = videojs(videoEl, {
|
||
autoplay: true,
|
||
muted: startMuted,
|
||
controls: true,
|
||
preload: 'metadata',
|
||
playsinline: true,
|
||
responsive: true,
|
||
fluid: false,
|
||
fill: true,
|
||
liveui: false,
|
||
|
||
html5: {
|
||
vhs: { lowLatencyMode: true },
|
||
},
|
||
|
||
inactivityTimeout: 0,
|
||
|
||
gearQualities: initialGearQualities,
|
||
__gearQuality: initialSelectedQuality,
|
||
__autoAppliedQuality: initialSelectedQuality,
|
||
|
||
controlBar: {
|
||
skipButtons: { backward: 10, forward: 10 },
|
||
volumePanel: { inline: false },
|
||
children: [
|
||
'skipBackward',
|
||
'playToggle',
|
||
'skipForward',
|
||
'volumePanel',
|
||
'currentTimeDisplay',
|
||
'timeDivider',
|
||
'durationDisplay',
|
||
'progressControl',
|
||
'spacer',
|
||
'playbackRateMenuButton',
|
||
'GearMenuButton',
|
||
'fullscreenToggle',
|
||
],
|
||
},
|
||
playbackRates: [0.5, 1, 1.25, 1.5, 2],
|
||
})
|
||
|
||
playerRef.current = p
|
||
setPlayerReadyTick((x) => x + 1)
|
||
|
||
p.one('loadedmetadata', () => {
|
||
updateIntrinsicDims()
|
||
try {
|
||
const h = typeof (p as any).videoHeight === 'function' ? (p as any).videoHeight() : 0
|
||
const next = gearQualitiesForHeight(h)
|
||
;(p as any).options_.gearQualities = next
|
||
|
||
const curReq = String((p as any).options_.__gearQuality ?? 'auto')
|
||
const native =
|
||
typeof h === 'number' && Number.isFinite(h) && h > 0 ? `${Math.round(h)}p` : 'auto'
|
||
|
||
const nextReq = next.includes(curReq) ? curReq : next.includes(native) ? native : 'auto'
|
||
|
||
;(p as any).options_.__gearQuality = nextReq
|
||
|
||
// state sync
|
||
setRequestedQuality(nextReq)
|
||
if (nextReq !== 'auto') {
|
||
setAppliedQuality(nextReq)
|
||
;(p as any).options_.__autoAppliedQuality = nextReq
|
||
} else {
|
||
// Auto gewählt: applied falls noch auto -> native
|
||
const curApplied = String(appliedQualityRef.current || 'auto')
|
||
const nextApplied = curApplied !== 'auto' ? curApplied : native !== 'auto' ? native : 'auto'
|
||
setAppliedQuality(nextApplied)
|
||
;(p as any).options_.__autoAppliedQuality = nextApplied
|
||
}
|
||
|
||
p.trigger('gear:refresh')
|
||
} catch {}
|
||
})
|
||
|
||
try {
|
||
const gear = (p.getChild('controlBar') as any)?.getChild('GearMenuButton')
|
||
if (gear?.el) gear.el().classList.add('vjs-gear-menu')
|
||
} catch {}
|
||
|
||
p.userActive(true)
|
||
p.on('userinactive', () => p.userActive(true))
|
||
|
||
return () => {
|
||
try {
|
||
if (playerRef.current) {
|
||
playerRef.current.dispose()
|
||
playerRef.current = null
|
||
}
|
||
} finally {
|
||
if (videoNodeRef.current) {
|
||
videoNodeRef.current.remove()
|
||
videoNodeRef.current = null
|
||
}
|
||
}
|
||
}
|
||
}, [mounted, startMuted, isRunning, metaReady, videoH, updateIntrinsicDims])
|
||
|
||
React.useEffect(() => {
|
||
const p = playerRef.current
|
||
if (!p || (p as any).isDisposed?.()) return
|
||
|
||
const el = p.el() as HTMLElement | null
|
||
if (!el) return
|
||
|
||
el.classList.toggle('is-live-download', Boolean(isLive))
|
||
}, [isLive])
|
||
|
||
const releaseMedia = React.useCallback(() => {
|
||
const p = playerRef.current
|
||
if (!p || (p as any).isDisposed?.()) return
|
||
|
||
try {
|
||
p.pause()
|
||
;(p as any).reset?.()
|
||
} catch {}
|
||
|
||
try {
|
||
p.src({ src: '', type: 'video/mp4' } as any)
|
||
;(p as any).load?.()
|
||
} catch {}
|
||
}, [])
|
||
|
||
React.useEffect(() => {
|
||
if (!mounted) return
|
||
if (!isRunning && !metaReady) {
|
||
releaseMedia()
|
||
return
|
||
}
|
||
|
||
const p = playerRef.current
|
||
if (!p || (p as any).isDisposed?.()) return
|
||
|
||
// ✅ src wurde gerade manuell (Quality-Wechsel mit t=...) gesetzt -> einmaligen Auto-Apply überspringen
|
||
if (skipNextMediaSrcRef.current) {
|
||
skipNextMediaSrcRef.current = false
|
||
return
|
||
}
|
||
|
||
const t = p.currentTime() || 0
|
||
p.muted(startMuted)
|
||
|
||
if (!media.src) {
|
||
try {
|
||
p.pause()
|
||
;(p as any).reset?.()
|
||
p.error(null as any) // Video.js Error-State leeren
|
||
} catch {}
|
||
return
|
||
}
|
||
|
||
;(p as any).__timeOffsetSec = 0
|
||
|
||
// volle Dauer kennen wir bei finished meistens schon:
|
||
const knownFull = Number(fullDurationSec || 0) || 0
|
||
;(p as any).__fullDurationSec = knownFull
|
||
|
||
// ✅ NICHT neu setzen, wenn Source identisch ist (verhindert "cancelled" durch unnötige Reloads)
|
||
const curSrc = String((p as any).currentSrc?.() || '')
|
||
if (curSrc && curSrc === media.src) {
|
||
// trotzdem versuchen zu spielen (z.B. wenn nur muted/state geändert wurde)
|
||
const ret = p.play?.()
|
||
if (ret && typeof (ret as any).catch === 'function') (ret as Promise<void>).catch(() => {})
|
||
return
|
||
}
|
||
|
||
p.src({ src: media.src, type: media.type })
|
||
|
||
const tryPlay = () => {
|
||
const ret = p.play?.()
|
||
if (ret && typeof (ret as any).catch === 'function') {
|
||
;(ret as Promise<void>).catch(() => {})
|
||
}
|
||
}
|
||
|
||
p.one('loadedmetadata', () => {
|
||
if ((p as any).isDisposed?.()) return
|
||
updateIntrinsicDims()
|
||
|
||
// ✅ volle Dauer: aus bekannten Daten (nicht aus p.duration())
|
||
try {
|
||
const knownFull = Number(fullDurationSec || 0) || 0
|
||
if (knownFull > 0) (p as any).__fullDurationSec = knownFull
|
||
} catch {}
|
||
|
||
try {
|
||
p.playbackRate(1)
|
||
} catch {}
|
||
|
||
const isHls = /mpegurl/i.test(media.type)
|
||
|
||
// ✅ initiale Position wiederherstellen, aber RELATIV (ohne server-seek)
|
||
if (t > 0 && !isHls) {
|
||
try {
|
||
const off = Number((p as any).__timeOffsetSec ?? 0) || 0
|
||
const rel = Math.max(0, t - off)
|
||
;(p as any).__setRelativeTime?.(rel)
|
||
} catch {}
|
||
}
|
||
|
||
try {
|
||
p.trigger?.('timeupdate')
|
||
} catch {}
|
||
|
||
tryPlay()
|
||
})
|
||
|
||
tryPlay()
|
||
}, [mounted, isRunning, metaReady, media.src, media.type, startMuted, updateIntrinsicDims, fullDurationSec, releaseMedia])
|
||
|
||
React.useEffect(() => {
|
||
if (!mounted) return
|
||
const p = playerRef.current
|
||
if (!p || (p as any).isDisposed?.()) return
|
||
|
||
const onErr = () => {
|
||
if (job.status === 'running') setHlsReady(false)
|
||
}
|
||
|
||
p.on('error', onErr)
|
||
return () => {
|
||
try {
|
||
p.off('error', onErr)
|
||
} catch {}
|
||
}
|
||
}, [mounted, job.status])
|
||
|
||
React.useEffect(() => {
|
||
const p = playerRef.current
|
||
if (!p || (p as any).isDisposed?.()) return
|
||
queueMicrotask(() => p.trigger('resize'))
|
||
}, [expanded])
|
||
|
||
React.useEffect(() => {
|
||
const onRelease = (ev: Event) => {
|
||
const detail = (ev as CustomEvent<{ file?: string }>).detail
|
||
const file = (detail?.file ?? '').trim()
|
||
if (!file) return
|
||
|
||
const current = baseName(job.output?.trim() || '')
|
||
if (current && current === file) releaseMedia()
|
||
}
|
||
|
||
window.addEventListener('player:release', onRelease as EventListener)
|
||
return () => window.removeEventListener('player:release', onRelease as EventListener)
|
||
}, [job.output, releaseMedia])
|
||
|
||
React.useEffect(() => {
|
||
const onCloseIfFile = (ev: Event) => {
|
||
const detail = (ev as CustomEvent<{ file?: string }>).detail
|
||
const file = (detail?.file ?? '').trim()
|
||
if (!file) return
|
||
|
||
const current = baseName(job.output?.trim() || '')
|
||
if (current && current === file) {
|
||
releaseMedia()
|
||
onClose()
|
||
}
|
||
}
|
||
|
||
window.addEventListener('player:close', onCloseIfFile as EventListener)
|
||
return () => window.removeEventListener('player:close', onCloseIfFile as EventListener)
|
||
}, [job.output, releaseMedia, onClose])
|
||
|
||
const getViewport = () => {
|
||
if (typeof window === 'undefined') return { w: 0, h: 0, ox: 0, oy: 0, bottomInset: 0 }
|
||
|
||
const vv = window.visualViewport
|
||
if (vv && Number.isFinite(vv.width) && Number.isFinite(vv.height)) {
|
||
const w = Math.floor(vv.width)
|
||
const h = Math.floor(vv.height)
|
||
|
||
const ox = Math.floor(vv.offsetLeft || 0)
|
||
const oy = Math.floor(vv.offsetTop || 0)
|
||
|
||
// Space below the visual viewport (Safari bottom bar / keyboard)
|
||
const bottomInset = Math.max(0, Math.floor(window.innerHeight - (vv.height + vv.offsetTop)))
|
||
|
||
return { w, h, ox, oy, bottomInset }
|
||
}
|
||
|
||
const de = document.documentElement
|
||
const w = de?.clientWidth || window.innerWidth
|
||
const h = de?.clientHeight || window.innerHeight
|
||
return { w, h, ox: 0, oy: 0, bottomInset: 0 }
|
||
}
|
||
|
||
const clampRect = React.useCallback((r: { x: number; y: number; w: number; h: number }, ratio?: number) => {
|
||
if (typeof window === 'undefined') return r
|
||
|
||
const { w: vw, h: vh } = getViewport()
|
||
const maxW = vw - MARGIN * 2
|
||
const maxH = vh - MARGIN * 2
|
||
|
||
let w = r.w
|
||
let h = r.h
|
||
|
||
if (ratio && Number.isFinite(ratio) && ratio > 0.1) {
|
||
w = Math.max(MIN_W, w)
|
||
h = w / ratio
|
||
|
||
if (h < MIN_H) {
|
||
h = MIN_H
|
||
w = h * ratio
|
||
}
|
||
|
||
if (w > maxW) {
|
||
w = maxW
|
||
h = w / ratio
|
||
}
|
||
if (h > maxH) {
|
||
h = maxH
|
||
w = h * ratio
|
||
}
|
||
} else {
|
||
w = Math.max(MIN_W, Math.min(w, maxW))
|
||
h = Math.max(MIN_H, Math.min(h, maxH))
|
||
}
|
||
|
||
const x = Math.max(MARGIN, Math.min(r.x, vw - w - MARGIN))
|
||
const y = Math.max(MARGIN, Math.min(r.y, vh - h - MARGIN))
|
||
|
||
return { x, y, w, h }
|
||
}, [])
|
||
|
||
const loadRect = React.useCallback(() => {
|
||
if (typeof window === 'undefined') return { x: MARGIN, y: MARGIN, w: DEFAULT_W, h: DEFAULT_H }
|
||
|
||
try {
|
||
const raw = window.localStorage.getItem(WIN_KEY)
|
||
if (raw) {
|
||
const v = JSON.parse(raw) as Partial<{ x: number; y: number; w: number; h: number }>
|
||
if (typeof v.x === 'number' && typeof v.y === 'number' && typeof v.w === 'number' && typeof v.h === 'number') {
|
||
return clampRect({ x: v.x, y: v.y, w: v.w, h: v.h }, v.w / v.h)
|
||
}
|
||
}
|
||
} catch {}
|
||
|
||
const { w: vw, h: vh } = getViewport()
|
||
const w = DEFAULT_W
|
||
const h = DEFAULT_H
|
||
|
||
const x = Math.max(MARGIN, vw - w - MARGIN)
|
||
const y = Math.max(MARGIN, vh - h - MARGIN)
|
||
return clampRect({ x, y, w, h }, w / h)
|
||
}, [clampRect])
|
||
|
||
const [win, setWin] = React.useState<WinRect>(() => loadRect())
|
||
const isNarrowMini = miniDesktop && win.w < 380
|
||
|
||
const saveRect = React.useCallback((r: WinRect) => {
|
||
if (typeof window === 'undefined') return
|
||
try {
|
||
window.localStorage.setItem(WIN_KEY, JSON.stringify(r))
|
||
} catch {}
|
||
}, [])
|
||
|
||
const winRef = React.useRef(win)
|
||
React.useEffect(() => {
|
||
winRef.current = win
|
||
}, [win])
|
||
|
||
React.useEffect(() => {
|
||
if (!miniDesktop) return
|
||
setWin(loadRect())
|
||
}, [miniDesktop, loadRect])
|
||
|
||
React.useEffect(() => {
|
||
if (!miniDesktop) return
|
||
const onResize = () => setWin((r) => clampRect(r, r.w / r.h))
|
||
window.addEventListener('resize', onResize)
|
||
return () => window.removeEventListener('resize', onResize)
|
||
}, [miniDesktop, clampRect])
|
||
|
||
// Video.js resize triggern, wenn sich Fenstergröße ändert
|
||
const vjsResizeRafRef = React.useRef<number | null>(null)
|
||
React.useEffect(() => {
|
||
const p = playerRef.current
|
||
if (!p || (p as any).isDisposed?.()) return
|
||
|
||
if (vjsResizeRafRef.current != null) cancelAnimationFrame(vjsResizeRafRef.current)
|
||
vjsResizeRafRef.current = requestAnimationFrame(() => {
|
||
vjsResizeRafRef.current = null
|
||
try {
|
||
p.trigger('resize')
|
||
} catch {}
|
||
})
|
||
|
||
return () => {
|
||
if (vjsResizeRafRef.current != null) {
|
||
cancelAnimationFrame(vjsResizeRafRef.current)
|
||
vjsResizeRafRef.current = null
|
||
}
|
||
}
|
||
}, [miniDesktop, win.w, win.h])
|
||
|
||
const [isResizing, setIsResizing] = React.useState(false)
|
||
const [isDragging, setIsDragging] = React.useState(false)
|
||
|
||
// pointermove sehr häufig -> 1x pro Frame committen
|
||
const dragRafRef = React.useRef<number | null>(null)
|
||
const pendingPosRef = React.useRef<{ x: number; y: number } | null>(null)
|
||
const draggingRef = React.useRef<null | { sx: number; sy: number; start: WinRect }>(null)
|
||
|
||
const applySnap = React.useCallback((r: WinRect): WinRect => {
|
||
const { w: vw, h: vh } = getViewport()
|
||
const leftEdge = MARGIN
|
||
const rightEdge = vw - r.w - MARGIN
|
||
const bottomEdge = vh - r.h - MARGIN
|
||
const centerX = r.x + r.w / 2
|
||
const dockLeft = centerX < vw / 2
|
||
return { ...r, x: dockLeft ? leftEdge : rightEdge, y: bottomEdge }
|
||
}, [])
|
||
|
||
const onDragMove = React.useCallback(
|
||
(ev: PointerEvent) => {
|
||
const s = draggingRef.current
|
||
if (!s) return
|
||
|
||
const dx = ev.clientX - s.sx
|
||
const dy = ev.clientY - s.sy
|
||
|
||
const start = s.start
|
||
const next = clampRect({ x: start.x + dx, y: start.y + dy, w: start.w, h: start.h })
|
||
|
||
pendingPosRef.current = { x: next.x, y: next.y }
|
||
|
||
if (dragRafRef.current == null) {
|
||
dragRafRef.current = requestAnimationFrame(() => {
|
||
dragRafRef.current = null
|
||
const p = pendingPosRef.current
|
||
if (!p) return
|
||
setWin((cur) => ({ ...cur, x: p.x, y: p.y }))
|
||
})
|
||
}
|
||
},
|
||
[clampRect]
|
||
)
|
||
|
||
const endDrag = React.useCallback(() => {
|
||
if (!draggingRef.current) return
|
||
setIsDragging(false)
|
||
|
||
if (dragRafRef.current != null) {
|
||
cancelAnimationFrame(dragRafRef.current)
|
||
dragRafRef.current = null
|
||
}
|
||
|
||
draggingRef.current = null
|
||
window.removeEventListener('pointermove', onDragMove)
|
||
window.removeEventListener('pointerup', endDrag)
|
||
|
||
setWin((cur) => {
|
||
const snapped = applySnap(clampRect(cur))
|
||
queueMicrotask(() => saveRect(snapped))
|
||
return snapped
|
||
})
|
||
}, [onDragMove, applySnap, clampRect, saveRect])
|
||
|
||
const beginDrag = React.useCallback(
|
||
(e: React.PointerEvent) => {
|
||
if (!miniDesktop) return
|
||
if (isResizing) return
|
||
if (e.button !== 0) return
|
||
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
|
||
const start = winRef.current
|
||
draggingRef.current = { sx: e.clientX, sy: e.clientY, start }
|
||
setIsDragging(true)
|
||
|
||
window.addEventListener('pointermove', onDragMove)
|
||
window.addEventListener('pointerup', endDrag)
|
||
},
|
||
[miniDesktop, isResizing, onDragMove, endDrag]
|
||
)
|
||
|
||
// pointermove kommt extrem oft -> wir committen max. 1x pro Frame
|
||
const resizeRafRef = React.useRef<number | null>(null)
|
||
const pendingRectRef = React.useRef<WinRect | null>(null)
|
||
const resizingRef = React.useRef<null | { dir: ResizeDir; sx: number; sy: number; start: WinRect; ratio: number }>(null)
|
||
|
||
const onResizeMove = React.useCallback(
|
||
(ev: PointerEvent) => {
|
||
const s = resizingRef.current
|
||
if (!s) return
|
||
|
||
const dx = ev.clientX - s.sx
|
||
const dy = ev.clientY - s.sy
|
||
const ratio = s.ratio
|
||
|
||
const fromW = s.dir.includes('w')
|
||
const fromE = s.dir.includes('e')
|
||
const fromN = s.dir.includes('n')
|
||
const fromS = s.dir.includes('s')
|
||
|
||
let w = s.start.w
|
||
let h = s.start.h
|
||
let x = s.start.x
|
||
let y = s.start.y
|
||
|
||
const { w: vw, h: vh } = getViewport()
|
||
const EDGE_SNAP = 24
|
||
|
||
const startRight = s.start.x + s.start.w
|
||
const startBottom = s.start.y + s.start.h
|
||
|
||
const anchoredRight = Math.abs(vw - MARGIN - startRight) <= EDGE_SNAP
|
||
const anchoredBottom = Math.abs(vh - MARGIN - startBottom) <= EDGE_SNAP
|
||
|
||
const fitFromW = (newW: number) => {
|
||
newW = Math.max(MIN_W, newW)
|
||
let newH = newW / ratio
|
||
if (newH < MIN_H) {
|
||
newH = MIN_H
|
||
newW = newH * ratio
|
||
}
|
||
return { newW, newH }
|
||
}
|
||
|
||
const fitFromH = (newH: number) => {
|
||
newH = Math.max(MIN_H, newH)
|
||
let newW = newH * ratio
|
||
if (newW < MIN_W) {
|
||
newW = MIN_W
|
||
newH = newW / ratio
|
||
}
|
||
return { newW, newH }
|
||
}
|
||
|
||
const isCorner = (fromE || fromW) && (fromN || fromS)
|
||
|
||
if (isCorner) {
|
||
const useWidth = Math.abs(dx) >= Math.abs(dy)
|
||
if (useWidth) {
|
||
const rawW = fromE ? s.start.w + dx : s.start.w - dx
|
||
const { newW, newH } = fitFromW(rawW)
|
||
w = newW
|
||
h = newH
|
||
} else {
|
||
const rawH = fromS ? s.start.h + dy : s.start.h - dy
|
||
const { newW, newH } = fitFromH(rawH)
|
||
w = newW
|
||
h = newH
|
||
}
|
||
if (fromW) x = s.start.x + (s.start.w - w)
|
||
if (fromN) y = s.start.y + (s.start.h - h)
|
||
} else if (fromE || fromW) {
|
||
const rawW = fromE ? s.start.w + dx : s.start.w - dx
|
||
const { newW, newH } = fitFromW(rawW)
|
||
w = newW
|
||
h = newH
|
||
if (fromW) x = s.start.x + (s.start.w - w)
|
||
y = anchoredBottom ? s.start.y + (s.start.h - h) : s.start.y
|
||
} else if (fromN || fromS) {
|
||
const rawH = fromS ? s.start.h + dy : s.start.h - dy
|
||
const { newW, newH } = fitFromH(rawH)
|
||
w = newW
|
||
h = newH
|
||
if (fromN) y = s.start.y + (s.start.h - h)
|
||
if (anchoredRight) x = s.start.x + (s.start.w - w)
|
||
else x = s.start.x
|
||
}
|
||
|
||
const next = clampRect({ x, y, w, h }, ratio)
|
||
pendingRectRef.current = next
|
||
|
||
if (resizeRafRef.current == null) {
|
||
resizeRafRef.current = requestAnimationFrame(() => {
|
||
resizeRafRef.current = null
|
||
const r = pendingRectRef.current
|
||
if (r) setWin(r)
|
||
})
|
||
}
|
||
},
|
||
[clampRect]
|
||
)
|
||
|
||
const endResize = React.useCallback(() => {
|
||
if (!resizingRef.current) return
|
||
setIsResizing(false)
|
||
|
||
if (resizeRafRef.current != null) {
|
||
cancelAnimationFrame(resizeRafRef.current)
|
||
resizeRafRef.current = null
|
||
}
|
||
|
||
resizingRef.current = null
|
||
window.removeEventListener('pointermove', onResizeMove)
|
||
window.removeEventListener('pointerup', endResize)
|
||
saveRect(winRef.current)
|
||
}, [onResizeMove, saveRect])
|
||
|
||
const beginResize = React.useCallback(
|
||
(dir: ResizeDir) => (e: React.PointerEvent) => {
|
||
if (!miniDesktop) return
|
||
if (e.button !== 0) return
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
|
||
const start = winRef.current
|
||
resizingRef.current = { dir, sx: e.clientX, sy: e.clientY, start, ratio: start.w / start.h }
|
||
setIsResizing(true)
|
||
|
||
window.addEventListener('pointermove', onResizeMove)
|
||
window.addEventListener('pointerup', endResize)
|
||
},
|
||
[miniDesktop, onResizeMove, endResize]
|
||
)
|
||
|
||
const [canHover, setCanHover] = React.useState(false)
|
||
const [chromeHover, setChromeHover] = React.useState(false)
|
||
|
||
React.useEffect(() => {
|
||
const mq = window.matchMedia?.('(hover: hover) and (pointer: fine)')
|
||
const update = () => setCanHover(Boolean(mq?.matches))
|
||
update()
|
||
mq?.addEventListener?.('change', update)
|
||
return () => mq?.removeEventListener?.('change', update)
|
||
}, [])
|
||
|
||
const dragUiActive = miniDesktop && (chromeHover || isDragging || isResizing)
|
||
const [stopPending, setStopPending] = React.useState(false)
|
||
|
||
React.useEffect(() => {
|
||
if (job.status !== 'running') setStopPending(false)
|
||
}, [job.id, job.status])
|
||
|
||
if (!mounted || !portalTarget) return null
|
||
|
||
const overlayBtn =
|
||
'inline-flex items-center justify-center rounded-md p-2 transition ' +
|
||
'bg-white/75 text-gray-900 ring-1 ring-black/10 hover:bg-white/90 active:scale-[0.98] ' +
|
||
'dark:bg-black/45 dark:text-white dark:ring-white/10 dark:hover:bg-black/60 ' +
|
||
'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500'
|
||
|
||
const phaseRaw = String((job as any).phase ?? '')
|
||
const phase = phaseRaw.toLowerCase()
|
||
const isStoppingLike = phase === 'stopping' || phase === 'remuxing' || phase === 'moving'
|
||
const stopDisabled = !onStopJob || !isRunning || isStoppingLike || stopPending
|
||
|
||
const footerRight = (
|
||
<div className="flex items-center gap-1 min-w-0">
|
||
{isRunning ? (
|
||
<>
|
||
<Button
|
||
variant="primary"
|
||
color="red"
|
||
size="sm"
|
||
rounded="md"
|
||
disabled={stopDisabled}
|
||
title={isStoppingLike || stopPending ? 'Stoppe…' : 'Stop'}
|
||
aria-label={isStoppingLike || stopPending ? 'Stoppe…' : 'Stop'}
|
||
onClick={async (e) => {
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
if (stopDisabled) return
|
||
try {
|
||
setStopPending(true)
|
||
await onStopJob?.(job.id)
|
||
} finally {
|
||
setStopPending(false)
|
||
}
|
||
}}
|
||
className={cn('shadow-none shrink-0', miniDesktop && isNarrowMini && 'px-2')}
|
||
>
|
||
<span className="whitespace-nowrap">
|
||
{isStoppingLike || stopPending ? 'Stoppe…' : miniDesktop && isNarrowMini ? 'Stop' : 'Stoppen'}
|
||
</span>
|
||
</Button>
|
||
|
||
<RecordJobActions
|
||
job={job}
|
||
variant="overlay"
|
||
collapseToMenu
|
||
busy={isStoppingLike || stopPending}
|
||
isFavorite={isFavorite}
|
||
isLiked={isLiked}
|
||
isWatching={isWatching}
|
||
onToggleWatch={onToggleWatch ? (j) => onToggleWatch(j) : undefined}
|
||
onToggleFavorite={onToggleFavorite ? (j) => onToggleFavorite(j) : undefined}
|
||
onToggleLike={onToggleLike ? (j) => onToggleLike(j) : undefined}
|
||
order={['watch', 'favorite', 'like', 'details']}
|
||
className="gap-1 min-w-0 flex-1"
|
||
/>
|
||
</>
|
||
) : (
|
||
<RecordJobActions
|
||
job={job}
|
||
variant="overlay"
|
||
collapseToMenu
|
||
isHot={isHot || isHotFile}
|
||
isFavorite={isFavorite}
|
||
isLiked={isLiked}
|
||
isWatching={isWatching}
|
||
onToggleWatch={onToggleWatch ? (j) => onToggleWatch(j) : undefined}
|
||
onToggleFavorite={onToggleFavorite ? (j) => onToggleFavorite(j) : undefined}
|
||
onToggleLike={onToggleLike ? (j) => onToggleLike(j) : undefined}
|
||
onToggleHot={
|
||
onToggleHot
|
||
? async (j) => {
|
||
releaseMedia()
|
||
await new Promise((r) => setTimeout(r, 150))
|
||
await onToggleHot(j)
|
||
await new Promise((r) => setTimeout(r, 0))
|
||
const p = playerRef.current
|
||
if (p && !(p as any).isDisposed?.()) {
|
||
const ret = p.play?.()
|
||
if (ret && typeof (ret as any).catch === 'function') {
|
||
;(ret as Promise<void>).catch(() => {})
|
||
}
|
||
}
|
||
}
|
||
: undefined
|
||
}
|
||
onKeep={
|
||
onKeep
|
||
? async (j) => {
|
||
releaseMedia()
|
||
onClose()
|
||
await new Promise((r) => setTimeout(r, 150))
|
||
await onKeep(j)
|
||
}
|
||
: undefined
|
||
}
|
||
onDelete={
|
||
onDelete
|
||
? async (j) => {
|
||
releaseMedia()
|
||
onClose()
|
||
await new Promise((r) => setTimeout(r, 150))
|
||
await onDelete(j)
|
||
}
|
||
: undefined
|
||
}
|
||
order={['watch', 'favorite', 'like', 'hot', 'keep', 'delete', 'details']}
|
||
className="gap-1 min-w-0 flex-1"
|
||
/>
|
||
)}
|
||
</div>
|
||
)
|
||
|
||
const fullSize = expanded || miniDesktop
|
||
const liveBottom = `env(safe-area-inset-bottom)`
|
||
const vjsBottom = `calc(${controlBarH}px + env(safe-area-inset-bottom))`
|
||
|
||
const overlayBottom = isRunning ? liveBottom : vjsBottom
|
||
const metaBottom = isRunning
|
||
? `calc(8px + env(safe-area-inset-bottom))`
|
||
: `calc(${controlBarH + 8}px + env(safe-area-inset-bottom))`
|
||
|
||
const topOverlayTop = miniDesktop ? 'top-4' : 'top-2'
|
||
const showSideInfo = expanded && isDesktop
|
||
|
||
const videoChrome = (
|
||
<div
|
||
className={cn(
|
||
'relative overflow-visible',
|
||
expanded ? 'flex-1 min-h-0' : miniDesktop ? 'flex-1 min-h-0' : 'aspect-video'
|
||
)}
|
||
onMouseEnter={() => {
|
||
if (!miniDesktop || !canHover) return
|
||
setChromeHover(true)
|
||
}}
|
||
onMouseLeave={() => {
|
||
if (!miniDesktop || !canHover) return
|
||
setChromeHover(false)
|
||
}}
|
||
>
|
||
<div className={cn('relative w-full h-full', miniDesktop && 'vjs-mini')}>
|
||
{isRunning ? (
|
||
<div className="absolute inset-0 bg-black">
|
||
<LiveHlsVideo src={liveHlsSrc} muted={startMuted} className="w-full h-full object-contain" />
|
||
|
||
<div className="absolute right-2 bottom-2 z-[60] pointer-events-none inline-flex items-center gap-1.5 rounded-full bg-red-600/90 px-2 py-1 text-[11px] font-semibold text-white shadow-sm">
|
||
<span className="inline-block size-1.5 rounded-full bg-white animate-pulse" />
|
||
Live
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div ref={containerRef} className="absolute inset-0" />
|
||
)}
|
||
|
||
{/* ✅ Top overlay */}
|
||
<div className={cn('absolute inset-x-2 z-30', topOverlayTop)}>
|
||
<div className="grid grid-cols-[minmax(0,1fr)_auto_auto] items-start gap-2">
|
||
<div className="min-w-0 pointer-events-auto overflow-visible">{showSideInfo ? null : footerRight}</div>
|
||
|
||
{miniDesktop ? (
|
||
<button
|
||
type="button"
|
||
aria-label="Player-Fenster verschieben"
|
||
title="Ziehen zum Verschieben"
|
||
onPointerDown={beginDrag}
|
||
onClick={(e) => {
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
}}
|
||
className={cn(
|
||
overlayBtn,
|
||
'px-3 gap-1 cursor-grab active:cursor-grabbing select-none',
|
||
dragUiActive ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none -translate-y-1',
|
||
isDragging && 'scale-[0.98] opacity-90'
|
||
)}
|
||
>
|
||
<span className="h-1 w-1 rounded-full bg-black/35 dark:bg-white/35" />
|
||
<span className="h-1 w-1 rounded-full bg-black/35 dark:bg-white/35" />
|
||
<span className="h-1 w-1 rounded-full bg-black/35 dark:bg-white/35" />
|
||
</button>
|
||
) : null}
|
||
|
||
<div className="shrink-0 flex items-center gap-1 pointer-events-auto">
|
||
<button
|
||
type="button"
|
||
className={overlayBtn}
|
||
onClick={onToggleExpand}
|
||
aria-label={expanded ? 'Minimieren' : 'Maximieren'}
|
||
title={expanded ? 'Minimieren' : 'Maximieren'}
|
||
>
|
||
{expanded ? <ArrowsPointingInIcon className="h-5 w-5" /> : <ArrowsPointingOutIcon className="h-5 w-5" />}
|
||
</button>
|
||
|
||
<button type="button" className={overlayBtn} onClick={onClose} aria-label="Schließen" title="Schließen">
|
||
<XMarkIcon className="h-5 w-5" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Bottom overlay: Gradient */}
|
||
<div
|
||
className={cn(
|
||
'player-ui pointer-events-none absolute inset-x-0 z-40',
|
||
'bg-gradient-to-t from-black/70 to-transparent',
|
||
'transition-all duration-200 ease-out',
|
||
expanded ? 'h-28' : 'h-24'
|
||
)}
|
||
style={{ bottom: overlayBottom }}
|
||
/>
|
||
|
||
<div
|
||
className={cn(
|
||
'player-ui pointer-events-none absolute inset-x-2 z-50',
|
||
'flex items-end justify-between gap-2',
|
||
'transition-all duration-200 ease-out'
|
||
)}
|
||
style={{ bottom: metaBottom }}
|
||
>
|
||
<div className="min-w-0">
|
||
<div className="truncate text-sm font-semibold text-white">{model}</div>
|
||
<div className="truncate text-[11px] text-white/80">
|
||
<span className="inline-flex items-center gap-1 min-w-0 align-middle">
|
||
<span className="truncate">{file || title}</span>
|
||
|
||
{isHot || isHotFile ? (
|
||
<span className="shrink-0 rounded bg-amber-500/25 px-1.5 py-0.5 font-semibold text-white">HOT</span>
|
||
) : null}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="shrink-0 flex items-center gap-1.5 text-[11px] text-white">
|
||
{resolutionLabel !== '—' ? (
|
||
<span className="rounded bg-black/40 px-1.5 py-0.5 font-medium">{resolutionLabel}</span>
|
||
) : null}
|
||
|
||
{!isRunning ? (
|
||
<span className="rounded bg-black/40 px-1.5 py-0.5 font-medium">{runtimeLabel}</span>
|
||
) : null}
|
||
|
||
{sizeLabel !== '—' ? <span className="rounded bg-black/40 px-1.5 py-0.5 font-medium">{sizeLabel}</span> : null}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
|
||
const sidePanel = (
|
||
<div className="w-[360px] shrink-0 border-r border-white/10 bg-black/40 text-white">
|
||
<div className="h-full p-4 flex flex-col gap-3 overflow-y-auto">
|
||
<div className="rounded-lg overflow-hidden ring-1 ring-white/10 bg-black/30">
|
||
<div className="relative aspect-video">
|
||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||
<img
|
||
src={previewSrc}
|
||
alt="Vorschau"
|
||
className="absolute inset-0 h-full w-full object-cover"
|
||
loading="lazy"
|
||
onError={() => {
|
||
if (previewSrc !== previewB) setPreviewSrc(previewB)
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-1">
|
||
<div className="text-lg font-semibold truncate">{model}</div>
|
||
<div className="text-xs text-white/70 break-all">{file || title}</div>
|
||
</div>
|
||
|
||
<div className="pointer-events-auto">
|
||
<div className="flex items-center justify-center gap-2 flex-wrap">
|
||
{isRunning ? (
|
||
<Button
|
||
variant="primary"
|
||
color="red"
|
||
size="sm"
|
||
rounded="md"
|
||
disabled={stopDisabled}
|
||
title={isStoppingLike || stopPending ? 'Stoppe…' : 'Stop'}
|
||
aria-label={isStoppingLike || stopPending ? 'Stoppe…' : 'Stop'}
|
||
onClick={async (e) => {
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
if (stopDisabled) return
|
||
try {
|
||
setStopPending(true)
|
||
await onStopJob?.(job.id)
|
||
} finally {
|
||
setStopPending(false)
|
||
}
|
||
}}
|
||
className="shadow-none"
|
||
>
|
||
{isStoppingLike || stopPending ? 'Stoppe…' : 'Stoppen'}
|
||
</Button>
|
||
) : null}
|
||
|
||
<RecordJobActions
|
||
job={job}
|
||
variant="table"
|
||
collapseToMenu={false}
|
||
busy={isStoppingLike || stopPending}
|
||
isHot={isHot || isHotFile}
|
||
isFavorite={isFavorite}
|
||
isLiked={isLiked}
|
||
isWatching={isWatching}
|
||
onToggleWatch={onToggleWatch ? (j) => onToggleWatch(j) : undefined}
|
||
onToggleFavorite={onToggleFavorite ? (j) => onToggleFavorite(j) : undefined}
|
||
onToggleLike={onToggleLike ? (j) => onToggleLike(j) : undefined}
|
||
onToggleHot={
|
||
onToggleHot
|
||
? async (j) => {
|
||
releaseMedia()
|
||
await new Promise((r) => setTimeout(r, 150))
|
||
await onToggleHot(j)
|
||
await new Promise((r) => setTimeout(r, 0))
|
||
const p = playerRef.current
|
||
if (p && !(p as any).isDisposed?.()) {
|
||
const ret = p.play?.()
|
||
if (ret && typeof (ret as any).catch === 'function') {
|
||
;(ret as Promise<void>).catch(() => {})
|
||
}
|
||
}
|
||
}
|
||
: undefined
|
||
}
|
||
onKeep={
|
||
onKeep
|
||
? async (j) => {
|
||
releaseMedia()
|
||
onClose()
|
||
await new Promise((r) => setTimeout(r, 150))
|
||
await onKeep(j)
|
||
}
|
||
: undefined
|
||
}
|
||
onDelete={
|
||
onDelete
|
||
? async (j) => {
|
||
releaseMedia()
|
||
onClose()
|
||
await new Promise((r) => setTimeout(r, 150))
|
||
await onDelete(j)
|
||
}
|
||
: undefined
|
||
}
|
||
order={isRunning ? ['watch', 'favorite', 'like', 'details'] : ['watch', 'favorite', 'like', 'hot', 'details', 'keep', 'delete']}
|
||
className="flex items-center justify-start gap-1"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-x-3 gap-y-2 text-sm">
|
||
<div className="text-white/60">Status</div>
|
||
<div className="font-medium">{job.status}</div>
|
||
|
||
<div className="text-white/60">Auflösung</div>
|
||
<div className="font-medium">{resolutionLabel}</div>
|
||
|
||
<div className="text-white/60">FPS</div>
|
||
<div className="font-medium">{fpsLabel}</div>
|
||
|
||
<div className="text-white/60">Laufzeit</div>
|
||
<div className="font-medium">{runtimeLabel}</div>
|
||
|
||
<div className="text-white/60">Größe</div>
|
||
<div className="font-medium">{sizeLabel}</div>
|
||
|
||
<div className="text-white/60">Datum</div>
|
||
<div className="font-medium">{dateLabel}</div>
|
||
|
||
<div className="col-span-2">
|
||
{tags.length ? (
|
||
<div className="flex flex-wrap gap-1.5">
|
||
{tags.map((t) => (
|
||
<span key={t} className="rounded bg-white/10 px-2 py-0.5 text-xs text-white/90">
|
||
{t}
|
||
</span>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<span className="text-white/50">—</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
|
||
const cardEl = (
|
||
<Card
|
||
edgeToEdgeMobile
|
||
noBodyPadding
|
||
className={cn(
|
||
'relative flex flex-col shadow-2xl ring-1 ring-black/10 dark:ring-white/10',
|
||
'w-full',
|
||
fullSize ? 'h-full' : 'h-[220px] max-h-[40vh]',
|
||
expanded ? 'rounded-2xl' : miniDesktop ? 'rounded-lg' : 'rounded-none'
|
||
)}
|
||
bodyClassName="flex flex-col flex-1 min-h-0 p-0"
|
||
>
|
||
<div className="flex flex-1 min-h-0">
|
||
{showSideInfo ? sidePanel : null}
|
||
{videoChrome}
|
||
</div>
|
||
</Card>
|
||
)
|
||
|
||
const { w: vw, h: vh, ox, oy, bottomInset } = getViewport()
|
||
|
||
const expandedRect = {
|
||
left: ox + 16,
|
||
top: oy + 16,
|
||
width: Math.max(0, vw - 32),
|
||
height: Math.max(0, vh - 32),
|
||
}
|
||
|
||
const wrapStyle = expanded
|
||
? expandedRect
|
||
: miniDesktop
|
||
? { left: win.x, top: win.y, width: win.w, height: win.h }
|
||
: undefined
|
||
|
||
return createPortal(
|
||
<>
|
||
<style>{`
|
||
/* Live-Download: Progress/Seek-Bar ausblenden */
|
||
.is-live-download .vjs-progress-control {
|
||
display: none !important;
|
||
}
|
||
`}</style>
|
||
|
||
{expanded || miniDesktop ? (
|
||
<div
|
||
className={cn(
|
||
'fixed z-[2147483647]',
|
||
!isResizing && !isDragging && 'transition-[left,top,width,height] duration-300 ease-[cubic-bezier(.2,.9,.2,1)]'
|
||
)}
|
||
style={{
|
||
...(wrapStyle as any),
|
||
willChange: isResizing ? 'left, top, width, height' : undefined,
|
||
}}
|
||
>
|
||
{cardEl}
|
||
|
||
{miniDesktop ? (
|
||
<div className="pointer-events-none absolute inset-0">
|
||
<div className="pointer-events-auto absolute -left-1 bottom-2 top-2 w-3 cursor-ew-resize" onPointerDown={beginResize('w')} />
|
||
<div className="pointer-events-auto absolute -right-1 bottom-2 top-2 w-3 cursor-ew-resize" onPointerDown={beginResize('e')} />
|
||
<div className="pointer-events-auto absolute left-2 right-2 -top-1 h-3 cursor-ns-resize" onPointerDown={beginResize('n')} />
|
||
<div className="pointer-events-auto absolute left-2 right-2 -bottom-1 h-3 cursor-ns-resize" onPointerDown={beginResize('s')} />
|
||
|
||
<div className="pointer-events-auto absolute -left-1 -top-1 h-4 w-4 cursor-nwse-resize" onPointerDown={beginResize('nw')} />
|
||
<div className="pointer-events-auto absolute -right-1 -top-1 h-4 w-4 cursor-nesw-resize" onPointerDown={beginResize('ne')} />
|
||
<div className="pointer-events-auto absolute -left-1 -bottom-1 h-4 w-4 cursor-nesw-resize" onPointerDown={beginResize('sw')} />
|
||
<div className="pointer-events-auto absolute -right-1 -bottom-1 h-4 w-4 cursor-nwse-resize" onPointerDown={beginResize('se')} />
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
) : (
|
||
<div
|
||
className="
|
||
fixed z-[2147483647] inset-x-0 w-full
|
||
shadow-2xl
|
||
md:bottom-4 md:left-1/2 md:right-auto md:inset-x-auto md:w-[min(760px,calc(100vw-32px))] md:-translate-x-1/2
|
||
"
|
||
style={{
|
||
bottom: `calc(${bottomInset}px + env(safe-area-inset-bottom))`,
|
||
}}
|
||
>
|
||
{cardEl}
|
||
</div>
|
||
)}
|
||
</>,
|
||
portalTarget
|
||
)
|
||
}
|