pl-fe: fix disabling gif autoplay

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/components/still-image.tsx

@@ -45,7 +45,11 @@ const StillImage: React.FC<IStillImage> = ({
     if (hoverToPlay && canvas.current && img.current) {
       canvas.current.width = img.current.naturalWidth;
       canvas.current.height = img.current.naturalHeight;
-      canvas.current.getContext('2d')?.drawImage(img.current, 0, 0);
+      const context = canvas.current.getContext('2d');
+      if (context) {
+        context.imageSmoothingQuality = 'high';
+        context.drawImage(img.current, 0, 0);
+      }
     }
 
     if (onLoad) {

packages/pl-fe/src/components/ui/emoji.tsx

@@ -31,7 +31,7 @@ const Emoji: React.FC<IEmoji> = (props): JSX.Element | null => {
       <StillImage
         alt={alt || emoji}
         src={src}
-        isGif={!src.endsWith('.png')}
+        isGif
         noGroup={noGroup}
         letterboxed
         {...rest}

packages/pl-fe/src/features/emoji/emojify.tsx

@@ -1,6 +1,7 @@
 import split from 'graphemesplit';
 import React from 'react';
 
+import Emoji from 'pl-fe/components/ui/emoji';
 import { useSettings } from 'pl-fe/hooks/use-settings';
 import { makeEmojiMap } from 'pl-fe/utils/normalizers';
 
@@ -22,7 +23,8 @@ const MaybeEmoji: React.FC<IMaybeEmoji> = ({ text, emojis }) => {
     const filename = emoji.static_url;
 
     if (filename?.length > 0) {
-      return <img draggable={false} className='emojione transition-transform hover:scale-125' alt={text} title={text} src={filename} />;
+      return <Emoji className='emojione transition-transform hover:scale-125' emoji={text} src={filename} />;
+      // return <img draggable={false} className='emojione transition-transform hover:scale-125' alt={text} title={text} src={filename} />;
     }
   }
 

packages/pl-fe/src/styles/markup.scss

@@ -122,23 +122,24 @@
     @apply hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue;
   }
 
-  .invisible {
+  span.invisible {
     font-size: 0 !important;
     line-height: 0 !important;
     display: inline-block;
     width: 0;
     height: 0;
     position: absolute;
+
+    img,
+    svg {
+      margin: 0 !important;
+      border: 0 !important;
+      padding: 0 !important;
+      width: 0 !important;
+      height: 0 !important;
+   }
   }
 
-  .invisible img,
-  .invisible svg {
-    margin: 0 !important;
-    border: 0 !important;
-    padding: 0 !important;
-    width: 0 !important;
-    height: 0 !important;
-  }
 }
 
 /* User setting to underline links */