Add watch progress feature to video model and UI

static/index.html

@@ -93,6 +93,25 @@
 			opacity: 1;
 		}
 
+		.progress-bar-container {
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 5px; /* Or adjust as needed */
+			background-color: rgba(0, 0, 0, 0.5);
+			border-bottom-left-radius: 8px;
+			border-bottom-right-radius: 8px;
+			overflow: hidden;
+		}
+
+		.progress-bar {
+			height: 100%;
+			background-color: #3498db; /* A nice blue */
+			width: 0; /* Initially no progress */
+			transition: width 0.2s ease-in-out;
+		}
+
 		.play-button {
 			position: absolute;
 			top: 50%;
@@ -339,7 +358,13 @@
 			let container = $(`<div class="video-thumbnail" tabindex="0" role="button" aria-label="${data.title}"></div>`);
 			let thumbnailImg = $(`<img src="${data.thumbnail}" alt="" style="width: 100%; height: 100%; object-fit: cover;">`);
 			let title = $(`<div class="video-title">${data.title}</div>`);
-			container.append(thumbnailImg).append(title);
+			let progressBarContainer = $(`<div class="progress-bar-container"><div class="progress-bar"></div></div>`);
+
+			container.append(thumbnailImg).append(title).append(progressBarContainer);
+
+			if (data.watchProgress > 0) {
+				progressBarContainer.find(".progress-bar").css("width", (data.watchProgress * 100) + "%");
+			}
 
 			let index;
 			if (append) {