sceyt-chat-react-uikit 1.9.2-beta.2 → 1.9.2-beta.4

package/components/ChatContainer/index.d.ts

@@ -19,6 +19,19 @@ export interface IUploadTask {
 }
 export interface ICustomUploader {
     upload: (attachment: IAttachment, uploadTask: IUploadTask, messageType: string | null | undefined) => void;
+    /**
+     * `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;
 }

package/index.js

@@ -42018,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, file.messageId).then(function (localPreviewUrl) {
-      if (!cancelled) {
+    previewRequest.then(function (localPreviewUrl) {
+      if (!cancelled && localPreviewUrl) {
         dispatch(setUpdateMessageAttachmentAC(videoThumb, localPreviewUrl));
       }
     })["catch"](function (error) {
@@ -42029,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);
@@ -42174,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) {
@@ -42347,18 +42353,22 @@ var Attachment = function Attachment(_ref) {
   var _useState8 = React.useState(false),
     downloadIsCancelled = _useState8[0],
     setDownloadIsCancelled = _useState8[1];
-  var _useState9 = React.useState(0),
-    videoDownloadRetry = _useState9[0],
-    setVideoDownloadRetry = _useState9[1];
+  var _useState9 = React.useState(false),
+    fileDownloadFailed = _useState9[0],
+    setFileDownloadFailed = _useState9[1];
+  var fileDownloadCancelledRef = React.useRef(false);
   var _useState0 = React.useState(0),
-    imageDownloadRetry = _useState0[0],
-    setImageDownloadRetry = _useState0[1];
-  var _useState1 = React.useState(false),
-    isOriginalImageRestarting = _useState1[0],
-    setIsOriginalImageRestarting = _useState1[1];
+    videoDownloadRetry = _useState0[0],
+    setVideoDownloadRetry = _useState0[1];
+  var _useState1 = React.useState(0),
+    imageDownloadRetry = _useState1[0],
+    setImageDownloadRetry = _useState1[1];
   var _useState10 = React.useState(false),
-    isOriginalVideoRestarting = _useState10[0],
-    setIsOriginalVideoRestarting = _useState10[1];
+    isOriginalImageRestarting = _useState10[0],
+    setIsOriginalImageRestarting = _useState10[1];
+  var _useState11 = React.useState(false),
+    isOriginalVideoRestarting = _useState11[0],
+    setIsOriginalVideoRestarting = _useState11[1];
   var originalVideoDownloadStartedRef = React.useRef(false);
   var videoDownloadRequestRef = React.useRef(0);
   var imageDownloadRequestRef = React.useRef(0);
@@ -42394,7 +42404,8 @@ 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 isSharedOriginalVideoFailed = sharedOriginalVideoDownload.state === 'failed';
+  var shouldShowVideoDownloadRetry = !isSharedOriginalVideoDownloading && !isOriginalVideoRestarting && (isSharedOriginalVideoCancelled || isSharedOriginalVideoFailed || !originalVideoDownloadKey && downloadIsCancelled);
   var isVideoDownloading = downloadingFile || isSharedOriginalVideoDownloading;
   var isVideoDownloadActive = isVideoDownloading || isOriginalVideoRestarting;
   var shouldRenderVideoDownloadProgress = Boolean(!isRepliedMessage && !isPreview && (isInUploadingState || isVideoDownloadActive));
@@ -42455,7 +42466,7 @@ var Attachment = function Attachment(_ref) {
     e.stopPropagation();
     if (downloadIsCancelled) {
       setDownloadIsCancelled(false);
-      if (getCustomUploader()) {
+      if (customDownloader) {
         handleResumeOriginalImageDownload(e);
       } else {
         downloadImage(attachment.url);
@@ -42484,9 +42495,10 @@ var Attachment = function Attachment(_ref) {
       closeMessageActions(enter);
     }
   };
-  var handleCompleteDownload = function handleCompleteDownload(attachmentId) {
+  var handleCompleteDownload = function handleCompleteDownload(attachmentId, failed) {
     if (attachmentId === attachment.id) {
       setDownloadingFile(false);
+      setFileDownloadFailed(!!failed && !fileDownloadCancelledRef.current);
     }
   };
   var handleStopStartDownloadFile = function handleStopStartDownloadFile(att) {
@@ -42500,6 +42512,7 @@ var Attachment = function Attachment(_ref) {
         }
       } else {
         setDownloadIsCancelled(true);
+        fileDownloadCancelledRef.current = true;
         var attachmentId = att ? att.id : attachment.id;
         cancelDownloadFile(attachmentId || '');
       }
@@ -42516,6 +42529,8 @@ var Attachment = function Attachment(_ref) {
   var handleDownloadFileToDevice = function handleDownloadFileToDevice(attachment) {
     setDownloadingFile(true);
     setDownloadIsCancelled(false);
+    setFileDownloadFailed(false);
+    fileDownloadCancelledRef.current = false;
     downloadFile(attachment, true, handleCompleteDownload, function (progress) {
       var loadedRes = progress.loaded && progress.loaded / progress.total;
       var uploadPercent = loadedRes && loadedRes * 100;
@@ -43396,6 +43411,9 @@ var Attachment = function Attachment(_ref) {
   })) : isPreview && attachment.attachmentUrl ? (/*#__PURE__*/React__default.createElement(FileThumbnail, {
     src: attachment.attachmentUrl || attachmentUrl
   })) : attachmentCompilationState[attachment.tid] !== UPLOAD_STATE.UPLOADING && attachmentCompilationState[attachment.tid] !== UPLOAD_STATE.PAUSED && (selectedFileAttachmentsIcon || /*#__PURE__*/React__default.createElement(SvgFileIcon, null)))), !isRepliedMessage && !isPreview && (/*#__PURE__*/React__default.createElement(DownloadFile$1, {
+    role: 'button',
+    "aria-label": fileDownloadFailed ? 'Download failed, retry' : 'Download file',
+    visible: fileDownloadFailed && !downloadingFile,
     widthThumb: !!attachmentThumb,
     backgroundColor: attachmentThumb ? overlayBackground2 : accentColor,
     onClick: function onClick() {
@@ -43491,7 +43509,9 @@ var FileThumbnailSkeleton = styled__default.div(_templateObject5$h || (_template
 }, function (props) {
   return props.color;
 }, fileThumbnailShimmer);
-var DownloadFile$1 = styled__default.span(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose(["\n  display: none;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  background-color: ", ";\n  min-width: 40px;\n  max-width: 40px;\n  height: 40px;\n  position: ", ";\n  border-radius: ", ";\n\n  & > svg {\n    width: 20px;\n    height: 20px;\n  }\n"])), function (props) {
+var DownloadFile$1 = styled__default.span(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose(["\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  background-color: ", ";\n  min-width: 40px;\n  max-width: 40px;\n  height: 40px;\n  position: ", ";\n  border-radius: ", ";\n\n  & > svg {\n    width: 20px;\n    height: 20px;\n  }\n"])), function (props) {
+  return props.visible ? 'flex' : 'none';
+}, function (props) {
   return props.backgroundColor;
 }, function (props) {
   return props.widthThumb && 'absolute';

package/index.modern.js

@@ -41999,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, file.messageId).then(function (localPreviewUrl) {
-      if (!cancelled) {
+    previewRequest.then(function (localPreviewUrl) {
+      if (!cancelled && localPreviewUrl) {
         dispatch(setUpdateMessageAttachmentAC(videoThumb, localPreviewUrl));
       }
     })["catch"](function (error) {
@@ -42010,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);
@@ -42155,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) {
@@ -42328,18 +42334,22 @@ var Attachment = function Attachment(_ref) {
   var _useState8 = useState(false),
     downloadIsCancelled = _useState8[0],
     setDownloadIsCancelled = _useState8[1];
-  var _useState9 = useState(0),
-    videoDownloadRetry = _useState9[0],
-    setVideoDownloadRetry = _useState9[1];
+  var _useState9 = useState(false),
+    fileDownloadFailed = _useState9[0],
+    setFileDownloadFailed = _useState9[1];
+  var fileDownloadCancelledRef = useRef(false);
   var _useState0 = useState(0),
-    imageDownloadRetry = _useState0[0],
-    setImageDownloadRetry = _useState0[1];
-  var _useState1 = useState(false),
-    isOriginalImageRestarting = _useState1[0],
-    setIsOriginalImageRestarting = _useState1[1];
+    videoDownloadRetry = _useState0[0],
+    setVideoDownloadRetry = _useState0[1];
+  var _useState1 = useState(0),
+    imageDownloadRetry = _useState1[0],
+    setImageDownloadRetry = _useState1[1];
   var _useState10 = useState(false),
-    isOriginalVideoRestarting = _useState10[0],
-    setIsOriginalVideoRestarting = _useState10[1];
+    isOriginalImageRestarting = _useState10[0],
+    setIsOriginalImageRestarting = _useState10[1];
+  var _useState11 = useState(false),
+    isOriginalVideoRestarting = _useState11[0],
+    setIsOriginalVideoRestarting = _useState11[1];
   var originalVideoDownloadStartedRef = useRef(false);
   var videoDownloadRequestRef = useRef(0);
   var imageDownloadRequestRef = useRef(0);
@@ -42375,7 +42385,8 @@ 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 isSharedOriginalVideoFailed = sharedOriginalVideoDownload.state === 'failed';
+  var shouldShowVideoDownloadRetry = !isSharedOriginalVideoDownloading && !isOriginalVideoRestarting && (isSharedOriginalVideoCancelled || isSharedOriginalVideoFailed || !originalVideoDownloadKey && downloadIsCancelled);
   var isVideoDownloading = downloadingFile || isSharedOriginalVideoDownloading;
   var isVideoDownloadActive = isVideoDownloading || isOriginalVideoRestarting;
   var shouldRenderVideoDownloadProgress = Boolean(!isRepliedMessage && !isPreview && (isInUploadingState || isVideoDownloadActive));
@@ -42436,7 +42447,7 @@ var Attachment = function Attachment(_ref) {
     e.stopPropagation();
     if (downloadIsCancelled) {
       setDownloadIsCancelled(false);
-      if (getCustomUploader()) {
+      if (customDownloader) {
         handleResumeOriginalImageDownload(e);
       } else {
         downloadImage(attachment.url);
@@ -42465,9 +42476,10 @@ var Attachment = function Attachment(_ref) {
       closeMessageActions(enter);
     }
   };
-  var handleCompleteDownload = function handleCompleteDownload(attachmentId) {
+  var handleCompleteDownload = function handleCompleteDownload(attachmentId, failed) {
     if (attachmentId === attachment.id) {
       setDownloadingFile(false);
+      setFileDownloadFailed(!!failed && !fileDownloadCancelledRef.current);
     }
   };
   var handleStopStartDownloadFile = function handleStopStartDownloadFile(att) {
@@ -42481,6 +42493,7 @@ var Attachment = function Attachment(_ref) {
         }
       } else {
         setDownloadIsCancelled(true);
+        fileDownloadCancelledRef.current = true;
         var attachmentId = att ? att.id : attachment.id;
         cancelDownloadFile(attachmentId || '');
       }
@@ -42497,6 +42510,8 @@ var Attachment = function Attachment(_ref) {
   var handleDownloadFileToDevice = function handleDownloadFileToDevice(attachment) {
     setDownloadingFile(true);
     setDownloadIsCancelled(false);
+    setFileDownloadFailed(false);
+    fileDownloadCancelledRef.current = false;
     downloadFile(attachment, true, handleCompleteDownload, function (progress) {
       var loadedRes = progress.loaded && progress.loaded / progress.total;
       var uploadPercent = loadedRes && loadedRes * 100;
@@ -43377,6 +43392,9 @@ var Attachment = function Attachment(_ref) {
   })) : isPreview && attachment.attachmentUrl ? (/*#__PURE__*/React__default.createElement(FileThumbnail, {
     src: attachment.attachmentUrl || attachmentUrl
   })) : attachmentCompilationState[attachment.tid] !== UPLOAD_STATE.UPLOADING && attachmentCompilationState[attachment.tid] !== UPLOAD_STATE.PAUSED && (selectedFileAttachmentsIcon || /*#__PURE__*/React__default.createElement(SvgFileIcon, null)))), !isRepliedMessage && !isPreview && (/*#__PURE__*/React__default.createElement(DownloadFile$1, {
+    role: 'button',
+    "aria-label": fileDownloadFailed ? 'Download failed, retry' : 'Download file',
+    visible: fileDownloadFailed && !downloadingFile,
     widthThumb: !!attachmentThumb,
     backgroundColor: attachmentThumb ? overlayBackground2 : accentColor,
     onClick: function onClick() {
@@ -43472,7 +43490,9 @@ var FileThumbnailSkeleton = styled.div(_templateObject5$h || (_templateObject5$h
 }, function (props) {
   return props.color;
 }, fileThumbnailShimmer);
-var DownloadFile$1 = styled.span(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose(["\n  display: none;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  background-color: ", ";\n  min-width: 40px;\n  max-width: 40px;\n  height: 40px;\n  position: ", ";\n  border-radius: ", ";\n\n  & > svg {\n    width: 20px;\n    height: 20px;\n  }\n"])), function (props) {
+var DownloadFile$1 = styled.span(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose(["\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  background-color: ", ";\n  min-width: 40px;\n  max-width: 40px;\n  height: 40px;\n  position: ", ";\n  border-radius: ", ";\n\n  & > svg {\n    width: 20px;\n    height: 20px;\n  }\n"])), function (props) {
+  return props.visible ? 'flex' : 'none';
+}, function (props) {
   return props.backgroundColor;
 }, function (props) {
   return props.widthThumb && 'absolute';

package/package.json

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