@streamlayer/react-ui 0.76.2 → 0.77.0

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

@@ -10,6 +10,8 @@ interface FeedbackProps {
     questionVotedCorrectly?: boolean;
     hasCorrectAnswer: boolean;
     questionStatus: QuestionStatus;
+    showExpiredNotification: boolean;
+    showClosedNotificationTrivia: boolean;
     votedInCurrentRender: boolean;
     votedAfterQuestionClosed: boolean;
     enteredAnActiveQuestion: boolean;

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.76.2",
+  "version": "0.77.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -45,8 +45,8 @@
     "@streamlayer/sdk-web-anonymous-auth": "^0.11.30",
     "@streamlayer/sdk-web-api": "^0.1.0",
     "@streamlayer/sdk-web-core": "^0.0.7",
-    "@streamlayer/sdk-web-interfaces": "^0.0.1",
     "@streamlayer/sdk-web-features": "^0.10.37",
+    "@streamlayer/sdk-web-interfaces": "^0.0.1",
     "@streamlayer/sdk-web-notifications": "^0.1.0",
     "@streamlayer/sdk-web-storage": "^0.0.4",
     "@streamlayer/sdk-web-logger": "^0.0.1",
@@ -90,6 +90,6 @@
     "vite-plugin-svgr": "^4.1.0",
     "vite-svg-loader": "^4.0.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "@streamlayer/react": "^0.32.9"
+    "@streamlayer/react": "^0.32.10"
   }
 }