@streamlayer/react-ui 1.8.0 → 1.8.1

package/lib/app/app/Insight/index.js

@@ -1,58 +1,53 @@
-import { jsx as f } from "react/jsx-runtime";
-import { styled as m } from "@linaria/react";
-import { useStore as c } from "@nanostores/react";
-import { useRef as i, useEffect as d } from "react";
-import { FeatureType as l } from "@streamlayer/sdk-web-types";
-import { Question as Q } from "../Features/Gamification/Question.js";
-import { ShowIn as S } from "../../../ui/show-in/index.js";
-const y = () => Q, I = /* @__PURE__ */ m(y())({
+import { jsx as c } from "react/jsx-runtime";
+import { styled as Q } from "@linaria/react";
+import { useStore as d } from "@nanostores/react";
+import { useRef as i, useEffect as l } from "react";
+import { FeatureType as m } from "@streamlayer/sdk-web-types";
+import { Question as S } from "../Features/Gamification/Question.js";
+const y = () => S, I = /* @__PURE__ */ Q(y())({
   name: "QuestionWrap",
   class: "q10hhsxv",
   propsAsIs: !0
-}), h = ({
+}), b = ({
   gamification: e,
-  persistent: s,
+  persistent: o,
   hideHeader: p,
   insightId: r
 }) => {
-  const t = i(""), u = c(e.openedQuestion.$store);
-  return d(() => r ? (!s || e.isOpenedQuestion(r) || (t.current = r, e.getFeedItem(r).then((n) => {
-    t.current === r && e.openQuestion(r, n);
+  const t = i(""), n = d(e.openedQuestion.$store);
+  return l(() => r ? (!o || e.isOpenedQuestion(r) || (t.current = r, e.getFeedItem(r).then((u) => {
+    var f;
+    t.current === r && ((f = u == null ? void 0 : u.attributes) == null ? void 0 : f.attributes.case) === "insight" && e.openQuestion(r, u);
   })), () => {
     t.current = "";
   }) : (e.activeQuestionId.subscribe(({
-    data: o
+    data: s
   }) => {
-    var n;
-    o && ((n = o.feedItem) == null ? void 0 : n.type) === "insight" && (!s || e.isOpenedQuestion(o.feedItem.id) || (t.current = o.feedItem.id, e.openQuestion(o.feedItem.id, o.feedItem))), !o && t.current && (e.closeQuestion(t.current), t.current = "");
+    var u;
+    s && ((u = s.feedItem) == null ? void 0 : u.type) === "insight" && (!o || e.isOpenedQuestion(s.feedItem.id) || (t.current = s.feedItem.id, e.openQuestion(s.feedItem.id, s.feedItem))), !s && t.current && (e.closeQuestion(t.current), t.current = "");
   }), () => {
-  }), [e, s, r]), u ? /* @__PURE__ */ f(S, {
-    style: {
-      height: "100%"
-    },
-    children: /* @__PURE__ */ f(I, {
-      hideHeader: p,
-      gamification: e,
-      hideSponsor: !0
-    })
+  }), [e, o, r]), n ? /* @__PURE__ */ c(I, {
+    hideHeader: p,
+    gamification: e,
+    hideSponsor: !0
   }) : null;
-}, D = ({
+}, h = ({
   sdk: e,
-  persistent: s,
+  persistent: o,
   insightId: p,
   hideHeader: r
 }) => {
-  if (!c(e.featuresList.getStore()))
+  if (!d(e.featuresList.getStore()))
     return null;
-  const u = e.getFeature(l.GAMES);
-  return u ? /* @__PURE__ */ f(h, {
+  const n = e.getFeature(m.GAMES);
+  return n ? /* @__PURE__ */ c(b, {
     insightId: p,
-    persistent: s,
+    persistent: o,
     hideHeader: r,
-    gamification: u
+    gamification: n
   }) : null;
 };
 export {
   I as QuestionWrap,
-  D as StreamLayerSDKInsight
+  h as StreamLayerSDKInsight
 };

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

@@ -1,11 +1,11 @@
 import { jsxs as o, Fragment as d, jsx as e } from "react/jsx-runtime";
-import { useRef as l } from "react";
-import { useStreamLayer as h } from "@streamlayer/react";
+import { useRef as h } from "react";
+import { useStreamLayer as l } from "@streamlayer/react";
 import { StreamLayerSDKInsight as i } from "../../Insight/index.js";
 import { StreamLayerThemeProvider as n } from "../../../../ui/theme/index.js";
 import { VideoFrame as c, customTheme as s, VideoPlayerWrap as p, InsightContainerMobile as u, InsightContainerOverlay as f, InsightContainerLBar as g } from "./styles.js";
 const x = ({ insightId: t, layoutMode: a }) => {
-  const r = h(), m = l(null);
+  const r = l(), m = h(null);
   return /* @__PURE__ */ o(d, { children: [
     /* @__PURE__ */ o(c, { ref: m, "data-testid": "video-frame", children: [
       /* @__PURE__ */ e(a === "cover" ? f : g, { children: r && /* @__PURE__ */ e(n, { customTheme: s, children: /* @__PURE__ */ e(i, { sdk: r, insightId: t, persistent: !0 }) }) }),
@@ -15,7 +15,7 @@ const x = ({ insightId: t, layoutMode: a }) => {
           src: "https://storage.googleapis.com/cdn.streamlayer.io/assets/sdk-web/Own%20The%20Game%201080p%20RF18.mp4",
           width: "100%",
           height: "100%",
-          autoplay: "autoplay",
+          autoPlay: !0,
           loop: !0,
           playsInline: !0,
           controls: !0

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

@@ -0,0 +1,11 @@
+export declare const TGLStory: React.FC<{
+    isMobileScreen?: boolean;
+    promotionId?: string;
+    insightId?: string;
+    sdkKey?: string;
+    eventId?: string;
+    production?: boolean;
+    persistent?: boolean;
+    sidebar: 'left' | 'right';
+    banner: 'top' | 'bottom';
+}>;

package/lib/app/tgl/index.js

@@ -0,0 +1,54 @@
+import { jsx as r } from "react/jsx-runtime";
+import { styled as o } from "@linaria/react";
+import { StreamLayerProvider as l } from "@streamlayer/react";
+import { useStreamLayerDebug as u } from "../../utils/debug/index.js";
+import { Video as v } from "./video.js";
+const f = /* @__PURE__ */ o("div")({
+  name: "Body",
+  class: "b1ssmzei",
+  propsAsIs: !1
+}), b = /* @__PURE__ */ o("div")({
+  name: "Main",
+  class: "me6bye3",
+  propsAsIs: !1
+}), k = ({
+  isMobileScreen: s,
+  persistent: t,
+  insightId: n,
+  promotionId: i,
+  sdkKey: d,
+  eventId: m,
+  sidebar: a,
+  production: p,
+  banner: c,
+  layoutMode: y = "side-by-side"
+}) => {
+  const e = u({
+    sdkKey: d,
+    eventId: m,
+    production: p
+  });
+  return /* @__PURE__ */ r(b, {
+    children: /* @__PURE__ */ r(l, {
+      sdkKey: e.sdkKey,
+      event: e.event,
+      production: e.env === "production",
+      autoEnable: !0,
+      children: /* @__PURE__ */ r(f, {
+        children: /* @__PURE__ */ r(v, {
+          event: e.event,
+          banner: c,
+          sidebar: a,
+          layoutMode: y,
+          promotionId: i,
+          isMobileScreen: s,
+          persistent: t,
+          insightId: n
+        })
+      })
+    })
+  });
+};
+export {
+  k as TGLStory
+};

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

@@ -0,0 +1,7 @@
+export declare const customTheme: import('@linaria/core').LinariaClassName;
+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 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: any;

package/lib/app/tgl/styles.js

@@ -0,0 +1,36 @@
+import { styled as s } from "@linaria/react";
+import { Button as o } from "../../ui/button/index.js";
+const r = "c2zt16z", t = /* @__PURE__ */ s("div")({
+  name: "VideoPlayerWrap",
+  class: "v1a2i6l5",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("div")({
+  name: "VideoFrame",
+  class: "v11p2oa",
+  propsAsIs: !1
+}), d = /* @__PURE__ */ s("div")({
+  name: "AdvSidebar",
+  class: "a4rnnox",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("div")({
+  name: "AdvContent",
+  class: "a1t6jakx",
+  propsAsIs: !1
+}), m = /* @__PURE__ */ s("div")({
+  name: "AdvBanner",
+  class: "ah6jyrg",
+  propsAsIs: !1
+}), a = () => o, i = /* @__PURE__ */ s(a())({
+  name: "PromoButton",
+  class: "p12yifsu",
+  propsAsIs: !0
+});
+export {
+  m as AdvBanner,
+  c as AdvContent,
+  d as AdvSidebar,
+  i as PromoButton,
+  p as VideoFrame,
+  t as VideoPlayerWrap,
+  r as customTheme
+};

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

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

package/lib/app/tgl/video.js

@@ -0,0 +1,105 @@
+import { jsxs as o, Fragment as P, jsx as r } from "react/jsx-runtime";
+import { useRef as V, useState as T, useCallback as w, useEffect as x } from "react";
+import { useStreamLayer as A } from "@streamlayer/react";
+import { StreamLayerSDKAdvertisement as s } from "../app/Advertisement/index.js";
+import { StreamLayerSDKInsight as g } from "../app/Insight/index.js";
+import { StreamLayerThemeProvider as h } from "../../ui/theme/index.js";
+import { PromoButton as S, VideoFrame as F, AdvSidebar as L, customTheme as u, VideoPlayerWrap as k, AdvBanner as R, AdvContent as b } from "./styles.js";
+const O = ({ isMobileScreen: m, sidebar: l, banner: p, event: n, persistent: t, insightId: f, promotionId: c, layoutMode: a }) => {
+  const e = A(), v = V(null), [y, C] = T(!0), d = w(({ muted: i }) => {
+    C(i);
+  }, []);
+  return x(() => (e == null || e.addVideoPlayerController(d), () => {
+    e == null || e.removeVideoPlayerController(d);
+  }), [e, d]), /* @__PURE__ */ o(P, { children: [
+    c && /* @__PURE__ */ o(S, { onClick: () => {
+      var i;
+      (i = v.current) == null || i.scrollIntoView({ behavior: "smooth" }), setTimeout(() => {
+        e == null || e.getFeature(12).background.advertisement.show(c);
+      }, 200);
+    }, children: [
+      "open promotion: ",
+      c
+    ] }),
+    /* @__PURE__ */ o(F, { ref: v, "data-testid": "video-frame", children: [
+      /* @__PURE__ */ r(
+        L,
+        {
+          style: {
+            ...a === "cover" ? { position: "absolute" } : {},
+            ...l === "left" ? { left: 0 } : { right: 0, order: 3 },
+            ...m ? { maxWidth: "calc(300px + env(safe-area-inset-left))" } : {}
+          },
+          children: e && /* @__PURE__ */ o(h, { customTheme: u, children: [
+            /* @__PURE__ */ r(
+              s,
+              {
+                isMobileScreen: m,
+                event: n,
+                sdk: e,
+                sidebar: l,
+                layoutMode: a,
+                persistent: t,
+                skipTypeCheck: !0
+              }
+            ),
+            /* @__PURE__ */ r(g, { insightId: f, sdk: e, persistent: t })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ o(k, { 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",
+            muted: y,
+            width: "100%",
+            height: "100%",
+            autoplay: "autoplay",
+            loop: !0,
+            playsInline: !0,
+            controls: !0
+          }
+        ) }),
+        /* @__PURE__ */ r(
+          R,
+          {
+            style: {
+              ...a === "cover" ? { position: "absolute" } : {},
+              ...p === "top" ? { top: 0, order: -1 } : { bottom: 0 }
+            },
+            children: e && /* @__PURE__ */ r(h, { customTheme: u, children: /* @__PURE__ */ r(
+              s,
+              {
+                isMobileScreen: m,
+                event: n,
+                sdk: e,
+                banner: p,
+                layoutMode: a,
+                persistent: t
+              }
+            ) })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ r(b, { children: e && /* @__PURE__ */ o(h, { customTheme: u, children: [
+      /* @__PURE__ */ r(
+        s,
+        {
+          isMobileScreen: m,
+          event: n,
+          sdk: e,
+          sidebar: l,
+          layoutMode: a,
+          persistent: t,
+          skipTypeCheck: !0
+        }
+      ),
+      /* @__PURE__ */ r(g, { insightId: f, sdk: e, persistent: t })
+    ] }) })
+  ] });
+};
+export {
+  O as Video
+};