@twick/studio 0.15.0 → 0.15.2

package/README.md

@@ -21,14 +21,28 @@ npm install @twick/studio
 pnpm add @twick/studio
 ```
 
-**Note:** All required dependencies (`@twick/timeline`, `@twick/live-player`, `@twick/video-editor`, `@twick/canvas`, `@twick/media-utils`) are automatically installed with `@twick/studio`.
+**Note:** All required dependencies are automatically installed with `@twick/studio`:
+- `@twick/timeline` - Timeline management
+- `@twick/live-player` - Video player components
+- `@twick/video-editor` - Video editor component
+- `@twick/canvas` - Canvas utilities
+- `@twick/media-utils` - Media processing utilities
+- `@twick/visualizer` - Visual rendering
+- `@twick/core` - Core functionality
+- `@twick/player-react` - React player components
+
+You can import all components and providers directly from `@twick/studio` - no need to import from individual packages! This simplifies your imports and ensures all dependencies are properly versioned together.
 
 ## Quick Start
 
 ```tsx
-import { LivePlayerProvider } from "@twick/live-player";
-import { TwickStudio } from "@twick/studio";
-import { TimelineProvider, INITIAL_TIMELINE_DATA } from "@twick/timeline";
+// Import everything you need from @twick/studio
+import { 
+  TwickStudio,
+  LivePlayerProvider,
+  TimelineProvider,
+  INITIAL_TIMELINE_DATA
+} from "@twick/studio";
 import "@twick/studio/dist/studio.css";
 
 export default function App() {
@@ -70,6 +84,16 @@ export default function App() {
 }
 ```
 
+### Alternative: Import from Individual Packages
+
+You can also import from individual packages if you prefer:
+
+```tsx
+import { LivePlayerProvider } from "@twick/live-player";
+import { TimelineProvider, INITIAL_TIMELINE_DATA } from "@twick/timeline";
+import { TwickStudio } from "@twick/studio";
+```
+
 ## Components
 
 ### TwickStudio
@@ -178,6 +202,27 @@ The studio includes specialized panels for different element types:
 ### Hooks
 
 - **useStudioManager**: Hook for managing studio state, selected tools, and element manipulation
+- **useGenerateSubtitles**: Hook for subtitle generation and polling
+
+### Re-exported Components
+
+For convenience, `@twick/studio` re-exports commonly used components from other packages:
+
+- **VideoEditor**: Main video editor component (from `@twick/video-editor`)
+- **LivePlayer**, **LivePlayerProvider**: Player components (from `@twick/live-player`)
+- **TimelineProvider**, **INITIAL_TIMELINE_DATA**: Timeline components (from `@twick/timeline`)
+
+You can import these directly from `@twick/studio`:
+
+```tsx
+import { 
+  VideoEditor,
+  LivePlayer,
+  LivePlayerProvider,
+  TimelineProvider,
+  INITIAL_TIMELINE_DATA
+} from "@twick/studio";
+```
 
 ## Development
 

package/dist/components/header.d.ts

@@ -2,9 +2,10 @@ import { Size } from '@twick/timeline';
 
 interface StudioHeaderProps {
     setVideoResolution: (resolution: Size) => void;
+    onNewProject: () => void;
     onLoadProject: () => void;
     onSaveProject: () => void;
     onExportVideo: () => void;
 }
-export declare const StudioHeader: ({ setVideoResolution, onLoadProject, onSaveProject, onExportVideo, }: StudioHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StudioHeader: ({ setVideoResolution, onNewProject, onLoadProject, onSaveProject, onExportVideo, }: StudioHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default StudioHeader;

package/dist/hooks/use-studio-operation.d.ts

@@ -5,6 +5,7 @@ declare const useStudioOperation: (studioConfig?: StudioConfig) => {
     onLoadProject: () => Promise<void>;
     onSaveProject: () => Promise<void>;
     onExportVideo: () => Promise<void>;
+    onNewProject: () => void;
     onGenerateSubtitles: (videoElement: VideoElement) => Promise<string | null>;
     addSubtitlesToTimeline: (subtitles: SubtitleEntry[]) => void;
     getSubtitleStatus: (reqId: string) => Promise<ISubtitleGenerationPollingResponse>;

package/dist/index.d.ts

@@ -44,6 +44,23 @@ useGenerateSubtitles, };
 export * from './helpers/generate-subtitles.service';
 export * from './helpers/constant';
 export * from './types';
+/**
+ * Re-export commonly used components from dependencies.
+ *
+ * This allows users to import everything from @twick/studio without needing
+ * to install or import from individual @twick packages. All required dependencies
+ * are automatically installed when you install @twick/studio.
+ *
+ * Re-exported components:
+ * - VideoEditor: Main video editor component from @twick/video-editor
+ * - LivePlayerProvider, LivePlayer: Player components from @twick/live-player
+ * - TimelineProvider, INITIAL_TIMELINE_DATA: Timeline components from @twick/timeline
+ */
+export { default as VideoEditor } from '@twick/video-editor';
+export type { VideoEditorProps, VideoEditorConfig } from '@twick/video-editor';
+export { LivePlayerProvider, LivePlayer } from '@twick/live-player';
+export { TimelineProvider, INITIAL_TIMELINE_DATA } from '@twick/timeline';
+export type { TimelineProviderProps } from '@twick/timeline';
 /**
  * Default export: TwickStudio (full editor component)
  */

package/dist/index.js

@@ -7,6 +7,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const timeline = require("@twick/timeline");
 const VideoEditor = require("@twick/video-editor");
+const livePlayer = require("@twick/live-player");
 /**
  * @license lucide-react v0.511.0 - ISC
  *
@@ -551,6 +552,7 @@ function Toolbar({ selectedTool, setSelectedTool }) {
 }
 const StudioHeader = ({
   setVideoResolution,
+  onNewProject,
   onLoadProject,
   onSaveProject,
   onExportVideo
@@ -579,6 +581,18 @@ const StudioHeader = ({
       /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-gradient", children: "Twick Studio" })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-container", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          className: "btn-ghost",
+          title: "New Project",
+          onClick: onNewProject,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Plus, { className: "icon-sm" }),
+            "New Project"
+          ]
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
@@ -2436,7 +2450,7 @@ function SubtitlesPanel({
 const CAPTION_PROPS = {
   [timeline.CAPTION_STYLE.WORD_BG_HIGHLIGHT]: {
     font: {
-      size: 50,
+      size: 46,
       weight: 700,
       family: "Bangers"
     },
@@ -2453,7 +2467,7 @@ const CAPTION_PROPS = {
   },
   [timeline.CAPTION_STYLE.WORD_BY_WORD]: {
     font: {
-      size: 50,
+      size: 46,
       weight: 700,
       family: "Bangers"
     },
@@ -2470,7 +2484,7 @@ const CAPTION_PROPS = {
   },
   [timeline.CAPTION_STYLE.WORD_BY_WORD_WITH_BG]: {
     font: {
-      size: 50,
+      size: 46,
       weight: 700,
       family: "Bangers"
     },
@@ -3504,9 +3518,19 @@ function PropertiesPanelContainer({
 }
 const useStudioOperation = (studioConfig) => {
   const { editor, present } = timeline.useTimelineContext();
+  const { setSeekTime, setPlayerState } = livePlayer.useLivePlayerContext();
   const [projectName, setProjectName] = react.useState("");
+  const onNewProject = () => {
+    setPlayerState(timeline.PLAYER_STATE.PAUSED);
+    editor.loadProject({
+      tracks: [],
+      version: 0
+    });
+    setSeekTime(0);
+  };
   const onLoadProject = async () => {
     let project;
+    setPlayerState(timeline.PLAYER_STATE.PAUSED);
     if (studioConfig == null ? void 0 : studioConfig.loadProject) {
       project = await studioConfig.loadProject();
     } else {
@@ -3515,8 +3539,8 @@ const useStudioOperation = (studioConfig) => {
       setProjectName(file.name);
       project = JSON.parse(text);
     }
-    console.log("Editor", editor);
     editor.loadProject(project);
+    setSeekTime(0.01);
   };
   const onSaveProject = async () => {
     let fileName;
@@ -3585,6 +3609,7 @@ const useStudioOperation = (studioConfig) => {
     onLoadProject,
     onSaveProject,
     onExportVideo,
+    onNewProject,
     onGenerateSubtitles,
     addSubtitlesToTimeline,
     getSubtitleStatus
@@ -3642,6 +3667,7 @@ function TwickStudio({ studioConfig }) {
   } = useStudioManager();
   const { videoResolution, setVideoResolution } = timeline.useTimelineContext();
   const {
+    onNewProject,
     onLoadProject,
     onSaveProject,
     onExportVideo
@@ -3664,6 +3690,7 @@ function TwickStudio({ studioConfig }) {
       StudioHeader,
       {
         setVideoResolution,
+        onNewProject,
         onLoadProject,
         onSaveProject,
         onExportVideo
@@ -3720,6 +3747,23 @@ function TwickStudio({ studioConfig }) {
     ] })
   ] }) });
 }
+Object.defineProperty(exports, "INITIAL_TIMELINE_DATA", {
+  enumerable: true,
+  get: () => timeline.INITIAL_TIMELINE_DATA
+});
+Object.defineProperty(exports, "TimelineProvider", {
+  enumerable: true,
+  get: () => timeline.TimelineProvider
+});
+exports.VideoEditor = VideoEditor;
+Object.defineProperty(exports, "LivePlayer", {
+  enumerable: true,
+  get: () => livePlayer.LivePlayer
+});
+Object.defineProperty(exports, "LivePlayerProvider", {
+  enumerable: true,
+  get: () => livePlayer.LivePlayerProvider
+});
 exports.AudioPanel = AudioPanel;
 exports.CAPTION_PROPS = CAPTION_PROPS;
 exports.CirclePanel = CirclePanel;