@streamlayer/react-ui 0.96.1 → 0.96.2

package/lib/ui/gamification/question/insight/index.js

@@ -1,17 +1,22 @@
-import { jsxs as m, jsx as i } from "react/jsx-runtime";
-import { InsightContent as n } from "../../../questions/insight/index.js";
-import { Container as p, ActionBtn as c } from "./styles.js";
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { InsightContent as p } from "../../../questions/insight/index.js";
+import { pauseAllVideos as l } from "../../../video-player/index.js";
+import { Container as n, ActionBtn as e } from "./styles.js";
 import "@streamlayer/sdk-web-types";
-import "../../../video-player/index.js";
+import "../../../questions/insight/styles.js";
+import "@linaria/react";
 import "react";
 import "../../../icons/index.js";
-import "@linaria/react";
 import "../../../video-player/styles.js";
-import "../../../questions/insight/styles.js";
-const d = ({ openInsight: r, questionId: t, ...o }) => /* @__PURE__ */ m(p, { children: [
-  /* @__PURE__ */ i(n, { questionId: t, ...o }),
-  r && /* @__PURE__ */ i(c, { onClick: () => r(t), children: "View Insight" })
-] });
+const k = ({ openInsight: r, questionId: o, ...i }) => {
+  const m = () => {
+    l(), r == null || r(o);
+  };
+  return /* @__PURE__ */ c(n, { children: [
+    /* @__PURE__ */ t(p, { questionId: o, ...i }),
+    r && /* @__PURE__ */ t(e, { onClick: m, children: "View Insight" })
+  ] });
+};
 export {
-  d as Insight
+  k as Insight
 };

package/lib/ui/gamification/question/notification/index.js

@@ -1,5 +1,5 @@
-import { jsxs as a, jsx as o, Fragment as d } from "react/jsx-runtime";
-import { QuestionType as t } from "@streamlayer/sdk-web-types";
+import { jsxs as a, jsx as t, Fragment as d } from "react/jsx-runtime";
+import { QuestionType as o } from "@streamlayer/sdk-web-types";
 import { QuestionTypeData as T } from "../../constants.js";
 import { Insight as f } from "./insight/index.js";
 import { Container as h, CloseIconWrap as E, CloseIcon as I, Header as C, TypeIcon as s, TypeName as A, Question as W, AnswerButton as x } from "./styles.js";
@@ -16,37 +16,37 @@ import "../../../../utils/common.js";
 import "../../../questions/twitter/account/styles.js";
 import "../../../questions/twitter/styles.js";
 import "./tweet/styles.js";
