feat(#236): space bar play/pause

src/common/store/auth/actions.ts

@@ -12,11 +12,12 @@ import { ObjectTypes, PlaylistTypes } from '../objects';
 import { getPlaylist, setObject } from '../objects/actions';
 import { getPlaylistObjectSelector } from '../objects/selectors';
 import { AuthActionTypes } from './types';
+import { AppActionTypes } from '../app';
 
 export function logout(): ThunkResult<void> {
   return dispatch => {
     dispatch({
-      type: 'APP_RESET_STORE'
+      type: AppActionTypes.RESET_STORE
     });
     dispatch(replace('/login'));
     dispatch(setToken(null));

src/renderer/App.tsx

@@ -1,6 +1,6 @@
 import { EVENTS } from '@common/constants/events';
 import { StoreState } from '@common/store';
-import { stopWatchers } from '@common/store/actions';
+import { stopWatchers, toggleStatus } from '@common/store/actions';
 import { ConnectedRouter } from 'connected-react-router';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { ipcRenderer } from 'electron';
@@ -27,9 +27,32 @@ export const App: FC<Props> = ({ history, store }) => {
       ipcRenderer.send(EVENTS.APP.NAVIGATE);
     });
 
+    const onKeyUp = (e: KeyboardEvent) => {
+      // When space bar pressed
+      if (e.keyCode === 32) {
+        // Prevent from scrolling
+        store.dispatch(toggleStatus() as any);
+      }
+    };
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      // Prevent body from scrolling
+      if (e.keyCode === 32 && e.target === document.body) {
+        e.preventDefault();
+        return false;
+      }
+
+      return true;
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+    window.addEventListener('keyup', onKeyUp);
+
     return () => {
       store.dispatch(stopWatchers() as any);
       unregister();
+      window.removeEventListener('keyup', onKeyUp);
+      window.removeEventListener('keydown', onKeyDown);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

src/renderer/app/components/Header/Search/SearchBox.tsx

@@ -106,6 +106,7 @@ class SearchBox extends React.Component<Props, State> {
           placeholder="Search people, tracks and albums"
           value={query}
           onKeyPress={this.onKeyPress}
+          onKeyUp={e => e.stopPropagation()}
           onChange={this.onChange}
         />
 

src/renderer/pages/settings/components/InputConfig.tsx

@@ -74,6 +74,7 @@ export class InputConfig extends React.PureComponent<Props> {
           name={name}
           onChange={(event: React.ChangeEvent<HTMLInputElement>) => this.saveDebounced(event.target.value)}
           placeholder={placeholderText}
+          onKeyUp={e => e.stopPropagation()}
           defaultValue={defaultValue}
         />
       </div>