yet-another-react-lightbox 2.3.1 → 2.4.0

package/dist/plugins/captions/CaptionsContext.js

@@ -1,15 +1,11 @@
 import * as React from "react";
-import { isDefined, isNumber, makeUseContext, useEvents } from "../../core/index.js";
+import { makeUseContext, useEvents, YARL_EVENT_TOOLBAR_WIDTH } from "../../core/index.js";
 const CaptionsContext = React.createContext(null);
 export const useCaptions = makeUseContext("useCaptions", "CaptionsContext", CaptionsContext);
 export const CaptionsContextProvider = ({ children }) => {
     const { subscribe } = useEvents();
     const [toolbarWidth, setToolbarWidth] = React.useState();
-    React.useEffect(() => subscribe("toolbar-width", (event) => {
-        if (!isDefined(event) || isNumber(event)) {
-            setToolbarWidth(event);
-        }
-    }), [subscribe]);
+    React.useEffect(() => subscribe(YARL_EVENT_TOOLBAR_WIDTH, (event) => setToolbarWidth(event)), [subscribe]);
     const context = React.useMemo(() => ({ toolbarWidth }), [toolbarWidth]);
     return React.createElement(CaptionsContext.Provider, { value: context }, children);
 };

package/dist/plugins/fullscreen/Fullscreen.js

