@ttt-productions/media-viewer 0.2.9 → 0.2.11

package/dist/audio-viewer.d.ts

@@ -1,3 +1,3 @@
-import type { MediaViewerProps } from "./types";
-export declare function AudioViewer(props: MediaViewerProps): import("react/jsx-runtime").JSX.Element;
+import type { AudioViewerProps } from "./types.js";
+export declare function AudioViewer(props: AudioViewerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=audio-viewer.d.ts.map

package/dist/audio-viewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"audio-viewer.d.ts","sourceRoot":"","sources":["../src/audio-viewer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAmDlD"}
+{"version":3,"file":"audio-viewer.d.ts","sourceRoot":"","sources":["../src/audio-viewer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA6IlD"}

package/dist/audio-viewer.js

@@ -1,9 +1,57 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useInView } from "react-intersection-observer";
+import { Skeleton } from "@ttt-productions/ui-core";
 export function AudioViewer(props) {
-    const { url, className, mediaClassName, controls = true, autoPlay, loop, } = props;
+    const { url, className, mediaClassName, controls = true, autoPlay, loop = false, lazy = true, skeleton: showSkeleton = true, priority = false, preload = "metadata", onLoad, onLoadChange, onError, fallback, } = props;
+    const [isLoaded, setIsLoaded] = React.useState(false);
+    const [hasError, setHasError] = React.useState(false);
+    const [shouldLoad, setShouldLoad] = React.useState(priority || !lazy);
     const audioRef = React.useRef(null);
-    // Only add "tap-to-toggle" when controls are OFF (prevents jank)
+    const { ref: inViewRef, inView } = useInView({
+        triggerOnce: false,
+        threshold: 0.01,
+        skip: priority || shouldLoad,
+        rootMargin: "100px",
+    });
+    // Load when in view
+    React.useEffect(() => {
+        if (inView && !shouldLoad) {
+            setShouldLoad(true);
+        }
+    }, [inView, shouldLoad]);
+    // Accordion compatibility: delayed auto-load on mount
+    React.useEffect(() => {
+        if (priority || shouldLoad)
+            return;
+        const timer = setTimeout(() => {
+            if (!shouldLoad)
+                setShouldLoad(true);
+        }, 100);
+        return () => clearTimeout(timer);
+    }, [url, priority, shouldLoad]);
+    // Report loading state
+    React.useEffect(() => {
+        onLoadChange?.(!isLoaded);
+    }, [isLoaded, onLoadChange]);
+    // Reset on URL change
+    React.useEffect(() => {
+        setHasError(false);
+        setIsLoaded(false);
+    }, [url]);
+    const handleLoadedData = React.useCallback(() => {
+        setIsLoaded(true);
+        onLoad?.();
+    }, [onLoad]);
+    const handleCanPlay = React.useCallback(() => {
+        setIsLoaded(true);
+    }, []);
+    const handleError = React.useCallback(() => {
+        setHasError(true);
+        setIsLoaded(true); // Stop skeleton on error
+        onError?.();
+    }, [onError]);
+    // Tap-to-toggle when controls are off
     const togglePlay = React.useCallback(() => {
         const el = audioRef.current;
         if (!el)
@@ -21,6 +69,15 @@ export function AudioViewer(props) {
             togglePlay();
         }
     }, [controls, togglePlay]);
-    return (_jsx("div", { className: className, role: controls ? undefined : "button", tabIndex: controls ? undefined : 0, "aria-label": controls ? undefined : "Toggle audio playback", onClick: controls ? undefined : togglePlay, onKeyDown: controls ? undefined : onKeyDown, style: { outline: "none" }, children: _jsx("audio", { ref: audioRef, src: url, className: mediaClassName, controls: controls, autoPlay: autoPlay, loop: loop }) }));
+    if (hasError) {
+        if (fallback)
+            return _jsx(_Fragment, { children: fallback });
+        return (_jsx("div", { className: className, children: _jsx("div", { className: "mv-audio-error", children: _jsx("p", { children: "Failed to load audio" }) }) }));
+    }
+    return (_jsx("div", { ref: inViewRef, className: className, role: controls ? undefined : "button", tabIndex: controls ? undefined : 0, "aria-label": controls ? undefined : "Toggle audio playback", onClick: controls ? undefined : togglePlay, onKeyDown: controls ? undefined : onKeyDown, style: { position: "relative", width: "100%", outline: "none" }, children: !shouldLoad ? (showSkeleton ? _jsx(Skeleton, { style: { height: "3.5rem", width: "100%" } }) : null) : (_jsxs(_Fragment, { children: [showSkeleton && !isLoaded && (_jsx(Skeleton, { style: { position: "absolute", inset: 0, height: "3.5rem", width: "100%" } })), _jsx("audio", { ref: audioRef, src: url, className: mediaClassName, controls: controls, autoPlay: autoPlay, loop: loop, preload: preload, onLoadedData: handleLoadedData, onCanPlay: handleCanPlay, onError: handleError, style: {
+                        width: "100%",
+                        opacity: isLoaded ? 1 : 0,
+                        transition: "opacity 300ms ease",
+                    } })] })) }));
 }
 //# sourceMappingURL=audio-viewer.js.map

package/dist/audio-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"audio-viewer.js","sourceRoot":"","sources":["../src/audio-viewer.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EACJ,GAAG,EACH,SAAS,EACT,cAAc,EACd,QAAQ,GAAG,IAAI,EACf,QAAQ,EACR,IAAI,GACL,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAA0B,IAAI,CAAC,CAAC;IAE7D,iEAAiE;IACjE,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,MAAM,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC5B,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,IAAI,EAAE,CAAC,MAAM;YAAE,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;;YACzC,EAAE,CAAC,KAAK,EAAE,CAAC;IAClB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,CAAsB,EAAE,EAAE;QACzB,IAAI,QAAQ;YAAE,OAAO;QACrB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YACvC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,UAAU,EAAE,CAAC;QACf,CAAC;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,UAAU,CAAC,CACvB,CAAC;IAEF,OAAO,CACL,cACE,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EACrC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,gBACtB,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,uBAAuB,EAC1D,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,EAC1C,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC3C,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,YAE1B,gBACE,GAAG,EAAE,QAAQ,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,cAAc,EACzB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,GACV,GACE,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"audio-viewer.js","sourceRoot":"","sources":["../src/audio-viewer.tsx"],"names":[],"mappings":"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"}

package/dist/fallback.d.ts

@@ -1,4 +1,4 @@
-import type { FallbackMode } from "./types";
+import type { FallbackMode } from "./types.js";
 export declare function MediaFallbackLink(props: {
     url: string;
     filename?: string;
@@ -6,4 +6,14 @@ export declare function MediaFallbackLink(props: {
     label?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function shouldShowFallback(mode: FallbackMode | undefined): boolean;
+/** Empty state: no URL provided */
+export declare function EmptyFallback(props: {
+    isCircular?: boolean;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** Error state: failed to load */
+export declare function ErrorFallback(props: {
+    isCircular?: boolean;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=fallback.d.ts.map

package/dist/fallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fallback.d.ts","sourceRoot":"","sources":["../src/fallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,wBAAgB,iBAAiB,CAAC,KAAK,EAAE;IACvC,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,2CAcA;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,YAAY,GAAG,SAAS,GAAG,OAAO,CAE1E"}
+{"version":3,"file":"fallback.d.ts","sourceRoot":"","sources":["../src/fallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,wBAAgB,iBAAiB,CAAC,KAAK,EAAE;IACvC,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,2CAcA;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,YAAY,GAAG,SAAS,GAAG,OAAO,CAE1E;AAED,mCAAmC;AACnC,wBAAgB,aAAa,CAAC,KAAK,EAAE;IAAE,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAehF;AAED,kCAAkC;AAClC,wBAAgB,aAAa,CAAC,KAAK,EAAE;IAAE,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAchF"}

package/dist/fallback.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function MediaFallbackLink(props) {
     const { url, filename, className, label } = props;
     return (_jsx("a", { href: url, target: "_blank", rel: "noreferrer", download: filename || undefined, className: className, children: label ?? "Download" }));
@@ -6,4 +6,17 @@ export function MediaFallbackLink(props) {
 export function shouldShowFallback(mode) {
     return mode !== "none";
 }
+/** Empty state: no URL provided */
+export function EmptyFallback(props) {
+    const { isCircular, className } = props;
+    if (isCircular) {
+        return (_jsx("div", { className: className ?? "mv-avatar-fallback", children: "?" }));
+    }
+    return (_jsx("div", { className: className ?? "mv-empty-fallback", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }), _jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })] }) }));
+}
+/** Error state: failed to load */
+export function ErrorFallback(props) {
+    const { isCircular, className } = props;
+    return (_jsx("div", { className: className ?? "mv-error-fallback", style: isCircular ? { borderRadius: "50%" } : undefined, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }), _jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }), _jsx("line", { x1: "9", x2: "15", y1: "15", y2: "9" })] }) }));
+}
 //# sourceMappingURL=fallback.js.map

