@video-editor/ui 0.0.1-beta.11 → 0.0.1-beta.13
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 +3 -268
- package/dist/VideoTimeline.js +1 -1
- package/dist/index-BgON6Mut.js +305 -0
- package/dist/{index-ulgJGqrQ.js → index-t1DKjcCO.js} +92 -92
- package/dist/index.d.ts +88 -5
- package/dist/index.js +5 -2
- package/dist/ui.css +1 -1
- package/package.json +3 -3
package/dist/index.d.ts
CHANGED
|
@@ -2,11 +2,16 @@ import { App } from 'vue';
|
|
|
2
2
|
import { ComponentOptionsMixin } from 'vue';
|
|
3
3
|
import { ComponentProvideOptions } from 'vue';
|
|
4
4
|
import { DefineComponent } from 'vue';
|
|
5
|
+
import { I3DFramesSegment } from '@video-editor/shared';
|
|
6
|
+
import { IFramesSegmentUnion } from '@video-editor/shared';
|
|
7
|
+
import { IImageFramesSegment } from '@video-editor/shared';
|
|
5
8
|
import { ITrackType } from '@video-editor/shared';
|
|
9
|
+
import { IVideoFramesSegment } from '@video-editor/shared';
|
|
6
10
|
import { IVideoProtocol } from '@video-editor/shared';
|
|
7
11
|
import { PublicProps } from 'vue';
|
|
8
12
|
import { SegmentUnion } from '@video-editor/shared';
|
|
9
|
-
import { TimelineSegment as TimelineSegment_2 } from '
|
|
13
|
+
import { TimelineSegment as TimelineSegment_2 } from '..';
|
|
14
|
+
import { TimelineSegment as TimelineSegment_3 } from './types';
|
|
10
15
|
import { TimelineTick as TimelineTick_2 } from '..';
|
|
11
16
|
import { TrackUnion } from '@video-editor/shared';
|
|
12
17
|
|
|
@@ -77,6 +82,8 @@ contentRef: HTMLDivElement;
|
|
|
77
82
|
tracksRef: HTMLDivElement;
|
|
78
83
|
}, HTMLDivElement>;
|
|
79
84
|
|
|
85
|
+
declare const __VLS_component_3: DefineComponent<__VLS_Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_3> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
86
|
+
|
|
80
87
|
declare type __VLS_Props = {
|
|
81
88
|
protocol?: IVideoProtocol | null;
|
|
82
89
|
currentTime: number;
|
|
@@ -104,9 +111,31 @@ declare type __VLS_Props_2 = {
|
|
|
104
111
|
fps?: number;
|
|
105
112
|
};
|
|
106
113
|
|
|
114
|
+
declare type __VLS_Props_3 = {
|
|
115
|
+
segment: IFramesSegmentUnion;
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
declare type __VLS_Props_4 = {
|
|
119
|
+
segment: SegmentUnion;
|
|
120
|
+
trackType: string;
|
|
121
|
+
accentColor?: string;
|
|
122
|
+
};
|
|
123
|
+
|
|
107
124
|
declare function __VLS_template(): {
|
|
108
125
|
attrs: Partial<{}>;
|
|
109
|
-
slots: {
|
|
126
|
+
slots: Partial<Record<NonNullable<"segment-filter" | "segment-audio" | "segment-text" | "segment-frames" | "segment-sticker" | "segment-effect">, (_: {
|
|
127
|
+
segment: SegmentUnion;
|
|
128
|
+
layout: {
|
|
129
|
+
left: number;
|
|
130
|
+
top: number;
|
|
131
|
+
segment: TimelineSegment_2;
|
|
132
|
+
track: TimelineTrack;
|
|
133
|
+
trackIndex: number;
|
|
134
|
+
segmentIndex: number;
|
|
135
|
+
width: number;
|
|
136
|
+
isSelected: boolean;
|
|
137
|
+
};
|
|
138
|
+
}) => any>> & {
|
|
110
139
|
toolbar?(_: {
|
|
111
140
|
zoom: number;
|
|
112
141
|
canZoomIn: boolean;
|
|
@@ -160,7 +189,7 @@ declare function __VLS_template_2(): {
|
|
|
160
189
|
}): any;
|
|
161
190
|
segment?(_: {
|
|
162
191
|
layout: SegmentLayout;
|
|
163
|
-
segment:
|
|
192
|
+
segment: TimelineSegment_3;
|
|
164
193
|
track: TimelineTrack;
|
|
165
194
|
isSelected: boolean;
|
|
166
195
|
}): any;
|
|
@@ -168,14 +197,14 @@ declare function __VLS_template_2(): {
|
|
|
168
197
|
layout: {
|
|
169
198
|
left: number;
|
|
170
199
|
top: number;
|
|
171
|
-
segment:
|
|
200
|
+
segment: TimelineSegment_3;
|
|
172
201
|
track: TimelineTrack;
|
|
173
202
|
trackIndex: number;
|
|
174
203
|
segmentIndex: number;
|
|
175
204
|
width: number;
|
|
176
205
|
isSelected: boolean;
|
|
177
206
|
};
|
|
178
|
-
segment:
|
|
207
|
+
segment: TimelineSegment_3;
|
|
179
208
|
track: TimelineTrack;
|
|
180
209
|
isSelected: boolean;
|
|
181
210
|
}): any;
|
|
@@ -188,10 +217,52 @@ declare function __VLS_template_2(): {
|
|
|
188
217
|
rootEl: HTMLDivElement;
|
|
189
218
|
};
|
|
190
219
|
|
|
220
|
+
declare function __VLS_template_3(): {
|
|
221
|
+
attrs: Partial<{}>;
|
|
222
|
+
slots: {
|
|
223
|
+
image?(_: {
|
|
224
|
+
style: {
|
|
225
|
+
backgroundImage: string;
|
|
226
|
+
backgroundRepeat: string;
|
|
227
|
+
backgroundSize: string;
|
|
228
|
+
backgroundPosition: string;
|
|
229
|
+
};
|
|
230
|
+
segment: IImageFramesSegment;
|
|
231
|
+
}): any;
|
|
232
|
+
video?(_: {
|
|
233
|
+
segment: IVideoFramesSegment;
|
|
234
|
+
thumbnails: {
|
|
235
|
+
tsMs: number;
|
|
236
|
+
url: string;
|
|
237
|
+
}[];
|
|
238
|
+
}): any;
|
|
239
|
+
loading?(_: {
|
|
240
|
+
segment: IVideoFramesSegment;
|
|
241
|
+
}): any;
|
|
242
|
+
error?(_: {
|
|
243
|
+
segment: IVideoFramesSegment;
|
|
244
|
+
error: string;
|
|
245
|
+
}): any;
|
|
246
|
+
empty?(_: {
|
|
247
|
+
segment: IVideoFramesSegment;
|
|
248
|
+
}): any;
|
|
249
|
+
fallback?(_: {
|
|
250
|
+
segment: I3DFramesSegment;
|
|
251
|
+
}): any;
|
|
252
|
+
overlay?(_: {
|
|
253
|
+
segment: IFramesSegmentUnion;
|
|
254
|
+
}): any;
|
|
255
|
+
};
|
|
256
|
+
refs: {};
|
|
257
|
+
rootEl: HTMLDivElement;
|
|
258
|
+
};
|
|
259
|
+
|
|
191
260
|
declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
192
261
|
|
|
193
262
|
declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
|
|
194
263
|
|
|
264
|
+
declare type __VLS_TemplateResult_3 = ReturnType<typeof __VLS_template_3>;
|
|
265
|
+
|
|
195
266
|
declare type __VLS_WithTemplateSlots<T, S> = T & {
|
|
196
267
|
new (): {
|
|
197
268
|
$slots: S;
|
|
@@ -204,6 +275,12 @@ declare type __VLS_WithTemplateSlots_2<T, S> = T & {
|
|
|
204
275
|
};
|
|
205
276
|
};
|
|
206
277
|
|
|
278
|
+
declare type __VLS_WithTemplateSlots_3<T, S> = T & {
|
|
279
|
+
new (): {
|
|
280
|
+
$slots: S;
|
|
281
|
+
};
|
|
282
|
+
};
|
|
283
|
+
|
|
207
284
|
declare const _default: {
|
|
208
285
|
install(app: App): void;
|
|
209
286
|
};
|
|
@@ -211,6 +288,12 @@ export default _default;
|
|
|
211
288
|
|
|
212
289
|
declare function formatTime(ms: number): string;
|
|
213
290
|
|
|
291
|
+
export declare const FramesSegment: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
|
|
292
|
+
|
|
293
|
+
export declare const SegmentBase: DefineComponent<__VLS_Props_4, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_4> & Readonly<{}>, {
|
|
294
|
+
accentColor: string;
|
|
295
|
+
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
296
|
+
|
|
214
297
|
export declare interface SegmentDragPayload {
|
|
215
298
|
segment: TimelineSegment;
|
|
216
299
|
track: TimelineTrack;
|
package/dist/index.js
CHANGED
|
@@ -1,11 +1,14 @@
|
|
|
1
|
-
import i from "./
|
|
2
|
-
import {
|
|
1
|
+
import { V as i } from "./index-BgON6Mut.js";
|
|
2
|
+
import { F as s, S as d } from "./index-BgON6Mut.js";
|
|
3
|
+
import { V as o } from "./index-t1DKjcCO.js";
|
|
3
4
|
const t = {
|
|
4
5
|
install(e) {
|
|
5
6
|
e.component(o.name || "VeVideoTimeline", o), e.component(i.name || "VeVideoEditorTimeline", i);
|
|
6
7
|
}
|
|
7
8
|
};
|
|
8
9
|
export {
|
|
10
|
+
s as FramesSegment,
|
|
11
|
+
d as SegmentBase,
|
|
9
12
|
i as VideoEditorTimeline,
|
|
10
13
|
o as VideoTimeline,
|
|
11
14
|
t as default
|
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.13",
|
|
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.13",
|
|
24
|
+
"@video-editor/shared": "0.0.1-beta.13"
|
|
25
25
|
},
|
|
26
26
|
"scripts": {
|
|
27
27
|
"build": "vite build",
|