feat(frontend/presenter): only advance on click if focused (#577)

Closes #388

app/frontend/src/lib/hooks.js

@@ -1,11 +1,11 @@
-import { useContext } from 'react'
+import { useContext, useState, useEffect } from 'react'
 import { invert } from 'lodash'
 import copy from 'copy-to-clipboard'
 import { useSnackbar } from 'notistack'
 
 import { getTranslation, getTransliteration, findLineIndex } from './utils'
 import { ContentContext, RecommendedSourcesContext, SettingsContext } from './contexts'
-import { LANGUAGES } from './consts'
+import { isMac, LANGUAGES } from './consts'
 
 const languagesById = invert( LANGUAGES )
 
@@ -73,3 +73,25 @@ export const useCopyToClipboard = () => {
     )
   }
 }
+
+export const useWindowFocus = () => {
+  const [ focused, setFocused ] = useState( document.hasFocus() )
+
+  // Keep track of whether the window is focused
+  useEffect( () => {
+    // Use click to determine focus on non-Mac platforms
+    const focusEvent = isMac ? 'focus' : 'click'
+    const onBlur = () => setFocused( false )
+    const onFocus = () => setFocused( true )
+
+    window.addEventListener( 'blur', onBlur )
+    window.addEventListener( focusEvent, onFocus )
+
+    return () => {
+      window.removeEventListener( 'blur', onBlur )
+      window.removeEventListener( focusEvent, onFocus )
+    }
+  }, [ setFocused ] )
+
+  return focused
+}

app/frontend/src/shared/NavigatorHotkeys.js

@@ -7,7 +7,7 @@ import { mapPlatformKeys, getJumpLines, findLineIndex } from '../lib/utils'
 import controller from '../lib/controller'
 import { NAVIGATOR_SHORTCUTS, LINE_HOTKEYS } from '../lib/keyMap'
 import { ContentContext, HistoryContext, SettingsContext } from '../lib/contexts'
-import { useCurrentLines } from '../lib/hooks'
+import { useCurrentLines, useWindowFocus } from '../lib/hooks'
 
 /**
  * Hotkeys for controlling the navigator.
@@ -135,11 +135,13 @@ const NavigatorHotKeys = ( { active, children, mouseTargetRef } ) => {
 
   const keyMap = mapPlatformKeys( { ...hotkeys, ...numberKeyMap } )
 
+  const windowFocused = useWindowFocus()
+
   // Register mouse shortcuts
   useEffect( () => {
     const { current: mouseTarget } = mouseTargetRef
 
-    if ( !active || !mouseTarget ) return () => {}
+    if ( !active || !mouseTarget || !windowFocused ) return noop
 
     const events = [
       [ 'click', goNextLine ],
@@ -155,7 +157,7 @@ const NavigatorHotKeys = ( { active, children, mouseTargetRef } ) => {
     return () => events.forEach(
       ( [ event, handler ] ) => mouseTarget.removeEventListener( event, handler ),
     )
-  }, [ mouseTargetRef, active, goNextLine, goPreviousLine, autoToggle ] )
+  }, [ mouseTargetRef, active, goNextLine, goPreviousLine, autoToggle, windowFocused ] )
 
   return (
     <GlobalHotKeys keyMap={keyMap} handlers={active ? hotKeyHandlers : {}}>