add electron-redux integration

package.json

@@ -249,6 +249,7 @@
     "classnames": "^2.3.1",
     "electron-debug": "^3.1.0",
     "electron-log": "^4.2.4",
+    "electron-redux": "^1.5.4",
     "electron-updater": "^4.3.4",
     "history": "^5.0.0",
     "lodash": "^4.17.21",
@@ -264,6 +265,7 @@
     "react-h5-audio-player": "^3.7.1",
     "react-helmet-async": "^1.0.9",
     "react-horizontal-scrolling-menu": "^2.0.3",
+    "react-hotkeys": "^2.0.0",
     "react-lazy-load-image-component": "^1.5.1",
     "react-query": "^3.19.1",
     "react-redux": "^7.2.4",

src/main.dev.ts

@@ -11,11 +11,34 @@
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import path from 'path';
-import { app, BrowserWindow, shell } from 'electron';
+import { app, BrowserWindow, shell, globalShortcut } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
+import { configureStore } from '@reduxjs/toolkit';
+import {
+  forwardToRenderer,
+  triggerAlias,
+  replayActionMain,
+} from 'electron-redux';
+import playerReducer from './redux/playerSlice';
+import playQueueReducer, {
+  decrementCurrentIndex,
+  incrementCurrentIndex,
+} from './redux/playQueueSlice';
+import multiSelectReducer from './redux/multiSelectSlice';
 import MenuBuilder from './menu';
 
+export const store = configureStore<any>({
+  reducer: {
+    player: playerReducer,
+    playQueue: playQueueReducer,
+    multiSelect: multiSelectReducer,
+  },
+  middleware: [triggerAlias, forwardToRenderer],
+});
+
+replayActionMain(store);
+
 export default class AppUpdater {
   constructor() {
     log.transports.file.level = 'info';
@@ -84,6 +107,14 @@ const createWindow = async () => {
     frame: false,
   });
 
+  globalShortcut.register('MediaNextTrack', () => {
+    store.dispatch(incrementCurrentIndex());
+  });
+
+  globalShortcut.register('MediaPreviousTrack', () => {
+    store.dispatch(decrementCurrentIndex());
+  });
+
   mainWindow.loadURL(`file://${__dirname}/index.html`);
 
   // @TODO: Use 'ready-to-show' event

src/redux/store.ts

@@ -1,4 +1,5 @@
 import { configureStore } from '@reduxjs/toolkit';
+import { forwardToMain, replayActionRenderer } from 'electron-redux';
 import playerReducer from './playerSlice';
 import playQueueReducer, { PlayQueue } from './playQueueSlice';
 import multiSelectReducer from './multiSelectSlice';
@@ -9,8 +10,11 @@ export const store = configureStore<PlayQueue | any>({
     playQueue: playQueueReducer,
     multiSelect: multiSelectReducer,
   },
+  middleware: [forwardToMain],
 });
 
+replayActionRenderer(store);
+
 // Infer the `RootState` and `AppDispatch` types from the store itself
 export type RootState = ReturnType<typeof store.getState>;
 

yarn.lock

@@ -4845,6 +4845,14 @@ electron-rebuild@^2.3.2:
     tar "^6.0.5"
     yargs "^16.0.0"
 
+electron-redux@^1.5.4:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/electron-redux/-/electron-redux-1.5.4.tgz#27eb3df052880f73a2393ff1aad6dff529091b62"
+  integrity sha512-7fM7OLVR34prk/ZlIv3yRbB4XCZPPQJ9ZfYLPmWPvKIONe2qm1e0on+cMLGgwzREapQrzCmc1VAxs8WNbWgncg==
+  dependencies:
+    debug "^4.1.1"
+    redux "^4.0.1"
+
 electron-to-chromium@^1.3.591:
   version "1.3.600"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.600.tgz#eb6aa7233ca1fbf0fa9b5943c0f1061b54a433bf"
@@ -9933,7 +9941,7 @@ prop-types-exact@^1.2.0:
     object.assign "^4.1.0"
     reflect.ownkeys "^0.2.0"
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -10172,6 +10180,13 @@ react-horizontal-scrolling-menu@^2.0.3:
   resolved "https://registry.yarnpkg.com/react-horizontal-scrolling-menu/-/react-horizontal-scrolling-menu-2.0.3.tgz#5b272de226a36bf1b0c0771c51f41877d3538833"
   integrity sha512-sId5Rym54HuzS1xhNG8CkJ6X75uDyqq4i652Q5tNClcWFND19IwOyE5/JnamP7bo427nTy9zllt6ZhMjfdpmBA==
 
+react-hotkeys@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-hotkeys/-/react-hotkeys-2.0.0.tgz#a7719c7340cbba888b0e9184f806a9ec0ac2c53f"
+  integrity sha512-3n3OU8vLX/pfcJrR3xJ1zlww6KS1kEJt0Whxc4FiGV+MJrQ1mYSYI3qS/11d2MJDFm8IhOXMTFQirfu6AVOF6Q==
+  dependencies:
+    prop-types "^15.6.1"
+
 react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -10447,7 +10462,7 @@ redux-thunk@^2.3.0:
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
   integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
 
-redux@^4.0.0, redux@^4.0.5, redux@^4.1.0:
+redux@^4.0.0, redux@^4.0.1, redux@^4.0.5, redux@^4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.1.tgz#76f1c439bb42043f985fbd9bf21990e60bd67f47"
   integrity sha512-hZQZdDEM25UY2P493kPYuKqviVwZ58lEmGQNeQ+gXa+U0gYPUBf7NKYazbe3m+bs/DzM/ahN12DbF+NG8i0CWw==