feat: Enhance video recorder

packages/react/src/hooks/useMediaRecorder.js

@@ -1,4 +1,4 @@
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 
 function useUserMedia(constraints, videoRef) {
   const [stream, setStream] = useState();
@@ -47,3 +47,80 @@ export function useMediaRecorder({ constraints, onStop, videoRef }) {
 
   return [start, stop];
 }
+
+export function useNewMediaRecorder({ constraints, videoRef, onStop }) {
+  const [stream, setStream] = useState();
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [recorder, setRecorder] = useState();
+  const [recordingData, setRecordingData] = useState(null);
+  const chunks = useRef([]);
+
+  async function startCameraAndMic() {
+    if (isStreaming) return;
+    try {
+      const _stream = await navigator.mediaDevices.getUserMedia(constraints);
+      setStream(_stream);
+      setIsStreaming(true);
+      if (videoRef.current) {
+        videoRef.current.srcObject = _stream;
+      }
+    } catch (error) {
+      console.error('Error starting camera and mic:', error);
+    }
+  }
+
+  async function startRecording() {
+    if (!isStreaming) {
+      console.error('Camera and mic must be on to start recording.');
+      return;
+    }
+
+    chunks.current = [];
+    const _recorder = new MediaRecorder(stream);
+    _recorder.start();
+    setRecorder(_recorder);
+
+    _recorder.addEventListener('dataavailable', (event) => {
+      chunks.current.push(event.data);
+    });
+
+    _recorder.addEventListener('stop', () => {
+      setRecordingData(new Blob(chunks.current, { type: 'video/mp4' }));
+      onStop && onStop(chunks.current);
+    });
+  }
+
+  async function stopRecording() {
+    if (recorder && recorder.state === 'recording') {
+      recorder.stop();
+    }
+  }
+
+  function getRecording() {
+    return recordingData;
+  }
+
+  function deleteRecording() {
+    setRecordingData(null);
+    chunks.current = [];
+  }
+
+  function stopCameraAndMic() {
+    if (stream) {
+      stream.getTracks().forEach((track) => track.stop());
+      setStream(null);
+      setIsStreaming(false);
+    }
+  }
+
+  useEffect(() => () => stopCameraAndMic(), []);
+
+  return {
+    startCameraAndMic,
+    startRecording,
+    stopRecording,
+    getRecording,
+    deleteRecording,
+    stopCameraAndMic,
+  };
+}

packages/react/src/views/ChatInput/ChatInput.styles.js

@@ -118,21 +118,48 @@ export const getCommonRecorderStyles = (theme) => {
       border-radius: 50%;
       background-color: ${theme.colors.destructive};
       margin: auto;
-      margin-right: 8px;
+      margin-right: 5px;
+      margin-left: 5px;
+    `,
+
+    oppositeDot: css`
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+      background-color: ${theme.colors.background};
+      margin: auto;
+      margin-right: 5px;
+      margin-left: 5px;
     `,
 
     controller: css`
-      gap: 0.15rem;
+      width: 100%;
       display: inline-flex;
     `,
 
     timer: css`
       margin: auto;
     `,
+
+    spacer: css`
+      flex-grow: 1;
+    `,
+
     record: css`
       display: flex;
       margin: auto;
     `,
+
+    leftSection: css`
+      display: flex;
+      align-items: left;
+    `,
+
+    rightSection: css`
+      display: flex;
+      align-items: right;
+      margin-top: 0.3rem;
+    `,
     modal: {
       '@media(max-width: 768px)': {
         height: '100%',