@streamlayer/react-ui 0.67.6 → 0.68.1

package/lib/ui/animated-counter/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { CountUpProps } from 'react-countup';
+export declare const AnimatedCounter: React.FC<Omit<CountUpProps, 'end' | 'start' | 'duration' | 'preserveValue'> & {
+    value?: number;
+}>;

package/lib/ui/animated-counter/index.js

@@ -0,0 +1,9 @@
+import { jsx as s } from "react/jsx-runtime";
+import i from "react-countup";
+const m = ({ value: e = 0, decimals: r, ...n }) => {
+  const [, t] = e.toString().split("."), o = r ?? ((t == null ? void 0 : t.length) || 0);
+  return /* @__PURE__ */ s(i, { end: e, ...n, duration: 1, decimals: o, enableScrollSpy: !1, preserveValue: !0 });
+};
+export {
+  m as AnimatedCounter
+};

package/lib/ui/app/Features/Gamification/Question.js

@@ -16,6 +16,8 @@ import "../../../gamification/vote/feedback/index.js";
 import "../../../gamification/vote/feedback/styles.js";
 import "../../../gamification/vote/styles.js";
 import "../../../gamification/vote/vote-option/index.js";
+import "../../../animated-counter/index.js";
+import "react-countup";
 import "../../../gamification/vote/vote-option/styles.js";
 import "../../../gamification/vote/win-bar/index.js";
 import "../../../timer/index.js";
@@ -54,7 +56,7 @@ const d = /* @__PURE__ */ n("div")({
     close: s,
     openedQuestion: o
   }) : null;
