Merge pull request #41 from devniel/fix-timeline-demo

fix: timeline demo.tsx
jbilcke-hf · Aug 16, 2024 · e2bd6de · e2bd6de
2 parents 3f69947 + 45a7a25
commit e2bd6de
Show file tree

Hide file tree

Showing 9 changed files with 249 additions and 14 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/packages/timeline/package.json b/packages/timeline/package.json
@@ -23,10 +23,12 @@
     "@typescript-eslint/eslint-plugin": "^7.17.0",
     "@typescript-eslint/parser": "^7.17.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
     "bun-types": "latest",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.9",
+    "postcss": "^8.4.41",
     "prettier": "^3.3.3",
     "rimraf": "^6.0.1",
     "typescript": "^5.5.4",
@@ -45,7 +47,7 @@
     "react-dom": "*",
     "react-virtualized-auto-sizer": "^1.0.24",
     "tailwind-merge": "^2.4.0",
-    "tailwindcss": "^3.4.6",
+    "tailwindcss": "^3.4.10",
     "three": "^0.164.1",
     "zustand": "4.5.2"
   },

diff --git a/packages/timeline/postcss.config.js b/packages/timeline/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/packages/timeline/src/components/camera/index.ts b/packages/timeline/src/components/camera/index.ts
@@ -1,2 +1,2 @@
 export { TimelineCamera } from "./TimelineCamera"
-export { TimelineCameraImpl } from "./types"
+export type { TimelineCameraImpl } from "./types"
diff --git a/packages/timeline/src/components/cells/index.tsx b/packages/timeline/src/components/cells/index.tsx
@@ -2,4 +2,4 @@ export { Cell } from "./Cell"
 export { ImageCell } from "./ImageCell"
 export { VideoCell } from "./VideoCell"
 export { TextCell } from "./TextCell"
-export { SpecializedCellProps } from "./types"
+export type { SpecializedCellProps } from "./types"
diff --git a/packages/timeline/src/demo.css b/packages/timeline/src/demo.css
@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+#root {
+    width: 100vw;
+    height: 100vh;
+}
diff --git a/packages/timeline/src/demo.tsx b/packages/timeline/src/demo.tsx
@@ -1,16 +1,226 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
+import './demo.css'
 
-import { Timeline } from '.'
+import { ClapTimeline, useTimeline } from '.'
 
 const container = document.getElementById('root')
 const root = createRoot(container!)
 