@@ -4,13 +4,7 @@ import { FullscreenButton } from "./FullscreenButton.js";
 import { FullscreenContextProvider } from "./FullscreenContext.js";
 export const Fullscreen = ({ augment, contains, addParent }) => {
     augment(({ toolbar: { buttons, ...restToolbar }, ...restProps }) => ({
-        toolbar: {
-            buttons: [
-                React.createElement(FullscreenButton, { key: PLUGIN_FULLSCREEN, auto: Boolean(restProps.fullscreen), labels: restProps.labels, render: restProps.render }),
-                ...buttons,
-            ],
-            ...restToolbar,
-        },
+        toolbar: { buttons: [React.createElement(FullscreenButton, { key: PLUGIN_FULLSCREEN }), ...buttons], ...restToolbar },
         ...restProps,
     }));
     addParent(contains(PLUGIN_THUMBNAILS) ? PLUGIN_THUMBNAILS : MODULE_CONTROLLER, createModule(PLUGIN_FULLSCREEN, FullscreenContextProvider));

package/dist/plugins/fullscreen/FullscreenButton.d.ts

@@ -1,8 +1,3 @@
 import * as React from "react";
-import { LightboxProps } from "../../types.js";
-/** Fullscreen button props */
-export type FullscreenButtonProps = Pick<LightboxProps, "labels" | "render"> & {
-    auto: boolean;
-};
 /** Fullscreen button */
-export declare const FullscreenButton: React.FC<FullscreenButtonProps>;
+export declare const FullscreenButton: React.FC;

package/dist/plugins/fullscreen/FullscreenButton.js

@@ -1,106 +1,13 @@
 import * as React from "react";
-import { createIcon, IconButton, label, useEventCallback } from "../../core/index.js";
+import { createIcon, IconButton, label, useController } from "../../core/index.js";
 import { useFullscreen } from "./FullscreenContext.js";
 const EnterFullscreenIcon = createIcon("EnterFullscreen", React.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }));
 const ExitFullscreenIcon = createIcon("ExitFullscreen", React.createElement("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }));
-export const FullscreenButton = ({ auto, labels, render }) => {
+export const FullscreenButton = () => {
     var _a;
-    const [mounted, setMounted] = React.useState(false);
-    const [fullscreen, setFullscreen] = React.useState(false);
-    const containerRef = useFullscreen();
-    const isFullscreenEnabled = () => {
-        var _a, _b, _c, _d;
-        return (_d = (_c = (_b = (_a = document.fullscreenEnabled) !== null && _a !== void 0 ? _a : document.webkitFullscreenEnabled) !== null && _b !== void 0 ? _b : document.mozFullScreenEnabled) !== null && _c !== void 0 ? _c : document.msFullscreenEnabled) !== null && _d !== void 0 ? _d : false;
-    };
-    const getFullscreenElement = React.useCallback(() => {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = document.fullscreenElement) !== null && _a !== void 0 ? _a : document.webkitFullscreenElement) !== null && _b !== void 0 ? _b : document.mozFullScreenElement) !== null && _c !== void 0 ? _c : document.msFullscreenElement;
-    }, []);
-    const requestFullscreen = React.useCallback(() => {
-        const container = containerRef.current;
-        if (container) {
-            try {
-                if (container.requestFullscreen) {
-                    container.requestFullscreen().catch(() => { });
-                }
-                else if (container.webkitRequestFullscreen) {
-                    container.webkitRequestFullscreen();
-                }
-                else if (container.mozRequestFullScreen) {
-                    container.mozRequestFullScreen();
-                }
-                else if (container.msRequestFullscreen) {
-                    container.msRequestFullscreen();
-                }
-            }
-            catch (err) {
-            }
-        }
-    }, [containerRef]);
-    const exitFullscreen = React.useCallback(() => {
-        if (getFullscreenElement()) {
-            try {
-                if (document.exitFullscreen) {
-                    document.exitFullscreen().catch(() => { });
-                }
-                else if (document.webkitExitFullscreen) {
-                    document.webkitExitFullscreen();
-                }
-                else if (document.mozCancelFullScreen) {
-                    document.mozCancelFullScreen();
-                }
-                else if (document.msExitFullscreen) {
-                    document.msExitFullscreen();
-                }
-            }
-            catch (err) {
-            }
-        }
-    }, [getFullscreenElement]);
-    const toggleFullscreen = React.useCallback(() => {
-        if (fullscreen) {
-            exitFullscreen();
-        }
-        else {
-            requestFullscreen();
-        }
-    }, [fullscreen, requestFullscreen, exitFullscreen]);
-    const fullscreenChangeListener = React.useCallback(() => {
-        if (getFullscreenElement() === containerRef.current) {
-            setFullscreen(true);
-        }
-        else {
-            setFullscreen(false);
-        }
-    }, [containerRef, getFullscreenElement]);
-    React.useEffect(() => {
-        setMounted(true);
-        return () => setMounted(false);
-    }, []);
-    React.useEffect(() => {
-        const events = ["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "MSFullscreenChange"];
-        events.forEach((event) => {
-            document.addEventListener(event, fullscreenChangeListener);
-        });
-        return () => {
-            events.forEach((event) => {
-                document.removeEventListener(event, fullscreenChangeListener);
-            });
-        };
-    }, [fullscreenChangeListener]);
-    const handleAutoFullscreen = useEventCallback(() => {
-        if (auto) {
-            requestFullscreen();
-        }
-    });
-    React.useEffect(() => {
-        handleAutoFullscreen();
-        return () => {
-            exitFullscreen();
-        };
-    }, [handleAutoFullscreen, exitFullscreen]);
-    if (!mounted || !isFullscreenEnabled())
+    const { labels, render } = useController().getLightboxProps();
+    const { fullscreen, fullscreenEnabled, toggleFullscreen } = useFullscreen();
+    if (!fullscreenEnabled)
         return null;
-    const customButton = (_a = render.buttonFullscreen) === null || _a === void 0 ? void 0 : _a.call(render, { fullscreen, toggleFullscreen });
-    return customButton === undefined ? (React.createElement(IconButton, { label: fullscreen ? label(labels, "Exit Fullscreen") : label(labels, "Enter Fullscreen"), icon: fullscreen ? ExitFullscreenIcon : EnterFullscreenIcon, renderIcon: fullscreen ? render.iconExitFullscreen : render.iconEnterFullscreen, onClick: toggleFullscreen })) : (React.createElement(React.Fragment, null, customButton));
+    return render.buttonFullscreen ? (React.createElement(React.Fragment, null, (_a = render.buttonFullscreen) === null || _a === void 0 ? void 0 : _a.call(render, { fullscreen, fullscreenEnabled, toggleFullscreen }))) : (React.createElement(IconButton, { disabled: !fullscreenEnabled, label: fullscreen ? label(labels, "Exit Fullscreen") : label(labels, "Enter Fullscreen"), icon: fullscreen ? ExitFullscreenIcon : EnterFullscreenIcon, renderIcon: fullscreen ? render.iconExitFullscreen : render.iconEnterFullscreen, onClick: toggleFullscreen }));
 };

package/dist/plugins/fullscreen/FullscreenContext.d.ts

@@ -1,5 +1,9 @@
-import * as React from "react";
-type FullscreenContextType = React.RefObject<HTMLDivElement>;
+import { Component } from "../../types.js";
+type FullscreenContextType = {
+    fullscreen: boolean;
+    fullscreenEnabled?: boolean;
+    toggleFullscreen: () => void;
+};
 export declare const useFullscreen: () => FullscreenContextType;
-export declare const FullscreenContextProvider: React.FC<React.PropsWithChildren>;
+export declare const FullscreenContextProvider: Component;
 export {};

package/dist/plugins/fullscreen/FullscreenContext.js

@@ -1,9 +1,103 @@
 import * as React from "react";
-import { CLASS_FULLSIZE, clsx, cssClass, makeUseContext, PLUGIN_FULLSCREEN } from "../../core/index.js";
+import { CLASS_FULLSIZE, clsx, cssClass, makeUseContext, PLUGIN_FULLSCREEN, useEventCallback, useLayoutEffect, } from "../../core/index.js";
 const FullscreenContext = React.createContext(null);
 export const useFullscreen = makeUseContext("useFullscreen", "FullscreenContext", FullscreenContext);
-export const FullscreenContextProvider = ({ children }) => {
+export const FullscreenContextProvider = ({ fullscreen: auto, children }) => {
     const containerRef = React.useRef(null);
+    const [fullscreen, setFullscreen] = React.useState(false);
+    const [fullscreenEnabled, setFullscreenEnabled] = React.useState();
+    useLayoutEffect(() => {
+        var _a, _b, _c, _d;
+        setFullscreenEnabled((_d = (_c = (_b = (_a = document.fullscreenEnabled) !== null && _a !== void 0 ? _a : document.webkitFullscreenEnabled) !== null && _b !== void 0 ? _b : document.mozFullScreenEnabled) !== null && _c !== void 0 ? _c : document.msFullscreenEnabled) !== null && _d !== void 0 ? _d : false);
+    }, []);
+    const getFullscreenElement = React.useCallback(() => {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = document.fullscreenElement) !== null && _a !== void 0 ? _a : document.webkitFullscreenElement) !== null && _b !== void 0 ? _b : document.mozFullScreenElement) !== null && _c !== void 0 ? _c : document.msFullscreenElement;
+    }, []);
+    const requestFullscreen = React.useCallback(() => {
+        const container = containerRef.current;
+        if (container) {
+            try {
+                if (container.requestFullscreen) {
+                    container.requestFullscreen().catch(() => { });
+                }
+                else if (container.webkitRequestFullscreen) {
+                    container.webkitRequestFullscreen();
+                }
+                else if (container.mozRequestFullScreen) {
+                    container.mozRequestFullScreen();
+                }
+                else if (container.msRequestFullscreen) {
+                    container.msRequestFullscreen();
+                }
+            }
+            catch (err) {
+            }
+        }
+    }, []);
+    const exitFullscreen = React.useCallback(() => {
+        if (getFullscreenElement()) {
+            try {
+                if (document.exitFullscreen) {
+                    document.exitFullscreen().catch(() => { });
+                }
+                else if (document.webkitExitFullscreen) {
+                    document.webkitExitFullscreen();
+                }
+                else if (document.mozCancelFullScreen) {
+                    document.mozCancelFullScreen();
+                }
+                else if (document.msExitFullscreen) {
+                    document.msExitFullscreen();
+                }
+            }
+            catch (err) {
+            }
+        }
+    }, [getFullscreenElement]);
+    const toggleFullscreen = React.useCallback(() => {
+        if (fullscreen) {
+            exitFullscreen();
+        }
+        else {
+            requestFullscreen();
+        }
+    }, [fullscreen, requestFullscreen, exitFullscreen]);
+    const fullscreenChangeListener = React.useCallback(() => {
+        if (getFullscreenElement() === containerRef.current) {
+            setFullscreen(true);
+        }
+        else {
+            setFullscreen(false);
+        }
+    }, [getFullscreenElement]);
+    React.useEffect(() => {
+        const events = ["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "MSFullscreenChange"];
+        events.forEach((event) => {
+            document.addEventListener(event, fullscreenChangeListener);
+        });
+        return () => {
+            events.forEach((event) => {
+                document.removeEventListener(event, fullscreenChangeListener);
+            });
+        };
+    }, [fullscreenChangeListener]);
+    const handleAutoFullscreen = useEventCallback(() => {
+        if (auto) {
+            requestFullscreen();
+        }
+    });
+    React.useEffect(() => {
+        handleAutoFullscreen();
+        return () => {
+            exitFullscreen();
+        };
+    }, [handleAutoFullscreen, exitFullscreen]);
+    const context = React.useMemo(() => ({
+        fullscreen,
+        fullscreenEnabled,
+        toggleFullscreen,
+    }), [fullscreen, fullscreenEnabled, toggleFullscreen]);
     return (React.createElement("div", { ref: containerRef, className: clsx(cssClass(PLUGIN_FULLSCREEN), cssClass(CLASS_FULLSIZE)) },
-        React.createElement(FullscreenContext.Provider, { value: containerRef }, children)));
+        React.createElement(FullscreenContext.Provider, { value: context }, children)));
 };

