@streamlayer/react-ui 0.75.1 → 0.76.1

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

@@ -1,12 +1,12 @@
-import { jsx as a, jsxs as C, Fragment as u } from "react/jsx-runtime";
-import { useState as S, useCallback as V, useMemo as m } from "react";
-import { QuestionStatus as M, QuestionType as y } from "@streamlayer/sdk-web-types";
-import { SDKScrollContainer as j } from "../../app/styles.js";
-import { ExpiredAlert as k } from "./expired-alert/index.js";
-import { Feedback as N } from "./feedback/index.js";
-import { Container as R, Content as B, Title as F, Options as W } from "./styles.js";
-import { VotingOption as H } from "./vote-option/index.js";
-import { WinBar as K } from "./win-bar/index.js";
+import { jsx as a, jsxs as I, Fragment as F } from "react/jsx-runtime";
+import { useState as m, useEffect as L, useCallback as y, useMemo as c } from "react";
+import { QuestionStatus as S, QuestionType as w } from "@streamlayer/sdk-web-types";
+import { SDKScrollContainer as W } from "../../app/styles.js";
+import { ExpiredAlert as H } from "./expired-alert/index.js";
+import { Feedback as K } from "./feedback/index.js";
+import { Container as Y, Content as z, Title as G, Options as J } from "./styles.js";
+import { VotingOption as U } from "./vote-option/index.js";
+import { WinBar as X } from "./win-bar/index.js";
 import "@linaria/react";
 import "../../icons/index.js";
 import "./expired-alert/styles.js";
@@ -18,84 +18,101 @@ import "../../timer/index.js";
 import "react-countdown-circle-timer";
 import "../../theme/constants.js";
 import "./win-bar/styles.js";
