yet-another-react-lightbox 3.5.1 → 3.5.3

package/dist/core/modules/Controller.js

@@ -12,7 +12,7 @@ export function Controller({ children, ...props }) {
     var _a;
     const { carousel, animation, controller, on, styles, render } = props;
     const [toolbarWidth, setToolbarWidth] = React.useState();
-    const { state } = useLightboxState();
+    const state = useLightboxState();
     const dispatch = useLightboxDispatch();
     const [swipeState, setSwipeState] = React.useState(SwipeState.NONE);
     const swipeOffset = React.useRef(0);

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

@@ -14,6 +14,7 @@ declare module "../../types.js" {
         iconDownload?: RenderFunction;
     }
     interface Callbacks {
+        /** a callback called on slide download */
         download?: Callback<DownloadCallbackProps>;
     }
     interface DownloadCallbackProps {

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

@@ -2,4 +2,4 @@ import * as React from "react";
 import { ComponentProps, SlideshowRef } from "../../types.js";
 export declare const SlideshowContext: React.Context<SlideshowRef | null>;
 export declare const useSlideshow: () => SlideshowRef;
-export declare function SlideshowContextProvider({ slideshow, carousel: { finite }, children }: ComponentProps): JSX.Element;
+export declare function SlideshowContextProvider({ slideshow, carousel: { finite }, on, children }: ComponentProps): JSX.Element;

package/dist/plugins/slideshow/SlideshowContext.js

@@ -3,8 +3,9 @@ import { ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE
 import { resolveSlideshowProps } from "./props.js";
 export const SlideshowContext = React.createContext(null);
 export const useSlideshow = makeUseContext("useSlideshow", "SlideshowContext", SlideshowContext);
-export function SlideshowContextProvider({ slideshow, carousel: { finite }, children }) {
+export function SlideshowContextProvider({ slideshow, carousel: { finite }, on, children }) {
     const { autoplay, delay, ref } = resolveSlideshowProps(slideshow);
+    const wasPlaying = React.useRef(autoplay);
     const [playing, setPlaying] = React.useState(autoplay);
     const scheduler = React.useRef();
     const slideStatus = React.useRef();
@@ -48,6 +49,17 @@ export function SlideshowContextProvider({ slideshow, carousel: { finite }, chil
             setPlaying(false);
         }
     }, [currentIndex, playing, disabled]);
+    const onSlideshowStart = useEventCallback(() => { var _a; return (_a = on.slideshowStart) === null || _a === void 0 ? void 0 : _a.call(on); });
+    const onSlideshowStop = useEventCallback(() => { var _a; return (_a = on.slideshowStop) === null || _a === void 0 ? void 0 : _a.call(on); });
+    React.useEffect(() => {
+        if (playing) {
+            onSlideshowStart();
+        }
+        else if (wasPlaying.current) {
+            onSlideshowStop();
+        }
+        wasPlaying.current = playing;
+    }, [playing, onSlideshowStart, onSlideshowStop]);
     React.useEffect(() => cleanup(cancelScheduler, subscribe(ACTIVE_SLIDE_LOADING, () => {
         slideStatus.current = SLIDE_STATUS_LOADING;
         cancelScheduler();

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import { PLUGIN_SLIDESHOW } from "../../core/index.js";
 import { Slideshow } from "./Slideshow.js";
 declare module "../../types.js" {
@@ -21,6 +21,12 @@ declare module "../../types.js" {
         /** render custom Slideshow button */
         buttonSlideshow?: RenderFunction<SlideshowRef>;
     }
+    interface Callbacks {
+        /** a callback called on slideshow playback start */
+        slideshowStart?: Callback;
+        /** a callback called on slideshow playback stop */
+        slideshowStop?: Callback;
+    }
     interface ToolbarButtonKeys {
         [PLUGIN_SLIDESHOW]: null;
     }

package/dist/plugins/video/VideoSlide.js

@@ -30,16 +30,20 @@ export function VideoSlide({ slide, offset }) {
     }, [handleVideoRef]);
     const { width, height, poster, sources } = slide;
     const scaleWidthAndHeight = () => {
-        if (!width || !height || !containerRect)
-            return null;
-        const widthBound = width / height > containerRect.width / containerRect.height;
-        const elementWidth = widthBound ? containerRect.width : Math.round((containerRect.height / height) * width);
-        const elementHeight = !widthBound ? containerRect.height : Math.round((containerRect.width / width) * height);
-        return {
-            width: elementWidth,
-            height: elementHeight,
-            style: { width: elementWidth, height: elementHeight, maxWidth: "100%", maxHeight: "100%" },
-        };
+        const scalingProps = {};
+        scalingProps.style = { maxWidth: "100%", maxHeight: "100%" };
+        if (width && height && containerRect) {
+            const widthBound = width / height > containerRect.width / containerRect.height;
+            const elementWidth = widthBound ? containerRect.width : Math.round((containerRect.height / height) * width);
+            const elementHeight = !widthBound
+                ? containerRect.height
+                : Math.round((containerRect.width / width) * height);
+            scalingProps.width = elementWidth;
+            scalingProps.height = elementHeight;
+            scalingProps.style.width = elementWidth;
+            scalingProps.style.height = elementHeight;
+        }
+        return scalingProps;
     };
     const resolveBoolean = (attr) => {
         if (slide[attr] === false)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "3.5.1",
+    "version": "3.5.3",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",