refactor: organize desktop vs. mobile into separate folders

2026-04-29 08:42:56 -07:00
parent 3d9fe67936
commit 3a11a82cd3
194 changed files with 213 additions and 213 deletions
@@ -0,0 +1,102 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { X } from 'lucide-react';
+import type { AutoplayPayload } from '@/lib/autoplay-ipc';
+
+export function AutoplayApp() {
+  const [payload, setPayload] = useState<AutoplayPayload | null>(null);
+  const mediaRef = useRef<HTMLVideoElement | HTMLAudioElement | null>(null);
+
+  useEffect(() => {
+    return window.electronAutoplay.onPlay((p) => setPayload(p));
+  }, []);
+
+  useEffect(() => {
+    return window.electronAutoplay.onStop(() => {
+      mediaRef.current?.pause();
+      setPayload(null);
+    });
+  }, []);
+
+  const stop = useCallback(() => {
+    mediaRef.current?.pause();
+    setPayload(null);
+    window.electronAutoplay.dismiss();
+  }, []);
+
+  if (!payload) {
+    return <div className="h-screen w-screen" />;
+  }
+
+  const isVideo = payload.mimeType.startsWith('video/');
+
+  const handleClick = () => {
+    mediaRef.current?.pause();
+    window.electronAutoplay.navigate({
+      networkId: payload.networkId,
+      streamId: payload.streamId,
+    });
+  };
+
+  const handleClose = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    stop();
+  };
+
+  return (
+    <div
+      className="relative h-screen w-screen cursor-pointer overflow-hidden bg-black"
+      onClick={handleClick}
+    >
+      {isVideo ? (
+        <>
+          <video
+            ref={mediaRef as React.Ref<HTMLVideoElement>}
+            key={payload.particleId}
+            src={payload.downloadUrl}
+            autoPlay
+            playsInline
+            onEnded={stop}
+            className="block h-full w-full object-cover"
+          />
+          <button
+            className="absolute top-1 right-1 z-10 rounded-full bg-black/50 p-0.5 text-white hover:bg-black/70"
+            onClick={handleClose}
+          >
+            <X className="size-3.5" />
+          </button>
+          <div className="absolute inset-x-0 bottom-0 flex items-center gap-2 bg-gradient-to-t from-black/60 to-transparent px-3 py-2">
+            <div className="flex size-6 shrink-0 items-center justify-center rounded-full bg-white/20 text-[10px] font-medium text-white">
+              {payload.senderInitials}
+            </div>
+            <p className="truncate text-xs text-white/80">{payload.senderName}</p>
+          </div>
+        </>
+      ) : (
+        <>
+          <button
+            className="absolute top-1 right-1 z-10 rounded-full bg-black/50 p-0.5 text-white hover:bg-black/70"
+            onClick={handleClose}
+          >
+            <X className="size-3.5" />
+          </button>
+          <div className="flex h-full w-full items-center gap-2 bg-card px-3 py-3">
+            <div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-medium text-primary">
+              {payload.senderInitials}
+            </div>
+            <div className="min-w-0 flex-1">
+              <p className="truncate text-sm font-medium text-card-foreground">{payload.senderName}</p>
+              <p className="text-xs text-muted-foreground">Playing audio...</p>
+            </div>
+          </div>
+          <audio
+            ref={mediaRef as React.Ref<HTMLAudioElement>}
+            key={payload.particleId}
+            src={payload.downloadUrl}
+            autoPlay
+            onEnded={stop}
+          />
+        </>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,11 @@
+<!doctype html>
+<html class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <title>llink - Autoplay</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./renderer.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,9 @@
+import { createRoot } from 'react-dom/client';
+import { AutoplayApp } from './AutoplayApp';
+import { initSentryRenderer } from '@/lib/sentry';
+import '@/styles/globals.css';
+
+initSentryRenderer();
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<AutoplayApp />);