@streamlayer/react-ui 0.96.2 → 0.97.0

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

@@ -1,15 +1,17 @@
-import { jsx as n, jsxs as k, Fragment as J } from "react/jsx-runtime";
-import { useState as I, useEffect as K, useCallback as R, useMemo as f } from "react";
-import { QuestionType as o, QuestionStatus as E } from "@streamlayer/sdk-web-types";
-import { ExpiredAlert as U } from "./expired-alert/index.js";
-import { Feedback as X } from "./feedback/index.js";
-import { QuestionScrollContainer as Z, Container as _, Content as $, Title as Q, Options as tt } from "./styles.js";
-import { VotingOption as rt } from "./vote-option/index.js";
-import { WinBar as it } from "./win-bar/index.js";
+import { jsx as n, jsxs as B, Fragment as tt } from "react/jsx-runtime";
+import { useState as m, useEffect as g, useCallback as O, useRef as rt, useMemo as l } from "react";
+import { QuestionType as a, QuestionStatus as x } from "@streamlayer/sdk-web-types";
+import { ExpiredAlert as et } from "./expired-alert/index.js";
+import { Feedback as it } from "./feedback/index.js";
+import { QuestionScrollContainer as ot, Container as st, Content as at, Title as nt, Options as ct } from "./styles.js";
+import { VotingOption as mt } from "./vote-option/index.js";
+import { WinBar as lt } from "./win-bar/index.js";
 import "../../icons/index.js";
 import "@linaria/react";
 import "./expired-alert/styles.js";
 import "./feedback/styles.js";
+import "../../show-in/index.js";
+import "@linaria/core";
 import "../../app/styles.js";
 import "../../animated-counter/index.js";
 import "react-countup";
@@ -18,123 +20,132 @@ import "../../timer/index.js";
 import "react-countdown-circle-timer";
 import "../../theme/constants.js";
 import "./win-bar/styles.js";
