mirror of
https://gitlab.rlp.net/proj-wise2526-video2document/video2document.git
synced 2026-06-15 18:01:52 +02:00
308 lines
9.9 KiB
JavaScript
308 lines
9.9 KiB
JavaScript
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))){
|
|
document.getElementById("progressbar").style.visibility = "visible";
|
|
//assembly of the json for the main
|
|
|
|
const selectedStyles = [checkedCounter];
|
|
var iter = 0;
|
|
checkboxes.forEach(function(checkbox){
|
|
if(checkbox.checked){
|
|
console.log(checkbox.value);
|
|
selectedStyles[iter] = {iter: checkbox.value};
|
|
iter++;
|
|
}
|
|
});
|
|
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,
|
|
"outputType": outputType.value
|
|
},
|
|
"transcription": {
|
|
"module": transcriptionType.value
|
|
},
|
|
"document": {
|
|
"module":aiType.value,
|
|
"styles": selectedStyles
|
|
}
|
|
};
|
|
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
|
|
function changeLanguage(language) {
|
|
try {
|
|
document.getElementById('labelLanguageFlag').src = languageOptions[language].flagPath;
|
|
document.getElementById('labelKI').textContent = languageOptions[language].labelKI;
|
|
document.getElementById('labelTranscription').textContent = languageOptions[language].labelTranscription;
|
|
document.getElementById('labelLanguage').textContent = languageOptions[language].labelLanguage;
|
|
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);
|
|
}
|
|
|
|
}
|
|
|
|
//function to display the file path in the drop down box
|
|
function handleFiles(files) {
|
|
try {
|
|
if (files.length > 0) {
|
|
document.getElementById("progressbar").style.visibility = "visible";
|
|
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}`;
|
|
currentVideoPath = filePath;
|
|
generateThumbnail(filePath);
|
|
activateSubmitBtn(true);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.log("Error in script.js handleFiles function");
|
|
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 load ai options to the drop down list
|
|
function loadAiOptions(options){
|
|
try {
|
|
var menu = document.getElementById('ai_type');
|
|
var object_holdy;
|
|
var choice ;
|
|
object_holdy = options
|
|
for(i = 0; i < options.length; i++){
|
|
choice = document.createElement('option');
|
|
choice.textContent = object_holdy[i].displayname;
|
|
choice.value = object_holdy[i].name;
|
|
menu.appendChild(choice);
|
|
}
|
|
} catch (error) {
|
|
console.log("Error in script.js loadAiOptions function");
|
|
console.log(error);
|
|
}
|
|
}
|
|
|
|
//function to load transcription options to the drop down list
|
|
function loadTranscriptionOptions(options){
|
|
try {
|
|
var menu = document.getElementById('transkript_type');
|
|
var object_holdy;
|
|
var choice ;
|
|
object_holdy = options
|
|
for(i = 0; i < options.length; i++){
|
|
choice = document.createElement('option');
|
|
choice.textContent = object_holdy[i].displayname;
|
|
choice.value = object_holdy[i].name;
|
|
menu.appendChild(choice);
|
|
}
|
|
} catch (error) {
|
|
console.log("Error in script.js function loadTranscriptionOptions");
|
|
console.log(error);
|
|
}
|
|
}
|
|
|
|
//function to load data type options to the drop down list
|
|
function loadDataTypeOptions(options){
|
|
try {
|
|
var menu = document.getElementById('output_type');
|
|
var object_holdy;
|
|
var choice ;
|
|
object_holdy = options
|
|
for(i = 0; i < options.length; i++){
|
|
choice = document.createElement('option');
|
|
choice.textContent = object_holdy[i].displayname;
|
|
choice.value = object_holdy[i].name;
|
|
menu.appendChild(choice);
|
|
}
|
|
} catch (error) {
|
|
console.log("Error in script.js function loadDataTypeOptions");
|
|
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);
|
|
}
|
|
}
|
|
|
|
//function to load speaker options to the drop down list
|
|
function loadSpeakerOptions(options){
|
|
try {
|
|
var menu = document.getElementById('speaker_option');
|
|
var object_holdy;
|
|
var choice ;
|
|
object_holdy = options
|
|
for(i = 0; i < options.length; i++){
|
|
choice = document.createElement('option');
|
|
choice.textContent = object_holdy[i].displayname;
|
|
choice.value = object_holdy[i].name;
|
|
menu.appendChild(choice);
|
|
}
|
|
} catch (error) {
|
|
console.log("Error in script.js loadSpeakerOptions function");
|
|
console.log(error);
|
|
}
|
|
}
|
|
|
|
//function to load speaker audio file options to the drop down list
|
|
function loadSpeakerAudio(option){
|
|
try {
|
|
var menu = document.getElementById('speakerAudioViewer');
|
|
var aud = document.createElement("source");
|
|
aud.src = options;
|
|
menu.appendChild(aud);
|
|
} catch (error) {
|
|
console.log("Error in script.js loadSpeakerAudio function");
|
|
console.log(error);
|
|
}
|
|
}
|
|
|
|
|
|
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) {
|
|
steps.forEach(step => step.style.display = "none");
|
|
document.getElementById("step" + stepNumber).style.display = "block";
|
|
|
|
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 = {};
|
|
function setSpeakerAudiosValue(valy){
|
|
try {
|
|
speakerAudios = valy;
|
|
document.getElementById("speakerAudioViewer").src = valy.speakerA.source;
|
|
} catch (error) {
|
|
|
|
}
|
|
}
|
|
|