It'd be really cool if the user could drag the slider just like any other video player.
SeekBarComponent would listen for mousedown, mousemove and mouseup events. (Do not use the drag/drop API).
- Implement all the logic to make the slider look like it's tracking the mouse as it's being dragged.
- It would expose Angular events like
seekstart seek and seekend which are analagous to the mouse events but emit the number of seconds instead of the mouse position.
- ViewerComponent would dispatch actions for the above.
- These actions would be mixed in using the existing ngrx/RxJS system to the other actions that might happen at any time.
Some random things that come to mind:
- Unlike in regular video players, I think when the user has the mouse down, the video should continue to play. That way, if the user has dragged to the position -6s and hold it there, the video should play at normal speed showing 6 seconds in the past.
- The user should be allowed to drag to before the video starts. The placeholder countdown should show.
- The seek bar should probably not change in scale while the user holds their mouse down.
- When the user drags to past the end of the recorded video, it switches to live view
- If in the
isEnded state (ie. stop button has been clicked), it'll behave just like a regular video player.
It'd be really cool if the user could drag the slider just like any other video player.
SeekBarComponentwould listen for mousedown, mousemove and mouseup events. (Do not use the drag/drop API).seekstartseekandseekendwhich are analagous to the mouse events but emit the number of seconds instead of the mouse position.Some random things that come to mind:
isEndedstate (ie. stop button has been clicked), it'll behave just like a regular video player.