[enhancement] Add a button size setting (#486)

* Add a button size setting

* Reduce setting size and add px suffix

* Looks like I don't need || inside of control-settings

* Update translation

* Bump settings version to 7

src/i18n/locales/en.json

@@ -400,6 +400,8 @@
         "audioExclusiveMode_description": "enable exclusive output mode. In this mode, the system is usually locked out, and only mpv will be able to output audio",
         "audioPlayer": "audio player",
         "audioPlayer_description": "select the audio player to use for playback",
+        "buttonSize": "Player bar button size",
+        "buttonSize_description": "The size of the player bar buttons",
         "clearCache": "Clear browser cache",
         "clearCache_description": "A 'hard clear' of Feishin. In addition to clearing Feishin's cache, empty the browser cache (saved images and other assets). Server credentials and settings are preserved.",
         "clearQueryCache": "Clear Feishin cache",

src/renderer/features/player/components/center-controls.tsx

@@ -98,6 +98,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
     const [isSeeking, setIsSeeking] = useState(false);
     const currentSong = useCurrentSong();
     const skip = useSettingsStore((state) => state.general.skipButtons);
+    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
     const playerType = usePlayerType();
     const player1 = playersRef?.current?.player1;
     const player2 = playersRef?.current?.player2;
@@ -171,7 +172,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
             <ControlsContainer>
                 <ButtonsContainer>
                     <PlayerButton
-                        icon={<RiStopFill size={20} />}
+                        icon={<RiStopFill size={buttonSize} />}
                         tooltip={{
                             label: t('player.stop', { postProcess: 'sentenceCase' }),
                         }}
@@ -180,7 +181,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                     />
                     <PlayerButton
                         $isActive={shuffle !== PlayerShuffle.NONE}
-                        icon={<RiShuffleFill size={20} />}
+                        icon={<RiShuffleFill size={buttonSize} />}
                         tooltip={{
                             label:
                                 shuffle === PlayerShuffle.NONE
@@ -194,7 +195,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                         onClick={handleToggleShuffle}
                     />
                     <PlayerButton
-                        icon={<RiSkipBackFill size={20} />}
+                        icon={<RiSkipBackFill size={buttonSize} />}
                         tooltip={{
                             label: t('player.previous', { postProcess: 'sentenceCase' }),
                         }}
@@ -203,7 +204,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                     />
                     {skip?.enabled && (
                         <PlayerButton
-                            icon={<RiRewindFill size={20} />}
+                            icon={<RiRewindFill size={buttonSize} />}
                             tooltip={{
                                 label: t('player.skip', {
                                     context: 'back',
@@ -218,9 +219,9 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                         disabled={currentSong?.id === undefined}
                         icon={
                             status === PlayerStatus.PAUSED ? (
-                                <RiPlayFill size={20} />
+                                <RiPlayFill size={buttonSize} />
                             ) : (
-                                <IoIosPause size={20} />
+                                <IoIosPause size={buttonSize} />
                             )
                         }
                         tooltip={{
@@ -234,7 +235,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                     />
                     {skip?.enabled && (
                         <PlayerButton
-                            icon={<RiSpeedFill size={20} />}
+                            icon={<RiSpeedFill size={buttonSize} />}
                             tooltip={{
                                 label: t('player.skip', {
                                     context: 'forward',
@@ -246,7 +247,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                         />
                     )}
                     <PlayerButton
-                        icon={<RiSkipForwardFill size={20} />}
+                        icon={<RiSkipForwardFill size={buttonSize} />}
                         tooltip={{
                             label: t('player.next', { postProcess: 'sentenceCase' }),
                         }}
@@ -257,9 +258,9 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                         $isActive={repeat !== PlayerRepeat.NONE}
                         icon={
                             repeat === PlayerRepeat.ONE ? (
-                                <RiRepeatOneLine size={20} />
+                                <RiRepeatOneLine size={buttonSize} />
                             ) : (
-                                <RiRepeat2Line size={20} />
+                                <RiRepeat2Line size={buttonSize} />
                             )
                         }
                         tooltip={{
@@ -285,7 +286,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                     />
 
                     <PlayerButton
-                        icon={<BsDice3 size={20} />}
+                        icon={<BsDice3 size={buttonSize} />}
                         tooltip={{
                             label: t('player.playRandom', { postProcess: 'sentenceCase' }),
                         }}

src/renderer/features/settings/components/general/control-settings.tsx

@@ -36,6 +36,35 @@ export const ControlSettings = () => {
     const { setSettings } = useSettingsStoreActions();
 
     const controlOptions = [
+        {
+            control: (
+                <NumberInput
+                    defaultValue={settings.buttonSize}
+                    max={30}
+                    min={15}
+                    rightSection="px"
+                    width={75}
+                    onBlur={(e) => {
+                        if (!e) return;
+                        const newVal = e.currentTarget.value
+                            ? Math.min(Math.max(Number(e.currentTarget.value), 15), 30)
+                            : settings.buttonSize;
+                        setSettings({
+                            general: {
+                                ...settings,
+                                buttonSize: newVal,
+                            },
+                        });
+                    }}
+                />
+            ),
+            description: t('setting.buttonSize', {
+                context: 'description',
+                postProcess: 'sentenceCase',
+            }),
+            isHidden: false,
+            title: t('setting.buttonSize', { postProcess: 'sentenceCase' }),
+        },
         {
             control: (
                 <Switch

src/renderer/store/settings.store.ts

@@ -169,6 +169,7 @@ export interface SettingsState {
     };
     general: {
         accent: string;
+        buttonSize: number;
         defaultFullPlaylist: boolean;
         externalLinks: boolean;
         followSystemTheme: boolean;
@@ -282,6 +283,7 @@ const initialState: SettingsState = {
     },
     general: {
         accent: 'rgb(53, 116, 252)',
+        buttonSize: 20,
         defaultFullPlaylist: true,
         externalLinks: true,
         followSystemTheme: false,
@@ -598,7 +600,7 @@ export const useSettingsStore = create<SettingsSlice>()(
                 return merge(currentState, persistedState);
             },
             name: 'store_settings',
-            version: 6,
+            version: 7,
         },
     ),
 );