Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[enhancement] Add a button size setting #486

Merged
merged 5 commits into from
Feb 3, 2024
Merged

[enhancement] Add a button size setting #486

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f863532
Add a button size setting
iiPythonx Feb 2, 2024
08c4dab
Reduce setting size and add px suffix
iiPythonx Feb 3, 2024
7091be8
Looks like I don't need || inside of control-settings
iiPythonx Feb 3, 2024
43226f3
Update translation
iiPythonx Feb 3, 2024
3917c15
Bump settings version to 7
iiPythonx Feb 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/i18n/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
iiPythonx marked this conversation as resolved.
Show resolved Hide resolved
"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",
Expand Down
23 changes: 12 additions & 11 deletions src/renderer/features/player/components/center-controls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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' }),
}}
Expand All @@ -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
Expand All @@ -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' }),
}}
Expand All @@ -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',
Expand All @@ -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={{
Expand All @@ -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',
Expand All @@ -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' }),
}}
Expand All @@ -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={{
Expand All @@ -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' }),
}}
Expand Down
29 changes: 29 additions & 0 deletions src/renderer/features/settings/components/general/control-settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,35 @@ export const ControlSettings = () => {
const { setSettings } = useSettingsStoreActions();

const controlOptions = [
{
control: (
<NumberInput
iiPythonx marked this conversation as resolved.
Show resolved Hide resolved
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
Expand Down
4 changes: 3 additions & 1 deletion src/renderer/store/settings.store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,7 @@ export interface SettingsState {
};
general: {
accent: string;
buttonSize: number;
defaultFullPlaylist: boolean;
externalLinks: boolean;
followSystemTheme: boolean;
Expand Down Expand Up @@ -282,6 +283,7 @@ const initialState: SettingsState = {
},
general: {
accent: 'rgb(53, 116, 252)',
buttonSize: 20,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe you should also update the version of the store, so that the changes take effect

Copy link
Contributor Author

@iiPythonx iiPythonx Feb 3, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes do seem to take effect live and still persist after reload.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nevermind, I just now realized what you meant but I'm also not sure how much I should bump the version by. Am I meant to go with 6.1 or 7? Also, building it locally and running it seemed to work even with my existing
no-button-size Feishin config.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do see it change, but for zustand persist, I believe the correct approach to make migrations happen is bump the version (to 7)

defaultFullPlaylist: true,
externalLinks: true,
followSystemTheme: false,
Expand Down Expand Up @@ -598,7 +600,7 @@ export const useSettingsStore = create<SettingsSlice>()(
return merge(currentState, persistedState);
},
name: 'store_settings',
version: 6,
version: 7,
},
),
);
Expand Down
Loading