RocketChat / RocketChat/Rocket.Chat

Voice message button checks for audio/mp3, but the recorder produces audio/mpeg

Open Beginner friendly
#42,003 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

type: bug
Dominant language
TypeScript
Stars
46.1k
Forks
13.9k
Avg merge
3d 3h
Merged PRs (30d)
130

Description

Description:

The mic button decides whether to enable itself by checking the upload whitelist/blacklist for
audio/mp3. Voice messages are actually recorded and uploaded as audio/mpeg, so the two
never match.

Looks like leftover from #18426, which fixed the encoder to emit audio/mpeg back in 3.5.1
and even migrated existing uploads in the DB (v202). The composer check never got updated:

// useAudioMessageAction.ts:27
!fileUploadMediaTypeBlackList?.match(/audio\/mp3|audio\/\*/i) &&
(!fileUploadMediaTypeWhiteList || fileUploadMediaTypeWhiteList.match(/audio\/mp3|audio\/\*/i))

audio/mp3 doesn't appear anywhere else in the codebase now. The video hook right next to it
uses video/webm correctly, which is what made me think this one was just missed.

Not the same as the "mic missing outside localhost" reports (#24372, #22864) this happens
over HTTPS with permissions granted, purely from the upload settings.

Steps to reproduce:
  1. Admin → File Upload → set Media Type White List to audio/mpeg
  2. Open any channel and look at the composer
Expected behavior:

Mic button works, since audio/mpeg is exactly what the recording uploads as.

Actual behavior:

Mic button is greyed out. No error, nothing in the logs.

Server Setup Information:
  • Version of Rocket.Chat Server: develop @ 42b8bad60d, dates back to 3.5.1
  • License Type: community
  • Number of Users:
  • Operating System:
  • Deployment Method:
  • Number of Running Instances:
  • DB Replicaset Oplog:
  • NodeJS Version:
  • MongoDB Version:

Found this reading the code rather than on a live instance, so no screenshot and I've left the
deployment fields blank.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in useAudioMessageAction.ts at the whitelist and blacklist checks quoted in the issue, then compare those checks with the recorder's audio/mpeg output. Done looks like the mic button is enabled when audio/mpeg is allowed and disabled when it is blocked; verify behavior with the reproduction steps in the issue.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
78/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.