emily/video2document
1
0
Fork 0
mirror of https://gitlab.rlp.net/proj-wise2526-video2document/video2document.git synced 2026-06-15 18:01:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

Language selection implemented and UI reworked

Browse Source
This commit is contained in:
Verena Schulz
2025-11-11 18:31:01 +01:00
parent da3a8c7d8c
commit d9e96316c0
7 changed files with 81 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
electron/main/flags/germany-flag-png-large.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

electron/main/flags/india-flag-png-large.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

electron/main/flags/united-kingdom-flag-png-large.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

electron/main/index.html
+16 -9
View File
@@ -3,15 +3,22 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Upload Drag and Drop + Button</title> <title id="title">Video to document</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="mitte" id="mitte"> <div class="mitte" id="mitte">
<h1>Video to document</h1> <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>
<button class="eng_Btn" id="eng_Btn" onclick="changeLanguage('en')"><img src="flags/united-kingdom-flag-png-large.jpg" width="25px" height="20px"/></button>
<button class="in_Btn" id="in_Btn" onclick="changeLanguage('in')"><img src="flags/india-flag-png-large.png" width="25px" height="20px"/></button>
</div>
<h1 id="h1">Video to document</h1>
<div class="upload-container" id="uploadContainer"> <div class="upload-container" id="uploadContainer">
<p>Drag and drop video file</p> <p id="p1">Drag and drop video file</p>
<div class="file-name" id="fileName">No video chosen</div> <div class="file-name" id="fileName">No video chosen</div>
</div> </div>
@@ -19,19 +26,19 @@
<input type="file" id="videoUpload" accept="video/*"> <input type="file" id="videoUpload" accept="video/*">
<div class="checkbox-group"> <div class="checkbox-group">
<label for="checkbox-group">Choose prefered document style:</label> <label id="checkbox_group" for="checkbox-group">Choose prefered document style:</label>
<div class="checkbox-container"> <div class="checkbox-container">
<input type="checkbox" id="docFormat"> <input type="checkbox" name ="docFormat" id="docFormat">
<label for "docFormat">Meeting report</label> <label id="label_format" for="docFormat">Meeting report</label>
</div> </div>
<div class="checkbox-container"> <div class="checkbox-container">
<input type="checkbox" id="docFormatCustom"> <input type="checkbox" name="docFormat" id="docFormatSummary">
<label for "docFormatCustom">Summary with timestamps</label> <label id="label_summary" for="docFormatSummary">Summary with timestamps</label>
</div> </div>
</div> </div>
<button class="submit-btn" id="submitButton">Submit Video</button> <button class="submit-btn" id="submitButton">Submit</button>
<div class="progressbar"> <div class="progressbar">
<div class="progress_fill"></div> <div class="progress_fill"></div>
electron/main/renderer.js
+1 -1
View File
@@ -19,7 +19,7 @@ dropzone.addEventListener("drop", (e) => {
const files = e.dataTransfer.files const files = e.dataTransfer.files
const filePath = window.explorer.onFileDrop(files[0]) const filePath = window.explorer.onFileDrop(files[0])
var holdy = filePath + ""; var holdy = filePath + "";
if(holdy.endsWith(".mp4")){ if(holdy.endsWith(".mp4", ".mov", ".avi", ".mkv")){
console.log(filePath) console.log(filePath)
const files1 = e.dataTransfer.files; const files1 = e.dataTransfer.files;
electron/main/script.js
+45
View File
@@ -4,6 +4,10 @@ try {
const fileName = document.getElementById('fileName'); const fileName = document.getElementById('fileName');
const manualBtn = document.getElementById('manualUploadBtn'); const manualBtn = document.getElementById('manualUploadBtn');
const videoPreview = document.getElementById('videoPreview'); const videoPreview = document.getElementById('videoPreview');
const submitBtn = document.getElementById('submitButton');
const deButton = document.getElementById('de_Btn');
const engButton = document.getElementById('eng_Btn');
const inButton = document.getElementById('in_Btn');
} catch (error) { } catch (error) {
console.log("Error in skript value setting section"); console.log("Error in skript value setting section");
@@ -19,6 +23,47 @@ manualBtn.addEventListener('click', () => {
}); });
submitBtn.addEventListener('click', () => {
// mapFunctions.get("extraction-video-to-audio").function({inputVideoPath:"./a.mp4", outputType:"wav"})
});
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 //listener for the file explorer search when something got selected
fileInput.addEventListener('change', () => { fileInput.addEventListener('change', () => {
try { try {
electron/main/style.css
+19 -4
View File
@@ -5,7 +5,7 @@ body {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
background-color: #444; background-color: #555;
gap: 15px; gap: 15px;
margin: 0; margin: 0;
} }
@@ -75,6 +75,7 @@ gap: 5px;
.checkbox-group { .checkbox-group {
margin-top: 15px; margin-top: 15px;
margin-bottom: 15px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
@@ -92,14 +93,14 @@ gap: 5px;
} }
.mitte { .mitte {
background-color: #eaf0ff; background-color: #f2f3f4;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 5% 50px; padding: 5% 50px;
margin-top: 20px; margin-top: 20px;
gap: 10px; gap: 10px;
border: 2px; border: 1px;
border-color: black; border-color: black;
border-style: solid; border-style: solid;
} }
@@ -112,7 +113,7 @@ h1 {
position: relative; position: relative;
width: 210px; width: 210px;
height: 30px; height: 30px;
background: darkslategray; background: rgb(42, 46, 78);
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
} }
@@ -129,4 +130,18 @@ h1 {
top: 50%; top: 50%;
right: 5px; right: 5px;
transform: translateY(-50%); 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;
} }