From f5ec302270be38eac114c22d18ad8b8bb2edb633 Mon Sep 17 00:00:00 2001
From: Harjot Singh <harjot@harkul.com>
Date: Wed, 3 Jun 2020 23:03:42 +0100
Subject: [PATCH] feat(frontend/presenter): only advance on click if focused
 (#577)

Closes #388
---
 app/frontend/src/lib/hooks.js               | 26 +++++++++++++++++++--
 app/frontend/src/shared/NavigatorHotkeys.js |  8 ++++---
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/app/frontend/src/lib/hooks.js b/app/frontend/src/lib/hooks.js
index 1b2afa8b..253aced4 100644
--- a/app/frontend/src/lib/hooks.js
+++ b/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
+}
diff --git a/app/frontend/src/shared/NavigatorHotkeys.js b/app/frontend/src/shared/NavigatorHotkeys.js
index 2f6141f0..1a6d7c4f 100644
--- a/app/frontend/src/shared/NavigatorHotkeys.js
+++ b/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 : {}}>