@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.
Files changed (35) hide show
  1. package/README.md +2 -2
  2. package/dist/components/container/captions-panel-container.d.ts +1 -0
  3. package/dist/components/container/element-panel-container.d.ts +1 -1
  4. package/dist/components/container/properties-panel-container.d.ts +7 -7
  5. package/dist/components/panel/captions-panel.d.ts +46 -0
  6. package/dist/components/panel/circle-panel.d.ts +1 -1
  7. package/dist/components/panel/rect-panel.d.ts +1 -1
  8. package/dist/components/panel/text-panel.d.ts +1 -1
  9. package/dist/components/properties/{subtitlte-prop.d.ts → caption-prop.d.ts} +4 -4
  10. package/dist/components/properties/generate-captions.d.ts +13 -0
  11. package/dist/components/properties/property-row.d.ts +10 -0
  12. package/dist/components/properties/text-props.d.ts +3 -0
  13. package/dist/helpers/generate-captions.service.d.ts +21 -0
  14. package/dist/helpers/volume-db.d.ts +22 -0
  15. package/dist/hooks/use-captions-panel.d.ts +13 -0
  16. package/dist/hooks/use-generate-captions.d.ts +9 -0
  17. package/dist/hooks/use-studio-operation.d.ts +4 -4
  18. package/dist/hooks/use-text-panel.d.ts +6 -0
  19. package/dist/index.d.ts +10 -13
  20. package/dist/index.js +1209 -1046
  21. package/dist/index.js.map +1 -1
  22. package/dist/index.mjs +1194 -1034
  23. package/dist/index.mjs.map +1 -1
  24. package/dist/studio.css +521 -162
  25. package/dist/types/index.d.ts +18 -16
  26. package/package.json +14 -12
  27. package/dist/components/container/icon-panel-container.d.ts +0 -3
  28. package/dist/components/container/subtitles-panel-container.d.ts +0 -1
  29. package/dist/components/panel/icon-panel.d.ts +0 -4
  30. package/dist/components/panel/subtitles-panel.d.ts +0 -46
  31. package/dist/components/properties/generate-subtitles.d.ts +0 -13
  32. package/dist/helpers/generate-subtitles.service.d.ts +0 -21
  33. package/dist/hooks/use-generate-subtitles.d.ts +0 -9
  34. package/dist/hooks/use-icon-panel.d.ts +0 -24
  35. package/dist/hooks/use-subtitles-panel.d.ts +0 -13
@@ -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
- * Subtitle entry format used for timeline integration
30
+ * Caption entry format used for timeline integration
31
31
  */
32
- export interface SubtitleEntry {
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-subtitles
38
+ * Response from POST /generate-captions
39
39
  */
40
- export interface GenerateSubtitlesResponse {
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
- subtitles: SubtitleEntry[];
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 ISubtitleGenerationPollingResponse {
63
+ export interface ICaptionGenerationPollingResponse {
64
64
  status: "pending" | "completed" | "failed";
65
- subtitles?: SubtitleEntry[];
65
+ captions?: CaptionEntry[];
66
66
  error?: string;
67
67
  }
68
- export interface ISubtitleGenerationService {
69
- generateSubtitles: (videoElement: VideoElement, project: ProjectJSON) => Promise<string>;
70
- updateProjectWithSubtitles: (subtitles: SubtitleEntry[]) => ProjectJSON;
71
- generateSubtitleVideo?: (videoUrl: string, videoSize?: {
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<ISubtitleGenerationPollingResponse>;
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
- * Subtitle generation service for polling-based async subtitle generation
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
- subtitleGenerationService?: ISubtitleGenerationService;
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' | 'subtitle';
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.13",
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.13",
37
- "@twick/core": "^0.15.13",
38
- "@twick/live-player": "0.15.13",
39
- "@twick/media-utils": "0.15.13",
40
- "@twick/player-react": "^0.15.13",
41
- "@twick/timeline": "0.15.13",
42
- "@twick/video-editor": "0.15.13",
43
- "@twick/visualizer": "0.15.13",
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
- "@twick/timeline": "0.15.13",
55
- "@twick/live-player": "0.15.13",
56
- "@twick/video-editor": "0.15.13",
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,3 +0,0 @@
1
- import { PanelProps } from '../../types';
2
-
3
- export declare function IconPanelContainer(props: PanelProps): import("react/jsx-runtime").JSX.Element;
@@ -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 {};