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);
                    }
                }}