@video-editor/ui 0.0.1-beta.29 → 0.0.1-beta.31

package/dist/index-txPw7MRQ.js

@@ -0,0 +1,782 @@
+import { defineComponent as X, ref as V, onMounted as ce, onBeforeUnmount as de, watch as N, nextTick as we, createElementBlock as p, openBlock as h, createElementVNode as R, reactive as Z, computed as D, renderSlot as b, normalizeStyle as J, createVNode as H, createCommentVNode as j, toDisplayString as G, Fragment as ee, renderList as le, normalizeClass as _e, withModifiers as se, watchEffect as Re, createBlock as $e, createSlots as Be, withCtx as K, unref as L, normalizeProps as re, guardReactiveProps as oe } from "vue";
+import { extractWaveform as pe, generateThumbnails as Ae, getMp4Meta as ke } from "@video-editor/protocol";
+import { isVideoFramesSegment as F, isAudioSegment as Ie } from "@video-editor/shared";
+import { _ as Y, V as We } from "./index-C0eQjJkj.js";
+const xe = /* @__PURE__ */ X({
+  name: "WaveformCanvasStrip",
+  __name: "WaveformCanvasStrip",
+  props: {
+    peaks: {},
+    barColor: { default: "#2B2B2B" },
+    minBarHeight: { default: 3 },
+    maxBarWidth: { default: 4 },
+    barGap: { default: 1 },
+    maxBufferWidth: { default: 2048 },
+    maxBufferHeight: { default: 256 }
+  },
+  setup(o) {
+    const v = o, i = V(null), k = V(null), M = V({ width: 0, height: 0 });
+    let u = null;
+    function A(t, l, m) {
+      return Math.min(Math.max(t, l), m);
+    }
+    function x(t) {
+      return A(Number.isFinite(t) ? t : 0, 0, 1);
+    }
+    function _() {
+      const t = i.value;
+      t && (M.value = {
+        width: Math.max(t.clientWidth, 0),
+        height: Math.max(t.clientHeight, 0)
+      });
+    }
+    function g() {
+      const t = k.value;
+      if (!t)
+        return;
+      const l = M.value.width, m = M.value.height;
+      if (l <= 0 || m <= 0)
+        return;
+      const T = Math.min(window.devicePixelRatio || 1, 2), S = A(Math.round(l * T), 1, v.maxBufferWidth), $ = A(Math.round(m * T), 1, v.maxBufferHeight);
+      t.width !== S && (t.width = S), t.height !== $ && (t.height = $);
+      const I = t.getContext("2d");
+      if (!I)
+        return;
+      const P = S / l, E = $ / m;
+      I.setTransform(P, 0, 0, E, 0, 0), I.clearRect(0, 0, l, m);
+      const B = v.peaks;
+      if (!B.length)
+        return;
+      const C = l / B.length;
+      if (!Number.isFinite(C) || C <= 0)
+        return;
+      const z = Math.min(v.barGap, Math.max(0, C - 0.1));
+      I.fillStyle = v.barColor;
+      for (let U = 0; U < B.length; U++) {
+        const e = U * C, r = e + C, n = e + z / 2, y = r - z / 2 - n;
+        if (y <= 0)
+          continue;
+        const f = Math.min(v.maxBarWidth, y), a = n + (y - f) / 2, s = x(B[U] ?? 0), d = Math.max(v.minBarHeight, s * m * 0.88), w = (m - d) / 2;
+        I.fillRect(a, w, f, d);
+      }
+    }
+    return ce(() => {
+      _();
+      const t = i.value;
+      t && (u = new ResizeObserver(() => {
+        _();
+      }), u.observe(t));
+    }), de(() => {
+      u?.disconnect(), u = null;
+    }), N(
+      [
+        () => v.peaks,
+        () => v.barColor,
+        () => v.minBarHeight,
+        () => v.maxBarWidth,
+        () => v.barGap,
+        () => v.maxBufferWidth,
+        () => v.maxBufferHeight,
+        () => M.value.width,
+        () => M.value.height
+      ],
+      async () => {
+        await we(), g();
+      },
+      { immediate: !0, flush: "post" }
+    ), (t, l) => (h(), p("div", {
+      ref_key: "containerRef",
+      ref: i,
+      class: "waveform-canvas-strip"
+    }, [
+      R("canvas", {
+        ref_key: "canvasRef",
+        ref: k,
+        class: "waveform-canvas-strip__canvas"
+      }, null, 512)
+    ], 512));
+  }
+}), ye = /* @__PURE__ */ Y(xe, [["__scopeId", "data-v-7cbe9830"]]), Pe = {
+  key: 1,
+  class: "audio-segment__placeholder"
+}, Ee = {
+  key: 0,
+  class: "audio-segment__badge"
+}, Ce = 1, ze = 1, De = 4096, Ve = /* @__PURE__ */ X({
+  name: "AudioSegment",
+  __name: "AudioSegment",
+  props: {
+    segment: {}
+  },
+  setup(o) {
+    const v = o, i = V(null), k = V(0);
+    let M = null;
+    ce(() => {
+      i.value && (k.value = i.value.clientWidth, M = new ResizeObserver((t) => {
+        for (const l of t)
+          k.value = l.contentRect.width;
+      }), M.observe(i.value));
+    }), de(() => {
+      M?.disconnect();
+    });
+    const u = Z({
+      data: null,
+      loading: !1,
+      error: null,
+      loadedUrl: null
+    });
+    let A = 0;
+    N(() => v.segment.url, (t, l) => {
+      t && t !== l && x(t);
+    }, { immediate: !0 });
+    async function x(t) {
+      if (!t || u.loadedUrl === t && u.data)
+        return;
+      const l = ++A;
+      u.loading = !0, u.error = null;
+      try {
+        const m = await pe(t, { samples: 1e3 });
+        if (A !== l)
+          return;
+        u.data = m, u.loadedUrl = t, u.loading = !1;
+      } catch (m) {
+        if (A !== l)
+          return;
+        u.error = m instanceof Error ? m.message : String(m), u.loading = !1;
+      }
+    }
+    function _(t, l) {
+      if (l >= t.length)
+        return t;
+      const m = [], T = t.length / l;
+      for (let S = 0; S < l; S++) {
+        const $ = Math.floor(S * T), I = Math.max($ + 1, Math.ceil((S + 1) * T));
+        let P = 0;
+        for (let E = $; E < I; E++) {
+          const B = t[E] ?? 0;
+          B > P && (P = B);
+        }
+        m.push(P);
+      }
+      return m;
+    }
+    const g = D(() => {
+      if (!u.data)
+        return { peaks: [], renderPeaks: [], coveragePercent: 100 };
+      const t = v.segment, l = u.data.duration * 1e3, m = u.data.peaks, T = t.fromTime ?? 0, S = t.endTime - t.startTime, $ = t.playRate ?? 1, I = S * $, P = Math.max(0, l - T), E = Math.min(I, P), B = S > 0 ? Math.min(100, E / $ / S * 100) : 0, C = T / l, z = (T + E) / l, U = Math.floor(C * m.length), e = Math.ceil(z * m.length), r = m.slice(
+        Math.max(0, U),
+        Math.min(m.length, e)
+      );
+      if (!r.length)
+        return { peaks: [], renderPeaks: [], coveragePercent: B };
+      const n = k.value * (B / 100), c = n > 0 ? Math.min(
+        De,
+        Math.max(1, Math.floor(n / (Ce + ze)))
+      ) : r.length;
+      return {
+        peaks: r,
+        renderPeaks: _(r, c),
+        coveragePercent: B
+      };
+    });
+    return (t, l) => (h(), p("div", {
+      ref_key: "containerRef",
+      ref: i,
+      class: "audio-segment"
+    }, [
+      u.data && g.value.renderPeaks.length ? b(t.$slots, "waveform", {
+        key: 0,
+        segment: o.segment,
+        waveform: u.data,
+        peaks: g.value.renderPeaks,
+        rawPeaks: g.value.peaks,
+        coveragePercent: g.value.coveragePercent
+      }, () => [
+        R("div", {
+          class: "audio-segment__waveform",
+          style: J({ width: `${g.value.coveragePercent}%` })
+        }, [
+          H(ye, {
+            class: "audio-segment__waveform-canvas",
+            peaks: g.value.renderPeaks,
+            "bar-color": "#2B2B2B",
+            "min-bar-height": 4,
+            "max-bar-width": 4,
+            "bar-gap": 1
+          }, null, 8, ["peaks"])
+        ], 4)
+      ], !0) : (h(), p("div", Pe, [
+        u.loading ? b(t.$slots, "loading", {
+          key: 0,
+          segment: o.segment
+        }, () => [
+          l[0] || (l[0] = R("span", null, "加载波形…", -1))
+        ], !0) : u.error ? b(t.$slots, "error", {
+          key: 1,
+          segment: o.segment,
+          error: u.error
+        }, () => [
+          l[1] || (l[1] = R("span", null, "波形加载失败", -1))
+        ], !0) : b(t.$slots, "empty", {
+          key: 2,
+          segment: o.segment
+        }, () => [
+          l[2] || (l[2] = R("div", { class: "waveform-pattern" }, null, -1))
+        ], !0)
+      ])),
+      b(t.$slots, "overlay", { segment: o.segment }, () => [
+        o.segment.extra?.label ? (h(), p("span", Ee, G(o.segment.extra?.label), 1)) : j("", !0)
+      ], !0)
+    ], 512));
+  }
+}), Ue = /* @__PURE__ */ Y(Ve, [["__scopeId", "data-v-47cbc534"]]), Fe = { class: "frames-segment" }, Oe = { class: "frames-segment__video-wrap" }, He = { class: "frames-segment__video" }, Ne = {
+  key: 1,
+  class: "frames-segment__placeholder frames-segment__placeholder--video"
+}, je = {
+  key: 0,
+  class: "frames-segment__waveform",
+  style: { width: "100%" }
+}, Le = {
+  key: 1,
+  class: "frames-segment__waveform-pattern"
+}, Ge = { class: "frames-segment__placeholder" }, Je = {
+  key: 0,
+  class: "frames-segment__overlay"
+}, Xe = {
+  key: 0,
+  class: "frames-segment__badge"
+}, Ye = ["aria-label", "title"], qe = {
+  key: 0,
+  class: "frames-segment__mute-icon i-creatly-mute",
+  "aria-hidden": "true"
+}, Ke = {
+  key: 1,
+  class: "frames-segment__mute-icon i-creatly-sound",
+  "aria-hidden": "true"
+}, Qe = 1, Ze = 1, et = 4096, tt = /* @__PURE__ */ X({
+  name: "FramesSegment",
+  __name: "FramesSegment",
+  props: {
+    segment: {}
+  },
+  emits: ["toggle-video-mute"],
+  setup(o, { emit: v }) {
+    const i = o, k = v, M = V(null), u = V(null), A = V(1), x = V(0);
+    let _ = null;
+    ce(() => {
+      _ = new ResizeObserver((a) => {
+        for (const s of a) {
+          if (s.target === M.value) {
+            const d = Math.max(1, Math.ceil(s.contentRect.width / 56));
+            A.value !== d && (A.value = d);
+          }
+          s.target === u.value && (x.value = s.contentRect.width);
+        }
+      }), M.value && _.observe(M.value), u.value && (x.value = u.value.clientWidth, _.observe(u.value));
+    }), de(() => {
+      _?.disconnect(), C();
+    }), N(u, (a, s) => {
+      _ && s && _.unobserve(s), _ && a && (x.value = a.clientWidth, _.observe(a));
+    });
+    const g = Z({ items: [], loading: !1, error: null }), t = Z({
+      data: null,
+      hasAudio: null,
+      loading: !1,
+      error: null,
+      loadedUrl: null
+    });
+    let l = 0, m = 0, T, S = null;
+    N(() => i.segment, (a, s) => {
+      if (!F(a))
+        return;
+      (!s || $(s, a)) && I(a, s);
+    }, { immediate: !0, deep: !0 }), N(() => i.segment, (a, s) => {
+      if (!F(a))
+        return;
+      const d = a, w = s && F(s) ? s : void 0;
+      d.url && d.url !== w?.url && E(d.url);
+    }, { immediate: !0, deep: !0 });
+    function $(a, s) {
+      return a.url !== s.url || a.startTime !== s.startTime || a.endTime !== s.endTime || a.fromTime !== s.fromTime;
+    }
+    function I(a, s) {
+      const d = !s || s.url !== a.url, w = !s || s.fromTime !== a.fromTime, W = d || w;
+      if (S = a, T && (window.clearTimeout(T), T = void 0), W) {
+        P(a);
+        return;
+      }
+      T = window.setTimeout(() => {
+        S && P(S), T = void 0;
+      }, 240);
+    }
+    async function P(a) {
+      if (!a.url)
+        return;
+      const s = ++l;
+      C(), g.loading = !0, g.error = null;
+      try {
+        const d = B(a), w = await Ae(a.url, d);
+        if (l !== s)
+          return;
+        const W = w.map((O) => ({
+          tsMs: Math.round(O.ts / 1e3),
+          url: URL.createObjectURL(O.img)
+        }));
+        g.items = W, g.loading = !1;
+      } catch (d) {
+        if (l !== s)
+          return;
+        g.error = d instanceof Error ? d.message : String(d), g.loading = !1;
+      }
+    }
+    async function E(a) {
+      if (!a || t.loadedUrl === a && (t.data || t.hasAudio === !1))
+        return;
+      const s = ++m;
+      t.loadedUrl !== a && (t.data = null, t.hasAudio = null), t.loading = !0, t.error = null;
+      try {
+        const d = await ke(a);
+        if (m !== s)
+          return;
+        const w = (d.audioChanCount ?? 0) > 0;
+        if (t.hasAudio = w, !w) {
+          t.data = null, t.loadedUrl = a, t.loading = !1;
+          return;
+        }
+        const W = await pe(a, { samples: 1e3 });
+        if (m !== s)
+          return;
+        t.data = W, t.hasAudio = !0, t.loadedUrl = a, t.loading = !1;
+      } catch (d) {
+        if (m !== s)
+          return;
+        t.data = null, t.error = d instanceof Error ? d.message : String(d), t.loading = !1;
+      }
+    }
+    function B(a) {
+      const s = Math.max(a.fromTime ?? 0, 0) * 1e3, d = Math.max(a.endTime - a.startTime, 1), w = s + d * 1e3, O = Math.max(Math.floor((w - s) / 8), 2e5);
+      return { start: s, end: w, step: O };
+    }
+    function C() {
+      g.items.forEach((a) => URL.revokeObjectURL(a.url)), g.items = [];
+    }
+    const z = D(() => {
+      if (!F(i.segment))
+        return { peaks: [], coveragePercent: 100 };
+      if (!t.data)
+        return { peaks: [], coveragePercent: 100 };
+      const a = i.segment, s = Math.max(a.endTime - a.startTime, 0);
+      if (s <= 0)
+        return { peaks: [], coveragePercent: 100 };
+      const d = Math.max(x.value, 1), w = Math.min(
+        et,
+        Math.max(1, Math.floor(d / (Qe + Ze)))
+      ), W = t.data.duration * 1e3, O = t.data.peaks;
+      if (!Number.isFinite(W) || W <= 0 || O.length === 0)
+        return { peaks: new Array(w).fill(0), coveragePercent: 100 };
+      const ue = Math.max(a.fromTime ?? 0, 0), be = Math.max(a.playRate ?? 1, 1e-4), me = s * be, te = [];
+      for (let q = 0; q < w; q++) {
+        const fe = ue + me * q / w, ge = ue + me * (q + 1) / w;
+        if (fe >= W || ge <= 0) {
+          te.push(0);
+          continue;
+        }
+        const Me = Math.max(fe, 0), Te = Math.min(ge, W), he = Math.floor(Me / W * O.length), Se = Math.max(he + 1, Math.ceil(Te / W * O.length));
+        let ne = 0;
+        for (let ae = he; ae < Se; ae++) {
+          const ve = O[ae] ?? 0;
+          ve > ne && (ne = ve);
+        }
+        te.push(ne);
+      }
+      return { peaks: te, coveragePercent: 100 };
+    }), U = D(() => t.hasAudio !== !1), e = D(() => !!i.segment.extra?.label), r = D(() => F(i.segment) && t.hasAudio !== !1), n = V(null), c = D(() => F(i.segment) ? (i.segment.volume ?? 1) <= 0 : !1), y = D(() => n.value ?? c.value);
+    N(() => i.segment.id, () => {
+      n.value = null;
+    }), N(() => {
+      if (F(i.segment))
+        return i.segment.volume;
+    }, () => {
+      n.value = null;
+    });
+    function f(a) {
+      if (a.preventDefault(), a.stopPropagation(), !F(i.segment))
+        return;
+      const s = !y.value;
+      n.value = s, k("toggle-video-mute", {
+        segmentId: i.segment.id,
+        muted: s
+      });
+    }
+    return (a, s) => (h(), p("div", Fe, [
+      o.segment.type === "image" ? b(a.$slots, "image", {
+        key: 0,
+        segment: o.segment,
+        style: J({ backgroundImage: o.segment.url ? `url(${o.segment.url})` : "" })
+      }, () => [
+        R("div", {
+          ref_key: "containerRef",
+          ref: M,
+          class: "frames-segment__image"
+        }, [
+          (h(!0), p(ee, null, le(A.value, (d) => (h(), p("div", {
+            key: d,
+            class: "frames-segment__image-item",
+            style: J({ backgroundImage: o.segment.url ? `url(${o.segment.url})` : "" })
+          }, null, 4))), 128))
+        ], 512)
+      ], !0) : o.segment.type === "video" ? b(a.$slots, "video", {
+        key: 1,
+        segment: o.segment,
+        thumbnails: g.items,
+        waveformPeaks: z.value.peaks,
+        waveformCoveragePercent: z.value.coveragePercent
+      }, () => [
+        R("div", Oe, [
+          R("div", He, [
+            g.items.length ? (h(!0), p(ee, { key: 0 }, le(g.items, (d) => (h(), p("div", {
+              key: `${o.segment.id}-${d.tsMs}`,
+              class: "frames-segment__thumb",
+              style: J({ backgroundImage: `url(${d.url})` })
+            }, null, 4))), 128)) : (h(), p("div", Ne, [
+              g.loading ? b(a.$slots, "loading", {
+                key: 0,
+                segment: o.segment
+              }, () => [
+                s[2] || (s[2] = R("span", null, "抽帧中…", -1))
+              ], !0) : g.error ? b(a.$slots, "error", {
+                key: 1,
+                segment: o.segment,
+                error: g.error
+              }, () => [
+                s[3] || (s[3] = R("span", null, "生成失败", -1))
+              ], !0) : b(a.$slots, "empty", {
+                key: 2,
+                segment: o.segment
+              }, () => [
+                s[4] || (s[4] = R("span", null, "未生成缩略图", -1))
+              ], !0)
+            ]))
+          ]),
+          U.value ? (h(), p("div", {
+            key: 0,
+            ref_key: "waveformRef",
+            ref: u,
+            class: _e(["frames-segment__waveform-strip", { "frames-segment__waveform-strip--muted": y.value }])
+          }, [
+            z.value.peaks.length ? (h(), p("div", je, [
+              H(ye, {
+                class: "frames-segment__waveform-canvas",
+                peaks: z.value.peaks,
+                "bar-color": "#3f3f46",
+                "min-bar-height": 3,
+                "max-bar-width": 4,
+                "bar-gap": 1
+              }, null, 8, ["peaks"])
+            ])) : (h(), p("div", Le))
+          ], 2)) : j("", !0)
+        ])
+      ], !0) : b(a.$slots, "fallback", {
+        key: 2,
+        segment: o.segment
+      }, () => [
+        R("div", Ge, [
+          R("span", null, G(o.segment.type), 1)
+        ])
+      ], !0),
+      b(a.$slots, "overlay", {
+        segment: o.segment,
+        isMuted: y.value,
+        toggleMute: f,
+        showMuteButton: r.value
+      }, () => [
+        e.value || r.value ? (h(), p("div", Je, [
+          o.segment.extra?.label ? (h(), p("span", Xe, G(o.segment.extra?.label), 1)) : j("", !0),
+          r.value ? (h(), p("button", {
+            key: 1,
+            type: "button",
+            class: "frames-segment__mute-btn",
+            "aria-label": y.value ? "取消静音视频片段" : "静音视频片段",
+            title: y.value ? "取消静音" : "静音",
+            onClick: se(f, ["stop"]),
+            onPointerdown: s[0] || (s[0] = se(() => {
+            }, ["stop"])),
+            onDblclick: s[1] || (s[1] = se(() => {
+            }, ["stop"]))
+          }, [
+            y.value ? (h(), p("span", qe)) : (h(), p("span", Ke))
+          ], 40, Ye)) : j("", !0)
+        ])) : j("", !0)
+      ], !0)
+    ]));
+  }
+}), nt = /* @__PURE__ */ Y(tt, [["__scopeId", "data-v-f389074c"]]), at = { class: "segment-base" }, st = { class: "segment-base__content" }, rt = { class: "segment-base__pill segment-base__pill--primary" }, ot = { class: "segment-base__pill segment-base__pill--muted" }, it = {
+  key: 0,
+  class: "segment-base__badge"
+}, lt = /* @__PURE__ */ X({
+  name: "SegmentBase",
+  __name: "SegmentBase",
+  props: {
+    segment: {},
+    trackType: {},
+    accentColor: { default: "#222226" }
+  },
+  setup(o) {
+    const v = o, i = D(() => {
+      const k = v.segment?.extra?.label;
+      return typeof k == "string" ? k : null;
+    });
+    return (k, M) => (h(), p("div", at, [
+      R("div", st, [
+        R("span", rt, G(o.trackType), 1),
+        R("span", ot, G(o.segment.segmentType), 1)
+      ]),
+      i.value ? (h(), p("span", it, G(i.value), 1)) : j("", !0)
+    ]));
+  }
+}), Q = /* @__PURE__ */ Y(lt, [["__scopeId", "data-v-d386af72"]]), ct = { class: "ve-editor-segment__preview" }, ie = "#222226", dt = 0.4, ut = /* @__PURE__ */ X({
+  name: "VideoEditorTimeline",
+  __name: "index",
+  props: {
+    protocol: { default: null },
+    currentTime: {},
+    zoom: {},
+    snapStep: { default: 0 },
+    selectedSegmentId: { default: null },
+    trackTypes: { default: void 0 },
+    disableInteraction: { type: Boolean, default: !1 }
+  },
+  emits: ["update:currentTime", "update:zoom", "update:selectedSegmentId", "segmentClick", "segmentDragEnd", "segmentResizeEnd", "videoSegmentMuteToggle", "add-segment"],
+  setup(o, { emit: v }) {
+    const i = o, k = v, M = V(i.selectedSegmentId ?? null);
+    N(() => i.selectedSegmentId, (e) => {
+      M.value = e ?? null;
+    });
+    const u = {
+      frames: ie,
+      audio: "#0ea5e9",
+      text: "#16a34a",
+      sticker: "#f97316",
+      effect: "#a855f7",
+      filter: "#64748b"
+    }, A = D(() => {
+      if (!i.protocol?.tracks?.length)
+        return [];
+      const r = (i.trackTypes?.length ? i.protocol.tracks.filter((f) => i.trackTypes?.includes(f.trackType)) : i.protocol.tracks).slice(), n = r.find((f) => f.trackType === "frames" && f.isMain === !0), c = r.filter((f) => !(f.trackType === "audio" || f === n)), y = r.filter((f) => f.trackType === "audio");
+      return [
+        ...c,
+        ...n ? [n] : [],
+        ...y
+      ];
+    }), x = Z(/* @__PURE__ */ new Map()), _ = /* @__PURE__ */ new Map();
+    function g(e) {
+      if (!e || x.has(e) || _.has(e))
+        return;
+      const r = (async () => {
+        try {
+          const n = await ke(e);
+          x.set(e, n.durationMs);
+        } catch {
+        }
+      })().finally(() => {
+        _.delete(e);
+      });
+      _.set(e, r);
+    }
+    const t = D(() => A.value.map((e, r) => {
+      const n = u[e.trackType] || ie, c = m(n, dt), y = e.trackType === "frames" && e.isMain === !0;
+      return {
+        id: e.trackId || `${e.trackType}-${r}`,
+        label: e.trackType,
+        type: e.trackType,
+        color: n,
+        isMain: y,
+        payload: e,
+        segments: e.children.map((f) => ({
+          ...F(f) ? { fromTime: f.fromTime ?? 0, sourceDurationMs: x.get(f.url) } : Ie(f) ? { fromTime: f.fromTime ?? 0 } : {},
+          id: f.id,
+          start: f.startTime,
+          end: f.endTime,
+          type: f.segmentType,
+          color: c,
+          payload: f
+        }))
+      };
+    }));
+    Re(() => {
+      for (const e of A.value)
+        for (const r of e.children)
+          F(r) && g(r.url);
+    });
+    const l = D(() => {
+      if (!i.protocol?.tracks?.length)
+        return 0;
+      const e = i.protocol.tracks.flatMap((r) => r.children.map((n) => n.endTime));
+      return e.length ? Math.max(...e) : 0;
+    });
+    function m(e, r) {
+      const n = e.replace("#", "");
+      if (!(n.length === 3 || n.length === 6))
+        return e;
+      const c = n.length === 3 ? n.split("").map((s) => s + s).join("") : n, y = Number.parseInt(c.slice(0, 2), 16), f = Number.parseInt(c.slice(2, 4), 16), a = Number.parseInt(c.slice(4, 6), 16);
+      return `rgba(${y}, ${f}, ${a}, ${r})`;
+    }
+    function T(e) {
+      return e && typeof e == "object" && "segmentType" in e ? e : null;
+    }
+    function S(e) {
+      const r = e.payload;
+      if (r)
+        return r;
+      if (i.protocol)
+        return i.protocol.tracks.find((n) => n.trackId === e.id);
+    }
+    function $(e) {
+      M.value = e, k("update:selectedSegmentId", e);
+    }
+    function I(e) {
+      const r = T(e.segment.payload), n = S(e.track);
+      r && ($(r.id), n && k("segmentClick", { segment: r, track: n }));
+    }
+    function P(e) {
+      $(e.segment.id);
+    }
+    function E(e) {
+      k("segmentDragEnd", e);
+    }
+    function B(e) {
+      $(e.segment.id);
+    }
+    function C(e) {
+      k("segmentResizeEnd", e);
+    }
+    function z({ track: e, startTime: r, endTime: n, event: c }) {
+      const y = e.payload;
+      y && k("add-segment", { track: y, startTime: r, endTime: n, event: c });
+    }
+    function U(e, r, n) {
+      e.id === n.segmentId && k("videoSegmentMuteToggle", { segment: e, track: r, muted: n.muted });
+    }
+    return (e, r) => (h(), $e(We, {
+      tracks: t.value,
+      duration: l.value,
+      "current-time": o.currentTime,
+      zoom: o.zoom,
+      fps: o.protocol?.fps || 30,
+      "snap-step": o.snapStep,
+      "selected-segment-id": M.value ?? null,
+      "disable-interaction": o.disableInteraction,
+      "onUpdate:currentTime": r[0] || (r[0] = (n) => k("update:currentTime", n)),
+      "onUpdate:zoom": r[1] || (r[1] = (n) => k("update:zoom", n)),
+      onSegmentClick: I,
+      onSegmentDragStart: P,
+      onSegmentDragEnd: E,
+      onSegmentResizeStart: B,
+      onSegmentResizeEnd: C,
+      onBackgroundClick: r[2] || (r[2] = (n) => $(null)),
+      onAddSegment: z
+    }, Be({
+      segment: K(({ layout: n }) => [
+        (h(!0), p(ee, null, le([T(n.segment.payload)], (c) => (h(), p(ee, {
+          key: c?.id || n.segment.id
+        }, [
+          c ? (h(), p("div", {
+            key: 0,
+            class: "ve-editor-segment",
+            style: J({ "--ve-segment-accent": n.track.color || ie })
+          }, [
+            R("div", ct, [
+              c.segmentType === "frames" ? b(e.$slots, "segment-frames", {
+                key: 0,
+                segment: c,
+                layout: n
+              }, () => [
+                H(L(nt), {
+                  segment: c,
+                  onToggleVideoMute: (y) => U(c, n.track.payload, y)
+                }, null, 8, ["segment", "onToggleVideoMute"])
+              ], !0) : c.segmentType === "text" ? b(e.$slots, "segment-text", {
+                key: 1,
+                segment: c,
+                layout: n
+              }, () => [
+                H(L(Q), {
+                  segment: c,
+                  "track-type": n.track.type || "unknown",
+                  "accent-color": n.track.color
+                }, null, 8, ["segment", "track-type", "accent-color"])
+              ], !0) : c.segmentType === "sticker" ? b(e.$slots, "segment-sticker", {
+                key: 2,
+                segment: c,
+                layout: n
+              }, () => [
+                H(L(Q), {
+                  segment: c,
+                  "track-type": n.track.type || "unknown",
+                  "accent-color": n.track.color
+                }, null, 8, ["segment", "track-type", "accent-color"])
+              ], !0) : c.segmentType === "audio" ? b(e.$slots, "segment-audio", {
+                key: 3,
+                segment: c,
+                layout: n
+              }, () => [
+                H(L(Ue), {
+                  segment: c
+                }, null, 8, ["segment"])
+              ], !0) : c.segmentType === "effect" ? b(e.$slots, "segment-effect", {
+                key: 4,
+                segment: c,
+                layout: n
+              }, () => [
+                H(L(Q), {
+                  segment: c,
+                  "track-type": n.track.type || "unknown",
+                  "accent-color": n.track.color
+                }, null, 8, ["segment", "track-type", "accent-color"])
+              ], !0) : c.segmentType === "filter" ? b(e.$slots, "segment-filter", {
+                key: 5,
+                segment: c,
+                layout: n
+              }, () => [
+                H(L(Q), {
+                  segment: c,
+                  "track-type": n.track.type || "unknown",
+                  "accent-color": n.track.color
+                }, null, 8, ["segment", "track-type", "accent-color"])
+              ], !0) : j("", !0)
+            ])
+          ], 4)) : j("", !0)
+        ], 64))), 128))
+      ]),
+      _: 2
+    }, [
+      e.$slots.toolbar ? {
+        name: "toolbar",
+        fn: K((n) => [
+          b(e.$slots, "toolbar", re(oe(n)), void 0, !0)
+        ]),
+        key: "0"
+      } : void 0,
+      e.$slots.ruler ? {
+        name: "ruler",
+        fn: K((n) => [
+          b(e.$slots, "ruler", re(oe(n)), void 0, !0)
+        ]),
+        key: "1"
+      } : void 0,
+      e.$slots.playhead ? {
+        name: "playhead",
+        fn: K((n) => [
+          b(e.$slots, "playhead", re(oe(n)), void 0, !0)
+        ]),
+        key: "2"
+      } : void 0
+    ]), 1032, ["tracks", "duration", "current-time", "zoom", "fps", "snap-step", "selected-segment-id", "disable-interaction"]));
+  }
+}), vt = /* @__PURE__ */ Y(ut, [["__scopeId", "data-v-acab97b9"]]);
+export {
+  Ue as A,
+  nt as F,
+  Q as S,
+  vt as V
+};