MPA

This task is about updating the key/tempo filter panel.

In the new version, the following is changing:

• Key labels replaced by piano UI 
• new "range" and "fix" buttons 
• new "major" and "minor" buttons 

SKETCH FILE:
https://www.dropbox.com/s/zwj8lgylv9er9wl/desktop-soundslates%20dn%20%281%29.sketch?dl=0

1. New buttons:

For the "range" and "fix" buttons, those are displayed above the tempo slider.

• clicking one button deactivate the other one (only 1 can be selected at once) 
• "range" is the same as the current mode
• "fix" changes the tempo slider, so that it has only 1 handle (can select only a fixed value instead of a range) 

2. Keyboard:
the keys filters choices should now be replaced by the keyboard.

• the selected key is orange 
• when a key is unavailable, it is grayed 

3. Minor/major:
The minor/ major buttons have no effect for now.

Feedback:

1. Wrong keys:
It seems that the piano keys are linked with the wrog key filters.
When clicking "C", the key "D" is used as filter
Let's make sure that the UI is correctly linked to the backend
In the screenshot below you can see which keys belong to which piano note.
TIP: to not get confused, you can look at the black keys, those have grouped, first 2 black keys, then a space the 3 black keys 


2. Modes:
The mode above the tempo slider should be:

• range
• fix

You have kept "tempo" as mode

Also:

• currently "range" should be selected by default 
• when closing the panel, the filter mode shouldn't be reset

3. Keys:
On the UI, there are more keys than on the design.
Let's fix it so that we have the same number of keys as on the design, see the screenshots below:


APP:


DESIGN:

Feedback.

1. Buttons:
For the options buttons (major, minor, fix, range) the inactive state should be lighter, as the buttons are almost invisible.


2. Implement fix tempo mode:
The UI for the fix tempo mode is now ready.
For the functionality, let's first clarify with the web developer the following:

• does the API expect a range for the tempo, or a single value can be provided?

Discuss this topic with the web developer, so that he can implement the necessary API changes.
When ready, we can then modify the functionality in the app.

Feedback:

1. Fix tempo mode:
This feature is not implemeted correctly.
It still uses the range instead of a fix value, which is visible in the active filters bar.

Feedback:

The "fix" mode is still not working correctly;

1. Default value when opening the panel:
As soon as the panel is opened, the value "40bpm" is used as filter.
Like in range mode, the filter is activated only once the user moves the fader.

2. Clearing filter:
It is no longer possible to clear the fiter bar is the tempo filter is used.

3. Wrong logic:
Even in fix mode, it still filters using a range.
This is visible when checking the tempo value of the items in result list.
You can see that the tempo values are equal or greater than the fix value in the filter, which means it uses a range and not a fix value.