added audio and video messages

web/js/recording.js

@@ -0,0 +1,162 @@
+// Voice and video recording functionality
+
+let mediaRecorder;
+let recordedChunks = [];
+let isRecording = false;
+let recordingType = null; // 'voice' or 'video'
+
+// Toggle voice recording
+async function toggleVoiceRecording() {
+  if (isRecording) {
+    stopRecording();
+  } else {
+    await startVoiceRecording();
+  }
+}
+
+// Toggle video recording
+async function toggleVideoRecording() {
+  if (isRecording) {
+    stopRecording();
+  } else {
+    await startVideoRecording();
+  }
+}
+
+// Start voice recording
+async function startVoiceRecording() {
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+
+    mediaRecorder = new MediaRecorder(stream);
+    recordedChunks = [];
+
+    mediaRecorder.ondataavailable = (event) => {
+      if (event.data.size > 0) {
+        recordedChunks.push(event.data);
+      }
+    };
+
+    mediaRecorder.onstop = async () => {
+      const blob = new Blob(recordedChunks, { type: 'audio/webm' });
+
+      // Create a temporary file object
+      const file = new File([blob], `voice_message_${Date.now()}.webm`, { type: 'audio/webm' });
+
+      // Send the voice message
+      await sendFileMessage(file);
+
+      // Stop the tracks
+      stream.getTracks().forEach(track => track.stop());
+    };
+
+    mediaRecorder.start();
+    isRecording = true;
+    recordingType = 'voice';
+
+    // Update UI to show recording state
+    updateRecordingUI(true);
+
+    console.log('Voice recording started');
+  } catch (error) {
+    console.error('Error starting voice recording:', error);
+    showAlert('Microphone access denied. Please allow microphone access to record voice messages.', 'error');
+  }
+}
+
+// Start video recording
+async function startVideoRecording() {
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({
+      video: { width: { ideal: 640 }, height: { ideal: 480 } },
+      audio: true
+    });
+
+    mediaRecorder = new MediaRecorder(stream);
+    recordedChunks = [];
+
+    mediaRecorder.ondataavailable = (event) => {
+      if (event.data.size > 0) {
+        recordedChunks.push(event.data);
+      }
+    };
+
+    mediaRecorder.onstop = async () => {
+      const blob = new Blob(recordedChunks, { type: 'video/webm' });
+
+      // Create a temporary file object
+      const file = new File([blob], `video_message_${Date.now()}.webm`, { type: 'video/webm' });
+
+      // Send the video message
+      await sendFileMessage(file);
+
+      // Stop the tracks
+      stream.getTracks().forEach(track => track.stop());
+    };
+
+    mediaRecorder.start();
+    isRecording = true;
+    recordingType = 'video';
+
+    // Update UI to show recording state
+    updateRecordingUI(true);
+
+    console.log('Video recording started');
+  } catch (error) {
+    console.error('Error starting video recording:', error);
+    showAlert('Camera access denied. Please allow camera and microphone access to record video messages.', 'error');
+  }
+}
+
+// Stop recording
+function stopRecording() {
+  if (mediaRecorder && isRecording) {
+    mediaRecorder.stop();
+    isRecording = false;
+    recordingType = null;
+
+    // Update UI to show stopped state
+    updateRecordingUI(false);
+
+    console.log('Recording stopped');
+  }
+}
+
+// Update UI based on recording state
+function updateRecordingUI(isRecording) {
+  const voiceBtn = document.getElementById('recordVoiceBtn');
+  const videoBtn = document.getElementById('recordVideoBtn');
+
+  if (isRecording) {
+    // Add recording class to the active button
+    if (recordingType === 'voice') {
+      voiceBtn.classList.add('recording');
+      voiceBtn.textContent = '●'; // Solid circle to indicate recording
+    } else if (recordingType === 'video') {
+      videoBtn.classList.add('recording');
+      videoBtn.textContent = '●'; // Solid circle to indicate recording
+    }
+  } else {
+    // Remove recording class from both buttons
+    voiceBtn.classList.remove('recording');
+    videoBtn.classList.remove('recording');
+
+    // Reset button texts
+    voiceBtn.textContent = '●';
+    videoBtn.textContent = '◉';
+  }
+}
+
+// Handle window unload to clean up resources
+window.addEventListener('beforeunload', () => {
+  if (isRecording) {
+    stopRecording();
+  }
+});
+
+// Also stop recording when leaving the page
+window.addEventListener('pagehide', () => {
+  if (isRecording) {
+    stopRecording();
+  }
+});