brandongregoryscott / beets

Web-based DAW (Digital Audio Workstation) written in React for making music.

Hi there 👋

I'm a software engineer that's passionate about open source software, quality code, new technology, and building things.

• 💻 Primarily working in React & TypeScript
• 🚧 Passion for building tools to make developers' lives easier
• 🤖 Interested in bots and bot frameworks (Twitter/Slack)
• 🍺 Amateur homebrewer

Check out my latest blog post on building ESLint plugins: Beginner's Guide to Custom ESLint Plugins

beets's Issues

Updated file listing / sample library

Again, it would be awesome to be able to have more controls over the library page:

1. Search, sort, filtering
2. Tagging
3. A way to group files into a "sample pack" (does tagging accomplish this? maybe)
4. A way to preview the audio file

Drag & drop reorder TrackSections

After #32 is complete, implement a drag & drop UI for reordering track sections.

Note: It may be desirable to drop a TrackSection "in the middle" of a track, i.e. with a large gap before or after for a specific sample/sound fx/etc to play at a certain point. I'm not sure the current data structure really supports this without scaffolding out empty sections before the desired position, so this may need to be revisited

Update readme with basic usage steps for app

When a track is solo'd, the preview song in the Sequencer/Piano roll is muted

Steps to reproduce:

1. Create a track and solo it
2. Open the sequencer or piano roll for any track and attempt to preview the steps in it

The audio will be muted. Closing out the dialog and removing the solo from the track restores preview functionality.

WorkstationLayout should scroll on overflow

Similar to #78, when there's 6-7+ tracks in a Project, the page should gracefully scroll the inner content

Reorder TrackSections

Implement a basic reordering feature for track sections (left/right arrows could be fine for now)

UI Card for TrackSection/TrackSectionSteps

Once the backend work for #13 and #14 are complete, we should add a visual representation of the sections/steps that have been added via the step sequencer.

After pausing and starting the song with new tracks/steps, samples play twice

A little bit hard to describe, but it seems to be related to playing a track, pausing, editing some steps, and then clicking "Play" on the song again. It feels like the <Song /> still has the previous steps loaded up and layers the new ones on top.

This one might require some digging - not sure if this is ToneJS or the way reactronica is caching/reacting to prop changes.

Instrument settings does not properly initialize curve field

When editing an instrument, it seems to properly persist the curve value to the database, but the dialog does not reflect the updated value when reopening the modal.

Persist volume, BPM, swing on Project entity

Looks like these were missed in the initial build out of the UI

Export project as audio file

It would be awesome to be able to export the current song/project as an audio file. It looks like Tone.js supports this but I'm not exactly sure how to wire this up, especially since we are using Reactronica as a wrapper around it.

Keyboard shortcuts are still buggy

Despite swapping to useKeys, the keyboard shortcuts still seem to be firing off at incorrect times (i.e. just when option is pressed and not option+d or option+s)

Cannot click off of FileSelectMenu in SequencerDialog

With the event.stopPropagation() change added in 71ca76e, clicks no longer flow through the Dialog to the TrackSectionCard behind it.

However, it looks like the SelectMenu from evergreen relies on some of these click events to close the popover that appears. We should rework that event suppression so the SelectMenu still acts normally but the TrackSectionCard does not select/deselect itself when something in the dialog is clicked.

User settings

Initially I have two ideas for user settings:

1. Toggle tooltips that show on buttons (more familiar users should know the action already)
2. Autosave project on an interval (I could also see this as a setting at the project-level, but not 100% sure)

Add duration field to Instrument and TrackSectionStep

The default sample duration seems to be 0.5s, but it would be awesome to be able to play samples longer than that (i.e. vocal, synth, or background noise)

Add a duration property to Instrument and TrackSectionStep. At least the TrackSectionStep field should be nullable (which will default to whatever the current behavior is), but it might make sense to make it nullable for Instrument, too.

Add 'TrackSection' entity

