Browse Source

Upgrade to electron 22 (#397)

* add mac min/max

* restore exitfromtray

* fix macos quiting

* upgrade to electron 22

* Remove unused components / react-dnd

---------

Co-authored-by: jeffvli <jeffvictorli@gmail.com>
master
Kendall Garner 2 years ago
committed by GitHub
parent
commit
6f8de461f8
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 86
      .erb/mocks/electronStoreMock.js
  2. 2
      .erb/scripts/Notarize.js
  3. 50
      package.json
  4. 4
      src/App.tsx
  5. 16
      src/__tests__/App.test.tsx
  6. 6
      src/api/api.ts
  7. 4
      src/api/jellyfinApi.ts
  8. 11
      src/components/debug/DebugWindow.tsx
  9. 4
      src/components/layout/Layout.tsx
  10. 6
      src/components/layout/Sidebar.tsx
  11. 47
      src/components/layout/Titlebar.tsx
  12. 6
      src/components/library/AlbumList.tsx
  13. 10
      src/components/library/AlbumView.tsx
  14. 6
      src/components/library/ArtistList.tsx
  15. 14
      src/components/library/ArtistView.tsx
  16. 10
      src/components/library/FolderList.tsx
  17. 4
      src/components/library/MusicList.tsx
  18. 6
      src/components/modal/ReleaseNotes.tsx
  19. 12
      src/components/player/NowPlayingMiniView.tsx
  20. 16
      src/components/player/NowPlayingView.tsx
  21. 25
      src/components/player/Player.tsx
  22. 8
      src/components/player/PlayerBar.tsx
  23. 6
      src/components/playlist/PlaylistList.tsx
  24. 6
      src/components/playlist/PlaylistView.tsx
  25. 4
      src/components/scrollingmenu/ScrollingMenu.tsx
  26. 8
      src/components/search/SearchView.tsx
  27. 2
      src/components/settings/Config.tsx
  28. 15
      src/components/settings/ConfigPanels/AdvancedConfig.tsx
  29. 16
      src/components/settings/ConfigPanels/CacheConfig.tsx
  30. 37
      src/components/settings/ConfigPanels/ExternalConfig.tsx
  31. 13
      src/components/settings/ConfigPanels/ListViewConfig.tsx
  32. 80
      src/components/settings/ConfigPanels/LookAndFeelConfig.tsx
  33. 22
      src/components/settings/ConfigPanels/PlaybackConfig.tsx
  34. 42
      src/components/settings/ConfigPanels/PlayerConfig.tsx
  35. 18
      src/components/settings/ConfigPanels/ServerConfig.tsx
  36. 6
      src/components/settings/ConfigPanels/WindowConfig.tsx
  37. 22
      src/components/settings/DisconnectButton.tsx
  38. 33
      src/components/settings/Login.tsx
  39. 1129
      src/components/shared/setDefaultSettings.ts
  40. 8
      src/components/starred/StarredView.tsx
  41. 50
      src/components/table/DraggableCell.tsx
  42. 50
      src/components/table/DraggableHeaderCell.tsx
  43. 4
      src/components/viewtypes/GridViewType.tsx
  44. 9
      src/components/viewtypes/ListViewTable.tsx
  45. 6
      src/components/viewtypes/ViewTypeButtons.tsx
  46. 2
      src/hooks/useBrowserDownload.ts
  47. 2
      src/hooks/useFavorite.ts
  48. 46
      src/hooks/usePlayerControls.ts
  49. 2
      src/hooks/useRating.ts
  50. 5
      src/i18n/i18n.js
  51. 14
      src/index.tsx
  52. 74
      src/main.dev.js
  53. 14
      src/main.prod.js.LICENSE.txt
  54. 50
      src/preload.ts
  55. 4
      src/redux/configSlice.ts
  56. 4
      src/redux/folderSlice.ts
  57. 4
      src/redux/miscSlice.ts
  58. 4
      src/redux/playQueueSlice.ts
  59. 4
      src/redux/viewSlice.ts
  60. 10
      src/shared/utils.ts
  61. 7
      src/yarn.lock
  62. 6924
      yarn.lock

86
.erb/mocks/electronStoreMock.js

@ -0,0 +1,86 @@
export default class Store {
constructor(options={}) {
this.name = options.name || "config.json";
this.settings = options.defaults || {};
}
get store() {
return this.set;
}
set store(value) {
this.settings = value;
}
/**
*
* @param {string} key
*/
_getParentObject(key) {
const path = key.split(".");
const final = path.at(-1);
let object = this.settings;
for (const part of path.slice(0, -1)) {
object = object[part];
if (object === undefined) {
return [undefined, final];
}
}
return [object, final];
}
/**
*
* @param {string} key
*/
has(key) {
if (key.indexOf(".") !== -1) {
let [parent, final] = this._getParentObject(key);
return parent !== undefined && key in parent;
} else {
return key in this.settings;
}
}
/**
*
* @param {string} key
*/
get(key) {
if (key.indexOf(".") !== -1) {
let [parent, final] = this._getParentObject(key);
return parent !== undefined ? parent[final] : undefined;
} else {
return this.settings[key];
}
}
/**
*
* @param {string} key
* @param {any} value
*/
set(key, value) {
if (key.indexOf("." !== -1)) {
const path = key.split(".");
let object = this.settings;
for (const part of path.slice(0, -1)) {
if (!(part in object)) {
object[part] = {};
}
object = object[part];
}
object[path.at(-1)] = value;
} else {
this.settings[key] = value;
}
}
}

2
.erb/scripts/Notarize.js

@ -1,4 +1,4 @@
const { notarize } = require('electron-notarize');
const { notarize } = require('@electron/notarize');
const { build } = require('../../package.json');
exports.default = async function notarizeMacos(context) {

50
package.json

@ -41,7 +41,6 @@
"main.prod.js",
"main.prod.js.map",
"package.json",
"preload.ts",
"img/"
],
"afterSign": ".erb/scripts/Notarize.js",
@ -124,10 +123,13 @@
],
"homepage": "https://github.com/jeffvli/sonixd#readme",
"jest": {
"testURL": "http://localhost/",
"testEnvironmentOptions": {
"url": "http://localhost/"
},
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/.erb/mocks/fileMock.js",
"\\.(css|less|sass|scss)$": "identity-obj-proxy"
"\\.(css|less|sass|scss)$": "identity-obj-proxy",
"electron-store": "<rootDir>/.erb/mocks/electronStoreMock.js"
},
"moduleFileExtensions": [
"js",
@ -146,6 +148,7 @@
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/eslint-parser": "^7.19.1",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-decorators": "^7.12.1",
"@babel/plugin-proposal-do-expressions": "^7.12.1",
@ -168,30 +171,28 @@
"@babel/preset-react": "^7.12.7",
"@babel/preset-typescript": "^7.12.7",
"@babel/register": "^7.12.1",
"@electron/notarize": "^1.2.3",
"@electron/rebuild": "^3.2.10",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
"@teamsupercell/typings-for-css-modules-loader": "^2.4.0",
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@types/discord-rpc": "^4.0.2",
"@types/enzyme": "^3.10.5",
"@types/enzyme-adapter-react-16": "^1.0.6",
"@types/history": "4.7.6",
"@types/jest": "^26.0.15",
"@types/lodash": "^4.14.172",
"@types/md5": "^2.3.1",
"@types/node": "14.18.0",
"@types/randomstring": "^1.1.7",
"@types/react": "^17.0.2",
"@types/react-chartjs-2": "^2.5.7",
"@types/react-dnd": "^3.0.2",
"@types/react-dom": "^17.0.2",
"@types/react": "^18.0.2",
"@types/react-dom": "^18.0.2",
"@types/react-lazy-load-image-component": "^1.5.2",
"@types/react-redux": "^7.1.18",
"@types/react-router-dom": "^5.1.6",
"@types/react-slider": "^1.3.1",
"@types/react-test-renderer": "^17.0.1",
"@types/react-test-renderer": "^18.0.0",
"@types/react-transition-group": "^4.4.4",
"@types/react-virtualized": "^9.21.13",
"@types/react-virtualized": "^9.21.21",
"@types/react-virtualized-auto-sizer": "^1.0.1",
"@types/react-window": "^1.8.5",
"@types/redux-mock-store": "^1.0.3",
@ -199,7 +200,6 @@
"@types/webpack-env": "^1.15.2",
"@typescript-eslint/eslint-plugin": "^4.8.1",
"@typescript-eslint/parser": "^4.8.1",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.1.0",
"babel-loader": "^8.2.2",
"babel-plugin-dev-expression": "^0.2.2",
@ -212,14 +212,9 @@
"css-loader": "^5.0.1",
"css-minimizer-webpack-plugin": "^3.4.1",
"detect-port": "^1.3.0",
"electron": "13.6.3",
"electron-builder": "23.0.2",
"electron": "22.3.1",
"electron-builder": "^23.0.2",
"electron-devtools-installer": "git+https://github.com/MarshallOfSound/electron-devtools-installer.git",
"electron-notarize": "^1.0.0",
"electron-rebuild": "2.3.5",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.3",
"enzyme-to-json": "^3.5.0",
"eslint": "^7.5.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-airbnb-typescript": "^12.0.0",
@ -245,7 +240,7 @@
"opencollective-postinstall": "^2.0.3",
"prettier": "^2.0.5",
"react-refresh": "^0.10.0",
"react-test-renderer": "^17.0.1",
"react-test-renderer": "^18.0.1",
"redux-mock-store": "^1.5.4",
"rimraf": "^3.0.0",
"sass-loader": "^12.2.0",
@ -266,13 +261,13 @@
"array-move": "^3.0.1",
"axios": "^0.21.1",
"axios-retry": "^3.1.9",
"chart.js": "^3.7.1",
"chart.js": "^3.9.1",
"discord-rpc": "^4.0.1",
"electron-debug": "^3.1.0",
"electron-localshortcut": "^3.2.1",
"electron-log": "^4.2.4",
"electron-redux": "^1.5.4",
"electron-settings": "^4.0.2",
"electron-store": "^8.1.0",
"electron-updater": "^4.3.4",
"fast-average-color": "^7.0.1",
"format-duration": "^1.4.0",
@ -286,10 +281,10 @@
"nanoid": "^3.1.23",
"nodejs-fs-utils": "^1.2.5",
"randomstring": "^1.2.1",
"react": "^17.0.2",
"react": "^18.0.2",
"react-audio-player": "^0.17.0",
"react-chartjs-2": "^3.0.4",
"react-dom": "^17.0.2",
"react-chartjs-2": "^4.3.1",
"react-dom": "^18.0.2",
"react-helmet-async": "^1.1.2",
"react-hotkeys-hook": "^3.4.3",
"react-i18next": "^11.15.3",
@ -308,6 +303,7 @@
"styled-components": "^5"
},
"resolutions": {
"@types/react": "^18.0.0",
"glob-parent": "^5.1.2",
"styled-components": "^5"
},

