@streamlayer/react-ui 1.28.2 → 1.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "1.28.2",
+  "version": "1.29.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -71,7 +71,7 @@
   ],
   "peerDependencies": {
     "@lottiefiles/react-lottie-player": "^3.5.4",
-    "@streamlayer/sl-eslib": "^5.216.1",
+    "@streamlayer/sl-eslib": "^5.218.0",
     "@types/lodash.throttle": "^4.1.9",
     "lodash.throttle": "^4.1.1",
     "react-infinite-scroller": "^1.2.6",
@@ -80,19 +80,19 @@
     "@noriginmedia/norigin-spatial-navigation": "^2.3.0",
     "react-window-infinite-loader": "^1.0.9",
     "uuid": "^11.1.0",
-    "@streamlayer/feature-gamification": "^1.21.2",
-    "@streamlayer/react-polyfills": "^0.1.33",
-    "@streamlayer/sdk-web": "^1.14.6",
-    "@streamlayer/sdk-web-analytics": "^1.11.6",
-    "@streamlayer/sdk-web-anonymous-auth": "^1.1.52",
-    "@streamlayer/sdk-web-api": "^1.12.6",
-    "@streamlayer/sdk-web-core": "^1.15.6",
-    "@streamlayer/sdk-web-features": "^1.0.73",
-    "@streamlayer/sdk-web-interfaces": "^1.7.6",
-    "@streamlayer/sdk-web-logger": "^1.0.73",
-    "@streamlayer/sdk-web-notifications": "^1.3.35",
-    "@streamlayer/sdk-web-storage": "^1.0.73",
-    "@streamlayer/sdk-web-types": "^1.14.6"
+    "@streamlayer/feature-gamification": "^1.22.0",
+    "@streamlayer/react-polyfills": "^0.1.35",
+    "@streamlayer/sdk-web-analytics": "^1.12.0",
+    "@streamlayer/sdk-web-anonymous-auth": "^1.2.0",
+    "@streamlayer/sdk-web": "^1.15.0",
+    "@streamlayer/sdk-web-api": "^1.13.0",
+    "@streamlayer/sdk-web-core": "^1.16.0",
+    "@streamlayer/sdk-web-interfaces": "^1.7.8",
+    "@streamlayer/sdk-web-features": "^1.0.75",
+    "@streamlayer/sdk-web-logger": "^1.0.75",
+    "@streamlayer/sdk-web-notifications": "^1.3.37",
+    "@streamlayer/sdk-web-storage": "^1.0.75",
+    "@streamlayer/sdk-web-types": "^1.15.0"
   },
   "nx": {
     "implicitDependencies": [
@@ -133,10 +133,10 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@streamlayer/react": "^1.18.6"
+    "@streamlayer/react": "^1.19.0"
   },
   "dependencies": {
-    "@dailymotion/vast-client": "^6.2.0",
+    "@dailymotion/vast-client": "^6.4.2",
     "@types/vast-client": "^3.0.4",
     "@types/vmap": "^2.2.4",
     "react-qr-code": "^2.0.16",

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

@@ -1,21 +0,0 @@
-import { Gamification } from '@streamlayer/feature-gamification';
-type SDKLayoutProps = {
-    gamification: Gamification & {
-        advertisement: Exclude<Gamification['advertisement'], undefined>;
-    };
-    sidebar?: React.ReactElement;
-    banner?: React.ReactNode;
-    video?: React.ReactNode;
-    uiState: {
-        promotionExternalAd?: boolean;
-        promotionSidebar?: boolean;
-        promotionOverlay?: boolean;
-        promotionNotification?: boolean;
-        promotionBanner?: boolean;
-        app?: boolean;
-        appNotification?: boolean;
-        onboardingNotification?: boolean;
-    };
-};
-export declare const SDKLayout: React.FC<SDKLayoutProps>;
-export {};

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

@@ -1,78 +0,0 @@
-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/webos/ui/Layout/styles.d.ts

@@ -1,11 +0,0 @@
-export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const ContentContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Sidebar: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Banner: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const VideoContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const AdSquare: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const AdText: import('@linaria/react').StyledComponent<import('react').SVGTextElementAttributes<SVGTextElement> & Record<never, unknown>>;
-export declare const VideoBox: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const VideoPlayer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const AdContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const AdLabel: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;

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

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

package/lib/hooks/useKeyboardNavigation.d.ts

@@ -1,15 +0,0 @@
-import { DependencyList } from 'react';
-interface KeyboardNavigationOptions {
-    containerSelector: string;
-    getElements?: (container: HTMLElement) => HTMLElement[];
-    onEscape: () => void;
-    onEnter?: (element: HTMLElement, index: number) => void;
-    initialFocusPriority?: 'close-btn' | 'first' | number;
-    enabled?: boolean;
-    dependencies?: DependencyList;
-    resetFocusOn?: unknown[];
-}
-export declare const useKeyboardNavigation: (options: KeyboardNavigationOptions) => {
-    focusedIndex: import('react').MutableRefObject<number>;
-};
-export {};

package/lib/hooks/useKeyboardNavigation.js

@@ -1,74 +0,0 @@
-import { useRef as m, useEffect as D } from "react";
-const R = (g) => {
-  const {
-    containerSelector: y,
-    getElements: A,
-    onEscape: v,
-    onEnter: a,
-    initialFocusPriority: l = "close-btn",
-    enabled: E = !0,
-    dependencies: h = [],
-    resetFocusOn: f = []
-  } = g, t = m(0), d = m(!1), k = m(f);
-  return f.some((o, p) => o !== k.current[p]) && (d.current = !1, k.current = f), D(() => {
-    if (!E) return;
-    const o = document.querySelector(y);
-    if (!o) return;
-    const b = A || ((e) => Array.from(e.querySelectorAll("button")).filter((r) => !r.disabled));
-    let n = b(o);
-    (() => {
-      var e, c, r;
-      if (n.length !== 0) {
-        if (d.current) {
-          const s = document.activeElement;
-          if (n.includes(s))
-            return;
-        }
-        if (l === "close-btn") {
-          const s = o.querySelector('[data-close-btn="true"]');
-          if (s) {
-            const i = n.indexOf(s);
-            t.current = i !== -1 ? i : 0, s.focus();
-          } else
-            t.current = 0, (e = n[t.current]) == null || e.focus();
-        } else l === "first" ? (t.current = 0, (c = n[t.current]) == null || c.focus()) : typeof l == "number" && (t.current = Math.min(l, n.length - 1), (r = n[t.current]) == null || r.focus());
-        d.current = !0;
-      }
-    })();
-    const w = (e) => {
-      var s, i;
-      if (!o) return;
-      n = b(o);
-      const c = n.length;
-      if (c === 0) return;
-      const r = e.keyCode;
-      if (["ArrowDown", "ArrowRight"].includes(e.key) || r === 40 || r === 39) {
-        t.current = (t.current + 1) % c, (s = n[t.current]) == null || s.focus(), e.preventDefault();
-        return;
-      }
-      if (["ArrowUp", "ArrowLeft"].includes(e.key) || r === 38 || r === 37) {
-        t.current = (t.current - 1 + c) % c, (i = n[t.current]) == null || i.focus(), e.preventDefault();
-        return;
-      }
-      if (e.key === "Enter" || r === 13 || e.key === " ") {
-        const u = n[t.current];
-        if (!u) return;
-        const F = document.activeElement;
-        if (!n.includes(F))
-          return;
-        a ? a(u, t.current) : (u.tagName === "BUTTON" || u.tagName, u.click()), e.preventDefault();
-        return;
-      }
-      if (e.key === "Escape" || e.key === "Backspace" || e.code === "Back" || r === 10009) {
-        v(), e.preventDefault();
-        return;
-      }
-    };
-    return window.addEventListener("keydown", w), () => {
-      window.removeEventListener("keydown", w);
-    };
-  }, [E, y, l, v, a, ...h, ...f]), { focusedIndex: t };
-};
-export {
-  R as useKeyboardNavigation
-};