Show title
This commit is contained in:
		@@ -53,8 +53,9 @@
 | 
				
			|||||||
			aspect-ratio: 16/9;
 | 
								aspect-ratio: 16/9;
 | 
				
			||||||
			width: 20vw;
 | 
								width: 20vw;
 | 
				
			||||||
			transition: width 0.3s ease, box-shadow 0.3s ease, left 0.3s ease;
 | 
								transition: width 0.3s ease, box-shadow 0.3s ease, left 0.3s ease;
 | 
				
			||||||
			transform: translate(-50%, -50%);
 | 
								transform: translate(-50%, 0);
 | 
				
			||||||
			position: fixed;
 | 
								position: fixed;
 | 
				
			||||||
 | 
								overflow: hidden; /* Ensure content fits within rounded corners */
 | 
				
			||||||
		}
 | 
							}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		.video-thumbnail.focussed {
 | 
							.video-thumbnail.focussed {
 | 
				
			||||||
@@ -70,6 +71,28 @@
 | 
				
			|||||||
			z-index: 1;
 | 
								z-index: 1;
 | 
				
			||||||
		}
 | 
							}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
							.video-title {
 | 
				
			||||||
 | 
								position: absolute;
 | 
				
			||||||
 | 
								bottom: 0;
 | 
				
			||||||
 | 
								left: 0;
 | 
				
			||||||
 | 
								width: 100%;
 | 
				
			||||||
 | 
								background-color: rgba(0, 0, 0, 0.7);
 | 
				
			||||||
 | 
								color: white;
 | 
				
			||||||
 | 
								padding: 8px;
 | 
				
			||||||
 | 
								box-sizing: border-box;
 | 
				
			||||||
 | 
								text-align: center;
 | 
				
			||||||
 | 
								font-size: 1rem;
 | 
				
			||||||
 | 
								opacity: 0;
 | 
				
			||||||
 | 
								transition: opacity 0.3s ease-in-out;
 | 
				
			||||||
 | 
								border-bottom-left-radius: 8px;
 | 
				
			||||||
 | 
								border-bottom-right-radius: 8px;
 | 
				
			||||||
 | 
							}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
							.video-thumbnail:hover .video-title,
 | 
				
			||||||
 | 
							.video-thumbnail.focussed .video-title {
 | 
				
			||||||
 | 
								opacity: 1;
 | 
				
			||||||
 | 
							}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		.play-button {
 | 
							.play-button {
 | 
				
			||||||
			position: absolute;
 | 
								position: absolute;
 | 
				
			||||||
			top: 50%;
 | 
								top: 50%;
 | 
				
			||||||
@@ -313,30 +336,32 @@
 | 
				
			|||||||
         * @param append Set to true if this thumbnail should be appended to the video container, false if it should be prepended.
 | 
					         * @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) {
 | 
					        function createVideoThumbnailElement(data, selected, append) {
 | 
				
			||||||
            let container = $(`<span></span>`);
 | 
								let container = $(`<div class="video-thumbnail" tabindex="0" role="button" aria-label="${data.title}"></div>`);
 | 
				
			||||||
			let thumbnail = $(`<img src="${data.thumbnail}" class="video-thumbnail" alt="Video Thumbnail" tabindex="0">`)[0];
 | 
								let thumbnailImg = $(`<img src="${data.thumbnail}" alt="" style="width: 100%; height: 100%; object-fit: cover;">`);
 | 
				
			||||||
            container.append(thumbnail)
 | 
								let title = $(`<div class="video-title">${data.title}</div>`);
 | 
				
			||||||
            let index;
 | 
								container.append(thumbnailImg).append(title);
 | 
				
			||||||
            if (append) {
 | 
					
 | 
				
			||||||
                $("#video-container").append(container);
 | 
								let index;
 | 
				
			||||||
 | 
								if (append) {
 | 
				
			||||||
 | 
									$("#video-container").append(container);
 | 
				
			||||||
				index = videoInfo.length;
 | 
									index = videoInfo.length;
 | 
				
			||||||
                videoInfo.push({
 | 
									videoInfo.push({
 | 
				
			||||||
					thumbnail,
 | 
										thumbnail: container[0],
 | 
				
			||||||
					data
 | 
										data
 | 
				
			||||||
                })
 | 
									})
 | 
				
			||||||
            } else {
 | 
								} else {
 | 
				
			||||||
				$("#video-container").prepend(container);
 | 
									$("#video-container").prepend(container);
 | 
				
			||||||
				index = 0;
 | 
									index = 0;
 | 
				
			||||||
				videoInfo.unshift({
 | 
									videoInfo.unshift({
 | 
				
			||||||
					thumbnail,
 | 
										thumbnail: container[0],
 | 
				
			||||||
					data
 | 
										data
 | 
				
			||||||
				});
 | 
									});
 | 
				
			||||||
                selectedThumbnailIndex++;
 | 
									selectedThumbnailIndex++;
 | 
				
			||||||
 | 
								}
 | 
				
			||||||
 | 
								if (selected) {
 | 
				
			||||||
 | 
									container[0].classList.add("focussed");
 | 
				
			||||||
 | 
									selectedThumbnailIndex = index;
 | 
				
			||||||
			}
 | 
								}
 | 
				
			||||||
            if (selected) {
 | 
					 | 
				
			||||||
                thumbnail.classList.add("focussed");
 | 
					 | 
				
			||||||
                selectedThumbnailIndex = index;
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
		}
 | 
							}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        /**
 | 
					        /**
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -55,6 +55,7 @@ type VideoModel struct {
 | 
				
			|||||||
	ID        int    `json:"id"`
 | 
						ID        int    `json:"id"`
 | 
				
			||||||
	Thumbnail string `json:"thumbnail"`
 | 
						Thumbnail string `json:"thumbnail"`
 | 
				
			||||||
	URL       string `json:"url"`
 | 
						URL       string `json:"url"`
 | 
				
			||||||
 | 
						Title     string `json:"title"`
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
type HomePageModel struct {
 | 
					type HomePageModel struct {
 | 
				
			||||||
@@ -65,13 +66,13 @@ type HomePageModel struct {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
func (a *App) homePage(c *gin.Context) {
 | 
					func (a *App) homePage(c *gin.Context) {
 | 
				
			||||||
	model := HomePageModel{}
 | 
						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").
 | 
						errCurrent := a.db.Query("SELECT id, thumbnail, title FROM videos WHERE (watch_state IS NULL OR watch_state != 'watched') ORDER BY upload_date, episode LIMIT 1").
 | 
				
			||||||
		ScanSingle(&model.Current.ID, &model.Current.Thumbnail)
 | 
							ScanSingle(&model.Current.ID, &model.Current.Thumbnail, &model.Current.Title)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	var errNext, errPrevious error
 | 
						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) {
 | 
						for row := range a.db.Query("SELECT id, thumbnail, title FROM videos WHERE (watch_state IS NULL OR watch_state != 'watched') ORDER BY upload_date, episode LIMIT 3 OFFSET 1").Range(&errNext) {
 | 
				
			||||||
		video := VideoModel{}
 | 
							video := VideoModel{}
 | 
				
			||||||
		err := row.Scan(&video.ID, &video.Thumbnail)
 | 
							err := row.Scan(&video.ID, &video.Thumbnail, &video.Title)
 | 
				
			||||||
		if err != nil {
 | 
							if err != nil {
 | 
				
			||||||
			log.Printf("Failed to scan next video: %v", err)
 | 
								log.Printf("Failed to scan next video: %v", err)
 | 
				
			||||||
			c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to retrieve next videos"})
 | 
								c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to retrieve next videos"})
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user