Add support for BPM in the project file and UI

[jbilcke-hf]

Context

If we want to support music videos, we need at least a basic support of BPM (beats per minute)

this will help us product a nice grid alignment

Solution

• Add support for BPM in the project file (meta..)
• UI (counter, detector, form to edit)
• timeline (duration to each cell amount)

Notes

If you search for BPM in the code base, you will see there are already function to detect that.

Note that to work as expected, we will need to make the duration per step variable.

Initially we were using this:

import { DEFAULT_DURATION_IN_MS_PER_STEP } from "@/constants"

But I've just pushed a PR to move this to durationInMsPerStep inside the useTimeline

this is still static, but at least now we have a way to mutate the value of durationInMsPerStep based on the detected BPM

[jbilcke-hf]

partially done, I've added:

• display a global BPM
• can edit the global BPM
• save the BPM to the .clap

However, the BPM isn't fully connected to the timeline grid yet (changing it won't change the alignment of segments yet)

and yes, later we can have BPM per-segment (with segments acting as groups)