captive-portal-cms/components/FullscreenLock.tsx

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

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

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

  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">Empty lock card. Open /admin to add an image or 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>
  );
}