66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
import { FC } from "react";
|
|
import { Reorder } from "framer-motion";
|
|
import TimePicker from "./Timepicker";
|
|
import { useEntitiesStore } from "stores/entities.store";
|
|
import Timestamp from "./Timestamp";
|
|
import { PauseIcon, PlayIcon } from "@radix-ui/react-icons";
|
|
import { useRenderStateStore } from "stores/render-state.store";
|
|
import Track from "./Track";
|
|
|
|
export type AnimationEntity = {
|
|
offset: number;
|
|
duration: number;
|
|
};
|
|
|
|
type TimelineProps = {};
|
|
|
|
const Timeline: FC<TimelineProps> = () => {
|
|
const { entities, setEntities } = useEntitiesStore((store) => ({
|
|
entities: store.entities,
|
|
setEntities: store.setEntities,
|
|
}));
|
|
|
|
const { setPlaying } = useRenderStateStore((store) => ({
|
|
setPlaying: store.setPlaying,
|
|
}));
|
|
|
|
return (
|
|
<div className="flex flex-col grow shrink h-fit p-4 border transition-colors focus-within:border-gray-400 border-gray-600 rounded-md">
|
|
<div className="flex flex-row">
|
|
<div className="flex flex-row">
|
|
<button onClick={() => setPlaying(true)} className="w-8 h-8">
|
|
<PlayIcon color="white" width="100%" height="100%" />
|
|
</button>
|
|
<button onClick={() => setPlaying(false)} className="w-8 h-8">
|
|
<PauseIcon color="white" width="100%" height="100%" />
|
|
</button>
|
|
</div>
|
|
<Timestamp />
|
|
</div>
|
|
<div className="gap-1 w-full flex flex-col overflow-x-auto overflow-y-visible">
|
|
<div className="z-20 flex flex-row gap-2">
|
|
<div className="flex-shrink-0 min-w-[200px]" />
|
|
<TimePicker />
|
|
</div>
|
|
<Reorder.Group
|
|
className="gap-1 flex flex-col"
|
|
values={entities}
|
|
onReorder={setEntities}
|
|
>
|
|
{entities.map((entity, index) => (
|
|
<Track
|
|
entity={entity}
|
|
key={entity.id}
|
|
name={entity.type}
|
|
index={index}
|
|
animationData={entity.animation_data}
|
|
/>
|
|
))}
|
|
</Reorder.Group>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Timeline;
|