@streamlayer/react-ui 1.26.1 → 1.27.1

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

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

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

@@ -1,133 +1,166 @@
-import { jsx as a } from "react/jsx-runtime";
-import { cx as b } from "@linaria/core";
-import { styled as L } from "@linaria/react";
-import { useAnalyticsListener as P } from "../../../hooks/analytics.js";
-import { useState as w, useEffect as E, useRef as I } from "react";
-import { useStore as S } from "@streamlayer/react-polyfills";
-import { eventBus as h } 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 { jsx as n, jsxs as z } from "react/jsx-runtime";
+import { cx as K } from "@linaria/core";
+import { styled as J } from "@linaria/react";
+import { useAnalyticsListener as X } from "../../../hooks/analytics.js";
+import { useState as Y, useEffect as Z, useRef as Q } from "react";
+import { useStore as u } from "@streamlayer/react-polyfills";
+import { eventBus as q } from "@streamlayer/sdk-web-interfaces";
+import { FeatureType as tt, AdUnit as et, NotificationPromotionMode as rt, PromotionType as ot } from "@streamlayer/sdk-web-types";
+import { StreamLayerSDKBannerProvider as at } from "../Banner/index.js";
+import { AdvertisementUI as it } from "../../../ui/advertisement/index.js";
+import { useAdvertisementBackground as nt } from "../../../ui/theme/utils.js";
+const H = /* @__PURE__ */ J("div")({
   name: "AdvertisementUIWrap",
   class: "aa6pjif",
   propsAsIs: !1
-}), k = (o) => {
-  const t = o.target;
-  if (t instanceof HTMLAnchorElement && t.target === "_blank") {
-    const r = t.getAttribute("data-promo-id") || "", i = t.getAttribute("data-promo-type") || N.UNSET;
-    t.getAttribute("data-a") === "button" && h.emit("advertisement", {
+}), st = (a) => {
+  const r = a.target;
+  if (r instanceof HTMLAnchorElement && r.target === "_blank") {
+    const o = r.getAttribute("data-promo-id") || "", i = r.getAttribute("data-promo-type") || ot.UNSET;
+    r.getAttribute("data-a") === "button" && q.emit("advertisement", {
       action: "buttonSelect",
       payload: {
-        id: r,
+        id: o,
         type: i
       }
-    }), t.getAttribute("data-a") === "banner" && h.emit("advertisement", {
+    }), r.getAttribute("data-a") === "banner" && q.emit("advertisement", {
       action: "bannerSelect",
       payload: {
-        id: r,
+        id: o,
         type: i
       }
     });
   }
-}, j = ({
-  gamification: o,
-  layoutMode: t,
-  skipAutoClose: r,
-  skipTypeCheck: i,
-  sidebar: s,
-  banner: d,
-  notification: c,
-  isMobileScreen: u,
-  persistent: p,
-  externalAd: f,
-  controlVideo: v
+}, dt = ({
+  gamification: a,
+  advertisement: r,
+  layoutMode: o,
+  skipAutoClose: i,
+  skipTypeCheck: p,
+  sidebar: m,
+  banner: s,
+  notification: l,
+  isMobileScreen: c,
+  persistent: f,
+  containerId: v,
+  externalAd: g,
+  controlVideo: y,
+  muted: b
 }) => {
-  var y, g, A;
-  const m = I(null), e = S(o.advertisement.$store);
-  P(m, {
-    enabled: !!e.data,
+  var A, U, S, h, I, L, P, E, k, w, T, N, W, D, V, j, x, B, F, M, R;
+  const d = Q(null), t = u(r.$store), e = u(a.openedQuestion.$store);
+  X(d, {
+    enabled: !!t.data,
     event: "click",
-    listener: k
+    listener: st
   });
-  const l = !d && !s;
-  if (e.data === void 0 || !p && e.isViewed)
+  const O = ((S = (U = (A = t.data) == null ? void 0 : A.question) == null ? void 0 : U.backgroundImage) == null ? void 0 : S.landscapeUrl) || ((I = (h = t.data) == null ? void 0 : h.promotion) == null ? void 0 : I.backgroundImageLandscapeUrl), _ = ((E = (P = (L = t.data) == null ? void 0 : L.question) == null ? void 0 : P.backgroundImage) == null ? void 0 : E.portraitUrl) || ((w = (k = t.data) == null ? void 0 : k.promotion) == null ? void 0 : w.backgroundImagePortraitUrl), $ = nt({
+    containerId: v,
+    landscapeUrl: O,
+    portraitUrl: _
+  });
+  if (((T = e == null ? void 0 : e.attributes) == null ? void 0 : T.adUnit) === et.STANDART && ((D = (W = (N = e == null ? void 0 : e.attributes) == null ? void 0 : N.adPromotion) == null ? void 0 : W.banner) != null && D.imageUrl))
+    return s ? /* @__PURE__ */ n(H, {
+      ref: d,
+      style: {
+        height: "100%"
+      },
+      className: K("SL-AdvertisementUIWrap", c && "mobile-view"),
+      children: /* @__PURE__ */ n(at, {
+        cardId: e.id,
+        promotion: {
+          ...(V = e == null ? void 0 : e.attributes) == null ? void 0 : V.adPromotion,
+          adUnit: (j = e == null ? void 0 : e.attributes) == null ? void 0 : j.adUnit
+        }
+      })
+    }) : null;
+  const C = !s && !m;
+  if (t.data === void 0 || !f && t.isViewed)
     return null;
-  const n = ((A = (g = (y = e == null ? void 0 : e.data) == null ? void 0 : y.notification) == null ? void 0 : g.promotion) == null ? void 0 : A.mode) === U.LOWER_THIRD;
-  return /* @__PURE__ */ a(W, {
-    ref: m,
+  const G = ((F = (B = (x = t == null ? void 0 : t.data) == null ? void 0 : x.notification) == null ? void 0 : B.promotion) == null ? void 0 : F.mode) === rt.LOWER_THIRD;
+  return /* @__PURE__ */ z(H, {
+    ref: d,
     style: {
-      height: l ? "auto" : "100%"
+      height: C ? "auto" : "100%"
     },
-    className: b("SL-AdvertisementUIWrap", u && "mobile-view", n && "SL-AdvertisementUIWrap--lower-third"),
-    children: /* @__PURE__ */ a(V, {
-      skipTypeCheck: i,
-      sidebar: s,
-      banner: d,
-      advertisement: e.data,
-      advertisementPaused: e.isPaused,
-      togglePause: e.togglePause,
-      close: e.close,
-      externalAd: f ? e.externalAd : void 0,
-      markAsViewed: o.advertisement.markAsViewed,
-      open: o.advertisement.open,
-      layoutMode: t,
-      isNotification: c,
-      skipAutoClose: r,
-      controlVideo: v
-    })
+    className: K("SL-AdvertisementUIWrap", c && "mobile-view", G && "SL-AdvertisementUIWrap--lower-third"),
+    children: [!l && $, /* @__PURE__ */ n(it, {
+      skipTypeCheck: p,
+      sidebar: m,
+      banner: s,
+      advertisement: t.data,
+      advertisementPaused: !!t.isPaused,
+      togglePause: t.togglePause,
+      isEventFired: t.isEventFired,
+      toggleMute: t.toggleMute,
+      fireEvent: t.fireEvent,
+      close: t.close,
+      externalAd: g ? t.externalAd : void 0,
+      markAsViewed: (M = a.advertisement) == null ? void 0 : M.markAsViewed,
+      open: (R = a.advertisement) == null ? void 0 : R.open,
+      layoutMode: o,
+      isNotification: l,
+      skipAutoClose: i,
+      controlVideo: y,
+      muted: b
+    })]
   });
-}, B = ({
-  sdk: o,
-  sidebar: t,
-  externalAd: r,
+}, Ut = ({
+  sdk: a,
+  sidebar: r,
+  externalAd: o,
   banner: i,
-  skipAutoClose: s,
-  skipTypeCheck: d,
-  layoutMode: c,
-  isMobileScreen: u,
-  persistent: p,
-  notification: f
+  skipAutoClose: p,
+  skipTypeCheck: m,
+  layoutMode: s,
+  isMobileScreen: l,
+  persistent: c,
+  notification: f,
+  muted: v
 }) => {
-  const v = S(o.featuresList.getStore()), [m, e] = w(!r);
-  if (E(() => {
-    if (r) {
-      const n = document.createElement("script");
-      n.async = !0, n.src = "https://imasdk.googleapis.com/pal/sdkloader/pal.js", document.body.appendChild(n), n.onload = () => {
-        e(!0);
+  const g = u(a.featuresList.getStore()), [y, b] = Y(!o), d = u(a.options);
+  if (Z(() => {
+    if (o) {
+      const e = document.createElement("script");
+      e.async = !0, e.src = "https://imasdk.googleapis.com/pal/sdkloader/pal.js", document.body.appendChild(e), e.onload = () => {
+        b(!0);
       };
     }
-  }, [r]), t && i)
-    return /* @__PURE__ */ a("div", {
+  }, [o]), r && i)
+    return /* @__PURE__ */ n("div", {
       style: {
         color: "red"
       },
       children: "define either sidebar or banner, not both."
     });
-  if (i && r)
-    return /* @__PURE__ */ a("div", {
+  if (i && o)
+    return /* @__PURE__ */ n("div", {
       style: {
         color: "red"
       },
       children: "externalAd is not supported with banner"
     });
-  if (!v)
+  if (!g)
     return null;
-  const l = o.getFeature(T.GAMES);
-  return !l || r && !m ? null : /* @__PURE__ */ a(j, {
-    gamification: l,
-    sidebar: t,
+  const t = a.getFeature(tt.GAMES);
+  return !t || o && !y ? null : /* @__PURE__ */ n(dt, {
+    gamification: t,
+    advertisement: t.advertisement,
+    sidebar: r,
     banner: i,
-    layoutMode: c,
-    isMobileScreen: u,
-    persistent: p,
+    layoutMode: s,
+    isMobileScreen: l,
+    persistent: c,
     notification: f,
-    skipTypeCheck: d,
-    skipAutoClose: s,
-    externalAd: r,
-    controlVideo: o.controlVideoPlayer
+    skipTypeCheck: m,
+    skipAutoClose: p,
+    externalAd: o,
+    controlVideo: a.controlVideoPlayer,
+    containerId: d.containerId,
+    muted: v
   });
 };
 export {
-  W as AdvertisementUIWrap,
-  B as StreamLayerSDKAdvertisement
+  H as AdvertisementUIWrap,
+  Ut as StreamLayerSDKAdvertisement
 };

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

@@ -0,0 +1,6 @@
+import { Promotion } from '@streamlayer/sdk-web-types';
+export declare const StreamLayerSDKBannerProvider: React.FC<{
+    promotion: Promotion;
+    cardId: string;
+    direction?: 'top' | 'bottom';
+}>;

package/lib/app/app/Banner/index.js

@@ -0,0 +1,6 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Banner as n } from "../../../ui/advertisement/banner/index.js";
+const a = ({ cardId: r, promotion: o, direction: t = "bottom" }) => /* @__PURE__ */ e(n, { promotion: o, promotionId: r, direction: t, hiding: !1 });
+export {
+  a as StreamLayerSDKBannerProvider
+};

package/lib/app/app/Features/Gamification/Question.d.ts

@@ -1,8 +1,12 @@
 import { Gamification } from '@streamlayer/feature-gamification';
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 export declare const Question: React.FC<{
     gamification: Gamification;
+    sdk: StreamLayerSDK;
     hideSponsor?: boolean;
     className?: string;
     skipAutoClose?: boolean;
     hideHeader?: boolean;
+    muted?: boolean;
+    webos?: boolean;
 }>;

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

@@ -1,75 +1,104 @@
-import { jsxs as y, jsx as e } from "react/jsx-runtime";
-import { styled as v } from "@linaria/react";
-import { useAppContext as T } from "../../useAppContext.js";
-import { useStore as d } from "@streamlayer/react-polyfills";
-import { QuestionType as V } from "@streamlayer/sdk-web-types";
-import { VoteHeader as h } from "../../../../ui/gamification/detail/header/index.js";
-import { Sponsor as x } from "../../../../ui/gamification/detail/sponsor/index.js";
-import { Vote as S, VoteSkeleton as g } from "../../../../ui/gamification/vote/index.js";
-import { InsightDetails as q } from "../../../../ui/gamification/vote/insight-details/index.js";
-import { TwitterDetails as D } from "../../../../ui/gamification/vote/twitter-details/index.js";
-const w = /* @__PURE__ */ v("div")({
+import { jsxs as E, jsx as e } from "react/jsx-runtime";
+import { styled as M } from "@linaria/react";
+import { useAppContext as W } from "../../useAppContext.js";
+import { useState as X } from "react";
+import { useStore as u } from "@streamlayer/react-polyfills";
+import { QuestionType as L, AdUnit as Y } from "@streamlayer/sdk-web-types";
+import { VoteHeader as Z } from "../../../../ui/gamification/detail/header/index.js";
+import { Sponsor as _ } from "../../../../ui/gamification/detail/sponsor/index.js";
+import { Vote as k, VoteSkeleton as F } from "../../../../ui/gamification/vote/index.js";
+import { InsightDetails as Q } from "../../../../ui/gamification/vote/insight-details/index.js";
+import { TwitterDetails as tt } from "../../../../ui/gamification/vote/twitter-details/index.js";
+import { useAdvertisementBackground as ot } from "../../../../ui/theme/utils.js";
+import { QuestionAdvertisement as rt } from "./QuestionAdvertisement.js";
+const N = /* @__PURE__ */ M("div")({
   name: "QuestionContainer",
   class: "q14ckf9e",
   propsAsIs: !1
-}), A = ({
-  openedQuestion: t
+}), st = ({
+  openedQuestion: t,
+  muted: n,
+  webos: c
 }) => {
-  var r, s;
+  var a, i;
   const {
-    sdk: o
-  } = T();
-  return ((r = t == null ? void 0 : t.attributes) == null ? void 0 : r.attributes.case) === "insight" ? /* @__PURE__ */ e(q, {
+    sdk: r
+  } = W();
+  return ((a = t == null ? void 0 : t.attributes) == null ? void 0 : a.attributes.case) === "insight" ? /* @__PURE__ */ e(Q, {
     ...t.attributes.attributes.value,
-    controlVideo: o == null ? void 0 : o.controlVideoPlayer
-  }) : ((s = t == null ? void 0 : t.attributes) == null ? void 0 : s.attributes.case) === "tweet" ? /* @__PURE__ */ e(D, {
+    muted: n,
+    controlVideo: r == null ? void 0 : r.controlVideoPlayer,
+    webos: c
+  }) : ((i = t == null ? void 0 : t.attributes) == null ? void 0 : i.attributes.case) === "tweet" ? /* @__PURE__ */ e(tt, {
     ...t.attributes.attributes.value,
-    controlVideo: o == null ? void 0 : o.controlVideoPlayer
+    muted: n,
+    controlVideo: r == null ? void 0 : r.controlVideoPlayer
   }) : null;
-}, C = ({
+}, et = ({
   extendedQuestion: t,
-  vote: o,
-  close: r
+  vote: n,
+  close: c,
+  webos: r
 }) => {
   const {
-    loading: s,
+    loading: a,
     data: i
   } = t;
-  return i ? /* @__PURE__ */ e(S, {
-    vote: o,
-    close: r,
+  return i ? /* @__PURE__ */ e(k, {
+    webos: r,
+    vote: n,
+    close: c,
     openedQuestion: i,
-    isLoading: !!s
-  }) : /* @__PURE__ */ e(g, {});
-}, z = ({
+    isLoading: !!a
+  }) : /* @__PURE__ */ e(F, {});
+}, Tt = ({
   gamification: t,
-  skipAutoClose: o,
-  hideSponsor: r,
-  className: s,
-  hideHeader: i
+  sdk: n,
+  muted: c,
+  skipAutoClose: r,
+  hideSponsor: a,
+  className: i,
+  hideHeader: O,
+  webos: d
 }) => {
-  var u, c, m, p, f;
-  const n = d(t.openedQuestion.$store), l = d(t.openedQuestion.$extendedStore);
-  if (!n)
+  var A, S, T, v, b, y, U, V, x, D, g, q, C, w, j, H, I, P, $;
+  const s = u(t.openedQuestion.$store), o = u(t.openedQuestion.$extendedStore), [R, z] = X(!1), B = u(n.options), m = ((A = s == null ? void 0 : s.attributes) == null ? void 0 : A.type) === L.FACTOID, l = (S = s == null ? void 0 : s.attributes) == null ? void 0 : S.backgroundImage, p = (T = o.data) == null ? void 0 : T.backgroundImage, G = m ? l == null ? void 0 : l.landscapeUrl : p == null ? void 0 : p.landscapeUrl, J = m ? l == null ? void 0 : l.portraitUrl : p == null ? void 0 : p.portraitUrl, f = ot({
+    containerId: B.containerId,
+    landscapeUrl: G,
+    portraitUrl: J
+  });
+  if (!s)
     return null;
-  const a = n.type, b = ((c = (u = l.data) == null ? void 0 : u.options) == null ? void 0 : c.options.case) === "factoid" ? l.data.options.options.value.closeTimer : void 0;
-  return /* @__PURE__ */ y(w, {
-    className: s,
-    children: [!i && /* @__PURE__ */ e(h, {
-      closeTimer: o ? void 0 : b,
+  const h = s.type, K = ((b = (v = o.data) == null ? void 0 : v.options) == null ? void 0 : b.options.case) === "factoid" ? o.data.options.options.value.closeTimer : void 0;
+  return ((y = o.data) == null ? void 0 : y.adUnit) === Y.STANDART && !R ? /* @__PURE__ */ E(N, {
+    className: i,
+    children: [f, /* @__PURE__ */ e(rt, {
+      id: o.data.id,
+      hasBanner: !!((V = (U = o.data.promotion) == null ? void 0 : U.banner) != null && V.imageUrl),
+      setAdShowed: z,
+      sponsorLogo: ((g = (D = (x = o.data) == null ? void 0 : x.promotion) == null ? void 0 : D.sponsor) == null ? void 0 : g.logo) || ((C = (q = o.data) == null ? void 0 : q.sponsorship) == null ? void 0 : C.logo) || ""
+    })]
+  }) : /* @__PURE__ */ E(N, {
+    className: i,
+    children: [f, !O && /* @__PURE__ */ e(Z, {
+      closeTimer: r ? void 0 : K,
       close: t.closeQuestion,
-      type: ((m = n.attributes) == null ? void 0 : m.type) || V.UNSET
-    }), a === "question" && /* @__PURE__ */ e(C, {
+      type: ((w = s.attributes) == null ? void 0 : w.type) || L.UNSET,
+      webos: d
+    }), h === "question" && /* @__PURE__ */ e(et, {
+      webos: d,
       vote: t.submitAnswer,
       close: t.closeQuestion,
-      extendedQuestion: l
-    }), a !== "question" && /* @__PURE__ */ e(A, {
-      openedQuestion: n
-    }), !r && /* @__PURE__ */ e(x, {
-      sponsorLogo: (f = (p = l.data) == null ? void 0 : p.sponsorship) == null ? void 0 : f.logo
+      extendedQuestion: o
+    }), h !== "question" && /* @__PURE__ */ e(st, {
+      muted: c,
+      openedQuestion: s,
+      webos: d
+    }), !a && /* @__PURE__ */ e(_, {
+      sponsorLogo: ((I = (H = (j = o.data) == null ? void 0 : j.promotion) == null ? void 0 : H.sponsor) == null ? void 0 : I.logo) || (($ = (P = o.data) == null ? void 0 : P.sponsorship) == null ? void 0 : $.logo)
     })]
   });
 };
 export {
-  z as Question
+  Tt as Question
 };

package/lib/app/app/Features/Gamification/QuestionAdvertisement.d.ts

@@ -0,0 +1,6 @@
+export declare const QuestionAdvertisement: React.FC<{
+    id: string;
+    hasBanner: boolean;
+    sponsorLogo: string;
+    setAdShowed: (flag: boolean) => void;
+}>;

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

@@ -0,0 +1,46 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { styled as t } from "@linaria/react";
+import { useRef as u, useEffect as a } from "react";
+import { eventBus as c } from "@streamlayer/sdk-web-interfaces";
+const d = /* @__PURE__ */ t("div")({
+  name: "QuestionAdvertisementContainer",
+  class: "qwludgs",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ t("div")({
+  name: "QuestionAdvertisementText",
+  class: "qvce6pv",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ t("div")({
+  name: "QuestionAdvertisementImage",
+  class: "qsid7hx",
+  propsAsIs: !1
+}), x = ({
+  sponsorLogo: i,
+  id: s,
+  hasBanner: n,
+  setAdShowed: o
+}) => {
+  const r = u();
+  return a(() => (r.current = setTimeout(() => {
+    o(!0), n && c.emit("poll", {
+      action: "bannerOpened",
+      payload: {
+        questionId: s
+      }
+    });
+  }, 5e3), () => {
+    clearTimeout(r.current);
+  }), [o, s, n]), /* @__PURE__ */ m(d, {
+    children: [/* @__PURE__ */ e(l, {
+      children: "PRESENTED BY"
+    }), /* @__PURE__ */ e(p, {
+      children: /* @__PURE__ */ e("img", {
+        src: i,
+        alt: "ad-sponsor-logo"
+      })
+    })]
+  });
+};
+export {
+  x as QuestionAdvertisement
+};

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

@@ -1,31 +1,31 @@
-import { jsxs as f, jsx as e, Fragment as D } from "react/jsx-runtime";
+import { jsxs as p, jsx as e, Fragment as D } from "react/jsx-runtime";
 import { cx as C } from "@linaria/core";
 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, useEffect as l } from "react";
-import { useStore as c, useTransition as K } from "@streamlayer/react-polyfills";
+import { useState as V, useEffect as f } from "react";
+import { useStore as d, useTransition as K } from "@streamlayer/react-polyfills";
 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) => {
+const W = ({ gamification: s, className: w, scrollStore: t, scrollNode: y, appNode: c, style: k, responsiveStore: i }) => {
+  const { tabsShown: u } = d(t, { keys: ["tabsShown"] }), o = d(s.friendsTabEnabled), [a, h] = V(n.HOME), [, T] = K(), { sdkInDesktopView: l, screen: g } = d(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" });
+      var b;
+      h(r), l === !1 && (((b = c.current) == null ? void 0 : b.getBoundingClientRect().y) || 0) < 0 && P(c, g.size, { behavior: "instant" });
     });
   };
-  l(() => t.subscribe((r) => {
+  f(() => t.subscribe((r) => {
     if (r.scrollPosition === 0) {
       t.setKey("tabsShown", !0);
       return;
     }
     i.get().sdkInDesktopView ? t.setKey("tabsShown", r.scrollDirection === "backward") : t.setKey("tabsShown", r.scrollDirection === "forward");
-  }), [t, i]), l(() => {
-    o || b(n.HOME);
+  }), [t, i]), f(() => {
+    o || h(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: [
+  return l ? m = u ? "0px" : "calc(0px - var(--header-height))" : m = u ? "var(--header-height)" : "0px", /* @__PURE__ */ p(S, { className: C(w, "SL-Tabs", "sl-hide-on-modal"), style: k, children: [
     o && /* @__PURE__ */ e(
       E,
       {
@@ -35,7 +35,7 @@ const W = ({ gamification: s, className: w, scrollStore: t, scrollNode: y, appNo
         children: /* @__PURE__ */ e(F, { activePage: a, toggleActivePage: x })
       }
     ),
-    a === n.HOME && /* @__PURE__ */ f(D, { children: [
+    a === n.HOME && /* @__PURE__ */ p(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() }) })
     ] }),

package/lib/app/app/Features/Gamification/index.d.ts

@@ -2,6 +2,7 @@ import { AppNodeRef, ScrollNodeRef } from '../../..';
 import { ResponsiveStore } from '../../../useSdkResponsive';
 import { ScrollStore } from '../../../useSdkScroll';
 import { Gamification as GamificationClass } from '@streamlayer/feature-gamification';
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 export declare const GamificationOverlay: React.FC<{
     gamification: GamificationClass;
     className?: string;
@@ -16,7 +17,9 @@ export declare const GamificationOverlay: React.FC<{
  */
 export declare const GamificationOverlayStandalone: React.FC<{
     gamification: GamificationClass;
+    sdk: StreamLayerSDK;
     className?: string;
     responsiveStore: ResponsiveStore;
     appNode: AppNodeRef;
+    muted?: boolean;
 }>;