@twick/studio 0.14.10 → 0.14.12

package/dist/studio.css

@@ -1338,6 +1338,11 @@ video::-webkit-media-controls-panel {
 }.btn-primary:active {
   background: linear-gradient(135deg, var(--color-purple-700), var(--color-purple-800), var(--color-purple-900));
   box-shadow: 0 6px 20px rgba(147, 51, 234, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}.btn-primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
 }.btn-secondary {
   display: inline-flex;
   align-items: center;
@@ -1360,6 +1365,11 @@ video::-webkit-media-controls-panel {
   background: linear-gradient(135deg, var(--color-purple-100), var(--color-purple-200), var(--color-purple-300));
   box-shadow: 0 12px 35px rgba(147, 51, 234, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);
   transform: translateY(-2px);
+}.btn-secondary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
 }.btn-ghost {
   display: inline-flex;
   align-items: center;
@@ -1385,6 +1395,11 @@ video::-webkit-media-controls-panel {
   border-color: rgba(255, 255, 255, 0.2);
   box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
   transform: translateY(-2px);
+}.btn-ghost:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
 }.btn-outline {
   display: inline-flex;
   align-items: center;
@@ -1409,6 +1424,11 @@ video::-webkit-media-controls-panel {
   border-color: var(--color-purple-400);
   box-shadow: 0 12px 35px rgba(147, 51, 234, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
   transform: translateY(-2px);
+}.btn-outline:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
 }.btn-danger {
   display: inline-flex;
   align-items: center;
@@ -1434,6 +1454,11 @@ video::-webkit-media-controls-panel {
 }.btn-danger:active {
   background: linear-gradient(135deg, var(--color-red-700), var(--color-red-800), var(--color-red-900));
   box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}.btn-danger:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
 }.btn-primary {
   background: linear-gradient(135deg, var(--color-purple-600), var(--color-purple-700));
   color: white;
@@ -1442,6 +1467,11 @@ video::-webkit-media-controls-panel {
 }.btn-primary:hover {
   background: linear-gradient(135deg, var(--color-purple-500), var(--color-purple-600));
   box-shadow: 0 8px 25px rgba(147, 51, 234, 0.35);
+}.btn-primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
 }/* ========================================
    INPUT UTILITIES
    ======================================== */.input {
@@ -1936,6 +1966,11 @@ video::-webkit-media-controls-panel {
 }.btn-primary:active {
   background: linear-gradient(135deg, var(--color-purple-700), var(--color-purple-800), var(--color-purple-900));
   box-shadow: 0 6px 20px rgba(147, 51, 234, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}.btn-primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
 }.btn-secondary {
   display: inline-flex;
   align-items: center;
@@ -1958,6 +1993,11 @@ video::-webkit-media-controls-panel {
   background: linear-gradient(135deg, var(--color-purple-100), var(--color-purple-200), var(--color-purple-300));
   box-shadow: 0 12px 35px rgba(147, 51, 234, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);
   transform: translateY(-2px);
+}.btn-secondary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
 }.btn-ghost {
   display: inline-flex;
   align-items: center;
@@ -1983,6 +2023,11 @@ video::-webkit-media-controls-panel {
   border-color: rgba(255, 255, 255, 0.2);
   box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
   transform: translateY(-2px);
+}.btn-ghost:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
 }.btn-outline {
   display: inline-flex;
   align-items: center;
@@ -2007,6 +2052,11 @@ video::-webkit-media-controls-panel {
   border-color: var(--color-purple-400);
   box-shadow: 0 12px 35px rgba(147, 51, 234, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
   transform: translateY(-2px);
+}.btn-outline:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
 }.btn-danger {
   display: inline-flex;
   align-items: center;
@@ -2032,6 +2082,11 @@ video::-webkit-media-controls-panel {
 }.btn-danger:active {
   background: linear-gradient(135deg, var(--color-red-700), var(--color-red-800), var(--color-red-900));
   box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}.btn-danger:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
 }.btn-primary {
   background: linear-gradient(135deg, var(--color-purple-600), var(--color-purple-700));
   color: white;
@@ -2040,6 +2095,11 @@ video::-webkit-media-controls-panel {
 }.btn-primary:hover {
   background: linear-gradient(135deg, var(--color-purple-500), var(--color-purple-600));
   box-shadow: 0 8px 25px rgba(147, 51, 234, 0.35);
+}.btn-primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
 }/* ========================================
    INPUT UTILITIES
    ======================================== */.input {

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-import { ProjectJSON, Size, TrackElement } from '@twick/timeline';
+import { ProjectJSON, Size, TrackElement, VideoElement } from '@twick/timeline';
 import { VideoEditorConfig } from '@twick/video-editor';
 
 export interface MediaItem {
@@ -26,9 +26,62 @@ export interface Result {
     message: string;
     result?: any;
 }
+/**
+ * Subtitle entry format used for timeline integration
+ */
+export interface SubtitleEntry {
+    s: number;
+    e: number;
+    t: string;
+}
+/**
+ * Response from POST /generate-subtitles
+ */
+export interface GenerateSubtitlesResponse {
+    reqId: string;
+}
+export interface RequestStatus {
+    status: "pending" | "completed" | "failed";
+}
+/**
+ * Response from GET /request-status when status is pending
+ */
+export interface RequestStatusPending {
+    status: "pending";
+}
+/**
+ * Response from GET /request-status when status is ready
+ */
+export interface RequestStatusCompleted {
+    status: "completed";
+    subtitles: SubtitleEntry[];
+}
+/**
+ * Union type for request status responses
+ */
+export type RequestStatusResponse = RequestStatusPending | RequestStatusCompleted;
+export interface ISubtitleGenerationPollingResponse {
+    status: "pending" | "completed" | "failed";
+    subtitles?: SubtitleEntry[];
+    error?: string;
+}
+export interface ISubtitleGenerationService {
+    generateSubtitles: (videoElement: VideoElement, project: ProjectJSON) => Promise<string>;
+    updateProjectWithSubtitles: (subtitles: SubtitleEntry[]) => ProjectJSON;
+    generateSubtitleVideo?: (videoUrl: string, videoSize?: {
+        width: number;
+        height: number;
+    }) => Promise<string>;
+    getRequestStatus: (reqId: string) => Promise<ISubtitleGenerationPollingResponse>;
+}
 export interface StudioConfig extends VideoEditorConfig {
     saveProject?: (project: ProjectJSON, fileName: string) => Promise<Result>;
     loadProject?: () => Promise<ProjectJSON>;
+    /**
+     * Subtitle generation service for polling-based async subtitle generation
+     * Implement this in your application code to provide API endpoints
+     */
+    subtitleGenerationService?: ISubtitleGenerationService;
     exportVideo?: (project: ProjectJSON, videoSettings: VideoSettings) => Promise<Result>;
 }
 export interface PanelProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twick/studio",
-  "version": "0.14.10",
+  "version": "0.14.12",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -23,10 +23,10 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@twick/media-utils": "^0.14.0",
-    "@twick/timeline": "^0.14.0",
-    "@twick/live-player": "^0.14.0",
-    "@twick/video-editor": "^0.14.0"
+    "@twick/media-utils": "^0.14.11",
+    "@twick/timeline": "^0.14.11",
+    "@twick/live-player": "^0.14.11",
+    "@twick/video-editor": "^0.14.11"
   },
   "dependencies": {
     "lucide-react": "^0.511.0",
@@ -37,9 +37,9 @@
     "@types/node": "^20.11.24",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
-    "@twick/timeline": "^0.14.0",
-    "@twick/live-player": "^0.14.0",
-    "@twick/video-editor": "^0.14.0",
+    "@twick/timeline": "^0.14.11",
+    "@twick/live-player": "^0.14.11",
+    "@twick/video-editor": "^0.14.11",
     "rimraf": "^5.0.5",
     "typedoc": "^0.25.8",
     "typedoc-plugin-markdown": "^3.17.1",