@streamlayer/react-ui 0.97.1 → 0.98.0

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

@@ -1,82 +1,73 @@
-import { jsx as i, jsxs as n, Fragment as t } from "react/jsx-runtime";
-import { useRef as C } from "react";
-import { QuestionType as d } from "@streamlayer/sdk-web-types";
-import { SvgIcon as a } from "../../../icons/index.js";
-import { ShowInContainer as E, Container as K, IconPrediction as j, FeedbackDescription as l, FeedbackIconWrap as m, FeedbackHeader as F, FeedbackText as I, DynamicWrap as z, FeedbackTitle as G } from "./styles.js";
+import { jsx as i, jsxs as n, Fragment as e } from "react/jsx-runtime";
+import { QuestionType as r } from "@streamlayer/sdk-web-types";
+import { SvgIcon as h } from "../../../icons/index.js";
+import { ShowInContainer as C, Container as L, IconPrediction as W, FeedbackDescription as l, FeedbackIconWrap as a, FeedbackHeader as F, FeedbackText as k, DynamicWrap as Y, FeedbackTitle as E } from "./styles.js";
 import "@linaria/react";
+import "react";
 import "../../../show-in/index.js";
 import "@linaria/core";
-const V = ({
-  feedbackMessages: r,
-  questionVotedCorrectly: x,
-  questionVoted: p,
-  questionType: e,
-  hasCorrectAnswer: u,
-  showExpiredNotification: w,
-  showClosedNotificationTrivia: P,
-  votedInCurrentRender: o,
-  votedAfterQuestionClosed: H,
+const _ = ({
+  feedbackMessages: t,
+  questionVotedCorrectly: u,
+  questionVoted: m,
+  questionType: d,
+  hasCorrectAnswer: b,
+  showExpiredNotification: x,
+  showClosedNotificationTrivia: I,
+  votedInCurrentRender: p,
+  votedAfterQuestionClosed: f,
   voteErrorMessage: c,
-  enteredAnActiveQuestion: y,
-  marketClosed: L,
-  percentsAnimated: Y
+  enteredAnActiveQuestion: w,
+  marketClosed: Q,
+  percentsAnimated: j
 }) => {
-  var Q;
-  const f = p && (e === d.TRIVIA || e === d.PREDICTION), D = e === d.PREDICTION && !u, O = L && e === d.PREDICTION && !p && !y || e === d.PREDICTION && H && o && y, R = f && D, T = f && u, N = e === d.PREDICTION && p && o && u, S = p && e === d.POLL && o, b = x ? "correct" : "incorrect", h = x ? r == null ? void 0 : r.correctFeedback : r == null ? void 0 : r.incorrectFeedback, s = w || P || R || T || O || S || N || c, W = C(null), B = (Q = W.current) == null ? void 0 : Q.getBoundingClientRect().height, k = o && !Y;
-  return s ? /* @__PURE__ */ i(
-    E,
-    {
-      enabled: o && !k,
-      replayKey: k,
-      style: o ? { height: k ? 0 : B } : {},
-      children: /* @__PURE__ */ n(K, { ref: W, "data-prediction": D, children: [
-        c && /* @__PURE__ */ n(t, { children: [
-          /* @__PURE__ */ i(j, { name: "questionExpired" }),
-          /* @__PURE__ */ i(l, { children: c })
-        ] }),
-        !c && w && /* @__PURE__ */ n(t, { children: [
-          /* @__PURE__ */ i(m, { children: /* @__PURE__ */ i(a, { name: "questionExpired" }) }),
-          /* @__PURE__ */ n("div", { children: [
-            /* @__PURE__ */ i(F, { children: /* @__PURE__ */ i(l, { children: "Question Expired" }) }),
-            /* @__PURE__ */ i(I, { children: "You can still answer to see if you're correct, but no points are awarded for expired questions." })
-          ] })
-        ] }),
-        !c && P && /* @__PURE__ */ n(t, { children: [
-          /* @__PURE__ */ i(m, { children: /* @__PURE__ */ i(a, { name: "questionExpired" }) }),
-          /* @__PURE__ */ n("div", { children: [
-            /* @__PURE__ */ i(F, { children: /* @__PURE__ */ i(l, { children: "Question Closed" }) }),
-            /* @__PURE__ */ i(I, { children: "This question was answered after the moderator closed the question. So the points for this answer won’t tally." })
-          ] })
-        ] }),
-        !c && O && /* @__PURE__ */ n(t, { children: [
-          /* @__PURE__ */ i(m, { children: /* @__PURE__ */ i(a, { name: "questionExpired" }) }),
-          /* @__PURE__ */ n("div", { children: [
-            /* @__PURE__ */ i(F, { children: /* @__PURE__ */ i(l, { children: "Question Closed" }) }),
-            /* @__PURE__ */ i(I, { children: "This event has already taken place, so the ability to make a prediction on its outcome is no longer available." })
-          ] })
-        ] }),
-        !c && R && /* @__PURE__ */ n(t, { children: [
-          /* @__PURE__ */ i(j, { name: "icon-prediction" }),
-          /* @__PURE__ */ n(l, { children: [
-            "Your pick has been recorded. ",
-            /* @__PURE__ */ i(z, { children: "We’ll notify you of the result." })
-          ] })
-        ] }),
-        !c && S && /* @__PURE__ */ n(t, { children: [
-          /* @__PURE__ */ i(m, { "data-feedback-type": "correct", children: /* @__PURE__ */ i(a, { name: "correct" }) }),
-          /* @__PURE__ */ i(l, { children: "Thanks for answering. Please stay tuned for the next question." })
-        ] }),
-        !c && (T || N) && !P && /* @__PURE__ */ n(t, { children: [
-          /* @__PURE__ */ i(m, { "data-feedback-type": b, children: /* @__PURE__ */ i(a, { name: b }) }),
-          /* @__PURE__ */ i("div", { children: /* @__PURE__ */ n(F, { children: [
-            /* @__PURE__ */ i(G, { "data-feedback-type": b, children: h == null ? void 0 : h.title }),
-            /* @__PURE__ */ i(l, { children: h == null ? void 0 : h.description })
-          ] }) })
-        ] })
+  const D = m && (d === r.TRIVIA || d === r.PREDICTION), y = d === r.PREDICTION && !b, O = Q && d === r.PREDICTION && !m && !w || d === r.PREDICTION && f && p && w, R = D && y, T = D && b, N = d === r.PREDICTION && m && p && b, S = m && d === r.POLL && p, P = u ? "correct" : "incorrect", o = u ? t == null ? void 0 : t.correctFeedback : t == null ? void 0 : t.incorrectFeedback;
+  return x || I || R || T || O || S || N || c ? /* @__PURE__ */ i(C, { enabled: p, animate: j, children: /* @__PURE__ */ n(L, { "data-prediction": y, children: [
+    c && /* @__PURE__ */ n(e, { children: [
+      /* @__PURE__ */ i(W, { name: "questionExpired" }),
+      /* @__PURE__ */ i(l, { children: c })
+    ] }),
+    !c && x && /* @__PURE__ */ n(e, { children: [
+      /* @__PURE__ */ i(a, { children: /* @__PURE__ */ i(h, { name: "questionExpired" }) }),
+      /* @__PURE__ */ n("div", { children: [
+        /* @__PURE__ */ i(F, { children: /* @__PURE__ */ i(l, { children: "Question Expired" }) }),
+        /* @__PURE__ */ i(k, { children: "You can still answer to see if you're correct, but no points are awarded for expired questions." })
       ] })
-    }
-  ) : null;
+    ] }),
+    !c && I && /* @__PURE__ */ n(e, { children: [
+      /* @__PURE__ */ i(a, { children: /* @__PURE__ */ i(h, { name: "questionExpired" }) }),
+      /* @__PURE__ */ n("div", { children: [
+        /* @__PURE__ */ i(F, { children: /* @__PURE__ */ i(l, { children: "Question Closed" }) }),
+        /* @__PURE__ */ i(k, { children: "This question was answered after the moderator closed the question. So the points for this answer won’t tally." })
+      ] })
+    ] }),
+    !c && O && /* @__PURE__ */ n(e, { children: [
+      /* @__PURE__ */ i(a, { children: /* @__PURE__ */ i(h, { name: "questionExpired" }) }),
+      /* @__PURE__ */ n("div", { children: [
+        /* @__PURE__ */ i(F, { children: /* @__PURE__ */ i(l, { children: "Question Closed" }) }),
+        /* @__PURE__ */ i(k, { children: "This event has already taken place, so the ability to make a prediction on its outcome is no longer available." })
+      ] })
+    ] }),
+    !c && R && /* @__PURE__ */ n(e, { children: [
+      /* @__PURE__ */ i(W, { name: "icon-prediction" }),
+      /* @__PURE__ */ n(l, { children: [
+        "Your pick has been recorded. ",
+        /* @__PURE__ */ i(Y, { children: "We’ll notify you of the result." })
+      ] })
+    ] }),
+    !c && S && /* @__PURE__ */ n(e, { children: [
+      /* @__PURE__ */ i(a, { "data-feedback-type": "correct", children: /* @__PURE__ */ i(h, { name: "correct" }) }),
+      /* @__PURE__ */ i(l, { children: "Thanks for answering. Please stay tuned for the next question." })
+    ] }),
+    !c && (T || N) && !I && /* @__PURE__ */ n(e, { children: [
+      /* @__PURE__ */ i(a, { "data-feedback-type": P, children: /* @__PURE__ */ i(h, { name: P }) }),
+      /* @__PURE__ */ i("div", { children: /* @__PURE__ */ n(F, { children: [
+        /* @__PURE__ */ i(E, { "data-feedback-type": P, children: o == null ? void 0 : o.title }),
+        /* @__PURE__ */ i(l, { children: o == null ? void 0 : o.description })
+      ] }) })
+    ] })
+  ] }) }) : null;
 };
 export {
-  V as Feedback
+  _ as Feedback
 };

package/lib/ui/gamification/vote/feedback/styles.js

@@ -1,6 +1,6 @@
 import { styled as s } from "@linaria/react";
 import { SvgIcon as e } from "../../../icons/index.js";
-import { ShowIn as a } from "../../../show-in/index.js";
+import { GrowingShowIn as a } from "../../../show-in/index.js";
 import "react/jsx-runtime";
 import "react";
 import "@linaria/core";

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

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

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

@@ -1,4 +1,4 @@
-import { jsx as n, jsxs as u } from "react/jsx-runtime";
+import { jsx as e, jsxs as u } from "react/jsx-runtime";
 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";
@@ -7,35 +7,35 @@ import "react-countup";
 import "@linaria/react";
 import "../../../icons/index.js";
 const I = {
-  [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.CENTERED]: (t) => /* @__PURE__ */ e(y, { alt: "option-icon", src: t }),
+  [a.TRANSPARENT]: (t) => /* @__PURE__ */ e(F, { children: /* @__PURE__ */ e(M, { style: { backgroundImage: `url(${t})` } }) }),
+  [a.ROUNDED]: (t) => /* @__PURE__ */ e(W, { alt: "option-icon", src: t }),
   [a.NONE]: () => null,
   [a.UNSET]: () => null
-}, _ = ({ questionType: t, hasCorrectAnswer: c, correct: r, youVoted: i, questionVoted: e }) => {
-  if (t === o.POLL && i)
+}, _ = ({ questionType: t, hasCorrectAnswer: c, correct: n, youVoted: r, questionVoted: i }) => {
+  if (t === o.POLL && r)
     return "correct";
   if (t === o.PREDICTION) {
-    if (c && e)
-      return i ? r ? "correct" : "incorrect" : "unset";
-    if (i)
+    if (c && i)
+      return r ? n ? "correct" : "incorrect" : "unset";
+    if (r)
       return "correct";
   }
-  return t === o.TRIVIA && e && i ? r ? "correct" : "incorrect" : "unset";
+  return t === o.TRIVIA && i && r ? n ? "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 === A.RESOLVED && r : !1, at = (t) => {
+  correct: n,
+  hasCorrectAnswer: r,
+  questionStatus: i
+}) => t === o.TRIVIA ? c && n : t === o.PREDICTION ? c && n && r || i === A.RESOLVED && n : !1, at = (t) => {
   var T;
   const {
     // option props
     id: c,
-    icon: r,
-    text: i,
-    percentageDecimal: e,
+    icon: n,
+    text: r,
+    percentageDecimal: i,
     points: N,
     // extra props
     onVote: S,
@@ -53,12 +53,12 @@ const I = {
     votedAfterQuestionClosed: x,
     enteredAnActiveQuestion: P,
     marketClosed: l
-  } = 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";
+  } = t, [L, p] = j(0), 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(
+    p(0), requestAnimationFrame(() => {
+      p(i);
+    });
+  }, [i]), /* @__PURE__ */ u(
     z,
     {
       value: c,
@@ -72,7 +72,7 @@ const I = {
         ), S(b);
       },
       children: [
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ e(
           G,
           {
             "data-answer-state": m,
@@ -81,15 +81,15 @@ const I = {
           }
         ),
         /* @__PURE__ */ u(H, { children: [
-          r && h && ((T = I[h]) == null ? void 0 : T.call(I, r)),
-          /* @__PURE__ */ n(J, { children: i }),
+          n && h && ((T = I[h]) == null ? void 0 : T.call(I, n)),
+          /* @__PURE__ */ e(J, { children: r }),
           B && /* @__PURE__ */ u("div", { children: [
             N,
-            /* @__PURE__ */ n(K, { children: "pts" })
+            /* @__PURE__ */ e(K, { children: "pts" })
           ] }),
           R && /* @__PURE__ */ u(X, { children: [
-            Q && /* @__PURE__ */ n(Y, { name: "selected" }),
-            /* @__PURE__ */ n(Z, { children: /* @__PURE__ */ n($, { value: e, suffix: "%" }) })
+            Q && /* @__PURE__ */ e(Y, { name: "selected" }),
+            /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e($, { value: i, suffix: "%" }) })
           ] })
         ] })
       ]

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

@@ -8,6 +8,8 @@ interface WinBarProps {
     animatePoints?: boolean;
     questionType?: QuestionType;
     timerDuration?: number;
+    votedInCurrentRender: boolean;
+    percentsAnimated: boolean;
     onTimerExpired?: () => void;
 }
 export declare const WinBar: React.FC<WinBarProps>;

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

@@ -1,36 +1,55 @@
-import { jsxs as i, jsx as r, Fragment as p } from "react/jsx-runtime";
-import { QuestionType as o } from "@streamlayer/sdk-web-types";
-import { AnimatedCounter as s } from "../../../animated-counter/index.js";
-import { Timer as h } from "../../../timer/index.js";
-import { WinBarContainer as P, Content as C, Title as f, WinIcon as u, Points as I, PointsCount as y, PointsUnits as T } from "./styles.js";
+import { jsx as r, jsxs as n, Fragment as C } from "react/jsx-runtime";
+import { QuestionType as t } from "@streamlayer/sdk-web-types";
+import { AnimatedCounter as P } from "../../../animated-counter/index.js";
+import { Timer as s } from "../../../timer/index.js";
+import { ShowInContainer as I, WinBarContainer as f, Content as u, Title as O, WinIcon as T, Points as j, PointsCount as x, PointsUnits as y } from "./styles.js";
 import "react-countup";
 import "@linaria/react";
 import "react";
 import "react-countdown-circle-timer";
 import "../../../theme/constants.js";
 import "../../../icons/index.js";
-const R = ({
+import "../../../show-in/index.js";
+import "@linaria/core";
+const F = ({
   title: e,
-  points: n,
+  points: o,
   isPlayingTimer: m,
-  isTimer: c,
-  animatePoints: a,
-  questionType: t,
+  isTimer: a,
+  animatePoints: c,
+  questionType: i,
   timerDuration: d,
-  onTimerExpired: l
-}) => /* @__PURE__ */ i(P, { style: { justifyContent: t === o.PREDICTION ? "center" : "space-between" }, children: [
-  /* @__PURE__ */ i(C, { children: [
-    e && /* @__PURE__ */ r(f, { children: e }),
-    n !== void 0 && t !== o.POLL && /* @__PURE__ */ i(p, { children: [
-      /* @__PURE__ */ r(u, { name: "icon-trophy" }),
-      /* @__PURE__ */ i(I, { children: [
-        /* @__PURE__ */ r(y, { children: a ? /* @__PURE__ */ r(s, { value: n, delay: 0.3 }) : n }),
-        /* @__PURE__ */ r(T, { children: "PTS" })
-      ] })
-    ] })
-  ] }),
-  c && t !== o.PREDICTION && /* @__PURE__ */ r(h, { isPlaying: m, onTimerExpired: l, duration: d })
-] });
+  votedInCurrentRender: l,
+  percentsAnimated: p,
+  onTimerExpired: h
+}) => /* @__PURE__ */ r(
+  I,
+  {
+    enabled: i === t.PREDICTION && l,
+    animate: p,
+    children: /* @__PURE__ */ n(
+      f,
+      {
+        style: {
+          justifyContent: i === t.PREDICTION ? "center" : "space-between"
+        },
+        children: [
+          /* @__PURE__ */ n(u, { children: [
+            e && /* @__PURE__ */ r(O, { children: e }),
+            o !== void 0 && i !== t.POLL && /* @__PURE__ */ n(C, { children: [
+              /* @__PURE__ */ r(T, { name: "icon-trophy" }),
+              /* @__PURE__ */ n(j, { children: [
+                /* @__PURE__ */ r(x, { children: c ? /* @__PURE__ */ r(P, { value: o, delay: 0.3 }) : o }),
+                /* @__PURE__ */ r(y, { children: "PTS" })
+              ] })
+            ] })
+          ] }),
+          a && i !== t.PREDICTION && /* @__PURE__ */ r(s, { isPlaying: m, onTimerExpired: h, duration: d })
+        ]
+      }
+    )
+  }
+);
 export {
-  R as WinBar
+  F as WinBar
 };

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+export declare const ShowInContainer: any;
 export declare const WinBarContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Content: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Title: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;