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

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

@@ -1 +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\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  const onlineStatusText = useChannelHeaderOnlineStatus({ channel });\n  const pinned = !!membership.pinned_at;\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?: { image?: string; name?: string };\n  unset?: ['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  const set: { image?: string; name?: string } = {};\n  if (name !== undefined) set.name = name;\n  if (typeof image === 'string') set.image = image;\n  if (Object.keys(set).length > 0) payload.set = set;\n\n  if (image === null) payload.unset = ['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 ? t('Contact name') : t('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?.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.sendImage(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('Changes saved'),\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('Failed to save changes'),\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('Upload Picture')}\n            </Button>\n            {hasAvatarImage && (\n              <Button\n                appearance='outline'\n                onClick={handleDeleteImage}\n                size='sm'\n                type='button'\n                variant='secondary'\n              >\n                {t('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('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.cid]);\n\n  const EditChannelButton = useMemo(\n    () =>\n      function EditChannelButton() {\n        return (\n          <Button\n            appearance='outline'\n            aria-label={t('Edit chat data')}\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('Edit')}\n          </Button>\n        );\n      },\n    [t],\n  );\n\n  const headerTitle = isEditMode\n    ? resolvedIsDmChannel\n      ? t('Edit contact')\n      : t('Edit group')\n    : resolvedIsDmChannel\n      ? t('Contact info')\n      : t('Group info');\n\n  return (\n    <div className='str-chat__channel-detail__channel-management-view'>\n      <SectionNavigatorHeader\n        close={close}\n        description={isEditMode ? undefined : t('Manage channel')}\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":";;;;;;;;;;;;;;;;;;;;;;;AAsDA,IAAa,6BAA6B,EACxC,cACoC;CACpC,MAAM,EAAE,UAAU,YAAY,yBAAyB;CAEvD,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,YAAY,wBAAwB;CAC5C,MAAM,EAAE,SAAS,kBAAyB,oBAAoB;CAC9D,MAAM,EAAE,cAAc,cAAc,4BAA4B,sBAAsB,EACpF,QACF,CAAC;CACD,MAAM,sBAAsB,YAAY;EACtC;EACA,WAAW,OAAO,MAAM;CAC1B,CAAC;CACD,MAAM,oBAAoB,cAAc;EACtC,IAAI,CAAC,qBAAqB;EAE1B,OAAO,OAAO,OAAO,QAAQ,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,MAChD,WAAW,OAAO,MAAM,MAAM,OAAO,KAAK,OAAO,OAAO,MAAM,EACjE,CAAC,EAAE,MAAM;CACX,GAAG;EAAC;EAAS,OAAO,MAAM;EAAI;CAAmB,CAAC;CAClD,MAAM,WAAW,2BAA2B,EAAE,QAAQ,CAAC;CACvD,MAAM,EAAE,OAAO,iBAAiB,kBAAkB,OAAO;CACzD,MAAM,YAAY,eAAe,iBAAiB;CAClD,MAAM,aAAa,0BAA0B,OAAO;CACpD,MAAM,mBAAmB,6BAA6B,EAAE,QAAQ,CAAC;CACjE,MAAM,SAAS,CAAC,CAAC,WAAW;CAE5B,OACE,qBAAC,OAAO,MAAR;EAAa,WAAU;YAAvB,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IACE,gBAAgB,wBAAwB;IACxC,UAAU;IACV,UAAU,sBAAsB,WAAW,KAAA;IAC3C,MAAK;IACL,UAAU;GACX,CAAA,GACD,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,qBAAC,OAAD;KAAK,WAAU;eAAf;MACG,gBAAgB,oBAAC,QAAD,EAAA,UAAO,aAAmB,CAAA;MAC1C,UAAU,oBAAC,SAAD,CAAU,CAAA;MACnB,uBAAuB,aACxB,CAAC,uBAAuB,eACvB,oBAAC,UAAD,CAAW,CAAA,IACT;KACD;QACJ,oBACC,oBAAC,OAAD;KAAK,WAAU;eACZ;IACE,CAAA,CAEJ;KACF;MAEL,oBAAC,OAAD;GAAK,WAAU;aACZ,QAAQ,KAAK,EAAE,WAAW,WACzB,oBAAC,WAAD,CAAuB,GAAP,IAAO,CACxB;EACE,CAAA,CACM;;AAEjB;AAMA,IAAM,oBAAoB;;;;;;AAY1B,IAAM,6BAA6B,EACjC,OACA,WAIiC;CACjC,MAAM,UAAgC,CAAC;CAEvC,MAAM,MAAyC,CAAC;CAChD,IAAI,SAAS,KAAA,GAAW,IAAI,OAAO;CACnC,IAAI,OAAO,UAAU,UAAU,IAAI,QAAQ;CAC3C,IAAI,OAAO,KAAK,GAAG,CAAC,CAAC,SAAS,GAAG,QAAQ,MAAM;CAE/C,IAAI,UAAU,MAAM,QAAQ,QAAQ,CAAC,OAAO;CAE5C,OAAO,OAAO,KAAK,OAAO,CAAC,CAAC,SAAS,IAAI,UAAU;AACrD;;;;;;AAOA,IAAM,gCAAgC,EACpC,kBACoC;CACpC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,YAAY,wBAAwB;CAC5C,MAAM,EAAE,cAAc,cAAc,4BAA4B,sBAAsB,EACpF,QACF,CAAC;CACD,MAAM,EAAE,oBAAoB,mBAAmB;CAE/C,MAAM,sBAAsB,YAAY;EAAE;EAAS,WAAW,OAAO,MAAM;CAAG,CAAC;CAC/E,MAAM,mBAAmB,2BAA2B,EAAE,QAAQ,CAAC;CAC/D,MAAM,WAAW,sBAAsB,mBAAmB,KAAA;CAC1D,MAAM,YAAY,sBAAsB,EAAE,cAAc,IAAI,EAAE,YAAY;CAI1E,MAAM,CAAC,cAAc,mBAAmB,SAAS,QAAQ,MAAM,QAAQ,EAAE;CACzE,MAAM,CAAC,MAAM,WAAW,SAAS,YAAY;CAE7C,MAAM,CAAC,WAAW,gBAAgB,SAAkC,IAAI;CACxE,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAE9C,MAAM,eAAe,OAAyB,IAAI;CAElD,MAAM,aAAa,qBAAqB,OAAO,YAAY;CAG3D,MAAM,YAAY,cACT,aAAa,IAAI,gBAAgB,UAAU,IAAI,MACtD,CAAC,UAAU,CACb;CAEA,sBACc;EACV,IAAI,WAAW,IAAI,gBAAgB,SAAS;CAC9C,GACA,CAAC,SAAS,CACZ;CAEA,MAAM,kBACJ,cAAc,cAAc,YAAY,KAAA,IAAY;CAEtD,MAAM,cAAc,KAAK,KAAK;CAC9B,MAAM,cAAc,gBAAgB,aAAa,KAAK;CACtD,MAAM,eAAe,cAAc;CACnC,MAAM,aAAc,YAAY,SAAS,KAAK,eAAgB;CAC9D,MAAM,YAAY,YAAY,SAAS,KAAK,CAAC,YAAY;CAEzD,MAAM,uBAAuB,kBAAkB;EAC7C,aAAa,SAAS,MAAM;CAC9B,GAAG,CAAC,CAAC;CAEL,MAAM,mBAAmB,aAAa,UAA+C;EACnF,MAAM,OAAO,MAAM,OAAO,QAAQ;EAClC,IAAI,MAAM,aAAa,IAAI;EAC3B,MAAM,OAAO,QAAQ;CACvB,GAAG,CAAC,CAAC;CAEL,MAAM,oBAAoB,kBAAkB,aAAa,SAAS,GAAG,CAAC,CAAC;CAEvE,MAAM,kBAAkB,YACtB,OAAO,SAAe;EACpB,MAAM,MAAM,cACR,MAAM,YAAY,IAAI,KACrB,MAAM,QAAQ,UAAU,IAAI,EAAA,CAAG;EACpC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,mCAAmC;EAC7D,OAAO;CACT,GACA,CAAC,SAAS,WAAW,CACvB;CAkEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAxEmB,YACnB,OAAO,UAA2C;GAChD,MAAM,eAAe;GACrB,IAAI,CAAC,WAAW;GAEhB,YAAY,IAAI;GAChB,IAAI;IACF,IAAI;IACJ,IAAI,YAAY,QAAQ,MAAM,gBAAgB,UAAU;SACnD,IAAI,cAAc,WAAW,QAAQ;IAE1C,MAAM,UAAU,0BAA0B;KACxC;KACA,MAAM,cAAc,cAAc,KAAA;IACpC,CAAC;IACD,IAAI,SAAS,MAAM,QAAQ,cAAc,OAAO;IAGhD,aAAa,IAAI;IACjB,gBAAgB,WAAW;IAC3B,QAAQ,WAAW;IAEnB,gBAAgB;KACd,UAAU;KACV,SAAS;KACT,UAAU;MACR,QAAQ;MACR,QAAQ;MACR,WAAW;MACX,QAAQ;KACV;KACA,SAAS,EAAE,eAAe;KAC1B,UAAU;IACZ,CAAC;GACH,SAAS,OAAO;IACd,gBAAgB;KACd,SAAS;KACT,OAAO,iBAAiB,QAAQ,QAAQ,KAAA;KACxC,UAAU;MACR,QAAQ;MACR,QAAQ;MACR,WAAW;MACX,QAAQ;KACV;KACA,SAAS,EAAE,wBAAwB;KACnC,UAAU;IACZ,CAAC;GACH,UAAU;IACR,YAAY,KAAK;GACnB;EACF,GACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAWA;EACA,gBAAgB,CAAC,CAAC;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF;AAEA,IAAa,6BAA6B,UAA0C;CAClF,MAAM,EAAE,kBAAkB,yBAAyB;CACnD,MAAM,EAAE,SAAS,kBAAyB,oBAAoB;CAC9D,MAAM,EACJ,WACA,cACA,cACA,yBACA,mBACA,kBACA,sBACA,cACA,gBACA,UACA,MACA,WACA,iBACA,SACA,GACA,gBACE,6BAA6B,KAAK;CAEtC,OACE,qBAAC,QAAD;EACE,WAAU;EACV,UAAU;YAFZ,CAIE,qBAAC,OAAO,MAAR;GAAa,WAAU;aAAvB,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KACE,gBAAgB,wBAAwB;KACxC,UAAU;KACA;KACV,MAAK;KACL,UAAU,eAAe;IAC1B,CAAA,GACD,qBAAC,OAAD;KAAK,WAAU;eAAf;MACE,oBAAC,QAAD;OACE,YAAW;OACX,SAAS;OACT,MAAK;OACL,MAAK;OACL,SAAQ;iBAEP,EAAE,gBAAgB;MACb,CAAA;MACP,kBACC,oBAAC,QAAD;OACE,YAAW;OACX,SAAS;OACT,MAAK;OACL,MAAK;OACL,SAAQ;iBAEP,EAAE,QAAQ;MACL,CAAA;MAEV,oBAAC,SAAD;OACE,QAAO;OACP,eAAA;OACA,WAAU;OACV,UAAU;OACV,KAAK;OACL,UAAU;OACV,MAAK;MACN,CAAA;KACE;MACF;OAEL,oBAAC,WAAD;IACE,cAAY;IACZ,WAAA;IACA,WAAU;IACV,WAAW;IACX,WAAW,UAAU,QAAQ,MAAM,OAAO,KAAK;IAC/C,aAAa;IACb,OAAO;GACR,CAAA,CACU;MAEb,oBAAC,OAAO,QAAR;GAAe,WAAU;aACvB,oBAAC,OAAO,gBAAR,EAAA,UACG,aACC,qBAAC,OAAO,6BAAR;IACE,WAAU;IACV,MAAK;cAFP,CAIE,oBAAC,eAAD,CAAgB,CAAA,GACf,EAAE,MAAM,CACyB;MAEjB,CAAA;EACV,CAAA,CACX;;AAEV;AAEA,IAAa,yBAAyB,EACpC,6BAA6B,mCAC7B,oBAAoB,2BACpB,aACA,oBAAoB,gCACY;CAChC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,YAAY,wBAAwB;CAC5C,MAAM,EAAE,UAAU,gBAAgB;CAClC,MAAM,sBAAsB,YAAY;EACtC;EACA,WAAW,OAAO,MAAM;CAC1B,CAAC;CACD,MAAM,UAAU,wCAAwC,0BAA0B;CAClF,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,iBAAiB,QAAQ,MAAM,kBAAkB,SAAS,gBAAgB;CAGhF,MAAM,aAAa,aAAa;CAEhC,gBAAgB;EACd,aAAa,KAAK;CACpB,GAAG,CAAC,QAAQ,GAAG,CAAC;CAEhB,MAAM,oBAAoB,cAEtB,SAAS,oBAAoB;EAC3B,OACE,oBAAC,QAAD;GACE,YAAW;GACX,cAAY,EAAE,gBAAgB;GAC9B,WAAU;GACV,eAAe;IACb,aAAa,IAAI;GACnB;GACA,MAAK;GACL,SAAQ;aAEP,EAAE,MAAM;EACH,CAAA;CAEZ,GACF,CAAC,CAAC,CACJ;CAEA,MAAM,cAAc,aAChB,sBACE,EAAE,cAAc,IAChB,EAAE,YAAY,IAChB,sBACE,EAAE,cAAc,IAChB,EAAE,YAAY;CAEpB,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,wBAAD;GACS;GACP,aAAa,aAAa,KAAA,IAAY,EAAE,gBAAgB;GACxD,QAAQ,mBAAmB,aAAa,KAAK,IAAI,KAAA;GACjD,OAAO;GACP,iBAAiB,CAAC,cAAc,iBAAiB,oBAAoB,KAAA;EACtE,CAAA,GACA,aACC,oBAAC,mBAAD,EAAgC,YAAc,CAAA,IAE9C,oBAAC,mBAAD,EAA4B,QAAU,CAAA,CAErC;;AAET"}
+{"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

@@ -1,20 +1,20 @@
-import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
 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("ChannelMediaEmptyList");
+	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("No photos or videos")
+				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("Share a photo or video to see it here")
+				children: t("channelDetail.channelMediaEmpty.sharePhotoVideoSee.text", "Share a photo or video to see it here")
 			})]
 		})]
 	});

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

