quickblox-react-ui-kit 0.4.2-beta.6 → 0.4.2-beta.7

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,158 @@ 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);
-    } catch (error) {
-      console.error('Ошибка при создании MediaRecorder:', error);
+      setPeerConnection(pc);
+      setStream(mediaStream);
+      setPermission(true);
+      console.log('Microphone access granted, WebRTC connection established.');
+    } catch (err) {
+      showErrorMessage(
+        `The MediaRecorder API throws exception ${stringifyError(err)}.`,
+      );
     }
   };
-  // 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/no-unused-vars
-  const stopRecording = () => {
-    if (!mediaRecorder.current) return;
-    mediaRecorder.current.stop();
+  // Start recording using QBMediaRecorder
+  // eslint-disable-next-line @typescript-eslint/require-await
+  const startRecording = async () => {
+    if (!stream) return;
 
-    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' });
+    const mimeType = detectBrowserAndMimeType();
 
-      // 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(`Selected MIME-type: ${mimeType}`);
 
-      setResultAudioBlob(audioBlob);
+    const recorder = new QBMediaRecorder({
+      mimeType,
+      timeslice: 1000, // Chunks of 1 second
+      ignoreMutedMedia: true,
+      onstart: () => console.log('Recording started'),
+      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),
+    });
 
-      setAudioChunks([]);
-      //
-      stream?.getAudioTracks().forEach((track) => {
-        track.stop();
-      });
-      setPermission(false);
-      //
-    };
+    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 });
   };
 
+  // const blobToFile = (theBlob: Blob, fileName: string): File => {
+  //   const b: any = theBlob;
+  //
+  //   // 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;
+  //
+  //   // Cast to a File() type
+  //   const resultFile = theBlob as unknown as File;
+  //
+  //   return resultFile;
+  // };
+
   function sendTextMessageActions(textToSend: string) {
     if (isOnline) {
       // closeReplyMessageFlowHandler
@@ -1081,7 +1051,6 @@ export default function useQuickBloxUIKit({
   // 972
   return {
     constants: {
-      mimeType,
       messagePerPage,
       maxFileSize,
       maxWidthToResizing,
@@ -1116,7 +1085,6 @@ export default function useQuickBloxUIKit({
       defaultAIRephraseWidget,
       defaultAITranslateWidget,
       defaultAIAssistWidget,
-      mimeType,
       messagePerPage,
       maxTokensForAIRephrase,
       rephraseTones,

package/tsconfig.json

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

package/webpack.config.js

@@ -15,6 +15,10 @@ module.exports = {
     },
     resolve: {
         extensions: ['.ts', '.tsx'],
+        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'),
+        },
     },
     externals: {
         "react": "react",
@@ -29,7 +33,16 @@ module.exports = {
                     // Creates style nodes from JS strings
                     'style-loader',
                     // Translates CSS into CommonJS
-                    'css-loader'
+                    'css-loader',
+                    {
+                        loader: 'sass-loader',
+                        options: {
+                            implementation: require('sass'),
+                            sassOptions: {
+                                quietDeps: true, // Отключает устаревшие предупреждения
+                            },
+                        },
+                    },
                 ],
             },
             {