@streamlayer/react-ui 1.11.0 → 1.11.1

package/lib/app/app/index.js

@@ -1,75 +1,75 @@
-import { jsx as l, jsxs as f } from "react/jsx-runtime";
-import { cx as v } from "@linaria/core";
-import { useStore as N } from "@nanostores/react";
-import { SDKContainer as g, SDKScrollContainer as F } from "./styles.js";
-import { useSdkFeature as x } from "../useSdkFeature.js";
-import { useSdkResponsive as A } from "../useSdkResponsive.js";
-import { useSdkScroll as D } from "../useSdkScroll.js";
-import { useAnalyticsListener as m, newTabLinkListener as L, appScrollListener as b, appClickListener as C } from "../../hooks/analytics.js";
-import { useRef as d, useMemo as y, useEffect as K } from "react";
-import { resetCss as c } from "../../ui/theme/theme.js";
-import { ActiveFeature as j, StandaloneFeature as E } from "./Features/index.js";
-import { SDKNavigation as R, SDKHeader as k } from "./Navigation/index.js";
-import { SDKNotifications as w } from "./Notifications/index.js";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { cx as N } from "@linaria/core";
+import { useStore as v } from "@nanostores/react";
+import { SDKContainer as x, SDKScrollContainer as A } from "./styles.js";
+import { useSdkFeature as D } from "../useSdkFeature.js";
+import { useSdkResponsive as F } from "../useSdkResponsive.js";
+import { useSdkScroll as L } from "../useSdkScroll.js";
+import { useAnalyticsListener as c, newTabLinkListener as g, appScrollListener as C, appClickListener as b } from "../../hooks/analytics.js";
+import { useRef as f, useMemo as y, useEffect as K } from "react";
+import { resetCss as m } from "../../ui/theme/theme.js";
+import { ActiveFeature as j, StandaloneFeature as R } from "./Features/index.js";
+import { SDKNavigation as w, SDKHeader as E } from "./Navigation/index.js";
+import { SDKNotifications as k } from "./Notifications/index.js";
 import { useAppApp as H } from "./useApp.js";
 import { AppContext as I } from "./useAppContext.js";
 const M = ({
   sdk: e,
   className: n,
   scrollStore: r,
-  appNode: a,
+  appNode: i,
   scrollNode: s,
-  responsiveStore: o
+  responsiveStore: t
 }) => {
-  const [, i] = x(e);
+  const [, a] = D(e);
   return /* @__PURE__ */ l(j, {
     className: n,
     scrollNode: s,
-    appNode: a,
+    appNode: i,
     scrollStore: r,
-    feature: i,
-    responsiveStore: o,
+    feature: a,
+    responsiveStore: t,
     sdk: e
   });
 }, P = ({
   sdk: e,
   className: n,
   appNode: r,
-  responsiveStore: a
+  responsiveStore: i
 }) => {
-  const s = N(e.featuresList.getStore());
-  return s ? Array.from(s, (o) => {
-    const i = e.getFeature(o);
-    return i ? /* @__PURE__ */ l(E, {
+  const s = v(e.featuresList.getStore());
+  return s ? Array.from(s, (t) => {
+    const a = e.getFeature(t);
+    return a ? /* @__PURE__ */ l(R, {
       className: n,
       appNode: r,
-      feature: i,
-      responsiveStore: a,
+      feature: a,
+      responsiveStore: i,
       sdk: e
-    }, o) : null;
+    }, t) : null;
   }) : null;
 }, $ = ({
   sdk: e,
   topNavigation: n
 }) => {
-  const r = d(null), a = d(null), [s] = A(r), [o, i] = D(r, s), {
+  const r = f(null), i = f(null), [s] = F(r), [t, a] = L(r, s), {
     sdkReady: p,
-    activeFeature: u,
+    activeFeature: d,
     isLogged: S
-  } = H(e), t = !!p;
-  m(r, {
-    enabled: t,
+  } = H(e), o = !!p;
+  c(r, {
+    enabled: o,
     event: "click",
-    listener: L
-  }), m(o, {
-    enabled: t,
+    listener: g
+  }), c(t, {
+    enabled: o,
     event: "scrollend",
-    listener: b,
+    listener: C,
     useDomNode: !0
-  }), m(o, {
-    enabled: t,
+  }), c(t, {
+    enabled: o,
     event: "click",
-    listener: C,
+    listener: b,
     useDomNode: !0
   });
   const h = y(() => ({
@@ -78,44 +78,44 @@ const M = ({
   }), [e, n]);
   return K(() => {
     import("./Features/Gamification/gamification-feature.js");
-  }, []), console.log("sdkEnabled", t), console.log("activeFeature", u), /* @__PURE__ */ l(I.Provider, {
+  }, []), /* @__PURE__ */ l(I.Provider, {
     value: h,
-    children: /* @__PURE__ */ f(g, {
+    children: /* @__PURE__ */ u(x, {
       ref: r,
       className: n ? "" : "c10llmat",
-      children: [t && n && /* @__PURE__ */ l(R, {
-        className: c,
+      children: [o && n && /* @__PURE__ */ l(w, {
+        className: m,
         sdk: e,
-        ref: a
-      }), t && !n && !!u && /* @__PURE__ */ l(k, {
-        className: v(c, "sl-hide-on-modal"),
+        ref: i
+      }), o && !n && !!d && /* @__PURE__ */ l(E, {
+        className: N(m, "sl-hide-on-modal"),
         sdk: e,
-        ref: a
-      }), /* @__PURE__ */ f(F, {
+        ref: i
+      }), /* @__PURE__ */ u(A, {
         className: "sl-hide-on-modal",
-        ref: o,
-        "data-nav": t.toString(),
-        children: [t && /* @__PURE__ */ l(w, {
+        ref: t,
+        "data-nav": o.toString(),
+        children: [o && /* @__PURE__ */ l(k, {
           sdk: e,
-          scrollNode: o,
-          headerNode: a,
+          scrollNode: t,
+          headerNode: i,
           appNode: r,
-          scrollStore: i,
+          scrollStore: a,
           responsiveStore: s
-        }), t && /* @__PURE__ */ l(M, {
-          scrollStore: i,
+        }), o && /* @__PURE__ */ l(M, {
+          scrollStore: a,
           responsiveStore: s,
-          scrollNode: o,
+          scrollNode: t,
           appNode: r,
-          className: c,
+          className: m,
           sdk: e
-        }), t && /* @__PURE__ */ l(P, {
+        }), o && /* @__PURE__ */ l(P, {
           responsiveStore: s,
           appNode: r,
-          className: c,
+          className: m,
           sdk: e
         })]
-      }), t && !S && /* @__PURE__ */ l("div", {
+      }), o && !S && /* @__PURE__ */ l("div", {
         style: {
           display: "flex",
           alignItems: "center",

package/lib/app/login/index.js

@@ -1,36 +1,36 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import { useState as a } from "react";
 import w from "react-auth-code-input";
 import P, { isValidPhoneNumber as F, formatPhoneNumberIntl as v } from "react-phone-number-input";
 import { Timer as D } from "../../ui/timer/index.js";
-import { requestLoginCode as I, register as k, login as S } from "../../utils/login.js";
+import { requestLoginCode as I, register as S, login as k } from "../../utils/login.js";
 import { Panel as q, Form as m, FormTitle as p, FormDescription as d, FormInputContainer as x, FormSubmit as s, Digits as E } from "./styles.js";
 const z = ({ login: h, anonymousLogin: u, host: c }) => {
   const [o, g] = a(""), [i, b] = a(""), [l, f] = a(""), y = async (t) => {
     t.preventDefault();
     try {
-      const n = o.replaceAll("+", "");
+      const r = o.replaceAll("+", "");
       try {
-        await I(c, n);
+        await I(c, r);
       } catch {
-        await k(c, n);
+        await S(c, r);
       }
-      b(n);
-    } catch (n) {
-      window.alert(n);
+      b(r);
+    } catch (r) {
+      window.alert(r);
     }
   }, C = async (t) => {
     if (t.preventDefault(), i && l)
       try {
-        const n = await S(c, i, l);
-        n && h ? await h(n) : console.log("token", n);
-      } catch (n) {
-        window.alert(n);
+        const r = await k(c, i, l);
+        r && h && await h(r);
+      } catch (r) {
+        window.alert(r);
       }
   };
-  return /* @__PURE__ */ r(q, { children: [
-    !i && /* @__PURE__ */ r("div", { children: [
-      /* @__PURE__ */ r(m, { onSubmit: y, children: [
+  return /* @__PURE__ */ n(q, { children: [
+    !i && /* @__PURE__ */ n("div", { children: [
+      /* @__PURE__ */ n(m, { onSubmit: y, children: [
         /* @__PURE__ */ e(p, { children: "Enter your phone number" }),
         /* @__PURE__ */ e(d, { children: "Enter your phone up for number to log in or sign an account." }),
         /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(P, { value: o, onChange: (t) => g(`${t}`) }) }),
@@ -38,9 +38,9 @@ const z = ({ login: h, anonymousLogin: u, host: c }) => {
       ] }),
       u && /* @__PURE__ */ e(s, { style: { display: "block", margin: "auto" }, onClick: u, children: "anonymous login" })
     ] }),
-    i && /* @__PURE__ */ r(m, { onSubmit: C, children: [
+    i && /* @__PURE__ */ n(m, { onSubmit: C, children: [
       /* @__PURE__ */ e(p, { children: "Enter Verification Code" }),
-      /* @__PURE__ */ r(d, { children: [
+      /* @__PURE__ */ n(d, { children: [
         "Please enter the verification code ",
         /* @__PURE__ */ e("br", {}),
         "sent to ",
@@ -48,7 +48,7 @@ const z = ({ login: h, anonymousLogin: u, host: c }) => {
       ] }),
       /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(w, { autoFocus: !0, allowedCharacters: "numeric", length: 4, onChange: f }) }),
       /* @__PURE__ */ e(s, { disabled: l.length !== 4, type: "submit", children: "login" }),
-      /* @__PURE__ */ r(d, { children: [
+      /* @__PURE__ */ n(d, { children: [
         "Didn't get 59 the code? ",
         /* @__PURE__ */ e("br", {}),
         "Resend Code in",

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

@@ -1,12 +1,12 @@
-import { jsxs as H, jsx as o } from "react/jsx-runtime";
+import { jsxs as H, jsx as i } 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();
+  for (const r of s)
+    r.isIntersecting ? r.target instanceof HTMLVideoElement && r.target.autoplay && r.target.play() : r.target instanceof HTMLVideoElement && !r.target.paused && r.target.pause();
 }, E = new IntersectionObserver(N, { threshold: 0.5 }), m = /* @__PURE__ */ new Set(), q = (s) => {
   E.observe(s), m.add(s);
 }, z = (s) => {
@@ -16,18 +16,18 @@ const N = (s) => {
     s instanceof HTMLVideoElement && !s.paused && s.pause();
 }, X = ({
   poster: s,
-  source: n,
+  source: r,
   aspectRatio: p,
-  controlVideo: r,
-  onPlay: i,
+  controlVideo: n,
+  onPlay: o,
   autoPlay: I,
   hideControls: u
 }) => {
   const e = S(null), [c, l] = d(!1), [g, f] = d(!0), O = y(() => {
-    r == null || r({ muted: !0 });
-  }, [r]), a = y(() => {
-    r == null || r({ muted: !1 });
-  }, [r]), T = (t) => {
+    n == null || n({ muted: !0 });
+  }, [n]), a = y(() => {
+    n == null || n({ muted: !1 });
+  }, [n]), T = (t) => {
     t.stopPropagation();
     const v = e == null ? void 0 : e.current;
     if (v) {
@@ -64,14 +64,14 @@ const N = (s) => {
       className: L(c && j, u && k),
       style: p ? { aspectRatio: p } : {},
       children: [
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ i(
           A,
           {
             ref: e,
-            src: n,
+            src: r,
             autoPlay: I,
             onPlay: () => {
-              console.log("play"), O(), l(!0), f(!1), i == null || i();
+              O(), l(!0), f(!1), o == null || o();
             },
             onPause: () => {
               a(), l(!1);
@@ -84,8 +84,8 @@ const N = (s) => {
             playsInline: !0
           }
         ),
-        /* @__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" }) })
+        /* @__PURE__ */ i(B, { src: s, style: { visibility: g ? "visible" : "hidden" } }),
+        !u && /* @__PURE__ */ i(F, { children: c ? /* @__PURE__ */ i(h, { name: "icon-pause" }) : /* @__PURE__ */ i(h, { name: "icon-play" }) })
       ]
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -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.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"
+    "@streamlayer/feature-gamification": "^1.8.1",
+    "@streamlayer/sdk-web": "^1.5.1",
+    "@streamlayer/sdk-web-analytics": "^1.4.2",
+    "@streamlayer/sdk-web-anonymous-auth": "^1.1.2",
+    "@streamlayer/sdk-web-api": "^1.6.2",
+    "@streamlayer/sdk-web-core": "^1.6.1",
+    "@streamlayer/sdk-web-features": "^1.0.23",
+    "@streamlayer/sdk-web-interfaces": "^1.2.2",
+    "@streamlayer/sdk-web-logger": "^1.0.23",
+    "@streamlayer/sdk-web-notifications": "^1.2.2",
+    "@streamlayer/sdk-web-storage": "^1.0.23",
+    "@streamlayer/sdk-web-types": "^1.7.2"
   },
   "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.8.0"
+    "@streamlayer/react": "^1.8.1"
   }
 }