@video-editor/ui 0.0.1-beta.8 → 0.0.1-beta.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineComponent as V, reactive as J, watch as P, onBeforeUnmount as Y, createElementBlock as l, openBlock as r, createCommentVNode as x, normalizeStyle as L, Fragment as v, renderList as j, createElementVNode as y, toDisplayString as h, computed as S, ref as q, createBlock as E, createSlots as G, withCtx as _, unref as w, renderSlot as C, normalizeProps as M, guardReactiveProps as U } from "vue";
|
|
2
|
-
import { _ as D, V as K } from "./index-
|
|
2
|
+
import { _ as D, V as K } from "./index-B4a4-K9f.js";
|
|
3
3
|
import { generateThumbnails as Q } from "@video-editor/protocol";
|
|
4
4
|
import { isVideoFramesSegment as W } from "@video-editor/shared";
|
|
5
5
|
const X = { class: "frames-segment" }, Z = {
|
package/dist/VideoTimeline.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as pe, createElementBlock as k, openBlock as _, withModifiers as le, normalizeStyle as D, createStaticVNode as Se, createElementVNode as c, Fragment as ge, renderList as he, normalizeClass as $e, createCommentVNode as ee, toDisplayString as G, renderSlot as V, computed as
|
|
1
|
+
import { defineComponent as pe, createElementBlock as k, openBlock as _, withModifiers as le, normalizeStyle as D, createStaticVNode as Se, createElementVNode as c, Fragment as ge, renderList as he, normalizeClass as $e, createCommentVNode as ee, toDisplayString as G, renderSlot as V, computed as M, ref as z, watch as fe, toRef as Re, onMounted as Pe, onBeforeUnmount as Ge, createVNode as ye, withDirectives as Ve, unref as K, vShow as Le } from "vue";
|
|
2
2
|
const Ne = /* @__PURE__ */ pe({
|
|
3
3
|
name: "TimelinePlayhead",
|
|
4
4
|
__name: "TimelinePlayhead",
|
|
@@ -11,9 +11,9 @@ const Ne = /* @__PURE__ */ pe({
|
|
|
11
11
|
return (o, i) => (_(), k("div", {
|
|
12
12
|
class: "ve-playhead",
|
|
13
13
|
style: D({ left: `${l.left}px` }),
|
|
14
|
-
onMousedown: i[0] || (i[0] = le((
|
|
14
|
+
onMousedown: i[0] || (i[0] = le((b) => s("dragStart", b), ["stop", "prevent"]))
|
|
15
15
|
}, [...i[1] || (i[1] = [
|
|
16
|
-
Se('<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-
|
|
16
|
+
Se('<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-601eb0b9><g filter="url(#ve_playhead_drop_shadow)" data-v-601eb0b9><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-601eb0b9></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-601eb0b9></path></g><defs data-v-601eb0b9><filter id="ve_playhead_drop_shadow" x="0" y="0" width="12" height="17.8428" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" data-v-601eb0b9><feFlood flood-opacity="0" result="BackgroundImageFix" data-v-601eb0b9></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-601eb0b9></feColorMatrix><feOffset dy="1" data-v-601eb0b9></feOffset><feGaussianBlur stdDeviation="1" data-v-601eb0b9></feGaussianBlur><feComposite in2="hardAlpha" operator="out" data-v-601eb0b9></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-601eb0b9></feColorMatrix><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" data-v-601eb0b9></feBlend><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" data-v-601eb0b9></feBlend></filter></defs></svg><div class="ve-playhead__line" data-v-601eb0b9></div>', 2)
|
|
17
17
|
])], 36));
|
|
18
18
|
}
|
|
19
19
|
}), xe = (l, f) => {
|
|
@@ -21,7 +21,7 @@ const Ne = /* @__PURE__ */ pe({
|
|
|
21
21
|
for (const [o, i] of f)
|
|
22
22
|
s[o] = i;
|
|
23
23
|
return s;
|
|
24
|
-
}, Oe = /* @__PURE__ */ xe(Ne, [["__scopeId", "data-v-
|
|
24
|
+
}, Oe = /* @__PURE__ */ xe(Ne, [["__scopeId", "data-v-601eb0b9"]]), Ye = { class: "ve-ruler" }, He = { class: "ve-ruler__ticks" }, We = {
|
|
25
25
|
key: 0,
|
|
26
26
|
class: "ve-ruler__label"
|
|
27
27
|
}, Ae = /* @__PURE__ */ pe({
|
|
@@ -68,7 +68,7 @@ const Ne = /* @__PURE__ */ pe({
|
|
|
68
68
|
class: "ve-btn",
|
|
69
69
|
type: "button",
|
|
70
70
|
disabled: l.zoom <= l.minZoom,
|
|
71
|
-
onClick: i[0] || (i[0] = (
|
|
71
|
+
onClick: i[0] || (i[0] = (b) => s("zoomOut"))
|
|
72
72
|
}, " - ", 8, qe)
|
|
73
73
|
], !0)
|
|
74
74
|
]),
|
|
@@ -83,7 +83,7 @@ const Ne = /* @__PURE__ */ pe({
|
|
|
83
83
|
class: "ve-btn",
|
|
84
84
|
type: "button",
|
|
85
85
|
disabled: l.zoom >= l.maxZoom,
|
|
86
|
-
onClick: i[1] || (i[1] = (
|
|
86
|
+
onClick: i[1] || (i[1] = (b) => s("zoomIn"))
|
|
87
87
|
}, " + ", 8, tt)
|
|
88
88
|
], !0)
|
|
89
89
|
]),
|
|
@@ -114,7 +114,7 @@ function lt(l, f, s, o) {
|
|
|
114
114
|
}
|
|
115
115
|
return null;
|
|
116
116
|
}
|
|
117
|
-
function
|
|
117
|
+
function b(Z) {
|
|
118
118
|
if (!l.value || !f.value.length)
|
|
119
119
|
return -1;
|
|
120
120
|
const h = l.value.getBoundingClientRect(), I = Z - h.top, r = s.value + o.value;
|
|
@@ -125,18 +125,18 @@ function lt(l, f, s, o) {
|
|
|
125
125
|
}
|
|
126
126
|
return {
|
|
127
127
|
detectTrackGap: i,
|
|
128
|
-
resolveTrackIndexFromClientY:
|
|
128
|
+
resolveTrackIndexFromClientY: b
|
|
129
129
|
};
|
|
130
130
|
}
|
|
131
131
|
function ot(l, f, s) {
|
|
132
132
|
return {
|
|
133
|
-
snapGuides:
|
|
133
|
+
snapGuides: M(() => {
|
|
134
134
|
if (!l.value)
|
|
135
135
|
return [];
|
|
136
|
-
const i = /* @__PURE__ */ new Set(),
|
|
136
|
+
const i = /* @__PURE__ */ new Set(), b = l.value.startTime, Z = l.value.endTime, h = 100;
|
|
137
137
|
return ("value" in f ? f.value : f).forEach((r) => {
|
|
138
138
|
r.segments.forEach((p) => {
|
|
139
|
-
p.id !== l.value?.segment.id && (Math.abs(p.start -
|
|
139
|
+
p.id !== l.value?.segment.id && (Math.abs(p.start - b) < h && i.add(p.start), Math.abs(p.end - b) < h && i.add(p.end), Math.abs(p.start - Z) < h && i.add(p.start), Math.abs(p.end - Z) < h && i.add(p.end));
|
|
140
140
|
});
|
|
141
141
|
}), Array.from(i).map((r) => ({
|
|
142
142
|
time: r,
|
|
@@ -151,7 +151,7 @@ function it(l) {
|
|
|
151
151
|
tracksRef: s,
|
|
152
152
|
trackHeightPx: o,
|
|
153
153
|
trackGapPx: i,
|
|
154
|
-
pixelsPerMs:
|
|
154
|
+
pixelsPerMs: b,
|
|
155
155
|
disableInteraction: Z,
|
|
156
156
|
snap: h,
|
|
157
157
|
onDragStart: I,
|
|
@@ -165,7 +165,7 @@ function it(l) {
|
|
|
165
165
|
), { snapGuides: oe } = ot(
|
|
166
166
|
d,
|
|
167
167
|
f,
|
|
168
|
-
|
|
168
|
+
b
|
|
169
169
|
);
|
|
170
170
|
function ie(v, q) {
|
|
171
171
|
Z.value || (g.value = {
|
|
@@ -176,7 +176,7 @@ function it(l) {
|
|
|
176
176
|
});
|
|
177
177
|
}
|
|
178
178
|
function re(v, q, F, $) {
|
|
179
|
-
const { layout: u, initialX: _e, initialY:
|
|
179
|
+
const { layout: u, initialX: _e, initialY: be } = v, ue = q - _e, O = F - be, Y = Math.abs(ue) > 5 || Math.abs(O) > 5;
|
|
180
180
|
if (!v.moved && Y) {
|
|
181
181
|
v.moved = !0;
|
|
182
182
|
const E = {
|
|
@@ -206,7 +206,7 @@ function it(l) {
|
|
|
206
206
|
const E = s.value.getBoundingClientRect(), de = F - E.top, ce = o.value + i.value, me = w * ce + o.value / 2, ve = de < me;
|
|
207
207
|
B = !0, ne = ve ? w : w + 1, x = ne, Q = w, A = u.track.id, R = !0;
|
|
208
208
|
}
|
|
209
|
-
const
|
|
209
|
+
const Te = h(u.segment.start + ue / Math.max(b.value, 1e-4)), j = Math.max(0, Te), Ie = j + H, se = {
|
|
210
210
|
segment: u.segment,
|
|
211
211
|
track: u.track,
|
|
212
212
|
trackIndex: u.trackIndex,
|
|
@@ -226,7 +226,7 @@ function it(l) {
|
|
|
226
226
|
function S(v) {
|
|
227
227
|
g.value && re(g.value, v.clientX, v.clientY, "drag");
|
|
228
228
|
}
|
|
229
|
-
function
|
|
229
|
+
function T(v) {
|
|
230
230
|
g.value && (re(g.value, v.clientX, v.clientY, "end"), g.value = null, d.value = null);
|
|
231
231
|
}
|
|
232
232
|
return {
|
|
@@ -237,13 +237,13 @@ function it(l) {
|
|
|
237
237
|
// Methods
|
|
238
238
|
startDrag: ie,
|
|
239
239
|
handleDragMove: S,
|
|
240
|
-
handleDragEnd:
|
|
240
|
+
handleDragEnd: T
|
|
241
241
|
};
|
|
242
242
|
}
|
|
243
243
|
const rt = { class: "ve-timeline" }, ut = { class: "ve-track__body" }, dt = ["onMousedown", "onClick"], ct = { class: "ve-segment__content" }, mt = { class: "ve-segment__title" }, vt = { class: "ve-segment__time" }, ft = {
|
|
244
244
|
key: 0,
|
|
245
245
|
class: "ve-segment__selection"
|
|
246
|
-
}, gt = ["onMousedown"], ht = ["onMousedown"], pt = { class: "ve-segment__content" }, xt = { class: "ve-segment__title" }, kt = { class: "ve-segment__time" }, _t = 120, Ee = 10,
|
|
246
|
+
}, gt = ["onMousedown"], ht = ["onMousedown"], pt = { class: "ve-segment__content" }, xt = { class: "ve-segment__title" }, kt = { class: "ve-segment__time" }, _t = 120, Ee = 10, bt = /* @__PURE__ */ pe({
|
|
247
247
|
name: "VideoTimeline",
|
|
248
248
|
__name: "index",
|
|
249
249
|
props: {
|
|
@@ -264,13 +264,13 @@ const rt = { class: "ve-timeline" }, ut = { class: "ve-track__body" }, dt = ["on
|
|
|
264
264
|
},
|
|
265
265
|
emits: ["update:currentTime", "update:zoom", "segmentClick", "segmentDragStart", "segmentDrag", "segmentDragEnd", "segmentResizeStart", "segmentResize", "segmentResizeEnd", "backgroundClick"],
|
|
266
266
|
setup(l, { emit: f }) {
|
|
267
|
-
const s = l, o = f, i = z(null),
|
|
267
|
+
const s = l, o = f, i = z(null), b = z(null), Z = z(null), h = z(0);
|
|
268
268
|
let I = null;
|
|
269
269
|
const r = z(B(s.zoom ?? s.minZoom)), p = z(!1);
|
|
270
270
|
fe(() => s.zoom, (e) => {
|
|
271
271
|
typeof e == "number" && (r.value = B(e));
|
|
272
272
|
}), fe(r, (e) => o("update:zoom", e));
|
|
273
|
-
const g =
|
|
273
|
+
const g = M(() => typeof s.duration == "number" ? Math.max(s.duration, 0) : Math.max(
|
|
274
274
|
0,
|
|
275
275
|
...s.tracks.flatMap(
|
|
276
276
|
(a) => a.segments.map((t) => t.end)
|
|
@@ -285,16 +285,16 @@ const rt = { class: "ve-timeline" }, ut = { class: "ve-track__body" }, dt = ["on
|
|
|
285
285
|
const n = B(t * e / h.value);
|
|
286
286
|
Math.abs(n - r.value) > 1e-6 && (r.value = n);
|
|
287
287
|
});
|
|
288
|
-
const d =
|
|
288
|
+
const d = M(() => {
|
|
289
289
|
const e = Math.max(g.value, 1);
|
|
290
290
|
return Math.max(h.value, 1) * r.value / e;
|
|
291
|
-
}), te =
|
|
291
|
+
}), te = M(() => {
|
|
292
292
|
const e = g.value * d.value, a = Number.isFinite(e) ? Math.max(e, 0) : 0;
|
|
293
293
|
return Math.max(Math.ceil(a), Math.ceil(h.value || 0));
|
|
294
|
-
}), ke =
|
|
294
|
+
}), ke = M(() => {
|
|
295
295
|
const e = Math.max(d.value, 1e-4), t = (te.value || h.value || 0) / e;
|
|
296
296
|
return Math.max(g.value, t);
|
|
297
|
-
}), oe =
|
|
297
|
+
}), oe = M(() => s.currentTime * d.value), ie = M(() => Te(ke.value, d.value)), re = M(() => 1e3 / Math.max(s.fps || 30, 1)), S = M(() => s.trackHeight), T = M(() => s.trackGap), v = M(() => s.rulerHeight), q = M(() => s.tracks.map((e, a) => ({
|
|
298
298
|
track: e,
|
|
299
299
|
trackIndex: a,
|
|
300
300
|
segments: e.segments.map((t, n) => {
|
|
@@ -314,13 +314,13 @@ const rt = { class: "ve-timeline" }, ut = { class: "ve-track__body" }, dt = ["on
|
|
|
314
314
|
dragPreview: $,
|
|
315
315
|
snapGuides: u,
|
|
316
316
|
startDrag: _e,
|
|
317
|
-
handleDragMove:
|
|
317
|
+
handleDragMove: be,
|
|
318
318
|
handleDragEnd: ue
|
|
319
319
|
} = it({
|
|
320
320
|
tracks: Re(s, "tracks"),
|
|
321
321
|
tracksRef: Z,
|
|
322
322
|
trackHeightPx: S,
|
|
323
|
-
trackGapPx:
|
|
323
|
+
trackGapPx: T,
|
|
324
324
|
pixelsPerMs: d,
|
|
325
325
|
disableInteraction: Re(s, "disableInteraction"),
|
|
326
326
|
snap: j,
|
|
@@ -333,23 +333,23 @@ const rt = { class: "ve-timeline" }, ut = { class: "ve-track__body" }, dt = ["on
|
|
|
333
333
|
onDragEnd: (e) => {
|
|
334
334
|
o("segmentDragEnd", e);
|
|
335
335
|
}
|
|
336
|
-
}), O = z(null), Y =
|
|
336
|
+
}), O = z(null), Y = M(() => $.value), H = M(() => O.value), W = z(null), J = z(!1), w = z(!1), L = z(!1), x = M(() => {
|
|
337
337
|
if (!$.value)
|
|
338
338
|
return null;
|
|
339
339
|
const e = $.value, t = q.value.find((y) => y.track.id === e.track.id)?.segments.find((y) => y.segment.id === e.segment.id);
|
|
340
340
|
if (!t)
|
|
341
341
|
return null;
|
|
342
|
-
const n = (e.startTime - e.segment.start) * d.value, C = v.value + e.trackIndex * (S.value +
|
|
342
|
+
const n = (e.startTime - e.segment.start) * d.value, C = v.value + e.trackIndex * (S.value + T.value) + T.value + e.mouseDeltaY;
|
|
343
343
|
return {
|
|
344
344
|
...t,
|
|
345
345
|
left: t.left + n,
|
|
346
346
|
top: C
|
|
347
347
|
};
|
|
348
|
-
}), Q =
|
|
348
|
+
}), Q = M(() => {
|
|
349
349
|
if (!$.value)
|
|
350
350
|
return 0;
|
|
351
351
|
const e = $.value;
|
|
352
|
-
return e.isNewTrack && e.newTrackInsertIndex === 0 ? v.value +
|
|
352
|
+
return e.isNewTrack && e.newTrackInsertIndex === 0 ? v.value + T.value : v.value + e.targetTrackIndex * (S.value + T.value) + T.value;
|
|
353
353
|
});
|
|
354
354
|
Pe(() => {
|
|
355
355
|
i.value && (I = new ResizeObserver((e) => {
|
|
@@ -387,11 +387,11 @@ const rt = { class: "ve-timeline" }, ut = { class: "ve-track__body" }, dt = ["on
|
|
|
387
387
|
const a = Math.max(e, 0), t = Math.floor(a / 1e3), n = Math.floor(t / 60).toString().padStart(2, "0"), m = (t % 60).toString().padStart(2, "0"), C = Math.floor(a % 1e3 / 10).toString().padStart(2, "0");
|
|
388
388
|
return `${n}:${m}.${C}`;
|
|
389
389
|
}
|
|
390
|
-
function
|
|
390
|
+
function Me(e) {
|
|
391
391
|
const a = Math.max(e, 0), t = Math.floor(a / 1e3), n = Math.floor(t / 60).toString().padStart(2, "0"), m = (t % 60).toString().padStart(2, "0");
|
|
392
392
|
return `${n}:${m}`;
|
|
393
393
|
}
|
|
394
|
-
function
|
|
394
|
+
function Te(e, a) {
|
|
395
395
|
if (!e || !a)
|
|
396
396
|
return [];
|
|
397
397
|
const t = Ze(a, s.fps || 30), n = Math.max(1, Math.round(t.mainMs / t.minorMs)), m = Math.max(e, 1), C = Math.ceil(m / t.minorMs), y = [];
|
|
@@ -411,22 +411,22 @@ const rt = { class: "ve-timeline" }, ut = { class: "ve-track__body" }, dt = ["on
|
|
|
411
411
|
return Math.max(Math.round(e / t) * t, 0);
|
|
412
412
|
}
|
|
413
413
|
function Ie(e) {
|
|
414
|
-
if (!
|
|
414
|
+
if (!b.value)
|
|
415
415
|
return;
|
|
416
416
|
if (L.value) {
|
|
417
417
|
L.value = !1;
|
|
418
418
|
return;
|
|
419
419
|
}
|
|
420
|
-
const a =
|
|
420
|
+
const a = b.value.getBoundingClientRect(), t = e.clientX - a.left, n = j(t / Math.max(d.value, 1e-4));
|
|
421
421
|
o("update:currentTime", n), o("backgroundClick", e), w.value = !0;
|
|
422
422
|
}
|
|
423
423
|
function se(e) {
|
|
424
424
|
s.disableInteraction || (e.preventDefault(), J.value = !0, w.value = !0, E(e.clientX), A());
|
|
425
425
|
}
|
|
426
426
|
function E(e) {
|
|
427
|
-
if (!
|
|
427
|
+
if (!b.value)
|
|
428
428
|
return;
|
|
429
|
-
const a =
|
|
429
|
+
const a = b.value.getBoundingClientRect(), t = e - a.left, n = j(t / Math.max(d.value, 1e-4));
|
|
430
430
|
o("update:currentTime", n);
|
|
431
431
|
}
|
|
432
432
|
function de(e, a, t) {
|
|
@@ -475,7 +475,7 @@ const rt = { class: "ve-timeline" }, ut = { class: "ve-track__body" }, dt = ["on
|
|
|
475
475
|
ce(W.value, e.clientX, "drag");
|
|
476
476
|
return;
|
|
477
477
|
}
|
|
478
|
-
|
|
478
|
+
be(e);
|
|
479
479
|
}
|
|
480
480
|
function ve(e) {
|
|
481
481
|
if (J.value) {
|
|
@@ -549,9 +549,9 @@ const rt = { class: "ve-timeline" }, ut = { class: "ve-track__body" }, dt = ["on
|
|
|
549
549
|
function Be(e, a, t) {
|
|
550
550
|
if (t.label === "frame") {
|
|
551
551
|
const n = Number.isFinite(a) && a > 0 ? a : 30, m = 1e3 / n, y = Math.round(e / m) % n;
|
|
552
|
-
return y === 0 ?
|
|
552
|
+
return y === 0 ? Me(e) : `${y}f`;
|
|
553
553
|
}
|
|
554
|
-
return
|
|
554
|
+
return Me(e);
|
|
555
555
|
}
|
|
556
556
|
return (e, a) => (_(), k("div", rt, [
|
|
557
557
|
V(e.$slots, "toolbar", {
|
|
@@ -583,7 +583,7 @@ const rt = { class: "ve-timeline" }, ut = { class: "ve-track__body" }, dt = ["on
|
|
|
583
583
|
}, [
|
|
584
584
|
c("div", {
|
|
585
585
|
ref_key: "contentRef",
|
|
586
|
-
ref:
|
|
586
|
+
ref: b,
|
|
587
587
|
class: "ve-timeline__content",
|
|
588
588
|
style: D({ width: `${te.value}px` })
|
|
589
589
|
}, [
|
|
@@ -610,7 +610,7 @@ const rt = { class: "ve-timeline" }, ut = { class: "ve-track__body" }, dt = ["on
|
|
|
610
610
|
ref_key: "tracksRef",
|
|
611
611
|
ref: Z,
|
|
612
612
|
class: "ve-timeline__tracks",
|
|
613
|
-
style: D({ gap: `${
|
|
613
|
+
style: D({ gap: `${T.value}px`, paddingTop: `${T.value}px` })
|
|
614
614
|
}, [
|
|
615
615
|
(_(!0), k(ge, null, he(q.value, (t) => (_(), k("div", {
|
|
616
616
|
key: t.track.id,
|
|
@@ -654,13 +654,13 @@ const rt = { class: "ve-timeline" }, ut = { class: "ve-track__body" }, dt = ["on
|
|
|
654
654
|
class: "ve-segment__handle ve-segment__handle--left",
|
|
655
655
|
onMousedown: le((m) => de(n, "start", m), ["stop"])
|
|
656
656
|
}, [...a[0] || (a[0] = [
|
|
657
|
-
Se('<div class="ve-segment__handle-dots" data-v-
|
|
657
|
+
Se('<div class="ve-segment__handle-dots" data-v-553c608f><div class="ve-segment__handle-dot" data-v-553c608f></div><div class="ve-segment__handle-dot" data-v-553c608f></div><div class="ve-segment__handle-dot" data-v-553c608f></div><div class="ve-segment__handle-dot" data-v-553c608f></div></div>', 1)
|
|
658
658
|
])], 40, gt),
|
|
659
659
|
c("div", {
|
|
660
660
|
class: "ve-segment__handle ve-segment__handle--right",
|
|
661
661
|
onMousedown: le((m) => de(n, "end", m), ["stop"])
|
|
662
662
|
}, [...a[1] || (a[1] = [
|
|
663
|
-
Se('<div class="ve-segment__handle-dots" data-v-
|
|
663
|
+
Se('<div class="ve-segment__handle-dots" data-v-553c608f><div class="ve-segment__handle-dot" data-v-553c608f></div><div class="ve-segment__handle-dot" data-v-553c608f></div><div class="ve-segment__handle-dot" data-v-553c608f></div><div class="ve-segment__handle-dot" data-v-553c608f></div></div>', 1)
|
|
664
664
|
])], 40, ht)
|
|
665
665
|
])) : ee("", !0)
|
|
666
666
|
], 46, dt)), [
|
|
@@ -716,7 +716,7 @@ const rt = { class: "ve-timeline" }, ut = { class: "ve-track__body" }, dt = ["on
|
|
|
716
716
|
style: D({
|
|
717
717
|
left: `${H.value.startTime * d.value}px`,
|
|
718
718
|
width: `${(H.value.endTime - H.value.startTime) * d.value}px`,
|
|
719
|
-
top: `${v.value + H.value.trackIndex * (S.value +
|
|
719
|
+
top: `${v.value + H.value.trackIndex * (S.value + T.value) + T.value}px`,
|
|
720
720
|
height: `${S.value}px`,
|
|
721
721
|
backgroundColor: H.value.segment.color || "var(--ve-primary)"
|
|
722
722
|
})
|
|
@@ -734,7 +734,7 @@ const rt = { class: "ve-timeline" }, ut = { class: "ve-track__body" }, dt = ["on
|
|
|
734
734
|
key: 4,
|
|
735
735
|
class: "ve-new-track-line",
|
|
736
736
|
style: D({
|
|
737
|
-
top: `${v.value + K($).targetTrackIndex * (S.value +
|
|
737
|
+
top: `${v.value + K($).targetTrackIndex * (S.value + T.value)}px`,
|
|
738
738
|
left: "0",
|
|
739
739
|
right: "0"
|
|
740
740
|
})
|
|
@@ -743,8 +743,8 @@ const rt = { class: "ve-timeline" }, ut = { class: "ve-track__body" }, dt = ["on
|
|
|
743
743
|
], 512)
|
|
744
744
|
]));
|
|
745
745
|
}
|
|
746
|
-
}),
|
|
746
|
+
}), Tt = /* @__PURE__ */ xe(bt, [["__scopeId", "data-v-553c608f"]]);
|
|
747
747
|
export {
|
|
748
|
-
|
|
748
|
+
Tt as V,
|
|
749
749
|
xe as _
|
|
750
750
|
};
|
package/dist/index.js
CHANGED
package/dist/ui.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:where(.ve-playhead[data-v-
|
|
1
|
+
:where(.ve-playhead[data-v-601eb0b9]){--ve-playhead-nudge: 0px;--at-apply: absolute z-20 pointer-events-auto cursor-ew-resize h-full;transform:translate(calc(-50% - var(--ve-playhead-nudge)))}:where(.ve-playhead__icon[data-v-601eb0b9]){--at-apply: text-[#222226] pointer-events-none relative z-2}:where(.ve-playhead__line[data-v-601eb0b9]){--at-apply: bg-[#222226] h-full w-px translate-x--50% left-50% top-2px absolute pointer-events-none}:where(.ve-ruler[data-v-30f91636]){--ve-ruler-major: 8px;--ve-ruler-minor: 4px;--at-apply: sticky top-0 left-0 right-0 bg-white z-3 border-b border-[#e5e7eb] overflow-hidden}:where(.ve-ruler .ve-ruler__ticks[data-v-30f91636]){--at-apply: relative h-full w-full box-border}:where(.ve-ruler .ve-ruler__tick[data-v-30f91636]){--at-apply: absolute top-0 h-full text-center text-[#6b7280] text-[11px]}:where(.ve-ruler .ve-ruler__line[data-v-30f91636]){--at-apply: h-[var(--ve-ruler-minor)] w-px mx-auto bg-[#cbd5e1]}:where(.ve-ruler .ve-ruler__tick--major .ve-ruler__line[data-v-30f91636]){--at-apply: relative h-[var(--ve-ruler-major)] bg-[#94a3b8]}:where(.ve-ruler .ve-ruler__label[data-v-30f91636]){--at-apply: absolute font-mono text-right whitespace-nowrap left-4px bottom-0;transform:translateY(-50%)}:where(.ve-toolbar[data-v-85ddeb0f]){--at-apply: flex items-center justify-between gap-2 px-3 py-2.5 border-b border-[#eceff3]}:where(.ve-toolbar .ve-toolbar__group[data-v-85ddeb0f]){--at-apply: inline-flex items-center gap-2}:where(.ve-toolbar .ve-zoom[data-v-85ddeb0f]){--at-apply: min-w-14 text-center text-xs text-[#222226] px-2 py-1 border border-[#e5e7eb] rounded-lg bg-white}:where(.ve-toolbar .ve-btn[data-v-85ddeb0f]){--at-apply: border border-[#d1d5db] bg-white text-[#222226] rounded-lg h-7 w-7 cursor-pointer transition-all duration-150}:where(.ve-toolbar .ve-btn[data-v-85ddeb0f]:disabled){--at-apply: cursor-not-allowed opacity-45}:where(.ve-toolbar .ve-btn[data-v-85ddeb0f]:not(:disabled):hover){--at-apply: border-[#222226] text-[#222226]}:where(.ve-toolbar .ve-toolbar__time[data-v-85ddeb0f]){--at-apply: inline-flex items-center gap-1.5 text-xs font-mono text-[#222226] ml-auto}:where(.ve-toolbar .ve-toolbar__time-divider[data-v-85ddeb0f]){--at-apply: text-[#9ca3af]}:where(.ve-timeline[data-v-553c608f]){--ve-primary: #222226;--at-apply: flex flex-col w-full max-w-full min-w-0 rounded-10px}:where(.ve-timeline .ve-timeline__viewport[data-v-553c608f]){--at-apply: relative overflow-x-auto overflow-y-hidden w-full bg-white}:where(.ve-timeline .ve-timeline__content[data-v-553c608f]){--at-apply: relative min-h-full min-w-full}:where(.ve-timeline .ve-timeline__tracks[data-v-553c608f]){--at-apply: relative z-1 pb-3 flex flex-col gap-2px h-full}:where(.ve-timeline .ve-track[data-v-553c608f]){--at-apply: relative bg-[#f8fafc] overflow-hidden}:where(.ve-timeline .ve-track--main[data-v-553c608f]){background-color:#f4f4f6}:where(.ve-timeline .ve-track__body[data-v-553c608f]){--at-apply: relative h-full}:where(.ve-timeline .ve-segment[data-v-553c608f]){--at-apply: absolute top-0 bottom-0 rounded-[4px] text-[#0f172a] shadow-[inset_0_0_0_1px_rgba(255,255,255,.35)] cursor-pointer flex items-center overflow-hidden transition-[box-shadow] duration-150}:where(.ve-timeline .ve-segment--selected[data-v-553c608f]){--at-apply: shadow-[0_0_0_2px_var(--ve-primary),inset_0_0_0_1px_rgba(255,255,255,.45)]}:where(.ve-timeline .ve-segment--dragging[data-v-553c608f]){--at-apply: absolute z-50 rounded-[4px] text-[#0f172a] cursor-pointer flex items-center overflow-hidden pointer-events-none;box-shadow:0 4px 16px #0000004d,inset 0 0 0 2px #ffffff80}:where(.ve-timeline .ve-segment--preview[data-v-553c608f]){--at-apply: absolute z-45 rounded-[4px] pointer-events-none;opacity:.7;box-shadow:0 2px 8px #0003,inset 0 0 0 2px #fff6}:where(.ve-timeline .ve-segment__content[data-v-553c608f]){--at-apply: flex flex-col gap-1}:where(.ve-timeline .ve-segment__title[data-v-553c608f]){--at-apply: text-[12px] font-bold capitalize}:where(.ve-timeline .ve-segment__time[data-v-553c608f]){--at-apply: text-[11px] text-[rgba(15,23,42,.8)] font-mono}:where(.ve-timeline .ve-segment__selection[data-v-553c608f]){--at-apply: absolute bottom-0 left-0 right-0 top-0 pointer-events-none z-10}:where(.ve-timeline .ve-segment__handle[data-v-553c608f]){--at-apply: absolute h-full w-1 bg-[var(--ve-primary)] cursor-ew-resize pointer-events-auto;border:2px solid var(--ve-primary)}:where(.ve-timeline .ve-segment__handle--left[data-v-553c608f]){--at-apply: left-0 top-0 translate-x--50% rounded-l-1}:where(.ve-timeline .ve-segment__handle--right[data-v-553c608f]){--at-apply: right-0 top-0 translate-x-50% rounded-r-1}:where(.ve-timeline .ve-segment__handle-dots[data-v-553c608f]){--at-apply: absolute left-0 top-50% translate-x--50% translate-y--50% flex flex-col items-center gap-0.5 w-1;justify-content:center}:where(.ve-timeline .ve-segment__handle-dot[data-v-553c608f]){--at-apply: rounded-full bg-white;width:1px;height:1px}:where(.ve-timeline .ve-segment--placeholder[data-v-553c608f]){--at-apply: absolute pointer-events-none rounded-[4px] z-24;background:#2222261f;border:2px solid rgba(34,34,38,.6);box-shadow:0 2px 8px #2222264d}:where(.ve-timeline .ve-segment--placeholder-inner[data-v-553c608f]){--at-apply: absolute inset-0 rounded-[2px];opacity:.2}:where(.ve-timeline .ve-snap-guide[data-v-553c608f]){--at-apply: absolute pointer-events-none z-20;width:2px;background:var(--ve-primary);opacity:.7}:where(.ve-timeline .ve-new-track-line[data-v-553c608f]){--at-apply: absolute pointer-events-none z-25;height:2px;background:var(--ve-primary);opacity:.8}:where(.frames-segment[data-v-dd7a5d19]){--at-apply: relative flex items-stretch w-full h-full overflow-hidden rounded-4px}:where(.frames-segment .frames-segment__image[data-v-dd7a5d19]){--at-apply: w-full h-full rounded-4px;background-color:color-mix(in srgb,var(--ve-segment-accent, #222226) 15%,transparent)}:where(.frames-segment .frames-segment__video[data-v-dd7a5d19]){--at-apply: flex items-center w-full h-full overflow-hidden;background:#f1f5f9}:where(.frames-segment .frames-segment__thumb[data-v-dd7a5d19]){--at-apply: flex-1 min-w-14;aspect-ratio:1 / 1;background-size:cover;background-position:center}:where(.frames-segment .frames-segment__placeholder[data-v-dd7a5d19]){--at-apply: flex items-center justify-center w-full h-full text-[12px] rounded-4px;color:#0f172abf;background:#0000000d}:where(.frames-segment .frames-segment__badge[data-v-dd7a5d19]){--at-apply: absolute top-1.5 left-2 px-1.5 py-0.5 text-[11px] rounded-4px pointer-events-none;background:#00000040;color:#fff;transform-origin:left top;transform:scale(.9)}:where(.segment-base[data-v-d386af72]){--at-apply: relative flex items-center w-full h-full p-1.5 rounded-4px;background:#ffffff52;box-shadow:inset 0 0 0 1px #fff3}:where(.segment-base .segment-base__content[data-v-d386af72]){--at-apply: flex items-center justify-start gap-1.5 w-full}:where(.segment-base .segment-base__pill[data-v-d386af72]){--at-apply: inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-full text-[11px] font-semibold whitespace-nowrap;box-shadow:inset 0 0 0 1px #ffffff4d}:where(.segment-base .segment-base__pill--primary[data-v-d386af72]){color:var(--ve-segment-accent, #222226);background:#22222614}:where(.segment-base .segment-base__pill--muted[data-v-d386af72]){color:#0f172ab3;background:#2222260d}:where(.segment-base .segment-base__badge[data-v-d386af72]){--at-apply: absolute top-1.5 left-2 px-1.5 py-0.5 text-[11px] rounded-4px pointer-events-none;background:#00000040;color:#fff;transform-origin:left top;transform:scale(.9)}:where(.ve-editor-segment[data-v-d5455177]){--at-apply: relative flex flex-col gap-1.5 w-full h-full text-[#0f172a]}:where(.ve-editor-segment .ve-editor-segment__preview[data-v-d5455177]){--at-apply: flex items-stretch w-full min-h-14}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@video-editor/ui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.1-beta.
|
|
4
|
+
"version": "0.0.1-beta.9",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"vue": "^3.5.25"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@video-editor/protocol": "0.0.1-beta.
|
|
24
|
-
"@video-editor/shared": "0.0.1-beta.
|
|
23
|
+
"@video-editor/protocol": "0.0.1-beta.9",
|
|
24
|
+
"@video-editor/shared": "0.0.1-beta.9"
|
|
25
25
|
},
|
|
26
26
|
"scripts": {
|
|
27
27
|
"build": "vite build",
|