stream-chat-react 14.11.0 → 14.12.0

package/dist/cjs/index.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_NotificationList = require("./NotificationList.6abbee1c.js");
-const require_useInertWhenHidden = require("./useInertWhenHidden.22151beb.js");
-const require_useChannelHeaderOnlineStatus = require("./useChannelHeaderOnlineStatus.7e17671e.js");
+const require_NotificationList = require("./NotificationList.4ce251ea.js");
+const require_useInertWhenHidden = require("./useInertWhenHidden.1a2a6a2b.js");
+const require_useChannelHeaderOnlineStatus = require("./useChannelHeaderOnlineStatus.64c443f5.js");
 let react = require("react");
 react = require_NotificationList.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -448,6 +448,7 @@ var de_default = {
 	"aria/Bookmark Message": "Nachricht für später speichern",
 	"aria/Cancel recording": "Aufnahme abbrechen",
 	"aria/Cancel Reply": "Antwort abbrechen",
+	"aria/Cancel upload": "Upload abbrechen",
 	"aria/Channel Actions": "Kanalaktionen",
 	"aria/Channel details": "Kanaldetails",
 	"aria/Channel list": "Kanalliste",
@@ -1146,6 +1147,7 @@ var en_default = {
 	"aria/Bookmark Message": "Bookmark Message",
 	"aria/Cancel recording": "Cancel recording",
 	"aria/Cancel Reply": "Cancel Reply",
+	"aria/Cancel upload": "Cancel upload",
 	"aria/Channel Actions": "Channel Actions",
 	"aria/Channel details": "Channel details",
 	"aria/Channel list": "Channel list",
@@ -1860,6 +1862,7 @@ var es_default = {
 	"aria/Bookmark Message": "Guardar mensaje",
 	"aria/Cancel recording": "Cancelar grabación",
 	"aria/Cancel Reply": "Cancelar respuesta",
+	"aria/Cancel upload": "Cancelar la carga",
 	"aria/Channel Actions": "Acciones del canal",
 	"aria/Channel details": "Detalles del canal",
 	"aria/Channel list": "Lista de canales",
@@ -2588,6 +2591,7 @@ var fr_default = {
 	"aria/Bookmark Message": "Enregistrer le message",
 	"aria/Cancel recording": "Annuler l'enregistrement",
 	"aria/Cancel Reply": "Annuler la réponse",
+	"aria/Cancel upload": "Annuler le téléversement",
 	"aria/Channel Actions": "Actions du canal",
 	"aria/Channel details": "Détails du canal",
 	"aria/Channel list": "Liste des canaux",
@@ -3300,6 +3304,7 @@ var hi_default = {
 	"aria/Bookmark Message": "संदेश बुकमार्क करें",
 	"aria/Cancel recording": "रिकॉर्डिंग रद्द करें",
 	"aria/Cancel Reply": "उत्तर रद्द करें",
+	"aria/Cancel upload": "अपलोड रद्द करें",
 	"aria/Channel Actions": "चैनल क्रियाएँ",
 	"aria/Channel details": "चैनल विवरण",
 	"aria/Channel list": "चैनल सूची",
@@ -4015,6 +4020,7 @@ var it_default = {
 	"aria/Bookmark Message": "Salva messaggio",
 	"aria/Cancel recording": "Annulla registrazione",
 	"aria/Cancel Reply": "Annulla risposta",
+	"aria/Cancel upload": "Annulla caricamento",
 	"aria/Channel Actions": "Azioni canale",
 	"aria/Channel details": "Dettagli canale",
 	"aria/Channel list": "Elenco dei canali",
@@ -4718,6 +4724,7 @@ var ja_default = {
 	"aria/Bookmark Message": "メッセージをブックマーク",
 	"aria/Cancel recording": "録音をキャンセル",
 	"aria/Cancel Reply": "返信をキャンセル",
+	"aria/Cancel upload": "アップロードをキャンセル",
 	"aria/Channel Actions": "チャンネル操作",
 	"aria/Channel details": "チャンネル詳細",
 	"aria/Channel list": "チャンネル一覧",
@@ -5398,6 +5405,7 @@ var ko_default = {
 	"aria/Bookmark Message": "메시지 북마크",
 	"aria/Cancel recording": "녹음 취소",
 	"aria/Cancel Reply": "답장 취소",
+	"aria/Cancel upload": "업로드 취소",
 	"aria/Channel Actions": "채널 작업",
 	"aria/Channel details": "채널 세부 정보",
 	"aria/Channel list": "채널 목록",
@@ -6087,6 +6095,7 @@ var nl_default = {
 	"aria/Bookmark Message": "Bericht bookmarken",
 	"aria/Cancel recording": "Opname annuleren",
 	"aria/Cancel Reply": "Antwoord annuleren",
+	"aria/Cancel upload": "Upload annuleren",
 	"aria/Channel Actions": "Kanaalacties",
 	"aria/Channel details": "Kanaaldetails",
 	"aria/Channel list": "Kanaallijst",
@@ -6803,6 +6812,7 @@ var pt_default = {
 	"aria/Bookmark Message": "Marcar mensagem",
 	"aria/Cancel recording": "Cancelar gravação",
 	"aria/Cancel Reply": "Cancelar resposta",
+	"aria/Cancel upload": "Cancelar envio",
 	"aria/Channel Actions": "Ações do canal",
 	"aria/Channel details": "Detalhes do canal",
 	"aria/Channel list": "Lista de canais",
@@ -7548,6 +7558,7 @@ var ru_default = {
 	"aria/Bookmark Message": "Сохранить сообщение",
 	"aria/Cancel recording": "Отменить запись",
 	"aria/Cancel Reply": "Отменить ответ",
+	"aria/Cancel upload": "Отменить загрузку",
 	"aria/Channel Actions": "Действия канала",
 	"aria/Channel details": "Сведения о канале",
 	"aria/Channel list": "Список каналов",
@@ -7806,9 +7817,9 @@ var ru_default = {
 	"File is required for upload attachment": "Для загрузки вложения требуется файл",
 	"File is too large: {{ size }}, maximum upload size is {{ limit }}": "Файл слишком большой: {{ size }}, максимальный размер загрузки составляет {{ limit }}",
 	"File too large": "Файл слишком большой",
-	fileCount_one: "{{ count }} файл",
 	fileCount_few: "{{ count }} файла",
 	fileCount_four: "{{ count }} файла",
+	fileCount_one: "{{ count }} файл",
 	fileCount_two: "{{ count }} файла",
 	fileCount_many: "{{ count }} файлов",
 	fileCount_other: "{{ count }} файлов",
@@ -8277,6 +8288,7 @@ var tr_default = {
 	"aria/Bookmark Message": "Mesajı yer imi ekle",
 	"aria/Cancel recording": "Kaydı iptal et",
 	"aria/Cancel Reply": "Cevabı İptal Et",
+	"aria/Cancel upload": "Yüklemeyi iptal et",
 	"aria/Channel Actions": "Kanal işlemleri",
 	"aria/Channel details": "Kanal ayrıntıları",
 	"aria/Channel list": "Kanal listesi",
@@ -10445,8 +10457,9 @@ var UnMemoizedMessageStatus = (props) => {
 	const justReadByMe = readBy?.length === 1 && readBy[0].id === client.user?.id;
 	const deliveredOnlyToMe = deliveredTo?.length === 1 && deliveredTo[0].id === client.user?.id;
 	const sending = message.status === "sending";
-	const read = !!(readBy?.length && !justReadByMe && !threadList);
-	const delivered = !!(deliveredTo?.length && !deliveredOnlyToMe && !read && !threadList);
+	const failed = message.status === "failed";
+	const read = !failed && !!(readBy?.length && !justReadByMe && !threadList);
+	const delivered = !failed && !!(deliveredTo?.length && !deliveredOnlyToMe && !read && !threadList);
 	const sent = (returnAllReadData || lastOwnMessage?.id === message.id) && message.status === "received" && !delivered && !read && !threadList;
 	const readersWithoutOwnUser = read ? readBy.filter((item) => item.id !== client.user?.id) : [];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -10892,6 +10905,35 @@ var MessageTranslationIndicator = ({ message: propMessage }) => {
 	});
 };
 //#endregion
+//#region src/components/Attachment/components/AttachmentUploadProgressIndicator.tsx
+/**
+* Upload progress for an attachment carried by a message whose send is already under way.
+*
+* Renders exactly what the composer's attachment previews render — the shared
+* {@link UploadProgressIndicator} (a progress ring, or a spinner when the transfer length is
+* not computable) followed by {@link AttachmentUploadedSizeIndicator}'s uploaded/total bytes —
+* so an attachment looks the same either side of pressing send.
+*
+* Renders `null` for any attachment that is not mid-upload, which is every attachment that came
+* back from the API. Placing it in the default widgets therefore changes nothing for messages
+* that are already sent.
+*/
+var AttachmentUploadProgressIndicator = ({ attachment, attachments, className, variant = "inline" }) => {
+	const { isUploading, progress, uploadConfirmationPending } = require_useInertWhenHidden.useAttachmentsUploadState((0, react.useMemo)(() => attachment ? [attachment] : attachments ?? [], [attachment, attachments]));
+	if (!isUploading) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)("str-chat__attachment-upload-progress", `str-chat__attachment-upload-progress--${variant}`, className),
+		"data-testid": "attachment-upload-progress",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useInertWhenHidden.UploadProgressIndicator, {
+			uploadConfirmationPending,
+			uploadProgress: progress
+		}), attachment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useInertWhenHidden.AttachmentUploadedSizeIndicator, {
+			attachment,
+			uploadProgress: progress
+		})]
+	});
+};
+//#endregion
 //#region src/components/AudioPlayback/components/ProgressBar.tsx
 var ProgressBar = ({ className, durationSeconds, progress, secondsElapsed, seek }) => {
 	const { t } = require_NotificationList.useTranslationContext("ProgressBar");
@@ -10939,8 +10981,9 @@ var ProgressBar = ({ className, durationSeconds, progress, secondsElapsed, seek
 };
 //#endregion
 //#region src/components/Attachment/Audio.tsx
-var AudioAttachmentUI = ({ audioPlayer }) => {
-	const { FileSizeIndicator: FileSizeIndicator$4 = require_NotificationList.FileSizeIndicator } = require_NotificationList.useComponentContext();
+var AudioAttachmentUI = ({ attachment, audioPlayer }) => {
+	const { AttachmentUploadProgressIndicator: AttachmentUploadProgressIndicator$6 = AttachmentUploadProgressIndicator, FileSizeIndicator: FileSizeIndicator$4 = require_NotificationList.FileSizeIndicator } = require_NotificationList.useComponentContext();
+	const { isUploading } = require_useInertWhenHidden.useAttachmentUploadState(attachment);
 	const dataTestId = "audio-widget";
 	const rootClassName = "str-chat__message-attachment-audio-widget";
 	const { durationSeconds, isPlaying, progress, secondsElapsed } = require_NotificationList.useStateStore(audioPlayer?.state, audioPlayerStateSelector$1) ?? {};
@@ -10963,23 +11006,18 @@ var AudioAttachmentUI = ({ audioPlayer }) => {
 						className: "str-chat__message-attachment-audio-widget--title",
 						children: audioPlayer.title
 					})
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "str-chat__message-attachment-audio-widget--text-second-row",
-					children: durationSeconds ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useInertWhenHidden.DurationDisplay, {
+					children: [isUploading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentUploadProgressIndicator$6, { attachment }) : durationSeconds ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useInertWhenHidden.DurationDisplay, {
 						duration: durationSeconds,
 						isPlaying: !!isPlaying,
 						secondsElapsed
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProgressBar, {
-						durationSeconds,
-						progress: progress ?? 0,
-						secondsElapsed,
-						seek: audioPlayer.seek
-					})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileSizeIndicator$4, { fileSize: audioPlayer.fileSize }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProgressBar, {
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileSizeIndicator$4, { fileSize: audioPlayer.fileSize }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProgressBar, {
 						durationSeconds,
 						progress: progress ?? 0,
 						secondsElapsed,
 						seek: audioPlayer.seek
-					})] })
+					})]
 				})]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.FileIcon, {
@@ -11003,7 +11041,7 @@ var audioPlayerStateSelector$1 = (state) => ({
 * Audio attachment with play/pause button and progress bar
 */
 var Audio = (props) => {
-	const { attachment: { asset_url, duration, file_size, mime_type, title } } = props;
+	const { attachment: { asset_url, duration, file_size, mime_type, title, waveform_data } } = props;
 	/**
 	* Introducing message context. This could be breaking change, therefore the fallback to {} is provided.
 	* If this component is used outside the message context, then there will be no audio player namespacing
@@ -11019,11 +11057,14 @@ var Audio = (props) => {
 		fileSize: file_size,
 		mimeType: mime_type,
 		requester: message?.id && `${threadList ? message.parent_id ?? message.id : ""}${message.id}`,
-		src: asset_url,
+		src: require_useInertWhenHidden.getAttachmentPreviewUrl(props.attachment, asset_url),
 		title,
-		waveformData: props.attachment.waveform_data
+		waveformData: waveform_data
 	});
-	return audioPlayer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AudioAttachmentUI, { audioPlayer }) : null;
+	return audioPlayer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AudioAttachmentUI, {
+		attachment: props.attachment,
+		audioPlayer
+	}) : null;
 };
 //#endregion
 //#region src/components/Attachment/giphyAccessibility.ts
@@ -11144,8 +11185,9 @@ var audioPlayerStateSelector = (state) => ({
 	progress: state.progressPercent,
 	secondsElapsed: state.secondsElapsed
 });
-var VoiceRecordingPlayerUI = ({ audioPlayer }) => {
-	const { FileSizeIndicator: FileSizeIndicator$2 = require_NotificationList.FileSizeIndicator } = require_NotificationList.useComponentContext();
+var VoiceRecordingPlayerUI = ({ attachment, audioPlayer }) => {
+	const { AttachmentUploadProgressIndicator: AttachmentUploadProgressIndicator$5 = AttachmentUploadProgressIndicator, FileSizeIndicator: FileSizeIndicator$2 = require_NotificationList.FileSizeIndicator } = require_NotificationList.useComponentContext();
+	const { isUploading } = require_useInertWhenHidden.useAttachmentUploadState(attachment);
 	const { t } = require_NotificationList.useTranslationContext();
 	const { canPlayRecord, durationSeconds, isPlaying, playbackRate, progress, secondsElapsed } = require_NotificationList.useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -11165,7 +11207,7 @@ var VoiceRecordingPlayerUI = ({ audioPlayer }) => {
 					className: "str-chat__message-attachment__voice-recording-widget__audio-state",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "str-chat__message-attachment__voice-recording-widget__timer",
-						children: durationSeconds ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useInertWhenHidden.DurationDisplay, {
+						children: isUploading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentUploadProgressIndicator$5, { attachment }) : durationSeconds ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useInertWhenHidden.DurationDisplay, {
 							duration: durationSeconds,
 							isPlaying: !!isPlaying,
 							secondsElapsed,
@@ -11214,11 +11256,14 @@ var VoiceRecordingPlayer = ({ attachment, playbackRates }) => {
 		mimeType: mime_type,
 		playbackRates,
 		requester: message?.id && `${threadList ? message.parent_id ?? message.id : ""}${message.id}`,
-		src: asset_url,
+		src: require_useInertWhenHidden.getAttachmentPreviewUrl(attachment, asset_url),
 		title,
 		waveformData: waveform_data
 	});
-	return audioPlayer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VoiceRecordingPlayerUI, { audioPlayer }) : null;
+	return audioPlayer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VoiceRecordingPlayerUI, {
+		attachment,
+		audioPlayer
+	}) : null;
 };
 var QuotedVoiceRecording = ({ attachment }) => {
 	const { FileSizeIndicator: FileSizeIndicator$3 = require_NotificationList.FileSizeIndicator } = require_NotificationList.useComponentContext();
@@ -11523,12 +11568,14 @@ var Card = react.default.memo(UnMemoizedCard);
 //#endregion
 //#region src/components/Attachment/FileAttachment.tsx
 var FileAttachment = ({ attachment }) => {
-	const { AttachmentFileIcon, FileSizeIndicator: FileSizeIndicator$1 = require_NotificationList.FileSizeIndicator } = require_NotificationList.useComponentContext();
+	const { AttachmentFileIcon, AttachmentUploadProgressIndicator: AttachmentUploadProgressIndicator$4 = AttachmentUploadProgressIndicator, FileSizeIndicator: FileSizeIndicator$1 = require_NotificationList.FileSizeIndicator } = require_NotificationList.useComponentContext();
+	const FileIconComponent = AttachmentFileIcon ?? require_NotificationList.FileIcon;
+	const { isUploading } = require_useInertWhenHidden.useAttachmentUploadState(attachment);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "str-chat__message-attachment-file--item",
 		"data-testid": "attachment-file",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentFileIcon ?? require_NotificationList.FileIcon, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileIconComponent, {
 				className: "str-chat__file-icon",
 				fileName: attachment.title,
 				mimeType: attachment.mime_type
@@ -11544,7 +11591,7 @@ var FileAttachment = ({ attachment }) => {
 					})
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "str-chat__message-attachment-file--item__data",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileSizeIndicator$1, { fileSize: attachment.file_size })
+					children: isUploading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentUploadProgressIndicator$4, { attachment }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileSizeIndicator$1, { fileSize: attachment.file_size })
 				})]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.DownloadButton, {
@@ -11707,12 +11754,88 @@ var VisibilityDisclaimer = () => {
 	});
 };
 //#endregion
+//#region src/components/Attachment/hooks/useLocalVideoDimensions.ts
+/**
+* Probing creates a media element, and browsers cap how many can exist at once (Chrome allows a
+* few dozen per page), so the rendered players of other attachments compete for the same budget.
+* Two guards keep this bounded no matter how many videos are in flight:
+*
+* - results are cached by source, so a blob is probed once even if its widget remounts (a
+*   virtualized list unmounts and remounts widgets as the user scrolls) or is rendered twice;
+* - probes run one at a time under a shared tag, so N uploading videos never hold N extra media
+*   elements open. Each is a metadata read off an in-memory blob, so the queue drains fast.
+*/
+var dimensionsBySource = new stream_chat.FixedSizeQueueCache(100);
+var PROBE_TAG = "stream-chat-react/local-video-dimensions";
+/** A file the browser cannot decode never fires `loadedmetadata`; do not block the queue on it. */
+var PROBE_TIMEOUT_MS = 5e3;
+var probeDimensions = (src) => new Promise((resolve) => {
+	const probe = document.createElement("video");
+	const finish = (dimensions) => {
+		clearTimeout(timeout);
+		probe.removeEventListener("loadedmetadata", handleLoadedMetadata);
+		probe.removeEventListener("error", handleError);
+		probe.removeAttribute("src");
+		probe.load();
+		resolve(dimensions);
+	};
+	const handleLoadedMetadata = () => {
+		const { videoHeight, videoWidth } = probe;
+		finish(videoWidth > 0 && videoHeight > 0 ? {
+			height: videoHeight,
+			width: videoWidth
+		} : void 0);
+	};
+	const handleError = () => finish();
+	const timeout = setTimeout(handleError, PROBE_TIMEOUT_MS);
+	probe.addEventListener("loadedmetadata", handleLoadedMetadata);
+	probe.addEventListener("error", handleError);
+	probe.preload = "metadata";
+	probe.src = src;
+});
+/**
+* Reads the intrinsic dimensions of a video that is not on the CDN yet.
+*
+* Sizing normally comes from the `oh`/`ow` parameters on the attachment's CDN `thumb_url`
+* (`getCssDimensionsVariables`). A video whose upload is still in flight has no `thumb_url`, so
+* the box falls back to `1000000x1000000` and lays out square — and then resizes the moment the
+* real dimensions arrive. The local file answers the same question without a network request.
+*
+* Returns `undefined` until the metadata is in, or if the file cannot be decoded.
+*/
+var useLocalVideoDimensions = (src) => {
+	const [dimensions, setDimensions] = (0, react.useState)(() => src ? dimensionsBySource.get(src) : void 0);
+	(0, react.useEffect)(() => {
+		if (!src) {
+			setDimensions(void 0);
+			return;
+		}
+		const cached = dimensionsBySource.get(src);
+		if (cached) {
+			setDimensions(cached);
+			return;
+		}
+		let cancelled = false;
+		(0, stream_chat.withoutConcurrency)(PROBE_TAG, async () => {
+			const resolved = dimensionsBySource.get(src) ?? await probeDimensions(src);
+			if (resolved) dimensionsBySource.add(src, resolved);
+			if (!cancelled) setDimensions(resolved);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [src]);
+	return dimensions;
+};
+//#endregion
 //#region src/components/Attachment/VideoAttachment.tsx
 var VideoAttachment = ({ attachment, VideoPlayer: VideoPlayer$1 = require_NotificationList.VideoPlayer }) => {
 	const { shouldGenerateVideoThumbnail, videoAttachmentSizeHandler } = require_NotificationList.useChannelStateContext();
 	const videoElement = (0, react.useRef)(null);
 	const [attachmentConfiguration, setAttachmentConfiguration] = (0, react.useState)();
-	const [showVideo, setShowVideo] = react.default.useState(!shouldGenerateVideoThumbnail);
+	const [showVideo, setShowVideo] = react.default.useState(() => !shouldGenerateVideoThumbnail || require_useInertWhenHidden.hasPendingUploadState(attachment));
+	const [playbackRequested, setPlaybackRequested] = react.default.useState(false);
+	const isUploading = require_useInertWhenHidden.hasPendingUploadState(attachment);
 	(0, react.useLayoutEffect)(() => {
 		if (videoElement.current && videoAttachmentSizeHandler) setAttachmentConfiguration(videoAttachmentSizeHandler(attachment, videoElement.current, shouldGenerateVideoThumbnail));
 	}, [
@@ -11722,21 +11845,29 @@ var VideoAttachment = ({ attachment, VideoPlayer: VideoPlayer$1 = require_Notifi
 		shouldGenerateVideoThumbnail
 	]);
 	const renderThumbnailFirst = Boolean(attachment.thumb_url && shouldGenerateVideoThumbnail);
+	const localDimensions = useLocalVideoDimensions(isUploading ? require_useInertWhenHidden.getAttachmentPreviewUrl(attachment) : void 0);
+	const dimensionVariables = localDimensions ? {
+		"--original-height": localDimensions.height,
+		"--original-width": localDimensions.width
+	} : require_useInertWhenHidden.getCssDimensionsVariables(attachment.thumb_url || "");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "str-chat__player-wrapper",
+		className: (0, clsx.default)("str-chat__player-wrapper", { "str-chat__player-wrapper--uploading": isUploading && !localDimensions }),
 		"data-testid": "video-wrapper",
 		ref: videoElement,
-		style: require_useInertWhenHidden.getCssDimensionsVariables(attachment.thumb_url || ""),
+		style: dimensionVariables,
 		children: renderThumbnailFirst && !showVideo ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.VideoThumbnail, {
 			alt: attachment.title,
 			"data-testid": "image-test",
-			onPlay: () => setShowVideo(true),
+			onPlay: () => {
+				setPlaybackRequested(true);
+				setShowVideo(true);
+			},
 			src: attachment.thumb_url,
 			title: attachment.title
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VideoPlayer$1, {
-			isPlaying: renderThumbnailFirst,
+			isPlaying: playbackRequested,
 			thumbnailUrl: attachmentConfiguration?.thumbUrl,
-			videoUrl: attachmentConfiguration?.url
+			videoUrl: require_useInertWhenHidden.getAttachmentPreviewUrl(attachment, attachmentConfiguration?.url)
 		})
 	});
 };
@@ -11828,26 +11959,44 @@ var GiphyContainer = (props) => {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Giphy$1, { attachment })
 	});
 };
+/**
+* Whether there is anything to render the attachment from: a CDN url, or the local file while
+* its upload is in flight — or after it failed, since a failed message can be retried and the
+* user has to see what they are retrying.
+*
+* Deliberately non-reactive (payload only): `UploadManager` drops its record a microtask before
+* the resolved URL is written back, and gating on the live record would blink the attachment out
+* of the DOM in between.
+*/
+var hasRenderableSource = (attachment) => require_useInertWhenHidden.hasPendingUploadState(attachment) || !!require_useInertWhenHidden.getAttachmentPreviewUrl(attachment, attachment.asset_url);
 var FileContainer = (props) => {
 	const { attachment } = props;
-	if ((0, stream_chat.isVoiceRecordingAttachment)(attachment)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VoiceRecordingContainer, { ...props });
-	if ((0, stream_chat.isAudioAttachment)(attachment)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AudioContainer, { ...props });
-	if (!attachment.asset_url || !(0, stream_chat.isFileAttachment)(attachment, require_useInertWhenHidden.SUPPORTED_VIDEO_FORMATS)) return null;
+	if ((0, stream_chat.isVoiceRecordingAttachment)(attachment)) return hasRenderableSource(attachment) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VoiceRecordingContainer, { ...props }) : null;
+	if ((0, stream_chat.isAudioAttachment)(attachment)) return hasRenderableSource(attachment) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AudioContainer, { ...props }) : null;
+	if (!hasRenderableSource(attachment) || !(0, stream_chat.isFileAttachment)(attachment, require_useInertWhenHidden.SUPPORTED_VIDEO_FORMATS)) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OtherFilesContainer, { ...props });
 };
 var GalleryContainer = ({ attachment, ModalGallery: ModalGallery$1 = ModalGallery }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentWithinContainer, {
+	const { AttachmentUploadProgressIndicator: AttachmentUploadProgressIndicator$1 = AttachmentUploadProgressIndicator } = require_NotificationList.useComponentContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AttachmentWithinContainer, {
 		attachment,
 		componentType: "gallery",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalGallery$1, { items: (0, react.useMemo)(() => attachment.items.reduce((acc, attachment) => {
-			const item = require_NotificationList.toGalleryItemDescriptors(attachment);
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalGallery$1, { items: (0, react.useMemo)(() => attachment.items.reduce((acc, attachment) => {
+			const item = require_NotificationList.toGalleryItemDescriptors({
+				...attachment,
+				image_url: require_useInertWhenHidden.getAttachmentPreviewUrl(attachment, attachment.image_url)
+			});
 			if (item) acc.push(item);
 			return acc;
-		}, []), [attachment.items]) }, "gallery")
+		}, []), [attachment.items]) }, "gallery"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentUploadProgressIndicator$1, {
+			attachments: attachment.items,
+			variant: "overlay"
+		})]
 	});
 };
 var ImageContainer = (props) => {
 	const { attachment, Image = ImageComponent } = props;
+	const { AttachmentUploadProgressIndicator: AttachmentUploadProgressIndicator$2 = AttachmentUploadProgressIndicator } = require_NotificationList.useComponentContext();
 	const componentType = "image";
 	const imageElement = (0, react.useRef)(null);
 	const { imageAttachmentSizeHandler } = require_NotificationList.useChannelStateContext();
@@ -11859,7 +12008,7 @@ var ImageContainer = (props) => {
 		imageAttachmentSizeHandler,
 		attachment
 	]);
