Image Resolution Setting (#492)

* Add customizable resolution for the fullscreen player image

---------

Co-authored-by: iiPython <ben@iipython.dev>
Co-authored-by: Benjamin <iipython@proton.me>
This commit is contained in:
darkpixlz 2024-02-13 18:00:59 -08:00 committed by GitHub
parent f796a35f5c
commit 6e677d7454
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 39 additions and 7 deletions

View file

@ -16,6 +16,7 @@ import {
usePlayerData,
usePlayerStore,
} from '/@/renderer/store';
import { useSettingsStore } from '/@/renderer/store/settings.store';
const Image = styled(motion.img)<{ $useAspectRatio: boolean }>`
position: absolute;
@ -130,6 +131,8 @@ export const FullScreenPlayerImage = () => {
const mainImageRef = useRef<HTMLImageElement | null>(null);
const [mainImageDimensions, setMainImageDimensions] = useState({ idealSize: 1 });
const albumArtRes = useSettingsStore((store) => store.general.albumArtRes);
const { queue } = usePlayerData();
const { opacity, useImageAspectRatio } = useFullScreenPlayerStore();
const currentSong = queue.current;
@ -149,6 +152,7 @@ export const FullScreenPlayerImage = () => {
if (mainImageRef.current) {
setMainImageDimensions({
idealSize:
albumArtRes ||
Math.ceil((mainImageRef.current as HTMLDivElement).offsetHeight / 100) * 100,
});
@ -158,7 +162,7 @@ export const FullScreenPlayerImage = () => {
topImage: scaleImageUrl(mainImageDimensions.idealSize, queue.current?.imageUrl),
});
}
}, [mainImageDimensions.idealSize, queue, setImageState]);
}, [mainImageDimensions.idealSize, queue, setImageState, albumArtRes]);
useLayoutEffect(() => {
updateImageSize();

View file

@ -65,6 +65,30 @@ export const ControlSettings = () => {
isHidden: false,
title: t('setting.buttonSize', { postProcess: 'sentenceCase' }),
},
{
control: (
<NumberInput
defaultValue={settings.albumArtRes || undefined}
max={2500}
min={175}
placeholder="0"
rightSection="px"
width={75}
onBlur={(e) => {
const newVal = e.currentTarget.value
? Math.min(Math.max(Number(e.currentTarget.value), 175), 2500)
: null;
setSettings({ general: { ...settings, albumArtRes: newVal } });
}}
/>
),
description: t('setting.playerAlbumArtResolution', {
context: 'description',
postProcess: 'sentenceCase',
}),
isHidden: false,
title: t('setting.playerAlbumArtResolution', { postProcess: 'sentenceCase' }),
},
{
control: (
<Switch