CallMeVerity
6da2539c03
Previously videos were served via direct RustFS URLs, which meant: - No HTTP Range support (browsers had to download the entire file) - Large videos couldn't play at all - Video player rendered broken Now videos stream through GET /api/videos/:id/stream which: - Proxies video data from RustFS to the browser - Supports Range requests (HTTP 206 Partial Content) for seeking - Sets proper headers (Accept-Ranges, Content-Range, Content-Type) - Caches for 24 hours Frontend changes: - VideoPlayer: added playsInline, preload=metadata, object-contain, error state - VideoDetail: removed duplicate inline video, now uses VideoPlayer component - index.css: style WebKit video controls (dark panel, no border-radius)
107 lines
4.6 KiB
TypeScript
107 lines
4.6 KiB
TypeScript
import { useState, useRef } from "react";
|
|
import type { VideoDetail } from "../types/video";
|
|
import { formatRunTime } from "../api/client";
|
|
|
|
export default function VideoPlayer({ video }: { video: VideoDetail }) {
|
|
const [loaded, setLoaded] = useState(false);
|
|
const [error, setError] = useState(false);
|
|
const videoRef = useRef<HTMLVideoElement>(null);
|
|
|
|
return (
|
|
<div className="rounded-lg border border-white/5 overflow-hidden">
|
|
<div className="aspect-video bg-black relative">
|
|
{}
|
|
{!loaded && !error && (
|
|
<div className="absolute inset-0 flex items-center justify-center z-10">
|
|
{video.thumbnailUrl && (
|
|
<img
|
|
src={video.thumbnailUrl}
|
|
alt=""
|
|
className="absolute inset-0 w-full h-full object-cover blur-sm opacity-50"
|
|
/>
|
|
)}
|
|
<div className="relative z-20 flex flex-col items-center gap-2">
|
|
<div className="w-10 h-10 rounded-full border-2 border-white/20 border-t-white/80 animate-spin" />
|
|
<span className="text-xs text-white/40">
|
|
Loading video…
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{}
|
|
{error && (
|
|
<div className="absolute inset-0 flex items-center justify-center z-10">
|
|
{video.thumbnailUrl && (
|
|
<img
|
|
src={video.thumbnailUrl}
|
|
alt=""
|
|
className="absolute inset-0 w-full h-full object-cover opacity-30"
|
|
/>
|
|
)}
|
|
<div className="relative z-20 flex flex-col items-center gap-2">
|
|
<svg
|
|
className="w-12 h-12 text-red-400/60"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={1.5}
|
|
d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
<span className="text-xs text-white/40">
|
|
Failed to load video
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<video
|
|
ref={videoRef}
|
|
src={video.videoUrl}
|
|
controls
|
|
playsInline
|
|
preload="metadata"
|
|
className="w-full h-full object-contain"
|
|
poster={video.thumbnailUrl}
|
|
onCanPlay={() => setLoaded(true)}
|
|
onError={() => setError(true)}
|
|
>
|
|
Your browser does not support video playback.
|
|
</video>
|
|
</div>
|
|
|
|
<div className="px-4 py-3 flex items-center justify-between border-t border-white/5 bg-white/3">
|
|
<a
|
|
href={video.mtvUrl}
|
|
download
|
|
className="inline-flex items-center gap-2 rounded-md bg-white/4 border border-white/7 px-3 py-1.5 text-xs font-medium text-white/50 hover:bg-white/8 hover:text-white/80 hover:border-white/15 transition-colors no-underline"
|
|
>
|
|
<svg
|
|
className="w-3.5 h-3.5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
|
|
/>
|
|
</svg>
|
|
.mtv replay
|
|
</a>
|
|
|
|
<span className="font-mono text-sm text-white/80">
|
|
{formatRunTime(video.runTime)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|