llink/js/src/autoplay_window/AutoplayApp.tsx

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>
  );
}