surfnathanrip/frontend/src/components/VideoPlayer.tsx

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 videoRef = useRef<HTMLVideoElement>(null);

    return (
        <div className="rounded-lg border border-white/5 overflow-hidden">
            <div className="aspect-video bg-black relative">
                {!loaded && (
                    <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"
                            />
                        ) : null}
                        <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>
                )}
                <video
                    ref={videoRef}
                    src={video.videoUrl}
                    controls
                    className="w-full h-full"
                    poster={video.thumbnailUrl}
                    onCanPlay={() => setLoaded(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>
    );
}