@streamlayer/react-ui 1.1.0 → 1.2.0

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

@@ -1,8 +1,10 @@
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 
+export declare const AdvertisementUIWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const StreamLayerSDKAdvertisement: React.FC<{
     sdk: StreamLayerSDK;
     event?: string;
     sidebar?: 'left' | 'right';
     banner?: 'top' | 'bottom';
+    layoutMode?: 'cover' | 'side-by-side';
 }>;

package/lib/app/app/Advertisement/index.js

@@ -1,38 +1,89 @@
 import { jsx as s } from "react/jsx-runtime";
+import { styled as c } from "@linaria/react";
 import { useStore as m } from "@nanostores/react";
-import { useAnalyticsListener as c } from "../../../hooks/analytics.js";
-import { useEffect as l, useRef as f, useMemo as u } from "react";
-import { eventBus as d } from "@streamlayer/sdk-web-interfaces";
-import { FeatureType as v } from "@streamlayer/sdk-web-types";
-import { useAppApp as p } from "../useApp.js";
-import { AdvertisementUI as A } from "../../../ui/advertisement/index.js";
-const g = (e) => {
+import { useAnalyticsListener as f } from "../../../hooks/analytics.js";
+import { useEffect as u, useRef as v, useMemo as d } from "react";
+import { eventBus as p } from "@streamlayer/sdk-web-interfaces";
+import { FeatureType as A } from "@streamlayer/sdk-web-types";
+import { useAppApp as y } from "../useApp.js";
+import { AdvertisementUI as g } from "../../../ui/advertisement/index.js";
+const h = /* @__PURE__ */ c("div")({
+  name: "AdvertisementUIWrap",
+  class: "aa6pjif",
+  propsAsIs: !1
+}), S = (e) => {
   const t = e.target;
-  t instanceof HTMLAnchorElement && t.target === "_blank" && t.getAttribute("data-analytics") === "web-link" && d.emit("poll", {
+  t instanceof HTMLAnchorElement && t.target === "_blank" && t.getAttribute("data-analytics") === "web-link" && p.emit("poll", {
     action: "navigated",
     payload: {}
   });
-}, S = ({ gamification: e, sidebar: t, banner: n }) => {
-  const r = f(null), o = m(e.advertisement.$list), i = u(
+}, L = ({
+  gamification: e,
+  layoutMode: t,
+  sidebar: r,
+  banner: i
+}) => {
+  const o = v(null), a = m(e.advertisement.$list), n = d(
     () => e.advertisement.getActiveAdvertisement(),
     // fire getActiveNotification when notifications were updated
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [o]
+    [a]
   );
-  return c(r, { enabled: !!i, event: "click", listener: g }), i ? /* @__PURE__ */ s("div", { ref: r, children: /* @__PURE__ */ s(A, { sidebar: t, banner: n, advertisement: i }) }) : null;
-}, F = ({ sdk: e, sidebar: t, banner: n, event: r }) => {
-  const { deactivate: o } = p(e);
-  l(() => {
-    r ? e.createEventSession(r) : o();
-  }, [r, o, e]);
-  const i = m(e.featuresList.getStore());
-  if (t && n)
-    return /* @__PURE__ */ s("div", { style: { color: "red" }, children: "define either sidebar or banner, not both." });
-  if (!i)
+  return f(o, {
+    enabled: !!n,
+    event: "click",
+    listener: S
+  }), n ? /* @__PURE__ */ s(h, {
+    ref: o,
+    style: {
+      height: !i && !r ? "auto" : "100%"
+    },
+    children: /* @__PURE__ */ s(g, {
+      sidebar: r,
+      banner: i,
+      advertisement: n,
+      layoutMode: t
+    })
+  }) : null;
+}, K = ({
+  sdk: e,
+  sidebar: t,
+  banner: r,
+  event: i,
+  layoutMode: o
+}) => {
+  const {
+    deactivate: a
+  } = y(e);
+  u(() => {
+    i ? e.createEventSession(i) : a();
+  }, [i, a, e]);
+  const n = m(e.featuresList.getStore());
+  if (t && r)
+    return /* @__PURE__ */ s("div", {
+      style: {
+        color: "red"
+      },
+      children: "define either sidebar or banner, not both."
+    });
+  if (!t && !r && o)
+    return /* @__PURE__ */ s("div", {
+      style: {
+        color: "red"
+      },
+      children: "layoutMode property unavailable for the overlay mode."
+    });
+  if (!n)
     return null;
-  const a = e.getFeature(v.GAMES);
-  return a ? /* @__PURE__ */ s(S, { gamification: a, sidebar: t, banner: n }) : null;
+  const l = e.getFeature(A.GAMES);
+  return l ? /* @__PURE__ */ s(L, {
+    gamification: l,
+    sidebar: t,
+    banner: r,
+    layoutMode: o
+  }) : null;
 };
 export {
-  F as StreamLayerSDKAdvertisement
+  h as AdvertisementUIWrap,
+  K as StreamLayerSDKAdvertisement
 };

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

@@ -1,3 +1,4 @@
+export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Content: React.FC<{
     event?: string;
 }>;

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

@@ -1,14 +1,30 @@
-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;
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { styled as s } from "@linaria/react";
+import { useStreamLayer as m } from "@streamlayer/react";
+import { StreamLayerSDKAdvertisement as o } from "../Advertisement/index.js";
+import { theme as i } from "../../../ui/theme/theme.js";
+const a = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "c15py6sl",
+  propsAsIs: !1
+}), c = ({
+  event: r
+}) => {
+  const n = m();
+  return n ? /* @__PURE__ */ e(a, {
+    className: i,
+    "data-testid": "overlay",
+    children: [/* @__PURE__ */ e("div", {
+      children: ["Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ", /* @__PURE__ */ t("br", {}), "-------------"]
+    }), /* @__PURE__ */ t(o, {
+      event: r,
+      sdk: n
+    }), /* @__PURE__ */ e("div", {
+      children: ["-------------", /* @__PURE__ */ t("br", {}), "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."]
+    })]
+  }) : null;
 };
 export {
+  a as Container,
   c as Content
 };

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

@@ -3,6 +3,8 @@ export declare const AppStory: React.FC<{
     hideLogin?: boolean;
     hidePoints?: boolean;
     settings?: boolean;
+    promotionId?: string;
     sidebar: 'left' | 'right';
     banner: 'top' | 'bottom';
+    layoutMode: 'cover' | 'side-by-side';
 }>;

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

@@ -1,96 +1,113 @@
-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 { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { styled as d } from "@linaria/react";
+import { useRef as A, useState as L, useEffect as m } from "react";
+import t from "screenfull";
+import { StreamLayerProvider as u, useStreamLayer as C } 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";
+import { StreamLayerThemeProvider as E } from "../../../ui/theme/index.js";
+import { useStreamLayerDebug as F, StreamLayerDebug as x } from "../../../utils/debug/index.js";
+import { Content as P } from "./content.js";
+import { AppLogin as K } from "./login.js";
+import { Video as D } from "./video.js";
 const l = () => {
   console.log("deep link handled cb");
-}, d = () => {
+}, p = () => {
   console.log("video player handled cb");
-}, q = ({
-  event: t
+}, I = ({
+  event: s
 }) => {
-  const o = A();
-  return k(() => {
-    o && o.openFeature(12);
-  }, [o]), o ? /* @__PURE__ */ e(b, {
+  const r = C();
+  return m(() => {
+    r && r.openFeature(12);
+  }, [r]), r ? /* @__PURE__ */ e(E, {
     children: /* @__PURE__ */ e(S, {
-      sdk: o,
-      event: t,
+      sdk: r,
+      event: s,
       onDeepLinkHandled: l
     })
   }) : null;
-}, x = /* @__PURE__ */ i("div")({
+}, j = /* @__PURE__ */ d("div")({
   name: "Container",
   class: "c1a4qh28",
   propsAsIs: !1
-}), K = /* @__PURE__ */ i("div")({
+}), T = /* @__PURE__ */ d("div")({
   name: "Body",
   class: "b9h8kuk",
   propsAsIs: !1
-}), R = /* @__PURE__ */ i("div")({
+}), q = /* @__PURE__ */ d("div")({
   name: "AppContainer",
   class: "a1wkro2j",
   propsAsIs: !1
-}), T = ({
-  settings: t,
-  hideSdk: o,
-  hideLogin: u,
-  hidePoints: p,
-  sidebar: m,
-  banner: f
+}), Q = ({
+  settings: s,
+  hideSdk: r,
+  hideLogin: f,
+  promotionId: y,
+  hidePoints: v,
+  sidebar: h,
+  banner: b,
+  layoutMode: g
 }) => {
-  const r = C(), a = h();
-  if (t)
-    return /* @__PURE__ */ s(c, {
-      sdkKey: r.sdkKey,
-      production: r.env === "production",
+  const o = F(), a = A(), [w, c] = L(!1);
+  if (m(() => {
+    const n = () => {
+      window.orientation !== 0 ? (document.body.style.height = window.outerHeight + 50 + "px", document.body.style.overflow = "hidden", c(!0)) : (document.body.style.height = "auto", document.body.style.overflow = "auto", c(!1)), setTimeout(function() {
+        window.scrollTo(0, 0);
+      }, 1e3);
+    };
+    return t.isEnabled || window.addEventListener("orientationchange", n), () => {
+      t.isEnabled || window.removeEventListener("orientationchange", n);
+    };
+  }, []), s)
+    return /* @__PURE__ */ i(u, {
+      sdkKey: o.sdkKey,
+      production: o.env === "production",
       autoEnable: !1,
       onDeepLinkHandled: l,
-      videoPlayerController: d,
-      children: [/* @__PURE__ */ e(F, {}), /* @__PURE__ */ e(g, {
-        ...r,
+      videoPlayerController: p,
+      children: [/* @__PURE__ */ e(K, {}), /* @__PURE__ */ e(x, {
+        ...o,
         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);
+  const k = () => {
+    const n = a.current;
+    t.isEnabled || alert("Fullscreen is not supported in your browser, rotate your device to landscape mode"), t.isFullscreen ? t.exit() : t.request(n, {
+      navigationUI: "hide"
+    });
   };
-  return /* @__PURE__ */ s(c, {
-    sdkKey: r.sdkKey,
-    production: r.env === "production",
+  return /* @__PURE__ */ i(u, {
+    sdkKey: o.sdkKey,
+    production: o.env === "production",
     autoEnable: !0,
     onDeepLinkHandled: l,
-    videoPlayerController: d,
-    children: [/* @__PURE__ */ s(K, {
+    videoPlayerController: p,
+    children: [/* @__PURE__ */ i(T, {
       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, {
+      children: [/* @__PURE__ */ e(D, {
+        event: o.event,
+        hideLogin: f,
+        toggleFullscreen: k,
+        banner: b,
+        sidebar: h,
+        hidePoints: v,
+        layoutMode: g,
+        promotionId: y,
+        fullscreen: w
+      }), !r && /* @__PURE__ */ e(j, {
+        children: /* @__PURE__ */ e(q, {
           className: "StreamLayerSDK",
-          children: /* @__PURE__ */ e(q, {
-            event: r.event
+          children: /* @__PURE__ */ e(I, {
+            event: o.event
           })
         })
       })]
-    }), /* @__PURE__ */ e(L, {
-      event: r.event
+    }), /* @__PURE__ */ e(P, {
+      event: o.event
     })]
   });
 };
 export {
-  T as AppStory
+  Q as AppStory
 };

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

@@ -0,0 +1,9 @@
+export declare const PointsContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const VideoPlayerWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const VideoFrame: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const LoginContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const FullscreenButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const AdvSidebar: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const AdvContent: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const AdvBanner: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const PromoButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;

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

@@ -0,0 +1,49 @@
+import { styled as s } from "@linaria/react";
+const n = /* @__PURE__ */ s("div")({
+  name: "PointsContainer",
+  class: "p10yam33",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "VideoPlayerWrap",
+  class: "v13be41a",
+  propsAsIs: !1
+}), e = /* @__PURE__ */ s("div")({
+  name: "VideoFrame",
+  class: "v18d3gas",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "LoginContainer",
+  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
+};

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

@@ -0,0 +1 @@
+export declare const useResponsive: () => boolean;

package/lib/app/app/story/useResponsive.js

@@ -0,0 +1,15 @@
+import { useState as s, useEffect as i } from "react";
+const t = () => window.innerWidth < 768, c = () => {
+  const [e, r] = s(t());
+  return i(() => {
+    const n = () => {
+      r(t());
+    };
+    return window.addEventListener("resize", n), () => {
+      window.removeEventListener("resize", n);
+    };
+  }, []), e;
+};
+export {
+  c as useResponsive
+};

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

@@ -1,8 +1,10 @@
-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';
+    layoutMode: 'cover' | 'side-by-side';
     hidePoints?: boolean;
+    fullscreen?: boolean;
     hideLogin?: boolean;
     event?: string;
+    promotionId?: string;
 }>;

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

@@ -1,96 +1,67 @@
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
-import { styled as s } from "@linaria/react";
-import { useState as v, useCallback as y, useEffect as A } from "react";
-import { useStreamLayer as g } from "@streamlayer/react";
-import { StreamLayerSDKAdvertisement as i } from "../Advertisement/index.js";
-import { StreamLayerSDKPoints as h } from "../Points/index.js";
-import { StreamLayerThemeProvider as S } from "../../../ui/theme/index.js";
-import { AppLogin as C } from "./login.js";
-const P = /* @__PURE__ */ s("div")({
-  name: "PointsContainer",
-  class: "pvt3dlv",
-  propsAsIs: !1
-}), V = /* @__PURE__ */ s("video")({
-  name: "VideoPlayer",
-  class: "v1jvtznw",
-  propsAsIs: !1
-}), B = /* @__PURE__ */ s("div")({
-  name: "VideoFrame",
-  class: "v13gbl05",
-  propsAsIs: !1
-}), I = /* @__PURE__ */ s("div")({
-  name: "LoginContainer",
-  class: "l65nrgs",
-  propsAsIs: !1
-}), L = /* @__PURE__ */ s("button")({
-  name: "FullscreenButton",
-  class: "f1jxc34p",
-  propsAsIs: !1
-}), b = /* @__PURE__ */ s("div")({
-  name: "AdvSidebar",
-  class: "ayq9x9m",
-  propsAsIs: !1
-}), x = /* @__PURE__ */ s("div")({
-  name: "AdvBanner",
-  class: "am90851",
-  propsAsIs: !1
-}), E = ({
-  toggleFullscreen: m,
-  hideLogin: c,
-  hidePoints: d,
-  sidebar: t,
-  banner: n,
-  event: a
-}) => {
-  const e = g(), [p, f] = v(!1), r = y(({
-    muted: u
-  }) => {
-    f(u);
+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);
   }, []);
-  return A(() => (e == null || e.addVideoPlayerController(r), () => {
-    e == null || e.removeVideoPlayerController(r);
-  }), [e, r]), /* @__PURE__ */ l(B, {
-    children: [e && /* @__PURE__ */ l(S, {
-      children: [!d && /* @__PURE__ */ o(P, {
-        children: /* @__PURE__ */ o(h, {
-          sdk: e
-        })
-      }), /* @__PURE__ */ o(b, {
-        style: t === "left" ? {
-          left: 0
-        } : {
-          right: 0
-        },
-        children: /* @__PURE__ */ o(i, {
-          event: a,
-          sdk: e,
-          sidebar: t
-        })
-      }), /* @__PURE__ */ o(x, {
-        style: n === "top" ? {
-          top: 0
-        } : {
-          bottom: 0
-        },
-        children: /* @__PURE__ */ o(i, {
-          event: a,
-          sdk: e,
-          banner: n
-        })
-      })]
-    }), !c && /* @__PURE__ */ o(I, {
-      children: /* @__PURE__ */ o(C, {})
-    }), /* @__PURE__ */ o(V, {
-      src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
-      muted: p,
-      controls: !0
-    }), /* @__PURE__ */ o(L, {
-      onClick: m,
-      children: "fullscreen"
-    })]
-  });
+  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 }) }) })
+  ] });
 };
 export {
-  E as Video,
-  V as VideoPlayer
+  Q as Video
 };