feat(web): fall back to raw upload when mp4 playback fails

Made-with: Cursor

Author: richiemcilroy

apps/web/__tests__/unit/playback-source.test.ts

@@ -3,6 +3,7 @@ import {
 	canPlayRawContentType,
 	detectCrossOriginSupport,
 	resolvePlaybackSource,
+	shouldFallbackToRawPlaybackSource,
 } from "@/app/s/[videoId]/_components/playback-source";
 
 function createResponse(
@@ -149,6 +150,40 @@ describe("resolvePlaybackSource", () => {
 		});
 	});
 
+	it("can prefer the raw preview after the MP4 source fails in the player", async () => {
+		const fetchImpl = vi.fn<typeof fetch>().mockResolvedValueOnce(
+			createResponse("https://cap.so/raw-upload.webm", {
+				status: 206,
+				headers: { "content-type": "video/webm;codecs=vp9,opus" },
+				redirected: true,
+			}),
+		);
+
+		const result = await resolvePlaybackSource({
+			videoSrc: "/api/playlist?videoType=mp4",
+			rawFallbackSrc: "/api/playlist?videoType=raw-preview",
+			preferredSource: "raw",
+			fetchImpl,
+			now: () => 250,
+			createVideoElement: () => ({
+				canPlayType: vi.fn().mockReturnValue("probably"),
+			}),
+		});
+
+		expect(fetchImpl).toHaveBeenCalledTimes(1);
+		expect(fetchImpl).toHaveBeenCalledWith(
+			"/api/playlist?videoType=raw-preview&_t=250",
+			{
+				headers: { range: "bytes=0-0" },
+			},
+		);
+		expect(result).toEqual({
+			url: "https://cap.so/raw-upload.webm",
+			type: "raw",
+			supportsCrossOrigin: false,
+		});
+	});
+
 	it("rejects raw webm previews when the browser cannot play them", async () => {
 		const fetchImpl = vi
 			.fn<typeof fetch>()
@@ -196,3 +231,14 @@ describe("resolvePlaybackSource", () => {
 		expect(result).toBeNull();
 	});
 });
+
+describe("shouldFallbackToRawPlaybackSource", () => {
+	it("allows a single mp4-to-raw fallback", () => {
+		expect(shouldFallbackToRawPlaybackSource("mp4", "/raw", false)).toBe(true);
+		expect(shouldFallbackToRawPlaybackSource("mp4", "/raw", true)).toBe(false);
+		expect(shouldFallbackToRawPlaybackSource("raw", "/raw", true)).toBe(false);
+		expect(shouldFallbackToRawPlaybackSource("mp4", undefined, false)).toBe(
+			false,
+		);
+	});
+});

apps/web/app/api/playlist/route.ts

@@ -83,6 +83,43 @@ const ApiLive = HttpApiBuilder.api(Api).pipe(
 	),
 );
 
