@streamlayer/react-ui 1.22.4 → 1.22.5

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

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

package/lib/ui/questions/insight/styles.d.ts

@@ -1,4 +1,5 @@
 export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const contentContainerClassName: import('@linaria/core').LinariaClassName;
 export declare const Content: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Title: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLHeadingElement> & import('react').HTMLAttributes<HTMLHeadingElement> & Record<never, unknown>>;
 export declare const Description: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

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

@@ -3,32 +3,33 @@ const n = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "cgn5uen",
   propsAsIs: !1
-}), a = /* @__PURE__ */ s("div")({
+}), a = "c1px8nt6", t = /* @__PURE__ */ s("div")({
   name: "Content",
-  class: "c1px8nt6",
+  class: "c5et2jt",
   propsAsIs: !1
-}), t = /* @__PURE__ */ s("h3")({
+}), o = /* @__PURE__ */ s("h3")({
   name: "Title",
-  class: "t5et2jt",
+  class: "t1i2kpk2",
   propsAsIs: !1
-}), o = /* @__PURE__ */ s("div")({
+}), i = /* @__PURE__ */ s("div")({
   name: "Description",
-  class: "d1i2kpk2",
+  class: "dd3lh3p",
   propsAsIs: !1
-}), i = /* @__PURE__ */ s("img")({
+}), c = /* @__PURE__ */ s("img")({
   name: "Image",
-  class: "id3lh3p",
+  class: "i1gfjeu5",
   propsAsIs: !1
 }), p = /* @__PURE__ */ s("div")({
   name: "ImageContainer",
-  class: "i1gfjeu5",
+  class: "i58y999",
   propsAsIs: !1
 });
 export {
   n as Container,
-  a as Content,
-  o as Description,
-  i as Image,
+  t as Content,
+  i as Description,
+  c as Image,
   p as ImageContainer,
-  t as Title
+  o as Title,
+  a as contentContainerClassName
 };

package/lib/ui/theme/constants.d.ts

