full enhance of anime page and player.
This commit is contained in:
@@ -45,10 +45,14 @@ const MEDIA_FIELDS = `
|
|||||||
relationType
|
relationType
|
||||||
node {
|
node {
|
||||||
id
|
id
|
||||||
title { romaji }
|
title { romaji english }
|
||||||
type
|
type
|
||||||
format
|
format
|
||||||
status
|
status
|
||||||
|
coverImage { medium large color }
|
||||||
|
bannerImage
|
||||||
|
season
|
||||||
|
seasonYear
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -70,12 +74,28 @@ const MEDIA_FIELDS = `
|
|||||||
mediaRecommendation {
|
mediaRecommendation {
|
||||||
id
|
id
|
||||||
title { romaji }
|
title { romaji }
|
||||||
coverImage { medium }
|
coverImage { medium large}
|
||||||
format
|
format
|
||||||
type
|
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> {
|
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 }> {
|
export async function getAnimeById(id: string | number): Promise<Anime | { error: string }> {
|
||||||
const row = await queryOne("SELECT full_data FROM anime WHERE id = ?", [id]);
|
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 = `
|
const query = `
|
||||||
query ($id: Int) {
|
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') {
|
if (entryType === 'ANIME') {
|
||||||
url = item.source === 'anilist'
|
url = item.source === 'anilist'
|
||||||
? `/watch/${item.entry_id}/${nextProgress}`
|
? `/anime/${item.entry_id}?episode=${nextProgress}`
|
||||||
: `/watch/${item.entry_id}/${nextProgress}?${item.source}`;
|
: `/anime/${item.entry_id}/${item.source}/?episode=${nextProgress}`;
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
url = item.source === 'anilist'
|
url = item.source === 'anilist'
|
||||||
? `/book/${item.entry_id}?chapter=${nextProgress}`
|
? `/book/${item.entry_id}?chapter=${nextProgress}`
|
||||||
: `/read/${item.source}/${nextProgress}/${item.entry_id}?source=${item.source}`;
|
: `/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);
|
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) => {
|
fastify.get('/book/:id', (req: FastifyRequest, reply: FastifyReply) => {
|
||||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
|
const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
|
||||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||||
|
|||||||
@@ -1,17 +1,21 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<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>
|
<title>WaifuBoard</title>
|
||||||
<link rel="stylesheet" href="/views/css/globals.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
|
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
||||||
<link rel="stylesheet" href="/views/css/components/hero.css">
|
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
|
||||||
<link rel="stylesheet" href="/views/css/anime/anime.css">
|
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
|
||||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
|
||||||
<script src="/src/scripts/titlebar.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">
|
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
||||||
|
<script src="/src/scripts/titlebar.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="titlebar">
|
<div id="titlebar">
|
||||||
@@ -20,137 +24,158 @@
|
|||||||
<span class="app-title">WaifuBoard</span>
|
<span class="app-title">WaifuBoard</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="title-right">
|
<div class="title-right">
|
||||||
<button class="min">—</button>
|
<button class="min">−</button>
|
||||||
<button class="max">🗖</button>
|
<button class="max">🗖</button>
|
||||||
<button class="close">✕</button>
|
<button class="close">✕</button>
|
||||||
</div>
|
</div>
|
||||||
</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-overlay" id="desc-modal">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<button class="modal-close" onclick="closeModal()">✕</button>
|
<button class="modal-close" onclick="closeDescriptionModal()">✕</button>
|
||||||
<h2 class="modal-title">Synopsis</h2>
|
<h2 class="modal-title">Synopsis</h2>
|
||||||
<div class="modal-text" id="full-description"></div>
|
<div class="modal-text" id="full-description"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="/anime" class="back-btn">
|
<div class="top-media-wrapper" id="top-media-wrapper">
|
||||||
<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="hero-wrapper">
|
<div class="hero-wrapper" id="hero-wrapper">
|
||||||
<div class="video-background">
|
<div class="video-background"><div id="trailer-player"></div></div>
|
||||||
<div id="player"></div>
|
|
||||||
</div>
|
|
||||||
<div class="hero-overlay"></div>
|
<div class="hero-overlay"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-container">
|
<div class="player-wrapper" id="player-wrapper" style="display: none;">
|
||||||
<aside class="sidebar">
|
<div class="player-container">
|
||||||
<div class="poster-card">
|
<button id="prev-ep-btn" class="side-nav-btn left" title="Previous Episode">
|
||||||
<img id="poster" src="" alt="">
|
<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>
|
||||||
</div>
|
</button>
|
||||||
|
|
||||||
<div class="info-grid">
|
<button id="next-ep-btn" class="side-nav-btn right" title="Next Episode">
|
||||||
<div class="info-item">
|
<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>
|
||||||
<h4>Format</h4>
|
</button>
|
||||||
<span id="format">--</span>
|
|
||||||
</div>
|
<div class="player-header">
|
||||||
<div class="info-item">
|
<div class="header-left">
|
||||||
<h4>Episodes</h4>
|
<button class="btn-icon-glass" id="close-player-btn" title="Close Player">
|
||||||
<span id="episodes">--</span>
|
<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>
|
||||||
</div>
|
</button>
|
||||||
<div class="info-item">
|
<div class="episode-info">
|
||||||
<h4>Status</h4>
|
<span class="ep-label">Watching</span>
|
||||||
<span id="status">--</span>
|
<span id="player-episode-title" class="ep-title">Episode 1</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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="info-grid">
|
<div class="header-right">
|
||||||
<div class="info-item">
|
<div class="settings-group">
|
||||||
<h4>Main Characters</h4>
|
<div class="sd-toggle" id="sd-toggle" data-state="sub">
|
||||||
<div class="character-list" id="char-list"></div>
|
<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>
|
|
||||||
</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">
|
<div class="anime-header">
|
||||||
<h1 class="anime-title" id="title">Loading...</h1>
|
<h1 class="anime-title" id="title">Loading...</h1>
|
||||||
|
<div class="hero-meta-info">
|
||||||
<div class="meta-row">
|
<span id="local-pill" class="pill-local" style="display:none;">Local</span>
|
||||||
<div class="pill extension-pill" id="extension-pill" style="display: none; background: #8b5cf6;"></div>
|
<span id="extension-pill" class="pill-local" style="background:#8b5cf6; display:none;">Ext</span>
|
||||||
<div class="pill" id="local-pill" style="display: none; background: #8b5cf6;"></div>
|
<span id="score">--% Score</span> • <span id="year">----</span> • <span id="format">--</span> • <span id="episodes">-- Ep</span>
|
||||||
<div class="pill score" id="score">--% Score</div>
|
|
||||||
<div class="pill" id="year">----</div>
|
|
||||||
<div class="pill" id="genres">Action</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="hero-description-mini" id="description-preview"></div>
|
||||||
|
<div class="hero-tags" id="genres"></div>
|
||||||
|
|
||||||
<div class="action-row">
|
<div class="action-row">
|
||||||
<button class="btn-watch" id="watch-btn">
|
<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
|
Start Watching
|
||||||
</button>
|
</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>
|
</div>
|
||||||
|
|
||||||
<div class="description-box">
|
<div class="main-layout">
|
||||||
<div id="description-preview"></div>
|
<aside class="poster-section">
|
||||||
<button id="read-more-btn" class="read-more-btn" style="display: none;" onclick="openModal()">
|
<div class="poster-card"><img id="poster" src="" alt="Poster"></div>
|
||||||
Read More
|
<div class="metadata-sidebar">
|
||||||
<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>
|
<div class="meta-item-side"><span>Status</span><p id="status">--</p></div>
|
||||||
</button>
|
<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>
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
<div class="episodes-section">
|
<div class="content-column">
|
||||||
|
|
||||||
|
<section class="episodes-section">
|
||||||
<div class="episodes-header-row">
|
<div class="episodes-header-row">
|
||||||
<div class="section-title" style="margin:0; border:none; padding:0;">
|
<h2>Episodes</h2>
|
||||||
<h2 style="font-size: 1.8rem; border-left: 4px solid #8b5cf6; padding-left: 1rem;">Episodes</h2>
|
<input type="number" id="ep-search" class="episode-search-input" placeholder="Jump to...">
|
||||||
</div>
|
</div>
|
||||||
<div class="episode-search-wrapper">
|
<div id="episodes-grid" class="episodes-grid"></div>
|
||||||
<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 class="pagination-controls" id="pagination-controls">
|
<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>
|
<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>
|
||||||
</div>
|
</section>
|
||||||
</main>
|
|
||||||
|
<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>
|
||||||
|
|
||||||
<div id="updateToast" class="hidden">
|
</div>
|
||||||
<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>
|
<section class="content-section">
|
||||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
<h2 class="subsection-title">Characters</h2>
|
||||||
<script src="/src/scripts/auth-guard.js"></script>
|
<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/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/url-utils.js"></script>
|
||||||
<script src="/src/scripts/utils/pagination-manager.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/media-metadata-utils.js"></script>
|
||||||
<script src="/src/scripts/utils/youtube-player-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/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>
|
</body>
|
||||||
</html>
|
</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 {
|
.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;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%) scale(1.35);
|
|
||||||
width: 100%;
|
width: 100vw;
|
||||||
height: 100%;
|
height: 56.25vw;
|
||||||
pointer-events: none;
|
min-height: 100vh;
|
||||||
z-index: 0;
|
min-width: 177.77vh;
|
||||||
opacity: 0.6;
|
|
||||||
|
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 {
|
.content-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
max-width: 1600px;
|
max-width: 1400px;
|
||||||
margin: -350px auto 0 auto;
|
margin: -45vh auto 0 auto;
|
||||||
padding: 0 3rem 4rem 3rem;
|
padding: 0 3rem 4rem 3rem;
|
||||||
display: grid;
|
transition: margin-top 0.5s ease;
|
||||||
grid-template-columns: 280px 1fr;
|
|
||||||
gap: 3rem;
|
|
||||||
animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
body.watch-mode .content-container { margin-top: 0; }
|
||||||
display: flex;
|
body.watch-mode .anime-header { margin-top: 2rem; }
|
||||||
flex-direction: column;
|
|
||||||
gap: 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 {
|
.poster-card {
|
||||||
width: 100%;
|
border-radius: 12px; overflow: hidden;
|
||||||
aspect-ratio: 2/3;
|
box-shadow: 0 30px 60px rgba(0,0,0,0.5); border: 1px solid var(--border-subtle);
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
.poster-card img { width: 100%; height: auto; display: block; }
|
||||||
|
|
||||||
.poster-card img {
|
.relations-horizontal { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
|
||||||
width: 100%;
|
.relation-card-horizontal {
|
||||||
height: 100%;
|
display: flex; background: var(--bg-card); border: 1px solid var(--border-subtle);
|
||||||
object-fit: cover;
|
border-radius: 10px; overflow: hidden; transition: 0.2s; cursor: pointer;
|
||||||
}
|
}
|
||||||
|
.relation-card-horizontal:hover { background: rgba(255,255,255,0.08); transform: translateX(5px); }
|
||||||
.info-grid {
|
.rel-img { width: 85px; height: 110px; object-fit: cover; }
|
||||||
background: var(--color-bg-elevated);
|
.rel-info { padding: 1rem; display: flex; flex-direction: column; justify-content: center; }
|
||||||
border: 1px solid rgba(255,255,255,0.05);
|
.rel-type {
|
||||||
border-radius: var(--radius-md);
|
font-size: 0.7rem; color: var(--color-primary); font-weight: 800;
|
||||||
padding: 1.5rem;
|
margin-bottom: 4px; background: rgba(139, 92, 246, 0.1); width: fit-content; padding: 2px 6px; border-radius: 4px;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1.25rem;
|
|
||||||
}
|
}
|
||||||
|
.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; }
|
.characters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
||||||
.info-item span { font-weight: 600; font-size: 1rem; color: var(--color-text-primary); }
|
.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 {
|
.episodes-section { margin-top: 3rem; }
|
||||||
display: flex;
|
.episodes-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
|
||||||
flex-direction: column;
|
.episode-search-input {
|
||||||
gap: 0.75rem;
|
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 {
|
.episodes-grid {
|
||||||
display: 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 {
|
.episode-btn {
|
||||||
background: var(--color-bg-elevated);
|
background: rgba(255,255,255,0.03);
|
||||||
border: 1px solid rgba(255,255,255,0.1);
|
border: 1px solid var(--border-subtle);
|
||||||
padding: 1.25rem 1rem;
|
padding: 0.6rem 0;
|
||||||
border-radius: var(--radius-md);
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.2s;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
font-size: 0.9rem;
|
||||||
font-weight: 600;
|
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;
|
cursor: pointer;
|
||||||
font-weight: 600;
|
transition: all 0.2s;
|
||||||
padding: 0;
|
color: #ccc;
|
||||||
margin-top: 0.5rem;
|
}
|
||||||
font-size: 0.95rem;
|
.episode-btn:hover {
|
||||||
display: inline-flex;
|
background: white;
|
||||||
align-items: center;
|
color: black;
|
||||||
gap: 0.25rem;
|
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;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 1.5rem;
|
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||||
flex-wrap: wrap;
|
padding-bottom: 0.8rem;
|
||||||
gap: 1rem;
|
|
||||||
}
|
}
|
||||||
.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;
|
margin: 0;
|
||||||
font-size: 1.8rem;
|
text-align: right;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.episode-search-input::-webkit-outer-spin-button,
|
@media (max-width: 1024px) {
|
||||||
.episode-search-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
.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 {
|
.pagination-controls {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 1rem;
|
gap: 1.5rem;
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
padding-top: 1rem;
|
padding-top: 1.5rem;
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
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 {
|
.page-btn {
|
||||||
background: rgba(255, 255, 255, 0.05);
|
background: transparent;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
color: white;
|
color: white;
|
||||||
padding: 0.5rem 1rem;
|
padding: 0.6rem 1.2rem;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: 0.2s;
|
transition: all 0.2s ease;
|
||||||
font-weight: 500;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-btn:hover:not(:disabled) {
|
.page-btn:hover:not(:disabled) {
|
||||||
background: rgba(255, 255, 255, 0.15);
|
background: white;
|
||||||
border-color: #8b5cf6;
|
color: black;
|
||||||
|
border-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-btn:disabled {
|
.page-btn:disabled {
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
border-color: rgba(255, 255, 255, 0.1);
|
||||||
.page-info {
|
|
||||||
color: #a1a1aa;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
}
|
||||||
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;
|
top: var(--titlebar-height) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html.electron .player-wrapper {
|
||||||
|
top: var(--titlebar-height);
|
||||||
|
height: calc(100% - var(--titlebar-height));
|
||||||
|
}
|
||||||
|
|
||||||
html.electron .panel-content {
|
html.electron .panel-content {
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -45,10 +45,14 @@ const MEDIA_FIELDS = `
|
|||||||
relationType
|
relationType
|
||||||
node {
|
node {
|
||||||
id
|
id
|
||||||
title { romaji }
|
title { romaji english }
|
||||||
type
|
type
|
||||||
format
|
format
|
||||||
status
|
status
|
||||||
|
coverImage { medium large color }
|
||||||
|
bannerImage
|
||||||
|
season
|
||||||
|
seasonYear
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -70,12 +74,28 @@ const MEDIA_FIELDS = `
|
|||||||
mediaRecommendation {
|
mediaRecommendation {
|
||||||
id
|
id
|
||||||
title { romaji }
|
title { romaji }
|
||||||
coverImage { medium }
|
coverImage { medium large}
|
||||||
format
|
format
|
||||||
type
|
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> {
|
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 }> {
|
export async function getAnimeById(id: string | number): Promise<Anime | { error: string }> {
|
||||||
const row = await queryOne("SELECT full_data FROM anime WHERE id = ?", [id]);
|
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 = `
|
const query = `
|
||||||
query ($id: Int) {
|
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 AnimePlayer = (function() {
|
||||||
const animeId = pathParts[2];
|
|
||||||
const currentEpisode = parseInt(pathParts[3]);
|
|
||||||
|
|
||||||
let audioMode = 'sub';
|
let _animeId = null;
|
||||||
let currentExtension = '';
|
let _currentEpisode = 0;
|
||||||
let plyrInstance;
|
let _entrySource = 'anilist';
|
||||||
let hlsInstance;
|
let _audioMode = 'sub';
|
||||||
let totalEpisodes = 0;
|
let _isLocal = false;
|
||||||
let animeTitle = "";
|
let _malId = null;
|
||||||
let aniSkipData = null;
|
let _skipBtn = null;
|
||||||
|
let _skipIntervals = [];
|
||||||
|
let _progressUpdated = false;
|
||||||
|
|
||||||
let isAnilist = false;
|
let _localEntryId = null;
|
||||||
let malId = null;
|
let _totalEpisodes = 0;
|
||||||
|
|
||||||
const params = new URLSearchParams(window.location.search);
|
let plyrInstance = null;
|
||||||
const firstKey = params.keys().next().value;
|
let hlsInstance = null;
|
||||||
let extName;
|
|
||||||
if (firstKey) extName = firstKey;
|
|
||||||
|
|
||||||
// URL de retroceso: Si es local, volvemos a la vista de Anilist normal
|
const els = {
|
||||||
const href = (extName && extName !== 'local')
|
wrapper: null,
|
||||||
? `/anime/${extName}/${animeId}`
|
playerWrapper: null,
|
||||||
: `/anime/${animeId}`;
|
video: null,
|
||||||
|
loader: null,
|
||||||
|
loaderText: null,
|
||||||
|
serverSelect: null,
|
||||||
|
extSelect: null,
|
||||||
|
subDubToggle: null,
|
||||||
|
epTitle: null
|
||||||
|
};
|
||||||
|
|
||||||
document.getElementById('back-link').href = href;
|
function init(animeId, initialSource, isLocal, animeData) {
|
||||||
document.getElementById('episode-label').innerText = `Episode ${currentEpisode}`;
|
_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 {
|
try {
|
||||||
const res = await fetch(`/api/library/anime/${animeId}`);
|
|
||||||
|
const res = await fetch(`/api/library/anime/${_animeId}`);
|
||||||
if (!res.ok) return null;
|
if (!res.ok) return null;
|
||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
return data.id;
|
_localEntryId = data.id;
|
||||||
} catch {
|
|
||||||
|
return _localEntryId;
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Error fetching local ID:", e);
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function loadAniSkip(malId, episode, duration) {
|
function playEpisode(episodeNumber) {
|
||||||
try {
|
const targetEp = parseInt(episodeNumber);
|
||||||
const res = await fetch(`https://api.aniskip.com/v2/skip-times/${malId}/${episode}?types[]=op&types[]=ed&episodeLength=${duration}`);
|
|
||||||
if (!res.ok) return null;
|
// Validar límites
|
||||||
const data = await res.json();
|
if (targetEp < 1 || targetEp > _totalEpisodes) return;
|
||||||
return data.results || [];
|
|
||||||
} catch (error) {
|
_currentEpisode = targetEp;
|
||||||
console.error('Error loading AniSkip data:', error);
|
|
||||||
return null;
|
// 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() {
|
// URL Update y lógica existente...
|
||||||
localEntryId = await checkLocal();
|
const newUrl = new URL(window.location);
|
||||||
try {
|
newUrl.searchParams.set('episode', targetEp);
|
||||||
const sourceQuery = (extName === 'local' || !extName) ? "source=anilist" : `source=${extName}`;
|
window.history.pushState({}, '', newUrl);
|
||||||
const res = await fetch(`/api/anime/${animeId}?${sourceQuery}`);
|
|
||||||
const data = await res.json();
|
|
||||||
|
|
||||||
if (data.error) {
|
if(els.playerWrapper) els.playerWrapper.style.display = 'block';
|
||||||
console.error("Error from API:", data.error);
|
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;
|
return;
|
||||||
}
|
}
|
||||||
|
if (els.serverSelect.options.length === 0) {
|
||||||
const isAnilistFormat = data.title && (data.title.romaji || data.title.english);
|
handleExtensionChange(true);
|
||||||
|
|
||||||
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 || '';
|
|
||||||
} else {
|
} else {
|
||||||
title = data.title || 'Anime Title';
|
loadStream();
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function loadExtensionEpisodes() {
|
function closePlayer() {
|
||||||
try {
|
if (plyrInstance) plyrInstance.destroy();
|
||||||
const res = await fetch(`/api/anime/${animeId}/episodes?source=${extName}`);
|
if (hlsInstance) hlsInstance.destroy();
|
||||||
const data = await res.json();
|
plyrInstance = null;
|
||||||
totalEpisodes = Array.isArray(data) ? data.length : 0;
|
hlsInstance = null;
|
||||||
populateEpisodeCarousel(Array.isArray(data) ? data : []);
|
|
||||||
} catch (e) {
|
if(els.playerWrapper) els.playerWrapper.style.display = 'none';
|
||||||
console.error("Error cargando episodios:", e);
|
|
||||||
|
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) {
|
async function loadExtensionsList() {
|
||||||
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() {
|
|
||||||
try {
|
try {
|
||||||
const res = await fetch('/api/extensions/anime');
|
const res = await fetch('/api/extensions/anime');
|
||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
const select = document.getElementById('extension-select');
|
const extensions = data.extensions || [];
|
||||||
let extensions = data.extensions || [];
|
|
||||||
|
|
||||||
if (extName === 'local' && !extensions.includes('local')) {
|
if (_isLocal && !extensions.includes('local')) extensions.push('local');
|
||||||
extensions.push('local');
|
|
||||||
}
|
els.extSelect.innerHTML = '';
|
||||||
|
|
||||||
select.innerHTML = '';
|
|
||||||
extensions.forEach(ext => {
|
extensions.forEach(ext => {
|
||||||
const opt = document.createElement('option');
|
const opt = document.createElement('option');
|
||||||
opt.value = opt.innerText = ext;
|
opt.value = ext;
|
||||||
select.appendChild(opt);
|
opt.innerText = ext.charAt(0).toUpperCase() + ext.slice(1);
|
||||||
|
els.extSelect.appendChild(opt);
|
||||||
});
|
});
|
||||||
|
|
||||||
if (extName && extensions.includes(extName)) {
|
if (extensions.includes(_entrySource)) {
|
||||||
select.value = extName;
|
els.extSelect.value = _entrySource;
|
||||||
} else if (extensions.length > 0) {
|
} else if (extensions.length > 0) {
|
||||||
select.value = extensions[0];
|
els.extSelect.value = extensions[0];
|
||||||
}
|
}
|
||||||
|
|
||||||
currentExtension = select.value;
|
if (els.extSelect.value === 'local') {
|
||||||
onExtensionChange();
|
els.subDubToggle.style.display = 'none';
|
||||||
} catch (error) {
|
els.serverSelect.style.display = 'none';
|
||||||
console.error("Extension Error:", error);
|
} else if (els.extSelect.value) {
|
||||||
}
|
handleExtensionChange(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function onExtensionChange() {
|
} catch (e) { console.error("Error loading extensions:", e); }
|
||||||
const select = document.getElementById('extension-select');
|
}
|
||||||
currentExtension = select.value;
|
|
||||||
|
|
||||||
if (currentExtension === 'local') {
|
async function handleExtensionChange(shouldPlay = true) {
|
||||||
document.getElementById('sd-toggle').style.display = 'none';
|
const selectedExt = els.extSelect.value;
|
||||||
document.getElementById('server-select').style.display = 'none';
|
|
||||||
loadStream();
|
if (selectedExt === 'local') {
|
||||||
|
els.subDubToggle.style.display = 'none';
|
||||||
|
els.serverSelect.style.display = 'none';
|
||||||
|
if (shouldPlay && _currentEpisode > 0) loadStream();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
setLoading("Fetching extension settings...");
|
setLoading("Loading Extension Settings...");
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const res = await fetch(`/api/extensions/${currentExtension}/settings`);
|
const res = await fetch(`/api/extensions/${selectedExt}/settings`);
|
||||||
const settings = await res.json();
|
const settings = await res.json();
|
||||||
|
|
||||||
const toggle = document.getElementById('sd-toggle');
|
els.subDubToggle.style.display = settings.supportsDub ? 'flex' : 'none';
|
||||||
toggle.style.display = settings.supportsDub ? 'flex' : 'none';
|
|
||||||
setAudioMode('sub');
|
setAudioMode('sub');
|
||||||
|
|
||||||
const serverSelect = document.getElementById('server-select');
|
els.serverSelect.innerHTML = '';
|
||||||
serverSelect.innerHTML = '';
|
|
||||||
if (settings.episodeServers?.length > 0) {
|
if (settings.episodeServers && settings.episodeServers.length > 0) {
|
||||||
settings.episodeServers.forEach(srv => {
|
settings.episodeServers.forEach(srv => {
|
||||||
const opt = document.createElement('option');
|
const opt = document.createElement('option');
|
||||||
opt.value = opt.innerText = srv;
|
opt.value = srv;
|
||||||
serverSelect.appendChild(opt);
|
opt.innerText = srv;
|
||||||
|
els.serverSelect.appendChild(opt);
|
||||||
});
|
});
|
||||||
serverSelect.style.display = 'block';
|
els.serverSelect.value = settings.episodeServers[0];
|
||||||
|
els.serverSelect.style.display = 'block';
|
||||||
} else {
|
} else {
|
||||||
serverSelect.style.display = 'none';
|
els.serverSelect.style.display = 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (shouldPlay && _currentEpisode > 0) {
|
||||||
loadStream();
|
loadStream();
|
||||||
} catch (error) {
|
} else {
|
||||||
setLoading("Failed to load settings.");
|
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() {
|
async function loadStream() {
|
||||||
if (!currentExtension) return;
|
if (!_currentEpisode) return;
|
||||||
|
|
||||||
if (currentExtension === 'local') {
|
_progressUpdated = false;
|
||||||
if (!localEntryId) {
|
|
||||||
setLoading("No existe en local");
|
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;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const localUrl = `/api/library/stream/anime/${localEntryId}/${currentEpisode}`;
|
const localUrl = `/api/library/stream/anime/${localId}/${_currentEpisode}`;
|
||||||
playVideo(localUrl, []);
|
|
||||||
document.getElementById('loading-overlay').style.display = 'none';
|
console.log("Playing Local:", localUrl);
|
||||||
|
initVideoPlayer(localUrl, 'mp4');
|
||||||
|
|
||||||
|
} catch(e) {
|
||||||
|
setLoading("Local Error: " + e.message);
|
||||||
|
console.error(e);
|
||||||
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const server = els.serverSelect.value || "";
|
||||||
|
const sourceParam = `&source=${_entrySource}`;
|
||||||
|
const extParam = `&ext=${currentExt}`;
|
||||||
|
|
||||||
const serverSelect = document.getElementById('server-select');
|
const url = `/api/watch/stream?animeId=${_animeId}&episode=${_currentEpisode}&server=${encodeURIComponent(server)}&category=${_audioMode}${extParam}${sourceParam}`;
|
||||||
const server = serverSelect.value || "default";
|
|
||||||
setLoading(`Loading stream (${audioMode})...`);
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const sourc = (extName && extName !== 'local') ? `&source=${extName}` : "&source=anilist";
|
console.log('Fetching stream:', url);
|
||||||
const url = `/api/watch/stream?animeId=${animeId}&episode=${currentEpisode}&server=${server}&category=${audioMode}&ext=${currentExtension}${sourc}`;
|
|
||||||
const res = await fetch(url);
|
const res = await fetch(url);
|
||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
|
|
||||||
if (data.error || !data.videoSources?.length) {
|
if (data.error || !data.videoSources?.length) {
|
||||||
setLoading(data.error || "No video sources.");
|
setLoading(data.error || "No sources found.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -337,112 +336,319 @@ async function loadStream() {
|
|||||||
const headers = data.headers || {};
|
const headers = data.headers || {};
|
||||||
|
|
||||||
let proxyUrl = `/api/proxy?url=${encodeURIComponent(source.url)}`;
|
let proxyUrl = `/api/proxy?url=${encodeURIComponent(source.url)}`;
|
||||||
if (headers['Referer']) proxyUrl += `&referer=${encodeURIComponent(headers['Referer'])}`;
|
if (headers['Referer'] && headers['Referer'] !== "null") proxyUrl += `&referer=${encodeURIComponent(headers['Referer'])}`;
|
||||||
if (headers['Origin']) proxyUrl += `&origin=${encodeURIComponent(headers['Origin'])}`;
|
|
||||||
if (headers['User-Agent']) proxyUrl += `&userAgent=${encodeURIComponent(headers['User-Agent'])}`;
|
if (headers['User-Agent']) proxyUrl += `&userAgent=${encodeURIComponent(headers['User-Agent'])}`;
|
||||||
|
|
||||||
playVideo(proxyUrl, source.subtitles || data.subtitles || []);
|
const subtitles = (source.subtitles || []).map(sub => ({
|
||||||
document.getElementById('loading-overlay').style.display = 'none';
|
label: sub.language,
|
||||||
} catch (error) {
|
srclang: sub.id,
|
||||||
setLoading("Stream error.");
|
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 = []) {
|
function initVideoPlayer(url, type, subtitles = []) {
|
||||||
const video = document.getElementById('player');
|
const video = els.video;
|
||||||
const isLocal = url.includes('/api/library/stream/');
|
Array.from(video.querySelectorAll('track')).forEach(t => t.remove());
|
||||||
|
|
||||||
if (!isLocal && Hls.isSupported()) {
|
if (Hls.isSupported() && (type === 'm3u8' || url.includes('.m3u8'))) {
|
||||||
if (hlsInstance) hlsInstance.destroy();
|
console.log("Using HLS.js");
|
||||||
hlsInstance = new Hls({ xhrSetup: (xhr) => xhr.withCredentials = false });
|
hlsInstance = new Hls();
|
||||||
hlsInstance.loadSource(url);
|
|
||||||
hlsInstance.attachMedia(video);
|
hlsInstance.attachMedia(video);
|
||||||
} else {
|
|
||||||
if (hlsInstance) hlsInstance.destroy();
|
|
||||||
video.src = url;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (plyrInstance) plyrInstance.destroy();
|
hlsInstance.on(Hls.Events.MEDIA_ATTACHED, () => {
|
||||||
while (video.textTracks.length > 0) video.removeChild(video.textTracks[0]);
|
hlsInstance.loadSource(url);
|
||||||
|
});
|
||||||
|
|
||||||
subtitles.forEach(sub => {
|
hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||||
|
subtitles.forEach((sub, i) => {
|
||||||
const track = document.createElement('track');
|
const track = document.createElement('track');
|
||||||
track.kind = 'captions';
|
track.kind = 'subtitles';
|
||||||
track.label = sub.language || 'Unknown';
|
track.label = sub.label;
|
||||||
track.srclang = (sub.language || '').slice(0, 2).toLowerCase();
|
track.srclang = sub.srclang;
|
||||||
track.src = sub.url;
|
track.src = sub.src;
|
||||||
if (sub.default || sub.language?.toLowerCase().includes('english')) track.default = true;
|
track.default = i === 0;
|
||||||
video.appendChild(track);
|
video.appendChild(track);
|
||||||
});
|
});
|
||||||
|
|
||||||
plyrInstance = new Plyr(video, {
|
els.video.addEventListener('loadedmetadata', () => {
|
||||||
captions: { active: true, update: true, language: 'en' },
|
applyAniSkip(_malId, _currentEpisode);
|
||||||
controls: ['play-large', 'play', 'progress', 'current-time', 'duration', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
|
}, { 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']
|
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');
|
const token = localStorage.getItem('token');
|
||||||
if (!token) return;
|
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 {
|
try {
|
||||||
await fetch('/api/list/entry', {
|
await fetch('/api/list/entry', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
|
||||||
'Content-Type': 'application/json',
|
body: JSON.stringify({
|
||||||
'Authorization': `Bearer ${token}`
|
entry_id: _animeId,
|
||||||
},
|
source: _entrySource,
|
||||||
body: JSON.stringify(body)
|
entry_type: "ANIME",
|
||||||
|
status: 'CURRENT',
|
||||||
|
progress: _currentEpisode
|
||||||
|
})
|
||||||
});
|
});
|
||||||
} catch (err) {
|
} catch (e) { console.error("Progress update failed", e); }
|
||||||
console.error('Error updating progress:', err);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Botones y Toggle
|
return {
|
||||||
document.getElementById('sd-toggle').onclick = () => {
|
init,
|
||||||
audioMode = audioMode === 'sub' ? 'dub' : 'sub';
|
playEpisode,
|
||||||
setAudioMode(audioMode);
|
getCurrentEpisode: () => _currentEpisode
|
||||||
loadStream();
|
|
||||||
};
|
};
|
||||||
|
})();
|
||||||
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') {
|
if (entryType === 'ANIME') {
|
||||||
url = item.source === 'anilist'
|
url = item.source === 'anilist'
|
||||||
? `/watch/${item.entry_id}/${nextProgress}`
|
? `/anime/${item.entry_id}?episode=${nextProgress}`
|
||||||
: `/watch/${item.entry_id}/${nextProgress}?${item.source}`;
|
: `/anime/${item.entry_id}/${item.source}/?episode=${nextProgress}`;
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
url = item.source === 'anilist'
|
url = item.source === 'anilist'
|
||||||
? `/book/${item.entry_id}?chapter=${nextProgress}`
|
? `/book/${item.entry_id}?chapter=${nextProgress}`
|
||||||
: `/read/${item.source}/${nextProgress}/${item.entry_id}?source=${item.source}`;
|
: `/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);
|
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) => {
|
fastify.get('/book/:id', (req: FastifyRequest, reply: FastifyReply) => {
|
||||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
|
const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
|
||||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||||
|
|||||||
@@ -3,221 +3,166 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link
|
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon" />
|
||||||
rel="icon"
|
|
||||||
href="/public/assets/waifuboards.ico"
|
|
||||||
type="image/x-icon"
|
|
||||||
/>
|
|
||||||
<title>WaifuBoard</title>
|
<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/globals.css" />
|
||||||
<link rel="stylesheet" href="/views/css/components/anilist-modal.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/anime/anime.css" />
|
||||||
<link
|
<link rel="stylesheet" href="/views/css/anime/player.css" />
|
||||||
rel="stylesheet"
|
|
||||||
href="/views/css/components/updateNotifier.css"
|
|
||||||
/>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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-overlay" id="desc-modal">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<button class="modal-close" onclick="closeModal()">✕</button>
|
<button class="modal-close" onclick="closeDescriptionModal()">✕</button>
|
||||||
<h2 class="modal-title">Synopsis</h2>
|
<h2 class="modal-title">Synopsis</h2>
|
||||||
<div class="modal-text" id="full-description"></div>
|
<div class="modal-text" id="full-description"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="/anime" class="back-btn">
|
<div class="top-media-wrapper" id="top-media-wrapper">
|
||||||
<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="hero-wrapper">
|
<div class="hero-wrapper" id="hero-wrapper">
|
||||||
<div class="video-background">
|
<div class="video-background"><div id="trailer-player"></div></div>
|
||||||
<div id="player"></div>
|
|
||||||
</div>
|
|
||||||
<div class="hero-overlay"></div>
|
<div class="hero-overlay"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-container">
|
<div class="player-wrapper" id="player-wrapper" style="display: none;">
|
||||||
<aside class="sidebar">
|
<div class="player-container">
|
||||||
<div class="poster-card">
|
<button id="prev-ep-btn" class="side-nav-btn left" title="Previous Episode">
|
||||||
<img id="poster" src="" alt="" />
|
<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>
|
||||||
</div>
|
</button>
|
||||||
|
|
||||||
<div class="info-grid">
|
<button id="next-ep-btn" class="side-nav-btn right" title="Next Episode">
|
||||||
<div class="info-item">
|
<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>
|
||||||
<h4>Format</h4>
|
</button>
|
||||||
<span id="format">--</span>
|
|
||||||
</div>
|
<div class="player-header">
|
||||||
<div class="info-item">
|
<div class="header-left">
|
||||||
<h4>Episodes</h4>
|
<button class="btn-icon-glass" id="close-player-btn" title="Close Player">
|
||||||
<span id="episodes">--</span>
|
<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>
|
||||||
</div>
|
</button>
|
||||||
<div class="info-item">
|
<div class="episode-info">
|
||||||
<h4>Status</h4>
|
<span class="ep-label">Watching</span>
|
||||||
<span id="status">--</span>
|
<span id="player-episode-title" class="ep-title">Episode 1</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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="info-grid">
|
<div class="header-right">
|
||||||
<div class="info-item">
|
<div class="settings-group">
|
||||||
<h4>Main Characters</h4>
|
<div class="sd-toggle" id="sd-toggle" data-state="sub">
|
||||||
<div class="character-list" id="char-list"></div>
|
<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>
|
|
||||||
</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">
|
<div class="anime-header">
|
||||||
<h1 class="anime-title" id="title">Loading...</h1>
|
<h1 class="anime-title" id="title">Loading...</h1>
|
||||||
|
<div class="hero-meta-info">
|
||||||
<div class="meta-row">
|
<span id="local-pill" class="pill-local" style="display:none;">Local</span>
|
||||||
<div
|
<span id="extension-pill" class="pill-local" style="background:#8b5cf6; display:none;">Ext</span>
|
||||||
class="pill extension-pill"
|
<span id="score">--% Score</span> • <span id="year">----</span> • <span id="format">--</span> • <span id="episodes">-- Ep</span>
|
||||||
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>
|
</div>
|
||||||
|
<div class="hero-description-mini" id="description-preview"></div>
|
||||||
|
<div class="hero-tags" id="genres"></div>
|
||||||
|
|
||||||
<div class="action-row">
|
<div class="action-row">
|
||||||
<button class="btn-watch" id="watch-btn">
|
<button class="btn-watch" id="watch-btn">
|
||||||
<svg
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="black"><path d="M8 5v14l11-7z"/></svg>
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
fill="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path d="M8 5v14l11-7z" />
|
|
||||||
</svg>
|
|
||||||
Start Watching
|
Start Watching
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button class="btn-add-list" id="add-to-list-btn">+ Add to List</button>
|
||||||
class="btn-secondary"
|
|
||||||
id="add-to-list-btn"
|
|
||||||
onclick="openAddToListModal()"
|
|
||||||
>
|
|
||||||
+ Add to List
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="description-box">
|
<div class="main-layout">
|
||||||
<div id="description-preview"></div>
|
<aside class="poster-section">
|
||||||
<button
|
<div class="poster-card"><img id="poster" src="" alt="Poster"></div>
|
||||||
id="read-more-btn"
|
<div class="metadata-sidebar">
|
||||||
class="read-more-btn"
|
<div class="meta-item-side"><span>Status</span><p id="status">--</p></div>
|
||||||
style="display: none"
|
<div class="meta-item-side"><span>Season</span><p id="season">--</p></div>
|
||||||
onclick="openModal()"
|
<div class="meta-item-side"><span>Studio</span><p id="studio">--</p></div>
|
||||||
>
|
|
||||||
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>
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
<div class="episodes-section">
|
<div class="content-column">
|
||||||
|
|
||||||
|
<section class="episodes-section">
|
||||||
<div class="episodes-header-row">
|
<div class="episodes-header-row">
|
||||||
<div
|
<h2>Episodes</h2>
|
||||||
class="section-title"
|
<input type="number" id="ep-search" class="episode-search-input" placeholder="Jump to...">
|
||||||
style="margin: 0; border: none; padding: 0"
|
|
||||||
>
|
|
||||||
<h2
|
|
||||||
style="
|
|
||||||
font-size: 1.8rem;
|
|
||||||
border-left: 4px solid #8b5cf6;
|
|
||||||
padding-left: 1rem;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
Episodes
|
|
||||||
</h2>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="episode-search-wrapper">
|
<div id="episodes-grid" class="episodes-grid"></div>
|
||||||
<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 class="pagination-controls" id="pagination-controls">
|
<div class="pagination-controls" id="pagination-controls">
|
||||||
<button
|
<button class="page-btn" id="prev-page">Previous</button>
|
||||||
class="page-btn"
|
<span class="page-info" id="page-info">Page 1 of 1</span>
|
||||||
id="prev-page"
|
<button class="page-btn" id="next-page">Next</button>
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</main>
|
|
||||||
|
<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>
|
||||||
|
|
||||||
<div id="updateToast" class="hidden">
|
</div>
|
||||||
<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>
|
<section class="content-section">
|
||||||
<script src="/src/scripts/auth-guard.js"></script>
|
<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/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/url-utils.js"></script>
|
||||||
<script src="/src/scripts/utils/pagination-manager.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/media-metadata-utils.js"></script>
|
||||||
<script src="/src/scripts/utils/youtube-player-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/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>
|
</body>
|
||||||
</html>
|
</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 {
|
.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;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%) scale(1.35);
|
|
||||||
width: 100%;
|
width: 100vw;
|
||||||
height: 100%;
|
height: 56.25vw;
|
||||||
pointer-events: none;
|
min-height: 100vh;
|
||||||
z-index: 0;
|
min-width: 177.77vh;
|
||||||
opacity: 0.6;
|
|
||||||
|
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 {
|
.content-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
max-width: 1600px;
|
max-width: 1400px;
|
||||||
margin: -350px auto 0 auto;
|
margin: -45vh auto 0 auto;
|
||||||
padding: 0 3rem 4rem 3rem;
|
padding: 0 3rem 4rem 3rem;
|
||||||
display: grid;
|
transition: margin-top 0.5s ease;
|
||||||
grid-template-columns: 280px 1fr;
|
|
||||||
gap: 3rem;
|
|
||||||
animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
body.watch-mode .content-container { margin-top: 0; }
|
||||||
display: flex;
|
body.watch-mode .anime-header { margin-top: 2rem; }
|
||||||
flex-direction: column;
|
|
||||||
gap: 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 {
|
.poster-card {
|
||||||
width: 100%;
|
border-radius: 12px; overflow: hidden;
|
||||||
aspect-ratio: 2/3;
|
box-shadow: 0 30px 60px rgba(0,0,0,0.5); border: 1px solid var(--border-subtle);
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
.poster-card img { width: 100%; height: auto; display: block; }
|
||||||
|
|
||||||
.poster-card img {
|
.relations-horizontal { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
|
||||||
width: 100%;
|
.relation-card-horizontal {
|
||||||
height: 100%;
|
display: flex; background: var(--bg-card); border: 1px solid var(--border-subtle);
|
||||||
object-fit: cover;
|
border-radius: 10px; overflow: hidden; transition: 0.2s; cursor: pointer;
|
||||||
}
|
}
|
||||||
|
.relation-card-horizontal:hover { background: rgba(255,255,255,0.08); transform: translateX(5px); }
|
||||||
.info-grid {
|
.rel-img { width: 85px; height: 110px; object-fit: cover; }
|
||||||
background: var(--color-bg-elevated);
|
.rel-info { padding: 1rem; display: flex; flex-direction: column; justify-content: center; }
|
||||||
border: 1px solid rgba(255,255,255,0.05);
|
.rel-type {
|
||||||
border-radius: var(--radius-md);
|
font-size: 0.7rem; color: var(--color-primary); font-weight: 800;
|
||||||
padding: 1.5rem;
|
margin-bottom: 4px; background: rgba(139, 92, 246, 0.1); width: fit-content; padding: 2px 6px; border-radius: 4px;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1.25rem;
|
|
||||||
}
|
}
|
||||||
|
.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; }
|
.characters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
||||||
.info-item span { font-weight: 600; font-size: 1rem; color: var(--color-text-primary); }
|
.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 {
|
.episodes-section { margin-top: 3rem; }
|
||||||
display: flex;
|
.episodes-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
|
||||||
flex-direction: column;
|
.episode-search-input {
|
||||||
gap: 0.75rem;
|
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 {
|
.episodes-grid {
|
||||||
display: 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 {
|
.episode-btn {
|
||||||
background: var(--color-bg-elevated);
|
background: rgba(255,255,255,0.03);
|
||||||
border: 1px solid rgba(255,255,255,0.1);
|
border: 1px solid var(--border-subtle);
|
||||||
padding: 1.25rem 1rem;
|
padding: 0.6rem 0;
|
||||||
border-radius: var(--radius-md);
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.2s;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
font-size: 0.9rem;
|
||||||
font-weight: 600;
|
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;
|
cursor: pointer;
|
||||||
font-weight: 600;
|
transition: all 0.2s;
|
||||||
padding: 0;
|
color: #ccc;
|
||||||
margin-top: 0.5rem;
|
}
|
||||||
font-size: 0.95rem;
|
.episode-btn:hover {
|
||||||
display: inline-flex;
|
background: white;
|
||||||
align-items: center;
|
color: black;
|
||||||
gap: 0.25rem;
|
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;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 1.5rem;
|
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||||
flex-wrap: wrap;
|
padding-bottom: 0.8rem;
|
||||||
gap: 1rem;
|
|
||||||
}
|
}
|
||||||
.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;
|
margin: 0;
|
||||||
font-size: 1.8rem;
|
text-align: right;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.episode-search-input::-webkit-outer-spin-button,
|
@media (max-width: 1024px) {
|
||||||
.episode-search-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
.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 {
|
.pagination-controls {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 1rem;
|
gap: 1.5rem;
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
padding-top: 1rem;
|
padding-top: 1.5rem;
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
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 {
|
.page-btn {
|
||||||
background: rgba(255, 255, 255, 0.05);
|
background: transparent;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
color: white;
|
color: white;
|
||||||
padding: 0.5rem 1rem;
|
padding: 0.6rem 1.2rem;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: 0.2s;
|
transition: all 0.2s ease;
|
||||||
font-weight: 500;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-btn:hover:not(:disabled) {
|
.page-btn:hover:not(:disabled) {
|
||||||
background: rgba(255, 255, 255, 0.15);
|
background: white;
|
||||||
border-color: #8b5cf6;
|
color: black;
|
||||||
|
border-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-btn:disabled {
|
.page-btn:disabled {
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
border-color: rgba(255, 255, 255, 0.1);
|
||||||
.page-info {
|
|
||||||
color: #a1a1aa;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
}
|
||||||
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