+const segment = {
+  id: '105246fd-7be3-4dfa-9596-01068ad858e9',
+  track: 1,
+  startTimeInMs: 0,
+  endTimeInMs: 500 * 4,
+  category: 'VIDEO',
+  entityId: '',
+  workflowId: '',
+  sceneId: '7d12441e-e002-4882-80e0-37c09fde5dc9',
+  startTimeInLines: 0,
+  endTimeInLines: 0,
+  prompt: 'movie',
+  label: 'movie',
+  outputType: 'VIDEO',
+  renderId: '',
+  status: 'TO_GENERATE',
+  assetUrl: '',
+  assetDurationInMs: 1000,
+  assetSourceType: 'EMPTY',
+  assetFileFormat: '',
+  revision: 0,
+  createdAt: '2024-08-15T21:08:38.438Z',
+  createdBy: 'auto',
+  editedBy: 'auto',
+  outputGain: 0,
+  seed: 1523799474,
+  visibility: 'VISIBLE',
+  textures: {},
+  isSelected: false,
+  isHovered: false,
+  isActive: false,
+  isPlaying: false,
+  isHoveredOnBody: false,
+  isHoveredOnLeftHandle: false,
+  isHoveredOnRightHandle: false,
+  isGrabbedOnBody: false,
+  isGrabbedOnLeftHandle: false,
+  isGrabbedOnRightHandle: false,
+  editionStatus: 'EDITABLE',
+}
+
+useTimeline.setState({
+  totalDurationInMs: 2000,
+  theme: {
+    topBarTimeScale: {
+      backgroundColor: '#7d7c78',
+      textColor: '#ffffff',
+      lineColor: '#E6E6E6',
+    },
+    leftBarTrackScale: {
+      backgroundColor: '#7d7c78',
+      textColor: '#ffffff',
+      lineColor: '#B3B3B3',
+    },
+    grid: {
+      backgroundColor: '#292524',
+    },
+    cell: {
+      categoryColors: {
+        SPLAT: {
+          hue: 347,
+          saturation: 30,
+          lightness: 78.6,
+        },
+        MESH: {
+          hue: 32,
+          saturation: 30,
+          lightness: 78.6,
+        },
+        DEPTH: {
+          hue: 242,
+          saturation: 30,
+          lightness: 78.6,
+        },
+        EVENT: {
+          hue: 270,
+          saturation: 30,
+          lightness: 78.6,
+        },
+        EFFECT: {
+          hue: 270,
+          saturation: 30,
+          lightness: 78.6,
+        },
+        INTERFACE: {
+          hue: 216,
+          saturation: 30,
+          lightness: 78.6,
+        },
+        PHENOMENON: {
+          hue: 270,
+          saturation: 30,
+          lightness: 78.6,
+        },
+        VIDEO: {
+          hue: 70,
+          saturation: 30,
+          lightness: 78.6,
+        },
+        STORYBOARD: {
+          hue: 70,
+          saturation: 30,
+          lightness: 78.6,
+        },
+        TRANSITION: {
+          hue: 55,
+          saturation: 30,
+          lightness: 78.6,
+        },
+        CHARACTER: {
+          hue: 285.8,
+          saturation: 30,
+          lightness: 78.6,
+        },
+        LOCATION: {
+          hue: 80.9,
+          saturation: 30,
+          lightness: 78.6,
+        },
+        TIME: {
+          hue: 250,
+          saturation: 30,
+          lightness: 78.6,
+        },
+        ERA: {
+          hue: 250,
+          saturation: 30,
+          lightness: 78.6,
+        },
+        LIGHTING: {
+          hue: 50,
+          saturation: 30,
+          lightness: 78.6,
+        },
+        WEATHER: {
+          hue: 197.2,
+          saturation: 30,
+          lightness: 78.6,
+        },
+        ACTION: {
+          hue: 3,
+          saturation: 30,
+          lightness: 78.6,
+        },
+        MUSIC: {
+          hue: 100,
+          saturation: 30,
+          lightness: 78.6,
+        },
+        SOUND: {
+          hue: 60,
+          saturation: 30,
+          lightness: 78.6,
+        },
+        DIALOGUE: {
+          hue: 23,
+          saturation: 30,
+          lightness: 78.6,
+        },
+        STYLE: {
+          hue: 285,
+          saturation: 30,
+          lightness: 78.6,
+        },
+        CAMERA: {
+          hue: 10,
+          saturation: 30,
+          lightness: 78.6,
+        },
+        GENERIC: {
+          hue: 200,
+          saturation: 30,
+          lightness: 78.6,
+        },
+      },
+      waveform: {
+        lineSpacing: 2,
+        gradientStart: 1,
+        gradientEnd: 0.6,
+      },
+    },
+    playbackCursor: {
+      lineColor: '#FACC15',
+    },
+  },
+  loadedSegments: [segment],
+  tracks: [
+    {
+      id: 0,
+      name: '(empty)',
+      isPreview: false,
+      height: 48,
+      hue: 0,
+      occupied: false,
+      visible: true,
+      contentHeight: 48,
+    },
+    {
+      id: 1,
+      name: 'VIDEO',
+      isPreview: true,
+      height: 100,
+      hue: 0,
+      occupied: true,
+      visible: true,
+      contentHeight: 100,
+    },
+  ],
+  segments: [segment],
+  visibleSegments: [segment],
+})
+
 root.render(
   <React.StrictMode>
-    <div>Hello</div>
-    <div style={{ width: "100vw", height: "100vh", padding: 0, margin: 0 }}>
-      <Timeline width={800} height={600} />
-    </div>
+    <ClapTimeline className="w-[1000px] h-[400px]" />
   </React.StrictMode>
-);
+)
diff --git a/packages/timeline/src/index.tsx b/packages/timeline/src/index.tsx
@@ -71,6 +71,10 @@ export {
 export {
   SegmentVisibility,
   SegmentEditionStatus,
+  RenderingStrategy,
+} from "./types"
+
+export type {
   BrowserOnlySegmentData,
   TimelineSegment,
   ContentSizeMetrics,
@@ -82,8 +86,7 @@ export {
   ClapSegmentCategoryHSL,
   ClapSegmentCategoryColors,
   ClapSegmentColorScheme,
-  RenderingStrategy,
- type SegmentResolver,
+  SegmentResolver,
 } from "./types"
 
 export { ClapTimeline } from "./ClapTimeline"

diff --git a/packages/timeline/src/types/index.ts b/packages/timeline/src/types/index.ts
@@ -1,11 +1,14 @@
 
-export {
+export type {
   RenderedCell
 } from "./grid"
 
 export {
   SegmentVisibility,
   SegmentEditionStatus,
+} from "./timeline"
+
+export type {
   BrowserOnlySegmentData,
   TimelineSegment,
   ContentSizeMetrics,
@@ -14,14 +17,17 @@ export {
   TimelineStoreModifiers
 } from "./timeline"
 
-export {
+export type {
   ClapTimelineTheme,
   ClapSegmentCategoryHSL,
   ClapSegmentCategoryColors,
   ClapSegmentColorScheme
 } from "./theme"
 
 export {
-  RenderingStrategy,
+  RenderingStrategy
+} from "./rendering"
+
+export type {
   SegmentResolver
 } from "./rendering"