@mohasinac/appkit 4.9.5 → 4.10.0

package/dist/ui/components/ImageLightbox.js

@@ -2,11 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { ChevronLeft, ChevronRight, X, ZoomIn, ZoomOut, RotateCw, Maximize2 } from "lucide-react";
+import { ChevronLeft, ChevronRight, X, ZoomIn, ZoomOut, RotateCw, Maximize2, Minimize2 } from "lucide-react";
 import { Button } from "./Button";
 import { Div } from "./Div";
 import { Text, Span } from "./Typography";
 import { MediaImage } from "../../features/media/MediaImage";
+import { getYouTubeVideoId } from "../../utils/media-url";
 const CLS_CLOSE_BTN = "w-10 h-10 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-error-surface text-white flex items-center justify-center";
 const MIN_ZOOM = 10;
 const MAX_ZOOM = 300;
@@ -15,6 +16,7 @@ export function ImageLightbox({ images, activeIndex, onClose, onNavigate, showTh
     const [currentIndex, setCurrentIndex] = useState(activeIndex ?? 0);
     const [zoom, setZoom] = useState(100);
     const [rotation, setRotation] = useState(0);
+    const [isFullscreen, setIsFullscreen] = useState(false);
     const overlayRef = useRef(null);
     // Sync external activeIndex and reset transforms
     useEffect(() => {
@@ -33,6 +35,37 @@ export function ImageLightbox({ images, activeIndex, onClose, onNavigate, showTh
         document.body.style.overflow = "hidden";
         return () => { document.body.style.overflow = prev; };
     }, [isOpen]);
+    // Track native Fullscreen API state so the toggle button + icon stay in sync
+    // even when the user exits via Esc/browser chrome rather than our button.
+    useEffect(() => {
+        const onFsChange = () => {
+            const doc = document;
+            const fsEl = document.fullscreenElement ?? doc.webkitFullscreenElement ?? null;
+            setIsFullscreen(fsEl === overlayRef.current);
+        };
+        document.addEventListener("fullscreenchange", onFsChange);
+        document.addEventListener("webkitfullscreenchange", onFsChange);
+        return () => {
+            document.removeEventListener("fullscreenchange", onFsChange);
+            document.removeEventListener("webkitfullscreenchange", onFsChange);
+        };
+    }, []);
+    // Exit native fullscreen when the lightbox itself closes.
+    useEffect(() => {
+        const doc = document;
+        if (!isOpen && (document.fullscreenElement || doc.webkitFullscreenElement)) {
+            (document.exitFullscreen?.() ?? doc.webkitExitFullscreen?.())?.catch?.(() => { });
+        }
+    }, [isOpen]);
+    const toggleFullscreen = useCallback(() => {
+        const doc = document;
+        if (document.fullscreenElement || doc.webkitFullscreenElement) {
+            (document.exitFullscreen?.() ?? doc.webkitExitFullscreen?.())?.catch?.(() => { });
+            return;
+        }
+        const el = overlayRef.current;
+        (el?.requestFullscreen?.() ?? el?.webkitRequestFullscreen?.())?.catch?.(() => { });
+    }, []);
     const navigate = useCallback((dir) => {
         setCurrentIndex((prev) => {
             const next = (prev + dir + images.length) % images.length;
@@ -89,11 +122,12 @@ export function ImageLightbox({ images, activeIndex, onClose, onNavigate, showTh
         return null;
     const image = images[currentIndex];
     const hasMultiple = images.length > 1;
+    const youtubeId = image.kind === "video" ? getYouTubeVideoId(image.src) : null;
     const iconBtnClass = "w-10 h-10 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white flex items-center justify-center";
-    return createPortal(_jsxs("div", { ref: overlayRef, tabIndex: -1, className: "appkit-lightbox", role: "dialog", "aria-modal": "true", "aria-label": "Image lightbox", onKeyDown: handleKeyDown, onWheel: handleWheel, children: [_jsxs("div", { className: "absolute top-0 left-0 right-0 z-10 flex items-center justify-between px-4 py-3 bg-gradient-to-b from-black/60 to-transparent", children: [_jsx(Span, { size: "sm", weight: "medium", className: "text-white/70", children: hasMultiple ? `${currentIndex + 1} / ${images.length}` : "" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustZoom(-ZOOM_STEP), className: iconBtnClass, "aria-label": "Zoom out", disabled: zoom <= MIN_ZOOM, children: _jsx(ZoomOut, { className: "w-4 h-4" }) }), _jsxs("button", { type: "button", onClick: () => { setZoom(100); setRotation(0); }, className: "text-white/70 hover:text-white text-xs font-mono min-w-[3rem] text-center", "aria-label": "Reset zoom", children: [zoom, "%"] }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustZoom(ZOOM_STEP), className: iconBtnClass, "aria-label": "Zoom in", disabled: zoom >= MAX_ZOOM, children: _jsx(ZoomIn, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => setRotation((r) => (r + 90) % 360), className: iconBtnClass, "aria-label": "Rotate 90\u00B0", children: _jsx(RotateCw, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => { setZoom(100); setRotation(0); }, className: iconBtnClass, "aria-label": "Reset", children: _jsx(Maximize2, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: CLS_CLOSE_BTN, "aria-label": "Close lightbox", children: _jsx(X, { className: "w-5 h-5" }) })] })] }), hasMultiple && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => navigate(-1), className: "absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white z-10 flex items-center justify-center", "aria-label": "Previous image", children: _jsx(ChevronLeft, { className: "w-7 h-7" }) })), _jsxs("div", { className: "appkit-lightbox__image-wrap", style: { cursor: zoom > 100 ? "grab" : "default" }, children: [image.kind === "video" ? (_jsx("video", { src: image.src, poster: image.poster, controls: true, playsInline: true, "aria-label": image.alt ?? "Video", className: "appkit-lightbox__img", style: {
+    return createPortal(_jsxs("div", { ref: overlayRef, tabIndex: -1, className: "appkit-lightbox", role: "dialog", "aria-modal": "true", "aria-label": "Image lightbox", onKeyDown: handleKeyDown, onWheel: handleWheel, children: [_jsxs("div", { className: "absolute top-0 left-0 right-0 z-10 flex items-center justify-between px-4 py-3 bg-gradient-to-b from-black/60 to-transparent", children: [_jsx(Span, { size: "sm", weight: "medium", className: "text-white/70", children: hasMultiple ? `${currentIndex + 1} / ${images.length}` : "" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustZoom(-ZOOM_STEP), className: iconBtnClass, "aria-label": "Zoom out", disabled: zoom <= MIN_ZOOM, children: _jsx(ZoomOut, { className: "w-4 h-4" }) }), _jsxs("button", { type: "button", onClick: () => { setZoom(100); setRotation(0); }, className: "text-white/70 hover:text-white text-xs font-mono min-w-[3rem] text-center", "aria-label": "Reset zoom", children: [zoom, "%"] }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustZoom(ZOOM_STEP), className: iconBtnClass, "aria-label": "Zoom in", disabled: zoom >= MAX_ZOOM, children: _jsx(ZoomIn, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => setRotation((r) => (r + 90) % 360), className: iconBtnClass, "aria-label": "Rotate 90\u00B0", children: _jsx(RotateCw, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: toggleFullscreen, className: iconBtnClass, "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen", children: isFullscreen ? _jsx(Minimize2, { className: "w-4 h-4" }) : _jsx(Maximize2, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: CLS_CLOSE_BTN, "aria-label": "Close lightbox", children: _jsx(X, { className: "w-5 h-5" }) })] })] }), hasMultiple && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => navigate(-1), className: "absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white z-10 flex items-center justify-center", "aria-label": "Previous image", children: _jsx(ChevronLeft, { className: "w-7 h-7" }) })), _jsxs("div", { className: "appkit-lightbox__image-wrap", style: { cursor: zoom > 100 ? "grab" : "default" }, children: [image.kind === "video" ? (youtubeId ? (_jsx("iframe", { src: `https://www.youtube-nocookie.com/embed/${youtubeId}?playsinline=1&rel=0`, title: image.alt ?? "Video", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", allowFullScreen: true, className: "appkit-lightbox__img appkit-lightbox__video border-0" })) : (_jsx("video", { src: image.src, poster: image.poster, controls: true, playsInline: true, "aria-label": image.alt ?? "Video", className: "appkit-lightbox__img appkit-lightbox__video", style: {
                             transform: `scale(${zoom / 100}) rotate(${rotation}deg)`,
                             transition: "transform 0.2s ease",
-                        } })) : (_jsx(MediaImage, { src: image.src, alt: image.alt ?? "", size: "hero", objectFit: "contain", className: "appkit-lightbox__img", style: {
+                        } }))) : (_jsx(MediaImage, { src: image.src, alt: image.alt ?? "", size: "hero", objectFit: "contain", className: "appkit-lightbox__img", style: {
                             transform: `scale(${zoom / 100}) rotate(${rotation}deg)`,
                             transition: "transform 0.2s ease",
                         } })), image.badge && (_jsx(Div, { className: "absolute left-3 top-3 rounded bg-black/70 px-2 py-1 text-xs font-semibold text-white pointer-events-none", children: image.badge }))] }), (image.caption || image.sub) && (_jsxs("div", { className: "flex-shrink-0 text-center px-8 pb-2", children: [image.caption && (_jsx(Text, { size: "sm", variant: "secondary", className: "!text-white/80", children: image.caption })), image.sub && (_jsx(Text, { size: "sm", variant: "secondary", className: "!text-white/50", children: image.sub }))] })), showThumbnails && images.length > 1 && (_jsx("div", { className: "flex-shrink-0 flex gap-2 overflow-x-auto px-4 pb-3 justify-center", children: images.map((thumb, i) => (_jsx("button", { type: "button", onClick: () => {

package/dist/ui/components/ImageLightbox.style.css

@@ -37,6 +37,14 @@
   position: relative;
 }
 
+@media (max-width: 640px) {
+  .appkit-lightbox__image-wrap {
+    /* Tighter than the desktop 4rem so a video's min-width (below) has room
+       to fit inside narrow phone viewports without forcing horizontal scroll. */
+    padding: 1.5rem 1rem;
+  }
+}
+
 .appkit-lightbox__img {
   max-height: 100%;
   max-width: 100%;
@@ -44,6 +52,26 @@
   user-select: none;
 }
 
+/* -- Video / YouTube-embed area ----------------------- */
+/* Applied alongside .appkit-lightbox__img on the theater-mode <video>/<iframe>
+   so a video always occupies a real, tappable box — never the browser's tiny
+   ~300x150 default when a src fails to load or an embed reports no intrinsic
+   size (Recurrent Root Cause Pattern #27-adjacent: video needs its own sizing
+   contract, it can't just inherit the image one). */
+.appkit-lightbox__video {
+  width: 100%;
+  height: 100%;
+  min-width: 260px;
+  min-height: 190px;
+}
+
+@media (min-width: 768px) {
+  .appkit-lightbox__video {
+    min-width: 480px;
+    min-height: 320px;
+  }
+}
+
 /* -- Zoom hint --------------------------------------- */
 
 .appkit-lightbox__zoom-hint {

package/dist/utils/media-url.d.ts

@@ -16,3 +16,12 @@ export declare const GCS_HOST = "storage.googleapis.com";
  *  - Falsy                 → undefined
  */
 export declare function resolveMediaUrl(url: string | null | undefined): string | undefined;
+/**
+ * Extracts the 11-char YouTube video ID from a watch/share/embed URL, or
+ * `null` when `url` isn't a recognized YouTube URL. A video field can be
+ * sourced via `MediaUploadField`'s "YouTube" tab (see `showYoutube` there),
+ * which stores a `youtube.com/watch?v=...` URL — that URL is never a raw
+ * playable media file, so every `<video src>` renderer (`MediaVideo`,
+ * `ImageLightbox`) must check this first and fall back to an iframe embed.
+ */
+export declare function getYouTubeVideoId(url: string | null | undefined): string | null;

package/dist/utils/media-url.js

@@ -37,3 +37,42 @@ export function resolveMediaUrl(url) {
         return url;
     }
 }
+const YOUTUBE_HOSTS = new Set([
+    "youtube.com",
+    "m.youtube.com",
+    "youtu.be",
+    "youtube-nocookie.com",
+]);
+/**
+ * Extracts the 11-char YouTube video ID from a watch/share/embed URL, or
+ * `null` when `url` isn't a recognized YouTube URL. A video field can be
+ * sourced via `MediaUploadField`'s "YouTube" tab (see `showYoutube` there),
+ * which stores a `youtube.com/watch?v=...` URL — that URL is never a raw
+ * playable media file, so every `<video src>` renderer (`MediaVideo`,
+ * `ImageLightbox`) must check this first and fall back to an iframe embed.
+ */
+export function getYouTubeVideoId(url) {
+    if (!url)
+        return null;
+    try {
+        const parsed = new URL(url);
+        const host = parsed.hostname.replace(/^www\./, "");
+        if (!YOUTUBE_HOSTS.has(host))
+            return null;
+        if (host === "youtu.be") {
+            const id = parsed.pathname.slice(1);
+            return /^[\w-]{11}$/.test(id) ? id : null;
+        }
+        const fromQuery = parsed.searchParams.get("v");
+        if (fromQuery && /^[\w-]{11}$/.test(fromQuery))
+            return fromQuery;
+        const embedMatch = parsed.pathname.match(/\/embed\/([\w-]{11})/);
+        if (embedMatch)
+            return embedMatch[1];
+        return null;
+    }
+    catch (_err) {
+        void normalizeError(_err);
+        return null;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "4.9.5",
+  "version": "4.10.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"