From b4b9aa039d16deb5d13fee515e5f07c3d05c5201 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 20 Nov 2022 14:53:24 -0600
Subject: [PATCH] Remove .still-image css, display "GIF" badge in media when
 autoPlayGif is off

---
 app/soapbox/components/media-gallery.tsx |  3 +-
 app/soapbox/components/still-image.tsx   | 24 +++++++++-
 app/styles/accounts.scss                 |  4 --
 app/styles/application.scss              |  1 -
 app/styles/chats.scss                    |  5 ---
 app/styles/components/media-gallery.scss | 57 ++----------------------
 app/styles/components/still-image.scss   | 28 ------------
 7 files changed, 29 insertions(+), 93 deletions(-)
 delete mode 100644 app/styles/components/still-image.scss

diff --git a/app/soapbox/components/media-gallery.tsx b/app/soapbox/components/media-gallery.tsx
index 1a6754210..9244f05d5 100644
--- a/app/soapbox/components/media-gallery.tsx
+++ b/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>
     );
diff --git a/app/soapbox/components/still-image.tsx b/app/soapbox/components/still-image.tsx
index 38e72a6b6..899b83683 100644
--- a/app/soapbox/components/still-image.tsx
+++ b/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;
diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
index e4a0833c7..e24a19ddf 100644
--- a/app/styles/accounts.scss
+++ b/app/styles/accounts.scss
@@ -72,10 +72,6 @@ a .account__avatar {
     bottom: 0;
     right: 0;
     z-index: 1;
-
-    &.still-image {
-      position: absolute;
-    }
   }
 }
 
diff --git a/app/styles/application.scss b/app/styles/application.scss
index da62ca314..2d7428ad6 100644
--- a/app/styles/application.scss
+++ b/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';
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 7c98b11ff..d2f00aeff 100644
--- a/app/styles/chats.scss
+++ b/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 {
diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss
index 664600893..70a954a88 100644
--- a/app/styles/components/media-gallery.scss
+++ b/app/styles/components/media-gallery.scss
@@ -57,32 +57,11 @@
   line-height: 0;
   position: relative;
   z-index: 1;
+  height: 100%;
+  width: 100%;
 
-  &,
-  .still-image {
-    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;
+  img {
+    @apply object-cover rounded-lg;
   }
 
   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;
   }
diff --git a/app/styles/components/still-image.scss b/app/styles/components/still-image.scss
deleted file mode 100644
index 0b86d6ada..000000000
--- a/app/styles/components/still-image.scss
+++ /dev/null
@@ -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;
-    }
-  }
-}