-const vt = ({ openedQuestion: t, isLoading: C, vote: p, close: v }) => {
-  var P, g;
-  const A = t.subject, a = t.type, m = t.status, V = (P = t.options) == null ? void 0 : P.options, d = t.marketClosed, [O, b] = I(!1), [y, L] = I(!1), [T, w] = I(!0), [c, M] = I(!1), [x, D] = I(""), h = t == null ? void 0 : t.id;
-  K(() => {
-    a === o.PREDICTION ? d && w(!1) : m === E.RESOLVED && w(!1);
+const Nt = ({ openedQuestion: t, isLoading: E, vote: P, close: p }) => {
+  var M, b;
+  const L = t.subject, o = t.type, u = t.status, I = (M = t.options) == null ? void 0 : M.options, h = t.marketClosed, y = t.id, [V, W] = m(!1), [C, Y] = m(!1), [T, q] = m(!0), [c, F] = m(!1), [A, v] = m(""), [w, H] = m(""), [_, D] = m(!1);
+  g(() => {
+    w && D(!0);
+  }, [w]), g(() => {
+    o === a.PREDICTION ? h && q(!1) : u === x.RESOLVED && q(!1);
   }, []);
-  const j = R((e) => {
-    L(e), b(!0);
-  }, []), q = R(
-    async (e) => {
-      if (h) {
-        const u = e.currentTarget.value;
-        D(u), await p(h, u);
+  const z = O((i) => {
+    Y(i), W(!0);
+  }, []), R = rt(!1), S = O(
+    async (i) => {
+      if (!R.current && (R.current = !0, y)) {
+        const d = i.currentTarget.value;
+        v(d);
+        try {
+          await P(y, d);
+        } catch (j) {
+          const Q = j.message === "already_voted" ? "You’ve already answered this question on other device. So the points for this answer won't tally." : "Something went wrong, please try again";
+          H(Q), v(""), console.error("Error while voting", j), R.current = !1;
+        }
       }
     },
-    [h, D, p]
-  ), B = R(() => {
-    M(!0), setTimeout(v, 3e3);
-  }, [v]), r = f(
-    () => t == null ? void 0 : t.answers.find((e) => e.youVoted === !0),
+    [y, v, P]
+  ), G = O(() => {
+    F(!0), setTimeout(p, 3e3);
+  }, [p]), r = l(
+    () => t == null ? void 0 : t.answers.find((i) => i.youVoted === !0),
     [t]
-  ), s = f(
-    () => !!(t != null && t.answers.find((e) => e.correct === !0)),
+  ), s = l(
+    () => !!(t != null && t.answers.find((i) => i.correct === !0)),
     [t]
-  ), i = f(
-    () => t == null ? void 0 : t.answers.find((e) => e.correct === !0),
+  ), e = l(
+    () => t == null ? void 0 : t.answers.find((i) => i.correct === !0),
     [t]
-  ), W = f(() => t ? t.answers.map((e) => {
-    var u;
+  );
+  g(() => {
+    let i;
+    return o === a.PREDICTION && r && V && (i = setTimeout(p, 1e4)), () => {
+      clearTimeout(i);
+    };
+  }, [r]);
+  const J = l(() => t ? t.answers.map((i) => {
+    var d;
     return {
-      ...e,
+      ...i,
       questionVoted: !!r,
-      youSelected: x === e.id,
-      isLoading: C,
+      youSelected: A === i.id,
+      isLoading: E,
       hasCorrectAnswer: s,
       questionType: t.type,
       answerTimeExpired: c,
-      questionStatus: m,
-      imageMode: (u = t.appearance) == null ? void 0 : u.images,
-      onVote: q
+      questionStatus: u,
+      imageMode: (d = t.appearance) == null ? void 0 : d.images,
+      onVote: S
     };
   }) : [], [
     s,
     c,
-    C,
+    E,
     t,
     r,
-    m,
-    q,
-    x
-  ]), F = V && (V.case === "trivia" || V.case === "prediction") ? V.value : void 0, l = m === E.RESOLVED && a === o.TRIVIA && !r && !T, S = a === o.TRIVIA && y && O && T, N = f(() => a === o.PREDICTION ? !!(r && !s || r && s && (i != null && i.youVoted)) : !0, [a, r, s, i]), Y = f(() => {
-    if (a === o.PREDICTION && r && (!s || s && (i != null && i.youVoted)))
+    u,
+    S,
+    A
+  ]), K = I && (I.case === "trivia" || I.case === "prediction") ? I.value : void 0, f = u === x.RESOLVED && o === a.TRIVIA && !r && !T, N = o === a.TRIVIA && C && V && T, k = l(() => o === a.PREDICTION ? !!(r && !s || r && s && (e != null && e.youVoted)) : !0, [o, r, s, e]), U = l(() => {
+    if (o === a.PREDICTION && r && (!s || s && (e != null && e.youVoted)))
       return r.points;
-    if (!(l || c))
-      return m === E.RESOLVED ? 0 : r ? r.correct ? r.points : 0 : i == null ? void 0 : i.points;
-  }, [
-    c,
-    r,
-    i,
-    m,
-    l,
-    a,
-    s
-  ]), H = f(() => a === o.PREDICTION && r ? s ? s && (i != null && i.youVoted) ? "You won" : "" : "To win" : l || c ? "Time expired" : a === o.POLL ? "Time remaining" : r ? "You won" : "To win", [c, a, r, l, s, i]), z = (a === o.TRIVIA || a === o.PREDICTION) && r && s && (i == null ? void 0 : i.youVoted), G = r || l || S || a === o.TRIVIA && m === E.RESOLVED && T;
-  return /* @__PURE__ */ n(Z, { children: /* @__PURE__ */ n(_, { children: /* @__PURE__ */ k($, { children: [
+    if (!(f || c))
+      return r ? r.correct ? r.pointsEarned : 0 : e == null ? void 0 : e.points;
+  }, [c, r, e, f, o, s]), X = l(() => o === a.PREDICTION && r ? s ? s && (e != null && e.youVoted) ? "You won" : "" : "To win" : f || c ? "Time expired" : o === a.POLL ? "Time remaining" : r ? "You won" : "To win", [c, o, r, f, s, e]), Z = (o === a.TRIVIA || o === a.PREDICTION) && r && s && (e == null ? void 0 : e.youVoted), $ = r || f || N || o === a.TRIVIA && u === x.RESOLVED && T;
+  return /* @__PURE__ */ n(ot, { children: /* @__PURE__ */ n(st, { children: /* @__PURE__ */ B(at, { children: [
     /* @__PURE__ */ n(
-      X,
+      it,
       {
-        feedbackMessages: F,
+        feedbackMessages: K,
         questionVoted: !!r,
         questionVotedCorrectly: r == null ? void 0 : r.correct,
-        questionType: a,
+        questionType: o,
         hasCorrectAnswer: s,
-        questionStatus: m,
-        showExpiredNotification: l,
-        showClosedNotificationTrivia: S,
-        votedInCurrentRender: O,
-        votedAfterQuestionClosed: y,
+        showExpiredNotification: f,
+        showClosedNotificationTrivia: N,
+        votedInCurrentRender: V,
+        votedAfterQuestionClosed: C,
         enteredAnActiveQuestion: T,
-        marketClosed: d
+        marketClosed: h,
+        percentsAnimated: _,
+        voteErrorMessage: w
       }
     ),
-    N && /* @__PURE__ */ n(
-      it,
+    k && /* @__PURE__ */ n(
+      lt,
       {
-        title: H,
-        points: Y,
-        onTimerExpired: B,
+        title: X,
+        points: U,
+        onTimerExpired: G,
         questionType: t.type,
-        isTimer: !C,
+        isTimer: !E,
         isPlayingTimer: !r,
-        animatePoints: z,
-        timerDuration: G ? 0 : Number(((g = t == null ? void 0 : t.appearance) == null ? void 0 : g.autoHideInterval) || "30")
+        animatePoints: Z,
+        timerDuration: $ ? 0 : Number(((b = t == null ? void 0 : t.appearance) == null ? void 0 : b.autoHideInterval) || "30")
       }
     ),
     c ? /* @__PURE__ */ n(
-      U,
+      et,
       {
         title: "More to come...",
         description: "Watch for additional enhanced stream interactive experience."
       }
-    ) : /* @__PURE__ */ k(J, { children: [
-      /* @__PURE__ */ n(Q, { style: N ? {} : { marginTop: 0 }, children: A }),
-      /* @__PURE__ */ n(tt, { children: W.map((e) => /* @__PURE__ */ n(
-        rt,
+    ) : /* @__PURE__ */ B(tt, { children: [
+      /* @__PURE__ */ n(nt, { style: k ? {} : { marginTop: 0 }, children: L }),
+      /* @__PURE__ */ n(ct, { children: J.map((i) => /* @__PURE__ */ n(
+        mt,
         {
-          ...e,
-          markThatVoted: j,
-          votedAfterQuestionClosed: y,
+          ...i,
+          markThatVoted: z,
+          onPercentsAnimated: () => D(!0),
+          votedAfterQuestionClosed: C,
           enteredAnActiveQuestion: T,
-          marketClosed: d
+          marketClosed: h
         },
-        e.id
+        i.id
       )) })
     ] })
   ] }) }) });
 };
 export {
-  vt as Vote
+  Nt as Vote
 };

package/lib/ui/gamification/vote/insight-details/index.js

@@ -1,20 +1,21 @@
 import { jsxs as o, jsx as m } from "react/jsx-runtime";
-import { SvgIcon as l } from "../../../icons/index.js";
+import { SvgIcon as p } from "../../../icons/index.js";
 import { InsightContent as b } from "../../../questions/insight/index.js";
 import { Container as k, WebLinkBtn as c } from "./styles.js";
 import "@linaria/react";
 import "react";
 import "@streamlayer/sdk-web-types";
 import "../../../video-player/index.js";
+import "@linaria/core";
 import "../../../video-player/styles.js";
 import "../../../questions/insight/styles.js";
-const C = ({ instantView: r, ...p }) => /* @__PURE__ */ o(k, { children: [
-  /* @__PURE__ */ m(b, { instantView: r, ...p, isDetail: !0 }),
-  (r == null ? void 0 : r.webLink) && /* @__PURE__ */ o(c, { href: r == null ? void 0 : r.webLink.url, target: "_blank", children: [
+const D = ({ instantView: r, ...l }) => /* @__PURE__ */ o(k, { children: [
+  /* @__PURE__ */ m(b, { instantView: r, ...l, isDetail: !0 }),
+  (r == null ? void 0 : r.webLink) && /* @__PURE__ */ o(c, { href: r == null ? void 0 : r.webLink.url, target: "_blank", "data-analytics": "web-link", children: [
     r == null ? void 0 : r.webLink.label,
-    /* @__PURE__ */ m(l, { name: "icon-external-link" })
+    /* @__PURE__ */ m(p, { name: "icon-external-link" })
   ] })
 ] });
 export {
-  C as InsightDetails
+  D as InsightDetails
 };

package/lib/ui/gamification/vote/twitter-details/index.js

@@ -2,6 +2,7 @@ import { jsxs as r, jsx as i } from "react/jsx-runtime";
 import { TwitterContent as o } from "../../../questions/twitter/index.js";
 import { Container as m, Quote as e } from "./styles.js";
 import "../../../video-player/index.js";
+import "@linaria/core";
 import "react";
 import "../../../icons/index.js";
 import "@linaria/react";
@@ -10,10 +11,10 @@ import "../../../questions/twitter/account/index.js";
 import "../../../../utils/common.js";
 import "../../../questions/twitter/account/styles.js";
 import "../../../questions/twitter/styles.js";
-const w = (t) => /* @__PURE__ */ r(m, { children: [
+const C = (t) => /* @__PURE__ */ r(m, { children: [
   t.title && /* @__PURE__ */ i(e, { children: t.title }),
   /* @__PURE__ */ i(o, { ...t, isDetail: !0 })
 ] });
 export {
-  w as TwitterDetails
+  C as TwitterDetails
 };

package/lib/ui/gamification/vote/vote-option/index.d.ts

@@ -12,7 +12,8 @@ export type VotingOptionProps = ExtendedQuestionAnswer & {
     votedAfterQuestionClosed: boolean;
     enteredAnActiveQuestion: boolean;
     marketClosed: boolean;
-    onVote: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onVote: (e: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
     markThatVoted: (votedAfterQuestionClosed: boolean) => void;
+    onPercentsAnimated?: () => void;
 };
 export declare const VotingOption: React.FC<VotingOptionProps>;

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

@@ -1,18 +1,18 @@
 import { jsx as n, jsxs as u } from "react/jsx-runtime";
-import { useState as b, useLayoutEffect as j } from "react";
-import { QuestionImages as a, QuestionType as o, QuestionStatus as S } from "@streamlayer/sdk-web-types";
-import { AnimatedCounter as U } from "../../../animated-counter/index.js";
-import { IconDefault as $, IconContainer as y, IconWrap as F, IconCircle as M, ButtonContainer as W, ButtonPct as z, ButtonBody as G, Title as H, Pts as J, Indicators as K, CheckIcon as X, Percentage as Y } from "./styles.js";
+import { useState as j, useLayoutEffect as U } from "react";
+import { QuestionImages as a, QuestionType as o, QuestionStatus as A } from "@streamlayer/sdk-web-types";
+import { AnimatedCounter as $ } from "../../../animated-counter/index.js";
+import { IconDefault as y, IconContainer as F, IconWrap as M, IconCircle as W, ButtonContainer as z, ButtonPct as G, ButtonBody as H, Title as J, Pts as K, Indicators as X, CheckIcon as Y, Percentage as Z } from "./styles.js";
 import "react-countup";
 import "@linaria/react";
 import "../../../icons/index.js";
 const I = {
-  [a.CENTERED]: (t) => /* @__PURE__ */ n($, { alt: "option-icon", src: t }),
-  [a.TRANSPARENT]: (t) => /* @__PURE__ */ n(y, { children: /* @__PURE__ */ n(F, { style: { backgroundImage: `url(${t})` } }) }),
-  [a.ROUNDED]: (t) => /* @__PURE__ */ n(M, { alt: "option-icon", src: t }),
+  [a.CENTERED]: (t) => /* @__PURE__ */ n(y, { alt: "option-icon", src: t }),
+  [a.TRANSPARENT]: (t) => /* @__PURE__ */ n(F, { children: /* @__PURE__ */ n(M, { style: { backgroundImage: `url(${t})` } }) }),
+  [a.ROUNDED]: (t) => /* @__PURE__ */ n(W, { alt: "option-icon", src: t }),
   [a.NONE]: () => null,
   [a.UNSET]: () => null
-}, Z = ({ questionType: t, hasCorrectAnswer: c, correct: r, youVoted: i, questionVoted: e }) => {
+}, _ = ({ questionType: t, hasCorrectAnswer: c, correct: r, youVoted: i, questionVoted: e }) => {
   if (t === o.POLL && i)
     return "correct";
   if (t === o.PREDICTION) {
@@ -22,66 +22,74 @@ const I = {
       return "correct";
   }
   return t === o.TRIVIA && e && i ? r ? "correct" : "incorrect" : "unset";
-}, _ = ({
+}, q = ({
   questionType: t,
   questionVoted: c,
   correct: r,
   hasCorrectAnswer: i,
   questionStatus: e
-}) => t === o.TRIVIA ? c && r : t === o.PREDICTION ? c && r && i || e === S.RESOLVED && r : !1, st = (t) => {
-  var N;
+}) => t === o.TRIVIA ? c && r : t === o.PREDICTION ? c && r && i || e === A.RESOLVED && r : !1, at = (t) => {
+  var T;
   const {
     // option props
     id: c,
     icon: r,
     text: i,
     percentageDecimal: e,
-    points: T,
+    points: N,
     // extra props
-    onVote: A,
+    onVote: S,
     markThatVoted: D,
-    youSelected: h,
+    onPercentsAnimated: w,
+    youSelected: E,
     questionVoted: s,
-    imageMode: E,
-    answerTimeExpired: w,
+    imageMode: h,
+    answerTimeExpired: O,
     questionStatus: C,
-    isLoading: O,
+    isLoading: g,
     questionType: d,
-    correct: g,
-    hasCorrectAnswer: k,
+    correct: k,
+    hasCorrectAnswer: v,
     votedAfterQuestionClosed: x,
     enteredAnActiveQuestion: P,
     marketClosed: l
-  } = t, [L, p] = b(e), m = Z(t), v = _({ questionType: d, questionVoted: s, correct: g, hasCorrectAnswer: k, questionStatus: C }), f = l && d === o.PREDICTION, R = s || f, Q = d === o.PREDICTION && !s && !l, B = s && !h && m !== "incorrect";
-  return j(() => {
+  } = t, [L, p] = j(e), m = _(t), Q = q({ questionType: d, questionVoted: s, correct: k, hasCorrectAnswer: v, questionStatus: C }), f = l && d === o.PREDICTION, R = s || f, B = d === o.PREDICTION && !s && !l, V = s && !E && m !== "incorrect";
+  return U(() => {
     e > 0 && (p(0), requestAnimationFrame(() => {
       p(e);
     }));
   }, [e]), /* @__PURE__ */ u(
-    W,
+    z,
     {
       value: c,
-      "data-selected": h,
+      "data-selected": E,
       "data-answer-state": m,
-      disabled: s || O || w || f && !P || f && P && x,
-      "data-is-not-checked": B,
-      onClick: (V) => {
+      disabled: s || g || O || f && !P || f && P && x,
+      "data-is-not-checked": V,
+      onClick: (b) => {
         D(
-          d === o.PREDICTION ? l : C === S.RESOLVED
-        ), A(V);
+          d === o.PREDICTION ? l : C === A.RESOLVED
+        ), S(b);
       },
       children: [
-        /* @__PURE__ */ n(z, { "data-answer-state": m, style: { width: `${R ? L : 0}%` } }),
-        /* @__PURE__ */ u(G, { children: [
-          r && E && ((N = I[E]) == null ? void 0 : N.call(I, r)),
-          /* @__PURE__ */ n(H, { children: i }),
-          Q && /* @__PURE__ */ u("div", { children: [
-            T,
-            /* @__PURE__ */ n(J, { children: "pts" })
+        /* @__PURE__ */ n(
+          G,
+          {
+            "data-answer-state": m,
+            style: { width: `${R ? L : 0}%` },
+            onTransitionEnd: w
+          }
+        ),
+        /* @__PURE__ */ u(H, { children: [
+          r && h && ((T = I[h]) == null ? void 0 : T.call(I, r)),
+          /* @__PURE__ */ n(J, { children: i }),
+          B && /* @__PURE__ */ u("div", { children: [
+            N,
+            /* @__PURE__ */ n(K, { children: "pts" })
           ] }),
-          R && /* @__PURE__ */ u(K, { children: [
-            v && /* @__PURE__ */ n(X, { name: "selected" }),
-            /* @__PURE__ */ n(Y, { children: /* @__PURE__ */ n(U, { value: e, suffix: "%" }) })
+          R && /* @__PURE__ */ u(X, { children: [
+            Q && /* @__PURE__ */ n(Y, { name: "selected" }),
+            /* @__PURE__ */ n(Z, { children: /* @__PURE__ */ n($, { value: e, suffix: "%" }) })
           ] })
         ] })
       ]
@@ -89,5 +97,5 @@ const I = {
   );
 };
 export {
-  st as VotingOption
+  at as VotingOption
 };

package/lib/ui/icons/index.d.ts

@@ -11,6 +11,7 @@ export declare const icons: {
     'icon-insight': any;
     'icon-poll': any;
     'icon-play': any;
+    'icon-pause': any;
     'icon-masters-logo': any;
     'icon-logout': any;
     'icon-link': any;
@@ -36,8 +37,6 @@ export declare const icons: {
     'icon-btn-feature-groups': any;
     'icon-btn-leaderboard': any;
     'icon-arrow': any;
-    'icon-facebook': any;
-    'icon-twitter': any;
     'icon-twitter-verified': any;
     correct: any;
     incorrect: any;