Merge pull request #12 from MAlshaik/main

Completed the ability to go to the location of each word from the transcript.
MSU-AI · Feb 24, 2023 · d11e789 · d11e789
2 parents ff49b13 + a34a046
commit d11e789
Show file tree

Hide file tree

Showing 11 changed files with 131 additions and 45 deletions.
diff --git a/Frontend/Home.html b/Frontend/Home.html
@@ -11,14 +11,17 @@
     <nav>
         <img src="images/Logo.png" class="logo">
         <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> -->
+            <li><a href="">About</a></li> 
+            <li><a href="">Login</a></li> 
+            <li><a href="">Sign-up</a></li> 
         </ul>
     </nav>
   </div>
 
+  <div class="camera-container">
+    <img src="images/OldSchoolCamera.png" class="camera">
+    <img src="images/camera-light.png" class="light">
+  </div>
 
 
   <div id="editor-container">
@@ -33,7 +36,7 @@ <h1>Revolutionizing <br> Video Editing</h1>
     <div id="editor"></div>
   </div>
 
-  <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
+  <!-- <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
   <script>
     var editor = new Quill('#editor', {
       modules: {
@@ -43,6 +46,6 @@ <h1>Revolutionizing <br> Video Editing</h1>
       theme: 'snow'
     });
     editor.root.innerHTML = '<p>Using the latest AI technology, we provide an innovative way to edit your videos. </p>';
-  </script>
+  </script> -->
 </body>
 </html>
diff --git a/Frontend/assets/output.json b/Frontend/assets/output.json
diff --git a/Frontend/home.css b/Frontend/home.css
@@ -1,15 +1,37 @@
 
-  #navbar {
+ body {
+  background-color: #1d2026;
+  overflow: hidden;
+ }
+ #navbar {
+  background: #1d2026;
+  height: 100vh;
+  width: 100%;
+  color: #fff;
+  position: relative;
+  }
+
+  .camera-container{
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 50px;
-    background-color: #1d2026;
-    display: flex;
-    align-items: center;
-    padding: 0 20px;
+    top: 30%;
+    left: 2%;
+    width: 650px;
+    transition: 0.3s;
+  }
+
+  .camera{
+    width: 100%;
+    transition: 0.3s;
   }
+
+
+
+  .light{
+    position: absolute;
+    width: 250%;
+    transform: translateX(-12%) translateY(-30%);
+  }
+
   #editor-container {
     position: absolute;
     top: 50px;
@@ -58,6 +80,7 @@
   display: flex;
   align-items: center;
   padding: 20px 8%;
+  background-color: #1d2026;
   }
 
   nav .menu-img {
@@ -67,7 +90,7 @@
   }
 
   nav .logo {
-      width: 160px;
+      transform: translateY(-20%);
       cursor: pointer;
 
   }
@@ -82,6 +105,7 @@
       display: inline-block;
       list-style: none;
       margin: 0 20px;
+
   }
 
   nav ul li a{
@@ -122,12 +146,23 @@ button span {
     font-size: 80px;
     font-weight: 400;
     color: white;
+    transition: 0.3s;
+}
+
+.text-container h1:hover{
+  color: #f2ffb7;
+  font-size: 84px;
 }
 
 .text-container p{
     font-size: 25px;
     color: white;
+    transition: 0.3s;
 }
+/* .text-container p:hover{
+  color: #f2ffb7;
+  font-size: 29px;
+} */
 
 .text-container a{
     text-decoration: none;

diff --git a/Frontend/images/Logo.png b/Frontend/images/Logo.png
diff --git a/Frontend/images/OldSchoolCamera.png b/Frontend/images/OldSchoolCamera.png
diff --git a/Frontend/images/camera-light.png b/Frontend/images/camera-light.png
diff --git a/Frontend/test.html b/Frontend/test.html
@@ -0,0 +1,8 @@
+<html>
+    <body>
+        <p>
+            <span>hi</span>
+            <span>hello</span>
+        </p>
+    </body>
+</html>
diff --git a/Frontend/upload-video.js b/Frontend/upload-video.js
@@ -76,9 +76,12 @@ function uploadFile(name){
       uploadedArea.classList.remove("onprogress");
       uploadedArea.innerHTML = uploadedHTML; 
       document.getElementById("wrapper").style.visibility = "hidden";
+
 
     }
   });
   let data = new FormData(form); //FormData is an object to easily send form data
   xhr.send(data); //sending form data
 }
+
+
diff --git a/Frontend/video-editing.css b/Frontend/video-editing.css
@@ -150,7 +150,8 @@ nav .menu-img {
 }
 
 nav .logo {
-    width: 160px;
+    /* width: 160px; */
+
     cursor: pointer;
 
 }
