[Draft] Separate default video viewer from custom controls and improve accessibility

[goplayoutside3]

(Draft while I figure out why Firefox and Safari left/right arrows behave differently in a slider than every other browser 🙄)

Package

lib-classifier

Linked Issue and/or Talk Post

Toward #6334
Toward #3759

Describe your changes

• Create separate files for VideoViewer and VideoWithDrawing
  • VideoWIthDrawing displays custom video controls while default VideoViewer does not
• Improve accessibility of custom video controls
  • Use of spacebar and/or Enter while focused on the play/pause button has no lag (I think this PR is as good as it's going to get. Any lag might be due to the progress interval set to 100ms. Most Zooniverse videos are <10seconds in length, and a smaller progress interval reduces the Grommet Slider performance
  • Use of spacebar and/or Enter while focused on the Slider should play/pause the video
  • Using left/right keys while focused on the select slider should step the video backwards and forwards
  • Keyboard use while focused on the volume slider: the up and down arrows should increase and decrease the volume
  • If a video file has no sound, disabled the volume button
    • Firefox desktop does not accurately check whether a video has volume. Even if a video doesn't have sound, the volume button is enabled which is better than accidentally disabling volume when it's available. Can't find a way around this Firefox behavior.
  • ? When the classifier loads, focus on the video controls so volunteers can play it right away via spacebar or Enter
    • This is a question I want to pose to Sean after this PR is merged and available to test on frontend.preview.

How to Review

• In lib-classifier's Storybook, there's a story for default video subjects using the native browser video element, and there's a story with the custom video controls
• Test project with video subjects: https://localhost.zooniverse.org:3000/projects/goplayoutside3/fem-test-project/classify?env=production

I tested the above keyboard + mouse functionality of custom controls in:

• Desktop Chrome
• Desktop Safari (must have tab via keyboard enabled in Accessibility settings, this is different than every other browser which by default lets you tab to buttons in a webpage)
• Desktop Firefox

Touch to scrub the progress slider doesn't work well in mobile browsers

• Mobile Safari
• Mobile Brave browser

Checklist

PR Creator - Please cater the checklist to fit the review needed for your code changes.
PR Reviewer - Use the checklist during your review. Each point should be checkmarked or discussed before PR approval.

General

• Tests are passing locally and on Github
• Documentation is up to date and changelog has been updated if appropriate
• You can yarn panic && yarn bootstrap or docker-compose up --build and FEM works as expected
• FEM works in all major desktop browsers: Firefox, Chrome, Edge, Safari (Use Browserstack account as needed)
• FEM works in a mobile browser

General UX

Example Staging Project: i-fancy-cats

• All pages of a FEM project load: Home Page, Classify Page, and About Pages
• Can submit a classification
• Can sign-in and sign-out
• The component is accessible
  • Can be used with a screen reader BBC guide to VoiceOver
  • Can be used from the keyboard WebAIM guide to keyboard testing
  • It is passing accessibility checks in the storybook

New Feature

• The PR creator has listed user actions to use when testing the new feature
• Unit tests are included for the new feature
• A storybook story has been created or updated
  • Example of SlideTutorial component with docgen comments, and its story

Refactoring

• The PR creator has described the reason for refactoring
• The refactored component(s) continue to work as expected

[coveralls]

coverage: 75.467% (-0.2%) from 75.621%
when pulling 39ca59a on video-subject-viewer-enhancements
into e68e2c6 on master.