@video-editor/ui 0.0.1-beta.15 → 0.0.1-beta.17

package/dist/index--01NyScE.js

@@ -0,0 +1,814 @@
+import { defineComponent as re, createElementBlock as _, openBlock as T, withModifiers as oe, normalizeStyle as D, createStaticVNode as Ce, createElementVNode as c, Fragment as xe, renderList as _e, normalizeClass as ze, createCommentVNode as te, toDisplayString as R, renderSlot as X, withDirectives as Ve, vShow as Le, computed as b, ref as z, watch as pe, toRef as Fe, onMounted as Oe, onBeforeUnmount as He, createVNode as ke, unref as K, withCtx as Ye } from "vue";
+const We = /* @__PURE__ */ re({
+  name: "TimelinePlayhead",
+  __name: "TimelinePlayhead",
+  props: {
+    left: {}
+  },
+  emits: ["dragStart"],
+  setup(i, { emit: g }) {
+    const a = g;
+    return (r, l) => (T(), _("div", {
+      class: "ve-playhead",
+      style: D({ left: `${i.left}px` }),
+      onMousedown: l[0] || (l[0] = oe((k) => a("dragStart", k), ["stop", "prevent"]))
+    }, [...l[1] || (l[1] = [
+      Ce('<svg class="ve-playhead__icon" width="12" height="18" viewBox="0 0 12 18" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-8e647d40><g filter="url(#ve_playhead_drop_shadow)" data-v-8e647d40><path d="M2 3C2 1.89543 2.89543 1 4 1H8C9.10457 1 10 1.89543 10 3V11.0925C10 11.6692 9.75104 12.2178 9.31701 12.5976L7.31701 14.3476C6.56296 15.0074 5.43704 15.0074 4.68299 14.3476L2.68299 12.5976C2.24896 12.2178 2 11.6692 2 11.0925V3Z" fill="white" data-v-8e647d40></path><path d="M4 1.5H8C8.82843 1.5 9.5 2.17157 9.5 3V11.0928C9.49991 11.5252 9.31275 11.9369 8.9873 12.2217L6.9873 13.9717C6.42191 14.466 5.57809 14.466 5.0127 13.9717L3.0127 12.2217C2.68725 11.9369 2.50009 11.5252 2.5 11.0928V3C2.5 2.17157 3.17157 1.5 4 1.5Z" stroke="currentColor" data-v-8e647d40></path></g><defs data-v-8e647d40><filter id="ve_playhead_drop_shadow" x="0" y="0" width="12" height="17.8428" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" data-v-8e647d40><feFlood flood-opacity="0" result="BackgroundImageFix" data-v-8e647d40></feFlood><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" data-v-8e647d40></feColorMatrix><feOffset dy="1" data-v-8e647d40></feOffset><feGaussianBlur stdDeviation="1" data-v-8e647d40></feGaussianBlur><feComposite in2="hardAlpha" operator="out" data-v-8e647d40></feComposite><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" data-v-8e647d40></feColorMatrix><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" data-v-8e647d40></feBlend><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" data-v-8e647d40></feBlend></filter></defs></svg><div class="ve-playhead__line" data-v-8e647d40></div>', 2)
+    ])], 36));
+  }
+}), le = (i, g) => {
+  const a = i.__vccOpts || i;
+  for (const [r, l] of g)
+    a[r] = l;
+  return a;
+}, Ae = /* @__PURE__ */ le(We, [["__scopeId", "data-v-8e647d40"]]), je = { class: "ve-ruler" }, Ue = { class: "ve-ruler__ticks" }, Ke = {
+  key: 0,
+  class: "ve-ruler__label"
+}, qe = /* @__PURE__ */ re({
+  name: "TimelineRuler",
+  __name: "TimelineRuler",
+  props: {
+    ticks: {}
+  },
+  setup(i) {
+    return (g, a) => (T(), _("div", je, [
+      c("div", Ue, [
+        (T(!0), _(xe, null, _e(i.ticks, (r) => (T(), _("div", {
+          key: r.timeMs,
+          class: ze(["ve-ruler__tick", { "ve-ruler__tick--major": r.isMajor }]),
+          style: D({
+            left: `${r.position}px`,
+            transform: "translateX(-50%)"
+          })
+        }, [
+          a[0] || (a[0] = c("div", { class: "ve-ruler__line" }, null, -1)),
+          r.isMajor && r.label ? (T(), _("div", Ke, R(r.label), 1)) : te("", !0)
+        ], 6))), 128))
+      ])
+    ]));
+  }
+}), Je = /* @__PURE__ */ le(qe, [["__scopeId", "data-v-30f91636"]]), Qe = { class: "ve-toolbar" }, et = { class: "ve-toolbar__group" }, tt = ["disabled"], nt = { class: "ve-toolbar__group" }, at = { class: "ve-zoom" }, st = { class: "ve-toolbar__group" }, it = ["disabled"], ot = { class: "ve-toolbar__time" }, rt = /* @__PURE__ */ re({
+  name: "TimelineToolbar",
+  __name: "TimelineToolbar",
+  props: {
+    zoom: {},
+    minZoom: { default: 0.25 },
+    maxZoom: { default: 10 },
+    currentTime: { default: 0 },
+    duration: { default: 0 },
+    formatTime: { type: Function, default: (i) => `${(i / 1e3).toFixed(2)}s` }
+  },
+  emits: ["zoomIn", "zoomOut"],
+  setup(i, { emit: g }) {
+    const a = g;
+    return (r, l) => (T(), _("div", Qe, [
+      c("div", et, [
+        X(r.$slots, "left-actions", {}, () => [
+          c("button", {
+            class: "ve-btn",
+            type: "button",
+            disabled: i.zoom <= i.minZoom,
+            onClick: l[0] || (l[0] = (k) => a("zoomOut"))
+          }, " - ", 8, tt)
+        ], !0)
+      ]),
+      c("div", nt, [
+        X(r.$slots, "center", {}, () => [
+          c("div", at, R((i.zoom * 100).toFixed(0)) + "% ", 1)
+        ], !0)
+      ]),
+      c("div", st, [
+        X(r.$slots, "right-actions", {}, () => [
+          c("button", {
+            class: "ve-btn",
+            type: "button",
+            disabled: i.zoom >= i.maxZoom,
+            onClick: l[1] || (l[1] = (k) => a("zoomIn"))
+          }, " + ", 8, it)
+        ], !0)
+      ]),
+      c("div", ot, [
+        X(r.$slots, "time", {
+          currentTime: i.currentTime,
+          duration: i.duration
+        }, () => [
+          c("span", null, R(i.formatTime?.(i.currentTime || 0)), 1),
+          l[2] || (l[2] = c("span", { class: "ve-toolbar__time-divider" }, "/", -1)),
+          c("span", null, R(i.formatTime?.(i.duration || 0)), 1)
+        ], !0)
+      ])
+    ]));
+  }
+}), lt = /* @__PURE__ */ le(rt, [["__scopeId", "data-v-85ddeb0f"]]), dt = { class: "ve-track__body" }, ut = ["onMousedown", "onClick"], ct = { class: "ve-segment__content" }, mt = { class: "ve-segment__title" }, vt = { class: "ve-segment__time" }, ft = {
+  key: 0,
+  class: "ve-segment__selection"
+}, gt = ["onMousedown"], ht = ["onMousedown"], pt = /* @__PURE__ */ re({
+  name: "TimelineTracks",
+  __name: "TimelineTracks",
+  props: {
+    tracks: {},
+    trackHeight: {},
+    trackGap: {},
+    selectedSegmentId: {},
+    dragPreview: {},
+    resizePreview: {}
+  },
+  emits: ["segment-click", "segment-mousedown", "resize-start"],
+  setup(i, { emit: g }) {
+    const a = g;
+    function r(x, d) {
+      a("segment-click", x, d);
+    }
+    function l(x, d) {
+      a("segment-mousedown", x, d);
+    }
+    function k(x, d, v) {
+      a("resize-start", x, d, v);
+    }
+    return (x, d) => (T(), _("div", {
+      class: "ve-timeline__tracks",
+      style: D({ gap: `${i.trackGap}px`, paddingTop: `${i.trackGap}px` })
+    }, [
+      (T(!0), _(xe, null, _e(i.tracks, (v) => (T(), _("div", {
+        key: v.track.id,
+        class: ze(["ve-track", {
+          "ve-track--main": v.track.isMain,
+          "ve-track--has-selection": v.segments.some((s) => s.isSelected)
+        }]),
+        style: D({ height: `${i.trackHeight}px` })
+      }, [
+        X(x.$slots, "track", {
+          track: v.track,
+          index: v.trackIndex,
+          segments: v.segments,
+          height: i.trackHeight
+        }, () => [
+          c("div", dt, [
+            (T(!0), _(xe, null, _e(v.segments, (s) => Ve((T(), _("div", {
+              key: s.segment.id,
+              class: ze(["ve-segment", {
+                "ve-segment--selected": s.isSelected
+              }]),
+              style: D({
+                left: `${s.left}px`,
+                width: `${s.width}px`,
+                backgroundColor: s.segment.color || v.track.color || "#222226"
+              }),
+              onMousedown: oe((u) => l(s, u), ["prevent", "stop"]),
+              onClick: oe((u) => r(s, u), ["stop"])
+            }, [
+              X(x.$slots, "segment", {
+                layout: s,
+                segment: s.segment,
+                track: s.track,
+                isSelected: s.isSelected
+              }, () => [
+                c("div", ct, [
+                  c("div", mt, R(s.segment.type || "segment"), 1),
+                  c("div", vt, R((s.segment.start / 1e3).toFixed(2)) + "s - " + R((s.segment.end / 1e3).toFixed(2)) + "s ", 1)
+                ])
+              ], !0),
+              s.isSelected ? (T(), _("div", ft, [
+                c("div", {
+                  class: "ve-segment__handle ve-segment__handle--left",
+                  onMousedown: oe((u) => k(s, "start", u), ["stop"])
+                }, [...d[0] || (d[0] = [
+                  Ce('<div class="ve-segment__handle-dots" data-v-52f6113c><div class="ve-segment__handle-dot" data-v-52f6113c></div><div class="ve-segment__handle-dot" data-v-52f6113c></div><div class="ve-segment__handle-dot" data-v-52f6113c></div><div class="ve-segment__handle-dot" data-v-52f6113c></div></div>', 1)
+                ])], 40, gt),
+                c("div", {
+                  class: "ve-segment__handle ve-segment__handle--right",
+                  onMousedown: oe((u) => k(s, "end", u), ["stop"])
+                }, [...d[1] || (d[1] = [
+                  Ce('<div class="ve-segment__handle-dots" data-v-52f6113c><div class="ve-segment__handle-dot" data-v-52f6113c></div><div class="ve-segment__handle-dot" data-v-52f6113c></div><div class="ve-segment__handle-dot" data-v-52f6113c></div><div class="ve-segment__handle-dot" data-v-52f6113c></div></div>', 1)
+                ])], 40, ht)
+              ])) : te("", !0)
+            ], 46, ut)), [
+              [Le, i.dragPreview?.segment.id !== s.segment.id && i.resizePreview?.segment.id !== s.segment.id]
+            ])), 128))
+          ])
+        ], !0)
+      ], 6))), 128))
+    ], 4));
+  }
+}), kt = /* @__PURE__ */ le(pt, [["__scopeId", "data-v-52f6113c"]]);
+function xt(i, g, a, r) {
+  function l(x) {
+    if (!i.value || !g.value.length)
+      return null;
+    const d = i.value.getBoundingClientRect(), v = x - d.top, s = a.value + r.value, u = r.value;
+    if (v < u / 2)
+      return { isGap: !0, insertIndex: 0 };
+    for (let p = 0; p < g.value.length; p++) {
+      const f = (p + 1) * s - u / 2, ne = (p + 1) * s + u / 2;
+      if (v >= f && v < ne)
+        return { isGap: !0, insertIndex: p + 1 };
+    }
+    return null;
+  }
+  function k(x) {
+    if (!i.value || !g.value.length)
+      return -1;
+    const d = i.value.getBoundingClientRect(), v = x - d.top, s = a.value + r.value;
+    return v < 0 ? -1 : Math.min(
+      g.value.length - 1,
+      Math.max(0, Math.floor(v / s))
+    );
+  }
+  return {
+    detectTrackGap: l,
+    resolveTrackIndexFromClientY: k
+  };
+}
+function _t(i, g, a) {
+  return {
+    snapGuides: b(() => {
+      if (!i.value)
+        return [];
+      const l = /* @__PURE__ */ new Set(), k = i.value.startTime, x = i.value.endTime, d = 100;
+      return ("value" in g ? g.value : g).forEach((s) => {
+        s.segments.forEach((u) => {
+          u.id !== i.value?.segment.id && (Math.abs(u.start - k) < d && l.add(u.start), Math.abs(u.end - k) < d && l.add(u.end), Math.abs(u.start - x) < d && l.add(u.start), Math.abs(u.end - x) < d && l.add(u.end));
+        });
+      }), Array.from(l).map((s) => ({
+        time: s,
+        left: s * a.value
+      }));
+    })
+  };
+}
+function Tt(i) {
+  const {
+    tracks: g,
+    tracksRef: a,
+    trackHeightPx: r,
+    trackGapPx: l,
+    pixelsPerMs: k,
+    disableInteraction: x,
+    snap: d,
+    onDragStart: v,
+    onDrag: s,
+    onDragEnd: u
+  } = i, p = z(null), f = z(null), { detectTrackGap: ne, resolveTrackIndexFromClientY: Te } = xt(
+    a,
+    g,
+    r,
+    l
+  ), { snapGuides: de } = _t(
+    f,
+    g,
+    k
+  );
+  function ue(h, q) {
+    x.value || (p.value = {
+      layout: h,
+      initialX: q.clientX,
+      initialY: q.clientY,
+      moved: !1
+    });
+  }
+  function ce(h, q, G, C) {
+    const { layout: m, initialX: Me, initialY: we } = h, me = q - Me, H = G - we, Y = Math.abs(me) > 5 || Math.abs(H) > 5;
+    if (!h.moved && Y) {
+      h.moved = !0;
+      const Z = {
+        segment: m.segment,
+        track: m.track,
+        trackIndex: m.trackIndex,
+        segmentIndex: m.segmentIndex,
+        startTime: m.segment.start,
+        endTime: m.segment.end,
+        targetTrackIndex: m.trackIndex,
+        targetTrackId: m.track.id,
+        isNewTrack: !1,
+        visualTrackIndex: m.trackIndex,
+        isValidTarget: !0,
+        mouseDeltaY: 0
+      };
+      v(Z);
+    }
+    const W = m.segment.end - m.segment.start, A = m.segment.type || m.track.type, J = Te(G), $ = J >= 0 ? J : m.trackIndex, O = g.value[$];
+    let M, Q, j, B = !1, ae, F = !0;
+    if (O && O.type === A) {
+      const Z = ne(G);
+      Z ? (B = !0, ae = Z.insertIndex, M = Z.insertIndex, Q = Z.insertIndex, j = m.track.id, F = !0) : (M = $, Q = $, j = O.id, F = !0);
+    } else if (!a.value)
+      M = m.trackIndex, Q = $, j = m.track.id, F = !1;
+    else {
+      const Z = a.value.getBoundingClientRect(), $e = G - Z.top, ve = r.value + l.value, fe = $ * ve + r.value / 2, ge = $e < fe;
+      B = !0, ae = ge ? $ : $ + 1, M = ae, Q = $, j = m.track.id, F = !0;
+    }
+    const Ie = d(m.segment.start + me / Math.max(k.value, 1e-4)), U = Math.max(0, Ie), Se = U + W, ie = {
+      segment: m.segment,
+      track: m.track,
+      trackIndex: m.trackIndex,
+      segmentIndex: m.segmentIndex,
+      startTime: U,
+      endTime: Se,
+      targetTrackIndex: M,
+      targetTrackId: j,
+      isNewTrack: B,
+      newTrackInsertIndex: ae,
+      visualTrackIndex: Q,
+      isValidTarget: F,
+      mouseDeltaY: H
+    };
+    h.moved && (f.value = ie, C === "drag" ? s(ie) : C === "end" && u(ie));
+  }
+  function E(h) {
+    p.value && ce(p.value, h.clientX, h.clientY, "drag");
+  }
+  function S(h) {
+    p.value && (ce(p.value, h.clientX, h.clientY, "end"), p.value = null, f.value = null);
+  }
+  return {
+    // State
+    draggingState: p,
+    dragPreview: f,
+    snapGuides: de,
+    // Methods
+    startDrag: ue,
+    handleDragMove: E,
+    handleDragEnd: S
+  };
+}
+const Mt = { class: "ve-timeline" }, wt = { class: "ve-segment__content" }, bt = { class: "ve-segment__title" }, It = { class: "ve-segment__time" }, St = { class: "ve-segment__content" }, $t = { class: "ve-segment__title" }, yt = { class: "ve-segment__time" }, Ct = 120, Ze = 10, zt = /* @__PURE__ */ re({
+  name: "VideoTimeline",
+  __name: "index",
+  props: {
+    tracks: {},
+    currentTime: {},
+    duration: {},
+    zoom: {},
+    minZoom: { default: 0.25 },
+    maxZoom: { default: 10 },
+    snapStep: { default: 0 },
+    trackHeight: { default: 56 },
+    trackGap: { default: 8 },
+    rulerHeight: { default: 28 },
+    minSegmentDuration: { default: 60 },
+    selectedSegmentId: { default: null },
+    disableInteraction: { type: Boolean, default: !1 },
+    fps: { default: 30 }
+  },
+  emits: ["update:currentTime", "update:zoom", "segmentClick", "segmentDragStart", "segmentDrag", "segmentDragEnd", "segmentResizeStart", "segmentResize", "segmentResizeEnd", "backgroundClick"],
+  setup(i, { emit: g }) {
+    const a = i, r = g, l = z(null), k = z(null), x = z(null), d = z(0);
+    let v = null;
+    const s = z(B(a.zoom ?? a.minZoom)), u = z(!1);
+    pe(() => a.zoom, (e) => {
+      typeof e == "number" && (s.value = B(e));
+    }), pe(s, (e) => r("update:zoom", e));
+    const p = b(() => typeof a.duration == "number" ? Math.max(a.duration, 0) : Math.max(
+      0,
+      ...a.tracks.flatMap(
+        (n) => n.segments.map((t) => t.end)
+      )
+    ));
+    pe(p, (e, n) => {
+      if (!n || !e || n <= 0 || e <= 0 || !u.value || !d.value)
+        return;
+      const t = d.value * s.value / n;
+      if (!Number.isFinite(t) || t <= 0)
+        return;
+      const o = B(t * e / d.value);
+      Math.abs(o - s.value) > 1e-6 && (s.value = o);
+    });
+    const f = b(() => {
+      const e = Math.max(p.value, 1);
+      return Math.max(d.value, 1) * s.value / e;
+    }), ne = b(() => {
+      const e = p.value * f.value, n = Number.isFinite(e) ? Math.max(e, 0) : 0;
+      return Math.max(Math.ceil(n), Math.ceil(d.value || 0));
+    }), Te = b(() => {
+      const e = Math.max(f.value, 1e-4), t = (ne.value || d.value || 0) / e;
+      return Math.max(p.value, t);
+    }), de = b(() => a.currentTime * f.value), ue = b(() => Ie(Te.value, f.value)), ce = b(() => 1e3 / Math.max(a.fps || 30, 1)), E = b(() => a.trackHeight), S = b(() => a.trackGap), h = b(() => a.rulerHeight), q = b(() => a.tracks.map((e, n) => ({
+      track: e,
+      trackIndex: n,
+      segments: e.segments.map((t, o) => {
+        const w = Math.max((t.end - t.start) * f.value, 6), I = t.start * f.value;
+        return {
+          track: e,
+          trackIndex: n,
+          segment: t,
+          segmentIndex: o,
+          left: I,
+          width: w,
+          isSelected: a.selectedSegmentId === t.id
+        };
+      })
+    }))), {
+      draggingState: G,
+      dragPreview: C,
+      snapGuides: m,
+      startDrag: Me,
+      handleDragMove: we,
+      handleDragEnd: me
+    } = Tt({
+      tracks: Fe(a, "tracks"),
+      tracksRef: x,
+      trackHeightPx: E,
+      trackGapPx: S,
+      pixelsPerMs: f,
+      disableInteraction: Fe(a, "disableInteraction"),
+      snap: U,
+      onDragStart: (e) => {
+        r("segmentDragStart", e);
+      },
+      onDrag: (e) => {
+        r("segmentDrag", e);
+      },
+      onDragEnd: (e) => {
+        r("segmentDragEnd", e);
+      }
+    }), H = z(null), Y = b(() => C.value), W = b(() => H.value), A = z(null), J = z(!1), $ = z(!1), O = z(!1), M = b(() => {
+      if (!C.value)
+        return null;
+      const e = C.value, t = q.value.find((y) => y.track.id === e.track.id)?.segments.find((y) => y.segment.id === e.segment.id);
+      if (!t)
+        return null;
+      const o = (e.startTime - e.segment.start) * f.value, I = h.value + e.trackIndex * (E.value + S.value) + S.value + e.mouseDeltaY;
+      return {
+        ...t,
+        left: t.left + o,
+        top: I
+      };
+    }), Q = b(() => {
+      if (!C.value)
+        return 0;
+      const e = C.value;
+      return e.isNewTrack && e.newTrackInsertIndex === 0 ? h.value + S.value : h.value + e.targetTrackIndex * (E.value + S.value) + S.value;
+    });
+    Oe(() => {
+      l.value && (v = new ResizeObserver((e) => {
+        const n = e[0];
+        d.value = n?.contentRect.width || l.value?.clientWidth || 0;
+      }), v.observe(l.value), d.value = l.value.clientWidth || 0), window.addEventListener("mousemove", fe), window.addEventListener("mouseup", ge), ae();
+    }), He(() => {
+      v?.disconnect(), v = null, window.removeEventListener("mousemove", fe), window.removeEventListener("mouseup", ge);
+    }), pe(s, () => {
+      j();
+    });
+    function j() {
+      const e = l.value;
+      if (!e)
+        return;
+      const n = e.clientWidth / 2, t = a.currentTime * f.value - n;
+      e.scrollLeft = Math.max(0, t);
+    }
+    function B(e) {
+      return Number.isFinite(e) ? Math.min(Math.max(e, a.minZoom), a.maxZoom) : a.minZoom;
+    }
+    function ae() {
+      if (u.value)
+        return;
+      if (a.zoom !== void 0) {
+        u.value = !0;
+        return;
+      }
+      if (!d.value || p.value <= 0)
+        return;
+      const e = B(1 / 3);
+      s.value = e, u.value = !0;
+    }
+    function F(e) {
+      const n = Math.max(e, 0), t = Math.floor(n / 1e3), o = Math.floor(t / 60).toString().padStart(2, "0"), w = (t % 60).toString().padStart(2, "0"), I = Math.floor(n % 1e3 / 10).toString().padStart(2, "0");
+      return `${o}:${w}.${I}`;
+    }
+    function be(e) {
+      const n = Math.max(e, 0), t = Math.floor(n / 1e3), o = Math.floor(t / 60).toString().padStart(2, "0"), w = (t % 60).toString().padStart(2, "0");
+      return `${o}:${w}`;
+    }
+    function Ie(e, n) {
+      if (!e || !n)
+        return [];
+      const t = Pe(n, a.fps || 30), o = Math.max(1, Math.round(t.mainMs / t.minorMs)), w = Math.max(e, 1), I = Math.ceil(w / t.minorMs), y = [];
+      for (let P = 0; P <= I; P += 1) {
+        const N = Math.min(w, P * t.minorMs), V = N * n, L = P % o === 0;
+        y.push({
+          position: V,
+          timeMs: N,
+          isMajor: L,
+          label: L ? Be(N, a.fps || 30, t) : void 0
+        });
+      }
+      return y;
+    }
+    function U(e) {
+      const n = a.snapStep, t = n && n > 0 ? n : ce.value;
+      return Math.max(Math.round(e / t) * t, 0);
+    }
+    function Se(e) {
+      if (!k.value)
+        return;
+      if (O.value) {
+        O.value = !1;
+        return;
+      }
+      const n = k.value.getBoundingClientRect(), t = e.clientX - n.left, o = U(t / Math.max(f.value, 1e-4));
+      r("update:currentTime", o), r("backgroundClick", e), $.value = !0;
+    }
+    function ie(e) {
+      a.disableInteraction || (e.preventDefault(), J.value = !0, $.value = !0, Z(e.clientX), j());
+    }
+    function Z(e) {
+      if (!k.value)
+        return;
+      const n = k.value.getBoundingClientRect(), t = e - n.left, o = U(t / Math.max(f.value, 1e-4));
+      r("update:currentTime", o);
+    }
+    function $e(e, n, t) {
+      if (a.disableInteraction)
+        return;
+      t.stopPropagation(), t.preventDefault(), A.value = {
+        layout: e,
+        edge: n,
+        initialX: t.clientX
+      };
+      const o = {
+        segment: e.segment,
+        track: e.track,
+        trackIndex: e.trackIndex,
+        segmentIndex: e.segmentIndex,
+        startTime: e.segment.start,
+        endTime: e.segment.end,
+        edge: n
+      };
+      H.value = o, r("segmentResizeStart", o);
+    }
+    function ve(e, n, t) {
+      const { layout: o, edge: w, initialX: I } = e, P = (n - I) / Math.max(f.value, 1e-4), N = Math.max(a.minSegmentDuration, 10);
+      let V = o.segment.start, L = o.segment.end;
+      if (w === "start")
+        V = U(Math.max(0, o.segment.start + P)), o.segment.end - V < N && (V = o.segment.end - N);
+      else {
+        L = U(Math.max(o.segment.start + N, o.segment.end + P));
+        const { sourceDurationMs: ee, fromTime: he } = o.segment;
+        if (typeof ee == "number" && Number.isFinite(ee) && ee > 0 && typeof he == "number" && Number.isFinite(he) && he >= 0) {
+          const Ne = Math.max(0, ee - he), Ee = V + Ne;
+          L > Ee && (L = Ee);
+        }
+      }
+      const se = {
+        segment: o.segment,
+        track: o.track,
+        trackIndex: o.trackIndex,
+        segmentIndex: o.segmentIndex,
+        startTime: V,
+        endTime: L,
+        edge: w
+      };
+      H.value = se, t === "drag" ? r("segmentResize", se) : t === "end" && r("segmentResizeEnd", se);
+    }
+    function ye(e, n) {
+      G.value?.layout.segment.id === e.segment.id && G.value.moved || r("segmentClick", e, n);
+    }
+    function fe(e) {
+      if (J.value) {
+        Z(e.clientX);
+        return;
+      }
+      if (A.value) {
+        ve(A.value, e.clientX, "drag");
+        return;
+      }
+      we(e);
+    }
+    function ge(e) {
+      if (J.value) {
+        J.value = !1, $.value = !1, Z(e.clientX), O.value = !0;
+        return;
+      }
+      if (A.value) {
+        ve(A.value, e.clientX, "end"), A.value = null, H.value = null, $.value = !1, O.value = !0;
+        return;
+      }
+      if (G.value)
+        if (G.value.moved)
+          O.value = !0;
+        else {
+          const { layout: n } = G.value;
+          ye(n, e);
+        }
+      me(e), $.value = !1;
+    }
+    function De() {
+      s.value = B(s.value * 1.25);
+    }
+    function Re() {
+      s.value = B(s.value / 1.25);
+    }
+    function Pe(e, n) {
+      const o = 1e3 / (Number.isFinite(n) && n > 0 ? n : 30), w = e * o, I = Xe(o), y = Ge(o), P = w >= Ze ? [...y, ...I] : I;
+      let N = null, V = 1 / 0;
+      for (const L of P) {
+        const se = L.mainMs * e;
+        if (se < Ze)
+          continue;
+        const ee = Math.abs(se - Ct);
+        ee < V && (N = L, V = ee);
+      }
+      return N || P[P.length - 1] || y[y.length - 1];
+    }
+    function Xe(e) {
+      return [600, 300, 180, 120, 60, 30, 20, 15, 10, 5, 3, 2, 1].map((t) => {
+        const o = t * 1e3;
+        return {
+          mainMs: o,
+          minorMs: Math.max(o / 10, e),
+          mode: "time",
+          label: "time"
+        };
+      });
+    }
+    function Ge(e) {
+      return [
+        {
+          mainMs: Math.max(e * 2, 1),
+          minorMs: Math.max(e, 1),
+          mode: "frame",
+          label: "frame"
+        },
+        {
+          mainMs: Math.max(e * 10, 1),
+          minorMs: Math.max(e * 2, 1),
+          mode: "frame",
+          label: "frame"
+        },
+        {
+          mainMs: 1e3,
+          minorMs: Math.max(e * 10, 1),
+          mode: "frame",
+          label: "frame"
+        }
+      ];
+    }
+    function Be(e, n, t) {
+      if (t.label === "frame") {
+        const o = Number.isFinite(n) && n > 0 ? n : 30, w = 1e3 / o, y = Math.round(e / w) % o;
+        return y === 0 ? be(e) : `${y}f`;
+      }
+      return be(e);
+    }
+    return (e, n) => (T(), _("div", Mt, [
+      X(e.$slots, "toolbar", {
+        zoom: s.value,
+        canZoomIn: s.value < i.maxZoom,
+        canZoomOut: s.value > i.minZoom,
+        zoomIn: De,
+        zoomOut: Re,
+        currentTime: i.currentTime,
+        duration: p.value,
+        formatTime: F
+      }, () => [
+        ke(lt, {
+          zoom: s.value,
+          "min-zoom": i.minZoom,
+          "max-zoom": i.maxZoom,
+          "current-time": i.currentTime,
+          duration: p.value,
+          "format-time": F,
+          onZoomIn: De,
+          onZoomOut: Re
+        }, null, 8, ["zoom", "min-zoom", "max-zoom", "current-time", "duration"])
+      ], !0),
+      c("div", {
+        ref_key: "viewportRef",
+        ref: l,
+        class: "ve-timeline__viewport",
+        onClick: Se
+      }, [
+        c("div", {
+          ref_key: "contentRef",
+          ref: k,
+          class: "ve-timeline__content",
+          style: D({ width: `${ne.value}px` })
+        }, [
+          X(e.$slots, "ruler", {
+            ticks: ue.value,
+            pixelsPerMs: f.value
+          }, () => [
+            ke(Je, {
+              ticks: ue.value,
+              style: D({ height: `${h.value}px` })
+            }, null, 8, ["ticks", "style"])
+          ], !0),
+          X(e.$slots, "playhead", {
+            left: de.value,
+            currentTime: i.currentTime
+          }, () => [
+            ke(Ae, {
+              class: "top-0",
+              left: de.value,
+              onDragStart: ie
+            }, null, 8, ["left"])
+          ], !0),
+          c("div", {
+            ref_key: "tracksRef",
+            ref: x
+          }, [
+            ke(kt, {
+              tracks: q.value,
+              "track-height": E.value,
+              "track-gap": S.value,
+              "selected-segment-id": a.selectedSegmentId,
+              "drag-preview": K(C),
+              "resize-preview": H.value,
+              onSegmentClick: ye,
+              onSegmentMousedown: K(Me),
+              onResizeStart: $e
+            }, {
+              segment: Ye(({ layout: t, segment: o, track: w, isSelected: I }) => [
+                X(e.$slots, "segment", {
+                  layout: t,
+                  segment: o,
+                  track: w,
+                  isSelected: I
+                }, () => [
+                  c("div", wt, [
+                    c("div", bt, R(o.type || "segment"), 1),
+                    c("div", It, R(F(o.start)) + " - " + R(F(o.end)), 1)
+                  ])
+                ], !0)
+              ]),
+              _: 3
+            }, 8, ["tracks", "track-height", "track-gap", "selected-segment-id", "drag-preview", "resize-preview", "onSegmentMousedown"])
+          ], 512),
+          M.value ? (T(), _("div", {
+            key: 0,
+            class: "ve-segment ve-segment--dragging",
+            style: D({
+              left: `${M.value.left}px`,
+              width: `${M.value.width}px`,
+              top: `${M.value.top}px`,
+              height: `${E.value}px`,
+              backgroundColor: M.value.segment.color || "var(--ve-primary)"
+            })
+          }, [
+            X(e.$slots, "segment", {
+              layout: M.value,
+              segment: M.value.segment,
+              track: M.value.track,
+              isSelected: M.value.isSelected
+            }, () => [
+              c("div", St, [
+                c("div", $t, R(M.value.segment.type || "segment"), 1),
+                c("div", yt, R(F(M.value.segment.start)) + " - " + R(F(M.value.segment.end)), 1)
+              ])
+            ], !0)
+          ], 4)) : te("", !0),
+          Y.value && !Y.value.isNewTrack ? (T(), _("div", {
+            key: 1,
+            class: "ve-segment ve-segment--placeholder",
+            style: D({
+              left: `${Y.value.startTime * f.value}px`,
+              width: `${(Y.value.endTime - Y.value.startTime) * f.value}px`,
+              top: `${Q.value}px`,
+              height: `${E.value}px`
+            })
+          }, [
+            c("div", {
+              class: "ve-segment--placeholder-inner",
+              style: D({
+                backgroundColor: Y.value.segment.color || "var(--ve-primary)"
+              })
+            }, null, 4)
+          ], 4)) : te("", !0),
+          W.value ? (T(), _("div", {
+            key: 2,
+            class: "ve-segment ve-segment--preview",
+            style: D({
+              left: `${W.value.startTime * f.value}px`,
+              width: `${(W.value.endTime - W.value.startTime) * f.value}px`,
+              top: `${h.value + W.value.trackIndex * (E.value + S.value) + S.value}px`,
+              height: `${E.value}px`,
+              backgroundColor: W.value.segment.color || "var(--ve-primary)"
+            })
+          }, null, 4)) : te("", !0),
+          K(C) && K(m).length ? (T(!0), _(xe, { key: 3 }, _e(K(m), (t) => (T(), _("div", {
+            key: `snap-${t.time}`,
+            class: "ve-snap-guide",
+            style: D({
+              left: `${t.left}px`,
+              top: `${h.value}px`,
+              height: `calc(100% - ${h.value}px)`
+            })
+          }, null, 4))), 128)) : te("", !0),
+          K(C) && K(C).isNewTrack ? (T(), _("div", {
+            key: 4,
+            class: "ve-new-track-line",
+            style: D({
+              top: `${h.value + K(C).targetTrackIndex * (E.value + S.value)}px`,
+              left: "0",
+              right: "0"
+            })
+          }, null, 4)) : te("", !0)
+        ], 4)
+      ], 512)
+    ]));
+  }
+}), Rt = /* @__PURE__ */ le(zt, [["__scopeId", "data-v-808b21f7"]]);
+export {
+  Rt as V,
+  le as _
+};