Add export preview render time and frame estimates

Author: richiemcilroy

apps/desktop/src-tauri/src/export.rs

@@ -184,6 +184,8 @@ pub struct ExportPreviewResult {
     pub estimated_size_mb: f64,
     pub actual_width: u32,
     pub actual_height: u32,
+    pub frame_render_time_ms: f64,
+    pub total_frames: u32,
 }
 
 fn bpp_to_jpeg_quality(bpp: f32) -> u8 {
@@ -201,6 +203,7 @@ pub async fn generate_export_preview(
 ) -> Result<ExportPreviewResult, String> {
     use base64::{Engine, engine::general_purpose::STANDARD};
     use cap_editor::create_segments;
+    use std::time::Instant;
 
     let recording_meta = RecordingMeta::load_for_project(&project_path)
         .map_err(|e| format!("Failed to load recording meta: {e}"))?;
@@ -248,6 +251,8 @@ pub async fn generate_export_preview(
         .iter()
         .find(|v| v.index == segment.recording_clip);
 
+    let render_start = Instant::now();
+
     let segment_frames = render_segment
         .decoders
         .get_frames(
@@ -287,6 +292,8 @@ pub async fn generate_export_preview(
         .await
         .map_err(|e| format!("Failed to render frame: {e}"))?;
 
+    let frame_render_time_ms = render_start.elapsed().as_secs_f64() * 1000.0;
+
     let width = frame.width;
     let height = frame.height;
 
@@ -320,6 +327,7 @@ pub async fn generate_export_preview(
     } else {
         metadata.duration
     };
+    let total_frames = (duration_seconds * fps_f64).ceil() as u32;
 
     let video_bitrate = total_pixels * settings.compression_bpp as f64 * fps_f64;
     let audio_bitrate = 192_000.0;
@@ -331,6 +339,8 @@ pub async fn generate_export_preview(
         estimated_size_mb,
         actual_width: width,
         actual_height: height,
+        frame_render_time_ms,
+        total_frames,
     })
 }
 
@@ -343,6 +353,7 @@ pub async fn generate_export_preview_fast(
     settings: ExportPreviewSettings,
 ) -> Result<ExportPreviewResult, String> {
     use base64::{Engine, engine::general_purpose::STANDARD};
+    use std::time::Instant;
 
     let project_config = editor.project_config.1.borrow().clone();
 
@@ -356,6 +367,8 @@ pub async fn generate_export_preview_fast(
         .iter()
         .find(|v| v.index == segment.recording_clip);
 
+    let render_start = Instant::now();
+
     let segment_frames = segment_media
         .decoders
         .get_frames(
@@ -390,6 +403,8 @@ pub async fn generate_export_preview_fast(
         .await
         .map_err(|e| format!("Failed to render frame: {e}"))?;
 
+    let frame_render_time_ms = render_start.elapsed().as_secs_f64() * 1000.0;
+
     let width = frame.width;
     let height = frame.height;
 
@@ -418,6 +433,7 @@ pub async fn generate_export_preview_fast(
     let fps_f64 = settings.fps as f64;
 
     let duration_seconds = editor.recordings.duration();
+    let total_frames = (duration_seconds * fps_f64).ceil() as u32;
 
     let video_bitrate = total_pixels * settings.compression_bpp as f64 * fps_f64;
     let audio_bitrate = 192_000.0;
@@ -429,5 +445,7 @@ pub async fn generate_export_preview_fast(
         estimated_size_mb,
         actual_width: width,
         actual_height: height,
+        frame_render_time_ms,
+        total_frames,
     })
 }

apps/desktop/src/routes/editor/ExportPage.tsx

@@ -2,11 +2,7 @@ import { Button } from "@cap/ui-solid";
 import { RadioGroup as KRadioGroup } from "@kobalte/core/radio-group";
 import { debounce } from "@solid-primitives/scheduled";
 import { makePersisted } from "@solid-primitives/storage";
-import {
-	createMutation,
-	createQuery,
-	keepPreviousData,
-} from "@tanstack/solid-query";
+import { createMutation } from "@tanstack/solid-query";
 import { Channel } from "@tauri-apps/api/core";
 import { CheckMenuItem, Menu } from "@tauri-apps/api/menu";
 import { ask, save as saveDialog } from "@tauri-apps/plugin-dialog";
@@ -102,7 +98,7 @@ export const EXPORT_TO_OPTIONS = [
 		description: "Copy to paste anywhere",
 	},
 	{
-		label: "Link",
+		label: "Shareable Link",
 		value: "link",
 		icon: IconCapLink,
 		description: "Share via Cap cloud",
@@ -195,11 +191,33 @@ export function ExportPage() {
 
 	const [previewUrl, setPreviewUrl] = createSignal<string | null>(null);
 	const [previewLoading, setPreviewLoading] = createSignal(false);
-
-	const updateSettings: typeof setSettings = (...args) => {
+	const [renderEstimate, setRenderEstimate] = createSignal<{
+		frameRenderTimeMs: number;
+		totalFrames: number;
+		estimatedSizeMb: number;
+	} | null>(null);
+
+	type EstimateCacheKey = string;
+	const estimateCache = new Map<
+		EstimateCacheKey,
+		{ frameRenderTimeMs: number; totalFrames: number; estimatedSizeMb: number }
+	>();
+
+	const getEstimateCacheKey = (
+		fps: number,
+		width: number,
+		height: number,
+		bpp: number,
+	): EstimateCacheKey => `${fps}-${width}-${height}-${bpp}`;
+
+	const updateSettings: typeof setSettings = ((
+		...args: Parameters<typeof setSettings>
+	) => {
 		setPreviewLoading(true);
-		return setSettings(...args);
-	};
+		return (setSettings as (...args: Parameters<typeof setSettings>) => void)(
+			...args,
+		);
+	}) as typeof setSettings;
 	const [previewDialogOpen, setPreviewDialogOpen] = createSignal(false);
 	const [compressionBpp, setCompressionBpp] = createSignal(
 		COMPRESSION_TO_BPP[_settings.compression] ?? 0.15,
@@ -223,6 +241,13 @@ export function ExportPage() {
 			resHeight: number,
 			bpp: number,
 		) => {
+			const cacheKey = getEstimateCacheKey(fps, resWidth, resHeight, bpp);
+			const cachedEstimate = estimateCache.get(cacheKey);
+
+			if (cachedEstimate) {
+				setRenderEstimate(cachedEstimate);
+			}
+
 			try {
 				const result = await commands.generateExportPreviewFast(frameTime, {
 					fps,
@@ -238,6 +263,17 @@ export function ExportPage() {
 				);
 				const blob = new Blob([byteArray], { type: "image/jpeg" });
 				setPreviewUrl(URL.createObjectURL(blob));
+
+				const newEstimate = {
+					frameRenderTimeMs: result.frame_render_time_ms,
+					totalFrames: result.total_frames,
+					estimatedSizeMb: result.estimated_size_mb,
+				};
+
+				if (!cachedEstimate) {
+					estimateCache.set(cacheKey, newEstimate);
+				}
+				setRenderEstimate(newEstimate);
 			} catch (e) {
 				console.error("Failed to generate preview:", e);
 			} finally {
@@ -334,39 +370,6 @@ export function ExportPage() {
 		}
 	};
 
-	const exportEstimates = createQuery(() => ({
-		placeholderData: keepPreviousData,
-		queryKey: [
-			"exportEstimates",
-			{
-				format: settings.format,
-				resolution: {
-					x: settings.resolution.width,
-					y: settings.resolution.height,
-				},
-				fps: settings.fps,
-				compression: settings.compression,
-			},
-		] as const,
-		queryFn: ({ queryKey: [_, { format, resolution, fps, compression }] }) => {
-			const exportSettings =
-				format === "Mp4"
-					? {
-							format: "Mp4" as const,
-							fps,
-							resolution_base: resolution,
-							compression,
-						}
-					: {
-							format: "Gif" as const,
-							fps,
-							resolution_base: resolution,
-							quality: null,
-						};
-			return commands.getExportEstimates(projectPath, exportSettings);
-		},
-	}));
-
 	const copy = createMutation(() => ({
 		mutationFn: async () => {
 			setIsCancelled(false);
@@ -653,33 +656,68 @@ export function ExportPage() {
 							</Show>
 						</div>
 
-						<Suspense>
-							<Show when={exportEstimates.data}>
-								{(est) => (
+						<Show
+							when={!previewLoading() && renderEstimate()}
+							fallback={
+								<div class="flex items-center justify-center gap-4 mt-4 text-xs text-gray-11">
+									<span class="flex items-center gap-1.5">
+										<IconLucideClock class="size-3.5" />
+										<span class="h-3.5 w-8 bg-gray-4 rounded animate-pulse" />
+									</span>
+									<span class="flex items-center gap-1.5">
+										<IconLucideMonitor class="size-3.5" />
+										<span class="h-3.5 w-16 bg-gray-4 rounded animate-pulse" />
+									</span>
+									<span class="flex items-center gap-1.5">
+										<IconLucideHardDrive class="size-3.5" />
+										<span class="h-3.5 w-12 bg-gray-4 rounded animate-pulse" />
+									</span>
+									<span class="flex items-center gap-1.5">
+										<IconLucideZap class="size-3.5" />
+										<span class="h-3.5 w-10 bg-gray-4 rounded animate-pulse" />
+									</span>
+								</div>
+							}
+						>
+							{(est) => {
+								const data = est();
+								const durationSeconds = data.totalFrames / settings.fps;
+
+								const exportSpeedMultiplier =
+									settings.format === "Gif" ? 4 : 10;
+								const totalTimeMs =
+									(data.frameRenderTimeMs * data.totalFrames) /
+									exportSpeedMultiplier;
+								const estimatedTimeSeconds = Math.max(1, totalTimeMs / 1000);
+
+								const sizeMultiplier = settings.format === "Gif" ? 0.7 : 0.5;
+								const estimatedSizeMb = data.estimatedSizeMb * sizeMultiplier;
+
+								return (
 									<div class="flex items-center justify-center gap-4 mt-4 text-xs text-gray-11">
 										<span class="flex items-center gap-1.5">
 											<IconLucideClock class="size-3.5" />
-											{formatDuration(Math.round(est().duration_seconds))}
+											{formatDuration(Math.round(durationSeconds))}
 										</span>
 										<span class="flex items-center gap-1.5">
 											<IconLucideMonitor class="size-3.5" />
 											{settings.resolution.width}×{settings.resolution.height}
 										</span>
 										<span class="flex items-center gap-1.5">
 											<IconLucideHardDrive class="size-3.5" />~
-											{est().estimated_size_mb.toFixed(1)} MB
+											{estimatedSizeMb.toFixed(1)} MB
 										</span>
 										<span class="flex items-center gap-1.5">
 											<IconLucideZap class="size-3.5" />~
-											{formatDuration(Math.round(est().estimated_time_seconds))}
+											{formatDuration(Math.round(estimatedTimeSeconds))}
 										</span>
 									</div>
-								)}
-							</Show>
-						</Suspense>
+								);
+							}}
+						</Show>
 					</div>
 
-					<div class="w-72 border-l border-gray-3 flex flex-col bg-gray-1 dark:bg-gray-2">
+					<div class="w-[340px] border-l border-gray-3 flex flex-col bg-gray-1 dark:bg-gray-2">
 						<div class="flex-1 overflow-y-auto p-4 space-y-5">
 							<Field name="Destination" icon={<IconCapUpload class="size-4" />}>
 								<KRadioGroup
@@ -1006,15 +1044,17 @@ export function ExportPage() {
 							<span>
 								{settings.resolution.width}×{settings.resolution.height}
 							</span>
-							<Suspense>
-								<Show when={exportEstimates.data}>
-									{(est) => (
+							<Show when={renderEstimate()}>
+								{(est) => {
+									const sizeMultiplier = settings.format === "Gif" ? 0.7 : 0.5;
+									return (
 										<span>
-											Estimated size: {est().estimated_size_mb.toFixed(1)} MB
+											Estimated size:{" "}
+											{(est().estimatedSizeMb * sizeMultiplier).toFixed(1)} MB
 										</span>
-									)}
-								</Show>
-							</Suspense>
+									);
+								}}
+							</Show>
 						</div>
 					</div>
 				</Dialog.Root>

apps/desktop/src/utils/tauri.ts

@@ -414,7 +414,7 @@ export type DownloadProgress = { progress: number; message: string }
 export type EditorStateChanged = { playhead_position: number }
 export type ExportCompression = "Minimal" | "Social" | "Web" | "Potato"
 export type ExportEstimates = { duration_seconds: number; estimated_time_seconds: number; estimated_size_mb: number }
-export type ExportPreviewResult = { jpeg_base64: string; estimated_size_mb: number; actual_width: number; actual_height: number }
+export type ExportPreviewResult = { jpeg_base64: string; estimated_size_mb: number; actual_width: number; actual_height: number; frame_render_time_ms: number; total_frames: number }
 export type ExportPreviewSettings = { fps: number; resolution_base: XY<number>; compression_bpp: number }
 export type ExportSettings = ({ format: "Mp4" } & Mp4ExportSettings) | ({ format: "Gif" } & GifExportSettings)
 export type FileType = "recording" | "screenshot"