From 6232e8b12c0897a8a6f878559fd3ff28221d8016 Mon Sep 17 00:00:00 2001
From: Mohammad Alshaikhusain <workmail2776@gmail.com>
Date: Wed, 12 Apr 2023 02:58:37 -0400
Subject: [PATCH] Added timeline as well as updating video once edited
 functionality

---
 .../templates/Frontend/video-editing.html     |  55 +++------
 static/css/video-editing.css                  |  60 ++++++++--
 static/js/generate-timeline.js                | 111 ++++++++++--------
 static/js/transcript-editing.js               |   6 +-
 static/js/transcript-generation.js            |   6 +-
 static/js/upload-video.js                     |  20 +---
 static/js/video-editing.js                    |   9 ++
 7 files changed, 144 insertions(+), 123 deletions(-)
diff --git a/Frontend/templates/Frontend/video-editing.html b/Frontend/templates/Frontend/video-editing.html
index 794d063..0c84840 100644
--- a/Frontend/templates/Frontend/video-editing.html
+++ b/Frontend/templates/Frontend/video-editing.html
@@ -8,22 +8,6 @@
     <link rel="stylesheet" href="{% static 'css/video-editing.css' %}"/>
     <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'/>
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="{% static 'timeline/samples/css/default.css' %}" rel="stylesheet"/>
-    
-    <script src="{% static 'timeline/bower_components/jquery/amalia-dist/jquery.js' %}"></script>
-    <script src="{% static 'timeline/bower_components/jquery-ui/jquery-ui.min.js' %}"></script>        
-    <script src="{% static 'timeline/bower_components/raphael/raphael.js' %}"></script>
-    <!-- style-player -->        
-    <link href="{% static 'timeline/amalia-build/css/amalia.js.min.css' %}" rel="stylesheet"/>
-    <!-- /style-player -->        
-    <!-- script-player -->        
-    <script src="{% static 'timeline/amalia-build/js/amalia.js.min.js' %}"></script>
-    <script src="{% static 'timeline/amalia-build/js/amalia.js.min.js' %}"></script>    
-
-    <script src="{% static 'timeline/amalia-build/js/i18n/amalia.js-message-en.js' %}"></script>
-    <!-- /script-player -->
-
     <title>Transcript-Editing</title>
   </head>
   <body>
@@ -47,7 +31,6 @@
       <p>Loading your workspace...</p>
     </div>
 
-    <button onclick="upload()">upload</button>
 
     <!-- Transcript Container -->
     <div id="editor-container">
@@ -86,34 +69,24 @@
       <!-- Video -->
 
           
-       <!-- 
-        <video id="video" controls>
-          <source id="source" type="video/mp4">
-        </video>
-      </div>
-        -->
-
-        <!-- Timeline -->
-
-        <div class="video-container">
-            <div class="header">
-                 
-            </div>
-            <div class="content">           
-                <div class="demo">
-                    <div>
-                        <div id="defaultPlayer" ></div>
-                    </div>
-                    <div id="amalia-timeline" ></div>
-                    <script src="{% static 'js/generate-timeline.js' %}"></script>
-                </div>
-            </div>
-      </div>
-      </div>
+      <div class="video-container">
+
+          <video id="video" controls>
+              <source id="source" type="video/mp4">
+          </video>
+
+          <div id="timeline">
+              <div id="screenshotContainer">
+                  <div id="bar"></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>
       <script src="{% static 'js/video-editing.js' %}"></script>
