@aitube/timeline

React component to display an OpenClap timeline

Introduction

This library is not ready for public use yet.

This is a "build in public" project so code is open and provided for convenience and discussion, but there is no official release yet (documentation will be written once the library is useable).

Thanks for your patience!

Installation

Note: as warned before, this library is not ready for public use yet.

I cannot provide support until the basic features have been implemented and some critical bugs fixed.

npm install @aitube/timeline

Depending on your project configuration and package manager, you may need to install some additional packages manually, such as React, Radix, Tailwind, Three.js, Zustand etc:

npm install @aitube/clap @radix-ui/react-slider @react-spring/three @react-spring/types @react-three/drei @react-three/fiber @types/react @types/react-dom react react-dom tailwindcss three typescript zustand

If you forget some dependencies you might get weird errors

Building

You can see in the package.json that I set NODE_ENV=production while building, that's because of a weirdness with Bun: https://github.com/oven-sh/bun/issues/3768

If you are developping the timeline, I recommend to use:

bun run build:dev

to build with the jsxDEV enabled.

You will also want to use a path like this to test the module directly dependency:

 "@aitube/timeline": "file:/Users/jbilcke/Projects/Typescript_Libraries/aitube-timeline",

Future extensions

This project is currently not designed to be used with other tools such as Svelte, Vue, or other state manager. In the future it may be split into sub-libraries to facilitate support for alternative frameworks.

TODO

[ ] BUG: the scrollY position is a bit janky, one should solve the formula [ ] OPTIM: we should avoid re-creating geometries (eg. grids, cells) and text since this is costly [ ] FEATURE: Add edit callbacks [ ] CLEAN: Write doc [ ] BUG: Fix the Vite previewer