@cuemath/leap 2.8.41 → 2.8.43-link.0

package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.js

@@ -0,0 +1,205 @@
+import { jsx as r, Fragment as L } from "react/jsx-runtime";
+import { useRef as I, useCallback as p } from "react";
+import F from "../../../../../assets/line-icons/icons/carat-right.js";
+import { PLATFORM_EVENTS_STUDENT as B } from "../../../../analytics-events/platform-events-student.js";
+import { JOURNEY_ID_STUDENT as V } from "../../../../journey/journey-id/journey-id-student.js";
+import { IndicatorType as d } from "../../../../journey/use-journey/constants.js";
+import { useJourney as J } from "../../../../journey/use-journey/use-journey.js";
+import X from "../../../../ui/buttons/icon-button/icon-button.js";
+import { useUIContext as K } from "../../../../ui/context/context.js";
+import b from "../../../../ui/layout/flex-view.js";
+import m from "../../../../ui/text/text.js";
+import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as U } from "../../../enum/circle-onboarding-steps.js";
+import { useCircleSounds as j } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
+import { TablesCard as G } from "../../comps/tables-card/tables-card.js";
+import { GAME_LAUNCHER_ANALYTICS_EVENTS as Z } from "../../game-launcher-analytics-events.js";
+import { SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS as q, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS as z, START_ANIMATING_CLONED_ELEM as v, TABLE_CARD_INDEX as M, GO_TO_TABLE_LAUNCHER_DURATION_MS as Q, SHOW_CLICK_TABLE_NUDGE_AFTER_MS as ee, PUZZLE_CARD_INDEX as te, SHOW_INITIAL_COACHMARK_AFTER_MS as $, SHOW_INITIAL_TOOLTIP_AFTER_MS as re } from "./constants.js";
+import { Indicator as ne } from "./use-table-launcher-journey-styled.js";
+const Ce = ({
+  carouselRefs: s,
+  onTableSegmentClick: O,
+  onJourneyComplete: R
+}) => {
+  const e = V.CIRCLE_TABLES_INTRO_JOURNEY, t = I(null), f = I(null), N = I(!1), { playButtonSound: P } = j(), { nextCoachmark: n, setJourney: S, addCoachmark: a } = J(), { onEvent: _ } = K(), A = p(
+    (l) => {
+      var c, i;
+      l && O(l), _(B.ONBOARDING_STEP_COMPLETED, {
+        step: U.TABLES
+      }), (c = t == null ? void 0 : t.current) == null || c.setLabelVisiblity(!0), (i = t == null ? void 0 : t.current) == null || i.stopLabelAnimation(), R(e), n(e, !1);
+    },
+    [e, n, R, O, _]
+  ), H = p(
+    (l, c) => {
+      var g, T, E;
+      if (!((g = t.current) != null && g.segmentedCardWrapperRef.current) || !((T = t.current) != null && T.labelRef.current))
+        return;
+      const i = t.current.labelRef.current.getBoundingClientRect(), o = (E = t.current) == null ? void 0 : E.segmentedCardWrapperRef.current.getBoundingClientRect();
+      a(e, {
+        originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
+        isActive: !1,
+        type: d.TOOLTIP,
+        elementToHighlight: /* @__PURE__ */ r(
+          G,
+          {
+            ref: f,
+            defaultTable: c,
+            label: l.label,
+            data: l.data,
+            onPress: A,
+            onGoBackFromTableLevel: A
+          }
+        ),
+        indicator: {
+          position: "left",
+          backgroundColor: "YELLOW_4",
+          width: 236,
+          tooltipItem: /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(m, { $renderAs: "ab2-bold", children: "Each table has 3 levels—clear them and earn 3 stars!" }) }),
+          tooltipXCoOrdinates: 0,
+          tooltipYCoOrdinates: i.height * 0.35
+        }
+      }), a(e, {
+        originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
+        isActive: !1,
+        type: d.NUDGE,
+        indicator: {
+          nudge: "click",
+          content: /* @__PURE__ */ r(m, { $renderAs: "ab1", $color: "WHITE", children: "Pick a level" }),
+          nudgePointerX: o.width / 2 + 50,
+          nudgePointerY: o.height * 0.4
+        },
+        elementToHighlight: /* @__PURE__ */ r(L, {})
+      }), n(e, !1, q), n(e, !0, z);
+      const u = setTimeout(() => {
+        var h;
+        clearTimeout(u), (h = f.current) == null || h.startLabelAnimation("YELLOW_4");
+      }, v);
+    },
+    [a, A, e, n]
+  ), C = p(() => {
+    var i;
+    P(), (i = s.current) == null || i.goToIndex(M), n(e, !1, Q), _(B.ONBOARDING_STEP_VIEWED, {
+      step: U.TABLES
+    });
+    const l = setTimeout(() => {
+      var o;
+      clearTimeout(l), (o = t.current) == null || o.setLabelVisiblity(!1), n(e, !0);
+    }, ee), c = setTimeout(() => {
+      var o;
+      clearTimeout(c), (o = f.current) == null || o.startLabelAnimation("YELLOW_4");
+    }, v);
+  }, [s, e, n, P, _]), x = p(
+    (l, c = !1) => {
+      var E, h, y, W, D, Y, k;
+      if (N.current)
+        return;
+      const i = (E = s.current) == null ? void 0 : E.indicatorRefs, o = (h = s.current) == null ? void 0 : h.nextBtnRef, u = i == null ? void 0 : i[M];
+      if (!((y = t.current) != null && y.segmentedCardWrapperRef.current) || !((W = t.current) != null && W.labelRef.current) || !i || !(o != null && o.current) || !u || !u.current)
+        return;
+      N.current = !0;
+      const g = t.current.labelRef.current.getBoundingClientRect(), T = (D = t.current) == null ? void 0 : D.segmentedCardWrapperRef.current.getBoundingClientRect();
+      S(e, []), c ? (a(e, {
+        originalElementToHighlightRef: u,
+        isActive: !1,
+        type: d.TOOLTIP,
+        elementToHighlight: /* @__PURE__ */ r(ne, { $isActive: !1 }),
+        indicator: {
+          position: "bottom",
+          backgroundColor: "YELLOW_4",
+          width: 52,
+          tooltipItem: /* @__PURE__ */ r(
+            b,
+            {
+              $position: "absolute",
+              $flexDirection: "row",
+              style: { top: 6, left: 8, cursor: "pointer" },
+              onClick: C,
+              children: /* @__PURE__ */ r(m, { $renderAs: "ab2-bold", children: "NEW" })
+            }
+          ),
+          tooltipYCoOrdinates: 14
+          // Need some offset in Y direction from top
+        }
+      }), a(e, {
+        originalElementToHighlightRef: u,
+        isActive: !1,
+        type: d.NUDGE,
+        indicator: {
+          nudge: "click",
+          content: "",
+          nudgePointerY: 20
+        },
+        elementToHighlight: /* @__PURE__ */ r(L, {})
+      }), n(e, !1, $), n(e, !0, re)) : (a(e, {
+        originalElementToHighlightRef: (Y = s.current) == null ? void 0 : Y.nextBtnRef,
+        isActive: !1,
+        type: d.NUDGE,
+        indicator: {
+          nudge: "click",
+          content: /* @__PURE__ */ r(m, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
+          nudgePointerX: 0,
+          nudgePointerY: 0
+        },
+        elementToHighlight: /* @__PURE__ */ r(
+          X,
+          {
+            renderAs: "secondary",
+            Icon: F,
+            onClick: C,
+            analyticsLabel: Z.JOURNEY_NEXT_ACTIVITY
+          }
+        )
+      }), (k = s.current) == null || k.goToIndex(te), n(e, !1, $)), a(e, {
+        originalElementToHighlightRef: t.current.labelRef,
+        isActive: !1,
+        type: d.TOOLTIP,
+        elementToHighlight: /* @__PURE__ */ r(L, {}),
+        indicator: {
+          position: "right",
+          backgroundColor: "YELLOW_4",
+          width: 264,
+          tooltipItem: /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(m, { $renderAs: "ab2-bold", children: "Get faster at multiplication! Practice everyday and become a Tables champ." }) }),
+          tooltipXCoOrdinates: g.width + 50,
+          tooltipYCoOrdinates: g.height / 2
+        }
+      }), a(e, {
+        originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
+        isActive: !1,
+        type: d.NUDGE,
+        indicator: {
+          nudge: "click",
+          content: /* @__PURE__ */ r(m, { $renderAs: "ab1", $color: "WHITE", children: "Pick a table to start" }),
+          nudgePointerX: T.width / 2 + 50,
+          nudgePointerY: T.height / 2
+        },
+        elementToHighlight: /* @__PURE__ */ r(
+          G,
+          {
+            ref: f,
+            label: l.label,
+            data: l.data,
+            onPress: () => {
+            },
+            onPressTableSegment: (w) => H(l, w)
+          }
+        )
+      });
+    },
+    [
+      a,
+      s,
+      C,
+      H,
+      e,
+      n,
+      S
+    ]
+  );
+  return {
+    tableRef: t,
+    startJourney: x
+  };
+};
+export {
+  Ce as useTableLauncherJourney
+};
+//# sourceMappingURL=use-table-launcher-journey.js.map

