rendering improvements + mac instant mode pausing

Author: Brendonovich

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

@@ -533,16 +533,23 @@ enum CurrentRecordingTarget {
     Area { screen: u32, bounds: Bounds },
 }
 
+#[derive(Serialize, Type)]
+#[serde(rename_all = "camelCase")]
+struct CurrentRecording {
+    target: CurrentRecordingTarget,
+    r#type: RecordingType,
+}
+
 #[tauri::command]
 #[specta::specta]
 async fn get_current_recording(
     state: MutableState<'_, App>,
-) -> Result<JsonValue<Option<CurrentRecordingTarget>>, ()> {
+) -> Result<JsonValue<Option<CurrentRecording>>, ()> {
     let state = state.read().await;
     Ok(JsonValue::new(&state.current_recording.as_ref().map(|r| {
         let bounds = r.bounds();
 
-        match r.capture_target() {
+        let target = match r.capture_target() {
             ScreenCaptureTarget::Screen { id } => CurrentRecordingTarget::Screen { id: *id },
             ScreenCaptureTarget::Window { id } => CurrentRecordingTarget::Window {
                 id: *id,
@@ -552,6 +559,14 @@ async fn get_current_recording(
                 screen: *screen,
                 bounds: bounds.clone(),
             },
+        };
+
+        CurrentRecording {
+            target,
+            r#type: match r {
+                InProgressRecording::Instant { .. } => RecordingType::Instant,
+                InProgressRecording::Studio { .. } => RecordingType::Studio,
+            },
         }
     })))
 }

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

@@ -91,13 +91,13 @@ pub fn create_tray(app: &AppHandle) -> tauri::Result<()> {
                 true,
                 None::<&str>,
             )?,
-            &MenuItem::with_id(
-                app,
-                TrayItem::PreviousScreenshots,
-                "Previous Screenshots",
-                true,
-                None::<&str>,
-            )?,
+            // &MenuItem::with_id(
+            //     app,
+            //     TrayItem::PreviousScreenshots,
+            //     "Previous Screenshots",
+            //     true,
+            //     None::<&str>,
+            // )?,
             &PredefinedMenuItem::separator(app)?,
             &MenuItem::with_id(app, TrayItem::OpenSettings, "Settings", true, None::<&str>)?,
             &MenuItem::with_id(app, TrayItem::Quit, "Quit Cap", true, None::<&str>)?,

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

@@ -214,6 +214,8 @@ export default function () {
     ),
   });
 
+  const auth = authStore.createQuery();
+
   return (
     <div class="flex justify-center flex-col p-[1rem] gap-[0.75rem] text-[0.875rem] font-[400] bg-[--gray-50] h-full text-[--text-primary]">
       {initialize()}
@@ -222,7 +224,11 @@ export default function () {
           <a
             class="*:w-[92px] *:h-auto text-[--text-primary]"
             target="_blank"
-            href={import.meta.env.VITE_SERVER_URL}
+            href={
+              auth.data
+                ? `${import.meta.env.VITE_SERVER_URL}/dashboard`
+                : import.meta.env.VITE_SERVER_URL
+            }
           >
             <IconCapLogoFullDark class="hidden dark:block" />
             <IconCapLogoFull class="block dark:hidden" />
@@ -279,14 +285,14 @@ export default function () {
             </>
           )}
         </Button>
-        <Button
+        {/* <Button
           disabled={isRecording()}
           variant="secondary"
           size="md"
           onClick={() => commands.takeScreenshot()}
         >
           <IconLucideCamera class="w-[1rem] h-[1rem]" />
-        </Button>
+        </Button> */}
       </div>
     </div>
   );
@@ -327,6 +333,7 @@ import { Transition } from "solid-transition-group";
 
 import { apiClient } from "~/utils/web-api";
 import { useWindowChrome } from "./Context";
