pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
* 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
This commit is contained in:
Benjamin 2024-02-03 15:22:26 -06:00 • committed by GitHub
parent 933573b57f
commit 86a93866d0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 46 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/i18n/locales/en.json
View file

@ -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",

23
src/renderer/features/player/components/center-controls.tsx
View file

@ -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' }),
}}

29
src/renderer/features/settings/components/general/control-settings.tsx
View file

@ -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

4
src/renderer/store/settings.store.ts
View file

@ -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,
},
),
);