[CLNP: 2977] fix: m4a format audio file playing in Safari (#1123)

Fixes https://sendbird.atlassian.net/browse/CLNP-2997

#### Problem Statement

Voice audio files created on platforms other than the web, such as
Android/iOS, are in M4A format. When attempting to convert these M4A
files to `audio/mp3` or `audio/mpeg` format for playback on the web,
Safari browser cannot find the correct codec and throws an error:
`Unhandled Promise Rejection: NotSupportedError: The operation is not
supported.`
This results in the file not being playable.

#### Solution

For Safari browser only, if the message file type is M4A, ensure it is
played in this format. However, the file must be parsed as `audio/x-m4a`
instead of `audio/m4a` to be correctly played in the Safari browser.

#### Test Cases Checked

| Browser | .m4a file(created in iOS / Android UIKit) | .mp3
File(created in React UIKit) |
|----------|----------|----------|
| Safari   | ✅       | ✅       |
| Chrome   | ✅       | ✅       |
| Firefox  | ✅       | ✅       |

> A testable account credential for .m4a can be found in the linked Jira
ticket

Author: AhyoungRyu

src/hooks/VoicePlayer/__tests__/utils.spec.ts

@@ -0,0 +1,48 @@
+import {
+  VOICE_MESSAGE_FILE_NAME,
+  VOICE_MESSAGE_FILE_NAME__XM4A,
+  VOICE_MESSAGE_MIME_TYPE,
+  VOICE_MESSAGE_MIME_TYPE__XM4A,
+} from '../../../utils/consts';
+import { isSafari } from '../../../utils/browser';
+import { getParsedVoiceAudioFileInfo } from '../utils';
+
+describe('getParsedVoiceAudioFileInfo', () => {
+  const originalUserAgent = navigator.userAgent;
+
+  afterEach(() => {
+    Object.defineProperty(navigator, 'userAgent', {
+      value: originalUserAgent,
+      writable: false,
+    });
+  });
+
+  it('should return VOICE_MESSAGE_MIME_TYPE__XM4A for Safari and m4a MIME type', () => {
+    const safariUserAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Safari/605.1.15';
+
+    Object.defineProperty(navigator, 'userAgent', {
+      value: safariUserAgent,
+      writable: true,
+    });
+
+    expect(isSafari(safariUserAgent)).toBe(true);
+    expect(getParsedVoiceAudioFileInfo('audio/mp3').mimeType).toBe(VOICE_MESSAGE_MIME_TYPE);
+    expect(getParsedVoiceAudioFileInfo('audio/m4a').mimeType).toBe(VOICE_MESSAGE_MIME_TYPE__XM4A);
+    expect(getParsedVoiceAudioFileInfo('audio/mp3').name).toBe(VOICE_MESSAGE_FILE_NAME);
+    expect(getParsedVoiceAudioFileInfo('audio/m4a').name).toBe(VOICE_MESSAGE_FILE_NAME__XM4A);
+  });
+
+  it('should return VOICE_MESSAGE_MIME_TYPE for non-Safari browser and m4a MIME type', () => {
+    const chromeUserAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36';
+    Object.defineProperty(navigator, 'userAgent', {
+      value: chromeUserAgent,
+      writable: true,
+    });
+
+    expect(isSafari(chromeUserAgent)).toBe(false);
+    expect(getParsedVoiceAudioFileInfo('audio/mp3').mimeType).toBe(VOICE_MESSAGE_MIME_TYPE);
+    expect(getParsedVoiceAudioFileInfo('audio/m4a').mimeType).toBe(VOICE_MESSAGE_MIME_TYPE);
+    expect(getParsedVoiceAudioFileInfo('audio/mp3').name).toBe(VOICE_MESSAGE_FILE_NAME);
+    expect(getParsedVoiceAudioFileInfo('audio/m4a').name).toBe(VOICE_MESSAGE_FILE_NAME);
+  });
+});

src/hooks/VoicePlayer/index.tsx

@@ -15,12 +15,12 @@ import {
   SET_CURRENT_PLAYER,
 } from './dux/actionTypes';
 import {
-  VOICE_MESSAGE_FILE_NAME,
   VOICE_MESSAGE_MIME_TYPE,
   VOICE_PLAYER_AUDIO_ID,
   VOICE_PLAYER_ROOT_ID,
 } from '../../utils/consts';
 import useSendbirdStateContext from '../useSendbirdStateContext';
+import { getParsedVoiceAudioFileInfo } from './utils';
 
 // VoicePlayerProvider interface
 export interface VoicePlayerProps {
@@ -30,6 +30,7 @@ export interface VoicePlayerPlayProps {
   groupKey: string;
   audioFile?: File;
   audioFileUrl?: string;
+  audioFileMimeType?: string;
 }
 export interface VoicePlayerContext {
   play: (props: VoicePlayerPlayProps) => void;
@@ -91,6 +92,7 @@ export const VoicePlayerProvider = ({
     groupKey,
     audioFile,
     audioFileUrl = '',
+    audioFileMimeType = VOICE_MESSAGE_MIME_TYPE,
   }: VoicePlayerPlayProps): void => {
     if (groupKey !== currentGroupKey) {
       pause(currentGroupKey);
@@ -126,9 +128,9 @@ export const VoicePlayerProvider = ({
       fetch(audioFileUrl)
         .then((res) => res.blob())
         .then((blob) => {
-          const audioFile = new File([blob], VOICE_MESSAGE_FILE_NAME, {
+          const audioFile = new File([blob], getParsedVoiceAudioFileInfo(audioFileMimeType).name, {
             lastModified: new Date().getTime(),
-            type: VOICE_MESSAGE_MIME_TYPE,
+            type: getParsedVoiceAudioFileInfo(audioFileMimeType).mimeType,
           });
           resolve(audioFile);
           logger.info('VoicePlayer: Get the audioFile from URL.');

src/hooks/VoicePlayer/useVoicePlayer.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useVoicePlayerContext } from '.';
-import { VOICE_PLAYER_AUDIO_ID } from '../../utils/consts';
+import { VOICE_PLAYER_AUDIO_ID, VOICE_MESSAGE_MIME_TYPE } from '../../utils/consts';
 import { useVoiceRecorderContext } from '../VoiceRecorder';
 
 import { AudioUnitDefaultValue, VoicePlayerStatusType } from './dux/initialState';
@@ -11,6 +11,7 @@ export interface UseVoicePlayerProps {
   channelUrl?: string;
   audioFile?: File;
   audioFileUrl?: string;
+  audioFileMimeType?: string;
 }
 
 export interface UseVoicePlayerContext {
@@ -27,6 +28,7 @@ export const useVoicePlayer = ({
   channelUrl = '',
   audioFile,
   audioFileUrl = '',
+  audioFileMimeType = VOICE_MESSAGE_MIME_TYPE,
 }: UseVoicePlayerProps): UseVoicePlayerContext => {
   const groupKey = generateGroupKey(channelUrl, key);
   const {
@@ -44,6 +46,7 @@ export const useVoicePlayer = ({
         groupKey,
         audioFile,
         audioFileUrl,
+        audioFileMimeType,
       });
     }
   };

src/hooks/VoicePlayer/utils.ts

@@ -1,2 +1,36 @@
+import { isSafari } from '../../utils/browser';
+import {
+  VOICE_MESSAGE_MIME_TYPE,
+  VOICE_MESSAGE_MIME_TYPE__XM4A,
+  VOICE_MESSAGE_FILE_NAME,
+  VOICE_MESSAGE_FILE_NAME__XM4A,
+} from '../../utils/consts';
+
 export type GroupKey = string;
 export const generateGroupKey = (channelUrl = '', key = ''): GroupKey => (`${channelUrl}-${key}`);
+
+/**
+ * Parses and returns the correct MIME type based on the browser.
+ * If the browser is Safari and the file type is m4a, use 'audio/x-m4a' for the audio player.
+ * Safari doesn't support 'audio/mp3' well.
+ * Also, 'audio/m4a' should be converted to 'audio/x-m4a' to be correctly played in Safari.
+ * @link: https://sendbird.atlassian.net/browse/CLNP-2997
+ *
+ * @param mimeType - The original MIME type.
+ * @returns Converted file name and MIME type.
+ */
+export const getParsedVoiceAudioFileInfo = (mimeType: string): {
+  name: string,
+  mimeType: string,
+} => {
+  if (isSafari(navigator.userAgent) && mimeType.includes('m4a')) {
+    return {
+      name: VOICE_MESSAGE_FILE_NAME__XM4A,
+      mimeType: VOICE_MESSAGE_MIME_TYPE__XM4A,
+    };
+  }
+  return {
+    name: VOICE_MESSAGE_FILE_NAME,
+    mimeType: VOICE_MESSAGE_MIME_TYPE,
+  };
+};

src/ui/VoiceMessageItemBody/index.tsx

@@ -41,6 +41,7 @@ export const VoiceMessageItemBody = ({
     channelUrl,
     key: `${message?.messageId}`,
     audioFileUrl: message?.url,
+    audioFileMimeType: message?.type,
   });
 
   useEffect(() => {

src/utils/consts.ts

@@ -24,7 +24,10 @@ export const VOICE_PLAYER_AUDIO_ID = 'sendbird-global-audio-player-id';
 
 // voice message file
 export const VOICE_MESSAGE_FILE_NAME = 'Voice_message.mp3';
+export const VOICE_MESSAGE_FILE_NAME__XM4A = 'Voice_message.m4a';
+
 export const VOICE_MESSAGE_MIME_TYPE = 'audio/mp3;sbu_type=voice';
+export const VOICE_MESSAGE_MIME_TYPE__XM4A = 'audio/x-m4a;sbu_type=voice';
 
 // meta array
 export const META_ARRAY_VOICE_DURATION_KEY = 'KEY_VOICE_MESSAGE_DURATION';