@streamlayer/react-ui 1.11.4 → 1.12.0

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

@@ -1,62 +1,65 @@
-import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import { styled as t } from "@linaria/react";
-import { useEffect as i } from "react";
-import { StreamLayerProvider as l, useStreamLayer as p, StreamLayerSDKEvent as m } from "@streamlayer/react";
-import { App as c } from "../index.js";
-import { StreamLayerThemeProvider as f } from "../../../ui/theme/index.js";
-import { useStreamLayerDebug as u } from "../../../utils/debug/index.js";
-import { Video as y } from "./video.js";
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import { styled as s } from "@linaria/react";
+import { useEffect as l } from "react";
+import { StreamLayerProvider as p, useStreamLayer as m, StreamLayerSDKEvent as c } from "@streamlayer/react";
+import { App as f } from "../index.js";
+import { StreamLayerThemeProvider as u } from "../../../ui/theme/index.js";
+import { useStreamLayerDebug as y } from "../../../utils/debug/index.js";
+import { Video as h } from "./video.js";
 const a = () => {
   console.log("deep link handled cb");
-}, h = () => {
+}, k = () => {
   console.log("video player handled cb");
 }, v = ({
   event: o
 }) => {
-  const e = p();
-  return i(() => {
+  const e = m();
+  return l(() => {
     e && e.openFeature(12);
-  }, [e, o]), e ? /* @__PURE__ */ s(f, {
-    children: [/* @__PURE__ */ r(m, {
+  }, [e, o]), e ? /* @__PURE__ */ t(u, {
+    customTheme: "dark",
+    children: [/* @__PURE__ */ r(c, {
       event: o
-    }), /* @__PURE__ */ r(c, {
+    }), /* @__PURE__ */ r(f, {
       sdk: e,
       event: o,
       onDeepLinkHandled: a
     })]
   }) : null;
-}, A = /* @__PURE__ */ t("div")({
+}, A = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c1a4qh28",
   propsAsIs: !1
-}), S = /* @__PURE__ */ t("div")({
+}), S = /* @__PURE__ */ s("div")({
   name: "Body",
   class: "b9h8kuk",
   propsAsIs: !1
-}), k = /* @__PURE__ */ t("div")({
+}), C = /* @__PURE__ */ s("div")({
   name: "AppContainer",
   class: "a1wkro2j",
   propsAsIs: !1
-}), j = ({
+}), E = ({
   sdkKey: o,
   eventId: e,
-  production: d
+  production: d,
+  darkMode: i
 }) => {
-  const n = u({
+  const n = y({
     sdkKey: o,
     eventId: e,
     production: d
   });
-  return /* @__PURE__ */ r(l, {
+  return /* @__PURE__ */ r(p, {
     sdkKey: n.sdkKey,
     production: n.env === "production",
     autoEnable: !0,
     onDeepLinkHandled: a,
-    videoPlayerController: h,
+    videoPlayerController: k,
     withAd: !1,
-    children: /* @__PURE__ */ s(S, {
-      children: [/* @__PURE__ */ r(y, {}), /* @__PURE__ */ r(A, {
-        children: /* @__PURE__ */ r(k, {
+    children: /* @__PURE__ */ t(S, {
+      className: i ? "dark" : "",
+      children: [/* @__PURE__ */ r(h, {}), /* @__PURE__ */ r(A, {
+        children: /* @__PURE__ */ r(C, {
           className: "StreamLayerSDK",
           children: /* @__PURE__ */ r(v, {
             event: n.event
@@ -67,5 +70,5 @@ const a = () => {
   });
 };
 export {
-  j as AppStory
+  E as AppStory
 };

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

@@ -1,55 +1,55 @@
-import { jsxs as n, Fragment as g, jsx as r } from "react/jsx-runtime";
-import { useRef as V, useState as y, useCallback as w, useEffect as x } from "react";
-import { useStreamLayer as P } from "@streamlayer/react";
-import { StreamLayerSDKAdvertisement as c } from "../../Advertisement/index.js";
+import { jsxs as a, Fragment as g, jsx as r } from "react/jsx-runtime";
+import { useRef as y, useState as x, useCallback as P, useEffect as V } from "react";
+import { useStreamLayer as A } from "@streamlayer/react";
+import { StreamLayerSDKAdvertisement as d } from "../../Advertisement/index.js";
 import { StreamLayerThemeProvider as h } from "../../../../ui/theme/index.js";
-import { PromoButton as b, VideoFrame as F, AdvSidebar as S, VideoPlayerWrap as A, AdvBanner as B, AdvContent as C } from "./styles.js";
-const E = ({ isMobileScreen: o, skipAutoClose: a, sidebar: s, banner: p, event: d, promotionId: l, layoutMode: t }) => {
-  const e = P(), u = V(null), [f, v] = y(!0), m = w(({ muted: i }) => {
+import { PromoButton as C, VideoFrame as w, AdvSidebar as F, VideoPlayerWrap as L, AdvBanner as S, AdvContent as T } from "./styles.js";
+const K = ({ isMobileScreen: o, skipAutoClose: n, sidebar: l, banner: p, event: m, promotionId: s, layoutMode: t }) => {
+  const e = A(), u = y(null), [f, v] = x(!1), c = P(({ muted: i }) => {
     v(i);
   }, []);
-  return x(() => (e == null || e.addVideoPlayerController(m), () => {
-    e == null || e.removeVideoPlayerController(m);
-  }), [e, m]), /* @__PURE__ */ n(g, { children: [
-    l && /* @__PURE__ */ n(b, { onClick: () => {
+  return V(() => (e == null || e.addVideoPlayerController(c), () => {
+    e == null || e.removeVideoPlayerController(c);
+  }), [e, c]), /* @__PURE__ */ a(g, { children: [
+    s && /* @__PURE__ */ a(C, { onClick: () => {
       var i;
       (i = u.current) == null || i.scrollIntoView({ behavior: "smooth" }), setTimeout(() => {
-        e == null || e.getFeature(12).background.advertisement.show(l);
+        e == null || e.getFeature(12).background.advertisement.show(s);
       }, 200);
     }, children: [
       "open promotion: ",
-      l
+      s
     ] }),
-    /* @__PURE__ */ r("h3", { children: "Sidebar On Video View and Banner" }),
-    /* @__PURE__ */ r("p", { children: "On desktop, the width limit is 344px, and for mobile screens, it is 300px as designed." }),
-    /* @__PURE__ */ n(F, { ref: u, "data-testid": "video-frame", children: [
+    /* @__PURE__ */ a(w, { ref: u, "data-testid": "video-frame", children: [
       /* @__PURE__ */ r(
-        S,
+        F,
         {
           style: {
             ...t === "cover" ? { position: "absolute" } : {},
-            ...s === "left" ? { left: 0 } : { right: 0, order: 3 },
+            ...l === "left" ? { left: 0 } : { right: 0, order: 3 },
             ...o ? { maxWidth: "calc(300px + env(safe-area-inset-left))" } : {}
           },
           children: e && /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r(
-            c,
+            d,
             {
               isMobileScreen: o,
-              event: d,
+              event: m,
               sdk: e,
-              sidebar: s,
+              sidebar: l,
               layoutMode: t,
-              skipAutoClose: a,
+              skipAutoClose: n,
+              skipTypeCheck: !0,
+              externalAd: !0,
               persistent: !0
             }
           ) })
         }
       ),
-      /* @__PURE__ */ n(A, { children: [
+      /* @__PURE__ */ a(L, { children: [
         /* @__PURE__ */ r("div", { className: "divAnchor", children: /* @__PURE__ */ r(
           "video",
           {
-            src: "https://storage.googleapis.com/cdn.streamlayer.io/assets/sdk-web/Own%20The%20Game%201080p%20RF18.mp4",
+            src: "https://storage.googleapis.com/gvabox/media/samples/stock.mp4",
             muted: f,
             width: "100%",
             height: "100%",
@@ -60,21 +60,21 @@ const E = ({ isMobileScreen: o, skipAutoClose: a, sidebar: s, banner: p, event:
           }
         ) }),
         /* @__PURE__ */ r(
-          B,
+          S,
           {
             style: {
               ...t === "cover" ? { position: "absolute" } : {},
               ...p === "top" ? { top: 0, order: -1 } : { bottom: 0 }
             },
             children: e && /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r(
-              c,
+              d,
               {
                 isMobileScreen: o,
-                event: d,
+                event: m,
                 sdk: e,
                 banner: p,
                 layoutMode: t,
-                skipAutoClose: a,
+                skipAutoClose: n,
                 persistent: !0
               }
             ) })
@@ -82,20 +82,20 @@ const E = ({ isMobileScreen: o, skipAutoClose: a, sidebar: s, banner: p, event:
         )
       ] })
     ] }),
-    /* @__PURE__ */ r(C, { children: e && /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r(
-      c,
+    /* @__PURE__ */ r(T, { children: e && /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r(
+      d,
       {
         isMobileScreen: o,
-        event: d,
+        event: m,
         sdk: e,
-        sidebar: s,
+        sidebar: l,
         layoutMode: t,
-        skipAutoClose: a,
+        skipAutoClose: n,
         persistent: !0
       }
     ) }) })
   ] });
 };
 export {
-  E as Video
+  K as Video
 };

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

@@ -6,6 +6,11 @@ export declare const SDKWhiteContainer: {
 } & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
     as?: React.ElementType;
 }>;
+export declare const SDKSummaryContainer: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    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;

package/lib/app/app/styles.js

@@ -1,44 +1,49 @@
 import { styled as s } from "@linaria/react";
-const i = /* @__PURE__ */ s("div")({
+const p = /* @__PURE__ */ s("div")({
   name: "SDKContainer",
   class: "sopqfe6",
   propsAsIs: !1
-}), p = /* @__PURE__ */ s("div")({
+}), c = /* @__PURE__ */ s("div")({
   name: "SDKScrollContainer",
   class: "s102vcph",
   propsAsIs: !1
-}), e = /* @__PURE__ */ s("div")({
+}), n = /* @__PURE__ */ s("div")({
   name: "SDKContentContainer",
   class: "s1meqjjv",
   propsAsIs: !1
-}), a = () => e, n = /* @__PURE__ */ s(a())({
+}), e = () => n, a = /* @__PURE__ */ s(e())({
   name: "SDKWhiteContainer",
   class: "s1burm22",
   propsAsIs: !0
-}), c = /* @__PURE__ */ s("div")({
+}), r = () => a, m = /* @__PURE__ */ s(r())({
+  name: "SDKSummaryContainer",
+  class: "sm5r3j5",
+  propsAsIs: !0
+}), l = /* @__PURE__ */ s("div")({
   name: "TabsContainer",
-  class: "tm5r3j5",
+  class: "tysxwr6",
   propsAsIs: !1
-}), o = () => n, l = /* @__PURE__ */ s(o())({
+}), o = () => n, C = /* @__PURE__ */ s(o())({
   name: "LeaderboardContainer",
-  class: "lysxwr6",
+  class: "l9er3b1",
   propsAsIs: !0
-}), r = () => n, C = /* @__PURE__ */ s(r())({
+}), t = () => a, S = /* @__PURE__ */ s(t())({
   name: "TabsNavContainer",
-  class: "t9er3b1",
+  class: "t19dtrb3",
   propsAsIs: !0
-}), m = /* @__PURE__ */ s("div")({
+}), d = /* @__PURE__ */ s("div")({
   name: "UserSummaryContainer",
-  class: "u19dtrb3",
+  class: "u1552n3j",
   propsAsIs: !1
 });
 export {
-  l as LeaderboardContainer,
-  i as SDKContainer,
-  e as SDKContentContainer,
-  p as SDKScrollContainer,
-  n as SDKWhiteContainer,
-  c as TabsContainer,
-  C as TabsNavContainer,
-  m as UserSummaryContainer
+  C as LeaderboardContainer,
+  p as SDKContainer,
+  n as SDKContentContainer,
+  c as SDKScrollContainer,
+  m as SDKSummaryContainer,
+  a as SDKWhiteContainer,
+  l as TabsContainer,
+  S as TabsNavContainer,
+  d as UserSummaryContainer
 };