@streamlayer/react-ui 1.17.0 → 1.18.1

package/lib/app/masters/BetPack/BetPackOverlay/styles.js

@@ -0,0 +1,51 @@
+import { styled as s } from "@linaria/react";
+import { SvgIcon as o } from "../../../../ui/icons/index.js";
+const c = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "c1mj28sn",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("button")({
+  name: "CloseButton",
+  class: "coc9f01",
+  propsAsIs: !1
+}), p = "b590k5k", e = () => o, t = /* @__PURE__ */ s(e())({
+  name: "IconArrowPrev",
+  class: "i1tkem14",
+  propsAsIs: !0
+}), n = () => t, i = /* @__PURE__ */ s(n())({
+  name: "IconArrowNext",
+  class: "i175qlj5",
+  propsAsIs: !0
+}), m = /* @__PURE__ */ s("div")({
+  name: "Header",
+  class: "h1foi3kz",
+  propsAsIs: !1
+}), A = /* @__PURE__ */ s("div")({
+  name: "HeaderTitle",
+  class: "hc2d48a",
+  propsAsIs: !1
+}), I = /* @__PURE__ */ s("div")({
+  name: "Main",
+  class: "mgfyjlp",
+  propsAsIs: !1
+}), d = /* @__PURE__ */ s("div")({
+  name: "Footer",
+  class: "f1vakhu9",
+  propsAsIs: !1
+}), f = /* @__PURE__ */ s("button")({
+  name: "SlideSwitchButton",
+  class: "spp13y7",
+  propsAsIs: !1
+});
+export {
+  l as CloseButton,
+  c as Container,
+  d as Footer,
+  m as Header,
+  A as HeaderTitle,
+  i as IconArrowNext,
+  t as IconArrowPrev,
+  I as Main,
+  f as SlideSwitchButton,
+  p as buttonAvailable
+};

package/lib/app/masters/BetPack/index.d.ts

@@ -0,0 +1,14 @@
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { AllowedMessageType } from './utils';
+export { BetPackOverlay, type BetPackOverlayProps } from './BetPackOverlay';
+export type BetPackEventCb = (event: {
+    type: AllowedMessageType;
+    payload?: unknown;
+}) => void;
+export declare const BetPack: React.FC<{
+    sdk: StreamLayerSDK;
+    heightOffset?: number;
+    onEvent?: BetPackEventCb;
+    swipeable?: boolean;
+    centerPadding?: string;
+}>;

package/lib/app/masters/BetPack/index.js

