@streamlayer/react-ui 0.93.0 → 0.95.0

package/lib/ui/theme/theme.js

@@ -1,13 +1,13 @@
-import { jsx as t, jsxs as r } from "react/jsx-runtime";
-import { breakpoints as d } from "./breakpoints.js";
-import { colors as s, FONT as e } from "./constants.js";
-const h = `
-  ${s}
-  --font-family: ${e.REGULAR};
-  --font-regular: ${e.REGULAR};
-  --font-color: ${e.COLOR};
-  --font-serif: ${e.SERIF};
-  --font-weight-default: ${e.WEIGHT_DEFAULT};
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { breakpoints as i } from "./breakpoints.js";
+import { colors as l, FONT as t } from "./constants.js";
+const s = `
+  ${l}
+  --font-family: ${t.REGULAR};
+  --font-regular: ${t.REGULAR};
+  --font-color: ${t.COLOR};
+  --font-serif: ${t.SERIF};
+  --font-weight-default: ${t.WEIGHT_DEFAULT};
 
   --header-offset: 0px;
   --header-height: 68px;
@@ -19,27 +19,31 @@ const h = `
   --max-width: 600px;
   --max-notifications-width: 400px;
 
-  ${d.down("xl")`
+  ${i.down("xl")`
     --header-offset: 56px;
   `}
