fix(FEC-7160): scrubber dragging ability from all player area (#66)

kaltura · Oct 2, 2017 · 26d8766 · 26d8766
1 parent e80c8a4
commit 26d8766
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 14 deletions.
diff --git a/src/components/seekbar-playback-container/seekbar-playback-container.js b/src/components/seekbar-playback-container/seekbar-playback-container.js
@@ -35,7 +35,7 @@ class SeekBarPlaybackContainer extends BaseComponent {
    * @memberof SeekBarPlaybackContainer
    */
   constructor(obj: Object) {
-    super({name: 'SeekBarPlaybackContainer', player: obj.player});
+    super({name: 'SeekBarPlaybackContainer', player: obj.player, config: obj.config});
   }
 
   /**
@@ -62,7 +62,7 @@ class SeekBarPlaybackContainer extends BaseComponent {
   render(): React$Element<any> {
     return (
       <SeekBarControl
-        playerElement={this.player.getView().parentElement}
+        playerElement={document.getElementById(this.config.targetId)}
         showFramePreview={this.props.showFramePreview}
         showTimeBubble={this.props.showTimeBubble}
         changeCurrentTime={time => this.player.currentTime = time}

diff --git a/src/components/seekbar/seekbar.js b/src/components/seekbar/seekbar.js
@@ -54,6 +54,22 @@ class SeekBarControl extends Component {
     }
   }
 
+  /**
+   * on component mount, bind mouseup and mousemove events to top player element
+   *
+   * @returns {void}
+   * @memberof SeekBarControl
+   */
+  componentDidMount() {
+    this.props.playerElement.addEventListener('mouseup', e => {
+      this.onPlayerMouseUp(e);
+    });
+
+    this.props.playerElement.addEventListener('mousemove', e => {
+      this.onPlayerMouseMove(e);
+    });
+  }
+
   /**
    * seekbar mouse down handler
    *
@@ -72,19 +88,38 @@ class SeekBarControl extends Component {
   }
 
   /**
-   * seekbar mouse up handler
+   * player mouse up handler for seekbar porpuses
    *
    * @param {Event} e - mouse up event
    * @returns {void}
    * @memberof SeekBarControl
    */
-  onSeekbarMouseUp(e: Event): void {
+  onPlayerMouseUp(e: Event): void {
     if (this.props.isMobile) return;
 
-    let time = this.getTime(e);
-    this.props.changeCurrentTime(time);
-    this.updateSeekBarProgress(time, this.props.duration);
-    this.props.updateSeekbarDraggingStatus(false);
+    if(this.props.isDraggingActive) {
+      let time = this.getTime(e);
+      this.props.changeCurrentTime(time);
+      this.updateSeekBarProgress(time, this.props.duration);
+      this.props.updateSeekbarDraggingStatus(false);
+    }
+  }
+
+  /**
+   * player mouse move handler for seekbar porpuses
+   *
+   * @param {Event} e - mouse move event
+   * @returns {void}
+   * @memberof SeekBarControl
+   */
+  onPlayerMouseMove(e: Event): void {
+    if (this.props.isMobile) return;
+
+    if (this.props.isDraggingActive) {
+      let time = this.getTime(e);
+      this.updateSeekBarProgress(time, this.props.duration);
+      this.updateSeekBarProgress(time, this.props.duration, true);
+    }
   }
 
   /**
@@ -99,10 +134,6 @@ class SeekBarControl extends Component {
 
     let time = this.getTime(e);
     this.updateSeekBarProgress(time, this.props.duration, true);
-
-    if (this.props.isDraggingActive) {
-      this.updateSeekBarProgress(time, this.props.duration);
-    }
   }
 
   /**
@@ -312,6 +343,7 @@ class SeekBarControl extends Component {
     if (props.adBreak) seekbarStyleClass += ' ad-break';
     if (props.isDvr) seekbarStyleClass += ' live';
     if (props.isMobile) seekbarStyleClass += ' hover';
+    if (props.isDraggingActive) seekbarStyleClass += ' hover';
 
     return (
       <div
@@ -325,7 +357,6 @@ class SeekBarControl extends Component {
         aria-valuetext={`${toHHMMSS(this.props.currentTime)} of ${toHHMMSS(this.props.duration)}`}
         onMouseMove={e => this.onSeekbarMouseMove(e)}
         onMouseDown={e => this.onSeekbarMouseDown(e)}
-        onMouseUp={e => this.onSeekbarMouseUp(e)}
         onTouchStart={e => this.onSeekbarTouchStart(e)}
         onTouchMove={e => this.onSeekbarTouchMove(e)}
         onTouchEnd={() => this.onSeekbarTouchEnd()}

diff --git a/src/ui-presets/playback.js b/src/ui-presets/playback.js
@@ -30,7 +30,7 @@ export default function playbackUI(props: any): React$Element<any> {
         <OverlayPortal />
         <OverlayPlay player={props.player} />
         <BottomBar>
-          <SeekBarPlaybackContainer showFramePreview showTimeBubble player={props.player} />
+          <SeekBarPlaybackContainer showFramePreview showTimeBubble player={props.player} config={props.config} />
           <div className='left-controls'>
             <PlayPauseControl player={props.player} />
             <TimeDisplayPlaybackContainer format='current / total' />