@streamlayer/react-ui 0.68.0 → 0.68.2

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

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

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

@@ -1,9 +1,12 @@
 /// <reference types="react" />
+import { QuestionType } from '@streamlayer/sdk-web-types';
 interface WinBarProps {
     title?: string;
     points?: number;
     isPlayingTimer?: boolean;
     isTimer?: boolean;
+    questionType?: QuestionType;
+    timerDuration?: number;
     onTimerExpired?: () => void;
 }
 export declare const WinBar: React.FC<WinBarProps>;

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

@@ -1,24 +1,33 @@
-import { jsxs as r, jsx as i, Fragment as c } from "react/jsx-runtime";
-import { Timer as p } from "../../../timer/index.js";
-import { WinBarContainer as d, Content as h, Title as l, WinIcon as s, Points as a, PointsCount as P, PointsUnits as f } from "./styles.js";
+import { jsxs as r, jsx as i, Fragment as d } from "react/jsx-runtime";
+import { QuestionType as s } from "@streamlayer/sdk-web-types";
+import { Timer as h } from "../../../timer/index.js";
+import { WinBarContainer as l, Content as a, Title as P, WinIcon as f, Points as u, PointsCount as T, PointsUnits as x } from "./styles.js";
 import "@linaria/react";
 import "react";
 import "react-countdown-circle-timer";
 import "../../../theme/constants.js";
 import "../../../icons/index.js";
-const B = ({ title: n, points: o, isPlayingTimer: t, isTimer: e, onTimerExpired: m }) => /* @__PURE__ */ r(d, { children: [
-  /* @__PURE__ */ r(h, { children: [
-    n && /* @__PURE__ */ i(l, { children: n }),
-    o !== void 0 && /* @__PURE__ */ r(c, { children: [
-      /* @__PURE__ */ i(s, { name: "icon-trophy" }),
-      /* @__PURE__ */ r(a, { children: [
-        /* @__PURE__ */ i(P, { children: o }),
-        /* @__PURE__ */ i(f, { children: "PTS" })
+const I = ({
+  title: n,
+  points: o,
+  isPlayingTimer: t,
+  isTimer: e,
+  questionType: m,
+  timerDuration: p,
+  onTimerExpired: c
+}) => /* @__PURE__ */ r(l, { children: [
+  /* @__PURE__ */ r(a, { children: [
+    n && /* @__PURE__ */ i(P, { children: n }),
+    o !== void 0 && m !== s.POLL && /* @__PURE__ */ r(d, { children: [
+      /* @__PURE__ */ i(f, { name: "icon-trophy" }),
+      /* @__PURE__ */ r(u, { children: [
+        /* @__PURE__ */ i(T, { children: o }),
+        /* @__PURE__ */ i(x, { children: "PTS" })
       ] })
     ] })
   ] }),
-  e && /* @__PURE__ */ i(p, { isPlaying: t, onTimerExpired: m })
+  e && /* @__PURE__ */ i(h, { isPlaying: t, onTimerExpired: c, duration: p })
 ] });
 export {
-  B as WinBar
+  I as WinBar
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.68.0",
+  "version": "0.68.2",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -89,6 +89,6 @@
     "vite-plugin-svgr": "^4.1.0",
     "vite-svg-loader": "^4.0.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "@streamlayer/react": "^0.31.0"
+    "@streamlayer/react": "^0.31.2"
   }
 }