stream-chat-react 14.11.1 → 15.0.0-rc.1

package/dist/es/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.mjs

@@ -0,0 +1,324 @@
+import { useChatContext } from "../../../../context/ChatContext.mjs";
+import { useComponentContext } from "../../../../context/ComponentContext.mjs";
+import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
+import { ChannelAvatar } from "../../../../components/Avatar/ChannelAvatar.mjs";
+import { useNotificationApi } from "../../../../components/Notifications/hooks/useNotificationApi.mjs";
+import { Button } from "../../../../components/Button/Button.mjs";
+import { Prompt } from "../../../../components/Dialog/components/Prompt.mjs";
+import { useChannelMembershipState } from "../../../../components/ChannelList/hooks/useChannelMembershipState.mjs";
+import { useIsChannelMuted } from "../../../../components/ChannelListItem/hooks/useIsChannelMuted.mjs";
+import { isDmChannel } from "../../../../utils/isDmChannel.mjs";
+import { TextInput } from "../../../../components/Form/TextInput.mjs";
+import { useChannelPreviewInfo } from "../../../../components/ChannelListItem/hooks/useChannelPreviewInfo.mjs";
+import { useIsUserMuted } from "../../../../components/ChannelListItem/hooks/useIsUserMuted.mjs";
+import { useModalContext } from "../../../../context/ModalContext.mjs";
+import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
+import { useChannelHasMembersOnline } from "../../../../components/ChannelHeader/hooks/useChannelHasMembersOnline.mjs";
+import { useChannelHeaderOnlineStatus } from "../../../../components/ChannelHeader/hooks/useChannelHeaderOnlineStatus.mjs";
+import { SectionNavigatorHeader } from "../../SectionNavigator/SectionNavigatorHeader.mjs";
+import { useChannelDetailContext } from "../../ChannelDetailContext.mjs";
+import { defaultChannelManagementActionSet, useBaseChannelManagementActionSetFilter } from "./ChannelManagementActions.defaults.mjs";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.tsx
+var ChannelManagementInfoBody = ({ actions }) => {
+	const { IconMute, IconPin } = useComponentContextIcons();
+	const { client } = useChatContext();
+	const { channel } = useChannelDetailContext();
+	const { Avatar = ChannelAvatar } = useComponentContext();
+	const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({ channel });
+	const resolvedIsDmChannel = isDmChannel({
+		channel,
+		ownUserId: client.user?.id
+	});
+	const otherMemberUserId = useMemo(() => {
+		if (!resolvedIsDmChannel) return;
+		return Object.values(channel.state?.members ?? {}).find((member) => member.user?.id && member.user.id !== client.user?.id)?.user?.id;
+	}, [
+		channel,
+		client.user?.id,
+		resolvedIsDmChannel
+	]);
+	const isOnline = useChannelHasMembersOnline({ channel });
+	const { muted: channelMuted } = useIsChannelMuted(channel);
+	const userMuted = useIsUserMuted(otherMemberUserId);
+	const membership = useChannelMembershipState(channel);
+	const onlineStatusText = useChannelHeaderOnlineStatus();
+	const pinned = membership.pinned_at != null;
+	return /* @__PURE__ */ jsxs(Prompt.Body, {
+		className: "str-chat__channel-detail__channel-management-view__body",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "str-chat__channel-detail__channel-management-view__profile",
+			children: [/* @__PURE__ */ jsx(Avatar, {
+				displayMembers: groupChannelDisplayInfo.members,
+				imageUrl: displayImage,
+				isOnline: resolvedIsDmChannel ? isOnline : void 0,
+				size: "2xl",
+				userName: displayTitle
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "str-chat__channel-detail__channel-management-view__profile__details",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "str-chat__channel-detail__channel-management-view__profile__details__title",
+					children: [
+						displayTitle && /* @__PURE__ */ jsx("span", { children: displayTitle }),
+						pinned && /* @__PURE__ */ jsx(IconPin, {}),
+						resolvedIsDmChannel && userMuted || !resolvedIsDmChannel && channelMuted ? /* @__PURE__ */ jsx(IconMute, {}) : null
+					]
+				}), onlineStatusText && /* @__PURE__ */ jsx("div", {
+					className: "str-chat__channel-detail__channel-management-view__profile__details__connection-status",
+					children: onlineStatusText
+				})]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "str-chat__channel-detail__channel-management-view__actions str-chat__form__switch-fieldset",
+			children: actions.map(({ Component, type }) => /* @__PURE__ */ jsx(Component, {}, type))
+		})]
+	});
+};
+var EDIT_BODY_EMITTER = "ChannelManagementEditBody";
+/**
+* Assembles the argument for `channel.updatePartial` from the pending edits,
+* or returns `null` when there is nothing to persist. `image` is a tri-state:
+* a string sets a new avatar, `null` clears it, `undefined` leaves it untouched.
+*/
+var buildChannelUpdatePayload = ({ image, name }) => {
+	const payload = {};
+	const set = {};
+	if (name !== void 0) set["custom.name"] = name;
+	if (typeof image === "string") set["custom.image"] = image;
+	if (Object.keys(set).length > 0) payload.set = set;
+	if (image === null) payload.unset = ["custom.image"];
+	return Object.keys(payload).length > 0 ? payload : null;
+};
+/**
+* Owns the channel-edit form: field state, the local image preview lifecycle,
+* the derived "can save" flags, and the save orchestration (upload → persist →
+* notify). The component is left to render the values this returns.
+*/
+var useChannelManagementEditForm = ({ uploadImage }) => {
+	const { t } = useTranslationContext();
+	const { client } = useChatContext();
+	const { channel } = useChannelDetailContext();
+	const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({ channel });
+	const { addNotification } = useNotificationApi();
+	const resolvedIsDmChannel = isDmChannel({
+		channel,
+		ownUserId: client.user?.id
+	});
+	const hasMembersOnline = useChannelHasMembersOnline({ channel });
+	const isOnline = resolvedIsDmChannel ? hasMembersOnline : void 0;
+	const nameLabel = resolvedIsDmChannel ? t("channelDetail.channelManagementView.contactName.label", "Contact name") : t("channelDetail.channelManagementView.groupName.label", "Group name");
+	const [baselineName, setBaselineName] = useState(channel.data?.custom?.name ?? "");
+	const [name, setName] = useState(baselineName);
+	const [imageEdit, setImageEdit] = useState(null);
+	const [isSaving, setIsSaving] = useState(false);
+	const fileInputRef = useRef(null);
+	const pickedFile = imageEdit instanceof File ? imageEdit : null;
+	const objectUrl = useMemo(() => pickedFile ? URL.createObjectURL(pickedFile) : null, [pickedFile]);
+	useEffect(() => () => {
+		if (objectUrl) URL.revokeObjectURL(objectUrl);
+	}, [objectUrl]);
+	const previewImageUrl = objectUrl ?? (imageEdit === "removed" ? void 0 : displayImage);
+	const trimmedName = name.trim();
+	const nameChanged = trimmedName !== baselineName.trim();
+	const imageChanged = imageEdit !== null;
+	const hasChanges = trimmedName.length > 0 && nameChanged || imageChanged;
+	const canSubmit = trimmedName.length > 0 && !isSaving && hasChanges;
+	const handleOpenFilePicker = useCallback(() => {
+		fileInputRef.current?.click();
+	}, []);
+	const handleFileChange = useCallback((event) => {
+		const file = event.target.files?.[0];
+		if (file) setImageEdit(file);
+		event.target.value = "";
+	}, []);
+	const handleDeleteImage = useCallback(() => setImageEdit("removed"), []);
+	const resolveImageUrl = useCallback(async (file) => {
+		const url = uploadImage ? await uploadImage(file) : (await channel.uploadImage({ file })).file;
+		if (!url) throw new Error("Image upload did not return a URL");
+		return url;
+	}, [channel, uploadImage]);
+	return {
+		canSubmit,
+		displayTitle,
+		fileInputRef,
+		groupChannelDisplayInfo,
+		handleDeleteImage,
+		handleFileChange,
+		handleOpenFilePicker,
+		handleSubmit: useCallback(async (event) => {
+			event.preventDefault();
+			if (!canSubmit) return;
+			setIsSaving(true);
+			try {
+				let image;
+				if (pickedFile) image = await resolveImageUrl(pickedFile);
+				else if (imageEdit === "removed") image = null;
+				const payload = buildChannelUpdatePayload({
+					image,
+					name: nameChanged ? trimmedName : void 0
+				});
+				if (payload) await channel.updatePartial(payload);
+				setImageEdit(null);
+				setBaselineName(trimmedName);
+				setName(trimmedName);
+				addNotification({
+					duration: 3e3,
+					emitter: EDIT_BODY_EMITTER,
+					incident: {
+						domain: "channel",
+						entity: "channel",
+						operation: "update",
+						status: "success"
+					},
+					message: t("channelDetail.channelManagementView.changesSaved.text", "Changes saved"),
+					severity: "success"
+				});
+			} catch (error) {
+				addNotification({
+					emitter: EDIT_BODY_EMITTER,
+					error: error instanceof Error ? error : void 0,
+					incident: {
+						domain: "api",
+						entity: "channel",
+						operation: "update",
+						status: "failed"
+					},
+					message: t("channelDetail.channelManagementView.failedSaveChanges.text", "Failed to save changes"),
+					severity: "error"
+				});
+			} finally {
+				setIsSaving(false);
+			}
+		}, [
+			addNotification,
+			canSubmit,
+			channel,
+			imageEdit,
+			nameChanged,
+			pickedFile,
+			resolveImageUrl,
+			t,
+			trimmedName
+		]),
+		hasAvatarImage: !!previewImageUrl,
+		isOnline,
+		name,
+		nameLabel,
+		previewImageUrl,
+		setName,
+		t,
+		trimmedName
+	};
+};
+var ChannelManagementEditBody = (props) => {
+	const { IconCheckmark } = useComponentContextIcons();
+	const { Avatar = ChannelAvatar } = useComponentContext();
+	const { canSubmit, displayTitle, fileInputRef, groupChannelDisplayInfo, handleDeleteImage, handleFileChange, handleOpenFilePicker, handleSubmit, hasAvatarImage, isOnline, name, nameLabel, previewImageUrl, setName, t, trimmedName } = useChannelManagementEditForm(props);
+	return /* @__PURE__ */ jsxs("form", {
+		className: "str-chat__channel-detail__channel-management-view__form",
+		onSubmit: handleSubmit,
+		children: [/* @__PURE__ */ jsxs(Prompt.Body, {
+			className: "str-chat__channel-detail__channel-management-view__body",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "str-chat__channel-detail__channel-management-view__avatar-row",
+				children: [/* @__PURE__ */ jsx(Avatar, {
+					displayMembers: groupChannelDisplayInfo.members,
+					imageUrl: previewImageUrl,
+					isOnline,
+					size: "2xl",
+					userName: trimmedName || displayTitle
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "str-chat__channel-detail__channel-management-view__avatar-row__actions",
+					children: [
+						/* @__PURE__ */ jsx(Button, {
+							appearance: "outline",
+							onClick: handleOpenFilePicker,
+							size: "sm",
+							type: "button",
+							variant: "secondary",
+							children: t("channelDetail.channelManagementView.uploadPicture.text", "Upload Picture")
+						}),
+						hasAvatarImage && /* @__PURE__ */ jsx(Button, {
+							appearance: "outline",
+							onClick: handleDeleteImage,
+							size: "sm",
+							type: "button",
+							variant: "secondary",
+							children: t("common.delete.text", "Delete")
+						}),
+						/* @__PURE__ */ jsx("input", {
+							accept: "image/*",
+							"aria-hidden": true,
+							className: "str-chat__channel-detail__channel-management-view__file-input",
+							onChange: handleFileChange,
+							ref: fileInputRef,
+							tabIndex: -1,
+							type: "file"
+						})
+					]
+				})]
+			}), /* @__PURE__ */ jsx(TextInput, {
+				"aria-label": nameLabel,
+				autoFocus: true,
+				className: "str-chat__channel-detail__channel-management-view__name-input",
+				maxLength: 255,
+				onChange: (event) => setName(event.target.value),
+				placeholder: nameLabel,
+				value: name
+			})]
+		}), /* @__PURE__ */ jsx(Prompt.Footer, {
+			className: "str-chat__channel-detail__channel-management-view__footer",
+			children: /* @__PURE__ */ jsx(Prompt.FooterControls, { children: canSubmit && /* @__PURE__ */ jsxs(Prompt.FooterControlsButtonPrimary, {
+				className: "str-chat__channel-detail__channel-management-view__footer__save-button",
+				type: "submit",
+				children: [/* @__PURE__ */ jsx(IconCheckmark, {}), t("channelDetail.channelManagementView.save.text", "Save")]
+			}) })
+		})]
+	});
+};
+var ChannelManagementView = ({ channelManagementActionSet = defaultChannelManagementActionSet, EditModeComponent = ChannelManagementEditBody, uploadImage, ViewModeComponent = ChannelManagementInfoBody }) => {
+	const { t } = useTranslationContext();
+	const { client } = useChatContext();
+	const { channel } = useChannelDetailContext();
+	const { close } = useModalContext();
+	const resolvedIsDmChannel = isDmChannel({
+		channel,
+		ownUserId: client.user?.id
+	});
+	const actions = useBaseChannelManagementActionSetFilter(channelManagementActionSet);
+	const [isEditing, setIsEditing] = useState(false);
+	const canEditChannel = channel.data?.own_capabilities?.includes("update-channel");
+	const isEditMode = isEditing && canEditChannel;
+	useEffect(() => {
+		setIsEditing(false);
+	}, [channel]);
+	const EditChannelButton = useMemo(() => function EditChannelButton() {
+		return /* @__PURE__ */ jsx(Button, {
+			appearance: "outline",
+			"aria-label": t("channelDetail.channelManagementView.editChatData.ariaLabel", "Edit chat data"),
+			className: "str-chat__channel-detail__channel-management-view__edit-button",
+			onClick: () => {
+				setIsEditing(true);
+			},
+			size: "md",
+			variant: "secondary",
+			children: t("channelDetail.channelManagementView.edit.text", "Edit")
+		});
+	}, [t]);
+	const headerTitle = isEditMode ? resolvedIsDmChannel ? t("channelDetail.channelManagementView.editContact.label", "Edit contact") : t("channelDetail.channelManagementView.editGroup.label", "Edit group") : resolvedIsDmChannel ? t("channelDetail.channelManagementView.contactInfo.label", "Contact info") : t("channelDetail.channelManagementView.groupInfo.label", "Group info");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__channel-detail__channel-management-view",
+		children: [/* @__PURE__ */ jsx(SectionNavigatorHeader, {
+			close,
+			description: isEditMode ? void 0 : t("channelDetail.channelManagementView.manageChannel.description", "Manage channel"),
+			goBack: isEditMode ? () => setIsEditing(false) : void 0,
+			title: headerTitle,
+			TrailingContent: !isEditMode && canEditChannel ? EditChannelButton : void 0
+		}), isEditMode ? /* @__PURE__ */ jsx(EditModeComponent, { uploadImage }) : /* @__PURE__ */ jsx(ViewModeComponent, { actions })]
+	});
+};
+//#endregion
+export { ChannelManagementEditBody, ChannelManagementInfoBody, ChannelManagementView };
+
+//# sourceMappingURL=ChannelManagementView.mjs.map

