@video-editor/ui 0.0.1-beta.12 → 0.0.1-beta.14

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.
Files changed (7) hide show
  1. package/dist/VideoEditorTimeline.d.ts +85 -13
  2. package/dist/VideoEditorTimeline.js +3 -301
  3. package/dist/index-CsdNgHvd.js +348 -0
  4. package/dist/index.d.ts +154 -13
  5. package/dist/index.js +4 -1
  6. package/dist/ui.css +1 -1
  7. package/package.json +3 -3
package/dist/VideoEditorTimeline.d.ts CHANGED
@@ -1,6 +1,12 @@
1
1
  import { ComponentOptionsMixin } from 'vue';
2
2
  import { ComponentProvideOptions } from 'vue';
3
3
  import { DefineComponent } from 'vue';
4
+ import { IAudioSegment } from '@video-editor/shared';
5
+ import { IEffectSegment } from '@video-editor/shared';
6
+ import { IFilterSegment } from '@video-editor/shared';
7
+ import { IFramesSegmentUnion } from '@video-editor/shared';
8
+ import { IStickerSegment } from '@video-editor/shared';
9
+ import { ITextSegment } from '@video-editor/shared';
4
10
  import { ITrackType } from '@video-editor/shared';
5
11
  import { IVideoProtocol } from '@video-editor/shared';
6
12
  import { PublicProps } from 'vue';
