devtools in prod + various js logs

apps/desktop/src-tauri/Cargo.toml

@@ -23,6 +23,7 @@ tauri = { workspace = true, features = [
 	"protocol-asset",
 	"tray-icon",
 	"image-png",
+	"devtools",
 ] }
 tauri-specta = { version = "=2.0.0-rc.20", features = ["derive", "typescript"] }
 tauri-plugin-dialog = "2.2.0"
@@ -87,7 +88,11 @@ dirs = "6.0.0"
 [target.'cfg(target_os = "macos")'.dependencies]
 core-graphics = "0.24.0"
 core-foundation = "0.10.0"
-objc2-app-kit = { version = "0.2.2", features = ["NSWindow", "NSResponder", "NSHapticFeedback"] }
+objc2-app-kit = { version = "0.2.2", features = [
+	"NSWindow",
+	"NSResponder",
+	"NSHapticFeedback",
+] }
 cocoa = "0.26.0"
 objc = "0.2.7"
 swift-rs = "1.0.6"

apps/desktop/src/App.tsx

@@ -68,7 +68,17 @@ function Inner() {
               currentWindow.show();
             });
 
-            return <Suspense>{props.children}</Suspense>;
+            return (
+              <Suspense
+                fallback={
+                  (() => {
+                    console.log("Root suspense fallback showing");
+                  }) as any
+                }
+              >
+                {props.children}
+              </Suspense>
+            );
           }}
         >
           <FileRoutes />

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

