feat: Allow users to pause gifs

src/script/components/Image/Image.tsx

@@ -48,6 +48,7 @@ interface BaseImageProps extends React.HTMLProps<HTMLDivElement> {
 interface RemoteDataImageProps extends BaseImageProps {
   image: AssetRemoteData;
   imageSizes?: {width: string; height: string; ratio: number};
+  fileType?: string;
 }
 interface AssetImageProps extends BaseImageProps {
   image: MediumImage;
@@ -56,12 +57,13 @@ interface AssetImageProps extends BaseImageProps {
 export const AssetImage = ({image, alt, ...props}: AssetImageProps) => {
   const {resource} = useKoSubscribableChildren(image, ['resource']);
 
-  return <Image image={resource} imageSizes={image} alt={alt} {...props} />;
+  return <Image image={resource} imageSizes={image} fileType={image.file_type} alt={alt} {...props} />;
 };
 
 export const Image = ({
   image,
   imageSizes,
+  fileType,
   onClick,
   className,
   isQuote = false,
@@ -88,7 +90,7 @@ export const Image = ({
             'application/octet-stream', // Octet-stream is required to paste images from clipboard
             ...Config.getConfig().ALLOWED_IMAGE_TYPES,
           ];
-          const url = await getAssetUrl(image, allowedImageTypes);
+          const url = await getAssetUrl(image, allowedImageTypes, fileType);
           if (isUnmouted.current) {
             // Avoid re-rendering a component that is umounted
             return;
@@ -115,27 +117,40 @@ export const Image = ({
   const dummyImageUrl = `data:image/svg+xml;utf8,<svg aria-hidden="true" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' width='${imageSizes?.width}' height='${imageSizes?.height}'></svg>`;
   const assetUrl = imageUrl?.url || dummyImageUrl;
   const isLoading = !imageUrl;
+  const ImageElement = ({src}: {src: string}) => (
+    <img
+      css={{...getImageStyle(imageSizes), ...imageStyles}}
+      src={src}
+      role="presentation"
+      alt={alt}
+      data-uie-name={isLoading ? 'image-loader' : 'image-asset-img'}
+      onClick={event => {
+        if (!isLoading) {
+          onClick?.(event);
+        }
+      }}
+    />
+  );
 
   return (
     <InViewport
       onVisible={() => setIsInViewport(true)}
       css={getWrapperStyles(!!onClick)}
       className={cx(className, {'loading-dots image-asset--no-image': isLoading})}
-      onClick={event => {
-        if (!isLoading) {
-          onClick?.(event);
-        }
-      }}
       data-uie-status={isLoading ? 'loading' : 'loaded'}
       {...props}
     >
-      <img
-        css={{...getImageStyle(imageSizes), ...imageStyles}}
-        src={assetUrl}
-        role="presentation"
-        alt={alt}
-        data-uie-name={isLoading ? 'image-loader' : 'image-asset-img'}
-      />
+      {imageUrl?.pauseFrameUrl ? (
+        <div className="image-asset--animated-wrapper">
+          <ImageElement src={imageUrl?.pauseFrameUrl} />
+          <details open className="image-asset--animated">
+            <summary role="button" aria-label="Toggle animation playback"></summary>
+            <ImageElement src={assetUrl} />
+          </details>
+        </div>
+      ) : (
+        <ImageElement src={assetUrl} />
+      )}
     </InViewport>
   );
 };

src/script/components/MessagesList/Message/ContentMessage/asset/common/useAssetTransfer/useAssetTransfer.ts

@@ -19,6 +19,7 @@
 
 import {useEffect, useState} from 'react';
 
+import {GifUtil} from 'gifwrap';
 import {container} from 'tsyringe';
 
 import {AssetRemoteData} from 'Repositories/assets/AssetRemoteData';
@@ -30,6 +31,7 @@ import {useKoSubscribableChildren} from 'Util/ComponentUtil';
 
 export type AssetUrl = {
   url: string;
+  pauseFrameUrl?: string;
   dispose: () => void;
 };
 
@@ -59,7 +61,11 @@ export const useAssetTransfer = (message?: ContentMessage, assetRepository = con
     isPendingUpload: transferState === AssetTransferState.UPLOAD_PENDING,
     isUploaded: transferState === AssetTransferState.UPLOADED,
     isUploading: transferState === AssetTransferState.UPLOADING,
-    getAssetUrl: async (resource: AssetRemoteData, acceptedMimeTypes?: string[]): Promise<AssetUrl> => {
+    getAssetUrl: async (
+      resource: AssetRemoteData,
+      acceptedMimeTypes?: string[],
+      fileType?: string,
+    ): Promise<AssetUrl> => {
       const blob = await assetRepository.load(resource);
       if (!blob) {
         throw new Error(`Asset could not be loaded`);
@@ -68,9 +74,55 @@ export const useAssetTransfer = (message?: ContentMessage, assetRepository = con
         throw new Error(`Mime type not accepted "${blob.type}"`);
       }
       const url = URL.createObjectURL(blob);
+
+      const pauseFrameUrl = await (async () => {
+        if (blob.type === 'image/gif' || fileType === 'image/gif') {
+          try {
+            const gifArrayBuffer = await blob.arrayBuffer();
+            const gifBuffer = Buffer.from(gifArrayBuffer);
+            const frame0 = await GifUtil.read(gifBuffer).then(gifFile => gifFile.frames[0]);
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+              return undefined;
+            }
+            canvas.width = frame0.bitmap.width;
+            canvas.height = frame0.bitmap.height;
+
+            const imageData = ctx.createImageData(frame0.bitmap.width, frame0.bitmap.height);
+            imageData.data.set(frame0.bitmap.data);
+            ctx.putImageData(imageData, 0, 0);
+
+            const pauseImageBlob: Blob | null = await new Promise(resolve => {
+              canvas.toBlob(
+                blob => {
+                  resolve(blob);
+                },
+                'image/jpeg',
+                0.9,
+              );
+            });
+
+            if (pauseImageBlob) {
+              return URL.createObjectURL(pauseImageBlob);
+            }
+            return undefined;
+          } catch (_error) {
+            return undefined;
+          }
+        }
+        return undefined;
+      })();
+
       return {
-        dispose: () => URL.revokeObjectURL(url),
+        dispose: () => {
+          URL.revokeObjectURL(url);
+          if (pauseFrameUrl) {
+            URL.revokeObjectURL(pauseFrameUrl);
+          }
+        },
         url,
+        pauseFrameUrl,
       };
     },
     transferState,

src/script/repositories/entity/message/FileAsset.ts

@@ -40,6 +40,7 @@
   public readonly downloadProgress: ko.PureComputed<number | undefined>;
   public readonly cancelDownload: () => void;
   public file_size: number;
+  public readonly file_type: string;
   public meta: Partial<AssetMetaData>;
   public readonly status: ko.Observable<AssetTransferState>;
   public readonly upload_failed_reason: ko.Observable<ProtobufAsset.NotUploaded>;

src/style/components/image.less

@@ -43,3 +43,58 @@
     line-height: 1.3em;
   }
 }
+
+.image-asset--animated-wrapper {
+  position: relative;
+  display: inline-block;
+
+  summary {
+    position: absolute;
+    z-index: 2;
+    top: 0.5rem;
+    right: 0.5rem;
+    width: 0;
+    height: 2em;
+    border-width: 1em 0 1em 2em;
+    border-style: solid;
+
+    border-color: transparent transparent transparent #202020;
+    background: transparent;
+    cursor: pointer;
+    opacity: 0.1;
+    transition: 100ms all ease;
+
+    &:focus,
+    &:focus-visible {
+      opacity: 1;
+      outline: 2px solid var(--accent-color, #ffffff);
+      outline-offset: 2px;
+    }
+  }
+
+  &:hover summary {
+    opacity: 1;
+  }
+
+  [open] summary {
+    border-width: 0 0 0 2em;
+    border-style: double;
+  }
+
+  /* for blink/webkit */
+  details summary::-webkit-details-marker {
+    display: none;
+  }
+  /* for firefox */
+  details > summary:first-of-type {
+    list-style: none;
+  }
+
+  .image-asset--animated img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline-block;
+    overflow: visible;
+  }
+}