@@ -49,19 +55,7 @@ declare type __VLS_Props = {
49
55
 
50
56
  declare function __VLS_template(): {
51
57
  attrs: Partial<{}>;
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>> & {
58
+ slots: {
65
59
  toolbar?(_: {
66
60
  zoom: number;
67
61
  canZoomIn: boolean;
@@ -80,6 +74,84 @@ declare function __VLS_template(): {
80
74
  left: number;
81
75
  currentTime: number;
82
76
  }): any;
77
+ 'segment-frames'?(_: {
78
+ segment: IFramesSegmentUnion;
79
+ layout: {
80
+ left: number;
81
+ top: number;
82
+ segment: TimelineSegment_2;
83
+ track: TimelineTrack;
84
+ trackIndex: number;
85
+ segmentIndex: number;
86
+ width: number;
87
+ isSelected: boolean;
88
+ };
89
+ }): any;
90
+ 'segment-text'?(_: {
91
+ segment: ITextSegment;
92
+ layout: {
93
+ left: number;
94
+ top: number;
95
+ segment: TimelineSegment_2;
96
+ track: TimelineTrack;
97
+ trackIndex: number;
98
+ segmentIndex: number;
99
+ width: number;
100
+ isSelected: boolean;
101
+ };
102
+ }): any;
103
+ 'segment-sticker'?(_: {
104
+ segment: IStickerSegment;
105
+ layout: {
106
+ left: number;
107
+ top: number;
108
+ segment: TimelineSegment_2;
109
+ track: TimelineTrack;
110
+ trackIndex: number;
111
+ segmentIndex: number;
112
+ width: number;
113
+ isSelected: boolean;
114
+ };
115
+ }): any;
116
+ 'segment-audio'?(_: {
117
+ segment: IAudioSegment;
118
+ layout: {
119
+ left: number;
120
+ top: number;
121
+ segment: TimelineSegment_2;
122
+ track: TimelineTrack;
123
+ trackIndex: number;
124
+ segmentIndex: number;
125
+ width: number;
126
+ isSelected: boolean;
127
+ };
128
+ }): any;
129
+ 'segment-effect'?(_: {
130
+ segment: IEffectSegment;
131
+ layout: {
132
+ left: number;
133
+ top: number;
134
+ segment: TimelineSegment_2;
135
+ track: TimelineTrack;
136
+ trackIndex: number;
137
+ segmentIndex: number;
138
+ width: number;
139
+ isSelected: boolean;
140
+ };
141
+ }): any;
142
+ 'segment-filter'?(_: {
143
+ segment: IFilterSegment;
144
+ layout: {
145
+ left: number;
146
+ top: number;
147
+ segment: TimelineSegment_2;
148
+ track: TimelineTrack;
149
+ trackIndex: number;
150
+ segmentIndex: number;
151
+ width: number;
152
+ isSelected: boolean;
153
+ };
154
+ }): any;
83
155
  };
84
156
  refs: {};
85
157
  rootEl: HTMLDivElement;
package/dist/VideoEditorTimeline.js CHANGED
@@ -1,303 +1,5 @@
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
- import { generateThumbnails as Q } from "@video-editor/protocol";
4
- import { isVideoFramesSegment as W } from "@video-editor/shared";
5
- const X = { class: "frames-segment" }, Z = { class: "frames-segment__video" }, ee = {
6
- key: 1,
7
- class: "frames-segment__placeholder"
8
- }, te = { class: "frames-segment__placeholder" }, ne = {
9
- key: 0,
10
- class: "frames-segment__badge"
11
- }, se = /* @__PURE__ */ V({
12
- name: "FramesSegment",
13
- __name: "FramesSegment",
14
- props: {
15
- segment: {}
16
- },
17
- setup(r) {
18
- const p = r, n = Y({ items: [], loading: !1, error: null });
19
- let l = 0;
20
- j(() => p.segment, (s, a) => {
21
- if (!W(s))
22
- return;
23
- (!a || k(a, s)) && E(s);
24
- }, { immediate: !0, deep: !0 }), q(() => {
25
- h();
26
- });
27
- function k(s, a) {
28
- return s.url !== a.url || s.startTime !== a.startTime || s.endTime !== a.endTime || s.fromTime !== a.fromTime;
29
- }
30
- async function E(s) {
31
- if (!s.url)
32
- return;
33
- const a = ++l;
34
- h(), n.loading = !0, n.error = null;
35
- try {
36
- const m = C(s), f = await Q(s.url, m);
37
- if (l !== a)
38
- return;
39
- const v = f.map((b) => ({
40
- tsMs: Math.round(b.ts / 1e3),
41
- url: URL.createObjectURL(b.img)
42
- }));
43
- n.items = v, n.loading = !1;
44
- } catch (m) {
45
- if (l !== a)
46
- return;
47
- n.error = m instanceof Error ? m.message : String(m), n.loading = !1;
48
- }
49
- }
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 };
53
- }
54
- function h() {
55
- n.items.forEach((s) => URL.revokeObjectURL(s.url)), n.items = [];
56
- }
57
- function S() {
58
- return {
59
- backgroundImage: p.segment.url ? `url(${p.segment.url})` : "",
60
- backgroundRepeat: "repeat-x",
61
- backgroundSize: "56px 56px",
62
- backgroundPosition: "left center"
63
- };
64
- }
65
- return (s, a) => (i(), g("div", X, [
66
- r.segment.type === "image" ? d(s.$slots, "image", {
67
- key: 0,
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)
106
- ]))
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)
118
- ]));
119
- }
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 = {
121
- key: 0,
122
- class: "segment-base__badge"
123
- }, ce = /* @__PURE__ */ V({
124
- name: "SegmentBase",
125
- __name: "SegmentBase",
126
- props: {
127
- segment: {},
128
- trackType: {},
129
- accentColor: { default: "#222226" }
130
- },
131
- setup(r) {
132
- const p = r, n = R(() => {
133
- const l = p.segment?.extra?.label;
134
- return typeof l == "string" ? l : null;
135
- });
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)
140
- ]),
141
- n.value ? (i(), g("span", me, T(n.value), 1)) : D("", !0)
142
- ]));
143
- }
144
- }), de = /* @__PURE__ */ F(ce, [["__scopeId", "data-v-d386af72"]]), ue = { class: "ve-editor-segment__preview" }, L = "#222226", ge = 0.4, fe = /* @__PURE__ */ V({
145
- name: "VideoEditorTimeline",
146
- __name: "index",
147
- props: {
148
- protocol: { default: null },
149
- currentTime: {},
150
- zoom: {},
151
- snapStep: { default: 0 },
152
- selectedSegmentId: { default: null },
153
- trackTypes: { default: void 0 },
154
- disableInteraction: { type: Boolean, default: !1 }
155
- },
156
- emits: ["update:currentTime", "update:zoom", "update:selectedSegmentId", "segmentClick", "segmentDragEnd", "segmentResizeEnd"],
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;
161
- });
162
- const E = {
163
- frames: L,
164
- audio: "#0ea5e9",
165
- text: "#16a34a",
166
- sticker: "#f97316",
167
- effect: "#a855f7",
168
- filter: "#64748b"
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;
171
- return {
172
- id: e.trackId || `${e.trackType}-${o}`,
173
- label: e.trackType,
174
- type: e.trackType,
175
- color: t,
176
- isMain: M,
177
- payload: e,
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
185
- }))
186
- };
187
- })), S = R(() => {
188
- if (!n.protocol?.tracks?.length)
189
- return 0;
190
- const e = n.protocol.tracks.flatMap((o) => o.children.map((t) => t.endTime));
191
- return e.length ? Math.max(...e) : 0;
192
- });
193
- function s(e, o) {
194
- const t = e.replace("#", "");
195
- if (!(t.length === 3 || t.length === 6))
196
- return e;
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})`;
199
- }
200
- function a(e) {
201
- return e && typeof e == "object" && "segmentType" in e ? e : null;
202
- }
203
- function m(e) {
204
- const o = e.payload;
205
- if (o)
206
- return o;
207
- if (n.protocol)
208
- return n.protocol.tracks.find((t) => t.trackId === e.id);
209
- }
210
- function f(e) {
211
- k.value = e, l("update:selectedSegmentId", e);
212
- }
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 }));
216
- }
217
- function b(e) {
218
- f(e.segment.id);
219
- }
220
- function N(e) {
221
- l("segmentDragEnd", e);
222
- }
223
- function O(e) {
224
- f(e.segment.id);
225
- }
226
- function H(e) {
227
- l("segmentResizeEnd", e);
228
- }
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))
246
- }, G({
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
250
- }, [
251
- c ? (i(), g("div", {
252
- key: 0,
253
- class: "ve-editor-segment",
254
- style: I({ "--ve-segment-accent": t.track.color || L })
255
- }, [
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)
271
- ])
272
- ], 4)) : D("", !0)
273
- ], 64))), 128))
274
- ]),
275
- _: 2
276
- }, [
277
- e.$slots.toolbar ? {
278
- name: "toolbar",
279
- fn: $((t) => [
280
- d(e.$slots, "toolbar", U(B(t)), void 0, !0)
281
- ]),
282
- key: "0"
283
- } : void 0,
284
- e.$slots.ruler ? {
285
- name: "ruler",
286
- fn: $((t) => [
287
- d(e.$slots, "ruler", U(B(t)), void 0, !0)
288
- ]),
289
- key: "1"
290
- } : void 0,
291
- e.$slots.playhead ? {
292
- name: "playhead",
293
- fn: $((t) => [
294
- d(e.$slots, "playhead", U(B(t)), void 0, !0)
295
- ]),
296
- key: "2"
297
- } : void 0
298
- ]), 1032, ["tracks", "duration", "current-time", "zoom", "fps", "snap-step", "selected-segment-id", "disable-interaction"]));
299
- }
300
- }), Te = /* @__PURE__ */ F(fe, [["__scopeId", "data-v-8004be28"]]);
1
+ import { V as a } from "./index-CsdNgHvd.js";
2
+ import "./index-t1DKjcCO.js";
301
3
  export {
302
- Te as default
4
+ a as default
303
5
  };
package/dist/index-CsdNgHvd.js ADDED
@@ -0,0 +1,348 @@
1
+ import { defineComponent as _, reactive as q, watch as j, onBeforeUnmount as G, createElementBlock as g, openBlock as d, renderSlot as i, normalizeStyle as E, createElementVNode as u, Fragment as M, renderList as A, toDisplayString as v, createCommentVNode as U, computed as C, ref as K, createBlock as Q, createSlots as W, withCtx as z, createVNode as b, unref as h, normalizeProps as F, guardReactiveProps as L } from "vue";
2
+ import { _ as N, V as X } from "./index-t1DKjcCO.js";
3
+ import { generateThumbnails as Z } from "@video-editor/protocol";
4
+ import { isVideoFramesSegment as x } from "@video-editor/shared";
5
+ const ee = { class: "frames-segment" }, te = { class: "frames-segment__video" }, ne = {
6
+ key: 1,
7
+ class: "frames-segment__placeholder"
8
+ }, se = { class: "frames-segment__placeholder" }, re = {
9
+ key: 0,
10
+ class: "frames-segment__badge"
11
+ }, oe = /* @__PURE__ */ _({
12
+ name: "FramesSegment",
13
+ __name: "FramesSegment",
14
+ props: {
15
+ segment: {}
16
+ },
17
+ setup(o) {
18
+ const f = o, n = q({ items: [], loading: !1, error: null });
19
+ let c = 0;
20
+ j(() => f.segment, (s, a) => {
21
+ if (!x(s))
22
+ return;
23
+ (!a || y(a, s)) && V(s);
24
+ }, { immediate: !0, deep: !0 }), G(() => {
25
+ $();
26
+ });
27
+ function y(s, a) {
28
+ return s.url !== a.url || s.startTime !== a.startTime || s.endTime !== a.endTime || s.fromTime !== a.fromTime;
29
+ }
30
+ async function V(s) {
31
+ if (!s.url)
32
+ return;
33
+ const a = ++c;
34
+ $(), n.loading = !0, n.error = null;
35
+ try {
36
+ const m = w(s), p = await Z(s.url, m);
37
+ if (c !== a)
38
+ return;
39
+ const R = p.map((T) => ({
40
+ tsMs: Math.round(T.ts / 1e3),
41
+ url: URL.createObjectURL(T.img)
42
+ }));
43
+ n.items = R, n.loading = !1;
44
+ } catch (m) {
45
+ if (c !== a)
46
+ return;
47
+ n.error = m instanceof Error ? m.message : String(m), n.loading = !1;
48
+ }
49
+ }
50
+ function w(s) {
51
+ const a = Math.max(s.fromTime ?? 0, 0) * 1e3, m = Math.max(s.endTime - s.startTime, 1), p = a + m * 1e3, T = Math.max(Math.floor((p - a) / 8), 2e5);
52
+ return { start: a, end: p, step: T };
53
+ }
54
+ function $() {
55
+ n.items.forEach((s) => URL.revokeObjectURL(s.url)), n.items = [];
56
+ }
57
+ function I() {
58
+ return {
59
+ backgroundImage: f.segment.url ? `url(${f.segment.url})` : "",
60
+ backgroundRepeat: "repeat-x",
61
+ backgroundSize: "56px 56px",
62
+ backgroundPosition: "left center"
63
+ };
64
+ }
65
+ return (s, a) => (d(), g("div", ee, [
66
+ o.segment.type === "image" ? i(s.$slots, "image", {
67
+ key: 0,
68
+ segment: o.segment,
69
+ style: E(I())
70
+ }, () => [
71
+ u("div", {
72
+ class: "frames-segment__image",
73
+ style: E(I())
74
+ }, null, 4)
75
+ ], !0) : o.segment.type === "video" ? (d(), g(M, { key: 1 }, [
76
+ n.items.length ? i(s.$slots, "video", {
77
+ key: 0,
78
+ segment: o.segment,
79
+ thumbnails: n.items
80
+ }, () => [
81
+ u("div", te, [
82
+ (d(!0), g(M, null, A(n.items, (m) => (d(), g("div", {
83
+ key: `${o.segment.id}-${m.tsMs}`,
84
+ class: "frames-segment__thumb",
85
+ style: E({ backgroundImage: `url(${m.url})` })
86
+ }, null, 4))), 128))
87
+ ])
88
+ ], !0) : (d(), g("div", ne, [
89
+ n.loading ? i(s.$slots, "loading", {
90
+ key: 0,
91
+ segment: o.segment
92
+ }, () => [
93
+ a[0] || (a[0] = u("span", null, "抽帧中…", -1))
94
+ ], !0) : n.error ? i(s.$slots, "error", {
95
+ key: 1,
96
+ segment: o.segment,
97
+ error: n.error
98
+ }, () => [
99
+ a[1] || (a[1] = u("span", null, "生成失败", -1))
100
+ ], !0) : i(s.$slots, "empty", {
101
+ key: 2,
102
+ segment: o.segment
103
+ }, () => [
104
+ a[2] || (a[2] = u("span", null, "未生成缩略图", -1))
105
+ ], !0)
106
+ ]))
107
+ ], 64)) : i(s.$slots, "fallback", {
108
+ key: 2,
109
+ segment: o.segment
110
+ }, () => [
111
+ u("div", se, [
112
+ u("span", null, v(o.segment.type), 1)
113
+ ])
114
+ ], !0),
115
+ i(s.$slots, "overlay", { segment: o.segment }, () => [
116
+ o.segment.extra?.label ? (d(), g("span", re, v(o.segment.extra?.label), 1)) : U("", !0)
117
+ ], !0)
118
+ ]));
119
+ }
120
+ }), ae = /* @__PURE__ */ N(oe, [["__scopeId", "data-v-4ab97cd2"]]), le = { class: "segment-base" }, ie = { class: "segment-base__content" }, ce = { class: "segment-base__pill segment-base__pill--primary" }, me = { class: "segment-base__pill segment-base__pill--muted" }, de = {
121
+ key: 0,
122
+ class: "segment-base__badge"
123
+ }, ue = /* @__PURE__ */ _({
124
+ name: "SegmentBase",
125
+ __name: "SegmentBase",
126
+ props: {
127
+ segment: {},
128
+ trackType: {},
129
+ accentColor: { default: "#222226" }
130
+ },
131
+ setup(o) {
132
+ const f = o, n = C(() => {
133
+ const c = f.segment?.extra?.label;
134
+ return typeof c == "string" ? c : null;
135
+ });
136
+ return (c, y) => (d(), g("div", le, [
137
+ u("div", ie, [
138
+ u("span", ce, v(o.trackType), 1),
139
+ u("span", me, v(o.segment.segmentType), 1)
140
+ ]),
141
+ n.value ? (d(), g("span", de, v(n.value), 1)) : U("", !0)
142
+ ]));
143
+ }
144
+ }), S = /* @__PURE__ */ N(ue, [["__scopeId", "data-v-d386af72"]]), ge = { class: "ve-editor-segment__preview" }, D = "#222226", pe = 0.4, fe = /* @__PURE__ */ _({
145
+ name: "VideoEditorTimeline",
146
+ __name: "index",
147
+ props: {
148
+ protocol: { default: null },
149
+ currentTime: {},
150
+ zoom: {},
151
+ snapStep: { default: 0 },
152
+ selectedSegmentId: { default: null },
153
+ trackTypes: { default: void 0 },
154
+ disableInteraction: { type: Boolean, default: !1 }
155
+ },
156
+ emits: ["update:currentTime", "update:zoom", "update:selectedSegmentId", "segmentClick", "segmentDragEnd", "segmentResizeEnd"],
157
+ setup(o, { emit: f }) {
158
+ const n = o, c = f, y = K(n.selectedSegmentId ?? null);
159
+ j(() => n.selectedSegmentId, (e) => {
160
+ y.value = e ?? null;
161
+ });
162
+ const V = {
163
+ frames: D,
164
+ audio: "#0ea5e9",
165
+ text: "#16a34a",
166
+ sticker: "#f97316",
167
+ effect: "#a855f7",
168
+ filter: "#64748b"
169
+ }, w = C(() => n.protocol?.tracks?.length ? n.trackTypes?.length ? n.protocol.tracks.filter((e) => n.trackTypes?.includes(e.trackType)) : n.protocol.tracks : []), $ = C(() => w.value.map((e, l) => {
170
+ const t = V[e.trackType] || D, r = s(t, pe), B = e.trackType === "frames" && e.isMain === !0;
171
+ return {
172
+ id: e.trackId || `${e.trackType}-${l}`,
173
+ label: e.trackType,
174
+ type: e.trackType,
175
+ color: t,
176
+ isMain: B,
177
+ payload: e,
178
+ segments: e.children.map((k) => ({
179
+ id: k.id,
180
+ start: k.startTime,
181
+ end: k.endTime,
182
+ type: k.segmentType,
183
+ color: r,
184
+ payload: k
185
+ }))
186
+ };
187
+ })), I = C(() => {
188
+ if (!n.protocol?.tracks?.length)
189
+ return 0;
190
+ const e = n.protocol.tracks.flatMap((l) => l.children.map((t) => t.endTime));
191
+ return e.length ? Math.max(...e) : 0;
192
+ });
193
+ function s(e, l) {
194
+ const t = e.replace("#", "");
195
+ if (!(t.length === 3 || t.length === 6))
196
+ return e;
197
+ const r = t.length === 3 ? t.split("").map((P) => P + P).join("") : t, B = Number.parseInt(r.slice(0, 2), 16), k = Number.parseInt(r.slice(2, 4), 16), Y = Number.parseInt(r.slice(4, 6), 16);
198
+ return `rgba(${B}, ${k}, ${Y}, ${l})`;
199
+ }
200
+ function a(e) {
201
+ return e && typeof e == "object" && "segmentType" in e ? e : null;
202
+ }
203
+ function m(e) {
204
+ const l = e.payload;
205
+ if (l)
206
+ return l;
207
+ if (n.protocol)
208
+ return n.protocol.tracks.find((t) => t.trackId === e.id);
209
+ }
210
+ function p(e) {
211
+ y.value = e, c("update:selectedSegmentId", e);
212
+ }
213
+ function R(e) {
214
+ const l = a(e.segment.payload), t = m(e.track);
215
+ l && (p(l.id), t && c("segmentClick", { segment: l, track: t }));
216
+ }
217
+ function T(e) {
218
+ p(e.segment.id);
219
+ }
220
+ function O(e) {
221
+ c("segmentDragEnd", e);
222
+ }
223
+ function H(e) {
224
+ p(e.segment.id);
225
+ }
226
+ function J(e) {
227
+ c("segmentResizeEnd", e);
228
+ }
229
+ return (e, l) => (d(), Q(X, {
230
+ tracks: $.value,
231
+ duration: I.value,
232
+ "current-time": o.currentTime,
233
+ zoom: o.zoom,
234
+ fps: o.protocol?.fps || 30,
235
+ "snap-step": o.snapStep,
236
+ "selected-segment-id": y.value ?? null,
237
+ "disable-interaction": o.disableInteraction,
238
+ "onUpdate:currentTime": l[0] || (l[0] = (t) => c("update:currentTime", t)),
239
+ "onUpdate:zoom": l[1] || (l[1] = (t) => c("update:zoom", t)),
240
+ onSegmentClick: R,
241
+ onSegmentDragStart: T,
242
+ onSegmentDragEnd: O,
243
+ onSegmentResizeStart: H,
244
+ onSegmentResizeEnd: J,
245
+ onBackgroundClick: l[2] || (l[2] = (t) => p(null))
246
+ }, W({
247
+ segment: z(({ layout: t }) => [
248
+ (d(!0), g(M, null, A([a(t.segment.payload)], (r) => (d(), g(M, {
249
+ key: r?.id || t.segment.id
250
+ }, [
251
+ r ? (d(), g("div", {
252
+ key: 0,
253
+ class: "ve-editor-segment",
254
+ style: E({ "--ve-segment-accent": t.track.color || D })
255
+ }, [
256
+ u("div", ge, [
257
+ r.segmentType === "frames" ? i(e.$slots, "segment-frames", {
258
+ key: 0,
259
+ segment: r,
260
+ layout: t
261
+ }, () => [
262
+ b(h(ae), { segment: r }, null, 8, ["segment"])
263
+ ], !0) : r.segmentType === "text" ? i(e.$slots, "segment-text", {
264
+ key: 1,
265
+ segment: r,
266
+ layout: t
267
+ }, () => [
268
+ b(h(S), {
269
+ segment: r,
270
+ "track-type": t.track.type || "unknown",
271
+ "accent-color": t.track.color
272
+ }, null, 8, ["segment", "track-type", "accent-color"])
273
+ ], !0) : r.segmentType === "sticker" ? i(e.$slots, "segment-sticker", {
274
+ key: 2,
275
+ segment: r,
276
+ layout: t
277
+ }, () => [
278
+ b(h(S), {
279
+ segment: r,
280
+ "track-type": t.track.type || "unknown",
281
+ "accent-color": t.track.color
282
+ }, null, 8, ["segment", "track-type", "accent-color"])
283
+ ], !0) : r.segmentType === "audio" ? i(e.$slots, "segment-audio", {
284
+ key: 3,
285
+ segment: r,
286
+ layout: t
287
+ }, () => [
288
+ b(h(S), {
289
+ segment: r,
290
+ "track-type": t.track.type || "unknown",
291
+ "accent-color": t.track.color
292
+ }, null, 8, ["segment", "track-type", "accent-color"])
293
+ ], !0) : r.segmentType === "effect" ? i(e.$slots, "segment-effect", {
294
+ key: 4,
295
+ segment: r,
296
+ layout: t
297
+ }, () => [
298
+ b(h(S), {
299
+ segment: r,
300
+ "track-type": t.track.type || "unknown",
301
+ "accent-color": t.track.color
302
+ }, null, 8, ["segment", "track-type", "accent-color"])
303
+ ], !0) : r.segmentType === "filter" ? i(e.$slots, "segment-filter", {
304
+ key: 5,
305
+ segment: r,
306
+ layout: t
307
+ }, () => [
308
+ b(h(S), {
309
+ segment: r,
310
+ "track-type": t.track.type || "unknown",
311
+ "accent-color": t.track.color
312
+ }, null, 8, ["segment", "track-type", "accent-color"])
313
+ ], !0) : U("", !0)
314
+ ])
315
+ ], 4)) : U("", !0)
316
+ ], 64))), 128))
317
+ ]),
318
+ _: 2
319
+ }, [
320
+ e.$slots.toolbar ? {
321
+ name: "toolbar",
322
+ fn: z((t) => [
323
+ i(e.$slots, "toolbar", F(L(t)), void 0, !0)
324
+ ]),
325
+ key: "0"
326
+ } : void 0,
327
+ e.$slots.ruler ? {
328
+ name: "ruler",
329
+ fn: z((t) => [
330
+ i(e.$slots, "ruler", F(L(t)), void 0, !0)
331
+ ]),
332
+ key: "1"
333
+ } : void 0,
334
+ e.$slots.playhead ? {
335
+ name: "playhead",
336
+ fn: z((t) => [
337
+ i(e.$slots, "playhead", F(L(t)), void 0, !0)
338
+ ]),
339
+ key: "2"
340
+ } : void 0
341
+ ]), 1032, ["tracks", "duration", "current-time", "zoom", "fps", "snap-step", "selected-segment-id", "disable-interaction"]));
342
+ }
343
+ }), he = /* @__PURE__ */ N(fe, [["__scopeId", "data-v-a04dee74"]]);
344
+ export {
345
+ ae as F,
346
+ S,
347
+ he as V
348
+ };
package/dist/index.d.ts CHANGED
@@ -2,7 +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 { IAudioSegment } from '@video-editor/shared';
7
+ import { IEffectSegment } from '@video-editor/shared';
8
+ import { IFilterSegment } from '@video-editor/shared';
9
+ import { IFramesSegmentUnion } from '@video-editor/shared';
10
+ import { IImageFramesSegment } from '@video-editor/shared';
11
+ import { IStickerSegment } from '@video-editor/shared';
12
+ import { ITextSegment } from '@video-editor/shared';
5
13
  import { ITrackType } from '@video-editor/shared';
14
+ import { IVideoFramesSegment } from '@video-editor/shared';
6
15
  import { IVideoProtocol } from '@video-editor/shared';
7
16
  import { PublicProps } from 'vue';
8
17
  import { SegmentUnion } from '@video-editor/shared';
@@ -78,6 +87,8 @@ contentRef: HTMLDivElement;
78
87
  tracksRef: HTMLDivElement;
79
88
  }, HTMLDivElement>;
80
89
 
90
+ declare const __VLS_component_3: DefineComponent<__VLS_Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_3> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
91
+
81
92
  declare type __VLS_Props = {
82
93
  protocol?: IVideoProtocol | null;
83
94
  currentTime: number;
@@ -105,21 +116,19 @@ declare type __VLS_Props_2 = {
105
116
  fps?: number;
106
117
  };
107
118
 
119
+ declare type __VLS_Props_3 = {
120
+ segment: IFramesSegmentUnion;
121
+ };
122
+
123
+ declare type __VLS_Props_4 = {
124
+ segment: SegmentUnion;
125
+ trackType: string;
126
+ accentColor?: string;
127
+ };
128
+
108
129
  declare function __VLS_template(): {
109
130
  attrs: Partial<{}>;
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>> & {
131
+ slots: {
123
132
  toolbar?(_: {
124
133
  zoom: number;
125
134
  canZoomIn: boolean;
@@ -138,6 +147,84 @@ declare function __VLS_template(): {
138
147
  left: number;
139
148
  currentTime: number;
140
149
  }): any;
150
+ 'segment-frames'?(_: {
151
+ segment: IFramesSegmentUnion;
152
+ layout: {
153
+ left: number;
154
+ top: number;
155
+ segment: TimelineSegment_2;
156
+ track: TimelineTrack;
157
+ trackIndex: number;
158
+ segmentIndex: number;
159
+ width: number;
160
+ isSelected: boolean;
161
+ };
162
+ }): any;
163
+ 'segment-text'?(_: {
164
+ segment: ITextSegment;
165
+ layout: {
166
+ left: number;
167
+ top: number;
168
+ segment: TimelineSegment_2;
169
+ track: TimelineTrack;
170
+ trackIndex: number;
171
+ segmentIndex: number;
172
+ width: number;
173
+ isSelected: boolean;
174
+ };
175
+ }): any;
176
+ 'segment-sticker'?(_: {
177
+ segment: IStickerSegment;
178
+ layout: {
179
+ left: number;
180
+ top: number;
181
+ segment: TimelineSegment_2;
182
+ track: TimelineTrack;
183
+ trackIndex: number;
184
+ segmentIndex: number;
185
+ width: number;
186
+ isSelected: boolean;
187
+ };
188
+ }): any;
189
+ 'segment-audio'?(_: {
190
+ segment: IAudioSegment;
191
+ layout: {
192
+ left: number;
193
+ top: number;
194
+ segment: TimelineSegment_2;
195
+ track: TimelineTrack;
196
+ trackIndex: number;
197
+ segmentIndex: number;
198
+ width: number;
199
+ isSelected: boolean;
200
+ };
201
+ }): any;
202
+ 'segment-effect'?(_: {
203
+ segment: IEffectSegment;
204
+ layout: {
205
+ left: number;
206
+ top: number;
207
+ segment: TimelineSegment_2;
208
+ track: TimelineTrack;
209
+ trackIndex: number;
210
+ segmentIndex: number;
211
+ width: number;
212
+ isSelected: boolean;
213
+ };
214
+ }): any;
215
+ 'segment-filter'?(_: {
216
+ segment: IFilterSegment;
217
+ layout: {
218
+ left: number;
219
+ top: number;
220
+ segment: TimelineSegment_2;
221
+ track: TimelineTrack;
222
+ trackIndex: number;
223
+ segmentIndex: number;
224
+ width: number;
225
+ isSelected: boolean;
226
+ };
227
+ }): any;
141
228
  };
142
229
  refs: {};
143
230
  rootEl: HTMLDivElement;
@@ -201,10 +288,52 @@ declare function __VLS_template_2(): {
201
288
  rootEl: HTMLDivElement;
202
289
  };
203
290
 
291
+ declare function __VLS_template_3(): {
292
+ attrs: Partial<{}>;
293
+ slots: {
294
+ image?(_: {
295
+ style: {
296
+ backgroundImage: string;
297
+ backgroundRepeat: string;
298
+ backgroundSize: string;
299
+ backgroundPosition: string;
300
+ };
301
+ segment: IImageFramesSegment;
302
+ }): any;
303
+ video?(_: {
304
+ segment: IVideoFramesSegment;
305
+ thumbnails: {
306
+ tsMs: number;
307
+ url: string;
308
+ }[];
309
+ }): any;
310
+ loading?(_: {
311
+ segment: IVideoFramesSegment;
312
+ }): any;
313
+ error?(_: {
314
+ segment: IVideoFramesSegment;
315
+ error: string;
316
+ }): any;
317
+ empty?(_: {
318
+ segment: IVideoFramesSegment;
319
+ }): any;
320
+ fallback?(_: {
321
+ segment: I3DFramesSegment;
322
+ }): any;
323
+ overlay?(_: {
324
+ segment: IFramesSegmentUnion;
325
+ }): any;
326
+ };
327
+ refs: {};
328
+ rootEl: HTMLDivElement;
329
+ };
330
+
204
331
  declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
205
332
 
206
333
  declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
207
334
 
335
+ declare type __VLS_TemplateResult_3 = ReturnType<typeof __VLS_template_3>;
336
+
208
337
  declare type __VLS_WithTemplateSlots<T, S> = T & {
209
338
  new (): {
210
339
  $slots: S;
@@ -217,6 +346,12 @@ declare type __VLS_WithTemplateSlots_2<T, S> = T & {
217
346
  };
218
347
  };
219
348
 
349
+ declare type __VLS_WithTemplateSlots_3<T, S> = T & {
350
+ new (): {
351
+ $slots: S;
352
+ };
353
+ };
354
+
220
355
  declare const _default: {
221
356
  install(app: App): void;
222
357
  };
@@ -224,6 +359,12 @@ export default _default;
224
359
 
225
360
  declare function formatTime(ms: number): string;
226
361
 
362
+ export declare const FramesSegment: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
363
+
364
+ export declare const SegmentBase: DefineComponent<__VLS_Props_4, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_4> & Readonly<{}>, {
365
+ accentColor: string;
366
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
367
+
227
368
  export declare interface SegmentDragPayload {
228
369
  segment: TimelineSegment;
229
370
  track: TimelineTrack;
package/dist/index.js CHANGED
@@ -1,4 +1,5 @@
1
- import i from "./VideoEditorTimeline.js";
1
+ import { V as i } from "./index-CsdNgHvd.js";
2
+ import { F as s, S as d } from "./index-CsdNgHvd.js";
2
3
  import { V as o } from "./index-t1DKjcCO.js";
3
4
  const t = {
4
5
  install(e) {
@@ -6,6 +7,8 @@ const t = {
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-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}
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-a04dee74]){--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-a04dee74]){--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.12",
4
+ "version": "0.0.1-beta.14",
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.12",
24
- "@video-editor/shared": "0.0.1-beta.12"
23
+ "@video-editor/protocol": "0.0.1-beta.14",
24
+ "@video-editor/shared": "0.0.1-beta.14"
25
25
  },
26
26
  "scripts": {
27
27
  "build": "vite build",