stream-chat-react 11.22.0 → 11.23.0

package/dist/{Window-b4032c33.js → Window-a963f22a.js}

@@ -12,10 +12,10 @@ var utc = require('dayjs/plugin/utc');
 var timezone = require('dayjs/plugin/timezone');
 var ReactPlayer = require('react-player');
 var sanitizeUrl = require('@braintree/sanitize-url');
+var throttle = require('lodash.throttle');
 var PropTypes = require('prop-types');
 var ImageGallery = require('react-image-gallery');
 var linkify = require('linkifyjs');
-var throttle = require('lodash.throttle');
 var emojiRegex = require('emoji-regex');
 var uniqBy = require('lodash.uniqby');
 var _extends = require('@babel/runtime/helpers/extends');
@@ -75,10 +75,10 @@ var relativeTime__default = /*#__PURE__*/_interopDefaultLegacy(relativeTime);
 var utc__default = /*#__PURE__*/_interopDefaultLegacy(utc);
 var timezone__default = /*#__PURE__*/_interopDefaultLegacy(timezone);
 var ReactPlayer__default = /*#__PURE__*/_interopDefaultLegacy(ReactPlayer);
+var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var ImageGallery__default = /*#__PURE__*/_interopDefaultLegacy(ImageGallery);
 var linkify__namespace = /*#__PURE__*/_interopNamespace(linkify);
