From 6e677d7454004d1106af5ebf4db22c8242085cfb Mon Sep 17 00:00:00 2001 From: darkpixlz <91509874+darkpixlz@users.noreply.github.com> Date: Tue, 13 Feb 2024 18:00:59 -0800 Subject: [PATCH] Image Resolution Setting (#492) * Add customizable resolution for the fullscreen player image --------- Co-authored-by: iiPython Co-authored-by: Benjamin --- src/i18n/locales/en.json | 14 ++++++----- .../components/full-screen-player-image.tsx | 6 ++++- .../components/general/control-settings.tsx | 24 +++++++++++++++++++ src/renderer/store/settings.store.ts | 2 ++ 4 files changed, 39 insertions(+), 7 deletions(-) diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index 06b4cefc..a33501b4 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -415,12 +415,12 @@ "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", - "clearQueryCache_description": "A 'soft clear' of Feishin. This will refresh playlists, track metadata, and reset saved lyrics. Settings, server credentials and cached images are preserved.", + "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", + "clearQueryCache_description": "a 'soft clear' of feishin. this will refresh playlists, track metadata, and reset saved lyrics. settings, server credentials and cached images are preserved", "clearCacheSuccess": "cache cleared successfully", "crossfadeDuration": "crossfade duration", "crossfadeDuration_description": "sets the duration of the crossfade effect", @@ -524,6 +524,8 @@ "playButtonBehavior_optionAddLast": "$t(player.addLast)", "playButtonBehavior_optionAddNext": "$t(player.addNext)", "playButtonBehavior_optionPlay": "$t(player.play)", + "playerAlbumArtResolution": "player album art resolution", + "playerAlbumArtResolution_description": "the resolution for the large player's album art preview. larger makes it look more crisp, but may slow loading down. defaults to 0, meaning auto", "remotePassword": "remote control server password", "remotePassword_description": "sets the password for the remote control server. These credentials are by default transferred insecurely, so you should use a unique password that you do not care about", "remotePort": "remote control server port", diff --git a/src/renderer/features/player/components/full-screen-player-image.tsx b/src/renderer/features/player/components/full-screen-player-image.tsx index ce8bb9e7..d3053a90 100644 --- a/src/renderer/features/player/components/full-screen-player-image.tsx +++ b/src/renderer/features/player/components/full-screen-player-image.tsx @@ -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(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(); diff --git a/src/renderer/features/settings/components/general/control-settings.tsx b/src/renderer/features/settings/components/general/control-settings.tsx index 89908276..fb882d2a 100644 --- a/src/renderer/features/settings/components/general/control-settings.tsx +++ b/src/renderer/features/settings/components/general/control-settings.tsx @@ -65,6 +65,30 @@ export const ControlSettings = () => { isHidden: false, title: t('setting.buttonSize', { postProcess: 'sentenceCase' }), }, + { + control: ( + { + 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: (