package/dist/fallback.js.map

@@ -1 +1 @@
-{"version":3,"file":"fallback.js","sourceRoot":"","sources":["../src/fallback.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,iBAAiB,CAAC,KAKjC;IACC,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAElD,OAAO,CACL,YACE,IAAI,EAAE,GAAG,EACT,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,EAChB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,SAAS,EAAE,SAAS,YAEnB,KAAK,IAAI,UAAU,GAClB,CACL,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,IAA8B;IAC/D,OAAO,IAAI,KAAK,MAAM,CAAC;AACzB,CAAC"}
+{"version":3,"file":"fallback.js","sourceRoot":"","sources":["../src/fallback.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,iBAAiB,CAAC,KAKjC;IACC,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAElD,OAAO,CACL,YACE,IAAI,EAAE,GAAG,EACT,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,EAChB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,SAAS,EAAE,SAAS,YAEnB,KAAK,IAAI,UAAU,GAClB,CACL,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,IAA8B;IAC/D,OAAO,IAAI,KAAK,MAAM,CAAC;AACzB,CAAC;AAED,mCAAmC;AACnC,MAAM,UAAU,aAAa,CAAC,KAAmD;IAC/E,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IACxC,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,IAAI,oBAAoB,kBAAS,CAC3D,CAAC;IACJ,CAAC;IACD,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,IAAI,mBAAmB,YAC9C,eAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,aAC/K,eAAM,CAAC,EAAC,4DAA4D,GAAG,EACvE,eAAM,CAAC,EAAC,yBAAyB,GAAG,IAChC,GACF,CACP,CAAC;AACJ,CAAC;AAED,kCAAkC;AAClC,MAAM,UAAU,aAAa,CAAC,KAAmD;IAC/E,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IACxC,OAAO,CACL,cACE,SAAS,EAAE,SAAS,IAAI,mBAAmB,EAC3C,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,YAEvD,eAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,aAC/K,eAAM,CAAC,EAAC,4DAA4D,GAAG,EACvE,eAAM,CAAC,EAAC,yBAAyB,GAAG,EACpC,eAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,GAAG,IAClC,GACF,CACP,CAAC;AACJ,CAAC"}

package/dist/image-viewer.d.ts

@@ -1,3 +1,3 @@
-import type { MediaViewerProps } from "./types";
-export declare function ImageViewer(props: MediaViewerProps): import("react/jsx-runtime").JSX.Element;
+import type { ImageViewerProps } from "./types.js";
+export declare function ImageViewer(props: ImageViewerProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=image-viewer.d.ts.map

package/dist/image-viewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.d.ts","sourceRoot":"","sources":["../src/image-viewer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA+ClD"}
+{"version":3,"file":"image-viewer.d.ts","sourceRoot":"","sources":["../src/image-viewer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,kDA8IlD"}

package/dist/image-viewer.js

@@ -1,8 +1,58 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useInView } from "react-intersection-observer";
+import { Skeleton } from "@ttt-productions/ui-core";
 export function ImageViewer(props) {
-    const { url, alt, className, mediaClassName, enableZoom = true } = props;
+    const { url, alt, className, mediaClassName, enableZoom = true, lazy = true, unloadOnExit = false, priority = false, skeleton: showSkeleton = true, isCircular = false, preventGestures = true, onLoad, onError, fallback, } = props;
+    const [isLoaded, setIsLoaded] = React.useState(false);
+    const [hasError, setHasError] = React.useState(false);
+    const [shouldLoad, setShouldLoad] = React.useState(priority || !lazy);
     const [zoomed, setZoomed] = React.useState(false);
+    const imgRef = React.useRef(null);
+    const { ref: inViewRef, inView } = useInView({
+        triggerOnce: !unloadOnExit,
+        threshold: 0.01,
+        rootMargin: "50px",
+        skip: priority || !lazy,
+    });
+    // Load when entering viewport
+    React.useEffect(() => {
+        if (inView && !shouldLoad) {
+            setShouldLoad(true);
+        }
+        // Unload when leaving viewport (if enabled)
+        if (!inView && unloadOnExit && shouldLoad && !priority) {
+            setShouldLoad(false);
+            setIsLoaded(false);
+        }
+    }, [inView, shouldLoad, unloadOnExit, priority]);
+    // Reset error state when URL changes
+    React.useEffect(() => {
+        setHasError(false);
+        setIsLoaded(false);
+    }, [url]);
+    const handleLoad = React.useCallback(() => {
+        setIsLoaded(true);
+        onLoad?.();
+    }, [onLoad]);
+    const handleError = React.useCallback(() => {
+        setHasError(true);
+        onError?.();
+    }, [onError]);
+    // iOS: prevent multi-touch zoom gestures on the image
+    React.useEffect(() => {
+        const img = imgRef.current;
+        if (!img || !preventGestures)
+            return;
+        const prevent = (e) => {
+            if (e.touches.length > 1)
+                e.preventDefault();
+        };
+        img.addEventListener("touchstart", prevent, { passive: false });
+        return () => {
+            img.removeEventListener("touchstart", prevent);
+        };
+    }, [preventGestures, shouldLoad]);
     const toggleZoom = React.useCallback(() => {
         if (!enableZoom)
             return;
@@ -16,12 +66,25 @@ export function ImageViewer(props) {
             toggleZoom();
         }
     }, [enableZoom, toggleZoom]);
-    return (_jsx("div", { className: className, role: enableZoom ? "button" : undefined, tabIndex: enableZoom ? 0 : undefined, "aria-pressed": enableZoom ? zoomed : undefined, "aria-label": enableZoom ? (zoomed ? "Zoom out image" : "Zoom in image") : undefined, onClick: toggleZoom, onKeyDown: onKeyDown, style: { outline: "none" }, children: _jsx("img", { src: url, alt: alt ?? "", draggable: false, className: mediaClassName, style: {
-                maxWidth: "100%",
-                maxHeight: "100%",
-                transition: "transform 0.15s ease",
-                transform: zoomed ? "scale(1.5)" : "scale(1)",
-                cursor: enableZoom ? (zoomed ? "zoom-out" : "zoom-in") : undefined,
-            } }) }));
+    if (hasError) {
+        return fallback ? _jsx(_Fragment, { children: fallback }) : null;
+    }
+    const wrapperStyle = isCircular
+        ? { borderRadius: "50%", overflow: "hidden" }
+        : {};
+    return (_jsxs("div", { ref: inViewRef, className: className, role: enableZoom ? "button" : undefined, tabIndex: enableZoom ? 0 : undefined, "aria-pressed": enableZoom ? zoomed : undefined, "aria-label": enableZoom ? (zoomed ? "Zoom out image" : "Zoom in image") : undefined, onClick: toggleZoom, onKeyDown: onKeyDown, style: { position: "relative", width: "100%", height: "100%", outline: "none", ...wrapperStyle }, children: [showSkeleton && !isLoaded && shouldLoad && (_jsx(Skeleton, { style: { position: "absolute", inset: 0, width: "100%", height: "100%" } })), shouldLoad && (_jsx("img", { ref: imgRef, src: url, alt: alt ?? "", draggable: false, className: mediaClassName, onLoad: handleLoad, onError: handleError, loading: priority ? "eager" : "lazy", decoding: "async", style: {
+                    maxWidth: "100%",
+                    maxHeight: "100%",
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                    opacity: isLoaded ? 1 : 0,
+                    transition: "opacity 300ms ease, transform 150ms ease",
+                    transform: zoomed ? "scale(1.5)" : "scale(1)",
+                    cursor: enableZoom ? (zoomed ? "zoom-out" : "zoom-in") : undefined,
+                    WebkitUserSelect: "none",
+                    WebkitTouchCallout: "none",
+                    WebkitTapHighlightColor: "transparent",
+                } }))] }));
 }
 //# sourceMappingURL=image-viewer.js.map

package/dist/image-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.js","sourceRoot":"","sources":["../src/image-viewer.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEzE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,IAAI,CAAC,UAAU;YAAE,OAAO;QACxB,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IACvB,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,CAAsB,EAAE,EAAE;QACzB,IAAI,CAAC,UAAU;YAAE,OAAO;QACxB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YACvC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,UAAU,EAAE,CAAC;QACf,CAAC;IACH,CAAC,EACD,CAAC,UAAU,EAAE,UAAU,CAAC,CACzB,CAAC;IAEF,OAAO,CACL,cACE,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACvC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,kBACtB,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,gBACjC,UAAU,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,EAClF,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,YAE1B,cACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,IAAI,EAAE,EACd,SAAS,EAAE,KAAK,EAChB,SAAS,EAAE,cAAc,EACzB,KAAK,EAAE;gBACL,QAAQ,EAAE,MAAM;gBAChB,SAAS,EAAE,MAAM;gBACjB,UAAU,EAAE,sBAAsB;gBAClC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU;gBAC7C,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS;aACnE,GACD,GACE,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"image-viewer.js","sourceRoot":"","sources":["../src/image-viewer.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAGpD,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EACJ,GAAG,EACH,GAAG,EACH,SAAS,EACT,cAAc,EACd,UAAU,GAAG,IAAI,EACjB,IAAI,GAAG,IAAI,EACX,YAAY,GAAG,KAAK,EACpB,QAAQ,GAAG,KAAK,EAChB,QAAQ,EAAE,YAAY,GAAG,IAAI,EAC7B,UAAU,GAAG,KAAK,EAClB,eAAe,GAAG,IAAI,EACtB,MAAM,EACN,OAAO,EACP,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,CAAC;IACtE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEpD,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;QAC3C,WAAW,EAAE,CAAC,YAAY;QAC1B,SAAS,EAAE,IAAI;QACf,UAAU,EAAE,MAAM;QAClB,IAAI,EAAE,QAAQ,IAAI,CAAC,IAAI;KACxB,CAAC,CAAC;IAEH,8BAA8B;IAC9B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;YAC1B,aAAa,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC;QACD,4CAA4C;QAC5C,IAAI,CAAC,MAAM,IAAI,YAAY,IAAI,UAAU,IAAI,CAAC,QAAQ,EAAE,CAAC;YACvD,aAAa,CAAC,KAAK,CAAC,CAAC;YACrB,WAAW,CAAC,KAAK,CAAC,CAAC;QACrB,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEjD,qCAAqC;IACrC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,WAAW,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,WAAW,CAAC,IAAI,CAAC,CAAC;QAClB,MAAM,EAAE,EAAE,CAAC;IACb,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,WAAW,CAAC,IAAI,CAAC,CAAC;QAClB,OAAO,EAAE,EAAE,CAAC;IACd,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,sDAAsD;IACtD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC;QAC3B,IAAI,CAAC,GAAG,IAAI,CAAC,eAAe;YAAE,OAAO;QAErC,MAAM,OAAO,GAAG,CAAC,CAAa,EAAE,EAAE;YAChC,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;gBAAE,CAAC,CAAC,cAAc,EAAE,CAAC;QAC/C,CAAC,CAAC;QAEF,GAAG,CAAC,gBAAgB,CAAC,YAAY,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;QAChE,OAAO,GAAG,EAAE;YACV,GAAG,CAAC,mBAAmB,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;QACjD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC;IAElC,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,IAAI,CAAC,UAAU;YAAE,OAAO;QACxB,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IACvB,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,CAAsB,EAAE,EAAE;QACzB,IAAI,CAAC,UAAU;YAAE,OAAO;QACxB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YACvC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,UAAU,EAAE,CAAC;QACf,CAAC;IACH,CAAC,EACD,CAAC,UAAU,EAAE,UAAU,CAAC,CACzB,CAAC;IAEF,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,QAAQ,CAAC,CAAC,CAAC,4BAAG,QAAQ,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IAC3C,CAAC;IAED,MAAM,YAAY,GAAwB,UAAU;QAClD,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE;QAC7C,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,CACL,eACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACvC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,kBACtB,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,gBACjC,UAAU,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,EAClF,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,YAAY,EAAE,aAE/F,YAAY,IAAI,CAAC,QAAQ,IAAI,UAAU,IAAI,CAC1C,KAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAI,CACvF,EACA,UAAU,IAAI,CACb,cACE,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,IAAI,EAAE,EACd,SAAS,EAAE,KAAK,EAChB,SAAS,EAAE,cAAc,EACzB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EACpC,QAAQ,EAAC,OAAO,EAChB,KAAK,EAAE;oBACL,QAAQ,EAAE,MAAM;oBAChB,SAAS,EAAE,MAAM;oBACjB,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,MAAM;oBACd,SAAS,EAAE,OAAO;oBAClB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBACzB,UAAU,EAAE,0CAA0C;oBACtD,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU;oBAC7C,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS;oBAClE,gBAAgB,EAAE,MAAM;oBACxB,kBAAkB,EAAE,MAAM;oBAC1B,uBAAuB,EAAE,aAAa;iBAChB,GACxB,CACH,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-export { MediaViewer, MediaPreview } from "./media-viewer";
-export type { MediaViewerProps, MediaViewerType, FallbackMode } from "./types";
-export { ImageViewer } from "./image-viewer";
-export { VideoViewer } from "./video-viewer";
-export { AudioViewer } from "./audio-viewer";
-export { MediaFallbackLink, shouldShowFallback } from "./fallback";
+export { MediaViewer, MediaPreview } from "./media-viewer.js";
+export { ImageViewer } from "./image-viewer.js";
+export { VideoViewer } from "./video-viewer.js";
+export { AudioViewer } from "./audio-viewer.js";
+export { MediaFallbackLink, shouldShowFallback, EmptyFallback, ErrorFallback } from "./fallback.js";
+export type { MediaViewerType, FallbackMode, BaseMediaProps, ImageViewerProps, VideoViewerProps, AudioViewerProps, MediaPreviewProps, MediaViewerProps, } from "./types.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE3D,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE/E,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEpG,YAAY,EACV,eAAe,EACf,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -1,6 +1,6 @@
-export { MediaViewer, MediaPreview } from "./media-viewer";
-export { ImageViewer } from "./image-viewer";
-export { VideoViewer } from "./video-viewer";
-export { AudioViewer } from "./audio-viewer";
-export { MediaFallbackLink, shouldShowFallback } from "./fallback";
+export { MediaViewer, MediaPreview } from "./media-viewer.js";
+export { ImageViewer } from "./image-viewer.js";
+export { VideoViewer } from "./video-viewer.js";
+export { AudioViewer } from "./audio-viewer.js";
+export { MediaFallbackLink, shouldShowFallback, EmptyFallback, ErrorFallback } from "./fallback.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAI3D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC"}

package/dist/media-viewer.d.ts

@@ -1,5 +1,5 @@
-import type { MediaViewerProps } from "./types";
-export declare function MediaViewer(props: MediaViewerProps): import("react/jsx-runtime").JSX.Element | null;
+import type { MediaPreviewProps } from "./types.js";
+export declare function MediaViewer(props: MediaPreviewProps): import("react/jsx-runtime").JSX.Element | null;
 /** Back-compat alias */
 export declare const MediaPreview: typeof MediaViewer;
 //# sourceMappingURL=media-viewer.d.ts.map

package/dist/media-viewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"media-viewer.d.ts","sourceRoot":"","sources":["../src/media-viewer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAmB,MAAM,SAAS,CAAC;AAcjE,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,kDAclD;AAED,wBAAwB;AACxB,eAAO,MAAM,YAAY,oBAAc,CAAC"}
+{"version":3,"file":"media-viewer.d.ts","sourceRoot":"","sources":["../src/media-viewer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAiC,MAAM,YAAY,CAAC;AAoBnF,wBAAgB,WAAW,CAAC,KAAK,EAAE,iBAAiB,kDAwJnD;AAED,wBAAwB;AACxB,eAAO,MAAM,YAAY,oBAAc,CAAC"}

package/dist/media-viewer.js

@@ -1,26 +1,81 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
 import { getSimplifiedMediaType } from "@ttt-productions/media-contracts";
-import { MediaFallbackLink, shouldShowFallback } from "./fallback";
-import { ImageViewer } from "./image-viewer";
-import { VideoViewer } from "./video-viewer";
-import { AudioViewer } from "./audio-viewer";
+import { MediaFallbackLink, shouldShowFallback, EmptyFallback, ErrorFallback } from "./fallback.js";
+import { ImageViewer } from "./image-viewer.js";
+import { VideoViewer } from "./video-viewer.js";
+import { AudioViewer } from "./audio-viewer.js";
 function inferType(props) {
-    if (props.type)
-        return props.type;
+    if (props.type) {
+        // Handle MIME strings like "image/png" -> "image"
+        const primary = typeof props.type === "string" ? props.type.split("/")[0] : props.type;
+        if (primary === "image" || primary === "video" || primary === "audio")
+            return primary;
+        if (primary === "other")
+            return "other";
+    }
     const hint = props.mime ?? props.name ?? props.url;
+    if (!hint)
+        return "other";
     const simplified = getSimplifiedMediaType(hint);
     return simplified;
 }
 export function MediaViewer(props) {
-    const { url, className, filename, fallbackMode = "link", fallbackLabel } = props;
-    const t = inferType(props);
-    if (t === "image")
-        return _jsx(ImageViewer, { ...props, type: "image" });
-    if (t === "video")
-        return _jsx(VideoViewer, { ...props, type: "video" });
-    if (t === "audio")
-        return _jsx(AudioViewer, { ...props, type: "audio" });
-    return shouldShowFallback(fallbackMode) ? (_jsx("div", { className: className, children: _jsx(MediaFallbackLink, { url: url, filename: filename, label: fallbackLabel ?? "Download" }) })) : null;
+    const { url, alt, type, className, unloadOnExit, isCircular = false, priority, skeleton, lazy, controls, autoPlay, muted, loop, posterUrl, preload, onLoad, onError, onLoadChange, fallbackMode = "link", fallbackLabel, filename, mime, name, } = props;
+    const [hasError, setHasError] = React.useState(false);
+    const [sourceUrl, setSourceUrl] = React.useState(null);
+    // Handle string / Blob / File / null URLs
+    React.useEffect(() => {
+        setHasError(false);
+        let objectUrl = null;
+        if (typeof url === "string") {
+            setSourceUrl(url);
+        }
+        else if (url instanceof Blob) {
+            objectUrl = URL.createObjectURL(url);
+            setSourceUrl(objectUrl);
+        }
+        else {
+            setSourceUrl(null);
+        }
+        return () => {
+            if (objectUrl)
+                URL.revokeObjectURL(objectUrl);
+        };
+    }, [url]);
+    const handleError = React.useCallback(() => {
+        setHasError(true);
+        onError?.();
+    }, [onError]);
+    const circularStyle = isCircular
+        ? { borderRadius: "50%", overflow: "hidden" }
+        : {};
+    const wrapperStyle = {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        ...circularStyle,
+    };
+    // No URL -> empty fallback
+    if (!sourceUrl) {
+        return (_jsx("div", { className: className, style: wrapperStyle, children: _jsx(EmptyFallback, { isCircular: isCircular }) }));
+    }
+    // Error -> error fallback
+    if (hasError) {
+        return (_jsx("div", { className: className, style: wrapperStyle, children: _jsx(ErrorFallback, { isCircular: isCircular }) }));
+    }
+    const t = inferType({ type, mime, name, url: sourceUrl });
+    if (t === "image") {
+        return (_jsx("div", { className: className, style: wrapperStyle, children: _jsx(ImageViewer, { url: sourceUrl, alt: alt, lazy: lazy, priority: priority, skeleton: skeleton, unloadOnExit: unloadOnExit, isCircular: isCircular, onLoad: onLoad, onError: handleError, fallback: _jsx(ErrorFallback, { isCircular: isCircular }) }) }));
+    }
+    if (t === "video") {
+        return (_jsx("div", { className: className, style: wrapperStyle, children: _jsx(VideoViewer, { url: sourceUrl, lazy: lazy, priority: priority, skeleton: skeleton, unloadOnExit: unloadOnExit, controls: controls, autoPlay: autoPlay, muted: muted, loop: loop, posterUrl: posterUrl, preload: preload, onLoad: onLoad, onError: handleError }) }));
+    }
+    if (t === "audio") {
+        return (_jsx("div", { className: className, style: wrapperStyle, children: _jsx(AudioViewer, { url: sourceUrl, lazy: lazy, priority: priority, skeleton: skeleton, controls: controls, autoPlay: autoPlay, loop: loop, preload: preload, onLoad: onLoad, onLoadChange: onLoadChange, onError: handleError }) }));
+    }
+    // Unknown type -> fallback link
+    return shouldShowFallback(fallbackMode) ? (_jsx("div", { className: className, style: wrapperStyle, children: _jsx(MediaFallbackLink, { url: sourceUrl, filename: filename, label: fallbackLabel ?? "Download" }) })) : null;
 }
 /** Back-compat alias */
 export const MediaPreview = MediaViewer;

package/dist/media-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"media-viewer.js","sourceRoot":"","sources":["../src/media-viewer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAC;AAI1E,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,SAAS,SAAS,CAAC,KAA+D;IAChF,IAAI,KAAK,CAAC,IAAI;QAAE,OAAO,KAAK,CAAC,IAAI,CAAC;IAElC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,GAAG,CAAC;IACnD,MAAM,UAAU,GAAwB,sBAAsB,CAAC,IAAI,CAAC,CAAC;IACrE,OAAO,UAAU,CAAC;AACpB,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,GAAG,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;IAEjF,MAAM,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IAE3B,IAAI,CAAC,KAAK,OAAO;QAAE,OAAO,KAAC,WAAW,OAAK,KAAK,EAAE,IAAI,EAAC,OAAO,GAAG,CAAC;IAClE,IAAI,CAAC,KAAK,OAAO;QAAE,OAAO,KAAC,WAAW,OAAK,KAAK,EAAE,IAAI,EAAC,OAAO,GAAG,CAAC;IAClE,IAAI,CAAC,KAAK,OAAO;QAAE,OAAO,KAAC,WAAW,OAAK,KAAK,EAAE,IAAI,EAAC,OAAO,GAAG,CAAC;IAElE,OAAO,kBAAkB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CACxC,cAAK,SAAS,EAAE,SAAS,YACvB,KAAC,iBAAiB,IAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,IAAI,UAAU,GAAI,GACnF,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC;AAED,wBAAwB;AACxB,MAAM,CAAC,MAAM,YAAY,GAAG,WAAW,CAAC"}
+{"version":3,"file":"media-viewer.js","sourceRoot":"","sources":["../src/media-viewer.tsx"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -1,32 +1,67 @@
+import type * as React from "react";
 export type MediaViewerType = "image" | "video" | "audio" | "other";
 export type FallbackMode = "none" | "link";
-export type MediaViewerProps = {
-    /** If omitted, inferred from mime/name/url. */
-    type?: MediaViewerType;
-    /** Required media URL */
+export type BaseMediaProps = {
     url: string;
-    /** Optional hints for inference */
-    mime?: string;
-    name?: string;
-    /** Optional download filename (fallback link) */
-    filename?: string;
-    /** Wrapper class */
     className?: string;
-    /** Media element class */
     mediaClassName?: string;
-    /** Accessibility for images */
+    lazy?: boolean;
+    priority?: boolean;
+    skeleton?: boolean;
+    onLoad?: () => void;
+    onError?: () => void;
+    fallback?: React.ReactNode;
+};
+export type ImageViewerProps = BaseMediaProps & {
     alt?: string;
-    /** Fallback rendering */
-    fallbackMode?: FallbackMode;
-    fallbackLabel?: string;
-    /** Image */
     enableZoom?: boolean;
-    /** Video */
+    unloadOnExit?: boolean;
+    isCircular?: boolean;
+    preventGestures?: boolean;
+};
+export type VideoViewerProps = BaseMediaProps & {
     controls?: boolean;
     autoPlay?: boolean;
     muted?: boolean;
     loop?: boolean;
     posterUrl?: string;
     enableFullscreen?: boolean;
+    unloadOnExit?: boolean;
+    preload?: "auto" | "metadata" | "none";
+    autoPlayOnVisible?: boolean;
+};
+export type AudioViewerProps = BaseMediaProps & {
+    controls?: boolean;
+    autoPlay?: boolean;
+    loop?: boolean;
+    preload?: "auto" | "metadata" | "none";
+    onLoadChange?: (isLoading: boolean) => void;
+};
+export type MediaPreviewProps = {
+    url?: string | File | Blob | null;
+    alt?: string;
+    type?: MediaViewerType | string;
+    className?: string;
+    unloadOnExit?: boolean;
+    isCircular?: boolean;
+    priority?: boolean;
+    skeleton?: boolean;
+    lazy?: boolean;
+    controls?: boolean;
+    autoPlay?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    posterUrl?: string;
+    preload?: "auto" | "metadata" | "none";
+    onLoad?: () => void;
+    onError?: () => void;
+    onLoadChange?: (isLoading: boolean) => void;
+    fallbackMode?: FallbackMode;
+    fallbackLabel?: string;
+    filename?: string;
+    mime?: string;
+    name?: string;
 };
+/** Back-compat alias */
+export type MediaViewerProps = MediaPreviewProps;
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AACpE,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,eAAe,CAAC;IAEvB,yBAAyB;IACzB,GAAG,EAAE,MAAM,CAAC;IAEZ,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,0BAA0B;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,+BAA+B;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,yBAAyB;IACzB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,YAAY;IACZ,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,YAAY;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAI5B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/dist/video-viewer.d.ts

@@ -1,3 +1,3 @@
-import type { MediaViewerProps } from "./types";
-export declare function VideoViewer(props: MediaViewerProps): import("react/jsx-runtime").JSX.Element;
+import type { VideoViewerProps } from "./types.js";
+export declare function VideoViewer(props: VideoViewerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=video-viewer.d.ts.map

package/dist/video-viewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"video-viewer.d.ts","sourceRoot":"","sources":["../src/video-viewer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAsElD"}
+{"version":3,"file":"video-viewer.d.ts","sourceRoot":"","sources":["../src/video-viewer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAgLlD"}

package/dist/video-viewer.js

@@ -1,8 +1,70 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useInView } from "react-intersection-observer";
+import { Skeleton } from "@ttt-productions/ui-core";
 export function VideoViewer(props) {
-    const { url, className, mediaClassName, controls = true, autoPlay, muted, loop, posterUrl, enableFullscreen = true, } = props;
+    const { url, className, mediaClassName, controls = true, autoPlay = false, muted, loop = false, posterUrl, enableFullscreen = true, lazy = true, unloadOnExit = true, priority = false, skeleton: showSkeleton = true, preload = "metadata", autoPlayOnVisible = false, onLoad, onError, fallback, } = props;
+    const resolvedMuted = muted ?? autoPlay;
+    const [isLoaded, setIsLoaded] = React.useState(false);
+    const [hasError, setHasError] = React.useState(false);
+    const [shouldLoad, setShouldLoad] = React.useState(priority || !lazy);
     const videoRef = React.useRef(null);
+    const { ref: inViewRef, inView } = useInView({
+        triggerOnce: !unloadOnExit,
+        threshold: 0.01,
+        rootMargin: "200px",
+        skip: priority || !lazy,
+    });
+    // Load/unload based on viewport
+    React.useEffect(() => {
+        if (inView && !shouldLoad) {
+            setShouldLoad(true);
+        }
+        if (!inView && unloadOnExit && shouldLoad && !priority) {
+            const video = videoRef.current;
+            if (video) {
+                video.pause();
+                video.removeAttribute("src");
+                video.load();
+            }
+            setIsLoaded(false);
+            setShouldLoad(false);
+        }
+    }, [inView, shouldLoad, unloadOnExit, priority]);
+    // Reset state when URL changes
+    React.useEffect(() => {
+        setHasError(false);
+        setIsLoaded(false);
+    }, [url]);
+    const handleLoadedData = React.useCallback(() => {
+        setIsLoaded(true);
+        onLoad?.();
+    }, [onLoad]);
+    const handleError = React.useCallback(() => {
+        setHasError(true);
+        onError?.();
+    }, [onError]);
+    // Autoplay on visible / pause on exit
+    React.useEffect(() => {
+        const video = videoRef.current;
+        if (!video || !shouldLoad || (!autoPlayOnVisible && !autoPlay))
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    if (video.paused) {
+                        video.play().catch(() => { });
+                    }
+                }
+                else if (!video.paused) {
+                    video.pause();
+                }
+            }
+        }, { threshold: 0.5 });
+        observer.observe(video);
+        return () => observer.disconnect();
+    }, [autoPlayOnVisible, autoPlay, shouldLoad]);
+    // Fullscreen
     const requestFullscreen = React.useCallback(() => {
         if (!enableFullscreen)
             return;
@@ -17,9 +79,7 @@ export function VideoViewer(props) {
             try {
                 fn.call(el);
             }
-            catch {
-                // ignore
-            }
+            catch { /* ignore */ }
         }
     }, [enableFullscreen]);
     const onKeyDown = React.useCallback((e) => {
@@ -30,6 +90,20 @@ export function VideoViewer(props) {
             requestFullscreen();
         }
     }, [enableFullscreen, requestFullscreen]);
-    return (_jsx("div", { className: className, role: enableFullscreen ? "button" : undefined, tabIndex: enableFullscreen ? 0 : undefined, "aria-label": enableFullscreen ? "Open video fullscreen" : undefined, onDoubleClick: requestFullscreen, onKeyDown: onKeyDown, style: { outline: "none" }, children: _jsx("video", { ref: videoRef, src: url, className: mediaClassName, controls: controls, autoPlay: autoPlay, muted: muted, loop: loop, playsInline: true, poster: posterUrl, style: { width: "100%", height: "100%" } }) }));
+    if (hasError) {
+        if (fallback)
+            return _jsx(_Fragment, { children: fallback });
+        return (_jsx("div", { className: className, children: _jsx("div", { className: "mv-video-error", children: _jsx("p", { children: "Failed to load video" }) }) }));
+    }
+    return (_jsxs("div", { ref: inViewRef, className: className, role: enableFullscreen ? "button" : undefined, tabIndex: enableFullscreen ? 0 : undefined, "aria-label": enableFullscreen ? "Open video fullscreen" : undefined, onDoubleClick: requestFullscreen, onKeyDown: onKeyDown, style: { position: "relative", width: "100%", height: "100%", overflow: "hidden", outline: "none" }, children: [showSkeleton && !isLoaded && shouldLoad && (_jsx(Skeleton, { style: { position: "absolute", inset: 0, width: "100%", height: "100%" } })), shouldLoad && (_jsx("video", { ref: videoRef, src: url, className: mediaClassName, controls: controls, autoPlay: autoPlay, muted: resolvedMuted, loop: loop, poster: posterUrl, onLoadedData: handleLoadedData, onError: handleError, preload: priority ? "auto" : preload, playsInline: true, style: {
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                    opacity: isLoaded ? 1 : 0,
+                    transition: "opacity 300ms ease",
+                    WebkitUserSelect: "none",
+                    WebkitTouchCallout: "none",
+                    WebkitTapHighlightColor: "transparent",
+                } }))] }));
 }
 //# sourceMappingURL=video-viewer.js.map

package/dist/video-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"video-viewer.js","sourceRoot":"","sources":["../src/video-viewer.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EACJ,GAAG,EACH,SAAS,EACT,cAAc,EACd,QAAQ,GAAG,IAAI,EACf,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,SAAS,EACT,gBAAgB,GAAG,IAAI,GACxB,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAA0B,IAAI,CAAC,CAAC;IAE7D,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC/C,IAAI,CAAC,gBAAgB;YAAE,OAAO;QAC9B,MAAM,EAAE,GAAG,QAAQ,CAAC,OAAc,CAAC;QACnC,IAAI,CAAC,EAAE;YAAE,OAAO;QAEhB,MAAM,EAAE,GACN,EAAE,CAAC,iBAAiB;YACpB,EAAE,CAAC,uBAAuB;YAC1B,EAAE,CAAC,oBAAoB;YACvB,EAAE,CAAC,mBAAmB,CAAC;QAEzB,IAAI,OAAO,EAAE,KAAK,UAAU,EAAE,CAAC;YAC7B,IAAI,CAAC;gBACH,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACd,CAAC;YAAC,MAAM,CAAC;gBACP,SAAS;YACX,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,CAAsB,EAAE,EAAE;QACzB,IAAI,CAAC,gBAAgB;YAAE,OAAO;QAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YACvC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,iBAAiB,EAAE,CAAC;QACtB,CAAC;IACH,CAAC,EACD,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CACtC,CAAC;IAEF,OAAO,CACL,cACE,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC7C,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,gBAC9B,gBAAgB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,SAAS,EAClE,aAAa,EAAE,iBAAiB,EAChC,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,YAE1B,gBACE,GAAG,EAAE,QAAQ,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,cAAc,EACzB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,WAAW,QACX,MAAM,EAAE,SAAS,EACjB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GACxC,GACE,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"video-viewer.js","sourceRoot":"","sources":["../src/video-viewer.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ttt-productions/media-viewer",
-    "version": "0.2.9",
+    "version": "0.2.11",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/ttt-productions/ttt-packages.git",
@@ -12,13 +12,15 @@
     "types": "dist/index.d.ts",
     "sideEffects": false,
     "files": [
-        "dist"
+        "dist",
+        "src/styles"
     ],
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
             "default": "./dist/index.js"
-        }
+        },
+        "./styles": "./src/styles/media-viewer.css"
     },
     "scripts": {
         "build": "tsc",
@@ -33,7 +35,8 @@
     "peerDependencies": {
         "react": ">=18.0.0",
         "react-dom": ">=18.0.0",
-        "lucide-react": ">=0.0.0"
+        "lucide-react": ">=0.0.0",
+        "react-intersection-observer": ">=9.0.0"
     },
     "devDependencies": {
         "typescript": "^5.8.3"

package/src/styles/media-viewer.css

@@ -0,0 +1,95 @@
+/* @ttt-productions/media-viewer styles */
+
+/* Skeleton fallback (CSS-only, for environments without ui-core) */
+.mv-skeleton {
+  background: hsl(var(--muted, 220 14% 96%));
+  animation: mv-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  border-radius: var(--radius, 0.375rem);
+}
+
+@keyframes mv-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+/* Error fallback */
+.mv-error-fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: hsl(var(--destructive, 0 84% 60%) / 0.1);
+}
+
+.mv-error-fallback svg {
+  width: 50%;
+  height: 50%;
+  max-width: 4rem;
+  max-height: 4rem;
+  color: hsl(var(--destructive, 0 84% 60%) / 0.8);
+}
+
+/* Empty fallback */
+.mv-empty-fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: hsl(var(--muted, 220 14% 96%));
+}
+
+.mv-empty-fallback svg {
+  width: 50%;
+  height: 50%;
+  max-width: 4rem;
+  max-height: 4rem;
+  color: hsl(var(--muted-foreground, 220 9% 46%));
+}
+
+/* Avatar/circular empty fallback */
+.mv-avatar-fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: hsl(var(--muted, 220 14% 96%));
+  font-size: 1.125rem;
+  color: hsl(var(--muted-foreground, 220 9% 46%));
+}
+
+/* Video error state */
+.mv-video-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: hsl(var(--muted, 220 14% 96%));
+  border-radius: var(--radius, 0.375rem);
+}
+
+.mv-video-error p {
+  color: hsl(var(--muted-foreground, 220 9% 46%));
+  font-size: 0.875rem;
+}
+
+/* Audio error state */
+.mv-audio-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: hsl(var(--muted, 220 14% 96%));
+  border-radius: var(--radius, 0.375rem);
+  padding: 1rem;
+  height: 3.5rem;
+}
+
+.mv-audio-error p {
+  color: hsl(var(--destructive, 0 84% 60%));
+  font-size: 0.75rem;
+}