changes in UI and user quality of life

MSU-AI · Apr 13, 2023 · 1cb20f6 · 1cb20f6
1 parent d69c20a
commit 1cb20f6
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 28 deletions.
diff --git a/Frontend/templates/Frontend/video-editing.html b/Frontend/templates/Frontend/video-editing.html
@@ -73,19 +73,20 @@
 
           <video id="video" controls>
               <source id="source" type="video/mp4">
-          </video> 
-      </div> 
-      <div id="timeline">
-          <div id="timeline-controls">
-              <button id="cut" onclick="cuttingMode()">cut</button>
-              <button id="start" onclick="startCut()">start</button>
-              <button id="end" onclick="endCut()">end</button>
-          </div> 
-          <div id="screenshotContainer">
-              <div id="bar"></div>
+          </video>
+
+          <div id="timeline">
+              <div id="timeline-controls">
+                <button id="cut" onclick="cuttingMode()">cut</button>
+                <button id="start" onclick="startCut()">start</button>
+                <button id="end" onclick="endCut()">end</button>
+              </div> 
+              <div id="screenshotContainer">
+                  <div id="bar"></div>
+              </div>
           </div>
-      </div>
 
+      </div> 
       <script src="{% static 'js/upload-video.js' %}"></script>
       <script src="{% static 'js/transcript-generation.js' %}"></script>
       <script src="{% static 'js/transcript-editing.js' %}"></script>
@@ -95,8 +96,8 @@
           document.addEventListener("DOMContentLoaded", function() {
               console.log("----------------DOMContentLoaded------------------------")
           });
-      </script>
-
+    </script>
 
+
 
-  </body>
+      </body>
diff --git a/b2896a3f-e879-4eaf-b07b-647f8ec7aadcTEMP_MPY_wvf_snd.mp3 b/b2896a3f-e879-4eaf-b07b-647f8ec7aadcTEMP_MPY_wvf_snd.mp3
diff --git a/d23f6b79-19b6-4037-bcb2-eb1188f753b6TEMP_MPY_wvf_snd.mp3 b/d23f6b79-19b6-4037-bcb2-eb1188f753b6TEMP_MPY_wvf_snd.mp3
diff --git a/f0c62f84-1042-455d-ba73-f3fdc05ff337TEMP_MPY_wvf_snd.mp3 b/f0c62f84-1042-455d-ba73-f3fdc05ff337TEMP_MPY_wvf_snd.mp3
diff --git a/static/css/video-editing.css b/static/css/video-editing.css
@@ -251,18 +251,19 @@ nav ul li a{
 
 .transcript-container-wrapper {
   width: 30%;
-  height: 75%;
+  height: 100%;
   display: flex;
   flex-direction: column;
+  padding: 50px;
 }
 
 .transcript-container {
   width: 100%;
   height: 100%;
+  padding-top: 10px;
   margin-left: 3%;
   float: left;
   font-family: Arial, sans-serif;
-  padding: 50px;
   border: 2px white;
   overflow: scroll;
 }
@@ -331,8 +332,7 @@ nav ul li a{
 } */
 
 .transcript-controls {
-  margin-top: 10%;
-  margin-bottom: 5px;
+   margin-bottom: 5px;
   margin-left: 3%;
   text-align: right;
 }
@@ -380,16 +380,13 @@ nav ul li a{
 #timeline {
   width: 100%;
   height: 20%;
-  padding: 20px 20px 20px 20px;
-  margin-top: 10px;
+  margin-top: 20px;
   background-color: #454c5a;
   border-radius: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
-  clear: both;
-  position: absolute;
-  bottom: 0;
+
 }
 
 #screenshotContainer {

diff --git a/static/js/generate-timeline.js b/static/js/generate-timeline.js
@@ -87,12 +87,12 @@ function cuttingMode(){
 function startCut(){
     console.log(timelineTimestamps["timestamps"]);
     timelineTimestamps["timestamps"] = [];
-    timelineTimestamps["timestamps"].push([video.currentTime.toString()]);
+    timelineTimestamps["timestamps"].push([video.currentTime]);
 }
 
 function endCut(){
-
-    timelineTimestamps["timestamps"][0].push(video.currentTime.toString());
+    console.log(video.currentTime);
+    timelineTimestamps["timestamps"][0].push(video.currentTime);
     cutVideo(id, timelineTimestamps);
 
     cutButton.style.display = "flex";

diff --git a/static/js/transcript-generation.js b/static/js/transcript-generation.js
@@ -17,7 +17,10 @@ function load(){
 }
 
 function processData(data) { 
+    console.log(`%c Before: ${transcriptArea.innerHTML}`,'color: red');
     transcriptArea.innerHTML = "";
+    console.log(`%c After: ${transcriptArea.innerHTML}`,'color: red');
+    transcriptHTML = ` `;
     line = '';
     paragraph = `<p>`;
     console.log(data["timestamps"]);

diff --git a/static/js/video-editing.js b/static/js/video-editing.js
@@ -20,8 +20,10 @@ async function makeRequest(url, data) {
 }
 
 async function cutVideo(id, timestamps){
+    console.trace();
     // Given a dictonary containing a timestamp list, cut the video in according to the timestamps.
-
+    console.log(timestamps);
+
     let timestampJson = JSON.stringify(timestamps);
     let timestampList = timestamps["timestamps"];
 

diff --git a/transcription/views.py b/transcription/views.py
@@ -258,7 +258,6 @@ def cut_files(request):
         # Iterate over each cut:
 
         for cut in cuts:
-            cut = [eval(i) for i in cut]
             print(f"Current timestamp: {cut}")
 
             clip = clip.cutout(cut[0] - total_removed, cut[1] - total_removed)