Polished the code in the script.js and renderer.js

electron/main/renderer.js

@@ -1,4 +1,72 @@
+/*
 
+Listeners for the program setup and changes
+
+*/
+
+//Listener for when the gui has been loaded so it can fill the dop down menus in step 2 and the language options
+window.addEventListener('load', async (e) => { 
+  try {
+      loadLanguageOptions(); 
+      const value = await window.onStartup.getModuleNames();
+      loadAiOptions(value.ai_modules);
+      loadTranscriptionOptions(value.transcription_modules);
+
+  } catch (error) {
+    console.log("Error in the window listener load in the renderer.js \n");
+    console.log(error);
+  }
+    
+});
+
+//Listener if the language of the displayed text's in the gui should be changed 
+language_option.addEventListener('change', (e)=>{
+    try {
+        const select = document.getElementById('language_option');
+        changeLanguage(select.value);
+    } catch (error) {
+        console.log("Error in the language_option change listener in the renderer.js");
+        console.log(error);
+    }
+    
+});
+
+stepButtons.forEach(btn => {
+  btn.addEventListener("click", () => {
+    try {
+      const step = parseInt(btn.dataset.step);
+      showStep(step);
+    } catch (error) {
+      
+    }
+  });
+});
+
+//Listener if the button to change the current step to the previus one is pressed
+prevBtn.addEventListener("click", () => {
+  try {
+    if (currentStep > 1) showStep(currentStep - 1);
+  } catch (error) {
+    
+  }
+});
+
+//Listener if the button to change the current step to the next one is pressed
+nextBtn.addEventListener("click", () => {
+  try {
+    if(currentStep < totalSteps) showStep(currentStep + 1);
+  } catch (error) {
+    
+  }
+});
+
+/*
+
+Listeners for Step 1
+
+*/
+
+//Listener if a file has been draged over the drop down field
 uploadContainer.addEventListener("dragover", (e) =>{
     try {
         e.stopPropagation();
@@ -31,29 +99,6 @@ uploadContainer.addEventListener("drop", (e) => {
     } 
 })
 
-window.addEventListener('load', async (e) => { 
-  try {
-      loadLanguageOptions(); 
-      const value = await window.onStartup.getModuleNames();
-      loadAiOptions(value.ai_modules);
-      loadTranscriptionOptions(value.transcription_modules);
-
-  } catch (error) {
-      
-  }
-    
-});
-
-language_option.addEventListener('change', (e)=>{
-    try {
-        const select = document.getElementById('language_option');
-        changeLanguage(select.value);
-    } catch (error) {
-        
-    }
-    
-});
-
 //listener for the file explorer search when something got selected
 videoUpload.addEventListener("change", () => {
   try {
@@ -77,32 +122,17 @@ manualUploadBtn.addEventListener('click', () => {
   
 });
 
-stepButtons.forEach(btn => {
+/*
-  btn.addEventListener("click", () => {
-    try {
-      const step = parseInt(btn.dataset.step);
-      showStep(step);
-    } catch (error) {
-      
-    }
-  });
-});
 
-prevBtn.addEventListener("click", () => {
+Listeners for Step 2
-  try {
-    if (currentStep > 1) showStep(currentStep - 1);
-  } catch (error) {
-    
-  }
-});
 
-nextBtn.addEventListener("click", () => {
+*/
-  try {
+
-    if(currentStep < totalSteps) showStep(currentStep + 1);
+/*
-  } catch (error) {
+
-    
+Listeners for Step 3
-  }
+
-});
+*/
 
 //Checkboxlistener so that only one can be selected at a time
 docFormat.addEventListener("change", (e) =>{
@@ -166,20 +196,12 @@ docFormatCustom.addEventListener("change", (e) =>{
   }
 });
 
-//Speaker change listener
+/*
-cur_speaker.addEventListener("change", (e) =>{
-  try {
-    document.getElementById("speakerAudioViewer").src = speakerAudios[document.getElementById("cur_speaker").value].src;
-  } catch (error) {
-    
-  }
-});
 
-window.audios.speakerAudios((event, arg) => {
+Listeners for Step 4
-  loadSpeakerOptions(arg);
-  setSpeakerAudiosValue(arg);
-});
 
+*/
+//Functions the the displayed progress in the progressbar can be changed out of the main process
 window.electron.progress((event, arg) => {
     if(arg.curstep == 1){
       setCircleOne();
@@ -239,5 +261,27 @@ function setCircleFour(){
   } 
 };
 
+/*
+
+Listeners for Step 5
+
+*/
+
+//Speaker change listener
+cur_speaker.addEventListener("change", (e) =>{
+  try {
+    document.getElementById("speakerAudioViewer").src = speakerAudios[document.getElementById("cur_speaker").value].src;
+  } catch (error) {
+    
+  }
+});
+//Function so the main process can give the gui a json with the speakers and their audio
+window.audios.speakerAudios((event, arg) => {
+  loadSpeakerOptions(arg);
+  setSpeakerAudiosValue(arg);
+});
+
+
+
 
 

electron/main/script.js

@@ -1,80 +1,12 @@
 let currentVideoPath = null;
-//function to check if one checkbox is at least klicked
-function checkBoxes() {
-  try {
-    const checkboxes = document.querySelectorAll('input[name="docFormat"]');
-    let isChecked = false;
-    var checkedCounter = 0;
-    checkboxes.forEach(function(checkbox){
-      if(checkbox.checked){
-        isChecked = true;
-        checkedCounter++;
-      }
-    });
 
-    if (isChecked) {
+/*
-      //Code to submit the video
-      var selectedCheckboxes = {};
-      checkboxes.forEach(function(checkbox){
-        if(checkbox.checked){
-          selectedCheckboxes[checkbox.nextElementSibling.textContent] = "";
-        } 
-      });
 
-      const testEndings = [".mp4", ".mov", ".avi", ".mkv"];
+Functions used in the setup or affect most of the gui
-      var pathTest = window.electronAPI.getFilePath(videoUpload.files[0]);
-      var pathToLower = pathTest.toLowerCase();
-      if(testEndings.some(e => pathToLower.endsWith(e))){
-        //assembly of the json for the main
 
-        var typeCheckbox;
+*/
-        if(document.getElementById("docFormat").checked) typeCheckbox = document.getElementById("docFormat").value;
-        if(document.getElementById("docFormatSummary1").checked) typeCheckbox = document.getElementById("docFormatSummary1").value;
-        if(document.getElementById("docFormatSummary2").checked) typeCheckbox = document.getElementById("docFormatSummary2").value;
-        if(document.getElementById("docFormatSummary3").checked) typeCheckbox = document.getElementById("docFormatSummary3").value;
-        if(document.getElementById("docFormatCustom").checked) typeCheckbox = document.getElementById("docFormatCustom").value;
 
-        document.getElementById("testy").style.visibility = "visible"
+//language changing feature => changes the language of every displayed text
-        document.getElementById("box1").style.backgroundColor = "red";
-        document.getElementById("box2").style.backgroundColor = "red";
-        document.getElementById("box3").style.backgroundColor = "red";
-        document.getElementById("box4").style.backgroundColor = "red";
-        console.log(selectedCheckboxes);
-        const outputType = document.getElementById("output_type");
-        const transcriptionType = document.getElementById("transkript_type");
-        const aiType = document.getElementById("ai_type");
-        const sendingPackage = {
-          "video": {
-            "module":"extraction-video-to-audio",
-            "inputVideoPath": pathTest
-          },
-          "transcription": {
-            "module": transcriptionType.value
-          },
-          "document": {
-            "module":aiType.value,
-            "type": typeCheckbox,
-            "outputType": outputType.value
-          }
-        };
-        window.submit.submit(sendingPackage)
-      }else{
-        alert('The given file is not compatible. These are the available types: [".mp4", ".mov", ".avi", ".mkv"].');
-      }
-
-
-    } else {
-      //language only english at the moment
-      alert('Please select at least one document type.');
-    }
-  } catch (error) {
-    console.log("Error in script.js checkBoxes function");
-    console.log(error);
-  }
-  
-}
-
-//language changing feature
 function changeLanguage(language) {
   try {
     document.getElementById('labelLanguageFlag').src = languageOptions[language].flagPath;
@@ -86,7 +18,6 @@ function changeLanguage(language) {
     document.getElementById('p1').textContent = languageOptions[language].p1;
     document.getElementById('fileName').textContent = languageOptions[language].fileName;
     document.getElementById('manualUploadBtn').textContent = languageOptions[language].manualUploadBtn;
-    //document.getElementById('checkbox_group').textContent = languageOptions[language].checkbox_group;
     document.getElementById('label_format').textContent = languageOptions[language].label_format;
     document.getElementById('label_summary').textContent = languageOptions[language].label_summary;
     document.getElementById('submitButton').textContent = languageOptions[language].submitButton;
@@ -115,6 +46,43 @@ function changeLanguage(language) {
         
 }
 
+/*
+
+Functions used for the step navigation
+
+*/
+
+//Step-navigation
+const steps = document.querySelectorAll(".step");
+const stepButtons = document.querySelectorAll(".step-item");
+let currentStep = 1;
+const totalSteps = steps.length;
+
+function showStep(stepNumber) {
+  if (stepNumber < 1 || stepNumber > totalSteps){
+    console.error("StepNumber out of Bounds", stepNumber);
+    return;
+  }
+  steps.forEach(step => step.style.display = "none");
+  document.getElementById("step" + stepNumber).style.display = "flex";
+
+  stepButtons.forEach(btn => btn.classList.remove("active"));
+  document.querySelector(`.step-item[data-step="${stepNumber}"]`).classList.add("active");
+  const activeBtn = document.querySelector(`.step-item[data-step="${stepNumber}"]`);
+
+  if(activeBtn) activeBtn.classList.add("active");
+
+  prevBtn.disabled = stepNumber == 1;
+  nextBtn.disabled = stepNumber === totalSteps;
+  currentStep = stepNumber;
+}
+
+/*
+
+Functions used in Step 1
+
+*/
+
 //function to display the file path in the drop down box
 function handleFiles(files) {
   try {
@@ -136,19 +104,32 @@ function handleFiles(files) {
 
 }
 
-//function to regulate the progress on the progressbar
+//Video thumbnail generation. Shows a scene from the selected video file as a preview
-function updateProgressBar(bar, value) {
+function generateThumbnail(path){
   try {
-    value = Math.round(value);
+    const videoElement = document.getElementById("previewThumbnail");
-    bar.querySelector(".progress_fill").style.width = `${value}%`;
+    while (videoElement.firstChild) videoElement.removeChild(videoElement.firstChild);
-    bar.querySelector(".progress_text").textContent = `${value}%`;
+    videoElement.src = path;
+    videoElement.type = "video/mov";
+    videoElement.load();
+    videoElement.style.maxWidth = 40;
+    videoElement.style.maxHeight = 40;
+    videoElement.autoplay = false;
   } catch (error) {
-    console.log("Error in scripts.js updateProgressBar function");
+    console.log("Error in the generateThumbnail function in the script.js file \n");
     console.log(error);
   }
   
 }
 
+
+
+/*
+
+Functions used in Step 2
+
+*/
+
 //function to load ai options to the drop down list
 function loadAiOptions(options){
   try {
@@ -225,6 +206,135 @@ function loadLanguageOptions(){
   }
 }
 
+
+
+/*
+
+Functions used in Step 3
+
+*/
+
+
+
+/*
+
+Functions used in Step 4
+
+*/
+
+//function to check if one checkbox is at least klicked. Final controll function before sending the input to the generation
+function checkBoxes() {
+  try {
+    const checkboxes = document.querySelectorAll('input[name="docFormat"]');
+    let isChecked = false;
+    var checkedCounter = 0;
+    checkboxes.forEach(function(checkbox){
+      if(checkbox.checked){
+        isChecked = true;
+        checkedCounter++;
+      }
+    });
+
+    if (isChecked) {
+      //Code to submit the video
+      var selectedCheckboxes = {};
+      checkboxes.forEach(function(checkbox){
+        if(checkbox.checked){
+          selectedCheckboxes[checkbox.nextElementSibling.textContent] = "";
+        } 
+      });
+
+      const testEndings = [".mp4", ".mov", ".avi", ".mkv"];
+      var pathTest = window.electronAPI.getFilePath(videoUpload.files[0]);
+      var pathToLower = pathTest.toLowerCase();
+      if(testEndings.some(e => pathToLower.endsWith(e))){
+        //assembly of the json for the main
+
+        var typeCheckbox;
+        if(document.getElementById("docFormat").checked) typeCheckbox = document.getElementById("docFormat").value;
+        if(document.getElementById("docFormatSummary1").checked) typeCheckbox = document.getElementById("docFormatSummary1").value;
+        if(document.getElementById("docFormatSummary2").checked) typeCheckbox = document.getElementById("docFormatSummary2").value;
+        if(document.getElementById("docFormatSummary3").checked) typeCheckbox = document.getElementById("docFormatSummary3").value;
+        if(document.getElementById("docFormatCustom").checked) typeCheckbox = document.getElementById("docFormatCustom").value;
+
+        document.getElementById("testy").style.visibility = "visible"
+        document.getElementById("box1").style.backgroundColor = "red";
+        document.getElementById("box2").style.backgroundColor = "red";
+        document.getElementById("box3").style.backgroundColor = "red";
+        document.getElementById("box4").style.backgroundColor = "red";
+        console.log(selectedCheckboxes);
+        const outputType = document.getElementById("output_type");
+        const transcriptionType = document.getElementById("transkript_type");
+        const aiType = document.getElementById("ai_type");
+        const sendingPackage = {
+          "video": {
+            "module":"extraction-video-to-audio",
+            "inputVideoPath": pathTest
+          },
+          "transcription": {
+            "module": transcriptionType.value
+          },
+          "document": {
+            "module":aiType.value,
+            "type": typeCheckbox,
+            "outputType": outputType.value
+          }
+        };
+        window.submit.submit(sendingPackage)
+      }else{
+        alert('The given file is not compatible. These are the available types: [".mp4", ".mov", ".avi", ".mkv"].');
+      }
+
+
+    } else {
+      //language only english at the moment
+      alert('Please select at least one document type.');
+    }
+  } catch (error) {
+    console.log("Error in script.js checkBoxes function");
+    console.log(error);
+  }
+  
+}
+
+//function the the submit button on step 4 can be pressed
+function activateSubmitBtn(hasFile){
+  try {
+    document.getElementById("submitButton").disabled = !hasFile;
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+//function to regulate the progress on the progressbar
+function updateProgressBar(bar, value) {
+  try {
+    value = Math.round(value);
+    bar.querySelector(".progress_fill").style.width = `${value}%`;
+    bar.querySelector(".progress_text").textContent = `${value}%`;
+  } catch (error) {
+    console.log("Error in scripts.js updateProgressBar function");
+    console.log(error);
+  }
+  
+}
+
+//function to hide the progressbar
+function deaktivateProgressbar(){
+  try {
+    document.getElementById("progressbar").style.visibility = "hidden";
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+/*
+
+Functions used in Step 5
+
+*/
+
+
 //function to load speaker options to the drop down list
 function loadSpeakerOptions(options){
   try {
@@ -262,61 +372,6 @@ function loadSpeakerAudio(option){
   }
 }
 
-
-function activateSubmitBtn(hasFile){
-  try {
-    document.getElementById("submitButton").disabled = !hasFile;
-  } catch (error) {
-    console.log(error);
-  }
-}
-
-function deaktivateProgressbar(){
-  try {
-    document.getElementById("progressbar").style.visibility = "hidden";
-  } catch (error) {
-    console.log(error);
-  }
-}
-
-//Video thumbnail generation
-function generateThumbnail(path){
-  const videoElement = document.getElementById("previewThumbnail");
-  while (videoElement.firstChild) videoElement.removeChild(videoElement.firstChild);
-  videoElement.src = path;
-  videoElement.type = "video/mov";
-  videoElement.load();
-  videoElement.style.maxWidth = 40;
-  videoElement.style.maxHeight = 40;
-  videoElement.autoplay = false;
-}
-
-//Step-navigation
-const steps = document.querySelectorAll(".step");
-const stepButtons = document.querySelectorAll(".step-item");
-let currentStep = 1;
-const totalSteps = steps.length;
-
-function showStep(stepNumber) {
-  if (stepNumber < 1 || stepNumber > totalSteps){
-    console.error("StepNumber out of Bounds", stepNumber);
-    return;
-  }
-  steps.forEach(step => step.style.display = "none");
-  document.getElementById("step" + stepNumber).style.display = "flex";
-
-  stepButtons.forEach(btn => btn.classList.remove("active"));
-  document.querySelector(`.step-item[data-step="${stepNumber}"]`).classList.add("active");
-  const activeBtn = document.querySelector(`.step-item[data-step="${stepNumber}"]`);
-
-  if(activeBtn) activeBtn.classList.add("active");
-
-  prevBtn.disabled = stepNumber == 1;
-  nextBtn.disabled = stepNumber === totalSteps;
-  currentStep = stepNumber;
-}
-
-
 //Audio value setter
 var speakerAudios = {};
 var speakerEndValues = {};
@@ -329,7 +384,7 @@ function setSpeakerAudiosValue(valy){
     
   }
 }
-
+//Function to rewrite the speaker name in the json
 function rewriteSpeakerName(){
   try {
     var tempy = document.getElementById("cur_speaker").value;
@@ -339,15 +394,21 @@ function rewriteSpeakerName(){
     console.log("\n\n\n" + error + "\n\n\n")
   }
 }
-
+//Function to send the json with the given names back to the program to rewrite the document file
 function sendSpeakerPackages(){
   try {
     window.submitSpeaker.speaker_submit(speakerAudios);
   } catch (error) {
-    
+    console.log(error);
   }
 }
 
+/*
+
+Functions for Step 6
+
+*/
+
 function fileDownload() {
   try {
     window.download.file_download();