@streamlayer/react-ui 1.1.0 → 1.2.1

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -54,18 +54,18 @@
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^1.1.0",
-    "@streamlayer/sdk-web": "^1.0.1",
-    "@streamlayer/sdk-web-analytics": "^1.0.1",
-    "@streamlayer/sdk-web-anonymous-auth": "^1.0.1",
-    "@streamlayer/sdk-web-api": "^1.1.0",
-    "@streamlayer/sdk-web-core": "^1.0.1",
-    "@streamlayer/sdk-web-features": "^1.0.1",
-    "@streamlayer/sdk-web-interfaces": "^1.0.1",
-    "@streamlayer/sdk-web-logger": "^1.0.1",
-    "@streamlayer/sdk-web-notifications": "^1.0.1",
-    "@streamlayer/sdk-web-storage": "^1.0.1",
-    "@streamlayer/sdk-web-types": "^1.1.0"
+    "@streamlayer/feature-gamification": "^1.2.1",
+    "@streamlayer/sdk-web": "^1.0.3",
+    "@streamlayer/sdk-web-analytics": "^1.0.3",
+    "@streamlayer/sdk-web-anonymous-auth": "^1.0.3",
+    "@streamlayer/sdk-web-api": "^1.1.2",
+    "@streamlayer/sdk-web-core": "^1.0.3",
+    "@streamlayer/sdk-web-features": "^1.0.3",
+    "@streamlayer/sdk-web-interfaces": "^1.0.3",
+    "@streamlayer/sdk-web-logger": "^1.0.3",
+    "@streamlayer/sdk-web-notifications": "^1.0.3",
+    "@streamlayer/sdk-web-storage": "^1.0.3",
+    "@streamlayer/sdk-web-types": "^1.1.2"
   },
   "nx": {
     "implicitDependencies": [
@@ -99,12 +99,13 @@
     "react-countup": "^6.5.3",
     "react-phone-number-input": "^3.4.3",
     "rollup-plugin-node-polyfills": "^0.2.1",
+    "screenfull": "^6.0.2",
     "tslib": "^2.6.3",
     "vite": "5.3.2",
     "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^4.3.2",
-    "@streamlayer/react": "^1.1.0"
+    "@streamlayer/react": "^1.1.2"
   }
 }