apply pixel art detection to more places

src/components/emoji_grid/emoji_grid.js

@@ -1,3 +1,5 @@
+import StillImage from '../still-image/still-image.vue'
+
 const EMOJI_SIZE = 32 + 8
 const GROUP_TITLE_HEIGHT = 24
 const BUFFER_SIZE = 3 * EMOJI_SIZE
@@ -17,6 +19,9 @@ const EmojiGrid = {
       resizeObserver: null
     }
   },
+  components: {
+    StillImage
+  },
   mounted () {
     const rect = this.$refs.container.getBoundingClientRect()
     this.containerWidth = rect.width

src/components/emoji_grid/emoji_grid.vue

@@ -34,10 +34,11 @@
           @click.stop.prevent="onEmoji(item.emoji)"
         >
           <span v-if="!item.emoji.imageUrl">{{ item.emoji.replacement }}</span>
-          <img
+          <StillImage
             v-else
             :src="item.emoji.imageUrl"
-          >
+            noStopGifs="true"
+          />
         </span>
       </template>
     </div>

src/components/emoji_input/emoji_input.js

@@ -1,5 +1,6 @@
 import Completion from '../../services/completion/completion.js'
 import EmojiPicker from '../emoji_picker/emoji_picker.vue'
+import StillImage from '../still-image/still-image.vue'
 import { take } from 'lodash'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
 
@@ -120,7 +121,8 @@ const EmojiInput = {
     }
   },
   components: {
-    EmojiPicker
+    EmojiPicker,
+    StillImage
   },
   computed: {
     padEmoji () {

src/components/emoji_input/emoji_input.vue

@@ -47,10 +47,11 @@
             v-if="!suggestion.mfm"
             class="image"
           >
-            <img
+            <StillImage
               v-if="suggestion.img"
               :src="suggestion.img"
-            >
+              noStopGifs="true"
+            />
             <span v-else>{{ suggestion.replacement }}</span>
           </span>
           <div class="label">

src/components/emoji_picker/emoji_picker.js

@@ -1,6 +1,7 @@
 import { defineAsyncComponent } from 'vue'
 import Checkbox from '../checkbox/checkbox.vue'
 import EmojiGrid from '../emoji_grid/emoji_grid.vue'
+import StillImage from '../still-image/still-image.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBoxOpen,
@@ -39,7 +40,8 @@ const EmojiPicker = {
   components: {
     StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
     Checkbox,
-    EmojiGrid
+    EmojiGrid,
+    StillImage
   },
   methods: {
     debouncedSearch: debounce(function (e) {

src/components/emoji_picker/emoji_picker.vue

@@ -18,10 +18,11 @@
           @click.prevent="highlight(group.id)"
         >
           <span v-if="!group.first.imageUrl">{{ group.first.replacement }}</span>
-          <img
+          <StillImage
             v-else
             :src="group.first.imageUrl"
-          >
+            noStopGifs="true"
+          />
         </span>
         <span
           v-if="stickerPickerEnabled"

src/components/emoji_reactions/emoji_reactions.vue

@@ -72,9 +72,6 @@
       font-size: 2.125em; // assuming default line height of 1.2rem and emojis that don't exceed line height
       line-height: 2.55rem;
     }
-    &.pixelart {
-      image-rendering: pixelated;
-    }
   }
   &:focus {
     outline: none;

src/components/rich_content/rich_content.scss

@@ -51,10 +51,6 @@
   .emoji {
     display: inline-block;
     height: var(--emoji-size, 32px);
-
-    &.pixelart {
-      image-rendering: pixelated;
-    }
   }
 
   .img,

src/components/still-image/still-image.js

@@ -7,11 +7,17 @@ const StillImage = {
     'imageLoadHandler',
     'alt',
     'height',
-    'width'
+    'width',
+    'noStopGifs'
   ],
   data () {
     return {
-      stopGifs: this.$store.getters.mergedConfig.stopGifs || window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+      stopGifs:
+        !this.noStopGifs
+        && (
+          this.$store.getters.mergedConfig.stopGifs
+          || window.matchMedia('(prefers-reduced-motion: reduce)').matches
+        ),
       isAnimated: false,
       isPixelArt: false,
       imageTypeLabel: ''
@@ -46,6 +52,7 @@ const StillImage = {
       this.isPixelArt ||= image.naturalHeight * image.naturalWidth <= 32 * 32;
       // Common size for oldweb badges.
       this.isPixelArt ||= image.naturalWidth == 88 && image.naturalHeight == 31;
+      console.log(image.src+" is "+image.naturalHeight+"x"+image.naturalWidth+" - "+(this.isPixelArt ? "pixel art" : "normal"))
     },
     detectAnimation (image) {
       const mediaProxyAvailable = this.$store.state.instance.mediaProxyAvailable
@@ -215,7 +222,7 @@ const StillImage = {
         }
     
         context.clearRect(0, 0, canvas.width, canvas.height);  // Clear the previous unscaled image
-        context.imageSmoothingEnabled = true;
+        context.imageSmoothingEnabled = !this.isPixelArt;
         context.imageSmoothingQuality = 'high';
 
         // Draw the good one for realsies

src/components/still-image/still-image.vue

@@ -95,5 +95,8 @@
       visibility: visible;
     }
   }
+  &.pixelart {
+    image-rendering: pixelated;
+  }
 }
 </style>