diff --git a/bun.lockb b/bun.lockb index c3f1cb8b..b283d947 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/packages/timeline/package.json b/packages/timeline/package.json index 2df1de55..993ae04f 100644 --- 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 new file mode 100644 index 00000000..2e7af2b7 --- /dev/null +++ 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 index d751da82..a32f3c8a 100644 --- 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 index 3e7baa72..fe1be9af 100644 --- 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 new file mode 100644 index 00000000..0c991918 --- /dev/null +++ b/packages/timeline/src/demo.css @@ -0,0 +1,8 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +#root { + width: 100vw; + height: 100vh; +} \ No newline at end of file diff --git a/packages/timeline/src/demo.tsx b/packages/timeline/src/demo.tsx index 85752c2f..6e2070a9 100644 --- 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( -
Hello
-
- -
+ -); \ No newline at end of file +) diff --git a/packages/timeline/src/index.tsx b/packages/timeline/src/index.tsx index 7e6cb1c6..b6996970 100644 --- 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 index 658f23f8..1edc2f56 100644 --- 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,7 +17,7 @@ export { TimelineStoreModifiers } from "./timeline" -export { +export type { ClapTimelineTheme, ClapSegmentCategoryHSL, ClapSegmentCategoryColors, @@ -22,6 +25,9 @@ export { } from "./theme" export { - RenderingStrategy, + RenderingStrategy +} from "./rendering" + +export type { SegmentResolver } from "./rendering" \ No newline at end of file