@streamlayer/react-ui 1.2.1 → 1.3.0

package/lib/app/app/story/styles.js

@@ -1,49 +1,24 @@
 import { styled as s } from "@linaria/react";
-const n = /* @__PURE__ */ s("div")({
+const o = /* @__PURE__ */ s("div")({
   name: "PointsContainer",
   class: "p10yam33",
   propsAsIs: !1
-}), o = /* @__PURE__ */ s("div")({
+}), e = /* @__PURE__ */ s("div")({
   name: "VideoPlayerWrap",
   class: "v13be41a",
   propsAsIs: !1
-}), e = /* @__PURE__ */ s("div")({
+}), n = /* @__PURE__ */ s("div")({
   name: "VideoFrame",
   class: "v18d3gas",
   propsAsIs: !1
-}), t = /* @__PURE__ */ s("div")({
-  name: "LoginContainer",
+}), i = /* @__PURE__ */ s("a")({
+  name: "LinkToLogin",
   class: "l1aq3x2u",
   propsAsIs: !1
-}), r = /* @__PURE__ */ s("button")({
-  name: "FullscreenButton",
-  class: "f6hlblg",
-  propsAsIs: !1
-}), l = /* @__PURE__ */ s("div")({
-  name: "AdvSidebar",
-  class: "a1ir4g01",
-  propsAsIs: !1
-}), p = /* @__PURE__ */ s("div")({
-  name: "AdvContent",
-  class: "aq35lm3",
-  propsAsIs: !1
-}), i = /* @__PURE__ */ s("div")({
-  name: "AdvBanner",
-  class: "a1trv37l",
-  propsAsIs: !1
-}), d = /* @__PURE__ */ s("button")({
-  name: "PromoButton",
-  class: "plx7e50",
-  propsAsIs: !1
 });
 export {
-  i as AdvBanner,
-  p as AdvContent,
-  l as AdvSidebar,
-  r as FullscreenButton,
-  t as LoginContainer,
-  n as PointsContainer,
-  d as PromoButton,
-  e as VideoFrame,
-  o as VideoPlayerWrap
+  i as LinkToLogin,
+  o as PointsContainer,
+  n as VideoFrame,
+  e as VideoPlayerWrap
 };

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

@@ -1,10 +1 @@
-export declare const Video: React.FC<{
-    sidebar: 'left' | 'right';
-    banner: 'top' | 'bottom';
-    layoutMode: 'cover' | 'side-by-side';
-    hidePoints?: boolean;
-    fullscreen?: boolean;
-    hideLogin?: boolean;
-    event?: string;
-    promotionId?: string;
-}>;
+export declare const Video: React.FC;

package/lib/app/app/story/video.js

@@ -1,67 +1,40 @@
-import { jsxs as m, Fragment as C, jsx as r } from "react/jsx-runtime";
-import { useState as P, useCallback as L, useEffect as V } from "react";
-import { useStreamLayer as b } from "@streamlayer/react";
-import { StreamLayerSDKAdvertisement as s } from "../Advertisement/index.js";
-import { StreamLayerSDKPoints as A } from "../Points/index.js";
-import { StreamLayerThemeProvider as t } from "../../../ui/theme/index.js";
-import { AppLogin as F } from "./login.js";
-import { VideoFrame as w, PointsContainer as x, AdvSidebar as B, LoginContainer as j, VideoPlayerWrap as D, AdvBanner as K, PromoButton as R, FullscreenButton as T, AdvContent as E } from "./styles.js";
-import { useResponsive as G } from "./useResponsive.js";
-const Q = ({ toggleFullscreen: p, fullscreen: h, hideLogin: u, hidePoints: f, sidebar: i, banner: a, event: n, promotionId: c, layoutMode: o }) => {
-  const e = b(), [g, y] = P(!0), d = G(), l = L(({ muted: S }) => {
-    y(S);
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { useState as n, useCallback as m, useEffect as s } from "react";
+import { useStreamLayer as d } from "@streamlayer/react";
+import { StreamLayerSDKPoints as p } from "../Points/index.js";
+import { StreamLayerThemeProvider as u } from "../../../ui/theme/index.js";
+import { VideoFrame as c, PointsContainer as h, VideoPlayerWrap as f, LinkToLogin as y } from "./styles.js";
+const S = () => {
+  const e = d(), [t, i] = n(!0), o = m(({ muted: a }) => {
+    i(a);
   }, []);
-  V(() => (e == null || e.addVideoPlayerController(l), () => {
-    e == null || e.removeVideoPlayerController(l);
-  }), [e, l]);
-  const v = () => {
-    e == null || e.getFeature(12).background.advertisement.show(c, !0);
-  };
-  return /* @__PURE__ */ m(C, { children: [
-    /* @__PURE__ */ m(w, { "data-testid": "video-frame", style: h ? { position: "fixed", inset: 0 } : {}, children: [
-      e && /* @__PURE__ */ r(t, { children: !f && /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(A, { sdk: e }) }) }),
-      !d && /* @__PURE__ */ r(
-        B,
-        {
-          style: {
-            ...o === "cover" ? { position: "absolute" } : {},
-            ...i === "left" ? { left: 0 } : { right: 0, order: 3 }
-          },
-          children: e && /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(s, { event: n, sdk: e, sidebar: i, layoutMode: o }) })
-        }
-      ),
-      !u && /* @__PURE__ */ r(j, { children: /* @__PURE__ */ r(F, {}) }),
-      /* @__PURE__ */ m(D, { children: [
-        /* @__PURE__ */ r(
-          "video",
-          {
-            src: "https://storage.googleapis.com/cdn.streamlayer.io/assets/sdk-web/Own%20The%20Game%201080p%20RF18.mp4",
-            muted: g,
-            width: "100%",
-            height: "100%",
-            autoplay: "autoplay",
-            loop: !0,
-            playsInline: !0,
-            playing: !0
-          }
-        ),
-        /* @__PURE__ */ r(
-          K,
-          {
-            style: {
-              ...o === "cover" ? { position: "absolute" } : {},
-              ...a === "top" ? { top: 0, order: -1 } : { bottom: 0 }
-            },
-            children: e && /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(s, { event: n, sdk: e, banner: a, layoutMode: o }) })
-          }
-        )
-      ] }),
-      c && /* @__PURE__ */ r(R, { onClick: v, children: "open promotion" }),
-      /* @__PURE__ */ r(T, { onClick: p, children: "fullscreen" })
-    ] }),
-    d && /* @__PURE__ */ r(E, { children: e && /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(s, { event: n, sdk: e, sidebar: i, layoutMode: o }) }) })
+  return s(() => (e == null || e.addVideoPlayerController(o), () => {
+    e == null || e.removeVideoPlayerController(o);
+  }), [e, o]), /* @__PURE__ */ l(c, { "data-testid": "video-frame", children: [
+    e && /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r(p, { sdk: e }) }) }),
+    /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r(
+      "video",
+      {
+        src: "https://storage.googleapis.com/cdn.streamlayer.io/assets/sdk-web/Own%20The%20Game%201080p%20RF18.mp4",
+        muted: t,
+        width: "100%",
+        height: "100%",
+        autoplay: "autoplay",
+        loop: !0,
+        playsInline: !0,
+        playing: !0
+      }
+    ) }),
+    /* @__PURE__ */ r(
+      y,
+      {
+        href: "./iframe.html?args=&globals=viewport:appDesktop&id=app-login--login&viewMode=story",
+        rel: "noreferrer",
+        children: "login"
+      }
+    )
   ] });
 };
 export {
-  Q as Video
+  S as Video
 };

