@elah/timeline 0.1.0 → 0.1.1
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 +81 -0
- package/package.json +28 -3
package/README.md
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
# @elah/timeline
|
|
2
|
+
|
|
3
|
+
React timeline UI for the Elah video engine. Renders tracks, clips, ruler, and playhead — and wires up drag, trim, scrub, zoom, and drop gestures into `@elah/core` engine calls.
|
|
4
|
+
|
|
5
|
+
A consumer of `@elah/core`. Owns no project state — all state lives in the core stores.
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/@elah/timeline)
|
|
8
|
+
[](https://github.com/elahlabs/elah/blob/main/LICENSE)
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## Install
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install @elah/timeline @elah/core
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
Peer dependencies: `react`, `react-dom` >= 18.
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## Components
|
|
23
|
+
|
|
24
|
+
| Component | Description |
|
|
25
|
+
|---|---|
|
|
26
|
+
| `Timeline` | Root surface — tracks, ruler, playhead, gesture wiring |
|
|
27
|
+
| `Ruler` | Time ruler — click or drag to scrub |
|
|
28
|
+
| `TrackRow` | Single track lane with clip blocks and drop target |
|
|
29
|
+
| `ClipBlock` | Individual clip — drag to move, edge-drag to trim |
|
|
30
|
+
| `Playhead` | Playhead needle driven by `usePlaybackStore` |
|
|
31
|
+
|
|
32
|
+
---
|
|
33
|
+
|
|
34
|
+
## Quick start
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
import { Timeline } from '@elah/timeline'
|
|
38
|
+
import { TimelineEngine } from '@elah/core'
|
|
39
|
+
|
|
40
|
+
const engine = new TimelineEngine({ fps: 30, stage: { width: 1920, height: 1080 } })
|
|
41
|
+
|
|
42
|
+
function App() {
|
|
43
|
+
return <Timeline engine={engine} style={{ height: 300 }} />
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
## Hooks
|
|
50
|
+
|
|
51
|
+
```ts
|
|
52
|
+
import { useTracks, usePlayback, useSelection } from '@elah/timeline'
|
|
53
|
+
|
|
54
|
+
const tracks = useTracks(s => s.tracks)
|
|
55
|
+
const { currentFrame, isPlaying } = usePlayback(s => s)
|
|
56
|
+
const { selectedClipIds } = useSelection(s => s)
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## Drag & drop
|
|
62
|
+
|
|
63
|
+
Attach a media drop target to any track lane:
|
|
64
|
+
|
|
65
|
+
```ts
|
|
66
|
+
import { useTimelineDrop } from '@elah/timeline'
|
|
67
|
+
|
|
68
|
+
const { ref } = useTimelineDrop({ trackId: 'track-1', engine })
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
Dragging a media asset from the library onto the lane resolves drop position to `startFrame` (respects zoom and snap).
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
## Links
|
|
76
|
+
|
|
77
|
+
- [Website](https://www.elah.dev)
|
|
78
|
+
- [GitHub](https://github.com/elahlabs/elah)
|
|
79
|
+
- [Full SDK — @elah/editor](https://www.npmjs.com/package/@elah/editor)
|
|
80
|
+
- [License](https://github.com/elahlabs/elah/blob/main/LICENSE)
|
|
81
|
+
- [Commercial licensing](mailto:contact@elah.dev)
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elah/timeline",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.1.1",
|
|
4
|
+
"description": "React timeline UI for the Elah video engine — tracks, clips, ruler, playhead, drag and trim gestures",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
@@ -12,7 +12,9 @@
|
|
|
12
12
|
}
|
|
13
13
|
},
|
|
14
14
|
"files": [
|
|
15
|
-
"dist"
|
|
15
|
+
"dist",
|
|
16
|
+
"README.md",
|
|
17
|
+
"LICENSE"
|
|
16
18
|
],
|
|
17
19
|
"scripts": {
|
|
18
20
|
"typecheck": "tsc --noEmit",
|
|
@@ -20,6 +22,29 @@
|
|
|
20
22
|
"test:watch": "vitest",
|
|
21
23
|
"build": "tsc --noEmit && tsc -p tsconfig.build.json"
|
|
22
24
|
},
|
|
25
|
+
"keywords": [
|
|
26
|
+
"video-editor",
|
|
27
|
+
"timeline",
|
|
28
|
+
"react",
|
|
29
|
+
"timeline-component",
|
|
30
|
+
"video-timeline",
|
|
31
|
+
"clips",
|
|
32
|
+
"tracks",
|
|
33
|
+
"drag-drop",
|
|
34
|
+
"trim",
|
|
35
|
+
"scrub",
|
|
36
|
+
"typescript",
|
|
37
|
+
"browser"
|
|
38
|
+
],
|
|
39
|
+
"homepage": "https://www.elah.dev",
|
|
40
|
+
"repository": {
|
|
41
|
+
"type": "git",
|
|
42
|
+
"url": "https://github.com/elahlabs/elah.git"
|
|
43
|
+
},
|
|
44
|
+
"bugs": {
|
|
45
|
+
"url": "https://github.com/elahlabs/elah/issues"
|
|
46
|
+
},
|
|
47
|
+
"license": "SEE LICENSE IN LICENSE",
|
|
23
48
|
"peerDependencies": {
|
|
24
49
|
"react": ">=18.0.0",
|
|
25
50
|
"react-dom": ">=18.0.0"
|