@streamlayer/react-ui 1.26.0 → 1.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -15,10 +15,15 @@
       "default": "./lib/app/masters/masters.js",
       "types": "./lib/app/masters/masters.d.ts"
     },
-    "./tv": {
-      "import": "./lib/app/tvos/index.js",
-      "default": "./lib/app/tvos/index.js",
-      "types": "./lib/app/tvos/index.d.ts"
+    "./webos": {
+      "import": "./lib/app/webos/index.js",
+      "default": "./lib/app/webos/index.js",
+      "types": "./lib/app/webos/index.d.ts"
+    },
+    "./webos/withTVRemote": {
+      "import": "./lib/app/webos/withTVRemote.js",
+      "default": "./lib/app/webos/withTVRemote.js",
+      "types": "./lib/app/webos/withTVRemote.d.ts"
     },
     "./mastersPoints": {
       "import": "./lib/app/masters/Points/index.js",
@@ -66,27 +71,28 @@
   ],
   "peerDependencies": {
     "@lottiefiles/react-lottie-player": "^3.5.4",
-    "@streamlayer/sl-eslib": "^5.179.1",
+    "@streamlayer/sl-eslib": "^5.216.1",
     "@types/lodash.throttle": "^4.1.9",
     "lodash.throttle": "^4.1.1",
     "react-infinite-scroller": "^1.2.6",
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
+    "@noriginmedia/norigin-spatial-navigation": "^2.3.0",
     "react-window-infinite-loader": "^1.0.9",
     "uuid": "^11.1.0",
-    "@streamlayer/feature-gamification": "^1.19.0",
-    "@streamlayer/react-polyfills": "^0.1.25",
-    "@streamlayer/sdk-web": "^1.13.0",
-    "@streamlayer/sdk-web-analytics": "^1.10.0",
-    "@streamlayer/sdk-web-anonymous-auth": "^1.1.44",
-    "@streamlayer/sdk-web-api": "^1.11.0",
-    "@streamlayer/sdk-web-core": "^1.14.0",
-    "@streamlayer/sdk-web-features": "^1.0.65",
-    "@streamlayer/sdk-web-interfaces": "^1.6.3",
-    "@streamlayer/sdk-web-logger": "^1.0.65",
-    "@streamlayer/sdk-web-notifications": "^1.3.27",
-    "@streamlayer/sdk-web-storage": "^1.0.65",
-    "@streamlayer/sdk-web-types": "^1.13.0"
+    "@streamlayer/feature-gamification": "^1.20.0",
+    "@streamlayer/react-polyfills": "^0.1.27",
+    "@streamlayer/sdk-web": "^1.14.0",
+    "@streamlayer/sdk-web-analytics": "^1.11.0",
+    "@streamlayer/sdk-web-anonymous-auth": "^1.1.46",
+    "@streamlayer/sdk-web-api": "^1.12.0",
+    "@streamlayer/sdk-web-core": "^1.15.0",
+    "@streamlayer/sdk-web-features": "^1.0.67",
+    "@streamlayer/sdk-web-interfaces": "^1.7.0",
+    "@streamlayer/sdk-web-logger": "^1.0.67",
+    "@streamlayer/sdk-web-notifications": "^1.3.29",
+    "@streamlayer/sdk-web-storage": "^1.0.67",
+    "@streamlayer/sdk-web-types": "^1.14.0"
   },
   "nx": {
     "implicitDependencies": [
@@ -113,6 +119,7 @@
     "@wyw-in-js/vite": "^0.5.3",
     "esbuild-plugin-babel": "^0.2.3",
     "glob": "^11.0.0",
+    "hls.js": "^1.6.13",
     "react": "18.3.1",
     "react-auth-code-input": "^3.2.1",
     "react-countdown-circle-timer": "^3.2.1",
@@ -126,7 +133,7 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@streamlayer/react": "^1.17.0"
+    "@streamlayer/react": "^1.18.0"
   },
   "dependencies": {
     "@dailymotion/vast-client": "^6.2.0",

package/lib/app/tvos/Advertisement.js

@@ -1,88 +0,0 @@
-import { jsx as i } from "react/jsx-runtime";
-import { cx as c } from "@linaria/core";
-import { styled as p } from "@linaria/react";
-import { useAnalyticsListener as f } from "../../hooks/analytics.js";
-import { useRef as v } from "react";
-import { useStore as l } from "@streamlayer/react-polyfills";
-import { eventBus as d } from "@streamlayer/sdk-web-interfaces";
-import { FeatureType as A, PromotionType as y } from "@streamlayer/sdk-web-types";
-import { AdvertisementUI as g } from "./AdvertisementUI.js";
-const S = /* @__PURE__ */ p("div")({
-  name: "AdvertisementUIWrap",
-  class: "a3844y1",
-  propsAsIs: !1
-}), b = (t) => {
-  const e = t.target;
-  if (e instanceof HTMLAnchorElement && e.target === "_blank") {
-    const r = e.getAttribute("data-promo-id") || "", o = e.getAttribute("data-promo-type") || y.UNSET;
-    e.getAttribute("data-a") === "button" && d.emit("advertisement", {
-      action: "buttonSelect",
-      payload: {
-        id: r,
-        type: o
-      }
-    }), e.getAttribute("data-a") === "banner" && d.emit("advertisement", {
-      action: "bannerSelect",
-      payload: {
-        id: r,
-        type: o
-      }
-    });
-  }
-}, L = ({
-  gamification: t,
-  skipAutoClose: e,
-  sidebar: r,
-  banner: o,
-  persistent: s,
-  controlVideo: m
-}) => {
-  const n = v(null), a = l(t.advertisement.$store);
-  f(n, {
-    enabled: !!a.data,
-    event: "click",
-    listener: b
-  });
-  const u = !o && !r;
-  return a.data === void 0 || !s && a.isViewed ? null : /* @__PURE__ */ i(S, {
-    ref: n,
-    style: {
-      height: u ? "auto" : "100%"
-    },
-    className: c("SL-AdvertisementUIWrap", "SL-AdvertisementUIWrap--lower-third"),
-    children: /* @__PURE__ */ i(g, {
-      sidebar: r,
-      banner: o,
-      advertisement: a.data,
-      advertisementPaused: !!a.isPaused,
-      togglePause: a.togglePause || (() => {
-      }),
-      close: a.close,
-      markAsViewed: t.advertisement.markAsViewed,
-      open: t.advertisement.open,
-      skipAutoClose: e,
-      controlVideo: m
-    })
-  });
-}, E = ({
-  sdk: t,
-  sidebar: e,
-  banner: r,
-  skipAutoClose: o,
-  persistent: s
-}) => {
-  if (!l(t.featuresList.getStore()))
-    return null;
-  const n = t.getFeature(A.GAMES);
-  return n ? /* @__PURE__ */ i(L, {
-    gamification: n,
-    sidebar: e,
-    banner: r,
-    persistent: s,
-    skipAutoClose: o,
-    controlVideo: t.controlVideoPlayer
-  }) : null;
-};
-export {
-  E as StreamLayerSDKAdvertisementTVOs
-};

package/lib/app/tvos/AdvertisementUI.js

@@ -1,40 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Banner as u } from "../../ui/advertisement/banner/index.js";
-import { Sidebar as c } from "../../ui/advertisement/sidebar/index.js";
-import { TVSidebar as s } from "./ui/Sidebar/index.js";
-const g = ({
-  advertisement: o,
-  close: t,
-  skipAutoClose: m,
-  sidebar: i,
-  banner: n,
-  markAsViewed: p,
-  open: f,
-  controlVideo: l,
-  advertisementPaused: d,
-  togglePause: e
-}) => o.promotion ? i ? /* @__PURE__ */ r(c, { className: "PromoSidebarContainer", direction: i, hiding: !1, children: /* @__PURE__ */ r(
-  s,
-  {
-    markAsViewed: p,
-    promotionId: o.question.id,
-    promotion: o.promotion,
-    onClose: t,
-    open: f,
-    controlVideo: l,
-    skipAutoClose: m,
-    advertisementPaused: d,
-    togglePause: e
-  }
-) }) : n ? /* @__PURE__ */ r(
-  u,
-  {
-    promotionId: o.question.id,
-    hiding: !1,
-    promotion: o.promotion,
-    direction: n
-  }
-) : null : null;
-export {
-  g as AdvertisementUI
-};

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

@@ -1,16 +0,0 @@
-import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-export declare const StreamLayerSDKTv: React.FC<{
-    persistent?: boolean;
-    children: React.ReactNode;
-    sdk: StreamLayerSDK;
-    uiState: {
-        promotionExternalAd?: boolean;
-        promotionSidebar?: boolean;
-        promotionOverlay?: boolean;
-        promotionNotification?: boolean;
-        promotionBanner?: boolean;
-        app?: boolean;
-        appNotification?: boolean;
-        onboardingNotification?: boolean;
-    };
-}>;

package/lib/app/tvos/index.js

@@ -1,23 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { useStore as n } from "@streamlayer/react-polyfills";
-import { FeatureType as u } from "@streamlayer/sdk-web-types";
-import { StreamLayerSDKAdvertisementTVOs as a } from "./Advertisement.js";
-import { SDKLayout as f } from "./ui/Layout/index.js";
-const l = ({ persistent: t, children: i, sdk: r, uiState: m }) => {
-  if (!n(r.featuresList.getStore()))
-    return null;
-  const o = r.getFeature(u.GAMES);
-  return o ? /* @__PURE__ */ e(
-    f,
-    {
-      gamification: o,
-      sidebar: /* @__PURE__ */ e(a, { sdk: r, persistent: t, sidebar: "right" }),
-      banner: /* @__PURE__ */ e(a, { sdk: r, persistent: t, banner: "bottom" }),
-      video: i,
-      uiState: m
-    }
-  ) : null;
-};
-export {
-  l as StreamLayerSDKTv
-};

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

@@ -1,6 +0,0 @@
-export declare const TVOsStory: React.FC<{
-    sdkKey?: string;
-    eventId?: string;
-    production?: boolean;
-    persistent?: boolean;
-}>;

package/lib/app/tvos/story.js

@@ -1,34 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { StreamLayerProvider as n, useStreamLayer as u, useStreamLayerUI as i } from "@streamlayer/react";
-import { useStreamLayerDebug as m } from "../../utils/debug/index.js";
-import { StreamLayerSDKTv as d } from "./index.js";
-const p = ({ persistent: t }) => {
-  const e = u(), o = i();
-  return e ? /* @__PURE__ */ r(d, { sdk: e, persistent: t, uiState: o, children: /* @__PURE__ */ r(
-    "video",
-    {
-      src: "https://storage.googleapis.com/cdn.streamlayer.io/assets/sdk-web/Own%20The%20Game%201080p%20RF18.mp4",
-      style: { width: "100%", height: "100%", borderRadius: 10 },
-      autoPlay: !0,
-      loop: !0,
-      playsInline: !0,
-      controls: !0
-    }
-  ) }) : null;
-}, S = ({ sdkKey: t, eventId: e, persistent: o, production: a }) => {
-  const s = m({ sdkKey: t, eventId: e, production: a });
-  return /* @__PURE__ */ r(
-    n,
-    {
-      event: s.event,
-      sdkKey: s.sdkKey,
-      production: s.env === "production",
-      autoEnable: !0,
-      withAd: !0,
-      children: /* @__PURE__ */ r(p, { persistent: o })
-    }
-  );
-};
-export {
-  S as TVOsStory
-};

package/lib/app/tvos/styles.js

@@ -1,4 +0,0 @@
-const e = "c1ln9egv";
-export {
-  e as customTheme
-};

package/lib/app/tvos/ui/Layout/index.js

@@ -1,76 +0,0 @@
-import { jsxs as d, jsx as t } from "react/jsx-runtime";
-import { useRef as f, useCallback as x, useEffect as g } from "react";
-import { useStore as N } from "@streamlayer/react-polyfills";
-import { Container as R, ContentContainer as S, VideoContainer as V, AdContainer as k, AdLabel as z, VideoBox as A, VideoPlayer as E, Banner as L, Sidebar as j } from "./styles.js";
-const D = ({ gamification: b, sidebar: p, banner: y, video: C, uiState: l }) => {
-  var m, u;
-  const i = N(b.advertisement.$store), n = f(null), h = f(null), o = x(() => {
-    const e = h.current, r = n.current;
-    if (!e || !r)
-      return;
-    const { width: c, height: B } = e.getBoundingClientRect(), { width: v, height: w } = r.getBoundingClientRect();
-    (c > v || B > w) && (e.style.width === "100%" ? (e.style.height = "100%", e.style.width = "auto") : (e.style.width = "100%", e.style.height = "auto"));
-  }, []);
-  g(() => {
-    if (n.current) {
-      const e = new ResizeObserver((r) => {
-        for (const c of r)
-          c.contentBoxSize && o();
-      });
-      return e.observe(n.current), () => {
-        e.disconnect();
-      };
-    }
-    return () => {
-    };
-  }, [o]), g(o);
-  const a = l.promotionSidebar, s = l.promotionBanner;
-  return /* @__PURE__ */ d(
-    R,
-    {
-      style: { backgroundImage: `url(${(u = (m = i == null ? void 0 : i.data) == null ? void 0 : m.promotion) == null ? void 0 : u.backgroundImageLandscapeUrl})` },
-      className: "Container",
-      children: [
-        /* @__PURE__ */ d(
-          S,
-          {
-            className: "ContentContainer",
-            style: {
-              width: a ? "calc(100% - var(--sidebar-width))" : "100%"
-            },
-            children: [
-              /* @__PURE__ */ d(
-                V,
-                {
-                  className: "VideoContainer",
-                  ref: n,
-                  style: {
-                    height: s ? "calc(100% - var(--banner-height))" : "100%"
-                  },
-                  children: [
-                    /* @__PURE__ */ t(k, { children: /* @__PURE__ */ t(z, { children: "Ad" }) }),
-                    /* @__PURE__ */ t(A, { ref: h, className: "VideoBox", children: /* @__PURE__ */ t(E, { className: "VideoPlayer", children: C }) })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ t(
-                L,
-                {
-                  className: "Banner",
-                  style: {
-                    height: s ? "var(--banner-height)" : "0px"
-                  },
-                  children: s && y
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ t(j, { style: { width: a ? "var(--sidebar-width)" : "0px" }, className: "Sidebar", children: a && p })
-      ]
-    }
-  );
-};
-export {
-  D as SDKLayout
-};

package/lib/app/tvos/ui/Sidebar/PromoAction.d.ts

@@ -1,2 +0,0 @@
-import { default as React } from 'react';
-export declare const PromoAction: React.ForwardRefExoticComponent<Omit<import('@streamlayer/sdk-web-types').RecursiveOmitHelper<import('@streamlayer/sl-eslib/interactive/interactive.common_pb').QuestionOptions_PromotionOptions, "$typeName">, "$typeName"> & React.RefAttributes<HTMLDivElement | HTMLAnchorElement>>;

package/lib/app/tvos/ui/Sidebar/PromoAction.js

@@ -1,62 +0,0 @@
-import { jsxs as c, jsx as n, Fragment as D } from "react/jsx-runtime";
-import { forwardRef as S } from "react";
-import { QRBlock as t, QR as d, QRDescBlock as u, LearnMore as E, QRHint as A, SendToUserButton as O, EnvelopeIcon as f, SendToUserText as x } from "./styles.js";
-const B = S(({ promotion: e }, r) => {
-  var R, C, s, T, N, i, I;
-  const l = e.buttonType, b = e.coupon, a = (R = e.banner) == null ? void 0 : R.url, h = e.type;
-  return l === 1 ? /* @__PURE__ */ c(t, { children: [
-    /* @__PURE__ */ n(d, { value: a, ref: r, tabIndex: 1 }),
-    /* @__PURE__ */ c(u, { children: [
-      /* @__PURE__ */ n(E, { children: "LEARN MORE" }),
-      /* @__PURE__ */ n(A, { children: "SCAN QR CODE WITH YOUR PHONE CAMERA" })
-    ] })
-  ] }) : l === 3 ? /* @__PURE__ */ c(t, { children: [
-    /* @__PURE__ */ n(d, { value: b, ref: r }),
-    /* @__PURE__ */ c(u, { children: [
-      /* @__PURE__ */ n(E, { style: { fontSize: 18, fontWeight: 400 }, children: "ADD TO APPLE WALLET" }),
-      /* @__PURE__ */ n(A, { style: { fontSize: 17 }, children: "SCAN QR CODE WITH YOUR PHONE CAMERA" })
-    ] })
-  ] }) : l === 6 && h !== 4 ? /* @__PURE__ */ c(D, { children: [
-    /* @__PURE__ */ c(
-      O,
-      {
-        ref: r,
-        tabIndex: 1,
-        focusColor: (s = (C = e == null ? void 0 : e.banner) == null ? void 0 : C.ctaButton) == null ? void 0 : s.color,
-        children: [
-          /* @__PURE__ */ n(f, {}),
-          "SEND INFO TO ACCOUNT EMAIL"
-        ]
-      }
-    ),
-    /* @__PURE__ */ c(t, { children: [
-      /* @__PURE__ */ n(d, { value: a }),
-      /* @__PURE__ */ c(u, { children: [
-        /* @__PURE__ */ n(E, { children: "LEARN MORE" }),
-        /* @__PURE__ */ n(A, { children: "SCAN QR CODE WITH YOUR PHONE CAMERA" })
-      ] })
-    ] })
-  ] }) : l === 6 && h === 4 ? /* @__PURE__ */ c(
-    O,
-    {
-      ref: r,
-      tabIndex: 1,
-      focusColor: (N = (T = e == null ? void 0 : e.banner) == null ? void 0 : T.ctaButton) == null ? void 0 : N.color,
-      children: [
-        /* @__PURE__ */ n(f, {}),
-        /* @__PURE__ */ n(x, { children: "SEND INFO TO ACCOUNT EMAIL" })
-      ]
-    }
-  ) : l === 4 ? /* @__PURE__ */ n(
-    O,
-    {
-      ref: r,
-      tabIndex: 1,
-      focusColor: (I = (i = e == null ? void 0 : e.banner) == null ? void 0 : i.ctaButton) == null ? void 0 : I.color,
-      children: "BACK TO VIDEO"
-    }
-  ) : null;
-});
-export {
-  B as PromoAction
-};

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

@@ -1,114 +0,0 @@
-import { jsxs as l, jsx as r, Fragment as $ } from "react/jsx-runtime";
-import { useRef as d, useState as G, useEffect as a } from "react";
-import { AutoPlayVideo as J } from "@streamlayer/sdk-web-types";
-import { PromoAction as Q } from "./PromoAction.js";
-import { Container as X, Header as Y, BrandBlock as Z, LogoIcon as _, BrandText as ee, BrandNameContainer as re, BrandName as te, Sponsored as ne, CloseButton as oe, CloseIcon as ie, VideoBlock as ce, VideoWrapper as se, FocusableVideo as le, Paused as de, Title as ae, Description as ue } from "./styles.js";
-const we = (M) => {
-  var E, B, R, I, P, S, C, L, N, T, U, O;
-  const { promotion: e, open: u, togglePause: p, controlVideo: f, promotionId: A, onClose: H, markAsViewed: b } = M, i = d(null), g = d(null), v = d(null), k = d(null), [V, q] = G(0), n = d(0), z = e.type === 4 ? V : V / 2, x = !!((B = (E = e.banner) == null ? void 0 : E.video) != null && B.url), D = e.autoPlayVideo === J.ENABLED;
-  let h = (R = e.banner) == null ? void 0 : R.url;
-  return h && !h.startsWith("http") && (h = `https://${h}`), a(() => {
-    if (!k.current) return;
-    const c = new ResizeObserver(([o]) => {
-      const m = o.contentRect.width;
-      q(m);
-    });
-    return c.observe(k.current), () => {
-      c.disconnect();
-    };
-  }, []), a(() => {
-    var F;
-    p == null || p(x || D), u == null || u();
-    const c = () => {
-      const t = [];
-      return v.current && t.push(v.current), e.type === 5 && i.current && t.push(i.current), g.current && t.push(g.current), t;
-    };
-    let o = c();
-    n.current = 0, (F = o[n.current]) == null || F.focus();
-    const m = (t) => {
-      var W, j;
-      o = c();
-      const y = o.length;
-      if (y !== 0) {
-        if (["ArrowDown", "ArrowRight"].includes(t.key)) {
-          n.current = (n.current + 1) % y, (W = o[n.current]) == null || W.focus(), t.preventDefault();
-          return;
-        }
-        if (["ArrowUp", "ArrowLeft"].includes(t.key)) {
-          n.current = (n.current - 1 + y) % y, (j = o[n.current]) == null || j.focus(), t.preventDefault();
-          return;
-        }
-        if (t.key === "Enter" || t.key === " ") {
-          const s = o[n.current];
-          if (!s) return;
-          switch (s.tagName) {
-            case "A":
-              s.click();
-              break;
-            case "BUTTON":
-              s.click();
-              break;
-            case "VIDEO":
-              setTimeout(() => {
-                const w = s;
-                w.paused || w.ended ? w.play().then(() => {
-                }).catch((K) => console.warn("⛔ start failed:", K)) : w.pause();
-              }, 0);
-              break;
-          }
-          t.preventDefault();
-        }
-      }
-    };
-    return window.addEventListener("keydown", m), () => window.removeEventListener("keydown", m);
-  }, [e.type, x, D, u, p]), a(() => {
-    A && e.type && b && b();
-  }, [A, e.type, b]), a(() => () => {
-    f == null || f({ muted: !1 });
-  }, [f]), a(() => {
-    e.type === 5 && i.current && i.current.focus();
-  }, [e.type]), /* @__PURE__ */ l(X, { ref: k, tabIndex: 0, children: [
-    /* @__PURE__ */ l(Y, { children: [
-      e.logoMode === 1 && /* @__PURE__ */ l(Z, { children: [
-        /* @__PURE__ */ r(_, { src: (I = e.sponsor) == null ? void 0 : I.logo, alt: "Logo" }),
-        /* @__PURE__ */ l(ee, { children: [
-          /* @__PURE__ */ r(re, { children: /* @__PURE__ */ r(te, { children: (P = e.sponsor) == null ? void 0 : P.name }) }),
-          /* @__PURE__ */ r(ne, { children: "SPONSORED" })
-        ] })
-      ] }),
-      e.logoMode === 2 && e.type === 4 && /* @__PURE__ */ r("img", { src: (S = e.sponsor) == null ? void 0 : S.logo, alt: "Video paused preview", style: { height: "56px" } }),
-      /* @__PURE__ */ r(oe, { ref: g, onClick: H, children: /* @__PURE__ */ r(ie, {}) })
-    ] }),
-    e.logoMode === 2 && e.type !== 4 && /* @__PURE__ */ r(
-      "img",
-      {
-        src: (C = e.sponsor) == null ? void 0 : C.logo,
-        alt: "Video paused preview",
-        style: {
-          display: "block",
-          alignSelf: "center",
-          maxHeight: "72px",
-          width: "auto"
-        }
-      }
-    ),
-    ((L = e.banner) == null ? void 0 : L.imageUrl) && /* @__PURE__ */ r(ce, { style: { height: z }, children: /* @__PURE__ */ r(
-      "img",
-      {
-        src: (N = e.banner) == null ? void 0 : N.imageUrl,
-        alt: "Video paused preview",
-        style: { width: "100%", height: "100%", objectFit: "cover" }
-      }
-    ) }),
-    ((T = e.banner) == null ? void 0 : T.video) && /* @__PURE__ */ r(se, { children: /* @__PURE__ */ r(le, { ref: v, tabIndex: 0, muted: !1, autoPlay: !1, loop: !0, playsInline: !0, controls: !0, children: /* @__PURE__ */ r("source", { src: e.banner.video.url, type: "video/mp4" }) }) }),
-    /* @__PURE__ */ r(de, { children: "PAUSED" }),
-    e.type === 5 && /* @__PURE__ */ l($, { children: [
-      /* @__PURE__ */ r(ae, { children: (U = e.banner) == null ? void 0 : U.title }),
-      /* @__PURE__ */ r(ue, { children: (O = e.banner) == null ? void 0 : O.body })
-    ] }),
-    /* @__PURE__ */ r(Q, { promotion: e, ref: i })
-  ] });
-};
-export {
-  we as TVSidebar
-};