@bounceapp/lottie/lib/module/components/LottieView.react.js

Lottie wrapper for React Native Web

"use strict";

// Adapted from lottie-react-native (https://github.com/lottie-react-native/lottie-react-native),
// licensed under the Apache License, Version 2.0. See NOTICE and LICENSE-APACHE.

import Lottie from "lottie-react";
import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
import { jsx as _jsx } from "react/jsx-runtime";
const parseAnimationData = source => {
  if (typeof source === "object" && !("uri" in source)) {
    return source;
  }
  return undefined;
};
export const LottieView = /*#__PURE__*/forwardRef(({
  source,
  speed,
  loop,
  style,
  autoPlay,
  hover,
  direction,
  progress,
  onAnimationLoaded,
  onAnimationFailure,
  onAnimationFinish,
  onAnimationLoop
}, ref) => {
  const lottieRef = useRef(null);
  const animationData = parseAnimationData(source);
  useEffect(() => {
    lottieRef.current?.setSpeed(speed ?? 1);
  }, [speed]);
  useEffect(() => {
    lottieRef.current?.setDirection(direction === -1 ? -1 : 1);
  }, [direction]);
  useEffect(() => {
    if (progress != null && __DEV__) {
      // biome-ignore lint/suspicious/noConsole: intentional dev-only warning
      console.warn("lottie-react-native: progress is not supported on web");
    }
  }, [progress]);
  useImperativeHandle(ref, () => {
    return {
      play: (s, e) => {
        try {
          const bothDefined = s !== undefined && e !== undefined;
          const bothUndefined = s === undefined && e === undefined;
          const bothEqual = e === s;
          if (bothDefined) {
            if (bothEqual) {
              lottieRef.current?.goToAndPlay(e, true);
              return;
            }
            lottieRef.current?.playSegments([s, e], true);
            return;
          }
          if (s !== undefined && e === undefined) {
            lottieRef.current?.goToAndPlay(s, true);
          }
          if (bothUndefined) {
            lottieRef.current?.play();
          }
        } catch (error) {
          // biome-ignore lint/suspicious/noConsole: surface playback errors during development
          console.error(error);
        }
      },
      reset: () => {
        lottieRef.current?.goToAndPlay(0);
      },
      pause: () => {
        lottieRef.current?.pause();
        onAnimationFinish?.(true);
      },
      resume: () => {
        lottieRef.current?.play();
      }
    };
  }, [onAnimationFinish]);
  if (!animationData) {
    if (__DEV__) {
      // biome-ignore lint/suspicious/noConsole: intentional dev-only warning
      console.warn("lottie-react-native: string and remote uri sources are not supported on web, pass parsed animation JSON instead");
    }
    return null;
  }
  return /*#__PURE__*/_jsx(Lottie, {
    lottieRef: lottieRef,
    animationData: animationData,
    style: style,
    autoplay: autoPlay,
    loop: loop,
    onMouseEnter: hover ? () => lottieRef.current?.play() : undefined,
    onMouseLeave: hover ? () => lottieRef.current?.stop() : undefined,
    onComplete: () => onAnimationFinish?.(false),
    onLoopComplete: () => onAnimationLoop?.(),
    onDOMLoaded: () => onAnimationLoaded?.(),
    onDataFailed: () => onAnimationFailure?.("Failed to load animation")
  });
});
//# sourceMappingURL=LottieView.react.js.map