auto updating

electrobun.config.ts

@@ -4,7 +4,7 @@ export default {
 	app: {
 		name: "yafw",
 		identifier: "yafw.electrobun.dev",
-		version: "0.0.1",
+		version: "0.7",
 	},
 	build: {
 		// Vite builds to dist/, Electrobun copies from there into the bundle
@@ -26,4 +26,8 @@ export default {
 			icon: "src/mainview/assets/logo.ico",
 		},
 	},
+	release: {
+		baseUrl: "https://github.com/ValentinRapp/yafw"
+		// baseUrl: "http://localhost:8000"
+	},
 } satisfies ElectrobunConfig;

src/bun/index.ts

@@ -2,6 +2,7 @@ import { BrowserWindow, BrowserView, Updater, Utils } from "electrobun/bun";
 import { type AppRPCType } from "../shared/types";
 import { basename, dirname, extname, join } from "path";
 import { homedir } from "os";
+import { update } from "./updater";
 
 const DEV_SERVER_PORT = 5173;
 const DEV_SERVER_URL = `http://localhost:${DEV_SERVER_PORT}`;
@@ -255,6 +256,19 @@ const rpc = BrowserView.defineRPC<AppRPCType>({
 					return { supportedEncoders: [] };
 				}
 			},
+
+			update: async () => {
+				console.log("[YAFW] update check called");
+				try {
+					const check = await Updater.checkForUpdate();
+        			const updating = !!check.updateAvailable;
+					updating && update(); // Don't await, run in background
+					return { updating };
+				} catch (err) {
+					console.error("[YAFW] update RPC handler failed:", err);
+					return { updating: false };
+				}
+			}
 		},
 		messages: {},
 	},

src/bun/updater.ts

@@ -0,0 +1,15 @@
+import * as Electrobun from "electrobun";
+
+export const update = async () => {
+    console.log("[YAFW Backend] Starting update download...");
+    try {
+        // await Bun.sleep(3000); // Simulate delay for testing
+        await Electrobun.Updater.downloadUpdate();
+        if (Electrobun.Updater.updateInfo()?.updateReady) {
+            console.log("[YAFW Backend] Update ready. Applying update...");
+            await Electrobun.Updater.applyUpdate();
+        }
+    } catch (err) {
+        console.error("[YAFW Backend] Background update execution failed:", err);
+    }
+};

src/mainview/App.tsx

