@streamlayer/react-ui 1.26.0 → 1.27.0

package/lib/ui/modal/index.js

@@ -3,31 +3,26 @@ import { styled as y } from "@linaria/react";
 import { useState as d, useEffect as a } from "react";
 import { r as u } from "../../index-DALxy-8N.js";
 import { BREAKPOINTS as m } from "../theme/constants.js";
-const O = /* @__PURE__ */ y("div")({
+import { hideContentStyles as O } from "../theme/utils.js";
+const S = /* @__PURE__ */ y("div")({
   name: "StaticContainer",
   class: "svm502q",
   propsAsIs: !1
-}), S = `
-  .sl-hide-on-modal {
-    height: 0 !important;
-    opacity: 0 !important;
-    overflow: hidden !important;
-  }
-`, C = `
+}), C = `
   .sl-pill-button {
     display: none !important;
   }
 `, p = () => window.innerWidth >= m.md && window.innerWidth < m.lg ? 76 : 53, f = (e) => {
-  var n;
+  var r;
   const t = p();
-  return Math.round((((n = e.current) == null ? void 0 : n.getBoundingClientRect().y) || 0) - t) <= 0;
-}, x = ({
+  return Math.round((((r = e.current) == null ? void 0 : r.getBoundingClientRect().y) || 0) - t) <= 0;
+}, R = ({
   children: e,
   container: t,
-  useContainer: n,
+  useContainer: r,
   staticStyles: w
 }) => {
-  const [s] = d(() => f(t)), [r, i] = d(!1);
+  const [s] = d(() => f(t)), [n, i] = d(!1);
   return a(() => {
     if (!t.current || !s)
       return i(!0), () => {
@@ -40,17 +35,17 @@ const O = /* @__PURE__ */ y("div")({
       });
     };
   }, []), a(() => {
-    if (r && t.current && s) {
+    if (n && t.current && s) {
       const o = p();
       window.scrollTo({
         top: t.current.offsetTop - o,
         behavior: "instant"
       });
     }
-  }, [r]), !t.current || !r ? null : n ? u.createPortal(/* @__PURE__ */ c(O, {
+  }, [n]), !t.current || !n ? null : r ? u.createPortal(/* @__PURE__ */ c(S, {
     className: "StaticContainer",
     children: [e, /* @__PURE__ */ l("style", {
-      children: S
+      children: O
     }), /* @__PURE__ */ l("style", {
       children: C
     })]
@@ -61,5 +56,5 @@ const O = /* @__PURE__ */ y("div")({
   }), t.current, "modal-node");
 };
 export {
-  x as ModalPortal
+  R as ModalPortal
 };

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

@@ -1,7 +1,10 @@
-import { InsightHistory } from '@streamlayer/sdk-web-types';
+import { InsightHistory, Promotion } from '@streamlayer/sdk-web-types';
 import { VideoPlayerProps } from '../../video-player';
 export type InsightContentProps = InsightHistory & {
     isDetail?: boolean;
+    muted?: boolean;
+    webos?: boolean;
+    adPromotion?: Promotion;
     controlVideo: VideoPlayerProps['controlVideo'];
 };
 export declare const InsightContent: React.FC<InsightContentProps>;

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

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

package/lib/ui/questions/twitter/account/styles.d.ts

@@ -1,7 +1,13 @@
 export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const ImageContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Image: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
-export declare const TwitterIcon: any;
+export declare const TwitterIcon: {
+    __wyw_meta: unknown;
+} & import('react').FC<{
+    name: keyof typeof import('../../../icons').icons;
+    style?: React.CSSProperties;
+    className?: string;
+}>;
 export declare const Details: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Name: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const UserNameAndDate: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/questions/twitter/index.d.ts

@@ -3,6 +3,7 @@ import { VideoPlayerProps } from '../../video-player';
 export declare const sanitizeContent: (text: string) => string;
 export type TwitterContentProps = TweetHistory & {
     isDetail?: boolean;
+    muted?: boolean;
     controlVideo: VideoPlayerProps['controlVideo'];
 };
 export declare const TwitterContent: React.FC<TwitterContentProps>;

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

@@ -1,30 +1,30 @@
-import { jsxs as o, jsx as s, Fragment as j } from "react/jsx-runtime";
-import { memo as k, useMemo as x } from "react";
-import { VideoPlayer as B } from "../../video-player/index.js";
-import { Account as E } from "./account/index.js";
-import { Container as L, Details as N, Body as R, ImagesContainer as l, ImageFullSize as t, ImageHalfSize as p, ImagesBlock as a } from "./styles.js";
-const S = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), A = (c) => c == null ? void 0 : c.replace(S, ""), $ = k(
-  ({ image: c, body: y, account: C, accountVerified: z, tweet: n, isDetail: d, controlVideo: F }) => {
+import { jsxs as o, jsx as s, Fragment as k } from "react/jsx-runtime";
+import { memo as x, useMemo as B } from "react";
+import { VideoPlayer as E } from "../../video-player/index.js";
+import { Account as L } from "./account/index.js";
+import { Container as N, Details as R, Body as S, ImagesContainer as l, ImageFullSize as t, ImageHalfSize as p, ImagesBlock as a } from "./styles.js";
+const A = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), D = (c) => c == null ? void 0 : c.replace(A, ""), b = x(
+  ({ image: c, body: y, muted: C, account: z, accountVerified: F, tweet: n, isDetail: d, controlVideo: T }) => {
     var h, g, H, U, f;
-    const r = (g = (h = n == null ? void 0 : n.meta) == null ? void 0 : h.extendedEntities) == null ? void 0 : g.media, i = r == null ? void 0 : r.find(({ type: e }) => e === "photo"), m = x(() => {
+    const r = (g = (h = n == null ? void 0 : n.meta) == null ? void 0 : h.extendedEntities) == null ? void 0 : g.media, i = r == null ? void 0 : r.find(({ type: e }) => e === "photo"), m = B(() => {
       var e, u, v, I;
-      return (I = (v = (u = (e = r == null ? void 0 : r[0]) == null ? void 0 : e.videoInfo) == null ? void 0 : u.variants) == null ? void 0 : v.findLast(({ contentType: T }) => T === "video/mp4")) == null ? void 0 : I.url;
+      return (I = (v = (u = (e = r == null ? void 0 : r[0]) == null ? void 0 : e.videoInfo) == null ? void 0 : u.variants) == null ? void 0 : v.findLast(({ contentType: j }) => j === "video/mp4")) == null ? void 0 : I.url;
     }, [r]);
-    return /* @__PURE__ */ o(L, { children: [
-      /* @__PURE__ */ o(N, { children: [
+    return /* @__PURE__ */ o(N, { children: [
+      /* @__PURE__ */ o(R, { children: [
         /* @__PURE__ */ s(
-          E,
+          L,
           {
             image: c,
             name: (H = n == null ? void 0 : n.meta) == null ? void 0 : H.accountName,
-            userName: C,
-            verified: z,
+            userName: z,
+            verified: F,
             createdTweet: n == null ? void 0 : n.date
           }
         ),
-        /* @__PURE__ */ s(R, { children: A(y) }),
+        /* @__PURE__ */ s(S, { children: D(y) }),
         !d && i && /* @__PURE__ */ s(l, { children: /* @__PURE__ */ s(t, { src: r == null ? void 0 : r[0].mediaUrlHttps }) }),
-        d && i && /* @__PURE__ */ o(j, { children: [
+        d && i && /* @__PURE__ */ o(k, { children: [
           (r == null ? void 0 : r.length) === 1 && /* @__PURE__ */ s(l, { children: /* @__PURE__ */ s(t, { src: r[0].mediaUrlHttps }) }),
           (r == null ? void 0 : r.length) === 2 && /* @__PURE__ */ o(l, { children: [
             /* @__PURE__ */ s(p, { src: r[0].mediaUrlHttps }),
@@ -49,11 +49,19 @@ const S = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), A = (c) => c == null ?
           ] })
         ] })
       ] }),
-      !i && (((U = r == null ? void 0 : r[0]) == null ? void 0 : U.type) === "video" || ((f = r == null ? void 0 : r[0]) == null ? void 0 : f.type) === "animated_gif") && m && /* @__PURE__ */ s(B, { source: m, poster: r[0].mediaUrlHttps, controlVideo: F })
+      !i && (((U = r == null ? void 0 : r[0]) == null ? void 0 : U.type) === "video" || ((f = r == null ? void 0 : r[0]) == null ? void 0 : f.type) === "animated_gif") && m && /* @__PURE__ */ s(
+        E,
+        {
+          muted: C,
+          source: m,
+          poster: r[0].mediaUrlHttps,
+          controlVideo: T
+        }
+      )
     ] });
   }
 );
 export {
-  $ as TwitterContent,
-  A as sanitizeContent
+  b as TwitterContent,
+  D as sanitizeContent
 };

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

@@ -10,6 +10,7 @@ export declare const COLORS: {
     SECONDARY_TEXT: string;
     QUESTION_TYPE_ICON: string;
     QUESTION_BODY_TEXT: string;
+    PRESENTED_BY_TEXT: string;
     SUCCESS: string;
     UNSUCCESS: string;
     SECONDARY_RED1: string;
@@ -52,6 +53,7 @@ export declare const COLORS: {
     VOTE_BTN_SELECTED_BORDER: string;
     VOTE_BTN_NOT_SELECTED_BORDER: string;
     VOTE_BTN_SELECTED_BG: string;
+    VOTE_BTN_SELECTED_BG_AD_UNIT: string;
     VOTE_BTN_NOT_SELECTED_BG: string;
     VOTE_BTN_NOT_SELECTED_BG_UNSET: string;
     VOTED_ANSWER_BG: string;

package/lib/ui/theme/constants.js

@@ -12,6 +12,7 @@ const R = {
   SECONDARY_TEXT: "rgba(10, 14, 19, 0.70)",
   QUESTION_TYPE_ICON: "#1D7BFF",
   QUESTION_BODY_TEXT: "#090E13",
+  PRESENTED_BY_TEXT: "#090E13",
   SUCCESS: "#107D57",
   UNSUCCESS: "#DF2F3B",
   SECONDARY_RED1: "#DF2F3B",
@@ -54,6 +55,7 @@ const R = {
   VOTE_BTN_SELECTED_BORDER: "#25282A",
   VOTE_BTN_NOT_SELECTED_BORDER: "#E8E8E8",
   VOTE_BTN_SELECTED_BG: "#FFFFFF",
+  VOTE_BTN_SELECTED_BG_AD_UNIT: "#FFFFFF",
   VOTE_BTN_NOT_SELECTED_BG: "#FFFFFF",
   VOTE_BTN_NOT_SELECTED_BG_UNSET: "rgb(196, 196, 196)",
   VOTED_ANSWER_BG: "#FFFFFF",

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

@@ -187,6 +187,7 @@ const _ = {
   --display-question-container: initial;
   --justify-content-question-container: initial;
   --color-question-body-text: #006747;
+  --color-presented-by-text: #006747;
   --nav-border: 1px solid var(--color-neutrals-gray3);
 `, f = "m1ojpy2l";
 export {

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

@@ -0,0 +1,10 @@
+export declare const hideContentStyles = "\n  .sl-hide-on-modal {\n    height: 0 !important;\n    opacity: 0 !important;\n    overflow: hidden !important;\n    transition: none;\n  }\n";
+export declare const getContainerBgStyles: ({ containerId, url, }: {
+    containerId?: string;
+    url: string;
+}) => string;
+export declare const useAdvertisementBackground: ({ containerId, landscapeUrl, portraitUrl, }: {
+    containerId?: string;
+    landscapeUrl?: string;
+    portraitUrl?: string;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/lib/ui/theme/utils.js

@@ -0,0 +1,77 @@
+import { jsx as d } from "react/jsx-runtime";
+import { useState as l, useMemo as s, useEffect as m } from "react";
+const u = `
+  .sl-hide-on-modal {
+    height: 0 !important;
+    opacity: 0 !important;
+    overflow: hidden !important;
+    transition: none;
+  }
+`, p = ({
+  containerId: t = "SlLayoutContainer",
+  url: n
+}) => `
+  #${t || "SlLayoutContainer"},
+  #${t || "SlLayoutContainer"} .StreamLayerSDK>.StreamLayerSDKTheme > * {
+    --color-sdk-container-bg: transparent !important;
+  }
+
+  #${t || "SlLayoutContainer"}::before {
+    content: '';
+    display: block;
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #1a1a1a;
+    background-size: cover !important;
+    background-position: center !important;
+    background-repeat: no-repeat !important;
+    background-image: ${n} !important;
+    z-index: 0;
+
+    opacity: 0;
+    animation: fade-sl-bg-in 0.3s linear forwards;
+  }
+
+  #${t || "SlLayoutContainer"} > div {
+    position: relative;
+    z-index: 1;
+  }
+
+  @keyframes fade-sl-bg-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  ${u}
+`, y = ({
+  containerId: t,
+  landscapeUrl: n,
+  portraitUrl: i
+}) => {
+  const [r, a] = l(!1), o = s(() => {
+    const e = window.innerWidth, c = window.innerHeight;
+    return a(!1), e > c ? n : i;
+  }, [n, i]);
+  return m(() => {
+    if (o) {
+      const e = new Image();
+      e.src = o, e.onload = function() {
+        a(!0);
+      };
+    }
+  }, [o]), s(() => {
+    const e = o ? `url("${o}")` : void 0;
+    return e && r ? /* @__PURE__ */ d("style", { children: p({ containerId: t, url: e }) }) : null;
+  }, [t, o, r]);
+};
+export {
+  p as getContainerBgStyles,
+  u as hideContentStyles,
+  y as useAdvertisementBackground
+};

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

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 type ControlVideoProps = {
     muted: boolean;
 };
@@ -8,8 +9,15 @@ export type VideoPlayerProps = {
     aspectRatio?: string;
     onPlay?: () => void;
     onPause?: () => void;
+    onReplay?: () => void;
+    onEnd?: () => void;
+    onRender?: () => void;
+    onMute?: (muted?: boolean) => void;
+    onQuartile?: (quartile: 25 | 50 | 75) => void;
     autoPlay?: boolean;
-    hideControls?: boolean;
+    playMuted?: boolean;
+    muted?: boolean;
+    webos?: boolean;
     className?: string;
 };
 export type ControlVideoCb = VideoPlayerProps['controlVideo'];
@@ -41,5 +49,5 @@ export declare const pauseAllVideos: () => void;
  * @param {string} props.source - The path to the video source.
  * @returns {JSX.Element} The rendered VideoPlayer component.
  */
-export declare const VideoPlayer: React.FC<VideoPlayerProps>;
+export declare const VideoPlayer: React.ForwardRefExoticComponent<VideoPlayerProps & React.RefAttributes<HTMLVideoElement | null>>;
 export {};