full enhance of anime page and player.
This commit is contained in:
@@ -45,10 +45,14 @@ const MEDIA_FIELDS = `
|
||||
relationType
|
||||
node {
|
||||
id
|
||||
title { romaji }
|
||||
title { romaji english }
|
||||
type
|
||||
format
|
||||
status
|
||||
coverImage { medium large color }
|
||||
bannerImage
|
||||
season
|
||||
seasonYear
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -70,12 +74,28 @@ const MEDIA_FIELDS = `
|
||||
mediaRecommendation {
|
||||
id
|
||||
title { romaji }
|
||||
coverImage { medium }
|
||||
coverImage { medium large}
|
||||
format
|
||||
type
|
||||
}
|
||||
}
|
||||
}
|
||||
characters(perPage: 12, sort: [ROLE, RELEVANCE]) {
|
||||
edges {
|
||||
role
|
||||
node {
|
||||
id
|
||||
name { full native }
|
||||
image { medium large }
|
||||
}
|
||||
voiceActors {
|
||||
id
|
||||
name { full }
|
||||
language
|
||||
image { medium }
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export async function refreshTrendingAnime(): Promise<void> {
|
||||
@@ -140,7 +160,19 @@ async function fetchAniList(query: string, variables: any) {
|
||||
export async function getAnimeById(id: string | number): Promise<Anime | { error: string }> {
|
||||
const row = await queryOne("SELECT full_data FROM anime WHERE id = ?", [id]);
|
||||
|
||||
if (row) return JSON.parse(row.full_data);
|
||||
if (row) {
|
||||
const cached = JSON.parse(row.full_data);
|
||||
|
||||
if (cached?.characters?.edges?.length) {
|
||||
return cached;
|
||||
}
|
||||
|
||||
await queryOne(
|
||||
"DELETE FROM anime WHERE id = ?",
|
||||
[id]
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const query = `
|
||||
query ($id: Int) {
|
||||
|
||||
@@ -1,327 +0,0 @@
|
||||
let animeData = null;
|
||||
let extensionName = null;
|
||||
let animeId = null;
|
||||
let isLocal = false;
|
||||
|
||||
const episodePagination = Object.create(PaginationManager);
|
||||
episodePagination.init(12, renderEpisodes);
|
||||
|
||||
YouTubePlayerUtils.init('player');
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadAnime();
|
||||
setupDescriptionModal();
|
||||
setupEpisodeSearch();
|
||||
});
|
||||
|
||||
function markAsLocal() {
|
||||
isLocal = true;
|
||||
const pill = document.getElementById('local-pill');
|
||||
if (!pill) return;
|
||||
|
||||
pill.textContent = 'Local';
|
||||
pill.style.display = 'inline-flex';
|
||||
pill.style.background = 'rgba(34,197,94,.2)';
|
||||
pill.style.color = '#22c55e';
|
||||
pill.style.borderColor = 'rgba(34,197,94,.3)';
|
||||
}
|
||||
|
||||
async function checkLocalLibraryEntry() {
|
||||
try {
|
||||
const res = await fetch(`/api/library/anime/${animeId}`);
|
||||
if (!res.ok) return;
|
||||
|
||||
markAsLocal();
|
||||
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async function loadAnime() {
|
||||
try {
|
||||
|
||||
const urlData = URLUtils.parseEntityPath('anime');
|
||||
if (!urlData) {
|
||||
showError("Invalid URL");
|
||||
return;
|
||||
}
|
||||
|
||||
extensionName = urlData.extensionName;
|
||||
animeId = urlData.entityId;
|
||||
await checkLocalLibraryEntry();
|
||||
|
||||
const fetchUrl = extensionName
|
||||
? `/api/anime/${animeId}?source=${extensionName}`
|
||||
: `/api/anime/${animeId}?source=anilist`;
|
||||
|
||||
const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() });
|
||||
const data = await res.json();
|
||||
|
||||
if (data.error) {
|
||||
showError("Anime Not Found");
|
||||
return;
|
||||
}
|
||||
|
||||
animeData = data;
|
||||
animeData.entry_type = 'ANIME';
|
||||
const metadata = MediaMetadataUtils.formatAnimeData(data, !!extensionName);
|
||||
|
||||
updatePageTitle(metadata.title);
|
||||
updateMetadata(metadata);
|
||||
updateDescription(data.description || data.summary);
|
||||
updateCharacters(metadata.characters);
|
||||
updateExtensionPill();
|
||||
|
||||
setupWatchButton();
|
||||
|
||||
const hasTrailer = YouTubePlayerUtils.playTrailer(
|
||||
metadata.trailer,
|
||||
'player',
|
||||
metadata.banner
|
||||
);
|
||||
|
||||
setupEpisodes(metadata.episodes);
|
||||
|
||||
await setupAddToListButton();
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error loading anime:', err);
|
||||
showError("Error loading anime");
|
||||
}
|
||||
}
|
||||
|
||||
function updatePageTitle(title) {
|
||||
document.title = `${title} | WaifuBoard`;
|
||||
document.getElementById('title').innerText = title;
|
||||
}
|
||||
|
||||
function updateMetadata(metadata) {
|
||||
|
||||
if (metadata.poster) {
|
||||
document.getElementById('poster').src = metadata.poster;
|
||||
}
|
||||
|
||||
document.getElementById('score').innerText = `${metadata.score}% Score`;
|
||||
|
||||
document.getElementById('year').innerText = metadata.year;
|
||||
|
||||
document.getElementById('genres').innerText = metadata.genres;
|
||||
|
||||
document.getElementById('format').innerText = metadata.format;
|
||||
|
||||
document.getElementById('status').innerText = metadata.status;
|
||||
|
||||
document.getElementById('season').innerText = metadata.season;
|
||||
|
||||
document.getElementById('studio').innerText = metadata.studio;
|
||||
|
||||
document.getElementById('episodes').innerText = metadata.episodes;
|
||||
}
|
||||
|
||||
function updateDescription(rawDescription) {
|
||||
const desc = MediaMetadataUtils.truncateDescription(rawDescription, 4);
|
||||
|
||||
document.getElementById('description-preview').innerHTML = desc.short;
|
||||
document.getElementById('full-description').innerHTML = desc.full;
|
||||
|
||||
const readMoreBtn = document.getElementById('read-more-btn');
|
||||
if (desc.isTruncated) {
|
||||
readMoreBtn.style.display = 'inline-flex';
|
||||
} else {
|
||||
readMoreBtn.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function updateCharacters(characters) {
|
||||
const container = document.getElementById('char-list');
|
||||
container.innerHTML = '';
|
||||
|
||||
if (characters.length > 0) {
|
||||
characters.forEach(char => {
|
||||
container.innerHTML += `
|
||||
<div class="character-item">
|
||||
<div class="char-dot"></div> ${char.name}
|
||||
</div>`;
|
||||
});
|
||||
} else {
|
||||
container.innerHTML = `
|
||||
<div class="character-item" style="color: #666;">
|
||||
No character data available
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function updateExtensionPill() {
|
||||
const pill = document.getElementById('extension-pill');
|
||||
if (!pill) return;
|
||||
|
||||
if (extensionName) {
|
||||
pill.textContent = extensionName.charAt(0).toUpperCase() + extensionName.slice(1).toLowerCase();
|
||||
pill.style.display = 'inline-flex';
|
||||
} else {
|
||||
pill.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function setupWatchButton() {
|
||||
const watchBtn = document.getElementById('watch-btn');
|
||||
if (watchBtn) {
|
||||
watchBtn.onclick = () => {
|
||||
const source = isLocal ? 'local' : (extensionName || 'anilist');
|
||||
window.location.href = URLUtils.buildWatchUrl(animeId, num, source);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
async function setupAddToListButton() {
|
||||
const btn = document.getElementById('add-to-list-btn');
|
||||
if (!btn || !animeData) return;
|
||||
|
||||
ListModalManager.currentData = animeData;
|
||||
const entryType = ListModalManager.getEntryType(animeData);
|
||||
|
||||
await ListModalManager.checkIfInList(animeId, extensionName || 'anilist', entryType);
|
||||
|
||||
const tempBtn = document.querySelector('.hero-buttons .btn-blur');
|
||||
if (tempBtn) {
|
||||
ListModalManager.updateButton('.hero-buttons .btn-blur');
|
||||
} else {
|
||||
|
||||
updateCustomAddButton();
|
||||
}
|
||||
|
||||
btn.onclick = () => ListModalManager.open(animeData, extensionName || 'anilist');
|
||||
}
|
||||
|
||||
function updateCustomAddButton() {
|
||||
const btn = document.getElementById('add-to-list-btn');
|
||||
if (!btn) return;
|
||||
|
||||
if (ListModalManager.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;
|
||||
}
|
||||
}
|
||||
|
||||
function setupEpisodes(totalEpisodes) {
|
||||
|
||||
const limitedTotal = Math.min(Math.max(totalEpisodes, 1), 5000);
|
||||
|
||||
episodePagination.setTotalItems(limitedTotal);
|
||||
renderEpisodes();
|
||||
}
|
||||
|
||||
function renderEpisodes() {
|
||||
const grid = document.getElementById('episodes-grid');
|
||||
if (!grid) return;
|
||||
|
||||
grid.innerHTML = '';
|
||||
|
||||
const range = episodePagination.getPageRange();
|
||||
const start = range.start + 1;
|
||||
|
||||
const end = range.end;
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
createEpisodeButton(i, grid);
|
||||
}
|
||||
|
||||
episodePagination.renderControls(
|
||||
'pagination-controls',
|
||||
'page-info',
|
||||
'prev-page',
|
||||
'next-page'
|
||||
);
|
||||
}
|
||||
|
||||
function createEpisodeButton(num, container) {
|
||||
const btn = document.createElement('div');
|
||||
btn.className = 'episode-btn';
|
||||
btn.innerText = `Ep ${num}`;
|
||||
btn.onclick = () => {
|
||||
const source = isLocal ? 'local' : (extensionName || 'anilist');
|
||||
window.location.href = URLUtils.buildWatchUrl(animeId, num, source);
|
||||
};
|
||||
container.appendChild(btn);
|
||||
}
|
||||
|
||||
function setupDescriptionModal() {
|
||||
const modal = document.getElementById('desc-modal');
|
||||
if (!modal) return;
|
||||
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target.id === 'desc-modal') {
|
||||
closeDescriptionModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openDescriptionModal() {
|
||||
document.getElementById('desc-modal').classList.add('active');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeDescriptionModal() {
|
||||
document.getElementById('desc-modal').classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
function setupEpisodeSearch() {
|
||||
const searchInput = document.getElementById('ep-search');
|
||||
if (!searchInput) return;
|
||||
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
const val = parseInt(e.target.value);
|
||||
const grid = document.getElementById('episodes-grid');
|
||||
const totalEpisodes = episodePagination.totalItems;
|
||||
|
||||
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';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
document.getElementById('title').innerText = message;
|
||||
}
|
||||
|
||||
function saveToList() {
|
||||
if (!animeId) return;
|
||||
ListModalManager.save(animeId, extensionName || 'anilist');
|
||||
}
|
||||
|
||||
function deleteFromList() {
|
||||
if (!animeId) return;
|
||||
ListModalManager.delete(animeId, extensionName || 'anilist');
|
||||
}
|
||||
|
||||
function closeAddToListModal() {
|
||||
ListModalManager.close();
|
||||
}
|
||||
|
||||
window.openDescriptionModal = openDescriptionModal;
|
||||
window.closeDescriptionModal = closeDescriptionModal;
|
||||
window.changePage = (delta) => {
|
||||
if (delta > 0) episodePagination.nextPage();
|
||||
else episodePagination.prevPage();
|
||||
};
|
||||
408
desktop/src/scripts/anime/entry.js
Normal file
408
desktop/src/scripts/anime/entry.js
Normal file
@@ -0,0 +1,408 @@
|
||||
let animeData = null;
|
||||
let extensionName = null;
|
||||
|
||||
let animeId = null;
|
||||
let isLocal = false;
|
||||
|
||||
const episodePagination = Object.create(PaginationManager);
|
||||
episodePagination.init(50, renderEpisodes);
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadAnimeData();
|
||||
setupDescriptionModal();
|
||||
setupEpisodeSearch();
|
||||
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const initialEp = urlParams.get('episode');
|
||||
|
||||
if (initialEp) {
|
||||
setTimeout(() => {
|
||||
if (animeData) {
|
||||
|
||||
const source = isLocal ? 'local' : (extensionName || 'anilist');
|
||||
|
||||
if (typeof AnimePlayer !== 'undefined') {
|
||||
AnimePlayer.init(animeId, source, isLocal, animeData);
|
||||
AnimePlayer.playEpisode(parseInt(initialEp));
|
||||
}
|
||||
}
|
||||
}, 800);
|
||||
}
|
||||
});
|
||||
|
||||
async function loadAnimeData() {
|
||||
try {
|
||||
|
||||
const pathParts = window.location.pathname.split('/');
|
||||
|
||||
const cleanParts = pathParts.filter(p => p.length > 0);
|
||||
|
||||
if (cleanParts.length >= 3 && cleanParts[0] === 'anime') {
|
||||
|
||||
extensionName = cleanParts[1];
|
||||
animeId = cleanParts[2];
|
||||
} else if (cleanParts.length === 2 && cleanParts[0] === 'anime') {
|
||||
|
||||
extensionName = null;
|
||||
|
||||
animeId = cleanParts[1];
|
||||
} else {
|
||||
showError("Invalid URL Format");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const localRes = await fetch(`/api/library/anime/${animeId}`);
|
||||
if (localRes.ok) isLocal = true;
|
||||
} catch {}
|
||||
|
||||
const fetchUrl = extensionName
|
||||
? `/api/anime/${animeId}?source=${extensionName}`
|
||||
: `/api/anime/${animeId}?source=anilist`;
|
||||
|
||||
const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() });
|
||||
const data = await res.json();
|
||||
|
||||
if (data.error) {
|
||||
showError("Anime Not Found");
|
||||
return;
|
||||
}
|
||||
|
||||
animeData = data;
|
||||
animeData.entry_type = 'ANIME';
|
||||
|
||||
const metadata = MediaMetadataUtils.formatAnimeData(data, !!extensionName);
|
||||
|
||||
document.title = `${metadata.title} | WaifuBoard`;
|
||||
document.getElementById('title').innerText = metadata.title;
|
||||
if (metadata.poster) document.getElementById('poster').src = metadata.poster;
|
||||
|
||||
document.getElementById('score').innerText = `${metadata.score}% Score`;
|
||||
document.getElementById('year').innerText = metadata.year;
|
||||
document.getElementById('genres').innerText = metadata.genres.split(',').join(' • ');
|
||||
document.getElementById('format').innerText = metadata.format;
|
||||
document.getElementById('status').innerText = metadata.status;
|
||||
document.getElementById('season').innerText = metadata.season;
|
||||
document.getElementById('studio').innerText = metadata.studio;
|
||||
document.getElementById('episodes').innerText = `${metadata.episodes} Ep`;
|
||||
|
||||
updateLocalPill();
|
||||
updateDescription(data.description || data.summary);
|
||||
updateRelations(data.relations?.edges);
|
||||
updateCharacters(metadata.characters);
|
||||
updateRecommendations(data.recommendations?.nodes);
|
||||
|
||||
const source = isLocal ? 'local' : (extensionName || 'anilist');
|
||||
|
||||
if (typeof AnimePlayer !== 'undefined') {
|
||||
AnimePlayer.init(animeId, source, isLocal, animeData);
|
||||
}
|
||||
|
||||
YouTubePlayerUtils.init('trailer-player');
|
||||
YouTubePlayerUtils.playTrailer(metadata.trailer, 'trailer-player', metadata.banner);
|
||||
|
||||
const watchBtn = document.getElementById('watch-btn');
|
||||
if (watchBtn) {
|
||||
watchBtn.onclick = () => {
|
||||
if (typeof AnimePlayer !== 'undefined') AnimePlayer.playEpisode(1);
|
||||
};
|
||||
}
|
||||
|
||||
const total = metadata.episodes || 12;
|
||||
setupEpisodes(total);
|
||||
|
||||
setupAddToListButton();
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error loading anime details:', err);
|
||||
showError("Error loading anime");
|
||||
}
|
||||
}
|
||||
|
||||
function updateLocalPill() {
|
||||
if (isLocal) {
|
||||
const pill = document.getElementById('local-pill');
|
||||
if(pill) pill.style.display = 'inline-flex';
|
||||
}
|
||||
if (extensionName) {
|
||||
const pill = document.getElementById('extension-pill');
|
||||
if(pill) {
|
||||
pill.innerText = extensionName;
|
||||
pill.style.display = 'inline-flex';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateDescription(rawDescription) {
|
||||
const desc = MediaMetadataUtils.truncateDescription(rawDescription, 3);
|
||||
const previewEl = document.getElementById('description-preview');
|
||||
const fullEl = document.getElementById('full-description');
|
||||
|
||||
if (previewEl) {
|
||||
previewEl.innerHTML = desc.short +
|
||||
(desc.isTruncated ? ' <span onclick="openDescriptionModal()" style="color:white; cursor:pointer; font-weight:700; margin-left:5px;">Read more</span>' : '');
|
||||
}
|
||||
if (fullEl) fullEl.innerHTML = desc.full;
|
||||
}
|
||||
|
||||
function setupDescriptionModal() {
|
||||
const modal = document.getElementById('desc-modal');
|
||||
if (!modal) return;
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target.id === 'desc-modal') {
|
||||
closeDescriptionModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openDescriptionModal() {
|
||||
const modal = document.getElementById('desc-modal');
|
||||
if(modal) modal.classList.add('active');
|
||||
}
|
||||
|
||||
function closeDescriptionModal() {
|
||||
const modal = document.getElementById('desc-modal');
|
||||
if(modal) modal.classList.remove('active');
|
||||
}
|
||||
|
||||
function setupEpisodes(totalEpisodes) {
|
||||
const limitedTotal = Math.min(Math.max(totalEpisodes, 1), 5000);
|
||||
episodePagination.setTotalItems(limitedTotal);
|
||||
renderEpisodes();
|
||||
}
|
||||
|
||||
function renderEpisodes() {
|
||||
const grid = document.getElementById('episodes-grid');
|
||||
if (!grid) return;
|
||||
grid.innerHTML = '';
|
||||
|
||||
const range = episodePagination.getPageRange();
|
||||
const currentEp = (typeof AnimePlayer !== 'undefined') ? AnimePlayer.getCurrentEpisode() : 0;
|
||||
|
||||
for (let i = range.start + 1; i <= range.end; i++) {
|
||||
const btn = document.createElement('div');
|
||||
btn.className = 'episode-btn';
|
||||
if (currentEp === i) btn.classList.add('active-playing');
|
||||
|
||||
btn.innerText = i;
|
||||
|
||||
btn.onclick = () => {
|
||||
if (typeof AnimePlayer !== 'undefined') {
|
||||
AnimePlayer.playEpisode(i);
|
||||
renderEpisodes();
|
||||
}
|
||||
};
|
||||
grid.appendChild(btn);
|
||||
}
|
||||
|
||||
const totalItems = episodePagination.totalItems || 0;
|
||||
const itemsPerPage = episodePagination.itemsPerPage || 50;
|
||||
const safeTotalPages = Math.ceil(totalItems / itemsPerPage) || 1;
|
||||
|
||||
const info = document.getElementById('page-info');
|
||||
if(info) info.innerText = `Page ${episodePagination.currentPage} of ${safeTotalPages}`;
|
||||
|
||||
const prevBtn = document.getElementById('prev-page');
|
||||
const nextBtn = document.getElementById('next-page');
|
||||
|
||||
if(prevBtn) {
|
||||
prevBtn.disabled = episodePagination.currentPage === 1;
|
||||
prevBtn.onclick = () => { episodePagination.prevPage(); };
|
||||
}
|
||||
|
||||
if(nextBtn) {
|
||||
|
||||
nextBtn.disabled = episodePagination.currentPage >= safeTotalPages;
|
||||
nextBtn.onclick = () => { episodePagination.nextPage(); };
|
||||
}
|
||||
}
|
||||
|
||||
function setupEpisodeSearch() {
|
||||
const searchInput = document.getElementById('ep-search');
|
||||
if (!searchInput) return;
|
||||
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
const val = parseInt(e.target.value);
|
||||
const grid = document.getElementById('episodes-grid');
|
||||
const controls = document.getElementById('pagination-controls');
|
||||
|
||||
if (val > 0) {
|
||||
grid.innerHTML = '';
|
||||
const btn = document.createElement('div');
|
||||
btn.className = 'episode-btn';
|
||||
btn.innerText = `${val}`;
|
||||
btn.onclick = () => { if (typeof AnimePlayer !== 'undefined') AnimePlayer.playEpisode(val); };
|
||||
grid.appendChild(btn);
|
||||
if(controls) controls.style.display = 'none';
|
||||
} else if (!e.target.value) {
|
||||
if(controls) controls.style.display = 'flex';
|
||||
renderEpisodes();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateCharacters(characters) {
|
||||
const container = document.getElementById('char-list');
|
||||
if (!container) return;
|
||||
container.innerHTML = '';
|
||||
if (!characters || characters.length === 0) return;
|
||||
|
||||
characters.forEach((char, index) => {
|
||||
const img = char.node?.image?.large || char.image;
|
||||
const name = char.node?.name?.full || char.name;
|
||||
const role = char.role || 'Supporting';
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = `character-item ${index >= 12 ? 'hidden-char' : ''}`;
|
||||
card.style.display = index >= 12 ? 'none' : 'flex';
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="char-avatar"><img src="${img}" loading="lazy"></div>
|
||||
<div class="char-info"><div class="char-name">${name}</div><div class="char-role">${role}</div></div>
|
||||
`;
|
||||
container.appendChild(card);
|
||||
});
|
||||
|
||||
const showMoreBtn = document.getElementById('show-more-chars');
|
||||
if (showMoreBtn) {
|
||||
if (characters.length > 12) {
|
||||
showMoreBtn.style.display = 'block';
|
||||
showMoreBtn.onclick = () => {
|
||||
document.querySelectorAll('.hidden-char').forEach(el => el.style.display = 'flex');
|
||||
showMoreBtn.style.display = 'none';
|
||||
};
|
||||
} else {
|
||||
showMoreBtn.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateRelations(relations) {
|
||||
const container = document.getElementById('relations-grid');
|
||||
const section = document.getElementById('relations-section');
|
||||
|
||||
if (!container || !relations || relations.length === 0) {
|
||||
if (section) section.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
section.style.display = 'block';
|
||||
container.innerHTML = '';
|
||||
|
||||
const priorityMap = {
|
||||
'ADAPTATION': 1,
|
||||
'PREQUEL': 2,
|
||||
'SEQUEL': 3,
|
||||
'PARENT': 4,
|
||||
'SIDE_STORY': 5,
|
||||
'SPIN_OFF': 6,
|
||||
'ALTERNATIVE': 7,
|
||||
'CHARACTER': 8,
|
||||
'OTHER': 99
|
||||
};
|
||||
|
||||
relations.sort((a, b) => {
|
||||
const pA = priorityMap[a.relationType] || 50;
|
||||
const pB = priorityMap[b.relationType] || 50;
|
||||
return pA - pB;
|
||||
});
|
||||
|
||||
relations.forEach(rel => {
|
||||
const media = rel.node;
|
||||
if (!media) return;
|
||||
|
||||
const title = media.title?.romaji || media.title?.english || 'Unknown';
|
||||
const cover = media.coverImage?.large || media.coverImage?.medium || '';
|
||||
|
||||
const typeDisplay = rel.relationType ? rel.relationType.replace(/_/g, ' ') : 'RELATION';
|
||||
const rawType = rel.relationType;
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.className = 'relation-card-horizontal';
|
||||
|
||||
let targetUrl = null;
|
||||
|
||||
if (rawType === 'ADAPTATION') {
|
||||
targetUrl = `/book/${media.id}`;
|
||||
|
||||
} else if (media.type === 'ANIME' && rawType !== 'OTHER') {
|
||||
targetUrl = `/anime/${media.id}`;
|
||||
|
||||
}
|
||||
|
||||
if (targetUrl) {
|
||||
el.onclick = () => { window.location.href = targetUrl; };
|
||||
} else {
|
||||
el.classList.add('no-link');
|
||||
|
||||
el.onclick = null;
|
||||
}
|
||||
|
||||
el.innerHTML = `
|
||||
<img src="${cover}" class="rel-img" alt="${title}" onerror="this.src='/public/assets/placeholder.svg'">
|
||||
<div class="rel-info">
|
||||
<span class="rel-type">${typeDisplay}</span>
|
||||
<span class="rel-title">${title}</span>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(el);
|
||||
});
|
||||
}
|
||||
|
||||
function updateRecommendations(recommendations) {
|
||||
const container = document.getElementById('recommendations-grid');
|
||||
if (!container || !recommendations) return;
|
||||
container.innerHTML = '';
|
||||
|
||||
recommendations.forEach(rec => {
|
||||
const media = rec.mediaRecommendation;
|
||||
if (!media) return;
|
||||
|
||||
const title = media.title?.romaji || 'Unknown';
|
||||
const cover = media.coverImage?.large || media.coverImage?.medium || '';
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.className = 'card';
|
||||
|
||||
el.onclick = () => { window.location.href = `/anime/${media.id}`; };
|
||||
|
||||
el.innerHTML = `
|
||||
<div class="card-img-wrap"><img src="${cover}" loading="lazy" onerror="this.src='/public/assets/no-cover.jpg'"></div>
|
||||
<div class="card-content"><h3>${title}</h3></div>
|
||||
`;
|
||||
container.appendChild(el);
|
||||
});
|
||||
}
|
||||
|
||||
async function setupAddToListButton() {
|
||||
const btn = document.getElementById('add-to-list-btn');
|
||||
if (!btn || !animeData) return;
|
||||
|
||||
ListModalManager.currentData = animeData;
|
||||
const entryType = 'ANIME';
|
||||
await ListModalManager.checkIfInList(animeId, extensionName || 'anilist', entryType);
|
||||
updateCustomAddButton();
|
||||
btn.onclick = () => ListModalManager.open(animeData, extensionName || 'anilist');
|
||||
}
|
||||
|
||||
function updateCustomAddButton() {
|
||||
const btn = document.getElementById('add-to-list-btn');
|
||||
if (btn && ListModalManager.isInList) {
|
||||
btn.innerHTML = `✓ In Your List`;
|
||||
btn.style.background = 'rgba(34, 197, 94, 0.2)';
|
||||
btn.style.borderColor = '#22c55e';
|
||||
btn.style.color = '#22c55e';
|
||||
}
|
||||
}
|
||||
|
||||
function showError(msg) {
|
||||
const el = document.getElementById('title');
|
||||
if(el) el.innerText = msg;
|
||||
}
|
||||
|
||||
window.openDescriptionModal = openDescriptionModal;
|
||||
window.closeDescriptionModal = closeDescriptionModal;
|
||||
window.scrollRecommendations = (dir) => {
|
||||
const el = document.getElementById('recommendations-grid');
|
||||
if(el) el.scrollBy({ left: 240 * 3 * dir, behavior: 'smooth' });
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -52,10 +52,9 @@ const ContinueWatchingManager = {
|
||||
|
||||
if (entryType === 'ANIME') {
|
||||
url = item.source === 'anilist'
|
||||
? `/watch/${item.entry_id}/${nextProgress}`
|
||||
: `/watch/${item.entry_id}/${nextProgress}?${item.source}`;
|
||||
? `/anime/${item.entry_id}?episode=${nextProgress}`
|
||||
: `/anime/${item.entry_id}/${item.source}/?episode=${nextProgress}`;
|
||||
} else {
|
||||
|
||||
url = item.source === 'anilist'
|
||||
? `/book/${item.entry_id}?chapter=${nextProgress}`
|
||||
: `/read/${item.source}/${nextProgress}/${item.entry_id}?source=${item.source}`;
|
||||
|
||||
@@ -112,12 +112,6 @@ async function viewsRoutes(fastify: FastifyInstance) {
|
||||
reply.type('text/html').send(html);
|
||||
});
|
||||
|
||||
fastify.get('/watch/:id/:episode', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'watch.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
reply.type('text/html').send(html);
|
||||
});
|
||||
|
||||
fastify.get('/book/:id', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
|
||||
@@ -1,17 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon" />
|
||||
<title>WaifuBoard</title>
|
||||
<link rel="stylesheet" href="/views/css/globals.css">
|
||||
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
|
||||
<link rel="stylesheet" href="/views/css/components/hero.css">
|
||||
<link rel="stylesheet" href="/views/css/anime/anime.css">
|
||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
||||
<script src="/src/scripts/titlebar.js"></script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
|
||||
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="/views/css/globals.css" />
|
||||
<link rel="stylesheet" href="/views/css/components/anilist-modal.css" />
|
||||
<link rel="stylesheet" href="/views/css/anime/anime.css" />
|
||||
<link rel="stylesheet" href="/views/css/anime/player.css" />
|
||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
||||
<script src="/src/scripts/titlebar.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="titlebar">
|
||||
@@ -20,137 +24,158 @@
|
||||
<span class="app-title">WaifuBoard</span>
|
||||
</div>
|
||||
<div class="title-right">
|
||||
<button class="min">—</button>
|
||||
<button class="min">−</button>
|
||||
<button class="max">🗖</button>
|
||||
<button class="close">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/anime" class="back-btn">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
Back
|
||||
</a>
|
||||
|
||||
<div class="modal-overlay" id="desc-modal">
|
||||
<div class="modal-content">
|
||||
<button class="modal-close" onclick="closeModal()">✕</button>
|
||||
<button class="modal-close" onclick="closeDescriptionModal()">✕</button>
|
||||
<h2 class="modal-title">Synopsis</h2>
|
||||
<div class="modal-text" id="full-description"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="/anime" class="back-btn">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
|
||||
Back to Home
|
||||
</a>
|
||||
<div class="top-media-wrapper" id="top-media-wrapper">
|
||||
|
||||
<div class="hero-wrapper">
|
||||
<div class="video-background">
|
||||
<div id="player"></div>
|
||||
</div>
|
||||
<div class="hero-wrapper" id="hero-wrapper">
|
||||
<div class="video-background"><div id="trailer-player"></div></div>
|
||||
<div class="hero-overlay"></div>
|
||||
</div>
|
||||
|
||||
<div class="content-container">
|
||||
<aside class="sidebar">
|
||||
<div class="poster-card">
|
||||
<img id="poster" src="" alt="">
|
||||
</div>
|
||||
<div class="player-wrapper" id="player-wrapper" style="display: none;">
|
||||
<div class="player-container">
|
||||
<button id="prev-ep-btn" class="side-nav-btn left" title="Previous Episode">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
|
||||
</button>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<h4>Format</h4>
|
||||
<span id="format">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Episodes</h4>
|
||||
<span id="episodes">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Status</h4>
|
||||
<span id="status">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Season</h4>
|
||||
<span id="season">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Studio</h4>
|
||||
<span id="studio">--</span>
|
||||
<button id="next-ep-btn" class="side-nav-btn right" title="Next Episode">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
|
||||
</button>
|
||||
|
||||
<div class="player-header">
|
||||
<div class="header-left">
|
||||
<button class="btn-icon-glass" id="close-player-btn" title="Close Player">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg>
|
||||
</button>
|
||||
<div class="episode-info">
|
||||
<span class="ep-label">Watching</span>
|
||||
<span id="player-episode-title" class="ep-title">Episode 1</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<h4>Main Characters</h4>
|
||||
<div class="character-list" id="char-list"></div>
|
||||
<div class="header-right">
|
||||
<div class="settings-group">
|
||||
<div class="sd-toggle" id="sd-toggle" data-state="sub">
|
||||
<div class="sd-bg"></div>
|
||||
<div class="sd-option active" id="opt-sub">Sub</div>
|
||||
<div class="sd-option" id="opt-dub">Dub</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="main-content">
|
||||
<select id="server-select" class="glass-select" style="display:none;"></select>
|
||||
<select id="extension-select" class="glass-select"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-frame">
|
||||
<video id="player" controls crossorigin playsinline></video>
|
||||
<div id="player-loading" class="player-loading-overlay">
|
||||
<div class="spinner"></div>
|
||||
<p id="player-loading-text">Loading Stream...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-container" id="main-content">
|
||||
<div class="anime-header">
|
||||
<h1 class="anime-title" id="title">Loading...</h1>
|
||||
|
||||
<div class="meta-row">
|
||||
<div class="pill extension-pill" id="extension-pill" style="display: none; background: #8b5cf6;"></div>
|
||||
<div class="pill" id="local-pill" style="display: none; background: #8b5cf6;"></div>
|
||||
<div class="pill score" id="score">--% Score</div>
|
||||
<div class="pill" id="year">----</div>
|
||||
<div class="pill" id="genres">Action</div>
|
||||
<div class="hero-meta-info">
|
||||
<span id="local-pill" class="pill-local" style="display:none;">Local</span>
|
||||
<span id="extension-pill" class="pill-local" style="background:#8b5cf6; display:none;">Ext</span>
|
||||
<span id="score">--% Score</span> • <span id="year">----</span> • <span id="format">--</span> • <span id="episodes">-- Ep</span>
|
||||
</div>
|
||||
<div class="hero-description-mini" id="description-preview"></div>
|
||||
<div class="hero-tags" id="genres"></div>
|
||||
|
||||
<div class="action-row">
|
||||
<button class="btn-watch" id="watch-btn">
|
||||
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="black"><path d="M8 5v14l11-7z"/></svg>
|
||||
Start Watching
|
||||
</button>
|
||||
<button class="btn-secondary" id="add-to-list-btn" onclick="openAddToListModal()">+ Add to List</button>
|
||||
<button class="btn-add-list" id="add-to-list-btn">+ Add to List</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="description-box">
|
||||
<div id="description-preview"></div>
|
||||
<button id="read-more-btn" class="read-more-btn" style="display: none;" onclick="openModal()">
|
||||
Read More
|
||||
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7"/></svg>
|
||||
</button>
|
||||
<div class="main-layout">
|
||||
<aside class="poster-section">
|
||||
<div class="poster-card"><img id="poster" src="" alt="Poster"></div>
|
||||
<div class="metadata-sidebar">
|
||||
<div class="meta-item-side"><span>Status</span><p id="status">--</p></div>
|
||||
<div class="meta-item-side"><span>Season</span><p id="season">--</p></div>
|
||||
<div class="meta-item-side"><span>Studio</span><p id="studio">--</p></div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="episodes-section">
|
||||
<div class="content-column">
|
||||
|
||||
<section class="episodes-section">
|
||||
<div class="episodes-header-row">
|
||||
<div class="section-title" style="margin:0; border:none; padding:0;">
|
||||
<h2 style="font-size: 1.8rem; border-left: 4px solid #8b5cf6; padding-left: 1rem;">Episodes</h2>
|
||||
<h2>Episodes</h2>
|
||||
<input type="number" id="ep-search" class="episode-search-input" placeholder="Jump to...">
|
||||
</div>
|
||||
<div class="episode-search-wrapper">
|
||||
<input type="number" id="ep-search" class="episode-search-input" placeholder="Jump to Ep #" min="1">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="episodes-grid" id="episodes-grid"></div>
|
||||
<div id="episodes-grid" class="episodes-grid"></div>
|
||||
|
||||
<div class="pagination-controls" id="pagination-controls">
|
||||
<button class="page-btn" id="prev-page" onclick="changePage(-1)">Previous</button>
|
||||
<button class="page-btn" id="prev-page">Previous</button>
|
||||
<span class="page-info" id="page-info">Page 1 of 1</span>
|
||||
<button class="page-btn" id="next-page" onclick="changePage(1)">Next</button>
|
||||
<button class="page-btn" id="next-page">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
|
||||
<div id="relations-section" style="display:none; margin-top: 3rem;">
|
||||
<h3 class="subsection-title">Relations</h3>
|
||||
<div class="relations-horizontal" id="relations-grid"></div>
|
||||
</div>
|
||||
|
||||
<div id="updateToast" class="hidden">
|
||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
||||
<a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">
|
||||
Click To Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/src/scripts/updateNotifier.js"></script>
|
||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
||||
<script src="/src/scripts/auth-guard.js"></script>
|
||||
<section class="content-section">
|
||||
<h2 class="subsection-title">Characters</h2>
|
||||
<div class="characters-grid" id="char-list"></div>
|
||||
<button id="show-more-chars" class="btn-show-more" style="display: none;">Show Full Cast</button>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2 class="subsection-title">Recommended</h2>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollRecommendations(-1)">‹</button>
|
||||
<div class="carousel" id="recommendations-grid"></div>
|
||||
<button class="scroll-btn right" onclick="scrollRecommendations(1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
||||
<script src="/src/scripts/utils/notification-utils.js"></script>
|
||||
<script src="/src/scripts/utils/url-utils.js"></script>
|
||||
<script src="/src/scripts/utils/pagination-manager.js"></script>
|
||||
<script src="/src/scripts/utils/media-metadata-utils.js"></script>
|
||||
<script src="/src/scripts/utils/youtube-player-utils.js"></script>
|
||||
<script src="/src/scripts/utils/list-modal-manager.js"></script>
|
||||
<script src="/src/scripts/anime/anime.js"></script>
|
||||
|
||||
<script src="/src/scripts/anime/player.js"></script>
|
||||
<script src="/src/scripts/anime/entry.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,197 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WaifuBoard Watch</title>
|
||||
<link rel="stylesheet" href="/views/css/globals.css">
|
||||
<link rel="stylesheet" href="/views/css/anime/watch.css">
|
||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
|
||||
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico">
|
||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
||||
<script src="/src/scripts/titlebar.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="titlebar"> <div class="title-left">
|
||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
||||
<span class="app-title">WaifuBoard</span>
|
||||
</div>
|
||||
<div class="title-right">
|
||||
<button class="min">—</button>
|
||||
<button class="max">🗖</button>
|
||||
<button class="close">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="top-bar">
|
||||
<a href="#" id="back-link" class="back-btn">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
|
||||
<path d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
<span>Back to Series</span>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<div class="ui-scale-wrapper">
|
||||
<main class="watch-container">
|
||||
|
||||
<section class="anime-details">
|
||||
<div class="details-container">
|
||||
<div class="details-cover">
|
||||
<img id="detail-cover-image" src="" alt="Anime Cover" class="cover-image">
|
||||
</div>
|
||||
<div class="details-content">
|
||||
<h1 id="anime-title-details">Loading...</h1>
|
||||
<div class="details-meta">
|
||||
<span id="detail-format" class="meta-badge">--</span>
|
||||
<span id="detail-season" class="meta-badge">--</span>
|
||||
<span id="detail-score" class="meta-badge meta-score">--</span>
|
||||
</div>
|
||||
<br>
|
||||
<p id="detail-description" class="details-description">Loading description...</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="player-section">
|
||||
|
||||
<div class="player-toolbar">
|
||||
<div class="control-group">
|
||||
<div class="sd-toggle" id="sd-toggle" data-state="sub" onclick="toggleAudioMode()">
|
||||
<div class="sd-bg"></div>
|
||||
<div class="sd-option active" id="opt-sub">Sub</div>
|
||||
<div class="sd-option" id="opt-dub">Dub</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<select id="server-select" class="source-select" onchange="loadStream()" style="display:none;">
|
||||
<option value="">Server...</option>
|
||||
</select>
|
||||
<select id="extension-select" class="source-select" onchange="onExtensionChange()">
|
||||
<option value="" disabled selected>Source...</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-container">
|
||||
<video id="player" controls crossorigin playsinline></video>
|
||||
<div id="loading-overlay" class="loading-overlay">
|
||||
<div class="spinner"></div>
|
||||
<p id="loading-text">Select a source...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="episode-controls">
|
||||
<div class="episode-info">
|
||||
<h1 id="anime-title-details2">Loading...</h1>
|
||||
<p id="episode-label">Episode --</p>
|
||||
</div>
|
||||
<div class="navigation-buttons">
|
||||
<button class="nav-btn prev-btn" id="prev-btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg><span>Previous</span></button>
|
||||
<button class="nav-btn next-btn" id="next-btn"><span>Next</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 5l7 7-7 7"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="episode-carousel-compact">
|
||||
<div class="carousel-header">
|
||||
<h2>Episodes</h2>
|
||||
<div class="carousel-nav">
|
||||
<button class="carousel-arrow-mini" id="ep-prev-mini"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M15 18l-6-6 6-6"/></svg></button>
|
||||
<button class="carousel-arrow-mini" id="ep-next-mini"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M9 6l6 6-6 6"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="episode-carousel" class="episode-carousel-compact-list">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="../../src/scripts/anime/player.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const carousel = document.getElementById('episode-carousel');
|
||||
if (!carousel) return;
|
||||
|
||||
const prevBtn = document.getElementById('ep-prev-mini');
|
||||
const nextBtn = document.getElementById('ep-next-mini');
|
||||
|
||||
const scrollAmount = 150;
|
||||
|
||||
prevBtn?.addEventListener('click', () => {
|
||||
carousel.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
|
||||
});
|
||||
|
||||
nextBtn?.addEventListener('click', () => {
|
||||
carousel.scrollBy({ left: scrollAmount, behavior: 'smooth' });
|
||||
});
|
||||
|
||||
const updateArrows = () => {
|
||||
if (!prevBtn || !nextBtn) return;
|
||||
|
||||
prevBtn.style.opacity = carousel.scrollLeft <= 10 ? '0.3' : '1';
|
||||
prevBtn.style.pointerEvents = carousel.scrollLeft <= 10 ? 'none' : 'auto';
|
||||
|
||||
const atEnd = carousel.scrollLeft + carousel.clientWidth >= carousel.scrollWidth - 10;
|
||||
nextBtn.style.opacity = atEnd ? '0.3' : '1';
|
||||
nextBtn.style.pointerEvents = atEnd ? 'none' : 'auto';
|
||||
};
|
||||
|
||||
carousel.addEventListener('scroll', updateArrows);
|
||||
window.addEventListener('resize', updateArrows);
|
||||
|
||||
const observer = new MutationObserver((mutations, obs) => {
|
||||
updateArrows();
|
||||
obs.disconnect();
|
||||
|
||||
});
|
||||
observer.observe(carousel, { childList: true });
|
||||
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const expandBtn = document.getElementById('expand-characters-btn');
|
||||
const characterList = document.getElementById('characters-list');
|
||||
const btnText = expandBtn?.querySelector('span');
|
||||
|
||||
if (!expandBtn || !characterList) return;
|
||||
|
||||
expandBtn.addEventListener('click', () => {
|
||||
const isExpanded = expandBtn.getAttribute('data-expanded') === 'true';
|
||||
|
||||
if (isExpanded) {
|
||||
|
||||
characterList.classList.remove('expanded');
|
||||
expandBtn.setAttribute('data-expanded', 'false');
|
||||
if (btnText) btnText.innerText = 'Show All';
|
||||
} else {
|
||||
|
||||
characterList.classList.add('expanded');
|
||||
expandBtn.setAttribute('data-expanded', 'true');
|
||||
if (btnText) btnText.innerText = 'Show Less';
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="updateToast" class="hidden">
|
||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
||||
|
||||
<a
|
||||
id="downloadButton"
|
||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
||||
target="_blank"
|
||||
>
|
||||
Click To Download
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script src="/src/scripts/updateNotifier.js"></script>
|
||||
<script src="/src/scripts/auth-guard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,297 +1,274 @@
|
||||
:root {
|
||||
--bg-card: rgba(255, 255, 255, 0.04);
|
||||
--border-subtle: rgba(255, 255, 255, 0.1);
|
||||
--color-primary: #8b5cf6;
|
||||
--player-height: 85vh;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #0b0b0b;
|
||||
color: white;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
.top-media-wrapper {
|
||||
position: relative;
|
||||
|
||||
width: 100vw;
|
||||
left: 0;
|
||||
background: #000;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.hero-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.video-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.video-background iframe,
|
||||
.video-background #trailer-player {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(1.35);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
opacity: 0.6;
|
||||
|
||||
width: 100vw;
|
||||
height: 56.25vw;
|
||||
min-height: 100vh;
|
||||
min-width: 177.77vh;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.8) 70%, #0b0b0b 100%);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
max-width: 1600px;
|
||||
margin: -350px auto 0 auto;
|
||||
max-width: 1400px;
|
||||
margin: -45vh auto 0 auto;
|
||||
padding: 0 3rem 4rem 3rem;
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr;
|
||||
gap: 3rem;
|
||||
animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
transition: margin-top 0.5s ease;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
body.watch-mode .content-container { margin-top: 0; }
|
||||
body.watch-mode .anime-header { margin-top: 2rem; }
|
||||
|
||||
.anime-header { margin-bottom: 5rem; max-width: 900px; }
|
||||
.anime-title {
|
||||
font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900;
|
||||
margin-bottom: 0.5rem; text-shadow: 0 4px 30px rgba(0,0,0,0.6);
|
||||
}
|
||||
.hero-meta-info {
|
||||
display: flex; align-items: center; gap: 0.8rem;
|
||||
color: rgba(255,255,255,0.7); font-weight: 600; margin-bottom: 1.2rem;
|
||||
}
|
||||
.pill-local {
|
||||
background: #22c55e; color: black; padding: 2px 8px;
|
||||
border-radius: 4px; font-size: 0.75rem; font-weight: 900;
|
||||
}
|
||||
.hero-description-mini {
|
||||
font-size: 1.05rem; line-height: 1.5; color: rgba(255,255,255,0.8);
|
||||
margin-bottom: 1.2rem; max-width: 700px;
|
||||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
||||
}
|
||||
.hero-tags {
|
||||
display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem;
|
||||
color: rgba(255,255,255,0.5); font-weight: 500;
|
||||
}
|
||||
|
||||
.action-row { display: flex; align-items: center; gap: 1rem; }
|
||||
.btn-watch {
|
||||
padding: 0.8rem 2.2rem; background: white; color: black;
|
||||
border-radius: 8px; font-weight: 800; border: none; cursor: pointer;
|
||||
display: flex; align-items: center; gap: 0.6rem; transition: 0.2s ease;
|
||||
}
|
||||
.btn-watch:hover { transform: scale(1.03); filter: brightness(0.9); }
|
||||
|
||||
.btn-add-list {
|
||||
padding: 0.8rem 1.5rem; background: rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(255,255,255,0.2); color: white;
|
||||
border-radius: 8px; font-weight: 700; cursor: pointer; transition: 0.2s;
|
||||
}
|
||||
.btn-add-list:hover { background: rgba(255,255,255,0.2); }
|
||||
|
||||
.main-layout { display: grid; grid-template-columns: 300px 1fr; gap: 4rem; margin-top: 2rem; }
|
||||
.content-section { margin-top: 4rem; }
|
||||
h2, .subsection-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; color: white; }
|
||||
|
||||
.poster-card {
|
||||
width: 100%;
|
||||
aspect-ratio: 2/3;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 12px; overflow: hidden;
|
||||
box-shadow: 0 30px 60px rgba(0,0,0,0.5); border: 1px solid var(--border-subtle);
|
||||
}
|
||||
.poster-card img { width: 100%; height: auto; display: block; }
|
||||
|
||||
.poster-card img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
.relations-horizontal { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
|
||||
.relation-card-horizontal {
|
||||
display: flex; background: var(--bg-card); border: 1px solid var(--border-subtle);
|
||||
border-radius: 10px; overflow: hidden; transition: 0.2s; cursor: pointer;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
.relation-card-horizontal:hover { background: rgba(255,255,255,0.08); transform: translateX(5px); }
|
||||
.rel-img { width: 85px; height: 110px; object-fit: cover; }
|
||||
.rel-info { padding: 1rem; display: flex; flex-direction: column; justify-content: center; }
|
||||
.rel-type {
|
||||
font-size: 0.7rem; color: var(--color-primary); font-weight: 800;
|
||||
margin-bottom: 4px; background: rgba(139, 92, 246, 0.1); width: fit-content; padding: 2px 6px; border-radius: 4px;
|
||||
}
|
||||
.rel-title { font-size: 0.95rem; font-weight: 700; color: #eee; }
|
||||
|
||||
.info-item h4 { margin: 0 0 0.25rem 0; font-size: 0.85rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.info-item span { font-weight: 600; font-size: 1rem; color: var(--color-text-primary); }
|
||||
.characters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
||||
.character-item { display: flex; align-items: center; gap: 1rem; }
|
||||
.char-avatar { width: 60px; height: 60px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
|
||||
.char-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.char-info { display: flex; flex-direction: column; gap: 2px; }
|
||||
.char-name { font-size: 1rem; font-weight: 700; color: #fff; }
|
||||
.char-role { font-size: 0.8rem; color: #888; font-weight: 500; }
|
||||
.btn-show-more { background: transparent; border: 1px solid var(--border-subtle); color: #aaa; padding: 10px; width: 100%; margin-top: 1rem; cursor: pointer; }
|
||||
|
||||
.character-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
.episodes-section { margin-top: 3rem; }
|
||||
.episodes-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
|
||||
.episode-search-input {
|
||||
background: rgba(255,255,255,0.05); border: 1px solid var(--border-subtle);
|
||||
color: white; padding: 8px 15px; border-radius: 8px; width: 100px;
|
||||
}
|
||||
.character-item { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; }
|
||||
.char-dot { width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; }
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.anime-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.anime-title {
|
||||
font-size: 4rem;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
margin: 0 0 1.5rem 0;
|
||||
text-shadow: 0 4px 30px rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pill {
|
||||
padding: 0.5rem 1.25rem;
|
||||
background: rgba(255,255,255,0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.pill.score { background: rgba(34, 197, 94, 0.2); color: #4ade80; border-color: rgba(34, 197, 94, 0.2); }
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.btn-watch {
|
||||
padding: 1rem 3rem;
|
||||
background: var(--color-text-primary);
|
||||
color: var(--color-bg-base);
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 800;
|
||||
font-size: 1.1rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.btn-watch:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
padding: 1rem 2rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
color: white;
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.description-box {
|
||||
margin-top: 3rem;
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.8;
|
||||
color: #e4e4e7;
|
||||
max-width: 900px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
padding: 2rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.episodes-section {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
.section-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.8rem; }
|
||||
.section-title::before { content: ''; width: 4px; height: 28px; background: var(--color-primary); border-radius: 2px; }
|
||||
|
||||
.episodes-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
|
||||
gap: 0.6rem;
|
||||
}
|
||||
.episode-btn {
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
padding: 1.25rem 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid var(--border-subtle);
|
||||
padding: 0.6rem 0;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.episode-btn:hover {
|
||||
background: var(--color-bg-elevated-hover);
|
||||
color: white;
|
||||
transform: translateY(-3px);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(60px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.content-container {
|
||||
grid-template-columns: 1fr;
|
||||
margin-top: -100px;
|
||||
padding: 0 1.5rem 4rem 1.5rem;
|
||||
}
|
||||
.poster-card { width: 220px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
|
||||
.main-content { text-align: center; align-items: center; }
|
||||
.anime-title { font-size: 2.5rem; }
|
||||
.meta-row { justify-content: center; }
|
||||
.sidebar { display: none; }
|
||||
}
|
||||
|
||||
.read-more-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #8b5cf6;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
padding: 0;
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.95rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
transition: all 0.2s;
|
||||
color: #ccc;
|
||||
}
|
||||
.episode-btn:hover {
|
||||
background: white;
|
||||
color: black;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.episode-btn.active-playing {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
.read-more-btn:hover { text-decoration: underline; }
|
||||
|
||||
.episodes-header-row {
|
||||
.metadata-sidebar {
|
||||
margin-top: 2rem;
|
||||
background: rgba(255,255,255,0.03);
|
||||
padding: 1.5rem;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.2rem;
|
||||
}
|
||||
.meta-item-side {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
padding-bottom: 0.8rem;
|
||||
}
|
||||
.episodes-header-row h2 {
|
||||
.meta-item-side:last-child { border-bottom: none; padding-bottom: 0; }
|
||||
.meta-item-side span {
|
||||
font-size: 0.8rem;
|
||||
color: #888;
|
||||
font-weight: 600;
|
||||
}
|
||||
.meta-item-side p {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: 1.8rem;
|
||||
border-left: 4px solid #8b5cf6;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.episode-search-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.episode-search-input {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 99px;
|
||||
padding: 0.6rem 1rem;
|
||||
color: white;
|
||||
width: 140px;
|
||||
text-align: center;
|
||||
font-family: inherit;
|
||||
transition: 0.2s;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
.episode-search-input:focus {
|
||||
border-color: #8b5cf6;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
outline: none;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.episode-search-input::-webkit-outer-spin-button,
|
||||
.episode-search-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
||||
@media (max-width: 1024px) {
|
||||
.content-container { margin-top: -200px; padding: 0 1.5rem; }
|
||||
.main-layout { grid-template-columns: 1fr; gap: 2rem; }
|
||||
.poster-section { display: flex; flex-direction: column; align-items: center; }
|
||||
.poster-card { width: 220px; }
|
||||
.metadata-sidebar { width: 100%; max-width: 400px; }
|
||||
}
|
||||
|
||||
.relation-card-horizontal.no-link {
|
||||
cursor: default;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.relation-card-horizontal.no-link:hover {
|
||||
transform: none;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
gap: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
padding-top: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
color: #888;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
padding: 0.6rem 1.2rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.page-btn:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: #8b5cf6;
|
||||
background: white;
|
||||
color: black;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.page-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.page-info {
|
||||
color: #a1a1aa;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
507
desktop/views/css/anime/player.css
Normal file
507
desktop/views/css/anime/player.css
Normal file
@@ -0,0 +1,507 @@
|
||||
:root {
|
||||
--brand-color: #8b5cf6;
|
||||
--brand-color-light: #a78bfa;
|
||||
--op-color: #fbbf24;
|
||||
--ed-color: #38bdf8;
|
||||
--overlay-gradient-top: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent 100%);
|
||||
--overlay-gradient-bottom: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 40%, transparent 100%);
|
||||
}
|
||||
|
||||
body.stop-scrolling {
|
||||
overflow: hidden !important;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.player-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.player-wrapper * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.player-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.video-frame {
|
||||
|
||||
flex: 1;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.video-frame video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.video-frame .plyr {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.player-header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 20px 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
z-index: 20;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%);
|
||||
pointer-events: none; /* Permite clickear el video a través del header vacío */
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.header-left, .header-right {
|
||||
pointer-events: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.btn-icon-glass {
|
||||
appearance: none;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
border-radius: 20%;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(4px);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-icon-glass:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||||
transform: translateY(-1px) scale(1.05);
|
||||
}
|
||||
|
||||
.player-container:hover .player-header,
|
||||
.player-container.paused .player-header {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.player-meta {
|
||||
display: flex; flex-direction: column; gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-close-player {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: rgba(255,255,255,0.7);
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
font-size: 1.1rem; font-weight: 500;
|
||||
cursor: pointer; padding: 0;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.btn-close-player:hover { color: #fff; }
|
||||
.btn-close-player svg { width: 28px; height: 28px; }
|
||||
|
||||
.episode-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ep-label {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255,255,255,0.7);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.ep-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.nav-capsule {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 20px; /* Forma de pastilla */
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-btn:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.nav-btn:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.nav-capsule .divider {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
#skip-overlay-btn {
|
||||
position: absolute;
|
||||
bottom: 80px; /* Encima de la barra de Plyr */
|
||||
right: 30px;
|
||||
background: white;
|
||||
color: black;
|
||||
padding: 10px 24px;
|
||||
border-radius: 6px;
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
z-index: 2147483647 !important; /* Siempre encima de todo */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
|
||||
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.3s, transform 0.3s, background 0.2s;
|
||||
pointer-events: none;
|
||||
|
||||
}
|
||||
|
||||
#skip-overlay-btn.visible {
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
cursor: pointer !important;
|
||||
visibility: visible !important;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
#skip-overlay-btn:hover {
|
||||
background: #f0f0f0;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
#skip-overlay-btn.is-next {
|
||||
background: #8b5cf6;
|
||||
color: white;
|
||||
}
|
||||
#skip-overlay-btn.is-next:hover {
|
||||
background: #7c3aed;
|
||||
}
|
||||
|
||||
|
||||
/* --- BOTONES DE NAVEGACIÓN LATERALES (Side Chevrons) --- */
|
||||
.side-nav-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
border: none;
|
||||
width: 60px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 30; /* Encima del video */
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0; /* Invisibles por defecto */
|
||||
}
|
||||
|
||||
/* Bordes redondeados según el lado */
|
||||
.side-nav-btn.left {
|
||||
left: 0;
|
||||
border-radius: 0 10px 10px 0;
|
||||
}
|
||||
|
||||
.side-nav-btn.right {
|
||||
right: 0;
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
/* Mostrar solo cuando el mouse está sobre el reproductor */
|
||||
.player-container:hover .side-nav-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Efecto Hover sobre el botón */
|
||||
.side-nav-btn:hover:not(:disabled) {
|
||||
background: rgba(139, 92, 246, 0.6); /* Tu color brand morado pero transparente */
|
||||
color: white;
|
||||
width: 70px; /* Crecen un poco */
|
||||
}
|
||||
|
||||
/* Estado deshabilitado (Primer/Último episodio) */
|
||||
.side-nav-btn:disabled {
|
||||
cursor: default;
|
||||
opacity: 0 !important; /* Totalmente oculto si no se puede usar */
|
||||
pointer-events: none;
|
||||
}
|
||||
#player-episode-title {
|
||||
font-size: 1.5rem; font-weight: 700;
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.player-controls-top {
|
||||
display: flex; gap: 1rem; align-items: center;
|
||||
}
|
||||
|
||||
.glass-select {
|
||||
appearance: none;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: #fff;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem; font-weight: 600;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(4px);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.glass-select:hover { background: rgba(255, 255, 255, 0.2); }
|
||||
.glass-select option { background: #111; color: #ccc; }
|
||||
|
||||
.sd-toggle {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
.sd-option {
|
||||
padding: 4px 12px;
|
||||
font-size: 0.75rem; font-weight: 700;
|
||||
color: rgba(255,255,255,0.5);
|
||||
border-radius: 2px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.sd-option.active {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.btn-skip-intro {
|
||||
position: absolute;
|
||||
bottom: 120px; right: 40px;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
border: none;
|
||||
padding: 10px 24px;
|
||||
font-weight: 700; font-size: 0.9rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
z-index: 50;
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
opacity: 0; transform: translateY(20px);
|
||||
transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
||||
}
|
||||
.btn-skip-intro.visible {
|
||||
opacity: 1; transform: translateY(0);
|
||||
}
|
||||
.btn-skip-intro:hover {
|
||||
background: #e6e6e6;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
:root {
|
||||
--plyr-color-main: var(--brand-color);
|
||||
--plyr-video-control-color: #fff;
|
||||
--plyr-video-control-background-hover: transparent;
|
||||
--plyr-control-icon-size: 20px;
|
||||
--plyr-range-track-height: 4px;
|
||||
--plyr-range-thumb-height: 14px;
|
||||
--plyr-range-thumb-background: #fff;
|
||||
--plyr-menu-background: rgba(20, 20, 20, 0.95);
|
||||
--plyr-menu-color: #fff;
|
||||
--plyr-tooltip-background: rgba(255,255,255,0.9);
|
||||
--plyr-tooltip-color: #000;
|
||||
}
|
||||
|
||||
.plyr--video .plyr__controls {
|
||||
padding-bottom: max(20px, env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.plyr__progress__container:hover .plyr__progress input[type=range],
|
||||
.plyr__progress__container:hover .plyr__progress__buffer {
|
||||
height: 8px;
|
||||
transition: height 0.1s ease;
|
||||
}
|
||||
|
||||
.plyr__progress {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.skip-marker {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 4px;
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
transition: height 0.1s ease;
|
||||
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
|
||||
border-left: 2px solid rgba(0,0,0,0);
|
||||
border-right: 2px solid rgba(0,0,0,0);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.plyr__progress__container:hover .skip-marker {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.skip-marker.op {
|
||||
background-color: var(--op-color);
|
||||
box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
|
||||
}
|
||||
|
||||
.skip-marker.ed {
|
||||
background-color: var(--ed-color);
|
||||
}
|
||||
|
||||
.player-loading-overlay {
|
||||
background: #000;
|
||||
}
|
||||
.spinner {
|
||||
border-width: 2px;
|
||||
width: 50px; height: 50px;
|
||||
border-top-color: #fff;
|
||||
border-right-color: rgba(255,255,255,0.1);
|
||||
border-bottom-color: rgba(255,255,255,0.1);
|
||||
border-left-color: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.settings-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px; /* Espacio entre los elementos */
|
||||
}
|
||||
|
||||
/* Opcional: Ajuste para pantallas móviles muy pequeñas */
|
||||
@media (max-width: 600px) {
|
||||
.settings-group {
|
||||
gap: 8px;
|
||||
}
|
||||
.glass-select {
|
||||
padding: 6px 10px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.player-container:fullscreen,
|
||||
.player-container:-webkit-full-screen {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #000;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
/* Controles custom SIEMPRE visibles encima */
|
||||
.player-container:fullscreen .player-header,
|
||||
.player-container:fullscreen .side-nav-btn,
|
||||
.player-container:fullscreen #skip-overlay-btn,
|
||||
.player-container:-webkit-full-screen .player-header,
|
||||
.player-container:-webkit-full-screen .side-nav-btn,
|
||||
.player-container:-webkit-full-screen #skip-overlay-btn {
|
||||
z-index: 2147483647 !important;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Posición correcta del botón Skip en fullscreen */
|
||||
.player-container:fullscreen #skip-overlay-btn,
|
||||
.player-container:-webkit-full-screen #skip-overlay-btn {
|
||||
bottom: 100px;
|
||||
right: 50px;
|
||||
}
|
||||
|
||||
/* ================= UI HIDDEN (UNA SOLA FUENTE DE VERDAD) ================= */
|
||||
|
||||
.player-container.ui-hidden .player-header,
|
||||
.player-container.ui-hidden .side-nav-btn {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
cursor: none;
|
||||
}
|
||||
#skip-overlay-btn {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#skip-overlay-btn.visible {
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.player-container.ui-hidden #skip-overlay-btn.visible {
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
cursor: pointer !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
.player-header,
|
||||
.side-nav-btn,
|
||||
#skip-overlay-btn {
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.player-container:fullscreen #skip-overlay-btn,
|
||||
.player-container:-webkit-full-screen #skip-overlay-btn {
|
||||
z-index: 2147483647 !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
.player-container:fullscreen #skip-overlay-btn.visible,
|
||||
.player-container:-webkit-full-screen #skip-overlay-btn.visible {
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
@@ -1,830 +0,0 @@
|
||||
.top-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: var(--spacing-lg) var(--spacing-xl);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0.8) 0%,
|
||||
transparent 100%
|
||||
);
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
pointer-events: auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
padding: 0.7rem 1.5rem;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-full);
|
||||
color: var(--color-text-primary);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
transition: all var(--transition-smooth);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-glow);
|
||||
}
|
||||
|
||||
.watch-container {
|
||||
max-width: 1600px;
|
||||
margin: var(--spacing-2xl) auto;
|
||||
padding: 0 var(--spacing-xl);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xl);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.player-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
flex-wrap: wrap;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.sd-toggle {
|
||||
display: flex;
|
||||
background: var(--color-bg-elevated);
|
||||
border: var(--border-subtle);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 4px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sd-option {
|
||||
padding: 0.6rem 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-muted);
|
||||
z-index: 2;
|
||||
transition: color var(--transition-base);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.sd-option.active {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.sd-bg {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
width: calc(50% - 4px);
|
||||
background: var(--color-primary);
|
||||
border-radius: var(--radius-full);
|
||||
transition: transform var(--transition-smooth);
|
||||
box-shadow: 0 4px 12px var(--color-primary-glow);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sd-toggle[data-state="dub"] .sd-bg {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.source-select {
|
||||
appearance: none;
|
||||
background-color: var(--color-bg-elevated);
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 1.2rem center;
|
||||
border: var(--border-subtle);
|
||||
color: var(--color-text-primary);
|
||||
padding: 0.7rem 2.8rem 0.7rem 1.2rem;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
min-width: 160px;
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.source-select:hover {
|
||||
border-color: var(--color-primary);
|
||||
background-color: var(--color-bg-card);
|
||||
}
|
||||
.source-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px var(--color-primary-glow);
|
||||
}
|
||||
|
||||
.video-container {
|
||||
aspect-ratio: 16/9;
|
||||
width: 100%;
|
||||
background: var(--color-bg-base);
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
var(--shadow-lg),
|
||||
0 0 0 1px var(--glass-border);
|
||||
position: relative;
|
||||
transition: box-shadow var(--transition-smooth);
|
||||
}
|
||||
|
||||
.video-container:hover {
|
||||
box-shadow:
|
||||
var(--shadow-lg),
|
||||
0 0 0 1px var(--color-primary),
|
||||
var(--shadow-glow);
|
||||
}
|
||||
|
||||
#player {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--color-bg-base);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 20;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.1);
|
||||
border-top-color: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-overlay p {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.episode-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-lg);
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.episode-info h1 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 800;
|
||||
margin: 0 0 var(--spacing-xs);
|
||||
}
|
||||
.episode-info p {
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.navigation-buttons {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
background: var(--color-bg-elevated);
|
||||
border: var(--border-subtle);
|
||||
color: var(--color-text-primary);
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.nav-btn:hover:not(:disabled) {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-glow);
|
||||
}
|
||||
.nav-btn:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.episode-carousel-compact {
|
||||
width: 100%;
|
||||
max-width: 1600px;
|
||||
margin-top: var(--spacing-lg);
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.carousel-header {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
padding: 0 var(--spacing-xl);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.carousel-header h2 {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 900;
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: -0.04em;
|
||||
border-left: 4px solid var(--color-primary);
|
||||
padding-left: var(--spacing-md);
|
||||
}
|
||||
|
||||
.carousel-nav {
|
||||
display: flex;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.carousel-arrow-mini {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: var(--color-bg-elevated);
|
||||
border: var(--border-subtle);
|
||||
border-radius: var(--radius-full);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.carousel-arrow-mini:hover {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-text-primary);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.carousel-arrow-mini[style*="opacity: 0.3"] {
|
||||
background: var(--color-bg-elevated);
|
||||
color: var(--color-text-muted);
|
||||
border-color: var(--border-subtle);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.episode-carousel-compact-list {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-sm) var(--spacing-xl);
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
mask-image: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
black var(--spacing-md),
|
||||
black calc(100% - var(--spacing-md)),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.episode-carousel-compact-list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
flex: 0 0 200px;
|
||||
height: 112px;
|
||||
|
||||
background: var(--color-bg-card);
|
||||
border: 2px solid var(--border-subtle);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition: all var(--transition-base);
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
scroll-snap-align: start;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.carousel-item:hover {
|
||||
border-color: var(--color-primary);
|
||||
transform: scale(1.02);
|
||||
box-shadow: var(--shadow-md), var(--shadow-glow);
|
||||
}
|
||||
|
||||
.carousel-item.active-ep-carousel {
|
||||
border-color: var(--color-primary);
|
||||
background: rgba(139, 92, 246, 0.15);
|
||||
box-shadow:
|
||||
0 0 0 2px var(--color-primary),
|
||||
var(--shadow-md);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.carousel-item.active-ep-carousel::after {
|
||||
content: "WATCHING";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-primary);
|
||||
padding: 2px 8px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 800;
|
||||
border-bottom-left-radius: var(--radius-sm);
|
||||
letter-spacing: 0.05em;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.carousel-item-img-container {
|
||||
height: 70px;
|
||||
background: var(--color-bg-elevated);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.carousel-item-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform var(--transition-smooth);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.carousel-item:hover .carousel-item-img {
|
||||
transform: scale(1.1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.carousel-item-info {
|
||||
flex: 1;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
background: var(--color-bg-elevated);
|
||||
}
|
||||
|
||||
.carousel-item-info p {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.carousel-item-info p::before {
|
||||
content: attr(data-episode-number);
|
||||
color: var(--color-primary);
|
||||
font-weight: 800;
|
||||
margin-right: var(--spacing-xs);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.carousel-item.no-thumbnail {
|
||||
flex: 0 0 160px;
|
||||
height: 90px;
|
||||
background: var(--color-bg-elevated);
|
||||
border: 2px solid var(--border-subtle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.carousel-item.no-thumbnail .carousel-item-info {
|
||||
padding: var(--spacing-sm);
|
||||
background: transparent;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.carousel-item.no-thumbnail .carousel-item-info p {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.carousel-item.no-thumbnail:hover {
|
||||
background: rgba(139, 92, 246, 0.12);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.carousel-item.no-thumbnail.active-ep-carousel .carousel-item-info p {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.anime-details,
|
||||
.anime-extra-content {
|
||||
max-width: 1600px;
|
||||
margin: var(--spacing-2xl) auto;
|
||||
}
|
||||
|
||||
.details-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-xl);
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-xl);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.details-cover {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-md);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.details-cover h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 900;
|
||||
color: var(--color-text-primary);
|
||||
line-height: 1.2;
|
||||
margin: 0 0 var(--spacing-md) 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
width: 220px;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.details-content h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.meta-badge {
|
||||
background: rgba(139, 92, 246, 0.12);
|
||||
color: var(--color-primary);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(139, 92, 246, 0.2);
|
||||
}
|
||||
|
||||
.meta-badge.meta-score {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
.details-description {
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.characters-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.characters-header h2 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 800;
|
||||
color: var(--color-text-primary);
|
||||
border-left: 5px solid var(--color-primary);
|
||||
padding-left: var(--spacing-md);
|
||||
}
|
||||
|
||||
.expand-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
padding: var(--spacing-xs);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.expand-btn:hover {
|
||||
background: rgba(139, 92, 246, 0.1);
|
||||
}
|
||||
.expand-btn svg {
|
||||
transition: transform var(--transition-smooth);
|
||||
}
|
||||
.expand-btn[data-expanded="true"] svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.characters-carousel {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-lg);
|
||||
align-content: flex-start;
|
||||
overflow: hidden;
|
||||
|
||||
height: 208px;
|
||||
transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding: 0 var(--spacing-sm);
|
||||
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.characters-carousel::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.characters-carousel.expanded {
|
||||
height: auto;
|
||||
max-height: 3200px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 0;
|
||||
|
||||
-ms-overflow-style: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.characters-carousel.expanded::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.characters-carousel.expanded::-webkit-scrollbar-thumb {
|
||||
background: rgba(139, 92, 246, 0.4);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.characters-carousel.expanded::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.plyr--video {
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
.plyr__controls {
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
rgba(0, 0, 0, 0.9) 0%,
|
||||
rgba(0, 0, 0, 0.5) 50%,
|
||||
transparent 100%
|
||||
) !important;
|
||||
padding: 1rem 1.5rem 1.5rem !important;
|
||||
}
|
||||
.plyr--full-ui input[type="range"] {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.plyr__control:hover {
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
}
|
||||
.plyr__menu__container {
|
||||
background: var(--glass-bg) !important;
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--shadow-lg) !important;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.carousel-nav {
|
||||
display: flex;
|
||||
}
|
||||
.watch-container {
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
.details-cover {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.details-cover h1 {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.watch-container {
|
||||
padding: 5rem 1rem 2rem 1rem;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.player-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.source-select {
|
||||
width: 100%;
|
||||
background-position: right 1.5rem center;
|
||||
}
|
||||
|
||||
.episode-controls {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.episode-info {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.episode-info h1 {
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.navigation-buttons {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
justify-content: center;
|
||||
padding: 0.8rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.details-container {
|
||||
flex-direction: column;
|
||||
padding: 1.5rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.details-cover {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.details-cover {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.details-cover h1 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
width: 140px;
|
||||
flex-shrink: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.details-content h1 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.characters-carousel {
|
||||
justify-content: center;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.character-card {
|
||||
width: calc(50% - 0.75rem);
|
||||
flex: 0 0 calc(50% - 0.75rem);
|
||||
}
|
||||
}
|
||||
|
||||
.plyr__progress {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.plyr__markers {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.plyr__marker {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
background: rgba(255, 215, 0, 0.8); /* Color dorado para Opening */
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.plyr__marker[data-label*="Ending"] {
|
||||
background: rgba(255, 100, 100, 0.8); /* Color rojo para Ending */
|
||||
}
|
||||
|
||||
.plyr__marker:hover {
|
||||
height: 120%;
|
||||
width: 4px;
|
||||
background: rgba(255, 215, 0, 1);
|
||||
}
|
||||
|
||||
.plyr__marker[data-label*="Ending"]:hover {
|
||||
background: rgba(255, 100, 100, 1);
|
||||
}
|
||||
|
||||
/* Tooltip para mostrar el label */
|
||||
.plyr__marker::before {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-8px);
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.plyr__marker:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
.plyr__marker {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -25,6 +25,11 @@ html.electron .panel-header {
|
||||
top: var(--titlebar-height) !important;
|
||||
}
|
||||
|
||||
html.electron .player-wrapper {
|
||||
top: var(--titlebar-height);
|
||||
height: calc(100% - var(--titlebar-height));
|
||||
}
|
||||
|
||||
html.electron .panel-content {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
@@ -45,10 +45,14 @@ const MEDIA_FIELDS = `
|
||||
relationType
|
||||
node {
|
||||
id
|
||||
title { romaji }
|
||||
title { romaji english }
|
||||
type
|
||||
format
|
||||
status
|
||||
coverImage { medium large color }
|
||||
bannerImage
|
||||
season
|
||||
seasonYear
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -70,12 +74,28 @@ const MEDIA_FIELDS = `
|
||||
mediaRecommendation {
|
||||
id
|
||||
title { romaji }
|
||||
coverImage { medium }
|
||||
coverImage { medium large}
|
||||
format
|
||||
type
|
||||
}
|
||||
}
|
||||
}
|
||||
characters(perPage: 12, sort: [ROLE, RELEVANCE]) {
|
||||
edges {
|
||||
role
|
||||
node {
|
||||
id
|
||||
name { full native }
|
||||
image { medium large }
|
||||
}
|
||||
voiceActors {
|
||||
id
|
||||
name { full }
|
||||
language
|
||||
image { medium }
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export async function refreshTrendingAnime(): Promise<void> {
|
||||
@@ -140,7 +160,19 @@ async function fetchAniList(query: string, variables: any) {
|
||||
export async function getAnimeById(id: string | number): Promise<Anime | { error: string }> {
|
||||
const row = await queryOne("SELECT full_data FROM anime WHERE id = ?", [id]);
|
||||
|
||||
if (row) return JSON.parse(row.full_data);
|
||||
if (row) {
|
||||
const cached = JSON.parse(row.full_data);
|
||||
|
||||
if (cached?.characters?.edges?.length) {
|
||||
return cached;
|
||||
}
|
||||
|
||||
await queryOne(
|
||||
"DELETE FROM anime WHERE id = ?",
|
||||
[id]
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const query = `
|
||||
query ($id: Int) {
|
||||
|
||||
@@ -1,326 +0,0 @@
|
||||
let animeData = null;
|
||||
let extensionName = null;
|
||||
let animeId = null;
|
||||
let isLocal = false;
|
||||
|
||||
const episodePagination = Object.create(PaginationManager);
|
||||
episodePagination.init(12, renderEpisodes);
|
||||
|
||||
YouTubePlayerUtils.init('player');
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadAnime();
|
||||
setupDescriptionModal();
|
||||
setupEpisodeSearch();
|
||||
});
|
||||
|
||||
function markAsLocal() {
|
||||
isLocal = true;
|
||||
const pill = document.getElementById('local-pill');
|
||||
if (!pill) return;
|
||||
|
||||
pill.textContent = 'Local';
|
||||
pill.style.display = 'inline-flex';
|
||||
pill.style.background = 'rgba(34,197,94,.2)';
|
||||
pill.style.color = '#22c55e';
|
||||
pill.style.borderColor = 'rgba(34,197,94,.3)';
|
||||
}
|
||||
|
||||
async function checkLocalLibraryEntry() {
|
||||
try {
|
||||
const res = await fetch(`/api/library/anime/${animeId}`);
|
||||
if (!res.ok) return;
|
||||
|
||||
markAsLocal();
|
||||
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
|
||||
async function loadAnime() {
|
||||
try {
|
||||
|
||||
const urlData = URLUtils.parseEntityPath('anime');
|
||||
if (!urlData) {
|
||||
showError("Invalid URL");
|
||||
return;
|
||||
}
|
||||
|
||||
extensionName = urlData.extensionName;
|
||||
animeId = urlData.entityId;
|
||||
await checkLocalLibraryEntry();
|
||||
|
||||
const fetchUrl = extensionName
|
||||
? `/api/anime/${animeId}?source=${extensionName}`
|
||||
: `/api/anime/${animeId}?source=anilist`;
|
||||
|
||||
const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() });
|
||||
const data = await res.json();
|
||||
|
||||
if (data.error) {
|
||||
showError("Anime Not Found");
|
||||
return;
|
||||
}
|
||||
|
||||
animeData = data;
|
||||
animeData.entry_type = 'ANIME';
|
||||
const metadata = MediaMetadataUtils.formatAnimeData(data, !!extensionName);
|
||||
|
||||
updatePageTitle(metadata.title);
|
||||
updateMetadata(metadata);
|
||||
updateDescription(data.description || data.summary);
|
||||
updateCharacters(metadata.characters);
|
||||
updateExtensionPill();
|
||||
|
||||
setupWatchButton();
|
||||
|
||||
const hasTrailer = YouTubePlayerUtils.playTrailer(
|
||||
metadata.trailer,
|
||||
'player',
|
||||
metadata.banner
|
||||
);
|
||||
|
||||
setupEpisodes(metadata.episodes);
|
||||
|
||||
await setupAddToListButton();
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error loading anime:', err);
|
||||
showError("Error loading anime");
|
||||
}
|
||||
}
|
||||
|
||||
function updatePageTitle(title) {
|
||||
document.title = `${title} | WaifuBoard`;
|
||||
document.getElementById('title').innerText = title;
|
||||
}
|
||||
|
||||
function updateMetadata(metadata) {
|
||||
|
||||
if (metadata.poster) {
|
||||
document.getElementById('poster').src = metadata.poster;
|
||||
}
|
||||
|
||||
document.getElementById('score').innerText = `${metadata.score}% Score`;
|
||||
|
||||
document.getElementById('year').innerText = metadata.year;
|
||||
|
||||
document.getElementById('genres').innerText = metadata.genres;
|
||||
|
||||
document.getElementById('format').innerText = metadata.format;
|
||||
|
||||
document.getElementById('status').innerText = metadata.status;
|
||||
|
||||
document.getElementById('season').innerText = metadata.season;
|
||||
|
||||
document.getElementById('studio').innerText = metadata.studio;
|
||||
|
||||
document.getElementById('episodes').innerText = metadata.episodes;
|
||||
}
|
||||
|
||||
function updateDescription(rawDescription) {
|
||||
const desc = MediaMetadataUtils.truncateDescription(rawDescription, 4);
|
||||
|
||||
document.getElementById('description-preview').innerHTML = desc.short;
|
||||
document.getElementById('full-description').innerHTML = desc.full;
|
||||
|
||||
const readMoreBtn = document.getElementById('read-more-btn');
|
||||
if (desc.isTruncated) {
|
||||
readMoreBtn.style.display = 'inline-flex';
|
||||
} else {
|
||||
readMoreBtn.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function updateCharacters(characters) {
|
||||
const container = document.getElementById('char-list');
|
||||
container.innerHTML = '';
|
||||
|
||||
if (characters.length > 0) {
|
||||
characters.forEach(char => {
|
||||
container.innerHTML += `
|
||||
<div class="character-item">
|
||||
<div class="char-dot"></div> ${char.name}
|
||||
</div>`;
|
||||
});
|
||||
} else {
|
||||
container.innerHTML = `
|
||||
<div class="character-item" style="color: #666;">
|
||||
No character data available
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function updateExtensionPill() {
|
||||
const pill = document.getElementById('extension-pill');
|
||||
if (!pill) return;
|
||||
|
||||
if (extensionName) {
|
||||
pill.textContent = extensionName.charAt(0).toUpperCase() + extensionName.slice(1).toLowerCase();
|
||||
pill.style.display = 'inline-flex';
|
||||
} else {
|
||||
pill.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function setupWatchButton() {
|
||||
const watchBtn = document.getElementById('watch-btn');
|
||||
if (watchBtn) {
|
||||
watchBtn.onclick = () => {
|
||||
const source = isLocal ? 'local' : (extensionName || 'anilist');
|
||||
window.location.href = URLUtils.buildWatchUrl(animeId, num, source);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
async function setupAddToListButton() {
|
||||
const btn = document.getElementById('add-to-list-btn');
|
||||
if (!btn || !animeData) return;
|
||||
|
||||
ListModalManager.currentData = animeData;
|
||||
const entryType = ListModalManager.getEntryType(animeData);
|
||||
|
||||
await ListModalManager.checkIfInList(animeId, extensionName || 'anilist', entryType);
|
||||
|
||||
const tempBtn = document.querySelector('.hero-buttons .btn-blur');
|
||||
if (tempBtn) {
|
||||
ListModalManager.updateButton('.hero-buttons .btn-blur');
|
||||
} else {
|
||||
|
||||
updateCustomAddButton();
|
||||
}
|
||||
|
||||
btn.onclick = () => ListModalManager.open(animeData, extensionName || 'anilist');
|
||||
}
|
||||
|
||||
function updateCustomAddButton() {
|
||||
const btn = document.getElementById('add-to-list-btn');
|
||||
if (!btn) return;
|
||||
|
||||
if (ListModalManager.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;
|
||||
}
|
||||
}
|
||||
|
||||
function setupEpisodes(totalEpisodes) {
|
||||
|
||||
const limitedTotal = Math.min(Math.max(totalEpisodes, 1), 5000);
|
||||
|
||||
episodePagination.setTotalItems(limitedTotal);
|
||||
renderEpisodes();
|
||||
}
|
||||
|
||||
function renderEpisodes() {
|
||||
const grid = document.getElementById('episodes-grid');
|
||||
if (!grid) return;
|
||||
|
||||
grid.innerHTML = '';
|
||||
|
||||
const range = episodePagination.getPageRange();
|
||||
const start = range.start + 1;
|
||||
|
||||
const end = range.end;
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
createEpisodeButton(i, grid);
|
||||
}
|
||||
|
||||
episodePagination.renderControls(
|
||||
'pagination-controls',
|
||||
'page-info',
|
||||
'prev-page',
|
||||
'next-page'
|
||||
);
|
||||
}
|
||||
|
||||
function createEpisodeButton(num, container) {
|
||||
const btn = document.createElement('div');
|
||||
btn.className = 'episode-btn';
|
||||
btn.innerText = `Ep ${num}`;
|
||||
btn.onclick = () => {
|
||||
const source = isLocal ? 'local' : (extensionName || 'anilist');
|
||||
window.location.href = URLUtils.buildWatchUrl(animeId, num, source);
|
||||
};
|
||||
container.appendChild(btn);
|
||||
}
|
||||
|
||||
function setupDescriptionModal() {
|
||||
const modal = document.getElementById('desc-modal');
|
||||
if (!modal) return;
|
||||
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target.id === 'desc-modal') {
|
||||
closeDescriptionModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openDescriptionModal() {
|
||||
document.getElementById('desc-modal').classList.add('active');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeDescriptionModal() {
|
||||
document.getElementById('desc-modal').classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
function setupEpisodeSearch() {
|
||||
const searchInput = document.getElementById('ep-search');
|
||||
if (!searchInput) return;
|
||||
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
const val = parseInt(e.target.value);
|
||||
const grid = document.getElementById('episodes-grid');
|
||||
const totalEpisodes = episodePagination.totalItems;
|
||||
|
||||
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';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
document.getElementById('title').innerText = message;
|
||||
}
|
||||
|
||||
function saveToList() {
|
||||
if (!animeId) return;
|
||||
ListModalManager.save(animeId, extensionName || 'anilist');
|
||||
}
|
||||
|
||||
function deleteFromList() {
|
||||
if (!animeId) return;
|
||||
ListModalManager.delete(animeId, extensionName || 'anilist');
|
||||
}
|
||||
|
||||
function closeAddToListModal() {
|
||||
ListModalManager.close();
|
||||
}
|
||||
|
||||
window.openDescriptionModal = openDescriptionModal;
|
||||
window.closeDescriptionModal = closeDescriptionModal;
|
||||
window.changePage = (delta) => {
|
||||
if (delta > 0) episodePagination.nextPage();
|
||||
else episodePagination.prevPage();
|
||||
};
|
||||
408
docker/src/scripts/anime/entry.js
Normal file
408
docker/src/scripts/anime/entry.js
Normal file
@@ -0,0 +1,408 @@
|
||||
let animeData = null;
|
||||
let extensionName = null;
|
||||
|
||||
let animeId = null;
|
||||
let isLocal = false;
|
||||
|
||||
const episodePagination = Object.create(PaginationManager);
|
||||
episodePagination.init(50, renderEpisodes);
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadAnimeData();
|
||||
setupDescriptionModal();
|
||||
setupEpisodeSearch();
|
||||
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const initialEp = urlParams.get('episode');
|
||||
|
||||
if (initialEp) {
|
||||
setTimeout(() => {
|
||||
if (animeData) {
|
||||
|
||||
const source = isLocal ? 'local' : (extensionName || 'anilist');
|
||||
|
||||
if (typeof AnimePlayer !== 'undefined') {
|
||||
AnimePlayer.init(animeId, source, isLocal, animeData);
|
||||
AnimePlayer.playEpisode(parseInt(initialEp));
|
||||
}
|
||||
}
|
||||
}, 800);
|
||||
}
|
||||
});
|
||||
|
||||
async function loadAnimeData() {
|
||||
try {
|
||||
|
||||
const pathParts = window.location.pathname.split('/');
|
||||
|
||||
const cleanParts = pathParts.filter(p => p.length > 0);
|
||||
|
||||
if (cleanParts.length >= 3 && cleanParts[0] === 'anime') {
|
||||
|
||||
extensionName = cleanParts[1];
|
||||
animeId = cleanParts[2];
|
||||
} else if (cleanParts.length === 2 && cleanParts[0] === 'anime') {
|
||||
|
||||
extensionName = null;
|
||||
|
||||
animeId = cleanParts[1];
|
||||
} else {
|
||||
showError("Invalid URL Format");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const localRes = await fetch(`/api/library/anime/${animeId}`);
|
||||
if (localRes.ok) isLocal = true;
|
||||
} catch {}
|
||||
|
||||
const fetchUrl = extensionName
|
||||
? `/api/anime/${animeId}?source=${extensionName}`
|
||||
: `/api/anime/${animeId}?source=anilist`;
|
||||
|
||||
const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() });
|
||||
const data = await res.json();
|
||||
|
||||
if (data.error) {
|
||||
showError("Anime Not Found");
|
||||
return;
|
||||
}
|
||||
|
||||
animeData = data;
|
||||
animeData.entry_type = 'ANIME';
|
||||
|
||||
const metadata = MediaMetadataUtils.formatAnimeData(data, !!extensionName);
|
||||
|
||||
document.title = `${metadata.title} | WaifuBoard`;
|
||||
document.getElementById('title').innerText = metadata.title;
|
||||
if (metadata.poster) document.getElementById('poster').src = metadata.poster;
|
||||
|
||||
document.getElementById('score').innerText = `${metadata.score}% Score`;
|
||||
document.getElementById('year').innerText = metadata.year;
|
||||
document.getElementById('genres').innerText = metadata.genres.split(',').join(' • ');
|
||||
document.getElementById('format').innerText = metadata.format;
|
||||
document.getElementById('status').innerText = metadata.status;
|
||||
document.getElementById('season').innerText = metadata.season;
|
||||
document.getElementById('studio').innerText = metadata.studio;
|
||||
document.getElementById('episodes').innerText = `${metadata.episodes} Ep`;
|
||||
|
||||
updateLocalPill();
|
||||
updateDescription(data.description || data.summary);
|
||||
updateRelations(data.relations?.edges);
|
||||
updateCharacters(metadata.characters);
|
||||
updateRecommendations(data.recommendations?.nodes);
|
||||
|
||||
const source = isLocal ? 'local' : (extensionName || 'anilist');
|
||||
|
||||
if (typeof AnimePlayer !== 'undefined') {
|
||||
AnimePlayer.init(animeId, source, isLocal, animeData);
|
||||
}
|
||||
|
||||
YouTubePlayerUtils.init('trailer-player');
|
||||
YouTubePlayerUtils.playTrailer(metadata.trailer, 'trailer-player', metadata.banner);
|
||||
|
||||
const watchBtn = document.getElementById('watch-btn');
|
||||
if (watchBtn) {
|
||||
watchBtn.onclick = () => {
|
||||
if (typeof AnimePlayer !== 'undefined') AnimePlayer.playEpisode(1);
|
||||
};
|
||||
}
|
||||
|
||||
const total = metadata.episodes || 12;
|
||||
setupEpisodes(total);
|
||||
|
||||
setupAddToListButton();
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error loading anime details:', err);
|
||||
showError("Error loading anime");
|
||||
}
|
||||
}
|
||||
|
||||
function updateLocalPill() {
|
||||
if (isLocal) {
|
||||
const pill = document.getElementById('local-pill');
|
||||
if(pill) pill.style.display = 'inline-flex';
|
||||
}
|
||||
if (extensionName) {
|
||||
const pill = document.getElementById('extension-pill');
|
||||
if(pill) {
|
||||
pill.innerText = extensionName;
|
||||
pill.style.display = 'inline-flex';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateDescription(rawDescription) {
|
||||
const desc = MediaMetadataUtils.truncateDescription(rawDescription, 3);
|
||||
const previewEl = document.getElementById('description-preview');
|
||||
const fullEl = document.getElementById('full-description');
|
||||
|
||||
if (previewEl) {
|
||||
previewEl.innerHTML = desc.short +
|
||||
(desc.isTruncated ? ' <span onclick="openDescriptionModal()" style="color:white; cursor:pointer; font-weight:700; margin-left:5px;">Read more</span>' : '');
|
||||
}
|
||||
if (fullEl) fullEl.innerHTML = desc.full;
|
||||
}
|
||||
|
||||
function setupDescriptionModal() {
|
||||
const modal = document.getElementById('desc-modal');
|
||||
if (!modal) return;
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target.id === 'desc-modal') {
|
||||
closeDescriptionModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openDescriptionModal() {
|
||||
const modal = document.getElementById('desc-modal');
|
||||
if(modal) modal.classList.add('active');
|
||||
}
|
||||
|
||||
function closeDescriptionModal() {
|
||||
const modal = document.getElementById('desc-modal');
|
||||
if(modal) modal.classList.remove('active');
|
||||
}
|
||||
|
||||
function setupEpisodes(totalEpisodes) {
|
||||
const limitedTotal = Math.min(Math.max(totalEpisodes, 1), 5000);
|
||||
episodePagination.setTotalItems(limitedTotal);
|
||||
renderEpisodes();
|
||||
}
|
||||
|
||||
function renderEpisodes() {
|
||||
const grid = document.getElementById('episodes-grid');
|
||||
if (!grid) return;
|
||||
grid.innerHTML = '';
|
||||
|
||||
const range = episodePagination.getPageRange();
|
||||
const currentEp = (typeof AnimePlayer !== 'undefined') ? AnimePlayer.getCurrentEpisode() : 0;
|
||||
|
||||
for (let i = range.start + 1; i <= range.end; i++) {
|
||||
const btn = document.createElement('div');
|
||||
btn.className = 'episode-btn';
|
||||
if (currentEp === i) btn.classList.add('active-playing');
|
||||
|
||||
btn.innerText = i;
|
||||
|
||||
btn.onclick = () => {
|
||||
if (typeof AnimePlayer !== 'undefined') {
|
||||
AnimePlayer.playEpisode(i);
|
||||
renderEpisodes();
|
||||
}
|
||||
};
|
||||
grid.appendChild(btn);
|
||||
}
|
||||
|
||||
const totalItems = episodePagination.totalItems || 0;
|
||||
const itemsPerPage = episodePagination.itemsPerPage || 50;
|
||||
const safeTotalPages = Math.ceil(totalItems / itemsPerPage) || 1;
|
||||
|
||||
const info = document.getElementById('page-info');
|
||||
if(info) info.innerText = `Page ${episodePagination.currentPage} of ${safeTotalPages}`;
|
||||
|
||||
const prevBtn = document.getElementById('prev-page');
|
||||
const nextBtn = document.getElementById('next-page');
|
||||
|
||||
if(prevBtn) {
|
||||
prevBtn.disabled = episodePagination.currentPage === 1;
|
||||
prevBtn.onclick = () => { episodePagination.prevPage(); };
|
||||
}
|
||||
|
||||
if(nextBtn) {
|
||||
|
||||
nextBtn.disabled = episodePagination.currentPage >= safeTotalPages;
|
||||
nextBtn.onclick = () => { episodePagination.nextPage(); };
|
||||
}
|
||||
}
|
||||
|
||||
function setupEpisodeSearch() {
|
||||
const searchInput = document.getElementById('ep-search');
|
||||
if (!searchInput) return;
|
||||
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
const val = parseInt(e.target.value);
|
||||
const grid = document.getElementById('episodes-grid');
|
||||
const controls = document.getElementById('pagination-controls');
|
||||
|
||||
if (val > 0) {
|
||||
grid.innerHTML = '';
|
||||
const btn = document.createElement('div');
|
||||
btn.className = 'episode-btn';
|
||||
btn.innerText = `${val}`;
|
||||
btn.onclick = () => { if (typeof AnimePlayer !== 'undefined') AnimePlayer.playEpisode(val); };
|
||||
grid.appendChild(btn);
|
||||
if(controls) controls.style.display = 'none';
|
||||
} else if (!e.target.value) {
|
||||
if(controls) controls.style.display = 'flex';
|
||||
renderEpisodes();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateCharacters(characters) {
|
||||
const container = document.getElementById('char-list');
|
||||
if (!container) return;
|
||||
container.innerHTML = '';
|
||||
if (!characters || characters.length === 0) return;
|
||||
|
||||
characters.forEach((char, index) => {
|
||||
const img = char.node?.image?.large || char.image;
|
||||
const name = char.node?.name?.full || char.name;
|
||||
const role = char.role || 'Supporting';
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = `character-item ${index >= 12 ? 'hidden-char' : ''}`;
|
||||
card.style.display = index >= 12 ? 'none' : 'flex';
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="char-avatar"><img src="${img}" loading="lazy"></div>
|
||||
<div class="char-info"><div class="char-name">${name}</div><div class="char-role">${role}</div></div>
|
||||
`;
|
||||
container.appendChild(card);
|
||||
});
|
||||
|
||||
const showMoreBtn = document.getElementById('show-more-chars');
|
||||
if (showMoreBtn) {
|
||||
if (characters.length > 12) {
|
||||
showMoreBtn.style.display = 'block';
|
||||
showMoreBtn.onclick = () => {
|
||||
document.querySelectorAll('.hidden-char').forEach(el => el.style.display = 'flex');
|
||||
showMoreBtn.style.display = 'none';
|
||||
};
|
||||
} else {
|
||||
showMoreBtn.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateRelations(relations) {
|
||||
const container = document.getElementById('relations-grid');
|
||||
const section = document.getElementById('relations-section');
|
||||
|
||||
if (!container || !relations || relations.length === 0) {
|
||||
if (section) section.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
section.style.display = 'block';
|
||||
container.innerHTML = '';
|
||||
|
||||
const priorityMap = {
|
||||
'ADAPTATION': 1,
|
||||
'PREQUEL': 2,
|
||||
'SEQUEL': 3,
|
||||
'PARENT': 4,
|
||||
'SIDE_STORY': 5,
|
||||
'SPIN_OFF': 6,
|
||||
'ALTERNATIVE': 7,
|
||||
'CHARACTER': 8,
|
||||
'OTHER': 99
|
||||
};
|
||||
|
||||
relations.sort((a, b) => {
|
||||
const pA = priorityMap[a.relationType] || 50;
|
||||
const pB = priorityMap[b.relationType] || 50;
|
||||
return pA - pB;
|
||||
});
|
||||
|
||||
relations.forEach(rel => {
|
||||
const media = rel.node;
|
||||
if (!media) return;
|
||||
|
||||
const title = media.title?.romaji || media.title?.english || 'Unknown';
|
||||
const cover = media.coverImage?.large || media.coverImage?.medium || '';
|
||||
|
||||
const typeDisplay = rel.relationType ? rel.relationType.replace(/_/g, ' ') : 'RELATION';
|
||||
const rawType = rel.relationType;
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.className = 'relation-card-horizontal';
|
||||
|
||||
let targetUrl = null;
|
||||
|
||||
if (rawType === 'ADAPTATION') {
|
||||
targetUrl = `/book/${media.id}`;
|
||||
|
||||
} else if (media.type === 'ANIME' && rawType !== 'OTHER') {
|
||||
targetUrl = `/anime/${media.id}`;
|
||||
|
||||
}
|
||||
|
||||
if (targetUrl) {
|
||||
el.onclick = () => { window.location.href = targetUrl; };
|
||||
} else {
|
||||
el.classList.add('no-link');
|
||||
|
||||
el.onclick = null;
|
||||
}
|
||||
|
||||
el.innerHTML = `
|
||||
<img src="${cover}" class="rel-img" alt="${title}" onerror="this.src='/public/assets/placeholder.svg'">
|
||||
<div class="rel-info">
|
||||
<span class="rel-type">${typeDisplay}</span>
|
||||
<span class="rel-title">${title}</span>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(el);
|
||||
});
|
||||
}
|
||||
|
||||
function updateRecommendations(recommendations) {
|
||||
const container = document.getElementById('recommendations-grid');
|
||||
if (!container || !recommendations) return;
|
||||
container.innerHTML = '';
|
||||
|
||||
recommendations.forEach(rec => {
|
||||
const media = rec.mediaRecommendation;
|
||||
if (!media) return;
|
||||
|
||||
const title = media.title?.romaji || 'Unknown';
|
||||
const cover = media.coverImage?.large || media.coverImage?.medium || '';
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.className = 'card';
|
||||
|
||||
el.onclick = () => { window.location.href = `/anime/${media.id}`; };
|
||||
|
||||
el.innerHTML = `
|
||||
<div class="card-img-wrap"><img src="${cover}" loading="lazy" onerror="this.src='/public/assets/no-cover.jpg'"></div>
|
||||
<div class="card-content"><h3>${title}</h3></div>
|
||||
`;
|
||||
container.appendChild(el);
|
||||
});
|
||||
}
|
||||
|
||||
async function setupAddToListButton() {
|
||||
const btn = document.getElementById('add-to-list-btn');
|
||||
if (!btn || !animeData) return;
|
||||
|
||||
ListModalManager.currentData = animeData;
|
||||
const entryType = 'ANIME';
|
||||
await ListModalManager.checkIfInList(animeId, extensionName || 'anilist', entryType);
|
||||
updateCustomAddButton();
|
||||
btn.onclick = () => ListModalManager.open(animeData, extensionName || 'anilist');
|
||||
}
|
||||
|
||||
function updateCustomAddButton() {
|
||||
const btn = document.getElementById('add-to-list-btn');
|
||||
if (btn && ListModalManager.isInList) {
|
||||
btn.innerHTML = `✓ In Your List`;
|
||||
btn.style.background = 'rgba(34, 197, 94, 0.2)';
|
||||
btn.style.borderColor = '#22c55e';
|
||||
btn.style.color = '#22c55e';
|
||||
}
|
||||
}
|
||||
|
||||
function showError(msg) {
|
||||
const el = document.getElementById('title');
|
||||
if(el) el.innerText = msg;
|
||||
}
|
||||
|
||||
window.openDescriptionModal = openDescriptionModal;
|
||||
window.closeDescriptionModal = closeDescriptionModal;
|
||||
window.scrollRecommendations = (dir) => {
|
||||
const el = document.getElementById('recommendations-grid');
|
||||
if(el) el.scrollBy({ left: 240 * 3 * dir, behavior: 'smooth' });
|
||||
};
|
||||
@@ -1,335 +1,334 @@
|
||||
const pathParts = window.location.pathname.split('/');
|
||||
const animeId = pathParts[2];
|
||||
const currentEpisode = parseInt(pathParts[3]);
|
||||
const AnimePlayer = (function() {
|
||||
|
||||
let audioMode = 'sub';
|
||||
let currentExtension = '';
|
||||
let plyrInstance;
|
||||
let hlsInstance;
|
||||
let totalEpisodes = 0;
|
||||
let animeTitle = "";
|
||||
let aniSkipData = null;
|
||||
let _animeId = null;
|
||||
let _currentEpisode = 0;
|
||||
let _entrySource = 'anilist';
|
||||
let _audioMode = 'sub';
|
||||
let _isLocal = false;
|
||||
let _malId = null;
|
||||
let _skipBtn = null;
|
||||
let _skipIntervals = [];
|
||||
let _progressUpdated = false;
|
||||
|
||||
let isAnilist = false;
|
||||
let malId = null;
|
||||
let _localEntryId = null;
|
||||
let _totalEpisodes = 0;
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const firstKey = params.keys().next().value;
|
||||
let extName;
|
||||
if (firstKey) extName = firstKey;
|
||||
let plyrInstance = null;
|
||||
let hlsInstance = null;
|
||||
|
||||
// URL de retroceso: Si es local, volvemos a la vista de Anilist normal
|
||||
const href = (extName && extName !== 'local')
|
||||
? `/anime/${extName}/${animeId}`
|
||||
: `/anime/${animeId}`;
|
||||
const els = {
|
||||
wrapper: null,
|
||||
playerWrapper: null,
|
||||
video: null,
|
||||
loader: null,
|
||||
loaderText: null,
|
||||
serverSelect: null,
|
||||
extSelect: null,
|
||||
subDubToggle: null,
|
||||
epTitle: null
|
||||
};
|
||||
|
||||
document.getElementById('back-link').href = href;
|
||||
document.getElementById('episode-label').innerText = `Episode ${currentEpisode}`;
|
||||
function init(animeId, initialSource, isLocal, animeData) {
|
||||
_animeId = animeId;
|
||||
_entrySource = initialSource || 'anilist';
|
||||
_isLocal = isLocal;
|
||||
_malId = animeData.idMal || null;
|
||||
|
||||
// Guardar total de episodios (por defecto 1000 si no hay info)
|
||||
_totalEpisodes = animeData.episodes || 1000;
|
||||
|
||||
let localEntryId = null;
|
||||
_skipIntervals = [];
|
||||
_localEntryId = null;
|
||||
|
||||
async function checkLocal() {
|
||||
// --- 1. REFERENCIAS BÁSICAS DEL DOM (Asegúrate de tener todas estas) ---
|
||||
els.wrapper = document.getElementById('hero-wrapper');
|
||||
els.playerWrapper = document.getElementById('player-wrapper');
|
||||
els.video = document.getElementById('player');
|
||||
els.loader = document.getElementById('player-loading');
|
||||
els.loaderText = document.getElementById('player-loading-text');
|
||||
|
||||
// --- 2. REFERENCIAS QUE FALTABAN (Causantes del error) ---
|
||||
els.serverSelect = document.getElementById('server-select');
|
||||
els.extSelect = document.getElementById('extension-select');
|
||||
els.subDubToggle = document.getElementById('sd-toggle');
|
||||
els.epTitle = document.getElementById('player-episode-title');
|
||||
|
||||
// --- 3. REFERENCIAS DE NAVEGACIÓN (Nuevas) ---
|
||||
els.prevBtn = document.getElementById('prev-ep-btn');
|
||||
els.nextBtn = document.getElementById('next-ep-btn');
|
||||
|
||||
const closeBtn = document.getElementById('close-player-btn');
|
||||
if(closeBtn) closeBtn.addEventListener('click', closePlayer);
|
||||
|
||||
// --- 4. CONFIGURACIÓN DE NAVEGACIÓN ---
|
||||
if(els.prevBtn) els.prevBtn.addEventListener('click', () => playEpisode(_currentEpisode - 1));
|
||||
if(els.nextBtn) els.nextBtn.addEventListener('click', () => playEpisode(_currentEpisode + 1));
|
||||
|
||||
// --- 5. CONFIGURACIÓN BOTÓN FLOTANTE (SKIP/NEXT) ---
|
||||
if (!document.getElementById('skip-overlay-btn')) {
|
||||
const btn = document.createElement('button');
|
||||
btn.id = 'skip-overlay-btn';
|
||||
// No le ponemos contenido inicial, se maneja dinámicamente
|
||||
const container = document.querySelector('.player-container');
|
||||
container.appendChild(btn);
|
||||
_skipBtn = btn;
|
||||
} else {
|
||||
_skipBtn = document.getElementById('skip-overlay-btn');
|
||||
}
|
||||
|
||||
// Listener único para el botón flotante
|
||||
_skipBtn.onclick = () => handleOverlayClick();
|
||||
|
||||
// --- 6. LISTENERS DE CONTROLES (Audio, Servers, Ext) ---
|
||||
if(els.subDubToggle) els.subDubToggle.addEventListener('click', toggleAudioMode);
|
||||
if(els.serverSelect) els.serverSelect.addEventListener('change', () => loadStream());
|
||||
if(els.extSelect) els.extSelect.addEventListener('change', () => handleExtensionChange(true));
|
||||
|
||||
// Cargar lista inicial
|
||||
loadExtensionsList();
|
||||
}
|
||||
|
||||
function handleOverlayClick() {
|
||||
if (!_skipBtn) return;
|
||||
|
||||
// Si es modo "Next Episode"
|
||||
if (_skipBtn.classList.contains('is-next')) {
|
||||
playEpisode(_currentEpisode + 1);
|
||||
}
|
||||
// Si es modo "Skip Intro/Ending" (saltar tiempo)
|
||||
else if (_skipBtn.dataset.seekTo) {
|
||||
els.video.currentTime = parseFloat(_skipBtn.dataset.seekTo);
|
||||
}
|
||||
|
||||
// Ocultar tras click
|
||||
_skipBtn.classList.remove('visible');
|
||||
}
|
||||
|
||||
async function getLocalEntryId() {
|
||||
if (_localEntryId) return _localEntryId;
|
||||
try {
|
||||
const res = await fetch(`/api/library/anime/${animeId}`);
|
||||
|
||||
const res = await fetch(`/api/library/anime/${_animeId}`);
|
||||
if (!res.ok) return null;
|
||||
const data = await res.json();
|
||||
return data.id;
|
||||
} catch {
|
||||
_localEntryId = data.id;
|
||||
|
||||
return _localEntryId;
|
||||
} catch (e) {
|
||||
console.error("Error fetching local ID:", e);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadAniSkip(malId, episode, duration) {
|
||||
try {
|
||||
const res = await fetch(`https://api.aniskip.com/v2/skip-times/${malId}/${episode}?types[]=op&types[]=ed&episodeLength=${duration}`);
|
||||
if (!res.ok) return null;
|
||||
const data = await res.json();
|
||||
return data.results || [];
|
||||
} catch (error) {
|
||||
console.error('Error loading AniSkip data:', error);
|
||||
return null;
|
||||
}
|
||||
function playEpisode(episodeNumber) {
|
||||
const targetEp = parseInt(episodeNumber);
|
||||
|
||||
// Validar límites
|
||||
if (targetEp < 1 || targetEp > _totalEpisodes) return;
|
||||
|
||||
_currentEpisode = targetEp;
|
||||
|
||||
// Actualizar UI
|
||||
if(els.epTitle) els.epTitle.innerText = `Episode ${targetEp}`;
|
||||
|
||||
// Habilitar/Deshabilitar flechas de navegación
|
||||
if(els.prevBtn) els.prevBtn.disabled = (_currentEpisode <= 1);
|
||||
if(els.nextBtn) els.nextBtn.disabled = (_currentEpisode >= _totalEpisodes);
|
||||
|
||||
// Ocultar botón flotante al cambiar de cap
|
||||
if(_skipBtn) {
|
||||
_skipBtn.classList.remove('visible');
|
||||
_skipBtn.classList.remove('is-next');
|
||||
}
|
||||
|
||||
async function loadMetadata() {
|
||||
localEntryId = await checkLocal();
|
||||
try {
|
||||
const sourceQuery = (extName === 'local' || !extName) ? "source=anilist" : `source=${extName}`;
|
||||
const res = await fetch(`/api/anime/${animeId}?${sourceQuery}`);
|
||||
const data = await res.json();
|
||||
// URL Update y lógica existente...
|
||||
const newUrl = new URL(window.location);
|
||||
newUrl.searchParams.set('episode', targetEp);
|
||||
window.history.pushState({}, '', newUrl);
|
||||
|
||||
if (data.error) {
|
||||
console.error("Error from API:", data.error);
|
||||
if(els.playerWrapper) els.playerWrapper.style.display = 'block';
|
||||
document.body.classList.add('stop-scrolling');
|
||||
|
||||
// Pausar trailer fondo si existe
|
||||
const trailer = document.querySelector('#trailer-player iframe');
|
||||
if(trailer) trailer.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
|
||||
|
||||
if (els.extSelect.value === 'local') {
|
||||
loadStream();
|
||||
return;
|
||||
}
|
||||
|
||||
const isAnilistFormat = data.title && (data.title.romaji || data.title.english);
|
||||
|
||||
let title = '', description = '', coverImage = '', averageScore = '', format = '', seasonYear = '', season = '';
|
||||
|
||||
if (isAnilistFormat) {
|
||||
title = data.title.romaji || data.title.english || data.title.native || 'Anime Title';
|
||||
description = data.description || 'No description available.';
|
||||
coverImage = data.coverImage?.large || data.coverImage?.medium || '';
|
||||
averageScore = data.averageScore ? `${data.averageScore}%` : '--';
|
||||
format = data.format || '--';
|
||||
season = data.season ? data.season.charAt(0) + data.season.slice(1).toLowerCase() : '';
|
||||
seasonYear = data.seasonYear || '';
|
||||
if (els.serverSelect.options.length === 0) {
|
||||
handleExtensionChange(true);
|
||||
} else {
|
||||
title = data.title || 'Anime Title';
|
||||
description = data.summary || 'No description available.';
|
||||
coverImage = data.image || '';
|
||||
averageScore = data.score ? `${Math.round(data.score * 10)}%` : '--';
|
||||
format = '--';
|
||||
season = data.season || '';
|
||||
seasonYear = data.year || '';
|
||||
}
|
||||
|
||||
if (isAnilistFormat && data.idMal) {
|
||||
isAnilist = true;
|
||||
malId = data.idMal;
|
||||
} else {
|
||||
isAnilist = false;
|
||||
malId = null;
|
||||
}
|
||||
|
||||
document.getElementById('anime-title-details').innerText = title;
|
||||
document.getElementById('anime-title-details2').innerText = title;
|
||||
animeTitle = title;
|
||||
document.title = `Watching ${title} - Ep ${currentEpisode}`;
|
||||
|
||||
const tempDiv = document.createElement('div');
|
||||
tempDiv.innerHTML = description;
|
||||
document.getElementById('detail-description').innerText = tempDiv.textContent || tempDiv.innerText || 'No description available.';
|
||||
|
||||
document.getElementById('detail-format').innerText = format;
|
||||
document.getElementById('detail-score').innerText = averageScore;
|
||||
document.getElementById('detail-season').innerText = season && seasonYear ? `${season} ${seasonYear}` : (season || seasonYear || '--');
|
||||
document.getElementById('detail-cover-image').src = coverImage || '/default-cover.jpg';
|
||||
|
||||
// Solo cargamos episodios de extensión si hay extensión real y no es local
|
||||
if (extName && extName !== 'local') {
|
||||
await loadExtensionEpisodes();
|
||||
} else {
|
||||
if (data.nextAiringEpisode?.episode) {
|
||||
totalEpisodes = data.nextAiringEpisode.episode - 1;
|
||||
} else if (data.episodes) {
|
||||
totalEpisodes = data.episodes;
|
||||
} else {
|
||||
totalEpisodes = 12;
|
||||
}
|
||||
const simpleEpisodes = [];
|
||||
for (let i = 1; i <= totalEpisodes; i++) {
|
||||
simpleEpisodes.push({ number: i, title: null, thumbnail: null, isDub: false });
|
||||
}
|
||||
populateEpisodeCarousel(simpleEpisodes);
|
||||
}
|
||||
|
||||
if (currentEpisode >= totalEpisodes && totalEpisodes > 0) {
|
||||
document.getElementById('next-btn').disabled = true;
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading metadata:', error);
|
||||
}
|
||||
await loadExtensions();
|
||||
}
|
||||
|
||||
async function applyAniSkip(video) {
|
||||
if (!isAnilist || !malId) return;
|
||||
|
||||
aniSkipData = await loadAniSkip(malId, currentEpisode, Math.floor(video.duration));
|
||||
|
||||
if (!aniSkipData || aniSkipData.length === 0) return;
|
||||
|
||||
const markers = [];
|
||||
aniSkipData.forEach(item => {
|
||||
const { startTime, endTime } = item.interval;
|
||||
markers.push({
|
||||
start: startTime,
|
||||
end: endTime,
|
||||
label: item.skipType === 'op' ? 'Opening' : 'Ending'
|
||||
});
|
||||
});
|
||||
|
||||
if (plyrInstance && markers.length > 0) {
|
||||
setTimeout(() => {
|
||||
const progressContainer = document.querySelector('.plyr__progress');
|
||||
if (!progressContainer) return;
|
||||
|
||||
const oldMarkers = progressContainer.querySelector('.plyr__markers');
|
||||
if (oldMarkers) oldMarkers.remove();
|
||||
|
||||
const markersContainer = document.createElement('div');
|
||||
markersContainer.className = 'plyr__markers';
|
||||
|
||||
markers.forEach(marker => {
|
||||
const markerElement = document.createElement('div');
|
||||
markerElement.className = 'plyr__marker';
|
||||
markerElement.dataset.label = marker.label;
|
||||
|
||||
const startPercent = (marker.start / video.duration) * 100;
|
||||
const widthPercent = ((marker.end - marker.start) / video.duration) * 100;
|
||||
|
||||
markerElement.style.left = `${startPercent}%`;
|
||||
markerElement.style.width = `${widthPercent}%`;
|
||||
|
||||
markerElement.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
video.currentTime = marker.start;
|
||||
});
|
||||
|
||||
markersContainer.appendChild(markerElement);
|
||||
});
|
||||
progressContainer.appendChild(markersContainer);
|
||||
}, 500);
|
||||
loadStream();
|
||||
}
|
||||
}
|
||||
|
||||
async function loadExtensionEpisodes() {
|
||||
try {
|
||||
const res = await fetch(`/api/anime/${animeId}/episodes?source=${extName}`);
|
||||
const data = await res.json();
|
||||
totalEpisodes = Array.isArray(data) ? data.length : 0;
|
||||
populateEpisodeCarousel(Array.isArray(data) ? data : []);
|
||||
} catch (e) {
|
||||
console.error("Error cargando episodios:", e);
|
||||
function closePlayer() {
|
||||
if (plyrInstance) plyrInstance.destroy();
|
||||
if (hlsInstance) hlsInstance.destroy();
|
||||
plyrInstance = null;
|
||||
hlsInstance = null;
|
||||
|
||||
if(els.playerWrapper) els.playerWrapper.style.display = 'none';
|
||||
|
||||
document.body.classList.remove('stop-scrolling');
|
||||
document.body.classList.remove('watch-mode');
|
||||
_skipIntervals = [];
|
||||
|
||||
const newUrl = new URL(window.location);
|
||||
newUrl.searchParams.delete('episode');
|
||||
window.history.pushState({}, '', newUrl);
|
||||
|
||||
const trailer = document.querySelector('#trailer-player iframe');
|
||||
if(trailer) {
|
||||
trailer.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
|
||||
}
|
||||
}
|
||||
|
||||
function populateEpisodeCarousel(episodesData) {
|
||||
const carousel = document.getElementById('episode-carousel');
|
||||
carousel.innerHTML = '';
|
||||
|
||||
episodesData.forEach((ep, index) => {
|
||||
const epNumber = ep.number || ep.episodeNumber || ep.id || (index + 1);
|
||||
if (!epNumber) return;
|
||||
|
||||
const extParam = (extName && extName !== 'local') ? `?${extName}` : "";
|
||||
const hasThumbnail = ep.thumbnail && ep.thumbnail.trim() !== '';
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.href = `/watch/${animeId}/${epNumber}${extParam}`;
|
||||
link.classList.add('carousel-item');
|
||||
if (parseInt(epNumber) === currentEpisode) link.classList.add('active-ep-carousel');
|
||||
|
||||
const imgContainer = document.createElement('div');
|
||||
imgContainer.classList.add('carousel-item-img-container');
|
||||
|
||||
if (hasThumbnail) {
|
||||
const img = document.createElement('img');
|
||||
img.src = ep.thumbnail;
|
||||
img.classList.add('carousel-item-img');
|
||||
imgContainer.appendChild(img);
|
||||
}
|
||||
|
||||
link.appendChild(imgContainer);
|
||||
const info = document.createElement('div');
|
||||
info.classList.add('carousel-item-info');
|
||||
info.innerHTML = `<p>Ep ${epNumber}: ${ep.title || 'Untitled'}</p>`;
|
||||
link.appendChild(info);
|
||||
carousel.appendChild(link);
|
||||
});
|
||||
}
|
||||
|
||||
async function loadExtensions() {
|
||||
async function loadExtensionsList() {
|
||||
try {
|
||||
const res = await fetch('/api/extensions/anime');
|
||||
const data = await res.json();
|
||||
const select = document.getElementById('extension-select');
|
||||
let extensions = data.extensions || [];
|
||||
const extensions = data.extensions || [];
|
||||
|
||||
if (extName === 'local' && !extensions.includes('local')) {
|
||||
extensions.push('local');
|
||||
}
|
||||
if (_isLocal && !extensions.includes('local')) extensions.push('local');
|
||||
|
||||
els.extSelect.innerHTML = '';
|
||||
|
||||
select.innerHTML = '';
|
||||
extensions.forEach(ext => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = opt.innerText = ext;
|
||||
select.appendChild(opt);
|
||||
opt.value = ext;
|
||||
opt.innerText = ext.charAt(0).toUpperCase() + ext.slice(1);
|
||||
els.extSelect.appendChild(opt);
|
||||
});
|
||||
|
||||
if (extName && extensions.includes(extName)) {
|
||||
select.value = extName;
|
||||
if (extensions.includes(_entrySource)) {
|
||||
els.extSelect.value = _entrySource;
|
||||
} else if (extensions.length > 0) {
|
||||
select.value = extensions[0];
|
||||
els.extSelect.value = extensions[0];
|
||||
}
|
||||
|
||||
currentExtension = select.value;
|
||||
onExtensionChange();
|
||||
} catch (error) {
|
||||
console.error("Extension Error:", error);
|
||||
}
|
||||
if (els.extSelect.value === 'local') {
|
||||
els.subDubToggle.style.display = 'none';
|
||||
els.serverSelect.style.display = 'none';
|
||||
} else if (els.extSelect.value) {
|
||||
handleExtensionChange(false);
|
||||
}
|
||||
|
||||
async function onExtensionChange() {
|
||||
const select = document.getElementById('extension-select');
|
||||
currentExtension = select.value;
|
||||
} catch (e) { console.error("Error loading extensions:", e); }
|
||||
}
|
||||
|
||||
if (currentExtension === 'local') {
|
||||
document.getElementById('sd-toggle').style.display = 'none';
|
||||
document.getElementById('server-select').style.display = 'none';
|
||||
loadStream();
|
||||
async function handleExtensionChange(shouldPlay = true) {
|
||||
const selectedExt = els.extSelect.value;
|
||||
|
||||
if (selectedExt === 'local') {
|
||||
els.subDubToggle.style.display = 'none';
|
||||
els.serverSelect.style.display = 'none';
|
||||
if (shouldPlay && _currentEpisode > 0) loadStream();
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading("Fetching extension settings...");
|
||||
setLoading("Loading Extension Settings...");
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/extensions/${currentExtension}/settings`);
|
||||
const res = await fetch(`/api/extensions/${selectedExt}/settings`);
|
||||
const settings = await res.json();
|
||||
|
||||
const toggle = document.getElementById('sd-toggle');
|
||||
toggle.style.display = settings.supportsDub ? 'flex' : 'none';
|
||||
els.subDubToggle.style.display = settings.supportsDub ? 'flex' : 'none';
|
||||
setAudioMode('sub');
|
||||
|
||||
const serverSelect = document.getElementById('server-select');
|
||||
serverSelect.innerHTML = '';
|
||||
if (settings.episodeServers?.length > 0) {
|
||||
els.serverSelect.innerHTML = '';
|
||||
|
||||
if (settings.episodeServers && settings.episodeServers.length > 0) {
|
||||
settings.episodeServers.forEach(srv => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = opt.innerText = srv;
|
||||
serverSelect.appendChild(opt);
|
||||
opt.value = srv;
|
||||
opt.innerText = srv;
|
||||
els.serverSelect.appendChild(opt);
|
||||
});
|
||||
serverSelect.style.display = 'block';
|
||||
els.serverSelect.value = settings.episodeServers[0];
|
||||
els.serverSelect.style.display = 'block';
|
||||
} else {
|
||||
serverSelect.style.display = 'none';
|
||||
els.serverSelect.style.display = 'none';
|
||||
}
|
||||
|
||||
if (shouldPlay && _currentEpisode > 0) {
|
||||
loadStream();
|
||||
} catch (error) {
|
||||
setLoading("Failed to load settings.");
|
||||
} else {
|
||||
if(els.loader) els.loader.style.display = 'none';
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error("Failed to load settings:", error);
|
||||
setLoading("Failed to load extension settings.");
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAudioMode() {
|
||||
_audioMode = _audioMode === 'sub' ? 'dub' : 'sub';
|
||||
setAudioMode(_audioMode);
|
||||
loadStream();
|
||||
}
|
||||
|
||||
function setAudioMode(mode) {
|
||||
_audioMode = mode;
|
||||
els.subDubToggle.setAttribute('data-state', mode);
|
||||
document.getElementById('opt-sub').classList.toggle('active', mode === 'sub');
|
||||
document.getElementById('opt-dub').classList.toggle('active', mode === 'dub');
|
||||
}
|
||||
|
||||
function setLoading(msg) {
|
||||
if(els.loaderText) els.loaderText.innerText = msg;
|
||||
if(els.loader) els.loader.style.display = 'flex';
|
||||
}
|
||||
|
||||
async function loadStream() {
|
||||
if (!currentExtension) return;
|
||||
if (!_currentEpisode) return;
|
||||
|
||||
if (currentExtension === 'local') {
|
||||
if (!localEntryId) {
|
||||
setLoading("No existe en local");
|
||||
_progressUpdated = false;
|
||||
|
||||
setLoading("Fetching Stream...");
|
||||
|
||||
if (hlsInstance) { hlsInstance.destroy(); hlsInstance = null; }
|
||||
|
||||
const currentExt = els.extSelect.value;
|
||||
|
||||
if (currentExt === 'local') {
|
||||
try {
|
||||
|
||||
const localId = await getLocalEntryId();
|
||||
|
||||
if (!localId) {
|
||||
setLoading("Local entry not found in library.");
|
||||
return;
|
||||
}
|
||||
|
||||
const localUrl = `/api/library/stream/anime/${localEntryId}/${currentEpisode}`;
|
||||
playVideo(localUrl, []);
|
||||
document.getElementById('loading-overlay').style.display = 'none';
|
||||
const localUrl = `/api/library/stream/anime/${localId}/${_currentEpisode}`;
|
||||
|
||||
console.log("Playing Local:", localUrl);
|
||||
initVideoPlayer(localUrl, 'mp4');
|
||||
|
||||
} catch(e) {
|
||||
setLoading("Local Error: " + e.message);
|
||||
console.error(e);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const server = els.serverSelect.value || "";
|
||||
const sourceParam = `&source=${_entrySource}`;
|
||||
const extParam = `&ext=${currentExt}`;
|
||||
|
||||
const serverSelect = document.getElementById('server-select');
|
||||
const server = serverSelect.value || "default";
|
||||
setLoading(`Loading stream (${audioMode})...`);
|
||||
const url = `/api/watch/stream?animeId=${_animeId}&episode=${_currentEpisode}&server=${encodeURIComponent(server)}&category=${_audioMode}${extParam}${sourceParam}`;
|
||||
|
||||
try {
|
||||
const sourc = (extName && extName !== 'local') ? `&source=${extName}` : "&source=anilist";
|
||||
const url = `/api/watch/stream?animeId=${animeId}&episode=${currentEpisode}&server=${server}&category=${audioMode}&ext=${currentExtension}${sourc}`;
|
||||
console.log('Fetching stream:', url);
|
||||
const res = await fetch(url);
|
||||
const data = await res.json();
|
||||
|
||||
if (data.error || !data.videoSources?.length) {
|
||||
setLoading(data.error || "No video sources.");
|
||||
setLoading(data.error || "No sources found.");
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -337,112 +336,319 @@ async function loadStream() {
|
||||
const headers = data.headers || {};
|
||||
|
||||
let proxyUrl = `/api/proxy?url=${encodeURIComponent(source.url)}`;
|
||||
if (headers['Referer']) proxyUrl += `&referer=${encodeURIComponent(headers['Referer'])}`;
|
||||
if (headers['Origin']) proxyUrl += `&origin=${encodeURIComponent(headers['Origin'])}`;
|
||||
if (headers['Referer'] && headers['Referer'] !== "null") proxyUrl += `&referer=${encodeURIComponent(headers['Referer'])}`;
|
||||
if (headers['User-Agent']) proxyUrl += `&userAgent=${encodeURIComponent(headers['User-Agent'])}`;
|
||||
|
||||
playVideo(proxyUrl, source.subtitles || data.subtitles || []);
|
||||
document.getElementById('loading-overlay').style.display = 'none';
|
||||
} catch (error) {
|
||||
setLoading("Stream error.");
|
||||
const subtitles = (source.subtitles || []).map(sub => ({
|
||||
label: sub.language,
|
||||
srclang: sub.id,
|
||||
src: `/api/proxy?url=${encodeURIComponent(sub.url)}`
|
||||
}));
|
||||
|
||||
initVideoPlayer(proxyUrl, source.type, subtitles);
|
||||
|
||||
} catch (err) {
|
||||
setLoading("Stream Error: " + err.message);
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
function playVideo(url, subtitles = []) {
|
||||
const video = document.getElementById('player');
|
||||
const isLocal = url.includes('/api/library/stream/');
|
||||
function initVideoPlayer(url, type, subtitles = []) {
|
||||
const video = els.video;
|
||||
Array.from(video.querySelectorAll('track')).forEach(t => t.remove());
|
||||
|
||||
if (!isLocal && Hls.isSupported()) {
|
||||
if (hlsInstance) hlsInstance.destroy();
|
||||
hlsInstance = new Hls({ xhrSetup: (xhr) => xhr.withCredentials = false });
|
||||
hlsInstance.loadSource(url);
|
||||
if (Hls.isSupported() && (type === 'm3u8' || url.includes('.m3u8'))) {
|
||||
console.log("Using HLS.js");
|
||||
hlsInstance = new Hls();
|
||||
hlsInstance.attachMedia(video);
|
||||
} else {
|
||||
if (hlsInstance) hlsInstance.destroy();
|
||||
video.src = url;
|
||||
}
|
||||
|
||||
if (plyrInstance) plyrInstance.destroy();
|
||||
while (video.textTracks.length > 0) video.removeChild(video.textTracks[0]);
|
||||
hlsInstance.on(Hls.Events.MEDIA_ATTACHED, () => {
|
||||
hlsInstance.loadSource(url);
|
||||
});
|
||||
|
||||
subtitles.forEach(sub => {
|
||||
hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
subtitles.forEach((sub, i) => {
|
||||
const track = document.createElement('track');
|
||||
track.kind = 'captions';
|
||||
track.label = sub.language || 'Unknown';
|
||||
track.srclang = (sub.language || '').slice(0, 2).toLowerCase();
|
||||
track.src = sub.url;
|
||||
if (sub.default || sub.language?.toLowerCase().includes('english')) track.default = true;
|
||||
track.kind = 'subtitles';
|
||||
track.label = sub.label;
|
||||
track.srclang = sub.srclang;
|
||||
track.src = sub.src;
|
||||
track.default = i === 0;
|
||||
video.appendChild(track);
|
||||
});
|
||||
|
||||
plyrInstance = new Plyr(video, {
|
||||
captions: { active: true, update: true, language: 'en' },
|
||||
controls: ['play-large', 'play', 'progress', 'current-time', 'duration', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
|
||||
els.video.addEventListener('loadedmetadata', () => {
|
||||
applyAniSkip(_malId, _currentEpisode);
|
||||
}, { once: true });
|
||||
|
||||
initPlyr();
|
||||
video.addEventListener('canplay', () => {
|
||||
video.play().catch(() => {});
|
||||
}, { once: true });
|
||||
if (els.loader) els.loader.style.display = 'none';
|
||||
});
|
||||
hlsInstance.on(Hls.Events.ERROR, function (event, data) {
|
||||
console.error("HLS Error:", data);
|
||||
if (data.fatal) {
|
||||
setLoading("Playback Error: " + data.details);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log("Using Native Player (MP4/WebM)");
|
||||
video.src = url;
|
||||
|
||||
subtitles.forEach((sub, i) => {
|
||||
const track = document.createElement('track');
|
||||
track.kind = 'subtitles';
|
||||
track.label = sub.label;
|
||||
track.srclang = sub.srclang;
|
||||
track.src = sub.src;
|
||||
track.default = i === 0;
|
||||
video.appendChild(track);
|
||||
});
|
||||
|
||||
initPlyr();
|
||||
|
||||
video.play().catch(e => console.log("Autoplay blocked", e));
|
||||
|
||||
els.video.addEventListener('loadedmetadata', () => {
|
||||
applyAniSkip(_malId, _currentEpisode);
|
||||
}, { once: true });
|
||||
|
||||
if(els.loader) els.loader.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function initPlyr() {
|
||||
if (plyrInstance) return;
|
||||
|
||||
plyrInstance = new Plyr(els.video, {
|
||||
captions: {
|
||||
active: true,
|
||||
update: true,
|
||||
language: els.video.querySelector('track')?.srclang || 'en'
|
||||
},
|
||||
fullscreen: {
|
||||
enabled: true,
|
||||
fallback: true,
|
||||
iosNative: true,
|
||||
container: '.player-container' // IMPORTANTE: El contenedor padre entra en fullscreen
|
||||
},
|
||||
controls: [
|
||||
'play-large', 'play', 'progress', 'current-time',
|
||||
'mute', 'volume', 'captions', 'settings',
|
||||
'fullscreen', 'airplay'
|
||||
],
|
||||
settings: ['captions', 'quality', 'speed']
|
||||
});
|
||||
|
||||
video.addEventListener('loadedmetadata', () => applyAniSkip(video));
|
||||
// --- MAGIA NUEVA AQUÍ ---
|
||||
// Sincronizar la UI personalizada con los eventos de Plyr
|
||||
const container = document.querySelector('.player-container');
|
||||
|
||||
// Cuando Plyr esconde sus controles (inactividad)
|
||||
plyrInstance.on('controlshidden', () => {
|
||||
container.classList.add('ui-hidden');
|
||||
});
|
||||
|
||||
// Cuando Plyr muestra sus controles (movimiento de mouse)
|
||||
plyrInstance.on('controlsshown', () => {
|
||||
container.classList.remove('ui-hidden');
|
||||
});
|
||||
// ------------------------
|
||||
|
||||
const tracks = els.video.textTracks;
|
||||
if (tracks && tracks.length) {
|
||||
tracks[0].mode = 'showing';
|
||||
}
|
||||
|
||||
async function sendProgress() {
|
||||
plyrInstance.on('timeupdate', (event) => {
|
||||
const instance = event.detail.plyr;
|
||||
if (!instance.duration || _progressUpdated) return;
|
||||
|
||||
const percentage = instance.currentTime / instance.duration;
|
||||
if (percentage >= 0.8) {
|
||||
console.log("Reaching 80% - Updating Progress...");
|
||||
updateProgress();
|
||||
_progressUpdated = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function toVtt(sec) {
|
||||
const h = String(Math.floor(sec / 3600)).padStart(2, '0');
|
||||
const m = String(Math.floor(sec % 3600 / 60)).padStart(2, '0');
|
||||
const s = (sec % 60).toFixed(3).padStart(6, '0');
|
||||
return `${h}:${m}:${s}`;
|
||||
}
|
||||
|
||||
function injectAniSkipChapters(intervals) {
|
||||
const vtt = ['WEBVTT', ''];
|
||||
intervals.forEach(skip => {
|
||||
const label = skip.type === 'op' ? 'Opening' : 'Ending';
|
||||
vtt.push(`${toVtt(skip.startTime)} --> ${toVtt(skip.endTime)}`, label, '');
|
||||
});
|
||||
|
||||
const blob = new Blob([vtt.join('\n')], { type: 'text/vtt' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const track = document.createElement('track');
|
||||
track.kind = 'chapters';
|
||||
track.label = 'Chapters';
|
||||
track.srclang = 'en';
|
||||
track.src = url;
|
||||
els.video.appendChild(track);
|
||||
}
|
||||
|
||||
function waitForDuration(video) {
|
||||
return new Promise(resolve => {
|
||||
if (video.duration && video.duration > 0) return resolve(video.duration);
|
||||
const check = () => {
|
||||
if (video.duration && video.duration > 0) {
|
||||
video.removeEventListener('timeupdate', check);
|
||||
resolve(video.duration);
|
||||
}
|
||||
};
|
||||
video.addEventListener('timeupdate', check);
|
||||
});
|
||||
}
|
||||
|
||||
async function applyAniSkip(malId, episodeNumber) {
|
||||
if (!malId) return;
|
||||
const duration = await waitForDuration(els.video);
|
||||
|
||||
try {
|
||||
const url = `https://api.aniskip.com/v2/skip-times/${malId}/${episodeNumber}` +
|
||||
`?types[]=op&types[]=ed&episodeLength=${Math.floor(duration)}`;
|
||||
|
||||
const res = await fetch(url);
|
||||
if (!res.ok) return;
|
||||
|
||||
const data = await res.json();
|
||||
if (!data.found) return;
|
||||
|
||||
_skipIntervals = data.results.map(item => ({
|
||||
startTime: item.interval.startTime,
|
||||
endTime: item.interval.endTime,
|
||||
type: item.skipType
|
||||
}));
|
||||
|
||||
injectAniSkipChapters(_skipIntervals);
|
||||
requestAnimationFrame(() => {
|
||||
renderSkipMarkers(_skipIntervals);
|
||||
});
|
||||
} catch (e) { console.error('AniSkip Error:', e); }
|
||||
}
|
||||
|
||||
function renderSkipMarkers(intervals) {
|
||||
const progressContainer = els.video.closest('.plyr')?.querySelector('.plyr__progress');
|
||||
if (!progressContainer || !els.video.duration) return;
|
||||
|
||||
progressContainer.querySelectorAll('.skip-marker').forEach(e => e.remove());
|
||||
|
||||
intervals.forEach(skip => {
|
||||
const el = document.createElement('div');
|
||||
el.className = `skip-marker ${skip.type}`;
|
||||
const startPct = (skip.startTime / els.video.duration) * 100;
|
||||
const endPct = (skip.endTime / els.video.duration) * 100;
|
||||
const widthPct = endPct - startPct;
|
||||
el.style.left = `${startPct}%`;
|
||||
el.style.width = `${widthPct}%`;
|
||||
progressContainer.appendChild(el);
|
||||
});
|
||||
|
||||
monitorSkipButton(intervals);
|
||||
}
|
||||
|
||||
function monitorSkipButton(intervals) {
|
||||
if (!_skipBtn) return;
|
||||
|
||||
// Limpiar listener anterior para no acumular
|
||||
els.video.removeEventListener('timeupdate', checkTime);
|
||||
els.video.addEventListener('timeupdate', checkTime);
|
||||
|
||||
// Auto-Next al terminar el video
|
||||
els.video.addEventListener('ended', () => {
|
||||
if (_currentEpisode < _totalEpisodes) playEpisode(_currentEpisode + 1);
|
||||
}, { once: true });
|
||||
|
||||
function checkTime() {
|
||||
const ct = els.video.currentTime;
|
||||
const duration = els.video.duration;
|
||||
|
||||
// 1. Revisar intervalos de AniSkip (Opening / Ending)
|
||||
const activeInterval = intervals.find(i => ct >= i.startTime && ct <= i.endTime);
|
||||
|
||||
if (activeInterval) {
|
||||
// Caso OPENING
|
||||
if (activeInterval.type === 'op') {
|
||||
showSkipButton('Skip Intro', activeInterval.endTime, false);
|
||||
return;
|
||||
}
|
||||
// Caso ENDING (Funciona como Next Episode)
|
||||
else if (activeInterval.type === 'ed') {
|
||||
// Si hay próximo episodio, mostramos botón Next
|
||||
if (_currentEpisode < _totalEpisodes) {
|
||||
showSkipButton('Next Episode', null, true);
|
||||
} else {
|
||||
// Si es el último ep, solo saltamos el ending
|
||||
showSkipButton('Skip Ending', activeInterval.endTime, false);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Fallback: Si NO estamos en un intervalo AniSkip,
|
||||
// pero estamos cerca del final del video (ej. faltan 90s)
|
||||
if (_currentEpisode < _totalEpisodes && (duration - ct) < 90 && (duration - ct) > 0) {
|
||||
// Solo mostrar si no hay un intervalo activo impidiendo esto
|
||||
if (!activeInterval) {
|
||||
showSkipButton('Next Episode', null, true);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Si nada de lo anterior aplica, ocultar botón
|
||||
_skipBtn.classList.remove('visible');
|
||||
}
|
||||
}
|
||||
|
||||
function showSkipButton(text, seekTime, isNextAction) {
|
||||
if (!_skipBtn) return;
|
||||
|
||||
_skipBtn.innerHTML = `${text} <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M13 17l5-5-5-5M6 17l5-5-5-5"/></svg>`;
|
||||
|
||||
if (isNextAction) {
|
||||
_skipBtn.classList.add('is-next'); // Estilo morado
|
||||
_skipBtn.dataset.seekTo = ''; // No busca tiempo, cambia ep
|
||||
} else {
|
||||
_skipBtn.classList.remove('is-next'); // Estilo blanco
|
||||
_skipBtn.dataset.seekTo = seekTime;
|
||||
}
|
||||
|
||||
_skipBtn.classList.add('visible');
|
||||
}
|
||||
|
||||
async function updateProgress() {
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token) return;
|
||||
const source = (extName && extName !== 'local') ? extName : "anilist";
|
||||
|
||||
const body = {
|
||||
entry_id: animeId,
|
||||
source: source,
|
||||
entry_type: "ANIME",
|
||||
status: 'CURRENT',
|
||||
progress: currentEpisode
|
||||
};
|
||||
|
||||
try {
|
||||
await fetch('/api/list/entry', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify(body)
|
||||
headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
|
||||
body: JSON.stringify({
|
||||
entry_id: _animeId,
|
||||
source: _entrySource,
|
||||
entry_type: "ANIME",
|
||||
status: 'CURRENT',
|
||||
progress: _currentEpisode
|
||||
})
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Error updating progress:', err);
|
||||
}
|
||||
} catch (e) { console.error("Progress update failed", e); }
|
||||
}
|
||||
|
||||
// Botones y Toggle
|
||||
document.getElementById('sd-toggle').onclick = () => {
|
||||
audioMode = audioMode === 'sub' ? 'dub' : 'sub';
|
||||
setAudioMode(audioMode);
|
||||
loadStream();
|
||||
return {
|
||||
init,
|
||||
playEpisode,
|
||||
getCurrentEpisode: () => _currentEpisode
|
||||
};
|
||||
|
||||
function setAudioMode(mode) {
|
||||
const toggle = document.getElementById('sd-toggle');
|
||||
toggle.setAttribute('data-state', mode);
|
||||
document.getElementById('opt-sub').classList.toggle('active', mode === 'sub');
|
||||
document.getElementById('opt-dub').classList.toggle('active', mode === 'dub');
|
||||
}
|
||||
|
||||
function setLoading(message) {
|
||||
document.getElementById('loading-text').innerText = message;
|
||||
document.getElementById('loading-overlay').style.display = 'flex';
|
||||
}
|
||||
|
||||
const extParam = (extName && extName !== 'local') ? `?${extName}` : "";
|
||||
document.getElementById('prev-btn').onclick = () => {
|
||||
if (currentEpisode > 1) window.location.href = `/watch/${animeId}/${currentEpisode - 1}${extParam}`;
|
||||
};
|
||||
document.getElementById('next-btn').onclick = () => {
|
||||
if (currentEpisode < totalEpisodes || totalEpisodes === 0) window.location.href = `/watch/${animeId}/${currentEpisode + 1}${extParam}`;
|
||||
};
|
||||
|
||||
if (currentEpisode <= 1) document.getElementById('prev-btn').disabled = true;
|
||||
|
||||
// Actualizar progreso cada 1 minuto si el video está reproduciéndose
|
||||
setInterval(() => {
|
||||
if (plyrInstance && !plyrInstance.paused) sendProgress();
|
||||
}, 60000);
|
||||
|
||||
loadMetadata();
|
||||
})();
|
||||
@@ -52,10 +52,9 @@ const ContinueWatchingManager = {
|
||||
|
||||
if (entryType === 'ANIME') {
|
||||
url = item.source === 'anilist'
|
||||
? `/watch/${item.entry_id}/${nextProgress}`
|
||||
: `/watch/${item.entry_id}/${nextProgress}?${item.source}`;
|
||||
? `/anime/${item.entry_id}?episode=${nextProgress}`
|
||||
: `/anime/${item.entry_id}/${item.source}/?episode=${nextProgress}`;
|
||||
} else {
|
||||
|
||||
url = item.source === 'anilist'
|
||||
? `/book/${item.entry_id}?chapter=${nextProgress}`
|
||||
: `/read/${item.source}/${nextProgress}/${item.entry_id}?source=${item.source}`;
|
||||
|
||||
@@ -112,12 +112,6 @@ async function viewsRoutes(fastify: FastifyInstance) {
|
||||
reply.type('text/html').send(html);
|
||||
});
|
||||
|
||||
fastify.get('/watch/:id/:episode', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'watch.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
reply.type('text/html').send(html);
|
||||
});
|
||||
|
||||
fastify.get('/book/:id', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
|
||||
@@ -3,221 +3,166 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
rel="icon"
|
||||
href="/public/assets/waifuboards.ico"
|
||||
type="image/x-icon"
|
||||
/>
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon" />
|
||||
<title>WaifuBoard</title>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
|
||||
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="/views/css/globals.css" />
|
||||
<link rel="stylesheet" href="/views/css/components/anilist-modal.css" />
|
||||
<link rel="stylesheet" href="/views/css/components/hero.css" />
|
||||
<link rel="stylesheet" href="/views/css/anime/anime.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="/views/css/components/updateNotifier.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="/views/css/anime/player.css" />
|
||||
</head>
|
||||
<body>
|
||||
<a href="/anime" class="back-btn">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
Back
|
||||
</a>
|
||||
|
||||
<div class="modal-overlay" id="desc-modal">
|
||||
<div class="modal-content">
|
||||
<button class="modal-close" onclick="closeModal()">✕</button>
|
||||
<button class="modal-close" onclick="closeDescriptionModal()">✕</button>
|
||||
<h2 class="modal-title">Synopsis</h2>
|
||||
<div class="modal-text" id="full-description"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="/anime" class="back-btn">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
Back to Home
|
||||
</a>
|
||||
<div class="top-media-wrapper" id="top-media-wrapper">
|
||||
|
||||
<div class="hero-wrapper">
|
||||
<div class="video-background">
|
||||
<div id="player"></div>
|
||||
</div>
|
||||
<div class="hero-wrapper" id="hero-wrapper">
|
||||
<div class="video-background"><div id="trailer-player"></div></div>
|
||||
<div class="hero-overlay"></div>
|
||||
</div>
|
||||
|
||||
<div class="content-container">
|
||||
<aside class="sidebar">
|
||||
<div class="poster-card">
|
||||
<img id="poster" src="" alt="" />
|
||||
</div>
|
||||
<div class="player-wrapper" id="player-wrapper" style="display: none;">
|
||||
<div class="player-container">
|
||||
<button id="prev-ep-btn" class="side-nav-btn left" title="Previous Episode">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
|
||||
</button>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<h4>Format</h4>
|
||||
<span id="format">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Episodes</h4>
|
||||
<span id="episodes">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Status</h4>
|
||||
<span id="status">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Season</h4>
|
||||
<span id="season">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Studio</h4>
|
||||
<span id="studio">--</span>
|
||||
<button id="next-ep-btn" class="side-nav-btn right" title="Next Episode">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
|
||||
</button>
|
||||
|
||||
<div class="player-header">
|
||||
<div class="header-left">
|
||||
<button class="btn-icon-glass" id="close-player-btn" title="Close Player">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg>
|
||||
</button>
|
||||
<div class="episode-info">
|
||||
<span class="ep-label">Watching</span>
|
||||
<span id="player-episode-title" class="ep-title">Episode 1</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<h4>Main Characters</h4>
|
||||
<div class="character-list" id="char-list"></div>
|
||||
<div class="header-right">
|
||||
<div class="settings-group">
|
||||
<div class="sd-toggle" id="sd-toggle" data-state="sub">
|
||||
<div class="sd-bg"></div>
|
||||
<div class="sd-option active" id="opt-sub">Sub</div>
|
||||
<div class="sd-option" id="opt-dub">Dub</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="main-content">
|
||||
<select id="server-select" class="glass-select" style="display:none;"></select>
|
||||
<select id="extension-select" class="glass-select"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-frame">
|
||||
<video id="player" controls crossorigin playsinline></video>
|
||||
<div id="player-loading" class="player-loading-overlay">
|
||||
<div class="spinner"></div>
|
||||
<p id="player-loading-text">Loading Stream...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-container" id="main-content">
|
||||
<div class="anime-header">
|
||||
<h1 class="anime-title" id="title">Loading...</h1>
|
||||
|
||||
<div class="meta-row">
|
||||
<div
|
||||
class="pill extension-pill"
|
||||
id="extension-pill"
|
||||
style="display: none; background: #8b5cf6"
|
||||
></div>
|
||||
<div class="pill" id="local-pill" style="display: none; background: #8b5cf6;"></div>
|
||||
<div class="pill score" id="score">--% Score</div>
|
||||
<div class="pill" id="year">----</div>
|
||||
<div class="pill" id="genres">Action</div>
|
||||
<div class="hero-meta-info">
|
||||
<span id="local-pill" class="pill-local" style="display:none;">Local</span>
|
||||
<span id="extension-pill" class="pill-local" style="background:#8b5cf6; display:none;">Ext</span>
|
||||
<span id="score">--% Score</span> • <span id="year">----</span> • <span id="format">--</span> • <span id="episodes">-- Ep</span>
|
||||
</div>
|
||||
<div class="hero-description-mini" id="description-preview"></div>
|
||||
<div class="hero-tags" id="genres"></div>
|
||||
|
||||
<div class="action-row">
|
||||
<button class="btn-watch" id="watch-btn">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="black"><path d="M8 5v14l11-7z"/></svg>
|
||||
Start Watching
|
||||
</button>
|
||||
<button
|
||||
class="btn-secondary"
|
||||
id="add-to-list-btn"
|
||||
onclick="openAddToListModal()"
|
||||
>
|
||||
+ Add to List
|
||||
</button>
|
||||
<button class="btn-add-list" id="add-to-list-btn">+ Add to List</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="description-box">
|
||||
<div id="description-preview"></div>
|
||||
<button
|
||||
id="read-more-btn"
|
||||
class="read-more-btn"
|
||||
style="display: none"
|
||||
onclick="openModal()"
|
||||
>
|
||||
Read More
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="main-layout">
|
||||
<aside class="poster-section">
|
||||
<div class="poster-card"><img id="poster" src="" alt="Poster"></div>
|
||||
<div class="metadata-sidebar">
|
||||
<div class="meta-item-side"><span>Status</span><p id="status">--</p></div>
|
||||
<div class="meta-item-side"><span>Season</span><p id="season">--</p></div>
|
||||
<div class="meta-item-side"><span>Studio</span><p id="studio">--</p></div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="episodes-section">
|
||||
<div class="content-column">
|
||||
|
||||
<section class="episodes-section">
|
||||
<div class="episodes-header-row">
|
||||
<div
|
||||
class="section-title"
|
||||
style="margin: 0; border: none; padding: 0"
|
||||
>
|
||||
<h2
|
||||
style="
|
||||
font-size: 1.8rem;
|
||||
border-left: 4px solid #8b5cf6;
|
||||
padding-left: 1rem;
|
||||
"
|
||||
>
|
||||
Episodes
|
||||
</h2>
|
||||
<h2>Episodes</h2>
|
||||
<input type="number" id="ep-search" class="episode-search-input" placeholder="Jump to...">
|
||||
</div>
|
||||
<div class="episode-search-wrapper">
|
||||
<input
|
||||
type="number"
|
||||
id="ep-search"
|
||||
class="episode-search-input"
|
||||
placeholder="Jump to Ep #"
|
||||
min="1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="episodes-grid" id="episodes-grid"></div>
|
||||
<div id="episodes-grid" class="episodes-grid"></div>
|
||||
|
||||
<div class="pagination-controls" id="pagination-controls">
|
||||
<button
|
||||
class="page-btn"
|
||||
id="prev-page"
|
||||
onclick="changePage(-1)"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span class="page-info" id="page-info"
|
||||
>Page 1 of 1</span
|
||||
>
|
||||
<button
|
||||
class="page-btn"
|
||||
id="next-page"
|
||||
onclick="changePage(1)"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
<button class="page-btn" id="prev-page">Previous</button>
|
||||
<span class="page-info" id="page-info">Page 1 of 1</span>
|
||||
<button class="page-btn" id="next-page">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
|
||||
<div id="relations-section" style="display:none; margin-top: 3rem;">
|
||||
<h3 class="subsection-title">Relations</h3>
|
||||
<div class="relations-horizontal" id="relations-grid"></div>
|
||||
</div>
|
||||
|
||||
<div id="updateToast" class="hidden">
|
||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
||||
<a
|
||||
id="downloadButton"
|
||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
||||
target="_blank"
|
||||
>
|
||||
Click To Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/src/scripts/updateNotifier.js"></script>
|
||||
<script src="/src/scripts/auth-guard.js"></script>
|
||||
<section class="content-section">
|
||||
<h2 class="subsection-title">Characters</h2>
|
||||
<div class="characters-grid" id="char-list"></div>
|
||||
<button id="show-more-chars" class="btn-show-more" style="display: none;">Show Full Cast</button>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2 class="subsection-title">Recommended</h2>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollRecommendations(-1)">‹</button>
|
||||
<div class="carousel" id="recommendations-grid"></div>
|
||||
<button class="scroll-btn right" onclick="scrollRecommendations(1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
||||
<script src="/src/scripts/utils/notification-utils.js"></script>
|
||||
<script src="/src/scripts/utils/url-utils.js"></script>
|
||||
<script src="/src/scripts/utils/pagination-manager.js"></script>
|
||||
<script src="/src/scripts/utils/media-metadata-utils.js"></script>
|
||||
<script src="/src/scripts/utils/youtube-player-utils.js"></script>
|
||||
<script src="/src/scripts/utils/list-modal-manager.js"></script>
|
||||
<script src="/src/scripts/anime/anime.js"></script>
|
||||
|
||||
<script src="/src/scripts/anime/player.js"></script>
|
||||
<script src="/src/scripts/anime/entry.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,184 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WaifuBoard Watch</title>
|
||||
<link rel="stylesheet" href="/views/css/globals.css">
|
||||
<link rel="stylesheet" href="/views/css/anime/watch.css">
|
||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
|
||||
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="top-bar">
|
||||
<a href="#" id="back-link" class="back-btn">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
|
||||
<path d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
<span>Back to Series</span>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<div class="ui-scale-wrapper">
|
||||
<main class="watch-container">
|
||||
|
||||
<section class="anime-details">
|
||||
<div class="details-container">
|
||||
<div class="details-cover">
|
||||
<img id="detail-cover-image" src="" alt="Anime Cover" class="cover-image">
|
||||
</div>
|
||||
<div class="details-content">
|
||||
<h1 id="anime-title-details">Loading...</h1>
|
||||
<div class="details-meta">
|
||||
<span id="detail-format" class="meta-badge">--</span>
|
||||
<span id="detail-season" class="meta-badge">--</span>
|
||||
<span id="detail-score" class="meta-badge meta-score">--</span>
|
||||
</div>
|
||||
<br>
|
||||
<p id="detail-description" class="details-description">Loading description...</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="player-section">
|
||||
|
||||
<div class="player-toolbar">
|
||||
<div class="control-group">
|
||||
<div class="sd-toggle" id="sd-toggle" data-state="sub" onclick="toggleAudioMode()">
|
||||
<div class="sd-bg"></div>
|
||||
<div class="sd-option active" id="opt-sub">Sub</div>
|
||||
<div class="sd-option" id="opt-dub">Dub</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<select id="server-select" class="source-select" onchange="loadStream()" style="display:none;">
|
||||
<option value="">Server...</option>
|
||||
</select>
|
||||
<select id="extension-select" class="source-select" onchange="onExtensionChange()">
|
||||
<option value="" disabled selected>Source...</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-container">
|
||||
<video id="player" controls crossorigin playsinline></video>
|
||||
<div id="loading-overlay" class="loading-overlay">
|
||||
<div class="spinner"></div>
|
||||
<p id="loading-text">Select a source...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="episode-controls">
|
||||
<div class="episode-info">
|
||||
<h1 id="anime-title-details2">Loading...</h1>
|
||||
<p id="episode-label">Episode --</p>
|
||||
</div>
|
||||
<div class="navigation-buttons">
|
||||
<button class="nav-btn prev-btn" id="prev-btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg><span>Previous</span></button>
|
||||
<button class="nav-btn next-btn" id="next-btn"><span>Next</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 5l7 7-7 7"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="episode-carousel-compact">
|
||||
<div class="carousel-header">
|
||||
<h2>Episodes</h2>
|
||||
<div class="carousel-nav">
|
||||
<button class="carousel-arrow-mini" id="ep-prev-mini"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M15 18l-6-6 6-6"/></svg></button>
|
||||
<button class="carousel-arrow-mini" id="ep-next-mini"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M9 6l6 6-6 6"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="episode-carousel" class="episode-carousel-compact-list">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="../../src/scripts/anime/player.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const carousel = document.getElementById('episode-carousel');
|
||||
if (!carousel) return;
|
||||
|
||||
const prevBtn = document.getElementById('ep-prev-mini');
|
||||
const nextBtn = document.getElementById('ep-next-mini');
|
||||
|
||||
const scrollAmount = 150;
|
||||
|
||||
prevBtn?.addEventListener('click', () => {
|
||||
carousel.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
|
||||
});
|
||||
|
||||
nextBtn?.addEventListener('click', () => {
|
||||
carousel.scrollBy({ left: scrollAmount, behavior: 'smooth' });
|
||||
});
|
||||
|
||||
const updateArrows = () => {
|
||||
if (!prevBtn || !nextBtn) return;
|
||||
|
||||
prevBtn.style.opacity = carousel.scrollLeft <= 10 ? '0.3' : '1';
|
||||
prevBtn.style.pointerEvents = carousel.scrollLeft <= 10 ? 'none' : 'auto';
|
||||
|
||||
const atEnd = carousel.scrollLeft + carousel.clientWidth >= carousel.scrollWidth - 10;
|
||||
nextBtn.style.opacity = atEnd ? '0.3' : '1';
|
||||
nextBtn.style.pointerEvents = atEnd ? 'none' : 'auto';
|
||||
};
|
||||
|
||||
carousel.addEventListener('scroll', updateArrows);
|
||||
window.addEventListener('resize', updateArrows);
|
||||
|
||||
const observer = new MutationObserver((mutations, obs) => {
|
||||
updateArrows();
|
||||
obs.disconnect();
|
||||
|
||||
});
|
||||
observer.observe(carousel, { childList: true });
|
||||
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const expandBtn = document.getElementById('expand-characters-btn');
|
||||
const characterList = document.getElementById('characters-list');
|
||||
const btnText = expandBtn?.querySelector('span');
|
||||
|
||||
if (!expandBtn || !characterList) return;
|
||||
|
||||
expandBtn.addEventListener('click', () => {
|
||||
const isExpanded = expandBtn.getAttribute('data-expanded') === 'true';
|
||||
|
||||
if (isExpanded) {
|
||||
|
||||
characterList.classList.remove('expanded');
|
||||
expandBtn.setAttribute('data-expanded', 'false');
|
||||
if (btnText) btnText.innerText = 'Show All';
|
||||
} else {
|
||||
|
||||
characterList.classList.add('expanded');
|
||||
expandBtn.setAttribute('data-expanded', 'true');
|
||||
if (btnText) btnText.innerText = 'Show Less';
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="updateToast" class="hidden">
|
||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
||||
|
||||
<a
|
||||
id="downloadButton"
|
||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
||||
target="_blank"
|
||||
>
|
||||
Click To Download
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script src="/src/scripts/updateNotifier.js"></script>
|
||||
<script src="/src/scripts/auth-guard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,297 +1,274 @@
|
||||
:root {
|
||||
--bg-card: rgba(255, 255, 255, 0.04);
|
||||
--border-subtle: rgba(255, 255, 255, 0.1);
|
||||
--color-primary: #8b5cf6;
|
||||
--player-height: 85vh;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #0b0b0b;
|
||||
color: white;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
.top-media-wrapper {
|
||||
position: relative;
|
||||
|
||||
width: 100vw;
|
||||
left: 0;
|
||||
background: #000;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.hero-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.video-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.video-background iframe,
|
||||
.video-background #trailer-player {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(1.35);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
opacity: 0.6;
|
||||
|
||||
width: 100vw;
|
||||
height: 56.25vw;
|
||||
min-height: 100vh;
|
||||
min-width: 177.77vh;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.8) 70%, #0b0b0b 100%);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
max-width: 1600px;
|
||||
margin: -350px auto 0 auto;
|
||||
max-width: 1400px;
|
||||
margin: -45vh auto 0 auto;
|
||||
padding: 0 3rem 4rem 3rem;
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr;
|
||||
gap: 3rem;
|
||||
animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
transition: margin-top 0.5s ease;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
body.watch-mode .content-container { margin-top: 0; }
|
||||
body.watch-mode .anime-header { margin-top: 2rem; }
|
||||
|
||||
.anime-header { margin-bottom: 5rem; max-width: 900px; }
|
||||
.anime-title {
|
||||
font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900;
|
||||
margin-bottom: 0.5rem; text-shadow: 0 4px 30px rgba(0,0,0,0.6);
|
||||
}
|
||||
.hero-meta-info {
|
||||
display: flex; align-items: center; gap: 0.8rem;
|
||||
color: rgba(255,255,255,0.7); font-weight: 600; margin-bottom: 1.2rem;
|
||||
}
|
||||
.pill-local {
|
||||
background: #22c55e; color: black; padding: 2px 8px;
|
||||
border-radius: 4px; font-size: 0.75rem; font-weight: 900;
|
||||
}
|
||||
.hero-description-mini {
|
||||
font-size: 1.05rem; line-height: 1.5; color: rgba(255,255,255,0.8);
|
||||
margin-bottom: 1.2rem; max-width: 700px;
|
||||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
||||
}
|
||||
.hero-tags {
|
||||
display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem;
|
||||
color: rgba(255,255,255,0.5); font-weight: 500;
|
||||
}
|
||||
|
||||
.action-row { display: flex; align-items: center; gap: 1rem; }
|
||||
.btn-watch {
|
||||
padding: 0.8rem 2.2rem; background: white; color: black;
|
||||
border-radius: 8px; font-weight: 800; border: none; cursor: pointer;
|
||||
display: flex; align-items: center; gap: 0.6rem; transition: 0.2s ease;
|
||||
}
|
||||
.btn-watch:hover { transform: scale(1.03); filter: brightness(0.9); }
|
||||
|
||||
.btn-add-list {
|
||||
padding: 0.8rem 1.5rem; background: rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(255,255,255,0.2); color: white;
|
||||
border-radius: 8px; font-weight: 700; cursor: pointer; transition: 0.2s;
|
||||
}
|
||||
.btn-add-list:hover { background: rgba(255,255,255,0.2); }
|
||||
|
||||
.main-layout { display: grid; grid-template-columns: 300px 1fr; gap: 4rem; margin-top: 2rem; }
|
||||
.content-section { margin-top: 4rem; }
|
||||
h2, .subsection-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; color: white; }
|
||||
|
||||
.poster-card {
|
||||
width: 100%;
|
||||
aspect-ratio: 2/3;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 12px; overflow: hidden;
|
||||
box-shadow: 0 30px 60px rgba(0,0,0,0.5); border: 1px solid var(--border-subtle);
|
||||
}
|
||||
.poster-card img { width: 100%; height: auto; display: block; }
|
||||
|
||||
.poster-card img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
.relations-horizontal { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
|
||||
.relation-card-horizontal {
|
||||
display: flex; background: var(--bg-card); border: 1px solid var(--border-subtle);
|
||||
border-radius: 10px; overflow: hidden; transition: 0.2s; cursor: pointer;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
.relation-card-horizontal:hover { background: rgba(255,255,255,0.08); transform: translateX(5px); }
|
||||
.rel-img { width: 85px; height: 110px; object-fit: cover; }
|
||||
.rel-info { padding: 1rem; display: flex; flex-direction: column; justify-content: center; }
|
||||
.rel-type {
|
||||
font-size: 0.7rem; color: var(--color-primary); font-weight: 800;
|
||||
margin-bottom: 4px; background: rgba(139, 92, 246, 0.1); width: fit-content; padding: 2px 6px; border-radius: 4px;
|
||||
}
|
||||
.rel-title { font-size: 0.95rem; font-weight: 700; color: #eee; }
|
||||
|
||||
.info-item h4 { margin: 0 0 0.25rem 0; font-size: 0.85rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.info-item span { font-weight: 600; font-size: 1rem; color: var(--color-text-primary); }
|
||||
.characters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
||||
.character-item { display: flex; align-items: center; gap: 1rem; }
|
||||
.char-avatar { width: 60px; height: 60px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
|
||||
.char-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.char-info { display: flex; flex-direction: column; gap: 2px; }
|
||||
.char-name { font-size: 1rem; font-weight: 700; color: #fff; }
|
||||
.char-role { font-size: 0.8rem; color: #888; font-weight: 500; }
|
||||
.btn-show-more { background: transparent; border: 1px solid var(--border-subtle); color: #aaa; padding: 10px; width: 100%; margin-top: 1rem; cursor: pointer; }
|
||||
|
||||
.character-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
.episodes-section { margin-top: 3rem; }
|
||||
.episodes-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
|
||||
.episode-search-input {
|
||||
background: rgba(255,255,255,0.05); border: 1px solid var(--border-subtle);
|
||||
color: white; padding: 8px 15px; border-radius: 8px; width: 100px;
|
||||
}
|
||||
.character-item { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; }
|
||||
.char-dot { width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; }
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.anime-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.anime-title {
|
||||
font-size: 4rem;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
margin: 0 0 1.5rem 0;
|
||||
text-shadow: 0 4px 30px rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pill {
|
||||
padding: 0.5rem 1.25rem;
|
||||
background: rgba(255,255,255,0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.pill.score { background: rgba(34, 197, 94, 0.2); color: #4ade80; border-color: rgba(34, 197, 94, 0.2); }
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.btn-watch {
|
||||
padding: 1rem 3rem;
|
||||
background: var(--color-text-primary);
|
||||
color: var(--color-bg-base);
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 800;
|
||||
font-size: 1.1rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.btn-watch:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
padding: 1rem 2rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
color: white;
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.description-box {
|
||||
margin-top: 3rem;
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.8;
|
||||
color: #e4e4e7;
|
||||
max-width: 900px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
padding: 2rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.episodes-section {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
.section-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.8rem; }
|
||||
.section-title::before { content: ''; width: 4px; height: 28px; background: var(--color-primary); border-radius: 2px; }
|
||||
|
||||
.episodes-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
|
||||
gap: 0.6rem;
|
||||
}
|
||||
.episode-btn {
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
padding: 1.25rem 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid var(--border-subtle);
|
||||
padding: 0.6rem 0;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.episode-btn:hover {
|
||||
background: var(--color-bg-elevated-hover);
|
||||
color: white;
|
||||
transform: translateY(-3px);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(60px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.content-container {
|
||||
grid-template-columns: 1fr;
|
||||
margin-top: -100px;
|
||||
padding: 0 1.5rem 4rem 1.5rem;
|
||||
}
|
||||
.poster-card { width: 220px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
|
||||
.main-content { text-align: center; align-items: center; }
|
||||
.anime-title { font-size: 2.5rem; }
|
||||
.meta-row { justify-content: center; }
|
||||
.sidebar { display: none; }
|
||||
}
|
||||
|
||||
.read-more-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #8b5cf6;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
padding: 0;
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.95rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
transition: all 0.2s;
|
||||
color: #ccc;
|
||||
}
|
||||
.episode-btn:hover {
|
||||
background: white;
|
||||
color: black;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.episode-btn.active-playing {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
.read-more-btn:hover { text-decoration: underline; }
|
||||
|
||||
.episodes-header-row {
|
||||
.metadata-sidebar {
|
||||
margin-top: 2rem;
|
||||
background: rgba(255,255,255,0.03);
|
||||
padding: 1.5rem;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.2rem;
|
||||
}
|
||||
.meta-item-side {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
padding-bottom: 0.8rem;
|
||||
}
|
||||
.episodes-header-row h2 {
|
||||
.meta-item-side:last-child { border-bottom: none; padding-bottom: 0; }
|
||||
.meta-item-side span {
|
||||
font-size: 0.8rem;
|
||||
color: #888;
|
||||
font-weight: 600;
|
||||
}
|
||||
.meta-item-side p {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: 1.8rem;
|
||||
border-left: 4px solid #8b5cf6;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.episode-search-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.episode-search-input {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 99px;
|
||||
padding: 0.6rem 1rem;
|
||||
color: white;
|
||||
width: 140px;
|
||||
text-align: center;
|
||||
font-family: inherit;
|
||||
transition: 0.2s;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
.episode-search-input:focus {
|
||||
border-color: #8b5cf6;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
outline: none;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.episode-search-input::-webkit-outer-spin-button,
|
||||
.episode-search-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
||||
@media (max-width: 1024px) {
|
||||
.content-container { margin-top: -200px; padding: 0 1.5rem; }
|
||||
.main-layout { grid-template-columns: 1fr; gap: 2rem; }
|
||||
.poster-section { display: flex; flex-direction: column; align-items: center; }
|
||||
.poster-card { width: 220px; }
|
||||
.metadata-sidebar { width: 100%; max-width: 400px; }
|
||||
}
|
||||
|
||||
.relation-card-horizontal.no-link {
|
||||
cursor: default;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.relation-card-horizontal.no-link:hover {
|
||||
transform: none;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
gap: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
padding-top: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
color: #888;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
padding: 0.6rem 1.2rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.page-btn:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: #8b5cf6;
|
||||
background: white;
|
||||
color: black;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.page-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.page-info {
|
||||
color: #a1a1aa;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
507
docker/views/css/anime/player.css
Normal file
507
docker/views/css/anime/player.css
Normal file
@@ -0,0 +1,507 @@
|
||||
:root {
|
||||
--brand-color: #8b5cf6;
|
||||
--brand-color-light: #a78bfa;
|
||||
--op-color: #fbbf24;
|
||||
--ed-color: #38bdf8;
|
||||
--overlay-gradient-top: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent 100%);
|
||||
--overlay-gradient-bottom: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 40%, transparent 100%);
|
||||
}
|
||||
|
||||
body.stop-scrolling {
|
||||
overflow: hidden !important;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.player-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.player-wrapper * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.player-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.video-frame {
|
||||
|
||||
flex: 1;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.video-frame video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.video-frame .plyr {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.player-header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 20px 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
z-index: 20;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%);
|
||||
pointer-events: none; /* Permite clickear el video a través del header vacío */
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.header-left, .header-right {
|
||||
pointer-events: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.btn-icon-glass {
|
||||
appearance: none;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
border-radius: 20%;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(4px);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-icon-glass:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||||
transform: translateY(-1px) scale(1.05);
|
||||
}
|
||||
|
||||
.player-container:hover .player-header,
|
||||
.player-container.paused .player-header {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.player-meta {
|
||||
display: flex; flex-direction: column; gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-close-player {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: rgba(255,255,255,0.7);
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
font-size: 1.1rem; font-weight: 500;
|
||||
cursor: pointer; padding: 0;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.btn-close-player:hover { color: #fff; }
|
||||
.btn-close-player svg { width: 28px; height: 28px; }
|
||||
|
||||
.episode-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ep-label {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255,255,255,0.7);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.ep-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.nav-capsule {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 20px; /* Forma de pastilla */
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-btn:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.nav-btn:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.nav-capsule .divider {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
#skip-overlay-btn {
|
||||
position: absolute;
|
||||
bottom: 80px; /* Encima de la barra de Plyr */
|
||||
right: 30px;
|
||||
background: white;
|
||||
color: black;
|
||||
padding: 10px 24px;
|
||||
border-radius: 6px;
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
z-index: 2147483647 !important; /* Siempre encima de todo */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
|
||||
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.3s, transform 0.3s, background 0.2s;
|
||||
pointer-events: none;
|
||||
|
||||
}
|
||||
|
||||
#skip-overlay-btn.visible {
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
cursor: pointer !important;
|
||||
visibility: visible !important;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
#skip-overlay-btn:hover {
|
||||
background: #f0f0f0;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
#skip-overlay-btn.is-next {
|
||||
background: #8b5cf6;
|
||||
color: white;
|
||||
}
|
||||
#skip-overlay-btn.is-next:hover {
|
||||
background: #7c3aed;
|
||||
}
|
||||
|
||||
|
||||
/* --- BOTONES DE NAVEGACIÓN LATERALES (Side Chevrons) --- */
|
||||
.side-nav-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
border: none;
|
||||
width: 60px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 30; /* Encima del video */
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0; /* Invisibles por defecto */
|
||||
}
|
||||
|
||||
/* Bordes redondeados según el lado */
|
||||
.side-nav-btn.left {
|
||||
left: 0;
|
||||
border-radius: 0 10px 10px 0;
|
||||
}
|
||||
|
||||
.side-nav-btn.right {
|
||||
right: 0;
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
/* Mostrar solo cuando el mouse está sobre el reproductor */
|
||||
.player-container:hover .side-nav-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Efecto Hover sobre el botón */
|
||||
.side-nav-btn:hover:not(:disabled) {
|
||||
background: rgba(139, 92, 246, 0.6); /* Tu color brand morado pero transparente */
|
||||
color: white;
|
||||
width: 70px; /* Crecen un poco */
|
||||
}
|
||||
|
||||
/* Estado deshabilitado (Primer/Último episodio) */
|
||||
.side-nav-btn:disabled {
|
||||
cursor: default;
|
||||
opacity: 0 !important; /* Totalmente oculto si no se puede usar */
|
||||
pointer-events: none;
|
||||
}
|
||||
#player-episode-title {
|
||||
font-size: 1.5rem; font-weight: 700;
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.player-controls-top {
|
||||
display: flex; gap: 1rem; align-items: center;
|
||||
}
|
||||
|
||||
.glass-select {
|
||||
appearance: none;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: #fff;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem; font-weight: 600;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(4px);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.glass-select:hover { background: rgba(255, 255, 255, 0.2); }
|
||||
.glass-select option { background: #111; color: #ccc; }
|
||||
|
||||
.sd-toggle {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
.sd-option {
|
||||
padding: 4px 12px;
|
||||
font-size: 0.75rem; font-weight: 700;
|
||||
color: rgba(255,255,255,0.5);
|
||||
border-radius: 2px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.sd-option.active {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.btn-skip-intro {
|
||||
position: absolute;
|
||||
bottom: 120px; right: 40px;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
border: none;
|
||||
padding: 10px 24px;
|
||||
font-weight: 700; font-size: 0.9rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
z-index: 50;
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
opacity: 0; transform: translateY(20px);
|
||||
transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
||||
}
|
||||
.btn-skip-intro.visible {
|
||||
opacity: 1; transform: translateY(0);
|
||||
}
|
||||
.btn-skip-intro:hover {
|
||||
background: #e6e6e6;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
:root {
|
||||
--plyr-color-main: var(--brand-color);
|
||||
--plyr-video-control-color: #fff;
|
||||
--plyr-video-control-background-hover: transparent;
|
||||
--plyr-control-icon-size: 20px;
|
||||
--plyr-range-track-height: 4px;
|
||||
--plyr-range-thumb-height: 14px;
|
||||
--plyr-range-thumb-background: #fff;
|
||||
--plyr-menu-background: rgba(20, 20, 20, 0.95);
|
||||
--plyr-menu-color: #fff;
|
||||
--plyr-tooltip-background: rgba(255,255,255,0.9);
|
||||
--plyr-tooltip-color: #000;
|
||||
}
|
||||
|
||||
.plyr--video .plyr__controls {
|
||||
padding-bottom: max(20px, env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.plyr__progress__container:hover .plyr__progress input[type=range],
|
||||
.plyr__progress__container:hover .plyr__progress__buffer {
|
||||
height: 8px;
|
||||
transition: height 0.1s ease;
|
||||
}
|
||||
|
||||
.plyr__progress {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.skip-marker {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 4px;
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
transition: height 0.1s ease;
|
||||
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
|
||||
border-left: 2px solid rgba(0,0,0,0);
|
||||
border-right: 2px solid rgba(0,0,0,0);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.plyr__progress__container:hover .skip-marker {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.skip-marker.op {
|
||||
background-color: var(--op-color);
|
||||
box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
|
||||
}
|
||||
|
||||
.skip-marker.ed {
|
||||
background-color: var(--ed-color);
|
||||
}
|
||||
|
||||
.player-loading-overlay {
|
||||
background: #000;
|
||||
}
|
||||
.spinner {
|
||||
border-width: 2px;
|
||||
width: 50px; height: 50px;
|
||||
border-top-color: #fff;
|
||||
border-right-color: rgba(255,255,255,0.1);
|
||||
border-bottom-color: rgba(255,255,255,0.1);
|
||||
border-left-color: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.settings-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px; /* Espacio entre los elementos */
|
||||
}
|
||||
|
||||
/* Opcional: Ajuste para pantallas móviles muy pequeñas */
|
||||
@media (max-width: 600px) {
|
||||
.settings-group {
|
||||
gap: 8px;
|
||||
}
|
||||
.glass-select {
|
||||
padding: 6px 10px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.player-container:fullscreen,
|
||||
.player-container:-webkit-full-screen {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #000;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
/* Controles custom SIEMPRE visibles encima */
|
||||
.player-container:fullscreen .player-header,
|
||||
.player-container:fullscreen .side-nav-btn,
|
||||
.player-container:fullscreen #skip-overlay-btn,
|
||||
.player-container:-webkit-full-screen .player-header,
|
||||
.player-container:-webkit-full-screen .side-nav-btn,
|
||||
.player-container:-webkit-full-screen #skip-overlay-btn {
|
||||
z-index: 2147483647 !important;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Posición correcta del botón Skip en fullscreen */
|
||||
.player-container:fullscreen #skip-overlay-btn,
|
||||
.player-container:-webkit-full-screen #skip-overlay-btn {
|
||||
bottom: 100px;
|
||||
right: 50px;
|
||||
}
|
||||
|
||||
/* ================= UI HIDDEN (UNA SOLA FUENTE DE VERDAD) ================= */
|
||||
|
||||
.player-container.ui-hidden .player-header,
|
||||
.player-container.ui-hidden .side-nav-btn {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
cursor: none;
|
||||
}
|
||||
#skip-overlay-btn {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#skip-overlay-btn.visible {
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.player-container.ui-hidden #skip-overlay-btn.visible {
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
cursor: pointer !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
.player-header,
|
||||
.side-nav-btn,
|
||||
#skip-overlay-btn {
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.player-container:fullscreen #skip-overlay-btn,
|
||||
.player-container:-webkit-full-screen #skip-overlay-btn {
|
||||
z-index: 2147483647 !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
.player-container:fullscreen #skip-overlay-btn.visible,
|
||||
.player-container:-webkit-full-screen #skip-overlay-btn.visible {
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
@@ -1,830 +0,0 @@
|
||||
.top-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: var(--spacing-lg) var(--spacing-xl);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0.8) 0%,
|
||||
transparent 100%
|
||||
);
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
pointer-events: auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
padding: 0.7rem 1.5rem;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-full);
|
||||
color: var(--color-text-primary);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
transition: all var(--transition-smooth);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-glow);
|
||||
}
|
||||
|
||||
.watch-container {
|
||||
max-width: 1600px;
|
||||
margin: var(--spacing-2xl) auto;
|
||||
padding: 0 var(--spacing-xl);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xl);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.player-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
flex-wrap: wrap;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.sd-toggle {
|
||||
display: flex;
|
||||
background: var(--color-bg-elevated);
|
||||
border: var(--border-subtle);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 4px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sd-option {
|
||||
padding: 0.6rem 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-muted);
|
||||
z-index: 2;
|
||||
transition: color var(--transition-base);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.sd-option.active {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.sd-bg {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
width: calc(50% - 4px);
|
||||
background: var(--color-primary);
|
||||
border-radius: var(--radius-full);
|
||||
transition: transform var(--transition-smooth);
|
||||
box-shadow: 0 4px 12px var(--color-primary-glow);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sd-toggle[data-state="dub"] .sd-bg {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.source-select {
|
||||
appearance: none;
|
||||
background-color: var(--color-bg-elevated);
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 1.2rem center;
|
||||
border: var(--border-subtle);
|
||||
color: var(--color-text-primary);
|
||||
padding: 0.7rem 2.8rem 0.7rem 1.2rem;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
min-width: 160px;
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.source-select:hover {
|
||||
border-color: var(--color-primary);
|
||||
background-color: var(--color-bg-card);
|
||||
}
|
||||
.source-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px var(--color-primary-glow);
|
||||
}
|
||||
|
||||
.video-container {
|
||||
aspect-ratio: 16/9;
|
||||
width: 100%;
|
||||
background: var(--color-bg-base);
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
var(--shadow-lg),
|
||||
0 0 0 1px var(--glass-border);
|
||||
position: relative;
|
||||
transition: box-shadow var(--transition-smooth);
|
||||
}
|
||||
|
||||
.video-container:hover {
|
||||
box-shadow:
|
||||
var(--shadow-lg),
|
||||
0 0 0 1px var(--color-primary),
|
||||
var(--shadow-glow);
|
||||
}
|
||||
|
||||
#player {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--color-bg-base);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 20;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.1);
|
||||
border-top-color: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-overlay p {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.episode-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-lg);
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.episode-info h1 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 800;
|
||||
margin: 0 0 var(--spacing-xs);
|
||||
}
|
||||
.episode-info p {
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.navigation-buttons {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
background: var(--color-bg-elevated);
|
||||
border: var(--border-subtle);
|
||||
color: var(--color-text-primary);
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.nav-btn:hover:not(:disabled) {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-glow);
|
||||
}
|
||||
.nav-btn:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.episode-carousel-compact {
|
||||
width: 100%;
|
||||
max-width: 1600px;
|
||||
margin-top: var(--spacing-lg);
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.carousel-header {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
padding: 0 var(--spacing-xl);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.carousel-header h2 {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 900;
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: -0.04em;
|
||||
border-left: 4px solid var(--color-primary);
|
||||
padding-left: var(--spacing-md);
|
||||
}
|
||||
|
||||
.carousel-nav {
|
||||
display: flex;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.carousel-arrow-mini {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: var(--color-bg-elevated);
|
||||
border: var(--border-subtle);
|
||||
border-radius: var(--radius-full);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.carousel-arrow-mini:hover {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-text-primary);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.carousel-arrow-mini[style*="opacity: 0.3"] {
|
||||
background: var(--color-bg-elevated);
|
||||
color: var(--color-text-muted);
|
||||
border-color: var(--border-subtle);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.episode-carousel-compact-list {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-sm) var(--spacing-xl);
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
mask-image: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
black var(--spacing-md),
|
||||
black calc(100% - var(--spacing-md)),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.episode-carousel-compact-list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
flex: 0 0 200px;
|
||||
height: 112px;
|
||||
|
||||
background: var(--color-bg-card);
|
||||
border: 2px solid var(--border-subtle);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition: all var(--transition-base);
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
scroll-snap-align: start;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.carousel-item:hover {
|
||||
border-color: var(--color-primary);
|
||||
transform: scale(1.02);
|
||||
box-shadow: var(--shadow-md), var(--shadow-glow);
|
||||
}
|
||||
|
||||
.carousel-item.active-ep-carousel {
|
||||
border-color: var(--color-primary);
|
||||
background: rgba(139, 92, 246, 0.15);
|
||||
box-shadow:
|
||||
0 0 0 2px var(--color-primary),
|
||||
var(--shadow-md);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.carousel-item.active-ep-carousel::after {
|
||||
content: "WATCHING";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-primary);
|
||||
padding: 2px 8px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 800;
|
||||
border-bottom-left-radius: var(--radius-sm);
|
||||
letter-spacing: 0.05em;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.carousel-item-img-container {
|
||||
height: 70px;
|
||||
background: var(--color-bg-elevated);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.carousel-item-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform var(--transition-smooth);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.carousel-item:hover .carousel-item-img {
|
||||
transform: scale(1.1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.carousel-item-info {
|
||||
flex: 1;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
background: var(--color-bg-elevated);
|
||||
}
|
||||
|
||||
.carousel-item-info p {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.carousel-item-info p::before {
|
||||
content: attr(data-episode-number);
|
||||
color: var(--color-primary);
|
||||
font-weight: 800;
|
||||
margin-right: var(--spacing-xs);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.carousel-item.no-thumbnail {
|
||||
flex: 0 0 160px;
|
||||
height: 90px;
|
||||
background: var(--color-bg-elevated);
|
||||
border: 2px solid var(--border-subtle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.carousel-item.no-thumbnail .carousel-item-info {
|
||||
padding: var(--spacing-sm);
|
||||
background: transparent;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.carousel-item.no-thumbnail .carousel-item-info p {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.carousel-item.no-thumbnail:hover {
|
||||
background: rgba(139, 92, 246, 0.12);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.carousel-item.no-thumbnail.active-ep-carousel .carousel-item-info p {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.anime-details,
|
||||
.anime-extra-content {
|
||||
max-width: 1600px;
|
||||
margin: var(--spacing-2xl) auto;
|
||||
}
|
||||
|
||||
.details-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-xl);
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-xl);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.details-cover {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-md);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.details-cover h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 900;
|
||||
color: var(--color-text-primary);
|
||||
line-height: 1.2;
|
||||
margin: 0 0 var(--spacing-md) 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
width: 220px;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.details-content h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.meta-badge {
|
||||
background: rgba(139, 92, 246, 0.12);
|
||||
color: var(--color-primary);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(139, 92, 246, 0.2);
|
||||
}
|
||||
|
||||
.meta-badge.meta-score {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
.details-description {
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.characters-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.characters-header h2 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 800;
|
||||
color: var(--color-text-primary);
|
||||
border-left: 5px solid var(--color-primary);
|
||||
padding-left: var(--spacing-md);
|
||||
}
|
||||
|
||||
.expand-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
padding: var(--spacing-xs);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.expand-btn:hover {
|
||||
background: rgba(139, 92, 246, 0.1);
|
||||
}
|
||||
.expand-btn svg {
|
||||
transition: transform var(--transition-smooth);
|
||||
}
|
||||
.expand-btn[data-expanded="true"] svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.characters-carousel {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-lg);
|
||||
align-content: flex-start;
|
||||
overflow: hidden;
|
||||
|
||||
height: 208px;
|
||||
transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding: 0 var(--spacing-sm);
|
||||
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.characters-carousel::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.characters-carousel.expanded {
|
||||
height: auto;
|
||||
max-height: 3200px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 0;
|
||||
|
||||
-ms-overflow-style: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.characters-carousel.expanded::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.characters-carousel.expanded::-webkit-scrollbar-thumb {
|
||||
background: rgba(139, 92, 246, 0.4);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.characters-carousel.expanded::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.plyr--video {
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
.plyr__controls {
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
rgba(0, 0, 0, 0.9) 0%,
|
||||
rgba(0, 0, 0, 0.5) 50%,
|
||||
transparent 100%
|
||||
) !important;
|
||||
padding: 1rem 1.5rem 1.5rem !important;
|
||||
}
|
||||
.plyr--full-ui input[type="range"] {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.plyr__control:hover {
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
}
|
||||
.plyr__menu__container {
|
||||
background: var(--glass-bg) !important;
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--shadow-lg) !important;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.carousel-nav {
|
||||
display: flex;
|
||||
}
|
||||
.watch-container {
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
.details-cover {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.details-cover h1 {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.watch-container {
|
||||
padding: 5rem 1rem 2rem 1rem;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.player-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.source-select {
|
||||
width: 100%;
|
||||
background-position: right 1.5rem center;
|
||||
}
|
||||
|
||||
.episode-controls {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.episode-info {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.episode-info h1 {
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.navigation-buttons {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
justify-content: center;
|
||||
padding: 0.8rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.details-container {
|
||||
flex-direction: column;
|
||||
padding: 1.5rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.details-cover {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.details-cover {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.details-cover h1 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
width: 140px;
|
||||
flex-shrink: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.details-content h1 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.characters-carousel {
|
||||
justify-content: center;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.character-card {
|
||||
width: calc(50% - 0.75rem);
|
||||
flex: 0 0 calc(50% - 0.75rem);
|
||||
}
|
||||
}
|
||||
|
||||
.plyr__progress {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.plyr__markers {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.plyr__marker {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
background: rgba(255, 215, 0, 0.8); /* Color dorado para Opening */
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.plyr__marker[data-label*="Ending"] {
|
||||
background: rgba(255, 100, 100, 0.8); /* Color rojo para Ending */
|
||||
}
|
||||
|
||||
.plyr__marker:hover {
|
||||
height: 120%;
|
||||
width: 4px;
|
||||
background: rgba(255, 215, 0, 1);
|
||||
}
|
||||
|
||||
.plyr__marker[data-label*="Ending"]:hover {
|
||||
background: rgba(255, 100, 100, 1);
|
||||
}
|
||||
|
||||
/* Tooltip para mostrar el label */
|
||||
.plyr__marker::before {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-8px);
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.plyr__marker:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
.plyr__marker {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
cursor: pointer;
|
||||
}
|
||||
Reference in New Issue
Block a user