@@ -194,9 +195,14 @@ nav ul li a{
   font-family: Arial, sans-serif;
   padding: 50px;
   border: 2px white;
+  overflow: scroll;
 
 }
 
+.transcript-container::-webkit-scrollbar{
+  display: none;
+}
+
 .transcript-header {
   font-size: 24px;
   font-weight: bold;
@@ -206,10 +212,14 @@ nav ul li a{
 #transcript p{
   font-size: 24px;
   font-weight: bold;
+
+}
+
+#transcript span{
   transition: 0.32s;
 }
 
-#transcript p:hover{
+#transcript span:hover{
   color: #00d199;
   font-size: 28px;
 }
@@ -263,7 +273,7 @@ nav ul li a{
   width: 100%;
 }
 
-.timeline {
+#timeline {
   width: 100%;
   height: 20%;
   margin-top: 20px;

diff --git a/Frontend/video-editing.html b/Frontend/video-editing.html
@@ -25,7 +25,7 @@
 
       <div id="navbar">
         <nav>
-            <a href="Home.html"><img src="images/Logo.png" class="logo"></a>
+            <!-- <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>
@@ -66,24 +66,25 @@
       </div>
 
         <!-- Timeline -->
-        <div class="timeline">
+        <div id="timeline">
           <div class="timeline-container">
             <div class="timeline-header">
               Timeline
             </div>
             <div class="timeline"></div>
             <div class="timeline-controls">
-              <button id="play-button">Play</button>
+              <!-- <button id="play-button">Play</button>
               <button id="pause-button">Pause</button>
-              <button id="stop-button">Stop</button>
+              <button id="stop-button">Stop</button> -->
             </div>
           </div>
         </div>
 
       </div>
       </div>
-      <script src="video-editing.js"></script>
       <script src="upload-video.js"></script>
+      <script src="video-editing.js"></script>
+
 
 
       </body>

diff --git a/Frontend/video-editing.js b/Frontend/video-editing.js
@@ -1,33 +1,58 @@
 let transcriptArea = document.getElementById("transcript");
-let transcriptHTML = ` `
+let transcriptHTML = ` `;
 
-for (let i =0; i<10; i++){
-    transcriptHTML += `<p data-time="`+i*5+`">Testing for the length of the transcript container. </p>`
-}
-console.log(transcriptHTML);
-transcriptArea.innerHtml = "<p> Hello world </p>";
-console.log(transcriptArea.innerHtml);
+fetch('assets/output.json')
+  .then(response => response.json())
+  .then(data => {
+    // Use the data object here
+    processData(data);
+  });
+
+function processData(data) {
 
+    line = '';
+    paragraph = `<p>`
+    console.log(data["timestamps"]);
+    data = data["timestamps"];
+    for (i = 0; i < data.length; i++) {
+        for (j=0; j<data[i]["words"].length; j++) { 
+            words = data[i]["words"][j];
+            word = words['word'];
+
+            if (line.length + word.length > 40) {
+                paragraph += `</p>`;
+                transcriptHTML += paragraph;
+                paragraph = '<p>';
+                line = word;
+            } else {
+                line += `${word}`;
+                paragraph += `<span data-time=${words['start']}>${word}</span>`;
+            }
+        }
+    }
 
-// This script deals with adding functionality to the transcript, and all other features on the site
-var transcript = document.getElementById("transcript");
+    // transcriptHTML += `<p data-time="${words['end']}">${line.trim()}</p>`;
 
-var lines = transcript.getElementsByTagName("p");
+    transcriptArea.innerHTML = transcriptHTML;
 
-for (var i = 0; i < lines.length; i++) {
-    var line = lines[i];
-    var time = line.getAttribute("data-time");
+    // Add event listeners to the lines
+    var words = transcriptArea.getElementsByTagName("span");
+    for (var i = 0; i < words.length; i++) {
+        var word = words[i];
+        var time = word.getAttribute("data-time");
 
-    // Add a click event listener to the line
-    line.addEventListener("click", function() {
-    var video = document.getElementById("video");
+        word.addEventListener("click", (function(time) {
+            return function() {
+                var video = document.getElementById("video");
 
-    // Set the video's current time to the time attribute
-    video.currentTime = this.getAttribute("data-time");
-    video.play();
-    })
+                // Set the video's current time to the time attribute
+                video.currentTime = time;
+                video.play();
+            }
+        })(time));
+    }
 }
-    
+
 document.getElementById("play-button").addEventListener("click", function() {
 // Code to play the video goes here
 });