@streamlayer/react-ui 1.28.3 → 1.29.0

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

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

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

@@ -1,16 +1,16 @@
 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 T, useState as I, useEffect as h } from "react";
+import { useRef as k, useState as I, useEffect as h } from "react";
 import { eventBus as p } from "@streamlayer/sdk-web-interfaces";
 import { PromotionType as r, AutoPlayVideo as te, PlayVideoMuted as de } from "@streamlayer/sdk-web-types";
-import { SvgIcon as W } from "../../../../ui/icons/index.js";
+import { SvgIcon as T } from "../../../../ui/icons/index.js";
 import { PromoAction as ae } from "./PromoAction.js";
-import { Container as ne, Header as ie, BrandBlock as re, LogoIcon as le, BrandText as pe, BrandNameContainer as se, BrandName as ce, Sponsored as ye, CloseIcon as me, VideoBlock as ue, VideoWrapper as he, FocusableVideo as Ae, VideoStatus as O, Title as Be, Description as Ie, CloseButton as be } from "./styles.js";
-const Me = oe(be, {
+import { Wrap as ne, Container as ie, Header as re, BrandBlock as le, LogoIcon as pe, BrandText as se, BrandNameContainer as ce, BrandName as ye, Sponsored as me, CloseIcon as ue, 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, {
   isFocusBoundary: !0
-}), Le = (j) => {
-  var N, _, w, P, S, g, L, C, G, D, v, x, U, k;
+}), Ce = (j) => {
+  var N, _, w, P, S, g, L, C, G, D, x, U, v, W;
   const {
     promotion: e,
     open: c,
@@ -23,7 +23,7 @@ const Me = oe(be, {
     isEventFired: o,
     fireEvent: t,
     muted: $
-  } = j, q = T(null), B = T(null), [M, z] = I(0), K = e.type === r.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 === r.INGAME_IAB11_LBAR || e.type === r.INGAME_IAB11 || e.type === r.INGAME_IAB11_SIDEBAR, [f, X] = I(!0), [Y, Z] = I(void 0);
+  } = j, q = k(null), B = k(null), [M, z] = I(0), K = e.type === r.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 === r.INGAME_IAB11_LBAR || e.type === r.INGAME_IAB11 || e.type === r.INGAME_IAB11_SIDEBAR, [f, X] = I(!0), [Y, Z] = I(void 0);
   let m = (w = e.banner) == null ? void 0 : w.url;
   return m && !m.startsWith("http") && (m = `https://${m}`), h(() => {
     if (!B.current) return;
@@ -40,17 +40,17 @@ const Me = oe(be, {
     i && e.type && A && A();
   }, [i, e.type, A]), h(() => () => {
     s == null || s({ muted: !1 });
-  }, [s]), /* @__PURE__ */ d("div", { children: /* @__PURE__ */ l(ne, { ref: B, children: [
-    /* @__PURE__ */ l(ie, { children: [
-      e.logoMode === 1 && /* @__PURE__ */ l(re, { children: [
-        /* @__PURE__ */ d(le, { src: (P = e.sponsor) == null ? void 0 : P.logo, alt: "Logo" }),
-        /* @__PURE__ */ l(pe, { children: [
-          /* @__PURE__ */ d(se, { children: /* @__PURE__ */ d(ce, { children: (S = e.sponsor) == null ? void 0 : S.name }) }),
-          /* @__PURE__ */ d(ye, { children: "SPONSORED" })
+  }, [s]), /* @__PURE__ */ d(ne, { children: /* @__PURE__ */ l(ie, { ref: B, children: [
+    /* @__PURE__ */ l(re, { 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 }) }),
+          /* @__PURE__ */ d(me, { 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(Me, { options: { focusKey: "close-ad-button" }, webos: !0, onClick: b, "data-close-btn": "true", children: /* @__PURE__ */ d(me, {}) })
+      /* @__PURE__ */ d(Re, { options: { focusKey: "close-ad-button" }, webos: !0, onClick: b, "data-close-btn": "true", children: /* @__PURE__ */ d(ue, {}) })
     ] }),
     e.logoMode === 2 && e.type !== r.INGAME_IAB11_LBAR && /* @__PURE__ */ d(
       "img",
@@ -65,7 +65,7 @@ const Me = oe(be, {
         }
       }
     ),
-    ((C = e.banner) == null ? void 0 : C.imageUrl) && /* @__PURE__ */ d(ue, { style: { height: K }, children: /* @__PURE__ */ d(
+    ((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,
@@ -73,12 +73,12 @@ const Me = oe(be, {
         style: { width: "100%", height: "100%", objectFit: "cover" }
       }
     ) }),
-    ((D = e.banner) == null ? void 0 : D.video) && /* @__PURE__ */ l(he, { children: [
+    ((D = e.banner) == null ? void 0 : D.video) && /* @__PURE__ */ l(Ae, { children: [
       /* @__PURE__ */ d(
-        Ae,
+        Be,
         {
           source: e.banner.video.url,
-          poster: (x = (v = e.banner) == null ? void 0 : v.video) == null ? void 0 : x.thumbnailUrl,
+          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,
@@ -155,21 +155,21 @@ const Me = oe(be, {
         }
       ),
       H && !f && /* @__PURE__ */ l(O, { children: [
-        /* @__PURE__ */ d(W, { name: "icon-pause" }),
+        /* @__PURE__ */ d(T, { name: "icon-pause" }),
         "PAUSED"
       ] }),
       Y && Q && /* @__PURE__ */ l(O, { children: [
-        /* @__PURE__ */ d(W, { name: "iconMute" }),
+        /* @__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(F, { children: [
-      /* @__PURE__ */ d(Be, { children: (U = e.banner) == null ? void 0 : U.title }),
-      /* @__PURE__ */ d(Ie, { children: (k = e.banner) == null ? void 0 : k.body })
+      /* @__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 {
-  Le as TVSidebar
+  Ce as TVSidebar
 };

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

@@ -1,4 +1,5 @@
 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 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>>;