Merge pull request #20 from MAlshaik/main

Added loading bar for transcript
MSU-AI · Mar 8, 2023 · 4257c78 · 4257c78
2 parents 6fee79e + 92086c7
commit 4257c78
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 13 deletions.
diff --git a/Frontend/templates/Frontend/video-editing.html b/Frontend/templates/Frontend/video-editing.html
@@ -23,6 +23,14 @@
       <section class="progress-area"></section>
       <section class="uploaded-area"></section>
     </div>
+
+    <div id="loading-container">
+      <div class="bar">
+          <div class="fill"></div>
+      </div>
+    </div>
+
+    <button onclick="upload()">upload</button>
 
     <!-- Transcript Container -->
     <div id="editor-container">
@@ -31,12 +39,7 @@
 
       <div id="navbar">
         <nav>
-            <!-- <a href="Home.html"><img src="images/Logo.png" class="logo"></a> -->
             <ul>
-                <!-- <li><a href="">Start</a></li> -->
-                <!-- <li><a href="">Hello</a></li>
-                <li><a href="">Contemporary</a></li>
-                <li><a href="">Affordable</a></li> -->
             </ul>
         </nav>
       </div>
@@ -46,11 +49,10 @@
           <p></p>
         </div>
 
-        <!-- <textarea class="transcript-textarea"></textarea> Will not use text area for now 
-        since we are not ready to add the addition functionality -->
+
 
         <!-- Transcript -->
-        <div id = "transcript">
+      <div id = "transcript">
 
         </div>
         <div class="transcript-controls">
@@ -66,7 +68,6 @@
         <video id="video" controls>
           <source id="source" type="video/mp4">
         </video>
-        <!-- <canvas class="video-canvas"></canvas>  We do not need a canvas for now -->
       </div>
 
         <!-- Timeline -->

diff --git a/static/css/video-editing.css b/static/css/video-editing.css
@@ -174,6 +174,35 @@ nav ul li a{
 }
 
 
+
+#loading-container{
+  width: 70%;
+  padding: 50px 0;
+  background: #1d2026;
+  box-shadow: 0 0 30px rgba(0,0,0, 0.8);
+  border-radius: 5px;
+  text-align: center;
+  z-index: 1;
+  display: none;
+
+}
+
+.bar {
+  background: #b6b6b6;
+  width: 90%;
+  height: 50px;
+  margin: 10px auto;
+  border-radius: 50px;
+  overflow: hidden;
+}
+
+.fill {
+  height: 100%;
+  width: 1%;
+  background: linear-gradient(45deg, #008998, #00d199);
+}
+
+
 #editor-container {
   display: flex;
   position: absolute;

diff --git a/static/js/background.js b/static/js/background.js
diff --git a/static/js/upload-video.js b/static/js/upload-video.js
@@ -1,3 +1,6 @@
+console.log("start of upload.js");
+
+
 const form = document.querySelector("form"),
 fileInput = document.querySelector(".file-input"),
 progressArea = document.querySelector(".progress-area"),
@@ -70,7 +73,7 @@ function uploadFile(file){
 
   xhr.addEventListener("load", doneHandler);
 
-  // Define a POST request to uploads
+  // Define bar POST request to uploads
 
   xhr.open("POST", "/uploads/");
 
@@ -90,5 +93,49 @@ function uploadFile(file){
 
   // Finally, hide the upload screen
 
-  document.getElementById("wrapper").style.visibility = "hidden";
+  document.getElementById("wrapper").style.display = "none";
+
+  // If the upload feild is gone show the loading bar
+
+  if(document.getElementById("wrapper").style.display == "none"){
+
+    let container = document.getElementById("loading-container");
+    let fill = document.querySelector(".fill");
+    let transcript = document.querySelector(".transcript-container").innerHTML;
+    console.log(transcript);
+
+    container.style.display = "block";
+    const video = document.getElementById('video');
+    let video_len;
+
+    // Check if video has been loaded and grab the length of the video
+
+    video.addEventListener('loadedmetadata', () => {
+      video_len = video.duration;
+      console.log(video_len);
+    });
+
+    // Loop through the video length
+
+    var bar = 0;
+    var run = setInterval(frames,2);
+    function frames(){
+      bar++;
+      if (fill.style.width.substring(0,3) == "100"){
+          clearInterval(run);
+          container.style.display = "none";
+      }else{
+          fill.style.width = bar/video_len + "%";
+      }
+
+      if (document.querySelector(".transcript-container").innerHTML != transcript){
+        fill.style.width = "100%";
+      }
+  }
+
+  } 
+
+
 }
+
+
diff --git a/static/js/video-editing.js b/static/js/video-editing.js
@@ -1,4 +1,5 @@
-console.log("last line test case");
+console.log("start of video-editing.js");
+
 
 let transcriptArea = document.getElementById("transcript");
 let transcriptHTML = ` `;
@@ -43,7 +44,6 @@ function processData(data) {
                 paragraph += `<span data-time=${words['start']}> ${word}</span>`;
 
             } else {
-
                 line += ` ${word}`;
                 paragraph += `<span data-time=${words['start']}> ${word}</span>`;
             }