-
-
-
- 
-
-
-
-
-
-
-
-
+
+
-
Video to document
+
-
-
-
diff --git a/electron/main/preload.js b/electron/main/preload.js
index b027cde..4219f15 100644
--- a/electron/main/preload.js
+++ b/electron/main/preload.js
@@ -15,12 +15,17 @@ try {
getModuleNames: () => ipcRenderer.invoke('get-module-names')
})
-
-
- ipcRenderer.on("progress", (event, resp) => {
- alert(`Finished step ${resp.curstep} of ${resp.totalsteps}`)
+ contextBridge.exposeInMainWorld('electron', {
+ progress: (callback) => ipcRenderer.on('progress', callback)
})
+ contextBridge.exposeInMainWorld('audios', {
+ speakerAudios: (callback) => ipcRenderer.on('speakerAudios', callback)
+ })
+ contextBridge.exposeInMainWorld("submitSpeaker", {
+ submitSpeaker: (speaker_names) => {ipcRenderer.send("speaker_submit", speaker_names)}
+ })
+
ipcRenderer.on("error", (event, err) => {alert(err)})
} catch (error) {
console.log("Error in preload.js");
diff --git a/electron/main/renderer.js b/electron/main/renderer.js
index fcdd894..6ce2b29 100644
--- a/electron/main/renderer.js
+++ b/electron/main/renderer.js
@@ -55,24 +55,16 @@ language_option.addEventListener('change', (e)=>{
});
+//listener for the file explorer search when something got selected
videoUpload.addEventListener("change", () => {
try {
- activateSubmitBtn(videoUpload.files.length > 0);
+ if (videoUpload.files.length > 0) {
+ const file = videoUpload.files;
+ handleFiles(file);
+ }
} 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
@@ -84,4 +76,173 @@ manualUploadBtn.addEventListener('click', () => {
console.log(error);
}
-});
\ No newline at end of file
+});
+
+stepButtons.forEach(btn => {
+ btn.addEventListener("click", () => {
+ try {
+ const step = parseInt(btn.dataset.step);
+ showStep(step);
+ } catch (error) {
+
+ }
+ });
+});
+
+prevBtn.addEventListener("click", () => {
+ try {
+ if (currentStep > 1) showStep(currentStep - 1);
+ } catch (error) {
+
+ }
+});
+
+nextBtn.addEventListener("click", () => {
+ try {
+ if(currentStep < totalSteps) showStep(currentStep + 1);
+ } catch (error) {
+
+ }
+});
+
+//Checkboxlistener so that only one can be selected at a time
+docFormat.addEventListener("change", (e) =>{
+ try {
+ if(docFormat.checked){
+ docFormatSummary1.checked = false;
+ docFormatSummary2.checked = false;
+ docFormatSummary3.checked = false;
+ docFormatCustom.checked = false;
+ }
+ } catch (error) {
+
+ }
+})
+docFormatSummary1.addEventListener("change", (e) =>{
+ try {
+ if(docFormatSummary1.checked){
+ docFormat.checked = false;
+ docFormatSummary2.checked = false;
+ docFormatSummary3.checked = false;
+ docFormatCustom.checked = false;
+ }
+ } catch (error) {
+
+ }
+})
+docFormatSummary2.addEventListener("change", (e) =>{
+ try {
+ if(docFormatSummary2.checked){
+ docFormatSummary1.checked = false;
+ docFormat.checked = false;
+ docFormatSummary3.checked = false;
+ docFormatCustom.checked = false;
+ }
+ } catch (error) {
+
+ }
+})
+docFormatSummary3.addEventListener("change", (e) =>{
+ try {
+ if(docFormatSummary3.checked){
+ docFormatSummary1.checked = false;
+ docFormatSummary2.checked = false;
+ docFormat.checked = false;
+ docFormatCustom.checked = false;
+ }
+ } catch (error) {
+
+ }
+})
+docFormatCustom.addEventListener("change", (e) =>{
+ try {
+ if(docFormatCustom.checked){
+ docFormatSummary1.checked = false;
+ docFormatSummary2.checked = false;
+ docFormatSummary3.checked = false;
+ docFormat.checked = false;
+ }
+ } catch (error) {
+
+ }
+})
+
+//Speaker change listener
+cur_speaker.addEventListener("change", (e) =>{
+ try {
+ document.getElementById("speakerAudioViewer").src = valy[e.target.value].source;
+ } catch (error) {
+
+ }
+})
+
+window.electron.speakerAudios((event, arg) => {
+ try {
+ setSpeakerAudiosValue(arg);
+ loadSpeakerOptions(arg);
+ } catch (error) {
+
+ }
+})
+
+window.electron.progress((event, arg) => {
+ if(arg.curstep == 1){
+ setCircleOne();
+ }else if(arg.curstep == 2){
+ setCircleZwo();
+ } else if(arg.curstep == 3){
+ setCircleThree();
+ }else if(arg.curstep == 4){
+ setCircleFour();
+ }
+});
+
+function setCircleOne(){
+ try {
+ if(document.getElementById("box1").style.backgroundColor == "green"){
+ document.getElementById("box1").style.backgroundColor = "red";
+ }else{
+ document.getElementById("box1").style.backgroundColor = "green";
+ }
+ } catch (error) {
+ }
+
+}
+function setCircleZwo(){
+ try {
+ if(document.getElementById("box2").style.backgroundColor == "green"){
+ document.getElementById("box2").style.backgroundColor = "red";
+ }else{
+ document.getElementById("box2").style.backgroundColor = "green";
+ }
+ } catch (error) {
+
+ }
+
+}
+function setCircleThree(){
+ try {
+ if(document.getElementById("box3").style.backgroundColor == "green"){
+ document.getElementById("box3").style.backgroundColor = "red";
+ }else{
+ document.getElementById("box3").style.backgroundColor = "green";
+ }
+ } catch (error) {
+
+ }
+
+}
+function setCircleFour(){
+ try {
+ if(document.getElementById("box4").style.backgroundColor == "green"){
+ document.getElementById("box4").style.backgroundColor = "red";
+ }else{
+ document.getElementById("box4").style.backgroundColor = "green";
+ }
+ } catch (error) {
+
+ }
+}
+
+
+
diff --git a/electron/main/script.js b/electron/main/script.js
index 51935ed..1ef9078 100644
--- a/electron/main/script.js
+++ b/electron/main/script.js
@@ -1,4 +1,4 @@
-
+let currentVideoPath = null;
//function to check if one checkbox is at least klicked
function checkBoxes() {
try {
@@ -37,6 +37,11 @@ function checkBoxes() {
iter++;
}
});
+ document.getElementById("testy").style.visibility = "visible"
+ 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");
@@ -100,11 +105,13 @@ function changeLanguage(language) {
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);
}
@@ -167,6 +174,25 @@ function loadTranscriptionOptions(options){
}
}
+//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 {
@@ -180,16 +206,48 @@ function loadLanguageOptions(){
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.keys();
+ for(i = 0; i < options.length; i++){
+ choice = document.createElement('option');
+ choice.textContent = options[object_holdy[i]].name;
+ choice.value = options[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 {
- submitButton.disabled = !hasFile;
+ document.getElementById("submitButton").disabled = !hasFile;
} catch (error) {
console.log(error);
}
@@ -214,3 +272,61 @@ function generateThumbnail(path){
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) {
+ if (stepNumber < 1 || stepNumber > totalSteps){
+ console.error("StepNumber out of Bounds", stepNumber);
+ return;
+ }
+ 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 = {};
+var speakerEndValues = {};
+function setSpeakerAudiosValue(valy){
+ try {
+ speakerAudios = valy;
+ speakerRewriten = valy;
+ document.getElementById("speakerAudioViewer").src = valy.speakerA.source;
+ } catch (error) {
+
+ }
+}
+
+function rewriteSpeakerName(){
+ try {
+ var tempy = document.getElementById("cur_speaker").textContent;
+ speakerAudios[tempy].name = document.getElementById("newSpeaker").textContent;
+ document.getElementById("cur_speaker").textContent = document.getElementById("newSpeaker").textContent;
+ } catch (error) {
+
+ }
+}
+
+function sendSpeakerPackages(){
+ try {
+ window.sendSpeakerPackages(speakerAudios);
+ } catch (error) {
+
+ }
+}
+
diff --git a/electron/main/style.css b/electron/main/style.css
index 0912516..cc4eed9 100644
--- a/electron/main/style.css
+++ b/electron/main/style.css
@@ -6,11 +6,33 @@ body {
align-items: center;
height: 100vh;
background-color: #f2f3f4;
- gap: 15px;
+ gap: 10px;
margin: 0;
}
-
+#h1 {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ margin: 0;
+ z-index: 20;
+
+}
+
+#h1-wrapper {
+ position: relative;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ width: 770px;
+ height: 60px;
+ background-color: #FFF;
+ box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
+ border-radius: 5px;
+ margin-bottom: 10px;
+ display: flex;
+ align-items: center;
+}
+
.upload-container {
background: white;
padding: 40px;
@@ -91,25 +113,73 @@ 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;
+ --borderColor: #007bfff5;
+ --borderWidth: .125em;
+ }
+
+ .checkbox-group input[type=checkbox] {
+ -webkit-appearance: none;
+ appearance: none;
+ vertical-align: middle;
+ background: #fff;
+ font-size: 1.8em;
+ border-radius: 0.125em;
+ display: inline-block;
+ border: var(--borderWidth) solid var(--borderColor);
+ width: 1em;
+ height: 1em;
+ position: relative;
+ }
+ .checkbox-group input[type=checkbox]:before,
+ .checkbox-group input[type=checkbox]:after {
+ content: "";
+ position: absolute;
+ background: var(--borderColor);
+ width: calc(var(--borderWidth) * 3);
+ height: var(--borderWidth);
+ top: 50%;
+ left: 10%;
+ transform-origin: left center;
+ }
+ .checkbox-group input[type=checkbox]:before {
+ transform: rotate(45deg) translate(calc(var(--borderWidth) / -2), calc(var(--borderWidth) / -2)) scaleX(0);
+ transition: transform 200ms ease-in 200ms;
+ }
+ .checkbox-group input[type=checkbox]:after {
+ width: calc(var(--borderWidth) * 5);
+ transform: rotate(-45deg) translateY(calc(var(--borderWidth) * 2)) scaleX(0);
+ transform-origin: left center;
+ transition: transform 200ms ease-in;
+ }
+ .checkbox-group input[type=checkbox]:checked:before {
+ transform: rotate(45deg) translate(calc(var(--borderWidth) / -2), calc(var(--borderWidth) / -2)) scaleX(1);
+ transition: transform 200ms ease-in;
+ }
+ .checkbox-group input[type=checkbox]:checked:after {
+ width: calc(var(--borderWidth) * 5);
+ transform: rotate(-45deg) translateY(calc(var(--borderWidth) * 2)) scaleX(1);
+ transition: transform 200ms ease-out 200ms;
+ }
+ .checkbox-group input[type=checkbox]:focus {
+ outline: calc(var(--borderWidth) / 2) dotted rgba(0, 0, 0, 0.25);
+ }
+
+.checkbox-container{
+ margin-top: 8px;
display: flex;
- flex-direction: column;
- gap: 10px;
- align-items: flex-start;
+ justify-items: left;
+ align-items: center;
+ gap: 5px;
}
-
+
+
.submit-btn {
+ display: flex;
+ justify-content: center;
padding: 10px 20px;
- margin-top: 10px;
+ margin-left: 80px;
+ margin-top: 30px;
margin-bottom: 10px;
background-color: #007BFF;
color: white;
@@ -126,13 +196,12 @@ gap: 5px;
}
.mitte {
- background-color: #FDFCFA;
+ background-color: #FFF;
display: flex;
width: 700px;
flex-direction: column;
align-items: center;
- padding: 5% 50px;
- margin-top: 20px;
+ padding: 40px;
gap: 10px;
border: 0px;
border-color: black;
@@ -141,14 +210,11 @@ gap: 5px;
box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
}
-h1 {
- align-content: center;
-}
-
.progressbar{
position: relative;
width: 210px;
height: 30px;
+ margin: 50px 20px 5px 20px;
background: rgb(42, 46, 78);
border-radius: 5px;
overflow: hidden;
@@ -173,9 +239,10 @@ h1 {
.dropdownMenus {
display: flex;
- justify-content: flex-end;
+ justify-content: center;
margin-top: 1px;
- gap: 150px;
+ margin-bottom: 30px;
+ gap: 170px;
padding: 2px 10px 2px 10px;
}
@@ -184,5 +251,229 @@ h1 {
}
.labelDiv {
- gap: 200px;
+ gap: 60px;
+ display: flex;
+ justify-content: center;
+ overflow-wrap:inherit;
+ padding-bottom: 20px;
+ margin-top: 40px;
+ margin-bottom: 10px;
+}
+
+/*Step bar*/
+.step-nav {
+ display: flex;
+ gap: 20px;
+ justify-content: center;
+ background: #fff;
+ padding: 10px 30px;
+ border-radius: 6px;
+ box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+}
+
+.step-item {
+ padding: 10px 25px;
+ border-radius: 8px;
+ background: #eee;
+ cursor: pointer;
+ font-weight: bold;
+ transition: 0.2s;
+}
+
+.step-item.active {
+ background: #007BFF;
+ color: white;
+}
+
+.step-item:hover {
+ background: #d9d9d9;
+}
+
+/*panels*/
+.step {
+ margin-top: 70px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ min-height: 400px;
+}
+
+/*Navigation arrows*/
+.step-nav-arrows {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.middle-container-wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 30px;
+ width: max-content;
+ height: auto;
+}
+
+.navBtn {
+ display: flex;
+ justify-content: center;
+ padding: 10px 25px;
+ background-color: #007BFF;
+ color: white;
+ border: none;
+ border-radius: 8px;
+ cursor: pointer;
+ font-size: 14px;
+}
+
+.navBtn:disabled {
+ background-color: #ccc;
+ cursor: not-allowed;
+}
+
+.testy{
+ background-color: #FFF;
+ display: flex;
+ width: auto;
+ flex-direction: row;
+ align-items: center;
+ margin-top: 20px;
+ gap: 10px;
+ border: 0px;
+ border-color: black;
+ border-style: solid;
+ border-radius: 6px;
+ visibility: hidden;
+}
+
+.box2 {
+ background-color: red;
+ width: 40px;
+ height: 40px;
+ padding: 5px;
+ border: 1px solid black;
+ margin: 5px;
+ border-radius: 100px;
+}
+
+li {
+ color: #FFF;
+}
+
+.p-menu1 {
+ margin-left: 20px;
+ z-index: 10;
+}
+
+.hamburger1 {
+ height: 45px;
+ margin: 0;
+ padding-top: 8px;
+ display: grid;
+ grid-template-rows: repeat(3, 1fr);
+ justify-items: center;
+ z-index: 120;
+}
+
+.hamburger1 div {
+ background-color: rgb(61, 61, 61);
+ position: relative;
+ width: 40px;
+ height: 5px;
+ margin-top: 0;
+ -webkit-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
+}
+
+#toggle1 {
+ display: none;
+}
+
+#toggle1:checked + .hamburger1 .top {
+ -webkit-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+ margin-top: 22.5px;
+}
+
+#toggle1:checked + .hamburger1 .meat {
+ -webkit-transform: rotate(45deg);
+ transform: rotate(45deg);
+ margin-top: -5px;
+}
+
+#toggle1:checked + .hamburger1 .bottom {
+ -webkit-transform: scale(0);
+ transform: scale(0);
+}
+
+#toggle1:checked ~ .menu1 {
+ height: 150px;
+ width: 300px;
+}
+
+/* Menu */
+.menu1 {
+ position: absolute;
+ top: 55px;
+ left: 20px;
+ width: 240px;
+ border-radius: 5px;
+ background-color: #1C3B69;
+ margin: 0;
+ display: -ms-grid;
+ display: grid;
+ grid-template-rows: 1fr repeat(4, 0.5fr);
+ grid-row-gap: 25px;
+ padding: 0;
+ list-style: none;
+ clear: both;
+ width: auto;
+ text-align: center;
+ height: 0px;
+ overflow: hidden;
+ transition: height 0.3s ease, width 0.3s ease;
+ z-index: 9999;
+ -webkit-transition: all 0.3s ease;
+}
+
+.menu1 li:first-child {
+ margin-top: 30px;
+}
+
+.menu1 li:last-child {
+ margin-bottom: 30px;
+}
+
+.li1 {
+ width: 100%;
+ margin: 0;
+ padding: 10px 0;
+ font: 700 20px 'Oswald', sans-serif;
+}
+
+.li1:hover {
+ background-color: #FFF;
+ color: rgb(61, 61, 61);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ -webkit-transition: all 0.3s ease;
+ transition: all 0.3s ease;
+}
+
+#step2, #step3, #step5 {
+ font-size: larger;
+}
+
+.download-btn {
+ display: flex;
+ justify-content: center;
+ padding: 10px 20px;
+ margin-left: 80px;
+ margin-top: 30px;
+ margin-bottom: 10px;
+ background-color: #007BFF;
+ color: white;
+ border: none;
+ border-radius: 8px;
+ cursor: pointer;
+ font-size: 14px;
}
\ No newline at end of file
Drag and drop video file
- -No video chosen
-
-
+
-
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+ Drag and drop video file
+ +No video chosen
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
-
-
-
-