-`, m = "StreamLayerCSSReset", p = "ttkj0ah", x = () => /* @__PURE__ */ t("table", {
+
+  ${i.intermediate("xl", "lg")`
+    --header-offset: 76px;
+  `}
+`, m = "StreamLayerCSSReset", p = "ttkj0ah", x = () => /* @__PURE__ */ e("table", {
   children: /* @__PURE__ */ r("table", {
-    children: [/* @__PURE__ */ t("thead", {
+    children: [/* @__PURE__ */ e("thead", {
       children: /* @__PURE__ */ r("tr", {
-        children: [/* @__PURE__ */ t("th", {
+        children: [/* @__PURE__ */ e("th", {
           children: "name"
-        }), /* @__PURE__ */ t("th", {
+        }), /* @__PURE__ */ e("th", {
           children: "value"
         })]
       })
-    }), /* @__PURE__ */ t("tbody", {
-      children: h.split(";").map((i) => {
-        const n = i.trim(), [o, a] = n.split(":");
+    }), /* @__PURE__ */ e("tbody", {
+      children: s.split(";").map((o) => {
+        const n = o.trim(), [a, d] = n.split(":");
         return /* @__PURE__ */ r("tr", {
-          children: [/* @__PURE__ */ t("td", {
-            children: o
-          }), /* @__PURE__ */ t("td", {
+          children: [/* @__PURE__ */ e("td", {
             children: a
+          }), /* @__PURE__ */ e("td", {
+            children: d
           })]
         }, n);
       })
@@ -50,5 +54,5 @@ export {
   x as ThemeVariables,
   m as resetCss,
   p as theme,
-  h as themeStr
+  s as themeStr
 };

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

@@ -1,30 +1,54 @@
-import { jsxs as f, jsx as e } from "react/jsx-runtime";
-import { useRef as y, useState as s } from "react";
-import { SvgIcon as d } from "../icons/index.js";
-import { Container as g, Player as m, Poster as P, Control as p } from "./styles.js";
+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 "@linaria/react";
-const w = ({ poster: l, source: a }) => {
-  const t = y(null), [c, n] = s(!1), [i, o] = s(!0);
-  return /* @__PURE__ */ f(g, { onClick: () => {
-    const r = t == null ? void 0 : t.current;
-    r && n((u) => u ? (r.pause(), !1) : (r.play(), o(!1), !0));
-  }, children: [
-    /* @__PURE__ */ e(
-      m,
+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)
+      if (l)
+        s.pause(), e.current && i(e.current);
+      else {
+        const n = e == null ? void 0 : e.current;
+        if (!n)
+          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);
+      }
+  }, p = () => {
+    var s;
+    e.current && i(e.current), (s = e == null ? void 0 : e.current) == null || s.load(), d(!0);
+  };
+  return P(() => {
+    e.current && i(e.current);
+  }, []), /* @__PURE__ */ y(O, { onClick: g, children: [
+    /* @__PURE__ */ o(
+      w,
       {
-        ref: t,
-        src: a,
+        ref: e,
+        src: c,
+        onPlay: () => u(!0),
+        onPause: () => u(!1),
         onEnded: () => {
-          var r;
-          (r = t == null ? void 0 : t.current) == null || r.load(), n(!1), o(!0);
+          u(!1), p();
         },
-        style: { visibility: i ? "hidden" : "visible" }
+        style: { visibility: f ? "hidden" : "visible" },
+        playsInline: !0
       }
     ),
-    /* @__PURE__ */ e(P, { src: l, style: { visibility: i ? "visible" : "hidden" } }),
-    /* @__PURE__ */ e(p, { children: !c && /* @__PURE__ */ e(d, { name: "icon-play" }) })
+    /* @__PURE__ */ o(E, { src: r, style: { visibility: f ? "visible" : "hidden" } }),
+    /* @__PURE__ */ o(I, { children: !l && /* @__PURE__ */ o(h, { name: "icon-play" }) })
   ] });
 };
 export {
-  w as VideoPlayer
+  H as VideoPlayer
 };

package/lib/utils/common.js

@@ -1,15 +1,29 @@
-const o = (t) => t.split(/\s+/).map((e) => e[0]).join("").toUpperCase(), i = (t) => t ? t.toLocaleString("en-US") : "0", a = (t) => t.toLocaleDateString("en-US", {
+const I = (t) => t.split(/\s+/).map((n) => n[0]).join("").toUpperCase(), s = (t) => t ? t.toLocaleString("en-US") : "0", S = (t) => t.toLocaleDateString("en-US", {
   weekday: "short",
   month: "short",
   day: "numeric"
-}), n = (t) => t.toLocaleTimeString("en-US", {
+}), N = (t) => t.toLocaleTimeString("en-US", {
   hour: "2-digit",
   minute: "2-digit"
-}), r = (t) => !isNaN(t.getTime());
+}), c = (t) => !isNaN(t.getTime()), L = (t) => {
+  const o = new Date(t);
+  if (!o)
+    return "";
+  const r = /* @__PURE__ */ new Date(), e = Math.floor(r.getTime() - o.getTime());
+  return e < 6e4 ? `${Math.floor(e / 1e3)}s` : e < 36e5 ? `${Math.floor(e / 6e4)}m` : e < 864e5 ? `${Math.floor(e / 36e5)}h` : o.getFullYear() === r.getFullYear() ? `${o.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric"
+  })}` : `${o.toLocaleDateString("en-US", {
+    month: "2-digit",
+    day: "2-digit",
+    year: "2-digit"
+  })}`;
+};
 export {
-  o as abbreviate,
-  a as formatDate,
-  i as formatDecimals,
-  n as formatTime,
-  r as isValidDate
+  I as abbreviate,
+  S as formatDate,
+  s as formatDecimals,
+  N as formatTime,
+  L as getTimeUntilNow,
+  c as isValidDate
 };

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.93.0",
+  "version": "0.95.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -36,24 +36,24 @@
   ],
   "peerDependencies": {
     "@lottiefiles/react-lottie-player": "*",
-    "@streamlayer/sl-eslib": "^5.64.1",
+    "@streamlayer/sl-eslib": "^5.67.0",
     "@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.35.1",
-    "@streamlayer/sdk-web": "^0.30.2",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.11.34",
-    "@streamlayer/sdk-web-api": "^0.20.1",
-    "@streamlayer/sdk-web-core": "^0.18.2",
-    "@streamlayer/sdk-web-features": "^0.11.16",
-    "@streamlayer/sdk-web-interfaces": "^0.20.1",
-    "@streamlayer/sdk-web-notifications": "^0.13.7",
-    "@streamlayer/sdk-web-logger": "^0.5.12",
-    "@streamlayer/sdk-web-storage": "^0.3.12",
-    "@streamlayer/sdk-web-types": "^0.21.1"
+    "@streamlayer/feature-gamification": "^0.37.0",
+    "@streamlayer/sdk-web": "^0.31.1",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.11.36",
+    "@streamlayer/sdk-web-api": "^0.21.1",
+    "@streamlayer/sdk-web-core": "^0.20.0",
+    "@streamlayer/sdk-web-features": "^0.11.18",
+    "@streamlayer/sdk-web-interfaces": "^0.20.3",
+    "@streamlayer/sdk-web-logger": "^0.5.14",
+    "@streamlayer/sdk-web-notifications": "^0.13.9",
+    "@streamlayer/sdk-web-storage": "^0.4.1",
+    "@streamlayer/sdk-web-types": "^0.22.1"
   },
   "nx": {
     "implicitDependencies": [
@@ -94,6 +94,6 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^4.3.1",
-    "@streamlayer/react": "^0.37.1"
+    "@streamlayer/react": "^0.39.0"
   }
 }