package/dist/es/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelManagementView.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.tsx"],"sourcesContent":["import React, {\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  useChatContext,\n  useComponentContext,\n  useComponentContextIcons,\n  useModalContext,\n  useTranslationContext,\n} from '../../../../context';\nimport { isDmChannel } from '../../../../utils';\nimport {\n  SectionNavigatorHeader,\n  type SectionNavigatorSectionContentProps,\n} from '../../SectionNavigator';\nimport { ChannelAvatar as DefaultChannelAvatar } from '../../../../components/Avatar';\nimport {\n  useChannelPreviewInfo,\n  useIsUserMuted,\n} from '../../../../components/ChannelListItem';\nimport { useChannelMembershipState } from '../../../../components/ChannelList';\nimport { useIsChannelMuted } from '../../../../components/ChannelListItem/hooks/useIsChannelMuted';\nimport { useChannelHasMembersOnline } from '../../../../components/ChannelHeader/hooks/useChannelHasMembersOnline';\nimport { Prompt } from '../../../../components/Dialog';\nimport {\n  type ChannelManagementActionItem,\n  defaultChannelManagementActionSet,\n  useBaseChannelManagementActionSetFilter,\n} from './ChannelManagementActions.defaults';\nimport { useChannelHeaderOnlineStatus } from '../../../../components/ChannelHeader/hooks/useChannelHeaderOnlineStatus';\nimport { useChannelDetailContext } from '../../ChannelDetailContext';\nimport { Button } from '../../../../components/Button';\nimport { TextInput } from '../../../../components/Form';\nimport { useNotificationApi } from '../../../../components/Notifications/hooks/useNotificationApi';\n\nexport type ChannelManagementViewProps = SectionNavigatorSectionContentProps & {\n  channelManagementActionSet?: ChannelManagementActionItem[];\n  EditModeComponent?: React.ComponentType<ChannelManagementEditBodyProps>;\n  uploadImage?: ChannelManagementImageUpload;\n  ViewModeComponent?: React.ComponentType<ChannelManagementInfoBodyProps>;\n};\n\nexport type ChannelManagementImageUpload = (file: File) => Promise<string> | string;\n\nexport type ChannelManagementInfoBodyProps = {\n  actions: ChannelManagementActionItem[];\n};\n\nexport const ChannelManagementInfoBody = ({\n  actions,\n}: ChannelManagementInfoBodyProps) => {\n  const { IconMute, IconPin } = useComponentContextIcons();\n  const { client } = useChatContext();\n  const { channel } = useChannelDetailContext();\n  const { Avatar = DefaultChannelAvatar } = useComponentContext();\n  const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({\n    channel,\n  });\n  const resolvedIsDmChannel = isDmChannel({\n    channel,\n    ownUserId: client.user?.id,\n  });\n  const otherMemberUserId = useMemo(() => {\n    if (!resolvedIsDmChannel) return;\n\n    return Object.values(channel.state?.members ?? {}).find(\n      (member) => member.user?.id && member.user.id !== client.user?.id,\n    )?.user?.id;\n  }, [channel, client.user?.id, resolvedIsDmChannel]);\n  const isOnline = useChannelHasMembersOnline({ channel });\n  const { muted: channelMuted } = useIsChannelMuted(channel);\n  const userMuted = useIsUserMuted(otherMemberUserId);\n  const membership = useChannelMembershipState(channel);\n  // MERGE-RECONCILE: useChannelHeaderOnlineStatus was reworked (PR #2909) to read the channel\n  // from context (useChannel) instead of an argument. Verify this view renders within a\n  // Channel/ChannelInstance subtree so the context channel matches `channel`.\n  const onlineStatusText = useChannelHeaderOnlineStatus();\n  const pinned = membership.pinned_at != null;\n\n  return (\n    <Prompt.Body className='str-chat__channel-detail__channel-management-view__body'>\n      <div className='str-chat__channel-detail__channel-management-view__profile'>\n        <Avatar\n          displayMembers={groupChannelDisplayInfo.members}\n          imageUrl={displayImage}\n          isOnline={resolvedIsDmChannel ? isOnline : undefined}\n          size='2xl'\n          userName={displayTitle}\n        />\n        <div className='str-chat__channel-detail__channel-management-view__profile__details'>\n          <div className='str-chat__channel-detail__channel-management-view__profile__details__title'>\n            {displayTitle && <span>{displayTitle}</span>}\n            {pinned && <IconPin />}\n            {(resolvedIsDmChannel && userMuted) ||\n            (!resolvedIsDmChannel && channelMuted) ? (\n              <IconMute />\n            ) : null}\n          </div>\n          {onlineStatusText && (\n            <div className='str-chat__channel-detail__channel-management-view__profile__details__connection-status'>\n              {onlineStatusText}\n            </div>\n          )}\n        </div>\n      </div>\n\n      <div className='str-chat__channel-detail__channel-management-view__actions str-chat__form__switch-fieldset'>\n        {actions.map(({ Component, type }) => (\n          <Component key={type} />\n        ))}\n      </div>\n    </Prompt.Body>\n  );\n};\n\nexport type ChannelManagementEditBodyProps = {\n  uploadImage?: ChannelManagementImageUpload;\n};\n\nconst EDIT_BODY_EMITTER = 'ChannelManagementEditBody';\n\ntype ChannelUpdatePayload = {\n  set?: { 'custom.image'?: string; 'custom.name'?: string };\n  unset?: ['custom.image'];\n};\n\n/**\n * Assembles the argument for `channel.updatePartial` from the pending edits,\n * or returns `null` when there is nothing to persist. `image` is a tri-state:\n * a string sets a new avatar, `null` clears it, `undefined` leaves it untouched.\n */\nconst buildChannelUpdatePayload = ({\n  image,\n  name,\n}: {\n  image?: string | null;\n  name?: string;\n}): ChannelUpdatePayload | null => {\n  const payload: ChannelUpdatePayload = {};\n\n  // Custom channel fields (name/image) live under `channel.data.custom` in v10, so partial-update\n  // set/unset target them by dot-path — mirroring the `channel.data.custom.name` read path.\n  const set: { 'custom.image'?: string; 'custom.name'?: string } = {};\n  if (name !== undefined) set['custom.name'] = name;\n  if (typeof image === 'string') set['custom.image'] = image;\n  if (Object.keys(set).length > 0) payload.set = set;\n\n  if (image === null) payload.unset = ['custom.image'];\n\n  return Object.keys(payload).length > 0 ? payload : null;\n};\n\n/**\n * Owns the channel-edit form: field state, the local image preview lifecycle,\n * the derived \"can save\" flags, and the save orchestration (upload → persist →\n * notify). The component is left to render the values this returns.\n */\nconst useChannelManagementEditForm = ({\n  uploadImage,\n}: ChannelManagementEditBodyProps) => {\n  const { t } = useTranslationContext();\n  const { client } = useChatContext();\n  const { channel } = useChannelDetailContext();\n  const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({\n    channel,\n  });\n  const { addNotification } = useNotificationApi();\n\n  const resolvedIsDmChannel = isDmChannel({ channel, ownUserId: client.user?.id });\n  const hasMembersOnline = useChannelHasMembersOnline({ channel });\n  const isOnline = resolvedIsDmChannel ? hasMembersOnline : undefined;\n  const nameLabel = resolvedIsDmChannel\n    ? t('channelDetail.channelManagementView.contactName.label', 'Contact name')\n    : t('channelDetail.channelManagementView.groupName.label', 'Group name');\n\n  // Dirty-tracking baseline; advanced to the saved value on success so the form\n  // is no longer considered dirty (and the Save button hides) after a write.\n  const [baselineName, setBaselineName] = useState(channel.data?.custom?.name ?? '');\n  const [name, setName] = useState(baselineName);\n  // null = keep current avatar, File = replace it, 'removed' = clear it\n  const [imageEdit, setImageEdit] = useState<File | 'removed' | null>(null);\n  const [isSaving, setIsSaving] = useState(false);\n\n  const fileInputRef = useRef<HTMLInputElement>(null);\n\n  const pickedFile = imageEdit instanceof File ? imageEdit : null;\n\n  // Preview the locally picked file, releasing the object URL when it changes or unmounts.\n  const objectUrl = useMemo(\n    () => (pickedFile ? URL.createObjectURL(pickedFile) : null),\n    [pickedFile],\n  );\n\n  useEffect(\n    () => () => {\n      if (objectUrl) URL.revokeObjectURL(objectUrl);\n    },\n    [objectUrl],\n  );\n\n  const previewImageUrl =\n    objectUrl ?? (imageEdit === 'removed' ? undefined : displayImage);\n\n  const trimmedName = name.trim();\n  const nameChanged = trimmedName !== baselineName.trim();\n  const imageChanged = imageEdit !== null;\n  const hasChanges = (trimmedName.length > 0 && nameChanged) || imageChanged;\n  const canSubmit = trimmedName.length > 0 && !isSaving && hasChanges;\n\n  const handleOpenFilePicker = useCallback(() => {\n    fileInputRef.current?.click();\n  }, []);\n\n  const handleFileChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    const file = event.target.files?.[0];\n    if (file) setImageEdit(file);\n    event.target.value = '';\n  }, []);\n\n  const handleDeleteImage = useCallback(() => setImageEdit('removed'), []);\n\n  const resolveImageUrl = useCallback(\n    async (file: File) => {\n      const url = uploadImage\n        ? await uploadImage(file)\n        : (await channel.uploadImage({ file })).file;\n      if (!url) throw new Error('Image upload did not return a URL');\n      return url;\n    },\n    [channel, uploadImage],\n  );\n\n  const handleSubmit = useCallback(\n    async (event: SyntheticEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      if (!canSubmit) return;\n\n      setIsSaving(true);\n      try {\n        let image: string | null | undefined;\n        if (pickedFile) image = await resolveImageUrl(pickedFile);\n        else if (imageEdit === 'removed') image = null;\n\n        const payload = buildChannelUpdatePayload({\n          image,\n          name: nameChanged ? trimmedName : undefined,\n        });\n        if (payload) await channel.updatePartial(payload);\n\n        // Clear the dirty state so an identical re-save isn't offered.\n        setImageEdit(null);\n        setBaselineName(trimmedName);\n        setName(trimmedName);\n\n        addNotification({\n          duration: 3000,\n          emitter: EDIT_BODY_EMITTER,\n          incident: {\n            domain: 'channel',\n            entity: 'channel',\n            operation: 'update',\n            status: 'success',\n          },\n          message: t(\n            'channelDetail.channelManagementView.changesSaved.text',\n            'Changes saved',\n          ),\n          severity: 'success',\n        });\n      } catch (error) {\n        addNotification({\n          emitter: EDIT_BODY_EMITTER,\n          error: error instanceof Error ? error : undefined,\n          incident: {\n            domain: 'api',\n            entity: 'channel',\n            operation: 'update',\n            status: 'failed',\n          },\n          message: t(\n            'channelDetail.channelManagementView.failedSaveChanges.text',\n            'Failed to save changes',\n          ),\n          severity: 'error',\n        });\n      } finally {\n        setIsSaving(false);\n      }\n    },\n    [\n      addNotification,\n      canSubmit,\n      channel,\n      imageEdit,\n      nameChanged,\n      pickedFile,\n      resolveImageUrl,\n      t,\n      trimmedName,\n    ],\n  );\n\n  return {\n    canSubmit,\n    displayTitle,\n    fileInputRef,\n    groupChannelDisplayInfo,\n    handleDeleteImage,\n    handleFileChange,\n    handleOpenFilePicker,\n    handleSubmit,\n    hasAvatarImage: !!previewImageUrl,\n    isOnline,\n    name,\n    nameLabel,\n    previewImageUrl,\n    setName,\n    t,\n    trimmedName,\n  };\n};\n\nexport const ChannelManagementEditBody = (props: ChannelManagementEditBodyProps) => {\n  const { IconCheckmark } = useComponentContextIcons();\n  const { Avatar = DefaultChannelAvatar } = useComponentContext();\n  const {\n    canSubmit,\n    displayTitle,\n    fileInputRef,\n    groupChannelDisplayInfo,\n    handleDeleteImage,\n    handleFileChange,\n    handleOpenFilePicker,\n    handleSubmit,\n    hasAvatarImage,\n    isOnline,\n    name,\n    nameLabel,\n    previewImageUrl,\n    setName,\n    t,\n    trimmedName,\n  } = useChannelManagementEditForm(props);\n\n  return (\n    <form\n      className='str-chat__channel-detail__channel-management-view__form'\n      onSubmit={handleSubmit}\n    >\n      <Prompt.Body className='str-chat__channel-detail__channel-management-view__body'>\n        <div className='str-chat__channel-detail__channel-management-view__avatar-row'>\n          <Avatar\n            displayMembers={groupChannelDisplayInfo.members}\n            imageUrl={previewImageUrl}\n            isOnline={isOnline}\n            size='2xl'\n            userName={trimmedName || displayTitle}\n          />\n          <div className='str-chat__channel-detail__channel-management-view__avatar-row__actions'>\n            <Button\n              appearance='outline'\n              onClick={handleOpenFilePicker}\n              size='sm'\n              type='button'\n              variant='secondary'\n            >\n              {t(\n                'channelDetail.channelManagementView.uploadPicture.text',\n                'Upload Picture',\n              )}\n            </Button>\n            {hasAvatarImage && (\n              <Button\n                appearance='outline'\n                onClick={handleDeleteImage}\n                size='sm'\n                type='button'\n                variant='secondary'\n              >\n                {t('common.delete.text', 'Delete')}\n              </Button>\n            )}\n            <input\n              accept='image/*'\n              aria-hidden\n              className='str-chat__channel-detail__channel-management-view__file-input'\n              onChange={handleFileChange}\n              ref={fileInputRef}\n              tabIndex={-1}\n              type='file'\n            />\n          </div>\n        </div>\n\n        <TextInput\n          aria-label={nameLabel}\n          autoFocus\n          className='str-chat__channel-detail__channel-management-view__name-input'\n          maxLength={255}\n          onChange={(event) => setName(event.target.value)}\n          placeholder={nameLabel}\n          value={name}\n        />\n      </Prompt.Body>\n\n      <Prompt.Footer className='str-chat__channel-detail__channel-management-view__footer'>\n        <Prompt.FooterControls>\n          {canSubmit && (\n            <Prompt.FooterControlsButtonPrimary\n              className='str-chat__channel-detail__channel-management-view__footer__save-button'\n              type='submit'\n            >\n              <IconCheckmark />\n              {t('channelDetail.channelManagementView.save.text', 'Save')}\n            </Prompt.FooterControlsButtonPrimary>\n          )}\n        </Prompt.FooterControls>\n      </Prompt.Footer>\n    </form>\n  );\n};\n\nexport const ChannelManagementView = ({\n  channelManagementActionSet = defaultChannelManagementActionSet,\n  EditModeComponent = ChannelManagementEditBody,\n  uploadImage,\n  ViewModeComponent = ChannelManagementInfoBody,\n}: ChannelManagementViewProps) => {\n  const { t } = useTranslationContext();\n  const { client } = useChatContext();\n  const { channel } = useChannelDetailContext();\n  const { close } = useModalContext();\n  const resolvedIsDmChannel = isDmChannel({\n    channel,\n    ownUserId: client.user?.id,\n  });\n  const actions = useBaseChannelManagementActionSetFilter(channelManagementActionSet);\n  const [isEditing, setIsEditing] = useState(false);\n  const canEditChannel = channel.data?.own_capabilities?.includes('update-channel');\n  // Edit mode requires the capability: revoking it (or swapping channels) must\n  // drop back to view mode so the form cannot keep editing/submitting.\n  const isEditMode = isEditing && canEditChannel;\n\n  useEffect(() => {\n    setIsEditing(false);\n  }, [channel]);\n\n  const EditChannelButton = useMemo(\n    () =>\n      function EditChannelButton() {\n        return (\n          <Button\n            appearance='outline'\n            aria-label={t(\n              'channelDetail.channelManagementView.editChatData.ariaLabel',\n              'Edit chat data',\n            )}\n            className='str-chat__channel-detail__channel-management-view__edit-button'\n            onClick={() => {\n              setIsEditing(true);\n            }}\n            size='md'\n            variant='secondary'\n          >\n            {t('channelDetail.channelManagementView.edit.text', 'Edit')}\n          </Button>\n        );\n      },\n    [t],\n  );\n\n  const headerTitle = isEditMode\n    ? resolvedIsDmChannel\n      ? t('channelDetail.channelManagementView.editContact.label', 'Edit contact')\n      : t('channelDetail.channelManagementView.editGroup.label', 'Edit group')\n    : resolvedIsDmChannel\n      ? t('channelDetail.channelManagementView.contactInfo.label', 'Contact info')\n      : t('channelDetail.channelManagementView.groupInfo.label', 'Group info');\n\n  return (\n    <div className='str-chat__channel-detail__channel-management-view'>\n      <SectionNavigatorHeader\n        close={close}\n        description={\n          isEditMode\n            ? undefined\n            : t(\n                'channelDetail.channelManagementView.manageChannel.description',\n                'Manage channel',\n              )\n        }\n        goBack={isEditMode ? () => setIsEditing(false) : undefined}\n        title={headerTitle}\n        TrailingContent={!isEditMode && canEditChannel ? EditChannelButton : undefined}\n      />\n      {isEditMode ? (\n        <EditModeComponent uploadImage={uploadImage} />\n      ) : (\n        <ViewModeComponent actions={actions} />\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/es/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaEmptyList.mjs

@@ -0,0 +1,25 @@
+import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
+import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaEmptyList.tsx
+var ChannelMediaEmptyList = () => {
+	const { IconImage } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__channel-detail__media-view__empty-state",
+		children: [/* @__PURE__ */ jsx(IconImage, { className: "str-chat__channel-detail__media-view__empty-state__icon" }), /* @__PURE__ */ jsxs("div", {
+			className: "str-chat__channel-detail__media-view__empty-state__content",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "str-chat__channel-detail__media-view__empty-state__title",
+				children: t("channelDetail.channelMediaEmpty.noPhotosVideos.text", "No photos or videos")
+			}), /* @__PURE__ */ jsx("p", {
+				className: "str-chat__channel-detail__media-view__empty-state__description",
+				children: t("channelDetail.channelMediaEmpty.sharePhotoVideoSee.text", "Share a photo or video to see it here")
+			})]
+		})]
+	});
+};
+//#endregion
+export { ChannelMediaEmptyList };
+
+//# sourceMappingURL=ChannelMediaEmptyList.mjs.map

