@video-editor/ui 0.0.1-beta.26 → 0.0.1-beta.28
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/README.md +109 -1
- package/dist/VideoEditorTimeline.js +1 -1
- package/dist/index-DH46sG3_.js +716 -0
- package/dist/index.d.ts +58 -3
- package/dist/index.js +5 -4
- package/dist/ui.css +1 -1
- package/package.json +3 -3
- package/dist/index-CV2smFQN.js +0 -403
package/README.md
CHANGED
|
@@ -1,3 +1,111 @@
|
|
|
1
1
|
# @video-editor/ui
|
|
2
2
|
|
|
3
|
-
video editor
|
|
3
|
+
Vue 3 timeline components for video editor with drag-and-drop support.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- 📹 **VideoTimeline** - Basic timeline with playhead and zoom
|
|
8
|
+
- ✂️ **VideoEditorTimeline** - Full-featured editor timeline
|
|
9
|
+
- 🎬 **FramesSegment** - Video/image segment with thumbnails
|
|
10
|
+
- 🎵 **AudioSegment** - Audio segment with waveform visualization
|
|
11
|
+
- 🎨 **Rich Slot System** - Extensive customization via Vue slots
|
|
12
|
+
- 📱 **Responsive** - Adapts to container size changes
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
pnpm add @video-editor/ui
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Quick Start
|
|
21
|
+
|
|
22
|
+
```vue
|
|
23
|
+
<script setup lang="ts">
|
|
24
|
+
import { VideoEditorTimeline } from '@video-editor/ui'
|
|
25
|
+
import type { IVideoProtocol } from '@video-editor/shared'
|
|
26
|
+
|
|
27
|
+
const protocol: IVideoProtocol = {
|
|
28
|
+
// Your protocol data
|
|
29
|
+
}
|
|
30
|
+
</script>
|
|
31
|
+
|
|
32
|
+
<template>
|
|
33
|
+
<VideoEditorTimeline :protocol="protocol" />
|
|
34
|
+
</template>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Components
|
|
38
|
+
|
|
39
|
+
### VideoEditorTimeline
|
|
40
|
+
|
|
41
|
+
Full-featured timeline component with segment rendering, drag-and-drop, and zoom controls.
|
|
42
|
+
|
|
43
|
+
### VideoTimeline
|
|
44
|
+
|
|
45
|
+
Simplified timeline component for basic playback and visualization.
|
|
46
|
+
|
|
47
|
+
### Segment Components
|
|
48
|
+
|
|
49
|
+
All segment components support extensive customization via slots:
|
|
50
|
+
|
|
51
|
+
#### FramesSegment
|
|
52
|
+
|
|
53
|
+
Slots: `image`, `video`, `loading`, `error`, `empty`, `fallback`, `overlay`
|
|
54
|
+
|
|
55
|
+
#### AudioSegment
|
|
56
|
+
|
|
57
|
+
Slots: `waveform`, `loading`, `error`, `empty`, `overlay`
|
|
58
|
+
|
|
59
|
+
See [AudioSegment Slots Documentation](./docs/AudioSegment-slots.md) for detailed examples.
|
|
60
|
+
|
|
61
|
+
## Customization Examples
|
|
62
|
+
|
|
63
|
+
### Custom Audio Waveform
|
|
64
|
+
|
|
65
|
+
```vue
|
|
66
|
+
<AudioSegment :segment="audioSegment">
|
|
67
|
+
<template #waveform="{ peaks, coveragePercent }">
|
|
68
|
+
<svg :style="{ width: `${coveragePercent}%` }">
|
|
69
|
+
<!-- Custom SVG rendering -->
|
|
70
|
+
</svg>
|
|
71
|
+
</template>
|
|
72
|
+
|
|
73
|
+
<template #overlay="{ segment }">
|
|
74
|
+
<span class="badge">{{ segment.extra?.label }}</span>
|
|
75
|
+
</template>
|
|
76
|
+
</AudioSegment>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### Custom Video Segment
|
|
80
|
+
|
|
81
|
+
```vue
|
|
82
|
+
<FramesSegment :segment="videoSegment">
|
|
83
|
+
<template #video="{ thumbnails }">
|
|
84
|
+
<!-- Custom thumbnail display -->
|
|
85
|
+
</template>
|
|
86
|
+
|
|
87
|
+
<template #loading>
|
|
88
|
+
<CustomSpinner />
|
|
89
|
+
</template>
|
|
90
|
+
</FramesSegment>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
## Styling
|
|
94
|
+
|
|
95
|
+
The UI package uses CSS variables for theming:
|
|
96
|
+
|
|
97
|
+
```css
|
|
98
|
+
:root {
|
|
99
|
+
--ve-segment-accent: #0ea5e9; /* Segment accent color */
|
|
100
|
+
}
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## Documentation
|
|
104
|
+
|
|
105
|
+
- [AudioSegment Slots](./docs/AudioSegment-slots.md) - Complete slot API reference
|
|
106
|
+
|
|
107
|
+
## Dependencies
|
|
108
|
+
|
|
109
|
+
- Vue 3.x
|
|
110
|
+
- @video-editor/shared (types)
|
|
111
|
+
- @video-editor/protocol (waveform extraction)
|