@streamlayer/react-ui 0.83.0 → 0.85.0

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

@@ -1,5 +1,5 @@
-import { jsx as m, jsxs as g, Fragment as z } from "react/jsx-runtime";
-import { useState as d, useEffect as G, useCallback as y, useMemo as f } from "react";
+import { jsx as m, jsxs as N, Fragment as z } from "react/jsx-runtime";
+import { useState as d, useEffect as G, useCallback as p, useMemo as f } from "react";
 import { QuestionType as c, QuestionStatus as V } from "@streamlayer/sdk-web-types";
 import { SDKScrollContainer as J } from "../../app/styles.js";
 import { ExpiredAlert as U } from "./expired-alert/index.js";
@@ -18,24 +18,24 @@ import "../../timer/index.js";
 import "react-countdown-circle-timer";
 import "../../theme/constants.js";
 import "./win-bar/styles.js";
-const pt = ({ openedQuestion: t, isLoading: C, vote: p, close: v }) => {
-  var k, N;
-  const P = t.subject, a = t.type, o = t.status, E = (k = t.options) == null ? void 0 : k.options, I = t.marketClosed, [R, b] = d(!1), [h, B] = d(!1), [u, O] = d(!0), [n, L] = d(!1), [x, q] = d(""), w = t == null ? void 0 : t.id;
+const wt = ({ openedQuestion: t, isLoading: C, vote: w, close: v }) => {
+  var g, k;
+  const P = t.subject, a = t.type, o = t.status, E = (g = t.options) == null ? void 0 : g.options, I = t.marketClosed, [R, b] = d(!1), [h, L] = d(!1), [u, O] = d(!0), [n, M] = d(!1), [x, q] = d(""), y = t == null ? void 0 : t.id;
   G(() => {
     a === c.PREDICTION ? I && O(!1) : o === V.RESOLVED && O(!1);
   }, []);
-  const M = y((e) => {
-    B(e), b(!0);
-  }, []), D = y(
+  const j = p((e) => {
+    L(e), b(!0);
+  }, []), D = p(
     async (e) => {
-      if (w) {
+      if (y) {
         const T = e.currentTarget.value;
-        q(T), await p(w, T);
+        q(T), await w(y, T);
       }
     },
-    [w, q, p]
-  ), W = y(() => {
-    L(!0), setTimeout(v, 3e3);
+    [y, q, w]
+  ), B = p(() => {
+    M(!0), setTimeout(v, 3e3);
   }, [v]), r = f(
     () => t == null ? void 0 : t.answers.find((e) => e.youVoted === !0),
     [t]
@@ -45,7 +45,7 @@ const pt = ({ openedQuestion: t, isLoading: C, vote: p, close: v }) => {
   ), i = f(
     () => t == null ? void 0 : t.answers.find((e) => e.correct === !0),
     [t]
-  ), j = f(() => t ? t.answers.map((e) => {
+  ), W = f(() => t ? t.answers.map((e) => {
     var T;
     return {
       ...e,
@@ -82,7 +82,7 @@ const pt = ({ openedQuestion: t, isLoading: C, vote: p, close: v }) => {
     a,
     s
   ]), H = f(() => a === c.PREDICTION && r ? s ? s && (i != null && i.youVoted) ? "You won" : "" : "To win" : l || n ? "Time expired" : a === c.POLL ? "Time remaining" : r ? "You won" : "To win", [n, a, r, l, s, i]), K = r || l || S || a === c.TRIVIA && o === V.RESOLVED && u;
-  return /* @__PURE__ */ m(J, { "data-question-header": "true", children: /* @__PURE__ */ m(Z, { children: /* @__PURE__ */ g(_, { children: [
+  return /* @__PURE__ */ m(J, { "data-question-header": "true", children: /* @__PURE__ */ m(Z, { children: /* @__PURE__ */ N(_, { children: [
     /* @__PURE__ */ m(
       X,
       {
@@ -105,11 +105,11 @@ const pt = ({ openedQuestion: t, isLoading: C, vote: p, close: v }) => {
       {
         title: H,
         points: Y,
-        onTimerExpired: W,
+        onTimerExpired: B,
         questionType: t.type,
         isTimer: !C,
         isPlayingTimer: !r,
-        timerDuration: K ? 0 : Number(((N = t == null ? void 0 : t.appearance) == null ? void 0 : N.autoHideInterval) || "30")
+        timerDuration: K ? 0 : Number(((k = t == null ? void 0 : t.appearance) == null ? void 0 : k.autoHideInterval) || "30")
       }
     ),
     n ? /* @__PURE__ */ m(
@@ -118,13 +118,13 @@ const pt = ({ openedQuestion: t, isLoading: C, vote: p, close: v }) => {
         title: "More to come...",
         description: "Watch for additional enhanced stream interactive experience."
       }
-    ) : /* @__PURE__ */ g(z, { children: [
-      /* @__PURE__ */ m($, { "data-withoutWinBar": !A, children: P }),
-      /* @__PURE__ */ m(Q, { children: j.map((e) => /* @__PURE__ */ m(
+    ) : /* @__PURE__ */ N(z, { children: [
+      /* @__PURE__ */ m($, { style: A ? {} : { marginTop: 0 }, children: P }),
+      /* @__PURE__ */ m(Q, { children: W.map((e) => /* @__PURE__ */ m(
         tt,
         {
           ...e,
-          markThatVoted: M,
+          markThatVoted: j,
           votedAfterQuestionClosed: h,
           enteredAnActiveQuestion: u,
           marketClosed: I
@@ -135,5 +135,5 @@ const pt = ({ openedQuestion: t, isLoading: C, vote: p, close: v }) => {
   ] }) }) });
 };
 export {
-  pt as Vote
+  wt as Vote
 };

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

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
 import { QuestionImages as a, QuestionType as i, QuestionStatus as h } from "@streamlayer/sdk-web-types";
-import { AnimatedCounter as D } from "../../../animated-counter/index.js";
+import { AnimatedCounter as P } from "../../../animated-counter/index.js";
 import { IconDefault as B, IconContainer as V, IconWrap as b, IconCircle as j, ButtonContainer as U, ButtonPct as $, ButtonBody as M, Title as W, Pts as y, Indicators as z, CheckIcon as F, Percentage as G } from "./styles.js";
 import "react-countup";
 import "@linaria/react";
@@ -29,20 +29,20 @@ const f = {
   hasCorrectAnswer: r,
   questionStatus: o
 }) => t === i.TRIVIA ? c && n : t === i.PREDICTION ? c && n && r || o === h.RESOLVED && n : !1, rt = (t) => {
-  var p;
+  var D;
   const {
     // option props
     id: c,
     icon: n,
     text: r,
     percentageDecimal: o,
-    points: P,
+    points: S,
     // extra props
     onVote: T,
     markThatVoted: O,
-    youSelected: C,
+    youSelected: E,
     questionVoted: s,
-    imageMode: E,
+    imageMode: C,
     answerTimeExpired: w,
     questionStatus: u,
     isLoading: g,
@@ -50,34 +50,34 @@ const f = {
     correct: A,
     hasCorrectAnswer: k,
     votedAfterQuestionClosed: v,
-    enteredAnActiveQuestion: N,
-    marketClosed: R
-  } = t, I = H(t), x = J({ questionType: d, questionVoted: s, correct: A, hasCorrectAnswer: k, questionStatus: u }), m = R && d === i.PREDICTION, S = s || m, L = d === i.PREDICTION && !s && u !== h.RESOLVED;
+    enteredAnActiveQuestion: R,
+    marketClosed: p
+  } = t, I = H(t), x = J({ questionType: d, questionVoted: s, correct: A, hasCorrectAnswer: k, questionStatus: u }), m = p && d === i.PREDICTION, N = s || m, L = d === i.PREDICTION && !s && u !== h.RESOLVED;
   return /* @__PURE__ */ l(
     U,
     {
       value: c,
-      "data-selected": C,
-      "data-answerState": I,
-      disabled: s || g || w || m && !N || m && N && v,
-      "data-isNotChecked": s && !C && I !== "incorrect",
+      "data-selected": E,
+      "data-answer-state": I,
+      disabled: s || g || w || m && !R || m && R && v,
+      "data-is-not-checked": s && !E && I !== "incorrect",
       onClick: (Q) => {
         O(
-          d === i.PREDICTION ? R : u === h.RESOLVED
+          d === i.PREDICTION ? p : u === h.RESOLVED
         ), T(Q);
       },
       children: [
-        /* @__PURE__ */ e($, { "data-answerState": I, style: { width: `${S ? o : 0}%` } }),
+        /* @__PURE__ */ e($, { "data-answer-state": I, style: { width: `${N ? o : 0}%` } }),
         /* @__PURE__ */ l(M, { children: [
-          n && E && ((p = f[E]) == null ? void 0 : p.call(f, n)),
+          n && C && ((D = f[C]) == null ? void 0 : D.call(f, n)),
           /* @__PURE__ */ e(W, { children: r }),
           L && /* @__PURE__ */ l("div", { children: [
-            /* @__PURE__ */ e(D, { value: P }),
+            /* @__PURE__ */ e(P, { value: S }),
             /* @__PURE__ */ e(y, { children: "pts" })
           ] }),
-          S && /* @__PURE__ */ l(z, { children: [
+          N && /* @__PURE__ */ l(z, { children: [
             x && /* @__PURE__ */ e(F, { name: "selected" }),
-            /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(D, { value: o, suffix: "%" }) })
+            /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(P, { value: o, suffix: "%" }) })
           ] })
         ] })
       ]

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

@@ -50,7 +50,7 @@ const I = /* @__PURE__ */ s("button")({
   name: "Percentage",
   class: "pu9kmlb",
   propsAsIs: !1
-}), c = () => o, P = /* @__PURE__ */ s(c())({
+}), c = () => o, v = /* @__PURE__ */ s(c())({
   name: "CheckIcon",
   class: "c1j2j0s0",
   propsAsIs: !0
@@ -59,7 +59,7 @@ export {
   m as ButtonBody,
   I as ButtonContainer,
   i as ButtonPct,
-  P as CheckIcon,
+  v as CheckIcon,
   n as Icon,
   d as IconCircle,
   f as IconContainer,

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

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

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

@@ -2,7 +2,7 @@ import { styled as s } from "@linaria/react";
 import { SvgIcon as n } from "../../../icons/index.js";
 import "react/jsx-runtime";
 import "react";
-const p = /* @__PURE__ */ s("div")({
+const a = /* @__PURE__ */ s("div")({
   name: "WinBarContainer",
   class: "wie6cqo",
   propsAsIs: !1
@@ -22,11 +22,11 @@ const p = /* @__PURE__ */ s("div")({
   name: "Points",
   class: "p4lwuj0",
   propsAsIs: !1
-}), I = /* @__PURE__ */ s("span")({
+}), f = /* @__PURE__ */ s("span")({
   name: "PointsCount",
   class: "po9i64o",
   propsAsIs: !1
-}), f = /* @__PURE__ */ s("span")({
+}), I = /* @__PURE__ */ s("span")({
   name: "PointsUnits",
   class: "pe5g05h",
   propsAsIs: !1
@@ -34,9 +34,9 @@ const p = /* @__PURE__ */ s("div")({
 export {
   c as Content,
   m as Points,
-  I as PointsCount,
-  f as PointsUnits,
+  f as PointsCount,
+  I as PointsUnits,
   l as Title,
-  p as WinBarContainer,
+  a as WinBarContainer,
   r as WinIcon
 };

package/lib/ui/navigation/masters.js

@@ -1,6 +1,6 @@
 import { styled as o } from "@linaria/react";
 import { Navigation as t } from "./index.js";
-import "../../masters_k70xsy-4ed993c7.js";
+import "../../masters_1wv7w2k-4ed993c7.js";
 import "react/jsx-runtime";
 import "../../index_4nhkck-4ed993c7.js";
 const i = () => t, n = /* @__PURE__ */ o(i())({

package/lib/ui/questions/insight/index.js

@@ -1,43 +1,44 @@
-import { jsxs as p, jsx as o } from "react/jsx-runtime";
-import { useMemo as u } from "react";
-import { VideoPlayer as g } from "../../video-player/index.js";
-import { isValidDate as D, formatDate as v, formatTime as x } from "../../../utils/common.js";
-import { Container as C, DateWrap as T, Image as b, Content as j, Title as I, Description as U } from "./styles.js";
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { useMemo as g } from "react";
+import { VideoPlayer as D } from "../../video-player/index.js";
+import { isValidDate as v, formatDate as b, formatTime as x } from "../../../utils/common.js";
+import { Container as C, DateWrap as T, Image as j, Content as y, Title as I, Description as U } from "./styles.js";
 import "../../icons/index.js";
 import "@linaria/react";
 import "../../video-player/styles.js";
-const F = ({
+const G = ({
   created: m,
-  image: f,
-  title: h,
-  isPickHistory: e,
-  instantView: r
+  image: c,
+  title: f,
+  isPickHistory: h,
+  instantView: r,
+  notification: d
 }) => {
-  const d = u(() => {
+  const l = g(() => {
     if (m) {
-      const l = new Date(m);
-      if (D(l))
+      const p = new Date(m);
+      if (v(p))
         return {
-          date: v(l),
-          time: x(l)
+          date: b(p),
+          time: x(p)
         };
     }
     return null;
-  }, [m]), c = (r == null ? void 0 : r.image) || f;
-  return /* @__PURE__ */ p(C, { children: [
-    d && /* @__PURE__ */ p(T, { children: [
-      d.date,
+  }, [m]), u = (r == null ? void 0 : r.image) || c;
+  return /* @__PURE__ */ e(C, { children: [
+    l && /* @__PURE__ */ e(T, { children: [
+      l.date,
       " · ",
-      d.time
+      l.time
     ] }),
-    (r == null ? void 0 : r.video) && /* @__PURE__ */ o(g, { source: r.video.url, poster: r.video.thumbnailUrl }),
-    c && !(r != null && r.video) && /* @__PURE__ */ o(b, { src: c }),
-    /* @__PURE__ */ p(j, { children: [
-      /* @__PURE__ */ o(I, { children: e ? h : r == null ? void 0 : r.heading }),
-      !e && /* @__PURE__ */ o(U, { children: r == null ? void 0 : r.body })
+    (r == null ? void 0 : r.video) && /* @__PURE__ */ o(D, { source: r.video.url, poster: r.video.thumbnailUrl }),
+    u && !(r != null && r.video) && /* @__PURE__ */ o(j, { src: u }),
+    /* @__PURE__ */ e(y, { children: [
+      /* @__PURE__ */ o(I, { children: h ? f : r == null ? void 0 : r.heading }),
+      /* @__PURE__ */ o(U, { children: h ? d == null ? void 0 : d.body : r == null ? void 0 : r.body })
     ] })
   ] });
 };
 export {
-  F as InsightContent
+  G as InsightContent
 };

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

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

package/lib/ui/theme/theme.js

@@ -1,35 +1,36 @@
-import { jsx as t, jsxs as r } from "react/jsx-runtime";
-import { colors as l, FONT as e } from "./constants.js";
-const h = `
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { colors as l, FONT as t } from "./constants.js";
+const s = `
   ${l}
-  --font-family: ${e.REGULAR};
-  --font-regular: ${e.REGULAR};
-  --font-color: ${e.COLOR};
-  --font-serif: ${e.SERIF};
-  --font-weight-default: ${e.WEIGHT_DEFAULT};
+  --font-family: ${t.REGULAR};
+  --font-regular: ${t.REGULAR};
+  --font-color: ${t.COLOR};
+  --font-serif: ${t.SERIF};
+  --font-weight-default: ${t.WEIGHT_DEFAULT};
 
   --header-height: 68px;
   --animation-duration: 0.5s;
   --animation-function: ease;
   --container-padding: 16px;
   --border-radius: 8px;
-`, d = "StreamLayerCSSReset", m = "ttkj0ah", f = () => /* @__PURE__ */ t("table", {
+  --pill-offset: 0px;
+`, c = "StreamLayerCSSReset", m = "ttkj0ah", f = () => /* @__PURE__ */ e("table", {
   children: /* @__PURE__ */ r("table", {
-    children: [/* @__PURE__ */ t("thead", {
+    children: [/* @__PURE__ */ e("thead", {
       children: /* @__PURE__ */ r("tr", {
-        children: [/* @__PURE__ */ t("th", {
+        children: [/* @__PURE__ */ e("th", {
           children: "name"
-        }), /* @__PURE__ */ t("th", {
+        }), /* @__PURE__ */ e("th", {
           children: "value"
         })]
       })
-    }), /* @__PURE__ */ t("tbody", {
-      children: h.split(";").map((i) => {
+    }), /* @__PURE__ */ e("tbody", {
+      children: s.split(";").map((i) => {
         const n = i.trim(), [o, a] = n.split(":");
         return /* @__PURE__ */ r("tr", {
-          children: [/* @__PURE__ */ t("td", {
+          children: [/* @__PURE__ */ e("td", {
             children: o
-          }), /* @__PURE__ */ t("td", {
+          }), /* @__PURE__ */ e("td", {
             children: a
           })]
         }, n);
@@ -39,7 +40,7 @@ const h = `
 });
 export {
   f as ThemeVariables,
-  d as resetCss,
+  c as resetCss,
   m as theme,
-  h as themeStr
+  s as themeStr
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.83.0",
+  "version": "0.85.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -39,18 +39,19 @@
     "@streamlayer/sl-eslib": "^5.61.0",
     "@types/lodash.throttle": "^4.1.9",
     "lodash.throttle": "^4.1.1",
+    "react-infinite-scroller": "^1.2.6",
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.9",
     "react-window-infinite-loader": "^1.0.9",
+    "@streamlayer/feature-gamification": "^0.31.0",
     "@streamlayer/sdk-web": "^0.29.5",
-    "@streamlayer/feature-gamification": "^0.30.3",
     "@streamlayer/sdk-web-anonymous-auth": "^0.11.30",
     "@streamlayer/sdk-web-api": "^0.1.0",
     "@streamlayer/sdk-web-core": "^0.1.0",
-    "@streamlayer/sdk-web-interfaces": "^0.18.19",
-    "@streamlayer/sdk-web-features": "^0.11.3",
+    "@streamlayer/sdk-web-features": "^0.11.4",
+    "@streamlayer/sdk-web-interfaces": "^0.18.20",
     "@streamlayer/sdk-web-logger": "^0.0.1",
-    "@streamlayer/sdk-web-notifications": "^0.0.3",
+    "@streamlayer/sdk-web-notifications": "^0.0.4",
     "@streamlayer/sdk-web-storage": "^0.0.4",
     "@streamlayer/sdk-web-types": "^0.1.0"
   },
@@ -77,6 +78,7 @@
     "@storybook/jest": "~0.2.3",
     "@storybook/react": "^7.5.3",
     "@storybook/testing-library": "~0.2.2",
+    "@types/react-infinite-scroller": "^1.2.5",
     "@types/react-window": "^1.8.8",
     "@types/react-window-infinite-loader": "^1.0.9",
     "esbuild-plugin-babel": "^0.2.3",
@@ -93,6 +95,6 @@
     "vite-plugin-svgr": "^4.1.0",
     "vite-svg-loader": "^4.0.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "@streamlayer/react": "^0.33.4"
+    "@streamlayer/react": "^0.34.0"
   }
 }