Overhaul the playback control buttons

[broadwell]

The main point here is to add a "transport control" button strip (as seen in Garage Band and most other Digital Audio Workstation programs) to the top of the roll display window for both Listener and Performer views, as sketched in the wireframes. The specific lineup of buttons and their functionality will be considerably different from what's shown in the wireframes, though. Some specifics:

• The strip can either float over the top of the image or actually occupy space above it, pushing the beginning of the roll image further down the page. I kind of prefer the former, but let's go with whatever looks/works better.
• The existing floating image navigation buttons

probably will need to move -- I'd suggest rotating the strip to a vertical orientation and pinning it near the top right of the roll image window.

• There should be a single Play/Pause button that looks like the usual Play triangle (▶) when not playing and a pause button when playing (⏸)
• Instead of a stop button ("stop" and "pause" are equivalent for piano rolls), there should be something like a ↺ button that triggers a rewind to the beginning of a roll, or to the beginning of the playback start point if one has been specified in the URL query params or set via the bookmarking feature (to be implemented as a separate ticket)
• There also should be an indefinite repeat toggle button 🔁 , with styling to indicate when it's selected or not.
• There should be a record button ⏺ that will trigger the MIDI and/or audio recording functionality, once that's integrated into the app (definitely its own ticket), with styling to indicate when recording is active.
• There should be "skip forward" and "skip back" buttons that move the playback point by some amount; probably we can just repurpose the fast-forward and rewind symbols (⏩ and ⏪︎) for this; I'd suggest a skip interval of about 1500 pixels (= MIDI ticks).
• There should be buttons to select the beginning and end of a playback excerpt, which will be translated into bookmark query parameters and also influence what the rewind and repeat buttons do (see above). The button to select the beginning of the segment could be a Unicode right-angle ∟ and the end segment button its mirror image (U+2BFE). The end segment button would only work if the play point is beyond the beginning segment point, or the beginning of the roll.
• The existing Play/Pause and Rewind buttons would be removed from the UI. The remaining Soft, Sustain and Accent indicators/buttons probably then should be moved and restyled. This probably will be a separate ticket, but FYI these branches might provide some ideas and partial implementations.

[broadwell]

Here's a very sketchy version of what the transport control strip could look like -- hopefully the finished product will be much more stylish! But this should be more concrete than the text descriptions above. ETA: Probably the "Repeat" button should be moved just to the left of the start/end play point selectors, since their functionality is linked.

• The buttons, from left to right:
  • Repeat - causes playback to loop forever between the start and end play points, or between 0% to 100% if one or both points hasn't been chosen.
  • Rewind/back to start - skips back to the start play point when one has been chosen, otherwise always rewinds to 0%
  • Step back - moves the play point back ~1500 pixels (aka "ticks")
  • Play/Pause - the pause icon replaces the play icon when the roll is actively playing or recording (therefore the pause button can also be used to pause recording)
  • Record - Starts recording and playback (if paused) when clicked; clicking it again stops recording and playback and triggers the recording export/download process
  • Step ahead - moves the play point forward ~1500 pixels (aka "ticks")
  • Select start play point (hopefully we can find a more appropriate icon than this)
  • Select end play point (ditto)
• The top layer of icons represents the alternative version of each icon that appears when it's disabled or toggled in some way -- e.g., the pause icon replaces the play icon when the roll is actively playing or recording.
• Note also that the strip appears above the roll image permanently, unlike the image navigation strip that hovers over the image and auto-hides when not in use.

[broadwell]

Re-opening due to request from core users to increase the size of the buttons on the transport control strip to approximately double their current dimensions and possibly choose an alternative set of play, pause, record, skip, etc. icons that is as consistent as the current set in look but does not have circles around the icons (instead we'll probably use the border characteristic of the page element to draw a box around each icon).

[broadwell]

Addressed via https://github.com/sul-cidr/pianolatron/pull/215