From c24c9d518128602e51a84e680b7d4df70742a6a0 Mon Sep 17 00:00:00 2001
From: parmaster <tony.racomore@gmail.com>
Date: Fri, 17 May 2024 15:05:53 +0300
Subject: [PATCH] Download Video File button

---
 web/watch.html | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/web/watch.html b/web/watch.html
index 98ffe5a..3fd2670 100755
--- a/web/watch.html
+++ b/web/watch.html
@@ -31,7 +31,7 @@ <h5 id="meetingTopic"></h1>
 			</div>
 		</div>
 		<div class="row">
-			<div class="col-md-10">
+			<div class="col-md-7">
 				<table>
 					<tbody>
 						<tr>
@@ -48,6 +48,13 @@ <h5 id="meetingTopic"></h1>
 					</tbody>
 				</table>
 			</div>
+			<div class="col-md-3">
+				<div class="d-flex justify-content-end">
+					<a name="download_button" href="#" class="btn btn-sm btn-primary" download="#" target="_blank">⤓ Download Video File</a>
+				</div>
+			</div>
+			<div class="col-md-2">
+			</div>
 		</div>
 	</div>
 	
@@ -83,11 +90,16 @@ <h5 id="meetingTopic"></h1>
 					$("#meetingId").text(data.meeting.id.toString().replace(/(\d{3})(\d{4})(\d{4})/, "$1 $2 $3"));
 					// Set the meeting date and time
 					$("#dateTime").text(data.meeting.date_time);
-					// loop through the data.records and find one with recording_type "shared_screen_with_gallery_view"
-					// and use data.records[i].file_path to set the source of the player
+					// loop through the data.records and find one with recording_type "shared_screen_with_gallery_view" or "shared_screen_with_speaker_view"
 					for (var i = 0; i < data.records.length; i++) {
 						if ((data.records[i].recording_type == "shared_screen_with_gallery_view") || (data.records[i].recording_type == "shared_screen_with_speaker_view")) {
+
+							// Use data.records[i].file_path to set the source of the player
 							$("#player").html('<video id="videoPlayer" style="width:100%" controls><source src="'+window.location.origin+'/' + data.records[i].file_path + '" type="video/mp4"></video>');
+
+							// Set the download button href and download attribute
+							$("a[name='download_button']").attr("href", window.location.origin + "/" + data.records[i].file_path);
+							$("a[name='download_button']").attr("download", data.meeting.topic + ".mp4");
 							break;
 						}
 					}
@@ -95,6 +107,17 @@ <h5 id="meetingTopic"></h1>
 			}
 		});
 
+		// disable download_button for 5 seconds on click to prevent multiple clicks
+		$("a[name='download_button']").click(function (event) {
+			if ($(this).hasClass("disabled")) {
+				event.preventDefault();
+			}
+			$(this).addClass("disabled");
+			setTimeout(function() {
+				$("a[name='download_button']").removeClass("disabled");
+			}, 5000);
+		});
+
 		// activate the chosen speed button
 		$("#speeds button").click(function() {
 			$("#speeds button").removeClass("active");