@streamlayer/react-ui 0.96.2 → 0.96.3

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

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

package/lib/ui/gamification/vote/feedback/styles.d.ts

@@ -6,3 +6,4 @@ export declare const FeedbackHeader: import("@linaria/react").StyledComponent<im
 export declare const FeedbackTitle: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
 export declare const FeedbackDescription: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
 export declare const FeedbackText: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const DynamicWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;

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

@@ -22,21 +22,26 @@ const r = /* @__PURE__ */ s("div")({
   name: "FeedbackTitle",
   class: "f1913njx",
   propsAsIs: !1
-}), f = /* @__PURE__ */ s("span")({
+}), m = /* @__PURE__ */ s("span")({
   name: "FeedbackDescription",
   class: "fzfk69z",
   propsAsIs: !1
-}), m = /* @__PURE__ */ s("div")({
+}), f = /* @__PURE__ */ s("div")({
   name: "FeedbackText",
   class: "fx87qaj",
   propsAsIs: !1
+}), I = /* @__PURE__ */ s("span")({
+  name: "DynamicWrap",
+  class: "dvek9ew",
+  propsAsIs: !1
 });
 export {
   r as Container,
-  f as FeedbackDescription,
+  I as DynamicWrap,
+  m as FeedbackDescription,
   d as FeedbackHeader,
   i as FeedbackIconWrap,
-  m as FeedbackText,
+  f as FeedbackText,
   l as FeedbackTitle,
   t as IconPrediction
 };

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

