Remove .still-image css, display "GIF" badge in media when autoPlayGif is off

app/soapbox/components/media-gallery.tsx

@@ -164,7 +164,7 @@ const Item: React.FC<IItem> = ({
 
     thumbnail = (
       <a
-        className={classNames('media-gallery__item-thumbnail')}
+        className='media-gallery__item-thumbnail'
         href={attachment.url}
         onClick={handleClick}
         target='_blank'
@@ -174,6 +174,7 @@ const Item: React.FC<IItem> = ({
           src={attachment.url}
           alt={attachment.description}
           letterboxed={letterboxed}
+          showExt
         />
       </a>
     );

app/soapbox/components/still-image.tsx

@@ -14,10 +14,12 @@ interface IStillImage {
   style?: React.CSSProperties,
   /** Whether to display the image contained vs filled in its container. */
   letterboxed?: boolean,
+  /** Whether to show the file extension in the corner. */
+  showExt?: boolean,
 }
 
 /** Renders images on a canvas, only playing GIFs if autoPlayGif is enabled. */
-const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterboxed = false }) => {
+const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterboxed = false, showExt = false }) => {
   const settings = useSettings();
   const autoPlayGif = settings.get('autoPlayGif');
 
@@ -67,9 +69,29 @@ const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterb
             })}
           />
         )}
+
+        {(hoverToPlay && showExt) && (
+          <div className='group-hover:hidden absolute opacity-90 left-2 bottom-2 pointer-events-none'>
+            <ExtensionBadge ext='GIF' />
+          </div>
+        )}
       </div>
     </div>
   );
 };
 
+interface IExtensionBadge {
+  /** File extension. */
+  ext: string,
+}
+
+/** Badge displaying a file extension. */
+const ExtensionBadge: React.FC<IExtensionBadge> = ({ ext }) => {
+  return (
+    <div className='inline-flex items-center px-2 py-0.5 rounded text-sm font-medium bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100'>
+      {ext}
+    </div>
+  );
+};
+
 export default StillImage;

app/styles/accounts.scss

@@ -72,10 +72,6 @@ a .account__avatar {
     bottom: 0;
     right: 0;
     z-index: 1;
-
-    &.still-image {
-      position: absolute;
-    }
   }
 }
 

app/styles/application.scss

@@ -44,7 +44,6 @@
 @import 'components/columns';
 @import 'components/search';
 @import 'components/react-toggle';
-@import 'components/still-image';
 @import 'components/spoiler-button';
 @import 'components/video-player';
 @import 'components/audio-player';

app/styles/chats.scss

@@ -356,11 +356,6 @@
   &__preview {
     background-color: transparent;
   }
-
-  &__item-thumbnail img,
-  &__item-thumbnail .still-image img {
-    object-fit: contain;
-  }
 }
 
 .chat-messages__divider {

app/styles/components/media-gallery.scss

@@ -57,32 +57,11 @@
   line-height: 0;
   position: relative;
   z-index: 1;
+  height: 100%;
+  width: 100%;
 
-  &,
+  img {
-  .still-image {
+    @apply object-cover rounded-lg;
-    height: 100%;
-    width: 100%;
-
-    img {
-      @apply object-cover rounded-lg;
-    }
-  }
-
-  .still-image--play-on-hover::before {
-    content: 'GIF';
-    position: absolute;
-    color: var(--primary-text-color);
-    background: var(--foreground-color);
-    bottom: 6px;
-    left: 6px;
-    padding: 2px 6px;
-    border-radius: 2px;
-    font-size: 11px;
-    font-weight: 600;
-    pointer-events: none;
-    opacity: 0.9;
-    transition: opacity 0.1s ease;
-    line-height: 18px;
   }
 
   video {
@@ -92,17 +71,6 @@
   }
 }
 
-.status__wrapper {
-  .media-gallery__item-thumbnail.letterboxed {
-    &,
-    .still-image {
-      img {
-        object-fit: contain;
-      }
-    }
-  }
-}
-
 .media-gallery__preview {
   @apply bg-gray-200 dark:bg-gray-900 rounded-lg;
   width: 100%;
@@ -113,23 +81,6 @@
   left: 0;
   z-index: 0;
 
-  .still-image--play-on-hover::before {
-    content: 'GIF';
-    position: absolute;
-    color: var(--primary-text-color);
-    background: var(--foreground-color);
-    bottom: 6px;
-    left: 6px;
-    padding: 2px 6px;
-    border-radius: 2px;
-    font-size: 11px;
-    font-weight: 600;
-    pointer-events: none;
-    opacity: 0.9;
-    transition: opacity 0.1s ease;
-    line-height: 18px;
-  }
-
   &--hidden {
     display: none;
   }

app/styles/components/still-image.scss

@@ -1,28 +0,0 @@
-.still-image {
-  position: relative;
-  overflow: hidden;
-
-  img,
-  canvas {
-    width: 100%;
-    height: 100%;
-    display: block;
-    object-fit: cover;
-    font-family: inherit;
-  }
-
-  &--play-on-hover {
-    img {
-      position: absolute;
-      visibility: hidden;
-    }
-
-    &:hover img {
-      visibility: visible;
-    }
-
-    &:hover canvas {
-      visibility: hidden;
-    }
-  }
-}