@cuemath/leap 3.1.36 → 3.1.37-akm-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/features/circle-games/games/tutorial/tutorial-styled.js +7 -2
  2. package/dist/features/circle-games/games/tutorial/tutorial-styled.js.map +1 -1
  3. package/dist/features/circle-games/games/tutorial/tutorial.js +49 -30
  4. package/dist/features/circle-games/games/tutorial/tutorial.js.map +1 -1
  5. package/package.json +1 -1
package/dist/features/circle-games/games/tutorial/tutorial-styled.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import o from "styled-components";
2
- import { HEADER_HEIGHT as t } from "./constants.js";
2
+ import { HEADER_HEIGHT as e } from "./constants.js";
3
3
  const n = o.div`
4
4
  display: flex;
5
5
  flex-direction: column;
@@ -9,7 +9,7 @@ const n = o.div`
9
9
  position: relative;
10
10
  width: inherit;
11
11
  `, d = o.div`
12
- height: ${t}px;
12
+ height: ${e}px;
13
13
  padding-top: ${(window.ReactNativeTopInset || 0) + 24}px;
14
14
  width: 100%;
15
15
  background: ${({ theme: i }) => i.colors.WHITE_T_03};
@@ -59,12 +59,17 @@ const n = o.div`
59
59
  z-index: 2;
60
60
  width: ${({ $width: i }) => i || 0}%;
61
61
  transition: width 0.4s linear;
62
+ `, x = o.div`
63
+ width: 100%;
64
+ padding: 12px 0;
65
+ cursor: pointer;
62
66
  `;