@@ -1 +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\n  const { t } = useTranslationContext('ChannelMediaEmptyList');\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('No photos or videos')}\n        </p>\n        <p className='str-chat__channel-detail__media-view__empty-state__description'>\n          {t('Share a photo or video to see it here')}\n        </p>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;AAEA,IAAa,8BAA8B;CACzC,MAAM,EAAE,cAAc,yBAAyB;CAE/C,MAAM,EAAE,MAAM,sBAAsB,uBAAuB;CAE3D,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,EAAE,qBAAqB;GACvB,CAAA,GACH,oBAAC,KAAD;IAAG,WAAU;cACV,EAAE,uCAAuC;GACzC,CAAA,CACA;IACF;;AAET"}
+{"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

@@ -1,17 +1,17 @@
 import { useComponentContext } from "../../../../context/ComponentContext.mjs";
-import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
-import { useModalContext } from "../../../../context/ModalContext.mjs";
 import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
-import { Button } from "../../../../components/Button/Button.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 { extractDisplayInfo } from "../../../../components/Avatar/utils.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";
@@ -23,14 +23,14 @@ 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 { t } = useTranslationContext("ChannelMediaView");
-	const { Avatar: Avatar$1 = Avatar, extractDisplayInfo: extractDisplayInfo$1 = extractDisplayInfo } = useComponentContext();
 	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("aria/Open video shared by {{ name }}", { name: displayName }) : t("aria/Open image shared by {{ name }}", { name: displayName }),
+		"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",
@@ -60,28 +60,28 @@ var ChannelMediaGridItem = ({ BaseImage, item, onClick }) => {
 	});
 };
 var ChannelMediaPagination = ({ nextDisabled, onNext, onPrevious, previousDisabled }) => {
-	const { t } = useTranslationContext("ChannelMediaView");
 	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("aria/Previous page"),
+			"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("Previous")]
+			children: [/* @__PURE__ */ jsx(IconChevronLeft, {}), t("channelDetail.channelMediaView.previous.text", "Previous")]
 		}), /* @__PURE__ */ jsxs(Button, {
 			appearance: "outline",
-			"aria-label": t("aria/Next page"),
+			"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("Next"), /* @__PURE__ */ jsx(IconChevronRight, {})]
+			children: [t("channelDetail.channelMediaView.next.text", "Next"), /* @__PURE__ */ jsx(IconChevronRight, {})]
 		})]
 	});
 };
