@streamlayer/react-ui 1.24.0 → 1.25.1

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

@@ -0,0 +1,114 @@
+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
+};

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

@@ -0,0 +1,42 @@
+import { default as React } from 'react';
+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>>;
+export declare const LogoIcon: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLImageElement> & React.ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const BrandText: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const BrandNameContainer: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const BrandName: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+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 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;
+}>;
+export declare const CenterIndicator: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    visible: boolean;
+}>;
+export declare const VideoBlock: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+interface SendToUserButtonProps {
+    focusColor?: 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 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>>;
+export declare const QRDescBlock: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const LearnMore: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const QRHint: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+interface QRProps {
+    value: string;
+    size?: number;
+    fgColor?: string;
+    bgColor?: string;
+    level?: 'L' | 'M' | 'Q' | 'H';
+}
+export declare const QR: React.ForwardRefExoticComponent<QRProps & React.RefAttributes<HTMLAnchorElement>>;
+export {};