package/lib/app/app/useApp.d.ts

@@ -1,5 +1,4 @@
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-
 /**
  * A hook that provides functionality for managing the StreamLayerSDK in the App app.
  * - On activate FG+ button, the SDK is initialized and the FG+ overlay is opened.

package/lib/app/app/useAppContext.d.ts

@@ -1,5 +1,4 @@
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-
 export declare const AppContext: import('react').Context<{
     sdk: StreamLayerSDK | null;
 }>;

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

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

package/lib/app/login/demo.js

@@ -1,14 +1,28 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useStore as e } from "@nanostores/react";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { useStore as a } from "@nanostores/react";
 import "@streamlayer/sdk-web-anonymous-auth";
-import { Login as i } from "./index.js";
-const c = ({ sdk: o }) => e(o.getUserStore()).data ? /* @__PURE__ */ r("button", { onClick: o.logout, children: "logout" }) : /* @__PURE__ */ r(i, { login: async (n) => {
+import { Login as s } from "./index.js";
+const y = ({ sdk: o }) => a(o.getUserStore()).data ? /* @__PURE__ */ i("div", { children: [
+  /* @__PURE__ */ t(
+    "a",
+    {
+      href: "#",
+      onClick: () => {
+        window.history.go(-1);
+      },
+      children: "go back"
+    }
+  ),
+  /* @__PURE__ */ t("button", { onClick: o.logout, children: "logout" })
+] }) : /* @__PURE__ */ t(s, { login: async (r) => {
   try {
-    await o.authorizationBypass("streamlayer:streamlayer", n);
-  } catch (t) {
-    throw console.log("login err", t), t;
+    await o.authorizationBypass("streamlayer:streamlayer", r), window.history.go(-1);
+  } catch (n) {
+    throw console.log("login err", n), n;
   }
-}, anonymousLogin: o.anonymousAuthorization, host: o.host });
+}, anonymousLogin: async () => {
+  await o.anonymousAuthorization(), window.history.go(-1);
+}, host: o.host });
 export {
-  c as LoginComponent
+  y as LoginComponent
 };

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

