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

Auto-transcode on upload, show transcode status to user

Browse Source
This commit is contained in:
CallMeVerity
2026-06-03 04:38:51 +01:00
parent 8121369a58
commit ff2c3997a0
6 changed files with 141 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/src/routes/videos.ts
+44 -11
View File
@@ -9,6 +9,7 @@ import {
getVideoByMapAndPlayer,
updateVideoPB,
updateTranscodedKey,
updateTranscodeStatus,
} from "../services/db";
import {
uploadObject,
@@ -335,6 +336,25 @@ export const videoRoutes = new Elysia({ prefix: "/api/videos" })
await completeMultipartUpload(video.videoKey, uploadId, s3Parts);
if (
!video.transcodedKey &&
video.transcodeStatus !== "pending" &&
video.transcodeStatus !== "processing"
) {
updateTranscodeStatus(id, "pending");
const videoKey = video.videoKey;
transcodeVideo(videoKey)
.then((transcodedKey) => {
updateTranscodedKey(id, transcodedKey);
updateTranscodeStatus(id, "done");
console.log(`[transcode] Done: ${id} -> ${transcodedKey}`);
})
.catch((err) => {
console.error(`[transcode] Failed: ${id}`, err);
updateTranscodeStatus(id, "failed");
});
}
return {
...video,
videoUrl: getStreamUrl(video.id),
@@ -349,6 +369,16 @@ export const videoRoutes = new Elysia({ prefix: "/api/videos" })
const video = getVideoById(id);
if (!video) return status(404, { error: "Not found" });
if (
video.transcodeStatus === "processing" ||
video.transcodeStatus === "pending"
) {
return status(409, {
error: "Transcode already in progress",
transcodeStatus: video.transcodeStatus,
});
}
if (video.transcodedKey) {
return {
...video,
@@ -360,18 +390,21 @@ export const videoRoutes = new Elysia({ prefix: "/api/videos" })
};
}
const transcodedKey = await transcodeVideo(video.videoKey);
updateTranscodedKey(id, transcodedKey);
updateTranscodeStatus(id, "pending");
return {
...video,
transcodedKey,
videoUrl: getStreamUrl(video.id),
mtvUrl: getObjectUrl(video.mtvKey),
thumbnailUrl: video.thumbnailKey
? getObjectUrl(video.thumbnailKey)
: undefined,
};
const videoKey = video.videoKey;
transcodeVideo(videoKey)
.then((transcodedKey) => {
updateTranscodedKey(id, transcodedKey);
updateTranscodeStatus(id, "done");
console.log(`[transcode] Done: ${id} -> ${transcodedKey}`);
})
.catch((err) => {
console.error(`[transcode] Failed: ${id}`, err);
updateTranscodeStatus(id, "failed");
});
return { id, transcodeStatus: "pending" };
})
.get("/:id/stream", async ({ params: { id }, request, set }) => {
backend/src/services/db.ts
+18 -1
View File
@@ -60,6 +60,11 @@ export function initDb(): void {
if (!columns.some((col) => col.name === "transcoded_key")) {
db.exec("ALTER TABLE videos ADD COLUMN transcoded_key TEXT");
}
if (!columns.some((col) => col.name === "transcode_status")) {
db.exec(
"ALTER TABLE videos ADD COLUMN transcode_status TEXT DEFAULT NULL",
);
}
}
function getDb(): Database {
@@ -145,7 +150,6 @@ function rowToEntry(row: any): VideoEntry {
videoKey: row.video_key,
mtvKey: row.mtv_key,
thumbnailKey: row.thumbnail_key ?? undefined,
transcodedKey: row.transcoded_key ?? undefined,
tier: row.tier ?? undefined,
mapId: row.map_id ?? undefined,
jsonStats: row.json_stats ?? undefined,
@@ -153,9 +157,22 @@ function rowToEntry(row: any): VideoEntry {
previousPbs: row.previous_pbs
? JSON.parse(row.previous_pbs)
: undefined,
transcodedKey: row.transcoded_key ?? undefined,
transcodeStatus: row.transcode_status ?? undefined,
};
}
export function updateTranscodeStatus(
id: string,
status: "pending" | "processing" | "done" | "failed" | null,
): boolean {
const d = getDb();
const result = d
.prepare("UPDATE videos SET transcode_status = ? WHERE id = ?")
.run(status, id);
return result.changes > 0;
}
export function updateThumbnailKey(
id: string,
thumbnailKey: string | null,
backend/src/services/rustfs.ts
+3
View File
@@ -224,6 +224,7 @@ export async function transcodeVideo(originalKey: string): Promise<string> {
const outputPath = join(tmpdir(), `transcode-output-${Date.now()}.mp4`);
try {
console.log(`[transcode] Downloading ${originalKey} from S3...`);
const getCmd = new GetObjectCommand({
Bucket: RUSTFS_BUCKET,
Key: originalKey,
@@ -260,6 +261,7 @@ export async function transcodeVideo(originalKey: string): Promise<string> {
);
}
console.log(`[transcode] Running ffmpeg on ${inputPath}...`);
const proc = Bun.spawn(
[
"ffmpeg",
@@ -298,6 +300,7 @@ export async function transcodeVideo(originalKey: string): Promise<string> {
? originalKey.substring(0, lastDot) + ".mp4"
: originalKey + ".mp4";
console.log(`[transcode] Uploading ${transcodedKey} to S3...`);
const outputFile = Bun.file(outputPath);
const fileSize = outputFile.size;
const CHUNK_SIZE = 80 * 1024 * 1024;
backend/src/types/video.ts
+2 -1
View File
@@ -51,12 +51,13 @@ export interface VideoEntry {
videoKey: string;
mtvKey: string;
thumbnailKey?: string;
transcodedKey?: string;
tier?: number | null;
mapId?: number | null;
jsonStats?: string;
createdAt: string;
previousPbs?: PreviousPB[];
transcodedKey?: string;
transcodeStatus?: "pending" | "processing" | "done" | "failed" | null;
}
export interface VideoListItem {
frontend/src/components/VideoPlayer.tsx
+73 -34
View File
@@ -1,45 +1,84 @@
import type { VideoDetail } from "../types/video";
import { formatRunTime } from "../api/client";
function TranscodeBanner({ status }: { status: string }) {
if (status === "done" || !status) return null;
const isPending = status === "pending" || status === "processing";
return (
<div
className={`rounded-lg border px-4 py-3 text-sm ${
isPending
? "border-yellow-500/30 bg-yellow-500/10 text-yellow-300"
: "border-red-500/30 bg-red-500/10 text-red-300"
}`}
>
{isPending ? (
<div className="flex items-center gap-2">
<div className="w-4 h-4 rounded-full border-2 border-current border-t-transparent animate-spin" />
<span>
Video is being prepared for playback. This may take a
few minutes depending on file size.
</span>
</div>
) : (
<span>
Video processing failed. The original format may not be
supported by your browser.
</span>
)}
</div>
);
}
export default function VideoPlayer({ video }: { video: VideoDetail }) {
return (
<div className="rounded-lg border border-white/5 overflow-hidden">
<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="flex flex-col gap-3">
{(video.transcodeStatus === "pending" ||
video.transcodeStatus === "processing" ||
video.transcodeStatus === "failed") && (
<TranscodeBanner status={video.transcodeStatus} />
)}
<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"
<div className="rounded-lg border border-white/5 overflow-hidden">
<video
src={video.videoUrl}
controls
playsInline
preload="metadata"
poster={video.thumbnailUrl}
className="w-full aspect-video bg-black object-contain"
>
<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>
Your browser does not support video playback.
</video>
<span className="font-mono text-sm text-white/80">
{formatRunTime(video.runTime)}
</span>
<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>
</div>
);
frontend/src/types/video.ts
+1
View File
@@ -35,4 +35,5 @@ export interface VideoDetail {
jsonStats?: string;
createdAt: string;
previousPbs?: PreviousPB[];
transcodeStatus?: "pending" | "processing" | "done" | "failed" | null;
}