package/dist/es/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaEmptyList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelMediaEmptyList.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaEmptyList.tsx"],"sourcesContent":["import { useComponentContextIcons, useTranslationContext } from '../../../../context';\n\nexport const ChannelMediaEmptyList = () => {\n  const { IconImage } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n\n  return (\n    <div className='str-chat__channel-detail__media-view__empty-state'>\n      <IconImage className='str-chat__channel-detail__media-view__empty-state__icon' />\n      <div className='str-chat__channel-detail__media-view__empty-state__content'>\n        <p className='str-chat__channel-detail__media-view__empty-state__title'>\n          {t(\n            'channelDetail.channelMediaEmpty.noPhotosVideos.text',\n            'No photos or videos',\n          )}\n        </p>\n        <p className='str-chat__channel-detail__media-view__empty-state__description'>\n          {t(\n            'channelDetail.channelMediaEmpty.sharePhotoVideoSee.text',\n            'Share a photo or video to see it here',\n          )}\n        </p>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;AAEA,IAAa,8BAA8B;CACzC,MAAM,EAAE,cAAc,yBAAyB;CAC/C,MAAM,EAAE,MAAM,sBAAsB;CAEpC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,WAAD,EAAW,WAAU,0DAA2D,CAAA,GAChF,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,KAAD;IAAG,WAAU;cACV,EACC,uDACA,qBACF;GACC,CAAA,GACH,oBAAC,KAAD;IAAG,WAAU;cACV,EACC,2DACA,uCACF;GACC,CAAA,CACA;IACF;;AAET"}

package/dist/es/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.mjs

@@ -0,0 +1,215 @@
+import { useComponentContext } from "../../../../context/ComponentContext.mjs";
+import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
+import { Avatar } from "../../../../components/Avatar/Avatar.mjs";
+import { Badge } from "../../../../components/Badge/Badge.mjs";
+import { extractDisplayInfo } from "../../../../components/Avatar/utils.mjs";
+import { Button } from "../../../../components/Button/Button.mjs";
+import { Prompt } from "../../../../components/Dialog/components/Prompt.mjs";
+import { GlobalModal } from "../../../../components/Modal/GlobalModal.mjs";
+import { formatTime } from "../../../../components/AudioPlayback/components/formatTime.mjs";
+import { BaseImage } from "../../../../components/BaseImage/BaseImage.mjs";
+import { GalleryUI } from "../../../../components/Gallery/GalleryUI.mjs";
+import { Gallery } from "../../../../components/Gallery/Gallery.mjs";
+import { useModalContext } from "../../../../context/ModalContext.mjs";
+import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
+import { SectionNavigatorHeader } from "../../SectionNavigator/SectionNavigatorHeader.mjs";
+import { ChannelDetailListLoadingIndicator } from "../../ChannelDetailListLoadingIndicator.mjs";
+import { ChannelMediaEmptyList } from "./ChannelMediaEmptyList.mjs";
+import { getUserDisplayName } from "../ChannelMembersView/ChannelMembersView.utils.mjs";
+import { useChannelMediaSearch } from "./useChannelMediaSearch.mjs";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.tsx
+var DEFAULT_CHANNEL_MEDIA_ITEMS_PER_PAGE = 30;
+var ChannelMediaGridItem = ({ BaseImage, item, onClick }) => {
+	const { IconImage, IconVideoFill } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const { Avatar: Avatar$1 = Avatar, extractDisplayInfo: extractDisplayInfo$1 = extractDisplayInfo } = useComponentContext();
+	const displayName = getUserDisplayName(item.user);
+	const mediaSrc = item.type === "video" ? item.galleryItem.videoThumbnailUrl : item.galleryItem.imageUrl;
+	const durationLabel = formatTime(item.durationSeconds, "floor");
+	return /* @__PURE__ */ jsxs("button", {
+		"aria-label": item.type === "video" ? t("channelDetail.channelMediaView.openVideoShared.ariaLabel", "Open video shared by {{ name }}", { name: displayName }) : t("channelDetail.channelMediaView.openImageShared.ariaLabel", "Open image shared by {{ name }}", { name: displayName }),
+		className: "str-chat__channel-detail__media-view__item",
+		onClick,
+		type: "button",
+		children: [
+			mediaSrc ? /* @__PURE__ */ jsx(BaseImage, {
+				alt: item.galleryItem.alt ?? item.galleryItem.title ?? "",
+				className: "str-chat__channel-detail__media-view__item__media",
+				src: mediaSrc
+			}) : /* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "str-chat__channel-detail__media-view__item__placeholder",
+				children: /* @__PURE__ */ jsx(IconImage, {})
+			}),
+			/* @__PURE__ */ jsx(Avatar$1, {
+				...extractDisplayInfo$1({ user: item.user }),
+				"aria-hidden": "true",
+				className: "str-chat__channel-detail__media-view__item__avatar",
+				size: "sm"
+			}),
+			item.type === "video" && /* @__PURE__ */ jsxs(Badge, {
+				className: "str-chat__channel-detail__media-view__item__duration",
+				size: "sm",
+				variant: "inverse",
+				children: [/* @__PURE__ */ jsx(IconVideoFill, { className: "str-chat__channel-detail__media-view__item__duration-icon" }), durationLabel ? /* @__PURE__ */ jsx("span", { children: durationLabel }) : null]
+			})
+		]
+	});
+};
+var ChannelMediaPagination = ({ nextDisabled, onNext, onPrevious, previousDisabled }) => {
+	const { IconChevronLeft, IconChevronRight } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__channel-detail__media-view__pagination",
+		children: [/* @__PURE__ */ jsxs(Button, {
+			appearance: "outline",
+			"aria-label": t("channelDetail.channelMediaView.previousPage.ariaLabel", "Previous page"),
+			className: "str-chat__channel-detail__media-view__pagination__button str-chat__channel-detail__media-view__pagination__button--previous",
+			disabled: previousDisabled,
+			onClick: onPrevious,
+			size: "md",
+			variant: "secondary",
+			children: [/* @__PURE__ */ jsx(IconChevronLeft, {}), t("channelDetail.channelMediaView.previous.text", "Previous")]
+		}), /* @__PURE__ */ jsxs(Button, {
+			appearance: "outline",
+			"aria-label": t("channelDetail.channelMediaView.nextPage.ariaLabel", "Next page"),
+			className: "str-chat__channel-detail__media-view__pagination__button str-chat__channel-detail__media-view__pagination__button--next",
+			disabled: nextDisabled,
+			onClick: onNext,
+			size: "md",
+			variant: "secondary",
+			children: [t("channelDetail.channelMediaView.next.text", "Next"), /* @__PURE__ */ jsx(IconChevronRight, {})]
+		})]
+	});
+};
+var ChannelMediaView = ({ itemsPerPage = DEFAULT_CHANNEL_MEDIA_ITEMS_PER_PAGE }) => {
+	const { t } = useTranslationContext();
+	const { close } = useModalContext();
+	const { BaseImage: BaseImage$1 = BaseImage, Gallery: Gallery$1 = Gallery, Modal = GlobalModal } = useComponentContext();
+	const { channelMediaSearchSource, hasNext, hasResultsLoaded, isLoading, mediaItems } = useChannelMediaSearch();
+	const [viewerOpen, setViewerOpen] = useState(false);
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const [page, setPage] = useState(0);
+	const gridRef = useRef(null);
+	const pendingNextRef = useRef(false);
+	const galleryItems = useMemo(() => mediaItems.map((item) => item.galleryItem), [mediaItems]);
+	const pageStart = page * itemsPerPage;
+	const pageItems = useMemo(() => mediaItems.slice(pageStart, pageStart + itemsPerPage), [
+		mediaItems,
+		itemsPerPage,
+		pageStart
+	]);
+	const canGoNext = mediaItems.length > pageStart + itemsPerPage || hasNext;
+	const showPagination = mediaItems.length > itemsPerPage || mediaItems.length > 0 && hasNext;
+	const openViewer = useCallback((index) => {
+		setSelectedIndex(index);
+		setViewerOpen(true);
+	}, []);
+	const closeViewer = useCallback(() => {
+		setViewerOpen(false);
+	}, []);
+	const goToPreviousPage = useCallback(() => {
+		pendingNextRef.current = false;
+		setPage((current) => Math.max(0, current - 1));
+	}, []);
+	const goToNextPage = useCallback(() => {
+		const nextPageStart = (page + 1) * itemsPerPage;
+		if (mediaItems.length > nextPageStart) setPage(page + 1);
+		else if (hasNext) {
+			pendingNextRef.current = true;
+			channelMediaSearchSource.search();
+		}
+	}, [
+		channelMediaSearchSource,
+		hasNext,
+		itemsPerPage,
+		mediaItems.length,
+		page
+	]);
+	useEffect(() => {
+		if (isLoading) return;
+		if (pendingNextRef.current) {
+			const nextPageStart = (page + 1) * itemsPerPage;
+			if (mediaItems.length > nextPageStart) {
+				pendingNextRef.current = false;
+				setPage((current) => current + 1);
+				return;
+			}
+			if (!hasNext) {
+				pendingNextRef.current = false;
+				return;
+			}
+			channelMediaSearchSource.search();
+			return;
+		}
+		const need = pageStart + itemsPerPage;
+		if (mediaItems.length < need && hasNext) channelMediaSearchSource.search();
+	}, [
+		channelMediaSearchSource,
+		hasNext,
+		isLoading,
+		itemsPerPage,
+		mediaItems.length,
+		page,
+		pageStart
+	]);
+	useEffect(() => {
+		const grid = gridRef.current;
+		if (typeof grid?.scrollTo === "function") grid.scrollTo({ top: 0 });
+		else if (grid) grid.scrollTop = 0;
+	}, [page]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__channel-detail__media-view",
+		children: [
+			/* @__PURE__ */ jsx(SectionNavigatorHeader, {
+				close,
+				title: t("channelDetail.channelMediaView.photosVideos.title", "Photos & videos")
+			}),
+			/* @__PURE__ */ jsx(Prompt.Body, {
+				className: "str-chat__channel-detail__media-view__body",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "str-chat__channel-detail__media-view__grid",
+					ref: gridRef,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "str-chat__channel-detail__media-view__grid__content",
+						children: [
+							pageItems.length > 0 ? /* @__PURE__ */ jsx("div", {
+								className: "str-chat__channel-detail__media-view__grid__items",
+								children: pageItems.map((item, index) => /* @__PURE__ */ jsx(ChannelMediaGridItem, {
+									BaseImage: BaseImage$1,
+									item,
+									onClick: () => openViewer(pageStart + index)
+								}, item.id))
+							}) : hasResultsLoaded ? /* @__PURE__ */ jsx(ChannelMediaEmptyList, {}) : null,
+							/* @__PURE__ */ jsx(ChannelDetailListLoadingIndicator, { searchSource: channelMediaSearchSource }),
+							showPagination && /* @__PURE__ */ jsx(ChannelMediaPagination, {
+								nextDisabled: !canGoNext || isLoading,
+								onNext: goToNextPage,
+								onPrevious: goToPreviousPage,
+								previousDisabled: page === 0
+							})
+						]
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx(Modal, {
+				className: clsx("str-chat__gallery-modal", "str-chat__channel-detail__media-view__viewer"),
+				onClose: closeViewer,
+				open: viewerOpen,
+				children: /* @__PURE__ */ jsx(Gallery$1, {
+					GalleryUI,
+					initialIndex: selectedIndex,
+					items: galleryItems,
+					onRequestClose: closeViewer
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { ChannelMediaView };
+
+//# sourceMappingURL=ChannelMediaView.mjs.map