@@ -16,6 +16,7 @@ export default function (props: RouteSectionProps) {
   let unlistenResize: UnlistenFn | undefined;
 
   onMount(async () => {
+    console.log("window chrome mounted");
     unlistenResize = await initializeTitlebar();
     if (location.pathname === "/") getCurrentWindow().show();
   });
@@ -35,10 +36,25 @@ export default function (props: RouteSectionProps) {
         enterClass="opacity-0"
         exitToClass="opacity-0"
         > */}
-      <Suspense fallback={<AbsoluteInsetLoader />}>
+      <Suspense
+        fallback={
+          (() => {
+            console.log("Outer window chrome suspense fallback");
+            return <AbsoluteInsetLoader />;
+          }) as any
+        }
+      >
         <Inner>
           {/* prevents flicker idk */}
-          <Suspense>{props.children}</Suspense>
+          <Suspense
+            fallback={
+              (() => {
+                console.log("Inner window chrome suspense fallback");
+              }) as any
+            }
+          >
+            {props.children}
+          </Suspense>
         </Inner>
       </Suspense>
       {/* </Transition> */}

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

@@ -51,6 +51,7 @@ import {
 } from "../editor/ui";
 
 const getAuth = cache(async () => {
+  throw new Error("");
   const value = await authStore.get();
   const local = import.meta.env.VITE_LOCAL_MODE === "true";
 
@@ -89,6 +90,7 @@ export default function () {
   createUpdateCheck();
 
   onMount(async () => {
+    console.log("main mounted");
     if (options.data?.cameraLabel && options.data.cameraLabel !== "No Camera") {
       const cameraWindowActive = await commands.isCameraWindowOpen();
 
@@ -153,6 +155,8 @@ export default function () {
     });
   });
 
+  console.log("main rendering");
+
   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]">
       <div class="flex items-center justify-between pb-[0.25rem]">
@@ -167,10 +171,11 @@ export default function () {
                 await commands.showWindow("Upgrade");
               }
             }}
-            class={`text-[0.6rem] ${isUpgraded()
+            class={`text-[0.6rem] ${
+              isUpgraded()
                 ? "bg-[--blue-400] text-gray-50 dark:text-gray-500"
                 : "bg-gray-200 cursor-pointer hover:bg-gray-300"
-              } rounded-lg px-1.5 py-0.5`}
+            } rounded-lg px-1.5 py-0.5`}
           >
             {isUpgraded() ? "Pro" : "Upgrade to Pro"}
           </span>
@@ -451,7 +456,7 @@ function TargetSelects(props: {
             }
           >
             <Show when={isTargetScreenOrArea()}>
-              {(targetScreenOrArea) =>
+              {(targetScreenOrArea) => (
                 <button
                   type="button"
                   disabled={!targetScreenOrArea}
@@ -466,13 +471,14 @@ function TargetSelects(props: {
                   )}
                 >
                   <IconCapCrop
-                    class={`w-[1rem] h-[1rem] ${areaSelection.pending
+                    class={`w-[1rem] h-[1rem] ${
+                      areaSelection.pending
                         ? "animate-gentle-bounce duration-1000 text-gray-500 mt-1"
                         : ""
-                      }`}
+                    }`}
                   />
                 </button>
-              }
+              )}
             </Show>
           </Transition>
         </Tooltip.Trigger>
@@ -481,16 +487,17 @@ function TargetSelects(props: {
             {isTargetCaptureArea()
               ? "Remove selection"
               : areaSelection.pending
-                ? "Selecting area..."
-                : "Select area"}
+              ? "Selecting area..."
+              : "Select area"}
             <Tooltip.Arrow class="fill-gray-500" />
           </Tooltip.Content>
         </Tooltip.Portal>
       </Tooltip.Root>
 
       <div
-        class={`flex flex-row items-center rounded-[0.5rem] relative border h-8 transition-all duration-500 ${isTargetScreenOrArea() ? "ml-[2.4rem]" : ""
-          }`}
+        class={`flex flex-row items-center rounded-[0.5rem] relative border h-8 transition-all duration-500 ${
+          isTargetScreenOrArea() ? "ml-[2.4rem]" : ""
+        }`}
         style={{
           "transition-timing-function":
             "cubic-bezier(0.785, 0.135, 0.15, 0.86)",
@@ -873,16 +880,16 @@ function TargetSelect<T extends { id: number; name: string }>(props: {
         as={
           props.options.length <= 1
             ? (p) => (
-              <button
-                onClick={() => {
-                  props.onChange(props.options[0]);
-                }}
-                data-selected={props.selected}
-                class={p.class}
-              >
-                <span class="truncate">{props.placeholder}</span>
-              </button>
-            )
+                <button
+                  onClick={() => {
+                    props.onChange(props.options[0]);
+                  }}
+                  data-selected={props.selected}
+                  class={p.class}
+                >
+                  <span class="truncate">{props.placeholder}</span>
+                </button>
+              )
             : undefined
         }
         class="flex-1 text-gray-400 py-1 z-10 data-[selected='true']:text-gray-500 peer focus:outline-none transition-colors duration-100 w-full text-nowrap overflow-hidden px-2 flex gap-2 items-center justify-center"
@@ -956,8 +963,8 @@ function TargetSelectInfoPill<T>(props: {
       {!props.permissionGranted
         ? "Request Permission"
         : props.value !== null
-          ? "On"
-          : "Off"}
+        ? "On"
+        : "Off"}
     </button>
   );
 }

apps/desktop/src/utils/queries.ts

@@ -11,33 +11,50 @@ import { createEffect, createMemo } from "solid-js";
 import { makePersisted } from "@solid-primitives/storage";
 import { FPS } from "~/routes/editor/context";
 
+function debugFetch<T>(name: string, doFetch: () => Promise<T>) {
+  return () => {
+    console.log(`fetching '${name}'`);
+    return doFetch()
+      .then((s) => {
+        console.log(`fetched '${name}'`);
+        return s;
+      })
+      .catch((e) => {
+        console.log(`failed to fetch '${name}'`);
+        throw e;
+      });
+  };
+}
+
 export const listWindows = queryOptions({
   queryKey: ["capture", "windows"] as const,
-  queryFn: () => commands.listCaptureWindows(),
+  queryFn: debugFetch("captureWindows", () => commands.listCaptureWindows()),
   reconcile: "id",
   refetchInterval: 1000,
 });
 
 export const listScreens = queryOptions({
   queryKey: ["capture", "screens"] as const,
-  queryFn: () => commands.listCaptureScreens(),
+  queryFn: debugFetch("captureScreens", () => commands.listCaptureScreens()),
   reconcile: "id",
   refetchInterval: 1000,
 });
 
 const getOptions = queryOptions({
   queryKey: ["recordingOptions"] as const,
-  queryFn: () => commands.getRecordingOptions(),
+  queryFn: debugFetch("recordingOptions", () => commands.getRecordingOptions()),
 });
 
 const getCurrentRecording = queryOptions({
   queryKey: ["currentRecording"] as const,
-  queryFn: () => commands.getCurrentRecording().then((d) => d[0]),
+  queryFn: debugFetch("recordingOptions", () =>
+    commands.getCurrentRecording().then((d) => d[0])
+  ),
 });
 
 const listVideoDevices = queryOptions({
   queryKey: ["videoDevices"] as const,
-  queryFn: () => commands.listCameras(),
+  queryFn: debugFetch("recordingOptions", () => commands.listCameras()),
   refetchInterval: 1000,
 });
 
@@ -55,10 +72,10 @@ export function createVideoDevicesQuery() {
 
 export const listAudioDevices = queryOptions({
   queryKey: ["audioDevices"] as const,
-  queryFn: async () => {
+  queryFn: debugFetch("audioDevices", async () => {
     const devices = await commands.listAudioDevices();
     return devices.map((name) => ({ name, deviceId: name }));
-  },
+  }),
   reconcile: "name",
   refetchInterval: 1000,
   gcTime: 0,
@@ -67,7 +84,7 @@ export const listAudioDevices = queryOptions({
 
 export const getPermissions = queryOptions({
   queryKey: ["permissionsOS"] as const,
-  queryFn: () => commands.doPermissionsCheck(true),
+  queryFn: debugFetch("permissions", () => commands.doPermissionsCheck(true)),
   refetchInterval: 1000,
 });
 

apps/desktop/src/utils/titlebar-state.ts

@@ -31,6 +31,7 @@ const [state, setState] = createStore<TitlebarState>({
 });
 
 async function initializeTitlebar(): Promise<UnlistenFn | undefined> {
+  console.log("initailizing titlebar");
   if (ostype() === "macos") return;
   const currentWindow = getCurrentWindow();
   const resizable = await currentWindow.isResizable();