-var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
 var emojiRegex__default = /*#__PURE__*/_interopDefaultLegacy(emojiRegex);
 var uniqBy__default = /*#__PURE__*/_interopDefaultLegacy(uniqBy);
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
@@ -1537,10 +1537,12 @@ var upSample = function (values, targetSize) {
 };
 
 var WaveProgressBar = function (_a) {
-    var _b = _a.amplitudesCount, amplitudesCount = _b === void 0 ? 40 : _b, _c = _a.progress, progress = _c === void 0 ? 0 : _c, seek = _a.seek, waveformData = _a.waveformData;
-    var _d = React.useState(null), progressIndicator = _d[0], setProgressIndicator = _d[1];
+    var _b = _a.amplitudesCount, amplitudesCount = _b === void 0 ? 40 : _b, _c = _a.progress, progress = _c === void 0 ? 0 : _c, _d = _a.relativeAmplitudeBarWidth, relativeAmplitudeBarWidth = _d === void 0 ? 2 : _d, _e = _a.relativeAmplitudeGap, relativeAmplitudeGap = _e === void 0 ? 1 : _e, seek = _a.seek, waveformData = _a.waveformData;
+    var _f = React.useState(null), progressIndicator = _f[0], setProgressIndicator = _f[1];
     var isDragging = React.useRef(false);
-    var rootRef = React.useRef(null);
+    var _g = React.useState(null), root = _g[0], setRoot = _g[1];
+    var _h = React.useState(), trackAxisX = _h[0], setTrackAxisX = _h[1];
+    var lastRootWidth = React.useRef();
     var handleDragStart = function (e) {
         e.preventDefault();
         if (!progressIndicator)
@@ -1561,24 +1563,59 @@ var WaveProgressBar = function (_a) {
         isDragging.current = false;
         progressIndicator.style.removeProperty('cursor');
     }, [progressIndicator]);
-    var resampledWaveformData = React.useMemo(function () { return resampleWaveformData(waveformData, amplitudesCount); }, [
-        amplitudesCount,
-        waveformData,
-    ]);
+    var getTrackAxisX = React.useMemo(function () {
+        return throttle__default["default"](function (rootWidth) {
+            if (rootWidth === lastRootWidth.current)
+                return;
+            lastRootWidth.current = rootWidth;
+            var possibleAmpCount = Math.floor(rootWidth / (relativeAmplitudeGap + relativeAmplitudeBarWidth));
+            var tooManyAmplitudesToRender = possibleAmpCount < amplitudesCount;
+            var barCount = tooManyAmplitudesToRender ? possibleAmpCount : amplitudesCount;
+            var amplitudeBarWidthToGapRatio = relativeAmplitudeBarWidth / (relativeAmplitudeBarWidth + relativeAmplitudeGap);
+            var barWidth = barCount && (rootWidth / barCount) * amplitudeBarWidthToGapRatio;
+            setTrackAxisX({
+                barCount: barCount,
+                barWidth: barWidth,
+                gap: barWidth * (relativeAmplitudeGap / relativeAmplitudeBarWidth),
+            });
+        }, 1);
+    }, [relativeAmplitudeBarWidth, relativeAmplitudeGap, amplitudesCount]);
+    var resampledWaveformData = React.useMemo(function () { return (trackAxisX ? resampleWaveformData(waveformData, trackAxisX.barCount) : []); }, [trackAxisX, waveformData]);
     React.useEffect(function () {
         document.addEventListener('pointerup', handleDragStop);
         return function () {
             document.removeEventListener('pointerup', handleDragStop);
         };
     }, [handleDragStop]);
-    if (!waveformData.length)
+    React.useEffect(function () {
+        if (!root || typeof ResizeObserver === 'undefined')
+            return;
+        var observer = new ResizeObserver(function (_a) {
+            var entry = _a[0];
+            getTrackAxisX(entry.contentRect.width);
+        });
+        observer.observe(root);
+        return function () {
+            observer.disconnect();
+        };
+    }, [getTrackAxisX, root]);
+    React.useLayoutEffect(function () {
+        if (!root)
+            return;
+        var rootWidth = root.getBoundingClientRect().width;
+        getTrackAxisX(rootWidth);
+    }, [getTrackAxisX, root]);
+    if (!waveformData.length || (trackAxisX === null || trackAxisX === void 0 ? void 0 : trackAxisX.barCount) === 0)
         return null;
-    return (React__default["default"].createElement("div", { className: 'str-chat__wave-progress-bar__track', "data-testid": 'wave-progress-bar-track', onClick: seek, onPointerDown: handleDragStart, onPointerMove: handleDrag, onPointerUp: handleDragStop, ref: rootRef, role: 'progressbar' },
+    return (React__default["default"].createElement("div", { className: 'str-chat__wave-progress-bar__track', "data-testid": 'wave-progress-bar-track', onClick: seek, onPointerDown: handleDragStart, onPointerMove: handleDrag, onPointerUp: handleDragStop, ref: setRoot, role: 'progressbar', style: {
+            '--str-chat__voice-recording-amplitude-bar-gap-width': (trackAxisX === null || trackAxisX === void 0 ? void 0 : trackAxisX.gap) + 'px',
+        } },
         resampledWaveformData.map(function (amplitude, i) {
             var _a;
             return (React__default["default"].createElement("div", { className: clsx('str-chat__wave-progress-bar__amplitude-bar', (_a = {},
                     _a['str-chat__wave-progress-bar__amplitude-bar--active'] = progress > (i / resampledWaveformData.length) * 100,
                     _a)), "data-testid": 'amplitude-bar', key: "amplitude-".concat(i), style: {
+                    '--str-chat__voice-recording-amplitude-bar-width': (trackAxisX === null || trackAxisX === void 0 ? void 0 : trackAxisX.barWidth) + 'px',
                     '--str-chat__wave-progress-bar__amplitude-bar-height': amplitude
                         ? amplitude * 100 + '%'
                         : '0%',
@@ -36308,7 +36345,7 @@ var channelReducer = function (state, action) {
         }
         case 'openThread': {
             var channel = action.channel, message = action.message;
-            return exports.__assign(exports.__assign({}, state), { thread: message, threadMessages: message.id ? exports.__assign({}, channel.state.threads)[message.id] || [] : [], threadSuppressAutoscroll: false });
+            return exports.__assign(exports.__assign({}, state), { thread: message, threadHasMore: true, threadMessages: message.id ? exports.__assign({}, channel.state.threads)[message.id] || [] : [], threadSuppressAutoscroll: false });
         }
         case 'setError': {
             var error = action.error;
@@ -39320,7 +39357,7 @@ function Timestamp(props) {
             messageCreatedAt: normalizedTimestamp,
             t: t,
             tDateTimeParser: tDateTimeParser,
-            timestampTranslationKey: 'timestamp/Timestamp',
+            timestampTranslationKey: 'timestamp/MessageTimestamp',
         });
     }, [calendar, calendarFormats, format, formatDate, normalizedTimestamp, t, tDateTimeParser]);
     if (!when) {
@@ -46448,7 +46485,7 @@ var insertIntro = function (messages, headerPosition) {
     }
     return newMessages;
 };
-var getGroupStyles = function (message, previousMessage, nextMessage, noGroupByUser) {
+var getGroupStyles = function (message, previousMessage, nextMessage, noGroupByUser, maxTimeBetweenGroupedMessages) {
     var _a, _b, _c, _d, _e, _f, _g;
     if (message.customType === CUSTOM_MESSAGE_TYPE.date)
         return '';
@@ -46460,22 +46497,32 @@ var getGroupStyles = function (message, previousMessage, nextMessage, noGroupByU
         previousMessage.customType === CUSTOM_MESSAGE_TYPE.intro ||
         previousMessage.customType === CUSTOM_MESSAGE_TYPE.date ||
         previousMessage.type === 'system' ||
+        previousMessage.type === 'error' ||
         ((_b = previousMessage.attachments) === null || _b === void 0 ? void 0 : _b.length) !== 0 ||
         ((_c = message.user) === null || _c === void 0 ? void 0 : _c.id) !== ((_d = previousMessage.user) === null || _d === void 0 ? void 0 : _d.id) ||
-        previousMessage.type === 'error' ||
         previousMessage.deleted_at ||
         (message.reaction_groups && Object.keys(message.reaction_groups).length > 0) ||
-        isMessageEdited(previousMessage);
+        isMessageEdited(previousMessage) ||
+        (maxTimeBetweenGroupedMessages !== undefined &&
+            previousMessage.created_at &&
+            message.created_at &&
+            new Date(message.created_at).getTime() - new Date(previousMessage.created_at).getTime() >
+                maxTimeBetweenGroupedMessages);
     var isBottomMessage = !nextMessage ||
+        nextMessage.customType === CUSTOM_MESSAGE_TYPE.intro ||
         nextMessage.customType === CUSTOM_MESSAGE_TYPE.date ||
         nextMessage.type === 'system' ||
-        nextMessage.customType === CUSTOM_MESSAGE_TYPE.intro ||
+        nextMessage.type === 'error' ||
         ((_e = nextMessage.attachments) === null || _e === void 0 ? void 0 : _e.length) !== 0 ||
         ((_f = message.user) === null || _f === void 0 ? void 0 : _f.id) !== ((_g = nextMessage.user) === null || _g === void 0 ? void 0 : _g.id) ||
-        nextMessage.type === 'error' ||
         nextMessage.deleted_at ||
         (nextMessage.reaction_groups && Object.keys(nextMessage.reaction_groups).length > 0) ||
-        isMessageEdited(message);
+        isMessageEdited(message) ||
+        (maxTimeBetweenGroupedMessages !== undefined &&
+            nextMessage.created_at &&
+            message.created_at &&
+            new Date(nextMessage.created_at).getTime() - new Date(message.created_at).getTime() >
+                maxTimeBetweenGroupedMessages);
     if (!isTopMessage && !isBottomMessage) {
         if (message.deleted_at || message.type === 'error')
             return 'single';