@streamlayer/react-ui 0.96.3 → 0.97.0

package/lib/ui/timer/index.js

@@ -1,41 +1,45 @@
 import { jsx as R } from "react/jsx-runtime";
-import { styled as E } from "@linaria/react";
-import { useState as S, useCallback as n } from "react";
-import { CountdownCircleTimer as A } from "react-countdown-circle-timer";
-import { COLORS as o } from "../theme/constants.js";
-const O = [o.PRIMARY_GREEN1, o.SECONDARY_RED1, o.SECONDARY_RED1, o.NEUTRALS_GRAY3], _ = [10, 10, 1, 0], N = /* @__PURE__ */ E("div")({
+import { styled as _ } from "@linaria/react";
+import { useState as c, useEffect as a, useCallback as n } from "react";
+import { CountdownCircleTimer as N } from "react-countdown-circle-timer";
+import { COLORS as t } from "../theme/constants.js";
+const D = [t.PRIMARY_GREEN1, t.SECONDARY_RED1, t.SECONDARY_RED1, t.NEUTRALS_GRAY3], T = [10, 10, 1, 0], Y = /* @__PURE__ */ _("div")({
   name: "RemainingTime",
   class: "r165427",
   propsAsIs: !1
-}), f = o.SECONDARY_GREEN6, c = o.SECONDARY_RED3, D = o.NEUTRALS_GRAY3, d = ({
-  isPlaying: l = !0,
-  duration: e = 30,
-  onTimerExpired: t
+}), h = t.SECONDARY_GREEN6, l = t.SECONDARY_RED3, m = t.NEUTRALS_GRAY3, G = ({
+  isPlaying: i = !0,
+  duration: o = 30,
+  onTimerExpired: e
 }) => {
-  const [i, s] = S(e > 10 ? f : c), m = ({
+  const [C, s] = c(o > 10 ? h : l), [E, S] = c(2);
+  a(() => {
+    o === 0 && (S(0), s(m));
+  }, [o]);
+  const f = ({
     remainingTime: r
-  }) => /* @__PURE__ */ R(N, {
-    children: r
-  }), C = n(() => {
-    t == null || t(), s(D);
-  }, [t, s]), a = n((r) => {
-    r === 10 && s(c);
+  }) => /* @__PURE__ */ R(Y, {
+    children: o === 0 ? 0 : r
+  }), A = n(() => {
+    e == null || e(), s(m);
+  }, [e, s]), O = n((r) => {
+    r === 10 && s(l);
   }, [s]);
-  return /* @__PURE__ */ R(A, {
-    isPlaying: l,
-    duration: e,
-    colors: O,
-    colorsTime: _,
+  return /* @__PURE__ */ R(N, {
+    isPlaying: i,
+    duration: o,
+    colors: D,
+    colorsTime: T,
     size: 32,
-    strokeWidth: 2,
+    strokeWidth: E,
     trailStrokeWidth: 2,
-    trailColor: i,
-    onComplete: C,
-    onUpdate: a,
-    children: m
+    trailColor: C,
+    onComplete: A,
+    onUpdate: O,
+    children: f
   });
 };
 export {
-  N as RemainingTime,
-  d as Timer
+  Y as RemainingTime,
+  G as Timer
 };

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

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

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

@@ -3,3 +3,4 @@ export declare const Container: import("@linaria/react").StyledComponent<import(
 export declare const Player: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLVideoElement> & import("react").VideoHTMLAttributes<HTMLVideoElement> & Record<never, unknown>>;
 export declare const Poster: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
 export declare const Control: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ToggleIconPause: import("@linaria/core").LinariaClassName;

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

@@ -1,24 +1,25 @@
 import { styled as s } from "@linaria/react";
-const a = /* @__PURE__ */ s("div")({
+const e = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c1bgb86j",
   propsAsIs: !1
-}), e = /* @__PURE__ */ s("video")({
+}), a = /* @__PURE__ */ s("video")({
   name: "Player",
   class: "p6703cq",
   propsAsIs: !1
-}), r = /* @__PURE__ */ s("img")({
+}), l = /* @__PURE__ */ s("img")({
   name: "Poster",
   class: "p12ow7zo",
   propsAsIs: !1
-}), l = /* @__PURE__ */ s("div")({
+}), n = /* @__PURE__ */ s("div")({
   name: "Control",
   class: "cdpal9o",
   propsAsIs: !1
-});
+}), r = "t1xke4ml";
 export {
-  a as Container,
-  l as Control,
-  e as Player,
-  r as Poster
+  e as Container,
+  n as Control,
+  a as Player,
+  l as Poster,
+  r as ToggleIconPause
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.96.3",
+  "version": "0.97.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -35,26 +35,27 @@
     "package.json"
   ],
   "peerDependencies": {
-    "@lottiefiles/react-lottie-player": "*",
-    "@streamlayer/sl-eslib": "^5.79.3",
-    "nanoid": "3.3.7",
+    "@lottiefiles/react-lottie-player": "^3.5.3",
+    "@streamlayer/sl-eslib": "^5.83.1",
     "@types/lodash.throttle": "^4.1.9",
     "lodash.throttle": "^4.1.1",
+    "nanoid": "3.3.7",
     "react-infinite-scroller": "^1.2.6",
     "react-virtualized-auto-sizer": "^1.0.21",
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
-    "@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"
+    "@streamlayer/feature-gamification": "^0.39.0",
+    "@streamlayer/sdk-web-analytics": "^0.1.0",
+    "@streamlayer/sdk-web": "^0.33.0",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.11.42",
+    "@streamlayer/sdk-web-api": "^0.24.0",
+    "@streamlayer/sdk-web-features": "^0.11.24",
+    "@streamlayer/sdk-web-logger": "^0.5.18",
+    "@streamlayer/sdk-web-core": "^0.22.0",
+    "@streamlayer/sdk-web-interfaces": "^0.21.0",
+    "@streamlayer/sdk-web-notifications": "^0.15.0",
+    "@streamlayer/sdk-web-storage": "^0.4.5",
+    "@streamlayer/sdk-web-types": "^0.23.0"
   },
   "nx": {
     "implicitDependencies": [
@@ -69,32 +70,32 @@
     "@linaria/babel-preset": "^5.0.4",
     "@linaria/core": "^6.0.0",
     "@linaria/react": "^6.0.0",
-    "@nanostores/react": "^0.7.1",
+    "@nanostores/react": "^0.7.2",
     "@storybook/addon-docs": "^7.6.11",
     "@storybook/addon-styling": "^1.3.7",
     "@storybook/addon-viewport": "^7.6.11",
     "@storybook/blocks": "^7.6.11",
-    "@storybook/jest": "^0.2.3",
+    "@storybook/jest": "~0.2.3",
     "@storybook/react": "^7.6.11",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/testing-library": "~0.2.2",
     "@types/react-infinite-scroller": "^1.2.5",
     "@types/react-window": "^1.8.8",
     "@types/react-window-infinite-loader": "^1.0.9",
     "@wyw-in-js/vite": "^0.2.2",
     "esbuild-plugin-babel": "^0.2.3",
     "glob": "^10.3.10",
-    "react": "^18.2.0",
+    "react": "18.2.0",
     "react-auth-code-input": "^3.2.1",
     "react-countdown-circle-timer": "^3.2.1",
     "react-countup": "^6.5.0",
     "react-phone-number-input": "^3.3.9",
     "rollup-plugin-node-polyfills": "^0.2.1",
     "tslib": "^2.6.2",
-    "vite": "^5.0.12",
+    "vite": "5.0.12",
     "vite-plugin-node-polyfills": "^0.19.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^4.3.1",
-    "@streamlayer/react": "^0.40.3"
+    "@streamlayer/react": "^0.41.0"
   }
 }

package/lib/index-keh7OLCY.js

@@ -1,67 +0,0 @@
-import { p as a } from "./index-uEuzH3jr.js";
-let v = Symbol("clean"), t = [], p = (o, n) => {
-  let i = [], e = {
-    get() {
-      return e.lc || e.listen(() => {
-      })(), e.value;
-    },
-    l: n || 0,
-    lc: 0,
-    listen(f, u) {
-      return e.lc = i.push(f, u || e.l) / 2, () => {
-        let l = i.indexOf(f);
-        ~l && (i.splice(l, 2), --e.lc || e.off());
-      };
-    },
-    notify(f) {
-      let u = !t.length;
-      for (let l = 0; l < i.length; l += 2)
-        t.push(
-          i[l],
-          i[l + 1],
-          e.value,
-          f
-        );
-      if (u) {
-        for (let l = 0; l < t.length; l += 4) {
-          let r;
-          for (let s = l + 1; !r && (s += 4) < t.length; )
-            t[s] < t[l + 1] && (r = t.push(
-              t[l],
-              t[l + 1],
-              t[l + 2],
-              t[l + 3]
-            ));
-          r || t[l](t[l + 2], t[l + 3]);
-        }
-        t.length = 0;
-      }
-    },
-    off() {
-    },
-    /* It will be called on last listener unsubscribing.
-       We will redefine it in onMount and onStop. */
-    set(f) {
-      e.value !== f && (e.value = f, e.notify());
-    },
-    subscribe(f, u) {
-      let l = e.listen(f, u);
-      return f(e.value), l;
-    },
-    value: o
-  };
-  return a.env.NODE_ENV !== "production" && (e[v] = () => {
-    i = [], e.lc = 0, e.off();
-  }), e;
-}, h = (o = {}) => {
-  let n = p(o);
-  return n.setKey = function(i, e) {
-    typeof e > "u" ? i in n.value && (n.value = { ...n.value }, delete n.value[i], n.notify(i)) : n.value[i] !== e && (n.value = {
-      ...n.value,
-      [i]: e
-    }, n.notify(i));
-  }, n;
-};
-export {
-  h as m
-};