@@ -1,10 +1,13 @@
-import { useLayoutEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { useVideoEditor } from "./hooks/useVideoEditor";
 import { Header } from "./components/Header";
 import { DownloadPage } from "./components/DownloadPage";
 import { LandingPage } from "./components/LandingPage";
 import { EditorPage } from "./components/EditorPage";
 import { VideoEditorProvider } from "./context/VideoEditorContext";
+import { useElectrobun } from "./hooks/useElectrobun";
+import { Updating } from "./components/Updating";
+import { isMac } from "./env";
 
 const App = () => {
 	const editorState = useVideoEditor();
@@ -16,10 +19,28 @@ const App = () => {
 		handleNativeBrowse,
 		handleChangeVideo,
 	} = editorState;
+	const { electroview, isStandalone } = useElectrobun();
+	const [isUpdating, setIsUpdating] = useState(false);
 
 	const cardRef = useRef<HTMLDivElement>(null);
 	const [cardHeight, setCardHeight] = useState<number | undefined>(undefined);
 
+	const handleUpdate = async () => {
+		try {
+			const { updating } = await electroview.rpc.request.update({});
+			setIsUpdating(updating);
+		} catch (err) {
+			console.error("[YAFW] Failed to check for updates:", err);
+		}
+	}
+
+	useEffect(() => {
+		// Updates on MacOS are meant to be handled by homebrew
+		if (isStandalone && electroview && !isMac) {
+			handleUpdate();
+		}
+	}, [isStandalone, electroview]);
+
 	useLayoutEffect(() => {
 		const element = cardRef.current;
 		if (element) {
@@ -36,46 +57,53 @@ const App = () => {
 			<div className="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-mocha-mauve/5 rounded-full blur-[120px] pointer-events-none" />
 			<div className="absolute bottom-1/4 left-1/3 w-[300px] h-[300px] bg-mocha-blue/3 rounded-full blur-[100px] pointer-events-none" />
 
-			{/* Navbar / Header */}
-			<Header
-				currentPage={currentPage}
-				setCurrentPage={setCurrentPage}
-				videoSrc={videoSrc}
-				onChangeVideo={handleChangeVideo}
-			/>
+			{!isUpdating ?
+				<>
+					{/* Navbar / Header */}
+					<Header
+						currentPage={currentPage}
+						setCurrentPage={setCurrentPage}
+						videoSrc={videoSrc}
+						onChangeVideo={handleChangeVideo}
+					/>
 
-			{/* Main Content Area */}
-			{currentPage === "download" || !videoSrc ? (
-				<div className="flex-1 flex flex-col items-center justify-center p-6 relative z-10 w-full">
-					<div
-						className={`bg-mocha-surface0/60 backdrop-blur-md rounded-2xl border border-mocha-surface0 shadow-2xl w-full transition-all ease-in-out relative overflow-hidden ${
-							currentPage === "download" ? "max-w-3xl" : "max-w-2xl"
-						}`}
-						style={{ height: cardHeight ? `${cardHeight}px` : "auto" }}
-					>
-						<div
-							ref={cardRef}
-							className={`w-full transition-all duration-500 ease-in-out ${
-								currentPage === "download" ? "p-6 md:p-10" : "p-8 md:p-12"
-							}`}
-						>
-							{currentPage === "download" ? (
-								<DownloadPage onNavigateEditor={() => setCurrentPage("editor")} />
-							) : (
-								<LandingPage
-									onFileSelect={handleFileSelect}
-									onNativeBrowse={handleNativeBrowse}
-									onNavigateDownload={() => setCurrentPage("download")}
-								/>
-							)}
+					{/* Main Content Area */}
+					{currentPage === "download" || !videoSrc ? (
+						<div className="flex-1 flex flex-col items-center justify-center p-6 relative z-10 w-full">
+							<div
+								className={`bg-mocha-surface0/60 backdrop-blur-md rounded-2xl border border-mocha-surface0 shadow-2xl w-full transition-all ease-in-out relative overflow-hidden ${currentPage === "download" ? "max-w-3xl" : "max-w-2xl"
+									}`}
+								style={{ height: cardHeight ? `${cardHeight}px` : "auto" }}
+							>
+								<div
+									ref={cardRef}
+									className={`w-full transition-all duration-500 ease-in-out
+										${currentPage === "download" ?
+											"p-6 md:p-10" :
+											"p-8 md:p-12"
+										}`}
+								>
+									{currentPage === "download" ? (
+										<DownloadPage onNavigateEditor={() => setCurrentPage("editor")} />
+									) : (
+										<LandingPage
+											onFileSelect={handleFileSelect}
+											onNativeBrowse={handleNativeBrowse}
+											onNavigateDownload={() => setCurrentPage("download")}
+										/>
+									)}
+								</div>
+							</div>
 						</div>
-					</div>
-				</div>
-			) : (
-				<VideoEditorProvider value={editorState}>
-					<EditorPage />
-				</VideoEditorProvider>
-			)}
+					) : (
+						<VideoEditorProvider value={editorState}>
+							<EditorPage />
+						</VideoEditorProvider>
+					)}
+				</>
+				:
+				<Updating />
+			}
 		</div>
 	);
 };

src/mainview/components/Updating.tsx

@@ -0,0 +1,35 @@
+import logoUrl from "../assets/logo.png";
+
+export const Updating = () => {
+	return (
+		<div className="flex-1 flex flex-col items-center justify-center p-6 relative z-10 w-full">
+			<div className="bg-mocha-surface0/60 backdrop-blur-md rounded-2xl border border-mocha-surface0 shadow-2xl p-8 md:p-12 max-w-sm w-full text-center flex flex-col items-center gap-6 relative z-10 transition-all duration-500 ease-in-out">
+				{/* Spinner + Logo Wrapper */}
+				<div className="relative w-20 h-20 flex items-center justify-center select-none">
+					{/* Outer glowing pulsing ring */}
+					<div className="absolute inset-0 rounded-full bg-mocha-mauve/10 animate-ping" />
+					{/* Spinning gradient border */}
+					<div className="absolute inset-0 rounded-full border-4 border-mocha-surface1" />
+					<div className="absolute inset-0 rounded-full border-4 border-t-mocha-mauve border-r-mocha-pink border-b-transparent border-l-transparent animate-spin" style={{ animationDuration: '1.2s' }} />
+
+					{/* Center logo */}
+					<img 
+						src={logoUrl} 
+						alt="YAFW Logo" 
+						className="w-10 h-10 object-contain relative z-10 rounded-md"
+					/>
+				</div>
+
+				{/* Typography */}
+				<div className="flex flex-col gap-2">
+					<h2 className="text-xl font-black tracking-wide bg-gradient-to-r from-mocha-mauve via-mocha-pink to-mocha-blue bg-clip-text text-transparent">
+						Updating YAFW
+					</h2>
+					<p className="text-xs text-mocha-subtext0 font-medium px-4 leading-relaxed">
+						Please wait while we install the latest enhancements. This should only take a moment.
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+};

src/shared/types.ts

@@ -44,6 +44,12 @@ export type AppRPCType = {
 					supportedEncoders: string[];
 				};
 			};
+			update: {
+				params: {};
+				response: {
+					updating: boolean;
+				};
+			};
 		};
 		messages: {};
 	}>;