stream-chat-react 14.11.1 → 14.12.0

package/dist/cjs/{NotificationList.6abbee1c.js → NotificationList.4ce251ea.js}

@@ -2219,6 +2219,30 @@ var useMentionsHandlers = (onMentionsHover, onMentionsClick) => (0, react.useCal
 	}
 }, [onMentionsClick, onMentionsHover]);
 //#endregion
+//#region src/components/MessageComposer/hooks/utils.ts
+function prettifyFileSize(bytes, precision = 3) {
+	const units = [
+		"B",
+		"kB",
+		"MB",
+		"GB"
+	];
+	const exponent = bytes === 0 ? 0 : Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+	const mantissa = bytes / 1024 ** exponent;
+	return `${precision === 0 || mantissa >= 10 ** precision ? Math.round(mantissa).toString() : mantissa.toPrecision(precision)} ${units[exponent]}`;
+}
+//#endregion
+//#region src/components/Attachment/components/FileSizeIndicator.tsx
+var FileSizeIndicator = ({ fileSize, maximumFractionDigits }) => {
+	const actualFileSize = typeof fileSize === "string" ? parseFloat(fileSize) : fileSize;
+	if (typeof actualFileSize === "undefined" || !Number.isFinite(Number(actualFileSize))) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "str-chat__message-attachment-file--item-size",
+		"data-testid": "file-size-indicator",
+		children: prettifyFileSize(actualFileSize, maximumFractionDigits)
+	});
+};
+//#endregion
 //#region src/components/Loading/LoadingChannel.tsx
 var LoadingMessage = ({ bubbleSize, metadataSize, outgoing = false }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 	className: `str-chat__loading-channel-message ${outgoing ? "str-chat__loading-channel-message--outgoing" : "str-chat__loading-channel-message--incoming"}`,
@@ -2293,30 +2317,6 @@ var LoadingIndicator = (props) => {
 	});
 };
 //#endregion
-//#region src/components/MessageComposer/hooks/utils.ts
-function prettifyFileSize(bytes, precision = 3) {
-	const units = [
-		"B",
-		"kB",
-		"MB",
-		"GB"
-	];
-	const exponent = bytes === 0 ? 0 : Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
-	const mantissa = bytes / 1024 ** exponent;
-	return `${precision === 0 ? Math.round(mantissa).toString() : mantissa.toPrecision(precision)} ${units[exponent]}`;
-}
-//#endregion
-//#region src/components/Attachment/components/FileSizeIndicator.tsx
-var FileSizeIndicator = ({ fileSize, maximumFractionDigits }) => {
-	const actualFileSize = typeof fileSize === "string" ? parseFloat(fileSize) : fileSize;
-	if (typeof actualFileSize === "undefined" || !Number.isFinite(Number(actualFileSize))) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: "str-chat__message-attachment-file--item-size",
-		"data-testid": "file-size-indicator",
-		children: prettifyFileSize(actualFileSize, maximumFractionDigits)
-	});
-};
-//#endregion
 //#region src/components/Channel/constants.ts
 var CHANNEL_CONTAINER_ID = "str-chat__channel";
 //#endregion
@@ -2603,7 +2603,7 @@ function useDialogAnchor({ allowFlip, offset, open, placement, referenceElement,
 		}
 	};
 }
