@video-editor/ui 0.0.1-beta.10

package/dist/index.d.ts

@@ -0,0 +1,291 @@
+import { App } from 'vue';
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { ITrackType } from '@video-editor/shared';
+import { IVideoProtocol } from '@video-editor/shared';
+import { PublicProps } from 'vue';
+import { SegmentUnion } from '@video-editor/shared';
+import { TimelineSegment as TimelineSegment_2 } from './types';
+import { TimelineTick as TimelineTick_2 } from '..';
+import { TrackUnion } from '@video-editor/shared';
+
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"update:currentTime": (value: number) => any;
+"update:zoom": (value: number) => any;
+segmentClick: (payload: {
+segment: SegmentUnion;
+track: TrackUnion;
+}) => any;
+segmentDragEnd: (payload: SegmentDragPayload) => any;
+segmentResizeEnd: (payload: SegmentResizePayload) => any;
+"update:selectedSegmentId": (value: string | null) => any;
+}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
+"onUpdate:currentTime"?: ((value: number) => any) | undefined;
+"onUpdate:zoom"?: ((value: number) => any) | undefined;
+onSegmentClick?: ((payload: {
+segment: SegmentUnion;
+track: TrackUnion;
+}) => any) | undefined;
+onSegmentDragEnd?: ((payload: SegmentDragPayload) => any) | undefined;
+onSegmentResizeEnd?: ((payload: SegmentResizePayload) => any) | undefined;
+"onUpdate:selectedSegmentId"?: ((value: string | null) => any) | undefined;
+}>, {
+disableInteraction: boolean;
+snapStep: number;
+selectedSegmentId: string | null;
+protocol: IVideoProtocol | null;
+trackTypes: ITrackType[];
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+declare const __VLS_component_2: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"update:currentTime": (value: number) => any;
+"update:zoom": (value: number) => any;
+segmentClick: (layout: SegmentLayout, event: MouseEvent) => any;
+segmentDragStart: (payload: SegmentDragPayload) => any;
+segmentDrag: (payload: SegmentDragPayload) => any;
+segmentDragEnd: (payload: SegmentDragPayload) => any;
+segmentResizeStart: (payload: SegmentResizePayload) => any;
+segmentResize: (payload: SegmentResizePayload) => any;
+segmentResizeEnd: (payload: SegmentResizePayload) => any;
+backgroundClick: (event: MouseEvent) => any;
+}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{
+"onUpdate:currentTime"?: ((value: number) => any) | undefined;
+"onUpdate:zoom"?: ((value: number) => any) | undefined;
+onSegmentClick?: ((layout: SegmentLayout, event: MouseEvent) => any) | undefined;
+onSegmentDragStart?: ((payload: SegmentDragPayload) => any) | undefined;
+onSegmentDrag?: ((payload: SegmentDragPayload) => any) | undefined;
+onSegmentDragEnd?: ((payload: SegmentDragPayload) => any) | undefined;
+onSegmentResizeStart?: ((payload: SegmentResizePayload) => any) | undefined;
+onSegmentResize?: ((payload: SegmentResizePayload) => any) | undefined;
+onSegmentResizeEnd?: ((payload: SegmentResizePayload) => any) | undefined;
+onBackgroundClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+minZoom: number;
+maxZoom: number;
+disableInteraction: boolean;
+snapStep: number;
+trackHeight: number;
+trackGap: number;
+rulerHeight: number;
+minSegmentDuration: number;
+selectedSegmentId: string | null;
+fps: number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+viewportRef: HTMLDivElement;
+contentRef: HTMLDivElement;
+tracksRef: HTMLDivElement;
+}, HTMLDivElement>;
+
+declare type __VLS_Props = {
+    protocol?: IVideoProtocol | null;
+    currentTime: number;
+    zoom?: number;
+    snapStep?: number;
+    selectedSegmentId?: string | null;
+    trackTypes?: ITrackType[];
+    disableInteraction?: boolean;
+};
+
+declare type __VLS_Props_2 = {
+    tracks: TimelineTrack[];
+    currentTime: number;
+    duration?: number;
+    zoom?: number;
+    minZoom?: number;
+    maxZoom?: number;
+    snapStep?: number;
+    trackHeight?: number;
+    trackGap?: number;
+    rulerHeight?: number;
+    minSegmentDuration?: number;
+    selectedSegmentId?: string | null;
+    disableInteraction?: boolean;
+    fps?: number;
+};
+
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        toolbar?(_: {
+            zoom: number;
+            canZoomIn: boolean;
+            canZoomOut: boolean;
+            zoomIn: () => void;
+            zoomOut: () => void;
+            currentTime: number;
+            duration: number;
+            formatTime: (ms: number) => string;
+        }): any;
+        ruler?(_: {
+            ticks: TimelineTick_2[];
+            pixelsPerMs: number;
+        }): any;
+        playhead?(_: {
+            left: number;
+            currentTime: number;
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+
+declare function __VLS_template_2(): {
+    attrs: Partial<{}>;
+    slots: {
+        toolbar?(_: {
+            zoom: number;
+            canZoomIn: boolean;
+            canZoomOut: boolean;
+            zoomIn: typeof zoomIn;
+            zoomOut: typeof zoomOut;
+            currentTime: number;
+            duration: number;
+            formatTime: typeof formatTime;
+        }): any;
+        ruler?(_: {
+            ticks: TimelineTick[];
+            pixelsPerMs: number;
+        }): any;
+        playhead?(_: {
+            left: number;
+            currentTime: number;
+        }): any;
+        track?(_: {
+            track: TimelineTrack;
+            index: number;
+            segments: SegmentLayout[];
+            pixelsPerMs: number;
+            height: number;
+        }): any;
+        segment?(_: {
+            layout: SegmentLayout;
+            segment: TimelineSegment_2;
+            track: TimelineTrack;
+            isSelected: boolean;
+        }): any;
+        segment?(_: {
+            layout: {
+                left: number;
+                top: number;
+                segment: TimelineSegment_2;
+                track: TimelineTrack;
+                trackIndex: number;
+                segmentIndex: number;
+                width: number;
+                isSelected: boolean;
+            };
+            segment: TimelineSegment_2;
+            track: TimelineTrack;
+            isSelected: boolean;
+        }): any;
+    };
+    refs: {
+        viewportRef: HTMLDivElement;
+        contentRef: HTMLDivElement;
+        tracksRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+
+declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+
+declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
+
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_2<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;
+
+declare function formatTime(ms: number): string;
+
+export declare interface SegmentDragPayload {
+    segment: TimelineSegment;
+    track: TimelineTrack;
+    trackIndex: number;
+    segmentIndex: number;
+    startTime: number;
+    endTime: number;
+    targetTrackIndex: number;
+    targetTrackId: string;
+    isNewTrack: boolean;
+    newTrackInsertIndex?: number;
+    visualTrackIndex: number;
+    isValidTarget: boolean;
+    mouseDeltaY: number;
+}
+
+export declare interface SegmentLayout {
+    segment: TimelineSegment;
+    track: TimelineTrack;
+    trackIndex: number;
+    segmentIndex: number;
+    left: number;
+    width: number;
+    isSelected: boolean;
+}
+
+export declare interface SegmentResizePayload {
+    segment: TimelineSegment;
+    track: TimelineTrack;
+    trackIndex: number;
+    segmentIndex: number;
+    startTime: number;
+    endTime: number;
+    edge: 'start' | 'end';
+}
+
+export declare interface TickLevel {
+    mainMs: number;
+    minorMs: number;
+    mode: 'time' | 'frame';
+    label: 'time' | 'frame';
+}
+
+export declare interface TimelineSegment {
+    id: string;
+    start: number;
+    end: number;
+    type?: string;
+    color?: string;
+    payload?: unknown;
+}
+
+export declare interface TimelineTick {
+    position: number;
+    timeMs: number;
+    isMajor: boolean;
+    label?: string;
+}
+
+export declare interface TimelineTrack {
+    id: string;
+    label?: string;
+    type?: string;
+    color?: string;
+    isMain?: boolean;
+    payload?: unknown;
+    segments: TimelineSegment[];
+}
+
+export declare const VideoEditorTimeline: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+
+export declare const VideoTimeline: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
+
+declare function zoomIn(): void;
+
+declare function zoomOut(): void;
+
+export { }

package/dist/index.js

@@ -0,0 +1,12 @@
+import i from "./VideoEditorTimeline.js";
+import { V as o } from "./index-CIZtI1B_.js";
+const t = {
+  install(e) {
+    e.component(o.name || "VeVideoTimeline", o), e.component(i.name || "VeVideoEditorTimeline", i);
+  }
+};
+export {
+  i as VideoEditorTimeline,
+  o as VideoTimeline,
+  t as default
+};

package/dist/ui.css

@@ -0,0 +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-ed0c7272]){--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-ed0c7272]){--at-apply: relative overflow-auto w-full flex-1 bg-white}:where(.ve-timeline .ve-timeline__content[data-v-ed0c7272]){--at-apply: relative min-h-full min-w-full}:where(.ve-timeline .ve-timeline__tracks[data-v-ed0c7272]){--at-apply: relative z-1 pb-3 flex flex-col gap-2px flex-1}:where(.ve-timeline .ve-track[data-v-ed0c7272]){--at-apply: relative bg-[#f8fafc] overflow-hidden}:where(.ve-timeline .ve-track--main[data-v-ed0c7272]){background-color:#f4f4f6}:where(.ve-timeline .ve-track__body[data-v-ed0c7272]){--at-apply: relative h-full}:where(.ve-timeline .ve-segment[data-v-ed0c7272]){--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-ed0c7272]){--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-ed0c7272]){--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-ed0c7272]){--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-ed0c7272]){--at-apply: flex flex-col gap-1}:where(.ve-timeline .ve-segment__title[data-v-ed0c7272]){--at-apply: text-[12px] font-bold capitalize}:where(.ve-timeline .ve-segment__time[data-v-ed0c7272]){--at-apply: text-[11px] text-[rgba(15,23,42,.8)] font-mono}:where(.ve-timeline .ve-segment__selection[data-v-ed0c7272]){--at-apply: absolute bottom-0 left-0 right-0 top-0 pointer-events-none z-10}:where(.ve-timeline .ve-segment__handle[data-v-ed0c7272]){--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-ed0c7272]){--at-apply: left-0 top-0 translate-x--50% rounded-l-1}:where(.ve-timeline .ve-segment__handle--right[data-v-ed0c7272]){--at-apply: right-0 top-0 translate-x-50% rounded-r-1}:where(.ve-timeline .ve-segment__handle-dots[data-v-ed0c7272]){--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-ed0c7272]){--at-apply: rounded-full bg-white;width:1px;height:1px}:where(.ve-timeline .ve-segment--placeholder[data-v-ed0c7272]){--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-ed0c7272]){--at-apply: absolute inset-0 rounded-[2px];opacity:.2}:where(.ve-timeline .ve-snap-guide[data-v-ed0c7272]){--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-ed0c7272]){--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

@@ -0,0 +1,31 @@
+{
+  "name": "@video-editor/ui",
+  "type": "module",
+  "version": "0.0.1-beta.10",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./dist/ui.css": "./dist/ui.css",
+    "./*": "./*"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vue": "^3.5.25"
+  },
+  "dependencies": {
+    "@video-editor/protocol": "0.0.1-beta.10",
+    "@video-editor/shared": "0.0.1-beta.10"
+  },
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "vue-tsc --noEmit",
+    "preview": "vite preview"
+  }
+}