firefox handle server messages: disconnect, wait

Audio-Transcription-Firefox/background.js

@@ -1,7 +1,7 @@
-browser.runtime.onMessage.addListener(function(request, sender, sendResponse) {
+browser.runtime.onMessage.addListener(async function(request, sender, sendResponse) {
   const { action, data } = request;
   if (action === "transcript") {
-    browser.tabs.query({ active: true, currentWindow: true })
+    await browser.tabs.query({ active: true, currentWindow: true })
       .then((tabs) => {
         const tabId = tabs[0].id;
         browser.tabs.sendMessage(tabId, { action: "show_transcript", data });
@@ -12,9 +12,53 @@ browser.runtime.onMessage.addListener(function(request, sender, sendResponse) {
   }
   if (action === "updateSelectedLanguage") {
     const detectedLanguage = data;
-    if (detectedLanguage) {
+    try {
-      browser.runtime.sendMessage({ action: "updateSelectedLanguage", detectedLanguage });
+      await browser.storage.local.set({ selectedLanguage: detectedLanguage });
-      browser.storage.local.set({ selectedLanguage: detectedLanguage });
+      browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
+        const tabId = tabs[0].id;
+        browser.tabs.sendMessage(tabId, { action: "updateSelectedLanguage", detectedLanguage });
+      });
+    } catch (error) {
+      console.error("Error updateSelectedLanguage:", error);
+    }
+  }
+  if (action === "toggleCaptureButtons") {    
+    try {
+      await browser.storage.local.set({ capturingState: { isCapturing: false } });
+      browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
+        const tabId = tabs[0].id;
+        browser.tabs.sendMessage(tabId, { action: "toggleCaptureButtons", data: false });
+      });
+    } catch (error) {
+      console.error("Error updating capturing state:", error);
+    }
+
+    try{
+      await browser.tabs.query({ active: true, currentWindow: true })
+        .then((tabs) => {
+          const tabId = tabs[0].id;
+          browser.tabs.sendMessage(tabId, { action: "stopCapture", data });
+        })
+        .catch((error) => {
+          console.error("Error retrieving active tab:", error);
+        }); 
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  
+  if (action === "showPopup") {
+    try{
+      await browser.tabs.query({ active: true, currentWindow: true })
+        .then((tabs) => {
+          const tabId = tabs[0].id;
+          browser.tabs.sendMessage(tabId, { action: "showWaitPopup", data });
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+    } catch (error) {
+      console.error(error);
     }
   }
 });

Audio-Transcription-Firefox/content.js

@@ -18,6 +18,16 @@ function handlePlaybackStateChange(event) {
   isPaused = event.target.paused;
 }
 
+function generateUUID() {
+  let dt = new Date().getTime();
+  const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    const r = (dt + Math.random() * 16) % 16 | 0;
+    dt = Math.floor(dt / 16);
+    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+  });
+  return uuid;
+}
+
 
 /**
  * Resamples the audio data to a target sample rate of 16kHz.
@@ -59,9 +69,12 @@ function startRecording(data) {
     if (language === null && !data.useMultilingual) {
       language = 'en';
     }
+
+    const uuid = generateUUID();
     socket.onopen = function(e) { 
       socket.send(
         JSON.stringify({
+            uid: uuid,
             multilingual: data.useMultilingual,
             language: data.language,
             task: data.task
@@ -70,25 +83,33 @@ function startRecording(data) {
     };
 
     let isServerReady = false;
-    socket.onmessage = (event) => {
+    socket.onmessage = async (event) => {
-      if (!isServerReady){
+      const data = JSON.parse(event.data);
+      if (data["uid"] !== uuid)
+        return;
+      
+      if (data["status"] === "WAIT"){
+        await browser.runtime.sendMessage({ action: "showPopup", data: data["message"] })
+        return;
+      }
+      
+      if (!isServerReady && data["message"] === "SERVER_READY"){
         isServerReady = true;
         return;
       }
 
       if (language === null ){
-        const data = JSON.parse(event.data);
         language = data["language"];
-
+        await browser.runtime.sendMessage({ action: "updateSelectedLanguage", data: language })      
-        browser.runtime.sendMessage({ action: "updateSelectedLanguage", data: language })
-          .catch(function(error) {
-            console.error("Error sending message:", error);
-          });
         return
       }
 
-      const data = event.data;;
+      if (data["message"] === "DISCONNECT"){
-      browser.runtime.sendMessage({ action: "transcript", data })
+        await browser.runtime.sendMessage({ action: "toggleCaptureButtons", data: false })        
+        return
+      }
+
+      await browser.runtime.sendMessage({ action: "transcript", data: event.data })
           .catch(function(error) {
             console.error("Error sending message:", error);
           });
@@ -110,9 +131,15 @@ function startRecording(data) {
         const audioData16kHz = resampleTo16kHZ(inputData, audioContext.sampleRate);
 
         audioDataCache.push(inputData);
-
+        
         // feed inputs and run
-        socket.send(audioData16kHz);
+        const base64AudioData = btoa(String.fromCharCode.apply(null, new Uint8Array(audioData16kHz.buffer)));
+        
+        socket.send(
+          JSON.stringify({
+            "audio": base64AudioData
+          })
+        );
       };
 
       // Prevent page mute
@@ -127,6 +154,52 @@ var elem_text = null;
 var segments = [];
 var text_segments = [];
 
+function initPopupElement() {
+  if (document.getElementById('popupElement')) {
+    return;
+  }
+
+  const popupContainer = document.createElement('div');
+  popupContainer.id = 'popupElement';
+  popupContainer.style.cssText = 'position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; color: black; padding: 16px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); display: none; text-align: center;';
+
+  const popupText = document.createElement('span');
+  popupText.textContent = 'Default Text';
+  popupText.className = 'popupText';
+  popupText.style.fontSize = '24px';
+  popupContainer.appendChild(popupText);
+
+  const buttonContainer = document.createElement('div');
+  buttonContainer.style.marginTop = '8px';
+  const closePopupButton = document.createElement('button');
+  closePopupButton.textContent = 'Close';
+  closePopupButton.style.backgroundColor = '#65428A';
+  closePopupButton.style.color = 'white';
+  closePopupButton.style.border = 'none';
+  closePopupButton.style.padding = '8px 16px'; // Add padding for better click area
+  closePopupButton.style.cursor = 'pointer';
+  closePopupButton.addEventListener('click', async () => {
+    popupContainer.style.display = 'none';
+    await browser.runtime.sendMessage({ action: 'toggleCaptureButtons', data: false });
+  });
+  buttonContainer.appendChild(closePopupButton);
+  popupContainer.appendChild(buttonContainer);
+
+  document.body.appendChild(popupContainer);
+}
+
+
+function showPopup(customText) {
+  const popup = document.getElementById('popupElement');
+  const popupText = popup.querySelector('.popupText');
+
+  if (popup && popupText) {
+      popupText.textContent = customText || 'Default Text'; // Set default text if custom text is not provided
+      popup.style.display = 'block';
+  }
+}
+
+
 function init_element() {
     if (document.getElementById('transcription')) {
         return;
@@ -264,10 +337,17 @@ browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
 
     remove_element();
 
+  } else if (action === "showWaitPopup") {
+    
+    initPopupElement();
+
+    showPopup(`Estimated wait time ~ ${Math.round(data)} minutes`);
+
   } else if (action === "show_transcript"){
     if (!isCapturing) return;
     init_element();    
     message = JSON.parse(data);
+    message = message["segments"];
     
     var text = '';
     for (var i = 0; i < message.length; i++) {

Audio-Transcription-Firefox/popup.html

@@ -15,6 +15,8 @@
     <input type="checkbox" id="useServerCheckbox">
     <label for="useServerCheckbox">Use Collabora Whisper-Live Server</label>
   </div>
+  <textarea id="waitTextBox" style="display: none;"></textarea>
+
   <div class="checkbox-container">
     <input type="checkbox" id="useMultilingualCheckbox">
     <label for="useMultilingualCheckbox">Use Multilingual Model</label>

Audio-Transcription-Firefox/popup.js

@@ -113,7 +113,9 @@ document.addEventListener("DOMContentLoaded", function() {
   function toggleCaptureButtons(isCapturing) {
     startButton.disabled = isCapturing;
     stopButton.disabled = !isCapturing;
-    useServerCheckbox.disabled = isCapturing; // Disable checkbox if capturing
+    useServerCheckbox.disabled = isCapturing;
+    useMultilingualCheckbox.disabled = isCapturing;
+
     startButton.classList.toggle("disabled", isCapturing);
     stopButton.classList.toggle("disabled", !isCapturing);
   }
@@ -152,7 +154,7 @@ document.addEventListener("DOMContentLoaded", function() {
 
   browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
     if (request.action === "updateSelectedLanguage") {
-      const detectedLanguage = request.detectedLanguage;
+      const detectedLanguage = request.data;
   
       if (detectedLanguage) {
         languageDropdown.value = detectedLanguage;
@@ -161,4 +163,14 @@ document.addEventListener("DOMContentLoaded", function() {
       }
     }
   });
+
+  browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
+    if (request.action === "toggleCaptureButtons") {
+      toggleCaptureButtons(false);
+      browser.storage.local.set({ capturingState: { isCapturing: false } })
+        .catch(function(error) {
+          console.error("Error storing capturing state:", error);
+        });
+    }
+  });
 });