Focus on Pause can be deactivated in the settings

Author: murezzda

src/lib/TranscriptEditor/MediaPlayer/defaultHotKeys.js

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

src/lib/TranscriptEditor/MediaPlayer/index.js

@@ -470,6 +470,7 @@ MediaPlayer.propTypes = {
   rollBackValueInSeconds: PropTypes.number,
   timecodeOffset: PropTypes.number,
   setFocus: PropTypes.func,
+  focusOnPause: PropTypes.bool,
 };
 
 export default hotkeys(MediaPlayer);

src/lib/TranscriptEditor/Settings/index.js

@@ -66,6 +66,15 @@ class Settings extends React.Component {
             />
           </section>
 
+          <section className={ style.settingElement }>
+            <div className={ style.label }>Focus On Pause</div>
+            <Toggle
+              defaultValue={ this.props.focusOnPause }
+              label={ 'Set Focus On Pause' }
+              handleToggle={ this.props.handleFocusOnPause }
+            />
+          </section>
+
           <section className={ style.settingElement }>
             <div className={ style.timecodeLabel }>Timecode Offset ℹ</div>
             <TimecodeOffset
@@ -83,9 +92,11 @@ class Settings extends React.Component {
 Settings.propTypes = {
   showTimecodes: PropTypes.bool,
   showSpeakers: PropTypes.bool,
+  focusOnPause: PropTypes.bool,
   timecodeOffset: PropTypes.number,
   handleShowTimecodes: PropTypes.func,
   handleShowSpeakers: PropTypes.func,
+  handleFocusOnPause: PropTypes.func,
   handleSetTimecodeOffset: PropTypes.func,
   handleSettingsToggle: PropTypes.func,
   handlePauseWhileTyping: PropTypes.func,

src/lib/TranscriptEditor/index.js

@@ -27,6 +27,7 @@ class TranscriptEditor extends React.Component {
       rollBackValueInSeconds: 15,
       timecodeOffset: 0,
       showTimecodes: true,
+      focusOnPause: true,
       showSpeakers: true
     };
     this.timedTextEditorRef = React.createRef();
@@ -188,6 +189,20 @@ class TranscriptEditor extends React.Component {
     }
   }
 
+  handleFocusOnPause = (e) => {
+    const isChecked = e.target.checked;
+    this.setState({ focusOnPause: isChecked });
+
+    if (this.props.handleAnalyticsEvents !== undefined) {
+      this.props.handleAnalyticsEvents({
+        category: 'TranscriptEditor',
+        action: 'handleFocusOnPause',
+        name: 'focusOnPause',
+        value:  isChecked
+      });
+    }
+  }
+
   handleSettingsToggle = () => {
     this.setState(prevState => ({
       showSettings: !prevState.showSettings
@@ -244,6 +259,7 @@ class TranscriptEditor extends React.Component {
       handleAnalyticsEvents={ this.props.handleAnalyticsEvents }
       handleSaveTranscript={ this.handleSaveTranscript }
       setFocus = { this.handleSetFocus }
+      focusOnPause = { this.state.focusOnPause }
     />;
 
     const settings = <Settings
@@ -254,11 +270,13 @@ class TranscriptEditor extends React.Component {
       timecodeOffset={ this.state.timecodeOffset }
       showTimecodes={ this.state.showTimecodes }
       showSpeakers={ this.state.showSpeakers }
+      focusOnPause={ this.state.focusOnPause }
       handlePauseWhileTyping={ this.handlePauseWhileTyping }
       handleIsScrollIntoViewChange={ this.handleIsScrollIntoViewChange }
       handleRollBackValueInSeconds={ this.handleRollBackValueInSeconds }
       handleSetTimecodeOffset={ this.handleSetTimecodeOffset }
       handleShowTimecodes={ this.handleShowTimecodes }
+      handleFocusOnPause={ this.handleFocusOnPause }
       handleShowSpeakers={ this.handleShowSpeakers }
       handleAnalyticsEvents={ this.props.handleAnalyticsEvents }
     />;