@streamlayer/react-ui 0.100.5 → 1.1.0

package/lib/app/app/Notifications/Onboarding/index.d.ts

@@ -0,0 +1,14 @@
+import { AppNodeRef } from '../../..';
+import { ResponsiveStore } from '../../../useSdkResponsive';
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { Notification } from '@streamlayer/sdk-web-notifications';
+
+export declare const Onboarding: React.FC<{
+    sdk: StreamLayerSDK;
+    notification: Notification;
+    saveHeight: (height: number) => void;
+    appNode: AppNodeRef;
+    sdkInDesktopView?: boolean;
+    style?: React.CSSProperties;
+    responsiveStore: ResponsiveStore;
+}>;

package/lib/app/app/Notifications/Onboarding/index.js

@@ -0,0 +1,168 @@
+import { jsx as r, jsxs as x, Fragment as L } from "react/jsx-runtime";
+import { styled as w } from "@linaria/react";
+import { useStore as T } from "@nanostores/react";
+import { useImagesPreload as B } from "../../../useImagesPreload.js";
+import { scrollIntoAppView as O } from "../../../useSdkScroll.js";
+import { useRef as E, useState as A, useMemo as _, useLayoutEffect as M, useEffect as P } from "react";
+import { FeatureType as R } from "@streamlayer/sdk-web-types";
+import { OnboardingUI as V } from "../../../../ui/gamification/onboarding/index.js";
+import { ModalPortal as W } from "../../../../ui/modal/index.js";
+import { ShowIn as $ } from "../../../../ui/show-in/index.js";
+import { Onboarding as S } from "./Notification/index.js";
+const C = [{
+  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_0.png",
+  tagline: "",
+  headline: /* @__PURE__ */ x(L, {
+    children: ["Welcome to ", /* @__PURE__ */ r("br", {}), " StreamLayer +"]
+  })
+}, {
+  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_2.png",
+  headline: "Get real-time insights"
+}, {
+  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_3.png",
+  headline: "Predictions, trivia & polls synced to match play"
+}, {
+  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_4.png",
+  headline: "Win points for every answer you get right"
+}, {
+  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_5.png",
+  headline: "Compete against friends on the leaderboard"
+}], j = /* @__PURE__ */ w("div")({
+  name: "OnboardingContainer",
+  class: "o1xni1kr",
+  propsAsIs: !1
+}), G = () => $, q = /* @__PURE__ */ w(G())({
+  name: "OnboardingNotificationContainer",
+  class: "o1vnouv7",
+  propsAsIs: !0
+}), k = /* @__PURE__ */ w("div")({
+  name: "InnerContainer",
+  class: "i59uefw",
+  propsAsIs: !1
+}), z = ({
+  deepLink: l,
+  onboardingOpts: e,
+  notification: o,
+  gamification: p,
+  loading: i,
+  sdk: d
+}) => {
+  var c, a, h, b, f, y, s;
+  const u = T(p.friends.getStore()), [g, t] = A(void 0), v = _(() => {
+    var m, I;
+    const n = d.getInviter();
+    return n ? (I = (m = u.data) == null ? void 0 : m.find(({
+      slId: F
+    }) => F === n)) == null ? void 0 : I.name : "";
+  }, [u.data, d]);
+  return P(() => {
+    const n = l.$store.subscribe((m) => {
+      m && t(m.data);
+    });
+    return () => {
+      n();
+    };
+  }, [l.$store]), /* @__PURE__ */ r(j, {
+    children: /* @__PURE__ */ r(V, {
+      loading: i,
+      rules: [{
+        label: "Answer as many questions as you like.",
+        icon: "icon-btn-feature-groups"
+      }, {
+        label: "Win points for each correct trivia or prediction answer.",
+        icon: "icon-thumb-up"
+      }, {
+        label: "Top the leader board and best your friends.",
+        icon: "icon-trophy"
+      }],
+      rulesBtnLabel: (c = e.rules) == null ? void 0 : c.buttonLabel,
+      rulesTitle: (a = e.rules) == null ? void 0 : a.heading,
+      termsTitle: "Terms and Conditions",
+      termsText: (h = e.rules) == null ? void 0 : h.terms,
+      steps: C,
+      primaryColor: (b = e.inviteCard) == null ? void 0 : b.iconColor,
+      inviteLink: g,
+      inviteCardTitle: (f = e.inviteCard) == null ? void 0 : f.heading,
+      inviteCardSubtext: (y = e.inviteCard) == null ? void 0 : y.subtext,
+      inviteCardBtnLabel: (s = e.inviteCard) == null ? void 0 : s.buttonLabel,
+      onClose: () => {
+        var n;
+        (n = o.close) == null || n.call(o);
+      },
+      gamification: p,
+      sdk: d,
+      inviterName: v
+    })
+  });
+}, ne = ({
+  sdk: l,
+  notification: e,
+  saveHeight: o,
+  style: p,
+  appNode: i,
+  sdkInDesktopView: d,
+  responsiveStore: u
+}) => {
+  const g = E(null), t = e.data.onboarding, [v, c] = A(t == null ? void 0 : t.instantOpen), a = l.getFeature(R.GAMES), h = _(() => C == null ? void 0 : C.map(({
+    graphicSrc: s
+  }) => s), []), {
+    screen: b
+  } = T(u, {
+    keys: ["screen"]
+  });
+  M(() => {
+    var s;
+    o(((s = g.current) == null ? void 0 : s.getBoundingClientRect().height) || 0);
+  }, [o]);
+  const {
+    loading: f,
+    throttled: y
+  } = B(h);
+  return v && a && t && i.current && !y ? /* @__PURE__ */ r(W, {
+    container: i,
+    useContainer: !d,
+    children: /* @__PURE__ */ r(z, {
+      notification: e,
+      setOpened: c,
+      gamification: a,
+      onboardingOpts: t,
+      deepLink: a.deepLink,
+      loading: f,
+      renderToNode: i,
+      sdk: l
+    })
+  }) : /* @__PURE__ */ x(L, {
+    children: [/* @__PURE__ */ r(k, {
+      ref: g,
+      style: {
+        position: "absolute",
+        visibility: "hidden"
+      },
+      children: /* @__PURE__ */ r(S, {
+        close: () => {
+        },
+        action: () => {
+        },
+        onboarding: t
+      })
+    }), /* @__PURE__ */ r(q, {
+      style: p,
+      hiding: e.hiding,
+      children: /* @__PURE__ */ r(k, {
+        children: /* @__PURE__ */ r(S, {
+          close: e.close,
+          action: () => {
+            var n;
+            c(!0), (((n = i.current) == null ? void 0 : n.getBoundingClientRect().y) || 0) < 0 && O(i, b.size, {
+              behavior: "smooth"
+            });
+          },
+          onboarding: t
+        })
+      })
+    })]
+  });
+};
+export {
+  ne as Onboarding
+};

