[enhancement]: support using native image aspect ratio

src/i18n/locales/en.json

@@ -531,6 +531,8 @@
         "hotkey_volumeUp": "volume up",
         "hotkey_zoomIn": "zoom in",
         "hotkey_zoomOut": "zoom out",
+        "imageAspectRatio": "use native cover art aspect ratio",
+        "imageAspectRatio_description": "if enabled, cover art will be shown using their native aspect ratio. for art that is not 1:1, the remaining space will be empty",
         "language": "language",
         "language_description": "sets the language for the application ($t(common.restartRequired))",
         "lyricFetch": "fetch lyrics from the internet",

src/renderer/app.tsx

@@ -40,6 +40,7 @@ export const App = () => {
     const theme = useTheme();
     const accent = useSettingsStore((store) => store.general.accent);
     const language = useSettingsStore((store) => store.general.language);
+    const nativeImageAspect = useSettingsStore((store) => store.general.nativeAspectRatio);
     const { builtIn, custom, system, type } = useSettingsStore((state) => state.font);
     const { type: playbackType } = usePlaybackSettings();
     const { bindings } = useHotkeySettings();
@@ -90,6 +91,11 @@ export const App = () => {
         root.style.setProperty('--primary-color', accent);
     }, [accent]);
 
+    useEffect(() => {
+        const root = document.documentElement;
+        root.style.setProperty('--image-fit', nativeImageAspect ? 'scale-down' : 'cover');
+    }, [nativeImageAspect]);
+
     const providerValue = useMemo(() => {
         return { handlePlayQueueAdd };
     }, [handlePlayQueueAdd]);

src/renderer/components/card/poster-card.tsx

@@ -92,7 +92,7 @@ const Image = styled(SimpleImg)`
 
     img {
         height: 100%;
-        object-fit: cover;
+        object-fit: var(--image-fit);
     }
 `;
 

src/renderer/components/feature-carousel/index.tsx

@@ -63,7 +63,7 @@ const BackgroundImage = styled.img`
     height: 150%;
     user-select: none;
     filter: blur(24px);
-    object-fit: cover;
+    object-fit: var(--image-fit);
     object-position: 0 30%;
 `;
 

src/renderer/components/virtual-grid/grid-card/default-card.tsx

@@ -122,7 +122,7 @@ const Image = styled(SimpleImg)`
 
     img {
         height: 100%;
-        object-fit: cover;
+        object-fit: var(--image-fit);
     }
 `;
 

src/renderer/components/virtual-grid/grid-card/poster-card.tsx

@@ -110,7 +110,7 @@ const Image = styled(SimpleImg)`
 
     img {
         height: 100%;
-        object-fit: cover;
+        object-fit: var(--image-fit);
     }
 `;
 

src/renderer/components/virtual-table/cells/combined-title-cell.tsx

@@ -44,7 +44,7 @@ const MetadataWrapper = styled.div`
 
 const StyledImage = styled(SimpleImg)`
     img {
-        object-fit: cover;
+        object-fit: var(--image-fit);
     }
 `;
 

src/renderer/features/player/components/left-controls.tsx

@@ -62,7 +62,7 @@ const Image = styled(motion.div)`
 const PlayerbarImage = styled.img`
     width: 100%;
     height: 100%;
-    object-fit: cover;
+    object-fit: var(--image-fit);
 `;
 
 const LineItem = styled.div<{ $secondary?: boolean }>`

src/renderer/features/search/components/library-command-item.tsx

@@ -46,7 +46,7 @@ const MetadataWrapper = styled.div`
 `;
 
 const StyledImage = styled.img`
-    object-fit: cover;
+    object-fit: var(--image-fit);
     border-radius: 4px;
 `;
 

src/renderer/features/settings/components/general/control-settings.tsx

@@ -90,6 +90,28 @@ export const ControlSettings = () => {
             isHidden: false,
             title: t('setting.playerAlbumArtResolution', { postProcess: 'sentenceCase' }),
         },
+        {
+            control: (
+                <Switch
+                    aria-label="Toggle using native aspect ratio"
+                    defaultChecked={settings.nativeAspectRatio}
+                    onChange={(e) =>
+                        setSettings({
+                            general: {
+                                ...settings,
+                                nativeAspectRatio: e.currentTarget.checked,
+                            },
+                        })
+                    }
+                />
+            ),
+            description: t('setting.imageAspectRatio', {
+                context: 'description',
+                postProcess: 'sentenceCase',
+            }),
+            isHidden: false,
+            title: t('setting.imageAspectRatio', { postProcess: 'sentenceCase' }),
+        },
         {
             control: (
                 <Switch

src/renderer/features/shared/components/library-header.module.scss

@@ -121,7 +121,7 @@
 }
 
 .image {
-    object-fit: cover;
+    object-fit: var(--image-fit);
     border-radius: 5px;
 }
 

src/renderer/features/sidebar/components/sidebar.tsx

@@ -64,7 +64,7 @@ const ImageContainer = styled(motion.div)<{ height: string }>`
 const SidebarImage = styled.img`
     width: 100%;
     height: 100%;
-    object-fit: cover;
+    object-fit: var(--image-fit);
     background: var(--placeholder-bg);
 `;
 

src/renderer/store/settings.store.ts

@@ -201,6 +201,7 @@ export interface SettingsState {
         homeFeature: boolean;
         homeItems: SortableItem<HomeItem>[];
         language: string;
+        nativeAspectRatio: boolean;
         passwordStore?: string;
         playButtonBehavior: Play;
         resume: boolean;
@@ -323,6 +324,7 @@ const initialState: SettingsState = {
         homeFeature: true,
         homeItems,
         language: 'en',
+        nativeAspectRatio: false,
         passwordStore: undefined,
         playButtonBehavior: Play.NOW,
         resume: false,