-var DialogAnchor = ({ allowFlip = true, children, className, closeOnClickOutside, closeTransitionMs = 0, dialogManagerId, focus = true, id, offset, placement = "auto", referenceElement = null, tabIndex, trapFocus, updateKey, updatePositionOnContentResize, ...restDivProps }) => {
+var DialogAnchor = ({ allowFlip = true, children, className, closeOnClickOutside, closeOnEscape = true, closeTransitionMs = 0, dialogManagerId, focus = true, id, offset, placement = "auto", referenceElement = null, tabIndex, trapFocus, updateKey, updatePositionOnContentResize, ...restDivProps }) => {
 	/**
 	* Rendering lifecycle notes:
 	* - `open=true` renders dialog contents immediately.
@@ -2666,7 +2666,7 @@ var DialogAnchor = ({ allowFlip = true, children, className, closeOnClickOutside
 		updatePositionOnContentResize
 	});
 	(0, react.useEffect)(() => {
-		if (!open) return;
+		if (!open || !closeOnEscape) return;
 		const hideOnEscape = (event) => {
 			if (event.key !== "Escape" || event.defaultPrevented) return;
 			dialog?.close();
@@ -2675,7 +2675,11 @@ var DialogAnchor = ({ allowFlip = true, children, className, closeOnClickOutside
 		return () => {
 			document.removeEventListener("keyup", hideOnEscape);
 		};
-	}, [dialog, open]);
+	}, [
+		closeOnEscape,
+		dialog,
+		open
+	]);
 	if (!shouldRender) return null;
 	const { ["aria-describedby"]: ariaDescribedBy, ["aria-label"]: ariaLabel, ["aria-labelledby"]: ariaLabelledBy, ["aria-modal"]: ariaModal, role, ...anchorDivProps } = restDivProps;
 	const resolvedRole = trapFocus ? role ?? "dialog" : role;
@@ -5377,10 +5381,12 @@ var GalleryHeader = ({ currentItem }) => {
 };
 //#endregion
 //#region src/components/VideoPlayer/VideoPlayer.tsx
-var ReactPlayer = react.default.lazy(() => Promise.resolve().then(() => require("./ReactPlayerWrapper.a94a0cd1.js")));
-var VideoPlayer = ({ isPlaying, thumbnailUrl, videoUrl }) => {
+var ReactPlayer = react.default.lazy(() => Promise.resolve().then(() => require("./ReactPlayerWrapper.7cc7b0d8.js")));
+var VideoPlayer = ({ controls = true, isPlaying, thumbnailUrl, videoUrl }) => {
 	const { LoadingIndicator: LoadingIndicator$1 = LoadingIndicator, VideoPlayer: VideoPlayerContext } = useComponentContext();
 	return VideoPlayerContext ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VideoPlayerContext, {
+		controls,
+		isPlaying,
 		thumbnailUrl,
 		videoUrl
 	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.default.Suspense, {
@@ -5389,6 +5395,7 @@ var VideoPlayer = ({ isPlaying, thumbnailUrl, videoUrl }) => {
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingIndicator$1, {})
 		}),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReactPlayer, {
+			controls,
 			isPlaying,
 			thumbnailUrl,
 			videoUrl
@@ -6098,6 +6105,17 @@ var useChannelContainerClasses = ({ customClasses }) => {
 };
 //#endregion
 //#region src/components/Channel/utils.ts
+/** Writes the resolved URL onto the attachment and releases its local preview. */
+var applyUploadResult = (attachment, response) => {
+	const enriched = { ...attachment };
+	if ((0, stream_chat.isLocalImageAttachment)(enriched)) enriched.image_url = response.file;
+	else enriched.asset_url = response.file;
+	if (response.thumb_url) enriched.thumb_url = response.thumb_url;
+	const { previewUri } = attachment.localMetadata;
+	if (previewUri?.startsWith("blob:")) URL.revokeObjectURL?.(previewUri);
+	const { localMetadata, ...rest } = enriched;
+	return rest;
+};
 /**
 * Utility function for jumpToFirstUnreadMessage
 * @param targetId
@@ -6193,6 +6211,50 @@ var adaptMessageSendErrorToErrorFromResponse = (error) => {
 		status
 	});
 };
+/**
+* Settles the uploads of any attachment that is still in flight, and reports the outcome.
+*
+* A message only ever reaches the send path with a pending attachment when
+* `createSendWithPendingUploadsAttachmentsMiddleware` is installed — the default composition
+* middleware discards such a composition instead. `UploadManager.upload()` is idempotent by
+* `localMetadata.id`, so this awaits the request the composer already started rather than
+* starting a second one; an attachment whose upload never started (a retry, an offline replay)
+* is uploaded here for the first time.
+*
+* Resolved attachments come back carrying their URL and **without** `localMetadata`, and their
+* local preview is revoked. Failed ones are returned untouched, `localMetadata` and all, so a
+* retry re-uploads only what is still missing.
+*/
+var settlePendingAttachmentUploads = async ({ attachments, channelCid, client }) => {
+	const pendingIndexes = attachments.reduce((indexes, attachment, index) => {
+		if ((0, stream_chat.isPendingUpload)(attachment)) indexes.push(index);
+		return indexes;
+	}, []);
+	if (!pendingIndexes.length) return { attachments };
+	const settled = await Promise.allSettled(pendingIndexes.map((index) => {
+		const { file, id } = attachments[index].localMetadata;
+		return client.uploadManager.upload({
+			channelCid,
+			file,
+			id
+		});
+	}));
+	const nextAttachments = [...attachments];
+	let failureReason;
+	settled.forEach((result, position) => {
+		const index = pendingIndexes[position];
+		const attachment = nextAttachments[index];
+		if (result.status === "fulfilled" && result.value) {
+			nextAttachments[index] = applyUploadResult(attachment, result.value);
+			return;
+		}
+		if (!failureReason) failureReason = result.status === "rejected" ? result.reason : /* @__PURE__ */ new Error("Attachment upload returned no result");
+	});
+	return {
+		attachments: nextAttachments,
+		failureReason
+	};
+};
 //#endregion
 //#region src/utils/getChannel.ts
 /**
@@ -6337,7 +6399,7 @@ var UnMemoizedChannel = (props) => {
 var ChannelInner = (props) => {
 	const { activeUnreadHandler, allowConcurrentAudioPlayback, channel, channelQueryOptions, children, doDeleteMessageRequest, doMarkReadRequest, doSendMessageRequest, doUpdateMessageRequest, initializeOnMount = true, markReadOnMount = true, onMentionsClick, onMentionsHover, skipMessageDataMemoization } = props;
 	const { LoadingErrorIndicator: LoadingErrorIndicator$1 = LoadingErrorIndicator, LoadingIndicator = LoadingChannel } = useComponentContext();
-	const { client, customClasses, latestMessageDatesByChannels, mutes, searchController } = useChatContext("Channel");
+	const { client, customClasses, latestMessageDatesByChannels, mutes, searchController } = useChatContext();
 	const { addNotification } = useNotificationApi();
 	const { t } = useTranslationContext("Channel");
 	const chatContainerClass = getChatContainerClass(customClasses?.chatContainer);
@@ -6793,11 +6855,31 @@ var ChannelInner = (props) => {
 			type: "copyMessagesFromChannel"
 		});
 	};
-	const doSendMessage = async ({ localMessage, message, options }) => {
+	const sendMessageRequest = async ({ localMessage, message, options }) => {
 		try {
+			const { attachments: settledAttachments, failureReason } = await settlePendingAttachmentUploads({
+				attachments: localMessage.attachments ?? [],
+				channelCid: channel.cid,
+				client
+			});
+			if (failureReason) {
+				const failedMessage = {
+					...localMessage,
+					attachments: settledAttachments,
+					error: adaptMessageSendErrorToErrorFromResponse(failureReason),
+					status: "failed"
+				};
+				updateMessage(failedMessage);
+				thread?.upsertReplyLocally({ message: failedMessage });
+				return;
+			}
+			const messageToSend = settledAttachments === localMessage.attachments ? message : {
+				...message,
+				attachments: settledAttachments
+			};
 			let messageResponse;
-			if (doSendMessageRequest) messageResponse = await doSendMessageRequest(channel, message, options);
-			else messageResponse = await channel.sendMessage(message, options);
+			if (doSendMessageRequest) messageResponse = await doSendMessageRequest(channel, messageToSend, options);
+			else messageResponse = await channel.sendMessage(messageToSend, options);
 			let existingMessage = void 0;
 			for (let i = channel.state.messages.length - 1; i >= 0; i--) {
 				const msg = channel.state.messages[i];
@@ -6831,6 +6913,17 @@ var ChannelInner = (props) => {
 			}
 		}
 	};
+	/**
+	* Sends are serialised per channel while a composition middleware declaring
+	* `allowsPendingUploads` is installed. Without it a text-only message would reach the server
+	* while an earlier message was still uploading, and since `created_at` is stamped when the
+	* request arrives, the channel would end up in a different order than the user watched happen.
+	* `withoutConcurrency` lets a failed send through without blocking the ones behind it.
+	*
+	* Read off the channel's composer, which is what the composer setup function configures — so
+	* whoever installs the middleware gets the matching send path with nothing else to switch on.
+	*/
+	const doSendMessage = (params) => channel.messageComposer.allowsPendingUploads ? (0, stream_chat.withoutConcurrency)(`stream-chat-react/send-message/${channel.cid}`, () => sendMessageRequest(params)) : sendMessageRequest(params);
 	const sendMessage = async ({ localMessage, message, options }) => {
 		channel.state.filterErrorMessages();
 		thread?.upsertReplyLocally({ message: localMessage });
@@ -9456,4 +9549,4 @@ Object.defineProperty(exports, "validateAndGetMessage", {
 	}
 });
 
-//# sourceMappingURL=NotificationList.6abbee1c.js.map
+//# sourceMappingURL=NotificationList.4ce251ea.js.map