Skip to content

Draggable slider #2

@exclipy

Description

@exclipy

It'd be really cool if the user could drag the slider just like any other video player.

  1. SeekBarComponent would listen for mousedown, mousemove and mouseup events. (Do not use the drag/drop API).
  2. Implement all the logic to make the slider look like it's tracking the mouse as it's being dragged.
  3. 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.
  4. ViewerComponent would dispatch actions for the above.
  5. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions