@depup/lottie-react 2.4.1-depup.0 → 3.0.0-depup.0

package/build/controls/useFullscreen.cjs

@@ -0,0 +1,46 @@
+let react = require("react");
+//#region src/controls/useFullscreen.ts
+/**
+* Fills the screen with one element, and says whether it currently is.
+*
+* The state follows the browser's own announcement and nothing else, so leaving
+* through the Escape key, through another animation taking the screen, or
+* through anything else the browser offers is reported the same as leaving
+* through this hook. It also means a request the browser refuses changes
+* nothing here, rather than leaving a control claiming something that did not
+* happen.
+*
+* Nothing touches a browser global outside an effect or the toggle itself, so
+* this is safe on a server, and the first client render agrees with the markup
+* a server sent rather than hydrating a button into a place that had none.
+*/
+function useFullscreen(root) {
+	const [supported, setSupported] = (0, react.useState)(false);
+	const [isFullscreen, setIsFullscreen] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		setSupported(document.fullscreenEnabled === true);
+	}, []);
+	(0, react.useEffect)(() => {
+		if (root === null) return;
+		const onChange = () => {
+			setIsFullscreen(document.fullscreenElement === root);
+		};
+		root.addEventListener("fullscreenchange", onChange);
+		return () => {
+			root.removeEventListener("fullscreenchange", onChange);
+		};
+	}, [root]);
+	return {
+		isFullscreen,
+		toggle: (0, react.useMemo)(() => {
+			if (!supported || root === null) return null;
+			return () => {
+				(document.fullscreenElement === root ? document.exitFullscreen() : root.requestFullscreen()).catch((cause) => {
+					if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") console.warn(`[lottie-react] the browser refused to change fullscreen: ${String(cause)}. A request has to come from a click or a key press, and a page in an iframe needs allow="fullscreen".`);
+				});
+			};
+		}, [supported, root])
+	};
+}
+//#endregion
+exports.useFullscreen = useFullscreen;

package/build/controls/useFullscreen.js

@@ -0,0 +1,46 @@
+import { useEffect, useMemo, useState } from "react";
+//#region src/controls/useFullscreen.ts
+/**
+* Fills the screen with one element, and says whether it currently is.
+*
+* The state follows the browser's own announcement and nothing else, so leaving
+* through the Escape key, through another animation taking the screen, or
+* through anything else the browser offers is reported the same as leaving
+* through this hook. It also means a request the browser refuses changes
+* nothing here, rather than leaving a control claiming something that did not
+* happen.
+*
+* Nothing touches a browser global outside an effect or the toggle itself, so
+* this is safe on a server, and the first client render agrees with the markup
+* a server sent rather than hydrating a button into a place that had none.
+*/
+function useFullscreen(root) {
+	const [supported, setSupported] = useState(false);
+	const [isFullscreen, setIsFullscreen] = useState(false);
+	useEffect(() => {
+		setSupported(document.fullscreenEnabled === true);
+	}, []);
+	useEffect(() => {
+		if (root === null) return;
+		const onChange = () => {
+			setIsFullscreen(document.fullscreenElement === root);
+		};
+		root.addEventListener("fullscreenchange", onChange);
+		return () => {
+			root.removeEventListener("fullscreenchange", onChange);
+		};
+	}, [root]);
+	return {
+		isFullscreen,
+		toggle: useMemo(() => {
+			if (!supported || root === null) return null;
+			return () => {
+				(document.fullscreenElement === root ? document.exitFullscreen() : root.requestFullscreen()).catch((cause) => {
+					if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") console.warn(`[lottie-react] the browser refused to change fullscreen: ${String(cause)}. A request has to come from a click or a key press, and a page in an iframe needs allow="fullscreen".`);
+				});
+			};
+		}, [supported, root])
+	};
+}
+//#endregion
+export { useFullscreen };

package/build/controls/useShortcuts.cjs

