@video-editor/ui 0.0.1-beta.20 → 0.0.1-beta.23

package/dist/index-C0eQjJkj.js

@@ -0,0 +1,915 @@
+import { defineComponent as ue, createElementBlock as k, openBlock as x, withModifiers as se, normalizeStyle as S, createStaticVNode as ze, createElementVNode as c, Fragment as le, renderList as de, normalizeClass as De, createCommentVNode as ee, toDisplayString as E, renderSlot as X, computed as I, withDirectives as He, vShow as Oe, ref as F, watch as xe, toRef as Ze, onMounted as Ae, onBeforeUnmount as Ye, createVNode as _e, unref as L, withCtx as je } from "vue";
+const We = /* @__PURE__ */ ue({
+  name: "TimelinePlayhead",
+  __name: "TimelinePlayhead",
+  props: {
+    left: {}
+  },
+  emits: ["dragStart"],
+  setup(s, { emit: f }) {
+    const i = f;
+    return (u, m) => (x(), k("div", {
+      class: "ve-playhead",
+      style: S({ left: `${s.left}px` }),
+      onMousedown: m[0] || (m[0] = se((T) => i("dragStart", T), ["stop", "prevent"]))
+    }, [...m[1] || (m[1] = [
+      ze('<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));
+  }
+}), ce = (s, f) => {
+  const i = s.__vccOpts || s;
+  for (const [u, m] of f)
+    i[u] = m;
+  return i;
+}, Ue = /* @__PURE__ */ ce(We, [["__scopeId", "data-v-8e647d40"]]), Ke = { class: "ve-ruler" }, qe = { class: "ve-ruler__ticks" }, Je = {
+  key: 0,
+  class: "ve-ruler__label"
+}, Qe = /* @__PURE__ */ ue({
+  name: "TimelineRuler",
+  __name: "TimelineRuler",
+  props: {
+    ticks: {}
+  },
+  setup(s) {
+    return (f, i) => (x(), k("div", Ke, [
+      c("div", qe, [
+        (x(!0), k(le, null, de(s.ticks, (u) => (x(), k("div", {
+          key: u.timeMs,
+          class: De(["ve-ruler__tick", { "ve-ruler__tick--major": u.isMajor }]),
+          style: S({
+            left: `${u.position}px`,
+            transform: "translateX(-50%)"
+          })
+        }, [
+          i[0] || (i[0] = c("div", { class: "ve-ruler__line" }, null, -1)),
+          u.isMajor && u.label ? (x(), k("div", Je, E(u.label), 1)) : ee("", !0)
+        ], 6))), 128))
+      ])
+    ]));
+  }
+}), Le = /* @__PURE__ */ ce(Qe, [["__scopeId", "data-v-30f91636"]]), et = { class: "ve-toolbar" }, tt = { class: "ve-toolbar__group" }, nt = ["disabled"], at = { class: "ve-toolbar__group" }, st = { class: "ve-zoom" }, it = { class: "ve-toolbar__group" }, rt = ["disabled"], ot = { class: "ve-toolbar__time" }, lt = /* @__PURE__ */ ue({
+  name: "TimelineToolbar",
+  __name: "TimelineToolbar",
+  props: {
+    zoom: {},
+    minZoom: { default: 0.25 },
+    maxZoom: { default: 10 },
+    currentTime: { default: 0 },
+    duration: { default: 0 },
+    formatTime: { type: Function, default: (s) => `${(s / 1e3).toFixed(2)}s` }
+  },
+  emits: ["zoomIn", "zoomOut"],
+  setup(s, { emit: f }) {
+    const i = f;
+    return (u, m) => (x(), k("div", et, [
+      c("div", tt, [
+        X(u.$slots, "left-actions", {}, () => [
+          c("button", {
+            class: "ve-btn",
+            type: "button",
+            disabled: s.zoom <= s.minZoom,
+            onClick: m[0] || (m[0] = (T) => i("zoomOut"))
+          }, " - ", 8, nt)
+        ], !0)
+      ]),
+      c("div", at, [
+        X(u.$slots, "center", {}, () => [
+          c("div", st, E((s.zoom * 100).toFixed(0)) + "% ", 1)
+        ], !0)
+      ]),
+      c("div", it, [
+        X(u.$slots, "right-actions", {}, () => [
+          c("button", {
+            class: "ve-btn",
+            type: "button",
+            disabled: s.zoom >= s.maxZoom,
+            onClick: m[1] || (m[1] = (T) => i("zoomIn"))
+          }, " + ", 8, rt)
+        ], !0)
+      ]),
+      c("div", ot, [
+        X(u.$slots, "time", {
+          currentTime: s.currentTime,
+          duration: s.duration
+        }, () => [
+          c("span", null, E(s.formatTime?.(s.currentTime || 0)), 1),
+          m[2] || (m[2] = c("span", { class: "ve-toolbar__time-divider" }, "/", -1)),
+          c("span", null, E(s.formatTime?.(s.duration || 0)), 1)
+        ], !0)
+      ])
+    ]));
+  }
+}), dt = /* @__PURE__ */ ce(lt, [["__scopeId", "data-v-85ddeb0f"]]), ut = { class: "ve-track__body" }, ct = ["onMousedown", "onClick"], mt = { class: "ve-segment__content" }, vt = { class: "ve-segment__title" }, gt = { class: "ve-segment__time" }, ft = {
+  key: 0,
+  class: "ve-segment__selection"
+}, ht = ["onMousedown"], pt = ["onMousedown"], kt = ["onClick"], xt = ["onClick"], _t = /* @__PURE__ */ ue({
+  name: "TimelineTracks",
+  __name: "TimelineTracks",
+  props: {
+    tracks: {},
+    trackHeight: {},
+    trackGap: {},
+    selectedSegmentId: {},
+    dragPreview: {},
+    resizePreview: {}
+  },
+  emits: ["segment-click", "segment-mousedown", "resize-start", "add-segment"],
+  setup(s, { emit: f }) {
+    const i = s, u = f;
+    function m(d, l) {
+      u("segment-click", d, l);
+    }
+    function T(d, l) {
+      u("segment-mousedown", d, l);
+    }
+    function C(d, l, t) {
+      u("resize-start", d, l, t);
+    }
+    function h(d, l, t, o) {
+      u("add-segment", { track: d, startTime: l, endTime: t, event: o });
+    }
+    const $ = I(() => i.tracks.map((d) => {
+      const l = [];
+      if (d.segments.length > 0 && d.segments[0].segment.start > 0) {
+        const t = d.segments[0];
+        l.push({
+          id: `start-${t.segment.id}`,
+          left: 0,
+          width: t.left,
+          startTime: 0,
+          endTime: t.segment.start
+        });
+      }
+      if (d.segments.length >= 1)
+        for (let t = 0; t < d.segments.length - 1; t++) {
+          const o = d.segments[t], M = d.segments[t + 1];
+          M.segment.start > o.segment.end && l.push({
+            id: `${o.segment.id}-${M.segment.id}`,
+            left: o.left + o.width,
+            width: M.left - (o.left + o.width),
+            startTime: o.segment.end,
+            endTime: M.segment.start
+          });
+        }
+      return {
+        trackId: d.track.id,
+        gaps: l
+      };
+    }));
+    function v(d) {
+      return $.value.find((l) => l.trackId === d)?.gaps || [];
+    }
+    return (d, l) => (x(), k("div", {
+      class: "ve-timeline__tracks",
+      style: S({ gap: `${s.trackGap}px`, paddingTop: `${s.trackGap}px` })
+    }, [
+      (x(!0), k(le, null, de(s.tracks, (t) => (x(), k("div", {
+        key: t.track.id,
+        class: De(["ve-track", {
+          "ve-track--main": t.track.isMain,
+          "ve-track--has-selection": t.segments.some((o) => o.isSelected)
+        }]),
+        style: S({ height: `${s.trackHeight}px` })
+      }, [
+        X(d.$slots, "track", {
+          track: t.track,
+          index: t.trackIndex,
+          segments: t.segments,
+          height: s.trackHeight
+        }, () => [
+          c("div", ut, [
+            (x(!0), k(le, null, de(t.segments, (o) => He((x(), k("div", {
+              key: o.segment.id,
+              class: De(["ve-segment", {
+                "ve-segment--selected": o.isSelected
+              }]),
+              style: S({
+                left: `${o.left}px`,
+                width: `${o.width}px`,
+                backgroundColor: o.segment.color || t.track.color || "#222226"
+              }),
+              onMousedown: se((M) => T(o, M), ["prevent", "stop"]),
+              onClick: se((M) => m(o, M), ["stop"])
+            }, [
+              X(d.$slots, "segment", {
+                layout: o,
+                segment: o.segment,
+                track: o.track,
+                isSelected: o.isSelected
+              }, () => [
+                c("div", mt, [
+                  c("div", vt, E(o.segment.type || "segment"), 1),
+                  c("div", gt, E((o.segment.start / 1e3).toFixed(2)) + "s - " + E((o.segment.end / 1e3).toFixed(2)) + "s ", 1)
+                ])
+              ], !0),
+              o.isSelected ? (x(), k("div", ft, [
+                c("div", {
+                  class: "ve-segment__handle ve-segment__handle--left",
+                  onMousedown: se((M) => C(o, "start", M), ["stop"])
+                }, [...l[0] || (l[0] = [
+                  ze('<div class="ve-segment__handle-dots" data-v-902b9363><div class="ve-segment__handle-dot" data-v-902b9363></div><div class="ve-segment__handle-dot" data-v-902b9363></div><div class="ve-segment__handle-dot" data-v-902b9363></div><div class="ve-segment__handle-dot" data-v-902b9363></div></div>', 1)
+                ])], 40, ht),
+                c("div", {
+                  class: "ve-segment__handle ve-segment__handle--right",
+                  onMousedown: se((M) => C(o, "end", M), ["stop"])
+                }, [...l[1] || (l[1] = [
+                  ze('<div class="ve-segment__handle-dots" data-v-902b9363><div class="ve-segment__handle-dot" data-v-902b9363></div><div class="ve-segment__handle-dot" data-v-902b9363></div><div class="ve-segment__handle-dot" data-v-902b9363></div><div class="ve-segment__handle-dot" data-v-902b9363></div></div>', 1)
+                ])], 40, pt)
+              ])) : ee("", !0)
+            ], 46, ct)), [
+              [Oe, s.dragPreview?.segment.id !== o.segment.id && s.resizePreview?.segment.id !== o.segment.id]
+            ])), 128)),
+            (x(!0), k(le, null, de(v(t.track.id), (o) => (x(), k("div", {
+              key: o.id,
+              class: "ve-track__gap-add",
+              style: S({ left: `${o.left}px`, width: `${o.width}px` }),
+              onClick: se((M) => h(t.track, o.startTime, o.endTime, M), ["stop"])
+            }, [...l[2] || (l[2] = [
+              c("div", { class: "ve-track__gap-add-icon" }, [
+                c("svg", {
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg"
+                }, [
+                  c("path", {
+                    d: "M12 5V19",
+                    stroke: "currentColor",
+                    "stroke-width": "1",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round"
+                  }),
+                  c("path", {
+                    d: "M5 12H19",
+                    stroke: "currentColor",
+                    "stroke-width": "1",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round"
+                  })
+                ])
+              ], -1)
+            ])], 12, kt))), 128)),
+            t.track.isMain ? (x(), k("div", {
+              key: 0,
+              class: "ve-track__add-button",
+              style: S({
+                left: t.segments.length > 0 ? `${t.segments[t.segments.length - 1].left + t.segments[t.segments.length - 1].width}px` : "0px"
+              }),
+              onClick: se((o) => h(t.track, t.segments.length > 0 ? t.segments[t.segments.length - 1].segment.end : 0, void 0, o), ["stop"])
+            }, [...l[3] || (l[3] = [
+              c("svg", {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg"
+              }, [
+                c("path", {
+                  d: "M12 5V19",
+                  stroke: "currentColor",
+                  "stroke-width": "1",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round"
+                }),
+                c("path", {
+                  d: "M5 12H19",
+                  stroke: "currentColor",
+                  "stroke-width": "1",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round"
+                })
+              ], -1)
+            ])], 12, xt)) : ee("", !0)
+          ])
+        ], !0)
+      ], 6))), 128))
+    ], 4));
+  }
+}), Tt = /* @__PURE__ */ ce(_t, [["__scopeId", "data-v-902b9363"]]);
+function Mt(s, f, i, u) {
+  function m(C) {
+    if (!s.value || !f.value.length)
+      return null;
+    const h = s.value.getBoundingClientRect(), $ = C - h.top, v = i.value + u.value, d = u.value;
+    if ($ < d / 2)
+      return { isGap: !0, insertIndex: 0 };
+    for (let l = 0; l < f.value.length; l++) {
+      const t = (l + 1) * v - d / 2, o = (l + 1) * v + d / 2;
+      if ($ >= t && $ < o)
+        return { isGap: !0, insertIndex: l + 1 };
+    }
+    return null;
+  }
+  function T(C) {
+    if (!s.value || !f.value.length)
+      return -1;
+    const h = s.value.getBoundingClientRect(), $ = C - h.top, v = i.value + u.value;
+    return $ < 0 ? -1 : Math.min(
+      f.value.length - 1,
+      Math.max(0, Math.floor($ / v))
+    );
+  }
+  return {
+    detectTrackGap: m,
+    resolveTrackIndexFromClientY: T
+  };
+}
+function wt(s, f, i) {
+  return {
+    snapGuides: I(() => {
+      if (!s.value)
+        return [];
+      const m = /* @__PURE__ */ new Set(), T = s.value.startTime, C = s.value.endTime, h = 100;
+      return ("value" in f ? f.value : f).forEach((v) => {
+        v.segments.forEach((d) => {
+          d.id !== s.value?.segment.id && (Math.abs(d.start - T) < h && m.add(d.start), Math.abs(d.end - T) < h && m.add(d.end), Math.abs(d.start - C) < h && m.add(d.start), Math.abs(d.end - C) < h && m.add(d.end));
+        });
+      }), Array.from(m).map((v) => ({
+        time: v,
+        left: v * i.value
+      }));
+    })
+  };
+}
+function bt(s) {
+  const {
+    tracks: f,
+    tracksRef: i,
+    trackHeightPx: u,
+    trackGapPx: m,
+    pixelsPerMs: T,
+    disableInteraction: C,
+    snap: h,
+    onDragStart: $,
+    onDrag: v,
+    onDragEnd: d
+  } = s, l = F(null), t = F(null), { detectTrackGap: o, resolveTrackIndexFromClientY: M } = Mt(
+    i,
+    f,
+    u,
+    m
+  ), { snapGuides: me } = wt(
+    t,
+    f,
+    T
+  );
+  function ve(p, j) {
+    C.value || (l.value = {
+      layout: p,
+      initialX: j.clientX,
+      initialY: j.clientY,
+      moved: !1
+    });
+  }
+  function ge(p, j, V, R) {
+    const { layout: g, initialX: Te, initialY: Me } = p, fe = j - Te, W = V - Me, U = Math.abs(fe) > 5 || Math.abs(W) > 5;
+    if (!p.moved && U) {
+      p.moved = !0;
+      const P = {
+        segment: g.segment,
+        track: g.track,
+        trackIndex: g.trackIndex,
+        segmentIndex: g.segmentIndex,
+        startTime: g.segment.start,
+        endTime: g.segment.end,
+        targetTrackIndex: g.trackIndex,
+        targetTrackId: g.track.id,
+        isNewTrack: !1,
+        visualTrackIndex: g.trackIndex,
+        isValidTarget: !0,
+        mouseDeltaY: 0
+      };
+      $(P);
+    }
+    const K = g.segment.end - g.segment.start, q = g.segment.type || g.track.type, te = M(V), D = te >= 0 ? te : g.trackIndex, Y = f.value[D];
+    let w, ne, J, N = !1, ie, G = !0;
+    if (Y && Y.type === q) {
+      const P = o(V);
+      P ? (N = !0, ie = P.insertIndex, w = P.insertIndex, ne = P.insertIndex, J = g.track.id, G = !0) : (w = D, ne = D, J = Y.id, G = !0);
+    } else if (!i.value)
+      w = g.trackIndex, ne = D, J = g.track.id, G = !1;
+    else {
+      const P = i.value.getBoundingClientRect(), $e = V - P.top, he = u.value + m.value, Ce = D * he + u.value / 2, pe = $e < Ce;
+      N = !0, ie = pe ? D : D + 1, w = ie, ne = D, J = g.track.id, G = !0;
+    }
+    const be = h(g.segment.start + fe / Math.max(T.value, 1e-4)), Q = Math.max(0, be), Ie = Q + K, oe = {
+      segment: g.segment,
+      track: g.track,
+      trackIndex: g.trackIndex,
+      segmentIndex: g.segmentIndex,
+      startTime: Q,
+      endTime: Ie,
+      targetTrackIndex: w,
+      targetTrackId: J,
+      isNewTrack: N,
+      newTrackInsertIndex: ie,
+      visualTrackIndex: ne,
+      isValidTarget: G,
+      mouseDeltaY: W
+    };
+    p.moved && (t.value = oe, R === "drag" ? v(oe) : R === "end" && d(oe));
+  }
+  function Z(p) {
+    l.value && ge(l.value, p.clientX, p.clientY, "drag");
+  }
+  function z(p) {
+    l.value && (ge(l.value, p.clientX, p.clientY, "end"), l.value = null, t.value = null);
+  }
+  return {
+    // State
+    draggingState: l,
+    dragPreview: t,
+    snapGuides: me,
+    // Methods
+    startDrag: ve,
+    handleDragMove: Z,
+    handleDragEnd: z
+  };
+}
+const It = { class: "ve-timeline" }, $t = { class: "ve-segment__content" }, St = { class: "ve-segment__title" }, Ct = { class: "ve-segment__time" }, zt = { class: "ve-segment__content" }, Dt = { class: "ve-segment__title" }, yt = { class: "ve-segment__time" }, Rt = 120, Ge = 10, Ft = /* @__PURE__ */ ue({
+  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", "add-segment"],
+  setup(s, { emit: f }) {
+    const i = s, u = f, m = F(null), T = F(null), C = F(null), h = F(0);
+    let $ = null;
+    const v = F(N(i.zoom ?? i.minZoom)), d = F(!1);
+    xe(() => i.zoom, (e) => {
+      typeof e == "number" && (v.value = N(e));
+    }), xe(v, (e) => u("update:zoom", e));
+    const l = I(() => typeof i.duration == "number" ? Math.max(i.duration, 0) : Math.max(
+      0,
+      ...i.tracks.flatMap(
+        (a) => a.segments.map((n) => n.end)
+      )
+    ));
+    xe(l, (e, a) => {
+      if (!a || !e || a <= 0 || e <= 0 || !d.value || !h.value)
+        return;
+      const n = h.value * v.value / a;
+      if (!Number.isFinite(n) || n <= 0)
+        return;
+      const r = N(n * e / h.value);
+      Math.abs(r - v.value) > 1e-6 && (v.value = r);
+    });
+    const t = I(() => {
+      const e = Math.max(l.value, 1);
+      return Math.max(h.value, 1) * v.value / e;
+    }), o = I(() => {
+      const e = l.value * t.value, a = Number.isFinite(e) ? Math.max(e, 0) : 0;
+      return Math.max(Math.ceil(a), Math.ceil(h.value || 0));
+    }), M = I(() => {
+      const e = Math.max(t.value, 1e-4), n = (o.value || h.value || 0) / e;
+      return Math.max(l.value, n);
+    }), me = I(() => i.currentTime * t.value), ve = I(() => be(M.value, t.value)), ge = I(() => 1e3 / Math.max(i.fps || 30, 1)), Z = I(() => i.trackHeight), z = I(() => i.trackGap), p = I(() => i.rulerHeight), j = I(() => i.tracks.map((e, a) => ({
+      track: e,
+      trackIndex: a,
+      segments: e.segments.map((n, r) => {
+        const _ = Math.max((n.end - n.start) * t.value, 6), b = n.start * t.value;
+        return {
+          track: e,
+          trackIndex: a,
+          segment: n,
+          segmentIndex: r,
+          left: b,
+          width: _,
+          isSelected: i.selectedSegmentId === n.id
+        };
+      })
+    }))), {
+      draggingState: V,
+      dragPreview: R,
+      snapGuides: g,
+      startDrag: Te,
+      handleDragMove: Me,
+      handleDragEnd: fe
+    } = bt({
+      tracks: Ze(i, "tracks"),
+      tracksRef: C,
+      trackHeightPx: Z,
+      trackGapPx: z,
+      pixelsPerMs: t,
+      disableInteraction: Ze(i, "disableInteraction"),
+      snap: Q,
+      onDragStart: (e) => {
+        u("segmentDragStart", e);
+      },
+      onDrag: (e) => {
+        u("segmentDrag", e);
+      },
+      onDragEnd: (e) => {
+        u("segmentDragEnd", e);
+      }
+    }), W = F(null), U = I(() => R.value), K = I(() => W.value), q = F(null), te = F(!1), D = F(!1), Y = F(!1), w = I(() => {
+      if (!R.value)
+        return null;
+      const e = R.value, n = j.value.find((y) => y.track.id === e.track.id)?.segments.find((y) => y.segment.id === e.segment.id);
+      if (!n)
+        return null;
+      const r = (e.startTime - e.segment.start) * t.value, b = p.value + e.trackIndex * (Z.value + z.value) + z.value + e.mouseDeltaY;
+      return {
+        ...n,
+        left: n.left + r,
+        top: b
+      };
+    }), ne = I(() => {
+      if (!R.value)
+        return 0;
+      const e = R.value;
+      return e.isNewTrack && e.newTrackInsertIndex === 0 ? p.value + z.value : p.value + e.targetTrackIndex * (Z.value + z.value) + z.value;
+    });
+    Ae(() => {
+      m.value && ($ = new ResizeObserver((e) => {
+        const a = e[0];
+        h.value = a?.contentRect.width || m.value?.clientWidth || 0;
+      }), $.observe(m.value), h.value = m.value.clientWidth || 0), window.addEventListener("mousemove", pe), window.addEventListener("mouseup", ye), ie();
+    }), Ye(() => {
+      $?.disconnect(), $ = null, window.removeEventListener("mousemove", pe), window.removeEventListener("mouseup", ye);
+    }), xe(v, () => {
+      J();
+    });
+    function J() {
+      const e = m.value;
+      if (!e)
+        return;
+      const a = e.clientWidth / 2, n = i.currentTime * t.value - a;
+      e.scrollLeft = Math.max(0, n);
+    }
+    function N(e) {
+      return Number.isFinite(e) ? Math.min(Math.max(e, i.minZoom), i.maxZoom) : i.minZoom;
+    }
+    function ie() {
+      if (d.value)
+        return;
+      if (i.zoom !== void 0) {
+        d.value = !0;
+        return;
+      }
+      if (!h.value || l.value <= 0)
+        return;
+      const e = N(1 / 3);
+      v.value = e, d.value = !0;
+    }
+    function G(e) {
+      const a = Math.max(e, 0), n = Math.floor(a / 1e3), r = Math.floor(n / 60).toString().padStart(2, "0"), _ = (n % 60).toString().padStart(2, "0"), b = Math.floor(a % 1e3 / 10).toString().padStart(2, "0");
+      return `${r}:${_}.${b}`;
+    }
+    function we(e) {
+      const a = Math.max(e, 0), n = Math.floor(a / 1e3), r = Math.floor(n / 60).toString().padStart(2, "0"), _ = (n % 60).toString().padStart(2, "0");
+      return `${r}:${_}`;
+    }
+    function be(e, a) {
+      if (!e || !a)
+        return [];
+      const n = Pe(a, i.fps || 30), r = Math.max(1, Math.round(n.mainMs / n.minorMs)), _ = Math.max(e, 1), b = Math.ceil(_ / n.minorMs), y = [];
+      for (let B = 0; B <= b; B += 1) {
+        const H = Math.min(_, B * n.minorMs), O = H * a, A = B % r === 0;
+        y.push({
+          position: O,
+          timeMs: H,
+          isMajor: A,
+          label: A ? Ve(H, i.fps || 30, n) : void 0
+        });
+      }
+      return y;
+    }
+    function Q(e) {
+      const a = i.snapStep, n = a && a > 0 ? a : ge.value;
+      return Math.max(Math.round(e / n) * n, 0);
+    }
+    function Ie(e) {
+      if (!T.value)
+        return;
+      if (Y.value) {
+        Y.value = !1;
+        return;
+      }
+      const a = T.value.getBoundingClientRect(), n = e.clientX - a.left, r = Q(n / Math.max(t.value, 1e-4));
+      u("update:currentTime", r), u("backgroundClick", e), D.value = !0;
+    }
+    function oe(e) {
+      i.disableInteraction || (e.preventDefault(), te.value = !0, D.value = !0, P(e.clientX), J());
+    }
+    function P(e) {
+      if (!T.value)
+        return;
+      const a = T.value.getBoundingClientRect(), n = e - a.left, r = Q(n / Math.max(t.value, 1e-4));
+      u("update:currentTime", r);
+    }
+    function $e(e, a, n) {
+      if (i.disableInteraction)
+        return;
+      n.stopPropagation(), n.preventDefault(), q.value = {
+        layout: e,
+        edge: a,
+        initialX: n.clientX
+      };
+      const r = {
+        segment: e.segment,
+        track: e.track,
+        trackIndex: e.trackIndex,
+        segmentIndex: e.segmentIndex,
+        startTime: e.segment.start,
+        endTime: e.segment.end,
+        edge: a
+      };
+      W.value = r, u("segmentResizeStart", r);
+    }
+    function he(e, a, n) {
+      const { layout: r, edge: _, initialX: b } = e, B = (a - b) / Math.max(t.value, 1e-4), H = Math.max(i.minSegmentDuration, 10);
+      let O = r.segment.start, A = r.segment.end;
+      if (_ === "start")
+        O = Q(Math.max(0, r.segment.start + B)), r.segment.end - O < H && (O = r.segment.end - H);
+      else {
+        A = Q(Math.max(r.segment.start + H, r.segment.end + B));
+        const { sourceDurationMs: ae, fromTime: ke } = r.segment;
+        if (typeof ae == "number" && Number.isFinite(ae) && ae > 0 && typeof ke == "number" && Number.isFinite(ke) && ke >= 0) {
+          const Ne = Math.max(0, ae - ke), Ee = O + Ne;
+          A > Ee && (A = Ee);
+        }
+      }
+      const re = {
+        segment: r.segment,
+        track: r.track,
+        trackIndex: r.trackIndex,
+        segmentIndex: r.segmentIndex,
+        startTime: O,
+        endTime: A,
+        edge: _
+      };
+      W.value = re, n === "drag" ? u("segmentResize", re) : n === "end" && u("segmentResizeEnd", re);
+    }
+    function Se(e, a) {
+      V.value?.layout.segment.id === e.segment.id && V.value.moved || u("segmentClick", e, a);
+    }
+    function Ce({ track: e, startTime: a, endTime: n, event: r }) {
+      const _ = j.value.find((b) => b.track.id === e.id);
+      _ && u("add-segment", { track: _.track, startTime: a, endTime: n, event: r });
+    }
+    function pe(e) {
+      if (te.value) {
+        P(e.clientX);
+        return;
+      }
+      if (q.value) {
+        he(q.value, e.clientX, "drag");
+        return;
+      }
+      Me(e);
+    }
+    function ye(e) {
+      if (te.value) {
+        te.value = !1, D.value = !1, P(e.clientX), Y.value = !0;
+        return;
+      }
+      if (q.value) {
+        he(q.value, e.clientX, "end"), q.value = null, W.value = null, D.value = !1, Y.value = !0;
+        return;
+      }
+      if (V.value)
+        if (V.value.moved)
+          Y.value = !0;
+        else {
+          const { layout: a } = V.value;
+          Se(a, e);
+        }
+      fe(e), D.value = !1;
+    }
+    function Re() {
+      v.value = N(v.value * 1.25);
+    }
+    function Fe() {
+      v.value = N(v.value / 1.25);
+    }
+    function Pe(e, a) {
+      const r = 1e3 / (Number.isFinite(a) && a > 0 ? a : 30), _ = e * r, b = Be(r), y = Xe(r), B = _ >= Ge ? [...y, ...b] : b;
+      let H = null, O = 1 / 0;
+      for (const A of B) {
+        const re = A.mainMs * e;
+        if (re < Ge)
+          continue;
+        const ae = Math.abs(re - Rt);
+        ae < O && (H = A, O = ae);
+      }
+      return H || B[B.length - 1] || y[y.length - 1];
+    }
+    function Be(e) {
+      return [600, 300, 180, 120, 60, 30, 20, 15, 10, 5, 3, 2, 1].map((n) => {
+        const r = n * 1e3;
+        return {
+          mainMs: r,
+          minorMs: Math.max(r / 10, e),
+          mode: "time",
+          label: "time"
+        };
+      });
+    }
+    function Xe(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 Ve(e, a, n) {
+      if (n.label === "frame") {
+        const r = Number.isFinite(a) && a > 0 ? a : 30, _ = 1e3 / r, y = Math.round(e / _) % r;
+        return y === 0 ? we(e) : `${y}f`;
+      }
+      return we(e);
+    }
+    return (e, a) => (x(), k("div", It, [
+      X(e.$slots, "toolbar", {
+        zoom: v.value,
+        canZoomIn: v.value < s.maxZoom,
+        canZoomOut: v.value > s.minZoom,
+        zoomIn: Re,
+        zoomOut: Fe,
+        currentTime: s.currentTime,
+        duration: l.value,
+        formatTime: G
+      }, () => [
+        _e(dt, {
+          zoom: v.value,
+          "min-zoom": s.minZoom,
+          "max-zoom": s.maxZoom,
+          "current-time": s.currentTime,
+          duration: l.value,
+          "format-time": G,
+          onZoomIn: Re,
+          onZoomOut: Fe
+        }, null, 8, ["zoom", "min-zoom", "max-zoom", "current-time", "duration"])
+      ], !0),
+      c("div", {
+        ref_key: "viewportRef",
+        ref: m,
+        class: "ve-timeline__viewport",
+        onClick: Ie
+      }, [
+        c("div", {
+          ref_key: "contentRef",
+          ref: T,
+          class: "ve-timeline__content",
+          style: S({ width: `${o.value}px` })
+        }, [
+          X(e.$slots, "ruler", {
+            ticks: ve.value,
+            pixelsPerMs: t.value
+          }, () => [
+            _e(Le, {
+              ticks: ve.value,
+              style: S({ height: `${p.value}px` })
+            }, null, 8, ["ticks", "style"])
+          ], !0),
+          X(e.$slots, "playhead", {
+            left: me.value,
+            currentTime: s.currentTime
+          }, () => [
+            _e(Ue, {
+              class: "top-0",
+              left: me.value,
+              onDragStart: oe
+            }, null, 8, ["left"])
+          ], !0),
+          c("div", {
+            ref_key: "tracksRef",
+            ref: C
+          }, [
+            _e(Tt, {
+              tracks: j.value,
+              "track-height": Z.value,
+              "track-gap": z.value,
+              "selected-segment-id": i.selectedSegmentId,
+              "drag-preview": L(R),
+              "resize-preview": W.value,
+              onSegmentClick: Se,
+              onSegmentMousedown: L(Te),
+              onResizeStart: $e,
+              onAddSegment: Ce
+            }, {
+              segment: je(({ layout: n, segment: r, track: _, isSelected: b }) => [
+                X(e.$slots, "segment", {
+                  layout: n,
+                  segment: r,
+                  track: _,
+                  isSelected: b
+                }, () => [
+                  c("div", $t, [
+                    c("div", St, E(r.type || "segment"), 1),
+                    c("div", Ct, E(G(r.start)) + " - " + E(G(r.end)), 1)
+                  ])
+                ], !0)
+              ]),
+              _: 3
+            }, 8, ["tracks", "track-height", "track-gap", "selected-segment-id", "drag-preview", "resize-preview", "onSegmentMousedown"])
+          ], 512),
+          w.value ? (x(), k("div", {
+            key: 0,
+            class: "ve-segment ve-segment--dragging",
+            style: S({
+              left: `${w.value.left}px`,
+              width: `${w.value.width}px`,
+              top: `${w.value.top}px`,
+              height: `${Z.value}px`,
+              backgroundColor: w.value.segment.color || "var(--ve-primary)"
+            })
+          }, [
+            X(e.$slots, "segment", {
+              layout: w.value,
+              segment: w.value.segment,
+              track: w.value.track,
+              isSelected: w.value.isSelected
+            }, () => [
+              c("div", zt, [
+                c("div", Dt, E(w.value.segment.type || "segment"), 1),
+                c("div", yt, E(G(w.value.segment.start)) + " - " + E(G(w.value.segment.end)), 1)
+              ])
+            ], !0)
+          ], 4)) : ee("", !0),
+          U.value && !U.value.isNewTrack ? (x(), k("div", {
+            key: 1,
+            class: "ve-segment ve-segment--placeholder",
+            style: S({
+              left: `${U.value.startTime * t.value}px`,
+              width: `${(U.value.endTime - U.value.startTime) * t.value}px`,
+              top: `${ne.value}px`,
+              height: `${Z.value}px`
+            })
+          }, [
+            c("div", {
+              class: "ve-segment--placeholder-inner",
+              style: S({
+                backgroundColor: U.value.segment.color || "var(--ve-primary)"
+              })
+            }, null, 4)
+          ], 4)) : ee("", !0),
+          K.value ? (x(), k("div", {
+            key: 2,
+            class: "ve-segment ve-segment--preview",
+            style: S({
+              left: `${K.value.startTime * t.value}px`,
+              width: `${(K.value.endTime - K.value.startTime) * t.value}px`,
+              top: `${p.value + K.value.trackIndex * (Z.value + z.value) + z.value}px`,
+              height: `${Z.value}px`,
+              backgroundColor: K.value.segment.color || "var(--ve-primary)"
+            })
+          }, null, 4)) : ee("", !0),
+          L(R) && L(g).length ? (x(!0), k(le, { key: 3 }, de(L(g), (n) => (x(), k("div", {
+            key: `snap-${n.time}`,
+            class: "ve-snap-guide",
+            style: S({
+              left: `${n.left}px`,
+              top: `${p.value}px`,
+              height: `calc(100% - ${p.value}px)`
+            })
+          }, null, 4))), 128)) : ee("", !0),
+          L(R) && L(R).isNewTrack ? (x(), k("div", {
+            key: 4,
+            class: "ve-new-track-line",
+            style: S({
+              top: `${p.value + L(R).targetTrackIndex * (Z.value + z.value)}px`,
+              left: "0",
+              right: "0"
+            })
+          }, null, 4)) : ee("", !0)
+        ], 4)
+      ], 512)
+    ]));
+  }
+}), Zt = /* @__PURE__ */ ce(Ft, [["__scopeId", "data-v-4e3078d5"]]);
+export {
+  Zt as V,
+  ce as _
+};