mirror of
https://gitlab.rlp.net/proj-wise2526-video2document/video2document.git
synced 2026-06-15 18:01:52 +02:00
Polished the code in the script.js and renderer.js
This commit is contained in:
+103
-59
@@ -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);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
+198
-137
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user