@@ -1,6 +1,5 @@
 import { Features } from '@streamlayer/sdk-web-features';
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-
 /** Here we check data, render loaders, load data and perform some side effects for the active feature */
 export declare const FeatureProvider: React.FC<{
     feature: Features;

package/lib/app/masters/Features/Gamification/Leaderboard.d.ts

@@ -1,7 +1,6 @@
 import { ScrollNodeRef } from '../../..';
 import { ScrollStore } from '../../../useSdkScroll';
 import { Gamification } from '@streamlayer/feature-gamification';
-
 export declare const Leaderboard: React.FC<{
     gamification: Gamification;
     scrollNode: ScrollNodeRef;

package/lib/app/masters/Features/Gamification/Question.d.ts

@@ -1,5 +1,4 @@
 import { Gamification } from '@streamlayer/feature-gamification';
-
 export declare const Question: React.FC<{
     gamification: Gamification;
 }>;

package/lib/app/masters/Features/Gamification/QuestionsList.d.ts

@@ -1,5 +1,4 @@
 import { Gamification } from '@streamlayer/feature-gamification';
-
 export declare const QuestionsList: React.FC<{
     store: ReturnType<Exclude<Gamification['feedList'], undefined>['getStore']>;
     openQuestion: (questionId: string) => void;

package/lib/app/masters/Features/Gamification/Tabs.d.ts

@@ -2,7 +2,6 @@ import { AppNodeRef, ScrollNodeRef } from '../../..';
 import { ResponsiveStore } from '../../../useSdkResponsive';
 import { ScrollStore } from '../../../useSdkScroll';
 import { Gamification } from '@streamlayer/feature-gamification';
-
 export declare const Tabs: React.FC<{
     appNode: AppNodeRef;
     gamification: Gamification;

package/lib/app/masters/Features/Gamification/UserSummary.d.ts

@@ -1,5 +1,4 @@
 import { Gamification } from '@streamlayer/feature-gamification';
-
 export declare const UserSummary: React.FC<{
     userSummary: Exclude<Gamification['userSummary'], undefined>;
 }>;

package/lib/app/masters/Features/Gamification/gamification-feature.d.ts

@@ -1,3 +1,2 @@
 import { GamificationOverlay } from './';
-
 export default GamificationOverlay;

package/lib/app/masters/Features/Gamification/index.d.ts

@@ -2,7 +2,6 @@ import { AppNodeRef, ScrollNodeRef } from '../../..';
 import { ResponsiveStore } from '../../../useSdkResponsive';
 import { ScrollStore } from '../../../useSdkScroll';
 import { Gamification as GamificationClass } from '@streamlayer/feature-gamification';
-
 export declare const GamificationOverlay: React.FC<{
     gamification: GamificationClass;
     className?: string;

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

@@ -3,7 +3,6 @@ import { ResponsiveStore } from '../../useSdkResponsive';
 import { ScrollStore } from '../../useSdkScroll';
 import { Features } from '@streamlayer/sdk-web-features';
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-
 /** render feature by type */
 export declare const ActiveFeature: React.FC<{
     sdk: StreamLayerSDK;

package/lib/app/masters/Navigation/MastersNavigation/index.d.ts

@@ -2,7 +2,6 @@ import { ResponsiveStore } from '../../../useSdkResponsive';
 import { ChannelsButtonId } from '../../../../ui/navigation/button/Channels';
 import { FeaturedGroupsButtonId } from '../../../../ui/navigation/button/FeaturedGroups';
 import { LeaderBoardButtonId } from '../../../../ui/navigation/button/LeaderBoard';
-
 export { ChannelsButtonId, LeaderBoardButtonId, FeaturedGroupsButtonId };
 export type AvailableOverlays = typeof ChannelsButtonId | typeof LeaderBoardButtonId | typeof FeaturedGroupsButtonId;
 type MastersNavigationProps = {

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

@@ -1,6 +1,5 @@
 import { Notification } from '@streamlayer/sdk-web-notifications';
 import { GameSettings } from '@streamlayer/sdk-web-types';
-
 export declare const Onboarding: React.FC<{
     close: Notification['close'];
     action: Notification['action'];

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

@@ -2,7 +2,6 @@ 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;

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

@@ -2,7 +2,6 @@ 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;

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

@@ -3,7 +3,7 @@ export declare const InnerContainer: import('@linaria/react').StyledComponent<im
 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;
+    as?: 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/masters/Points/index.d.ts

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

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

@@ -1,5 +1,4 @@
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-
 export { StreamLayerMastersThemeProvider } from '../../ui/theme/masters';
 export type Overlays = {};
 export type MastersAppChildrenProps = {

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

@@ -1,6 +1,5 @@
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 import { AvailableOverlays } from './Navigation/MastersNavigation';
-
 /**
  * A hook that provides functionality for managing the StreamLayerSDK in the Masters app.
  * - On activate FG+ button, the SDK is initialized and the FG+ overlay is opened.

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

@@ -1,5 +1,4 @@
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-
 export declare const MastersContext: import('react').Context<{
     sdk: StreamLayerSDK | null;
 }>;

package/lib/app/styles.d.ts

@@ -4,17 +4,17 @@ export declare const SDKContentContainer: import('@linaria/react').StyledCompone
 export declare const SDKWhiteContainer: {
     __wyw_meta: unknown;
 } & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import('react').ElementType;
+    as?: React.ElementType;
 }>;
 export declare const TabsContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const LeaderboardContainer: {
     __wyw_meta: unknown;
 } & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import('react').ElementType;
+    as?: React.ElementType;
 }>;
 export declare const TabsNavContainer: {
     __wyw_meta: unknown;
 } & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import('react').ElementType;
+    as?: React.ElementType;
 }>;
 export declare const UserSummaryContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/app/useClipboardCopy.d.ts

@@ -1,3 +1,2 @@
 import { HeaderNodeRef, AppNodeRef } from '.';
-
 export declare const useClipboardCopy: (renderToNode: AppNodeRef | HeaderNodeRef) => [(link: string | undefined) => Promise<void>, React.ReactPortal | null];

package/lib/app/useSdkFeature.d.ts

@@ -1,7 +1,6 @@
 import { Features } from '@streamlayer/sdk-web-features';
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 import { FeatureType } from '@streamlayer/sdk-web-types';
-
 /**
  * A hook that manages the active feature of a StreamLayerSDK instance.
  * @param sdk - The StreamLayerSDK instance to manage the feature for.

package/lib/app/useSdkResponsive.d.ts

@@ -1,7 +1,6 @@
 import { AppNodeRef } from '.';
 import { MapStore } from 'nanostores';
 import { BREAKPOINTS } from '../ui/theme/constants';
-
 type BREAKPOINTS_KEYS = keyof typeof BREAKPOINTS;
 type ResponsiveData = {
     screen: {

package/lib/app/useSdkScroll.d.ts

@@ -1,7 +1,6 @@
 import { ScrollNodeRef, AppNodeRef } from '.';
 import { MapStore } from 'nanostores';
 import { ResponsiveStore } from './useSdkResponsive';
-
 type ScrollData = {
     scrollPosition: number;
     tabsShown?: boolean;