fix: autoplay window not applying tailwind styles

js/src/autoplay_window/AutoplayApp.tsx

@@ -1,14 +1,21 @@
-import { useEffect, useState } from 'react';
+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));
   }, []);
 
+  const stop = useCallback(() => {
+    mediaRef.current?.pause();
+    setPayload(null);
+    window.electronAutoplay.dismiss();
+  }, []);
+
   if (!payload) {
     return <div className="h-screen w-screen" />;
   }
@@ -16,6 +23,7 @@ export function AutoplayApp() {
   const isVideo = payload.mimeType.startsWith('video/');
 
   const handleClick = () => {
+    mediaRef.current?.pause();
     window.electronAutoplay.navigate({
       networkId: payload.networkId,
       streamId: payload.streamId,
@@ -24,65 +32,63 @@ export function AutoplayApp() {
 
   const handleClose = (e: React.MouseEvent) => {
     e.stopPropagation();
-    setPayload(null);
-    window.electronAutoplay.dismiss();
-  };
-
-  const handleEnded = () => {
-    setPayload(null);
-    window.electronAutoplay.dismiss();
+    stop();
   };
 
   return (
     <div
-      className="flex h-screen w-screen cursor-pointer overflow-hidden rounded-xl bg-card text-card-foreground shadow-lg ring-1 ring-foreground/10"
+      className="relative h-screen w-screen cursor-pointer overflow-hidden bg-black"
       onClick={handleClick}
     >
       {isVideo ? (
-        <div className="relative w-full">
-          <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>
+        <>
           <video
+            ref={mediaRef as React.Ref<HTMLVideoElement>}
             key={payload.particleId}
             src={payload.downloadUrl}
             autoPlay
             playsInline
-            onEnded={handleEnded}
-            className="w-full object-cover"
+            onEnded={stop}
+            className="block h-full w-full object-cover"
           />
-          <div className="flex items-center gap-2 px-3 py-2">
-            <div className="flex size-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary text-[10px] font-medium">
-              {payload.senderInitials}
-            </div>
-            <p className="truncate text-xs text-muted-foreground">{payload.senderName}</p>
-          </div>
-        </div>
-      ) : (
-        <div className="relative flex w-full items-center gap-2 px-3 py-3">
           <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 size-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary text-xs font-medium">
-            {payload.senderInitials}
+          <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>
-          <div className="min-w-0 flex-1">
-            <p className="truncate text-sm font-medium">{payload.senderName}</p>
-            <p className="text-xs text-muted-foreground">Playing audio...</p>
+        </>
+      ) : (
+        <>
+          <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={handleEnded}
+            onEnded={stop}
           />
-        </div>
+        </>
       )}
     </div>
   );

js/src/autoplay_window/index.html

@@ -3,9 +3,6 @@
   <head>
     <meta charset="UTF-8" />
     <title>llink - Autoplay</title>
-    <style>
-      html, body { background: transparent !important; margin: 0; padding: 0; overflow: hidden; }
-    </style>
   </head>
   <body>
     <div id="root"></div>

js/src/autoplay_window/renderer.tsx

@@ -1,5 +1,5 @@
 import { createRoot } from 'react-dom/client';
-import { AutoplayApp } from '@/autoplay/AutoplayApp';
+import { AutoplayApp } from './AutoplayApp';
 import '@/styles/globals.css';
 
 const root = createRoot(document.getElementById('root')!);

js/src/main.ts

@@ -64,8 +64,6 @@ const createAutoplayWindow = () => {
     skipTaskbar: true,
     focusable: false,
     show: false,
-    transparent: true,
-    hasShadow: false,
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),
     },