@@ -61,6 +61,8 @@ export declare const COLORS: {
     IN_APP_QUESTION_QUOTE: string;
     IN_APP_QUESTION_RESULT_SUBTITLE_BG: string;
     IN_APP_QUESTION_RESULT_LINE: string;
+    QUOTE_BORDER: string;
+    QUOTE_TEXT: string;
 };
 export declare const COLORS_ADVERTISEMENT: {
     BG_PRIMARY: string;

package/lib/ui/theme/constants.js

@@ -62,7 +62,9 @@ const R = {
   IN_APP_QUESTION_TYPE_LABEL: "#82899E",
   IN_APP_QUESTION_QUOTE: "rgba(10, 14, 19, 0.70)",
   IN_APP_QUESTION_RESULT_SUBTITLE_BG: "#1D7BFF",
-  IN_APP_QUESTION_RESULT_LINE: "#babfc5"
+  IN_APP_QUESTION_RESULT_LINE: "#babfc5",
+  QUOTE_BORDER: "#E8E8E8",
+  QUOTE_TEXT: "rgba(10, 14, 19, 0.70)"
 }, F = {
   BG_PRIMARY: "#13212b",
   BG_SECONDARY: "#152430",
@@ -73,7 +75,7 @@ const R = {
   TEXT_SECONDARY: "rgba(255, 255, 255, 0.8)",
   TEXT_SECONDARY1: "#878787",
   WHITE: "#fff"
-}, I = ["#107D57", "#DF2F3B", "#DF2F3B", "#E8E8E8"], N = "#cee5de", O = "#f9d6d8", S = "#E8E8E8", D = {
+}, I = ["#107D57", "#DF2F3B", "#DF2F3B", "#E8E8E8"], O = "#cee5de", N = "#f9d6d8", S = "#E8E8E8", D = {
   REGULAR: "'SF Pro Text', Arial, Helvetica, sans-serif",
   SERIF: "'SF Pro Display', Arial, Helvetica, sans-serif",
   COLOR: "#fff",
@@ -111,8 +113,8 @@ export {
   B as ORIENTATION,
   I as TIMER_COLORS,
   S as TIMER_GRAY,
-  N as TIMER_GREEN,
-  O as TIMER_RED,
+  O as TIMER_GREEN,
+  N as TIMER_RED,
   C as colors,
   L as colorsAdvertisement
 };

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

@@ -65,7 +65,8 @@ const _ = {
   IN_APP_QUESTION_TYPE_LABEL: "#82899E",
   IN_APP_QUESTION_QUOTE: "rgba(10, 14, 19, 0.70)",
   IN_APP_QUESTION_RESULT_SUBTITLE_BG: "#1D7BFF",
-  IN_APP_QUESTION_RESULT_LINE: "#babfc5"
+  IN_APP_QUESTION_RESULT_LINE: "#babfc5",
+  QUOTE_TEXT: "#006944"
 }, e = {
   ...t,
   REGULAR: "'Benton Sans', BentonSans, Arial, Helvetica, sans-serif",
@@ -93,7 +94,7 @@ const _ = {
   --font-size-secondary: ${t.SIZE_DEFAULT1};
   --font-size-small: ${t.SIZE_DEFAULT2};
   --line-height-default: ${t.LINE_HEIGHT};
-  --margin-title-default: ${t.MARGIN_TITLE_DEFAULT};
+  --margin-title-default: 0px;
   --font-header-title: 20px;
 
   --header-offset: 0px;
@@ -120,6 +121,9 @@ const _ = {
   --welcome-screen-graphic-size: 80px;
   --welcome-screen-graphic-size-xl: 125px;
   --insight-image-ratio: 16/9;
+  --quote-indent: 0px;
+  --quote-padding: 0px;
+  --history-card-gap: 1rem;
 
   ${n.down("xl")`
     --header-offset: 0px;

package/lib/ui/theme/theme.js

@@ -46,6 +46,9 @@ const l = `
   --card-border: 1px solid var(--color-card-border);
   --welcome-screen-graphic-size: 144px;
   --welcome-screen-graphic-size-xl: 144px;
+  --quote-indent: 0 0 8px 0px;
+  --quote-padding: 4px 16px 8px 0;
+  --history-card-gap: 0.75rem;
 
   --row-gap-default: 12px;
   --row-gap-default1: 12px;

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

@@ -10,6 +10,7 @@ export type VideoPlayerProps = {
     onPause?: () => void;
     autoPlay?: boolean;
     hideControls?: boolean;
+    className?: string;
 };
 export type ControlVideoCb = VideoPlayerProps['controlVideo'];
 export declare const pauseAllVideos: () => void;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "1.22.4",
+  "version": "1.22.5",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -69,19 +69,19 @@
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
     "uuid": "^11.1.0",
-    "@streamlayer/feature-gamification": "^1.16.6",
-    "@streamlayer/react-polyfills": "^0.1.13",
-    "@streamlayer/sdk-web": "^1.10.6",
-    "@streamlayer/sdk-web-analytics": "^1.7.6",
-    "@streamlayer/sdk-web-anonymous-auth": "^1.1.32",
-    "@streamlayer/sdk-web-api": "^1.8.6",
-    "@streamlayer/sdk-web-core": "^1.11.8",
-    "@streamlayer/sdk-web-features": "^1.0.53",
-    "@streamlayer/sdk-web-interfaces": "^1.4.19",
-    "@streamlayer/sdk-web-logger": "^1.0.53",
-    "@streamlayer/sdk-web-notifications": "^1.3.15",
-    "@streamlayer/sdk-web-storage": "^1.0.53",
-    "@streamlayer/sdk-web-types": "^1.10.10"
+    "@streamlayer/feature-gamification": "^1.16.7",
+    "@streamlayer/react-polyfills": "^0.1.14",
+    "@streamlayer/sdk-web": "^1.10.7",
+    "@streamlayer/sdk-web-analytics": "^1.7.7",
+    "@streamlayer/sdk-web-anonymous-auth": "^1.1.33",
+    "@streamlayer/sdk-web-api": "^1.8.7",
+    "@streamlayer/sdk-web-core": "^1.11.9",
+    "@streamlayer/sdk-web-features": "^1.0.54",
+    "@streamlayer/sdk-web-interfaces": "^1.4.20",
+    "@streamlayer/sdk-web-logger": "^1.0.54",
+    "@streamlayer/sdk-web-notifications": "^1.3.16",
+    "@streamlayer/sdk-web-storage": "^1.0.54",
+    "@streamlayer/sdk-web-types": "^1.10.11"
   },
   "nx": {
     "implicitDependencies": [
@@ -121,7 +121,7 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@streamlayer/react": "^1.14.6"
+    "@streamlayer/react": "^1.14.7"
   },
   "dependencies": {
     "@dailymotion/vast-client": "^6.2.0",