@streamlayer/react-ui 1.19.1 → 1.20.0

package/lib/ui/close-btn/index.d.ts

@@ -4,5 +4,7 @@ export declare const CloseButton: React.FC<{
     duration?: number;
     autoClose?: CloseTimerAuto;
     isPlaying?: boolean;
+    skipIcon?: boolean;
     className?: string;
+    timerClassName?: string;
 }>;

package/lib/ui/close-btn/index.js

@@ -1,49 +1,57 @@
-import { jsx as e } from "react/jsx-runtime";
-import { styled as s } from "@linaria/react";
-import { useState as f, useEffect as l, useCallback as a } from "react";
-import { CloseTimerAuto as I } from "@streamlayer/sdk-web-types";
-import { SvgIcon as u } from "../icons/index.js";
-import { SimpleTimer as v } from "../timer/index.js";
-const T = /* @__PURE__ */ s("div")({
+import { jsx as s, jsxs as f } from "react/jsx-runtime";
+import { styled as t } from "@linaria/react";
+import { useState as u, useEffect as I, useCallback as v } from "react";
+import { CloseTimerAuto as x } from "@streamlayer/sdk-web-types";
+import { SvgIcon as T } from "../icons/index.js";
+import { SimpleTimer as d } from "../timer/index.js";
+const g = /* @__PURE__ */ t("div")({
   name: "CloseIconWrap",
   class: "c3v6bv6",
   propsAsIs: !1
-}), g = /* @__PURE__ */ s("div")({
+}), h = /* @__PURE__ */ t("div")({
   name: "TimerWrap",
   class: "teuhmro",
   propsAsIs: !1
-}), x = () => u, A = /* @__PURE__ */ s(x())({
+}), A = () => T, C = /* @__PURE__ */ t(A())({
   name: "Icon",
   class: "i17rfxv5",
   propsAsIs: !0
-}), b = ({
+}), y = ({
   close: r,
-  className: n,
-  isPlaying: c = !0,
-  duration: o = 0,
-  autoClose: t
+  className: i,
+  timerClassName: c,
+  skipIcon: o,
+  isPlaying: p = !0,
+  duration: e = 0,
+  autoClose: m
 }) => {
-  const [i, m] = f(o === 0);
-  l(() => {
-    m(!o);
-  }, [o]);
-  const p = a(() => {
-    t === I.ENABLED ? r == null || r() : m(!0);
-  }, [t, r]);
-  return i ? /* @__PURE__ */ e(T, {
+  const [a, n] = u(e === 0);
+  I(() => {
+    n(!e);
+  }, [e]);
+  const l = v(() => {
+    m === x.ENABLED ? r == null || r() : n(!0);
+  }, [m, r]);
+  return a ? /* @__PURE__ */ f(g, {
     onClick: r,
-    className: n,
-    children: /* @__PURE__ */ e(A, {
-      name: "icon-cross"
-    })
-  }) : /* @__PURE__ */ e(g, {
-    children: /* @__PURE__ */ e(v, {
-      isPlaying: c,
-      duration: o,
-      onTimerExpired: p
+    className: i,
+    style: o ? {
+      width: "auto"
+    } : {},
+    children: [o && /* @__PURE__ */ s("span", {
+      children: "Skip"
+    }), /* @__PURE__ */ s(C, {
+      name: o ? "iconSkip" : "icon-cross"
+    })]
+  }) : /* @__PURE__ */ s(h, {
+    children: /* @__PURE__ */ s(d, {
+      className: c,
+      isPlaying: p,
+      duration: e,
+      onTimerExpired: l
     })
   });
 };
 export {
-  b as CloseButton
+  y as CloseButton
 };

package/lib/ui/gamification/question/inapp/prediction-result/frames/content.js

@@ -1,57 +1,72 @@
-import { jsxs as o, jsx as n } from "react/jsx-runtime";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { styled as s } from "@linaria/react";
-import { SvgIcon as e } from "../../../../../icons/index.js";
-const a = /* @__PURE__ */ s("div")({
+import { useState as r, useCallback as u, useMemo as b } from "react";
+import { SvgIcon as a } from "../../../../../icons/index.js";
+const v = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "cef8huz",
   propsAsIs: !1
-}), p = () => e, d = /* @__PURE__ */ s(p())({
+}), C = () => a, k = /* @__PURE__ */ s(C())({
   name: "CheckIcon",
   class: "c1mo15kk",
   propsAsIs: !0
-}), l = () => e, m = /* @__PURE__ */ s(l())({
+}), y = () => a, A = /* @__PURE__ */ s(y())({
   name: "PredictionIcon",
   class: "p16zkqnm",
   propsAsIs: !0
-}), I = /* @__PURE__ */ s("div")({
+}), x = /* @__PURE__ */ s("div")({
   name: "PredictionIconContainer",
   class: "pjszi7a",
   propsAsIs: !1
-}), f = /* @__PURE__ */ s("div")({
+}), z = /* @__PURE__ */ s("div")({
   name: "BodyContainer",
   class: "bftbmo3",
   propsAsIs: !1
-}), h = /* @__PURE__ */ s("div")({
+}), P = /* @__PURE__ */ s("div")({
   name: "Body",
   class: "barrbyu",
   propsAsIs: !1
-}), C = /* @__PURE__ */ s("div")({
+}), B = /* @__PURE__ */ s("div")({
   name: "Subtitle",
   class: "sz7237i",
   propsAsIs: !1
-}), A = ({
-  step: c,
-  children: i,
-  answer: r,
-  state: t = "pending"
-}) => /* @__PURE__ */ o(a, {
-  children: [/* @__PURE__ */ n(I, {
-    children: /* @__PURE__ */ n(m, {
-      name: "icon-prediction"
-    })
-  }), /* @__PURE__ */ n(f, {
-    children: /* @__PURE__ */ n(h, {
-      children: i
-    }, c)
-  }), /* @__PURE__ */ n(C, {
-    className: t,
-    children: /* @__PURE__ */ o("div", {
-      children: [/* @__PURE__ */ n(d, {
-        name: "icon-check"
-      }), "Your Pick: ", r]
-    })
-  })]
-});
+}), R = ({
+  step: d,
+  children: p,
+  answer: l,
+  state: m = "pending"
+}) => {
+  const [I, f] = r(0), [o] = r(() => new ResizeObserver((n) => {
+    var c, t;
+    f((t = (c = n == null ? void 0 : n[0]) == null ? void 0 : c.contentRect) == null ? void 0 : t.width);
+  })), h = u((n) => {
+    n || o.disconnect(), o.observe(n);
+  }, [o]);
+  return b(() => () => {
+    o.disconnect();
+  }, [o]), /* @__PURE__ */ i(v, {
+    children: [/* @__PURE__ */ e(x, {
+      children: /* @__PURE__ */ e(A, {
+        name: "icon-prediction"
+      })
+    }), /* @__PURE__ */ e(z, {
+      style: {
+        minWidth: `${I}px`
+      },
+      children: /* @__PURE__ */ e(P, {
+        children: p
+      }, d)
+    }), /* @__PURE__ */ e(B, {
+      ref: h,
+      className: m,
+      children: /* @__PURE__ */ i("div", {
+        children: [/* @__PURE__ */ e(k, {
+          name: "icon-check"
+        }), "Your Pick: ", l]
+      })
+    })]
+  });
+};
 export {
-  A as Content
+  R as Content
 };

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

@@ -1,74 +1,74 @@
-import { jsx as i, jsxs as c, Fragment as j } from "react/jsx-runtime";
+import { jsx as i, jsxs as c, Fragment as Y } from "react/jsx-runtime";
 import { QuestionType as l } from "@streamlayer/sdk-web-types";
 import { SvgIcon as m } from "../../../icons/index.js";
-import { ShowInContainer as H, Container as z, FeedbackContainer as h, IconPrediction as L, FeedbackDescription as F, FeedbackIconWrap as k, FeedbackHeader as x, FeedbackText as T, EarlyFeedbackDescription as G, FeedbackDynamicDescription as J, DynamicWrap as K, FeedbackTitle as U, FeedbackTitleWrap as X, FeedbackResultDescription as Z, FeedbackResultDescriptionWrap as _ } from "./styles.js";
+import { ShowInContainer as H, Container as z, FeedbackContainer as t, IconPrediction as j, FeedbackDescription as F, FeedbackIconWrap as u, FeedbackHeader as x, FeedbackText as T, EarlyFeedbackDescription as G, FeedbackDynamicDescription as J, DynamicWrap as K, FeedbackTitle as U, FeedbackTitleWrap as X, FeedbackResultDescription as Z, FeedbackResultDescriptionWrap as _ } from "./styles.js";
 const s = ({
-  feedbackMessages: t,
+  feedbackMessages: h,
   questionVotedCorrectly: R,
-  questionVoted: u,
+  questionVoted: k,
   questionType: d,
   hasCorrectAnswer: r,
   showExpiredNotification: f,
   showClosedNotificationTrivia: O,
   votedInCurrentRender: b,
-  votedAfterQuestionClosed: $,
-  voteErrorMessage: e,
-  enteredAnActiveQuestion: W,
+  votedAfterQuestionClosed: L,
+  voteErrorMessage: n,
+  enteredAnActiveQuestion: $,
   marketClosed: y,
   percentsAnimated: B,
   votedAnswer: I,
-  isEarlyPrediction: n,
+  isEarlyPrediction: e,
   correctAnswer: o
 }) => {
-  const C = u && (d === l.TRIVIA || d === l.PREDICTION), N = d === l.PREDICTION && !r, D = y && d === l.PREDICTION && !u && !W || d === l.PREDICTION && $ && b && W, S = C && N, P = C && r, Q = d === l.PREDICTION && u && b && r, Y = u && d === l.POLL && b, p = R ? "correct" : "incorrect", a = R ? t == null ? void 0 : t.correctFeedback : t == null ? void 0 : t.incorrectFeedback;
-  return f || O || S || P || D || Y || Q || e ? /* @__PURE__ */ i(H, { enabled: b, animate: B, children: /* @__PURE__ */ c(z, { "data-prediction": N, children: [
-    e && !D && /* @__PURE__ */ c(h, { children: [
-      !n && /* @__PURE__ */ i(L, { name: "questionExpired" }),
-      /* @__PURE__ */ i(F, { children: e })
+  const W = k && (d === l.TRIVIA || d === l.PREDICTION), C = d === l.PREDICTION && !r, D = y && d === l.PREDICTION && !k || d === l.PREDICTION && L && b && $, N = W && C, Q = W && r, S = d === l.PREDICTION && k && b && r, P = k && d === l.POLL && b, p = R ? "correct" : "incorrect", a = R ? h == null ? void 0 : h.correctFeedback : h == null ? void 0 : h.incorrectFeedback;
+  return f || O || N || Q || D || P || S || n ? /* @__PURE__ */ i(H, { enabled: b, animate: B, children: /* @__PURE__ */ c(z, { "data-prediction": C, children: [
+    n && !D && /* @__PURE__ */ c(t, { children: [
+      !e && /* @__PURE__ */ i(j, { name: "questionExpired" }),
+      /* @__PURE__ */ i(F, { children: n })
     ] }),
-    !e && f && /* @__PURE__ */ c(h, { children: [
-      !n && /* @__PURE__ */ i(k, { children: /* @__PURE__ */ i(m, { name: "questionExpired" }) }),
+    !n && f && /* @__PURE__ */ c(t, { children: [
+      !e && /* @__PURE__ */ i(u, { children: /* @__PURE__ */ i(m, { name: "questionExpired" }) }),
       /* @__PURE__ */ c("div", { children: [
         /* @__PURE__ */ i(x, { children: /* @__PURE__ */ i(F, { children: "Question Expired" }) }),
         /* @__PURE__ */ i(T, { children: "You can still answer to see if you're correct, but no points are awarded for expired questions." })
       ] })
     ] }),
-    !e && O && /* @__PURE__ */ c(h, { children: [
-      /* @__PURE__ */ i(k, { children: /* @__PURE__ */ i(m, { name: "questionExpired" }) }),
+    !n && O && /* @__PURE__ */ c(t, { children: [
+      /* @__PURE__ */ i(u, { children: /* @__PURE__ */ i(m, { name: "questionExpired" }) }),
       /* @__PURE__ */ c("div", { children: [
         /* @__PURE__ */ i(x, { children: /* @__PURE__ */ i(F, { children: "Question Closed" }) }),
         /* @__PURE__ */ i(T, { children: "This question was answered after the moderator closed the question. So the points for this answer won’t tally." })
       ] })
     ] }),
-    D && /* @__PURE__ */ c(h, { children: [
-      !n && /* @__PURE__ */ i(k, { children: /* @__PURE__ */ i(m, { name: "questionExpired" }) }),
+    D && /* @__PURE__ */ c(t, { children: [
+      !e && /* @__PURE__ */ i(u, { children: /* @__PURE__ */ i(m, { name: "questionExpired" }) }),
       /* @__PURE__ */ c("div", { children: [
-        /* @__PURE__ */ i(x, { children: /* @__PURE__ */ i(F, { children: n ? r ? "The results are already in!" : "Question is Closed" : "Question Closed" }) }),
-        /* @__PURE__ */ i(T, { children: n ? /* @__PURE__ */ i(G, { children: r ? `Correct: ${o == null ? void 0 : o.text}` : "Event affecting the outcome has occurred." }) : "This event has already taken place, so the ability to make a prediction on its outcome is no longer available." })
+        /* @__PURE__ */ i(x, { children: /* @__PURE__ */ i(F, { children: e ? r ? "The results are already in!" : "Question is Closed" : "Question Closed" }) }),
+        /* @__PURE__ */ i(T, { children: e ? /* @__PURE__ */ i(G, { children: r ? `Correct: ${o == null ? void 0 : o.text}` : "Event affecting the outcome has occurred." }) : "This event has already taken place, so the ability to make a prediction on its outcome is no longer available." })
       ] })
     ] }),
-    !e && S && /* @__PURE__ */ c(h, { children: [
-      !n && /* @__PURE__ */ i(L, { name: "icon-prediction" }),
+    !n && N && /* @__PURE__ */ c(t, { children: [
+      !e && /* @__PURE__ */ i(j, { name: "icon-prediction" }),
       /* @__PURE__ */ c(J, { children: [
         "Your pick has been recorded. ",
         /* @__PURE__ */ i(K, { children: "We’ll notify you of the result." })
       ] })
     ] }),
-    !e && Y && /* @__PURE__ */ c(h, { children: [
-      !n && /* @__PURE__ */ i(k, { "data-feedback-type": "correct", children: /* @__PURE__ */ i(m, { name: "correct" }) }),
+    !n && P && /* @__PURE__ */ c(t, { children: [
+      !e && /* @__PURE__ */ i(u, { "data-feedback-type": "correct", children: /* @__PURE__ */ i(m, { name: "correct" }) }),
       /* @__PURE__ */ i(F, { children: "Thanks for answering. Please stay tuned for the next question." })
     ] }),
-    !e && (P || Q) && /* @__PURE__ */ c(h, { children: [
-      !n && /* @__PURE__ */ i(k, { "data-feedback-type": p, children: /* @__PURE__ */ i(m, { name: p }) }),
+    !n && (Q || S) && /* @__PURE__ */ c(t, { children: [
+      !e && /* @__PURE__ */ i(u, { "data-feedback-type": p, children: /* @__PURE__ */ i(m, { name: p }) }),
       /* @__PURE__ */ i("div", { children: /* @__PURE__ */ c(x, { children: [
-        n ? /* @__PURE__ */ i(X, { children: p === "incorrect" ? /* @__PURE__ */ c(j, { children: [
+        e ? /* @__PURE__ */ i(X, { children: p === "incorrect" ? /* @__PURE__ */ c(Y, { children: [
           /* @__PURE__ */ i("div", { children: "So close!" }),
           /* @__PURE__ */ i("div", { children: "Better luck next time" })
-        ] }) : /* @__PURE__ */ c(j, { children: [
+        ] }) : /* @__PURE__ */ c(Y, { children: [
           /* @__PURE__ */ i("div", { children: "That’s correct!" }),
           /* @__PURE__ */ i("div", { children: "You chose wisely." })
         ] }) }) : /* @__PURE__ */ i(U, { "data-feedback-type": p, children: a == null ? void 0 : a.title }),
-        n ? /* @__PURE__ */ c(_, { children: [
+        e ? /* @__PURE__ */ c(_, { children: [
           /* @__PURE__ */ c("div", { children: [
             "Your pick: ",
             I == null ? void 0 : I.text

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

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

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

@@ -41,7 +41,10 @@ export declare const icons: {
     'icon-trophy-bet-pack': any;
     'icon-trivia-transparent': any;
     dashboard: any;
+    iconMute: any;
+    iconUnMute: any;
     correct: any;
+    iconSkip: any;
     incorrect: any;
     questionExpired: any;
     selected: any;