added draggability to playhead (#175)

* added draggability to playhead

* removed console logs and unnecesary comments

* no need to have the playhead itself clickable

src/components/Playhead/Playhead.scss

@@ -16,5 +16,6 @@
     position: absolute;
     right: -10px;
     top: 5px;
+    cursor: ew-resize;
   }
 }

src/components/TimelineScrubber/TimelineScrubber.js

@@ -35,6 +35,10 @@ class TimelineScrubber extends Component {
     showTimes: PropTypes.bool,
     /** current viewport position */
     x: PropTypes.number,
+    /** playhead is dragging */
+    isPlayheadUpdating: PropTypes.bool,
+    /** playhead Drag X */
+    playheadX: PropTypes.number,
   };
 
   static defaultProps = {
@@ -47,6 +51,8 @@ class TimelineScrubber extends Component {
     zoom: 1.0,
     dragStart: () => {},
     showTimes: false,
+    isPlayheadUpdating: false,
+    playheadX: 0,
   };
 
   timeToPercent = time => (time / this.props.runTime) * 100; //* this.props.zoom;
@@ -84,6 +90,8 @@ class TimelineScrubber extends Component {
       x,
       width,
       zoom,
+      isPlayheadUpdating,
+      playheadX,
     } = this.props;
     return (
       <div
@@ -120,7 +128,10 @@ class TimelineScrubber extends Component {
             )}
           </TimelineMarker>
         ))}
-        <PlayHead x={this.timeToPercent(currentTime)} isUpdating={false} />
+        <PlayHead
+          x={this.timeToPercent(isPlayheadUpdating ? playheadX : currentTime)}
+          isUpdating={isPlayheadUpdating}
+        />
       </div>
     );
   }

src/components/TimelineScrubber/TimelineScrubber.scss

@@ -6,4 +6,5 @@
   border-bottom: 2px solid transparent;
   border-top: 2px solid transparent;
   background: #eeeeee;
+  cursor: pointer;
 }

src/containers/BubbleEditor/BubbleEditor.js

@@ -35,7 +35,10 @@ class BubbleEditor extends React.Component {
       startX: 0,
       deltaX: 0,
       viewportX: 0,
-      viewportStartX: -1,
+      viewportStartX: 0,
+      isPlayheadUpdating: false,
+      playheadX: 0,
+      scrobberBounds: null,
     };
   }
 
@@ -68,6 +71,33 @@ class BubbleEditor extends React.Component {
     }
   };
 
+  playheadDragMove = ev => {
+    if (this.state.isPlayheadUpdating) {
+      // in order to smooth drag
+      this.clearTextSelection();
+      const positionRatio =
+        (ev.pageX - this.state.scrobberBounds.left) /
+        this.state.scrobberBounds.width;
+      const time = positionRatio * this.props.runTime;
+      this.setState({
+        playheadX: time,
+      });
+    }
+  };
+
+  playheadDragEnd = ev => {
+    if (this.state.isPlayheadUpdating) {
+      this.props.onUpdateTime(this.state.playheadX);
+      this.setState({
+        selectedPoint: -1,
+        isPlayheadUpdating: false,
+        playheadX: 0,
+      });
+    }
+    document.body.removeEventListener('mousemove', this.playheadDragMove);
+    document.body.removeEventListener('mouseup', this.playheadDragEnd);
+  };
+
   dragStart = ev => {
     if (
       ev.target === ev.target.parentNode.firstChild ||
@@ -83,7 +113,14 @@ class BubbleEditor extends React.Component {
       const positionRatio =
         (ev.pageX - scrobberBounds.left) / scrobberBounds.width;
       const time = positionRatio * this.props.runTime;
-      this.props.onUpdateTime(time);
+      document.body.addEventListener('mousemove', this.playheadDragMove);
+      document.body.addEventListener('mouseup', this.playheadDragEnd);
+      this.setState({
+        selectedPoint: -1,
+        isPlayheadUpdating: true,
+        playheadX: time,
+        scrobberBounds,
+      });
       return;
     }
     const selectedPoint = Array.prototype.indexOf.call(
@@ -285,6 +322,8 @@ class BubbleEditor extends React.Component {
                   dragStart={this.dragStart}
                   selectedPoint={this.state.selectedPoint}
                   showTimes={this.props.showTimes}
+                  isPlayheadUpdating={this.state.isPlayheadUpdating}
+                  playheadX={this.state.playheadX}
                 />
               </div>
             )}