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