move updater to js

apps/desktop/package.json

@@ -36,6 +36,7 @@
     "@tauri-apps/plugin-process": "2.0.0-rc.0",
     "@tauri-apps/plugin-shell": ">=2.0.0-rc.0",
     "@tauri-apps/plugin-store": "2.0.0-rc.0",
+    "@tauri-apps/plugin-updater": "2.0.0-rc.0",
     "@types/react-tooltip": "^4.2.4",
     "cva": "npm:class-variance-authority@^0.7.0",
     "effect": "^3.7.2",

apps/desktop/src-tauri/capabilities/default.json

@@ -20,9 +20,10 @@
     "core:webview:allow-create-webview-window",
     "shell:default",
     "fs:default",
-    "dialog:allow-save",
+    "dialog:default",
     "store:default",
     "process:default",
-    "oauth:allow-start"
+    "oauth:allow-start",
+    "updater:default"
   ]
 }

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

@@ -10,7 +10,6 @@ mod playback;
 mod project_recordings;
 mod recording;
 mod tray;
-mod updater;
 mod upload;
 
 use auth::AuthStore;
@@ -30,6 +29,7 @@ use serde_json::json;
 use specta::Type;
 use std::fs::File;
 use std::io::{BufReader, Write};
+use std::sync::atomic::AtomicBool;
 use std::{
     collections::HashMap, marker::PhantomData, path::PathBuf, process::Command, sync::Arc,
     time::Duration,
@@ -1137,8 +1137,6 @@ async fn list_audio_devices() -> Result<Vec<String>, ()> {
 #[tauri::command(async)]
 #[specta::specta]
 fn open_main_window(app: AppHandle) {
-    tokio::spawn(updater::check_for_updates(app.clone()));
-
     if let Some(window) = app.get_webview_window("main") {
         window.set_focus().ok();
         return;
@@ -1244,7 +1242,6 @@ struct RecordingMetaChanged {
 #[tauri::command(async)]
 #[specta::specta]
 fn get_recording_meta(app: AppHandle, id: String) -> RecordingMeta {
-
     RecordingMeta::load_for_project(&recording_path(&app, &id)).unwrap()
 }
 

apps/desktop/src/routes/(main)/index.tsx

@@ -11,7 +11,7 @@ import { Select as KSelect } from "@kobalte/core/select";
 import { SwitchTab, Button } from "@cap/ui-solid";
 import { createMutation } from "@tanstack/solid-query";
 import { createEventListener } from "@solid-primitives/event-listener";
-import { cache, createAsync, redirect } from "@solidjs/router";
+import { cache, createAsync, redirect, useNavigate } from "@solidjs/router";
 
 import { createCameraForLabel, createCameras } from "../../utils/media";
 import {
@@ -83,6 +83,8 @@ export default function () {
   const audioDevicesData = createMemo(() => audioDevices.data ?? []);
   const camerasData = createMemo(() => cameras() ?? []);
 
+  createUpdateCheck();
+
   return (
     <div class="flex flex-col p-[1rem] gap-[0.75rem] text-[0.875rem] font-[400] bg-gray-50">
       <Show when={auth() && options.data}>
@@ -370,3 +372,29 @@ export default function () {
     </div>
   );
 }
+
+import * as dialog from "@tauri-apps/plugin-dialog";
+import * as updater from "@tauri-apps/plugin-updater";
+
+let hasChecked = false;
+function createUpdateCheck() {
+  const navigate = useNavigate();
+
+  onMount(async () => {
+    if (hasChecked) return;
+    hasChecked = true;
+
+    await new Promise((res) => setTimeout(res, 1000));
+
+    const update = await updater.check();
+    if (!update) return;
+
+    const shouldUpdate = await dialog.confirm(
+      `Version ${update.version} of Cap is available, would you like to install it?`,
+      { title: "Update Cap", okLabel: "Update", cancelLabel: "Ignore" }
+    );
+
+    if (!shouldUpdate) return;
+    navigate("/update");
+  });
+}

apps/desktop/src/routes/(main)/update.tsx

@@ -0,0 +1,116 @@
+import { useNavigate } from "@solidjs/router";
+import { check } from "@tauri-apps/plugin-updater";
+import {
+  createResource,
+  createSignal,
+  Match,
+  onMount,
+  Show,
+  Switch,
+} from "solid-js";
+import * as dialog from "@tauri-apps/plugin-dialog";
+import { relaunch } from "@tauri-apps/plugin-process";
+import { Button } from "@cap/ui-solid";
+
+export default function () {
+  const navigate = useNavigate();
+
+  const [update] = createResource(async () => {
+    const update = await check();
+    if (!update) return;
+
+    return update;
+  });
+
+  return (
+    <div class="flex flex-col justify-center flex-1 items-center gap-[3rem] p-[1rem] text-[0.875rem] font-[400] h-full">
+      <Show when={update()} fallback="No update available" keyed>
+        {(update) => {
+          type UpdateStatus =
+            | { type: "downloading"; progress: number; contentLength?: number }
+            | { type: "done" };
+
+          const [updateStatus, updateStatusActions] =
+            createResource<UpdateStatus>(
+              () =>
+                new Promise<UpdateStatus>((resolve) => {
+                  update
+                    .downloadAndInstall((e) => {
+                      if (e.event === "Started") {
+                        resolve({
+                          type: "downloading",
+                          progress: 0,
+                          contentLength: e.data.contentLength,
+                        });
+                      } else if (e.event === "Progress") {
+                        const status = updateStatus();
+                        if (
+                          !status ||
+                          status.type !== "downloading" ||
+                          status.contentLength === undefined
+                        )
+                          return;
+                        updateStatusActions.mutate({
+                          ...status,
+                          progress: e.data.chunkLength + status.progress,
+                        });
+                      }
+                    })
+                    .then(async () => {
+                      updateStatusActions.mutate({ type: "done" });
+                    })
+                    .catch(() => navigate("/"));
+                })
+            );
+
+          return (
+            <div>
+              <Switch fallback={<IconCapLogo class="animate-spin size-4" />}>
+                <Match when={updateStatus()?.type === "done"}>
+                  Update has been installed. Restart Cap to finish updating.
+                  <div class="flex flex-row gap-4">
+                    <Button variant="secondary" onClick={() => navigate("/")}>
+                      Restart Later
+                    </Button>
+                    <Button onClick={() => relaunch()}>Restart Now</Button>
+                  </div>
+                </Match>
+                <Match
+                  when={(() => {
+                    const s = updateStatus();
+                    if (
+                      s &&
+                      s.type === "downloading" &&
+                      s.contentLength !== undefined
+                    )
+                      return s;
+                  })()}
+                >
+                  {(status) => (
+                    <>
+                      <h1>Installing Update</h1>
+
+                      <div class="w-full bg-gray-200 rounded-full h-2.5">
+                        <div
+                          class="bg-blue-300 h-2.5 rounded-full"
+                          style={{
+                            width: `${Math.min(
+                              ((status()?.progress ?? 0) /
+                                (status()?.contentLength ?? 0)) *
+                                100,
+                              100
+                            )}%`,
+                          }}
+                        />
+                      </div>
+                    </>
+                  )}
+                </Match>
+              </Switch>
+            </div>
+          );
+        }}
+      </Show>
+    </div>
+  );
+}