Added Verenas function to have a preview image of the selected video file

electron/main/index.html

@@ -22,7 +22,12 @@
 
   <div class="upload-container" id="uploadContainer">
     <p id="p1">Drag and drop video file</p>
+    <video id="previewThumbnail" autoplay="false">
+    </video>
     <div class="file-name" id="fileName">No video chosen</div>
+    <div id="thumbnailContainer">
+      <img id="thumbnailImage" style="display:none;">
+    </div>
       <button class="custom-btn" id="manualUploadBtn">Search video</button>
   <input type="file" id="videoUpload" accept="video/*">
   </div>

electron/main/renderer.js

@@ -22,7 +22,9 @@ uploadContainer.addEventListener("drop", (e) => {
 
             const files1 = e.dataTransfer.files;
             handleFiles(files1);
+            generateThumbnail(filePath);
         }
+    
     } catch (error) {
         console.log("Error in renderer.js with the listerner for the drop function");
     } 
@@ -48,3 +50,34 @@ language_option.addEventListener('change', (e)=>{
     }
     
 });
+
+videoUpload.addEventListener("change", () => {
+  try {
+    activateSubmitBtn(videoUpload.files.length > 0);
+  } 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
+manualUploadBtn.addEventListener('click', () => {
+  try {
+    videoUpload.click();
+  } catch (error) {
+    console.log("Error in manualBtn EventListener click");
+    console.log(error);
+  }
+  
+});

electron/main/script.js

@@ -1,13 +1,3 @@
-//listener for the file explorer search
-manualUploadBtn.addEventListener('click', () => {
-  try {
-    videoUpload.click();
-  } catch (error) {
-    console.log("Error in manualBtn EventListener click");
-    console.log(error);
-  }
-  
-});
 
 //function to check if one checkbox is at least klicked
 function checkBoxes() {
@@ -65,17 +55,6 @@ function changeLanguage(language) {
         
 }
 
-//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 {
@@ -161,25 +140,14 @@ function deaktivateProgressbar(){
   }
 }
 
-videoUpload.addEventListener("change", () => {
+//Video thumbnail generation
-  try {
+function generateThumbnail(path){
-    activateSubmitBtn(videoUpload.files.length > 0);
+  const videoElement = document.getElementById("previewThumbnail");
-  } catch (error) {
+  while (videoElement.firstChild) videoElement.removeChild(videoElement.firstChild);
-    console.log(error);
+  videoElement.src = path;
-  }
+  videoElement.type = "video/mov";
-  
+  videoElement.load();
-});
+  videoElement.style.maxWidth = 40;
-
+  videoElement.style.maxHeight = 40;
-uploadContainer.addEventListener("drop", (e) => {
+  videoElement.autoplay = false;
-  try {
+}
-    e.preventDefault();
-    const file = e.dataTransfer.files[0];
-
-    if(file){
-      activateSubmitBtn(true);
-    }
-  } catch (error) {
-    console.log(error);
-  }
-  
-});

electron/main/style.css

@@ -5,12 +5,12 @@ body {
   justify-content: center;
   align-items: center;
   height: 100vh;
-  background-color: #666;
+  background-color: #999;
   gap: 15px;
   margin: 0;
 }
-
+ 
-
+ 
 .upload-container {
   background: white;
   padding: 40px;
@@ -18,25 +18,25 @@ body {
   box-shadow: 0 4px 10px rgba(0,0,0,0.1);
   text-align: center;
   width: 350px;
-  height: 100px;
+  height: 120px;
   transition: border 0.3s, background-color 0.3s;
-  border: 2px dashed #ccc;
+  border: 2px dashed #7378c9;
 }
-
+ 
-
+ 
 .upload-container.dragover {
   border-color: #007BFF;
   background-color: #eaf0ff;
 }
-
+ 
-
+ 
 .upload-container p {
   margin: 0 0 15px 0;
   font-size: 16px;
   color: #555;
 }
-
+ 
-
+ 
 .file-name {
   margin-top: 10px;
   font-size: 14px;
@@ -45,8 +45,22 @@ body {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
+ 
-
+#thumbnailContainer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 15px;
+}
+ 
+#thumbnailImage {
+  width: 200px;
+  height: auto;
+  border-radius: 10px;
+  box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
+  object-fit: cover;
+}
+ 
 .custom-btn {
   padding: 10px 20px;
   margin-top: 40px;
@@ -57,27 +71,27 @@ body {
   cursor: pointer;
   font-size: 14px;
 }
-
+ 
-
+ 
 .custom-btn:hover {
   background-color: #0056b3;
 }
-
+ 
 .submit-btn:hover {
   background-color: #0056b3;
 }
-
+ 
 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;
@@ -86,7 +100,7 @@ gap: 5px;
   gap: 10px;
   align-items: flex-start;
 }
-
+ 
 .submit-btn {
   padding: 10px 20px;
   margin-top: 10px;
@@ -98,13 +112,13 @@ gap: 5px;
   cursor: pointer;
   font-size: 14px;
 }
-
+ 
 .submit-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
 }
-
+ 
 .mitte {
   background-color: #f2f3f4;
   display: flex;
@@ -119,11 +133,11 @@ gap: 5px;
   border-style: solid;
   border-radius: 6px;
 }
-
+ 
 h1 {
   align-content: center;
 }
-
+ 
 .progressbar{
   position: relative;
   width: 210px;
@@ -133,14 +147,14 @@ h1 {
   overflow: hidden;
   visibility: hidden;
 }
-
+ 
 .progress_fill{
   width: 0%;
   height: 100%;
   background: green;
   transition: all 0.2s;
 }
-
+ 
 .progress_text{
   position: absolute;
   top: 50%;
@@ -148,16 +162,16 @@ h1 {
   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;
-}
+}