@elah/editor 0.4.0 → 0.4.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 +8 -6
- package/dist/index.d.ts +22 -7
- package/dist/index.js +11 -3
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
The full Elah video editor SDK for React. Combines the core engine, timeline UI, WebGL2 renderer, media library, and export pipeline into a single package.
|
|
4
4
|
|
|
5
|
-
Ships `EditorProvider`, `Preview` (WebGL2 canvas + interactive transform overlays), `Timeline`, `AssetPanel`, `SourcePanel`, and `ElementsPanel`, and re-exports the
|
|
5
|
+
Ships `EditorProvider`, `Preview` (WebGL2 canvas + interactive transform overlays), `Timeline`, `AssetPanel`, `SourcePanel`, and `ElementsPanel`, and re-exports the public `@elah/core`, `@elah/react`, and `@elah/timeline` API — so most apps only ever import from `@elah/editor`. (Renderer and debug internals are the exception; import those from `@elah/core` directly.) Supports video, image, text, **shape**, and **freehand** clips, **multi-track audio**, and MP4 export.
|
|
6
6
|
|
|
7
7
|
[](https://www.npmjs.com/package/@elah/editor)
|
|
8
8
|
[](../../BUNDLE_STRATEGY.md)
|
|
@@ -86,14 +86,16 @@ function App() {
|
|
|
86
86
|
## Import media
|
|
87
87
|
|
|
88
88
|
```ts
|
|
89
|
-
import { importFiles, importUrl, useMediaLibrary } from '@elah/editor'
|
|
89
|
+
import { importFiles, importUrl, importBlob, useMediaLibrary } from '@elah/editor'
|
|
90
90
|
|
|
91
|
-
await importFiles(Array.from(fileList))
|
|
92
|
-
await importUrl('https://example.com/clip.mp4')
|
|
91
|
+
await importFiles(Array.from(fileList)) // local files
|
|
92
|
+
await importUrl('https://example.com/clip.mp4') // remote URL
|
|
93
|
+
await importBlob(recordedBlob, { name: 'take-1.webm' })
|
|
93
94
|
|
|
94
95
|
// Subscribe in React — useMediaLibrary() takes no arguments and returns
|
|
95
|
-
// { assets, getAsset, removeAsset, updateAsset
|
|
96
|
-
|
|
96
|
+
// { assets, getAsset, removeAsset, updateAsset, importFiles, importUrl, importBlob }
|
|
97
|
+
// with assets in insertion order. `useAssets` is an alias for the same hook.
|
|
98
|
+
const { assets, importFiles: addFiles } = useMediaLibrary()
|
|
97
99
|
```
|
|
98
100
|
|
|
99
101
|
### Programmatic insertion (no drag)
|
package/dist/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ export { TimelineEngine } from '@elah/core';
|
|
|
3
3
|
export { PlaybackEngine } from '@elah/core';
|
|
4
4
|
export type { PlaybackSnapshot, PlaybackEngineConfig } from '@elah/core';
|
|
5
5
|
export { resolveTimeline } from '@elah/core';
|
|
6
|
-
export type { Scene, ActiveTransition, ActiveVideoClip, ActiveAudioClip, ActiveTextClip, ActiveImageClip, ActiveClipBase, } from '@elah/core';
|
|
6
|
+
export type { Scene, ActiveTransition, ActiveVideoClip, ActiveAudioClip, ActiveTextClip, ActiveImageClip, ActiveShapeClip, ActiveFreehandClip, ActiveClipBase, } from '@elah/core';
|
|
7
7
|
export type { Renderer } from '@elah/core';
|
|
8
8
|
export { GpuRenderer } from '@elah/core';
|
|
9
9
|
export type { RendererOptions } from '@elah/core';
|
|
@@ -11,45 +11,60 @@ export { GpuDebugCounters } from '@elah/core';
|
|
|
11
11
|
export type { CounterSnapshot } from '@elah/core';
|
|
12
12
|
export { createDefaultDemuxerFactory, createMediabunnyBackend, isMediabunnyCompatible } from '@elah/core';
|
|
13
13
|
export type { MediabunnyModule, CreateMediabunnyBackendOpts } from '@elah/core';
|
|
14
|
-
export type { DemuxerBackend, DemuxerFactory } from '@elah/core';
|
|
14
|
+
export type { DemuxerBackend, DemuxerFactory, MediabunnyDemuxer } from '@elah/core';
|
|
15
15
|
export type { VideoFrameProvider, VideoFrameProviderDeps } from '@elah/core';
|
|
16
16
|
export { createVideoFrameProvider, MockVideoFrameProvider, SyntheticVideoFrameProvider } from '@elah/core';
|
|
17
17
|
export { AudioPlaybackController } from '@elah/core';
|
|
18
18
|
export type { AudioPlaybackControllerOptions } from '@elah/core';
|
|
19
19
|
export { defaultAudioResolver } from '@elah/core';
|
|
20
20
|
export type { AudioResolver } from '@elah/core';
|
|
21
|
-
export {
|
|
22
|
-
export {
|
|
23
|
-
export
|
|
21
|
+
export { warmImageSrc, preloadProjectImages } from '@elah/core';
|
|
22
|
+
export type { ImageLoader, LoadedImage } from '@elah/core';
|
|
23
|
+
export { MEDIA_DRAG_MIME, mediaDragKindMime, importFiles, importUrl, importBlob } from '@elah/core';
|
|
24
|
+
export { useMediaLibrary, useAssets, useMediaLibraryStore } from '@elah/react';
|
|
25
|
+
export type { MediaAsset, MediaKind, DragMediaPayload, ImportFilesOptions, ImportFilesResult, ImportUrlOptions, ImportBlobOptions, SkippedImport, MediaLibraryState, MediaLibraryActions, } from '@elah/core';
|
|
26
|
+
export type { UseMediaLibraryApi } from '@elah/react';
|
|
24
27
|
export { useTracksStore } from '@elah/react';
|
|
25
28
|
export { usePlaybackStore } from '@elah/react';
|
|
26
29
|
export { useSelectionStore } from '@elah/react';
|
|
30
|
+
export { useTransitionsStore } from '@elah/react';
|
|
31
|
+
export type { BoundStoreHook } from '@elah/react';
|
|
32
|
+
export { tracksStore, playbackStore, selectionStore, transitionsStore, mediaLibraryStore } from '@elah/core';
|
|
33
|
+
export type { TracksState, TracksActions, PlaybackState, PlaybackActions, SelectionState, SelectionActions, TransitionsState, TransitionsActions, } from '@elah/core';
|
|
27
34
|
export { createVideoClip } from '@elah/core';
|
|
28
35
|
export { createAudioClip } from '@elah/core';
|
|
29
36
|
export { createTextClip } from '@elah/core';
|
|
30
37
|
export { createImageClip } from '@elah/core';
|
|
38
|
+
export { createShapeClip } from '@elah/core';
|
|
39
|
+
export { createFreehandClip } from '@elah/core';
|
|
40
|
+
export type { CreateClipOptions, CreateShapeClipOptions, CreateFreehandClipOptions, ShapeClipMetadata, FreehandClipMetadata, } from '@elah/core';
|
|
31
41
|
export { splitClipAtPlayhead } from '@elah/core';
|
|
32
42
|
export type { SplitAtPlayheadData } from '@elah/core';
|
|
33
43
|
export type { ActionResult, ActionFailureReason } from '@elah/core';
|
|
34
44
|
export { framesToTimecode, secondsToFrames, framesToSeconds, getTotalFrames } from '@elah/core';
|
|
35
45
|
export { generateId } from '@elah/core';
|
|
36
46
|
export { transformFromCoverRect } from '@elah/core';
|
|
47
|
+
export { snapFrame, buildSnapPoints, resolveOverlapEdgeSnap, clipsOverlap, DEFAULT_OVERLAP_TOLERANCE } from '@elah/core';
|
|
48
|
+
export { serializeProject, deserializeProject } from '@elah/core';
|
|
37
49
|
export { exportVideo } from '@elah/core';
|
|
38
50
|
export { lazyExportVideo } from '@elah/core';
|
|
39
51
|
export type { ExportOptions, ExportProgress, ExportVideoCodec, ExportAudioCodec } from '@elah/core';
|
|
40
52
|
export { Timeline } from '@elah/timeline';
|
|
41
|
-
export type { TimelineProps, TimelineRef } from '@elah/timeline';
|
|
53
|
+
export type { TimelineProps, TimelineRef, TimelineClassNames } from '@elah/timeline';
|
|
54
|
+
export { cn } from '@elah/timeline';
|
|
42
55
|
export { useTimeline } from '@elah/timeline';
|
|
43
56
|
export { useTracks } from '@elah/timeline';
|
|
44
57
|
export { usePlayback } from '@elah/timeline';
|
|
45
58
|
export { useSelection } from '@elah/timeline';
|
|
46
59
|
export { useTimelineDrop } from '@elah/timeline';
|
|
60
|
+
export type { TimelineDropState } from '@elah/timeline';
|
|
47
61
|
export { insertMediaAsset, insertElement } from '@elah/timeline';
|
|
48
62
|
export { ELEMENT_DRAG_MIME } from '@elah/timeline';
|
|
49
63
|
export type { DragElementPayload, ElementKind, ShapeVariant, InsertAssetOptions, InsertAssetResult, InsertAssetFailureReason, InsertedKind, } from '@elah/timeline';
|
|
50
64
|
export { EditorProvider } from './editor/EditorProvider';
|
|
51
65
|
export type { EditorProviderProps } from './editor/EditorProvider';
|
|
52
|
-
export { useEditor, useTimelineEngine, usePlaybackEngine } from '@elah/react';
|
|
66
|
+
export { EditorContext, useEditor, useTimelineEngine, usePlaybackEngine } from '@elah/react';
|
|
67
|
+
export type { EditorContextValue } from '@elah/react';
|
|
53
68
|
export { useAudioMixer, useMasterVolume, useTrackLevels } from '@elah/react';
|
|
54
69
|
export type { AudioMixerApi, MasterVolumeApi, TrackLevel } from '@elah/react';
|
|
55
70
|
export { useResolvedScene } from './editor/useResolvedScene';
|
package/dist/index.js
CHANGED
|
@@ -7,22 +7,30 @@ export { createDefaultDemuxerFactory, createMediabunnyBackend, isMediabunnyCompa
|
|
|
7
7
|
export { createVideoFrameProvider, MockVideoFrameProvider, SyntheticVideoFrameProvider } from '@elah/core';
|
|
8
8
|
export { AudioPlaybackController } from '@elah/core';
|
|
9
9
|
export { defaultAudioResolver } from '@elah/core';
|
|
10
|
-
export {
|
|
11
|
-
export {
|
|
10
|
+
export { warmImageSrc, preloadProjectImages } from '@elah/core';
|
|
11
|
+
export { MEDIA_DRAG_MIME, mediaDragKindMime, importFiles, importUrl, importBlob } from '@elah/core';
|
|
12
|
+
export { useMediaLibrary, useAssets, useMediaLibraryStore } from '@elah/react';
|
|
12
13
|
export { useTracksStore } from '@elah/react';
|
|
13
14
|
export { usePlaybackStore } from '@elah/react';
|
|
14
15
|
export { useSelectionStore } from '@elah/react';
|
|
16
|
+
export { useTransitionsStore } from '@elah/react';
|
|
17
|
+
export { tracksStore, playbackStore, selectionStore, transitionsStore, mediaLibraryStore } from '@elah/core';
|
|
15
18
|
export { createVideoClip } from '@elah/core';
|
|
16
19
|
export { createAudioClip } from '@elah/core';
|
|
17
20
|
export { createTextClip } from '@elah/core';
|
|
18
21
|
export { createImageClip } from '@elah/core';
|
|
22
|
+
export { createShapeClip } from '@elah/core';
|
|
23
|
+
export { createFreehandClip } from '@elah/core';
|
|
19
24
|
export { splitClipAtPlayhead } from '@elah/core';
|
|
20
25
|
export { framesToTimecode, secondsToFrames, framesToSeconds, getTotalFrames } from '@elah/core';
|
|
21
26
|
export { generateId } from '@elah/core';
|
|
22
27
|
export { transformFromCoverRect } from '@elah/core';
|
|
28
|
+
export { snapFrame, buildSnapPoints, resolveOverlapEdgeSnap, clipsOverlap, DEFAULT_OVERLAP_TOLERANCE } from '@elah/core';
|
|
29
|
+
export { serializeProject, deserializeProject } from '@elah/core';
|
|
23
30
|
export { exportVideo } from '@elah/core';
|
|
24
31
|
export { lazyExportVideo } from '@elah/core';
|
|
25
32
|
export { Timeline } from '@elah/timeline';
|
|
33
|
+
export { cn } from '@elah/timeline';
|
|
26
34
|
export { useTimeline } from '@elah/timeline';
|
|
27
35
|
export { useTracks } from '@elah/timeline';
|
|
28
36
|
export { usePlayback } from '@elah/timeline';
|
|
@@ -31,7 +39,7 @@ export { useTimelineDrop } from '@elah/timeline';
|
|
|
31
39
|
export { insertMediaAsset, insertElement } from '@elah/timeline';
|
|
32
40
|
export { ELEMENT_DRAG_MIME } from '@elah/timeline';
|
|
33
41
|
export { EditorProvider } from './editor/EditorProvider';
|
|
34
|
-
export { useEditor, useTimelineEngine, usePlaybackEngine } from '@elah/react';
|
|
42
|
+
export { EditorContext, useEditor, useTimelineEngine, usePlaybackEngine } from '@elah/react';
|
|
35
43
|
export { useAudioMixer, useMasterVolume, useTrackLevels } from '@elah/react';
|
|
36
44
|
export { useResolvedScene } from './editor/useResolvedScene';
|
|
37
45
|
export { AssetPanel } from './editor/AssetPanel';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elah/editor",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.1",
|
|
4
4
|
"description": "Full React video editor SDK — timeline UI, WebGL2 preview, media library, drag and drop, and MP4 export",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -59,9 +59,9 @@
|
|
|
59
59
|
"lucide-react": ">=0.400.0"
|
|
60
60
|
},
|
|
61
61
|
"dependencies": {
|
|
62
|
-
"@elah/core": "^0.4.
|
|
63
|
-
"@elah/react": "^0.4.
|
|
64
|
-
"@elah/timeline": "^0.4.
|
|
62
|
+
"@elah/core": "^0.4.1",
|
|
63
|
+
"@elah/react": "^0.4.1",
|
|
64
|
+
"@elah/timeline": "^0.4.1",
|
|
65
65
|
"immer": "^10.1.1",
|
|
66
66
|
"zustand": "^5.0.3"
|
|
67
67
|
},
|