Click and Drag Timeline Scroll

[parabuzzle]

I'm trying to figure out a way of clicking and dragging the timeline left and right. It would be great if there was a callback prop for the timeline view similar to onClickTimeArea or onCursorDrag for the entire timeline.

[parabuzzle]

for now I've made the scroll bar more visible by increasing the size with this css:

.timeline-editor :hover::-webkit-scrollbar:horizontal {
  height: 20px !important;
}

.timeline-editor :hover::-webkit-scrollbar-thumb:horizontal {
  background: #333 !important;
  border-radius: 5px !important;
}

It would still be nice to have the click and drag feature. I noticed on a laptop with 2-finger scroll it works.. but a desktop with no horizontal scroll mouse features, the timeline can be a bit of a pain to work with.

[marcoburrometo]

I just did something like this in a POC test that I'm doing :)

        <div className="container"
           onMouseDown={() => {
                  draggingRef.current = true;
                  videoRef.current.getInternalPlayer().pause();
              }}
              onMouseUp={() => {
                  draggingRef.current = false;
                  videoRef.current.getInternalPlayer().play();
              }}
              onMouseLeave={() => {
                  draggingRef.current = false;
              }}
              onMouseMove={(e) => {
                  if (draggingRef.current) {
                      const newTime = timelineState.current.getTime() + e.movementX / (SCALEWIDTH / SCALE);
                      const left = newTime * (SCALEWIDTH / SCALE) - timelineState.current.target.clientWidth / 2;

                      console.log('......mouse drag????', newTime, e.movementX);

                      timelineState.current.setTime(newTime);
                      timelineState.current.setScrollLeft(left);
                      videoRef.current.seekTo(newTime);
                      setCurrentTime(newTime);
                      // setCurrentTime(currentTime + direction);
                  }
              }}