Merge pull request #46 from emilyfeuer/main

Added download functionality

Frontend/templates/Frontend/video-editing.html

@@ -7,6 +7,7 @@
 
     <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'/>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/FileSaver.min.js"></script>
 
     <title>Transcript-Editing</title>
   </head>
@@ -50,7 +51,7 @@
               <button id="edit-transcript", onclick="editTranscript()">Edit</button>
               <button id="download-transcript", onclick="downloadTranscript()">Download</button>
               <button id="save-transcript", onclick="saveTranscript()">Save</button>
-              <button id="delete-transcript", onclick="deleteTranscript()">delete</button> 
+              <button id="delete-transcript", onclick="deleteTranscript()">Delete</button> 
           </div>
 
           <div class="transcript-container">

static/js/transcript-editing.js

@@ -115,8 +115,26 @@ function deleteTranscript() {
     });
 }
 
-function downloadTranscript(){
-    console.log("downloading transcript"); 
+async function downloadTranscript(){  
+    console.log("downloading video"); 
+
+    var data = new FormData();
+    data.append('id', id);
+
+    var videoUrl = await makeRequest("/api/get/", data); 
+    var filename = "video.mp4";
+
+    console.log("Download URL:")
+    console.log(videoUrl);
+    console.log(videoUrl["url"]);
+
+    var xhr = new XMLHttpRequest();
+    xhr.responseType = "blob";
+    xhr.onload = function() {
+        saveAs(xhr.response, filename);
+    };
+    xhr.open("GET", videoUrl["url"]);
+    xhr.send();
 }