Add watch progress feature to video model and UI
All checks were successful
Build / build (push) Successful in 2m29s

This commit is contained in:
Sebastiaan de Schaetzen 2025-06-17 20:05:40 +02:00
parent 85e0c89ee8
commit e0e8f8742c
4 changed files with 37 additions and 9 deletions

1
.gitignore vendored
View File

@ -1,6 +1,7 @@
.idea
*.iml
*.db3
*.db3.*
*.db3-*
*.bak*
/downloads/

View File

@ -0,0 +1 @@
ALTER TABLE videos ADD COLUMN watch_progress REAL;

View File

@ -93,6 +93,25 @@
opacity: 1;
}
.progress-bar-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px; /* Or adjust as needed */
background-color: rgba(0, 0, 0, 0.5);
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
overflow: hidden;
}
.progress-bar {
height: 100%;
background-color: #3498db; /* A nice blue */
width: 0; /* Initially no progress */
transition: width 0.2s ease-in-out;
}
.play-button {
position: absolute;
top: 50%;
@ -339,7 +358,13 @@
let container = $(`<div class="video-thumbnail" tabindex="0" role="button" aria-label="${data.title}"></div>`);
let thumbnailImg = $(`<img src="${data.thumbnail}" alt="" style="width: 100%; height: 100%; object-fit: cover;">`);
let title = $(`<div class="video-title">${data.title}</div>`);
container.append(thumbnailImg).append(title);
let progressBarContainer = $(`<div class="progress-bar-container"><div class="progress-bar"></div></div>`);
container.append(thumbnailImg).append(title).append(progressBarContainer);
if (data.watchProgress > 0) {
progressBarContainer.find(".progress-bar").css("width", (data.watchProgress * 100) + "%");
}
let index;
if (append) {

View File

@ -56,6 +56,7 @@ type VideoModel struct {
Thumbnail string `json:"thumbnail"`
URL string `json:"url"`
Title string `json:"title"`
WatchProgress float64 `json:"watchProgress"`
}
type HomePageModel struct {
@ -66,13 +67,13 @@ type HomePageModel struct {
func (a *App) homePage(c *gin.Context) {
model := HomePageModel{}
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, &model.Current.Title)
errCurrent := a.db.Query("SELECT id, thumbnail, title, watch_progress 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, &model.Current.Title, &model.Current.WatchProgress)
var errNext, errPrevious error
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) {
for row := range a.db.Query("SELECT id, thumbnail, title, watch_progress 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, &video.Title)
err := row.Scan(&video.ID, &video.Thumbnail, &video.Title, &video.WatchProgress)
if err != nil {
log.Printf("Failed to scan next video: %v", err)
c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to retrieve next videos"})