diff --git a/electron/main/flags/germany-flag-png-large.jpg b/electron/main/flags/germany-flag-png-large.jpg new file mode 100644 index 0000000..026ee17 Binary files /dev/null and b/electron/main/flags/germany-flag-png-large.jpg differ diff --git a/electron/main/flags/india-flag-png-large.png b/electron/main/flags/india-flag-png-large.png new file mode 100644 index 0000000..16b7b8d Binary files /dev/null and b/electron/main/flags/india-flag-png-large.png differ diff --git a/electron/main/flags/united-kingdom-flag-png-large.jpg b/electron/main/flags/united-kingdom-flag-png-large.jpg new file mode 100644 index 0000000..27b7707 Binary files /dev/null and b/electron/main/flags/united-kingdom-flag-png-large.jpg differ diff --git a/electron/main/index.html b/electron/main/index.html index d75939f..f88b4c2 100644 --- a/electron/main/index.html +++ b/electron/main/index.html @@ -3,15 +3,22 @@ - Video Upload Drag and Drop + Button + Video to document
-

Video to document

+
+ + + +
+ +

Video to document

+
-

Drag and drop video file

+

Drag and drop video file

No video chosen
@@ -19,19 +26,19 @@
- +
- - + +
- - + +
- +
diff --git a/electron/main/preload.js b/electron/main/preload.js index 296d46d..5a7a5d7 100644 --- a/electron/main/preload.js +++ b/electron/main/preload.js @@ -2,6 +2,11 @@ const { contextBridge, ipcRenderer, webUtils } = require('electron') -contextBridge.exposeInMainWorld("explorer", { - onFileDrop: (file) => webUtils.getPathForFile(file) -}) +try { + contextBridge.exposeInMainWorld("explorer", { + onFileDrop: (file) => webUtils.getPathForFile(file) + }) +} catch (error) { + console.log("Error in preload.js"); +} + diff --git a/electron/main/renderer.js b/electron/main/renderer.js index 21cd526..ad684ef 100644 --- a/electron/main/renderer.js +++ b/electron/main/renderer.js @@ -1,22 +1,31 @@ -const dropzone = document.getElementById("uploadContainer"); - -dropzone.addEventListener("dragover", (e) =>{ - e.stopPropagation(); - e.preventDefault(); -}); - -dropzone.addEventListener("drop", (e) => { - e.stopPropagation() - e.preventDefault() - const files = e.dataTransfer.files - const filePath = window.explorer.onFileDrop(files[0]) - var holdy = filePath + ""; - if(holdy.endsWith(".mp4")){ - console.log(filePath) - - const files1 = e.dataTransfer.files; - handleFiles(files1); +uploadContainer.addEventListener("dragover", (e) =>{ + try { + e.stopPropagation(); + e.preventDefault(); + } catch (error) { + console.log("Error in renderer.js dragover listener function") } +}); + +//listener for when a file get dropped on the drag&drop field +uploadContainer.addEventListener("drop", (e) => { + try { + e.stopPropagation() + e.preventDefault() + const files = e.dataTransfer.files + 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); + } + } catch (error) { + console.log("Error in renderer.js with the listerner for the drop function"); + } + + }) \ No newline at end of file diff --git a/electron/main/script.js b/electron/main/script.js index cc1ac2b..ab94700 100644 --- a/electron/main/script.js +++ b/electron/main/script.js @@ -1,37 +1,115 @@ -const uploadContainer = document.getElementById('uploadContainer'); -const fileInput = document.getElementById('videoUpload'); -const fileName = document.getElementById('fileName'); -const manualBtn = document.getElementById('manualUploadBtn'); -const videoPreview = document.getElementById('videoPreview'); - - - - -manualBtn.addEventListener('click', () => { - fileInput.click(); +//listener for the file explorer search +manualUploadBtn.addEventListener('click', () => { + try { + videoUpload.click(); + } catch (error) { + console.log("Error in manualBtn EventListener click"); + } + }); +//function to check if one checkbox is at least klicked +function checkBoxes() { + try { + const checkboxes = document.querySelectorAll('input[name="docFormat"]'); + let isChecked = false; -fileInput.addEventListener('change', () => { - handleFiles(fileInput.files); -}); + checkboxes.forEach(function(checkbox){ + if(checkbox.checked){ + isChecked = true; + } + }); + if(isChecked){ + //Code to submit the video + var pathTest = fileName.textContent + ""; + if(pathTest.endsWith(".mp4") || holdy.endsWith(".mov") || holdy.endsWith(".avi") || holdy.endsWith( ".mkv")){ + mapFunctions.get("extraction-video-to-audio").function({inputVideoPath: pathTest, outputType:"wav"}); + } + } else { + //language only english at the moment + alert('Please select at least one document type.'); + } + } catch (error) { + console.log("Error") + } + +// mapFunctions.get("extraction-video-to-audio").function({inputVideoPath:"./a.mp4", outputType:"wav"}) +} - - -function handleFiles(files) { - if (files.length > 0) { - const file = files[0]; - if (file.type.startsWith('video/')) { - fileInput.files = files; - fileName.textContent = `Chosen video: ${file.name}`; +//language changing feature +function changeLanguage(language) { + if (language === 'en') { + document.getElementById('title').textContent = 'Video to document'; + document.getElementById('h1').textContent = 'Video to document'; + document.getElementById('p1').textContent = 'Drag and drop video file'; + document.getElementById('fileName').textContent = 'No video chosen'; + document.getElementById('manualUploadBtn').textContent = 'Search video'; + document.getElementById('checkbox_group').textContent = 'Choose prefered document style:'; + document.getElementById('label_format').textContent = 'Meeting report'; + document.getElementById('label_summary').textContent = 'Summary with timestamps'; + 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 = 'जमा करना'; } } + + +//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"); + } + +}); + + + +//function to display the file path in the drop down box +function handleFiles(files) { + try { + if (files.length > 0) { + const file = files[0]; + if (file.type.startsWith('video/')) { + videoUpload.files = files; + fileName.textContent = `Chosen video: ${file.name}`; + } + } + } catch (error) { + console.log("Error in script.js handleFiles function"); + } + } +//function to regulate the progress on the progressbar function updateProgressBar(bar, value){ - value = Math.round(value); - bar.querySelector(".progress_fill").style.width = `${value}%`; - bar.querySelector(".progress_text").textContent = `${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"); + } + } \ No newline at end of file diff --git a/electron/main/style.css b/electron/main/style.css index b68c162..e9abb50 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: #444; + background-color: #555; gap: 15px; margin: 0; } @@ -75,6 +75,7 @@ gap: 5px; .checkbox-group { margin-top: 15px; + margin-bottom: 15px; display: flex; flex-direction: column; gap: 10px; @@ -92,14 +93,14 @@ gap: 5px; } .mitte { - background-color: #eaf0ff; + background-color: #f2f3f4; display: flex; flex-direction: column; align-items: center; padding: 5% 50px; margin-top: 20px; gap: 10px; - border: 2px; + border: 1px; border-color: black; border-style: solid; } @@ -112,7 +113,7 @@ h1 { position: relative; width: 210px; height: 30px; - background: darkslategray; + background: rgb(42, 46, 78); border-radius: 5px; overflow: hidden; } @@ -129,4 +130,18 @@ h1 { top: 50%; right: 5px; 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