feat: Allow users to pause gifs

Author: akshaymankar

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;
@@ -116,6 +118,49 @@ export const Image = ({
   const assetUrl = imageUrl?.url || dummyImageUrl;
   const isLoading = !imageUrl;
 
+  if (imageUrl?.pauseFrameUrl) {
+    return (
+      <InViewport
+        onVisible={() => setIsInViewport(true)}
+        css={getWrapperStyles(!!onClick)}
+        className={cx(className, {'loading-dots image-asset--no-image': isLoading})}
+        data-uie-status={isLoading ? 'loading' : 'loaded'}
+        {...props}
+      >
+        <div className="image-asset--gif-wrapper">
+          <img
+            css={{...getImageStyle(imageSizes), ...imageStyles}}
+            src={imageUrl?.pauseFrameUrl}
+            role="presentation"
+            alt={alt}
+            data-uie-name={isLoading ? 'image-loader' : 'image-asset-img'}
+            onClick={event => {
+              if (!isLoading) {
+                onClick?.(event);
+              }
+            }}
+          />
+          <details open className="image-asset--gif">
+            <summary role="button" aria-label="static image"></summary>
+            <div className="image-asset--gif-animated">
+              <img
+                css={{...getImageStyle(imageSizes), ...imageStyles}}
+                src={assetUrl}
+                role="presentation"
+                alt={alt}
+                data-uie-name={isLoading ? 'image-loader' : 'image-asset-img'}
+                onClick={event => {
+                  if (!isLoading) {
+                    onClick?.(event);
+                  }
+                }}
+              />
+            </div>
+          </details>
+        </div>
+      </InViewport>
+    );
+  }
   return (
     <InViewport
       onVisible={() => setIsInViewport(true)}

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,45 @@ 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') {
+          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) {
+            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;
+        }
+        return undefined;
+      })();
+
       return {
         dispose: () => URL.revokeObjectURL(url),
         url,
+        pauseFrameUrl,
       };
     },
     transferState,

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

@@ -40,6 +40,7 @@ export class FileAsset extends Asset {
   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,46 @@
     line-height: 1.3em;
   }
 }
+
+.image-asset--gif-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;
+    transition: 100ms all ease;
+  }
+
+  [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--gif-animated img {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    display: inline-block;
+    overflow: visible;
+  }
+}