@cuemath/leap 3.0.6 → 3.0.7-hg2

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

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

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, 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, newSettings]);\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,GAAoBK,CAAW,CAAC,qBAE1De,GAAS,EAAA,KAAKnB,GAAW,QAAQN,GAAO,SAASC,EAAQ,CAAA;AACnE,CAAC,GAEcyB,IAAAC,EAAKhC,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 ? 'canvas' : 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    let destroyed = false;\n  \n    const loadAnimation = async () => {\n      try {\n        const animationData = await fetchLottie(src);\n  \n        // Wait for layout\n        requestAnimationFrame(() => {\n          if (!container.current || destroyed) return;\n  \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            intersectionObserver.current.observe(container.current);\n          }\n  \n          onRender?.();\n  \n          if (eventListener) {\n            animationInstance.current.addEventListener(eventListener.name, eventListener.callback);\n          }\n        });\n      } catch (error) {\n        console.error('Error loading Lottie animation:', error);\n      }\n    };\n  \n    loadAnimation();\n  \n    return () => {\n      destroyed = true;\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  \n        animationInstance.current.destroy();\n      }\n    };\n  }, [src, eventListener, onRender, animateOnIntersect, newSettings]);\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","destroyed","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,YAAWA,KAAA,gBAAAA,EAAU,aAAY;AAAA,IAAA;AAAA,IAE1E,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,MAAM;AACd,QAAIC,IAAY;AA4CF,YA1CQ,YAAY;AAC5B,UAAA;AACI,cAAAC,IAAgB,MAAMC,EAAYtB,CAAG;AAG3C,8BAAsB,MAAM;AACtB,UAAA,CAACO,EAAU,WAAWa,MAERX,EAAA,UAAUc,EAAO,cAAc;AAAA,YAC/C,WAAWhB,EAAU;AAAA,YACrB,eAAAc;AAAA,YACA,MAAM;AAAA,YACN,UAAU;AAAA,YACV,GAAGV;AAAA,UAAA,CACJ,GAEGL,MACFI,EAAqB,UAAU,IAAI;AAAA,YACjC,CAAC,CAACc,CAAK,MAAM;;AACP,cAAAA,KAASA,EAAM,kBACjBR,IAAAP,EAAkB,YAAlB,QAAAO,EAA2B,UAE3BS,IAAAhB,EAAkB,YAAlB,QAAAgB,EAA2B;AAAA,YAE/B;AAAA,YACA,EAAE,WAAW,EAAE;AAAA,UAAA,GAGIf,EAAA,QAAQ,QAAQH,EAAU,OAAO,IAG7CF,KAAA,QAAAA,KAEPD,KACFK,EAAkB,QAAQ,iBAAiBL,EAAc,MAAMA,EAAc,QAAQ;AAAA,QACvF,CACD;AAAA,eACMsB,GAAO;AACN,gBAAA,MAAM,mCAAmCA,CAAK;AAAA,MACxD;AAAA,IAAA,MAKK,MAAM;;AACC,MAAAN,IAAA,IACRX,EAAkB,YAChBL,KACFK,EAAkB,QAAQ,oBAAoBL,EAAc,MAAMA,EAAc,QAAQ,GAGtFE,OACFU,IAAAN,EAAqB,YAArB,QAAAM,EAA8B,eAGhCP,EAAkB,QAAQ;IAC5B;AAAA,EACF,GACC,CAACT,GAAKI,GAAeC,GAAUC,GAAoBK,CAAW,CAAC,qBAE1DgB,GAAS,EAAA,KAAKpB,GAAW,QAAQN,GAAO,SAASC,EAAQ,CAAA;AACnE,CAAC,GAEc0B,IAAAC,EAAKjC,CAAe;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "3.0.6",
+  "version": "3.0.7-hg2",
   "type": "module",
   "files": [
     "dist"
@@ -94,5 +94,5 @@
     "vite-plugin-svgr": "3.2.0",
     "vite-tsconfig-paths": "^4.2.2"
   },
-  "packageManager": "yarn@4.4.1"
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }