adjust styles on fullscreen player image section

- fix image transition
- fix image aspect ratio
- adjust text sizes and shadow

src/renderer/features/player/components/full-screen-player-image.module.css

@@ -2,7 +2,6 @@
     position: absolute;
     max-width: 100%;
     height: 100%;
-    object-fit: var(--theme-image-fit);
     object-position: 50% 100%;
     border-radius: 5px;
     filter: drop-shadow(0 0 5px rgb(0 0 0 / 40%)) drop-shadow(0 0 5px rgb(0 0 0 / 40%));
@@ -24,8 +23,13 @@
     justify-content: center;
     padding: 1rem;
     text-align: center;
+    cursor: default;
     border-radius: 5px;
 
+    a {
+        cursor: pointer;
+    }
+
     h1 {
         font-size: 3.5vh;
     }

src/renderer/features/player/components/full-screen-player-image.tsx

@@ -16,9 +16,7 @@ import { Center } from '/@/shared/components/center/center';
 import { Flex } from '/@/shared/components/flex/flex';
 import { Group } from '/@/shared/components/group/group';
 import { Icon } from '/@/shared/components/icon/icon';
-import { Image } from '/@/shared/components/image/image';
 import { Stack } from '/@/shared/components/stack/stack';
-import { TextTitle } from '/@/shared/components/text-title/text-title';
 import { Text } from '/@/shared/components/text/text';
 import { PlayerData, QueueSong } from '/@/shared/types/domain-types';
 
@@ -52,9 +50,14 @@ const scaleImageUrl = (imageSize: number, url?: null | string) => {
         .replace(/&height=\d+/, `&height=${imageSize}`);
 };
 
-const MotionImage = motion.create(Image);
+const MotionImage = motion.img;
+
+const ImageWithPlaceholder = ({
+    className,
+    ...props
+}: HTMLMotionProps<'img'> & { placeholder?: string }) => {
+    const nativeAspectRatio = useSettingsStore((store) => store.general.nativeAspectRatio);
 
-const ImageWithPlaceholder = ({ ...props }: HTMLMotionProps<'img'> & { placeholder?: string }) => {
     if (!props.src) {
         return (
             <Center
@@ -76,7 +79,11 @@ const ImageWithPlaceholder = ({ ...props }: HTMLMotionProps<'img'> & { placehold
 
     return (
         <MotionImage
-            className={styles.image}
+            className={clsx(styles.image, className)}
+            style={{
+                objectFit: nativeAspectRatio ? 'contain' : 'cover',
+                width: nativeAspectRatio ? 'auto' : '100%',
+            }}
             {...props}
         />
     );
@@ -201,40 +208,32 @@ export const FullScreenPlayerImage = () => {
             </div>
             <Stack
                 className={styles.metadataContainer}
-                gap="xs"
+                gap="2px"
                 maw="100%"
             >
-                <TextTitle
+                <Text
                     fw={900}
-                    order={1}
+                    lh="1.2"
                     overflow="hidden"
+                    size="4xl"
                     w="100%"
                 >
                     {currentSong?.name}
-                </TextTitle>
+                </Text>
-                <TextTitle
+                <Text
                     component={Link}
                     fw={600}
                     isLink
-                    order={3}
                     overflow="hidden"
-                    style={{
+                    size="xl"
-                        textShadow: 'var(--theme-fullscreen-player-text-shadow)',
-                    }}
                     to={generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, {
                         albumId: currentSong?.albumId || '',
                     })}
                     w="100%"
                 >
-                    {currentSong?.album}{' '}
+                    {currentSong?.album}
-                </TextTitle>
+                </Text>
-                <TextTitle
+                <Text key="fs-artists">
-                    key="fs-artists"
-                    order={3}
-                    style={{
-                        textShadow: 'var(--theme-fullscreen-player-text-shadow)',
-                    }}
-                >
                     {currentSong?.artists?.map((artist, index) => (
                         <Fragment key={`fs-artist-${artist.id}`}>
                             {index > 0 && (
@@ -253,9 +252,6 @@ export const FullScreenPlayerImage = () => {
                                 fw={600}
                                 isLink
                                 isMuted
-                                style={{
-                                    textShadow: 'var(--theme-fullscreen-player-text-shadow)',
-                                }}
                                 to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
                                     albumArtistId: artist.id,
                                 })}
@@ -264,7 +260,7 @@ export const FullScreenPlayerImage = () => {
                             </Text>
                         </Fragment>
                     ))}
-                </TextTitle>
+                </Text>
                 <Group
                     justify="center"
                     mt="sm"

src/shared/components/image/image.tsx

@@ -1,16 +1,18 @@
-import type { ImgHTMLAttributes } from 'react';
-
 import clsx from 'clsx';
+import { motion, MotionConfigProps } from 'motion/react';
+import { type ImgHTMLAttributes } from 'react';
 import { Img } from 'react-image';
 
 import styles from './image.module.css';
 
+import { animationProps } from '/@/shared/components/animations/animation-props';
 import { Icon } from '/@/shared/components/icon/icon';
 import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 
-interface ImageContainerProps {
+interface ImageContainerProps extends MotionConfigProps {
     children: React.ReactNode;
     className?: string;
+    enableAnimation?: boolean;
 }
 
 interface ImageLoaderProps {
@@ -19,6 +21,8 @@ interface ImageLoaderProps {
 
 interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> {
     containerClassName?: string;
+    enableAnimation?: boolean;
+    imageContainerProps?: Omit<ImageContainerProps, 'children'>;
     includeLoader?: boolean;
     includeUnloader?: boolean;
     src: string | string[] | undefined;
@@ -32,6 +36,8 @@ interface ImageUnloaderProps {
 export function Image({
     className,
     containerClassName,
+    enableAnimation,
+    imageContainerProps,
     includeLoader = true,
     includeUnloader = true,
     src,
@@ -41,7 +47,13 @@ export function Image({
             <Img
                 className={clsx(styles.image, className)}
                 container={(children) => (
-                    <ImageContainer className={containerClassName}>{children}</ImageContainer>
+                    <ImageContainer
+                        className={containerClassName}
+                        enableAnimation={enableAnimation}
+                        {...imageContainerProps}
+                    >
+                        {children}
+                    </ImageContainer>
                 )}
                 loader={
                     includeLoader ? (
@@ -50,7 +62,6 @@ export function Image({
                         </ImageContainer>
                     ) : null
                 }
-                loading="lazy"
                 src={src}
                 unloader={
                     includeUnloader ? (
@@ -66,8 +77,27 @@ export function Image({
     return <ImageUnloader />;
 }
 
-function ImageContainer({ children, className }: ImageContainerProps) {
+function ImageContainer({ children, className, enableAnimation, ...props }: ImageContainerProps) {
-    return <div className={clsx(styles.imageContainer, className)}>{children}</div>;
+    if (!enableAnimation) {
+        return (
+            <div
+                className={clsx(styles.imageContainer, className)}
+                {...props}
+            >
+                {children}
+            </div>
+        );
+    }
+
+    return (
+        <motion.div
+            className={clsx(styles.imageContainer, className)}
+            {...animationProps.fadeIn}
+            {...props}
+        >
+            {children}
+        </motion.div>
+    );
 }
 
 function ImageLoader({ className }: ImageLoaderProps) {