@streamlayer/react-ui 0.98.1 → 0.100.0

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

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

package/lib/utils/createDemo.js

@@ -1,45 +1,35 @@
-import { jsx as e, jsxs as g, Fragment as y } from "react/jsx-runtime";
-import { useMemo as u, useState as i, useEffect as E } from "react";
+import { jsx as t, jsxs as g, Fragment as y } from "react/jsx-runtime";
+import { useMemo as p, useState as c, useEffect as E } from "react";
 import { useStreamLayerApp as l } from "@streamlayer/react/useStreamLayerApp";
 import { anonymous as D } from "@streamlayer/sdk-web-anonymous-auth";
 import { Developer as w } from "./debug/components/developer.js";
 import { DeveloperStorage as x } from "./storage.js";
-import "@linaria/react";
-import "./debug/components/bypassLogin.js";
-import "./debug/components/copyLogs.js";
-import "./debug/components/styles.js";
-import "./debug/components/envToggle.js";
-import "./debug/components/eventInput.js";
-import "@nanostores/react";
-import "@streamlayer/sdk-web-core";
-import "./debug/components/sdkKey.js";
-import "@streamlayer/sdk-web-storage";
 function K({
   Component: o,
   Story: r,
   args: n,
   autoEnable: a
 }) {
-  const s = u(() => new x(), []), [p, f] = i(s.getEnv()), [c, v] = i(s.getSdkKey() || "set-sdk-key"), [m, k] = i(s.getEvent() || ""), S = u(() => {
-    const d = /* @__PURE__ */ new Set();
-    return d.add(D), d;
-  }, []), t = l({
-    sdkKey: c,
+  const s = p(() => new x(), []), [i, f] = c(s.getEnv()), [d, v] = c(s.getSdkKey() || "set-sdk-key"), [m, k] = c(s.getEvent() || ""), S = p(() => {
+    const u = /* @__PURE__ */ new Set();
+    return u.add(D), u;
+  }, []), e = l({
+    sdkKey: d,
     plugins: S,
-    production: p === "production",
+    production: i === "production",
     autoEnable: a
   });
   return E(() => {
-    m && t && t.createEventSession(m);
-  }, [t]), /* @__PURE__ */ g(y, { children: [
-    t ? /* @__PURE__ */ e(o, { Story: r, sdk: t, args: n }) : /* @__PURE__ */ e("div", { children: "wait sdk..." }),
-    /* @__PURE__ */ e(
+    m && e && e.createEventSession(m);
+  }, [e]), /* @__PURE__ */ g(y, { children: [
+    e ? /* @__PURE__ */ t(o, { Story: r, sdk: e, args: n }) : /* @__PURE__ */ t("div", { children: "wait sdk..." }),
+    /* @__PURE__ */ t(
       w,
       {
-        sdk: t,
-        sdkKey: c,
+        sdk: e,
+        sdkKey: d,
         setSdkKey: v,
-        env: p,
+        env: i,
         setEnv: f,
         event: m,
         setEvent: k
@@ -47,13 +37,13 @@ function K({
     )
   ] });
 }
-function O(o, r = !0) {
+function b(o, r = !0) {
   return {
     decorators: [
-      (n) => /* @__PURE__ */ e(K, { Story: n, Component: o, autoEnable: r })
+      (n) => /* @__PURE__ */ t(K, { Story: n, Component: o, autoEnable: r })
     ]
   };
 }
 export {
-  O as createDemo
+  b as createDemo
 };

package/lib/utils/debug/components/copyLogs.js

@@ -1,7 +1,6 @@
 import { jsxs as t, jsx as o } from "react/jsx-runtime";
 import { InputField as r } from "./styles.js";
-import "@linaria/react";
-const p = () => /* @__PURE__ */ t(r, { children: [
+const n = () => /* @__PURE__ */ t(r, { children: [
   /* @__PURE__ */ o("label", { children: "Subscription Logs" }),
   /* @__PURE__ */ o("button", { onClick: () => {
     navigator.clipboard.writeText(sessionStorage.getItem("slstreamlogs") || "").then(() => {
@@ -10,5 +9,5 @@ const p = () => /* @__PURE__ */ t(r, { children: [
   }, children: "Copy" })
 ] });
 export {
-  p as CopyLogs
+  n as CopyLogs
 };

package/lib/utils/debug/components/developer.js

@@ -1,5 +1,5 @@
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import { styled as n } from "@linaria/react";
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { styled as s } from "@linaria/react";
 import { useMemo as b, useState as h } from "react";
 import { DeveloperStorage as q } from "../../storage.js";
 import { BypassLogin as u } from "./bypassLogin.js";
@@ -7,70 +7,66 @@ import { CopyLogs as D } from "./copyLogs.js";
 import { EnvToggle as I } from "./envToggle.js";
 import { EventInput as B } from "./eventInput.js";
 import { SdkKey as v } from "./sdkKey.js";
-import "@streamlayer/sdk-web-storage";
-import "./styles.js";
-import "@nanostores/react";
-import "@streamlayer/sdk-web-core";
-const A = /* @__PURE__ */ n("div")({
+const A = /* @__PURE__ */ s("div")({
   name: "DeveloperContainer",
   class: "d1sqxt7l",
   propsAsIs: !1
-}), x = /* @__PURE__ */ n("div")({
+}), x = /* @__PURE__ */ s("div")({
   name: "DeveloperItems",
   class: "d1a3478s",
   propsAsIs: !1
-}), L = /* @__PURE__ */ n("button")({
+}), L = /* @__PURE__ */ s("button")({
   name: "BurgerBtn",
   class: "butjcq8",
   propsAsIs: !1
-}), P = ({
+}), G = ({
   sdk: r,
-  sdkKey: s,
+  sdkKey: m,
   setSdkKey: p,
-  env: i,
+  env: a,
   setEnv: t,
-  event: a,
+  event: i,
   setEvent: l,
   hideAuth: c,
   standalone: f = !1
 }) => {
   const e = b(() => new q(), []), [g, C] = h(f);
-  return f ? /* @__PURE__ */ m(x, {
+  return f ? /* @__PURE__ */ n(x, {
     children: [t && /* @__PURE__ */ o(I, {
-      env: i,
+      env: a,
       setEnv: t,
       storage: e
     }), p && /* @__PURE__ */ o(v, {
-      sdkKey: s,
+      sdkKey: m,
       setSdkKey: p,
       storage: e
     }), r && /* @__PURE__ */ o(B, {
       sdk: r,
       storage: e,
-      event: a,
+      event: i,
       setEvent: l
     }), !c && r && /* @__PURE__ */ o(u, {
       sdk: r,
       storage: e
     }), /* @__PURE__ */ o(D, {})]
-  }) : /* @__PURE__ */ m(A, {
-    children: [/* @__PURE__ */ m(L, {
+  }) : /* @__PURE__ */ n(A, {
+    children: [/* @__PURE__ */ n(L, {
       "data-opened": g.toString(),
       onClick: () => C((j) => !j),
       children: [/* @__PURE__ */ o("span", {}), /* @__PURE__ */ o("span", {}), /* @__PURE__ */ o("span", {})]
-    }), g && /* @__PURE__ */ m(x, {
+    }), g && /* @__PURE__ */ n(x, {
       children: [t && /* @__PURE__ */ o(I, {
-        env: i,
+        env: a,
         setEnv: t,
         storage: e
       }), p && /* @__PURE__ */ o(v, {
-        sdkKey: s,
+        sdkKey: m,
         setSdkKey: p,
         storage: e
       }), r && /* @__PURE__ */ o(B, {
         sdk: r,
         storage: e,
-        event: a,
+        event: i,
         setEvent: l
       }), !c && r && /* @__PURE__ */ o(u, {
         sdk: r,
@@ -80,5 +76,5 @@ const A = /* @__PURE__ */ n("div")({
   });
 };
 export {
-  P as Developer
+  G as Developer
 };

package/lib/utils/debug/components/eventInput.js

@@ -1,27 +1,26 @@
-import { jsx as o, jsxs as n } from "react/jsx-runtime";
+import { jsx as n, jsxs as o } from "react/jsx-runtime";
 import { useStore as d } from "@nanostores/react";
 import "@streamlayer/sdk-web-core";
-import { InputField as m } from "./styles.js";
-import "@linaria/react";
-const I = ({ sdk: t, storage: a, event: e, setEvent: l }) => {
+import { InputField as u } from "./styles.js";
+const y = ({ sdk: t, storage: a, event: e, setEvent: l }) => {
   var i;
   const s = d(t.sdkStore.providerStreamId), r = d(t.sdkStore.organizationSettings), c = !((i = r == null ? void 0 : r.data) != null && i.provider);
-  return /* @__PURE__ */ o("div", { children: /* @__PURE__ */ n(m, { children: [
-    /* @__PURE__ */ n("label", { children: [
+  return /* @__PURE__ */ n("div", { children: /* @__PURE__ */ o(u, { children: [
+    /* @__PURE__ */ o("label", { children: [
       c ? "Use StreamLayer event ids" : "Use your provider event ids",
       ", ",
-      /* @__PURE__ */ n("b", { children: [
+      /* @__PURE__ */ o("b", { children: [
         "currently configured (",
         s,
         ")"
       ] })
     ] }),
-    /* @__PURE__ */ o("input", { type: "text", value: e, onChange: (p) => l(p.target.value) }),
-    /* @__PURE__ */ o("button", { onClick: () => {
+    /* @__PURE__ */ n("input", { type: "text", value: e, onChange: (p) => l(p.target.value) }),
+    /* @__PURE__ */ n("button", { onClick: () => {
       t.createEventSession(e), a.setEvent(e);
     }, disabled: s === e, children: "set" })
   ] }) });
 };
 export {
-  I as EventInput
+  y as EventInput
 };

package/lib/utils/debug/components/sdkKey.js

@@ -1,14 +1,13 @@
 import { jsx as t, jsxs as l } from "react/jsx-runtime";
 import { useState as u } from "react";
-import { InputField as m } from "./styles.js";
-import "@linaria/react";
-const b = ({
-  sdkKey: r,
-  setSdkKey: i,
-  storage: n
+import { InputField as c } from "./styles.js";
+const h = ({
+  sdkKey: n,
+  setSdkKey: r,
+  storage: i
 }) => {
-  const [e, o] = u(r);
-  return /* @__PURE__ */ t("div", { children: /* @__PURE__ */ l(m, { children: [
+  const [e, o] = u(n);
+  return /* @__PURE__ */ t("div", { children: /* @__PURE__ */ l(c, { children: [
     /* @__PURE__ */ t("label", { children: "SDK Key" }),
     /* @__PURE__ */ t(
       "input",
@@ -21,10 +20,10 @@ const b = ({
       }
     ),
     /* @__PURE__ */ t("button", { onClick: () => {
-      n.setSdkKey(e), i(e);
+      i.setSdkKey(e), r(e);
     }, children: "set" })
   ] }) });
 };
 export {
-  b as SdkKey
+  h as SdkKey
 };

package/lib/utils/debug/index.js

@@ -1,34 +1,23 @@
-import { jsx as n } from "react/jsx-runtime";
-import { useMemo as a, useState as r } from "react";
-import { useStreamLayer as u } from "@streamlayer/react";
-import { Developer as v } from "./components/developer.js";
-import { DeveloperStorage as c } from "./storage.js";
-import "@linaria/react";
-import "../storage.js";
-import "@streamlayer/sdk-web-storage";
-import "./components/bypassLogin.js";
-import "./components/copyLogs.js";
-import "./components/styles.js";
-import "./components/envToggle.js";
-import "./components/eventInput.js";
-import "@nanostores/react";
-import "@streamlayer/sdk-web-core";
-import "./components/sdkKey.js";
-const h = () => {
-  const t = a(() => new c(), []), [e, o] = r(t.getEnv()), [m, s] = r(t.getSdkKey() || "set-sdk-key"), [p, i] = r(t.getEvent() || "");
+import { jsx as p } from "react/jsx-runtime";
+import { useMemo as u, useState as r } from "react";
+import { useStreamLayer as v } from "@streamlayer/react";
+import { Developer as c } from "./components/developer.js";
+import { DeveloperStorage as g } from "./storage.js";
+const i = () => {
+  const e = u(() => new g(), []), [t, o] = r(e.getEnv()), [s, n] = r(e.getSdkKey() || "set-sdk-key"), [m, a] = r(e.getEvent() || "");
   return {
-    env: e,
+    env: t,
     setEnv: o,
-    sdkKey: m,
-    setSdkKey: s,
-    event: p,
-    setEvent: i
+    sdkKey: s,
+    setSdkKey: n,
+    event: m,
+    setEvent: a
   };
-}, q = (t) => {
-  const e = u();
-  return /* @__PURE__ */ n(v, { sdk: e, ...t });
+}, D = (e) => {
+  const t = v();
+  return /* @__PURE__ */ p(c, { sdk: t, ...e });
 };
 export {
-  q as StreamLayerDebug,
-  h as useStreamLayerDebug
+  D as StreamLayerDebug,
+  i as useStreamLayerDebug
 };

package/lib/utils/debug/storage.js

@@ -1,34 +1,52 @@
-import { Storage as t } from "@streamlayer/sdk-web-storage";
-class i extends t {
+var n = Object.defineProperty;
+var i = (s, r, e) => r in s ? n(s, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[r] = e;
+var t = (s, r, e) => (i(s, typeof r != "symbol" ? r + "" : r, e), e);
+import { Storage as h } from "@streamlayer/sdk-web-storage";
+class d extends h {
   constructor() {
-    super("dev"), this.setSchema = (e) => {
+    super("dev");
+    // Schema
+    t(this, "setSchema", (e) => {
       this.write("schema", e);
-    }, this.getSchema = () => this.read(
+    });
+    t(this, "getSchema", () => this.read(
       "schema"
       /* SCHEMA */
-    ), this.setToken = (e) => {
+    ));
+    // Token
+    t(this, "setToken", (e) => {
       this.write("token", e);
-    }, this.getToken = () => this.read(
+    });
+    t(this, "getToken", () => this.read(
       "token"
       /* TOKEN */
-    ), this.setEvent = (e) => {
+    ));
+    // Event
+    t(this, "setEvent", (e) => {
       this.write("event", e);
-    }, this.getEvent = () => this.read(
+    });
+    t(this, "getEvent", () => this.read(
       "event"
       /* EVENT */
-    ), this.setSdkKey = (e) => {
+    ));
+    // SDK_KEY
+    t(this, "setSdkKey", (e) => {
       this.write("sdkKey", e);
-    }, this.getSdkKey = () => this.read(
+    });
+    t(this, "getSdkKey", () => this.read(
       "sdkKey"
       /* SDK_KEY */
-    ), this.setEnv = (e) => {
+    ));
+    // ENV
+    t(this, "setEnv", (e) => {
       this.write("env", e);
-    }, this.getEnv = () => this.read(
+    });
+    t(this, "getEnv", () => this.read(
       "env"
       /* ENV */
-    ) || "production";
+    ) || "production");
   }
 }
 export {
-  i as DeveloperStorage
+  d as DeveloperStorage
 };

package/lib/utils/decorators/container.js

@@ -1,12 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
-import { StreamLayerThemeProvider as o } from "../../ui/theme/index.js";
-import { AppContainer as t } from "./styles.js";
-import "../../ui/theme/theme.js";
-import "../../ui/theme/breakpoints.js";
-import "../../ui/theme/constants.js";
-import "@linaria/react";
-const a = (e) => /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(e, {}) }), l = (e) => /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(e, {}) }) }) });
+import { StreamLayerThemeProvider as n } from "../../ui/theme/index.js";
+import { AppContainer as o } from "./styles.js";
+const c = (e) => /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(e, {}) }), d = (e) => /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(e, {}) }) }) });
 export {
-  l as container,
-  a as theme
+  d as container,
+  c as theme
 };

package/lib/utils/storage.js

@@ -1,34 +1,52 @@
-import { Storage as t } from "@streamlayer/sdk-web-storage";
-class i extends t {
+var n = Object.defineProperty;
+var i = (s, r, e) => r in s ? n(s, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[r] = e;
+var t = (s, r, e) => (i(s, typeof r != "symbol" ? r + "" : r, e), e);
+import { Storage as h } from "@streamlayer/sdk-web-storage";
+class d extends h {
   constructor() {
-    super("dev"), this.setSchema = (e) => {
+    super("dev");
+    // Schema
+    t(this, "setSchema", (e) => {
       this.write("schema", e);
-    }, this.getSchema = () => this.read(
+    });
+    t(this, "getSchema", () => this.read(
       "schema"
       /* SCHEMA */
-    ), this.setToken = (e) => {
+    ));
+    // Token
+    t(this, "setToken", (e) => {
       this.write("token", e);
-    }, this.getToken = () => this.read(
+    });
+    t(this, "getToken", () => this.read(
       "token"
       /* TOKEN */
-    ), this.setEvent = (e) => {
+    ));
+    // Event
+    t(this, "setEvent", (e) => {
       this.write("event", e);
-    }, this.getEvent = () => this.read(
+    });
+    t(this, "getEvent", () => this.read(
       "event"
       /* EVENT */
-    ), this.setSdkKey = (e) => {
+    ));
+    // SDK_KEY
+    t(this, "setSdkKey", (e) => {
       this.write("sdkKey", e);
-    }, this.getSdkKey = () => this.read(
+    });
+    t(this, "getSdkKey", () => this.read(
       "sdkKey"
       /* SDK_KEY */
-    ), this.setEnv = (e) => {
+    ));
+    // ENV
+    t(this, "setEnv", (e) => {
       this.write("env", e);
-    }, this.getEnv = () => this.read(
+    });
+    t(this, "getEnv", () => this.read(
       "env"
       /* ENV */
-    ) || "production";
+    ) || "production");
   }
 }
 export {
-  i as DeveloperStorage
+  d as DeveloperStorage
 };