New web based recorder (Instant Mode) (#1363)

* wip: Web recorder

* feat: picture in picture camera

* feat: clear errors in web recorder files

* feat: web-backend Videos update

* fix: picture in picture camera switch

* feat: open preferred option (e.g. Window or Display)

* feat: Settings dialog + auto select last device

* feat: various styling bits for the web recorder

* feat: web recorder cleanup

* fmt

* feat: component cleanup / division

* feat: In progress recording bar

* feat: Instant Mode for web recorder

* feat: Browser compatibility

* feat: PiP gesture fix

* feat: Pause button + start/stop sounds

* feat: Improved web recorder resilience + stream management

* revert: remove desktop changes from PR

* revert: remove remaining desktop/src changes from PR

* revert: remove changes outside apps/web, web-backend, and web-domain

* revert: remove unwanted changes from web recorder PR

* revert: remove DeleteOrg files and changelog entry

* Revert "revert: remove DeleteOrg files and changelog entry"

This reverts commit 4148b2b.

* feat: Chunk uploading

* feat: Restart recording + segment progress

* fmt

* add env workspace

* feat: use webMP4 for web recordings

* fmt

* feat: Popover progress indicator

* feat: Web recorder free plan limits

* revert: undo PR changes to MobileTab and spaces page

* coderabbit bits

* coderabbit suggestions

* Filter out devices with empty deviceId

* Add support for aborting multipart uploads

* Add retry logic for S3 video result deletion

* Add revalidatePath calls after video result deletion

* Refactor WebRecorderDialog to new directory structure

* Refactor bucketId handling in video upload actions

* Update useEffect dependencies in CameraPreviewWindow

* Add cleanup for recording timer on unmount

* Fix timer interval reset in useRecordingTimer

* format

* Add @radix-ui/react-dialog and update video queries

* Update page.tsx

* Add effectiveCreatedAt to video props

* Move S3 result file deletion outside DB transaction

* Remove console.log from recording upload

* Disable status pill interactions when component is disabled

* Refactor video deletion to use useEffectMutation

* Refactor video upload and abort handling

* Fix stale closure in cleanup effect for recorder

* format

* Add provideOptionalAuth to upload API routes

* Show error toast for unsupported browsers in dialog

Author: richiemcilroy

apps/web/actions/video/upload.ts

@@ -11,12 +11,20 @@ import { s3Buckets, videos, videoUploads } from "@cap/database/schema";
 import { buildEnv, NODE_ENV, serverEnv } from "@cap/env";
 import { dub, userIsPro } from "@cap/utils";
 import { AwsCredentials, S3Buckets } from "@cap/web-backend";
-import { type Folder, type Organisation, Video } from "@cap/web-domain";
+import {
+	type Folder,
+	type Organisation,
+	S3Bucket,
+	Video,
+} from "@cap/web-domain";
 import { eq } from "drizzle-orm";
 import { Effect, Option } from "effect";
 import { revalidatePath } from "next/cache";
 import { runPromise } from "@/lib/server";
 
+const MAX_S3_DELETE_ATTEMPTS = 3;
+const S3_DELETE_RETRY_BACKOFF_MS = 250;
+
 async function getVideoUploadPresignedUrl({
 	fileKey,
 	duration,
@@ -203,7 +211,7 @@ export async function createVideoAndGetUploadUrl({
 			} - ${formattedDate}`,
 			ownerId: user.id,
 			orgId,
-			source: { type: "desktopMP4" as const },
+			source: { type: "webMP4" as const },
 			isScreenshot,
 			bucket: customBucket?.id,
 			public: serverEnv().CAP_VIDEOS_DEFAULT_PUBLIC,
@@ -255,3 +263,131 @@ export async function createVideoAndGetUploadUrl({
 		);
 	}
 }
+
+export async function deleteVideoResultFile({
+	videoId,
+}: {
+	videoId: Video.VideoId;
+}) {
+	const user = await getCurrentUser();
+
+	if (!user) throw new Error("Unauthorized");
+
+	const [video] = await db()
+		.select({
+			id: videos.id,
+			ownerId: videos.ownerId,
+			bucketId: videos.bucket,
+		})
+		.from(videos)
+		.where(eq(videos.id, videoId));
+
+	if (!video) throw new Error("Video not found");
+	if (video.ownerId !== user.id) throw new Error("Forbidden");
+
+	const bucketIdOption = Option.fromNullable(video.bucketId).pipe(
+		Option.map((id) => S3Bucket.S3BucketId.make(id)),
+	);
+	const fileKey = `${video.ownerId}/${video.id}/result.mp4`;
+	const logContext = {
+		videoId: video.id,
+		ownerId: video.ownerId,
+		bucketId: video.bucketId ?? null,
+		fileKey,
+	};
+
+	try {
+		await db().transaction(async (tx) => {
+			await tx.delete(videoUploads).where(eq(videoUploads.videoId, videoId));
+		});
+	} catch (error) {
+		console.error("video.result.delete.transaction_failure", {
+			...logContext,
+			error: serializeError(error),
+		});
+		throw error;
+	}
+
+	try {
+		await deleteResultObjectWithRetry({
+			bucketIdOption,
+			fileKey,
+			logContext,
+		});
+	} catch (error) {
+		console.error("video.result.delete.s3_failure", {
+			...logContext,
+			error: serializeError(error),
+		});
+		throw error;
+	}
+
+	revalidatePath(`/s/${videoId}`);
+	revalidatePath("/dashboard/caps");
+	revalidatePath("/dashboard/folder");
+	revalidatePath("/dashboard/spaces");
+
+	return { success: true };
+}
+
+async function deleteResultObjectWithRetry({
+	bucketIdOption,
+	fileKey,
+	logContext,
+}: {
+	bucketIdOption: Option.Option<S3Bucket.S3BucketId>;
+	fileKey: string;
+	logContext: {
+		videoId: Video.VideoId;
+		ownerId: string;
+		bucketId: string | null;
+		fileKey: string;
+	};
+}) {
+	let attempt = 0;
+	let lastError: unknown;
+	while (attempt < MAX_S3_DELETE_ATTEMPTS) {
+		attempt += 1;
+		try {
+			await Effect.gen(function* () {
+				const [bucket] = yield* S3Buckets.getBucketAccess(bucketIdOption);
+				yield* bucket.deleteObject(fileKey);
+			}).pipe(runPromise);
+			return;
+		} catch (error) {
+			lastError = error;
+			console.error("video.result.delete.s3_failure", {
+				...logContext,
+				attempt,
+				maxAttempts: MAX_S3_DELETE_ATTEMPTS,
+				error: serializeError(error),
+			});
+
+			if (attempt < MAX_S3_DELETE_ATTEMPTS) {
+				await sleep(S3_DELETE_RETRY_BACKOFF_MS * attempt);
+			}
+		}
+	}
+
+	throw lastError instanceof Error
+		? lastError
+		: new Error("Failed to delete video result from S3");
+}
+
+function serializeError(error: unknown) {
+	if (error instanceof Error) {
+		return {
+			name: error.name,
+			message: error.message,
+			stack: error.stack,
+		};
+	}
+
+	return { name: "UnknownError", message: String(error) };
+}
+
+function sleep(durationMs: number) {
+	return new Promise<void>((resolve) => {
+		setTimeout(resolve, durationMs);
+	});
+}

apps/web/app/(org)/dashboard/caps/Caps.tsx

@@ -17,6 +17,7 @@ import {
 	SelectedCapsBar,
 	UploadCapButton,
 	UploadPlaceholderCard,
+	WebRecorderDialog,
 } from "./components";
 import { CapCard } from "./components/CapCard/CapCard";
 import { CapPagination } from "./components/CapPagination";
@@ -240,6 +241,7 @@ export const Caps = ({
 					New Folder
 				</Button>
 				<UploadCapButton size="sm" />
+				<WebRecorderDialog />
 			</div>
 			{folders.length > 0 && (
 				<>

apps/web/app/(org)/dashboard/caps/components/EmptyCapState.tsx

@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useRive } from "@rive-app/react-canvas";
 import { useTheme } from "../../Contexts";
 import { UploadCapButton } from "./UploadCapButton";
+import { WebRecorderDialog } from "./web-recorder-dialog/web-recorder-dialog";
 
 interface EmptyCapStateProps {
 	userName?: string;
@@ -30,7 +31,7 @@ export const EmptyCapState: React.FC<EmptyCapStateProps> = ({ userName }) => {
 						Craft your narrative with Cap - get projects done quicker.
 					</p>
 				</div>
-				<div className="flex gap-3 justify-center items-center mt-4">
+				<div className="flex flex-wrap gap-3 justify-center items-center mt-4">
 					<Button
 						href="/download"
 						className="flex relative gap-2 justify-center items-center"
@@ -40,6 +41,8 @@ export const EmptyCapState: React.FC<EmptyCapStateProps> = ({ userName }) => {
 						Download Cap
 					</Button>
 					<p className="text-sm text-gray-10">or</p>
+					<WebRecorderDialog />
+					<p className="text-sm text-gray-10">or</p>
 					<UploadCapButton />
 				</div>
 			</div>

apps/web/app/(org)/dashboard/caps/components/UploadCapButton.tsx

@@ -18,6 +18,7 @@ import {
 } from "@/app/(org)/dashboard/caps/UploadingContext";
 import { UpgradeModal } from "@/components/UpgradeModal";
 import { ThumbnailRequest } from "@/lib/Requests/ThumbnailRequest";
+import { sendProgressUpdate } from "./sendProgressUpdate";
 
 export const UploadCapButton = ({
 	size = "md",
@@ -517,29 +518,3 @@ async function legacyUploadCap(
 	setUploadStatus(undefined);
 	return false;
 }
-
-const sendProgressUpdate = async (
-	videoId: string,
-	uploaded: number,
-	total: number,
-) => {
-	try {
-		const response = await fetch("/api/desktop/video/progress", {
-			method: "POST",
-			headers: {
-				"Content-Type": "application/json",
-			},
-			body: JSON.stringify({
-				videoId,
-				uploaded,
-				total,
-				updatedAt: new Date().toISOString(),
-			}),
-		});
-
-		if (!response.ok)
-			console.error("Failed to send progress update:", response.status);
-	} catch (err) {
-		console.error("Error sending progress update:", err);
-	}
-};

apps/web/app/(org)/dashboard/caps/components/index.ts

@@ -5,3 +5,4 @@ export * from "./NewFolderDialog";
 export * from "./SelectedCapsBar";
 export * from "./UploadCapButton";
 export * from "./UploadPlaceholderCard";
+export * from "./web-recorder-dialog/web-recorder-dialog";

apps/web/app/(org)/dashboard/caps/components/sendProgressUpdate.ts

@@ -0,0 +1,24 @@
+import { EffectRuntime } from "@/lib/EffectRuntime";
+import { withRpc } from "@/lib/Rpcs";
+import type { VideoId } from "./web-recorder-dialog/web-recorder-types";
+
+export const sendProgressUpdate = async (
+	videoId: VideoId,
+	uploaded: number,
+	total: number,
+) => {
+	try {
+		await EffectRuntime.runPromise(
+			withRpc((rpc) =>
+				rpc.VideoUploadProgressUpdate({
+					videoId,
+					uploaded,
+					total,
+					updatedAt: new Date(),
+				}),
+			),
+		);
+	} catch (error) {
+		console.error("Failed to send progress update:", error);
+	}
+};