sceyt-chat-react-uikit 1.9.0-beta.7 → 1.9.0-beta.8

package/index.js

@@ -16895,6 +16895,7 @@ var idleSnapshot = {
 var jobs = new Map();
 var snapshots = new Map();
 var listeners = new Map();
+var jobVersions = new Map();
 var notify = function notify(key) {
   var _listeners$get;
   (_listeners$get = listeners.get(key)) === null || _listeners$get === void 0 ? void 0 : _listeners$get.forEach(function (listener) {
@@ -16907,6 +16908,10 @@ var setSnapshot = function setSnapshot(key, snapshot) {
   if (job) job.snapshot = snapshot;
   notify(key);
 };
+var setJobSnapshot = function setJobSnapshot(key, job, snapshot) {
+  if (jobVersions.get(key) !== job.version) return;
+  setSnapshot(key, snapshot);
+};
 var normalizeProgress = function normalizeProgress(progress, fallbackTotal) {
   var _ref, _progress$loaded, _progress$total;
   if (fallbackTotal === void 0) {
@@ -16986,7 +16991,7 @@ var download = function download(request, job) {
         return;
       }
       var normalized = normalizeProgress(progress, request.size);
-      setSnapshot(request.key, _extends({
+      setJobSnapshot(request.key, job, _extends({
         state: 'loading'
       }, normalized));
     };
@@ -17079,6 +17084,7 @@ var requestMediaDownload = function requestMediaDownload(request) {
     return active.promise;
   }
   var job = {
+    version: (jobVersions.get(request.key) || 0) + 1,
     snapshot: {
       state: 'loading',
       loaded: 0,
@@ -17088,8 +17094,9 @@ var requestMediaDownload = function requestMediaDownload(request) {
     promise: undefined,
     cacheKeys: new Set([request.cacheKey].concat(request.cacheKeys || []))
   };
+  jobVersions.set(request.key, job.version);
   jobs.set(request.key, job);
-  setSnapshot(request.key, job.snapshot);
+  setJobSnapshot(request.key, job, job.snapshot);
   var promise = Promise.resolve().then(function () {
     try {
       var _temp5 = function _temp5(cachedResult) {
@@ -17105,7 +17112,8 @@ var requestMediaDownload = function requestMediaDownload(request) {
       return Promise.reject(e);
     }
   }).then(function (result) {
-    setSnapshot(request.key, {
+    throwIfCancelled(job);
+    setJobSnapshot(request.key, job, {
       state: 'completed',
       loaded: result.blob.size,
       total: result.blob.size,
@@ -17113,8 +17121,8 @@ var requestMediaDownload = function requestMediaDownload(request) {
     });
     return result;
   })["catch"](function (error) {
-    var cancelled = (error === null || error === void 0 ? void 0 : error.name) === 'AbortError';
-    setSnapshot(request.key, {
+    var cancelled = job.cancelled || (error === null || error === void 0 ? void 0 : error.name) === 'AbortError';
+    setJobSnapshot(request.key, job, {
       state: cancelled ? 'cancelled' : 'failed',
       loaded: 0,
       total: 0,
@@ -17122,7 +17130,9 @@ var requestMediaDownload = function requestMediaDownload(request) {
     });
     throw error;
   })["finally"](function () {
-    jobs["delete"](request.key);
+    if (jobs.get(request.key) === job) {
+      jobs["delete"](request.key);
+    }
   });
   job.promise = promise;
   return promise;
@@ -17132,6 +17142,13 @@ var cancelMediaDownload = function cancelMediaDownload(key) {
   var job = jobs.get(key);
   if (!job) return;
   job.cancelled = true;
+  jobs["delete"](key);
+  setSnapshot(key, {
+    state: 'cancelled',
+    loaded: 0,
+    total: 0,
+    progress: 0
+  });
   if (job.abortController) job.abortController.abort();
   if (job.customRequest) (_getCustomUploader = getCustomUploader()) === null || _getCustomUploader === void 0 ? void 0 : _getCustomUploader.cancelRequest(job.customRequest);
 };
@@ -39643,6 +39660,9 @@ var VideoIcon = styled__default.div(_templateObject0$6 || (_templateObject0$6 =
 });
 
 var _templateObject$t, _templateObject2$q, _templateObject3$m, _templateObject4$j, _templateObject5$g, _templateObject6$c, _templateObject7$b, _templateObject8$9, _templateObject9$8, _templateObject0$7, _templateObject1$6, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$3, _templateObject14$3, _templateObject15$2;
+var isMediaDownloadCancellation = function isMediaDownloadCancellation(error) {
+  return (error === null || error === void 0 ? void 0 : error.name) === 'AbortError' || (error === null || error === void 0 ? void 0 : error.name) === 'DOWNLOAD_CANCELLED' || (error === null || error === void 0 ? void 0 : error.message) === 'DOWNLOAD_CANCELLED';
+};
 var Attachment = function Attachment(_ref) {
   var attachment = _ref.attachment,
     _ref$isPreview = _ref.isPreview,
@@ -39738,9 +39758,15 @@ var Attachment = function Attachment(_ref) {
     imageDownloadRetry = _useState0[0],
     setImageDownloadRetry = _useState0[1];
   var _useState1 = React.useState(false),
-    isOriginalVideoRestarting = _useState1[0],
-    setIsOriginalVideoRestarting = _useState1[1];
+    isOriginalImageRestarting = _useState1[0],
+    setIsOriginalImageRestarting = _useState1[1];
+  var _useState10 = React.useState(false),
+    isOriginalVideoRestarting = _useState10[0],
+    setIsOriginalVideoRestarting = _useState10[1];
   var originalVideoDownloadStartedRef = React.useRef(false);
+  var videoDownloadRequestRef = React.useRef(0);
+  var imageDownloadRequestRef = React.useRef(0);
+  var imageResumeStartedRef = React.useRef(false);
   var fileNameRef = React.useRef(null);
   var customDownloader = getCustomDownloader();
   var previewFileType = isPreview && attachment.data.type.split('/')[0];
@@ -39772,15 +39798,23 @@ var Attachment = function Attachment(_ref) {
   var isPreparingVideo = attachmentCompilationState[attachment.tid] === UPLOAD_STATE.PREPARING;
   var isSharedOriginalVideoDownloading = sharedOriginalVideoDownload.state === 'loading';
   var isSharedOriginalVideoCancelled = sharedOriginalVideoDownload.state === 'cancelled';
+  var shouldShowVideoDownloadRetry = !isSharedOriginalVideoDownloading && !isOriginalVideoRestarting && (isSharedOriginalVideoCancelled || !originalVideoDownloadKey && downloadIsCancelled);
   var isVideoDownloading = downloadingFile || isSharedOriginalVideoDownloading;
   var isVideoDownloadActive = isVideoDownloading || isOriginalVideoRestarting;
+  var shouldRenderVideoDownloadProgress = Boolean(!isRepliedMessage && !isPreview && (isInUploadingState || isVideoDownloadActive));
   var videoProgress = isSharedOriginalVideoDownloading ? sharedOriginalVideoDownload.progress || 3 : progress;
   var videoSizeProgress = isSharedOriginalVideoDownloading ? {
     loaded: sharedOriginalVideoDownload.loaded,
     total: sharedOriginalVideoDownload.total
   } : sizeProgress;
-  var isImageDownloading = downloadingFile || sharedOriginalImageDownload.state === 'loading';
+  React.useEffect(function () {
+    if (isSharedOriginalVideoDownloading && downloadIsCancelled) {
+      setDownloadIsCancelled(false);
+    }
+  }, [downloadIsCancelled, isSharedOriginalVideoDownloading]);
+  var isImageDownloading = downloadingFile || sharedOriginalImageDownload.state === 'loading' || isOriginalImageRestarting;
   var isSharedOriginalImageCancelled = sharedOriginalImageDownload.state === 'cancelled';
+  var shouldShowImageDownloadRetry = !isOriginalImageRestarting && (isSharedOriginalImageCancelled || downloadIsCancelled && sharedOriginalImageDownload.state !== 'loading');
   var imageProgress = sharedOriginalImageDownload.state === 'loading' ? sharedOriginalImageDownload.progress || 3 : progress;
   var imageSizeProgress = sharedOriginalImageDownload.state === 'loading' ? {
     loaded: sharedOriginalImageDownload.loaded,
@@ -40127,6 +40161,9 @@ var Attachment = function Attachment(_ref) {
     if (attachment.type !== attachmentTypes.video) {
       return;
     }
+    if (isSharedOriginalVideoCancelled) {
+      return;
+    }
     var _getVideoAttachmentCa = getVideoAttachmentCacheKeys(attachment.url, attachment.metadata),
       videoThumb = _getVideoAttachmentCa.videoThumb,
       originalVideoCacheKey = _getVideoAttachmentCa.originalVideo;
@@ -40141,11 +40178,12 @@ var Attachment = function Attachment(_ref) {
       return;
     }
     var cancelled = false;
+    var videoDownloadRequest = videoDownloadRequestRef.current;
     var loadVideoThumbAndOriginal = function loadVideoThumbAndOriginal() {
       try {
         var _temp18 = function _temp18(_result2) {
           if (_exit) return _result2;
-          if (isDetailsView) return;
+          if (isDetailsView && videoDownloadRetry === 0) return;
           return Promise.resolve(getAttachmentUrlFromCache(originalVideoCacheKey)["catch"](function () {
             return false;
           })).then(function (cachedOriginalVideo) {
@@ -40169,15 +40207,16 @@ var Attachment = function Attachment(_ref) {
               size: Number(attachment.size) || 0
             }).then(function (_ref4) {
               var objectUrl = _ref4.objectUrl;
-              if (cancelled) return;
+              if (cancelled || videoDownloadRequest !== videoDownloadRequestRef.current) return;
               dispatch(setUpdateMessageAttachmentAC(originalVideoCacheKey, objectUrl));
               setAttachmentUrl(objectUrl);
               setIsCached(true);
               setDownloadIsCancelled(false);
               setIsOriginalVideoRestarting(false);
             })["catch"](function (error) {
+              if (videoDownloadRequest !== videoDownloadRequestRef.current) return;
               setIsOriginalVideoRestarting(false);
-              if (!cancelled) log.error('Error downloading video attachment:', error);
+              if (!cancelled && !isMediaDownloadCancellation(error)) log.error('Error downloading video attachment:', error);
             });
           });
         };
@@ -40206,39 +40245,107 @@ var Attachment = function Attachment(_ref) {
     return function () {
       cancelled = true;
     };
-  }, [attachment.id, attachment.type, attachment.url, attachment.metadata, attachment.attachmentUrl, isDetailsView, originalVideoUrlFromMap, connectionStatus, dispatch, messageType, attachment.size, videoDownloadRetry]);
+  }, [attachment.id, attachment.type, attachment.url, attachment.metadata, attachment.attachmentUrl, isDetailsView, originalVideoUrlFromMap, connectionStatus, dispatch, messageType, attachment.size, videoDownloadRetry, isSharedOriginalVideoCancelled]);
   var handleResumeOriginalVideoDownload = function handleResumeOriginalVideoDownload(event) {
     event.stopPropagation();
+    if (!attachment.url) return;
+    var _getVideoAttachmentCa2 = getVideoAttachmentCacheKeys(attachment.url, attachment.metadata),
+      originalVideoCacheKey = _getVideoAttachmentCa2.originalVideo;
+    var videoDownloadRequest = videoDownloadRequestRef.current + 1;
+    videoDownloadRequestRef.current = videoDownloadRequest;
     originalVideoDownloadStartedRef.current = false;
     setDownloadIsCancelled(false);
     setIsOriginalVideoRestarting(true);
     setVideoDownloadRetry(function (retry) {
       return retry + 1;
     });
+    originalVideoDownloadStartedRef.current = true;
+    requestMediaDownload({
+      key: "original-video:" + attachment.url,
+      url: attachment.url,
+      cacheKey: originalVideoCacheKey,
+      kind: 'original-video',
+      messageType: messageType,
+      size: Number(attachment.size) || 0
+    }).then(function (_ref5) {
+      var objectUrl = _ref5.objectUrl;
+      if (videoDownloadRequest !== videoDownloadRequestRef.current) return;
+      dispatch(setUpdateMessageAttachmentAC(originalVideoCacheKey, objectUrl));
+      setAttachmentUrl(objectUrl);
+      setIsCached(true);
+      setDownloadIsCancelled(false);
+      setIsOriginalVideoRestarting(false);
+    })["catch"](function (error) {
+      if (videoDownloadRequest !== videoDownloadRequestRef.current) return;
+      setIsOriginalVideoRestarting(false);
+      if (!isMediaDownloadCancellation(error)) log.error('Error restarting video attachment download:', error);
+    });
   };
   var handleResumeOriginalImageDownload = function handleResumeOriginalImageDownload(event) {
     event.stopPropagation();
+    if (!attachment.url) return;
+    var imageDownloadRequest = imageDownloadRequestRef.current + 1;
+    imageDownloadRequestRef.current = imageDownloadRequest;
+    imageResumeStartedRef.current = true;
     setDownloadIsCancelled(false);
+    setIsOriginalImageRestarting(true);
     setImageDownloadRetry(function (retry) {
       return retry + 1;
     });
+    requestMediaDownload({
+      key: "original-image:" + attachment.url,
+      url: attachment.url,
+      cacheKey: attachment.url,
+      cacheKeys: [attachment.url + '_original_image_url'],
+      kind: 'original-image',
+      messageType: messageType,
+      size: Number(attachment.size) || 0
+    }).then(function (_ref6) {
+      var objectUrl = _ref6.objectUrl;
+      try {
+        if (imageDownloadRequest !== imageDownloadRequestRef.current) return Promise.resolve();
+        return Promise.resolve(compressAndCacheImage(objectUrl, attachment.url, renderWidth, renderHeight)).then(function (compressedUrl) {
+          if (imageDownloadRequest !== imageDownloadRequestRef.current) return;
+          var displayedUrl = compressedUrl || objectUrl;
+          setAttachmentUrl(displayedUrl);
+          dispatch(setUpdateMessageAttachmentAC(attachment.url, displayedUrl));
+          dispatch(setUpdateMessageAttachmentAC(attachment.url + '_original_image_url', objectUrl));
+          setIsCached(true);
+          setDownloadIsCancelled(false);
+          setIsOriginalImageRestarting(false);
+          imageResumeStartedRef.current = false;
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    })["catch"](function (error) {
+      if (imageDownloadRequest !== imageDownloadRequestRef.current) return;
+      imageResumeStartedRef.current = false;
+      setIsOriginalImageRestarting(false);
+      log.error('Error restarting image attachment download:', error);
+    });
   };
   var handleCancelOriginalVideoDownload = function handleCancelOriginalVideoDownload(event) {
     event.stopPropagation();
     if (isSharedOriginalVideoDownloading && originalVideoDownloadKey) {
-      cancelMediaDownload(originalVideoDownloadKey);
-      originalVideoDownloadStartedRef.current = false;
+      videoDownloadRequestRef.current += 1;
       setDownloadIsCancelled(true);
       setIsOriginalVideoRestarting(false);
+      cancelMediaDownload(originalVideoDownloadKey);
+      originalVideoDownloadStartedRef.current = false;
       return;
     }
     handleStopStartDownloadFile();
   };
   React.useEffect(function () {
+    if (imageResumeStartedRef.current) return;
+    if (isSharedOriginalImageCancelled) return;
     if (!attachment.attachmentUrl && connectionStatus === CONNECTION_STATUS.CONNECTED && attachment.id && !attachmentUrlFromMap && attachment.type !== attachmentTypes.video && !(attachment.type === attachmentTypes.file || attachment.type === attachmentTypes.link)) {
       var requestAttachmentKey = attachmentKey;
+      var imageDownloadRequest = imageDownloadRequestRef.current;
       getAttachmentUrlFromCache(attachment.url).then(function (cachedUrl) {
         try {
+          if (imageDownloadRequest !== imageDownloadRequestRef.current) return Promise.resolve();
           if (attachment.type === attachmentTypes.image && !isPreview) {
             if (cachedUrl) {
               setAttachmentUrl(cachedUrl);
@@ -40254,23 +40361,27 @@ var Attachment = function Attachment(_ref) {
                 kind: 'original-image',
                 messageType: messageType,
                 size: Number(attachment.size) || 0
-              }).then(function (_ref5) {
-                var objectUrl = _ref5.objectUrl;
+              }).then(function (_ref7) {
+                var objectUrl = _ref7.objectUrl;
                 try {
-                  if (requestAttachmentKey !== currentAttachmentKeyRef.current) return Promise.resolve();
+                  if (requestAttachmentKey !== currentAttachmentKeyRef.current || imageDownloadRequest !== imageDownloadRequestRef.current) return Promise.resolve();
                   return Promise.resolve(compressAndCacheImage(objectUrl, attachment.url, renderWidth, renderHeight)).then(function (compressedUrl) {
-                    if (requestAttachmentKey !== currentAttachmentKeyRef.current) return;
+                    if (requestAttachmentKey !== currentAttachmentKeyRef.current || imageDownloadRequest !== imageDownloadRequestRef.current) return;
                     var displayedUrl = compressedUrl || objectUrl;
                     setAttachmentUrl(displayedUrl);
                     dispatch(setUpdateMessageAttachmentAC(attachment.url, displayedUrl));
                     dispatch(setUpdateMessageAttachmentAC(attachment.url + '_original_image_url', objectUrl));
                     setIsCached(true);
+                    setIsOriginalImageRestarting(false);
                   });
                 } catch (e) {
                   return Promise.reject(e);
                 }
               })["catch"](function (error) {
-                if (requestAttachmentKey === currentAttachmentKeyRef.current) {
+                if (imageDownloadRequest === imageDownloadRequestRef.current) {
+                  setIsOriginalImageRestarting(false);
+                }
+                if (requestAttachmentKey === currentAttachmentKeyRef.current && imageDownloadRequest === imageDownloadRequestRef.current) {
                   log.error('Error downloading image attachment:', error);
                 }
               });
@@ -40289,8 +40400,8 @@ var Attachment = function Attachment(_ref) {
                 kind: kind,
                 messageType: messageType,
                 size: Number(attachment.size) || 0
-              }).then(function (_ref6) {
-                var objectUrl = _ref6.objectUrl;
+              }).then(function (_ref8) {
+                var objectUrl = _ref8.objectUrl;
                 if (requestAttachmentKey !== currentAttachmentKeyRef.current) return;
                 setAttachmentUrl(objectUrl);
                 dispatch(setUpdateMessageAttachmentAC(attachment.url, objectUrl));
@@ -40350,7 +40461,7 @@ var Attachment = function Attachment(_ref) {
         }
       });
     }
-  }, [imageDownloadRetry]);
+  }, [imageDownloadRetry, isSharedOriginalImageCancelled]);
   useDidUpdate(function () {
     if (connectionStatus === CONNECTION_STATUS.CONNECTED && isInUploadingState) {
       setFailTimeout(setTimeout(function () {
@@ -40422,7 +40533,7 @@ var Attachment = function Attachment(_ref) {
   })), attachment.type === attachmentTypes.image ? (/*#__PURE__*/React__default.createElement(AttachmentImgCont, {
     draggable: false,
     onClick: function onClick() {
-      return handleMediaItemClick && !isInUploadingState && !isSharedOriginalImageCancelled && handleMediaItemClick(attachment);
+      return handleMediaItemClick && !isInUploadingState && !isImageDownloading && !shouldShowImageDownloadRetry && handleMediaItemClick(attachment);
     },
     isPreview: isPreview,
     ref: imageContRef,
@@ -40483,15 +40594,18 @@ var Attachment = function Attachment(_ref) {
   }, isInUploadingState ? (/*#__PURE__*/React__default.createElement(CancelResumeWrapper, {
     onClick: handlePauseResumeUpload
   }, attachmentCompilationState[attachment.tid] === UPLOAD_STATE.UPLOADING ? (/*#__PURE__*/React__default.createElement(SvgCancel, null)) : (/*#__PURE__*/React__default.createElement(SvgUpload, null)))) : !isCached && (/*#__PURE__*/React__default.createElement(CancelResumeWrapper, {
+    "aria-label": 'Cancel image download',
     onClick: function onClick(e) {
       e.stopPropagation();
       if (sharedOriginalImageDownload.state === 'loading' && originalImageDownloadKey) {
+        setDownloadIsCancelled(true);
+        setIsOriginalImageRestarting(false);
         cancelMediaDownload(originalImageDownloadKey);
       } else {
         handlePauseResumeDownload(e.nativeEvent);
       }
     }
-  }, downloadIsCancelled ? /*#__PURE__*/React__default.createElement(SvgDownload, null) : /*#__PURE__*/React__default.createElement(SvgCancel, null))), (isImageDownloading || attachmentCompilationState[attachment.tid] === UPLOAD_STATE.UPLOADING) && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ProgressWrapper, null, /*#__PURE__*/React__default.createElement(reactCircularProgressbar.CircularProgressbar, {
+  }, shouldShowImageDownloadRetry ? /*#__PURE__*/React__default.createElement(SvgDownload, null) : /*#__PURE__*/React__default.createElement(SvgCancel, null))), (isImageDownloading || attachmentCompilationState[attachment.tid] === UPLOAD_STATE.UPLOADING) && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ProgressWrapper, null, /*#__PURE__*/React__default.createElement(reactCircularProgressbar.CircularProgressbar, {
     minValue: 0,
     maxValue: 100,
     value: imageProgress,
@@ -40513,7 +40627,7 @@ var Attachment = function Attachment(_ref) {
     }
   })), imageSizeProgress && (/*#__PURE__*/React__default.createElement(SizeProgress, {
     color: textOnPrimary
-  }, bytesToSize(imageSizeProgress.loaded, 1), " / ", bytesToSize(imageSizeProgress.total, 1))))))))) : null, isSharedOriginalImageCancelled && !isPreview && !isRepliedMessage && (/*#__PURE__*/React__default.createElement(UploadProgress, {
+  }, bytesToSize(imageSizeProgress.loaded, 1), " / ", bytesToSize(imageSizeProgress.total, 1))))))))) : null, shouldShowImageDownloadRetry && !isPreview && !isRepliedMessage && (/*#__PURE__*/React__default.createElement(UploadProgress, {
     backgroundImage: !attachmentUrlFromMap ? attachmentThumb : '',
     isRepliedMessage: isRepliedMessage,
     width: renderWidth,
@@ -40531,7 +40645,8 @@ var Attachment = function Attachment(_ref) {
     isDetailsView: isDetailsView,
     backgroundColor: overlayBackground2
   }, /*#__PURE__*/React__default.createElement(CancelResumeWrapper, {
-    onClick: handleResumeOriginalImageDownload
+    onClick: handleResumeOriginalImageDownload,
+    "aria-label": 'Download image'
   }, /*#__PURE__*/React__default.createElement(SvgDownload, null))))), isPreview && (/*#__PURE__*/React__default.createElement(RemoveChosenFile, {
     "$backgroundColor": background,
     color: iconInactive,
@@ -40540,10 +40655,10 @@ var Attachment = function Attachment(_ref) {
     }
   })))) : attachment.type === attachmentTypes.video ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, !isPreview ? (/*#__PURE__*/React__default.createElement(VideoCont, {
     onClick: function onClick() {
-      return handleMediaItemClick && !isVideoDownloadActive && !isSharedOriginalVideoCancelled && !isInUploadingState && (attachmentCompilationState[attachment.tid] ? attachmentCompilationState[attachment.tid] !== UPLOAD_STATE.FAIL || attachmentCompilationState[attachment.tid] !== UPLOAD_STATE.UPLOADING : true) && handleMediaItemClick(attachment);
+      return handleMediaItemClick && !isVideoDownloadActive && !shouldShowVideoDownloadRetry && !isInUploadingState && (attachmentCompilationState[attachment.tid] ? attachmentCompilationState[attachment.tid] !== UPLOAD_STATE.FAIL || attachmentCompilationState[attachment.tid] !== UPLOAD_STATE.UPLOADING : true) && handleMediaItemClick(attachment);
     },
     isDetailsView: isDetailsView
-  }, (isInUploadingState || isVideoDownloadActive) && !isRepliedMessage && !isPreview ? (/*#__PURE__*/React__default.createElement(UploadProgress, {
+  }, shouldRenderVideoDownloadProgress ? (/*#__PURE__*/React__default.createElement(UploadProgress, {
     isDetailsView: isDetailsView,
     isRepliedMessage: isRepliedMessage,
     withPrefix: downloadedVideoPreviewImage ? false : withPrefix,
@@ -40561,8 +40676,9 @@ var Attachment = function Attachment(_ref) {
   }, isInUploadingState ? (/*#__PURE__*/React__default.createElement(CancelResumeWrapper, {
     onClick: handlePauseResumeUpload
   }, attachmentCompilationState[attachment.tid] === UPLOAD_STATE.UPLOADING || isPreparingVideo ? (/*#__PURE__*/React__default.createElement(SvgCancel, null)) : (/*#__PURE__*/React__default.createElement(SvgUpload, null)))) : (/*#__PURE__*/React__default.createElement(CancelResumeWrapper, {
-    onClick: handleCancelOriginalVideoDownload
-  }, downloadIsCancelled ? /*#__PURE__*/React__default.createElement(SvgDownload, null) : /*#__PURE__*/React__default.createElement(SvgCancel, null))), (isPreparingVideo || attachmentCompilationState[attachment.tid] === UPLOAD_STATE.UPLOADING || isVideoDownloadActive && !downloadIsCancelled) && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ProgressWrapper, null, /*#__PURE__*/React__default.createElement(reactCircularProgressbar.CircularProgressbar, {
+    onClick: handleCancelOriginalVideoDownload,
+    "aria-label": 'Cancel video download'
+  }, shouldShowVideoDownloadRetry ? /*#__PURE__*/React__default.createElement(SvgDownload, null) : /*#__PURE__*/React__default.createElement(SvgCancel, null))), (isPreparingVideo || attachmentCompilationState[attachment.tid] === UPLOAD_STATE.UPLOADING || isVideoDownloadActive && !downloadIsCancelled) && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ProgressWrapper, null, /*#__PURE__*/React__default.createElement(reactCircularProgressbar.CircularProgressbar, {
     minValue: 0,
     maxValue: 100,
     value: isPreparingVideo ? 3 : videoProgress,
@@ -40584,7 +40700,7 @@ var Attachment = function Attachment(_ref) {
     }
   })), videoSizeProgress && !isRepliedMessage && (/*#__PURE__*/React__default.createElement(SizeProgress, {
     color: textOnPrimary
-  }, bytesToSize(isPreparingVideo ? 0 : videoSizeProgress.loaded, 1), " /", ' ', bytesToSize(videoSizeProgress.total, 1)))))))) : null, isSharedOriginalVideoCancelled && !isRepliedMessage && !isPreview && (/*#__PURE__*/React__default.createElement(UploadProgress, {
+  }, bytesToSize(isPreparingVideo ? 0 : videoSizeProgress.loaded, 1), " /", ' ', bytesToSize(videoSizeProgress.total, 1)))))))) : null, shouldShowVideoDownloadRetry && !isRepliedMessage && !isPreview && (/*#__PURE__*/React__default.createElement(UploadProgress, {
     isDetailsView: isDetailsView,
     isRepliedMessage: isRepliedMessage,
     withPrefix: downloadedVideoPreviewImage ? false : withPrefix,
@@ -40600,12 +40716,13 @@ var Attachment = function Attachment(_ref) {
     isDetailsView: isDetailsView,
     backgroundColor: overlayBackground2
   }, /*#__PURE__*/React__default.createElement(CancelResumeWrapper, {
-    onClick: handleResumeOriginalVideoDownload
+    onClick: handleResumeOriginalVideoDownload,
+    "aria-label": 'Download video'
   }, /*#__PURE__*/React__default.createElement(SvgDownload, null))))), /*#__PURE__*/React__default.createElement(VideoPreview, {
     onlyVideoImage: onlyVideoImage,
     width: isRepliedMessage ? '40px' : isDetailsView ? '100%' : (renderWidth || videoAttachmentMaxWidth || 420) + "px",
     height: isRepliedMessage ? '40px' : isDetailsView ? '100%' : (renderHeight || videoAttachmentMaxHeight || 240) + "px",
-    downloading: isVideoDownloadActive || isSharedOriginalVideoCancelled,
+    downloading: isVideoDownloadActive || shouldShowVideoDownloadRetry,
     file: attachment,
     messageType: messageType,
     src: attachmentUrlFromMap || attachment.attachmentUrl || attachmentUrl,
@@ -40846,7 +40963,7 @@ var AttachmentImg = styled__default.img(_templateObject13$3 || (_templateObject1
 }, function (props) {
   return props.$fadeIn && styled.css(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n      opacity: 0;\n      animation: ", " 100ms ease-in-out forwards;\n    "])), mediaCrossFade);
 });
-var VideoCont = styled__default.div(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  cursor: pointer;\n  height: ", ";\n"])), function (props) {
+var VideoCont = styled__default.div(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  cursor: pointer;\n  width: 100%;\n  height: ", ";\n"])), function (props) {
   return props.isDetailsView && '100%';
 });
 
@@ -59307,8 +59424,76 @@ var DisappearingMessagesStatus = styled__default.span(_templateObject19$4 || (_t
 var ChevronRightIconWrapper$1 = styled__default.span(_templateObject20$4 || (_templateObject20$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  & > svg {\n    width: 16px;\n    height: 16px;\n    transform: rotate(-90deg);\n  }\n"])));
 
 var _templateObject$11, _templateObject2$Z, _templateObject3$P, _templateObject4$H, _templateObject5$D, _templateObject6$y, _templateObject7$v, _templateObject8$s, _templateObject9$n, _templateObject0$l;
-var Media = function Media(_ref) {
-  var channel = _ref.channel;
+var startMediaVideoDownload = function startMediaVideoDownload(file) {
+  if (file.type !== 'video' || !file.url) return;
+  var _getVideoAttachmentCa = getVideoAttachmentCacheKeys(file.url, file.metadata),
+    originalVideo = _getVideoAttachmentCa.originalVideo;
+  return requestMediaDownload({
+    key: "original-video:" + file.url,
+    url: file.url,
+    cacheKey: originalVideo,
+    kind: 'original-video',
+    size: Number(file.size) || 0
+  });
+};
+var MediaTile = function MediaTile(_ref) {
+  var file = _ref.file,
+    background = _ref.background,
+    onOpen = _ref.onOpen;
+  var elementRef = React.useRef(null);
+  var downloadStartedRef = React.useRef(false);
+  var dispatch = useDispatch();
+  React.useEffect(function () {
+    if (file.type !== 'video' || !file.url || downloadStartedRef.current) return;
+    var startDownload = function startDownload() {
+      var _startMediaVideoDownl;
+      if (downloadStartedRef.current) return;
+      if (getMediaDownloadSnapshot("original-video:" + file.url).state === 'cancelled') return;
+      downloadStartedRef.current = true;
+      var _getVideoAttachmentCa2 = getVideoAttachmentCacheKeys(file.url, file.metadata),
+        originalVideo = _getVideoAttachmentCa2.originalVideo;
+      (_startMediaVideoDownl = startMediaVideoDownload(file)) === null || _startMediaVideoDownl === void 0 ? void 0 : _startMediaVideoDownl.then(function (_ref2) {
+        var objectUrl = _ref2.objectUrl;
+        dispatch(setUpdateMessageAttachmentAC(originalVideo, objectUrl));
+      })["catch"](function (error) {
+        log.error('Failed to start media-tab video download:', error);
+      });
+    };
+    var element = elementRef.current;
+    if (!element) return;
+    if (typeof IntersectionObserver === 'undefined') {
+      startDownload();
+      return;
+    }
+    var observer = new IntersectionObserver(function (entries) {
+      if (entries.some(function (entry) {
+        return entry.isIntersecting;
+      })) {
+        startDownload();
+        observer.disconnect();
+      }
+    }, {
+      rootMargin: '200px 0px'
+    });
+    observer.observe(element);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [dispatch, file.id, file.type, file.url, file.metadata, file.size]);
+  return /*#__PURE__*/React__default.createElement(MediaItem, {
+    ref: elementRef
+  }, /*#__PURE__*/React__default.createElement(Attachment$1, {
+    attachment: _extends({}, file, {
+      metadata: isJSON(file.metadata) ? JSON.parse(file.metadata) : file.metadata
+    }),
+    handleMediaItemClick: onOpen,
+    backgroundColor: background,
+    borderRadius: '8px',
+    isDetailsView: true
+  }));
+};
+var Media = function Media(_ref3) {
+  var channel = _ref3.channel;
   var _useColor = useColors(),
     background = _useColor[THEME_COLORS.BACKGROUND],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
@@ -59327,6 +59512,10 @@ var Media = function Media(_ref) {
       resource: typeof (file === null || file === void 0 ? void 0 : file.url) === 'string' ? file.url.split(/[?#]/)[0] : null
     }));
     if (file !== null && file !== void 0 && file.id) {
+      var _startMediaVideoDownl2;
+      (_startMediaVideoDownl2 = startMediaVideoDownload(file)) === null || _startMediaVideoDownl2 === void 0 ? void 0 : _startMediaVideoDownl2["catch"](function (error) {
+        log.error('Failed to start media-tab video download:', error);
+      });
       dispatch(setAttachmentsForPopupAC([file]));
       setMediaFile(file);
       log.info('[MEDIA_IMAGE_SLIDER] slider state requested ' + JSON.stringify({
@@ -59379,17 +59568,12 @@ var Media = function Media(_ref) {
       month: 'long',
       year: 'numeric'
     })), /*#__PURE__*/React__default.createElement(ItemsGrid, null, group.items.map(function (file, index) {
-      return /*#__PURE__*/React__default.createElement(MediaItem, {
-        key: file.id || file.messageId + "_" + index
-      }, /*#__PURE__*/React__default.createElement(Attachment$1, {
-        attachment: _extends({}, file, {
-          metadata: isJSON(file.metadata) ? JSON.parse(file.metadata) : file.metadata
-        }),
-        handleMediaItemClick: handleMediaItemClick,
-        backgroundColor: background,
-        borderRadius: '8px',
-        isDetailsView: true
-      }));
+      return /*#__PURE__*/React__default.createElement(MediaTile, {
+        key: file.id || file.messageId + "_" + index,
+        file: file,
+        background: background,
+        onOpen: handleMediaItemClick
+      });
     })));
   }), loadingState === LOADING_STATE.LOADING && (/*#__PURE__*/React__default.createElement(SkeletonGrid, null, Array.from({
     length: 3

package/index.modern.js

@@ -16875,6 +16875,7 @@ var idleSnapshot = {
 var jobs = new Map();
 var snapshots = new Map();
 var listeners = new Map();
+var jobVersions = new Map();
 var notify = function notify(key) {
   var _listeners$get;
   (_listeners$get = listeners.get(key)) === null || _listeners$get === void 0 ? void 0 : _listeners$get.forEach(function (listener) {
@@ -16887,6 +16888,10 @@ var setSnapshot = function setSnapshot(key, snapshot) {
   if (job) job.snapshot = snapshot;
   notify(key);
 };
+var setJobSnapshot = function setJobSnapshot(key, job, snapshot) {
+  if (jobVersions.get(key) !== job.version) return;
+  setSnapshot(key, snapshot);
+};
 var normalizeProgress = function normalizeProgress(progress, fallbackTotal) {
   var _ref, _progress$loaded, _progress$total;
   if (fallbackTotal === void 0) {
@@ -16966,7 +16971,7 @@ var download = function download(request, job) {
         return;
       }
       var normalized = normalizeProgress(progress, request.size);
-      setSnapshot(request.key, _extends({
+      setJobSnapshot(request.key, job, _extends({
         state: 'loading'
       }, normalized));
     };
@@ -17059,6 +17064,7 @@ var requestMediaDownload = function requestMediaDownload(request) {
     return active.promise;
   }
   var job = {
+    version: (jobVersions.get(request.key) || 0) + 1,
     snapshot: {
       state: 'loading',
       loaded: 0,
@@ -17068,8 +17074,9 @@ var requestMediaDownload = function requestMediaDownload(request) {
     promise: undefined,
     cacheKeys: new Set([request.cacheKey].concat(request.cacheKeys || []))
   };
+  jobVersions.set(request.key, job.version);
   jobs.set(request.key, job);
-  setSnapshot(request.key, job.snapshot);
+  setJobSnapshot(request.key, job, job.snapshot);
   var promise = Promise.resolve().then(function () {
     try {
       var _temp5 = function _temp5(cachedResult) {
@@ -17085,7 +17092,8 @@ var requestMediaDownload = function requestMediaDownload(request) {
       return Promise.reject(e);
     }
   }).then(function (result) {
-    setSnapshot(request.key, {
+    throwIfCancelled(job);
+    setJobSnapshot(request.key, job, {
       state: 'completed',
       loaded: result.blob.size,
       total: result.blob.size,
@@ -17093,8 +17101,8 @@ var requestMediaDownload = function requestMediaDownload(request) {
     });
     return result;
   })["catch"](function (error) {
-    var cancelled = (error === null || error === void 0 ? void 0 : error.name) === 'AbortError';
-    setSnapshot(request.key, {
+    var cancelled = job.cancelled || (error === null || error === void 0 ? void 0 : error.name) === 'AbortError';
+    setJobSnapshot(request.key, job, {
       state: cancelled ? 'cancelled' : 'failed',
       loaded: 0,
       total: 0,
@@ -17102,7 +17110,9 @@ var requestMediaDownload = function requestMediaDownload(request) {
     });
     throw error;
   })["finally"](function () {
-    jobs["delete"](request.key);
+    if (jobs.get(request.key) === job) {
+      jobs["delete"](request.key);
+    }
   });
   job.promise = promise;
   return promise;
@@ -17112,6 +17122,13 @@ var cancelMediaDownload = function cancelMediaDownload(key) {
   var job = jobs.get(key);
   if (!job) return;
   job.cancelled = true;
+  jobs["delete"](key);
+  setSnapshot(key, {
+    state: 'cancelled',
+    loaded: 0,
+    total: 0,
+    progress: 0
+  });
   if (job.abortController) job.abortController.abort();
   if (job.customRequest) (_getCustomUploader = getCustomUploader()) === null || _getCustomUploader === void 0 ? void 0 : _getCustomUploader.cancelRequest(job.customRequest);
 };
@@ -39623,6 +39640,9 @@ var VideoIcon = styled.div(_templateObject0$6 || (_templateObject0$6 = _taggedTe
 });
 
 var _templateObject$t, _templateObject2$q, _templateObject3$m, _templateObject4$j, _templateObject5$g, _templateObject6$c, _templateObject7$b, _templateObject8$9, _templateObject9$8, _templateObject0$7, _templateObject1$6, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$3, _templateObject14$3, _templateObject15$2;
+var isMediaDownloadCancellation = function isMediaDownloadCancellation(error) {
+  return (error === null || error === void 0 ? void 0 : error.name) === 'AbortError' || (error === null || error === void 0 ? void 0 : error.name) === 'DOWNLOAD_CANCELLED' || (error === null || error === void 0 ? void 0 : error.message) === 'DOWNLOAD_CANCELLED';
+};
 var Attachment = function Attachment(_ref) {
   var attachment = _ref.attachment,
     _ref$isPreview = _ref.isPreview,
@@ -39718,9 +39738,15 @@ var Attachment = function Attachment(_ref) {
     imageDownloadRetry = _useState0[0],
     setImageDownloadRetry = _useState0[1];
   var _useState1 = useState(false),
-    isOriginalVideoRestarting = _useState1[0],
-    setIsOriginalVideoRestarting = _useState1[1];
+    isOriginalImageRestarting = _useState1[0],
+    setIsOriginalImageRestarting = _useState1[1];
+  var _useState10 = useState(false),
+    isOriginalVideoRestarting = _useState10[0],
+    setIsOriginalVideoRestarting = _useState10[1];
   var originalVideoDownloadStartedRef = useRef(false);
+  var videoDownloadRequestRef = useRef(0);
+  var imageDownloadRequestRef = useRef(0);
+  var imageResumeStartedRef = useRef(false);
   var fileNameRef = useRef(null);
   var customDownloader = getCustomDownloader();
   var previewFileType = isPreview && attachment.data.type.split('/')[0];
@@ -39752,15 +39778,23 @@ var Attachment = function Attachment(_ref) {
   var isPreparingVideo = attachmentCompilationState[attachment.tid] === UPLOAD_STATE.PREPARING;
   var isSharedOriginalVideoDownloading = sharedOriginalVideoDownload.state === 'loading';
   var isSharedOriginalVideoCancelled = sharedOriginalVideoDownload.state === 'cancelled';
+  var shouldShowVideoDownloadRetry = !isSharedOriginalVideoDownloading && !isOriginalVideoRestarting && (isSharedOriginalVideoCancelled || !originalVideoDownloadKey && downloadIsCancelled);
   var isVideoDownloading = downloadingFile || isSharedOriginalVideoDownloading;
   var isVideoDownloadActive = isVideoDownloading || isOriginalVideoRestarting;
+  var shouldRenderVideoDownloadProgress = Boolean(!isRepliedMessage && !isPreview && (isInUploadingState || isVideoDownloadActive));
   var videoProgress = isSharedOriginalVideoDownloading ? sharedOriginalVideoDownload.progress || 3 : progress;
   var videoSizeProgress = isSharedOriginalVideoDownloading ? {
     loaded: sharedOriginalVideoDownload.loaded,
     total: sharedOriginalVideoDownload.total
   } : sizeProgress;
-  var isImageDownloading = downloadingFile || sharedOriginalImageDownload.state === 'loading';
+  useEffect(function () {
+    if (isSharedOriginalVideoDownloading && downloadIsCancelled) {
+      setDownloadIsCancelled(false);
+    }
+  }, [downloadIsCancelled, isSharedOriginalVideoDownloading]);
+  var isImageDownloading = downloadingFile || sharedOriginalImageDownload.state === 'loading' || isOriginalImageRestarting;
   var isSharedOriginalImageCancelled = sharedOriginalImageDownload.state === 'cancelled';
+  var shouldShowImageDownloadRetry = !isOriginalImageRestarting && (isSharedOriginalImageCancelled || downloadIsCancelled && sharedOriginalImageDownload.state !== 'loading');
   var imageProgress = sharedOriginalImageDownload.state === 'loading' ? sharedOriginalImageDownload.progress || 3 : progress;
   var imageSizeProgress = sharedOriginalImageDownload.state === 'loading' ? {
     loaded: sharedOriginalImageDownload.loaded,
@@ -40107,6 +40141,9 @@ var Attachment = function Attachment(_ref) {
     if (attachment.type !== attachmentTypes.video) {
       return;
     }
+    if (isSharedOriginalVideoCancelled) {
+      return;
+    }
     var _getVideoAttachmentCa = getVideoAttachmentCacheKeys(attachment.url, attachment.metadata),
       videoThumb = _getVideoAttachmentCa.videoThumb,
       originalVideoCacheKey = _getVideoAttachmentCa.originalVideo;
@@ -40121,11 +40158,12 @@ var Attachment = function Attachment(_ref) {
       return;
     }
     var cancelled = false;
+    var videoDownloadRequest = videoDownloadRequestRef.current;
     var loadVideoThumbAndOriginal = function loadVideoThumbAndOriginal() {
       try {
         var _temp18 = function _temp18(_result2) {
           if (_exit) return _result2;
-          if (isDetailsView) return;
+          if (isDetailsView && videoDownloadRetry === 0) return;
           return Promise.resolve(getAttachmentUrlFromCache(originalVideoCacheKey)["catch"](function () {
             return false;
           })).then(function (cachedOriginalVideo) {
@@ -40149,15 +40187,16 @@ var Attachment = function Attachment(_ref) {
               size: Number(attachment.size) || 0
             }).then(function (_ref4) {
               var objectUrl = _ref4.objectUrl;
-              if (cancelled) return;
+              if (cancelled || videoDownloadRequest !== videoDownloadRequestRef.current) return;
               dispatch(setUpdateMessageAttachmentAC(originalVideoCacheKey, objectUrl));
               setAttachmentUrl(objectUrl);
               setIsCached(true);
               setDownloadIsCancelled(false);
               setIsOriginalVideoRestarting(false);
             })["catch"](function (error) {
+              if (videoDownloadRequest !== videoDownloadRequestRef.current) return;
               setIsOriginalVideoRestarting(false);
-              if (!cancelled) log.error('Error downloading video attachment:', error);
+              if (!cancelled && !isMediaDownloadCancellation(error)) log.error('Error downloading video attachment:', error);
             });
           });
         };
@@ -40186,39 +40225,107 @@ var Attachment = function Attachment(_ref) {
     return function () {
       cancelled = true;
     };
-  }, [attachment.id, attachment.type, attachment.url, attachment.metadata, attachment.attachmentUrl, isDetailsView, originalVideoUrlFromMap, connectionStatus, dispatch, messageType, attachment.size, videoDownloadRetry]);
+  }, [attachment.id, attachment.type, attachment.url, attachment.metadata, attachment.attachmentUrl, isDetailsView, originalVideoUrlFromMap, connectionStatus, dispatch, messageType, attachment.size, videoDownloadRetry, isSharedOriginalVideoCancelled]);
   var handleResumeOriginalVideoDownload = function handleResumeOriginalVideoDownload(event) {
     event.stopPropagation();
+    if (!attachment.url) return;
+    var _getVideoAttachmentCa2 = getVideoAttachmentCacheKeys(attachment.url, attachment.metadata),
+      originalVideoCacheKey = _getVideoAttachmentCa2.originalVideo;
+    var videoDownloadRequest = videoDownloadRequestRef.current + 1;
+    videoDownloadRequestRef.current = videoDownloadRequest;
     originalVideoDownloadStartedRef.current = false;
     setDownloadIsCancelled(false);
     setIsOriginalVideoRestarting(true);
     setVideoDownloadRetry(function (retry) {
       return retry + 1;
     });
+    originalVideoDownloadStartedRef.current = true;
+    requestMediaDownload({
+      key: "original-video:" + attachment.url,
+      url: attachment.url,
+      cacheKey: originalVideoCacheKey,
+      kind: 'original-video',
+      messageType: messageType,
+      size: Number(attachment.size) || 0
+    }).then(function (_ref5) {
+      var objectUrl = _ref5.objectUrl;
+      if (videoDownloadRequest !== videoDownloadRequestRef.current) return;
+      dispatch(setUpdateMessageAttachmentAC(originalVideoCacheKey, objectUrl));
+      setAttachmentUrl(objectUrl);
+      setIsCached(true);
+      setDownloadIsCancelled(false);
+      setIsOriginalVideoRestarting(false);
+    })["catch"](function (error) {
+      if (videoDownloadRequest !== videoDownloadRequestRef.current) return;
+      setIsOriginalVideoRestarting(false);
+      if (!isMediaDownloadCancellation(error)) log.error('Error restarting video attachment download:', error);
+    });
   };
   var handleResumeOriginalImageDownload = function handleResumeOriginalImageDownload(event) {
     event.stopPropagation();
+    if (!attachment.url) return;
+    var imageDownloadRequest = imageDownloadRequestRef.current + 1;
+    imageDownloadRequestRef.current = imageDownloadRequest;
+    imageResumeStartedRef.current = true;
     setDownloadIsCancelled(false);
+    setIsOriginalImageRestarting(true);
     setImageDownloadRetry(function (retry) {
       return retry + 1;
     });
+    requestMediaDownload({
+      key: "original-image:" + attachment.url,
+      url: attachment.url,
+      cacheKey: attachment.url,
+      cacheKeys: [attachment.url + '_original_image_url'],
+      kind: 'original-image',
+      messageType: messageType,
+      size: Number(attachment.size) || 0
+    }).then(function (_ref6) {
+      var objectUrl = _ref6.objectUrl;
+      try {
+        if (imageDownloadRequest !== imageDownloadRequestRef.current) return Promise.resolve();
+        return Promise.resolve(compressAndCacheImage(objectUrl, attachment.url, renderWidth, renderHeight)).then(function (compressedUrl) {
+          if (imageDownloadRequest !== imageDownloadRequestRef.current) return;
+          var displayedUrl = compressedUrl || objectUrl;
+          setAttachmentUrl(displayedUrl);
+          dispatch(setUpdateMessageAttachmentAC(attachment.url, displayedUrl));
+          dispatch(setUpdateMessageAttachmentAC(attachment.url + '_original_image_url', objectUrl));
+          setIsCached(true);
+          setDownloadIsCancelled(false);
+          setIsOriginalImageRestarting(false);
+          imageResumeStartedRef.current = false;
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    })["catch"](function (error) {
+      if (imageDownloadRequest !== imageDownloadRequestRef.current) return;
+      imageResumeStartedRef.current = false;
+      setIsOriginalImageRestarting(false);
+      log.error('Error restarting image attachment download:', error);
+    });
   };
   var handleCancelOriginalVideoDownload = function handleCancelOriginalVideoDownload(event) {
     event.stopPropagation();
     if (isSharedOriginalVideoDownloading && originalVideoDownloadKey) {
-      cancelMediaDownload(originalVideoDownloadKey);
-      originalVideoDownloadStartedRef.current = false;
+      videoDownloadRequestRef.current += 1;
       setDownloadIsCancelled(true);
       setIsOriginalVideoRestarting(false);
+      cancelMediaDownload(originalVideoDownloadKey);
+      originalVideoDownloadStartedRef.current = false;
       return;
     }
     handleStopStartDownloadFile();
   };
   useEffect(function () {
+    if (imageResumeStartedRef.current) return;
+    if (isSharedOriginalImageCancelled) return;
     if (!attachment.attachmentUrl && connectionStatus === CONNECTION_STATUS.CONNECTED && attachment.id && !attachmentUrlFromMap && attachment.type !== attachmentTypes.video && !(attachment.type === attachmentTypes.file || attachment.type === attachmentTypes.link)) {
       var requestAttachmentKey = attachmentKey;
+      var imageDownloadRequest = imageDownloadRequestRef.current;
       getAttachmentUrlFromCache(attachment.url).then(function (cachedUrl) {
         try {
+          if (imageDownloadRequest !== imageDownloadRequestRef.current) return Promise.resolve();
           if (attachment.type === attachmentTypes.image && !isPreview) {
             if (cachedUrl) {
               setAttachmentUrl(cachedUrl);
@@ -40234,23 +40341,27 @@ var Attachment = function Attachment(_ref) {
                 kind: 'original-image',
                 messageType: messageType,
                 size: Number(attachment.size) || 0
-              }).then(function (_ref5) {
-                var objectUrl = _ref5.objectUrl;
+              }).then(function (_ref7) {
+                var objectUrl = _ref7.objectUrl;
                 try {
-                  if (requestAttachmentKey !== currentAttachmentKeyRef.current) return Promise.resolve();
+                  if (requestAttachmentKey !== currentAttachmentKeyRef.current || imageDownloadRequest !== imageDownloadRequestRef.current) return Promise.resolve();
                   return Promise.resolve(compressAndCacheImage(objectUrl, attachment.url, renderWidth, renderHeight)).then(function (compressedUrl) {
-                    if (requestAttachmentKey !== currentAttachmentKeyRef.current) return;
+                    if (requestAttachmentKey !== currentAttachmentKeyRef.current || imageDownloadRequest !== imageDownloadRequestRef.current) return;
                     var displayedUrl = compressedUrl || objectUrl;
                     setAttachmentUrl(displayedUrl);
                     dispatch(setUpdateMessageAttachmentAC(attachment.url, displayedUrl));
                     dispatch(setUpdateMessageAttachmentAC(attachment.url + '_original_image_url', objectUrl));
                     setIsCached(true);
+                    setIsOriginalImageRestarting(false);
                   });
                 } catch (e) {
                   return Promise.reject(e);
                 }
               })["catch"](function (error) {
-                if (requestAttachmentKey === currentAttachmentKeyRef.current) {
+                if (imageDownloadRequest === imageDownloadRequestRef.current) {
+                  setIsOriginalImageRestarting(false);
+                }
+                if (requestAttachmentKey === currentAttachmentKeyRef.current && imageDownloadRequest === imageDownloadRequestRef.current) {
                   log.error('Error downloading image attachment:', error);
                 }
               });
@@ -40269,8 +40380,8 @@ var Attachment = function Attachment(_ref) {
                 kind: kind,
                 messageType: messageType,
                 size: Number(attachment.size) || 0
-              }).then(function (_ref6) {
-                var objectUrl = _ref6.objectUrl;
+              }).then(function (_ref8) {
+                var objectUrl = _ref8.objectUrl;
                 if (requestAttachmentKey !== currentAttachmentKeyRef.current) return;
                 setAttachmentUrl(objectUrl);
                 dispatch(setUpdateMessageAttachmentAC(attachment.url, objectUrl));
@@ -40330,7 +40441,7 @@ var Attachment = function Attachment(_ref) {
         }
       });
     }
-  }, [imageDownloadRetry]);
+  }, [imageDownloadRetry, isSharedOriginalImageCancelled]);
   useDidUpdate(function () {
     if (connectionStatus === CONNECTION_STATUS.CONNECTED && isInUploadingState) {
       setFailTimeout(setTimeout(function () {
@@ -40402,7 +40513,7 @@ var Attachment = function Attachment(_ref) {
   })), attachment.type === attachmentTypes.image ? (/*#__PURE__*/React__default.createElement(AttachmentImgCont, {
     draggable: false,
     onClick: function onClick() {
-      return handleMediaItemClick && !isInUploadingState && !isSharedOriginalImageCancelled && handleMediaItemClick(attachment);
+      return handleMediaItemClick && !isInUploadingState && !isImageDownloading && !shouldShowImageDownloadRetry && handleMediaItemClick(attachment);
     },
     isPreview: isPreview,
     ref: imageContRef,
@@ -40463,15 +40574,18 @@ var Attachment = function Attachment(_ref) {
   }, isInUploadingState ? (/*#__PURE__*/React__default.createElement(CancelResumeWrapper, {
     onClick: handlePauseResumeUpload
   }, attachmentCompilationState[attachment.tid] === UPLOAD_STATE.UPLOADING ? (/*#__PURE__*/React__default.createElement(SvgCancel, null)) : (/*#__PURE__*/React__default.createElement(SvgUpload, null)))) : !isCached && (/*#__PURE__*/React__default.createElement(CancelResumeWrapper, {
+    "aria-label": 'Cancel image download',
     onClick: function onClick(e) {
       e.stopPropagation();
       if (sharedOriginalImageDownload.state === 'loading' && originalImageDownloadKey) {
+        setDownloadIsCancelled(true);
+        setIsOriginalImageRestarting(false);
         cancelMediaDownload(originalImageDownloadKey);
       } else {
         handlePauseResumeDownload(e.nativeEvent);
       }
     }
-  }, downloadIsCancelled ? /*#__PURE__*/React__default.createElement(SvgDownload, null) : /*#__PURE__*/React__default.createElement(SvgCancel, null))), (isImageDownloading || attachmentCompilationState[attachment.tid] === UPLOAD_STATE.UPLOADING) && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ProgressWrapper, null, /*#__PURE__*/React__default.createElement(CircularProgressbar, {
+  }, shouldShowImageDownloadRetry ? /*#__PURE__*/React__default.createElement(SvgDownload, null) : /*#__PURE__*/React__default.createElement(SvgCancel, null))), (isImageDownloading || attachmentCompilationState[attachment.tid] === UPLOAD_STATE.UPLOADING) && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ProgressWrapper, null, /*#__PURE__*/React__default.createElement(CircularProgressbar, {
     minValue: 0,
     maxValue: 100,
     value: imageProgress,
@@ -40493,7 +40607,7 @@ var Attachment = function Attachment(_ref) {
     }
   })), imageSizeProgress && (/*#__PURE__*/React__default.createElement(SizeProgress, {
     color: textOnPrimary
-  }, bytesToSize(imageSizeProgress.loaded, 1), " / ", bytesToSize(imageSizeProgress.total, 1))))))))) : null, isSharedOriginalImageCancelled && !isPreview && !isRepliedMessage && (/*#__PURE__*/React__default.createElement(UploadProgress, {
+  }, bytesToSize(imageSizeProgress.loaded, 1), " / ", bytesToSize(imageSizeProgress.total, 1))))))))) : null, shouldShowImageDownloadRetry && !isPreview && !isRepliedMessage && (/*#__PURE__*/React__default.createElement(UploadProgress, {
     backgroundImage: !attachmentUrlFromMap ? attachmentThumb : '',
     isRepliedMessage: isRepliedMessage,
     width: renderWidth,
@@ -40511,7 +40625,8 @@ var Attachment = function Attachment(_ref) {
     isDetailsView: isDetailsView,
     backgroundColor: overlayBackground2
   }, /*#__PURE__*/React__default.createElement(CancelResumeWrapper, {
-    onClick: handleResumeOriginalImageDownload
+    onClick: handleResumeOriginalImageDownload,
+    "aria-label": 'Download image'
   }, /*#__PURE__*/React__default.createElement(SvgDownload, null))))), isPreview && (/*#__PURE__*/React__default.createElement(RemoveChosenFile, {
     "$backgroundColor": background,
     color: iconInactive,
@@ -40520,10 +40635,10 @@ var Attachment = function Attachment(_ref) {
     }
   })))) : attachment.type === attachmentTypes.video ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, !isPreview ? (/*#__PURE__*/React__default.createElement(VideoCont, {
     onClick: function onClick() {
-      return handleMediaItemClick && !isVideoDownloadActive && !isSharedOriginalVideoCancelled && !isInUploadingState && (attachmentCompilationState[attachment.tid] ? attachmentCompilationState[attachment.tid] !== UPLOAD_STATE.FAIL || attachmentCompilationState[attachment.tid] !== UPLOAD_STATE.UPLOADING : true) && handleMediaItemClick(attachment);
+      return handleMediaItemClick && !isVideoDownloadActive && !shouldShowVideoDownloadRetry && !isInUploadingState && (attachmentCompilationState[attachment.tid] ? attachmentCompilationState[attachment.tid] !== UPLOAD_STATE.FAIL || attachmentCompilationState[attachment.tid] !== UPLOAD_STATE.UPLOADING : true) && handleMediaItemClick(attachment);
     },
     isDetailsView: isDetailsView
-  }, (isInUploadingState || isVideoDownloadActive) && !isRepliedMessage && !isPreview ? (/*#__PURE__*/React__default.createElement(UploadProgress, {
+  }, shouldRenderVideoDownloadProgress ? (/*#__PURE__*/React__default.createElement(UploadProgress, {
     isDetailsView: isDetailsView,
     isRepliedMessage: isRepliedMessage,
     withPrefix: downloadedVideoPreviewImage ? false : withPrefix,
@@ -40541,8 +40656,9 @@ var Attachment = function Attachment(_ref) {
   }, isInUploadingState ? (/*#__PURE__*/React__default.createElement(CancelResumeWrapper, {
     onClick: handlePauseResumeUpload
   }, attachmentCompilationState[attachment.tid] === UPLOAD_STATE.UPLOADING || isPreparingVideo ? (/*#__PURE__*/React__default.createElement(SvgCancel, null)) : (/*#__PURE__*/React__default.createElement(SvgUpload, null)))) : (/*#__PURE__*/React__default.createElement(CancelResumeWrapper, {
-    onClick: handleCancelOriginalVideoDownload
-  }, downloadIsCancelled ? /*#__PURE__*/React__default.createElement(SvgDownload, null) : /*#__PURE__*/React__default.createElement(SvgCancel, null))), (isPreparingVideo || attachmentCompilationState[attachment.tid] === UPLOAD_STATE.UPLOADING || isVideoDownloadActive && !downloadIsCancelled) && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ProgressWrapper, null, /*#__PURE__*/React__default.createElement(CircularProgressbar, {
+    onClick: handleCancelOriginalVideoDownload,
+    "aria-label": 'Cancel video download'
+  }, shouldShowVideoDownloadRetry ? /*#__PURE__*/React__default.createElement(SvgDownload, null) : /*#__PURE__*/React__default.createElement(SvgCancel, null))), (isPreparingVideo || attachmentCompilationState[attachment.tid] === UPLOAD_STATE.UPLOADING || isVideoDownloadActive && !downloadIsCancelled) && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ProgressWrapper, null, /*#__PURE__*/React__default.createElement(CircularProgressbar, {
     minValue: 0,
     maxValue: 100,
     value: isPreparingVideo ? 3 : videoProgress,
@@ -40564,7 +40680,7 @@ var Attachment = function Attachment(_ref) {
     }
   })), videoSizeProgress && !isRepliedMessage && (/*#__PURE__*/React__default.createElement(SizeProgress, {
     color: textOnPrimary
-  }, bytesToSize(isPreparingVideo ? 0 : videoSizeProgress.loaded, 1), " /", ' ', bytesToSize(videoSizeProgress.total, 1)))))))) : null, isSharedOriginalVideoCancelled && !isRepliedMessage && !isPreview && (/*#__PURE__*/React__default.createElement(UploadProgress, {
+  }, bytesToSize(isPreparingVideo ? 0 : videoSizeProgress.loaded, 1), " /", ' ', bytesToSize(videoSizeProgress.total, 1)))))))) : null, shouldShowVideoDownloadRetry && !isRepliedMessage && !isPreview && (/*#__PURE__*/React__default.createElement(UploadProgress, {
     isDetailsView: isDetailsView,
     isRepliedMessage: isRepliedMessage,
     withPrefix: downloadedVideoPreviewImage ? false : withPrefix,
@@ -40580,12 +40696,13 @@ var Attachment = function Attachment(_ref) {
     isDetailsView: isDetailsView,
     backgroundColor: overlayBackground2
   }, /*#__PURE__*/React__default.createElement(CancelResumeWrapper, {
-    onClick: handleResumeOriginalVideoDownload
+    onClick: handleResumeOriginalVideoDownload,
+    "aria-label": 'Download video'
   }, /*#__PURE__*/React__default.createElement(SvgDownload, null))))), /*#__PURE__*/React__default.createElement(VideoPreview, {
     onlyVideoImage: onlyVideoImage,
     width: isRepliedMessage ? '40px' : isDetailsView ? '100%' : (renderWidth || videoAttachmentMaxWidth || 420) + "px",
     height: isRepliedMessage ? '40px' : isDetailsView ? '100%' : (renderHeight || videoAttachmentMaxHeight || 240) + "px",
-    downloading: isVideoDownloadActive || isSharedOriginalVideoCancelled,
+    downloading: isVideoDownloadActive || shouldShowVideoDownloadRetry,
     file: attachment,
     messageType: messageType,
     src: attachmentUrlFromMap || attachment.attachmentUrl || attachmentUrl,
@@ -40826,7 +40943,7 @@ var AttachmentImg = styled.img(_templateObject13$3 || (_templateObject13$3 = _ta
 }, function (props) {
   return props.$fadeIn && css(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n      opacity: 0;\n      animation: ", " 100ms ease-in-out forwards;\n    "])), mediaCrossFade);
 });
-var VideoCont = styled.div(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  cursor: pointer;\n  height: ", ";\n"])), function (props) {
+var VideoCont = styled.div(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  cursor: pointer;\n  width: 100%;\n  height: ", ";\n"])), function (props) {
   return props.isDetailsView && '100%';
 });
 
@@ -59287,8 +59404,76 @@ var DisappearingMessagesStatus = styled.span(_templateObject19$4 || (_templateOb
 var ChevronRightIconWrapper$1 = styled.span(_templateObject20$4 || (_templateObject20$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  & > svg {\n    width: 16px;\n    height: 16px;\n    transform: rotate(-90deg);\n  }\n"])));
 
 var _templateObject$11, _templateObject2$Z, _templateObject3$P, _templateObject4$H, _templateObject5$D, _templateObject6$y, _templateObject7$v, _templateObject8$s, _templateObject9$n, _templateObject0$l;
-var Media = function Media(_ref) {
-  var channel = _ref.channel;
+var startMediaVideoDownload = function startMediaVideoDownload(file) {
+  if (file.type !== 'video' || !file.url) return;
+  var _getVideoAttachmentCa = getVideoAttachmentCacheKeys(file.url, file.metadata),
+    originalVideo = _getVideoAttachmentCa.originalVideo;
+  return requestMediaDownload({
+    key: "original-video:" + file.url,
+    url: file.url,
+    cacheKey: originalVideo,
+    kind: 'original-video',
+    size: Number(file.size) || 0
+  });
+};
+var MediaTile = function MediaTile(_ref) {
+  var file = _ref.file,
+    background = _ref.background,
+    onOpen = _ref.onOpen;
+  var elementRef = useRef(null);
+  var downloadStartedRef = useRef(false);
+  var dispatch = useDispatch();
+  useEffect(function () {
+    if (file.type !== 'video' || !file.url || downloadStartedRef.current) return;
+    var startDownload = function startDownload() {
+      var _startMediaVideoDownl;
+      if (downloadStartedRef.current) return;
+      if (getMediaDownloadSnapshot("original-video:" + file.url).state === 'cancelled') return;
+      downloadStartedRef.current = true;
+      var _getVideoAttachmentCa2 = getVideoAttachmentCacheKeys(file.url, file.metadata),
+        originalVideo = _getVideoAttachmentCa2.originalVideo;
+      (_startMediaVideoDownl = startMediaVideoDownload(file)) === null || _startMediaVideoDownl === void 0 ? void 0 : _startMediaVideoDownl.then(function (_ref2) {
+        var objectUrl = _ref2.objectUrl;
+        dispatch(setUpdateMessageAttachmentAC(originalVideo, objectUrl));
+      })["catch"](function (error) {
+        log.error('Failed to start media-tab video download:', error);
+      });
+    };
+    var element = elementRef.current;
+    if (!element) return;
+    if (typeof IntersectionObserver === 'undefined') {
+      startDownload();
+      return;
+    }
+    var observer = new IntersectionObserver(function (entries) {
+      if (entries.some(function (entry) {
+        return entry.isIntersecting;
+      })) {
+        startDownload();
+        observer.disconnect();
+      }
+    }, {
+      rootMargin: '200px 0px'
+    });
+    observer.observe(element);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [dispatch, file.id, file.type, file.url, file.metadata, file.size]);
+  return /*#__PURE__*/React__default.createElement(MediaItem, {
+    ref: elementRef
+  }, /*#__PURE__*/React__default.createElement(Attachment$1, {
+    attachment: _extends({}, file, {
+      metadata: isJSON(file.metadata) ? JSON.parse(file.metadata) : file.metadata
+    }),
+    handleMediaItemClick: onOpen,
+    backgroundColor: background,
+    borderRadius: '8px',
+    isDetailsView: true
+  }));
+};
+var Media = function Media(_ref3) {
+  var channel = _ref3.channel;
   var _useColor = useColors(),
     background = _useColor[THEME_COLORS.BACKGROUND],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
@@ -59307,6 +59492,10 @@ var Media = function Media(_ref) {
       resource: typeof (file === null || file === void 0 ? void 0 : file.url) === 'string' ? file.url.split(/[?#]/)[0] : null
     }));
     if (file !== null && file !== void 0 && file.id) {
+      var _startMediaVideoDownl2;
+      (_startMediaVideoDownl2 = startMediaVideoDownload(file)) === null || _startMediaVideoDownl2 === void 0 ? void 0 : _startMediaVideoDownl2["catch"](function (error) {
+        log.error('Failed to start media-tab video download:', error);
+      });
       dispatch(setAttachmentsForPopupAC([file]));
       setMediaFile(file);
       log.info('[MEDIA_IMAGE_SLIDER] slider state requested ' + JSON.stringify({
@@ -59359,17 +59548,12 @@ var Media = function Media(_ref) {
       month: 'long',
       year: 'numeric'
     })), /*#__PURE__*/React__default.createElement(ItemsGrid, null, group.items.map(function (file, index) {
-      return /*#__PURE__*/React__default.createElement(MediaItem, {
-        key: file.id || file.messageId + "_" + index
-      }, /*#__PURE__*/React__default.createElement(Attachment$1, {
-        attachment: _extends({}, file, {
-          metadata: isJSON(file.metadata) ? JSON.parse(file.metadata) : file.metadata
-        }),
-        handleMediaItemClick: handleMediaItemClick,
-        backgroundColor: background,
-        borderRadius: '8px',
-        isDetailsView: true
-      }));
+      return /*#__PURE__*/React__default.createElement(MediaTile, {
+        key: file.id || file.messageId + "_" + index,
+        file: file,
+        background: background,
+        onOpen: handleMediaItemClick
+      });
     })));
   }), loadingState === LOADING_STATE.LOADING && (/*#__PURE__*/React__default.createElement(SkeletonGrid, null, Array.from({
     length: 3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sceyt-chat-react-uikit",
-  "version": "1.9.0-beta.7",
+  "version": "1.9.0-beta.8",
   "description": "Interactive React UI Components for Sceyt Chat.",
   "author": "Sceyt",
   "license": "MIT",