improve window layout

jbilcke-hf · Jul 29, 2024 · fd46ec1 · fd46ec1
1 parent 51ead01
commit fd46ec1
Show file tree

Hide file tree

Showing 21 changed files with 1,361 additions and 485 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-7",
+    "@aitube/clapper-services": "0.1.2-8",
     "@aitube/engine": "0.1.2",
-    "@aitube/timeline": "0.1.2-1",
+    "@aitube/timeline": "0.1.2-2",
     "@fal-ai/serverless-client": "^0.13.0",
     "@ffmpeg/ffmpeg": "^0.12.10",
     "@ffmpeg/util": "^0.12.1",
@@ -165,23 +165,23 @@
     "vitest": "^2.0.2"
   },
   "optionalDependencies": {
-    "@img/sharp-win32-ia32": "0.33.4",
-    "@img/sharp-win32-x64": "0.33.4",
     "@img/sharp-darwin-arm64": "0.33.4",
     "@img/sharp-darwin-x64": "0.33.4",
+    "@img/sharp-libvips-darwin-arm64": "1.0.2",
+    "@img/sharp-libvips-darwin-x64": "1.0.2",
+    "@img/sharp-libvips-linux-arm": "1.0.2",
+    "@img/sharp-libvips-linux-arm64": "1.0.2",
+    "@img/sharp-libvips-linux-x64": "1.0.2",
+    "@img/sharp-libvips-linuxmusl-arm64": "1.0.2",
+    "@img/sharp-libvips-linuxmusl-x64": "1.0.2",
+    "@img/sharp-libvips-win32-ia32": "1.0.2",
+    "@img/sharp-libvips-win32-x64": "1.0.2",
     "@img/sharp-linux-arm": "0.33.4",
     "@img/sharp-linux-arm64": "0.33.4",
     "@img/sharp-linux-x64": "0.33.4",
-    "@img/sharp-linuxmusl-x64": "0.33.4",
     "@img/sharp-linuxmusl-arm64": "0.33.4",
-    "@img/sharp-libvips-win32-x64": "1.0.2",
-    "@img/sharp-libvips-win32-ia32": "1.0.2",
-    "@img/sharp-libvips-linux-arm": "1.0.2",
-    "@img/sharp-libvips-linux-x64": "1.0.2",
-    "@img/sharp-libvips-linux-arm64": "1.0.2",
-    "@img/sharp-libvips-linuxmusl-x64": "1.0.2",
-    "@img/sharp-libvips-linuxmusl-arm64": "1.0.2",
-    "@img/sharp-libvips-darwin-x64": "1.0.2",
-    "@img/sharp-libvips-darwin-arm64": "1.0.2"
+    "@img/sharp-linuxmusl-x64": "0.33.4",
+    "@img/sharp-win32-ia32": "0.33.4",
+    "@img/sharp-win32-x64": "0.33.4"
   }
 }
