Implemented a dropdown field for the languages as well as functions and a file to easily implement other languages.

electron/main/index.html

@@ -10,9 +10,10 @@
  
 <div class="mitte" id="mitte"> 
   <div class="flagsBtns" id="flagsBtns">
-    <button class="de_Btn" id="de_Btn" onclick="changeLanguage('de')"><img src="flags/germany-flag-png-large.jpg" width="25px" height="20px"/></button>
+    <select name="ai_type" id="ai_type">
-    <button class="eng_Btn" id="eng_Btn" onclick="changeLanguage('en')"><img src="flags/united-kingdom-flag-png-large.jpg" width="25px" height="20px"/></button>
+    </select>
-    <button class="in_Btn" id="in_Btn" onclick="changeLanguage('in')"><img src="flags/india-flag-png-large.png" width="25px" height="20px"/></button>
+    <select name="language_option" id="language_option">
+    </select>
   </div>
 
   <h1 id="h1">Video to document</h1> 
@@ -46,6 +47,7 @@
 </div>
 </div>
   
+<script src="languages.js"></script>
 <script src="script.js"></script>
 <script src="./renderer.js"></script>
 </body>

electron/main/languages.js

@@ -0,0 +1,36 @@
+var languageOptions = {
+    "eng":{
+        "title": "Video to document",
+        "h1": "Video to document",
+        "p1": "Drag and drop video file",
+        "fileName": "No video chosen",
+        "manualUploadBtn": "Search video",
+        "checkbox_group": "Choose prefered document style:",
+        "label_format": "Meeting report",
+        "label_summary": "Summary with timestamps",
+        "submitButton": "Submit"
+    },
+    "de":{
+        "title": "Video zu Dokument",
+        "h1": "Video zu Dokument",
+        "p1": "Video per Drag & Drop ablegen",
+        "fileName": "Kein Video ausgewaehlt",
+        "manualUploadBtn": "Video suchen",
+        "checkbox_group": "Bevorzugte Dokumentvarianten:",
+        "label_format": "Meeting Bericht",
+        "label_summary": "Zusammenfassung mit Zeitstempeln",
+        "submitButton": "Absenden"
+    },
+    "in":{
+        "title": "दस्तावेज़ के लिए वीडियो",
+        "h1": "दस्तावेज़ के लिए वीडियो",
+        "p1": "वीडियो फ़ाइल खींचें और छोड़ें",
+        "fileName": "कोई वीडियो नहीं चुना गया",
+        "manualUploadBtn": "वीडियो खोजें",
+        "checkbox_group": "पसंदीदा दस्तावेज़ शैली चुनें:",
+        "label_format": "बैठक रिपोर्ट",
+        "label_summary": "टाइमस्टैम्प के साथ सारांश",
+        "submitButton": "जमा करना"
+    }
+    
+};

electron/main/preload.js

@@ -7,6 +7,10 @@ try {
     contextBridge.exposeInMainWorld("extractor", {
         extract: (file) => ipcRenderer.send("extract", file)
     })
+    contextBridge.exposeInMainWorld("electronAPI", {
+        getFilePath: (file) => {return webUtils.getPathForFile(file)}
+    })
+    
 } catch (error) {
     console.log("Error in preload.js");
 }

electron/main/renderer.js

@@ -4,8 +4,7 @@ uploadContainer.addEventListener("dragover", (e) =>{
         e.stopPropagation();
         e.preventDefault();
     } catch (error) {
-        console.log("Error in renderer.js dragover listener function");
+        console.log("Error in renderer.js dragover listener function")
-        console.log(error);
     }
     
 });
@@ -22,13 +21,21 @@ uploadContainer.addEventListener("drop", (e) => {
             console.log(filePath)
 
             const files1 = e.dataTransfer.files;
-            setCurrentPathVariable(filePath);
             handleFiles(files1);
         }
     } catch (error) {
         console.log("Error in renderer.js with the listerner for the drop function");
-        console.log(error);
     } 
-    
-    
 })
+
+
+ window.addEventListener('load', (e) => { 
+    console.log("test");
+    loadLanguageOptions(); 
+});
+
+language_option.addEventListener('change', (e)=>{
+    const select = document.getElementById('language_option');
+    console.log(select.value);
+    changeLanguage(select.value);
+});

electron/main/script.js

@@ -1,11 +1,9 @@
-var curSelecPath = "";
 //listener for the file explorer search
 manualUploadBtn.addEventListener('click', () => {
   try {
     videoUpload.click();
   } catch (error) {
     console.log("Error in manualBtn EventListener click");
-    console.log(error);
   }
   
 });
@@ -24,16 +22,16 @@ function checkBoxes() {
 
     if(isChecked){
       //Code to submit the video
-      if(curSelecPath.endsWith(".mp4") || holdy.endsWith(".mov") || holdy.endsWith(".avi") || holdy.endsWith( ".mkv")){
+      var pathTest = window.electronAPI.getFilePath(videoUpload.files[0]);
-        window.extractor.extract({inputVideoPath: curSelecPath, outputType:"wav"})
+      if(pathTest.endsWith(".mp4") || holdy.endsWith(".mov") || holdy.endsWith(".avi") || holdy.endsWith( ".mkv")){
+        window.extractor.extract({inputVideoPath: pathTest, outputType:"wav"})
       }
     } 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)
-    console.log(error);
   }
   
 // mapFunctions.get("extraction-video-to-audio").function({inputVideoPath:"./a.mp4", outputType:"wav"})