4
src/App.tsx

@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
import { webFrame } from 'electron';
import _ from 'lodash';
import { useHotkeys } from 'react-hotkeys-hook';
import settings from 'electron-settings';
import { ThemeProvider } from 'styled-components';
import { HashRouter as Router, Switch, Route } from 'react-router-dom';
import './styles/App.global.css';
@ -33,6 +32,7 @@ import { mockSettings } from './shared/mockSettings';
import MusicList from './components/library/MusicList';
import ReleaseNotes from './components/modal/ReleaseNotes';
import { notifyToast } from './components/shared/toast';
import { settings } from './components/shared/setDefaultSettings';
const App = () => {
const [zoomFactor, setZoomFactor] = useState(Number(localStorage.getItem('zoomFactor')) || 1.0);
@ -77,7 +77,7 @@ const App = () => {
const themes: any =
process.env.NODE_ENV === 'test'
? mockSettings.themesDefault
: _.concat(settings.getSync('themes'), settings.getSync('themesDefault'));
: _.concat(settings.get('themes'), settings.get('themesDefault'));
setTheme(getTheme(themes, misc.theme) || defaultDark);
}, [misc.theme]);

16
src/__tests__/App.test.tsx

@ -1,3 +1,18 @@
jest.mock('electron', () => {
const originalModule = jest.requireActual('electron');
return {
__esModule: true,
...originalModule,
ipcRenderer: {
on: jest.fn(),
sendSync: jest.fn(),
removeAllListeners: jest.fn(),
},
};
});
/* eslint-disable import/first */
import React from 'react';
import '@testing-library/jest-dom';
import { Provider } from 'react-redux';
@ -16,6 +31,7 @@ import App from '../App';
import { Server } from '../types';
import { ArtistPage } from '../redux/artistSlice';
import { View } from '../redux/viewSlice';
/* eslint-enable import/first */
const middlewares: Middleware<Record<string, unknown>, any, Dispatch<AnyAction>>[] | undefined = [];
const mockStore = configureMockStore(middlewares);

