@evercam/ui 0.0.47-beta.4 → 0.0.47-beta.5

package/dist/index.mjs

@@ -3916,14 +3916,14 @@ const mt = {
       pattern: /e-content-(around|baseline|between|center|end|evenly|normal|start|stretch)/
     }
   ]
-}, Ke = ht(gt), vt = Ke.theme.fontSize, yt = Ke.theme.colors, tr = [
+}, Ke = ht(gt), vt = Ke.theme.fontSize, yt = Ke.theme.colors, rr = [
   T.dot,
   T.xs,
   T.sm,
   T.md,
   T.lg,
   T.xl
-], rr = [
+], nr = [
   T.xs,
   T.sm,
   T.md,
@@ -3945,14 +3945,14 @@ const mt = {
   T["7xl"],
   T["8xl"],
   T["9xl"]
-], nr = [
+], ir = [
   j.warning,
   j.error,
   j.info,
   j.success,
   j.primary,
   j.default
-], ir = [
+], sr = [
   "play",
   "pause",
   "ended",
@@ -4281,31 +4281,43 @@ var Pt = function() {
 );
 const Ht = Lt.exports;
 function Qe() {
-  return !!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
+  const e = document;
+  return !!(e.fullscreenElement || e.mozFullScreenElement || e.webkitFullscreenElement || e.msFullscreenElement);
 }
 function jt(e) {
   if (Qe())
-    return new Promise((t) => t());
-  if (e.requestFullscreen)
-    return e == null ? void 0 : e.requestFullscreen();
-  if (e.mozRequestFullScreen)
-    return e == null ? void 0 : e.mozRequestFullScreen();
-  if (e.webkitRequestFullScreen)
-    return e == null ? void 0 : e.webkitRequestFullScreen();
-  if (e.msRequestFullscreen)
-    return e == null ? void 0 : e.msRequestFullscreen();
+    return new Promise((r) => r(null));
+  const t = e;
+  if (t.requestFullscreen)
+    return t == null ? void 0 : t.requestFullscreen();
+  if (t.mozRequestFullScreen)
+    return t == null ? void 0 : t.mozRequestFullScreen();
+  if (t.webkitRequestFullScreen)
+    return t == null ? void 0 : t.webkitRequestFullScreen();
+  if (t.msRequestFullscreen)
+    return t == null ? void 0 : t.msRequestFullscreen();
 }
 function Bt() {
   if (!Qe())
-    return new Promise((e) => e());
-  if (document.exitFullscreen)
-    return document.exitFullscreen();
-  if (document.mozCancelFullScreen)
-    return document.mozCancelFullScreen();
-  if (document.webkitCancelFullScreen)
-    return document.webkitCancelFullScreen();
-  if (document.msExitFullscreen)
-    return document.msExitFullscreen();
+    return new Promise((t) => t(null));
+  const e = document;
+  if (e.exitFullscreen)
+    return e.exitFullscreen();
+  if (e.mozCancelFullScreen)
+    return e.mozCancelFullScreen();
+  if (e.webkitCancelFullScreen)
+    return e.webkitCancelFullScreen();
+  if (e.msExitFullscreen)
+    return e.msExitFullscreen();
+}
+function Wt(e, t) {
+  let r = null;
+  return function(...n) {
+    const a = this;
+    r !== null && clearTimeout(r), r = setTimeout(() => {
+      r = null, e.apply(a, n);
+    }, t || 1e3);
+  };
 }
 const le = new Intl.NumberFormat(void 0, {
   minimumIntegerDigits: 2
@@ -4326,7 +4338,7 @@ const le = new Intl.NumberFormat(void 0, {
   return n === 0 ? `${r}:${le.format(t)}` : `${n}:${le.format(
     r
   )}:${le.format(t)}`;
-}, Wt = q.extend({
+}, Rt = q.extend({
   name: "VideoPlayer",
   components: {
     ESpinner: Je
@@ -4581,7 +4593,7 @@ const le = new Intl.NumberFormat(void 0, {
     }
   }
 });
-var Rt = function() {
+var Ut = function() {
   var t = this, r = t._self._c;
   return r("div", { ref: "videoContainer", staticClass: "video-container paused", attrs: { "data-volume-level": "high" } }, [r("video", t._g(t._b({ ref: "player", attrs: { controls: !1, preload: "auto" }, on: { ended: t.handleEnded, click: t.togglePlay, loadedmetadata: t.getDuration, timeupdate: t.handleTimeUpdate, loadeddata: t.handleLoading } }, "video", t.videoOptions, !1), t.videoListeners), t._l(t.sourceItems, function(n) {
     return r("source", { key: n.src, attrs: { src: n.src, type: n.type }, on: { error: t.handle404Error } });
@@ -4592,20 +4604,20 @@ var Rt = function() {
     "fa-expand": !t.isFullscreen,
     "fa-compress": t.isFullscreen
   }, on: { click: t.toggleFullscreenMode } })])])]);
-}, Ut = [function() {
+}, Nt = [function() {
   var e = this, t = e._self._c;
   return t("div", { staticClass: "timeline" }, [t("div", { staticClass: "thumb-indicator" })]);
-}], Nt = /* @__PURE__ */ X(
-  Wt,
+}], It = /* @__PURE__ */ X(
   Rt,
   Ut,
+  Nt,
   !1,
   null,
   "99c9162d",
   null,
   null
 );
-const It = Nt.exports, re = (e) => {
+const Vt = It.exports, re = (e) => {
   const t = u.utcFormat("%_d")(e), n = {
     1: "st",
     2: "nd",
@@ -4655,7 +4667,7 @@ const It = Nt.exports, re = (e) => {
   infinity: 1 / 0
 };
 var Se, Te, Ee, $e, De, ke, Oe, Ae;
-const Vt = {
+const qt = {
   [ee.overview]: [
     {
       precision: S._30_seconds,
@@ -4964,7 +4976,7 @@ const Vt = {
   unbind(e) {
     e.__resizeObserver__ && (e.__resizeObserver__.disconnect(), delete e.__resizeObserver__);
   }
-}, qt = [
+}, Xt = [
   {
     name: "resize-observer",
     definition: et
@@ -4987,7 +4999,7 @@ const Vt = {
 }, Q = {
   areaGradient: "area-gradient",
   loadingGradient: "loading-gradient"
-}, Xt = q.extend({
+}, Yt = q.extend({
   name: "ETimeline",
   directives: {
     resizeObserver: et
@@ -4999,7 +5011,7 @@ const Vt = {
     },
     xAxesConfig: {
       type: Object,
-      default: () => Vt
+      default: () => qt
     },
     dark: {
       type: Boolean,
@@ -5101,7 +5113,9 @@ const Vt = {
       leftCurtainWidth: 50,
       rightCurtainWidth: 50,
       isHoveringCurtain: !1,
-      isDraggingCurtain: !1
+      isDraggingCurtain: !1,
+      debouncedOnResize: () => {
+      }
     };
   },
   computed: {
@@ -5234,6 +5248,9 @@ const Vt = {
         this.isHoveringTimeline = !1;
     }
   },
+  created() {
+    this.debouncedOnResize = Wt(this.handleResize, 100);
+  },
   mounted() {
     this.initTimeline();
   },
@@ -5342,7 +5359,7 @@ const Vt = {
       };
     },
     handleResize({ contentRect: e }) {
-      this.svg && (this.svg.attr("width", e.width), this.updateCurtainsOnResize(e.width));
+      this.svg && (this.svg.attr("width", e.width), this.updateAndRedrawTimeline());
     },
     handleDarkModeChange() {
       if (!this.showLabels)
@@ -5754,9 +5771,9 @@ const Vt = {
     }
   }
 });
-var Yt = function() {
+var Zt = function() {
   var t = this, r = t._self._c;
-  return r("div", { staticClass: "e-relative e-timeline e-border e-rounded", class: t.classes.wrapper }, [r("div", { staticClass: "e-timeline__background e-w-full e-h-full e-absolute e-top-0 e-rounded", class: t.classes.background }), r("div", { directives: [{ name: "resize-observer", rawName: "v-resize-observer", value: t.handleResize, expression: "handleResize" }], ref: "timelineContainer", staticClass: "e-timeline__svg-container e-relative e-h-13 e-rounded e-select-none e-overflow-x-hidden e-overflow-hidden" }), r("div", { directives: [{ name: "show", rawName: "v-show", value: t.isHoveringTimeline && !t.isInteractingWithCurtain, expression: "isHoveringTimeline && !isInteractingWithCurtain" }], ref: "cursor", staticClass: "e-timeline__cursor e-absolute e-bg-green-600 e-w-px e-h-full e-top-0 e-pointer-events-none" }), r("div", { ref: "tooltip", staticClass: "e-absolute", style: t.eventTooltipStyle }, [t._t("tooltip", function() {
+  return r("div", { staticClass: "e-relative e-timeline e-border e-rounded", class: t.classes.wrapper }, [r("div", { staticClass: "e-timeline__background e-w-full e-h-full e-absolute e-top-0 e-rounded", class: t.classes.background }), r("div", { directives: [{ name: "resize-observer", rawName: "v-resize-observer", value: t.debouncedOnResize, expression: "debouncedOnResize" }], ref: "timelineContainer", staticClass: "e-timeline__svg-container e-relative e-h-13 e-rounded e-select-none e-overflow-x-hidden e-overflow-hidden" }), r("div", { directives: [{ name: "show", rawName: "v-show", value: t.isHoveringTimeline && !t.isInteractingWithCurtain, expression: "isHoveringTimeline && !isInteractingWithCurtain" }], ref: "cursor", staticClass: "e-timeline__cursor e-absolute e-bg-green-600 e-w-px e-h-full e-top-0 e-pointer-events-none" }), r("div", { ref: "tooltip", staticClass: "e-absolute", style: t.eventTooltipStyle }, [t._t("tooltip", function() {
     return [r("div", { directives: [{ name: "show", rawName: "v-show", value: t.isHoveringTimeline && !t.isHoveringEvent && !t.isInteractingWithCurtain && !t.cursorTimestamp, expression: `
           isHoveringTimeline &&
           !isHoveringEvent &&
@@ -5768,50 +5785,50 @@ var Yt = function() {
       return r("div", { key: a }, [r("strong", [t._v(t._s(n.type) + " Count")]), t._v(": " + t._s(n.count) + " ")]);
     })], 2) : t.hoveredEvent ? r("div", [t.hoveredEvent.timestamp ? r("div", [r("strong", [t._v("Event time")]), t._v(": " + t._s(t.hoveredEvent.timestamp) + " ")]) : t._e(), t.hoveredEvent.startDate ? r("div", [r("strong", [t._v("From")]), t._v(":" + t._s(t.hoveredEvent.startDate) + " ")]) : t._e(), t.hoveredEvent.endDate ? r("div", [r("strong", [t._v("To")]), t._v(":" + t._s(t.hoveredEvent.endDate) + " ")]) : t._e()]) : t._e()]) : t._e()];
   }, { event: t.hoveredEvent, counts: t.hoveredCounts, active: t.isHoveringEvent && !t.isInteractingWithCurtain, type: t.hoveredEventType })], 2)]);
-}, Zt = [], Kt = /* @__PURE__ */ X(
-  Xt,
+}, Kt = [], Jt = /* @__PURE__ */ X(
   Yt,
   Zt,
+  Kt,
   !1,
   null,
   null,
   null,
   null
 );
-const Jt = Kt.exports, Ce = {
+const Qt = Jt.exports, Ce = {
   EAvatar: ut,
   EBadge: Fe,
   EIcon: St,
   ESpinner: Je,
   ERow: Mt,
   ECol: Ht,
-  EVideoPlayer: It,
-  ETimeline: Jt
-}, sr = {
+  EVideoPlayer: Vt,
+  ETimeline: Qt
+}, ar = {
   install(e) {
     Object.keys(Ce).forEach((t) => {
       e.component(t, Ce[t]);
-    }), qt.forEach(({ name: t, definition: r }) => {
+    }), Xt.forEach(({ name: t, definition: r }) => {
       e.directive(t, r);
     });
   }
 };
 export {
-  rr as AvatarSizes,
-  nr as BadgeColors,
-  tr as BadgeSizes,
+  nr as AvatarSizes,
+  ir as BadgeColors,
+  rr as BadgeSizes,
   j as BaseColor,
   yt as Colors,
-  qt as DirectivesMap,
+  Xt as DirectivesMap,
   ut as EAvatar,
   Fe as EBadge,
   Ht as ECol,
   St as EIcon,
   Mt as ERow,
   Je as ESpinner,
-  Jt as ETimeline,
-  ir as EVENTS,
-  It as EVideoPlayer,
+  Qt as ETimeline,
+  sr as EVENTS,
+  Vt as EVideoPlayer,
   bt as IconSizes,
   et as ResizeObserverDirective,
   T as Size,
@@ -5819,7 +5836,8 @@ export {
   ee as TimelineAxis,
   te as TimelineChartType,
   Ce as components,
-  sr as default,
+  Wt as debounce,
+  ar as default,
   Bt as exitFullScreen,
   Ke as fullConfig,
   Qe as isFullScreen,