feat: Implement resolution picker for Instant Mode

Author: richiemcilroy

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

@@ -31,6 +31,27 @@ pub enum PostDeletionBehaviour {
     ReopenRecordingWindow,
 }
 
+#[derive(Default, Serialize, Deserialize, Type, Debug, Clone, Copy, PartialEq, Eq)]
+#[serde(rename_all = "camelCase")]
+pub enum InstantModeResolution {
+    #[default]
+    Fhd1080,
+    Hd720,
+    Qhd1440,
+    Uhd2160,
+}
+
+impl InstantModeResolution {
+    pub fn target_height(self) -> u32 {
+        match self {
+            Self::Hd720 => 720,
+            Self::Fhd1080 => 1080,
+            Self::Qhd1440 => 1440,
+            Self::Uhd2160 => 2160,
+        }
+    }
+}
+
 impl MainWindowRecordingStartBehaviour {
     pub fn perform(&self, window: &tauri::WebviewWindow) -> tauri::Result<()> {
         match self {
@@ -120,6 +141,8 @@ pub struct GeneralSettingsStore {
     pub excluded_windows: Vec<WindowExclusion>,
     #[serde(default)]
     pub delete_instant_recordings_after_upload: bool,
+    #[serde(default)]
+    pub instant_mode_resolution: InstantModeResolution,
 }
 
 fn default_enable_native_camera_preview() -> bool {
@@ -180,6 +203,7 @@ impl Default for GeneralSettingsStore {
             post_deletion_behaviour: PostDeletionBehaviour::DoNothing,
             excluded_windows: default_excluded_windows(),
             delete_instant_recordings_after_upload: false,
+            instant_mode_resolution: InstantModeResolution::default(),
         }
     }
 }

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

@@ -46,7 +46,8 @@ use crate::{
     auth::AuthStore,
     create_screenshot,
     general_settings::{
-        self, GeneralSettingsStore, PostDeletionBehaviour, PostStudioRecordingBehaviour,
+        self, GeneralSettingsStore, InstantModeResolution, PostDeletionBehaviour,
+        PostStudioRecordingBehaviour,
     },
     open_external_link,
     presets::PresetsStore,
@@ -537,7 +538,15 @@ pub async fn start_recording(
                             recording_dir.clone(),
                             inputs.capture_target.clone(),
                         )
-                        .with_system_audio(inputs.capture_system_audio);
+                        .with_system_audio(inputs.capture_system_audio)
+                        .with_output_height(
+                            general_settings
+                                .as_ref()
+                                .map(|settings| settings.instant_mode_resolution.target_height())
+                                .unwrap_or_else(|| {
+                                    InstantModeResolution::default().target_height()
+                                }),
+                        );
 
                         #[cfg(target_os = "macos")]
                         {

apps/desktop/src/routes/(window-chrome)/settings/general.tsx

@@ -29,6 +29,7 @@ import {
 	commands,
 	events,
 	type GeneralSettingsStore,
+	type InstantModeResolution,
 	type MainWindowRecordingStartBehaviour,
 	type PostDeletionBehaviour,
 	type PostStudioRecordingBehaviour,
@@ -61,7 +62,11 @@ const getWindowOptionLabel = (window: CaptureWindow) => {
 	return parts.join(" • ");
 };
 
-const createDefaultGeneralSettings = (): GeneralSettingsStore => ({
+type ExtendedGeneralSettingsStore = GeneralSettingsStore & {
+	instantModeResolution?: InstantModeResolution;
+};
+
+const createDefaultGeneralSettings = (): ExtendedGeneralSettingsStore => ({
 	uploadIndividualFiles: false,
 	hideDockIcon: false,
 	autoCreateShareableLink: false,
@@ -71,11 +76,12 @@ const createDefaultGeneralSettings = (): GeneralSettingsStore => ({
 	autoZoomOnClicks: false,
 	custom_cursor_capture2: true,
 	excludedWindows: [],
+	instantModeResolution: "fhd1080",
 });
 
 const deriveInitialSettings = (
 	store: GeneralSettingsStore | null,
-): GeneralSettingsStore => {
+): ExtendedGeneralSettingsStore => {
 	const defaults = createDefaultGeneralSettings();
 	if (!store) return defaults;
 
@@ -85,6 +91,17 @@ const deriveInitialSettings = (
 	};
 };
 
+const INSTANT_MODE_RESOLUTION_OPTIONS = [
+	{ value: "hd720", label: "720p", height: 720 },
+	{ value: "fhd1080", label: "1080p", height: 1080 },
+	{ value: "qhd1440", label: "1440p", height: 1440 },
+	{ value: "uhd2160", label: "4K", height: 2160 },
+] satisfies {
+	value: InstantModeResolution;
+	label: string;
+	height: number;
+}[];
+
 export default function GeneralSettings() {
 	const [store] = createResource(() => generalSettingsStore.get());
 
@@ -167,7 +184,7 @@ function AppearanceSection(props: {
 }
 
 function Inner(props: { initialStore: GeneralSettingsStore | null }) {
-	const [settings, setSettings] = createStore<GeneralSettingsStore>(
+	const [settings, setSettings] = createStore<ExtendedGeneralSettingsStore>(
 		deriveInitialSettings(props.initialStore),
 	);
 
@@ -250,6 +267,9 @@ function Inner(props: { initialStore: GeneralSettingsStore | null }) {
 		return data.filter(isWindowAvailable);
 	});
 
+	const instantResolutionDescription =
+		"Choose the resolution for Instant Mode recordings.";
+
 	const refreshAvailableWindows = async (): Promise<CaptureWindow[]> => {
 		try {
 			const refreshed = (await refetchWindows()) ?? windows() ?? [];
@@ -304,6 +324,7 @@ function Inner(props: { initialStore: GeneralSettingsStore | null }) {
 			| MainWindowRecordingStartBehaviour
 			| PostStudioRecordingBehaviour
 			| PostDeletionBehaviour
+			| InstantModeResolution
 			| number,
 	>(props: {
 		label: string;
@@ -417,6 +438,24 @@ function Inner(props: { initialStore: GeneralSettingsStore | null }) {
 				)}
 
 				<SettingGroup title="Recording">
+					<SelectSettingItem
+						label="Instant mode resolution"
+						description={instantResolutionDescription}
+						value={
+							settings.instantModeResolution ??
+							("fhd1080" as InstantModeResolution)
+						}
+						onChange={(value) =>
+							handleChange(
+								"instantModeResolution",
+								value as InstantModeResolution,
+							)
+						}
+						options={INSTANT_MODE_RESOLUTION_OPTIONS.map((option) => ({
+							text: option.label,
+							value: option.value,
+						}))}
+					/>
 					<SelectSettingItem
 						label="Recording countdown"
 						description="Countdown before recording starts"

apps/desktop/src/utils/tauri.ts

@@ -393,7 +393,7 @@ export type ExportSettings = ({ format: "Mp4" } & Mp4ExportSettings) | ({ format
 export type FileType = "recording" | "screenshot"
 export type Flags = { captions: boolean }
 export type FramesRendered = { renderedCount: number; totalFrames: number; type: "FramesRendered" }
-export type GeneralSettingsStore = { instanceId?: string; uploadIndividualFiles?: boolean; hideDockIcon?: boolean; hapticsEnabled?: boolean; autoCreateShareableLink?: boolean; enableNotifications?: boolean; disableAutoOpenLinks?: boolean; hasCompletedStartup?: boolean; theme?: AppTheme; commercialLicense?: CommercialLicense | null; lastVersion?: string | null; windowTransparency?: boolean; postStudioRecordingBehaviour?: PostStudioRecordingBehaviour; mainWindowRecordingStartBehaviour?: MainWindowRecordingStartBehaviour; custom_cursor_capture2?: boolean; serverUrl?: string; recordingCountdown?: number | null; enableNativeCameraPreview: boolean; autoZoomOnClicks?: boolean; enableNewRecordingFlow: boolean; postDeletionBehaviour?: PostDeletionBehaviour; excludedWindows?: WindowExclusion[]; deleteInstantRecordingsAfterUpload?: boolean }
+export type GeneralSettingsStore = { instanceId?: string; uploadIndividualFiles?: boolean; hideDockIcon?: boolean; hapticsEnabled?: boolean; autoCreateShareableLink?: boolean; enableNotifications?: boolean; disableAutoOpenLinks?: boolean; hasCompletedStartup?: boolean; theme?: AppTheme; commercialLicense?: CommercialLicense | null; lastVersion?: string | null; windowTransparency?: boolean; postStudioRecordingBehaviour?: PostStudioRecordingBehaviour; mainWindowRecordingStartBehaviour?: MainWindowRecordingStartBehaviour; custom_cursor_capture2?: boolean; serverUrl?: string; recordingCountdown?: number | null; enableNativeCameraPreview: boolean; autoZoomOnClicks?: boolean; enableNewRecordingFlow: boolean; postDeletionBehaviour?: PostDeletionBehaviour; excludedWindows?: WindowExclusion[]; deleteInstantRecordingsAfterUpload?: boolean; instantModeResolution?: InstantModeResolution }
 export type GifExportSettings = { fps: number; resolution_base: XY<number>; quality: GifQuality | null }
 export type GifQuality = { 
 /**
@@ -410,6 +410,7 @@ export type Hotkey = { code: string; meta: boolean; ctrl: boolean; alt: boolean;
 export type HotkeyAction = "startStudioRecording" | "startInstantRecording" | "stopRecording" | "restartRecording" | "openRecordingPicker" | "openRecordingPickerDisplay" | "openRecordingPickerWindow" | "openRecordingPickerArea" | "other"
 export type HotkeysConfiguration = { show: boolean }
 export type HotkeysStore = { hotkeys: { [key in HotkeyAction]: Hotkey } }
+export type InstantModeResolution = "fhd1080" | "hd720" | "qhd1440" | "uhd2160"
 export type InstantRecordingMeta = { recording: boolean } | { error: string } | { fps: number; sample_rate: number | null }
 export type JsonValue<T> = [T]
 export type LogicalBounds = { position: LogicalPosition; size: LogicalSize }

crates/recording/src/capture_pipeline.rs

@@ -8,6 +8,8 @@ use anyhow::anyhow;
 use cap_timestamp::Timestamps;
 use scap_targets::bounds::LogicalBounds;
 use std::{path::PathBuf, sync::Arc};
+#[cfg(windows)]
+use windows::Graphics::SizeInt32;
 
 pub trait MakeCapturePipeline: ScreenCaptureFormat + std::fmt::Debug + 'static {
     async fn make_studio_mode_pipeline(
@@ -23,6 +25,7 @@ pub trait MakeCapturePipeline: ScreenCaptureFormat + std::fmt::Debug + 'static {
         system_audio: Option<screen_capture::SystemAudioSourceConfig>,
         mic_feed: Option<Arc<MicrophoneFeedLock>>,
         output_path: PathBuf,
+        scaled_output: Option<(u32, u32)>,
     ) -> anyhow::Result<OutputPipeline>
     where
         Self: Sized;
@@ -49,6 +52,7 @@ impl MakeCapturePipeline for screen_capture::CMSampleBufferCapture {
         system_audio: Option<screen_capture::SystemAudioSourceConfig>,
         mic_feed: Option<Arc<MicrophoneFeedLock>>,
         output_path: PathBuf,
+        scaled_output: Option<(u32, u32)>,
     ) -> anyhow::Result<OutputPipeline> {
         let mut output = OutputPipeline::builder(output_path.clone())
             .with_video::<screen_capture::VideoSource>(screen_capture);
@@ -63,7 +67,7 @@ impl MakeCapturePipeline for screen_capture::CMSampleBufferCapture {
 
         output
             .build::<AVFoundationMp4Muxer>(AVFoundationMp4MuxerConfig {
-                output_height: Some(1080),
+                output_height: scaled_output.map(|(_, height)| height),
             })
             .await
     }
@@ -86,6 +90,7 @@ impl MakeCapturePipeline for screen_capture::Direct3DCapture {
                 d3d_device,
                 bitrate_multiplier: 0.1f32,
                 frame_rate: 30u32,
+                output_size: None,
             })
             .await
     }
@@ -95,6 +100,7 @@ impl MakeCapturePipeline for screen_capture::Direct3DCapture {
         system_audio: Option<screen_capture::SystemAudioSourceConfig>,
         mic_feed: Option<Arc<MicrophoneFeedLock>>,
         output_path: PathBuf,
+        scaled_output: Option<(u32, u32)>,
     ) -> anyhow::Result<OutputPipeline> {
         let d3d_device = screen_capture.d3d_device.clone();
         let mut output_builder = OutputPipeline::builder(output_path.clone())
@@ -115,6 +121,10 @@ impl MakeCapturePipeline for screen_capture::Direct3DCapture {
                 bitrate_multiplier: 0.08f32,
                 frame_rate: 30u32,
                 d3d_device,
+                output_size: scaled_output.map(|(w, h)| SizeInt32 {
+                    Width: w as i32,
+                    Height: h as i32,
+                }),
             })
             .await
     }