captive-portal-cms/components/FullscreenLock.tsx

'use client';
import { Card } from '@/types';

const VIDEO_RE = /\.(mp4|m4v|webm|mov|qt|ogv|ogg)(\?|$)/i;

export default function FullscreenLock({ card }: { card: Card }) {
  const url = card.imageUrl;
  const isVideo = !!url && VIDEO_RE.test(url);

  return (
    <div
      className="fixed inset-0 z-[9999] bg-black flex items-center justify-center select-none"
      onContextMenu={(e) => e.preventDefault()}
    >
      {!url ? (
        <p className="text-white/70 text-lg">Lock card senza contenuto. Apri /admin per aggiungere immagine o video.</p>
      ) : isVideo ? (
        <video
          src={url}
          className="w-full h-full object-contain"
          autoPlay
          loop
          muted
          playsInline
        />
      ) : (
        <img
          src={url}
          alt=""
          className="w-full h-full object-contain"
          draggable={false}
        />
      )}
    </div>
  );
}