yet-another-react-lightbox 1.4.1 → 1.7.0

package/README.md

@@ -16,6 +16,7 @@ Modern React lightbox component. Performant, easy to use, customizable and exten
 - **Video:** video slides are supported via an optional plugin
 - **Customization:** customize any UI element or add your own custom slides
 - **No bloat:** never bundle rarely used features; add optional features via plugins
+- **RTL:** compatible with RTL layout
 - **TypeScript:** type definitions come built-in in the package
 
 ## Documentation
@@ -130,6 +131,7 @@ The following plugins come bundled in the package:
   description
 - [Fullscreen](https://yet-another-react-lightbox.vercel.app/plugins/fullscreen) - adds support for fullscreen mode
 - [Inline](https://yet-another-react-lightbox.vercel.app/plugins/inline) - adds support for inline rendering mode
+- [Slideshow](https://yet-another-react-lightbox.vercel.app/plugins/slideshow) - adds slideshow autoplay feature
 - [Video](https://yet-another-react-lightbox.vercel.app/plugins/video) - adds support for video slides
 
 ## License

package/dist/Lightbox.d.ts

@@ -1,8 +1,4 @@
-/// <reference types="react" />
-import { LightboxProps } from "./types.js";
-declare type DeepPartial<T, K extends keyof T> = Omit<T, K> & {
-    [P in keyof Pick<T, K>]?: Partial<Pick<T, K>[P]>;
-};
-/** Modern React lightbox component */
-export declare const Lightbox: (props: DeepPartial<Partial<LightboxProps>, "carousel" | "animation" | "render" | "toolbar" | "controller" | "on">) => JSX.Element;
-export {};
+import * as React from "react";
+import { LightboxExternalProps } from "./types.js";
+/** Lightbox component */
+export declare const Lightbox: React.FC<LightboxExternalProps>;

package/dist/Lightbox.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { LightboxDefaultProps, LightboxPropTypes } from "./types.js";
+import { LightboxDefaultProps } from "./types.js";
 import { CarouselModule, ControllerModule, CoreModule, createNode, NavigationModule, NoScrollModule, PortalModule, ToolbarModule, withPlugins, } from "./core/index.js";
 const renderNode = (node, props) => {
     var _a;
@@ -23,7 +23,6 @@ const LightboxComponent = (props) => {
         return null;
     return React.createElement(React.Fragment, null, renderNode(createNode(CoreModule, config), augmentedProps));
 };
-LightboxComponent.propTypes = LightboxPropTypes;
 export const Lightbox = (props) => {
     const { carousel, animation, render, toolbar, controller, on, ...restProps } = props;
     const { carousel: defaultCarousel, animation: defaultAnimation, render: defaultRender, toolbar: defaultToolbar, controller: defaultController, on: defaultOn, ...restDefaultProps } = LightboxDefaultProps;

package/dist/core/components/ImageSlide.d.ts

@@ -3,7 +3,8 @@ import { Render, SlideImage } from "../../types.js";
 import { ContainerRect } from "../hooks/index.js";
 export declare type ImageSlideProps = {
     slide: SlideImage;
+    offset: number;
     render?: Render;
     rect?: ContainerRect;
 };
-export declare const ImageSlide: ({ slide: image, render, rect }: ImageSlideProps) => JSX.Element;
+export declare const ImageSlide: ({ slide: image, offset, render, rect }: ImageSlideProps) => JSX.Element;

package/dist/core/components/ImageSlide.js

@@ -1,14 +1,24 @@
 import * as React from "react";
 import { adjustDevicePixelRatio, clsx, cssClass, hasWindow } from "../utils.js";
 import { useLatest } from "../hooks/index.js";
+import { useEvents } from "../contexts/index.js";
 import { ErrorIcon, LoadingIcon } from "./Icons.js";
-export const ImageSlide = ({ slide: image, render, rect }) => {
+import { activeSlideStatus, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING } from "../consts.js";
+import { useController } from "../modules/Controller.js";
+export const ImageSlide = ({ slide: image, offset, render, rect }) => {
     var _a;
-    const [state, setState] = React.useState("loading");
-    const latestState = useLatest(state);
+    const [status, setStatus] = React.useState(SLIDE_STATUS_LOADING);
+    const latestStatus = useLatest(status);
+    const { latestProps } = useController();
+    const { publish } = useEvents();
     const imageRef = React.useRef(null);
+    React.useEffect(() => {
+        if (offset === 0) {
+            publish(activeSlideStatus(status));
+        }
+    }, [offset, status, publish]);
     const handleLoading = React.useCallback((img) => {
-        if (latestState.current === "complete") {
+        if (latestStatus.current === SLIDE_STATUS_COMPLETE) {
             return;
         }
         ("decode" in img ? img.decode() : Promise.resolve())
@@ -17,9 +27,9 @@ export const ImageSlide = ({ slide: image, render, rect }) => {
             if (!img.parentNode) {
                 return;
             }
-            setState("complete");
+            setStatus(SLIDE_STATUS_COMPLETE);
         });
-    }, [latestState]);
+    }, [latestStatus]);
     const setImageRef = React.useCallback((img) => {
         imageRef.current = img;
         if (img === null || img === void 0 ? void 0 : img.complete) {
@@ -30,10 +40,12 @@ export const ImageSlide = ({ slide: image, render, rect }) => {
         handleLoading(event.currentTarget);
     }, [handleLoading]);
     const onError = React.useCallback(() => {
-        setState("error");
+        setStatus(SLIDE_STATUS_ERROR);
     }, []);
     return (React.createElement(React.Fragment, null,
-        React.createElement("img", { ref: setImageRef, onLoad: onLoad, onError: onError, className: clsx(cssClass("slide_image"), state !== "complete" && cssClass("slide_image_loading")), draggable: false, alt: image.alt, ...(image.srcSet
+        React.createElement("img", { ref: setImageRef, onLoad: onLoad, onError: onError, className: clsx(cssClass("slide_image"), (image.imageFit === "cover" ||
+                (image.imageFit !== "contain" && latestProps.current.carousel.imageFit === "cover")) &&
+                cssClass("slide_image_cover"), status !== SLIDE_STATUS_COMPLETE && cssClass("slide_image_loading")), draggable: false, alt: image.alt, ...(image.srcSet
                 ? {
                     ...(rect && hasWindow()
                         ? {
@@ -57,9 +69,9 @@ export const ImageSlide = ({ slide: image, render, rect }) => {
                         }
                         : undefined,
                 }), src: image.src }),
-        state !== "complete" && (React.createElement("div", { className: cssClass("slide_placeholder") },
-            state === "loading" &&
+        status !== SLIDE_STATUS_COMPLETE && (React.createElement("div", { className: cssClass("slide_placeholder") },
+            status === SLIDE_STATUS_LOADING &&
                 ((render === null || render === void 0 ? void 0 : render.iconLoading) ? (render.iconLoading()) : (React.createElement(LoadingIcon, { className: clsx(cssClass("icon"), cssClass("slide_loading")) }))),
-            state === "error" &&
+            status === SLIDE_STATUS_ERROR &&
                 ((render === null || render === void 0 ? void 0 : render.iconError) ? (render.iconError()) : (React.createElement(ErrorIcon, { className: clsx(cssClass("icon"), cssClass("slide_error")) })))))));
 };

package/dist/core/consts.d.ts

@@ -0,0 +1,10 @@
+export declare const SLIDE_STATUS_LOADING = "loading";
+export declare const SLIDE_STATUS_PLAYING = "playing";
+export declare const SLIDE_STATUS_ERROR = "error";
+export declare const SLIDE_STATUS_COMPLETE = "complete";
+export declare type SlideStatus = typeof SLIDE_STATUS_LOADING | typeof SLIDE_STATUS_PLAYING | typeof SLIDE_STATUS_ERROR | typeof SLIDE_STATUS_COMPLETE;
+export declare const activeSlideStatus: (status: SlideStatus) => string;
+export declare const ACTIVE_SLIDE_LOADING: string;
+export declare const ACTIVE_SLIDE_PLAYING: string;
+export declare const ACTIVE_SLIDE_ERROR: string;
+export declare const ACTIVE_SLIDE_COMPLETE: string;

package/dist/core/consts.js

@@ -0,0 +1,9 @@
+export const SLIDE_STATUS_LOADING = "loading";
+export const SLIDE_STATUS_PLAYING = "playing";
+export const SLIDE_STATUS_ERROR = "error";
+export const SLIDE_STATUS_COMPLETE = "complete";
+export const activeSlideStatus = (status) => `active-slide-${status}`;
+export const ACTIVE_SLIDE_LOADING = activeSlideStatus(SLIDE_STATUS_LOADING);
+export const ACTIVE_SLIDE_PLAYING = activeSlideStatus(SLIDE_STATUS_PLAYING);
+export const ACTIVE_SLIDE_ERROR = activeSlideStatus(SLIDE_STATUS_ERROR);
+export const ACTIVE_SLIDE_COMPLETE = activeSlideStatus(SLIDE_STATUS_COMPLETE);

package/dist/core/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./consts.js";
 export * from "./utils.js";
 export * from "./config.js";
 export * from "./hooks/index.js";

package/dist/core/index.js

@@ -1,3 +1,4 @@
+export * from "./consts.js";
 export * from "./utils.js";
 export * from "./config.js";
 export * from "./hooks/index.js";

package/dist/core/modules/Carousel.js

@@ -13,7 +13,7 @@ const CarouselSlide = ({ slide, offset }) => {
         var _a, _b, _c, _d;
         let rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, rect);
         if (!rendered && "src" in slide) {
-            rendered = React.createElement(ImageSlide, { slide: slide, render: render, rect: rect });
+            rendered = React.createElement(ImageSlide, { slide: slide, offset: offset, render: render, rect: rect });
         }
         return rendered ? (React.createElement(React.Fragment, null, (_b = render.slideHeader) === null || _b === void 0 ? void 0 :
             _b.call(render, slide),

package/dist/core/modules/Controller.d.ts

@@ -1,13 +1,17 @@
 import * as React from "react";
 import { Component, ComponentProps } from "../../types.js";
 import { SubscribeSensors } from "../hooks/index.js";
-export declare type ControllerContextType = {
-    latestProps: React.MutableRefObject<ComponentProps>;
-    containerRef: React.RefObject<HTMLDivElement>;
+declare type ControllerState = {
     currentIndex: number;
     globalIndex: number;
+    isRTL: boolean;
+};
+export declare type ControllerContextType = ControllerState & {
+    latestProps: React.MutableRefObject<ComponentProps>;
+    containerRef: React.RefObject<HTMLDivElement>;
     subscribeSensors: SubscribeSensors<HTMLDivElement>;
 };
 export declare const useController: () => ControllerContextType;
 export declare const Controller: Component;
 export declare const ControllerModule: import("../../types.js").Module;
+export {};

package/dist/core/modules/Controller.js

@@ -15,6 +15,7 @@ export const Controller = ({ children, ...props }) => {
     const [state, setState] = React.useState({
         currentIndex: props.index,
         globalIndex: props.index,
+        isRTL: false,
     });
     const latestProps = useLatest(props);
     const refs = React.useRef({
@@ -29,7 +30,11 @@ export const Controller = ({ children, ...props }) => {
     refs.current.state = state;
     refs.current.props = props;
     useEnhancedEffect(() => {
-        const preventDefault = (event) => event.preventDefault();
+        const preventDefault = (event) => {
+            if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
+                event.preventDefault();
+            }
+        };
         const node = containerRef.current;
         if (node) {
             node.addEventListener("wheel", preventDefault, { passive: false });
@@ -40,6 +45,12 @@ export const Controller = ({ children, ...props }) => {
             }
         };
     }, [containerRef]);
+    useEnhancedEffect(() => {
+        const node = containerRef.current;
+        if (node) {
+            setState((prev) => ({ ...prev, isRTL: window.getComputedStyle(node).direction === "rtl" }));
+        }
+    }, [containerRef]);
     React.useEffect(() => {
         var _a;
         if (refs.current.props.controller.focus) {
@@ -76,11 +87,12 @@ export const Controller = ({ children, ...props }) => {
         clearTimeout(current.swipeIntentCleanup);
         current.swipeIntentCleanup = undefined;
     }, [clearTimeout]);
+    const rtl = React.useCallback((value) => (refs.current.state.isRTL ? -1 : 1) * (typeof value === "number" ? value : 1), [refs]);
     const isSwipeValid = React.useCallback((offset) => {
         const { state: { currentIndex }, props: { carousel, slides }, } = refs.current;
         return !(carousel.finite &&
-            ((offset > 0 && currentIndex === 0) || (offset < 0 && currentIndex === slides.length - 1)));
-    }, []);
+            ((rtl(offset) > 0 && currentIndex === 0) || (rtl(offset) < 0 && currentIndex === slides.length - 1)));
+    }, [rtl]);
     const swipe = React.useCallback((direction) => {
         var _a;
         const { current } = refs;
@@ -105,7 +117,7 @@ export const Controller = ({ children, ...props }) => {
                     newSwipeAnimationDuration =
                         (newSwipeAnimationDuration / expectedTime) * Math.max(elapsedTime, expectedTime / 5);
                 }
-                direction = swipeOffset > 0 ? "prev" : "next";
+                direction = rtl(swipeOffset) > 0 ? "prev" : "next";
             }
             else {
                 newSwipeAnimationDuration = swipeAnimationDuration / 2;
@@ -113,7 +125,7 @@ export const Controller = ({ children, ...props }) => {
         }
         const newState = {};
         if (direction === "prev") {
-            if (isSwipeValid(1)) {
+            if (isSwipeValid(rtl(1))) {
                 newState.currentIndex = (currentIndex - 1 + slidesCount) % slidesCount;
                 newState.globalIndex = globalIndex - 1;
             }
@@ -123,7 +135,7 @@ export const Controller = ({ children, ...props }) => {
             }
         }
         else if (direction === "next") {
-            if (isSwipeValid(-1)) {
+            if (isSwipeValid(rtl(-1))) {
                 newState.currentIndex = (currentIndex + 1) % slidesCount;
                 newState.globalIndex = globalIndex + 1;
             }
@@ -143,7 +155,7 @@ export const Controller = ({ children, ...props }) => {
             }, newSwipeAnimationDuration);
         }
         setState((prev) => ({ ...prev, ...newState }));
-    }, [setTimeout, resetSwipe, isSwipeValid, rerender, containerRef]);
+    }, [setTimeout, resetSwipe, isSwipeValid, rerender, containerRef, rtl]);
     React.useEffect(() => cleanup(subscribe("prev", () => swipe("prev")), subscribe("next", () => swipe("next"))), [subscribe, swipe]);
     React.useEffect(() => subscribeSensors("onKeyUp", (event) => {
         if (event.code === "Escape") {
@@ -266,8 +278,9 @@ export const Controller = ({ children, ...props }) => {
         containerRef,
         currentIndex: state.currentIndex,
         globalIndex: state.globalIndex,
+        isRTL: state.isRTL,
         subscribeSensors,
-    }), [latestProps, containerRef, state.currentIndex, state.globalIndex, subscribeSensors]);
+    }), [latestProps, containerRef, state.currentIndex, state.globalIndex, state.isRTL, subscribeSensors]);
     return (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass("container"), refs.current.swipeState === "swipe" && cssClass("container_swipe")), style: refs.current.swipeAnimationDuration !== LightboxDefaultProps.animation.swipe
             ? {
                 [cssVar("swipe_animation_duration")]: `${Math.round(refs.current.swipeAnimationDuration)}ms`,

package/dist/core/modules/Navigation.js

@@ -8,16 +8,16 @@ export const NavigationButton = ({ publish, labels, label, icon, renderIcon, act
         publish(action);
     } }));
 export const Navigation = ({ slides, carousel: { finite }, labels, render: { buttonPrev, buttonNext, iconPrev, iconNext }, }) => {
-    const { currentIndex, subscribeSensors } = useController();
+    const { currentIndex, subscribeSensors, isRTL } = useController();
     const { publish } = useEvents();
     React.useEffect(() => subscribeSensors("onKeyUp", (event) => {
         if (event.code === "ArrowLeft") {
-            publish("prev");
+            publish(isRTL ? "next" : "prev");
         }
         else if (event.code === "ArrowRight") {
-            publish("next");
+            publish(isRTL ? "prev" : "next");
         }
-    }), [subscribeSensors, publish]);
+    }), [subscribeSensors, publish, isRTL]);
     return (React.createElement(React.Fragment, null,
         buttonPrev ? (buttonPrev()) : (React.createElement(NavigationButton, { label: "Previous", action: "prev", icon: PreviousIcon, renderIcon: iconPrev, disabled: finite && currentIndex === 0, labels: labels, publish: publish })),
         buttonNext ? (buttonNext()) : (React.createElement(NavigationButton, { label: "Next", action: "next", icon: NextIcon, renderIcon: iconNext, disabled: finite && currentIndex === slides.length - 1, labels: labels, publish: publish }))));

package/dist/plugins/Slideshow.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { Plugin } from "../types.js";
+declare module "../types.js" {
+    interface LightboxProps {
+        /** Slideshow plugin settings */
+        slideshow?: {
+            /** if `true`, slideshow is turned on automatically when the lightbox opens */
+            autoplay?: boolean;
+            /** slideshow delay in milliseconds */
+            delay?: number;
+        };
+    }
+    interface Render {
+        /** render custom Slideshow Play icon */
+        iconSlideshowPlay?: () => React.ReactNode;
+        /** render custom Slideshow Pause icon */
+        iconSlideshowPause?: () => React.ReactNode;
+        /** render custom Slideshow button */
+        buttonSlideshow?: ({ playing, togglePlaying, disabled, }: {
+            /** current slideshow autoplay status */
+            playing: boolean;
+            /** toggle slideshow autoplay status */
+            togglePlaying: () => void;
+            /** if `true`, the button is disabled */
+            disabled: boolean;
+        }) => React.ReactNode;
+    }
+}
+/** Slideshow plugin */
+export declare const Slideshow: Plugin;
+export default Slideshow;

package/dist/plugins/Slideshow.js

@@ -0,0 +1,88 @@
+import * as React from "react";
+import { 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, useEvents, useLatest, useTimeouts, } from "../core/index.js";
+const defaultSlideshowProps = {
+    autoplay: false,
+    delay: 3000,
+};
+const PlayIcon = createIcon("Play", React.createElement("path", { d: "M8 5v14l11-7z" }));
+const PauseIcon = createIcon("Pause", React.createElement("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }));
+const SlideshowButton = () => {
+    const { currentIndex, latestProps } = useController();
+    const { setTimeout, clearTimeout } = useTimeouts();
+    const { publish, subscribe } = useEvents();
+    const slideshow = {
+        ...defaultSlideshowProps,
+        ...latestProps.current.slideshow,
+    };
+    const [playing, setPlaying] = React.useState(slideshow.autoplay);
+    const scheduler = React.useRef();
+    const refs = useLatest({
+        playing,
+        delay: slideshow.delay,
+        currentIndex,
+        finite: latestProps.current.carousel.finite,
+        slidesCount: latestProps.current.slides.length,
+    });
+    const slideStatus = React.useRef();
+    const cancelScheduler = React.useCallback(() => {
+        clearTimeout(scheduler.current);
+        scheduler.current = undefined;
+    }, [clearTimeout]);
+    const reachedLastSlide = React.useCallback(() => refs.current.finite && refs.current.currentIndex === refs.current.slidesCount - 1, [refs]);
+    const scheduleNextSlide = React.useCallback(() => {
+        cancelScheduler();
+        if (!refs.current.playing ||
+            reachedLastSlide() ||
+            slideStatus.current === SLIDE_STATUS_LOADING ||
+            slideStatus.current === SLIDE_STATUS_PLAYING) {
+            return;
+        }
+        scheduler.current = setTimeout(() => {
+            if (refs.current.playing) {
+                slideStatus.current = undefined;
+                publish("next");
+            }
+        }, refs.current.delay);
+    }, [publish, setTimeout, cancelScheduler, refs, reachedLastSlide]);
+    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();
+    })), [subscribe, cancelScheduler, scheduleNextSlide]);
+    const { render, labels } = latestProps.current;
+    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 }));
+};
+export const Slideshow = ({ augment }) => {
+    augment(({ slideshow: originalSlideshow, toolbar: { buttons, ...restToolbar }, ...restProps }) => ({
+        toolbar: {
+            buttons: [React.createElement(SlideshowButton, { key: "slideshow" }), ...buttons],
+            ...restToolbar,
+        },
+        slideshow: {
+            ...defaultSlideshowProps,
+            ...originalSlideshow,
+        },
+        ...restProps,
+    }));
+};
+export default Slideshow;

package/dist/plugins/Video.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import { Plugin } from "../types.js";
 /** Video slide attributes */
 export interface SlideVideo {
@@ -10,6 +10,26 @@ export interface SlideVideo {
     width?: number;
     /** video height in pixels */
     height?: number;
+    /** if `true`, the video automatically begins to play */
+    autoPlay?: boolean;
+    /** if `true`, the browser will offer controls to allow the user to control video playback */
+    controls?: boolean;
+    /** indicates what controls to show */
+    controlsList?: string;
+    /** indicates whether to use CORS to fetch the related video */
+    crossOrigin?: string;
+    /** video preload setting */
+    preload?: string;
+    /** if `true`, the browser will automatically seek back to the start upon reaching the end of the video */
+    loop?: boolean;
+    /** the default setting of the audio contained in the video */
+    muted?: boolean;
+    /** if `true`, the video is to be played "inline", that is within the element's playback area */
+    playsInline?: boolean;
+    /** prevents the browser from suggesting a Picture-in-Picture context menu */
+    disablePictureInPicture?: boolean;
+    /** disables the capability of remote playback */
+    disableRemotePlayback?: boolean;
     /** an array of video files */
     sources?: {
         /** video source URL */
@@ -23,11 +43,17 @@ declare module "../types.js" {
         /** video slide type */
         SlideVideo: SlideVideo;
     }
+    interface LightboxProps {
+        /** video plugin settings */
+        video?: Pick<SlideVideo, "autoPlay" | "controls" | "controlsList" | "crossOrigin" | "preload" | "loop" | "muted" | "playsInline" | "disablePictureInPicture" | "disableRemotePlayback">;
+    }
 }
-/** Video slide */
-export declare const VideoSlide: ({ slide: { sources, poster, width, height } }: {
+declare type VideoSlideProps = {
     slide: SlideVideo;
-}) => JSX.Element;
+    offset: number;
+};
+/** Video slide */
+export declare const VideoSlide: React.FC<VideoSlideProps>;
 /** Video plugin */
 export declare const Video: Plugin;
 export default Video;

package/dist/plugins/Video.js

@@ -1,19 +1,40 @@
 import * as React from "react";
-import PropTypes from "prop-types";
-import { SlideTypesPropTypes } from "../types.js";
-import { clsx, cssClass, useContainerRect } from "../core/index.js";
-SlideTypesPropTypes.push(PropTypes.shape({
-    type: PropTypes.oneOf(["video"]).isRequired,
-    poster: PropTypes.string,
-    width: PropTypes.number,
-    height: PropTypes.number,
-    sources: PropTypes.arrayOf(PropTypes.shape({
-        src: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
-    }).isRequired),
-}));
-export const VideoSlide = ({ slide: { sources, poster, width, height } }) => {
+import { ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, clsx, cssClass, useContainerRect, useController, useEvents, useLatest, } from "../core/index.js";
+const defaultVideoProps = {
+    controls: true,
+    playsInline: true,
+};
+export const VideoSlide = ({ slide, offset }) => {
+    var _a;
+    const { latestProps } = useController();
+    const { publish } = useEvents();
     const { setContainerRef, containerRect } = useContainerRect();
+    const videoRef = React.useRef(null);
+    const video = (_a = latestProps.current.video) !== null && _a !== void 0 ? _a : defaultVideoProps;
+    React.useEffect(() => {
+        if (offset !== 0 && videoRef.current && !videoRef.current.paused) {
+            videoRef.current.pause();
+        }
+    }, [offset]);
+    React.useEffect(() => {
+        if (offset === 0 && videoRef.current && (slide.autoPlay || video.autoPlay)) {
+            publish(ACTIVE_SLIDE_LOADING);
+            videoRef.current.play().catch(() => { });
+        }
+    }, [offset, video.autoPlay, slide.autoPlay, publish]);
+    const latestOffset = useLatest(offset);
+    const latestVideoAutoPlay = useLatest(video.autoPlay);
+    const latestSlideAutoPlay = useLatest(slide.autoPlay);
+    const setVideoRef = React.useCallback((el) => {
+        videoRef.current = el;
+        if (el &&
+            latestOffset.current === 0 &&
+            (latestVideoAutoPlay.current || latestSlideAutoPlay.current) &&
+            el.paused) {
+            el.play().catch(() => { });
+        }
+    }, [latestOffset, latestVideoAutoPlay, latestSlideAutoPlay]);
+    const { width, height, poster, sources } = slide;
     const scaleWidthAndHeight = () => {
         if (!width || !height || !containerRect)
             return null;
@@ -23,23 +44,48 @@ export const VideoSlide = ({ slide: { sources, poster, width, height } }) => {
             height: !widthBound ? containerRect.height : Math.round((containerRect.width / width) * height),
         };
     };
+    const resolveBoolean = (attr) => {
+        if (slide[attr] === false)
+            return null;
+        if (slide[attr] === true)
+            return { [attr]: true };
+        if (video[attr] === false)
+            return null;
+        if (video[attr] === true)
+            return { [attr]: true };
+        return null;
+    };
+    const resolveString = (attr) => {
+        if (video[attr] || slide[attr]) {
+            return { [attr]: slide[attr] || video[attr] };
+        }
+        return null;
+    };
     return (React.createElement(React.Fragment, null, sources && (React.createElement("div", { ref: setContainerRef, style: {
             width: "100%",
             height: "100%",
             ...(width ? { maxWidth: `${width}px` } : null),
-        }, className: clsx(cssClass("video_container"), cssClass("flex_center")) }, containerRect && (React.createElement("video", { controls: true, playsInline: true, poster: poster, ...scaleWidthAndHeight() }, sources.map(({ src, type }, index) => (React.createElement("source", { key: index, src: src, type: type })))))))));
+        }, className: clsx(cssClass("video_container"), cssClass("flex_center")) }, containerRect && (React.createElement("video", { ref: setVideoRef, poster: poster, ...scaleWidthAndHeight(), ...resolveBoolean("controls"), ...resolveBoolean("playsInline"), ...resolveBoolean("loop"), ...resolveBoolean("muted"), ...resolveBoolean("playsInline"), ...resolveBoolean("disablePictureInPicture"), ...resolveBoolean("disableRemotePlayback"), ...resolveString("controlsList"), ...resolveString("crossOrigin"), ...resolveString("preload"), onPlay: () => {
+            publish(ACTIVE_SLIDE_PLAYING);
+        }, onEnded: () => {
+            publish(ACTIVE_SLIDE_COMPLETE);
+        } }, sources.map(({ src, type }, index) => (React.createElement("source", { key: index, src: src, type: type })))))))));
 };
 export const Video = ({ augment }) => {
-    augment(({ render: { slide: renderSlide, ...restRender }, ...restProps }) => ({
+    augment(({ render: { slide: renderSlide, ...restRender }, video: originalVideo, ...restProps }) => ({
         render: {
             slide: (slide, offset, rect) => {
                 if ("type" in slide && slide.type === "video") {
-                    return React.createElement(VideoSlide, { slide: slide });
+                    return React.createElement(VideoSlide, { slide: slide, offset: offset });
                 }
                 return renderSlide === null || renderSlide === void 0 ? void 0 : renderSlide(slide, offset, rect);
             },
             ...restRender,
         },
+        video: {
+            ...defaultVideoProps,
+            ...originalVideo,
+        },
         ...restProps,
     }));
 };

package/dist/plugins/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./Captions.js";
 export * from "./Fullscreen.js";
 export * from "./Inline.js";
+export * from "./Slideshow.js";
 export * from "./Video.js";

package/dist/plugins/index.js

@@ -1,4 +1,5 @@
 export * from "./Captions.js";
 export * from "./Fullscreen.js";
 export * from "./Inline.js";
+export * from "./Slideshow.js";
 export * from "./Video.js";

package/dist/styles.css

@@ -14,7 +14,7 @@
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  touch-action: none;
+  touch-action: pan-y;
 }
 .yarl__container {
   width: 100%;
@@ -41,15 +41,18 @@
   overflow: hidden;
   inset: 0;
   padding: var(--yarl__carousel_padding, 16px);
-  -webkit-transform: translate3d(calc(var(--yarl__slide_offset, 0) * (100% + var(--yarl__carousel_spacing, 30%))), 0, 0);
-          transform: translate3d(calc(var(--yarl__slide_offset, 0) * (100% + var(--yarl__carousel_spacing, 30%))), 0, 0);
+  -webkit-transform: translate3d(calc(var(--yarl__slide_offset, 0) * (100% + var(--yarl__carousel_spacing, 30%)) * var(--yarl__direction, 1)), 0, 0);
+          transform: translate3d(calc(var(--yarl__slide_offset, 0) * (100% + var(--yarl__carousel_spacing, 30%)) * var(--yarl__direction, 1)), 0, 0);
   transition: -webkit-transform var(--yarl__swipe_animation_duration, 500ms) ease-out;
   transition: transform var(--yarl__swipe_animation_duration, 500ms) ease-out;
   transition: transform var(--yarl__swipe_animation_duration, 500ms) ease-out, -webkit-transform var(--yarl__swipe_animation_duration, 500ms) ease-out;
 }
+[dir=rtl] .yarl__slide {
+  --yarl__direction: -1;
+}
 .yarl__container_swipe .yarl__slide {
-  -webkit-transform: translate3d(calc(var(--yarl__slide_offset, 0) * (100% + var(--yarl__carousel_spacing, 30%))), 0, 0) translate3d(var(--yarl__swipe_offset, 0px), 0, 0);
-          transform: translate3d(calc(var(--yarl__slide_offset, 0) * (100% + var(--yarl__carousel_spacing, 30%))), 0, 0) translate3d(var(--yarl__swipe_offset, 0px), 0, 0);
+  -webkit-transform: translate3d(calc(var(--yarl__slide_offset, 0) * (100% + var(--yarl__carousel_spacing, 30%)) * var(--yarl__direction, 1)), 0, 0) translate3d(var(--yarl__swipe_offset, 0px), 0, 0);
+          transform: translate3d(calc(var(--yarl__slide_offset, 0) * (100% + var(--yarl__carousel_spacing, 30%)) * var(--yarl__direction, 1)), 0, 0) translate3d(var(--yarl__swipe_offset, 0px), 0, 0);
   transition: unset;
 }
 .yarl__slide_image {
@@ -62,6 +65,12 @@
        user-select: none;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
+  -webkit-transform: translate3d(0, 0, 0);
+          transform: translate3d(0, 0, 0);
+}
+.yarl__slide_image_cover {
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 .yarl__slide_image_loading {
   opacity: 0;
@@ -137,6 +146,9 @@
   padding: 8px;
   gap: 8px;
 }
+[dir=rtl] .yarl__toolbar {
+  inset: 0 auto auto 0;
+}
 .yarl__icon {
   width: 32px;
   height: 32px;
@@ -185,9 +197,21 @@
 .yarl__navigation_prev {
   left: 0;
 }
+[dir=rtl] .yarl__navigation_prev {
+  left: unset;
+  right: 0;
+  -webkit-transform: translateY(-50%) rotate(180deg);
+          transform: translateY(-50%) rotate(180deg);
+}
 .yarl__navigation_next {
   right: 0;
 }
+[dir=rtl] .yarl__navigation_next {
+  left: 0;
+  right: unset;
+  -webkit-transform: translateY(-50%) rotate(180deg);
+          transform: translateY(-50%) rotate(180deg);
+}
 .yarl__no_scroll {
   height: 100%;
   overflow: hidden;
@@ -195,6 +219,10 @@
 .yarl__pad_scrollbar {
   padding-right: var(--yarl__scrollbar_padding, 17px);
 }
+[dir=rtl] .yarl__pad_scrollbar {
+  padding-right: unset;
+  padding-left: var(--yarl__scrollbar_padding, 17px);
+}
 
 @-webkit-keyframes yarl__delayed_fadein {
   0% {

package/dist/types.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
-import PropTypes from "prop-types";
 import { ContainerRect } from "./core/hooks/useContainerRect.js";
+/** Image fit setting */
+export declare type ImageFit = "contain" | "cover";
 /** Image slide properties */
 export interface SlideImage {
     /** image URL */
@@ -9,6 +10,8 @@ export interface SlideImage {
     alt?: string;
     /** image aspect ratio */
     aspectRatio?: number;
+    /** `object-fit` setting */
+    imageFit?: ImageFit;
     /** alternative images to be passed to the 'srcSet' */
     srcSet?: {
         /** image URL */
@@ -34,6 +37,8 @@ export interface CarouselSettings {
     padding: string | number;
     /** spacing between slides (e.g., "100px", "50%" or 0) */
     spacing: string | number;
+    /** `object-fit` setting for image slides */
+    imageFit: ImageFit;
 }
 /** Animation settings */
 export interface AnimationSettings {
@@ -44,7 +49,7 @@ export interface AnimationSettings {
 }
 /** Controller settings */
 export interface ControllerSettings {
-    /** if true, the lightbox captures focus when it opens v     */
+    /** if true, the lightbox captures focus when it opens */
     focus: boolean;
 }
 /** Custom render functions. */
@@ -123,61 +128,6 @@ export interface LightboxProps {
     /** lifecycle callbacks */
     on: Callbacks;
 }
-export declare const ImageSlidePropTypes: PropTypes.Requireable<PropTypes.InferProps<{
-    src: PropTypes.Requireable<string>;
-    alt: PropTypes.Requireable<string>;
-    aspectRatio: PropTypes.Requireable<number>;
-    srcSet: PropTypes.Requireable<PropTypes.InferProps<{
-        src: PropTypes.Validator<string>;
-        width: PropTypes.Validator<number>;
-    }>[]>;
-}>>;
-export declare const SlideTypesPropTypes: PropTypes.Validator<any>[];
-export declare const LightboxPropTypes: {
-    open: PropTypes.Validator<boolean>;
-    close: PropTypes.Validator<(...args: any[]) => any>;
-    index: PropTypes.Validator<number>;
-    slides: PropTypes.Validator<any[]>;
-    render: PropTypes.Validator<PropTypes.InferProps<{
-        slide: PropTypes.Requireable<(...args: any[]) => any>;
-        slideHeader: PropTypes.Requireable<(...args: any[]) => any>;
-        slideFooter: PropTypes.Requireable<(...args: any[]) => any>;
-        slideContainer: PropTypes.Requireable<(...args: any[]) => any>;
-        iconPrev: PropTypes.Requireable<(...args: any[]) => any>;
-        iconNext: PropTypes.Requireable<(...args: any[]) => any>;
-        iconClose: PropTypes.Requireable<(...args: any[]) => any>;
-        iconLoading: PropTypes.Requireable<(...args: any[]) => any>;
-        iconError: PropTypes.Requireable<(...args: any[]) => any>;
-        buttonPrev: PropTypes.Requireable<(...args: any[]) => any>;
-        buttonNext: PropTypes.Requireable<(...args: any[]) => any>;
-        buttonClose: PropTypes.Requireable<(...args: any[]) => any>;
-    }>>;
-    plugins: PropTypes.Validator<((...args: any[]) => any)[]>;
-    toolbar: PropTypes.Validator<PropTypes.InferProps<{
-        buttons: PropTypes.Validator<(string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray | null | undefined)[]>;
-    }>>;
-    labels: PropTypes.Validator<PropTypes.InferProps<{}>>;
-    carousel: PropTypes.Validator<PropTypes.InferProps<{
-        finite: PropTypes.Validator<boolean>;
-        preload: PropTypes.Validator<number>;
-        padding: PropTypes.Validator<string | number>;
-        spacing: PropTypes.Validator<string | number>;
-    }>>;
-    animation: PropTypes.Validator<PropTypes.InferProps<{
-        fade: PropTypes.Validator<number>;
-        swipe: PropTypes.Validator<number>;
-    }>>;
-    controller: PropTypes.Validator<PropTypes.InferProps<{
-        focus: PropTypes.Validator<boolean>;
-    }>>;
-    on: PropTypes.Validator<PropTypes.InferProps<{
-        view: PropTypes.Requireable<(...args: any[]) => any>;
-        entering: PropTypes.Requireable<(...args: any[]) => any>;
-        entered: PropTypes.Requireable<(...args: any[]) => any>;
-        exiting: PropTypes.Requireable<(...args: any[]) => any>;
-        exited: PropTypes.Requireable<(...args: any[]) => any>;
-    }>>;
-};
 export declare const LightboxDefaultProps: {
     open: boolean;
     close: () => void;
@@ -238,3 +188,9 @@ export declare type PluginMethods = {
 };
 /** Lightbox plugin */
 export declare type Plugin = ({ addParent, addChild, addSibling, replace, remove, augment }: PluginMethods) => void;
+/** Deep partial utility type */
+export declare type DeepPartial<T, K extends keyof T> = Omit<T, K> & {
+    [P in keyof Pick<T, K>]?: Partial<Pick<T, K>[P]>;
+};
+/** Lightbox external props */
+export declare type LightboxExternalProps = DeepPartial<Partial<LightboxProps>, "carousel" | "animation" | "render" | "toolbar" | "controller" | "on">;

package/dist/types.js

@@ -1,59 +1,3 @@
-import PropTypes from "prop-types";
-export const ImageSlidePropTypes = PropTypes.shape({
-    src: PropTypes.string,
-    alt: PropTypes.string,
-    aspectRatio: PropTypes.number,
-    srcSet: PropTypes.arrayOf(PropTypes.shape({
-        src: PropTypes.string.isRequired,
-        width: PropTypes.number.isRequired,
-    }).isRequired),
-});
-export const SlideTypesPropTypes = [ImageSlidePropTypes];
-export const LightboxPropTypes = {
-    open: PropTypes.bool.isRequired,
-    close: PropTypes.func.isRequired,
-    index: PropTypes.number.isRequired,
-    slides: PropTypes.arrayOf(PropTypes.oneOfType(SlideTypesPropTypes).isRequired).isRequired,
-    render: PropTypes.shape({
-        slide: PropTypes.func,
-        slideHeader: PropTypes.func,
-        slideFooter: PropTypes.func,
-        slideContainer: PropTypes.func,
-        iconPrev: PropTypes.func,
-        iconNext: PropTypes.func,
-        iconClose: PropTypes.func,
-        iconLoading: PropTypes.func,
-        iconError: PropTypes.func,
-        buttonPrev: PropTypes.func,
-        buttonNext: PropTypes.func,
-        buttonClose: PropTypes.func,
-    }).isRequired,
-    plugins: PropTypes.arrayOf(PropTypes.func.isRequired).isRequired,
-    toolbar: PropTypes.shape({
-        buttons: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["close"]), PropTypes.node])).isRequired,
-    }).isRequired,
-    labels: PropTypes.shape({}).isRequired,
-    carousel: PropTypes.shape({
-        finite: PropTypes.bool.isRequired,
-        preload: PropTypes.number.isRequired,
-        padding: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-        spacing: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    }).isRequired,
-    animation: PropTypes.shape({
-        fade: PropTypes.number.isRequired,
-        swipe: PropTypes.number.isRequired,
-    }).isRequired,
-    controller: PropTypes.shape({
-        focus: PropTypes.bool.isRequired,
-    }).isRequired,
-    on: PropTypes.shape({
-        view: PropTypes.func,
-        entering: PropTypes.func,
-        entered: PropTypes.func,
-        exiting: PropTypes.func,
-        exited: PropTypes.func,
-    }).isRequired,
-};
 export const LightboxDefaultProps = {
     open: false,
     close: () => { },
@@ -72,6 +16,7 @@ export const LightboxDefaultProps = {
         preload: 2,
         padding: "16px",
         spacing: "30%",
+        imageFit: "contain",
     },
     controller: {
         focus: true,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "1.4.1",
+    "version": "1.7.0",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",
@@ -14,6 +14,7 @@
         "./plugins/captions.css": "./dist/plugins/captions.css",
         "./plugins/fullscreen": "./dist/plugins/Fullscreen.js",
         "./plugins/inline": "./dist/plugins/Inline.js",
+        "./plugins/slideshow": "./dist/plugins/Slideshow.js",
         "./plugins/video": "./dist/plugins/Video.js",
         "./styles.css": "./dist/styles.css"
     },
@@ -38,6 +39,9 @@
             "plugins/inline": [
                 "dist/plugins/Inline.d.ts"
             ],
+            "plugins/slideshow": [
+                "dist/plugins/Slideshow.d.ts"
+            ],
             "plugins/video": [
                 "dist/plugins/Video.d.ts"
             ]
@@ -70,9 +74,6 @@
         "lint": "eslint .",
         "test": "jest"
     },
-    "dependencies": {
-        "prop-types": "^15.5.7"
-    },
     "peerDependencies": {
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0"
@@ -88,8 +89,8 @@
         "@types/jest": "^28.1.1",
         "@types/react": "^18.0.12",
         "@types/react-dom": "^18.0.5",
-        "@typescript-eslint/eslint-plugin": "^5.27.1",
-        "@typescript-eslint/parser": "^5.27.1",
+        "@typescript-eslint/eslint-plugin": "^5.28.0",
+        "@typescript-eslint/parser": "^5.28.0",
         "autoprefixer": "^10.4.7",
         "eslint": "^8.17.0",
         "eslint-config-airbnb": "^19.0.4",
@@ -99,7 +100,7 @@
         "eslint-plugin-jsx-a11y": "^6.5.1",
         "eslint-plugin-prettier": "^4.0.0",
         "eslint-plugin-react": "^7.30.0",
-        "eslint-plugin-react-hooks": "^4.5.0",
+        "eslint-plugin-react-hooks": "^4.6.0",
         "husky": "^8.0.1",
         "jest": "^28.1.1",
         "jest-environment-jsdom": "^28.1.1",
@@ -107,12 +108,12 @@
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.14",
         "postcss-cli": "^9.1.0",
-        "prettier": "^2.6.2",
-        "react": "^18.1.0",
-        "react-dom": "^18.1.0",
+        "prettier": "^2.7.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "rimraf": "^3.0.2",
         "sass": "^1.52.3",
-        "ts-jest": "^28.0.4",
+        "ts-jest": "^28.0.5",
         "typescript": "^4.7.3"
     },
     "keywords": [