package/lib/app/app/Notifications/index.d.ts

@@ -0,0 +1,13 @@
+import { AppNodeRef, ScrollNodeRef, HeaderNodeRef } from '../..';
+import { ResponsiveStore } from '../../useSdkResponsive';
+import { ScrollStore } from '../../useSdkScroll';
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+
+export declare const SDKNotifications: React.FC<{
+    sdk: StreamLayerSDK;
+    scrollNode: ScrollNodeRef;
+    appNode: AppNodeRef;
+    headerNode: HeaderNodeRef;
+    scrollStore: ScrollStore;
+    responsiveStore: ResponsiveStore;
+}>;

package/lib/{ui → app}/app/Notifications/index.js

@@ -1,19 +1,19 @@
-import { jsxs as f, Fragment as D, jsx as c } from "react/jsx-runtime";
+import { jsxs as a, Fragment as D, jsx as c } from "react/jsx-runtime";
 import { cx as N } from "@linaria/core";
 import { useStore as g } from "@nanostores/react";
-import { useState as p, useMemo as T, useEffect as h, useRef as E, useCallback as w } from "react";
-import { r as O } from "../../../index-Bicco-Aq.js";
-import { eventBus as b } from "@streamlayer/sdk-web-interfaces";
-import { NotificationType as a } from "@streamlayer/sdk-web-notifications";
-import { useMastersContext as q } from "../useMastersContext.js";
-import { scrollIntoAppView as C } from "../useSdkScroll.js";
-import { QuestionTypeData as R } from "../../gamification/constants.js";
-import { Notification as V } from "../../gamification/question/notification/index.js";
-import { PredictionResult as P } from "../../gamification/question/notification/prediction-result/index.js";
+import { useAppContext as T } from "../useAppContext.js";
+import { scrollIntoAppView as E } from "../../useSdkScroll.js";
+import { useState as p, useMemo as O, useEffect as h, useRef as b, useCallback as w } from "react";
+import { r as q } from "../../../index-B1QdimmR.js";
+import { eventBus as C } from "@streamlayer/sdk-web-interfaces";
+import { NotificationType as f } from "@streamlayer/sdk-web-notifications";
+import { QuestionTypeData as R } from "../../../ui/gamification/constants.js";
+import { Notification as V } from "../../../ui/gamification/question/notification/index.js";
+import { PredictionResult as P } from "../../../ui/gamification/question/notification/prediction-result/index.js";
 import { Onboarding as x } from "./Onboarding/index.js";
 import { HiddenContainer as A, Container as B, InnerContainer as H, NotificationRefreshing as Q, Pill as U } from "./styles.js";
 const j = (o) => {
-  const [t, u] = p(0), i = E(null), d = w((r) => {
+  const [t, u] = p(0), i = b(null), d = w((r) => {
     i.current = r;
   }, []);
   h(() => {
@@ -38,14 +38,14 @@ const j = (o) => {
     keys: ["sdkInDesktopView"]
   }), {
     sdk: n
-  } = q(), [r, l, m] = j(t.id);
-  return t.type === a.QUESTION ? /* @__PURE__ */ f(D, {
+  } = T(), [r, l, m] = j(t.id);
+  return t.type === f.QUESTION ? /* @__PURE__ */ a(D, {
     children: [/* @__PURE__ */ c(A, {
       ref: r,
       children: /* @__PURE__ */ c(V, {
         ...t
       })
-    }), /* @__PURE__ */ f(B, {
+    }), /* @__PURE__ */ a(B, {
       style: {
         height: t.hiding ? 0 : l
       },
@@ -60,7 +60,7 @@ const j = (o) => {
         })
       }), /* @__PURE__ */ c(Q, {}, t.id)]
     })]
-  }) : t.type === a.QUESTION_RESOLVED && ((e = (s = t.data) == null ? void 0 : s.question) != null && e.predictionResult) ? /* @__PURE__ */ c(P, {
+  }) : t.type === f.QUESTION_RESOLVED && ((e = (s = t.data) == null ? void 0 : s.question) != null && e.predictionResult) ? /* @__PURE__ */ c(P, {
     style: {
       height: t.hiding ? 0 : l
     },
@@ -68,7 +68,7 @@ const j = (o) => {
     close: t.close,
     hiding: t.hiding,
     ...t.data.question
-  }) : t.type === a.ONBOARDING ? /* @__PURE__ */ c(x, {
+  }) : t.type === f.ONBOARDING ? /* @__PURE__ */ c(x, {
     style: {
       height: t.hiding ? 0 : l
     },
@@ -79,7 +79,7 @@ const j = (o) => {
     appNode: u,
     responsiveStore: i
   }) : null;
-}, F = "p1d7yse1", L = ({
+}, F = "p7vfi6t", L = ({
   pill: o,
   setPill: t,
   appNode: u,
@@ -88,7 +88,7 @@ const j = (o) => {
   responsiveStore: n,
   scrollStore: r
 }) => {
-  var y, k;
+  var k, y;
   const {
     screen: l
   } = g(n, {
@@ -103,14 +103,14 @@ const j = (o) => {
     n.get().sdkInDesktopView ? s < 50 && t(null) : s > -50 && t(null);
   }, [s, n, t]);
   const e = n.get().sdkInDesktopView ? u : i;
-  return !o || !e.current ? null : O.createPortal(/* @__PURE__ */ c(U, {
-    title: o.type === a.QUESTION_RESOLVED ? "Prediction result" : `New ${((k = R[(y = o.data) == null ? void 0 : y.questionType]) == null ? void 0 : k.label) || "notification"}`,
+  return !o || !e.current ? null : q.createPortal(/* @__PURE__ */ c(U, {
+    title: o.type === f.QUESTION_RESOLVED ? "Prediction result" : `New ${((y = R[(k = o.data) == null ? void 0 : k.questionType]) == null ? void 0 : y.label) || "notification"}`,
     onClick: () => {
       var I;
       n.get().sdkInDesktopView ? (I = d.current) == null || I.scrollTo({
         top: 0,
         behavior: "smooth"
-      }) : C(u, l.size, {
+      }) : E(u, l.size, {
         behavior: "smooth"
       }), t(null);
     },
@@ -124,9 +124,9 @@ const j = (o) => {
   appNode: d,
   scrollStore: n
 }) => {
-  const [r] = p(o.getNotificationsStore()), l = g(r), [m, s] = p(null), e = T(() => o.getActiveNotification(), [o, l]);
+  const [r] = p(o.getNotificationsStore()), l = g(r), [m, s] = p(null), e = O(() => o.getActiveNotification(), [o, l]);
   return h(() => {
-    e && b.emit("notification", {
+    e && C.emit("notification", {
       action: "rendered",
       payload: {
         questionId: e.data.questionId,
@@ -139,7 +139,7 @@ const j = (o) => {
     }));
   }, [e]), h(() => {
     e || s(null);
-  }, [e]), /* @__PURE__ */ f(D, {
+  }, [e]), /* @__PURE__ */ a(D, {
     children: [!m && e && /* @__PURE__ */ c(z, {
       headerNode: t,
       appNode: d,

package/lib/app/app/Notifications/styles.d.ts

@@ -0,0 +1,9 @@
+export declare const Container: any;
+export declare const InnerContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const HiddenContainer: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: import('react').ElementType;
+}>;
+export declare const NotificationRefreshing: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Pill: any;

package/lib/app/app/Notifications/styles.js

@@ -0,0 +1,31 @@
+import { styled as s } from "@linaria/react";
+import { Pill as n } from "../../../ui/gamification/question/notification/pill/index.js";
+import { ShowIn as o } from "../../../ui/show-in/index.js";
+const e = () => o, c = /* @__PURE__ */ s(e())({
+  name: "Container",
+  class: "c8ol1ve",
+  propsAsIs: !0
+}), t = /* @__PURE__ */ s("div")({
+  name: "InnerContainer",
+  class: "iqfywam",
+  propsAsIs: !1
+}), i = () => t, m = /* @__PURE__ */ s(i())({
+  name: "HiddenContainer",
+  class: "hokmtod",
+  propsAsIs: !0
+}), f = /* @__PURE__ */ s("div")({
+  name: "NotificationRefreshing",
+  class: "n192d1q8",
+  propsAsIs: !1
+}), r = () => n, d = /* @__PURE__ */ s(r())({
+  name: "Pill",
+  class: "p1lha68t",
+  propsAsIs: !0
+});
+export {
+  c as Container,
+  m as HiddenContainer,
+  t as InnerContainer,
+  f as NotificationRefreshing,
+  d as Pill
+};

package/lib/app/app/Points/index.d.ts

@@ -0,0 +1,5 @@
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+
+export declare const StreamLayerSDKPoints: React.FC<{
+    sdk: StreamLayerSDK;
+}>;

package/lib/{ui → app}/app/Points/index.js

@@ -3,7 +3,7 @@ import { useStore as i } from "@nanostores/react";
 import { useState as c, useEffect as f } from "react";
 import { FeatureStatus as p } from "@streamlayer/sdk-web-interfaces";
 import { FeatureType as S } from "@streamlayer/sdk-web-types";
-import { Points as l } from "../../gamification/points/index.js";
+import { Points as l } from "../../../ui/gamification/points/index.js";
 const a = ({ gamification: e }) => {
   const s = e.userSummary.$store, [r, u] = c(0);
   return f(() => {

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

@@ -0,0 +1,11 @@
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+
+export type AppAppChildrenProps = {
+    activateEventWithId: (event: string) => void;
+    deactivate: () => void;
+};
+export type AppAppProps = {
+    sdk: StreamLayerSDK;
+    event?: string;
+};
+export declare const App: React.FC<AppAppProps>;

package/lib/app/app/index.js

@@ -0,0 +1,101 @@
+import { jsx as i, jsxs as d } from "react/jsx-runtime";
+import { useStore as h } from "@nanostores/react";
+import { SDKContainer as A, SDKScrollContainer as C } from "../styles.js";
+import { useSdkFeature as L } from "../useSdkFeature.js";
+import { useSdkResponsive as x } from "../useSdkResponsive.js";
+import { useSdkScroll as D } from "../useSdkScroll.js";
+import { useAnalyticsListener as m, newTabLinkListener as F, appScrollListener as b, appClickListener as y } from "../../hooks/analytics.js";
+import { useRef as S, useEffect as v, useMemo as E } from "react";
+import { resetCss as u } from "../../ui/theme/theme.js";
+import { ActiveFeature as K, StandaloneFeature as j } from "./Features/index.js";
+import { SDKNavigation as R } from "./Navigation/index.js";
+import { SDKNotifications as w } from "./Notifications/index.js";
+import { useAppApp as I } from "./useApp.js";
+import { AppContext as M } from "./useAppContext.js";
+const P = ({ sdk: e, className: n, scrollStore: t, appNode: a, scrollNode: o, responsiveStore: r }) => {
+  const [, s] = L(e);
+  return /* @__PURE__ */ i(
+    K,
+    {
+      className: n,
+      scrollNode: o,
+      appNode: a,
+      scrollStore: t,
+      feature: s,
+      responsiveStore: r,
+      sdk: e
+    }
+  );
+}, V = ({ sdk: e, className: n, appNode: t, responsiveStore: a }) => {
+  const o = h(e.featuresList.getStore());
+  return o ? Array.from(o, (r) => {
+    const s = e.getFeature(r);
+    return s ? /* @__PURE__ */ i(
+      j,
+      {
+        className: n,
+        appNode: t,
+        feature: s,
+        responsiveStore: a,
+        sdk: e
+      },
+      r
+    ) : null;
+  }) : null;
+}, Z = ({ sdk: e, event: n }) => {
+  const t = S(null), a = S(null), [o] = x(t), [r, s] = D(t, o), { sdkEnabled: l, sdkReady: c, activateEventWithId: p, deactivate: f, isLogged: N } = I(e);
+  v(() => {
+    n ? (e.createEventSession(n), p(n)) : f();
+  }, [n, p, f, e]), m(t, { enabled: l, event: "click", listener: F }), m(r, {
+    enabled: l,
+    event: "scrollend",
+    listener: b,
+    useDomNode: !0
+  }), m(r, {
+    enabled: l,
+    event: "click",
+    listener: y,
+    useDomNode: !0
+  });
+  const g = E(() => ({ sdk: e }), [e]);
+  return v(() => {
+    import("./Features/Gamification/gamification-feature.js");
+  }, []), /* @__PURE__ */ i(M.Provider, { value: g, children: /* @__PURE__ */ d(A, { ref: t, children: [
+    l && /* @__PURE__ */ i(R, { className: u, sdk: e, ref: a }),
+    /* @__PURE__ */ d(C, { className: "sl-hide-on-modal", ref: r, "data-nav": l.toString(), children: [
+      c && /* @__PURE__ */ i(
+        w,
+        {
+          sdk: e,
+          scrollNode: r,
+          headerNode: a,
+          appNode: t,
+          scrollStore: s,
+          responsiveStore: o
+        }
+      ),
+      c && /* @__PURE__ */ i(
+        P,
+        {
+          scrollStore: s,
+          responsiveStore: o,
+          scrollNode: r,
+          appNode: t,
+          className: u,
+          sdk: e
+        }
+      ),
+      c && /* @__PURE__ */ i(V, { responsiveStore: o, appNode: t, className: u, sdk: e })
+    ] }),
+    l && !N && /* @__PURE__ */ i(
+      "div",
+      {
+        style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" },
+        children: "You are not logged in."
+      }
+    )
+  ] }) });
+};
+export {
+  Z as App
+};

package/lib/app/app/story/content.d.ts

@@ -0,0 +1,3 @@
+export declare const Content: React.FC<{
+    event?: string;
+}>;

package/lib/app/app/story/content.js

@@ -0,0 +1,14 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { useStreamLayer as o } from "@streamlayer/react";
+import { StreamLayerSDKAdvertisement as i } from "../Advertisement/index.js";
+const c = ({ event: e }) => {
+  const t = o();
+  return t ? /* @__PURE__ */ n("div", { children: [
+    /* @__PURE__ */ r("div", { children: "content 1" }),
+    /* @__PURE__ */ r(i, { event: e, sdk: t }),
+    /* @__PURE__ */ r("div", { children: "content 2" })
+  ] }) : null;
+};
+export {
+  c as Content
+};

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

@@ -0,0 +1,8 @@
+export declare const AppStory: React.FC<{
+    hideSdk?: boolean;
+    hideLogin?: boolean;
+    hidePoints?: boolean;
+    settings?: boolean;
+    sidebar: 'left' | 'right';
+    banner: 'top' | 'bottom';
+}>;

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

@@ -0,0 +1,96 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { styled as i } from "@linaria/react";
+import { useRef as h, useEffect as k } from "react";
+import { StreamLayerProvider as c, useStreamLayer as A } from "@streamlayer/react";
+import { App as S } from "../index.js";
+import { StreamLayerThemeProvider as b } from "../../../ui/theme/index.js";
+import { useStreamLayerDebug as C, StreamLayerDebug as g } from "../../../utils/debug/index.js";
+import { Content as L } from "./content.js";
+import { AppLogin as F } from "./login.js";
+import { Video as P } from "./video.js";
+const l = () => {
+  console.log("deep link handled cb");
+}, d = () => {
+  console.log("video player handled cb");
+}, q = ({
+  event: t
+}) => {
+  const o = A();
+  return k(() => {
+    o && o.openFeature(12);
+  }, [o]), o ? /* @__PURE__ */ e(b, {
+    children: /* @__PURE__ */ e(S, {
+      sdk: o,
+      event: t,
+      onDeepLinkHandled: l
+    })
+  }) : null;
+}, x = /* @__PURE__ */ i("div")({
+  name: "Container",
+  class: "c1a4qh28",
+  propsAsIs: !1
+}), K = /* @__PURE__ */ i("div")({
+  name: "Body",
+  class: "b9h8kuk",
+  propsAsIs: !1
+}), R = /* @__PURE__ */ i("div")({
+  name: "AppContainer",
+  class: "a1wkro2j",
+  propsAsIs: !1
+}), T = ({
+  settings: t,
+  hideSdk: o,
+  hideLogin: u,
+  hidePoints: p,
+  sidebar: m,
+  banner: f
+}) => {
+  const r = C(), a = h();
+  if (t)
+    return /* @__PURE__ */ s(c, {
+      sdkKey: r.sdkKey,
+      production: r.env === "production",
+      autoEnable: !1,
+      onDeepLinkHandled: l,
+      videoPlayerController: d,
+      children: [/* @__PURE__ */ e(F, {}), /* @__PURE__ */ e(g, {
+        ...r,
+        standalone: !0,
+        hideAuth: !0
+      })]
+    });
+  const v = () => {
+    const n = a.current, y = n.requestFullscreen || n.webkitRequestFullScreen || n.mozRequestFullScreen || n.msRequestFullscreen;
+    document.fullscreenElement ? document.exitFullscreen() : y.call(n);
+  };
+  return /* @__PURE__ */ s(c, {
+    sdkKey: r.sdkKey,
+    production: r.env === "production",
+    autoEnable: !0,
+    onDeepLinkHandled: l,
+    videoPlayerController: d,
+    children: [/* @__PURE__ */ s(K, {
+      ref: a,
+      children: [/* @__PURE__ */ e(P, {
+        event: r.event,
+        hideLogin: u,
+        toggleFullscreen: v,
+        banner: f,
+        sidebar: m,
+        hidePoints: p
+      }), !o && /* @__PURE__ */ e(x, {
+        children: /* @__PURE__ */ e(R, {
+          className: "StreamLayerSDK",
+          children: /* @__PURE__ */ e(q, {
+            event: r.event
+          })
+        })
+      })]
+    }), /* @__PURE__ */ e(L, {
+      event: r.event
+    })]
+  });
+};
+export {
+  T as AppStory
+};

package/lib/app/app/story/login.d.ts

@@ -0,0 +1 @@
+export declare const AppLogin: () => import("react/jsx-runtime").JSX.Element;

package/lib/app/app/story/login.js

@@ -0,0 +1,34 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { useState as h, useEffect as u } from "react";
+import { useStreamLayer as i } from "@streamlayer/react";
+import { storage as s } from "@streamlayer/sdk-web-core";
+const d = ({ token: o, schema: n }) => {
+  const t = i();
+  return u(() => {
+    o && n && t && t.authorizationBypass(n, o);
+  }, [o, n, t]), null;
+}, x = () => {
+  const [o, n] = h({ token: s.getExternalToken(), schema: s.getSchema() }), t = i();
+  return /* @__PURE__ */ r("div", { children: [
+    /* @__PURE__ */ r("form", { className: "auth-form", onSubmit: (a) => {
+      a.preventDefault();
+      const c = new FormData(a.currentTarget), m = c.get("token"), l = c.get("schema");
+      n({ token: m, schema: l });
+    }, children: [
+      /* @__PURE__ */ r("div", { children: [
+        /* @__PURE__ */ e("label", { htmlFor: "token", children: "token" }),
+        /* @__PURE__ */ e("input", { type: "text", id: "token", name: "token", placeholder: s.getExternalToken() })
+      ] }),
+      /* @__PURE__ */ r("div", { children: [
+        /* @__PURE__ */ e("label", { htmlFor: "schema", children: "schema" }),
+        /* @__PURE__ */ e("input", { type: "text", id: "schema", name: "schema", placeholder: s.getSchema() })
+      ] }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("button", { type: "submit", children: "submit" }) })
+    ] }),
+    /* @__PURE__ */ e(d, { token: o.token, schema: o.schema }),
+    /* @__PURE__ */ e("button", { onClick: () => t == null ? void 0 : t.logout(), children: "logout" })
+  ] });
+};
+export {
+  x as AppLogin
+};

package/lib/app/app/story/video.d.ts

@@ -0,0 +1,8 @@
+export declare const VideoPlayer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLVideoElement> & import('react').VideoHTMLAttributes<HTMLVideoElement> & Record<never, unknown>>;
+export declare const Video: React.FC<{
+    sidebar: 'left' | 'right';
+    banner: 'top' | 'bottom';
+    hidePoints?: boolean;
+    hideLogin?: boolean;
+    event?: string;
+}>;