@streamlayer/react-ui 0.96.1 → 0.96.3

package/lib/ui/navigation/button/LeaderBoard.js

@@ -3,24 +3,25 @@ import { styled as e } from "@linaria/react";
 import { SvgIcon as a } from "../../icons/index.js";
 import { Button as d } from "./index.js";
 import "react";
+import "@linaria/core";
 import "./styles.js";
-const n = () => a, c = /* @__PURE__ */ e(n())({
+const n = () => a, m = /* @__PURE__ */ e(n())({
   name: "ButtonIcon",
   class: "b180jd7l",
   propsAsIs: !0
-}), b = "leaderboard", u = (o) => {
+}), u = "leaderboard", I = (o) => {
   var t;
   return /* @__PURE__ */ r(d, {
     ...o,
     label: "Leader Board",
     id: "leaderboard",
-    icon: /* @__PURE__ */ r(c, {
+    icon: /* @__PURE__ */ r(m, {
       name: "icon-btn-leaderboard",
       "data-selected": (t = o.active) == null ? void 0 : t.toString()
     })
   });
 };
 export {
-  u as LeaderBoardButton,
-  b as LeaderBoardButtonId
+  I as LeaderBoardButton,
+  u as LeaderBoardButtonId
 };

package/lib/ui/navigation/button/index.js

@@ -1,10 +1,23 @@
-import { jsx as t, jsxs as d, Fragment as i } from "react/jsx-runtime";
-import { SButton as l, ButtonIcon as m, ButtonLabel as s } from "./styles.js";
+import { jsx as e, jsxs as l, Fragment as m } from "react/jsx-runtime";
+import { cx as d } from "@linaria/core";
+import { SButton as s, SelectedButton as u, HoverIconState as p, HoverIconLeaderboardState as h, ButtonIcon as B, ButtonLabel as f } from "./styles.js";
 import "@linaria/react";
-const p = ({ disabled: e, active: n, onClick: o, label: c, icon: r }) => /* @__PURE__ */ t(l, { onClick: o, disabled: e, "data-selected": n, children: /* @__PURE__ */ d(i, { children: [
-  r && /* @__PURE__ */ t(m, { children: r }),
-  /* @__PURE__ */ t(s, { children: c })
-] }) });
+const I = ({ disabled: n, active: r, onClick: a, label: c, icon: o, id: t }) => /* @__PURE__ */ e(
+  s,
+  {
+    onClick: a,
+    disabled: n,
+    className: d(
+      r && u,
+      !r && (t === "channels" || t === "featuredGroups") && p,
+      !r && t === "leaderboard" && h
+    ),
+    children: /* @__PURE__ */ l(m, { children: [
+      o && /* @__PURE__ */ e(B, { children: o }),
+      /* @__PURE__ */ e(f, { children: c })
+    ] })
+  }
+);
 export {
-  p as Button
+  I as Button
 };

package/lib/ui/navigation/button/styles.d.ts

@@ -2,3 +2,6 @@
 export declare const SButton: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
 export declare const ButtonIcon: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
 export declare const ButtonLabel: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const SelectedButton: import("@linaria/core").LinariaClassName;
+export declare const HoverIconState: import("@linaria/core").LinariaClassName;
+export declare const HoverIconLeaderboardState: import("@linaria/core").LinariaClassName;

package/lib/ui/navigation/button/styles.js

@@ -1,19 +1,22 @@
-import { styled as s } from "@linaria/react";
-const o = /* @__PURE__ */ s("button")({
+import { styled as t } from "@linaria/react";
+const o = /* @__PURE__ */ t("button")({
   name: "SButton",
   class: "sxxa0c",
   propsAsIs: !1
-}), n = /* @__PURE__ */ s("span")({
+}), n = /* @__PURE__ */ t("span")({
   name: "ButtonIcon",
   class: "b193dcyu",
   propsAsIs: !1
-}), a = /* @__PURE__ */ s("span")({
+}), a = /* @__PURE__ */ t("span")({
   name: "ButtonLabel",
   class: "b40tuix",
   propsAsIs: !1
-});
+}), e = "s14xk0af", c = "ha3mg7c", r = "h103yr45";
 export {
   n as ButtonIcon,
   a as ButtonLabel,
-  o as SButton
+  r as HoverIconLeaderboardState,
+  c as HoverIconState,
+  o as SButton,
+  e as SelectedButton
 };

package/lib/ui/questions/insight/index.js

@@ -1,35 +1,34 @@
-import { jsxs as c, jsx as d } from "react/jsx-runtime";
-import { QuestionImages as v } from "@streamlayer/sdk-web-types";
-import { VideoPlayer as C } from "../../video-player/index.js";
-import { Container as b, ImageContainer as e, Image as x, Content as D, Title as T, Description as j } from "./styles.js";
+import { jsxs as g, jsx as d } from "react/jsx-runtime";
+import { QuestionImages as I } from "@streamlayer/sdk-web-types";
+import { VideoPlayer as e } from "../../video-player/index.js";
+import { Container as v, ImageContainer as C, Image as b, Content as x, Title as D, Description as T } from "./styles.js";
 import "react";
 import "../../icons/index.js";
 import "@linaria/react";
 import "../../video-player/styles.js";
-const k = ({
-  imageMode: g,
+const Q = ({
   instantView: r,
   isDetail: m,
   notification: o,
-  controlVideo: u
+  controlVideo: c
 }) => {
-  const l = r == null ? void 0 : r.heading, p = r == null ? void 0 : r.body, h = l || p, y = o == null ? void 0 : o.title, I = o == null ? void 0 : o.body;
-  return /* @__PURE__ */ c(b, { children: [
+  const l = r == null ? void 0 : r.heading, p = r == null ? void 0 : r.body, h = l || p, u = o == null ? void 0 : o.title, y = o == null ? void 0 : o.body;
+  return /* @__PURE__ */ g(v, { children: [
     (r == null ? void 0 : r.video) && /* @__PURE__ */ d(
-      C,
+      e,
       {
         source: r.video.url,
         poster: r.video.thumbnailUrl,
-        controlVideo: u
+        controlVideo: c
       }
     ),
-    (r == null ? void 0 : r.image) && !(r != null && r.video) && /* @__PURE__ */ d(e, { "data-rounded": g === v.ROUNDED, children: /* @__PURE__ */ d(x, { src: r == null ? void 0 : r.image }) }),
-    /* @__PURE__ */ c(D, { children: [
-      /* @__PURE__ */ d(T, { children: m && h ? l : y }),
-      /* @__PURE__ */ d(j, { children: m && h ? p : I })
+    (r == null ? void 0 : r.image) && !(r != null && r.video) && /* @__PURE__ */ d(C, { "data-rounded": r.imageMode === I.ROUNDED, children: /* @__PURE__ */ d(b, { src: r == null ? void 0 : r.image }) }),
+    /* @__PURE__ */ g(x, { children: [
+      /* @__PURE__ */ d(D, { children: m && h ? l : u }),
+      /* @__PURE__ */ d(T, { children: m && h ? p : y })
     ] })
   ] });
 };
 export {
-  k as InsightContent
+  Q as InsightContent
 };

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.3",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -36,7 +36,7 @@
   ],
   "peerDependencies": {
     "@lottiefiles/react-lottie-player": "*",
-    "@streamlayer/sl-eslib": "^5.67.0",
+    "@streamlayer/sl-eslib": "^5.79.3",
     "nanoid": "3.3.7",
     "@types/lodash.throttle": "^4.1.9",
     "lodash.throttle": "^4.1.1",
@@ -44,17 +44,17 @@
     "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/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-interfaces": "^0.20.5",
-    "@streamlayer/sdk-web-storage": "^0.4.3",
-    "@streamlayer/sdk-web-logger": "^0.5.16",
-    "@streamlayer/sdk-web-types": "^0.22.3"
+    "@streamlayer/feature-gamification": "^0.38.0",
+    "@streamlayer/sdk-web": "^0.32.3",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.11.41",
+    "@streamlayer/sdk-web-api": "^0.23.0",
+    "@streamlayer/sdk-web-core": "^0.21.3",
+    "@streamlayer/sdk-web-features": "^0.11.23",
+    "@streamlayer/sdk-web-interfaces": "^0.20.6",
+    "@streamlayer/sdk-web-notifications": "^0.14.2",
+    "@streamlayer/sdk-web-logger": "^0.5.17",
+    "@streamlayer/sdk-web-storage": "^0.4.4",
+    "@streamlayer/sdk-web-types": "^0.22.4"
   },
   "nx": {
     "implicitDependencies": [
@@ -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.3"
   }
 }