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 e50aee1e62
commit 97da0d435a
6 changed files with 144 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
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;
}