Refactor video thumbnail handling to support multiple next videos and improve data structure

static/index.html

@@ -53,7 +53,7 @@
 			aspect-ratio: 16/9;
 			width: 20vw;
 			transition: width 0.3s ease, box-shadow 0.3s ease, left 0.3s ease;
-			transform: translate(-50%, 0);
+			transform: translate(-50%, -50%);
 			position: fixed;
 		}
 
@@ -313,17 +313,19 @@
          * @param append Set to true if this thumbnail should be appended to the video container, false if it should be prepended.
          */
         function createVideoThumbnailElement(data, selected, append) {
+            let container = $(`<span></span>`);
 			let thumbnail = $(`<img src="${data.thumbnail}" class="video-thumbnail" alt="Video Thumbnail" tabindex="0">`)[0];
+            container.append(thumbnail)
             let index;
             if (append) {
-                $("#video-container").append(thumbnail);
+                $("#video-container").append(container);
 				index = videoInfo.length;
                 videoInfo.push({
 					thumbnail,
 					data
                 })
             } else {
-				$("#video-container").prepend(thumbnail);
+				$("#video-container").prepend(container);
 				index = 0;
 				videoInfo.unshift({
 					thumbnail,
@@ -441,10 +443,8 @@
 
 			$.getJSON("/api/homepage", function(data) {
                 createVideoThumbnailElement(data.currentVideo, true, true);
-                for (let i = 0; i < 10; i++)
-                    createVideoThumbnailElement(data.nextVideo, false, true);
-                for (let i = 0; i < 10; i++)
-                    createVideoThumbnailElement(data.nextVideo, false, false);
+                for (let i = 0; i < data.nextVideos.length; i++)
+                    createVideoThumbnailElement(data.nextVideos[i], false, true);
 				// currentVideo = data.currentVideo;
                 // nextVideo = data.nextVideo;
 				// $("#current-thumb").attr("src", currentVideo.thumbnail);

webview.go

@@ -58,24 +58,36 @@ type VideoModel struct {
 }
 
 type HomePageModel struct {
-	CurrentVideo VideoModel `json:"currentVideo"`
-	NextVideo    VideoModel `json:"nextVideo"`
+	Current  VideoModel   `json:"currentVideo"`
+	Next     []VideoModel `json:"nextVideos"`
+	Previous []VideoModel `json:"previousVideos"`
 }
 
 func (a *App) homePage(c *gin.Context) {
 	model := HomePageModel{}
 	errCurrent := a.db.Query("SELECT id, thumbnail FROM videos WHERE (watch_state IS NULL OR watch_state != 'watched') ORDER BY upload_date, episode LIMIT 1").
-		ScanSingle(&model.CurrentVideo.ID, &model.CurrentVideo.Thumbnail)
-	errNext := a.db.Query("SELECT id, thumbnail FROM videos WHERE (watch_state IS NULL OR watch_state != 'watched') ORDER BY upload_date, episode LIMIT 1 OFFSET 1").
-		ScanSingle(&model.NextVideo.ID, &model.NextVideo.Thumbnail)
-	if err := cmp.Or(errCurrent, errNext); err != nil {
+		ScanSingle(&model.Current.ID, &model.Current.Thumbnail)
+
+	var errNext, errPrevious error
+	for row := range a.db.Query("SELECT id, thumbnail FROM videos WHERE (watch_state IS NULL OR watch_state != 'watched') ORDER BY upload_date, episode LIMIT 3 OFFSET 1").Range(&errNext) {
+		video := VideoModel{}
+		err := row.Scan(&video.ID, &video.Thumbnail)
+		if err != nil {
+			log.Printf("Failed to scan next video: %v", err)
+			c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to retrieve next videos"})
+			return
+		}
+		video.URL = fmt.Sprintf("/stream/%d", video.ID)
+		model.Next = append(model.Next, video)
+	}
+
+	if err := cmp.Or(errCurrent, errNext, errPrevious); err != nil {
 		log.Printf("Failed to retrieve videos: %v", err)
 		c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to retrieve videos"})
 		return
 	}
 
-	model.CurrentVideo.URL = fmt.Sprintf("/stream/%d", model.CurrentVideo.ID)
-	model.NextVideo.URL = fmt.Sprintf("/stream/%d", model.CurrentVideo.ID)
+	model.Current.URL = fmt.Sprintf("/stream/%d", model.Current.ID)
 
 	c.JSON(200, model)
 }