@streamlayer/react-ui 1.9.0 → 1.11.0

package/lib/ui/close-btn/index.js

@@ -0,0 +1,47 @@
+import { jsx as e } from "react/jsx-runtime";
+import { styled as s } from "@linaria/react";
+import { useState as p, useEffect as f, useCallback as l } from "react";
+import { CloseTimerAuto as a } from "@streamlayer/sdk-web-types";
+import { SvgIcon as I } from "../icons/index.js";
+import { SimpleTimer as u } from "../timer/index.js";
+const v = /* @__PURE__ */ s("div")({
+  name: "CloseIconWrap",
+  class: "c3v6bv6",
+  propsAsIs: !1
+}), T = /* @__PURE__ */ s("div")({
+  name: "TimerWrap",
+  class: "teuhmro",
+  propsAsIs: !1
+}), g = () => I, x = /* @__PURE__ */ s(g())({
+  name: "Icon",
+  class: "i17rfxv5",
+  propsAsIs: !0
+}), S = ({
+  close: r,
+  className: t,
+  duration: o = 0,
+  autoClose: m
+}) => {
+  const [c, n] = p(o === 0);
+  f(() => {
+    n(!o);
+  }, [o]);
+  const i = l(() => {
+    m === a.ENABLED ? r == null || r() : n(!0);
+  }, [m, r]);
+  return c ? /* @__PURE__ */ e(v, {
+    onClick: r,
+    className: t,
+    children: /* @__PURE__ */ e(x, {
+      name: "icon-cross"
+    })
+  }) : /* @__PURE__ */ e(T, {
+    children: /* @__PURE__ */ e(u, {
+      duration: o,
+      onTimerExpired: i
+    })
+  });
+};
+export {
+  S as CloseButton
+};

package/lib/ui/gamification/detail/header/index.d.ts

@@ -1,8 +1,9 @@
-import { QuestionType } from '@streamlayer/sdk-web-types';
+import { CloseTimer, QuestionType } from '@streamlayer/sdk-web-types';
 interface VoteHeaderProps {
     type?: QuestionType;
     close: () => void;
     label?: string;
+    closeTimer?: CloseTimer;
 }
 export declare const VoteHeader: React.FC<VoteHeaderProps>;
 export {};

package/lib/ui/gamification/detail/header/index.js

