From ab0e737f337e7fad09601beb096f6eb82da3e008 Mon Sep 17 00:00:00 2001 From: Verena Schulz Date: Sun, 16 Nov 2025 15:06:47 +0100 Subject: [PATCH 01/26] Submit button disabled without video, bigger middle part and dropzone, button in dropzone --- electron/main/index.html | 7 +++---- electron/main/script.js | 19 ++++++++++++++++++- electron/main/style.css | 19 +++++++++++++++++-- 3 files changed, 38 insertions(+), 7 deletions(-) diff --git a/electron/main/index.html b/electron/main/index.html index a8430af..acb2de5 100644 --- a/electron/main/index.html +++ b/electron/main/index.html @@ -21,10 +21,9 @@

Drag and drop video file

No video chosen
-
- - + +
@@ -39,7 +38,7 @@
- +
diff --git a/electron/main/script.js b/electron/main/script.js index c66c976..68c0bc8 100644 --- a/electron/main/script.js +++ b/electron/main/script.js @@ -129,4 +129,21 @@ function loadLanguageOptions(){ console.log("Error in script.js loadLanguageOptions function"); console.log(error); } -} \ No newline at end of file +} + +function activateSubmitBtn(hasFile){ + submitButton.disabled = !hasFile; +} + +videoUpload.addEventListener("change", () => { + activateSubmitBtn(videoUpload.files.length > 0); +}); + +uploadContainer.addEventListener("drop", (e) => { + e.preventDefault(); + const file = e.dataTransfer.files[0]; + + if(file){ + activateSubmitBtn(true); + } +}); \ No newline at end of file diff --git a/electron/main/style.css b/electron/main/style.css index e9abb50..35f8488 100644 --- a/electron/main/style.css +++ b/electron/main/style.css @@ -5,7 +5,7 @@ body { justify-content: center; align-items: center; height: 100vh; - background-color: #555; + background-color: #666; gap: 15px; margin: 0; } @@ -17,7 +17,8 @@ body { border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); text-align: center; - width: 400px; + width: 350px; + height: 100px; transition: border 0.3s, background-color 0.3s; border: 2px dashed #ccc; } @@ -40,11 +41,15 @@ body { margin-top: 10px; font-size: 14px; color: #333; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .custom-btn { padding: 10px 20px; + margin-top: 40px; background-color: #007BFF; color: white; border: none; @@ -84,6 +89,8 @@ gap: 5px; .submit-btn { padding: 10px 20px; + margin-top: 10px; + margin-bottom: 10px; background-color: #007BFF; color: white; border: none; @@ -92,9 +99,16 @@ gap: 5px; font-size: 14px; } +.submit-btn:disabled { + opacity: 0.5; + cursor: not-allowed; + pointer-events: none; +} + .mitte { background-color: #f2f3f4; display: flex; + width: 500px; flex-direction: column; align-items: center; padding: 5% 50px; @@ -103,6 +117,7 @@ gap: 5px; border: 1px; border-color: black; border-style: solid; + border-radius: 6px; } h1 { From 1e3d830ae271c26803902f323636689d3b8b8700 Mon Sep 17 00:00:00 2001 From: "eric.minning" Date: Mon, 17 Nov 2025 11:27:17 +0100 Subject: [PATCH 02/26] Fixed a merg mistake and added try/catch lines --- electron/main/renderer.js | 19 ++++++++++++++----- electron/main/script.js | 33 ++++++++++++++++++++++++--------- 2 files changed, 38 insertions(+), 14 deletions(-) diff --git a/electron/main/renderer.js b/electron/main/renderer.js index 2291f64..48a0edb 100644 --- a/electron/main/renderer.js +++ b/electron/main/renderer.js @@ -30,12 +30,21 @@ uploadContainer.addEventListener("drop", (e) => { window.addEventListener('load', (e) => { - console.log("test"); - loadLanguageOptions(); + try { + console.log("test"); + loadLanguageOptions(); + } catch (error) { + + } + }); language_option.addEventListener('change', (e)=>{ - const select = document.getElementById('language_option'); - console.log(select.value); - changeLanguage(select.value); + try { + const select = document.getElementById('language_option'); + changeLanguage(select.value); + } catch (error) { + + } + }); diff --git a/electron/main/script.js b/electron/main/script.js index 68c0bc8..7907f40 100644 --- a/electron/main/script.js +++ b/electron/main/script.js @@ -4,6 +4,7 @@ manualUploadBtn.addEventListener('click', () => { videoUpload.click(); } catch (error) { console.log("Error in manualBtn EventListener click"); + console.log(error); } }); @@ -23,18 +24,18 @@ function checkBoxes() { if(isChecked){ //Code to submit the video var pathTest = window.electronAPI.getFilePath(videoUpload.files[0]); - if(pathTest.endsWith(".mp4") || holdy.endsWith(".mov") || holdy.endsWith(".avi") || holdy.endsWith( ".mkv")){ - window.extractor.extract({inputVideoPath: pathTest, outputType:"wav"}) + if(pathTest.endsWith(".mp4") || pathTest.endsWith(".mov") || pathTest.endsWith(".avi") || pathTest.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) + console.log("Error in script.js checkBoxes function"); + console.log(error); } -// mapFunctions.get("extraction-video-to-audio").function({inputVideoPath:"./a.mp4", outputType:"wav"}) } //language changing feature @@ -50,6 +51,7 @@ function changeLanguage(language) { document.getElementById('label_summary').textContent = languageOptions[language].label_summary; document.getElementById('submitButton').textContent = languageOptions[language].submitButton; } catch (error) { + console.log("Error in script.js changeLanguage function"); console.log(error); } @@ -61,6 +63,7 @@ videoUpload.addEventListener('change', () => { handleFiles(videoUpload.files); } catch (error) { console.log("Error in manualBtn EventListener change"); + console.log(error); } }); @@ -77,6 +80,7 @@ function handleFiles(files) { } } catch (error) { console.log("Error in script.js handleFiles function"); + console.log(error); } } @@ -89,6 +93,7 @@ function updateProgressBar(bar, value){ bar.querySelector(".progress_text").textContent = `${value}%`; } catch (error) { console.log("Error in scripts.js updateProgressBar function"); + console.log(error); } } @@ -136,14 +141,24 @@ function activateSubmitBtn(hasFile){ } videoUpload.addEventListener("change", () => { - activateSubmitBtn(videoUpload.files.length > 0); + try { + activateSubmitBtn(videoUpload.files.length > 0); + } catch (error) { + console.log(error); + } + }); uploadContainer.addEventListener("drop", (e) => { - e.preventDefault(); - const file = e.dataTransfer.files[0]; + try { + e.preventDefault(); + const file = e.dataTransfer.files[0]; - if(file){ - activateSubmitBtn(true); + if(file){ + activateSubmitBtn(true); + } + } catch (error) { + console.log(error); } + }); \ No newline at end of file From ada231cd2836a68aa9b1825524847efcd4354e1d Mon Sep 17 00:00:00 2001 From: "eric.minning" Date: Mon, 17 Nov 2025 13:15:37 +0100 Subject: [PATCH 03/26] Implemented a deaktivateProgressbar function --- electron/main/index.html | 4 +++- electron/main/script.js | 35 ++++++++++++++++++++++++++++------- electron/main/style.css | 1 + 3 files changed, 32 insertions(+), 8 deletions(-) diff --git a/electron/main/index.html b/electron/main/index.html index acb2de5..81473cb 100644 --- a/electron/main/index.html +++ b/electron/main/index.html @@ -12,6 +12,8 @@
+
@@ -40,7 +42,7 @@ -
+
0%
diff --git a/electron/main/script.js b/electron/main/script.js index 7907f40..a1ee2e8 100644 --- a/electron/main/script.js +++ b/electron/main/script.js @@ -23,9 +23,17 @@ function checkBoxes() { if(isChecked){ //Code to submit the video + var selectedCheckboxes = {}; + checkboxes.forEach(function(checkbox){ + if(checkbox.checked){ + selectedCheckboxes[checkbox.nextElementSibling.textContent] = ""; + } + }); + console.log(selectedCheckboxes); var pathTest = window.electronAPI.getFilePath(videoUpload.files[0]); if(pathTest.endsWith(".mp4") || pathTest.endsWith(".mov") || pathTest.endsWith(".avi") || pathTest.endsWith( ".mkv")){ - window.extractor.extract({inputVideoPath: pathTest, outputType:"wav"}); + document.getElementById("progressbar").style.visibility = "visible"; + //window.extractor.extract({inputVideoPath: pathTest, outputType:"wav"}); } } else { //language only english at the moment @@ -102,12 +110,13 @@ function updateProgressBar(bar, value){ function loadAiOptions(options){ try { var menu = document.getElementById('ai_type'); + var object_holdy; + var choice ; + object_holdy = Object.keys(languageOptions); 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; + choice = document.createElement('option'); + choice.textContent = object_holdy[i]; + choice.value = object_holdy[i]; menu.appendChild(choice); } } catch (error) { @@ -137,7 +146,19 @@ function loadLanguageOptions(){ } function activateSubmitBtn(hasFile){ - submitButton.disabled = !hasFile; + try { + submitButton.disabled = !hasFile; + } catch (error) { + console.log(error); + } +} + +function deaktivateProgressbar(){ + try { + document.getElementById("progressbar").style.visibility = "hidden"; + } catch (error) { + console.log(error); + } } videoUpload.addEventListener("change", () => { diff --git a/electron/main/style.css b/electron/main/style.css index 35f8488..a376058 100644 --- a/electron/main/style.css +++ b/electron/main/style.css @@ -131,6 +131,7 @@ h1 { background: rgb(42, 46, 78); border-radius: 5px; overflow: hidden; + visibility: hidden; } .progress_fill{ From f8fb71e1467730a47adcbec510c0798453f5800f Mon Sep 17 00:00:00 2001 From: "eric.minning" Date: Mon, 17 Nov 2025 15:02:22 +0100 Subject: [PATCH 04/26] Added Verenas function to have a preview image of the selected video file --- electron/main/index.html | 5 +++ electron/main/renderer.js | 33 ++++++++++++++++++ electron/main/script.js | 54 ++++++----------------------- electron/main/style.css | 72 +++++++++++++++++++++++---------------- 4 files changed, 92 insertions(+), 72 deletions(-) diff --git a/electron/main/index.html b/electron/main/index.html index 81473cb..d9d09ed 100644 --- a/electron/main/index.html +++ b/electron/main/index.html @@ -22,7 +22,12 @@

Drag and drop video file

+
No video chosen
+
+ +
diff --git a/electron/main/renderer.js b/electron/main/renderer.js index 48a0edb..32ea225 100644 --- a/electron/main/renderer.js +++ b/electron/main/renderer.js @@ -22,7 +22,9 @@ uploadContainer.addEventListener("drop", (e) => { const files1 = e.dataTransfer.files; handleFiles(files1); + generateThumbnail(filePath); } + } catch (error) { console.log("Error in renderer.js with the listerner for the drop function"); } @@ -48,3 +50,34 @@ language_option.addEventListener('change', (e)=>{ } }); + +videoUpload.addEventListener("change", () => { + try { + activateSubmitBtn(videoUpload.files.length > 0); + } catch (error) { + 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); + } + +}); + +//listener for the file explorer search +manualUploadBtn.addEventListener('click', () => { + try { + videoUpload.click(); + } catch (error) { + console.log("Error in manualBtn EventListener click"); + console.log(error); + } + +}); \ No newline at end of file diff --git a/electron/main/script.js b/electron/main/script.js index a1ee2e8..852b98d 100644 --- a/electron/main/script.js +++ b/electron/main/script.js @@ -1,13 +1,3 @@ -//listener for the file explorer search -manualUploadBtn.addEventListener('click', () => { - try { - videoUpload.click(); - } catch (error) { - console.log("Error in manualBtn EventListener click"); - console.log(error); - } - -}); //function to check if one checkbox is at least klicked function checkBoxes() { @@ -65,17 +55,6 @@ function changeLanguage(language) { } -//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 { @@ -161,25 +140,14 @@ function deaktivateProgressbar(){ } } -videoUpload.addEventListener("change", () => { - try { - activateSubmitBtn(videoUpload.files.length > 0); - } catch (error) { - console.log(error); - } - -}); - -uploadContainer.addEventListener("drop", (e) => { - try { - e.preventDefault(); - const file = e.dataTransfer.files[0]; - - if(file){ - activateSubmitBtn(true); - } - } catch (error) { - console.log(error); - } - -}); \ No newline at end of file +//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; +} diff --git a/electron/main/style.css b/electron/main/style.css index a376058..074b62e 100644 --- a/electron/main/style.css +++ b/electron/main/style.css @@ -5,12 +5,12 @@ body { justify-content: center; align-items: center; height: 100vh; - background-color: #666; + background-color: #999; gap: 15px; margin: 0; } - - + + .upload-container { background: white; padding: 40px; @@ -18,25 +18,25 @@ body { box-shadow: 0 4px 10px rgba(0,0,0,0.1); text-align: center; width: 350px; - height: 100px; + height: 120px; transition: border 0.3s, background-color 0.3s; - border: 2px dashed #ccc; + border: 2px dashed #7378c9; } - - + + .upload-container.dragover { border-color: #007BFF; background-color: #eaf0ff; } - - + + .upload-container p { margin: 0 0 15px 0; font-size: 16px; color: #555; } - - + + .file-name { margin-top: 10px; font-size: 14px; @@ -45,8 +45,22 @@ body { text-overflow: ellipsis; white-space: nowrap; } - - + +#thumbnailContainer { + width: 100%; + display: flex; + justify-content: center; + margin-bottom: 15px; +} + +#thumbnailImage { + width: 200px; + height: auto; + border-radius: 10px; + box-shadow: 0px 4px 10px rgba(0,0,0,0.1); + object-fit: cover; +} + .custom-btn { padding: 10px 20px; margin-top: 40px; @@ -57,27 +71,27 @@ body { cursor: pointer; font-size: 14px; } - - + + .custom-btn:hover { background-color: #0056b3; } - + .submit-btn:hover { background-color: #0056b3; } - + input[type="file"] { display: none; } - + .checkbox-container{ margin-top: 8px; display: flex; align-items: center; gap: 5px; } - + .checkbox-group { margin-top: 15px; margin-bottom: 15px; @@ -86,7 +100,7 @@ gap: 5px; gap: 10px; align-items: flex-start; } - + .submit-btn { padding: 10px 20px; margin-top: 10px; @@ -98,13 +112,13 @@ gap: 5px; cursor: pointer; font-size: 14px; } - + .submit-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } - + .mitte { background-color: #f2f3f4; display: flex; @@ -119,11 +133,11 @@ gap: 5px; border-style: solid; border-radius: 6px; } - + h1 { align-content: center; } - + .progressbar{ position: relative; width: 210px; @@ -133,14 +147,14 @@ h1 { overflow: hidden; visibility: hidden; } - + .progress_fill{ width: 0%; height: 100%; background: green; transition: all 0.2s; } - + .progress_text{ position: absolute; top: 50%; @@ -148,16 +162,16 @@ h1 { transform: translateY(-50%); color: white; } - + .flagsBtns { display: flex; justify-content: flex-end; } - + .de_Btn, .eng_Btn, .in_Btn { padding: 8px 16px; color: white; border: none; border-radius: 8px; cursor: pointer; -} \ No newline at end of file +} From 4f57ec25bf0dc9842d6b71327a269f9f939d580b Mon Sep 17 00:00:00 2001 From: "eric.minning" Date: Mon, 17 Nov 2025 15:18:18 +0100 Subject: [PATCH 05/26] Changed the handleFiles function so it also contains the call for the generateThumbnail function --- electron/main/renderer.js | 3 --- electron/main/script.js | 2 ++ 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/electron/main/renderer.js b/electron/main/renderer.js index 32ea225..7e97240 100644 --- a/electron/main/renderer.js +++ b/electron/main/renderer.js @@ -18,11 +18,8 @@ uploadContainer.addEventListener("drop", (e) => { const filePath = window.explorer.onFileDrop(files[0]) var holdy = filePath + ""; if(holdy.endsWith(".mp4") || holdy.endsWith(".mov") || holdy.endsWith(".avi") || holdy.endsWith( ".mkv")){ - console.log(filePath) - const files1 = e.dataTransfer.files; handleFiles(files1); - generateThumbnail(filePath); } } catch (error) { diff --git a/electron/main/script.js b/electron/main/script.js index 852b98d..003d5f4 100644 --- a/electron/main/script.js +++ b/electron/main/script.js @@ -61,8 +61,10 @@ function handleFiles(files) { if (files.length > 0) { const file = files[0]; if (file.type.startsWith('video/')) { + const filePath = window.explorer.onFileDrop(files[0]) videoUpload.files = files; fileName.textContent = `Chosen video: ${file.name}`; + generateThumbnail(filePath); } } } catch (error) { From 7b01c4f022bb1054b24888c69f3c24a755e3cd44 Mon Sep 17 00:00:00 2001 From: Verena Schulz Date: Mon, 17 Nov 2025 16:00:53 +0100 Subject: [PATCH 06/26] Video icon improvement, changed dropdown alignment --- electron/main/index.html | 2 +- electron/main/style.css | 29 +++++++++++++++++------------ 2 files changed, 18 insertions(+), 13 deletions(-) diff --git a/electron/main/index.html b/electron/main/index.html index d9d09ed..472b823 100644 --- a/electron/main/index.html +++ b/electron/main/index.html @@ -9,7 +9,7 @@
-
+