pl-fe: support static url in StillImage

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

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

@@ -12,6 +12,8 @@ interface IStillImage {
   innerClassName?: string;
   /** URL to the image */
   src: string;
+  /** URL to the static image */
+  staticSrc?: string;
   /** Extra CSS styles on the outer <div> element. */
   style?: React.CSSProperties;
   /** Whether to display the image contained vs filled in its container. */
@@ -30,19 +32,17 @@ interface IStillImage {
 
 /** Renders images on a canvas, only playing GIFs if autoPlayGif is enabled. */
 const StillImage: React.FC<IStillImage> = ({
-  alt, className, innerClassName, src, style, letterboxed = false, showExt = false, onError, onLoad, isGif, noGroup,
+  alt, className, innerClassName, src, staticSrc, style, letterboxed = false, showExt = false, onError, onLoad, isGif, noGroup,
 }) => {
   const { autoPlayGif } = useSettings();
 
   const canvas = useRef<HTMLCanvasElement>(null);
   const img = useRef<HTMLImageElement>(null);
 
-  const hoverToPlay = (
+  const hoverToPlay = src && !autoPlayGif && ((isGif) || src.endsWith('.gif') || src.startsWith('blob:') || (src && staticSrc && src !== staticSrc));
-    src && !autoPlayGif && ((isGif) || src.endsWith('.gif') || src.startsWith('blob:'))
-  );
 
   const handleImageLoad: React.ReactEventHandler<HTMLImageElement> = (e) => {
-    if (hoverToPlay && canvas.current && img.current) {
+    if (hoverToPlay && !staticSrc && canvas.current && img.current) {
       canvas.current.width = img.current.naturalWidth;
       canvas.current.height = img.current.naturalHeight;
       const context = canvas.current.getContext('2d');
@@ -80,14 +80,18 @@ const StillImage: React.FC<IStillImage> = ({
         })}
       />
 
-      {hoverToPlay && (
+      {hoverToPlay && (staticSrc ? (
+        <img
+          src={staticSrc}
+          alt={alt}
+          className={clsx(baseClassName, 'absolute top-0 group-hover:invisible')}
+        />
+      ) : (
         <canvas
           ref={canvas}
-          className={clsx(baseClassName, {
+          className={clsx(baseClassName, 'absolute top-0 group-hover:invisible')}
-            'absolute group-hover:invisible top-0': hoverToPlay,
-          })}
         />
-      )}
+      ))}
 
       {(hoverToPlay && showExt) && (
         <div className='pointer-events-none absolute bottom-2 left-2 opacity-90 group-hover:hidden'>

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

@@ -9,12 +9,13 @@ interface IEmoji extends Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'alt' |
   /** Unicode emoji character. */
   emoji?: string;
   noGroup?: boolean;
+  staticSrc?: string;
 }
 
 /** A single emoji image. */
 const Emoji: React.FC<IEmoji> = (props): JSX.Element | null => {
   const { disableUserProvidedMedia, systemEmojiFont } = useSettings();
-  const { emoji, alt, src, noGroup, ...rest } = props;
+  const { emoji, alt, src, staticSrc, noGroup, ...rest } = props;
 
   let filename;
 
@@ -35,6 +36,7 @@ const Emoji: React.FC<IEmoji> = (props): JSX.Element | null => {
       <StillImage
         alt={alt || emoji}
         src={src}
+        staticSrc={staticSrc}
         isGif
         noGroup={noGroup}
         letterboxed