msgs/web/js/recording.js

// 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();
  }
});