-}, M = ({
+}, P = ({
   gamification: t
 }) => {
   var o;
@@ -76,5 +78,5 @@ const d = /* @__PURE__ */ n("div")({
   });
 };
 export {
-  M as Question
+  P as Question
 };

package/lib/ui/app/Features/Gamification/gamification-feature.js

@@ -26,6 +26,8 @@ import "../../../gamification/vote/feedback/index.js";
 import "../../../gamification/vote/feedback/styles.js";
 import "../../../gamification/vote/styles.js";
 import "../../../gamification/vote/vote-option/index.js";
+import "../../../animated-counter/index.js";
+import "react-countup";
 import "../../../gamification/vote/vote-option/styles.js";
 import "../../../gamification/vote/win-bar/index.js";
 import "../../../timer/index.js";

package/lib/ui/app/Features/Gamification/index.js

@@ -26,6 +26,8 @@ import "../../../gamification/vote/feedback/index.js";
 import "../../../gamification/vote/feedback/styles.js";
 import "../../../gamification/vote/styles.js";
 import "../../../gamification/vote/vote-option/index.js";
+import "../../../animated-counter/index.js";
+import "react-countup";
 import "../../../gamification/vote/vote-option/styles.js";
 import "../../../gamification/vote/win-bar/index.js";
 import "../../../timer/index.js";
@@ -73,7 +75,7 @@ const C = () => h, n = /* @__PURE__ */ s(C())({
 }) => {
   const i = r + t;
   return i === 0 ? 0 : Math.round(r / i * 100);
-}, yr = ({
+}, Dr = ({
   gamification: r,
   className: t
 }) => {
@@ -107,5 +109,5 @@ const C = () => h, n = /* @__PURE__ */ s(C())({
   });
 };
 export {
-  yr as GamificationOverlay
+  Dr as GamificationOverlay
 };

package/lib/ui/gamification/points/index.js

@@ -1,18 +1,19 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { resetCss as r } from "../../theme/theme.js";
-import { formatDecimals as n } from "../../../utils/common.js";
-import { PointsContainer as s, PointsIcon as m, PointsSvg as e, PointsBody as p, PointsTitle as c, PointsValue as l } from "./styles.js";
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { AnimatedCounter as r } from "../../animated-counter/index.js";
+import { resetCss as n } from "../../theme/theme.js";
+import { PointsContainer as e, PointsIcon as s, PointsSvg as m, PointsBody as p, PointsTitle as l, PointsValue as c } from "./styles.js";
+import "react-countup";
 import "../../theme/constants.js";
 import "@linaria/react";
 import "../../icons/index.js";
 import "react";
-const y = ({ points: t }) => /* @__PURE__ */ i(s, { className: r, children: [
-  /* @__PURE__ */ o(m, { children: /* @__PURE__ */ o(e, { name: "icon-trophy" }) }),
-  /* @__PURE__ */ i(p, { children: [
-    /* @__PURE__ */ o(c, { children: "Total points" }),
-    /* @__PURE__ */ o(l, { children: n(t) })
+const v = ({ points: i }) => /* @__PURE__ */ t(e, { className: n, children: [
+  /* @__PURE__ */ o(s, { children: /* @__PURE__ */ o(m, { name: "icon-trophy" }) }),
+  /* @__PURE__ */ t(p, { children: [
+    /* @__PURE__ */ o(l, { children: "Total points" }),
+    /* @__PURE__ */ o(c, { children: /* @__PURE__ */ o(r, { value: i }) })
   ] })
 ] });
 export {
-  y as Points
+  v as Points
 };

package/lib/ui/gamification/vote/index.js

@@ -1,34 +1,36 @@
-import { jsx as i, jsxs as g, Fragment as O } from "react/jsx-runtime";
+import { jsx as a, jsxs as q, Fragment as u } from "react/jsx-runtime";
 import { useState as l, useCallback as C, useMemo as n } from "react";
 import { QuestionType as v } from "@streamlayer/sdk-web-types";
-import { SDKScrollContainer as b } from "../../app/styles.js";
-import { ExpiredAlert as u } from "./expired-alert/index.js";
-import { Feedback as M } from "./feedback/index.js";
-import { Container as j, Content as k, Title as D, Options as P } from "./styles.js";
+import { SDKScrollContainer as O } from "../../app/styles.js";
+import { ExpiredAlert as b } from "./expired-alert/index.js";
+import { Feedback as D } from "./feedback/index.js";
+import { Container as M, Content as P, Title as j, Options as k } from "./styles.js";
 import { VotingOption as F } from "./vote-option/index.js";
 import { WinBar as L } from "./win-bar/index.js";
 import "@linaria/react";
 import "../../icons/index.js";
 import "./expired-alert/styles.js";
 import "./feedback/styles.js";
+import "../../animated-counter/index.js";
+import "react-countup";
 import "./vote-option/styles.js";
 import "../../timer/index.js";
 import "react-countdown-circle-timer";
 import "../../theme/constants.js";
 import "./win-bar/styles.js";
-const it = ({ openedQuestion: t, vote: f, close: p }) => {
-  var q;
-  const E = t.subject, V = t.type, e = (q = t.options) == null ? void 0 : q.options, [s, A] = l(!1), [d, T] = l(!1), [w, h] = l(""), m = t == null ? void 0 : t.id, y = C(
+const st = ({ openedQuestion: t, vote: f, close: p }) => {
+  var g;
+  const E = t.subject, V = t.type, m = (g = t.options) == null ? void 0 : g.options, [s, A] = l(!1), [T, d] = l(!1), [w, y] = l(""), e = t == null ? void 0 : t.id, h = C(
     async (r) => {
-      if (m) {
+      if (e) {
         const c = r.currentTarget.value;
-        h(c), T(!0), await f(m, c), T(!1);
+        y(c), d(!0), await f(e, c), d(!1);
       }
     },
-    [m, h, f]
+    [e, y, f]
   ), I = C(() => {
     A(!0), setTimeout(p, 3e3);
-  }, [p]), a = n(
+  }, [p]), i = n(
     () => t == null ? void 0 : t.answers.find((r) => r.youVoted === !0),
     [t]
   ), o = n(
@@ -38,51 +40,53 @@ const it = ({ openedQuestion: t, vote: f, close: p }) => {
     var c;
     return {
       ...r,
-      questionVoted: !!a,
+      questionVoted: !!i,
       youSelected: w === r.id,
-      isLoading: d,
+      isLoading: T,
       hasCorrectAnswer: o,
       questionType: t.type,
       answerTimeExpired: s,
       questionStatus: t.status,
       imageMode: (c = t.appearance) == null ? void 0 : c.images,
       // ToDo: Figure out why imageMode is not in the response
-      onVote: y
+      onVote: h
     };
-  }) : [], [o, s, d, t, a, y, w]), x = e && (e.case === "trivia" || e.case === "prediction") ? e.value : void 0;
-  return /* @__PURE__ */ i(b, { "data-question-header": "true", children: /* @__PURE__ */ i(j, { children: /* @__PURE__ */ g(k, { children: [
-    x && /* @__PURE__ */ i(
-      M,
+  }) : [], [o, s, T, t, i, h, w]), x = m && (m.case === "trivia" || m.case === "prediction") ? m.value : void 0;
+  return /* @__PURE__ */ a(O, { "data-question-header": "true", children: /* @__PURE__ */ a(M, { children: /* @__PURE__ */ q(P, { children: [
+    x && /* @__PURE__ */ a(
+      D,
       {
         feedbackMessages: x,
-        questionVoted: !!a,
-        questionVotedCorrectly: a == null ? void 0 : a.correct,
+        questionVoted: !!i,
+        questionVotedCorrectly: i == null ? void 0 : i.correct,
         questionType: V,
         hasCorrectAnswer: o,
         questionStatus: t.status
       }
     ),
-    t.type !== v.PREDICTION && /* @__PURE__ */ i(
+    t.type !== v.PREDICTION && /* @__PURE__ */ a(
       L,
       {
         title: s ? "Time expired" : "To win",
         points: s ? void 0 : 100,
         onTimerExpired: I,
-        isTimer: !0
+        isTimer: !0,
+        isPlayingTimer: !i,
+        timerDuration: i ? 0 : 30
       }
     ),
-    s ? /* @__PURE__ */ i(
-      u,
+    s ? /* @__PURE__ */ a(
+      b,
       {
         title: "More to come...",
         description: "Watch for additional enhanced stream interactive experience."
       }
-    ) : /* @__PURE__ */ g(O, { children: [
-      /* @__PURE__ */ i(D, { "data-isPrediction": t.type === v.PREDICTION, children: E }),
-      /* @__PURE__ */ i(P, { children: S.map((r) => /* @__PURE__ */ i(F, { ...r }, r.id)) })
+    ) : /* @__PURE__ */ q(u, { children: [
+      /* @__PURE__ */ a(j, { "data-isPrediction": t.type === v.PREDICTION, children: E }),
+      /* @__PURE__ */ a(k, { children: S.map((r) => /* @__PURE__ */ a(F, { ...r }, r.id)) })
     ] })
   ] }) }) });
 };
 export {
-  it as Vote
+  st as Vote
 };

package/lib/ui/gamification/vote/vote-option/index.js

@@ -1,71 +1,70 @@
-import { jsx as i, jsxs as s } from "react/jsx-runtime";
-import { QuestionImages as a, QuestionStatus as h, QuestionType as o } from "@streamlayer/sdk-web-types";
-import { IconDefault as T, IconContainer as O, IconWrap as P, IconCircle as A, ButtonContainer as x, ButtonPct as L, ButtonBody as B, Title as k, Indicators as Q, CheckIcon as b, Percentage as j } from "./styles.js";
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { QuestionImages as a, QuestionStatus as h, QuestionType as c } from "@streamlayer/sdk-web-types";
+import { AnimatedCounter as T } from "../../../animated-counter/index.js";
+import { IconDefault as O, IconContainer as P, IconWrap as A, IconCircle as x, ButtonContainer as L, ButtonPct as B, ButtonBody as k, Title as Q, Indicators as b, CheckIcon as j, Percentage as U } from "./styles.js";
+import "react-countup";
 import "@linaria/react";
 import "../../../icons/index.js";
 import "react";
 const u = {
-  [a.CENTERED]: (t) => /* @__PURE__ */ i(T, { alt: "option-icon", src: t }),
-  [a.TRANSPARENT]: (t) => /* @__PURE__ */ i(O, { children: /* @__PURE__ */ i(P, { style: { backgroundImage: `url(${t})` } }) }),
-  [a.ROUNDED]: (t) => /* @__PURE__ */ i(A, { alt: "option-icon", src: t }),
+  [a.CENTERED]: (t) => /* @__PURE__ */ r(O, { alt: "option-icon", src: t }),
+  [a.TRANSPARENT]: (t) => /* @__PURE__ */ r(P, { children: /* @__PURE__ */ r(A, { style: { backgroundImage: `url(${t})` } }) }),
+  [a.ROUNDED]: (t) => /* @__PURE__ */ r(x, { alt: "option-icon", src: t }),
   [a.NONE]: () => null,
   [a.UNSET]: () => null
-}, U = ({ questionType: t, hasCorrectAnswer: c, correct: e, youVoted: n, questionVoted: r }) => {
-  if (t === o.POLL && n)
+}, V = ({ questionType: t, hasCorrectAnswer: o, correct: e, youVoted: n, questionVoted: i }) => {
+  if (t === c.POLL && n)
     return "correct";
-  if (t === o.PREDICTION) {
-    if (c && r)
+  if (t === c.PREDICTION) {
+    if (o && i)
       return n ? e ? "correct" : "incorrect" : e ? "correct" : "unset";
     if (n)
       return "correct";
   }
-  return t === o.TRIVIA && r ? n ? e ? "correct" : "incorrect" : e ? "correct" : "unset" : "unset";
-}, V = ({
+  return t === c.TRIVIA && i ? n ? e ? "correct" : "incorrect" : e ? "correct" : "unset" : "unset";
+}, $ = ({
   questionType: t,
-  questionVoted: c,
+  questionVoted: o,
   correct: e,
   hasCorrectAnswer: n,
-  questionStatus: r
-}) => t === o.TRIVIA ? c && e : t === o.PREDICTION ? c && e && n || r === h.RESOLVED && e : !1, F = (t) => {
+  questionStatus: i
+}) => t === c.TRIVIA ? o && e : t === c.PREDICTION ? o && e && n || i === h.RESOLVED && e : !1, J = (t) => {
   var S;
   const {
     // option props
-    id: c,
+    id: o,
     icon: e,
     text: n,
-    percentageDecimal: r,
+    percentageDecimal: i,
     // extra props
-    onVote: C,
-    youSelected: R,
-    questionVoted: l,
+    onVote: p,
+    youSelected: C,
+    questionVoted: s,
     // ToDo: Figure out why imageMode is not in the response, and delete default value
-    imageMode: I,
-    answerTimeExpired: g,
-    questionStatus: d,
-    isLoading: p,
-    questionType: f,
+    imageMode: d,
+    answerTimeExpired: R,
+    questionStatus: f,
+    isLoading: g,
+    questionType: m,
     correct: w,
     hasCorrectAnswer: D
-  } = t, m = U(t), N = V({ questionType: f, questionVoted: l, correct: w, hasCorrectAnswer: D, questionStatus: d }), E = l || d === h.RESOLVED && f === o.PREDICTION;
-  return /* @__PURE__ */ s(
-    x,
+  } = t, I = V(t), N = $({ questionType: m, questionVoted: s, correct: w, hasCorrectAnswer: D, questionStatus: f }), E = s || f === h.RESOLVED && m === c.PREDICTION;
+  return /* @__PURE__ */ l(
+    L,
     {
-      value: c,
-      "data-selected": R,
-      "data-answerState": m,
-      disabled: l || p || g,
-      onClick: C,
+      value: o,
+      "data-selected": C,
+      "data-answerState": I,
+      disabled: s || g || R,
+      onClick: p,
       children: [
-        E && /* @__PURE__ */ i(L, { "data-answerState": m, style: { width: `${r}%` } }),
-        /* @__PURE__ */ s(B, { children: [
-          e && I && ((S = u[I]) == null ? void 0 : S.call(u, e)),
-          /* @__PURE__ */ i(k, { children: n }),
-          E && /* @__PURE__ */ s(Q, { children: [
-            N && /* @__PURE__ */ i(b, { name: "selected" }),
-            /* @__PURE__ */ s(j, { children: [
-              r,
-              "%"
-            ] })
+        E && /* @__PURE__ */ r(B, { "data-answerState": I, style: { width: `${i}%` } }),
+        /* @__PURE__ */ l(k, { children: [
+          e && d && ((S = u[d]) == null ? void 0 : S.call(u, e)),
+          /* @__PURE__ */ r(Q, { children: n }),
+          E && /* @__PURE__ */ l(b, { children: [
+            N && /* @__PURE__ */ r(j, { name: "selected" }),
+            /* @__PURE__ */ r(U, { children: /* @__PURE__ */ r(T, { value: i, suffix: "%" }) })
           ] })
         ] })
       ]
@@ -73,5 +72,5 @@ const u = {
   );
 };
 export {
-  F as VotingOption
+  J as VotingOption
 };

package/lib/ui/gamification/vote/win-bar/index.d.ts

@@ -4,6 +4,7 @@ interface WinBarProps {
     points?: number;
     isPlayingTimer?: boolean;
     isTimer?: boolean;
+    timerDuration?: number;
     onTimerExpired?: () => void;
 }
 export declare const WinBar: React.FC<WinBarProps>;

package/lib/ui/gamification/vote/win-bar/index.js

@@ -1,24 +1,31 @@
-import { jsxs as r, jsx as i, Fragment as c } from "react/jsx-runtime";
+import { jsxs as r, jsx as i, Fragment as d } from "react/jsx-runtime";
 import { Timer as p } from "../../../timer/index.js";
-import { WinBarContainer as d, Content as h, Title as l, WinIcon as s, Points as a, PointsCount as P, PointsUnits as f } from "./styles.js";
+import { WinBarContainer as h, Content as l, Title as s, WinIcon as a, Points as P, PointsCount as f, PointsUnits as u } from "./styles.js";
 import "@linaria/react";
 import "react";
 import "react-countdown-circle-timer";
 import "../../../theme/constants.js";
 import "../../../icons/index.js";
-const B = ({ title: n, points: o, isPlayingTimer: t, isTimer: e, onTimerExpired: m }) => /* @__PURE__ */ r(d, { children: [
-  /* @__PURE__ */ r(h, { children: [
-    n && /* @__PURE__ */ i(l, { children: n }),
-    o !== void 0 && /* @__PURE__ */ r(c, { children: [
-      /* @__PURE__ */ i(s, { name: "icon-trophy" }),
-      /* @__PURE__ */ r(a, { children: [
-        /* @__PURE__ */ i(P, { children: o }),
-        /* @__PURE__ */ i(f, { children: "PTS" })
+const v = ({
+  title: n,
+  points: o,
+  isPlayingTimer: t,
+  isTimer: e,
+  timerDuration: m,
+  onTimerExpired: c
+}) => /* @__PURE__ */ r(h, { children: [
+  /* @__PURE__ */ r(l, { children: [
+    n && /* @__PURE__ */ i(s, { children: n }),
+    o !== void 0 && /* @__PURE__ */ r(d, { children: [
+      /* @__PURE__ */ i(a, { name: "icon-trophy" }),
+      /* @__PURE__ */ r(P, { children: [
+        /* @__PURE__ */ i(f, { children: o }),
+        /* @__PURE__ */ i(u, { children: "PTS" })
       ] })
     ] })
   ] }),
-  e && /* @__PURE__ */ i(p, { isPlaying: t, onTimerExpired: m })
+  e && /* @__PURE__ */ i(p, { isPlaying: t, onTimerExpired: c, duration: m })
 ] });
 export {
-  B as WinBar
+  v as WinBar
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.67.6",
+  "version": "0.68.1",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -35,19 +35,19 @@
     "package.json"
   ],
   "peerDependencies": {
+    "@lottiefiles/react-lottie-player": "*",
     "@streamlayer/sl-eslib": "^5.53.6",
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.9",
-    "@lottiefiles/react-lottie-player": "*",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^0.26.4",
-    "@streamlayer/sdk-web": "^0.28.26",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.11.21",
+    "@streamlayer/feature-gamification": "^0.26.5",
+    "@streamlayer/sdk-web": "^0.28.27",
     "@streamlayer/sdk-web-api": "^0.0.1",
-    "@streamlayer/sdk-web-core": "^0.0.2",
-    "@streamlayer/sdk-web-features": "^0.10.29",
+    "@streamlayer/sdk-web-core": "^0.0.3",
+    "@streamlayer/sdk-web-features": "^0.10.30",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.11.22",
     "@streamlayer/sdk-web-interfaces": "^0.0.1",
-    "@streamlayer/sdk-web-notifications": "^0.13.2",
+    "@streamlayer/sdk-web-notifications": "^0.13.3",
     "@streamlayer/sdk-web-storage": "^0.0.4",
     "@streamlayer/sdk-web-types": "^0.0.1"
   },
@@ -80,6 +80,7 @@
     "react": "18.2.0",
     "react-auth-code-input": "^3.2.1",
     "react-countdown-circle-timer": "^3.2.1",
+    "react-countup": "^6.5.0",
     "react-phone-number-input": "^3.3.7",
     "rollup-plugin-node-polyfills": "^0.2.1",
     "tslib": "^2.6.2",
@@ -88,6 +89,6 @@
     "vite-plugin-svgr": "^4.1.0",
     "vite-svg-loader": "^4.0.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "@streamlayer/react": "^0.30.6"
+    "@streamlayer/react": "^0.31.1"
   }
 }