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);