1037 lines
30 KiB
TypeScript
1037 lines
30 KiB
TypeScript
// frontend\src\components\ui\DownloadsCardRow.tsx
|
|
|
|
'use client'
|
|
|
|
import { useMemo, useState, useRef, useEffect } from 'react'
|
|
import Button from './Button'
|
|
import ModelPreview from './ModelPreview'
|
|
import ModelGenderIcon from './ModelGenderIcon'
|
|
import ProgressBar from './ProgressBar'
|
|
import RecordJobActions from './RecordJobActions'
|
|
import type { RecordJob } from '../../types'
|
|
import LazyMountWhenVisible from './LazyMountWhenVisible'
|
|
import CountryFlag from './CountryFlag'
|
|
|
|
export type PendingWatchedRoom = WaitingModelRow & {
|
|
currentShow: string
|
|
}
|
|
|
|
type WaitingModelRow = {
|
|
id: string
|
|
modelKey: string
|
|
url: string
|
|
imageUrl?: string
|
|
currentShow?: string
|
|
}
|
|
|
|
export type DownloadRow =
|
|
| { kind: 'job'; job: RecordJob }
|
|
| { kind: 'pending'; pending: PendingWatchedRoom }
|
|
|
|
type ModelFlags = {
|
|
favorite?: boolean
|
|
liked?: boolean | null
|
|
watching?: boolean
|
|
roomStatus?: string
|
|
imageUrl?: string
|
|
gender?: string | null
|
|
country?: string | null
|
|
}
|
|
|
|
type Props = {
|
|
r: DownloadRow
|
|
nowMs: number
|
|
blurPreviews?: boolean
|
|
modelsByKey: Record<string, ModelFlags>
|
|
roomStatusByModelKey: Record<string, string>
|
|
stopRequestedIds: Record<string, true>
|
|
growingByJobId: Record<string, boolean>
|
|
postworkInfoOf: (job: RecordJob) => { pos?: number; total?: number } | undefined
|
|
markStopRequested: (ids: string | string[]) => void
|
|
onOpenPlayer: (job: RecordJob) => void
|
|
onStopJob: (id: string) => void | Promise<void>
|
|
onRemoveQueuedPostworkJob?: (id: string) => void | Promise<void>
|
|
onToggleFavorite?: (job: RecordJob) => void | Promise<void>
|
|
onToggleLike?: (job: RecordJob) => void | Promise<void>
|
|
onToggleWatch?: (job: RecordJob) => void | Promise<void>
|
|
}
|
|
|
|
const pendingModelName = (p: PendingWatchedRoom) => {
|
|
const anyP = p as any
|
|
return (
|
|
anyP.modelName ??
|
|
anyP.model ??
|
|
anyP.modelKey ??
|
|
anyP.username ??
|
|
anyP.name ??
|
|
'—'
|
|
)
|
|
}
|
|
|
|
const pendingUrl = (p: PendingWatchedRoom) => {
|
|
const anyP = p as any
|
|
return anyP.sourceUrl ?? anyP.url ?? anyP.roomUrl ?? ''
|
|
}
|
|
|
|
const pendingImageUrl = (p: PendingWatchedRoom) => {
|
|
const anyP = p as any
|
|
return String(anyP.imageUrl ?? anyP.image_url ?? '').trim()
|
|
}
|
|
|
|
const normalizeRoomStatus = (v: unknown): string => {
|
|
const s = String(v ?? '').trim().toLowerCase()
|
|
|
|
switch (s) {
|
|
case 'public':
|
|
return 'Public'
|
|
case 'private':
|
|
return 'Private'
|
|
case 'hidden':
|
|
return 'Hidden'
|
|
case 'away':
|
|
return 'Away'
|
|
case 'offline':
|
|
return 'Offline'
|
|
default:
|
|
return 'Unknown'
|
|
}
|
|
}
|
|
|
|
const baseName = (p: string) =>
|
|
(p || '').replaceAll('\\', '/').trim().split('/').pop() || ''
|
|
|
|
const modelNameFromOutput = (output?: string) => {
|
|
const file = baseName(output || '')
|
|
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 modelKeyFromJob = (job: RecordJob): string => {
|
|
const j = job as any
|
|
|
|
const rawUrl = String(j.sourceUrl ?? '').trim()
|
|
if (rawUrl) {
|
|
const m = rawUrl.match(/chaturbate\.com\/([^/?#]+)/i)
|
|
if (m?.[1]) {
|
|
try {
|
|
return decodeURIComponent(m[1]).trim().toLowerCase()
|
|
} catch {
|
|
return String(m[1]).trim().toLowerCase()
|
|
}
|
|
}
|
|
}
|
|
|
|
return String(modelNameFromOutput(j.output || '')).trim().toLowerCase()
|
|
}
|
|
|
|
const previewInitialSrcOfJob = (
|
|
job: RecordJob,
|
|
modelsByKey?: Record<string, { imageUrl?: string }>
|
|
): string => {
|
|
return onlineImageUrlOfJob(job, modelsByKey)
|
|
}
|
|
|
|
const onlineImageUrlOfJob = (
|
|
job: RecordJob,
|
|
modelsByKey?: Record<string, { imageUrl?: string }>
|
|
): string => {
|
|
const anyJ = job as any
|
|
|
|
const direct =
|
|
String(
|
|
anyJ?.modelImageUrl ??
|
|
anyJ?.avatar ??
|
|
anyJ?.previewImageUrl ??
|
|
anyJ?.imageUrl ??
|
|
anyJ?.model?.imageUrl ??
|
|
''
|
|
).trim()
|
|
|
|
if (direct) return direct
|
|
|
|
const modelKey = modelKeyFromJob(job)
|
|
if (!modelKey) return ''
|
|
|
|
return String(modelsByKey?.[modelKey]?.imageUrl ?? '').trim()
|
|
}
|
|
|
|
const roomStatusOfJob = (
|
|
job: RecordJob,
|
|
roomStatusByModelKey?: Record<string, string>,
|
|
modelsByKey?: Record<string, { roomStatus?: string }>
|
|
): string => {
|
|
const j = job as any
|
|
|
|
const rawFromJob =
|
|
j.currentShow ??
|
|
j.roomStatus ??
|
|
j.modelStatus ??
|
|
j.show ??
|
|
j.statusText ??
|
|
j.model?.currentShow ??
|
|
j.model?.roomStatus ??
|
|
j.model?.status ??
|
|
j.room?.currentShow ??
|
|
j.room?.status
|
|
|
|
if (rawFromJob != null && String(rawFromJob).trim() !== '') {
|
|
return normalizeRoomStatus(rawFromJob)
|
|
}
|
|
|
|
const modelKey = modelKeyFromJob(job)
|
|
|
|
if (modelKey && roomStatusByModelKey?.[modelKey]) {
|
|
return normalizeRoomStatus(roomStatusByModelKey[modelKey])
|
|
}
|
|
|
|
if (modelKey && modelsByKey?.[modelKey]?.roomStatus) {
|
|
return normalizeRoomStatus(modelsByKey[modelKey].roomStatus)
|
|
}
|
|
|
|
return 'Unknown'
|
|
}
|
|
|
|
function effectiveRoomStatusOfJob(
|
|
job: RecordJob,
|
|
roomStatusByModelKey?: Record<string, string>,
|
|
modelsByKey?: Record<string, { roomStatus?: string }>,
|
|
growingByJobId?: Record<string, boolean>
|
|
): string {
|
|
const raw = roomStatusOfJob(job, roomStatusByModelKey, modelsByKey)
|
|
if (raw !== 'Unknown') return raw
|
|
|
|
const anyJ = job as any
|
|
const phaseLower = String(anyJ?.phase ?? '').trim().toLowerCase()
|
|
const statusLower = String(job.status ?? '').trim().toLowerCase()
|
|
|
|
const isActiveRecording =
|
|
!job.endedAt &&
|
|
statusLower === 'running' &&
|
|
(phaseLower === '' || phaseLower === 'recording')
|
|
|
|
if (isActiveRecording && growingByJobId?.[job.id]) {
|
|
return 'Public'
|
|
}
|
|
|
|
return raw
|
|
}
|
|
|
|
function previewRoomStatusOfJob(
|
|
job: RecordJob,
|
|
roomStatusByModelKey?: Record<string, string>,
|
|
modelsByKey?: Record<string, { roomStatus?: string }>,
|
|
growingByJobId?: Record<string, boolean>
|
|
): string {
|
|
const postworkState = getEffectivePostworkState(job)
|
|
|
|
if (postworkState === 'running' || postworkState === 'queued') {
|
|
return 'Public'
|
|
}
|
|
|
|
return effectiveRoomStatusOfJob(job, roomStatusByModelKey, modelsByKey, growingByJobId)
|
|
}
|
|
|
|
const roomStatusTone = (status: string): string => {
|
|
switch (status) {
|
|
case 'Public':
|
|
return 'bg-emerald-500/15 text-emerald-900 ring-emerald-500/30 dark:bg-emerald-400/10 dark:text-emerald-200 dark:ring-emerald-400/25'
|
|
case 'Private':
|
|
return 'bg-fuchsia-500/15 text-fuchsia-900 ring-fuchsia-500/30 dark:bg-fuchsia-400/10 dark:text-fuchsia-200 dark:ring-fuchsia-400/25'
|
|
case 'Hidden':
|
|
return 'bg-slate-500/15 text-slate-900 ring-slate-500/30 dark:bg-slate-400/10 dark:text-slate-200 dark:ring-slate-400/25'
|
|
case 'Away':
|
|
return 'bg-amber-500/15 text-amber-900 ring-amber-500/30 dark:bg-amber-400/10 dark:text-amber-200 dark:ring-amber-400/25'
|
|
case 'Offline':
|
|
return 'bg-gray-900/5 text-gray-800 ring-gray-900/10 dark:bg-white/10 dark:text-gray-200 dark:ring-white/10'
|
|
case 'Unknown':
|
|
default:
|
|
return 'bg-gray-900/5 text-gray-800 ring-gray-900/10 dark:bg-white/10 dark:text-gray-200 dark:ring-white/10'
|
|
}
|
|
}
|
|
|
|
const toMs = (v: unknown): number => {
|
|
if (typeof v === 'number' && Number.isFinite(v)) {
|
|
return v < 1_000_000_000_000 ? v * 1000 : v
|
|
}
|
|
if (typeof v === 'string') {
|
|
const ms = Date.parse(v)
|
|
return Number.isFinite(ms) ? ms : 0
|
|
}
|
|
if (v instanceof Date) return v.getTime()
|
|
return 0
|
|
}
|
|
|
|
const formatDuration = (ms: number): string => {
|
|
if (!Number.isFinite(ms) || ms <= 0) return '—'
|
|
const total = Math.floor(ms / 1000)
|
|
const h = Math.floor(total / 3600)
|
|
const m = Math.floor((total % 3600) / 60)
|
|
const s = total % 60
|
|
if (h > 0) return `${h}h ${m}m`
|
|
if (m > 0) return `${m}m ${s}s`
|
|
return `${s}s`
|
|
}
|
|
|
|
const runtimeOf = (j: RecordJob, nowMs: number) => {
|
|
const anyJ = j as any
|
|
|
|
const start =
|
|
toMs(anyJ.startedAtMs) ||
|
|
toMs(j.startedAt)
|
|
|
|
if (!Number.isFinite(start) || start <= 0) return '—'
|
|
|
|
const end =
|
|
j.endedAt
|
|
? (toMs(anyJ.endedAtMs) || toMs(j.endedAt))
|
|
: nowMs
|
|
|
|
if (!Number.isFinite(end) || end <= 0) return '—'
|
|
|
|
return formatDuration(end - start)
|
|
}
|
|
|
|
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
|
|
}
|
|
|
|
const formatBytes = (bytes: number | null): string => {
|
|
if (!bytes || !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 >= 10 ? 1 : 2
|
|
const s = v.toFixed(digits).replace(/\.0+$/, '')
|
|
return `${s} ${units[i]}`
|
|
}
|
|
|
|
const phaseLabel = (p?: string) => {
|
|
switch ((p ?? '').toLowerCase()) {
|
|
case 'stopping':
|
|
return 'Stoppe Aufnahme…'
|
|
case 'probe':
|
|
return 'Analysiere Datei (Dauer/Streams)…'
|
|
case 'remuxing':
|
|
return 'Konvertiere Container zu MP4…'
|
|
case 'moving':
|
|
return 'Verschiebe nach Done…'
|
|
case 'assets':
|
|
return 'Erstelle Vorschau/Thumbnails…'
|
|
case 'analyze':
|
|
return 'AI analysiert Segmente…'
|
|
case 'postwork':
|
|
return 'Nacharbeiten laufen…'
|
|
default:
|
|
return ''
|
|
}
|
|
}
|
|
|
|
const STOP_RETRY_AFTER_MS = 15_000
|
|
|
|
const stopRequestedAtMsOf = (job: RecordJob): number => {
|
|
return toMs((job as any)?.stopRequestedAtMs)
|
|
}
|
|
|
|
const isFreshStoppingPhase = (job: RecordJob, nowMs: number): boolean => {
|
|
const phase = String((job as any)?.phase ?? '').trim().toLowerCase()
|
|
if (phase !== 'stopping') return false
|
|
|
|
const startedAt = stopRequestedAtMsOf(job)
|
|
return startedAt > 0 && Math.max(0, nowMs - startedAt) < STOP_RETRY_AFTER_MS
|
|
}
|
|
|
|
const canRetryStoppingJob = (job: RecordJob, nowMs: number): boolean => {
|
|
const phase = String((job as any)?.phase ?? '').trim().toLowerCase()
|
|
const status = String((job as any)?.status ?? '').trim().toLowerCase()
|
|
return phase === 'stopping' && status === 'running' && !isFreshStoppingPhase(job, nowMs)
|
|
}
|
|
|
|
const isStopWaitingForJob = (
|
|
job: RecordJob,
|
|
localStopRequested: boolean,
|
|
nowMs: number
|
|
): boolean => {
|
|
return localStopRequested || isFreshStoppingPhase(job, nowMs)
|
|
}
|
|
|
|
const isStoppingForUi = (
|
|
job: RecordJob,
|
|
localStopRequested: boolean,
|
|
nowMs: number
|
|
): boolean => {
|
|
const phase = String((job as any)?.phase ?? '').trim().toLowerCase()
|
|
const status = String((job as any)?.status ?? '').trim().toLowerCase()
|
|
const isBusyPhase = phase !== '' && phase !== 'recording' && phase !== 'stopping'
|
|
return isBusyPhase || status !== 'running' || isStopWaitingForJob(job, localStopRequested, nowMs)
|
|
}
|
|
|
|
const isTerminalStatus = (status?: unknown) => {
|
|
const s = String(status ?? '').trim().toLowerCase()
|
|
return (
|
|
s === 'stopped' ||
|
|
s === 'finished' ||
|
|
s === 'failed' ||
|
|
s === 'done' ||
|
|
s === 'completed' ||
|
|
s === 'canceled' ||
|
|
s === 'cancelled'
|
|
)
|
|
}
|
|
|
|
const isPostworkJob = (job: RecordJob): boolean => {
|
|
const anyJ = job as any
|
|
const phase = String(anyJ.phase ?? '').trim()
|
|
const pw = anyJ.postWork
|
|
const pwKey = String(anyJ.postWorkKey ?? '').trim()
|
|
|
|
if (pwKey) return true
|
|
if (pw && (pw.state === 'queued' || pw.state === 'running')) return true
|
|
if (job.endedAt && phase) return true
|
|
if (phase === 'postwork') return true
|
|
|
|
return false
|
|
}
|
|
|
|
const getEffectivePostworkState = (job: RecordJob): 'running' | 'queued' | 'none' => {
|
|
const anyJ = job as any
|
|
const phase = String(anyJ.phase ?? '').trim().toLowerCase()
|
|
const pw = anyJ.postWork
|
|
const pwState = String(pw?.state ?? '').trim().toLowerCase()
|
|
const hasPwKey = String(anyJ.postWorkKey ?? '').trim() !== ''
|
|
|
|
if (!isPostworkJob(job)) return 'none'
|
|
if (isTerminalStatus(anyJ?.status)) return 'none'
|
|
|
|
if (pwState === 'queued') return 'queued'
|
|
if (pwState === 'running') return 'running'
|
|
|
|
if (
|
|
phase === 'postwork' ||
|
|
phase === 'probe' ||
|
|
phase === 'remuxing' ||
|
|
phase === 'moving' ||
|
|
phase === 'assets'
|
|
) {
|
|
return 'running'
|
|
}
|
|
|
|
if (
|
|
typeof pw?.position === 'number' &&
|
|
Number.isFinite(pw.position) &&
|
|
pw.position > 0
|
|
) {
|
|
return 'queued'
|
|
}
|
|
|
|
if (
|
|
typeof pw?.running === 'number' &&
|
|
Number.isFinite(pw.running) &&
|
|
pw.running > 0 &&
|
|
(!Number.isFinite(pw?.position) || pw.position <= 0)
|
|
) {
|
|
return 'running'
|
|
}
|
|
|
|
if (hasPwKey) {
|
|
return 'queued'
|
|
}
|
|
|
|
if (anyJ.endedAt || job.endedAt) return 'queued'
|
|
|
|
return 'none'
|
|
}
|
|
|
|
function postWorkLabel(
|
|
job: RecordJob,
|
|
override?: { pos?: number; total?: number }
|
|
): string {
|
|
const anyJ = job as any
|
|
const pw = anyJ.postWork
|
|
|
|
const effectiveState = getEffectivePostworkState(job)
|
|
|
|
if (effectiveState === 'running') {
|
|
const running = typeof pw?.running === 'number' && pw.running > 0 ? pw.running : 1
|
|
const maxP = typeof pw?.maxParallel === 'number' ? pw.maxParallel : 0
|
|
|
|
return maxP > 0
|
|
? `Nacharbeiten laufen… (${running}/${maxP} parallel)`
|
|
: 'Nacharbeiten laufen…'
|
|
}
|
|
|
|
if (effectiveState === 'queued') {
|
|
const posServer = typeof pw?.position === 'number' ? pw.position : 0
|
|
const waitingServer = typeof pw?.waiting === 'number' ? pw.waiting : 0
|
|
const totalServer = Math.max(waitingServer, posServer)
|
|
|
|
const pos =
|
|
typeof override?.pos === 'number' && Number.isFinite(override.pos) && override.pos > 0
|
|
? override.pos
|
|
: posServer
|
|
|
|
const total =
|
|
typeof override?.total === 'number' && Number.isFinite(override.total) && override.total > 0
|
|
? override.total
|
|
: totalServer
|
|
|
|
return pos > 0 && total > 0
|
|
? `Warte auf Nacharbeiten… ${pos} / ${total}`
|
|
: 'Warte auf Nacharbeiten…'
|
|
}
|
|
|
|
return 'Warte auf Nacharbeiten…'
|
|
}
|
|
|
|
export function PendingPreviewImage({
|
|
src,
|
|
alt,
|
|
blur,
|
|
className,
|
|
}: {
|
|
src: string
|
|
alt: string
|
|
blur?: boolean
|
|
className?: string
|
|
}) {
|
|
const rootRef = useRef<HTMLDivElement | null>(null)
|
|
const [inView, setInView] = useState(false)
|
|
const [nonce, setNonce] = useState(0)
|
|
const [imgError, setImgError] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const el = rootRef.current
|
|
if (!el) return
|
|
|
|
const obs = new IntersectionObserver(
|
|
(entries) => {
|
|
const entry = entries[0]
|
|
setInView(Boolean(entry?.isIntersecting || entry?.intersectionRatio > 0))
|
|
},
|
|
{ root: null, threshold: 0.01 }
|
|
)
|
|
|
|
obs.observe(el)
|
|
return () => obs.disconnect()
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (!inView) return
|
|
|
|
const id = window.setInterval(() => {
|
|
setNonce((n) => n + 1)
|
|
}, 20000)
|
|
|
|
return () => window.clearInterval(id)
|
|
}, [inView, src])
|
|
|
|
useEffect(() => {
|
|
setImgError(false)
|
|
}, [src])
|
|
|
|
const finalSrc = useMemo(() => {
|
|
if (!inView) return ''
|
|
|
|
const s = String(src ?? '').trim()
|
|
if (!s) return ''
|
|
|
|
return s.includes('?') ? `${s}&v=${nonce}` : `${s}?v=${nonce}`
|
|
}, [src, nonce, inView])
|
|
|
|
return (
|
|
<div
|
|
ref={rootRef}
|
|
className={className}
|
|
>
|
|
{inView && !imgError && finalSrc ? (
|
|
<img
|
|
src={finalSrc}
|
|
alt={alt}
|
|
className={[
|
|
'block h-full w-full object-cover',
|
|
blur ? 'blur-md' : '',
|
|
].join(' ')}
|
|
loading="lazy"
|
|
decoding="async"
|
|
referrerPolicy="no-referrer"
|
|
onError={() => setImgError(true)}
|
|
/>
|
|
) : (
|
|
<div
|
|
className={[
|
|
'grid h-full w-full place-items-center bg-gray-100 text-sm text-gray-500 dark:bg-white/10 dark:text-gray-300',
|
|
blur ? 'blur-md' : '',
|
|
].join(' ')}
|
|
>
|
|
⏳
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function DownloadsCardRow({
|
|
r,
|
|
nowMs,
|
|
blurPreviews,
|
|
modelsByKey,
|
|
roomStatusByModelKey,
|
|
stopRequestedIds,
|
|
growingByJobId,
|
|
postworkInfoOf,
|
|
markStopRequested,
|
|
onOpenPlayer,
|
|
onStopJob,
|
|
onRemoveQueuedPostworkJob,
|
|
onToggleFavorite,
|
|
onToggleLike,
|
|
onToggleWatch,
|
|
}: Props) {
|
|
if (r.kind === 'pending') {
|
|
const p = r.pending
|
|
const name = pendingModelName(p)
|
|
const url = pendingUrl(p)
|
|
const show = normalizeRoomStatus(p.currentShow)
|
|
|
|
const pendingKey = String(p.modelKey ?? name).trim().toLowerCase()
|
|
const pendingFlags = pendingKey ? modelsByKey[pendingKey] : undefined
|
|
|
|
const img =
|
|
pendingImageUrl(p) ||
|
|
String(pendingFlags?.imageUrl ?? '').trim()
|
|
|
|
const pendingActionJob = {
|
|
id: `pending:${pendingKey || name}`,
|
|
output: `${name}_pending.mp4`,
|
|
sourceUrl: url,
|
|
status: 'pending',
|
|
endedAt: null,
|
|
} as unknown as RecordJob
|
|
|
|
const isFav = Boolean(pendingFlags?.favorite)
|
|
const isLiked = pendingFlags?.liked === true
|
|
const isWatching = Boolean(pendingFlags?.watching)
|
|
|
|
return (
|
|
<div
|
|
className="
|
|
group relative isolate overflow-hidden rounded-2xl
|
|
border border-gray-200/90 bg-white shadow-sm
|
|
ring-1 ring-black/5
|
|
transition-all hover:-translate-y-0.5 hover:shadow-md active:translate-y-0
|
|
dark:border-white/10 dark:bg-gray-950
|
|
"
|
|
>
|
|
<div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-gray-50/90 via-white to-gray-50/70 dark:from-white/10 dark:via-transparent dark:to-white/5" />
|
|
<div className="pointer-events-none absolute -inset-10 opacity-0 blur-2xl transition-opacity duration-300 group-hover:opacity-100 bg-white/25 dark:bg-white/5" />
|
|
|
|
<div className="relative p-3">
|
|
<div className="flex items-start gap-3">
|
|
<div
|
|
className="
|
|
relative shrink-0 overflow-hidden rounded-lg
|
|
w-[112px] h-[64px]
|
|
bg-gray-100 ring-1 ring-black/5
|
|
dark:bg-white/10 dark:ring-white/10
|
|
"
|
|
>
|
|
{img ? (
|
|
<PendingPreviewImage
|
|
src={img}
|
|
alt={name}
|
|
blur={blurPreviews}
|
|
className="h-full w-full"
|
|
/>
|
|
) : (
|
|
<div className="grid h-full w-full place-items-center text-sm text-gray-500 dark:text-gray-300">
|
|
⏳
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex min-w-0 items-center gap-1.5">
|
|
<div
|
|
className="min-w-0 truncate text-base font-semibold text-gray-900 dark:text-white"
|
|
title={name}
|
|
>
|
|
{name}
|
|
</div>
|
|
|
|
<ModelGenderIcon
|
|
gender={pendingFlags?.gender}
|
|
className="shrink-0"
|
|
/>
|
|
|
|
<CountryFlag
|
|
country={pendingFlags?.country}
|
|
size="sm"
|
|
className="shrink-0"
|
|
/>
|
|
</div>
|
|
|
|
<div className="mt-0.5 truncate text-xs text-gray-600 dark:text-gray-300">
|
|
Warte auf Online-Status…
|
|
</div>
|
|
</div>
|
|
|
|
<div className="shrink-0 flex items-start">
|
|
<span
|
|
className={[
|
|
'inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold ring-1',
|
|
roomStatusTone(show),
|
|
].join(' ')}
|
|
title={show}
|
|
>
|
|
{show}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{url ? (
|
|
<a
|
|
href={url}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="mt-1 block truncate text-xs text-indigo-600 hover:underline dark:text-indigo-400"
|
|
onClick={(e) => e.stopPropagation()}
|
|
title={url}
|
|
>
|
|
{url}
|
|
</a>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-3 flex items-center gap-3 border-t border-white/30 pt-3 dark:border-white/10">
|
|
<div
|
|
className="flex items-center gap-1"
|
|
onClick={(e) => e.stopPropagation()}
|
|
onMouseDown={(e) => e.stopPropagation()}
|
|
>
|
|
<RecordJobActions
|
|
job={pendingActionJob}
|
|
variant="table"
|
|
busy={false}
|
|
isFavorite={isFav}
|
|
isLiked={isLiked}
|
|
isWatching={isWatching}
|
|
onToggleFavorite={onToggleFavorite}
|
|
onToggleLike={onToggleLike}
|
|
onToggleWatch={onToggleWatch}
|
|
order={['watch', 'favorite', 'like', 'details']}
|
|
className="flex items-center gap-1"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
className="ml-auto flex items-center justify-end gap-2"
|
|
onClick={(e) => e.stopPropagation()}
|
|
onMouseDown={(e) => e.stopPropagation()}
|
|
>
|
|
<span className="rounded-full bg-gray-900/5 px-2 py-0.5 text-[11px] font-medium text-gray-900 dark:bg-white/10 dark:text-gray-200 whitespace-nowrap">
|
|
Wartend
|
|
</span>
|
|
|
|
<div className="hidden sm:block">
|
|
<Button
|
|
size="sm"
|
|
variant="primary"
|
|
color="red"
|
|
className="shrink-0"
|
|
disabled
|
|
>
|
|
Wartend
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const j = r.job
|
|
const name = modelNameFromOutput(j.output)
|
|
const file = baseName(j.output || '')
|
|
|
|
const phase = String((j as any).phase ?? '').trim()
|
|
const phaseLower = phase.toLowerCase()
|
|
const isRecording = phaseLower === 'recording'
|
|
|
|
const isStopRequested = Boolean(stopRequestedIds[j.id])
|
|
|
|
const postworkState = getEffectivePostworkState(j)
|
|
const isQueuedPostwork = postworkState === 'queued'
|
|
|
|
const canRetryStop = canRetryStoppingJob(j, nowMs) && !isStopRequested
|
|
const isStopping = isStoppingForUi(j, isStopRequested, nowMs)
|
|
|
|
const showRemoveQueuedButton = isQueuedPostwork
|
|
const disableStopButton = showRemoveQueuedButton ? false : isStopping
|
|
const actionsBusy = showRemoveQueuedButton ? false : isStopping
|
|
|
|
const roomStatus = effectiveRoomStatusOfJob(
|
|
j,
|
|
roomStatusByModelKey,
|
|
modelsByKey,
|
|
growingByJobId
|
|
)
|
|
|
|
let phaseText = ''
|
|
|
|
if (phaseLower === 'recording') {
|
|
phaseText = 'Recording läuft…'
|
|
} else if (isPostworkJob(j)) {
|
|
const pwState = getEffectivePostworkState(j)
|
|
|
|
if (phaseLower === 'probe' || phaseLower === 'remuxing' || phaseLower === 'moving' || phaseLower === 'assets') {
|
|
phaseText = phaseLabel(phase) || phase
|
|
} else if (pwState === 'queued') {
|
|
phaseText = postWorkLabel(j, postworkInfoOf(j))
|
|
} else if (pwState === 'running') {
|
|
phaseText = phaseLabel(phase) || postWorkLabel(j, postworkInfoOf(j))
|
|
}
|
|
} else {
|
|
if (phaseLower === 'stopping' && canRetryStop) {
|
|
phaseText = 'Stop dauert zu lange - erneut stoppen'
|
|
} else {
|
|
phaseText = phase ? (phaseLabel(phase) || phase) : ''
|
|
}
|
|
}
|
|
|
|
const progressLabel = phaseText || roomStatus
|
|
|
|
const progress = Number((j as any).progress ?? 0)
|
|
const showBar =
|
|
!isRecording &&
|
|
Number.isFinite(progress) &&
|
|
progress > 0 &&
|
|
progress < 100
|
|
|
|
const showIndeterminate =
|
|
!isRecording &&
|
|
!showBar &&
|
|
Boolean(phase) &&
|
|
(!Number.isFinite(progress) || progress <= 0 || progress >= 100)
|
|
|
|
const modelKey = modelKeyFromJob(j)
|
|
const flags = modelKey ? modelsByKey[modelKey] : undefined
|
|
const isFav = Boolean(flags?.favorite)
|
|
const isLiked = flags?.liked === true
|
|
const isWatching = Boolean(flags?.watching)
|
|
const directPreviewSrc = previewInitialSrcOfJob(j, modelsByKey)
|
|
|
|
return (
|
|
<div
|
|
className="
|
|
group relative isolate overflow-hidden rounded-2xl
|
|
border border-gray-200/90 bg-white shadow-sm
|
|
ring-1 ring-black/5
|
|
transition-all hover:-translate-y-0.5 hover:shadow-md active:translate-y-0
|
|
dark:border-white/10 dark:bg-gray-950
|
|
"
|
|
onClick={() => onOpenPlayer(j)}
|
|
role="button"
|
|
tabIndex={0}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') onOpenPlayer(j)
|
|
}}
|
|
>
|
|
<div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-gray-50/90 via-white to-gray-50/70 dark:from-white/10 dark:via-transparent dark:to-white/5" />
|
|
<div className="pointer-events-none absolute -inset-10 opacity-0 blur-2xl transition-opacity duration-300 group-hover:opacity-100 bg-white/25 dark:bg-white/5" />
|
|
|
|
<div className="relative p-3">
|
|
<div className="flex items-start gap-3">
|
|
<div
|
|
className="
|
|
relative
|
|
shrink-0 overflow-hidden rounded-lg
|
|
w-[112px] h-[64px]
|
|
bg-gray-100 ring-1 ring-black/5
|
|
dark:bg-white/10 dark:ring-white/10
|
|
"
|
|
>
|
|
<LazyMountWhenVisible
|
|
className="w-full h-full"
|
|
placeholder={<div className="h-full w-full bg-gray-100 dark:bg-white/10" />}
|
|
>
|
|
<ModelPreview
|
|
jobId={j.id}
|
|
initialSrc={directPreviewSrc || undefined}
|
|
enableHoverLive={false}
|
|
blur={blurPreviews}
|
|
roomStatus={previewRoomStatusOfJob(
|
|
j,
|
|
roomStatusByModelKey,
|
|
modelsByKey,
|
|
growingByJobId
|
|
)}
|
|
fallbackSrc={`/api/preview?id=${encodeURIComponent(j.id)}&fallbackOnly=1`}
|
|
className="w-full h-full"
|
|
/>
|
|
</LazyMountWhenVisible>
|
|
</div>
|
|
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex min-w-0 items-center gap-1.5">
|
|
<div
|
|
className="min-w-0 truncate text-base font-semibold text-gray-900 dark:text-white"
|
|
title={name}
|
|
>
|
|
{name}
|
|
</div>
|
|
|
|
<ModelGenderIcon
|
|
gender={flags?.gender}
|
|
className="shrink-0"
|
|
/>
|
|
|
|
<CountryFlag
|
|
country={flags?.country}
|
|
size="sm"
|
|
className="shrink-0"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
className="mt-0.5 truncate text-xs text-gray-600 dark:text-gray-300"
|
|
title={j.output}
|
|
>
|
|
{file || '—'}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="shrink-0 flex items-start">
|
|
<span
|
|
className={[
|
|
'inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold ring-1',
|
|
roomStatusTone(roomStatus),
|
|
].join(' ')}
|
|
title={roomStatus}
|
|
>
|
|
{roomStatus}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{j.sourceUrl ? (
|
|
<a
|
|
href={j.sourceUrl}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="mt-1 block truncate text-xs text-indigo-600 hover:underline dark:text-indigo-400"
|
|
onClick={(e) => e.stopPropagation()}
|
|
title={j.sourceUrl}
|
|
>
|
|
{j.sourceUrl}
|
|
</a>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
|
|
{(showBar || showIndeterminate) ? (
|
|
<div className="mt-3">
|
|
{showBar ? (
|
|
<ProgressBar
|
|
label={progressLabel}
|
|
value={Math.max(0, Math.min(100, progress))}
|
|
showPercent
|
|
size="sm"
|
|
className="w-full"
|
|
/>
|
|
) : (
|
|
<ProgressBar
|
|
label={progressLabel}
|
|
indeterminate
|
|
size="sm"
|
|
className="w-full"
|
|
/>
|
|
)}
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="mt-3 flex items-center gap-3 border-t border-white/30 pt-3 dark:border-white/10">
|
|
<div
|
|
className="flex items-center gap-1"
|
|
onClick={(e) => e.stopPropagation()}
|
|
onMouseDown={(e) => e.stopPropagation()}
|
|
>
|
|
<RecordJobActions
|
|
job={j}
|
|
variant="table"
|
|
busy={actionsBusy}
|
|
isFavorite={isFav}
|
|
isLiked={isLiked}
|
|
isWatching={isWatching}
|
|
onToggleFavorite={onToggleFavorite}
|
|
onToggleLike={onToggleLike}
|
|
onToggleWatch={onToggleWatch}
|
|
order={['watch', 'favorite', 'like', 'details']}
|
|
className="flex items-center gap-1"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
className="ml-auto flex min-w-0 self-center items-center justify-end gap-2"
|
|
onClick={(e) => e.stopPropagation()}
|
|
onMouseDown={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="flex items-center justify-end gap-2 text-right">
|
|
<span className="rounded-full bg-gray-900/5 px-2 py-0.5 text-[11px] font-medium text-gray-900 dark:bg-white/10 dark:text-gray-200 whitespace-nowrap">
|
|
{runtimeOf(j, nowMs)}
|
|
</span>
|
|
<span className="rounded-full bg-gray-900/5 px-2 py-0.5 text-[11px] font-medium text-gray-900 dark:bg-white/10 dark:text-gray-200 whitespace-nowrap">
|
|
{formatBytes(sizeBytesOf(j))}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="hidden sm:block">
|
|
<Button
|
|
size="sm"
|
|
variant="primary"
|
|
color={isQueuedPostwork ? 'red' : 'indigo'}
|
|
disabled={disableStopButton}
|
|
className="shrink-0"
|
|
onClick={async (e) => {
|
|
e.stopPropagation()
|
|
|
|
if (showRemoveQueuedButton) {
|
|
await onRemoveQueuedPostworkJob?.(j.id)
|
|
return
|
|
}
|
|
|
|
if (isStopping) return
|
|
markStopRequested(j.id)
|
|
await onStopJob(j.id)
|
|
}}
|
|
>
|
|
{showRemoveQueuedButton
|
|
? 'Entfernen'
|
|
: canRetryStop
|
|
? 'Stop erneut'
|
|
: (isStopping ? 'Stoppe…' : 'Stop')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|