quickblox-react-ui-kit 0.5.0-beta.2 → 0.5.0-beta.4

package/media-recorder-js.d.ts

@@ -0,0 +1,133 @@
+declare module 'media-recorder-js' {
+  interface QBMediaRecorderConstructorProps {
+    /** Preferred MIME type */
+    mimeType?: string
+    workerPath?: string
+    /**
+     * The minimum number of milliseconds of data to return
+     * in a single Blob, fire 'ondataavaible' callback
+     * (isn't need to use with 'audio/wav' of 'audio/mp3')
+     *
+     * @default 1000
+     */
+    timeslice?: number
+    /**
+     * What to do with a muted input MediaStreamTrack,
+     * e.g. insert black frames/zero audio volume in the recording
+     * or ignore altogether
+     *
+     * @default true
+     */
+    ignoreMutedMedia?: boolean
+    /** Recording start event handler */
+    onstart?: VoidFunction
+    /** Recording stop event handler */
+    onstop?: (file: Blob) => void
+    /** Recording pause event handler */
+    onpause?: VoidFunction
+    /** Recording resume event handler */
+    onresume?: VoidFunction
+    /** Error event handler */
+    onerror?: (error: unknown) => void
+    /**
+     * `dataavailable` event handler.
+     * The Blob of recorded data is contained in this event (callback
+     * isn't supported if use 'audio/wav' of 'audio/mp3' for recording)
+     */
+    ondataavailable?: (event: { data: Blob }) => void
+  }
+
+  class QBMediaRecorder {
+    constructor(config: QBMediaRecorderConstructorProps)
+
+    /**
+     * Switch recording Blob objects to the specified
+     * MIME type if `MediaRecorder` support it.
+     */
+    toggleMimeType(mimeType: string): void
+
+    /**
+     * Returns current `MediaRecorder` state
+     */
+    getState(): 'inactive' | 'recording' | 'paused'
+
+    /**
+     * Starts recording a stream.
+     * Fires `onstart` callback.
+     */
+    start(stream: MediaStream): void
+
+    /**
+     * Stops recording a stream
+     *
+     * @fires `onstop` callback and passing there Blob recorded
+     */
+    stop(): void
+
+    /** Pausing stream recording */
+    pause(): void
+
+    /** Resumes stream recording */
+    resume(): void
+
+    /**
+     * Change record source
+     */
+    change(stream: MediaStream): void
+
+    /**
+     * Create a file from blob and download as file.
+     * This method will call `stop` if recording is in progress.
+     *
+     * @param {string} filename Name of video file to be downloaded
+     * (default to `Date.now()`)
+     */
+    download(filename?: string): void
+
+    _getBlobRecorded(): Blob
+
+    callbacks: Pick<
+      QBMediaRecorderConstructorProps,
+      | 'onstart'
+      | 'onstop'
+      | 'onpause'
+      | 'onresume'
+      | 'ondataavailable'
+      | 'onerror'
+    >
+
+    /**
+     * Checks capability of recording in the environment.
+     * Checks `MediaRecorder`, `MediaRecorder.isTypeSupported` and `Blob`.
+     */
+    static isAvailable(): boolean
+
+    /**
+     * Checks if AudioContext API is available.
+     * Checks `window.AudioContext` or `window.webkitAudioContext`.
+     */
+    static isAudioContext(): boolean
+    /**
+     * The `QBMediaRecorder.isTypeSupported()` static method returns
+     * a Boolean which is true if the MIME type specified is one
+     * the user agent should be able to successfully record.
+     * @param mimeType The MIME media type to check.
+     *
+     * @returns true if the `MediaRecorder` implementation is capable of
+     * recording `Blob` objects for the specified MIME type. Recording may
+     * still fail if there are insufficient resources to support the
+     * recording and encoding process. If the value is false, the user
+     * agent is incapable of recording the specified format.
+     */
+
+    static isTypeSupported(mimeType: string): boolean
+
+    /**
+     * Return supported mime types
+     * @param type video or audio (dafault to 'video')
+     */
+    static getSupportedMimeTypes(type: 'audio' | 'video' = 'video'): string[]
+  }
+
+  export default QBMediaRecorder
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quickblox-react-ui-kit",
-  "version": "0.5.0-beta.2",
+  "version": "0.5.0-beta.4",
   "main": "dist/index-ui.js",
   "types": "dist/index-ui.d.ts",
   "license": "MIT",
@@ -13,6 +13,7 @@
     "qb-ai-rephrase": "^0.1.2",
     "qb-ai-translate": "^0.1.2",
     "quickblox": "^2.19.2",
+    "media-recorder-js": "^2.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^6.11.1",

package/src/CommonTypes/FunctionResult.ts

@@ -4,4 +4,3 @@ export type FunctionResult<T> = {
   result: T | T[] | boolean;
   error: any;
 };
-

package/src/Data/repository/UsersRepository.ts

@@ -32,7 +32,6 @@ import {
   PaginatedDTOResult,
   RemoteDataSource,
 } from '../source/remote/RemoteDataSource';
-import { Stubs } from '../Stubs';
 
 export default class UsersRepository {
   private localDataSource: ILocalDataSource;
@@ -205,8 +204,9 @@ export default class UsersRepository {
         let dto: RemoteUserDTO = new RemoteUserDTO();
 
         dto.id = usersIds[i]?.toString() || '-1';
-        // eslint-disable-next-line no-await-in-loop
+
         try {
+          // eslint-disable-next-line no-await-in-loop
           dto = await this.remoteDataSource.getUser(dto);
         } catch (e) {
           dto.name = 'Unknown';

package/src/Presentation/Views/DialogInfo/DialogInfo.scss

@@ -13,21 +13,32 @@ $dialog-information-container-dialog-information-height: 64px;
   justify-content: space-between;
   align-self: stretch;
   flex-shrink: 0;
+  font: var(--title-title-large);
   position: relative;
   border-bottom: 1px solid var(--divider);
   height: $dialog-information-container-dialog-information-height;
+
+  .dialog-header__icon {
+      svg {
+        width: 24px;
+        height: 24px;
+        fill: var(--main-text);
+      }
+    }
+}
+.header-dialog-info-icon {
+  width: 24px;
+  height: 24px;
+  fill: var(--secondary-elements);
 }
+
 .header-dialog-info-headline {
   color: var(--main-text, #0b1b0f);
   text-align: left;
   font: var(--title-title-large);
   position: relative;
 }
-.header-dialog-info-icon {
-  width: 24px;
-  height: 24px;
-  fill: var(--secondary-elements);
-}
+
 
 .dialog-information-profile,
 .dialog-information-profile * {
@@ -108,7 +119,6 @@ $dialog-information-container-dialog-information-height: 64px;
   box-sizing: border-box;
 }
 .dialog-info-action-wrapper-settings {
-  background: var(--color-background, #ffffff);
   padding: 16px;
   display: flex;
   flex-direction: row;

package/src/Presentation/Views/DialogInfo/DialogInfo.tsx

@@ -397,8 +397,8 @@ const DialogInfo = ({
                 >
                   <EditDialog
                     disableActions={disableAction}
-                    nameDialog={dialogViewModel?.entity.name || dialog?.name}
-                    typeDialog={dialogViewModel?.entity.type || dialog?.type}
+                    nameDialog={dialogViewModel?.entity?.name || dialog?.name}
+                    typeDialog={dialogViewModel?.entity?.type || dialog?.type}
                     ulrIcon={getUrlAvatar(dialogViewModel?.entity || dialog)}
                     typeAddEditDialog={TypeOpenDialog.edit}
                     clickUpdatedHandler={getDialogUpdatedInfoHandler}

package/src/Presentation/Views/DialogInfo/MembersList/MembersList.scss

@@ -20,6 +20,15 @@ $members-container-header-height: 64px;
   border-width: 0 0 1px 0;
 
   height: $members-container-header-height;
+
+  .dialog-header__icon {
+    svg {
+      width: 24px;
+      height: 24px;
+      fill: var(--main-text);
+      padding: 0;
+    }
+  }
 }
 .members-container-header-left {
   display: flex;

package/src/Presentation/Views/DialogList/useDialogListViewModel.ts

@@ -157,6 +157,27 @@ export default function useDialogListViewModel(
     });
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-empty-function
+  function informDataSources(item: DialogEntity) {
+    const updateCurrentDialogInDataSourceUseCase: UpdateCurrentDialogInDataSourceUseCase =
+      new UpdateCurrentDialogInDataSourceUseCase(
+        new DialogsRepository(
+          currentContext.storage.LOCAL_DATA_SOURCE,
+          remoteDataSourceMock,
+        ),
+        item as GroupDialogEntity,
+        QBConfig,
+      );
+
+    updateCurrentDialogInDataSourceUseCase.execute().catch((e) => {
+      console.log(
+        'Error updateCurrentDialogInDataSourceUseCase: ',
+        stringifyError(e),
+      );
+      throw new Error(stringifyError(e));
+    });
+  }
+
   const dialogUpdateHandler = (dialogInfo: DialogEventInfo) => {
     console.log('call dialogUpdateHandler in useDialogListView:', dialogInfo);
     if (
@@ -256,7 +277,15 @@ export default function useDialogListViewModel(
         setDialogs((prevDialogs) => {
           const newDialogs = prevDialogs.map((dialog) => {
             if (dialog.id === dialogInfo.dialogInfo?.id) {
-              return dialogInfo.dialogInfo as PublicDialogEntity;
+              const updatedDialogInfo = {
+                ...dialogInfo.dialogInfo,
+                unreadMessageCount:
+                  dialog.id === newDialog?.id
+                    ? 0
+                    : dialogInfo.dialogInfo.unreadMessageCount,
+              };
+
+              return updatedDialogInfo as PublicDialogEntity;
             }
 
             return dialog;
@@ -270,12 +299,6 @@ export default function useDialogListViewModel(
                   new Date(a.updatedAt).getTime();
           });
 
-          // const sortedData = [...newDialogs].sort((a, b) => {
-          //     return (
-          //         new Date(b.lastMessage.dateSent).getTime() - new Date(a.lastMessage.dateSent).getTime()
-          //     );
-          // });
-
           return sortedData;
         });
       }
@@ -534,27 +557,6 @@ export default function useDialogListViewModel(
     return Promise.resolve(resultEnity);
   };
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-empty-function
-  function informDataSources(item: DialogEntity) {
-    const updateCurrentDialogInDataSourceUseCase: UpdateCurrentDialogInDataSourceUseCase =
-      new UpdateCurrentDialogInDataSourceUseCase(
-        new DialogsRepository(
-          currentContext.storage.LOCAL_DATA_SOURCE,
-          remoteDataSourceMock,
-        ),
-        item as GroupDialogEntity,
-        QBConfig,
-      );
-
-    updateCurrentDialogInDataSourceUseCase.execute().catch((e) => {
-      console.log(
-        'Error updateCurrentDialogInDataSourceUseCase: ',
-        stringifyError(e),
-      );
-      throw new Error(stringifyError(e));
-    });
-  }
-
   return {
     get entity(): DialogEntity {
       return newDialog as DialogEntity;

package/src/Presentation/Views/PreviewDialog/PreviewDialog.scss

@@ -206,6 +206,14 @@
   border-width: 0 0 1px 0;
 }
 
+.dialog-preview-container-context-menu {
+  svg {
+    fill: var(--tertiary-elements);
+    width: 24px;
+    height: 24px;
+  }
+}
+
 
 
 

package/src/Presentation/Views/PreviewDialog/PreviewDialog.tsx

@@ -318,7 +318,9 @@ const PreviewDialog = ({
           }}
           placement="left"
         >
-          <MoreSvg />
+          <div className="dialog-preview-container-context-menu">
+            <MoreSvg className="" />
+          </div>
         </Dropdown>
       }
       onClick={() => {

package/src/Presentation/layouts/Desktop/QuickBloxUIKitDesktopLayout.tsx

@@ -432,32 +432,34 @@ const QuickBloxUIKitDesktopLayout = ({
                     />
                   ) : null
                 }
-                renderDialogList={(handleSelectDialog) =>
-                  // eslint-disable-next-line no-nested-ternary
-                  dialogsViewModel?.loading ? (
-                    <div
-                      className="dialog-list__loader-container"
-                      style={{
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                      }}
-                    >
-                      <Loader size="md" className="dialog-list__loader" />
-                    </div>
-                  ) : searchedDialogs.length > 0 ? (
-                    searchedDialogs.map((dlg, index) =>
-                      renderDialogItem(dlg, index, handleSelectDialog),
-                    )
-                  ) : (
-                    <Placeholder
-                      icon={<ChatSvg />}
-                      text="There are no dialogs."
-                      className="dialog-empty-chat-placeholder"
-                    />
-                  )
-                }
+                renderDialogList={(handleSelectDialog) => (
+                  <>
+                    {dialogsViewModel?.loading && (
+                      <div
+                        className="dialog-list__loader-container"
+                        style={{
+                          display: 'flex',
+                          flexDirection: 'row',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                        }}
+                      >
+                        <Loader size="md" className="dialog-list__loader" />
+                      </div>
+                    )}
+                    {searchedDialogs.length > 0 ? (
+                      searchedDialogs.map((dlg, index) =>
+                        renderDialogItem(dlg, index, handleSelectDialog),
+                      )
+                    ) : (
+                      <Placeholder
+                        icon={<ChatSvg />}
+                        text="There are no dialogs."
+                        className="dialog-empty-chat-placeholder"
+                      />
+                    )}
+                  </>
+                )}
               />
             ) : null
           }

package/src/Presentation/ui-components/Button/Button.scss

@@ -77,7 +77,7 @@
 
   &--danger {
     background-color: var(--error);
-    color: var(--secondary-background);
+    color: var(--system);
 
     &:focus {
       outline: 2px solid var(--error-secondary);

package/src/Presentation/ui-components/CheckBox/CheckBox.scss

@@ -5,18 +5,18 @@
   border-radius: 4px;
   padding: 4px;
   justify-content: center;
-  width: 18px;
-  height: 18px;
+  //width: 18px;
+  //height: 18px;
 }
 
 .checkbox-field > input {
-  position: absolute;
+  //position: fixed;
   z-index: -1;
   opacity: 0;
 }
 
 .checkbox-field .icon-checkmark {
-  position: absolute;
+  //position: fixed;
   width: 18px;
   height: 18px;
   fill: var(--main-elements);
@@ -24,7 +24,7 @@
 }
 
 .checkbox-field .icon-check {
-  position: absolute;
+  //position: fixed;
   width: 18px;
   height: 18px;
   fill: var(--secondary-elements);

package/src/Presentation/ui-components/CheckBox/CheckBox.tsx

@@ -19,7 +19,9 @@ export default function CheckBox({
       'disabled': disabled
     })}>
       {checked ? <CheckOnSvg className="icon-checkmark" /> : <CheckOffSvg className="icon-check" />}
-      <input type="checkbox" onChange={() => onChange?.(!checked)} disabled={disabled}  />
+      <input type="checkbox"
+             onChange={() => onChange?.(!checked)}
+             disabled={disabled}  />
     </label>
   );
 }

package/src/Presentation/ui-components/Header/Header.scss

@@ -54,7 +54,7 @@
   &__title {
     color: var(--main-text, #0b1b0f);
     text-align: left;
-    font: var(--title-title-medium);
+    font: var(--title-title-large);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;

package/src/Presentation/ui-components/MessageInput/VoiceRecordingProgress/VoiceRecordingProgress.tsx

@@ -49,7 +49,7 @@ const VoiceRecordingProgress = ({
       stopTimer();
     }, longRec * 1000);
 
-    if (timerId === undefined) {
+    if (!timerId) {
       timerId = setInterval(() => {
         setCurrentTime(Date.now());
       }, 1000);

package/src/Presentation/ui-components/UserListItem/UserListItem.scss

@@ -28,5 +28,9 @@
     line-height: 24px;
     letter-spacing: 0.15px;
     color: var(--main-text);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 180px;
   }
 }

package/src/hooks/useQuickBloxUIKit.ts

@@ -3,6 +3,7 @@ import '../Presentation/Views/Dialog/Dialog.scss';
 import '../Presentation/Views/Dialog/DialogHeader/DialogInfoIcon/DialogInfoIcon.scss';
 import { Tone } from 'qb-ai-rephrase/src/Tone';
 import { toast } from 'react-toastify';
+import QBMediaRecorder from 'media-recorder-js';
 import useQbInitializedDataContext from '../Presentation/providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
 import { DialogEntity } from '../Domain/entity/DialogEntity';
 import { DialogListViewModel } from '../Presentation/Views/DialogList/DialogListViewModel';
@@ -41,7 +42,6 @@ import { UsersListViewModel } from '../Presentation/Views/DialogInfo/UsersList/U
 
 interface QuickBloxUIKitReturn {
   constants: {
-    mimeType: string;
     messagePerPage: number;
     maxFileSize?: number;
     maxWidthToResizing: string;
@@ -65,9 +65,9 @@ interface QuickBloxUIKitReturn {
     showDialogInformation: boolean;
     needDialogInformation: boolean;
     isRecording: boolean;
-    stream?: MediaStream;
+    stream?: MediaStream | null;
     permission: boolean;
-    resultAudioBlob?: Blob;
+    resultAudioBlob?: Blob | null;
     audioChunks: Blob[];
     fileToSend?: File | null;
     messageText: string;
@@ -78,7 +78,6 @@ interface QuickBloxUIKitReturn {
     defaultAITranslateWidget?: AIMessageWidget;
     defaultAIAssistWidget?: AIMessageWidget;
     rephraseTones: Tone[];
-    mimeType: string;
     messagePerPage: number;
     enableForwarding: boolean;
     enableReplying: boolean;
@@ -146,7 +145,7 @@ export default function useQuickBloxUIKit({
   uikitHeightOffset = '0px',
 }: QuickBloxUIKitProps): QuickBloxUIKitReturn {
   // 103
-  const mimeType = 'audio/webm;codecs=opus'; // audio/ogg audio/mpeg audio/webm audio/x-wav audio/mp4
+  // const mimeType = 'audio/webm;codecs=opus'; // audio/ogg audio/mpeg audio/webm audio/x-wav audio/mp4
   const messagePerPage = 47;
 
   const currentContext = useQbInitializedDataContext();
@@ -372,10 +371,14 @@ export default function useQuickBloxUIKit({
   const [fileToSend, setFileToSend] = useState<File | null>(null);
   const [isRecording, setIsRecording] = useState(false);
   const [permission, setPermission] = useState(false);
-  const [stream, setStream] = useState<MediaStream>();
-  const mediaRecorder = useRef<MediaRecorder>();
-  const [resultAudioBlob, setResultAudioBlob] = useState<Blob>();
-  const [audioChunks, setAudioChunks] = useState<Array<Blob>>([]);
+  //
+  const [stream, setStream] = useState<MediaStream | null>(null);
+  const mediaRecorder = useRef<QBMediaRecorder | null>(null);
+  const [resultAudioBlob, setResultAudioBlob] = useState<Blob | null>(null);
+  const [audioChunks, setAudioChunks] = useState<Blob[]>([]);
+  const [peerConnection, setPeerConnection] =
+    useState<RTCPeerConnection | null>(null);
+  //
   const newModal = useModal();
   const [dialogToLeave, setDialogToLeave] = useState<DialogEntity>();
   const [showDialogList, setShowDialogList] = useState<boolean>(true);
@@ -487,191 +490,190 @@ export default function useQuickBloxUIKit({
       });
   };
 
-  const getMicrophonePermission = async () => {
-    if (window) {
-      try {
-        const mediaStream = await navigator.mediaDevices.getUserMedia({
-          audio: true,
-          video: false,
-        });
-
-        setPermission(true);
-        setStream(mediaStream);
-      } catch (err) {
-        showErrorMessage(
-          `The MediaRecorder API throws exception ${stringifyError(err)} .`,
-        );
-      }
-    } else {
-      showErrorMessage(
-        'The MediaRecorder API is not supported in your browser.',
-      );
-    }
-  };
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/require-await
-  const startRecording = async () => {
-    if (!stream) return;
-
-    // Определение браузера
+  // Detect browser and set MIME type
+  const detectBrowserAndMimeType = () => {
     const userAgent = navigator.userAgent.toLowerCase();
     const isChrome =
       /chrome/.test(userAgent) && !/edge|opr|brave/.test(userAgent);
     const isSafari = /^((?!chrome|android).)*safari/.test(userAgent);
     const isFirefox = /firefox/.test(userAgent);
-    const isOther = !isChrome && !isSafari && !isFirefox;
+    const isIOS = /iphone|ipad|ipod/.test(userAgent);
 
-    // eslint-disable-next-line no-nested-ternary
     console.log(
-      'Browser is:',
-      // eslint-disable-next-line no-nested-ternary
-      isChrome
-        ? 'Chrome'
-        : // eslint-disable-next-line no-nested-ternary
-        isSafari
-        ? 'Safari'
-        : isFirefox
-        ? 'Firefox'
-        : 'Other',
+      `Browser detected: ${
+        // eslint-disable-next-line no-nested-ternary
+        isChrome
+          ? 'Chrome'
+          : // eslint-disable-next-line no-nested-ternary
+          isSafari
+          ? 'Safari'
+          : // eslint-disable-next-line no-nested-ternary
+          isFirefox
+          ? 'Firefox'
+          : isIOS
+          ? 'iOS'
+          : 'Other'
+      }`,
     );
 
     const mimeTypes = {
       chrome: ['audio/webm;codecs=opus', 'audio/webm'],
-      safari: ['audio/wav', 'audio/aac'],
+      safari: ['audio/mp4', 'audio/mp4;codecs=mp4a', 'audio/aac', 'audio/wav'],
+      ios: ['audio/mp4', 'audio/mp4;codecs=mp4a', 'audio/aac'],
       firefox: ['audio/ogg', 'audio/webm'],
-      other: ['audio/mp3', 'audio/wav', 'audio/webm'],
+      other: ['audio/webm', 'audio/mp4', 'audio/wav'],
     };
 
-    let mimeContent = 'audio/webm;codecs=opus';
-
-    if (isChrome) {
-      mimeContent =
-        mimeTypes.chrome.find((type) => MediaRecorder.isTypeSupported(type)) ||
-        'audio/webm';
-    } else if (isSafari) {
-      mimeContent =
-        mimeTypes.safari.find((type) => MediaRecorder.isTypeSupported(type)) ||
-        'audio/wav';
-    } else if (isFirefox) {
-      mimeContent =
-        mimeTypes.firefox.find((type) => MediaRecorder.isTypeSupported(type)) ||
-        'audio/webm';
-    } else if (isOther) {
-      mimeContent =
-        mimeTypes.other.find((type) => MediaRecorder.isTypeSupported(type)) ||
-        'audio/wav';
-    }
+    // eslint-disable-next-line no-nested-ternary
+    const targetMimeTypes = isIOS
+      ? mimeTypes.ios
+      : // eslint-disable-next-line no-nested-ternary
+      isSafari
+      ? mimeTypes.safari
+      : // eslint-disable-next-line no-nested-ternary
+      isChrome
+      ? mimeTypes.chrome
+      : isFirefox
+      ? mimeTypes.firefox
+      : mimeTypes.other;
+
+    return (
+      targetMimeTypes.find((type) => QBMediaRecorder.isTypeSupported(type)) ||
+      'audio/wav'
+    );
+  };
 
-    console.log(`Selected MIME-type: ${mimeContent}`);
+  // Request microphone access and setup WebRTC
+  const getMicrophonePermission = async () => {
+    if (!window) {
+      showErrorMessage(
+        'The MediaRecorder API is not supported in your browser.',
+      );
+
+      return;
+    }
 
     try {
-      const media = new MediaRecorder(stream, { mimeType: mimeContent });
+      const mediaStream = await navigator.mediaDevices.getUserMedia({
+        audio: true,
+      });
 
-      mediaRecorder.current = media;
-      mediaRecorder.current.start();
+      // Create WebRTC peer connection
+      const pc = new RTCPeerConnection();
 
-      const localAudioChunks: Blob[] = [];
+      mediaStream
+        .getTracks()
+        .forEach((track) => pc.addTrack(track, mediaStream));
 
-      mediaRecorder.current.ondataavailable = (event) => {
-        if (event.data.size > 0) {
-          localAudioChunks.push(event.data);
-        }
+      pc.ontrack = (event) => {
+        setStream(event.streams[0]);
       };
 
-      setAudioChunks(localAudioChunks);
+      setPeerConnection(pc);
+      setStream(mediaStream);
+      setPermission(true);
+      console.log('Microphone access granted, WebRTC connection established.');
+    } catch (err) {
+      showErrorMessage(
+        `The MediaRecorder API throws exception ${stringifyError(err)}.`,
+      );
+    }
+  };
+
+  // Start recording using QBMediaRecorder
+  const startWebRTCRecording = async () => {
+    try {
+      const audioContext = new AudioContext();
+      const source = audioContext.createMediaStreamSource(stream!);
+      const destination = audioContext.createMediaStreamDestination();
+      source.connect(destination);
+
+      const recorder = new QBMediaRecorder({
+        mimeType: 'audio/mp4',
+        timeslice: 1000, // Chunks of 1 second
+        ignoreMutedMedia: true,
+        onstart: () => console.log('Recording started in startWebRTCRecording'),
+        onstop: (file) => {
+          console.log('Final audio file:', file);
+          setResultAudioBlob(file);
+          setAudioChunks([]); // Clear recorded chunks
+        },
+        ondataavailable: (event) => {
+          if (event.data.size > 0) {
+            setAudioChunks((prevChunks) => [...prevChunks, event.data]);
+          }
+        },
+      });
+
+      mediaRecorder.current = recorder;
+      recorder.start(destination.stream);
+      setIsRecording(true);
+
+      console.log('WebRTC recording started.');
     } catch (error) {
-      console.error('Ошибка при создании MediaRecorder:', error);
+      console.error('Error starting WebRTC recording:', error);
     }
   };
-  // previous version - startRecording:
-  // const startRecording = async () => {
-  //   if (!stream) return;
-  //   const mimeTypes = [
-  //     'audio/aac',
-  //     'audio/mp4',
-  //     'audio/mpeg',
-  //     'audio/ogg',
-  //     'audio/wav',
-  //     'audio/webm',
-  //     'audio/3gpp',
-  //     'audio/flac',
-  //     'audio/x-aiff',
-  //     'audio/x-m4a',
-  //   ];
-  //
-  //   console.log('MIME TYPES: ');
-  //   mimeTypes.forEach((mType) => {
-  //     if (MediaRecorder.isTypeSupported(mimeType)) {
-  //       console.log(`${mType} is supported`);
-  //     } else {
-  //       console.log(`${mType} is not supported`);
-  //     }
-  //   });
-  //   // audio/mp4;codecs=mp4a audio/webm;codecs=opus audio/webm;codecs=vp9,opus
-  //   const mimeContent = window.MediaRecorder.isTypeSupported('audio/mp4')
-  //     ? 'audio/mp4;codecs=mp4a'
-  //     : 'audio/webm;codecs=opus';
-  //
-  //   const media = new MediaRecorder(stream, { mimeType: mimeContent });
-  //
-  //   mediaRecorder.current = media;
-  //   mediaRecorder.current.start();
-  //
-  //   const localAudioChunks: any[] = [];
-  //
-  //   mediaRecorder.current.ondataavailable = (event) => {
-  //     if (typeof event.data === 'undefined') return;
-  //     if (event.data.size === 0) return;
-  //     localAudioChunks.push(event.data);
-  //   };
-  //
-  //   setAudioChunks(localAudioChunks);
-  // };
+  // eslint-disable-next-line @typescript-eslint/require-await
+  const startRecording = async () => {
+    if (!stream) return;
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const stopRecording = () => {
-    if (!mediaRecorder.current) return;
-    mediaRecorder.current.stop();
+    // Detect browser type
+    const userAgent = navigator.userAgent.toLowerCase();
+    const isSafari = /^((?!chrome|android).)*safari/.test(userAgent);
 
-    mediaRecorder.current.onstop = () => {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const mimeContent = window.MediaRecorder.isTypeSupported(
-        'audio/mp4;codecs=mp4a',
-      )
-        ? 'audio/mp4;codecs=mp4a'
-        : 'audio/webm;codecs=opus';
-      // const audioBlob = new Blob(audioChunks, { type: mimeContent }); // mimeType
-      // const mp4Blob = new Blob(recordedChunks, { type: 'video/mp4' });
+    if (isSafari || !window.MediaRecorder) {
+      console.log('Safari detected, using WebRTC.');
+      await startWebRTCRecording();
+      return;
+    }
 
-      // const audioBlob = new Blob(audioChunks, { type: 'video/mp4' }); // mimeType
-      // const audioBlob = new Blob(audioChunks, { type: 'audio/mp4' }); // mimeType
-      const audioBlob = new Blob(audioChunks, { type: 'audio/mp4' });
+    console.log('Using QBMediaRecorder.');
+    const mimeType = detectBrowserAndMimeType();
 
-      setResultAudioBlob(audioBlob);
+    console.log(`Selected MIME-type: ${mimeType}`);
 
-      setAudioChunks([]);
-      //
-      stream?.getAudioTracks().forEach((track) => {
-        track.stop();
-      });
-      setPermission(false);
-      //
-    };
+    const recorder = new QBMediaRecorder({
+      mimeType,
+      timeslice: 1000, // Chunks of 1 second
+      ignoreMutedMedia: true,
+      onstart: () => console.log('Recording started in startRecording'),
+      onstop: (file) => {
+        console.log('Final audio file:', file);
+        setResultAudioBlob(file);
+        setAudioChunks([]); // Clear recorded chunks
+      },
+      ondataavailable: (event) => {
+        if (event.data.size > 0) {
+          setAudioChunks((prev) => [...prev, event.data]);
+        }
+      },
+      onerror: (error) => console.error('Recording error:', error),
+    });
+
+    mediaRecorder.current = recorder;
+    recorder.start(stream);
   };
 
-  const blobToFile = (theBlob: Blob, fileName: string): File => {
-    const b: any = theBlob;
+  // Stop recording
+  const stopRecording = () => {
+    if (!mediaRecorder.current) return;
 
-    // A Blob() is almost a File() - it's just missing the two properties below which we will add
-    b.lastModifiedDate = new Date();
-    b.name = fileName;
+    mediaRecorder.current.stop();
 
-    // Cast to a File() type
-    const resultFile = theBlob as unknown as File;
+    // Stop WebRTC stream
+    if (peerConnection) {
+      peerConnection.close();
+      setPeerConnection(null);
+    }
+  };
 
-    return resultFile;
+  // Convert Blob to File
+  const blobToFile = (blob: Blob, fileName: string): File => {
+    return new File([blob], fileName, { type: blob.type });
   };
 
+
   function sendTextMessageActions(textToSend: string) {
     if (isOnline) {
       // closeReplyMessageFlowHandler
@@ -1081,7 +1083,6 @@ export default function useQuickBloxUIKit({
   // 972
   return {
     constants: {
-      mimeType,
       messagePerPage,
       maxFileSize,
       maxWidthToResizing,
@@ -1116,7 +1117,6 @@ export default function useQuickBloxUIKit({
       defaultAIRephraseWidget,
       defaultAITranslateWidget,
       defaultAIAssistWidget,
-      mimeType,
       messagePerPage,
       maxTokensForAIRephrase,
       rephraseTones,

package/tsconfig.buildlib.json

@@ -26,7 +26,8 @@
   },
   "include": [
     "src",
-    "global.d.ts"
+    "global.d.ts",
+    "media-recorder-js.d.ts",
   ],
   "exclude": [
     "node_modules",

package/tsconfig.json

@@ -27,7 +27,8 @@
   },
   "include": [
     "src",
-    "global.d.ts"
+    "global.d.ts",
+    "media-recorder-js.d.ts"
   ],
   "exclude": ["node_modules", "dist"]
 }

package/webpack.app.config.js

@@ -14,6 +14,8 @@ module.exports = {
     extensions: ['.tsx', '.ts', '.js'],
     alias: {
       path: require.resolve("path-browserify"), // Поддержка path-browserify
+      './errors': path.resolve(__dirname, 'node_modules/media-recorder-js/src/errors.js'),
+      './mimeTypes': path.resolve(__dirname, 'node_modules/media-recorder-js/src/mimeTypes.js'),
     },
   },
   module: {

package/webpack.lib.config-debug.js

@@ -16,6 +16,10 @@ module.exports = {
   },
   resolve: {
     extensions: ['.tsx', '.ts', '.js'],
+    alias: {
+      './errors': path.resolve(__dirname, 'node_modules/media-recorder-js/src/errors.js'),
+      './mimeTypes': path.resolve(__dirname, 'node_modules/media-recorder-js/src/mimeTypes.js'),
+    },
     modules: [path.resolve(__dirname, 'src'), 'node_modules'],
   },
   externals: {

package/webpack.lib.config.js

@@ -16,6 +16,10 @@ module.exports = {
     },
     resolve: {
         extensions: ['.tsx', '.ts', '.js'],
+        alias: {
+          './errors': path.resolve(__dirname, 'node_modules/media-recorder-js/src/errors.js'),
+          './mimeTypes': path.resolve(__dirname, 'node_modules/media-recorder-js/src/mimeTypes.js'),
+        },
         modules: [path.resolve(__dirname, 'src'), 'node_modules'],
     },
     externals: {