package/dist/plugins/fullscreen/index.d.ts

@@ -7,8 +7,9 @@ declare module "../../types" {
     }
     interface Render {
         /** render custom Enter/Exit Fullscreen button */
-        buttonFullscreen?: ({ fullscreen, toggleFullscreen, }: {
+        buttonFullscreen?: ({ fullscreen, fullscreenEnabled, toggleFullscreen, }: {
             fullscreen: boolean;
+            fullscreenEnabled: boolean | undefined;
             toggleFullscreen: () => void;
         }) => React.ReactNode;
         /** render custom Enter Fullscreen icon */

package/dist/plugins/slideshow/Slideshow.js

@@ -1,20 +1,16 @@
 import * as React from "react";
+import { createModule, MODULE_CONTROLLER, PLUGIN_SLIDESHOW } from "../../core/index.js";
+import { SlideshowContextProvider } from "./SlideshowContext.js";
 import { SlideshowButton } from "./SlideshowButton.js";
-import { PLUGIN_SLIDESHOW } from "../../core/index.js";
 export const defaultSlideshowProps = {
     autoplay: false,
     delay: 3000,
 };
-export const Slideshow = ({ augment }) => {
-    augment(({ slideshow: originalSlideshow, toolbar: { buttons, ...restToolbar }, ...restProps }) => ({
-        toolbar: {
-            buttons: [React.createElement(SlideshowButton, { key: PLUGIN_SLIDESHOW }), ...buttons],
-            ...restToolbar,
-        },
-        slideshow: {
-            ...defaultSlideshowProps,
-            ...originalSlideshow,
-        },
+export const Slideshow = ({ augment, append }) => {
+    augment(({ slideshow: slideshowProps, toolbar: { buttons, ...restToolbar }, ...restProps }) => ({
+        toolbar: { buttons: [React.createElement(SlideshowButton, { key: PLUGIN_SLIDESHOW }), ...buttons], ...restToolbar },
+        slideshow: { ...defaultSlideshowProps, ...slideshowProps },
         ...restProps,
     }));
+    append(MODULE_CONTROLLER, createModule(PLUGIN_SLIDESHOW, SlideshowContextProvider));
 };

package/dist/plugins/slideshow/SlideshowButton.js

@@ -1,61 +1,12 @@
 import * as React from "react";
-import { ACTION_NEXT, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, cleanup, createIcon, IconButton, label, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLAYING, useController, useEventCallback, useEvents, useLightboxState, useTimeouts, } from "../../core/index.js";
-import { defaultSlideshowProps } from "./Slideshow.js";
+import { createIcon, IconButton, label, useController, useLoseFocus } from "../../core/index.js";
+import { useSlideshow } from "./SlideshowContext.js";
 const PlayIcon = createIcon("Play", React.createElement("path", { d: "M8 5v14l11-7z" }));
 const PauseIcon = createIcon("Pause", React.createElement("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }));
 export const SlideshowButton = () => {
-    const { state: { currentIndex }, } = useLightboxState();
+    const { playing, disabled, togglePlaying } = useSlideshow();
     const { getLightboxProps } = useController();
-    const { setTimeout, clearTimeout } = useTimeouts();
-    const { publish, subscribe } = useEvents();
-    const { slideshow: slideshowProps, carousel: { finite }, slides, render, labels, } = getLightboxProps();
-    const slidesCount = slides.length;
-    const slideshow = { ...defaultSlideshowProps, ...slideshowProps };
-    const [playing, setPlaying] = React.useState(slideshow.autoplay);
-    const scheduler = React.useRef();
-    const slideStatus = React.useRef();
-    const cancelScheduler = React.useCallback(() => {
-        clearTimeout(scheduler.current);
-        scheduler.current = undefined;
-    }, [clearTimeout]);
-    const reachedLastSlide = useEventCallback(() => slides.length === 0 || (finite && currentIndex === slidesCount - 1));
-    const scheduleNextSlide = useEventCallback(() => {
-        cancelScheduler();
-        if (!playing ||
-            reachedLastSlide() ||
-            slideStatus.current === SLIDE_STATUS_LOADING ||
-            slideStatus.current === SLIDE_STATUS_PLAYING) {
-            return;
-        }
-        scheduler.current = setTimeout(() => {
-            if (playing) {
-                slideStatus.current = undefined;
-                publish(ACTION_NEXT);
-            }
-        }, slideshow.delay);
-    });
-    const togglePlaying = React.useCallback(() => {
-        setPlaying((prev) => !prev);
-    }, []);
-    React.useEffect(scheduleNextSlide, [currentIndex, playing, scheduleNextSlide]);
-    React.useEffect(() => {
-        if (playing && reachedLastSlide()) {
-            setPlaying(false);
-        }
-    }, [currentIndex, playing, reachedLastSlide]);
-    React.useEffect(() => cleanup(subscribe(ACTIVE_SLIDE_LOADING, () => {
-        slideStatus.current = SLIDE_STATUS_LOADING;
-        cancelScheduler();
-    }), subscribe(ACTIVE_SLIDE_PLAYING, () => {
-        slideStatus.current = SLIDE_STATUS_PLAYING;
-        cancelScheduler();
-    }), subscribe(ACTIVE_SLIDE_ERROR, () => {
-        slideStatus.current = SLIDE_STATUS_ERROR;
-        scheduleNextSlide();
-    }), subscribe(ACTIVE_SLIDE_COMPLETE, () => {
-        slideStatus.current = SLIDE_STATUS_COMPLETE;
-        scheduleNextSlide();
-    }), cancelScheduler), [subscribe, cancelScheduler, scheduleNextSlide]);
-    const disabled = reachedLastSlide();
-    return render.buttonSlideshow ? (React.createElement(React.Fragment, null, render.buttonSlideshow({ playing, togglePlaying, disabled }))) : (React.createElement(IconButton, { label: playing ? label(labels, "Pause") : label(labels, "Play"), icon: playing ? PauseIcon : PlayIcon, renderIcon: playing ? render.iconSlideshowPause : render.iconSlideshowPlay, onClick: togglePlaying, disabled: disabled, "aria-disabled": disabled }));
+    const { render, labels } = getLightboxProps();
+    const focusListeners = useLoseFocus(disabled);
+    return render.buttonSlideshow ? (React.createElement(React.Fragment, null, render.buttonSlideshow({ playing, togglePlaying, disabled }))) : (React.createElement(IconButton, { label: playing ? label(labels, "Pause") : label(labels, "Play"), icon: playing ? PauseIcon : PlayIcon, renderIcon: playing ? render.iconSlideshowPause : render.iconSlideshowPlay, onClick: togglePlaying, disabled: disabled, ...focusListeners }));
 };

package/dist/plugins/slideshow/SlideshowContext.d.ts

@@ -0,0 +1,9 @@
+import { Component } from "../../types.js";
+type SlideshowContextType = {
+    playing: boolean;
+    disabled: boolean;
+    togglePlaying: () => void;
+};
+export declare const useSlideshow: () => SlideshowContextType;
+export declare const SlideshowContextProvider: Component;
+export {};

package/dist/plugins/slideshow/SlideshowContext.js

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { ACTION_NEXT, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, cleanup, makeUseContext, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLAYING, useEventCallback, useEvents, useLightboxState, useTimeouts, } from "../../core/index.js";
+import { defaultSlideshowProps } from "./Slideshow.js";
+const SlideshowContext = React.createContext(null);
+export const useSlideshow = makeUseContext("useSlideshow", "SlideshowContext", SlideshowContext);
+export const SlideshowContextProvider = ({ slides, slideshow, carousel: { finite }, children }) => {
+    const { autoplay, delay } = { ...defaultSlideshowProps, ...slideshow };
+    const [playing, setPlaying] = React.useState(autoplay);
+    const scheduler = React.useRef();
+    const slideStatus = React.useRef();
+    const { currentIndex } = useLightboxState().state;
+    const { setTimeout, clearTimeout } = useTimeouts();
+    const { publish, subscribe } = useEvents();
+    const disabled = slides.length === 0 || (finite && currentIndex === slides.length - 1);
+    const togglePlaying = React.useCallback(() => {
+        setPlaying((prev) => !prev);
+    }, []);
+    const cancelScheduler = React.useCallback(() => {
+        clearTimeout(scheduler.current);
+        scheduler.current = undefined;
+    }, [clearTimeout]);
+    const scheduleNextSlide = useEventCallback(() => {
+        cancelScheduler();
+        if (!playing ||
+            disabled ||
+            slideStatus.current === SLIDE_STATUS_LOADING ||
+            slideStatus.current === SLIDE_STATUS_PLAYING) {
+            return;
+        }
+        scheduler.current = setTimeout(() => {
+            if (playing) {
+                slideStatus.current = undefined;
+                publish(ACTION_NEXT);
+            }
+        }, delay);
+    });
+    React.useEffect(scheduleNextSlide, [currentIndex, playing, scheduleNextSlide]);
+    React.useEffect(() => {
+        if (playing && disabled) {
+            setPlaying(false);
+        }
+    }, [currentIndex, playing, disabled]);
+    React.useEffect(() => cleanup(cancelScheduler, subscribe(ACTIVE_SLIDE_LOADING, () => {
+        slideStatus.current = SLIDE_STATUS_LOADING;
+        cancelScheduler();
+    }), subscribe(ACTIVE_SLIDE_PLAYING, () => {
+        slideStatus.current = SLIDE_STATUS_PLAYING;
+        cancelScheduler();
+    }), subscribe(ACTIVE_SLIDE_ERROR, () => {
+        slideStatus.current = SLIDE_STATUS_ERROR;
+        scheduleNextSlide();
+    }), subscribe(ACTIVE_SLIDE_COMPLETE, () => {
+        slideStatus.current = SLIDE_STATUS_COMPLETE;
+        scheduleNextSlide();
+    })), [subscribe, cancelScheduler, scheduleNextSlide]);
+    const context = React.useMemo(() => ({ playing, disabled, togglePlaying }), [playing, disabled, togglePlaying]);
+    return React.createElement(SlideshowContext.Provider, { value: context }, children);
+};

package/dist/plugins/thumbnails/ThumbnailsContainer.js

@@ -3,10 +3,10 @@ import { clsx, cssClass } from "../../core/index.js";
 import { cssPrefix } from "./utils.js";
 import { ThumbnailsTrack } from "./ThumbnailsTrack.js";
 import { defaultThumbnailsProps } from "./Thumbnails.js";
-export const ThumbnailsComponent = ({ thumbnails: thumbnailsProps, slides, index, carousel, animation, render, styles, children, }) => {
+export const ThumbnailsComponent = ({ thumbnails: thumbnailsProps, slides, carousel, animation, render, styles, children, }) => {
     const thumbnails = { ...defaultThumbnailsProps, ...thumbnailsProps };
     const ref = React.useRef(null);
-    const track = (React.createElement(ThumbnailsTrack, { container: ref, slides: slides, thumbnails: thumbnails, carousel: carousel, animation: animation, render: render, startingIndex: index, thumbnailRect: { width: thumbnails.width, height: thumbnails.height }, styles: styles }));
+    const track = (React.createElement(ThumbnailsTrack, { container: ref, slides: slides, thumbnails: thumbnails, carousel: carousel, animation: animation, render: render, thumbnailRect: { width: thumbnails.width, height: thumbnails.height }, styles: styles }));
     return (React.createElement("div", { ref: ref, className: clsx(cssClass(cssPrefix()), cssClass(cssPrefix(`${thumbnails.position}`))) },
         (thumbnails.position === "start" || thumbnails.position === "top") && track,
         React.createElement("div", { className: cssClass(cssPrefix("wrapper")) }, children),

package/dist/plugins/thumbnails/ThumbnailsTrack.d.ts

@@ -4,7 +4,6 @@ type ThumbnailsInternal = DeepNonNullable<LightboxProps["thumbnails"]>;
 type ThumbnailsTrackProps = Pick<LightboxProps, "slides" | "carousel" | "animation" | "render" | "styles"> & {
     container: React.RefObject<HTMLDivElement>;
     thumbnails: ThumbnailsInternal;
-    startingIndex: number;
     thumbnailRect: ContainerRect;
 };
 export declare const ThumbnailsTrack: React.FC<ThumbnailsTrackProps>;

package/dist/plugins/thumbnails/ThumbnailsTrack.js

@@ -1,67 +1,49 @@
 import * as React from "react";
-import { ACTION_NEXT, ACTION_PREV, CLASS_FLEX_CENTER, clsx, cssClass, cssVar, useEventCallback, useEvents, useLayoutEffect, useLightboxState, useMotionPreference, useRTL, } from "../../core/index.js";
+import { ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, cleanup, clsx, cssClass, cssVar, getSlide, useAnimation, useEventCallback, useEvents, useLightboxState, useRTL, } from "../../core/index.js";
 import { cssPrefix, cssThumbnailPrefix } from "./utils.js";
 import { Thumbnail } from "./Thumbnail.js";
 import { defaultThumbnailsProps } from "./Thumbnails.js";
 const isHorizontal = (position) => ["top", "bottom"].includes(position);
 const boxSize = (thumbnails, dimension, includeGap) => dimension + 2 * (thumbnails.border + thumbnails.padding) + (includeGap ? thumbnails.gap : 0);
-const getSlide = (slides, index) => slides[((index % slides.length) + slides.length) % slides.length];
-export const ThumbnailsTrack = ({ container, startingIndex, slides, carousel, render, thumbnails, thumbnailRect, styles, }) => {
-    const [index, setIndex] = React.useState(startingIndex);
-    const [offset, setOffset] = React.useState(0);
+export const ThumbnailsTrack = ({ container, slides, carousel, render, thumbnails, thumbnailRect, styles, }) => {
     const track = React.useRef(null);
-    const animationRef = React.useRef();
-    const animationOffset = React.useRef(0);
-    const { state: { globalIndex, animationDuration }, } = useLightboxState();
-    const { publish } = useEvents();
-    const reduceMotion = useMotionPreference();
+    const { globalIndex, animation } = useLightboxState().state;
+    const { publish, subscribe } = useEvents();
     const isRTL = useRTL();
+    const index = globalIndex;
+    const offset = (animation === null || animation === void 0 ? void 0 : animation.increment) || 0;
+    const animationDuration = (animation === null || animation === void 0 ? void 0 : animation.duration) || 0;
+    const animate = useAnimation(track, (snapshot) => ({
+        keyframes: isHorizontal(thumbnails.position)
+            ? [
+                {
+                    transform: `translateX(${(isRTL ? -1 : 1) * boxSize(thumbnails, thumbnails.width, true) * offset + snapshot}px)`,
+                },
+                { transform: "translateX(0)" },
+            ]
+            : [
+                {
+                    transform: `translateY(${boxSize(thumbnails, thumbnails.height, true) * offset + snapshot}px)`,
+                },
+                { transform: "translateY(0)" },
+            ],
+        duration: animationDuration,
+    }));
     const handleControllerSwipe = useEventCallback(() => {
+        let animationOffset;
         if (container.current && track.current) {
             const containerRect = container.current.getBoundingClientRect();
             const trackRect = track.current.getBoundingClientRect();
-            animationOffset.current = isHorizontal(thumbnails.position)
+            animationOffset = isHorizontal(thumbnails.position)
                 ? trackRect.left - containerRect.left - (containerRect.width - trackRect.width) / 2
                 : trackRect.top - containerRect.top - (containerRect.height - trackRect.height) / 2;
         }
         else {
-            animationOffset.current = 0;
+            animationOffset = 0;
         }
-        setIndex(globalIndex);
-        setOffset(globalIndex - index);
+        animate(animationOffset);
     });
-    React.useEffect(handleControllerSwipe, [globalIndex, handleControllerSwipe]);
-    const getCurrentIndex = useEventCallback(() => index);
-    const handleIndexOffsetChange = useEventCallback(() => {
-        var _a, _b, _c;
-        if (track.current && offset) {
-            (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.cancel();
-            animationRef.current = (_c = (_b = track.current).animate) === null || _c === void 0 ? void 0 : _c.call(_b, isHorizontal(thumbnails.position)
-                ? [
-                    {
-                        transform: `translateX(${(isRTL ? -1 : 1) * boxSize(thumbnails, thumbnails.width, true) * offset +
-                            animationOffset.current}px)`,
-                    },
-                    { transform: "translateX(0)" },
-                ]
-                : [
-                    {
-                        transform: `translateY(${boxSize(thumbnails, thumbnails.height, true) * offset + animationOffset.current}px)`,
-                    },
-                    { transform: "translateY(0)" },
-                ], !reduceMotion ? animationDuration : 0);
-            if (animationRef.current) {
-                animationRef.current.onfinish = () => {
-                    animationRef.current = undefined;
-                    if (getCurrentIndex() === index) {
-                        setOffset(0);
-                    }
-                };
-            }
-            animationOffset.current = 0;
-        }
-    });
-    useLayoutEffect(handleIndexOffsetChange, [index, offset, handleIndexOffsetChange]);
+    React.useEffect(() => cleanup(subscribe(ACTION_SWIPE, handleControllerSwipe)), [subscribe, handleControllerSwipe]);
     const { finite } = carousel;
     const preload = Math.max(Math.min(carousel.preload, slides.length - 1), 0);
     const items = [];

package/dist/plugins/video/Video.js

@@ -5,7 +5,7 @@ export const defaultVideoProps = {
     playsInline: true,
 };
 export const Video = ({ augment }) => {
-    augment(({ render: { slide: renderSlide, ...restRender }, video: originalVideo, ...restProps }) => ({
+    augment(({ render: { slide: renderSlide, ...restRender }, video: videoProps, ...restProps }) => ({
         render: {
             slide: (slide, offset, rect) => {
                 if (slide.type === "video") {
@@ -15,10 +15,7 @@ export const Video = ({ augment }) => {
             },
             ...restRender,
         },
-        video: {
-            ...defaultVideoProps,
-            ...originalVideo,
-        },
+        video: { ...defaultVideoProps, ...videoProps },
         ...restProps,
     }));
 };

package/dist/plugins/video/index.d.ts

@@ -1,5 +1,6 @@
 import { GenericSlide } from "../../types.js";
 import { Video } from "./Video.js";
+import { ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING } from "../../core/consts.js";
 /** Video slide attributes */
 export interface SlideVideo extends GenericSlide {
     /** video slide type marker */
@@ -48,4 +49,12 @@ declare module "../../types" {
         video?: Pick<SlideVideo, "autoPlay" | "controls" | "controlsList" | "crossOrigin" | "preload" | "loop" | "muted" | "playsInline" | "disablePictureInPicture" | "disableRemotePlayback">;
     }
 }
+declare module "../../core" {
+    interface EventTypes {
+        [ACTIVE_SLIDE_LOADING]: void;
+        [ACTIVE_SLIDE_PLAYING]: void;
+        [ACTIVE_SLIDE_COMPLETE]: void;
+        [ACTIVE_SLIDE_ERROR]: void;
+    }
+}
 export default Video;

package/dist/plugins/video/index.js

@@ -1,2 +1,3 @@
 import { Video } from "./Video.js";
+import { ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, } from "../../core/consts.js";
 export default Video;

package/dist/plugins/zoom/ZoomContainer.js

@@ -39,7 +39,7 @@ const distance = (pointerA, pointerB) => ((pointerA.clientX - pointerB.clientX)
 export const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom: originalZoomProps, on }) => {
     var _a;
     const zoomProps = { ...defaultZoomProps, ...originalZoomProps };
-    const { state: { currentIndex }, } = useLightboxState();
+    const { currentIndex } = useLightboxState().state;
     const [zoom, setZoom] = React.useState(1);
     const [offsetX, setOffsetX] = React.useState(0);
     const [offsetY, setOffsetY] = React.useState(0);

package/dist/plugins/zoom/ZoomContext.js

@@ -6,7 +6,7 @@ export const ZoomContextProvider = ({ slides, children }) => {
     const [isMinZoom, setIsMinZoom] = React.useState(false);
     const [isMaxZoom, setIsMaxZoom] = React.useState(false);
     const [isZoomSupported, setIsZoomSupported] = React.useState(false);
-    const { state: { currentIndex }, } = useLightboxState();
+    const { currentIndex } = useLightboxState().state;
     const updateZoomSupported = useEventCallback(() => setIsZoomSupported(slides.length > currentIndex && isImageSlide(slides[currentIndex])));
     useLayoutEffect(updateZoomSupported, [currentIndex, updateZoomSupported]);
     const context = React.useMemo(() => ({