From 9998a0ab3699266205d69586dc8244398fd03d30 Mon Sep 17 00:00:00 2001
From: Sebastiaan de Schaetzen <sebastiaan.de.schaetzen@gmail.com>
Date: Tue, 17 Jun 2025 14:18:01 +0200
Subject: [PATCH] Enhance video thumbnail focus handling and update video
 retrieval logic

---
 static/index.html | 16 +++++++++++-----
 webview.go        | 16 ++++++++++++----
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/static/index.html b/static/index.html
index 345e69b..3a112fb 100644
--- a/static/index.html
+++ b/static/index.html
@@ -55,7 +55,6 @@
 		.current-video {
 			width: 50vw;
 			z-index: 2;
-			box-shadow: 0 0 200px -10px #444;
 		}
 
 		.side-video {
@@ -158,12 +157,17 @@
 		}
 
 		/* Styles for TV remote focus indication */
-		.video-thumbnail:focus,
 		#back-button:focus {
 			outline: 3px solid #3498db !important; /* A clear blue outline */
 			box-shadow: 0 0 15px #3498db; /* A glow effect */
 		}
 
+		.video-thumbnail:focus {
+			/*outline: 3px solid #444;*/
+			outline: 3px solid #557; /* Remove focus outline for elements with nofocus class */
+			box-shadow: 0 0 400px -10px #446
+		}
+
 		.nofocus:focus {
 			outline: none !important; /* Remove focus outline for elements with nofocus class */
 		}
@@ -311,15 +315,17 @@
 
 			$.getJSON("/api/homepage", function(data) {
 				currentVideo = data.currentVideo;
+                nextVideo = data.nextVideo;
 				$("#current-thumb").attr("src", currentVideo.thumbnail);
+                $("#current-thumb").attr("src", nextVideo.thumbnail);
 				// Consider populating prev-thumb and next-thumb here if data provides them
 
 				hideSpinner();
                 showVideoContainer();
 
 				// FOCUS: Set initial focus on the main screen
-				if ($(".video-container").is(":visible") && $('#play-button').length) {
-					$('#play-button').focus();
+				if ($(".video-container").is(":visible")) {
+					$('#current-thumb').focus();
 				}
 			}).fail(function(jqXHR, textStatus, errorThrown) {
                 console.error("Failed to load homepage data:", textStatus, errorThrown);
@@ -410,7 +416,7 @@
             overlayContainer.on('mousemove.inactivityControls', showControlsAndResetTimer);
 
             // --- TV Remote/Keyboard Navigation ---
-            const mainViewFocusable = [$('#prev-thumb'), $('#play-button'), $('#next-thumb')].filter(el => el && el.length > 0);
+            const mainViewFocusable = [$('#prev-thumb'), $('#current-thumb'), $('#next-thumb')].filter(el => el && el.length > 0);
             const getOverlayViewFocusableElements = () => [backButton, playPauseButton, seekBar].filter(el => el && el.length > 0 && el.is(':visible'));
 
             $(document).on('keydown', function(e) {
diff --git a/webview.go b/webview.go
index 5daa1c8..1d3d6cb 100644
--- a/webview.go
+++ b/webview.go
@@ -1,6 +1,7 @@
 package main
 
 import (
+	"cmp"
 	"fmt"
 	"gitea.seeseepuff.be/seeseemelk/mysqlite"
 	"github.com/donseba/go-htmx"
@@ -58,20 +59,27 @@ type VideoModel struct {
 
 type HomePageModel struct {
 	CurrentVideo VideoModel `json:"currentVideo"`
+	NextVideo    VideoModel `json:"nextVideo"`
 }
 
 func (a *App) homePage(c *gin.Context) {
 	model := HomePageModel{}
-	err := a.db.Query("SELECT id, thumbnail FROM videos WHERE (watch_state IS NULL OR watch_state != 'watched') ORDER BY upload_date, episode LIMIT 1").
+	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)
-	if err != nil {
-		log.Printf("Failed to fetch current video: %v", err)
-		c.JSON(500, gin.H{"error": "Failed to fetch current video"})
+	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 {
+		log.Printf("Failed to retrieve videos: %v", err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to retrieve videos"})
 		return
 	}
+
 	model.CurrentVideo.Thumbnail = "https://imgproxy.fourthwall.com/GHX1MSukwJHMQeiqcJLZL906v2--re7qQbQIlHgy5jY/rs:fill:607:342:0/q:90/sm:1/enc/NDJiMWM5YzU3ODJh/MzgzZXFIti10srar/EYcgeYXIe6MXrQge/VBPZVk3b6DCE53dq/VGponLkc45F9743G/4la9S4IjbcNxs4lF/WnLXCMzFhaSUaZnL/Og4de_FSYxQOtzCC/0pfkgH1g4FJfajde/KrZfes95EWXzg9sP/kvEwcqro2EM.webp"
 	model.CurrentVideo.URL = fmt.Sprintf("/stream/%d", model.CurrentVideo.ID)
 
+	model.NextVideo.Thumbnail = "https://imgproxy.fourthwall.com/GHX1MSukwJHMQeiqcJLZL906v2--re7qQbQIlHgy5jY/rs:fill:607:342:0/q:90/sm:1/enc/NDJiMWM5YzU3ODJh/MzgzZXFIti10srar/EYcgeYXIe6MXrQge/VBPZVk3b6DCE53dq/VGponLkc45F9743G/4la9S4IjbcNxs4lF/WnLXCMzFhaSUaZnL/Og4de_FSYxQOtzCC/0pfkgH1g4FJfajde/KrZfes95EWXzg9sP/kvEwcqro2EM.webp"
+	model.NextVideo.URL = fmt.Sprintf("/stream/%d", model.CurrentVideo.ID)
+
 	c.JSON(200, model)
 }