+      <script src="{% static 'js/generate-timeline.js' %}"></script>
       <script>       
           document.addEventListener("DOMContentLoaded", function() {
               console.log("----------------DOMContentLoaded------------------------")
diff --git a/static/css/video-editing.css b/static/css/video-editing.css
index 67f1761..e1f9f33 100755
--- a/static/css/video-editing.css
+++ b/static/css/video-editing.css
@@ -7,10 +7,13 @@
   font-family: "Poppins", sans-serif;
 }
 body{
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;  
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 100vh;
   background-color:#1d2026;
 }
 
@@ -176,12 +179,11 @@ nav ul li a{
 
 
 #loading-container {
-  width: 100%;
-  height: 100%;
-  background: #1d2026;
-  border-radius: 5px;
+  min-width: 100%;
+  height: 100%; 
+  background: #1d2026; 
   text-align: center;
-  z-index: 1;
+  z-index: 9;
   display: none;
   align-items: center;
   justify-content: center;
@@ -345,11 +347,17 @@ nav ul li a{
   cursor: pointer;
 }
 
-.video-container {
-  width: 70%;
-  height: 100%;
-  float: right;
-  padding: 50px;
+.video-container{
+    display: flex;
+    flex-direction: column;
+    width: 70%;
+    height: 100%;
+    float: right;
+    padding: 50px;
+}
+
+#video{
+ width: 100%; 
 }
 
 .video-header {
@@ -375,4 +383,34 @@ nav ul li a{
   margin-top: 20px;
   background-color: #454c5a;
   border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
 }
+
+#screenshotContainer {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    overflow-x: hidden;
+    white-space: nowrap;
+}
+.screenshot {
+    width: 150px;
+    height: 84px;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+#bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 10px;
+    height: 100%;
+    background-color: white;
+    cursor: pointer;
+}
+
diff --git a/static/js/generate-timeline.js b/static/js/generate-timeline.js
index f8a7bfd..2b83542 100755
--- a/static/js/generate-timeline.js
+++ b/static/js/generate-timeline.js
@@ -1,52 +1,69 @@
 // This function generates the timeline
-function generateTimeline(src) {
-
-    $( "#defaultPlayer" ).mediaPlayer( {
-        autoplay: false,
-        src: src,
-        controlBar: {
-            sticky: true
-        },
-        plugins: {
-            dataServices: [
-                '/static/timeline/samples-data/examples/json/amalia01-events.json',
-                '/static/timeline/samples-data/examples/json/amalia01-kf.json',
-                '/static/timeline/samples-data/examples/json/amalia01-ball.json'
-            ],
-            list: [
-                {
-                    'className': 'fr.ina.amalia.player.plugins.TimelinePlugin',
-                    'container': '#amalia-timeline',
-                    'parameters': {
-                        listOfLines: [
-                            /*
-                            {
-                                title: 'Events',
-                                type: 'cuepoint',
-                                metadataId: 'events-amalia01',
-                                color: '#3CF',
-                                pointNav: true
-                            },
-                            {
-                                title: 'Ball moving up',
-                                type: 'segment',
-                                metadataId: 'ball-amalia01',
-                                color: '#F00'
-                            },
-                            */
-                            {
-                                title: 'Keyframes every 2s',
-                                type: 'image',
-                                metadataId: 'kf-amalia01',
-                                pointNav: true,
-                                editable: true
-                            }
-                        ],
-                        editingMode: true
-                    }
-                }
-            ]
+function generateTimeline() {
+    const video = document.querySelector('#video');
+    const screenshotContainer = document.querySelector('#screenshotContainer');
+    const bar = document.querySelector('#bar');
+    let interval;
+    let isDragging = false;
+
+    video.playbackRate = 16; // play the video at 16x speed
+    video.muted = true; // mute the videoWidth
+    video.play();
+
+    video.addEventListener('play', () => {
+        interval = setInterval(() => {
+            const canvas = document.createElement('canvas');
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+
+            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
+            const img = document.createElement('img');
+            img.src = canvas.toDataURL();
+            img.classList.add('screenshot');
+            img.addEventListener('click', (e) => {
+                updateBarPosition(e.clientX);
+            });
+            screenshotContainer.appendChild(img);
+        }, 10000 / video.playbackRate); // take a screenshot every 10 seconds at normal speed (0.625 seconds at 16x speed)
+    });
+
+    video.addEventListener('pause', () => {
+        clearInterval(interval);
+    });
+
+    video.addEventListener('ended', () => {
+        clearInterval(interval);
+        video.playbackRate = 1; // reset the playback rate to normal speed
+        video.muted = false; // unmute the video
+        video.currentTime = 0;
+    });
+
+    bar.addEventListener('mousedown', (e) => {
+        isDragging = true;
+        updateBarPosition(e.clientX);
+    });
+
+    document.addEventListener('mousemove', (e) => {
+        if (isDragging) {
+            updateBarPosition(e.clientX);
         }
     });
+
+    document.addEventListener('mouseup', () => {
+        isDragging = false;
+    });
+
+    function updateBarPosition(clientX) {
+        const rect = screenshotContainer.getBoundingClientRect();
+        const x = clientX - rect.left + screenshotContainer.scrollLeft;
+        const position = Math.max(0, Math.min(x / rect.width, 1));
+        bar.style.left = `${position * 100}%`;
+        video.currentTime = position * video.duration;
+    } 
+
+    screenshotContainer.addEventListener('wheel', (e) => {
+        e.preventDefault();
+        screenshotContainer.scrollLeft += e.deltaY;
+    }); 
 }
 
diff --git a/static/js/transcript-editing.js b/static/js/transcript-editing.js
index 09ab684..b25b9d2 100755
--- a/static/js/transcript-editing.js
+++ b/static/js/transcript-editing.js
@@ -24,7 +24,7 @@ function editTranscript(){
 
 }
 
-function saveTranscript(){
+async function saveTranscript(){
     console.log("saving transcript");
 
     transcript_container.classList.replace('transcript-container-editing','transcript-container');
@@ -33,9 +33,7 @@ function saveTranscript(){
     save_button.style.display = "none";
     delete_button.style.display = "none";
 
-    cutVideo(id, timestamps);
-    
-    
+    cutVideo(id, timestamps);    
 
 }
 
diff --git a/static/js/transcript-generation.js b/static/js/transcript-generation.js
index 5c4436a..b6de44a 100755
--- a/static/js/transcript-generation.js
+++ b/static/js/transcript-generation.js
@@ -73,11 +73,11 @@ function processData(data) {
 
         word.addEventListener("click", (function(time) {
             return function() {
-                let mediaPlayer = $("#defaultPlayer").data('fr.ina.amalia.player').getPlayer();;
+                let video = document.getElementById("video");
 
                 // Set the media player's current time to the time attribute
-                mediaPlayer.seek(time);
-                mediaPlayer.play(); 
+                video.currentTime = time;
+                video.play(); 
             }
         })(time));
     }
diff --git a/static/js/upload-video.js b/static/js/upload-video.js
index 756b6d8..f19cdbc 100755
--- a/static/js/upload-video.js
+++ b/static/js/upload-video.js
@@ -48,29 +48,15 @@ fileInput.onchange = async ({target})=>{
         var reader = new FileReader();
 
         reader.onload = function(e){
-            
-            var src = e.target.result;
-            /*
-            let mediaPlayer = $("#defaultPlayer").mediaPlayer();
-            mediaPlayer[0].src = src;
-
-            // Show the mediaPlayer
-            console.log("showing mediaPlayer")
-            mediaPlayer.show();
-            
 
-            
+            var src = e.target.result;
             var video = document.getElementById("video");
             var source = document.getElementById("source")
 
             source.setAttribute("src", src);
             video.load();
-            */
-            // Calls the function that generates the timeline for the video  
-            generateTimeline(src);  
-
-        }
-
+            generateTimeline();
+        } 
         reader.readAsDataURL(file)
     }
 
diff --git a/static/js/video-editing.js b/static/js/video-editing.js
index 778363c..a33c46e 100644
--- a/static/js/video-editing.js
+++ b/static/js/video-editing.js
@@ -34,6 +34,15 @@ async function cutVideo(id, timestamps){
     var new_id = await makeRequest("/api/cuts/", data);
     
     download_url = await getVideo(new_id["id"]);
+    let url = download_url["url"];
+
+    video = document.getElementById("video");
+    source = document.getElementById("source");
+
+    source.setAttribute("src", url);
+    video.load();
+    console.log(source);
+
     console.log("New ID");
     console.log(new_id);
 
