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", () => {
-  try {
-    activateSubmitBtn(videoUpload.files.length > 0);
-  } 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;
 }
-  
-});
-
-uploadContainer.addEventListener("drop", (e) => {
-  try {
-    e.preventDefault();
-    const file = e.dataTransfer.files[0];
-
-    if(file){
-      activateSubmitBtn(true);
-    }
-  } catch (error) {
-    console.log(error);
-  }
-  
-});

electron/main/style.css

@@ -5,7 +5,7 @@ body {
   justify-content: center;
   align-items: center;
   height: 100vh;
-  background-color: #666;
+  background-color: #999;
   gap: 15px;
   margin: 0;
 }
@@ -18,9 +18,9 @@ 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;
 }
  
  
@@ -46,6 +46,20 @@ body {
   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;