stream-chat-react 11.13.1 → 11.15.0

package/dist/components/Attachment/Audio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Audio.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/Audio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAO9C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,MAAM,MAAM,UAAU,CACpB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,EAAE,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAC;CACpC,CAAC;AAwGF;;GAEG;AACH,eAAO,MAAM,KAAK,gJAAwD,CAAC"}
+{"version":3,"file":"Audio.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/Audio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAO9C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,MAAM,MAAM,UAAU,CACpB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,EAAE,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAC;CACpC,CAAC;AA2GF;;GAEG;AACH,eAAO,MAAM,KAAK,gJAAwD,CAAC"}

package/dist/components/Attachment/Audio.js

@@ -5,8 +5,9 @@ import { useAudioController } from './hooks/useAudioController';
 import { useChatContext } from '../../context/ChatContext';
 var AudioV1 = function (_a) {
     var og = _a.og;
-    var asset_url = og.asset_url, description = og.description, image_url = og.image_url, text = og.text, title = og.title;
-    var _b = useAudioController(), audioRef = _b.audioRef, isPlaying = _b.isPlaying, progress = _b.progress, togglePlay = _b.togglePlay;
+    // fixme: pass mimeType if available
+    var asset_url = og.asset_url, description = og.description, image_url = og.image_url, mime_type = og.mime_type, text = og.text, title = og.title;
+    var _b = useAudioController({ mimeType: mime_type }), audioRef = _b.audioRef, isPlaying = _b.isPlaying, progress = _b.progress, togglePlay = _b.togglePlay;
     return (React.createElement("div", { className: 'str-chat__audio' },
         React.createElement("div", { className: 'str-chat__audio__wrapper' },
             React.createElement("audio", { ref: audioRef },
@@ -27,8 +28,10 @@ var AudioV1 = function (_a) {
 };
 var AudioV2 = function (_a) {
     var og = _a.og;
-    var asset_url = og.asset_url, file_size = og.file_size, title = og.title;
-    var _b = useAudioController(), audioRef = _b.audioRef, isPlaying = _b.isPlaying, progress = _b.progress, seek = _b.seek, togglePlay = _b.togglePlay;
+    var asset_url = og.asset_url, file_size = og.file_size, mime_type = og.mime_type, title = og.title;
+    var _b = useAudioController({
+        mimeType: mime_type,
+    }), audioRef = _b.audioRef, isPlaying = _b.isPlaying, progress = _b.progress, seek = _b.seek, togglePlay = _b.togglePlay;
     if (!asset_url)
         return null;
     var dataTestId = 'audio-widget';

package/dist/components/Attachment/Card.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { AudioProps } from './Audio';
 import type { RenderAttachmentProps } from './utils';
-export declare const CardAudio: ({ og: { asset_url, author_name, og_scrape_url, text, title, title_link }, }: AudioProps) => React.JSX.Element;
+export declare const CardAudio: ({ og: { asset_url, author_name, mime_type, og_scrape_url, text, title, title_link }, }: AudioProps) => React.JSX.Element;
 export type CardProps = RenderAttachmentProps['attachment'];
 /**
  * Simple Card Layout for displaying links

package/dist/components/Attachment/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAWrC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA2MrD,eAAO,MAAM,SAAS,gFAEnB,UAAU,sBA8BZ,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,qBAAqB,CAAC,YAAY,CAAC,CAAC;AAQ5D;;GAEG;AACH,eAAO,MAAM,IAAI,UATc,SAAS,sBAS+B,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAWrC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA2MrD,eAAO,MAAM,SAAS,2FAEnB,UAAU,sBAgCZ,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,qBAAqB,CAAC,YAAY,CAAC,CAAC;AAQ5D;;GAEG;AACH,eAAO,MAAM,IAAI,UATc,SAAS,sBAS+B,CAAC"}

package/dist/components/Attachment/Card.js

@@ -94,8 +94,10 @@ var CardV2 = function (props) {
         React.createElement(CardContent, __assign({}, props))));
 };
 export var CardAudio = function (_a) {
-    var _b = _a.og, asset_url = _b.asset_url, author_name = _b.author_name, og_scrape_url = _b.og_scrape_url, text = _b.text, title = _b.title, title_link = _b.title_link;
-    var _c = useAudioController(), audioRef = _c.audioRef, isPlaying = _c.isPlaying, progress = _c.progress, seek = _c.seek, togglePlay = _c.togglePlay;
+    var _b = _a.og, asset_url = _b.asset_url, author_name = _b.author_name, mime_type = _b.mime_type, og_scrape_url = _b.og_scrape_url, text = _b.text, title = _b.title, title_link = _b.title_link;
+    var _c = useAudioController({
+        mimeType: mime_type,
+    }), audioRef = _c.audioRef, isPlaying = _c.isPlaying, progress = _c.progress, seek = _c.seek, togglePlay = _c.togglePlay;
     var url = title_link || og_scrape_url;
     var dataTestId = 'card-audio-widget';
     var rootClassName = 'str-chat__message-attachment-card-audio-widget';

package/dist/components/Attachment/VoiceRecording.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VoiceRecording.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/VoiceRecording.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAQ9C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,MAAM,MAAM,yBAAyB,CACnC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,YAAY,CAAC,GAAG;IAChE,uGAAuG;IACvG,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,oBAAoB,kCAAmC,yBAAyB,6BA8D5F,CAAC;AAEF,MAAM,MAAM,yBAAyB,CACnC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,YAAY,CAAC,CAAC;AAEhE,eAAO,MAAM,oBAAoB,mBAAoB,yBAAyB,sBA4B7E,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAC7B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,gEAAgE;IAChE,UAAU,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAC3C,gGAAgG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,cAAc,6BAA8B,mBAAmB,sBAKzE,CAAC"}
+{"version":3,"file":"VoiceRecording.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/VoiceRecording.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAQ9C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,MAAM,MAAM,yBAAyB,CACnC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,YAAY,CAAC,GAAG;IAChE,uGAAuG;IACvG,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,oBAAoB,kCAAmC,yBAAyB,6BAiE5F,CAAC;AAEF,MAAM,MAAM,yBAAyB,CACnC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,YAAY,CAAC,CAAC;AAEhE,eAAO,MAAM,oBAAoB,mBAAoB,yBAAyB,sBA4B7E,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAC7B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,gEAAgE;IAChE,UAAU,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAC3C,gGAAgG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,cAAc,6BAA8B,mBAAmB,sBAKzE,CAAC"}

package/dist/components/Attachment/VoiceRecording.js

@@ -8,13 +8,15 @@ var rootClassName = 'str-chat__message-attachment__voice-recording-widget';
 export var VoiceRecordingPlayer = function (_a) {
     var attachment = _a.attachment, playbackRates = _a.playbackRates;
     var t = useTranslationContext('VoiceRecordingPlayer').t;
-    var asset_url = attachment.asset_url, duration = attachment.duration, mime_type = attachment.mime_type, _b = attachment.title, title = _b === void 0 ? t('Voice message') : _b, waveform_data = attachment.waveform_data;
-    var _c = useAudioController({
+    var asset_url = attachment.asset_url, _b = attachment.duration, duration = _b === void 0 ? 0 : _b, mime_type = attachment.mime_type, _c = attachment.title, title = _c === void 0 ? t('Voice message') : _c, waveform_data = attachment.waveform_data;
+    var _d = useAudioController({
         durationSeconds: duration !== null && duration !== void 0 ? duration : 0,
+        mimeType: mime_type,
         playbackRates: playbackRates,
-    }), audioRef = _c.audioRef, increasePlaybackRate = _c.increasePlaybackRate, isPlaying = _c.isPlaying, playbackRate = _c.playbackRate, progress = _c.progress, secondsElapsed = _c.secondsElapsed, seek = _c.seek, togglePlay = _c.togglePlay;
+    }), audioRef = _d.audioRef, increasePlaybackRate = _d.increasePlaybackRate, isPlaying = _d.isPlaying, playbackRate = _d.playbackRate, progress = _d.progress, secondsElapsed = _d.secondsElapsed, seek = _d.seek, togglePlay = _d.togglePlay;
     if (!asset_url)
         return null;
+    var displayedDuration = secondsElapsed || duration;
     return (React.createElement("div", { className: rootClassName, "data-testid": 'voice-recording-widget' },
         React.createElement("audio", { ref: audioRef },
             React.createElement("source", { "data-testid": 'audio-source', src: asset_url, type: mime_type })),
@@ -22,7 +24,7 @@ export var VoiceRecordingPlayer = function (_a) {
         React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__metadata' },
             React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__title', "data-testid": 'voice-recording-title', title: title }, title),
             React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__audio-state' },
-                React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__timer' }, attachment.duration ? (displayDuration(secondsElapsed)) : (React.createElement(FileSizeIndicator, { fileSize: attachment.file_size, maximumFractionDigits: 0 }))),
+                React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__timer' }, attachment.duration ? (displayDuration(displayedDuration)) : (React.createElement(FileSizeIndicator, { fileSize: attachment.file_size, maximumFractionDigits: 0 }))),
                 React.createElement(WaveProgressBar, { progress: progress, seek: seek, waveformData: waveform_data || [] }))),
         React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__right-section' }, isPlaying ? (React.createElement(PlaybackRateButton, { disabled: !audioRef.current, onClick: increasePlaybackRate },
             playbackRate.toFixed(1),

package/dist/components/Attachment/audioSampling.d.ts

@@ -0,0 +1,10 @@
+export declare const resampleWaveformData: (waveformData: number[], amplitudesCount: number) => number[];
+/**
+ * The downSample function uses the Largest-Triangle-Three-Buckets (LTTB) algorithm.
+ * See the thesis Downsampling Time Series for Visual Representation by Sveinn Steinarsson for more (https://skemman.is/bitstream/1946/15343/3/SS_MSthesis.pdf)
+ * @param data
+ * @param targetOutputSize
+ */
+export declare function downSample(data: number[], targetOutputSize: number): number[];
+export declare const upSample: (values: number[], targetSize: number) => number[];
+//# sourceMappingURL=audioSampling.d.ts.map

package/dist/components/Attachment/audioSampling.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"audioSampling.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/audioSampling.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,iBAAkB,MAAM,EAAE,mBAAmB,MAAM,aAKvC,CAAC;AAE9C;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,gBAAgB,EAAE,MAAM,GAAG,MAAM,EAAE,CAoD7E;AAgBD,eAAO,MAAM,QAAQ,WAAY,MAAM,EAAE,cAAc,MAAM,aAsB5D,CAAC"}

package/dist/components/Attachment/audioSampling.js

@@ -0,0 +1,83 @@
+import { divMod } from './utils';
+export var resampleWaveformData = function (waveformData, amplitudesCount) {
+    return waveformData.length === amplitudesCount
+        ? waveformData
+        : waveformData.length > amplitudesCount
+            ? downSample(waveformData, amplitudesCount)
+            : upSample(waveformData, amplitudesCount);
+};
+/**
+ * The downSample function uses the Largest-Triangle-Three-Buckets (LTTB) algorithm.
+ * See the thesis Downsampling Time Series for Visual Representation by Sveinn Steinarsson for more (https://skemman.is/bitstream/1946/15343/3/SS_MSthesis.pdf)
+ * @param data
+ * @param targetOutputSize
+ */
+export function downSample(data, targetOutputSize) {
+    if (data.length <= targetOutputSize || targetOutputSize === 0) {
+        return data;
+    }
+    if (targetOutputSize === 1)
+        return [mean(data)];
+    var result = [];
+    // bucket size adjusted due to the fact that the first and the last item in the original data array is kept in target output
+    var bucketSize = (data.length - 2) / (targetOutputSize - 2);
+    var lastSelectedPointIndex = 0;
+    result.push(data[lastSelectedPointIndex]); // Always add the first point
+    var maxAreaPoint, maxArea, triangleArea;
+    for (var bucketIndex = 1; bucketIndex < targetOutputSize - 1; bucketIndex++) {
+        var previousBucketRefPoint = data[lastSelectedPointIndex];
+        var nextBucketMean = getNextBucketMean(data, bucketIndex, bucketSize);
+        var currentBucketStartIndex = Math.floor((bucketIndex - 1) * bucketSize) + 1;
+        var nextBucketStartIndex = Math.floor(bucketIndex * bucketSize) + 1;
+        var countUnitsBetweenAtoC = 1 + nextBucketStartIndex - currentBucketStartIndex;
+        maxArea = triangleArea = -1;
+        for (var currentPointIndex = currentBucketStartIndex; currentPointIndex < nextBucketStartIndex; currentPointIndex++) {
+            var countUnitsBetweenAtoB = Math.abs(currentPointIndex - currentBucketStartIndex) + 1;
+            var countUnitsBetweenBtoC = countUnitsBetweenAtoC - countUnitsBetweenAtoB;
+            var currentPointValue = data[currentPointIndex];
+            triangleArea = triangleAreaHeron(triangleBase(Math.abs(previousBucketRefPoint - currentPointValue), countUnitsBetweenAtoB), triangleBase(Math.abs(currentPointValue - nextBucketMean), countUnitsBetweenBtoC), triangleBase(Math.abs(previousBucketRefPoint - nextBucketMean), countUnitsBetweenAtoC));
+            if (triangleArea > maxArea) {
+                maxArea = triangleArea;
+                maxAreaPoint = data[currentPointIndex];
+                lastSelectedPointIndex = currentPointIndex;
+            }
+        }
+        if (typeof maxAreaPoint !== 'undefined')
+            result.push(maxAreaPoint);
+    }
+    result.push(data[data.length - 1]); // Always add the last point
+    return result;
+}
+var triangleAreaHeron = function (a, b, c) {
+    var s = (a + b + c) / 2;
+    return Math.sqrt(s * (s - a) * (s - b) * (s - c));
+};
+var triangleBase = function (a, b) { return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)); };
+var mean = function (values) { return values.reduce(function (acc, value) { return acc + value; }, 0) / values.length; };
+var getNextBucketMean = function (data, currentBucketIndex, bucketSize) {
+    var nextBucketStartIndex = Math.floor(currentBucketIndex * bucketSize) + 1;
+    var nextNextBucketStartIndex = Math.floor((currentBucketIndex + 1) * bucketSize) + 1;
+    nextNextBucketStartIndex =
+        nextNextBucketStartIndex < data.length ? nextNextBucketStartIndex : data.length;
+    return mean(data.slice(nextBucketStartIndex, nextNextBucketStartIndex));
+};
+export var upSample = function (values, targetSize) {
+    if (!values.length) {
+        console.warn('Cannot extend empty array of amplitudes.');
+        return values;
+    }
+    if (values.length > targetSize) {
+        console.warn('Requested to extend the waveformData that is longer than the target list size');
+        return values;
+    }
+    if (targetSize === values.length)
+        return values;
+    // eslint-disable-next-line prefer-const
+    var _a = divMod(targetSize, values.length), bucketSize = _a[0], remainder = _a[1];
+    var result = [];
+    for (var i = 0; i < values.length; i++) {
+        var extra = remainder && remainder-- ? 1 : 0;
+        result.push.apply(result, Array(bucketSize + extra).fill(values[i]));
+    }
+    return result;
+};

package/dist/components/Attachment/components/FileSizeIndicator.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import prettybytes from 'pretty-bytes';
+import { prettifyFileSize } from '../../MessageInput/hooks/utils';
 export var FileSizeIndicator = function (_a) {
     var fileSize = _a.fileSize, maximumFractionDigits = _a.maximumFractionDigits;
     if (!(fileSize && Number.isFinite(Number(fileSize))))
         return null;
-    return (React.createElement("span", { className: 'str-chat__message-attachment-file--item-size', "data-testid": 'file-size-indicator' }, prettybytes(fileSize, { maximumFractionDigits: maximumFractionDigits })));
+    return (React.createElement("span", { className: 'str-chat__message-attachment-file--item-size', "data-testid": 'file-size-indicator' }, prettifyFileSize(fileSize, maximumFractionDigits)));
 };

package/dist/components/Attachment/components/WaveProgressBar.d.ts

@@ -1,7 +1,8 @@
-import React, { MouseEventHandler } from 'react';
+import React from 'react';
+import type { SeekFn } from '../hooks/useAudioController';
 type WaveProgressBarProps = {
     /** Function that allows to change the track progress */
-    seek: MouseEventHandler<HTMLDivElement>;
+    seek: SeekFn;
     /** The array of fractional number values between 0 and 1 representing the height of amplitudes */
     waveformData: number[];
     /** Allows to specify the number of bars into which the original waveformData array should be resampled */
@@ -10,13 +11,5 @@ type WaveProgressBarProps = {
     progress?: number;
 };
 export declare const WaveProgressBar: ({ amplitudesCount, progress, seek, waveformData, }: WaveProgressBarProps) => React.JSX.Element | null;
-/**
- * The downSample function uses the Largest-Triangle-Three-Buckets (LTTB) algorithm.
- * See the thesis Downsampling Time Series for Visual Representation by Sveinn Steinarsson for more (https://skemman.is/bitstream/1946/15343/3/SS_MSthesis.pdf)
- * @param data
- * @param targetOutputSize
- */
-export declare function downSample(data: number[], targetOutputSize: number): number[];
-export declare const upSample: (values: number[], targetSize: number) => number[];
 export {};
 //# sourceMappingURL=WaveProgressBar.d.ts.map

package/dist/components/Attachment/components/WaveProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WaveProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/Attachment/components/WaveProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAA6B,MAAM,OAAO,CAAC;AAI5E,KAAK,oBAAoB,GAAG;IAC1B,wDAAwD;IACxD,IAAI,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACxC,kGAAkG;IAClG,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,0GAA0G;IAC1G,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AACF,eAAO,MAAM,eAAe,uDAKzB,oBAAoB,6BAqEtB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,gBAAgB,EAAE,MAAM,GAAG,MAAM,EAAE,CAoD7E;AAoBD,eAAO,MAAM,QAAQ,WAAY,MAAM,EAAE,cAAc,MAAM,aAsB5D,CAAC"}
+{"version":3,"file":"WaveProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/Attachment/components/WaveProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAE1D,KAAK,oBAAoB,GAAG;IAC1B,wDAAwD;IACxD,IAAI,EAAE,MAAM,CAAC;IACb,kGAAkG;IAClG,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,0GAA0G;IAC1G,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,eAAe,uDAKzB,oBAAoB,6BA2EtB,CAAC"}

package/dist/components/Attachment/components/WaveProgressBar.js

@@ -1,37 +1,45 @@
-import React, { useMemo, useRef, useState } from 'react';
+import { __assign } from "tslib";
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import clsx from 'clsx';
-import { divMod } from '../utils';
+import { resampleWaveformData } from '../audioSampling';
 export 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 = useState(null), progressIndicator = _d[0], setProgressIndicator = _d[1];
     var isDragging = useRef(false);
-    var handleMouseDown = function () {
+    var rootRef = useRef(null);
+    var handleDragStart = function (e) {
+        e.preventDefault();
         if (!progressIndicator)
             return;
         isDragging.current = true;
         progressIndicator.style.cursor = 'grabbing';
     };
-    var handleMouseMove = function (event) {
+    var handleDrag = function (e) {
         if (!isDragging.current)
             return;
-        seek(event);
+        // Due to throttling of seek, it is necessary to create a copy (snapshot) of the event.
+        // Otherwise, the event would be nullified at the point when the throttled function is executed.
+        seek(__assign({}, e));
     };
-    var handleMouseUp = function () {
+    var handleDragStop = useCallback(function () {
         if (!progressIndicator)
             return;
         isDragging.current = false;
         progressIndicator.style.removeProperty('cursor');
-    };
-    var resampledWaveformData = useMemo(function () {
-        return waveformData.length === amplitudesCount
-            ? waveformData
-            : waveformData.length > amplitudesCount
-                ? downSample(waveformData, amplitudesCount)
-                : upSample(waveformData, amplitudesCount);
-    }, [amplitudesCount, waveformData]);
+    }, [progressIndicator]);
+    var resampledWaveformData = useMemo(function () { return resampleWaveformData(waveformData, amplitudesCount); }, [
+        amplitudesCount,
+        waveformData,
+    ]);
+    useEffect(function () {
+        document.addEventListener('pointerup', handleDragStop);
+        return function () {
+            document.removeEventListener('pointerup', handleDragStop);
+        };
+    }, [handleDragStop]);
     if (!waveformData.length)
         return null;
-    return (React.createElement("div", { className: 'str-chat__wave-progress-bar__track', "data-testid": 'wave-progress-bar-track', onClick: seek, onMouseDown: handleMouseDown, onMouseLeave: handleMouseUp, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, role: 'progressbar' },
+    return (React.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' },
         resampledWaveformData.map(function (amplitude, i) {
             var _a;
             return (React.createElement("div", { className: clsx('str-chat__wave-progress-bar__amplitude-bar', (_a = {},
@@ -44,78 +52,3 @@ export var WaveProgressBar = function (_a) {
         }),
         React.createElement("div", { className: 'str-chat__wave-progress-bar__progress-indicator', "data-testid": 'wave-progress-bar-progress-indicator', ref: setProgressIndicator, style: { left: "".concat(progress < 0 ? 0 : progress > 100 ? 100 : progress, "%") } })));
 };
-/**
- * The downSample function uses the Largest-Triangle-Three-Buckets (LTTB) algorithm.
- * See the thesis Downsampling Time Series for Visual Representation by Sveinn Steinarsson for more (https://skemman.is/bitstream/1946/15343/3/SS_MSthesis.pdf)
- * @param data
- * @param targetOutputSize
- */
-export function downSample(data, targetOutputSize) {
-    if (data.length <= targetOutputSize || targetOutputSize === 0) {
-        return data;
-    }
-    if (targetOutputSize === 1)
-        return [mean(data)];
-    var result = [];
-    // bucket size adjusted due to the fact that the first and the last item in the original data array is kept in target output
-    var bucketSize = (data.length - 2) / (targetOutputSize - 2);
-    var lastSelectedPointIndex = 0;
-    result.push(data[lastSelectedPointIndex]); // Always add the first point
-    var maxAreaPoint, maxArea, triangleArea;
-    for (var bucketIndex = 1; bucketIndex < targetOutputSize - 1; bucketIndex++) {
-        var previousBucketRefPoint = data[lastSelectedPointIndex];
-        var nextBucketMean = getNextBucketMean(data, bucketIndex, bucketSize);
-        var currentBucketStartIndex = Math.floor((bucketIndex - 1) * bucketSize) + 1;
-        var nextBucketStartIndex = Math.floor(bucketIndex * bucketSize) + 1;
-        var countUnitsBetweenAtoC = 1 + nextBucketStartIndex - currentBucketStartIndex;
-        maxArea = triangleArea = -1;
-        for (var currentPointIndex = currentBucketStartIndex; currentPointIndex < nextBucketStartIndex; currentPointIndex++) {
-            var countUnitsBetweenAtoB = Math.abs(currentPointIndex - currentBucketStartIndex) + 1;
-            var countUnitsBetweenBtoC = countUnitsBetweenAtoC - countUnitsBetweenAtoB;
-            var currentPointValue = data[currentPointIndex];
-            triangleArea = triangleAreaHeron(triangleBase(Math.abs(previousBucketRefPoint - currentPointValue), countUnitsBetweenAtoB), triangleBase(Math.abs(currentPointValue - nextBucketMean), countUnitsBetweenBtoC), triangleBase(Math.abs(previousBucketRefPoint - nextBucketMean), countUnitsBetweenAtoC));
-            if (triangleArea > maxArea) {
-                maxArea = triangleArea;
-                maxAreaPoint = data[currentPointIndex];
-                lastSelectedPointIndex = currentPointIndex;
-            }
-        }
-        if (typeof maxAreaPoint !== 'undefined')
-            result.push(maxAreaPoint);
-    }
-    result.push(data[data.length - 1]); // Always add the last point
-    return result;
-}
-var triangleAreaHeron = function (a, b, c) {
-    var s = (a + b + c) / 2;
-    return Math.sqrt(s * (s - a) * (s - b) * (s - c));
-};
-var triangleBase = function (a, b) { return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)); };
-var mean = function (values) { return values.reduce(function (acc, value) { return acc + value; }, 0) / values.length; };
-var getNextBucketMean = function (data, currentBucketIndex, bucketSize) {
-    var nextBucketStartIndex = Math.floor(currentBucketIndex * bucketSize) + 1;
-    var nextNextBucketStartIndex = Math.floor((currentBucketIndex + 1) * bucketSize) + 1;
-    nextNextBucketStartIndex =
-        nextNextBucketStartIndex < data.length ? nextNextBucketStartIndex : data.length;
-    return mean(data.slice(nextBucketStartIndex, nextNextBucketStartIndex));
-};
-export var upSample = function (values, targetSize) {
-    if (!values.length) {
-        console.warn('Cannot extend empty array of amplitudes.');
-        return values;
-    }
-    if (values.length > targetSize) {
-        console.warn('Requested to extend the waveformData that is longer than the target list size');
-        return values;
-    }
-    if (targetSize === values.length)
-        return values;
-    // eslint-disable-next-line prefer-const
-    var _a = divMod(targetSize, values.length), bucketSize = _a[0], remainder = _a[1];
-    var result = [];
-    for (var i = 0; i < values.length; i++) {
-        var extra = remainder && remainder-- ? 1 : 0;
-        result.push.apply(result, Array(bucketSize + extra).fill(values[i]));
-    }
-    return result;
-};

package/dist/components/Attachment/hooks/useAudioController.d.ts

@@ -1,19 +1,27 @@
 export declare const elementIsPlaying: (audioElement: HTMLAudioElement | null) => boolean | null;
+export type SeekFn = (params: {
+    clientX: number;
+    currentTarget: HTMLDivElement;
+}) => void;
 type AudioControllerParams = {
     /** Audio duration in seconds. */
     durationSeconds?: number;
+    /** The audio MIME type that is checked before the audio is played. If the type is not supported the controller registers error in playbackError. */
+    mimeType?: string;
     /** An array of fractional numeric values of playback speed to override the defaults (1.0, 1.5, 2.0) */
     playbackRates?: number[];
 };
-export declare const useAudioController: ({ durationSeconds, playbackRates, }?: AudioControllerParams) => {
+export declare const useAudioController: ({ durationSeconds, mimeType, playbackRates, }?: AudioControllerParams) => {
     audioRef: import("react").MutableRefObject<HTMLAudioElement | null>;
+    canPlayRecord: boolean;
     increasePlaybackRate: () => void;
     isPlaying: boolean;
+    playbackError: Error | undefined;
     playbackRate: number;
     progress: number;
     secondsElapsed: number;
-    seek: import("react").MouseEventHandler<HTMLDivElement>;
-    togglePlay: () => void;
+    seek: SeekFn;
+    togglePlay: () => Promise<void>;
 };
 export {};
 //# sourceMappingURL=useAudioController.d.ts.map

package/dist/components/Attachment/hooks/useAudioController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAudioController.d.ts","sourceRoot":"","sources":["../../../../src/components/Attachment/hooks/useAudioController.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,iBAAkB,gBAAgB,GAAG,IAAI,mBACR,CAAC;AAI/D,KAAK,qBAAqB,GAAG;IAC3B,iCAAiC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uGAAuG;IACvG,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,yCAG5B,qBAAqB;;;;;;;;;CAmFvB,CAAC"}
+{"version":3,"file":"useAudioController.d.ts","sourceRoot":"","sources":["../../../../src/components/Attachment/hooks/useAudioController.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,gBAAgB,iBAAkB,gBAAgB,GAAG,IAAI,mBACR,CAAC;AAM/D,MAAM,MAAM,MAAM,GAAG,CAAC,MAAM,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,cAAc,CAAA;CAAE,KAAK,IAAI,CAAC;AAE1F,KAAK,qBAAqB,GAAG;IAC3B,iCAAiC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oJAAoJ;IACpJ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uGAAuG;IACvG,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,mDAI5B,qBAAqB;;;;;;;;;;;CA8HvB,CAAC"}

package/dist/components/Attachment/hooks/useAudioController.js

@@ -1,29 +1,81 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { __awaiter, __generator } from "tslib";
+import throttle from 'lodash.throttle';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useChannelActionContext, useTranslationContext } from '../../../context';
+var isSeekable = function (audioElement) {
+    return !(audioElement.duration === Infinity || isNaN(audioElement.duration));
+};
 export var elementIsPlaying = function (audioElement) {
     return audioElement && !(audioElement.paused || audioElement.ended);
 };
+var logError = function (e) { return console.error('[AUDIO PLAYER]', e); };
 var DEFAULT_PLAYBACK_RATES = [1.0, 1.5, 2.0];
 export var useAudioController = function (_a) {
-    var _b = _a === void 0 ? {} : _a, durationSeconds = _b.durationSeconds, _c = _b.playbackRates, playbackRates = _c === void 0 ? DEFAULT_PLAYBACK_RATES : _c;
+    var _b = _a === void 0 ? {} : _a, durationSeconds = _b.durationSeconds, mimeType = _b.mimeType, _c = _b.playbackRates, playbackRates = _c === void 0 ? DEFAULT_PLAYBACK_RATES : _c;
     var addNotification = useChannelActionContext('useAudioController').addNotification;
     var t = useTranslationContext('useAudioController').t;
     var _d = useState(false), isPlaying = _d[0], setIsPlaying = _d[1];
-    var _e = useState(0), secondsElapsed = _e[0], setSecondsElapsed = _e[1];
-    var _f = useState(0), playbackRateIndex = _f[0], setPlaybackRateIndex = _f[1];
+    var _e = useState(), playbackError = _e[0], setPlaybackError = _e[1];
+    var _f = useState(true), canPlayRecord = _f[0], setCanPlayRecord = _f[1];
+    var _g = useState(0), secondsElapsed = _g[0], setSecondsElapsed = _g[1];
+    var _h = useState(0), playbackRateIndex = _h[0], setPlaybackRateIndex = _h[1];
+    var playTimeout = useRef();
     var audioRef = useRef(null);
-    var togglePlay = useCallback(function () {
-        if (!audioRef.current)
-            return;
-        if (!elementIsPlaying(audioRef.current)) {
-            audioRef.current.play();
-            setIsPlaying(true);
-        }
-        else {
-            audioRef.current.pause();
-            setIsPlaying(false);
-        }
-    }, []);
+    var registerError = useCallback(function (e) {
+        logError(e);
+        setPlaybackError(e);
+        addNotification(e.message, 'error');
+    }, [addNotification]);
+    var togglePlay = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var e_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!audioRef.current)
+                        return [2 /*return*/];
+                    clearTimeout(playTimeout.current);
+                    playTimeout.current = undefined;
+                    if (mimeType && !audioRef.current.canPlayType(mimeType)) {
+                        registerError(new Error(t('Recording format is not supported and cannot be reproduced')));
+                        setCanPlayRecord(false);
+                        return [2 /*return*/];
+                    }
+                    if (!elementIsPlaying(audioRef.current)) return [3 /*break*/, 1];
+                    audioRef.current.pause();
+                    setIsPlaying(false);
+                    return [3 /*break*/, 6];
+                case 1:
+                    playTimeout.current = setTimeout(function () {
+                        if (!audioRef.current)
+                            return;
+                        try {
+                            audioRef.current.pause();
+                        }
+                        catch (e) {
+                            registerError(new Error(t('Failed to play the recording')));
+                        }
+                    }, 2000);
+                    _a.label = 2;
+                case 2:
+                    _a.trys.push([2, 4, 5, 6]);
+                    return [4 /*yield*/, audioRef.current.play()];
+                case 3:
+                    _a.sent();
+                    setIsPlaying(true);
+                    return [3 /*break*/, 6];
+                case 4:
+                    e_1 = _a.sent();
+                    registerError(e_1);
+                    setIsPlaying(false);
+                    return [3 /*break*/, 6];
+                case 5:
+                    clearTimeout(playTimeout.current);
+                    playTimeout.current = undefined;
+                    return [7 /*endfinally*/];
+                case 6: return [2 /*return*/];
+            }
+        });
+    }); }, [mimeType, registerError, t]);
     var increasePlaybackRate = function () {
         setPlaybackRateIndex(function (prev) {
             if (!audioRef.current)
@@ -33,16 +85,24 @@ export var useAudioController = function (_a) {
             return nextIndex;
         });
     };
-    var seek = useCallback(function (_a) {
-        var clientX = _a.clientX, currentTarget = _a.currentTarget;
-        if (!audioRef.current)
-            return;
-        var _b = currentTarget.getBoundingClientRect(), width = _b.width, x = _b.x;
-        var ratio = (clientX - x) / width;
-        var currentTime = ratio * audioRef.current.duration;
-        setSecondsElapsed(currentTime);
-        audioRef.current.currentTime = currentTime;
-    }, []);
+    var seek = useMemo(function () {
+        return throttle(function (_a) {
+            var clientX = _a.clientX, currentTarget = _a.currentTarget;
+            if (!(currentTarget && audioRef.current))
+                return;
+            if (!isSeekable(audioRef.current)) {
+                registerError(new Error(t('Cannot seek in the recording')));
+                return;
+            }
+            var _b = currentTarget.getBoundingClientRect(), width = _b.width, x = _b.x;
+            var ratio = (clientX - x) / width;
+            if (ratio > 1 || ratio < 0)
+                return;
+            var currentTime = ratio * audioRef.current.duration;
+            setSecondsElapsed(currentTime);
+            audioRef.current.currentTime = currentTime;
+        }, 16);
+    }, [registerError, t]);
     useEffect(function () {
         if (!audioRef.current)
             return;
@@ -55,6 +115,7 @@ export var useAudioController = function (_a) {
         audioElement.addEventListener('ended', handleEnded);
         var handleError = function () {
             addNotification(t('Error reproducing the recording'), 'error');
+            setIsPlaying(false);
         };
         audioElement.addEventListener('error', handleError);
         var handleTimeupdate = function () {
@@ -70,8 +131,10 @@ export var useAudioController = function (_a) {
     }, [addNotification, durationSeconds, t]);
     return {
         audioRef: audioRef,
+        canPlayRecord: canPlayRecord,
         increasePlaybackRate: increasePlaybackRate,
         isPlaying: isPlaying,
+        playbackError: playbackError,
         playbackRate: playbackRates[playbackRateIndex],
         progress: audioRef.current && secondsElapsed ? (secondsElapsed / audioRef.current.duration) * 100 : 0,
         secondsElapsed: secondsElapsed,

package/dist/components/Attachment/index.d.ts

@@ -2,6 +2,7 @@ export * from './Attachment';
 export * from './AttachmentActions';
 export * from './AttachmentContainer';
 export * from './Audio';
+export * from './audioSampling';
 export * from './Card';
 export * from './components';
 export * from './UnsupportedAttachment';

package/dist/components/Attachment/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC"}

package/dist/components/Attachment/index.js

@@ -2,6 +2,7 @@ export * from './Attachment';
 export * from './AttachmentActions';
 export * from './AttachmentContainer';
 export * from './Audio';
+export * from './audioSampling';
 export * from './Card';
 export * from './components';
 export * from './UnsupportedAttachment';

package/dist/components/Attachment/utils.d.ts

@@ -2,6 +2,7 @@ import React, { PropsWithChildren, ReactNode } from 'react';
 import type { Attachment } from 'stream-chat';
 import type { ATTACHMENT_GROUPS_ORDER, AttachmentProps } from './Attachment';
 import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { LocalAttachment, VoiceRecordingAttachment } from '../MessageInput';
 export declare const SUPPORTED_VIDEO_FORMATS: string[];
 export type AttachmentComponentType = typeof ATTACHMENT_GROUPS_ORDER[number];
 export type GroupedRenderedAttachment = Record<AttachmentComponentType, ReactNode[]>;
@@ -22,10 +23,11 @@ export type RenderGalleryProps<StreamChatGenerics extends DefaultStreamChatGener
 export declare const isScrapedContent: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics>) => string | undefined;
 export declare const isUploadedImage: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics>) => boolean;
 export declare const isGalleryAttachmentType: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(output: Attachment<StreamChatGenerics> | GalleryAttachment<StreamChatGenerics>) => output is GalleryAttachment<StreamChatGenerics>;
-export declare const isAudioAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics>) => boolean;
-export declare const isVoiceRecordingAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics>) => boolean;
+export declare const isAudioAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>) => boolean;
+export declare const isVoiceRecordingAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>) => attachment is VoiceRecordingAttachment<import("stream-chat").DefaultGenerics>;
+export declare const isLocalAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: LocalAttachment<StreamChatGenerics>) => attachment is LocalAttachment<StreamChatGenerics>;
 export declare const isFileAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics>) => boolean | "" | undefined;
-export declare const isMediaAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics>) => boolean;
+export declare const isMediaAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>) => boolean;
 export declare const isSvgAttachment: (attachment: Attachment) => boolean;
 /**
  * @deprecated will be removed in the next major release,