@video-editor/ui 0.0.1-beta.7 → 0.0.1-beta.8
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 +48 -11
- package/dist/VideoEditorTimeline.js +122 -100
- package/dist/VideoTimeline.js +1 -1
- package/dist/{index-y5KhRW21.js → index-DFPTFo-I.js} +135 -135
- package/dist/index.d.ts +66 -29
- package/dist/index.js +1 -1
- package/dist/ui.css +1 -1
- package/package.json +4 -3
|
@@ -5,19 +5,10 @@ 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 { TimelineTick } from '..';
|
|
8
9
|
import { TrackUnion } from '@video-editor/shared';
|
|
9
10
|
|
|
10
|
-
declare
|
|
11
|
-
protocol?: IVideoProtocol | null;
|
|
12
|
-
currentTime: number;
|
|
13
|
-
zoom?: number;
|
|
14
|
-
snapStep?: number;
|
|
15
|
-
selectedSegmentId?: string | null;
|
|
16
|
-
trackTypes?: ITrackType[];
|
|
17
|
-
disableInteraction?: boolean;
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
declare const _default: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
11
|
+
declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
21
12
|
"update:currentTime": (value: number) => any;
|
|
22
13
|
"update:zoom": (value: number) => any;
|
|
23
14
|
segmentClick: (payload: {
|
|
@@ -44,6 +35,52 @@ selectedSegmentId: string | null;
|
|
|
44
35
|
protocol: IVideoProtocol | null;
|
|
45
36
|
trackTypes: ITrackType[];
|
|
46
37
|
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
38
|
+
|
|
39
|
+
declare type __VLS_Props = {
|
|
40
|
+
protocol?: IVideoProtocol | null;
|
|
41
|
+
currentTime: number;
|
|
42
|
+
zoom?: number;
|
|
43
|
+
snapStep?: number;
|
|
44
|
+
selectedSegmentId?: string | null;
|
|
45
|
+
trackTypes?: ITrackType[];
|
|
46
|
+
disableInteraction?: boolean;
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
declare function __VLS_template(): {
|
|
50
|
+
attrs: Partial<{}>;
|
|
51
|
+
slots: {
|
|
52
|
+
toolbar?(_: {
|
|
53
|
+
zoom: number;
|
|
54
|
+
canZoomIn: boolean;
|
|
55
|
+
canZoomOut: boolean;
|
|
56
|
+
zoomIn: () => void;
|
|
57
|
+
zoomOut: () => void;
|
|
58
|
+
currentTime: number;
|
|
59
|
+
duration: number;
|
|
60
|
+
formatTime: (ms: number) => string;
|
|
61
|
+
}): any;
|
|
62
|
+
ruler?(_: {
|
|
63
|
+
ticks: TimelineTick[];
|
|
64
|
+
pixelsPerMs: number;
|
|
65
|
+
}): any;
|
|
66
|
+
playhead?(_: {
|
|
67
|
+
left: number;
|
|
68
|
+
currentTime: number;
|
|
69
|
+
}): any;
|
|
70
|
+
};
|
|
71
|
+
refs: {};
|
|
72
|
+
rootEl: HTMLDivElement;
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
76
|
+
|
|
77
|
+
declare type __VLS_WithTemplateSlots<T, S> = T & {
|
|
78
|
+
new (): {
|
|
79
|
+
$slots: S;
|
|
80
|
+
};
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
47
84
|
export default _default;
|
|
48
85
|
|
|
49
86
|
declare interface SegmentDragPayload {
|
|
@@ -1,66 +1,66 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { _ as
|
|
3
|
-
import { generateThumbnails as
|
|
4
|
-
import { isVideoFramesSegment as
|
|
5
|
-
const
|
|
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-DFPTFo-I.js";
|
|
3
|
+
import { generateThumbnails as Q } from "@video-editor/protocol";
|
|
4
|
+
import { isVideoFramesSegment as W } from "@video-editor/shared";
|
|
5
|
+
const X = { class: "frames-segment" }, Z = {
|
|
6
6
|
key: 0,
|
|
7
7
|
class: "frames-segment__video"
|
|
8
|
-
},
|
|
8
|
+
}, ee = {
|
|
9
9
|
key: 1,
|
|
10
10
|
class: "frames-segment__placeholder"
|
|
11
|
-
},
|
|
11
|
+
}, te = { key: 0 }, ne = { key: 1 }, se = { key: 2 }, re = {
|
|
12
12
|
key: 2,
|
|
13
13
|
class: "frames-segment__placeholder"
|
|
14
|
-
},
|
|
14
|
+
}, ae = {
|
|
15
15
|
key: 3,
|
|
16
16
|
class: "frames-segment__badge"
|
|
17
|
-
},
|
|
17
|
+
}, oe = /* @__PURE__ */ V({
|
|
18
18
|
name: "FramesSegment",
|
|
19
19
|
__name: "FramesSegment",
|
|
20
20
|
props: {
|
|
21
21
|
segment: {}
|
|
22
22
|
},
|
|
23
23
|
setup(o) {
|
|
24
|
-
const g = o,
|
|
25
|
-
let
|
|
26
|
-
|
|
27
|
-
if (!
|
|
24
|
+
const g = o, n = J({ items: [], loading: !1, error: null });
|
|
25
|
+
let c = 0;
|
|
26
|
+
P(() => g.segment, (s, i) => {
|
|
27
|
+
if (!W(s))
|
|
28
28
|
return;
|
|
29
|
-
(!i || f(i, s)) &&
|
|
30
|
-
}, { immediate: !0, deep: !0 }),
|
|
31
|
-
|
|
29
|
+
(!i || f(i, s)) && $(s);
|
|
30
|
+
}, { immediate: !0, deep: !0 }), Y(() => {
|
|
31
|
+
b();
|
|
32
32
|
});
|
|
33
33
|
function f(s, i) {
|
|
34
34
|
return s.url !== i.url || s.startTime !== i.startTime || s.endTime !== i.endTime || s.fromTime !== i.fromTime;
|
|
35
35
|
}
|
|
36
|
-
async function
|
|
36
|
+
async function $(s) {
|
|
37
37
|
if (!s.url)
|
|
38
38
|
return;
|
|
39
|
-
const i = ++
|
|
40
|
-
|
|
39
|
+
const i = ++c;
|
|
40
|
+
b(), n.loading = !0, n.error = null;
|
|
41
41
|
try {
|
|
42
|
-
const m = I(s), u = await
|
|
43
|
-
if (
|
|
42
|
+
const m = I(s), u = await Q(s.url, m);
|
|
43
|
+
if (c !== i)
|
|
44
44
|
return;
|
|
45
45
|
const T = u.map((k) => ({
|
|
46
46
|
tsMs: Math.round(k.ts / 1e3),
|
|
47
47
|
url: URL.createObjectURL(k.img)
|
|
48
48
|
}));
|
|
49
|
-
|
|
49
|
+
n.items = T, n.loading = !1;
|
|
50
50
|
} catch (m) {
|
|
51
|
-
if (
|
|
51
|
+
if (c !== i)
|
|
52
52
|
return;
|
|
53
|
-
|
|
53
|
+
n.error = m instanceof Error ? m.message : String(m), n.loading = !1;
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
function I(s) {
|
|
57
57
|
const i = Math.max(s.fromTime ?? 0, 0) * 1e3, m = Math.max(s.endTime - s.startTime, 1), u = i + m * 1e3, k = Math.max(Math.floor((u - i) / 8), 2e5);
|
|
58
58
|
return { start: i, end: u, step: k };
|
|
59
59
|
}
|
|
60
|
-
function
|
|
61
|
-
|
|
60
|
+
function b() {
|
|
61
|
+
n.items.forEach((s) => URL.revokeObjectURL(s.url)), n.items = [];
|
|
62
62
|
}
|
|
63
|
-
function
|
|
63
|
+
function R() {
|
|
64
64
|
return {
|
|
65
65
|
backgroundImage: g.segment.url ? `url(${g.segment.url})` : "",
|
|
66
66
|
backgroundRepeat: "repeat-x",
|
|
@@ -68,31 +68,31 @@ const G = { class: "frames-segment" }, K = {
|
|
|
68
68
|
backgroundPosition: "left center"
|
|
69
69
|
};
|
|
70
70
|
}
|
|
71
|
-
return (s, i) => (r(),
|
|
72
|
-
o.segment.type === "image" ? (r(),
|
|
71
|
+
return (s, i) => (r(), l("div", X, [
|
|
72
|
+
o.segment.type === "image" ? (r(), l("div", {
|
|
73
73
|
key: 0,
|
|
74
74
|
class: "frames-segment__image",
|
|
75
|
-
style:
|
|
76
|
-
}, null, 4)) : o.segment.type === "video" ? (r(),
|
|
77
|
-
|
|
78
|
-
(r(!0),
|
|
75
|
+
style: L(R())
|
|
76
|
+
}, null, 4)) : o.segment.type === "video" ? (r(), l(v, { key: 1 }, [
|
|
77
|
+
n.items.length ? (r(), l("div", Z, [
|
|
78
|
+
(r(!0), l(v, null, j(n.items, (m) => (r(), l("div", {
|
|
79
79
|
key: `${o.segment.id}-${m.tsMs}`,
|
|
80
80
|
class: "frames-segment__thumb",
|
|
81
|
-
style:
|
|
81
|
+
style: L({ backgroundImage: `url(${m.url})` })
|
|
82
82
|
}, null, 4))), 128))
|
|
83
|
-
])) : (r(),
|
|
84
|
-
|
|
83
|
+
])) : (r(), l("div", ee, [
|
|
84
|
+
n.loading ? (r(), l("span", te, "抽帧中…")) : n.error ? (r(), l("span", ne, "生成失败")) : (r(), l("span", se, "未生成缩略图"))
|
|
85
85
|
]))
|
|
86
|
-
], 64)) : (r(),
|
|
87
|
-
y("span", null,
|
|
86
|
+
], 64)) : (r(), l("div", re, [
|
|
87
|
+
y("span", null, h(o.segment.type), 1)
|
|
88
88
|
])),
|
|
89
|
-
o.segment.extra?.label ? (r(),
|
|
89
|
+
o.segment.extra?.label ? (r(), l("span", ae, h(o.segment.extra?.label), 1)) : x("", !0)
|
|
90
90
|
]));
|
|
91
91
|
}
|
|
92
|
-
}),
|
|
92
|
+
}), ie = /* @__PURE__ */ D(oe, [["__scopeId", "data-v-dd7a5d19"]]), le = { class: "segment-base" }, ce = { class: "segment-base__content" }, me = { class: "segment-base__pill segment-base__pill--primary" }, de = { class: "segment-base__pill segment-base__pill--muted" }, ue = {
|
|
93
93
|
key: 0,
|
|
94
94
|
class: "segment-base__badge"
|
|
95
|
-
},
|
|
95
|
+
}, ge = /* @__PURE__ */ V({
|
|
96
96
|
name: "SegmentBase",
|
|
97
97
|
__name: "SegmentBase",
|
|
98
98
|
props: {
|
|
@@ -101,19 +101,19 @@ const G = { class: "frames-segment" }, K = {
|
|
|
101
101
|
accentColor: { default: "#222226" }
|
|
102
102
|
},
|
|
103
103
|
setup(o) {
|
|
104
|
-
const g = o,
|
|
105
|
-
const
|
|
106
|
-
return typeof
|
|
104
|
+
const g = o, n = S(() => {
|
|
105
|
+
const c = g.segment?.extra?.label;
|
|
106
|
+
return typeof c == "string" ? c : null;
|
|
107
107
|
});
|
|
108
|
-
return (
|
|
109
|
-
y("div",
|
|
110
|
-
y("span",
|
|
111
|
-
y("span",
|
|
108
|
+
return (c, f) => (r(), l("div", le, [
|
|
109
|
+
y("div", ce, [
|
|
110
|
+
y("span", me, h(o.trackType), 1),
|
|
111
|
+
y("span", de, h(o.segment.segmentType), 1)
|
|
112
112
|
]),
|
|
113
|
-
|
|
113
|
+
n.value ? (r(), l("span", ue, h(n.value), 1)) : x("", !0)
|
|
114
114
|
]));
|
|
115
115
|
}
|
|
116
|
-
}),
|
|
116
|
+
}), pe = /* @__PURE__ */ D(ge, [["__scopeId", "data-v-d386af72"]]), fe = { class: "ve-editor-segment__preview" }, B = "#222226", ke = 0.4, ye = /* @__PURE__ */ V({
|
|
117
117
|
name: "VideoEditorTimeline",
|
|
118
118
|
__name: "index",
|
|
119
119
|
props: {
|
|
@@ -127,25 +127,25 @@ const G = { class: "frames-segment" }, K = {
|
|
|
127
127
|
},
|
|
128
128
|
emits: ["update:currentTime", "update:zoom", "update:selectedSegmentId", "segmentClick", "segmentDragEnd", "segmentResizeEnd"],
|
|
129
129
|
setup(o, { emit: g }) {
|
|
130
|
-
const
|
|
131
|
-
|
|
130
|
+
const n = o, c = g, f = q(n.selectedSegmentId ?? null);
|
|
131
|
+
P(() => n.selectedSegmentId, (e) => {
|
|
132
132
|
f.value = e ?? null;
|
|
133
133
|
});
|
|
134
|
-
const
|
|
135
|
-
frames:
|
|
134
|
+
const $ = {
|
|
135
|
+
frames: B,
|
|
136
136
|
audio: "#0ea5e9",
|
|
137
137
|
text: "#16a34a",
|
|
138
138
|
sticker: "#f97316",
|
|
139
139
|
effect: "#a855f7",
|
|
140
140
|
filter: "#64748b"
|
|
141
|
-
}, I =
|
|
142
|
-
const
|
|
141
|
+
}, I = S(() => n.protocol?.tracks?.length ? n.trackTypes?.length ? n.protocol.tracks.filter((e) => n.trackTypes?.includes(e.trackType)) : n.protocol.tracks : []), b = S(() => I.value.map((e, a) => {
|
|
142
|
+
const t = $[e.trackType] || B, d = s(t, ke), z = e.trackType === "frames" && e.isMain === !0;
|
|
143
143
|
return {
|
|
144
144
|
id: e.trackId || `${e.trackType}-${a}`,
|
|
145
145
|
label: e.trackType,
|
|
146
146
|
type: e.trackType,
|
|
147
|
-
color:
|
|
148
|
-
isMain:
|
|
147
|
+
color: t,
|
|
148
|
+
isMain: z,
|
|
149
149
|
payload: e,
|
|
150
150
|
segments: e.children.map((p) => ({
|
|
151
151
|
id: p.id,
|
|
@@ -156,18 +156,18 @@ const G = { class: "frames-segment" }, K = {
|
|
|
156
156
|
payload: p
|
|
157
157
|
}))
|
|
158
158
|
};
|
|
159
|
-
})),
|
|
160
|
-
if (!
|
|
159
|
+
})), R = S(() => {
|
|
160
|
+
if (!n.protocol?.tracks?.length)
|
|
161
161
|
return 0;
|
|
162
|
-
const e =
|
|
162
|
+
const e = n.protocol.tracks.flatMap((a) => a.children.map((t) => t.endTime));
|
|
163
163
|
return e.length ? Math.max(...e) : 0;
|
|
164
164
|
});
|
|
165
165
|
function s(e, a) {
|
|
166
|
-
const
|
|
167
|
-
if (!(
|
|
166
|
+
const t = e.replace("#", "");
|
|
167
|
+
if (!(t.length === 3 || t.length === 6))
|
|
168
168
|
return e;
|
|
169
|
-
const d =
|
|
170
|
-
return `rgba(${
|
|
169
|
+
const d = t.length === 3 ? t.split("").map((F) => F + F).join("") : t, z = Number.parseInt(d.slice(0, 2), 16), p = Number.parseInt(d.slice(2, 4), 16), H = Number.parseInt(d.slice(4, 6), 16);
|
|
170
|
+
return `rgba(${z}, ${p}, ${H}, ${a})`;
|
|
171
171
|
}
|
|
172
172
|
function i(e) {
|
|
173
173
|
return e && typeof e == "object" && "segmentType" in e ? e : null;
|
|
@@ -176,73 +176,95 @@ const G = { class: "frames-segment" }, K = {
|
|
|
176
176
|
const a = e.payload;
|
|
177
177
|
if (a)
|
|
178
178
|
return a;
|
|
179
|
-
if (
|
|
180
|
-
return
|
|
179
|
+
if (n.protocol)
|
|
180
|
+
return n.protocol.tracks.find((t) => t.trackId === e.id);
|
|
181
181
|
}
|
|
182
182
|
function u(e) {
|
|
183
|
-
f.value = e,
|
|
183
|
+
f.value = e, c("update:selectedSegmentId", e);
|
|
184
184
|
}
|
|
185
185
|
function T(e) {
|
|
186
|
-
const a = i(e.segment.payload),
|
|
187
|
-
a && (u(a.id),
|
|
186
|
+
const a = i(e.segment.payload), t = m(e.track);
|
|
187
|
+
a && (u(a.id), t && c("segmentClick", { segment: a, track: t }));
|
|
188
188
|
}
|
|
189
189
|
function k(e) {
|
|
190
190
|
u(e.segment.id);
|
|
191
191
|
}
|
|
192
|
-
function
|
|
193
|
-
|
|
192
|
+
function A(e) {
|
|
193
|
+
c("segmentDragEnd", e);
|
|
194
194
|
}
|
|
195
|
-
function
|
|
195
|
+
function N(e) {
|
|
196
196
|
u(e.segment.id);
|
|
197
197
|
}
|
|
198
|
-
function
|
|
199
|
-
|
|
198
|
+
function O(e) {
|
|
199
|
+
c("segmentResizeEnd", e);
|
|
200
200
|
}
|
|
201
|
-
return (e, a) => (r(),
|
|
202
|
-
tracks:
|
|
203
|
-
duration:
|
|
201
|
+
return (e, a) => (r(), E(K, {
|
|
202
|
+
tracks: b.value,
|
|
203
|
+
duration: R.value,
|
|
204
204
|
"current-time": o.currentTime,
|
|
205
205
|
zoom: o.zoom,
|
|
206
206
|
fps: o.protocol?.fps || 30,
|
|
207
207
|
"snap-step": o.snapStep,
|
|
208
208
|
"selected-segment-id": f.value ?? null,
|
|
209
209
|
"disable-interaction": o.disableInteraction,
|
|
210
|
-
"onUpdate:currentTime": a[0] || (a[0] = (
|
|
211
|
-
"onUpdate:zoom": a[1] || (a[1] = (
|
|
210
|
+
"onUpdate:currentTime": a[0] || (a[0] = (t) => c("update:currentTime", t)),
|
|
211
|
+
"onUpdate:zoom": a[1] || (a[1] = (t) => c("update:zoom", t)),
|
|
212
212
|
onSegmentClick: T,
|
|
213
213
|
onSegmentDragStart: k,
|
|
214
|
-
onSegmentDragEnd:
|
|
215
|
-
onSegmentResizeStart:
|
|
216
|
-
onSegmentResizeEnd:
|
|
217
|
-
onBackgroundClick: a[2] || (a[2] = (
|
|
218
|
-
}, {
|
|
219
|
-
segment:
|
|
220
|
-
(r(!0),
|
|
221
|
-
key: d?.id ||
|
|
214
|
+
onSegmentDragEnd: A,
|
|
215
|
+
onSegmentResizeStart: N,
|
|
216
|
+
onSegmentResizeEnd: O,
|
|
217
|
+
onBackgroundClick: a[2] || (a[2] = (t) => u(null))
|
|
218
|
+
}, G({
|
|
219
|
+
segment: _(({ layout: t }) => [
|
|
220
|
+
(r(!0), l(v, null, j([i(t.segment.payload)], (d) => (r(), l(v, {
|
|
221
|
+
key: d?.id || t.segment.id
|
|
222
222
|
}, [
|
|
223
|
-
d ? (r(),
|
|
223
|
+
d ? (r(), l("div", {
|
|
224
224
|
key: 0,
|
|
225
225
|
class: "ve-editor-segment",
|
|
226
|
-
style:
|
|
226
|
+
style: L({ "--ve-segment-accent": t.track.color || B })
|
|
227
227
|
}, [
|
|
228
|
-
y("div",
|
|
229
|
-
d.segmentType === "frames" ? (r(),
|
|
228
|
+
y("div", fe, [
|
|
229
|
+
d.segmentType === "frames" ? (r(), E(w(ie), {
|
|
230
230
|
key: 0,
|
|
231
231
|
segment: d
|
|
232
|
-
}, null, 8, ["segment"])) : (r(),
|
|
232
|
+
}, null, 8, ["segment"])) : (r(), E(w(pe), {
|
|
233
233
|
key: 1,
|
|
234
234
|
segment: d,
|
|
235
|
-
"track-type":
|
|
236
|
-
"accent-color":
|
|
235
|
+
"track-type": t.track.type || "unknown",
|
|
236
|
+
"accent-color": t.track.color
|
|
237
237
|
}, null, 8, ["segment", "track-type", "accent-color"]))
|
|
238
238
|
])
|
|
239
|
-
], 4)) :
|
|
239
|
+
], 4)) : x("", !0)
|
|
240
240
|
], 64))), 128))
|
|
241
241
|
]),
|
|
242
|
-
_:
|
|
243
|
-
},
|
|
242
|
+
_: 2
|
|
243
|
+
}, [
|
|
244
|
+
e.$slots.toolbar ? {
|
|
245
|
+
name: "toolbar",
|
|
246
|
+
fn: _((t) => [
|
|
247
|
+
C(e.$slots, "toolbar", M(U(t)), void 0, !0)
|
|
248
|
+
]),
|
|
249
|
+
key: "0"
|
|
250
|
+
} : void 0,
|
|
251
|
+
e.$slots.ruler ? {
|
|
252
|
+
name: "ruler",
|
|
253
|
+
fn: _((t) => [
|
|
254
|
+
C(e.$slots, "ruler", M(U(t)), void 0, !0)
|
|
255
|
+
]),
|
|
256
|
+
key: "1"
|
|
257
|
+
} : void 0,
|
|
258
|
+
e.$slots.playhead ? {
|
|
259
|
+
name: "playhead",
|
|
260
|
+
fn: _((t) => [
|
|
261
|
+
C(e.$slots, "playhead", M(U(t)), void 0, !0)
|
|
262
|
+
]),
|
|
263
|
+
key: "2"
|
|
264
|
+
} : void 0
|
|
265
|
+
]), 1032, ["tracks", "duration", "current-time", "zoom", "fps", "snap-step", "selected-segment-id", "disable-interaction"]));
|
|
244
266
|
}
|
|
245
|
-
}),
|
|
267
|
+
}), Se = /* @__PURE__ */ D(ye, [["__scopeId", "data-v-d5455177"]]);
|
|
246
268
|
export {
|
|
247
|
-
|
|
269
|
+
Se as default
|
|
248
270
|
};
|
package/dist/VideoTimeline.js
CHANGED
|
@@ -47,7 +47,7 @@ const Ne = /* @__PURE__ */ pe({
|
|
|
47
47
|
])
|
|
48
48
|
]));
|
|
49
49
|
}
|
|
50
|
-
}), je = /* @__PURE__ */ xe(Ae, [["__scopeId", "data-v-30f91636"]]), Ue = { class: "ve-toolbar" }, Ke = { class: "ve-toolbar__group" }, qe = ["disabled"], Je = { class: "ve-toolbar__group" }, Qe = { class: "ve-zoom" }, et = { class: "ve-toolbar__group" }, tt = ["disabled"],
|
|
50
|
+
}), je = /* @__PURE__ */ xe(Ae, [["__scopeId", "data-v-30f91636"]]), Ue = { class: "ve-toolbar" }, Ke = { class: "ve-toolbar__group" }, qe = ["disabled"], Je = { class: "ve-toolbar__group" }, Qe = { class: "ve-zoom" }, et = { class: "ve-toolbar__group" }, tt = ["disabled"], nt = { class: "ve-toolbar__time" }, at = /* @__PURE__ */ pe({
|
|
51
51
|
name: "TimelineToolbar",
|
|
52
52
|
__name: "TimelineToolbar",
|
|
53
53
|
props: {
|
|
@@ -87,7 +87,7 @@ const Ne = /* @__PURE__ */ pe({
|
|
|
87
87
|
}, " + ", 8, tt)
|
|
88
88
|
], !0)
|
|
89
89
|
]),
|
|
90
|
-
c("div",
|
|
90
|
+
c("div", nt, [
|
|
91
91
|
V(o.$slots, "time", {
|
|
92
92
|
currentTime: l.currentTime,
|
|
93
93
|
duration: l.duration
|
|
@@ -99,7 +99,7 @@ const Ne = /* @__PURE__ */ pe({
|
|
|
99
99
|
])
|
|
100
100
|
]));
|
|
101
101
|
}
|
|
102
|
-
}), st = /* @__PURE__ */ xe(
|
|
102
|
+
}), st = /* @__PURE__ */ xe(at, [["__scopeId", "data-v-85ddeb0f"]]);
|
|
103
103
|
function lt(l, f, s, o) {
|
|
104
104
|
function i(Z) {
|
|
105
105
|
if (!l.value || !f.value.length)
|
|
@@ -108,8 +108,8 @@ 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;
|
|
@@ -157,13 +157,13 @@ function it(l) {
|
|
|
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
|
M
|
|
169
169
|
);
|
|
@@ -176,63 +176,63 @@ function it(l) {
|
|
|
176
176
|
});
|
|
177
177
|
}
|
|
178
178
|
function re(v, q, F, $) {
|
|
179
|
-
const { layout:
|
|
179
|
+
const { layout: u, initialX: _e, initialY: Me } = v, ue = q - _e, O = F - Me, 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 =
|
|
199
|
-
let x, Q, A, B = !1,
|
|
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
|
+
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,
|
|
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,
|
|
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 be = h(
|
|
210
|
-
segment:
|
|
211
|
-
track:
|
|
212
|
-
trackIndex:
|
|
213
|
-
segmentIndex:
|
|
209
|
+
const be = h(u.segment.start + ue / Math.max(M.value, 1e-4)), j = Math.max(0, be), 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,
|
|
217
217
|
targetTrackId: A,
|
|
218
218
|
isNewTrack: B,
|
|
219
|
-
newTrackInsertIndex:
|
|
219
|
+
newTrackInsertIndex: ne,
|
|
220
220
|
visualTrackIndex: Q,
|
|
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 b(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,7 +240,7 @@ function it(l) {
|
|
|
240
240
|
handleDragEnd: b
|
|
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
246
|
}, gt = ["onMousedown"], ht = ["onMousedown"], pt = { class: "ve-segment__content" }, xt = { class: "ve-segment__title" }, kt = { class: "ve-segment__time" }, _t = 120, Ee = 10, Mt = /* @__PURE__ */ pe({
|
|
@@ -273,37 +273,37 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
273
273
|
const g = T(() => 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)
|
|
277
277
|
)
|
|
278
278
|
));
|
|
279
|
-
fe(g, (e,
|
|
280
|
-
if (!
|
|
279
|
+
fe(g, (e, a) => {
|
|
280
|
+
if (!a || !e || a <= 0 || e <= 0 || !p.value || !h.value)
|
|
281
281
|
return;
|
|
282
|
-
const t = h.value * r.value /
|
|
282
|
+
const t = h.value * r.value / a;
|
|
283
283
|
if (!Number.isFinite(t) || t <= 0)
|
|
284
284
|
return;
|
|
285
|
-
const
|
|
286
|
-
Math.abs(
|
|
285
|
+
const n = B(t * e / h.value);
|
|
286
|
+
Math.abs(n - r.value) > 1e-6 && (r.value = n);
|
|
287
287
|
});
|
|
288
|
-
const
|
|
288
|
+
const d = T(() => {
|
|
289
289
|
const e = Math.max(g.value, 1);
|
|
290
290
|
return Math.max(h.value, 1) * r.value / e;
|
|
291
291
|
}), te = T(() => {
|
|
292
|
-
const e = g.value *
|
|
293
|
-
return Math.max(Math.ceil(
|
|
292
|
+
const e = g.value * d.value, a = Number.isFinite(e) ? Math.max(e, 0) : 0;
|
|
293
|
+
return Math.max(Math.ceil(a), Math.ceil(h.value || 0));
|
|
294
294
|
}), ke = T(() => {
|
|
295
|
-
const e = Math.max(
|
|
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 = T(() => s.currentTime *
|
|
297
|
+
}), oe = T(() => s.currentTime * d.value), ie = T(() => be(ke.value, d.value)), re = T(() => 1e3 / Math.max(s.fps || 30, 1)), S = T(() => s.trackHeight), b = T(() => s.trackGap), v = T(() => s.rulerHeight), q = T(() => s.tracks.map((e, a) => ({
|
|
298
298
|
track: e,
|
|
299
|
-
trackIndex:
|
|
300
|
-
segments: e.segments.map((t,
|
|
301
|
-
const m = Math.max((t.end - t.start) *
|
|
299
|
+
trackIndex: a,
|
|
300
|
+
segments: e.segments.map((t, n) => {
|
|
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
|
-
trackIndex:
|
|
304
|
+
trackIndex: a,
|
|
305
305
|
segment: t,
|
|
306
|
-
segmentIndex:
|
|
306
|
+
segmentIndex: n,
|
|
307
307
|
left: C,
|
|
308
308
|
width: m,
|
|
309
309
|
isSelected: s.selectedSegmentId === t.id
|
|
@@ -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:
|
|
315
|
+
snapGuides: u,
|
|
316
316
|
startDrag: _e,
|
|
317
317
|
handleDragMove: Me,
|
|
318
|
-
handleDragEnd:
|
|
318
|
+
handleDragEnd: ue
|
|
319
319
|
} = it({
|
|
320
320
|
tracks: Re(s, "tracks"),
|
|
321
321
|
tracksRef: Z,
|
|
322
322
|
trackHeightPx: S,
|
|
323
323
|
trackGapPx: b,
|
|
324
|
-
pixelsPerMs:
|
|
324
|
+
pixelsPerMs: d,
|
|
325
325
|
disableInteraction: Re(s, "disableInteraction"),
|
|
326
326
|
snap: j,
|
|
327
327
|
onDragStart: (e) => {
|
|
@@ -339,10 +339,10 @@ 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
|
|
342
|
+
const n = (e.startTime - e.segment.start) * d.value, C = v.value + e.trackIndex * (S.value + b.value) + b.value + e.mouseDeltaY;
|
|
343
343
|
return {
|
|
344
344
|
...t,
|
|
345
|
-
left: t.left +
|
|
345
|
+
left: t.left + n,
|
|
346
346
|
top: C
|
|
347
347
|
};
|
|
348
348
|
}), Q = T(() => {
|
|
@@ -353,9 +353,9 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
353
353
|
});
|
|
354
354
|
Pe(() => {
|
|
355
355
|
i.value && (I = new ResizeObserver((e) => {
|
|
356
|
-
const
|
|
357
|
-
h.value =
|
|
358
|
-
}), I.observe(i.value), h.value = i.value.clientWidth || 0), window.addEventListener("mousemove", me), window.addEventListener("mouseup", ve),
|
|
356
|
+
const a = e[0];
|
|
357
|
+
h.value = a?.contentRect.width || i.value?.clientWidth || 0;
|
|
358
|
+
}), I.observe(i.value), h.value = i.value.clientWidth || 0), window.addEventListener("mousemove", me), window.addEventListener("mouseup", ve), ne();
|
|
359
359
|
}), Ge(() => {
|
|
360
360
|
I?.disconnect(), I = null, window.removeEventListener("mousemove", me), window.removeEventListener("mouseup", ve);
|
|
361
361
|
}), fe(r, () => {
|
|
@@ -365,13 +365,13 @@ 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
|
|
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) {
|
|
372
372
|
return Number.isFinite(e) ? Math.min(Math.max(e, s.minZoom), s.maxZoom) : s.minZoom;
|
|
373
373
|
}
|
|
374
|
-
function
|
|
374
|
+
function ne() {
|
|
375
375
|
if (p.value)
|
|
376
376
|
return;
|
|
377
377
|
if (s.zoom !== void 0) {
|
|
@@ -384,19 +384,19 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
384
384
|
r.value = e, p.value = !0;
|
|
385
385
|
}
|
|
386
386
|
function R(e) {
|
|
387
|
-
const
|
|
388
|
-
return `${
|
|
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
|
+
return `${n}:${m}.${C}`;
|
|
389
389
|
}
|
|
390
390
|
function Te(e) {
|
|
391
|
-
const
|
|
392
|
-
return `${
|
|
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
|
+
return `${n}:${m}`;
|
|
393
393
|
}
|
|
394
|
-
function be(e,
|
|
395
|
-
if (!e || !
|
|
394
|
+
function be(e, a) {
|
|
395
|
+
if (!e || !a)
|
|
396
396
|
return [];
|
|
397
|
-
const t = Ze(
|
|
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 = [];
|
|
398
398
|
for (let X = 0; X <= C; X += 1) {
|
|
399
|
-
const P = Math.min(m, X * t.minorMs), N = P *
|
|
399
|
+
const P = Math.min(m, X * t.minorMs), N = P * a, U = X % n === 0;
|
|
400
400
|
y.push({
|
|
401
401
|
position: N,
|
|
402
402
|
timeMs: P,
|
|
@@ -407,7 +407,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
407
407
|
return y;
|
|
408
408
|
}
|
|
409
409
|
function j(e) {
|
|
410
|
-
const
|
|
410
|
+
const a = s.snapStep, t = a && a > 0 ? a : re.value;
|
|
411
411
|
return Math.max(Math.round(e / t) * t, 0);
|
|
412
412
|
}
|
|
413
413
|
function Ie(e) {
|
|
@@ -417,8 +417,8 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
417
417
|
L.value = !1;
|
|
418
418
|
return;
|
|
419
419
|
}
|
|
420
|
-
const
|
|
421
|
-
o("update:currentTime",
|
|
420
|
+
const a = M.value.getBoundingClientRect(), t = e.clientX - a.left, n = j(t / Math.max(d.value, 1e-4));
|
|
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());
|
|
@@ -426,45 +426,45 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
426
426
|
function E(e) {
|
|
427
427
|
if (!M.value)
|
|
428
428
|
return;
|
|
429
|
-
const
|
|
430
|
-
o("update:currentTime",
|
|
429
|
+
const a = M.value.getBoundingClientRect(), t = e - a.left, n = j(t / Math.max(d.value, 1e-4));
|
|
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 = {
|
|
436
436
|
layout: e,
|
|
437
|
-
edge:
|
|
437
|
+
edge: a,
|
|
438
438
|
initialX: t.clientX
|
|
439
439
|
};
|
|
440
|
-
const
|
|
440
|
+
const n = {
|
|
441
441
|
segment: e.segment,
|
|
442
442
|
track: e.track,
|
|
443
443
|
trackIndex: e.trackIndex,
|
|
444
444
|
segmentIndex: e.segmentIndex,
|
|
445
445
|
startTime: e.segment.start,
|
|
446
446
|
endTime: e.segment.end,
|
|
447
|
-
edge:
|
|
447
|
+
edge: a
|
|
448
448
|
};
|
|
449
|
-
O.value =
|
|
449
|
+
O.value = n, o("segmentResizeStart", n);
|
|
450
450
|
}
|
|
451
|
-
function ce(e,
|
|
452
|
-
const { layout:
|
|
453
|
-
let N =
|
|
454
|
-
m === "start" ? (N = j(Math.max(0,
|
|
455
|
-
const
|
|
456
|
-
segment:
|
|
457
|
-
track:
|
|
458
|
-
trackIndex:
|
|
459
|
-
segmentIndex:
|
|
451
|
+
function ce(e, a, t) {
|
|
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
|
+
let N = n.segment.start, U = n.segment.end;
|
|
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
|
+
const ae = {
|
|
456
|
+
segment: n.segment,
|
|
457
|
+
track: n.track,
|
|
458
|
+
trackIndex: n.trackIndex,
|
|
459
|
+
segmentIndex: n.segmentIndex,
|
|
460
460
|
startTime: N,
|
|
461
461
|
endTime: U,
|
|
462
462
|
edge: m
|
|
463
463
|
};
|
|
464
|
-
O.value =
|
|
464
|
+
O.value = ae, t === "drag" ? o("segmentResize", ae) : t === "end" && o("segmentResizeEnd", ae);
|
|
465
465
|
}
|
|
466
|
-
function we(e,
|
|
467
|
-
F.value?.layout.segment.id === e.segment.id && F.value.moved || o("segmentClick", e,
|
|
466
|
+
function we(e, a) {
|
|
467
|
+
F.value?.layout.segment.id === e.segment.id && F.value.moved || o("segmentClick", e, a);
|
|
468
468
|
}
|
|
469
469
|
function me(e) {
|
|
470
470
|
if (J.value) {
|
|
@@ -490,10 +490,10 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
490
490
|
if (F.value.moved)
|
|
491
491
|
L.value = !0;
|
|
492
492
|
else {
|
|
493
|
-
const { layout:
|
|
494
|
-
we(
|
|
493
|
+
const { layout: a } = F.value;
|
|
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);
|
|
@@ -501,24 +501,24 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
501
501
|
function De() {
|
|
502
502
|
r.value = B(r.value / 1.25);
|
|
503
503
|
}
|
|
504
|
-
function Ze(e,
|
|
505
|
-
const
|
|
504
|
+
function Ze(e, a) {
|
|
505
|
+
const n = 1e3 / (Number.isFinite(a) && a > 0 ? a : 30), m = e * n, C = Xe(n), y = Fe(n), X = m >= Ee ? [...y, ...C] : C;
|
|
506
506
|
let P = null, N = 1 / 0;
|
|
507
507
|
for (const U of X) {
|
|
508
|
-
const
|
|
509
|
-
if (
|
|
508
|
+
const ae = U.mainMs * e;
|
|
509
|
+
if (ae < Ee)
|
|
510
510
|
continue;
|
|
511
|
-
const ze = Math.abs(
|
|
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];
|
|
515
515
|
}
|
|
516
516
|
function Xe(e) {
|
|
517
517
|
return [600, 300, 180, 120, 60, 30, 20, 15, 10, 5, 3, 2, 1].map((t) => {
|
|
518
|
-
const
|
|
518
|
+
const n = t * 1e3;
|
|
519
519
|
return {
|
|
520
|
-
mainMs:
|
|
521
|
-
minorMs: Math.max(
|
|
520
|
+
mainMs: n,
|
|
521
|
+
minorMs: Math.max(n / 10, e),
|
|
522
522
|
mode: "time",
|
|
523
523
|
label: "time"
|
|
524
524
|
};
|
|
@@ -546,14 +546,14 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
546
546
|
}
|
|
547
547
|
];
|
|
548
548
|
}
|
|
549
|
-
function Be(e,
|
|
549
|
+
function Be(e, a, t) {
|
|
550
550
|
if (t.label === "frame") {
|
|
551
|
-
const
|
|
551
|
+
const n = Number.isFinite(a) && a > 0 ? a : 30, m = 1e3 / n, y = Math.round(e / m) % n;
|
|
552
552
|
return y === 0 ? Te(e) : `${y}f`;
|
|
553
553
|
}
|
|
554
554
|
return Te(e);
|
|
555
555
|
}
|
|
556
|
-
return (e,
|
|
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,
|
|
@@ -589,7 +589,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
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,
|
|
@@ -621,50 +621,50 @@ 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
|
-
(_(!0), k(ge, null, he(t.segments, (
|
|
629
|
-
key:
|
|
627
|
+
c("div", ut, [
|
|
628
|
+
(_(!0), k(ge, null, he(t.segments, (n) => Ve((_(), k("div", {
|
|
629
|
+
key: n.segment.id,
|
|
630
630
|
class: $e(["ve-segment", {
|
|
631
|
-
"ve-segment--selected":
|
|
631
|
+
"ve-segment--selected": n.isSelected
|
|
632
632
|
}]),
|
|
633
633
|
style: D({
|
|
634
|
-
left: `${
|
|
635
|
-
width: `${
|
|
636
|
-
backgroundColor:
|
|
634
|
+
left: `${n.left}px`,
|
|
635
|
+
width: `${n.width}px`,
|
|
636
|
+
backgroundColor: n.segment.color || t.track.color || "var(--ve-primary)"
|
|
637
637
|
}),
|
|
638
|
-
onMousedown: le((m) => K(_e)(
|
|
639
|
-
onClick: le((m) => we(
|
|
638
|
+
onMousedown: le((m) => K(_e)(n, m), ["prevent", "stop"]),
|
|
639
|
+
onClick: le((m) => we(n, m), ["stop"])
|
|
640
640
|
}, [
|
|
641
641
|
V(e.$slots, "segment", {
|
|
642
|
-
layout:
|
|
643
|
-
segment:
|
|
644
|
-
track:
|
|
645
|
-
isSelected:
|
|
642
|
+
layout: n,
|
|
643
|
+
segment: n.segment,
|
|
644
|
+
track: n.track,
|
|
645
|
+
isSelected: n.isSelected
|
|
646
646
|
}, () => [
|
|
647
647
|
c("div", ct, [
|
|
648
|
-
c("div", mt, G(
|
|
649
|
-
c("div", vt, G(R(
|
|
648
|
+
c("div", mt, G(n.segment.type || "segment"), 1),
|
|
649
|
+
c("div", vt, G(R(n.segment.start)) + " - " + G(R(n.segment.end)), 1)
|
|
650
650
|
])
|
|
651
651
|
], !0),
|
|
652
|
-
|
|
652
|
+
n.isSelected ? (_(), k("div", ft, [
|
|
653
653
|
c("div", {
|
|
654
654
|
class: "ve-segment__handle ve-segment__handle--left",
|
|
655
|
-
onMousedown: le((m) =>
|
|
656
|
-
}, [...
|
|
657
|
-
Se('<div class="ve-segment__handle-dots" data-v-
|
|
655
|
+
onMousedown: le((m) => de(n, "start", m), ["stop"])
|
|
656
|
+
}, [...a[0] || (a[0] = [
|
|
657
|
+
Se('<div class="ve-segment__handle-dots" data-v-4c77ff19><div class="ve-segment__handle-dot" data-v-4c77ff19></div><div class="ve-segment__handle-dot" data-v-4c77ff19></div><div class="ve-segment__handle-dot" data-v-4c77ff19></div><div class="ve-segment__handle-dot" data-v-4c77ff19></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) =>
|
|
662
|
-
}, [...
|
|
663
|
-
Se('<div class="ve-segment__handle-dots" data-v-
|
|
661
|
+
onMousedown: le((m) => de(n, "end", m), ["stop"])
|
|
662
|
+
}, [...a[1] || (a[1] = [
|
|
663
|
+
Se('<div class="ve-segment__handle-dots" data-v-4c77ff19><div class="ve-segment__handle-dot" data-v-4c77ff19></div><div class="ve-segment__handle-dot" data-v-4c77ff19></div><div class="ve-segment__handle-dot" data-v-4c77ff19></div><div class="ve-segment__handle-dot" data-v-4c77ff19></div></div>', 1)
|
|
664
664
|
])], 40, ht)
|
|
665
665
|
])) : ee("", !0)
|
|
666
|
-
], 46,
|
|
667
|
-
[Le, K($)?.segment.id !==
|
|
666
|
+
], 46, dt)), [
|
|
667
|
+
[Le, K($)?.segment.id !== n.segment.id && O.value?.segment.id !== n.segment.id]
|
|
668
668
|
])), 128))
|
|
669
669
|
])
|
|
670
670
|
], !0)
|
|
@@ -697,8 +697,8 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
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
|
})
|
|
@@ -714,14 +714,14 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
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 + b.value) + b.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({
|
|
@@ -743,7 +743,7 @@ const rt = { class: "ve-timeline" }, dt = { class: "ve-track__body" }, ut = ["on
|
|
|
743
743
|
], 512)
|
|
744
744
|
]));
|
|
745
745
|
}
|
|
746
|
-
}), bt = /* @__PURE__ */ xe(Mt, [["__scopeId", "data-v-
|
|
746
|
+
}), bt = /* @__PURE__ */ xe(Mt, [["__scopeId", "data-v-4c77ff19"]]);
|
|
747
747
|
export {
|
|
748
748
|
bt as V,
|
|
749
749
|
xe as _
|
package/dist/index.d.ts
CHANGED
|
@@ -7,9 +7,38 @@ import { IVideoProtocol } from '@video-editor/shared';
|
|
|
7
7
|
import { PublicProps } from 'vue';
|
|
8
8
|
import { SegmentUnion } from '@video-editor/shared';
|
|
9
9
|
import { TimelineSegment as TimelineSegment_2 } from './types';
|
|
10
|
+
import { TimelineTick as TimelineTick_2 } from '..';
|
|
10
11
|
import { TrackUnion } from '@video-editor/shared';
|
|
11
12
|
|
|
12
|
-
declare const __VLS_component: DefineComponent<
|
|
13
|
+
declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
14
|
+
"update:currentTime": (value: number) => any;
|
|
15
|
+
"update:zoom": (value: number) => any;
|
|
16
|
+
segmentClick: (payload: {
|
|
17
|
+
segment: SegmentUnion;
|
|
18
|
+
track: TrackUnion;
|
|
19
|
+
}) => any;
|
|
20
|
+
segmentDragEnd: (payload: SegmentDragPayload) => any;
|
|
21
|
+
segmentResizeEnd: (payload: SegmentResizePayload) => any;
|
|
22
|
+
"update:selectedSegmentId": (value: string | null) => any;
|
|
23
|
+
}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
24
|
+
"onUpdate:currentTime"?: ((value: number) => any) | undefined;
|
|
25
|
+
"onUpdate:zoom"?: ((value: number) => any) | undefined;
|
|
26
|
+
onSegmentClick?: ((payload: {
|
|
27
|
+
segment: SegmentUnion;
|
|
28
|
+
track: TrackUnion;
|
|
29
|
+
}) => any) | undefined;
|
|
30
|
+
onSegmentDragEnd?: ((payload: SegmentDragPayload) => any) | undefined;
|
|
31
|
+
onSegmentResizeEnd?: ((payload: SegmentResizePayload) => any) | undefined;
|
|
32
|
+
"onUpdate:selectedSegmentId"?: ((value: string | null) => any) | undefined;
|
|
33
|
+
}>, {
|
|
34
|
+
disableInteraction: boolean;
|
|
35
|
+
snapStep: number;
|
|
36
|
+
selectedSegmentId: string | null;
|
|
37
|
+
protocol: IVideoProtocol | null;
|
|
38
|
+
trackTypes: ITrackType[];
|
|
39
|
+
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
40
|
+
|
|
41
|
+
declare const __VLS_component_2: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
|
|
13
42
|
"update:currentTime": (value: number) => any;
|
|
14
43
|
"update:zoom": (value: number) => any;
|
|
15
44
|
segmentClick: (layout: SegmentLayout, event: MouseEvent) => any;
|
|
@@ -76,6 +105,32 @@ declare type __VLS_Props_2 = {
|
|
|
76
105
|
};
|
|
77
106
|
|
|
78
107
|
declare function __VLS_template(): {
|
|
108
|
+
attrs: Partial<{}>;
|
|
109
|
+
slots: {
|
|
110
|
+
toolbar?(_: {
|
|
111
|
+
zoom: number;
|
|
112
|
+
canZoomIn: boolean;
|
|
113
|
+
canZoomOut: boolean;
|
|
114
|
+
zoomIn: () => void;
|
|
115
|
+
zoomOut: () => void;
|
|
116
|
+
currentTime: number;
|
|
117
|
+
duration: number;
|
|
118
|
+
formatTime: (ms: number) => string;
|
|
119
|
+
}): any;
|
|
120
|
+
ruler?(_: {
|
|
121
|
+
ticks: TimelineTick_2[];
|
|
122
|
+
pixelsPerMs: number;
|
|
123
|
+
}): any;
|
|
124
|
+
playhead?(_: {
|
|
125
|
+
left: number;
|
|
126
|
+
currentTime: number;
|
|
127
|
+
}): any;
|
|
128
|
+
};
|
|
129
|
+
refs: {};
|
|
130
|
+
rootEl: HTMLDivElement;
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
declare function __VLS_template_2(): {
|
|
79
134
|
attrs: Partial<{}>;
|
|
80
135
|
slots: {
|
|
81
136
|
toolbar?(_: {
|
|
@@ -135,12 +190,20 @@ declare function __VLS_template(): {
|
|
|
135
190
|
|
|
136
191
|
declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
137
192
|
|
|
193
|
+
declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
|
|
194
|
+
|
|
138
195
|
declare type __VLS_WithTemplateSlots<T, S> = T & {
|
|
139
196
|
new (): {
|
|
140
197
|
$slots: S;
|
|
141
198
|
};
|
|
142
199
|
};
|
|
143
200
|
|
|
201
|
+
declare type __VLS_WithTemplateSlots_2<T, S> = T & {
|
|
202
|
+
new (): {
|
|
203
|
+
$slots: S;
|
|
204
|
+
};
|
|
205
|
+
};
|
|
206
|
+
|
|
144
207
|
declare const _default: {
|
|
145
208
|
install(app: App): void;
|
|
146
209
|
};
|
|
@@ -217,35 +280,9 @@ export declare interface TimelineTrack {
|
|
|
217
280
|
segments: TimelineSegment[];
|
|
218
281
|
}
|
|
219
282
|
|
|
220
|
-
export declare const VideoEditorTimeline:
|
|
221
|
-
"update:currentTime": (value: number) => any;
|
|
222
|
-
"update:zoom": (value: number) => any;
|
|
223
|
-
segmentClick: (payload: {
|
|
224
|
-
segment: SegmentUnion;
|
|
225
|
-
track: TrackUnion;
|
|
226
|
-
}) => any;
|
|
227
|
-
segmentDragEnd: (payload: SegmentDragPayload) => any;
|
|
228
|
-
segmentResizeEnd: (payload: SegmentResizePayload) => any;
|
|
229
|
-
"update:selectedSegmentId": (value: string | null) => any;
|
|
230
|
-
}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
231
|
-
"onUpdate:currentTime"?: ((value: number) => any) | undefined;
|
|
232
|
-
"onUpdate:zoom"?: ((value: number) => any) | undefined;
|
|
233
|
-
onSegmentClick?: ((payload: {
|
|
234
|
-
segment: SegmentUnion;
|
|
235
|
-
track: TrackUnion;
|
|
236
|
-
}) => any) | undefined;
|
|
237
|
-
onSegmentDragEnd?: ((payload: SegmentDragPayload) => any) | undefined;
|
|
238
|
-
onSegmentResizeEnd?: ((payload: SegmentResizePayload) => any) | undefined;
|
|
239
|
-
"onUpdate:selectedSegmentId"?: ((value: string | null) => any) | undefined;
|
|
240
|
-
}>, {
|
|
241
|
-
disableInteraction: boolean;
|
|
242
|
-
snapStep: number;
|
|
243
|
-
selectedSegmentId: string | null;
|
|
244
|
-
protocol: IVideoProtocol | null;
|
|
245
|
-
trackTypes: ITrackType[];
|
|
246
|
-
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
283
|
+
export declare const VideoEditorTimeline: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
247
284
|
|
|
248
|
-
export declare const VideoTimeline:
|
|
285
|
+
export declare const VideoTimeline: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
|
|
249
286
|
|
|
250
287
|
declare function zoomIn(): void;
|
|
251
288
|
|
package/dist/index.js
CHANGED
package/dist/ui.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:where(.ve-playhead[data-v-5de83cfe]){--ve-playhead-nudge: .5px;--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-5de83cfe]){--at-apply: text-[#222226] pointer-events-none relative z-2}:where(.ve-playhead__line[data-v-5de83cfe]){--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-5de83cfe]){--ve-playhead-nudge: .5px;--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-5de83cfe]){--at-apply: text-[#222226] pointer-events-none relative z-2}:where(.ve-playhead__line[data-v-5de83cfe]){--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-4c77ff19]){--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-4c77ff19]){--at-apply: relative overflow-x-auto overflow-y-hidden w-full bg-white}:where(.ve-timeline .ve-timeline__content[data-v-4c77ff19]){--at-apply: relative min-h-full min-w-full}:where(.ve-timeline .ve-timeline__tracks[data-v-4c77ff19]){--at-apply: relative z-1 pb-3 flex flex-col gap-2px h-full}:where(.ve-timeline .ve-track[data-v-4c77ff19]){--at-apply: relative bg-[#f8fafc] overflow-hidden}:where(.ve-timeline .ve-track--main[data-v-4c77ff19]){background-color:#f4f4f6}:where(.ve-timeline .ve-track__body[data-v-4c77ff19]){--at-apply: relative h-full}:where(.ve-timeline .ve-segment[data-v-4c77ff19]){--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-4c77ff19]){--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-4c77ff19]){--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-4c77ff19]){--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-4c77ff19]){--at-apply: flex flex-col gap-1}:where(.ve-timeline .ve-segment__title[data-v-4c77ff19]){--at-apply: text-[12px] font-bold capitalize}:where(.ve-timeline .ve-segment__time[data-v-4c77ff19]){--at-apply: text-[11px] text-[rgba(15,23,42,.8)] font-mono}:where(.ve-timeline .ve-segment__selection[data-v-4c77ff19]){--at-apply: absolute bottom-0 left-0 right-0 top-0 pointer-events-none z-10}:where(.ve-timeline .ve-segment__handle[data-v-4c77ff19]){--at-apply: absolute h-full w-1 bg-[var(--ve-primary)] cursor-ew-resize pointer-events-auto top-50% translate-y--50%;border:2px solid var(--ve-primary)}:where(.ve-timeline .ve-segment__handle--left[data-v-4c77ff19]){--at-apply: left-0 top-0 translate-x--50% rounded-l-1}:where(.ve-timeline .ve-segment__handle--right[data-v-4c77ff19]){--at-apply: right-0 top-0 translate-x-50% rounded-r-1}:where(.ve-timeline .ve-segment__handle-dots[data-v-4c77ff19]){--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-4c77ff19]){--at-apply: rounded-full bg-white;width:1px;height:1px}:where(.ve-timeline .ve-segment--placeholder[data-v-4c77ff19]){--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-4c77ff19]){--at-apply: absolute inset-0 rounded-[2px];opacity:.2}:where(.ve-timeline .ve-snap-guide[data-v-4c77ff19]){--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-4c77ff19]){--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,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@video-editor/ui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.1-beta.
|
|
4
|
+
"version": "0.0.1-beta.8",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
8
8
|
"import": "./dist/index.js"
|
|
9
9
|
},
|
|
10
|
+
"./dist/ui.css": "./dist/ui.css",
|
|
10
11
|
"./*": "./*"
|
|
11
12
|
},
|
|
12
13
|
"main": "dist/index.js",
|
|
@@ -19,8 +20,8 @@
|
|
|
19
20
|
"vue": "^3.5.25"
|
|
20
21
|
},
|
|
21
22
|
"dependencies": {
|
|
22
|
-
"@video-editor/protocol": "0.0.1-beta.
|
|
23
|
-
"@video-editor/shared": "0.0.1-beta.
|
|
23
|
+
"@video-editor/protocol": "0.0.1-beta.8",
|
|
24
|
+
"@video-editor/shared": "0.0.1-beta.8"
|
|
24
25
|
},
|
|
25
26
|
"scripts": {
|
|
26
27
|
"build": "vite build",
|