@streamlayer/react-ui 1.11.3 → 1.12.0

package/lib/ui/theme/constants.js

@@ -1,13 +1,16 @@
 const T = {
-  BG_TRANSPARENT: "rgba(0,0,0, .8)",
   BLUE_QUESTION_ACTION_BTN: "#1589ee",
   WHITE: "#FFFFFF",
   BLUE: "#2d6ffd",
   GREY_PRIMARY: "#909395",
   GREY_PRIMARY_ONBOARDING_INAPP: "#B5B7B8",
   PRIMARY_1: "#1D7BFF",
+  // main
   PRIMARY_2: "#095CD1",
+  // hover, active, ...etc (darken 10%)
   PRIMARY_TEXT: "#090E13",
+  SECONDARY_TEXT: "#090E13",
+  QUESTION_TYPE_ICON: "#1D7BFF",
   SUCCESS: "#107D57",
   UNSUCCESS: "#DF2F3B",
   SECONDARY_RED1: "#DF2F3B",
@@ -20,7 +23,37 @@ const T = {
   NEUTRALS_GRAY5: "#B1B3B3",
   NEUTRALS_GRAY6: "#888B8D",
   NEUTRALS_GRAY7: "#6B6F73",
-  NEUTRALS_GRAY9: "#25282A"
+  NEUTRALS_GRAY9: "#25282A",
+  SDK_CONTAINER_BG: "#F7F7F7",
+  SDK_WHITE_CONTAINER_BG: "#fff",
+  SDK_DARK_CONTAINER_BG: "#fff",
+  SDK_PREDICTION_RESULT_SUCCESS_BG: "#fff",
+  SDK_PREDICTION_RESULT_INCORRECT_BG: "#fff",
+  SDK_PREDICTION_RESULT_SUCCESS_TEXT: "#107D57",
+  SDK_PREDICTION_RESULT_ERROR_TITLE: "#090E13",
+  SDK_PREDICTION_RESULT_ERROR_SUBTITLE: "#DF2F3B",
+  SDK_PREDICTION_RESULT_CLOSE_ICON: "#6B6F73",
+  SDK_PREDICTION_FEEDBACK_SUCCESS_ICON: "#107D57",
+  SDK_PREDICTION_FEEDBACK_INCORRECT_RECT1: "#CD2525",
+  SDK_PREDICTION_FEEDBACK_INCORRECT_RECT2: "#fff",
+  PREDICTION_BG_LINES_CORRECT: "#095CD1",
+  PREDICTION_BG_LINES_INCORRECT: "#888B8D",
+  SKELETON_COLOR_1: "#f1efef",
+  SKELETON_COLOR_2: "#f9f8f8",
+  TABS_CONTAINER_BG: "#F2F2F1",
+  TABS_ACTIVE_BG: "#FFFFFF",
+  TABS_COLOR: "#6B6F73",
+  TABS_ACTIVE_COLOR: "#1D7BFF",
+  CARD_BG: "#FFFFFF",
+  CARD_BORDER: "#fff",
+  BORDER: "#E8E8E8",
+  VOTE_BTN_BG: "#F7F7F7",
+  VOTE_BTN_BORDER: "transparent",
+  VOTE_BTN_DISABLED_BORDER: "#B1B3B3",
+  VOTE_BTN_SELECTED_BORDER: "#25282A",
+  VOTE_BTN_NOT_SELECTED_BORDER: "#E8E8E8",
+  VOTE_BTN_SELECTED_BG: "#FFFFFF",
+  VOTE_BTN_NOT_SELECTED_BG: "#FFFFFF"
 }, F = {
   BG_PRIMARY: "#13212b",
   BG_SECONDARY: "#152430",
@@ -31,7 +64,7 @@ const T = {
   TEXT_SECONDARY: "rgba(255, 255, 255, 0.8)",
   TEXT_SECONDARY1: "#878787",
   WHITE: "#fff"
-}, _ = ["#107D57", "#DF2F3B", "#DF2F3B", "#E8E8E8"], e = "#cee5de", I = "#f9d6d8", S = "#E8E8E8", N = {
+}, D = ["#107D57", "#DF2F3B", "#DF2F3B", "#E8E8E8"], I = "#cee5de", O = "#f9d6d8", S = "#E8E8E8", A = {
   REGULAR: "'SF Pro Text', Arial, Helvetica, sans-serif",
   SERIF: "'SF Pro Display', Arial, Helvetica, sans-serif",
   COLOR: "#fff",
@@ -44,33 +77,33 @@ const T = {
   SIZE_DEFAULT2: "12px",
   LINE_HEIGHT: "24px",
   MARGIN_TITLE_DEFAULT: "24px 0px"
-}, r = {
+}, C = {
   xs: 324,
   sm: 576,
   md: 768,
   lg: 992,
   xl: 1200,
   xxl: 1440
-}, D = {
+}, N = {
   landscape: "landscape",
   portrait: "portrait"
-}, s = Object.entries(T).reduce((E, [R, A]) => `
+}, B = Object.entries(T).reduce((E, [_, R]) => `
     ${E}
-    --color-${R.toLowerCase().replaceAll("_", "-")}: ${A};
-  `, ""), t = Object.entries(F).reduce((E, [R, A]) => `
+    --color-${_.toLowerCase().replaceAll("_", "-")}: ${R};
+  `, ""), L = Object.entries(F).reduce((E, [_, R]) => `
     ${E}
-    --color-adv-${R.toLowerCase().replaceAll("_", "-")}: ${A};
+    --color-adv-${_.toLowerCase().replaceAll("_", "-")}: ${R};
   `, "");
 export {
-  r as BREAKPOINTS,
+  C as BREAKPOINTS,
   T as COLORS,
   F as COLORS_ADVERTISEMENT,
-  N as FONT,
-  D as ORIENTATION,
-  _ as TIMER_COLORS,
+  A as FONT,
+  N as ORIENTATION,
+  D as TIMER_COLORS,
   S as TIMER_GRAY,
-  e as TIMER_GREEN,
-  I as TIMER_RED,
-  s as colors,
-  t as colorsAdvertisement
+  I as TIMER_GREEN,
+  O as TIMER_RED,
+  B as colors,
+  L as colorsAdvertisement
 };

package/lib/ui/theme/masters-theme.js

@@ -1,6 +1,8 @@
 import { breakpoints as i } from "./breakpoints.js";
 import { FONT as t } from "./constants.js";
 const E = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
   BG_TRANSPARENT: "rgba(0,0,0, .8)",
   BLUE_QUESTION_ACTION_BTN: "#1589ee",
   WHITE: "#FFFFFF",
@@ -10,6 +12,7 @@ const E = {
   PRIMARY_1: "#107D57",
   PRIMARY_2: "#006747",
   PRIMARY_TEXT: "#006747",
+  QUESTION_TYPE_ICON: "#107D57",
   SUCCESS: "#107D57",
   UNSUCCESS: "#DF2F3B",
   SECONDARY_RED1: "#DF2F3B",
@@ -32,7 +35,7 @@ const E = {
 }, R = Object.entries(E).reduce((n, [a, o]) => `
     ${n}
     --color-${a.toLowerCase().replaceAll("_", "-")}: ${o};
-  `, ""), s = `
+  `, ""), r = `
   ${R}
   --font-family: ${e.REGULAR};
   --font-regular: ${e.REGULAR};
@@ -47,6 +50,7 @@ const E = {
   --font-size-small: ${t.SIZE_DEFAULT2};
   --line-height-default: ${t.LINE_HEIGHT};
   --margin-title-default: ${t.MARGIN_TITLE_DEFAULT};
+  --font-header-title: 0.75rem;
 
   --header-offset: 0px;
   --header-height: 68px;
@@ -54,6 +58,7 @@ const E = {
   --animation-duration: 0.5s;
   --animation-function: ease;
   --container-padding: 16px;
+  --max-tabs-width: 361px;
   --border-radius: 8px;
   --pill-offset: 0px;
   --max-width: 600px;
@@ -79,9 +84,9 @@ const E = {
   ${i.intermediate("xl", "lg")`
     --header-offset: 76px;
   `}
-`, r = "m1ojpy2l";
+`, s = "m1ojpy2l";
 export {
   E as MASTERS_COLORS,
-  r as mastersTheme,
-  s as mastersThemeStr
+  s as mastersTheme,
+  r as mastersThemeStr
 };

package/lib/ui/theme/theme.js

@@ -1,5 +1,5 @@
 import { jsx as i, jsxs as t } from "react/jsx-runtime";
-import { breakpoints as n } from "./breakpoints.js";
+import { breakpoints as d } from "./breakpoints.js";
 import { colors as p, colorsAdvertisement as s, FONT as e } from "./constants.js";
 const l = `
   ${p}
@@ -17,12 +17,15 @@ const l = `
   --font-size-small: ${e.SIZE_DEFAULT2};
   --line-height-default: ${e.LINE_HEIGHT};
   --margin-title-default: ${e.MARGIN_TITLE_DEFAULT};
+  --font-header-title: 0.75rem;
 
   --header-offset: 0px;
   --header-height: 68px;
   --animation-duration: 0.5s;
   --animation-function: ease;
   --container-padding: 16px;
+  --summary-container-padding-bottom: 16px;
+  --max-tabs-width: 100%;
   --border-radius: 8px;
   --pill-offset: 0px;
   --max-width: 600px;
@@ -37,6 +40,10 @@ const l = `
   --insight-image-display: inline;
   --web-link-align-items: center;
   --web-link-column-gap: 10px;
+  --nav-border: 1px solid var(--color-neutrals-gray3);
+  --card-border: 1px solid var(--color-card-border);
+  --welcome-screen-graphic-size: 80px;
+  --welcome-screen-graphic-size-xl: 125px;
 
   --row-gap-default: 12px;
   --row-gap-default1: 12px;
@@ -45,11 +52,11 @@ const l = `
   --promo-animation-duration: 0.5s;
   --promo-animation-function: ease-in;
 
-  ${n.down("xl")`
+  ${d.down("xl")`
     --header-offset: 0px;
   `}
 
-  ${n.intermediate("xl", "lg")`
+  ${d.intermediate("xl", "lg")`
     --header-offset: 0px;
   `}
 
@@ -85,7 +92,7 @@ const l = `
     --adv-sponsor-logo-size: 28px;
     --adv-sponsor-font-size: 12px;
   }
-`, m = "StreamLayerCSSReset", g = "ttkj0ah", c = () => /* @__PURE__ */ i("table", {
+`, f = "StreamLayerCSSReset", c = "ttkj0ah", g = () => /* @__PURE__ */ i("table", {
   children: /* @__PURE__ */ t("table", {
     children: [/* @__PURE__ */ i("thead", {
       children: /* @__PURE__ */ t("tr", {
@@ -96,8 +103,8 @@ const l = `
         })]
       })
     }), /* @__PURE__ */ i("tbody", {
-      children: l.split(";").map((d) => {
-        const a = d.trim(), [o, r] = a.split(":");
+      children: l.split(";").map((n) => {
+        const a = n.trim(), [o, r] = a.split(":");
         return /* @__PURE__ */ t("tr", {
           children: [/* @__PURE__ */ i("td", {
             children: o
@@ -110,8 +117,8 @@ const l = `
   })
 });
 export {
-  c as ThemeVariables,
-  m as resetCss,
-  g as theme,
+  g as ThemeVariables,
+  f as resetCss,
+  c as theme,
   l as themeStr
 };

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

@@ -7,9 +7,11 @@ export type VideoPlayerProps = {
     controlVideo?: (props: ControlVideoProps) => void;
     aspectRatio?: string;
     onPlay?: () => void;
+    onPause?: () => void;
     autoPlay?: boolean;
     hideControls?: boolean;
 };
+export type ControlVideoCb = VideoPlayerProps['controlVideo'];
 export declare const pauseAllVideos: () => void;
 /**
  * VideoPlayer component for playing videos with a poster image.

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

@@ -1,96 +1,97 @@
-import { jsxs as H, jsx as i } from "react/jsx-runtime";
-import { cx as L } from "@linaria/core";
-import { useRef as S, useState as d, useCallback as y, useEffect as P } from "react";
-import { eventBus as C } from "@streamlayer/sdk-web-interfaces";
-import { SvgIcon as h } from "../icons/index.js";
-import { Container as M, ToggleIconPause as j, HideControls as k, Player as A, Poster as B, Control as F } from "./styles.js";
-const N = (s) => {
-  for (const r of s)
+import { jsxs as P, jsx as i } from "react/jsx-runtime";
+import { cx as S } from "@linaria/core";
+import { useRef as C, useState as y, useCallback as h, useEffect as E } from "react";
+import { eventBus as M } from "@streamlayer/sdk-web-interfaces";
+import { SvgIcon as I } from "../icons/index.js";
+import { Container as j, ToggleIconPause as k, HideControls as A, Player as B, Poster as F, Control as N } from "./styles.js";
+const q = (t) => {
+  for (const r of t)
     r.isIntersecting ? r.target instanceof HTMLVideoElement && r.target.autoplay && r.target.play() : r.target instanceof HTMLVideoElement && !r.target.paused && r.target.pause();
-}, E = new IntersectionObserver(N, { threshold: 0.5 }), m = /* @__PURE__ */ new Set(), q = (s) => {
-  E.observe(s), m.add(s);
-}, z = (s) => {
-  E.unobserve(s), m.delete(s);
-}, D = () => {
-  for (const s of m)
-    s instanceof HTMLVideoElement && !s.paused && s.pause();
-}, X = ({
-  poster: s,
+}, O = new IntersectionObserver(q, { threshold: 0.5 }), p = /* @__PURE__ */ new Set(), z = (t) => {
+  O.observe(t), p.add(t);
+}, D = (t) => {
+  O.unobserve(t), p.delete(t);
+}, G = () => {
+  for (const t of p)
+    t instanceof HTMLVideoElement && !t.paused && t.pause();
+}, Y = ({
+  poster: t,
   source: r,
-  aspectRatio: p,
+  aspectRatio: g,
   controlVideo: n,
   onPlay: o,
-  autoPlay: I,
-  hideControls: u
+  onPause: u,
+  autoPlay: T,
+  hideControls: c
 }) => {
-  const e = S(null), [c, l] = d(!1), [g, f] = d(!0), O = y(() => {
+  const e = C(null), [l, f] = y(!1), [v, m] = y(!0), w = h(() => {
     n == null || n({ muted: !0 });
-  }, [n]), a = y(() => {
+  }, [n]), a = h(() => {
     n == null || n({ muted: !1 });
-  }, [n]), T = (t) => {
-    t.stopPropagation();
-    const v = e == null ? void 0 : e.current;
-    if (v) {
-      if (c)
-        v.pause();
+  }, [n]), x = (s) => {
+    s.stopPropagation();
+    const b = e == null ? void 0 : e.current;
+    if (b) {
+      if (l)
+        b.pause();
       else {
-        const b = e == null ? void 0 : e.current;
-        if (!b)
+        const d = e == null ? void 0 : e.current;
+        if (!d)
           return;
-        D(), b.play().catch((x) => console.log(x)), f(!1);
+        G(), d.play().catch((L) => console.log(L)), m(!1);
       }
-      C.emit("interactions", {
+      M.emit("interactions", {
         action: "tap",
         payload: {}
       });
     }
-  }, w = () => {
-    var t;
-    (t = e == null ? void 0 : e.current) == null || t.load(), f(!0);
+  }, H = () => {
+    var s;
+    (s = e == null ? void 0 : e.current) == null || s.load(), m(!0);
   };
-  return P(() => {
-    const t = e == null ? void 0 : e.current;
+  return E(() => {
+    const s = e == null ? void 0 : e.current;
     return () => {
-      t && (t.paused || a());
+      s && (s.paused || a());
     };
-  }, [a]), P(() => {
-    const t = e.current;
-    return t ? (q(t), () => z(t)) : () => {
+  }, [a]), E(() => {
+    const s = e.current;
+    return s ? (z(s), () => D(s)) : () => {
     };
-  }, []), /* @__PURE__ */ H(
-    M,
+  }, []), /* @__PURE__ */ P(
+    j,
     {
-      onClick: u ? void 0 : T,
-      className: L(c && j, u && k),
-      style: p ? { aspectRatio: p } : {},
+      onClick: c ? void 0 : x,
+      className: S(l && k, c && A),
+      style: g ? { aspectRatio: g } : {},
       children: [
         /* @__PURE__ */ i(
-          A,
+          B,
           {
             ref: e,
             src: r,
-            autoPlay: I,
+            autoPlay: T,
             onPlay: () => {
-              O(), l(!0), f(!1), o == null || o();
+              w(), f(!0), m(!1), o == null || o();
             },
             onPause: () => {
-              a(), l(!1);
+              a(), f(!1), u == null || u();
             },
             onEnded: () => {
-              a(), l(!1), w();
+              a(), f(!1), H();
             },
-            style: { visibility: g ? "hidden" : "visible" },
+            style: { visibility: v ? "hidden" : "visible" },
             controls: !1,
             playsInline: !0
           }
         ),
-        /* @__PURE__ */ i(B, { src: s, style: { visibility: g ? "visible" : "hidden" } }),
-        !u && /* @__PURE__ */ i(F, { children: c ? /* @__PURE__ */ i(h, { name: "icon-pause" }) : /* @__PURE__ */ i(h, { name: "icon-play" }) })
+        /* @__PURE__ */ i(F, { src: t, style: { visibility: v ? "visible" : "hidden" } }),
+        !c && /* @__PURE__ */ i(N, { children: l ? /* @__PURE__ */ i(I, { name: "icon-pause" }) : /* @__PURE__ */ i(I, { name: "icon-play" }) })
       ]
     }
   );
 };
 export {
-  X as VideoPlayer,
-  D as pauseAllVideos
+  Y as VideoPlayer,
+  G as pauseAllVideos
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "1.11.3",
+  "version": "1.12.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -59,18 +59,18 @@
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^1.8.3",
-    "@streamlayer/sdk-web-analytics": "^1.4.4",
-    "@streamlayer/sdk-web": "^1.5.3",
-    "@streamlayer/sdk-web-anonymous-auth": "^1.1.4",
-    "@streamlayer/sdk-web-api": "^1.6.4",
-    "@streamlayer/sdk-web-features": "^1.0.25",
-    "@streamlayer/sdk-web-core": "^1.6.3",
-    "@streamlayer/sdk-web-interfaces": "^1.2.4",
-    "@streamlayer/sdk-web-logger": "^1.0.25",
-    "@streamlayer/sdk-web-notifications": "^1.2.4",
-    "@streamlayer/sdk-web-storage": "^1.0.25",
-    "@streamlayer/sdk-web-types": "^1.7.4"
+    "@streamlayer/feature-gamification": "^1.9.0",
+    "@streamlayer/sdk-web": "^1.5.5",
+    "@streamlayer/sdk-web-analytics": "^1.4.6",
+    "@streamlayer/sdk-web-api": "^1.6.6",
+    "@streamlayer/sdk-web-anonymous-auth": "^1.1.6",
+    "@streamlayer/sdk-web-core": "^1.6.5",
+    "@streamlayer/sdk-web-features": "^1.0.27",
+    "@streamlayer/sdk-web-interfaces": "^1.2.6",
+    "@streamlayer/sdk-web-logger": "^1.0.27",
+    "@streamlayer/sdk-web-notifications": "^1.2.6",
+    "@streamlayer/sdk-web-storage": "^1.0.27",
+    "@streamlayer/sdk-web-types": "^1.8.0"
   },
   "nx": {
     "implicitDependencies": [
@@ -111,6 +111,6 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@streamlayer/react": "^1.8.3"
+    "@streamlayer/react": "^1.8.5"
   }
 }