@@ -42,58 +40,31 @@ function checkBoxes() {
 //language changing feature
 function changeLanguage(language) {
   try {
-    if (language === 'en') {
+    document.getElementById('title').textContent = languageOptions[language].title;
-        document.getElementById('title').textContent = 'Video to document';
+    document.getElementById('h1').textContent = languageOptions[language].h1;
-        document.getElementById('h1').textContent = 'Video to document';
+    document.getElementById('p1').textContent = languageOptions[language].p1;
-        document.getElementById('p1').textContent = 'Drag and drop video file';
+    document.getElementById('fileName').textContent = languageOptions[language].fileName;
-        document.getElementById('fileName').textContent = 'No video chosen';
+    document.getElementById('manualUploadBtn').textContent = languageOptions[language].manualUploadBtn;
-        document.getElementById('manualUploadBtn').textContent = 'Search video';
+    document.getElementById('checkbox_group').textContent = languageOptions[language].checkbox_group;
-        document.getElementById('checkbox_group').textContent = 'Choose prefered document style:';
+    document.getElementById('label_format').textContent = languageOptions[language].label_format;
-        document.getElementById('label_format').textContent = 'Meeting report';
+    document.getElementById('label_summary').textContent = languageOptions[language].label_summary;
-        document.getElementById('label_summary').textContent = 'Summary with timestamps';
+    document.getElementById('submitButton').textContent = languageOptions[language].submitButton;
-        document.getElementById('submitButton').textContent = 'Submit';
-    } else if (language === 'de') {
-        document.getElementById('title').textContent = 'Video zu Dokument';
-        document.getElementById('h1').textContent = 'Video zu Dokument';
-        document.getElementById('p1').textContent = 'Video per Drag & Drop ablegen';
-        document.getElementById('fileName').textContent = 'Kein Video ausgewaehlt';
-        document.getElementById('manualUploadBtn').textContent = 'Video suchen';
-        document.getElementById('checkbox_group').textContent = 'Bevorzugte Dokumentvarianten:';
-        document.getElementById('label_format').textContent = 'Meeting Bericht';
-        document.getElementById('label_summary').textContent = 'Zusammenfassung mit Zeitstempeln';
-        document.getElementById('submitButton').textContent = 'Absenden';
-    } else if(language == "in") {
-        document.getElementById('title').textContent = 'दस्तावेज़ के लिए वीडियो';
-        document.getElementById('h1').textContent = 'दस्तावेज़ के लिए वीडियो';
-        document.getElementById('p1').textContent = 'वीडियो फ़ाइल खींचें और छोड़ें';
-        document.getElementById('fileName').textContent = 'कोई वीडियो नहीं चुना गया';
-        document.getElementById('manualUploadBtn').textContent = 'वीडियो खोजें';
-        document.getElementById('checkbox_group').textContent = 'पसंदीदा दस्तावेज़ शैली चुनें:';
-        document.getElementById('label_format').textContent = 'बैठक रिपोर्ट';
-        document.getElementById('label_summary').textContent = 'टाइमस्टैम्प के साथ सारांश';
-        document.getElementById('submitButton').textContent = 'जमा करना';
-    }
   } catch (error) {
-    console.log("Error in script.js changeLanguage function");
     console.log(error);
   }
         
 }
 
-
 //listener for the file explorer search when something got selected
 videoUpload.addEventListener('change', () => {
   try {
     handleFiles(videoUpload.files);
   } catch (error) {
     console.log("Error in manualBtn EventListener change");
-    console.log(error);
   }
   
 });
 
-
-
 //function to display the file path in the drop down box
 function handleFiles(files) {
   try {
@@ -102,16 +73,10 @@ function handleFiles(files) {
       if (file.type.startsWith('video/')) {
         videoUpload.files = files;
         fileName.textContent = `Chosen video: ${file.name}`;
-        setCurrentPathVariable(files[0])
-      }else{
-        setCurrentPathVariable("");
       }
-    }else{
-      setCurrentPathVariable("");
     }
   } catch (error) {
     console.log("Error in script.js handleFiles function");
-    console.log(error);
   }
   
 }
@@ -124,16 +89,44 @@ function updateProgressBar(bar, value){
     bar.querySelector(".progress_text").textContent = `${value}%`;
   } catch (error) {
     console.log("Error in scripts.js updateProgressBar function");
-    console.log(error);
   }
   
 }
 
-function setCurrentPathVariable(value){
+//function to load ai options to the drop down list
+function loadAiOptions(options){
   try {
-    curSelecPath = value + "";
+    var menu = document.getElementById('ai_type');
+    for(i = 0; i < options.length; i++){
+      var opty = options[i];
+      var namey = "option" + i;
+      var choice = document.createElement(namey);
+      choice.textContent = "t";
+      choice.value = i;
+      menu.appendChild(choice);
+    }
   } catch (error) {
-    console.log("Error in script.js setCurrentPathVariable");
+    console.log("Error in script.js loadAiOptions function");
+    console.log(error);
+  }
+}
+
+//function to load language options to the drop down list
+function loadLanguageOptions(){
+  try {
+    var menu = document.getElementById('language_option');
+    var object_holdy;
+    var choice ;
+    object_holdy = Object.keys(languageOptions);
+    for(i = 0; i < object_holdy.length; i++){
+      choice = document.createElement('option');
+      choice.textContent = object_holdy[i];
+      choice.value = object_holdy[i];
+      menu.appendChild(choice);
+    }
+    
+  } catch (error) {
+    console.log("Error in script.js loadLanguageOptions function");
     console.log(error);
   }
 }