From b3c906a16e5b6fc8a2bc426cce42dd06ea6de2a1 Mon Sep 17 00:00:00 2001 From: mkelvers Date: Wed, 13 May 2026 19:05:10 +0200 Subject: [PATCH] fix: centralize watchlist dropdown js and fix page load timing --- internal/playback/service/service.go | 3 + templates/base.gohtml | 71 +++++++++++++++++-- templates/components/watchlist_actions.gohtml | 65 +---------------- templates/watch.gohtml | 66 ----------------- 4 files changed, 71 insertions(+), 134 deletions(-) diff --git a/internal/playback/service/service.go b/internal/playback/service/service.go index 9913627..be847a6 100644 --- a/internal/playback/service/service.go +++ b/internal/playback/service/service.go @@ -188,6 +188,7 @@ func (s *playbackService) BuildWatchData(ctx context.Context, animeID int, title // 3. Get start time from progress startTime := 0.0 var watchlistStatus string + var watchlistIDs []int64 if userID != "" { entry, err := s.repo.GetWatchListEntry(ctx, db.GetWatchListEntryParams{ UserID: userID, @@ -195,6 +196,7 @@ func (s *playbackService) BuildWatchData(ctx context.Context, animeID int, title }) if err == nil { watchlistStatus = entry.Status + watchlistIDs = []int64{entry.AnimeID} if entry.CurrentEpisode.Valid && strconv.FormatInt(entry.CurrentEpisode.Int64, 10) == episode { startTime = entry.CurrentTimeSeconds } @@ -318,6 +320,7 @@ func (s *playbackService) BuildWatchData(ctx context.Context, animeID int, title "Episodes": domainEpisodes, "CurrentEpID": episode, "WatchlistStatus": watchlistStatus, + "WatchlistIDs": watchlistIDs, "Seasons": seasons, }, nil } diff --git a/templates/base.gohtml b/templates/base.gohtml index 9c1c869..b80cb9c 100644 --- a/templates/base.gohtml +++ b/templates/base.gohtml @@ -109,7 +109,20 @@ const watchlistIds = new Set() function initWatchlist(ids) { - ids.forEach(id => watchlistIds.add(id)) + ids.forEach(id => watchlistIds.add(id)); + const sync = () => ids.forEach(id => syncRemoveButtonVisibility(id)); + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', sync); + } else { + sync(); + } + } + + function syncRemoveButtonVisibility(id) { + const container = document.getElementById('remove-watchlist-container-' + id); + if (container) { + container.classList.toggle('hidden', !watchlistIds.has(id)); + } } function toggleWatchlist(id, btn) { @@ -169,10 +182,7 @@ if (window.showToast) showToast({ message: 'Something went wrong' }) const statusDisplay = document.getElementById('watchlist-status-display-' + id) if (statusDisplay) { statusDisplay.textContent = inWatchlist ? 'Plan to Watch' : 'Add to Watchlist' - const removeContainer = document.getElementById('remove-watchlist-container-' + id) - if (removeContainer) { - removeContainer.classList.toggle('hidden', !inWatchlist) - } + syncRemoveButtonVisibility(id) } } @@ -186,6 +196,57 @@ if (window.showToast) showToast({ message: 'Something went wrong' }) } }) } + + function updateWatchlist(id, status, display, btn) { + fetch('/api/watchlist', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ animeId: id, status: status }) + }).then(res => { + if (res.ok) { + watchlistIds.add(id); + document.getElementById('watchlist-status-display-' + id).textContent = display; + syncRemoveButtonVisibility(id); + document.querySelectorAll('.watchlist-icon').forEach(function(icon) { + const button = icon.closest('button'); + if (button) { + const malId = button.dataset.malId; + if (malId && parseInt(malId) === id) { + button.classList.add('in-watchlist'); + } + } + }); + requestAnimationFrame(() => { + const dropdown = btn.closest('ui-dropdown'); + if (dropdown) dropdown.close(); + }); + } + }); + } + + function removeWatchlist(id, btn) { + fetch('/api/watchlist/' + id, { method: 'DELETE' }).then(res => { + if (res.ok) { + watchlistIds.delete(id); + document.getElementById('watchlist-status-display-' + id).textContent = 'Add to Watchlist'; + syncRemoveButtonVisibility(id); + if (window.showToast) showToast({ message: 'Removed from watchlist' }); + document.querySelectorAll('.watchlist-icon').forEach(function(icon) { + const button = icon.closest('button'); + if (button) { + const malId = button.dataset.malId; + if (malId && parseInt(malId) === id) { + button.classList.remove('in-watchlist'); + } + } + }); + if (btn) { + const dropdown = btn.closest('ui-dropdown'); + if (dropdown) dropdown.close(); + } + } + }); + } diff --git a/templates/components/watchlist_actions.gohtml b/templates/components/watchlist_actions.gohtml index b725ba1..81274f7 100644 --- a/templates/components/watchlist_actions.gohtml +++ b/templates/components/watchlist_actions.gohtml @@ -38,7 +38,7 @@
-
@@ -50,65 +50,4 @@ {{if and .ContinueWatchingEp (ne .ContinueWatchingEp 1)}}Continue Episode {{.ContinueWatchingEp}}{{else}}Watch Now{{end}} - - -{{end}} +{{end}} \ No newline at end of file diff --git a/templates/watch.gohtml b/templates/watch.gohtml index d0294c1..7a5e54d 100644 --- a/templates/watch.gohtml +++ b/templates/watch.gohtml @@ -164,72 +164,6 @@ {{end}} {{end}} - {{end}}