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

Stream video through backend with Range request support

Browse Source 
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)
This commit is contained in:
CallMeVerity
2026-06-03 03:56:39 +01:00
parent dc021e4856
commit 6da2539c03
5 changed files with 181 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/src/routes/videos.ts
+46 -4
View File
@@ -13,10 +13,12 @@ import {
uploadObject,
deleteObject,
getObjectUrl,
getStreamUrl,
createMultipartUpload,
getPresignedUploadPartUrl,
completeMultipartUpload,
abortMultipartUpload,
getVideoStream,
} from "../services/rustfs";
import { parseMtvFile } from "../services/mtv-parser";
import { getMapInfo } from "../services/momentum-api";
@@ -212,7 +214,7 @@ export const videoRoutes = new Elysia({ prefix: "/api/videos" })
parts,
uploadId,
},
videoUrl: getObjectUrl(videoKey),
videoUrl: getStreamUrl(id),
mtvUrl: getObjectUrl(mtvKey),
thumbnailUrl: thumbnailKey
? getObjectUrl(thumbnailKey)
@@ -304,7 +306,7 @@ export const videoRoutes = new Elysia({ prefix: "/api/videos" })
parts,
uploadId,
},
videoUrl: getObjectUrl(videoKey),
videoUrl: getStreamUrl(id),
mtvUrl: getObjectUrl(mtvKey),
thumbnailUrl: thumbnailKey ? getObjectUrl(thumbnailKey) : undefined,
};
@@ -333,7 +335,7 @@ export const videoRoutes = new Elysia({ prefix: "/api/videos" })
return {
...video,
videoUrl: getObjectUrl(video.videoKey),
videoUrl: getStreamUrl(video.id),
mtvUrl: getObjectUrl(video.mtvKey),
thumbnailUrl: video.thumbnailKey
? getObjectUrl(video.thumbnailKey)
@@ -341,12 +343,52 @@ export const videoRoutes = new Elysia({ prefix: "/api/videos" })
};
})
.get("/:id/stream", async ({ params: { id }, request, set }) => {
const video = getVideoById(id);
if (!video) return status(404, { error: "Not found" });
const rangeHeader = request.headers.get("Range");
try {
const result = await getVideoStream(video.videoKey, rangeHeader);
const headers = new Headers();
headers.set("Content-Type", result.contentType);
headers.set("Accept-Ranges", "bytes");
headers.set("Cache-Control", "public, max-age=86400");
if (result.range) {
headers.set(
"Content-Range",
`bytes ${result.range.start}-${result.range.end}/${result.contentLength}`,
);
headers.set(
"Content-Length",
String(result.range.end - result.range.start + 1),
);
return new Response(result.stream, {
status: 206,
headers,
});
} else {
headers.set("Content-Length", String(result.contentLength));
return new Response(result.stream, {
status: 200,
headers,
});
}
} catch (err: any) {
console.error("Stream error:", err);
return status(404, { error: "Video not found" });
}
})
.get("/:id", ({ params: { id } }) => {
const video = getVideoById(id);
if (!video) return status(404, { error: "Not found" });
return {
...video,
videoUrl: getObjectUrl(video.videoKey),
videoUrl: getStreamUrl(video.id),
mtvUrl: getObjectUrl(video.mtvKey),
thumbnailUrl: video.thumbnailKey
? getObjectUrl(video.thumbnailKey)
backend/src/services/rustfs.ts
+77
View File
@@ -6,6 +6,8 @@ import {
UploadPartCommand,
CompleteMultipartUploadCommand,
AbortMultipartUploadCommand,
GetObjectCommand,
HeadObjectCommand,
} from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
@@ -150,3 +152,78 @@ export async function abortMultipartUpload(
}),
);
}
export interface VideoStreamResult {
stream: ReadableStream<Uint8Array>;
contentType: string;
contentLength: number;
range?: {
start: number;
end: number;
};
}
export async function getVideoStream(
key: string,
rangeHeader?: string | null,
): Promise<VideoStreamResult> {
const s3 = getRustFsClient();
const headResult = await s3.send(
new HeadObjectCommand({
Bucket: RUSTFS_BUCKET,
Key: key,
}),
);
const totalSize = headResult.ContentLength ?? 0;
const contentType = headResult.ContentType || "video/webm";
let range: { start: number; end: number } | undefined;
let command: GetObjectCommand;
if (rangeHeader) {
const match = rangeHeader.match(/bytes=(\d*)-(\d*)/);
if (match) {
const start = match[1] ? parseInt(match[1], 10) : 0;
const end = match[2] ? parseInt(match[2], 10) : totalSize - 1;
range = { start, end: Math.min(end, totalSize - 1) };
command = new GetObjectCommand({
Bucket: RUSTFS_BUCKET,
Key: key,
Range: `bytes=${range.start}-${range.end}`,
});
} else {
command = new GetObjectCommand({
Bucket: RUSTFS_BUCKET,
Key: key,
});
}
} else {
command = new GetObjectCommand({
Bucket: RUSTFS_BUCKET,
Key: key,
});
}
const result = await s3.send(command);
if (!result.Body) {
throw new Error("Empty response body from RustFS");
}
const sdkStream = result.Body as any;
const webStream: ReadableStream<Uint8Array> = sdkStream.transformToWebStream
? sdkStream.transformToWebStream()
: sdkStream;
return {
stream: webStream,
contentType,
contentLength: totalSize,
range,
};
}
export function getStreamUrl(videoId: string): string {
return `/api/videos/${videoId}/stream`;
}
frontend/src/components/VideoPlayer.tsx
+41 -4
View File
@@ -4,20 +4,22 @@ 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 && (
{}
{!loaded && !error && (
<div className="absolute inset-0 flex items-center justify-center z-10">
{video.thumbnailUrl ? (
{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">
@@ -26,13 +28,48 @@ export default function VideoPlayer({ video }: { video: VideoDetail }) {
</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
className="w-full h-full"
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>
frontend/src/index.css
+12
View File
@@ -24,3 +24,15 @@ 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);
}
frontend/src/pages/VideoDetail.tsx
+5 -54
View File
@@ -1,5 +1,6 @@
import { useEffect, useState, useRef } from "react";
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import VideoPlayer from "../components/VideoPlayer";
import VideoSidebar from "../components/VideoSidebar";
import { fetchVideo, formatRunTime } from "../api/client";
import type { VideoDetail } from "../types/video";
@@ -60,9 +61,7 @@ function PageSkeleton() {
export default function VideoDetail() {
const { id } = useParams<{ id: string }>();
const [video, setVideo] = useState<VideoDetail | null>(null);
const [videoReady, setVideoReady] = useState(false);
const [error, setError] = useState<string | null>(null);
const videoRef = useRef<HTMLVideoElement>(null);
useEffect(() => {
if (!id) return;
@@ -79,22 +78,8 @@ export default function VideoDetail() {
);
}
if (!video || !videoReady) {
return (
<>
<PageSkeleton />
{video && (
<video
ref={videoRef}
src={video.videoUrl}
preload="auto"
onCanPlay={() => setVideoReady(true)}
className="fixed opacity-0 pointer-events-none"
aria-hidden
/>
)}
</>
);
if (!video) {
return <PageSkeleton />;
}
return (
@@ -114,41 +99,7 @@ export default function VideoDetail() {
<div className="flex flex-col lg:flex-row gap-4 lg:items-start">
<div className="lg:w-1/2 min-w-0">
<div className="rounded-lg border border-white/5 overflow-hidden">
<div className="aspect-video bg-black">
<video
ref={videoRef}
src={video.videoUrl}
controls
className="w-full h-full"
poster={video.thumbnailUrl}
>
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>
</div>
</div>
<VideoPlayer video={video} />
</div>
<div className="lg:w-1/2">
<VideoSidebar video={video} />