@@ -0,0 +1,84 @@
+import { jsxs as u, jsx as r } from "react/jsx-runtime";
+import { useState as p, useCallback as y, memo as H, useMemo as k, useRef as B, useEffect as A } from "react";
+import { useStore as g } from "@streamlayer/react-polyfills";
+import { FeatureType as N } from "@streamlayer/sdk-web-types";
+import { BetPackContent as b } from "./BetPackContent/index.js";
+import { EmergencyScreen as L } from "./BetPackContent/EmergencyScreen/index.js";
+import { LoaderScreen as z } from "./BetPackContent/LoaderScreen/index.js";
+import { BetPackContainer as F } from "./styles.js";
+import { defaultEventHandler as I } from "./utils.js";
+import { cx as x } from "@linaria/core";
+import { SvgIcon as P } from "../../../ui/icons/index.js";
+import { Container as O, Header as R, HeaderTitle as j, CloseButton as E, Main as T, Footer as G, SlideSwitchButton as v, IconArrowPrev as M, buttonAvailable as w, IconArrowNext as U } from "./BetPackOverlay/styles.js";
+const re = ({ sdk: m, onEvent: i, close: f, isMobile: o }) => {
+  const [t, h] = p(), [e, a] = p(), c = y(
+    (n) => {
+      if (n.type === "slBetPackReady") {
+        const { next: s, prev: d, current: l, canNext: S, canPrev: C } = n.payload || {};
+        h({ next: s, prev: d }), a({ current: l, canNext: S, canPrev: C });
+      }
+      if (n.type === "slBetPackChangeCard") {
+        const { current: s, canNext: d, canPrev: l } = n.payload || {};
+        a({ current: s, canNext: d, canPrev: l });
+      }
+      i == null || i(n);
+    },
+    [i]
+  );
+  return /* @__PURE__ */ u(O, { children: [
+    /* @__PURE__ */ u(R, { children: [
+      /* @__PURE__ */ u(j, { children: [
+        /* @__PURE__ */ r(P, { name: "icon-trophy-bet-pack" }),
+        "LiveMatch Experience",
+        " "
+      ] }),
+      /* @__PURE__ */ r(E, { onClick: f, children: /* @__PURE__ */ r(P, { name: "icon-close-btn-gray" }) })
+    ] }),
+    /* @__PURE__ */ r(T, { children: /* @__PURE__ */ r(
+      Y,
+      {
+        sdk: m,
+        onEvent: c,
+        swipeable: !!o,
+        centerPadding: o ? "18px" : "50px",
+        heightOffset: o ? 0 : 35
+      }
+    ) }),
+    !o && /* @__PURE__ */ u(G, { children: [
+      /* @__PURE__ */ r(v, { onClick: t == null ? void 0 : t.prev, disabled: !(e != null && e.canPrev), children: /* @__PURE__ */ r(M, { name: "iconArrowPrev", className: x((e == null ? void 0 : e.canPrev) && w) }) }),
+      /* @__PURE__ */ r(v, { onClick: t == null ? void 0 : t.next, disabled: !(e != null && e.canNext), children: /* @__PURE__ */ r(U, { name: "iconArrowPrev", className: x((e == null ? void 0 : e.canNext) && w) }) })
+    ] })
+  ] });
+}, Y = H(({ sdk: m, swipeable: i = !0, heightOffset: f = 65, onEvent: o = I, centerPadding: t }) => {
+  const h = g(m.featuresList.getStore()), e = k(() => m.getFeature(N.GAMES), [h]), a = g(m.getUserStore()), c = B(null), [n, s] = p(), d = y(() => {
+    c.current && s(c.current.clientHeight);
+  }, []);
+  return A(() => {
+    const l = () => {
+      c.current && s(c.current.clientHeight);
+    };
+    return window.addEventListener("resize", l), () => {
+      window.removeEventListener("resize", l);
+    };
+  }, []), a.data ? e ? /* @__PURE__ */ r(F, { ref: c, children: /* @__PURE__ */ r(
+    b,
+    {
+      gamification: e,
+      onEvent: o,
+      swipeable: i,
+      centerPadding: t,
+      changeHeightOnInit: d,
+      height: n ? n - f : void 0
+    }
+  ) }) : /* @__PURE__ */ r("div", { children: "no gamification" }) : a.error && !a.loading ? /* @__PURE__ */ r(
+    L,
+    {
+      actionFn: () => o({ type: "slHardRefresh" }),
+      description: "You are not authorized to view this resource."
+    }
+  ) : /* @__PURE__ */ r(z, {});
+});
+export {
+  Y as BetPack,
+  re as BetPackOverlay
+};

package/lib/app/masters/BetPack/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const ScreenButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const ScreenTitle: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ScreenDescription: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const BetPackContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/app/masters/BetPack/styles.js

