@streamlayer/react-ui 1.9.0 → 1.11.0

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

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

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

@@ -3,3 +3,4 @@ export declare const Player: import('@linaria/react').StyledComponent<import('re
 export declare const Poster: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
 export declare const Control: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const ToggleIconPause: import('@linaria/core').LinariaClassName;
+export declare const HideControls: import('@linaria/core').LinariaClassName;

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

@@ -7,19 +7,20 @@ const e = /* @__PURE__ */ s("div")({
   name: "Player",
   class: "p6703cq",
   propsAsIs: !1
-}), l = /* @__PURE__ */ s("img")({
+}), n = /* @__PURE__ */ s("img")({
   name: "Poster",
   class: "p12ow7zo",
   propsAsIs: !1
-}), n = /* @__PURE__ */ s("div")({
+}), l = /* @__PURE__ */ s("div")({
   name: "Control",
   class: "cdpal9o",
   propsAsIs: !1
-}), r = "t1xke4ml";
+}), t = "t1xke4ml", r = "h1yzxv57";
 export {
   e as Container,
-  n as Control,
+  l as Control,
+  r as HideControls,
   a as Player,
-  l as Poster,
-  r as ToggleIconPause
+  n as Poster,
+  t as ToggleIconPause
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "1.9.0",
+  "version": "1.11.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -51,7 +51,7 @@
   ],
   "peerDependencies": {
     "@lottiefiles/react-lottie-player": "^3.5.4",
-    "@streamlayer/sl-eslib": "^5.123.1",
+    "@streamlayer/sl-eslib": "^5.130.0",
     "@types/lodash.throttle": "^4.1.9",
     "lodash.throttle": "^4.1.1",
     "nanoid": "3.3.7",
@@ -59,18 +59,18 @@
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^1.6.3",
-    "@streamlayer/sdk-web": "^1.3.3",
-    "@streamlayer/sdk-web-analytics": "^1.3.3",
-    "@streamlayer/sdk-web-anonymous-auth": "^1.0.20",
-    "@streamlayer/sdk-web-api": "^1.5.3",
-    "@streamlayer/sdk-web-core": "^1.4.3",
-    "@streamlayer/sdk-web-features": "^1.0.20",
-    "@streamlayer/sdk-web-interfaces": "^1.1.15",
-    "@streamlayer/sdk-web-logger": "^1.0.20",
-    "@streamlayer/sdk-web-notifications": "^1.1.15",
-    "@streamlayer/sdk-web-storage": "^1.0.20",
-    "@streamlayer/sdk-web-types": "^1.6.3"
+    "@streamlayer/feature-gamification": "^1.8.0",
+    "@streamlayer/sdk-web": "^1.5.0",
+    "@streamlayer/sdk-web-analytics": "^1.4.1",
+    "@streamlayer/sdk-web-anonymous-auth": "^1.1.1",
+    "@streamlayer/sdk-web-api": "^1.6.1",
+    "@streamlayer/sdk-web-core": "^1.6.0",
+    "@streamlayer/sdk-web-features": "^1.0.22",
+    "@streamlayer/sdk-web-interfaces": "^1.2.1",
+    "@streamlayer/sdk-web-logger": "^1.0.22",
+    "@streamlayer/sdk-web-notifications": "^1.2.1",
+    "@streamlayer/sdk-web-storage": "^1.0.22",
+    "@streamlayer/sdk-web-types": "^1.7.1"
   },
   "nx": {
     "implicitDependencies": [
@@ -111,6 +111,6 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@streamlayer/react": "^1.6.0"
+    "@streamlayer/react": "^1.8.0"
   }
 }