63
67
  export {
64
68
  a as GameTutorialContainer,
65
69
  d as GameTutorialHeader,
66
70
  n as GameTutorialWrapper,
67
71
  s as HeaderIconContainer,
72
+ x as SeekableArea,
68
73
  p as VideoContainer,
69
74
  c as VideoProgress,
70
75
  h as VideoProgressContainer,
package/dist/features/circle-games/games/tutorial/tutorial-styled.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tutorial-styled.js","sources":["../../../../../src/features/circle-games/games/tutorial/tutorial-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { HEADER_HEIGHT } from './constants';\n\nexport const GameTutorialWrapper = styled.div`\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 250px;\n background: ${({ theme }) => theme.colors.BLACK_1};\n position: relative;\n width: inherit;\n`;\n\nexport const GameTutorialHeader = styled.div`\n height: ${HEADER_HEIGHT}px;\n padding-top: ${(window.ReactNativeTopInset || 0) + 24}px;\n width: 100%;\n background: ${({ theme }) => theme.colors.WHITE_T_03};\n backdrop-filter: blur(40px);\n position: relative;\n flex-shrink: 0;\n`;\n\nexport const HeaderIconContainer = styled.div`\n position: absolute;\n right: 16px;\n top: ${(window.ReactNativeTopInset || 0) + 22}px;\n z-index: 1;\n &:hover {\n background: ${({ theme }) => theme.colors.BLACK_4};\n cursor: pointer;\n }\n`;\n\nexport const GameTutorialContainer = styled.div`\n display: flex;\n flex-direction: column;\n /* overflow: hidden; */\n flex-grow: 1;\n position: relative;\n`;\n\nexport const VideoContainer = styled.div`\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n & video {\n height: 100%;\n width: 100%;\n }\n`;\n\nexport const VideoProgressWrapper = styled.div`\n height: 40px;\n width: 100%;\n position: relative;\n display: flex;\n`;\n\nexport const VideoProgressContainer = styled.div`\n height: 2px;\n position: relative;\n width: 100%;\n z-index: 1;\n`;\n\nexport const VideoProgress = styled.div<{ $width: number }>`\n height: inherit;\n background: ${({ theme }) => theme.colors.WHITE};\n position: absolute;\n z-index: 2;\n width: ${({ $width }) => $width || 0}%;\n transition: width 0.4s linear;\n`;\n"],"names":["GameTutorialWrapper","styled","theme","GameTutorialHeader","HEADER_HEIGHT","HeaderIconContainer","GameTutorialContainer","VideoContainer","VideoProgressWrapper","VideoProgressContainer","VideoProgress","$width"],"mappings":";;AAIO,MAAMA,IAAsBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,gBAK1B,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,GAKtCC,IAAqBF,EAAO;AAAA,YAC7BG,CAAa;AAAA,kBACP,OAAO,uBAAuB,KAAK,EAAE;AAAA;AAAA,gBAEvC,CAAC,EAAE,OAAAF,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA,GAMzCG,IAAsBJ,EAAO;AAAA;AAAA;AAAA,UAGhC,OAAO,uBAAuB,KAAK,EAAE;AAAA;AAAA;AAAA,kBAG7B,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,GAKxCI,IAAwBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ/BM,IAAiBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAaxBO,IAAuBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAO9BQ,IAAyBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOhCS,IAAgBT,EAAO;AAAA;AAAA,gBAEpB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA,WAGtC,CAAC,EAAE,QAAAS,QAAaA,KAAU,CAAC;AAAA;AAAA;"}
1
+ {"version":3,"file":"tutorial-styled.js","sources":["../../../../../src/features/circle-games/games/tutorial/tutorial-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { HEADER_HEIGHT } from './constants';\n\nexport const GameTutorialWrapper = styled.div`\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 250px;\n background: ${({ theme }) => theme.colors.BLACK_1};\n position: relative;\n width: inherit;\n`;\n\nexport const GameTutorialHeader = styled.div`\n height: ${HEADER_HEIGHT}px;\n padding-top: ${(window.ReactNativeTopInset || 0) + 24}px;\n width: 100%;\n background: ${({ theme }) => theme.colors.WHITE_T_03};\n backdrop-filter: blur(40px);\n position: relative;\n flex-shrink: 0;\n`;\n\nexport const HeaderIconContainer = styled.div`\n position: absolute;\n right: 16px;\n top: ${(window.ReactNativeTopInset || 0) + 22}px;\n z-index: 1;\n &:hover {\n background: ${({ theme }) => theme.colors.BLACK_4};\n cursor: pointer;\n }\n`;\n\nexport const GameTutorialContainer = styled.div`\n display: flex;\n flex-direction: column;\n /* overflow: hidden; */\n flex-grow: 1;\n position: relative;\n`;\n\nexport const VideoContainer = styled.div`\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n & video {\n height: 100%;\n width: 100%;\n }\n`;\n\nexport const VideoProgressWrapper = styled.div`\n height: 40px;\n width: 100%;\n position: relative;\n display: flex;\n`;\n\nexport const VideoProgressContainer = styled.div`\n height: 2px;\n position: relative;\n width: 100%;\n z-index: 1;\n`;\n\nexport const VideoProgress = styled.div<{ $width: number }>`\n height: inherit;\n background: ${({ theme }) => theme.colors.WHITE};\n position: absolute;\n z-index: 2;\n width: ${({ $width }) => $width || 0}%;\n transition: width 0.4s linear;\n`;\n\nexport const SeekableArea = styled.div`\n width: 100%;\n padding: 12px 0;\n cursor: pointer;\n`;\n"],"names":["GameTutorialWrapper","styled","theme","GameTutorialHeader","HEADER_HEIGHT","HeaderIconContainer","GameTutorialContainer","VideoContainer","VideoProgressWrapper","VideoProgressContainer","VideoProgress","$width","SeekableArea"],"mappings":";;AAIO,MAAMA,IAAsBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,gBAK1B,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,GAKtCC,IAAqBF,EAAO;AAAA,YAC7BG,CAAa;AAAA,kBACP,OAAO,uBAAuB,KAAK,EAAE;AAAA;AAAA,gBAEvC,CAAC,EAAE,OAAAF,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA,GAMzCG,IAAsBJ,EAAO;AAAA;AAAA;AAAA,UAGhC,OAAO,uBAAuB,KAAK,EAAE;AAAA;AAAA;AAAA,kBAG7B,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,GAKxCI,IAAwBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ/BM,IAAiBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAaxBO,IAAuBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAO9BQ,IAAyBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOhCS,IAAgBT,EAAO;AAAA;AAAA,gBAEpB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA,WAGtC,CAAC,EAAE,QAAAS,QAAaA,KAAU,CAAC;AAAA;AAAA,GAIzBC,IAAeX,EAAO;AAAA;AAAA;AAAA;AAAA;"}
package/dist/features/circle-games/games/tutorial/tutorial.js CHANGED
@@ -1,48 +1,67 @@
1
- import { jsxs as c, jsx as e } from "react/jsx-runtime";
2
- import { useState as b, useRef as T, useCallback as I } from "react";
3
- import $ from "../../../../assets/line-icons/icons/cross.js";
4
- import a from "../../../ui/text/text.js";
5
- import { getTheme as x } from "../../../ui/theme/get-theme.js";
6
- import { InfoBar as C } from "../../comps/info-bar/info-bar.js";
7
- import { GameTutorialWrapper as P, GameTutorialHeader as V, HeaderIconContainer as E, GameTutorialContainer as H, VideoContainer as W, VideoProgressWrapper as v, VideoProgressContainer as A, VideoProgress as G } from "./tutorial-styled.js";
8
- const L = ({
9
- src: l,
10
- title: o,
11
- onCross: t,
12
- showProgress: m = !0,
13
- onTutorialPlayedOnce: r,
14
- isJourneyActive: u
1
+ import { jsxs as b, jsx as e } from "react/jsx-runtime";
2
+ import { useRef as m, useState as f, useCallback as P } from "react";
3
+ import R from "../../../../assets/line-icons/icons/cross.js";
4
+ import E from "../../../ui/text/text.js";
5
+ import { getTheme as A } from "../../../ui/theme/get-theme.js";
6
+ import { InfoBar as L } from "../../comps/info-bar/info-bar.js";
7
+ import { GameTutorialWrapper as S, GameTutorialHeader as V, HeaderIconContainer as H, GameTutorialContainer as U, VideoContainer as W, VideoProgressWrapper as G, SeekableArea as j, VideoProgressContainer as B, VideoProgress as X } from "./tutorial-styled.js";
8
+ const Q = ({
9
+ src: I,
10
+ title: c,
11
+ onCross: u,
12
+ showProgress: M = !0,
13
+ onTutorialPlayedOnce: i,
14
+ isJourneyActive: k
15
15
  }) => {
16
- const [i, p] = b(0), n = T(!1), { device: f } = x(), h = f === "mobile" ? "ab3-bold" : "ab2-bold", g = I(
17
- (s) => {
18
- const d = (s.target.currentTime || 0) / (s.target.duration || 1) * 100;
19
- d >= 90 && !n.current && (n.current = !0, r == null || r()), p(d);
16
+ const s = m(null), p = m(!1), g = m(null), [h, a] = f(0), [d, x] = f(0), [w, v] = f(!1), { device: $ } = A(), C = $ === "mobile" ? "ab3-bold" : "ab2-bold", D = P(
17
+ (t) => {
18
+ if (!w) {
19
+ const o = t.target.currentTime || 0, n = t.target.duration || 1, r = o / n * 100;
20
+ r >= 90 && !p.current && (p.current = !0, i == null || i()), a(r), x(n);
21
+ }
20
22
  },
21
- [r]
22
- );
23
- return /* @__PURE__ */ c(P, { children: [
24
- (o || t) && /* @__PURE__ */ c(V, { children: [
25
- o && /* @__PURE__ */ e(a, { $renderAs: "ac3", $color: "WHITE", $align: "center", children: o }),
26
- t && /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e($, { color: "#fff", onClick: t }) })
23
+ [i, w]
24
+ ), T = (t) => {
25
+ const o = g.current;
26
+ if (!o) return 0;
27
+ const n = o.getBoundingClientRect(), r = "clientX" in t ? t.clientX : 0;
28
+ return Math.max(0, Math.min(1, (r - n.left) / n.width));
29
+ };
30
+ return /* @__PURE__ */ b(S, { children: [
31
+ (c || u) && /* @__PURE__ */ b(V, { children: [
32
+ c && /* @__PURE__ */ e(E, { $renderAs: "ac3", $color: "WHITE", $align: "center", children: c }),
33
+ u && /* @__PURE__ */ e(H, { children: /* @__PURE__ */ e(R, { color: "#fff", onClick: u }) })
27
34
  ] }),
28
- u && /* @__PURE__ */ e(C, { hue: "PURPLE", children: /* @__PURE__ */ e(a, { $renderAs: h, $color: "WHITE_T_87", $align: "center", children: "Understanding the rules is always helpful before you begin." }) }),
29
- /* @__PURE__ */ e(H, { children: /* @__PURE__ */ e(W, { children: /* @__PURE__ */ e(
35
+ k && /* @__PURE__ */ e(L, { hue: "PURPLE", children: /* @__PURE__ */ e(E, { $renderAs: C, $color: "WHITE_T_87", $align: "center", children: "Understanding the rules is always helpful before you begin." }) }),
36
+ /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(W, { children: /* @__PURE__ */ e(
30
37
  "video",
31
38
  {
39
+ ref: s,
32
40
  loop: !0,
33
41
  autoPlay: !0,
34
42
  muted: !0,
35
- src: l,
36
- onTimeUpdate: g,
43
+ src: I,
44
+ onTimeUpdate: D,
37
45
  disablePictureInPicture: !0,
38
46
  itemType: "video/mp4",
39
47
  playsInline: !0
40
48
  }
41
49
  ) }) }),
42
- m && /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(A, { children: i > 0 && /* @__PURE__ */ e(G, { $width: i }) }) })
50
+ M && /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(j, { onMouseDown: () => {
51
+ if (!s.current || d === 0) return;
52
+ v(!0);
53
+ const t = (n) => {
54
+ const r = T(n), l = r * d;
55
+ s.current.currentTime = l, a(r * 100);
56
+ }, o = (n) => {
57
+ const r = T(n), l = r * d;
58
+ s.current.currentTime = l, a(r * 100), v(!1), window.removeEventListener("mousemove", t), window.removeEventListener("mouseup", o);
59
+ };
60
+ window.addEventListener("mousemove", t), window.addEventListener("mouseup", o);
61
+ }, ref: g, children: /* @__PURE__ */ e(B, { children: h > 0 && /* @__PURE__ */ e(X, { $width: h }) }) }) })
43
62
  ] });
44
63
  };
45
64
  export {
46
- L as Tutorial
65
+ Q as Tutorial
47
66
  };
48
67
  //# sourceMappingURL=tutorial.js.map
package/dist/features/circle-games/games/tutorial/tutorial.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tutorial.js","sources":["../../../../../src/features/circle-games/games/tutorial/tutorial.tsx"],"sourcesContent":["import type { ITutorialProps } from './tutorial-types';\nimport type { ChangeEvent } from 'react';\n\nimport { useCallback, useRef, useState } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport Text from '../../../ui/text/text';\nimport { getTheme } from '../../../ui/theme/get-theme';\nimport { InfoBar } from '../../comps/info-bar/info-bar';\nimport * as Styled from './tutorial-styled';\n\nexport const Tutorial = ({\n src,\n title,\n onCross,\n showProgress = true,\n onTutorialPlayedOnce,\n isJourneyActive,\n}: ITutorialProps) => {\n const [progress, setProgress] = useState(0);\n const hasVideoEnded = useRef(false);\n\n const { device } = getTheme();\n const tooltipTextRenderAs = device === 'mobile' ? 'ab3-bold' : 'ab2-bold';\n\n const onProgress = useCallback(\n (e: ChangeEvent<HTMLVideoElement>) => {\n const p = ((e.target.currentTime || 0) / (e.target.duration || 1)) * 100;\n\n if (p >= 90 && !hasVideoEnded.current) {\n hasVideoEnded.current = true;\n onTutorialPlayedOnce?.();\n }\n\n setProgress(p);\n },\n [onTutorialPlayedOnce],\n );\n\n return (\n <Styled.GameTutorialWrapper>\n {(title || onCross) && (\n <Styled.GameTutorialHeader>\n {title && (\n <Text $renderAs=\"ac3\" $color=\"WHITE\" $align=\"center\">\n {title}\n </Text>\n )}\n {onCross && (\n <Styled.HeaderIconContainer>\n <CrossIcon color=\"#fff\" onClick={onCross} />\n </Styled.HeaderIconContainer>\n )}\n </Styled.GameTutorialHeader>\n )}\n\n {isJourneyActive && (\n <InfoBar hue=\"PURPLE\">\n <Text $renderAs={tooltipTextRenderAs} $color=\"WHITE_T_87\" $align=\"center\">\n Understanding the rules is always helpful before you begin.\n </Text>\n </InfoBar>\n )}\n <Styled.GameTutorialContainer>\n <Styled.VideoContainer>\n <video\n loop={true}\n autoPlay={true}\n muted={true}\n src={src}\n onTimeUpdate={onProgress}\n disablePictureInPicture={true}\n itemType=\"video/mp4\"\n playsInline\n />\n </Styled.VideoContainer>\n </Styled.GameTutorialContainer>\n\n {showProgress && (\n <Styled.VideoProgressWrapper>\n <Styled.VideoProgressContainer>\n {progress > 0 && <Styled.VideoProgress $width={progress} />}\n </Styled.VideoProgressContainer>\n </Styled.VideoProgressWrapper>\n )}\n </Styled.GameTutorialWrapper>\n );\n};\n"],"names":["Tutorial","src","title","onCross","showProgress","onTutorialPlayedOnce","isJourneyActive","progress","setProgress","useState","hasVideoEnded","useRef","device","getTheme","tooltipTextRenderAs","onProgress","useCallback","e","p","jsxs","Styled.GameTutorialWrapper","Styled.GameTutorialHeader","jsx","Text","Styled.HeaderIconContainer","CrossIcon","InfoBar","Styled.GameTutorialContainer","Styled.VideoContainer","Styled.VideoProgressWrapper","Styled.VideoProgressContainer","Styled.VideoProgress"],"mappings":";;;;;;;AAWO,MAAMA,IAAW,CAAC;AAAA,EACvB,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,sBAAAC;AAAA,EACA,iBAAAC;AACF,MAAsB;AACpB,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,CAAC,GACpCC,IAAgBC,EAAO,EAAK,GAE5B,EAAE,QAAAC,MAAWC,KACbC,IAAsBF,MAAW,WAAW,aAAa,YAEzDG,IAAaC;AAAA,IACjB,CAACC,MAAqC;AAC9B,YAAAC,KAAMD,EAAE,OAAO,eAAe,MAAMA,EAAE,OAAO,YAAY,KAAM;AAErE,MAAIC,KAAK,MAAM,CAACR,EAAc,YAC5BA,EAAc,UAAU,IACDL,KAAA,QAAAA,MAGzBG,EAAYU,CAAC;AAAA,IACf;AAAA,IACA,CAACb,CAAoB;AAAA,EAAA;AAIrB,SAAA,gBAAAc,EAACC,GAAA,EACG,UAAA;AAAA,KAAAlB,KAASC,MACT,gBAAAgB,EAACE,GAAA,EACE,UAAA;AAAA,MACCnB,KAAA,gBAAAoB,EAACC,KAAK,WAAU,OAAM,QAAO,SAAQ,QAAO,UACzC,UACHrB,EAAA,CAAA;AAAA,MAEDC,KACE,gBAAAmB,EAAAE,GAAA,EACC,UAAC,gBAAAF,EAAAG,GAAA,EAAU,OAAM,QAAO,SAAStB,EAAA,CAAS,EAC5C,CAAA;AAAA,IAAA,GAEJ;AAAA,IAGDG,KACC,gBAAAgB,EAACI,GAAQ,EAAA,KAAI,UACX,UAAC,gBAAAJ,EAAAC,GAAA,EAAK,WAAWT,GAAqB,QAAO,cAAa,QAAO,UAAS,wEAE1E,CAAA,GACF;AAAA,sBAEDa,GAAA,EACC,UAAC,gBAAAL,EAAAM,GAAA,EACC,UAAA,gBAAAN;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAArB;AAAA,QACA,cAAcc;AAAA,QACd,yBAAyB;AAAA,QACzB,UAAS;AAAA,QACT,aAAW;AAAA,MAAA;AAAA,OAEf,EACF,CAAA;AAAA,IAECX,KACE,gBAAAkB,EAAAO,GAAA,EACC,UAAA,gBAAAP,EAACQ,GAAA,EACE,UAAWvB,IAAA,uBAAMwB,GAAA,EAAqB,QAAQxB,EAAU,CAAA,EAC3D,CAAA,GACF;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
1
+ {"version":3,"file":"tutorial.js","sources":["../../../../../src/features/circle-games/games/tutorial/tutorial.tsx"],"sourcesContent":["import type { ITutorialProps } from './tutorial-types';\nimport type { ChangeEvent } from 'react';\n\nimport { useCallback, useRef, useState } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport Text from '../../../ui/text/text';\nimport { getTheme } from '../../../ui/theme/get-theme';\nimport { InfoBar } from '../../comps/info-bar/info-bar';\nimport * as Styled from './tutorial-styled';\n\nexport const Tutorial = ({\n src,\n title,\n onCross,\n showProgress = true,\n onTutorialPlayedOnce,\n isJourneyActive,\n}: ITutorialProps) => {\n const videoRef = useRef<HTMLVideoElement | null>(null);\n const hasVideoEnded = useRef(false);\n const seekAreaRef = useRef<HTMLDivElement | null>(null);\n\n const [progress, setProgress] = useState(0);\n const [duration, setDuration] = useState(0);\n const [isDragging, setIsDragging] = useState(false);\n\n const { device } = getTheme();\n const tooltipTextRenderAs = device === 'mobile' ? 'ab3-bold' : 'ab2-bold';\n\n const onProgress = useCallback(\n (e: ChangeEvent<HTMLVideoElement>) => {\n if (!isDragging) {\n const current = e.target.currentTime || 0;\n const dur = e.target.duration || 1;\n const p = (current / dur) * 100;\n\n if (p >= 90 && !hasVideoEnded.current) {\n hasVideoEnded.current = true;\n onTutorialPlayedOnce?.();\n }\n\n setProgress(p);\n setDuration(dur);\n }\n },\n [onTutorialPlayedOnce, isDragging],\n );\n\n const getSeekPercentage = (e: MouseEvent | React.MouseEvent) => {\n const area = seekAreaRef.current;\n\n if (!area) return 0;\n\n const rect = area.getBoundingClientRect();\n const x = 'clientX' in e ? e.clientX : 0;\n\n return Math.max(0, Math.min(1, (x - rect.left) / rect.width));\n };\n\n const onSeekMouseDown = () => {\n if (!videoRef.current || duration === 0) return;\n setIsDragging(true);\n\n const handleMouseMove = (e: MouseEvent) => {\n const percentage = getSeekPercentage(e);\n const newTime = percentage * duration;\n\n videoRef.current!.currentTime = newTime;\n setProgress(percentage * 100);\n };\n\n const handleMouseUp = (e: MouseEvent) => {\n const percentage = getSeekPercentage(e);\n const newTime = percentage * duration;\n\n videoRef.current!.currentTime = newTime;\n setProgress(percentage * 100);\n setIsDragging(false);\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('mouseup', handleMouseUp);\n };\n\n window.addEventListener('mousemove', handleMouseMove);\n window.addEventListener('mouseup', handleMouseUp);\n };\n\n return (\n <Styled.GameTutorialWrapper>\n {(title || onCross) && (\n <Styled.GameTutorialHeader>\n {title && (\n <Text $renderAs=\"ac3\" $color=\"WHITE\" $align=\"center\">\n {title}\n </Text>\n )}\n {onCross && (\n <Styled.HeaderIconContainer>\n <CrossIcon color=\"#fff\" onClick={onCross} />\n </Styled.HeaderIconContainer>\n )}\n </Styled.GameTutorialHeader>\n )}\n\n {isJourneyActive && (\n <InfoBar hue=\"PURPLE\">\n <Text $renderAs={tooltipTextRenderAs} $color=\"WHITE_T_87\" $align=\"center\">\n Understanding the rules is always helpful before you begin.\n </Text>\n </InfoBar>\n )}\n\n <Styled.GameTutorialContainer>\n <Styled.VideoContainer>\n <video\n ref={videoRef}\n loop={true}\n autoPlay={true}\n muted={true}\n src={src}\n onTimeUpdate={onProgress}\n disablePictureInPicture={true}\n itemType=\"video/mp4\"\n playsInline\n />\n </Styled.VideoContainer>\n </Styled.GameTutorialContainer>\n\n {showProgress && (\n <Styled.VideoProgressWrapper>\n <Styled.SeekableArea onMouseDown={onSeekMouseDown} ref={seekAreaRef}>\n <Styled.VideoProgressContainer>\n {progress > 0 && <Styled.VideoProgress $width={progress} />}\n </Styled.VideoProgressContainer>\n </Styled.SeekableArea>\n </Styled.VideoProgressWrapper>\n )}\n </Styled.GameTutorialWrapper>\n );\n};\n"],"names":["Tutorial","src","title","onCross","showProgress","onTutorialPlayedOnce","isJourneyActive","videoRef","useRef","hasVideoEnded","seekAreaRef","progress","setProgress","useState","duration","setDuration","isDragging","setIsDragging","device","getTheme","tooltipTextRenderAs","onProgress","useCallback","e","current","dur","p","getSeekPercentage","area","rect","x","jsxs","Styled.GameTutorialWrapper","Styled.GameTutorialHeader","jsx","Text","Styled.HeaderIconContainer","CrossIcon","InfoBar","Styled.GameTutorialContainer","Styled.VideoContainer","Styled.VideoProgressWrapper","Styled.SeekableArea","handleMouseMove","percentage","newTime","handleMouseUp","Styled.VideoProgressContainer","Styled.VideoProgress"],"mappings":";;;;;;;AAWO,MAAMA,IAAW,CAAC;AAAA,EACvB,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,sBAAAC;AAAA,EACA,iBAAAC;AACF,MAAsB;AACd,QAAAC,IAAWC,EAAgC,IAAI,GAC/CC,IAAgBD,EAAO,EAAK,GAC5BE,IAAcF,EAA8B,IAAI,GAEhD,CAACG,GAAUC,CAAW,IAAIC,EAAS,CAAC,GACpC,CAACC,GAAUC,CAAW,IAAIF,EAAS,CAAC,GACpC,CAACG,GAAYC,CAAa,IAAIJ,EAAS,EAAK,GAE5C,EAAE,QAAAK,MAAWC,KACbC,IAAsBF,MAAW,WAAW,aAAa,YAEzDG,IAAaC;AAAA,IACjB,CAACC,MAAqC;AACpC,UAAI,CAACP,GAAY;AACT,cAAAQ,IAAUD,EAAE,OAAO,eAAe,GAClCE,IAAMF,EAAE,OAAO,YAAY,GAC3BG,IAAKF,IAAUC,IAAO;AAE5B,QAAIC,KAAK,MAAM,CAACjB,EAAc,YAC5BA,EAAc,UAAU,IACDJ,KAAA,QAAAA,MAGzBO,EAAYc,CAAC,GACbX,EAAYU,CAAG;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAACpB,GAAsBW,CAAU;AAAA,EAAA,GAG7BW,IAAoB,CAACJ,MAAqC;AAC9D,UAAMK,IAAOlB,EAAY;AAErB,QAAA,CAACkB,EAAa,QAAA;AAEZ,UAAAC,IAAOD,EAAK,yBACZE,IAAI,aAAaP,IAAIA,EAAE,UAAU;AAEhC,WAAA,KAAK,IAAI,GAAG,KAAK,IAAI,IAAIO,IAAID,EAAK,QAAQA,EAAK,KAAK,CAAC;AAAA,EAAA;AA+B5D,SAAA,gBAAAE,EAACC,GAAA,EACG,UAAA;AAAA,KAAA9B,KAASC,MACT,gBAAA4B,EAACE,GAAA,EACE,UAAA;AAAA,MACC/B,KAAA,gBAAAgC,EAACC,KAAK,WAAU,OAAM,QAAO,SAAQ,QAAO,UACzC,UACHjC,EAAA,CAAA;AAAA,MAEDC,KACE,gBAAA+B,EAAAE,GAAA,EACC,UAAC,gBAAAF,EAAAG,GAAA,EAAU,OAAM,QAAO,SAASlC,EAAA,CAAS,EAC5C,CAAA;AAAA,IAAA,GAEJ;AAAA,IAGDG,KACC,gBAAA4B,EAACI,GAAQ,EAAA,KAAI,UACX,UAAC,gBAAAJ,EAAAC,GAAA,EAAK,WAAWf,GAAqB,QAAO,cAAa,QAAO,UAAS,wEAE1E,CAAA,GACF;AAAA,sBAGDmB,GAAA,EACC,UAAC,gBAAAL,EAAAM,GAAA,EACC,UAAA,gBAAAN;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK3B;AAAA,QACL,MAAM;AAAA,QACN,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAAN;AAAA,QACA,cAAcoB;AAAA,QACd,yBAAyB;AAAA,QACzB,UAAS;AAAA,QACT,aAAW;AAAA,MAAA;AAAA,OAEf,EACF,CAAA;AAAA,IAECjB,KACE,gBAAA8B,EAAAO,GAAA,EACC,UAAC,gBAAAP,EAAAQ,GAAA,EAAoB,aAtEL,MAAM;AAC5B,UAAI,CAACnC,EAAS,WAAWO,MAAa,EAAG;AACzC,MAAAG,EAAc,EAAI;AAEZ,YAAA0B,IAAkB,CAACpB,MAAkB;AACnC,cAAAqB,IAAajB,EAAkBJ,CAAC,GAChCsB,IAAUD,IAAa9B;AAE7B,QAAAP,EAAS,QAAS,cAAcsC,GAChCjC,EAAYgC,IAAa,GAAG;AAAA,MAAA,GAGxBE,IAAgB,CAACvB,MAAkB;AACjC,cAAAqB,IAAajB,EAAkBJ,CAAC,GAChCsB,IAAUD,IAAa9B;AAE7B,QAAAP,EAAS,QAAS,cAAcsC,GAChCjC,EAAYgC,IAAa,GAAG,GAC5B3B,EAAc,EAAK,GACZ,OAAA,oBAAoB,aAAa0B,CAAe,GAChD,OAAA,oBAAoB,WAAWG,CAAa;AAAA,MAAA;AAG9C,aAAA,iBAAiB,aAAaH,CAAe,GAC7C,OAAA,iBAAiB,WAAWG,CAAa;AAAA,IAAA,GA8CS,KAAKpC,GACtD,UAAC,gBAAAwB,EAAAa,GAAA,EACE,UAAWpC,IAAA,KAAM,gBAAAuB,EAAAc,GAAA,EAAqB,QAAQrC,EAAU,CAAA,GAC3D,EAAA,CACF,EACF,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cuemath/leap",
3
- "version": "3.1.36",
3
+ "version": "3.1.37-akm-2",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist"