Add openShareUrlInNewTab and recorder UI

Author: richiemcilroy

apps/web/__tests__/unit/web-recorder-utils.test.ts

@@ -1,5 +1,6 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import {
+	openShareUrlInNewTab,
 	selectRecordingPipelineFromSupport,
 	shouldPreferStreamingUpload,
 } from "@/app/(org)/dashboard/caps/components/web-recorder-dialog/web-recorder-utils";
@@ -124,3 +125,37 @@ describe("shouldPreferStreamingUpload", () => {
 		).toBe(false);
 	});
 });
+
+describe("openShareUrlInNewTab", () => {
+	it("opens the share url in a new tab", () => {
+		const open = vi.fn(() => ({}));
+		vi.stubGlobal("window", {
+			open,
+		});
+
+		expect(openShareUrlInNewTab("https://cap.so/s/test-video")).toBe(true);
+		expect(open).toHaveBeenCalledWith(
+			"https://cap.so/s/test-video",
+			"_blank",
+			"noopener,noreferrer",
+		);
+
+		vi.unstubAllGlobals();
+	});
+
+	it("returns false when the browser blocks the popup", () => {
+		vi.stubGlobal("window", {
+			open: vi.fn(() => null),
+		});
+
+		expect(openShareUrlInNewTab("https://cap.so/s/test-video")).toBe(false);
+
+		vi.unstubAllGlobals();
+	});
+
+	it("does not navigate when the share url is missing", () => {
+		expect(openShareUrlInNewTab(null)).toBe(false);
+		expect(openShareUrlInNewTab(undefined)).toBe(false);
+		expect(openShareUrlInNewTab("")).toBe(false);
+	});
+});

apps/web/app/(org)/dashboard/caps/components/web-recorder-dialog/useWebRecorder.ts

@@ -54,6 +54,7 @@ import type {
 import {
 	detectCapabilities,
 	isUserCancellationError,
+	openShareUrlInNewTab,
 	type RecorderCapabilities,
 	type RecordingPipeline,
 	selectRecordingPipeline,
@@ -133,6 +134,9 @@ export const useWebRecorder = ({
 	const [chunkUploads, setChunkUploads] = useState<ChunkUploadState[]>([]);
 	const [errorDownload, setErrorDownload] =
 		useState<RecordingFailureDownload | null>(null);
+	const [completedShareUrl, setCompletedShareUrl] = useState<string | null>(
+		null,
+	);
 	const [recoveredDownloads, setRecoveredDownloads] = useState<
 		RecoveredRecordingDownload[]
 	>([]);
@@ -452,9 +456,8 @@ export const useWebRecorder = ({
 
 	const openShareUrl = useCallback((shareUrl?: string | null) => {
 		if (!shareUrl || shareUrlOpenedRef.current) return;
-		if (typeof window === "undefined") return;
+		if (!openShareUrlInNewTab(shareUrl)) return;
 		shareUrlOpenedRef.current = true;
-		window.open(shareUrl, "_blank", "noopener,noreferrer");
 	}, []);
 	const queryClient = useQueryClient();
 	const deleteVideo = useEffectMutation({
@@ -561,6 +564,7 @@ export const useWebRecorder = ({
 		setChunkUploads([]);
 		setHasAudioTrack(false);
 		replaceErrorDownload(null);
+		setCompletedShareUrl(null);
 		shareUrlOpenedRef.current = false;
 
 		const pendingInstantVideoId = pendingInstantVideoIdRef.current;
@@ -1342,6 +1346,7 @@ export const useWebRecorder = ({
 			await disposeRecordingSpool();
 
 			setUploadStatus(undefined);
+			setCompletedShareUrl(creationResult.shareUrl);
 			updatePhase("completed");
 			toast.success(
 				pipeline.mode === "streaming-webm"
@@ -1379,6 +1384,7 @@ export const useWebRecorder = ({
 					"Upload confirmation was interrupted. Open the video to verify processing before retrying.",
 				);
 				openShareUrl(videoCreationRef.current?.shareUrl ?? null);
+				setCompletedShareUrl(videoCreationRef.current?.shareUrl ?? null);
 				router.refresh();
 				return;
 			}
@@ -1512,6 +1518,7 @@ export const useWebRecorder = ({
 		hasAudioTrack,
 		chunkUploads,
 		errorDownload,
+		completedShareUrl,
 		recoveredDownloads,
 		isSettingUp,
 		isRecording: isRecordingActive,
@@ -1522,6 +1529,7 @@ export const useWebRecorder = ({
 		pauseRecording,
 		resumeRecording,
 		stopRecording,
+		openCompletedShareUrl: () => openShareUrl(completedShareUrl),
 		restartRecording,
 		resetState,
 		dismissRecoveredDownload,

apps/web/app/(org)/dashboard/caps/components/web-recorder-dialog/web-recorder-dialog.tsx

@@ -134,6 +134,7 @@ export const WebRecorderDialog = () => {
 		hasAudioTrack,
 		chunkUploads,
 		errorDownload,
+		completedShareUrl,
 		recoveredDownloads,
 		isRecording,
 		isBusy,
@@ -148,6 +149,7 @@ export const WebRecorderDialog = () => {
 		pauseRecording,
 		resumeRecording,
 		stopRecording,
+		openCompletedShareUrl,
 		restartRecording,
 		resetState,
 		dismissRecoveredDownload,
@@ -341,6 +343,22 @@ export const WebRecorderDialog = () => {
 										{unsupportedReason}
 									</div>
 								)}
+								{phase === "completed" && completedShareUrl && (
+									<div className="rounded-md border border-green-6 bg-green-3/70 px-3 py-3 text-xs text-green-12">
+										<div className="font-medium">Share link ready</div>
+										<div className="mt-1 leading-snug">
+											If it did not open automatically, open it here.
+										</div>
+										<Button
+											variant="blue"
+											size="sm"
+											className="mt-3 w-full"
+											onClick={openCompletedShareUrl}
+										>
+											Open Share Link
+										</Button>
+									</div>
+								)}
 								{phase === "idle" && recoveredDownloads.length > 0 && (
 									<div className="rounded-md border border-blue-6 bg-blue-3/60 px-3 py-2">
 										<div className="text-xs font-medium text-blue-12">

apps/web/app/(org)/dashboard/caps/components/web-recorder-dialog/web-recorder-utils.ts

@@ -129,6 +129,14 @@ export const shouldPreferStreamingUpload = (
 	return brandMatch || /(chrome|chromium|edg|opr|opera|brave)/i.test(userAgent);
 };
 
+export const openShareUrlInNewTab = (shareUrl?: string | null) => {
+	if (!shareUrl || typeof window === "undefined") {
+		return false;
+	}
+
+	return window.open(shareUrl, "_blank", "noopener,noreferrer") !== null;
+};
+
 export const selectRecordingPipelineFromSupport = (
 	hasAudio: boolean,
 	isMimeSupported: (candidate: string) => boolean,