diff --git a/src/renderer/features/settings/components/hotkeys/hotkeys-tab.tsx b/src/renderer/features/settings/components/hotkeys/hotkeys-tab.tsx
new file mode 100644
index 00000000..3016208a
--- /dev/null
+++ b/src/renderer/features/settings/components/hotkeys/hotkeys-tab.tsx
@@ -0,0 +1,10 @@
+import { Stack } from '@mantine/core';
+import { WindowHotkeySettings } from './window-hotkey-settings';
+
+export const HotkeysTab = () => {
+ return (
+
+
+
+ );
+};
diff --git a/src/renderer/features/settings/components/hotkeys/window-hotkey-settings.tsx b/src/renderer/features/settings/components/hotkeys/window-hotkey-settings.tsx
new file mode 100644
index 00000000..dc120498
--- /dev/null
+++ b/src/renderer/features/settings/components/hotkeys/window-hotkey-settings.tsx
@@ -0,0 +1,44 @@
+import isElectron from 'is-electron';
+import { SettingOption, SettingsSection } from '../settings-section';
+import { Switch } from '/@/renderer/components';
+import { useHotkeySettings, useSettingsStoreActions } from '/@/renderer/store';
+
+const localSettings = isElectron() ? window.electron.localSettings : null;
+
+export const WindowHotkeySettings = () => {
+ const settings = useHotkeySettings();
+ const { setSettings } = useSettingsStoreActions();
+
+ const options: SettingOption[] = [
+ {
+ control: (
+ {
+ setSettings({
+ hotkeys: {
+ ...settings,
+ globalMediaHotkeys: e.currentTarget.checked,
+ },
+ });
+ localSettings.set('global_media_hotkeys', e.currentTarget.checked);
+
+ if (e.currentTarget.checked) {
+ localSettings.enableMediaKeys();
+ } else {
+ localSettings.disableMediaKeys();
+ }
+ }}
+ />
+ ),
+ description:
+ 'Enable or disable the usage of your system media hotkeys to control the audio player',
+ isHidden: !isElectron(),
+ title: 'Global media hotkeys',
+ },
+ ];
+
+ return ;
+};
diff --git a/src/renderer/features/settings/components/playback/audio-settings.tsx b/src/renderer/features/settings/components/playback/audio-settings.tsx
index b050c75e..2ff80633 100644
--- a/src/renderer/features/settings/components/playback/audio-settings.tsx
+++ b/src/renderer/features/settings/components/playback/audio-settings.tsx
@@ -1,7 +1,7 @@
import { useEffect, useState } from 'react';
import { SelectItem, Stack } from '@mantine/core';
import isElectron from 'is-electron';
-import { Select, FileInput, Slider, Switch, Textarea, Text, toast } from '/@/renderer/components';
+import { Select, FileInput, Slider, Textarea, Text, toast } from '/@/renderer/components';
import {
SettingsSection,
SettingOption,
@@ -230,34 +230,6 @@ export const AudioSettings = () => {
note: status === PlayerStatus.PLAYING ? 'Player must be paused' : undefined,
title: 'Crossfade Style',
},
- {
- control: (
- {
- setSettings({
- playback: {
- ...settings,
- globalMediaHotkeys: e.currentTarget.checked,
- },
- });
- localSettings.set('global_media_hotkeys', e.currentTarget.checked);
-
- if (e.currentTarget.checked) {
- localSettings.enableMediaKeys();
- } else {
- localSettings.disableMediaKeys();
- }
- }}
- />
- ),
- description:
- 'Enable or disable the usage of your system media hotkeys to control the audio player (desktop only)',
- isHidden: !isElectron(),
- title: 'Global media hotkeys',
- },
];
return ;
diff --git a/src/renderer/features/settings/components/settings-content.tsx b/src/renderer/features/settings/components/settings-content.tsx
index 1000012a..b0032036 100644
--- a/src/renderer/features/settings/components/settings-content.tsx
+++ b/src/renderer/features/settings/components/settings-content.tsx
@@ -22,6 +22,12 @@ const ApplicationTab = lazy(() =>
})),
);
+const HotkeysTab = lazy(() =>
+ import('/@/renderer/features/settings/components/hotkeys/hotkeys-tab').then((module) => ({
+ default: module.HotkeysTab,
+ })),
+);
+
const TabContainer = styled.div`
width: 100%;
height: 100%;
@@ -45,6 +51,7 @@ export const SettingsContent = () => {
General
Playback
+ Hotkeys
{isElectron() && Window}
@@ -53,6 +60,9 @@ export const SettingsContent = () => {
+
+
+
{isElectron() && (
diff --git a/src/renderer/store/settings.store.ts b/src/renderer/store/settings.store.ts
index 02dabda8..bee8ad08 100644
--- a/src/renderer/store/settings.store.ts
+++ b/src/renderer/store/settings.store.ts
@@ -48,11 +48,13 @@ export interface SettingsState {
themeLight: AppTheme;
volumeWheelStep: number;
};
+ hotkeys: {
+ globalMediaHotkeys: boolean;
+ };
playback: {
audioDeviceId?: string | null;
crossfadeDuration: number;
crossfadeStyle: CrossfadeStyle;
- globalMediaHotkeys: boolean;
muted: boolean;
scrobble: {
enabled: boolean;
@@ -63,7 +65,7 @@ export interface SettingsState {
style: PlaybackStyle;
type: PlaybackType;
};
- tab: 'general' | 'playback' | 'window' | string;
+ tab: 'general' | 'playback' | 'window' | 'hotkeys' | string;
tables: {
fullScreen: DataTableProps;
nowPlaying: DataTableProps;
@@ -103,11 +105,13 @@ const initialState: SettingsState = {
themeLight: AppTheme.DEFAULT_LIGHT,
volumeWheelStep: 5,
},
+ hotkeys: {
+ globalMediaHotkeys: false,
+ },
playback: {
audioDeviceId: undefined,
crossfadeDuration: 5,
crossfadeStyle: CrossfadeStyle.EQUALPOWER,
- globalMediaHotkeys: false,
muted: false,
scrobble: {
enabled: true,
@@ -298,3 +302,5 @@ export const usePlayButtonBehavior = () =>
useSettingsStore((state) => state.general.playButtonBehavior, shallow);
export const useWindowSettings = () => useSettingsStore((state) => state.window, shallow);
+
+export const useHotkeySettings = () => useSettingsStore((state) => state.hotkeys, shallow);