This PR addresses #63, #55, and has some minor changes to make the video player a bit easier to use.
Common hotkey functionality was added to the video player so things like play/pause with the space bar would work. That was done through the videojs-hotkeys library. Using that approach also made it easy to add some other video features like speedup/slowdown of playback and seeking.
The speed playback change used some of the UX from the mpv video player since I use that on linux for watching movies. It has "[" and "]" for changing the speed and displays the current speed for reference in the top left corner. That seemed like a good approach so I added that part. The speed comes in increments of 0.1. This speed display only shows when the hotkey is used, selecting the speed from the menu bar enum won't make it show. Here's what it looks like:
The current speed is also displayed in the playback speed portion of the video menu bar (bottom right) so if that's preferable to the mpv style speed display in the top left I could remove that part.
For the seek functionality there are three seek settings: 1min (up/down), 5sec (shift+left/right), and 1sec (left/right). Those should work for most use cases. The 1min seek makes it easy to navigate larger videos quickly with the keyboard. The five second is good for little changes and the one second would probably mostly be for people writing scripts. One nice part is that any seeks sync with the haptics graph so seeking the video forward moves the haptics playhead and clicking a new time in the haptics graph will change the current video position.
VR wasn't working after clicking the "Enable VR" checkbox so I updated the aframe dependency to get that working again. There was a new VR button added by aframe which I disabled with CSS in favor of the "VR" portion of the video menu bar. Here's what that part looks like:
This PR addresses #63, #55, and has some minor changes to make the video player a bit easier to use.
Common hotkey functionality was added to the video player so things like play/pause with the space bar would work. That was done through the videojs-hotkeys library. Using that approach also made it easy to add some other video features like speedup/slowdown of playback and seeking.
The speed playback change used some of the UX from the mpv video player since I use that on linux for watching movies. It has "[" and "]" for changing the speed and displays the current speed for reference in the top left corner. That seemed like a good approach so I added that part. The speed comes in increments of 0.1. This speed display only shows when the hotkey is used, selecting the speed from the menu bar enum won't make it show. Here's what it looks like:
The current speed is also displayed in the playback speed portion of the video menu bar (bottom right) so if that's preferable to the mpv style speed display in the top left I could remove that part.
For the seek functionality there are three seek settings: 1min (up/down), 5sec (shift+left/right), and 1sec (left/right). Those should work for most use cases. The 1min seek makes it easy to navigate larger videos quickly with the keyboard. The five second is good for little changes and the one second would probably mostly be for people writing scripts. One nice part is that any seeks sync with the haptics graph so seeking the video forward moves the haptics playhead and clicking a new time in the haptics graph will change the current video position.
VR wasn't working after clicking the "Enable VR" checkbox so I updated the aframe dependency to get that working again. There was a new VR button added by aframe which I disabled with CSS in favor of the "VR" portion of the video menu bar. Here's what that part looks like: