sceyt-chat-react-uikit 1.9.2-beta.1 → 1.9.2-beta.3

package/components/ChatContainer/index.d.ts

@@ -19,7 +19,20 @@ export interface IUploadTask {
 }
 export interface ICustomUploader {
     upload: (attachment: IAttachment, uploadTask: IUploadTask, messageType: string | null | undefined) => void;
-    download: (uri: string, download: boolean, progressCallback: (progress: any) => void, messageType: string | null | undefined) => Promise<any>;
+    /**
+     * `messageId` is the ID of a message the attachment appears in, supplied by
+     * the client. Treat it as a hint, not proof of access:
+     * - Media previews (images, videos, voice, video thumbnails) are shared and
+     *   cached by `uri`. When several messages use the same file (e.g. forwards),
+     *   only the first request's ID is sent, and its failure is shared too.
+     * - A file already in the browser's attachment cache is served without
+     *   calling `download`; that cache is per origin, not per user.
+     * - It may be empty (`''`) or missing for messages that are not confirmed yet.
+     * The backend must verify that the caller can read the message and that
+     * `uri` legitimately belongs to it (e.g. traced to its original upload),
+     * before serving the file.
+     */
+    download: (uri: string, download: boolean, progressCallback: (progress: any) => void, messageType: string | null | undefined, messageId?: string | null) => Promise<any>;
     cancelRequest: (requestPromise: any) => void;
 }
 export declare type ThemeColors = 'accent' | 'avatarBrand1' | 'avatarBrand2' | 'avatarBrand3' | 'avatarBrand4' | 'textPrimary' | 'textSecondary' | 'textFootnote' | 'textOnPrimary' | 'border' | 'iconInactive' | 'iconPrimary' | 'background' | 'backgroundSections' | 'backgroundFocused' | 'backgroundHovered' | 'overlayBackground' | 'overlayBackground2' | 'surface1' | 'surface2' | 'surfaceX' | 'warning' | 'attention' | 'onlineStatus' | 'success' | 'outgoingMessageBackground' | 'outgoingMessageBackgroundX' | 'incomingMessageBackground' | 'incomingMessageBackgroundX' | 'linkColor' | 'highlightedBackground';

package/index.js

