@streamlayer/react-ui 0.95.1 → 0.96.0

package/lib/ui/modal/index.js

@@ -1,34 +1,44 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { cx as l } from "@linaria/core";
-import { styled as m } from "@linaria/react";
-import { r as n } from "../../index-jRXrW6ie.js";
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { cx as a } from "@linaria/core";
+import { styled as d } from "@linaria/react";
+import { useState as m, useCallback as f, useEffect as l } from "react";
+import { r as c } from "../../index-jRXrW6ie.js";
 import "../../index-uEuzH3jr.js";
-import "react";
-const c = /* @__PURE__ */ m("div")({
+const u = /* @__PURE__ */ d("div")({
   name: "StaticContainer",
   class: "svm502q",
   propsAsIs: !1
-}), i = "fd3gza8", d = `
+}), p = "fd3gza8", v = `
   body {
     overflow: hidden !important;
   }
-`, p = `
+`, x = `
   .sl-hide-on-modal {
     display: none !important;
   }
-`, C = ({
-  Modal: o,
-  container: t,
-  fixedView: r,
-  useContainer: s
-}) => t.current ? s ? n.createPortal(/* @__PURE__ */ a(c, {
-  className: l(r && i),
-  children: [o, r && /* @__PURE__ */ e("style", {
-    children: d
-  }), !r && /* @__PURE__ */ e("style", {
-    children: p
-  })]
-}), t.current, "modal-node") : n.createPortal(o, t.current, "modal-node") : null;
+`, y = (r) => {
+  const [e, o] = m(r), t = f(() => o(!1), []);
+  return l(() => (r && document.addEventListener("scroll", t), () => {
+    document.removeEventListener("scroll", t);
+  }), [r, t]), l(() => {
+    e === !1 && document.removeEventListener("scroll", t);
+  }, [e, t]), [e];
+}, V = ({
+  children: r,
+  container: e,
+  fixedView: o,
+  useContainer: t
+}) => {
+  const [s] = y(o);
+  return e.current ? t ? c.createPortal(/* @__PURE__ */ i(u, {
+    className: a(s && p),
+    children: [r, s && /* @__PURE__ */ n("style", {
+      children: v
+    }), !s && /* @__PURE__ */ n("style", {
+      children: x
+    })]
+  }), e.current, "modal-node") : c.createPortal(r, e.current, "modal-node") : null;
+};
 export {
-  C as createModal
+  V as ModalPortal
 };

package/lib/ui/questions/insight/index.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 import { InsightHistory } from '@streamlayer/sdk-web-types';
+import { VideoPlayerProps } from '../../video-player';
 export type InsightContentProps = InsightHistory & {
     isDetail?: boolean;
+    controlVideo: VideoPlayerProps['controlVideo'];
 };
 export declare const InsightContent: React.FC<InsightContentProps>;

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

@@ -1,21 +1,33 @@
 import { jsxs as c, jsx as d } from "react/jsx-runtime";
-import { VideoPlayer as u } from "../../video-player/index.js";
-import { Container as v, Image as b, Content as x, Title as C, Description as I } from "./styles.js";
+import { VideoPlayer as v } from "../../video-player/index.js";
+import { Container as b, Image as x, Content as C, Title as I, Description as T } from "./styles.js";
 import "react";
 import "../../icons/index.js";
 import "@linaria/react";
 import "../../video-player/styles.js";
-const q = ({ instantView: r, isDetail: l, notification: o }) => {
-  const m = r == null ? void 0 : r.heading, p = r == null ? void 0 : r.body, h = m || p, g = o == null ? void 0 : o.title, y = o == null ? void 0 : o.body;
-  return /* @__PURE__ */ c(v, { children: [
-    (r == null ? void 0 : r.video) && /* @__PURE__ */ d(u, { source: r.video.url, poster: r.video.thumbnailUrl }),
-    (r == null ? void 0 : r.image) && !(r != null && r.video) && /* @__PURE__ */ d(b, { src: r == null ? void 0 : r.image }),
-    /* @__PURE__ */ c(x, { children: [
-      /* @__PURE__ */ d(C, { children: l && h ? m : g }),
-      /* @__PURE__ */ d(I, { children: l && h ? p : y })
+const z = ({
+  instantView: r,
+  isDetail: l,
+  notification: o,
+  controlVideo: g
+}) => {
+  const m = r == null ? void 0 : r.heading, p = r == null ? void 0 : r.body, h = m || p, y = o == null ? void 0 : o.title, u = o == null ? void 0 : o.body;
+  return /* @__PURE__ */ c(b, { children: [
+    (r == null ? void 0 : r.video) && /* @__PURE__ */ d(
+      v,
+      {
+        source: r.video.url,
+        poster: r.video.thumbnailUrl,
+        controlVideo: g
+      }
+    ),
+    (r == null ? void 0 : r.image) && !(r != null && r.video) && /* @__PURE__ */ d(x, { src: r == null ? void 0 : r.image }),
+    /* @__PURE__ */ c(C, { children: [
+      /* @__PURE__ */ d(I, { children: l && h ? m : y }),
+      /* @__PURE__ */ d(T, { children: l && h ? p : u })
     ] })
   ] });
 };
 export {
-  q as InsightContent
+  z as InsightContent
 };

package/lib/ui/questions/twitter/index.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 import { TweetHistory } from '@streamlayer/sdk-web-types';
+import { VideoPlayerProps } from '../../video-player';
 export type TwitterContentProps = TweetHistory & {
     isDetail?: boolean;
+    controlVideo: VideoPlayerProps['controlVideo'];
 };
 export declare const TwitterContent: React.FC<TwitterContentProps>;

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

@@ -1,29 +1,30 @@
-import { jsxs as t, jsx as n, Fragment as T } from "react/jsx-runtime";
-import { VideoPlayer as j } from "../../video-player/index.js";
-import { Account as k } from "./account/index.js";
-import { Container as x, Details as B, Body as E, ImagesContainer as c, ImageFullSize as i, ImageHalfSize as e, ImagesBlock as m } from "./styles.js";
+import { jsxs as t, 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 c, ImageFullSize as i, ImageHalfSize as e, ImagesBlock as m } from "./styles.js";
 import "react";
 import "../../icons/index.js";
 import "@linaria/react";
 import "../../video-player/styles.js";
 import "../../../utils/common.js";
 import "./account/styles.js";
-const N = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), R = (o) => o == null ? void 0 : o.replace(N, ""), G = ({
+const R = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), S = (o) => o == null ? void 0 : o.replace(R, ""), J = ({
   image: o,
   body: C,
   account: z,
   accountVerified: F,
   tweet: s,
-  isDetail: a
+  isDetail: a,
+  controlVideo: T
 }) => {
   var h, g, H, U, f, u, v, I, y;
   const r = (g = (h = s == null ? void 0 : s.meta) == null ? void 0 : h.extendedEntities) == null ? void 0 : g.media, l = r == null ? void 0 : r.find(({ type: p }) => p === "photo"), d = (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: p }) => p === "video/mp4"
   )) == null ? void 0 : u.url;
-  return /* @__PURE__ */ t(x, { children: [
-    /* @__PURE__ */ t(B, { children: [
+  return /* @__PURE__ */ t(B, { children: [
+    /* @__PURE__ */ t(E, { children: [
       /* @__PURE__ */ n(
-        k,
+        x,
         {
           image: o,
           name: (v = s == null ? void 0 : s.meta) == null ? void 0 : v.accountName,
@@ -32,9 +33,9 @@ const N = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), R = (o) => o == null ?
           createdTweet: s == null ? void 0 : s.date
         }
       ),
-      /* @__PURE__ */ n(E, { children: R(C) }),
+      /* @__PURE__ */ n(N, { children: S(C) }),
       !a && l && /* @__PURE__ */ n(c, { children: /* @__PURE__ */ n(i, { src: r == null ? void 0 : r[0].mediaUrlHttps }) }),
-      a && l && /* @__PURE__ */ t(T, { children: [
+      a && l && /* @__PURE__ */ t(j, { children: [
         (r == null ? void 0 : r.length) === 1 && /* @__PURE__ */ n(c, { children: /* @__PURE__ */ n(i, { src: r[0].mediaUrlHttps }) }),
         (r == null ? void 0 : r.length) === 2 && /* @__PURE__ */ t(c, { children: [
           /* @__PURE__ */ n(e, { src: r[0].mediaUrlHttps }),
@@ -59,9 +60,9 @@ const N = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), R = (o) => o == null ?
         ] })
       ] })
     ] }),
-    !l && (((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") && d && /* @__PURE__ */ n(j, { source: d, poster: r[0].mediaUrlHttps })
+    !l && (((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") && d && /* @__PURE__ */ n(k, { source: d, poster: r[0].mediaUrlHttps, controlVideo: T })
   ] });
 };
 export {
-  G as TwitterContent
+  J as TwitterContent
 };

package/lib/ui/video-player/index.d.ts

@@ -1,7 +1,11 @@
 /// <reference types="react" />
+type ControlVideoProps = {
+    muted: boolean;
+};
 export type VideoPlayerProps = {
     poster?: string;
     source?: string;
+    controlVideo?: (props: ControlVideoProps) => void;
 };
 /**
  * VideoPlayer component for playing videos with a poster image.
@@ -31,3 +35,4 @@ export type VideoPlayerProps = {
  * @returns {JSX.Element} The rendered VideoPlayer component.
  */
 export declare const VideoPlayer: React.FC<VideoPlayerProps>;
+export {};

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

@@ -1,54 +1,62 @@
-import { jsxs as y, jsx as o } from "react/jsx-runtime";
-import { useRef as m, useState as b, useEffect as P } from "react";
-import { SvgIcon as h } from "../icons/index.js";
-import { Container as O, Player as w, Poster as E, Control as I } from "./styles.js";
+import { jsxs as h, jsx as o } from "react/jsx-runtime";
+import { useRef as O, useState as d, useEffect as w } from "react";
+import { SvgIcon as E } from "../icons/index.js";
+import { Container as I, Player as S, Poster as x, Control as C } from "./styles.js";
 import "@linaria/react";
-const S = (r, c) => {
-  for (const e of r)
-    e.isIntersecting || e.target instanceof HTMLVideoElement && !e.target.paused && (c.unobserve(e.target), e.target.pause());
-}, v = new IntersectionObserver(S, { threshold: 0.5 }), a = /* @__PURE__ */ new Set(), V = (r) => {
-  v.observe(r), a.add(r);
-}, i = (r) => {
-  v.unobserve(r), a.delete(r);
-}, H = ({ poster: r, source: c }) => {
-  const e = m(null), [l, u] = b(!1), [f, d] = b(!0), g = () => {
-    const s = e == null ? void 0 : e.current;
-    if (s)
+const L = (t, c) => {
+  for (const s of t)
+    s.isIntersecting || s.target instanceof HTMLVideoElement && !s.target.paused && (c.unobserve(s.target), s.target.pause());
+}, g = new IntersectionObserver(L, { threshold: 0.5 }), f = /* @__PURE__ */ new Set(), T = (t) => {
+  g.observe(t), f.add(t);
+}, u = (t) => {
+  g.unobserve(t), f.delete(t);
+}, q = ({ poster: t, source: c, controlVideo: s }) => {
+  const e = O(null), [l, a] = d(!1), [b, m] = d(!0), p = () => {
+    s == null || s({ muted: !0 });
+  }, v = () => {
+    s == null || s({ muted: !1 });
+  }, y = () => {
+    const n = e == null ? void 0 : e.current;
+    if (n)
       if (l)
-        s.pause(), e.current && i(e.current);
+        n.pause(), e.current && u(e.current);
       else {
-        const n = e == null ? void 0 : e.current;
-        if (!n)
+        const i = e == null ? void 0 : e.current;
+        if (!i)
           return;
-        for (const t of a)
-          t !== n && t instanceof HTMLVideoElement && !t.paused && (t.pause(), i(t));
-        V(n), n.play().catch((t) => console.log(t)), d(!1);
+        for (const r of f)
+          r !== i && r instanceof HTMLVideoElement && !r.paused && (r.pause(), u(r));
+        T(i), i.play().catch((r) => console.log(r)), m(!1);
       }
-  }, p = () => {
-    var s;
-    e.current && i(e.current), (s = e == null ? void 0 : e.current) == null || s.load(), d(!0);
+  }, P = () => {
+    var n;
+    e.current && u(e.current), (n = e == null ? void 0 : e.current) == null || n.load(), m(!0);
   };
-  return P(() => {
-    e.current && i(e.current);
-  }, []), /* @__PURE__ */ y(O, { onClick: g, children: [
+  return w(() => {
+    e.current && u(e.current);
+  }, []), /* @__PURE__ */ h(I, { onClick: y, children: [
     /* @__PURE__ */ o(
-      w,
+      S,
       {
         ref: e,
         src: c,
-        onPlay: () => u(!0),
-        onPause: () => u(!1),
+        onPlay: () => {
+          p(), a(!0);
+        },
+        onPause: () => {
+          v(), a(!1);
+        },
         onEnded: () => {
-          u(!1), p();
+          v(), a(!1), P();
         },
-        style: { visibility: f ? "hidden" : "visible" },
+        style: { visibility: b ? "hidden" : "visible" },
         playsInline: !0
       }
     ),
-    /* @__PURE__ */ o(E, { src: r, style: { visibility: f ? "visible" : "hidden" } }),
-    /* @__PURE__ */ o(I, { children: !l && /* @__PURE__ */ o(h, { name: "icon-play" }) })
+    /* @__PURE__ */ o(x, { src: t, style: { visibility: b ? "visible" : "hidden" } }),
+    /* @__PURE__ */ o(C, { children: !l && /* @__PURE__ */ o(E, { name: "icon-play" }) })
   ] });
 };
 export {
-  H as VideoPlayer
+  q as VideoPlayer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.95.1",
+  "version": "0.96.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -37,23 +37,24 @@
   "peerDependencies": {
     "@lottiefiles/react-lottie-player": "*",
     "@streamlayer/sl-eslib": "^5.67.0",
+    "nanoid": "3.3.7",
     "@types/lodash.throttle": "^4.1.9",
     "lodash.throttle": "^4.1.1",
     "react-infinite-scroller": "^1.2.6",
     "react-virtualized-auto-sizer": "^1.0.21",
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^0.37.1",
-    "@streamlayer/sdk-web": "^0.31.2",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.11.37",
-    "@streamlayer/sdk-web-api": "^0.21.2",
-    "@streamlayer/sdk-web-core": "^0.20.1",
-    "@streamlayer/sdk-web-features": "^0.11.19",
-    "@streamlayer/sdk-web-interfaces": "^0.20.4",
-    "@streamlayer/sdk-web-logger": "^0.5.15",
-    "@streamlayer/sdk-web-notifications": "^0.13.10",
-    "@streamlayer/sdk-web-storage": "^0.4.2",
-    "@streamlayer/sdk-web-types": "^0.22.2"
+    "@streamlayer/feature-gamification": "^0.37.2",
+    "@streamlayer/sdk-web": "^0.32.0",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.11.38",
+    "@streamlayer/sdk-web-api": "^0.22.0",
+    "@streamlayer/sdk-web-features": "^0.11.20",
+    "@streamlayer/sdk-web-core": "^0.21.0",
+    "@streamlayer/sdk-web-interfaces": "^0.20.5",
+    "@streamlayer/sdk-web-logger": "^0.5.16",
+    "@streamlayer/sdk-web-notifications": "^0.14.0",
+    "@streamlayer/sdk-web-storage": "^0.4.3",
+    "@streamlayer/sdk-web-types": "^0.22.3"
   },
   "nx": {
     "implicitDependencies": [
@@ -94,6 +95,6 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^4.3.1",
-    "@streamlayer/react": "^0.39.1"
+    "@streamlayer/react": "^0.40.0"
   }
 }