yet-another-react-lightbox 3.5.3 → 3.6.0

package/dist/plugins/slideshow/index.js

@@ -1,3 +1,113 @@
-import { PLUGIN_SLIDESHOW } from "../../core/index.js";
-import { Slideshow } from "./Slideshow.js";
-export default Slideshow;
+import { makeUseContext, useLightboxState, useTimeouts, useEvents, useController, useEventCallback, cleanup, createIcon, useLightboxProps, useLoseFocus, IconButton, addToolbarButton, createModule } from '../../index.js';
+import * as React from 'react';
+import { SLIDE_STATUS_LOADING, SLIDE_STATUS_PLAYING, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, ACTIVE_SLIDE_ERROR, SLIDE_STATUS_ERROR, ACTIVE_SLIDE_COMPLETE, SLIDE_STATUS_COMPLETE, PLUGIN_SLIDESHOW } from '../../types.js';
+
+const defaultSlideshowProps = {
+    autoplay: false,
+    delay: 3000,
+    ref: null,
+};
+const resolveSlideshowProps = (slideshow) => ({
+    ...defaultSlideshowProps,
+    ...slideshow,
+});
+
+const SlideshowContext = React.createContext(null);
+const useSlideshow = makeUseContext("useSlideshow", "SlideshowContext", SlideshowContext);
+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();
+    const { slides, currentIndex } = useLightboxState();
+    const { setTimeout, clearTimeout } = useTimeouts();
+    const { subscribe } = useEvents();
+    const { next } = useController();
+    const disabled = slides.length === 0 || (finite && currentIndex === slides.length - 1);
+    const play = React.useCallback(() => {
+        if (!playing && !disabled) {
+            setPlaying(true);
+        }
+    }, [playing, disabled]);
+    const pause = React.useCallback(() => {
+        if (playing) {
+            setPlaying(false);
+        }
+    }, [playing]);
+    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;
+                next();
+            }
+        }, delay);
+    });
+    React.useEffect(scheduleNextSlide, [currentIndex, playing, scheduleNextSlide]);
+    React.useEffect(() => {
+        if (playing && disabled) {
+            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();
+    }), 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, play, pause }), [playing, disabled, play, pause]);
+    React.useImperativeHandle(ref, () => context, [context]);
+    return React.createElement(SlideshowContext.Provider, { value: context }, children);
+}
+
+const PlayIcon = createIcon("Play", React.createElement("path", { d: "M8 5v14l11-7z" }));
+const PauseIcon = createIcon("Pause", React.createElement("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }));
+function SlideshowButton() {
+    const { playing, disabled, play, pause } = useSlideshow();
+    const { render } = useLightboxProps();
+    const focusListeners = useLoseFocus(disabled);
+    if (render.buttonSlideshow) {
+        return React.createElement(React.Fragment, null, render.buttonSlideshow({ playing, disabled, play, pause }));
+    }
+    return (React.createElement(IconButton, { label: playing ? "Pause" : "Play", icon: playing ? PauseIcon : PlayIcon, renderIcon: playing ? render.iconSlideshowPause : render.iconSlideshowPlay, onClick: playing ? pause : play, disabled: disabled, ...focusListeners }));
+}
+
+function Slideshow({ augment, addModule }) {
+    augment(({ slideshow, toolbar, ...restProps }) => ({
+        toolbar: addToolbarButton(toolbar, PLUGIN_SLIDESHOW, React.createElement(SlideshowButton, null)),
+        slideshow: resolveSlideshowProps(slideshow),
+        ...restProps,
+    }));
+    addModule(createModule(PLUGIN_SLIDESHOW, SlideshowContextProvider));
+}
+
+export { Slideshow as default };

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

@@ -1,6 +1,8 @@
-/// <reference types="react" />
-import { PLUGIN_THUMBNAILS } from "../../core/index.js";
-import { Thumbnails } from "./Thumbnails.js";
+import { PluginProps, PLUGIN_THUMBNAILS } from '../../types.js';
+
+/** Thumbnails plugin */
+declare function Thumbnails({ augment, contains, append, addParent }: PluginProps): void;
+
 type Position = "top" | "bottom" | "start" | "end";
 declare module "../../types.js" {
     interface LightboxProps {
@@ -68,4 +70,5 @@ declare module "../../types.js" {
         hide: Callback;
     }
 }
-export default Thumbnails;
+
+export { Thumbnails as default };

package/dist/plugins/thumbnails/index.js

@@ -1,3 +1,262 @@
-import { PLUGIN_THUMBNAILS } from "../../core/index.js";
-import { Thumbnails } from "./Thumbnails.js";
-export default Thumbnails;
+import { useLightboxProps, composePrefix, createIcon, cssClass, isImageSlide, clsx, ImageSlide, makeComposePrefix, cssVar, useLightboxState, useEvents, useRTL, useAnimation, useEventCallback, cleanup, hasSlides, getSlide, makeUseContext, LightboxPropsProvider, createIconDisabled, IconButton, addToolbarButton, createModule } from '../../index.js';
+import * as React from 'react';
+import { PLUGIN_THUMBNAILS, ELEMENT_ICON, CLASS_FULLSIZE, CLASS_FLEX_CENTER, ACTION_SWIPE, ACTION_NEXT, ACTION_PREV, PLUGIN_FULLSCREEN, MODULE_CONTROLLER } from '../../types.js';
+
+const defaultThumbnailsProps = {
+    ref: null,
+    position: "bottom",
+    width: 120,
+    height: 80,
+    border: 1,
+    borderRadius: 4,
+    padding: 4,
+    gap: 16,
+    imageFit: "contain",
+    vignette: true,
+};
+const resolveThumbnailsProps = (thumbnails) => ({
+    ...defaultThumbnailsProps,
+    ...thumbnails,
+});
+function useThumbnailsProps() {
+    const { thumbnails } = useLightboxProps();
+    return resolveThumbnailsProps(thumbnails);
+}
+
+const cssPrefix = (value) => composePrefix(PLUGIN_THUMBNAILS, value);
+const cssThumbnailPrefix = (value) => cssPrefix(composePrefix("thumbnail", value));
+
+const VideoThumbnailIcon = createIcon("VideoThumbnail", React.createElement("path", { d: "M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" }));
+const UnknownThumbnailIcon = createIcon("UnknownThumbnail", React.createElement("path", { d: "M23 18V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2zM8.5 12.5l2.5 3.01L14.5 11l4.5 6H5l3.5-4.5z" }));
+function renderThumbnail({ slide, render, rect, imageFit }) {
+    var _a;
+    const customThumbnail = (_a = render.thumbnail) === null || _a === void 0 ? void 0 : _a.call(render, { slide, render, rect, imageFit });
+    if (customThumbnail) {
+        return customThumbnail;
+    }
+    const thumbnailIconClass = cssClass(cssThumbnailPrefix(ELEMENT_ICON));
+    if (!isImageSlide(slide)) {
+        if (slide.type === "video") {
+            return (React.createElement(React.Fragment, null,
+                "poster" in slide && (React.createElement("img", { alt: "", src: slide.poster, className: clsx(cssClass(CLASS_FULLSIZE), cssClass(cssPrefix("contain_image"))) })),
+                React.createElement(VideoThumbnailIcon, { className: thumbnailIconClass })));
+        }
+    }
+    else {
+        return React.createElement(ImageSlide, { slide: slide, render: render, rect: rect, imageFit: imageFit });
+    }
+    return React.createElement(UnknownThumbnailIcon, { className: thumbnailIconClass });
+}
+const activePrefix = makeComposePrefix("active");
+const fadeInPrefix = makeComposePrefix("fadein");
+const fadeOutPrefix = makeComposePrefix("fadeout");
+const placeholderPrefix = makeComposePrefix("placeholder");
+const DELAY = "delay";
+const DURATION = "duration";
+function Thumbnail({ slide, onClick, active, fadeIn, fadeOut, placeholder }) {
+    const { render, styles } = useLightboxProps();
+    const { width, height, imageFit } = useThumbnailsProps();
+    const rect = { width, height };
+    return (React.createElement("button", { type: "button", className: clsx(cssClass(CLASS_FLEX_CENTER), cssClass(cssThumbnailPrefix()), active && cssClass(cssThumbnailPrefix(activePrefix())), fadeIn && cssClass(cssThumbnailPrefix(fadeInPrefix())), fadeOut && cssClass(cssThumbnailPrefix(fadeOutPrefix())), placeholder && cssClass(cssThumbnailPrefix(placeholderPrefix()))), style: {
+            ...(fadeIn
+                ? {
+                    [cssVar(cssThumbnailPrefix(fadeInPrefix(DURATION)))]: `${fadeIn.duration}ms`,
+                    [cssVar(cssThumbnailPrefix(fadeInPrefix(DELAY)))]: `${fadeIn.delay}ms`,
+                }
+                : null),
+            ...(fadeOut
+                ? {
+                    [cssVar(cssThumbnailPrefix(fadeOutPrefix(DURATION)))]: `${fadeOut.duration}ms`,
+                    [cssVar(cssThumbnailPrefix(fadeOutPrefix(DELAY)))]: `${fadeOut.delay}ms`,
+                }
+                : null),
+            ...styles.thumbnail,
+        }, onClick: onClick }, slide && renderThumbnail({ slide, render, rect, imageFit })));
+}
+
+function isHorizontal(position) {
+    return ["top", "bottom"].includes(position);
+}
+function boxSize(thumbnails, dimension, includeGap) {
+    return dimension + 2 * (thumbnails.border + thumbnails.padding) + (includeGap ? thumbnails.gap : 0);
+}
+function ThumbnailsTrack({ containerRef }) {
+    const track = React.useRef(null);
+    const { visible } = useThumbnails();
+    const { carousel, styles } = useLightboxProps();
+    const { slides, globalIndex, animation } = useLightboxState();
+    const { publish, subscribe } = useEvents();
+    const isRTL = useRTL();
+    const thumbnails = useThumbnailsProps();
+    const { position, width, height, border, borderRadius, padding, gap, vignette } = thumbnails;
+    const index = globalIndex;
+    const animationDuration = (animation === null || animation === void 0 ? void 0 : animation.duration) || 0;
+    const offset = (animationDuration > 0 && (animation === null || animation === void 0 ? void 0 : animation.increment)) || 0;
+    const { prepareAnimation } = useAnimation(track, (snapshot) => ({
+        keyframes: isHorizontal(position)
+            ? [
+                {
+                    transform: `translateX(${(isRTL ? -1 : 1) * boxSize(thumbnails, width, true) * offset + snapshot}px)`,
+                },
+                { transform: "translateX(0)" },
+            ]
+            : [
+                {
+                    transform: `translateY(${boxSize(thumbnails, height, true) * offset + snapshot}px)`,
+                },
+                { transform: "translateY(0)" },
+            ],
+        duration: animationDuration,
+        easing: animation === null || animation === void 0 ? void 0 : animation.easing,
+    }));
+    const handleControllerSwipe = useEventCallback(() => {
+        let animationOffset = 0;
+        if (containerRef.current && track.current) {
+            const containerRect = containerRef.current.getBoundingClientRect();
+            const trackRect = track.current.getBoundingClientRect();
+            animationOffset = isHorizontal(position)
+                ? trackRect.left - containerRect.left - (containerRect.width - trackRect.width) / 2
+                : trackRect.top - containerRect.top - (containerRect.height - trackRect.height) / 2;
+        }
+        prepareAnimation(animationOffset);
+    });
+    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 = [];
+    if (hasSlides(slides)) {
+        if (offset < 0) {
+            for (let i = index - preload + offset; i < index - preload; i += 1) {
+                items.push({ slide: null, index: i, placeholder: true });
+            }
+        }
+        for (let i = index - preload - (offset > 0 ? offset : 0); i < index; i += 1) {
+            if (!(finite && i < 0)) {
+                items.push({ slide: getSlide(slides, i), index: i });
+            }
+            else {
+                items.push({ slide: null, index: i, placeholder: true });
+            }
+        }
+        items.push({ slide: getSlide(slides, index), index });
+        for (let i = index + 1; i <= index + preload - (offset < 0 ? offset : 0); i += 1) {
+            if (!finite || i <= slides.length - 1) {
+                items.push({ slide: getSlide(slides, i), index: i });
+            }
+            else {
+                items.push({ slide: null, index: i, placeholder: true });
+            }
+        }
+        if (offset > 0) {
+            for (let i = index + preload + 1; i <= index + preload + offset; i += 1) {
+                items.push({ slide: null, index: i, placeholder: true });
+            }
+        }
+    }
+    const handleClick = (slideIndex) => () => {
+        if (slideIndex > index) {
+            publish(ACTION_NEXT, { count: slideIndex - index });
+        }
+        else if (slideIndex < index) {
+            publish(ACTION_PREV, { count: index - slideIndex });
+        }
+    };
+    return (React.createElement("div", { className: clsx(cssClass(cssPrefix("container")), cssClass(CLASS_FLEX_CENTER)), style: {
+            ...(!visible ? { display: "none" } : null),
+            ...(width !== defaultThumbnailsProps.width
+                ? { [cssVar(cssThumbnailPrefix("width"))]: `${boxSize(thumbnails, width)}px` }
+                : null),
+            ...(height !== defaultThumbnailsProps.height
+                ? { [cssVar(cssThumbnailPrefix("height"))]: `${boxSize(thumbnails, height)}px` }
+                : null),
+            ...(border !== defaultThumbnailsProps.border
+                ? { [cssVar(cssThumbnailPrefix("border"))]: `${border}px` }
+                : null),
+            ...(borderRadius !== defaultThumbnailsProps.borderRadius
+                ? { [cssVar(cssThumbnailPrefix("border_radius"))]: `${borderRadius}px` }
+                : null),
+            ...(padding !== defaultThumbnailsProps.padding
+                ? { [cssVar(cssThumbnailPrefix("padding"))]: `${padding}px` }
+                : null),
+            ...(gap !== defaultThumbnailsProps.gap ? { [cssVar(cssThumbnailPrefix("gap"))]: `${gap}px` } : null),
+            ...styles.thumbnailsContainer,
+        } },
+        React.createElement("nav", { ref: track, style: styles.thumbnailsTrack, className: clsx(cssClass(cssPrefix("track")), cssClass(CLASS_FLEX_CENTER)) }, items.map(({ slide, index: slideIndex, placeholder }) => {
+            const fadeAnimationDuration = animationDuration / Math.abs(offset || 1);
+            const fadeIn = (offset > 0 && slideIndex > index + preload - offset && slideIndex <= index + preload) ||
+                (offset < 0 && slideIndex < index - preload - offset && slideIndex >= index - preload)
+                ? {
+                    duration: fadeAnimationDuration,
+                    delay: ((offset > 0
+                        ? slideIndex - (index + preload - offset)
+                        : index - preload - offset - slideIndex) -
+                        1) *
+                        fadeAnimationDuration,
+                }
+                : undefined;
+            const fadeOut = (offset > 0 && slideIndex < index - preload) || (offset < 0 && slideIndex > index + preload)
+                ? {
+                    duration: fadeAnimationDuration,
+                    delay: (offset > 0
+                        ? offset - (index - preload - slideIndex)
+                        : -offset - (slideIndex - (index + preload))) * fadeAnimationDuration,
+                }
+                : undefined;
+            return (React.createElement(Thumbnail, { key: slideIndex, slide: slide, active: slideIndex === index, fadeIn: fadeIn, fadeOut: fadeOut, placeholder: Boolean(placeholder), onClick: handleClick(slideIndex) }));
+        })),
+        vignette && React.createElement("div", { className: cssClass(cssPrefix("vignette")) })));
+}
+
+const ThumbnailsContext = React.createContext(null);
+const useThumbnails = makeUseContext("useThumbnails", "ThumbnailsContext", ThumbnailsContext);
+function ThumbnailsContextProvider({ children, ...props }) {
+    const [visible, setVisible] = React.useState(true);
+    const containerRef = React.useRef(null);
+    const { ref, position } = resolveThumbnailsProps(props.thumbnails);
+    const context = React.useMemo(() => ({
+        visible,
+        show: () => setVisible(true),
+        hide: () => setVisible(false),
+    }), [visible]);
+    React.useImperativeHandle(ref, () => context, [context]);
+    return (React.createElement(LightboxPropsProvider, { ...props },
+        React.createElement(ThumbnailsContext.Provider, { value: context },
+            React.createElement("div", { ref: containerRef, className: clsx(cssClass(cssPrefix()), cssClass(cssPrefix(`${position}`))) },
+                ["start", "top"].includes(position) && React.createElement(ThumbnailsTrack, { containerRef: containerRef }),
+                React.createElement("div", { className: cssClass(cssPrefix("wrapper")) }, children),
+                ["end", "bottom"].includes(position) && React.createElement(ThumbnailsTrack, { containerRef: containerRef })))));
+}
+
+const thumbnailsIcon = () => (React.createElement(React.Fragment, null,
+    React.createElement("path", { strokeWidth: 2, stroke: "currentColor", strokeLinejoin: "round", fill: "none", d: "M3 5l18 0l0 14l-18 0l0-14z" }),
+    React.createElement("path", { d: "M5 14h4v3h-4zM10 14h4v3h-4zM15 14h4v3h-4z" })));
+const ThumbnailsVisible = createIcon("ThumbnailsVisible", thumbnailsIcon());
+const ThumbnailsHidden = createIconDisabled("ThumbnailsHidden", thumbnailsIcon());
+function ThumbnailsButton() {
+    const { visible, show, hide } = useThumbnails();
+    const { render } = useLightboxProps();
+    if (render.buttonThumbnails) {
+        return React.createElement(React.Fragment, null, render.buttonThumbnails({ visible, show, hide }));
+    }
+    return (React.createElement(IconButton, { label: visible ? "Hide thumbnails" : "Show thumbnails", icon: visible ? ThumbnailsVisible : ThumbnailsHidden, renderIcon: visible ? render.iconThumbnailsVisible : render.iconThumbnailsHidden, onClick: visible ? hide : show }));
+}
+
+function Thumbnails({ augment, contains, append, addParent }) {
+    augment(({ thumbnails: thumbnailsProps, toolbar, ...restProps }) => {
+        const thumbnails = resolveThumbnailsProps(thumbnailsProps);
+        return {
+            toolbar: addToolbarButton(toolbar, PLUGIN_THUMBNAILS, thumbnails.showToggle ? React.createElement(ThumbnailsButton, null) : null),
+            thumbnails,
+            ...restProps,
+        };
+    });
+    const module = createModule(PLUGIN_THUMBNAILS, ThumbnailsContextProvider);
+    if (contains(PLUGIN_FULLSCREEN)) {
+        append(PLUGIN_FULLSCREEN, module);
+    }
+    else {
+        addParent(MODULE_CONTROLLER, module);
+    }
+}
+
+export { Thumbnails as default };

package/dist/plugins/thumbnails/thumbnails.css

@@ -1,139 +1 @@
-.yarl__thumbnails {
-  display: flex;
-  height: 100%;
-}
-.yarl__thumbnails_top, .yarl__thumbnails_bottom {
-  flex-direction: column;
-}
-.yarl__thumbnails_start .yarl__thumbnails_track, .yarl__thumbnails_end .yarl__thumbnails_track {
-  flex-direction: column;
-}
-.yarl__thumbnails_wrapper {
-  flex: 1;
-  position: relative;
-}
-.yarl__thumbnails_container {
-  flex: 0 0 auto;
-  background-color: var(--yarl__thumbnails_container_background_color, var(--yarl__color_backdrop, #000));
-  padding: var(--yarl__thumbnails_container_padding, 16px);
-  position: relative;
-  overflow: hidden;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  -webkit-touch-callout: none;
-}
-.yarl__thumbnails_vignette {
-  position: absolute;
-  pointer-events: none;
-  --yarl__thumbnails_vignette_size: 12%;
-}
-@media (min-width: 1200px) {
-  .yarl__thumbnails_vignette {
-    --yarl__thumbnails_vignette_size: 8%;
-  }
-}
-@media (min-width: 2000px) {
-  .yarl__thumbnails_vignette {
-    --yarl__thumbnails_vignette_size: 5%;
-  }
-}
-.yarl__thumbnails_top .yarl__thumbnails_vignette, .yarl__thumbnails_bottom .yarl__thumbnails_vignette {
-  height: 100%;
-  left: 0;
-  right: 0;
-  background: linear-gradient(to right, var(--yarl__color_backdrop, #000) 0px, transparent var(--yarl__thumbnails_vignette_size, 12%) calc(100% - var(--yarl__thumbnails_vignette_size, 12%)), var(--yarl__color_backdrop, #000) 100%);
-}
-.yarl__thumbnails_start .yarl__thumbnails_vignette, .yarl__thumbnails_end .yarl__thumbnails_vignette {
-  width: 100%;
-  top: 0;
-  bottom: 0;
-  background: linear-gradient(to bottom, var(--yarl__color_backdrop, #000) 0px, transparent var(--yarl__thumbnails_vignette_size, 12%) calc(100% - var(--yarl__thumbnails_vignette_size, 12%)), var(--yarl__color_backdrop, #000) 100%);
-}
-.yarl__thumbnails_track {
-  gap: var(--yarl__thumbnails_thumbnail_gap, 16px);
-}
-.yarl__thumbnails_thumbnail {
-  flex: 0 0 auto;
-  cursor: pointer;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background: var(--yarl__thumbnails_thumbnail_background, #000);
-  border: var(--yarl__thumbnails_thumbnail_border, 1px solid var(--yarl__color_button, rgba(255, 255, 255, 0.8)));
-  border-radius: var(--yarl__thumbnails_thumbnail_border_radius, 4px);
-  -webkit-tap-highlight-color: transparent;
-  position: relative;
-  overflow: hidden;
-  padding: var(--yarl__thumbnails_thumbnail_padding, 4px);
-  width: var(--yarl__thumbnails_thumbnail_width, 120px);
-  height: var(--yarl__thumbnails_thumbnail_height, 80px);
-  box-sizing: content-box;
-}
-.yarl__thumbnails_thumbnail_active {
-  border-color: var(--yarl__thumbnails_thumbnail_active_border_color, var(--yarl__color_button_active, #fff));
-}
-.yarl__thumbnails_thumbnail_fadein {
-  opacity: 0;
-  -webkit-animation: yarl__thumbnails_thumbnail_fadein var(--yarl__thumbnails_thumbnail_fadein_duration, 0.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadein_delay, 0s) forwards;
-          animation: yarl__thumbnails_thumbnail_fadein var(--yarl__thumbnails_thumbnail_fadein_duration, 0.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadein_delay, 0s) forwards;
-}
-.yarl__thumbnails_thumbnail_fadeout {
-  -webkit-animation: yarl__thumbnails_thumbnail_fadeout var(--yarl__thumbnails_thumbnail_fadeout_duration, 0.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadeout_delay, 0s) forwards;
-          animation: yarl__thumbnails_thumbnail_fadeout var(--yarl__thumbnails_thumbnail_fadeout_duration, 0.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadeout_delay, 0s) forwards;
-  cursor: unset;
-}
-.yarl__thumbnails_thumbnail_placeholder {
-  visibility: hidden;
-  cursor: unset;
-}
-.yarl__thumbnails_thumbnail_icon {
-  color: var(--yarl__thumbnails_thumbnail_icon_color, var(--yarl__color_button, rgba(255, 255, 255, 0.8)));
-  -webkit-filter: var(--yarl__thumbnails_thumbnail_icon_filter, drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8)));
-          filter: var(--yarl__thumbnails_thumbnail_icon_filter, drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8)));
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translateX(-50%) translateY(-50%);
-          transform: translateX(-50%) translateY(-50%);
-  width: var(--yarl__thumbnails_thumbnail_icon_size, 32px);
-  height: var(--yarl__thumbnails_thumbnail_icon_size, 32px);
-}
-.yarl__thumbnails_contain_image {
-  -o-object-fit: contain;
-     object-fit: contain;
-}
-
-@-webkit-keyframes yarl__thumbnails_thumbnail_fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes yarl__thumbnails_thumbnail_fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@-webkit-keyframes yarl__thumbnails_thumbnail_fadeout {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@keyframes yarl__thumbnails_thumbnail_fadeout {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
+.yarl__thumbnails{display:flex;height:100%}.yarl__thumbnails_bottom,.yarl__thumbnails_end .yarl__thumbnails_track,.yarl__thumbnails_start .yarl__thumbnails_track,.yarl__thumbnails_top{flex-direction:column}.yarl__thumbnails_wrapper{flex:1;position:relative}.yarl__thumbnails_container{-webkit-touch-callout:none;background-color:var(--yarl__thumbnails_container_background_color,var(--yarl__color_backdrop,#000));flex:0 0 auto;overflow:hidden;padding:var(--yarl__thumbnails_container_padding,16px);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.yarl__thumbnails_vignette{--yarl__thumbnails_vignette_size:12%;pointer-events:none;position:absolute}@media (min-width:1200px){.yarl__thumbnails_vignette{--yarl__thumbnails_vignette_size:8%}}@media (min-width:2000px){.yarl__thumbnails_vignette{--yarl__thumbnails_vignette_size:5%}}.yarl__thumbnails_bottom .yarl__thumbnails_vignette,.yarl__thumbnails_top .yarl__thumbnails_vignette{background:linear-gradient(to right,var(--yarl__color_backdrop,#000) 0,transparent var(--yarl__thumbnails_vignette_size,12%) calc(100% - var(--yarl__thumbnails_vignette_size, 12%)),var(--yarl__color_backdrop,#000) 100%);height:100%;left:0;right:0}.yarl__thumbnails_end .yarl__thumbnails_vignette,.yarl__thumbnails_start .yarl__thumbnails_vignette{background:linear-gradient(to bottom,var(--yarl__color_backdrop,#000) 0,transparent var(--yarl__thumbnails_vignette_size,12%) calc(100% - var(--yarl__thumbnails_vignette_size, 12%)),var(--yarl__color_backdrop,#000) 100%);bottom:0;top:0;width:100%}.yarl__thumbnails_track{gap:var(--yarl__thumbnails_thumbnail_gap,16px)}.yarl__thumbnails_thumbnail{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--yarl__thumbnails_thumbnail_background,#000);border:var(--yarl__thumbnails_thumbnail_border,1px solid var(--yarl__color_button,hsla(0,0%,100%,.8)));border-radius:var(--yarl__thumbnails_thumbnail_border_radius,4px);box-sizing:content-box;cursor:pointer;flex:0 0 auto;height:var(--yarl__thumbnails_thumbnail_height,80px);overflow:hidden;padding:var(--yarl__thumbnails_thumbnail_padding,4px);position:relative;width:var(--yarl__thumbnails_thumbnail_width,120px)}.yarl__thumbnails_thumbnail_active{border-color:var(--yarl__thumbnails_thumbnail_active_border_color,var(--yarl__color_button_active,#fff))}.yarl__thumbnails_thumbnail_fadein{-webkit-animation:yarl__thumbnails_thumbnail_fadein var(--yarl__thumbnails_thumbnail_fadein_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadein_delay,0s) forwards;animation:yarl__thumbnails_thumbnail_fadein var(--yarl__thumbnails_thumbnail_fadein_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadein_delay,0s) forwards;opacity:0}.yarl__thumbnails_thumbnail_fadeout{-webkit-animation:yarl__thumbnails_thumbnail_fadeout var(--yarl__thumbnails_thumbnail_fadeout_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadeout_delay,0s) forwards;animation:yarl__thumbnails_thumbnail_fadeout var(--yarl__thumbnails_thumbnail_fadeout_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadeout_delay,0s) forwards;cursor:unset}.yarl__thumbnails_thumbnail_placeholder{cursor:unset;visibility:hidden}.yarl__thumbnails_thumbnail_icon{color:var(--yarl__thumbnails_thumbnail_icon_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));-webkit-filter:var(--yarl__thumbnails_thumbnail_icon_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));filter:var(--yarl__thumbnails_thumbnail_icon_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));height:var(--yarl__thumbnails_thumbnail_icon_size,32px);left:50%;position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);width:var(--yarl__thumbnails_thumbnail_icon_size,32px)}.yarl__thumbnails_contain_image{-o-object-fit:contain;object-fit:contain}@-webkit-keyframes yarl__thumbnails_thumbnail_fadein{0%{opacity:0}to{opacity:1}}@keyframes yarl__thumbnails_thumbnail_fadein{0%{opacity:0}to{opacity:1}}@-webkit-keyframes yarl__thumbnails_thumbnail_fadeout{0%{opacity:1}to{opacity:0}}@keyframes yarl__thumbnails_thumbnail_fadeout{0%{opacity:1}to{opacity:0}}

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

@@ -0,0 +1,2 @@
+declare const styles: unknown;
+export default styles;

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

@@ -1,4 +1,8 @@
-import { Video } from "./Video.js";
+import { PluginProps } from '../../types.js';
+
+/** Video plugin */
+declare function Video({ augment }: PluginProps): void;
+
 declare module "../../types.js" {
     interface SlideTypes {
         /** video slide type */
@@ -45,4 +49,5 @@ declare module "../../types.js" {
         video?: Pick<SlideVideo, "autoPlay" | "controls" | "controlsList" | "crossOrigin" | "preload" | "loop" | "muted" | "playsInline" | "disablePictureInPicture" | "disableRemotePlayback">;
     }
 }
-export default Video;
+
+export { Video as default };