@streamlayer/react-ui 1.11.4 → 1.12.1

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

@@ -9,6 +9,7 @@ export type StreamLayerSDKAdvertisementProps = {
     banner?: 'top' | 'bottom';
     layoutMode?: 'cover' | 'side-by-side';
     skipAutoClose?: boolean;
+    externalAd?: boolean;
 };
 export declare const StreamLayerSDKAdvertisement: React.FC<StreamLayerSDKAdvertisementProps & {
     sdk: StreamLayerSDK;

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

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

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

@@ -1,18 +1,18 @@
-import { jsxs as u, jsx as e, Fragment as x } from "react/jsx-runtime";
-import { cx as T } from "@linaria/core";
+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 D, TabsNavContainer as C, SDKWhiteContainer as S, UserSummaryContainer as v, SDKContentContainer as A, LeaderboardContainer as I } from "../../styles.js";
+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 G = ({ gamification: r, className: l, scrollStore: t, scrollNode: b, appNode: m, style: f, responsiveStore: n }) => {
-  const { tabsShown: c } = h(t, { keys: ["tabsShown"] }), [i, w] = P(a.HOME), [, y] = V(), { sdkInDesktopView: d, screen: g } = h(n, { keys: ["sdkInDesktopView"] }), k = (s) => {
+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 p;
-      w(s), d === !1 && (((p = m.current) == null ? void 0 : p.getBoundingClientRect().y) || 0) < 0 && L(m, g.size, { behavior: "instant" });
+      var d;
+      w(s), u === !1 && (((d = m.current) == null ? void 0 : d.getBoundingClientRect().y) || 0) < 0 && L(m, k.size, { behavior: "instant" });
     });
   };
   E(() => t.subscribe((s) => {
@@ -23,23 +23,23 @@ const G = ({ gamification: r, className: l, scrollStore: t, scrollNode: b, appNo
     n.get().sdkInDesktopView ? t.setKey("tabsShown", s.scrollDirection === "backward") : t.setKey("tabsShown", s.scrollDirection === "forward");
   }), [t, n]);
   let o = "0px";
-  return d ? o = c ? "0px" : "calc(0px - var(--header-height))" : o = c ? "var(--header-height)" : "0px", /* @__PURE__ */ u(D, { className: T(l, "SL-Tabs"), style: f, children: [
+  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,
       {
         style: {
           top: o
         },
-        children: /* @__PURE__ */ e(K, { activePage: i, toggleActivePage: k })
+        children: /* @__PURE__ */ e(K, { activePage: i, toggleActivePage: g })
       }
     ),
-    i === a.HOME && /* @__PURE__ */ u(x, { children: [
-      /* @__PURE__ */ e(S, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(Q, { userSummary: r.userSummary }) }) }),
+    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() }) })
     ] }),
-    i === a.LEADERBOARD && /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(F, { scrollStore: t, scrollNode: b, gamification: r }) })
+    i === a.LEADERBOARD && /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(F, { scrollStore: t, scrollNode: f, gamification: r }) })
   ] });
 };
 export {
-  G as Tabs
+  J as Tabs
 };

package/lib/app/app/Navigation/index.js

@@ -1,112 +1,118 @@
-import { jsxs as v, jsx as o } from "react/jsx-runtime";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import { cx as S } from "@linaria/core";
 import { styled as n } from "@linaria/react";
-import { useStore as m } from "@nanostores/react";
-import { forwardRef as y, useMemo as h } from "react";
-import { AvailableFeatures as I } from "@streamlayer/sdk-web-features";
-import { FeatureType as u } from "@streamlayer/sdk-web-types";
-import { SvgIcon as g } from "../../../ui/icons/index.js";
-import { Navigation as A, NavigationItems as C } from "../../../ui/navigation/index.js";
+import { useStore as v } from "@nanostores/react";
+import { forwardRef as y, useMemo as u } from "react";
+import { AvailableFeatures as b } from "@streamlayer/sdk-web-features";
+import { FeatureType as C } from "@streamlayer/sdk-web-types";
+import { SvgIcon as h } from "../../../ui/icons/index.js";
+import { Navigation as A, NavigationItems as I } from "../../../ui/navigation/index.js";
 import { Button as t } from "../../../ui/navigation/button/index.js";