-const er = ({ openedQuestion: r, isLoading: f, vote: w, close: h }) => {
-  var n, v;
-  const I = r.subject, O = r.type, l = (n = r.options) == null ? void 0 : n.options, [c, g] = S(!1), [q, x] = S(""), T = r == null ? void 0 : r.id, p = V(
-    async (i) => {
-      if (T) {
-        const s = i.currentTarget.value;
-        x(s), await w(T, s);
+const Et = ({ openedQuestion: t, isLoading: o, vote: u, close: E }) => {
+  var q, x;
+  const p = t.subject, O = t.type, l = (q = t.options) == null ? void 0 : q.options, [d, g] = m(!1), [h, D] = m(!1), [v, R] = m(!0), [s, b] = m(!1), [C, V] = m(""), n = t == null ? void 0 : t.id;
+  L(() => {
+    t.status === S.RESOLVED && R(!1);
+  }, []);
+  const P = y((r) => {
+    D(r), g(!0);
+  }, []), A = y(
+    async (r) => {
+      if (n) {
+        const e = r.currentTarget.value;
+        V(e), await u(n, e);
       }
     },
-    [T, x, w]
-  ), b = V(() => {
-    g(!0), setTimeout(h, 3e3);
-  }, [h]), t = m(
-    () => r == null ? void 0 : r.answers.find((i) => i.youVoted === !0),
-    [r]
-  ), o = m(
-    () => !!(r != null && r.answers.find((i) => i.correct === !0)),
-    [r]
-  ), e = m(
-    () => r == null ? void 0 : r.answers.find((i) => i.correct === !0),
-    [r]
-  ), A = m(() => r ? r.answers.map((i) => {
-    var s;
+    [n, V, u]
+  ), k = y(() => {
+    b(!0), setTimeout(E, 3e3);
+  }, [E]), i = c(
+    () => t == null ? void 0 : t.answers.find((r) => r.youVoted === !0),
+    [t]
+  ), T = c(
+    () => !!(t != null && t.answers.find((r) => r.correct === !0)),
+    [t]
+  ), f = c(
+    () => t == null ? void 0 : t.answers.find((r) => r.correct === !0),
+    [t]
+  ), M = c(() => t ? t.answers.map((r) => {
+    var e;
     return {
-      ...i,
-      questionVoted: !!t,
-      youSelected: q === i.id,
-      isLoading: f,
-      hasCorrectAnswer: o,
-      questionType: r.type,
-      answerTimeExpired: c,
-      questionStatus: r.status,
-      imageMode: (s = r.appearance) == null ? void 0 : s.images,
-      // ToDo: Figure out why imageMode is not in the response
-      onVote: p
+      ...r,
+      questionVoted: !!i,
+      youSelected: C === r.id,
+      isLoading: o,
+      hasCorrectAnswer: T,
+      questionType: t.type,
+      answerTimeExpired: s,
+      questionStatus: t.status,
+      imageMode: (e = t.appearance) == null ? void 0 : e.images,
+      onVote: A
     };
-  }) : [], [o, c, f, r, t, p, q]), E = l && (l.case === "trivia" || l.case === "prediction") ? l.value : void 0, D = m(() => {
-    if (r.status === M.RESOLVED)
+  }) : [], [T, s, o, t, i, A, C]), j = l && (l.case === "trivia" || l.case === "prediction") ? l.value : void 0, N = c(() => {
+    if (t.status === S.RESOLVED)
       return 0;
-    if (!c)
-      return t ? t.correct ? t.points : 0 : e == null ? void 0 : e.points;
-  }, [c, t, e, r.status]), P = m(() => c ? "Time expired" : r.type === y.POLL ? "Time remaining" : t ? "You won" : "To win", [c, r.type, t]);
-  return /* @__PURE__ */ a(j, { "data-question-header": "true", children: /* @__PURE__ */ a(R, { children: /* @__PURE__ */ C(B, { children: [
-    E && /* @__PURE__ */ a(
-      N,
+    if (!s)
+      return i ? i.correct ? i.points : 0 : f == null ? void 0 : f.points;
+  }, [s, i, f, t.status]), B = c(() => s ? "Time expired" : t.type === w.POLL ? "Time remaining" : i ? "You won" : "To win", [s, t.type, i]);
+  return /* @__PURE__ */ a(W, { "data-question-header": "true", children: /* @__PURE__ */ a(Y, { children: /* @__PURE__ */ I(z, { children: [
+    /* @__PURE__ */ a(
+      K,
       {
-        feedbackMessages: E,
-        questionVoted: !!t,
-        questionVotedCorrectly: t == null ? void 0 : t.correct,
+        feedbackMessages: j,
+        questionVoted: !!i,
+        questionVotedCorrectly: i == null ? void 0 : i.correct,
         questionType: O,
-        hasCorrectAnswer: o,
-        questionStatus: r.status
+        hasCorrectAnswer: T,
+        questionStatus: t.status,
+        votedInCurrentRender: d,
+        votedAfterQuestionClosed: h,
+        enteredAnActiveQuestion: v
       }
     ),
-    r.type !== y.PREDICTION && /* @__PURE__ */ a(
-      K,
+    t.type !== w.PREDICTION && /* @__PURE__ */ a(
+      X,
       {
-        title: P,
-        points: D,
-        onTimerExpired: b,
-        questionType: r.type,
-        isTimer: !f,
-        isPlayingTimer: !t,
-        timerDuration: t ? 0 : Number(((v = r == null ? void 0 : r.appearance) == null ? void 0 : v.autoHideInterval) || "30")
+        title: B,
+        points: N,
+        onTimerExpired: k,
+        questionType: t.type,
+        isTimer: !o,
+        isPlayingTimer: !i,
+        timerDuration: i ? 0 : Number(((x = t == null ? void 0 : t.appearance) == null ? void 0 : x.autoHideInterval) || "30")
       }
     ),
-    c ? /* @__PURE__ */ a(
-      k,
+    s ? /* @__PURE__ */ a(
+      H,
       {
         title: "More to come...",
         description: "Watch for additional enhanced stream interactive experience."
       }
-    ) : /* @__PURE__ */ C(u, { children: [
-      /* @__PURE__ */ a(F, { "data-isPrediction": r.type === y.PREDICTION, children: I }),
-      /* @__PURE__ */ a(W, { children: A.map((i) => /* @__PURE__ */ a(H, { ...i }, i.id)) })
+    ) : /* @__PURE__ */ I(F, { children: [
+      /* @__PURE__ */ a(G, { "data-isPrediction": t.type === w.PREDICTION, children: p }),
+      /* @__PURE__ */ a(J, { children: M.map((r) => /* @__PURE__ */ a(
+        U,
+        {
+          ...r,
+          markThatVoted: P,
+          votedAfterQuestionClosed: h,
+          enteredAnActiveQuestion: v
+        },
+        r.id
+      )) })
     ] })
   ] }) }) });
 };
 export {
-  er as Vote
+  Et as Vote
 };

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

@@ -3,12 +3,12 @@ const n = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c1euiow",
   propsAsIs: !1
-}), o = /* @__PURE__ */ s("a")({
+}), a = /* @__PURE__ */ s("a")({
   name: "WebLinkBtn",
   class: "w19zie3h",
   propsAsIs: !1
 });
 export {
   n as Container,
-  o as WebLinkBtn
+  a as WebLinkBtn
 };

package/lib/ui/gamification/vote/twitter-details/index.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { TwitterContentProps } from '../../../questions/twitter';
+import { type TwitterContentProps } from '../../../questions/twitter';
 export declare const TwitterDetails: React.FC<TwitterContentProps>;

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

@@ -1,13 +1,35 @@
-import { jsx as t } from "react/jsx-runtime";
-import { TwitterContent as o } from "../../../questions/twitter/index.js";
-import { Container as i } from "./styles.js";
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { useMemo as n } from "react";
+import { TwitterContent as a } from "../../../questions/twitter/index.js";
+import { isValidDate as f, formatDate as l, formatTime as p } from "../../../../utils/common.js";
+import { Container as s, DateTime as d, Quote as u } from "./styles.js";
 import "../../../questions/twitter/account/index.js";
 import "../../../icons/index.js";
 import "@linaria/react";
-import "react";
 import "../../../questions/twitter/account/styles.js";
 import "../../../questions/twitter/styles.js";
-const w = (r) => /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t(o, { ...r }) });
+const V = ({ created: t, ...i }) => {
+  const e = n(() => {
+    if (t) {
+      const r = new Date(t);
+      if (f(r))
+        return {
+          date: l(r),
+          time: p(r)
+        };
+    }
+    return null;
+  }, [t]);
+  return /* @__PURE__ */ m(s, { children: [
+    e && /* @__PURE__ */ m(d, { children: [
+      e.date,
+      " · ",
+      e.time
+    ] }),
+    i.title && /* @__PURE__ */ o(u, { children: i.title }),
+    /* @__PURE__ */ o(a, { ...i })
+  ] });
+};
 export {
-  w as TwitterDetails
+  V as TwitterDetails
 };

package/lib/ui/gamification/vote/twitter-details/styles.d.ts

@@ -1,2 +1,4 @@
 /// <reference types="react" />
 export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const DateTime: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Quote: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLQuoteElement> & import("react").BlockquoteHTMLAttributes<HTMLQuoteElement> & Record<never, unknown>>;

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

@@ -1,9 +1,19 @@
 import { styled as s } from "@linaria/react";
-const t = /* @__PURE__ */ s("div")({
+const o = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c1dcxmvf",
   propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "DateTime",
+  class: "db4q22c",
+  propsAsIs: !1
+}), a = /* @__PURE__ */ s("blockquote")({
+  name: "Quote",
+  class: "q111mmic",
+  propsAsIs: !1
 });
 export {
-  t as Container
+  o as Container,
+  t as DateTime,
+  a as Quote
 };

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

@@ -9,6 +9,9 @@ export type VotingOptionProps = ExtendedQuestionAnswer & {
     imageMode?: QuestionImages;
     answerTimeExpired: boolean;
     questionStatus: QuestionStatus;
+    votedAfterQuestionClosed: boolean;
+    enteredAnActiveQuestion: boolean;
     onVote: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    markThatVoted: (votedAfterQuestionClosed: boolean) => void;
 };
 export declare const VotingOption: React.FC<VotingOptionProps>;

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

@@ -1,71 +1,76 @@
-import { jsx as r, jsxs as u } from "react/jsx-runtime";
-import { QuestionImages as s, QuestionStatus as S, QuestionType as c } from "@streamlayer/sdk-web-types";
-import { AnimatedCounter as O } from "../../../animated-counter/index.js";
-import { IconDefault as P, IconContainer as A, IconWrap as k, IconCircle as x, ButtonContainer as L, ButtonPct as B, ButtonBody as Q, Title as b, Indicators as j, CheckIcon as v, Percentage as U } from "./styles.js";
+import { jsx as n, jsxs as f } from "react/jsx-runtime";
+import { QuestionImages as s, QuestionStatus as I, QuestionType as c } from "@streamlayer/sdk-web-types";
+import { AnimatedCounter as x } from "../../../animated-counter/index.js";
+import { IconDefault as L, IconContainer as Q, IconWrap as v, IconCircle as B, ButtonContainer as V, ButtonPct as b, ButtonBody as j, Title as U, Indicators as $, CheckIcon as M, Percentage as W } from "./styles.js";
 import "react-countup";
 import "@linaria/react";
 import "../../../icons/index.js";
 import "react";
-const d = {
-  [s.CENTERED]: (t) => /* @__PURE__ */ r(P, { alt: "option-icon", src: t }),
-  [s.TRANSPARENT]: (t) => /* @__PURE__ */ r(A, { children: /* @__PURE__ */ r(k, { style: { backgroundImage: `url(${t})` } }) }),
-  [s.ROUNDED]: (t) => /* @__PURE__ */ r(x, { alt: "option-icon", src: t }),
+const m = {
+  [s.CENTERED]: (t) => /* @__PURE__ */ n(L, { alt: "option-icon", src: t }),
+  [s.TRANSPARENT]: (t) => /* @__PURE__ */ n(Q, { children: /* @__PURE__ */ n(v, { style: { backgroundImage: `url(${t})` } }) }),
+  [s.ROUNDED]: (t) => /* @__PURE__ */ n(B, { alt: "option-icon", src: t }),
   [s.NONE]: () => null,
   [s.UNSET]: () => null
-}, V = ({ questionType: t, hasCorrectAnswer: o, correct: e, youVoted: n, questionVoted: i }) => {
-  if (t === c.POLL && n)
+}, y = ({ questionType: t, hasCorrectAnswer: i, correct: e, youVoted: r, questionVoted: o }) => {
+  if (t === c.POLL && r)
     return "correct";
   if (t === c.PREDICTION) {
-    if (o && i)
-      return n ? e ? "correct" : "incorrect" : "unset";
-    if (n)
+    if (i && o)
+      return r ? e ? "correct" : "incorrect" : "unset";
+    if (r)
       return "correct";
   }
-  return t === c.TRIVIA && i && n ? e ? "correct" : "incorrect" : "unset";
-}, $ = ({
+  return t === c.TRIVIA && o && r ? e ? "correct" : "incorrect" : "unset";
+}, z = ({
   questionType: t,
-  questionVoted: o,
+  questionVoted: i,
   correct: e,
-  hasCorrectAnswer: n,
-  questionStatus: i
-}) => t === c.TRIVIA ? o && e : t === c.PREDICTION ? o && e && n || i === S.RESOLVED && e : !1, X = (t) => {
-  var N;
+  hasCorrectAnswer: r,
+  questionStatus: o
+}) => t === c.TRIVIA ? i && e : t === c.PREDICTION ? i && e && r || o === I.RESOLVED && e : !1, q = (t) => {
+  var R;
   const {
     // option props
-    id: o,
+    id: i,
     icon: e,
-    text: n,
-    percentageDecimal: i,
+    text: r,
+    percentageDecimal: o,
     // extra props
     onVote: p,
-    youSelected: f,
+    markThatVoted: D,
+    youSelected: E,
     questionVoted: a,
     // ToDo: Figure out why imageMode is not in the response, and delete default value
-    imageMode: m,
-    answerTimeExpired: R,
-    questionStatus: I,
+    imageMode: h,
+    answerTimeExpired: T,
+    questionStatus: d,
     isLoading: g,
-    questionType: h,
+    questionType: C,
     correct: w,
-    hasCorrectAnswer: D
-  } = t, l = V(t), T = $({ questionType: h, questionVoted: a, correct: w, hasCorrectAnswer: D, questionStatus: I }), C = I === S.RESOLVED && h === c.PREDICTION, E = a || C;
-  return /* @__PURE__ */ u(
-    L,
+    hasCorrectAnswer: A,
+    votedAfterQuestionClosed: O,
+    enteredAnActiveQuestion: S
+  } = t, l = y(t), P = z({ questionType: C, questionVoted: a, correct: w, hasCorrectAnswer: A, questionStatus: d }), u = d === I.RESOLVED && C === c.PREDICTION, N = a || u;
+  return /* @__PURE__ */ f(
+    V,
     {
-      value: o,
-      "data-selected": f,
+      value: i,
+      "data-selected": E,
       "data-answerState": l,
-      disabled: a || g || R || C,
-      "data-isNotChecked": a && !f && l !== "incorrect",
-      onClick: p,
+      disabled: a || g || T || u && !S || u && S && O,
+      "data-isNotChecked": a && !E && l !== "incorrect",
+      onClick: (k) => {
+        D(d === I.RESOLVED), p(k);
+      },
       children: [
-        /* @__PURE__ */ r(B, { "data-answerState": l, style: { width: `${E ? i : 0}%` } }),
-        /* @__PURE__ */ u(Q, { children: [
-          e && m && ((N = d[m]) == null ? void 0 : N.call(d, e)),
-          /* @__PURE__ */ r(b, { children: n }),
-          E && /* @__PURE__ */ u(j, { children: [
-            T && /* @__PURE__ */ r(v, { name: "selected" }),
-            /* @__PURE__ */ r(U, { children: /* @__PURE__ */ r(O, { value: i, suffix: "%" }) })
+        /* @__PURE__ */ n(b, { "data-answerState": l, style: { width: `${N ? o : 0}%` } }),
+        /* @__PURE__ */ f(j, { children: [
+          e && h && ((R = m[h]) == null ? void 0 : R.call(m, e)),
+          /* @__PURE__ */ n(U, { children: r }),
+          N && /* @__PURE__ */ f($, { children: [
+            P && /* @__PURE__ */ n(M, { name: "selected" }),
+            /* @__PURE__ */ n(W, { children: /* @__PURE__ */ n(x, { value: o, suffix: "%" }) })
           ] })
         ] })
       ]
@@ -73,5 +78,5 @@ const d = {
   );
 };
 export {
-  X as VotingOption
+  q as VotingOption
 };

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

@@ -46,6 +46,7 @@ export declare const icons: {
     circleClose: any;
     incorrectVoted: any;
     mastersLogo: any;
+    twitter: any;
 };
 export declare const Icon: React.FC<{
     name: keyof typeof icons;