6
src/api/api.ts

@ -1,16 +1,14 @@
/* eslint-disable no-await-in-loop */
import axios from 'axios';
import _ from 'lodash';
import settings from 'electron-settings';
import { nanoid } from 'nanoid/non-secure';
import axiosRetry from 'axios-retry';
import { mockSettings } from '../shared/mockSettings';
import { Item } from '../types';
import { settings } from '../components/shared/setDefaultSettings';
const legacyAuth =
process.env.NODE_ENV === 'test'
? mockSettings.legacyAuth
: Boolean(settings.getSync('legacyAuth'));
process.env.NODE_ENV === 'test' ? mockSettings.legacyAuth : Boolean(settings.get('legacyAuth'));
const getAuth = (useLegacyAuth: boolean) => {
if (useLegacyAuth) {

4
src/api/jellyfinApi.ts

@ -1,7 +1,6 @@
/* eslint-disable no-await-in-loop */
import axios from 'axios';
import axiosRetry from 'axios-retry';
import settings from 'electron-settings';
import _ from 'lodash';
import moment from 'moment';
import { nanoid } from 'nanoid/non-secure';
@ -10,9 +9,10 @@ import { handleDisconnect } from '../components/settings/DisconnectButton';
import { notifyToast } from '../components/shared/toast';
import { GenericItem, Item, Song } from '../types';
import { mockSettings } from '../shared/mockSettings';
import { settings } from '../components/shared/setDefaultSettings';
const transcode =
process.env.NODE_ENV === 'test' ? mockSettings.transcode : Boolean(settings.getSync('transcode'));
process.env.NODE_ENV === 'test' ? mockSettings.transcode : Boolean(settings.get('transcode'));
const getAuth = () => {
return {

11
src/components/debug/DebugWindow.tsx

@ -2,10 +2,21 @@ import React, { useState } from 'react';
import { Line } from 'react-chartjs-2';
import { Button, Checkbox, Divider, FlexboxGrid, Panel, Slider } from 'rsuite';
import { useTranslation } from 'react-i18next';
import {
Chart,
CategoryScale,
Legend,
LinearScale,
LineElement,
PointElement,
Title,
} from 'chart.js';
import { useAppSelector, useAppDispatch } from '../../redux/hooks';
import CustomTooltip from '../shared/CustomTooltip';
import { setFadeData } from '../../redux/playQueueSlice';
Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Legend);
const DebugWindow = ({ ...rest }) => {
const { t } = useTranslation();
const dispatch = useAppDispatch();

4
src/components/layout/Layout.tsx

@ -1,5 +1,4 @@
import React, { useState } from 'react';
import settings from 'electron-settings';
import { useHotkeys } from 'react-hotkeys-hook';
import { useHistory } from 'react-router-dom';
import { ButtonToolbar, Content, FlexboxGrid, Icon, Nav, Whisper } from 'rsuite';
@ -26,6 +25,7 @@ import AdvancedConfig from '../settings/ConfigPanels/AdvancedConfig';
import { setSidebar } from '../../redux/configSlice';
import SearchBar from '../search/SearchBar';
import Popup from '../shared/Popup';
import { settings } from '../shared/setDefaultSettings';
const Layout = ({ footer, children, disableSidebar, font }: any) => {
const { t } = useTranslation();
@ -47,7 +47,7 @@ const Layout = ({ footer, children, disableSidebar, font }: any) => {
);
const handleToggle = () => {
settings.setSync('sidebar.expand', !config.lookAndFeel.sidebar.expand);
settings.set('sidebar.expand', !config.lookAndFeel.sidebar.expand);
dispatch(setSidebar({ expand: !config.lookAndFeel.sidebar.expand }));
};

6
src/components/layout/Sidebar.tsx

@ -1,5 +1,4 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import settings from 'electron-settings';
import useMeasure from 'react-use/lib/useMeasure';
import { LazyLoadImage } from 'react-lazy-load-image-component';
import { useTranslation } from 'react-i18next';
@ -20,6 +19,7 @@ import { InfoModal } from '../modal/Modal';
import placeholderImg from '../../img/placeholder.png';
import SidebarPlaylists from './SidebarPlaylists';
import { setSidebar } from '../../redux/configSlice';
import { settings } from '../shared/setDefaultSettings';
const Sidebar = ({
expand,
@ -66,7 +66,7 @@ const Sidebar = ({
if (isResizing) {
const finalWidth = `${getSidebarWidth(e?.clientX)}px`;
dispatch(setSidebar({ width: finalWidth }));
settings.setSync('sidebar.width', finalWidth);
settings.set('sidebar.width', finalWidth);
setIsResizing(false);
document.body.style.cursor = 'default';
}
@ -115,7 +115,7 @@ const Sidebar = ({
size="xs"
onClick={() => {
dispatch(setSidebar({ coverArt: false }));
settings.setSync('sidebar.coverArt', false);
settings.set('sidebar.coverArt', false);
}}
>
<Icon icon="down" />

47
src/components/layout/Titlebar.tsx

@ -1,5 +1,6 @@
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ipcRenderer } from 'electron';
import {
TitleHeader,
DragRegion,
@ -38,6 +39,21 @@ const Titlebar = ({ font }: any) => {
document.title = `${playStatus} ${songTitle}`.trim();
}, [playQueue, player.status, t]);
useEffect(() => {
ipcRenderer.on('maximize', () => {
document.body.classList.add('maximized');
});
ipcRenderer.on('unmaximize', () => {
document.body.classList.remove('maximized');
});
return () => {
ipcRenderer.removeAllListeners('maximize');
ipcRenderer.removeAllListeners('unmaximize');
};
}, []);
// if the titlebar is native return no custom titlebar
if (misc.titleBar === 'native') {
return null;
@ -57,6 +73,7 @@ const Titlebar = ({ font }: any) => {
minButton
className="button"
id="min-button"
onClick={() => ipcRenderer.send('minimize')}
onMouseOver={() => setHoverMin(true)}
onMouseLeave={() => setHoverMin(false)}
>
@ -71,6 +88,7 @@ const Titlebar = ({ font }: any) => {
maxButton
className="button"
id="max-button"
onClick={() => ipcRenderer.send('maximize')}
onMouseOver={() => setHoverMax(true)}
onMouseLeave={() => setHoverMax(false)}
>
@ -85,6 +103,7 @@ const Titlebar = ({ font }: any) => {
restoreButton
className="button"
id="restore-button"
onClick={() => ipcRenderer.send('unmaximize')}
onMouseOver={() => setHoverMax(true)}
onMouseLeave={() => setHoverMax(false)}
>
@ -98,6 +117,7 @@ const Titlebar = ({ font }: any) => {
<MacControlButton
className="button"
id="close-button"
onClick={() => ipcRenderer.send('close')}
onMouseOver={() => setHoverClose(true)}
onMouseLeave={() => setHoverClose(false)}
>
@ -121,7 +141,12 @@ const Titlebar = ({ font }: any) => {
</span>
</div>
<WindowControl id="window-controls">
<WindowControlButton minButton className="button" id="min-button">
<WindowControlButton
minButton
className="button"
id="min-button"
onClick={() => ipcRenderer.send('minimize')}
>
<img
className="icon"
srcSet="img/icons/min-w-10.png 1x, img/icons/min-w-12.png 1.25x, img/icons/min-w-15.png 1.5x, img/icons/min-w-15.png 1.75x, img/icons/min-w-20.png 2x, img/icons/min-w-20.png 2.25x, img/icons/min-w-24.png 2.5x, img/icons/min-w-30.png 3x, img/icons/min-w-30.png 3.5x"
@ -129,7 +154,12 @@ const Titlebar = ({ font }: any) => {
alt=""
/>
</WindowControlButton>
<WindowControlButton maxButton className="button" id="max-button">
<WindowControlButton
maxButton
className="button"
id="max-button"
onClick={() => ipcRenderer.send('maximize')}
>
<img
className="icon"
srcSet="img/icons/max-w-10.png 1x, img/icons/max-w-12.png 1.25x, img/icons/max-w-15.png 1.5x, img/icons/max-w-15.png 1.75x, img/icons/max-w-20.png 2x, img/icons/max-w-20.png 2.25x, img/icons/max-w-24.png 2.5x, img/icons/max-w-30.png 3x, img/icons/max-w-30.png 3.5x"
@ -137,7 +167,12 @@ const Titlebar = ({ font }: any) => {
alt=""
/>
</WindowControlButton>
<WindowControlButton restoreButton className="button" id="restore-button">
<WindowControlButton
restoreButton
className="button"
id="restore-button"
onClick={() => ipcRenderer.send('unmaximize')}
>
<img
className="icon"
srcSet="img/icons/restore-w-10.png 1x, img/icons/restore-w-12.png 1.25x, img/icons/restore-w-15.png 1.5x, img/icons/restore-w-15.png 1.75x, img/icons/restore-w-20.png 2x, img/icons/restore-w-20.png 2.25x, img/icons/restore-w-24.png 2.5x, img/icons/restore-w-30.png 3x, img/icons/restore-w-30.png 3.5x"
@ -145,7 +180,11 @@ const Titlebar = ({ font }: any) => {
alt=""
/>
</WindowControlButton>
<WindowControlButton className="button" id="close-button">
<WindowControlButton
className="button"
id="close-button"
onClick={() => ipcRenderer.send('close')}
>
<img
className="icon"
srcSet="img/icons/close-w-10.png 1x, img/icons/close-w-12.png 1.25x, img/icons/close-w-15.png 1.5x, img/icons/close-w-15.png 1.75x, img/icons/close-w-20.png 2x, img/icons/close-w-20.png 2.25x, img/icons/close-w-24.png 2.5x, img/icons/close-w-30.png 3x, img/icons/close-w-30.png 3.5x"

6
src/components/library/AlbumList.tsx

@ -1,6 +1,5 @@
import React, { useEffect, useRef, useState } from 'react';
import _ from 'lodash';
import settings from 'electron-settings';
import { ButtonToolbar, Nav, Whisper } from 'rsuite';
import { useQuery, useQueryClient } from 'react-query';
import { useHistory } from 'react-router-dom';
@ -33,6 +32,7 @@ import useListClickHandler from '../../hooks/useListClickHandler';
import Popup from '../shared/Popup';
import useFavorite from '../../hooks/useFavorite';
import { useRating } from '../../hooks/useRating';
import { settings } from '../shared/setDefaultSettings';
export const ALBUM_SORT_TYPES = [
{ label: i18n.t('A-Z (Name)'), value: 'alphabeticalByName', role: i18n.t('Default') },
@ -54,7 +54,7 @@ const AlbumList = () => {
const view = useAppSelector((state) => state.view);
const [isRefreshing, setIsRefreshing] = useState(false);
const [sortTypes, setSortTypes] = useState<any[]>([]);
const [viewType, setViewType] = useState(settings.getSync('albumViewType'));
const [viewType, setViewType] = useState(settings.get('albumViewType'));
const [musicFolder, setMusicFolder] = useState({ loaded: false, id: undefined });
const albumFilterPickerContainerRef = useRef(null);
const [currentQueryKey, setCurrentQueryKey] = useState<any>(['albumList']);
@ -386,7 +386,7 @@ const AlbumList = () => {
})
}
cacheImages={{
enabled: settings.getSync('cacheImages'),
enabled: settings.get('cacheImages'),
cacheType: 'album',
cacheIdProperty: 'albumId',
}}

10
src/components/library/AlbumView.tsx

@ -1,7 +1,6 @@
import React, { useRef } from 'react';
import { nanoid } from 'nanoid/non-secure';
import { clipboard, shell } from 'electron';
import settings from 'electron-settings';
import { ButtonToolbar, Whisper } from 'rsuite';
import { useQuery, useQueryClient } from 'react-query';
import { useParams, useHistory } from 'react-router-dom';
@ -39,6 +38,7 @@ import Popup from '../shared/Popup';
import usePlayQueueHandler from '../../hooks/usePlayQueueHandler';
import useFavorite from '../../hooks/useFavorite';
import { useRating } from '../../hooks/useRating';
import { settings } from '../shared/setDefaultSettings';
interface AlbumParams {
id: string;
@ -209,7 +209,7 @@ const AlbumView = ({ ...rest }: any) => {
/>
}
cacheImages={{
enabled: settings.getSync('cacheImages'),
enabled: settings.get('cacheImages'),
cacheType: 'album',
id: data.albumId,
}}
@ -444,10 +444,10 @@ const AlbumView = ({ ...rest }: any) => {
handleRating(rowData, { queryKey: ['album', albumId], rating })
}
virtualized
rowHeight={Number(settings.getSync('musicListRowHeight'))}
fontSize={Number(settings.getSync('musicListFontSize'))}
rowHeight={Number(settings.get('musicListRowHeight'))}
fontSize={Number(settings.get('musicListFontSize'))}
cacheImages={{
enabled: settings.getSync('cacheImages'),
enabled: settings.get('cacheImages'),
cacheType: 'album',
cacheIdProperty: 'albumId',
}}

6
src/components/library/ArtistList.tsx

@ -1,5 +1,4 @@
import React, { useEffect, useState } from 'react';
import settings from 'electron-settings';
import { useQuery, useQueryClient } from 'react-query';
import { useHistory } from 'react-router';
import { ButtonToolbar } from 'rsuite';
@ -20,6 +19,7 @@ import { StyledTag } from '../shared/styled';
import useListClickHandler from '../../hooks/useListClickHandler';
import useFavorite from '../../hooks/useFavorite';
import { useRating } from '../../hooks/useRating';
import { settings } from '../shared/setDefaultSettings';
const ArtistList = () => {
const { t } = useTranslation();
@ -31,7 +31,7 @@ const ArtistList = () => {
const config = useAppSelector((state) => state.config);
const misc = useAppSelector((state) => state.misc);
const [isRefreshing, setIsRefreshing] = useState(false);
const [viewType, setViewType] = useState(settings.getSync('artistViewType'));
const [viewType, setViewType] = useState(settings.get('artistViewType'));
const [musicFolder, setMusicFolder] = useState(undefined);
useEffect(() => {
@ -160,7 +160,7 @@ const ArtistList = () => {
handleRating(rowData, { queryKey: ['artistList', musicFolder], rating })
}
cacheImages={{
enabled: settings.getSync('cacheImages'),
enabled: settings.get('cacheImages'),
cacheType: 'artist',
cacheIdProperty: 'id',
}}

14
src/components/library/ArtistView.tsx

@ -4,7 +4,6 @@ import _ from 'lodash';
import { nanoid } from 'nanoid/non-secure';
import FastAverageColor from 'fast-average-color';
import { clipboard, shell } from 'electron';
import settings from 'electron-settings';
import { ButtonToolbar, Whisper, ButtonGroup, Icon } from 'rsuite';
import { useQuery, useQueryClient } from 'react-query';
import { useTranslation } from 'react-i18next';
@ -42,6 +41,7 @@ import Popup from '../shared/Popup';
import usePlayQueueHandler from '../../hooks/usePlayQueueHandler';
import useFavorite from '../../hooks/useFavorite';
import { useRating } from '../../hooks/useRating';
import { settings } from '../shared/setDefaultSettings';
const fac = new FastAverageColor();
@ -58,7 +58,7 @@ const ArtistView = ({ ...rest }: any) => {
const misc = useAppSelector((state) => state.misc);
const config = useAppSelector((state) => state.config);
const folder = useAppSelector((state) => state.folder);
const [viewType, setViewType] = useState(settings.getSync('albumViewType') || 'list');
const [viewType, setViewType] = useState(settings.get('albumViewType') || 'list');
const [imageAverageColor, setImageAverageColor] = useState({ color: '', loaded: false });
const [artistDurationTotal, setArtistDurationTotal] = useState('');
const [artistSongTotal, setArtistSongTotal] = useState(0);
@ -125,7 +125,7 @@ const ArtistView = ({ ...rest }: any) => {
]);
useEffect(() => {
if (settings.getSync('artistPageLegacy') && !rest.isModal) {
if (settings.get('artistPageLegacy') && !rest.isModal) {
history.replace(`/library/artist/${artistId}/albums`);
}
}, [artistId, history, rest.isModal]);
@ -357,7 +357,7 @@ const ArtistView = ({ ...rest }: any) => {
/>
}
cacheImages={{
enabled: settings.getSync('cacheImages'),
enabled: settings.get('cacheImages'),
cacheType: 'artist',
id: data.id,
}}
@ -596,7 +596,7 @@ const ArtistView = ({ ...rest }: any) => {
rowHeight={config.lookAndFeel.listView.music.rowHeight}
fontSize={config.lookAndFeel.listView.music.fontSize}
cacheImages={{
enabled: settings.getSync('cacheImages'),
enabled: settings.get('cacheImages'),
cacheType: 'album',
cacheIdProperty: 'albumId',
}}
@ -628,7 +628,7 @@ const ArtistView = ({ ...rest }: any) => {
rowHeight={config.lookAndFeel.listView.album.rowHeight}
fontSize={config.lookAndFeel.listView.album.fontSize}
cacheImages={{
enabled: settings.getSync('cacheImages'),
enabled: settings.get('cacheImages'),
cacheType: 'album',
cacheIdProperty: 'albumId',
}}
@ -685,7 +685,7 @@ const ArtistView = ({ ...rest }: any) => {
rowHeight={config.lookAndFeel.listView.music.rowHeight}
fontSize={config.lookAndFeel.listView.music.fontSize}
cacheImages={{
enabled: settings.getSync('cacheImages'),
enabled: settings.get('cacheImages'),
cacheType: 'album',
cacheIdProperty: 'albumId',
}}

10
src/components/library/FolderList.tsx

@ -1,5 +1,4 @@
import React, { useEffect, useRef, useState } from 'react';
import settings from 'electron-settings';
import _ from 'lodash';
import { useQuery, useQueryClient } from 'react-query';
import { useHistory } from 'react-router-dom';
@ -21,6 +20,7 @@ import CenterLoader from '../loader/CenterLoader';
import useListClickHandler from '../../hooks/useListClickHandler';
import useFavorite from '../../hooks/useFavorite';
import { useRating } from '../../hooks/useRating';
import { settings } from '../shared/setDefaultSettings';
const FolderList = () => {
const { t } = useTranslation();
@ -169,9 +169,9 @@ const FolderList = () => {
: indexData
}
loading={isLoadingFolderData}
tableColumns={settings.getSync('musicListColumns')}
rowHeight={Number(settings.getSync('musicListRowHeight'))}
fontSize={Number(settings.getSync('musicListFontSize'))}
tableColumns={settings.get('musicListColumns')}
rowHeight={Number(settings.get('musicListRowHeight'))}
fontSize={Number(settings.get('musicListFontSize'))}
handleRowClick={handleRowClick}
handleRowDoubleClick={handleRowDoubleClick}
handleFavorite={(rowData: any) =>
@ -195,7 +195,7 @@ const FolderList = () => {
handleRating(rowData, { queryKey: ['folder', folder.currentViewedFolder], rating })
}
cacheImages={{
enabled: settings.getSync('cacheImages'),
enabled: settings.get('cacheImages'),
cacheType: 'folder',
cacheIdProperty: 'albumId',
}}

4
src/components/library/MusicList.tsx

@ -1,5 +1,4 @@
import React, { useEffect, useRef, useState } from 'react';
import settings from 'electron-settings';
import { ButtonToolbar } from 'rsuite';
import { useQuery, useQueryClient } from 'react-query';
import { useTranslation } from 'react-i18next';
@ -22,6 +21,7 @@ import useListScroll from '../../hooks/useListScroll';
import useListClickHandler from '../../hooks/useListClickHandler';
import useFavorite from '../../hooks/useFavorite';
import { useRating } from '../../hooks/useRating';
import { settings } from '../shared/setDefaultSettings';
// prettier-ignore
export const MUSIC_SORT_TYPES = [
@ -259,7 +259,7 @@ const MusicList = () => {
handleRating(rowData, { queryKey: currentQueryKey, rating })
}
cacheImages={{
enabled: settings.getSync('cacheImages'),
enabled: settings.get('cacheImages'),
cacheType: 'album',
cacheIdProperty: 'albumId',
}}

6
src/components/modal/ReleaseNotes.tsx

@ -1,15 +1,15 @@
import React, { useEffect, useState } from 'react';
import { Divider } from 'rsuite';
import settings from 'electron-settings';
import { shell } from 'electron';
import axios from 'axios';
import { InfoModal } from './Modal';
import { StyledButton } from '../shared/styled';
import { ConfigPanel } from '../settings/styled';
import CenterLoader from '../loader/CenterLoader';
import { settings } from '../shared/setDefaultSettings';
const ReleaseNotes = () => {
const [show, setShow] = useState(Boolean(settings.getSync('autoUpdateNotice')));
const [show, setShow] = useState(Boolean(settings.get('autoUpdateNotice')));
const [releaseDetails, setReleaseDetails] = useState<any>();
const [isLoading, setIsLoading] = useState(false);
@ -40,7 +40,7 @@ const ReleaseNotes = () => {
show={show}
handleHide={() => {
setShow(false);
settings.setSync('autoUpdateNotice', false);
settings.set('autoUpdateNotice', false);
}}
>
<ConfigPanel>

12
src/components/player/NowPlayingMiniView.tsx

@ -1,6 +1,5 @@
import React, { useEffect, useState, useRef } from 'react';
import _ from 'lodash';
import settings from 'electron-settings';
import { ButtonToolbar, FlexboxGrid, Icon, Whisper, ControlLabel } from 'rsuite';
import { useHotkeys } from 'react-hotkeys-hook';
import { useQuery } from 'react-query';
@ -52,6 +51,7 @@ import { Server, Song } from '../../types';
import useListClickHandler from '../../hooks/useListClickHandler';
import Popup from '../shared/Popup';
import useFavorite from '../../hooks/useFavorite';
import { settings } from '../shared/setDefaultSettings';
const NowPlayingMiniView = () => {
const { t } = useTranslation();
@ -62,7 +62,7 @@ const NowPlayingMiniView = () => {
const config = useAppSelector((state) => state.config);
const folder = useAppSelector((state) => state.folder);
const [autoPlaylistTrackCount, setRandomPlaylistTrackCount] = useState(
Number(settings.getSync('randomPlaylistTrackCount'))
Number(settings.get('randomPlaylistTrackCount'))
);
const genrePickerContainerRef = useRef(null);
const musicFolderPickerContainerRef = useRef(null);
@ -118,7 +118,7 @@ const NowPlayingMiniView = () => {
useEffect(() => {
if (playQueue.scrollWithCurrentSong) {
const rowHeight = Number(settings.getSync('miniListRowHeight'));
const rowHeight = Number(settings.get('miniListRowHeight'));
const scrollPosition =
rowHeight * playQueue.currentIndex - rowHeight * 2 > 0
? rowHeight * playQueue.currentIndex - rowHeight * 2
@ -273,7 +273,7 @@ const NowPlayingMiniView = () => {
defaultValue={autoPlaylistTrackCount}
value={autoPlaylistTrackCount}
onChange={(e: number) => {
settings.setSync('randomPlaylistTrackCount', Number(e));
settings.set('randomPlaylistTrackCount', Number(e));
setRandomPlaylistTrackCount(Number(e));
}}
/>
@ -425,7 +425,7 @@ const NowPlayingMiniView = () => {
defaultChecked={playQueue.scrollWithCurrentSong}
checked={playQueue.scrollWithCurrentSong}
onChange={(_v: any, e: boolean) => {
settings.setSync('scrollWithCurrentSong', e);
settings.set('scrollWithCurrentSong', e);
dispatch(
setPlaybackSetting({
setting: 'scrollWithCurrentSong',
@ -451,7 +451,7 @@ const NowPlayingMiniView = () => {
rowHeight={config.lookAndFeel.listView.mini.rowHeight}
fontSize={config.lookAndFeel.listView.mini.fontSize}
cacheImages={{
enabled: settings.getSync('cacheImages'),
enabled: settings.get('cacheImages'),
cacheType: 'album',
cacheIdProperty: 'albumId',
}}

16
src/components/player/NowPlayingView.tsx

@ -1,6 +1,5 @@
import React, { useEffect, useRef, useState } from 'react';
import _ from 'lodash';
import settings from 'electron-settings';
import { useQuery } from 'react-query';
import { ButtonToolbar, ButtonGroup, ControlLabel, FlexboxGrid, Icon, Whisper } from 'rsuite';
import { useHotkeys } from 'react-hotkeys-hook';
@ -56,6 +55,7 @@ import useListClickHandler from '../../hooks/useListClickHandler';
import Popup from '../shared/Popup';
import useFavorite from '../../hooks/useFavorite';
import { useRating } from '../../hooks/useRating';
import { settings } from '../shared/setDefaultSettings';
const NowPlayingView = () => {
const { t } = useTranslation();
@ -70,14 +70,14 @@ const NowPlayingView = () => {
const folder = useAppSelector((state) => state.folder);
const misc = useAppSelector((state) => state.misc);
const [autoPlaylistTrackCount, setRandomPlaylistTrackCount] = useState(
Number(settings.getSync('randomPlaylistTrackCount'))
Number(settings.get('randomPlaylistTrackCount'))
);
const [autoPlaylistFromYear, setRandomPlaylistFromYear] = useState(0);
const [autoPlaylistToYear, setRandomPlaylistToYear] = useState(0);
const [randomPlaylistGenre, setRandomPlaylistGenre] = useState<string | undefined>(undefined);
const [isLoadingRandom, setIsLoadingRandom] = useState(false);
const [musicFolder, setMusicFolder] = useState(folder.musicFolder);
const [infoMode, setInfoMode] = useState(settings.getSync('infoMode' || false));
const [infoMode, setInfoMode] = useState(settings.get('infoMode' || false));
const { data: musicFolders } = useQuery(['musicFolders'], () =>
apiController({ serverType: config.serverType, endpoint: 'getMusicFolders' })
@ -131,7 +131,7 @@ const NowPlayingView = () => {
useEffect(() => {
if (playQueue.scrollWithCurrentSong) {
setTimeout(() => {
const rowHeight = Number(settings.getSync('musicListRowHeight'));
const rowHeight = Number(settings.get('musicListRowHeight'));
tableRef?.current?.table.current?.scrollTop(
rowHeight * playQueue.currentIndex - rowHeight * 2 > 0
? rowHeight * playQueue.currentIndex - rowHeight * 2
@ -288,7 +288,7 @@ const NowPlayingView = () => {
defaultValue={autoPlaylistTrackCount}
value={autoPlaylistTrackCount}
onChange={(e: number) => {
settings.setSync('randomPlaylistTrackCount', Number(e));
settings.set('randomPlaylistTrackCount', Number(e));
setRandomPlaylistTrackCount(Number(e));
}}
/>
@ -397,7 +397,7 @@ const NowPlayingView = () => {
<StyledButton
size="sm"
onClick={() => {
settings.setSync('infoMode', !infoMode);
settings.set('infoMode', !infoMode);
setInfoMode(!infoMode);
}}
>
@ -456,7 +456,7 @@ const NowPlayingView = () => {
defaultChecked={playQueue.scrollWithCurrentSong}
checked={playQueue.scrollWithCurrentSong}
onChange={(_v: any, e: boolean) => {
settings.setSync('scrollWithCurrentSong', e);
settings.set('scrollWithCurrentSong', e);
dispatch(
setPlaybackSetting({
setting: 'scrollWithCurrentSong',
@ -493,7 +493,7 @@ const NowPlayingView = () => {
rowHeight={config.lookAndFeel.listView.music.rowHeight}
fontSize={config.lookAndFeel.listView.music.fontSize}
cacheImages={{
enabled: settings.getSync('cacheImages'),
enabled: settings.get('cacheImages'),
cacheType: 'album',
cacheIdProperty: 'albumId',
}}

25
src/components/player/Player.tsx

@ -7,7 +7,6 @@ import React, {
useCallback,
} from 'react';
import { ipcRenderer } from 'electron';
import settings from 'electron-settings';
import ReactAudioPlayer from 'react-audio-player';
import { Helmet } from 'react-helmet-async';
import { useAppDispatch, useAppSelector } from '../../redux/hooks';
@ -28,6 +27,7 @@ import { isCached, isLinux } from '../../shared/utils';
import { apiController } from '../../api/controller';
import { Artist, Server } from '../../types';
import { setStatus } from '../../redux/playerSlice';
import { settings } from '../shared/setDefaultSettings';
const gaplessListenHandler = (
currentPlayerRef: any,
@ -252,7 +252,7 @@ const Player = ({ currentEntryList, muted, children }: any, ref: any) => {
const player = useAppSelector((state) => state.player);
const misc = useAppSelector((state) => state.misc);
const config = useAppSelector((state) => state.config);
const cacheSongs = settings.getSync('cacheSongs');
const cacheSongs = settings.get('cacheSongs');
const [title] = useState('');
const [scrobbled, setScrobbled] = useState(false);
@ -472,6 +472,24 @@ const Player = ({ currentEntryList, muted, children }: any, ref: any) => {
);
}, [config.serverType, currentEntryList, dispatch, playQueue, scrobbled]);
function setMetadata(arg: any) {
navigator.mediaSession.metadata = new MediaMetadata({
title: arg.title || 'Unknown Title',
artist:
arg.artist?.length !== 0
? arg.artist?.map((artist: any) => artist.title).join(', ')
: 'Unknown Artist',
album: 'Unknown Album',
artwork: [
{
src: arg.image.includes('placeholder')
? 'https://raw.githubusercontent.com/jeffvli/sonixd/main/src/img/placeholder.png'
: arg.image,
},
],
});
}
const handleOnEndedPlayer1 = useCallback(() => {
player1Ref.current.audioEl.current.currentTime = 0;
if (cacheSongs) {
@ -521,6 +539,7 @@ const Player = ({ currentEntryList, muted, children }: any, ref: any) => {
)
];
ipcRenderer.send('current-song', nextSong);
setMetadata(nextSong);
dispatch(setAutoIncremented(false));
}
@ -575,6 +594,7 @@ const Player = ({ currentEntryList, muted, children }: any, ref: any) => {
)
];
ipcRenderer.send('current-song', nextSong);
setMetadata(nextSong);
dispatch(setAutoIncremented(false));
}
@ -621,6 +641,7 @@ const Player = ({ currentEntryList, muted, children }: any, ref: any) => {
: playQueue[currentEntryList][playQueue.player2.index];
ipcRenderer.send('current-song', playQueue.current);
setMetadata(playQueue.current);
if (config.player.systemNotifications && currentSong) {
// eslint-disable-next-line no-new

8
src/components/player/PlayerBar.tsx

@ -1,7 +1,6 @@
import React, { useEffect, useState, useRef, useMemo } from 'react';
import axios from 'axios';
import { useQueryClient } from 'react-query';
import settings from 'electron-settings';
import { FlexboxGrid, Grid, Row, Col, Whisper, Icon } from 'rsuite';
import { useHistory } from 'react-router-dom';
import { LazyLoadImage } from 'react-lazy-load-image-component';
@ -37,6 +36,7 @@ import usePlayQueueHandler from '../../hooks/usePlayQueueHandler';
import { apiController } from '../../api/controller';
import Slider from '../slider/Slider';
import useDiscordRpc from '../../hooks/useDiscordRpc';
import { settings } from '../shared/setDefaultSettings';
const PlayerBar = () => {
const { t } = useTranslation();
@ -49,7 +49,7 @@ const PlayerBar = () => {
const [currentTime, setCurrentTime] = useState(0);
const [isDraggingVolume, setIsDraggingVolume] = useState(false);
const [currentEntryList, setCurrentEntryList] = useState('entry');
const [localVolume, setLocalVolume] = useState(Number(settings.getSync('volume')));
const [localVolume, setLocalVolume] = useState(Number(settings.get('volume')));
const [muted, setMuted] = useState(false);
const [showCoverArtModal, setShowCoverArtModal] = useState(false);
const [showLyricsModal, setShowLyricsModal] = useState(false);
@ -215,7 +215,7 @@ const PlayerBar = () => {
playersRef.current.player2.audioEl.current.volume = localVolume ** 2;
}
settings.setSync('volume', localVolume);
settings.set('volume', localVolume);
}
setIsDraggingVolume(false);
}, 100);
@ -278,7 +278,7 @@ const PlayerBar = () => {
size="xs"
onClick={() => {
dispatch(setSidebar({ coverArt: true }));
settings.setSync('sidebar.coverArt', true);
settings.set('sidebar.coverArt', true);
}}
>
<Icon icon="up" />

6
src/components/playlist/PlaylistList.tsx

@ -2,7 +2,6 @@ import React, { useRef, useState } from 'react';
import { useQuery, useQueryClient } from 'react-query';
import { useHistory } from 'react-router-dom';
import { Form, Whisper } from 'rsuite';
import settings from 'electron-settings';
import { useTranslation } from 'react-i18next';
import useSearchQuery from '../../hooks/useSearchQuery';
import ListViewType from '../viewtypes/ListViewType';
@ -21,6 +20,7 @@ import { setSort } from '../../redux/playlistSlice';
import ColumnSortPopover from '../shared/ColumnSortPopover';
import useListClickHandler from '../../hooks/useListClickHandler';
import Popup from '../shared/Popup';
import { settings } from '../shared/setDefaultSettings';
const PlaylistList = () => {
const { t } = useTranslation();
@ -32,7 +32,7 @@ const PlaylistList = () => {
const playlist = useAppSelector((state) => state.playlist);
const playlistTriggerRef = useRef<any>();
const [newPlaylistName, setNewPlaylistName] = useState('');
const [viewType, setViewType] = useState(settings.getSync('playlistViewType') || 'list');
const [viewType, setViewType] = useState(settings.get('playlistViewType') || 'list');
const {
isLoading,
isError,
@ -201,7 +201,7 @@ const PlaylistList = () => {
rowHeight={config.lookAndFeel.listView.playlist.rowHeight}
fontSize={config.lookAndFeel.listView.playlist.fontSize}
cacheImages={{
enabled: settings.getSync('cacheImages'),
enabled: settings.get('cacheImages'),
cacheType: 'playlist',
cacheIdProperty: 'id',
}}

6
src/components/playlist/PlaylistView.tsx

@ -2,7 +2,6 @@ import React, { useEffect, useState, useRef } from 'react';
import _ from 'lodash';
import fs from 'fs';
import path from 'path';
import settings from 'electron-settings';
import { ButtonToolbar, ControlLabel, Form, Whisper } from 'rsuite';
import { useHotkeys } from 'react-hotkeys-hook';
import { useQuery, useQueryClient } from 'react-query';
@ -55,6 +54,7 @@ import usePlayQueueHandler from '../../hooks/usePlayQueueHandler';
import useFavorite from '../../hooks/useFavorite';
import { useRating } from '../../hooks/useRating';
import { useBrowserDownload } from '../../hooks/useBrowserDownload';
import { settings } from '../shared/setDefaultSettings';
interface PlaylistParams {
id: string;
@ -410,7 +410,7 @@ const PlaylistView = ({ ...rest }) => {
/>
}
cacheImages={{
enabled: settings.getSync('cacheImages'),
enabled: settings.get('cacheImages'),
cacheType: 'playlist',
id: data.id,
}}
@ -619,7 +619,7 @@ const PlaylistView = ({ ...rest }) => {
rowHeight={config.lookAndFeel.listView.music.rowHeight}
fontSize={config.lookAndFeel.listView.music.fontSize}
cacheImages={{
enabled: settings.getSync('cacheImages'),
enabled: settings.get('cacheImages'),
cacheType: 'album',
cacheIdProperty: 'albumId',
}}

4
src/components/scrollingmenu/ScrollingMenu.tsx

@ -1,5 +1,4 @@
import React, { useRef } from 'react';
import settings from 'electron-settings';
import styled from 'styled-components';
import { ButtonGroup, ButtonToolbar, FlexboxGrid, Icon } from 'rsuite';
import Card from '../card/Card';
@ -7,6 +6,7 @@ import { SectionTitleWrapper, SectionTitle, StyledButton } from '../shared/style
import { useAppSelector } from '../../redux/hooks';
import { smoothScroll } from '../../shared/utils';
import { Item } from '../../types';
import { settings } from '../shared/setDefaultSettings';
const ScrollMenuContainer = styled.div<{ $noScrollbar?: boolean; maxWidth: string }>`
overflow-x: auto;
@ -33,7 +33,7 @@ const ScrollingMenu = ({
maxWidth,
noButtons,
}: any) => {
const cacheImages = Boolean(settings.getSync('cacheImages'));
const cacheImages = Boolean(settings.get('cacheImages'));
const misc = useAppSelector((state) => state.misc);
const config = useAppSelector((state) => state.config);
const scrollContainerRef = useRef<any>();

8
src/components/search/SearchView.tsx

@ -1,6 +1,5 @@
import React, { useEffect, useMemo, useState } from 'react';
import _ from 'lodash';
import settings from 'electron-settings';
import { Icon, Nav } from 'rsuite';
import { useHistory } from 'react-router-dom';
import { useInfiniteQuery, useQueryClient } from 'react-query';
@ -24,6 +23,7 @@ import useListClickHandler from '../../hooks/useListClickHandler';
import ListViewType from '../viewtypes/ListViewType';
import useFavorite from '../../hooks/useFavorite';
import { useRating } from '../../hooks/useRating';
import { settings } from '../shared/setDefaultSettings';
const SearchView = () => {
const { t } = useTranslation();
@ -338,7 +338,7 @@ const SearchView = () => {
}
listType="music"
cacheImages={{
enabled: settings.getSync('cacheImages'),
enabled: settings.get('cacheImages'),
cacheType: 'album',
cacheIdProperty: 'albumId',
}}
@ -386,7 +386,7 @@ const SearchView = () => {
}
listType="album"
cacheImages={{
enabled: settings.getSync('cacheImages'),
enabled: settings.get('cacheImages'),
cacheType: 'album',
cacheIdProperty: 'albumId',
}}
@ -434,7 +434,7 @@ const SearchView = () => {
}
listType="artist"