Nathan/surfnathanrip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix video streaming: parse total size from S3 Content-Range header

Browse Source
This commit is contained in:
CallMeVerity
2026-06-03 04:18:21 +01:00
parent 6da2539c03
commit 1704b0b736
3 changed files with 34 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/VideoPlayer.tsx
+10 -70
View File
@@ -1,79 +1,19 @@
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>
<video
src={video.videoUrl}
controls
playsInline
preload="metadata"
poster={video.thumbnailUrl}
className="w-full aspect-video bg-black object-contain"
>
Your browser does not support video playback.
</video>
<div className="px-4 py-3 flex items-center justify-between border-t border-white/5 bg-white/3">
<a
frontend/src/index.css
-12
View File
@@ -24,15 +24,3 @@ a {
color: #1896d3;
text-decoration: none;
}
video::-webkit-media-controls {
opacity: 1;
}
video::-webkit-media-controls-enclosure {
border-radius: 0;
}
video::-webkit-media-controls-panel {
background: rgba(0, 0, 0, 0.75);
}