fix: make caption overlay line count configurable

Fixes collabora/WhisperLive#486

Audio-Transcription-Chrome/content.js

@@ -3,6 +3,7 @@ var elem_text = null;
 
 var segments = [];
 var text_segments = [];
+var captionLineCount = 3;
 var allSegments = [];
 var lastIncompleteSegment = null;
 
@@ -87,22 +88,23 @@ function showPopup(customText) {
 }
 
 
-function init_element() {
+function init_element(lines = 3) {
+    captionLineCount = Math.min(Math.max(parseInt(lines, 10) || 3, 1), 8);
     if (document.getElementById('transcription')) {
         return;
     }
 
     elem_container = document.createElement('div');
     elem_container.id = "transcription";
-    elem_container.style.cssText = 'padding-top:16px;font-size:18px;position: fixed; top: 85%; left: 50%; transform: translate(-50%, -50%);line-height:18px;width:500px;height:90px;opacity:0.9;z-index:100;background:black;border-radius:10px;color:white;';
+    elem_container.style.cssText = 'padding-top:16px;font-size:18px;position: fixed; top: 85%; left: 50%; transform: translate(-50%, -50%);line-height:18px;width:500px;height:' + (captionLineCount * 30) + 'px;opacity:0.9;z-index:100;background:black;border-radius:10px;color:white;';
 
-    for (var i = 0; i < 4; i++) {
+    for (var i = 0; i <= captionLineCount; i++) {
         elem_text = document.createElement('span');
         elem_text.style.cssText = 'position: absolute;padding-left:16px;padding-right:16px;';
         elem_text.id = "t" + i;
         elem_container.appendChild(elem_text);
 
-        if (i == 3) {
+        if (i == captionLineCount) {
             elem_text.style.top = "-1000px"
         }
     }
@@ -196,7 +198,7 @@ function get_lines(elem, line_height) {
 
 function remove_element() {
     var elem = document.getElementById('transcription')
-    for (var i = 0; i < 4; i++) {
+    for (var i = 0; i <= captionLineCount; i++) {
         document.getElementById("t" + i).remove();
     }
     elem.remove()
@@ -205,6 +207,7 @@ function remove_element() {
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     const { type, data } = request;
     const saveCaptions = data.saveCaptions;
+    const captionLines = data.captionLines || captionLineCount;
 
     if (type === "STOP") {        
         if (saveCaptions === true) {
@@ -234,7 +237,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
         return true;
     }
 
-    init_element();
+    init_element(captionLines);
 
     try {
         const message = JSON.parse(data.data);
@@ -262,11 +265,11 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
         }
         text = text.replace(/(\r\n|\n|\r)/gm, "");
         
-        var elem = document.getElementById('t3');
+        var elem = document.getElementById('t' + captionLineCount);
         if (elem) {
             elem.textContent = text;
 
-            var line_height_style = getStyle('t3', 'line-height');
+            var line_height_style = getStyle('t' + captionLineCount, 'line-height');
             var line_height = parseInt(line_height_style.substring(0, line_height_style.length - 2));
             var divHeight = elem.offsetHeight;
             var lines = divHeight / line_height;
@@ -276,27 +279,27 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
             
             elem.textContent = '';
 
-            if (text_segments.length > 2) {
+            if (text_segments.length > captionLineCount - 1) {
-                for (var i = 0; i < 3; i++) {
+                for (var i = 0; i < captionLineCount; i++) {
-                    document.getElementById('t' + i).textContent = text_segments[text_segments.length - 3 + i];
+                    document.getElementById('t' + i).textContent = text_segments[text_segments.length - captionLineCount + i];
                 }
             } else {
-                for (var i = 0; i < 3; i++) {
+                for (var i = 0; i < captionLineCount; i++) {
                     document.getElementById('t' + i).textContent = '';
                 }
             }
 
-            if (text_segments.length <= 2) {
+            if (text_segments.length <= captionLineCount - 1) {
                 for (var i = 0; i < text_segments.length; i++) {
                     document.getElementById('t' + i).textContent = text_segments[i];
                 }
             } else {
-                for (var i = 0; i < 3; i++) {
+                for (var i = 0; i < captionLineCount; i++) {
-                    document.getElementById('t' + i).textContent = text_segments[text_segments.length - 3 + i];
+                    document.getElementById('t' + i).textContent = text_segments[text_segments.length - captionLineCount + i];
                 }
             }
 
-            for (var i = 1; i < 3; i++)
+            for (var i = 1; i < captionLineCount; i++)
             {
                 var parent_elem = document.getElementById('t' + (i - 1));
                 var elem = document.getElementById('t' + i);

Audio-Transcription-Chrome/popup.html

@@ -23,6 +23,14 @@
     <input type="checkbox" id="saveCaptionsCheckbox">
     <label for="saveCaptions">Download SRT file at Stop Capture</label>
   </div>
+  <div class="dropdown-container">
+    <label for="captionLinesDropdown">Caption Lines:</label>
+    <select id="captionLinesDropdown">
+      <option value="3" selected>3 lines</option>
+      <option value="5">5 lines</option>
+      <option value="8">8 lines</option>
+    </select>
+  </div>
   <div class="dropdown-container">
     <label for="languageDropdown">Select Language:</label>
     <select id="languageDropdown">

Audio-Transcription-Chrome/popup.js

@@ -9,9 +9,11 @@ document.addEventListener("DOMContentLoaded", function () {
   const languageDropdown = document.getElementById('languageDropdown');
   const taskDropdown = document.getElementById('taskDropdown');
   const modelSizeDropdown = document.getElementById('modelSizeDropdown');
+  const captionLinesDropdown = document.getElementById('captionLinesDropdown');
   let selectedLanguage = null;
   let selectedTask = taskDropdown.value;
   let selectedModelSize = modelSizeDropdown.value;
+  let selectedCaptionLines = captionLinesDropdown.value;
 
   // Add click event listeners to the buttons
   startButton.addEventListener("click", startCapture);
@@ -66,6 +68,13 @@ document.addEventListener("DOMContentLoaded", function () {
     }
   });
 
+  chrome.storage.local.get("selectedCaptionLines", ({ selectedCaptionLines: storedCaptionLines }) => {
+    if (storedCaptionLines !== undefined) {
+      captionLinesDropdown.value = storedCaptionLines;
+      selectedCaptionLines = storedCaptionLines;
+    }
+  });
+
   // Function to handle the start capture button click event
   async function startCapture() {
     // Ignore click if the button is disabled
@@ -96,6 +105,7 @@ document.addEventListener("DOMContentLoaded", function () {
         modelSize: selectedModelSize,
         useVad: useVadCheckbox.checked,
         saveCaptions: saveCaptionsCheckbox.checked,
+        captionLines: Number(selectedCaptionLines),
       }, () => {
         // Update capturing state in storage and toggle the buttons
         chrome.storage.local.set({ capturingState: { isCapturing: true } }, () => {
@@ -144,6 +154,7 @@ document.addEventListener("DOMContentLoaded", function () {
     modelSizeDropdown.disabled = isCapturing;
     languageDropdown.disabled = isCapturing;
     taskDropdown.disabled = isCapturing;
+    captionLinesDropdown.disabled = isCapturing;
     startButton.classList.toggle("disabled", isCapturing);
     stopButton.classList.toggle("disabled", !isCapturing);
   }
@@ -183,6 +194,11 @@ document.addEventListener("DOMContentLoaded", function () {
     chrome.storage.local.set({ selectedModelSize });
   });
 
+  captionLinesDropdown.addEventListener('change', function() {
+    selectedCaptionLines = captionLinesDropdown.value;
+    chrome.storage.local.set({ selectedCaptionLines });
+  });
+
   chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
     if (request.action === "updateSelectedLanguage") {
       const detectedLanguage = request.detectedLanguage;

Audio-Transcription-Firefox/content.js

@@ -162,6 +162,7 @@ var elem_text = null;
 
 var segments = [];
 var text_segments = [];
+var captionLineCount = 3;
 
 function initPopupElement() {
   if (document.getElementById('popupElement')) {
@@ -209,22 +210,23 @@ function showPopup(customText) {
 }
 
 
-function init_element() {
+function init_element(lines = 3) {
+    captionLineCount = Math.min(Math.max(parseInt(lines, 10) || 3, 1), 8);
     if (document.getElementById('transcription')) {
         return;
     }
 
     elem_container = document.createElement('div');
     elem_container.id = "transcription";
-    elem_container.style.cssText = 'padding-top:16px;font-size:18px;line-height:18px;position:fixed;top:85%;left:50%;transform:translate(-50%,-50%);width:500px;height:90px;opacity:0.9;z-index:100;background:black;border-radius:10px;color:white;';
+    elem_container.style.cssText = 'padding-top:16px;font-size:18px;line-height:18px;position:fixed;top:85%;left:50%;transform:translate(-50%,-50%);width:500px;height:' + (captionLineCount * 30) + 'px;opacity:0.9;z-index:100;background:black;border-radius:10px;color:white;';
 
-    for (var i = 0; i < 4; i++) {
+    for (var i = 0; i <= captionLineCount; i++) {
         elem_text = document.createElement('span');
         elem_text.style.cssText = 'position: absolute;padding-left:16px;padding-right:16px;';
         elem_text.id = "t" + i;
         elem_container.appendChild(elem_text);
 
-        if (i == 3) {
+        if (i == captionLineCount) {
             elem_text.style.top = "-1000px"
         }
     }
@@ -318,7 +320,7 @@ function get_lines(elem, line_height) {
 
 function remove_element() {
     var elem = document.getElementById('transcription')
-    for (var i = 0; i < 4; i++) {
+    for (var i = 0; i <= captionLineCount; i++) {
         document.getElementById("t" + i).remove();
     }
     elem.remove()
@@ -327,6 +329,7 @@ function remove_element() {
 browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
   const { action, data } = request;
   const saveCaption = data.saveCaption || false;
+  const captionLines = data.captionLines || captionLineCount;
 
   if (action === "startCapture") {
       isCapturing = true;
@@ -364,7 +367,7 @@ browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
 
   } else if (action === "show_transcript"){
     if (!isCapturing) return;
-    init_element();    
+    init_element(captionLines);
     message = JSON.parse(data.data);
     message = message["segments"];
 
@@ -391,10 +394,10 @@ browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
     }
     text = text.replace(/(\r\n|\n|\r)/gm, "");
     
-    var elem = document.getElementById('t3');
+    var elem = document.getElementById('t' + captionLineCount);
     elem.textContent = text;
   
-    var line_height_style = getStyle('t3', 'line-height');
+    var line_height_style = getStyle('t' + captionLineCount, 'line-height');
     var line_height = parseInt(line_height_style.substring(0, line_height_style.length - 2));
     var divHeight = elem.offsetHeight;
     var lines = divHeight / line_height;
@@ -404,27 +407,27 @@ browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
     
     elem.textContent = '';
   
-    if (text_segments.length > 2) {
+    if (text_segments.length > captionLineCount - 1) {
-        for (var i = 0; i < 3; i++) {
+        for (var i = 0; i < captionLineCount; i++) {
-            document.getElementById('t' + i).textContent = text_segments[text_segments.length - 3 + i];
+            document.getElementById('t' + i).textContent = text_segments[text_segments.length - captionLineCount + i];
         }
     } else {
-        for (var i = 0; i < 3; i++) {
+        for (var i = 0; i < captionLineCount; i++) {
             document.getElementById('t' + i).textContent = '';
         }
     }
   
-    if (text_segments.length <= 2) {
+    if (text_segments.length <= captionLineCount - 1) {
         for (var i = 0; i < text_segments.length; i++) {
             document.getElementById('t' + i).textContent = text_segments[i];
         }
     } else {
-        for (var i = 0; i < 3; i++) {
+        for (var i = 0; i < captionLineCount; i++) {
-            document.getElementById('t' + i).textContent = text_segments[text_segments.length - 3 + i];
+            document.getElementById('t' + i).textContent = text_segments[text_segments.length - captionLineCount + i];
         }
     }
   
-    for (var i = 1; i < 3; i++)
+    for (var i = 1; i < captionLineCount; i++)
     {
         var parent_elem = document.getElementById('t' + (i - 1));
         var elem = document.getElementById('t' + i);

Audio-Transcription-Firefox/popup.html

@@ -24,6 +24,14 @@
     <label for="saveCaption">Download SRT file at Stop Capture</label>
   </div>
   <textarea id="waitTextBox" style="display: none;"></textarea>
+  <div class="dropdown-container">
+    <label for="captionLinesDropdown">Caption Lines:</label>
+    <select id="captionLinesDropdown">
+      <option value="3" selected>3 lines</option>
+      <option value="5">5 lines</option>
+      <option value="8">8 lines</option>
+    </select>
+  </div>
   <div class="dropdown-container">
     <label for="languageDropdown">Select Language:</label>
     <select id="languageDropdown">

Audio-Transcription-Firefox/popup.js

@@ -8,9 +8,11 @@ document.addEventListener("DOMContentLoaded", function() {
   const languageDropdown = document.getElementById('languageDropdown');
   const taskDropdown = document.getElementById('taskDropdown');
   const modelSizeDropdown = document.getElementById('modelSizeDropdown');
+  const captionLinesDropdown = document.getElementById('captionLinesDropdown');
   let selectedLanguage = null;
   let selectedTask = taskDropdown.value;
   let selectedModelSize = modelSizeDropdown.value;
+  let selectedCaptionLines = captionLinesDropdown.value;
   
 
   browser.storage.local.get("capturingState")
@@ -69,6 +71,13 @@ document.addEventListener("DOMContentLoaded", function() {
     }
   });
 
+  browser.storage.local.get("selectedCaptionLines", ({ selectedCaptionLines: storedCaptionLines }) => {
+    if (storedCaptionLines !== undefined) {
+      captionLinesDropdown.value = storedCaptionLines;
+      selectedCaptionLines = storedCaptionLines;
+    }
+  });
+
   startButton.addEventListener("click", function() {
     let host = "localhost";
     let port = "9090";
@@ -93,6 +102,7 @@ document.addEventListener("DOMContentLoaded", function() {
               modelSize: selectedModelSize,
               useVad: useVadCheckbox.checked,
               saveCaption: saveCaptionCheckbox.checked,
+              captionLines: Number(selectedCaptionLines),
             } 
           });
         toggleCaptureButtons(true);
@@ -136,6 +146,7 @@ document.addEventListener("DOMContentLoaded", function() {
     modelSizeDropdown.disabled = isCapturing;
     languageDropdown.disabled = isCapturing;
     taskDropdown.disabled = isCapturing;
+    captionLinesDropdown.disabled = isCapturing;
     startButton.classList.toggle("disabled", isCapturing);
     stopButton.classList.toggle("disabled", !isCapturing);
   }
@@ -175,6 +186,11 @@ document.addEventListener("DOMContentLoaded", function() {
     browser.storage.local.set({ selectedModelSize });
   });
 
+  captionLinesDropdown.addEventListener('change', function() {
+    selectedCaptionLines = captionLinesDropdown.value;
+    browser.storage.local.set({ selectedCaptionLines });
+  });
+
   browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
     if (request.action === "updateSelectedLanguage") {
       const detectedLanguage = request.data;