stream-chat-react 9.1.0 → 9.1.3

package/dist/browser.full-bundle.js

@@ -627,11 +627,11 @@ var StreamChatReact = (function (exports, React, streamChat) {
 
     function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-    var MATCH_URL_YOUTUBE = /(?:youtu\.be\/|youtube(?:-nocookie)?\.com\/(?:embed\/|v\/|watch\/|watch\?v=|watch\?.+&v=))((\w|-){11})|youtube\.com\/playlist\?list=|youtube\.com\/user\//;
+    var MATCH_URL_YOUTUBE = /(?:youtu\.be\/|youtube(?:-nocookie)?\.com\/(?:embed\/|v\/|watch\/|watch\?v=|watch\?.+&v=|shorts\/))((\w|-){11})|youtube\.com\/playlist\?list=|youtube\.com\/user\//;
     exports.MATCH_URL_YOUTUBE = MATCH_URL_YOUTUBE;
     var MATCH_URL_SOUNDCLOUD = /(?:soundcloud\.com|snd\.sc)\/[^.]+$/;
     exports.MATCH_URL_SOUNDCLOUD = MATCH_URL_SOUNDCLOUD;
-    var MATCH_URL_VIMEO = /vimeo\.com\/.+/;
+    var MATCH_URL_VIMEO = /vimeo\.com\/(?!progressive_redirect).+/;
     exports.MATCH_URL_VIMEO = MATCH_URL_VIMEO;
     var MATCH_URL_FACEBOOK = /^https?:\/\/(www\.)?facebook\.com.*\/(video(s)?|watch|story)(\.php?|\/).+$/;
     exports.MATCH_URL_FACEBOOK = MATCH_URL_FACEBOOK;
@@ -649,13 +649,13 @@ var StreamChatReact = (function (exports, React, streamChat) {
     exports.MATCH_URL_DAILYMOTION = MATCH_URL_DAILYMOTION;
     var MATCH_URL_MIXCLOUD = /mixcloud\.com\/([^/]+\/[^/]+)/;
     exports.MATCH_URL_MIXCLOUD = MATCH_URL_MIXCLOUD;
-    var MATCH_URL_VIDYARD = /vidyard.com\/(?:watch\/)?([a-zA-Z0-9-]+)/;
+    var MATCH_URL_VIDYARD = /vidyard.com\/(?:watch\/)?([a-zA-Z0-9-_]+)/;
     exports.MATCH_URL_VIDYARD = MATCH_URL_VIDYARD;
-    var MATCH_URL_KALTURA = /^https?:\/\/[a-zA-Z]+\.kaltura.(com|org)\/p\/([0-9]+)\/sp\/([0-9]+)00\/embedIframeJs\/uiconf_id\/([0-9]+)\/partner_id\/([0-9]+)(.*)entry_id.([a-zA-Z0-9-_]+)$/;
+    var MATCH_URL_KALTURA = /^https?:\/\/[a-zA-Z]+\.kaltura.(com|org)\/p\/([0-9]+)\/sp\/([0-9]+)00\/embedIframeJs\/uiconf_id\/([0-9]+)\/partner_id\/([0-9]+)(.*)entry_id.([a-zA-Z0-9-_].*)$/;
     exports.MATCH_URL_KALTURA = MATCH_URL_KALTURA;
-    var AUDIO_EXTENSIONS = /\.(m4a|mp4a|mpga|mp2|mp2a|mp3|m2a|m3a|wav|weba|aac|oga|spx)($|\?)/i;
+    var AUDIO_EXTENSIONS = /\.(m4a|m4b|mp4a|mpga|mp2|mp2a|mp3|m2a|m3a|wav|weba|aac|oga|spx)($|\?)/i;
     exports.AUDIO_EXTENSIONS = AUDIO_EXTENSIONS;
-    var VIDEO_EXTENSIONS = /\.(mp4|og[gv]|webm|mov|m4v)($|\?)/i;
+    var VIDEO_EXTENSIONS = /\.(mp4|og[gv]|webm|mov|m4v)(#t=[,\d+]+)?($|\?)/i;
     exports.VIDEO_EXTENSIONS = VIDEO_EXTENSIONS;
     var HLS_EXTENSIONS = /\.(m3u8)($|\?)/i;
     exports.HLS_EXTENSIONS = HLS_EXTENSIONS;
@@ -1013,6 +1013,9 @@ var StreamChatReact = (function (exports, React, streamChat) {
 
                   _this2.props.onReady();
                 },
+                onPlaybackRateChange: function onPlaybackRateChange(event) {
+                  return _this2.props.onPlaybackRateChange(event.data);
+                },
                 onStateChange: _this2.onStateChange,
                 onError: function onError(event) {
                   return _onError(event.data);
@@ -1435,6 +1438,9 @@ var StreamChatReact = (function (exports, React, streamChat) {
           this.duration = null;
           (0, utils$2.getSDK)(SDK_URL, SDK_GLOBAL).then(function (Vimeo) {
             if (!_this2.container) return;
+            var _this2$props$config = _this2.props.config,
+                playerOptions = _this2$props$config.playerOptions,
+                title = _this2$props$config.title;
             _this2.player = new Vimeo.Player(_this2.container, _objectSpread({
               url: url,
               autoplay: _this2.props.playing,
@@ -1442,13 +1448,17 @@ var StreamChatReact = (function (exports, React, streamChat) {
               loop: _this2.props.loop,
               playsinline: _this2.props.playsinline,
               controls: _this2.props.controls
-            }, _this2.props.config.playerOptions));
+            }, playerOptions));
 
             _this2.player.ready().then(function () {
               var iframe = _this2.container.querySelector('iframe');
 
               iframe.style.width = '100%';
               iframe.style.height = '100%';
+
+              if (title) {
+                iframe.title = title;
+              }
             })["catch"](_this2.props.onError);
 
             _this2.player.on('loaded', function () {
@@ -1985,7 +1995,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
             frameBorder: "0",
             scrolling: "no",
             style: style,
-            allowFullScreen: true
+            allow: "encrypted-media; autoplay; fullscreen;"
           });
         }
       }]);
@@ -2096,6 +2106,12 @@ var StreamChatReact = (function (exports, React, streamChat) {
           return (_this$props4 = _this.props).onEnded.apply(_this$props4, arguments);
         });
 
+        _defineProperty(_assertThisInitialized(_this), "onPlaybackRateChange", function () {
+          var _this$props5;
+
+          return (_this$props5 = _this.props).onPlaybackRateChange.apply(_this$props5, arguments);
+        });
+
         _defineProperty(_assertThisInitialized(_this), "mute", function () {
           _this.callPlayer('mute');
         });
@@ -2117,13 +2133,13 @@ var StreamChatReact = (function (exports, React, streamChat) {
         value: function load(url) {
           var _this2 = this;
 
-          var _this$props5 = this.props,
-              playing = _this$props5.playing,
-              muted = _this$props5.muted,
-              controls = _this$props5.controls,
-              _onReady = _this$props5.onReady,
-              config = _this$props5.config,
-              onError = _this$props5.onError;
+          var _this$props6 = this.props,
+              playing = _this$props6.playing,
+              muted = _this$props6.muted,
+              controls = _this$props6.controls,
+              _onReady = _this$props6.onReady,
+              config = _this$props6.config,
+              onError = _this$props6.onError;
           (0, utils$2.getSDK)(SDK_URL, SDK_GLOBAL).then(function (Wistia) {
             if (config.customControls) {
               config.customControls.forEach(function (control) {
@@ -2161,6 +2177,8 @@ var StreamChatReact = (function (exports, React, streamChat) {
 
                 _this2.player.bind('end', _this2.onEnded);
 
+                _this2.player.bind('playbackratechange', _this2.onPlaybackRateChange);
+
                 _onReady();
               }
             });
@@ -2173,6 +2191,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
           this.player.unbind('pause', this.onPause);
           this.player.unbind('seek', this.onSeek);
           this.player.unbind('end', this.onEnded);
+          this.player.unbind('playbackratechange', this.onPlaybackRateChange);
         } // Proxy methods to prevent listener leaks
 
       }, {
@@ -2384,7 +2403,8 @@ var StreamChatReact = (function (exports, React, streamChat) {
                 PAUSE = _Twitch$Player.PAUSE,
                 ENDED = _Twitch$Player.ENDED,
                 ONLINE = _Twitch$Player.ONLINE,
-                OFFLINE = _Twitch$Player.OFFLINE;
+                OFFLINE = _Twitch$Player.OFFLINE,
+                SEEK = _Twitch$Player.SEEK;
 
             _this2.player.addEventListener(READY, _this2.props.onReady);
 
@@ -2392,7 +2412,9 @@ var StreamChatReact = (function (exports, React, streamChat) {
 
             _this2.player.addEventListener(PAUSE, _this2.props.onPause);
 
-            _this2.player.addEventListener(ENDED, _this2.props.onEnded); // Prevent weird isLoading behaviour when streams are offline
+            _this2.player.addEventListener(ENDED, _this2.props.onEnded);
+
+            _this2.player.addEventListener(SEEK, _this2.props.onSeek); // Prevent weird isLoading behaviour when streams are offline
 
 
             _this2.player.addEventListener(ONLINE, _this2.props.onLoaded);
@@ -3004,6 +3026,10 @@ var StreamChatReact = (function (exports, React, streamChat) {
           (0, utils$2.getSDK)(SDK_URL, SDK_GLOBAL, SDK_GLOBAL_READY).then(function (Vidyard) {
             if (!_this2.container) return;
             Vidyard.api.addReadyListener(function (data, player) {
+              if (_this2.player) {
+                return;
+              }
+
               _this2.player = player;
 
               _this2.player.on('ready', _this2.props.onReady);
@@ -3200,45 +3226,40 @@ var StreamChatReact = (function (exports, React, streamChat) {
             _this2.player = new playerjs.Player(_this2.iframe);
 
             _this2.player.on('ready', function () {
-              _this2.player.isReady = true;
-
-              _this2.player.on('play', _this2.props.onPlay);
-
-              _this2.player.on('pause', _this2.props.onPause);
-
-              _this2.player.on('seeked', _this2.props.onSeek);
-
-              _this2.player.on('ended', _this2.props.onEnded);
-
-              _this2.player.on('error', _this2.props.onError);
-
-              _this2.player.on('timeupdate', function (_ref) {
-                var duration = _ref.duration,
-                    seconds = _ref.seconds;
-                _this2.duration = duration;
-                _this2.currentTime = seconds;
-              });
+              // An arbitrary timeout is required otherwise
+              // the event listeners won’t work
+              setTimeout(function () {
+                _this2.player.isReady = true;
 
-              _this2.player.on('buffered', function (_ref2) {
-                var percent = _ref2.percent;
+                _this2.player.setLoop(_this2.props.loop);
 
-                if (_this2.duration) {
-                  _this2.secondsLoaded = _this2.duration * percent;
+                if (_this2.props.muted) {
+                  _this2.player.mute();
                 }
-              });
-
-              _this2.player.setLoop(_this2.props.loop);
 
-              if (_this2.props.muted) {
-                _this2.player.mute();
-              }
+                _this2.addListeners(_this2.player, _this2.props);
 
-              setTimeout(function () {
                 _this2.props.onReady();
-              });
+              }, 500);
             });
           }, this.props.onError);
         }
+      }, {
+        key: "addListeners",
+        value: function addListeners(player, props) {
+          var _this3 = this;
+
+          player.on('play', props.onPlay);
+          player.on('pause', props.onPause);
+          player.on('ended', props.onEnded);
+          player.on('error', props.onError);
+          player.on('timeupdate', function (_ref) {
+            var duration = _ref.duration,
+                seconds = _ref.seconds;
+            _this3.duration = duration;
+            _this3.currentTime = seconds;
+          });
+        }
       }, {
         key: "play",
         value: function play() {
@@ -3296,8 +3317,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
             frameBorder: "0",
             scrolling: "no",
             style: style,
-            allowFullScreen: true,
-            allow: "encrypted-media",
+            allow: "encrypted-media; autoplay; fullscreen;",
             referrerPolicy: "no-referrer-when-downgrade"
           });
         }
@@ -3430,6 +3450,10 @@ var StreamChatReact = (function (exports, React, streamChat) {
           return (_this$props7 = _this.props).onError.apply(_this$props7, arguments);
         });
 
+        _defineProperty(_assertThisInitialized(_this), "onPlayBackRateChange", function (event) {
+          return _this.props.onPlaybackRateChange(event.target.playbackRate);
+        });
+
         _defineProperty(_assertThisInitialized(_this), "onEnablePIP", function () {
           var _this$props8;
 
@@ -3546,6 +3570,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
           player.addEventListener('seeked', this.onSeek);
           player.addEventListener('ended', this.onEnded);
           player.addEventListener('error', this.onError);
+          player.addEventListener('ratechange', this.onPlayBackRateChange);
           player.addEventListener('enterpictureinpicture', this.onEnablePIP);
           player.addEventListener('leavepictureinpicture', this.onDisablePIP);
           player.addEventListener('webkitpresentationmodechanged', this.onPresentationModeChange);
@@ -3572,6 +3597,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
           player.removeEventListener('seeked', this.onSeek);
           player.removeEventListener('ended', this.onEnded);
           player.removeEventListener('error', this.onError);
+          player.removeEventListener('ratechange', this.onPlayBackRateChange);
           player.removeEventListener('enterpictureinpicture', this.onEnablePIP);
           player.removeEventListener('leavepictureinpicture', this.onDisablePIP);
           player.removeEventListener('webkitpresentationmodechanged', this.onPresentationModeChange);
@@ -3694,6 +3720,10 @@ var StreamChatReact = (function (exports, React, streamChat) {
 
               _this2.flv.attachMediaElement(_this2.player);
 
+              _this2.flv.on(flvjs.Events.ERROR, function (e, data) {
+                _this2.props.onError(e, data, _this2.flv, flvjs);
+              });
+
               _this2.flv.load();
 
               _this2.props.onLoaded();
@@ -3768,7 +3798,11 @@ var StreamChatReact = (function (exports, React, streamChat) {
       }, {
         key: "setPlaybackRate",
         value: function setPlaybackRate(rate) {
-          this.player.playbackRate = rate;
+          try {
+            this.player.playbackRate = rate;
+          } catch (error) {
+            this.props.onError(error);
+          }
         }
       }, {
         key: "getDuration",
@@ -4320,6 +4354,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
       playIcon: node,
       previewTabIndex: number,
       fallback: node,
+      oEmbedUrl: string,
       wrapper: oneOfType([string, func, shape({
         render: func.isRequired
       })]),
@@ -4342,7 +4377,8 @@ var StreamChatReact = (function (exports, React, streamChat) {
           params: object
         }),
         vimeo: shape({
-          playerOptions: object
+          playerOptions: object,
+          title: string
         }),
         file: shape({
           attributes: object,
@@ -4383,6 +4419,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
       onError: func,
       onDuration: func,
       onSeek: func,
+      onPlaybackRateChange: func,
       onProgress: func,
       onClickPreview: func,
       onEnablePIP: func,
@@ -4410,6 +4447,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
       fallback: null,
       wrapper: 'div',
       previewTabIndex: 0,
+      oEmbedUrl: 'https://noembed.com/embed?url={url}',
       config: {
         soundcloud: {
           options: {
@@ -4452,7 +4490,8 @@ var StreamChatReact = (function (exports, React, streamChat) {
             byline: false,
             portrait: false,
             title: false
-          }
+          },
+          title: null
         },
         file: {
           attributes: {},
@@ -4463,7 +4502,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
           forceDASH: false,
           forceFLV: false,
           hlsOptions: {},
-          hlsVersion: '0.14.16',
+          hlsVersion: '1.1.4',
           dashVersion: '3.1.3',
           flvVersion: '1.5.0'
         },
@@ -4495,6 +4534,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
       onError: noop,
       onDuration: noop,
       onSeek: noop,
+      onPlaybackRateChange: noop,
       onProgress: noop,
       onClickPreview: noop,
       onEnablePIP: noop,
@@ -4523,6 +4563,8 @@ var StreamChatReact = (function (exports, React, streamChat) {
 
 
 
+
+
     function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
     function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -4588,6 +4630,8 @@ var StreamChatReact = (function (exports, React, streamChat) {
         _defineProperty(_assertThisInitialized(_this), "onDurationCalled", false);
 
         _defineProperty(_assertThisInitialized(_this), "handlePlayerMount", function (player) {
+          if (_this.player) return; // Prevent loading twice in strict mode
+
           _this.player = player;
 
           _this.player.load(_this.props.url);
@@ -4783,10 +4827,11 @@ var StreamChatReact = (function (exports, React, streamChat) {
               playbackRate = _this$props5.playbackRate,
               pip = _this$props5.pip,
               loop = _this$props5.loop,
-              activePlayer = _this$props5.activePlayer;
+              activePlayer = _this$props5.activePlayer,
+              disableDeferredLoading = _this$props5.disableDeferredLoading;
 
           if (!(0, _reactFastCompare["default"])(prevProps.url, url)) {
-            if (this.isLoading && !activePlayer.forceLoad) {
+            if (this.isLoading && !activePlayer.forceLoad && !disableDeferredLoading && !(0, utils$2.isMediaStream)(url)) {
               console.warn("ReactPlayer: the attempt to load ".concat(url, " is being deferred until the player has loaded"));
               this.loadOnReady = url;
               return;
@@ -4865,11 +4910,14 @@ var StreamChatReact = (function (exports, React, streamChat) {
           var _this3 = this;
 
           // When seeking before player is ready, store value and seek later
-          if (!this.isReady && amount !== 0) {
-            this.seekOnPlay = amount;
-            setTimeout(function () {
-              _this3.seekOnPlay = null;
-            }, SEEK_ON_PLAY_EXPIRY);
+          if (!this.isReady) {
+            if (amount !== 0) {
+              this.seekOnPlay = amount;
+              setTimeout(function () {
+                _this3.seekOnPlay = null;
+              }, SEEK_ON_PLAY_EXPIRY);
+            }
+
             return;
           }
 
@@ -5029,7 +5077,8 @@ var StreamChatReact = (function (exports, React, streamChat) {
           var _this2 = this;
 
           var url = _ref.url,
-              light = _ref.light;
+              light = _ref.light,
+              oEmbedUrl = _ref.oEmbedUrl;
 
           if (typeof light === 'string') {
             this.setState({
@@ -5048,7 +5097,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
           this.setState({
             image: null
           });
-          return window.fetch("https://noembed.com/embed?url=".concat(url)).then(function (response) {
+          return window.fetch(oEmbedUrl.replace('{url}', url)).then(function (response) {
             return response.json();
           }).then(function (data) {
             if (data.thumbnail_url && _this2.mounted) {
@@ -5361,12 +5410,14 @@ var StreamChatReact = (function (exports, React, streamChat) {
             var _this$props = this.props,
                 light = _this$props.light,
                 playIcon = _this$props.playIcon,
-                previewTabIndex = _this$props.previewTabIndex;
+                previewTabIndex = _this$props.previewTabIndex,
+                oEmbedUrl = _this$props.oEmbedUrl;
             return /*#__PURE__*/_react["default"].createElement(Preview, {
               url: url,
               light: light,
               playIcon: playIcon,
               previewTabIndex: previewTabIndex,
+              oEmbedUrl: oEmbedUrl,
               onClick: this.handleClickPreview
             });
           }
@@ -9697,21 +9748,18 @@ var StreamChatReact = (function (exports, React, streamChat) {
     var FilePreviewer = function (_a) {
         var uploads = _a.uploads, handleRemove = _a.handleRemove, handleRetry = _a.handleRetry;
         return (React__default['default'].createElement("div", { className: "rfu-file-previewer" },
-            React__default['default'].createElement("ol", null, uploads &&
-                uploads.map(function (upload) { return (React__default['default'].createElement("li", { key: upload.id, className: "rfu-file-previewer__file " + (upload.state === 'uploading'
-                        ? 'rfu-file-previewer__file--uploading'
-                        : '') + " " + (upload.state === 'failed'
-                        ? 'rfu-file-previewer__file--failed'
-                        : '') },
-                    React__default['default'].createElement(FileIcon, { mimeType: upload.file.type, filename: upload.file.name }),
-                    React__default['default'].createElement("a", { href: upload.url, download: true },
-                        upload.file.name,
-                        upload.state === 'failed' && (React__default['default'].createElement(React__default['default'].Fragment, null,
-                            React__default['default'].createElement("div", { className: "rfu-file-previewer__failed", onClick: handleRetry && (function () { return handleRetry(upload.id); }) }, "failed"),
-                            React__default['default'].createElement("div", { className: "rfu-file-previewer__retry", onClick: handleRetry && (function () { return handleRetry(upload.id); }) }, "retry")))),
-                    React__default['default'].createElement("span", { className: "rfu-file-previewer__close-button", onClick: handleRemove && (function () { return handleRemove(upload.id); }) }, "\u2718"),
-                    upload.state === 'uploading' && (React__default['default'].createElement("div", { className: "rfu-file-previewer__loading-indicator" },
-                        React__default['default'].createElement(LoadingIndicator$1, null))))); }))));
+            React__default['default'].createElement("ol", null, uploads === null || uploads === void 0 ? void 0 : uploads.map(function (upload) { return (React__default['default'].createElement("li", { key: upload.id, className: "rfu-file-previewer__file " + (upload.state === 'uploading'
+                    ? 'rfu-file-previewer__file--uploading'
+                    : '') + " " + (upload.state === 'failed' ? 'rfu-file-previewer__file--failed' : '') },
+                React__default['default'].createElement(FileIcon, { mimeType: upload.file.type, filename: upload.file.name }),
+                React__default['default'].createElement("a", { href: upload.url, download: true },
+                    upload.file.name,
+                    upload.state === 'failed' && (React__default['default'].createElement(React__default['default'].Fragment, null,
+                        React__default['default'].createElement("div", { className: "rfu-file-previewer__failed", onClick: function () { return handleRetry === null || handleRetry === void 0 ? void 0 : handleRetry(upload.id); } }, "failed"),
+                        React__default['default'].createElement("div", { className: "rfu-file-previewer__retry", onClick: function () { return handleRetry === null || handleRetry === void 0 ? void 0 : handleRetry(upload.id); } }, "retry")))),
+                React__default['default'].createElement("span", { className: "rfu-file-previewer__close-button", onClick: handleRemove && (function () { return handleRemove(upload.id); }) }, "\u2718"),
+                upload.state === 'uploading' && (React__default['default'].createElement("div", { className: "rfu-file-previewer__loading-indicator" },
+                    React__default['default'].createElement(LoadingIndicator$1, null))))); }))));
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -9888,11 +9936,11 @@ var StreamChatReact = (function (exports, React, streamChat) {
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};/**
-     * This is simply a button wrapper, add's a div with `role="button"` and a onClick
+     * This is simply a button wrapper, adds a div with `role="button"` and a onClick
      */
     var IconButton = function (_a) {
         var onClick = _a.onClick, children = _a.children;
-        return (React__default['default'].createElement("button", { "aria-label": "Cancel upload", className: "rfu-icon-button", onClick: onClick }, children));
+        return (React__default['default'].createElement("button", { type: "button", "data-testid": "cancel-upload-button", "aria-label": "Cancel upload", className: "rfu-icon-button", onClick: onClick }, children));
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};/**
@@ -11510,13 +11558,23 @@ var StreamChatReact = (function (exports, React, streamChat) {
             React__default['default'].createElement("path", { d: "M0.000 200.000 L 0.000 400.000 200.000 400.000 L 400.000 400.000 400.000 200.000 L 400.000 0.000 200.000 0.000 L 0.000 0.000 0.000 200.000 M243.085 68.180 C 251.168 72.240,252.758 82.164,246.332 88.456 C 242.609 92.102,249.072 91.774,176.600 92.000 L 112.600 92.200 111.000 93.165 C 107.620 95.203,105.382 98.131,104.780 101.304 C 104.548 102.526,104.400 132.258,104.400 177.461 C 104.400 261.065,104.646 254.561,101.340 258.340 C 95.134 265.435,84.540 263.898,80.562 255.326 L 79.600 253.251 79.600 170.356 L 79.600 87.460 80.613 84.526 C 83.246 76.897,91.469 68.511,96.439 68.386 C 96.747 68.378,97.450 68.114,98.000 67.800 C 98.856 67.311,109.214 67.226,170.067 67.214 L 241.134 67.200 243.085 68.180 M230.400 116.002 C 236.845 117.273,237.603 117.566,242.024 120.500 C 243.269 121.327,256.977 134.788,274.002 151.902 C 299.664 177.700,305.143 183.306,307.142 185.815 C 307.838 186.688,309.600 190.497,309.602 191.133 C 309.604 191.500,309.919 192.340,310.302 193.000 C 310.956 194.125,311.007 197.998,311.108 254.600 L 311.215 315.000 310.241 318.000 C 307.327 326.967,302.400 332.072,293.800 335.031 L 291.000 335.994 219.630 335.997 L 148.260 336.000 145.430 335.018 C 140.319 333.244,139.684 332.841,134.862 328.318 C 132.616 326.212,129.907 321.565,129.427 318.997 C 129.263 318.118,128.920 317.147,128.664 316.839 C 128.315 316.416,128.200 294.170,128.200 227.039 L 128.200 137.800 129.067 134.600 C 129.543 132.840,130.393 130.590,130.954 129.600 C 131.515 128.610,132.247 127.320,132.580 126.733 C 134.155 123.961,138.478 120.313,143.000 117.940 C 144.003 117.414,146.644 116.725,151.000 115.853 C 152.661 115.520,228.681 115.664,230.400 116.002 M226.250 137.650 C 225.849 139.656,225.987 187.508,226.403 190.713 C 227.174 196.647,230.700 200.107,237.136 201.245 C 239.519 201.666,290.972 201.562,291.398 201.135 C 291.727 200.807,227.629 136.400,226.974 136.400 C 226.713 136.400,226.388 136.963,226.250 137.650", stroke: "none", fill: "#fcfcfc", fillRule: "evenodd" }),
             React__default['default'].createElement("path", { d: "M98.000 67.800 C 97.450 68.114,96.747 68.378,96.439 68.386 C 91.469 68.511,83.246 76.897,80.613 84.526 L 79.600 87.460 79.600 170.356 L 79.600 253.251 80.562 255.326 C 84.540 263.898,95.134 265.435,101.340 258.340 C 104.646 254.561,104.400 261.065,104.400 177.461 C 104.400 132.258,104.548 102.526,104.780 101.304 C 105.382 98.131,107.620 95.203,111.000 93.165 L 112.600 92.200 176.600 92.000 C 249.072 91.774,242.609 92.102,246.332 88.456 C 252.758 82.164,251.168 72.240,243.085 68.180 L 241.134 67.200 170.067 67.214 C 109.214 67.226,98.856 67.311,98.000 67.800 M151.000 115.853 C 146.644 116.725,144.003 117.414,143.000 117.940 C 138.478 120.313,134.155 123.961,132.580 126.733 C 132.247 127.320,131.515 128.610,130.954 129.600 C 130.393 130.590,129.543 132.840,129.067 134.600 L 128.200 137.800 128.200 227.039 C 128.200 294.170,128.315 316.416,128.664 316.839 C 128.920 317.147,129.263 318.118,129.427 318.997 C 129.907 321.565,132.616 326.212,134.862 328.318 C 139.684 332.841,140.319 333.244,145.430 335.018 L 148.260 336.000 219.630 335.997 L 291.000 335.994 293.800 335.031 C 302.400 332.072,307.327 326.967,310.241 318.000 L 311.215 315.000 311.108 254.600 C 311.007 197.998,310.956 194.125,310.302 193.000 C 309.919 192.340,309.604 191.500,309.602 191.133 C 309.600 190.497,307.838 186.688,307.142 185.815 C 305.143 183.306,299.664 177.700,274.002 151.902 C 238.906 116.622,240.594 118.012,230.400 116.002 C 228.681 115.664,152.661 115.520,151.000 115.853 M259.556 168.635 C 277.215 186.364,291.544 200.989,291.398 201.135 C 290.972 201.562,239.519 201.666,237.136 201.245 C 230.700 200.107,227.174 196.647,226.403 190.713 C 225.460 183.450,225.955 136.400,226.974 136.400 C 227.235 136.400,241.897 150.906,259.556 168.635", stroke: "none", fill: "#e4e4e4", fillRule: "evenodd" })))); };
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var svg = '<svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M465 5c5.53 0 10 4.47 10 10s-4.47 10-10 10-10-4.47-10-10 4.47-10 10-10zm3.59 5L465 13.59 461.41 10 460 11.41l3.59 3.59-3.59 3.59 1.41 1.41 3.59-3.59 3.59 3.59 1.41-1.41-3.59-3.59 3.59-3.59-1.41-1.41z" id="b"/><filter x="-30%" y="-30%" width="160%" height="160%" filterUnits="objectBoundingBox" id="a"><feOffset in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" in="shadowBlurOuter1"/></filter></defs><g transform="translate(-451 -1)" fill-rule="nonzero" fill="none"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="#FFF" fill-rule="evenodd" xlink:href="#b"/></g></svg>';
-    var Thumbnail = function (_a) {
-        var id = _a.id, image = _a.image, _b = _a.size, size = _b === void 0 ? 100 : _b, handleClose = _a.handleClose, alt = _a.alt;
-        var onClose = React.useCallback(function () { return handleClose === null || handleClose === void 0 ? void 0 : handleClose(id); }, [id, handleClose]);
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var CloseIcon = function () { return (React__default['default'].createElement("svg", { width: "28", height: "28", viewBox: "0 0 28 28", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink" },
+        React__default['default'].createElement("defs", null,
+            React__default['default'].createElement("path", { d: "M465 5c5.53 0 10 4.47 10 10s-4.47 10-10 10-10-4.47-10-10 4.47-10 10-10zm3.59 5L465 13.59 461.41 10 460 11.41l3.59 3.59-3.59 3.59 1.41 1.41 3.59-3.59 3.59 3.59 1.41-1.41-3.59-3.59 3.59-3.59-1.41-1.41z", id: "b" }),
+            React__default['default'].createElement("filter", { x: "-30%", y: "-30%", width: "160%", height: "160%", filterUnits: "objectBoundingBox", id: "a" },
+                React__default['default'].createElement("feOffset", { in: "SourceAlpha", result: "shadowOffsetOuter1" }),
+                React__default['default'].createElement("feGaussianBlur", { stdDeviation: "2", in: "shadowOffsetOuter1", result: "shadowBlurOuter1" }),
+                React__default['default'].createElement("feColorMatrix", { values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0", in: "shadowBlurOuter1" }))),
+        React__default['default'].createElement("g", { transform: "translate(-451 -1)", fillRule: "nonzero", fill: "none" },
+            React__default['default'].createElement("use", { fill: "#000", filter: "url(#a)", xlinkHref: "#b" }),
+            React__default['default'].createElement("use", { fill: "#FFF", fillRule: "evenodd", xlinkHref: "#b" })))); };
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var Thumbnail = function (_a) {
+        var image = _a.image, _b = _a.size, size = _b === void 0 ? 100 : _b, handleClose = _a.handleClose, alt = _a.alt;
+        var onClose = React.useCallback(function (event) { return handleClose === null || handleClose === void 0 ? void 0 : handleClose(event); }, [handleClose]);
         return (React__default['default'].createElement("div", { className: "rfu-thumbnail__wrapper", style: { width: size, height: size } },
             React__default['default'].createElement("div", { className: "rfu-thumbnail__overlay" }, handleClose ? (React__default['default'].createElement(IconButton, { onClick: onClose },
-                React__default['default'].createElement("div", { dangerouslySetInnerHTML: { __html: svg } }))) : null),
+                React__default['default'].createElement(CloseIcon, null))) : null),
             image ? (React__default['default'].createElement("img", { src: image, className: "rfu-thumbnail__image", alt: alt !== null && alt !== void 0 ? alt : '' })) : (React__default['default'].createElement(FilePlaceholder, { preserveAspectRatio: "xMinYMin slice", className: "rfu-thumbnail__image" }))));
     };
 
@@ -11543,16 +11601,15 @@ var StreamChatReact = (function (exports, React, streamChat) {
                     React__default['default'].createElement("path", { d: "M14 8.998H8v6H6v-6H0v-2h6v-6h2v6h6z", fill: "#A0B2B8", fillRule: "nonzero" })))));
     };
 
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var RetryIcon = function () { return (React__default['default'].createElement("svg", { width: "22", height: "20", viewBox: "0 0 22 20", xmlns: "http://www.w3.org/2000/svg" },
+        React__default['default'].createElement("path", { d: "M20 5.535V2a1 1 0 0 1 2 0v6a1 1 0 0 1-1 1h-6a1 1 0 0 1 0-2h3.638l-2.975-2.653a8 8 0 1 0 1.884 8.32 1 1 0 1 1 1.886.666A10 10 0 1 1 5.175 1.245c3.901-2.15 8.754-1.462 11.88 1.667L20 5.535z", fill: "#FFF", fillRule: "nonzero" }))); };
+
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var ImagePreviewer = function (_a) {
         var _b = _a.multiple, multiple = _b === void 0 ? true : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, imageUploads = _a.imageUploads, handleRemove = _a.handleRemove, handleRetry = _a.handleRetry, handleFiles = _a.handleFiles;
-        var onClose = React.useCallback(function (id) {
-            if (handleRemove) {
-                if (id == null) {
-                    console.warn("id of closed image was undefined, this shouldn't happen");
-                    return;
-                }
-                handleRemove(id);
-            }
+        var onClose = React.useCallback(function (id, event) {
+            if (!id)
+                return console.warn("image.id of closed image was \"null\", this shouldn't happen");
+            handleRemove === null || handleRemove === void 0 ? void 0 : handleRemove(id, event);
         }, [handleRemove]);
         return (React__default['default'].createElement("div", { className: "rfu-image-previewer" }, imageUploads === null || imageUploads === void 0 ? void 0 :
             imageUploads.map(function (image) {
@@ -11560,11 +11617,10 @@ var StreamChatReact = (function (exports, React, streamChat) {
                 return (React__default['default'].createElement("div", { key: image.id, className: "rfu-image-previewer__image" + (image.state === 'finished'
                         ? ' rfu-image-previewer__image--loaded'
                         : '') },
-                    image.state === 'failed' && (React__default['default'].createElement("button", { "aria-label": "Retry upload", className: "rfu-image-previewer__retry", dangerouslySetInnerHTML: {
-                            __html: '<svg width="22" height="20" viewBox="0 0 22 20" xmlns="http://www.w3.org/2000/svg"><path d="M20 5.535V2a1 1 0 0 1 2 0v6a1 1 0 0 1-1 1h-6a1 1 0 0 1 0-2h3.638l-2.975-2.653a8 8 0 1 0 1.884 8.32 1 1 0 1 1 1.886.666A10 10 0 1 1 5.175 1.245c3.901-2.15 8.754-1.462 11.88 1.667L20 5.535z" fill="#FFF" fill-rule="nonzero"/></svg>',
-                        }, onClick: handleRetry && (function () { return handleRetry(image.id); }) })),
-                    url !== undefined && (React__default['default'].createElement(Thumbnail, { handleClose: onClose, image: url, id: image.id })),
-                    image.state === 'uploading' && (React__default['default'].createElement(LoadingIndicator$1, { backgroundColor: "rgba(255,255,255,0.1)", color: "rgba(255,255,255,0.7)" }))));
+                    image.state === 'failed' && (React__default['default'].createElement("button", { type: "button", "aria-label": "Retry upload", className: "rfu-image-previewer__retry", onClick: function (event) { return handleRetry === null || handleRetry === void 0 ? void 0 : handleRetry(image.id, event); } },
+                        React__default['default'].createElement(RetryIcon, null))),
+                    url && (React__default['default'].createElement(Thumbnail, { handleClose: function (event) { return onClose(image.id, event); }, image: url })),
+                    image.state === 'uploading' && (React__default['default'].createElement(LoadingIndicator$1, { backgroundColor: "#ffffff19", color: "#ffffffb2" }))));
             }),
             handleFiles && !disabled && (React__default['default'].createElement(ThumbnailPlaceholder, { handleFiles: handleFiles, multiple: multiple }))));
     };
@@ -11614,6 +11670,8 @@ var StreamChatReact = (function (exports, React, streamChat) {
             return function () { return document.removeEventListener('keydown', handleEscKey); };
         }, [onClose, open]);
         var openClasses = open ? 'str-chat__modal--open' : 'str-chat__modal--closed';
+        if (!open)
+            return null;
         return (React__default['default'].createElement("div", { className: "str-chat__modal " + openClasses, onClick: handleClick },
             React__default['default'].createElement("button", { className: 'str-chat__modal__close-button', ref: closeRef, title: 'Close' },
                 t('Close'),
@@ -42150,11 +42208,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
                                     React__default['default'].createElement("span", { className: 'str-chat__input-fileupload' },
                                         React__default['default'].createElement(FileUploadIcon$1, null)))))),
                         React__default['default'].createElement("div", null,
-                            React__default['default'].createElement("button", { onClick: function () {
-                                    if (clearEditingState) {
-                                        clearEditingState();
-                                    }
-                                } }, t('Cancel')),
+                            React__default['default'].createElement("button", { onClick: clearEditingState }, t('Cancel')),
                             React__default['default'].createElement("button", { type: 'submit' }, t('Send'))))))));
     };
 
@@ -45081,7 +45135,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version = '9.1.0';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version = '9.1.3';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;
@@ -45405,10 +45459,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
         var attributes = __assign$2(__assign$2({}, elementProps), { ref: function (element) {
                 scrollComponent.current = element;
             } });
-        var childrenArray = [children];
-        if (isLoading && loader) {
-            childrenArray.unshift(loader);
-        }
+        var childrenArray = [loader, children];
         return React__default['default'].createElement(element, attributes, childrenArray);
     };
 
@@ -46702,7 +46753,8 @@ var StreamChatReact = (function (exports, React, streamChat) {
         };
     }
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var ResizeObserver$1 = window.ResizeObserver || ResizeObserver$2;
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var isBrowser = typeof window !== 'undefined';
+    var ResizeObserver$1 = (isBrowser && window.ResizeObserver) || ResizeObserver$2;
     var useScrollLocationLogic = function (params) {
         var _a = params.messages, messages = _a === void 0 ? [] : _a, _b = params.scrolledUpThreshold, scrolledUpThreshold = _b === void 0 ? 200 : _b, hasMoreNewer = params.hasMoreNewer, suppressAutoscroll = params.suppressAutoscroll, listElement = params.listElement, ulElement = params.ulElement;
         var _c = React.useState(false), hasNewMessages = _c[0], setHasNewMessages = _c[1];
@@ -46793,12 +46845,6 @@ var StreamChatReact = (function (exports, React, streamChat) {
         };
     };
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedCenter = function (_a) {
-        var children = _a.children;
-        return (React__default['default'].createElement("div", { className: 'str-chat__list__center' }, children));
-    };
-    var Center = React__default['default'].memo(UnMemoizedCenter);
-
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedMessageNotification = function (props) {
         var children = props.children, onClick = props.onClick, _a = props.showNotification, showNotification = _a === void 0 ? true : _a;
         if (!showNotification)
@@ -46955,8 +47001,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
             }
         }, [highlightedMessageId]);
         return (React__default['default'].createElement(React__default['default'].Fragment, null,
-            React__default['default'].createElement("div", { className: messageListClass + " " + threadListClass, onScroll: onScroll, ref: setListElement, tabIndex: 0 }, !elements.length ? (React__default['default'].createElement(EmptyStateIndicator$1, { listType: 'message' })) : (React__default['default'].createElement(InfiniteScroll, __assign$2({ className: 'str-chat__reverse-infinite-scroll', "data-testid": 'reverse-infinite-scroll', hasMore: props.hasMore, hasMoreNewer: props.hasMoreNewer, isLoading: props.loadingMore, loader: React__default['default'].createElement(Center, { key: 'loadingindicator' },
-                    React__default['default'].createElement(LoadingIndicator$1, { size: 20 })), loadMore: loadMore, loadMoreNewer: loadMoreNewer }, props.internalInfiniteScrollProps),
+            React__default['default'].createElement("div", { className: messageListClass + " " + threadListClass, onScroll: onScroll, ref: setListElement, tabIndex: 0 }, !elements.length ? (React__default['default'].createElement(EmptyStateIndicator$1, { listType: 'message' })) : (React__default['default'].createElement(InfiniteScroll, __assign$2({ className: 'str-chat__reverse-infinite-scroll', "data-testid": 'reverse-infinite-scroll', hasMore: props.hasMore, hasMoreNewer: props.hasMoreNewer, isLoading: props.loadingMore, loader: React__default['default'].createElement("div", { className: 'str-chat__list__loading', key: 'loadingindicator' }, props.loadingMore && React__default['default'].createElement(LoadingIndicator$1, { size: 20 })), loadMore: loadMore, loadMoreNewer: loadMoreNewer }, props.internalInfiniteScrollProps),
                 React__default['default'].createElement("ul", { className: 'str-chat__ul', ref: setUlElement }, elements),
                 React__default['default'].createElement(TypingIndicator$1, { threadList: threadList }),
                 React__default['default'].createElement("div", { key: 'bottom' })))),
@@ -48241,9 +48286,10 @@ var StreamChatReact = (function (exports, React, streamChat) {
         return { atBottom: atBottom, newMessagesNotification: newMessagesNotification, setNewMessagesNotification: setNewMessagesNotification };
     }
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function usePrependedMessagesCount(messages) {
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function usePrependedMessagesCount(messages, hasDateSeparator) {
         var _a;
-        var currentFirstMessageId = (_a = messages === null || messages === void 0 ? void 0 : messages[0]) === null || _a === void 0 ? void 0 : _a.id;
+        var firstRealMessageIndex = hasDateSeparator ? 1 : 0;
+        var currentFirstMessageId = (_a = messages === null || messages === void 0 ? void 0 : messages[firstRealMessageIndex]) === null || _a === void 0 ? void 0 : _a.id;
         var firstMessageId = React.useRef(currentFirstMessageId);
         var earliestMessageId = React.useRef(currentFirstMessageId);
         var previousNumItemsPrepended = React.useRef(0);
@@ -48423,7 +48469,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
                 window.removeEventListener('blur', resetNewMessagesReceivedInBackground);
             };
         }, [scrollToBottomIfConfigured]);
-        var numItemsPrepended = usePrependedMessagesCount(processedMessages);
+        var numItemsPrepended = usePrependedMessagesCount(processedMessages, !disableDateSeparator);
         /**
          * Logic to update the key of the virtuoso component when the list jumps to a new location.
          */
@@ -48431,7 +48477,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
         var firstMessageId = React.useRef();
         React.useEffect(function () {
             var _a;
-            var continuousSet = messages && messages.find(function (message) { return message.id === firstMessageId.current; });
+            var continuousSet = messages === null || messages === void 0 ? void 0 : messages.find(function (message) { return message.id === firstMessageId.current; });
             if (!continuousSet) {
                 setMessageSetKey(+new Date());
             }