itsskaiya
28ff6ccc68
We are launching a docker version (server version) today so we want to just organize the repo so its easier to navigate.
197 lines
7.9 KiB
HTML
197 lines
7.9 KiB
HTML
<!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> |