-const G = ({
-  close: n,
-  action: i,
-  controlVideo: l,
-  data: { questionType: r, question: m, insight: e, tweet: c }
+const J = ({
+  close: l,
+  action: m,
+  controlVideo: n,
+  data: { questionType: r, question: i, insight: e, tweet: c }
 }) => {
   const p = T[r];
-  return p ? /* @__PURE__ */ a(h, { style: r === t.TWEET ? { paddingTop: "12px" } : {}, children: [
-    /* @__PURE__ */ o(E, { onClick: n, children: /* @__PURE__ */ o(I, { name: "icon-cross" }) }),
-    r !== t.TWEET && /* @__PURE__ */ a(C, { children: [
-      /* @__PURE__ */ o(
+  return p ? /* @__PURE__ */ a(h, { style: r === o.TWEET ? { paddingTop: "12px" } : {}, children: [
+    /* @__PURE__ */ t(E, { onClick: l, children: /* @__PURE__ */ t(I, { name: "icon-cross" }) }),
+    r !== o.TWEET && /* @__PURE__ */ a(C, { children: [
+      /* @__PURE__ */ t(
         s,
         {
-          "data-type-trivia": r === t.TRIVIA,
-          "data-type-poll": r === t.POLL,
+          "data-type-trivia": r === o.TRIVIA,
+          "data-type-poll": r === o.POLL,
           name: p.iconName
         }
       ),
-      /* @__PURE__ */ o(A, { children: p.label })
+      /* @__PURE__ */ t(A, { children: p.label })
     ] }),
-    r === t.FACTOID && /* @__PURE__ */ o(f, { ...e, action: i, controlVideo: l }),
-    r === t.TWEET && // ToDo: connect with real Api data
+    r === o.FACTOID && /* @__PURE__ */ t(f, { ...e, action: m, controlVideo: n }),
+    r === o.TWEET && // ToDo: connect with real Api data
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    /* @__PURE__ */ o(D, { ...c, action: i }),
-    r !== t.FACTOID && r !== t.TWEET && /* @__PURE__ */ a(d, { children: [
-      /* @__PURE__ */ o(W, { children: m == null ? void 0 : m.title }),
-      /* @__PURE__ */ o(x, { onClick: i, children: "Answer" })
+    /* @__PURE__ */ t(D, { ...c, action: m, controlVideo: n }),
+    r !== o.FACTOID && r !== o.TWEET && /* @__PURE__ */ a(d, { children: [
+      /* @__PURE__ */ t(W, { children: i == null ? void 0 : i.title }),
+      /* @__PURE__ */ t(x, { onClick: m, children: "Answer" })
     ] })
   ] }) : null;
 };
 export {
-  G as Notification
+  J as Notification
 };

package/lib/ui/gamification/question/twitter/index.js

@@ -1,22 +1,27 @@
-import { jsxs as r, jsx as i } from "react/jsx-runtime";
-import { TwitterContent as m } from "../../../questions/twitter/index.js";
-import { Container as e, Quote as n, ActionButton as p } from "./styles.js";
-import "../../../video-player/index.js";
-import "react";
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { TwitterContent as n } from "../../../questions/twitter/index.js";
+import { pauseAllVideos as l } from "../../../video-player/index.js";
+import { Container as c, Quote as d, ActionButton as h } from "./styles.js";
+import "../../../questions/twitter/account/index.js";
 import "../../../icons/index.js";
 import "@linaria/react";
-import "../../../video-player/styles.js";
-import "../../../questions/twitter/account/index.js";
+import "react";
 import "../../../../utils/common.js";
 import "../../../questions/twitter/account/styles.js";
 import "../../../questions/twitter/styles.js";
+import "../../../video-player/styles.js";
 import "../../../button/index.js";
 import "../../../button/styles.js";
-const k = ({ openTweet: o, ...t }) => /* @__PURE__ */ r(e, { children: [
-  t.title && /* @__PURE__ */ i(n, { children: t.title }),
-  /* @__PURE__ */ i(m, { ...t }),
-  o && /* @__PURE__ */ i(p, { onClick: () => o(t.tweetId), children: "View Insight" })
-] });
+const B = ({ openTweet: t, ...i }) => {
+  const o = () => {
+    l(), t == null || t(i.tweetId);
+  };
+  return /* @__PURE__ */ m(c, { children: [
+    i.title && /* @__PURE__ */ r(d, { children: i.title }),
+    /* @__PURE__ */ r(n, { ...i }),
+    t && /* @__PURE__ */ r(h, { onClick: o, children: "View Insight" })
+  ] });
+};
 export {
-  k as Twitter
+  B as Twitter
 };

package/lib/ui/video-player/index.d.ts

@@ -7,6 +7,7 @@ export type VideoPlayerProps = {
     source?: string;
     controlVideo?: (props: ControlVideoProps) => void;
 };
+export declare const pauseAllVideos: () => void;
 /**
  * VideoPlayer component for playing videos with a poster image.
  *

package/lib/ui/video-player/index.js

@@ -1,62 +1,69 @@
-import { jsxs as h, jsx as o } from "react/jsx-runtime";
-import { useRef as O, useState as d, useEffect as w } from "react";
+import { jsxs as w, jsx as i } from "react/jsx-runtime";
+import { useRef as C, useState as v, useCallback as p, useEffect as d } from "react";
 import { SvgIcon as E } from "../icons/index.js";
-import { Container as I, Player as S, Poster as x, Control as C } from "./styles.js";
+import { Container as I, Player as S, Poster as x, Control as L } from "./styles.js";
 import "@linaria/react";
-const L = (t, c) => {
-  for (const s of t)
-    s.isIntersecting || s.target instanceof HTMLVideoElement && !s.target.paused && (c.unobserve(s.target), s.target.pause());
-}, g = new IntersectionObserver(L, { threshold: 0.5 }), f = /* @__PURE__ */ new Set(), T = (t) => {
-  g.observe(t), f.add(t);
-}, u = (t) => {
-  g.unobserve(t), f.delete(t);
-}, q = ({ poster: t, source: c, controlVideo: s }) => {
-  const e = O(null), [l, a] = d(!1), [b, m] = d(!0), p = () => {
-    s == null || s({ muted: !0 });
-  }, v = () => {
-    s == null || s({ muted: !1 });
-  }, y = () => {
-    const n = e == null ? void 0 : e.current;
-    if (n)
+const T = (s, c) => {
+  for (const t of s)
+    t.isIntersecting || t.target instanceof HTMLVideoElement && !t.target.paused && (c.unobserve(t.target), t.target.pause());
+}, g = new IntersectionObserver(T, { threshold: 0.5 }), f = /* @__PURE__ */ new Set(), j = (s) => {
+  g.observe(s), f.add(s);
+}, n = (s) => {
+  g.unobserve(s), f.delete(s);
+}, k = () => {
+  for (const s of f)
+    s instanceof HTMLVideoElement && !s.paused && (s.pause(), n(s));
+}, z = ({ poster: s, source: c, controlVideo: t }) => {
+  const e = C(null), [l, o] = v(!1), [b, m] = v(!0), y = p(() => {
+    t == null || t({ muted: !0 });
+  }, [t]), u = p(() => {
+    t == null || t({ muted: !1 });
+  }, [t]), P = () => {
+    const r = e == null ? void 0 : e.current;
+    if (r)
       if (l)
-        n.pause(), e.current && u(e.current);
+        r.pause(), e.current && n(e.current);
       else {
-        const i = e == null ? void 0 : e.current;
-        if (!i)
+        const a = e == null ? void 0 : e.current;
+        if (!a)
           return;
-        for (const r of f)
-          r !== i && r instanceof HTMLVideoElement && !r.paused && (r.pause(), u(r));
-        T(i), i.play().catch((r) => console.log(r)), m(!1);
+        k(), j(a), a.play().catch((O) => console.log(O)), m(!1);
       }
-  }, P = () => {
-    var n;
-    e.current && u(e.current), (n = e == null ? void 0 : e.current) == null || n.load(), m(!0);
+  }, h = () => {
+    var r;
+    e.current && n(e.current), (r = e == null ? void 0 : e.current) == null || r.load(), m(!0);
   };
-  return w(() => {
-    e.current && u(e.current);
-  }, []), /* @__PURE__ */ h(I, { onClick: y, children: [
-    /* @__PURE__ */ o(
+  return d(() => {
+    e.current && n(e.current);
+  }, []), d(() => {
+    const r = e == null ? void 0 : e.current;
+    return () => {
+      r && (r.paused || u(), n(r));
+    };
+  }, [u]), /* @__PURE__ */ w(I, { onClick: P, children: [
+    /* @__PURE__ */ i(
       S,
       {
         ref: e,
         src: c,
         onPlay: () => {
-          p(), a(!0);
+          y(), o(!0);
         },
         onPause: () => {
-          v(), a(!1);
+          u(), o(!1);
         },
         onEnded: () => {
-          v(), a(!1), P();
+          u(), o(!1), h();
         },
         style: { visibility: b ? "hidden" : "visible" },
         playsInline: !0
       }
     ),
-    /* @__PURE__ */ o(x, { src: t, style: { visibility: b ? "visible" : "hidden" } }),
-    /* @__PURE__ */ o(C, { children: !l && /* @__PURE__ */ o(E, { name: "icon-play" }) })
+    /* @__PURE__ */ i(x, { src: s, style: { visibility: b ? "visible" : "hidden" } }),
+    /* @__PURE__ */ i(L, { children: !l && /* @__PURE__ */ i(E, { name: "icon-play" }) })
   ] });
 };
 export {
-  q as VideoPlayer
+  z as VideoPlayer,
+  k as pauseAllVideos
 };

package/lib/utils/createDemo.js

@@ -23,7 +23,12 @@ function K({
   const s = u(() => new x(), []), [p, f] = i(s.getEnv()), [c, v] = i(s.getSdkKey() || "set-sdk-key"), [m, k] = i(s.getEvent() || ""), S = u(() => {
     const d = /* @__PURE__ */ new Set();
     return d.add(D), d;
-  }, []), t = l(c, S, p === "production", a);
+  }, []), t = l({
+    sdkKey: c,
+    plugins: S,
+    production: p === "production",
+    autoEnable: a
+  });
   return E(() => {
     m && t && t.createEventSession(m);
   }, [t]), /* @__PURE__ */ g(y, { children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.96.1",
+  "version": "0.96.2",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -44,16 +44,16 @@
     "react-virtualized-auto-sizer": "^1.0.21",
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^0.37.3",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.11.39",
+    "@streamlayer/feature-gamification": "^0.37.4",
+    "@streamlayer/sdk-web": "^0.32.2",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.11.40",
     "@streamlayer/sdk-web-api": "^0.22.0",
-    "@streamlayer/sdk-web": "^0.32.1",
-    "@streamlayer/sdk-web-core": "^0.21.1",
-    "@streamlayer/sdk-web-features": "^0.11.21",
-    "@streamlayer/sdk-web-notifications": "^0.14.1",
+    "@streamlayer/sdk-web-core": "^0.21.2",
+    "@streamlayer/sdk-web-features": "^0.11.22",
     "@streamlayer/sdk-web-interfaces": "^0.20.5",
-    "@streamlayer/sdk-web-storage": "^0.4.3",
+    "@streamlayer/sdk-web-notifications": "^0.14.1",
     "@streamlayer/sdk-web-logger": "^0.5.16",
+    "@streamlayer/sdk-web-storage": "^0.4.3",
     "@streamlayer/sdk-web-types": "^0.22.3"
   },
   "nx": {
@@ -95,6 +95,6 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^4.3.1",
-    "@streamlayer/react": "^0.40.1"
+    "@streamlayer/react": "^0.40.2"
   }
 }