@streamlayer/react-ui 1.19.1 → 1.21.0

package/lib/hooks/analytics.js

@@ -1,50 +1,25 @@
-import s from "lodash.throttle";
-import { useEffect as l } from "react";
-import { eventBus as c } from "@streamlayer/sdk-web-interfaces";
-import { BREAKPOINTS as o } from "../ui/theme/constants.js";
-const g = (e) => [(i) => (...n) => (e && c.emit(e == null ? void 0 : e.type, e), i ? i(n) : null)], b = (e) => {
-  const t = e.target;
-  t instanceof HTMLAnchorElement && t.target === "_blank" && t.getAttribute("data-analytics") === "web-link" && c.emit("poll", {
+import { useEffect as c } from "react";
+import { eventBus as i } from "@streamlayer/sdk-web-interfaces";
+import { BREAKPOINTS as s } from "../ui/theme/constants.js";
+const f = (t) => [(r) => (...n) => (t && i.emit(t == null ? void 0 : t.type, t), r ? r(n) : null)], v = (t) => {
+  const e = t.target;
+  e instanceof HTMLAnchorElement && e.target === "_blank" && e.getAttribute("data-analytics") === "web-link" && i.emit("poll", {
     action: "navigated",
     payload: {}
   });
-}, y = s((e, t) => {
-  var n;
-  if (e.target instanceof Document) {
-    const r = (n = t.current) == null ? void 0 : n.getBoundingClientRect(), a = r && r.top < 0 && r.bottom > window.innerHeight;
-    if (r && !a)
-      return;
-  }
-  c.emit("interactions", {
-    action: "scroll",
-    payload: {}
-  });
-}, 5e3), w = s((e, t) => {
-  var n;
-  if (e.target instanceof Document) {
-    const r = (n = t.current) == null ? void 0 : n.getBoundingClientRect(), a = r && r.top < 0 && r.bottom > window.innerHeight;
-    if (r && !a)
-      return;
-  }
-  c.emit("interactions", {
-    action: "tap",
-    payload: {}
-  });
-}, 5e3), L = (e, t) => {
-  const i = window.innerWidth < o.xl;
-  l(() => {
-    const n = i && t.useDomNode ? document : e.current, r = (a) => {
-      t.listener(a, e);
+}, y = (t, e) => {
+  const r = window.innerWidth < s.xl;
+  c(() => {
+    const n = r && e.useDomNode ? document : t.current, a = (l) => {
+      e.listener(l, t);
     };
-    return t.enabled && (n == null || n.addEventListener(t.event, r)), () => {
-      n == null || n.removeEventListener(t.event, r);
+    return e.enabled && (n == null || n.addEventListener(e.event, a)), () => {
+      n == null || n.removeEventListener(e.event, a);
     };
-  }, [i, t.enabled, t.listener]);
+  }, [r, e.enabled, e.listener]);
 };
 export {
-  w as appClickListener,
-  y as appScrollListener,
-  b as newTabLinkListener,
-  g as useAnalyticsHandle,
-  L as useAnalyticsListener
+  v as newTabLinkListener,
+  f as useAnalyticsHandle,
+  y as useAnalyticsListener
 };

package/lib/index-CLJzLXks.js

@@ -0,0 +1,64 @@
+let u = [], i = 0;
+const a = 4;
+let s = (o) => {
+  let l = [], e = {
+    get() {
+      return e.lc || e.listen(() => {
+      })(), e.value;
+    },
+    lc: 0,
+    listen(t) {
+      return e.lc = l.push(t), () => {
+        for (let f = i + a; f < u.length; )
+          u[f] === t ? u.splice(f, a) : f += a;
+        let n = l.indexOf(t);
+        ~n && (l.splice(n, 1), --e.lc || e.off());
+      };
+    },
+    notify(t, n) {
+      let f = !u.length;
+      for (let r of l)
+        u.push(
+          r,
+          e.value,
+          t,
+          n
+        );
+      if (f) {
+        for (i = 0; i < u.length; i += a)
+          u[i](
+            u[i + 1],
+            u[i + 2],
+            u[i + 3]
+          );
+        u.length = 0;
+      }
+    },
+    /* It will be called on last listener unsubscribing.
+       We will redefine it in onMount and onStop. */
+    off() {
+    },
+    set(t) {
+      let n = e.value;
+      n !== t && (e.value = t, e.notify(n));
+    },
+    subscribe(t) {
+      let n = e.listen(t);
+      return t(e.value), n;
+    },
+    value: o
+  };
+  return e;
+}, v = (o = {}) => {
+  let l = s(o);
+  return l.setKey = function(e, t) {
+    let n = l.value;
+    typeof t > "u" && e in l.value ? (l.value = { ...l.value }, delete l.value[e], l.notify(n, e)) : l.value[e] !== t && (l.value = {
+      ...l.value,
+      [e]: t
+    }, l.notify(n, e));
+  }, l;
+};
+export {
+  v as m
+};

package/lib/reset.css

@@ -83,7 +83,7 @@
   outline: none;
 }
 
-.StreamLayerSDK, .StreamLayerSDK > .StreamLayerSDKTheme {
+.StreamLayerSDK, .StreamLayerSDKTheme, .StreamLayerSDKTheme > div {
   height: 100%;
 }
 

package/lib/ui/advertisement/notification/index.js

@@ -2,10 +2,10 @@ import { jsx as i, jsxs as d } from "react/jsx-runtime";
 import { NotificationPromotionImagePosition as r, NotificationEnabled as T, NotificationPromotionMode as h, NotificationSponsorLogoMode as C, CtaIconMode as O } from "@streamlayer/sdk-web-types";
 import { SlideIn as f } from "../../slide-in/index.js";
 import { LowerThirdNotification as E } from "./lower-third/index.js";
-import { MediaImgFit as c, MediaImgCentered as L, MediaImgBottom as S, MediaImgSolid as _, MediaImgMiddle as R, NotificationContainer as P, Logo as b, NotificationContent as A, Body as D, Title as x, Text as y, Button as F, CtaIcon as j, StyledChevronRight as k } from "./styles.js";
+import { MediaImgFit as I, MediaImgCentered as L, MediaImgBottom as S, MediaImgSolid as _, MediaImgMiddle as R, NotificationContainer as P, Logo as b, NotificationContent as A, Body as D, Title as x, Text as y, Button as F, CtaIcon as j, StyledChevronRight as k } from "./styles.js";
 const v = {
-  [r.UNSET]: c,
-  [r.FIT]: c,
+  [r.UNSET]: I,
+  [r.FIT]: I,
   [r.CENTERED]: L,
   [r.BOTTOM]: S,
   [r.SOLID]: _,
@@ -13,16 +13,16 @@ const v = {
 }, w = ({ src: e, imagePosition: n }) => {
   const m = v[n];
   return /* @__PURE__ */ i(m, { children: /* @__PURE__ */ i("img", { src: e, alt: "" }) });
-}, z = ({ notification: e, open: n, promotionId: m, hiding: I, direction: N = "left" }) => {
+}, z = ({ notification: e, open: n, promotionId: m, hiding: N, direction: a = "left" }) => {
   if (!e || !e.promotion || e.enabled !== T.NOTIFICATION_ENABLED)
     return null;
   if (e.promotion.mode === h.LOWER_THIRD)
     return /* @__PURE__ */ i(E, { notification: e, open: n });
-  const { title: t, body: l, image: a, promotion: s } = e, { sponsorLogo: g, sponsorLogoMode: p, imagePosition: M, ctaButton: o } = s;
-  return /* @__PURE__ */ i(f, { className: "SL_Rich_Notification", direction: N, hiding: I, children: /* @__PURE__ */ d(P, { onClick: n, children: [
-    p !== C.NOTIFICATION_SPONSOR_LOGO_NONE && /* @__PURE__ */ i(b, { children: /* @__PURE__ */ i("img", { src: g, alt: t }) }),
+  const { title: t, body: l, image: s, promotion: g } = e, { sponsorLogo: c, sponsorLogoMode: p, imagePosition: M, ctaButton: o } = g;
+  return /* @__PURE__ */ i(f, { className: "SL_Rich_Notification", direction: a, hiding: N, children: /* @__PURE__ */ d(P, { onClick: n, children: [
+    p !== C.NOTIFICATION_SPONSOR_LOGO_NONE && c && /* @__PURE__ */ i(b, { children: /* @__PURE__ */ i("img", { src: c, alt: t }) }),
     /* @__PURE__ */ d(A, { children: [
-      /* @__PURE__ */ i(w, { src: a, imagePosition: M }),
+      /* @__PURE__ */ i(w, { src: s, imagePosition: M }),
       /* @__PURE__ */ d(D, { children: [
         t && /* @__PURE__ */ i(x, { children: t }),
         l && /* @__PURE__ */ i(y, { children: l })