@streamlayer/react-ui 1.22.5 → 1.23.0

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

@@ -1,17 +1,17 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { Button as i, Title as l, Container as a, STabs as h } from "./styles.js";
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { Button as d, Title as i, Container as l, STabs as h } from "./styles.js";
 var m = /* @__PURE__ */ ((r) => (r.HOME = "home", r.LEADERBOARD = "leaderboard", r))(m || {});
-const t = ({ title: r, active: o, onClick: n }) => /* @__PURE__ */ e(i, { onClick: n, "data-selected": o, children: /* @__PURE__ */ e(l, { children: r }) }), b = ({ activePage: r = "home", toggleActivePage: o }) => /* @__PURE__ */ e(a, { children: /* @__PURE__ */ d(h, { "data-position": r === "home" ? "left" : "right", children: [
-  /* @__PURE__ */ e(t, { title: "Home", active: r === "home", onClick: () => o(
+const o = ({ title: r, active: e, onClick: n }) => /* @__PURE__ */ t(d, { "data-a": "intr", onClick: n, "data-selected": e, children: /* @__PURE__ */ t(i, { "data-a": "intr", children: r }) }), b = ({ activePage: r = "home", toggleActivePage: e }) => /* @__PURE__ */ t(l, { children: /* @__PURE__ */ a(h, { "data-position": r === "home" ? "left" : "right", children: [
+  /* @__PURE__ */ t(o, { title: "Home", active: r === "home", onClick: () => e(
     "home"
     /* HOME */
   ) }),
-  /* @__PURE__ */ e(
-    t,
+  /* @__PURE__ */ t(
+    o,
     {
       title: "Friends",
       active: r === "leaderboard",
-      onClick: () => o(
+      onClick: () => e(
         "leaderboard"
         /* LEADERBOARD */
       )
@@ -20,6 +20,6 @@ const t = ({ title: r, active: o, onClick: n }) => /* @__PURE__ */ e(i, { onClic
 ] }) });
 export {
   m as ActivePages,
-  t as Tab,
+  o as Tab,
   b as Tabs
 };

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

@@ -1,11 +1,11 @@
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { jsxs as o, jsx as l } from "react/jsx-runtime";
 import { InsightContent as k } from "../../../questions/insight/index.js";
-import { Container as m, WebLinkBtn as c, WebLinkIcon as e } from "./styles.js";
-const p = ({ instantView: r, ...b }) => /* @__PURE__ */ l(m, { children: [
-  /* @__PURE__ */ o(k, { instantView: r, ...b, isDetail: !0 }),
-  (r == null ? void 0 : r.webLink) && /* @__PURE__ */ l(c, { href: r == null ? void 0 : r.webLink.url, target: "_blank", "data-analytics": "web-link", children: [
+import { Container as m, WebLinkBtn as e, WebLinkIcon as c } from "./styles.js";
+const p = ({ instantView: r, ...b }) => /* @__PURE__ */ o(m, { children: [
+  /* @__PURE__ */ l(k, { instantView: r, ...b, isDetail: !0 }),
+  (r == null ? void 0 : r.webLink) && /* @__PURE__ */ o(e, { href: r == null ? void 0 : r.webLink.url, target: "_blank", "data-a": "web-link", children: [
     r == null ? void 0 : r.webLink.label,
-    /* @__PURE__ */ o(e, { name: "icon-external-link" })
+    /* @__PURE__ */ l(c, { name: "icon-external-link" })
   ] })
 ] });
 export {

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

@@ -1,21 +1,21 @@
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
 import { useState as j, useLayoutEffect as y } from "react";
-import { QuestionImages as a, QuestionType as o, QuestionStatus as S } from "@streamlayer/sdk-web-types";
+import { QuestionImages as s, QuestionType as o, QuestionStatus as S } from "@streamlayer/sdk-web-types";
 import { AnimatedCounter as U } from "../../../animated-counter/index.js";
 import { IconDefault as V, IconContainer as $, IconWrap as F, IconCircle as M, ButtonContainer as z, ButtonPctWrap as G, ButtonPct as H, ButtonBody as J, Title as K, PtsWrap as X, Pts as Y, Indicators as Z, CheckIcon as _, Percentage as q } from "./styles.js";
 const E = {
-  [a.CENTERED]: (t) => /* @__PURE__ */ e(V, { "data-testid": "vote-icon", alt: "option-icon", src: t }),
-  [a.TRANSPARENT]: (t) => /* @__PURE__ */ e($, { "data-testid": "vote-icon", children: /* @__PURE__ */ e(F, { style: { backgroundImage: `url(${t})` } }) }),
-  [a.ROUNDED]: (t) => /* @__PURE__ */ e(M, { "data-testid": "vote-icon", alt: "option-icon", src: t }),
-  [a.NONE]: () => null,
-  [a.UNSET]: () => null
-}, tt = ({ questionType: t, hasCorrectAnswer: c, correct: n, youVoted: r, questionVoted: i }) => {
+  [s.CENTERED]: (t) => /* @__PURE__ */ e(V, { "data-testid": "vote-icon", alt: "option-icon", src: t }),
+  [s.TRANSPARENT]: (t) => /* @__PURE__ */ e($, { "data-testid": "vote-icon", children: /* @__PURE__ */ e(F, { style: { backgroundImage: `url(${t})` } }) }),
+  [s.ROUNDED]: (t) => /* @__PURE__ */ e(M, { "data-testid": "vote-icon", alt: "option-icon", src: t }),
+  [s.NONE]: () => null,
+  [s.UNSET]: () => null
+}, tt = ({ questionType: t, hasCorrectAnswer: a, correct: n, youVoted: r, questionVoted: i }) => {
   if (t === o.POLL && r)
     return "voted";
   if (t === o.PREDICTION) {
-    if (!c && i)
+    if (!a && i)
       return r ? "voted" : "unset";
-    if (c && i)
+    if (a && i)
       return r ? n ? "correct" : "incorrect" : "unset";
     if (r)
       return "correct";
@@ -23,15 +23,15 @@ const E = {
   return t === o.TRIVIA && i && r ? n ? "correct" : "incorrect" : "unset";
 }, et = ({
   questionType: t,
-  questionVoted: c,
+  questionVoted: a,
   correct: n,
   hasCorrectAnswer: r,
   questionStatus: i
-}) => t === o.TRIVIA ? c && n : t === o.PREDICTION ? c && n && r || i === S.RESOLVED && n : !1, st = (t) => {
+}) => t === o.TRIVIA ? a && n : t === o.PREDICTION ? a && n && r || i === S.RESOLVED && n : !1, ct = (t) => {
   var N;
   const {
     // option props
-    id: c,
+    id: a,
     icon: n,
     text: r,
     percentageDecimal: i,
@@ -42,7 +42,7 @@ const E = {
     onPercentsAnimated: u,
     youSelected: h,
     youVoted: w,
-    questionVoted: s,
+    questionVoted: c,
     imageMode: P,
     answerTimeExpired: k,
     questionStatus: C,
@@ -52,7 +52,7 @@ const E = {
     hasCorrectAnswer: x,
     marketClosed: f,
     isEarlyPrediction: B
-  } = t, [L, R] = j(0), I = tt(t), Q = et({ questionType: d, questionVoted: s, correct: A, hasCorrectAnswer: x, questionStatus: C }), m = f && d === o.PREDICTION, T = s || m, W = d === o.PREDICTION && !s && !f, p = s && !h && I !== "incorrect" && !w;
+  } = t, [L, R] = j(0), I = tt(t), Q = et({ questionType: d, questionVoted: c, correct: A, hasCorrectAnswer: x, questionStatus: C }), m = f && d === o.PREDICTION, T = c || m, W = d === o.PREDICTION && !c && !f, p = c && !h && I !== "incorrect" && !w;
   return y(() => {
     R(0), requestAnimationFrame(() => {
       R(i);
@@ -60,11 +60,12 @@ const E = {
   }, [i]), /* @__PURE__ */ l(
     z,
     {
-      value: c,
+      value: a,
       "data-selected": h,
       "data-answer-state": I,
-      disabled: s || v || k || m,
+      disabled: c || v || k || m,
       "data-is-not-checked": p,
+      "data-a": "intr",
       onClick: (b) => {
         g(
           d === o.PREDICTION ? f : C === S.RESOLVED
@@ -82,9 +83,9 @@ const E = {
             }
           }
         ) }),
-        /* @__PURE__ */ l(J, { children: [
+        /* @__PURE__ */ l(J, { "data-a": "intr", children: [
           n && P && ((N = E[P]) == null ? void 0 : N.call(E, n)),
-          /* @__PURE__ */ e(K, { children: r }),
+          /* @__PURE__ */ e(K, { "data-a": "intr", children: r }),
           W && /* @__PURE__ */ l(X, { children: [
             D,
             /* @__PURE__ */ e(Y, { children: "pts" })
@@ -99,5 +100,5 @@ const E = {
   );
 };
 export {
-  st as VotingOption
+  ct as VotingOption
 };

package/lib/ui/navigation/button/index.js

@@ -1,22 +1,23 @@
-import { jsx as t, jsxs as l, Fragment as d } from "react/jsx-runtime";
+import { jsx as e, jsxs as d, Fragment as l } from "react/jsx-runtime";
 import { cx as m } from "@linaria/core";
 import { SButton as s, SelectedButton as u, HoverIconState as h, HoverIconLeaderboardState as p, ButtonIcon as B, ButtonLabel as f } from "./styles.js";
-const I = ({ disabled: n, active: r, onClick: a, label: c, icon: o, id: e }) => /* @__PURE__ */ t(
+const i = ({ disabled: n, active: r, onClick: a, label: c, icon: o, id: t }) => /* @__PURE__ */ e(
   s,
   {
     onClick: a,
+    "data-a": "intr",
     disabled: n,
     className: m(
       r && u,
-      !r && (e === "channels" || e === "featuredGroups") && h,
-      !r && e === "leaderboard" && p
+      !r && (t === "channels" || t === "featuredGroups") && h,
+      !r && t === "leaderboard" && p
     ),
-    children: /* @__PURE__ */ l(d, { children: [
-      o && /* @__PURE__ */ t(B, { children: o }),
-      /* @__PURE__ */ t(f, { children: c })
+    children: /* @__PURE__ */ d(l, { children: [
+      o && /* @__PURE__ */ e(B, { children: o }),
+      /* @__PURE__ */ e(f, { children: c })
     ] })
   }
 );
 export {
-  I as Button
+  i as Button
 };

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

@@ -1,7 +1,7 @@
 import { jsxs as h, jsx as d } from "react/jsx-runtime";
 import { AutoPlayVideo as C, QuestionImages as I } from "@streamlayer/sdk-web-types";
 import { VideoPlayer as N } from "../../video-player/index.js";
-import { Container as v, contentContainerClassName as u, ImageContainer as D, Image as P, Content as b, Title as x, Description as B } from "./styles.js";
+import { Container as v, contentContainerClassName as u, ImageContainer as P, Image as b, Content as x, Title as B, Description as D } from "./styles.js";
 const U = ({
   instantView: o,
   isDetail: l,
@@ -17,20 +17,20 @@ const U = ({
         source: o.video.url,
         poster: o.video.thumbnailUrl,
         controlVideo: g,
-        autoPlay: o.autoPlayVideo === C.ENABLED
+        autoPlay: l && o.autoPlayVideo === C.ENABLED
       }
     ),
     (o == null ? void 0 : o.image) && !(o != null && o.video) && /* @__PURE__ */ d(
-      D,
+      P,
       {
         className: u,
         "data-rounded": o.imageMode === I.ROUNDED,
-        children: /* @__PURE__ */ d(P, { src: o == null ? void 0 : o.image })
+        children: /* @__PURE__ */ d(b, { src: o == null ? void 0 : o.image })
       }
     ),
-    /* @__PURE__ */ h(b, { children: [
-      /* @__PURE__ */ d(x, { children: l && e ? m : y }),
-      /* @__PURE__ */ d(B, { children: l && e ? c : p })
+    /* @__PURE__ */ h(x, { children: [
+      /* @__PURE__ */ d(B, { children: l && e ? m : y }),
+      /* @__PURE__ */ d(D, { children: l && e ? c : p })
     ] })
   ] });
 };

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

@@ -1,63 +1,59 @@
-import { jsxs as c, jsx as n, Fragment as j } from "react/jsx-runtime";
-import { VideoPlayer as k } from "../../video-player/index.js";
-import { Account as x } from "./account/index.js";
-import { Container as B, Details as E, Body as N, ImagesContainer as i, ImageFullSize as l, ImageHalfSize as p, ImagesBlock as a } from "./styles.js";
-const R = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), S = (t) => t == null ? void 0 : t.replace(R, ""), V = ({
-  image: t,
-  body: C,
-  account: z,
-  accountVerified: F,
-  tweet: s,
-  isDetail: d,
-  controlVideo: T
-}) => {
-  var m, g, H, U, f, u, v, I, y;
-  const r = (g = (m = s == null ? void 0 : s.meta) == null ? void 0 : m.extendedEntities) == null ? void 0 : g.media, o = r == null ? void 0 : r.find(({ type: e }) => e === "photo"), h = (u = (f = (U = (H = r == null ? void 0 : r[0]) == null ? void 0 : H.videoInfo) == null ? void 0 : U.variants) == null ? void 0 : f.find(
-    ({ contentType: e }) => e === "video/mp4"
-  )) == null ? void 0 : u.url;
-  return /* @__PURE__ */ c(B, { children: [
-    /* @__PURE__ */ c(E, { children: [
-      /* @__PURE__ */ n(
-        x,
-        {
-          image: t,
-          name: (v = s == null ? void 0 : s.meta) == null ? void 0 : v.accountName,
-          userName: z,
-          verified: F,
-          createdTweet: s == null ? void 0 : s.date
-        }
-      ),
-      /* @__PURE__ */ n(N, { children: S(C) }),
-      !d && o && /* @__PURE__ */ n(i, { children: /* @__PURE__ */ n(l, { src: r == null ? void 0 : r[0].mediaUrlHttps }) }),
-      d && o && /* @__PURE__ */ c(j, { children: [
-        (r == null ? void 0 : r.length) === 1 && /* @__PURE__ */ n(i, { children: /* @__PURE__ */ n(l, { src: r[0].mediaUrlHttps }) }),
-        (r == null ? void 0 : r.length) === 2 && /* @__PURE__ */ c(i, { children: [
-          /* @__PURE__ */ n(p, { src: r[0].mediaUrlHttps }),
-          /* @__PURE__ */ n(p, { src: r[1].mediaUrlHttps })
-        ] }),
-        (r == null ? void 0 : r.length) === 3 && /* @__PURE__ */ c(i, { children: [
-          /* @__PURE__ */ n(p, { src: r[0].mediaUrlHttps }),
-          /* @__PURE__ */ c(a, { children: [
-            /* @__PURE__ */ n(l, { src: r[1].mediaUrlHttps }),
-            /* @__PURE__ */ n(l, { src: r[2].mediaUrlHttps })
-          ] })
-        ] }),
-        (r == null ? void 0 : r.length) === 4 && /* @__PURE__ */ c(i, { children: [
-          /* @__PURE__ */ c(a, { children: [
-            /* @__PURE__ */ n(l, { src: r[0].mediaUrlHttps }),
-            /* @__PURE__ */ n(l, { src: r[1].mediaUrlHttps })
+import { jsxs as o, jsx as s, Fragment as j } from "react/jsx-runtime";
+import { memo as k, useMemo as x } from "react";
+import { VideoPlayer as B } from "../../video-player/index.js";
+import { Account as E } from "./account/index.js";
+import { Container as L, Details as N, Body as R, ImagesContainer as l, ImageFullSize as t, ImageHalfSize as p, ImagesBlock as a } from "./styles.js";
+const S = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), A = (c) => c == null ? void 0 : c.replace(S, ""), $ = k(
+  ({ image: c, body: y, account: C, accountVerified: z, tweet: n, isDetail: d, controlVideo: F }) => {
+    var h, g, H, U, f;
+    const r = (g = (h = n == null ? void 0 : n.meta) == null ? void 0 : h.extendedEntities) == null ? void 0 : g.media, i = r == null ? void 0 : r.find(({ type: e }) => e === "photo"), m = x(() => {
+      var e, u, v, I;
+      return (I = (v = (u = (e = r == null ? void 0 : r[0]) == null ? void 0 : e.videoInfo) == null ? void 0 : u.variants) == null ? void 0 : v.findLast(({ contentType: T }) => T === "video/mp4")) == null ? void 0 : I.url;
+    }, [r]);
+    return /* @__PURE__ */ o(L, { children: [
+      /* @__PURE__ */ o(N, { children: [
+        /* @__PURE__ */ s(
+          E,
+          {
+            image: c,
+            name: (H = n == null ? void 0 : n.meta) == null ? void 0 : H.accountName,
+            userName: C,
+            verified: z,
+            createdTweet: n == null ? void 0 : n.date
+          }
+        ),
+        /* @__PURE__ */ s(R, { children: A(y) }),
+        !d && i && /* @__PURE__ */ s(l, { children: /* @__PURE__ */ s(t, { src: r == null ? void 0 : r[0].mediaUrlHttps }) }),
+        d && i && /* @__PURE__ */ o(j, { children: [
+          (r == null ? void 0 : r.length) === 1 && /* @__PURE__ */ s(l, { children: /* @__PURE__ */ s(t, { src: r[0].mediaUrlHttps }) }),
+          (r == null ? void 0 : r.length) === 2 && /* @__PURE__ */ o(l, { children: [
+            /* @__PURE__ */ s(p, { src: r[0].mediaUrlHttps }),
+            /* @__PURE__ */ s(p, { src: r[1].mediaUrlHttps })
+          ] }),
+          (r == null ? void 0 : r.length) === 3 && /* @__PURE__ */ o(l, { children: [
+            /* @__PURE__ */ s(p, { src: r[0].mediaUrlHttps }),
+            /* @__PURE__ */ o(a, { children: [
+              /* @__PURE__ */ s(t, { src: r[1].mediaUrlHttps }),
+              /* @__PURE__ */ s(t, { src: r[2].mediaUrlHttps })
+            ] })
           ] }),
-          /* @__PURE__ */ c(a, { children: [
-            /* @__PURE__ */ n(l, { src: r[2].mediaUrlHttps }),
-            /* @__PURE__ */ n(l, { src: r[3].mediaUrlHttps })
+          (r == null ? void 0 : r.length) === 4 && /* @__PURE__ */ o(l, { children: [
+            /* @__PURE__ */ o(a, { children: [
+              /* @__PURE__ */ s(t, { src: r[0].mediaUrlHttps }),
+              /* @__PURE__ */ s(t, { src: r[1].mediaUrlHttps })
+            ] }),
+            /* @__PURE__ */ o(a, { children: [
+              /* @__PURE__ */ s(t, { src: r[2].mediaUrlHttps }),
+              /* @__PURE__ */ s(t, { src: r[3].mediaUrlHttps })
+            ] })
           ] })
         ] })
-      ] })
-    ] }),
-    !o && (((I = r == null ? void 0 : r[0]) == null ? void 0 : I.type) === "video" || ((y = r == null ? void 0 : r[0]) == null ? void 0 : y.type) === "animated_gif") && h && /* @__PURE__ */ n(k, { source: h, poster: r[0].mediaUrlHttps, controlVideo: T })
-  ] });
-};
+      ] }),
+      !i && (((U = r == null ? void 0 : r[0]) == null ? void 0 : U.type) === "video" || ((f = r == null ? void 0 : r[0]) == null ? void 0 : f.type) === "animated_gif") && m && /* @__PURE__ */ s(B, { source: m, poster: r[0].mediaUrlHttps, controlVideo: F })
+    ] });
+  }
+);
 export {
-  V as TwitterContent,
-  S as sanitizeContent
+  $ as TwitterContent,
+  A as sanitizeContent
 };

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

@@ -9,6 +9,7 @@ export declare const COLORS: {
     PRIMARY_TEXT: string;
     SECONDARY_TEXT: string;
     QUESTION_TYPE_ICON: string;
+    QUESTION_BODY_TEXT: string;
     SUCCESS: string;
     UNSUCCESS: string;
     SECONDARY_RED1: string;

package/lib/ui/theme/constants.js

@@ -11,6 +11,7 @@ const R = {
   PRIMARY_TEXT: "#090E13",
   SECONDARY_TEXT: "rgba(10, 14, 19, 0.70)",
   QUESTION_TYPE_ICON: "#1D7BFF",
+  QUESTION_BODY_TEXT: "#090E13",
   SUCCESS: "#107D57",
   UNSUCCESS: "#DF2F3B",
   SECONDARY_RED1: "#DF2F3B",
@@ -87,7 +88,7 @@ const R = {
   SIZE_DEFAULT1: "14px",
   SIZE_DEFAULT2: "12px",
   LINE_HEIGHT: "24px",
-  MARGIN_TITLE_DEFAULT: "24px 0px"
+  MARGIN_TITLE_DEFAULT: "0px 0px 12px"
 }, A = {
   xs: 324,
   sm: 576,

package/lib/ui/theme/masters-theme.js

@@ -94,7 +94,7 @@ const _ = {
   --font-size-secondary: ${t.SIZE_DEFAULT1};
   --font-size-small: ${t.SIZE_DEFAULT2};
   --line-height-default: ${t.LINE_HEIGHT};
-  --margin-title-default: 0px;
+  --margin-title-default: 0px 0px 12px;
   --font-header-title: 20px;
 
   --header-offset: 0px;

package/lib/ui/video-player/index.js

@@ -1,98 +1,114 @@
-import { jsxs as S, jsx as i } from "react/jsx-runtime";
+import { jsxs as k, jsx as a } from "react/jsx-runtime";
 import { cx as C } from "@linaria/core";
-import { useRef as M, useState as y, useCallback as h, useEffect as E } from "react";
-import { eventBus as j } from "@streamlayer/sdk-web-interfaces";
-import { SvgIcon as I } from "../icons/index.js";
-import { Container as k, ToggleIconPause as A, HideControls as B, Player as F, Poster as N, Control as q } from "./styles.js";
-const z = (t) => {
-  for (const r of t)
+import { useRef as U, useState as p, useCallback as w, useEffect as O } from "react";
+import { eventBus as F } from "@streamlayer/sdk-web-interfaces";
+import { SvgIcon as T } from "../icons/index.js";
+import { Loader as A } from "../loader/index.js";
+import { Container as B, ToggleIconPause as N, HideControls as q, Player as z, Poster as D, Control as H } from "./styles.js";
+const G = (s) => {
+  for (const r of s)
     r.isIntersecting ? r.target instanceof HTMLVideoElement && r.target.autoplay && r.target.play() : r.target instanceof HTMLVideoElement && !r.target.paused && r.target.pause();
-}, O = new IntersectionObserver(z, { threshold: 0.5 }), p = /* @__PURE__ */ new Set(), D = (t) => {
-  O.observe(t), p.add(t);
-}, G = (t) => {
-  O.unobserve(t), p.delete(t);
-}, J = () => {
-  for (const t of p)
-    t instanceof HTMLVideoElement && !t.paused && t.pause();
-}, Z = ({
-  poster: t,
+}, I = new IntersectionObserver(G, { threshold: 0.5 }), v = /* @__PURE__ */ new Set(), J = (s) => {
+  I.observe(s), v.add(s);
+}, K = (s) => {
+  I.unobserve(s), v.delete(s);
+}, Q = () => {
+  for (const s of v)
+    s instanceof HTMLVideoElement && !s.paused && s.pause();
+}, R = ({
+  poster: s,
   source: r,
-  aspectRatio: g,
+  aspectRatio: y,
   controlVideo: n,
-  onPlay: o,
-  onPause: u,
-  autoPlay: T,
-  hideControls: c,
-  className: w
+  onPlay: f,
+  onPause: m,
+  autoPlay: x,
+  hideControls: b,
+  className: M
 }) => {
-  const e = M(null), [l, f] = y(!1), [v, m] = y(!0), x = h(() => {
+  const t = U(null), [d, o] = p(!1), [h, L] = p(!1), [E, c] = p(!0), P = w(() => {
     n == null || n({ muted: !0 });
-  }, [n]), a = h(() => {
+  }, [n]), l = w(() => {
     n == null || n({ muted: !1 });
-  }, [n]), H = (s) => {
-    s.stopPropagation();
-    const b = e == null ? void 0 : e.current;
-    if (b) {
-      if (l)
-        b.pause();
+  }, [n]), S = (e) => {
+    e.stopPropagation();
+    const i = t == null ? void 0 : t.current;
+    if (i) {
+      if (d)
+        i.pause();
       else {
-        const d = e == null ? void 0 : e.current;
-        if (!d)
+        const u = t == null ? void 0 : t.current;
+        if (!u)
           return;
-        J(), d.play().catch((P) => console.log(P)), m(!1);
+        Q(), u.play().catch((g) => console.log(g)), c(!1);
       }
-      j.emit("interactions", {
+      F.emit("interactions", {
         action: "tap",
         payload: {}
       });
     }
-  }, L = () => {
-    var s;
-    (s = e == null ? void 0 : e.current) == null || s.load(), m(!0);
+  }, j = () => {
+    var e;
+    (e = t == null ? void 0 : t.current) == null || e.load(), c(!0);
   };
-  return E(() => {
-    const s = e == null ? void 0 : e.current;
+  return O(() => {
+    const e = t == null ? void 0 : t.current;
     return () => {
-      s && (s.paused || a());
+      e && (e.paused || l());
     };
-  }, [a]), E(() => {
-    const s = e.current;
-    return s ? (D(s), () => G(s)) : () => {
+  }, [l]), O(() => {
+    const e = t.current;
+    return e ? (J(e), () => K(e)) : () => {
     };
-  }, []), /* @__PURE__ */ S(
-    k,
+  }, []), /* @__PURE__ */ k(
+    B,
     {
-      onClick: c ? void 0 : H,
-      className: C(l && A, c && B, w),
-      style: g ? { aspectRatio: g } : {},
+      onClick: b ? void 0 : S,
+      "data-a": "intr",
+      className: C(d && N, b && q, M),
+      style: y ? { aspectRatio: y } : {},
       children: [
-        /* @__PURE__ */ i(
-          F,
+        /* @__PURE__ */ a(
+          z,
           {
-            ref: e,
+            ref: t,
             src: r,
-            autoPlay: T,
+            autoPlay: x,
             onPlay: () => {
-              x(), f(!0), m(!1), o == null || o();
+              P(), o(!0), c(!1), f == null || f();
+            },
+            onError: async (e) => {
+              try {
+                if (e.target instanceof HTMLVideoElement) {
+                  L(!0);
+                  const u = await (await fetch(e.target.src)).blob(), g = URL.createObjectURL(u);
+                  e.target.src = g;
+                }
+              } catch (i) {
+                console.error("video fallback fetch failed", i), o(!0), c(!0);
+              } finally {
+                L(!1);
+              }
             },
             onPause: () => {
-              a(), f(!1), u == null || u();
+              l(), o(!1), m == null || m();
             },
             onEnded: () => {
-              a(), f(!1), L();
+              l(), o(!1), j();
             },
-            style: { visibility: v ? "hidden" : "visible" },
+            style: { visibility: E ? "hidden" : "visible" },
             controls: !1,
             playsInline: !0
           }
         ),
-        /* @__PURE__ */ i(N, { src: t, style: { visibility: v ? "visible" : "hidden" } }),
-        !c && /* @__PURE__ */ i(q, { children: l ? /* @__PURE__ */ i(I, { name: "icon-pause" }) : /* @__PURE__ */ i(I, { name: "icon-play" }) })
+        /* @__PURE__ */ a(D, { src: s, style: { visibility: E ? "visible" : "hidden" } }),
+        !b && !h && /* @__PURE__ */ a(H, { children: d ? /* @__PURE__ */ a(T, { name: "icon-pause" }) : /* @__PURE__ */ a(T, { name: "icon-play" }) }),
+        h && /* @__PURE__ */ a(H, { children: /* @__PURE__ */ a(A, {}) })
       ]
     }
   );
 };
 export {
-  Z as VideoPlayer,
-  J as pauseAllVideos
+  R as VideoPlayer,
+  Q as pauseAllVideos
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "1.22.5",
+  "version": "1.23.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -69,19 +69,19 @@
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
     "uuid": "^11.1.0",
-    "@streamlayer/feature-gamification": "^1.16.7",
-    "@streamlayer/react-polyfills": "^0.1.14",
-    "@streamlayer/sdk-web": "^1.10.7",
-    "@streamlayer/sdk-web-analytics": "^1.7.7",
-    "@streamlayer/sdk-web-anonymous-auth": "^1.1.33",
-    "@streamlayer/sdk-web-api": "^1.8.7",
-    "@streamlayer/sdk-web-core": "^1.11.9",
-    "@streamlayer/sdk-web-features": "^1.0.54",
-    "@streamlayer/sdk-web-interfaces": "^1.4.20",
-    "@streamlayer/sdk-web-logger": "^1.0.54",
-    "@streamlayer/sdk-web-notifications": "^1.3.16",
-    "@streamlayer/sdk-web-storage": "^1.0.54",
-    "@streamlayer/sdk-web-types": "^1.10.11"
+    "@streamlayer/feature-gamification": "^1.16.9",
+    "@streamlayer/react-polyfills": "^0.1.16",
+    "@streamlayer/sdk-web": "^1.10.9",
+    "@streamlayer/sdk-web-analytics": "^1.7.9",
+    "@streamlayer/sdk-web-anonymous-auth": "^1.1.35",
+    "@streamlayer/sdk-web-api": "^1.8.9",
+    "@streamlayer/sdk-web-core": "^1.11.11",
+    "@streamlayer/sdk-web-features": "^1.0.56",
+    "@streamlayer/sdk-web-interfaces": "^1.5.0",
+    "@streamlayer/sdk-web-logger": "^1.0.56",
+    "@streamlayer/sdk-web-notifications": "^1.3.18",
+    "@streamlayer/sdk-web-storage": "^1.0.56",
+    "@streamlayer/sdk-web-types": "^1.10.13"
   },
   "nx": {
     "implicitDependencies": [
@@ -121,7 +121,7 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@streamlayer/react": "^1.14.7"
+    "@streamlayer/react": "^1.15.0"
   },
   "dependencies": {
     "@dailymotion/vast-client": "^6.2.0",