@@ -11381,7 +11381,7 @@ var downloadFile = function downloadFile(attachment, download, done, progressCal
             if (progressCallback) {
               progressCallback(progress);
             }
-          }, messageType);
+          }, messageType, attachment.messageId);
           filesPromisesOnDownload[attachment.id] = urlPromise;
           return Promise.resolve(urlPromise).then(function (result) {
             FileSaver.saveAs(result.Body, attachment.name);
@@ -17754,7 +17754,7 @@ var download = function download(request, job) {
       if (customDownloader) {
         var _request$customDownlo;
         var requestBlob = (_request$customDownlo = request.customDownload) != null ? _request$customDownlo : true;
-        var customRequest = customDownloader(request.url, requestBlob, reportProgress, request.messageType);
+        var customRequest = customDownloader(request.url, requestBlob, reportProgress, request.messageType, request.messageId);
         job.customRequest = customRequest;
         return Promise.resolve(customRequest).then(function (result) {
           var body = (result === null || result === void 0 ? void 0 : result.Body) || result;
@@ -17953,7 +17953,7 @@ var getVideoAttachmentCacheKeys = function getVideoAttachmentCacheKeys(videoUrl,
     originalVideo: videoUrl + "_original_video_url"
   };
 };
-var downloadVideoThumb = function downloadVideoThumb(videoThumb, downloader, messageType) {
+var downloadVideoThumb = function downloadVideoThumb(videoThumb, downloader, messageType, messageId) {
   try {
     return Promise.resolve(getAttachmentUrlFromCache(videoThumb)["catch"](function () {
       return false;
@@ -17964,6 +17964,7 @@ var downloadVideoThumb = function downloadVideoThumb(videoThumb, downloader, mes
         cacheKey: videoThumb,
         kind: 'video-thumbnail',
         messageType: messageType,
+        messageId: messageId,
         downloader: downloader,
         customDownload: true,
         skipCacheLookup: true
@@ -42017,9 +42018,15 @@ var VideoPreview = /*#__PURE__*/React.memo(function VideoPreview(_ref) {
   var previousVideoSourceRef = React.useRef(undefined);
   React.useEffect(function () {
     if (!videoThumb || downloadedPreviewImage) return;
+    var customDownloader = getCustomDownloader();
+    var previewRequest = customDownloader && !file.messageId ? getAttachmentUrlFromCache(videoThumb)["catch"](function () {
+      return false;
+    }).then(function (cachedUrl) {
+      return typeof cachedUrl === 'string' ? cachedUrl : undefined;
+    }) : downloadVideoThumb(videoThumb, customDownloader, messageType, file.messageId);
     var cancelled = false;
-    downloadVideoThumb(videoThumb, getCustomDownloader(), messageType).then(function (localPreviewUrl) {
-      if (!cancelled) {
+    previewRequest.then(function (localPreviewUrl) {
+      if (!cancelled && localPreviewUrl) {
         dispatch(setUpdateMessageAttachmentAC(videoThumb, localPreviewUrl));
       }
     })["catch"](function (error) {
@@ -42028,7 +42035,7 @@ var VideoPreview = /*#__PURE__*/React.memo(function VideoPreview(_ref) {
     return function () {
       cancelled = true;
     };
-  }, [videoThumb, downloadedPreviewImage, dispatch, messageType]);
+  }, [videoThumb, downloadedPreviewImage, dispatch, messageType, file.messageId]);
   React.useEffect(function () {
     var videoSource = src;
     var canExtractFirstFrame = shouldExtractVideoFirstFrame(file.metadata);
@@ -42173,7 +42180,7 @@ var VideoPreview = /*#__PURE__*/React.memo(function VideoPreview(_ref) {
     messageTimeBackgroundColor: overlayBackground2
   }, !isRepliedMessage && !isPreview && /*#__PURE__*/React__default.createElement(SvgVideoCall, null), videoCurrentTime))));
 }, function (prev, next) {
-  return prev.src === next.src && prev.file.id === next.file.id && prev.file.url === next.file.url && prev.file.metadata === next.file.metadata && prev.uploading === next.uploading && prev.downloading === next.downloading && prev.width === next.width && prev.height === next.height && prev.borderRadius === next.borderRadius && prev.isRepliedMessage === next.isRepliedMessage && prev.isDetailsView === next.isDetailsView;
+  return prev.src === next.src && prev.file.id === next.file.id && prev.file.messageId === next.file.messageId && prev.messageType === next.messageType && prev.file.url === next.file.url && prev.file.metadata === next.file.metadata && prev.uploading === next.uploading && prev.downloading === next.downloading && prev.width === next.width && prev.height === next.height && prev.borderRadius === next.borderRadius && prev.isRepliedMessage === next.isRepliedMessage && prev.isDetailsView === next.isDetailsView;
 });
 var VideoControls = styled__default.div(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 6;\n"])));
 var VideoTime = styled__default.div(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  left: ", ";\n  font-size: ", ";\n  display: flex;\n  align-items: center;\n  border-radius: 16px;\n  padding: ", ";\n  background-color: ", ";\n  line-height: 14px;\n  color: ", ";\n  z-index: 10;\n\n  & > svg {\n    color: ", ";\n    margin-right: 4px;\n  }\n"])), function (props) {
@@ -42455,17 +42462,7 @@ var Attachment = function Attachment(_ref) {
     if (downloadIsCancelled) {
       setDownloadIsCancelled(false);
       if (customDownloader) {
-        customDownloader(attachment.url, false, function (progress) {
-          var loadedRes = progress.loaded && progress.loaded / progress.total;
-          var uploadPercent = loadedRes && loadedRes * 100;
-          setSizeProgress({
-            loaded: progress.loaded || 0,
-            total: progress.total || 0
-          });
-          setProgress(uploadPercent);
-        }, messageType).then(function (url) {
-          downloadImage(url);
-        });
+        handleResumeOriginalImageDownload(e);
       } else {
         downloadImage(attachment.url);
       }
@@ -42555,7 +42552,7 @@ var Attachment = function Attachment(_ref) {
               total: progress.total || 0
             });
             setProgress(uploadPercent);
-          }, messageType);
+          }, messageType, attachment.messageId);
           setDownloadFilePromise(attachment.id, urlPromise);
           return Promise.resolve(urlPromise).then(function (result) {
             function _temp8(body) {
@@ -42802,6 +42799,7 @@ var Attachment = function Attachment(_ref) {
               cacheKey: originalVideoCacheKey,
               kind: 'original-video',
               messageType: messageType,
+              messageId: attachment.messageId,
               size: Number(attachment.size) || 0
             }).then(function (_ref4) {
               var objectUrl = _ref4.objectUrl;
@@ -42864,6 +42862,7 @@ var Attachment = function Attachment(_ref) {
       cacheKey: originalVideoCacheKey,
       kind: 'original-video',
       messageType: messageType,
+      messageId: attachment.messageId,
       size: Number(attachment.size) || 0
     }).then(function (_ref5) {
       var objectUrl = _ref5.objectUrl;
@@ -42897,6 +42896,7 @@ var Attachment = function Attachment(_ref) {
       cacheKeys: [attachment.url + '_original_image_url'],
       kind: 'original-image',
       messageType: messageType,
+      messageId: attachment.messageId,
       size: Number(attachment.size) || 0
     }).then(function (_ref6) {
       var objectUrl = _ref6.objectUrl;
@@ -42958,6 +42958,7 @@ var Attachment = function Attachment(_ref) {
                 cacheKeys: [attachment.url + '_original_image_url'],
                 kind: 'original-image',
                 messageType: messageType,
+                messageId: attachment.messageId,
                 size: Number(attachment.size) || 0
               }).then(function (_ref7) {
                 var objectUrl = _ref7.objectUrl;
@@ -42997,6 +42998,7 @@ var Attachment = function Attachment(_ref) {
                 cacheKey: attachment.url,
                 kind: kind,
                 messageType: messageType,
+                messageId: attachment.messageId,
                 size: Number(attachment.size) || 0
               }).then(function (_ref8) {
                 var objectUrl = _ref8.objectUrl;
@@ -43027,7 +43029,7 @@ var Attachment = function Attachment(_ref) {
               total: progress.total || 0
             });
             setProgress(uploadPercent);
-          }, messageType).then(function (url) {
+          }, messageType, attachment.messageId).then(function (url) {
             try {
               var _temp20 = function _temp20() {
                 setAttachmentUrl(downloadingUrl);
@@ -45138,6 +45140,7 @@ var SliderPopup = function SliderPopup(_ref) {
               cacheKey: attachmentKey,
               kind: kind,
               messageType: messageType,
+              messageId: currentFile === null || currentFile === void 0 ? void 0 : currentFile.messageId,
               size: Number(currentFileSize) || 0
             }).then(function (_ref3) {
               var objectUrl = _ref3.objectUrl;
@@ -62846,6 +62849,7 @@ var startMediaVideoDownload = function startMediaVideoDownload(file) {
     url: file.url,
     cacheKey: originalVideo,
     kind: 'original-video',
+    messageId: file.messageId,
     size: Number(file.size) || 0
   });
 };
@@ -63656,6 +63660,7 @@ var VoiceItem = function VoiceItem(_ref) {
         cacheKey: file.url,
         kind: 'voice',
         messageType: messageType,
+        messageId: file.messageId,
         size: Number(file.size) || 0
       });
     }).then(function (result) {

package/index.modern.js

@@ -11362,7 +11362,7 @@ var downloadFile = function downloadFile(attachment, download, done, progressCal
             if (progressCallback) {
               progressCallback(progress);
             }
-          }, messageType);
+          }, messageType, attachment.messageId);
           filesPromisesOnDownload[attachment.id] = urlPromise;
           return Promise.resolve(urlPromise).then(function (result) {
             FileSaver.saveAs(result.Body, attachment.name);
@@ -17735,7 +17735,7 @@ var download = function download(request, job) {
       if (customDownloader) {
         var _request$customDownlo;
         var requestBlob = (_request$customDownlo = request.customDownload) != null ? _request$customDownlo : true;
-        var customRequest = customDownloader(request.url, requestBlob, reportProgress, request.messageType);
+        var customRequest = customDownloader(request.url, requestBlob, reportProgress, request.messageType, request.messageId);
         job.customRequest = customRequest;
         return Promise.resolve(customRequest).then(function (result) {
           var body = (result === null || result === void 0 ? void 0 : result.Body) || result;
@@ -17934,7 +17934,7 @@ var getVideoAttachmentCacheKeys = function getVideoAttachmentCacheKeys(videoUrl,
     originalVideo: videoUrl + "_original_video_url"
   };
 };
-var downloadVideoThumb = function downloadVideoThumb(videoThumb, downloader, messageType) {
+var downloadVideoThumb = function downloadVideoThumb(videoThumb, downloader, messageType, messageId) {
   try {
     return Promise.resolve(getAttachmentUrlFromCache(videoThumb)["catch"](function () {
       return false;
@@ -17945,6 +17945,7 @@ var downloadVideoThumb = function downloadVideoThumb(videoThumb, downloader, mes
         cacheKey: videoThumb,
         kind: 'video-thumbnail',
         messageType: messageType,
+        messageId: messageId,
         downloader: downloader,
         customDownload: true,
         skipCacheLookup: true
@@ -41998,9 +41999,15 @@ var VideoPreview = /*#__PURE__*/memo(function VideoPreview(_ref) {
   var previousVideoSourceRef = useRef(undefined);
   useEffect(function () {
     if (!videoThumb || downloadedPreviewImage) return;
+    var customDownloader = getCustomDownloader();
+    var previewRequest = customDownloader && !file.messageId ? getAttachmentUrlFromCache(videoThumb)["catch"](function () {
+      return false;
+    }).then(function (cachedUrl) {
+      return typeof cachedUrl === 'string' ? cachedUrl : undefined;
+    }) : downloadVideoThumb(videoThumb, customDownloader, messageType, file.messageId);
     var cancelled = false;
-    downloadVideoThumb(videoThumb, getCustomDownloader(), messageType).then(function (localPreviewUrl) {
-      if (!cancelled) {
+    previewRequest.then(function (localPreviewUrl) {
+      if (!cancelled && localPreviewUrl) {
         dispatch(setUpdateMessageAttachmentAC(videoThumb, localPreviewUrl));
       }
     })["catch"](function (error) {
@@ -42009,7 +42016,7 @@ var VideoPreview = /*#__PURE__*/memo(function VideoPreview(_ref) {
     return function () {
       cancelled = true;
     };
-  }, [videoThumb, downloadedPreviewImage, dispatch, messageType]);
+  }, [videoThumb, downloadedPreviewImage, dispatch, messageType, file.messageId]);
   useEffect(function () {
     var videoSource = src;
     var canExtractFirstFrame = shouldExtractVideoFirstFrame(file.metadata);
@@ -42154,7 +42161,7 @@ var VideoPreview = /*#__PURE__*/memo(function VideoPreview(_ref) {
     messageTimeBackgroundColor: overlayBackground2
   }, !isRepliedMessage && !isPreview && /*#__PURE__*/React__default.createElement(SvgVideoCall, null), videoCurrentTime))));
 }, function (prev, next) {
-  return prev.src === next.src && prev.file.id === next.file.id && prev.file.url === next.file.url && prev.file.metadata === next.file.metadata && prev.uploading === next.uploading && prev.downloading === next.downloading && prev.width === next.width && prev.height === next.height && prev.borderRadius === next.borderRadius && prev.isRepliedMessage === next.isRepliedMessage && prev.isDetailsView === next.isDetailsView;
+  return prev.src === next.src && prev.file.id === next.file.id && prev.file.messageId === next.file.messageId && prev.messageType === next.messageType && prev.file.url === next.file.url && prev.file.metadata === next.file.metadata && prev.uploading === next.uploading && prev.downloading === next.downloading && prev.width === next.width && prev.height === next.height && prev.borderRadius === next.borderRadius && prev.isRepliedMessage === next.isRepliedMessage && prev.isDetailsView === next.isDetailsView;
 });
 var VideoControls = styled.div(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 6;\n"])));
 var VideoTime = styled.div(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  left: ", ";\n  font-size: ", ";\n  display: flex;\n  align-items: center;\n  border-radius: 16px;\n  padding: ", ";\n  background-color: ", ";\n  line-height: 14px;\n  color: ", ";\n  z-index: 10;\n\n  & > svg {\n    color: ", ";\n    margin-right: 4px;\n  }\n"])), function (props) {
@@ -42436,17 +42443,7 @@ var Attachment = function Attachment(_ref) {
     if (downloadIsCancelled) {
       setDownloadIsCancelled(false);
       if (customDownloader) {
-        customDownloader(attachment.url, false, function (progress) {
-          var loadedRes = progress.loaded && progress.loaded / progress.total;
-          var uploadPercent = loadedRes && loadedRes * 100;
-          setSizeProgress({
-            loaded: progress.loaded || 0,
-            total: progress.total || 0
-          });
-          setProgress(uploadPercent);
-        }, messageType).then(function (url) {
-          downloadImage(url);
-        });
+        handleResumeOriginalImageDownload(e);
       } else {
         downloadImage(attachment.url);
       }
@@ -42536,7 +42533,7 @@ var Attachment = function Attachment(_ref) {
               total: progress.total || 0
             });
             setProgress(uploadPercent);
-          }, messageType);
+          }, messageType, attachment.messageId);
           setDownloadFilePromise(attachment.id, urlPromise);
           return Promise.resolve(urlPromise).then(function (result) {
             function _temp8(body) {
@@ -42783,6 +42780,7 @@ var Attachment = function Attachment(_ref) {
               cacheKey: originalVideoCacheKey,
               kind: 'original-video',
               messageType: messageType,
+              messageId: attachment.messageId,
               size: Number(attachment.size) || 0
             }).then(function (_ref4) {
               var objectUrl = _ref4.objectUrl;
@@ -42845,6 +42843,7 @@ var Attachment = function Attachment(_ref) {
       cacheKey: originalVideoCacheKey,
       kind: 'original-video',
       messageType: messageType,
+      messageId: attachment.messageId,
       size: Number(attachment.size) || 0
     }).then(function (_ref5) {
       var objectUrl = _ref5.objectUrl;
@@ -42878,6 +42877,7 @@ var Attachment = function Attachment(_ref) {
       cacheKeys: [attachment.url + '_original_image_url'],
       kind: 'original-image',
       messageType: messageType,
+      messageId: attachment.messageId,
       size: Number(attachment.size) || 0
     }).then(function (_ref6) {
       var objectUrl = _ref6.objectUrl;
@@ -42939,6 +42939,7 @@ var Attachment = function Attachment(_ref) {
                 cacheKeys: [attachment.url + '_original_image_url'],
                 kind: 'original-image',
                 messageType: messageType,
+                messageId: attachment.messageId,
                 size: Number(attachment.size) || 0
               }).then(function (_ref7) {
                 var objectUrl = _ref7.objectUrl;
@@ -42978,6 +42979,7 @@ var Attachment = function Attachment(_ref) {
                 cacheKey: attachment.url,
                 kind: kind,
                 messageType: messageType,
+                messageId: attachment.messageId,
                 size: Number(attachment.size) || 0
               }).then(function (_ref8) {
                 var objectUrl = _ref8.objectUrl;
@@ -43008,7 +43010,7 @@ var Attachment = function Attachment(_ref) {
               total: progress.total || 0
             });
             setProgress(uploadPercent);
-          }, messageType).then(function (url) {
+          }, messageType, attachment.messageId).then(function (url) {
             try {
               var _temp20 = function _temp20() {
                 setAttachmentUrl(downloadingUrl);
@@ -45119,6 +45121,7 @@ var SliderPopup = function SliderPopup(_ref) {
               cacheKey: attachmentKey,
               kind: kind,
               messageType: messageType,
+              messageId: currentFile === null || currentFile === void 0 ? void 0 : currentFile.messageId,
               size: Number(currentFileSize) || 0
             }).then(function (_ref3) {
               var objectUrl = _ref3.objectUrl;
@@ -62827,6 +62830,7 @@ var startMediaVideoDownload = function startMediaVideoDownload(file) {
     url: file.url,
     cacheKey: originalVideo,
     kind: 'original-video',
+    messageId: file.messageId,
     size: Number(file.size) || 0
   });
 };
@@ -63637,6 +63641,7 @@ var VoiceItem = function VoiceItem(_ref) {
         cacheKey: file.url,
         kind: 'voice',
         messageType: messageType,
+        messageId: file.messageId,
         size: Number(file.size) || 0
       });
     }).then(function (result) {

package/package.json

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