mkelvers/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: clean up completion flow and watch page dropdown

Browse Source
This commit is contained in:
mkelvers
2026-05-13 18:44:08 +02:00
parent efbce87d5c
commit 950e143faf
2 changed files with 14 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
static/player/episodes/complete.ts
View File

@@ -1,11 +1,5 @@
import DOMPurify from 'dompurify';
import { state } from '../state';
/**
* Marks anime as completed when final episode finishes.
* Calls completion API, updates dropdown UI, adds to watchlist.
* Retries up to 2 times on failure.
*/
export const completeAnime = async (episodeNumber: number): Promise<void> => {
if (state.completionSent || !state.malID || !episodeNumber) return;
state.completionSent = true;
@@ -20,7 +14,6 @@ export const completeAnime = async (episodeNumber: number): Promise<void> => {
if (!res.ok) {
state.completionSent = false;
// retry
if (state.completionAttempts < 2) {
state.completionAttempts++;
setTimeout(() => completeAnime(episodeNumber), 1000);
@@ -28,7 +21,6 @@ export const completeAnime = async (episodeNumber: number): Promise<void> => {
return;
}
// update dropdown trigger text
const trigger = document.querySelector('[data-dropdown-trigger]') as HTMLButtonElement | null;
if (trigger) {
trigger.textContent = 'Completed ';
@@ -37,37 +29,6 @@ export const completeAnime = async (episodeNumber: number): Promise<void> => {
caret.textContent = '▾';
trigger.appendChild(caret);
}
// add to watchlist with 'completed' status
const dropdown = document.getElementById('watch-status-dropdown');
if (dropdown) {
const payload = {
anime_id: String(state.malID),
anime_title: state.container.dataset.animeTitle ?? '',
anime_title_english: state.container.dataset.animeTitleEnglish ?? '',
anime_title_japanese: state.container.dataset.animeTitleJapanese ?? '',
anime_image: state.container.dataset.animeImage ?? '',
status: 'completed',
airing: state.container.dataset.animeAiring === 'true',
};
fetch('/api/watchlist', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'HX-Request': 'true' },
body: `anime_id=${encodeURIComponent(payload.anime_id)}&anime_title=${encodeURIComponent(payload.anime_title)}&anime_title_english=${encodeURIComponent(payload.anime_title_english)}&anime_title_japanese=${encodeURIComponent(payload.anime_title_japanese)}&anime_image=${encodeURIComponent(payload.anime_image)}&status=${encodeURIComponent(payload.status)}&airing=${encodeURIComponent(String(payload.airing))}`,
credentials: 'same-origin',
})
.then(async res => {
if (!res.ok) return;
// replace dropdown with HTMX response
const html = await res.text();
const wrapper = document.createElement('span');
wrapper.id = 'watch-status-dropdown';
wrapper.innerHTML = DOMPurify.sanitize(html);
dropdown.replaceWith(wrapper);
})
.catch(() => {});
}
} catch {
state.completionSent = false;
if (state.completionAttempts < 2) {

37
templates/watch.gohtml
View File

@@ -24,7 +24,6 @@
</button>
</div>
<div data-content class="hidden absolute z-50 min-w-40 bg-background-button shadow-2xl right-0 top-full mt-2">
{{if .WatchlistStatus}}
<div class="flex flex-col py-1">
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'watching', 'Watching', this)">
<span class="text-sm text-foreground">Watching</span>
@@ -38,27 +37,13 @@
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'dropped', 'Dropped', this)">
<span class="text-sm text-foreground">Dropped</span>
</button>
<div class="border-t border-border my-1"></div>
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-red-500/10" onclick="removeWatchlist({{$anime.MalID}}, this)">
<span class="text-sm text-red-400 whitespace-nowrap">Remove from Watchlist</span>
</button>
<div id="remove-watchlist-container-{{$anime.MalID}}" class="hidden">
<div class="border-t border-border my-1"></div>
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-red-500/10" onclick="removeWatchlist({{$anime.MalID}}, this)">
<span class="text-sm text-red-400 whitespace-nowrap">Remove from Watchlist</span>
</button>
</div>
</div>
{{else}}
<div class="flex flex-col py-1">
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'watching', 'Watching', this)">
<span class="text-sm text-foreground">Watching</span>
</button>
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'completed', 'Completed', this)">
<span class="text-sm text-foreground">Completed</span>
</button>
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'plan_to_watch', 'Plan to Watch', this)">
<span class="text-sm text-foreground">Plan to Watch</span>
</button>
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'dropped', 'Dropped', this)">
<span class="text-sm text-foreground">Dropped</span>
</button>
</div>
{{end}}
</div>
</ui-dropdown>
</div>
@@ -180,6 +165,12 @@
{{end}}
<script>
document.addEventListener('DOMContentLoaded', function() {
if (watchlistIds.has({{$anime.MalID}})) {
document.getElementById('remove-watchlist-container-{{$anime.MalID}}').classList.remove('hidden');
}
});
function updateWatchlist(id, status, display, btn) {
fetch('/api/watchlist', {
method: 'POST',
@@ -189,6 +180,7 @@
if (res.ok) {
watchlistIds.add(id);
document.getElementById('watchlist-status-display-' + id).textContent = display;
document.getElementById('remove-watchlist-container-' + id).classList.remove('hidden');
// Update all watchlist icons on the page
document.querySelectorAll('.watchlist-icon').forEach(function(icon) {
@@ -215,6 +207,7 @@
if (res.ok) {
watchlistIds.delete(id);
document.getElementById('watchlist-status-display-' + id).textContent = 'Add to Watchlist';
document.getElementById('remove-watchlist-container-' + id).classList.add('hidden');
if (window.showToast) showToast({ message: 'Removed from watchlist' });
// Update all watchlist icons on the page
@@ -236,8 +229,6 @@
}
});
}
</script>
</div>
</div>