@streamlayer/react-ui 1.3.2 → 1.4.0

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

@@ -1,4 +1,4 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
 import { styled as u } from "@linaria/react";
 import { useStore as f } from "@nanostores/react";
 import { useAnalyticsListener as p } from "../../../hooks/analytics.js";
@@ -34,7 +34,7 @@ const L = /* @__PURE__ */ u("div")({
   layoutMode: e,
   sidebar: i,
   banner: r,
-  isMobileScreen: c,
+  isMobileScreen: l,
   persistent: o
 }) => {
   const a = A(null), s = f(t.advertisement.$list), n = y(
@@ -43,29 +43,31 @@ const L = /* @__PURE__ */ u("div")({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [s, o]
   );
-  return p(a, {
+  p(a, {
     enabled: !!n,
     event: "click",
     listener: E
-  }), n ? /* @__PURE__ */ m(L, {
+  });
+  const m = !r && !i;
+  return n ? /* @__PURE__ */ c(L, {
     ref: a,
     style: {
-      height: !r && !i ? "auto" : "100%"
+      height: m ? "auto" : "100%"
     },
-    className: c ? "mobile-view" : "",
-    children: /* @__PURE__ */ m(h, {
+    className: l ? "mobile-view" : "",
+    children: /* @__PURE__ */ c(h, {
       sidebar: i,
       banner: r,
       advertisement: n,
       layoutMode: e
     })
   }) : null;
-}, O = ({
+}, P = ({
   sdk: t,
   sidebar: e,
   banner: i,
   event: r,
-  layoutMode: c,
+  layoutMode: l,
   isMobileScreen: o,
   persistent: a
 }) => {
@@ -77,7 +79,7 @@ const L = /* @__PURE__ */ u("div")({
   }, [r, s, t]);
   const n = f(t.featuresList.getStore());
   if (e && i)
-    return /* @__PURE__ */ m("div", {
+    return /* @__PURE__ */ c("div", {
       style: {
         color: "red"
       },
@@ -85,17 +87,17 @@ const L = /* @__PURE__ */ u("div")({
     });
   if (!n)
     return null;
-  const l = t.getFeature(g.GAMES);
-  return l ? /* @__PURE__ */ m(I, {
-    gamification: l,
+  const m = t.getFeature(g.GAMES);
+  return m ? /* @__PURE__ */ c(I, {
+    gamification: m,
     sidebar: e,
     banner: i,
-    layoutMode: c,
+    layoutMode: l,
     isMobileScreen: o,
     persistent: a
   }) : null;
 };
 export {
   L as AdvertisementUIWrap,
-  O as StreamLayerSDKAdvertisement
+  P as StreamLayerSDKAdvertisement
 };

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

@@ -15,4 +15,5 @@ export type StreamLayerSDKInsightProps = {
 };
 export declare const StreamLayerSDKInsight: React.FC<StreamLayerSDKInsightProps & {
     sdk: StreamLayerSDK;
+    insightId?: string;
 }>;

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

@@ -1,62 +1,69 @@
-import { jsx as p } from "react/jsx-runtime";
-import { styled as S } from "@linaria/react";
-import { useStore as m } from "@nanostores/react";
-import { useEffect as c } from "react";
-import { FeatureType as h, QuestionStatus as l } from "@streamlayer/sdk-web-types";
-import { Question as d } from "../Features/Gamification/Question.js";
-import { useAppApp as Q } from "../useApp.js";
-import { ShowIn as I } from "../../../ui/show-in/index.js";
-const a = () => d, y = /* @__PURE__ */ S(a())({
+import { jsx as i } from "react/jsx-runtime";
+import { styled as d } from "@linaria/react";
+import { useStore as S } from "@nanostores/react";
+import { useEffect as l, useRef as Q } from "react";
+import { FeatureType as h, QuestionStatus as w } from "@streamlayer/sdk-web-types";
+import { Question as y } from "../Features/Gamification/Question.js";
+import { useAppApp as A } from "../useApp.js";
+import { ShowIn as V } from "../../../ui/show-in/index.js";
+const v = () => y, x = /* @__PURE__ */ d(v())({
   name: "QuestionWrap",
   class: "q10hhsxv",
   propsAsIs: !0
-}), A = ({
+}), E = ({
   gamification: e,
   persistent: t,
-  hideHeader: n
+  hideHeader: f,
+  insightId: r
 }) => {
-  const i = m(e.openedQuestion.$store);
-  return c(() => e.feedList.getStore().subscribe(({
-    data: o
+  const s = Q(""), n = S(e.openedQuestion.$store);
+  return l(() => r ? (!t || e.isOpenedQuestion(r) || (s.current = r, e.getFeedItem(r).then((o) => {
+    s.current === r && e.openQuestion(r, o);
+  })), () => {
+    s.current = "";
+  }) : e.feedList.getStore().subscribe(({
+    data: u
   }) => {
-    if (o) {
-      const s = o, r = s == null ? void 0 : s.find(({
-        type: f,
-        attributes: u
-      }) => f === "insight" && (u == null ? void 0 : u.status) === l.ACTIVE);
-      r && (!t || e.isOpenedQuestion(r.id) || e.openQuestion(r.id, r));
+    if (u) {
+      const o = u, p = o == null ? void 0 : o.find(({
+        type: m,
+        attributes: c
+      }) => m === "insight" && (c == null ? void 0 : c.status) === w.ACTIVE);
+      p && (!t || e.isOpenedQuestion(p.id) || e.openQuestion(p.id, p));
     }
-  }), [e, t]), i ? /* @__PURE__ */ p(I, {
+  }), [e, t, r]), n ? /* @__PURE__ */ i(V, {
     style: {
       height: "100%"
     },
-    children: /* @__PURE__ */ p(y, {
-      hideHeader: n,
+    children: /* @__PURE__ */ i(x, {
+      hideHeader: f,
       gamification: e,
       hideSponsor: !0
     })
   }) : null;
-}, F = ({
+}, j = ({
   sdk: e,
   event: t,
-  persistent: n,
-  hideHeader: i
+  persistent: f,
+  insightId: r,
+  hideHeader: s
 }) => {
   const {
-    deactivate: o
-  } = Q(e);
-  if (c(() => {
-    t ? e.createEventSession(t) : o();
-  }, [t, o, e]), !m(e.featuresList.getStore()))
+    deactivate: n
+  } = A(e);
+  if (l(() => {
+    t ? e.createEventSession(t) : n();
+  }, [t, n, e]), !S(e.featuresList.getStore()))
     return null;
-  const r = e.getFeature(h.GAMES);
-  return r ? /* @__PURE__ */ p(A, {
-    persistent: n,
-    hideHeader: i,
-    gamification: r
+  const o = e.getFeature(h.GAMES);
+  return o ? /* @__PURE__ */ i(E, {
+    insightId: r,
+    persistent: f,
+    hideHeader: s,
+    gamification: o
   }) : null;
 };
 export {
-  y as QuestionWrap,
-  F as StreamLayerSDKInsight
+  x as QuestionWrap,
+  j as StreamLayerSDKInsight
 };

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

@@ -1,6 +1,7 @@
 export declare const InsightStory: React.FC<{
     sdkKey?: string;
     eventId?: string;
+    insightId?: string;
     production?: boolean;
     onlyInsight?: boolean;
     hideHeader?: boolean;

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

@@ -1,57 +1,62 @@
 import { jsx as e } from "react/jsx-runtime";
 import { styled as d } from "@linaria/react";
-import { StreamLayerProvider as a, useStreamLayer as u } from "@streamlayer/react";
-import { StreamLayerSDKInsight as p } from "../../Insight/index.js";
-import { StreamLayerThemeProvider as c } from "../../../../ui/theme/index.js";
-import { useStreamLayerDebug as y } from "../../../../utils/debug/index.js";
-import { customTheme as f } from "./styles.js";
-import { Video as h } from "./video.js";
-const l = /* @__PURE__ */ d("div")({
+import { StreamLayerProvider as u, useStreamLayer as p } from "@streamlayer/react";
+import { StreamLayerSDKInsight as c } from "../../Insight/index.js";
+import { StreamLayerThemeProvider as y } from "../../../../ui/theme/index.js";
+import { useStreamLayerDebug as f } from "../../../../utils/debug/index.js";
+import { customTheme as l } from "./styles.js";
+import { Video as v } from "./video.js";
+const h = /* @__PURE__ */ d("div")({
   name: "Body",
   class: "buit6hv",
   propsAsIs: !1
-}), v = ({
+}), S = ({
   event: o,
-  hideHeader: m
+  hideHeader: m,
+  insightId: n
 }) => {
-  const r = u();
-  return r ? /* @__PURE__ */ e(c, {
-    customTheme: f,
-    children: /* @__PURE__ */ e(p, {
+  const r = p();
+  return r ? /* @__PURE__ */ e(y, {
+    customTheme: l,
+    children: /* @__PURE__ */ e(c, {
       hideHeader: m,
       event: o,
       sdk: r,
+      insightId: n,
       persistent: !0
     })
   }) : null;
-}, B = ({
+}, D = ({
   sdkKey: o,
   eventId: m,
-  layoutMode: r,
-  production: n,
-  onlyInsight: s,
-  hideHeader: i
+  layoutMode: n,
+  insightId: r,
+  production: s,
+  onlyInsight: i,
+  hideHeader: a
 }) => {
-  const t = y({
+  const t = f({
     sdkKey: o,
     eventId: m,
-    production: n
+    production: s
   });
-  return /* @__PURE__ */ e(a, {
+  return /* @__PURE__ */ e(u, {
     sdkKey: t.sdkKey,
     production: t.env === "production",
     autoEnable: !0,
-    children: s ? /* @__PURE__ */ e(v, {
-      hideHeader: i,
+    children: i ? /* @__PURE__ */ e(S, {
+      insightId: r,
+      hideHeader: a,
       event: t.event
-    }) : /* @__PURE__ */ e(l, {
-      children: /* @__PURE__ */ e(h, {
-        layoutMode: r,
+    }) : /* @__PURE__ */ e(h, {
+      children: /* @__PURE__ */ e(v, {
+        insightId: r,
+        layoutMode: n,
         event: t.event
       })
     })
   });
 };
 export {
-  B as InsightStory
+  D as InsightStory
 };

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

@@ -1,4 +1,5 @@
 export declare const Video: React.FC<{
     event?: string;
+    insightId?: string;
     layoutMode?: 'side-by-side' | 'cover';
 }>;

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

@@ -1,15 +1,15 @@
-import { jsxs as o, Fragment as d, jsx as e } from "react/jsx-runtime";
+import { jsxs as i, Fragment as l, jsx as e } from "react/jsx-runtime";
 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 g, InsightContainerLBar as f } from "./styles.js";
-const x = ({ event: t, layoutMode: a }) => {
-  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" ? g : f, { children: r && /* @__PURE__ */ e(n, { customTheme: s, children: /* @__PURE__ */ e(i, { event: t, sdk: r, persistent: !0 }) }) }),
-      /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e("div", { className: "divAnchor", children: /* @__PURE__ */ e(
+import { useStreamLayer as c } from "@streamlayer/react";
+import { StreamLayerSDKInsight as n } from "../../Insight/index.js";
+import { StreamLayerThemeProvider as s } from "../../../../ui/theme/index.js";
+import { VideoFrame as p, customTheme as a, VideoPlayerWrap as u, InsightContainerMobile as f, InsightContainerOverlay as g, InsightContainerLBar as y } from "./styles.js";
+const F = ({ event: t, insightId: o, layoutMode: m }) => {
+  const r = c(), d = h(null);
+  return /* @__PURE__ */ i(l, { children: [
+    /* @__PURE__ */ i(p, { ref: d, "data-testid": "video-frame", children: [
+      /* @__PURE__ */ e(m === "cover" ? g : y, { children: r && /* @__PURE__ */ e(s, { customTheme: a, children: /* @__PURE__ */ e(n, { event: t, sdk: r, insightId: o, persistent: !0 }) }) }),
+      /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e("div", { className: "divAnchor", children: /* @__PURE__ */ e(
         "video",
         {
           src: "https://storage.googleapis.com/cdn.streamlayer.io/assets/sdk-web/Own%20The%20Game%201080p%20RF18.mp4",
@@ -22,9 +22,9 @@ const x = ({ event: t, layoutMode: a }) => {
         }
       ) }) })
     ] }),
-    /* @__PURE__ */ e(u, { children: r && /* @__PURE__ */ e(n, { customTheme: s, children: /* @__PURE__ */ e(i, { event: t, sdk: r, persistent: !0 }) }) })
+    /* @__PURE__ */ e(f, { children: r && /* @__PURE__ */ e(s, { customTheme: a, children: /* @__PURE__ */ e(n, { event: t, sdk: r, insightId: o, persistent: !0 }) }) })
   ] });
 };
 export {
-  x as Video
+  F as Video
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -46,7 +46,7 @@
   ],
   "peerDependencies": {
     "@lottiefiles/react-lottie-player": "^3.5.4",
-    "@streamlayer/sl-eslib": "^5.117.0",
+    "@streamlayer/sl-eslib": "^5.122.0",
     "@types/lodash.throttle": "^4.1.9",
     "lodash.throttle": "^4.1.1",
     "nanoid": "3.3.7",
@@ -54,18 +54,18 @@
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^1.3.2",
-    "@streamlayer/sdk-web": "^1.1.2",
-    "@streamlayer/sdk-web-api": "^1.2.2",
-    "@streamlayer/sdk-web-anonymous-auth": "^1.0.7",
-    "@streamlayer/sdk-web-analytics": "^1.1.2",
-    "@streamlayer/sdk-web-features": "^1.0.7",
-    "@streamlayer/sdk-web-core": "^1.1.2",
-    "@streamlayer/sdk-web-interfaces": "^1.1.2",
-    "@streamlayer/sdk-web-logger": "^1.0.7",
-    "@streamlayer/sdk-web-notifications": "^1.1.2",
-    "@streamlayer/sdk-web-storage": "^1.0.7",
-    "@streamlayer/sdk-web-types": "^1.2.2"
+    "@streamlayer/sdk-web": "^1.2.0",
+    "@streamlayer/sdk-web-analytics": "^1.2.0",
+    "@streamlayer/feature-gamification": "^1.4.0",
+    "@streamlayer/sdk-web-anonymous-auth": "^1.0.9",
+    "@streamlayer/sdk-web-api": "^1.3.0",
+    "@streamlayer/sdk-web-features": "^1.0.9",
+    "@streamlayer/sdk-web-core": "^1.2.0",
+    "@streamlayer/sdk-web-interfaces": "^1.1.4",
+    "@streamlayer/sdk-web-logger": "^1.0.9",
+    "@streamlayer/sdk-web-notifications": "^1.1.4",
+    "@streamlayer/sdk-web-storage": "^1.0.9",
+    "@streamlayer/sdk-web-types": "^1.3.0"
   },
   "nx": {
     "implicitDependencies": [
@@ -106,6 +106,6 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@streamlayer/react": "^1.1.6"
+    "@streamlayer/react": "^1.2.0"
   }
 }