@streamlayer/react-ui 1.32.4 → 1.33.2

package/lib/core/app.d.ts

@@ -0,0 +1,7 @@
+export declare const StreamLayerSDKReact: React.FC<{
+    event?: string;
+    topNavigation?: boolean;
+    withSidebarNotification?: boolean;
+    muted?: boolean;
+    theme?: string;
+}>;

package/lib/core/app.js

@@ -0,0 +1,14 @@
+import { jsx as r } from "react/jsx-runtime";
+import { App as l } from "../app/app/index.js";
+import { useContext as o } from "react";
+import { StreamLayerThemeProvider as f } from "../ui/theme/index.js";
+import { S as n, a as h, b as y, c as s } from "../hooks-B0Qttldg.js";
+const b = ({ event: p, topNavigation: S, theme: c, muted: u, withSidebarNotification: d = !0 }) => {
+  const { sdk: t, status: i } = o(n), e = h(), m = y(), { event: a } = o(n);
+  if (i === s.UNSET)
+    throw new Error("Wrap app in `StreamLayerProvider`");
+  return i === s.CONNECTED ? /* @__PURE__ */ r("div", { className: "StreamLayerSDK", children: "wait" }) : t === null ? /* @__PURE__ */ r("div", { className: "StreamLayerSDK", children: "sdk not initialized" }) : !e.app && !e.appNotification && !e.appSidebar || !e.app && !e.appSidebar && e.appNotification && !d ? null : /* @__PURE__ */ r("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ r(f, { customTheme: c ?? m.theme, themeMode: m.themeMode, children: /* @__PURE__ */ r(l, { sdk: t, muted: u, event: (a == null ? void 0 : a.current) || p, topNavigation: S }) }) });
+};
+export {
+  b as StreamLayerSDKReact
+};

package/lib/core/event.d.ts

@@ -0,0 +1,6 @@
+export type StreamLayerSDKEventProps = {
+    event?: string;
+};
+export declare const StreamLayerSDKEvent: React.FC<StreamLayerSDKEventProps & {
+    internal?: boolean;
+}>;

package/lib/core/event.js

@@ -0,0 +1,5 @@
+import "react";
+import { e as a } from "../hooks-B0Qttldg.js";
+export {
+  a as StreamLayerSDKEvent
+};

package/lib/core/hooks.d.ts

@@ -0,0 +1,16 @@
+import { StreamLayerOptions, StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+export declare const useStreamLayer: () => StreamLayerSDK | null;
+export declare const useStreamLayerEvent: () => import('react').MutableRefObject<string> | undefined;
+export declare const useStreamLayerTheme: () => Pick<StreamLayerOptions, "theme" | "themeMode">;
+export declare const useStreamLayerUI: () => {
+    promotionExternalAd?: boolean;
+    promotionSidebar?: boolean;
+    promotionOverlay?: boolean;
+    promotionNotification?: boolean;
+    promotionBanner?: boolean;
+    app?: boolean;
+    appNotification?: boolean;
+    appSidebar?: boolean;
+    appBanner?: boolean;
+    onboardingNotification?: boolean;
+};

package/lib/core/hooks.js

@@ -0,0 +1,8 @@
+import "react";
+import { u as s, f as m, b as t, a as u } from "../hooks-B0Qttldg.js";
+export {
+  s as useStreamLayer,
+  m as useStreamLayerEvent,
+  t as useStreamLayerTheme,
+  u as useStreamLayerUI
+};

package/lib/core/provider.d.ts

@@ -0,0 +1,49 @@
+import { DeepLinkCallback } from '@streamlayer/sdk-web-core';
+import { StreamLayerSDK, StreamLayerPlugin } from '@streamlayer/sdk-web-interfaces';
+export type { DeepLinkCallback } from '@streamlayer/sdk-web-core';
+export type ContentActivateParams = {
+    stage: 'activate' | 'deactivate';
+    id: string;
+    isViewed?: boolean;
+    hasNotification?: boolean;
+    type: 'advertisement' | 'insight' | 'poll' | 'trivia' | 'prediction' | 'tweet' | 'question';
+};
+export type VideoPlayerData = {
+    muted?: boolean;
+    play?: boolean;
+};
+export type VideoPlayerCallback = (videoPlayerData: VideoPlayerData) => void;
+export type OnContentActivateCallback = (renderData: ContentActivateParams) => void;
+export declare enum StreamLayerStatus {
+    UNSET = 0,
+    CONNECTED = 1,
+    READY = 2
+}
+export declare const StreamLayerContext: import('react').Context<{
+    status: StreamLayerStatus;
+    sdk: StreamLayerSDK | null;
+    event?: React.MutableRefObject<string>;
+}>;
+export type StreamLayerProps = {
+    sdkKey: string;
+    plugins?: Set<StreamLayerPlugin>;
+    event?: string;
+    production?: boolean;
+    autoEnable?: boolean;
+    onDeepLinkHandled?: DeepLinkCallback;
+    videoPlayerController?: VideoPlayerCallback;
+    onContentActivate?: OnContentActivateCallback;
+    theme?: string;
+    withAdNotification?: boolean;
+    withAd?: boolean;
+    hideFriends?: boolean;
+    friendsTab?: 'enabled' | 'disabled' | 'activatedGame';
+    themeMode?: 'light' | 'dark';
+    containerId?: string;
+};
+export declare const StreamLayerProvider: React.FC<StreamLayerProps & {
+    children: React.ReactNode;
+    skipOnboarding?: boolean;
+    betPack?: boolean;
+    webOS?: boolean;
+}>;

package/lib/core/provider.js

@@ -0,0 +1,9 @@
+import "react/jsx-runtime";
+import "react";
+import "../useStreamLayerApp.js";
+import { S as o, d as S, c as i } from "../hooks-B0Qttldg.js";
+export {
+  o as StreamLayerContext,
+  S as StreamLayerProvider,
+  i as StreamLayerStatus
+};

package/lib/hooks-B0Qttldg.js

@@ -0,0 +1,99 @@
+import { useEffect as n, createContext as A, useRef as D, useMemo as R, useContext as m, useState as v } from "react";
+import { jsxs as I, jsx as M } from "react/jsx-runtime";
+import { useStreamLayerApp as g } from "./useStreamLayerApp.js";
+const j = ({
+  event: e,
+  internal: o
+}) => {
+  const s = B(), r = G();
+  return n(() => (s && (e && (s.createEventSession(e, o), r && (r.current = e)), !e && (r != null && r.current) && (s.createEventSession("", o), r.current = "")), () => {
+    s && s.disableApp();
+  }), [e, o, r, s]), null;
+};
+var Y = /* @__PURE__ */ ((e) => (e[e.UNSET = 0] = "UNSET", e[e.CONNECTED = 1] = "CONNECTED", e[e.READY = 2] = "READY", e))(Y || {});
+const w = {
+  status: 0,
+  sdk: null
+}, c = A(w), q = ({
+  sdkKey: e,
+  theme: o,
+  themeMode: s,
+  plugins: r,
+  children: f,
+  event: E,
+  production: x = !0,
+  autoEnable: K = !0,
+  withAdNotification: N,
+  withAd: C = !0,
+  betPack: a = !1,
+  hideFriends: T,
+  skipOnboarding: p,
+  friendsTab: S = "enabled",
+  onDeepLinkHandled: u,
+  videoPlayerController: i,
+  onContentActivate: U,
+  containerId: h,
+  webOS: b
+}) => {
+  const t = g({
+    sdkKey: e,
+    plugins: r,
+    production: x,
+    autoEnable: K,
+    onDeepLinkHandled: u,
+    videoPlayerController: i,
+    onContentActivate: U,
+    hideFriends: T,
+    skipOnboarding: p,
+    withAdNotification: N,
+    withAd: C,
+    friendsTab: S,
+    betPack: a,
+    webOS: b
+  }), l = D(""), y = R(() => t ? { sdk: t, status: 2, event: l } : { status: 1, sdk: null, event: l }, [t]);
+  return n(() => {
+    t && (t.options.setKey("friendsTab", S), t.options.setKey("theme", o), t.options.setKey("themeMode", s), t.options.setKey("skipOnboarding", p), t.options.setKey("betPack", a), t.options.setKey("containerId", h));
+  }, [t, S, o, s, p, a, h]), n(() => () => {
+    u && (t == null || t.removeDeepLinkHandler(u)), i && (t == null || t.removeVideoPlayerController(i));
+  }, [t]), n(() => {
+    localStorage.getItem("SL_DEBUG") && console.log("StreamLayerProvider mounted with props:", {
+      sdkKey: !!e,
+      onDeepLinkHandled: !!u,
+      videoPlayerController: !!i
+    });
+  }, [e, u, i]), /* @__PURE__ */ I(c.Provider, { value: y, children: [
+    E !== void 0 && /* @__PURE__ */ M(j, { event: E }),
+    f
+  ] });
+}, B = () => {
+  const { sdk: e } = m(c);
+  return e;
+}, G = () => {
+  const { event: e } = m(c);
+  return e;
+}, z = () => {
+  const { sdk: e } = m(c), [o, s] = v({});
+  return n(() => {
+    var r;
+    return e != null && e.options ? (r = e == null ? void 0 : e.options) == null ? void 0 : r.subscribe((f) => {
+      s({ theme: f.theme, themeMode: f.themeMode });
+    }) : () => {
+    };
+  }, [e == null ? void 0 : e.options]), o;
+}, F = () => {
+  const { sdk: e } = m(c), [o, s] = v({});
+  return n(() => e != null && e.uiState ? e == null ? void 0 : e.uiState.subscribe((r) => {
+    s({ ...r });
+  }) : () => {
+  }, [e == null ? void 0 : e.uiState]), o;
+};
+export {
+  c as S,
+  F as a,
+  z as b,
+  Y as c,
+  q as d,
+  j as e,
+  G as f,
+  B as u
+};

package/lib/index.d.ts

@@ -1,2 +1 @@
 export { App } from './app/app';
-export { StreamLayerThemeProvider } from './ui/theme';

package/lib/index.js

@@ -1,6 +1,4 @@
-import { App as o } from "./app/app/index.js";
-import { StreamLayerThemeProvider as p } from "./ui/theme/index.js";
+import { App as r } from "./app/app/index.js";
 export {
-  o as App,
-  p as StreamLayerThemeProvider
+  r as App
 };

package/lib/ui/advertisement/banner/index.d.ts

@@ -1,7 +1,7 @@
 import { Advertisement } from '@streamlayer/feature-gamification';
-import { PromotionOptions } from '@streamlayer/sdk-web-types';
+import { Promotion } from '@streamlayer/sdk-web-types';
 export declare const Banner: React.FC<{
-    promotion: PromotionOptions;
+    promotion: Promotion;
     promotionId: string;
     direction?: 'top' | 'bottom';
     hiding?: boolean;

package/lib/ui/advertisement/notification/lower-third/index.js

@@ -1,53 +1,57 @@
-import { jsx as i, jsxs as e, Fragment as m } from "react/jsx-runtime";
-import { withFocusable as O } from "../../../../app/webos/useTvButton.js";
-import { NotificationPromotionImagePosition as N, NotificationEnabled as t, NotificationSponsorLogoMode as _, CtaIconMode as I } from "@streamlayer/sdk-web-types";
-import { MediaImgBottom as C, MediaImgMiddle as f, NotificationContainer as L, NotificationContent as A, Body as S, Title as E, Text as P, Footer as x, Logo as D, Vector as F, CtaIcon as a, OpenButton as h, DismissButton as k } from "./styles.js";
-const R = {
-  [N.BOTTOM]: C,
-  [N.MIDDLE]: f
-}, w = ({ src: r, imagePosition: n }) => {
-  const l = R[n] || C;
-  return /* @__PURE__ */ i(l, { children: /* @__PURE__ */ i("img", { src: r, alt: "" }) });
-}, y = O(k), j = O(h), q = ({ notification: r, open: n, close: l, webos: s }) => {
+import { jsx as i, jsxs as e, Fragment as I } from "react/jsx-runtime";
+import { withFocusable as C } from "../../../../app/webos/useTvButton.js";
+import { NotificationPromotionImagePosition as n, NotificationEnabled as t, NotificationSponsorLogoMode as E, CtaIconMode as O } from "@streamlayer/sdk-web-types";
+import { MediaImgBottom as l, MediaImgMiddle as L, NotificationContainer as _, NotificationContent as f, Body as S, Title as A, Text as D, Footer as F, Logo as P, Vector as x, CtaIcon as a, OpenButton as T, DismissButton as R } from "./styles.js";
+const k = {
+  [n.UNSET]: l,
+  [n.FIT]: l,
+  [n.CENTERED]: l,
+  [n.SOLID]: l,
+  [n.BOTTOM]: l,
+  [n.MIDDLE]: L
+}, w = ({ src: r, imagePosition: s }) => {
+  const c = k[s];
+  return /* @__PURE__ */ i(c, { children: /* @__PURE__ */ i("img", { src: r, alt: "" }) });
+}, y = C(R), j = C(T), V = ({ notification: r, open: s, close: c, webos: d }) => {
   if (!r || !r.promotion || r.enabled !== t.NOTIFICATION_ENABLED)
     return null;
-  const { title: c, body: d, image: T, promotion: p } = r, { sponsorLogo: g, sponsorLogoMode: M, imagePosition: b, ctaButton: o } = p;
+  const { title: m, body: N, image: h, promotion: p } = r, { sponsorLogo: g, sponsorLogoMode: M, imagePosition: b, ctaButton: o } = p;
   return /* @__PURE__ */ e(
-    L,
+    _,
     {
-      "data-webos": s,
+      "data-webos": d,
       className: "SL_Lower_Third_Notification",
-      onClick: s ? void 0 : n,
+      onClick: d ? void 0 : s,
       children: [
-        /* @__PURE__ */ e(A, { children: [
-          /* @__PURE__ */ i(w, { src: T, imagePosition: b }),
+        /* @__PURE__ */ e(f, { children: [
+          /* @__PURE__ */ i(w, { src: h, imagePosition: b }),
           /* @__PURE__ */ e(S, { children: [
-            c && /* @__PURE__ */ i(E, { children: c }),
-            d && /* @__PURE__ */ i(P, { children: d })
+            m && /* @__PURE__ */ i(A, { children: m }),
+            N && /* @__PURE__ */ i(D, { children: N })
           ] })
         ] }),
-        /* @__PURE__ */ e(x, { children: [
-          M !== _.NOTIFICATION_SPONSOR_LOGO_NONE && /* @__PURE__ */ e(m, { children: [
-            /* @__PURE__ */ i(D, { children: /* @__PURE__ */ i("img", { src: g, alt: c }) }),
-            /* @__PURE__ */ i(F, {})
+        /* @__PURE__ */ e(F, { children: [
+          M !== E.NOTIFICATION_SPONSOR_LOGO_NONE && /* @__PURE__ */ e(I, { children: [
+            /* @__PURE__ */ i(P, { children: /* @__PURE__ */ i("img", { src: g, alt: m }) }),
+            /* @__PURE__ */ i(x, {})
           ] }),
-          s ? /* @__PURE__ */ e(m, { children: [
-            /* @__PURE__ */ i(y, { webos: !0, onClick: l, children: "Dismiss" }),
+          d ? /* @__PURE__ */ e(I, { children: [
+            /* @__PURE__ */ i(y, { webos: !0, onClick: c, children: "Dismiss" }),
             /* @__PURE__ */ e(
               j,
               {
                 webos: !0,
                 autoFocus: !0,
                 style: { color: o == null ? void 0 : o.textColor, backgroundColor: o == null ? void 0 : o.color },
-                onClick: n,
+                onClick: s,
                 children: [
-                  (o == null ? void 0 : o.ctaIcon) && (o == null ? void 0 : o.ctaIconMode) === I.CTA_ICON_TRANSPARENT && /* @__PURE__ */ i(a, { src: o == null ? void 0 : o.ctaIcon, alt: "cta-icon" }),
+                  (o == null ? void 0 : o.ctaIcon) && (o == null ? void 0 : o.ctaIconMode) === O.CTA_ICON_TRANSPARENT && /* @__PURE__ */ i(a, { src: o == null ? void 0 : o.ctaIcon, alt: "cta-icon" }),
                   (o == null ? void 0 : o.label) || "Open"
                 ]
               }
             )
-          ] }) : /* @__PURE__ */ e(h, { name: "promo-button", style: { color: o == null ? void 0 : o.textColor, backgroundColor: o == null ? void 0 : o.color }, children: [
-            (o == null ? void 0 : o.ctaIcon) && (o == null ? void 0 : o.ctaIconMode) === I.CTA_ICON_TRANSPARENT && /* @__PURE__ */ i(a, { src: o == null ? void 0 : o.ctaIcon, alt: "cta-icon" }),
+          ] }) : /* @__PURE__ */ e(T, { name: "promo-button", style: { color: o == null ? void 0 : o.textColor, backgroundColor: o == null ? void 0 : o.color }, children: [
+            (o == null ? void 0 : o.ctaIcon) && (o == null ? void 0 : o.ctaIconMode) === O.CTA_ICON_TRANSPARENT && /* @__PURE__ */ i(a, { src: o == null ? void 0 : o.ctaIcon, alt: "cta-icon" }),
             (o == null ? void 0 : o.label) || "Open"
           ] })
         ] })
@@ -56,6 +60,6 @@ const R = {
   );
 };
 export {
-  q as LowerThirdNotification,
+  V as LowerThirdNotification,
   w as NotificationMedia
 };