@@ -166,7 +166,7 @@ var ChannelMediaView = ({ itemsPerPage = DEFAULT_CHANNEL_MEDIA_ITEMS_PER_PAGE })
 		children: [
 			/* @__PURE__ */ jsx(SectionNavigatorHeader, {
 				close,
-				title: t("Photos & videos")
+				title: t("channelDetail.channelMediaView.photosVideos.title", "Photos & videos")
 			}),
 			/* @__PURE__ */ jsx(Prompt.Body, {
 				className: "str-chat__channel-detail__media-view__body",

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

@@ -1 +1 @@
-{"version":3,"file":"ChannelMediaView.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport {\n  useComponentContext,\n  useComponentContextIcons,\n  useModalContext,\n  useTranslationContext,\n} from '../../../../context';\nimport { formatTime } from '../../../../components/AudioPlayback';\nimport { Avatar as DefaultAvatar } from '../../../../components/Avatar';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../../../../components/Avatar/utils';\nimport { Badge } from '../../../../components/Badge';\nimport {\n  type BaseImageProps,\n  BaseImage as DefaultBaseImage,\n} from '../../../../components/BaseImage';\nimport { Prompt } from '../../../../components/Dialog';\nimport { Gallery as DefaultGallery, GalleryUI } from '../../../../components/Gallery';\nimport { GlobalModal } from '../../../../components/Modal';\nimport {\n  SectionNavigatorHeader,\n  type SectionNavigatorSectionContentProps,\n} from '../../SectionNavigator';\nimport { ChannelDetailListLoadingIndicator } from '../../ChannelDetailListLoadingIndicator';\nimport { getUserDisplayName } from '../ChannelMembersView/ChannelMembersView.utils';\nimport { ChannelMediaEmptyList } from './ChannelMediaEmptyList';\nimport type { ChannelMediaItem } from './ChannelMediaView.utils';\nimport { useChannelMediaSearch } from './useChannelMediaSearch';\nimport { Button } from '../../../../components';\n\n// Default items rendered per grid page (5 columns x 6 rows). Overridable via the\n// `itemsPerPage` prop. Intentionally decoupled from the search source's message\n// page size: a message carries a variable number of attachments, so message\n// pages and attachment pages don't align.\nconst DEFAULT_CHANNEL_MEDIA_ITEMS_PER_PAGE = 30;\n\ntype ChannelMediaGridItemProps = {\n  BaseImage: React.ComponentType<BaseImageProps>;\n  item: ChannelMediaItem;\n  onClick: () => void;\n};\n\nconst ChannelMediaGridItem = ({\n  BaseImage,\n  item,\n  onClick,\n}: ChannelMediaGridItemProps) => {\n  const { t } = useTranslationContext('ChannelMediaView');\n  const { Avatar = DefaultAvatar, extractDisplayInfo = defaultExtractDisplayInfo } =\n    useComponentContext();\n  const { IconImage, IconVideoFill } = useComponentContextIcons();\n  const displayName = getUserDisplayName(item.user);\n  const mediaSrc =\n    item.type === 'video'\n      ? item.galleryItem.videoThumbnailUrl\n      : item.galleryItem.imageUrl;\n  const durationLabel = formatTime(item.durationSeconds, 'floor');\n  const label =\n    item.type === 'video'\n      ? t('aria/Open video shared by {{ name }}', { name: displayName })\n      : t('aria/Open image shared by {{ name }}', { name: displayName });\n\n  return (\n    <button\n      aria-label={label}\n      className='str-chat__channel-detail__media-view__item'\n      onClick={onClick}\n      type='button'\n    >\n      {mediaSrc ? (\n        <BaseImage\n          alt={item.galleryItem.alt ?? item.galleryItem.title ?? ''}\n          className='str-chat__channel-detail__media-view__item__media'\n          src={mediaSrc}\n        />\n      ) : (\n        <div\n          aria-hidden='true'\n          className='str-chat__channel-detail__media-view__item__placeholder'\n        >\n          <IconImage />\n        </div>\n      )}\n      <Avatar\n        {...extractDisplayInfo({ user: item.user })}\n        aria-hidden='true'\n        className='str-chat__channel-detail__media-view__item__avatar'\n        size='sm'\n      />\n      {item.type === 'video' && (\n        <Badge\n          className='str-chat__channel-detail__media-view__item__duration'\n          size='sm'\n          variant='inverse'\n        >\n          <IconVideoFill className='str-chat__channel-detail__media-view__item__duration-icon' />\n          {durationLabel ? <span>{durationLabel}</span> : null}\n        </Badge>\n      )}\n    </button>\n  );\n};\n\ntype ChannelMediaPaginationProps = {\n  nextDisabled: boolean;\n  onNext: () => void;\n  onPrevious: () => void;\n  previousDisabled: boolean;\n};\n\nconst ChannelMediaPagination = ({\n  nextDisabled,\n  onNext,\n  onPrevious,\n  previousDisabled,\n}: ChannelMediaPaginationProps) => {\n  const { t } = useTranslationContext('ChannelMediaView');\n  const { IconChevronLeft, IconChevronRight } = useComponentContextIcons();\n\n  return (\n    <div className='str-chat__channel-detail__media-view__pagination'>\n      <Button\n        appearance='outline'\n        aria-label={t('aria/Previous page')}\n        className='str-chat__channel-detail__media-view__pagination__button str-chat__channel-detail__media-view__pagination__button--previous'\n        disabled={previousDisabled}\n        onClick={onPrevious}\n        size='md'\n        variant='secondary'\n      >\n        <IconChevronLeft />\n        {t('Previous')}\n      </Button>\n      <Button\n        appearance='outline'\n        aria-label={t('aria/Next page')}\n        className='str-chat__channel-detail__media-view__pagination__button str-chat__channel-detail__media-view__pagination__button--next'\n        disabled={nextDisabled}\n        onClick={onNext}\n        size='md'\n        variant='secondary'\n      >\n        {t('Next')}\n        <IconChevronRight />\n      </Button>\n    </div>\n  );\n};\n\nexport type ChannelMediaViewProps = SectionNavigatorSectionContentProps & {\n  /** Number of media items rendered per grid page. Defaults to 30. */\n  itemsPerPage?: number;\n};\n\nexport const ChannelMediaView: React.ComponentType<ChannelMediaViewProps> = ({\n  itemsPerPage = DEFAULT_CHANNEL_MEDIA_ITEMS_PER_PAGE,\n}) => {\n  const { t } = useTranslationContext();\n  const { close } = useModalContext();\n  const {\n    BaseImage = DefaultBaseImage,\n    Gallery = DefaultGallery,\n    Modal = GlobalModal,\n  } = useComponentContext();\n  const { channelMediaSearchSource, hasNext, hasResultsLoaded, isLoading, mediaItems } =\n    useChannelMediaSearch();\n\n  const [viewerOpen, setViewerOpen] = useState(false);\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  const [page, setPage] = useState(0);\n  const gridRef = useRef<HTMLDivElement>(null);\n  // Set when \"Next\" reached a page that isn't loaded yet; the fill effect below\n  // advances to it once the fetched attachments land, keeping fetches triggered\n  // only by the button (or the initial mount load).\n  const pendingNextRef = useRef(false);\n\n  const galleryItems = useMemo(\n    () => mediaItems.map((item) => item.galleryItem),\n    [mediaItems],\n  );\n\n  const pageStart = page * itemsPerPage;\n  const pageItems = useMemo(\n    () => mediaItems.slice(pageStart, pageStart + itemsPerPage),\n    [mediaItems, itemsPerPage, pageStart],\n  );\n\n  // More items already loaded beyond this page, or the source can fetch more.\n  const canGoNext = mediaItems.length > pageStart + itemsPerPage || hasNext;\n  const showPagination =\n    mediaItems.length > itemsPerPage || (mediaItems.length > 0 && hasNext);\n\n  const openViewer = useCallback((index: number) => {\n    setSelectedIndex(index);\n    setViewerOpen(true);\n  }, []);\n\n  const closeViewer = useCallback(() => {\n    setViewerOpen(false);\n  }, []);\n\n  const goToPreviousPage = useCallback(() => {\n    pendingNextRef.current = false;\n    setPage((current) => Math.max(0, current - 1));\n  }, []);\n\n  const goToNextPage = useCallback(() => {\n    const nextPageStart = (page + 1) * itemsPerPage;\n    if (mediaItems.length > nextPageStart) {\n      // The next page is already backed by loaded attachments — advance now.\n      setPage(page + 1);\n    } else if (hasNext) {\n      // The next page isn't loaded yet. Request more and let the fill effect\n      // advance once enough attachments arrive. Only a ref changes here (no\n      // re-render), so the fetch fires exactly once per click.\n      pendingNextRef.current = true;\n      void channelMediaSearchSource.search();\n    }\n  }, [channelMediaSearchSource, hasNext, itemsPerPage, mediaItems.length, page]);\n\n  // Forward-fill loop. Because a message yields a variable number of\n  // attachments, one fetch may not fill a grid page (and the very first page\n  // can arrive short). Keep pulling message pages until the visible page is\n  // full or the channel is exhausted; nothing is ever discarded, so paging to\n  // the end always reveals every attachment. Also resolves a pending \"Next\" by\n  // advancing once its target page has data.\n  useEffect(() => {\n    if (isLoading) return;\n\n    if (pendingNextRef.current) {\n      const nextPageStart = (page + 1) * itemsPerPage;\n      if (mediaItems.length > nextPageStart) {\n        pendingNextRef.current = false;\n        setPage((current) => current + 1);\n        return;\n      }\n      if (!hasNext) {\n        pendingNextRef.current = false;\n        return;\n      }\n      void channelMediaSearchSource.search();\n      return;\n    }\n\n    // Top up the visible page (covers the first page on mount).\n    const need = pageStart + itemsPerPage;\n    if (mediaItems.length < need && hasNext) {\n      void channelMediaSearchSource.search();\n    }\n  }, [\n    channelMediaSearchSource,\n    hasNext,\n    isLoading,\n    itemsPerPage,\n    mediaItems.length,\n    page,\n    pageStart,\n  ]);\n\n  // Each page replaces the previous one, so reset the grid scroll on change.\n  useEffect(() => {\n    const grid = gridRef.current;\n    if (typeof grid?.scrollTo === 'function') {\n      grid.scrollTo({ top: 0 });\n    } else if (grid) {\n      grid.scrollTop = 0;\n    }\n  }, [page]);\n\n  return (\n    <div className='str-chat__channel-detail__media-view'>\n      <SectionNavigatorHeader close={close} title={t('Photos & videos')} />\n      <Prompt.Body className='str-chat__channel-detail__media-view__body'>\n        <div className='str-chat__channel-detail__media-view__grid' ref={gridRef}>\n          <div className='str-chat__channel-detail__media-view__grid__content'>\n            {pageItems.length > 0 ? (\n              <div className='str-chat__channel-detail__media-view__grid__items'>\n                {pageItems.map((item, index) => (\n                  <ChannelMediaGridItem\n                    BaseImage={BaseImage}\n                    item={item}\n                    key={item.id}\n                    onClick={() => openViewer(pageStart + index)}\n                  />\n                ))}\n              </div>\n            ) : hasResultsLoaded ? (\n              <ChannelMediaEmptyList />\n            ) : null}\n            <ChannelDetailListLoadingIndicator searchSource={channelMediaSearchSource} />\n            {showPagination && (\n              <ChannelMediaPagination\n                nextDisabled={!canGoNext || isLoading}\n                onNext={goToNextPage}\n                onPrevious={goToPreviousPage}\n                previousDisabled={page === 0}\n              />\n            )}\n          </div>\n        </div>\n      </Prompt.Body>\n      <Modal\n        className={clsx(\n          'str-chat__gallery-modal',\n          'str-chat__channel-detail__media-view__viewer',\n        )}\n        onClose={closeViewer}\n        open={viewerOpen}\n      >\n        <Gallery\n          GalleryUI={GalleryUI}\n          initialIndex={selectedIndex}\n          items={galleryItems}\n          onRequestClose={closeViewer}\n        />\n      </Modal>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ChannelMediaView.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport {\n  useComponentContext,\n  useComponentContextIcons,\n  useModalContext,\n  useTranslationContext,\n} from '../../../../context';\nimport { formatTime } from '../../../../components/AudioPlayback';\nimport { Avatar as DefaultAvatar } from '../../../../components/Avatar';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../../../../components/Avatar/utils';\nimport { Badge } from '../../../../components/Badge';\nimport {\n  type BaseImageProps,\n  BaseImage as DefaultBaseImage,\n} from '../../../../components/BaseImage';\nimport { Prompt } from '../../../../components/Dialog';\nimport { Gallery as DefaultGallery, GalleryUI } from '../../../../components/Gallery';\nimport { GlobalModal } from '../../../../components/Modal';\nimport {\n  SectionNavigatorHeader,\n  type SectionNavigatorSectionContentProps,\n} from '../../SectionNavigator';\nimport { ChannelDetailListLoadingIndicator } from '../../ChannelDetailListLoadingIndicator';\nimport { getUserDisplayName } from '../ChannelMembersView/ChannelMembersView.utils';\nimport { ChannelMediaEmptyList } from './ChannelMediaEmptyList';\nimport type { ChannelMediaItem } from './ChannelMediaView.utils';\nimport { useChannelMediaSearch } from './useChannelMediaSearch';\nimport { Button } from '../../../../components';\n\n// Default items rendered per grid page (5 columns x 6 rows). Overridable via the\n// `itemsPerPage` prop. Intentionally decoupled from the search source's message\n// page size: a message carries a variable number of attachments, so message\n// pages and attachment pages don't align.\nconst DEFAULT_CHANNEL_MEDIA_ITEMS_PER_PAGE = 30;\n\ntype ChannelMediaGridItemProps = {\n  BaseImage: React.ComponentType<BaseImageProps>;\n  item: ChannelMediaItem;\n  onClick: () => void;\n};\n\nconst ChannelMediaGridItem = ({\n  BaseImage,\n  item,\n  onClick,\n}: ChannelMediaGridItemProps) => {\n  const { IconImage, IconVideoFill } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const { Avatar = DefaultAvatar, extractDisplayInfo = defaultExtractDisplayInfo } =\n    useComponentContext();\n  const displayName = getUserDisplayName(item.user);\n  const mediaSrc =\n    item.type === 'video'\n      ? item.galleryItem.videoThumbnailUrl\n      : item.galleryItem.imageUrl;\n  const durationLabel = formatTime(item.durationSeconds, 'floor');\n  const label =\n    item.type === 'video'\n      ? t(\n          'channelDetail.channelMediaView.openVideoShared.ariaLabel',\n          'Open video shared by {{ name }}',\n          { name: displayName },\n        )\n      : t(\n          'channelDetail.channelMediaView.openImageShared.ariaLabel',\n          'Open image shared by {{ name }}',\n          { name: displayName },\n        );\n\n  return (\n    <button\n      aria-label={label}\n      className='str-chat__channel-detail__media-view__item'\n      onClick={onClick}\n      type='button'\n    >\n      {mediaSrc ? (\n        <BaseImage\n          alt={item.galleryItem.alt ?? item.galleryItem.title ?? ''}\n          className='str-chat__channel-detail__media-view__item__media'\n          src={mediaSrc}\n        />\n      ) : (\n        <div\n          aria-hidden='true'\n          className='str-chat__channel-detail__media-view__item__placeholder'\n        >\n          <IconImage />\n        </div>\n      )}\n      <Avatar\n        {...extractDisplayInfo({ user: item.user })}\n        aria-hidden='true'\n        className='str-chat__channel-detail__media-view__item__avatar'\n        size='sm'\n      />\n      {item.type === 'video' && (\n        <Badge\n          className='str-chat__channel-detail__media-view__item__duration'\n          size='sm'\n          variant='inverse'\n        >\n          <IconVideoFill className='str-chat__channel-detail__media-view__item__duration-icon' />\n          {durationLabel ? <span>{durationLabel}</span> : null}\n        </Badge>\n      )}\n    </button>\n  );\n};\n\ntype ChannelMediaPaginationProps = {\n  nextDisabled: boolean;\n  onNext: () => void;\n  onPrevious: () => void;\n  previousDisabled: boolean;\n};\n\nconst ChannelMediaPagination = ({\n  nextDisabled,\n  onNext,\n  onPrevious,\n  previousDisabled,\n}: ChannelMediaPaginationProps) => {\n  const { IconChevronLeft, IconChevronRight } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n\n  return (\n    <div className='str-chat__channel-detail__media-view__pagination'>\n      <Button\n        appearance='outline'\n        aria-label={t(\n          'channelDetail.channelMediaView.previousPage.ariaLabel',\n          'Previous page',\n        )}\n        className='str-chat__channel-detail__media-view__pagination__button str-chat__channel-detail__media-view__pagination__button--previous'\n        disabled={previousDisabled}\n        onClick={onPrevious}\n        size='md'\n        variant='secondary'\n      >\n        <IconChevronLeft />\n        {t('channelDetail.channelMediaView.previous.text', 'Previous')}\n      </Button>\n      <Button\n        appearance='outline'\n        aria-label={t('channelDetail.channelMediaView.nextPage.ariaLabel', 'Next page')}\n        className='str-chat__channel-detail__media-view__pagination__button str-chat__channel-detail__media-view__pagination__button--next'\n        disabled={nextDisabled}\n        onClick={onNext}\n        size='md'\n        variant='secondary'\n      >\n        {t('channelDetail.channelMediaView.next.text', 'Next')}\n        <IconChevronRight />\n      </Button>\n    </div>\n  );\n};\n\nexport type ChannelMediaViewProps = SectionNavigatorSectionContentProps & {\n  /** Number of media items rendered per grid page. Defaults to 30. */\n  itemsPerPage?: number;\n};\n\nexport const ChannelMediaView: React.ComponentType<ChannelMediaViewProps> = ({\n  itemsPerPage = DEFAULT_CHANNEL_MEDIA_ITEMS_PER_PAGE,\n}) => {\n  const { t } = useTranslationContext();\n  const { close } = useModalContext();\n  const {\n    BaseImage = DefaultBaseImage,\n    Gallery = DefaultGallery,\n    Modal = GlobalModal,\n  } = useComponentContext();\n  const { channelMediaSearchSource, hasNext, hasResultsLoaded, isLoading, mediaItems } =\n    useChannelMediaSearch();\n\n  const [viewerOpen, setViewerOpen] = useState(false);\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  const [page, setPage] = useState(0);\n  const gridRef = useRef<HTMLDivElement>(null);\n  // Set when \"Next\" reached a page that isn't loaded yet; the fill effect below\n  // advances to it once the fetched attachments land, keeping fetches triggered\n  // only by the button (or the initial mount load).\n  const pendingNextRef = useRef(false);\n\n  const galleryItems = useMemo(\n    () => mediaItems.map((item) => item.galleryItem),\n    [mediaItems],\n  );\n\n  const pageStart = page * itemsPerPage;\n  const pageItems = useMemo(\n    () => mediaItems.slice(pageStart, pageStart + itemsPerPage),\n    [mediaItems, itemsPerPage, pageStart],\n  );\n\n  // More items already loaded beyond this page, or the source can fetch more.\n  const canGoNext = mediaItems.length > pageStart + itemsPerPage || hasNext;\n  const showPagination =\n    mediaItems.length > itemsPerPage || (mediaItems.length > 0 && hasNext);\n\n  const openViewer = useCallback((index: number) => {\n    setSelectedIndex(index);\n    setViewerOpen(true);\n  }, []);\n\n  const closeViewer = useCallback(() => {\n    setViewerOpen(false);\n  }, []);\n\n  const goToPreviousPage = useCallback(() => {\n    pendingNextRef.current = false;\n    setPage((current) => Math.max(0, current - 1));\n  }, []);\n\n  const goToNextPage = useCallback(() => {\n    const nextPageStart = (page + 1) * itemsPerPage;\n    if (mediaItems.length > nextPageStart) {\n      // The next page is already backed by loaded attachments — advance now.\n      setPage(page + 1);\n    } else if (hasNext) {\n      // The next page isn't loaded yet. Request more and let the fill effect\n      // advance once enough attachments arrive. Only a ref changes here (no\n      // re-render), so the fetch fires exactly once per click.\n      pendingNextRef.current = true;\n      void channelMediaSearchSource.search();\n    }\n  }, [channelMediaSearchSource, hasNext, itemsPerPage, mediaItems.length, page]);\n\n  // Forward-fill loop. Because a message yields a variable number of\n  // attachments, one fetch may not fill a grid page (and the very first page\n  // can arrive short). Keep pulling message pages until the visible page is\n  // full or the channel is exhausted; nothing is ever discarded, so paging to\n  // the end always reveals every attachment. Also resolves a pending \"Next\" by\n  // advancing once its target page has data.\n  useEffect(() => {\n    if (isLoading) return;\n\n    if (pendingNextRef.current) {\n      const nextPageStart = (page + 1) * itemsPerPage;\n      if (mediaItems.length > nextPageStart) {\n        pendingNextRef.current = false;\n        setPage((current) => current + 1);\n        return;\n      }\n      if (!hasNext) {\n        pendingNextRef.current = false;\n        return;\n      }\n      void channelMediaSearchSource.search();\n      return;\n    }\n\n    // Top up the visible page (covers the first page on mount).\n    const need = pageStart + itemsPerPage;\n    if (mediaItems.length < need && hasNext) {\n      void channelMediaSearchSource.search();\n    }\n  }, [\n    channelMediaSearchSource,\n    hasNext,\n    isLoading,\n    itemsPerPage,\n    mediaItems.length,\n    page,\n    pageStart,\n  ]);\n\n  // Each page replaces the previous one, so reset the grid scroll on change.\n  useEffect(() => {\n    const grid = gridRef.current;\n    if (typeof grid?.scrollTo === 'function') {\n      grid.scrollTo({ top: 0 });\n    } else if (grid) {\n      grid.scrollTop = 0;\n    }\n  }, [page]);\n\n  return (\n    <div className='str-chat__channel-detail__media-view'>\n      <SectionNavigatorHeader\n        close={close}\n        title={t('channelDetail.channelMediaView.photosVideos.title', 'Photos & videos')}\n      />\n      <Prompt.Body className='str-chat__channel-detail__media-view__body'>\n        <div className='str-chat__channel-detail__media-view__grid' ref={gridRef}>\n          <div className='str-chat__channel-detail__media-view__grid__content'>\n            {pageItems.length > 0 ? (\n              <div className='str-chat__channel-detail__media-view__grid__items'>\n                {pageItems.map((item, index) => (\n                  <ChannelMediaGridItem\n                    BaseImage={BaseImage}\n                    item={item}\n                    key={item.id}\n                    onClick={() => openViewer(pageStart + index)}\n                  />\n                ))}\n              </div>\n            ) : hasResultsLoaded ? (\n              <ChannelMediaEmptyList />\n            ) : null}\n            <ChannelDetailListLoadingIndicator searchSource={channelMediaSearchSource} />\n            {showPagination && (\n              <ChannelMediaPagination\n                nextDisabled={!canGoNext || isLoading}\n                onNext={goToNextPage}\n                onPrevious={goToPreviousPage}\n                previousDisabled={page === 0}\n              />\n            )}\n          </div>\n        </div>\n      </Prompt.Body>\n      <Modal\n        className={clsx(\n          'str-chat__gallery-modal',\n          'str-chat__channel-detail__media-view__viewer',\n        )}\n        onClose={closeViewer}\n        open={viewerOpen}\n      >\n        <Gallery\n          GalleryUI={GalleryUI}\n          initialIndex={selectedIndex}\n          items={galleryItems}\n          onRequestClose={closeViewer}\n        />\n      </Modal>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { toBaseImageDescriptors } from "../../../../components/BaseImage/toBaseImageDescriptors.mjs";
-import { isImageAttachment, isVideoAttachment } from "stream-chat";
+import { convertTimestampToDate, isImageAttachment, isVideoAttachment } from "stream-chat";
 //#region src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.utils.ts
 /** Attachment types rendered by the media gallery. */
 var MEDIA_ATTACHMENT_TYPES = ["image", "video"];
@@ -20,9 +20,14 @@ var toChannelMediaItems = (messages) => {
 			const descriptor = toBaseImageDescriptors(attachment);
 			if (!descriptor) return;
 			if (!(type === "video" ? Boolean(descriptor.videoThumbnailUrl || descriptor.videoUrl) : Boolean(descriptor.imageUrl))) return;
+			const attachmentDuration = attachment.custom?.duration;
 			items.push({
-				durationSeconds: typeof attachment.duration === "number" ? attachment.duration : void 0,
-				galleryItem: descriptor,
+				durationSeconds: typeof attachmentDuration === "number" ? attachmentDuration : void 0,
+				galleryItem: {
+					...descriptor,
+					createdAt: convertTimestampToDate(message.created_at),
+					user: message.user ?? void 0
+				},
 				id: `${message.id}-${index}`,
 				type,
 				user: message.user ?? void 0

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

@@ -1 +1 @@
-{"version":3,"file":"ChannelMediaView.utils.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.utils.ts"],"sourcesContent":["import {\n  type Attachment,\n  isImageAttachment,\n  isVideoAttachment,\n  type LocalMessage,\n  type MessageResponse,\n  type UserResponse,\n} from 'stream-chat';\n\nimport { toBaseImageDescriptors } from '../../../../components/BaseImage';\nimport type { GalleryItem } from '../../../../components/Gallery';\n\n/** Attachment types rendered by the media gallery. */\nexport const MEDIA_ATTACHMENT_TYPES = ['image', 'video'] as const;\n\nexport type ChannelMediaItemType = (typeof MEDIA_ATTACHMENT_TYPES)[number];\n\nexport type ChannelMediaItem = {\n  /** Item to hand over to the full-screen `Gallery` viewer. */\n  galleryItem: GalleryItem;\n  /** Stable identity (messageId + attachment index). */\n  id: string;\n  type: ChannelMediaItemType;\n  /** Video duration in seconds, when known. */\n  durationSeconds?: number;\n  /** User who shared the media. */\n  user?: UserResponse;\n};\n\nconst getMediaAttachmentType = (\n  attachment: Attachment,\n): ChannelMediaItemType | undefined => {\n  if (isVideoAttachment(attachment)) return 'video';\n  if (isImageAttachment(attachment)) return 'image';\n  return undefined;\n};\n\n/**\n * Flattens messages into one renderable media item per image/video attachment,\n * carrying over the gallery descriptor, posting user, and video duration.\n */\nexport const toChannelMediaItems = (\n  messages: Array<MessageResponse | LocalMessage>,\n): ChannelMediaItem[] => {\n  const items: ChannelMediaItem[] = [];\n\n  messages.forEach((message) => {\n    message.attachments?.forEach((attachment, index) => {\n      const type = getMediaAttachmentType(attachment);\n      if (!type) return;\n\n      const descriptor = toBaseImageDescriptors(attachment);\n      if (!descriptor) return;\n\n      const hasRenderableSource =\n        type === 'video'\n          ? Boolean(descriptor.videoThumbnailUrl || descriptor.videoUrl)\n          : Boolean(descriptor.imageUrl);\n      if (!hasRenderableSource) return;\n\n      items.push({\n        durationSeconds:\n          typeof attachment.duration === 'number' ? attachment.duration : undefined,\n        galleryItem: descriptor,\n        id: `${message.id}-${index}`,\n        type,\n        user: message.user ?? undefined,\n      });\n    });\n  });\n\n  return items;\n};\n"],"mappings":";;;;AAaA,IAAa,yBAAyB,CAAC,SAAS,OAAO;AAgBvD,IAAM,0BACJ,eACqC;CACrC,IAAI,kBAAkB,UAAU,GAAG,OAAO;CAC1C,IAAI,kBAAkB,UAAU,GAAG,OAAO;AAE5C;;;;;AAMA,IAAa,uBACX,aACuB;CACvB,MAAM,QAA4B,CAAC;CAEnC,SAAS,SAAS,YAAY;EAC5B,QAAQ,aAAa,SAAS,YAAY,UAAU;GAClD,MAAM,OAAO,uBAAuB,UAAU;GAC9C,IAAI,CAAC,MAAM;GAEX,MAAM,aAAa,uBAAuB,UAAU;GACpD,IAAI,CAAC,YAAY;GAMjB,IAAI,EAHF,SAAS,UACL,QAAQ,WAAW,qBAAqB,WAAW,QAAQ,IAC3D,QAAQ,WAAW,QAAQ,IACP;GAE1B,MAAM,KAAK;IACT,iBACE,OAAO,WAAW,aAAa,WAAW,WAAW,WAAW,KAAA;IAClE,aAAa;IACb,IAAI,GAAG,QAAQ,GAAG,GAAG;IACrB;IACA,MAAM,QAAQ,QAAQ,KAAA;GACxB,CAAC;EACH,CAAC;CACH,CAAC;CAED,OAAO;AACT"}
+{"version":3,"file":"ChannelMediaView.utils.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.utils.ts"],"sourcesContent":["import {\n  type Attachment,\n  convertTimestampToDate,\n  isImageAttachment,\n  isVideoAttachment,\n  type LocalMessage,\n  type MessageResponse,\n  type UserResponse,\n  type VoiceRecordingAttachment,\n} from 'stream-chat';\n\nimport { toBaseImageDescriptors } from '../../../../components/BaseImage';\nimport type { GalleryItem } from '../../../../components/Gallery';\n\n/** Attachment types rendered by the media gallery. */\nexport const MEDIA_ATTACHMENT_TYPES = ['image', 'video'] as const;\n\nexport type ChannelMediaItemType = (typeof MEDIA_ATTACHMENT_TYPES)[number];\n\nexport type ChannelMediaItem = {\n  /** Item to hand over to the full-screen `Gallery` viewer. */\n  galleryItem: GalleryItem;\n  /** Stable identity (messageId + attachment index). */\n  id: string;\n  type: ChannelMediaItemType;\n  /** Video duration in seconds, when known. */\n  durationSeconds?: number;\n  /** User who shared the media. */\n  user?: UserResponse;\n};\n\nconst getMediaAttachmentType = (\n  attachment: Attachment,\n): ChannelMediaItemType | undefined => {\n  if (isVideoAttachment(attachment)) return 'video';\n  if (isImageAttachment(attachment)) return 'image';\n  return undefined;\n};\n\n/**\n * Flattens messages into one renderable media item per image/video attachment,\n * carrying over the gallery descriptor, posting user, and video duration.\n */\nexport const toChannelMediaItems = (\n  messages: Array<MessageResponse | LocalMessage>,\n): ChannelMediaItem[] => {\n  const items: ChannelMediaItem[] = [];\n\n  messages.forEach((message) => {\n    message.attachments?.forEach((attachment, index) => {\n      const type = getMediaAttachmentType(attachment);\n      if (!type) return;\n\n      const descriptor = toBaseImageDescriptors(attachment);\n      if (!descriptor) return;\n\n      const hasRenderableSource =\n        type === 'video'\n          ? Boolean(descriptor.videoThumbnailUrl || descriptor.videoUrl)\n          : Boolean(descriptor.imageUrl);\n      if (!hasRenderableSource) return;\n\n      const attachmentDuration = (attachment as VoiceRecordingAttachment).custom\n        ?.duration;\n\n      items.push({\n        durationSeconds:\n          typeof attachmentDuration === 'number' ? attachmentDuration : undefined,\n        galleryItem: {\n          ...descriptor,\n          // the gallery header reads sender and timestamp off the item\n          createdAt: convertTimestampToDate(message.created_at),\n          user: message.user ?? undefined,\n        },\n        id: `${message.id}-${index}`,\n        type,\n        user: message.user ?? undefined,\n      });\n    });\n  });\n\n  return items;\n};\n"],"mappings":";;;;AAeA,IAAa,yBAAyB,CAAC,SAAS,OAAO;AAgBvD,IAAM,0BACJ,eACqC;CACrC,IAAI,kBAAkB,UAAU,GAAG,OAAO;CAC1C,IAAI,kBAAkB,UAAU,GAAG,OAAO;AAE5C;;;;;AAMA,IAAa,uBACX,aACuB;CACvB,MAAM,QAA4B,CAAC;CAEnC,SAAS,SAAS,YAAY;EAC5B,QAAQ,aAAa,SAAS,YAAY,UAAU;GAClD,MAAM,OAAO,uBAAuB,UAAU;GAC9C,IAAI,CAAC,MAAM;GAEX,MAAM,aAAa,uBAAuB,UAAU;GACpD,IAAI,CAAC,YAAY;GAMjB,IAAI,EAHF,SAAS,UACL,QAAQ,WAAW,qBAAqB,WAAW,QAAQ,IAC3D,QAAQ,WAAW,QAAQ,IACP;GAE1B,MAAM,qBAAsB,WAAwC,QAChE;GAEJ,MAAM,KAAK;IACT,iBACE,OAAO,uBAAuB,WAAW,qBAAqB,KAAA;IAChE,aAAa;KACX,GAAG;KAEH,WAAW,uBAAuB,QAAQ,UAAU;KACpD,MAAM,QAAQ,QAAQ,KAAA;IACxB;IACA,IAAI,GAAG,QAAQ,GAAG,GAAG;IACrB;IACA,MAAM,QAAQ,QAAQ,KAAA;GACxB,CAAC;EACH,CAAC;CACH,CAAC;CAED,OAAO;AACT"}

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

@@ -1,5 +1,5 @@
-import { useChatContext } from "../../../../context/ChatContext.mjs";
 import { useStateStore } from "../../../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../../../context/ChatContext.mjs";
 import { useChannelDetailContext } from "../../ChannelDetailContext.mjs";
 import { MEDIA_ATTACHMENT_TYPES, toChannelMediaItems } from "./ChannelMediaView.utils.mjs";
 import { useEffect, useMemo } from "react";