anilist integrated to my list

This commit is contained in:
2025-12-06 17:18:03 +01:00
parent e5ec8aa7e5
commit 822a9f83cf
13 changed files with 774 additions and 257 deletions

View File

@@ -15,7 +15,6 @@ tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Auth helpers
function getAuthToken() {
return localStorage.getItem('token');
}
@@ -28,32 +27,46 @@ function getAuthHeaders() {
};
}
// Check if anime is in list
function getSimpleAuthHeaders() {
const token = getAuthToken();
return {
'Authorization': `Bearer ${token}`
};
}
async function checkIfInList() {
const entryId = window.location.pathname.split('/').pop();
const source = extensionName || 'anilist';
const entryType = 'ANIME';
const fetchUrl = `${API_BASE}/list/entry/${entryId}?source=${source}&entry_type=${entryType}`;
try {
const response = await fetch(`${API_BASE}/list`, {
headers: getAuthHeaders()
const response = await fetch(fetchUrl, {
headers: getSimpleAuthHeaders()
});
if (response.ok) {
const data = await response.json();
const entry = data.results?.find(item =>
item.entry_id === parseInt(animeId) &&
item.source === (extensionName || 'anilist')
);
if (entry) {
if (data.found && data.entry) {
isInList = true;
currentListEntry = entry;
updateAddToListButton();
currentListEntry = data.entry;
} else {
isInList = false;
currentListEntry = null;
}
updateAddToListButton();
}
} catch (error) {
console.error('Error checking list:', error);
console.error('Error checking single list entry:', error);
}
}
// Update button state
function updateAddToListButton() {
const btn = document.getElementById('add-to-list-btn');
if (isInList) {
@@ -68,13 +81,15 @@ function updateAddToListButton() {
btn.style.borderColor = 'rgba(34, 197, 94, 0.3)';
} else {
btn.innerHTML = '+ Add to List';
btn.style.background = null;
btn.style.color = null;
btn.style.borderColor = null;
}
}
// Open add to list modal
function openAddToListModal() {
if (isInList) {
// If already in list, open edit modal with current data
document.getElementById('modal-status').value = currentListEntry.status || 'PLANNING';
document.getElementById('modal-progress').value = currentListEntry.progress || 0;
document.getElementById('modal-score').value = currentListEntry.score || '';
@@ -82,7 +97,7 @@ function openAddToListModal() {
document.getElementById('modal-title').textContent = 'Edit List Entry';
document.getElementById('modal-delete-btn').style.display = 'block';
} else {
// New entry defaults
document.getElementById('modal-status').value = 'PLANNING';
document.getElementById('modal-progress').value = 0;
document.getElementById('modal-score').value = '';
@@ -94,12 +109,10 @@ function openAddToListModal() {
document.getElementById('modal-progress').max = totalEpisodes || 999;
document.getElementById('add-list-modal').classList.add('active');}
// Close modal
function closeAddToListModal() {
document.getElementById('add-list-modal').classList.remove('active');
}
// Save to list
async function saveToList() {
const status = document.getElementById('modal-status').value;
const progress = parseInt(document.getElementById('modal-progress').value) || 0;
@@ -123,12 +136,12 @@ async function saveToList() {
throw new Error('Failed to save entry');
}
// Si la operación fue exitosa, actualizamos currentListEntry con el nuevo campo type
isInList = true;
currentListEntry = {
entry_id: parseInt(animeId),
source: extensionName || 'anilist',
entry_type: 'ANIME', // <--- También se actualiza aquí
entry_type: 'ANIME',
status,
progress,
score
@@ -142,14 +155,14 @@ async function saveToList() {
}
}
// Delete from list
async function deleteFromList() {
if (!confirm('Remove this anime from your list?')) return;
try {
const response = await fetch(`${API_BASE}/list/entry/${animeId}`, {
method: 'DELETE',
headers: getAuthHeaders()
headers: getSimpleAuthHeaders()
});
if (!response.ok) {
@@ -167,7 +180,6 @@ async function deleteFromList() {
}
}
// Show notification
function showNotification(message, type = 'info') {
const notification = document.createElement('div');
notification.style.cssText = `
@@ -208,7 +220,7 @@ async function loadAnime() {
const fetchUrl = extensionName
? `/api/anime/${animeId}?source=${extensionName}`
: `/api/anime/${animeId}?source=anilist`;
const res = await fetch(fetchUrl);
const res = await fetch(fetchUrl, { headers: getSimpleAuthHeaders() });
const data = await res.json();
if (data.error) {
@@ -362,7 +374,6 @@ async function loadAnime() {
renderEpisodes();
// Check if in list after loading anime data
await checkIfInList();
} catch (err) {
@@ -458,7 +469,6 @@ searchInput.addEventListener('input', (e) => {
}
});
// Close modal on outside click
document.addEventListener('DOMContentLoaded', () => {
const modal = document.getElementById('add-list-modal');
if (modal) {
@@ -470,7 +480,6 @@ document.addEventListener('DOMContentLoaded', () => {
}
});
// Add animations
const style = document.createElement('style');
style.textContent = `
@keyframes slideInRight {

View File

@@ -6,7 +6,6 @@ const itemsPerPage = 12;
let extensionName = null;
let bookSlug = null;
// NUEVAS VARIABLES GLOBALES PARA LISTA
let currentBookData = null;
let isInList = false;
let currentListEntry = null;
@@ -21,11 +20,6 @@ function getChaptersUrl(id, source = 'anilist') {
return `/api/book/${id}/chapters?source=${source}`;
}
// ==========================================================
// 1. FUNCIONES DE AUTENTICACIÓN Y LISTA
// ==========================================================
// Auth helpers
function getAuthToken() {
return localStorage.getItem('token');
}
@@ -38,34 +32,53 @@ function getAuthHeaders() {
};
}
// Check if book is in list
function getSimpleAuthHeaders() {
const token = getAuthToken();
return {
'Authorization': `Bearer ${token}`
};
}
function getBookEntryType(bookData) {
if (!bookData) return 'MANGA';
const format = bookData.format?.toUpperCase() || 'MANGA';
return (format === 'MANGA' || format === 'ONE_SHOT' || format === 'MANHWA') ? 'MANGA' : 'NOVEL';
}
async function checkIfInList() {
if (!currentBookData) return;
const entryId = extensionName ? bookSlug : bookId;
const source = extensionName || 'anilist';
const entryType = getBookEntryType(currentBookData);
const fetchUrl = `${API_BASE}/list/entry/${entryId}?source=${source}&entry_type=${entryType}`;
try {
const response = await fetch(`${API_BASE}/list`, {
headers: getAuthHeaders()
const response = await fetch(fetchUrl, {
headers: getSimpleAuthHeaders()
});
if (response.ok) {
const data = await response.json();
const idToSearch = extensionName ? bookSlug : bookId;
const entry = data.results?.find(item =>
item.entry_id === idToSearch &&
item.source === (extensionName || 'anilist')
);
if (data.found && data.entry) {
if (entry) {
isInList = true;
currentListEntry = entry;
updateAddToListButton();
currentListEntry = data.entry;
} else {
isInList = false;
currentListEntry = null;
}
updateAddToListButton();
}
} catch (error) {
console.error('Error checking list:', error);
console.error('Error checking single list entry:', error);
}
}
// Update button state
function updateAddToListButton() {
const btn = document.getElementById('add-to-list-btn');
if (!btn) return;
@@ -83,22 +96,20 @@ function updateAddToListButton() {
btn.onclick = openAddToListModal;
} else {
btn.innerHTML = '+ Add to Library';
btn.style.background = null; // Restablecer estilos si no está en lista
btn.style.background = null;
btn.style.color = null;
btn.style.borderColor = null;
btn.onclick = openAddToListModal;
}
}
// Open add to list modal
function openAddToListModal() {
if (!currentBookData) return;
// Obtener el total de capítulos/volúmenes
const totalUnits = currentBookData.chapters || currentBookData.volumes || 999;
if (isInList) {
// If already in list, open edit modal with current data
document.getElementById('modal-status').value = currentListEntry.status || 'PLANNING';
document.getElementById('modal-progress').value = currentListEntry.progress || 0;
document.getElementById('modal-score').value = currentListEntry.score || '';
@@ -106,7 +117,7 @@ function openAddToListModal() {
document.getElementById('modal-title').textContent = 'Edit Library Entry';
document.getElementById('modal-delete-btn').style.display = 'block';
} else {
// New entry defaults
document.getElementById('modal-status').value = 'PLANNING';
document.getElementById('modal-progress').value = 0;
document.getElementById('modal-score').value = '';
@@ -115,7 +126,6 @@ function openAddToListModal() {
document.getElementById('modal-delete-btn').style.display = 'none';
}
// Ajustar etiqueta de progreso según el formato
const progressLabel = document.getElementById('modal-progress-label');
if (progressLabel) {
const format = currentBookData.format?.toUpperCase() || 'MANGA';
@@ -130,12 +140,10 @@ function openAddToListModal() {
document.getElementById('add-list-modal').classList.add('active');
}
// Close modal
function closeAddToListModal() {
document.getElementById('add-list-modal').classList.remove('active');
}
// Save to list
async function saveToList() {
const status = document.getElementById('modal-status').value;
const progress = parseInt(document.getElementById('modal-progress').value) || 0;
@@ -146,9 +154,7 @@ async function saveToList() {
return;
}
// Determinar el tipo de entrada (MANGA o NOVEL basado en el formato)
const format = currentBookData.format?.toUpperCase() || 'MANGA';
const entryType = (format === 'MANGA' || format === 'ONE_SHOT' || format === 'MANHWA') ? 'MANGA' : 'NOVEL';
const entryType = getBookEntryType(currentBookData);
const idToSave = extensionName ? bookSlug : bookId;
try {
@@ -180,7 +186,6 @@ async function saveToList() {
}
}
// Delete from list
async function deleteFromList() {
if (!confirm('Remove this book from your library?')) return;
@@ -189,7 +194,8 @@ async function deleteFromList() {
try {
const response = await fetch(`${API_BASE}/list/entry/${idToDelete}`, {
method: 'DELETE',
headers: getAuthHeaders()
headers: getSimpleAuthHeaders()
});
if (!response.ok) {
@@ -207,7 +213,6 @@ async function deleteFromList() {
}
}
// Show notification
function showNotification(message, type = 'info') {
const notification = document.createElement('div');
notification.style.cssText = `
@@ -232,11 +237,6 @@ function showNotification(message, type = 'info') {
}, 3000);
}
// ==========================================================
// 2. FUNCIÓN PRINCIPAL DE CARGA (init)
// ==========================================================
async function init() {
try {
const path = window.location.pathname;
@@ -260,7 +260,7 @@ async function init() {
extensionName || 'anilist'
);
const res = await fetch(fetchUrl);
const res = await fetch(fetchUrl, { headers: getSimpleAuthHeaders() });
const data = await res.json();
if (data.error || !data) {
@@ -269,7 +269,7 @@ async function init() {
return;
}
currentBookData = data; // <--- GUARDAR DATOS GLOBALES
currentBookData = data;
let title, description, score, year, status, format, chapters, poster, banner, genres;
@@ -350,18 +350,13 @@ async function init() {
loadChapters(idForFetch);
await checkIfInList(); // <--- COMPROBAR ESTADO DE LA LISTA
await checkIfInList();
} catch (err) {
console.error("Metadata Error:", err);
}
}
// ==========================================================
// 3. FUNCIONES DE CARGA Y RENDERIZADO DE CAPÍTULOS
// (Sin cambios, pero se incluyen para completar el script)
// ==========================================================
async function loadChapters(idForFetch) {
const tbody = document.getElementById('chapters-body');
if (!tbody) return;
@@ -375,7 +370,7 @@ async function loadChapters(idForFetch) {
extensionName || 'anilist'
);
const res = await fetch(fetchUrl);
const res = await fetch(fetchUrl, { headers: getSimpleAuthHeaders() });
const data = await res.json();
allChapters = data.chapters || [];
@@ -523,11 +518,6 @@ function openReader(bookId, chapterId, provider) {
window.location.href = `/read/${p}/${c}/${bookId}${extension}`;
}
// ==========================================================
// 4. LISTENERS Y ARRANQUE
// ==========================================================
// Close modal on outside click
document.addEventListener('DOMContentLoaded', () => {
const modal = document.getElementById('add-list-modal');
if (modal) {
@@ -539,7 +529,6 @@ document.addEventListener('DOMContentLoaded', () => {
}
});
// Add animations (Copied from anime.js)
const style = document.createElement('style');
style.textContent = `
@keyframes slideInRight {

View File

@@ -1,15 +1,12 @@
// API Configuration
const API_BASE = '/api';
let currentList = [];
let filteredList = [];
let currentEditingEntry = null;
// Get token from localStorage
function getAuthToken() {
return localStorage.getItem('token');
}
// Create headers with auth token
function getAuthHeaders() {
const token = getAuthToken();
return {
@@ -18,24 +15,39 @@ function getAuthHeaders() {
};
}
// Initialize on page load
function getSimpleAuthHeaders() {
const token = getAuthToken();
return {
'Authorization': `Bearer ${token}`
};
}
document.addEventListener('DOMContentLoaded', async () => {
await loadList();
setupEventListeners();
});
// ==========================================================
// FUNCIÓN: Poblar Filtro de Fuente (NUEVA LÓGICA)
// ==========================================================
function getEntryLink(item) {
const isAnime = item.entry_type?.toUpperCase() === 'ANIME';
const baseRoute = isAnime ? '/anime' : '/book';
const source = item.source || 'anilist';
if (source === 'anilist') {
return `${baseRoute}/${item.entry_id}`;
} else {
return `${baseRoute}/${source}/${item.entry_id}`;
}
}
async function populateSourceFilter() {
const select = document.getElementById('source-filter');
if (!select) return;
// Opciones base
select.innerHTML = `
<option value="all">All Sources</option>
<option value="anilist">AniList</option>
<option value="local">Local</option>
`;
try {
@@ -44,13 +56,10 @@ async function populateSourceFilter() {
const data = await response.json();
const extensions = data.extensions || [];
// Añadir cada nombre de extensión como una opción
extensions.forEach(extName => {
// Evitar duplicar 'anilist' o 'local'
if (extName.toLowerCase() !== 'anilist' && extName.toLowerCase() !== 'local') {
const option = document.createElement('option');
option.value = extName;
// Capitalizar el nombre
option.textContent = extName.charAt(0).toUpperCase() + extName.slice(1);
select.appendChild(option);
}
@@ -61,10 +70,8 @@ async function populateSourceFilter() {
}
}
// Setup all event listeners
function setupEventListeners() {
// View toggle
document.querySelectorAll('.view-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
@@ -79,13 +86,11 @@ function setupEventListeners() {
});
});
// Filters
document.getElementById('status-filter').addEventListener('change', applyFilters);
document.getElementById('source-filter').addEventListener('change', applyFilters);
document.getElementById('type-filter').addEventListener('change', applyFilters);
document.getElementById('sort-filter').addEventListener('change', applyFilters);
// Search
document.querySelector('.search-input').addEventListener('input', (e) => {
const query = e.target.value.toLowerCase();
if (query) {
@@ -99,13 +104,11 @@ function setupEventListeners() {
});
}
// Load list from API (MODIFICADO para incluir populateSourceFilter)
async function loadList() {
const loadingState = document.getElementById('loading-state');
const emptyState = document.getElementById('empty-state');
const container = document.getElementById('list-container');
// Ejecutar la carga de extensiones antes de la lista principal
await populateSourceFilter();
try {
@@ -114,7 +117,7 @@ async function loadList() {
container.innerHTML = '';
const response = await fetch(`${API_BASE}/list`, {
headers: getAuthHeaders()
headers: getSimpleAuthHeaders()
});
if (!response.ok) {
@@ -140,7 +143,6 @@ async function loadList() {
}
}
// Update statistics
function updateStats() {
const total = currentList.length;
const watching = currentList.filter(item => item.status === 'WATCHING').length;
@@ -153,14 +155,12 @@ function updateStats() {
document.getElementById('planned-count').textContent = planning;
}
// Apply filters and sorting
function applyFilters() {
const statusFilter = document.getElementById('status-filter').value;
const sourceFilter = document.getElementById('source-filter').value;
const typeFilter = document.getElementById('type-filter').value;
const sortFilter = document.getElementById('sort-filter').value;
// Filter
let filtered = [...filteredList];
if (statusFilter !== 'all') {
@@ -171,12 +171,10 @@ function applyFilters() {
filtered = filtered.filter(item => item.source === sourceFilter);
}
// Filtrado por tipo
if (typeFilter !== 'all') {
filtered = filtered.filter(item => (item.entry_type || 'ANIME') === typeFilter);
}
// Sort
switch (sortFilter) {
case 'title':
filtered.sort((a, b) => (a.title || '').localeCompare(b.title || ''));
@@ -196,7 +194,6 @@ function applyFilters() {
renderList(filtered);
}
// Render list items
function renderList(items) {
const container = document.getElementById('list-container');
container.innerHTML = '';
@@ -212,16 +209,15 @@ function renderList(items) {
});
}
// Create individual list item (ACTUALIZADO para MANGA/NOVEL)
function createListItem(item) {
const div = document.createElement('div');
div.className = 'list-item';
div.onclick = () => openEditModal(item);
const itemLink = getEntryLink(item);
const posterUrl = item.poster || '/public/assets/placeholder.png';
const progress = item.progress || 0;
// Determinar total de unidades basado en el tipo
const totalUnits = item.entry_type === 'ANIME' ?
item.total_episodes || 0 :
item.total_chapters || 0;
@@ -229,7 +225,6 @@ function createListItem(item) {
const progressPercent = totalUnits > 0 ? (progress / totalUnits) * 100 : 0;
const score = item.score ? item.score.toFixed(1) : null;
// Determinar la etiqueta de unidad (Episodes, Chapters, Volumes, etc.)
const entryType = (item.entry_type || 'ANIME').toUpperCase();
let unitLabel = 'units';
if (entryType === 'ANIME') {
@@ -240,7 +235,6 @@ function createListItem(item) {
unitLabel = 'chapters/volumes';
}
// Ajustar etiquetas de estado según el tipo (Watching/Reading)
const statusLabels = {
'WATCHING': entryType === 'ANIME' ? 'Watching' : 'Reading',
'COMPLETED': 'Completed',
@@ -250,27 +244,41 @@ function createListItem(item) {
};
div.innerHTML = `
<img src="${posterUrl}" alt="${item.title || 'Entry'}" class="item-poster" onerror="this.src='/public/assets/placeholder.png'">
<a href="${itemLink}" class="item-poster-link">
<img src="${posterUrl}" alt="${item.title || 'Entry'}" class="item-poster" onerror="this.src='/public/assets/placeholder.png'">
</a>
<div class="item-content">
<h3 class="item-title">${item.title || 'Unknown Title'}</h3>
<div class="item-meta">
<span class="meta-pill status-pill">${statusLabels[item.status] || item.status}</span>
<span class="meta-pill type-pill">${entryType}</span>
<span class="meta-pill source-pill">${item.source.toUpperCase()}</span>
<div>
<a href="${itemLink}" style="text-decoration:none; color:inherit;">
<h3 class="item-title">${item.title || 'Unknown Title'}</h3>
</a>
<div class="item-meta">
<span class="meta-pill status-pill">${statusLabels[item.status] || item.status}</span>
<span class="meta-pill type-pill">${entryType}</span>
<span class="meta-pill source-pill">${item.source.toUpperCase()}</span>
</div>
</div>
<div class="progress-bar-container">
<div class="progress-bar" style="width: ${progressPercent}%"></div>
</div>
<div class="progress-text">
<span>${progress}${totalUnits > 0 ? ` / ${totalUnits}` : ''} ${unitLabel}</span> ${score ? `<span class="score-badge">⭐ ${score}</span>` : ''}
<div>
<div class="progress-bar-container">
<div class="progress-bar" style="width: ${progressPercent}%"></div>
</div>
<div class="progress-text">
<span>${progress}${totalUnits > 0 ? ` / ${totalUnits}` : ''} ${unitLabel}</span> ${score ? `<span class="score-badge">⭐ ${score}</span>` : ''}
</div>
</div>
</div>
`;
<button class="edit-icon-btn" onclick="openEditModal(${JSON.stringify(item).replace(/"/g, '&quot;')})">
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
<path d="M15.232 5.232l3.536 3.536m-2.036-5.808a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.536L15.232 5.232z"/>
</svg>
</button>
`;
return div;
}
// Open edit modal (ACTUALIZADO para MANGA/NOVEL)
function openEditModal(item) {
currentEditingEntry = item;
@@ -278,7 +286,6 @@ function openEditModal(item) {
document.getElementById('edit-progress').value = item.progress || 0;
document.getElementById('edit-score').value = item.score || '';
// Ajusta el texto del campo de progreso en el modal
const entryType = (item.entry_type || 'ANIME').toUpperCase();
const progressLabel = document.querySelector('label[for="edit-progress"]');
if (progressLabel) {
@@ -291,23 +298,20 @@ function openEditModal(item) {
}
}
// Establecer el max del progreso
const totalUnits = item.entry_type === 'ANIME' ?
item.total_episodes || 999 :
item.total_chapters || 999;
document.getElementById('edit-progress').max = totalUnits;
document.getElementById('edit-modal').style.display = 'flex';
document.getElementById('edit-modal').classList.add('active');
}
// Close edit modal
function closeEditModal() {
currentEditingEntry = null;
document.getElementById('edit-modal').style.display = 'none';
document.getElementById('edit-modal').classList.remove('active');
}
// Save entry changes
async function saveEntry() {
if (!currentEditingEntry) return;
@@ -342,7 +346,6 @@ async function saveEntry() {
}
}
// Delete entry
async function deleteEntry() {
if (!currentEditingEntry) return;
@@ -353,7 +356,7 @@ async function deleteEntry() {
try {
const response = await fetch(`${API_BASE}/list/entry/${currentEditingEntry.entry_id}`, {
method: 'DELETE',
headers: getAuthHeaders()
headers: getSimpleAuthHeaders()
});
if (!response.ok) {
@@ -369,7 +372,6 @@ async function deleteEntry() {
}
}
// Show notification (unchanged)
function showNotification(message, type = 'info') {
const notification = document.createElement('div');
notification.style.cssText = `
@@ -394,7 +396,6 @@ function showNotification(message, type = 'info') {
}, 3000);
}
// Add keyframe animations (unchanged)
const style = document.createElement('style');
style.textContent = `
@keyframes slideInRight {
@@ -420,7 +421,6 @@ style.textContent = `
`;
document.head.appendChild(style);
// Close modal on outside click (unchanged)
document.getElementById('edit-modal').addEventListener('click', (e) => {
if (e.target.id === 'edit-modal') {
closeEditModal();

View File

@@ -1,6 +1,6 @@
const Gitea_OWNER = 'ItsSkaiya';
const Gitea_REPO = 'WaifuBoard';
const CURRENT_VERSION = 'v1.6.3';
const CURRENT_VERSION = 'v1.6.4';
const UPDATE_CHECK_INTERVAL = 5 * 60 * 1000;
let currentVersionDisplay;