@streamlayer/react-ui 1.26.0 → 1.27.0

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

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

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

@@ -9,7 +9,9 @@ export declare const BrandName: import('@linaria/react').StyledComponent<React.C
 export declare const Sponsored: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
 export declare const CloseIcon: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export declare const CloseButton: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
-export declare const FocusableVideo: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLVideoElement> & React.VideoHTMLAttributes<HTMLVideoElement> & Record<never, unknown>>;
+export declare const FocusableVideo: {
+    __wyw_meta: unknown;
+} & React.ForwardRefExoticComponent<import('../../../../ui/video-player').VideoPlayerProps & React.RefAttributes<HTMLVideoElement | null>>;
 export declare const VideoWrapper: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const PlayPauseButton: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     isPlaying: boolean;
@@ -19,12 +21,13 @@ export declare const CenterIndicator: import('@linaria/react').StyledComponent<R
 }>;
 export declare const VideoBlock: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 interface SendToUserButtonProps {
-    focusColor?: string;
+    backgroundColor?: string;
+    textColor?: string;
 }
 export declare const SendToUserButton: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & SendToUserButtonProps>;
 export declare const EnvelopeIcon: () => import("react/jsx-runtime").JSX.Element;
 export declare const SendToUserText: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Paused: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const VideoStatus: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Title: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & Record<never, unknown>>;
 export declare const Description: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLParagraphElement> & React.HTMLAttributes<HTMLParagraphElement> & Record<never, unknown>>;
 export declare const QRBlock: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
@@ -37,6 +40,7 @@ interface QRProps {
     fgColor?: string;
     bgColor?: string;
     level?: 'L' | 'M' | 'Q' | 'H';
+    tabIndex?: number;
 }
 export declare const QR: React.ForwardRefExoticComponent<QRProps & React.RefAttributes<HTMLAnchorElement>>;
 export {};