@streamlayer/react-ui 1.9.0 → 1.11.0

package/lib/app/app/index.js

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

package/lib/app/app/story/index.js

@@ -1,14 +1,14 @@
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
 import { styled as t } from "@linaria/react";
 import { useEffect as i } from "react";
-import { StreamLayerProvider as l, useStreamLayer as p } from "@streamlayer/react";
+import { StreamLayerProvider as l, useStreamLayer as p, StreamLayerSDKEvent as m } from "@streamlayer/react";
 import { App as c } from "../index.js";
-import { StreamLayerThemeProvider as m } from "../../../ui/theme/index.js";
-import { useStreamLayerDebug as f } from "../../../utils/debug/index.js";
-import { Video as u } from "./video.js";
-const s = () => {
+import { StreamLayerThemeProvider as f } from "../../../ui/theme/index.js";
+import { useStreamLayerDebug as u } from "../../../utils/debug/index.js";
+import { Video as y } from "./video.js";
+const a = () => {
   console.log("deep link handled cb");
-}, y = () => {
+}, h = () => {
   console.log("video player handled cb");
 }, v = ({
   event: o
@@ -16,44 +16,47 @@ const s = () => {
   const e = p();
   return i(() => {
     e && e.openFeature(12);
-  }, [e]), e ? /* @__PURE__ */ r(m, {
-    children: /* @__PURE__ */ r(c, {
+  }, [e, o]), e ? /* @__PURE__ */ s(f, {
+    children: [/* @__PURE__ */ r(m, {
+      event: o
+    }), /* @__PURE__ */ r(c, {
       sdk: e,
       event: o,
-      onDeepLinkHandled: s
-    })
+      onDeepLinkHandled: a
+    })]
   }) : null;
-}, h = /* @__PURE__ */ t("div")({
+}, A = /* @__PURE__ */ t("div")({
   name: "Container",
   class: "c1a4qh28",
   propsAsIs: !1
-}), k = /* @__PURE__ */ t("div")({
+}), S = /* @__PURE__ */ t("div")({
   name: "Body",
   class: "b9h8kuk",
   propsAsIs: !1
-}), A = /* @__PURE__ */ t("div")({
+}), k = /* @__PURE__ */ t("div")({
   name: "AppContainer",
   class: "a1wkro2j",
   propsAsIs: !1
-}), D = ({
+}), j = ({
   sdkKey: o,
   eventId: e,
-  production: a
+  production: d
 }) => {
-  const n = f({
+  const n = u({
     sdkKey: o,
     eventId: e,
-    production: a
+    production: d
   });
   return /* @__PURE__ */ r(l, {
     sdkKey: n.sdkKey,
     production: n.env === "production",
     autoEnable: !0,
-    onDeepLinkHandled: s,
-    videoPlayerController: y,
-    children: /* @__PURE__ */ d(k, {
-      children: [/* @__PURE__ */ r(u, {}), /* @__PURE__ */ r(h, {
-        children: /* @__PURE__ */ r(A, {
+    onDeepLinkHandled: a,
+    videoPlayerController: h,
+    withAd: !1,
+    children: /* @__PURE__ */ s(S, {
+      children: [/* @__PURE__ */ r(y, {}), /* @__PURE__ */ r(A, {
+        children: /* @__PURE__ */ r(k, {
           className: "StreamLayerSDK",
           children: /* @__PURE__ */ r(v, {
             event: n.event
@@ -64,5 +67,5 @@ const s = () => {
   });
 };
 export {
-  D as AppStory
+  j as AppStory
 };

package/lib/app/app/story/insight/index.d.ts

@@ -4,6 +4,7 @@ export declare const InsightStory: React.FC<{
     insightId?: string;
     production?: boolean;
     onlyInsight?: boolean;
+    skipAutoClose?: boolean;
     hideHeader?: boolean;
     layoutMode?: 'side-by-side' | 'cover';
 }>;

package/lib/app/app/story/insight/index.js

@@ -1,59 +1,62 @@
 import { jsx as r } from "react/jsx-runtime";
-import { styled as d } from "@linaria/react";
-import { StreamLayerProvider as u, useStreamLayer as p } from "@streamlayer/react";
-import { StreamLayerSDKInsight as c } from "../../Insight/index.js";
-import { StreamLayerThemeProvider as y } from "../../../../ui/theme/index.js";
-import { useStreamLayerDebug as f } from "../../../../utils/debug/index.js";
+import { styled as u } from "@linaria/react";
+import { StreamLayerProvider as p, useStreamLayer as c } from "@streamlayer/react";
+import { StreamLayerSDKInsight as y } from "../../Insight/index.js";
+import { StreamLayerThemeProvider as f } from "../../../../ui/theme/index.js";
+import { useStreamLayerDebug as h } from "../../../../utils/debug/index.js";
 import { customTheme as l } from "./styles.js";
-import { Video as h } from "./video.js";
-const v = /* @__PURE__ */ d("div")({
+import { Video as v } from "./video.js";
+const S = /* @__PURE__ */ u("div")({
   name: "Body",
   class: "buit6hv",
   propsAsIs: !1
-}), S = ({
+}), L = ({
   hideHeader: t,
   insightId: o
 }) => {
-  const e = p();
-  return e ? /* @__PURE__ */ r(y, {
+  const e = c();
+  return e ? /* @__PURE__ */ r(f, {
     customTheme: l,
-    children: /* @__PURE__ */ r(c, {
+    children: /* @__PURE__ */ r(y, {
       hideHeader: t,
       sdk: e,
       insightId: o,
       persistent: !0
     })
   }) : null;
-}, D = ({
+}, P = ({
   sdkKey: t,
   eventId: o,
   layoutMode: e,
-  insightId: s,
-  production: n,
-  onlyInsight: i,
-  hideHeader: a
+  insightId: n,
+  production: i,
+  onlyInsight: a,
+  skipAutoClose: s,
+  hideHeader: d
 }) => {
-  const m = f({
+  const m = h({
     sdkKey: t,
     eventId: o,
-    production: n
+    production: i
   });
-  return /* @__PURE__ */ r(u, {
+  return /* @__PURE__ */ r(p, {
     sdkKey: m.sdkKey,
     event: m.event,
     production: m.env === "production",
     autoEnable: !0,
-    children: i ? /* @__PURE__ */ r(S, {
-      insightId: s,
-      hideHeader: a
-    }) : /* @__PURE__ */ r(v, {
-      children: /* @__PURE__ */ r(h, {
-        insightId: s,
+    children: a ? /* @__PURE__ */ r(L, {
+      skipAutoClose: s,
+      insightId: n,
+      hideHeader: d
+    }) : /* @__PURE__ */ r(S, {
+      children: /* @__PURE__ */ r(v, {
+        skipAutoClose: s,
+        insightId: n,
         layoutMode: e
       })
     })
   });
 };
 export {
-  D as InsightStory
+  P as InsightStory
 };

package/lib/app/app/story/insight/video.d.ts

@@ -1,4 +1,5 @@
 export declare const Video: React.FC<{
     insightId?: string;
+    skipAutoClose?: boolean;
     layoutMode?: 'side-by-side' | 'cover';
 }>;

package/lib/app/app/story/insight/video.js

@@ -1,15 +1,15 @@
-import { jsxs as o, Fragment as d, jsx as e } from "react/jsx-runtime";
-import { useRef as h } from "react";
+import { jsxs as i, Fragment as h, jsx as e } from "react/jsx-runtime";
+import { useRef as c } from "react";
 import { useStreamLayer as l } from "@streamlayer/react";
-import { StreamLayerSDKInsight as i } from "../../Insight/index.js";
-import { StreamLayerThemeProvider as n } from "../../../../ui/theme/index.js";
-import { VideoFrame as c, customTheme as s, VideoPlayerWrap as p, InsightContainerMobile as u, InsightContainerOverlay as f, InsightContainerLBar as g } from "./styles.js";
-const x = ({ insightId: t, layoutMode: a }) => {
-  const r = l(), m = h(null);
-  return /* @__PURE__ */ o(d, { children: [
-    /* @__PURE__ */ o(c, { ref: m, "data-testid": "video-frame", children: [
-      /* @__PURE__ */ e(a === "cover" ? f : g, { children: r && /* @__PURE__ */ e(n, { customTheme: s, children: /* @__PURE__ */ e(i, { sdk: r, insightId: t, persistent: !0 }) }) }),
-      /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e("div", { className: "divAnchor", children: /* @__PURE__ */ e(
+import { StreamLayerSDKInsight as n } from "../../Insight/index.js";
+import { StreamLayerThemeProvider as s } from "../../../../ui/theme/index.js";
+import { VideoFrame as p, customTheme as a, VideoPlayerWrap as u, InsightContainerMobile as f, InsightContainerOverlay as g, InsightContainerLBar as v } from "./styles.js";
+const F = ({ insightId: t, layoutMode: m, skipAutoClose: o }) => {
+  const r = l(), d = c(null);
+  return /* @__PURE__ */ i(h, { children: [
+    /* @__PURE__ */ i(p, { ref: d, "data-testid": "video-frame", children: [
+      /* @__PURE__ */ e(m === "cover" ? g : v, { children: r && /* @__PURE__ */ e(s, { customTheme: a, children: /* @__PURE__ */ e(n, { skipAutoClose: o, sdk: r, insightId: t, persistent: !0 }) }) }),
+      /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e("div", { className: "divAnchor", children: /* @__PURE__ */ e(
         "video",
         {
           src: "https://storage.googleapis.com/cdn.streamlayer.io/assets/sdk-web/Own%20The%20Game%201080p%20RF18.mp4",
@@ -22,9 +22,9 @@ const x = ({ insightId: t, layoutMode: a }) => {
         }
       ) }) })
     ] }),
-    /* @__PURE__ */ e(u, { children: r && /* @__PURE__ */ e(n, { customTheme: s, children: /* @__PURE__ */ e(i, { sdk: r, insightId: t, persistent: !0 }) }) })
+    /* @__PURE__ */ e(f, { children: r && /* @__PURE__ */ e(s, { customTheme: a, children: /* @__PURE__ */ e(n, { skipAutoClose: o, sdk: r, insightId: t, persistent: !0 }) }) })
   ] });
 };
 export {
-  x as Video
+  F as Video
 };

package/lib/app/app/story/promotion/content.d.ts

@@ -1 +1,3 @@
-export declare const Content: React.FC;
+export declare const Content: React.FC<{
+    skipAutoClose?: boolean;
+}>;

package/lib/app/app/story/promotion/content.js

@@ -1,9 +1,9 @@
 import { jsxs as e, jsx as t } from "react/jsx-runtime";
 import { styled as r } from "@linaria/react";
-import { useStreamLayer as m } from "@streamlayer/react";
-import { StreamLayerSDKAdvertisement as o } from "../../Advertisement/index.js";
-import { theme as i } from "../../../../ui/theme/theme.js";
-const a = /* @__PURE__ */ r("div")({
+import { useStreamLayer as o } from "@streamlayer/react";
+import { StreamLayerSDKAdvertisement as i } from "../../Advertisement/index.js";
+import { theme as a } from "../../../../ui/theme/theme.js";
+const d = /* @__PURE__ */ r("div")({
   name: "Container",
   class: "c1g3vhjc",
   propsAsIs: !1
@@ -11,14 +11,17 @@ const a = /* @__PURE__ */ r("div")({
   name: "Div",
   class: "d1626h38",
   propsAsIs: !1
-}), c = () => {
-  const s = m();
-  return s ? /* @__PURE__ */ e(a, {
-    className: i,
+}), h = ({
+  skipAutoClose: m
+}) => {
+  const s = o();
+  return s ? /* @__PURE__ */ e(d, {
+    className: a,
     "data-testid": "overlay",
     children: [/* @__PURE__ */ e(n, {
       children: ["Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ", /* @__PURE__ */ t("br", {}), "-------------"]
-    }), /* @__PURE__ */ t(o, {
+    }), /* @__PURE__ */ t(i, {
+      skipAutoClose: m,
       sdk: s,
       persistent: !0
     }), /* @__PURE__ */ e(n, {
@@ -27,5 +30,5 @@ const a = /* @__PURE__ */ r("div")({
   }) : null;
 };
 export {
-  c as Content
+  h as Content
 };

package/lib/app/app/story/promotion/index.d.ts

@@ -4,6 +4,7 @@ export declare const PromotionStory: React.FC<{
     sdkKey?: string;
     eventId?: string;
     production?: boolean;
+    skipAutoClose?: boolean;
     sidebar: 'left' | 'right';
     banner: 'top' | 'bottom';
 }>;

package/lib/app/app/story/promotion/index.js

@@ -1,53 +1,57 @@
-import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import { styled as r } from "@linaria/react";
-import { StreamLayerProvider as l } from "@streamlayer/react";
-import { useStreamLayerDebug as y } from "../../../../utils/debug/index.js";
-import { Content as u } from "./content.js";
-import { Video as v } from "./video.js";
-const b = /* @__PURE__ */ r("div")({
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { styled as t } from "@linaria/react";
+import { StreamLayerProvider as y } from "@streamlayer/react";
+import { useStreamLayerDebug as v } from "../../../../utils/debug/index.js";
+import { Content as b } from "./content.js";
+import { Video as f } from "./video.js";
+const u = /* @__PURE__ */ t("div")({
   name: "Body",
   class: "bqh4lcc",
   propsAsIs: !1
-}), f = /* @__PURE__ */ r("div")({
+}), h = /* @__PURE__ */ t("div")({
   name: "Main",
   class: "mgga81b",
   propsAsIs: !1
-}), j = ({
-  isMobileScreen: t,
+}), B = ({
+  isMobileScreen: n,
   promotionId: s,
-  sdkKey: n,
-  eventId: i,
-  sidebar: d,
-  production: a,
-  banner: m,
-  layoutMode: c = "side-by-side"
+  sdkKey: i,
+  eventId: d,
+  sidebar: a,
+  skipAutoClose: r,
+  production: m,
+  banner: c,
+  layoutMode: p = "side-by-side"
 }) => {
-  const o = y({
-    sdkKey: n,
-    eventId: i,
-    production: a
+  const o = v({
+    sdkKey: i,
+    eventId: d,
+    production: m
   });
-  return /* @__PURE__ */ e(f, {
-    children: /* @__PURE__ */ p(l, {
+  return /* @__PURE__ */ e(h, {
+    children: /* @__PURE__ */ l(y, {
       sdkKey: o.sdkKey,
       event: o.event,
       production: o.env === "production",
       autoEnable: !0,
-      children: [/* @__PURE__ */ e(b, {
-        children: /* @__PURE__ */ e(v, {
+      children: [/* @__PURE__ */ e(u, {
+        children: /* @__PURE__ */ e(f, {
           event: o.event,
-          banner: m,
-          sidebar: d,
-          layoutMode: c,
+          banner: c,
+          sidebar: a,
+          layoutMode: p,
           promotionId: s,
-          isMobileScreen: t
+          skipAutoClose: r,
+          isMobileScreen: n
         })
       }), /* @__PURE__ */ e("h3", {
         children: "Overlay View (should appear between two text blocks)"
-      }), /* @__PURE__ */ e(u, {})]
+      }), /* @__PURE__ */ e(b, {
+        skipAutoClose: r
+      })]
     })
   });
 };
 export {
-  j as PromotionStory
+  B as PromotionStory
 };

package/lib/app/app/story/promotion/video.d.ts

@@ -3,6 +3,7 @@ export declare const Video: React.FC<{
     banner: 'top' | 'bottom';
     layoutMode: 'cover' | 'side-by-side';
     isMobileScreen?: boolean;
+    skipAutoClose?: boolean;
     event?: string;
     promotionId?: string;
 }>;