@@ -0,0 +1,24 @@
+import { styled as s } from "@linaria/react";
+const n = /* @__PURE__ */ s("button")({
+  name: "ScreenButton",
+  class: "s1pdy82n",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "ScreenTitle",
+  class: "spc0iwi",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("div")({
+  name: "ScreenDescription",
+  class: "s18vssq2",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "BetPackContainer",
+  class: "blelwov",
+  propsAsIs: !1
+});
+export {
+  o as BetPackContainer,
+  n as ScreenButton,
+  c as ScreenDescription,
+  t as ScreenTitle
+};

package/lib/app/masters/BetPack/typings.d.js

@@ -0,0 +1 @@
+

package/lib/app/masters/BetPack/utils.d.ts

@@ -0,0 +1,19 @@
+export type AllowedMessageType = 'slBetPackReady' | 'slOpenGameCenter' | 'slHardRefresh' | 'slBetPackChangeCard';
+declare global {
+    interface Window {
+        webkit?: {
+            messageHandlers: {
+                [x: string]: {
+                    postMessage: (args: unknown) => void;
+                };
+            };
+        };
+        slBetPackCb?: {
+            postMessage: (data: string) => void;
+        };
+    }
+}
+export declare const defaultEventHandler: (event: {
+    type: AllowedMessageType;
+    payload?: unknown;
+}) => void;

package/lib/app/masters/BetPack/utils.js

@@ -0,0 +1,10 @@
+import { createLogger as n } from "@streamlayer/sdk-web-logger";
+const o = "slBetPackCb", w = n("betPack-ui"), d = (e, s = {}) => {
+  var t, i;
+  w.debug({ id: o, type: e, ...s }), (t = window.top) == null || t.postMessage({ id: o, type: e, ...s }, "*"), window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers[o] && window.webkit.messageHandlers[o].postMessage({ type: e, ...s }), (i = window.slBetPackCb) != null && i.postMessage && window.slBetPackCb.postMessage(JSON.stringify({ type: e, ...s, from: "base" }));
+}, a = (e) => {
+  d(e.type);
+};
+export {
+  a as defaultEventHandler
+};

package/lib/app/masters/masters.d.ts

@@ -7,7 +7,5 @@ export type MastersAppChildrenProps = {
 };
 export type MastersAppProps = {
     sdk: StreamLayerSDK;
-    overlays?: Overlays;
-    children: (methods: MastersAppChildrenProps) => React.ReactNode;
 };
 export declare const MastersApp: React.FC<MastersAppProps>;

package/lib/app/masters/masters.js

@@ -1,120 +1,124 @@
-import { jsx as n, jsxs as v } from "react/jsx-runtime";
-import { SDKContainer as C, SDKScrollContainer as x } from "./styles.js";
-import { useSdkScroll as A } from "./useSdkScroll.js";
-import { useSdkFeature as F } from "../useSdkFeature.js";
-import { useAnalyticsListener as d, newTabLinkListener as M, appScrollListener as b, appClickListener as D } from "../../hooks/analytics.js";
-import { useRef as S, useMemo as I, useEffect as B } from "react";
-import { useStore as T } from "@streamlayer/react-polyfills";
-import { resetCss as p } from "../../ui/theme/theme.js";
-import { ActiveFeature as j, StandaloneFeature as k } from "./Features/index.js";
-import { MastersNavigation as E } from "./Navigation/MastersNavigation/index.js";
-import { SDKNotifications as K } from "./Notifications/index.js";
-import { useMastersApp as O } from "./useMastersApp.js";
-import { MastersContext as R } from "./useMastersContext.js";
-import { useSdkResponsive as w } from "./useSdkResponsive.js";
-import { StreamLayerMastersThemeProvider as ce } from "../../ui/theme/masters.js";
-import { ChannelsButtonId as P } from "../../ui/navigation/button/Channels.js";
-import { LeaderBoardButtonId as G } from "../../ui/navigation/button/LeaderBoard.js";
-import { FeaturedGroupsButtonId as V } from "../../ui/navigation/button/FeaturedGroups.js";
-const W = ({ sdk: e, className: i, scrollStore: l, appNode: t, scrollNode: s, responsiveStore: o }) => {
-  const [, r] = F(e);
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import { SDKContainer as b, SDKScrollContainer as g } from "./styles.js";
+import { useSdkScroll as C } from "./useSdkScroll.js";
+import { useSdkFeature as L } from "../useSdkFeature.js";
+import { useAnalyticsListener as m, newTabLinkListener as x, appScrollListener as A, appClickListener as I } from "../../hooks/analytics.js";
+import { useRef as f, useState as D, useEffect as S, useMemo as M } from "react";
+import { useStore as l } from "@streamlayer/react-polyfills";
+import { FeatureType as P } from "@streamlayer/sdk-web-types";
+import { resetCss as v } from "../../ui/theme/theme.js";
+import { BetPackOverlay as w } from "./BetPack/index.js";
+import { ActiveFeature as E, StandaloneFeature as k } from "./Features/index.js";
+import { SDKNotifications as j } from "./Notifications/index.js";
+import { MastersContext as B } from "./useMastersContext.js";
+import { useSdkResponsive as K } from "./useSdkResponsive.js";
+import { StreamLayerMastersThemeProvider as ne } from "../../ui/theme/masters.js";
+const O = ({ sdk: e, className: t, scrollStore: s, appNode: a, scrollNode: i, responsiveStore: r }) => {
+  const [, o] = L(e);
   return /* @__PURE__ */ n(
-    j,
+    E,
     {
-      className: i,
-      scrollNode: s,
-      appNode: t,
-      scrollStore: l,
-      feature: r,
-      responsiveStore: o,
+      className: t,
+      scrollNode: i,
+      appNode: a,
+      scrollStore: s,
+      feature: o,
+      responsiveStore: r,
       sdk: e
     }
   );
-}, Y = ({ sdk: e, className: i, appNode: l, responsiveStore: t }) => {
-  const s = T(e.featuresList.getStore());
-  return s ? Array.from(s, (o) => {
-    const r = e.getFeature(o);
-    return r ? /* @__PURE__ */ n(
+}, R = ({ sdk: e, className: t, appNode: s, responsiveStore: a }) => {
+  const i = l(e.featuresList.getStore());
+  return i ? Array.from(i, (r) => {
+    const o = e.getFeature(r);
+    return o ? /* @__PURE__ */ n(
       k,
       {
-        className: i,
-        appNode: l,
-        feature: r,
-        responsiveStore: t,
+        className: t,
+        appNode: s,
+        feature: o,
+        responsiveStore: a,
         sdk: e
       },
-      o
+      r
     ) : null;
   }) : null;
-}, ie = ({ sdk: e, overlays: i, children: l }) => {
-  const t = S(null), s = S(null), [o] = w(t), [r, f] = A(t, o), { sdkEnabled: a, sdkReady: c, activeOverlay: m, activateAndLoadOverlay: h, activateEventWithId: N, deactivate: g, isLogged: y } = O(e);
-  d(t, { enabled: a, event: "click", listener: M }), d(r, {
-    enabled: a,
+}, G = ({
+  responsiveStore: e,
+  ...t
+}) => {
+  const { sdkInDesktopView: s } = l(e);
+  return /* @__PURE__ */ n(w, { ...t, isMobile: !s });
+}, te = ({ sdk: e }) => {
+  const t = f(null), [s, a] = D(!0), i = f(null), [r] = K(t), [o, p] = C(t, r), h = l(e.status), y = l(e.sdkStore.slStreamId), u = !!l(e.userId()), c = h === "ready" && !!y.data;
+  S(() => {
+    window.requestAnimationFrame(() => {
+      e.initializeApp().then(() => {
+        e.openFeature(P.GAMES);
+      });
+    });
+  }, [e]), m(t, { enabled: !0, event: "click", listener: x }), m(o, {
+    enabled: !0,
     event: "scrollend",
-    listener: b,
+    listener: A,
     useDomNode: !0
-  }), d(r, {
-    enabled: a,
+  }), m(o, {
+    enabled: !0,
     event: "click",
-    listener: D,
+    listener: I,
     useDomNode: !0
   });
-  const L = I(() => ({ sdk: e }), [e]);
-  return B(() => {
+  const F = M(() => ({ sdk: e }), [e]);
+  return S(() => {
     import("./Features/Gamification/gamification-feature.js");
-  }, []), /* @__PURE__ */ n(R.Provider, { value: L, children: /* @__PURE__ */ v(C, { ref: t, children: [
-    a && /* @__PURE__ */ n(
-      E,
+  }, []), /* @__PURE__ */ d(B.Provider, { value: F, children: [
+    s && u && /* @__PURE__ */ n(
+      G,
       {
-        ref: s,
-        sdkReady: c,
-        activeOverlay: m,
-        className: p,
-        setActiveOverlay: (u) => h("", u),
-        scrollToTop: () => {
-          var u;
-          return (u = r.current) == null ? void 0 : u.scrollTo(0, 0);
+        sdk: e,
+        onEvent: ({ type: N }) => N === "slOpenGameCenter" ? a(!1) : () => {
         },
-        responsiveStore: o
+        close: () => a(!1),
+        responsiveStore: r
       }
     ),
-    /* @__PURE__ */ v(x, { className: "sl-hide-on-modal", ref: r, "data-nav": a.toString(), children: [
+    !s && u && /* @__PURE__ */ n(b, { ref: t, children: /* @__PURE__ */ d(g, { className: "sl-hide-on-modal", ref: o, children: [
       c && /* @__PURE__ */ n(
-        K,
+        j,
         {
           sdk: e,
-          scrollNode: r,
-          headerNode: s,
+          scrollNode: o,
+          headerNode: i,
           appNode: t,
-          scrollStore: f,
-          responsiveStore: o
+          scrollStore: p,
+          responsiveStore: r
         }
       ),
-      /* @__PURE__ */ n("div", { style: !a || m === P ? {} : { display: "none" }, children: l && l({ activateEventWithId: N, deactivate: g }) }),
-      i && m === G && i[m],
-      c && m === V && /* @__PURE__ */ n(
-        W,
+      c && /* @__PURE__ */ n(
+        O,
         {
-          scrollStore: f,
-          responsiveStore: o,
-          scrollNode: r,
+          scrollStore: p,
+          responsiveStore: r,
+          scrollNode: o,
           appNode: t,
-          className: p,
+          className: v,
           sdk: e
         }
       ),
-      c && /* @__PURE__ */ n(Y, { responsiveStore: o, appNode: t, className: p, sdk: e })
-    ] }),
-    a && !y && /* @__PURE__ */ n(
-      "div",
-      {
-        style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" },
-        children: "You are not logged in."
-      }
-    )
-  ] }) });
+      c && /* @__PURE__ */ n(
+        R,
+        {
+          responsiveStore: r,
+          appNode: t,
+          className: v,
+          sdk: e
+        }
+      )
+    ] }) }),
+    !u && /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "You are not logged in." })
+  ] });
 };
 export {
-  ie as MastersApp,
-  ce as StreamLayerMastersThemeProvider
+  te as MastersApp,
+  ne as StreamLayerMastersThemeProvider
 };

package/lib/app/masters/story/components.d.ts

@@ -0,0 +1,11 @@
+export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const HostAppContent: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const AppContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const MobileHeader: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Body: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const BackToTop: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const BackToTopLink: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLAnchorElement> & import('react').AnchorHTMLAttributes<HTMLAnchorElement> & Record<never, unknown>>;
+export declare const Video: () => import("react/jsx-runtime").JSX.Element;
+export declare const MastersLogin: React.FC<{
+    hideUser?: boolean;
+}>;

package/lib/app/masters/story/components.js

@@ -0,0 +1,151 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { styled as s } from "@linaria/react";
+import { useState as d, useCallback as v, useEffect as b } from "react";
+import { useStreamLayer as h } from "@streamlayer/react";
+import { StreamLayerLogin as g } from "@streamlayer/react/auth";
+import { storage as a } from "@streamlayer/sdk-web-core";
+import { StreamLayerSDKPoints as y } from "../Points/index.js";
+import { StreamLayerMastersThemeProvider as k } from "../../../ui/theme/masters.js";
+const A = /* @__PURE__ */ s("div")({
+  name: "PointsContainer",
+  class: "p1ibyybw",
+  propsAsIs: !1
+}), M = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "cwn5esv",
+  propsAsIs: !1
+}), H = /* @__PURE__ */ s("div")({
+  name: "HostAppContent",
+  class: "h1wlm0i9",
+  propsAsIs: !1
+}), U = /* @__PURE__ */ s("div")({
+  name: "AppContainer",
+  class: "al0jzb8",
+  propsAsIs: !1
+}), D = /* @__PURE__ */ s("div")({
+  name: "MobileHeader",
+  class: "m1pnv6pj",
+  propsAsIs: !1
+}), E = /* @__PURE__ */ s("div")({
+  name: "Body",
+  class: "b1brtptg",
+  propsAsIs: !1
+}), C = /* @__PURE__ */ s("div")({
+  name: "VideoFrame",
+  class: "v19mta0g",
+  propsAsIs: !1
+}), T = /* @__PURE__ */ s("video")({
+  name: "VideoPlayer",
+  class: "v17i6v46",
+  propsAsIs: !1
+}), I = /* @__PURE__ */ s("div")({
+  name: "LoginContainer",
+  class: "lf71eub",
+  propsAsIs: !1
+}), z = /* @__PURE__ */ s("button")({
+  name: "BackToTop",
+  class: "b1xvh1fy",
+  propsAsIs: !1
+}), K = /* @__PURE__ */ s("a")({
+  name: "BackToTopLink",
+  class: "b1jcte5i",
+  propsAsIs: !1
+}), N = () => {
+  const o = h(), [r, i] = d(!1), t = v(({
+    muted: c
+  }) => {
+    i(c);
+  }, []);
+  return b(() => (o == null || o.addVideoPlayerController(t), () => {
+    o == null || o.removeVideoPlayerController(t);
+  }), [o, t]), /* @__PURE__ */ n(C, {
+    children: [o && /* @__PURE__ */ e(k, {
+      children: /* @__PURE__ */ e(A, {
+        children: /* @__PURE__ */ e(y, {
+          sdk: o
+        })
+      })
+    }), /* @__PURE__ */ e(I, {
+      children: /* @__PURE__ */ e(L, {
+        hideUser: !0
+      })
+    }), /* @__PURE__ */ e(T, {
+      src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
+      muted: r,
+      controls: !0
+    })]
+  });
+}, L = ({
+  hideUser: o
+}) => {
+  var l;
+  const [r, i] = d({
+    token: a.getExternalToken(),
+    schema: a.getSchema()
+  }), t = h();
+  return /* @__PURE__ */ n("div", {
+    children: [/* @__PURE__ */ n("form", {
+      className: "auth-form",
+      onSubmit: (m) => {
+        m.preventDefault();
+        const p = new FormData(m.currentTarget), u = p.get("token"), f = p.get("schema");
+        i({
+          token: u,
+          schema: f
+        });
+      },
+      children: [/* @__PURE__ */ n("div", {
+        children: [/* @__PURE__ */ e("label", {
+          htmlFor: "token",
+          children: "token"
+        }), /* @__PURE__ */ e("input", {
+          type: "text",
+          id: "token",
+          name: "token",
+          placeholder: "..." + ((l = a.getExternalToken()) == null ? void 0 : l.slice(-8))
+        })]
+      }), /* @__PURE__ */ n("div", {
+        children: [/* @__PURE__ */ e("label", {
+          htmlFor: "schema",
+          children: "schema"
+        }), /* @__PURE__ */ e("input", {
+          type: "text",
+          id: "schema",
+          name: "schema",
+          placeholder: a.getSchema()
+        })]
+      }), /* @__PURE__ */ e("div", {
+        children: /* @__PURE__ */ e("button", {
+          type: "submit",
+          children: "submit"
+        })
+      })]
+    }), /* @__PURE__ */ e(g, {
+      token: r.token,
+      schema: r.schema
+    }), /* @__PURE__ */ e("button", {
+      onClick: () => t == null ? void 0 : t.logout(),
+      children: "logout"
+    }), !o && /* @__PURE__ */ n("div", {
+      children: [/* @__PURE__ */ e("div", {
+        children: "user"
+      }), /* @__PURE__ */ e("textarea", {
+        value: r.token,
+        rows: 6,
+        cols: 70,
+        readonly: !0
+      })]
+    })]
+  });
+};
+export {
+  U as AppContainer,
+  z as BackToTop,
+  K as BackToTopLink,
+  E as Body,
+  M as Container,
+  H as HostAppContent,
+  L as MastersLogin,
+  D as MobileHeader,
+  N as Video
+};

package/lib/app/masters/story/index.d.ts

@@ -0,0 +1,3 @@
+export declare const MastersStory: React.FC<{
+    settings?: boolean;
+}>;

package/lib/app/masters/story/index.js

@@ -0,0 +1,53 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { StreamLayerProvider as t, StreamLayerSDKEvent as l, useStreamLayer as c } from "@streamlayer/react";
+import { MastersApp as s } from "../masters.js";
+import { StreamLayerMastersThemeProvider as p } from "../../../ui/theme/masters.js";
+import { useStreamLayerDebug as m, StreamLayerDebug as h } from "../../../utils/debug/index.js";
+import { MastersLogin as u, MobileHeader as y, HostAppContent as d, Body as k, Video as v, Container as L, AppContainer as f, BackToTop as S, BackToTopLink as T } from "./components.js";
+const C = () => {
+  const o = c();
+  return o ? /* @__PURE__ */ e(p, { style: { height: "100%" }, children: /* @__PURE__ */ e(s, { sdk: o }) }) : null;
+}, a = () => {
+  console.log("deep link handled cb");
+}, i = () => {
+  console.log("video player handled cb");
+}, D = ({ settings: o }) => {
+  const r = m();
+  return o ? /* @__PURE__ */ n(
+    t,
+    {
+      sdkKey: r.sdkKey,
+      production: r.env === "production",
+      onDeepLinkHandled: a,
+      videoPlayerController: i,
+      children: [
+        /* @__PURE__ */ e(u, {}),
+        /* @__PURE__ */ e(h, { ...r, standalone: !0, hideAuth: !0 })
+      ]
+    }
+  ) : /* @__PURE__ */ n(
+    t,
+    {
+      sdkKey: r.sdkKey,
+      production: r.env === "production",
+      autoEnable: !1,
+      onDeepLinkHandled: a,
+      videoPlayerController: i,
+      children: [
+        /* @__PURE__ */ e(l, { event: r.event }),
+        /* @__PURE__ */ e(y, { children: "header" }),
+        /* @__PURE__ */ e(d, { children: "...host app content..." }),
+        /* @__PURE__ */ n(k, { children: [
+          /* @__PURE__ */ e(v, {}),
+          /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(f, { className: "StreamLayerSDK", children: /* @__PURE__ */ e(C, {}) }) })
+        ] }),
+        /* @__PURE__ */ e(d, { children: "...host app content..." }),
+        /* @__PURE__ */ e(S, { onClick: () => document.documentElement.scrollTop = 0, children: "BackToTop" }),
+        /* @__PURE__ */ e(T, { href: "#", children: "BackToTop Link" })
+      ]
+    }
+  );
+};
+export {
+  D as MastersStory
+};