yet-another-react-lightbox 1.3.4 → 1.4.0

package/README.md

@@ -72,4 +72,4 @@ export default App;
 
 ## License
 
-MIT © [Igor Danchenko](https://github.com/igordanchenko)
+MIT © 2022 [Igor Danchenko](https://github.com/igordanchenko)

package/dist/Lightbox.js

@@ -24,7 +24,6 @@ const LightboxComponent = (props) => {
     return React.createElement(React.Fragment, null, renderNode(createNode(CoreModule, config), augmentedProps));
 };
 LightboxComponent.propTypes = LightboxPropTypes;
-/** Modern React lightbox component */
 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/Icons.js

@@ -10,7 +10,5 @@ export const createIcon = (name, glyph) => {
 export const CloseIcon = createIcon("Close", React.createElement("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }));
 export const PreviousIcon = createIcon("Previous", React.createElement("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }));
 export const NextIcon = createIcon("Next", React.createElement("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }));
-export const LoadingIcon = createIcon("Loading", React.createElement(React.Fragment, null, Array.from({ length: 8 }).map((_, index, array) => (React.createElement("line", { 
-    // eslint-disable-next-line react/no-array-index-key
-    key: index, x1: "12", y1: "6.5", x2: "12", y2: "1.8", strokeLinecap: "round", strokeWidth: "2.6", stroke: "currentColor", strokeOpacity: (1 / array.length) * (index + 1), transform: `rotate(${(360 / array.length) * index}, 12, 12)` })))));
+export const LoadingIcon = createIcon("Loading", React.createElement(React.Fragment, null, Array.from({ length: 8 }).map((_, index, array) => (React.createElement("line", { key: index, x1: "12", y1: "6.5", x2: "12", y2: "1.8", strokeLinecap: "round", strokeWidth: "2.6", stroke: "currentColor", strokeOpacity: (1 / array.length) * (index + 1), transform: `rotate(${(360 / array.length) * index}, 12, 12)` })))));
 export const ErrorIcon = createIcon("Error", React.createElement("path", { d: "M21.9,21.9l-8.49-8.49l0,0L3.59,3.59l0,0L2.1,2.1L0.69,3.51L3,5.83V19c0,1.1,0.9,2,2,2h13.17l2.31,2.31L21.9,21.9z M5,18 l3.5-4.5l2.5,3.01L12.17,15l3,3H5z M21,18.17L5.83,3H19c1.1,0,2,0.9,2,2V18.17z" }));

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

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

package/dist/core/components/ImageSlide.js

@@ -2,13 +2,11 @@ import * as React from "react";
 import { clsx, cssClass } from "../utils.js";
 import { useLatest } from "../hooks/index.js";
 import { ErrorIcon, LoadingIcon } from "./Icons.js";
-import { useController } from "../modules/Controller.js";
-export const ImageSlide = ({ slide: image, render }) => {
+export const ImageSlide = ({ slide: image, render, rect }) => {
     var _a, _b, _c;
     const [state, setState] = React.useState("loading");
     const latestState = useLatest(state);
     const imageRef = React.useRef(null);
-    const { containerRect } = useController();
     const handleLoading = React.useCallback((img) => {
         if (latestState.current === "complete") {
             return;
@@ -37,11 +35,13 @@ export const ImageSlide = ({ slide: image, render }) => {
     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
                 ? {
-                    // this approach does not account for carousel padding,
-                    // but the margin of error should be negligible in most cases
-                    sizes: `${Math.ceil((Math.min(image.aspectRatio ? containerRect.height * image.aspectRatio : Number.MAX_VALUE, containerRect.width) /
-                        window.innerWidth) *
-                        100)}vw`,
+                    ...(rect && typeof window !== "undefined"
+                        ? {
+                            sizes: `${Math.ceil((Math.min(image.aspectRatio ? rect.height * image.aspectRatio : Number.MAX_VALUE, rect.width) /
+                                window.innerWidth) *
+                                100)}vw`,
+                        }
+                        : null),
                     srcSet: image.srcSet
                         .sort((a, b) => a.width - b.width)
                         .map((item) => `${item.src} ${item.width}w`)
@@ -59,7 +59,7 @@ export const ImageSlide = ({ slide: image, render }) => {
                 }), src: image.src }),
         state !== "complete" && (React.createElement("div", { className: cssClass("slide_placeholder") },
             state === "loading" &&
-                (render.iconLoading ? (render.iconLoading()) : (React.createElement(LoadingIcon, { className: clsx(cssClass("icon"), cssClass("slide_loading")) }))),
+                ((render === null || render === void 0 ? void 0 : render.iconLoading) ? (render.iconLoading()) : (React.createElement(LoadingIcon, { className: clsx(cssClass("icon"), cssClass("slide_loading")) }))),
             state === "error" &&
-                (render.iconError ? (render.iconError()) : (React.createElement(ErrorIcon, { className: clsx(cssClass("icon"), cssClass("slide_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/modules/Carousel.js

@@ -1,35 +1,40 @@
 import * as React from "react";
 import { LightboxDefaultProps } from "../../types.js";
+import { useContainerRect } from "../hooks/index.js";
 import { createModule } from "../config.js";
 import { clsx, cssClass, cssVar } from "../utils.js";
 import { ImageSlide } from "../components/index.js";
 import { useController } from "./Controller.js";
-const CarouselSlide = ({ slide, offset, render }) => {
-    const renderSlide = () => {
-        if (render.slide) {
-            const rendered = render.slide(slide);
-            if (rendered) {
-                return rendered;
-            }
+const CarouselSlide = ({ slide, offset }) => {
+    const { setContainerRef, containerRect } = useContainerRect();
+    const { latestProps } = useController();
+    const { render } = latestProps.current;
+    const renderSlide = (rect) => {
+        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 });
         }
-        return "src" in slide ? React.createElement(ImageSlide, { slide: slide, render: render }) : null;
+        return rendered ? (React.createElement(React.Fragment, null, (_b = render.slideHeader) === null || _b === void 0 ? void 0 :
+            _b.call(render, slide),
+            ((_c = render.slideContainer) !== null && _c !== void 0 ? _c : ((_, x) => x))(slide, rendered), (_d = render.slideFooter) === null || _d === void 0 ? void 0 :
+            _d.call(render, slide))) : null;
     };
-    return (React.createElement("div", { className: clsx(cssClass("slide"), cssClass("flex_center")), style: { [cssVar("slide_offset")]: offset } }, renderSlide()));
+    return (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass("slide"), cssClass("flex_center")), style: { [cssVar("slide_offset")]: offset } }, containerRect && renderSlide(containerRect)));
 };
-export const Carousel = (props) => {
-    const { slides, carousel: { finite, preload, padding, spacing }, render, } = props;
+export const Carousel = ({ slides, carousel: { finite, preload, padding, spacing } }) => {
     const { currentIndex, globalIndex } = useController();
     const items = [];
     if ((slides === null || slides === void 0 ? void 0 : slides.length) > 0) {
         for (let i = currentIndex - preload; i < currentIndex; i += 1) {
             if (!finite || i >= 0) {
-                items.push(React.createElement(CarouselSlide, { key: globalIndex + i - currentIndex, slide: slides[(i + preload * slides.length) % slides.length], offset: i - currentIndex, render: render }));
+                items.push(React.createElement(CarouselSlide, { key: globalIndex + i - currentIndex, slide: slides[(i + preload * slides.length) % slides.length], offset: i - currentIndex }));
             }
         }
-        items.push(React.createElement(CarouselSlide, { key: globalIndex, slide: slides[currentIndex], offset: 0, render: render }));
+        items.push(React.createElement(CarouselSlide, { key: globalIndex, slide: slides[currentIndex], offset: 0 }));
         for (let i = currentIndex + 1; i <= currentIndex + preload; i += 1) {
             if (!finite || i <= slides.length - 1) {
-                items.push(React.createElement(CarouselSlide, { key: globalIndex + i - currentIndex, slide: slides[i % slides.length], offset: i - currentIndex, render: render }));
+                items.push(React.createElement(CarouselSlide, { key: globalIndex + i - currentIndex, slide: slides[i % slides.length], offset: i - currentIndex }));
             }
         }
     }

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

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { Component } from "../../types.js";
-import { ContainerRect, SubscribeSensors } from "../hooks/index.js";
+import { Component, ComponentProps } from "../../types.js";
+import { SubscribeSensors } from "../hooks/index.js";
 export declare type ControllerContextType = {
+    latestProps: React.MutableRefObject<ComponentProps>;
     containerRef: React.RefObject<HTMLDivElement>;
-    containerRect: ContainerRect;
     currentIndex: number;
     globalIndex: number;
     subscribeSensors: SubscribeSensors<HTMLDivElement>;

package/dist/core/modules/Controller.js

@@ -2,13 +2,13 @@ import * as React from "react";
 import { LightboxDefaultProps } from "../../types.js";
 import { cleanup, clsx, cssClass, cssVar, makeUseContext } from "../utils.js";
 import { createModule } from "../config.js";
-import { useContainerRect, useEnhancedEffect, useSensors } from "../hooks/index.js";
+import { useContainerRect, useEnhancedEffect, useLatest, useSensors } from "../hooks/index.js";
 import { useEvents, useTimeouts } from "../contexts/index.js";
 const SWIPE_OFFSET_THRESHOLD = 30;
 const ControllerContext = React.createContext(null);
 export const useController = makeUseContext("useController", "ControllerContext", ControllerContext);
 export const Controller = ({ children, ...props }) => {
-    const { containerRef, setContainerRef, containerRect } = useContainerRect();
+    const { containerRef, setContainerRef } = useContainerRect();
     const { registerSensors, subscribeSensors } = useSensors();
     const { subscribe, publish } = useEvents();
     const { setTimeout, clearTimeout } = useTimeouts();
@@ -16,6 +16,7 @@ export const Controller = ({ children, ...props }) => {
         currentIndex: props.index,
         globalIndex: props.index,
     });
+    const latestProps = useLatest(props);
     const refs = React.useRef({
         state,
         props,
@@ -27,9 +28,6 @@ export const Controller = ({ children, ...props }) => {
     });
     refs.current.state = state;
     refs.current.props = props;
-    refs.current.containerRect = containerRect;
-    // prevent browser back/forward navigation on touchpad left/right swipe
-    // this has to be done via non-passive native event handler
     useEnhancedEffect(() => {
         const preventDefault = (event) => event.preventDefault();
         const node = containerRef.current;
@@ -93,7 +91,7 @@ export const Controller = ({ children, ...props }) => {
         let newSwipeState = "swipe-animation";
         let newSwipeAnimationDuration = swipeAnimationDuration;
         if (!direction) {
-            const containerWidth = (_a = current.containerRect) === null || _a === void 0 ? void 0 : _a.width;
+            const containerWidth = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
             const elapsedTime = current.swipeStartTime ? Date.now() - current.swipeStartTime : 0;
             const expectedTime = containerWidth
                 ? (swipeAnimationDuration / containerWidth) * Math.abs(swipeOffset)
@@ -107,7 +105,6 @@ export const Controller = ({ children, ...props }) => {
                     newSwipeAnimationDuration =
                         (newSwipeAnimationDuration / expectedTime) * Math.max(elapsedTime, expectedTime / 5);
                 }
-                // eslint-disable-next-line no-param-reassign
                 direction = swipeOffset > 0 ? "prev" : "next";
             }
             else {
@@ -116,7 +113,7 @@ export const Controller = ({ children, ...props }) => {
         }
         const newState = {};
         if (direction === "prev") {
-            if (isSwipeValid(swipeOffset)) {
+            if (isSwipeValid(1)) {
                 newState.currentIndex = (currentIndex - 1 + slidesCount) % slidesCount;
                 newState.globalIndex = globalIndex - 1;
             }
@@ -126,7 +123,7 @@ export const Controller = ({ children, ...props }) => {
             }
         }
         else if (direction === "next") {
-            if (isSwipeValid(swipeOffset)) {
+            if (isSwipeValid(-1)) {
                 newState.currentIndex = (currentIndex + 1) % slidesCount;
                 newState.globalIndex = globalIndex + 1;
             }
@@ -146,7 +143,7 @@ export const Controller = ({ children, ...props }) => {
             }, newSwipeAnimationDuration);
         }
         setState((prev) => ({ ...prev, ...newState }));
-    }, [setTimeout, resetSwipe, isSwipeValid, rerender]);
+    }, [setTimeout, resetSwipe, isSwipeValid, rerender, containerRef]);
     React.useEffect(() => cleanup(subscribe("prev", () => swipe("prev")), subscribe("next", () => swipe("next"))), [subscribe, swipe]);
     React.useEffect(() => subscribeSensors("onKeyUp", (event) => {
         if (event.code === "Escape") {
@@ -205,11 +202,9 @@ export const Controller = ({ children, ...props }) => {
     const onWheel = React.useCallback((event) => {
         var _a;
         if (event.ctrlKey) {
-            // zoom
             return;
         }
         if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
-            // pan-y
             return;
         }
         const { current } = refs;
@@ -218,6 +213,9 @@ export const Controller = ({ children, ...props }) => {
                 current.wheelResidualMomentum = event.deltaX;
                 return;
             }
+            if (!isSwipeValid(-event.deltaX)) {
+                return;
+            }
             current.swipeIntent += event.deltaX;
             clearTimeout(current.swipeIntentCleanup);
             if (Math.abs(current.swipeIntent) > SWIPE_OFFSET_THRESHOLD) {
@@ -235,7 +233,7 @@ export const Controller = ({ children, ...props }) => {
             }
         }
         else if (current.swipeState === "swipe") {
-            const containerWidth = (_a = current.containerRect) === null || _a === void 0 ? void 0 : _a.width;
+            const containerWidth = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
             if (containerWidth) {
                 current.swipeOffset -= event.deltaX;
                 current.swipeOffset =
@@ -261,19 +259,20 @@ export const Controller = ({ children, ...props }) => {
         else {
             current.wheelResidualMomentum = event.deltaX;
         }
-    }, [updateSwipeOffset, setTimeout, clearTimeout, swipe, resetSwipe, rerender]);
+    }, [updateSwipeOffset, setTimeout, clearTimeout, swipe, resetSwipe, rerender, isSwipeValid, containerRef]);
     React.useEffect(() => subscribeSensors("onWheel", onWheel), [subscribeSensors, onWheel]);
     const context = React.useMemo(() => ({
+        latestProps,
         containerRef,
-        containerRect,
         currentIndex: state.currentIndex,
         globalIndex: state.globalIndex,
         subscribeSensors,
-    }), [containerRef, containerRect, state.currentIndex, state.globalIndex, subscribeSensors]);
+    }), [latestProps, containerRef, state.currentIndex, state.globalIndex, 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`,
             }
-            : undefined, role: "presentation", "aria-live": "polite", tabIndex: -1, ...registerSensors }, containerRect && (React.createElement(ControllerContext.Provider, { value: context }, children))));
+            : undefined, role: "presentation", "aria-live": "polite", tabIndex: -1, ...registerSensors },
+        React.createElement(ControllerContext.Provider, { value: context }, children)));
 };
 export const ControllerModule = createModule("controller", Controller);

package/dist/core/modules/NoScroll.js

@@ -7,7 +7,6 @@ const scrollbarPadding = cssVar("scrollbar_padding");
 export const NoScroll = ({ children }) => {
     React.useEffect(() => {
         const scrollbarWidth = Math.round(window.innerWidth - document.documentElement.clientWidth);
-        // using an arbitrary threshold to counter the 1px difference in some browsers
         if (scrollbarWidth > 1) {
             document.body.style.setProperty(scrollbarPadding, `${scrollbarWidth}px`);
             document.body.classList.add(padScrollbar);

package/dist/plugins/Captions.d.ts

@@ -0,0 +1,22 @@
+import { Plugin } from "../types.js";
+declare type TextAlignment = "start" | "end" | "center";
+declare module "../types.js" {
+    interface SlideImage {
+        /** slide title */
+        title?: string;
+        /** slide description */
+        description?: string;
+    }
+    interface LightboxProps {
+        /** Captions plugin settings */
+        captions?: {
+            /** description text alignment */
+            descriptionTextAlign?: TextAlignment;
+            /** maximum number of lines to display in the description section */
+            descriptionMaxLines?: number;
+        };
+    }
+}
+/** Captions plugin */
+export declare const Captions: Plugin;
+export default Captions;

package/dist/plugins/Captions.js

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { cssClass, cssVar } from "../core/utils.js";
+const defaultTextAlign = "start";
+const defaultMaxLines = 3;
+const cls = (className) => cssClass(`slide_${className}`);
+const hasTitle = (slide) => "title" in slide ? typeof slide.title === "string" : false;
+const hasDescription = (slide) => "description" in slide ? typeof slide.description === "string" : false;
+const Title = ({ title }) => (React.createElement("div", { className: cls(`title_container`) },
+    React.createElement("div", { className: cls("title") }, title)));
+const Description = ({ description, align, maxLines }) => (React.createElement("div", { className: cls("description_container") },
+    React.createElement("div", { className: cls("description"), ...(align !== defaultTextAlign || maxLines !== defaultMaxLines
+            ? {
+                style: {
+                    [cssVar("slide_description_text_align")]: align,
+                    [cssVar("slide_description_max_lines")]: maxLines,
+                },
+            }
+            : null) }, description.split("\n").flatMap((line, index) => [...(index > 0 ? [React.createElement("br", { key: index })] : []), line]))));
+export const Captions = ({ augment }) => {
+    augment(({ render: { slideFooter: renderFooter, ...restRender }, captions, ...restProps }) => ({
+        render: {
+            slideFooter: (slide) => {
+                var _a, _b;
+                return (React.createElement(React.Fragment, null, renderFooter === null || renderFooter === void 0 ? void 0 :
+                    renderFooter(slide),
+                    hasTitle(slide) && React.createElement(Title, { title: slide.title }),
+                    hasDescription(slide) && (React.createElement(Description, { description: slide.description, align: (_a = captions === null || captions === void 0 ? void 0 : captions.descriptionTextAlign) !== null && _a !== void 0 ? _a : defaultTextAlign, maxLines: (_b = captions === null || captions === void 0 ? void 0 : captions.descriptionMaxLines) !== null && _b !== void 0 ? _b : defaultMaxLines }))));
+            },
+            ...restRender,
+        },
+        ...restProps,
+    }));
+};
+export default Captions;

package/dist/plugins/Fullscreen.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { LightboxProps, Plugin, Render } from "../types.js";
 declare module "../types.js" {
     interface LightboxProps {
-        /** enter fullscreen mode automatically when the lightbox opens */
+        /** if `true`, enter fullscreen mode automatically when the lightbox opens */
         fullscreen?: boolean;
     }
     interface Render {

package/dist/plugins/Fullscreen.js

@@ -2,7 +2,6 @@ import * as React from "react";
 import { createIcon, IconButton, label, useController, useLatest } from "../core/index.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" }));
-/** Fullscreen button */
 export const FullscreenButton = ({ auto, labels, render }) => {
     const [fullscreen, setFullscreen] = React.useState(false);
     const latestAuto = useLatest(auto);
@@ -33,7 +32,6 @@ export const FullscreenButton = ({ auto, labels, render }) => {
                 }
             }
             catch (err) {
-                //
             }
         }
     }, [containerRef]);
@@ -54,7 +52,6 @@ export const FullscreenButton = ({ auto, labels, render }) => {
                 }
             }
             catch (err) {
-                //
             }
         }
     }, [getFullscreenElement]);
@@ -95,7 +92,6 @@ export const FullscreenButton = ({ auto, labels, render }) => {
         return null;
     return render.buttonFullscreen ? (React.createElement(React.Fragment, null, render.buttonFullscreen({ fullscreen, toggleFullscreen }))) : (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 }));
 };
-/** Fullscreen plugin */
 export const Fullscreen = ({ augment }) => {
     augment(({ toolbar: { buttons, ...restToolbar }, ...restProps }) => ({
         toolbar: {

package/dist/plugins/Inline.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Component, Plugin } from "../types.js";
 declare module "../types.js" {
     interface LightboxProps {
-        /** HTML div element attributes to be passed to inline plugin container */
+        /** HTML div element attributes to be passed to the inline plugin container */
         inline?: React.HTMLAttributes<HTMLDivElement>;
     }
 }

package/dist/plugins/Inline.js

@@ -1,10 +1,7 @@
 import * as React from "react";
 import { createModule } from "../core/index.js";
-/** Inline plugin container */
 export const InlineContainer = ({ inline, children }) => React.createElement("div", { ...inline }, children);
-/** Inline plugin module */
 export const InlineModule = createModule("inline", InlineContainer);
-/** Inline plugin */
 export const Inline = ({ augment, replace, remove }) => {
     augment(({ toolbar: { buttons, ...restToolbar }, open, close, controller: { focus, ...restController }, ...restProps }) => ({
         open: true,

package/dist/plugins/Video.d.ts

@@ -6,11 +6,11 @@ export interface SlideVideo {
     type: "video";
     /** video placeholder image */
     poster?: string;
-    /** video width */
+    /** video width in pixels */
     width?: number;
-    /** video height */
+    /** video height in pixels */
     height?: number;
-    /** vide source files */
+    /** an array of video files */
     sources?: {
         /** video source URL */
         src: string;

package/dist/plugins/Video.js

@@ -12,7 +12,6 @@ SlideTypesPropTypes.push(PropTypes.shape({
         type: PropTypes.string.isRequired,
     }).isRequired),
 }));
-/** Video slide */
 export const VideoSlide = ({ slide: { sources, poster, width, height } }) => {
     const { setContainerRef, containerRect } = useContainerRect();
     const scaleWidthAndHeight = () => {
@@ -27,21 +26,16 @@ export const VideoSlide = ({ slide: { sources, poster, width, height } }) => {
     return (React.createElement(React.Fragment, null, sources && (React.createElement("div", { ref: setContainerRef, style: {
             width: "100%",
             height: "100%",
-        }, className: clsx(cssClass("video_container"), cssClass("flex_center")) }, containerRect && (
-    // eslint-disable-next-line jsx-a11y/media-has-caption
-    React.createElement("video", { controls: true, playsInline: true, poster: poster, ...scaleWidthAndHeight() }, sources.map(({ src, type }, index) => (
-    // eslint-disable-next-line react/no-array-index-key
-    React.createElement("source", { key: index, src: src, type: type })))))))));
+        }, 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 })))))))));
 };
-/** Video plugin */
 export const Video = ({ augment }) => {
     augment(({ render: { slide: renderSlide, ...restRender }, ...restProps }) => ({
         render: {
-            slide: (slide) => {
+            slide: (slide, offset, rect) => {
                 if ("type" in slide && slide.type === "video") {
                     return React.createElement(VideoSlide, { slide: slide });
                 }
-                return renderSlide === null || renderSlide === void 0 ? void 0 : renderSlide(slide);
+                return renderSlide === null || renderSlide === void 0 ? void 0 : renderSlide(slide, offset, rect);
             },
             ...restRender,
         },

package/dist/plugins/captions.css

@@ -0,0 +1,39 @@
+.yarl__slide_title {
+  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+  font-size: 1.25rem;
+  font-weight: 700;
+  max-width: calc(100% - 96px - 8px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.yarl__slide_title_container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  padding: 16px;
+  background: rgba(0, 0, 0, 0.5);
+}
+.yarl__slide_description {
+  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+  font-size: 1rem;
+  line-height: 1.2;
+  font-weight: 500;
+  overflow: hidden;
+  -webkit-hyphens: auto;
+      -ms-hyphens: auto;
+          hyphens: auto;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--yarl__slide_description_max_lines, 3);
+  text-align: var(--yarl__slide_description_text_align, start);
+}
+.yarl__slide_description_container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 16px;
+  background: rgba(0, 0, 0, 0.5);
+}

package/dist/plugins/index.d.ts

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

package/dist/plugins/index.js

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

package/dist/types.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import PropTypes from "prop-types";
+import { ContainerRect } from "./core/hooks/useContainerRect.js";
 /** Image slide properties */
 export interface SlideImage {
     /** image URL */
@@ -49,7 +50,19 @@ export interface ControllerSettings {
 /** Custom render functions. */
 export interface Render {
     /** render custom slide type, or override the default image slide */
-    slide?: (slide: Slide) => React.ReactNode;
+    slide?: (
+    /** slide */
+    slide: Slide, 
+    /** slide offset (`0` - current slide, `1` - next slide, `-1` - previous slide, etc.) */
+    offset: number, 
+    /** container rect */
+    rect: ContainerRect) => React.ReactNode;
+    /** render custom slide header */
+    slideHeader?: (slide: Slide) => React.ReactNode;
+    /** render custom slide footer */
+    slideFooter?: (slide: Slide) => React.ReactNode;
+    /** render custom slide container */
+    slideContainer?: (slide: Slide, children: React.ReactNode) => React.ReactNode;
     /** render custom Prev icon */
     iconPrev?: () => React.ReactNode;
     /** render custom Next icon */
@@ -110,6 +123,15 @@ 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>;
@@ -118,6 +140,9 @@ export declare const LightboxPropTypes: {
     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>;

package/dist/types.js

@@ -1,18 +1,14 @@
 import PropTypes from "prop-types";
-export const SlideTypesPropTypes = [
-    PropTypes.shape({
+export const ImageSlidePropTypes = PropTypes.shape({
+    src: PropTypes.string,
+    alt: PropTypes.string,
+    aspectRatio: PropTypes.number,
+    srcSet: PropTypes.arrayOf(PropTypes.shape({
         src: PropTypes.string.isRequired,
-        title: PropTypes.string,
-        aspectRatio: PropTypes.number,
-        srcSet: PropTypes.oneOfType([
-            PropTypes.string.isRequired,
-            PropTypes.arrayOf(PropTypes.shape({
-                src: PropTypes.string.isRequired,
-                width: PropTypes.number.isRequired,
-            }).isRequired).isRequired,
-        ]),
-    }),
-];
+        width: PropTypes.number.isRequired,
+    }).isRequired),
+});
+export const SlideTypesPropTypes = [ImageSlidePropTypes];
 export const LightboxPropTypes = {
     open: PropTypes.bool.isRequired,
     close: PropTypes.func.isRequired,
@@ -20,6 +16,9 @@ export const LightboxPropTypes = {
     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,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "1.3.4",
+    "version": "1.4.0",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",
@@ -10,6 +10,8 @@
         ".": "./dist/index.js",
         "./core": "./dist/core/index.js",
         "./plugins": "./dist/plugins/index.js",
+        "./plugins/captions": "./dist/plugins/Captions.js",
+        "./plugins/captions.css": "./dist/plugins/captions.css",
         "./plugins/fullscreen": "./dist/plugins/Fullscreen.js",
         "./plugins/inline": "./dist/plugins/Inline.js",
         "./plugins/video": "./dist/plugins/Video.js",
@@ -27,6 +29,9 @@
             "plugins": [
                 "dist/plugins/index.d.ts"
             ],
+            "plugins/captions": [
+                "dist/plugins/Captions.d.ts"
+            ],
             "plugins/fullscreen": [
                 "dist/plugins/Fullscreen.d.ts"
             ],
@@ -59,8 +64,8 @@
         "build": "npm-run-all clean build:scss build:css build:js build:dts",
         "build:js": "tsc -p tsconfig.build.js.json",
         "build:dts": "tsc -p tsconfig.build.dts.json",
-        "build:css": "postcss src/styles.css -u autoprefixer --no-map -d dist",
-        "build:scss": "sass src/styles.scss src/styles.css --no-source-map ",
+        "build:css": "postcss src/*.css src/**/*.css --base src -d dist -u autoprefixer --no-map",
+        "build:scss": "sass src --no-source-map",
         "start": "npm-run-all clean --parallel \"build:* -- -w\"",
         "lint": "eslint .",
         "test": "jest"
@@ -80,13 +85,13 @@
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^14.2.0",
-        "@types/jest": "^27.5.1",
+        "@types/jest": "^28.1.0",
         "@types/react": "^18.0.10",
         "@types/react-dom": "^18.0.5",
         "@typescript-eslint/eslint-plugin": "^5.27.0",
         "@typescript-eslint/parser": "^5.27.0",
         "autoprefixer": "^10.4.7",
-        "eslint": "^8.16.0",
+        "eslint": "^8.17.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-airbnb-typescript": "^17.0.0",
         "eslint-config-prettier": "^8.5.0",
@@ -106,9 +111,9 @@
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
         "rimraf": "^3.0.2",
-        "sass": "^1.52.1",
-        "ts-jest": "^28.0.3",
-        "typescript": "^4.7.2"
+        "sass": "^1.52.2",
+        "ts-jest": "^28.0.4",
+        "typescript": "^4.7.3"
     },
     "keywords": [
         "react",