-const F = () => g, x = /* @__PURE__ */ n(F())({
+const g = () => h, x = /* @__PURE__ */ n(g())({
   name: "ButtonIcon",
   class: "b11wpe79",
   propsAsIs: !0
-}), N = /* @__PURE__ */ n("div")({
+}), F = /* @__PURE__ */ n("div")({
   name: "Container",
   class: "calnblm",
   propsAsIs: !1
-}), b = /* @__PURE__ */ n("div")({
+}), D = /* @__PURE__ */ n("div")({
   name: "Title",
   class: "t1438p52",
   propsAsIs: !1
-}), B = /* @__PURE__ */ n("div")({
+}), N = /* @__PURE__ */ n("div")({
   name: "CloseIconWrap",
   class: "c17srj38",
   propsAsIs: !1
-}), j = () => g, w = /* @__PURE__ */ n(j())({
+}), B = () => h, j = /* @__PURE__ */ n(B())({
   name: "CloseIcon",
   class: "clqia8k",
   propsAsIs: !0
-}), G = "hf5w958", H = y(({
+}), w = () => h, G = /* @__PURE__ */ n(w())({
+  name: "DashboardIcon",
+  class: "df5w958",
+  propsAsIs: !0
+}), M = "h12x6aiv", z = y(({
   sdk: s,
-  className: c
-}, l) => {
-  const i = () => {
+  className: l
+}, p) => {
+  const a = () => {
     s.closeFeature();
   };
-  return /* @__PURE__ */ v(A, {
-    className: S(c, G),
-    children: [/* @__PURE__ */ v(N, {
-      children: [/* @__PURE__ */ o(b, {
-        children: "Live Challenge"
-      }), /* @__PURE__ */ o(B, {
-        onClick: i,
-        children: /* @__PURE__ */ o(w, {
+  return /* @__PURE__ */ c(A, {
+    className: S(l, M),
+    children: [/* @__PURE__ */ c(F, {
+      children: [/* @__PURE__ */ c(D, {
+        children: [/* @__PURE__ */ e(G, {
+          name: "dashboard"
+        }), "Dashboard"]
+      }), /* @__PURE__ */ e(N, {
+        onClick: a,
+        children: /* @__PURE__ */ e(j, {
           name: "icon-cross"
         })
       })]
-    }), /* @__PURE__ */ o("div", {
-      ref: l
+    }), /* @__PURE__ */ e("div", {
+      ref: p
     })]
   });
-}), R = y(({
+}), J = y(({
   sdk: s,
-  className: c
-}, l) => {
-  const i = m(s.sdkStore.organizationSettings), r = m(s.sdkStore.streamSettings), a = m(s.getActiveFeature()), f = h(() => {
-    const e = (r == null ? void 0 : r.data) || (i == null ? void 0 : i.data);
-    return e != null && e.overlays ? e.overlays : [];
-  }, [i, r]), p = h(() => [...f.filter(({
-    enableSdkButton: e,
-    type: d
-  }) => d === u.GAMES || e).map((e) => ({
-    id: e.type,
-    onClick: () => s.openFeature(e.type),
-    disabled: !(e.type in I),
-    label: e.name,
-    icon: /* @__PURE__ */ o("img", {
-      src: e.icon,
+  className: l
+}, p) => {
+  const a = v(s.sdkStore.organizationSettings), r = v(s.sdkStore.streamSettings), i = v(s.getActiveFeature()), f = u(() => {
+    const o = (r == null ? void 0 : r.data) || (a == null ? void 0 : a.data);
+    return o != null && o.overlays ? o.overlays : [];
+  }, [a, r]), d = u(() => [...f.filter(({
+    enableSdkButton: o,
+    type: m
+  }) => m === C.GAMES || o).map((o) => ({
+    id: o.type,
+    onClick: () => s.openFeature(o.type),
+    disabled: !(o.type in b),
+    label: o.name,
+    icon: /* @__PURE__ */ e("img", {
+      src: o.icon,
       alt: ""
     }),
     /** multiplied by 10 to add the ability to insert custom buttons between our buttons */
-    position: e.position * 10
-  }))].sort((e, d) => e.position - d.position), [f, s]);
-  return /* @__PURE__ */ v(A, {
-    className: c,
-    children: [p.length !== 0 && /* @__PURE__ */ o(C, {
-      children: [/* @__PURE__ */ o(t, {
+    position: o.position * 10
+  }))].sort((o, m) => o.position - m.position), [f, s]);
+  return /* @__PURE__ */ c(A, {
+    className: l,
+    children: [d.length !== 0 && /* @__PURE__ */ e(I, {
+      children: [/* @__PURE__ */ e(t, {
         id: "Channels",
         onClick: () => s.closeFeature(),
         label: "Channels",
-        active: a === 0
-      }, "Channels"), ...p.map((e) => e.id === u.GAMES ? /* @__PURE__ */ o(t, {
-        ...e,
-        active: e.id === a,
+        active: i === 0
+      }, "Channels"), ...d.map((o) => o.id === C.GAMES ? /* @__PURE__ */ e(t, {
+        ...o,
+        active: o.id === i,
         label: "StreamLayer +",
         id: "featuredGroups",
-        icon: /* @__PURE__ */ o(x, {
+        icon: /* @__PURE__ */ e(x, {
           name: "icon-btn-feature-groups",
-          "data-selected": e.id === a
+          "data-selected": o.id === i
         })
-      }, e.id) : /* @__PURE__ */ o(t, {
-        ...e,
+      }, o.id) : /* @__PURE__ */ e(t, {
+        ...o,
         icon: void 0,
-        active: e.id === a
-      }, e.id))]
-    }), !p.length && /* @__PURE__ */ o(C, {
-      children: [/* @__PURE__ */ o(t, {
+        active: o.id === i
+      }, o.id))]
+    }), !d.length && /* @__PURE__ */ e(I, {
+      children: [/* @__PURE__ */ e(t, {
         id: "empty",
         label: "No Features...",
         active: !1,
         disabled: !0
       }, "empty")]
-    }), /* @__PURE__ */ o("div", {
-      ref: l
+    }), /* @__PURE__ */ e("div", {
+      ref: p
     })]
   });
 });
 export {
-  H as SDKHeader,
-  R as SDKNavigation
+  z as SDKHeader,
+  J as SDKNavigation
 };