upgrade dependencies and fix README.md

.gitattributes

@@ -2,6 +2,6 @@
 *.xcf filter=lfs diff=lfs merge=lfs -text
 *.jpeg filter=lfs diff=lfs merge=lfs -text
 *.jpg filter=lfs diff=lfs merge=lfs -text
-public/datasets/baby-names-us-year-of-birth-full.csv filter=lfs diff=lfs merge=lfs -text
+*.csv filter=lfs diff=lfs merge=lfs -text
 *.png filter=lfs diff=lfs merge=lfs -text
 *.excalidraw filter=lfs diff=lfs merge=lfs -text

README.md

@@ -60,11 +60,40 @@ Clapper is under a GPL v3 licence, see the [LICENCE](LICENSE.txt) file for more
 
 ### Installation
 
+### Prerequisites
+
+As a prerequisite you need to have [git lfs](https://git-lfs.com/) installed (see the `.gitattributes` file at the root of project):
+
+```bash
+git lfs install
+```
+
+Clapper has been tested with Node `20.9.*`.
+
+To make sure you use this version, you can use [NVM](https://github.com/nvm-sh/nvm) to activate it:
+
+```bash
+nvm use
+```
+
+If you find that Clapper is working with a more recent (stable) version of Node, or have a better version management to suggest, please open a ticket.
+
+### Installing and running the app
+
 ```bash
 npm i
 npm run dev
 ```
 
+### Making sure everything is working properly
+
+There are no tests yet (I will create a ticket for that),
+but until then you can run the following command to make sure all the types are consistant and properly set:
+
+```bash
+npm run build
+```
+
 ### Code conventions
 
 I haven't setup Prettier or a Linter yet.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aitube/clapper",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "private": true,
   "description": "🎬 Clapper",
   "scripts": {
@@ -12,9 +12,9 @@
   "dependencies": {
     "@aitube/broadway": "0.0.22",
     "@aitube/clap": "0.0.30",
-    "@aitube/clapper-services": "0.0.16",
+    "@aitube/clapper-services": "0.0.22",
     "@aitube/engine": "0.0.26",
-    "@aitube/timeline": "0.0.40",
+    "@aitube/timeline": "0.0.42",
     "@fal-ai/serverless-client": "^0.11.0",
     "@gradio/client": "^1.1.1",
     "@huggingface/hub": "^0.15.1",

public/samples/claps/empty_project.clap

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:42bb7d554f5209f9c0e801c3d71b3b11730f80a2c7a39cf4ac7baf94743d7be1
+size 375

public/samples/claps/empty_project.yaml

@@ -0,0 +1,24 @@
+- format: clap-0
+  numberOfEntities: 0
+  numberOfScenes: 0
+  numberOfSegments: 27
+- id: 5ffcfd0b-cb91-465e-87b6-bde41037373e
+  title: ""
+  description: An exciting new project
+  synopsis: ""
+  licence: ""
+  orientation: landscape
+  durationInMs: 18000
+  width: 1024
+  height: 575
+  defaultVideoModel: AnimateDiff-Lightning
+  extraPositivePrompt: []
+  screenplay: ""
+  isLoop: false
+  isInteractive: false
+- id: e16478cf-3535-48e9-98e8-f702ec9ca348
+  track: 0
+  startTimeInMs: 0
+  endTimeInMs: 0
+  category: video
+  outputType: video

src/components/editors/EntityEditor/index.tsx

@@ -1,88 +1,208 @@
-import { TimelineSegment, useTimeline } from "@aitube/timeline"
+import { useEffect } from "react";
+import { ClapEntity, ClapSegmentCategory, newEntity } from "@aitube/clap";
+import { useTimeline } from "@aitube/timeline";
 
-import { FormFile } from "@/components/forms/FormFile"
-import { FormInput } from "@/components/forms/FormInput"
-import { FormSection } from "@/components/forms/FormSection"
-import { useEntityEditor, useRenderer } from "@/services"
-import { useEffect } from "react"
-import { ClapEntity, ClapProject } from "@aitube/clap"
+import { FormFile } from "@/components/forms/FormFile";
+import { FormInput } from "@/components/forms/FormInput";
+import { FormSection } from "@/components/forms/FormSection";
+import { FormSelect } from "@/components/forms/FormSelect";
+import { Button } from "@/components/ui/button";
+import { useEntityEditor, useIO } from "@/services";
+
+function EntityList({ onSelectEntity }: {
+  onSelectEntity: (entityId: string) => void;
+}) {
+  const entities = useTimeline(s => s.entities);
+  const setCurrent = useEntityEditor(s => s.setCurrent);
+  const addEntity = useEntityEditor(s => s.addEntity);
+  const removeEntity = useEntityEditor(s => s.removeEntity);
+
+  const handleAddEntity = () => {
+    const entity: ClapEntity = newEntity({
+      id: Date.now().toString(),
+      label: "NEW_ENTITY",
+      category: ClapSegmentCategory.CHARACTER,
+      description: "",
+      appearance: "",
+    }); // ignoring some fields for now
+    addEntity(entity);
+  };
+
+  return (
+    <div className="pt-4">
+      <div className="mb-2">
+        <h1 className="px-4 mb-4 text-xl font-bold inline">Entities</h1>
+        <Button onClick={handleAddEntity} className="absolute top-2 right-2" variant="secondary">
+          New +
+        </Button>
+      </div>
+      <ul>
+        {entities.map((entity: ClapEntity) => (
+          <li key={entity.id} className={`flex py-1 px-2`}>
+            <Button
+              onClick={() => {
+                setCurrent(entity);
+                onSelectEntity(entity.id);
+              }}
+              variant="ghost"
+            >
+              {entity.label} ({entity.category})
+            </Button>
+            <Button onClick={() => removeEntity(entity.id)} className={`ml-2 ml-auto`} variant="destructive" size="sm">
+              Remove
+            </Button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
 
 export function EntityEditor() {
-  const clap: ClapProject = useTimeline(s => s.clap)
-
-  const segmentsChanged: number = useTimeline(s => s.segmentsChanged)
-  const selectedSegments: TimelineSegment[] = useTimeline(s => s.selectedSegments)
-  const { activeSegments } = useRenderer(s => s.bufferedSegments)
-
-  const current = useEntityEditor(s => s.current)
-  const setCurrent = useEntityEditor(s => s.setCurrent)
-  const history = useEntityEditor(s => s.history)
-  const undo = useEntityEditor(s => s.undo)
-  const redo = useEntityEditor(s => s.redo)
-
-  let segment = selectedSegments.at(-1)
-  let entity: ClapEntity | undefined = clap.entityIndex[segment?.entityId as any]
- 
-  if (!entity) {
-    segment = activeSegments.find(s => clap.entityIndex[s?.entityId as any])
-    entity = clap.entityIndex[segment?.entityId as any]
-  }
+  const entities = useTimeline(s => s.entities);
+  const updateEntities = useTimeline(s => s.updateEntities);
+
+  const saveEntitiesToClap = useIO(s => s.saveEntitiesToClap);
+  const openEntitiesFromClap = useIO(s => s.openEntitiesFromClap);
+
+  const current = useEntityEditor(s => s.current);
+  const setCurrent = useEntityEditor(s => s.setCurrent);
+
+  const draft = useEntityEditor(s => s.draft);
+  const setDraft = useEntityEditor(s => s.setDraft);
+
+  const showEntityList = useEntityEditor(s => s.showEntityList);
+  const setShowEntityList = useEntityEditor(s => s.setShowEntityList);
 
   useEffect(() => {
-    setCurrent(entity)
-  }, [clap, entity, segmentsChanged])
+    setCurrent(entities.at(0));
+  }, [entities, setCurrent]);
 
-  if (!current) {
-    return <div>
-      No Entity selected
-    </div>
-  }
+  useEffect(() => {
+    setDraft(current);
+  }, [current, setDraft]);
+
+  const handleInputChange = (field: keyof ClapEntity, value: string | number | undefined) => {
+    if (!draft) { return }
+    let updatedValue = value;
+    if (field === "age") {
+      updatedValue = value === "" ? undefined : parseInt(value as string);
+    }
+    if (field === "label") {
+      updatedValue = value?.toString().toUpperCase();
+    }
+    
+    setDraft({ ...draft, [field]: updatedValue })
+  };
+
+  const handleSave = () => {
+    if (!draft) { return }
+    updateEntities([ draft ]);
+  };
+
+  const handleFileUpload = async (field: "imageId" | "audioId", file: File) => {
+    if (!draft) { return }
+    const dataUrl = await new Promise<string>((resolve) => {
+      const reader = new FileReader();
+      reader.onload = (e) => resolve(e.target?.result as string);
+      reader.readAsDataURL(file);
+    });
+    setDraft({ ...draft, [field]: dataUrl });
+  };
+
+  const handleExport = async () => {
+    if (!draft) { return }
+    await saveEntitiesToClap([ draft ]);
+  };
+
+  const handleImport = async (file: File) => {
+    await openEntitiesFromClap(file);
+  };
+
+  const handleBack = () => {
+    setShowEntityList(true);
+  };
+
+  const handleSelectEntity = (entityId: string) => {
+    setShowEntityList(false);
+  };
 
-  // TODO: adapt the editor based on the kind of
-  // entity (character, location..)
-  //
-  // I think we can use UI elements of our legacy character editor
-  // that I did in a Hugging Face space
   return (
-    <FormSection
-      label={"Entity editor"}
-      className="p-4">
-        <label>Visual identity</label>
-        {current?.imageId
-          ? <img src={current?.imageId}></img>
-          : null}
-        <FormFile
-          label={"Visual identity file (TODO)"}
-        />
-        {/*
-        <FormInput<string>
-          label={"Audio identity"}
-          value={current?.audioId.slice(0, 20)}
-        />
-        */}
-        <FormFile
-          label={"Audio identity file (TODO)"}
-        />
-        <FormInput<string>
-          label={"Label"}
-          value={current.label}
-        />
-        <FormInput<string>
-          label={"Description"}
-          value={current.description}
-        />
-        <FormInput<number>
-          label={"Age"}
-          value={current.age}
-        />
-        <FormInput<string>
-          label={"Gender"}
-          value={current.gender}
-        />
-        <FormInput<string>
-          label={"Appearance"}
-          value={current.appearance}
-        />
-      </FormSection>
-  )
+    <div className="flex flex-col w-full h-full overflow-x-auto">
+      {showEntityList ? (
+        <div className="mb-4">
+          <EntityList onSelectEntity={handleSelectEntity} />
+        </div>
+      ) : (
+        <div className="flex">
+          {draft && (
+            <FormSection className="px-2">
+              <Button onClick={handleBack}>Back</Button>
+              <FormInput
+                label="Identifier (UPPERCASE)"
+                value={draft.label || ""}
+                onChange={(value) => handleInputChange("label", value)}
+              />
+              <FormSelect<ClapSegmentCategory>
+                label="Category"
+                selectedItemId={draft.category}
+                items={Object.values(ClapSegmentCategory).map((category: ClapSegmentCategory) => ({
+                  id: category,
+                  label: category,
+                  value: category,
+                }))}
+                onSelect={(value) => handleInputChange("category", value)}
+              />
+              {/* ... form fields ... */}
+              <FormFile
+                label="Visual Identity"
+                onChange={(files) => files[0] && handleFileUpload("imageId", files[0])}
+              />
+              {draft.imageId && (
+                <div className="mt-2">
+                  <img src={draft.imageId} alt="Entity Preview" className="max-w-full h-auto" />
+                </div>
+              )}
+              <FormFile
+                label="Audio Identity"
+                onChange={(files) => files[0] && handleFileUpload("audioId", files[0])}
+              />
+              {draft.audioId && (
+                <div className="mt-2">
+                  <audio controls src={draft.audioId} />
+                </div>
+              )}
+              <FormInput
+                label="Description"
+                value={draft.description || ""}
+                onChange={(value) => handleInputChange("description", value)}
+              />
+              <FormInput
+                label="Appearance"
+                value={draft.appearance || ""}
+                onChange={(value) => handleInputChange("appearance", value)}
+              />
+              <FormInput
+                label="Age"
+                value={draft.age?.toString() || ""}
+                onChange={(value) => handleInputChange("age", value)}
+              />
+              <FormInput
+                label="Gender"
+                value={draft.gender || ""}
+                onChange={(value) => handleInputChange("gender", value)}
+              />
+              <div className="mt-4 flex space-x-2">
+                <Button onClick={handleSave}>Save</Button>
+                <Button onClick={handleExport}>Export</Button>
+              </div>
+              <div className="mt-4 flex space-x-2">
+                <FormFile label="Import" onChange={(files) => files[0] && handleImport(files[0])} />
+              </div>
+            </FormSection>
+          )}
+        </div>
+      )}
+    </div>
+  );
 }

src/components/tasks/useTasks.tsx

@@ -342,6 +342,3 @@ export const useTasks = create<TasksStore>((set, get) => ({
   }
 }));
 
-if (typeof window !== "undefined") {
-  (window as any).useTasks = useTasks;
-}

src/components/toolbars/top-menu/file/index.tsx

@@ -3,10 +3,10 @@ import { useEffect } from "react"
 import { useTimeline } from "@aitube/timeline"
 import { useHotkeys } from "react-hotkeys-hook"
 
-import { MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarTrigger } from "@/components/ui/menubar"
+import { MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from "@/components/ui/menubar"
 import { useOpenFilePicker, useQueryStringParams } from "@/lib/hooks"
 import { IframeWarning } from "@/components/dialogs/iframe-warning"
-import { useIO } from "@/services/io/useIO"
+import { useIO, useUI } from "@/services"
 
 export function TopMenuFile() {
   const { clapUrl } = useQueryStringParams({
@@ -31,6 +31,8 @@ export function TopMenuFile() {
   const saveZipFile = useIO(s => s.saveZipFile)
   const saveKdenline = useIO(s => s.saveKdenline)
 
+  const hasBetaAccess = useUI(s => s.hasBetaAccess)
+
   useEffect(() => {
     (async () => {
       if (!clapUrl) {
@@ -55,6 +57,13 @@ export function TopMenuFile() {
     <MenubarMenu>
       <MenubarTrigger>File</MenubarTrigger>
       <MenubarContent>
+        {hasBetaAccess &&
+          <MenubarItem onClick={() => {
+            openClapUrl('/samples/claps/empty_project.clap')
+          }}>
+            New Project<MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+        }
         <MenubarItem onClick={() => {
           openFilePicker()
         }}>
@@ -67,6 +76,17 @@ export function TopMenuFile() {
           Save project (.clap)<MenubarShortcut>⌘S</MenubarShortcut>
         </MenubarItem>
         <MenubarSeparator />
+        <MenubarSub>
+          <MenubarSubTrigger>Examples</MenubarSubTrigger>
+          <MenubarSubContent>
+            <MenubarItem onClick={() => {
+              openClapUrl('/samples/claps/wasteland.clap')
+            }}>
+              Wasteland
+            </MenubarItem>
+          </MenubarSubContent>
+        </MenubarSub>
+        <MenubarSeparator />
         {/*
         <MenubarItem
         onClick={() => {

src/services/assistant/useAssistant.ts

@@ -279,7 +279,3 @@ export function useInitAssistant() {
     setVoiceTranscript(transcript)
   }, [transcript])
 }
-
-if (typeof window !== "undefined") {
-  (window as any).useAssistant = useAssistant
-}

src/services/audio/useAudio.ts

@@ -101,8 +101,3 @@ export const useAudio = create<AudioStore>((set, get) => ({
     })
   },
 }))
-
-
-if (typeof window !== "undefined") {
-  (window as any).useAudio = useAudio
-}

src/services/broadcast/useBroadcast.ts

@@ -24,7 +24,3 @@ export const useBroadcast = create<BroadcastStore>((set, get) => ({
     return isBroadcasting
   },
 }))
-
-if (typeof window !== "undefined") {
-  (window as any).useBroadcast = useBroadcast
-}

src/services/debug.ts

@@ -0,0 +1,36 @@
+import { useTasks } from "@/components/tasks/useTasks"
+import { useAssistant } from "./assistant/useAssistant"
+import { useAudio } from "./audio/useAudio"
+import { useBroadcast } from "./broadcast/useBroadcast"
+import { useEditors, useEntityEditor, useProjectEditor, useScriptEditor, useSegmentEditor } from "./editors"
+import { useIO } from "./io/useIO"
+import { useMetrics } from "./metrics/useMetrics"
+import { useMonitor } from "./monitor/useMonitor"
+import { useRenderer } from "./renderer/useRenderer"
+import { useResolver } from "./resolver/useResolver"
+import { useSettings } from "./settings/useSettings"
+import { useSimulator } from "./simulator/useSimulator"
+import { useUI } from "./ui/useUI"
+
+// those are just used for developer convenience
+// to help debug things in the chrome developer console
+if (typeof window !== "undefined") {
+  const w = window as any
+  w.useTasks = useTasks
+  w.useAssistant = useAssistant
+  w.useAudio = useAudio
+  w.useBroadcast = useBroadcast
+  w.useEditors = useEditors
+  w.useEntityEditor = useEntityEditor
+  w.useProjectEditor = useProjectEditor
+  w.useScriptEditor = useScriptEditor
+  w.useSegmentEditor = useSegmentEditor
+  w.useIO = useIO
+  w.useMetrics = useMetrics
+  w.useMonitor = useMonitor
+  w.useRenderer = useRenderer
+  w.useResolver = useResolver
+  w.useSettings = useSettings
+  w.useSimulator = useSimulator
+  w.useUI = useUI
+}

src/services/editors/entity-editor/getDefaultEntityEditorState.ts

@@ -5,6 +5,9 @@ export function getDefaultEntityEditorState(): EntityEditorState {
     current: undefined,
     version: 0,
     history: [],
+
+    draft: undefined,
+    showEntityList: false,
   }
 
   return state

src/services/editors/entity-editor/useEntityEditor.ts

@@ -1,19 +1,31 @@
-"use client"
-
 import { create } from "zustand"
 import { ClapEntity } from "@aitube/clap"
 import { EntityEditorStore } from "@aitube/clapper-services"
+import { TimelineStore, useTimeline } from "@aitube/timeline"
 
 import { getDefaultEntityEditorState } from "./getDefaultEntityEditorState"
 
 export const useEntityEditor = create<EntityEditorStore>((set, get) => ({
   ...getDefaultEntityEditorState(),
-  setCurrent: (current?: ClapEntity) => { set({ current }) },
+  setCurrent: (current?: ClapEntity) => set({ current }),
   undo: () => {},
   redo: () => {},
+  setDraft: (draft?: ClapEntity) => set({ draft }),
+  selectEntity: (id: string) => {
+    const { entityIndex }: TimelineStore = useTimeline.getState()
+    set({ current: entityIndex[id] })
+  },
+  addEntity: (entity: ClapEntity) => {
+    const { addEntities }: TimelineStore = useTimeline.getState()
+    addEntities([entity])
+    get().setCurrent(entity)
+  },
+  removeEntity: (id: string) => {
+    const { deleteEntities }: TimelineStore = useTimeline.getState()
+    deleteEntities([id])
+    get().setCurrent(undefined)
+  },
+  setShowEntityList: (showEntityList: boolean) => {
+    set({ showEntityList })
+  }
 }))
-
-
-if (typeof window !== "undefined") {
-  (window as any).useEntityEditor = useEntityEditor
-}

src/services/editors/project-editor/useProjectEditor.ts

@@ -19,8 +19,3 @@ export const useProjectEditor = create<ProjectEditorStore>((set, get) => ({
   undo: () => {},
   redo: () => {},
 }))
-
-
-if (typeof window !== "undefined") {
-  (window as any).useProjectEditor = useProjectEditor
-}

src/services/editors/script-editor/useScriptEditor.ts

@@ -207,8 +207,3 @@ export const useScriptEditor = create<ScriptEditorStore>((set, get) => ({
   undo: () => {},
   redo: () => {},
 }))
-
-
-if (typeof window !== "undefined") {
-  (window as any).useScriptEditor = useScriptEditor
-}

src/services/editors/segment-editor/useSegmentEditor.ts

@@ -12,8 +12,3 @@ export const useSegmentEditor = create<SegmentEditorStore>((set, get) => ({
   undo: () => {},
   redo: () => {},
 }))
-
-
-if (typeof window !== "undefined") {
-  (window as any).useSegmentEditor = useSegmentEditor
-}

src/services/editors/useEditors.ts

@@ -10,7 +10,3 @@ export const useEditors = create<EditorsStore>((set, get) => ({
   setView: (view: EditorView) => { set({ view }) },
 }))
 
-
-if (typeof window !== "undefined") {
-  (window as any).useEditors = useEditors
-}

src/services/index.ts

@@ -18,4 +18,6 @@ export { useRenderer } from "./renderer/useRenderer"
 export { useResolver } from "./resolver/useResolver"
 export { useSettings } from "./settings/useSettings"
 export { useUI } from "./ui/useUI"
-export { useTasks }
+export { useTasks }
+
+import "./debug"

src/services/io/useIO.ts

@@ -766,7 +766,3 @@ export const useIO = create<IOStore>((set, get) => ({
     return entities
   },
 }))
-
-if (typeof window !== "undefined") {
-  (window as any).useIO = useIO
-}

src/services/metrics/useMetrics.ts

@@ -10,8 +10,3 @@ export const useMetrics = create<MetricsStore>((set, get) => ({
   
   // TODO: add a track metric callback
 }))
-
-
-if (typeof window !== "undefined") {
-  (window as any).useMetrics = useMetrics
-}

src/services/monitor/useMonitor.ts

@@ -147,8 +147,3 @@ setTimeout(() => {
     useMonitor.getState().bindShortcuts()
   }
 }, 0)
-
-
-if (typeof window !== "undefined") {
-  (window as any).useMonitor = useMonitor
-}

src/services/plugins/usePlugins.ts

@@ -2,22 +2,22 @@
 
 import { create } from "zustand"
 import { ClapperPlugin, ClapperPluginApi, ClapperPluginMeta, PluginsStore, PublicServices } from "@aitube/clapper-services"
+import { useTimeline } from "@aitube/timeline"
 
 import { getDefaultPluginsState } from "./getDefaultPluginsState"
 import { useScriptEditor } from "../editors/script-editor/useScriptEditor"
 import { useMonitor } from "../monitor/useMonitor"
-import { useTimeline } from "@aitube/timeline"
+import { useTasks } from "@/components/tasks/useTasks"
 import { useRenderer } from "../renderer"
 import { useBroadcast } from "../broadcast/useBroadcast"
 import { useResolver } from "../resolver/useResolver"
 import { useAssistant } from "../assistant/useAssistant"
 import { useAudio } from "../audio/useAudio"
 import { useUI } from "../ui"
-
 import { fetchAndRun } from "./fetchAndRun"
-import { useTasks } from "@/components/tasks/useTasks"
 import { useEditors, useEntityEditor, useProjectEditor, useSegmentEditor } from "../editors"
 import { useSimulator } from "../simulator/useSimulator"
+import { useIO } from "../io/useIO"
 
 export const usePlugins = create<PluginsStore>((set, get) => ({
   ...getDefaultPluginsState(),
@@ -62,6 +62,7 @@ export const usePlugins = create<PluginsStore>((set, get) => ({
       broadcast: useBroadcast,
       simulator: useSimulator,
       ui: useUI,
+      io: useIO,
     }
   },
   pluginApiGetSettings: async (id: string) => {

src/services/renderer/useRenderer.ts

@@ -226,7 +226,3 @@ export const useRenderer = create<RendererStore>((set, get) => ({
 
   }
 }))
-
-if (typeof window !== "undefined") {
-  (window as any).useRenderer = useRenderer
-}

src/services/resolver/useResolver.ts

@@ -590,9 +590,4 @@ export const useResolver = create<ResolverStore>((set, get) => ({
     }
     return segment
   }
-
 }))
-
-if (typeof window !== "undefined") {
-  (window as any).useResolver = useResolver
-}

src/services/settings/useSettings.ts

@@ -662,7 +662,3 @@ export const useSettings = create<SettingsStore>()(
     },
   ),
 )
-
-if (typeof window !== "undefined") {
-  (window as any).useSettings = useSettings
-}

src/services/simulator/useSimulator.ts

@@ -28,7 +28,3 @@ export const useSimulator = create<SimulatorStore>((set, get) => ({
     return isRunning
   }
 }))
-
-if (typeof window !== "undefined") {
-  (window as any).useSimulator = useSimulator
-}

src/services/ui/theme.ts

@@ -15,33 +15,31 @@
 
 import { ClapSegmentCategory } from "@aitube/clap"
 import { UITheme, UIThemeName } from "@aitube/clapper-services"
-import { ClapSegmentCategoryHues, ClapTimelineTheme } from "@aitube/timeline"
+import { ClapSegmentCategoryColors } from "@aitube/timeline"
 
-// TODO: give more control here, we should be able to adjust the individual
-// saturation and lightness
-export const baseClapSegmentCategoryHues: ClapSegmentCategoryHues = {
-  [ClapSegmentCategory.SPLAT]: 347,
-  [ClapSegmentCategory.MESH]: 32,
-  [ClapSegmentCategory.DEPTH]: 242,
-  [ClapSegmentCategory.EVENT]: 270,
-  [ClapSegmentCategory.INTERFACE]: 216,
-  [ClapSegmentCategory.PHENOMENON]: 270,
-  [ClapSegmentCategory.VIDEO]: 70,
-  [ClapSegmentCategory.STORYBOARD]: 70,
-  [ClapSegmentCategory.TRANSITION]: 55,
-  [ClapSegmentCategory.CHARACTER]: 285.8,
-  [ClapSegmentCategory.LOCATION]: 80.9,
-  [ClapSegmentCategory.TIME]: 250,
-  [ClapSegmentCategory.ERA]: 250,
-  [ClapSegmentCategory.LIGHTING]: 50,
-  [ClapSegmentCategory.WEATHER]: 197.2,
-  [ClapSegmentCategory.ACTION]: 3,
-  [ClapSegmentCategory.MUSIC]: 100,
-  [ClapSegmentCategory.SOUND]: 60,
-  [ClapSegmentCategory.DIALOGUE]: 23,
-  [ClapSegmentCategory.STYLE]: 285,
-  [ClapSegmentCategory.CAMERA]: 10,
-  [ClapSegmentCategory.GENERIC]: 200,
+export const baseClapSegmentCategoryColors: ClapSegmentCategoryColors = {
+  [ClapSegmentCategory.SPLAT]: { hue: 347, saturation: 30, lightness: 78.6 },
+  [ClapSegmentCategory.MESH]: { hue: 32, saturation: 30, lightness: 78.6 },
+  [ClapSegmentCategory.DEPTH]: { hue: 242, saturation: 30, lightness: 78.6 },
+  [ClapSegmentCategory.EVENT]: { hue: 270, saturation: 30, lightness: 78.6 },
+  [ClapSegmentCategory.INTERFACE]: { hue: 216, saturation: 30, lightness: 78.6 },
+  [ClapSegmentCategory.PHENOMENON]: { hue: 270, saturation: 30, lightness: 78.6 },
+  [ClapSegmentCategory.VIDEO]: { hue: 70, saturation: 30, lightness: 78.6 },
+  [ClapSegmentCategory.STORYBOARD]: { hue: 70, saturation: 30, lightness: 78.6 },
+  [ClapSegmentCategory.TRANSITION]: { hue: 55, saturation: 30, lightness: 78.6 },
+  [ClapSegmentCategory.CHARACTER]: { hue: 285.8, saturation: 30, lightness: 78.6 },
+  [ClapSegmentCategory.LOCATION]: { hue: 80.9, saturation: 30, lightness: 78.6 },
+  [ClapSegmentCategory.TIME]: { hue: 250, saturation: 30, lightness: 78.6 },
+  [ClapSegmentCategory.ERA]: { hue: 250, saturation: 30, lightness: 78.6 },
+  [ClapSegmentCategory.LIGHTING]: { hue: 50, saturation: 30, lightness: 78.6 },
+  [ClapSegmentCategory.WEATHER]: { hue: 197.2, saturation: 30, lightness: 78.6 },
+  [ClapSegmentCategory.ACTION]: { hue: 3, saturation: 30, lightness: 78.6 },
+  [ClapSegmentCategory.MUSIC]: { hue: 100, saturation: 30, lightness: 78.6 },
+  [ClapSegmentCategory.SOUND]: { hue: 60, saturation: 30, lightness: 78.6 },
+  [ClapSegmentCategory.DIALOGUE]: { hue: 23, saturation: 30, lightness: 78.6 },
+  [ClapSegmentCategory.STYLE]: { hue: 285, saturation: 30, lightness: 78.6 },
+  [ClapSegmentCategory.CAMERA]: { hue: 10, saturation: 30, lightness: 78.6 },
+  [ClapSegmentCategory.GENERIC]: { hue: 200, saturation: 30, lightness: 78.6 },
 }
 
 // a grey and yellow theme, inspired by the entertainment world
@@ -86,9 +84,7 @@ export const backstage: UITheme = {
       backgroundColor: "#27272A",
     },
     cell: {
-      saturation: 30,
-      lightness: 78.6,
-      hues: baseClapSegmentCategoryHues,
+      categoryColors: baseClapSegmentCategoryColors,
 
       waveform: {
         // "original" style
@@ -153,10 +149,7 @@ export const midnight: UITheme = {
       backgroundColor: "#27372A",
     },
     cell: {
-      saturation: 30,
-      lightness: 78.6,
-      hues: baseClapSegmentCategoryHues,
-
+      categoryColors: baseClapSegmentCategoryColors,
       waveform: {
         // "original" style
         // lineSpacing: 2,
@@ -219,10 +212,7 @@ export const lavender: UITheme = {
       backgroundColor: "#27272A",
     },
     cell: {
-      saturation: 30,
-      lightness: 78.6,
-      hues: baseClapSegmentCategoryHues,
-
+      categoryColors: baseClapSegmentCategoryColors,
       waveform: {
         // "original" style
         // lineSpacing: 2,
@@ -285,9 +275,7 @@ export const flix: UITheme = {
       backgroundColor: "#27272A",
     },
     cell: {
-      saturation: 30,
-      lightness: 78.6,
-      hues: baseClapSegmentCategoryHues,
+      categoryColors: baseClapSegmentCategoryColors,
 
       waveform: {
         // "original" style
@@ -351,9 +339,7 @@ export const lore: UITheme = {
       backgroundColor: "#27272A",
     },
     cell: {
-      saturation: 30,
-      lightness: 78.6,
-      hues: baseClapSegmentCategoryHues,
+      categoryColors: baseClapSegmentCategoryColors,
 
       waveform: {
         // "original" style
@@ -418,9 +404,7 @@ export const gordon: UITheme = {
       backgroundColor: "#535353",
     },
     cell: {
-      saturation: 30,
-      lightness: 78.6,
-      hues: baseClapSegmentCategoryHues,
+      categoryColors: baseClapSegmentCategoryColors,
 
       waveform: {
         // "original" style
@@ -486,9 +470,7 @@ export const system360: UITheme = {
       backgroundColor: "#f0f0e8",
     },
     cell: {
-      saturation: 30,
-      lightness: 78.6,
-      hues: baseClapSegmentCategoryHues,
+      categoryColors: baseClapSegmentCategoryColors,
 
       waveform: {
         // "original" style
@@ -552,9 +534,30 @@ export const silent: UITheme = {
       backgroundColor: "#1f1f1f",
     },
     cell: {
-      saturation: 0,
-      lightness: 85,
-      hues: baseClapSegmentCategoryHues,
+      categoryColors: {
+        [ClapSegmentCategory.SPLAT]: { hue: 347, saturation: 0, lightness: 85 },
+        [ClapSegmentCategory.MESH]: { hue: 32, saturation: 0, lightness: 85 },
+        [ClapSegmentCategory.DEPTH]: { hue: 242, saturation: 0, lightness: 85 },
+        [ClapSegmentCategory.EVENT]: { hue: 270, saturation: 0, lightness: 85 },
+        [ClapSegmentCategory.INTERFACE]: { hue: 216, saturation: 0, lightness: 85 },
+        [ClapSegmentCategory.PHENOMENON]: { hue: 270, saturation: 0, lightness: 85 },
+        [ClapSegmentCategory.VIDEO]: { hue: 70, saturation: 0, lightness: 85 },
+        [ClapSegmentCategory.STORYBOARD]: { hue: 70, saturation: 0, lightness: 85 },
+        [ClapSegmentCategory.TRANSITION]: { hue: 55, saturation: 0, lightness: 85 },
+        [ClapSegmentCategory.CHARACTER]: { hue: 285.8, saturation: 0, lightness: 85 },
+        [ClapSegmentCategory.LOCATION]: { hue: 80.9, saturation: 0, lightness: 85 },
+        [ClapSegmentCategory.TIME]: { hue: 250, saturation: 0, lightness: 85 },
+        [ClapSegmentCategory.ERA]: { hue: 250, saturation: 0, lightness: 85 },
+        [ClapSegmentCategory.LIGHTING]: { hue: 50, saturation: 0, lightness: 85 },
+        [ClapSegmentCategory.WEATHER]: { hue: 197.2, saturation: 0, lightness: 85 },
+        [ClapSegmentCategory.ACTION]: { hue: 3, saturation: 0, lightness: 85 },
+        [ClapSegmentCategory.MUSIC]: { hue: 100, saturation: 0, lightness: 85 },
+        [ClapSegmentCategory.SOUND]: { hue: 60, saturation: 0, lightness: 85 },
+        [ClapSegmentCategory.DIALOGUE]: { hue: 23, saturation: 0, lightness: 85 },
+        [ClapSegmentCategory.STYLE]: { hue: 285, saturation: 0, lightness: 85 },
+        [ClapSegmentCategory.CAMERA]: { hue: 10, saturation: 0, lightness: 85 },
+        [ClapSegmentCategory.GENERIC]: { hue: 200, saturation: 0, lightness: 85 },
+      },      
 
       waveform: {
         // "original" style
@@ -618,9 +621,7 @@ export const sandy: UITheme = {
       backgroundColor: "#b0a3a3",
     },
     cell: {
-      saturation: 30,
-      lightness: 78.6,
-      hues: baseClapSegmentCategoryHues,
+      categoryColors: baseClapSegmentCategoryColors,
 
       waveform: {
         // "original" style

src/services/ui/useUI.ts

@@ -75,7 +75,3 @@ export const useUI = create<UIStore>()(
     },
   ),
 )
-
-if (typeof window !== "undefined") {
-  (window as any).useUI = useUI
-}