@@ -0,0 +1,70 @@
+const require_types = require("../animation/types.cjs");
+let react = require("react");
+//#region src/controls/useShortcuts.ts
+/**
+* Whether a key belongs to the element under it rather than to us.
+*
+* The picker is in this list because letters drive its type-ahead, so `l` there
+* is someone looking for an option rather than asking for looping.
+*/
+function isTyping(element) {
+	return element.isContentEditable || element.tagName === "INPUT" || element.tagName === "TEXTAREA" || element.tagName === "SELECT";
+}
+/**
+* The keyboard shortcuts a control bar answers: `k` to play or pause, `l` to
+* loop, `f` to fill the screen.
+*
+* They live with the controls, so a page that renders none has no listener at
+* all. Three keys rather than a media player's set, because letters do not
+* activate a focused button and the seek bar already owns the arrow keys when
+* it has focus, so nothing here has to be taken away from the browser.
+*
+* A key is ours when it happened inside this animation's root element, or when
+* this animation is the one filling the screen. The second half is not
+* theoretical: the animation area itself is not focusable, so clicking the
+* picture leaves focus on the document body, and a request made from anywhere
+* outside the element that filled the screen leaves it there too. Both measured
+* in Chromium. A gate that only asked about focus would therefore be dead in
+* the place where a keyboard is all anyone has. With several animations on one
+* page at most one can pass the gate, and when focus is in none of them nothing
+* happens, which is better than all of them answering at once.
+*/
+function useShortcuts(lottie, options) {
+	const latest = (0, react.useRef)({
+		lottie,
+		options
+	});
+	latest.current.lottie = lottie;
+	latest.current.options = options;
+	(0, react.useEffect)(() => {
+		const onKeyDown = (event) => {
+			const { lottie, options } = latest.current;
+			const { root } = lottie;
+			if (options.disabled || root === null) return;
+			if (event.repeat || event.metaKey || event.ctrlKey || event.altKey) return;
+			const target = event.target;
+			if (!(target instanceof Node && root.contains(target)) && document.fullscreenElement !== root) return;
+			if (target instanceof HTMLElement && isTyping(target)) return;
+			switch (event.key.toLowerCase()) {
+				case "k":
+					if (lottie.state === require_types.LottieState.playing) lottie.pause();
+					else lottie.play();
+					break;
+				case "l":
+					options.toggleLoop();
+					break;
+				case "f":
+					options.toggleFullscreen?.();
+					break;
+				default: return;
+			}
+			event.preventDefault();
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => {
+			document.removeEventListener("keydown", onKeyDown);
+		};
+	}, []);
+}
+//#endregion
+exports.useShortcuts = useShortcuts;

package/build/controls/useShortcuts.js

@@ -0,0 +1,70 @@
+import { LottieState } from "../animation/types.js";
+import { useEffect, useRef } from "react";
+//#region src/controls/useShortcuts.ts
+/**
+* Whether a key belongs to the element under it rather than to us.
+*
+* The picker is in this list because letters drive its type-ahead, so `l` there
+* is someone looking for an option rather than asking for looping.
+*/
+function isTyping(element) {
+	return element.isContentEditable || element.tagName === "INPUT" || element.tagName === "TEXTAREA" || element.tagName === "SELECT";
+}
+/**
+* The keyboard shortcuts a control bar answers: `k` to play or pause, `l` to
+* loop, `f` to fill the screen.
+*
+* They live with the controls, so a page that renders none has no listener at
+* all. Three keys rather than a media player's set, because letters do not
+* activate a focused button and the seek bar already owns the arrow keys when
+* it has focus, so nothing here has to be taken away from the browser.
+*
+* A key is ours when it happened inside this animation's root element, or when
+* this animation is the one filling the screen. The second half is not
+* theoretical: the animation area itself is not focusable, so clicking the
+* picture leaves focus on the document body, and a request made from anywhere
+* outside the element that filled the screen leaves it there too. Both measured
+* in Chromium. A gate that only asked about focus would therefore be dead in
+* the place where a keyboard is all anyone has. With several animations on one
+* page at most one can pass the gate, and when focus is in none of them nothing
+* happens, which is better than all of them answering at once.
+*/
+function useShortcuts(lottie, options) {
+	const latest = useRef({
+		lottie,
+		options
+	});
+	latest.current.lottie = lottie;
+	latest.current.options = options;
+	useEffect(() => {
+		const onKeyDown = (event) => {
+			const { lottie, options } = latest.current;
+			const { root } = lottie;
+			if (options.disabled || root === null) return;
+			if (event.repeat || event.metaKey || event.ctrlKey || event.altKey) return;
+			const target = event.target;
+			if (!(target instanceof Node && root.contains(target)) && document.fullscreenElement !== root) return;
+			if (target instanceof HTMLElement && isTyping(target)) return;
+			switch (event.key.toLowerCase()) {
+				case "k":
+					if (lottie.state === LottieState.playing) lottie.pause();
+					else lottie.play();
+					break;
+				case "l":
+					options.toggleLoop();
+					break;
+				case "f":
+					options.toggleFullscreen?.();
+					break;
+				default: return;
+			}
+			event.preventDefault();
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => {
+			document.removeEventListener("keydown", onKeyDown);
+		};
+	}, []);
+}
+//#endregion
+export { useShortcuts };

package/build/index.cjs

@@ -0,0 +1,36 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_useLottieInstance = require("./animation/useLottieInstance.cjs");
+const require_LottieDisplay = require("./animation/LottieDisplay.cjs");
+const require_types = require("./animation/types.cjs");
+const require_Lottie = require("./animation/Lottie.cjs");
+const require_LottieLight = require("./animation/LottieLight.cjs");
+const require_LottieSvg = require("./animation/LottieSvg.cjs");
+const require_useLottie = require("./animation/useLottie.cjs");
+const require_useLottieLight = require("./animation/useLottieLight.cjs");
+const require_useLottieSvg = require("./animation/useLottieSvg.cjs");
+const require_LottieControls = require("./controls/LottieControls.cjs");
+const require_LottieInteractions = require("./interactions/LottieInteractions.cjs");
+const require_lottieInView = require("./interactions/lottieInView.cjs");
+const require_lottieScrollScrub = require("./interactions/lottieScrollScrub.cjs");
+const require_useLottieInteractions = require("./interactions/useLottieInteractions.cjs");
+const require_LottieError = require("./overlays/LottieError.cjs");
+const require_LottieLoading = require("./overlays/LottieLoading.cjs");
+exports.Lottie = require_Lottie.Lottie;
+exports.LottieControls = require_LottieControls.LottieControls;
+exports.LottieDirection = require_types.LottieDirection;
+exports.LottieDisplay = require_LottieDisplay.LottieDisplay;
+exports.LottieError = require_LottieError.LottieError;
+exports.LottieInteractions = require_LottieInteractions.LottieInteractions;
+exports.LottieLight = require_LottieLight.LottieLight;
+exports.LottieLoading = require_LottieLoading.LottieLoading;
+exports.LottieRenderer = require_types.LottieRenderer;
+exports.LottieState = require_types.LottieState;
+exports.LottieSubscription = require_types.LottieSubscription;
+exports.LottieSvg = require_LottieSvg.LottieSvg;
+exports.lottieInView = require_lottieInView.lottieInView;
+exports.lottieScrollScrub = require_lottieScrollScrub.lottieScrollScrub;
+exports.useLottie = require_useLottie.useLottie;
+exports.useLottieInstance = require_useLottieInstance.useLottieInstance;
+exports.useLottieInteractions = require_useLottieInteractions.useLottieInteractions;
+exports.useLottieLight = require_useLottieLight.useLottieLight;
+exports.useLottieSvg = require_useLottieSvg.useLottieSvg;

package/build/index.d.cts

@@ -0,0 +1,19 @@
+import { LottieDirection, LottieHandle, LottieInstance, LottieRenderer, LottieSeekTarget, LottieSegments, LottieState, LottieSubscription, LottieSubscriptions } from "./animation/types.cjs";
+import { UseLottieOptions } from "./animation/useLottieAnimation.cjs";
+import { Lottie, LottieProps } from "./animation/Lottie.cjs";
+import { LottieDisplay, LottieDisplayProps } from "./animation/LottieDisplay.cjs";
+import { LottieLight, LottieLightProps } from "./animation/LottieLight.cjs";
+import { LottieSvg, LottieSvgProps } from "./animation/LottieSvg.cjs";
+import { useLottie } from "./animation/useLottie.cjs";
+import { useLottieInstance } from "./animation/useLottieInstance.cjs";
+import { useLottieLight } from "./animation/useLottieLight.cjs";
+import { useLottieSvg } from "./animation/useLottieSvg.cjs";
+import { LottieControls, LottieControlsProps } from "./controls/LottieControls.cjs";
+import { LottieInteraction, LottieInteractionContext } from "./interactions/types.cjs";
+import { LottieInteractions, LottieInteractionsProps } from "./interactions/LottieInteractions.cjs";
+import { LottieInViewOptions, lottieInView } from "./interactions/lottieInView.cjs";
+import { LottieScrollScrubOptions, lottieScrollScrub } from "./interactions/lottieScrollScrub.cjs";
+import { useLottieInteractions } from "./interactions/useLottieInteractions.cjs";
+import { LottieError, LottieErrorProps } from "./overlays/LottieError.cjs";
+import { LottieLoading, LottieLoadingProps } from "./overlays/LottieLoading.cjs";
+export { Lottie, LottieControls, type LottieControlsProps, LottieDirection, LottieDisplay, type LottieDisplayProps, LottieError, type LottieErrorProps, type LottieHandle, type LottieInViewOptions, type LottieInstance, type LottieInteraction, type LottieInteractionContext, LottieInteractions, type LottieInteractionsProps, LottieLight, type LottieLightProps, LottieLoading, type LottieLoadingProps, type LottieProps, LottieRenderer, type LottieScrollScrubOptions, type LottieSeekTarget, type LottieSegments, LottieState, LottieSubscription, type LottieSubscriptions, LottieSvg, type LottieSvgProps, type UseLottieOptions, lottieInView, lottieScrollScrub, useLottie, useLottieInstance, useLottieInteractions, useLottieLight, useLottieSvg };

package/build/index.d.ts

@@ -1,80 +1,19 @@
-/// <reference types="react" />
-import { AnimationDirection, AnimationSegment, AnimationItem, RendererType, AnimationConfigWithData, AnimationEventCallback, AnimationEvents, AnimationEventName } from 'lottie-web';
-export { default as LottiePlayer } from 'lottie-web';
-import * as react from 'react';
-import react__default, { RefObject, MutableRefObject, ReactElement, CSSProperties } from 'react';
-
-type LottieRefCurrentProps = {
-    play: () => void;
-    stop: () => void;
-    pause: () => void;
-    setSpeed: (speed: number) => void;
-    goToAndStop: (value: number, isFrame?: boolean) => void;
-    goToAndPlay: (value: number, isFrame?: boolean) => void;
-    setDirection: (direction: AnimationDirection) => void;
-    playSegments: (segments: AnimationSegment | AnimationSegment[], forceFlag?: boolean) => void;
-    setSubframe: (useSubFrames: boolean) => void;
-    getDuration: (inFrames?: boolean) => number | undefined;
-    destroy: () => void;
-    animationContainerRef: RefObject<HTMLDivElement>;
-    animationLoaded: boolean;
-    animationItem: AnimationItem | undefined;
-};
-type LottieRef = MutableRefObject<LottieRefCurrentProps | null>;
-type LottieOptions<T extends RendererType = "svg"> = Omit<AnimationConfigWithData<T>, "container" | "animationData"> & {
-    animationData: unknown;
-    lottieRef?: LottieRef;
-    onComplete?: AnimationEventCallback<AnimationEvents[AnimationEventName]> | null;
-    onLoopComplete?: AnimationEventCallback<AnimationEvents[AnimationEventName]> | null;
-    onEnterFrame?: AnimationEventCallback<AnimationEvents[AnimationEventName]> | null;
-    onSegmentStart?: AnimationEventCallback<AnimationEvents[AnimationEventName]> | null;
-    onConfigReady?: AnimationEventCallback<AnimationEvents[AnimationEventName]> | null;
-    onDataReady?: AnimationEventCallback<AnimationEvents[AnimationEventName]> | null;
-    onDataFailed?: AnimationEventCallback<AnimationEvents[AnimationEventName]> | null;
-    onLoadedImages?: AnimationEventCallback<AnimationEvents[AnimationEventName]> | null;
-    onDOMLoaded?: AnimationEventCallback<AnimationEvents[AnimationEventName]> | null;
-    onDestroy?: AnimationEventCallback<AnimationEvents[AnimationEventName]> | null;
-} & Omit<react__default.HTMLProps<HTMLDivElement>, "loop">;
-type PartialLottieOptions = Omit<LottieOptions, "animationData"> & {
-    animationData?: LottieOptions["animationData"];
-};
-type Axis = "x" | "y";
-type Position = {
-    [key in Axis]: number | [number, number];
-};
-type Action = {
-    type: "seek" | "play" | "stop" | "loop";
-    frames: [number] | [number, number];
-    visibility?: [number, number];
-    position?: Position;
-};
-type InteractivityProps = {
-    lottieObj: {
-        View: ReactElement;
-    } & LottieRefCurrentProps;
-    actions: Action[];
-    mode: "scroll" | "cursor";
-};
-type LottieComponentProps = LottieOptions & {
-    interactivity?: Omit<InteractivityProps, "lottieObj">;
-};
-type PartialLottieComponentProps = Omit<LottieComponentProps, "animationData"> & {
-    animationData?: LottieOptions["animationData"];
-};
-type Listener = {
-    name: AnimationEventName;
-    handler: AnimationEventCallback<AnimationEvents[AnimationEventName]>;
-};
-type PartialListener = Omit<Listener, "handler"> & {
-    handler?: Listener["handler"] | null;
-};
-
-declare const Lottie: (props: LottieComponentProps) => react.ReactElement<any, string | react.JSXElementConstructor<any>>;
-
-declare const useLottie: <T extends RendererType = "svg">(props: LottieOptions<T>, style?: CSSProperties) => {
-    View: ReactElement;
-} & LottieRefCurrentProps;
-
-declare const useLottieInteractivity: ({ actions, mode, lottieObj, }: InteractivityProps) => ReactElement;
-
-export { Action, Axis, InteractivityProps, Listener, LottieComponentProps, LottieOptions, LottieRef, LottieRefCurrentProps, PartialListener, PartialLottieComponentProps, PartialLottieOptions, Position, Lottie as default, useLottie, useLottieInteractivity };
+import { LottieDirection, LottieHandle, LottieInstance, LottieRenderer, LottieSeekTarget, LottieSegments, LottieState, LottieSubscription, LottieSubscriptions } from "./animation/types.js";
+import { UseLottieOptions } from "./animation/useLottieAnimation.js";
+import { Lottie, LottieProps } from "./animation/Lottie.js";
+import { LottieDisplay, LottieDisplayProps } from "./animation/LottieDisplay.js";
+import { LottieLight, LottieLightProps } from "./animation/LottieLight.js";
+import { LottieSvg, LottieSvgProps } from "./animation/LottieSvg.js";
+import { useLottie } from "./animation/useLottie.js";
+import { useLottieInstance } from "./animation/useLottieInstance.js";
+import { useLottieLight } from "./animation/useLottieLight.js";
+import { useLottieSvg } from "./animation/useLottieSvg.js";
+import { LottieControls, LottieControlsProps } from "./controls/LottieControls.js";
+import { LottieInteraction, LottieInteractionContext } from "./interactions/types.js";
+import { LottieInteractions, LottieInteractionsProps } from "./interactions/LottieInteractions.js";
+import { LottieInViewOptions, lottieInView } from "./interactions/lottieInView.js";
+import { LottieScrollScrubOptions, lottieScrollScrub } from "./interactions/lottieScrollScrub.js";
+import { useLottieInteractions } from "./interactions/useLottieInteractions.js";
+import { LottieError, LottieErrorProps } from "./overlays/LottieError.js";
+import { LottieLoading, LottieLoadingProps } from "./overlays/LottieLoading.js";
+export { Lottie, LottieControls, type LottieControlsProps, LottieDirection, LottieDisplay, type LottieDisplayProps, LottieError, type LottieErrorProps, type LottieHandle, type LottieInViewOptions, type LottieInstance, type LottieInteraction, type LottieInteractionContext, LottieInteractions, type LottieInteractionsProps, LottieLight, type LottieLightProps, LottieLoading, type LottieLoadingProps, type LottieProps, LottieRenderer, type LottieScrollScrubOptions, type LottieSeekTarget, type LottieSegments, LottieState, LottieSubscription, type LottieSubscriptions, LottieSvg, type LottieSvgProps, type UseLottieOptions, lottieInView, lottieScrollScrub, useLottie, useLottieInstance, useLottieInteractions, useLottieLight, useLottieSvg };