working on roadmap features

jbilcke-hf · Jul 25, 2024 · 65b1bdb · 65b1bdb
1 parent a54bba5
commit 65b1bdb
Show file tree

Hide file tree

Showing 15 changed files with 545 additions and 37 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,9 +38,9 @@
   "dependencies": {
     "@aitube/broadway": "0.1.2",
     "@aitube/clap": "0.1.2",
-    "@aitube/clapper-services": "0.1.2-0",
+    "@aitube/clapper-services": "0.1.2-1",
     "@aitube/engine": "0.1.2",
-    "@aitube/timeline": "0.1.2",
+    "@aitube/timeline": "0.1.2-0",
     "@fal-ai/serverless-client": "^0.13.0",
     "@ffmpeg/ffmpeg": "^0.12.10",
     "@ffmpeg/util": "^0.12.1",
@@ -84,6 +84,7 @@
     "@tailwindcss/container-queries": "^0.1.1",
     "@types/dom-speech-recognition": "^0.0.4",
     "@xenova/transformers": "github:xenova/transformers.js#v3",
+    "@xyflow/react": "^12.0.3",
     "autoprefixer": "10.4.19",
     "base64-arraybuffer": "^1.0.2",
     "class-variance-authority": "^0.7.0",

diff --git a/src/app/main.tsx b/src/app/main.tsx
@@ -26,6 +26,8 @@ type DroppableThing = { files: File[] }
 function MainContent() {
   const ref = useRef<HTMLDivElement>(null)
   const showWelcomeScreen = useUI((s) => s.showWelcomeScreen)
+  const showExplorer = useUI((s) => s.showExplorer)
+  const showVideoPlayer = useUI((s) => s.showVideoPlayer)
   const showTimeline = useUI((s) => s.showTimeline)
   const showAssistant = useUI((s) => s.showAssistant)
   const theme = useTheme()
@@ -58,7 +60,7 @@ function MainContent() {
     <div
       ref={ref}
       className={cn(
-        `dark fixed flex h-screen w-screen select-none flex-col justify-between overflow-hidden font-light text-stone-900/90 dark:text-stone-100/90`
+        `dark fixed flex h-screen w-screen select-none flex-col overflow-hidden font-light text-stone-900/90 dark:text-stone-100/90`
       )}
       style={{
         backgroundImage:
@@ -68,35 +70,43 @@ function MainContent() {
       <TopBar />
       <div
         className={cn(
-          `flex h-[calc(100vh-40px)] w-screen flex-row overflow-hidden`
+          `flex h-[calc(100vh-68px)] w-screen flex-row overflow-hidden`
         )}
       >
         <ReflexContainer orientation="vertical">
           <ReflexElement>
             <ReflexContainer orientation="horizontal">
-              <ReflexElement minSize={showTimeline ? 100 : 1}>
+              <ReflexElement
+                // minSize={showTimeline ? 1 : 100}
+                // maxSize={2000}
+                size={showTimeline ? 1200 : 400}
+              >
                 <ReflexContainer orientation="vertical">
                   <ReflexElement
-                    size={showTimeline ? 700 : 1}
-                    minSize={showTimeline ? 100 : 1}
-                    maxSize={showTimeline ? 2000 : 1}
+                    size={showExplorer ? undefined : 1}
+                    minSize={showExplorer ? 100 : 1}
+                    maxSize={showExplorer ? 2000 : 1}
                   >
                     <Editors />
                   </ReflexElement>
-                  <ReflexSplitter />
-                  <ReflexElement minSize={showTimeline ? 100 : 1}>
-                    <Monitor />
-                  </ReflexElement>
+                  {showVideoPlayer && <ReflexSplitter />}
+                  {showVideoPlayer && (
+                    <ReflexElement
+                      minSize={showVideoPlayer ? 200 : 1}
+                      size={showVideoPlayer ? undefined : 1}
+                    >
+                      <Monitor />
+                    </ReflexElement>
+                  )}
                 </ReflexContainer>
               </ReflexElement>
               <ReflexSplitter />
               <ReflexElement
                 size={showTimeline ? 400 : 1}
-                minSize={showTimeline ? 100 : 1}
+                minSize={showTimeline ? 200 : 1}
                 maxSize={showTimeline ? 1600 : 1}
               >
                 <Timeline />
-                <BottomToolbar />
               </ReflexElement>
             </ReflexContainer>
           </ReflexElement>
@@ -167,6 +177,7 @@ function MainContent() {
       <SettingsDialog />
       <LoadingDialog />
       <Toaster />
+      <BottomToolbar />
     </div>
   )
 }

diff --git a/src/components/editors/WorkflowEditor/index.tsx b/src/components/editors/WorkflowEditor/index.tsx
@@ -3,6 +3,7 @@ import { useEffect } from 'react'
 import { FormInput } from '@/components/forms/FormInput'
 import { FormSection } from '@/components/forms/FormSection'
 import { useWorkflowEditor } from '@/services/editors'
+import { useUI } from '@/services'
 
 export function WorkflowEditor() {
   const current = useWorkflowEditor((s) => s.current)
@@ -11,6 +12,8 @@ export function WorkflowEditor() {
   const undo = useWorkflowEditor((s) => s.undo)
   const redo = useWorkflowEditor((s) => s.redo)
 
+  const hasBetaAccess = useUI((s) => s.hasBetaAccess)
+
   if (!current) {
     return (
       <FormSection label={'Workflow Editor'} className="p-4">