diff --git a/src/app/logo-desaturated.png → public/images/logos/logo-desaturated.png b/src/app/logo-desaturated.png → public/images/logos/logo-desaturated.png
diff --git a/public/images/logos/logo-discord-2.png b/public/images/logos/logo-discord-2.png
diff --git a/public/images/logos/logo-discord-3.png b/public/images/logos/logo-discord-3.png
diff --git a/src/app/logo-no-bg.png → public/images/logos/logo-no-bg.png b/src/app/logo-no-bg.png → public/images/logos/logo-no-bg.png
diff --git a/src/app/logo-v2.png → public/images/logos/logo-v2.png b/src/app/logo-v2.png → public/images/logos/logo-v2.png
diff --git a/src/app/logo-v2.xcf → public/images/logos/logo-v2.xcf b/src/app/logo-v2.xcf → public/images/logos/logo-v2.xcf
diff --git a/src/app/main.tsx b/src/app/main.tsx
@@ -118,10 +118,12 @@ function MainContent() {
       <FruityWindow
         id="ScriptEditor"
         title="Script editor"
-        defaultWidth="450px"
-        minWidth="200px"
-        defaultHeight="350px"
-        minHeight="100px"
+        defaultWidth={375}
+        minWidth={200}
+        defaultHeight={370}
+        minHeight={100}
+        defaultX={18}
+        defaultY={7}
         canBeClosed={false}
       >
         <ScriptEditor />
@@ -130,10 +132,12 @@ function MainContent() {
       <FruityWindow
         id="SegmentEditor"
         title="segment editor"
-        defaultWidth="450px"
-        minWidth="200px"
-        defaultHeight="350px"
-        minHeight="100px"
+        defaultWidth={342}
+        minWidth={200}
+        defaultHeight={395}
+        minHeight={100}
+        defaultX={21}
+        defaultY={424}
         canBeClosed={false}
       >
         <SegmentEditor />
@@ -142,10 +146,12 @@ function MainContent() {
       <FruityWindow
         id="EntityEditor"
         title="Entity editor"
-        defaultWidth="450px"
-        minWidth="200px"
-        defaultHeight="350px"
-        minHeight="100px"
+        defaultWidth={544}
+        minWidth={200}
+        defaultHeight={318}
+        minHeight={100}
+        defaultX={347}
+        defaultY={193}
         canBeClosed={false}
       >
         <EntityEditor />
@@ -155,10 +161,12 @@ function MainContent() {
         <FruityWindow
           id="WorkflowEditor"
           title="Workflow editor"
-          defaultWidth="450px"
-          minWidth="200px"
-          defaultHeight="350px"
-          minHeight="100px"
+          defaultWidth={459}
+          minWidth={200}
+          defaultHeight={351}
+          minHeight={100}
+          defaultX={536}
+          defaultY={3}
           canBeClosed={false}
         >
           <WorkflowEditor />
@@ -168,10 +176,12 @@ function MainContent() {
       <FruityWindow
         id="Monitor"
         title="Monitor"
-        defaultWidth="450px"
-        minWidth="200px"
-        defaultHeight="350px"
-        minHeight="100px"
+        defaultWidth={333}
+        minWidth={200}
+        defaultHeight={298}
+        minHeight={100}
+        defaultX={1027}
+        defaultY={21}
         canBeClosed={false}
       >
         <Monitor />
@@ -180,10 +190,12 @@ function MainContent() {
       <FruityWindow
         id="Timeline"
         title="Timeline"
-        defaultWidth="800px"
-        minWidth="200px"
-        defaultHeight="350px"
-        minHeight="100px"
+        defaultWidth={936}
+        minWidth={200}
+        defaultHeight={282}
+        minHeight={100}
+        defaultX={375}
+        defaultY={527}
         canBeClosed={false}
       >
         <Timeline />

diff --git a/src/components/editors/EntityEditor/EntityTree/index.tsx b/src/components/editors/EntityEditor/EntityTree/index.tsx
@@ -1,11 +1,15 @@
 'use client'
 
+import { useEffect } from 'react'
+import { useTimeline } from '@aitube/timeline'
+
 import { cn } from '@/lib/utils'
 import { isClapEntity } from '@/components/tree-browsers/utils/isSomething'
 import { TreeNodeItem, LibraryNodeType } from '@/components/tree-browsers/types'
 import { Tree } from '@/components/core/tree'
 
 import { useEntityTree } from './useEntityTree'
+import { ClapEntity } from '@aitube/clap'
 
 export function EntityTree({
   className = '',
@@ -15,7 +19,15 @@ export function EntityTree({
   const libraryTreeRoot = useEntityTree((s) => s.libraryTreeRoot)
   const selectTreeNode = useEntityTree((s) => s.selectTreeNode)
   const selectedTreeNodeId = useEntityTree((s) => s.selectedTreeNodeId)
+  const setProjectEntities = useEntityTree((s) => s.setProjectEntities)
+
+  const entitiesChanged: number = useTimeline((s) => s.entitiesChanged)
+  const entities: ClapEntity[] = useTimeline((s) => s.entities)
 
+  useEffect(() => {
+    console.log('loading entities:', entities)
+    setProjectEntities(entities)
+  }, [entities, entitiesChanged, entities.length])
   /**
    * handle click on tree node
    * yes, this is where the magic happens!

diff --git a/src/components/editors/EntityEditor/EntityTree/useEntityTree.ts b/src/components/editors/EntityEditor/EntityTree/useEntityTree.ts
@@ -1,7 +1,7 @@
 'use client'
 
 import { create } from 'zustand'
-import { ClapEntity, UUID } from '@aitube/clap'
+import { ClapEntity, ClapSegmentCategory, UUID } from '@aitube/clap'
 import {
   LibraryTreeNode,
   TreeNodeItem,
@@ -11,6 +11,7 @@ import { icons } from '@/components/icons'
 import { getAppropriateIcon } from '@/components/icons/getAppropriateIcon'
 import {
   collectionClassName,
+  itemClassName,
   libraryClassName,
 } from '@/components/tree-browsers/style/treeNodeStyles'
 
@@ -33,7 +34,7 @@ export const useEntityTree = create<{
    * @param collections
    * @returns
    */
-  // setProjectLibrary: (collections: ProjectEntityCollection[]) => void
+  setProjectEntities: (entities: ClapEntity[]) => Promise<void>
 
   /**
    * Load entity collections (characters, locations..) from the Clapper community into the tree
@@ -109,11 +110,10 @@ export const useEntityTree = create<{
     })
   },
 
-  /*
   setProjectEntities: async (entities: ClapEntity[]) => {
     const characters: LibraryTreeNode = {
       id: UUID(),
-      nodeType: 'LIB_NODE_GENERIC_COLLECTION',
+      nodeType: 'ENTITY_TREE_NODE_LIST_ENTITIES',
       data: undefined,
       label: 'Characters',
       icon: icons.characters,
@@ -124,7 +124,7 @@ export const useEntityTree = create<{
 
     const locations: LibraryTreeNode = {
       id: UUID(),
-      nodeType: 'LIB_NODE_GENERIC_COLLECTION',
+      nodeType: 'ENTITY_TREE_NODE_LIST_ENTITIES',
       data: undefined,
       label: 'Locations',
       icon: icons.location,
@@ -135,7 +135,7 @@ export const useEntityTree = create<{
 
     const misc: LibraryTreeNode = {
       id: UUID(),
-      nodeType: 'LIB_NODE_GENERIC_COLLECTION',
+      nodeType: 'ENTITY_TREE_NODE_LIST_ENTITIES',
       data: undefined,
       label: 'Misc',
       icon: icons.misc,
@@ -146,7 +146,7 @@ export const useEntityTree = create<{
 
     entities.forEach((entity) => {
       const node: LibraryTreeNode = {
-        nodeType: TreeNodeEntityItem,
+        nodeType: 'ENTITY_TREE_NODE_ITEM_ENTITY',
         id: entity.id,
         data: entity,
         label: entity.label,
@@ -165,6 +165,7 @@ export const useEntityTree = create<{
     })
   },
 
+  /*
   setCommunityCollections: (collections: CommunityEntityCollection[]) => {
     // TODO: implement this
    

diff --git a/src/components/forms/FormSection.tsx b/src/components/forms/FormSection.tsx
@@ -19,8 +19,10 @@ export function FormSection({
         className
       )}
     >
-      <h2 className="pb-2 text-xl font-normal text-white/60">{label}</h2>
-      <div className={cn('flex w-full', 'flex-col space-y-4')}>{children}</div>
+      <h2 className="pb-2 text-lg font-normal text-white/60">{label}</h2>
+      <div className={cn('flex w-full', 'flex-col space-y-4 text-sm')}>
+        {children}
+      </div>
     </div>
   )
 }
diff --git a/src/components/toolbars/top-menu/ToggleFullScreen/index.tsx b/src/components/toolbars/top-menu/ToggleFullScreen/index.tsx
@@ -0,0 +1,62 @@
+import { useEffect } from 'react'
+import { RiFullscreenLine, RiFullscreenExitLine } from 'react-icons/ri'
+
+import { cn } from '@/lib/utils'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import { useFullscreenStatus } from '@/lib/hooks'
+
+export function ToggleFullScreen({
+  className = '',
+}: {
+  className?: string
+} = {}) {
+  const [isFullscreen, setFullscreen, ref] = useFullscreenStatus()
+
+  // we want the whole body to become fullscreen
+  // TODO: use pointer lock, to prevent the mouse from going up
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      ref.current = document.body
+    }
+  }, [ref])
+
+  return (
+    <Tooltip>
+      <TooltipTrigger className="">
+        <div
+          className={cn(
+            `grid h-4 w-5 scale-100 cursor-pointer grid-cols-4 grid-rows-4 overflow-hidden rounded border border-neutral-100 opacity-70 transition-all duration-200 ease-in-out hover:scale-110 hover:opacity-100`,
+            className
+          )}
+          onClick={() => {
+            setFullscreen(!isFullscreen)
+          }}
+        >
+          <div className="flex h-4 w-4 items-center justify-center">
+            <RiFullscreenLine
+              className={cn(
+                `absolute -mt-0.5 ml-0.5 h-3 w-3`,
+                `transition-all duration-200 ease-in-out`,
+                !isFullscreen ? 'opacity-100' : 'opacity-0'
+              )}
+            />
+            <RiFullscreenExitLine
+              className={cn(
+                `absolute -mt-0.5 ml-0.5 h-3 w-3`,
+                `transition-all duration-200 ease-in-out`,
+                isFullscreen ? 'opacity-100' : 'opacity-0'
+              )}
+            />
+          </div>
+        </div>
+      </TooltipTrigger>
+      <TooltipContent className={cn(`mr-4 mt-2 flex text-xs font-light`)}>
+        Toggle fullscreen
+      </TooltipContent>
+    </Tooltip>
+  )
+}
diff --git a/src/components/toolbars/top-menu/ToggleView/index.tsx b/src/components/toolbars/top-menu/ToggleView/index.tsx
@@ -23,7 +23,7 @@ export function ToggleView({
       <TooltipTrigger className="">
         <div
           className={cn(
-            `group grid h-4 w-5 scale-100 cursor-pointer grid-cols-4 grid-rows-4 overflow-hidden rounded border border-stone-100 opacity-70 transition-all duration-200 ease-in-out hover:scale-110 hover:opacity-100`
+            `group grid h-4 w-5 scale-100 cursor-pointer grid-cols-4 grid-rows-4 overflow-hidden rounded border border-neutral-100 opacity-70 transition-all duration-200 ease-in-out hover:scale-110 hover:opacity-100`
           )}
           onClick={() => {
             setVisible(!isVisible)
@@ -32,7 +32,9 @@ export function ToggleView({
           <div
             className={cn(
               `flex transition-all duration-200 ease-in-out group-hover:scale-110 group-hover:border-stone-100`,
-              isVisible ? `border-stone-100 bg-stone-400` : `border-stone-400`,
+              isVisible
+                ? `border-neutral-100 bg-neutral-400`
+                : `border-neutral-400`,
               className
             )}
           ></div>