@video-editor/ui 0.0.1-beta.30 → 0.0.1-beta.32

package/dist/index-BEEVxCQj.js

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