+import { authStore } from "~/store";
 
 let hasChecked = false;
 function createUpdateCheck() {

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

@@ -78,12 +78,12 @@ export default function Settings(props: RouteSectionProps) {
                   name: "Previous Recordings",
                   icon: IconLucideSquarePlay,
                 },
-                {
-                  type: "link",
-                  href: "screenshots",
-                  name: "Previous Screenshots",
-                  icon: IconLucideCamera,
-                },
+                // {
+                //   type: "link",
+                //   href: "screenshots",
+                //   name: "Previous Screenshots",
+                //   icon: IconLucideCamera,
+                // },
                 {
                   type: "link",
                   href: "integrations",

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

@@ -73,13 +73,11 @@ export default function () {
                 }
               >
                 <Match when={updateStatus()?.type === "done"}>
-                  <div class="flex flex-col gap-4">
+                  <div class="flex flex-col gap-4 items-center">
                     <p class="text-[--text-tertiary]">
                       Update has been installed. Restart Cap to finish updating.
                     </p>
-                    <div class="flex flex-row">
-                      <Button onClick={() => relaunch()}>Restart Now</Button>
-                    </div>
+                    <Button onClick={() => relaunch()}>Restart Now</Button>
                   </div>
                 </Match>
                 <Match

apps/desktop/src/routes/in-progress-recording.tsx

@@ -1,54 +1,28 @@
 import { createEffect, createSignal, type ComponentProps } from "solid-js";
 import { cx } from "cva";
-
-import { commands, events } from "~/utils/tauri";
+import { type as ostype } from "@tauri-apps/plugin-os";
 import { createTimer } from "@solid-primitives/timer";
 import { createMutation } from "@tanstack/solid-query";
+import { createStore, produce } from "solid-js/store";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+
+import { commands, events } from "~/utils/tauri";
 import {
   createOptionsQuery,
   createCurrentRecordingQuery,
 } from "~/utils/queries";
-import { createStore, produce } from "solid-js/store";
 
-const audioLevelStore = {
-  level: 0,
-  initialized: false,
-  init() {
-    if (this.initialized) return;
-
-    events.audioInputLevelChange.listen((dbs) => {
-      const DB_MIN = -60;
-      const DB_MAX = 0;
-
-      const dbValue = dbs.payload ?? DB_MIN;
-      const normalizedLevel = Math.max(
-        0,
-        Math.min(1, (dbValue - DB_MIN) / (DB_MAX - DB_MIN))
-      );
-      this.level = normalizedLevel;
-
-      window.dispatchEvent(
-        new CustomEvent("audioLevelChange", { detail: normalizedLevel })
-      );
-    });
-
-    this.initialized = true;
-  },
-  cleanup() {
-    this.initialized = false;
-    this.level = 0;
-  },
-};
+type State = "recording" | "paused" | "stopped";
 
 export default function () {
   const start = Date.now();
   const [time, setTime] = createSignal(Date.now());
-  const [isPaused, setIsPaused] = createSignal(false);
-  const [stopped, setStopped] = createSignal(false);
-  const [audioLevel, setAudioLevel] = createSignal<number>(0);
+  const [state, setState] = createSignal<State>("recording");
   const currentRecording = createCurrentRecordingQuery();
   const { options } = createOptionsQuery();
 
+  const audioLevel = createAudioInputLevel();
+
   const [pauseResumes, setPauseResumes] = createStore<
     | []
     | [
@@ -57,66 +31,42 @@ export default function () {
       ]
   >([]);
 
-  const isAudioEnabled = () => {
-    return options.data?.micName != null;
-  };
-
   createTimer(
     () => {
-      if (stopped() || isPaused()) return;
+      if (state() !== "recording") return;
       setTime(Date.now());
     },
     100,
     setInterval
   );
 
   createEffect(() => {
-    setTime(Date.now());
-  });
-
-  // Single effect to handle audio initialization and cleanup
-  createEffect(() => {
-    if (!isAudioEnabled()) {
-      audioLevelStore.cleanup();
-      setAudioLevel(0);
-      return;
-    }
-
-    audioLevelStore.init();
-    setAudioLevel(audioLevelStore.level);
-
-    const handler = (e: CustomEvent) => {
-      setAudioLevel(e.detail);
-    };
-
-    window.addEventListener("audioLevelChange", handler as EventListener);
-    return () => {
-      window.removeEventListener("audioLevelChange", handler as EventListener);
-    };
+    if (!currentRecording.isPending && currentRecording.data === undefined)
+      getCurrentWindow().close();
   });
 
   const stopRecording = createMutation(() => ({
     mutationFn: async () => {
-      setStopped(true);
+      setState("stopped");
       await commands.stopRecording();
     },
   }));
 
   const togglePause = createMutation(() => ({
     mutationFn: async () => {
-      if (isPaused()) {
+      if (state() === "paused") {
         await commands.resumeRecording();
         setPauseResumes(
           produce((a) => {
             if (a.length === 0) return a;
             a[a.length - 1].resume = Date.now();
           })
         );
-        setIsPaused(false);
+        setState("recording");
       } else {
         await commands.pauseRecording();
         setPauseResumes((a) => [...a, { pause: Date.now() }]);
-        setIsPaused(true);
+        setState("paused");
       }
       setTime(Date.now());
     },
@@ -125,8 +75,7 @@ export default function () {
   const restartRecording = createMutation(() => ({
     mutationFn: async () => {
       await events.requestRestartRecording.emit();
-      setStopped(false);
-      setIsPaused(false);
+      setState("recording");
       setTime(Date.now());
     },
   }));
@@ -149,14 +98,14 @@ export default function () {
           onClick={() => stopRecording.mutate()}
         >
           <IconCapStopCircle />
-          <span class="font-[500] text-[0.875rem]">
+          <span class="font-[500] text-[0.875rem] tabular-nums">
             {formatTime(adjustedTime() / 1000)}
           </span>
         </button>
 
         <div class="flex items-center gap-1">
           <div class="relative h-8 w-8 flex items-center justify-center">
-            {isAudioEnabled() ? (
+            {options.data?.micName != null ? (
               <>
                 <IconCapMicrophone class="size-5 text-gray-400" />
                 <div class="absolute bottom-1 left-1 right-1 h-0.5 bg-gray-400 overflow-hidden rounded-full">
@@ -176,12 +125,19 @@ export default function () {
             )}
           </div>
 
-          <ActionButton
-            disabled={togglePause.isPending}
-            onClick={() => togglePause.mutate()}
-          >
-            {isPaused() ? <IconCapPlayCircle /> : <IconCapPauseCircle />}
-          </ActionButton>
+          {(currentRecording.data?.type === "studio" ||
+            ostype() === "macos") && (
+            <ActionButton
+              disabled={togglePause.isPending}
+              onClick={() => togglePause.mutate()}
+            >
+              {state() === "paused" ? (
+                <IconCapPlayCircle />
+              ) : (
+                <IconCapPauseCircle />
+              )}
+            </ActionButton>
+          )}
 
           <ActionButton
             disabled={restartRecording.isPending}
@@ -218,7 +174,25 @@ function ActionButton(props: ComponentProps<"button">) {
 
 function formatTime(secs: number) {
   const minutes = Math.floor(secs / 60);
-  const seconds = Math.round(secs % 60);
+  const seconds = Math.floor(secs % 60);
 
   return `${minutes}:${seconds.toString().padStart(2, "0")}`;
 }
+
+function createAudioInputLevel() {
+  const [level, setLevel] = createSignal(0);
+
+  events.audioInputLevelChange.listen((dbs) => {
+    const DB_MIN = -60;
+    const DB_MAX = 0;
+
+    const dbValue = dbs.payload ?? DB_MIN;
+    const normalizedLevel = Math.max(
+      0,
+      Math.min(1, (dbValue - DB_MIN) / (DB_MAX - DB_MIN))
+    );
+    setLevel(normalizedLevel);
+  });
+
+  return level;
+}

apps/desktop/src/routes/window-capture-occluder.tsx

@@ -16,11 +16,11 @@ export default function () {
 
   const bounds = () => {
     if (!currentRecording.data) return;
-    if ("window" in currentRecording.data) {
-      return currentRecording.data.window.bounds;
+    if ("window" in currentRecording.data.target) {
+      return currentRecording.data.target.window.bounds;
     }
-    if ("area" in currentRecording.data) {
-      return currentRecording.data.area.bounds;
+    if ("area" in currentRecording.data.target) {
+      return currentRecording.data.target.area.bounds;
     }
   };
 

apps/desktop/src/utils/tauri.ts

@@ -50,7 +50,7 @@ async removeFakeWindow(name: string) : Promise<null> {
 async focusCapturesPanel() : Promise<void> {
     await TAURI_INVOKE("focus_captures_panel");
 },
-async getCurrentRecording() : Promise<JsonValue<CurrentRecordingTarget | null>> {
+async getCurrentRecording() : Promise<JsonValue<CurrentRecording | null>> {
     return await TAURI_INVOKE("get_current_recording");
 },
 async exportVideo(videoId: string, progress: TAURI_CHANNEL<RenderProgress>, force: boolean, fps: number, resolutionBase: XY<number>) : Promise<string> {
@@ -250,6 +250,7 @@ export type CaptureScreen = { id: number; name: string; refresh_rate: number }
 export type CaptureWindow = { id: number; owner_name: string; name: string; bounds: Bounds; refresh_rate: number }
 export type CommercialLicense = { licenseKey: string; expiryDate: number | null; refresh: number; activatedOn: number }
 export type Crop = { position: XY<number>; size: XY<number> }
+export type CurrentRecording = { target: CurrentRecordingTarget; type: RecordingType }
 export type CurrentRecordingChanged = null
 export type CurrentRecordingTarget = { window: { id: number; bounds: Bounds } } | { screen: { id: number } } | { area: { screen: number; bounds: Bounds } }
 export type CursorAnimationStyle = "regular" | "slow" | "fast"