Add play button to video thumbnails and implement video streaming endpoint

static/index.html

@@ -58,6 +58,25 @@
 			opacity: 0.7;
 			z-index: 1;
 		}
+
+		.play-button {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			width: 80px; /* Adjust size as needed */
+			height: 80px; /* Adjust size as needed */
+			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
+			background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+			background-repeat: no-repeat;
+			background-position: center;
+			background-size: 50%; /* Adjust icon size within button */
+			border-radius: 50%; /* Circular button */
+			cursor: pointer;
+			z-index: 3; /* Ensure it's above the video thumbnails */
+			border: 2px solid white;
+			box-shadow: 0 0 15px rgba(0,0,0,0.7);
+		}
 	</style>
 	<script>
 		function hideLoader() {
@@ -91,6 +110,7 @@
 		<img id="prev-thumb" class="video-thumbnail side-video" alt="Previous Video">
 		<img id="current-thumb" class="video-thumbnail current-video" alt="Current Video">
 		<img id="next-thumb" class="video-thumbnail side-video" alt="Next Video">
+		<div class="play-button" id="play-button"></div>
 	</div>
 </body>
 </html>