sceyt-chat-react-uikit 1.8.0-beta.17 → 1.8.0-beta.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.modern.js CHANGED
@@ -14267,9 +14267,9 @@ var UploadProgress = styled.div(_templateObject39 || (_templateObject39 = _tagge
14267
14267
  }, function (props) {
14268
14268
  return props.fileAttachment || props.isRepliedMessage ? '40px' : props.height ? props.height + "px" : '100%';
14269
14269
  }, function (props) {
14270
- return !props.fileAttachment && !props.isRepliedMessage ? props.imageMinWidth || '165px' : null;
14270
+ return !props.fileAttachment && !props.isRepliedMessage && !props.isPreview ? props.imageMinWidth || '165px' : null;
14271
14271
  }, function (props) {
14272
- return !props.fileAttachment && !props.isRepliedMessage && !props.isDetailsView && '165px';
14272
+ return !props.fileAttachment && !props.isRepliedMessage && !props.isDetailsView && !props.isPreview && '165px';
14273
14273
  }, function (props) {
14274
14274
  return props.fileAttachment ? '8px' : props.isRepliedMessage ? '4px' : ' 50%';
14275
14275
  }, function (props) {
@@ -22278,7 +22278,6 @@ function getMessageAttachments(action) {
22278
22278
  _context17.n = 14;
22279
22279
  return put(setAttachmentsAC(JSON.parse(JSON.stringify(attachments))));
22280
22280
  case 14:
22281
- console.log('attachments', attachments);
22282
22281
  _context17.n = 16;
22283
22282
  break;
22284
22283
  case 15:
@@ -24702,13 +24701,22 @@ var setAttachmentToCache = function setAttachmentToCache(attachmentUrl, attachme
24702
24701
  if (cacheAvailable) {
24703
24702
  caches.open(ATTACHMENTS_CACHE).then(function (cache) {
24704
24703
  try {
24705
- cache.put(attachmentUrl, attachmentResponse).then(function () {
24706
- log.info('Cache success');
24707
- })["catch"](function (e) {
24704
+ var _temp2 = _catch(function () {
24705
+ var cacheKey = attachmentUrl.startsWith('http://') || attachmentUrl.startsWith('https://') ? attachmentUrl : "https://cache.local/" + encodeURIComponent(attachmentUrl);
24706
+ var request = new Request(cacheKey);
24707
+ return Promise.resolve(cache.put(request, attachmentResponse)).then(function () {
24708
+ log.info('Cache success');
24709
+ });
24710
+ }, function (e) {
24708
24711
  log.info('Error on cache attachment ... ', e);
24709
- caches["delete"](attachmentUrl);
24712
+ var deleteCacheKey = attachmentUrl.startsWith('http://') || attachmentUrl.startsWith('https://') ? attachmentUrl : "https://cache.local/" + encodeURIComponent(attachmentUrl);
24713
+ var _temp = _catch(function () {
24714
+ var deleteRequest = new Request(deleteCacheKey);
24715
+ return Promise.resolve(cache["delete"](deleteRequest)).then(function () {});
24716
+ }, function () {});
24717
+ return _temp && _temp.then ? _temp.then(function () {}) : void 0;
24710
24718
  });
24711
- return Promise.resolve();
24719
+ return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
24712
24720
  } catch (e) {
24713
24721
  return Promise.reject(e);
24714
24722
  }
@@ -24721,11 +24729,12 @@ var getAttachmentUrlFromCache = function getAttachmentUrlFromCache(attachmentUrl
24721
24729
  log.error('Cache is not available');
24722
24730
  return Promise.reject(new Error('Cache not available'));
24723
24731
  }
24724
- return Promise.resolve(caches.match(attachmentUrl)).then(function (response) {
24732
+ var cacheKey = attachmentUrl.startsWith('http://') || attachmentUrl.startsWith('https://') ? attachmentUrl : "https://cache.local/" + encodeURIComponent(attachmentUrl);
24733
+ var request = new Request(cacheKey);
24734
+ return Promise.resolve(caches.match(request)).then(function (response) {
24725
24735
  if (response) {
24726
24736
  return Promise.resolve(response.blob()).then(URL.createObjectURL);
24727
24737
  } else {
24728
- log.info('The image or video is not cached', attachmentUrl);
24729
24738
  return false;
24730
24739
  }
24731
24740
  });
@@ -30075,7 +30084,6 @@ function SvgFullscreenExit(props) {
30075
30084
  }
30076
30085
 
30077
30086
  var _templateObject$n, _templateObject2$k, _templateObject3$h, _templateObject4$e, _templateObject5$b, _templateObject6$8, _templateObject7$7, _templateObject8$7, _templateObject9$6, _templateObject0$5, _templateObject1$3;
30078
- var timerInterval;
30079
30087
  var VideoPlayer = function VideoPlayer(_ref) {
30080
30088
  var src = _ref.src,
30081
30089
  videoFileId = _ref.videoFileId,
@@ -30087,6 +30095,8 @@ var VideoPlayer = function VideoPlayer(_ref) {
30087
30095
  var videoRef = useRef(null);
30088
30096
  var progressRef = useRef(null);
30089
30097
  var volumeRef = useRef(null);
30098
+ var timerIntervalRef = useRef(null);
30099
+ var checkVideoIntervalRef = useRef(null);
30090
30100
  var _useState = useState(false),
30091
30101
  playing = _useState[0],
30092
30102
  setPlaying = _useState[1];
@@ -30116,18 +30126,23 @@ var VideoPlayer = function VideoPlayer(_ref) {
30116
30126
  setIsFullScreen = _useState9[1];
30117
30127
  var videoHandler = function videoHandler(control) {
30118
30128
  if (control === 'play') {
30119
- videoRef.current && videoRef.current.play();
30120
- setPlaying(true);
30129
+ var _videoRef$current;
30130
+ (_videoRef$current = videoRef.current) === null || _videoRef$current === void 0 ? void 0 : _videoRef$current.play().then(function () {
30131
+ setPlaying(true);
30132
+ })["catch"](function (error) {
30133
+ console.error('Error playing video:', error);
30134
+ setPlaying(false);
30135
+ });
30121
30136
  } else if (control === 'pause') {
30122
- videoRef.current && videoRef.current.pause();
30137
+ var _videoRef$current2;
30138
+ (_videoRef$current2 = videoRef.current) === null || _videoRef$current2 === void 0 ? void 0 : _videoRef$current2.pause();
30123
30139
  setPlaying(false);
30124
30140
  }
30125
30141
  };
30126
30142
  var handleProgressInputChange = function handleProgressInputChange(e) {
30127
- var target = e.target;
30128
- var val = target.value;
30143
+ var val = parseFloat(e.target.value);
30129
30144
  setProgress(val);
30130
- if (videoRef.current) {
30145
+ if (videoRef.current && videoTime > 0) {
30131
30146
  videoRef.current.currentTime = val / 100 * videoTime;
30132
30147
  }
30133
30148
  };
@@ -30145,16 +30160,15 @@ var VideoPlayer = function VideoPlayer(_ref) {
30145
30160
  }
30146
30161
  };
30147
30162
  var handleVolumeInputChange = function handleVolumeInputChange(e) {
30148
- var target = e.target;
30149
- var val = target.value;
30150
- if (val === '0') {
30163
+ var val = parseFloat(e.target.value);
30164
+ if (val === 0) {
30151
30165
  setIsMuted(true);
30152
30166
  } else {
30153
30167
  setIsMuted(false);
30154
30168
  }
30155
30169
  setVolume(val);
30156
30170
  if (videoRef.current) {
30157
- videoRef.current.volume = parseFloat(val);
30171
+ videoRef.current.volume = val;
30158
30172
  }
30159
30173
  };
30160
30174
  var handleOpenFullScreen = function handleOpenFullScreen() {
@@ -30162,19 +30176,43 @@ var VideoPlayer = function VideoPlayer(_ref) {
30162
30176
  if (isFullScreen) {
30163
30177
  document.exitFullscreen().then(function () {
30164
30178
  setIsFullScreen(false);
30179
+ })["catch"](function (error) {
30180
+ console.error('Error exiting fullscreen:', error);
30165
30181
  });
30166
30182
  } else {
30167
30183
  containerRef.current.requestFullscreen().then(function () {
30168
30184
  setIsFullScreen(true);
30185
+ })["catch"](function (error) {
30186
+ console.error('Error entering fullscreen:', error);
30169
30187
  });
30170
30188
  }
30171
30189
  }
30172
30190
  };
30173
30191
  var handleVideoProgress = function handleVideoProgress(e) {
30174
- if (e.currentTarget.readyState >= 2) {
30192
+ var video = e.currentTarget;
30193
+ if (video.readyState >= 2) {
30175
30194
  setIsLoaded(true);
30195
+ if (video.duration && !videoTime) {
30196
+ setVideoTime(video.duration);
30197
+ }
30198
+ if (video.volume !== undefined && volume === 0) {
30199
+ setVolume(video.volume);
30200
+ }
30176
30201
  }
30177
30202
  };
30203
+ var handleVideoEnded = function handleVideoEnded() {
30204
+ setPlaying(false);
30205
+ setProgress(0);
30206
+ setCurrentTime(0);
30207
+ if (videoRef.current) {
30208
+ videoRef.current.currentTime = 0;
30209
+ }
30210
+ };
30211
+ var handleVideoError = function handleVideoError(e) {
30212
+ console.error('Video error:', e);
30213
+ setIsLoaded(false);
30214
+ setPlaying(false);
30215
+ };
30178
30216
  useEffect(function () {
30179
30217
  if (progressRef.current) {
30180
30218
  progressRef.current.style.backgroundSize = progress + "%";
@@ -30186,52 +30224,95 @@ var VideoPlayer = function VideoPlayer(_ref) {
30186
30224
  }
30187
30225
  }, [volume]);
30188
30226
  useEffect(function () {
30189
- if (playing) {
30190
- var videoDuration = videoRef.current ? videoRef.current.duration : '';
30191
- timerInterval = setInterval(function () {
30192
- if (videoRef.current && videoDuration) {
30193
- var _videoRef$current, _videoRef$current2;
30194
- setCurrentTime((_videoRef$current = videoRef.current) === null || _videoRef$current === void 0 ? void 0 : _videoRef$current.currentTime);
30195
- setProgress(((_videoRef$current2 = videoRef.current) === null || _videoRef$current2 === void 0 ? void 0 : _videoRef$current2.currentTime) / videoDuration * 100);
30227
+ if (playing && videoTime > 0) {
30228
+ timerIntervalRef.current = setInterval(function () {
30229
+ if (videoRef.current && videoTime > 0) {
30230
+ var current = videoRef.current.currentTime;
30231
+ setCurrentTime(current);
30232
+ setProgress(current / videoTime * 100);
30196
30233
  if (videoRef.current.paused) {
30197
- videoRef.current.currentTime = 0;
30198
- setProgress(0);
30199
- setCurrentTime(videoRef.current.currentTime);
30200
30234
  setPlaying(false);
30201
- clearInterval(timerInterval);
30202
30235
  }
30203
30236
  }
30204
30237
  }, 100);
30205
30238
  } else {
30206
- clearInterval(timerInterval);
30239
+ if (timerIntervalRef.current) {
30240
+ clearInterval(timerIntervalRef.current);
30241
+ timerIntervalRef.current = null;
30242
+ }
30207
30243
  }
30208
- }, [playing]);
30244
+ return function () {
30245
+ if (timerIntervalRef.current) {
30246
+ clearInterval(timerIntervalRef.current);
30247
+ timerIntervalRef.current = null;
30248
+ }
30249
+ };
30250
+ }, [playing, videoTime]);
30209
30251
  useEffect(function () {
30210
30252
  if (videoFileId !== activeFileId) {
30211
30253
  if (videoRef.current) {
30212
30254
  videoRef.current.pause();
30213
30255
  setPlaying(false);
30214
30256
  }
30257
+ if (timerIntervalRef.current) {
30258
+ clearInterval(timerIntervalRef.current);
30259
+ timerIntervalRef.current = null;
30260
+ }
30215
30261
  }
30216
- }, [activeFileId]);
30262
+ }, [activeFileId, videoFileId]);
30217
30263
  useEffect(function () {
30218
- var checkVideoInterval;
30219
- if (videoRef.current) {
30220
- checkVideoInterval = setInterval(function () {
30221
- if (videoRef.current && videoRef.current.readyState > 0) {
30264
+ var handleFullscreenChange = function handleFullscreenChange() {
30265
+ setIsFullScreen(!!document.fullscreenElement);
30266
+ };
30267
+ document.addEventListener('fullscreenchange', handleFullscreenChange);
30268
+ return function () {
30269
+ document.removeEventListener('fullscreenchange', handleFullscreenChange);
30270
+ };
30271
+ }, []);
30272
+ useEffect(function () {
30273
+ if (videoRef.current && src) {
30274
+ setIsLoaded(false);
30275
+ setPlaying(false);
30276
+ setCurrentTime(0);
30277
+ setProgress(0);
30278
+ setVideoTime(0);
30279
+ if (videoRef.current.readyState >= 2) {
30280
+ setIsLoaded(true);
30281
+ if (videoRef.current.duration) {
30222
30282
  setVideoTime(videoRef.current.duration);
30283
+ }
30284
+ if (videoRef.current.volume !== undefined) {
30223
30285
  setVolume(videoRef.current.volume);
30224
- setPlaying(true);
30225
- videoRef.current.play();
30226
- clearInterval(checkVideoInterval);
30227
30286
  }
30228
- }, 500);
30287
+ } else {
30288
+ checkVideoIntervalRef.current = setInterval(function () {
30289
+ if (videoRef.current && videoRef.current.readyState >= 2) {
30290
+ setIsLoaded(true);
30291
+ if (videoRef.current.duration) {
30292
+ setVideoTime(videoRef.current.duration);
30293
+ }
30294
+ if (videoRef.current.volume !== undefined) {
30295
+ setVolume(videoRef.current.volume);
30296
+ }
30297
+ if (checkVideoIntervalRef.current) {
30298
+ clearInterval(checkVideoIntervalRef.current);
30299
+ checkVideoIntervalRef.current = null;
30300
+ }
30301
+ }
30302
+ }, 500);
30303
+ }
30229
30304
  }
30230
30305
  return function () {
30231
- clearInterval(timerInterval);
30232
- clearInterval(checkVideoInterval);
30306
+ if (checkVideoIntervalRef.current) {
30307
+ clearInterval(checkVideoIntervalRef.current);
30308
+ checkVideoIntervalRef.current = null;
30309
+ }
30310
+ if (timerIntervalRef.current) {
30311
+ clearInterval(timerIntervalRef.current);
30312
+ timerIntervalRef.current = null;
30313
+ }
30233
30314
  };
30234
- }, []);
30315
+ }, [src]);
30235
30316
  return /*#__PURE__*/React__default.createElement(Component, {
30236
30317
  ref: containerRef,
30237
30318
  loaded: isLoaded,
@@ -30246,8 +30327,12 @@ var VideoPlayer = function VideoPlayer(_ref) {
30246
30327
  ref: videoRef,
30247
30328
  className: 'video',
30248
30329
  src: src,
30249
- onLoadedData: handleVideoProgress
30250
- }), isLoaded ? (/*#__PURE__*/React__default.createElement(ControlsContainer, null, /*#__PURE__*/React__default.createElement(ProgressBlock, null, /*#__PURE__*/React__default.createElement(Progress, {
30330
+ onLoadedData: handleVideoProgress,
30331
+ onLoadedMetadata: handleVideoProgress,
30332
+ onEnded: handleVideoEnded,
30333
+ onError: handleVideoError,
30334
+ playsInline: true
30335
+ }), isLoaded && (/*#__PURE__*/React__default.createElement(ControlsContainer, null, /*#__PURE__*/React__default.createElement(ProgressBlock, null, /*#__PURE__*/React__default.createElement(Progress, {
30251
30336
  ref: progressRef,
30252
30337
  onMouseDown: function onMouseDown(e) {
30253
30338
  return e.stopPropagation();
@@ -30282,10 +30367,10 @@ var VideoPlayer = function VideoPlayer(_ref) {
30282
30367
  step: 'any'
30283
30368
  })), /*#__PURE__*/React__default.createElement(FullScreenWrapper, {
30284
30369
  onClick: handleOpenFullScreen
30285
- }, isFullScreen ? /*#__PURE__*/React__default.createElement(SvgFullscreenExit, null) : /*#__PURE__*/React__default.createElement(SvgFullscreen, null)))) : (/*#__PURE__*/React__default.createElement(UploadCont, null, /*#__PURE__*/React__default.createElement(UploadingIcon, null))));
30370
+ }, isFullScreen ? /*#__PURE__*/React__default.createElement(SvgFullscreenExit, null) : /*#__PURE__*/React__default.createElement(SvgFullscreen, null)))), !isLoaded && (/*#__PURE__*/React__default.createElement(UploadCont, null, /*#__PURE__*/React__default.createElement(UploadingIcon, null))));
30286
30371
  };
30287
- var Component = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n & > video {\n ", "\n }\n\n &::after {\n content: ", ";\n position: absolute;\n bottom: 0;\n height: 70px;\n width: 100%;\n background: linear-gradient(360deg, rgba(23, 25, 28, 0.8) 0%, rgba(23, 25, 28, 0.8) 100%);\n }\n"])), function (props) {
30288
- return props.fullScreen && "\n max-width: inherit !important;\n max-height: inherit !important;\n width: 100%;\n height: 100%;\n object-fit: contain;\n ";
30372
+ var Component = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n & > video {\n display: block;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n object-fit: contain;\n background-color: #000;\n ", "\n }\n\n &::after {\n content: ", ";\n position: absolute;\n bottom: 0;\n height: 70px;\n width: 100%;\n background: linear-gradient(360deg, rgba(23, 25, 28, 0.8) 0%, rgba(23, 25, 28, 0.8) 100%);\n }\n"])), function (props) {
30373
+ return props.fullScreen && "\n max-width: inherit !important;\n max-height: inherit !important;\n ";
30289
30374
  }, function (props) {
30290
30375
  return props.loaded && '';
30291
30376
  });
@@ -30896,6 +30981,9 @@ var SliderPopup = function SliderPopup(_ref) {
30896
30981
  var attachmentsForPopupHasPrev = useSelector(attachmentsForPopupHasPrevSelector);
30897
30982
  var attachmentsForPopupHasNext = useSelector(attachmentsForPopupHasNextSelector);
30898
30983
  var attachmentUpdatedMap = useSelector(attachmentUpdatedMapSelector) || {};
30984
+ var prefixUrl = useMemo(function () {
30985
+ return (currentFile === null || currentFile === void 0 ? void 0 : currentFile.type) === 'image' ? '_original_image_url' : '';
30986
+ }, [currentFile === null || currentFile === void 0 ? void 0 : currentFile.type]);
30899
30987
  var customDownloader = getCustomDownloader();
30900
30988
  var contactsMap = useSelector(contactsMapSelector);
30901
30989
  var attachmentsList = useSelector(attachmentsForPopupSelector, shallowEqual) || [];
@@ -30909,7 +30997,7 @@ var SliderPopup = function SliderPopup(_ref) {
30909
30997
  var handleClosePopup = function handleClosePopup() {
30910
30998
  setIsSliderOpen(false);
30911
30999
  };
30912
- var downloadImage = function downloadImage(src, setToDownloadedFiles) {
31000
+ var downloadImage = function downloadImage(src, setToDownloadedFiles, type) {
30913
31001
  if (visibilityTimeout.current) {
30914
31002
  clearTimeout(visibilityTimeout.current);
30915
31003
  }
@@ -30917,7 +31005,7 @@ var SliderPopup = function SliderPopup(_ref) {
30917
31005
  image.src = src;
30918
31006
  image.onload = function () {
30919
31007
  if (setToDownloadedFiles && currentFile) {
30920
- dispatch(setUpdateMessageAttachmentAC(currentFile.url, src));
31008
+ dispatch(setUpdateMessageAttachmentAC(currentFile.url + (type === 'image' ? '_original_image_url' : ''), src));
30921
31009
  visibilityTimeout.current = setTimeout(function () {
30922
31010
  setVisibleSlide(true);
30923
31011
  }, 100);
@@ -31077,17 +31165,17 @@ var SliderPopup = function SliderPopup(_ref) {
31077
31165
  }
31078
31166
  }
31079
31167
  if (currentFile) {
31080
- getAttachmentUrlFromCache(currentFile.url).then(function (cachedUrl) {
31168
+ getAttachmentUrlFromCache(currentFile.url + prefixUrl).then(function (cachedUrl) {
31081
31169
  if (cachedUrl) {
31082
- if (!attachmentUpdatedMap[currentFile.url]) {
31170
+ if (!attachmentUpdatedMap[currentFile.url + prefixUrl]) {
31083
31171
  setVisibleSlide(false);
31084
31172
  if (currentFile.type === 'image') {
31085
- downloadImage(cachedUrl, true);
31173
+ downloadImage(cachedUrl, true, 'image');
31086
31174
  } else {
31087
31175
  if (visibilityTimeout.current) {
31088
31176
  clearTimeout(visibilityTimeout.current);
31089
31177
  }
31090
- dispatch(setUpdateMessageAttachmentAC(currentFile.url, cachedUrl));
31178
+ dispatch(setUpdateMessageAttachmentAC(currentFile.url + prefixUrl, cachedUrl));
31091
31179
  setPlayedVideo(currentFile.id);
31092
31180
  visibilityTimeout.current = setTimeout(function () {
31093
31181
  setVisibleSlide(true);
@@ -31100,14 +31188,14 @@ var SliderPopup = function SliderPopup(_ref) {
31100
31188
  try {
31101
31189
  var _temp9 = _catch(function () {
31102
31190
  return Promise.resolve(fetch(url)).then(function (response) {
31103
- setAttachmentToCache(currentFile.url, response);
31191
+ setAttachmentToCache(currentFile.url + prefixUrl, response);
31104
31192
  if (currentFile.type === 'image') {
31105
- downloadImage(url, true);
31193
+ downloadImage(url, true, 'image');
31106
31194
  } else {
31107
31195
  if (visibilityTimeout.current) {
31108
31196
  clearTimeout(visibilityTimeout.current);
31109
31197
  }
31110
- dispatch(setUpdateMessageAttachmentAC(currentFile.url, url));
31198
+ dispatch(setUpdateMessageAttachmentAC(currentFile.url + prefixUrl, url));
31111
31199
  setPlayedVideo(currentFile.id);
31112
31200
  visibilityTimeout.current = setTimeout(function () {
31113
31201
  setVisibleSlide(true);
@@ -31125,15 +31213,15 @@ var SliderPopup = function SliderPopup(_ref) {
31125
31213
  log.error('Failed to download attachment:', e);
31126
31214
  });
31127
31215
  } else {
31128
- if (!attachmentUpdatedMap[currentFile.url]) {
31216
+ if (!attachmentUpdatedMap[currentFile.url + prefixUrl]) {
31129
31217
  setVisibleSlide(false);
31130
31218
  if (currentFile.type === 'image') {
31131
- downloadImage(currentFile.url, true);
31219
+ downloadImage(currentFile.url, true, 'image');
31132
31220
  } else {
31133
31221
  if (visibilityTimeout.current) {
31134
31222
  clearTimeout(visibilityTimeout.current);
31135
31223
  }
31136
- dispatch(setUpdateMessageAttachmentAC(currentFile.url, currentFile.url));
31224
+ dispatch(setUpdateMessageAttachmentAC(currentFile.url + prefixUrl, currentFile.url));
31137
31225
  setPlayedVideo(currentFile.id);
31138
31226
  visibilityTimeout.current = setTimeout(function () {
31139
31227
  setVisibleSlide(true);
@@ -31164,12 +31252,13 @@ var SliderPopup = function SliderPopup(_ref) {
31164
31252
  useEffect(function () {
31165
31253
  setImageLoading(true);
31166
31254
  if (customDownloader && currentMediaFile) {
31167
- getAttachmentUrlFromCache(currentMediaFile.url).then(function (cachedUrl) {
31255
+ var attachmentUrl = currentMediaFile.url + (currentMediaFile.type === 'image' ? '_original_image_url' : '');
31256
+ getAttachmentUrlFromCache(attachmentUrl).then(function (cachedUrl) {
31168
31257
  if (cachedUrl) {
31169
31258
  if (currentMediaFile.type === 'image') {
31170
- downloadImage(cachedUrl);
31259
+ downloadImage(cachedUrl, false, 'image');
31171
31260
  } else {
31172
- dispatch(setUpdateMessageAttachmentAC(currentMediaFile.url, cachedUrl));
31261
+ dispatch(setUpdateMessageAttachmentAC(attachmentUrl, cachedUrl));
31173
31262
  setPlayedVideo(currentMediaFile.id);
31174
31263
  }
31175
31264
  } else {
@@ -31178,11 +31267,11 @@ var SliderPopup = function SliderPopup(_ref) {
31178
31267
  try {
31179
31268
  var _temp0 = _catch(function () {
31180
31269
  return Promise.resolve(fetch(url)).then(function (response) {
31181
- setAttachmentToCache(currentMediaFile.url, response);
31270
+ setAttachmentToCache(attachmentUrl, response);
31182
31271
  if (currentMediaFile.type === 'image') {
31183
- downloadImage(url);
31272
+ downloadImage(url, false, 'image');
31184
31273
  } else {
31185
- dispatch(setUpdateMessageAttachmentAC(currentMediaFile.url, url));
31274
+ dispatch(setUpdateMessageAttachmentAC(attachmentUrl, url));
31186
31275
  setPlayedVideo(currentMediaFile.id);
31187
31276
  }
31188
31277
  });
@@ -31197,7 +31286,7 @@ var SliderPopup = function SliderPopup(_ref) {
31197
31286
  log.error('Error downloading initial attachment:', error);
31198
31287
  });
31199
31288
  } else {
31200
- downloadImage(currentMediaFile.url);
31289
+ downloadImage(attachmentUrl, false, 'image');
31201
31290
  }
31202
31291
  }
31203
31292
  })["catch"](function (error) {
@@ -31352,7 +31441,7 @@ var SliderPopup = function SliderPopup(_ref) {
31352
31441
  onNextStart: function onNextStart() {
31353
31442
  if (activeFileIndex + 1 < attachmentsList.length) {
31354
31443
  var nextFile = attachmentsList[activeFileIndex + 1];
31355
- if (nextFile && !attachmentUpdatedMap[nextFile.url]) {
31444
+ if (nextFile && !attachmentUpdatedMap[nextFile.url + (nextFile.type === 'image' ? '_original_image_url' : '')]) {
31356
31445
  setImageLoading(true);
31357
31446
  }
31358
31447
  }
@@ -31361,7 +31450,7 @@ var SliderPopup = function SliderPopup(_ref) {
31361
31450
  onPrevStart: function onPrevStart() {
31362
31451
  if (activeFileIndex - 1 >= 0) {
31363
31452
  var prevFile = attachmentsList[activeFileIndex - 1];
31364
- if (prevFile && !attachmentUpdatedMap[prevFile.url]) {
31453
+ if (prevFile && !attachmentUpdatedMap[prevFile.url + (prevFile.type === 'image' ? '_original_image_url' : '')]) {
31365
31454
  setImageLoading(true);
31366
31455
  }
31367
31456
  }
@@ -31400,16 +31489,16 @@ var SliderPopup = function SliderPopup(_ref) {
31400
31489
  className: 'custom_carousel_item',
31401
31490
  key: file.id,
31402
31491
  draggable: false,
31403
- visibleSlide: visibleSlide || attachmentUpdatedMap[file.url],
31492
+ visibleSlide: visibleSlide || attachmentUpdatedMap[file.url + (file.type === 'image' ? '_original_image_url' : '')],
31404
31493
  onMouseDown: handleCarouselItemMouseDown,
31405
31494
  onContextMenu: function onContextMenu(e) {
31406
31495
  e.stopPropagation();
31407
31496
  }
31408
- }, file.type === 'image' ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, attachmentLoadingStateForPopup !== LOADING_STATE.LOADED || !attachmentUpdatedMap[file.url] && imageLoading ? (/*#__PURE__*/React__default.createElement(UploadCont$1, null, /*#__PURE__*/React__default.createElement(UploadingIcon, {
31497
+ }, file.type === 'image' ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, attachmentLoadingStateForPopup !== LOADING_STATE.LOADED || !attachmentUpdatedMap[file.url + (file.type === 'image' ? '_original_image_url' : '')] && imageLoading ? (/*#__PURE__*/React__default.createElement(UploadCont$1, null, /*#__PURE__*/React__default.createElement(UploadingIcon, {
31409
31498
  color: textOnPrimary
31410
31499
  }))) : (/*#__PURE__*/React__default.createElement("img", {
31411
31500
  draggable: false,
31412
- src: attachmentUpdatedMap[file.url],
31501
+ src: attachmentUpdatedMap[file.url + (file.type === 'image' ? '_original_image_url' : '')],
31413
31502
  alt: file.name || 'Attachment',
31414
31503
  onMouseDown: function onMouseDown(e) {
31415
31504
  if (e.button === 2) {
@@ -35378,8 +35467,9 @@ function SvgPlayVideo(props) {
35378
35467
  })));
35379
35468
  }
35380
35469
 
35381
- var _templateObject$z, _templateObject2$v, _templateObject3$p, _templateObject4$l, _templateObject5$h, _templateObject6$e, _templateObject7$d;
35470
+ var _templateObject$z, _templateObject2$v, _templateObject3$p, _templateObject4$l, _templateObject5$h, _templateObject6$e, _templateObject7$d, _templateObject8$c, _templateObject9$a, _templateObject0$9;
35382
35471
  var VideoPreview = /*#__PURE__*/memo(function VideoPreview(_ref) {
35472
+ var _file$metadata2, _file$metadata4, _file$metadata6;
35383
35473
  var width = _ref.width,
35384
35474
  height = _ref.height,
35385
35475
  src = _ref.src,
@@ -35395,81 +35485,237 @@ var VideoPreview = /*#__PURE__*/memo(function VideoPreview(_ref) {
35395
35485
  border = _useColor[THEME_COLORS.BORDER],
35396
35486
  overlayBackground2 = _useColor[THEME_COLORS.OVERLAY_BACKGROUND_2],
35397
35487
  textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY];
35398
- var currentTime = '';
35399
- if (file.metadata && file.metadata.dur) {
35400
- var mins = Math.floor(file.metadata.dur / 60);
35401
- var seconds = Math.floor(file.metadata.dur % 60);
35402
- currentTime = mins + ":" + (seconds < 10 ? "0" + seconds : seconds);
35403
- }
35404
- var _useState = useState(currentTime),
35488
+ var dispatch = useDispatch();
35489
+ var attachmentUpdatedMap = useSelector(attachmentUpdatedMapSelector);
35490
+ var initialDuration = useMemo(function () {
35491
+ var _file$metadata;
35492
+ if ((_file$metadata = file.metadata) !== null && _file$metadata !== void 0 && _file$metadata.dur) {
35493
+ var mins = Math.floor(file.metadata.dur / 60);
35494
+ var seconds = Math.floor(file.metadata.dur % 60);
35495
+ return mins + ":" + (seconds < 10 ? "0" + seconds : seconds);
35496
+ }
35497
+ return null;
35498
+ }, [(_file$metadata2 = file.metadata) === null || _file$metadata2 === void 0 ? void 0 : _file$metadata2.dur]);
35499
+ var _useState = useState(initialDuration),
35405
35500
  videoCurrentTime = _useState[0],
35406
35501
  setVideoCurrentTime = _useState[1];
35407
- var _useState2 = useState(true),
35408
- loading = _useState2[0],
35409
- setLoading = _useState2[1];
35410
- var _useState3 = useState(''),
35411
- videoUrl = _useState3[0],
35412
- setVideoUrl = _useState3[1];
35413
- var videoRef = useRef(null);
35414
- var attachmentThumb;
35415
- var withPrefix = true;
35416
- if (file.metadata && file.metadata.tmb) {
35417
- if (file.metadata.tmb.length < 70) {
35418
- attachmentThumb = base64ToDataURL(file.metadata.tmb);
35419
- withPrefix = false;
35420
- } else {
35421
- attachmentThumb = file.metadata && file.metadata.tmb;
35502
+ var attachmentVideoFirstFrame = useMemo(function () {
35503
+ return attachmentUpdatedMap[file.url + "-first-frame"];
35504
+ }, [attachmentUpdatedMap, file.url]);
35505
+ var attachmentThumb = useMemo(function () {
35506
+ var _file$metadata3;
35507
+ if ((_file$metadata3 = file.metadata) !== null && _file$metadata3 !== void 0 && _file$metadata3.tmb) {
35508
+ if (file.metadata.tmb.length < 70) {
35509
+ return base64ToDataURL(file.metadata.tmb);
35510
+ }
35511
+ return file.metadata.tmb;
35422
35512
  }
35423
- }
35513
+ return undefined;
35514
+ }, [(_file$metadata4 = file.metadata) === null || _file$metadata4 === void 0 ? void 0 : _file$metadata4.tmb]);
35515
+ var _useState2 = useState(attachmentVideoFirstFrame || attachmentThumb || undefined),
35516
+ backgroundImage = _useState2[0],
35517
+ setBackgroundImage = _useState2[1];
35518
+ var _useState3 = useState(false),
35519
+ backgroundWithPrefix = _useState3[0],
35520
+ setBackgroundWithPrefix = _useState3[1];
35521
+ var _useState4 = useState(false),
35522
+ shouldAnimate = _useState4[0],
35523
+ setShouldAnimate = _useState4[1];
35524
+ var isExtractingRef = useRef(false);
35525
+ var extractedBlobUrlsRef = useRef(new Set());
35526
+ var previousBackgroundImageRef = useRef(undefined);
35527
+ var hiddenVideoRef = useRef(null);
35528
+ var thumbnailWithPrefix = useMemo(function () {
35529
+ var _file$metadata5;
35530
+ return !((_file$metadata5 = file.metadata) !== null && _file$metadata5 !== void 0 && _file$metadata5.tmb && file.metadata.tmb.length < 70);
35531
+ }, [(_file$metadata6 = file.metadata) === null || _file$metadata6 === void 0 ? void 0 : _file$metadata6.tmb]);
35532
+ useEffect(function () {
35533
+ if (attachmentVideoFirstFrame && attachmentVideoFirstFrame !== backgroundImage) {
35534
+ setBackgroundImage(attachmentVideoFirstFrame);
35535
+ setBackgroundWithPrefix(false);
35536
+ return;
35537
+ }
35538
+ if (attachmentThumb && !backgroundImage) {
35539
+ setBackgroundImage(attachmentThumb);
35540
+ setBackgroundWithPrefix(thumbnailWithPrefix);
35541
+ }
35542
+ }, [attachmentVideoFirstFrame, attachmentThumb, thumbnailWithPrefix, backgroundImage]);
35543
+ useEffect(function () {
35544
+ if (backgroundImage !== undefined) {
35545
+ if (previousBackgroundImageRef.current === undefined) {
35546
+ setShouldAnimate(false);
35547
+ } else if (previousBackgroundImageRef.current !== backgroundImage) {
35548
+ setShouldAnimate(true);
35549
+ }
35550
+ previousBackgroundImageRef.current = backgroundImage;
35551
+ }
35552
+ }, [backgroundImage]);
35553
+ useEffect(function () {
35554
+ return function () {
35555
+ extractedBlobUrlsRef.current.forEach(function (url) {
35556
+ URL.revokeObjectURL(url);
35557
+ });
35558
+ extractedBlobUrlsRef.current.clear();
35559
+ };
35560
+ }, []);
35424
35561
  useEffect(function () {
35425
- var video = videoRef.current;
35426
- if (!video) return;
35427
- var checkReadyState = function checkReadyState() {
35428
- if (video.readyState > 3) {
35429
- setLoading(false);
35430
- var minutes = Math.floor(video.duration / 60);
35431
- var _seconds = Math.floor(video.duration % 60);
35432
- if (!videoCurrentTime) {
35433
- setVideoCurrentTime(minutes + ":" + (_seconds < 10 ? "0" + _seconds : _seconds));
35434
- }
35435
- if (setVideoIsReadyToSend) {
35436
- setVideoIsReadyToSend(file.tid);
35562
+ var hiddenVideo = hiddenVideoRef.current;
35563
+ var videoSource = file.attachmentUrl || src || file.url;
35564
+ if (!hiddenVideo || !videoSource || isExtractingRef.current) return;
35565
+ if (attachmentVideoFirstFrame && !isPreview) return;
35566
+ var frameCacheKey = videoSource + "-first-frame";
35567
+ var isMounted = true;
35568
+ var eventListenersAttached = false;
35569
+ var checkCache = function checkCache() {
35570
+ try {
35571
+ var _exit = false;
35572
+ var _temp = _catch(function () {
35573
+ return Promise.resolve(getAttachmentUrlFromCache(frameCacheKey)).then(function (cachedUrl) {
35574
+ if (cachedUrl && isMounted) {
35575
+ extractedBlobUrlsRef.current.add(cachedUrl);
35576
+ setBackgroundImage(cachedUrl);
35577
+ setBackgroundWithPrefix(false);
35578
+ if (!isPreview) {
35579
+ dispatch(setUpdateMessageAttachmentAC(file.url + "-first-frame", cachedUrl));
35580
+ }
35581
+ _exit = true;
35582
+ return true;
35583
+ }
35584
+ });
35585
+ }, function () {});
35586
+ return Promise.resolve(_temp && _temp.then ? _temp.then(function (_result) {
35587
+ return _exit ? _result : false;
35588
+ }) : _exit ? _temp : false);
35589
+ } catch (e) {
35590
+ return Promise.reject(e);
35591
+ }
35592
+ };
35593
+ var extractFirstFrame = function extractFirstFrame() {
35594
+ try {
35595
+ if (!hiddenVideo || isExtractingRef.current || !isMounted) return Promise.resolve();
35596
+ try {
35597
+ if (hiddenVideo.videoWidth === 0 || hiddenVideo.videoHeight === 0) {
35598
+ return Promise.resolve();
35599
+ }
35600
+ isExtractingRef.current = true;
35601
+ var canvas = document.createElement('canvas');
35602
+ canvas.width = hiddenVideo.videoWidth / 2;
35603
+ canvas.height = hiddenVideo.videoHeight / 2;
35604
+ var ctx = canvas.getContext('2d');
35605
+ if (!ctx) {
35606
+ isExtractingRef.current = false;
35607
+ return Promise.resolve();
35608
+ }
35609
+ ctx.drawImage(hiddenVideo, 0, 0, canvas.width, canvas.height);
35610
+ canvas.toBlob(function (blob) {
35611
+ try {
35612
+ if (!blob || !isMounted) {
35613
+ isExtractingRef.current = false;
35614
+ return Promise.resolve();
35615
+ }
35616
+ try {
35617
+ var response = new Response(blob, {
35618
+ headers: {
35619
+ 'Content-Type': 'image/jpeg'
35620
+ }
35621
+ });
35622
+ if (!isPreview) {
35623
+ setAttachmentToCache(frameCacheKey, response);
35624
+ }
35625
+ var blobUrl = URL.createObjectURL(blob);
35626
+ extractedBlobUrlsRef.current.add(blobUrl);
35627
+ if (isMounted) {
35628
+ setBackgroundImage(blobUrl);
35629
+ setBackgroundWithPrefix(false);
35630
+ if (!isPreview) {
35631
+ dispatch(setUpdateMessageAttachmentAC(file.url + "-first-frame", blobUrl));
35632
+ }
35633
+ if (hiddenVideo.duration && !videoCurrentTime) {
35634
+ var minutes = Math.floor(hiddenVideo.duration / 60);
35635
+ var seconds = Math.floor(hiddenVideo.duration % 60);
35636
+ setVideoCurrentTime(minutes + ":" + (seconds < 10 ? "0" + seconds : seconds));
35637
+ }
35638
+ } else {
35639
+ URL.revokeObjectURL(blobUrl);
35640
+ }
35641
+ } catch (error) {
35642
+ console.error('Error processing extracted frame:', error);
35643
+ } finally {
35644
+ isExtractingRef.current = false;
35645
+ }
35646
+ return Promise.resolve();
35647
+ } catch (e) {
35648
+ return Promise.reject(e);
35649
+ }
35650
+ }, 'image/jpeg', 0.8);
35651
+ } catch (error) {
35652
+ console.error('Error extracting first frame:', error);
35653
+ isExtractingRef.current = false;
35437
35654
  }
35438
- return true;
35655
+ return Promise.resolve();
35656
+ } catch (e) {
35657
+ return Promise.reject(e);
35439
35658
  }
35440
- return false;
35441
35659
  };
35442
- if (checkReadyState()) return;
35443
- var handleCanPlay = function handleCanPlay() {
35444
- return checkReadyState();
35660
+ var handleSeeked = function handleSeeked() {
35661
+ if (!isMounted || isExtractingRef.current) return;
35662
+ extractFirstFrame();
35445
35663
  };
35446
35664
  var handleLoadedMetadata = function handleLoadedMetadata() {
35447
- return checkReadyState();
35665
+ try {
35666
+ if (!isMounted || isExtractingRef.current) return Promise.resolve();
35667
+ return Promise.resolve(checkCache()).then(function (cached) {
35668
+ if (!cached && hiddenVideo.readyState >= 2 && hiddenVideo.videoWidth > 0) {
35669
+ if (setVideoIsReadyToSend && file.tid) {
35670
+ setVideoIsReadyToSend(file.tid);
35671
+ }
35672
+ hiddenVideo.currentTime = 0.1;
35673
+ }
35674
+ });
35675
+ } catch (e) {
35676
+ return Promise.reject(e);
35677
+ }
35448
35678
  };
35449
- video.addEventListener('canplay', handleCanPlay);
35450
- video.addEventListener('loadedmetadata', handleLoadedMetadata);
35451
- var interval = setInterval(function () {
35452
- if (checkReadyState()) {
35453
- clearInterval(interval);
35679
+ var handleCanPlay = function handleCanPlay() {
35680
+ try {
35681
+ if (!isMounted || isExtractingRef.current) return Promise.resolve();
35682
+ var _temp2 = function () {
35683
+ if (hiddenVideo.readyState >= 2 && hiddenVideo.videoWidth > 0) {
35684
+ return Promise.resolve(checkCache()).then(function (cached) {
35685
+ if (!cached) {
35686
+ hiddenVideo.currentTime = 0.1;
35687
+ }
35688
+ });
35689
+ }
35690
+ }();
35691
+ return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
35692
+ } catch (e) {
35693
+ return Promise.reject(e);
35454
35694
  }
35455
- }, 1000);
35456
- return function () {
35457
- video.removeEventListener('canplay', handleCanPlay);
35458
- video.removeEventListener('loadedmetadata', handleLoadedMetadata);
35459
- clearInterval(interval);
35460
35695
  };
35461
- }, []);
35462
- useEffect(function () {
35463
- getAttachmentUrlFromCache(file.url).then(function (cachedUrl) {
35464
- if (!videoUrl) {
35465
- if (!cachedUrl && src) {
35466
- setVideoUrl(src);
35467
- } else if (cachedUrl) {
35468
- setVideoUrl(cachedUrl);
35696
+ if (hiddenVideo.src !== videoSource) {
35697
+ hiddenVideo.src = videoSource;
35698
+ }
35699
+ checkCache().then(function (cached) {
35700
+ if (!cached && isMounted && !eventListenersAttached) {
35701
+ hiddenVideo.addEventListener('seeked', handleSeeked);
35702
+ hiddenVideo.addEventListener('loadedmetadata', handleLoadedMetadata);
35703
+ hiddenVideo.addEventListener('canplay', handleCanPlay);
35704
+ eventListenersAttached = true;
35705
+ if (hiddenVideo.readyState >= 2 && hiddenVideo.videoWidth > 0) {
35706
+ hiddenVideo.currentTime = 0.1;
35469
35707
  }
35470
35708
  }
35471
35709
  });
35472
- }, [src]);
35710
+ return function () {
35711
+ isMounted = false;
35712
+ if (eventListenersAttached && hiddenVideo) {
35713
+ hiddenVideo.removeEventListener('seeked', handleSeeked);
35714
+ hiddenVideo.removeEventListener('loadedmetadata', handleLoadedMetadata);
35715
+ hiddenVideo.removeEventListener('canplay', handleCanPlay);
35716
+ }
35717
+ };
35718
+ }, [file.attachmentUrl, file.url, src, dispatch, attachmentVideoFirstFrame, isPreview]);
35473
35719
  return /*#__PURE__*/React__default.createElement(Component$1, {
35474
35720
  width: width,
35475
35721
  height: height,
@@ -35478,20 +35724,23 @@ var VideoPreview = /*#__PURE__*/memo(function VideoPreview(_ref) {
35478
35724
  isPreview: isPreview,
35479
35725
  backgroundColor: backgroundColor,
35480
35726
  isDetailsView: isDetailsView
35481
- }, !isPreview && loading && !uploading && (/*#__PURE__*/React__default.createElement(UploadProgress, {
35727
+ }, !uploading && (/*#__PURE__*/React__default.createElement(SmoothImageContainer, null, /*#__PURE__*/React__default.createElement(SmoothUploadProgress, {
35728
+ "$shouldAnimate": shouldAnimate,
35729
+ isPreview: isPreview,
35482
35730
  isDetailsView: isDetailsView,
35483
35731
  isRepliedMessage: isRepliedMessage,
35484
35732
  borderRadius: borderRadius,
35485
- backgroundImage: attachmentThumb,
35486
- withPrefix: withPrefix,
35733
+ backgroundImage: backgroundImage,
35734
+ withPrefix: backgroundWithPrefix,
35487
35735
  borderColor: border
35488
- })), /*#__PURE__*/React__default.createElement("video", {
35489
- draggable: false,
35490
- ref: videoRef,
35491
- preload: 'auto',
35492
- id: 'video',
35493
- src: file.attachmentUrl || videoUrl
35494
- }), videoCurrentTime && !isRepliedMessage && (!isDetailsView || !loading) && (/*#__PURE__*/React__default.createElement(VideoControls, null, !isPreview && !!videoCurrentTime && !isRepliedMessage && !uploading && !isDetailsView && (
35736
+ }))), /*#__PURE__*/React__default.createElement(HiddenVideo, {
35737
+ ref: hiddenVideoRef,
35738
+ src: file.attachmentUrl || src || file.url,
35739
+ preload: 'metadata',
35740
+ muted: true
35741
+ }), !isRepliedMessage && (/*#__PURE__*/React__default.createElement(VideoControls, {
35742
+ className: 'video-controls'
35743
+ }, !isPreview && !isRepliedMessage && !uploading && !isDetailsView && (
35495
35744
  /*#__PURE__*/
35496
35745
  React__default.createElement(VideoPlayButton, null, /*#__PURE__*/React__default.createElement(SvgPlayVideo, null))), /*#__PURE__*/React__default.createElement(VideoTime, {
35497
35746
  isDetailsView: isDetailsView,
@@ -35500,7 +35749,7 @@ var VideoPreview = /*#__PURE__*/memo(function VideoPreview(_ref) {
35500
35749
  messageTimeBackgroundColor: overlayBackground2
35501
35750
  }, !isRepliedMessage && !isPreview && /*#__PURE__*/React__default.createElement(SvgVideoCall, null), videoCurrentTime))));
35502
35751
  });
35503
- var VideoControls = styled.div(_templateObject$z || (_templateObject$z = _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"])));
35752
+ var VideoControls = styled.div(_templateObject$z || (_templateObject$z = _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"])));
35504
35753
  var VideoTime = styled.div(_templateObject2$v || (_templateObject2$v = _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) {
35505
35754
  return props.isRepliedMessage ? '3px' : props.isDetailsView ? undefined : '8px';
35506
35755
  }, function (props) {
@@ -35555,8 +35804,13 @@ var AttachmentFile = styled.div(_templateObject6$e || (_templateObject6$e = _tag
35555
35804
  var AttachmentImg = styled.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n width: 100%;\n border-radius: ", ";\n object-fit: cover;\n"])), function (props) {
35556
35805
  return props.borderRadius || '6px';
35557
35806
  });
35807
+ var SmoothImageContainer = styled.div(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n"])));
35808
+ var SmoothUploadProgress = styled(UploadProgress)(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n background-color: transparent !important;\n\n ", "\n\n @keyframes fadeInImage {\n from {\n opacity: 0.3;\n }\n to {\n opacity: 1;\n }\n }\n"])), function (props) {
35809
+ return props.$shouldAnimate && "\n animation: fadeInImage 0.2s ease-in-out;\n ";
35810
+ });
35811
+ var HiddenVideo = styled.video(_templateObject0$9 || (_templateObject0$9 = _taggedTemplateLiteralLoose(["\n position: absolute;\n opacity: 0;\n pointer-events: none;\n width: 1px;\n height: 1px;\n z-index: -1;\n object-fit: contain;\n"])));
35558
35812
 
35559
- var _templateObject$A, _templateObject2$w, _templateObject3$q, _templateObject4$m, _templateObject5$i, _templateObject6$f, _templateObject7$e, _templateObject8$c, _templateObject9$a, _templateObject0$9, _templateObject1$6, _templateObject10$3, _templateObject11$3;
35813
+ var _templateObject$A, _templateObject2$w, _templateObject3$q, _templateObject4$m, _templateObject5$i, _templateObject6$f, _templateObject7$e, _templateObject8$d, _templateObject9$b, _templateObject0$a, _templateObject1$6, _templateObject10$3, _templateObject11$3;
35560
35814
  var Attachment = function Attachment(_ref) {
35561
35815
  var attachment = _ref.attachment,
35562
35816
  _ref$isPreview = _ref.isPreview,
@@ -35664,8 +35918,10 @@ var Attachment = function Attachment(_ref) {
35664
35918
  }
35665
35919
  }
35666
35920
  var downloadImage = function downloadImage(url) {
35667
- var image = new Image();
35921
+ var image = new Image(renderWidth / 2, renderHeight / 2);
35668
35922
  image.src = url;
35923
+ image.width = renderWidth / 2;
35924
+ image.height = renderHeight / 2;
35669
35925
  image.onload = function () {
35670
35926
  setAttachmentUrl(url);
35671
35927
  setDownloadingFile(false);
@@ -35674,6 +35930,57 @@ var Attachment = function Attachment(_ref) {
35674
35930
  log.error('Error on download image', url);
35675
35931
  };
35676
35932
  };
35933
+ var compressAndCacheImage = function compressAndCacheImage(url, cacheKey, maxWidth, maxHeight) {
35934
+ try {
35935
+ return Promise.resolve(_catch(function () {
35936
+ return Promise.resolve(fetch(url)).then(function (response) {
35937
+ return Promise.resolve(response.blob()).then(function (blob) {
35938
+ var _exit = false;
35939
+ function _temp2(_result) {
35940
+ if (_exit) return _result;
35941
+ setAttachmentToCache(cacheKey, response);
35942
+ return '';
35943
+ }
35944
+ var _temp = function () {
35945
+ if (blob.type.startsWith('image/')) {
35946
+ var file = new File([blob], 'image.jpg', {
35947
+ type: blob.type
35948
+ });
35949
+ return Promise.resolve(resizeImage(file, maxWidth || renderWidth || 1280, maxHeight || renderHeight || 1080, 1)).then(function (_ref2) {
35950
+ var compressedBlob = _ref2.blob;
35951
+ var returningUrl = compressedBlob ? URL.createObjectURL(compressedBlob) : '';
35952
+ if (compressedBlob) {
35953
+ var compressedResponse = new Response(compressedBlob, {
35954
+ headers: {
35955
+ 'Content-Type': blob.type
35956
+ }
35957
+ });
35958
+ setAttachmentToCache(cacheKey, compressedResponse);
35959
+ _exit = true;
35960
+ return returningUrl;
35961
+ }
35962
+ });
35963
+ }
35964
+ }();
35965
+ return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
35966
+ });
35967
+ });
35968
+ }, function (error) {
35969
+ log.error('Error compressing and caching image:', error);
35970
+ return _catch(function () {
35971
+ return Promise.resolve(fetch(url)).then(function (response) {
35972
+ setAttachmentToCache(cacheKey, response);
35973
+ return '';
35974
+ });
35975
+ }, function (fetchError) {
35976
+ log.error('Error caching image:', fetchError);
35977
+ return '';
35978
+ });
35979
+ }));
35980
+ } catch (e) {
35981
+ return Promise.reject(e);
35982
+ }
35983
+ };
35677
35984
  var handlePauseResumeDownload = function handlePauseResumeDownload(e) {
35678
35985
  e.stopPropagation();
35679
35986
  if (downloadIsCancelled) {
@@ -35766,7 +36073,7 @@ var Attachment = function Attachment(_ref) {
35766
36073
  };
35767
36074
  var handleDownloadFile = function handleDownloadFile() {
35768
36075
  try {
35769
- var _temp = function () {
36076
+ var _temp7 = function () {
35770
36077
  if (customDownloader) {
35771
36078
  if (!attachment.attachmentUrl) {
35772
36079
  setDownloadingFile(true);
@@ -35782,29 +36089,58 @@ var Attachment = function Attachment(_ref) {
35782
36089
  }, messageType);
35783
36090
  setDownloadFilePromise(attachment.id, urlPromise);
35784
36091
  return Promise.resolve(urlPromise).then(function (result) {
35785
- var url = URL.createObjectURL(result.Body);
35786
- setSizeProgress(undefined);
35787
- return Promise.resolve(fetch(url)).then(function (response) {
35788
- setAttachmentToCache(attachment.url, response);
36092
+ function _temp4() {
35789
36093
  setIsCached(true);
35790
36094
  setDownloadingFile(false);
35791
- setAttachmentUrl(url);
35792
- });
36095
+ setAttachmentUrl(downloadingUrl);
36096
+ }
36097
+ var url = URL.createObjectURL(result.Body);
36098
+ setSizeProgress(undefined);
36099
+ var downloadingUrl = url;
36100
+ var _temp3 = function () {
36101
+ if (attachment.type === attachmentTypes.image) {
36102
+ return Promise.resolve(compressAndCacheImage(url, attachment.url, renderWidth, renderHeight)).then(function (compressedUrl) {
36103
+ if (compressedUrl) {
36104
+ downloadingUrl = compressedUrl;
36105
+ }
36106
+ });
36107
+ } else {
36108
+ return Promise.resolve(fetch(url)).then(function (response) {
36109
+ setAttachmentToCache(attachment.url, response);
36110
+ });
36111
+ }
36112
+ }();
36113
+ return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
35793
36114
  });
35794
36115
  } else {
35795
- setAttachmentUrl(attachment.url);
35796
- fetch(attachment.url).then(function (response) {
35797
- try {
35798
- setAttachmentToCache(attachment.url, response);
35799
- setIsCached(true);
35800
- return Promise.resolve();
35801
- } catch (e) {
35802
- return Promise.reject(e);
36116
+ var _temp6 = function _temp6() {
36117
+ setAttachmentUrl(downloadingUrl);
36118
+ };
36119
+ var downloadingUrl = attachment.url;
36120
+ var _temp5 = function () {
36121
+ if (attachment.type === attachmentTypes.image) {
36122
+ return Promise.resolve(compressAndCacheImage(attachment.url, attachment.url, renderWidth, renderHeight)).then(function (compressedUrl) {
36123
+ if (compressedUrl) {
36124
+ downloadingUrl = compressedUrl;
36125
+ }
36126
+ setIsCached(true);
36127
+ });
36128
+ } else {
36129
+ fetch(attachment.url).then(function (response) {
36130
+ try {
36131
+ setAttachmentToCache(attachment.url, response);
36132
+ setIsCached(true);
36133
+ return Promise.resolve();
36134
+ } catch (e) {
36135
+ return Promise.reject(e);
36136
+ }
36137
+ });
35803
36138
  }
35804
- });
36139
+ }();
36140
+ return _temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5);
35805
36141
  }
35806
36142
  }();
35807
- return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
36143
+ return Promise.resolve(_temp7 && _temp7.then ? _temp7.then(function () {}) : void 0);
35808
36144
  } catch (e) {
35809
36145
  return Promise.reject(e);
35810
36146
  }
@@ -35818,61 +36154,68 @@ var Attachment = function Attachment(_ref) {
35818
36154
  if (!attachment.attachmentUrl && connectionStatus === CONNECTION_STATUS.CONNECTED && attachment.id && !(attachment.type === attachmentTypes.file || attachment.type === attachmentTypes.link)) {
35819
36155
  getAttachmentUrlFromCache(attachment.url).then(function (cachedUrl) {
35820
36156
  try {
35821
- if (attachment.type === attachmentTypes.image && !isPreview) {
35822
- if (cachedUrl) {
35823
- setAttachmentUrl(cachedUrl);
35824
- dispatch(setUpdateMessageAttachmentAC(attachment.url, cachedUrl));
35825
- setIsCached(true);
36157
+ var _temp0 = function () {
36158
+ if (attachment.type === attachmentTypes.image && !isPreview) {
36159
+ var _temp9 = function () {
36160
+ if (cachedUrl) {
36161
+ setAttachmentUrl(cachedUrl);
36162
+ dispatch(setUpdateMessageAttachmentAC(attachment.url, cachedUrl));
36163
+ setIsCached(true);
36164
+ } else {
36165
+ setIsCached(false);
36166
+ setDownloadingFile(true);
36167
+ var _temp8 = function () {
36168
+ if (customDownloader) {
36169
+ customDownloader(attachment.url, false, function (progress) {
36170
+ var loadedRes = progress.loaded && progress.loaded / progress.total;
36171
+ var uploadPercent = loadedRes && loadedRes * 100;
36172
+ setSizeProgress({
36173
+ loaded: progress.loaded || 0,
36174
+ total: progress.total || 0
36175
+ });
36176
+ setProgress(uploadPercent);
36177
+ }, messageType).then(function (url) {
36178
+ try {
36179
+ return Promise.resolve(compressAndCacheImage(url, attachment.url, renderWidth, renderHeight)).then(function (compressedUrl) {
36180
+ if (compressedUrl) {
36181
+ setAttachmentUrl(compressedUrl);
36182
+ }
36183
+ downloadImage(compressedUrl || url);
36184
+ setIsCached(true);
36185
+ setDownloadingFile(false);
36186
+ });
36187
+ } catch (e) {
36188
+ return Promise.reject(e);
36189
+ }
36190
+ });
36191
+ } else {
36192
+ return Promise.resolve(compressAndCacheImage(attachment.url, attachment.url, renderWidth, renderHeight)).then(function (compressedUrl) {
36193
+ if (compressedUrl) {
36194
+ setAttachmentUrl(compressedUrl);
36195
+ }
36196
+ downloadImage(compressedUrl || attachment.url);
36197
+ setIsCached(true);
36198
+ });
36199
+ }
36200
+ }();
36201
+ if (_temp8 && _temp8.then) return _temp8.then(function () {});
36202
+ }
36203
+ }();
36204
+ if (_temp9 && _temp9.then) return _temp9.then(function () {});
35826
36205
  } else {
35827
- setIsCached(false);
35828
- setDownloadingFile(true);
35829
- if (customDownloader) {
35830
- customDownloader(attachment.url, false, function (progress) {
35831
- var loadedRes = progress.loaded && progress.loaded / progress.total;
35832
- var uploadPercent = loadedRes && loadedRes * 100;
35833
- setSizeProgress({
35834
- loaded: progress.loaded || 0,
35835
- total: progress.total || 0
35836
- });
35837
- setProgress(uploadPercent);
35838
- }, messageType).then(function (url) {
35839
- try {
35840
- downloadImage(url);
35841
- return Promise.resolve(fetch(url)).then(function (response) {
35842
- setAttachmentToCache(attachment.url, response);
35843
- setIsCached(true);
35844
- setDownloadingFile(false);
35845
- });
35846
- } catch (e) {
35847
- return Promise.reject(e);
35848
- }
35849
- });
36206
+ if (cachedUrl) {
36207
+ setAttachmentUrl(cachedUrl);
36208
+ setIsCached(true);
35850
36209
  } else {
35851
- downloadImage(attachment.url);
35852
- fetch(attachment.url).then(function (response) {
35853
- try {
35854
- setAttachmentToCache(attachment.url, response);
35855
- setIsCached(true);
35856
- return Promise.resolve();
35857
- } catch (e) {
35858
- return Promise.reject(e);
35859
- }
35860
- });
35861
- }
35862
- }
35863
- } else {
35864
- if (cachedUrl) {
35865
- setAttachmentUrl(cachedUrl);
35866
- setIsCached(true);
35867
- } else {
35868
- setIsCached(false);
35869
- if (attachment.type === attachmentTypes.voice) {
35870
- setAttachmentUrl('_');
36210
+ setIsCached(false);
36211
+ if (attachment.type === attachmentTypes.voice) {
36212
+ setAttachmentUrl('_');
36213
+ }
36214
+ handleDownloadFile();
35871
36215
  }
35872
- handleDownloadFile();
35873
36216
  }
35874
- }
35875
- return Promise.resolve();
36217
+ }();
36218
+ return Promise.resolve(_temp0 && _temp0.then ? _temp0.then(function () {}) : void 0);
35876
36219
  } catch (e) {
35877
36220
  return Promise.reject(e);
35878
36221
  }
@@ -35890,11 +36233,25 @@ var Attachment = function Attachment(_ref) {
35890
36233
  setProgress(uploadPercent);
35891
36234
  }, messageType).then(function (url) {
35892
36235
  try {
35893
- return Promise.resolve(fetch(url)).then(function (response) {
35894
- setAttachmentToCache(attachment.url, response);
35895
- setAttachmentUrl(url);
36236
+ var _temp10 = function _temp10() {
36237
+ setAttachmentUrl(downloadingUrl);
35896
36238
  setDownloadingFile(false);
35897
- });
36239
+ };
36240
+ var downloadingUrl = url;
36241
+ var _temp1 = function () {
36242
+ if (attachment.type === attachmentTypes.image) {
36243
+ return Promise.resolve(compressAndCacheImage(url, attachment.url, renderWidth, renderHeight)).then(function (compressedUrl) {
36244
+ if (compressedUrl) {
36245
+ downloadingUrl = compressedUrl;
36246
+ }
36247
+ });
36248
+ } else {
36249
+ return Promise.resolve(fetch(url)).then(function (response) {
36250
+ setAttachmentToCache(attachment.url, response);
36251
+ });
36252
+ }
36253
+ }();
36254
+ return Promise.resolve(_temp1 && _temp1.then ? _temp1.then(_temp10) : _temp10(_temp1));
35898
36255
  } catch (e) {
35899
36256
  return Promise.reject(e);
35900
36257
  }
@@ -35995,12 +36352,18 @@ var Attachment = function Attachment(_ref) {
35995
36352
  isPreview: isPreview,
35996
36353
  isRepliedMessage: isRepliedMessage,
35997
36354
  withBorder: !isPreview && !isDetailsView,
35998
- fitTheContainer: isDetailsView,
36355
+ fitTheContainer: true,
35999
36356
  imageMaxHeight: (renderHeight || 400) + "px",
36357
+ isDetailsView: isDetailsView,
36358
+ loading: 'eager',
36359
+ fetchPriority: 'high',
36360
+ decoding: 'async',
36000
36361
  onLoad: function onLoad() {
36001
36362
  return setImageLoading(false);
36002
- }
36003
- }), !isPreview && (isInUploadingState || imageLoading) ? (/*#__PURE__*/React__default.createElement(UploadProgress, {
36363
+ },
36364
+ width: renderWidth / 2,
36365
+ height: renderHeight / 2
36366
+ }), !isPreview && !isRepliedMessage && (isInUploadingState || imageLoading) ? (/*#__PURE__*/React__default.createElement(UploadProgress, {
36004
36367
  backgroundImage: attachmentThumb,
36005
36368
  isRepliedMessage: isRepliedMessage,
36006
36369
  width: renderWidth,
@@ -36052,7 +36415,7 @@ var Attachment = function Attachment(_ref) {
36052
36415
  return handleMediaItemClick && !downloadingFile && !isInUploadingState && (attachmentCompilationState[attachment.tid] ? attachmentCompilationState[attachment.tid] !== UPLOAD_STATE.FAIL || attachmentCompilationState[attachment.tid] !== UPLOAD_STATE.UPLOADING : true) && handleMediaItemClick(attachment);
36053
36416
  },
36054
36417
  isDetailsView: isDetailsView
36055
- }, isInUploadingState || downloadingFile ? (/*#__PURE__*/React__default.createElement(UploadProgress, {
36418
+ }, (isInUploadingState || downloadingFile) && !isRepliedMessage && !isPreview ? (/*#__PURE__*/React__default.createElement(UploadProgress, {
36056
36419
  isDetailsView: isDetailsView,
36057
36420
  isRepliedMessage: isRepliedMessage,
36058
36421
  withPrefix: withPrefix,
@@ -36095,7 +36458,7 @@ var Attachment = function Attachment(_ref) {
36095
36458
  width: isRepliedMessage ? '40px' : isDetailsView ? '100%' : (renderWidth || videoAttachmentMaxWidth || 420) + "px",
36096
36459
  height: isRepliedMessage ? '40px' : isDetailsView ? '100%' : (renderHeight || videoAttachmentMaxHeight || 240) + "px",
36097
36460
  file: attachment,
36098
- src: attachmentUrl,
36461
+ src: attachment.attachmentUrl || attachmentUrl,
36099
36462
  isCachedFile: isCached,
36100
36463
  uploading: attachmentCompilationState[attachment.tid] && (attachmentCompilationState[attachment.tid] === UPLOAD_STATE.UPLOADING || attachmentCompilationState[attachment.tid] === UPLOAD_STATE.PAUSED),
36101
36464
  borderRadius: isRepliedMessage ? '4px' : borderRadius,
@@ -36156,11 +36519,11 @@ var Attachment = function Attachment(_ref) {
36156
36519
  backgroundColor: backgroundColor && backgroundColor !== 'inherit' ? backgroundColor : overlayBackground2,
36157
36520
  width: '40px',
36158
36521
  height: '40px',
36159
- src: attachment.attachmentUrl,
36522
+ src: attachment.attachmentUrl || attachmentUrl,
36160
36523
  setVideoIsReadyToSend: setVideoIsReadyToSend,
36161
36524
  isPreview: true
36162
36525
  })) : isPreview && attachment.attachmentUrl ? (/*#__PURE__*/React__default.createElement(FileThumbnail, {
36163
- src: attachment.attachmentUrl
36526
+ src: attachment.attachmentUrl || attachmentUrl
36164
36527
  })) : 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, {
36165
36528
  widthThumb: !!attachmentThumb,
36166
36529
  backgroundColor: attachmentThumb ? overlayBackground2 : accentColor,
@@ -36233,7 +36596,7 @@ var AttachmentImgCont = styled.div(_templateObject2$w || (_templateObject2$w = _
36233
36596
  }, function (props) {
36234
36597
  return props.fitTheContainer ? '100%' : props.isRepliedMessage ? '40px' : props.width && props.width + "px";
36235
36598
  }, function (props) {
36236
- return !props.fitTheContainer && !props.isRepliedMessage && props.height && props.width ? "aspect-ratio: " + props.width + " / " + props.height + ";" : "\n height: " + (props.fitTheContainer ? '100%' : props.isRepliedMessage ? '40px' : props.height && props.height + "px") + ";\n ";
36599
+ return !props.fitTheContainer && !props.isRepliedMessage && props.height && props.width ? "aspect-ratio: " + (props.width < 165 ? 165 : props.width) + " / " + (props.width < 165 ? props.height * 165 / props.width : props.height) + ";" : "\n height: " + (props.fitTheContainer ? '100%' : props.isRepliedMessage ? '40px' : props.height && props.height + "px") + ";\n ";
36237
36600
  }, function (props) {
36238
36601
  return props.height && '165px';
36239
36602
  }, function (props) {
@@ -36270,17 +36633,17 @@ var AttachmentFile$1 = styled.div(_templateObject7$e || (_templateObject7$e = _t
36270
36633
  }, function (props) {
36271
36634
  return !props.isRepliedMessage && !props.isPreview && !props.isUploading && "\n &:hover " + DownloadFile$1 + " {\n display: flex;\n }\n\n &:hover " + UploadPercent + " {\n border-radius: 50%\n }\n\n &:hover " + FileThumbnail + " {\n }\n &:hover " + AttachmentIconCont + " {\n display: none;\n }\n ";
36272
36635
  }, AttachmentIconCont);
36273
- var RemoveChosenFile = styled(SvgDeleteUpload)(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 20px;\n height: 20px !important;\n top: -11px;\n right: -11px;\n padding: 2px;\n cursor: pointer;\n color: ", ";\n z-index: 4;\n circle {\n stroke: ", ";\n }\n path {\n stroke: ", ";\n }\n"])), function (props) {
36636
+ var RemoveChosenFile = styled(SvgDeleteUpload)(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 20px;\n height: 20px !important;\n top: -11px;\n right: -11px;\n padding: 2px;\n cursor: pointer;\n color: ", ";\n z-index: 5;\n circle {\n stroke: ", ";\n }\n path {\n stroke: ", ";\n }\n"])), function (props) {
36274
36637
  return props.color;
36275
36638
  }, function (props) {
36276
36639
  return props.backgroundColor;
36277
36640
  }, function (props) {
36278
36641
  return props.backgroundColor;
36279
36642
  });
36280
- var AttachmentName = styled.h3(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n font-size: 15px;\n font-weight: 500;\n line-height: 18px;\n color: ", ";\n max-width: 275px;\n white-space: nowrap;\n margin: 0;\n"])), function (props) {
36643
+ var AttachmentName = styled.h3(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n font-size: 15px;\n font-weight: 500;\n line-height: 18px;\n color: ", ";\n max-width: 275px;\n white-space: nowrap;\n margin: 0;\n"])), function (props) {
36281
36644
  return props.color;
36282
36645
  });
36283
- var AttachmentSize = styled.span(_templateObject0$9 || (_templateObject0$9 = _taggedTemplateLiteralLoose(["\n font-size: 13px;\n color: ", ";\n & > span {\n color: ", ";\n margin-left: 8px;\n }\n"])), function (props) {
36646
+ var AttachmentSize = styled.span(_templateObject0$a || (_templateObject0$a = _taggedTemplateLiteralLoose(["\n font-size: 13px;\n color: ", ";\n & > span {\n color: ", ";\n margin-left: 8px;\n }\n"])), function (props) {
36284
36647
  return props.color;
36285
36648
  }, function (props) {
36286
36649
  return props.errorColor;
@@ -36295,15 +36658,15 @@ var AttachmentImg$1 = styled.img(_templateObject10$3 || (_templateObject10$3 = _
36295
36658
  }, function (props) {
36296
36659
  return props.isRepliedMessage ? '0.5px' : props.withBorder && "2px";
36297
36660
  }, function (props) {
36298
- return props.imageMaxHeight || '400px';
36661
+ return props.imageMaxHeight && !props.isDetailsView ? '400px' : '100%';
36299
36662
  }, function (props) {
36300
36663
  return props.isRepliedMessage ? '40px' : props.isPreview ? '48px' : props.fitTheContainer ? '100%' : '';
36301
36664
  }, function (props) {
36302
36665
  return props.isRepliedMessage ? '40px' : props.isPreview ? '48px' : props.fitTheContainer ? '100%' : '';
36303
36666
  }, function (props) {
36304
- return !props.isRepliedMessage && !props.isPreview && !props.fitTheContainer ? '165px' : props.isRepliedMessage ? '40px' : '';
36667
+ return !props.isRepliedMessage && !props.isPreview && !props.fitTheContainer && !props.isDetailsView ? '165px' : props.isRepliedMessage ? '40px' : '';
36305
36668
  }, function (props) {
36306
- return !props.isRepliedMessage && !props.isPreview && !props.fitTheContainer ? props.imageMinWidth || '165px' : props.isRepliedMessage ? '40px' : '';
36669
+ return !props.isRepliedMessage && !props.isPreview && !props.fitTheContainer && !props.isDetailsView ? props.imageMinWidth || '165px' : props.isRepliedMessage ? '40px' : '';
36307
36670
  }, function (props) {
36308
36671
  return props.hidden && 'hidden';
36309
36672
  });
@@ -36923,7 +37286,7 @@ var EMOJIS = [{
36923
37286
  }]
36924
37287
  }];
36925
37288
 
36926
- var _templateObject$D, _templateObject2$y, _templateObject3$s, _templateObject4$o, _templateObject5$j, _templateObject6$g, _templateObject7$f, _templateObject8$d;
37289
+ var _templateObject$D, _templateObject2$y, _templateObject3$s, _templateObject4$o, _templateObject5$j, _templateObject6$g, _templateObject7$f, _templateObject8$e;
36927
37290
  var EmojiIcon = function EmojiIcon(_ref) {
36928
37291
  var collectionName = _ref.collectionName;
36929
37292
  switch (collectionName) {
@@ -37135,7 +37498,7 @@ var EmojiFooter = styled.div(_templateObject7$f || (_templateObject7$f = _tagged
37135
37498
  }, function (props) {
37136
37499
  return props.emojisCategoryIconsPosition === 'top' && "1px solid " + props.borderColor;
37137
37500
  });
37138
- var Emoji = styled.li(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 32px;\n height: 32px;\n margin: 0 2px;\n display: inline-block;\n box-sizing: border-box;\n border-radius: 50%;\n padding-top: 2px;\n text-align: center;\n background: transparent;\n font-family:\n apple color emoji,\n segoe ui emoji,\n noto color emoji,\n android emoji,\n emojisymbols,\n emojione mozilla,\n twemoji mozilla,\n segoe ui symbol;\n & > * {\n font-size: 22px;\n }\n &:hover {\n background: ", ";\n }\n"])), function (props) {
37501
+ var Emoji = styled.li(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 32px;\n height: 32px;\n margin: 0 2px;\n display: inline-block;\n box-sizing: border-box;\n border-radius: 50%;\n padding-top: 2px;\n text-align: center;\n background: transparent;\n font-family:\n apple color emoji,\n segoe ui emoji,\n noto color emoji,\n android emoji,\n emojisymbols,\n emojione mozilla,\n twemoji mozilla,\n segoe ui symbol;\n & > * {\n font-size: 22px;\n }\n &:hover {\n background: ", ";\n }\n"])), function (props) {
37139
37502
  return props.hoverBackgroundColor;
37140
37503
  });
37141
37504
 
@@ -37309,7 +37672,7 @@ var OpenMoreEmojis = styled.span(_templateObject3$t || (_templateObject3$t = _ta
37309
37672
  return props.iconHoverColor;
37310
37673
  });
37311
37674
 
37312
- var _templateObject$F, _templateObject2$A, _templateObject3$u, _templateObject4$p, _templateObject5$k, _templateObject6$h, _templateObject7$g, _templateObject8$e, _templateObject9$b, _templateObject0$a, _templateObject1$7, _templateObject10$4;
37675
+ var _templateObject$F, _templateObject2$A, _templateObject3$u, _templateObject4$p, _templateObject5$k, _templateObject6$h, _templateObject7$g, _templateObject8$f, _templateObject9$c, _templateObject0$b, _templateObject1$7, _templateObject10$4;
37313
37676
  var POLL_VOTES_LIMIT = 20;
37314
37677
  var AllVotesPopup = function AllVotesPopup(_ref) {
37315
37678
  var _pollVotesHasMore$key, _poll$voteDetails, _poll$voteDetails$vot, _poll$voteDetails3;
@@ -37450,13 +37813,13 @@ var LoadingText = styled.div(_templateObject6$h || (_templateObject6$h = _tagged
37450
37813
  return p.color;
37451
37814
  });
37452
37815
  var TitleWrapper = styled.div(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n max-width: calc(100% - 54px);\n margin: 0 auto;\n"])));
37453
- var BackButton = styled.button(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 13px;\n top: 13px;\n padding: 9px;\n cursor: pointer;\n box-sizing: content-box;\n background: transparent;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n color: ", ";\n flex-shrink: 0;\n\n & > svg {\n width: 24px;\n height: 24px;\n }\n\n &:hover {\n opacity: 0.7;\n }\n"])), function (p) {
37816
+ var BackButton = styled.button(_templateObject8$f || (_templateObject8$f = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 13px;\n top: 13px;\n padding: 9px;\n cursor: pointer;\n box-sizing: content-box;\n background: transparent;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n color: ", ";\n flex-shrink: 0;\n\n & > svg {\n width: 24px;\n height: 24px;\n }\n\n &:hover {\n opacity: 0.7;\n }\n"])), function (p) {
37454
37817
  return p.color;
37455
37818
  });
37456
- var VotesContainer = styled.div(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n padding: 0 2px 8px 16px;\n border-radius: 10px;\n background-color: ", ";\n margin-top: 16px;\n"])), function (p) {
37819
+ var VotesContainer = styled.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n padding: 0 2px 8px 16px;\n border-radius: 10px;\n background-color: ", ";\n margin-top: 16px;\n"])), function (p) {
37457
37820
  return p.backgroundColor;
37458
37821
  });
37459
- var VotesCount = styled.div(_templateObject0$a || (_templateObject0$a = _taggedTemplateLiteralLoose(["\n color: ", ";\n font-weight: 400;\n font-size: 15px;\n line-height: 20px;\n letter-spacing: -0.4px;\n padding: 12px 0;\n"])), function (p) {
37822
+ var VotesCount = styled.div(_templateObject0$b || (_templateObject0$b = _taggedTemplateLiteralLoose(["\n color: ", ";\n font-weight: 400;\n font-size: 15px;\n line-height: 20px;\n letter-spacing: -0.4px;\n padding: 12px 0;\n"])), function (p) {
37460
37823
  return p.color;
37461
37824
  });
37462
37825
  var LoaderContainer = styled.div(_templateObject1$7 || (_templateObject1$7 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px 0;\n min-height: 100px;\n"])));
@@ -37466,7 +37829,7 @@ var Loader = styled.div(_templateObject10$4 || (_templateObject10$4 = _taggedTem
37466
37829
  return p.color;
37467
37830
  });
37468
37831
 
37469
- var _templateObject$G, _templateObject2$B, _templateObject3$v, _templateObject4$q, _templateObject5$l, _templateObject6$i, _templateObject7$h, _templateObject8$f, _templateObject9$c, _templateObject0$b, _templateObject1$8, _templateObject10$5;
37832
+ var _templateObject$G, _templateObject2$B, _templateObject3$v, _templateObject4$q, _templateObject5$l, _templateObject6$i, _templateObject7$h, _templateObject8$g, _templateObject9$d, _templateObject0$c, _templateObject1$8, _templateObject10$5;
37470
37833
  var VotesResultsPopup = function VotesResultsPopup(_ref) {
37471
37834
  var _poll$voteDetails3, _poll$voteDetails4, _poll$options$find;
37472
37835
  var onClose = _ref.onClose,
@@ -37624,11 +37987,11 @@ var OptionCount = styled.div(_templateObject5$l || (_templateObject5$l = _tagged
37624
37987
  });
37625
37988
  var Voters = styled.div(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-bottom: 5px;\n"])));
37626
37989
  var VoterRow$1 = styled.div(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 6px 0;\n"])));
37627
- var VoterInfo$1 = styled.div(_templateObject8$f || (_templateObject8$f = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n justify-content: space-between;\n"])));
37628
- var VoterName$1 = styled.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n color: ", ";\n font-weight: 500;\n font-size: 15px;\n line-height: 20px;\n letter-spacing: -0.2px;\n max-width: calc(100% - 120px);\n"])), function (p) {
37990
+ var VoterInfo$1 = styled.div(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n justify-content: space-between;\n"])));
37991
+ var VoterName$1 = styled.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n color: ", ";\n font-weight: 500;\n font-size: 15px;\n line-height: 20px;\n letter-spacing: -0.2px;\n max-width: calc(100% - 120px);\n"])), function (p) {
37629
37992
  return p.color;
37630
37993
  });
37631
- var VotedAt$1 = styled.div(_templateObject0$b || (_templateObject0$b = _taggedTemplateLiteralLoose(["\n color: ", ";\n font-weight: 400;\n font-size: 15px;\n line-height: 20px;\n letter-spacing: -0.2px;\n"])), function (p) {
37994
+ var VotedAt$1 = styled.div(_templateObject0$c || (_templateObject0$c = _taggedTemplateLiteralLoose(["\n color: ", ";\n font-weight: 400;\n font-size: 15px;\n line-height: 20px;\n letter-spacing: -0.2px;\n"])), function (p) {
37632
37995
  return p.color;
37633
37996
  });
37634
37997
  var TitleWrapper$1 = styled.div(_templateObject1$8 || (_templateObject1$8 = _taggedTemplateLiteralLoose(["\n margin: 0 auto;\n border-radius: 10px;\n padding: 16px;\n background: ", ";\n margin-bottom: 16px;\n"])), function (p) {
@@ -37660,7 +38023,7 @@ function SvgFilledCheckbox(props) {
37660
38023
  })));
37661
38024
  }
37662
38025
 
37663
- var _templateObject$H, _templateObject2$C, _templateObject3$w, _templateObject4$r, _templateObject5$m, _templateObject6$j, _templateObject7$i, _templateObject8$g, _templateObject9$d, _templateObject0$c, _templateObject1$9, _templateObject10$6, _templateObject11$4, _templateObject12$3;
38026
+ var _templateObject$H, _templateObject2$C, _templateObject3$w, _templateObject4$r, _templateObject5$m, _templateObject6$j, _templateObject7$i, _templateObject8$h, _templateObject9$e, _templateObject0$d, _templateObject1$9, _templateObject10$6, _templateObject11$4, _templateObject12$3;
37664
38027
  var PollMessage = function PollMessage(_ref) {
37665
38028
  var _poll$voteDetails3, _poll$voteDetails4, _poll$voteDetails5, _poll$voteDetails6, _poll$voteDetails7;
37666
38029
  var message = _ref.message,
@@ -37831,13 +38194,13 @@ var Indicator = styled.div(_templateObject7$i || (_templateObject7$i = _taggedTe
37831
38194
  }, function (p) {
37832
38195
  return p.disabled ? 'not-allowed' : 'pointer';
37833
38196
  });
37834
- var EmptyCircle = styled.span(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n display: inline-block;\n width: 18.5px;\n height: 18.5px;\n border-radius: 50%;\n border: 1px solid ", ";\n box-sizing: border-box;\n"])), function (p) {
38197
+ var EmptyCircle = styled.span(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n display: inline-block;\n width: 18.5px;\n height: 18.5px;\n border-radius: 50%;\n border: 1px solid ", ";\n box-sizing: border-box;\n"])), function (p) {
37835
38198
  return p.border;
37836
38199
  });
37837
- var StyledCheck = styled(SvgFilledCheckbox)(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n color: ", ";\n width: 18.5px;\n height: 18.5px;\n"])), function (p) {
38200
+ var StyledCheck = styled(SvgFilledCheckbox)(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n color: ", ";\n width: 18.5px;\n height: 18.5px;\n"])), function (p) {
37838
38201
  return p.color;
37839
38202
  });
37840
- var Title$2 = styled.div(_templateObject0$c || (_templateObject0$c = _taggedTemplateLiteralLoose(["\n flex: 1 1 auto;\n color: ", ";\n margin-right: auto;\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n max-width: calc(100% - 80px);\n word-break: break-word;\n"])), function (p) {
38203
+ var Title$2 = styled.div(_templateObject0$d || (_templateObject0$d = _taggedTemplateLiteralLoose(["\n flex: 1 1 auto;\n color: ", ";\n margin-right: auto;\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n max-width: calc(100% - 80px);\n word-break: break-word;\n"])), function (p) {
37841
38204
  return p.color;
37842
38205
  });
37843
38206
  var Votes = styled.span(_templateObject1$9 || (_templateObject1$9 = _taggedTemplateLiteralLoose(["\n color: ", ";\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n margin-left: 4px;\n cursor: ", ";\n"])), function (p) {
@@ -37855,7 +38218,7 @@ var UsersContainer = styled.div(_templateObject12$3 || (_templateObject12$3 = _t
37855
38218
  return p.cursor;
37856
38219
  });
37857
38220
 
37858
- var _templateObject$I, _templateObject2$D, _templateObject3$x, _templateObject4$s, _templateObject5$n, _templateObject6$k, _templateObject7$j, _templateObject8$h, _templateObject9$e, _templateObject0$d, _templateObject1$a;
38221
+ var _templateObject$I, _templateObject2$D, _templateObject3$x, _templateObject4$s, _templateObject5$n, _templateObject6$k, _templateObject7$j, _templateObject8$i, _templateObject9$f, _templateObject0$e, _templateObject1$a;
37859
38222
  var validateUrl = function validateUrl(url) {
37860
38223
  try {
37861
38224
  var urlObj = new URL(url);
@@ -38311,12 +38674,12 @@ var Img = styled.img(_templateObject7$j || (_templateObject7$j = _taggedTemplate
38311
38674
  var shouldAnimate = _ref22.shouldAnimate;
38312
38675
  return shouldAnimate && "\n animation: fadeIn 0.4s ease-out forwards;\n ";
38313
38676
  });
38314
- var OGRow = styled.div(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: 0;\n"])));
38315
- var OGTextWrapper = styled.div(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n flex: 1 1 auto;\n"])));
38316
- var FaviconContainer = styled.div(_templateObject0$d || (_templateObject0$d = _taggedTemplateLiteralLoose(["\n width: 52px;\n height: 52px;\n border-radius: 8px;\n overflow: hidden;\n margin: 8px;\n flex: 0 0 52px;\n"])));
38677
+ var OGRow = styled.div(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: 0;\n"])));
38678
+ var OGTextWrapper = styled.div(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n flex: 1 1 auto;\n"])));
38679
+ var FaviconContainer = styled.div(_templateObject0$e || (_templateObject0$e = _taggedTemplateLiteralLoose(["\n width: 52px;\n height: 52px;\n border-radius: 8px;\n overflow: hidden;\n margin: 8px;\n flex: 0 0 52px;\n"])));
38317
38680
  var FaviconImg = styled.img(_templateObject1$a || (_templateObject1$a = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n"])));
38318
38681
 
38319
- var _templateObject$J, _templateObject2$E, _templateObject3$y, _templateObject4$t, _templateObject5$o, _templateObject6$l, _templateObject7$k, _templateObject8$i, _templateObject9$f, _templateObject0$e;
38682
+ var _templateObject$J, _templateObject2$E, _templateObject3$y, _templateObject4$t, _templateObject5$o, _templateObject6$l, _templateObject7$k, _templateObject8$j, _templateObject9$g, _templateObject0$f;
38320
38683
  var MessageBody = function MessageBody(_ref) {
38321
38684
  var _message$attachments2, _message$attachments3, _message$pollDetails, _message$pollDetails2;
38322
38685
  var message = _ref.message,
@@ -39066,19 +39429,19 @@ var EmojiContainer = styled.div(_templateObject7$k || (_templateObject7$k = _tag
39066
39429
  }, function (props) {
39067
39430
  return props.position === 'top' && 'calc(100% + 4px)';
39068
39431
  });
39069
- var FrequentlyEmojisContainer = styled.div(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: ", ";\n right: ", ";\n top: -50px;\n z-index: 99;\n"])), function (props) {
39432
+ var FrequentlyEmojisContainer = styled.div(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: ", ";\n right: ", ";\n top: -50px;\n z-index: 99;\n"])), function (props) {
39070
39433
  return props.rtlDirection ? '' : '0';
39071
39434
  }, function (props) {
39072
39435
  return props.rtlDirection && '0';
39073
39436
  });
39074
- var TextContentContainer = styled.div(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n overflow: hidden;\n height: ", ";\n transition: height 0.3s ease-out;\n"])), function (props) {
39437
+ var TextContentContainer = styled.div(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n overflow: hidden;\n height: ", ";\n transition: height 0.3s ease-out;\n"])), function (props) {
39075
39438
  return props.textHeight !== 'auto' ? props.textHeight + "px" : 'auto';
39076
39439
  });
39077
- var ReadMoreLink = styled.span(_templateObject0$e || (_templateObject0$e = _taggedTemplateLiteralLoose(["\n display: block;\n color: ", ";\n cursor: pointer;\n font-weight: 500;\n margin-top: 8px;\n font-style: Medium;\n font-size: 15px;\n line-height: 20px;\n letter-spacing: -0.4px;\n user-select: none;\n transition: opacity 0.2s ease;\n"])), function (props) {
39440
+ var ReadMoreLink = styled.span(_templateObject0$f || (_templateObject0$f = _taggedTemplateLiteralLoose(["\n display: block;\n color: ", ";\n cursor: pointer;\n font-weight: 500;\n margin-top: 8px;\n font-style: Medium;\n font-size: 15px;\n line-height: 20px;\n letter-spacing: -0.4px;\n user-select: none;\n transition: opacity 0.2s ease;\n"])), function (props) {
39078
39441
  return props.accentColor;
39079
39442
  });
39080
39443
 
39081
- var _templateObject$K, _templateObject2$F, _templateObject3$z, _templateObject4$u, _templateObject5$p, _templateObject6$m, _templateObject7$l, _templateObject8$j, _templateObject9$g, _templateObject0$f, _templateObject1$b;
39444
+ var _templateObject$K, _templateObject2$F, _templateObject3$z, _templateObject4$u, _templateObject5$p, _templateObject6$m, _templateObject7$l, _templateObject8$k, _templateObject9$h, _templateObject0$g, _templateObject1$b;
39082
39445
  var defaultFormatDate = function defaultFormatDate(date) {
39083
39446
  var m = moment(date);
39084
39447
  if (m.isSame(moment(), 'day')) {
@@ -39579,10 +39942,10 @@ var RowTitle = styled.div(_templateObject6$m || (_templateObject6$m = _taggedTem
39579
39942
  var RowDate = styled.div(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose(["\n color: ", ";\n min-width: max-content;\n font-weight: 400;\n font-size: 13px;\n line-height: 16px;\n"])), function (p) {
39580
39943
  return p.color;
39581
39944
  });
39582
- var Empty = styled.div(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n color: ", ";\n text-align: center;\n padding: 16px 0;\n font-size: 14px;\n height: calc(100% - 32px);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n"])), function (p) {
39945
+ var Empty = styled.div(_templateObject8$k || (_templateObject8$k = _taggedTemplateLiteralLoose(["\n color: ", ";\n text-align: center;\n padding: 16px 0;\n font-size: 14px;\n height: calc(100% - 32px);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n"])), function (p) {
39583
39946
  return p.color;
39584
39947
  });
39585
- var DropdownRoot = styled.div(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: ", ";\n bottom: ", ";\n ", "\n transform: ", ";\n z-index: 15;\n background: ", ";\n box-shadow: 0px 0px 24px 0px #11153929;\n border-radius: 16px;\n direction: initial;\n visibility: ", ";\n"])), function (p) {
39948
+ var DropdownRoot = styled.div(_templateObject9$h || (_templateObject9$h = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: ", ";\n bottom: ", ";\n ", "\n transform: ", ";\n z-index: 15;\n background: ", ";\n box-shadow: 0px 0px 24px 0px #11153929;\n border-radius: 16px;\n direction: initial;\n visibility: ", ";\n"])), function (p) {
39586
39949
  return p.flip ? 'auto' : "calc(100% + " + p.verticalOffset + "px)";
39587
39950
  }, function (p) {
39588
39951
  return p.flip ? "calc(100% + " + p.verticalOffset + "px)" : 'auto';
@@ -39596,7 +39959,7 @@ var DropdownRoot = styled.div(_templateObject9$g || (_templateObject9$g = _tagge
39596
39959
  }, function (p) {
39597
39960
  return p.ready ? 'visible' : 'hidden';
39598
39961
  });
39599
- var Panel = styled.div(_templateObject0$f || (_templateObject0$f = _taggedTemplateLiteralLoose(["\n background: ", ";\n border-radius: 16px;\n overflow: hidden;\n transition: height 0.25s ease;\n height: ", ";\n width: ", ";\n min-width: ", ";\n display: flex;\n flex-direction: column;\n"])), function (p) {
39962
+ var Panel = styled.div(_templateObject0$g || (_templateObject0$g = _taggedTemplateLiteralLoose(["\n background: ", ";\n border-radius: 16px;\n overflow: hidden;\n transition: height 0.25s ease;\n height: ", ";\n width: ", ";\n min-width: ", ";\n display: flex;\n flex-direction: column;\n"])), function (p) {
39600
39963
  return p.bg;
39601
39964
  }, function (p) {
39602
39965
  return p.open ? Math.min(p.heightPx || 0, parseInt(String(p.maxHeight || '300'), 10) || 300) + "px" : '0';
@@ -39622,7 +39985,7 @@ function ConfirmEndPollPopup(_ref) {
39622
39985
  });
39623
39986
  }
39624
39987
 
39625
- var _templateObject$L, _templateObject2$G, _templateObject3$A, _templateObject4$v, _templateObject5$q, _templateObject6$n, _templateObject7$m, _templateObject8$k, _templateObject9$h, _templateObject0$g, _templateObject1$c, _templateObject10$7, _templateObject11$5, _templateObject12$4;
39988
+ var _templateObject$L, _templateObject2$G, _templateObject3$A, _templateObject4$v, _templateObject5$q, _templateObject6$n, _templateObject7$m, _templateObject8$l, _templateObject9$i, _templateObject0$h, _templateObject1$c, _templateObject10$7, _templateObject11$5, _templateObject12$4;
39626
39989
  var Message$1 = function Message(_ref) {
39627
39990
  var message = _ref.message,
39628
39991
  channel = _ref.channel,
@@ -40468,12 +40831,12 @@ var SelectMessageWrapper = styled.div(_templateObject7$m || (_templateObject7$m
40468
40831
  }, function (props) {
40469
40832
  return props.activeColor;
40470
40833
  });
40471
- var EmptySelection = styled.span(_templateObject8$k || (_templateObject8$k = _taggedTemplateLiteralLoose(["\n display: inline-block;\n width: 24px;\n height: 24px;\n border: 1.5px solid ", ";\n box-sizing: border-box;\n border-radius: 50%;\n transform: scale(0.92);\n opacity: ", ";\n"])), function (props) {
40834
+ var EmptySelection = styled.span(_templateObject8$l || (_templateObject8$l = _taggedTemplateLiteralLoose(["\n display: inline-block;\n width: 24px;\n height: 24px;\n border: 1.5px solid ", ";\n box-sizing: border-box;\n border-radius: 50%;\n transform: scale(0.92);\n opacity: ", ";\n"])), function (props) {
40472
40835
  return props.borderColor;
40473
40836
  }, function (props) {
40474
40837
  return props.disabled && '0.5';
40475
40838
  });
40476
- var ReactionsContainer = styled.div(_templateObject9$h || (_templateObject9$h = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n margin-left: ", ";\n margin-right: ", ";\n\n margin-top: 4px;\n justify-content: flex-end;\n border: ", ";\n box-shadow: ", ";\n filter: drop-shadow(0px 0px 2px rgba(17, 21, 57, 0.08));\n border-radius: ", ";\n background-color: ", ";\n padding: ", ";\n z-index: 9;\n ", ";\n overflow: hidden;\n height: ", ";\n transition: all 0.3s;\n"])), function (props) {
40839
+ var ReactionsContainer = styled.div(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n margin-left: ", ";\n margin-right: ", ";\n\n margin-top: 4px;\n justify-content: flex-end;\n border: ", ";\n box-shadow: ", ";\n filter: drop-shadow(0px 0px 2px rgba(17, 21, 57, 0.08));\n border-radius: ", ";\n background-color: ", ";\n padding: ", ";\n z-index: 9;\n ", ";\n overflow: hidden;\n height: ", ";\n transition: all 0.3s;\n"])), function (props) {
40477
40840
  return props.rtlDirection && 'auto';
40478
40841
  }, function (props) {
40479
40842
  return !props.rtlDirection && 'auto';
@@ -40492,7 +40855,7 @@ var ReactionsContainer = styled.div(_templateObject9$h || (_templateObject9$h =
40492
40855
  }, function (props) {
40493
40856
  return props.isReacted ? '16px' : '0';
40494
40857
  });
40495
- var MessageReactionsCont = styled.div(_templateObject0$g || (_templateObject0$g = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-flex;\n max-width: 300px;\n direction: ", ";\n cursor: pointer;\n"])), function (props) {
40858
+ var MessageReactionsCont = styled.div(_templateObject0$h || (_templateObject0$h = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-flex;\n max-width: 300px;\n direction: ", ";\n cursor: pointer;\n"])), function (props) {
40496
40859
  return props.rtlDirection && 'ltr';
40497
40860
  });
40498
40861
  var MessageStatus$1 = styled.span(_templateObject1$c || (_templateObject1$c = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n margin-left: 4px;\n text-align: right;\n height: ", ";\n & > svg {\n height: 16px;\n width: 16px;\n }\n"])), function (props) {
@@ -40534,7 +40897,7 @@ var MessageItem = styled.div(_templateObject12$4 || (_templateObject12$4 = _tagg
40534
40897
  return props.hoverBackground || '';
40535
40898
  }, HiddenMessageTime$1, MessageStatus$1);
40536
40899
 
40537
- var _templateObject$M, _templateObject2$H, _templateObject3$B, _templateObject4$w, _templateObject5$r, _templateObject6$o, _templateObject7$n, _templateObject8$l, _templateObject9$i, _templateObject0$h, _templateObject1$d;
40900
+ var _templateObject$M, _templateObject2$H, _templateObject3$B, _templateObject4$w, _templateObject5$r, _templateObject6$o, _templateObject7$n, _templateObject8$m, _templateObject9$j, _templateObject0$i, _templateObject1$d;
40538
40901
  var CreateMessageDateDivider = function CreateMessageDateDivider(_ref) {
40539
40902
  var lastIndex = _ref.lastIndex,
40540
40903
  currentMessageDate = _ref.currentMessageDate,
@@ -41662,13 +42025,13 @@ var DropAttachmentArea = styled.div(_templateObject7$n || (_templateObject7$n =
41662
42025
  }, IconWrapper$1, function (props) {
41663
42026
  return props.iconBackgroundColor;
41664
42027
  });
41665
- var MessageWrapper = styled.div(_templateObject8$l || (_templateObject8$l = _taggedTemplateLiteralLoose(["\n &.highlight {\n & .message_item {\n transition: all 0.2s ease-in-out;\n padding-top: 4px;\n padding-bottom: 4px;\n background-color: ", ";\n }\n }\n\n & .message_item {\n transition: all 0.2s ease-in-out;\n }\n"])), function (props) {
42028
+ var MessageWrapper = styled.div(_templateObject8$m || (_templateObject8$m = _taggedTemplateLiteralLoose(["\n &.highlight {\n & .message_item {\n transition: all 0.2s ease-in-out;\n padding-top: 4px;\n padding-bottom: 4px;\n background-color: ", ";\n }\n }\n\n & .message_item {\n transition: all 0.2s ease-in-out;\n }\n"])), function (props) {
41666
42029
  return props.highlightBg || '#d5d5d5';
41667
42030
  });
41668
- var NoMessagesContainer = styled.div(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n height: 100%;\n width: 100%;\n font-weight: 400;\n font-size: 15px;\n line-height: 18px;\n letter-spacing: -0.2px;\n color: ", ";\n"])), function (props) {
42031
+ var NoMessagesContainer = styled.div(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n height: 100%;\n width: 100%;\n font-weight: 400;\n font-size: 15px;\n line-height: 18px;\n letter-spacing: -0.2px;\n color: ", ";\n"])), function (props) {
41669
42032
  return props.color;
41670
42033
  });
41671
- var NoMessagesTitle = styled.h4(_templateObject0$h || (_templateObject0$h = _taggedTemplateLiteralLoose(["\n margin: 12px 0 8px;\n font-family: Inter, sans-serif;\n text-align: center;\n font-size: 20px;\n font-style: normal;\n font-weight: 500;\n line-height: 24px;\n color: ", ";\n"])), function (props) {
42034
+ var NoMessagesTitle = styled.h4(_templateObject0$i || (_templateObject0$i = _taggedTemplateLiteralLoose(["\n margin: 12px 0 8px;\n font-family: Inter, sans-serif;\n text-align: center;\n font-size: 20px;\n font-style: normal;\n font-weight: 500;\n line-height: 24px;\n color: ", ";\n"])), function (props) {
41672
42035
  return props.color;
41673
42036
  });
41674
42037
  var NoMessagesText = styled.p(_templateObject1$d || (_templateObject1$d = _taggedTemplateLiteralLoose(["\n margin: 0;\n text-align: center;\n font-feature-settings:\n 'clig' off,\n 'liga' off;\n font-family: Inter, sans-serif;\n font-size: 15px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n color: ", ";\n"])), function (props) {
@@ -43383,7 +43746,7 @@ function FormatMessagePlugin(_ref3) {
43383
43746
  return null;
43384
43747
  }
43385
43748
 
43386
- var _templateObject$P, _templateObject2$K, _templateObject3$D, _templateObject4$y, _templateObject5$t, _templateObject6$q, _templateObject7$o, _templateObject8$m;
43749
+ var _templateObject$P, _templateObject2$K, _templateObject3$D, _templateObject4$y, _templateObject5$t, _templateObject6$q, _templateObject7$o, _templateObject8$n;
43387
43750
  var EmojiIcon$1 = function EmojiIcon(_ref) {
43388
43751
  var collectionName = _ref.collectionName;
43389
43752
  switch (collectionName) {
@@ -43615,7 +43978,7 @@ var EmojiFooter$1 = styled.div(_templateObject7$o || (_templateObject7$o = _tagg
43615
43978
  }, function (props) {
43616
43979
  return props.emojisCategoryIconsPosition === 'top' && "1px solid " + props.borderColor;
43617
43980
  });
43618
- var Emoji$1 = styled.li(_templateObject8$m || (_templateObject8$m = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 32px;\n height: 32px;\n margin: 0 2px;\n display: inline-block;\n box-sizing: border-box;\n border-radius: 50%;\n padding-top: 2px;\n text-align: center;\n background: transparent;\n font-family:\n apple color emoji,\n segoe ui emoji,\n noto color emoji,\n android emoji,\n emojisymbols,\n emojione mozilla,\n twemoji mozilla,\n segoe ui symbol;\n & > * {\n font-size: 22px;\n }\n &:hover {\n background: ", ";\n }\n"])), function (props) {
43981
+ var Emoji$1 = styled.li(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 32px;\n height: 32px;\n margin: 0 2px;\n display: inline-block;\n box-sizing: border-box;\n border-radius: 50%;\n padding-top: 2px;\n text-align: center;\n background: transparent;\n font-family:\n apple color emoji,\n segoe ui emoji,\n noto color emoji,\n android emoji,\n emojisymbols,\n emojione mozilla,\n twemoji mozilla,\n segoe ui symbol;\n & > * {\n font-size: 22px;\n }\n &:hover {\n background: ", ";\n }\n"])), function (props) {
43619
43982
  return props.hoverBackgroundColor;
43620
43983
  });
43621
43984
 
@@ -44595,7 +44958,7 @@ function SvgDotsVertica(props) {
44595
44958
  })));
44596
44959
  }
44597
44960
 
44598
- var _templateObject$S, _templateObject2$N, _templateObject3$G, _templateObject4$A, _templateObject5$v, _templateObject6$s, _templateObject7$q, _templateObject8$n, _templateObject9$j;
44961
+ var _templateObject$S, _templateObject2$N, _templateObject3$G, _templateObject4$A, _templateObject5$v, _templateObject6$s, _templateObject7$q, _templateObject8$o, _templateObject9$k;
44599
44962
  var CreatePollPopup = function CreatePollPopup(_ref) {
44600
44963
  var togglePopup = _ref.togglePopup,
44601
44964
  onCreate = _ref.onCreate;
@@ -45010,12 +45373,12 @@ var AddOptionButton = styled.button(_templateObject7$q || (_templateObject7$q =
45010
45373
  }, function (props) {
45011
45374
  return props.disabled ? 0.5 : 1;
45012
45375
  });
45013
- var Settings = styled.div(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-top: 8px;\n"])));
45014
- var SettingItem = styled.div(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 10px;\n color: ", ";\n"])), function (props) {
45376
+ var Settings = styled.div(_templateObject8$o || (_templateObject8$o = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-top: 8px;\n"])));
45377
+ var SettingItem = styled.div(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 10px;\n color: ", ";\n"])), function (props) {
45015
45378
  return props.color;
45016
45379
  });
45017
45380
 
45018
- var _templateObject$T, _templateObject2$O, _templateObject3$H, _templateObject4$B, _templateObject5$w, _templateObject6$t, _templateObject7$r, _templateObject8$o, _templateObject9$k, _templateObject0$i, _templateObject1$e, _templateObject10$8, _templateObject11$6, _templateObject12$5, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1, _templateObject35$1, _templateObject36$1;
45381
+ var _templateObject$T, _templateObject2$O, _templateObject3$H, _templateObject4$B, _templateObject5$w, _templateObject6$t, _templateObject7$r, _templateObject8$p, _templateObject9$l, _templateObject0$j, _templateObject1$e, _templateObject10$8, _templateObject11$6, _templateObject12$5, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1, _templateObject35$1, _templateObject36$1;
45019
45382
  function AutoFocusPlugin(_ref) {
45020
45383
  var messageForReply = _ref.messageForReply;
45021
45384
  var _useLexicalComposerCo = useLexicalComposerContext(),
@@ -46809,11 +47172,11 @@ var WarningIconWrapper = styled.div(_templateObject6$t || (_templateObject6$t =
46809
47172
  var WarningText = styled.span(_templateObject7$r || (_templateObject7$r = _taggedTemplateLiteralLoose(["\n color: ", ";\n font-weight: 400;\n font-size: 14px;\n line-height: 18px;\n"])), function (props) {
46810
47173
  return props.color;
46811
47174
  });
46812
- var CloseEditMode = styled.span(_templateObject8$o || (_templateObject8$o = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 8px;\n right: 12px;\n width: 20px;\n height: 20px;\n text-align: center;\n line-height: 22px;\n cursor: pointer;\n\n & > svg {\n color: ", ";\n }\n"])), function (props) {
47175
+ var CloseEditMode = styled.span(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 8px;\n right: 12px;\n width: 20px;\n height: 20px;\n text-align: center;\n line-height: 22px;\n cursor: pointer;\n\n & > svg {\n color: ", ";\n }\n"])), function (props) {
46813
47176
  return props.color;
46814
47177
  });
46815
- var UserName$1 = styled.span(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n font-weight: 500;\n margin-left: 4px;\n"])));
46816
- var ReplyMessageBody$1 = styled.div(_templateObject0$i || (_templateObject0$i = _taggedTemplateLiteralLoose(["\n word-break: break-word;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n a {\n color: ", ";\n }\n"])), function (props) {
47178
+ var UserName$1 = styled.span(_templateObject9$l || (_templateObject9$l = _taggedTemplateLiteralLoose(["\n font-weight: 500;\n margin-left: 4px;\n"])));
47179
+ var ReplyMessageBody$1 = styled.div(_templateObject0$j || (_templateObject0$j = _taggedTemplateLiteralLoose(["\n word-break: break-word;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n a {\n color: ", ";\n }\n"])), function (props) {
46817
47180
  return props.linkColor;
46818
47181
  });
46819
47182
  var EditReplyMessageHeader = styled.h4(_templateObject1$e || (_templateObject1$e = _taggedTemplateLiteralLoose(["\n display: flex;\n margin: 0 0 2px;\n font-weight: 400;\n font-size: 13px;\n line-height: 16px;\n color: ", ";\n\n > svg {\n margin-right: 4px;\n width: 16px;\n height: 16px;\n }\n"])), function (props) {
@@ -47283,7 +47646,7 @@ var StyledPopupName = styled(PopupName)(_templateObject$U || (_templateObject$U
47283
47646
  var StyledPopupDescription = styled(PopupDescription)(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n font-weight: 400;\n font-style: normal;\n font-size: 15px;\n line-height: 150%;\n letter-spacing: 0%;\n margin-top: 0;\n margin-bottom: 0;\n width: 437px;\n height: 68px;\n opacity: 1;\n display: block;\n overflow-wrap: break-word;\n word-wrap: break-word;\n"])));
47284
47647
  var CloseButton$1 = styled(Button)(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n width: 73px;\n height: 36px;\n min-width: 73px;\n max-width: 73px;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
47285
47648
 
47286
- var _templateObject$V, _templateObject2$Q, _templateObject3$J, _templateObject4$C, _templateObject5$x, _templateObject6$u, _templateObject7$s, _templateObject8$p;
47649
+ var _templateObject$V, _templateObject2$Q, _templateObject3$J, _templateObject4$C, _templateObject5$x, _templateObject6$u, _templateObject7$s, _templateObject8$q;
47287
47650
  var TIMER_OPTIONS = [{
47288
47651
  key: 'off',
47289
47652
  label: 'Off'
@@ -47534,9 +47897,9 @@ var CustomDropdownOptionLi = styled(DropdownOptionLi)(_templateObject6$u || (_te
47534
47897
  var CustomDropdownOptionsUl = styled(DropdownOptionsUl)(_templateObject7$s || (_templateObject7$s = _taggedTemplateLiteralLoose(["\n border-color: ", ";\n height: 268px;\n max-height: 268px;\n border-radius: 0;\n\n ", " {\n padding-left: 24px;\n padding-right: 24px;\n }\n"])), function (props) {
47535
47898
  return props.accentColor;
47536
47899
  }, CustomDropdownOptionLi);
47537
- var SetButton = styled(Button)(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose(["\n width: 57px;\n height: 36px;\n min-width: 57px;\n max-width: 57px;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
47900
+ var SetButton = styled(Button)(_templateObject8$q || (_templateObject8$q = _taggedTemplateLiteralLoose(["\n width: 57px;\n height: 36px;\n min-width: 57px;\n max-width: 57px;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
47538
47901
 
47539
- var _templateObject$W, _templateObject2$R, _templateObject3$K, _templateObject4$D, _templateObject5$y, _templateObject6$v, _templateObject7$t, _templateObject8$q;
47902
+ var _templateObject$W, _templateObject2$R, _templateObject3$K, _templateObject4$D, _templateObject5$y, _templateObject6$v, _templateObject7$t, _templateObject8$r;
47540
47903
  var formatMemberCount = function formatMemberCount(count, channelType) {
47541
47904
  if (channelType === DEFAULT_CHANNEL_TYPE.BROADCAST || channelType === DEFAULT_CHANNEL_TYPE.PUBLIC) {
47542
47905
  return count + " " + (count > 1 ? 'subscribers' : 'subscriber');
@@ -47710,9 +48073,9 @@ var LoadingText$1 = styled.div(_templateObject6$v || (_templateObject6$v = _tagg
47710
48073
  var EmptyText = styled.div(_templateObject7$t || (_templateObject7$t = _taggedTemplateLiteralLoose(["\n text-align: center;\n padding: 40px 20px;\n font-size: 14px;\n color: ", ";\n"])), function (props) {
47711
48074
  return props.color;
47712
48075
  });
47713
- var ChevronRightIconWrapper = styled.span(_templateObject8$q || (_templateObject8$q = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n\n & > svg {\n width: 16px;\n height: 16px;\n transform: rotate(-90deg);\n }\n"])));
48076
+ var ChevronRightIconWrapper = styled.span(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n\n & > svg {\n width: 16px;\n height: 16px;\n transform: rotate(-90deg);\n }\n"])));
47714
48077
 
47715
- var _templateObject$X, _templateObject2$S, _templateObject3$L, _templateObject4$E, _templateObject5$z, _templateObject6$w, _templateObject7$u, _templateObject8$r, _templateObject9$l, _templateObject0$j, _templateObject1$f, _templateObject10$9, _templateObject11$7, _templateObject12$6, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3, _templateObject17$3, _templateObject18$3, _templateObject19$3, _templateObject20$3;
48078
+ var _templateObject$X, _templateObject2$S, _templateObject3$L, _templateObject4$E, _templateObject5$z, _templateObject6$w, _templateObject7$u, _templateObject8$s, _templateObject9$m, _templateObject0$k, _templateObject1$f, _templateObject10$9, _templateObject11$7, _templateObject12$6, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3, _templateObject17$3, _templateObject18$3, _templateObject19$3, _templateObject20$3;
47716
48079
  var Actions = function Actions(_ref) {
47717
48080
  var _getDisappearingSetti;
47718
48081
  var setActionsHeight = _ref.setActionsHeight,
@@ -48243,9 +48606,9 @@ var ActionsMenu = styled.ul(_templateObject4$E || (_templateObject4$E = _taggedT
48243
48606
  var DefaultMutedIcon = styled(SvgUnmuteNotifications)(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose([""])));
48244
48607
  var DefaultMuteIcon = styled(SvgNotifications)(_templateObject6$w || (_templateObject6$w = _taggedTemplateLiteralLoose([""])));
48245
48608
  var DefaultStarIcon = styled(SvgStar)(_templateObject7$u || (_templateObject7$u = _taggedTemplateLiteralLoose([""])));
48246
- var DefaultUnpinIcon = styled(SvgUnpin)(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose([""])));
48247
- var DefaultPinIcon = styled(SvgPin)(_templateObject9$l || (_templateObject9$l = _taggedTemplateLiteralLoose([""])));
48248
- var DefaultMarkAsRead = styled(SvgMarkAsRead)(_templateObject0$j || (_templateObject0$j = _taggedTemplateLiteralLoose([""])));
48609
+ var DefaultUnpinIcon = styled(SvgUnpin)(_templateObject8$s || (_templateObject8$s = _taggedTemplateLiteralLoose([""])));
48610
+ var DefaultPinIcon = styled(SvgPin)(_templateObject9$m || (_templateObject9$m = _taggedTemplateLiteralLoose([""])));
48611
+ var DefaultMarkAsRead = styled(SvgMarkAsRead)(_templateObject0$k || (_templateObject0$k = _taggedTemplateLiteralLoose([""])));
48249
48612
  var DefaultMarkAsUnRead = styled(SvgMarkAsUnRead)(_templateObject1$f || (_templateObject1$f = _taggedTemplateLiteralLoose([""])));
48250
48613
  var DefaultBlockIcon = styled(SvgBlockChannel)(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose([""])));
48251
48614
  var DefaultReportIcon = styled(SvgReport)(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose([""])));
@@ -48417,7 +48780,7 @@ function SvgDownloadFile(props) {
48417
48780
  })));
48418
48781
  }
48419
48782
 
48420
- var _templateObject$_, _templateObject2$U, _templateObject3$M, _templateObject4$F, _templateObject5$A, _templateObject6$x, _templateObject7$v, _templateObject8$s;
48783
+ var _templateObject$_, _templateObject2$U, _templateObject3$M, _templateObject4$F, _templateObject5$A, _templateObject6$x, _templateObject7$v, _templateObject8$t;
48421
48784
  var Files = function Files(_ref) {
48422
48785
  var channelId = _ref.channelId,
48423
48786
  filePreviewIcon = _ref.filePreviewIcon,
@@ -48562,7 +48925,7 @@ var FileThumb = styled.img(_templateObject6$x || (_templateObject6$x = _taggedTe
48562
48925
  var FileItem = styled.div(_templateObject7$v || (_templateObject7$v = _taggedTemplateLiteralLoose(["\n position: relative;\n padding: 11px 16px;\n display: flex;\n align-items: center;\n font-size: 15px;\n transition: all 0.2s;\n div {\n margin-left: 7px;\n width: calc(100% - 48px);\n }\n &:hover {\n background-color: ", ";\n ", " {\n visibility: visible;\n }\n & ", " {\n display: none;\n }\n & ", " {\n display: inline-flex;\n }\n }\n /*&.isHover {\n\n }*/\n"])), function (props) {
48563
48926
  return props.hoverBackgroundColor;
48564
48927
  }, DownloadWrapper, FileIconCont, FileHoverIconCont);
48565
- var FileSizeAndDate = styled.span(_templateObject8$s || (_templateObject8$s = _taggedTemplateLiteralLoose(["\n display: block;\n font-style: normal;\n font-weight: normal;\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n margin-top: 2px;\n"])), function (props) {
48928
+ var FileSizeAndDate = styled.span(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n display: block;\n font-style: normal;\n font-weight: normal;\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n margin-top: 2px;\n"])), function (props) {
48566
48929
  return props.fontSize || '13px';
48567
48930
  }, function (props) {
48568
48931
  return props.lineHeight || '16px';
@@ -48737,7 +49100,7 @@ function SvgVoicePreviewPause(props) {
48737
49100
  })));
48738
49101
  }
48739
49102
 
48740
- var _templateObject$11, _templateObject2$W, _templateObject3$O, _templateObject4$H, _templateObject5$C, _templateObject6$y, _templateObject7$w, _templateObject8$t;
49103
+ var _templateObject$11, _templateObject2$W, _templateObject3$O, _templateObject4$H, _templateObject5$C, _templateObject6$y, _templateObject7$w, _templateObject8$u;
48741
49104
  var VoiceItem = function VoiceItem(_ref) {
48742
49105
  var file = _ref.file,
48743
49106
  voicePreviewPlayIcon = _ref.voicePreviewPlayIcon,
@@ -48885,7 +49248,7 @@ var AudioDate = styled.span(_templateObject6$y || (_templateObject6$y = _taggedT
48885
49248
  var AudioSendTime = styled.span(_templateObject7$w || (_templateObject7$w = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 0;\n top: 11px;\n color: ", ";\n font-size: 12px;\n line-height: 16px;\n"])), function (props) {
48886
49249
  return props.color;
48887
49250
  });
48888
- var Audio = styled.audio(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
49251
+ var Audio = styled.audio(_templateObject8$u || (_templateObject8$u = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
48889
49252
 
48890
49253
  var _templateObject$12;
48891
49254
  var Voices = function Voices(_ref) {
@@ -49126,7 +49489,7 @@ function ResetLinkConfirmModal(_ref) {
49126
49489
  });
49127
49490
  }
49128
49491
 
49129
- var _templateObject$14, _templateObject2$Y, _templateObject3$Q, _templateObject4$I, _templateObject5$D, _templateObject6$z, _templateObject7$x, _templateObject8$u, _templateObject9$m, _templateObject0$k, _templateObject1$g, _templateObject10$a, _templateObject11$8, _templateObject12$7, _templateObject13$5;
49492
+ var _templateObject$14, _templateObject2$Y, _templateObject3$Q, _templateObject4$I, _templateObject5$D, _templateObject6$z, _templateObject7$x, _templateObject8$v, _templateObject9$n, _templateObject0$l, _templateObject1$g, _templateObject10$a, _templateObject11$8, _templateObject12$7, _templateObject13$5;
49130
49493
  function InviteLinkModal(_ref) {
49131
49494
  var _getInviteLinkOptions, _tabs$link, _tabs$qr, _tabs$link2, _tabs$qr2;
49132
49495
  var onClose = _ref.onClose,
@@ -49633,9 +49996,9 @@ var LinkField = styled.div(_templateObject6$z || (_templateObject6$z = _taggedTe
49633
49996
  var LinkInput = styled.input(_templateObject7$x || (_templateObject7$x = _taggedTemplateLiteralLoose(["\n flex: 1;\n border: none;\n outline: none;\n height: 40px;\n background: transparent;\n color: ", ";\n font-size: 14px;\n"])), function (p) {
49634
49997
  return p.color;
49635
49998
  });
49636
- var CopyButton = styled.button(_templateObject8$u || (_templateObject8$u = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border: none;\n background: transparent;\n cursor: pointer;\n"])));
49637
- var CopyButtonWrapper = styled.div(_templateObject9$m || (_templateObject9$m = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n"])));
49638
- var SectionTitle = styled.h4(_templateObject0$k || (_templateObject0$k = _taggedTemplateLiteralLoose(["\n margin: 16px 0 8px;\n font-weight: 500;\n font-size: 15px;\n line-height: 16px;\n color: ", ";\n"])), function (p) {
49999
+ var CopyButton = styled.button(_templateObject8$v || (_templateObject8$v = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border: none;\n background: transparent;\n cursor: pointer;\n"])));
50000
+ var CopyButtonWrapper = styled.div(_templateObject9$n || (_templateObject9$n = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n"])));
50001
+ var SectionTitle = styled.h4(_templateObject0$l || (_templateObject0$l = _taggedTemplateLiteralLoose(["\n margin: 16px 0 8px;\n font-weight: 500;\n font-size: 15px;\n line-height: 16px;\n color: ", ";\n"])), function (p) {
49639
50002
  return p.color;
49640
50003
  });
49641
50004
  var HistoryRow = styled.div(_templateObject1$g || (_templateObject1$g = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n"])));
@@ -49654,7 +50017,7 @@ var QrHint = styled.p(_templateObject13$5 || (_templateObject13$5 = _taggedTempl
49654
50017
  return p.color;
49655
50018
  });
49656
50019
 
49657
- var _templateObject$15, _templateObject2$Z, _templateObject3$R, _templateObject4$J, _templateObject5$E, _templateObject6$A, _templateObject7$y, _templateObject8$v, _templateObject9$n;
50020
+ var _templateObject$15, _templateObject2$Z, _templateObject3$R, _templateObject4$J, _templateObject5$E, _templateObject6$A, _templateObject7$y, _templateObject8$w, _templateObject9$o;
49658
50021
  var Members = function Members(_ref) {
49659
50022
  var _members$find;
49660
50023
  var channel = _ref.channel,
@@ -49973,7 +50336,7 @@ var EditMemberIcon = styled.span(_templateObject6$A || (_templateObject6$A = _ta
49973
50336
  return props.color;
49974
50337
  });
49975
50338
  var MembersList = styled.ul(_templateObject7$y || (_templateObject7$y = _taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n list-style: none;\n transition: all 0.2s;\n"])));
49976
- var MemberItem$1 = styled.li(_templateObject8$v || (_templateObject8$v = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: ", ";\n font-weight: 500;\n padding: 6px 16px;\n transition: all 0.2s;\n color: ", ";\n cursor: pointer;\n\n & > svg {\n rect {\n fill: transparent;\n }\n }\n\n &:first-child {\n cursor: pointer;\n\n > svg {\n color: ", ";\n margin-right: 12px;\n & > rect {\n fill: ", " !important;\n }\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:hover ", " {\n opacity: 1;\n visibility: visible;\n }\n\n & .dropdown-wrapper {\n margin-left: auto;\n }\n\n & ", " {\n width: 12px;\n height: 12px;\n right: -1px;\n bottom: -1px;\n }\n"])), function (props) {
50339
+ var MemberItem$1 = styled.li(_templateObject8$w || (_templateObject8$w = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: ", ";\n font-weight: 500;\n padding: 6px 16px;\n transition: all 0.2s;\n color: ", ";\n cursor: pointer;\n\n & > svg {\n rect {\n fill: transparent;\n }\n }\n\n &:first-child {\n cursor: pointer;\n\n > svg {\n color: ", ";\n margin-right: 12px;\n & > rect {\n fill: ", " !important;\n }\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:hover ", " {\n opacity: 1;\n visibility: visible;\n }\n\n & .dropdown-wrapper {\n margin-left: auto;\n }\n\n & ", " {\n width: 12px;\n height: 12px;\n right: -1px;\n bottom: -1px;\n }\n"])), function (props) {
49977
50340
  return props.fontSize || '15px';
49978
50341
  }, function (props) {
49979
50342
  return props.color;
@@ -49984,7 +50347,7 @@ var MemberItem$1 = styled.li(_templateObject8$v || (_templateObject8$v = _tagged
49984
50347
  }, function (props) {
49985
50348
  return props.hoverBackground;
49986
50349
  }, EditMemberIcon, UserStatus);
49987
- var RoleBadge = styled.span(_templateObject9$n || (_templateObject9$n = _taggedTemplateLiteralLoose(["\n position: relative;\n padding: 2px 8px;\n border-radius: 12px;\n margin-left: 4px;\n font-weight: 500;\n font-size: 12px;\n line-height: 16px;\n color: ", ";\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n border-radius: 12px;\n width: 100%;\n height: 100%;\n background-color: ", ";\n opacity: 0.1;\n }\n"])), function (props) {
50350
+ var RoleBadge = styled.span(_templateObject9$o || (_templateObject9$o = _taggedTemplateLiteralLoose(["\n position: relative;\n padding: 2px 8px;\n border-radius: 12px;\n margin-left: 4px;\n font-weight: 500;\n font-size: 12px;\n line-height: 16px;\n color: ", ";\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n border-radius: 12px;\n width: 100%;\n height: 100%;\n background-color: ", ";\n opacity: 0.1;\n }\n"])), function (props) {
49988
50351
  return props.color;
49989
50352
  }, function (props) {
49990
50353
  return props.backgroundColor;
@@ -50420,7 +50783,7 @@ var EditChannel = function EditChannel(_ref) {
50420
50783
  })));
50421
50784
  };
50422
50785
 
50423
- var _templateObject$18, _templateObject2$10, _templateObject3$T, _templateObject4$L, _templateObject5$F, _templateObject6$B, _templateObject7$z, _templateObject8$w, _templateObject9$o, _templateObject0$l, _templateObject1$h, _templateObject10$b, _templateObject11$9;
50786
+ var _templateObject$18, _templateObject2$10, _templateObject3$T, _templateObject4$L, _templateObject5$F, _templateObject6$B, _templateObject7$z, _templateObject8$x, _templateObject9$p, _templateObject0$m, _templateObject1$h, _templateObject10$b, _templateObject11$9;
50424
50787
  var Details = function Details(_ref) {
50425
50788
  var _activeChannel$member;
50426
50789
  var detailsTitleText = _ref.detailsTitleText,
@@ -50901,13 +51264,13 @@ var ChannelInfo$5 = styled.div(_templateObject7$z || (_templateObject7$z = _tagg
50901
51264
  }, function (props) {
50902
51265
  return props.direction && props.direction === 'column' && 'center';
50903
51266
  });
50904
- var DetailsHeader = styled.div(_templateObject8$w || (_templateObject8$w = _taggedTemplateLiteralLoose(["\n border-bottom: 6px solid ", ";\n align-items: center;\n box-sizing: border-box;\n padding: 20px 16px;\n"])), function (props) {
51267
+ var DetailsHeader = styled.div(_templateObject8$x || (_templateObject8$x = _taggedTemplateLiteralLoose(["\n border-bottom: 6px solid ", ";\n align-items: center;\n box-sizing: border-box;\n padding: 20px 16px;\n"])), function (props) {
50905
51268
  return props.borderColor;
50906
51269
  });
50907
- var ChannelAvatarAndName = styled.div(_templateObject9$o || (_templateObject9$o = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n flex-direction: ", ";\n"])), function (props) {
51270
+ var ChannelAvatarAndName = styled.div(_templateObject9$p || (_templateObject9$p = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n flex-direction: ", ";\n"])), function (props) {
50908
51271
  return props.direction;
50909
51272
  });
50910
- var ChannelName$1 = styled(SectionHeader)(_templateObject0$l || (_templateObject0$l = _taggedTemplateLiteralLoose(["\n white-space: nowrap;\n max-width: ", ";\n text-overflow: ellipsis;\n text-color: ", ";\n overflow: hidden;\n text-transform: ", ";\n"])), function (props) {
51273
+ var ChannelName$1 = styled(SectionHeader)(_templateObject0$m || (_templateObject0$m = _taggedTemplateLiteralLoose(["\n white-space: nowrap;\n max-width: ", ";\n text-overflow: ellipsis;\n text-color: ", ";\n overflow: hidden;\n text-transform: ", ";\n"])), function (props) {
50911
51274
  return props.isDirect ? '200px' : '168px';
50912
51275
  }, function (props) {
50913
51276
  return props.color;