+const resolveRawPreviewKey = (video: Video.Video) =>
+	Effect.gen(function* () {
+		const db = yield* Database;
+		const [s3] = yield* S3Buckets.getBucketAccess(video.bucketId);
+		const [uploadRecord] = yield* db.use((db) =>
+			db
+				.select({ rawFileKey: Db.videoUploads.rawFileKey })
+				.from(Db.videoUploads)
+				.where(eq(Db.videoUploads.videoId, video.id)),
+		);
+
+		if (uploadRecord?.rawFileKey) {
+			return uploadRecord.rawFileKey;
+		}
+
+		if (video.source.type !== "webMP4") {
+			return yield* Effect.fail(new HttpApiError.NotFound());
+		}
+
+		const candidateKeys = [
+			`${video.ownerId}/${video.id}/raw-upload.mp4`,
+			`${video.ownerId}/${video.id}/raw-upload.webm`,
+		];
+		const headResults = yield* Effect.all(
+			candidateKeys.map((key) => s3.headObject(key).pipe(Effect.option)),
+			{ concurrency: "unbounded" },
+		);
+		for (let i = 0; i < candidateKeys.length; i++) {
+			const rawHead = headResults[i];
+			if (Option.isSome(rawHead) && (rawHead.value.ContentLength ?? 0) > 0) {
+				return candidateKeys[i];
+			}
+		}
+
+		return yield* Effect.fail(new HttpApiError.NotFound());
+	});
+
 const getPlaylistResponse = (
 	video: Video.Video,
 	urlParams: (typeof GetPlaylistParams)["Type"],
@@ -93,20 +130,9 @@ const getPlaylistResponse = (
 			video.source.type === "desktopMP4" || video.source.type === "webMP4";
 
 		if (urlParams.videoType === "raw-preview") {
-			const db = yield* Database;
-			const [uploadRecord] = yield* db.use((db) =>
-				db
-					.select({ rawFileKey: Db.videoUploads.rawFileKey })
-					.from(Db.videoUploads)
-					.where(eq(Db.videoUploads.videoId, urlParams.videoId)),
-			);
-
-			if (!uploadRecord?.rawFileKey) {
-				return yield* Effect.fail(new HttpApiError.NotFound());
-			}
-
+			const rawFileKey = yield* resolveRawPreviewKey(video);
 			return yield* s3
-				.getSignedObjectUrl(uploadRecord.rawFileKey)
+				.getSignedObjectUrl(rawFileKey)
 				.pipe(Effect.map(HttpServerResponse.redirect));
 		}
 

apps/web/app/s/[videoId]/_components/CapVideoPlayer.tsx

@@ -23,6 +23,7 @@ import {
 import {
 	type ResolvedPlaybackSource,
 	resolvePlaybackSource,
+	shouldFallbackToRawPlaybackSource,
 } from "./playback-source";
 import {
 	MediaPlayer,
@@ -139,6 +140,8 @@ export function CapVideoPlayer({
 	const [hasError, setHasError] = useState(false);
 	const [isRetryingProcessing, setIsRetryingProcessing] = useState(false);
 	const [playerDuration, setPlayerDuration] = useState(fallbackDuration ?? 0);
+	const [preferredSource, setPreferredSource] = useState<"mp4" | "raw">("mp4");
+	const [hasTriedRawFallback, setHasTriedRawFallback] = useState(false);
 	const queryClient = useQueryClient();
 
 	useEffect(() => {
@@ -166,14 +169,21 @@ export function CapVideoPlayer({
 	const shouldDeferResolvedSource = shouldDeferPlaybackSource(uploadProgress);
 
 	const resolvedSrc = useQuery<ResolvedPlaybackSource | null>({
-		queryKey: ["resolvedSrc", videoSrc, rawFallbackSrc, enableCrossOrigin],
+		queryKey: [
+			"resolvedSrc",
+			videoSrc,
+			rawFallbackSrc,
+			enableCrossOrigin,
+			preferredSource,
+		],
 		queryFn: shouldDeferResolvedSource
 			? skipToken
 			: () =>
 					resolvePlaybackSource({
 						videoSrc,
 						rawFallbackSrc,
 						enableCrossOrigin,
+						preferredSource,
 					}),
 		refetchOnWindowFocus: false,
 		staleTime: Number.POSITIVE_INFINITY,
@@ -186,6 +196,8 @@ export function CapVideoPlayer({
 		setVideoLoaded(false);
 		setHasError(false);
 		setShowPlayButton(false);
+		setPreferredSource("mp4");
+		setHasTriedRawFallback(false);
 	}, [videoSrc, rawFallbackSrc]);
 
 	// Track video duration for comment markers
@@ -280,6 +292,21 @@ export function CapVideoPlayer({
 		};
 
 		const handleError = () => {
+			if (
+				shouldFallbackToRawPlaybackSource(
+					resolvedSrc.data?.type,
+					rawFallbackSrc,
+					hasTriedRawFallback,
+				)
+			) {
+				setHasTriedRawFallback(true);
+				setPreferredSource("raw");
+				setVideoLoaded(false);
+				setHasError(false);
+				setShowPlayButton(false);
+				return;
+			}
+
 			setHasError(true);
 		};
 
@@ -365,7 +392,14 @@ export function CapVideoPlayer({
 				captionTrack.removeEventListener("cuechange", handleCueChange);
 			}
 		};
-	}, [hasPlayedOnce, resolvedSrc.isPending, videoRef.current]);
+	}, [
+		hasPlayedOnce,
+		hasTriedRawFallback,
+		rawFallbackSrc,
+		resolvedSrc.data?.type,
+		resolvedSrc.isPending,
+		videoRef.current,
+	]);
 
 	const generateVideoFrameThumbnail = useCallback(
 		(time: number): string => {
@@ -443,12 +477,19 @@ export function CapVideoPlayer({
 		) {
 			setHasError(false);
 			void queryClient.invalidateQueries({
-				queryKey: ["resolvedSrc", videoSrc, rawFallbackSrc, enableCrossOrigin],
+				queryKey: [
+					"resolvedSrc",
+					videoSrc,
+					rawFallbackSrc,
+					enableCrossOrigin,
+					preferredSource,
+				],
 			});
 		}
 		prevUploadProgress.current = uploadProgress;
 	}, [
 		enableCrossOrigin,
+		preferredSource,
 		queryClient,
 		rawFallbackSrc,
 		uploadProgress,

apps/web/app/s/[videoId]/_components/playback-source.ts

@@ -18,6 +18,7 @@ type ResolvePlaybackSourceInput = {
 	fetchImpl?: typeof fetch;
 	now?: () => number;
 	createVideoElement?: () => Pick<HTMLVideoElement, "canPlayType">;
+	preferredSource?: "mp4" | "raw";
 };
 
 function appendCacheBust(url: string, timestamp: number): string {
@@ -92,14 +93,56 @@ export function canPlayRawContentType(
 	);
 }
 
+export function shouldFallbackToRawPlaybackSource(
+	resolvedSourceType: ResolvedPlaybackSource["type"] | null | undefined,
+	rawFallbackSrc: string | undefined,
+	hasTriedRawFallback: boolean,
+): boolean {
+	return Boolean(
+		rawFallbackSrc && resolvedSourceType === "mp4" && !hasTriedRawFallback,
+	);
+}
+
 export async function resolvePlaybackSource({
 	videoSrc,
 	rawFallbackSrc,
 	enableCrossOrigin = false,
 	fetchImpl = fetch,
 	now = () => Date.now(),
 	createVideoElement,
+	preferredSource = "mp4",
 }: ResolvePlaybackSourceInput): Promise<ResolvedPlaybackSource | null> {
+	const resolveRaw = async (): Promise<ResolvedPlaybackSource | null> => {
+		if (!rawFallbackSrc) {
+			return null;
+		}
+
+		const rawResult = await probePlaybackSource(rawFallbackSrc, fetchImpl, now);
+
+		if (!rawResult) {
+			return null;
+		}
+
+		const contentType = rawResult.response.headers.get("content-type") ?? "";
+
+		if (
+			!canPlayRawContentType(contentType, rawResult.url, createVideoElement)
+		) {
+			return null;
+		}
+
+		return {
+			url: rawResult.url,
+			type: "raw",
+			supportsCrossOrigin:
+				enableCrossOrigin && detectCrossOriginSupport(rawResult.url),
+		};
+	};
+
+	if (preferredSource === "raw") {
+		return await resolveRaw();
+	}
+
 	const mp4Result = await probePlaybackSource(videoSrc, fetchImpl, now);
 
 	if (mp4Result) {
@@ -111,26 +154,5 @@ export async function resolvePlaybackSource({
 		};
 	}
 
-	if (!rawFallbackSrc) {
-		return null;
-	}
-
-	const rawResult = await probePlaybackSource(rawFallbackSrc, fetchImpl, now);
-
-	if (!rawResult) {
-		return null;
-	}
-
-	const contentType = rawResult.response.headers.get("content-type") ?? "";
-
-	if (!canPlayRawContentType(contentType, rawResult.url, createVideoElement)) {
-		return null;
-	}
-
-	return {
-		url: rawResult.url,
-		type: "raw",
-		supportsCrossOrigin:
-			enableCrossOrigin && detectCrossOriginSupport(rawResult.url),
-	};
+	return await resolveRaw();
 }