-	const imgUrlFromAttachment = attachment.image_url || attachment.thumb_url || "";
+	const imgUrlFromAttachment = require_useInertWhenHidden.getAttachmentPreviewUrl(attachment, attachment.image_url, attachment.thumb_url) || "";
 	const imageConfig = {
 		...require_NotificationList.toGalleryItemDescriptors({
 			...attachment,
@@ -11873,17 +12022,27 @@ var ImageContainer = (props) => {
 		componentType,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "str-chat__attachment",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Image, { ...imageConfig }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentActionsContainer, { ...props })]
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Image, { ...imageConfig }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentUploadProgressIndicator$2, {
+					attachment,
+					variant: "overlay"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentActionsContainer, { ...props })
+			]
 		})
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentWithinContainer, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AttachmentWithinContainer, {
 		attachment,
 		componentType,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Image, { ...imageConfig })
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Image, { ...imageConfig }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentUploadProgressIndicator$2, {
+			attachment,
+			variant: "overlay"
+		})]
 	});
 };
 var OtherFilesContainer = ({ attachment, File = FileAttachment }) => {
-	if (!attachment.asset_url) return null;
+	if (!hasRenderableSource(attachment)) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentWithinContainer, {
 		attachment,
 		componentType: "file",
@@ -11911,24 +12070,35 @@ var VoiceRecordingContainer = ({ attachment, isQuoted, VoiceRecording: VoiceReco
 });
 var VideoContainer = (props) => {
 	const { attachment, Media } = props;
+	const { AttachmentUploadProgressIndicator: AttachmentUploadProgressIndicator$3 = AttachmentUploadProgressIndicator } = require_NotificationList.useComponentContext();
 	const componentType = "media";
 	return attachment.actions?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentWithinContainer, {
 		attachment,
 		componentType,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "str-chat__attachment",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VideoAttachment, {
-				attachment,
-				VideoPlayer: Media
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentActionsContainer, { ...props })]
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VideoAttachment, {
+					attachment,
+					VideoPlayer: Media
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentUploadProgressIndicator$3, {
+					attachment,
+					variant: "overlay"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentActionsContainer, { ...props })
+			]
 		})
-	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentWithinContainer, {
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AttachmentWithinContainer, {
 		attachment,
 		componentType,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VideoAttachment, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VideoAttachment, {
 			attachment,
 			VideoPlayer: Media
-		})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentUploadProgressIndicator$3, {
+			attachment,
+			variant: "overlay"
+		})]
 	});
 };
 var GeolocationContainer = ({ Geolocation: Geolocation$1 = Geolocation, location }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentWithinContainer, {
@@ -19810,18 +19980,27 @@ var ChannelListItem = (props) => {
 	const isActive = typeof active === "undefined" ? activeChannel?.cid === channel.cid : active;
 	const { muted } = require_useChannelHeaderOnlineStatus.useIsChannelMuted(channel);
 	(0, react.useEffect)(() => {
-		const handleEvent = (event) => {
+		const handleChannelReadStateChange = (event) => {
 			if (channel.cid !== event.cid) return;
 			if (event.user?.id !== client.user?.id) return;
 			setUnread(channel.countUnread());
 		};
-		client.on("notification.mark_read", handleEvent);
-		channel.on("notification.mark_unread", handleEvent);
-		channel.on("message.read_locally", handleEvent);
+		const handleMarkRead = (event) => {
+			if (event.thread_id) return;
+			if (event.user && client.user && event.user.id !== client.user.id) return;
+			if (!event.cid) return setUnread(0);
+			if (channel.cid !== event.cid) return;
+			setUnread(0);
+		};
+		client.on("notification.mark_read", handleMarkRead);
+		channel.on("notification.mark_unread", handleChannelReadStateChange);
+		channel.on("message.read_locally", handleChannelReadStateChange);
+		channel.on("message.read", handleChannelReadStateChange);
 		return () => {
-			client.off("notification.mark_read", handleEvent);
-			channel.off("notification.mark_unread", handleEvent);
-			channel.off("message.read_locally", handleEvent);
+			client.off("notification.mark_read", handleMarkRead);
+			channel.off("notification.mark_unread", handleChannelReadStateChange);
+			channel.off("message.read_locally", handleChannelReadStateChange);
+			channel.off("message.read", handleChannelReadStateChange);
 		};
 	}, [channel, client]);
 	const refreshUnreadCount = (0, react.useMemo)(() => (0, lodash_throttle.default)(() => {
@@ -20610,7 +20789,7 @@ var useChat = ({ client, defaultLanguage = "en", i18nInstance }) => {
 	};
 	(0, react.useEffect)(() => {
 		if (!client) return;
-		const version = "14.11.0";
+		const version = "14.12.0";
 		const userAgent = client.getUserAgent();
 		if (!userAgent.includes("stream-chat-react")) client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
 		client.threads.registerSubscriptions();
@@ -20893,6 +21072,8 @@ exports.AttachmentPreviewList = require_useInertWhenHidden.AttachmentPreviewList
 exports.AttachmentSelector = require_useInertWhenHidden.AttachmentSelector;
 exports.AttachmentSelectorButton = require_useInertWhenHidden.AttachmentSelectorButton;
 exports.AttachmentSelectorContextProvider = require_useInertWhenHidden.AttachmentSelectorContextProvider;
+exports.AttachmentUploadProgressIndicator = AttachmentUploadProgressIndicator;
+exports.AttachmentUploadedSizeIndicator = require_useInertWhenHidden.AttachmentUploadedSizeIndicator;
 exports.AttachmentWithinContainer = AttachmentWithinContainer;
 exports.Audio = Audio;
 exports.AudioContainer = AudioContainer;
@@ -21297,6 +21478,7 @@ exports.extractSortValue = extractSortValue;
 exports.findLastPinnedChannelIndex = findLastPinnedChannelIndex;
 exports.formatTime = require_NotificationList.formatTime;
 exports.frTranslations = fr_default;
+exports.getAttachmentPreviewUrl = require_useInertWhenHidden.getAttachmentPreviewUrl;
 exports.getChannel = require_NotificationList.getChannel;
 exports.getChannelDisplayImage = require_useChannelHeaderOnlineStatus.getChannelDisplayImage;
 exports.getCssDimensionsVariables = require_useInertWhenHidden.getCssDimensionsVariables;
@@ -21323,6 +21505,7 @@ exports.getWholeChar = getWholeChar;
 exports.handleActionWarning = handleActionWarning;
 exports.hasEnabledCommandSuggestions = require_useInertWhenHidden.hasEnabledCommandSuggestions;
 exports.hasMoreMessagesProbably = require_NotificationList.hasMoreMessagesProbably;
+exports.hasPendingUploadState = require_useInertWhenHidden.hasPendingUploadState;
 exports.hasSystemNotificationTag = require_NotificationList.hasSystemNotificationTag;
 exports.hiTranslations = hi_default;
 exports.htmlToTextPlugin = require_useChannelHeaderOnlineStatus.htmlToTextPlugin;
@@ -21351,6 +21534,7 @@ exports.isNotificationTargetPanel = require_NotificationList.isNotificationTarge
 exports.isNumberOrString = require_NotificationList.isNumberOrString;
 exports.isSafari = isSafari;
 exports.isSvgAttachment = require_useInertWhenHidden.isSvgAttachment;
+exports.isUploadConfirmationPending = require_useInertWhenHidden.isUploadConfirmationPending;
 exports.isUserMuted = require_NotificationList.isUserMuted;
 exports.itTranslations = it_default;
 exports.jaTranslations = ja_default;
@@ -21405,7 +21589,9 @@ exports.useAriaLiveAnnouncer = require_NotificationList.useAriaLiveAnnouncer;
 exports.useAriaLiveOutletContext = require_NotificationList.useAriaLiveOutletContext;
 exports.useAttachmentManagerState = require_useInertWhenHidden.useAttachmentManagerState;
 exports.useAttachmentSelectorContext = require_useInertWhenHidden.useAttachmentSelectorContext;
+exports.useAttachmentUploadState = require_useInertWhenHidden.useAttachmentUploadState;
 exports.useAttachmentsForPreview = require_useInertWhenHidden.useAttachmentsForPreview;
+exports.useAttachmentsUploadState = require_useInertWhenHidden.useAttachmentsUploadState;
 exports.useAudioPlayer = require_NotificationList.useAudioPlayer;
 exports.useBaseMessageActionSetFilter = useBaseMessageActionSetFilter;
 exports.useCanCreatePoll = require_useInertWhenHidden.useCanCreatePoll;