Revert UI video handling

Author: moubctez

new-ui/biome.json

@@ -1,6 +1,6 @@
 {
   "root": true,
-  "$schema": "https://biomejs.dev/schemas/2.5.13/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.5.14/schema.json",
   "vcs": {
     "enabled": false,
     "clientKind": "git",

new-ui/package.json

@@ -14,7 +14,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@biomejs/biome": "2.5.13",
+    "@biomejs/biome": "2.5.14",
     "@floating-ui/react": "^0.27.20",
     "@stablelib/base64": "^2.0.1",
     "@stablelib/x25519": "^2.0.1",
@@ -36,7 +36,7 @@
     "dayjs": "^1.11.23",
     "motion": "^12.43.0",
     "p-timeout": "^7.0.2",
-    "prettier": "^3.9.6",
+    "prettier": "^3.9.7",
     "qrcode.react": "^4.2.0",
     "radashi": "^12.9.4",
     "react": "^19.3.0",

new-ui/pnpm-lock.yaml

@@ -1,5 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
-import { isPresent } from '../../../shared/utils/isPresent';
+import { useQuery } from '@tanstack/react-query';
 
 type Props = {
   src: string;
@@ -10,61 +9,21 @@ export const SlideVideo = ({ src, poster }: Props) => {
   // Bundled assets are served without range request support, which makes video
   // playback stutter. Play it from an in-memory blob instead.
   // https://github.com/orgs/tauri-apps/discussions/7870
-  const [blobSrc, setBlobSrc] = useState<string>();
-  const videoRef = useRef<HTMLVideoElement>(null);
-
-  useEffect(() => {
-    let objectUrl: string | undefined;
-    let cancelled = false;
-
-    void (async () => {
+  const { data: blobSrc } = useQuery({
+    queryKey: ['slide-video', src] as const,
+    queryFn: async () => {
       const response = await fetch(src);
-      const blob = await response.blob();
-      if (cancelled) return;
-      objectUrl = URL.createObjectURL(blob);
-      setBlobSrc(objectUrl);
-    })();
-
-    return () => {
-      cancelled = true;
-      if (isPresent(objectUrl)) {
-        URL.revokeObjectURL(objectUrl);
-      }
-    };
-  }, [src]);
-
-  // The welcome window is pre-built hidden and only hidden again on close, so the webview
-  // outlives the window being on screen.
-  useEffect(() => {
-    const video = videoRef.current;
-    if (!isPresent(video) || !isPresent(blobSrc)) return;
-
-    const syncPlayback = () => {
-      if (document.visibilityState === 'visible') {
-        void video.play().catch(() => {
-          // Autoplay can be refused while the window is not interactable yet.
-        });
-      } else {
-        video.pause();
-      }
-    };
-
-    syncPlayback();
-    document.addEventListener('visibilitychange', syncPlayback);
-
-    return () => {
-      document.removeEventListener('visibilitychange', syncPlayback);
-      video.pause();
-    };
-  }, [blobSrc]);
+      return URL.createObjectURL(await response.blob());
+    },
+  });
 
   return (
     <video
-      ref={videoRef}
       src={blobSrc}
       poster={poster}
       width={'100%'}
       height={'auto'}
+      autoPlay
       loop
       muted
       playsInline

new-ui/src/pages/welcome/components/SlideVideo.tsx

@@ -100,7 +100,7 @@ defguard_wireguard_rs = { workspace = true, features = ["check_dependencies"] }
 dirs-next.workspace = true
 hyper-util = "0.1"
 log.workspace = true
-os_info = { version = "3.14", default-features = false }
+os_info = { version = "3.15", default-features = false }
 prost.workspace = true
 regex = "1.12"
 reqwest.workspace = true