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 b81772c5..930c7e9f 100644
--- a/src/renderer/features/player/components/full-screen-player-image.tsx
+++ b/src/renderer/features/player/components/full-screen-player-image.tsx
@@ -10,16 +10,21 @@ import { QueueSong } from '/@/renderer/api/types';
import { Badge, Text, TextTitle } from '/@/renderer/components';
import { useFastAverageColor } from '/@/renderer/hooks';
import { AppRoute } from '/@/renderer/router/routes';
-import { PlayerData, usePlayerData, usePlayerStore } from '/@/renderer/store';
+import {
+ PlayerData,
+ useFullScreenPlayerStore,
+ usePlayerData,
+ usePlayerStore,
+} from '/@/renderer/store';
-const Image = styled(motion.img)`
+const Image = styled(motion.img)<{ $useAspectRatio: boolean }>`
position: absolute;
width: 100%;
height: 100%;
- object-fit: cover;
+ object-fit: ${({ $useAspectRatio }) => ($useAspectRatio ? 'contain' : 'cover')}};
object-position: 50% 50%;
border-radius: 5px;
- box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 40%);
+ filter: drop-shadow(0 0 5px rgba(0, 0, 0, 40%)) drop-shadow(0 0 5px rgba(0, 0, 0, 40%));
`;
const ImageContainer = styled(motion.div)`
@@ -83,7 +88,10 @@ const scaleImageUrl = (url?: string | null) => {
.replace(/&height=\d+/, '&height=500');
};
-const ImageWithPlaceholder = ({ ...props }: HTMLMotionProps<'img'>) => {
+const ImageWithPlaceholder = ({
+ useAspectRatio,
+ ...props
+}: HTMLMotionProps<'img'> & { useAspectRatio: boolean }) => {
if (!props.src) {
return (
) => {
);
}
- return ;
+ return (
+
+ );
};
export const FullScreenPlayerImage = () => {
const { queue } = usePlayerData();
+ const useImageAspectRatio = useFullScreenPlayerStore((state) => state.useImageAspectRatio);
const currentSong = queue.current;
const background = useFastAverageColor(queue.current?.imageUrl, true, 'dominant');
const imageKey = `image-${background}`;
@@ -165,6 +179,7 @@ export const FullScreenPlayerImage = () => {
initial="closed"
placeholder="var(--placeholder-bg)"
src={imageState.topImage || ''}
+ useAspectRatio={useImageAspectRatio}
variants={imageVariants}
/>
)}
@@ -180,6 +195,7 @@ export const FullScreenPlayerImage = () => {
initial="closed"
placeholder="var(--placeholder-bg)"
src={imageState.bottomImage || ''}
+ useAspectRatio={useImageAspectRatio}
variants={imageVariants}
/>
)}
diff --git a/src/renderer/features/player/components/full-screen-player.tsx b/src/renderer/features/player/components/full-screen-player.tsx
index 597ef14d..20f72042 100644
--- a/src/renderer/features/player/components/full-screen-player.tsx
+++ b/src/renderer/features/player/components/full-screen-player.tsx
@@ -59,7 +59,7 @@ const BackgroundImageOverlay = styled.div`
`;
const Controls = () => {
- const { dynamicBackground, expanded } = useFullScreenPlayerStore();
+ const { dynamicBackground, expanded, useImageAspectRatio } = useFullScreenPlayerStore();
const { setStore } = useFullScreenPlayerStoreActions();
const handleToggleFullScreenPlayer = () => {
@@ -112,6 +112,19 @@ const Controls = () => {
/>
+ Use image aspect ratio
+
+
+ setStore({
+ useImageAspectRatio: e.target.checked,
+ })
+ }
+ />
+
+
diff --git a/src/renderer/store/full-screen-player.store.ts b/src/renderer/store/full-screen-player.store.ts
index 4cb43239..12d172d0 100644
--- a/src/renderer/store/full-screen-player.store.ts
+++ b/src/renderer/store/full-screen-player.store.ts
@@ -7,6 +7,7 @@ interface FullScreenPlayerState {
activeTab: string | 'queue' | 'related' | 'lyrics';
dynamicBackground?: boolean;
expanded: boolean;
+ useImageAspectRatio: boolean;
}
export interface FullScreenPlayerSlice extends FullScreenPlayerState {
@@ -25,7 +26,9 @@ export const useFullScreenPlayerStore = create()(
},
},
activeTab: 'queue',
+ dynamicBackground: true,
expanded: false,
+ useImageAspectRatio: false,
})),
{ name: 'store_full_screen_player' },
),
@@ -34,7 +37,7 @@ export const useFullScreenPlayerStore = create()(
return merge(currentState, persistedState);
},
name: 'store_full_screen_player',
- version: 1,
+ version: 2,
},
),
);