Feat: Add support for .mid file mints

kittypurrry commented 7 months ago

This PR adds support for minting .mid, .midi file types in the MintForm component.

Preview / Token Page Example: https://localhost:3000/objkt/853348

The preview component displays a Midi Player, and the auto ggenerated cover image, inline with Teia's current UI.

Feed Page

Midi NFTs are displayed similarly to Audio NFTs on Teia's feed listing page. Clicking on the play button plays the .mid soundfile.

Notes

There is an issue where mid files are not automatically stopped when navigating away from the page. The workaround was to add a disclaimer text to get users to manually stop the player if they are navigating away from the page while the .mid file is playing.
It seems like OBJKT does not have support for playing .mid files, something that we could possibly add to the OBJKT feature request? See: https://objkt.com/tokens/hicetnunc/850481 on a .mid token.

--

Update: 21/04:

Used HTML Midi Player (https://cifkao.github.io/html-midi-player/) instead of JZZ to allow us to control velocity.
Added volume slider next to midi player that modifies the 'velocity' of the midi file
Note: Since we have declared a global definition and set it as globalThis in the vite.config.js, this caused some issues when building because some of the files in @magenta/music as required by the HTML midi player package is importing a file with the name global (i.e global.js). The rules in vite.config.jq automatically resolves such file names to 'globalThis' and this causes an error since the file cant be found. Added aliases to the vite.config.js in order to workaround this issue.

Update 16/06:

Create function generateMidiCover to automatically generate midi covers based on the MidiJSON object tracks and notes within each track. Each track will be represented in a different opacity shade of white based on the track # in the midi JSON object. Any mints with mime type audio/mid or audio/midi will no longer be required to upload a cover image file.

melMass commented 7 months ago

Thanks for the contribution!!

This would close #147 cc @ryangtanaka-org

If no one did I can review this tuesday or the next day

Zir0h commented 7 months ago

melMass commented 6 months ago

This PR adds support for minting .mid, .midi file types in the MintForm component.

It looks like something happened in your recent commits as I don't see the mint related edits. Only the token viewer for .midi

teia-community / teia-ui