chordbook / chordbook Goto Github PK

Add support for define and chord directives to SongSheetJS and use those definitions when drawing the chords.

Getting a wonky layout and a bunch of warning in the browser console:

data:application/js…:1 Manifest: property 'start_url' ignored, URL is invalid.
data:application/js…:1 Manifest: property 'scope' ignored, URL is invalid.
data:application/js…:1 Manifest: property 'src' ignored, URL is invalid.
data:application/js…:1 Manifest: property 'src' ignored, URL is invalid.
DevTools failed to load source map: Could not parse content for https://chordbook.app/assets/index.c0a45d7b.js.map: Unexpected token < in JSON at position 0
DevTools failed to load source map: Could not parse content for https://chordbook.app/assets/vendor.cc1db10b.js.map: Unexpected token < in JSON at position 0
DevTools failed to load source map: Could not parse content for https://chordbook.app/assets/DiscoverView.444da593.js.map: Unexpected token < in JSON at position 0
DevTools failed to load source map: Could not parse content for https://chordbook.app/assets/DataSource.d785a46b.js.map: Unexpected token < in JSON at position 0
DevTools failed to load source map: Could not parse content for https://chordbook.app/assets/swipe-back.2c2a8de0.js.map: Unexpected token < in JSON at position 0
DevTools failed to load source map: Could not parse content for https://chordbook.app/assets/tap-click.f2fe236c.js.map: Unexpected token < in JSON at position 0

Currently the toggle to show chords shows both Guitar and Ukulele chords. Allow selecting instrument and decided which to show (still allow both though)

I like how Slack does this with their "What's New" sidebar

Or event

https://github.blog/changelog/

Settings bar above each song is currently just icons. Add tooltips that explain what each button is on hover/touch

Generate sitemap.xml for all all public content

by title/artist/popularity

When using {artist: Artist Name} in a songsheet it will be automatically matched to an existing artist. It currently uses Trigram matching against existing artists, giving preference to verified artists (with external metadata)

• Only match existing artists above a certain threshold (.75? needing tested)
• If an existing artist with the exact name doesn't exist, kick off a LookupMetadata job to see if it's a new artist that is known
• Add aliases to artists (21 Pilots => Twenty One Pilots)

Each user should get a profile page that shows recent activity, including contributions, setlists, library, etc.

There are decent tests for the Rails backend, but the frontend currently has no tests because I was quickly evolving the stack and didn't want to take time to maintain tests 🤠. (There is an old system test for the editor, but it no longer runs after migrating to ionic in #81.)

It'd be great to add a few different types of tests to cover the frontend:

• Unit/functional tests for vue components
• Integration tests for client with a mocked API
• System tests that runs the Ruby ruby backend and tests a few critical paths

Currently app hows not indication when activity is happening

