@cuemath/leap 3.0.3 → 3.0.4-hg1

package/dist/features/ui/lottie-animation/lottie-animation.js

@@ -1,19 +1,25 @@
 import { jsx as E } from "react/jsx-runtime";
 import g from "lottie-web";
-import { memo as y, forwardRef as w, useRef as u, useImperativeHandle as b, useEffect as A } from "react";
-import I from "../layout/flex-view.js";
-import { fetchLottie as $ } from "./helper.js";
-const x = w((p, v) => {
+import { memo as y, forwardRef as b, useRef as m, useMemo as A, useImperativeHandle as I, useEffect as $ } from "react";
+import x from "../layout/flex-view.js";
+import { fetchLottie as O } from "./helper.js";
+const S = b((p, v) => {
   const {
-    src: m,
+    src: l,
     width: L = "100%",
     height: h = "100%",
-    settings: l,
+    settings: o,
     eventListener: i,
-    onRender: a,
-    animateOnIntersect: c
-  } = p, o = u(null), e = u(null), s = u(null);
-  return b(
+    onRender: c,
+    animateOnIntersect: s
+  } = p, a = m(null), e = m(null), u = m(null), w = A(
+    () => ({
+      ...o,
+      renderer: window.ReactNativeWebView ? "svg" : (o == null ? void 0 : o.renderer) ?? "svg"
+    }),
+    [o]
+  );
+  return I(
     v,
     () => ({
       playSegments: (t, r) => {
@@ -38,31 +44,30 @@ const x = w((p, v) => {
       }
     }),
     []
-  ), A(() => ((async () => {
+  ), $(() => ((async () => {
     try {
-      const r = await $(m);
-      o.current && (e.current = g.loadAnimation({
-        container: o.current,
+      const r = await O(l);
+      a.current && (e.current = g.loadAnimation({
+        container: a.current,
         animationData: r,
-        renderer: "svg",
         loop: !0,
         autoplay: !0,
-        ...l
-      }), c && (s.current = new IntersectionObserver(
+        ...w
+      }), s && (u.current = new IntersectionObserver(
         ([n]) => {
           var f, d;
           n && n.isIntersecting ? (f = e.current) == null || f.play() : (d = e.current) == null || d.pause();
         },
         { threshold: 0 }
-      ), o.current && s.current.observe(o.current)), a == null || a(), i && e.current.addEventListener(i.name, i.callback));
+      ), a.current && u.current.observe(a.current)), c == null || c(), i && e.current.addEventListener(i.name, i.callback));
     } catch (r) {
       throw Error(`Error loading Lottie animation: ${r}`);
     }
   })(), () => {
     var r;
-    e.current && (i && e.current.removeEventListener(i.name, i.callback), c && ((r = s.current) == null || r.disconnect()), e.current.destroy());
-  }), [m, i, a, c, l]), /* @__PURE__ */ E(I, { ref: o, $width: L, $height: h });
-}), F = y(x);
+    e.current && (i && e.current.removeEventListener(i.name, i.callback), s && ((r = u.current) == null || r.disconnect()), e.current.destroy());
+  }), [l, i, c, s, o]), /* @__PURE__ */ E(x, { ref: a, $width: L, $height: h });
+}), F = y(S);
 export {
   F as default
 };

package/dist/features/ui/lottie-animation/lottie-animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"lottie-animation.js","sources":["../../../../src/features/ui/lottie-animation/lottie-animation.tsx"],"sourcesContent":["import type { ILottieAnimationProps, ILottieAnimationRef } from './types';\nimport type { AnimationEventName, AnimationItem, AnimationSegment } from 'lottie-web';\n\nimport lottie from 'lottie-web';\nimport { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport FlexView from '../layout/flex-view';\nimport { fetchLottie } from './helper';\n\nconst LottieAnimation = forwardRef<ILottieAnimationRef, ILottieAnimationProps>((props, ref) => {\n  const {\n    src,\n    width = '100%',\n    height = '100%',\n    settings,\n    eventListener,\n    onRender,\n    animateOnIntersect,\n  } = props;\n\n  const container = useRef<HTMLDivElement>(null);\n  const animationInstance = useRef<AnimationItem | null>(null);\n  const intersectionObserver = useRef<IntersectionObserver | null>(null);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      playSegments: (segments: AnimationSegment, forceFlag?: boolean) =>\n        animationInstance.current?.playSegments(segments, forceFlag),\n      addEventListener: (eventName: string, callback: () => void) =>\n        animationInstance.current?.addEventListener(eventName as AnimationEventName, callback),\n      removeEventListener: (eventName: string, callback: () => void) =>\n        animationInstance.current?.removeEventListener(eventName as AnimationEventName, callback),\n      play: () => animationInstance.current?.play(),\n      stop: () => animationInstance.current?.stop(),\n    }),\n    [],\n  );\n\n  useEffect(() => {\n    const loadAnimation = async () => {\n      try {\n        const animationData = await fetchLottie(src);\n\n        if (container.current) {\n          animationInstance.current = lottie.loadAnimation({\n            container: container.current,\n            animationData,\n            renderer: 'svg',\n            loop: true,\n            autoplay: true,\n            ...settings,\n          });\n\n          if (animateOnIntersect) {\n            intersectionObserver.current = new IntersectionObserver(\n              ([entry]) => {\n                if (entry && entry.isIntersecting) {\n                  animationInstance.current?.play();\n                } else {\n                  animationInstance.current?.pause();\n                }\n              },\n              { threshold: 0 },\n            );\n\n            if (container.current) {\n              intersectionObserver.current.observe(container.current);\n            }\n          }\n\n          onRender?.();\n          if (eventListener) {\n            animationInstance.current.addEventListener(eventListener.name, eventListener.callback);\n          }\n        }\n      } catch (error) {\n        throw Error(`Error loading Lottie animation: ${error}`);\n      }\n    };\n\n    loadAnimation();\n\n    return () => {\n      if (animationInstance.current) {\n        if (eventListener) {\n          animationInstance.current.removeEventListener(eventListener.name, eventListener.callback);\n        }\n\n        if (animateOnIntersect) {\n          intersectionObserver.current?.disconnect();\n        }\n        animationInstance.current.destroy();\n      }\n    };\n  }, [src, eventListener, onRender, animateOnIntersect, settings]);\n\n  return <FlexView ref={container} $width={width} $height={height} />;\n});\n\nexport default memo(LottieAnimation);\n"],"names":["LottieAnimation","forwardRef","props","ref","src","width","height","settings","eventListener","onRender","animateOnIntersect","container","useRef","animationInstance","intersectionObserver","useImperativeHandle","segments","forceFlag","_a","eventName","callback","useEffect","animationData","fetchLottie","lottie","entry","_b","error","FlexView","LottieAnimation$1","memo"],"mappings":";;;;;AASA,MAAMA,IAAkBC,EAAuD,CAACC,GAAOC,MAAQ;AACvF,QAAA;AAAA,IACJ,KAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC;AAAA,IACA,oBAAAC;AAAA,EACE,IAAAR,GAEES,IAAYC,EAAuB,IAAI,GACvCC,IAAoBD,EAA6B,IAAI,GACrDE,IAAuBF,EAAoC,IAAI;AAErE,SAAAG;AAAA,IACEZ;AAAA,IACA,OAAO;AAAA,MACL,cAAc,CAACa,GAA4BC,MACzC;;AAAA,gBAAAC,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,aAAaF,GAAUC;AAAA;AAAA,MACpD,kBAAkB,CAACE,GAAmBC,MACpC;;AAAA,gBAAAF,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,iBAAiBC,GAAiCC;AAAA;AAAA,MAC/E,qBAAqB,CAACD,GAAmBC,MACvC;;AAAA,gBAAAF,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,oBAAoBC,GAAiCC;AAAA;AAAA,MAClF,MAAM,MAAM;;AAAA,gBAAAF,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B;AAAA;AAAA,MACvC,MAAM,MAAM;;AAAA,gBAAAA,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B;AAAA;AAAA,IAAK;AAAA,IAE9C,CAAC;AAAA,EAAA,GAGHG,EAAU,QACc,YAAY;AAC5B,QAAA;AACI,YAAAC,IAAgB,MAAMC,EAAYnB,CAAG;AAE3C,MAAIO,EAAU,YACME,EAAA,UAAUW,EAAO,cAAc;AAAA,QAC/C,WAAWb,EAAU;AAAA,QACrB,eAAAW;AAAA,QACA,UAAU;AAAA,QACV,MAAM;AAAA,QACN,UAAU;AAAA,QACV,GAAGf;AAAA,MAAA,CACJ,GAEGG,MACFI,EAAqB,UAAU,IAAI;AAAA,QACjC,CAAC,CAACW,CAAK,MAAM;;AACP,UAAAA,KAASA,EAAM,kBACjBP,IAAAL,EAAkB,YAAlB,QAAAK,EAA2B,UAE3BQ,IAAAb,EAAkB,YAAlB,QAAAa,EAA2B;AAAA,QAE/B;AAAA,QACA,EAAE,WAAW,EAAE;AAAA,MAAA,GAGbf,EAAU,WACSG,EAAA,QAAQ,QAAQH,EAAU,OAAO,IAI/CF,KAAA,QAAAA,KACPD,KACFK,EAAkB,QAAQ,iBAAiBL,EAAc,MAAMA,EAAc,QAAQ;AAAA,aAGlFmB,GAAO;AACR,YAAA,MAAM,mCAAmCA,CAAK,EAAE;AAAA,IACxD;AAAA,EAAA,MAKK,MAAM;;AACX,IAAId,EAAkB,YAChBL,KACFK,EAAkB,QAAQ,oBAAoBL,EAAc,MAAMA,EAAc,QAAQ,GAGtFE,OACFQ,IAAAJ,EAAqB,YAArB,QAAAI,EAA8B,eAEhCL,EAAkB,QAAQ;EAC5B,IAED,CAACT,GAAKI,GAAeC,GAAUC,GAAoBH,CAAQ,CAAC,qBAEvDqB,GAAS,EAAA,KAAKjB,GAAW,QAAQN,GAAO,SAASC,EAAQ,CAAA;AACnE,CAAC,GAEcuB,IAAAC,EAAK9B,CAAe;"}
+{"version":3,"file":"lottie-animation.js","sources":["../../../../src/features/ui/lottie-animation/lottie-animation.tsx"],"sourcesContent":["import type { ILottieAnimationProps, ILottieAnimationRef } from './types';\nimport type { AnimationEventName, AnimationItem, AnimationSegment, RendererType } from 'lottie-web';\n\nimport lottie from 'lottie-web';\nimport { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\n\nimport FlexView from '../layout/flex-view';\nimport { fetchLottie } from './helper';\n\nconst LottieAnimation = forwardRef<ILottieAnimationRef, ILottieAnimationProps>((props, ref) => {\n  const {\n    src,\n    width = '100%',\n    height = '100%',\n    settings,\n    eventListener,\n    onRender,\n    animateOnIntersect,\n  } = props;\n\n  const container = useRef<HTMLDivElement>(null);\n  const animationInstance = useRef<AnimationItem | null>(null);\n  const intersectionObserver = useRef<IntersectionObserver | null>(null);\n  const newSettings = useMemo(\n    () => ({\n      ...settings,\n      renderer: (window.ReactNativeWebView ? 'svg' : settings?.renderer ?? 'svg') as RendererType,\n    }),\n    [settings],\n  );\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      playSegments: (segments: AnimationSegment, forceFlag?: boolean) =>\n        animationInstance.current?.playSegments(segments, forceFlag),\n      addEventListener: (eventName: string, callback: () => void) =>\n        animationInstance.current?.addEventListener(eventName as AnimationEventName, callback),\n      removeEventListener: (eventName: string, callback: () => void) =>\n        animationInstance.current?.removeEventListener(eventName as AnimationEventName, callback),\n      play: () => animationInstance.current?.play(),\n      stop: () => animationInstance.current?.stop(),\n    }),\n    [],\n  );\n\n  useEffect(() => {\n    const loadAnimation = async () => {\n      try {\n        const animationData = await fetchLottie(src);\n\n        if (container.current) {\n          animationInstance.current = lottie.loadAnimation({\n            container: container.current,\n            animationData,\n            loop: true,\n            autoplay: true,\n            ...newSettings,\n          });\n\n          if (animateOnIntersect) {\n            intersectionObserver.current = new IntersectionObserver(\n              ([entry]) => {\n                if (entry && entry.isIntersecting) {\n                  animationInstance.current?.play();\n                } else {\n                  animationInstance.current?.pause();\n                }\n              },\n              { threshold: 0 },\n            );\n\n            if (container.current) {\n              intersectionObserver.current.observe(container.current);\n            }\n          }\n\n          onRender?.();\n          if (eventListener) {\n            animationInstance.current.addEventListener(eventListener.name, eventListener.callback);\n          }\n        }\n      } catch (error) {\n        throw Error(`Error loading Lottie animation: ${error}`);\n      }\n    };\n\n    loadAnimation();\n\n    return () => {\n      if (animationInstance.current) {\n        if (eventListener) {\n          animationInstance.current.removeEventListener(eventListener.name, eventListener.callback);\n        }\n\n        if (animateOnIntersect) {\n          intersectionObserver.current?.disconnect();\n        }\n        animationInstance.current.destroy();\n      }\n    };\n  }, [src, eventListener, onRender, animateOnIntersect, settings]);\n\n  return <FlexView ref={container} $width={width} $height={height} />;\n});\n\nexport default memo(LottieAnimation);\n"],"names":["LottieAnimation","forwardRef","props","ref","src","width","height","settings","eventListener","onRender","animateOnIntersect","container","useRef","animationInstance","intersectionObserver","newSettings","useMemo","useImperativeHandle","segments","forceFlag","_a","eventName","callback","useEffect","animationData","fetchLottie","lottie","entry","_b","error","FlexView","LottieAnimation$1","memo"],"mappings":";;;;;AASA,MAAMA,IAAkBC,EAAuD,CAACC,GAAOC,MAAQ;AACvF,QAAA;AAAA,IACJ,KAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC;AAAA,IACA,oBAAAC;AAAA,EACE,IAAAR,GAEES,IAAYC,EAAuB,IAAI,GACvCC,IAAoBD,EAA6B,IAAI,GACrDE,IAAuBF,EAAoC,IAAI,GAC/DG,IAAcC;AAAA,IAClB,OAAO;AAAA,MACL,GAAGT;AAAA,MACH,UAAW,OAAO,qBAAqB,SAAQA,KAAA,gBAAAA,EAAU,aAAY;AAAA,IAAA;AAAA,IAEvE,CAACA,CAAQ;AAAA,EAAA;AAGX,SAAAU;AAAA,IACEd;AAAA,IACA,OAAO;AAAA,MACL,cAAc,CAACe,GAA4BC,MACzC;;AAAA,gBAAAC,IAAAP,EAAkB,YAAlB,gBAAAO,EAA2B,aAAaF,GAAUC;AAAA;AAAA,MACpD,kBAAkB,CAACE,GAAmBC,MACpC;;AAAA,gBAAAF,IAAAP,EAAkB,YAAlB,gBAAAO,EAA2B,iBAAiBC,GAAiCC;AAAA;AAAA,MAC/E,qBAAqB,CAACD,GAAmBC,MACvC;;AAAA,gBAAAF,IAAAP,EAAkB,YAAlB,gBAAAO,EAA2B,oBAAoBC,GAAiCC;AAAA;AAAA,MAClF,MAAM,MAAM;;AAAA,gBAAAF,IAAAP,EAAkB,YAAlB,gBAAAO,EAA2B;AAAA;AAAA,MACvC,MAAM,MAAM;;AAAA,gBAAAA,IAAAP,EAAkB,YAAlB,gBAAAO,EAA2B;AAAA;AAAA,IAAK;AAAA,IAE9C,CAAC;AAAA,EAAA,GAGHG,EAAU,QACc,YAAY;AAC5B,QAAA;AACI,YAAAC,IAAgB,MAAMC,EAAYrB,CAAG;AAE3C,MAAIO,EAAU,YACME,EAAA,UAAUa,EAAO,cAAc;AAAA,QAC/C,WAAWf,EAAU;AAAA,QACrB,eAAAa;AAAA,QACA,MAAM;AAAA,QACN,UAAU;AAAA,QACV,GAAGT;AAAA,MAAA,CACJ,GAEGL,MACFI,EAAqB,UAAU,IAAI;AAAA,QACjC,CAAC,CAACa,CAAK,MAAM;;AACP,UAAAA,KAASA,EAAM,kBACjBP,IAAAP,EAAkB,YAAlB,QAAAO,EAA2B,UAE3BQ,IAAAf,EAAkB,YAAlB,QAAAe,EAA2B;AAAA,QAE/B;AAAA,QACA,EAAE,WAAW,EAAE;AAAA,MAAA,GAGbjB,EAAU,WACSG,EAAA,QAAQ,QAAQH,EAAU,OAAO,IAI/CF,KAAA,QAAAA,KACPD,KACFK,EAAkB,QAAQ,iBAAiBL,EAAc,MAAMA,EAAc,QAAQ;AAAA,aAGlFqB,GAAO;AACR,YAAA,MAAM,mCAAmCA,CAAK,EAAE;AAAA,IACxD;AAAA,EAAA,MAKK,MAAM;;AACX,IAAIhB,EAAkB,YAChBL,KACFK,EAAkB,QAAQ,oBAAoBL,EAAc,MAAMA,EAAc,QAAQ,GAGtFE,OACFU,IAAAN,EAAqB,YAArB,QAAAM,EAA8B,eAEhCP,EAAkB,QAAQ;EAC5B,IAED,CAACT,GAAKI,GAAeC,GAAUC,GAAoBH,CAAQ,CAAC,qBAEvDuB,GAAS,EAAA,KAAKnB,GAAW,QAAQN,GAAO,SAASC,EAAQ,CAAA;AACnE,CAAC,GAEcyB,IAAAC,EAAKhC,CAAe;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "3.0.3",
+  "version": "3.0.4-hg1",
   "type": "module",
   "files": [
     "dist"
@@ -93,6 +93,5 @@
     "vite-plugin-dts": "3.6.4",
     "vite-plugin-svgr": "3.2.0",
     "vite-tsconfig-paths": "^4.2.2"
-  },
-  "packageManager": "yarn@4.4.1"
+  }
 }