@video-editor/ui 0.0.1-beta.10 → 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-CIZtI1B_.js → index-t1DKjcCO.js} +3 -3
- 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
|
@@ -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-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
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
666
|
], 46, dt)), [
|
|
@@ -743,7 +743,7 @@ const rt = { class: "ve-timeline" }, ut = { class: "ve-track__body" }, dt = ["on
|
|
|
743
743
|
], 512)
|
|
744
744
|
]));
|
|
745
745
|
}
|
|
746
|
-
}), Tt = /* @__PURE__ */ xe(bt, [["__scopeId", "data-v-
|
|
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",
|