@twick/studio 0.15.13 → 0.15.15
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 +2 -2
- package/dist/components/container/captions-panel-container.d.ts +1 -0
- package/dist/components/container/element-panel-container.d.ts +1 -1
- package/dist/components/container/properties-panel-container.d.ts +7 -7
- package/dist/components/panel/captions-panel.d.ts +46 -0
- package/dist/components/panel/circle-panel.d.ts +1 -1
- package/dist/components/panel/rect-panel.d.ts +1 -1
- package/dist/components/panel/text-panel.d.ts +1 -1
- package/dist/components/properties/{subtitlte-prop.d.ts → caption-prop.d.ts} +4 -4
- package/dist/components/properties/generate-captions.d.ts +13 -0
- package/dist/components/properties/property-row.d.ts +10 -0
- package/dist/components/properties/text-props.d.ts +3 -0
- package/dist/helpers/generate-captions.service.d.ts +21 -0
- package/dist/helpers/volume-db.d.ts +22 -0
- package/dist/hooks/use-captions-panel.d.ts +13 -0
- package/dist/hooks/use-generate-captions.d.ts +9 -0
- package/dist/hooks/use-studio-operation.d.ts +4 -4
- package/dist/hooks/use-text-panel.d.ts +6 -0
- package/dist/index.d.ts +10 -13
- package/dist/index.js +1209 -1046
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1194 -1034
- package/dist/index.mjs.map +1 -1
- package/dist/studio.css +521 -162
- package/dist/types/index.d.ts +18 -16
- package/package.json +14 -12
- package/dist/components/container/icon-panel-container.d.ts +0 -3
- package/dist/components/container/subtitles-panel-container.d.ts +0 -1
- package/dist/components/panel/icon-panel.d.ts +0 -4
- package/dist/components/panel/subtitles-panel.d.ts +0 -46
- package/dist/components/properties/generate-subtitles.d.ts +0 -13
- package/dist/helpers/generate-subtitles.service.d.ts +0 -21
- package/dist/hooks/use-generate-subtitles.d.ts +0 -9
- package/dist/hooks/use-icon-panel.d.ts +0 -24
- package/dist/hooks/use-subtitles-panel.d.ts +0 -13
package/dist/types/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ProjectJSON, Size, TrackElement, VideoElement } from '@twick/timeline';
|
|
2
|
-
import { VideoEditorConfig } from '@twick/video-editor';
|
|
2
|
+
import { CanvasConfig, VideoEditorConfig } from '@twick/video-editor';
|
|
3
3
|
|
|
4
4
|
export interface MediaItem {
|
|
5
5
|
id: string;
|
|
@@ -27,17 +27,17 @@ export interface Result {
|
|
|
27
27
|
result?: any;
|
|
28
28
|
}
|
|
29
29
|
/**
|
|
30
|
-
*
|
|
30
|
+
* Caption entry format used for timeline integration
|
|
31
31
|
*/
|
|
32
|
-
export interface
|
|
32
|
+
export interface CaptionEntry {
|
|
33
33
|
s: number;
|
|
34
34
|
e: number;
|
|
35
35
|
t: string;
|
|
36
36
|
}
|
|
37
37
|
/**
|
|
38
|
-
* Response from POST /generate-
|
|
38
|
+
* Response from POST /generate-captions
|
|
39
39
|
*/
|
|
40
|
-
export interface
|
|
40
|
+
export interface GenerateCaptionsResponse {
|
|
41
41
|
reqId: string;
|
|
42
42
|
}
|
|
43
43
|
export interface RequestStatus {
|
|
@@ -54,34 +54,36 @@ export interface RequestStatusPending {
|
|
|
54
54
|
*/
|
|
55
55
|
export interface RequestStatusCompleted {
|
|
56
56
|
status: "completed";
|
|
57
|
-
|
|
57
|
+
captions: CaptionEntry[];
|
|
58
58
|
}
|
|
59
59
|
/**
|
|
60
60
|
* Union type for request status responses
|
|
61
61
|
*/
|
|
62
62
|
export type RequestStatusResponse = RequestStatusPending | RequestStatusCompleted;
|
|
63
|
-
export interface
|
|
63
|
+
export interface ICaptionGenerationPollingResponse {
|
|
64
64
|
status: "pending" | "completed" | "failed";
|
|
65
|
-
|
|
65
|
+
captions?: CaptionEntry[];
|
|
66
66
|
error?: string;
|
|
67
67
|
}
|
|
68
|
-
export interface
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
68
|
+
export interface ICaptionGenerationService {
|
|
69
|
+
generateCaptions: (videoElement: VideoElement, project: ProjectJSON) => Promise<string>;
|
|
70
|
+
updateProjectWithCaptions: (captions: CaptionEntry[]) => ProjectJSON;
|
|
71
|
+
generateCaptionVideo?: (videoUrl: string, videoSize?: {
|
|
72
72
|
width: number;
|
|
73
73
|
height: number;
|
|
74
74
|
}) => Promise<string>;
|
|
75
|
-
getRequestStatus: (reqId: string) => Promise<
|
|
75
|
+
getRequestStatus: (reqId: string) => Promise<ICaptionGenerationPollingResponse>;
|
|
76
76
|
}
|
|
77
77
|
export interface StudioConfig extends VideoEditorConfig {
|
|
78
|
+
/** Canvas behavior options (e.g. enableShiftAxisLock). Same as editorConfig.canvasConfig in TwickEditor. */
|
|
79
|
+
canvasConfig?: CanvasConfig;
|
|
78
80
|
saveProject?: (project: ProjectJSON, fileName: string) => Promise<Result>;
|
|
79
81
|
loadProject?: () => Promise<ProjectJSON>;
|
|
80
82
|
/**
|
|
81
|
-
*
|
|
83
|
+
* Caption generation service for polling-based async caption generation
|
|
82
84
|
* Implement this in your application code to provide API endpoints
|
|
83
85
|
*/
|
|
84
|
-
|
|
86
|
+
captionGenerationService?: ICaptionGenerationService;
|
|
85
87
|
exportVideo?: (project: ProjectJSON, videoSettings: VideoSettings) => Promise<Result>;
|
|
86
88
|
}
|
|
87
89
|
export interface PanelProps {
|
|
@@ -157,7 +159,7 @@ export interface TimelineElement {
|
|
|
157
159
|
export interface Track {
|
|
158
160
|
id: string;
|
|
159
161
|
name: string;
|
|
160
|
-
type: 'video' | 'audio' | 'text' | '
|
|
162
|
+
type: 'video' | 'audio' | 'text' | 'caption';
|
|
161
163
|
elements: TimelineElement[];
|
|
162
164
|
locked: boolean;
|
|
163
165
|
visible: boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@twick/studio",
|
|
3
|
-
"version": "0.15.
|
|
3
|
+
"version": "0.15.15",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/index.mjs",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -33,14 +33,14 @@
|
|
|
33
33
|
"access": "public"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@twick/canvas": "0.15.
|
|
37
|
-
"@twick/core": "^0.15.
|
|
38
|
-
"@twick/live-player": "0.15.
|
|
39
|
-
"@twick/media-utils": "0.15.
|
|
40
|
-
"@twick/player-react": "^0.15.
|
|
41
|
-
"@twick/timeline": "0.15.
|
|
42
|
-
"@twick/video-editor": "0.15.
|
|
43
|
-
"@twick/visualizer": "0.15.
|
|
36
|
+
"@twick/canvas": "0.15.15",
|
|
37
|
+
"@twick/core": "^0.15.15",
|
|
38
|
+
"@twick/live-player": "0.15.15",
|
|
39
|
+
"@twick/media-utils": "0.15.15",
|
|
40
|
+
"@twick/player-react": "^0.15.15",
|
|
41
|
+
"@twick/timeline": "0.15.15",
|
|
42
|
+
"@twick/video-editor": "0.15.15",
|
|
43
|
+
"@twick/visualizer": "0.15.15",
|
|
44
44
|
"lucide-react": "^0.511.0"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
@@ -51,9 +51,11 @@
|
|
|
51
51
|
"@types/node": "^20.11.24",
|
|
52
52
|
"@types/react": "^18.0.0 || ^19.0.0",
|
|
53
53
|
"@types/react-dom": "^18.0.0 || ^19.0.0",
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"@twick/
|
|
54
|
+
"react": "^18.0.0",
|
|
55
|
+
"react-dom": "^18.0.0",
|
|
56
|
+
"@twick/timeline": "0.15.15",
|
|
57
|
+
"@twick/live-player": "0.15.15",
|
|
58
|
+
"@twick/video-editor": "0.15.15",
|
|
57
59
|
"rimraf": "^5.0.5",
|
|
58
60
|
"typedoc": "^0.25.8",
|
|
59
61
|
"typedoc-plugin-markdown": "^3.17.1",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function SubtitlesPanelContainer(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { IconPanelState, IconPanelActions } from '../../hooks/use-icon-panel';
|
|
2
|
-
|
|
3
|
-
export type IconPanelProps = IconPanelState & IconPanelActions;
|
|
4
|
-
export declare function IconPanel({ icons, loading, totalIcons, searchQuery, handleSearch, handleSelection, handleDownloadIcon, handleLoadMore, }: IconPanelProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* SubtitlesPanel Component
|
|
3
|
-
*
|
|
4
|
-
* A presentational panel for managing subtitle entries in the studio.
|
|
5
|
-
* Renders a list of subtitle items, each with a text input and two actions:
|
|
6
|
-
* Split and Delete. A single Add button appears below the list.
|
|
7
|
-
*
|
|
8
|
-
* State is controlled by the parent via props; this component is stateless.
|
|
9
|
-
*
|
|
10
|
-
* Entry shape (SubtitleEntry):
|
|
11
|
-
* - `s`: start time (seconds)
|
|
12
|
-
* - `e`: end time (seconds)
|
|
13
|
-
* - `t`: subtitle text
|
|
14
|
-
*
|
|
15
|
-
* Props:
|
|
16
|
-
* - `subtitles`: SubtitleEntry[] — ordered list of subtitles
|
|
17
|
-
* - `addSubtitle()`: add a new subtitle at the end
|
|
18
|
-
* - `splitSubtitle(index)`: split the subtitle at `index`
|
|
19
|
-
* - `deleteSubtitle(index)`: remove the subtitle at `index`
|
|
20
|
-
* - `updateSubtitle(index, subtitle)`: update the subtitle at `index`
|
|
21
|
-
*
|
|
22
|
-
* @component
|
|
23
|
-
* @example
|
|
24
|
-
* ```tsx
|
|
25
|
-
* <SubtitlesPanel
|
|
26
|
-
* subtitles={subtitles}
|
|
27
|
-
* addSubtitle={addSubtitle}
|
|
28
|
-
* splitSubtitle={splitSubtitle}
|
|
29
|
-
* deleteSubtitle={deleteSubtitle}
|
|
30
|
-
* updateSubtitle={updateSubtitle}
|
|
31
|
-
* />
|
|
32
|
-
* ```
|
|
33
|
-
*/
|
|
34
|
-
interface SubtitleEntry {
|
|
35
|
-
s: number;
|
|
36
|
-
e: number;
|
|
37
|
-
t: string;
|
|
38
|
-
}
|
|
39
|
-
export declare function SubtitlesPanel({ subtitles, addSubtitle, splitSubtitle, deleteSubtitle, updateSubtitle, }: {
|
|
40
|
-
subtitles: SubtitleEntry[];
|
|
41
|
-
addSubtitle: () => void;
|
|
42
|
-
splitSubtitle: (index: number) => void;
|
|
43
|
-
deleteSubtitle: (index: number) => void;
|
|
44
|
-
updateSubtitle: (index: number, subtitle: SubtitleEntry) => void;
|
|
45
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
46
|
-
export {};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { TrackElement, VideoElement } from '@twick/timeline';
|
|
2
|
-
import { ISubtitleGenerationPollingResponse } from '../../types';
|
|
3
|
-
|
|
4
|
-
export declare function GenerateSubtitlesPanel({ selectedElement, addSubtitlesToTimeline, onGenerateSubtitles, getSubtitleStatus, }: {
|
|
5
|
-
selectedElement: TrackElement;
|
|
6
|
-
addSubtitlesToTimeline: (subtitles: {
|
|
7
|
-
s: number;
|
|
8
|
-
e: number;
|
|
9
|
-
t: string;
|
|
10
|
-
}[]) => void;
|
|
11
|
-
onGenerateSubtitles: (videoElement: VideoElement) => Promise<string | null>;
|
|
12
|
-
getSubtitleStatus: (reqId: string) => Promise<ISubtitleGenerationPollingResponse>;
|
|
13
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { ProjectJSON, VideoElement } from '@twick/timeline';
|
|
2
|
-
import { ISubtitleGenerationPollingResponse, ISubtitleGenerationService, SubtitleEntry } from '../types';
|
|
3
|
-
|
|
4
|
-
declare class GenerateSubtitlesService implements ISubtitleGenerationService {
|
|
5
|
-
videoElement: VideoElement | null;
|
|
6
|
-
projectJSON: ProjectJSON | null;
|
|
7
|
-
generateSubtiltesApi: (videoUrl: string) => Promise<string>;
|
|
8
|
-
requestStatusApi: (reqId: string) => Promise<ISubtitleGenerationPollingResponse>;
|
|
9
|
-
constructor({ generateSubtiltesApi, requestStatusApi, }: {
|
|
10
|
-
generateSubtiltesApi: (videoUrl: string) => Promise<string>;
|
|
11
|
-
requestStatusApi: (reqId: string) => Promise<ISubtitleGenerationPollingResponse>;
|
|
12
|
-
});
|
|
13
|
-
generateSubtitles(videoElement: VideoElement, projectJSON: ProjectJSON): Promise<string>;
|
|
14
|
-
getRequestStatus(reqId: string): Promise<ISubtitleGenerationPollingResponse>;
|
|
15
|
-
updateProjectWithSubtitles(subtitles: SubtitleEntry[]): ProjectJSON;
|
|
16
|
-
generateSubtitleVideo(videoUrl: string, videoSize?: {
|
|
17
|
-
width: number;
|
|
18
|
-
height: number;
|
|
19
|
-
}): Promise<string>;
|
|
20
|
-
}
|
|
21
|
-
export default GenerateSubtitlesService;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { VideoElement } from '@twick/timeline';
|
|
2
|
-
import { ISubtitleGenerationPollingResponse, StudioConfig, SubtitleEntry } from '../types';
|
|
3
|
-
|
|
4
|
-
declare const useGenerateSubtitles: (studioConfig?: StudioConfig) => {
|
|
5
|
-
onGenerateSubtitles: (videoElement: VideoElement) => Promise<string | null>;
|
|
6
|
-
addSubtitlesToTimeline: (subtitles: SubtitleEntry[]) => void;
|
|
7
|
-
getSubtitleStatus: (reqId: string) => Promise<ISubtitleGenerationPollingResponse>;
|
|
8
|
-
};
|
|
9
|
-
export default useGenerateSubtitles;
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { TrackElement } from '@twick/timeline';
|
|
2
|
-
|
|
3
|
-
export interface Icon {
|
|
4
|
-
name: string;
|
|
5
|
-
svg: string;
|
|
6
|
-
}
|
|
7
|
-
export interface IconPanelState {
|
|
8
|
-
icons: Icon[];
|
|
9
|
-
loading: boolean;
|
|
10
|
-
hasMore: boolean;
|
|
11
|
-
totalIcons: number;
|
|
12
|
-
searchQuery: string;
|
|
13
|
-
}
|
|
14
|
-
export interface IconPanelActions {
|
|
15
|
-
handleSearch: (query: string) => void;
|
|
16
|
-
handleSelection: (icon: Icon) => void;
|
|
17
|
-
handleDownloadIcon: (icon: Icon) => void;
|
|
18
|
-
handleLoadMore: () => void;
|
|
19
|
-
}
|
|
20
|
-
export declare const useIconPanel: ({ selectedElement, addElement, updateElement, }: {
|
|
21
|
-
selectedElement: TrackElement | null;
|
|
22
|
-
addElement: (element: TrackElement) => void;
|
|
23
|
-
updateElement: (element: TrackElement) => void;
|
|
24
|
-
}) => IconPanelState & IconPanelActions;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
interface SubtitleEntry {
|
|
2
|
-
s: number;
|
|
3
|
-
e: number;
|
|
4
|
-
t: string;
|
|
5
|
-
}
|
|
6
|
-
export declare const useSubtitlesPanel: () => {
|
|
7
|
-
subtitles: SubtitleEntry[];
|
|
8
|
-
addSubtitle: () => void;
|
|
9
|
-
splitSubtitle: (index: number) => Promise<void>;
|
|
10
|
-
deleteSubtitle: (index: number) => void;
|
|
11
|
-
updateSubtitle: (index: number, subtitle: SubtitleEntry) => void;
|
|
12
|
-
};
|
|
13
|
-
export {};
|