@streamlayer/react-ui 1.26.0 → 1.27.0

package/lib/app/webos/ExposedPauseAd/PauseAd.js

@@ -0,0 +1,93 @@
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { cx as E } from "@linaria/core";
+import { useFocusable as x } from "@noriginmedia/norigin-spatial-navigation";
+import { useState as A, useRef as y, useEffect as l } from "react";
+import { eventBus as P } from "@streamlayer/sdk-web-interfaces";
+import { useGAMPlayer as T } from "../../../ui/advertisement/overlay/externalAd/vast-player/useGAMPlayer.js";
+import { PauseAdOverlay as b, PauseAdContent as g, PauseAdGradientLeft as w, PauseAdGradientRight as k, PauseAdGradientBottom as B, PauseAdTopLeft as L, PauseAdTitle as S, PauseAdCaption as C, PauseAdBottomLeft as G, PauseAdPlayButton as R, PauseAdSidebar as D, ExternalAdContainer as F } from "./styles.js";
+const I = ({ vastUrl: n }) => {
+  const r = y(null), [, , u] = T(r, n);
+  return l(() => {
+    u && u();
+  }, [u]), /* @__PURE__ */ e(F, { ref: r });
+}, M = ({ isClosing: n, title: r, caption: u, onPlay: f, onClose: o, vastUrl: m }) => {
+  const { ref: t, focusSelf: a } = x({
+    focusKey: "sl-pause-ad-play",
+    onEnterRelease: f,
+    isFocusBoundary: !0,
+    forceFocus: !0
+  });
+  return l(() => {
+    t.current && a();
+  }, [t, a]), l(() => {
+    const d = (s) => {
+      const i = s.keyCode;
+      if (i === 461 || i === 10009 || i === 27) {
+        s.preventDefault(), s.stopPropagation(), s.stopImmediatePropagation(), o == null || o();
+        return;
+      }
+    };
+    return window.addEventListener("keydown", d, { capture: !0 }), () => window.removeEventListener("keydown", d, { capture: !0 });
+  }, [o]), /* @__PURE__ */ e(b, { className: E(n && "pause-ad-closing"), children: /* @__PURE__ */ p(g, { children: [
+    /* @__PURE__ */ e(w, {}),
+    /* @__PURE__ */ e(k, {}),
+    /* @__PURE__ */ e(B, {}),
+    /* @__PURE__ */ p(L, { children: [
+      /* @__PURE__ */ e(S, { children: r }),
+      /* @__PURE__ */ e(C, { children: u })
+    ] }),
+    /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(
+      R,
+      {
+        ref: t,
+        onClick: f,
+        onMouseEnter: () => t.current.focus(),
+        "aria-label": "Resume playback"
+      }
+    ) }),
+    /* @__PURE__ */ p(D, { children: [
+      m && /* @__PURE__ */ e(I, { vastUrl: m }),
+      /* @__PURE__ */ e("span", { children: "ADVERTISEMENT" })
+    ] })
+  ] }) });
+}, z = ({
+  showPauseAd: n,
+  vastUrls: r,
+  title: u,
+  caption: f,
+  onPlay: o,
+  onClose: m,
+  onRender: t
+}) => {
+  const [a, d] = A(!1), [s, i] = A(!1), c = y();
+  l(() => (c.current && clearTimeout(c.current), n ? (P.emit("exposedPauseAd", {
+    action: "enabled",
+    payload: {}
+  }), c.current = setTimeout(() => {
+    i(!1), d(!0);
+  }, 5e3)) : (P.emit("exposedPauseAd", {
+    action: "disabled",
+    payload: {}
+  }), i(!0), c.current = setTimeout(() => {
+    d(!1);
+  }, 400)), () => {
+    c.current && clearTimeout(c.current);
+  }), [n]), l(() => {
+    t == null || t({ rendered: a });
+  }, [a, t]);
+  const h = r == null ? void 0 : r[0].url;
+  return a ? /* @__PURE__ */ e(
+    M,
+    {
+      onClose: m,
+      isClosing: s,
+      title: u,
+      caption: f,
+      onPlay: o,
+      vastUrl: h
+    }
+  ) : null;
+};
+export {
+  z as PauseAd
+};

package/lib/app/webos/ExposedPauseAd/styles.d.ts