package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-table-launcher-journey.js","sources":["../../../../../../src/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.tsx"],"sourcesContent":["/* eslint-disable react-native/no-inline-styles */\nimport type { IArrowTooltipProps } from '../../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { INudgeProps } from '../../../../ui/nudge/nudge-types';\nimport type { ITableCardRef, ITableDetails } from '../../comps/tables-card/tables-card-types';\nimport type {\n  ITableInfo,\n  ITables,\n} from '../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { IUseTableJourneyProps } from './use-table-launcher-journey-types';\n\nimport { useCallback, useRef } from 'react';\n\nimport CaratRightIcon from '../../../../../assets/line-icons/icons/carat-right';\nimport { PLATFORM_EVENTS_STUDENT } from '../../../../analytics-events/platform-events-student';\nimport { JOURNEY_ID_STUDENT } from '../../../../journey/journey-id/journey-id-student';\nimport { IndicatorType } from '../../../../journey/use-journey/constants';\nimport { useJourney } from '../../../../journey/use-journey/use-journey';\nimport IconButton from '../../../../ui/buttons/icon-button/icon-button';\nimport { useUIContext } from '../../../../ui/context/context';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { CIRCLE_ONBOARDING_ANALYTICS_STEPS as Action } from '../../../enum/circle-onboarding-steps';\nimport { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport { TablesCard } from '../../comps/tables-card/tables-card';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from '../../game-launcher-analytics-events';\nimport {\n  PUZZLE_CARD_INDEX,\n  SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS,\n  SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS,\n  TABLE_CARD_INDEX,\n} from './constants';\nimport {\n  GO_TO_TABLE_LAUNCHER_DURATION_MS,\n  SHOW_CLICK_TABLE_NUDGE_AFTER_MS,\n  SHOW_INITIAL_COACHMARK_AFTER_MS,\n  SHOW_INITIAL_TOOLTIP_AFTER_MS,\n  START_ANIMATING_CLONED_ELEM,\n} from './constants';\nimport * as S from './use-table-launcher-journey-styled';\n\nexport const useTableLauncherJourney = ({\n  carouselRefs,\n  onTableSegmentClick,\n  onJourneyComplete,\n}: IUseTableJourneyProps) => {\n  const journeyId = JOURNEY_ID_STUDENT.CIRCLE_TABLES_INTRO_JOURNEY;\n  const originalTableRef = useRef<ITableCardRef>(null);\n  const highlightedTableRef = useRef<ITableCardRef>(null);\n  const isJourneyInProgress = useRef(false);\n\n  const { playButtonSound } = useCircleSounds();\n  const { nextCoachmark, setJourney, addCoachmark } = useJourney();\n  const { onEvent: trackAnalytics } = useUIContext();\n\n  const endJourney = useCallback(\n    (tableDetails?: ITableDetails) => {\n      // Only when User clicked on play\n      if (tableDetails) {\n        onTableSegmentClick(tableDetails);\n      }\n      trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_COMPLETED, {\n        step: Action.TABLES,\n      });\n\n      // Reset original table card ref label\n      originalTableRef?.current?.setLabelVisiblity(true);\n      originalTableRef?.current?.stopLabelAnimation();\n      onJourneyComplete(journeyId);\n      nextCoachmark(journeyId, false);\n    },\n    [journeyId, nextCoachmark, onJourneyComplete, onTableSegmentClick, trackAnalytics],\n  );\n\n  const handleTableSegmentClick = useCallback(\n    (launcherData: ITables, tableData: ITableInfo) => {\n      if (\n        !originalTableRef.current?.segmentedCardWrapperRef.current ||\n        !originalTableRef.current?.labelRef.current\n      ) {\n        return;\n      }\n\n      const segmentedCardDims = originalTableRef.current.labelRef.current.getBoundingClientRect();\n      const tableCardDims =\n        originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n        isActive: false,\n        type: IndicatorType.TOOLTIP,\n        elementToHighlight: (\n          <TablesCard\n            ref={highlightedTableRef}\n            defaultTable={tableData}\n            label={launcherData.label}\n            data={launcherData.data}\n            onPress={endJourney}\n            onGoBackFromTableLevel={endJourney}\n          />\n        ),\n        indicator: {\n          position: 'left',\n          backgroundColor: 'YELLOW_4',\n          width: 236,\n          tooltipItem: (\n            <FlexView>\n              <Text $renderAs=\"ab2-bold\">Each table has 3 levels—clear them and earn 3 stars!</Text>\n            </FlexView>\n          ),\n          tooltipXCoOrdinates: 0,\n          tooltipYCoOrdinates: segmentedCardDims.height * 0.35,\n        } as IArrowTooltipProps,\n      });\n\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n        isActive: false,\n        type: IndicatorType.NUDGE,\n        indicator: {\n          nudge: 'click',\n          content: (\n            <Text $renderAs=\"ab1\" $color=\"WHITE\">\n              Pick a level\n            </Text>\n          ),\n          nudgePointerX: tableCardDims.width / 2 + 50,\n          nudgePointerY: tableCardDims.height * 0.4,\n        } as INudgeProps,\n        elementToHighlight: <></>,\n      });\n\n      nextCoachmark(journeyId, false, SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS); // Show coachmark => Each table has 3... and Hide the previous two\n      nextCoachmark(journeyId, true, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS); // Show nudge => Pick a level\n\n      const startAnimationOnLabelAgain = setTimeout(() => {\n        clearTimeout(startAnimationOnLabelAgain);\n        highlightedTableRef.current?.startLabelAnimation('YELLOW_4');\n      }, START_ANIMATING_CLONED_ELEM);\n    },\n    [addCoachmark, endJourney, journeyId, nextCoachmark],\n  );\n\n  const goToTableLauncher = useCallback(() => {\n    playButtonSound();\n    carouselRefs.current?.goToIndex(TABLE_CARD_INDEX);\n    nextCoachmark(journeyId, false, GO_TO_TABLE_LAUNCHER_DURATION_MS);\n\n    trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_VIEWED, {\n      step: Action.TABLES,\n    });\n\n    const showNudge = setTimeout(() => {\n      clearTimeout(showNudge);\n      originalTableRef.current?.setLabelVisiblity(false);\n      nextCoachmark(journeyId, true);\n    }, SHOW_CLICK_TABLE_NUDGE_AFTER_MS);\n\n    const animateLabel = setTimeout(() => {\n      clearTimeout(animateLabel);\n      highlightedTableRef.current?.startLabelAnimation('YELLOW_4');\n    }, START_ANIMATING_CLONED_ELEM);\n  }, [carouselRefs, journeyId, nextCoachmark, playButtonSound, trackAnalytics]);\n\n  const startJourney = useCallback(\n    (tablesData: ITables, isTutorialOnboardingDone: boolean = false) => {\n      if (isJourneyInProgress.current) {\n        return;\n      }\n\n      const paginationList = carouselRefs.current?.indicatorRefs;\n      const carouselNextBtnRef = carouselRefs.current?.nextBtnRef;\n      const tablePaginationRef = paginationList?.[TABLE_CARD_INDEX];\n\n      if (\n        !originalTableRef.current?.segmentedCardWrapperRef.current ||\n        !originalTableRef.current?.labelRef.current ||\n        !paginationList ||\n        !carouselNextBtnRef?.current ||\n        !tablePaginationRef ||\n        !tablePaginationRef.current\n      ) {\n        return;\n      }\n\n      isJourneyInProgress.current = true;\n\n      const labelDims = originalTableRef.current.labelRef.current.getBoundingClientRect();\n      const tableCardDims =\n        originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n      setJourney(journeyId, []);\n\n      // TAKE THE USER TO THE TABLE CARD\n      if (!isTutorialOnboardingDone) {\n        addCoachmark(journeyId, {\n          originalElementToHighlightRef: carouselRefs.current?.nextBtnRef,\n          isActive: false,\n          type: IndicatorType.NUDGE,\n          indicator: {\n            nudge: 'click',\n            content: (\n              <Text $renderAs=\"ab1\" $color=\"WHITE\">\n                Click to proceed\n              </Text>\n            ),\n            nudgePointerX: 0,\n            nudgePointerY: 0,\n          } as INudgeProps,\n          elementToHighlight: (\n            <IconButton\n              renderAs=\"secondary\"\n              Icon={CaratRightIcon}\n              onClick={goToTableLauncher}\n              analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n            />\n          ),\n        });\n        carouselRefs.current?.goToIndex(PUZZLE_CARD_INDEX);\n        nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show nudge => Click to proceed\n      } else {\n        addCoachmark(journeyId, {\n          originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n          isActive: false,\n          type: IndicatorType.TOOLTIP,\n          elementToHighlight: <S.Indicator $isActive={false} />,\n          indicator: {\n            position: 'bottom',\n            backgroundColor: 'YELLOW_4',\n            width: 52,\n            tooltipItem: (\n              <FlexView\n                $position=\"absolute\"\n                $flexDirection=\"row\"\n                style={{ top: 6, left: 8, cursor: 'pointer' }}\n                onClick={goToTableLauncher}\n              >\n                <Text $renderAs=\"ab2-bold\">NEW</Text>\n              </FlexView>\n            ),\n            tooltipYCoOrdinates: 14, // Need some offset in Y direction from top\n          } as IArrowTooltipProps,\n        });\n        addCoachmark(journeyId, {\n          originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n          isActive: false,\n          type: IndicatorType.NUDGE,\n          indicator: {\n            nudge: 'click',\n            content: '',\n            nudgePointerY: 20,\n          } as INudgeProps,\n          elementToHighlight: <></>,\n        });\n        nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show Coachmark => NEW\n        nextCoachmark(journeyId, true, SHOW_INITIAL_TOOLTIP_AFTER_MS); // Show Nudge over Coachmark\n      }\n\n      // SHOW THE USER SELECT A TABLE\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.labelRef,\n        isActive: false,\n        type: IndicatorType.TOOLTIP,\n        elementToHighlight: <></>,\n        indicator: {\n          position: 'right',\n          backgroundColor: 'YELLOW_4',\n          width: 264,\n          tooltipItem: (\n            <FlexView>\n              <Text $renderAs=\"ab2-bold\">\n                Get faster at multiplication! Practice everyday and become a Tables champ.\n              </Text>\n            </FlexView>\n          ),\n          tooltipXCoOrdinates: labelDims.width + 50,\n          tooltipYCoOrdinates: labelDims.height / 2,\n        } as IArrowTooltipProps,\n      });\n\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n        isActive: false,\n        type: IndicatorType.NUDGE,\n        indicator: {\n          nudge: 'click',\n          content: (\n            <Text $renderAs=\"ab1\" $color=\"WHITE\">\n              {'Pick a table to start'}\n            </Text>\n          ),\n          nudgePointerX: tableCardDims.width / 2 + 50,\n          nudgePointerY: tableCardDims.height / 2,\n        } as INudgeProps,\n        elementToHighlight: (\n          <TablesCard\n            ref={highlightedTableRef}\n            label={tablesData.label}\n            data={tablesData.data}\n            onPress={() => {}}\n            onPressTableSegment={tableInfo => handleTableSegmentClick(tablesData, tableInfo)}\n          />\n        ),\n      });\n    },\n    [\n      addCoachmark,\n      carouselRefs,\n      goToTableLauncher,\n      handleTableSegmentClick,\n      journeyId,\n      nextCoachmark,\n      setJourney,\n    ],\n  );\n\n  return {\n    tableRef: originalTableRef,\n    startJourney,\n  };\n};\n"],"names":["useTableLauncherJourney","carouselRefs","onTableSegmentClick","onJourneyComplete","journeyId","JOURNEY_ID_STUDENT","originalTableRef","useRef","highlightedTableRef","isJourneyInProgress","playButtonSound","useCircleSounds","nextCoachmark","setJourney","addCoachmark","useJourney","trackAnalytics","useUIContext","endJourney","useCallback","tableDetails","PLATFORM_EVENTS_STUDENT","Action","_a","_b","handleTableSegmentClick","launcherData","tableData","segmentedCardDims","tableCardDims","_c","IndicatorType","jsx","TablesCard","FlexView","Text","Fragment","SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS","SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS","startAnimationOnLabelAgain","START_ANIMATING_CLONED_ELEM","goToTableLauncher","TABLE_CARD_INDEX","GO_TO_TABLE_LAUNCHER_DURATION_MS","showNudge","SHOW_CLICK_TABLE_NUDGE_AFTER_MS","animateLabel","startJourney","tablesData","isTutorialOnboardingDone","paginationList","carouselNextBtnRef","tablePaginationRef","_d","labelDims","_e","S.Indicator","SHOW_INITIAL_COACHMARK_AFTER_MS","SHOW_INITIAL_TOOLTIP_AFTER_MS","_f","IconButton","CaratRightIcon","GAME_LAUNCHER_ANALYTICS_EVENTS","_g","PUZZLE_CARD_INDEX","tableInfo"],"mappings":"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"}

package/dist/features/journey/journey-id/journey-id-student.js

@@ -1,4 +1,4 @@
-var E = /* @__PURE__ */ ((R) => (R.CIRCLE_ACTIVITIES_INTRO_JOURNEY = "CIRCLE_ACTIVITIES_INTRO_JOURNEY", R.CIRCLE_LEADERBOARD_INTRO_JOURNEY = "CIRCLE_LEADERBOARD_INTRO_JOURNEY", R.CIRCLE_POINTS_REWARD_JOURNEY = "CIRCLE_POINTS_REWARD_JOURNEY", R.CIRCLE_STREAK_UPDATE_JOURNEY = "CIRCLE_STREAK_UPDATE_JOURNEY", R.CIRCLE_TUTORIAL_JOURNEY = "CIRCLE_TUTORIAL_JOURNEY", R))(E || {});
+var E = /* @__PURE__ */ ((R) => (R.CIRCLE_ACTIVITIES_INTRO_JOURNEY = "CIRCLE_ACTIVITIES_INTRO_JOURNEY", R.CIRCLE_LEADERBOARD_INTRO_JOURNEY = "CIRCLE_LEADERBOARD_INTRO_JOURNEY", R.CIRCLE_POINTS_REWARD_JOURNEY = "CIRCLE_POINTS_REWARD_JOURNEY", R.CIRCLE_STREAK_UPDATE_JOURNEY = "CIRCLE_STREAK_UPDATE_JOURNEY", R.CIRCLE_TUTORIAL_JOURNEY = "CIRCLE_TUTORIAL_JOURNEY", R.CIRCLE_TABLES_INTRO_JOURNEY = "CIRCLE_TABLES_INTRO_JOURNEY", R))(E || {});
 export {
   E as JOURNEY_ID_STUDENT
 };

package/dist/features/journey/journey-id/journey-id-student.js.map

@@ -1 +1 @@
-{"version":3,"file":"journey-id-student.js","sources":["../../../../src/features/journey/journey-id/journey-id-student.ts"],"sourcesContent":["export enum JOURNEY_ID_STUDENT {\n  CIRCLE_ACTIVITIES_INTRO_JOURNEY = 'CIRCLE_ACTIVITIES_INTRO_JOURNEY',\n  CIRCLE_LEADERBOARD_INTRO_JOURNEY = 'CIRCLE_LEADERBOARD_INTRO_JOURNEY',\n  CIRCLE_POINTS_REWARD_JOURNEY = 'CIRCLE_POINTS_REWARD_JOURNEY',\n  CIRCLE_STREAK_UPDATE_JOURNEY = 'CIRCLE_STREAK_UPDATE_JOURNEY',\n  CIRCLE_TUTORIAL_JOURNEY = 'CIRCLE_TUTORIAL_JOURNEY',\n}\n"],"names":["JOURNEY_ID_STUDENT"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,kCAAkC,mCAClCA,EAAA,mCAAmC,oCACnCA,EAAA,+BAA+B,gCAC/BA,EAAA,+BAA+B,gCAC/BA,EAAA,0BAA0B,2BALhBA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"journey-id-student.js","sources":["../../../../src/features/journey/journey-id/journey-id-student.ts"],"sourcesContent":["export enum JOURNEY_ID_STUDENT {\n  CIRCLE_ACTIVITIES_INTRO_JOURNEY = 'CIRCLE_ACTIVITIES_INTRO_JOURNEY',\n  CIRCLE_LEADERBOARD_INTRO_JOURNEY = 'CIRCLE_LEADERBOARD_INTRO_JOURNEY',\n  CIRCLE_POINTS_REWARD_JOURNEY = 'CIRCLE_POINTS_REWARD_JOURNEY',\n  CIRCLE_STREAK_UPDATE_JOURNEY = 'CIRCLE_STREAK_UPDATE_JOURNEY',\n  CIRCLE_TUTORIAL_JOURNEY = 'CIRCLE_TUTORIAL_JOURNEY',\n  CIRCLE_TABLES_INTRO_JOURNEY = 'CIRCLE_TABLES_INTRO_JOURNEY',\n}\n"],"names":["JOURNEY_ID_STUDENT"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,kCAAkC,mCAClCA,EAAA,mCAAmC,oCACnCA,EAAA,+BAA+B,gCAC/BA,EAAA,+BAA+B,gCAC/BA,EAAA,0BAA0B,2BAC1BA,EAAA,8BAA8B,+BANpBA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/features/talk-meter/helper.js

@@ -0,0 +1,11 @@
+const e = (T) => {
+  const E = {
+    STUDENT: "RED",
+    TEACHER: "ORANGE_2"
+  };
+  return T >= 50 ? (E.STUDENT = "GREEN_4", E.TEACHER = "GREEN_2") : T >= 25 && (E.STUDENT = "YELLOW_4", E.TEACHER = "YELLOW_2"), E;
+};
+export {
+  e as getMeterColor
+};
+//# sourceMappingURL=helper.js.map

package/dist/features/talk-meter/helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.js","sources":["../../../src/features/talk-meter/helper.ts"],"sourcesContent":["import type { TColorNames, TUserTypes } from '../ui/types';\n\nconst getMeterColor = (stdRatio: number) => {\n  const COLOR_MAP: Record<TUserTypes, TColorNames> = {\n    STUDENT: 'RED',\n    TEACHER: 'ORANGE_2',\n  };\n\n  if (stdRatio >= 50) {\n    COLOR_MAP.STUDENT = 'GREEN_4';\n    COLOR_MAP.TEACHER = 'GREEN_2';\n  } else if (stdRatio >= 25) {\n    COLOR_MAP.STUDENT = 'YELLOW_4';\n    COLOR_MAP.TEACHER = 'YELLOW_2';\n  }\n\n  return COLOR_MAP;\n};\n\nexport { getMeterColor };\n"],"names":["getMeterColor","stdRatio","COLOR_MAP"],"mappings":"AAEM,MAAAA,IAAgB,CAACC,MAAqB;AAC1C,QAAMC,IAA6C;AAAA,IACjD,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAGX,SAAID,KAAY,MACdC,EAAU,UAAU,WACpBA,EAAU,UAAU,aACXD,KAAY,OACrBC,EAAU,UAAU,YACpBA,EAAU,UAAU,aAGfA;AACT;"}

package/dist/features/talk-meter/hooks/use-talk-meter.js

@@ -0,0 +1,123 @@
+import { useAVActions as se, useRemotePeers as ne, useAVMessage as ce } from "@cuemath/av";
+import { useCallback as u, useState as J, useRef as B, useMemo as ae, useEffect as M } from "react";
+import { useUIContext as re } from "../../ui/context/context.js";
+const v = 1e3 * 60, le = (Q) => {
+  var Y, j;
+  const {
+    userType: X,
+    studentId: I,
+    teacherId: C,
+    classStartTime: r,
+    avPackageEnabled: P,
+    teacherClassroomId: U,
+    teacherTalkTime: D,
+    studentTalkTime: p,
+    lastBatchReceivedNo: i,
+    canDisplayBatch: k,
+    classDuration: S = 0,
+    onMessageReceive: L,
+    onDismissMeter: y
+  } = Q, _ = Math.round(0.36 * (S / 60)), f = Math.round(0.73 * (S / 60)), g = S / 60 - 5, d = u(
+    (e, t) => {
+      const o = Date.now(), m = e.getTime(), te = Math.abs(o - m), n = Math.floor(te / 1e3 / 60), q = (t === 0 || t === 1) && n >= _ - 2 && n <= _, z = (t === 1 || t === 2) && n >= f - 2 && n <= f, G = n >= g;
+      let A = 0, R = !1;
+      return G ? A = 0 : z ? (A = 2, R = n >= f) : q && (A = 1, R = n >= _), {
+        lastMinutesLeft: G,
+        canSendBatch: q || z,
+        batchNoToSend: A,
+        minutes: n,
+        canDisplay: R
+      };
+    },
+    [_, f, g]
+  ), [c, H] = J(!1), [Z, b] = J(!1), { onEvent: K } = re(), { sendMessage: O } = se(), V = ne(), w = (Y = V.find((e) => e.userId === I)) == null ? void 0 : Y.id, x = (j = V.find((e) => e.userType === "teacher")) == null ? void 0 : j.id, s = X === "TEACHER", T = B(D), a = B(p), F = B(0), W = a.current + T.current, $ = Math.ceil(a.current * 100 / W) || 0, ee = Math.floor(T.current * 100 / W) || 0, h = ae(
+    () => ({
+      teacher_classroom_id: U,
+      teacher_id: C,
+      studentId: I
+    }),
+    [I, U, C]
+  ), N = u(() => {
+    b(!0), H(!1), y();
+  }, [y]), E = u(
+    (e, t = {}) => {
+      K(e, { ...h, ...t });
+    },
+    [K, h]
+  ), l = u(
+    (e) => {
+      const t = s ? "TEACHER_TALK_TIME_UPDATED" : "STUDENT_TALK_TIME_UPDATED", o = s ? { teacher_speech_time: T.current } : { student_speech_time: a.current };
+      E("TALK_METER_BATCH_SENT", {
+        batch_no: e,
+        ...o
+      }), P && O(
+        t,
+        {
+          ...h,
+          ...o,
+          batch_no: e
+        },
+        s ? w : x
+      ), F.current = a.current;
+    },
+    [P, s, h, O, w, x, E]
+  );
+  return ce({
+    type: s ? "STUDENT_TALK_TIME_UPDATED" : "TEACHER_TALK_TIME_UPDATED",
+    onMessage: u(
+      (e, t) => {
+        L(t), s && l(t.batch_no);
+      },
+      [s, L, l]
+    )
+  }), M(() => {
+    c || (T.current = D, a.current = p);
+  }, [D, p, c]), M(() => {
+    let e;
+    return c && (e = setTimeout(() => {
+      N();
+    }, v)), () => {
+      e && clearTimeout(e);
+    };
+  }, [c, N]), M(() => {
+    let e;
+    return r && k && !c && (e = setInterval(() => {
+      const { canDisplay: t } = d(r, i);
+      t && (E("TALK_METER_BATCH_DISPLAYED", {
+        student_speech_time: a.current,
+        teacher_speech_time: T.current,
+        batch_no: i
+      }), H(!0), b(!1));
+    }, v / 30)), () => {
+      e && clearInterval(e);
+    };
+  }, [
+    c,
+    k,
+    r,
+    d,
+    i,
+    E
+  ]), M(() => {
+    let e;
+    return r && !s && (e = setInterval(() => {
+      const { lastMinutesLeft: t, canSendBatch: o, batchNoToSend: m } = d(
+        r,
+        i
+      );
+      t ? F.current !== a.current && l(m) : o && l(m);
+    }, v / 6)), () => {
+      e && clearInterval(e);
+    };
+  }, [r, d, s, i, l]), {
+    canAnimateIn: c,
+    canAnimateOut: Z,
+    stdRatio: $,
+    tchRatio: ee,
+    handleDismiss: N
+  };
+};
+export {
+  le as useTalkMeter
+};
+//# sourceMappingURL=use-talk-meter.js.map

package/dist/features/talk-meter/hooks/use-talk-meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-talk-meter.js","sources":["../../../../src/features/talk-meter/hooks/use-talk-meter.ts"],"sourcesContent":["import type { ITalkMeterHook, TMessageData } from '../talk-meter-types';\n\nimport { useAVActions, useAVMessage, useRemotePeers } from '@cuemath/av';\nimport { useRef, useMemo, useCallback, useState, useEffect } from 'react';\n\nimport { useUIContext } from '../../ui/context/context';\n\nconst ONE_MINUTE = 1000 * 60;\n\nexport const useTalkMeter = (props: ITalkMeterHook) => {\n  const {\n    userType,\n    studentId,\n    teacherId,\n    classStartTime,\n    avPackageEnabled,\n    teacherClassroomId,\n    teacherTalkTime,\n    studentTalkTime,\n    lastBatchReceivedNo,\n    canDisplayBatch,\n    classDuration = 0,\n    onMessageReceive,\n    onDismissMeter,\n  } = props;\n\n  const BATCH_ONE_MINUTE = Math.round(0.36 * (classDuration / 60));\n  const BATCH_TWO_MINUTE = Math.round(0.73 * (classDuration / 60));\n  const LAST_MINUTES = classDuration / 60 - 5;\n\n  const getBatchToSendInfo = useCallback(\n    (classStartFrom: Date, batchSeen: number) => {\n      const now = Date.now();\n      const classTS = classStartFrom.getTime();\n      const diff = Math.abs(now - classTS);\n      const minutes = Math.floor(diff / 1000 / 60);\n      const canSendFirstBatch =\n        (batchSeen === 0 || batchSeen === 1) &&\n        minutes >= BATCH_ONE_MINUTE - 2 &&\n        minutes <= BATCH_ONE_MINUTE;\n      const canSendSecondBatch =\n        (batchSeen === 1 || batchSeen === 2) &&\n        minutes >= BATCH_TWO_MINUTE - 2 &&\n        minutes <= BATCH_TWO_MINUTE;\n\n      const lastMinutesLeft = minutes >= LAST_MINUTES;\n\n      let batchNo = 0;\n      let canDisplayTalkBatch = false;\n\n      if (lastMinutesLeft) {\n        batchNo = 0;\n      } else if (canSendSecondBatch) {\n        batchNo = 2;\n        canDisplayTalkBatch = minutes >= BATCH_TWO_MINUTE;\n      } else if (canSendFirstBatch) {\n        batchNo = 1;\n        canDisplayTalkBatch = minutes >= BATCH_ONE_MINUTE;\n      }\n\n      return {\n        lastMinutesLeft,\n        canSendBatch: canSendFirstBatch || canSendSecondBatch,\n        batchNoToSend: batchNo,\n        minutes,\n        canDisplay: canDisplayTalkBatch,\n      };\n    },\n    [BATCH_ONE_MINUTE, BATCH_TWO_MINUTE, LAST_MINUTES],\n  );\n\n  const [canAnimateIn, setCanAnimateIn] = useState(false);\n  const [canAnimateOut, setCanAnimateOut] = useState(false);\n\n  const { onEvent } = useUIContext();\n  const { sendMessage } = useAVActions();\n\n  const remotePeers = useRemotePeers();\n  const studentPeerId = remotePeers.find(peer => peer.userId === studentId)?.id;\n  const teacherPeerId = remotePeers.find(p => p.userType === 'teacher')?.id;\n\n  const isTeacher = userType === 'TEACHER';\n\n  const teacherTalkRef = useRef(teacherTalkTime);\n  const studentTalkRef = useRef(studentTalkTime);\n  const prevSentRef = useRef(0);\n\n  const totalTalkTime = studentTalkRef.current + teacherTalkRef.current;\n  const stdRatio = Math.ceil((studentTalkRef.current * 100) / totalTalkTime) || 0;\n  const tchRatio = Math.floor((teacherTalkRef.current * 100) / totalTalkTime) || 0;\n\n  const payload = useMemo(\n    () => ({\n      teacher_classroom_id: teacherClassroomId,\n      teacher_id: teacherId,\n      studentId: studentId,\n    }),\n    [studentId, teacherClassroomId, teacherId],\n  );\n\n  const handleDismiss = useCallback(() => {\n    setCanAnimateOut(true);\n    setCanAnimateIn(false);\n    onDismissMeter();\n  }, [onDismissMeter]);\n\n  const trackEvent = useCallback(\n    (eventName: string, data = {}) => {\n      onEvent(eventName, { ...payload, ...data });\n    },\n    [onEvent, payload],\n  );\n\n  const sendBatch = useCallback(\n    (batchNo: number) => {\n      const EVENT_NAME = isTeacher ? 'TEACHER_TALK_TIME_UPDATED' : 'STUDENT_TALK_TIME_UPDATED';\n      const speechTimePayload = isTeacher\n        ? { teacher_speech_time: teacherTalkRef.current }\n        : { student_speech_time: studentTalkRef.current };\n\n      trackEvent('TALK_METER_BATCH_SENT', {\n        batch_no: batchNo,\n        ...speechTimePayload,\n      });\n      if (avPackageEnabled) {\n        sendMessage(\n          EVENT_NAME,\n          {\n            ...payload,\n            ...speechTimePayload,\n            batch_no: batchNo,\n          },\n          isTeacher ? studentPeerId : teacherPeerId,\n        );\n      }\n\n      prevSentRef.current = studentTalkRef.current;\n    },\n    [avPackageEnabled, isTeacher, payload, sendMessage, studentPeerId, teacherPeerId, trackEvent],\n  );\n\n  useAVMessage<TMessageData>({\n    type: isTeacher ? 'STUDENT_TALK_TIME_UPDATED' : 'TEACHER_TALK_TIME_UPDATED',\n    onMessage: useCallback(\n      (_, data) => {\n        onMessageReceive(data);\n        if (isTeacher) sendBatch(data.batch_no);\n      },\n      [isTeacher, onMessageReceive, sendBatch],\n    ),\n  });\n\n  useEffect(() => {\n    if (!canAnimateIn) {\n      teacherTalkRef.current = teacherTalkTime;\n      studentTalkRef.current = studentTalkTime;\n    }\n  }, [teacherTalkTime, studentTalkTime, canAnimateIn]);\n\n  useEffect(() => {\n    let dismissTimer: NodeJS.Timeout | undefined;\n\n    if (canAnimateIn) {\n      dismissTimer = setTimeout(() => {\n        handleDismiss();\n      }, ONE_MINUTE);\n    }\n\n    return () => {\n      if (dismissTimer) clearTimeout(dismissTimer);\n    };\n  }, [canAnimateIn, handleDismiss]);\n\n  useEffect(() => {\n    let interval: NodeJS.Timeout | undefined;\n\n    if (classStartTime && canDisplayBatch && !canAnimateIn) {\n      interval = setInterval(() => {\n        const { canDisplay } = getBatchToSendInfo(classStartTime, lastBatchReceivedNo);\n\n        if (canDisplay) {\n          trackEvent('TALK_METER_BATCH_DISPLAYED', {\n            student_speech_time: studentTalkRef.current,\n            teacher_speech_time: teacherTalkRef.current,\n            batch_no: lastBatchReceivedNo,\n          });\n          setCanAnimateIn(true);\n          setCanAnimateOut(false);\n        }\n      }, ONE_MINUTE / 30);\n    }\n\n    return () => {\n      if (interval) {\n        clearInterval(interval);\n      }\n    };\n  }, [\n    canAnimateIn,\n    canDisplayBatch,\n    classStartTime,\n    getBatchToSendInfo,\n    lastBatchReceivedNo,\n    trackEvent,\n  ]);\n\n  useEffect(() => {\n    let interval: NodeJS.Timeout | undefined;\n\n    if (classStartTime && !isTeacher) {\n      interval = setInterval(() => {\n        const { lastMinutesLeft, canSendBatch, batchNoToSend } = getBatchToSendInfo(\n          classStartTime,\n          lastBatchReceivedNo,\n        );\n\n        if (lastMinutesLeft) {\n          if (prevSentRef.current !== studentTalkRef.current) {\n            sendBatch(batchNoToSend);\n          }\n        } else if (canSendBatch) {\n          sendBatch(batchNoToSend);\n        }\n      }, ONE_MINUTE / 6);\n    }\n\n    return () => {\n      if (interval) {\n        clearInterval(interval);\n      }\n    };\n  }, [classStartTime, getBatchToSendInfo, isTeacher, lastBatchReceivedNo, sendBatch]);\n\n  return {\n    canAnimateIn,\n    canAnimateOut,\n    stdRatio,\n    tchRatio,\n    handleDismiss,\n  };\n};\n"],"names":["ONE_MINUTE","useTalkMeter","props","userType","studentId","teacherId","classStartTime","avPackageEnabled","teacherClassroomId","teacherTalkTime","studentTalkTime","lastBatchReceivedNo","canDisplayBatch","classDuration","onMessageReceive","onDismissMeter","BATCH_ONE_MINUTE","BATCH_TWO_MINUTE","LAST_MINUTES","getBatchToSendInfo","useCallback","classStartFrom","batchSeen","now","classTS","diff","minutes","canSendFirstBatch","canSendSecondBatch","lastMinutesLeft","batchNo","canDisplayTalkBatch","canAnimateIn","setCanAnimateIn","useState","canAnimateOut","setCanAnimateOut","onEvent","useUIContext","sendMessage","useAVActions","remotePeers","useRemotePeers","studentPeerId","_a","peer","teacherPeerId","_b","p","isTeacher","teacherTalkRef","useRef","studentTalkRef","prevSentRef","totalTalkTime","stdRatio","tchRatio","payload","useMemo","handleDismiss","trackEvent","eventName","data","sendBatch","EVENT_NAME","speechTimePayload","useAVMessage","_","useEffect","dismissTimer","interval","canDisplay","canSendBatch","batchNoToSend"],"mappings":"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"}

package/dist/features/talk-meter/ripple/index.js

@@ -0,0 +1,62 @@
+import { jsx as c } from "react/jsx-runtime";
+import { useRef as l, useCallback as u, useEffect as p } from "react";
+import f, { keyframes as d, css as n } from "styled-components";
+import { SOUNDS as y } from "../../../assets/sounds/sounds.js";
+import { useUIContext as g } from "../../ui/context/context.js";
+import x from "../../ui/layout/flex-view.js";
+const A = d`
+0% {
+  opacity: 1;
+  transform: scale(1);
+}
+50% {
+  opacity: 0;
+  transform: scale(1.10) scaleY(1.15);
+}
+100% {
+  opacity: 0;
+  transform: scale(1.10) scaleY(1.15);
+}
+`, h = f(x)(
+  ({ $delay: i }) => n`
+    height: 104px;
+    width: calc(100% - 24px);
+    position: absolute;
+    border-radius: 12px;
+    z-index: 0;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    ${i > 0 && n`
+      animation-name: ${A};
+      animation-delay: ${i || 0}ms;
+      animation-duration: 1000ms;
+      animation-iteration-count: infinite;
+      animation-timing-function: ease-in;
+    `};
+  `
+), L = (i) => {
+  const { delay: o, color: s, withAudio: e = !0 } = i, { onEvent: r } = g(), m = l(new Audio(y.ALERT)), a = u(() => {
+    try {
+      m.current.play();
+    } catch (t) {
+      r("debug_log", {
+        type: "UNABLE TO PLAY SOUND IN TALK METER",
+        error: JSON.stringify(t)
+      });
+    }
+  }, [r]);
+  return p(() => {
+    let t = null;
+    return e && (t = setTimeout(() => {
+      a();
+    }, o)), () => {
+      t && clearTimeout(t);
+    };
+  }, [e, o, a]), /* @__PURE__ */ c(h, { $delay: o, $borderColor: s });
+};
+export {
+  L as default
+};
+//# sourceMappingURL=index.js.map

package/dist/features/talk-meter/ripple/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/features/talk-meter/ripple/index.tsx"],"sourcesContent":["import type { TColorNames } from '../../ui/types';\nimport type { FC } from 'react';\n\nimport { useEffect, useRef, useCallback } from 'react';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport { SOUNDS } from '../../../assets/sounds/sounds';\nimport { useUIContext } from '../../ui/context/context';\nimport FlexView from '../../ui/layout/flex-view';\n\nconst rippleAnimation = keyframes`\n0% {\n  opacity: 1;\n  transform: scale(1);\n}\n50% {\n  opacity: 0;\n  transform: scale(1.10) scaleY(1.15);\n}\n100% {\n  opacity: 0;\n  transform: scale(1.10) scaleY(1.15);\n}\n`;\n\nconst RippleView = styled(FlexView)<{ $delay: number }>(\n  ({ $delay }) => css`\n    height: 104px;\n    width: calc(100% - 24px);\n    position: absolute;\n    border-radius: 12px;\n    z-index: 0;\n    left: 0;\n    right: 0;\n    margin-left: auto;\n    margin-right: auto;\n    ${$delay > 0 &&\n    css`\n      animation-name: ${rippleAnimation};\n      animation-delay: ${$delay || 0}ms;\n      animation-duration: 1000ms;\n      animation-iteration-count: infinite;\n      animation-timing-function: ease-in;\n    `};\n  `,\n);\n\ninterface IRipple {\n  delay: number;\n  color: TColorNames;\n  withAudio?: boolean;\n}\n\nconst Ripple: FC<IRipple> = props => {\n  const { delay, color, withAudio = true } = props;\n  const { onEvent: trackEvent } = useUIContext();\n  const audioRef = useRef(new Audio(SOUNDS.ALERT));\n\n  const playAudio = useCallback(() => {\n    try {\n      audioRef.current.play();\n    } catch (err) {\n      trackEvent('debug_log', {\n        type: 'UNABLE TO PLAY SOUND IN TALK METER',\n        error: JSON.stringify(err),\n      });\n    }\n  }, [trackEvent]);\n\n  useEffect(() => {\n    let audioTimer: NodeJS.Timeout | null = null;\n\n    if (withAudio) {\n      audioTimer = setTimeout(() => {\n        playAudio();\n      }, delay);\n    }\n\n    return () => {\n      if (audioTimer) clearTimeout(audioTimer);\n    };\n  }, [withAudio, delay, playAudio]);\n\n  return <RippleView $delay={delay} $borderColor={color} />;\n};\n\nexport default Ripple;\n"],"names":["rippleAnimation","keyframes","RippleView","styled","FlexView","$delay","css","Ripple","props","delay","color","withAudio","trackEvent","useUIContext","audioRef","useRef","SOUNDS","playAudio","useCallback","err","useEffect","audioTimer","jsx"],"mappings":";;;;;;AAUA,MAAMA,IAAkBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAelBC,IAAaC,EAAOC,CAAQ;AAAA,EAChC,CAAC,EAAE,QAAAC,EAAa,MAAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUZD,IAAS,KACXC;AAAA,wBACoBN,CAAe;AAAA,yBACdK,KAAU,CAAC;AAAA;AAAA;AAAA;AAAA,KAI/B;AAAA;AAEL,GAQME,IAAsB,CAASC,MAAA;AACnC,QAAM,EAAE,OAAAC,GAAO,OAAAC,GAAO,WAAAC,IAAY,OAASH,GACrC,EAAE,SAASI,EAAW,IAAIC,EAAa,GACvCC,IAAWC,EAAO,IAAI,MAAMC,EAAO,KAAK,CAAC,GAEzCC,IAAYC,EAAY,MAAM;AAC9B,QAAA;AACF,MAAAJ,EAAS,QAAQ;aACVK,GAAK;AACZ,MAAAP,EAAW,aAAa;AAAA,QACtB,MAAM;AAAA,QACN,OAAO,KAAK,UAAUO,CAAG;AAAA,MAAA,CAC1B;AAAA,IACH;AAAA,EAAA,GACC,CAACP,CAAU,CAAC;AAEf,SAAAQ,EAAU,MAAM;AACd,QAAIC,IAAoC;AAExC,WAAIV,MACFU,IAAa,WAAW,MAAM;AAClB,MAAAJ;OACTR,CAAK,IAGH,MAAM;AACP,MAAAY,kBAAyBA,CAAU;AAAA,IAAA;AAAA,EAExC,GAAA,CAACV,GAAWF,GAAOQ,CAAS,CAAC,GAExB,gBAAAK,EAAApB,GAAA,EAAW,QAAQO,GAAO,cAAcC,EAAO,CAAA;AACzD;"}

package/dist/features/talk-meter/talk-meter-styled.js

@@ -0,0 +1,89 @@
+import o, { keyframes as a, css as t } from "styled-components";
+import s from "../../assets/line-icons/icons/cross.js";
+import r from "../ui/layout/flex-view.js";
+const l = a`
+    0% {
+        opacity: 0;
+        transform: translate(0%, -100%) scale(0);
+        height: 0px;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 1;
+        transform: translate(0%, 0%) scale(1);
+        height: 128px;
+    }
+`, c = a`
+    0% {
+        opacity: 1;
+        transform: translate(0%, 0%) scale(1);
+    }
+    100% {
+        opacity: 0;
+        transform: translate(0%, -100%) scale(1);
+        height: 0px;
+    }
+`, y = o(s)`
+  position: absolute;
+  top: 15px;
+  right: 20px;
+  color: black;
+  width: 20px;
+  height: 20px;
+  z-index: 2;
+`, f = o(r)(
+  ({ $isTeacher: n, $animated: i, $canAnimateIn: e, $canAnimateOut: p }) => t`
+    width: 100%;
+    max-width: 336px;
+
+    ${i ? `
+            height: 0;
+            opacity: 0;
+            display: none;
+          ` : `
+            height: 100%;
+            opacity: 1;
+            display: flex;
+          `}
+
+    ${n ? null : `
+            ${i ? `
+                  top: 70px;
+                  right: 10px;
+                  position: fixed;
+                ` : `
+                  top: 0;
+                  right: 0px;
+                  position: relative;
+                `}
+            z-index: 100;
+          `}
+    
+    ${e ? t`
+          animation-name: ${l};
+          animation-duration: 800ms;
+          animation-iteration-count: 1;
+          animation-timing-function: ease-out;
+          opacity: 1;
+          display: flex;
+          height: 128px;
+        ` : null}
+
+    ${p ? t`
+          animation-name: ${c};
+          animation-duration: 400ms;
+          animation-iteration-count: 1;
+          animation-timing-function: ease-out;
+          opacity: 0;
+          display: none;
+          height: 0px;
+        ` : null}
+  `
+);
+export {
+  y as CloseIcon,
+  f as Wrapper
+};
+//# sourceMappingURL=talk-meter-styled.js.map

package/dist/features/talk-meter/talk-meter-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"talk-meter-styled.js","sources":["../../../src/features/talk-meter/talk-meter-styled.tsx"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\n\nimport CrossIcon from '../../assets/line-icons/icons/cross';\nimport FlexView from '../ui/layout/flex-view';\n\nconst scaleInAnim = keyframes`\n    0% {\n        opacity: 0;\n        transform: translate(0%, -100%) scale(0);\n        height: 0px;\n    }\n    50% {\n        opacity: 1;\n    }\n    100% {\n        opacity: 1;\n        transform: translate(0%, 0%) scale(1);\n        height: 128px;\n    }\n`;\n\nconst scaleOutAnim = keyframes`\n    0% {\n        opacity: 1;\n        transform: translate(0%, 0%) scale(1);\n    }\n    100% {\n        opacity: 0;\n        transform: translate(0%, -100%) scale(1);\n        height: 0px;\n    }\n`;\n\nconst CloseIcon = styled(CrossIcon)`\n  position: absolute;\n  top: 15px;\n  right: 20px;\n  color: black;\n  width: 20px;\n  height: 20px;\n  z-index: 2;\n`;\n\nconst Wrapper = styled(FlexView)<{\n  $isTeacher: boolean;\n  $animated: boolean;\n  $canAnimateIn: boolean;\n  $canAnimateOut: boolean;\n}>(\n  ({ $isTeacher, $animated, $canAnimateIn, $canAnimateOut }) => css`\n    width: 100%;\n    max-width: 336px;\n\n    ${$animated\n      ? `\n            height: 0;\n            opacity: 0;\n            display: none;\n          `\n      : `\n            height: 100%;\n            opacity: 1;\n            display: flex;\n          `}\n\n    ${!$isTeacher\n      ? `\n            ${\n              $animated\n                ? `\n                  top: 70px;\n                  right: 10px;\n                  position: fixed;\n                `\n                : `\n                  top: 0;\n                  right: 0px;\n                  position: relative;\n                `\n            }\n            z-index: 100;\n          `\n      : null}\n    \n    ${$canAnimateIn\n      ? css`\n          animation-name: ${scaleInAnim};\n          animation-duration: 800ms;\n          animation-iteration-count: 1;\n          animation-timing-function: ease-out;\n          opacity: 1;\n          display: flex;\n          height: 128px;\n        `\n      : null}\n\n    ${$canAnimateOut\n      ? css`\n          animation-name: ${scaleOutAnim};\n          animation-duration: 400ms;\n          animation-iteration-count: 1;\n          animation-timing-function: ease-out;\n          opacity: 0;\n          display: none;\n          height: 0px;\n        `\n      : null}\n  `,\n);\n\nexport { Wrapper, CloseIcon };\n"],"names":["scaleInAnim","keyframes","scaleOutAnim","CloseIcon","styled","CrossIcon","Wrapper","FlexView","$isTeacher","$animated","$canAnimateIn","$canAnimateOut","css"],"mappings":";;;AAKA,MAAMA,IAAcC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgBdC,IAAeD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYfE,IAAYC,EAAOC,CAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAU5BC,IAAUF,EAAOG,CAAQ;AAAA,EAM7B,CAAC,EAAE,YAAAC,GAAY,WAAAC,GAAW,eAAAC,GAAe,gBAAAC,QAAqBC;AAAA;AAAA;AAAA;AAAA,MAI1DH,IACE;AAAA;AAAA;AAAA;AAAA,cAKA;AAAA;AAAA;AAAA;AAAA,WAIG;AAAA;AAAA,MAEJD,IAiBC,OAhBA;AAAA,cAEMC,IACI;AAAA;AAAA;AAAA;AAAA,oBAKA;AAAA;AAAA;AAAA;AAAA,iBAKN;AAAA;AAAA,WAGA;AAAA;AAAA,MAENC,IACEE;AAAA,4BACoBZ,CAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ/B,IAAI;AAAA;AAAA,MAENW,IACEC;AAAA,4BACoBV,CAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQhC,IAAI;AAAA;AAEZ;"}

package/dist/features/talk-meter/talk-meter-view/talk-meter-view-styled.js

@@ -0,0 +1,22 @@
+import e from "styled-components";
+import i from "../../ui/layout/flex-view.js";
+const p = e(i)`
+  height: 104px;
+  transition: height 300ms ease-in-out;
+  z-index: 1;
+`;
+e.div(
+  ({ $avatarUrl: r }) => `
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: url(${r});
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: relative;
+`
+);
+export {
+  p as MeterWrapper
+};
+//# sourceMappingURL=talk-meter-view-styled.js.map

package/dist/features/talk-meter/talk-meter-view/talk-meter-view-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"talk-meter-view-styled.js","sources":["../../../../src/features/talk-meter/talk-meter-view/talk-meter-view-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\n\nconst MeterWrapper = styled(FlexView)`\n  height: 104px;\n  transition: height 300ms ease-in-out;\n  z-index: 1;\n`;\n\nconst Avatar = styled.div<{ $avatarUrl: string }>(\n  ({ $avatarUrl }) => `\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: url(${$avatarUrl});\n  background-size: cover;\n  background-repeat: no-repeat;\n  position: relative;\n`,\n);\n\nexport { MeterWrapper, Avatar };\n"],"names":["MeterWrapper","styled","FlexView","$avatarUrl"],"mappings":";;AAIM,MAAAA,IAAeC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAMrBD,EAAO;AAAA,EACpB,CAAC,EAAE,YAAAE,EAAA,MAAiB;AAAA;AAAA;AAAA;AAAA,oBAIFA,CAAU;AAAA;AAAA;AAAA;AAAA;AAK9B;"}