fix table image aspect ratio

src/renderer/components/item-list/item-table-list/columns/image-column.module.css

@@ -5,6 +5,7 @@
 
 .compact-image-container {
     width: 100%;
+    overflow: hidden;
 }
 
 .image-container-with-aspect-ratio {
@@ -13,13 +14,15 @@
     justify-content: center;
     width: 100%;
     height: 100%;
-    aspect-ratio: unset;
+    border-radius: var(--theme-radius-md);
 }
 
 .image-container-with-aspect-ratio img {
     width: auto;
     height: 100%;
-    object-fit: contain;
+    aspect-ratio: 1 / 1;
+    object-fit: var(--theme-image-fit);
+    object-position: center;
 }
 
 .image-container {
@@ -33,10 +36,21 @@
     top: 50%;
     left: 50%;
     z-index: 10;
+    opacity: 0.6;
     transform: translate(-50%, -50%);
+    transition: opacity 0.2s ease-in-out;
+
+    &:hover {
+        opacity: 1;
+    }
 }
 
 .play-button-overlay button {
-    width: 36px;
+    width: 32px;
-    height: 36px;
+    height: 32px;
+}
+
+.compact-play-button-overlay button {
+    width: 24px;
+    height: 24px;
 }

src/renderer/components/item-list/item-table-list/columns/image-column.tsx

@@ -21,7 +21,6 @@ export const ImageColumn = (props: ItemTableListInnerColumn) => {
     ];
     const playButtonBehavior = usePlayButtonBehavior();
     const item = props.data[props.rowIndex] as any;
-    const showPlayButton = props.size === 'default' || props.size === 'large';
     const internalState = (props as any).internalState;
     const [isHovered, setIsHovered] = useState(false);
 
@@ -66,20 +65,25 @@ export const ImageColumn = (props: ItemTableListInnerColumn) => {
         return (
             <TableColumnContainer {...props}>
                 <div
-                    className={styles.imageContainer}
+                    className={clsx(styles.imageContainer, {
+                        [styles.compactImageContainer]: props.size === 'compact',
+                    })}
                     onMouseEnter={() => setIsHovered(true)}
                     onMouseLeave={() => setIsHovered(false)}
                 >
                     <Image
                         containerClassName={clsx({
-                            [styles.compactImageContainer]: props.size === 'compact',
                             [styles.imageContainerWithAspectRatio]:
                                 props.size === 'default' || props.size === 'large',
                         })}
                         src={row}
                     />
-                    {showPlayButton && isHovered && (
+                    {isHovered && (
-                        <div className={styles.playButtonOverlay}>
+                        <div
+                            className={clsx(styles.playButtonOverlay, {
+                                [styles.compactPlayButtonOverlay]: props.size === 'compact',
+                            })}
+                        >
                             <PlayButton
                                 fill
                                 onClick={(e) => handlePlay(playButtonBehavior, e)}