Fixed issue where text selection lagged behind word highlight in editor upon pause. Text selection upon pause works now for both hotkeys and video controls.

Author: murezzda

src/lib/TranscriptEditor/MediaPlayer/VideoPlayer.js

@@ -13,6 +13,7 @@ class VideoPlayer extends React.Component {
         data-testid="media-player-id"
         onClick={ this.props.onClick }
         onLoadedData={ this.props.onLoadedDataGetDuration }
+        onPause={ this.props.videoHasPaused }
         ref={ this.props.videoRef }
       />
     );
@@ -24,7 +25,8 @@ VideoPlayer.propTypes = {
   onTimeUpdate: PropTypes.func,
   onClick: PropTypes.func,
   videoRef: PropTypes.object,
-  onLoadedDataGetDuration: PropTypes.func
+  onLoadedDataGetDuration: PropTypes.func,
+  videoHasPaused: PropTypes.func
 };
 
 export default VideoPlayer;

src/lib/TranscriptEditor/MediaPlayer/defaultHotKeys.js

@@ -4,9 +4,6 @@ function returnHotKeys(self) {
       priority: 1,
       handler: () => {
         self.togglePlayMedia();
-        if (!self.isPlaying() && self.props.focusOnPause) {
-          self.props.setFocus();
-        }
 
         self.props.handleAnalyticsEvents({
           category: 'defaultHotKeys',

src/lib/TranscriptEditor/MediaPlayer/index.js

@@ -412,6 +412,7 @@ class MediaPlayer extends React.Component {
       onClick= { this.togglePlayMedia.bind(this) }
       videoRef={ this.videoRef }
       onLoadedDataGetDuration={ this.onLoadedDataGetDuration }
+      videoHasPaused= { this.props.setFocus }
     />;
 
     const playerControlsSection = (
@@ -470,7 +471,6 @@ MediaPlayer.propTypes = {
   rollBackValueInSeconds: PropTypes.number,
   timecodeOffset: PropTypes.number,
   setFocus: PropTypes.func,
-  focusOnPause: PropTypes.bool,
 };
 
 export default hotkeys(MediaPlayer);

src/lib/TranscriptEditor/index.js

@@ -234,7 +234,9 @@ class TranscriptEditor extends React.Component {
   }
 
   handleSetFocus = () => {
-    this.setFocus();
+    if (this.state.focusOnPause) {
+      this.setFocus();
+    }
   }
 
   getEditorContent = (exportFormat) => {
@@ -259,7 +261,6 @@ class TranscriptEditor extends React.Component {
       handleAnalyticsEvents={ this.props.handleAnalyticsEvents }
       handleSaveTranscript={ this.handleSaveTranscript }
       setFocus = { this.handleSetFocus }
-      focusOnPause = { this.state.focusOnPause }
     />;
 
     const settings = <Settings