added modal to animes & books, fixed some styles
This commit is contained in:
@@ -1,552 +1,335 @@
|
||||
const animeId = window.location.pathname.split('/').pop();
|
||||
let player;
|
||||
let totalEpisodes = 0;
|
||||
let currentPage = 1;
|
||||
const itemsPerPage = 12;
|
||||
let extensionName;
|
||||
let currentAnimeData = null;
|
||||
let isInList = false;
|
||||
let currentListEntry = null;
|
||||
const searchInput = document.getElementById('search-input');
|
||||
const searchResults = document.getElementById('search-results');
|
||||
let searchTimeout;
|
||||
let availableExtensions = [];
|
||||
|
||||
const API_BASE = '/api';
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
const query = e.target.value;
|
||||
clearTimeout(searchTimeout);
|
||||
if (query.length < 2) {
|
||||
searchResults.classList.remove('active');
|
||||
searchResults.innerHTML = '';
|
||||
searchInput.style.borderRadius = '99px';
|
||||
return;
|
||||
}
|
||||
searchTimeout = setTimeout(() => {
|
||||
|
||||
fetchSearh(query);
|
||||
}, 300);
|
||||
});
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('.search-wrapper')) {
|
||||
searchResults.classList.remove('active');
|
||||
searchInput.style.borderRadius = '99px';
|
||||
}
|
||||
});
|
||||
|
||||
async function fetchSearh(query) {
|
||||
try {
|
||||
let apiUrl = `/api/search?q=${encodeURIComponent(query)}`;
|
||||
let extensionName = null;
|
||||
let finalQuery = query;
|
||||
|
||||
const parts = query.split(':');
|
||||
if (parts.length >= 2) {
|
||||
const potentialExtension = parts[0].trim().toLowerCase();
|
||||
|
||||
const foundExtension = availableExtensions.find(ext => ext.toLowerCase() === potentialExtension);
|
||||
|
||||
if (foundExtension) {
|
||||
extensionName = foundExtension;
|
||||
|
||||
finalQuery = parts.slice(1).join(':').trim();
|
||||
|
||||
if (finalQuery.length === 0) {
|
||||
renderSearchResults([]);
|
||||
return;
|
||||
}
|
||||
|
||||
apiUrl = `/api/search/${extensionName}?q=${encodeURIComponent(finalQuery)}`;
|
||||
}
|
||||
}
|
||||
|
||||
const res = await fetch(apiUrl);
|
||||
const data = await res.json();
|
||||
|
||||
const resultsWithExtension = (data.results || []).map(anime => {
|
||||
if (extensionName) {
|
||||
return {
|
||||
...anime,
|
||||
isExtensionResult: true,
|
||||
extensionName: extensionName
|
||||
};
|
||||
}
|
||||
return anime;
|
||||
});
|
||||
|
||||
renderSearchResults(resultsWithExtension);
|
||||
} catch (err) {
|
||||
console.error("Search Error:", err);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadContinueWatching() {
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token) return;
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/list/filter?status=watching&entry_type=ANIME', {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
|
||||
if (!res.ok) return;
|
||||
|
||||
const data = await res.json();
|
||||
const list = data.results || [];
|
||||
|
||||
renderContinueWatching('my-status', list);
|
||||
|
||||
} catch (err) {
|
||||
console.error('Continue Watching Error:', err);
|
||||
}
|
||||
}
|
||||
|
||||
function renderContinueWatching(id, list) {
|
||||
const container = document.getElementById(id);
|
||||
if (!container) return;
|
||||
|
||||
container.innerHTML = '';
|
||||
|
||||
if (list.length === 0) {
|
||||
container.innerHTML = `<div style="padding:1rem; color:#888">No watching anime</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
list.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
|
||||
|
||||
list.forEach(item => {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'card';
|
||||
|
||||
el.onclick = () => {
|
||||
const ep = item.progress || 1;
|
||||
|
||||
if (item.source === 'anilist') {
|
||||
window.location.href = `http://localhost:54322/watch/${item.entry_id}/${ep + 1}`;
|
||||
} else {
|
||||
window.location.href = `http://localhost:54322/watch/${item.entry_id}/${ep + 1}?${item.source}`;
|
||||
}
|
||||
};
|
||||
|
||||
const progressText = item.total_episodes
|
||||
? `${item.progress || 0}/${item.total_episodes}`
|
||||
: `${item.progress || 0}`;
|
||||
|
||||
el.innerHTML = `
|
||||
<div class="card-img-wrap">
|
||||
<img src="${item.poster}" loading="lazy">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3>${item.title}</h3>
|
||||
<p>Ep ${progressText} - ${item.source}</p> </div>
|
||||
`;
|
||||
|
||||
container.appendChild(el);
|
||||
});
|
||||
}
|
||||
|
||||
function renderSearchResults(results) {
|
||||
searchResults.innerHTML = '';
|
||||
if (results.length === 0) {
|
||||
searchResults.innerHTML = '<div style="padding:1rem; color:#888; text-align:center">No results found</div>';
|
||||
} else {
|
||||
results.forEach(anime => {
|
||||
const title = getTitle(anime);
|
||||
const img = anime.coverImage.medium || anime.coverImage.large;
|
||||
const rating = anime.averageScore ? `${anime.averageScore}%` : 'N/A';
|
||||
const year = anime.seasonYear || '';
|
||||
const format = anime.format || 'TV';
|
||||
|
||||
let href;
|
||||
if (anime.isExtensionResult) {
|
||||
href = `/anime/${anime.extensionName}/${anime.id}`;
|
||||
} else {
|
||||
href = `/anime/${anime.id}`;
|
||||
}
|
||||
|
||||
const item = document.createElement('a');
|
||||
item.className = 'search-item';
|
||||
item.href = href;
|
||||
item.innerHTML = `
|
||||
<img src="${img}" class="search-poster" alt="${title}">
|
||||
<div class="search-info">
|
||||
<div class="search-title">${title}</div>
|
||||
<div class="search-meta">
|
||||
<span class="rating-pill">${rating}</span>
|
||||
<span>• ${year}</span>
|
||||
<span>• ${format}</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
searchResults.appendChild(item);
|
||||
});
|
||||
}
|
||||
searchResults.classList.add('active');
|
||||
searchInput.style.borderRadius = '12px 12px 0 0';
|
||||
}
|
||||
|
||||
function scrollCarousel(id, direction) {
|
||||
const container = document.getElementById(id);
|
||||
if(container) {
|
||||
const scrollAmount = container.clientWidth * 0.75;
|
||||
container.scrollBy({ left: direction * scrollAmount, behavior: 'smooth' });
|
||||
}
|
||||
}
|
||||
|
||||
let trendingAnimes = [];
|
||||
let currentHeroIndex = 0;
|
||||
let player;
|
||||
let heroInterval;
|
||||
|
||||
var tag = document.createElement('script');
|
||||
tag.src = "https://www.youtube.com/iframe_api";
|
||||
var firstScriptTag = document.getElementsByTagName('script')[0];
|
||||
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
||||
|
||||
function getAuthToken() {
|
||||
return localStorage.getItem('token');
|
||||
function onYouTubeIframeAPIReady() {
|
||||
player = new YT.Player('player', {
|
||||
height: '100%', width: '100%',
|
||||
playerVars: { 'autoplay': 1, 'controls': 0, 'mute': 1, 'loop': 1, 'showinfo': 0, 'modestbranding': 1 },
|
||||
events: { 'onReady': (e) => { e.target.mute(); if(trendingAnimes.length) updateHeroVideo(trendingAnimes[currentHeroIndex]); } }
|
||||
});
|
||||
}
|
||||
|
||||
function getAuthHeaders() {
|
||||
const token = getAuthToken();
|
||||
return {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
};
|
||||
}
|
||||
|
||||
function getSimpleAuthHeaders() {
|
||||
const token = getAuthToken();
|
||||
return {
|
||||
'Authorization': `Bearer ${token}`
|
||||
};
|
||||
}
|
||||
|
||||
// Lógica de chequeo de lista corregida para usar /list/entry/{id} y esperar 'found'
|
||||
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}`;
|
||||
|
||||
async function fetchContent(isUpdate = false) {
|
||||
try {
|
||||
const response = await fetch(fetchUrl, {
|
||||
headers: getSimpleAuthHeaders()
|
||||
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
|
||||
if (data.found && data.entry) { // Esperamos 'found'
|
||||
isInList = true;
|
||||
currentListEntry = data.entry;
|
||||
} else {
|
||||
isInList = false;
|
||||
currentListEntry = null;
|
||||
}
|
||||
updateAddToListButton();
|
||||
const resExt = await fetch('/api/extensions/anime');
|
||||
const dataExt = await resExt.json();
|
||||
if (dataExt.extensions) {
|
||||
availableExtensions = dataExt.extensions;
|
||||
console.log("Extensiones de anime disponibles cargadas:", availableExtensions);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error checking single list entry:', error);
|
||||
const trendingRes = await fetch('/api/trending');
|
||||
const trendingData = await trendingRes.json();
|
||||
|
||||
if (trendingData.results && trendingData.results.length > 0) {
|
||||
trendingAnimes = trendingData.results;
|
||||
if (!isUpdate) {
|
||||
updateHeroUI(trendingAnimes[0]);
|
||||
startHeroCycle();
|
||||
}
|
||||
renderList('trending', trendingAnimes);
|
||||
} else if (!isUpdate) {
|
||||
setTimeout(() => fetchContent(false), 2000);
|
||||
}
|
||||
|
||||
const topRes = await fetch('/api/top-airing');
|
||||
const topData = await topRes.json();
|
||||
if (topData.results && topData.results.length > 0) {
|
||||
renderList('top-airing', topData.results);
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
console.error("Fetch Error:", e);
|
||||
if(!isUpdate) setTimeout(() => fetchContent(false), 5000);
|
||||
}
|
||||
}
|
||||
|
||||
function updateAddToListButton() {
|
||||
const btn = document.getElementById('add-to-list-btn');
|
||||
if (!btn) return;
|
||||
function startHeroCycle() {
|
||||
if(heroInterval) clearInterval(heroInterval);
|
||||
heroInterval = setInterval(() => {
|
||||
if(trendingAnimes.length > 0) {
|
||||
currentHeroIndex = (currentHeroIndex + 1) % trendingAnimes.length;
|
||||
updateHeroUI(trendingAnimes[currentHeroIndex]);
|
||||
}
|
||||
}, 10000);
|
||||
}
|
||||
|
||||
if (isInList) {
|
||||
btn.innerHTML = `
|
||||
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
|
||||
</svg>
|
||||
In Your List
|
||||
`;
|
||||
btn.style.background = 'rgba(34, 197, 94, 0.2)';
|
||||
btn.style.color = '#22c55e';
|
||||
btn.style.borderColor = 'rgba(34, 197, 94, 0.3)';
|
||||
function getTitle(anime) {
|
||||
return anime.title.english || anime.title.romaji || "Unknown Title";
|
||||
}
|
||||
|
||||
function updateHeroUI(anime) {
|
||||
if(!anime) return;
|
||||
const title = getTitle(anime);
|
||||
const score = anime.averageScore ? anime.averageScore + '% Match' : 'N/A';
|
||||
const year = anime.seasonYear || '';
|
||||
const type = anime.format || 'TV';
|
||||
const desc = anime.description || 'No description available.';
|
||||
const poster = anime.coverImage ? anime.coverImage.extraLarge : '';
|
||||
const banner = anime.bannerImage || poster;
|
||||
|
||||
document.getElementById('hero-title').innerText = title;
|
||||
document.getElementById('hero-desc').innerHTML = desc;
|
||||
document.getElementById('hero-score').innerText = score;
|
||||
document.getElementById('hero-year').innerText = year;
|
||||
document.getElementById('hero-type').innerText = type;
|
||||
document.getElementById('hero-poster').src = poster;
|
||||
|
||||
const watchBtn = document.getElementById('watch-btn');
|
||||
if(watchBtn) watchBtn.onclick = () => window.location.href = `/anime/${anime.id}`;
|
||||
|
||||
const bgImg = document.getElementById('hero-bg-media');
|
||||
if(bgImg && bgImg.src !== banner) bgImg.src = banner;
|
||||
|
||||
updateHeroVideo(anime);
|
||||
|
||||
document.getElementById('hero-loading-ui').style.display = 'none';
|
||||
document.getElementById('hero-real-ui').style.display = 'block';
|
||||
}
|
||||
|
||||
function updateHeroVideo(anime) {
|
||||
if (!player || !player.loadVideoById) return;
|
||||
const videoContainer = document.getElementById('player');
|
||||
if (anime.trailer && anime.trailer.site === 'youtube' && anime.trailer.id) {
|
||||
if(player.getVideoData && player.getVideoData().video_id !== anime.trailer.id) {
|
||||
player.loadVideoById(anime.trailer.id);
|
||||
player.mute();
|
||||
}
|
||||
videoContainer.style.opacity = "1";
|
||||
} else {
|
||||
btn.innerHTML = '+ Add to List';
|
||||
btn.style.background = null;
|
||||
btn.style.color = null;
|
||||
btn.style.borderColor = null;
|
||||
videoContainer.style.opacity = "0";
|
||||
player.stopVideo();
|
||||
}
|
||||
}
|
||||
|
||||
// Función openAddToListModal actualizada con todos los campos extendidos
|
||||
function openAddToListModal() {
|
||||
// Referencias
|
||||
const modalTitle = document.getElementById('modal-title');
|
||||
const deleteBtn = document.getElementById('modal-delete-btn');
|
||||
|
||||
// Mapeo de prefijos (usamos 'entry-' para el HTML del modal extendido)
|
||||
const statusEl = document.getElementById('entry-status');
|
||||
const progressEl = document.getElementById('entry-progress');
|
||||
const scoreEl = document.getElementById('entry-score');
|
||||
const startDateEl = document.getElementById('entry-start-date');
|
||||
const endDateEl = document.getElementById('entry-end-date');
|
||||
const repeatCountEl = document.getElementById('entry-repeat-count');
|
||||
const notesEl = document.getElementById('entry-notes');
|
||||
const privateEl = document.getElementById('entry-is-private');
|
||||
|
||||
|
||||
if (isInList && currentListEntry) {
|
||||
const statusReverseMap = {
|
||||
CURRENT: 'WATCHING'
|
||||
};
|
||||
|
||||
statusEl.value = statusReverseMap[currentListEntry.status] || currentListEntry.status || 'PLANNING';
|
||||
progressEl.value = currentListEntry.progress || 0;
|
||||
scoreEl.value = currentListEntry.score || '';
|
||||
|
||||
// Campos extendidos
|
||||
startDateEl.value = currentListEntry.start_date ? currentListEntry.start_date.split('T')[0] : '';
|
||||
endDateEl.value = currentListEntry.end_date ? currentListEntry.end_date.split('T')[0] : '';
|
||||
repeatCountEl.value = currentListEntry.repeat_count || 0;
|
||||
notesEl.value = currentListEntry.notes || '';
|
||||
privateEl.checked = currentListEntry.is_private === true || currentListEntry.is_private === 1;
|
||||
|
||||
modalTitle.textContent = 'Edit List Entry';
|
||||
deleteBtn.style.display = 'block';
|
||||
} else {
|
||||
// Valores por defecto
|
||||
statusEl.value = 'PLANNING';
|
||||
progressEl.value = 0;
|
||||
scoreEl.value = '';
|
||||
startDateEl.value = '';
|
||||
endDateEl.value = '';
|
||||
repeatCountEl.value = 0;
|
||||
notesEl.value = '';
|
||||
privateEl.checked = false;
|
||||
|
||||
modalTitle.textContent = 'Add to List';
|
||||
deleteBtn.style.display = 'none';
|
||||
function renderList(id, list) {
|
||||
const container = document.getElementById(id);
|
||||
const firstId = list.length > 0 ? list[0].id : null;
|
||||
const currentFirstId = container.firstElementChild?.dataset?.id;
|
||||
if (currentFirstId && parseInt(currentFirstId) === firstId && container.children.length === list.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
progressEl.max = totalEpisodes || 999;
|
||||
document.getElementById('add-list-modal').classList.add('active');
|
||||
container.innerHTML = '';
|
||||
list.forEach(anime => {
|
||||
const title = getTitle(anime);
|
||||
const cover = anime.coverImage ? anime.coverImage.large : '';
|
||||
const ep = anime.nextAiringEpisode ? 'Ep ' + anime.nextAiringEpisode.episode : (anime.episodes ? anime.episodes + ' Eps' : 'TV');
|
||||
const score = anime.averageScore || '--';
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.className = 'card';
|
||||
el.dataset.id = anime.id;
|
||||
|
||||
el.onclick = () => window.location.href = `/anime/${anime.id}`;
|
||||
el.innerHTML = `
|
||||
<div class="card-img-wrap"><img src="${cover}" loading="lazy"></div>
|
||||
<div class="card-content">
|
||||
<h3>${title}</h3>
|
||||
<p>${score}% • ${ep}</p>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(el);
|
||||
});
|
||||
}
|
||||
|
||||
function closeAddToListModal() {
|
||||
document.getElementById('add-list-modal').classList.remove('active');
|
||||
}
|
||||
|
||||
// Función saveToList actualizada con todos los campos extendidos
|
||||
async function saveToList() {
|
||||
const uiStatus = document.getElementById('entry-status').value;
|
||||
|
||||
const anilistStatusMap = {
|
||||
WATCHING: 'CURRENT',
|
||||
COMPLETED: 'COMPLETED',
|
||||
PLANNING: 'PLANNING',
|
||||
PAUSED: 'PAUSED',
|
||||
DROPPED: 'DROPPED',
|
||||
REPEATING: 'REPEATING'
|
||||
};
|
||||
|
||||
const status = anilistStatusMap[uiStatus];
|
||||
const progress = parseInt(document.getElementById('entry-progress').value) || 0;
|
||||
const scoreValue = document.getElementById('entry-score').value;
|
||||
const score = scoreValue ? parseFloat(scoreValue) : null;
|
||||
|
||||
// Nuevos campos
|
||||
const start_date = document.getElementById('entry-start-date').value || null;
|
||||
const end_date = document.getElementById('entry-end-date').value || null;
|
||||
const repeat_count = parseInt(document.getElementById('entry-repeat-count').value) || 0;
|
||||
const notes = document.getElementById('entry-notes').value || null;
|
||||
const is_private = document.getElementById('entry-is-private').checked;
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/list/entry`, {
|
||||
method: 'POST',
|
||||
headers: getAuthHeaders(),
|
||||
body: JSON.stringify({
|
||||
entry_id: animeId,
|
||||
source: extensionName || 'anilist',
|
||||
entry_type: 'ANIME',
|
||||
status: status,
|
||||
progress: progress,
|
||||
score: score,
|
||||
// Campos extendidos
|
||||
start_date: start_date,
|
||||
end_date: end_date,
|
||||
repeat_count: repeat_count,
|
||||
notes: notes,
|
||||
is_private: is_private
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to save entry');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
isInList = true;
|
||||
currentListEntry = data.entry;
|
||||
updateAddToListButton();
|
||||
closeAddToListModal();
|
||||
showNotification(isInList ? 'Updated successfully!' : 'Added to your list!', 'success');
|
||||
} catch (error) {
|
||||
console.error('Error saving to list:', error);
|
||||
showNotification('Failed to save. Please try again.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteFromList() {
|
||||
if (!confirm('Remove this anime from your list?')) return;
|
||||
|
||||
const source = extensionName || 'anilist';
|
||||
const entryType = 'ANIME';
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/list/entry/${animeId}?source=${source}&entry_type=${entryType}`, {
|
||||
method: 'DELETE',
|
||||
headers: getSimpleAuthHeaders()
|
||||
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to delete entry');
|
||||
}
|
||||
|
||||
isInList = false;
|
||||
currentListEntry = null;
|
||||
updateAddToListButton();
|
||||
closeAddToListModal();
|
||||
showNotification('Removed from your list', 'success');
|
||||
} catch (error) {
|
||||
console.error('Error deleting from list:', error);
|
||||
showNotification('Failed to remove. Please try again.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function showNotification(message, type = 'info') {
|
||||
const notification = document.createElement('div');
|
||||
notification.style.cssText = `
|
||||
position: fixed;
|
||||
top: 100px;
|
||||
right: 20px;
|
||||
background: ${type === 'success' ? '#22c55e' : type === 'error' ? '#ef4444' : '#8b5cf6'};
|
||||
color: white;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
||||
z-index: 9999;
|
||||
font-weight: 600;
|
||||
animation: slideInRight 0.3s ease;
|
||||
`;
|
||||
notification.textContent = message;
|
||||
document.body.appendChild(notification);
|
||||
|
||||
setTimeout(() => {
|
||||
notification.style.animation = 'slideOutRight 0.3s ease';
|
||||
setTimeout(() => notification.remove(), 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
async function loadAnime() {
|
||||
try {
|
||||
const path = window.location.pathname;
|
||||
const parts = path.split("/").filter(Boolean);
|
||||
let animeId;
|
||||
|
||||
if (parts.length === 3) {
|
||||
extensionName = parts[1];
|
||||
animeId = parts[2];
|
||||
} else {
|
||||
animeId = parts[1];
|
||||
}
|
||||
|
||||
const fetchUrl = extensionName
|
||||
? `/api/anime/${animeId}?source=${extensionName}`
|
||||
: `/api/anime/${animeId}?source=anilist`;
|
||||
const res = await fetch(fetchUrl, { headers: getSimpleAuthHeaders() });
|
||||
const data = await res.json();
|
||||
|
||||
if (data.error) {
|
||||
document.getElementById('title').innerText = "Anime Not Found";
|
||||
return;
|
||||
}
|
||||
|
||||
currentAnimeData = data;
|
||||
|
||||
const title = data.title?.english || data.title?.romaji || data.title || "Unknown Title";
|
||||
document.title = `${title} | WaifuBoard`;
|
||||
document.getElementById('title').innerText = title;
|
||||
|
||||
let posterUrl = '';
|
||||
|
||||
if (extensionName) {
|
||||
posterUrl = data.image || '';
|
||||
} else {
|
||||
posterUrl = data.coverImage?.extraLarge || '';
|
||||
}
|
||||
|
||||
if (posterUrl) {
|
||||
document.getElementById('poster').src = posterUrl;
|
||||
}
|
||||
|
||||
const rawDesc = data.description || data.summary || "No description available.";
|
||||
handleDescription(rawDesc);
|
||||
|
||||
const score = extensionName ? (data.score ? data.score * 10 : '?') : data.averageScore;
|
||||
document.getElementById('score').innerText = (score || '?') + '% Score';
|
||||
|
||||
document.getElementById('year').innerText =
|
||||
extensionName ? (data.year || '????') : (data.seasonYear || data.startDate?.year || '????');
|
||||
|
||||
document.getElementById('genres').innerText =
|
||||
data.genres?.length > 0 ? data.genres.slice(0, 3).join(' • ') : '';
|
||||
|
||||
document.getElementById('format').innerText = data.format || 'TV';
|
||||
|
||||
document.getElementById('status').innerText = data.status || 'Unknown';
|
||||
|
||||
const extensionPill = document.getElementById('extension-pill');
|
||||
if (extensionName && extensionPill) {
|
||||
extensionPill.textContent = `${extensionName.charAt(0).toUpperCase() + extensionName.slice(1).toLowerCase()}`;
|
||||
extensionPill.style.display = 'inline-flex';
|
||||
} else if (extensionPill) {
|
||||
extensionPill.style.display = 'none';
|
||||
}
|
||||
|
||||
let seasonText = '';
|
||||
if (extensionName) {
|
||||
seasonText = data.season || 'Unknown';
|
||||
} else {
|
||||
if (data.season && data.seasonYear) {
|
||||
seasonText = `${data.season} ${data.seasonYear}`;
|
||||
} else if (data.startDate?.year) {
|
||||
const months = ['', 'Winter', 'Winter', 'Spring', 'Spring', 'Spring', 'Summer', 'Summer', 'Summer', 'Fall', 'Fall', 'Fall', 'Winter'];
|
||||
const month = data.startDate.month || 1;
|
||||
const estimatedSeason = months[month] || '';
|
||||
seasonText = `${estimatedSeason} ${data.startDate.year}`.trim();
|
||||
}
|
||||
}
|
||||
document.getElementById('season').innerText = seasonText || 'Unknown';
|
||||
|
||||
const studio = extensionName
|
||||
? data.studio || "Unknown"
|
||||
: (data.studios?.nodes?.[0]?.name ||
|
||||
data.studios?.edges?.[0]?.node?.name ||
|
||||
'Unknown Studio');
|
||||
|
||||
document.getElementById('studio').innerText = studio;
|
||||
|
||||
const charContainer = document.getElementById('char-list');
|
||||
charContainer.innerHTML = '';
|
||||
|
||||
let characters = [];
|
||||
|
||||
if (extensionName) {
|
||||
characters = data.characters || [];
|
||||
} else {
|
||||
if (data.characters?.nodes?.length > 0) {
|
||||
characters = data.characters.nodes.slice(0, 5);
|
||||
} else if (data.characters?.edges?.length > 0) {
|
||||
characters = data.characters.edges
|
||||
.filter(edge => edge?.node?.name?.full)
|
||||
.slice(0, 5)
|
||||
.map(edge => edge.node);
|
||||
}
|
||||
}
|
||||
|
||||
if (characters.length > 0) {
|
||||
characters.slice(0, 5).forEach(char => {
|
||||
const name = char?.name?.full || char?.name;
|
||||
if (name) {
|
||||
charContainer.innerHTML += `
|
||||
<div class="character-item">
|
||||
<div class="char-dot"></div> ${name}
|
||||
</div>`;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
charContainer.innerHTML = `
|
||||
<div class="character-item" style="color: #666;">
|
||||
No character data available
|
||||
</div>`;
|
||||
}
|
||||
|
||||
document.getElementById('watch-btn').onclick = () => {
|
||||
window.location.href = `/watch/${animeId}/1`;
|
||||
};
|
||||
|
||||
if (data.trailer && data.trailer.site === 'youtube') {
|
||||
window.onYouTubeIframeAPIReady = function() {
|
||||
player = new YT.Player('player', {
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
videoId: data.trailer.id,
|
||||
playerVars: {
|
||||
autoplay: 1, controls: 0, mute: 1,
|
||||
loop: 1, playlist: data.trailer.id,
|
||||
showinfo: 0, modestbranding: 1, disablekb: 1
|
||||
},
|
||||
events: { onReady: (e) => e.target.playVideo() }
|
||||
});
|
||||
};
|
||||
} else {
|
||||
const banner = extensionName
|
||||
? (data.image || '')
|
||||
: (data.bannerImage || data.coverImage?.extraLarge || '');
|
||||
|
||||
if (banner) {
|
||||
document.querySelector('.video-background').innerHTML =
|
||||
`<img src="${banner}" style="width:100%; height:100%; object-fit:cover;">`;
|
||||
}
|
||||
}
|
||||
|
||||
if (extensionName) {
|
||||
totalEpisodes = data.episodes || 1;
|
||||
} else {
|
||||
if (data.nextAiringEpisode?.episode) {
|
||||
totalEpisodes = data.nextAiringEpisode.episode - 1;
|
||||
} else if (data.episodes) {
|
||||
totalEpisodes = data.episodes;
|
||||
} else {
|
||||
totalEpisodes = 12;
|
||||
}
|
||||
}
|
||||
|
||||
totalEpisodes = Math.min(Math.max(totalEpisodes, 1), 5000);
|
||||
document.getElementById('episodes').innerText = totalEpisodes;
|
||||
|
||||
renderEpisodes();
|
||||
|
||||
await checkIfInList();
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error loading anime:', err);
|
||||
document.getElementById('title').innerText = "Error loading anime";
|
||||
}
|
||||
}
|
||||
|
||||
function handleDescription(text) {
|
||||
const tmp = document.createElement("DIV");
|
||||
tmp.innerHTML = text;
|
||||
const cleanText = tmp.textContent || tmp.innerText || "";
|
||||
|
||||
const sentences = cleanText.match(/[^\.!\?]+[\.!\?]+/g) || [cleanText];
|
||||
|
||||
document.getElementById('full-description').innerHTML = text;
|
||||
|
||||
if (sentences.length > 4) {
|
||||
const shortText = sentences.slice(0, 4).join(' ');
|
||||
document.getElementById('description-preview').innerText = shortText + '...';
|
||||
document.getElementById('read-more-btn').style.display = 'inline-flex';
|
||||
} else {
|
||||
document.getElementById('description-preview').innerHTML = text;
|
||||
document.getElementById('read-more-btn').style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function openModal() {
|
||||
document.getElementById('desc-modal').classList.add('active');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById('desc-modal').classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
document.getElementById('desc-modal').addEventListener('click', (e) => {
|
||||
if (e.target.id === 'desc-modal') closeModal();
|
||||
});
|
||||
|
||||
function renderEpisodes() {
|
||||
const grid = document.getElementById('episodes-grid');
|
||||
grid.innerHTML = '';
|
||||
|
||||
const start = (currentPage - 1) * itemsPerPage + 1;
|
||||
const end = Math.min(start + itemsPerPage - 1, totalEpisodes);
|
||||
|
||||
for(let i = start; i <= end; i++) {
|
||||
createEpisodeButton(i, grid);
|
||||
}
|
||||
updatePaginationControls();
|
||||
}
|
||||
|
||||
function createEpisodeButton(num, container) {
|
||||
const btn = document.createElement('div');
|
||||
btn.className = 'episode-btn';
|
||||
btn.innerText = `Ep ${num}`;
|
||||
btn.onclick = () =>
|
||||
window.location.href = `/watch/${animeId}/${num}` + (extensionName ? `?${extensionName}` : "");
|
||||
|
||||
container.appendChild(btn);
|
||||
}
|
||||
|
||||
function updatePaginationControls() {
|
||||
const totalPages = Math.ceil(totalEpisodes / itemsPerPage);
|
||||
document.getElementById('page-info').innerText = `Page ${currentPage} of ${totalPages}`;
|
||||
document.getElementById('prev-page').disabled = currentPage === 1;
|
||||
document.getElementById('next-page').disabled = currentPage === totalPages;
|
||||
|
||||
document.getElementById('pagination-controls').style.display = 'flex';
|
||||
}
|
||||
|
||||
function changePage(delta) {
|
||||
currentPage += delta;
|
||||
renderEpisodes();
|
||||
}
|
||||
|
||||
const searchInput = document.getElementById('ep-search');
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
const val = parseInt(e.target.value);
|
||||
const grid = document.getElementById('episodes-grid');
|
||||
|
||||
if (val > 0 && val <= totalEpisodes) {
|
||||
grid.innerHTML = '';
|
||||
createEpisodeButton(val, grid);
|
||||
document.getElementById('pagination-controls').style.display = 'none';
|
||||
} else if (!e.target.value) {
|
||||
renderEpisodes();
|
||||
} else {
|
||||
grid.innerHTML = '<div style="color:#666; width:100%; text-align:center;">Episode not found</div>';
|
||||
document.getElementById('pagination-controls').style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const modal = document.getElementById('add-list-modal');
|
||||
if (modal) {
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target.id === 'add-list-modal') {
|
||||
closeAddToListModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes slideInRight {
|
||||
from { transform: translateX(400px); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
@keyframes slideOutRight {
|
||||
from { transform: translateX(0); opacity: 1; }
|
||||
to { transform: translateX(400px); opacity: 0; }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
loadAnime();
|
||||
fetchContent();
|
||||
loadContinueWatching();
|
||||
setInterval(() => fetchContent(true), 60000);
|
||||
@@ -3,6 +3,291 @@ const searchResults = document.getElementById('search-results');
|
||||
let searchTimeout;
|
||||
let availableExtensions = [];
|
||||
|
||||
let currentAnimeData = null;
|
||||
|
||||
let isInList = false;
|
||||
let currentListEntry = null;
|
||||
let totalEpisodes = 0;
|
||||
|
||||
const API_BASE = '/api';
|
||||
|
||||
function getAuthToken() {
|
||||
return localStorage.getItem('token');
|
||||
}
|
||||
|
||||
function getAuthHeaders() {
|
||||
const token = getAuthToken();
|
||||
return {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
};
|
||||
}
|
||||
|
||||
function getSimpleAuthHeaders() {
|
||||
const token = getAuthToken();
|
||||
return {
|
||||
'Authorization': `Bearer ${token}`
|
||||
};
|
||||
}
|
||||
|
||||
function getTitle(anime) {
|
||||
return anime.title.english || anime.title.romaji || "Unknown Title";
|
||||
}
|
||||
|
||||
function showNotification(message, type = 'info') {
|
||||
const notification = document.createElement('div');
|
||||
notification.style.cssText = `
|
||||
position: fixed;
|
||||
top: 100px;
|
||||
right: 20px;
|
||||
background: ${type === 'success' ? '#22c55e' : type === 'error' ? '#ef4444' : '#8b5cf6'};
|
||||
color: white;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
||||
z-index: 9999;
|
||||
font-weight: 600;
|
||||
animation: slideInRight 0.3s ease;
|
||||
`;
|
||||
notification.textContent = message;
|
||||
document.body.appendChild(notification);
|
||||
|
||||
setTimeout(() => {
|
||||
notification.style.animation = 'slideOutRight 0.3s ease';
|
||||
setTimeout(() => notification.remove(), 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes slideInRight {
|
||||
from { transform: translateX(400px); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
@keyframes slideOutRight {
|
||||
from { transform: translateX(0); opacity: 1; }
|
||||
to { transform: translateX(400px); opacity: 0; }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
async function checkIfInList(animeId) {
|
||||
const source = 'anilist';
|
||||
const entryType = 'ANIME';
|
||||
|
||||
const fetchUrl = `${API_BASE}/list/entry/${animeId}?source=${source}&entry_type=${entryType}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(fetchUrl, {
|
||||
headers: getSimpleAuthHeaders()
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
|
||||
if (data.found && data.entry) {
|
||||
isInList = true;
|
||||
currentListEntry = data.entry;
|
||||
} else {
|
||||
isInList = false;
|
||||
currentListEntry = null;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
} catch (error) {
|
||||
console.error('Error checking single list entry:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function updateAddToListButton() {
|
||||
const btn = document.querySelector('.hero-buttons .btn-blur');
|
||||
if (!btn) return;
|
||||
|
||||
if (isInList) {
|
||||
btn.innerHTML = `
|
||||
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
|
||||
</svg>
|
||||
In Your List
|
||||
`;
|
||||
btn.style.background = 'rgba(34, 197, 94, 0.2)';
|
||||
btn.style.color = '#22c55e';
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
async function openAddToListModal() {
|
||||
if (!getAuthToken()) {
|
||||
showNotification('Please log in to manage your list.', 'error');
|
||||
return;
|
||||
}
|
||||
if (!currentAnimeData) return;
|
||||
|
||||
await checkIfInList(currentAnimeData.id);
|
||||
|
||||
const modalTitle = document.getElementById('modal-title');
|
||||
const deleteBtn = document.getElementById('modal-delete-btn');
|
||||
|
||||
const statusEl = document.getElementById('entry-status');
|
||||
const progressEl = document.getElementById('entry-progress');
|
||||
const scoreEl = document.getElementById('entry-score');
|
||||
const startDateEl = document.getElementById('entry-start-date');
|
||||
const endDateEl = document.getElementById('entry-end-date');
|
||||
const repeatCountEl = document.getElementById('entry-repeat-count');
|
||||
const notesEl = document.getElementById('entry-notes');
|
||||
const privateEl = document.getElementById('entry-is-private');
|
||||
|
||||
if (isInList && currentListEntry) {
|
||||
const statusReverseMap = { CURRENT: 'WATCHING' };
|
||||
|
||||
statusEl.value = statusReverseMap[currentListEntry.status] || currentListEntry.status || 'PLANNING';
|
||||
progressEl.value = currentListEntry.progress || 0;
|
||||
scoreEl.value = currentListEntry.score || '';
|
||||
|
||||
startDateEl.value = currentListEntry.start_date ? currentListEntry.start_date.split('T')[0] : '';
|
||||
endDateEl.value = currentListEntry.end_date ? currentListEntry.end_date.split('T')[0] : '';
|
||||
repeatCountEl.value = currentListEntry.repeat_count || 0;
|
||||
notesEl.value = currentListEntry.notes || '';
|
||||
privateEl.checked = currentListEntry.is_private === true || currentListEntry.is_private === 1;
|
||||
|
||||
modalTitle.textContent = 'Edit List Entry';
|
||||
deleteBtn.style.display = 'block';
|
||||
} else {
|
||||
statusEl.value = 'PLANNING';
|
||||
progressEl.value = 0;
|
||||
scoreEl.value = '';
|
||||
startDateEl.value = '';
|
||||
endDateEl.value = '';
|
||||
repeatCountEl.value = 0;
|
||||
notesEl.value = '';
|
||||
privateEl.checked = false;
|
||||
|
||||
modalTitle.textContent = 'Add to List';
|
||||
deleteBtn.style.display = 'none';
|
||||
}
|
||||
|
||||
totalEpisodes = currentAnimeData.episodes || 999;
|
||||
|
||||
progressEl.max = totalEpisodes;
|
||||
document.getElementById('add-list-modal').classList.add('active');
|
||||
}
|
||||
|
||||
function closeAddToListModal() {
|
||||
document.getElementById('add-list-modal').classList.remove('active');
|
||||
}
|
||||
|
||||
async function saveToList() {
|
||||
const uiStatus = document.getElementById('entry-status').value;
|
||||
|
||||
const anilistStatusMap = {
|
||||
WATCHING: 'CURRENT',
|
||||
COMPLETED: 'COMPLETED',
|
||||
PLANNING: 'PLANNING',
|
||||
PAUSED: 'PAUSED',
|
||||
DROPPED: 'DROPPED',
|
||||
REPEATING: 'REPEATING'
|
||||
};
|
||||
|
||||
const status = anilistStatusMap[uiStatus];
|
||||
const progress = parseInt(document.getElementById('entry-progress').value) || 0;
|
||||
const scoreValue = document.getElementById('entry-score').value;
|
||||
const score = scoreValue ? parseFloat(scoreValue) : null;
|
||||
|
||||
const start_date = document.getElementById('entry-start-date').value || null;
|
||||
const end_date = document.getElementById('entry-end-date').value || null;
|
||||
const repeat_count = parseInt(document.getElementById('entry-repeat-count').value) || 0;
|
||||
const notes = document.getElementById('entry-notes').value || null;
|
||||
const is_private = document.getElementById('entry-is-private').checked;
|
||||
|
||||
const animeId = currentAnimeData ? currentAnimeData.id : null;
|
||||
if (!animeId) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/list/entry`, {
|
||||
method: 'POST',
|
||||
headers: getAuthHeaders(),
|
||||
body: JSON.stringify({
|
||||
entry_id: animeId,
|
||||
source: 'anilist',
|
||||
|
||||
entry_type: 'ANIME',
|
||||
status: status,
|
||||
progress: progress,
|
||||
score: score,
|
||||
start_date: start_date,
|
||||
end_date: end_date,
|
||||
repeat_count: repeat_count,
|
||||
notes: notes,
|
||||
is_private: is_private
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to save entry');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
isInList = true;
|
||||
currentListEntry = data.entry;
|
||||
updateAddToListButton();
|
||||
closeAddToListModal();
|
||||
showNotification(isInList ? 'Updated successfully!' : 'Added to your list!', 'success');
|
||||
} catch (error) {
|
||||
console.error('Error saving to list:', error);
|
||||
showNotification('Failed to save. Please try again.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteFromList() {
|
||||
if (!confirm('Remove this anime from your list?')) return;
|
||||
|
||||
const animeId = currentAnimeData ? currentAnimeData.id : null;
|
||||
if (!animeId) return;
|
||||
|
||||
const source = 'anilist';
|
||||
const entryType = 'ANIME';
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/list/entry/${animeId}?source=${source}&entry_type=${entryType}`, {
|
||||
method: 'DELETE',
|
||||
headers: getSimpleAuthHeaders()
|
||||
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to delete entry');
|
||||
}
|
||||
|
||||
isInList = false;
|
||||
currentListEntry = null;
|
||||
updateAddToListButton();
|
||||
closeAddToListModal();
|
||||
showNotification('Removed from your list', 'success');
|
||||
} catch (error) {
|
||||
console.error('Error deleting from list:', error);
|
||||
showNotification('Failed to remove. Please try again.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const modal = document.getElementById('add-list-modal');
|
||||
if (modal) {
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target.id === 'add-list-modal') {
|
||||
closeAddToListModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
const query = e.target.value;
|
||||
clearTimeout(searchTimeout);
|
||||
@@ -106,7 +391,6 @@ function renderContinueWatching(id, list) {
|
||||
return;
|
||||
}
|
||||
|
||||
// ✅ ordenar por fecha
|
||||
list.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
|
||||
|
||||
list.forEach(item => {
|
||||
@@ -123,7 +407,6 @@ function renderContinueWatching(id, list) {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const progressText = item.total_episodes
|
||||
? `${item.progress || 0}/${item.total_episodes}`
|
||||
: `${item.progress || 0}`;
|
||||
@@ -253,12 +536,11 @@ function startHeroCycle() {
|
||||
}, 10000);
|
||||
}
|
||||
|
||||
function getTitle(anime) {
|
||||
return anime.title.english || anime.title.romaji || "Unknown Title";
|
||||
}
|
||||
|
||||
function updateHeroUI(anime) {
|
||||
async function updateHeroUI(anime) {
|
||||
if(!anime) return;
|
||||
|
||||
currentAnimeData = anime;
|
||||
|
||||
const title = getTitle(anime);
|
||||
const score = anime.averageScore ? anime.averageScore + '% Match' : 'N/A';
|
||||
const year = anime.seasonYear || '';
|
||||
@@ -277,6 +559,20 @@ function updateHeroUI(anime) {
|
||||
const watchBtn = document.getElementById('watch-btn');
|
||||
if(watchBtn) watchBtn.onclick = () => window.location.href = `/anime/${anime.id}`;
|
||||
|
||||
const addToListBtn = document.querySelector('.hero-buttons .btn-blur');
|
||||
if(addToListBtn) {
|
||||
|
||||
addToListBtn.onclick = openAddToListModal;
|
||||
|
||||
const success = await checkIfInList(anime.id);
|
||||
if (success) {
|
||||
updateAddToListButton();
|
||||
} else {
|
||||
updateAddToListButton();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
const bgImg = document.getElementById('hero-bg-media');
|
||||
if(bgImg && bgImg.src !== banner) bgImg.src = banner;
|
||||
|
||||
|
||||
@@ -55,7 +55,6 @@ function applyChapterFromUrlFilter() {
|
||||
currentPage = 1;
|
||||
}
|
||||
|
||||
|
||||
function getBookEntryType(bookData) {
|
||||
if (!bookData) return 'MANGA';
|
||||
|
||||
@@ -63,7 +62,6 @@ function getBookEntryType(bookData) {
|
||||
return (format === 'MANGA' || format === 'ONE_SHOT' || format === 'MANHWA') ? 'MANGA' : 'NOVEL';
|
||||
}
|
||||
|
||||
// CORRECCIÓN: Usar el endpoint /list/entry/{id} y esperar 'found'
|
||||
async function checkIfInList() {
|
||||
if (!currentBookData) return;
|
||||
|
||||
@@ -72,7 +70,6 @@ async function checkIfInList() {
|
||||
|
||||
const entryType = getBookEntryType(currentBookData);
|
||||
|
||||
// URL CORRECTA: /list/entry/{id}?source={source}&entry_type={entryType}
|
||||
const fetchUrl = `${API_BASE}/list/entry/${entryId}?source=${source}&entry_type=${entryType}`;
|
||||
|
||||
try {
|
||||
@@ -83,7 +80,6 @@ async function checkIfInList() {
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
|
||||
// LÓGICA CORRECTA: Comprobar data.found
|
||||
if (data.found && data.entry) {
|
||||
|
||||
isInList = true;
|
||||
@@ -94,7 +90,7 @@ async function checkIfInList() {
|
||||
}
|
||||
updateAddToListButton();
|
||||
} else if (response.status === 404) {
|
||||
// Manejar 404 como 'no encontrado' si la API lo devuelve así
|
||||
|
||||
isInList = false;
|
||||
currentListEntry = null;
|
||||
updateAddToListButton();
|
||||
@@ -128,37 +124,27 @@ function updateAddToListButton() {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* REFACTORIZADO para usar la estructura del modal completo.
|
||||
* Asume que el HTML usa IDs como 'entry-status', 'entry-progress', 'entry-score', etc.
|
||||
*/
|
||||
function openAddToListModal() {
|
||||
if (!currentBookData) return;
|
||||
|
||||
const totalUnits = currentBookData.chapters || currentBookData.volumes || 999;
|
||||
const entryType = getBookEntryType(currentBookData);
|
||||
|
||||
// Referencias a los elementos del nuevo modal (usando 'entry-' prefix)
|
||||
const modalTitle = document.getElementById('modal-title');
|
||||
const deleteBtn = document.getElementById('modal-delete-btn');
|
||||
const progressLabel = document.getElementById('progress-label');
|
||||
|
||||
// **VERIFICACIÓN CRÍTICA**
|
||||
if (!modalTitle || !deleteBtn || !progressLabel) {
|
||||
console.error("Error: Uno o más elementos críticos del modal (título, botón eliminar, o etiqueta de progreso) no se encontraron. Verifique los IDs en el HTML.");
|
||||
return;
|
||||
}
|
||||
|
||||
// --- Población de Datos ---
|
||||
|
||||
if (isInList && currentListEntry) {
|
||||
// Datos comunes
|
||||
|
||||
document.getElementById('entry-status').value = currentListEntry.status || 'PLANNING';
|
||||
document.getElementById('entry-progress').value = currentListEntry.progress || 0;
|
||||
document.getElementById('entry-score').value = currentListEntry.score || '';
|
||||
|
||||
// Nuevos datos
|
||||
// Usar formato ISO si viene como ISO, o limpiar si es necesario. Tu ejemplo JSON no tenía fechas.
|
||||
document.getElementById('entry-start-date').value = currentListEntry.start_date ? currentListEntry.start_date.split('T')[0] : '';
|
||||
document.getElementById('entry-end-date').value = currentListEntry.end_date ? currentListEntry.end_date.split('T')[0] : '';
|
||||
document.getElementById('entry-repeat-count').value = currentListEntry.repeat_count || 0;
|
||||
@@ -168,7 +154,7 @@ function openAddToListModal() {
|
||||
modalTitle.textContent = 'Edit Library Entry';
|
||||
deleteBtn.style.display = 'block';
|
||||
} else {
|
||||
// Valores por defecto
|
||||
|
||||
document.getElementById('entry-status').value = 'PLANNING';
|
||||
document.getElementById('entry-progress').value = 0;
|
||||
document.getElementById('entry-score').value = '';
|
||||
@@ -182,8 +168,6 @@ function openAddToListModal() {
|
||||
deleteBtn.style.display = 'none';
|
||||
}
|
||||
|
||||
// --- Configuración de Etiquetas y Máximo ---
|
||||
|
||||
if (progressLabel) {
|
||||
if (entryType === 'MANGA') {
|
||||
progressLabel.textContent = 'Chapters Read';
|
||||
@@ -200,11 +184,8 @@ function closeAddToListModal() {
|
||||
document.getElementById('add-list-modal').classList.remove('active');
|
||||
}
|
||||
|
||||
/**
|
||||
* REFACTORIZADO para guardar TODOS los campos del modal.
|
||||
*/
|
||||
async function saveToList() {
|
||||
// Datos comunes
|
||||
|
||||
const uiStatus = document.getElementById('entry-status').value;
|
||||
|
||||
const anilistStatusMap = {
|
||||
@@ -221,14 +202,12 @@ async function saveToList() {
|
||||
const scoreValue = document.getElementById('entry-score').value;
|
||||
const score = scoreValue ? parseFloat(scoreValue) : null;
|
||||
|
||||
// Nuevos datos
|
||||
const start_date = document.getElementById('entry-start-date').value || null;
|
||||
const end_date = document.getElementById('entry-end-date').value || null;
|
||||
const repeat_count = parseInt(document.getElementById('entry-repeat-count').value) || 0;
|
||||
const notes = document.getElementById('entry-notes').value || null;
|
||||
const is_private = document.getElementById('entry-is-private').checked;
|
||||
|
||||
|
||||
if (!currentBookData) {
|
||||
showNotification('Cannot save: Book data not loaded.', 'error');
|
||||
return;
|
||||
@@ -248,7 +227,7 @@ async function saveToList() {
|
||||
status: status,
|
||||
progress: progress,
|
||||
score: score,
|
||||
// Nuevos campos
|
||||
|
||||
start_date: start_date,
|
||||
end_date: end_date,
|
||||
repeat_count: repeat_count,
|
||||
@@ -264,7 +243,8 @@ async function saveToList() {
|
||||
const data = await response.json();
|
||||
|
||||
isInList = true;
|
||||
currentListEntry = data.entry; // Usar la respuesta del servidor si está disponible
|
||||
currentListEntry = data.entry;
|
||||
|
||||
updateAddToListButton();
|
||||
closeAddToListModal();
|
||||
showNotification(isInList ? 'Updated successfully!' : 'Added to your library!', 'success');
|
||||
@@ -274,16 +254,15 @@ async function saveToList() {
|
||||
}
|
||||
}
|
||||
|
||||
// CORRECCIÓN: Usar el endpoint /list/entry/{id} con los parámetros correctos.
|
||||
async function deleteFromList() {
|
||||
if (!confirm('Remove this book from your library?')) return;
|
||||
|
||||
const idToDelete = extensionName ? bookSlug : bookId;
|
||||
const source = extensionName || 'anilist';
|
||||
const entryType = getBookEntryType(currentBookData); // Obtener el tipo de entrada
|
||||
const entryType = getBookEntryType(currentBookData);
|
||||
|
||||
try {
|
||||
// URL CORRECTA para DELETE: /list/entry/{id}?source={source}&entry_type={entryType}
|
||||
|
||||
const response = await fetch(`${API_BASE}/list/entry/${idToDelete}?source=${source}&entry_type=${entryType}`, {
|
||||
method: 'DELETE',
|
||||
headers: getSimpleAuthHeaders()
|
||||
@@ -611,7 +590,7 @@ function openReader(bookId, chapterId, provider) {
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// El ID del modal sigue siendo 'add-list-modal' para mantener la compatibilidad con el código original.
|
||||
|
||||
const modal = document.getElementById('add-list-modal');
|
||||
if (modal) {
|
||||
modal.addEventListener('click', (e) => {
|
||||
|
||||
@@ -3,6 +3,14 @@ let currentHeroIndex = 0;
|
||||
let heroInterval;
|
||||
let availableExtensions = [];
|
||||
|
||||
let currentBookData = null;
|
||||
|
||||
let isInList = false;
|
||||
let currentListEntry = null;
|
||||
let totalUnits = 0;
|
||||
|
||||
const API_BASE = '/api';
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const nav = document.getElementById('navbar');
|
||||
if (window.scrollY > 50) nav.classList.add('scrolled');
|
||||
@@ -100,6 +108,7 @@ function renderSearchResults(results) {
|
||||
item.className = 'search-item';
|
||||
let href;
|
||||
if (book.isExtensionResult) {
|
||||
|
||||
href = `/book/${book.extensionName}/${book.id}`;
|
||||
} else {
|
||||
href = `/book/${book.id}`;
|
||||
@@ -173,8 +182,310 @@ function startHeroCycle() {
|
||||
}, 8000);
|
||||
}
|
||||
|
||||
function getAuthToken() {
|
||||
return localStorage.getItem('token');
|
||||
}
|
||||
|
||||
function getAuthHeaders() {
|
||||
const token = getAuthToken();
|
||||
return {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
};
|
||||
}
|
||||
|
||||
function getSimpleAuthHeaders() {
|
||||
const token = localStorage.getItem('token');
|
||||
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';
|
||||
}
|
||||
|
||||
function showNotification(message, type = 'info') {
|
||||
const notification = document.createElement('div');
|
||||
notification.style.cssText = `
|
||||
position: fixed;
|
||||
top: 100px;
|
||||
right: 20px;
|
||||
background: ${type === 'success' ? '#22c55e' : type === 'error' ? '#ef4444' : '#8b5cf6'};
|
||||
color: white;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
||||
z-index: 9999;
|
||||
font-weight: 600;
|
||||
animation: slideInRight 0.3s ease;
|
||||
`;
|
||||
notification.textContent = message;
|
||||
document.body.appendChild(notification);
|
||||
|
||||
setTimeout(() => {
|
||||
notification.style.animation = 'slideOutRight 0.3s ease';
|
||||
setTimeout(() => notification.remove(), 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes slideInRight {
|
||||
from { transform: translateX(400px); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
@keyframes slideOutRight {
|
||||
from { transform: translateX(0); opacity: 1; }
|
||||
to { transform: translateX(400px); opacity: 0; }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
async function checkIfInList(bookId) {
|
||||
if (!currentBookData) return false;
|
||||
|
||||
const entryId = bookId;
|
||||
const source = 'anilist';
|
||||
const entryType = getBookEntryType(currentBookData);
|
||||
|
||||
const fetchUrl = `${API_BASE}/list/entry/${entryId}?source=${source}&entry_type=${entryType}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(fetchUrl, {
|
||||
headers: getSimpleAuthHeaders()
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
|
||||
if (data.found && data.entry) {
|
||||
isInList = true;
|
||||
currentListEntry = data.entry;
|
||||
} else {
|
||||
isInList = false;
|
||||
currentListEntry = null;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
} catch (error) {
|
||||
console.error('Error checking single list entry:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function updateAddToListButton() {
|
||||
const btn = document.querySelector('.hero-buttons .btn-blur');
|
||||
if (!btn) return;
|
||||
|
||||
if (isInList) {
|
||||
btn.innerHTML = `
|
||||
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
|
||||
</svg>
|
||||
In Your Library
|
||||
`;
|
||||
btn.style.background = 'rgba(34, 197, 94, 0.2)';
|
||||
btn.style.color = '#22c55e';
|
||||
btn.style.borderColor = 'rgba(34, 197, 94, 0.3)';
|
||||
btn.onclick = openAddToListModal;
|
||||
|
||||
} else {
|
||||
btn.innerHTML = '+ Add to Library';
|
||||
btn.style.background = null;
|
||||
btn.style.color = null;
|
||||
btn.style.borderColor = null;
|
||||
btn.onclick = openAddToListModal;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
async function openAddToListModal() {
|
||||
if (!getAuthToken()) {
|
||||
showNotification('Please log in to manage your library.', 'error');
|
||||
return;
|
||||
}
|
||||
if (!currentBookData) return;
|
||||
|
||||
await checkIfInList(currentBookData.id);
|
||||
|
||||
const totalUnits = currentBookData.chapters || currentBookData.volumes || 999;
|
||||
const entryType = getBookEntryType(currentBookData);
|
||||
|
||||
const modalTitle = document.getElementById('modal-title');
|
||||
const deleteBtn = document.getElementById('modal-delete-btn');
|
||||
const progressLabel = document.getElementById('progress-label');
|
||||
|
||||
let actualProgressLabel = progressLabel;
|
||||
if (!actualProgressLabel) {
|
||||
|
||||
const progressInput = document.getElementById('entry-progress');
|
||||
if (progressInput) actualProgressLabel = progressInput.previousElementSibling;
|
||||
}
|
||||
|
||||
if (isInList && currentListEntry) {
|
||||
document.getElementById('entry-status').value = currentListEntry.status || 'PLANNING';
|
||||
document.getElementById('entry-progress').value = currentListEntry.progress || 0;
|
||||
document.getElementById('entry-score').value = currentListEntry.score || '';
|
||||
|
||||
document.getElementById('entry-start-date').value = currentListEntry.start_date ? currentListEntry.start_date.split('T')[0] : '';
|
||||
document.getElementById('entry-end-date').value = currentListEntry.end_date ? currentListEntry.end_date.split('T')[0] : '';
|
||||
document.getElementById('entry-repeat-count').value = currentListEntry.repeat_count || 0;
|
||||
document.getElementById('entry-notes').value = currentListEntry.notes || '';
|
||||
document.getElementById('entry-is-private').checked = currentListEntry.is_private === true || currentListEntry.is_private === 1;
|
||||
|
||||
modalTitle.textContent = 'Edit Library Entry';
|
||||
deleteBtn.style.display = 'block';
|
||||
} else {
|
||||
document.getElementById('entry-status').value = 'PLANNING';
|
||||
document.getElementById('entry-progress').value = 0;
|
||||
document.getElementById('entry-score').value = '';
|
||||
document.getElementById('entry-start-date').value = '';
|
||||
document.getElementById('entry-end-date').value = '';
|
||||
document.getElementById('entry-repeat-count').value = 0;
|
||||
document.getElementById('entry-notes').value = '';
|
||||
document.getElementById('entry-is-private').checked = false;
|
||||
|
||||
modalTitle.textContent = 'Add to Library';
|
||||
deleteBtn.style.display = 'none';
|
||||
}
|
||||
|
||||
if (actualProgressLabel) {
|
||||
if (entryType === 'MANGA') {
|
||||
actualProgressLabel.textContent = 'Chapters Read';
|
||||
} else {
|
||||
actualProgressLabel.textContent = 'Volumes/Parts Read';
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('entry-progress').max = totalUnits;
|
||||
document.getElementById('add-list-modal').classList.add('active');
|
||||
}
|
||||
|
||||
function closeAddToListModal() {
|
||||
document.getElementById('add-list-modal').classList.remove('active');
|
||||
}
|
||||
|
||||
async function saveToList() {
|
||||
const uiStatus = document.getElementById('entry-status').value;
|
||||
|
||||
const anilistStatusMap = {
|
||||
CURRENT: 'CURRENT',
|
||||
COMPLETED: 'COMPLETED',
|
||||
PLANNING: 'PLANNING',
|
||||
PAUSED: 'PAUSED',
|
||||
DROPPED: 'DROPPED',
|
||||
REPEATING: 'REPEATING'
|
||||
};
|
||||
|
||||
const status = anilistStatusMap[uiStatus] || uiStatus;
|
||||
|
||||
const progress = parseInt(document.getElementById('entry-progress').value) || 0;
|
||||
const scoreValue = document.getElementById('entry-score').value;
|
||||
const score = scoreValue ? parseFloat(scoreValue) : null;
|
||||
|
||||
const start_date = document.getElementById('entry-start-date').value || null;
|
||||
const end_date = document.getElementById('entry-end-date').value || null;
|
||||
const repeat_count = parseInt(document.getElementById('entry-repeat-count').value) || 0;
|
||||
const notes = document.getElementById('entry-notes').value || null;
|
||||
const is_private = document.getElementById('entry-is-private').checked;
|
||||
|
||||
if (!currentBookData) {
|
||||
showNotification('Cannot save: Book data not loaded.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const entryType = getBookEntryType(currentBookData);
|
||||
const idToSave = currentBookData.id;
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/list/entry`, {
|
||||
method: 'POST',
|
||||
headers: getAuthHeaders(),
|
||||
body: JSON.stringify({
|
||||
entry_id: idToSave,
|
||||
source: 'anilist',
|
||||
|
||||
entry_type: entryType,
|
||||
status: status,
|
||||
progress: progress,
|
||||
score: score,
|
||||
start_date: start_date,
|
||||
end_date: end_date,
|
||||
repeat_count: repeat_count,
|
||||
notes: notes,
|
||||
is_private: is_private
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to save entry');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
isInList = true;
|
||||
currentListEntry = data.entry;
|
||||
updateAddToListButton();
|
||||
closeAddToListModal();
|
||||
showNotification(isInList ? 'Updated successfully!' : 'Added to your library!', 'success');
|
||||
} catch (error) {
|
||||
console.error('Error saving to list:', error);
|
||||
showNotification('Failed to save. Please try again.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteFromList() {
|
||||
if (!confirm('Remove this book from your library?')) return;
|
||||
|
||||
const idToDelete = currentBookData ? currentBookData.id : null;
|
||||
if (!idToDelete) return;
|
||||
|
||||
const source = 'anilist';
|
||||
const entryType = getBookEntryType(currentBookData);
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/list/entry/${idToDelete}?source=${source}&entry_type=${entryType}`, {
|
||||
method: 'DELETE',
|
||||
headers: getSimpleAuthHeaders()
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to delete entry');
|
||||
}
|
||||
|
||||
isInList = false;
|
||||
currentListEntry = null;
|
||||
updateAddToListButton();
|
||||
closeAddToListModal();
|
||||
showNotification('Removed from your library', 'success');
|
||||
} catch (error) {
|
||||
console.error('Error deleting from list:', error);
|
||||
showNotification('Failed to remove. Please try again.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const modal = document.getElementById('add-list-modal');
|
||||
if (modal) {
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target.id === 'add-list-modal') {
|
||||
closeAddToListModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function updateHeroUI(book) {
|
||||
if(!book) return;
|
||||
|
||||
currentBookData = book;
|
||||
totalUnits = book.chapters || book.volumes || 999;
|
||||
|
||||
const title = book.title.english || book.title.romaji;
|
||||
const desc = book.description || "No description available.";
|
||||
const poster = (book.coverImage && (book.coverImage.extraLarge || book.coverImage.large)) || '';
|
||||
@@ -194,9 +505,19 @@ function updateHeroUI(book) {
|
||||
|
||||
const readBtn = document.getElementById('read-btn');
|
||||
if (readBtn) {
|
||||
|
||||
readBtn.onclick = () => window.location.href = `/book/${book.id}`;
|
||||
}
|
||||
|
||||
const addToListBtn = document.querySelector('.hero-buttons .btn-blur');
|
||||
if(addToListBtn) {
|
||||
|
||||
addToListBtn.onclick = openAddToListModal;
|
||||
|
||||
checkIfInList(book.id).then(() => {
|
||||
updateAddToListButton();
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
async function loadContinueReading() {
|
||||
@@ -234,7 +555,6 @@ function renderContinueReading(id, list) {
|
||||
return;
|
||||
}
|
||||
|
||||
// ordenar por updated_at DESC
|
||||
list.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
|
||||
|
||||
list.forEach(item => {
|
||||
@@ -251,7 +571,6 @@ function renderContinueReading(id, list) {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const progressText = item.total_episodes
|
||||
? `${item.progress || 0}/${item.total_episodes}`
|
||||
: `${item.progress || 0}`;
|
||||
@@ -270,7 +589,6 @@ function renderContinueReading(id, list) {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function renderList(id, list) {
|
||||
const container = document.getElementById(id);
|
||||
container.innerHTML = '';
|
||||
|
||||
@@ -203,7 +203,6 @@ function loadManga(pages) {
|
||||
isLongStrip = true;
|
||||
}
|
||||
|
||||
|
||||
const useDouble = config.manga.mode === 'double' ||
|
||||
(config.manga.mode === 'auto' && !isLongStrip && shouldUseDoublePage(pages));
|
||||
|
||||
@@ -478,7 +477,6 @@ prevBtn.addEventListener('click', () => {
|
||||
loadChapter();
|
||||
});
|
||||
|
||||
|
||||
nextBtn.addEventListener('click', () => {
|
||||
const newChapter = String(parseInt(chapter) + 1);
|
||||
updateURL(newChapter);
|
||||
@@ -636,8 +634,10 @@ function setupProgressTracking(data, source) {
|
||||
entry_type: data.type === 'manga' ? 'MANGA' : 'NOVEL',
|
||||
status: 'CURRENT',
|
||||
progress: source === 'anilist'
|
||||
? Math.floor(chapterNumber) // ✅ AniList solo enteros
|
||||
: chapterNumber // ✅ Local acepta decimales
|
||||
? Math.floor(chapterNumber)
|
||||
|
||||
: chapterNumber
|
||||
|
||||
};
|
||||
|
||||
try {
|
||||
@@ -654,7 +654,6 @@ function setupProgressTracking(data, source) {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function checkProgress() {
|
||||
const scrollTop = window.scrollY;
|
||||
const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
|
||||
@@ -673,12 +672,10 @@ function setupProgressTracking(data, source) {
|
||||
}
|
||||
}
|
||||
|
||||
// remove previous listener just in case
|
||||
window.removeEventListener('scroll', checkProgress);
|
||||
window.addEventListener('scroll', checkProgress);
|
||||
}
|
||||
|
||||
|
||||
if (!bookId || !chapter || !provider) {
|
||||
reader.innerHTML = `
|
||||
<div class="loading-container">
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
<link rel="stylesheet" href="/views/css/globals.css">
|
||||
<link rel="stylesheet" href="/views/css/components/navbar.css">
|
||||
<link rel="stylesheet" href="/views/css/components/hero.css">
|
||||
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
|
||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||
@@ -41,7 +42,6 @@
|
||||
<button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
|
||||
</div>
|
||||
|
||||
<!-- Mejorado el contenedor de usuario con dropdown más completo -->
|
||||
<div class="nav-right">
|
||||
<div class="search-wrapper">
|
||||
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
@@ -123,6 +123,73 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="add-list-modal">
|
||||
<div class="modal-content modal-list">
|
||||
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
|
||||
<h2 class="modal-title" id="modal-title">Add to List</h2>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="modal-fields-grid">
|
||||
|
||||
<div class="form-group">
|
||||
<label>Status</label>
|
||||
<select id="entry-status" class="form-input">
|
||||
<option value="WATCHING">Watching</option>
|
||||
<option value="COMPLETED">Completed</option>
|
||||
<option value="PLANNING">Plan to Watch</option>
|
||||
<option value="PAUSED">Paused</option>
|
||||
<option value="DROPPED">Dropped</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Episodes Watched</label>
|
||||
<input type="number" id="entry-progress" class="form-input" min="0" placeholder="0">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Your Score (0-10)</label>
|
||||
<input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
|
||||
</div>
|
||||
|
||||
<div class="form-group full-width">
|
||||
<div class="date-group">
|
||||
<div class="date-input-pair">
|
||||
<label for="entry-start-date">Start Date</label>
|
||||
<input type="date" id="entry-start-date" class="form-input">
|
||||
</div>
|
||||
<div class="date-input-pair">
|
||||
<label for="entry-end-date">End Date</label>
|
||||
<input type="date" id="entry-end-date" class="form-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="entry-repeat-count">Rewatch Count</label>
|
||||
<input type="number" id="entry-repeat-count" class="form-input" min="0">
|
||||
</div>
|
||||
|
||||
<div class="form-group notes-group">
|
||||
<label for="entry-notes">Notes</label>
|
||||
<textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group checkbox-group">
|
||||
<input type="checkbox" id="entry-is-private" class="form-checkbox">
|
||||
<label for="entry-is-private">Mark as Private</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
|
||||
<button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
|
||||
<button class="btn-primary" onclick="saveToList()">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main>
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
<link rel="stylesheet" href="/views/css/components/navbar.css">
|
||||
<link rel="stylesheet" href="/views/css/components/hero.css">
|
||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
||||
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
|
||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||
<script src="/src/scripts/titlebar.js"></script>
|
||||
@@ -111,6 +112,71 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="add-list-modal">
|
||||
<div class="modal-content modal-list">
|
||||
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
|
||||
<h2 class="modal-title" id="modal-title">Add to Library</h2>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="modal-fields-grid">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="entry-status">Status</label>
|
||||
<select id="entry-status" class="form-input">
|
||||
<option value="CURRENT">Reading</option>
|
||||
<option value="COMPLETED">Completed</option>
|
||||
<option value="PLANNING">Plan to Read</option>
|
||||
<option value="PAUSED">Paused</option>
|
||||
<option value="DROPPED">Dropped</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="entry-progress" id="progress-label">Chapters Read</label>
|
||||
<input type="number" id="entry-progress" class="form-input" min="0" max="0" placeholder="0">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="entry-score">Score (0-10)</label>
|
||||
<input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
|
||||
</div>
|
||||
|
||||
<div class="form-group full-width date-group">
|
||||
<div class="date-input-pair">
|
||||
<label for="entry-start-date">Start Date</label>
|
||||
<input type="date" id="entry-start-date" class="form-input">
|
||||
</div>
|
||||
<div class="date-input-pair">
|
||||
<label for="entry-end-date">End Date</label>
|
||||
<input type="date" id="entry-end-date" class="form-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="entry-repeat-count">Re-read Count</label>
|
||||
<input type="number" id="entry-repeat-count" class="form-input" min="0">
|
||||
</div>
|
||||
|
||||
<div class="form-group notes-group">
|
||||
<label for="entry-notes">Notes</label>
|
||||
<textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group checkbox-group">
|
||||
<input type="checkbox" id="entry-is-private" class="form-checkbox">
|
||||
<label for="entry-is-private">Mark as Private</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
|
||||
<button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
|
||||
<button class="btn-primary" onclick="saveToList()">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main>
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--bg-amoled);
|
||||
background: var(--color-bg-amoled);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: var(--radius-lg);
|
||||
max-width: 900px;
|
||||
@@ -56,8 +56,8 @@
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
background: var(--danger);
|
||||
border-color: var(--danger);
|
||||
background: var(--color-danger);
|
||||
border-color: var(--color-danger);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@@ -65,7 +65,7 @@
|
||||
font-weight: 800;
|
||||
padding: 1.5rem 2rem 0.5rem;
|
||||
margin-bottom: 0;
|
||||
color: var(--text-primary);
|
||||
color: var(--color-text-primary);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
@@ -77,7 +77,6 @@
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* GRUPO PRINCIPAL DE CAMPOS */
|
||||
.modal-fields-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
@@ -91,7 +90,6 @@
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Column Span Overrides */
|
||||
.form-group.notes-group {
|
||||
grid-column: 1 / span 2;
|
||||
}
|
||||
@@ -104,19 +102,18 @@
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
|
||||
.form-group label {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-secondary);
|
||||
color: var(--color-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
background: var(--bg-field);
|
||||
background: var(--color-bg-field);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: var(--text-primary);
|
||||
color: var(--color-text-primary);
|
||||
padding: 0.8rem 1rem;
|
||||
border-radius: 8px;
|
||||
font-family: inherit;
|
||||
@@ -126,8 +123,8 @@
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 10px var(--accent-glow);
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 10px var(--color-primary-glow);
|
||||
}
|
||||
|
||||
.notes-textarea {
|
||||
@@ -140,7 +137,6 @@
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* CLAVE: Hace que la etiqueta de fecha esté encima del input */
|
||||
.date-input-pair {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
@@ -159,7 +155,7 @@
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
background: var(--bg-base);
|
||||
background: var(--color-bg-base);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
@@ -170,8 +166,8 @@
|
||||
}
|
||||
|
||||
.form-checkbox:checked {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.form-checkbox:checked::after {
|
||||
@@ -184,7 +180,6 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ACCIONES (Barra inferior pegajosa) */
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
@@ -193,7 +188,7 @@
|
||||
flex-shrink: 0;
|
||||
padding: 1rem 2rem;
|
||||
border-top: 1px solid rgba(255,255,255,0.05);
|
||||
background: var(--bg-amoled);
|
||||
background: var(--color-bg-amoled);
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
@@ -211,7 +206,7 @@
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@@ -230,7 +225,7 @@
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--danger);
|
||||
background: var(--color-danger);
|
||||
color: white;
|
||||
margin-right: auto;
|
||||
}
|
||||
@@ -248,7 +243,6 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* --- Media Queries (Responsive) --- */
|
||||
@media (max-width: 900px) {
|
||||
.modal-content {
|
||||
max-width: 95%;
|
||||
@@ -271,3 +265,4 @@
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -97,7 +97,7 @@
|
||||
<div id="item-main-content" class="item-content"></div>
|
||||
|
||||
<div id="similar-section" class="similar-section">
|
||||
<p style="text-align:center;color:var(--text-secondary);opacity:0.7;padding:3rem 0;">Loading similar images...</p>
|
||||
<p style="text-align:center;color:var(--color-text-secondary);opacity:0.7;padding:3rem 0;">Loading similar images...</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user