@streamlayer/react-ui 1.33.2 → 1.34.0

package/lib/app/webos/Question/index.js

@@ -1,32 +1,32 @@
-import { jsx as n } from "react/jsx-runtime";
-import { styled as N } from "@linaria/react";
-import { Question as O } from "../../app/Features/Gamification/Question.js";
-import { useHideTransition as R } from "../../../hooks/showIn.js";
-import { useState as g, useMemo as C, useEffect as l } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { styled as C } from "@linaria/react";
+import { Question as q } from "../../app/Features/Gamification/Question.js";
+import { useHideTransition as b } from "../../../hooks/showIn.js";
+import { useState as E, useMemo as L, useEffect as l } from "react";
 import { useStore as A } from "@streamlayer/react-polyfills";
-import { eventBus as D } from "@streamlayer/sdk-web-interfaces";
-import { NotificationType as Q } from "@streamlayer/sdk-web-notifications";
-import { FeatureType as b, QuestionType as h, AdUnit as S } from "@streamlayer/sdk-web-types";
-import { InAppNotification as w } from "../../../ui/gamification/question/inapp/notification/AdNotification/index.js";
-import { InAppPredictionResult as U } from "../../../ui/gamification/question/inapp/prediction-result/index.js";
-import { InAppPredictionResultAd as x } from "../../../ui/gamification/question/inapp/prediction-result-ad/index.js";
-import { ShowIn as L } from "../../../ui/show-in/index.js";
-const P = () => L, j = /* @__PURE__ */ N(P())({
+import { eventBus as R } from "@streamlayer/sdk-web-interfaces";
+import { NotificationType as g } from "@streamlayer/sdk-web-notifications";
+import { FeatureType as D, QuestionType as Q, AdUnit as S } from "@streamlayer/sdk-web-types";
+import { InAppNotification as W } from "../../../ui/gamification/question/inapp/notification/AdNotification/index.js";
+import { InAppPredictionResult as h } from "../../../ui/gamification/question/inapp/prediction-result/index.js";
+import { InAppPredictionResultAd as U } from "../../../ui/gamification/question/inapp/prediction-result-ad/index.js";
+import { ShowIn as w } from "../../../ui/show-in/index.js";
+const x = () => w, P = /* @__PURE__ */ C(x())({
   name: "OpenedContainer",
   class: "osyjgip",
   propsAsIs: !0
 }), Z = ({
   sdk: o,
-  notification: i
+  notification: n
 }) => {
-  var a, s, p, u, c, m, f, d;
+  var a, s, p, c, u, m, d, f;
   const T = A(o.featuresList.getStore()), {
     hiding: y,
-    onAnimationEnd: I,
+    onAnimationEnd: N,
     finished: r
-  } = R(), [q] = g(o.getNotificationsStore()), E = A(q), t = C(() => o.getActiveNotification(), [o, E]);
+  } = b(), [I] = E(o.getNotificationsStore()), O = A(I), t = L(() => o.getActiveNotification(), [o, O]);
   l(() => {
-    t && D.emit("notification", {
+    t && R.emit("notification", {
       action: "rendered",
       payload: {
         questionId: t.data.questionId,
@@ -34,31 +34,34 @@ const P = () => L, j = /* @__PURE__ */ N(P())({
       }
     });
   }, [t]);
-  const e = o.getFeature(b.GAMES);
+  const e = o.getFeature(D.GAMES);
   return l(() => {
     r && (e == null || e.closeQuestion());
-  }, [r, e]), !T || !e ? null : i && t && t.type === Q.QUESTION_RESOLVED && t.data.questionType === h.PREDICTION && t.data.question ? ((a = t.data.inApp) == null ? void 0 : a.adUnit) === S.STANDART ? /* @__PURE__ */ n(x, {
+  }, [r, e]), !T || !e ? null : n && t && t.type === g.QUESTION_RESOLVED && t.data.questionType === Q.PREDICTION && t.data.question ? ((a = t.data.inApp) == null ? void 0 : a.adUnit) === S.STANDART ? /* @__PURE__ */ i(U, {
+    className: "SL-CardNotificationWebOs",
     action: t.action,
     close: t.close,
     ...t.data.question,
     inApp: t.data.inApp
-  }) : /* @__PURE__ */ n(U, {
+  }) : /* @__PURE__ */ i(h, {
+    className: "SL-CardNotificationWebOs",
     action: t.action,
     close: t.close,
     ...t.data.question
-  }) : i && t && ((s = t.data.inApp) == null ? void 0 : s.adUnit) === S.STANDART ? /* @__PURE__ */ n(w, {
+  }) : n && t && ((s = t.data.inApp) == null ? void 0 : s.adUnit) === S.STANDART ? /* @__PURE__ */ i(W, {
+    className: "SL-CardNotificationWebOs",
     ...t.data,
     action: t.action,
     close: t.close,
-    color: ((c = (u = (p = t == null ? void 0 : t.data) == null ? void 0 : p.inApp) == null ? void 0 : u.notification) == null ? void 0 : c.indicatorColor) || ((d = (f = (m = t == null ? void 0 : t.data) == null ? void 0 : m.inApp) == null ? void 0 : f.appearance) == null ? void 0 : d.primaryColor) || "",
+    color: ((u = (c = (p = t == null ? void 0 : t.data) == null ? void 0 : p.inApp) == null ? void 0 : c.notification) == null ? void 0 : u.indicatorColor) || ((f = (d = (m = t == null ? void 0 : t.data) == null ? void 0 : m.inApp) == null ? void 0 : d.appearance) == null ? void 0 : f.primaryColor) || "",
     webos: !0
-  }) : i ? null : /* @__PURE__ */ n(j, {
+  }) : n ? null : /* @__PURE__ */ i(P, {
     hiding: y,
-    onAnimationEnd: I,
-    children: /* @__PURE__ */ n(O, {
+    onAnimationEnd: N,
+    children: /* @__PURE__ */ i(q, {
       sdk: o,
       gamification: e,
-      className: "webos",
+      className: "SL-CardWebOs",
       webos: !0
     })
   });

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

@@ -7,6 +7,7 @@ export { StreamLayerSDKAdvertisementWebOS, StreamLayerSDKQuestionWebOS, PauseAd,
 export type StreamLayerSDKTvOptions = {
     showPauseButton?: boolean;
     pauseAdDelay?: number;
+    pauseAdRefetchInterval?: number;
 };
 export type StreamLayerSDKTvProps = {
     persistent?: boolean;

package/lib/app/webos/ui/Sidebar/index.js

@@ -1,71 +1,71 @@
-import { jsx as d, jsxs as l, Fragment as F } from "react/jsx-runtime";
-import { updateAllLayouts as ee } from "@noriginmedia/norigin-spatial-navigation";
-import { withFocusable as oe } from "../../useTvButton.js";
-import { useRef as k, useState as I, useEffect as h } from "react";
-import { eventBus as p } from "@streamlayer/sdk-web-interfaces";
-import { PromotionType as i, AutoPlayVideo as te, PlayVideoMuted as de } from "@streamlayer/sdk-web-types";
-import { SvgIcon as T } from "../../../../ui/icons/index.js";
-import { PromoAction as ae } from "./PromoAction.js";
-import { Wrap as ne, Container as re, Header as ie, BrandBlock as le, LogoIcon as pe, BrandText as se, BrandNameContainer as ce, BrandName as ye, Sponsored as ue, CloseIcon as me, VideoBlock as he, VideoWrapper as Ae, FocusableVideo as Be, VideoStatus as O, Title as Ie, Description as be, CloseButton as Me } from "./styles.js";
-const Re = oe(Me, {
+import { jsx as d, jsxs as r } from "react/jsx-runtime";
+import { updateAllLayouts as E } from "@noriginmedia/norigin-spatial-navigation";
+import { withFocusable as ee } from "../../useTvButton.js";
+import { useRef as O, useState as V, useEffect as h } from "react";
+import { eventBus as s } from "@streamlayer/sdk-web-interfaces";
+import { PromotionType as B, AutoPlayVideo as oe, PlayVideoMuted as te } from "@streamlayer/sdk-web-types";
+import { SvgIcon as j } from "../../../../ui/icons/index.js";
+import { PromoAction as de } from "./PromoAction.js";
+import { Wrap as ae, Container as ne, Header as re, BrandBlock as ie, LogoIcon as le, BrandText as se, BrandNameContainer as pe, BrandName as ce, Sponsored as ue, CloseIcon as me, Content as ye, VideoBlock as he, VideoWrapper as be, FocusableVideo as fe, VideoStatus as G, ContentWrap as Ve, Title as Be, Description as Me, CloseButton as Ae } from "./styles.js";
+const Re = ee(Ae, {
   isFocusBoundary: !0
-}), Ce = (j) => {
-  var N, _, w, P, S, g, L, C, G, D, x, U, v, W;
+}), De = (H) => {
+  var P, C, S, N, g, v, x, D, U, W, L, k, T, _;
   const {
     promotion: e,
     open: c,
     togglePause: a,
-    controlVideo: s,
-    promotionId: r,
-    onClose: b,
-    markAsViewed: A,
-    advertisementPaused: H,
+    controlVideo: p,
+    promotionId: i,
+    onClose: M,
+    markAsViewed: b,
+    advertisementPaused: $,
     isEventFired: o,
     fireEvent: t,
-    muted: $
-  } = j, q = k(null), B = k(null), [M, z] = I(0), K = e.type === i.INGAME_IAB11_LBAR ? M : M / 2, R = !!((_ = (N = e.banner) == null ? void 0 : N.video) != null && _.url), y = e.autoPlayVideo === te.ENABLED, V = e.playVideoMuted === de.ENABLED, Q = V && y, J = e.type === i.INGAME_IAB11_LBAR || e.type === i.INGAME_IAB11 || e.type === i.INGAME_IAB11_SIDEBAR, [f, X] = I(!0), [Y, Z] = I(void 0);
-  let u = (w = e.banner) == null ? void 0 : w.url;
-  return u && !u.startsWith("http") && (u = `https://${u}`), h(() => {
-    if (!B.current) return;
-    const n = new ResizeObserver(([m]) => {
-      const E = m.contentRect.width;
-      z(E);
+    muted: q
+  } = H, z = O(null), f = O(null), [A, K] = V(0), l = e.type === B.INGAME_IAB11_LBAR || e.type === B.INGAME_IAB11 || e.type === B.INGAME_IAB11_SIDEBAR, Q = l ? A + 1 : A / 2, R = !!((C = (P = e.banner) == null ? void 0 : P.video) != null && C.url), u = e.autoPlayVideo === oe.ENABLED, w = e.playVideoMuted === te.ENABLED, J = w && u, [I, X] = V(!0), [Y, Z] = V(void 0);
+  let m = (S = e.banner) == null ? void 0 : S.url;
+  return m && !m.startsWith("http") && (m = `https://${m}`), h(() => {
+    if (!f.current) return;
+    const n = new ResizeObserver(([y]) => {
+      const F = y.contentRect.width;
+      K(F);
     });
-    return n.observe(B.current), ee(), () => {
+    return n.observe(f.current), E(), () => {
       n.disconnect();
     };
   }, []), h(() => {
-    a == null || a(R || y), c == null || c();
-  }, [R, y, c, a]), h(() => {
-    r && e.type && A && A();
-  }, [r, e.type, A]), h(() => () => {
-    s == null || s({ muted: !1 });
-  }, [s]), /* @__PURE__ */ d(ne, { children: /* @__PURE__ */ l(re, { ref: B, children: [
-    /* @__PURE__ */ l(ie, { children: [
-      e.logoMode === 1 && /* @__PURE__ */ l(le, { children: [
-        /* @__PURE__ */ d(pe, { src: (P = e.sponsor) == null ? void 0 : P.logo, alt: "Logo" }),
-        /* @__PURE__ */ l(se, { children: [
-          /* @__PURE__ */ d(ce, { children: /* @__PURE__ */ d(ye, { children: (S = e.sponsor) == null ? void 0 : S.name }) }),
+    a == null || a(R || u), c == null || c();
+  }, [R, u, c, a]), h(() => {
+    i && e.type && b && b();
+  }, [i, e.type, b]), h(() => () => {
+    p == null || p({ muted: !1 });
+  }, [p]), /* @__PURE__ */ d(ae, { children: /* @__PURE__ */ r(ne, { ref: f, children: [
+    /* @__PURE__ */ r(re, { children: [
+      e.logoMode === 1 && /* @__PURE__ */ r(ie, { children: [
+        /* @__PURE__ */ d(le, { src: (N = e.sponsor) == null ? void 0 : N.logo, alt: "Logo" }),
+        /* @__PURE__ */ r(se, { children: [
+          /* @__PURE__ */ d(pe, { children: /* @__PURE__ */ d(ce, { children: (g = e.sponsor) == null ? void 0 : g.name }) }),
           /* @__PURE__ */ d(ue, { children: "SPONSORED" })
         ] })
       ] }),
-      e.logoMode === 2 && e.type === i.INGAME_IAB11_LBAR && /* @__PURE__ */ d("img", { src: (g = e.sponsor) == null ? void 0 : g.logo, alt: "Video paused preview", style: { height: "56px" } }),
+      e.logoMode === 2 && l && /* @__PURE__ */ d("img", { src: (v = e.sponsor) == null ? void 0 : v.logo, alt: "Video paused preview", style: { height: "56px" } }),
       /* @__PURE__ */ d(
         Re,
         {
           autoFocus: !0,
           options: { focusKey: "close-ad-button" },
           webos: !0,
-          onClick: b,
+          onClick: M,
           "data-close-btn": "true",
           children: /* @__PURE__ */ d(me, {})
         }
       )
     ] }),
-    e.logoMode === 2 && e.type !== i.INGAME_IAB11_LBAR && /* @__PURE__ */ d(
+    e.logoMode === 2 && !l && /* @__PURE__ */ d(
       "img",
       {
-        src: (L = e.sponsor) == null ? void 0 : L.logo,
+        src: (x = e.sponsor) == null ? void 0 : x.logo,
         alt: "Video paused preview",
         style: {
           display: "block",
@@ -75,111 +75,115 @@ const Re = oe(Me, {
         }
       }
     ),
-    ((C = e.banner) == null ? void 0 : C.imageUrl) && /* @__PURE__ */ d(he, { style: { height: K }, children: /* @__PURE__ */ d(
-      "img",
-      {
-        src: (G = e.banner) == null ? void 0 : G.imageUrl,
-        alt: "Video paused preview",
-        style: { width: "100%", height: "100%", objectFit: "cover" }
-      }
-    ) }),
-    ((D = e.banner) == null ? void 0 : D.video) && /* @__PURE__ */ l(Ae, { children: [
-      /* @__PURE__ */ d(
-        Be,
+    /* @__PURE__ */ r(ye, { "data-format11": l, children: [
+      ((D = e.banner) == null ? void 0 : D.imageUrl) && /* @__PURE__ */ d(he, { style: { height: Q }, children: /* @__PURE__ */ d(
+        "img",
         {
-          source: e.banner.video.url,
-          poster: (U = (x = e.banner) == null ? void 0 : x.video) == null ? void 0 : U.thumbnailUrl,
-          webos: !0,
-          aspectRatio: J ? "1/1" : "2/1",
-          ref: q,
-          onRender: () => {
-            o != null && o("video-rendered") || (p.emit("advertisement", {
-              action: "videoRendered",
-              payload: {
-                id: r,
-                type: e.type
-              }
-            }), t == null || t("video-rendered"));
-          },
-          onQuartile: (n) => {
-            o != null && o(`video-quartile-${n}`) || (p.emit("advertisement", {
-              action: "quartileCompleted",
-              payload: {
-                id: r,
-                type: e.type,
-                quartile: n
-              }
-            }), t == null || t(`video-quartile-${n}`));
-          },
-          onMute: (n) => {
-            const m = n ? "muted" : "unmuted";
-            o != null && o(m) || (p.emit("advertisement", {
-              action: n ? "videoMuted" : "videoUnmuted",
-              payload: {
-                id: r,
-                type: e.type
-              }
-            }), t == null || t(m)), Z(n);
-          },
-          onPause: () => {
-            a == null || a(!0), X(!1);
-          },
-          onReplay: () => {
-            o != null && o("replayed") || (p.emit("advertisement", {
-              action: "videoReplayed",
-              payload: {
-                id: r,
-                type: e.type
-              }
-            }), t == null || t("replayed"));
-          },
-          onPlay: () => {
-            o != null && o("played") || (p.emit("advertisement", {
-              action: "videoPlay",
-              payload: {
-                id: r,
-                type: e.type
-              }
-            }), t == null || t("played")), a == null || a(!1), o != null && o("played") && (o != null && o("ended")) && !(o != null && o("replayed")) && (p.emit("advertisement", {
-              action: "videoReplayed",
-              payload: {
-                id: r,
-                type: e.type
-              }
-            }), t == null || t("replayed"));
-          },
-          onEnd: () => {
-            o != null && o("ended") || (p.emit("advertisement", {
-              action: "videoEnd",
-              payload: {
-                id: r,
-                type: e.type
-              }
-            }), t == null || t("ended"));
-          },
-          muted: $,
-          autoPlay: y,
-          playMuted: V,
-          controlVideo: s,
-          hasNotPausedVideo: f
+          src: (U = e.banner) == null ? void 0 : U.imageUrl,
+          alt: "Video paused preview",
+          style: { width: "100%", height: "100%", objectFit: "cover" }
         }
-      ),
-      H && !f && /* @__PURE__ */ l(O, { children: [
-        /* @__PURE__ */ d(T, { name: "icon-pause" }),
-        "PAUSED"
+      ) }),
+      ((W = e.banner) == null ? void 0 : W.video) && /* @__PURE__ */ r(be, { children: [
+        /* @__PURE__ */ d(
+          fe,
+          {
+            source: e.banner.video.url,
+            poster: (k = (L = e.banner) == null ? void 0 : L.video) == null ? void 0 : k.thumbnailUrl,
+            webos: !0,
+            aspectRatio: l ? "1/1" : "2/1",
+            ref: z,
+            onRender: () => {
+              o != null && o("video-rendered") || (s.emit("advertisement", {
+                action: "videoRendered",
+                payload: {
+                  id: i,
+                  type: e.type
+                }
+              }), t == null || t("video-rendered"));
+            },
+            onQuartile: (n) => {
+              o != null && o(`video-quartile-${n}`) || (s.emit("advertisement", {
+                action: "quartileCompleted",
+                payload: {
+                  id: i,
+                  type: e.type,
+                  quartile: n
+                }
+              }), t == null || t(`video-quartile-${n}`));
+            },
+            onMute: (n) => {
+              const y = n ? "muted" : "unmuted";
+              o != null && o(y) || (s.emit("advertisement", {
+                action: n ? "videoMuted" : "videoUnmuted",
+                payload: {
+                  id: i,
+                  type: e.type
+                }
+              }), t == null || t(y)), Z(n);
+            },
+            onPause: () => {
+              a == null || a(!0), X(!1);
+            },
+            onReplay: () => {
+              o != null && o("replayed") || (s.emit("advertisement", {
+                action: "videoReplayed",
+                payload: {
+                  id: i,
+                  type: e.type
+                }
+              }), t == null || t("replayed"));
+            },
+            onPlay: () => {
+              o != null && o("played") || (s.emit("advertisement", {
+                action: "videoPlay",
+                payload: {
+                  id: i,
+                  type: e.type
+                }
+              }), t == null || t("played")), a == null || a(!1), o != null && o("played") && (o != null && o("ended")) && !(o != null && o("replayed")) && (s.emit("advertisement", {
+                action: "videoReplayed",
+                payload: {
+                  id: i,
+                  type: e.type
+                }
+              }), t == null || t("replayed"));
+            },
+            onEnd: () => {
+              o != null && o("ended") || (s.emit("advertisement", {
+                action: "videoEnd",
+                payload: {
+                  id: i,
+                  type: e.type
+                }
+              }), t == null || t("ended"));
+            },
+            muted: q,
+            autoPlay: u,
+            playMuted: w,
+            controlVideo: p,
+            hasNotPausedVideo: I
+          }
+        ),
+        $ && !I && /* @__PURE__ */ r(G, { children: [
+          /* @__PURE__ */ d(j, { name: "icon-pause" }),
+          "PAUSED"
+        ] }),
+        Y && J && /* @__PURE__ */ r(G, { children: [
+          /* @__PURE__ */ d(j, { name: "iconMute" }),
+          "MUTED"
+        ] })
       ] }),
-      Y && Q && /* @__PURE__ */ l(O, { children: [
-        /* @__PURE__ */ d(T, { name: "iconMute" }),
-        "MUTED"
+      /* @__PURE__ */ r(Ve, { "data-format11": l, children: [
+        !l && /* @__PURE__ */ r("div", { children: [
+          /* @__PURE__ */ d(Be, { children: (T = e.banner) == null ? void 0 : T.title }),
+          /* @__PURE__ */ d(Me, { children: (_ = e.banner) == null ? void 0 : _.body })
+        ] }),
+        /* @__PURE__ */ d(de, { promotion: e, onClose: M })
       ] })
-    ] }),
-    e.type !== i.INGAME_IAB11 && e.type !== i.INGAME_IAB11_LBAR && e.type !== i.INGAME_IAB11_SIDEBAR && /* @__PURE__ */ l(F, { children: [
-      /* @__PURE__ */ d(Ie, { children: (v = e.banner) == null ? void 0 : v.title }),
-      /* @__PURE__ */ d(be, { children: (W = e.banner) == null ? void 0 : W.body })
-    ] }),
-    /* @__PURE__ */ d(ae, { promotion: e, onClose: b })
+    ] })
   ] }) });
 };
 export {
-  Ce as TVSidebar
+  De as TVSidebar
 };

package/lib/app/webos/ui/Sidebar/styles.d.ts

@@ -1,6 +1,8 @@
 import { default as React } from 'react';
 export declare const Wrap: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Container: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Content: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ContentWrap: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Header: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const BrandBlock: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const LogoIcon: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLImageElement> & React.ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;