llink/js/desktop/src/components/in-app-autoplay-card.tsx

import { useCallback } from 'react';
import { platform } from '@/lib/platform';
import { useAutoplayPayloadStore } from '@/stores/autoplay-payload-store';
import { AutoplayCardContent } from '@/components/autoplay-card-content';

/**
 * Bottom-right floating autoplay card used on the web client. The desktop
 * client uses a separate BrowserWindow (`src/autoplay_window/`), so this
 * component renders nothing on Electron.
 */
export function InAppAutoplayCard() {
  const payload = useAutoplayPayloadStore((s) => s.payload);
  const setPayload = useAutoplayPayloadStore((s) => s.setPayload);
  const setPendingNav = useAutoplayPayloadStore((s) => s.setPendingNav);

  const handleDismiss = useCallback(() => setPayload(null), [setPayload]);

  const handleNavigate = useCallback(() => {
    if (!payload) return;
    setPayload(null);
    setPendingNav({ networkId: payload.networkId, streamId: payload.streamId });
  }, [payload, setPayload, setPendingNav]);

  if (platform.kind !== 'web') return null;
  if (!payload) return null;

  const isVideo = payload.mimeType.startsWith('video/');

  return (
    <div
      className="fixed bottom-4 right-4 z-50 w-80 overflow-hidden rounded-lg shadow-lg"
      style={{ height: isVideo ? 180 : 64 }}
    >
      <AutoplayCardContent
        payload={payload}
        onDismiss={handleDismiss}
        onNavigate={handleNavigate}
        onEnded={handleDismiss}
      />
    </div>
  );
}