@twick/studio 0.15.0 → 0.15.2

package/dist/index.mjs

@@ -3,8 +3,12 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef, createElement, useState, useEffect, useRef, createContext, useContext, useCallback, useMemo } from "react";
-import { useTimelineContext, TrackElement, Track, ImageElement, AudioElement, VideoElement, TextElement, IconElement, RectElement, CircleElement, CAPTION_STYLE, CaptionElement, ElementTextEffect, ElementAnimation } from "@twick/timeline";
+import { useTimelineContext, TrackElement, Track, ImageElement, AudioElement, VideoElement, TextElement, IconElement, RectElement, CircleElement, CAPTION_STYLE, CaptionElement, ElementTextEffect, ElementAnimation, PLAYER_STATE } from "@twick/timeline";
+import { INITIAL_TIMELINE_DATA, TimelineProvider } from "@twick/timeline";
 import VideoEditor, { useEditorManager, BrowserMediaManager, AVAILABLE_TEXT_FONTS, TEXT_EFFECTS, ANIMATIONS } from "@twick/video-editor";
+import { default as default2 } from "@twick/video-editor";
+import { useLivePlayerContext } from "@twick/live-player";
+import { LivePlayer, LivePlayerProvider } from "@twick/live-player";
 /**
  * @license lucide-react v0.511.0 - ISC
  *
@@ -549,6 +553,7 @@ function Toolbar({ selectedTool, setSelectedTool }) {
 }
 const StudioHeader = ({
   setVideoResolution,
+  onNewProject,
   onLoadProject,
   onSaveProject,
   onExportVideo
@@ -577,6 +582,18 @@ const StudioHeader = ({
       /* @__PURE__ */ jsx("h1", { className: "text-gradient", children: "Twick Studio" })
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex-container", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: "btn-ghost",
+          title: "New Project",
+          onClick: onNewProject,
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "icon-sm" }),
+            "New Project"
+          ]
+        }
+      ),
       /* @__PURE__ */ jsxs(
         "button",
         {
@@ -2434,7 +2451,7 @@ function SubtitlesPanel({
 const CAPTION_PROPS = {
   [CAPTION_STYLE.WORD_BG_HIGHLIGHT]: {
     font: {
-      size: 50,
+      size: 46,
       weight: 700,
       family: "Bangers"
     },
@@ -2451,7 +2468,7 @@ const CAPTION_PROPS = {
   },
   [CAPTION_STYLE.WORD_BY_WORD]: {
     font: {
-      size: 50,
+      size: 46,
       weight: 700,
       family: "Bangers"
     },
@@ -2468,7 +2485,7 @@ const CAPTION_PROPS = {
   },
   [CAPTION_STYLE.WORD_BY_WORD_WITH_BG]: {
     font: {
-      size: 50,
+      size: 46,
       weight: 700,
       family: "Bangers"
     },
@@ -3502,9 +3519,19 @@ function PropertiesPanelContainer({
 }
 const useStudioOperation = (studioConfig) => {
   const { editor, present } = useTimelineContext();
+  const { setSeekTime, setPlayerState } = useLivePlayerContext();
   const [projectName, setProjectName] = useState("");
+  const onNewProject = () => {
+    setPlayerState(PLAYER_STATE.PAUSED);
+    editor.loadProject({
+      tracks: [],
+      version: 0
+    });
+    setSeekTime(0);
+  };
   const onLoadProject = async () => {
     let project;
+    setPlayerState(PLAYER_STATE.PAUSED);
     if (studioConfig == null ? void 0 : studioConfig.loadProject) {
       project = await studioConfig.loadProject();
     } else {
@@ -3513,8 +3540,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;
@@ -3583,6 +3610,7 @@ const useStudioOperation = (studioConfig) => {
     onLoadProject,
     onSaveProject,
     onExportVideo,
+    onNewProject,
     onGenerateSubtitles,
     addSubtitlesToTimeline,
     getSubtitleStatus
@@ -3640,6 +3668,7 @@ function TwickStudio({ studioConfig }) {
   } = useStudioManager();
   const { videoResolution, setVideoResolution } = useTimelineContext();
   const {
+    onNewProject,
     onLoadProject,
     onSaveProject,
     onExportVideo
@@ -3662,6 +3691,7 @@ function TwickStudio({ studioConfig }) {
       StudioHeader,
       {
         setVideoResolution,
+        onNewProject,
         onLoadProject,
         onSaveProject,
         onExportVideo
@@ -3722,14 +3752,19 @@ export {
   AudioPanel,
   CAPTION_PROPS,
   CirclePanel,
+  INITIAL_TIMELINE_DATA,
   IconPanel,
   ImagePanel,
+  LivePlayer,
+  LivePlayerProvider,
   RectPanel,
   StudioHeader,
   SubtitlesPanel,
   TextPanel,
+  TimelineProvider,
   Toolbar,
   TwickStudio,
+  default2 as VideoEditor,
   VideoPanel,
   TwickStudio as default,
   useGenerateSubtitles,