@@ -0,0 +1,12 @@
+export declare const PauseAdOverlay: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const PauseAdContent: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const PauseAdGradientLeft: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const PauseAdGradientRight: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const PauseAdGradientBottom: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const PauseAdTopLeft: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const PauseAdTitle: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLHeadingElement> & import('react').HTMLAttributes<HTMLHeadingElement> & Record<never, unknown>>;
+export declare const PauseAdCaption: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLParagraphElement> & import('react').HTMLAttributes<HTMLParagraphElement> & Record<never, unknown>>;
+export declare const PauseAdBottomLeft: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const PauseAdPlayButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const PauseAdSidebar: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ExternalAdContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/app/webos/ExposedPauseAd/styles.js

@@ -0,0 +1,64 @@
+import { styled as s } from "@linaria/react";
+const e = /* @__PURE__ */ s("div")({
+  name: "PauseAdOverlay",
+  class: "pw9gih8",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "PauseAdContent",
+  class: "p8lpomy",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "PauseAdGradientLeft",
+  class: "pv7u167",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("div")({
+  name: "PauseAdGradientRight",
+  class: "p1kh2yb0",
+  propsAsIs: !1
+}), d = /* @__PURE__ */ s("div")({
+  name: "PauseAdGradientBottom",
+  class: "pl8f94x",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("div")({
+  name: "PauseAdTopLeft",
+  class: "p1m6zmrt",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("h2")({
+  name: "PauseAdTitle",
+  class: "pm3vwfa",
+  propsAsIs: !1
+}), A = /* @__PURE__ */ s("p")({
+  name: "PauseAdCaption",
+  class: "p1tibuhw",
+  propsAsIs: !1
+}), r = /* @__PURE__ */ s("div")({
+  name: "PauseAdBottomLeft",
+  class: "ptqqrqd",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("button")({
+  name: "PauseAdPlayButton",
+  class: "p14estxv",
+  propsAsIs: !1
+}), u = /* @__PURE__ */ s("div")({
+  name: "PauseAdSidebar",
+  class: "p1dpvfl1",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("div")({
+  name: "ExternalAdContainer",
+  class: "ezfmabr",
+  propsAsIs: !1
+});
+export {
+  c as ExternalAdContainer,
+  r as PauseAdBottomLeft,
+  A as PauseAdCaption,
+  t as PauseAdContent,
+  d as PauseAdGradientBottom,
+  o as PauseAdGradientLeft,
+  n as PauseAdGradientRight,
+  e as PauseAdOverlay,
+  i as PauseAdPlayButton,
+  u as PauseAdSidebar,
+  l as PauseAdTitle,
+  p as PauseAdTopLeft
+};

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

@@ -0,0 +1,9 @@
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+export type StreamLayerSDKQuestionProps = {
+    persistent?: boolean;
+    skipAutoClose?: boolean;
+};
+export declare const StreamLayerSDKQuestionWebOS: React.FC<StreamLayerSDKQuestionProps & {
+    sdk: StreamLayerSDK;
+    notification?: boolean;
+}>;

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

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

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

@@ -0,0 +1,24 @@
+import { Component } from 'react';
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { PauseAdProps } from './ExposedPauseAd/PauseAd';
+export type StreamLayerSDKTvProps = {
+    persistent?: boolean;
+    children: React.ReactNode;
+    sdk: StreamLayerSDK;
+    showPauseAd?: boolean;
+    pauseAdVastUrl?: PauseAdProps['vastUrls'];
+    onClosePauseAd?: () => void;
+    onRenderPauseAd?: (params: {
+        rendered: boolean;
+    }) => void;
+};
+export declare class StreamLayerSDKTv extends Component<StreamLayerSDKTvProps, {
+    hasError: boolean;
+}> {
+    constructor(props: StreamLayerSDKTvProps);
+    static getDerivedStateFromError(): {
+        hasError: boolean;
+    };
+    componentDidCatch(error: Error, info: React.ErrorInfo): void;
+    render(): string | number | boolean | Iterable<import('react').ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}

package/lib/app/webos/index.js

@@ -0,0 +1,65 @@
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { init as p } from "@noriginmedia/norigin-spatial-navigation";
+import { Layout as y } from "../app/Layout/index.js";
+import { Component as b, useCallback as c } from "react";
+import { StreamLayerSDKAdvertisementWebOS as i } from "./Advertisement/index.js";
+import { PauseAd as D } from "./ExposedPauseAd/PauseAd.js";
+import { StreamLayerSDKQuestionWebOS as u } from "./Question/index.js";
+p({
+  shouldFocusDOMNode: !0
+});
+const v = ({
+  persistent: e,
+  children: o,
+  sdk: r,
+  showPauseAd: f,
+  pauseAdVastUrl: m,
+  onClosePauseAd: a,
+  onRenderPauseAd: h
+}) => {
+  const S = c(() => {
+    a == null || a();
+  }, [a]), s = c(() => {
+    r.controlVideoPlayer({ play: !0 });
+  }, [r]);
+  return /* @__PURE__ */ l(
+    y,
+    {
+      sdk: r,
+      sidebar: ({ promo: n }) => n ? /* @__PURE__ */ t(i, { sdk: r, persistent: e, sidebar: "right" }) : /* @__PURE__ */ t(u, { sdk: r, persistent: e }),
+      notification: ({ promo: n }) => n ? /* @__PURE__ */ t(i, { sdk: r, notification: !0, persistent: e }) : /* @__PURE__ */ t(u, { notification: !0, sdk: r, persistent: e }),
+      banner: /* @__PURE__ */ t(i, { sdk: r, persistent: e, banner: "bottom" }),
+      webos: !0,
+      children: [
+        o,
+        m && /* @__PURE__ */ t(
+          D,
+          {
+            showPauseAd: f,
+            vastUrls: m,
+            onClose: S,
+            onRender: h,
+            onPlay: s
+          }
+        )
+      ]
+    }
+  );
+};
+class g extends b {
+  constructor(o) {
+    super(o), this.state = { hasError: !1 };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: !0 };
+  }
+  componentDidCatch(o, r) {
+    console.error("StreamLayerSDKTv error:", o, r.componentStack);
+  }
+  render() {
+    return this.state.hasError ? this.props.children : /* @__PURE__ */ t(v, { ...this.props });
+  }
+}
+export {
+  g as StreamLayerSDKTv
+};

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

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

package/lib/app/webos/story.js

@@ -0,0 +1,74 @@
+import { jsx as n } from "react/jsx-runtime";
+import i from "hls.js";
+import { useRef as m, useState as d, useEffect as u } from "react";
+import { StreamLayerProvider as p, useStreamLayer as l, useStreamLayerUI as f } from "@streamlayer/react";
+import { useStreamLayerDebug as y } from "../../utils/debug/index.js";
+import { StreamLayerSDKTv as S } from "./index.js";
+const h = ({ src: r }) => {
+  const e = m(), s = m(), [t, o] = d(r);
+  return u(() => {
+    o(r);
+  }, [r]), u(() => () => {
+    s.current && clearTimeout(s.current);
+  }, []), u(() => {
+    if (t && t.includes("m3u8"))
+      if (i.isSupported() && e.current) {
+        const a = new i({
+          debug: !1
+        });
+        a.loadSource(t), a.attachMedia(e.current);
+      } else
+        o("");
+    e.current && (e.current.volume = 0.1, e.current.play().catch((a) => {
+      var c;
+      console.error(a), (c = e.current) == null || c.play();
+    }));
+  }, [t]), /* @__PURE__ */ n(
+    "video",
+    {
+      src: t || "https://storage.googleapis.com/cdn.streamlayer.io/assets/sdk-web/Own%20The%20Game%201080p%20RF18.mp4",
+      ref: e,
+      style: { width: "100%", height: "100%", borderRadius: 10, objectFit: "contain" },
+      autoPlay: !0,
+      "data-testid": "video-frame",
+      loop: !0,
+      playsInline: !0,
+      controlsList: "nodownload nofullscreen noremoteplayback",
+      controls: !0
+    }
+  );
+}, b = () => {
+  const r = l(), [e, s] = d("");
+  return u(() => r ? r.streamSummary().subscribe((t) => {
+    var o, a;
+    (a = (o = t.data) == null ? void 0 : o.summary) != null && a.stream && s(t.data.summary.stream);
+  }) : () => {
+  }, [r]), /* @__PURE__ */ n(
+    h,
+    {
+      src: e || "https://storage.googleapis.com/cdn.streamlayer.io/assets/sdk-web/Own%20The%20Game%201080p%20RF18.mp4"
+    }
+  );
+}, g = ({ persistent: r }) => {
+  const e = l(), s = f();
+  return e ? /* @__PURE__ */ n(S, { sdk: e, persistent: r, uiState: s, children: /* @__PURE__ */ n(b, {}) }) : null;
+}, T = ({ sdkKey: r, eventId: e, persistent: s, production: t }) => {
+  const o = y({ sdkKey: r, eventId: e, production: t });
+  return /* @__PURE__ */ n(
+    p,
+    {
+      event: o.event,
+      sdkKey: o.sdkKey,
+      production: o.env === "production",
+      autoEnable: !0,
+      withAd: !0,
+      withAdNotification: !0,
+      webOS: !0,
+      children: /* @__PURE__ */ n(g, { persistent: s })
+    }
+  );
+};
+export {
+  h as Player,
+  T as WebOSStory
+};

package/lib/app/webos/styles.js

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

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

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

package/lib/app/{tvos → webos}/ui/Layout/styles.js

@@ -1,59 +1,59 @@
 import { styled as s } from "@linaria/react";
 const a = /* @__PURE__ */ s("div")({
   name: "Container",
-  class: "cheo2r6",
+  class: "c1obxisu",
   propsAsIs: !1
 }), n = /* @__PURE__ */ s("div")({
   name: "ContentContainer",
-  class: "c1pvfh8e",
+  class: "c1e373pc",
   propsAsIs: !1
 }), o = /* @__PURE__ */ s("div")({
   name: "Sidebar",
-  class: "s1ew4id0",
+  class: "s17z6ieo",
   propsAsIs: !1
-}), r = /* @__PURE__ */ s("div")({
+}), t = /* @__PURE__ */ s("div")({
   name: "Banner",
-  class: "bci5mwc",
+  class: "b19343i2",
   propsAsIs: !1
-}), t = /* @__PURE__ */ s("div")({
+}), r = /* @__PURE__ */ s("div")({
   name: "VideoContainer",
-  class: "v1y91bzn",
+  class: "v2g7ow7",
   propsAsIs: !1
-}), d = /* @__PURE__ */ s("div")({
+}), i = /* @__PURE__ */ s("div")({
   name: "AdSquare",
-  class: "ak4hw4m",
+  class: "a1dsvt0d",
   propsAsIs: !1
-}), i = /* @__PURE__ */ s("text")({
+}), d = /* @__PURE__ */ s("text")({
   name: "AdText",
-  class: "a7w4ued",
+  class: "aicz97j",
   propsAsIs: !0
-}), c = /* @__PURE__ */ s("div")({
+}), p = /* @__PURE__ */ s("div")({
   name: "VideoBox",
-  class: "vqmlsjk",
+  class: "vekop6u",
   propsAsIs: !1
-}), l = /* @__PURE__ */ s("div")({
+}), c = /* @__PURE__ */ s("div")({
   name: "VideoPlayer",
-  class: "vyn4uy0",
+  class: "v10439jy",
   propsAsIs: !1
-}), p = /* @__PURE__ */ s("div")({
+}), l = /* @__PURE__ */ s("div")({
   name: "AdContainer",
-  class: "a9sufrb",
+  class: "atraheb",
   propsAsIs: !1
 }), A = /* @__PURE__ */ s("span")({
   name: "AdLabel",
-  class: "acv3bdg",
+  class: "a1uehkbk",
   propsAsIs: !1
 });
 export {
-  p as AdContainer,
+  l as AdContainer,
   A as AdLabel,
-  d as AdSquare,
-  i as AdText,
-  r as Banner,
+  i as AdSquare,
+  d as AdText,
+  t as Banner,
   a as Container,
   n as ContentContainer,
   o as Sidebar,
-  c as VideoBox,
-  t as VideoContainer,
-  l as VideoPlayer
+  p as VideoBox,
+  r as VideoContainer,
+  c as VideoPlayer
 };

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

@@ -0,0 +1,7 @@
+import { PromotionOptions } from '@streamlayer/sdk-web-types';
+interface PromoActionProps {
+    promotion: PromotionOptions;
+    onClose?: () => void;
+}
+export declare const PromoAction: React.FC<PromoActionProps>;
+export {};

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

@@ -0,0 +1,63 @@
+import { jsxs as n, jsx as c, Fragment as P } from "react/jsx-runtime";
+import { withFocusable as H } from "../../useTvButton.js";
+import { PromotionButtonType as r, PromotionType as _ } from "@streamlayer/sdk-web-types";
+import { QRBlock as u, QR as E, QRDescBlock as A, LearnMore as O, QRHint as C, SendToUserButton as a, EnvelopeIcon as x, SendToUserText as Q } from "./styles.js";
+const W = H(a), i = ({ promotion: e, onClose: M }) => {
+  var d, R, h, N, s, B, S, b, I, D, f, L, U;
+  const l = e.buttonType, y = e.coupon, t = (d = e.banner) == null ? void 0 : d.url, T = e.type;
+  return l === r.BASIC ? /* @__PURE__ */ n(u, { children: [
+    t && /* @__PURE__ */ c(E, { value: t }),
+    /* @__PURE__ */ n(A, { children: [
+      /* @__PURE__ */ c(O, { children: "LEARN MORE" }),
+      /* @__PURE__ */ c(C, { children: "SCAN QR CODE WITH YOUR PHONE CAMERA" })
+    ] })
+  ] }) : l === r.ADD_TO_WALLET ? /* @__PURE__ */ n(u, { children: [
+    /* @__PURE__ */ c(E, { value: y }),
+    /* @__PURE__ */ n(A, { children: [
+      /* @__PURE__ */ c(O, { style: { fontSize: 18, fontWeight: 400 }, children: "ADD TO APPLE WALLET" }),
+      /* @__PURE__ */ c(C, { style: { fontSize: 17 }, children: "SCAN QR CODE WITH YOUR PHONE CAMERA" })
+    ] })
+  ] }) : l === r.SEND_TO_USER && T !== _.INGAME_IAB11_LBAR ? /* @__PURE__ */ n(P, { children: [
+    /* @__PURE__ */ n(
+      a,
+      {
+        backgroundColor: (h = (R = e == null ? void 0 : e.banner) == null ? void 0 : R.ctaButton) == null ? void 0 : h.color,
+        textColor: (s = (N = e == null ? void 0 : e.banner) == null ? void 0 : N.ctaButton) == null ? void 0 : s.textColor,
+        children: [
+          /* @__PURE__ */ c(x, {}),
+          "SEND INFO TO ACCOUNT EMAIL"
+        ]
+      }
+    ),
+    /* @__PURE__ */ n(u, { children: [
+      t && /* @__PURE__ */ c(E, { value: t }),
+      /* @__PURE__ */ n(A, { children: [
+        /* @__PURE__ */ c(O, { children: "LEARN MORE" }),
+        /* @__PURE__ */ c(C, { children: "SCAN QR CODE WITH YOUR PHONE CAMERA" })
+      ] })
+    ] })
+  ] }) : l === r.SEND_TO_USER && T === _.INGAME_IAB11_LBAR ? /* @__PURE__ */ n(
+    a,
+    {
+      backgroundColor: (S = (B = e == null ? void 0 : e.banner) == null ? void 0 : B.ctaButton) == null ? void 0 : S.color,
+      textColor: (I = (b = e == null ? void 0 : e.banner) == null ? void 0 : b.ctaButton) == null ? void 0 : I.textColor,
+      children: [
+        /* @__PURE__ */ c(x, {}),
+        /* @__PURE__ */ c(Q, { children: "SEND INFO TO ACCOUNT EMAIL" })
+      ]
+    }
+  ) : l === r.RETURN_TO_VIDEO ? /* @__PURE__ */ c(
+    W,
+    {
+      webos: !0,
+      autoFocus: !0,
+      backgroundColor: (f = (D = e == null ? void 0 : e.banner) == null ? void 0 : D.ctaButton) == null ? void 0 : f.color,
+      textColor: (U = (L = e == null ? void 0 : e.banner) == null ? void 0 : L.ctaButton) == null ? void 0 : U.textColor,
+      onClick: M,
+      children: "BACK TO VIDEO"
+    }
+  ) : null;
+};
+export {
+  i as PromoAction
+};

package/lib/app/{tvos → webos}/ui/Sidebar/index.d.ts

@@ -1,3 +1,4 @@
+import { Advertisement } from '@streamlayer/feature-gamification';
 import { PromotionOptions } from '@streamlayer/sdk-web-types';
 import { ControlVideoCb } from '../../../../ui/video-player';
 export type OverlayProps = {
@@ -11,5 +12,10 @@ export type OverlayProps = {
     controlVideo: ControlVideoCb;
     advertisementPaused: boolean;
     togglePause: (flag: boolean) => void;
+    isEventFired: Advertisement['isEventFired'];
+    fireEvent: Advertisement['fireEvent'];
+    muted?: boolean;
+    toggleMute: (flag: boolean) => void;
+    isMuted?: boolean;
 };
 export declare const TVSidebar: React.FC<OverlayProps>;