stream-chat-react-native-core 5.28.1 → 5.29.0-beta.1

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -21,9 +21,16 @@ import {
 import { useCreateMessageInputContext } from './hooks/useCreateMessageInputContext';
 import { useMessageDetailsForState } from './hooks/useMessageDetailsForState';
 
+import { AudioAttachmentProps } from '../../components/Attachment/AudioAttachment';
 import { parseLinksFromText } from '../../components/Message/MessageSimple/utils/parseLinks';
 import type { AttachButtonProps } from '../../components/MessageInput/AttachButton';
 import type { CommandsButtonProps } from '../../components/MessageInput/CommandsButton';
+import type { AudioRecorderProps } from '../../components/MessageInput/components/AudioRecorder/AudioRecorder';
+import type { AudioRecordingButtonProps } from '../../components/MessageInput/components/AudioRecorder/AudioRecordingButton';
+import type { AudioRecordingInProgressProps } from '../../components/MessageInput/components/AudioRecorder/AudioRecordingInProgress';
+import type { AudioRecordingLockIndicatorProps } from '../../components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator';
+import type { AudioRecordingPreviewProps } from '../../components/MessageInput/components/AudioRecorder/AudioRecordingPreview';
+import type { AudioRecordingWaveformProps } from '../../components/MessageInput/components/AudioRecorder/AudioRecordingWaveform';
 import type { InputEditingStateHeaderProps } from '../../components/MessageInput/components/InputEditingStateHeader';
 import type { InputGiphySearchProps } from '../../components/MessageInput/components/InputGiphySearch';
 import type { InputReplyStateHeaderProps } from '../../components/MessageInput/components/InputReplyStateHeader';
@@ -192,9 +199,6 @@ export type LocalMessageInputContext<
   setShowMoreOptions: React.Dispatch<React.SetStateAction<boolean>>;
   setText: React.Dispatch<React.SetStateAction<string>>;
   showMoreOptions: boolean;
-  /**
-   * Text value of the TextInput
-   */
   text: string;
   toggleAttachmentPicker: () => void;
   /**
@@ -213,12 +217,68 @@ export type LocalMessageInputContext<
 export type InputMessageInputContextValue<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<ChannelContextValue<StreamChatGenerics>, 'disabled'> & {
+  /**
+   * Controls how many pixels to the top side the user has to scroll in order to lock the recording view and allow the user to lift their finger from the screen without stopping the recording.
+   */
+  asyncMessagesLockDistance: number;
+  /**
+   * Controls the minimum duration that the user has to press on the record button in the composer, in order to start recording a new voice message.
+   */
+  asyncMessagesMinimumPressDuration: number;
+  /**
+   * When it’s enabled, recorded messages won’t be sent immediately. Instead they will “stack up” in the composer allowing the user to send multiple voice recording as part of the same message.
+   */
+  asyncMessagesMultiSendEnabled: boolean;
+  /**
+   * Controls how many pixels to the leading side the user has to scroll in order to cancel the recording of a voice message.
+   */
+  asyncMessagesSlideToCancelDistance: number;
   /**
    * Custom UI component for attach button.
    *
    * Defaults to and accepts same props as: [AttachButton](https://getstream.io/chat/docs/sdk/reactnative/ui-components/attach-button/)
    */
   AttachButton: React.ComponentType<AttachButtonProps<StreamChatGenerics>>;
+  /**
+   * Custom UI component for audio attachment upload preview.
+   *
+   * Defaults to and accepts same props as: [AudioAttachmentUploadPreview](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Attachment/AudioAttachment.tsx)
+   */
+  AudioAttachmentUploadPreview: React.ComponentType<AudioAttachmentProps>;
+  /**
+   * Custom UI component for audio recorder UI.
+   *
+   * Defaults to and accepts same props as: [AudioRecorder](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/AudioRecorder.tsx)
+   */
+  AudioRecorder: React.ComponentType<AudioRecorderProps<StreamChatGenerics>>;
+  /**
+   * Controls whether the async audio feature is enabled.
+   */
+  audioRecordingEnabled: boolean;
+  /**
+   * Custom UI component to render audio recording in progress.
+   *
+   * **Default** [AudioRecordingInProgress](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingInProgress.tsx)
+   */
+  AudioRecordingInProgress: React.ComponentType<AudioRecordingInProgressProps>;
+  /**
+   * Custom UI component for audio recording lock indicator.
+   *
+   * Defaults to and accepts same props as: [AudioRecordingLockIndicator](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx)
+   */
+  AudioRecordingLockIndicator: React.ComponentType<AudioRecordingLockIndicatorProps>;
+  /**
+   * Custom UI component to render audio recording preview.
+   *
+   * **Default** [AudioRecordingPreview](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx)
+   */
+  AudioRecordingPreview: React.ComponentType<AudioRecordingPreviewProps>;
+  /**
+   * Custom UI component to render audio recording waveform.
+   *
+   * **Default** [AudioRecordingWaveform](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingWaveform.tsx)
+   */
+  AudioRecordingWaveform: React.ComponentType<AudioRecordingWaveformProps>;
 
   clearEditingState: () => void;
   clearQuotedMessageState: () => void;
@@ -260,6 +320,7 @@ export type InputMessageInputContextValue<
   InputReplyStateHeader: React.ComponentType<InputReplyStateHeaderProps<StreamChatGenerics>>;
   /** Limit on allowed number of files to attach at a time. */
   maxNumberOfFiles: number;
+
   /**
    * Custom UI component for more options button.
    *
@@ -285,12 +346,19 @@ export type InputMessageInputContextValue<
   ShowThreadMessageInChannelButton: React.ComponentType<{
     threadList?: boolean;
   }>;
+  /**
+   * Custom UI component for audio recording mic button.
+   *
+   * Defaults to and accepts same props as: [AudioRecordingButton](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx)
+   */
+  StartAudioRecordingButton: React.ComponentType<AudioRecordingButtonProps<StreamChatGenerics>>;
   /**
    * Custom UI component to render upload progress indicator on attachment preview.
    *
    * **Default** [UploadProgressIndicator](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/UploadProgressIndicator.tsx)
    */
   UploadProgressIndicator: React.ComponentType<UploadProgressIndicatorProps>;
+
   /**
    * Additional props for underlying TextInput component. These props will be forwarded as it is to TextInput component.
    *
@@ -666,7 +734,7 @@ export const MessageInputProvider = <
   };
 
   const mapFileUploadToAttachment = (file: FileUpload): Attachment<StreamChatGenerics> => {
-    if (file.file.mimeType?.startsWith('image/')) {
+    if (file.type === 'image') {
       return {
         fallback: file.file.name,
         image_url: file.url,
@@ -674,7 +742,7 @@ export const MessageInputProvider = <
         originalFile: file.file,
         type: 'image',
       };
-    } else if (file.file.mimeType?.startsWith('audio/')) {
+    } else if (file.type === 'audio') {
       return {
         asset_url: file.url || file.file.uri,
         duration: file.file.duration,
@@ -684,7 +752,7 @@ export const MessageInputProvider = <
         title: file.file.name,
         type: 'audio',
       };
-    } else if (file.file.mimeType?.startsWith('video/')) {
+    } else if (file.type === 'video') {
       return {
         asset_url: file.url || file.file.uri,
         duration: file.file.duration,
@@ -695,6 +763,17 @@ export const MessageInputProvider = <
         title: file.file.name,
         type: 'video',
       };
+    } else if (file.type === 'voiceRecording') {
+      return {
+        asset_url: file.url || file.file.uri,
+        duration: file.file.duration,
+        file_size: file.file.size,
+        mime_type: file.file.mimeType,
+        originalFile: file.file,
+        title: file.file.name,
+        type: 'voiceRecording',
+        waveform_data: file.file.waveform_data,
+      };
     } else {
       return {
         asset_url: file.url || file.file.uri,
@@ -1009,7 +1088,11 @@ export const MessageInputProvider = <
         }
         uploadAbortControllerRef.current.delete(file.name);
       }
-      const extraData: Partial<FileUpload> = { thumb_url: response.thumb_url, url: response.file };
+
+      const extraData: Partial<FileUpload> = {
+        thumb_url: response.thumb_url,
+        url: response.file,
+      };
       setFileUploads(getUploadSetStateAction(id, FileState.UPLOADED, extraData));
     } catch (error: unknown) {
       if (
@@ -1121,13 +1204,15 @@ export const MessageInputProvider = <
         ? FileState.NOT_SUPPORTED
         : FileState.UPLOADING;
 
+    // If file type is explicitly provided while upload we use it, else we derive the file type.
+    const fileType = file.type || file.mimeType?.split('/')[0];
+
     const newFile: FileUpload = {
-      duration: 0,
+      duration: file.duration || 0,
       file,
       id: file.id || id,
-      paused: true,
-      progress: 0,
       state: fileState,
+      type: fileType,
     };
 
     await Promise.all([

package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts

@@ -10,8 +10,19 @@ export const useCreateMessageInputContext = <
   additionalTextInputProps,
   appendText,
   asyncIds,
+  asyncMessagesLockDistance,
+  asyncMessagesMinimumPressDuration,
+  asyncMessagesMultiSendEnabled,
+  asyncMessagesSlideToCancelDistance,
   asyncUploads,
   AttachButton,
+  AudioAttachmentUploadPreview,
+  AudioRecorder,
+  audioRecordingEnabled,
+  AudioRecordingInProgress,
+  AudioRecordingLockIndicator,
+  AudioRecordingPreview,
+  AudioRecordingWaveform,
   autoCompleteSuggestionsLimit,
   clearEditingState,
   clearQuotedMessageState,
@@ -57,6 +68,7 @@ export const useCreateMessageInputContext = <
   openCommandsPicker,
   openFilePicker,
   openMentionsPicker,
+
   pickFile,
   quotedMessage,
   removeFile,
@@ -85,6 +97,7 @@ export const useCreateMessageInputContext = <
   setText,
   showMoreOptions,
   ShowThreadMessageInChannelButton,
+  StartAudioRecordingButton,
   text,
   thread,
   toggleAttachmentPicker,
@@ -117,8 +130,19 @@ export const useCreateMessageInputContext = <
       additionalTextInputProps,
       appendText,
       asyncIds,
+      asyncMessagesLockDistance,
+      asyncMessagesMinimumPressDuration,
+      asyncMessagesMultiSendEnabled,
+      asyncMessagesSlideToCancelDistance,
       asyncUploads,
       AttachButton,
+      AudioAttachmentUploadPreview,
+      AudioRecorder,
+      audioRecordingEnabled,
+      AudioRecordingInProgress,
+      AudioRecordingLockIndicator,
+      AudioRecordingPreview,
+      AudioRecordingWaveform,
       autoCompleteSuggestionsLimit,
       clearEditingState,
       clearQuotedMessageState,
@@ -192,6 +216,7 @@ export const useCreateMessageInputContext = <
       setText,
       showMoreOptions,
       ShowThreadMessageInChannelButton,
+      StartAudioRecordingButton,
       text,
       toggleAttachmentPicker,
       triggerSettings,

package/src/contexts/messageInputContext/hooks/useMessageDetailsForState.ts

@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react';
 
+import { Attachment } from 'stream-chat';
+
 import type { DefaultStreamChatGenerics, FileUpload, ImageUpload } from '../../../types/types';
 import { generateRandomId } from '../../../utils/utils';
 
@@ -16,6 +18,7 @@ export const useMessageDetailsForState = <
   const [mentionedUsers, setMentionedUsers] = useState<string[]>([]);
   const [numberOfUploads, setNumberOfUploads] = useState(0);
   const [showMoreOptions, setShowMoreOptions] = useState(true);
+
   const initialTextValue = initialValue || '';
   const [text, setText] = useState(initialTextValue);
 
@@ -23,7 +26,10 @@ export const useMessageDetailsForState = <
     if (text !== initialTextValue) {
       setShowMoreOptions(false);
     }
-  }, [text]);
+    if (fileUploads.length || imageUploads.length) {
+      setShowMoreOptions(false);
+    }
+  }, [text, imageUploads.length, fileUploads.length]);
 
   const messageValue =
     message === undefined ? '' : `${message.id}${message.text}${message.updated_at}`;
@@ -35,6 +41,73 @@ export const useMessageDetailsForState = <
     }
   }, [messageValue]);
 
+  const mapAttachmentToFileUpload = (attachment: Attachment<StreamChatGenerics>): FileUpload => {
+    const id = generateRandomId();
+
+    if (attachment.type === 'audio') {
+      return {
+        file: {
+          duration: attachment.duration,
+          mimeType: attachment.mime_type,
+          name: attachment.title || '',
+          size: attachment.file_size,
+          uri: attachment.asset_url,
+        },
+        id,
+        state: 'finished',
+        url: attachment.asset_url,
+      };
+    } else if (attachment.type === 'video') {
+      return {
+        file: {
+          mimeType: attachment.mime_type,
+          name: attachment.title || '',
+          size: attachment.file_size,
+        },
+        id,
+        state: 'finished',
+        thumb_url: attachment.thumb_url,
+        url: attachment.asset_url,
+      };
+    } else if (attachment.type === 'voiceRecording') {
+      return {
+        file: {
+          duration: attachment.duration,
+          mimeType: attachment.mime_type,
+          name: attachment.title || '',
+          size: attachment.file_size,
+          uri: attachment.asset_url,
+          waveform_data: attachment.waveform_data,
+        },
+        id,
+        state: 'finished',
+        url: attachment.asset_url,
+      };
+    } else if (attachment.type === 'file') {
+      return {
+        file: {
+          mimeType: attachment.mime_type,
+          name: attachment.title || '',
+          size: attachment.file_size,
+        },
+        id,
+        state: 'finished',
+        url: attachment.asset_url,
+      };
+    } else {
+      return {
+        file: {
+          mimeType: attachment.mime_type,
+          name: attachment.title || '',
+          size: attachment.file_size,
+        },
+        id,
+        state: 'finished',
+        url: attachment.asset_url,
+      };
+    }
+  };
+
   useEffect(() => {
     if (message) {
       setText(message?.text || '');
@@ -44,19 +117,7 @@ export const useMessageDetailsForState = <
       const attachments = Array.isArray(message.attachments) ? message.attachments : [];
 
       for (const attachment of attachments) {
-        if (attachment.type === 'file') {
-          const id = generateRandomId();
-          newFileUploads.push({
-            file: {
-              mimeType: attachment.mime_type,
-              name: attachment.title || '',
-              size: attachment.file_size,
-            },
-            id,
-            state: 'finished',
-            url: attachment.asset_url,
-          });
-        } else if (attachment.type === 'image') {
+        if (attachment.type === 'image') {
           const id = generateRandomId();
           newImageUploads.push({
             file: {
@@ -68,19 +129,11 @@ export const useMessageDetailsForState = <
             state: 'finished',
             url: attachment.image_url || attachment.asset_url || attachment.thumb_url,
           });
-        } else if (attachment.type === 'video') {
-          const id = generateRandomId();
-          newFileUploads.push({
-            file: {
-              mimeType: attachment.mime_type,
-              name: attachment.title || '',
-              size: attachment.file_size,
-            },
-            id,
-            state: 'finished',
-            thumb_url: attachment.thumb_url,
-            url: attachment.asset_url,
-          });
+        } else {
+          const fileUpload = mapAttachmentToFileUpload(attachment);
+          if (fileUpload) {
+            newFileUploads.push(fileUpload);
+          }
         }
       }
       if (newFileUploads.length) {

package/src/contexts/themeContext/utils/theme.ts

@@ -96,6 +96,16 @@ export type Theme = {
     container: ViewStyle;
     icon: ViewStyle;
   };
+  audioAttachment: {
+    container: ViewStyle;
+    leftContainer: ViewStyle;
+    playPauseButton: ViewStyle;
+    progressControlContainer: ViewStyle;
+    progressDurationText: TextStyle;
+    rightContainer: ViewStyle;
+    speedChangeButton: ViewStyle;
+    speedChangeButtonText: TextStyle;
+  };
   avatar: {
     BASE_AVATAR_SIZE: number;
     container: ViewStyle;
@@ -230,6 +240,44 @@ export type Theme = {
     attachButton: ViewStyle;
     attachButtonContainer: ViewStyle;
     attachmentSelectionBar: ViewStyle;
+    attachmentSeparator: ViewStyle;
+    audioRecorder: {
+      arrowLeftIcon: IconProps;
+      checkContainer: ViewStyle;
+      circleStopIcon: IconProps;
+      deleteContainer: ViewStyle;
+      deleteIcon: IconProps;
+      micContainer: ViewStyle;
+      micIcon: IconProps;
+      pausedContainer: ViewStyle;
+      sendCheckIcon: IconProps;
+      slideToCancelContainer: ViewStyle;
+    };
+    audioRecordingButton: {
+      container: ViewStyle;
+      micIcon: IconProps;
+    };
+    audioRecordingInProgress: {
+      container: ViewStyle;
+      durationText: TextStyle;
+    };
+    audioRecordingLockIndicator: {
+      arrowUpIcon: IconProps;
+      container: ViewStyle;
+      lockIcon: IconProps;
+    };
+    audioRecordingPreview: {
+      container: ViewStyle;
+      currentTime: TextStyle;
+      infoContainer: ViewStyle;
+      pauseIcon: IconProps;
+      playIcon: IconProps;
+      progressBar: ViewStyle;
+    };
+    audioRecordingWaveform: {
+      container: ViewStyle;
+      waveform: ViewStyle;
+    };
     autoCompleteInputContainer: ViewStyle;
     commandsButton: ViewStyle;
     commandsButtonContainer: ViewStyle;
@@ -247,15 +295,8 @@ export type Theme = {
       editingBoxHeaderTitle: TextStyle;
     };
     fileUploadPreview: {
-      audioAttachment: {
-        progressControlView: ViewStyle;
-        progressDurationText: TextStyle;
-        roundedView: ViewStyle;
-      };
-      audioAttachmentFileContainer: ViewStyle;
       dismiss: ViewStyle;
       fileContainer: ViewStyle;
-      fileContentContainer: ViewStyle;
       filenameText: TextStyle;
       fileSizeText: TextStyle;
       fileTextContainer: ViewStyle;
@@ -275,6 +316,7 @@ export type Theme = {
     };
     inputBox: TextStyle;
     inputBoxContainer: ViewStyle;
+    micButtonContainer: ViewStyle;
     moreOptionsButton: ViewStyle;
     optionsContainer: ViewStyle;
     replyContainer: ViewStyle;
@@ -437,6 +479,7 @@ export type Theme = {
       title: TextStyle;
     };
     fileAttachmentGroup: {
+      attachmentContainer: ViewStyle;
       container: ViewStyle;
     };
     gallery: {
@@ -545,12 +588,19 @@ export type Theme = {
       reactionSize: number;
     };
   };
+  progressControl: {
+    container: ViewStyle;
+    filledColor: ColorValue;
+    filledStyles: ViewStyle;
+    thumb: ViewStyle;
+  };
   reply: {
     container: ViewStyle;
     fileAttachmentContainer: ViewStyle;
     imageAttachment: ImageStyle;
     markdownStyles: MarkdownStyle;
     messageContainer: ViewStyle;
+    secondaryText: ViewStyle;
     textContainer: ViewStyle;
     videoThumbnail: {
       container: ViewStyle;
@@ -573,6 +623,11 @@ export type Theme = {
       fontSize: TextStyle['fontSize'];
     };
   };
+  waveProgressBar: {
+    container: ViewStyle;
+    thumb: ViewStyle;
+    waveform: ViewStyle;
+  };
 };
 
 export const defaultTheme: Theme = {
@@ -592,6 +647,16 @@ export const defaultTheme: Theme = {
     container: {},
     icon: {},
   },
+  audioAttachment: {
+    container: {},
+    leftContainer: {},
+    playPauseButton: {},
+    progressControlContainer: {},
+    progressDurationText: {},
+    rightContainer: {},
+    speedChangeButton: {},
+    speedChangeButtonText: {},
+  },
   avatar: {
     BASE_AVATAR_SIZE: 32,
     container: {},
@@ -745,6 +810,31 @@ export const defaultTheme: Theme = {
     attachButton: {},
     attachButtonContainer: {},
     attachmentSelectionBar: {},
+    attachmentSeparator: {},
+    audioRecorder: {
+      arrowLeftIcon: {},
+      checkContainer: {},
+      circleStopIcon: {},
+      deleteContainer: {},
+      deleteIcon: {},
+      micContainer: {},
+      micIcon: {},
+      pausedContainer: {},
+      sendCheckIcon: {},
+      slideToCancelContainer: {},
+    },
+    audioRecordingButton: { container: {}, micIcon: {} },
+    audioRecordingInProgress: { container: {}, durationText: {} },
+    audioRecordingLockIndicator: { arrowUpIcon: {}, container: {}, lockIcon: {} },
+    audioRecordingPreview: {
+      container: {},
+      currentTime: {},
+      infoContainer: {},
+      pauseIcon: {},
+      playIcon: {},
+      progressBar: {},
+    },
+    audioRecordingWaveform: { container: {}, waveform: {} },
     autoCompleteInputContainer: {},
     commandsButton: {},
     commandsButtonContainer: {},
@@ -762,15 +852,8 @@ export const defaultTheme: Theme = {
       editingBoxHeaderTitle: {},
     },
     fileUploadPreview: {
-      audioAttachment: {
-        progressControlView: {},
-        progressDurationText: {},
-        roundedView: {},
-      },
-      audioAttachmentFileContainer: {},
       dismiss: {},
       fileContainer: {},
-      fileContentContainer: {},
       filenameText: {},
       fileSizeText: {},
       fileTextContainer: {},
@@ -790,6 +873,7 @@ export const defaultTheme: Theme = {
     },
     inputBox: {},
     inputBoxContainer: {},
+    micButtonContainer: {},
     moreOptionsButton: {},
     optionsContainer: {},
     replyContainer: {},
@@ -979,6 +1063,7 @@ export const defaultTheme: Theme = {
       title: {},
     },
     fileAttachmentGroup: {
+      attachmentContainer: {},
       container: {},
     },
     gallery: {
@@ -1095,12 +1180,19 @@ export const defaultTheme: Theme = {
       reactionSize: 24,
     },
   },
+  progressControl: {
+    container: {},
+    filledColor: '',
+    filledStyles: {},
+    thumb: {},
+  },
   reply: {
     container: {},
     fileAttachmentContainer: {},
     imageAttachment: {},
     markdownStyles: {},
     messageContainer: {},
+    secondaryText: {},
     textContainer: {},
     videoThumbnail: {
       container: {},
@@ -1120,4 +1212,9 @@ export const defaultTheme: Theme = {
       fontSize: 14,
     },
   },
+  waveProgressBar: {
+    container: {},
+    thumb: {},
+    waveform: {},
+  },
 };

package/src/i18n/en.json

@@ -26,7 +26,8 @@
   "File type not supported": "File type not supported",
   "Flag": "Flag",
   "Flag Message": "Flag Message",
-  "Flag action failed either due to a network issue or the message is already flagged": "Flag action failed either due to a network issue or the message is already flagged.",
+  "Flag action failed either due to a network issue or the message is already flagged": "Flag action failed either due to a network issue or the message is already flagged",
+  "Hold to start recording.": "Hold to start recording.",
   "How about sending your first message to a friend?": "How about sending your first message to a friend?",
   "Instant Commands": "Instant Commands",
   "Let's start chatting!": "Let's start chatting!",
@@ -48,6 +49,7 @@
   "Photos and Videos": "Photos and Videos",
   "Pin to Conversation": "Pin to Conversation",
   "Pinned by": "Pinned by",
+  "Please allow Audio permissions in settings.": "Please allow Audio permissions in settings.",
   "Please enable access to your photos and videos so you can share them.": "Please enable access to your photos and videos so you can share them.",
   "Please select a channel first": "Please select a channel first",
   "Reconnecting...": "Reconnecting...",