Enhance video thumbnail focus handling and update video retrieval logic
This commit is contained in:
		@@ -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) {
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user