mirror of
https://gitlab.rlp.net/proj-wise2526-video2document/video2document.git
synced 2026-06-15 18:01:52 +02:00
Implemented a dropdown field for the languages as well as functions and a file to easily implement other languages.
This commit is contained in:
@@ -10,9 +10,10 @@
|
||||
|
||||
<div class="mitte" id="mitte">
|
||||
<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>
|
||||
<select name="ai_type" id="ai_type">
|
||||
</select>
|
||||
<select name="language_option" id="language_option">
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<h1 id="h1">Video to document</h1>
|
||||
@@ -46,6 +47,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="languages.js"></script>
|
||||
<script src="script.js"></script>
|
||||
<script src="./renderer.js"></script>
|
||||
</body>
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
var languageOptions = {
|
||||
"eng":{
|
||||
"title": "Video to document",
|
||||
"h1": "Video to document",
|
||||
"p1": "Drag and drop video file",
|
||||
"fileName": "No video chosen",
|
||||
"manualUploadBtn": "Search video",
|
||||
"checkbox_group": "Choose prefered document style:",
|
||||
"label_format": "Meeting report",
|
||||
"label_summary": "Summary with timestamps",
|
||||
"submitButton": "Submit"
|
||||
},
|
||||
"de":{
|
||||
"title": "Video zu Dokument",
|
||||
"h1": "Video zu Dokument",
|
||||
"p1": "Video per Drag & Drop ablegen",
|
||||
"fileName": "Kein Video ausgewaehlt",
|
||||
"manualUploadBtn": "Video suchen",
|
||||
"checkbox_group": "Bevorzugte Dokumentvarianten:",
|
||||
"label_format": "Meeting Bericht",
|
||||
"label_summary": "Zusammenfassung mit Zeitstempeln",
|
||||
"submitButton": "Absenden"
|
||||
},
|
||||
"in":{
|
||||
"title": "दस्तावेज़ के लिए वीडियो",
|
||||
"h1": "दस्तावेज़ के लिए वीडियो",
|
||||
"p1": "वीडियो फ़ाइल खींचें और छोड़ें",
|
||||
"fileName": "कोई वीडियो नहीं चुना गया",
|
||||
"manualUploadBtn": "वीडियो खोजें",
|
||||
"checkbox_group": "पसंदीदा दस्तावेज़ शैली चुनें:",
|
||||
"label_format": "बैठक रिपोर्ट",
|
||||
"label_summary": "टाइमस्टैम्प के साथ सारांश",
|
||||
"submitButton": "जमा करना"
|
||||
}
|
||||
|
||||
};
|
||||
@@ -7,6 +7,10 @@ try {
|
||||
contextBridge.exposeInMainWorld("extractor", {
|
||||
extract: (file) => ipcRenderer.send("extract", file)
|
||||
})
|
||||
contextBridge.exposeInMainWorld("electronAPI", {
|
||||
getFilePath: (file) => {return webUtils.getPathForFile(file)}
|
||||
})
|
||||
|
||||
} catch (error) {
|
||||
console.log("Error in preload.js");
|
||||
}
|
||||
@@ -4,8 +4,7 @@ uploadContainer.addEventListener("dragover", (e) =>{
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
} catch (error) {
|
||||
console.log("Error in renderer.js dragover listener function");
|
||||
console.log(error);
|
||||
console.log("Error in renderer.js dragover listener function")
|
||||
}
|
||||
|
||||
});
|
||||
@@ -22,13 +21,21 @@ uploadContainer.addEventListener("drop", (e) => {
|
||||
console.log(filePath)
|
||||
|
||||
const files1 = e.dataTransfer.files;
|
||||
setCurrentPathVariable(filePath);
|
||||
handleFiles(files1);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("Error in renderer.js with the listerner for the drop function");
|
||||
console.log(error);
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
window.addEventListener('load', (e) => {
|
||||
console.log("test");
|
||||
loadLanguageOptions();
|
||||
});
|
||||
|
||||
language_option.addEventListener('change', (e)=>{
|
||||
const select = document.getElementById('language_option');
|
||||
console.log(select.value);
|
||||
changeLanguage(select.value);
|
||||
});
|
||||
|
||||
+45
-52
@@ -1,11 +1,9 @@
|
||||
var curSelecPath = "";
|
||||
//listener for the file explorer search
|
||||
manualUploadBtn.addEventListener('click', () => {
|
||||
try {
|
||||
videoUpload.click();
|
||||
} catch (error) {
|
||||
console.log("Error in manualBtn EventListener click");
|
||||
console.log(error);
|
||||
}
|
||||
|
||||
});
|
||||
@@ -24,16 +22,16 @@ function checkBoxes() {
|
||||
|
||||
if(isChecked){
|
||||
//Code to submit the video
|
||||
if(curSelecPath.endsWith(".mp4") || holdy.endsWith(".mov") || holdy.endsWith(".avi") || holdy.endsWith( ".mkv")){
|
||||
window.extractor.extract({inputVideoPath: curSelecPath, outputType:"wav"})
|
||||
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"})
|
||||
}
|
||||
} 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);
|
||||
console.log(error)
|
||||
}
|
||||
|
||||
// mapFunctions.get("extraction-video-to-audio").function({inputVideoPath:"./a.mp4", outputType:"wav"})
|
||||
@@ -42,58 +40,31 @@ function checkBoxes() {
|
||||
//language changing feature
|
||||
function changeLanguage(language) {
|
||||
try {
|
||||
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 = 'जमा करना';
|
||||
}
|
||||
document.getElementById('title').textContent = languageOptions[language].title;
|
||||
document.getElementById('h1').textContent = languageOptions[language].h1;
|
||||
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;
|
||||
} catch (error) {
|
||||
console.log("Error in script.js changeLanguage function");
|
||||
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);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
//function to display the file path in the drop down box
|
||||
function handleFiles(files) {
|
||||
try {
|
||||
@@ -102,16 +73,10 @@ function handleFiles(files) {
|
||||
if (file.type.startsWith('video/')) {
|
||||
videoUpload.files = files;
|
||||
fileName.textContent = `Chosen video: ${file.name}`;
|
||||
setCurrentPathVariable(files[0])
|
||||
}else{
|
||||
setCurrentPathVariable("");
|
||||
}
|
||||
}else{
|
||||
setCurrentPathVariable("");
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("Error in script.js handleFiles function");
|
||||
console.log(error);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -124,16 +89,44 @@ function updateProgressBar(bar, value){
|
||||
bar.querySelector(".progress_text").textContent = `${value}%`;
|
||||
} catch (error) {
|
||||
console.log("Error in scripts.js updateProgressBar function");
|
||||
console.log(error);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function setCurrentPathVariable(value){
|
||||
//function to load ai options to the drop down list
|
||||
function loadAiOptions(options){
|
||||
try {
|
||||
curSelecPath = value + "";
|
||||
var menu = document.getElementById('ai_type');
|
||||
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;
|
||||
menu.appendChild(choice);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("Error in script.js setCurrentPathVariable");
|
||||
console.log("Error in script.js loadAiOptions function");
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
//function to load language options to the drop down list
|
||||
function loadLanguageOptions(){
|
||||
try {
|
||||
var menu = document.getElementById('language_option');
|
||||
var object_holdy;
|
||||
var choice ;
|
||||
object_holdy = Object.keys(languageOptions);
|
||||
for(i = 0; i < object_holdy.length; i++){
|
||||
choice = document.createElement('option');
|
||||
choice.textContent = object_holdy[i];
|
||||
choice.value = object_holdy[i];
|
||||
menu.appendChild(choice);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.log("Error in script.js loadLanguageOptions function");
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user