Remaking the chordpro routines and the chord + stage viewer

Currently both the Chord view and Stage view have some problems:

  1. There is no routine to deal with overlapping chords, resulting in a mess when viewing a music with fast chord transitions or with chords on end of lines;
  2. There is no treatment to mobile devices, to the point the chord viewer is unusable on them (the stage view is sometimes usable, it depends on the music size).
  3. The sidebar (the element that shows the clock, the transposer, the notes and the 'Close' button) always takes 30% of width (even on mobile).

This is the current behavior:

Show Images Screenshot_2022-12-01_at_18-48-27_Dummy_Page

Screenshot_2022-12-01_at_18-48-04_Dummy_Page

Screenshot_2022-12-01_at_18-47-29_Dummy_Page

Screenshot_2022-12-01_at_19-16-44_Dummy_Page

Screenshot_2022-12-01_at_19-14-50_Dummy_Page

Screenshot_2022-12-01_at_19-14-44_Dummy_Page


This MR rewrites the ChordPro parsing routing:

  1. Now it parses the music backwards, to better handle the chord spacing problem. It takes account of the subsequent chord to avoid chord overlapping. Also, it handles chords on empty spaces.
  2. For chords, monospace system font is used. It's the only way to predict how many chars would be used in specific scenario (a monospace font has a fixed width for all letters; it's the solution used by the chord websites like Ultimate Guitar);

In addition, it has a overhaul in the chord and stage elements:

  1. Fonts scale better in mobile devices;
  2. The 'close button' is smaller, is using now an 'back' icon and is placed before the Clock Button to save more space;
  3. The transposer received the same treatment;
  4. There is now a button to hide the 'Notes' side panel;
  5. The Notes panel opens below the chords when using portrait screen sizes;
  6. The Notes panel is scrollable;

Screenshots:

Show Images Screenshot_2022-12-01_at_22-20-48_Dummy_Page

Screenshot_2022-12-01_at_22-20-42_Dummy_Page

Screenshot_2022-12-01_at_22-20-34_Dummy_Page

image

Screenshot_2022-12-01_at_22-18-31_Dummy_Page

Screenshot_2022-12-01_at_22-18-02_Dummy_Page

Screenshot_2022-12-01_at_22-17-43_Dummy_Page

Screenshot_2022-12-01_at_22-16-51_Dummy_Page

Screenshot_2022-12-01_at_22-16-40_Dummy_Page

Screenshot_2022-12-01_at_22-16-33_Dummy_Page

Screenshot_2022-12-01_at_22-16-27_Dummy_Page

Edited by Daniel Martin

Merge request reports

Loading