yet-another-react-lightbox 1.7.1 → 1.9.0

package/dist/plugins/Zoom.js

@@ -0,0 +1,423 @@
+import * as React from "react";
+import { adjustDevicePixelRatio, cleanup, clsx, createIcon, createModule, cssClass, IconButton, ImageSlide, label, makeUseContext, round, useContainerRect, useController, useEnhancedEffect, useEvents, useMotionPreference, } from "../core/index.js";
+const defaultZoomProps = {
+    maxZoomPixelRatio: 1,
+    zoomInMultiplier: 2,
+    doubleTapDelay: 300,
+    doubleClickDelay: 500,
+    doubleClickMaxStops: 2,
+    keyboardMoveDistance: 50,
+    wheelZoomDistanceFactor: 100,
+    pinchZoomDistanceFactor: 100,
+};
+const ZoomInIcon = createIcon("ZoomIn", React.createElement(React.Fragment, null,
+    React.createElement("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }),
+    React.createElement("path", { d: "M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z" })));
+const ZoomOutIcon = createIcon("ZoomOut", React.createElement("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z" }));
+const ZoomContext = React.createContext(null);
+const useZoom = makeUseContext("useZoom", "ZoomContext", ZoomContext);
+const ZoomContextProvider = ({ children }) => {
+    const [minZoom, setMinZoom] = React.useState(false);
+    const [maxZoom, setMaxZoom] = React.useState(false);
+    const [zoomSupported, setZoomSupported] = React.useState(false);
+    const context = React.useMemo(() => ({
+        minZoom,
+        maxZoom,
+        zoomSupported,
+        setMinZoom,
+        setMaxZoom,
+        setZoomSupported,
+    }), [minZoom, maxZoom, zoomSupported]);
+    return React.createElement(ZoomContext.Provider, { value: context }, children);
+};
+const ZoomButton = React.forwardRef(({ labels, render, zoomIn, onLoseFocus }, ref) => {
+    const wasEnabled = React.useRef(false);
+    const wasFocused = React.useRef(false);
+    const { zoomSupported, minZoom, maxZoom } = useZoom();
+    const { publish } = useEvents();
+    const disabled = !zoomSupported || (zoomIn ? maxZoom : minZoom);
+    const onClick = () => publish(zoomIn ? "zoom-in" : "zoom-out");
+    const onFocus = React.useCallback(() => {
+        wasFocused.current = true;
+    }, []);
+    const onBlur = React.useCallback(() => {
+        wasFocused.current = false;
+    }, []);
+    React.useEffect(() => {
+        if (disabled && wasEnabled.current && wasFocused.current) {
+            onLoseFocus();
+        }
+        if (!disabled) {
+            wasEnabled.current = true;
+        }
+    }, [disabled, onLoseFocus]);
+    if (zoomIn && render.buttonZoomIn)
+        return (React.createElement(React.Fragment, null, render.buttonZoomIn({
+            ref,
+            labels,
+            disabled,
+            onClick,
+            onFocus,
+            onBlur,
+        })));
+    if (zoomIn && render.buttonZoomOut)
+        return (React.createElement(React.Fragment, null, render.buttonZoomOut({
+            ref,
+            labels,
+            disabled,
+            onClick,
+            onFocus,
+            onBlur,
+        })));
+    return (React.createElement(IconButton, { ref: ref, label: label(labels, zoomIn ? "Zoom in" : "Zoom out"), icon: zoomIn ? ZoomInIcon : ZoomOutIcon, renderIcon: zoomIn ? render.iconZoomIn : render.iconZoomOut, disabled: disabled, onClick: onClick, onFocus: onFocus, onBlur: onBlur }));
+});
+ZoomButton.displayName = "ZoomButton";
+const ZoomButtonsGroup = ({ labels, render }) => {
+    const zoomInRef = React.useRef(null);
+    const zoomOutRef = React.useRef(null);
+    const { transferFocus } = useController();
+    const focusSibling = React.useCallback((sibling) => {
+        var _a, _b;
+        if (!((_a = sibling.current) === null || _a === void 0 ? void 0 : _a.disabled)) {
+            (_b = sibling.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+        else {
+            transferFocus();
+        }
+    }, [transferFocus]);
+    const focusZoomIn = React.useCallback(() => focusSibling(zoomInRef), [focusSibling]);
+    const focusZoomOut = React.useCallback(() => focusSibling(zoomOutRef), [focusSibling]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ZoomButton, { ref: zoomInRef, key: "zoomIn", zoomIn: true, labels: labels, render: render, onLoseFocus: focusZoomOut }),
+        React.createElement(ZoomButton, { ref: zoomOutRef, key: "zoomOut", labels: labels, render: render, onLoseFocus: focusZoomIn })));
+};
+const getSlideRects = (slide, cover, maxZoomPixelRatio, rect) => {
+    var _a, _b;
+    let slideRect = { width: 0, height: 0 };
+    let maxSlideRect = { width: 0, height: 0 };
+    if (rect && !("type" in slide) && "src" in slide) {
+        const width = Math.max(...(((_a = slide.srcSet) === null || _a === void 0 ? void 0 : _a.map((x) => x.width)) || []), ...[...(slide.width ? [slide.width] : [])]);
+        const height = Math.max(...(((_b = slide.srcSet) === null || _b === void 0 ? void 0 : _b.map((x) => x.width)) || (slide.aspectRatio ? [width / slide.aspectRatio] : [])), ...[...(slide.height ? [slide.height] : [])]);
+        if (width > 0 && height > 0 && rect.width > 0 && rect.height > 0) {
+            maxSlideRect = cover
+                ? {
+                    width: Math.round(Math.min(width, (rect.width / rect.height) * height)),
+                    height: Math.round(Math.min(height, (rect.height / rect.width) * width)),
+                }
+                : { width, height };
+            maxSlideRect = {
+                width: adjustDevicePixelRatio(maxSlideRect.width) * maxZoomPixelRatio,
+                height: adjustDevicePixelRatio(maxSlideRect.height) * maxZoomPixelRatio,
+            };
+            slideRect = cover
+                ? {
+                    width: Math.min(rect.width, maxSlideRect.width),
+                    height: Math.min(rect.height, maxSlideRect.height),
+                }
+                : {
+                    width: Math.round(Math.min(rect.width, (rect.height / height) * width)),
+                    height: Math.round(Math.min(rect.height, (rect.width / width) * height)),
+                };
+        }
+    }
+    return { slideRect, maxSlideRect };
+};
+const distance = (pointerA, pointerB) => ((pointerA.clientX - pointerB.clientX) ** 2 + (pointerA.clientY - pointerB.clientY) ** 2) ** 0.5;
+const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom: originalZoomProps }) => {
+    var _a;
+    const zoomProps = { ...defaultZoomProps, ...originalZoomProps };
+    const { setMinZoom: currentSetMinZoom, setMaxZoom: currentSetMaxZoom } = useZoom();
+    const { setContainerRef, containerRef: currentContainerRef, containerRect: currentContainerRect, } = useContainerRect();
+    const { subscribeSensors, containerRef: currentControllerRef, containerRect: currentControllerRect, } = useController();
+    const { subscribe } = useEvents();
+    const currentReduceMotion = useMotionPreference();
+    const { slideRect: currentSlideRect, maxSlideRect: currentMaxSlideRect } = getSlideRects(slide, carousel.imageFit === "cover" || ("imageFit" in slide && slide.imageFit === "cover"), zoomProps.maxZoomPixelRatio, currentContainerRect);
+    const currentMaxZoom = currentSlideRect.width ? round(currentMaxSlideRect.width / currentSlideRect.width, 3) : 1;
+    const [state, setState] = React.useState({ zoom: 1, offsetX: 0, offsetY: 0 });
+    const refs = React.useRef({
+        state,
+        slideRect: currentSlideRect,
+        containerRef: currentContainerRef,
+        controllerRef: currentControllerRef,
+        containerRect: currentContainerRect,
+        controllerRect: currentControllerRect,
+        maxZoom: currentMaxZoom,
+        reduceMotion: currentReduceMotion,
+        setMinZoom: currentSetMinZoom,
+        setMaxZoom: currentSetMaxZoom,
+        activePointers: [],
+        lastPointerDown: 0,
+        zoomProps,
+    });
+    refs.current.state = state;
+    refs.current.slideRect = currentSlideRect;
+    refs.current.containerRef = currentContainerRef;
+    refs.current.controllerRef = currentControllerRef;
+    refs.current.containerRect = currentContainerRect;
+    refs.current.controllerRect = currentControllerRect;
+    refs.current.maxZoom = currentMaxZoom;
+    refs.current.reduceMotion = currentReduceMotion;
+    refs.current.setMinZoom = currentSetMinZoom;
+    refs.current.setMaxZoom = currentSetMaxZoom;
+    refs.current.zoomAnimationDuration = animation.zoom;
+    refs.current.zoomProps = zoomProps;
+    const changeOffsets = React.useCallback((dx, dy, newZoom) => {
+        const { state: { zoom, offsetX, offsetY }, containerRect, slideRect, } = refs.current;
+        const targetZoom = newZoom || zoom;
+        const newOffsetX = offsetX - (dx || 0);
+        const newOffsetY = offsetY - (dy || 0);
+        const maxOffsetX = containerRect ? (slideRect.width * targetZoom - containerRect.width) / 2 / targetZoom : 0;
+        const maxOffsetY = containerRect ? (slideRect.height * targetZoom - containerRect.height) / 2 / targetZoom : 0;
+        setState((prev) => ({
+            ...prev,
+            offsetX: Math.min(Math.abs(newOffsetX), Math.max(maxOffsetX, 0)) * Math.sign(newOffsetX),
+            offsetY: Math.min(Math.abs(newOffsetY), Math.max(maxOffsetY, 0)) * Math.sign(newOffsetY),
+        }));
+    }, []);
+    useEnhancedEffect(() => {
+        if (refs.current.state.zoom > 1) {
+            changeOffsets();
+        }
+    }, [currentControllerRect.width, currentControllerRect.height, changeOffsets]);
+    useEnhancedEffect(() => {
+        var _a, _b;
+        const { current } = refs;
+        const { zoomAnimation, zoomAnimationStart, zoomAnimationDuration, reduceMotion, containerRef } = current;
+        zoomAnimation === null || zoomAnimation === void 0 ? void 0 : zoomAnimation.cancel();
+        if (zoomAnimationStart && containerRef.current) {
+            current.zoomAnimation = (_b = (_a = containerRef.current).animate) === null || _b === void 0 ? void 0 : _b.call(_a, [
+                { transform: zoomAnimationStart },
+                {
+                    transform: `scale(${state.zoom}) translate3d(${state.offsetX}px, ${state.offsetY}px, 0)`,
+                },
+            ], {
+                duration: reduceMotion ? 0 : zoomAnimationDuration !== null && zoomAnimationDuration !== void 0 ? zoomAnimationDuration : 500,
+                easing: zoomAnimation ? "ease-out" : "ease-in-out",
+            });
+            current.zoomAnimationStart = undefined;
+            if (current.zoomAnimation) {
+                current.zoomAnimation.onfinish = () => {
+                    current.zoomAnimation = undefined;
+                };
+            }
+        }
+    }, [state.zoom, state.offsetX, state.offsetY]);
+    useEnhancedEffect(() => {
+        if (offset === 0) {
+            const { setMinZoom, setMaxZoom, maxZoom } = refs.current;
+            setMinZoom(state.zoom <= 1);
+            setMaxZoom(state.zoom >= maxZoom);
+        }
+    }, [offset, state.zoom]);
+    useEnhancedEffect(() => {
+        if (offset === 0) {
+            const { setMinZoom, setMaxZoom } = refs.current;
+            const resetZoom = () => {
+                setState({ zoom: 1, offsetX: 0, offsetY: 0 });
+                setMinZoom(true);
+                setMaxZoom(false);
+            };
+            resetZoom();
+            return () => {
+                resetZoom();
+            };
+        }
+        return () => { };
+    }, [offset]);
+    const changeZoom = React.useCallback((value, rapid, dx, dy) => {
+        const { current } = refs;
+        const { state: { zoom }, containerRef, containerRect, maxZoom, } = current;
+        if (!containerRef.current || !containerRect)
+            return;
+        const newZoom = round(Math.min(Math.max(value, 1), maxZoom), 5);
+        if (newZoom === zoom)
+            return;
+        if (!rapid) {
+            current.zoomAnimationStart = window.getComputedStyle(containerRef.current).transform;
+        }
+        changeOffsets(dx ? dx * (1 / zoom - 1 / newZoom) : 0, dy ? dy * (1 / zoom - 1 / newZoom) : 0, newZoom);
+        setState((prev) => ({ ...prev, zoom: newZoom }));
+    }, [changeOffsets]);
+    const translateCoordinates = React.useCallback((event) => {
+        const { controllerRef } = refs.current;
+        if (controllerRef.current) {
+            const { pageX, pageY } = event;
+            const { scrollX, scrollY } = window;
+            const { left, top, width, height } = controllerRef.current.getBoundingClientRect();
+            return [pageX - left - scrollX - width / 2, pageY - top - scrollY - height / 2];
+        }
+        return [];
+    }, []);
+    const onKeyDown = React.useCallback((event) => {
+        const { state: { zoom }, zoomProps: { keyboardMoveDistance, zoomInMultiplier }, } = refs.current;
+        if (zoom > 1) {
+            const move = (deltaX, deltaY) => {
+                event.stopPropagation();
+                changeOffsets(deltaX, deltaY);
+            };
+            if (event.key === "ArrowDown") {
+                move(0, keyboardMoveDistance);
+            }
+            else if (event.key === "ArrowUp") {
+                move(0, -keyboardMoveDistance);
+            }
+            else if (event.key === "ArrowLeft") {
+                move(-keyboardMoveDistance, 0);
+            }
+            else if (event.key === "ArrowRight") {
+                move(keyboardMoveDistance, 0);
+            }
+        }
+        if (event.key === "+" || (event.key === "=" && event.metaKey)) {
+            changeZoom(zoom * zoomInMultiplier);
+        }
+        else if (event.key === "-" || (event.key === "_" && event.metaKey)) {
+            changeZoom(zoom / zoomInMultiplier);
+        }
+        else if (event.key === "0" && event.metaKey) {
+            changeZoom(1);
+        }
+    }, [changeZoom, changeOffsets]);
+    const onWheel = React.useCallback((event) => {
+        const { state: { zoom }, zoomProps: { wheelZoomDistanceFactor }, } = refs.current;
+        if (event.ctrlKey) {
+            event.stopPropagation();
+            if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
+                changeZoom(zoom * (1 - event.deltaY / wheelZoomDistanceFactor), true, ...translateCoordinates(event));
+            }
+            return;
+        }
+        if (zoom > 1) {
+            event.stopPropagation();
+            changeOffsets(event.deltaX, event.deltaY);
+        }
+    }, [changeZoom, changeOffsets, translateCoordinates]);
+    const clearPointer = React.useCallback((event) => {
+        const { activePointers } = refs.current;
+        activePointers.splice(0, activePointers.length, ...activePointers.filter((p) => p.pointerId !== event.pointerId));
+    }, []);
+    const replacePointer = React.useCallback((event) => {
+        clearPointer(event);
+        refs.current.activePointers.push(event);
+    }, [clearPointer]);
+    const onPointerDown = React.useCallback((event) => {
+        var _a;
+        const { current } = refs;
+        const { state: { zoom }, containerRef, activePointers, lastPointerDown, maxZoom, zoomProps: { doubleTapDelay, doubleClickDelay, zoomInMultiplier, doubleClickMaxStops }, } = current;
+        if (!((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+            return;
+        }
+        if (zoom > 1) {
+            event.stopPropagation();
+        }
+        const { timeStamp } = event;
+        if (activePointers.length === 0 &&
+            timeStamp - lastPointerDown < (event.pointerType === "touch" ? doubleTapDelay : doubleClickDelay)) {
+            current.lastPointerDown = 0;
+            changeZoom(zoom !== maxZoom ? zoom * Math.max(maxZoom ** (1 / doubleClickMaxStops), zoomInMultiplier) : 1, false, ...translateCoordinates(event));
+        }
+        else {
+            current.lastPointerDown = timeStamp;
+        }
+        replacePointer(event);
+        if (activePointers.length === 2) {
+            current.pinchZoomDistance = distance(activePointers[0], activePointers[1]);
+        }
+    }, [changeZoom, replacePointer, translateCoordinates]);
+    const onPointerMove = React.useCallback((event) => {
+        const { current } = refs;
+        const { state: { zoom }, activePointers, pinchZoomDistance, zoomProps: { pinchZoomDistanceFactor }, } = current;
+        const activePointer = activePointers.find((p) => p.pointerId === event.pointerId);
+        if (activePointers.length === 2 && pinchZoomDistance) {
+            event.stopPropagation();
+            replacePointer(event);
+            const currentDistance = distance(activePointers[0], activePointers[1]);
+            const delta = currentDistance - pinchZoomDistance;
+            if (Math.abs(delta) > 0) {
+                changeZoom(zoom * (1 + delta / pinchZoomDistanceFactor), true, ...activePointers
+                    .map((x) => translateCoordinates(x))
+                    .reduce((acc, coordinate) => coordinate.map((x, i) => acc[i] + x / 2)));
+                current.pinchZoomDistance = currentDistance;
+            }
+            return;
+        }
+        if (zoom > 1) {
+            event.stopPropagation();
+            if (activePointer) {
+                if (activePointers.length === 1) {
+                    changeOffsets((activePointer.clientX - event.clientX) / zoom, (activePointer.clientY - event.clientY) / zoom);
+                }
+                replacePointer(event);
+            }
+        }
+    }, [changeOffsets, replacePointer, changeZoom, translateCoordinates]);
+    const onPointerUp = React.useCallback((event) => {
+        const { current } = refs;
+        const { activePointers } = current;
+        if (activePointers.length === 2 && activePointers.find((p) => p.pointerId === event.pointerId)) {
+            current.pinchZoomDistance = undefined;
+        }
+        clearPointer(event);
+    }, [clearPointer]);
+    React.useEffect(() => offset === 0
+        ? cleanup(subscribe("zoom-in", () => changeZoom(refs.current.state.zoom * refs.current.zoomProps.zoomInMultiplier)), subscribe("zoom-out", () => changeZoom(refs.current.state.zoom / refs.current.zoomProps.zoomInMultiplier)), subscribeSensors("onKeyDown", onKeyDown), subscribeSensors("onWheel", onWheel), subscribeSensors("onPointerDown", onPointerDown), subscribeSensors("onPointerMove", onPointerMove), subscribeSensors("onPointerUp", onPointerUp), subscribeSensors("onPointerLeave", onPointerUp), subscribeSensors("onPointerCancel", onPointerUp))
+        : () => { }, [offset, subscribe, subscribeSensors, onKeyDown, onPointerDown, onPointerMove, onPointerUp, onWheel, changeZoom]);
+    const { state: { zoom, offsetX, offsetY }, } = refs.current;
+    const scaledRect = offset === 0
+        ? {
+            width: rect.width * zoom,
+            height: rect.height * zoom,
+        }
+        : rect;
+    let rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, scaledRect);
+    if (!rendered && !("type" in slide) && "src" in slide) {
+        rendered = (React.createElement(ImageSlide, { slide: slide, offset: offset, rect: scaledRect, render: render, imageFit: carousel.imageFit }));
+    }
+    return rendered ? (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass("fullsize"), cssClass("flex_center")), ...(offset === 0
+            ? { style: { transform: `scale(${zoom}) translate3d(${offsetX}px, ${offsetY}px, 0)` } }
+            : null) }, rendered)) : null;
+};
+const ZoomWrapper = ({ slide, offset, rect, render, carousel, animation }) => {
+    var _a;
+    const { setZoomSupported } = useZoom();
+    const imageSlide = !("type" in slide);
+    const zoomSupported = imageSlide && ("srcSet" in slide || ("width" in slide && "height" in slide));
+    React.useEffect(() => {
+        if (offset === 0) {
+            setZoomSupported(zoomSupported);
+        }
+    }, [offset, zoomSupported, setZoomSupported]);
+    if (zoomSupported) {
+        return (React.createElement(ZoomContainer, { slide: slide, offset: offset, rect: rect, render: render, carousel: carousel, animation: animation }));
+    }
+    const rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, rect);
+    if (rendered) {
+        return React.createElement(React.Fragment, null, rendered);
+    }
+    if (imageSlide) {
+        return React.createElement(ImageSlide, { slide: slide, offset: offset, rect: rect, render: render, imageFit: carousel.imageFit });
+    }
+    return null;
+};
+export const ZoomModule = createModule("zoom", ZoomContextProvider);
+export const Zoom = ({ augment, append }) => {
+    augment(({ toolbar: { buttons, ...restToolbar }, render, carousel, animation, zoom, ...restProps }) => ({
+        toolbar: {
+            buttons: [React.createElement(ZoomButtonsGroup, { key: "zoom", labels: restProps.labels, render: render }), ...buttons],
+            ...restToolbar,
+        },
+        render: {
+            ...render,
+            slide: (slide, offset, rect) => (React.createElement(ZoomWrapper, { slide: slide, offset: offset, rect: rect, render: render, carousel: carousel, animation: animation })),
+        },
+        zoom: {
+            ...defaultZoomProps,
+            ...zoom,
+        },
+        carousel,
+        animation,
+        ...restProps,
+    }));
+    append("controller", ZoomModule);
+};
+export default Zoom;

