full enhance of anime page and player.
This commit is contained in:
@@ -41,17 +41,21 @@ const MEDIA_FIELDS = `
|
||||
siteUrl
|
||||
tags { id name description category rank isGeneralSpoiler isMediaSpoiler isAdult }
|
||||
relations {
|
||||
edges {
|
||||
relationType
|
||||
node {
|
||||
id
|
||||
title { romaji }
|
||||
type
|
||||
format
|
||||
status
|
||||
edges {
|
||||
relationType
|
||||
node {
|
||||
id
|
||||
title { romaji english }
|
||||
type
|
||||
format
|
||||
status
|
||||
coverImage { medium large color }
|
||||
bannerImage
|
||||
season
|
||||
seasonYear
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
studios {
|
||||
edges {
|
||||
isMain
|
||||
@@ -70,12 +74,28 @@ const MEDIA_FIELDS = `
|
||||
mediaRecommendation {
|
||||
id
|
||||
title { romaji }
|
||||
coverImage { medium }
|
||||
coverImage { medium large}
|
||||
format
|
||||
type
|
||||
}
|
||||
}
|
||||
}
|
||||
characters(perPage: 12, sort: [ROLE, RELEVANCE]) {
|
||||
edges {
|
||||
role
|
||||
node {
|
||||
id
|
||||
name { full native }
|
||||
image { medium large }
|
||||
}
|
||||
voiceActors {
|
||||
id
|
||||
name { full }
|
||||
language
|
||||
image { medium }
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export async function refreshTrendingAnime(): Promise<void> {
|
||||
@@ -140,7 +160,19 @@ async function fetchAniList(query: string, variables: any) {
|
||||
export async function getAnimeById(id: string | number): Promise<Anime | { error: string }> {
|
||||
const row = await queryOne("SELECT full_data FROM anime WHERE id = ?", [id]);
|
||||
|
||||
if (row) return JSON.parse(row.full_data);
|
||||
if (row) {
|
||||
const cached = JSON.parse(row.full_data);
|
||||
|
||||
if (cached?.characters?.edges?.length) {
|
||||
return cached;
|
||||
}
|
||||
|
||||
await queryOne(
|
||||
"DELETE FROM anime WHERE id = ?",
|
||||
[id]
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const query = `
|
||||
query ($id: Int) {
|
||||
|
||||
@@ -1,327 +0,0 @@
|
||||
let animeData = null;
|
||||
let extensionName = null;
|
||||
let animeId = null;
|
||||
let isLocal = false;
|
||||
|
||||
const episodePagination = Object.create(PaginationManager);
|
||||
episodePagination.init(12, renderEpisodes);
|
||||
|
||||
YouTubePlayerUtils.init('player');
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadAnime();
|
||||
setupDescriptionModal();
|
||||
setupEpisodeSearch();
|
||||
});
|
||||
|
||||
function markAsLocal() {
|
||||
isLocal = true;
|
||||
const pill = document.getElementById('local-pill');
|
||||
if (!pill) return;
|
||||
|
||||
pill.textContent = 'Local';
|
||||
pill.style.display = 'inline-flex';
|
||||
pill.style.background = 'rgba(34,197,94,.2)';
|
||||
pill.style.color = '#22c55e';
|
||||
pill.style.borderColor = 'rgba(34,197,94,.3)';
|
||||
}
|
||||
|
||||
async function checkLocalLibraryEntry() {
|
||||
try {
|
||||
const res = await fetch(`/api/library/anime/${animeId}`);
|
||||
if (!res.ok) return;
|
||||
|
||||
markAsLocal();
|
||||
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async function loadAnime() {
|
||||
try {
|
||||
|
||||
const urlData = URLUtils.parseEntityPath('anime');
|
||||
if (!urlData) {
|
||||
showError("Invalid URL");
|
||||
return;
|
||||
}
|
||||
|
||||
extensionName = urlData.extensionName;
|
||||
animeId = urlData.entityId;
|
||||
await checkLocalLibraryEntry();
|
||||
|
||||
const fetchUrl = extensionName
|
||||
? `/api/anime/${animeId}?source=${extensionName}`
|
||||
: `/api/anime/${animeId}?source=anilist`;
|
||||
|
||||
const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() });
|
||||
const data = await res.json();
|
||||
|
||||
if (data.error) {
|
||||
showError("Anime Not Found");
|
||||
return;
|
||||
}
|
||||
|
||||
animeData = data;
|
||||
animeData.entry_type = 'ANIME';
|
||||
const metadata = MediaMetadataUtils.formatAnimeData(data, !!extensionName);
|
||||
|
||||
updatePageTitle(metadata.title);
|
||||
updateMetadata(metadata);
|
||||
updateDescription(data.description || data.summary);
|
||||
updateCharacters(metadata.characters);
|
||||
updateExtensionPill();
|
||||
|
||||
setupWatchButton();
|
||||
|
||||
const hasTrailer = YouTubePlayerUtils.playTrailer(
|
||||
metadata.trailer,
|
||||
'player',
|
||||
metadata.banner
|
||||
);
|
||||
|
||||
setupEpisodes(metadata.episodes);
|
||||
|
||||
await setupAddToListButton();
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error loading anime:', err);
|
||||
showError("Error loading anime");
|
||||
}
|
||||
}
|
||||
|
||||
function updatePageTitle(title) {
|
||||
document.title = `${title} | WaifuBoard`;
|
||||
document.getElementById('title').innerText = title;
|
||||
}
|
||||
|
||||
function updateMetadata(metadata) {
|
||||
|
||||
if (metadata.poster) {
|
||||
document.getElementById('poster').src = metadata.poster;
|
||||
}
|
||||
|
||||
document.getElementById('score').innerText = `${metadata.score}% Score`;
|
||||
|
||||
document.getElementById('year').innerText = metadata.year;
|
||||
|
||||
document.getElementById('genres').innerText = metadata.genres;
|
||||
|
||||
document.getElementById('format').innerText = metadata.format;
|
||||
|
||||
document.getElementById('status').innerText = metadata.status;
|
||||
|
||||
document.getElementById('season').innerText = metadata.season;
|
||||
|
||||
document.getElementById('studio').innerText = metadata.studio;
|
||||
|
||||
document.getElementById('episodes').innerText = metadata.episodes;
|
||||
}
|
||||
|
||||
function updateDescription(rawDescription) {
|
||||
const desc = MediaMetadataUtils.truncateDescription(rawDescription, 4);
|
||||
|
||||
document.getElementById('description-preview').innerHTML = desc.short;
|
||||
document.getElementById('full-description').innerHTML = desc.full;
|
||||
|
||||
const readMoreBtn = document.getElementById('read-more-btn');
|
||||
if (desc.isTruncated) {
|
||||
readMoreBtn.style.display = 'inline-flex';
|
||||
} else {
|
||||
readMoreBtn.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function updateCharacters(characters) {
|
||||
const container = document.getElementById('char-list');
|
||||
container.innerHTML = '';
|
||||
|
||||
if (characters.length > 0) {
|
||||
characters.forEach(char => {
|
||||
container.innerHTML += `
|
||||
<div class="character-item">
|
||||
<div class="char-dot"></div> ${char.name}
|
||||
</div>`;
|
||||
});
|
||||
} else {
|
||||
container.innerHTML = `
|
||||
<div class="character-item" style="color: #666;">
|
||||
No character data available
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function updateExtensionPill() {
|
||||
const pill = document.getElementById('extension-pill');
|
||||
if (!pill) return;
|
||||
|
||||
if (extensionName) {
|
||||
pill.textContent = extensionName.charAt(0).toUpperCase() + extensionName.slice(1).toLowerCase();
|
||||
pill.style.display = 'inline-flex';
|
||||
} else {
|
||||
pill.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function setupWatchButton() {
|
||||
const watchBtn = document.getElementById('watch-btn');
|
||||
if (watchBtn) {
|
||||
watchBtn.onclick = () => {
|
||||
const source = isLocal ? 'local' : (extensionName || 'anilist');
|
||||
window.location.href = URLUtils.buildWatchUrl(animeId, num, source);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
async function setupAddToListButton() {
|
||||
const btn = document.getElementById('add-to-list-btn');
|
||||
if (!btn || !animeData) return;
|
||||
|
||||
ListModalManager.currentData = animeData;
|
||||
const entryType = ListModalManager.getEntryType(animeData);
|
||||
|
||||
await ListModalManager.checkIfInList(animeId, extensionName || 'anilist', entryType);
|
||||
|
||||
const tempBtn = document.querySelector('.hero-buttons .btn-blur');
|
||||
if (tempBtn) {
|
||||
ListModalManager.updateButton('.hero-buttons .btn-blur');
|
||||
} else {
|
||||
|
||||
updateCustomAddButton();
|
||||
}
|
||||
|
||||
btn.onclick = () => ListModalManager.open(animeData, extensionName || 'anilist');
|
||||
}
|
||||
|
||||
function updateCustomAddButton() {
|
||||
const btn = document.getElementById('add-to-list-btn');
|
||||
if (!btn) return;
|
||||
|
||||
if (ListModalManager.isInList) {
|
||||
btn.innerHTML = `
|
||||
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
|
||||
</svg>
|
||||
In Your List
|
||||
`;
|
||||
btn.style.background = 'rgba(34, 197, 94, 0.2)';
|
||||
btn.style.color = '#22c55e';
|
||||
btn.style.borderColor = 'rgba(34, 197, 94, 0.3)';
|
||||
} else {
|
||||
btn.innerHTML = '+ Add to List';
|
||||
btn.style.background = null;
|
||||
btn.style.color = null;
|
||||
btn.style.borderColor = null;
|
||||
}
|
||||
}
|
||||
|
||||
function setupEpisodes(totalEpisodes) {
|
||||
|
||||
const limitedTotal = Math.min(Math.max(totalEpisodes, 1), 5000);
|
||||
|
||||
episodePagination.setTotalItems(limitedTotal);
|
||||
renderEpisodes();
|
||||
}
|
||||
|
||||
function renderEpisodes() {
|
||||
const grid = document.getElementById('episodes-grid');
|
||||
if (!grid) return;
|
||||
|
||||
grid.innerHTML = '';
|
||||
|
||||
const range = episodePagination.getPageRange();
|
||||
const start = range.start + 1;
|
||||
|
||||
const end = range.end;
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
createEpisodeButton(i, grid);
|
||||
}
|
||||
|
||||
episodePagination.renderControls(
|
||||
'pagination-controls',
|
||||
'page-info',
|
||||
'prev-page',
|
||||
'next-page'
|
||||
);
|
||||
}
|
||||
|
||||
function createEpisodeButton(num, container) {
|
||||
const btn = document.createElement('div');
|
||||
btn.className = 'episode-btn';
|
||||
btn.innerText = `Ep ${num}`;
|
||||
btn.onclick = () => {
|
||||
const source = isLocal ? 'local' : (extensionName || 'anilist');
|
||||
window.location.href = URLUtils.buildWatchUrl(animeId, num, source);
|
||||
};
|
||||
container.appendChild(btn);
|
||||
}
|
||||
|
||||
function setupDescriptionModal() {
|
||||
const modal = document.getElementById('desc-modal');
|
||||
if (!modal) return;
|
||||
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target.id === 'desc-modal') {
|
||||
closeDescriptionModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openDescriptionModal() {
|
||||
document.getElementById('desc-modal').classList.add('active');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeDescriptionModal() {
|
||||
document.getElementById('desc-modal').classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
function setupEpisodeSearch() {
|
||||
const searchInput = document.getElementById('ep-search');
|
||||
if (!searchInput) return;
|
||||
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
const val = parseInt(e.target.value);
|
||||
const grid = document.getElementById('episodes-grid');
|
||||
const totalEpisodes = episodePagination.totalItems;
|
||||
|
||||
if (val > 0 && val <= totalEpisodes) {
|
||||
grid.innerHTML = '';
|
||||
createEpisodeButton(val, grid);
|
||||
document.getElementById('pagination-controls').style.display = 'none';
|
||||
} else if (!e.target.value) {
|
||||
renderEpisodes();
|
||||
} else {
|
||||
grid.innerHTML = '<div style="color:#666; width:100%; text-align:center;">Episode not found</div>';
|
||||
document.getElementById('pagination-controls').style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
document.getElementById('title').innerText = message;
|
||||
}
|
||||
|
||||
function saveToList() {
|
||||
if (!animeId) return;
|
||||
ListModalManager.save(animeId, extensionName || 'anilist');
|
||||
}
|
||||
|
||||
function deleteFromList() {
|
||||
if (!animeId) return;
|
||||
ListModalManager.delete(animeId, extensionName || 'anilist');
|
||||
}
|
||||
|
||||
function closeAddToListModal() {
|
||||
ListModalManager.close();
|
||||
}
|
||||
|
||||
window.openDescriptionModal = openDescriptionModal;
|
||||
window.closeDescriptionModal = closeDescriptionModal;
|
||||
window.changePage = (delta) => {
|
||||
if (delta > 0) episodePagination.nextPage();
|
||||
else episodePagination.prevPage();
|
||||
};
|
||||
408
desktop/src/scripts/anime/entry.js
Normal file
408
desktop/src/scripts/anime/entry.js
Normal file
@@ -0,0 +1,408 @@
|
||||
let animeData = null;
|
||||
let extensionName = null;
|
||||
|
||||
let animeId = null;
|
||||
let isLocal = false;
|
||||
|
||||
const episodePagination = Object.create(PaginationManager);
|
||||
episodePagination.init(50, renderEpisodes);
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadAnimeData();
|
||||
setupDescriptionModal();
|
||||
setupEpisodeSearch();
|
||||
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const initialEp = urlParams.get('episode');
|
||||
|
||||
if (initialEp) {
|
||||
setTimeout(() => {
|
||||
if (animeData) {
|
||||
|
||||
const source = isLocal ? 'local' : (extensionName || 'anilist');
|
||||
|
||||
if (typeof AnimePlayer !== 'undefined') {
|
||||
AnimePlayer.init(animeId, source, isLocal, animeData);
|
||||
AnimePlayer.playEpisode(parseInt(initialEp));
|
||||
}
|
||||
}
|
||||
}, 800);
|
||||
}
|
||||
});
|
||||
|
||||
async function loadAnimeData() {
|
||||
try {
|
||||
|
||||
const pathParts = window.location.pathname.split('/');
|
||||
|
||||
const cleanParts = pathParts.filter(p => p.length > 0);
|
||||
|
||||
if (cleanParts.length >= 3 && cleanParts[0] === 'anime') {
|
||||
|
||||
extensionName = cleanParts[1];
|
||||
animeId = cleanParts[2];
|
||||
} else if (cleanParts.length === 2 && cleanParts[0] === 'anime') {
|
||||
|
||||
extensionName = null;
|
||||
|
||||
animeId = cleanParts[1];
|
||||
} else {
|
||||
showError("Invalid URL Format");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const localRes = await fetch(`/api/library/anime/${animeId}`);
|
||||
if (localRes.ok) isLocal = true;
|
||||
} catch {}
|
||||
|
||||
const fetchUrl = extensionName
|
||||
? `/api/anime/${animeId}?source=${extensionName}`
|
||||
: `/api/anime/${animeId}?source=anilist`;
|
||||
|
||||
const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() });
|
||||
const data = await res.json();
|
||||
|
||||
if (data.error) {
|
||||
showError("Anime Not Found");
|
||||
return;
|
||||
}
|
||||
|
||||
animeData = data;
|
||||
animeData.entry_type = 'ANIME';
|
||||
|
||||
const metadata = MediaMetadataUtils.formatAnimeData(data, !!extensionName);
|
||||
|
||||
document.title = `${metadata.title} | WaifuBoard`;
|
||||
document.getElementById('title').innerText = metadata.title;
|
||||
if (metadata.poster) document.getElementById('poster').src = metadata.poster;
|
||||
|
||||
document.getElementById('score').innerText = `${metadata.score}% Score`;
|
||||
document.getElementById('year').innerText = metadata.year;
|
||||
document.getElementById('genres').innerText = metadata.genres.split(',').join(' • ');
|
||||
document.getElementById('format').innerText = metadata.format;
|
||||
document.getElementById('status').innerText = metadata.status;
|
||||
document.getElementById('season').innerText = metadata.season;
|
||||
document.getElementById('studio').innerText = metadata.studio;
|
||||
document.getElementById('episodes').innerText = `${metadata.episodes} Ep`;
|
||||
|
||||
updateLocalPill();
|
||||
updateDescription(data.description || data.summary);
|
||||
updateRelations(data.relations?.edges);
|
||||
updateCharacters(metadata.characters);
|
||||
updateRecommendations(data.recommendations?.nodes);
|
||||
|
||||
const source = isLocal ? 'local' : (extensionName || 'anilist');
|
||||
|
||||
if (typeof AnimePlayer !== 'undefined') {
|
||||
AnimePlayer.init(animeId, source, isLocal, animeData);
|
||||
}
|
||||
|
||||
YouTubePlayerUtils.init('trailer-player');
|
||||
YouTubePlayerUtils.playTrailer(metadata.trailer, 'trailer-player', metadata.banner);
|
||||
|
||||
const watchBtn = document.getElementById('watch-btn');
|
||||
if (watchBtn) {
|
||||
watchBtn.onclick = () => {
|
||||
if (typeof AnimePlayer !== 'undefined') AnimePlayer.playEpisode(1);
|
||||
};
|
||||
}
|
||||
|
||||
const total = metadata.episodes || 12;
|
||||
setupEpisodes(total);
|
||||
|
||||
setupAddToListButton();
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error loading anime details:', err);
|
||||
showError("Error loading anime");
|
||||
}
|
||||
}
|
||||
|
||||
function updateLocalPill() {
|
||||
if (isLocal) {
|
||||
const pill = document.getElementById('local-pill');
|
||||
if(pill) pill.style.display = 'inline-flex';
|
||||
}
|
||||
if (extensionName) {
|
||||
const pill = document.getElementById('extension-pill');
|
||||
if(pill) {
|
||||
pill.innerText = extensionName;
|
||||
pill.style.display = 'inline-flex';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateDescription(rawDescription) {
|
||||
const desc = MediaMetadataUtils.truncateDescription(rawDescription, 3);
|
||||
const previewEl = document.getElementById('description-preview');
|
||||
const fullEl = document.getElementById('full-description');
|
||||
|
||||
if (previewEl) {
|
||||
previewEl.innerHTML = desc.short +
|
||||
(desc.isTruncated ? ' <span onclick="openDescriptionModal()" style="color:white; cursor:pointer; font-weight:700; margin-left:5px;">Read more</span>' : '');
|
||||
}
|
||||
if (fullEl) fullEl.innerHTML = desc.full;
|
||||
}
|
||||
|
||||
function setupDescriptionModal() {
|
||||
const modal = document.getElementById('desc-modal');
|
||||
if (!modal) return;
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target.id === 'desc-modal') {
|
||||
closeDescriptionModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openDescriptionModal() {
|
||||
const modal = document.getElementById('desc-modal');
|
||||
if(modal) modal.classList.add('active');
|
||||
}
|
||||
|
||||
function closeDescriptionModal() {
|
||||
const modal = document.getElementById('desc-modal');
|
||||
if(modal) modal.classList.remove('active');
|
||||
}
|
||||
|
||||
function setupEpisodes(totalEpisodes) {
|
||||
const limitedTotal = Math.min(Math.max(totalEpisodes, 1), 5000);
|
||||
episodePagination.setTotalItems(limitedTotal);
|
||||
renderEpisodes();
|
||||
}
|
||||
|
||||
function renderEpisodes() {
|
||||
const grid = document.getElementById('episodes-grid');
|
||||
if (!grid) return;
|
||||
grid.innerHTML = '';
|
||||
|
||||
const range = episodePagination.getPageRange();
|
||||
const currentEp = (typeof AnimePlayer !== 'undefined') ? AnimePlayer.getCurrentEpisode() : 0;
|
||||
|
||||
for (let i = range.start + 1; i <= range.end; i++) {
|
||||
const btn = document.createElement('div');
|
||||
btn.className = 'episode-btn';
|
||||
if (currentEp === i) btn.classList.add('active-playing');
|
||||
|
||||
btn.innerText = i;
|
||||
|
||||
btn.onclick = () => {
|
||||
if (typeof AnimePlayer !== 'undefined') {
|
||||
AnimePlayer.playEpisode(i);
|
||||
renderEpisodes();
|
||||
}
|
||||
};
|
||||
grid.appendChild(btn);
|
||||
}
|
||||
|
||||
const totalItems = episodePagination.totalItems || 0;
|
||||
const itemsPerPage = episodePagination.itemsPerPage || 50;
|
||||
const safeTotalPages = Math.ceil(totalItems / itemsPerPage) || 1;
|
||||
|
||||
const info = document.getElementById('page-info');
|
||||
if(info) info.innerText = `Page ${episodePagination.currentPage} of ${safeTotalPages}`;
|
||||
|
||||
const prevBtn = document.getElementById('prev-page');
|
||||
const nextBtn = document.getElementById('next-page');
|
||||
|
||||
if(prevBtn) {
|
||||
prevBtn.disabled = episodePagination.currentPage === 1;
|
||||
prevBtn.onclick = () => { episodePagination.prevPage(); };
|
||||
}
|
||||
|
||||
if(nextBtn) {
|
||||
|
||||
nextBtn.disabled = episodePagination.currentPage >= safeTotalPages;
|
||||
nextBtn.onclick = () => { episodePagination.nextPage(); };
|
||||
}
|
||||
}
|
||||
|
||||
function setupEpisodeSearch() {
|
||||
const searchInput = document.getElementById('ep-search');
|
||||
if (!searchInput) return;
|
||||
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
const val = parseInt(e.target.value);
|
||||
const grid = document.getElementById('episodes-grid');
|
||||
const controls = document.getElementById('pagination-controls');
|
||||
|
||||
if (val > 0) {
|
||||
grid.innerHTML = '';
|
||||
const btn = document.createElement('div');
|
||||
btn.className = 'episode-btn';
|
||||
btn.innerText = `${val}`;
|
||||
btn.onclick = () => { if (typeof AnimePlayer !== 'undefined') AnimePlayer.playEpisode(val); };
|
||||
grid.appendChild(btn);
|
||||
if(controls) controls.style.display = 'none';
|
||||
} else if (!e.target.value) {
|
||||
if(controls) controls.style.display = 'flex';
|
||||
renderEpisodes();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateCharacters(characters) {
|
||||
const container = document.getElementById('char-list');
|
||||
if (!container) return;
|
||||
container.innerHTML = '';
|
||||
if (!characters || characters.length === 0) return;
|
||||
|
||||
characters.forEach((char, index) => {
|
||||
const img = char.node?.image?.large || char.image;
|
||||
const name = char.node?.name?.full || char.name;
|
||||
const role = char.role || 'Supporting';
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = `character-item ${index >= 12 ? 'hidden-char' : ''}`;
|
||||
card.style.display = index >= 12 ? 'none' : 'flex';
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="char-avatar"><img src="${img}" loading="lazy"></div>
|
||||
<div class="char-info"><div class="char-name">${name}</div><div class="char-role">${role}</div></div>
|
||||
`;
|
||||
container.appendChild(card);
|
||||
});
|
||||
|
||||
const showMoreBtn = document.getElementById('show-more-chars');
|
||||
if (showMoreBtn) {
|
||||
if (characters.length > 12) {
|
||||
showMoreBtn.style.display = 'block';
|
||||
showMoreBtn.onclick = () => {
|
||||
document.querySelectorAll('.hidden-char').forEach(el => el.style.display = 'flex');
|
||||
showMoreBtn.style.display = 'none';
|
||||
};
|
||||
} else {
|
||||
showMoreBtn.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateRelations(relations) {
|
||||
const container = document.getElementById('relations-grid');
|
||||
const section = document.getElementById('relations-section');
|
||||
|
||||
if (!container || !relations || relations.length === 0) {
|
||||
if (section) section.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
section.style.display = 'block';
|
||||
container.innerHTML = '';
|
||||
|
||||
const priorityMap = {
|
||||
'ADAPTATION': 1,
|
||||
'PREQUEL': 2,
|
||||
'SEQUEL': 3,
|
||||
'PARENT': 4,
|
||||
'SIDE_STORY': 5,
|
||||
'SPIN_OFF': 6,
|
||||
'ALTERNATIVE': 7,
|
||||
'CHARACTER': 8,
|
||||
'OTHER': 99
|
||||
};
|
||||
|
||||
relations.sort((a, b) => {
|
||||
const pA = priorityMap[a.relationType] || 50;
|
||||
const pB = priorityMap[b.relationType] || 50;
|
||||
return pA - pB;
|
||||
});
|
||||
|
||||
relations.forEach(rel => {
|
||||
const media = rel.node;
|
||||
if (!media) return;
|
||||
|
||||
const title = media.title?.romaji || media.title?.english || 'Unknown';
|
||||
const cover = media.coverImage?.large || media.coverImage?.medium || '';
|
||||
|
||||
const typeDisplay = rel.relationType ? rel.relationType.replace(/_/g, ' ') : 'RELATION';
|
||||
const rawType = rel.relationType;
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.className = 'relation-card-horizontal';
|
||||
|
||||
let targetUrl = null;
|
||||
|
||||
if (rawType === 'ADAPTATION') {
|
||||
targetUrl = `/book/${media.id}`;
|
||||
|
||||
} else if (media.type === 'ANIME' && rawType !== 'OTHER') {
|
||||
targetUrl = `/anime/${media.id}`;
|
||||
|
||||
}
|
||||
|
||||
if (targetUrl) {
|
||||
el.onclick = () => { window.location.href = targetUrl; };
|
||||
} else {
|
||||
el.classList.add('no-link');
|
||||
|
||||
el.onclick = null;
|
||||
}
|
||||
|
||||
el.innerHTML = `
|
||||
<img src="${cover}" class="rel-img" alt="${title}" onerror="this.src='/public/assets/placeholder.svg'">
|
||||
<div class="rel-info">
|
||||
<span class="rel-type">${typeDisplay}</span>
|
||||
<span class="rel-title">${title}</span>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(el);
|
||||
});
|
||||
}
|
||||
|
||||
function updateRecommendations(recommendations) {
|
||||
const container = document.getElementById('recommendations-grid');
|
||||
if (!container || !recommendations) return;
|
||||
container.innerHTML = '';
|
||||
|
||||
recommendations.forEach(rec => {
|
||||
const media = rec.mediaRecommendation;
|
||||
if (!media) return;
|
||||
|
||||
const title = media.title?.romaji || 'Unknown';
|
||||
const cover = media.coverImage?.large || media.coverImage?.medium || '';
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.className = 'card';
|
||||
|
||||
el.onclick = () => { window.location.href = `/anime/${media.id}`; };
|
||||
|
||||
el.innerHTML = `
|
||||
<div class="card-img-wrap"><img src="${cover}" loading="lazy" onerror="this.src='/public/assets/no-cover.jpg'"></div>
|
||||
<div class="card-content"><h3>${title}</h3></div>
|
||||
`;
|
||||
container.appendChild(el);
|
||||
});
|
||||
}
|
||||
|
||||
async function setupAddToListButton() {
|
||||
const btn = document.getElementById('add-to-list-btn');
|
||||
if (!btn || !animeData) return;
|
||||
|
||||
ListModalManager.currentData = animeData;
|
||||
const entryType = 'ANIME';
|
||||
await ListModalManager.checkIfInList(animeId, extensionName || 'anilist', entryType);
|
||||
updateCustomAddButton();
|
||||
btn.onclick = () => ListModalManager.open(animeData, extensionName || 'anilist');
|
||||
}
|
||||
|
||||
function updateCustomAddButton() {
|
||||
const btn = document.getElementById('add-to-list-btn');
|
||||
if (btn && ListModalManager.isInList) {
|
||||
btn.innerHTML = `✓ In Your List`;
|
||||
btn.style.background = 'rgba(34, 197, 94, 0.2)';
|
||||
btn.style.borderColor = '#22c55e';
|
||||
btn.style.color = '#22c55e';
|
||||
}
|
||||
}
|
||||
|
||||
function showError(msg) {
|
||||
const el = document.getElementById('title');
|
||||
if(el) el.innerText = msg;
|
||||
}
|
||||
|
||||
window.openDescriptionModal = openDescriptionModal;
|
||||
window.closeDescriptionModal = closeDescriptionModal;
|
||||
window.scrollRecommendations = (dir) => {
|
||||
const el = document.getElementById('recommendations-grid');
|
||||
if(el) el.scrollBy({ left: 240 * 3 * dir, behavior: 'smooth' });
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -52,10 +52,9 @@ const ContinueWatchingManager = {
|
||||
|
||||
if (entryType === 'ANIME') {
|
||||
url = item.source === 'anilist'
|
||||
? `/watch/${item.entry_id}/${nextProgress}`
|
||||
: `/watch/${item.entry_id}/${nextProgress}?${item.source}`;
|
||||
? `/anime/${item.entry_id}?episode=${nextProgress}`
|
||||
: `/anime/${item.entry_id}/${item.source}/?episode=${nextProgress}`;
|
||||
} else {
|
||||
|
||||
url = item.source === 'anilist'
|
||||
? `/book/${item.entry_id}?chapter=${nextProgress}`
|
||||
: `/read/${item.source}/${nextProgress}/${item.entry_id}?source=${item.source}`;
|
||||
|
||||
@@ -112,12 +112,6 @@ async function viewsRoutes(fastify: FastifyInstance) {
|
||||
reply.type('text/html').send(html);
|
||||
});
|
||||
|
||||
fastify.get('/watch/:id/:episode', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'watch.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
reply.type('text/html').send(html);
|
||||
});
|
||||
|
||||
fastify.get('/book/:id', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
|
||||
@@ -1,17 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon" />
|
||||
<title>WaifuBoard</title>
|
||||
<link rel="stylesheet" href="/views/css/globals.css">
|
||||
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
|
||||
<link rel="stylesheet" href="/views/css/components/hero.css">
|
||||
<link rel="stylesheet" href="/views/css/anime/anime.css">
|
||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
||||
<script src="/src/scripts/titlebar.js"></script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
|
||||
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="/views/css/globals.css" />
|
||||
<link rel="stylesheet" href="/views/css/components/anilist-modal.css" />
|
||||
<link rel="stylesheet" href="/views/css/anime/anime.css" />
|
||||
<link rel="stylesheet" href="/views/css/anime/player.css" />
|
||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
||||
<script src="/src/scripts/titlebar.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="titlebar">
|
||||
@@ -20,137 +24,158 @@
|
||||
<span class="app-title">WaifuBoard</span>
|
||||
</div>
|
||||
<div class="title-right">
|
||||
<button class="min">—</button>
|
||||
<button class="min">−</button>
|
||||
<button class="max">🗖</button>
|
||||
<button class="close">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/anime" class="back-btn">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
Back
|
||||
</a>
|
||||
|
||||
<div class="modal-overlay" id="desc-modal">
|
||||
<div class="modal-content">
|
||||
<button class="modal-close" onclick="closeModal()">✕</button>
|
||||
<button class="modal-close" onclick="closeDescriptionModal()">✕</button>
|
||||
<h2 class="modal-title">Synopsis</h2>
|
||||
<div class="modal-text" id="full-description"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="/anime" class="back-btn">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
|
||||
Back to Home
|
||||
</a>
|
||||
<div class="top-media-wrapper" id="top-media-wrapper">
|
||||
|
||||
<div class="hero-wrapper">
|
||||
<div class="video-background">
|
||||
<div id="player"></div>
|
||||
<div class="hero-wrapper" id="hero-wrapper">
|
||||
<div class="video-background"><div id="trailer-player"></div></div>
|
||||
<div class="hero-overlay"></div>
|
||||
</div>
|
||||
<div class="hero-overlay"></div>
|
||||
</div>
|
||||
|
||||
<div class="content-container">
|
||||
<aside class="sidebar">
|
||||
<div class="poster-card">
|
||||
<img id="poster" src="" alt="">
|
||||
</div>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<h4>Format</h4>
|
||||
<span id="format">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Episodes</h4>
|
||||
<span id="episodes">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Status</h4>
|
||||
<span id="status">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Season</h4>
|
||||
<span id="season">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Studio</h4>
|
||||
<span id="studio">--</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<h4>Main Characters</h4>
|
||||
<div class="character-list" id="char-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="main-content">
|
||||
<div class="anime-header">
|
||||
<h1 class="anime-title" id="title">Loading...</h1>
|
||||
|
||||
<div class="meta-row">
|
||||
<div class="pill extension-pill" id="extension-pill" style="display: none; background: #8b5cf6;"></div>
|
||||
<div class="pill" id="local-pill" style="display: none; background: #8b5cf6;"></div>
|
||||
<div class="pill score" id="score">--% Score</div>
|
||||
<div class="pill" id="year">----</div>
|
||||
<div class="pill" id="genres">Action</div>
|
||||
</div>
|
||||
|
||||
<div class="action-row">
|
||||
<button class="btn-watch" id="watch-btn">
|
||||
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||||
Start Watching
|
||||
</button>
|
||||
<button class="btn-secondary" id="add-to-list-btn" onclick="openAddToListModal()">+ Add to List</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="description-box">
|
||||
<div id="description-preview"></div>
|
||||
<button id="read-more-btn" class="read-more-btn" style="display: none;" onclick="openModal()">
|
||||
Read More
|
||||
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7"/></svg>
|
||||
<div class="player-wrapper" id="player-wrapper" style="display: none;">
|
||||
<div class="player-container">
|
||||
<button id="prev-ep-btn" class="side-nav-btn left" title="Previous Episode">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="episodes-section">
|
||||
<div class="episodes-header-row">
|
||||
<div class="section-title" style="margin:0; border:none; padding:0;">
|
||||
<h2 style="font-size: 1.8rem; border-left: 4px solid #8b5cf6; padding-left: 1rem;">Episodes</h2>
|
||||
<button id="next-ep-btn" class="side-nav-btn right" title="Next Episode">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
|
||||
</button>
|
||||
|
||||
<div class="player-header">
|
||||
<div class="header-left">
|
||||
<button class="btn-icon-glass" id="close-player-btn" title="Close Player">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg>
|
||||
</button>
|
||||
<div class="episode-info">
|
||||
<span class="ep-label">Watching</span>
|
||||
<span id="player-episode-title" class="ep-title">Episode 1</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="episode-search-wrapper">
|
||||
<input type="number" id="ep-search" class="episode-search-input" placeholder="Jump to Ep #" min="1">
|
||||
|
||||
<div class="header-right">
|
||||
<div class="settings-group">
|
||||
<div class="sd-toggle" id="sd-toggle" data-state="sub">
|
||||
<div class="sd-bg"></div>
|
||||
<div class="sd-option active" id="opt-sub">Sub</div>
|
||||
<div class="sd-option" id="opt-dub">Dub</div>
|
||||
</div>
|
||||
|
||||
<select id="server-select" class="glass-select" style="display:none;"></select>
|
||||
<select id="extension-select" class="glass-select"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="episodes-grid" id="episodes-grid"></div>
|
||||
|
||||
<div class="pagination-controls" id="pagination-controls">
|
||||
<button class="page-btn" id="prev-page" onclick="changePage(-1)">Previous</button>
|
||||
<span class="page-info" id="page-info">Page 1 of 1</span>
|
||||
<button class="page-btn" id="next-page" onclick="changePage(1)">Next</button>
|
||||
<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>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="updateToast" class="hidden">
|
||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
||||
<a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">
|
||||
Click To Download
|
||||
</a>
|
||||
</div>
|
||||
<div class="content-container" id="main-content">
|
||||
<div class="anime-header">
|
||||
<h1 class="anime-title" id="title">Loading...</h1>
|
||||
<div class="hero-meta-info">
|
||||
<span id="local-pill" class="pill-local" style="display:none;">Local</span>
|
||||
<span id="extension-pill" class="pill-local" style="background:#8b5cf6; display:none;">Ext</span>
|
||||
<span id="score">--% Score</span> • <span id="year">----</span> • <span id="format">--</span> • <span id="episodes">-- Ep</span>
|
||||
</div>
|
||||
<div class="hero-description-mini" id="description-preview"></div>
|
||||
<div class="hero-tags" id="genres"></div>
|
||||
|
||||
<script src="/src/scripts/updateNotifier.js"></script>
|
||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
||||
<script src="/src/scripts/auth-guard.js"></script>
|
||||
<div class="action-row">
|
||||
<button class="btn-watch" id="watch-btn">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="black"><path d="M8 5v14l11-7z"/></svg>
|
||||
Start Watching
|
||||
</button>
|
||||
<button class="btn-add-list" id="add-to-list-btn">+ Add to List</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-layout">
|
||||
<aside class="poster-section">
|
||||
<div class="poster-card"><img id="poster" src="" alt="Poster"></div>
|
||||
<div class="metadata-sidebar">
|
||||
<div class="meta-item-side"><span>Status</span><p id="status">--</p></div>
|
||||
<div class="meta-item-side"><span>Season</span><p id="season">--</p></div>
|
||||
<div class="meta-item-side"><span>Studio</span><p id="studio">--</p></div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="content-column">
|
||||
|
||||
<section class="episodes-section">
|
||||
<div class="episodes-header-row">
|
||||
<h2>Episodes</h2>
|
||||
<input type="number" id="ep-search" class="episode-search-input" placeholder="Jump to...">
|
||||
</div>
|
||||
<div id="episodes-grid" class="episodes-grid"></div>
|
||||
|
||||
<div class="pagination-controls" id="pagination-controls">
|
||||
<button class="page-btn" id="prev-page">Previous</button>
|
||||
<span class="page-info" id="page-info">Page 1 of 1</span>
|
||||
<button class="page-btn" id="next-page">Next</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="relations-section" style="display:none; margin-top: 3rem;">
|
||||
<h3 class="subsection-title">Relations</h3>
|
||||
<div class="relations-horizontal" id="relations-grid"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="content-section">
|
||||
<h2 class="subsection-title">Characters</h2>
|
||||
<div class="characters-grid" id="char-list"></div>
|
||||
<button id="show-more-chars" class="btn-show-more" style="display: none;">Show Full Cast</button>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2 class="subsection-title">Recommended</h2>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollRecommendations(-1)">‹</button>
|
||||
<div class="carousel" id="recommendations-grid"></div>
|
||||
<button class="scroll-btn right" onclick="scrollRecommendations(1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
||||
<script src="/src/scripts/utils/notification-utils.js"></script>
|
||||
<script src="/src/scripts/utils/url-utils.js"></script>
|
||||
<script src="/src/scripts/utils/pagination-manager.js"></script>
|
||||
<script src="/src/scripts/utils/media-metadata-utils.js"></script>
|
||||
<script src="/src/scripts/utils/youtube-player-utils.js"></script>
|
||||
<script src="/src/scripts/utils/list-modal-manager.js"></script>
|
||||
<script src="/src/scripts/anime/anime.js"></script>
|
||||
|
||||
<script src="/src/scripts/anime/player.js"></script>
|
||||
<script src="/src/scripts/anime/entry.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,197 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WaifuBoard Watch</title>
|
||||
<link rel="stylesheet" href="/views/css/globals.css">
|
||||
<link rel="stylesheet" href="/views/css/anime/watch.css">
|
||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
|
||||
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico">
|
||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
||||
<script src="/src/scripts/titlebar.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="titlebar"> <div class="title-left">
|
||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
||||
<span class="app-title">WaifuBoard</span>
|
||||
</div>
|
||||
<div class="title-right">
|
||||
<button class="min">—</button>
|
||||
<button class="max">🗖</button>
|
||||
<button class="close">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="top-bar">
|
||||
<a href="#" id="back-link" class="back-btn">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
|
||||
<path d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
<span>Back to Series</span>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<div class="ui-scale-wrapper">
|
||||
<main class="watch-container">
|
||||
|
||||
<section class="anime-details">
|
||||
<div class="details-container">
|
||||
<div class="details-cover">
|
||||
<img id="detail-cover-image" src="" alt="Anime Cover" class="cover-image">
|
||||
</div>
|
||||
<div class="details-content">
|
||||
<h1 id="anime-title-details">Loading...</h1>
|
||||
<div class="details-meta">
|
||||
<span id="detail-format" class="meta-badge">--</span>
|
||||
<span id="detail-season" class="meta-badge">--</span>
|
||||
<span id="detail-score" class="meta-badge meta-score">--</span>
|
||||
</div>
|
||||
<br>
|
||||
<p id="detail-description" class="details-description">Loading description...</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="player-section">
|
||||
|
||||
<div class="player-toolbar">
|
||||
<div class="control-group">
|
||||
<div class="sd-toggle" id="sd-toggle" data-state="sub" onclick="toggleAudioMode()">
|
||||
<div class="sd-bg"></div>
|
||||
<div class="sd-option active" id="opt-sub">Sub</div>
|
||||
<div class="sd-option" id="opt-dub">Dub</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<select id="server-select" class="source-select" onchange="loadStream()" style="display:none;">
|
||||
<option value="">Server...</option>
|
||||
</select>
|
||||
<select id="extension-select" class="source-select" onchange="onExtensionChange()">
|
||||
<option value="" disabled selected>Source...</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-container">
|
||||
<video id="player" controls crossorigin playsinline></video>
|
||||
<div id="loading-overlay" class="loading-overlay">
|
||||
<div class="spinner"></div>
|
||||
<p id="loading-text">Select a source...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="episode-controls">
|
||||
<div class="episode-info">
|
||||
<h1 id="anime-title-details2">Loading...</h1>
|
||||
<p id="episode-label">Episode --</p>
|
||||
</div>
|
||||
<div class="navigation-buttons">
|
||||
<button class="nav-btn prev-btn" id="prev-btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg><span>Previous</span></button>
|
||||
<button class="nav-btn next-btn" id="next-btn"><span>Next</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 5l7 7-7 7"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="episode-carousel-compact">
|
||||
<div class="carousel-header">
|
||||
<h2>Episodes</h2>
|
||||
<div class="carousel-nav">
|
||||
<button class="carousel-arrow-mini" id="ep-prev-mini"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M15 18l-6-6 6-6"/></svg></button>
|
||||
<button class="carousel-arrow-mini" id="ep-next-mini"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M9 6l6 6-6 6"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="episode-carousel" class="episode-carousel-compact-list">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="../../src/scripts/anime/player.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const carousel = document.getElementById('episode-carousel');
|
||||
if (!carousel) return;
|
||||
|
||||
const prevBtn = document.getElementById('ep-prev-mini');
|
||||
const nextBtn = document.getElementById('ep-next-mini');
|
||||
|
||||
const scrollAmount = 150;
|
||||
|
||||
prevBtn?.addEventListener('click', () => {
|
||||
carousel.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
|
||||
});
|
||||
|
||||
nextBtn?.addEventListener('click', () => {
|
||||
carousel.scrollBy({ left: scrollAmount, behavior: 'smooth' });
|
||||
});
|
||||
|
||||
const updateArrows = () => {
|
||||
if (!prevBtn || !nextBtn) return;
|
||||
|
||||
prevBtn.style.opacity = carousel.scrollLeft <= 10 ? '0.3' : '1';
|
||||
prevBtn.style.pointerEvents = carousel.scrollLeft <= 10 ? 'none' : 'auto';
|
||||
|
||||
const atEnd = carousel.scrollLeft + carousel.clientWidth >= carousel.scrollWidth - 10;
|
||||
nextBtn.style.opacity = atEnd ? '0.3' : '1';
|
||||
nextBtn.style.pointerEvents = atEnd ? 'none' : 'auto';
|
||||
};
|
||||
|
||||
carousel.addEventListener('scroll', updateArrows);
|
||||
window.addEventListener('resize', updateArrows);
|
||||
|
||||
const observer = new MutationObserver((mutations, obs) => {
|
||||
updateArrows();
|
||||
obs.disconnect();
|
||||
|
||||
});
|
||||
observer.observe(carousel, { childList: true });
|
||||
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const expandBtn = document.getElementById('expand-characters-btn');
|
||||
const characterList = document.getElementById('characters-list');
|
||||
const btnText = expandBtn?.querySelector('span');
|
||||
|
||||
if (!expandBtn || !characterList) return;
|
||||
|
||||
expandBtn.addEventListener('click', () => {
|
||||
const isExpanded = expandBtn.getAttribute('data-expanded') === 'true';
|
||||
|
||||
if (isExpanded) {
|
||||
|
||||
characterList.classList.remove('expanded');
|
||||
expandBtn.setAttribute('data-expanded', 'false');
|
||||
if (btnText) btnText.innerText = 'Show All';
|
||||
} else {
|
||||
|
||||
characterList.classList.add('expanded');
|
||||
expandBtn.setAttribute('data-expanded', 'true');
|
||||
if (btnText) btnText.innerText = 'Show Less';
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="updateToast" class="hidden">
|
||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
||||
|
||||
<a
|
||||
id="downloadButton"
|
||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
||||
target="_blank"
|
||||
>
|
||||
Click To Download
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script src="/src/scripts/updateNotifier.js"></script>
|
||||
<script src="/src/scripts/auth-guard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,297 +1,274 @@
|
||||
:root {
|
||||
--bg-card: rgba(255, 255, 255, 0.04);
|
||||
--border-subtle: rgba(255, 255, 255, 0.1);
|
||||
--color-primary: #8b5cf6;
|
||||
--player-height: 85vh;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #0b0b0b;
|
||||
color: white;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
.top-media-wrapper {
|
||||
position: relative;
|
||||
|
||||
width: 100vw;
|
||||
left: 0;
|
||||
background: #000;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.hero-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.video-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.video-background iframe,
|
||||
.video-background #trailer-player {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(1.35);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
opacity: 0.6;
|
||||
|
||||
width: 100vw;
|
||||
height: 56.25vw;
|
||||
min-height: 100vh;
|
||||
min-width: 177.77vh;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.8) 70%, #0b0b0b 100%);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
max-width: 1600px;
|
||||
margin: -350px auto 0 auto;
|
||||
max-width: 1400px;
|
||||
margin: -45vh auto 0 auto;
|
||||
padding: 0 3rem 4rem 3rem;
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr;
|
||||
gap: 3rem;
|
||||
animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
transition: margin-top 0.5s ease;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
body.watch-mode .content-container { margin-top: 0; }
|
||||
body.watch-mode .anime-header { margin-top: 2rem; }
|
||||
|
||||
.anime-header { margin-bottom: 5rem; max-width: 900px; }
|
||||
.anime-title {
|
||||
font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900;
|
||||
margin-bottom: 0.5rem; text-shadow: 0 4px 30px rgba(0,0,0,0.6);
|
||||
}
|
||||
.hero-meta-info {
|
||||
display: flex; align-items: center; gap: 0.8rem;
|
||||
color: rgba(255,255,255,0.7); font-weight: 600; margin-bottom: 1.2rem;
|
||||
}
|
||||
.pill-local {
|
||||
background: #22c55e; color: black; padding: 2px 8px;
|
||||
border-radius: 4px; font-size: 0.75rem; font-weight: 900;
|
||||
}
|
||||
.hero-description-mini {
|
||||
font-size: 1.05rem; line-height: 1.5; color: rgba(255,255,255,0.8);
|
||||
margin-bottom: 1.2rem; max-width: 700px;
|
||||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
||||
}
|
||||
.hero-tags {
|
||||
display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem;
|
||||
color: rgba(255,255,255,0.5); font-weight: 500;
|
||||
}
|
||||
|
||||
.action-row { display: flex; align-items: center; gap: 1rem; }
|
||||
.btn-watch {
|
||||
padding: 0.8rem 2.2rem; background: white; color: black;
|
||||
border-radius: 8px; font-weight: 800; border: none; cursor: pointer;
|
||||
display: flex; align-items: center; gap: 0.6rem; transition: 0.2s ease;
|
||||
}
|
||||
.btn-watch:hover { transform: scale(1.03); filter: brightness(0.9); }
|
||||
|
||||
.btn-add-list {
|
||||
padding: 0.8rem 1.5rem; background: rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(255,255,255,0.2); color: white;
|
||||
border-radius: 8px; font-weight: 700; cursor: pointer; transition: 0.2s;
|
||||
}
|
||||
.btn-add-list:hover { background: rgba(255,255,255,0.2); }
|
||||
|
||||
.main-layout { display: grid; grid-template-columns: 300px 1fr; gap: 4rem; margin-top: 2rem; }
|
||||
.content-section { margin-top: 4rem; }
|
||||
h2, .subsection-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; color: white; }
|
||||
|
||||
.poster-card {
|
||||
width: 100%;
|
||||
aspect-ratio: 2/3;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 12px; overflow: hidden;
|
||||
box-shadow: 0 30px 60px rgba(0,0,0,0.5); border: 1px solid var(--border-subtle);
|
||||
}
|
||||
.poster-card img { width: 100%; height: auto; display: block; }
|
||||
|
||||
.poster-card img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
.relations-horizontal { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
|
||||
.relation-card-horizontal {
|
||||
display: flex; background: var(--bg-card); border: 1px solid var(--border-subtle);
|
||||
border-radius: 10px; overflow: hidden; transition: 0.2s; cursor: pointer;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
.relation-card-horizontal:hover { background: rgba(255,255,255,0.08); transform: translateX(5px); }
|
||||
.rel-img { width: 85px; height: 110px; object-fit: cover; }
|
||||
.rel-info { padding: 1rem; display: flex; flex-direction: column; justify-content: center; }
|
||||
.rel-type {
|
||||
font-size: 0.7rem; color: var(--color-primary); font-weight: 800;
|
||||
margin-bottom: 4px; background: rgba(139, 92, 246, 0.1); width: fit-content; padding: 2px 6px; border-radius: 4px;
|
||||
}
|
||||
.rel-title { font-size: 0.95rem; font-weight: 700; color: #eee; }
|
||||
|
||||
.info-item h4 { margin: 0 0 0.25rem 0; font-size: 0.85rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.info-item span { font-weight: 600; font-size: 1rem; color: var(--color-text-primary); }
|
||||
.characters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
||||
.character-item { display: flex; align-items: center; gap: 1rem; }
|
||||
.char-avatar { width: 60px; height: 60px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
|
||||
.char-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.char-info { display: flex; flex-direction: column; gap: 2px; }
|
||||
.char-name { font-size: 1rem; font-weight: 700; color: #fff; }
|
||||
.char-role { font-size: 0.8rem; color: #888; font-weight: 500; }
|
||||
.btn-show-more { background: transparent; border: 1px solid var(--border-subtle); color: #aaa; padding: 10px; width: 100%; margin-top: 1rem; cursor: pointer; }
|
||||
|
||||
.character-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
.episodes-section { margin-top: 3rem; }
|
||||
.episodes-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
|
||||
.episode-search-input {
|
||||
background: rgba(255,255,255,0.05); border: 1px solid var(--border-subtle);
|
||||
color: white; padding: 8px 15px; border-radius: 8px; width: 100px;
|
||||
}
|
||||
.character-item { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; }
|
||||
.char-dot { width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; }
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.anime-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.anime-title {
|
||||
font-size: 4rem;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
margin: 0 0 1.5rem 0;
|
||||
text-shadow: 0 4px 30px rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pill {
|
||||
padding: 0.5rem 1.25rem;
|
||||
background: rgba(255,255,255,0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.pill.score { background: rgba(34, 197, 94, 0.2); color: #4ade80; border-color: rgba(34, 197, 94, 0.2); }
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.btn-watch {
|
||||
padding: 1rem 3rem;
|
||||
background: var(--color-text-primary);
|
||||
color: var(--color-bg-base);
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 800;
|
||||
font-size: 1.1rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.btn-watch:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
padding: 1rem 2rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
color: white;
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.description-box {
|
||||
margin-top: 3rem;
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.8;
|
||||
color: #e4e4e7;
|
||||
max-width: 900px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
padding: 2rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.episodes-section {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
.section-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.8rem; }
|
||||
.section-title::before { content: ''; width: 4px; height: 28px; background: var(--color-primary); border-radius: 2px; }
|
||||
|
||||
.episodes-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
|
||||
gap: 0.6rem;
|
||||
}
|
||||
.episode-btn {
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
padding: 1.25rem 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid var(--border-subtle);
|
||||
padding: 0.6rem 0;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.episode-btn:hover {
|
||||
background: var(--color-bg-elevated-hover);
|
||||
color: white;
|
||||
transform: translateY(-3px);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(60px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.content-container {
|
||||
grid-template-columns: 1fr;
|
||||
margin-top: -100px;
|
||||
padding: 0 1.5rem 4rem 1.5rem;
|
||||
}
|
||||
.poster-card { width: 220px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
|
||||
.main-content { text-align: center; align-items: center; }
|
||||
.anime-title { font-size: 2.5rem; }
|
||||
.meta-row { justify-content: center; }
|
||||
.sidebar { display: none; }
|
||||
}
|
||||
|
||||
.read-more-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #8b5cf6;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
padding: 0;
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.95rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
transition: all 0.2s;
|
||||
color: #ccc;
|
||||
}
|
||||
.episode-btn:hover {
|
||||
background: white;
|
||||
color: black;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.episode-btn.active-playing {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
.read-more-btn:hover { text-decoration: underline; }
|
||||
|
||||
.episodes-header-row {
|
||||
.metadata-sidebar {
|
||||
margin-top: 2rem;
|
||||
background: rgba(255,255,255,0.03);
|
||||
padding: 1.5rem;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.2rem;
|
||||
}
|
||||
.meta-item-side {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
padding-bottom: 0.8rem;
|
||||
}
|
||||
.episodes-header-row h2 {
|
||||
.meta-item-side:last-child { border-bottom: none; padding-bottom: 0; }
|
||||
.meta-item-side span {
|
||||
font-size: 0.8rem;
|
||||
color: #888;
|
||||
font-weight: 600;
|
||||
}
|
||||
.meta-item-side p {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: 1.8rem;
|
||||
border-left: 4px solid #8b5cf6;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.episode-search-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.episode-search-input {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 99px;
|
||||
padding: 0.6rem 1rem;
|
||||
color: white;
|
||||
width: 140px;
|
||||
text-align: center;
|
||||
font-family: inherit;
|
||||
transition: 0.2s;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
.episode-search-input:focus {
|
||||
border-color: #8b5cf6;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
outline: none;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.episode-search-input::-webkit-outer-spin-button,
|
||||
.episode-search-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
||||
@media (max-width: 1024px) {
|
||||
.content-container { margin-top: -200px; padding: 0 1.5rem; }
|
||||
.main-layout { grid-template-columns: 1fr; gap: 2rem; }
|
||||
.poster-section { display: flex; flex-direction: column; align-items: center; }
|
||||
.poster-card { width: 220px; }
|
||||
.metadata-sidebar { width: 100%; max-width: 400px; }
|
||||
}
|
||||
|
||||
.relation-card-horizontal.no-link {
|
||||
cursor: default;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.relation-card-horizontal.no-link:hover {
|
||||
transform: none;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
gap: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
padding-top: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
color: #888;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
padding: 0.6rem 1.2rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.page-btn:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: #8b5cf6;
|
||||
background: white;
|
||||
color: black;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.page-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.page-info {
|
||||
color: #a1a1aa;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
507
desktop/views/css/anime/player.css
Normal file
507
desktop/views/css/anime/player.css
Normal file
@@ -0,0 +1,507 @@
|
||||
:root {
|
||||
--brand-color: #8b5cf6;
|
||||
--brand-color-light: #a78bfa;
|
||||
--op-color: #fbbf24;
|
||||
--ed-color: #38bdf8;
|
||||
--overlay-gradient-top: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent 100%);
|
||||
--overlay-gradient-bottom: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 40%, transparent 100%);
|
||||
}
|
||||
|
||||
body.stop-scrolling {
|
||||
overflow: hidden !important;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.player-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.player-wrapper * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.player-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.video-frame {
|
||||
|
||||
flex: 1;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.video-frame video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.video-frame .plyr {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.player-header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 20px 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
z-index: 20;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%);
|
||||
pointer-events: none; /* Permite clickear el video a través del header vacío */
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.header-left, .header-right {
|
||||
pointer-events: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.btn-icon-glass {
|
||||
appearance: none;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
border-radius: 20%;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(4px);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-icon-glass:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||||
transform: translateY(-1px) scale(1.05);
|
||||
}
|
||||
|
||||
.player-container:hover .player-header,
|
||||
.player-container.paused .player-header {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.player-meta {
|
||||
display: flex; flex-direction: column; gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-close-player {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: rgba(255,255,255,0.7);
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
font-size: 1.1rem; font-weight: 500;
|
||||
cursor: pointer; padding: 0;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.btn-close-player:hover { color: #fff; }
|
||||
.btn-close-player svg { width: 28px; height: 28px; }
|
||||
|
||||
.episode-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ep-label {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255,255,255,0.7);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.ep-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.nav-capsule {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 20px; /* Forma de pastilla */
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-btn:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.nav-btn:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.nav-capsule .divider {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
#skip-overlay-btn {
|
||||
position: absolute;
|
||||
bottom: 80px; /* Encima de la barra de Plyr */
|
||||
right: 30px;
|
||||
background: white;
|
||||
color: black;
|
||||
padding: 10px 24px;
|
||||
border-radius: 6px;
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
z-index: 2147483647 !important; /* Siempre encima de todo */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
|
||||
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.3s, transform 0.3s, background 0.2s;
|
||||
pointer-events: none;
|
||||
|
||||
}
|
||||
|
||||
#skip-overlay-btn.visible {
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
cursor: pointer !important;
|
||||
visibility: visible !important;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
#skip-overlay-btn:hover {
|
||||
background: #f0f0f0;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
#skip-overlay-btn.is-next {
|
||||
background: #8b5cf6;
|
||||
color: white;
|
||||
}
|
||||
#skip-overlay-btn.is-next:hover {
|
||||
background: #7c3aed;
|
||||
}
|
||||
|
||||
|
||||
/* --- BOTONES DE NAVEGACIÓN LATERALES (Side Chevrons) --- */
|
||||
.side-nav-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
border: none;
|
||||
width: 60px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 30; /* Encima del video */
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0; /* Invisibles por defecto */
|
||||
}
|
||||
|
||||
/* Bordes redondeados según el lado */
|
||||
.side-nav-btn.left {
|
||||
left: 0;
|
||||
border-radius: 0 10px 10px 0;
|
||||
}
|
||||
|
||||
.side-nav-btn.right {
|
||||
right: 0;
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
/* Mostrar solo cuando el mouse está sobre el reproductor */
|
||||
.player-container:hover .side-nav-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Efecto Hover sobre el botón */
|
||||
.side-nav-btn:hover:not(:disabled) {
|
||||
background: rgba(139, 92, 246, 0.6); /* Tu color brand morado pero transparente */
|
||||
color: white;
|
||||
width: 70px; /* Crecen un poco */
|
||||
}
|
||||
|
||||
/* Estado deshabilitado (Primer/Último episodio) */
|
||||
.side-nav-btn:disabled {
|
||||
cursor: default;
|
||||
opacity: 0 !important; /* Totalmente oculto si no se puede usar */
|
||||
pointer-events: none;
|
||||
}
|
||||
#player-episode-title {
|
||||
font-size: 1.5rem; font-weight: 700;
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.player-controls-top {
|
||||
display: flex; gap: 1rem; align-items: center;
|
||||
}
|
||||
|
||||
.glass-select {
|
||||
appearance: none;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: #fff;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem; font-weight: 600;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(4px);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.glass-select:hover { background: rgba(255, 255, 255, 0.2); }
|
||||
.glass-select option { background: #111; color: #ccc; }
|
||||
|
||||
.sd-toggle {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
.sd-option {
|
||||
padding: 4px 12px;
|
||||
font-size: 0.75rem; font-weight: 700;
|
||||
color: rgba(255,255,255,0.5);
|
||||
border-radius: 2px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.sd-option.active {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.btn-skip-intro {
|
||||
position: absolute;
|
||||
bottom: 120px; right: 40px;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
border: none;
|
||||
padding: 10px 24px;
|
||||
font-weight: 700; font-size: 0.9rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
z-index: 50;
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
opacity: 0; transform: translateY(20px);
|
||||
transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
||||
}
|
||||
.btn-skip-intro.visible {
|
||||
opacity: 1; transform: translateY(0);
|
||||
}
|
||||
.btn-skip-intro:hover {
|
||||
background: #e6e6e6;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
:root {
|
||||
--plyr-color-main: var(--brand-color);
|
||||
--plyr-video-control-color: #fff;
|
||||
--plyr-video-control-background-hover: transparent;
|
||||
--plyr-control-icon-size: 20px;
|
||||
--plyr-range-track-height: 4px;
|
||||
--plyr-range-thumb-height: 14px;
|
||||
--plyr-range-thumb-background: #fff;
|
||||
--plyr-menu-background: rgba(20, 20, 20, 0.95);
|
||||
--plyr-menu-color: #fff;
|
||||
--plyr-tooltip-background: rgba(255,255,255,0.9);
|
||||
--plyr-tooltip-color: #000;
|
||||
}
|
||||
|
||||
.plyr--video .plyr__controls {
|
||||
padding-bottom: max(20px, env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.plyr__progress__container:hover .plyr__progress input[type=range],
|
||||
.plyr__progress__container:hover .plyr__progress__buffer {
|
||||
height: 8px;
|
||||
transition: height 0.1s ease;
|
||||
}
|
||||
|
||||
.plyr__progress {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.skip-marker {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 4px;
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
transition: height 0.1s ease;
|
||||
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
|
||||
border-left: 2px solid rgba(0,0,0,0);
|
||||
border-right: 2px solid rgba(0,0,0,0);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.plyr__progress__container:hover .skip-marker {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.skip-marker.op {
|
||||
background-color: var(--op-color);
|
||||
box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
|
||||
}
|
||||
|
||||
.skip-marker.ed {
|
||||
background-color: var(--ed-color);
|
||||
}
|
||||
|
||||
.player-loading-overlay {
|
||||
background: #000;
|
||||
}
|
||||
.spinner {
|
||||
border-width: 2px;
|
||||
width: 50px; height: 50px;
|
||||
border-top-color: #fff;
|
||||
border-right-color: rgba(255,255,255,0.1);
|
||||
border-bottom-color: rgba(255,255,255,0.1);
|
||||
border-left-color: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.settings-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px; /* Espacio entre los elementos */
|
||||
}
|
||||
|
||||
/* Opcional: Ajuste para pantallas móviles muy pequeñas */
|
||||
@media (max-width: 600px) {
|
||||
.settings-group {
|
||||
gap: 8px;
|
||||
}
|
||||
.glass-select {
|
||||
padding: 6px 10px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.player-container:fullscreen,
|
||||
.player-container:-webkit-full-screen {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #000;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
/* Controles custom SIEMPRE visibles encima */
|
||||
.player-container:fullscreen .player-header,
|
||||
.player-container:fullscreen .side-nav-btn,
|
||||
.player-container:fullscreen #skip-overlay-btn,
|
||||
.player-container:-webkit-full-screen .player-header,
|
||||
.player-container:-webkit-full-screen .side-nav-btn,
|
||||
.player-container:-webkit-full-screen #skip-overlay-btn {
|
||||
z-index: 2147483647 !important;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Posición correcta del botón Skip en fullscreen */
|
||||
.player-container:fullscreen #skip-overlay-btn,
|
||||
.player-container:-webkit-full-screen #skip-overlay-btn {
|
||||
bottom: 100px;
|
||||
right: 50px;
|
||||
}
|
||||
|
||||
/* ================= UI HIDDEN (UNA SOLA FUENTE DE VERDAD) ================= */
|
||||
|
||||
.player-container.ui-hidden .player-header,
|
||||
.player-container.ui-hidden .side-nav-btn {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
cursor: none;
|
||||
}
|
||||
#skip-overlay-btn {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#skip-overlay-btn.visible {
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.player-container.ui-hidden #skip-overlay-btn.visible {
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
cursor: pointer !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
.player-header,
|
||||
.side-nav-btn,
|
||||
#skip-overlay-btn {
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.player-container:fullscreen #skip-overlay-btn,
|
||||
.player-container:-webkit-full-screen #skip-overlay-btn {
|
||||
z-index: 2147483647 !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
.player-container:fullscreen #skip-overlay-btn.visible,
|
||||
.player-container:-webkit-full-screen #skip-overlay-btn.visible {
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
@@ -1,830 +0,0 @@
|
||||
.top-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: var(--spacing-lg) var(--spacing-xl);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0.8) 0%,
|
||||
transparent 100%
|
||||
);
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
pointer-events: auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
padding: 0.7rem 1.5rem;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-full);
|
||||
color: var(--color-text-primary);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
transition: all var(--transition-smooth);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-glow);
|
||||
}
|
||||
|
||||
.watch-container {
|
||||
max-width: 1600px;
|
||||
margin: var(--spacing-2xl) auto;
|
||||
padding: 0 var(--spacing-xl);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xl);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.player-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
flex-wrap: wrap;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.sd-toggle {
|
||||
display: flex;
|
||||
background: var(--color-bg-elevated);
|
||||
border: var(--border-subtle);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 4px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sd-option {
|
||||
padding: 0.6rem 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-muted);
|
||||
z-index: 2;
|
||||
transition: color var(--transition-base);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.sd-option.active {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.sd-bg {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
width: calc(50% - 4px);
|
||||
background: var(--color-primary);
|
||||
border-radius: var(--radius-full);
|
||||
transition: transform var(--transition-smooth);
|
||||
box-shadow: 0 4px 12px var(--color-primary-glow);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sd-toggle[data-state="dub"] .sd-bg {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.source-select {
|
||||
appearance: none;
|
||||
background-color: var(--color-bg-elevated);
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 1.2rem center;
|
||||
border: var(--border-subtle);
|
||||
color: var(--color-text-primary);
|
||||
padding: 0.7rem 2.8rem 0.7rem 1.2rem;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
min-width: 160px;
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.source-select:hover {
|
||||
border-color: var(--color-primary);
|
||||
background-color: var(--color-bg-card);
|
||||
}
|
||||
.source-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px var(--color-primary-glow);
|
||||
}
|
||||
|
||||
.video-container {
|
||||
aspect-ratio: 16/9;
|
||||
width: 100%;
|
||||
background: var(--color-bg-base);
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
var(--shadow-lg),
|
||||
0 0 0 1px var(--glass-border);
|
||||
position: relative;
|
||||
transition: box-shadow var(--transition-smooth);
|
||||
}
|
||||
|
||||
.video-container:hover {
|
||||
box-shadow:
|
||||
var(--shadow-lg),
|
||||
0 0 0 1px var(--color-primary),
|
||||
var(--shadow-glow);
|
||||
}
|
||||
|
||||
#player {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--color-bg-base);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 20;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.1);
|
||||
border-top-color: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-overlay p {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.episode-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-lg);
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.episode-info h1 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 800;
|
||||
margin: 0 0 var(--spacing-xs);
|
||||
}
|
||||
.episode-info p {
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.navigation-buttons {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
background: var(--color-bg-elevated);
|
||||
border: var(--border-subtle);
|
||||
color: var(--color-text-primary);
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.nav-btn:hover:not(:disabled) {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-glow);
|
||||
}
|
||||
.nav-btn:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.episode-carousel-compact {
|
||||
width: 100%;
|
||||
max-width: 1600px;
|
||||
margin-top: var(--spacing-lg);
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.carousel-header {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
padding: 0 var(--spacing-xl);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.carousel-header h2 {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 900;
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: -0.04em;
|
||||
border-left: 4px solid var(--color-primary);
|
||||
padding-left: var(--spacing-md);
|
||||
}
|
||||
|
||||
.carousel-nav {
|
||||
display: flex;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.carousel-arrow-mini {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: var(--color-bg-elevated);
|
||||
border: var(--border-subtle);
|
||||
border-radius: var(--radius-full);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.carousel-arrow-mini:hover {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-text-primary);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.carousel-arrow-mini[style*="opacity: 0.3"] {
|
||||
background: var(--color-bg-elevated);
|
||||
color: var(--color-text-muted);
|
||||
border-color: var(--border-subtle);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.episode-carousel-compact-list {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-sm) var(--spacing-xl);
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
mask-image: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
black var(--spacing-md),
|
||||
black calc(100% - var(--spacing-md)),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.episode-carousel-compact-list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
flex: 0 0 200px;
|
||||
height: 112px;
|
||||
|
||||
background: var(--color-bg-card);
|
||||
border: 2px solid var(--border-subtle);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition: all var(--transition-base);
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
scroll-snap-align: start;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.carousel-item:hover {
|
||||
border-color: var(--color-primary);
|
||||
transform: scale(1.02);
|
||||
box-shadow: var(--shadow-md), var(--shadow-glow);
|
||||
}
|
||||
|
||||
.carousel-item.active-ep-carousel {
|
||||
border-color: var(--color-primary);
|
||||
background: rgba(139, 92, 246, 0.15);
|
||||
box-shadow:
|
||||
0 0 0 2px var(--color-primary),
|
||||
var(--shadow-md);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.carousel-item.active-ep-carousel::after {
|
||||
content: "WATCHING";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-primary);
|
||||
padding: 2px 8px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 800;
|
||||
border-bottom-left-radius: var(--radius-sm);
|
||||
letter-spacing: 0.05em;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.carousel-item-img-container {
|
||||
height: 70px;
|
||||
background: var(--color-bg-elevated);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.carousel-item-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform var(--transition-smooth);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.carousel-item:hover .carousel-item-img {
|
||||
transform: scale(1.1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.carousel-item-info {
|
||||
flex: 1;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
background: var(--color-bg-elevated);
|
||||
}
|
||||
|
||||
.carousel-item-info p {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.carousel-item-info p::before {
|
||||
content: attr(data-episode-number);
|
||||
color: var(--color-primary);
|
||||
font-weight: 800;
|
||||
margin-right: var(--spacing-xs);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.carousel-item.no-thumbnail {
|
||||
flex: 0 0 160px;
|
||||
height: 90px;
|
||||
background: var(--color-bg-elevated);
|
||||
border: 2px solid var(--border-subtle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.carousel-item.no-thumbnail .carousel-item-info {
|
||||
padding: var(--spacing-sm);
|
||||
background: transparent;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.carousel-item.no-thumbnail .carousel-item-info p {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.carousel-item.no-thumbnail:hover {
|
||||
background: rgba(139, 92, 246, 0.12);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.carousel-item.no-thumbnail.active-ep-carousel .carousel-item-info p {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.anime-details,
|
||||
.anime-extra-content {
|
||||
max-width: 1600px;
|
||||
margin: var(--spacing-2xl) auto;
|
||||
}
|
||||
|
||||
.details-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-xl);
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-xl);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.details-cover {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-md);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.details-cover h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 900;
|
||||
color: var(--color-text-primary);
|
||||
line-height: 1.2;
|
||||
margin: 0 0 var(--spacing-md) 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
width: 220px;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.details-content h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.meta-badge {
|
||||
background: rgba(139, 92, 246, 0.12);
|
||||
color: var(--color-primary);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(139, 92, 246, 0.2);
|
||||
}
|
||||
|
||||
.meta-badge.meta-score {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
.details-description {
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.characters-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.characters-header h2 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 800;
|
||||
color: var(--color-text-primary);
|
||||
border-left: 5px solid var(--color-primary);
|
||||
padding-left: var(--spacing-md);
|
||||
}
|
||||
|
||||
.expand-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
padding: var(--spacing-xs);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.expand-btn:hover {
|
||||
background: rgba(139, 92, 246, 0.1);
|
||||
}
|
||||
.expand-btn svg {
|
||||
transition: transform var(--transition-smooth);
|
||||
}
|
||||
.expand-btn[data-expanded="true"] svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.characters-carousel {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-lg);
|
||||
align-content: flex-start;
|
||||
overflow: hidden;
|
||||
|
||||
height: 208px;
|
||||
transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding: 0 var(--spacing-sm);
|
||||
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.characters-carousel::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.characters-carousel.expanded {
|
||||
height: auto;
|
||||
max-height: 3200px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 0;
|
||||
|
||||
-ms-overflow-style: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.characters-carousel.expanded::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.characters-carousel.expanded::-webkit-scrollbar-thumb {
|
||||
background: rgba(139, 92, 246, 0.4);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.characters-carousel.expanded::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.plyr--video {
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
.plyr__controls {
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
rgba(0, 0, 0, 0.9) 0%,
|
||||
rgba(0, 0, 0, 0.5) 50%,
|
||||
transparent 100%
|
||||
) !important;
|
||||
padding: 1rem 1.5rem 1.5rem !important;
|
||||
}
|
||||
.plyr--full-ui input[type="range"] {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.plyr__control:hover {
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
}
|
||||
.plyr__menu__container {
|
||||
background: var(--glass-bg) !important;
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--shadow-lg) !important;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.carousel-nav {
|
||||
display: flex;
|
||||
}
|
||||
.watch-container {
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
.details-cover {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.details-cover h1 {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.watch-container {
|
||||
padding: 5rem 1rem 2rem 1rem;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.player-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.source-select {
|
||||
width: 100%;
|
||||
background-position: right 1.5rem center;
|
||||
}
|
||||
|
||||
.episode-controls {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.episode-info {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.episode-info h1 {
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.navigation-buttons {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
justify-content: center;
|
||||
padding: 0.8rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.details-container {
|
||||
flex-direction: column;
|
||||
padding: 1.5rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.details-cover {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.details-cover {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.details-cover h1 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
width: 140px;
|
||||
flex-shrink: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.details-content h1 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.characters-carousel {
|
||||
justify-content: center;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.character-card {
|
||||
width: calc(50% - 0.75rem);
|
||||
flex: 0 0 calc(50% - 0.75rem);
|
||||
}
|
||||
}
|
||||
|
||||
.plyr__progress {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.plyr__markers {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.plyr__marker {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
background: rgba(255, 215, 0, 0.8); /* Color dorado para Opening */
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.plyr__marker[data-label*="Ending"] {
|
||||
background: rgba(255, 100, 100, 0.8); /* Color rojo para Ending */
|
||||
}
|
||||
|
||||
.plyr__marker:hover {
|
||||
height: 120%;
|
||||
width: 4px;
|
||||
background: rgba(255, 215, 0, 1);
|
||||
}
|
||||
|
||||
.plyr__marker[data-label*="Ending"]:hover {
|
||||
background: rgba(255, 100, 100, 1);
|
||||
}
|
||||
|
||||
/* Tooltip para mostrar el label */
|
||||
.plyr__marker::before {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-8px);
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.plyr__marker:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
.plyr__marker {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -25,6 +25,11 @@ html.electron .panel-header {
|
||||
top: var(--titlebar-height) !important;
|
||||
}
|
||||
|
||||
html.electron .player-wrapper {
|
||||
top: var(--titlebar-height);
|
||||
height: calc(100% - var(--titlebar-height));
|
||||
}
|
||||
|
||||
html.electron .panel-content {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
@@ -41,17 +41,21 @@ const MEDIA_FIELDS = `
|
||||
siteUrl
|
||||
tags { id name description category rank isGeneralSpoiler isMediaSpoiler isAdult }
|
||||
relations {
|
||||
edges {
|
||||
relationType
|
||||
node {
|
||||
id
|
||||
title { romaji }
|
||||
type
|
||||
format
|
||||
status
|
||||
edges {
|
||||
relationType
|
||||
node {
|
||||
id
|
||||
title { romaji english }
|
||||
type
|
||||
format
|
||||
status
|
||||
coverImage { medium large color }
|
||||
bannerImage
|
||||
season
|
||||
seasonYear
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
studios {
|
||||
edges {
|
||||
isMain
|
||||
@@ -70,12 +74,28 @@ const MEDIA_FIELDS = `
|
||||
mediaRecommendation {
|
||||
id
|
||||
title { romaji }
|
||||
coverImage { medium }
|
||||
coverImage { medium large}
|
||||
format
|
||||
type
|
||||
}
|
||||
}
|
||||
}
|
||||
characters(perPage: 12, sort: [ROLE, RELEVANCE]) {
|
||||
edges {
|
||||
role
|
||||
node {
|
||||
id
|
||||
name { full native }
|
||||
image { medium large }
|
||||
}
|
||||
voiceActors {
|
||||
id
|
||||
name { full }
|
||||
language
|
||||
image { medium }
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export async function refreshTrendingAnime(): Promise<void> {
|
||||
@@ -140,7 +160,19 @@ async function fetchAniList(query: string, variables: any) {
|
||||
export async function getAnimeById(id: string | number): Promise<Anime | { error: string }> {
|
||||
const row = await queryOne("SELECT full_data FROM anime WHERE id = ?", [id]);
|
||||
|
||||
if (row) return JSON.parse(row.full_data);
|
||||
if (row) {
|
||||
const cached = JSON.parse(row.full_data);
|
||||
|
||||
if (cached?.characters?.edges?.length) {
|
||||
return cached;
|
||||
}
|
||||
|
||||
await queryOne(
|
||||
"DELETE FROM anime WHERE id = ?",
|
||||
[id]
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const query = `
|
||||
query ($id: Int) {
|
||||
|
||||
@@ -1,326 +0,0 @@
|
||||
let animeData = null;
|
||||
let extensionName = null;
|
||||
let animeId = null;
|
||||
let isLocal = false;
|
||||
|
||||
const episodePagination = Object.create(PaginationManager);
|
||||
episodePagination.init(12, renderEpisodes);
|
||||
|
||||
YouTubePlayerUtils.init('player');
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadAnime();
|
||||
setupDescriptionModal();
|
||||
setupEpisodeSearch();
|
||||
});
|
||||
|
||||
function markAsLocal() {
|
||||
isLocal = true;
|
||||
const pill = document.getElementById('local-pill');
|
||||
if (!pill) return;
|
||||
|
||||
pill.textContent = 'Local';
|
||||
pill.style.display = 'inline-flex';
|
||||
pill.style.background = 'rgba(34,197,94,.2)';
|
||||
pill.style.color = '#22c55e';
|
||||
pill.style.borderColor = 'rgba(34,197,94,.3)';
|
||||
}
|
||||
|
||||
async function checkLocalLibraryEntry() {
|
||||
try {
|
||||
const res = await fetch(`/api/library/anime/${animeId}`);
|
||||
if (!res.ok) return;
|
||||
|
||||
markAsLocal();
|
||||
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
|
||||
async function loadAnime() {
|
||||
try {
|
||||
|
||||
const urlData = URLUtils.parseEntityPath('anime');
|
||||
if (!urlData) {
|
||||
showError("Invalid URL");
|
||||
return;
|
||||
}
|
||||
|
||||
extensionName = urlData.extensionName;
|
||||
animeId = urlData.entityId;
|
||||
await checkLocalLibraryEntry();
|
||||
|
||||
const fetchUrl = extensionName
|
||||
? `/api/anime/${animeId}?source=${extensionName}`
|
||||
: `/api/anime/${animeId}?source=anilist`;
|
||||
|
||||
const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() });
|
||||
const data = await res.json();
|
||||
|
||||
if (data.error) {
|
||||
showError("Anime Not Found");
|
||||
return;
|
||||
}
|
||||
|
||||
animeData = data;
|
||||
animeData.entry_type = 'ANIME';
|
||||
const metadata = MediaMetadataUtils.formatAnimeData(data, !!extensionName);
|
||||
|
||||
updatePageTitle(metadata.title);
|
||||
updateMetadata(metadata);
|
||||
updateDescription(data.description || data.summary);
|
||||
updateCharacters(metadata.characters);
|
||||
updateExtensionPill();
|
||||
|
||||
setupWatchButton();
|
||||
|
||||
const hasTrailer = YouTubePlayerUtils.playTrailer(
|
||||
metadata.trailer,
|
||||
'player',
|
||||
metadata.banner
|
||||
);
|
||||
|
||||
setupEpisodes(metadata.episodes);
|
||||
|
||||
await setupAddToListButton();
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error loading anime:', err);
|
||||
showError("Error loading anime");
|
||||
}
|
||||
}
|
||||
|
||||
function updatePageTitle(title) {
|
||||
document.title = `${title} | WaifuBoard`;
|
||||
document.getElementById('title').innerText = title;
|
||||
}
|
||||
|
||||
function updateMetadata(metadata) {
|
||||
|
||||
if (metadata.poster) {
|
||||
document.getElementById('poster').src = metadata.poster;
|
||||
}
|
||||
|
||||
document.getElementById('score').innerText = `${metadata.score}% Score`;
|
||||
|
||||
document.getElementById('year').innerText = metadata.year;
|
||||
|
||||
document.getElementById('genres').innerText = metadata.genres;
|
||||
|
||||
document.getElementById('format').innerText = metadata.format;
|
||||
|
||||
document.getElementById('status').innerText = metadata.status;
|
||||
|
||||
document.getElementById('season').innerText = metadata.season;
|
||||
|
||||
document.getElementById('studio').innerText = metadata.studio;
|
||||
|
||||
document.getElementById('episodes').innerText = metadata.episodes;
|
||||
}
|
||||
|
||||
function updateDescription(rawDescription) {
|
||||
const desc = MediaMetadataUtils.truncateDescription(rawDescription, 4);
|
||||
|
||||
document.getElementById('description-preview').innerHTML = desc.short;
|
||||
document.getElementById('full-description').innerHTML = desc.full;
|
||||
|
||||
const readMoreBtn = document.getElementById('read-more-btn');
|
||||
if (desc.isTruncated) {
|
||||
readMoreBtn.style.display = 'inline-flex';
|
||||
} else {
|
||||
readMoreBtn.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function updateCharacters(characters) {
|
||||
const container = document.getElementById('char-list');
|
||||
container.innerHTML = '';
|
||||
|
||||
if (characters.length > 0) {
|
||||
characters.forEach(char => {
|
||||
container.innerHTML += `
|
||||
<div class="character-item">
|
||||
<div class="char-dot"></div> ${char.name}
|
||||
</div>`;
|
||||
});
|
||||
} else {
|
||||
container.innerHTML = `
|
||||
<div class="character-item" style="color: #666;">
|
||||
No character data available
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function updateExtensionPill() {
|
||||
const pill = document.getElementById('extension-pill');
|
||||
if (!pill) return;
|
||||
|
||||
if (extensionName) {
|
||||
pill.textContent = extensionName.charAt(0).toUpperCase() + extensionName.slice(1).toLowerCase();
|
||||
pill.style.display = 'inline-flex';
|
||||
} else {
|
||||
pill.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function setupWatchButton() {
|
||||
const watchBtn = document.getElementById('watch-btn');
|
||||
if (watchBtn) {
|
||||
watchBtn.onclick = () => {
|
||||
const source = isLocal ? 'local' : (extensionName || 'anilist');
|
||||
window.location.href = URLUtils.buildWatchUrl(animeId, num, source);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
async function setupAddToListButton() {
|
||||
const btn = document.getElementById('add-to-list-btn');
|
||||
if (!btn || !animeData) return;
|
||||
|
||||
ListModalManager.currentData = animeData;
|
||||
const entryType = ListModalManager.getEntryType(animeData);
|
||||
|
||||
await ListModalManager.checkIfInList(animeId, extensionName || 'anilist', entryType);
|
||||
|
||||
const tempBtn = document.querySelector('.hero-buttons .btn-blur');
|
||||
if (tempBtn) {
|
||||
ListModalManager.updateButton('.hero-buttons .btn-blur');
|
||||
} else {
|
||||
|
||||
updateCustomAddButton();
|
||||
}
|
||||
|
||||
btn.onclick = () => ListModalManager.open(animeData, extensionName || 'anilist');
|
||||
}
|
||||
|
||||
function updateCustomAddButton() {
|
||||
const btn = document.getElementById('add-to-list-btn');
|
||||
if (!btn) return;
|
||||
|
||||
if (ListModalManager.isInList) {
|
||||
btn.innerHTML = `
|
||||
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
|
||||
</svg>
|
||||
In Your List
|
||||
`;
|
||||
btn.style.background = 'rgba(34, 197, 94, 0.2)';
|
||||
btn.style.color = '#22c55e';
|
||||
btn.style.borderColor = 'rgba(34, 197, 94, 0.3)';
|
||||
} else {
|
||||
btn.innerHTML = '+ Add to List';
|
||||
btn.style.background = null;
|
||||
btn.style.color = null;
|
||||
btn.style.borderColor = null;
|
||||
}
|
||||
}
|
||||
|
||||
function setupEpisodes(totalEpisodes) {
|
||||
|
||||
const limitedTotal = Math.min(Math.max(totalEpisodes, 1), 5000);
|
||||
|
||||
episodePagination.setTotalItems(limitedTotal);
|
||||
renderEpisodes();
|
||||
}
|
||||
|
||||
function renderEpisodes() {
|
||||
const grid = document.getElementById('episodes-grid');
|
||||
if (!grid) return;
|
||||
|
||||
grid.innerHTML = '';
|
||||
|
||||
const range = episodePagination.getPageRange();
|
||||
const start = range.start + 1;
|
||||
|
||||
const end = range.end;
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
createEpisodeButton(i, grid);
|
||||
}
|
||||
|
||||
episodePagination.renderControls(
|
||||
'pagination-controls',
|
||||
'page-info',
|
||||
'prev-page',
|
||||
'next-page'
|
||||
);
|
||||
}
|
||||
|
||||
function createEpisodeButton(num, container) {
|
||||
const btn = document.createElement('div');
|
||||
btn.className = 'episode-btn';
|
||||
btn.innerText = `Ep ${num}`;
|
||||
btn.onclick = () => {
|
||||
const source = isLocal ? 'local' : (extensionName || 'anilist');
|
||||
window.location.href = URLUtils.buildWatchUrl(animeId, num, source);
|
||||
};
|
||||
container.appendChild(btn);
|
||||
}
|
||||
|
||||
function setupDescriptionModal() {
|
||||
const modal = document.getElementById('desc-modal');
|
||||
if (!modal) return;
|
||||
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target.id === 'desc-modal') {
|
||||
closeDescriptionModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openDescriptionModal() {
|
||||
document.getElementById('desc-modal').classList.add('active');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeDescriptionModal() {
|
||||
document.getElementById('desc-modal').classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
function setupEpisodeSearch() {
|
||||
const searchInput = document.getElementById('ep-search');
|
||||
if (!searchInput) return;
|
||||
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
const val = parseInt(e.target.value);
|
||||
const grid = document.getElementById('episodes-grid');
|
||||
const totalEpisodes = episodePagination.totalItems;
|
||||
|
||||
if (val > 0 && val <= totalEpisodes) {
|
||||
grid.innerHTML = '';
|
||||
createEpisodeButton(val, grid);
|
||||
document.getElementById('pagination-controls').style.display = 'none';
|
||||
} else if (!e.target.value) {
|
||||
renderEpisodes();
|
||||
} else {
|
||||
grid.innerHTML = '<div style="color:#666; width:100%; text-align:center;">Episode not found</div>';
|
||||
document.getElementById('pagination-controls').style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
document.getElementById('title').innerText = message;
|
||||
}
|
||||
|
||||
function saveToList() {
|
||||
if (!animeId) return;
|
||||
ListModalManager.save(animeId, extensionName || 'anilist');
|
||||
}
|
||||
|
||||
function deleteFromList() {
|
||||
if (!animeId) return;
|
||||
ListModalManager.delete(animeId, extensionName || 'anilist');
|
||||
}
|
||||
|
||||
function closeAddToListModal() {
|
||||
ListModalManager.close();
|
||||
}
|
||||
|
||||
window.openDescriptionModal = openDescriptionModal;
|
||||
window.closeDescriptionModal = closeDescriptionModal;
|
||||
window.changePage = (delta) => {
|
||||
if (delta > 0) episodePagination.nextPage();
|
||||
else episodePagination.prevPage();
|
||||
};
|
||||
408
docker/src/scripts/anime/entry.js
Normal file
408
docker/src/scripts/anime/entry.js
Normal file
@@ -0,0 +1,408 @@
|
||||
let animeData = null;
|
||||
let extensionName = null;
|
||||
|
||||
let animeId = null;
|
||||
let isLocal = false;
|
||||
|
||||
const episodePagination = Object.create(PaginationManager);
|
||||
episodePagination.init(50, renderEpisodes);
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadAnimeData();
|
||||
setupDescriptionModal();
|
||||
setupEpisodeSearch();
|
||||
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const initialEp = urlParams.get('episode');
|
||||
|
||||
if (initialEp) {
|
||||
setTimeout(() => {
|
||||
if (animeData) {
|
||||
|
||||
const source = isLocal ? 'local' : (extensionName || 'anilist');
|
||||
|
||||
if (typeof AnimePlayer !== 'undefined') {
|
||||
AnimePlayer.init(animeId, source, isLocal, animeData);
|
||||
AnimePlayer.playEpisode(parseInt(initialEp));
|
||||
}
|
||||
}
|
||||
}, 800);
|
||||
}
|
||||
});
|
||||
|
||||
async function loadAnimeData() {
|
||||
try {
|
||||
|
||||
const pathParts = window.location.pathname.split('/');
|
||||
|
||||
const cleanParts = pathParts.filter(p => p.length > 0);
|
||||
|
||||
if (cleanParts.length >= 3 && cleanParts[0] === 'anime') {
|
||||
|
||||
extensionName = cleanParts[1];
|
||||
animeId = cleanParts[2];
|
||||
} else if (cleanParts.length === 2 && cleanParts[0] === 'anime') {
|
||||
|
||||
extensionName = null;
|
||||
|
||||
animeId = cleanParts[1];
|
||||
} else {
|
||||
showError("Invalid URL Format");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const localRes = await fetch(`/api/library/anime/${animeId}`);
|
||||
if (localRes.ok) isLocal = true;
|
||||
} catch {}
|
||||
|
||||
const fetchUrl = extensionName
|
||||
? `/api/anime/${animeId}?source=${extensionName}`
|
||||
: `/api/anime/${animeId}?source=anilist`;
|
||||
|
||||
const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() });
|
||||
const data = await res.json();
|
||||
|
||||
if (data.error) {
|
||||
showError("Anime Not Found");
|
||||
return;
|
||||
}
|
||||
|
||||
animeData = data;
|
||||
animeData.entry_type = 'ANIME';
|
||||
|
||||
const metadata = MediaMetadataUtils.formatAnimeData(data, !!extensionName);
|
||||
|
||||
document.title = `${metadata.title} | WaifuBoard`;
|
||||
document.getElementById('title').innerText = metadata.title;
|
||||
if (metadata.poster) document.getElementById('poster').src = metadata.poster;
|
||||
|
||||
document.getElementById('score').innerText = `${metadata.score}% Score`;
|
||||
document.getElementById('year').innerText = metadata.year;
|
||||
document.getElementById('genres').innerText = metadata.genres.split(',').join(' • ');
|
||||
document.getElementById('format').innerText = metadata.format;
|
||||
document.getElementById('status').innerText = metadata.status;
|
||||
document.getElementById('season').innerText = metadata.season;
|
||||
document.getElementById('studio').innerText = metadata.studio;
|
||||
document.getElementById('episodes').innerText = `${metadata.episodes} Ep`;
|
||||
|
||||
updateLocalPill();
|
||||
updateDescription(data.description || data.summary);
|
||||
updateRelations(data.relations?.edges);
|
||||
updateCharacters(metadata.characters);
|
||||
updateRecommendations(data.recommendations?.nodes);
|
||||
|
||||
const source = isLocal ? 'local' : (extensionName || 'anilist');
|
||||
|
||||
if (typeof AnimePlayer !== 'undefined') {
|
||||
AnimePlayer.init(animeId, source, isLocal, animeData);
|
||||
}
|
||||
|
||||
YouTubePlayerUtils.init('trailer-player');
|
||||
YouTubePlayerUtils.playTrailer(metadata.trailer, 'trailer-player', metadata.banner);
|
||||
|
||||
const watchBtn = document.getElementById('watch-btn');
|
||||
if (watchBtn) {
|
||||
watchBtn.onclick = () => {
|
||||
if (typeof AnimePlayer !== 'undefined') AnimePlayer.playEpisode(1);
|
||||
};
|
||||
}
|
||||
|
||||
const total = metadata.episodes || 12;
|
||||
setupEpisodes(total);
|
||||
|
||||
setupAddToListButton();
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error loading anime details:', err);
|
||||
showError("Error loading anime");
|
||||
}
|
||||
}
|
||||
|
||||
function updateLocalPill() {
|
||||
if (isLocal) {
|
||||
const pill = document.getElementById('local-pill');
|
||||
if(pill) pill.style.display = 'inline-flex';
|
||||
}
|
||||
if (extensionName) {
|
||||
const pill = document.getElementById('extension-pill');
|
||||
if(pill) {
|
||||
pill.innerText = extensionName;
|
||||
pill.style.display = 'inline-flex';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateDescription(rawDescription) {
|
||||
const desc = MediaMetadataUtils.truncateDescription(rawDescription, 3);
|
||||
const previewEl = document.getElementById('description-preview');
|
||||
const fullEl = document.getElementById('full-description');
|
||||
|
||||
if (previewEl) {
|
||||
previewEl.innerHTML = desc.short +
|
||||
(desc.isTruncated ? ' <span onclick="openDescriptionModal()" style="color:white; cursor:pointer; font-weight:700; margin-left:5px;">Read more</span>' : '');
|
||||
}
|
||||
if (fullEl) fullEl.innerHTML = desc.full;
|
||||
}
|
||||
|
||||
function setupDescriptionModal() {
|
||||
const modal = document.getElementById('desc-modal');
|
||||
if (!modal) return;
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target.id === 'desc-modal') {
|
||||
closeDescriptionModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openDescriptionModal() {
|
||||
const modal = document.getElementById('desc-modal');
|
||||
if(modal) modal.classList.add('active');
|
||||
}
|
||||
|
||||
function closeDescriptionModal() {
|
||||
const modal = document.getElementById('desc-modal');
|
||||
if(modal) modal.classList.remove('active');
|
||||
}
|
||||
|
||||
function setupEpisodes(totalEpisodes) {
|
||||
const limitedTotal = Math.min(Math.max(totalEpisodes, 1), 5000);
|
||||
episodePagination.setTotalItems(limitedTotal);
|
||||
renderEpisodes();
|
||||
}
|
||||
|
||||
function renderEpisodes() {
|
||||
const grid = document.getElementById('episodes-grid');
|
||||
if (!grid) return;
|
||||
grid.innerHTML = '';
|
||||
|
||||
const range = episodePagination.getPageRange();
|
||||
const currentEp = (typeof AnimePlayer !== 'undefined') ? AnimePlayer.getCurrentEpisode() : 0;
|
||||
|
||||
for (let i = range.start + 1; i <= range.end; i++) {
|
||||
const btn = document.createElement('div');
|
||||
btn.className = 'episode-btn';
|
||||
if (currentEp === i) btn.classList.add('active-playing');
|
||||
|
||||
btn.innerText = i;
|
||||
|
||||
btn.onclick = () => {
|
||||
if (typeof AnimePlayer !== 'undefined') {
|
||||
AnimePlayer.playEpisode(i);
|
||||
renderEpisodes();
|
||||
}
|
||||
};
|
||||
grid.appendChild(btn);
|
||||
}
|
||||
|
||||
const totalItems = episodePagination.totalItems || 0;
|
||||
const itemsPerPage = episodePagination.itemsPerPage || 50;
|
||||
const safeTotalPages = Math.ceil(totalItems / itemsPerPage) || 1;
|
||||
|
||||
const info = document.getElementById('page-info');
|
||||
if(info) info.innerText = `Page ${episodePagination.currentPage} of ${safeTotalPages}`;
|
||||
|
||||
const prevBtn = document.getElementById('prev-page');
|
||||
const nextBtn = document.getElementById('next-page');
|
||||
|
||||
if(prevBtn) {
|
||||
prevBtn.disabled = episodePagination.currentPage === 1;
|
||||
prevBtn.onclick = () => { episodePagination.prevPage(); };
|
||||
}
|
||||
|
||||
if(nextBtn) {
|
||||
|
||||
nextBtn.disabled = episodePagination.currentPage >= safeTotalPages;
|
||||
nextBtn.onclick = () => { episodePagination.nextPage(); };
|
||||
}
|
||||
}
|
||||
|
||||
function setupEpisodeSearch() {
|
||||
const searchInput = document.getElementById('ep-search');
|
||||
if (!searchInput) return;
|
||||
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
const val = parseInt(e.target.value);
|
||||
const grid = document.getElementById('episodes-grid');
|
||||
const controls = document.getElementById('pagination-controls');
|
||||
|
||||
if (val > 0) {
|
||||
grid.innerHTML = '';
|
||||
const btn = document.createElement('div');
|
||||
btn.className = 'episode-btn';
|
||||
btn.innerText = `${val}`;
|
||||
btn.onclick = () => { if (typeof AnimePlayer !== 'undefined') AnimePlayer.playEpisode(val); };
|
||||
grid.appendChild(btn);
|
||||
if(controls) controls.style.display = 'none';
|
||||
} else if (!e.target.value) {
|
||||
if(controls) controls.style.display = 'flex';
|
||||
renderEpisodes();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateCharacters(characters) {
|
||||
const container = document.getElementById('char-list');
|
||||
if (!container) return;
|
||||
container.innerHTML = '';
|
||||
if (!characters || characters.length === 0) return;
|
||||
|
||||
characters.forEach((char, index) => {
|
||||
const img = char.node?.image?.large || char.image;
|
||||
const name = char.node?.name?.full || char.name;
|
||||
const role = char.role || 'Supporting';
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = `character-item ${index >= 12 ? 'hidden-char' : ''}`;
|
||||
card.style.display = index >= 12 ? 'none' : 'flex';
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="char-avatar"><img src="${img}" loading="lazy"></div>
|
||||
<div class="char-info"><div class="char-name">${name}</div><div class="char-role">${role}</div></div>
|
||||
`;
|
||||
container.appendChild(card);
|
||||
});
|
||||
|
||||
const showMoreBtn = document.getElementById('show-more-chars');
|
||||
if (showMoreBtn) {
|
||||
if (characters.length > 12) {
|
||||
showMoreBtn.style.display = 'block';
|
||||
showMoreBtn.onclick = () => {
|
||||
document.querySelectorAll('.hidden-char').forEach(el => el.style.display = 'flex');
|
||||
showMoreBtn.style.display = 'none';
|
||||
};
|
||||
} else {
|
||||
showMoreBtn.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateRelations(relations) {
|
||||
const container = document.getElementById('relations-grid');
|
||||
const section = document.getElementById('relations-section');
|
||||
|
||||
if (!container || !relations || relations.length === 0) {
|
||||
if (section) section.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
section.style.display = 'block';
|
||||
container.innerHTML = '';
|
||||
|
||||
const priorityMap = {
|
||||
'ADAPTATION': 1,
|
||||
'PREQUEL': 2,
|
||||
'SEQUEL': 3,
|
||||
'PARENT': 4,
|
||||
'SIDE_STORY': 5,
|
||||
'SPIN_OFF': 6,
|
||||
'ALTERNATIVE': 7,
|
||||
'CHARACTER': 8,
|
||||
'OTHER': 99
|
||||
};
|
||||
|
||||
relations.sort((a, b) => {
|
||||
const pA = priorityMap[a.relationType] || 50;
|
||||
const pB = priorityMap[b.relationType] || 50;
|
||||
return pA - pB;
|
||||
});
|
||||
|
||||
relations.forEach(rel => {
|
||||
const media = rel.node;
|
||||
if (!media) return;
|
||||
|
||||
const title = media.title?.romaji || media.title?.english || 'Unknown';
|
||||
const cover = media.coverImage?.large || media.coverImage?.medium || '';
|
||||
|
||||
const typeDisplay = rel.relationType ? rel.relationType.replace(/_/g, ' ') : 'RELATION';
|
||||
const rawType = rel.relationType;
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.className = 'relation-card-horizontal';
|
||||
|
||||
let targetUrl = null;
|
||||
|
||||
if (rawType === 'ADAPTATION') {
|
||||
targetUrl = `/book/${media.id}`;
|
||||
|
||||
} else if (media.type === 'ANIME' && rawType !== 'OTHER') {
|
||||
targetUrl = `/anime/${media.id}`;
|
||||
|
||||
}
|
||||
|
||||
if (targetUrl) {
|
||||
el.onclick = () => { window.location.href = targetUrl; };
|
||||
} else {
|
||||
el.classList.add('no-link');
|
||||
|
||||
el.onclick = null;
|
||||
}
|
||||
|
||||
el.innerHTML = `
|
||||
<img src="${cover}" class="rel-img" alt="${title}" onerror="this.src='/public/assets/placeholder.svg'">
|
||||
<div class="rel-info">
|
||||
<span class="rel-type">${typeDisplay}</span>
|
||||
<span class="rel-title">${title}</span>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(el);
|
||||
});
|
||||
}
|
||||
|
||||
function updateRecommendations(recommendations) {
|
||||
const container = document.getElementById('recommendations-grid');
|
||||
if (!container || !recommendations) return;
|
||||
container.innerHTML = '';
|
||||
|
||||
recommendations.forEach(rec => {
|
||||
const media = rec.mediaRecommendation;
|
||||
if (!media) return;
|
||||
|
||||
const title = media.title?.romaji || 'Unknown';
|
||||
const cover = media.coverImage?.large || media.coverImage?.medium || '';
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.className = 'card';
|
||||
|
||||
el.onclick = () => { window.location.href = `/anime/${media.id}`; };
|
||||
|
||||
el.innerHTML = `
|
||||
<div class="card-img-wrap"><img src="${cover}" loading="lazy" onerror="this.src='/public/assets/no-cover.jpg'"></div>
|
||||
<div class="card-content"><h3>${title}</h3></div>
|
||||
`;
|
||||
container.appendChild(el);
|
||||
});
|
||||
}
|
||||
|
||||
async function setupAddToListButton() {
|
||||
const btn = document.getElementById('add-to-list-btn');
|
||||
if (!btn || !animeData) return;
|
||||
|
||||
ListModalManager.currentData = animeData;
|
||||
const entryType = 'ANIME';
|
||||
await ListModalManager.checkIfInList(animeId, extensionName || 'anilist', entryType);
|
||||
updateCustomAddButton();
|
||||
btn.onclick = () => ListModalManager.open(animeData, extensionName || 'anilist');
|
||||
}
|
||||
|
||||
function updateCustomAddButton() {
|
||||
const btn = document.getElementById('add-to-list-btn');
|
||||
if (btn && ListModalManager.isInList) {
|
||||
btn.innerHTML = `✓ In Your List`;
|
||||
btn.style.background = 'rgba(34, 197, 94, 0.2)';
|
||||
btn.style.borderColor = '#22c55e';
|
||||
btn.style.color = '#22c55e';
|
||||
}
|
||||
}
|
||||
|
||||
function showError(msg) {
|
||||
const el = document.getElementById('title');
|
||||
if(el) el.innerText = msg;
|
||||
}
|
||||
|
||||
window.openDescriptionModal = openDescriptionModal;
|
||||
window.closeDescriptionModal = closeDescriptionModal;
|
||||
window.scrollRecommendations = (dir) => {
|
||||
const el = document.getElementById('recommendations-grid');
|
||||
if(el) el.scrollBy({ left: 240 * 3 * dir, behavior: 'smooth' });
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -52,10 +52,9 @@ const ContinueWatchingManager = {
|
||||
|
||||
if (entryType === 'ANIME') {
|
||||
url = item.source === 'anilist'
|
||||
? `/watch/${item.entry_id}/${nextProgress}`
|
||||
: `/watch/${item.entry_id}/${nextProgress}?${item.source}`;
|
||||
? `/anime/${item.entry_id}?episode=${nextProgress}`
|
||||
: `/anime/${item.entry_id}/${item.source}/?episode=${nextProgress}`;
|
||||
} else {
|
||||
|
||||
url = item.source === 'anilist'
|
||||
? `/book/${item.entry_id}?chapter=${nextProgress}`
|
||||
: `/read/${item.source}/${nextProgress}/${item.entry_id}?source=${item.source}`;
|
||||
|
||||
@@ -112,12 +112,6 @@ async function viewsRoutes(fastify: FastifyInstance) {
|
||||
reply.type('text/html').send(html);
|
||||
});
|
||||
|
||||
fastify.get('/watch/:id/:episode', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'watch.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
reply.type('text/html').send(html);
|
||||
});
|
||||
|
||||
fastify.get('/book/:id', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
|
||||
@@ -1,223 +1,168 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
rel="icon"
|
||||
href="/public/assets/waifuboards.ico"
|
||||
type="image/x-icon"
|
||||
/>
|
||||
<title>WaifuBoard</title>
|
||||
<link rel="stylesheet" href="/views/css/globals.css" />
|
||||
<link rel="stylesheet" href="/views/css/components/anilist-modal.css" />
|
||||
<link rel="stylesheet" href="/views/css/components/hero.css" />
|
||||
<link rel="stylesheet" href="/views/css/anime/anime.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="/views/css/components/updateNotifier.css"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="modal-overlay" id="desc-modal">
|
||||
<div class="modal-content">
|
||||
<button class="modal-close" onclick="closeModal()">✕</button>
|
||||
<h2 class="modal-title">Synopsis</h2>
|
||||
<div class="modal-text" id="full-description"></div>
|
||||
</div>
|
||||
</div>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon" />
|
||||
<title>WaifuBoard</title>
|
||||
|
||||
<a href="/anime" class="back-btn">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
Back to Home
|
||||
</a>
|
||||
<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>
|
||||
|
||||
<div class="hero-wrapper">
|
||||
<div class="video-background">
|
||||
<div id="player"></div>
|
||||
</div>
|
||||
<div class="hero-overlay"></div>
|
||||
</div>
|
||||
<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" />
|
||||
</head>
|
||||
<body>
|
||||
<a href="/anime" class="back-btn">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
Back
|
||||
</a>
|
||||
|
||||
<div class="content-container">
|
||||
<aside class="sidebar">
|
||||
<div class="poster-card">
|
||||
<img id="poster" src="" alt="" />
|
||||
</div>
|
||||
<div class="modal-overlay" id="desc-modal">
|
||||
<div class="modal-content">
|
||||
<button class="modal-close" onclick="closeDescriptionModal()">✕</button>
|
||||
<h2 class="modal-title">Synopsis</h2>
|
||||
<div class="modal-text" id="full-description"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<h4>Format</h4>
|
||||
<span id="format">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Episodes</h4>
|
||||
<span id="episodes">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Status</h4>
|
||||
<span id="status">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Season</h4>
|
||||
<span id="season">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Studio</h4>
|
||||
<span id="studio">--</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-media-wrapper" id="top-media-wrapper">
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<h4>Main Characters</h4>
|
||||
<div class="character-list" id="char-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<div class="hero-wrapper" id="hero-wrapper">
|
||||
<div class="video-background"><div id="trailer-player"></div></div>
|
||||
<div class="hero-overlay"></div>
|
||||
</div>
|
||||
|
||||
<main class="main-content">
|
||||
<div class="anime-header">
|
||||
<h1 class="anime-title" id="title">Loading...</h1>
|
||||
<div class="player-wrapper" id="player-wrapper" style="display: none;">
|
||||
<div class="player-container">
|
||||
<button id="prev-ep-btn" class="side-nav-btn left" title="Previous Episode">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
|
||||
</button>
|
||||
|
||||
<div class="meta-row">
|
||||
<div
|
||||
class="pill extension-pill"
|
||||
id="extension-pill"
|
||||
style="display: none; background: #8b5cf6"
|
||||
></div>
|
||||
<div class="pill" id="local-pill" style="display: none; background: #8b5cf6;"></div>
|
||||
<div class="pill score" id="score">--% Score</div>
|
||||
<div class="pill" id="year">----</div>
|
||||
<div class="pill" id="genres">Action</div>
|
||||
</div>
|
||||
<button id="next-ep-btn" class="side-nav-btn right" title="Next Episode">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
|
||||
</button>
|
||||
|
||||
<div class="action-row">
|
||||
<button class="btn-watch" id="watch-btn">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
Start Watching
|
||||
</button>
|
||||
<button
|
||||
class="btn-secondary"
|
||||
id="add-to-list-btn"
|
||||
onclick="openAddToListModal()"
|
||||
>
|
||||
+ Add to List
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="description-box">
|
||||
<div id="description-preview"></div>
|
||||
<button
|
||||
id="read-more-btn"
|
||||
class="read-more-btn"
|
||||
style="display: none"
|
||||
onclick="openModal()"
|
||||
>
|
||||
Read More
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
<div class="player-header">
|
||||
<div class="header-left">
|
||||
<button class="btn-icon-glass" id="close-player-btn" title="Close Player">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="episodes-section">
|
||||
<div class="episodes-header-row">
|
||||
<div
|
||||
class="section-title"
|
||||
style="margin: 0; border: none; padding: 0"
|
||||
>
|
||||
<h2
|
||||
style="
|
||||
font-size: 1.8rem;
|
||||
border-left: 4px solid #8b5cf6;
|
||||
padding-left: 1rem;
|
||||
"
|
||||
>
|
||||
Episodes
|
||||
</h2>
|
||||
</div>
|
||||
<div class="episode-search-wrapper">
|
||||
<input
|
||||
type="number"
|
||||
id="ep-search"
|
||||
class="episode-search-input"
|
||||
placeholder="Jump to Ep #"
|
||||
min="1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="episodes-grid" id="episodes-grid"></div>
|
||||
|
||||
<div class="pagination-controls" id="pagination-controls">
|
||||
<button
|
||||
class="page-btn"
|
||||
id="prev-page"
|
||||
onclick="changePage(-1)"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span class="page-info" id="page-info"
|
||||
>Page 1 of 1</span
|
||||
>
|
||||
<button
|
||||
class="page-btn"
|
||||
id="next-page"
|
||||
onclick="changePage(1)"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
<div class="episode-info">
|
||||
<span class="ep-label">Watching</span>
|
||||
<span id="player-episode-title" class="ep-title">Episode 1</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="header-right">
|
||||
<div class="settings-group">
|
||||
<div class="sd-toggle" id="sd-toggle" data-state="sub">
|
||||
<div class="sd-bg"></div>
|
||||
<div class="sd-option active" id="opt-sub">Sub</div>
|
||||
<div class="sd-option" id="opt-dub">Dub</div>
|
||||
</div>
|
||||
|
||||
<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 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 class="content-container" id="main-content">
|
||||
<div class="anime-header">
|
||||
<h1 class="anime-title" id="title">Loading...</h1>
|
||||
<div class="hero-meta-info">
|
||||
<span id="local-pill" class="pill-local" style="display:none;">Local</span>
|
||||
<span id="extension-pill" class="pill-local" style="background:#8b5cf6; display:none;">Ext</span>
|
||||
<span id="score">--% Score</span> • <span id="year">----</span> • <span id="format">--</span> • <span id="episodes">-- Ep</span>
|
||||
</div>
|
||||
<div class="hero-description-mini" id="description-preview"></div>
|
||||
<div class="hero-tags" id="genres"></div>
|
||||
|
||||
<script src="/src/scripts/updateNotifier.js"></script>
|
||||
<script src="/src/scripts/auth-guard.js"></script>
|
||||
<div class="action-row">
|
||||
<button class="btn-watch" id="watch-btn">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="black"><path d="M8 5v14l11-7z"/></svg>
|
||||
Start Watching
|
||||
</button>
|
||||
<button class="btn-add-list" id="add-to-list-btn">+ Add to List</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
||||
<script src="/src/scripts/utils/notification-utils.js"></script>
|
||||
<script src="/src/scripts/utils/url-utils.js"></script>
|
||||
<script src="/src/scripts/utils/pagination-manager.js"></script>
|
||||
<script src="/src/scripts/utils/media-metadata-utils.js"></script>
|
||||
<script src="/src/scripts/utils/youtube-player-utils.js"></script>
|
||||
<script src="/src/scripts/utils/list-modal-manager.js"></script>
|
||||
<script src="/src/scripts/anime/anime.js"></script>
|
||||
</body>
|
||||
<div class="main-layout">
|
||||
<aside class="poster-section">
|
||||
<div class="poster-card"><img id="poster" src="" alt="Poster"></div>
|
||||
<div class="metadata-sidebar">
|
||||
<div class="meta-item-side"><span>Status</span><p id="status">--</p></div>
|
||||
<div class="meta-item-side"><span>Season</span><p id="season">--</p></div>
|
||||
<div class="meta-item-side"><span>Studio</span><p id="studio">--</p></div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="content-column">
|
||||
|
||||
<section class="episodes-section">
|
||||
<div class="episodes-header-row">
|
||||
<h2>Episodes</h2>
|
||||
<input type="number" id="ep-search" class="episode-search-input" placeholder="Jump to...">
|
||||
</div>
|
||||
<div id="episodes-grid" class="episodes-grid"></div>
|
||||
|
||||
<div class="pagination-controls" id="pagination-controls">
|
||||
<button class="page-btn" id="prev-page">Previous</button>
|
||||
<span class="page-info" id="page-info">Page 1 of 1</span>
|
||||
<button class="page-btn" id="next-page">Next</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="relations-section" style="display:none; margin-top: 3rem;">
|
||||
<h3 class="subsection-title">Relations</h3>
|
||||
<div class="relations-horizontal" id="relations-grid"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="content-section">
|
||||
<h2 class="subsection-title">Characters</h2>
|
||||
<div class="characters-grid" id="char-list"></div>
|
||||
<button id="show-more-chars" class="btn-show-more" style="display: none;">Show Full Cast</button>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2 class="subsection-title">Recommended</h2>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollRecommendations(-1)">‹</button>
|
||||
<div class="carousel" id="recommendations-grid"></div>
|
||||
<button class="scroll-btn right" onclick="scrollRecommendations(1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
||||
<script src="/src/scripts/utils/url-utils.js"></script>
|
||||
<script src="/src/scripts/utils/pagination-manager.js"></script>
|
||||
<script src="/src/scripts/utils/media-metadata-utils.js"></script>
|
||||
<script src="/src/scripts/utils/youtube-player-utils.js"></script>
|
||||
<script src="/src/scripts/utils/list-modal-manager.js"></script>
|
||||
|
||||
<script src="/src/scripts/anime/player.js"></script>
|
||||
<script src="/src/scripts/anime/entry.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,184 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WaifuBoard Watch</title>
|
||||
<link rel="stylesheet" href="/views/css/globals.css">
|
||||
<link rel="stylesheet" href="/views/css/anime/watch.css">
|
||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
|
||||
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="top-bar">
|
||||
<a href="#" id="back-link" class="back-btn">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
|
||||
<path d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
<span>Back to Series</span>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<div class="ui-scale-wrapper">
|
||||
<main class="watch-container">
|
||||
|
||||
<section class="anime-details">
|
||||
<div class="details-container">
|
||||
<div class="details-cover">
|
||||
<img id="detail-cover-image" src="" alt="Anime Cover" class="cover-image">
|
||||
</div>
|
||||
<div class="details-content">
|
||||
<h1 id="anime-title-details">Loading...</h1>
|
||||
<div class="details-meta">
|
||||
<span id="detail-format" class="meta-badge">--</span>
|
||||
<span id="detail-season" class="meta-badge">--</span>
|
||||
<span id="detail-score" class="meta-badge meta-score">--</span>
|
||||
</div>
|
||||
<br>
|
||||
<p id="detail-description" class="details-description">Loading description...</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="player-section">
|
||||
|
||||
<div class="player-toolbar">
|
||||
<div class="control-group">
|
||||
<div class="sd-toggle" id="sd-toggle" data-state="sub" onclick="toggleAudioMode()">
|
||||
<div class="sd-bg"></div>
|
||||
<div class="sd-option active" id="opt-sub">Sub</div>
|
||||
<div class="sd-option" id="opt-dub">Dub</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<select id="server-select" class="source-select" onchange="loadStream()" style="display:none;">
|
||||
<option value="">Server...</option>
|
||||
</select>
|
||||
<select id="extension-select" class="source-select" onchange="onExtensionChange()">
|
||||
<option value="" disabled selected>Source...</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-container">
|
||||
<video id="player" controls crossorigin playsinline></video>
|
||||
<div id="loading-overlay" class="loading-overlay">
|
||||
<div class="spinner"></div>
|
||||
<p id="loading-text">Select a source...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="episode-controls">
|
||||
<div class="episode-info">
|
||||
<h1 id="anime-title-details2">Loading...</h1>
|
||||
<p id="episode-label">Episode --</p>
|
||||
</div>
|
||||
<div class="navigation-buttons">
|
||||
<button class="nav-btn prev-btn" id="prev-btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg><span>Previous</span></button>
|
||||
<button class="nav-btn next-btn" id="next-btn"><span>Next</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 5l7 7-7 7"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="episode-carousel-compact">
|
||||
<div class="carousel-header">
|
||||
<h2>Episodes</h2>
|
||||
<div class="carousel-nav">
|
||||
<button class="carousel-arrow-mini" id="ep-prev-mini"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M15 18l-6-6 6-6"/></svg></button>
|
||||
<button class="carousel-arrow-mini" id="ep-next-mini"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M9 6l6 6-6 6"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="episode-carousel" class="episode-carousel-compact-list">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="../../src/scripts/anime/player.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const carousel = document.getElementById('episode-carousel');
|
||||
if (!carousel) return;
|
||||
|
||||
const prevBtn = document.getElementById('ep-prev-mini');
|
||||
const nextBtn = document.getElementById('ep-next-mini');
|
||||
|
||||
const scrollAmount = 150;
|
||||
|
||||
prevBtn?.addEventListener('click', () => {
|
||||
carousel.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
|
||||
});
|
||||
|
||||
nextBtn?.addEventListener('click', () => {
|
||||
carousel.scrollBy({ left: scrollAmount, behavior: 'smooth' });
|
||||
});
|
||||
|
||||
const updateArrows = () => {
|
||||
if (!prevBtn || !nextBtn) return;
|
||||
|
||||
prevBtn.style.opacity = carousel.scrollLeft <= 10 ? '0.3' : '1';
|
||||
prevBtn.style.pointerEvents = carousel.scrollLeft <= 10 ? 'none' : 'auto';
|
||||
|
||||
const atEnd = carousel.scrollLeft + carousel.clientWidth >= carousel.scrollWidth - 10;
|
||||
nextBtn.style.opacity = atEnd ? '0.3' : '1';
|
||||
nextBtn.style.pointerEvents = atEnd ? 'none' : 'auto';
|
||||
};
|
||||
|
||||
carousel.addEventListener('scroll', updateArrows);
|
||||
window.addEventListener('resize', updateArrows);
|
||||
|
||||
const observer = new MutationObserver((mutations, obs) => {
|
||||
updateArrows();
|
||||
obs.disconnect();
|
||||
|
||||
});
|
||||
observer.observe(carousel, { childList: true });
|
||||
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const expandBtn = document.getElementById('expand-characters-btn');
|
||||
const characterList = document.getElementById('characters-list');
|
||||
const btnText = expandBtn?.querySelector('span');
|
||||
|
||||
if (!expandBtn || !characterList) return;
|
||||
|
||||
expandBtn.addEventListener('click', () => {
|
||||
const isExpanded = expandBtn.getAttribute('data-expanded') === 'true';
|
||||
|
||||
if (isExpanded) {
|
||||
|
||||
characterList.classList.remove('expanded');
|
||||
expandBtn.setAttribute('data-expanded', 'false');
|
||||
if (btnText) btnText.innerText = 'Show All';
|
||||
} else {
|
||||
|
||||
characterList.classList.add('expanded');
|
||||
expandBtn.setAttribute('data-expanded', 'true');
|
||||
if (btnText) btnText.innerText = 'Show Less';
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="updateToast" class="hidden">
|
||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
||||
|
||||
<a
|
||||
id="downloadButton"
|
||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
||||
target="_blank"
|
||||
>
|
||||
Click To Download
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script src="/src/scripts/updateNotifier.js"></script>
|
||||
<script src="/src/scripts/auth-guard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,297 +1,274 @@
|
||||
:root {
|
||||
--bg-card: rgba(255, 255, 255, 0.04);
|
||||
--border-subtle: rgba(255, 255, 255, 0.1);
|
||||
--color-primary: #8b5cf6;
|
||||
--player-height: 85vh;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #0b0b0b;
|
||||
color: white;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
.top-media-wrapper {
|
||||
position: relative;
|
||||
|
||||
width: 100vw;
|
||||
left: 0;
|
||||
background: #000;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.hero-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.video-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.video-background iframe,
|
||||
.video-background #trailer-player {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(1.35);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
opacity: 0.6;
|
||||
|
||||
width: 100vw;
|
||||
height: 56.25vw;
|
||||
min-height: 100vh;
|
||||
min-width: 177.77vh;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.8) 70%, #0b0b0b 100%);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
max-width: 1600px;
|
||||
margin: -350px auto 0 auto;
|
||||
max-width: 1400px;
|
||||
margin: -45vh auto 0 auto;
|
||||
padding: 0 3rem 4rem 3rem;
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr;
|
||||
gap: 3rem;
|
||||
animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
transition: margin-top 0.5s ease;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
body.watch-mode .content-container { margin-top: 0; }
|
||||
body.watch-mode .anime-header { margin-top: 2rem; }
|
||||
|
||||
.anime-header { margin-bottom: 5rem; max-width: 900px; }
|
||||
.anime-title {
|
||||
font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900;
|
||||
margin-bottom: 0.5rem; text-shadow: 0 4px 30px rgba(0,0,0,0.6);
|
||||
}
|
||||
.hero-meta-info {
|
||||
display: flex; align-items: center; gap: 0.8rem;
|
||||
color: rgba(255,255,255,0.7); font-weight: 600; margin-bottom: 1.2rem;
|
||||
}
|
||||
.pill-local {
|
||||
background: #22c55e; color: black; padding: 2px 8px;
|
||||
border-radius: 4px; font-size: 0.75rem; font-weight: 900;
|
||||
}
|
||||
.hero-description-mini {
|
||||
font-size: 1.05rem; line-height: 1.5; color: rgba(255,255,255,0.8);
|
||||
margin-bottom: 1.2rem; max-width: 700px;
|
||||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
||||
}
|
||||
.hero-tags {
|
||||
display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem;
|
||||
color: rgba(255,255,255,0.5); font-weight: 500;
|
||||
}
|
||||
|
||||
.action-row { display: flex; align-items: center; gap: 1rem; }
|
||||
.btn-watch {
|
||||
padding: 0.8rem 2.2rem; background: white; color: black;
|
||||
border-radius: 8px; font-weight: 800; border: none; cursor: pointer;
|
||||
display: flex; align-items: center; gap: 0.6rem; transition: 0.2s ease;
|
||||
}
|
||||
.btn-watch:hover { transform: scale(1.03); filter: brightness(0.9); }
|
||||
|
||||
.btn-add-list {
|
||||
padding: 0.8rem 1.5rem; background: rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(255,255,255,0.2); color: white;
|
||||
border-radius: 8px; font-weight: 700; cursor: pointer; transition: 0.2s;
|
||||
}
|
||||
.btn-add-list:hover { background: rgba(255,255,255,0.2); }
|
||||
|
||||
.main-layout { display: grid; grid-template-columns: 300px 1fr; gap: 4rem; margin-top: 2rem; }
|
||||
.content-section { margin-top: 4rem; }
|
||||
h2, .subsection-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; color: white; }
|
||||
|
||||
.poster-card {
|
||||
width: 100%;
|
||||
aspect-ratio: 2/3;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 12px; overflow: hidden;
|
||||
box-shadow: 0 30px 60px rgba(0,0,0,0.5); border: 1px solid var(--border-subtle);
|
||||
}
|
||||
.poster-card img { width: 100%; height: auto; display: block; }
|
||||
|
||||
.poster-card img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
.relations-horizontal { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
|
||||
.relation-card-horizontal {
|
||||
display: flex; background: var(--bg-card); border: 1px solid var(--border-subtle);
|
||||
border-radius: 10px; overflow: hidden; transition: 0.2s; cursor: pointer;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
.relation-card-horizontal:hover { background: rgba(255,255,255,0.08); transform: translateX(5px); }
|
||||
.rel-img { width: 85px; height: 110px; object-fit: cover; }
|
||||
.rel-info { padding: 1rem; display: flex; flex-direction: column; justify-content: center; }
|
||||
.rel-type {
|
||||
font-size: 0.7rem; color: var(--color-primary); font-weight: 800;
|
||||
margin-bottom: 4px; background: rgba(139, 92, 246, 0.1); width: fit-content; padding: 2px 6px; border-radius: 4px;
|
||||
}
|
||||
.rel-title { font-size: 0.95rem; font-weight: 700; color: #eee; }
|
||||
|
||||
.info-item h4 { margin: 0 0 0.25rem 0; font-size: 0.85rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.info-item span { font-weight: 600; font-size: 1rem; color: var(--color-text-primary); }
|
||||
.characters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
||||
.character-item { display: flex; align-items: center; gap: 1rem; }
|
||||
.char-avatar { width: 60px; height: 60px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
|
||||
.char-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.char-info { display: flex; flex-direction: column; gap: 2px; }
|
||||
.char-name { font-size: 1rem; font-weight: 700; color: #fff; }
|
||||
.char-role { font-size: 0.8rem; color: #888; font-weight: 500; }
|
||||
.btn-show-more { background: transparent; border: 1px solid var(--border-subtle); color: #aaa; padding: 10px; width: 100%; margin-top: 1rem; cursor: pointer; }
|
||||
|
||||
.character-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
.episodes-section { margin-top: 3rem; }
|
||||
.episodes-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
|
||||
.episode-search-input {
|
||||
background: rgba(255,255,255,0.05); border: 1px solid var(--border-subtle);
|
||||
color: white; padding: 8px 15px; border-radius: 8px; width: 100px;
|
||||
}
|
||||
.character-item { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; }
|
||||
.char-dot { width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; }
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.anime-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.anime-title {
|
||||
font-size: 4rem;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
margin: 0 0 1.5rem 0;
|
||||
text-shadow: 0 4px 30px rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pill {
|
||||
padding: 0.5rem 1.25rem;
|
||||
background: rgba(255,255,255,0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.pill.score { background: rgba(34, 197, 94, 0.2); color: #4ade80; border-color: rgba(34, 197, 94, 0.2); }
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.btn-watch {
|
||||
padding: 1rem 3rem;
|
||||
background: var(--color-text-primary);
|
||||
color: var(--color-bg-base);
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 800;
|
||||
font-size: 1.1rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.btn-watch:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
padding: 1rem 2rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
color: white;
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.description-box {
|
||||
margin-top: 3rem;
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.8;
|
||||
color: #e4e4e7;
|
||||
max-width: 900px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
padding: 2rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.episodes-section {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
.section-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.8rem; }
|
||||
.section-title::before { content: ''; width: 4px; height: 28px; background: var(--color-primary); border-radius: 2px; }
|
||||
|
||||
.episodes-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
|
||||
gap: 0.6rem;
|
||||
}
|
||||
.episode-btn {
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
padding: 1.25rem 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid var(--border-subtle);
|
||||
padding: 0.6rem 0;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.episode-btn:hover {
|
||||
background: var(--color-bg-elevated-hover);
|
||||
color: white;
|
||||
transform: translateY(-3px);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(60px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.content-container {
|
||||
grid-template-columns: 1fr;
|
||||
margin-top: -100px;
|
||||
padding: 0 1.5rem 4rem 1.5rem;
|
||||
}
|
||||
.poster-card { width: 220px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
|
||||
.main-content { text-align: center; align-items: center; }
|
||||
.anime-title { font-size: 2.5rem; }
|
||||
.meta-row { justify-content: center; }
|
||||
.sidebar { display: none; }
|
||||
}
|
||||
|
||||
.read-more-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #8b5cf6;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
padding: 0;
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.95rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
transition: all 0.2s;
|
||||
color: #ccc;
|
||||
}
|
||||
.episode-btn:hover {
|
||||
background: white;
|
||||
color: black;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.episode-btn.active-playing {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
.read-more-btn:hover { text-decoration: underline; }
|
||||
|
||||
.episodes-header-row {
|
||||
.metadata-sidebar {
|
||||
margin-top: 2rem;
|
||||
background: rgba(255,255,255,0.03);
|
||||
padding: 1.5rem;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.2rem;
|
||||
}
|
||||
.meta-item-side {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
padding-bottom: 0.8rem;
|
||||
}
|
||||
.episodes-header-row h2 {
|
||||
.meta-item-side:last-child { border-bottom: none; padding-bottom: 0; }
|
||||
.meta-item-side span {
|
||||
font-size: 0.8rem;
|
||||
color: #888;
|
||||
font-weight: 600;
|
||||
}
|
||||
.meta-item-side p {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: 1.8rem;
|
||||
border-left: 4px solid #8b5cf6;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.episode-search-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.episode-search-input {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 99px;
|
||||
padding: 0.6rem 1rem;
|
||||
color: white;
|
||||
width: 140px;
|
||||
text-align: center;
|
||||
font-family: inherit;
|
||||
transition: 0.2s;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
.episode-search-input:focus {
|
||||
border-color: #8b5cf6;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
outline: none;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.episode-search-input::-webkit-outer-spin-button,
|
||||
.episode-search-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
||||
@media (max-width: 1024px) {
|
||||
.content-container { margin-top: -200px; padding: 0 1.5rem; }
|
||||
.main-layout { grid-template-columns: 1fr; gap: 2rem; }
|
||||
.poster-section { display: flex; flex-direction: column; align-items: center; }
|
||||
.poster-card { width: 220px; }
|
||||
.metadata-sidebar { width: 100%; max-width: 400px; }
|
||||
}
|
||||
|
||||
.relation-card-horizontal.no-link {
|
||||
cursor: default;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.relation-card-horizontal.no-link:hover {
|
||||
transform: none;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
gap: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
padding-top: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
color: #888;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
padding: 0.6rem 1.2rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.page-btn:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: #8b5cf6;
|
||||
background: white;
|
||||
color: black;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.page-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.page-info {
|
||||
color: #a1a1aa;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
507
docker/views/css/anime/player.css
Normal file
507
docker/views/css/anime/player.css
Normal file
@@ -0,0 +1,507 @@
|
||||
:root {
|
||||
--brand-color: #8b5cf6;
|
||||
--brand-color-light: #a78bfa;
|
||||
--op-color: #fbbf24;
|
||||
--ed-color: #38bdf8;
|
||||
--overlay-gradient-top: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent 100%);
|
||||
--overlay-gradient-bottom: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 40%, transparent 100%);
|
||||
}
|
||||
|
||||
body.stop-scrolling {
|
||||
overflow: hidden !important;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.player-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.player-wrapper * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.player-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.video-frame {
|
||||
|
||||
flex: 1;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.video-frame video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.video-frame .plyr {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.player-header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 20px 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
z-index: 20;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%);
|
||||
pointer-events: none; /* Permite clickear el video a través del header vacío */
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.header-left, .header-right {
|
||||
pointer-events: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.btn-icon-glass {
|
||||
appearance: none;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
border-radius: 20%;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(4px);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-icon-glass:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||||
transform: translateY(-1px) scale(1.05);
|
||||
}
|
||||
|
||||
.player-container:hover .player-header,
|
||||
.player-container.paused .player-header {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.player-meta {
|
||||
display: flex; flex-direction: column; gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-close-player {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: rgba(255,255,255,0.7);
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
font-size: 1.1rem; font-weight: 500;
|
||||
cursor: pointer; padding: 0;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.btn-close-player:hover { color: #fff; }
|
||||
.btn-close-player svg { width: 28px; height: 28px; }
|
||||
|
||||
.episode-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ep-label {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255,255,255,0.7);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.ep-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.nav-capsule {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 20px; /* Forma de pastilla */
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-btn:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.nav-btn:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.nav-capsule .divider {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
#skip-overlay-btn {
|
||||
position: absolute;
|
||||
bottom: 80px; /* Encima de la barra de Plyr */
|
||||
right: 30px;
|
||||
background: white;
|
||||
color: black;
|
||||
padding: 10px 24px;
|
||||
border-radius: 6px;
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
z-index: 2147483647 !important; /* Siempre encima de todo */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
|
||||
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.3s, transform 0.3s, background 0.2s;
|
||||
pointer-events: none;
|
||||
|
||||
}
|
||||
|
||||
#skip-overlay-btn.visible {
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
cursor: pointer !important;
|
||||
visibility: visible !important;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
#skip-overlay-btn:hover {
|
||||
background: #f0f0f0;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
#skip-overlay-btn.is-next {
|
||||
background: #8b5cf6;
|
||||
color: white;
|
||||
}
|
||||
#skip-overlay-btn.is-next:hover {
|
||||
background: #7c3aed;
|
||||
}
|
||||
|
||||
|
||||
/* --- BOTONES DE NAVEGACIÓN LATERALES (Side Chevrons) --- */
|
||||
.side-nav-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
border: none;
|
||||
width: 60px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 30; /* Encima del video */
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0; /* Invisibles por defecto */
|
||||
}
|
||||
|
||||
/* Bordes redondeados según el lado */
|
||||
.side-nav-btn.left {
|
||||
left: 0;
|
||||
border-radius: 0 10px 10px 0;
|
||||
}
|
||||
|
||||
.side-nav-btn.right {
|
||||
right: 0;
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
/* Mostrar solo cuando el mouse está sobre el reproductor */
|
||||
.player-container:hover .side-nav-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Efecto Hover sobre el botón */
|
||||
.side-nav-btn:hover:not(:disabled) {
|
||||
background: rgba(139, 92, 246, 0.6); /* Tu color brand morado pero transparente */
|
||||
color: white;
|
||||
width: 70px; /* Crecen un poco */
|
||||
}
|
||||
|
||||
/* Estado deshabilitado (Primer/Último episodio) */
|
||||
.side-nav-btn:disabled {
|
||||
cursor: default;
|
||||
opacity: 0 !important; /* Totalmente oculto si no se puede usar */
|
||||
pointer-events: none;
|
||||
}
|
||||
#player-episode-title {
|
||||
font-size: 1.5rem; font-weight: 700;
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.player-controls-top {
|
||||
display: flex; gap: 1rem; align-items: center;
|
||||
}
|
||||
|
||||
.glass-select {
|
||||
appearance: none;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: #fff;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem; font-weight: 600;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(4px);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.glass-select:hover { background: rgba(255, 255, 255, 0.2); }
|
||||
.glass-select option { background: #111; color: #ccc; }
|
||||
|
||||
.sd-toggle {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
.sd-option {
|
||||
padding: 4px 12px;
|
||||
font-size: 0.75rem; font-weight: 700;
|
||||
color: rgba(255,255,255,0.5);
|
||||
border-radius: 2px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.sd-option.active {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.btn-skip-intro {
|
||||
position: absolute;
|
||||
bottom: 120px; right: 40px;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
border: none;
|
||||
padding: 10px 24px;
|
||||
font-weight: 700; font-size: 0.9rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
z-index: 50;
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
opacity: 0; transform: translateY(20px);
|
||||
transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
||||
}
|
||||
.btn-skip-intro.visible {
|
||||
opacity: 1; transform: translateY(0);
|
||||
}
|
||||
.btn-skip-intro:hover {
|
||||
background: #e6e6e6;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
:root {
|
||||
--plyr-color-main: var(--brand-color);
|
||||
--plyr-video-control-color: #fff;
|
||||
--plyr-video-control-background-hover: transparent;
|
||||
--plyr-control-icon-size: 20px;
|
||||
--plyr-range-track-height: 4px;
|
||||
--plyr-range-thumb-height: 14px;
|
||||
--plyr-range-thumb-background: #fff;
|
||||
--plyr-menu-background: rgba(20, 20, 20, 0.95);
|
||||
--plyr-menu-color: #fff;
|
||||
--plyr-tooltip-background: rgba(255,255,255,0.9);
|
||||
--plyr-tooltip-color: #000;
|
||||
}
|
||||
|
||||
.plyr--video .plyr__controls {
|
||||
padding-bottom: max(20px, env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.plyr__progress__container:hover .plyr__progress input[type=range],
|
||||
.plyr__progress__container:hover .plyr__progress__buffer {
|
||||
height: 8px;
|
||||
transition: height 0.1s ease;
|
||||
}
|
||||
|
||||
.plyr__progress {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.skip-marker {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 4px;
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
transition: height 0.1s ease;
|
||||
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
|
||||
border-left: 2px solid rgba(0,0,0,0);
|
||||
border-right: 2px solid rgba(0,0,0,0);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.plyr__progress__container:hover .skip-marker {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.skip-marker.op {
|
||||
background-color: var(--op-color);
|
||||
box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
|
||||
}
|
||||
|
||||
.skip-marker.ed {
|
||||
background-color: var(--ed-color);
|
||||
}
|
||||
|
||||
.player-loading-overlay {
|
||||
background: #000;
|
||||
}
|
||||
.spinner {
|
||||
border-width: 2px;
|
||||
width: 50px; height: 50px;
|
||||
border-top-color: #fff;
|
||||
border-right-color: rgba(255,255,255,0.1);
|
||||
border-bottom-color: rgba(255,255,255,0.1);
|
||||
border-left-color: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.settings-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px; /* Espacio entre los elementos */
|
||||
}
|
||||
|
||||
/* Opcional: Ajuste para pantallas móviles muy pequeñas */
|
||||
@media (max-width: 600px) {
|
||||
.settings-group {
|
||||
gap: 8px;
|
||||
}
|
||||
.glass-select {
|
||||
padding: 6px 10px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.player-container:fullscreen,
|
||||
.player-container:-webkit-full-screen {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #000;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
/* Controles custom SIEMPRE visibles encima */
|
||||
.player-container:fullscreen .player-header,
|
||||
.player-container:fullscreen .side-nav-btn,
|
||||
.player-container:fullscreen #skip-overlay-btn,
|
||||
.player-container:-webkit-full-screen .player-header,
|
||||
.player-container:-webkit-full-screen .side-nav-btn,
|
||||
.player-container:-webkit-full-screen #skip-overlay-btn {
|
||||
z-index: 2147483647 !important;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Posición correcta del botón Skip en fullscreen */
|
||||
.player-container:fullscreen #skip-overlay-btn,
|
||||
.player-container:-webkit-full-screen #skip-overlay-btn {
|
||||
bottom: 100px;
|
||||
right: 50px;
|
||||
}
|
||||
|
||||
/* ================= UI HIDDEN (UNA SOLA FUENTE DE VERDAD) ================= */
|
||||
|
||||
.player-container.ui-hidden .player-header,
|
||||
.player-container.ui-hidden .side-nav-btn {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
cursor: none;
|
||||
}
|
||||
#skip-overlay-btn {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#skip-overlay-btn.visible {
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.player-container.ui-hidden #skip-overlay-btn.visible {
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
cursor: pointer !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
.player-header,
|
||||
.side-nav-btn,
|
||||
#skip-overlay-btn {
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.player-container:fullscreen #skip-overlay-btn,
|
||||
.player-container:-webkit-full-screen #skip-overlay-btn {
|
||||
z-index: 2147483647 !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
.player-container:fullscreen #skip-overlay-btn.visible,
|
||||
.player-container:-webkit-full-screen #skip-overlay-btn.visible {
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
@@ -1,830 +0,0 @@
|
||||
.top-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: var(--spacing-lg) var(--spacing-xl);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0.8) 0%,
|
||||
transparent 100%
|
||||
);
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
pointer-events: auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
padding: 0.7rem 1.5rem;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-full);
|
||||
color: var(--color-text-primary);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
transition: all var(--transition-smooth);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-glow);
|
||||
}
|
||||
|
||||
.watch-container {
|
||||
max-width: 1600px;
|
||||
margin: var(--spacing-2xl) auto;
|
||||
padding: 0 var(--spacing-xl);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xl);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.player-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
flex-wrap: wrap;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.sd-toggle {
|
||||
display: flex;
|
||||
background: var(--color-bg-elevated);
|
||||
border: var(--border-subtle);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 4px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sd-option {
|
||||
padding: 0.6rem 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-muted);
|
||||
z-index: 2;
|
||||
transition: color var(--transition-base);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.sd-option.active {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.sd-bg {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
width: calc(50% - 4px);
|
||||
background: var(--color-primary);
|
||||
border-radius: var(--radius-full);
|
||||
transition: transform var(--transition-smooth);
|
||||
box-shadow: 0 4px 12px var(--color-primary-glow);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sd-toggle[data-state="dub"] .sd-bg {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.source-select {
|
||||
appearance: none;
|
||||
background-color: var(--color-bg-elevated);
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 1.2rem center;
|
||||
border: var(--border-subtle);
|
||||
color: var(--color-text-primary);
|
||||
padding: 0.7rem 2.8rem 0.7rem 1.2rem;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
min-width: 160px;
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.source-select:hover {
|
||||
border-color: var(--color-primary);
|
||||
background-color: var(--color-bg-card);
|
||||
}
|
||||
.source-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px var(--color-primary-glow);
|
||||
}
|
||||
|
||||
.video-container {
|
||||
aspect-ratio: 16/9;
|
||||
width: 100%;
|
||||
background: var(--color-bg-base);
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
var(--shadow-lg),
|
||||
0 0 0 1px var(--glass-border);
|
||||
position: relative;
|
||||
transition: box-shadow var(--transition-smooth);
|
||||
}
|
||||
|
||||
.video-container:hover {
|
||||
box-shadow:
|
||||
var(--shadow-lg),
|
||||
0 0 0 1px var(--color-primary),
|
||||
var(--shadow-glow);
|
||||
}
|
||||
|
||||
#player {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--color-bg-base);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 20;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.1);
|
||||
border-top-color: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-overlay p {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.episode-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-lg);
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.episode-info h1 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 800;
|
||||
margin: 0 0 var(--spacing-xs);
|
||||
}
|
||||
.episode-info p {
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.navigation-buttons {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
background: var(--color-bg-elevated);
|
||||
border: var(--border-subtle);
|
||||
color: var(--color-text-primary);
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.nav-btn:hover:not(:disabled) {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-glow);
|
||||
}
|
||||
.nav-btn:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.episode-carousel-compact {
|
||||
width: 100%;
|
||||
max-width: 1600px;
|
||||
margin-top: var(--spacing-lg);
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.carousel-header {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
padding: 0 var(--spacing-xl);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.carousel-header h2 {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 900;
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: -0.04em;
|
||||
border-left: 4px solid var(--color-primary);
|
||||
padding-left: var(--spacing-md);
|
||||
}
|
||||
|
||||
.carousel-nav {
|
||||
display: flex;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.carousel-arrow-mini {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: var(--color-bg-elevated);
|
||||
border: var(--border-subtle);
|
||||
border-radius: var(--radius-full);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.carousel-arrow-mini:hover {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-text-primary);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.carousel-arrow-mini[style*="opacity: 0.3"] {
|
||||
background: var(--color-bg-elevated);
|
||||
color: var(--color-text-muted);
|
||||
border-color: var(--border-subtle);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.episode-carousel-compact-list {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-sm) var(--spacing-xl);
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
mask-image: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
black var(--spacing-md),
|
||||
black calc(100% - var(--spacing-md)),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.episode-carousel-compact-list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
flex: 0 0 200px;
|
||||
height: 112px;
|
||||
|
||||
background: var(--color-bg-card);
|
||||
border: 2px solid var(--border-subtle);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition: all var(--transition-base);
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
scroll-snap-align: start;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.carousel-item:hover {
|
||||
border-color: var(--color-primary);
|
||||
transform: scale(1.02);
|
||||
box-shadow: var(--shadow-md), var(--shadow-glow);
|
||||
}
|
||||
|
||||
.carousel-item.active-ep-carousel {
|
||||
border-color: var(--color-primary);
|
||||
background: rgba(139, 92, 246, 0.15);
|
||||
box-shadow:
|
||||
0 0 0 2px var(--color-primary),
|
||||
var(--shadow-md);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.carousel-item.active-ep-carousel::after {
|
||||
content: "WATCHING";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-primary);
|
||||
padding: 2px 8px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 800;
|
||||
border-bottom-left-radius: var(--radius-sm);
|
||||
letter-spacing: 0.05em;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.carousel-item-img-container {
|
||||
height: 70px;
|
||||
background: var(--color-bg-elevated);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.carousel-item-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform var(--transition-smooth);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.carousel-item:hover .carousel-item-img {
|
||||
transform: scale(1.1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.carousel-item-info {
|
||||
flex: 1;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
background: var(--color-bg-elevated);
|
||||
}
|
||||
|
||||
.carousel-item-info p {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.carousel-item-info p::before {
|
||||
content: attr(data-episode-number);
|
||||
color: var(--color-primary);
|
||||
font-weight: 800;
|
||||
margin-right: var(--spacing-xs);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.carousel-item.no-thumbnail {
|
||||
flex: 0 0 160px;
|
||||
height: 90px;
|
||||
background: var(--color-bg-elevated);
|
||||
border: 2px solid var(--border-subtle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.carousel-item.no-thumbnail .carousel-item-info {
|
||||
padding: var(--spacing-sm);
|
||||
background: transparent;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.carousel-item.no-thumbnail .carousel-item-info p {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.carousel-item.no-thumbnail:hover {
|
||||
background: rgba(139, 92, 246, 0.12);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.carousel-item.no-thumbnail.active-ep-carousel .carousel-item-info p {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.anime-details,
|
||||
.anime-extra-content {
|
||||
max-width: 1600px;
|
||||
margin: var(--spacing-2xl) auto;
|
||||
}
|
||||
|
||||
.details-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-xl);
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-xl);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.details-cover {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-md);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.details-cover h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 900;
|
||||
color: var(--color-text-primary);
|
||||
line-height: 1.2;
|
||||
margin: 0 0 var(--spacing-md) 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
width: 220px;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.details-content h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.meta-badge {
|
||||
background: rgba(139, 92, 246, 0.12);
|
||||
color: var(--color-primary);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(139, 92, 246, 0.2);
|
||||
}
|
||||
|
||||
.meta-badge.meta-score {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
.details-description {
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.characters-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.characters-header h2 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 800;
|
||||
color: var(--color-text-primary);
|
||||
border-left: 5px solid var(--color-primary);
|
||||
padding-left: var(--spacing-md);
|
||||
}
|
||||
|
||||
.expand-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
padding: var(--spacing-xs);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.expand-btn:hover {
|
||||
background: rgba(139, 92, 246, 0.1);
|
||||
}
|
||||
.expand-btn svg {
|
||||
transition: transform var(--transition-smooth);
|
||||
}
|
||||
.expand-btn[data-expanded="true"] svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.characters-carousel {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-lg);
|
||||
align-content: flex-start;
|
||||
overflow: hidden;
|
||||
|
||||
height: 208px;
|
||||
transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding: 0 var(--spacing-sm);
|
||||
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.characters-carousel::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.characters-carousel.expanded {
|
||||
height: auto;
|
||||
max-height: 3200px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 0;
|
||||
|
||||
-ms-overflow-style: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.characters-carousel.expanded::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.characters-carousel.expanded::-webkit-scrollbar-thumb {
|
||||
background: rgba(139, 92, 246, 0.4);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.characters-carousel.expanded::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.plyr--video {
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
.plyr__controls {
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
rgba(0, 0, 0, 0.9) 0%,
|
||||
rgba(0, 0, 0, 0.5) 50%,
|
||||
transparent 100%
|
||||
) !important;
|
||||
padding: 1rem 1.5rem 1.5rem !important;
|
||||
}
|
||||
.plyr--full-ui input[type="range"] {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.plyr__control:hover {
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
}
|
||||
.plyr__menu__container {
|
||||
background: var(--glass-bg) !important;
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--shadow-lg) !important;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.carousel-nav {
|
||||
display: flex;
|
||||
}
|
||||
.watch-container {
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
.details-cover {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.details-cover h1 {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.watch-container {
|
||||
padding: 5rem 1rem 2rem 1rem;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.player-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.source-select {
|
||||
width: 100%;
|
||||
background-position: right 1.5rem center;
|
||||
}
|
||||
|
||||
.episode-controls {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.episode-info {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.episode-info h1 {
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.navigation-buttons {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
justify-content: center;
|
||||
padding: 0.8rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.details-container {
|
||||
flex-direction: column;
|
||||
padding: 1.5rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.details-cover {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.details-cover {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.details-cover h1 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
width: 140px;
|
||||
flex-shrink: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.details-content h1 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.characters-carousel {
|
||||
justify-content: center;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.character-card {
|
||||
width: calc(50% - 0.75rem);
|
||||
flex: 0 0 calc(50% - 0.75rem);
|
||||
}
|
||||
}
|
||||
|
||||
.plyr__progress {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.plyr__markers {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.plyr__marker {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
background: rgba(255, 215, 0, 0.8); /* Color dorado para Opening */
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.plyr__marker[data-label*="Ending"] {
|
||||
background: rgba(255, 100, 100, 0.8); /* Color rojo para Ending */
|
||||
}
|
||||
|
||||
.plyr__marker:hover {
|
||||
height: 120%;
|
||||
width: 4px;
|
||||
background: rgba(255, 215, 0, 1);
|
||||
}
|
||||
|
||||
.plyr__marker[data-label*="Ending"]:hover {
|
||||
background: rgba(255, 100, 100, 1);
|
||||
}
|
||||
|
||||
/* Tooltip para mostrar el label */
|
||||
.plyr__marker::before {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-8px);
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.plyr__marker:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
.plyr__marker {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
cursor: pointer;
|
||||
}
|
||||
Reference in New Issue
Block a user