diff --git a/electron/main/renderer.js b/electron/main/renderer.js index a45626a..2aef9fb 100644 --- a/electron/main/renderer.js +++ b/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", () => { - try { - if (currentStep > 1) showStep(currentStep - 1); - } catch (error) { - - } -}); +Listeners for Step 2 -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) => { - loadSpeakerOptions(arg); - setSpeakerAudiosValue(arg); -}); +Listeners for Step 4 +*/ +//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); +}); + + + diff --git a/electron/main/script.js b/electron/main/script.js index 7af27d1..19e6fff 100644 --- a/electron/main/script.js +++ b/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"]; - 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 +Functions used in the setup or affect most of the gui - 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); - } - -} - -//language changing feature +//language changing feature => changes the language of every displayed text 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 -function updateProgressBar(bar, value) { +//Video thumbnail generation. Shows a scene from the selected video file as a preview +function generateThumbnail(path){ try { - value = Math.round(value); - bar.querySelector(".progress_fill").style.width = `${value}%`; - bar.querySelector(".progress_text").textContent = `${value}%`; + 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; } 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();