## Issue
When opening a video directly in Chrome Incognito, the video should autoplay (since that's the default Lbry setting), but it doesn't due to browser policy
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
## Changes
- We don't want to forcefully mute the video when `autoplay=true`; we just want to do it when the browser policy is applied.
- Fortunately, there is already an existing code-block for us to check that.
## Test cases
- [x] "Autoplay=Off" should not be affected.
- [x] After manually unmuting, the next autoplayed video should not be muted (this is "user interacted" opening, so the policy allows autoplay)
- [x] If manually muting, the next autoplayed video should retain user's last setting.
## Known issues
- I've seen `error` occasionally being undefined in the `catch` block. In those cases, the solution doesn't work. We could remove `if (player.autoplay() && !player.muted())` and simply just try muting it, but for now it's better to ensure `NotAllowedError` is due to unmuted first before applying the fix.
- This doesn't work for Firefox as there is an explicit "Allow Autoplay" button in the address bar that user needs to click themselves. Applies to all sites.
## Issue
One of the items in 5865 Video shortcut issues
This one is not really an issue, but it would be nice to match what the arrow keys are doing. Also, in slower regions, seeking 10s will almost always end up buffering.
## Changes
- Restore original code for how Volume and Mute is restored.
- Playback rate will be only change that gets "re-restored" in "loadedmetadata".
## Issue
5513: Video-setting persistence broken
## Notes
- Per videojs recommendation, the setting-restoration should be done after the video has been loaded, so the action was moved to `loadedmetadata`. This fixed the volume slider problem, and should have fixed the playbackRate too.
- For playbackRate, there is another special case where it gets reset to 1 (refer to comments in code).
## Issue
Partially closes 3041: Display/hint what keyboard shortcuts are available in videos
(minus the "all shortcuts" overlay -- saving that for another day)
## Issue
5554: Video: loading circle sometimes does not appear until 2nd click
## What's happening
videojs behavior:
(a) A `src` change makes the Play button re-appear.
(b) An `onPlay` (or `play()`) makes the button go away.
Due to the `m3u8` header async fetch (i.e. return is potentially delayed), the initial `onPlay` (which cleared the button) that happened after user clicked Play gets negated by a potentially-delayed `src` change.
# Changes
- Manually hide the play button that is induced by the change in `src`. In the fetch-delay scenario mentioned above, the player continues to be in a 'playing' state anyway.
- But don't hide the button if paused externally (e.g. browser-level)
Restore video loading circle
Looking at a few other files hoping to understand the convention for components, I moved the videojs.scss file to where all CSS related files appear to be in the project.
Also restores the CSS for vjs-overlay which I commented out previously for *some* reason (but I don't know why, and it doesn't seem to make a difference whether I comment it out or not)
Adds custom video.js hls quality selector plugin
This allows the quality selector plugin to stay active and listen for source changes on the player to prevent the need to recreate the player when switching between MP4's and M3U8's
## Issues
5349: Remove theater mode button from player in comments
5519: Theatre mode button doesn't do anything in full screen mode [Odysse/LBRY desktop app]
## Notes
5349: Wanted to hide for 'markdown' as well, but it seems useful for 'markdown' (to clear the screen from Related), so I did not include it.
Continually recreating video.js instance on render is bad.
Instead, persist a single instance, and simply update the source and poster on the existing instance.
I'm a bit wary of adding props to this component due to the 'dispose' call, but I think 'source' and 'claim' will update together, so it shouldn't be an issue?
## Issue
5308: Ability to choose default play speed and theatre mode or regular playback size
## Comments
Initially, I used the local storage, as per 'muted' and 'volume' -- I thought that would be appropriate.
Later, I saw that Theater Mode is already using Client Settings, so I re-did everything to match that.
Also, there is an accompanying commit in lbyr-redux.
## Issue:
5119 "Video: Mobile UI + overlay for keyboard shortcut feedback" was disabled because the feature broke the chromecast button in Android Chrome
4913: Can't slide volume slider in pop out mode
I first tried to handle this at the floating player level, but it was impossible to hack there due to how 'react-draggable' works (it already moved the window before the "move" handler is called, so we can't do much).
Fix by overriding the dragging behavior of the videojs' VolumeBar class by not propagating the event further. It is odd that videojs didn't already do this, since it's SeekBar does stop the propagation.
## Issue
Fixes 4460 `unmuted state lost / reverted`
1. Play a video.
2. Press mute.
3. Drag the volume bar to unmute.
4. Play a new video --> the video starts muted.
## Fix
The `volumechange` handler was comparing against stale variables, so there are times where the state was not saved. Just save both `muted` and `volume` without additional gating (the gating is probably unnecessary in the first place, since we are in a onChange function).
Implementation:
- The code is placed in <VideoJs> instead of <VideoViewer> as we need to control the video itself. It's more self-contained here, rather than trying to pass refs around between parent and child.
- useState cannot be used as it will cause a re-render when the hint it clicked and dismissed. The DOM is used to hide the button.