Add a new migration & generate types/hooks for a TrackSection which will group a set of steps for a track together. This can be thought of as a bar or measure.

I'm thinking something simple like:

interface TrackSection extends Auditable {
    index: number;
    step_count: number;
    track_id: string;
}

Updated file upload component

The file upload component is OK, but it was built on top of the basic Evergreen version. I like that it has a loading state, but I'd like to see:

1. A drop area
2. Multi upload
3. A 'staging' step before the upload (currently has this), but to allow for renaming of the File.name field that's persisted on our side (not the S3/storage object side, which will stay auto-generated)
4. A way to preview the audio sample

Drag & drop reorder tracks

After #31 is complete, implement a drag & drop UI for reordering tracks.

Keyboard shortcuts trigger w/o CMD key

Looks like the new save/duplicate keyboard shortcuts actually trigger on just D or S.

Add an empty TrackSection when a new Track is added

On its own, a Track is pretty meaningless (a container for one or more sections that contain steps). Since the first step after adding a track is more than likely going to be adding a section, let's scaffold one out for the user when they click the 'Add Track' button and choose a track type.

Add 'loop' or play once button to SongControls

Similar to the upcoming "Play Once" functionality in InstrumentSettings, update the workstation page's SongControls component to toggle the play behavior between looping (what it currently does) or playing once (based on calculated duration of the track)

Implement generic sampler/chord instrument for new Tracks

While the sequencer UI is nice for building out drum beats, it doesn't work so well for constructing chords or melodies. Using the same underlying Instrument component from Reactronica and uploaded FileRecords for note samples, implement a piano roll style sequencer.

Preview Instrument audio during creation or while editing settings

Similar to #41, implement a play/pause button that previews the current settings of an instrument.

Create contributing doc

Create a document outlining development 'getting started' steps and etiquette on opening issues/PRs.

Additionally, I need to look into the Supabase documentation further to understand how properly run a development version of the service - since the work up to this point has been pre-release, I've been pretty comfortable wiping the database and starting over

Confirmation dialog when opening another project while editor is dirty

For UX, it would be great to have a confirmation modal when the editor state is dirty and user attempts to open another project.

Since the state is not lost when navigating between pages (ie / and /library), we don't really need to worry about that

Reorder Tracks

Implement a basic reordering feature for tracks (up/down arrows could be fine for now)

Add Github Actions build on PR/branch push

I disabled the netlify preview feature since it uses up build minutes and I don't really utilize the deployment previews anyway. It would be nice to still have an automated build to know whether or not the Netlify build will succeed/deploy, so it should be setup with the same strictness (ie, build should fail if there are compiler warnings).

Sample library page should scroll on overflow

See screenshot:

When you have ~30ish samples, the upload component is pushed off screen.

Start playing project from selected section

Implement functionality to mark the starting position of a track to the first selected section