package/dist/plugins/captions.css

@@ -22,7 +22,6 @@
   font-weight: 500;
   overflow: hidden;
   -webkit-hyphens: auto;
-      -ms-hyphens: auto;
           hyphens: auto;
   display: -webkit-box;
   -webkit-box-orient: vertical;

package/dist/plugins/index.d.ts

@@ -2,4 +2,6 @@ export * from "./Captions.js";
 export * from "./Fullscreen.js";
 export * from "./Inline.js";
 export * from "./Slideshow.js";
+export * from "./Thumbnails.js";
 export * from "./Video.js";
+export * from "./Zoom.js";

package/dist/plugins/index.js

@@ -2,4 +2,6 @@ export * from "./Captions.js";
 export * from "./Fullscreen.js";
 export * from "./Inline.js";
 export * from "./Slideshow.js";
+export * from "./Thumbnails.js";
 export * from "./Video.js";
+export * from "./Zoom.js";

package/dist/plugins/thumbnails.css

@@ -0,0 +1,150 @@
+.yarl__thumbnails {
+  display: flex;
+}
+.yarl__thumbnails_top, .yarl__thumbnails_bottom {
+  flex-flow: column nowrap;
+}
+.yarl__thumbnails_top .yarl__thumbnails_track, .yarl__thumbnails_bottom .yarl__thumbnails_track {
+  flex-flow: row nowrap;
+}
+.yarl__thumbnails_start, .yarl__thumbnails_end {
+  flex-flow: row nowrap;
+}
+.yarl__thumbnails_start .yarl__thumbnails_track, .yarl__thumbnails_end .yarl__thumbnails_track {
+  flex-flow: column nowrap;
+}
+.yarl__thumbnails_wrapper {
+  flex-grow: 1;
+  position: relative;
+}
+.yarl__thumbnails_container {
+  color: #fff;
+  background-color: #000;
+  overflow: hidden;
+  padding: 16px;
+  position: relative;
+  z-index: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  -webkit-touch-callout: none;
+}
+.yarl__thumbnails_container::before, .yarl__thumbnails_container::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+}
+.yarl__thumbnails_top .yarl__thumbnails_container::before, .yarl__thumbnails_bottom .yarl__thumbnails_container::before {
+  left: 0;
+  background: linear-gradient(to left, transparent, #000);
+}
+.yarl__thumbnails_top .yarl__thumbnails_container::after, .yarl__thumbnails_bottom .yarl__thumbnails_container::after {
+  right: 0;
+  background: linear-gradient(to right, transparent, #000);
+}
+.yarl__thumbnails_top .yarl__thumbnails_container::before, .yarl__thumbnails_top .yarl__thumbnails_container::after, .yarl__thumbnails_bottom .yarl__thumbnails_container::before, .yarl__thumbnails_bottom .yarl__thumbnails_container::after {
+  top: 0;
+  bottom: 0;
+  width: 60px;
+}
+.yarl__thumbnails_start .yarl__thumbnails_container::before, .yarl__thumbnails_end .yarl__thumbnails_container::before {
+  top: 0;
+  background: linear-gradient(to top, transparent, #000);
+}
+.yarl__thumbnails_start .yarl__thumbnails_container::after, .yarl__thumbnails_end .yarl__thumbnails_container::after {
+  bottom: 0;
+  background: linear-gradient(to bottom, transparent, #000);
+}
+.yarl__thumbnails_start .yarl__thumbnails_container::before, .yarl__thumbnails_start .yarl__thumbnails_container::after, .yarl__thumbnails_end .yarl__thumbnails_container::before, .yarl__thumbnails_end .yarl__thumbnails_container::after {
+  left: 0;
+  right: 0;
+  height: 60px;
+}
+.yarl__thumbnails_track {
+  display: flex;
+  gap: var(--yarl__thumbnails_thumbnail_gap, 16px);
+}
+.yarl__thumbnails_thumbnail {
+  cursor: pointer;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: transparent;
+  border: var(--yarl__thumbnails_thumbnail_border, 1px) solid rgba(255, 255, 255, 0.8);
+  border-radius: var(--yarl__thumbnails_thumbnail_border_radius, 4px);
+  -webkit-tap-highlight-color: transparent;
+  flex-shrink: 0;
+  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: #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: rgba(255, 255, 255, 0.8);
+  -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8));
+          filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8));
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate3d(-50%, -50%, 0);
+          transform: translate3d(-50%, -50%, 0);
+  width: 32px;
+  height: 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;
+  }
+}

package/dist/styles.css

@@ -1,3 +1,7 @@
+.yarl__fullsize {
+  width: 100%;
+  height: 100%;
+}
 .yarl__portal {
   position: fixed;
   inset: 0;
@@ -12,13 +16,10 @@
 .yarl__container {
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   touch-action: var(--yarl__controller_touch_action, none);
 }
 .yarl__container {
-  width: 100%;
-  height: 100%;
   position: relative;
   overflow: hidden;
   color: #fff;
@@ -56,12 +57,9 @@
   transition: unset;
 }
 .yarl__slide_image {
-  width: 100%;
-  height: 100%;
   -o-object-fit: contain;
      object-fit: contain;
   -moz-user-select: none;
-   -ms-user-select: none;
        user-select: none;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
@@ -144,7 +142,6 @@
   display: flex;
   justify-content: flex-end;
   padding: 8px;
-  gap: 8px;
 }
 [dir=rtl] .yarl__toolbar {
   inset: 0 auto auto 0;
@@ -215,6 +212,7 @@
 .yarl__no_scroll {
   height: 100%;
   overflow: hidden;
+  overscroll-behavior: none;
 }
 .yarl__pad_scrollbar {
   padding-right: var(--yarl__scrollbar_padding, 17px);