@streamlayer/react-ui 0.98.0 → 0.99.0

package/lib/ui/navigation/button/FeaturedGroups.js

@@ -2,14 +2,11 @@ import { jsx as e } from "react/jsx-runtime";
 import { styled as r } from "@linaria/react";
 import { SvgIcon as u } from "../../icons/index.js";
 import { Button as n } from "./index.js";
-import "react";
-import "@linaria/core";
-import "./styles.js";
 const s = () => u, a = /* @__PURE__ */ r(s())({
   name: "ButtonIcon",
   class: "b11des7c",
   propsAsIs: !0
-}), G = "featuredGroups", B = (t) => {
+}), i = "featuredGroups", l = (t) => {
   var o;
   return /* @__PURE__ */ e(n, {
     ...t,
@@ -22,6 +19,6 @@ const s = () => u, a = /* @__PURE__ */ r(s())({
   });
 };
 export {
-  B as FeaturedGroupsButton,
-  G as FeaturedGroupsButtonId
+  l as FeaturedGroupsButton,
+  i as FeaturedGroupsButtonId
 };

package/lib/ui/navigation/button/LeaderBoard.js

@@ -1,27 +1,24 @@
-import { jsx as r } from "react/jsx-runtime";
-import { styled as e } from "@linaria/react";
+import { jsx as e } from "react/jsx-runtime";
+import { styled as r } from "@linaria/react";
 import { SvgIcon as a } from "../../icons/index.js";
 import { Button as d } from "./index.js";
-import "react";
-import "@linaria/core";
-import "./styles.js";
-const n = () => a, m = /* @__PURE__ */ e(n())({
+const n = () => a, c = /* @__PURE__ */ r(n())({
   name: "ButtonIcon",
   class: "b180jd7l",
   propsAsIs: !0
-}), u = "leaderboard", I = (o) => {
+}), B = "leaderboard", b = (o) => {
   var t;
-  return /* @__PURE__ */ r(d, {
+  return /* @__PURE__ */ e(d, {
     ...o,
     label: "Leader Board",
     id: "leaderboard",
-    icon: /* @__PURE__ */ r(m, {
+    icon: /* @__PURE__ */ e(c, {
       name: "icon-btn-leaderboard",
       "data-selected": (t = o.active) == null ? void 0 : t.toString()
     })
   });
 };
 export {
-  I as LeaderBoardButton,
-  u as LeaderBoardButtonId
+  b as LeaderBoardButton,
+  B as LeaderBoardButtonId
 };

package/lib/ui/navigation/button/index.js

@@ -1,20 +1,19 @@
-import { jsx as e, jsxs as l, Fragment as m } from "react/jsx-runtime";
-import { cx as d } from "@linaria/core";
-import { SButton as s, SelectedButton as u, HoverIconState as p, HoverIconLeaderboardState as h, ButtonIcon as B, ButtonLabel as f } from "./styles.js";
-import "@linaria/react";
-const I = ({ disabled: n, active: r, onClick: a, label: c, icon: o, id: t }) => /* @__PURE__ */ e(
+import { jsx as t, jsxs as l, Fragment as d } from "react/jsx-runtime";
+import { cx as m } from "@linaria/core";
+import { SButton as s, SelectedButton as u, HoverIconState as h, HoverIconLeaderboardState as p, ButtonIcon as B, ButtonLabel as f } from "./styles.js";
+const I = ({ disabled: n, active: r, onClick: a, label: c, icon: o, id: e }) => /* @__PURE__ */ t(
   s,
   {
     onClick: a,
     disabled: n,
-    className: d(
+    className: m(
       r && u,
-      !r && (t === "channels" || t === "featuredGroups") && p,
-      !r && t === "leaderboard" && h
+      !r && (e === "channels" || e === "featuredGroups") && h,
+      !r && e === "leaderboard" && p
     ),
-    children: /* @__PURE__ */ l(m, { children: [
-      o && /* @__PURE__ */ e(B, { children: o }),
-      /* @__PURE__ */ e(f, { children: c })
+    children: /* @__PURE__ */ l(d, { children: [
+      o && /* @__PURE__ */ t(B, { children: o }),
+      /* @__PURE__ */ t(f, { children: c })
     ] })
   }
 );

package/lib/ui/navigation/masters.js

@@ -1,7 +1,6 @@
 import { styled as a } from "@linaria/react";
 import { Navigation as s } from "./index.js";
-import "react/jsx-runtime";
-const p = /* @__PURE__ */ a("div")({
+const n = /* @__PURE__ */ a("div")({
   name: "Navigation",
   class: "n19lpak2",
   propsAsIs: !1
@@ -11,6 +10,6 @@ const p = /* @__PURE__ */ a("div")({
   propsAsIs: !0
 });
 export {
-  p as Navigation,
+  n as Navigation,
   e as NavigationItems
 };

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

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

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

@@ -1,31 +1,29 @@
 import { jsxs as r, jsx as t } from "react/jsx-runtime";
 import { SvgIcon as a } from "../../../icons/index.js";
 import { getTimeUntilNow as l } from "../../../../utils/common.js";
-import { Container as p, ImageContainer as s, Image as d, TwitterIcon as f, Details as h, Name as D, UserNameAndDate as I } from "./styles.js";
-import "@linaria/react";
-import "react";
-const C = ({ image: i, name: o, userName: e, verified: c, createdTweet: n }) => {
-  const m = n && l(n);
-  return /* @__PURE__ */ r(p, { children: [
-    i && /* @__PURE__ */ r(s, { children: [
-      /* @__PURE__ */ t(d, { src: i }),
+import { Container as s, ImageContainer as d, Image as p, TwitterIcon as f, Details as h, Name as D, UserNameAndDate as I } from "./styles.js";
+const v = ({ image: e, name: i, userName: n, verified: m, createdTweet: o }) => {
+  const c = o && l(o);
+  return /* @__PURE__ */ r(s, { children: [
+    e && /* @__PURE__ */ r(d, { children: [
+      /* @__PURE__ */ t(p, { src: e }),
       /* @__PURE__ */ t(f, { name: "twitter" })
     ] }),
     /* @__PURE__ */ r(h, { children: [
-      o && /* @__PURE__ */ r(D, { children: [
-        o,
+      i && /* @__PURE__ */ r(D, { children: [
+        i,
         " ",
-        c && /* @__PURE__ */ t(a, { name: "icon-twitter-verified" })
+        m && /* @__PURE__ */ t(a, { name: "icon-twitter-verified" })
       ] }),
-      e && /* @__PURE__ */ r(I, { children: [
+      n && /* @__PURE__ */ r(I, { children: [
         "@",
-        e,
+        n,
         " ",
-        m && `･ ${m}`
+        c && `･ ${c}`
       ] })
     ] })
   ] });
 };
 export {
-  C as Account
+  v as Account
 };

package/lib/ui/questions/twitter/account/styles.js

@@ -1,42 +1,40 @@
 import { styled as s } from "@linaria/react";
 import { SvgIcon as e } from "../../../icons/index.js";
-import "react/jsx-runtime";
-import "react";
-const m = /* @__PURE__ */ s("div")({
+const t = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "cjq447q",
   propsAsIs: !1
-}), c = /* @__PURE__ */ s("div")({
+}), r = /* @__PURE__ */ s("div")({
   name: "ImageContainer",
   class: "i14egogb",
   propsAsIs: !1
-}), i = /* @__PURE__ */ s("img")({
+}), c = /* @__PURE__ */ s("img")({
   name: "Image",
   class: "i2g9g4l",
   propsAsIs: !1
-}), a = () => e, p = /* @__PURE__ */ s(a())({
+}), a = () => e, m = /* @__PURE__ */ s(a())({
   name: "TwitterIcon",
   class: "t1c454nm",
   propsAsIs: !0
-}), l = /* @__PURE__ */ s("div")({
+}), i = /* @__PURE__ */ s("div")({
   name: "Details",
   class: "d11nigc3",
   propsAsIs: !1
-}), I = /* @__PURE__ */ s("div")({
+}), p = /* @__PURE__ */ s("div")({
   name: "Name",
   class: "nrxa4k8",
   propsAsIs: !1
-}), g = /* @__PURE__ */ s("div")({
+}), l = /* @__PURE__ */ s("div")({
   name: "UserNameAndDate",
   class: "u1p051g3",
   propsAsIs: !1
 });
 export {
-  m as Container,
-  l as Details,
-  i as Image,
-  c as ImageContainer,
-  I as Name,
-  p as TwitterIcon,
-  g as UserNameAndDate
+  t as Container,
+  i as Details,
+  c as Image,
+  r as ImageContainer,
+  p as Name,
+  m as TwitterIcon,
+  l as UserNameAndDate
 };

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

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

package/lib/ui/skeleton/index.js

@@ -1,7 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import { Container as m } from "./styles.js";
-import "@linaria/react";
-const f = ({ children: r, style: o, loading: t }) => t ? /* @__PURE__ */ e(m, { style: o, children: r }) : r;
+import { Container as n } from "./styles.js";
+const i = ({ children: r, style: o, loading: t }) => t ? /* @__PURE__ */ e(n, { style: o, children: r }) : r;
 export {
-  f as Skeleton
+  i as Skeleton
 };

package/lib/ui/theme/constants.js

@@ -59,7 +59,7 @@ const N = {
   sm: 576,
   md: 768,
   lg: 992,
-  xl: 1215,
+  xl: 1200,
   xxl: 1440
 }, G = {
   landscape: "landscape",

package/lib/ui/theme/index.js

@@ -1,8 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import { theme as o } from "./theme.js";
-import "./breakpoints.js";
-import "./constants.js";
-const p = ({ children: r, style: m }) => /* @__PURE__ */ e("div", { className: "StreamLayerSDKTheme", children: /* @__PURE__ */ e("div", { className: o, style: m, children: r }) });
+import { theme as a } from "./theme.js";
+const i = ({ children: r, style: m }) => /* @__PURE__ */ e("div", { className: "StreamLayerSDKTheme", children: /* @__PURE__ */ e("div", { className: a, style: m, children: r }) });
 export {
-  p as StreamLayerThemeProvider
+  i as StreamLayerThemeProvider
 };

package/lib/ui/theme/theme.js

@@ -1,8 +1,8 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { breakpoints as i } from "./breakpoints.js";
-import { colors as l, FONT as t } from "./constants.js";
-const s = `
-  ${l}
+import { breakpoints as n } from "./breakpoints.js";
+import { colors as h, FONT as t } from "./constants.js";
+const l = `
+  ${h}
   --font-family: ${t.REGULAR};
   --font-regular: ${t.REGULAR};
   --font-color: ${t.COLOR};
@@ -11,6 +11,7 @@ const s = `
 
   --header-offset: 0px;
   --header-height: 68px;
+  --watch-live-header: 0px;
   --animation-duration: 0.5s;
   --animation-function: ease;
   --container-padding: 16px;
@@ -19,14 +20,15 @@ const s = `
   --max-width: 600px;
   --max-notifications-width: 400px;
 
-  ${i.down("xl")`
+  ${n.down("xl")`
     --header-offset: 56px;
+    --watch-live-header: 46px;
   `}
 
-  ${i.intermediate("xl", "lg")`
+  ${n.intermediate("xl", "lg")`
     --header-offset: 76px;
   `}
-`, m = "StreamLayerCSSReset", p = "ttkj0ah", x = () => /* @__PURE__ */ e("table", {
+`, p = "StreamLayerCSSReset", m = "ttkj0ah", x = () => /* @__PURE__ */ e("table", {
   children: /* @__PURE__ */ r("table", {
     children: [/* @__PURE__ */ e("thead", {
       children: /* @__PURE__ */ r("tr", {
@@ -37,22 +39,22 @@ const s = `
         })]
       })
     }), /* @__PURE__ */ e("tbody", {
-      children: s.split(";").map((o) => {
-        const n = o.trim(), [a, d] = n.split(":");
+      children: l.split(";").map((a) => {
+        const i = a.trim(), [o, d] = i.split(":");
         return /* @__PURE__ */ r("tr", {
           children: [/* @__PURE__ */ e("td", {
-            children: a
+            children: o
           }), /* @__PURE__ */ e("td", {
             children: d
           })]
-        }, n);
+        }, i);
       })
     })]
   })
 });
 export {
   x as ThemeVariables,
-  m as resetCss,
-  p as theme,
-  s as themeStr
+  p as resetCss,
+  m as theme,
+  l as themeStr
 };

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

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