• index.html before vue app is initialized
• SearchResults
• GenreList
• app/frontend/views/*ListView.vue
• app/frontend/views/*DetailView.vue
• Any other view that makes uses client or DataSource`
• Splash page for PWA/native apps

I don't personally find it useful, but other guitar tab websites have an autoscroll feature.

• v1: render as monospace font (martijnversluis/ChordSheetJS#388)
• v2: render as SVG

When viewing a songsheet on mobile, touching the background should toggle visibility of the header, footer, and tab bar.

The SongPro format looks interesting. It'd be nice to support it as a file format and in the editor.

cc @spilth

Require login for new/edit, and start adding personalization

• Favorites
• Suggest edits
• Playlists

by title/artist/lyrics

In the interest of consistency across songsheets, it would be great to add some kind of chordpro linter. Off the top of my head, here are just a few rules the linter could have, but there are probably a lot more.

• Expand shorthand ({t: Foo} => {title: Foo})
• Preferred order of song elements (title, subtitle, artist, album, key, tempo, start_of_verse, etc)
• Use {start_of_verse}/{start_of_chorus} instead of {comment: Verse 1}
• Warn on unknown directives, like {link: https://youtube.com/…}

The linter should probably be written in JavaScript since it needs to run in the editor on the client. It would probably make sense to use the parser in ChordSheetJS as the basis for the linter so syntax support is consistent.

On tablet and desktop, Ionic's default padding/margin feels too small to me. I think it should be about double what it currently is on large screens.

This would probably involve adding responsive styles for .ion-padding* and .ion-margin* classes (or maybe there's a variable that would affect both)

Prints of the song sheets should look beautiful

The app is currently set up as a Progressive Web App (PWA) with a service worker work offline (static assets/images are cached), but it doesn't quite work yet.

Here are a few suggested changes:

• Show offline indicator
• Aggressively cache public API responses (anything that doesn't require authentication)
• Cache any recently viewed songsheet
• Cache all library songsheets items for each user

At a minimum:

• Sign in with Apple
• Google Sign-In

cc #13 #262

A handful of the existing imported songsheets have parser errors and just show a blank page when viewing them. It should either show a generic error message with a link to edit, or just redirect to edit and show parse errors there.

Add buttons to settings bar in song that allows transposing up/down.

A couple libraries that may be helpful:

• https://github.com/martijnversluis/chordjs
• https://www.npmjs.com/package/chord-symbol

Long pressing on any item in a list should show the ⋮ context menu for that item.

When toggling from single column view to horizontal view in Firefox the columns stack on top of each other. If you then reload the page, it looks right.

Add a chordpro-optimized editor to make it quick and easy to add new songs

• Chordpro syntax highlighting/validation
• Autocomplete of chordpro syntax and chords
• Toolbar or inline popups to insert verse/chorus/tab/chord/etc

I evaluated several existing web-based editors, and here are some thoughts:

• CodeMirror looks quicker/easier to get started with and has the features needed
• monaco seems to be the darling for code editing, but I'm not sure it's a great fit. It's very advance, has a lot more bells/whistles than I need, and it seems poorly documented.

Add buttons to settings bar to allow increasing/decreasing font size

• https://ionicframework.com/docs/developing/android
• Publish to google play store
• Automate builde/publish on release

cc #117

Given a song title and artist, we should be able to look up metadata and lyrics. Here are a few APIs that could be used:

• https://genius.com/developers
• https://developer.musixmatch.com/
• https://www.azlyrics.com/
• https://www.lyrics.com/lyrics_api.php
• http://www.onemusicapi.com/
• https://theaudiodb.com/api_guide.php

Before moving to ionic (#81), there was an option for horizontal scrolling when viewing a songsheet. This is really nice on screens in landscape mode because a lot of songs can fit all on one screen.

Some of the code is still there, so just need to add toggles in the UI for it.

cc #51

Currently you have to toggle on/off for all chords. You should just be able to touch/hover a specific chord to show the diagram.

Native iOS app can be built with:

ionic build --prod
npx cap sync
ionic capacitor open ios

• Publish to app store
• Automate build/publish from releases

Ideally the app would already have a library of guitar chords. I couldn't find a lot from doing some quick googling, but there are a couple:

• https://ozbcoz.com/Songs/index.php?instr=guitar
• https://www.theguitarlesson.com/guitar-pro-tabs/

I haven't tested this since #230, so it may be less of an issue now that fuzzy search on artists is improved, but it likely still will happen in some cases.

Steps to reproduce:

1. There is an existing artist called "Florence + The Machine"
2. Create a songsheet with {artist: Florence and The Machine} (and instead of +)
3. AssociateSongsheetMetadata job will create a new artist if the name is different enough
4. LookupMetadata job runs and renames new artist to Florence + The Machine, thus creating a duplicate

Solution is probably to have LookupMetadata job look for existing artists matching the canonical name.

pg_search was originally used for search, but there were significant performance issues. #230 replaced most uses with searchkick + elasticsearch, but there is one remaining instance in Track.title_like method that needs to be ported over.

pg_search_scope :title_like on the Track model should be replaced with a call to the search method provided by searchkick. See Artlist.lookup for an example. After that is removed, the pg_search gem can be removed.

Add a built-in tuner. Something like this: https://github.com/qiuxiang/tuner

Thea ability to quickly play the song

• Select preferred service
  • Apple Music
  • Spotify
  • YouTube
• Keyboard shortcuts (space = play/pause)

Related to #323, the editor currently does not show parse errors.

A common mobile behavior is that touching the search icon again will focus the search bar.

#108 adds a menu to switch between versions of the same song, but there is much room for improvement:

• Add some kind of unique identification of the version (e.g. ver 1, ver 2, etc)
• If an artist has multiple versions of the track on different albums, all should be considered versions of the same song and should show up in the version menu.
• If the songsheet is not associated with a track, it should still return any songsheets with the same title / artist combination

The app currently hotlinks to thumbnails on theaudiodb.com. This means if they have an outage or are slow, it makes the app feel slow. The service worker is configured to serve images out of cache before making a network request, so subsequent requests for the same thumbnail will be fast, but it would still be good to store them locally.

• Setup ActiveStorage
• Add storage to the render.com deployment (maybe using minio)

• Trending (e.g. top 100 tabs)
• Trending by genre
• Trending by difficulty (beginner, intermediate, etc)

All lists (artists, albums, tracks, songsheets) should be sortable by:

• recently added
• popular
• recently viewed
• alphabetical
• etc

On tablet and desktop screens there is a sidebar instead of a tab bar. It would be ideal to be able to add a toggle to collapse the menu down to just icons, especially when using the horizontal songsheet view.

Depends on #13

A user can save any songsheet, track, artist, or album to their library.

• one person starts a new session and shares link with bandmates
• anyone can add songs to the queue
• Could even do stuff with keeping scroll in sync

To prevent the proliferation of versions (e.g. ver1, ver2…ver8, ver9, etc), a user can suggest changes to an existing songsheet, and there should be mechanisms to make those changes part of the existing songsheet.

MUST:

• A user can edit an existing songsheet and save changes
• The original author can accept suggested changes
• A quorum (3?) of users can accept a specific change, which will update the original songsheet

SHOULD:

• Suggested changes are visible and highlighted when other users view a songsheet with 👍/👎 buttons
• Users can comment on a suggested change