@streamlayer/react-ui 1.22.5 → 1.22.6

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/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,113 @@
-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,
+      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.22.6",
   "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.8",
+    "@streamlayer/react-polyfills": "^0.1.15",
+    "@streamlayer/sdk-web": "^1.10.8",
+    "@streamlayer/sdk-web-analytics": "^1.7.8",
+    "@streamlayer/sdk-web-anonymous-auth": "^1.1.34",
+    "@streamlayer/sdk-web-api": "^1.8.8",
+    "@streamlayer/sdk-web-core": "^1.11.10",
+    "@streamlayer/sdk-web-features": "^1.0.55",
+    "@streamlayer/sdk-web-interfaces": "^1.4.21",
+    "@streamlayer/sdk-web-logger": "^1.0.55",
+    "@streamlayer/sdk-web-notifications": "^1.3.17",
+    "@streamlayer/sdk-web-storage": "^1.0.55",
+    "@streamlayer/sdk-web-types": "^1.10.12"
   },
   "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.14.8"
   },
   "dependencies": {
     "@dailymotion/vast-client": "^6.2.0",