@@ -1,24 +1,25 @@
-import { jsxs as r, jsx as n } from "react/jsx-runtime";
-import { QuestionType as i } from "@streamlayer/sdk-web-types";
-import { QuestionTypeData as m } from "../../constants.js";
-import { Container as t, QuestionTypeWrap as a, QuestionTypeIcon as s, QuestionTypeTitle as p, CloseIconWrap as d, CloseIcon as I } from "./styles.js";
-const T = ({ type: e, close: c, label: l }) => {
-  const o = e ? m[e] : { label: l, iconName: void 0 };
-  return /* @__PURE__ */ r(t, { children: [
-    /* @__PURE__ */ r(a, { children: [
-      (o == null ? void 0 : o.iconName) && /* @__PURE__ */ n(
-        s,
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { QuestionType as e } from "@streamlayer/sdk-web-types";
+import { CloseButton as c } from "../../../close-btn/index.js";
+import { QuestionTypeData as p } from "../../constants.js";
+import { Container as s, QuestionTypeWrap as l, QuestionTypeIcon as m, QuestionTypeTitle as u, CloseIconWrap as C, CloseIcon as f } from "./styles.js";
+const b = ({ type: r, closeTimer: n, close: i, label: d }) => {
+  const o = r ? p[r] : { label: d, iconName: void 0 };
+  return /* @__PURE__ */ a(s, { children: [
+    /* @__PURE__ */ a(l, { children: [
+      (o == null ? void 0 : o.iconName) && /* @__PURE__ */ t(
+        m,
         {
-          "data-type-trivia": e === i.TRIVIA,
-          "data-type-poll": e === i.POLL,
+          "data-type-trivia": r === e.TRIVIA,
+          "data-type-poll": r === e.POLL,
           name: o.iconName
         }
       ),
-      (o == null ? void 0 : o.label) && /* @__PURE__ */ n(p, { children: o.label })
+      (o == null ? void 0 : o.label) && /* @__PURE__ */ t(u, { children: o.label })
     ] }),
-    /* @__PURE__ */ n(d, { onClick: c, children: /* @__PURE__ */ n(I, { name: "icon-cross" }) })
+    n != null && n.seconds ? /* @__PURE__ */ t(c, { close: i, autoClose: n.auto, duration: n.seconds }) : /* @__PURE__ */ t(C, { onClick: i, children: /* @__PURE__ */ t(f, { name: "icon-cross" }) })
   ] });
 };
 export {
-  T as VoteHeader
+  b as VoteHeader
 };

package/lib/ui/gamification/vote/styles.js

@@ -1,5 +1,5 @@
 import { styled as s } from "@linaria/react";
-import { SDKScrollContainer as o } from "../../../app/styles.js";
+import { SDKScrollContainer as o } from "../../../app/app/styles.js";
 import { ShowIn as n } from "../../show-in/index.js";
 const l = /* @__PURE__ */ s("div")({
   name: "Container",

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

@@ -1,5 +1,5 @@
 import { ButtonProps } from '.';
 export declare const FeaturedGroupsButtonId = "featuredGroups";
 export declare const FeaturedGroupsButton: React.FC<Omit<ButtonProps, 'label' | 'id' | 'icon'> & {
-    labelFull: boolean;
+    labelFull?: boolean;
 }>;

package/lib/ui/navigation/index.d.ts

@@ -1,5 +1,7 @@
-import { ButtonProps } from './button';
-export declare const Navigation: React.FC<{
-    children: React.ReactElement<ButtonProps>[];
+export declare const Navigation: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const NavigationItems: {
+    __wyw_meta: unknown;
+} & import('react').FC<{
+    children: React.ReactElement<import('./button').ButtonProps>[];
     className?: string;
 }>;

package/lib/ui/navigation/index.js

@@ -1,16 +1,15 @@
-import { jsx as o } from "react/jsx-runtime";
-import { styled as r } from "@linaria/react";
-const n = /* @__PURE__ */ r("div")({
-  name: "Buttons",
-  class: "b6tbwuy",
+import { styled as a } from "@linaria/react";
+import { Navigation as s } from "./styles.js";
+const n = /* @__PURE__ */ a("div")({
+  name: "Navigation",
+  class: "n6tbwuy",
   propsAsIs: !1
-}), i = ({
-  children: t,
-  className: s
-}) => /* @__PURE__ */ o(n, {
-  className: s,
-  children: t
+}), t = () => s, e = /* @__PURE__ */ a(t())({
+  name: "NavigationItems",
+  class: "n1up4z7v",
+  propsAsIs: !0
 });
 export {
-  i as Navigation
+  n as Navigation,
+  e as NavigationItems
 };

package/lib/ui/navigation/masters.js

@@ -1,5 +1,5 @@
 import { styled as a } from "@linaria/react";
-import { Navigation as s } from "./index.js";
+import { Navigation as s } from "./styles.js";
 const n = /* @__PURE__ */ a("div")({
   name: "Navigation",
   class: "n19lpak2",

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

@@ -0,0 +1,5 @@
+import { ButtonProps } from './button';
+export declare const Navigation: React.FC<{
+    children: React.ReactElement<ButtonProps>[];
+    className?: string;
+}>;

package/lib/ui/navigation/styles.js

@@ -0,0 +1,16 @@
+import { jsx as t } from "react/jsx-runtime";
+import { styled as r } from "@linaria/react";
+const n = /* @__PURE__ */ r("div")({
+  name: "Buttons",
+  class: "b5o8qbl",
+  propsAsIs: !1
+}), i = ({
+  children: o,
+  className: s
+}) => /* @__PURE__ */ t(n, {
+  className: s,
+  children: o
+});
+export {
+  i as Navigation
+};

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

@@ -1,30 +1,31 @@
-import { jsxs as c, jsx as o } 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";
-const M = ({
-  instantView: r,
+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 = ({
+  instantView: o,
   isDetail: l,
-  notification: d,
-  controlVideo: p
+  notification: r,
+  controlVideo: y
 }) => {
-  const m = r == null ? void 0 : r.heading, h = r == null ? void 0 : r.body, g = m || h, u = d == null ? void 0 : d.title, y = d == null ? void 0 : d.body;
-  return /* @__PURE__ */ c(v, { children: [
-    (r == null ? void 0 : r.video) && /* @__PURE__ */ o(
-      e,
+  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: [
+    (o == null ? void 0 : o.video) && /* @__PURE__ */ d(
+      v,
       {
-        source: r.video.url,
-        poster: r.video.thumbnailUrl,
-        controlVideo: p
+        source: o.video.url,
+        poster: o.video.thumbnailUrl,
+        controlVideo: y,
+        autoPlay: o.autoPlayVideo === e.ENABLED
       }
     ),
-    (r == null ? void 0 : r.image) && !(r != null && r.video) && /* @__PURE__ */ o(C, { "data-rounded": r.imageMode === I.ROUNDED, children: /* @__PURE__ */ o(b, { src: r == null ? void 0 : r.image }) }),
-    /* @__PURE__ */ c(x, { children: [
-      /* @__PURE__ */ o(D, { children: l && g ? m : u }),
-      /* @__PURE__ */ o(T, { children: l && g ? h : y })
+    (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 })
     ] })
   ] });
 };
 export {
-  M as InsightContent
+  N as InsightContent
 };

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

@@ -1,5 +1,6 @@
-import { breakpoints as R } from "./breakpoints.js";
-const a = {
+import { breakpoints as i } from "./breakpoints.js";
+import { FONT as t } from "./constants.js";
+const E = {
   BG_TRANSPARENT: "rgba(0,0,0, .8)",
   BLUE_QUESTION_ACTION_BTN: "#1589ee",
   WHITE: "#FFFFFF",
@@ -13,6 +14,7 @@ const a = {
   UNSUCCESS: "#DF2F3B",
   SECONDARY_RED1: "#DF2F3B",
   NEUTRALS_WHITE: "#FFFFFF",
+  NEUTRALS_WHITE1: "#FFFFFF",
   NEUTRALS_GRAY1: "#F7F7F7",
   NEUTRALS_GRAY2: "#F2F2F1",
   NEUTRALS_GRAY3: "#E8E8E8",
@@ -22,20 +24,29 @@ const a = {
   NEUTRALS_GRAY7: "#6B6F73",
   NEUTRALS_GRAY9: "#25282A"
 }, e = {
+  ...t,
   REGULAR: "'Benton Sans', BentonSans, Arial, Helvetica, sans-serif",
   SERIF: "'Tiempos', 'Tiempos Text', Times New Roman, serif",
   COLOR: "#fff",
   WEIGHT_DEFAULT: "500"
-}, n = Object.entries(a).reduce((t, [o, A]) => `
-    ${t}
-    --color-${o.toLowerCase().replaceAll("_", "-")}: ${A};
-  `, ""), E = `
-  ${n}
+}, R = Object.entries(E).reduce((n, [a, o]) => `
+    ${n}
+    --color-${a.toLowerCase().replaceAll("_", "-")}: ${o};
+  `, ""), s = `
+  ${R}
   --font-family: ${e.REGULAR};
   --font-regular: ${e.REGULAR};
   --font-color: ${e.COLOR};
   --font-serif: ${e.SERIF};
   --font-weight-default: ${e.WEIGHT_DEFAULT};
+  --font-weight-default1: ${e.WEIGHT_DEFAULT1};
+  --font-weight-default2: ${e.WEIGHT_DEFAULT2};
+  --font-weight-default3: ${e.WEIGHT_DEFAULT3};
+  --font-size-default: ${t.SIZE_DEFAULT};
+  --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};
 
   --header-offset: 0px;
   --header-height: 68px;
@@ -47,18 +58,30 @@ const a = {
   --pill-offset: 0px;
   --max-width: 600px;
   --max-notifications-width: 400px;
+  --header-padding: 12px 12px 12px 16px;
+  --margin-web-link-btn: 0px;
+  --padding-web-link-btn: 11px 16px;
+  --insight-content-padding: 0px;
+  --close-icon-size: 12px;
+  --close-icon-stroke-width: 1.5;
+  --padding-title-default: 0px;
+  --insight-image-display: inline;
+  --web-link-align-items: center;
+  --web-link-column-gap: 10px;
 
-  ${R.down("xl")`
+  --insight-image-ratio: 16/9;
+
+  ${i.down("xl")`
     --header-offset: 56px;
     --watch-live-header: 46px;
   `}
 
-  ${R.intermediate("xl", "lg")`
+  ${i.intermediate("xl", "lg")`
     --header-offset: 76px;
   `}
-`, i = "m1ojpy2l";
+`, r = "m1ojpy2l";
 export {
-  a as MASTERS_COLORS,
-  i as mastersTheme,
-  E as mastersThemeStr
+  E as MASTERS_COLORS,
+  r as mastersTheme,
+  s as mastersThemeStr
 };

package/lib/ui/theme/theme.js

@@ -1,5 +1,5 @@
-import { jsx as t, jsxs as i } from "react/jsx-runtime";
-import { breakpoints as d } from "./breakpoints.js";
+import { jsx as i, jsxs as t } from "react/jsx-runtime";
+import { breakpoints as n } from "./breakpoints.js";
 import { colors as p, colorsAdvertisement as s, FONT as e } from "./constants.js";
 const l = `
   ${p}
@@ -13,27 +13,20 @@ const l = `
   --font-weight-default2: ${e.WEIGHT_DEFAULT2};
   --font-weight-default3: ${e.WEIGHT_DEFAULT3};
   --font-size-default: ${e.SIZE_DEFAULT};
-  --font-size-default1: ${e.SIZE_DEFAULT1};
-  --font-size-default2: ${e.SIZE_DEFAULT2};
+  --font-size-secondary: ${e.SIZE_DEFAULT1};
+  --font-size-small: ${e.SIZE_DEFAULT2};
   --line-height-default: ${e.LINE_HEIGHT};
   --margin-title-default: ${e.MARGIN_TITLE_DEFAULT};
 
   --header-offset: 0px;
   --header-height: 68px;
-  --watch-live-header: 0px;
   --animation-duration: 0.5s;
-  --promo-animation-duration: 0.5s;
-  --promo-animation-function: ease-in;
   --animation-function: ease;
   --container-padding: 16px;
   --border-radius: 8px;
   --pill-offset: 0px;
   --max-width: 600px;
   --max-notifications-width: 400px;
-  --promo-header-line-height: 18.5px;
-  --row-gap-default: 12px;
-  --row-gap-default1: 12px;
-  --row-gap-default2: 16px;
   --header-padding: 12px 12px 12px 16px;
   --margin-web-link-btn: 0px;
   --padding-web-link-btn: 11px 16px;
@@ -45,12 +38,18 @@ const l = `
   --web-link-align-items: center;
   --web-link-column-gap: 10px;
 
-  ${d.down("xl")`
+  --row-gap-default: 12px;
+  --row-gap-default1: 12px;
+  --row-gap-default2: 16px;
+  --promo-header-line-height: 18.5px;
+  --promo-animation-duration: 0.5s;
+  --promo-animation-function: ease-in;
+
+  ${n.down("xl")`
     --header-offset: 0px;
-    --watch-live-header: 46px;
   `}
 
-  ${d.intermediate("xl", "lg")`
+  ${n.intermediate("xl", "lg")`
     --header-offset: 0px;
   `}
 
@@ -86,23 +85,23 @@ const l = `
     --adv-sponsor-logo-size: 28px;
     --adv-sponsor-font-size: 12px;
   }
-`, m = "StreamLayerCSSReset", g = "ttkj0ah", c = () => /* @__PURE__ */ t("table", {
-  children: /* @__PURE__ */ i("table", {
-    children: [/* @__PURE__ */ t("thead", {
-      children: /* @__PURE__ */ i("tr", {
-        children: [/* @__PURE__ */ t("th", {
+`, m = "StreamLayerCSSReset", g = "ttkj0ah", c = () => /* @__PURE__ */ i("table", {
+  children: /* @__PURE__ */ t("table", {
+    children: [/* @__PURE__ */ i("thead", {
+      children: /* @__PURE__ */ t("tr", {
+        children: [/* @__PURE__ */ i("th", {
           children: "name"
-        }), /* @__PURE__ */ t("th", {
+        }), /* @__PURE__ */ i("th", {
           children: "value"
         })]
       })
-    }), /* @__PURE__ */ t("tbody", {
-      children: l.split(";").map((n) => {
-        const a = n.trim(), [o, r] = a.split(":");
-        return /* @__PURE__ */ i("tr", {
-          children: [/* @__PURE__ */ t("td", {
+    }), /* @__PURE__ */ i("tbody", {
+      children: l.split(";").map((d) => {
+        const a = d.trim(), [o, r] = a.split(":");
+        return /* @__PURE__ */ t("tr", {
+          children: [/* @__PURE__ */ i("td", {
             children: o
-          }), /* @__PURE__ */ t("td", {
+          }), /* @__PURE__ */ i("td", {
             children: r
           })]
         }, a);

package/lib/ui/timer/index.d.ts

@@ -4,6 +4,8 @@ interface TimerProps {
     duration?: number;
     onTimerExpired?: () => void;
 }
-export declare const RemainingTime: import('@linaria/react').StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const SimpleTimer: React.FC<TimerProps & {
+    className?: string;
+}>;
 export declare const Timer: React.FC<TimerProps>;
 export {};

package/lib/ui/timer/index.js

@@ -1,45 +1,67 @@
-import { jsx as r } from "react/jsx-runtime";
-import { styled as M } from "@linaria/react";
-import { useState as c, useEffect as _, useCallback as n } from "react";
-import { CountdownCircleTimer as h } from "react-countdown-circle-timer";
-import { TIMER_COLORS as p, TIMER_GREEN as E, TIMER_RED as S, TIMER_GRAY as g } from "../theme/constants.js";
-const k = [10, 10, 1, 0], O = /* @__PURE__ */ M("div")({
-  name: "RemainingTime",
+import { jsx as s } from "react/jsx-runtime";
+import { styled as T } from "@linaria/react";
+import { useState as m, useEffect as d, useCallback as a } from "react";
+import { CountdownCircleTimer as f } from "react-countdown-circle-timer";
+import { TIMER_COLORS as g, TIMER_GREEN as M, TIMER_RED as S, TIMER_GRAY as _ } from "../theme/constants.js";
+const k = [10, 10, 1, 0], u = /* @__PURE__ */ T("div")({
+  name: "RemainingTimeCircle",
   class: "r165427",
   propsAsIs: !1
-}), u = E, l = S, m = g, L = ({
-  isPlaying: i = !0,
-  duration: t = 30,
-  onTimerExpired: s
+}), E = /* @__PURE__ */ T("div")({
+  name: "RemainingTime",
+  class: "r17garf3",
+  propsAsIs: !1
+}), O = M, l = S, R = _, G = ({
+  className: o,
+  duration: e = 30,
+  onTimerExpired: r,
+  isPlaying: n = !0
+}) => /* @__PURE__ */ s(f, {
+  isPlaying: n,
+  strokeWidth: 0,
+  duration: e,
+  colors: l,
+  size: 24,
+  onComplete: r,
+  children: ({
+    remainingTime: i
+  }) => /* @__PURE__ */ s(E, {
+    className: o,
+    children: e === 0 ? 0 : i
+  })
+}), L = ({
+  isPlaying: o = !0,
+  duration: e = 30,
+  onTimerExpired: r
 }) => {
-  const [R, o] = c(t > 10 ? u : l), [f, a] = c(2);
-  _(() => {
-    t === 0 && (a(0), o(m));
+  const [n, t] = m(e > 10 ? O : l), [i, C] = m(2);
+  d(() => {
+    e === 0 && (C(0), t(R));
+  }, [e]);
+  const p = ({
+    remainingTime: c
+  }) => /* @__PURE__ */ s(u, {
+    children: e === 0 ? 0 : c
+  }), h = a(() => {
+    r == null || r(), t(R);
+  }, [r, t]), I = a((c) => {
+    c === 10 && t(l);
   }, [t]);
-  const C = ({
-    remainingTime: e
-  }) => /* @__PURE__ */ r(O, {
-    children: t === 0 ? 0 : e
-  }), T = n(() => {
-    s == null || s(), o(m);
-  }, [s, o]), I = n((e) => {
-    e === 10 && o(l);
-  }, [o]);
-  return /* @__PURE__ */ r(h, {
-    isPlaying: i,
-    duration: t,
-    colors: p,
+  return /* @__PURE__ */ s(f, {
+    isPlaying: o,
+    duration: e,
+    colors: g,
     colorsTime: k,
     size: 32,
-    strokeWidth: f,
+    strokeWidth: i,
     trailStrokeWidth: 2,
-    trailColor: R,
-    onComplete: T,
+    trailColor: n,
+    onComplete: h,
     onUpdate: I,
-    children: C
+    children: p
   });
 };
 export {
-  O as RemainingTime,
+  G as SimpleTimer,
   L as Timer
 };

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

@@ -7,6 +7,8 @@ export type VideoPlayerProps = {
     controlVideo?: (props: ControlVideoProps) => void;
     aspectRatio?: string;
     onPlay?: () => void;
+    autoPlay?: boolean;
+    hideControls?: boolean;
 };
 export declare const pauseAllVideos: () => void;
 /**