feat: add prettier and eslint with pre-commit hook
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
import DOMPurify from 'dompurify'
|
||||
import { state } from '../state'
|
||||
import DOMPurify from 'dompurify';
|
||||
import { state } from '../state';
|
||||
|
||||
export const completeAnime = async (episodeNumber: number): Promise<void> => {
|
||||
if (state.completionSent || !state.malID || !episodeNumber) return
|
||||
state.completionSent = true
|
||||
if (state.completionSent || !state.malID || !episodeNumber) return;
|
||||
state.completionSent = true;
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/watch-complete', {
|
||||
@@ -11,27 +11,27 @@ export const completeAnime = async (episodeNumber: number): Promise<void> => {
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
keepalive: true,
|
||||
body: JSON.stringify({ mal_id: state.malID, episode: episodeNumber }),
|
||||
})
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
state.completionSent = false
|
||||
state.completionSent = false;
|
||||
if (state.completionAttempts < 2) {
|
||||
state.completionAttempts++
|
||||
setTimeout(() => completeAnime(episodeNumber), 1000)
|
||||
state.completionAttempts++;
|
||||
setTimeout(() => completeAnime(episodeNumber), 1000);
|
||||
}
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
const trigger = document.querySelector('[data-dropdown-trigger]') as HTMLButtonElement | null
|
||||
const trigger = document.querySelector('[data-dropdown-trigger]') as HTMLButtonElement | null;
|
||||
if (trigger) {
|
||||
trigger.textContent = 'Completed '
|
||||
const caret = document.createElement('span')
|
||||
caret.className = 'text-xs'
|
||||
caret.textContent = '▾'
|
||||
trigger.appendChild(caret)
|
||||
trigger.textContent = 'Completed ';
|
||||
const caret = document.createElement('span');
|
||||
caret.className = 'text-xs';
|
||||
caret.textContent = '▾';
|
||||
trigger.appendChild(caret);
|
||||
}
|
||||
|
||||
const dropdown = document.getElementById('watch-status-dropdown')
|
||||
const dropdown = document.getElementById('watch-status-dropdown');
|
||||
if (dropdown) {
|
||||
const payload = {
|
||||
anime_id: String(state.malID),
|
||||
@@ -41,27 +41,29 @@ export const completeAnime = async (episodeNumber: number): Promise<void> => {
|
||||
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
|
||||
const html = await res.text()
|
||||
const wrapper = document.createElement('span')
|
||||
wrapper.id = 'watch-status-dropdown'
|
||||
wrapper.innerHTML = DOMPurify.sanitize(html)
|
||||
dropdown.replaceWith(wrapper)
|
||||
}).catch(() => {})
|
||||
})
|
||||
.then(async res => {
|
||||
if (!res.ok) return;
|
||||
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
|
||||
state.completionSent = false;
|
||||
if (state.completionAttempts < 2) {
|
||||
state.completionAttempts++
|
||||
setTimeout(() => completeAnime(episodeNumber), 1000)
|
||||
state.completionAttempts++;
|
||||
setTimeout(() => completeAnime(episodeNumber), 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,95 +1,97 @@
|
||||
import { state } from '../state'
|
||||
import { SkipSegment } from '../types'
|
||||
import { displayTimeFromAbsolute } from '../timeline'
|
||||
import { resolveActiveSegments, renderSegments } from '../skip/segments'
|
||||
import { updateSubtitleOptions } from '../subtitles'
|
||||
import { updateQualityOptions } from '../quality'
|
||||
import { updateModeButtons } from '../mode'
|
||||
import { updateOverlay, isAutoplayEnabled, updateEpisodeHighlight, switchEpisodeRange } from './ui'
|
||||
import { markEpisodeTransition } from '../progress'
|
||||
import { state } from '../state';
|
||||
import { SkipSegment } from '../types';
|
||||
import { displayTimeFromAbsolute } from '../timeline';
|
||||
import { resolveActiveSegments, renderSegments } from '../skip/segments';
|
||||
import { updateSubtitleOptions } from '../subtitles';
|
||||
import { updateQualityOptions } from '../quality';
|
||||
import { updateModeButtons } from '../mode';
|
||||
import { updateOverlay, isAutoplayEnabled, updateEpisodeHighlight, switchEpisodeRange } from './ui';
|
||||
import { markEpisodeTransition } from '../progress';
|
||||
|
||||
export const goToNextEpisode = async (): Promise<void> => {
|
||||
const currentEp = Number.parseInt(state.currentEpisode, 10)
|
||||
if (!currentEp) return
|
||||
const currentEp = Number.parseInt(state.currentEpisode, 10);
|
||||
if (!currentEp) return;
|
||||
|
||||
if (state.totalEpisodes > 0 && currentEp >= state.totalEpisodes) {
|
||||
import('./complete').then(m => m.completeAnime(currentEp))
|
||||
return
|
||||
import('./complete').then(m => m.completeAnime(currentEp));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isAutoplayEnabled()) return
|
||||
if (!isAutoplayEnabled()) return;
|
||||
|
||||
const nextEp = currentEp + 1
|
||||
markEpisodeTransition(nextEp)
|
||||
const nextEp = currentEp + 1;
|
||||
markEpisodeTransition(nextEp);
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/watch/episode/${state.malID}/${nextEp}`)
|
||||
const res = await fetch(`/api/watch/episode/${state.malID}/${nextEp}`);
|
||||
if (!res.ok) {
|
||||
sessionStorage.setItem('mal:autoplay-next', 'true')
|
||||
const url = new URL(window.location.href)
|
||||
url.searchParams.set('ep', String(nextEp))
|
||||
window.location.href = url.toString()
|
||||
return
|
||||
sessionStorage.setItem('mal:autoplay-next', 'true');
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.set('ep', String(nextEp));
|
||||
window.location.href = url.toString();
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await res.json()
|
||||
const data = await res.json();
|
||||
|
||||
state.modeSources = data.mode_sources ?? {}
|
||||
state.availableModes = data.available_modes ?? []
|
||||
state.modeSources = data.mode_sources ?? {};
|
||||
state.availableModes = data.available_modes ?? [];
|
||||
|
||||
const fallback = state.availableModes.find(m => state.modeSources[m]?.token)
|
||||
const fallback = state.availableModes.find(m => state.modeSources[m]?.token);
|
||||
if (!fallback) {
|
||||
sessionStorage.setItem('mal:autoplay-next', 'true')
|
||||
const url = new URL(window.location.href)
|
||||
url.searchParams.set('ep', String(nextEp))
|
||||
window.location.href = url.toString()
|
||||
return
|
||||
sessionStorage.setItem('mal:autoplay-next', 'true');
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.set('ep', String(nextEp));
|
||||
window.location.href = url.toString();
|
||||
return;
|
||||
}
|
||||
|
||||
state.video.src = `${state.streamURL}?mode=${encodeURIComponent(fallback)}&token=${encodeURIComponent(state.modeSources[fallback].token)}`
|
||||
state.video.load()
|
||||
if (!state.video.paused) state.video.play().catch(() => {})
|
||||
state.video.src = `${state.streamURL}?mode=${encodeURIComponent(fallback)}&token=${encodeURIComponent(state.modeSources[fallback].token)}`;
|
||||
state.video.load();
|
||||
if (!state.video.paused) state.video.play().catch(() => {});
|
||||
|
||||
state.currentEpisode = String(nextEp)
|
||||
state.pendingSeekTime = null
|
||||
state.completionSent = false
|
||||
state.completionAttempts = 0
|
||||
state.activeSubtitles = []
|
||||
state.currentEpisode = String(nextEp);
|
||||
state.pendingSeekTime = null;
|
||||
state.completionSent = false;
|
||||
state.completionAttempts = 0;
|
||||
state.activeSubtitles = [];
|
||||
|
||||
updateSubtitleOptions()
|
||||
updateQualityOptions()
|
||||
updateModeButtons()
|
||||
updateOverlay(state.currentEpisode, data.episode_title ?? '')
|
||||
updateSubtitleOptions();
|
||||
updateQualityOptions();
|
||||
updateModeButtons();
|
||||
updateOverlay(state.currentEpisode, data.episode_title ?? '');
|
||||
|
||||
if (data.segments?.length) {
|
||||
state.parsedSegments = data.segments
|
||||
.map((s: SkipSegment) => ({ ...s, start: Number(s.start) || 0, end: Number(s.end) || 0 }))
|
||||
.filter((s: SkipSegment) => s.end > s.start)
|
||||
resolveActiveSegments()
|
||||
renderSegments()
|
||||
.filter((s: SkipSegment) => s.end > s.start);
|
||||
resolveActiveSegments();
|
||||
renderSegments();
|
||||
}
|
||||
|
||||
state.episodeList?.querySelectorAll('[data-episode-id]').forEach(el => el.classList.remove('bg-accent/20'))
|
||||
const newListEl = state.episodeList?.querySelector(`[data-episode-id="${nextEp}"]`)
|
||||
newListEl?.classList.add('bg-accent/20')
|
||||
state.episodeList
|
||||
?.querySelectorAll('[data-episode-id]')
|
||||
.forEach(el => el.classList.remove('bg-accent/20'));
|
||||
const newListEl = state.episodeList?.querySelector(`[data-episode-id="${nextEp}"]`);
|
||||
newListEl?.classList.add('bg-accent/20');
|
||||
|
||||
if (state.episodeGrid) {
|
||||
state.episodeGrid.querySelectorAll('[data-episode-id]').forEach(el => {
|
||||
el.classList.remove('bg-accent/20', 'ring-2', 'ring-accent', 'text-accent')
|
||||
})
|
||||
switchEpisodeRange(Math.floor((nextEp - 1) / 100))
|
||||
const newGridEl = state.episodeGrid.querySelector(`[data-episode-id="${nextEp}"]`)
|
||||
newGridEl?.classList.add('bg-accent/20', 'ring-2', 'ring-accent', 'text-accent')
|
||||
el.classList.remove('bg-accent/20', 'ring-2', 'ring-accent', 'text-accent');
|
||||
});
|
||||
switchEpisodeRange(Math.floor((nextEp - 1) / 100));
|
||||
const newGridEl = state.episodeGrid.querySelector(`[data-episode-id="${nextEp}"]`);
|
||||
newGridEl?.classList.add('bg-accent/20', 'ring-2', 'ring-accent', 'text-accent');
|
||||
}
|
||||
|
||||
const url = new URL(window.location.href)
|
||||
url.searchParams.set('ep', String(nextEp))
|
||||
history.pushState(null, '', url.toString())
|
||||
state.transitionEpisode = null
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.set('ep', String(nextEp));
|
||||
history.pushState(null, '', url.toString());
|
||||
state.transitionEpisode = null;
|
||||
} catch {
|
||||
sessionStorage.setItem('mal:autoplay-next', 'true')
|
||||
const url = new URL(window.location.href)
|
||||
url.searchParams.set('ep', String(nextEp))
|
||||
window.location.href = url.toString()
|
||||
sessionStorage.setItem('mal:autoplay-next', 'true');
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.set('ep', String(nextEp));
|
||||
window.location.href = url.toString();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,35 +1,38 @@
|
||||
import { state } from '../state'
|
||||
import { state } from '../state';
|
||||
|
||||
export const setupThumbnails = (): void => {
|
||||
fetch(`/api/watch/thumbnails/${state.malID}`)
|
||||
.then(res => res.json())
|
||||
.then((data: Array<{ mal_id: number; url: string; title?: string }>) => {
|
||||
if (!state.episodeList) return
|
||||
if (!state.episodeList) return;
|
||||
data.forEach(item => {
|
||||
const card = state.episodeList.querySelector(`[data-episode-id="${item.mal_id}"]`)
|
||||
if (!card) return
|
||||
const card = state.episodeList.querySelector(`[data-episode-id="${item.mal_id}"]`);
|
||||
if (!card) return;
|
||||
|
||||
if (item.url) {
|
||||
const imgContainer = card.querySelector('.relative.aspect-video')
|
||||
const imgContainer = card.querySelector('.relative.aspect-video');
|
||||
if (imgContainer) {
|
||||
let img = imgContainer.querySelector('img')
|
||||
let img = imgContainer.querySelector('img');
|
||||
if (!img) {
|
||||
img = document.createElement('img')
|
||||
img.className = 'h-full w-full object-cover transition-transform group-hover:scale-105'
|
||||
img.loading = 'lazy'
|
||||
imgContainer.querySelector('.flex.h-full.w-full.items-center.justify-center')?.remove()
|
||||
imgContainer.prepend(img)
|
||||
img = document.createElement('img');
|
||||
img.className =
|
||||
'h-full w-full object-cover transition-transform group-hover:scale-105';
|
||||
img.loading = 'lazy';
|
||||
imgContainer
|
||||
.querySelector('.flex.h-full.w-full.items-center.justify-center')
|
||||
?.remove();
|
||||
imgContainer.prepend(img);
|
||||
}
|
||||
img.src = item.url
|
||||
img.alt = item.title ?? `Episode ${item.mal_id}`
|
||||
img.src = item.url;
|
||||
img.alt = item.title ?? `Episode ${item.mal_id}`;
|
||||
}
|
||||
}
|
||||
|
||||
if (item.title) {
|
||||
const titleEl = card.querySelector('[data-episode-title]')
|
||||
if (titleEl) titleEl.textContent = item.title
|
||||
const titleEl = card.querySelector('[data-episode-title]');
|
||||
if (titleEl) titleEl.textContent = item.title;
|
||||
}
|
||||
})
|
||||
});
|
||||
})
|
||||
.catch(err => console.error('Failed to fetch thumbnails:', err))
|
||||
}
|
||||
.catch(err => console.error('Failed to fetch thumbnails:', err));
|
||||
};
|
||||
|
||||
@@ -1,57 +1,61 @@
|
||||
import { state } from '../state'
|
||||
import { updateSubtitleOptions } from '../subtitles'
|
||||
import { updateQualityOptions } from '../quality'
|
||||
import { updateModeButtons } from '../mode'
|
||||
import { state } from '../state';
|
||||
import { updateSubtitleOptions } from '../subtitles';
|
||||
import { updateQualityOptions } from '../quality';
|
||||
import { updateModeButtons } from '../mode';
|
||||
|
||||
export const setupAutoplayButton = (): void => {
|
||||
const btn = document.querySelector('[data-autoplay]') as HTMLInputElement | null
|
||||
if (!btn) return
|
||||
btn.checked = localStorage.getItem('mal:autoplay-enabled') !== 'false'
|
||||
}
|
||||
const btn = document.querySelector('[data-autoplay]') as HTMLInputElement | null;
|
||||
if (!btn) return;
|
||||
btn.checked = localStorage.getItem('mal:autoplay-enabled') !== 'false';
|
||||
};
|
||||
|
||||
export const isAutoplayEnabled = (): boolean => localStorage.getItem('mal:autoplay-enabled') !== 'false'
|
||||
export const isAutoplayEnabled = (): boolean =>
|
||||
localStorage.getItem('mal:autoplay-enabled') !== 'false';
|
||||
|
||||
export const updateOverlay = (episode: string, title: string): void => {
|
||||
if (!state.videoOverlay) return
|
||||
const p = state.videoOverlay.querySelector('p')
|
||||
p && (p.textContent = title ? `Episode ${episode}, ${title}` : `Episode ${episode}`)
|
||||
}
|
||||
if (!state.videoOverlay) return;
|
||||
const p = state.videoOverlay.querySelector('p');
|
||||
p && (p.textContent = title ? `Episode ${episode}, ${title}` : `Episode ${episode}`);
|
||||
};
|
||||
|
||||
const getEpisodeEls = () => {
|
||||
const grid = state.episodeGrid
|
||||
const list = state.episodeList
|
||||
const grid = state.episodeGrid;
|
||||
const list = state.episodeList;
|
||||
return {
|
||||
gridEls: grid ? Array.from(grid.querySelectorAll('[data-episode-id]')) : [],
|
||||
listEls: list ? Array.from(list.querySelectorAll('[data-episode-id]')) : [],
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
export const updateEpisodeHighlight = (num: number): void => {
|
||||
const { gridEls, listEls } = getEpisodeEls()
|
||||
;[...gridEls, ...listEls].forEach(el => el.classList.remove('ring-2', 'ring-accent', 'bg-accent/20', 'text-accent'))
|
||||
const { gridEls, listEls } = getEpisodeEls();
|
||||
[...gridEls, ...listEls].forEach(el =>
|
||||
el.classList.remove('ring-2', 'ring-accent', 'bg-accent/20', 'text-accent')
|
||||
);
|
||||
|
||||
const gridEl = state.episodeGrid?.querySelector(`[data-episode-id="${num}"]`)
|
||||
const listEl = state.episodeList?.querySelector(`[data-episode-id="${num}"]`)
|
||||
gridEl?.classList.add('ring-2', 'ring-accent')
|
||||
listEl?.classList.add('ring-2', 'ring-accent')
|
||||
;(gridEl ?? listEl)?.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||||
}
|
||||
const gridEl = state.episodeGrid?.querySelector(`[data-episode-id="${num}"]`);
|
||||
const listEl = state.episodeList?.querySelector(`[data-episode-id="${num}"]`);
|
||||
gridEl?.classList.add('ring-2', 'ring-accent');
|
||||
listEl?.classList.add('ring-2', 'ring-accent');
|
||||
(gridEl ?? listEl)?.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
};
|
||||
|
||||
export const switchEpisodeRange = (idx: number): void => {
|
||||
const dropdown = state.container.querySelector('[data-episode-dropdown]') as HTMLElement | null
|
||||
if (!dropdown) return
|
||||
const btns = Array.from(dropdown.querySelectorAll('.episode-range-btn')) as HTMLButtonElement[]
|
||||
const target = btns[idx]
|
||||
if (!target) return
|
||||
const dropdown = state.container.querySelector('[data-episode-dropdown]') as HTMLElement | null;
|
||||
if (!dropdown) return;
|
||||
const btns = Array.from(dropdown.querySelectorAll('.episode-range-btn')) as HTMLButtonElement[];
|
||||
const target = btns[idx];
|
||||
if (!target) return;
|
||||
|
||||
const start = Number.parseInt(target.dataset.rangeStart ?? '1', 10)
|
||||
const end = Number.parseInt(target.dataset.rangeEnd ?? '100', 10)
|
||||
const start = Number.parseInt(target.dataset.rangeStart ?? '1', 10);
|
||||
const end = Number.parseInt(target.dataset.rangeEnd ?? '100', 10);
|
||||
|
||||
const label = dropdown.querySelector('[data-dropdown-label]') as HTMLElement | null
|
||||
if (label) label.textContent = `${String(start).padStart(2, '0')}-${String(end).padStart(2, '0')}`
|
||||
const label = dropdown.querySelector('[data-dropdown-label]') as HTMLElement | null;
|
||||
if (label)
|
||||
label.textContent = `${String(start).padStart(2, '0')}-${String(end).padStart(2, '0')}`;
|
||||
|
||||
state.episodeGrid?.querySelectorAll('[data-episode-id]').forEach(el => {
|
||||
const n = Number.parseInt((el as HTMLElement).dataset.episodeId ?? '0', 10)
|
||||
el.classList.toggle('hidden', n < start || n > end)
|
||||
})
|
||||
}
|
||||
const n = Number.parseInt((el as HTMLElement).dataset.episodeId ?? '0', 10);
|
||||
el.classList.toggle('hidden', n < start || n > end);
|
||||
});
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user