@streamlayer/react-ui 1.26.0 → 1.27.0

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

@@ -0,0 +1,9 @@
+import { InsightHistory, Promotion } from '@streamlayer/sdk-web-types';
+import { VideoPlayerProps } from '../../../../ui/video-player';
+export type InsightContentProps = InsightHistory & {
+    isDetail?: boolean;
+    muted?: boolean;
+    adPromotion?: Promotion;
+    controlVideo: VideoPlayerProps['controlVideo'];
+};
+export declare const InsightContentTV: React.FC<InsightContentProps>;

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

@@ -0,0 +1,100 @@
+import { jsxs as a, jsx as c } from "react/jsx-runtime";
+import { useKeyboardNavigation as Q } from "../../../../hooks/useKeyboardNavigation.js";
+import { useRef as T, useState as b, useCallback as A, useEffect as W } from "react";
+import { PlayVideoMuted as z, AutoPlayVideo as v, QuestionImages as G } from "@streamlayer/sdk-web-types";
+import { SvgIcon as D } from "../../../../ui/icons/index.js";
+import { Container as H, VideoWrapper as J, FocusableVideo as X, contentContainerClassName as S, VideoStatus as U, ImageContainer as Y, Image as Z, Content as _, Title as $, Description as n } from "./styles.js";
+const ue = ({
+  instantView: e,
+  isDetail: d,
+  notification: l,
+  controlVideo: k,
+  muted: x
+}) => {
+  var I, P;
+  const p = T(null), [L, o] = b(!1), [f, M] = b(void 0), [R, N] = b(!1), m = (e == null ? void 0 : e.playVideoMuted) === z.ENABLED, s = d && (e == null ? void 0 : e.autoPlayVideo) === v.ENABLED, F = m && s, E = T(), g = e == null ? void 0 : e.heading, B = e == null ? void 0 : e.body, C = g || B, O = l == null ? void 0 : l.title, j = l == null ? void 0 : l.body, y = A(() => {
+    const r = [];
+    p.current && r.push(p.current);
+    const t = document.querySelector(".webos"), h = t == null ? void 0 : t.querySelector('[data-close-btn="true"]');
+    return h && r.push(h), r;
+  }, []), q = A(
+    (r) => {
+      const t = document.activeElement;
+      if (y().includes(t))
+        switch (r.tagName) {
+          case "BUTTON":
+            r.click();
+            break;
+          case "VIDEO":
+            E.current = setTimeout(() => {
+              const u = r;
+              m && s ? u.muted ? (M(!1), u.muted = !1) : (M(!0), u.muted = !0) : u.paused || u.ended ? (o(!1), N(!0), u.play().then(() => {
+              }).catch((K) => console.warn("⛔ start failed:", K))) : (o(!0), u.pause(), N(!0));
+            }, 0);
+            break;
+        }
+    },
+    [s, m, y]
+  );
+  return W(() => () => {
+    E.current && clearTimeout(E.current);
+  }, []), Q({
+    containerSelector: ".webos",
+    getElements: y,
+    onEscape: () => {
+    },
+    onEnter: q,
+    initialFocusPriority: s ? 0 : 1,
+    enabled: !0,
+    dependencies: [s, m]
+  }), /* @__PURE__ */ a(H, { children: [
+    ((I = e == null ? void 0 : e.video) == null ? void 0 : I.url) && /* @__PURE__ */ a(J, { children: [
+      /* @__PURE__ */ c(
+        X,
+        {
+          className: S,
+          source: e.video.url,
+          poster: e.video.thumbnailUrl,
+          controlVideo: k,
+          muted: x,
+          autoPlay: d && e.autoPlayVideo === v.ENABLED,
+          tabIndex: 0,
+          ref: p,
+          onPause: () => {
+            d && e.autoPlayVideo === v.ENABLED && (o == null || o(!0));
+          },
+          onPlay: () => {
+            o == null || o(!1);
+          },
+          playMuted: m,
+          noControlsButtons: !0,
+          isMutedMediaVideo: f,
+          webos: !0
+        }
+      ),
+      L && R && /* @__PURE__ */ a(U, { children: [
+        /* @__PURE__ */ c(D, { name: "icon-pause" }),
+        "PAUSED"
+      ] }),
+      (f || F && f === void 0) && /* @__PURE__ */ a(U, { children: [
+        /* @__PURE__ */ c(D, { name: "iconMute" }),
+        "MUTED"
+      ] })
+    ] }),
+    (e == null ? void 0 : e.image) && !((P = e == null ? void 0 : e.video) != null && P.url) && /* @__PURE__ */ c(
+      Y,
+      {
+        className: S,
+        "data-rounded": e.imageMode === G.ROUNDED,
+        children: /* @__PURE__ */ c(Z, { src: e == null ? void 0 : e.image })
+      }
+    ),
+    /* @__PURE__ */ a(_, { children: [
+      /* @__PURE__ */ c($, { children: d && C ? g : O }),
+      /* @__PURE__ */ c(n, { children: d && C ? B : j })
+    ] })
+  ] });
+};
+export {
+  ue as InsightContentTV
+};

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