@@ -1,6 +1,6 @@
-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 { jsx as n, jsxs as k, Fragment as K } from "react/jsx-runtime";
+import { useState as I, useEffect as A, useCallback as O, useMemo as f } from "react";
+import { QuestionType as s, QuestionStatus as V } 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";
@@ -18,41 +18,48 @@ 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 Ot = ({ openedQuestion: t, isLoading: C, vote: v, close: d }) => {
+  var S, g;
+  const b = t.subject, a = t.type, m = t.status, E = (S = t.options) == null ? void 0 : S.options, y = t.marketClosed, [R, L] = I(!1), [h, M] = I(!1), [T, w] = I(!0), [c, j] = I(!1), [x, D] = I(""), p = t == null ? void 0 : t.id;
+  A(() => {
+    a === s.PREDICTION ? y && w(!1) : m === V.RESOLVED && w(!1);
   }, []);
-  const j = R((e) => {
-    L(e), b(!0);
-  }, []), q = R(
+  const B = O((e) => {
+    M(e), L(!0);
+  }, []), q = O(
     async (e) => {
-      if (h) {
+      if (p) {
         const u = e.currentTarget.value;
-        D(u), await p(h, u);
+        D(u), await v(p, u);
       }
     },
-    [h, D, p]
-  ), B = R(() => {
-    M(!0), setTimeout(v, 3e3);
-  }, [v]), r = f(
+    [p, D, v]
+  ), W = O(() => {
+    j(!0), setTimeout(d, 3e3);
+  }, [d]), r = f(
     () => t == null ? void 0 : t.answers.find((e) => e.youVoted === !0),
     [t]
-  ), s = f(
+  ), o = f(
     () => !!(t != null && t.answers.find((e) => e.correct === !0)),
     [t]
   ), i = f(
     () => t == null ? void 0 : t.answers.find((e) => e.correct === !0),
     [t]
-  ), W = f(() => t ? t.answers.map((e) => {
+  );
+  A(() => {
+    let e;
+    return a === s.PREDICTION && r && R && (e = setTimeout(d, 1e4)), () => {
+      clearTimeout(e);
+    };
+  }, [r]);
+  const F = f(() => t ? t.answers.map((e) => {
     var u;
     return {
       ...e,
       questionVoted: !!r,
       youSelected: x === e.id,
       isLoading: C,
-      hasCorrectAnswer: s,
+      hasCorrectAnswer: o,
       questionType: t.type,
       answerTimeExpired: c,
       questionStatus: m,
@@ -60,7 +67,7 @@ const vt = ({ openedQuestion: t, isLoading: C, vote: p, close: v }) => {
       onVote: q
     };
   }) : [], [
-    s,
+    o,
     c,
     C,
     t,
@@ -68,11 +75,11 @@ const vt = ({ openedQuestion: t, isLoading: C, vote: p, close: v }) => {
     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)))
+  ]), Y = E && (E.case === "trivia" || E.case === "prediction") ? E.value : void 0, l = m === V.RESOLVED && a === s.TRIVIA && !r && !T, N = a === s.TRIVIA && h && R && T, P = f(() => a === s.PREDICTION ? !!(r && !o || r && o && (i != null && i.youVoted)) : !0, [a, r, o, i]), H = f(() => {
+    if (a === s.PREDICTION && r && (!o || o && (i != null && i.youVoted)))
       return r.points;
     if (!(l || c))
-      return m === E.RESOLVED ? 0 : r ? r.correct ? r.points : 0 : i == null ? void 0 : i.points;
+      return m === V.RESOLVED ? 0 : r ? r.correct ? r.points : 0 : i == null ? void 0 : i.points;
   }, [
     c,
     r,
@@ -80,37 +87,37 @@ const vt = ({ openedQuestion: t, isLoading: C, vote: p, close: v }) => {
     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;
+    o
+  ]), z = f(() => a === s.PREDICTION && r ? o ? o && (i != null && i.youVoted) ? "You won" : "" : "To win" : l || c ? "Time expired" : a === s.POLL ? "Time remaining" : r ? "You won" : "To win", [c, a, r, l, o, i]), G = (a === s.TRIVIA || a === s.PREDICTION) && r && o && (i == null ? void 0 : i.youVoted), J = r || l || N || a === s.TRIVIA && m === V.RESOLVED && T;
   return /* @__PURE__ */ n(Z, { children: /* @__PURE__ */ n(_, { children: /* @__PURE__ */ k($, { children: [
     /* @__PURE__ */ n(
       X,
       {
-        feedbackMessages: F,
+        feedbackMessages: Y,
         questionVoted: !!r,
         questionVotedCorrectly: r == null ? void 0 : r.correct,
         questionType: a,
-        hasCorrectAnswer: s,
+        hasCorrectAnswer: o,
         questionStatus: m,
         showExpiredNotification: l,
-        showClosedNotificationTrivia: S,
-        votedInCurrentRender: O,
-        votedAfterQuestionClosed: y,
+        showClosedNotificationTrivia: N,
+        votedInCurrentRender: R,
+        votedAfterQuestionClosed: h,
         enteredAnActiveQuestion: T,
-        marketClosed: d
+        marketClosed: y
       }
     ),
-    N && /* @__PURE__ */ n(
+    P && /* @__PURE__ */ n(
       it,
       {
-        title: H,
-        points: Y,
-        onTimerExpired: B,
+        title: z,
+        points: H,
+        onTimerExpired: W,
         questionType: t.type,
         isTimer: !C,
         isPlayingTimer: !r,
-        animatePoints: z,
-        timerDuration: G ? 0 : Number(((g = t == null ? void 0 : t.appearance) == null ? void 0 : g.autoHideInterval) || "30")
+        animatePoints: G,
+        timerDuration: J ? 0 : Number(((g = t == null ? void 0 : t.appearance) == null ? void 0 : g.autoHideInterval) || "30")
       }
     ),
     c ? /* @__PURE__ */ n(
@@ -119,16 +126,16 @@ const vt = ({ openedQuestion: t, isLoading: C, vote: p, close: v }) => {
         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(
+    ) : /* @__PURE__ */ k(K, { children: [
+      /* @__PURE__ */ n(Q, { style: P ? {} : { marginTop: 0 }, children: b }),
+      /* @__PURE__ */ n(tt, { children: F.map((e) => /* @__PURE__ */ n(
         rt,
         {
           ...e,
-          markThatVoted: j,
-          votedAfterQuestionClosed: y,
+          markThatVoted: B,
+          votedAfterQuestionClosed: h,
           enteredAnActiveQuestion: T,
-          marketClosed: d
+          marketClosed: y
         },
         e.id
       )) })
@@ -136,5 +143,5 @@ const vt = ({ openedQuestion: t, isLoading: C, vote: p, close: v }) => {
   ] }) }) });
 };
 export {
-  vt as Vote
+  Ot as Vote
 };