@video-editor/ui 0.0.1-beta.11 → 0.0.1-beta.12
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.
- package/dist/VideoEditorTimeline.d.ts +14 -1
- package/dist/VideoEditorTimeline.js +178 -145
- package/dist/VideoTimeline.js +1 -1
- package/dist/{index-ulgJGqrQ.js → index-t1DKjcCO.js} +92 -92
- package/dist/index.d.ts +18 -5
- package/dist/index.js +1 -1
- package/dist/ui.css +1 -1
- package/package.json +3 -3
|
@@ -5,6 +5,7 @@ import { ITrackType } from '@video-editor/shared';
|
|
|
5
5
|
import { IVideoProtocol } from '@video-editor/shared';
|
|
6
6
|
import { PublicProps } from 'vue';
|
|
7
7
|
import { SegmentUnion } from '@video-editor/shared';
|
|
8
|
+
import { TimelineSegment as TimelineSegment_2 } from '..';
|
|
8
9
|
import { TimelineTick } from '..';
|
|
9
10
|
import { TrackUnion } from '@video-editor/shared';
|
|
10
11
|
|
|
@@ -48,7 +49,19 @@ declare type __VLS_Props = {
|
|
|
48
49
|
|
|
49
50
|
declare function __VLS_template(): {
|
|
50
51
|
attrs: Partial<{}>;
|
|
51
|
-
slots: {
|
|
52
|
+
slots: Partial<Record<NonNullable<"segment-filter" | "segment-audio" | "segment-text" | "segment-frames" | "segment-sticker" | "segment-effect">, (_: {
|
|
53
|
+
segment: SegmentUnion;
|
|
54
|
+
layout: {
|
|
55
|
+
left: number;
|
|
56
|
+
top: number;
|
|
57
|
+
segment: TimelineSegment_2;
|
|
58
|
+
track: TimelineTrack;
|
|
59
|
+
trackIndex: number;
|
|
60
|
+
segmentIndex: number;
|
|
61
|
+
width: number;
|
|
62
|
+
isSelected: boolean;
|
|
63
|
+
};
|
|
64
|
+
}) => any>> & {
|
|
52
65
|
toolbar?(_: {
|
|
53
66
|
zoom: number;
|
|
54
67
|
canZoomIn: boolean;
|
|
@@ -1,98 +1,126 @@
|
|
|
1
|
-
import { defineComponent as V, reactive as
|
|
2
|
-
import { _ as
|
|
1
|
+
import { defineComponent as V, reactive as Y, watch as j, onBeforeUnmount as q, createElementBlock as g, openBlock as i, renderSlot as d, normalizeStyle as I, createElementVNode as u, Fragment as z, renderList as A, toDisplayString as T, createCommentVNode as D, computed as R, ref as x, createBlock as _, createSlots as G, withCtx as $, unref as P, normalizeProps as U, guardReactiveProps as B } from "vue";
|
|
2
|
+
import { _ as F, V as K } from "./index-t1DKjcCO.js";
|
|
3
3
|
import { generateThumbnails as Q } from "@video-editor/protocol";
|
|
4
4
|
import { isVideoFramesSegment as W } from "@video-editor/shared";
|
|
5
|
-
const X = { class: "frames-segment" }, Z = {
|
|
6
|
-
key: 0,
|
|
7
|
-
class: "frames-segment__video"
|
|
8
|
-
}, ee = {
|
|
5
|
+
const X = { class: "frames-segment" }, Z = { class: "frames-segment__video" }, ee = {
|
|
9
6
|
key: 1,
|
|
10
7
|
class: "frames-segment__placeholder"
|
|
11
|
-
}, te = {
|
|
12
|
-
key:
|
|
13
|
-
class: "frames-segment__placeholder"
|
|
14
|
-
}, ae = {
|
|
15
|
-
key: 3,
|
|
8
|
+
}, te = { class: "frames-segment__placeholder" }, ne = {
|
|
9
|
+
key: 0,
|
|
16
10
|
class: "frames-segment__badge"
|
|
17
|
-
},
|
|
11
|
+
}, se = /* @__PURE__ */ V({
|
|
18
12
|
name: "FramesSegment",
|
|
19
13
|
__name: "FramesSegment",
|
|
20
14
|
props: {
|
|
21
15
|
segment: {}
|
|
22
16
|
},
|
|
23
|
-
setup(
|
|
24
|
-
const
|
|
25
|
-
let
|
|
26
|
-
|
|
17
|
+
setup(r) {
|
|
18
|
+
const p = r, n = Y({ items: [], loading: !1, error: null });
|
|
19
|
+
let l = 0;
|
|
20
|
+
j(() => p.segment, (s, a) => {
|
|
27
21
|
if (!W(s))
|
|
28
22
|
return;
|
|
29
|
-
(!
|
|
30
|
-
}, { immediate: !0, deep: !0 }),
|
|
31
|
-
|
|
23
|
+
(!a || k(a, s)) && E(s);
|
|
24
|
+
}, { immediate: !0, deep: !0 }), q(() => {
|
|
25
|
+
h();
|
|
32
26
|
});
|
|
33
|
-
function
|
|
34
|
-
return s.url !==
|
|
27
|
+
function k(s, a) {
|
|
28
|
+
return s.url !== a.url || s.startTime !== a.startTime || s.endTime !== a.endTime || s.fromTime !== a.fromTime;
|
|
35
29
|
}
|
|
36
|
-
async function
|
|
30
|
+
async function E(s) {
|
|
37
31
|
if (!s.url)
|
|
38
32
|
return;
|
|
39
|
-
const
|
|
40
|
-
|
|
33
|
+
const a = ++l;
|
|
34
|
+
h(), n.loading = !0, n.error = null;
|
|
41
35
|
try {
|
|
42
|
-
const m =
|
|
43
|
-
if (
|
|
36
|
+
const m = C(s), f = await Q(s.url, m);
|
|
37
|
+
if (l !== a)
|
|
44
38
|
return;
|
|
45
|
-
const
|
|
46
|
-
tsMs: Math.round(
|
|
47
|
-
url: URL.createObjectURL(
|
|
39
|
+
const v = f.map((b) => ({
|
|
40
|
+
tsMs: Math.round(b.ts / 1e3),
|
|
41
|
+
url: URL.createObjectURL(b.img)
|
|
48
42
|
}));
|
|
49
|
-
n.items =
|
|
43
|
+
n.items = v, n.loading = !1;
|
|
50
44
|
} catch (m) {
|
|
51
|
-
if (
|
|
45
|
+
if (l !== a)
|
|
52
46
|
return;
|
|
53
47
|
n.error = m instanceof Error ? m.message : String(m), n.loading = !1;
|
|
54
48
|
}
|
|
55
49
|
}
|
|
56
|
-
function
|
|
57
|
-
const
|
|
58
|
-
return { start:
|
|
50
|
+
function C(s) {
|
|
51
|
+
const a = Math.max(s.fromTime ?? 0, 0) * 1e3, m = Math.max(s.endTime - s.startTime, 1), f = a + m * 1e3, b = Math.max(Math.floor((f - a) / 8), 2e5);
|
|
52
|
+
return { start: a, end: f, step: b };
|
|
59
53
|
}
|
|
60
|
-
function
|
|
54
|
+
function h() {
|
|
61
55
|
n.items.forEach((s) => URL.revokeObjectURL(s.url)), n.items = [];
|
|
62
56
|
}
|
|
63
|
-
function
|
|
57
|
+
function S() {
|
|
64
58
|
return {
|
|
65
|
-
backgroundImage:
|
|
59
|
+
backgroundImage: p.segment.url ? `url(${p.segment.url})` : "",
|
|
66
60
|
backgroundRepeat: "repeat-x",
|
|
67
61
|
backgroundSize: "56px 56px",
|
|
68
62
|
backgroundPosition: "left center"
|
|
69
63
|
};
|
|
70
64
|
}
|
|
71
|
-
return (s,
|
|
72
|
-
|
|
65
|
+
return (s, a) => (i(), g("div", X, [
|
|
66
|
+
r.segment.type === "image" ? d(s.$slots, "image", {
|
|
73
67
|
key: 0,
|
|
74
|
-
|
|
75
|
-
style:
|
|
76
|
-
},
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
68
|
+
segment: r.segment,
|
|
69
|
+
style: I(S())
|
|
70
|
+
}, () => [
|
|
71
|
+
u("div", {
|
|
72
|
+
class: "frames-segment__image",
|
|
73
|
+
style: I(S())
|
|
74
|
+
}, null, 4)
|
|
75
|
+
], !0) : r.segment.type === "video" ? (i(), g(z, { key: 1 }, [
|
|
76
|
+
n.items.length ? d(s.$slots, "video", {
|
|
77
|
+
key: 0,
|
|
78
|
+
segment: r.segment,
|
|
79
|
+
thumbnails: n.items
|
|
80
|
+
}, () => [
|
|
81
|
+
u("div", Z, [
|
|
82
|
+
(i(!0), g(z, null, A(n.items, (m) => (i(), g("div", {
|
|
83
|
+
key: `${r.segment.id}-${m.tsMs}`,
|
|
84
|
+
class: "frames-segment__thumb",
|
|
85
|
+
style: I({ backgroundImage: `url(${m.url})` })
|
|
86
|
+
}, null, 4))), 128))
|
|
87
|
+
])
|
|
88
|
+
], !0) : (i(), g("div", ee, [
|
|
89
|
+
n.loading ? d(s.$slots, "loading", {
|
|
90
|
+
key: 0,
|
|
91
|
+
segment: r.segment
|
|
92
|
+
}, () => [
|
|
93
|
+
a[0] || (a[0] = u("span", null, "抽帧中…", -1))
|
|
94
|
+
], !0) : n.error ? d(s.$slots, "error", {
|
|
95
|
+
key: 1,
|
|
96
|
+
segment: r.segment,
|
|
97
|
+
error: n.error
|
|
98
|
+
}, () => [
|
|
99
|
+
a[1] || (a[1] = u("span", null, "生成失败", -1))
|
|
100
|
+
], !0) : d(s.$slots, "empty", {
|
|
101
|
+
key: 2,
|
|
102
|
+
segment: r.segment
|
|
103
|
+
}, () => [
|
|
104
|
+
a[2] || (a[2] = u("span", null, "未生成缩略图", -1))
|
|
105
|
+
], !0)
|
|
85
106
|
]))
|
|
86
|
-
], 64)) : (
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
107
|
+
], 64)) : d(s.$slots, "fallback", {
|
|
108
|
+
key: 2,
|
|
109
|
+
segment: r.segment
|
|
110
|
+
}, () => [
|
|
111
|
+
u("div", te, [
|
|
112
|
+
u("span", null, T(r.segment.type), 1)
|
|
113
|
+
])
|
|
114
|
+
], !0),
|
|
115
|
+
d(s.$slots, "overlay", { segment: r.segment }, () => [
|
|
116
|
+
r.segment.extra?.label ? (i(), g("span", ne, T(r.segment.extra?.label), 1)) : D("", !0)
|
|
117
|
+
], !0)
|
|
90
118
|
]));
|
|
91
119
|
}
|
|
92
|
-
}),
|
|
120
|
+
}), re = /* @__PURE__ */ F(se, [["__scopeId", "data-v-4ab97cd2"]]), ae = { class: "segment-base" }, oe = { class: "segment-base__content" }, le = { class: "segment-base__pill segment-base__pill--primary" }, ie = { class: "segment-base__pill segment-base__pill--muted" }, me = {
|
|
93
121
|
key: 0,
|
|
94
122
|
class: "segment-base__badge"
|
|
95
|
-
},
|
|
123
|
+
}, ce = /* @__PURE__ */ V({
|
|
96
124
|
name: "SegmentBase",
|
|
97
125
|
__name: "SegmentBase",
|
|
98
126
|
props: {
|
|
@@ -100,20 +128,20 @@ const X = { class: "frames-segment" }, Z = {
|
|
|
100
128
|
trackType: {},
|
|
101
129
|
accentColor: { default: "#222226" }
|
|
102
130
|
},
|
|
103
|
-
setup(
|
|
104
|
-
const
|
|
105
|
-
const
|
|
106
|
-
return typeof
|
|
131
|
+
setup(r) {
|
|
132
|
+
const p = r, n = R(() => {
|
|
133
|
+
const l = p.segment?.extra?.label;
|
|
134
|
+
return typeof l == "string" ? l : null;
|
|
107
135
|
});
|
|
108
|
-
return (
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
136
|
+
return (l, k) => (i(), g("div", ae, [
|
|
137
|
+
u("div", oe, [
|
|
138
|
+
u("span", le, T(r.trackType), 1),
|
|
139
|
+
u("span", ie, T(r.segment.segmentType), 1)
|
|
112
140
|
]),
|
|
113
|
-
n.value ? (
|
|
141
|
+
n.value ? (i(), g("span", me, T(n.value), 1)) : D("", !0)
|
|
114
142
|
]));
|
|
115
143
|
}
|
|
116
|
-
}),
|
|
144
|
+
}), de = /* @__PURE__ */ F(ce, [["__scopeId", "data-v-d386af72"]]), ue = { class: "ve-editor-segment__preview" }, L = "#222226", ge = 0.4, fe = /* @__PURE__ */ V({
|
|
117
145
|
name: "VideoEditorTimeline",
|
|
118
146
|
__name: "index",
|
|
119
147
|
props: {
|
|
@@ -126,145 +154,150 @@ const X = { class: "frames-segment" }, Z = {
|
|
|
126
154
|
disableInteraction: { type: Boolean, default: !1 }
|
|
127
155
|
},
|
|
128
156
|
emits: ["update:currentTime", "update:zoom", "update:selectedSegmentId", "segmentClick", "segmentDragEnd", "segmentResizeEnd"],
|
|
129
|
-
setup(
|
|
130
|
-
const n =
|
|
131
|
-
|
|
132
|
-
|
|
157
|
+
setup(r, { emit: p }) {
|
|
158
|
+
const n = r, l = p, k = x(n.selectedSegmentId ?? null);
|
|
159
|
+
j(() => n.selectedSegmentId, (e) => {
|
|
160
|
+
k.value = e ?? null;
|
|
133
161
|
});
|
|
134
|
-
const
|
|
135
|
-
frames:
|
|
162
|
+
const E = {
|
|
163
|
+
frames: L,
|
|
136
164
|
audio: "#0ea5e9",
|
|
137
165
|
text: "#16a34a",
|
|
138
166
|
sticker: "#f97316",
|
|
139
167
|
effect: "#a855f7",
|
|
140
168
|
filter: "#64748b"
|
|
141
|
-
},
|
|
142
|
-
const t =
|
|
169
|
+
}, C = R(() => n.protocol?.tracks?.length ? n.trackTypes?.length ? n.protocol.tracks.filter((e) => n.trackTypes?.includes(e.trackType)) : n.protocol.tracks : []), h = R(() => C.value.map((e, o) => {
|
|
170
|
+
const t = E[e.trackType] || L, c = s(t, ge), M = e.trackType === "frames" && e.isMain === !0;
|
|
143
171
|
return {
|
|
144
|
-
id: e.trackId || `${e.trackType}-${
|
|
172
|
+
id: e.trackId || `${e.trackType}-${o}`,
|
|
145
173
|
label: e.trackType,
|
|
146
174
|
type: e.trackType,
|
|
147
175
|
color: t,
|
|
148
|
-
isMain:
|
|
176
|
+
isMain: M,
|
|
149
177
|
payload: e,
|
|
150
|
-
segments: e.children.map((
|
|
151
|
-
id:
|
|
152
|
-
start:
|
|
153
|
-
end:
|
|
154
|
-
type:
|
|
155
|
-
color:
|
|
156
|
-
payload:
|
|
178
|
+
segments: e.children.map((y) => ({
|
|
179
|
+
id: y.id,
|
|
180
|
+
start: y.startTime,
|
|
181
|
+
end: y.endTime,
|
|
182
|
+
type: y.segmentType,
|
|
183
|
+
color: c,
|
|
184
|
+
payload: y
|
|
157
185
|
}))
|
|
158
186
|
};
|
|
159
|
-
})),
|
|
187
|
+
})), S = R(() => {
|
|
160
188
|
if (!n.protocol?.tracks?.length)
|
|
161
189
|
return 0;
|
|
162
|
-
const e = n.protocol.tracks.flatMap((
|
|
190
|
+
const e = n.protocol.tracks.flatMap((o) => o.children.map((t) => t.endTime));
|
|
163
191
|
return e.length ? Math.max(...e) : 0;
|
|
164
192
|
});
|
|
165
|
-
function s(e,
|
|
193
|
+
function s(e, o) {
|
|
166
194
|
const t = e.replace("#", "");
|
|
167
195
|
if (!(t.length === 3 || t.length === 6))
|
|
168
196
|
return e;
|
|
169
|
-
const
|
|
170
|
-
return `rgba(${
|
|
197
|
+
const c = t.length === 3 ? t.split("").map((w) => w + w).join("") : t, M = Number.parseInt(c.slice(0, 2), 16), y = Number.parseInt(c.slice(2, 4), 16), J = Number.parseInt(c.slice(4, 6), 16);
|
|
198
|
+
return `rgba(${M}, ${y}, ${J}, ${o})`;
|
|
171
199
|
}
|
|
172
|
-
function
|
|
200
|
+
function a(e) {
|
|
173
201
|
return e && typeof e == "object" && "segmentType" in e ? e : null;
|
|
174
202
|
}
|
|
175
203
|
function m(e) {
|
|
176
|
-
const
|
|
177
|
-
if (
|
|
178
|
-
return
|
|
204
|
+
const o = e.payload;
|
|
205
|
+
if (o)
|
|
206
|
+
return o;
|
|
179
207
|
if (n.protocol)
|
|
180
208
|
return n.protocol.tracks.find((t) => t.trackId === e.id);
|
|
181
209
|
}
|
|
182
|
-
function
|
|
183
|
-
|
|
184
|
-
}
|
|
185
|
-
function T(e) {
|
|
186
|
-
const a = i(e.segment.payload), t = m(e.track);
|
|
187
|
-
a && (u(a.id), t && c("segmentClick", { segment: a, track: t }));
|
|
210
|
+
function f(e) {
|
|
211
|
+
k.value = e, l("update:selectedSegmentId", e);
|
|
188
212
|
}
|
|
189
|
-
function
|
|
190
|
-
|
|
213
|
+
function v(e) {
|
|
214
|
+
const o = a(e.segment.payload), t = m(e.track);
|
|
215
|
+
o && (f(o.id), t && l("segmentClick", { segment: o, track: t }));
|
|
191
216
|
}
|
|
192
|
-
function
|
|
193
|
-
|
|
217
|
+
function b(e) {
|
|
218
|
+
f(e.segment.id);
|
|
194
219
|
}
|
|
195
220
|
function N(e) {
|
|
196
|
-
|
|
221
|
+
l("segmentDragEnd", e);
|
|
197
222
|
}
|
|
198
223
|
function O(e) {
|
|
199
|
-
|
|
224
|
+
f(e.segment.id);
|
|
225
|
+
}
|
|
226
|
+
function H(e) {
|
|
227
|
+
l("segmentResizeEnd", e);
|
|
200
228
|
}
|
|
201
|
-
return (e,
|
|
202
|
-
tracks:
|
|
203
|
-
duration:
|
|
204
|
-
"current-time":
|
|
205
|
-
zoom:
|
|
206
|
-
fps:
|
|
207
|
-
"snap-step":
|
|
208
|
-
"selected-segment-id":
|
|
209
|
-
"disable-interaction":
|
|
210
|
-
"onUpdate:currentTime":
|
|
211
|
-
"onUpdate:zoom":
|
|
212
|
-
onSegmentClick:
|
|
213
|
-
onSegmentDragStart:
|
|
214
|
-
onSegmentDragEnd:
|
|
215
|
-
onSegmentResizeStart:
|
|
216
|
-
onSegmentResizeEnd:
|
|
217
|
-
onBackgroundClick:
|
|
229
|
+
return (e, o) => (i(), _(K, {
|
|
230
|
+
tracks: h.value,
|
|
231
|
+
duration: S.value,
|
|
232
|
+
"current-time": r.currentTime,
|
|
233
|
+
zoom: r.zoom,
|
|
234
|
+
fps: r.protocol?.fps || 30,
|
|
235
|
+
"snap-step": r.snapStep,
|
|
236
|
+
"selected-segment-id": k.value ?? null,
|
|
237
|
+
"disable-interaction": r.disableInteraction,
|
|
238
|
+
"onUpdate:currentTime": o[0] || (o[0] = (t) => l("update:currentTime", t)),
|
|
239
|
+
"onUpdate:zoom": o[1] || (o[1] = (t) => l("update:zoom", t)),
|
|
240
|
+
onSegmentClick: v,
|
|
241
|
+
onSegmentDragStart: b,
|
|
242
|
+
onSegmentDragEnd: N,
|
|
243
|
+
onSegmentResizeStart: O,
|
|
244
|
+
onSegmentResizeEnd: H,
|
|
245
|
+
onBackgroundClick: o[2] || (o[2] = (t) => f(null))
|
|
218
246
|
}, G({
|
|
219
|
-
segment:
|
|
220
|
-
(
|
|
221
|
-
key:
|
|
247
|
+
segment: $(({ layout: t }) => [
|
|
248
|
+
(i(!0), g(z, null, A([a(t.segment.payload)], (c) => (i(), g(z, {
|
|
249
|
+
key: c?.id || t.segment.id
|
|
222
250
|
}, [
|
|
223
|
-
|
|
251
|
+
c ? (i(), g("div", {
|
|
224
252
|
key: 0,
|
|
225
253
|
class: "ve-editor-segment",
|
|
226
|
-
style:
|
|
254
|
+
style: I({ "--ve-segment-accent": t.track.color || L })
|
|
227
255
|
}, [
|
|
228
|
-
|
|
229
|
-
d
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
},
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
"
|
|
237
|
-
|
|
256
|
+
u("div", ue, [
|
|
257
|
+
d(e.$slots, `segment-${c.segmentType}`, {
|
|
258
|
+
segment: c,
|
|
259
|
+
layout: t
|
|
260
|
+
}, () => [
|
|
261
|
+
c.segmentType === "frames" ? (i(), _(P(re), {
|
|
262
|
+
key: 0,
|
|
263
|
+
segment: c
|
|
264
|
+
}, null, 8, ["segment"])) : (i(), _(P(de), {
|
|
265
|
+
key: 1,
|
|
266
|
+
segment: c,
|
|
267
|
+
"track-type": t.track.type || "unknown",
|
|
268
|
+
"accent-color": t.track.color
|
|
269
|
+
}, null, 8, ["segment", "track-type", "accent-color"]))
|
|
270
|
+
], !0)
|
|
238
271
|
])
|
|
239
|
-
], 4)) :
|
|
272
|
+
], 4)) : D("", !0)
|
|
240
273
|
], 64))), 128))
|
|
241
274
|
]),
|
|
242
275
|
_: 2
|
|
243
276
|
}, [
|
|
244
277
|
e.$slots.toolbar ? {
|
|
245
278
|
name: "toolbar",
|
|
246
|
-
fn:
|
|
247
|
-
|
|
279
|
+
fn: $((t) => [
|
|
280
|
+
d(e.$slots, "toolbar", U(B(t)), void 0, !0)
|
|
248
281
|
]),
|
|
249
282
|
key: "0"
|
|
250
283
|
} : void 0,
|
|
251
284
|
e.$slots.ruler ? {
|
|
252
285
|
name: "ruler",
|
|
253
|
-
fn:
|
|
254
|
-
|
|
286
|
+
fn: $((t) => [
|
|
287
|
+
d(e.$slots, "ruler", U(B(t)), void 0, !0)
|
|
255
288
|
]),
|
|
256
289
|
key: "1"
|
|
257
290
|
} : void 0,
|
|
258
291
|
e.$slots.playhead ? {
|
|
259
292
|
name: "playhead",
|
|
260
|
-
fn:
|
|
261
|
-
|
|
293
|
+
fn: $((t) => [
|
|
294
|
+
d(e.$slots, "playhead", U(B(t)), void 0, !0)
|
|
262
295
|
]),
|
|
263
296
|
key: "2"
|
|
264
297
|
} : void 0
|
|
265
298
|
]), 1032, ["tracks", "duration", "current-time", "zoom", "fps", "snap-step", "selected-segment-id", "disable-interaction"]));
|
|
266
299
|
}
|
|
267
|
-
}),
|
|
300
|
+
}), Te = /* @__PURE__ */ F(fe, [["__scopeId", "data-v-8004be28"]]);
|
|
268
301
|
export {
|
|
269
|
-
|
|
302
|
+
Te as default
|
|
270
303
|
};
|
package/dist/VideoTimeline.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as pe, createElementBlock 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",
|
|
@@ -8,10 +8,10 @@ const Ne = /* @__PURE__ */ pe({
|
|
|
8
8
|
emits: ["dragStart"],
|
|
9
9
|
setup(l, { emit: f }) {
|
|
10
10
|
const s = f;
|
|
11
|
-
return (o, i) => (
|
|
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
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));
|
|
@@ -31,9 +31,9 @@ const Ne = /* @__PURE__ */ pe({
|
|
|
31
31
|
ticks: {}
|
|
32
32
|
},
|
|
33
33
|
setup(l) {
|
|
34
|
-
return (f, s) => (
|
|
34
|
+
return (f, s) => (_(), k("div", Ye, [
|
|
35
35
|
c("div", He, [
|
|
36
|
-
(
|
|
36
|
+
(_(!0), k(ge, null, he(l.ticks, (o) => (_(), k("div", {
|
|
37
37
|
key: o.timeMs,
|
|
38
38
|
class: $e(["ve-ruler__tick", { "ve-ruler__tick--major": o.isMajor }]),
|
|
39
39
|
style: D({
|
|
@@ -42,7 +42,7 @@ const Ne = /* @__PURE__ */ pe({
|
|
|
42
42
|
})
|
|
43
43
|
}, [
|
|
44
44
|
s[0] || (s[0] = c("div", { class: "ve-ruler__line" }, null, -1)),
|
|
45
|
-
o.isMajor && o.label ? (
|
|
45
|
+
o.isMajor && o.label ? (_(), k("div", We, G(o.label), 1)) : ee("", !0)
|
|
46
46
|
], 6))), 128))
|
|
47
47
|
])
|
|
48
48
|
]));
|
|
@@ -61,14 +61,14 @@ const Ne = /* @__PURE__ */ pe({
|
|
|
61
61
|
emits: ["zoomIn", "zoomOut"],
|
|
62
62
|
setup(l, { emit: f }) {
|
|
63
63
|
const s = f;
|
|
64
|
-
return (o, i) => (
|
|
64
|
+
return (o, i) => (_(), k("div", Ue, [
|
|
65
65
|
c("div", Ke, [
|
|
66
66
|
V(o.$slots, "left-actions", {}, () => [
|
|
67
67
|
c("button", {
|
|
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
|
]),
|
|
@@ -108,13 +108,13 @@ function lt(l, f, s, o) {
|
|
|
108
108
|
if (I < p / 2)
|
|
109
109
|
return { isGap: !0, insertIndex: 0 };
|
|
110
110
|
for (let g = 0; g < f.value.length; g++) {
|
|
111
|
-
const
|
|
112
|
-
if (I >=
|
|
111
|
+
const d = (g + 1) * r - p / 2, te = (g + 1) * r + p / 2;
|
|
112
|
+
if (I >= d && I < te)
|
|
113
113
|
return { isGap: !0, insertIndex: g + 1 };
|
|
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,7 +125,7 @@ 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) {
|
|
@@ -133,10 +133,10 @@ function ot(l, f, s) {
|
|
|
133
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,21 +151,21 @@ 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,
|
|
158
158
|
onDrag: r,
|
|
159
159
|
onDragEnd: p
|
|
160
|
-
} = l, g = z(null),
|
|
160
|
+
} = l, g = z(null), d = z(null), { detectTrackGap: te, resolveTrackIndexFromClientY: ke } = lt(
|
|
161
161
|
s,
|
|
162
162
|
f,
|
|
163
163
|
o,
|
|
164
164
|
i
|
|
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,41 +176,41 @@ function it(l) {
|
|
|
176
176
|
});
|
|
177
177
|
}
|
|
178
178
|
function re(v, q, F, $) {
|
|
179
|
-
const { layout:
|
|
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 = {
|
|
183
|
-
segment:
|
|
184
|
-
track:
|
|
185
|
-
trackIndex:
|
|
186
|
-
segmentIndex:
|
|
187
|
-
startTime:
|
|
188
|
-
endTime:
|
|
189
|
-
targetTrackIndex:
|
|
190
|
-
targetTrackId:
|
|
183
|
+
segment: u.segment,
|
|
184
|
+
track: u.track,
|
|
185
|
+
trackIndex: u.trackIndex,
|
|
186
|
+
segmentIndex: u.segmentIndex,
|
|
187
|
+
startTime: u.segment.start,
|
|
188
|
+
endTime: u.segment.end,
|
|
189
|
+
targetTrackIndex: u.trackIndex,
|
|
190
|
+
targetTrackId: u.track.id,
|
|
191
191
|
isNewTrack: !1,
|
|
192
|
-
visualTrackIndex:
|
|
192
|
+
visualTrackIndex: u.trackIndex,
|
|
193
193
|
isValidTarget: !0,
|
|
194
194
|
mouseDeltaY: 0
|
|
195
195
|
};
|
|
196
196
|
I(E);
|
|
197
197
|
}
|
|
198
|
-
const H =
|
|
198
|
+
const H = u.segment.end - u.segment.start, W = u.segment.type || u.track.type, J = ke(F), w = J >= 0 ? J : u.trackIndex, L = f.value[w];
|
|
199
199
|
let x, Q, A, B = !1, ne, R = !0;
|
|
200
200
|
if (L && L.type === W) {
|
|
201
201
|
const E = te(F);
|
|
202
|
-
E ? (B = !0, ne = E.insertIndex, x = E.insertIndex, Q = E.insertIndex, A =
|
|
202
|
+
E ? (B = !0, ne = E.insertIndex, x = E.insertIndex, Q = E.insertIndex, A = u.track.id, R = !0) : (x = w, Q = w, A = L.id, R = !0);
|
|
203
203
|
} else if (!s.value)
|
|
204
|
-
x =
|
|
204
|
+
x = u.trackIndex, Q = w, A = u.track.id, R = !1;
|
|
205
205
|
else {
|
|
206
|
-
const E = s.value.getBoundingClientRect(),
|
|
207
|
-
B = !0, ne = ve ? w : w + 1, x = ne, Q = w, A =
|
|
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
|
+
B = !0, ne = ve ? w : w + 1, x = ne, Q = w, A = u.track.id, R = !0;
|
|
208
208
|
}
|
|
209
|
-
const Te = h(
|
|
210
|
-
segment:
|
|
211
|
-
track:
|
|
212
|
-
trackIndex:
|
|
213
|
-
segmentIndex:
|
|
209
|
+
const Te = h(u.segment.start + ue / Math.max(b.value, 1e-4)), j = Math.max(0, Te), Ie = j + H, se = {
|
|
210
|
+
segment: u.segment,
|
|
211
|
+
track: u.track,
|
|
212
|
+
trackIndex: u.trackIndex,
|
|
213
|
+
segmentIndex: u.segmentIndex,
|
|
214
214
|
startTime: j,
|
|
215
215
|
endTime: Ie,
|
|
216
216
|
targetTrackIndex: x,
|
|
@@ -221,18 +221,18 @@ function it(l) {
|
|
|
221
221
|
isValidTarget: R,
|
|
222
222
|
mouseDeltaY: O
|
|
223
223
|
};
|
|
224
|
-
v.moved && (
|
|
224
|
+
v.moved && (d.value = se, $ === "drag" ? r(se) : $ === "end" && p(se));
|
|
225
225
|
}
|
|
226
226
|
function S(v) {
|
|
227
227
|
g.value && re(g.value, v.clientX, v.clientY, "drag");
|
|
228
228
|
}
|
|
229
229
|
function T(v) {
|
|
230
|
-
g.value && (re(g.value, v.clientX, v.clientY, "end"), g.value = null,
|
|
230
|
+
g.value && (re(g.value, v.clientX, v.clientY, "end"), g.value = null, d.value = null);
|
|
231
231
|
}
|
|
232
232
|
return {
|
|
233
233
|
// State
|
|
234
234
|
draggingState: g,
|
|
235
|
-
dragPreview:
|
|
235
|
+
dragPreview: d,
|
|
236
236
|
snapGuides: oe,
|
|
237
237
|
// Methods
|
|
238
238
|
startDrag: ie,
|
|
@@ -240,10 +240,10 @@ function it(l) {
|
|
|
240
240
|
handleDragEnd: T
|
|
241
241
|
};
|
|
242
242
|
}
|
|
243
|
-
const rt = { class: "ve-timeline" },
|
|
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" },
|
|
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,7 +264,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["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) => {
|
|
@@ -285,20 +285,20 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["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
|
|
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
291
|
}), te = M(() => {
|
|
292
|
-
const e = g.value *
|
|
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
|
-
}),
|
|
295
|
-
const e = Math.max(
|
|
294
|
+
}), ke = M(() => {
|
|
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 = M(() => s.currentTime *
|
|
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) => {
|
|
301
|
-
const m = Math.max((t.end - t.start) *
|
|
301
|
+
const m = Math.max((t.end - t.start) * d.value, 6), C = t.start * d.value;
|
|
302
302
|
return {
|
|
303
303
|
track: e,
|
|
304
304
|
trackIndex: a,
|
|
@@ -312,16 +312,16 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
312
312
|
}))), {
|
|
313
313
|
draggingState: F,
|
|
314
314
|
dragPreview: $,
|
|
315
|
-
snapGuides:
|
|
316
|
-
startDrag:
|
|
317
|
-
handleDragMove:
|
|
318
|
-
handleDragEnd:
|
|
315
|
+
snapGuides: u,
|
|
316
|
+
startDrag: _e,
|
|
317
|
+
handleDragMove: be,
|
|
318
|
+
handleDragEnd: ue
|
|
319
319
|
} = it({
|
|
320
320
|
tracks: Re(s, "tracks"),
|
|
321
321
|
tracksRef: Z,
|
|
322
322
|
trackHeightPx: S,
|
|
323
323
|
trackGapPx: T,
|
|
324
|
-
pixelsPerMs:
|
|
324
|
+
pixelsPerMs: d,
|
|
325
325
|
disableInteraction: Re(s, "disableInteraction"),
|
|
326
326
|
snap: j,
|
|
327
327
|
onDragStart: (e) => {
|
|
@@ -339,7 +339,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
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) *
|
|
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,
|
|
@@ -365,7 +365,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
365
365
|
const e = i.value;
|
|
366
366
|
if (!e)
|
|
367
367
|
return;
|
|
368
|
-
const a = e.clientWidth / 2, t = s.currentTime *
|
|
368
|
+
const a = e.clientWidth / 2, t = s.currentTime * d.value - a;
|
|
369
369
|
e.scrollLeft = Math.max(0, t);
|
|
370
370
|
}
|
|
371
371
|
function B(e) {
|
|
@@ -411,25 +411,25 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["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
|
-
function
|
|
432
|
+
function de(e, a, t) {
|
|
433
433
|
if (s.disableInteraction)
|
|
434
434
|
return;
|
|
435
435
|
t.stopPropagation(), t.preventDefault(), W.value = {
|
|
@@ -449,7 +449,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
449
449
|
O.value = n, o("segmentResizeStart", n);
|
|
450
450
|
}
|
|
451
451
|
function ce(e, a, t) {
|
|
452
|
-
const { layout: n, edge: m, initialX: C } = e, X = (a - C) / Math.max(
|
|
452
|
+
const { layout: n, edge: m, initialX: C } = e, X = (a - C) / Math.max(d.value, 1e-4), P = Math.max(s.minSegmentDuration, 10);
|
|
453
453
|
let N = n.segment.start, U = n.segment.end;
|
|
454
454
|
m === "start" ? (N = j(Math.max(0, n.segment.start + X)), n.segment.end - N < P && (N = n.segment.end - P)) : U = j(Math.max(n.segment.start + P, n.segment.end + X));
|
|
455
455
|
const ae = {
|
|
@@ -475,7 +475,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["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) {
|
|
@@ -493,7 +493,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
493
493
|
const { layout: a } = F.value;
|
|
494
494
|
we(a, e);
|
|
495
495
|
}
|
|
496
|
-
|
|
496
|
+
ue(e), w.value = !1;
|
|
497
497
|
}
|
|
498
498
|
function Ce() {
|
|
499
499
|
r.value = B(r.value * 1.25);
|
|
@@ -508,7 +508,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
508
508
|
const ae = U.mainMs * e;
|
|
509
509
|
if (ae < Ee)
|
|
510
510
|
continue;
|
|
511
|
-
const ze = Math.abs(ae -
|
|
511
|
+
const ze = Math.abs(ae - _t);
|
|
512
512
|
ze < N && (P = U, N = ze);
|
|
513
513
|
}
|
|
514
514
|
return P || X[X.length - 1] || y[y.length - 1];
|
|
@@ -553,7 +553,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
553
553
|
}
|
|
554
554
|
return Me(e);
|
|
555
555
|
}
|
|
556
|
-
return (e, a) => (
|
|
556
|
+
return (e, a) => (_(), k("div", rt, [
|
|
557
557
|
V(e.$slots, "toolbar", {
|
|
558
558
|
zoom: r.value,
|
|
559
559
|
canZoomIn: r.value < l.maxZoom,
|
|
@@ -583,13 +583,13 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["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
|
}, [
|
|
590
590
|
V(e.$slots, "ruler", {
|
|
591
591
|
ticks: ie.value,
|
|
592
|
-
pixelsPerMs:
|
|
592
|
+
pixelsPerMs: d.value
|
|
593
593
|
}, () => [
|
|
594
594
|
ye(je, {
|
|
595
595
|
ticks: ie.value,
|
|
@@ -612,7 +612,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
612
612
|
class: "ve-timeline__tracks",
|
|
613
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,
|
|
617
617
|
class: $e(["ve-track", { "ve-track--main": t.track.isMain }]),
|
|
618
618
|
style: D({ height: `${S.value}px` })
|
|
@@ -621,11 +621,11 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
621
621
|
track: t.track,
|
|
622
622
|
index: t.trackIndex,
|
|
623
623
|
segments: t.segments,
|
|
624
|
-
pixelsPerMs:
|
|
624
|
+
pixelsPerMs: d.value,
|
|
625
625
|
height: S.value
|
|
626
626
|
}, () => [
|
|
627
|
-
c("div",
|
|
628
|
-
(
|
|
627
|
+
c("div", ut, [
|
|
628
|
+
(_(!0), k(ge, null, he(t.segments, (n) => Ve((_(), k("div", {
|
|
629
629
|
key: n.segment.id,
|
|
630
630
|
class: $e(["ve-segment", {
|
|
631
631
|
"ve-segment--selected": n.isSelected
|
|
@@ -635,7 +635,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
635
635
|
width: `${n.width}px`,
|
|
636
636
|
backgroundColor: n.segment.color || t.track.color || "var(--ve-primary)"
|
|
637
637
|
}),
|
|
638
|
-
onMousedown: le((m) => K(
|
|
638
|
+
onMousedown: le((m) => K(_e)(n, m), ["prevent", "stop"]),
|
|
639
639
|
onClick: le((m) => we(n, m), ["stop"])
|
|
640
640
|
}, [
|
|
641
641
|
V(e.$slots, "segment", {
|
|
@@ -649,28 +649,28 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
649
649
|
c("div", vt, G(R(n.segment.start)) + " - " + G(R(n.segment.end)), 1)
|
|
650
650
|
])
|
|
651
651
|
], !0),
|
|
652
|
-
n.isSelected ? (
|
|
652
|
+
n.isSelected ? (_(), k("div", ft, [
|
|
653
653
|
c("div", {
|
|
654
654
|
class: "ve-segment__handle ve-segment__handle--left",
|
|
655
|
-
onMousedown: le((m) =>
|
|
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-547cac41><div class="ve-segment__handle-dot" data-v-547cac41></div><div class="ve-segment__handle-dot" data-v-547cac41></div><div class="ve-segment__handle-dot" data-v-547cac41></div><div class="ve-segment__handle-dot" data-v-547cac41></div></div>', 1)
|
|
658
658
|
])], 40, gt),
|
|
659
659
|
c("div", {
|
|
660
660
|
class: "ve-segment__handle ve-segment__handle--right",
|
|
661
|
-
onMousedown: le((m) =>
|
|
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-547cac41><div class="ve-segment__handle-dot" data-v-547cac41></div><div class="ve-segment__handle-dot" data-v-547cac41></div><div class="ve-segment__handle-dot" data-v-547cac41></div><div class="ve-segment__handle-dot" data-v-547cac41></div></div>', 1)
|
|
664
664
|
])], 40, ht)
|
|
665
665
|
])) : ee("", !0)
|
|
666
|
-
], 46,
|
|
666
|
+
], 46, dt)), [
|
|
667
667
|
[Le, K($)?.segment.id !== n.segment.id && O.value?.segment.id !== n.segment.id]
|
|
668
668
|
])), 128))
|
|
669
669
|
])
|
|
670
670
|
], !0)
|
|
671
671
|
], 6))), 128))
|
|
672
672
|
], 4),
|
|
673
|
-
x.value ? (
|
|
673
|
+
x.value ? (_(), k("div", {
|
|
674
674
|
key: 0,
|
|
675
675
|
class: "ve-segment ve-segment--dragging",
|
|
676
676
|
style: D({
|
|
@@ -689,16 +689,16 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
689
689
|
}, () => [
|
|
690
690
|
c("div", pt, [
|
|
691
691
|
c("div", xt, G(x.value.segment.type || "segment"), 1),
|
|
692
|
-
c("div",
|
|
692
|
+
c("div", kt, G(R(x.value.segment.start)) + " - " + G(R(x.value.segment.end)), 1)
|
|
693
693
|
])
|
|
694
694
|
], !0)
|
|
695
695
|
], 4)) : ee("", !0),
|
|
696
|
-
Y.value && !Y.value.isNewTrack ? (
|
|
696
|
+
Y.value && !Y.value.isNewTrack ? (_(), k("div", {
|
|
697
697
|
key: 1,
|
|
698
698
|
class: "ve-segment ve-segment--placeholder",
|
|
699
699
|
style: D({
|
|
700
|
-
left: `${Y.value.startTime *
|
|
701
|
-
width: `${(Y.value.endTime - Y.value.startTime) *
|
|
700
|
+
left: `${Y.value.startTime * d.value}px`,
|
|
701
|
+
width: `${(Y.value.endTime - Y.value.startTime) * d.value}px`,
|
|
702
702
|
top: `${Q.value}px`,
|
|
703
703
|
height: `${S.value}px`
|
|
704
704
|
})
|
|
@@ -710,18 +710,18 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
710
710
|
})
|
|
711
711
|
}, null, 4)
|
|
712
712
|
], 4)) : ee("", !0),
|
|
713
|
-
H.value ? (
|
|
713
|
+
H.value ? (_(), k("div", {
|
|
714
714
|
key: 2,
|
|
715
715
|
class: "ve-segment ve-segment--preview",
|
|
716
716
|
style: D({
|
|
717
|
-
left: `${H.value.startTime *
|
|
718
|
-
width: `${(H.value.endTime - H.value.startTime) *
|
|
717
|
+
left: `${H.value.startTime * d.value}px`,
|
|
718
|
+
width: `${(H.value.endTime - H.value.startTime) * d.value}px`,
|
|
719
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
|
})
|
|
723
723
|
}, null, 4)) : ee("", !0),
|
|
724
|
-
K($) && K(
|
|
724
|
+
K($) && K(u).length ? (_(!0), k(ge, { key: 3 }, he(K(u), (t) => (_(), k("div", {
|
|
725
725
|
key: `snap-${t.time}`,
|
|
726
726
|
class: "ve-snap-guide",
|
|
727
727
|
style: D({
|
|
@@ -730,7 +730,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
730
730
|
height: `calc(100% - ${v.value}px)`
|
|
731
731
|
})
|
|
732
732
|
}, null, 4))), 128)) : ee("", !0),
|
|
733
|
-
K($) && K($).isNewTrack ? (
|
|
733
|
+
K($) && K($).isNewTrack ? (_(), k("div", {
|
|
734
734
|
key: 4,
|
|
735
735
|
class: "ve-new-track-line",
|
|
736
736
|
style: D({
|
|
@@ -743,7 +743,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
743
743
|
], 512)
|
|
744
744
|
]));
|
|
745
745
|
}
|
|
746
|
-
}), Tt = /* @__PURE__ */ xe(
|
|
746
|
+
}), Tt = /* @__PURE__ */ xe(bt, [["__scopeId", "data-v-547cac41"]]);
|
|
747
747
|
export {
|
|
748
748
|
Tt as V,
|
|
749
749
|
xe as _
|
package/dist/index.d.ts
CHANGED
|
@@ -6,7 +6,8 @@ import { ITrackType } from '@video-editor/shared';
|
|
|
6
6
|
import { IVideoProtocol } from '@video-editor/shared';
|
|
7
7
|
import { PublicProps } from 'vue';
|
|
8
8
|
import { SegmentUnion } from '@video-editor/shared';
|
|
9
|
-
import { TimelineSegment as TimelineSegment_2 } from '
|
|
9
|
+
import { TimelineSegment as TimelineSegment_2 } from '..';
|
|
10
|
+
import { TimelineSegment as TimelineSegment_3 } from './types';
|
|
10
11
|
import { TimelineTick as TimelineTick_2 } from '..';
|
|
11
12
|
import { TrackUnion } from '@video-editor/shared';
|
|
12
13
|
|
|
@@ -106,7 +107,19 @@ declare type __VLS_Props_2 = {
|
|
|
106
107
|
|
|
107
108
|
declare function __VLS_template(): {
|
|
108
109
|
attrs: Partial<{}>;
|
|
109
|
-
slots: {
|
|
110
|
+
slots: Partial<Record<NonNullable<"segment-filter" | "segment-audio" | "segment-text" | "segment-frames" | "segment-sticker" | "segment-effect">, (_: {
|
|
111
|
+
segment: SegmentUnion;
|
|
112
|
+
layout: {
|
|
113
|
+
left: number;
|
|
114
|
+
top: number;
|
|
115
|
+
segment: TimelineSegment_2;
|
|
116
|
+
track: TimelineTrack;
|
|
117
|
+
trackIndex: number;
|
|
118
|
+
segmentIndex: number;
|
|
119
|
+
width: number;
|
|
120
|
+
isSelected: boolean;
|
|
121
|
+
};
|
|
122
|
+
}) => any>> & {
|
|
110
123
|
toolbar?(_: {
|
|
111
124
|
zoom: number;
|
|
112
125
|
canZoomIn: boolean;
|
|
@@ -160,7 +173,7 @@ declare function __VLS_template_2(): {
|
|
|
160
173
|
}): any;
|
|
161
174
|
segment?(_: {
|
|
162
175
|
layout: SegmentLayout;
|
|
163
|
-
segment:
|
|
176
|
+
segment: TimelineSegment_3;
|
|
164
177
|
track: TimelineTrack;
|
|
165
178
|
isSelected: boolean;
|
|
166
179
|
}): any;
|
|
@@ -168,14 +181,14 @@ declare function __VLS_template_2(): {
|
|
|
168
181
|
layout: {
|
|
169
182
|
left: number;
|
|
170
183
|
top: number;
|
|
171
|
-
segment:
|
|
184
|
+
segment: TimelineSegment_3;
|
|
172
185
|
track: TimelineTrack;
|
|
173
186
|
trackIndex: number;
|
|
174
187
|
segmentIndex: number;
|
|
175
188
|
width: number;
|
|
176
189
|
isSelected: boolean;
|
|
177
190
|
};
|
|
178
|
-
segment:
|
|
191
|
+
segment: TimelineSegment_3;
|
|
179
192
|
track: TimelineTrack;
|
|
180
193
|
isSelected: boolean;
|
|
181
194
|
}): any;
|
package/dist/index.js
CHANGED
package/dist/ui.css
CHANGED
|
@@ -1 +1 @@
|
|
|
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-
|
|
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-547cac41]){--ve-primary: #222226;--at-apply: flex flex-col w-full max-w-full min-w-0 rounded-10px h-full}:where(.ve-timeline .ve-timeline__viewport[data-v-547cac41]){--at-apply: relative overflow-auto w-full flex-1 bg-white}:where(.ve-timeline .ve-timeline__content[data-v-547cac41]){--at-apply: min-h-full min-w-full}:where(.ve-timeline .ve-timeline__tracks[data-v-547cac41]){--at-apply: relative z-1 pb-3 flex flex-col gap-2px flex-1}:where(.ve-timeline .ve-track[data-v-547cac41]){--at-apply: relative bg-[#f8fafc] overflow-hidden}:where(.ve-timeline .ve-track--main[data-v-547cac41]){background-color:#f4f4f6}:where(.ve-timeline .ve-track__body[data-v-547cac41]){--at-apply: relative h-full}:where(.ve-timeline .ve-segment[data-v-547cac41]){--at-apply: absolute top-0 bottom-0 rounded-[4px] text-[#0f172a] cursor-pointer flex items-center overflow-hidden duration-150}:where(.ve-timeline .ve-segment--dragging[data-v-547cac41]){--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-547cac41]){--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-547cac41]){--at-apply: flex flex-col gap-1}:where(.ve-timeline .ve-segment__title[data-v-547cac41]){--at-apply: text-[12px] font-bold capitalize}:where(.ve-timeline .ve-segment__time[data-v-547cac41]){--at-apply: text-[11px] text-[rgba(15,23,42,.8)] font-mono}:where(.ve-timeline .ve-segment__selection[data-v-547cac41]){--at-apply: absolute bottom-0 left-0 right-0 top-0 pointer-events-none z-10}:where(.ve-timeline .ve-segment__handle[data-v-547cac41]){--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-547cac41]){--at-apply: left-0 top-0 rounded-l-1}:where(.ve-timeline .ve-segment__handle--right[data-v-547cac41]){--at-apply: right-0 top-0 rounded-r-1}:where(.ve-timeline .ve-segment__handle-dots[data-v-547cac41]){--at-apply: absolute left-0 top-50% translate-y--50% flex flex-col items-center gap-0.5;justify-content:center}:where(.ve-timeline .ve-segment__handle-dot[data-v-547cac41]){--at-apply: rounded-full bg-white;width:1px;height:1px}:where(.ve-timeline .ve-segment--placeholder[data-v-547cac41]){--at-apply: absolute pointer-events-none rounded-[4px] z-24;background:#2222261f;border:2px solid rgba(34,34,38,.6)}:where(.ve-timeline .ve-segment--placeholder-inner[data-v-547cac41]){--at-apply: absolute inset-0 rounded-[2px];opacity:.2}:where(.ve-timeline .ve-snap-guide[data-v-547cac41]){--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-547cac41]){--at-apply: absolute pointer-events-none z-25;height:2px;background:var(--ve-primary);opacity:.8}:where(.frames-segment[data-v-4ab97cd2]){--at-apply: relative flex items-stretch w-full h-full overflow-hidden rounded-4px}:where(.frames-segment .frames-segment__image[data-v-4ab97cd2]){--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-4ab97cd2]){--at-apply: flex items-center w-full h-full overflow-hidden;background:#f1f5f9}:where(.frames-segment .frames-segment__thumb[data-v-4ab97cd2]){--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-4ab97cd2]){--at-apply: flex items-center justify-center w-full h-full text-[12px] rounded-4px whitespace-nowrap;color:#0f172abf;background:#0000000d}:where(.frames-segment .frames-segment__badge[data-v-4ab97cd2]){--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-8004be28]){--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-8004be28]){--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.12",
|
|
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.12",
|
|
24
|
+
"@video-editor/shared": "0.0.1-beta.12"
|
|
25
25
|
},
|
|
26
26
|
"scripts": {
|
|
27
27
|
"build": "vite build",
|