Handle 'voiceRecording' attachment type as audio

[tomvalorsa]

Motivation Handle 'voiceRecording' attachments in the same way as existing 'audio' attachments.

We have a web app and an iOS app. The iOS SDK added functionality to allow users to record and play voice notes. stream-chat-react does not currently have this functionality as far as I'm aware, and when I recently contacted support it seems that it's not a high priority task.

Proposed solution Given that full voice note support might not be a priority in the short/medium-term, it would be useful for users to at least be able to listen to voice notes they have received. Using the audio attachment UI for voice notes could be a nice compromise. A quick look in the code suggests that adjusting isAudioAttachment to also consider attachments of type 'voiceRecording' as audio attachments could solve this problem (caveat: I don't have a great deal of familiarity with the codebase and am likely missing context/complexity around this feature, so this is more of an idea to get the ball rolling).

Acceptance Criteria

• [ ] Voice recordings are playable audio attachments, rather than downloadable files.
• [ ] Any related tests are updated/extended.

[tomvalorsa]

For clarity (and for anyone else reading this who needs something similar) I just got a basic/hacky version of this working using a specialised version of the Attachment component which I then passed to Channel as a prop. This is basically what I'm referring to above:

import {
  Attachment,
  AttachmentProps,
  Audio,
  FileAttachment,
  FileAttachmentProps,
} from 'stream-chat-react'

const CustomFile = (props: FileAttachmentProps): JSX.Element => {
  if (props.attachment.type === 'voiceRecording') {
    return <Audio og={props.attachment} />
  }

  return <FileAttachment {...props} />
}

const SpecialisedAttachment = (props: AttachmentProps): JSX.Element => (
  <Attachment File={CustomFile} {...props} />
)

[arnautov-anton]

Hey, @tomvalorsa! Thank you for submitting this feature request - we actually have this one in the pipeline (see draft PR) but as our support engineers mentioned this currently isn't being prioritised and thus the development was paused - so as this is already being developed we won't be producing any other simplified versions. In the meantime the best approach would be to use custom solution like the one you posted. Thank you for your understanding. Follow the aforementioned PR for further updates.

[MartinCupela]

The feature has been added with [email protected].