@streamlayer/react-ui 1.9.0 → 1.10.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/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,4 +1,4 @@
-import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { jsx as i, jsxs as t } from "react/jsx-runtime";
 import { breakpoints as d } from "./breakpoints.js";
 import { colors as p, colorsAdvertisement as s, FONT as e } from "./constants.js";
 const l = `
@@ -13,8 +13,8 @@ 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};
 
@@ -22,18 +22,12 @@ const l = `
   --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,6 +39,13 @@ const l = `
   --web-link-align-items: center;
   --web-link-column-gap: 10px;
 
+  --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;
+
   ${d.down("xl")`
     --header-offset: 0px;
     --watch-live-header: 46px;
@@ -86,23 +87,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", c = "ttkj0ah", g = () => /* @__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", {
+    }), /* @__PURE__ */ i("tbody", {
       children: l.split(";").map((n) => {
         const a = n.trim(), [o, r] = a.split(":");
-        return /* @__PURE__ */ i("tr", {
-          children: [/* @__PURE__ */ t("td", {
+        return /* @__PURE__ */ t("tr", {
+          children: [/* @__PURE__ */ i("td", {
             children: o
-          }), /* @__PURE__ */ t("td", {
+          }), /* @__PURE__ */ i("td", {
             children: r
           })]
         }, a);
@@ -111,8 +112,8 @@ const l = `
   })
 });
 export {
-  c as ThemeVariables,
+  g as ThemeVariables,
   m as resetCss,
-  g as theme,
+  c as theme,
   l as themeStr
 };

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;
 /**

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

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

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

@@ -3,3 +3,4 @@ export declare const Player: import('@linaria/react').StyledComponent<import('re
 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;
+export declare const HideControls: import('@linaria/core').LinariaClassName;

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

@@ -7,19 +7,20 @@ const e = /* @__PURE__ */ s("div")({
   name: "Player",
   class: "p6703cq",
   propsAsIs: !1
-}), l = /* @__PURE__ */ s("img")({
+}), n = /* @__PURE__ */ s("img")({
   name: "Poster",
   class: "p12ow7zo",
   propsAsIs: !1
-}), n = /* @__PURE__ */ s("div")({
+}), l = /* @__PURE__ */ s("div")({
   name: "Control",
   class: "cdpal9o",
   propsAsIs: !1
-}), r = "t1xke4ml";
+}), t = "t1xke4ml", r = "h1yzxv57";
 export {
   e as Container,
-  n as Control,
+  l as Control,
+  r as HideControls,
   a as Player,
-  l as Poster,
-  r as ToggleIconPause
+  n as Poster,
+  t as ToggleIconPause
 };