@streamlayer/react-ui 1.23.0 → 1.23.2

package/lib/app/masters/Points/index.js

@@ -1,25 +1,33 @@
 import { jsx as n } from "react/jsx-runtime";
-import { useState as m, useEffect as f } from "react";
-import { useStore as c } from "@streamlayer/react-polyfills";
-import { FeatureType as p } from "@streamlayer/sdk-web-types";
-import { Points as S } from "../../../ui/gamification/points/index.js";
-const a = ({ gamification: r }) => {
-  const o = r.userSummary.$store, [t, u] = m(0);
-  return f(() => {
-    const i = o.subscribe((e) => {
+import { useState as c, useEffect as a, useCallback as f } from "react";
+import { useStore as p } from "@streamlayer/react-polyfills";
+import { eventBus as l } from "@streamlayer/sdk-web-interfaces";
+import { FeatureType as S } from "@streamlayer/sdk-web-types";
+import { Points as y } from "../../../ui/gamification/points/index.js";
+const P = ({ gamification: t }) => {
+  const o = t.userSummary.$store, [r, i] = c(0);
+  a(() => {
+    const u = o.subscribe((e) => {
       var s;
-      (s = e == null ? void 0 : e.summary) != null && s.points && u(e.summary.points);
+      (s = e == null ? void 0 : e.summary) != null && s.points && i(e.summary.points);
     });
     return () => {
-      i();
+      u();
     };
-  }, [o]), /* @__PURE__ */ n(S, { points: t });
-}, b = ({ sdk: r }) => {
-  if (!c(r.featuresList.getStore()))
+  }, [o]);
+  const m = f(() => {
+    l.emit("interactions", {
+      action: "tap",
+      payload: {}
+    });
+  }, []);
+  return /* @__PURE__ */ n(y, { onClick: m, points: r });
+}, x = ({ sdk: t }) => {
+  if (!p(t.featuresList.getStore()))
     return null;
-  const t = r.getFeature(p.GAMES);
-  return t ? /* @__PURE__ */ n(a, { gamification: t }) : null;
+  const r = t.getFeature(S.GAMES);
+  return r ? /* @__PURE__ */ n(P, { gamification: r }) : null;
 };
 export {
-  b as StreamLayerSDKPoints
+  x as StreamLayerSDKPoints
 };

package/lib/ui/gamification/question/notification/insight/index.js

@@ -1,14 +1,14 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { QuestionImages as e } from "@streamlayer/sdk-web-types";
-import { VideoPlayer as h } from "../../../../video-player/index.js";
-import { InsightContainer as o, ImageContainer as u, Image as p, InsightContent as I, Title as g, Description as f, ActionBtn as C } from "./styles.js";
-const V = ({ video: r, image: n, imageMode: c, heading: l, body: m, action: s, controlVideo: a }) => /* @__PURE__ */ i(o, { children: [
-  (r == null ? void 0 : r.url) && /* @__PURE__ */ t(h, { source: r.url, poster: r.thumbnailUrl, controlVideo: a }),
-  n && !(r != null && r.url) && /* @__PURE__ */ t(u, { "data-rounded": c === e.ROUNDED, children: /* @__PURE__ */ t(p, { src: n, alt: l }) }),
-  /* @__PURE__ */ i(I, { children: [
-    /* @__PURE__ */ t(g, { children: l }),
-    /* @__PURE__ */ t(f, { children: m }),
-    s && /* @__PURE__ */ t(C, { "data-a": "intr", onClick: s, children: "View Insight" })
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { QuestionImages as h } from "@streamlayer/sdk-web-types";
+import { VideoPlayer as o } from "../../../../video-player/index.js";
+import { InsightContainer as u, ImageContainer as a, Image as p, InsightContent as I, Title as g, Description as f, ActionBtn as C } from "./styles.js";
+const V = ({ video: r, image: t, imageMode: i, heading: l, body: m, action: s, controlVideo: e }) => /* @__PURE__ */ c(u, { children: [
+  (r == null ? void 0 : r.url) && /* @__PURE__ */ n(o, { source: r.url, poster: r.thumbnailUrl, controlVideo: e }),
+  t && !(r != null && r.url) && /* @__PURE__ */ n(a, { "data-rounded": i === h.ROUNDED, children: /* @__PURE__ */ n(p, { src: t, alt: l }) }),
+  /* @__PURE__ */ c(I, { children: [
+    /* @__PURE__ */ n(g, { children: l }),
+    /* @__PURE__ */ n(f, { children: m }),
+    s && /* @__PURE__ */ n(C, { onClick: s, children: "View Insight" })
   ] })
 ] });
 export {

package/lib/ui/gamification/question/notification/pill/index.js

@@ -1,9 +1,9 @@
-import { jsx as r, jsxs as e } from "react/jsx-runtime";
-import { SvgIcon as m } from "../../../../icons/index.js";
-import { Container as c, Content as a, Title as l } from "./styles.js";
-const f = ({ title: n, onClick: o, className: i, style: t }) => /* @__PURE__ */ r(c, { "data-a": "intr", onClick: o, className: i, style: t, children: /* @__PURE__ */ e(a, { children: [
-  /* @__PURE__ */ r(m, { name: "iconUp" }),
-  n && /* @__PURE__ */ r(l, { children: n })
+import { jsx as r, jsxs as o } from "react/jsx-runtime";
+import { SvgIcon as e } from "../../../../icons/index.js";
+import { Container as d, Content as m, Title as c } from "./styles.js";
+const f = ({ title: n, onClick: t, className: a, style: i }) => /* @__PURE__ */ r(d, { "data-a": "intr", onClick: t, className: a, style: i, children: /* @__PURE__ */ o(m, { "data-a": "intr", children: [
+  /* @__PURE__ */ r(e, { "data-a": "intr", name: "iconUp" }),
+  n && /* @__PURE__ */ r(c, { "data-a": "intr", children: n })
 ] }) });
 export {
   f as Pill

package/lib/ui/gamification/question/notification/tweet/index.js

@@ -1,11 +1,11 @@
 import { jsxs as r, jsx as t } from "react/jsx-runtime";
 import { TwitterContent as n } from "../../../../questions/twitter/index.js";
 import { Container as o, QuoteWrap as l, Quote as c, ActionBtn as m } from "./styles.js";
-const f = ({ action: i, ...e }) => /* @__PURE__ */ r(o, { children: [
+const s = ({ action: i, ...e }) => /* @__PURE__ */ r(o, { children: [
   e.title && /* @__PURE__ */ t(l, { children: /* @__PURE__ */ t(c, { children: e.title }) }),
   /* @__PURE__ */ t(n, { ...e }),
-  i && /* @__PURE__ */ t(m, { "data-a": "intr", onClick: i, children: "View Insight" })
+  i && /* @__PURE__ */ t(m, { onClick: i, children: "View Insight" })
 ] });
 export {
-  f as Tweet
+  s as Tweet
 };

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

@@ -1,6 +1,6 @@
-import { jsx as r, jsxs as m, Fragment as S } from "react/jsx-runtime";
+import { jsx as r, jsxs as f, Fragment as S } from "react/jsx-runtime";
 import { useHideTransition as It } from "../../../hooks/showIn.js";
-import { useRef as X, useState as l, useEffect as p, useCallback as v, useMemo as g } from "react";
+import { useRef as X, useState as m, useEffect as p, useCallback as v, useMemo as g } from "react";
 import { QuestionType as c, QuestionStatus as L } from "@streamlayer/sdk-web-types";
 import { Skeleton as M } from "../../skeleton/index.js";
 import { Alert as Ct } from "./alert/index.js";
@@ -8,20 +8,20 @@ import { Feedback as Z } from "./feedback/index.js";
 import { Container as $, Content as Q, Options as tt, QuestionScrollContainer as Vt, TopShadow as pt, AlertContainer as vt, EarlyPrediction as wt, EarlyPredictionIcon as At, Title as yt, OptionsWrap as Rt, BottomShadow as Et, SponsorLogo as Ot, SponsorIcon as St } from "./styles.js";
 import { VotingOption as xt } from "./vote-option/index.js";
 import { WinBar as qt } from "./win-bar/index.js";
-const Dt = (e, f) => {
+const Dt = (e, u) => {
   switch (e) {
     case "already_voted":
-      return f === c.POLL ? "You’ve already answered this question on another device." : "You’ve already answered this question on another device. So the points for this answer won't tally.";
+      return u === c.POLL ? "You’ve already answered this question on another device." : "You’ve already answered this question on another device. So the points for this answer won't tally.";
     default:
       return "Something went wrong, please try again";
   }
-}, Ht = () => /* @__PURE__ */ r($, { children: /* @__PURE__ */ m(Q, { children: [
+}, Ht = () => /* @__PURE__ */ r($, { children: /* @__PURE__ */ f(Q, { children: [
   /* @__PURE__ */ r(M, { loading: !0, style: { height: "40px", borderRadius: "100px" } }),
   /* @__PURE__ */ r(M, { loading: !0, style: { height: "24px", margin: "16px 0" } }),
-  /* @__PURE__ */ r(tt, { children: Array.from({ length: 5 }).map((e, f) => /* @__PURE__ */ r(M, { loading: !0, style: { height: "44px" } }, f)) })
-] }) }), Ft = ({ openedQuestion: e, isLoading: f, vote: W, close: B, isEarlyPrediction: i }) => {
+  /* @__PURE__ */ r(tt, { children: Array.from({ length: 5 }).map((e, u) => /* @__PURE__ */ r(M, { loading: !0, style: { height: "44px" } }, u)) })
+] }) }), Ft = ({ openedQuestion: e, isLoading: u, vote: W, close: B, isEarlyPrediction: i }) => {
   var K, U;
-  const et = e.subject, n = e.type, I = e.status, w = (K = e.options) == null ? void 0 : K.options, T = e.marketClosed, x = e.id, P = X(), [C, Y] = l(!1), [A, rt] = l(!1), [V, j] = l(!0), [u, nt] = l(!1), [H, ot] = l(!1), [F, q] = l(""), [y, st] = l(""), [R, _] = l(!1), [it, at] = l(!1), { runAnimation: E, finished: z } = It();
+  const et = e.subject, n = e.type, I = e.status, w = (K = e.options) == null ? void 0 : K.options, T = e.marketClosed, x = e.id, P = X(), [C, Y] = m(!1), [A, rt] = m(!1), [V, j] = m(!0), [d, nt] = m(!1), [H, ot] = m(!1), [F, q] = m(""), [y, st] = m(""), [R, _] = m(!1), [it, at] = m(!1), { runAnimation: E, finished: z } = It();
   p(() => {
     z && B();
   }, [B, z]), p(() => {
@@ -34,10 +34,10 @@ const Dt = (e, f) => {
   }, [i]), D = X(!1), G = v(
     async (s) => {
       if (!D.current && (D.current = !0, x)) {
-        const h = s.currentTarget.value;
-        q(h);
+        const l = s.currentTarget.value;
+        q(l);
         try {
-          await W(x, h);
+          await W(x, l);
         } catch (O) {
           st(Dt(O.message, n)), q(""), console.error("Error while voting", O), D.current = !1;
         }
@@ -61,23 +61,23 @@ const Dt = (e, f) => {
     clearTimeout(P.current);
   }, []);
   const k = g(() => e ? e.answers.map((s) => {
-    var h;
+    var l;
     return {
       ...s,
       questionVoted: !!t,
       youSelected: F === s.id,
-      isLoading: f,
+      isLoading: u,
       hasCorrectAnswer: a,
       questionType: e.type,
-      answerTimeExpired: u,
+      answerTimeExpired: d,
       questionStatus: I,
-      imageMode: (h = e.appearance) == null ? void 0 : h.images,
+      imageMode: (l = e.appearance) == null ? void 0 : l.images,
       onVote: G
     };
   }) : [], [
     a,
+    d,
     u,
-    f,
     e,
     t,
     I,
@@ -85,18 +85,18 @@ const Dt = (e, f) => {
     F
   ]);
   p(() => {
-    const s = k.some(({ percentageDecimal: O }) => O !== 0), h = t && n === c.PREDICTION;
-    y && (i || !s || T && h) && _(!0);
+    const s = k.some(({ percentageDecimal: O }) => O !== 0), l = t && n === c.PREDICTION;
+    y && (i || !s || T && l) && _(!0);
   }, [k, y, i, T, n, t]);
-  const J = w && (w.case === "trivia" || w.case === "prediction") ? w.value : void 0, d = I === L.RESOLVED && n === c.TRIVIA && !t && !V, N = n === c.TRIVIA && A, b = g(() => n === c.PREDICTION ? i ? !1 : !!(t && !a || t && a && (o != null && o.youVoted)) : !0, [n, t, a, o, i]), ut = g(() => {
+  const J = w && (w.case === "trivia" || w.case === "prediction") ? w.value : void 0, h = I === L.RESOLVED && n === c.TRIVIA && !t && !V, N = n === c.TRIVIA && A, b = g(() => n === c.PREDICTION ? i ? !1 : !!(t && !a || t && a && (o != null && o.youVoted)) : !0, [n, t, a, o, i]), ut = g(() => {
     if (n === c.PREDICTION && t && (!a || a && (o != null && o.youVoted)))
       return t.points;
-    if (!(d || u))
+    if (!(h || d))
       return t ? t.correct ? t.pointsEarned : 0 : o == null ? void 0 : o.points;
-  }, [u, t, o, d, n, a]), dt = g(() => n === c.PREDICTION && t ? a ? a && (o != null && o.youVoted) ? "You won" : "" : "To win" : d || u ? "Time expired" : n === c.POLL ? "Time remaining" : t ? "You won" : "To win", [u, n, t, d, a, o]), ht = !b || b && n === c.PREDICTION && C && !R, Tt = (n === c.TRIVIA || n === c.PREDICTION) && t && a && (o == null ? void 0 : o.youVoted), gt = t || d || N || n === c.TRIVIA && I === L.RESOLVED && V;
-  return /* @__PURE__ */ m(Vt, { children: [
+  }, [d, t, o, h, n, a]), dt = g(() => n === c.PREDICTION && t ? a ? a && (o != null && o.youVoted) ? "You won" : "" : "To win" : h || d ? "Time expired" : n === c.POLL ? "Time remaining" : t ? "You won" : "To win", [d, n, t, h, a, o]), ht = !b || b && n === c.PREDICTION && C && !R, Tt = (n === c.TRIVIA || n === c.PREDICTION) && t && a && (o == null ? void 0 : o.youVoted), gt = t || h || N || n === c.TRIVIA && I === L.RESOLVED && V;
+  return /* @__PURE__ */ f(Vt, { children: [
     i && /* @__PURE__ */ r(pt, {}),
-    /* @__PURE__ */ r($, { style: i ? { marginTop: "-40px" } : {}, children: /* @__PURE__ */ m(Q, { children: [
+    /* @__PURE__ */ r($, { style: i ? { marginTop: "-40px" } : {}, children: /* @__PURE__ */ f(Q, { children: [
       !i && /* @__PURE__ */ r(
         Z,
         {
@@ -105,7 +105,7 @@ const Dt = (e, f) => {
           questionVotedCorrectly: t == null ? void 0 : t.correct,
           questionType: n,
           hasCorrectAnswer: a,
-          showExpiredNotification: d,
+          showExpiredNotification: h,
           showClosedNotificationTrivia: N,
           votedInCurrentRender: C,
           votedAfterQuestionClosed: A,
@@ -123,7 +123,7 @@ const Dt = (e, f) => {
           points: ut,
           onTimerExpired: mt,
           questionType: e.type,
-          isTimer: !f,
+          isTimer: !u,
           isPlayingTimer: !t,
           animatePoints: Tt,
           timerDuration: gt ? 0 : Number(((U = e == null ? void 0 : e.appearance) == null ? void 0 : U.autoHideInterval) || "30"),
@@ -131,23 +131,23 @@ const Dt = (e, f) => {
           percentsAnimated: R
         }
       ),
-      !i && (u || H) ? /* @__PURE__ */ r(vt, { children: /* @__PURE__ */ r(
+      !i && (d || H) ? /* @__PURE__ */ r(vt, { children: /* @__PURE__ */ r(
         Ct,
         {
           icon: "icon-check-circle",
           title: "More to come...",
-          description: H ? /* @__PURE__ */ m(S, { children: [
+          description: H ? /* @__PURE__ */ f(S, { children: [
             "Stay tuned for more questions ",
             /* @__PURE__ */ r("br", {}),
             " and insights."
-          ] }) : /* @__PURE__ */ m(S, { children: [
+          ] }) : /* @__PURE__ */ f(S, { children: [
             "Watch for additional enhanced stream ",
             /* @__PURE__ */ r("br", {}),
             " interactive experience."
           ] })
         }
-      ) }) : /* @__PURE__ */ m(S, { children: [
-        i && /* @__PURE__ */ m(wt, { children: [
+      ) }) : /* @__PURE__ */ f(S, { children: [
+        i && /* @__PURE__ */ f(wt, { children: [
           /* @__PURE__ */ r(At, { name: "iconEarlyPrediction" }),
           "EARLY PREDICTION"
         ] }),
@@ -160,7 +160,7 @@ const Dt = (e, f) => {
             questionVotedCorrectly: t == null ? void 0 : t.correct,
             questionType: n,
             hasCorrectAnswer: a,
-            showExpiredNotification: d,
+            showExpiredNotification: h,
             showClosedNotificationTrivia: N,
             votedInCurrentRender: C,
             votedAfterQuestionClosed: A,
@@ -174,8 +174,8 @@ const Dt = (e, f) => {
             onAnimationEnd: lt
           }
         ),
-        /* @__PURE__ */ m(Rt, { children: [
-          /* @__PURE__ */ r(tt, { children: k.map((s) => /* @__PURE__ */ r(
+        /* @__PURE__ */ f(Rt, { children: [
+          /* @__PURE__ */ r(tt, { children: k.sort((s, l) => s.id > l.id ? 1 : -1).map((s) => /* @__PURE__ */ r(
             xt,
             {
               ...s,
@@ -188,7 +188,7 @@ const Dt = (e, f) => {
             },
             s.id
           )) }),
-          i && /* @__PURE__ */ m(S, { children: [
+          i && /* @__PURE__ */ f(S, { children: [
             /* @__PURE__ */ r(Et, {}),
             /* @__PURE__ */ r(Ot, { children: /* @__PURE__ */ r(St, { name: "mastersLogoWhite" }) })
           ] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "1.23.0",
+  "version": "1.23.2",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -69,19 +69,19 @@
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
     "uuid": "^11.1.0",
-    "@streamlayer/feature-gamification": "^1.16.9",
-    "@streamlayer/react-polyfills": "^0.1.16",
-    "@streamlayer/sdk-web": "^1.10.9",
-    "@streamlayer/sdk-web-analytics": "^1.7.9",
-    "@streamlayer/sdk-web-anonymous-auth": "^1.1.35",
-    "@streamlayer/sdk-web-api": "^1.8.9",
-    "@streamlayer/sdk-web-core": "^1.11.11",
-    "@streamlayer/sdk-web-features": "^1.0.56",
-    "@streamlayer/sdk-web-interfaces": "^1.5.0",
-    "@streamlayer/sdk-web-logger": "^1.0.56",
-    "@streamlayer/sdk-web-notifications": "^1.3.18",
-    "@streamlayer/sdk-web-storage": "^1.0.56",
-    "@streamlayer/sdk-web-types": "^1.10.13"
+    "@streamlayer/feature-gamification": "^1.16.11",
+    "@streamlayer/react-polyfills": "^0.1.18",
+    "@streamlayer/sdk-web": "^1.10.11",
+    "@streamlayer/sdk-web-anonymous-auth": "^1.1.37",
+    "@streamlayer/sdk-web-analytics": "^1.7.11",
+    "@streamlayer/sdk-web-core": "^1.11.13",
+    "@streamlayer/sdk-web-api": "^1.8.11",
+    "@streamlayer/sdk-web-features": "^1.0.58",
+    "@streamlayer/sdk-web-interfaces": "^1.5.2",
+    "@streamlayer/sdk-web-logger": "^1.0.58",
+    "@streamlayer/sdk-web-storage": "^1.0.58",
+    "@streamlayer/sdk-web-notifications": "^1.3.20",
+    "@streamlayer/sdk-web-types": "^1.10.15"
   },
   "nx": {
     "implicitDependencies": [
@@ -121,7 +121,7 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@streamlayer/react": "^1.15.0"
+    "@streamlayer/react": "^1.15.2"
   },
   "dependencies": {
     "@dailymotion/vast-client": "^6.2.0",