@streamlayer/react-ui 0.74.2 → 0.75.0

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

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

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

@@ -1,5 +1,5 @@
 import { styled as s } from "@linaria/react";
-const e = /* @__PURE__ */ s("div")({
+const n = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c1euiow",
   propsAsIs: !1
@@ -9,6 +9,6 @@ const e = /* @__PURE__ */ s("div")({
   propsAsIs: !1
 });
 export {
-  e as Container,
+  n as Container,
   o as WebLinkBtn
 };

package/lib/ui/show-in/index.js

@@ -5,7 +5,7 @@ const m = /* @__PURE__ */ e("div")({
   name: "Container",
   class: "c1pgyo67",
   propsAsIs: !1
-}), a = "hx17qu6", d = ({
+}), a = "hx17qu6", f = ({
   children: o,
   style: n,
   className: s,
@@ -16,5 +16,5 @@ const m = /* @__PURE__ */ e("div")({
   children: o
 });
 export {
-  d as ShowIn
+  f as ShowIn
 };

package/lib/ui/timer/index.js

@@ -1,31 +1,31 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as R } from "react/jsx-runtime";
 import { styled as E } from "@linaria/react";
-import { useState as O, useCallback as c } from "react";
-import { CountdownCircleTimer as S } from "react-countdown-circle-timer";
+import { useState as S, useCallback as n } from "react";
+import { CountdownCircleTimer as _ } from "react-countdown-circle-timer";
 import { COLORS as o } from "../theme/constants.js";
-const _ = [o.PRIMARY_GREEN1, o.SECONDARY_RED1, o.SECONDARY_RED1], A = [10, 10, 0], f = /* @__PURE__ */ E("div")({
+const A = [o.PRIMARY_GREEN1, o.SECONDARY_RED1, o.SECONDARY_RED1, o.NEUTRALS_GRAY3], O = [10, 10, 1, 0], N = /* @__PURE__ */ E("div")({
   name: "RemainingTime",
   class: "r165427",
   propsAsIs: !1
-}), D = o.SECONDARY_GREEN6, R = o.SECONDARY_RED3, N = o.NEUTRALS_GRAY3, g = ({
+}), f = o.SECONDARY_GREEN6, c = o.SECONDARY_RED3, D = o.NEUTRALS_GRAY3, L = ({
   isPlaying: i = !0,
   duration: r = 30,
   onTimerExpired: t
 }) => {
-  const [l, s] = O(r > 10 ? D : R), m = ({
+  const [l, s] = S(r > 10 ? f : c), m = ({
     remainingTime: e
-  }) => /* @__PURE__ */ n(f, {
+  }) => /* @__PURE__ */ R(N, {
     children: e
-  }), a = c(() => {
-    t == null || t(), s(N);
-  }, [t, s]), C = c((e) => {
-    e === 10 && s(R);
+  }), a = n(() => {
+    t == null || t(), s(D);
+  }, [t, s]), C = n((e) => {
+    e === 10 && s(c);
   }, [s]);
-  return /* @__PURE__ */ n(S, {
+  return /* @__PURE__ */ R(_, {
     isPlaying: i,
     duration: r,
-    colors: _,
-    colorsTime: A,
+    colors: A,
+    colorsTime: O,
     size: 32,
     strokeWidth: 2,
     trailStrokeWidth: 2,
@@ -36,6 +36,6 @@ const _ = [o.PRIMARY_GREEN1, o.SECONDARY_RED1, o.SECONDARY_RED1], A = [10, 10, 0
   });
 };
 export {
-  f as RemainingTime,
-  g as Timer
+  N as RemainingTime,
+  L as Timer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.74.2",
+  "version": "0.75.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -40,14 +40,14 @@
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.9",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^0.27.2",
-    "@streamlayer/sdk-web": "^0.29.3",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.11.28",
+    "@streamlayer/feature-gamification": "^0.28.0",
+    "@streamlayer/sdk-web": "^0.29.4",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.11.29",
     "@streamlayer/sdk-web-api": "^0.1.0",
     "@streamlayer/sdk-web-core": "^0.0.6",
-    "@streamlayer/sdk-web-features": "^0.10.35",
+    "@streamlayer/sdk-web-features": "^0.10.36",
     "@streamlayer/sdk-web-interfaces": "^0.0.1",
-    "@streamlayer/sdk-web-notifications": "^0.13.4",
+    "@streamlayer/sdk-web-notifications": "^0.1.0",
     "@streamlayer/sdk-web-storage": "^0.0.4",
     "@streamlayer/sdk-web-logger": "^0.0.1",
     "@streamlayer/sdk-web-types": "^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.3"
+    "@streamlayer/react": "^0.32.5"
   }
 }

package/lib/ui/theme/masters.d.ts

@@ -1,2 +0,0 @@
-/** @deprecated all variables moved to main theme */
-export declare const mastersVariables: import("@linaria/core").LinariaClassName;

package/lib/ui/theme/masters.js

@@ -1,4 +0,0 @@
-const s = "m17a8r9z";
-export {
-  s as mastersVariables
-};