In the future, it might be nice to be able to update the behavior so that the 'loop' (#61) only loops on the selected sections of a track/project, but I'm not sure I need this right now

Update codegen/break out Supabase client generation from useDatabase hook

There have been a few cases where it would've been easier to pull in the Supabase client directly to compose a set of API queries (ie, to retrieve a Project, its Tracks, then TrackSections, etc.) While having generated CRUD hooks for each of these is nice, there's going to be cases where we want to pull in each of these in one go to return a "joined" object or record.

The useDatabase hook could ultimately stay, but the bulk of the logic that builds out each typed from<T> function will be moved into a generated version of the Supabase client that can be imported in or out of hooks.

File > New option to create a new project

Right now, the only way to "create" a new project is to hard refresh the workstation which sets up a default project. It would be nice to have a dropdown menu option for this behavior in-app.

If the current editor state is dirty, it should open up a confirmation modal like #10

Create Instrument from InstrumentsPage

Add a button to pull up the InstrumentSettingsDialog to create a new Instrument from /library/instruments.

Add index field on Track entity

To maintain original ordering of Tracks in the workstation editor, and eventually support reordering and eventually drag and drop reordering, we should persist the original ordering of the tracks by way of index, and display the tracks back to the user in that same order.

View list of all used files in Project

For attribution/licensing, it would be cool to add a dialog that lists out each file that I'm using in a specific Project.

I could also see it listing out additional metadata around the file (company/website associated) once the sample library is more built out.

File > New doesn't work

Not sure when this regressed but it doesn't do anything right now, regardless of whether you're authenticated or not

Add song controls to SequencerDialog to preview changes

Implement SongControls (or some subset component) in the SequencerDialog component to allow the user to play the current steps before confirming changes.

Add 'TrackSectionStep' entity

Once there is a concept of a TrackSection, we can wire up the step sequencer again. For now, this will be tightly coupled to Files, but later we can change the structure to support basic synths/instruments from tonejs.

I'm thinking something like:

interface TrackSectionStep extends Auditable {
    file_id: string;
    index: number;
    track_section_id: string;
}

Clicking on a section that's been moved does not deselect it

Steps to reproduce:

1. Create a track with 2 sections (add at least one step to one of the track sections to identify it from the other one)
2. Click one of the sections to select it
3. Use the drag handle to swap its position with the other section
4. Click on the selected section to attempt to deselect it, and it won't deselect it.

Note: The 'Edit > Clear Selection' menu option still clears out the selected tracks

File > Revert to saved

Since we're tracking the initial state of the project/tracks in the workstation editor using immutable, it's easy to dirty check to see whether the current version is different. It should be easy enough to add a dropdown menu option that reverts the current state to the initial state.

Similar to #10, it should prompt the user with a confirmation dialog to prevent unintended changes.

Copy TrackSection to a new slot

Using some sort of 'Select' -> 'Edit' -> 'Copy' functionality, it would be awesome to be able to easily duplicate a section of a track to tweak the steps

Add controls & persist volume level for each Track

Add a volume field to each individual Track entity with controls to increment/decrement the value (which is in DB if I remember correctly)

'About' dialog

Add an 'About' dialog which lists current environment, version number, and a link to the repository

Rename Files.bucketid -> bucket_id

For consistency in field naming, let's rename this column using a migration, regenerate the types and update any existing references.

Preview sample in FileSelectMenu

Similar to #41, wire up a play/pause button for samples that appear in the dropdown of FileSelectMenu.

Note: Since this is meant to play the raw sample (and reactronica will re-request files each time), let's try to use native audio elements to play the sound.

Add 'Save & Continue' button

Add a button that can be changed from a 'Save & Close' to a 'Save & Continue' state. The primary use case right now is the InstrumentSettingsDialog where you might be editing/saving an instrument multiple times before closing.

Regression in SongControls - pausing does not clear ReactronicaStateAtom

Version: 1.4.0

When pausing a song, onPause from useReactronicaState should be called to clear out the current index in the ReactronicaStateAtom - otherwise the last played step remains active:

Solution: Wrap the toggleIsPlaying with an onPause call when isPlaying is true

Project settings > delete project

Implement the ability to delete a project. To future proof, this could probably be added to a 'Settings' dialog that is available after creation, where the name can be edited and other project-level settings could live in the future.

Export as wav/mp3 formats

Look into using this package to record/export audio in more standard formats: https://github.com/kbumsik/opus-media-recorder

Investigate feasibility of swapping out shared state management

For performance reasons, look into a proxy-based state management solution like MobX or Valtio. While the Jotai API is super simple to use, and promotes composing shared state in smaller pieces, it still seems to suffer from the nested re-rendering performance degradation like React Context does. If we can more intentionally subscribe to shared state updates in components that require them, hopefully the UI can stay snappy while there's music playing.

Codegen - update interface generation to dynamically extend Auditable

When all auditable fields are present on an entity (https://github.com/brandongregoryscott/beets/blob/main/src/interfaces/auditable.ts), extend the interface. This composition reduces code duplication and better explains the entity's purpose with only its own fields immediately visible.