@streamlayer/react-ui 1.12.1 → 1.13.1

package/lib/app/app/Advertisement/index.js

@@ -1,20 +1,20 @@
 import { jsx as s } from "react/jsx-runtime";
-import { cx as g } from "@linaria/core";
+import { cx as b } from "@linaria/core";
 import { styled as L } from "@linaria/react";
-import { useStore as h } from "@nanostores/react";
-import { useAnalyticsListener as w } from "../../../hooks/analytics.js";
-import { useEffect as I, useRef as E } from "react";
+import { useStore as g } from "@nanostores/react";
+import { useAnalyticsListener as P } from "../../../hooks/analytics.js";
+import { useEffect as w, useRef as I } from "react";
 import { eventBus as A } from "@streamlayer/sdk-web-interfaces";
-import { FeatureType as T, NotificationPromotionMode as U, PromotionType as N } from "@streamlayer/sdk-web-types";
-import { AdvertisementUI as V } from "../../../ui/advertisement/index.js";
-const W = /* @__PURE__ */ L("div")({
+import { FeatureType as E, NotificationPromotionMode as T, PromotionType as U } from "@streamlayer/sdk-web-types";
+import { AdvertisementUI as N } from "../../../ui/advertisement/index.js";
+const V = /* @__PURE__ */ L("div")({
   name: "AdvertisementUIWrap",
   class: "aa6pjif",
   propsAsIs: !1
-}), j = (r) => {
+}), W = (r) => {
   const t = r.target;
   if (t instanceof HTMLAnchorElement && t.target === "_blank") {
-    const o = t.getAttribute("data-promo-id") || "", i = t.getAttribute("data-promo-type") || N.UNSET;
+    const o = t.getAttribute("data-promo-id") || "", i = t.getAttribute("data-promo-type") || U.UNSET;
     t.getAttribute("data-analytics") === "button" && A.emit("advertisement", {
       action: "buttonSelect",
       payload: {
@@ -29,7 +29,7 @@ const W = /* @__PURE__ */ L("div")({
       }
     });
   }
-}, k = ({
+}, j = ({
   gamification: r,
   layoutMode: t,
   skipAutoClose: o,
@@ -37,41 +37,43 @@ const W = /* @__PURE__ */ L("div")({
   sidebar: a,
   banner: d,
   notification: m,
-  isMobileScreen: c,
-  persistent: l,
-  externalAd: p,
-  controlVideo: u
+  isMobileScreen: l,
+  persistent: c,
+  externalAd: u,
+  controlVideo: p
 }) => {
   var f, v, y;
-  const n = E(null), e = h(r.advertisement.$store);
-  w(n, {
+  const n = I(null), e = g(r.advertisement.$store);
+  P(n, {
     enabled: !!e.data,
     event: "click",
-    listener: j
+    listener: W
   });
-  const S = !d && !a;
-  if (e.data === void 0 || !l && e.isViewed)
+  const h = !d && !a;
+  if (e.data === void 0 || !c && e.isViewed)
     return null;
-  const b = ((y = (v = (f = e == null ? void 0 : e.data) == null ? void 0 : f.notification) == null ? void 0 : v.promotion) == null ? void 0 : y.mode) === U.LOWER_THIRD;
-  return /* @__PURE__ */ s(W, {
+  const S = ((y = (v = (f = e == null ? void 0 : e.data) == null ? void 0 : f.notification) == null ? void 0 : v.promotion) == null ? void 0 : y.mode) === T.LOWER_THIRD;
+  return /* @__PURE__ */ s(V, {
     ref: n,
     style: {
-      height: S ? "auto" : "100%"
+      height: h ? "auto" : "100%"
     },
-    className: g("SL-AdvertisementUIWrap", c && "mobile-view", b && "SL-AdvertisementUIWrap--lower-third"),
-    children: /* @__PURE__ */ s(V, {
+    className: b("SL-AdvertisementUIWrap", l && "mobile-view", S && "SL-AdvertisementUIWrap--lower-third"),
+    children: /* @__PURE__ */ s(N, {
       skipTypeCheck: i,
       sidebar: a,
       banner: d,
       advertisement: e.data,
+      advertisementPaused: e.isPaused,
+      togglePause: e.togglePause,
       close: e.close,
-      externalAd: p ? e.externalAd : void 0,
+      externalAd: u ? e.externalAd : void 0,
       markAsViewed: r.advertisement.markAsViewed,
       open: r.advertisement.open,
       layoutMode: t,
       isNotification: m,
       skipAutoClose: o,
-      controlVideo: u
+      controlVideo: p
     })
   });
 }, _ = ({
@@ -82,12 +84,12 @@ const W = /* @__PURE__ */ L("div")({
   skipAutoClose: a,
   skipTypeCheck: d,
   layoutMode: m,
-  isMobileScreen: c,
-  persistent: l,
-  notification: p
+  isMobileScreen: l,
+  persistent: c,
+  notification: u
 }) => {
-  const u = h(r.featuresList.getStore());
-  if (I(() => {
+  const p = g(r.featuresList.getStore());
+  if (w(() => {
     if (o) {
       const e = document.createElement("script");
       e.async = !0, e.src = "https://imasdk.googleapis.com/js/sdkloader/ima3.js", document.body.appendChild(e);
@@ -106,17 +108,17 @@ const W = /* @__PURE__ */ L("div")({
       },
       children: "externalAd is not supported with banner"
     });
-  if (!u)
+  if (!p)
     return null;
-  const n = r.getFeature(T.GAMES);
-  return n ? /* @__PURE__ */ s(k, {
+  const n = r.getFeature(E.GAMES);
+  return n ? /* @__PURE__ */ s(j, {
     gamification: n,
     sidebar: t,
     banner: i,
     layoutMode: m,
-    isMobileScreen: c,
-    persistent: l,
-    notification: p,
+    isMobileScreen: l,
+    persistent: c,
+    notification: u,
     skipTypeCheck: d,
     skipAutoClose: a,
     externalAd: o,
@@ -124,6 +126,6 @@ const W = /* @__PURE__ */ L("div")({
   }) : null;
 };
 export {
-  W as AdvertisementUIWrap,
+  V as AdvertisementUIWrap,
   _ as StreamLayerSDKAdvertisement
 };

package/lib/app/app/Features/Gamification/Tabs.js

@@ -1,45 +1,47 @@
-import { jsxs as p, jsx as e, Fragment as x } from "react/jsx-runtime";
-import { cx as D } from "@linaria/core";
-import { useStore as h } from "@nanostores/react";
-import { TabsContainer as T, TabsNavContainer as C, SDKSummaryContainer as S, UserSummaryContainer as v, SDKContentContainer as A, LeaderboardContainer as I } from "../../styles.js";
-import { scrollIntoAppView as L } from "../../../useSdkScroll.js";
-import { useState as P, useTransition as V, useEffect as E } from "react";
-import { ActivePages as a, Tabs as K } from "../../../../ui/gamification/tabs/index.js";
-import { Leaderboard as F } from "./Leaderboard.js";
-import { QuestionsList as O } from "./QuestionsList.js";
-import { UserSummary as Q } from "./UserSummary.js";
-const J = ({ gamification: r, className: b, scrollStore: t, scrollNode: f, appNode: m, style: l, responsiveStore: n }) => {
-  const { tabsShown: c } = h(t, { keys: ["tabsShown"] }), [i, w] = P(a.HOME), [, y] = V(), { sdkInDesktopView: u, screen: k } = h(n, { keys: ["sdkInDesktopView"] }), g = (s) => {
-    y(() => {
-      var d;
-      w(s), u === !1 && (((d = m.current) == null ? void 0 : d.getBoundingClientRect().y) || 0) < 0 && L(m, k.size, { behavior: "instant" });
+import { jsxs as f, jsx as e, Fragment as D } from "react/jsx-runtime";
+import { cx as C } from "@linaria/core";
+import { useStore as c } from "@nanostores/react";
+import { TabsContainer as S, TabsNavContainer as E, SDKSummaryContainer as v, UserSummaryContainer as A, SDKContentContainer as I, LeaderboardContainer as L } from "../../styles.js";
+import { scrollIntoAppView as P } from "../../../useSdkScroll.js";
+import { useState as V, useTransition as K, useEffect as l } from "react";
+import { ActivePages as n, Tabs as F } from "../../../../ui/gamification/tabs/index.js";
+import { Leaderboard as O } from "./Leaderboard.js";
+import { QuestionsList as H } from "./QuestionsList.js";
+import { UserSummary as M } from "./UserSummary.js";
+const W = ({ gamification: s, className: w, scrollStore: t, scrollNode: y, appNode: d, style: k, responsiveStore: i }) => {
+  const { tabsShown: u } = c(t, { keys: ["tabsShown"] }), o = c(s.friendsTabEnabled), [a, b] = V(n.HOME), [, T] = K(), { sdkInDesktopView: h, screen: g } = c(i, { keys: ["sdkInDesktopView"] }), x = (r) => {
+    T(() => {
+      var p;
+      b(r), h === !1 && (((p = d.current) == null ? void 0 : p.getBoundingClientRect().y) || 0) < 0 && P(d, g.size, { behavior: "instant" });
     });
   };
-  E(() => t.subscribe((s) => {
-    if (s.scrollPosition === 0) {
+  l(() => t.subscribe((r) => {
+    if (r.scrollPosition === 0) {
       t.setKey("tabsShown", !0);
       return;
     }
-    n.get().sdkInDesktopView ? t.setKey("tabsShown", s.scrollDirection === "backward") : t.setKey("tabsShown", s.scrollDirection === "forward");
-  }), [t, n]);
-  let o = "0px";
-  return u ? o = c ? "0px" : "calc(0px - var(--header-height))" : o = c ? "var(--header-height)" : "0px", /* @__PURE__ */ p(T, { className: D(b, "SL-Tabs"), style: l, children: [
-    /* @__PURE__ */ e(
-      C,
+    i.get().sdkInDesktopView ? t.setKey("tabsShown", r.scrollDirection === "backward") : t.setKey("tabsShown", r.scrollDirection === "forward");
+  }), [t, i]), l(() => {
+    o || b(n.HOME);
+  }, [o]);
+  let m = "0px";
+  return h ? m = u ? "0px" : "calc(0px - var(--header-height))" : m = u ? "var(--header-height)" : "0px", /* @__PURE__ */ f(S, { className: C(w, "SL-Tabs"), style: k, children: [
+    o && /* @__PURE__ */ e(
+      E,
       {
         style: {
-          top: o
+          top: m
         },
-        children: /* @__PURE__ */ e(K, { activePage: i, toggleActivePage: g })
+        children: /* @__PURE__ */ e(F, { activePage: a, toggleActivePage: x })
       }
     ),
-    i === a.HOME && /* @__PURE__ */ p(x, { children: [
-      /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(Q, { userSummary: r.userSummary }) }) }),
-      /* @__PURE__ */ e(A, { style: { flex: 1 }, children: /* @__PURE__ */ e(O, { openQuestion: r.openQuestion, store: r.feedList.getStore() }) })
+    a === n.HOME && /* @__PURE__ */ f(D, { children: [
+      /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(M, { userSummary: s.userSummary }) }) }),
+      /* @__PURE__ */ e(I, { style: { flex: 1 }, children: /* @__PURE__ */ e(H, { openQuestion: s.openQuestion, store: s.feedList.getStore() }) })
     ] }),
-    i === a.LEADERBOARD && /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(F, { scrollStore: t, scrollNode: f, gamification: r }) })
+    a === n.LEADERBOARD && /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(O, { scrollStore: t, scrollNode: y, gamification: s }) })
   ] });
 };
 export {
-  J as Tabs
+  W as Tabs
 };

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

@@ -1,4 +1,5 @@
 import { DebugProps } from '../../../utils/debug';
 export declare const AppStory: React.FC<DebugProps & {
     darkMode?: boolean;
+    friendsTab?: 'enabled' | 'disabled' | 'activatedGame';
 }>;

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

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