@cuemath/leap 3.1.5-beta-0.1 → 3.1.6-j1

package/dist/features/circle-games/hooks/use-circle-sounds/use-circle-sounds.js

@@ -1,118 +1,118 @@
-import { useCallback as a, useRef as C, useEffect as T } from "react";
+import { useCallback as c, useRef as C, useEffect as T } from "react";
 import { CircleSoundKeyMapper as A, SWIPE_SOUND_ORDER as E } from "./constants.js";
-import { CircleSoundKey as e } from "./use-circle-sounds-enums.js";
-let I = 0;
-const r = {
-  [e.BACKGROUND]: null,
-  [e.BACKGROUND_RUSHHOUR]: null,
-  [e.TUTORIAL]: null,
-  [e.SWIPE_01]: null,
-  [e.SWIPE_02]: null,
-  [e.SWIPE_03]: null,
-  [e.SWIPE_04]: null,
-  [e.SWIPE_DOWN]: null,
-  [e.TOGGLE]: null,
-  [e.POINTS_AWARDED]: null,
-  [e.POINTS_ADDED]: null,
-  [e.GAME_CARD_CLICK]: null,
-  [e.CLOCK_IN]: null,
-  [e.CLOCK_OUT]: null,
-  [e.ACCURACY_IN]: null,
-  [e.ACCURACY_OUT]: null,
-  [e.STREAK_IN]: null,
-  [e.STREAK_OUT]: null,
-  [e.ACCURACY_INTRO]: null,
-  [e.ACCURACY_TARGET]: null,
-  [e.TIME_INTRO]: null,
-  [e.TIME_TARGET]: null,
-  [e.METER_FILL]: null
-}, f = {}, D = () => {
-  const c = a((n) => {
-    if (!r[n]) {
-      const l = new Audio(A[n]);
-      r[n] = l;
+import { CircleSoundKey as n } from "./use-circle-sounds-enums.js";
+let d = 0;
+const o = {
+  [n.BACKGROUND]: null,
+  [n.BACKGROUND_RUSHHOUR]: null,
+  [n.TUTORIAL]: null,
+  [n.SWIPE_01]: null,
+  [n.SWIPE_02]: null,
+  [n.SWIPE_03]: null,
+  [n.SWIPE_04]: null,
+  [n.SWIPE_DOWN]: null,
+  [n.TOGGLE]: null,
+  [n.POINTS_AWARDED]: null,
+  [n.POINTS_ADDED]: null,
+  [n.GAME_CARD_CLICK]: null,
+  [n.CLOCK_IN]: null,
+  [n.CLOCK_OUT]: null,
+  [n.ACCURACY_IN]: null,
+  [n.ACCURACY_OUT]: null,
+  [n.STREAK_IN]: null,
+  [n.STREAK_OUT]: null,
+  [n.ACCURACY_INTRO]: null,
+  [n.ACCURACY_TARGET]: null,
+  [n.TIME_INTRO]: null,
+  [n.TIME_TARGET]: null,
+  [n.METER_FILL]: null
+}, I = {}, D = () => {
+  const s = c((e) => {
+    if (!o[e]) {
+      const l = new Audio(A[e]);
+      o[e] = l;
     }
-  }, []), v = C(/* @__PURE__ */ new Set()), o = C({}), p = a(() => {
-    document.visibilityState === "hidden" ? Object.keys(r).forEach((n) => {
-      const l = r[n];
-      l && !l.paused && (l.pause(), v.current.add(n));
-    }) : document.visibilityState === "visible" && (v.current.forEach((n) => {
-      const l = r[n];
+  }, []), f = C(/* @__PURE__ */ new Set()), p = C({}), v = c(() => {
+    document.visibilityState === "hidden" ? Object.keys(o).forEach((e) => {
+      const l = o[e];
+      l && !l.paused && (l.pause(), f.current.add(e));
+    }) : document.visibilityState === "visible" && (f.current.forEach((e) => {
+      const l = o[e];
       l == null || l.play();
-    }), v.current.clear());
+    }), f.current.clear());
   }, []);
   T(() => {
-    document.addEventListener("visibilitychange", p);
-    const n = o.current;
+    document.addEventListener("visibilitychange", v);
+    const e = p.current;
     return () => {
-      document.removeEventListener("visibilitychange", p);
-      for (const l of Object.values(n))
+      document.removeEventListener("visibilitychange", v);
+      for (const l of Object.values(e))
         l != null && clearInterval(l);
     };
-  }, [p]);
-  const S = a(() => {
+  }, [v]);
+  const S = c(() => {
     var l;
     E.forEach((u) => {
-      c(u);
+      s(u);
     });
-    const n = E[I] || e.SWIPE_01;
-    I < E.length - 1 ? I++ : I = 0, (l = r[n]) == null || l.play();
-  }, [c]), m = a(() => {
+    const e = E[d] || n.SWIPE_01;
+    d < E.length - 1 ? d++ : d = 0, (l = o[e]) == null || l.play();
+  }, [s]), m = c(() => {
     var l;
-    return c(e.TOGGLE), (l = r[e.TOGGLE]) == null ? void 0 : l.play();
-  }, [c]), _ = a(
-    (n, l = !0, u = !1) => {
-      c(n);
-      const t = r[n];
+    return s(n.TOGGLE), (l = o[n.TOGGLE]) == null ? void 0 : l.play();
+  }, [s]), _ = c(
+    (e, l = !0, u = !1) => {
+      s(e);
+      const t = o[e];
       if (!t) return;
-      if (o.current[n] && clearInterval(o.current[n]), !t.paused && t.currentTime > 0 && !t.ended)
+      if (!t.paused && t.currentTime > 0 && !t.ended)
         return t;
       if (t.loop = u, l) {
         t.volume = 1;
-        const d = t.play();
-        f[n] = d;
+        const a = t.play();
+        I[e] = a;
         return;
       }
       t.volume = 0;
-      const s = t.play();
-      f[n] = s;
+      const r = t.play();
+      I[e] = r;
       const i = setInterval(() => {
         if (!t) {
           clearInterval(i);
           return;
         }
-        const d = t.volume || 0;
-        d < 1 ? t.volume = Math.min(d + 0.1, 1) : clearInterval(i);
+        const a = t.volume || 0;
+        a < 1 ? t.volume = Math.min(a + 0.1, 1) : clearInterval(i);
       }, 100);
-      return o.current[n] = i, t;
+      return p.current[e] = i, t;
     },
-    [c]
-  ), R = a((n, l = !0) => {
+    [s]
+  ), R = c((e, l = !0) => {
     var t;
-    const u = r[n];
-    f[n] !== void 0 && ((t = f[n]) == null || t.then(() => {
+    const u = o[e];
+    I[e] !== void 0 && ((t = I[e]) == null || t.then(() => {
       if (!u) return;
-      if (o.current[n] && clearInterval(o.current[n]), l) {
+      if (l) {
         u.pause();
         return;
       }
-      const s = setInterval(() => {
+      const r = setInterval(() => {
         if (!u) {
-          clearInterval(s);
+          clearInterval(r);
           return;
         }
         const i = u.volume || 0;
-        i - 0.1 <= 0 ? (u.volume = 0, u.pause(), clearInterval(s)) : u.volume = i - 0.1;
+        i - 0.1 <= 0 ? (u.volume = 0, u.pause(), clearInterval(r)) : u.volume = i - 0.1;
       }, 100);
-      o.current[n] = s;
-    }).catch((s) => {
-      console.log("sound not playing", s);
+      p.current[e] = r;
+    }).catch((r) => {
+      console.log("sound not playing", r);
     }));
   }, []);
   return { playSwipSound: S, play: _, stop: R, playButtonSound: m };
 };
 export {
-  r as soundMapper,
+  o as soundMapper,
   D as useCircleSounds
 };
 //# sourceMappingURL=use-circle-sounds.js.map

package/dist/features/circle-games/hooks/use-circle-sounds/use-circle-sounds.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-circle-sounds.js","sources":["../../../../../src/features/circle-games/hooks/use-circle-sounds/use-circle-sounds.ts"],"sourcesContent":["import type { TimeoutMap } from './use-circle-sound-types';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { CircleSoundKeyMapper, SWIPE_SOUND_ORDER } from './constants';\nimport { CircleSoundKey } from './use-circle-sounds-enums';\n\nlet swipeSoundIndex = 0;\n\nexport const soundMapper: Record<keyof typeof CircleSoundKeyMapper, null | HTMLAudioElement> = {\n  [CircleSoundKey.BACKGROUND]: null,\n  [CircleSoundKey.BACKGROUND_RUSHHOUR]: null,\n  [CircleSoundKey.TUTORIAL]: null,\n  [CircleSoundKey.SWIPE_01]: null,\n  [CircleSoundKey.SWIPE_02]: null,\n  [CircleSoundKey.SWIPE_03]: null,\n  [CircleSoundKey.SWIPE_04]: null,\n  [CircleSoundKey.SWIPE_DOWN]: null,\n  [CircleSoundKey.TOGGLE]: null,\n  [CircleSoundKey.POINTS_AWARDED]: null,\n  [CircleSoundKey.POINTS_ADDED]: null,\n  [CircleSoundKey.GAME_CARD_CLICK]: null,\n  [CircleSoundKey.CLOCK_IN]: null,\n  [CircleSoundKey.CLOCK_OUT]: null,\n  [CircleSoundKey.ACCURACY_IN]: null,\n  [CircleSoundKey.ACCURACY_OUT]: null,\n  [CircleSoundKey.STREAK_IN]: null,\n  [CircleSoundKey.STREAK_OUT]: null,\n  [CircleSoundKey.ACCURACY_INTRO]: null,\n  [CircleSoundKey.ACCURACY_TARGET]: null,\n  [CircleSoundKey.TIME_INTRO]: null,\n  [CircleSoundKey.TIME_TARGET]: null,\n  [CircleSoundKey.METER_FILL]: null,\n};\n\nconst soundInstancePromise: Partial<Record<keyof typeof CircleSoundKeyMapper, Promise<void>>> = {};\n\nexport const useCircleSounds = () => {\n  const loadSound = useCallback((key: CircleSoundKey) => {\n    if (!soundMapper[key]) {\n      const loadedSound = new Audio(CircleSoundKeyMapper[key]);\n\n      soundMapper[key] = loadedSound;\n    }\n  }, []);\n\n  const pausedSoundsRef = useRef<Set<CircleSoundKey>>(new Set());\n  const timeoutRefs = useRef<TimeoutMap>({});\n\n  const handleVisibilityChange = useCallback(() => {\n    if (document.visibilityState === 'hidden') {\n      (Object.keys(soundMapper) as CircleSoundKey[]).forEach(key => {\n        const sound = soundMapper[key];\n\n        if (sound && !sound.paused) {\n          sound.pause();\n          pausedSoundsRef.current.add(key);\n        }\n      });\n    } else if (document.visibilityState === 'visible') {\n      pausedSoundsRef.current.forEach(key => {\n        const sound = soundMapper[key];\n\n        sound?.play();\n      });\n      pausedSoundsRef.current.clear();\n    }\n  }, []);\n\n  useEffect(() => {\n    document.addEventListener('visibilitychange', handleVisibilityChange);\n    const timeouts = timeoutRefs.current;\n\n    return () => {\n      document.removeEventListener('visibilitychange', handleVisibilityChange);\n      for (const id of Object.values(timeouts)) {\n        if (id != null) clearInterval(id);\n      }\n    };\n  }, [handleVisibilityChange]);\n\n  const playSwipSound = useCallback(() => {\n    SWIPE_SOUND_ORDER.forEach(key => {\n      loadSound(key);\n    });\n\n    const key = SWIPE_SOUND_ORDER[swipeSoundIndex] || CircleSoundKey.SWIPE_01;\n\n    if (swipeSoundIndex < SWIPE_SOUND_ORDER.length - 1) {\n      swipeSoundIndex++;\n    } else {\n      swipeSoundIndex = 0;\n    }\n    soundMapper[key]?.play();\n  }, [loadSound]);\n\n  const playButtonSound = useCallback(() => {\n    loadSound(CircleSoundKey.TOGGLE);\n    const sound = soundMapper[CircleSoundKey.TOGGLE]?.play();\n\n    return sound;\n  }, [loadSound]);\n\n  const play = useCallback(\n    (key: CircleSoundKey, immediately: boolean = true, loop = false) => {\n      loadSound(key);\n      const soundInstance = soundMapper[key];\n\n      if (!soundInstance) return;\n\n      if (timeoutRefs.current[key]) {\n        clearInterval(timeoutRefs.current[key]);\n      }\n\n      if (!soundInstance.paused && soundInstance.currentTime > 0 && !soundInstance.ended) {\n        return soundInstance;\n      }\n\n      soundInstance.loop = loop;\n      if (immediately) {\n        soundInstance.volume = 1;\n        const promise = soundInstance.play();\n\n        soundInstancePromise[key] = promise;\n\n        return;\n      }\n\n      soundInstance.volume = 0;\n      const promise = soundInstance.play();\n\n      soundInstancePromise[key] = promise;\n\n      const intervalId = setInterval(() => {\n        if (!soundInstance) {\n          clearInterval(intervalId);\n\n          return;\n        }\n\n        const vol = soundInstance.volume || 0;\n\n        if (vol < 1) {\n          soundInstance.volume = Math.min(vol + 0.1, 1);\n        } else {\n          clearInterval(intervalId);\n        }\n      }, 100);\n\n      timeoutRefs.current[key] = intervalId;\n\n      return soundInstance;\n    },\n    [loadSound],\n  );\n\n  const stop = useCallback((key: CircleSoundKey, immediately: boolean = true) => {\n    const soundInstance = soundMapper[key];\n\n    if (soundInstancePromise[key] !== undefined) {\n      soundInstancePromise[key]\n        ?.then(() => {\n          if (!soundInstance) return;\n\n          if (timeoutRefs.current[key]) {\n            clearInterval(timeoutRefs.current[key]);\n          }\n\n          if (immediately) {\n            soundInstance.pause();\n\n            return;\n          }\n\n          const intervalId = setInterval(() => {\n            if (!soundInstance) {\n              clearInterval(intervalId);\n\n              return;\n            }\n\n            const vol = soundInstance.volume || 0;\n\n            if (vol - 0.1 <= 0) {\n              soundInstance.volume = 0;\n              soundInstance.pause();\n              clearInterval(intervalId);\n            } else {\n              soundInstance.volume = vol - 0.1;\n            }\n          }, 100);\n\n          timeoutRefs.current[key] = intervalId;\n        })\n        .catch(err => {\n          // eslint-disable-next-line no-console\n          console.log('sound not playing', err);\n        });\n    }\n  }, []);\n\n  return { playSwipSound, play, stop, playButtonSound };\n};\n"],"names":["swipeSoundIndex","soundMapper","CircleSoundKey","soundInstancePromise","useCircleSounds","loadSound","useCallback","key","loadedSound","CircleSoundKeyMapper","pausedSoundsRef","useRef","timeoutRefs","handleVisibilityChange","sound","useEffect","timeouts","id","playSwipSound","SWIPE_SOUND_ORDER","_a","playButtonSound","play","immediately","loop","soundInstance","promise","intervalId","vol","stop","err"],"mappings":";;;AAOA,IAAIA,IAAkB;AAEf,MAAMC,IAAkF;AAAA,EAC7F,CAACC,EAAe,UAAU,GAAG;AAAA,EAC7B,CAACA,EAAe,mBAAmB,GAAG;AAAA,EACtC,CAACA,EAAe,QAAQ,GAAG;AAAA,EAC3B,CAACA,EAAe,QAAQ,GAAG;AAAA,EAC3B,CAACA,EAAe,QAAQ,GAAG;AAAA,EAC3B,CAACA,EAAe,QAAQ,GAAG;AAAA,EAC3B,CAACA,EAAe,QAAQ,GAAG;AAAA,EAC3B,CAACA,EAAe,UAAU,GAAG;AAAA,EAC7B,CAACA,EAAe,MAAM,GAAG;AAAA,EACzB,CAACA,EAAe,cAAc,GAAG;AAAA,EACjC,CAACA,EAAe,YAAY,GAAG;AAAA,EAC/B,CAACA,EAAe,eAAe,GAAG;AAAA,EAClC,CAACA,EAAe,QAAQ,GAAG;AAAA,EAC3B,CAACA,EAAe,SAAS,GAAG;AAAA,EAC5B,CAACA,EAAe,WAAW,GAAG;AAAA,EAC9B,CAACA,EAAe,YAAY,GAAG;AAAA,EAC/B,CAACA,EAAe,SAAS,GAAG;AAAA,EAC5B,CAACA,EAAe,UAAU,GAAG;AAAA,EAC7B,CAACA,EAAe,cAAc,GAAG;AAAA,EACjC,CAACA,EAAe,eAAe,GAAG;AAAA,EAClC,CAACA,EAAe,UAAU,GAAG;AAAA,EAC7B,CAACA,EAAe,WAAW,GAAG;AAAA,EAC9B,CAACA,EAAe,UAAU,GAAG;AAC/B,GAEMC,IAA0F,CAAA,GAEnFC,IAAkB,MAAM;AAC7B,QAAAC,IAAYC,EAAY,CAACC,MAAwB;AACjD,QAAA,CAACN,EAAYM,CAAG,GAAG;AACrB,YAAMC,IAAc,IAAI,MAAMC,EAAqBF,CAAG,CAAC;AAEvD,MAAAN,EAAYM,CAAG,IAAIC;AAAA,IACrB;AAAA,EACF,GAAG,CAAE,CAAA,GAECE,IAAkBC,EAAgC,oBAAA,IAAK,CAAA,GACvDC,IAAcD,EAAmB,CAAA,CAAE,GAEnCE,IAAyBP,EAAY,MAAM;AAC3C,IAAA,SAAS,oBAAoB,WAC9B,OAAO,KAAKL,CAAW,EAAuB,QAAQ,CAAOM,MAAA;AACtD,YAAAO,IAAQb,EAAYM,CAAG;AAEzB,MAAAO,KAAS,CAACA,EAAM,WAClBA,EAAM,MAAM,GACIJ,EAAA,QAAQ,IAAIH,CAAG;AAAA,IACjC,CACD,IACQ,SAAS,oBAAoB,cACtBG,EAAA,QAAQ,QAAQ,CAAOH,MAAA;AAC/B,YAAAO,IAAQb,EAAYM,CAAG;AAE7B,MAAAO,KAAA,QAAAA,EAAO;AAAA,IAAK,CACb,GACDJ,EAAgB,QAAQ;EAE5B,GAAG,CAAE,CAAA;AAEL,EAAAK,EAAU,MAAM;AACL,aAAA,iBAAiB,oBAAoBF,CAAsB;AACpE,UAAMG,IAAWJ,EAAY;AAE7B,WAAO,MAAM;AACF,eAAA,oBAAoB,oBAAoBC,CAAsB;AACvE,iBAAWI,KAAM,OAAO,OAAOD,CAAQ;AACjC,QAAAC,KAAM,QAAM,cAAcA,CAAE;AAAA,IAClC;AAAA,EACF,GACC,CAACJ,CAAsB,CAAC;AAErB,QAAAK,IAAgBZ,EAAY,MAAM;;AACpB,IAAAa,EAAA,QAAQ,CAAAZ,MAAO;AAC/B,MAAAF,EAAUE,CAAG;AAAA,IAAA,CACd;AAED,UAAMA,IAAMY,EAAkBnB,CAAe,KAAKE,EAAe;AAE7D,IAAAF,IAAkBmB,EAAkB,SAAS,IAC/CnB,MAEkBA,IAAA,IAERoB,IAAAnB,EAAAM,CAAG,MAAH,QAAAa,EAAM;AAAA,EAAK,GACtB,CAACf,CAAS,CAAC,GAERgB,IAAkBf,EAAY,MAAM;;AACxC,WAAAD,EAAUH,EAAe,MAAM,IACjBkB,IAAAnB,EAAYC,EAAe,MAAM,MAAjC,gBAAAkB,EAAoC;AAAA,EAE3C,GACN,CAACf,CAAS,CAAC,GAERiB,IAAOhB;AAAA,IACX,CAACC,GAAqBgB,IAAuB,IAAMC,IAAO,OAAU;AAClE,MAAAnB,EAAUE,CAAG;AACP,YAAAkB,IAAgBxB,EAAYM,CAAG;AAErC,UAAI,CAACkB,EAAe;AAMhB,UAJAb,EAAY,QAAQL,CAAG,KACX,cAAAK,EAAY,QAAQL,CAAG,CAAC,GAGpC,CAACkB,EAAc,UAAUA,EAAc,cAAc,KAAK,CAACA,EAAc;AACpE,eAAAA;AAIT,UADAA,EAAc,OAAOD,GACjBD,GAAa;AACf,QAAAE,EAAc,SAAS;AACjBC,cAAAA,IAAUD,EAAc;AAE9B,QAAAtB,EAAqBI,CAAG,IAAImB;AAE5B;AAAA,MACF;AAEA,MAAAD,EAAc,SAAS;AACjB,YAAAC,IAAUD,EAAc;AAE9B,MAAAtB,EAAqBI,CAAG,IAAImB;AAEtB,YAAAC,IAAa,YAAY,MAAM;AACnC,YAAI,CAACF,GAAe;AAClB,wBAAcE,CAAU;AAExB;AAAA,QACF;AAEM,cAAAC,IAAMH,EAAc,UAAU;AAEpC,QAAIG,IAAM,IACRH,EAAc,SAAS,KAAK,IAAIG,IAAM,KAAK,CAAC,IAE5C,cAAcD,CAAU;AAAA,SAEzB,GAAG;AAEM,aAAAf,EAAA,QAAQL,CAAG,IAAIoB,GAEpBF;AAAA,IACT;AAAA,IACA,CAACpB,CAAS;AAAA,EAAA,GAGNwB,IAAOvB,EAAY,CAACC,GAAqBgB,IAAuB,OAAS;;AACvE,UAAAE,IAAgBxB,EAAYM,CAAG;AAEjC,IAAAJ,EAAqBI,CAAG,MAAM,YACXa,IAAAjB,EAAAI,CAAG,MAAH,QAAAa,EACjB,KAAK,MAAM;AACX,UAAI,CAACK,EAAe;AAMpB,UAJIb,EAAY,QAAQL,CAAG,KACX,cAAAK,EAAY,QAAQL,CAAG,CAAC,GAGpCgB,GAAa;AACf,QAAAE,EAAc,MAAM;AAEpB;AAAA,MACF;AAEM,YAAAE,IAAa,YAAY,MAAM;AACnC,YAAI,CAACF,GAAe;AAClB,wBAAcE,CAAU;AAExB;AAAA,QACF;AAEM,cAAAC,IAAMH,EAAc,UAAU;AAEhC,QAAAG,IAAM,OAAO,KACfH,EAAc,SAAS,GACvBA,EAAc,MAAM,GACpB,cAAcE,CAAU,KAExBF,EAAc,SAASG,IAAM;AAAA,SAE9B,GAAG;AAEM,MAAAhB,EAAA,QAAQL,CAAG,IAAIoB;AAAA,IAAA,GAE5B,MAAM,CAAOG,MAAA;AAEJ,cAAA,IAAI,qBAAqBA,CAAG;AAAA,IAAA;AAAA,EAG5C,GAAG,CAAE,CAAA;AAEL,SAAO,EAAE,eAAAZ,GAAe,MAAAI,GAAM,MAAAO,GAAM,iBAAAR,EAAgB;AACtD;"}
+{"version":3,"file":"use-circle-sounds.js","sources":["../../../../../src/features/circle-games/hooks/use-circle-sounds/use-circle-sounds.ts"],"sourcesContent":["import type { TimeoutMap } from './use-circle-sound-types';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { CircleSoundKeyMapper, SWIPE_SOUND_ORDER } from './constants';\nimport { CircleSoundKey } from './use-circle-sounds-enums';\n\nlet swipeSoundIndex = 0;\n\nexport const soundMapper: Record<keyof typeof CircleSoundKeyMapper, null | HTMLAudioElement> = {\n  [CircleSoundKey.BACKGROUND]: null,\n  [CircleSoundKey.BACKGROUND_RUSHHOUR]: null,\n  [CircleSoundKey.TUTORIAL]: null,\n  [CircleSoundKey.SWIPE_01]: null,\n  [CircleSoundKey.SWIPE_02]: null,\n  [CircleSoundKey.SWIPE_03]: null,\n  [CircleSoundKey.SWIPE_04]: null,\n  [CircleSoundKey.SWIPE_DOWN]: null,\n  [CircleSoundKey.TOGGLE]: null,\n  [CircleSoundKey.POINTS_AWARDED]: null,\n  [CircleSoundKey.POINTS_ADDED]: null,\n  [CircleSoundKey.GAME_CARD_CLICK]: null,\n  [CircleSoundKey.CLOCK_IN]: null,\n  [CircleSoundKey.CLOCK_OUT]: null,\n  [CircleSoundKey.ACCURACY_IN]: null,\n  [CircleSoundKey.ACCURACY_OUT]: null,\n  [CircleSoundKey.STREAK_IN]: null,\n  [CircleSoundKey.STREAK_OUT]: null,\n  [CircleSoundKey.ACCURACY_INTRO]: null,\n  [CircleSoundKey.ACCURACY_TARGET]: null,\n  [CircleSoundKey.TIME_INTRO]: null,\n  [CircleSoundKey.TIME_TARGET]: null,\n  [CircleSoundKey.METER_FILL]: null,\n};\n\nconst soundInstancePromise: Partial<Record<keyof typeof CircleSoundKeyMapper, Promise<void>>> = {};\n\nexport const useCircleSounds = () => {\n  const loadSound = useCallback((key: CircleSoundKey) => {\n    if (!soundMapper[key]) {\n      const loadedSound = new Audio(CircleSoundKeyMapper[key]);\n\n      soundMapper[key] = loadedSound;\n    }\n  }, []);\n\n  const pausedSoundsRef = useRef<Set<CircleSoundKey>>(new Set());\n  const timeoutRefs = useRef<TimeoutMap>({});\n\n  const handleVisibilityChange = useCallback(() => {\n    if (document.visibilityState === 'hidden') {\n      (Object.keys(soundMapper) as CircleSoundKey[]).forEach(key => {\n        const sound = soundMapper[key];\n\n        if (sound && !sound.paused) {\n          sound.pause();\n          pausedSoundsRef.current.add(key);\n        }\n      });\n    } else if (document.visibilityState === 'visible') {\n      pausedSoundsRef.current.forEach(key => {\n        const sound = soundMapper[key];\n\n        sound?.play();\n      });\n      pausedSoundsRef.current.clear();\n    }\n  }, []);\n\n  useEffect(() => {\n    document.addEventListener('visibilitychange', handleVisibilityChange);\n    const timeouts = timeoutRefs.current;\n\n    return () => {\n      document.removeEventListener('visibilitychange', handleVisibilityChange);\n      for (const id of Object.values(timeouts)) {\n        if (id != null) clearInterval(id);\n      }\n    };\n  }, [handleVisibilityChange]);\n\n  const playSwipSound = useCallback(() => {\n    SWIPE_SOUND_ORDER.forEach(key => {\n      loadSound(key);\n    });\n\n    const key = SWIPE_SOUND_ORDER[swipeSoundIndex] || CircleSoundKey.SWIPE_01;\n\n    if (swipeSoundIndex < SWIPE_SOUND_ORDER.length - 1) {\n      swipeSoundIndex++;\n    } else {\n      swipeSoundIndex = 0;\n    }\n    soundMapper[key]?.play();\n  }, [loadSound]);\n\n  const playButtonSound = useCallback(() => {\n    loadSound(CircleSoundKey.TOGGLE);\n    const sound = soundMapper[CircleSoundKey.TOGGLE]?.play();\n\n    return sound;\n  }, [loadSound]);\n\n  const play = useCallback(\n    (key: CircleSoundKey, immediately: boolean = true, loop = false) => {\n      loadSound(key);\n      const soundInstance = soundMapper[key];\n\n      if (!soundInstance) return;\n\n      if (!soundInstance.paused && soundInstance.currentTime > 0 && !soundInstance.ended) {\n        return soundInstance;\n      }\n\n      soundInstance.loop = loop;\n      if (immediately) {\n        soundInstance.volume = 1;\n        const promise = soundInstance.play();\n\n        soundInstancePromise[key] = promise;\n\n        return;\n      }\n\n      soundInstance.volume = 0;\n      const promise = soundInstance.play();\n\n      soundInstancePromise[key] = promise;\n\n      const intervalId = setInterval(() => {\n        if (!soundInstance) {\n          clearInterval(intervalId);\n\n          return;\n        }\n\n        const vol = soundInstance.volume || 0;\n\n        if (vol < 1) {\n          soundInstance.volume = Math.min(vol + 0.1, 1);\n        } else {\n          clearInterval(intervalId);\n        }\n      }, 100);\n\n      timeoutRefs.current[key] = intervalId;\n\n      return soundInstance;\n    },\n    [loadSound],\n  );\n\n  const stop = useCallback((key: CircleSoundKey, immediately: boolean = true) => {\n    const soundInstance = soundMapper[key];\n\n    if (soundInstancePromise[key] !== undefined) {\n      soundInstancePromise[key]\n        ?.then(() => {\n          if (!soundInstance) return;\n\n          if (immediately) {\n            soundInstance.pause();\n\n            return;\n          }\n\n          const intervalId = setInterval(() => {\n            if (!soundInstance) {\n              clearInterval(intervalId);\n\n              return;\n            }\n\n            const vol = soundInstance.volume || 0;\n\n            if (vol - 0.1 <= 0) {\n              soundInstance.volume = 0;\n              soundInstance.pause();\n              clearInterval(intervalId);\n            } else {\n              soundInstance.volume = vol - 0.1;\n            }\n          }, 100);\n\n          timeoutRefs.current[key] = intervalId;\n        })\n        .catch(err => {\n          // eslint-disable-next-line no-console\n          console.log('sound not playing', err);\n        });\n    }\n  }, []);\n\n  return { playSwipSound, play, stop, playButtonSound };\n};\n"],"names":["swipeSoundIndex","soundMapper","CircleSoundKey","soundInstancePromise","useCircleSounds","loadSound","useCallback","key","loadedSound","CircleSoundKeyMapper","pausedSoundsRef","useRef","timeoutRefs","handleVisibilityChange","sound","useEffect","timeouts","id","playSwipSound","SWIPE_SOUND_ORDER","_a","playButtonSound","play","immediately","loop","soundInstance","promise","intervalId","vol","stop","err"],"mappings":"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"}

package/dist/features/cue-canvas/cue-canvas-context.js

@@ -1,20 +1,17 @@
-import { createContext as o } from "react";
-import { CANVAS_COLORS as e } from "./constants/constants.js";
-const v = o({
+import { createContext as t } from "react";
+import { CANVAS_COLORS as o } from "./constants/constants.js";
+const c = t({
   activeInstance: void 0,
   setActiveInstance: () => {
   },
   activeTool: "pen",
   setActiveTool: () => {
   },
-  activeColor: Object.keys(e)[0],
+  activeColor: Object.keys(o)[0],
   setActiveColor: () => {
-  },
-  homeworkId: void 0,
-  setHomeworkId: () => {
   }
 });
 export {
-  v as default
+  c as default
 };
 //# sourceMappingURL=cue-canvas-context.js.map

package/dist/features/cue-canvas/cue-canvas-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"cue-canvas-context.js","sources":["../../../src/features/cue-canvas/cue-canvas-context.tsx"],"sourcesContent":["import type { TPolyContextValue } from './types/context';\nimport type { TCueCanvasColors } from './types/cue-canvas';\n\nimport { createContext } from 'react';\n\nimport { CANVAS_COLORS } from './constants/constants';\n\nconst PolyContext = createContext<TPolyContextValue>({\n  activeInstance: undefined,\n  setActiveInstance: () => undefined,\n  activeTool: 'pen',\n  setActiveTool: () => undefined,\n  activeColor: Object.keys(CANVAS_COLORS)[0] as TCueCanvasColors,\n  setActiveColor: () => undefined,\n  homeworkId: undefined,\n  setHomeworkId: () => undefined,\n});\n\nexport default PolyContext;\n"],"names":["PolyContext","createContext","CANVAS_COLORS"],"mappings":";;AAOA,MAAMA,IAAcC,EAAiC;AAAA,EACnD,gBAAgB;AAAA,EAChB,mBAAmB,MAAM;AAAA;AAAA,EACzB,YAAY;AAAA,EACZ,eAAe,MAAM;AAAA;AAAA,EACrB,aAAa,OAAO,KAAKC,CAAa,EAAE,CAAC;AAAA,EACzC,gBAAgB,MAAM;AAAA;AAAA,EACtB,YAAY;AAAA,EACZ,eAAe,MAAM;AAAA;AACvB,CAAC;"}
+{"version":3,"file":"cue-canvas-context.js","sources":["../../../src/features/cue-canvas/cue-canvas-context.tsx"],"sourcesContent":["import type { TPolyContextValue } from './types/context';\nimport type { TCueCanvasColors } from './types/cue-canvas';\n\nimport { createContext } from 'react';\n\nimport { CANVAS_COLORS } from './constants/constants';\n\nconst PolyContext = createContext<TPolyContextValue>({\n  activeInstance: undefined,\n  setActiveInstance: () => undefined,\n  activeTool: 'pen',\n  setActiveTool: () => undefined,\n  activeColor: Object.keys(CANVAS_COLORS)[0] as TCueCanvasColors,\n  setActiveColor: () => undefined,\n});\n\nexport default PolyContext;\n"],"names":["PolyContext","createContext","CANVAS_COLORS"],"mappings":";;AAOA,MAAMA,IAAcC,EAAiC;AAAA,EACnD,gBAAgB;AAAA,EAChB,mBAAmB,MAAM;AAAA;AAAA,EACzB,YAAY;AAAA,EACZ,eAAe,MAAM;AAAA;AAAA,EACrB,aAAa,OAAO,KAAKC,CAAa,EAAE,CAAC;AAAA,EACzC,gBAAgB,MAAM;AAAA;AACxB,CAAC;"}

package/dist/features/cue-canvas/cue-canvas-core.js

@@ -1,22 +1,20 @@
-var u = Object.defineProperty;
-var g = (c, t, e) => t in c ? u(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
-var s = (c, t, e) => g(c, typeof t != "symbol" ? t + "" : t, e);
-import { captureMessage as v } from "@sentry/browser";
-import f from "../../node_modules/lodash.debounce/index.js";
-import { removeTileButton as y, removeMask as C, checkTextOrEquationTool as m, getReverseMap as T, getToolAndSubtool as w } from "./cue-canvas-helpers.js";
-class E {
+var d = Object.defineProperty;
+var u = (r, t, e) => t in r ? d(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var s = (r, t, e) => u(r, typeof t != "symbol" ? t + "" : t, e);
+import v from "../../node_modules/lodash.debounce/index.js";
+import { removeTileButton as f, removeMask as g, checkTextOrEquationTool as y, getReverseMap as C, getToolAndSubtool as m } from "./cue-canvas-helpers.js";
+class b {
   constructor({
     onPublish: t,
     onSubscribe: e,
     onUpdateActiveTool: a,
-    onUpdateHeight: i,
+    onUpdateHeight: n,
     uploadImageToS3: o,
-    height: n,
-    userId: h,
-    canvasId: r,
-    userType: l,
-    renderAs: p,
-    updateCanvasConfig: d
+    height: i,
+    userId: l,
+    canvasId: h,
+    userType: c,
+    renderAs: p
   }) {
     s(this, "polycanvas");
     s(this, "publish");
@@ -30,22 +28,22 @@ class E {
     s(this, "fileInput", null);
     s(this, "debouncedViewportChange");
     s(this, "uploadImageToS3");
-    s(this, "updateCanvasConfigChange");
-    s(this, "gridName");
-    s(this, "publishToChannel", (t) => {
+    s(this, "publishToChannel", (t, e, a) => {
       this.publish && this.publish({
         eventName: "cue_canvas_changed",
         eventPayload: {
           data: t,
           height: this.height,
           userId: this.userId,
-          responseId: this.canvasId
+          responseId: this.canvasId,
+          gridName: e,
+          dimension: a
         }
       });
     });
     s(this, "onChange", (t) => {
       const a = Object.fromEntries(t.entries());
-      m(a) && this.onUpdateActiveTool("move"), this.publishToChannel(a);
+      y(a) && this.onUpdateActiveTool("move"), this.publishToChannel(a);
     });
     s(this, "undo", () => {
       if (!this.polycanvas)
@@ -53,7 +51,7 @@ class E {
       const t = this.polycanvas.undo();
       if (!t)
         return;
-      const e = T(t);
+      const e = C(t);
       this.onChange(e);
     });
     s(this, "redo", () => {
@@ -75,7 +73,6 @@ class E {
       const t = this.polycanvas.getViewport();
       this.polycanvas.setViewport(t.x, t.y, t.zoom * 0.9);
     });
-    s(this, "getCanvasAsImage", async () => this.polycanvas ? await this.polycanvas.image(3e3, 3e3, "png") : void 0);
     s(this, "downloadCanvasAsImage", async () => {
       if (!this.polycanvas) return;
       const t = await this.polycanvas.image(3e3, 3e3, "png");
@@ -83,103 +80,96 @@ class E {
       const e = document.createElement("a");
       e.href = t, e.download = `canvas-drawing-${Date.now()}.png`, e.click();
     });
+    s(this, "uploadFileToCanvas", async (t) => new Promise((e, a) => {
+      this.uploadImageToS3 ? e(this.uploadImageToS3(t)) : a(new Error("Upload function not provided"));
+    }));
     s(this, "onViewPortChange", (t) => {
-      this.updateCanvasConfigChange && this.updateCanvasConfigChange({ dimesion: t });
+      if (!this.publish) return;
+      const e = t;
+      this.publishToChannel({}, void 0, e);
     });
     s(this, "openFileUpload", () => {
-      this.fileInput || (this.fileInput = document.createElement("input"), this.fileInput.type = "file", this.fileInput.accept = "image/*", this.fileInput.style.display = "none", this.fileInput.onchange = this.onSelectImage, document.body.appendChild(this.fileInput)), this.fileInput.click();
+      this.fileInput || (this.fileInput = document.createElement("input"), this.fileInput.type = "file", this.fileInput.accept = "image/*", this.fileInput.style.display = "none", this.fileInput.onchange = this.addImageToCanvas, document.body.appendChild(this.fileInput)), this.fileInput.click();
     });
-    s(this, "addImageToCanvas", (t) => {
-      if (!this.polycanvas) return;
-      const e = this.polycanvas.getViewport(), a = {
+    s(this, "addImageToCanvas", async (t) => {
+      var h;
+      const e = t.target, a = (h = e.files) == null ? void 0 : h[0];
+      if (!a || !this.polycanvas || !this.uploadImageToS3) return;
+      const n = await this.uploadImageToS3(a), o = this.polycanvas.getViewport(), i = {
         name: "image",
-        href: t,
-        x: e.x + 24,
-        y: e.y + 24,
-        width: 500
-      }, i = this.polycanvas.add({
-        ...a
+        href: n,
+        x: o.x + 88,
+        y: o.y + 88
+      }, l = this.polycanvas.add({
+        ...i
       });
       this.publishToChannel({
-        [i]: [void 0, { ...a, status: "locked" }]
-      });
+        [l]: [void 0, { ...i, status: "locked" }]
+      }), e.value = "";
     });
-    s(this, "onSelectImage", async (t) => {
-      var o;
-      const e = t.target, a = (o = e.files) == null ? void 0 : o[0];
-      if (!a || !this.polycanvas || !this.uploadImageToS3) return;
-      const i = await this.uploadImageToS3(a);
-      i !== "error" && (this.addImageToCanvas(i), e.value = "");
+    s(this, "updateCanvasConfig", (t, e, a) => {
+      this.polycanvas && (t > this.height && this.updateHeight(t), e && this.polycanvas.setViewport(e.x, e.y, e.zoom), a && this.polycanvas.setOptions({
+        grid: a
+      }));
     });
     s(this, "updateCanvas", ({ data: t, userId: e }) => {
       const a = this.userType === "TEACHER" || e === this.userId;
-      try {
-        Object.entries(t).forEach(([i, o]) => {
-          var n, h, r;
-          !o[0] && o[1] ? ("name" in o[1] && o[1].name === "image" && (o[1].status = this.userType === "STUDENT" ? "locked" : void 0), (n = this.polycanvas) == null || n.add({ ...o[1], cannotEdit: !a }, i)) : o[0] && !o[1] ? (h = this.polycanvas) == null || h.delete(i) : o[0] && o[1] && ((r = this.polycanvas) == null || r.update(i, { ...o[1] }));
-        });
-      } catch {
-        v("Error Updating Canvas", t);
-      }
+      Object.entries(t).forEach(([n, o]) => {
+        var i, l, h;
+        !o[0] && o[1] ? (i = this.polycanvas) == null || i.add({ ...o[1], cannotEdit: !a }, n) : o[0] && !o[1] ? (l = this.polycanvas) == null || l.delete(n) : o[0] && o[1] && ((h = this.polycanvas) == null || h.update(n, { ...o[1] }));
+      });
     });
     s(this, "toggleTiles", (t) => {
       var e;
       (e = this.polycanvas) == null || e.toggleSidebar(t);
     });
-    s(this, "setViewPort", ({ x: t, y: e, zoom: a }) => {
-      var i;
-      if (this.polycanvas) {
-        const o = (i = this.polycanvas) == null ? void 0 : i.getViewport();
-        if (o.x === t && o.y === e && o.zoom === a)
-          return;
-        this.polycanvas.setViewport(t, e, a);
-      }
-    });
     s(this, "resetViewPort", () => {
       this.polycanvas && this.polycanvas.resetViewport();
     });
     s(this, "changeGrid", (t) => {
-      !this.polycanvas || this.gridName === t || (this.polycanvas.setOptions({
+      this.polycanvas && (this.polycanvas.setOptions({
         grid: t
-      }), this.gridName = t, this.updateCanvasConfigChange && this.updateCanvasConfigChange({ gridName: t }));
+      }), this.publishToChannel({}, t));
     });
     s(this, "lockSelectedTiles", () => {
-      var a, i;
-      const { tiles: t } = ((a = this.polycanvas) == null ? void 0 : a.serialize()) || {}, e = ((i = this.polycanvas) == null ? void 0 : i.getSelection()) || [];
+      var a, n;
+      const { tiles: t } = ((a = this.polycanvas) == null ? void 0 : a.serialize()) || {}, e = ((n = this.polycanvas) == null ? void 0 : n.getSelection()) || [];
       if (e.length > 0 && t) {
         const o = {};
-        e.forEach((n) => {
-          var r, l, p;
-          if (!((r = t[n]) != null && r.name)) return;
-          const h = { ...t[n], status: "locked" };
-          (l = this.polycanvas) == null || l.update(n, h), (p = t[n]) != null && p.name && (o[n] = [t[n], h]);
+        e.forEach((i) => {
+          var h, c, p;
+          if (!((h = t[i]) != null && h.name)) return;
+          const l = { ...t[i], status: "locked" };
+          (c = this.polycanvas) == null || c.update(i, l), (p = t[i]) != null && p.name && (o[i] = [t[i], l]);
         }), this.publishToChannel(o);
       }
     });
     s(this, "unlockAllTiles", () => {
       if (!this.polycanvas) return;
       const { tiles: t } = this.polycanvas.serialize(), e = {};
-      t && Object.entries(t).length > 0 && (Object.entries(t).forEach(([a, i]) => {
-        var n;
-        if (i.status !== "locked") return;
-        const o = { ...i, status: void 0 };
-        (n = this.polycanvas) == null || n.update(a, o), e[a] = [i, o];
+      t && Object.entries(t).length > 0 && (Object.entries(t).forEach(([a, n]) => {
+        var i;
+        if (n.status !== "locked") return;
+        const o = { ...n, status: void 0 };
+        (i = this.polycanvas) == null || i.update(a, o), e[a] = [n, o];
       }), this.publishToChannel(e));
     });
     s(this, "replaceCanvas", (t) => {
       if (!this.polycanvas) return;
       const { data: e, gridName: a } = t;
-      this.polycanvas.clear(), a && this.changeGrid(a), Object.entries(e).forEach(([i, o]) => {
-        var n;
+      this.polycanvas.clear(), a && this.polycanvas.setOptions({
+        grid: a
+      }), Object.entries(e).forEach(([n, o]) => {
+        var i;
         if (!o[0] && o[1]) {
-          (n = this.polycanvas) == null || n.add({ ...o[1] }, i);
+          (i = this.polycanvas) == null || i.add({ ...o[1] }, n);
           return;
         }
-      }), this.publishToChannel(e);
+      }), this.publishToChannel(e, a);
     });
     s(this, "setTool", (t) => {
       if (this.polycanvas) {
-        const [e, a] = w(t);
+        const [e, a] = m(t);
         switch (e) {
           case "clearAll":
             this.clearCanvas();
@@ -232,10 +222,10 @@ class E {
      */
     s(this, "update", (t) => {
       if (Array.isArray(t)) {
-        const e = t.map((i) => i.height).filter(Boolean), a = Math.max(...e);
-        a > this.height && this.updateHeight(a), t.forEach((i) => this.updateCanvas(i));
+        const e = t.map((i) => i.height).filter(Boolean), a = Math.max(...e), n = t.map((i) => i.dimension).filter(Boolean)[t.length - 1], o = t.map((i) => i.gridName).filter(Boolean)[t.length - 1];
+        this.updateCanvasConfig(a, n, o), t.forEach((i) => this.updateCanvas(i));
       } else
-        t.height > this.height && this.updateHeight(t.height), this.updateCanvas(t);
+        this.updateCanvasConfig(t.height, t.dimension, t == null ? void 0 : t.gridName), this.updateCanvas(t);
     });
     s(this, "setColor", (t) => {
       this.polycanvas && this.polycanvas.setColor(t);
@@ -247,9 +237,9 @@ class E {
     s(this, "destroy", () => {
       this.polycanvas && (this.polycanvas.off("change", this.onChange), this.polycanvas.destroy(), this.debouncedViewportChange.cancel(), this.renderAs === "whiteboard" && this.userType === "TEACHER" && this.polycanvas.off("viewport", this.debouncedViewportChange), this.polycanvas = void 0, this.fileInput && this.fileInput.parentNode && (this.fileInput.parentNode.removeChild(this.fileInput), this.fileInput = null));
     });
-    this.onUpdateHeight = i, this.onUpdateActiveTool = a, this.height = n, this.uploadImageToS3 = o, this.userId = h, this.canvasId = r, this.publish = t, this.userType = l, this.renderAs = p, this.debouncedViewportChange = f(this.onViewPortChange, 300), this.updateCanvasConfigChange = d, e == null || e(this.canvasId, this.update);
+    this.onUpdateHeight = n, this.onUpdateActiveTool = a, this.height = i, this.uploadImageToS3 = o, this.userId = l, this.canvasId = h, this.publish = t, this.userType = c, this.renderAs = p, this.debouncedViewportChange = v(this.onViewPortChange, 300), e == null || e(this.canvasId, this.update);
   }
-  async create({ canvasElementRef: t, canvasConfig: e, canvasSetting: a, initialData: i }) {
+  async create({ canvasElementRef: t, canvasConfig: e, canvasSetting: a, initialData: n }) {
     if (!t.current)
       throw new Error("PolyCanvas: Div Element Not found for canvas");
     this.polycanvas = await window.Polypad.create(t.current, {
@@ -257,11 +247,11 @@ class E {
         options: e
       },
       ...a,
-      imageUpload: this.renderAs === "whiteboard" && this.userType === "TEACHER" && this.uploadImageToS3 ? this.uploadImageToS3 : void 0
-    }), this.renderAs === "whiteboard" && this.userType === "TEACHER" && (this.polycanvas.toggleSidebar(!1), this.polycanvas.bindKeyboardEvents({}), y(t), this.polycanvas.on("viewport", this.debouncedViewportChange)), C(t), this.polycanvas.on("change", this.onChange), i && this.update(i);
+      imageUpload: this.renderAs === "whiteboard" && this.userType === "TEACHER" ? this.uploadFileToCanvas : void 0
+    }), this.renderAs === "whiteboard" && this.userType === "TEACHER" && (this.polycanvas.toggleSidebar(!1), f(t), this.polycanvas.on("viewport", this.debouncedViewportChange)), g(t), this.polycanvas.on("change", this.onChange), n && this.update(n);
   }
 }
 export {
-  E as CueCanvasCore
+  b as CueCanvasCore
 };
 //# sourceMappingURL=cue-canvas-core.js.map