Initial commit

2026-06-03 00:44:48 +01:00
commit 3369f22f69
36 changed files with 3419 additions and 0 deletions
@@ -0,0 +1,69 @@
+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>
+    );
+}