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();