@@ -0,0 +1,12 @@
+export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const VideoWrapper: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const FocusableVideo: {
+    __wyw_meta: unknown;
+} & import('react').ForwardRefExoticComponent<import('../../../../ui/video-player').VideoPlayerProps & import('react').RefAttributes<HTMLVideoElement | null>>;
+export declare const VideoStatus: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const contentContainerClassName: import('@linaria/core').LinariaClassName;
+export declare const Content: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Title: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLHeadingElement> & import('react').HTMLAttributes<HTMLHeadingElement> & Record<never, unknown>>;
+export declare const Description: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Image: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const ImageContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/app/webos/ui/insight/styles.js

@@ -0,0 +1,51 @@
+import { styled as s } from "@linaria/react";
+import { VideoPlayer as e } from "../../../../ui/video-player/index.js";
+const t = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "cq8qxhy",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("div")({
+  name: "VideoWrapper",
+  class: "v18kj6dc",
+  propsAsIs: !1
+}), a = () => e, i = /* @__PURE__ */ s(a())({
+  name: "FocusableVideo",
+  class: "fv2nwib",
+  propsAsIs: !0
+}), p = /* @__PURE__ */ s("div")({
+  name: "VideoStatus",
+  class: "v8ptucg",
+  propsAsIs: !1
+}), r = "caip8y5", l = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "ccgc65e",
+  propsAsIs: !1
+}), m = /* @__PURE__ */ s("h3")({
+  name: "Title",
+  class: "t1q3iml2",
+  propsAsIs: !1
+}), d = /* @__PURE__ */ s("div")({
+  name: "Description",
+  class: "d1y2pxs8",
+  propsAsIs: !1
+}), I = /* @__PURE__ */ s("img")({
+  name: "Image",
+  class: "ig2j4fc",
+  propsAsIs: !1
+}), f = /* @__PURE__ */ s("div")({
+  name: "ImageContainer",
+  class: "i3dd6iy",
+  propsAsIs: !1
+});
+export {
+  t as Container,
+  l as Content,
+  d as Description,
+  i as FocusableVideo,
+  I as Image,
+  f as ImageContainer,
+  m as Title,
+  p as VideoStatus,
+  c as VideoWrapper,
+  r as contentContainerClassName
+};

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

@@ -0,0 +1,9 @@
+import { UseFocusableConfig } from '@noriginmedia/norigin-spatial-navigation';
+type FocusableProps = {
+    webos?: boolean;
+    autoFocus?: boolean;
+    options?: UseFocusableConfig<unknown>;
+    onClick?: (...args: any[]) => void;
+};
+export declare function withFocusable<P extends object>(Component: React.ComponentType<P>, rawOptions?: UseFocusableConfig<unknown>): ({ webos, options, ...props }: P & FocusableProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/app/webos/useTvButton.js

@@ -0,0 +1,23 @@
+import { jsx as s } from "react/jsx-runtime";
+import { useFocusable as f } from "@noriginmedia/norigin-spatial-navigation";
+import { useEffect as m } from "react";
+const a = (t) => {
+  const { Component: e, options: n, customOptions: r, autoFocus: o, ...i } = t, u = f({
+    ...n,
+    ...r,
+    onEnterPress: () => {
+      var c;
+      return (c = t.onClick) == null ? void 0 : c.call(t, { currentTarget: u.ref.current, stopPropagation: () => {
+      } });
+    }
+  });
+  return m(() => {
+    o && u.focusSelf();
+  }, []), /* @__PURE__ */ s(e, { ...i, ...u, "data-is-with-focus": "true" });
+};
+function O(t, e) {
+  return ({ webos: n, options: r, ...o }) => n ? /* @__PURE__ */ s(a, { Component: t, options: e, customOptions: r, ...o }) : /* @__PURE__ */ s(t, { ...o });
+}
+export {
+  O as withFocusable
+};