@morphika/webframe 0.1.0

package/components/ui/NavContentLightbox.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { useEffect, useCallback } from "react";
+import { assetUrl } from "../../lib/assets";
+
+// ============================================
+// Helpers
+// ============================================
+
+/** Extract YouTube video ID from various URL formats */
+function getYouTubeId(url: string): string | null {
+  const match = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&\s]+)/);
+  return match ? match[1] : null;
+}
+
+/** Extract Vimeo video ID */
+function getVimeoId(url: string): string | null {
+  const match = url.match(/vimeo\.com\/(\d+)/);
+  return match ? match[1] : null;
+}
+
+// ============================================
+// Props
+// ============================================
+
+interface NavContentLightboxProps {
+  contentType: "image" | "video-file" | "video-embed";
+  /** Asset path for image or video file */
+  contentAsset?: string;
+  /** Embed URL for YouTube/Vimeo */
+  contentUrl?: string;
+  onClose: () => void;
+}
+
+// ============================================
+// Component
+// ============================================
+
+export default function NavContentLightbox({
+  contentType,
+  contentAsset,
+  contentUrl,
+  onClose,
+}: NavContentLightboxProps) {
+  // Close on Escape
+  const handleKey = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    },
+    [onClose]
+  );
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKey);
+    // Lock body scroll
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      window.removeEventListener("keydown", handleKey);
+      document.body.style.overflow = prev;
+    };
+  }, [handleKey]);
+
+  // Build embed URL for YouTube / Vimeo
+  let embedSrc: string | null = null;
+  if (contentType === "video-embed" && contentUrl) {
+    const ytId = getYouTubeId(contentUrl);
+    const vimeoId = getVimeoId(contentUrl);
+    if (ytId) {
+      embedSrc = `https://www.youtube.com/embed/${ytId}?autoplay=1&rel=0`;
+    } else if (vimeoId) {
+      embedSrc = `https://player.vimeo.com/video/${vimeoId}?autoplay=1`;
+    }
+  }
+
+  // Resolve asset URL for images / video files
+  const resolvedAssetUrl = contentAsset ? assetUrl(contentAsset) : null;
+
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/90 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      {/* Close button */}
+      <button
+        onClick={onClose}
+        className="absolute top-5 right-5 w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center transition-colors z-10"
+        aria-label="Close lightbox"
+      >
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </button>
+
+      {/* Content */}
+      <div
+        className="max-w-[90vw] max-h-[90vh] flex items-center justify-center"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Image */}
+        {contentType === "image" && resolvedAssetUrl && (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={resolvedAssetUrl}
+            alt=""
+            className="max-w-full max-h-[90vh] object-contain rounded-lg shadow-2xl"
+          />
+        )}
+
+        {/* Video file (MP4/WebM from storage) */}
+        {contentType === "video-file" && resolvedAssetUrl && (
+          <video
+            src={resolvedAssetUrl}
+            controls
+            autoPlay
+            playsInline
+            className="max-w-full max-h-[90vh] rounded-lg shadow-2xl"
+          />
+        )}
+
+        {/* Video embed (YouTube / Vimeo) */}
+        {contentType === "video-embed" && embedSrc && (
+          <div
+            className="rounded-lg overflow-hidden shadow-2xl"
+            style={{ width: "min(90vw, 1280px)", aspectRatio: "16/9" }}
+          >
+            <iframe
+              src={embedSrc}
+              allow="autoplay; fullscreen; picture-in-picture"
+              allowFullScreen
+              className="w-full h-full border-0"
+              title="Video"
+            />
+          </div>
+        )}
+
+        {/* Fallback: no content configured */}
+        {!resolvedAssetUrl && !embedSrc && (
+          <div className="bg-neutral-900 rounded-xl p-10 flex flex-col items-center gap-3">
+            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-neutral-500">
+              <circle cx="12" cy="12" r="10" />
+              <line x1="15" y1="9" x2="9" y2="15" />
+              <line x1="9" y1="9" x2="15" y2="15" />
+            </svg>
+            <p className="text-sm text-neutral-400">No content configured</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}