First dev release of v2.0.0
This commit is contained in:
485
views/anime.html
Normal file
485
views/anime.html
Normal file
@@ -0,0 +1,485 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>StreamFlow</title>
|
||||
<link rel="stylesheet" href="./styles/anime.css">
|
||||
<style>
|
||||
/* --- MODAL STYLES --- */
|
||||
.modal-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
backdrop-filter: blur(8px);
|
||||
z-index: 2000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.modal-overlay.active {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
}
|
||||
.modal-content {
|
||||
background: #18181b;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 24px;
|
||||
padding: 2.5rem;
|
||||
max-width: 650px;
|
||||
width: 90%;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||
transform: scale(0.95);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.modal-overlay.active .modal-content {
|
||||
transform: scale(1);
|
||||
}
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
right: 1.5rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
color: white;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.modal-close:hover { background: rgba(255, 255, 255, 0.2); }
|
||||
.modal-text {
|
||||
line-height: 1.8;
|
||||
font-size: 1.1rem;
|
||||
color: #e4e4e7;
|
||||
}
|
||||
.modal-title { margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; }
|
||||
|
||||
.read-more-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #8b5cf6;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
padding: 0;
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.95rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.read-more-btn:hover { text-decoration: underline; }
|
||||
|
||||
/* --- EPISODE TOOLBAR --- */
|
||||
.episodes-header-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
.episodes-header-row h2 {
|
||||
margin: 0;
|
||||
font-size: 1.8rem;
|
||||
border-left: 4px solid #8b5cf6;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.episode-search-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.episode-search-input {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 99px;
|
||||
padding: 0.6rem 1rem;
|
||||
color: white;
|
||||
width: 140px;
|
||||
text-align: center;
|
||||
font-family: inherit;
|
||||
transition: 0.2s;
|
||||
-moz-appearance: textfield; /* Firefox spinner hide */
|
||||
}
|
||||
.episode-search-input:focus {
|
||||
border-color: #8b5cf6;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
outline: none;
|
||||
}
|
||||
/* Hide number spinners for Webkit/Chrome */
|
||||
.episode-search-input::-webkit-outer-spin-button,
|
||||
.episode-search-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
||||
|
||||
/* --- PAGINATION --- */
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
.page-btn {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
font-weight: 500;
|
||||
}
|
||||
.page-btn:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: #8b5cf6;
|
||||
}
|
||||
.page-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.page-info {
|
||||
color: #a1a1aa;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Description Modal -->
|
||||
<div class="modal-overlay" id="desc-modal">
|
||||
<div class="modal-content">
|
||||
<button class="modal-close" onclick="closeModal()">✕</button>
|
||||
<h2 class="modal-title">Synopsis</h2>
|
||||
<div class="modal-text" id="full-description"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Back Button -->
|
||||
<a href="/" class="back-btn">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
|
||||
Back to Home
|
||||
</a>
|
||||
|
||||
<!-- Video Hero (Trailer on Loop) -->
|
||||
<div class="hero-wrapper">
|
||||
<div class="video-background">
|
||||
<div id="player"></div>
|
||||
</div>
|
||||
<div class="hero-overlay"></div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="content-container">
|
||||
|
||||
<!-- Left Sidebar (Info) -->
|
||||
<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">
|
||||
<!-- Populated via JS -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Right Content -->
|
||||
<main class="main-content">
|
||||
<div class="anime-header">
|
||||
<h1 class="anime-title" id="title">Loading...</h1>
|
||||
|
||||
<div class="meta-row">
|
||||
<div class="pill score" id="score">--% Score</div>
|
||||
<div class="pill" id="year">----</div>
|
||||
<div class="pill" id="genres">Action</div>
|
||||
</div>
|
||||
|
||||
<div class="action-row">
|
||||
<button class="btn-watch" id="watch-btn">
|
||||
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||||
Start Watching
|
||||
</button>
|
||||
<button class="btn-secondary">+ Add to List</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description Box -->
|
||||
<div class="description-box">
|
||||
<div id="description-preview"></div>
|
||||
<button id="read-more-btn" class="read-more-btn" style="display: none;" onclick="openModal()">
|
||||
Read More
|
||||
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="episodes-section">
|
||||
<!-- Header Row with Search -->
|
||||
<div class="episodes-header-row">
|
||||
<div class="section-title" style="margin:0; border:none; padding:0;">
|
||||
<h2 style="font-size: 1.8rem; border-left: 4px solid #8b5cf6; padding-left: 1rem;">Episodes</h2>
|
||||
</div>
|
||||
<div class="episode-search-wrapper">
|
||||
<input type="number" id="ep-search" class="episode-search-input" placeholder="Jump to Ep #" min="1">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="episodes-grid" id="episodes-grid"></div>
|
||||
|
||||
<!-- Pagination Controls -->
|
||||
<div class="pagination-controls" id="pagination-controls">
|
||||
<button class="page-btn" id="prev-page" onclick="changePage(-1)">Previous</button>
|
||||
<span class="page-info" id="page-info">Page 1 of 1</span>
|
||||
<button class="page-btn" id="next-page" onclick="changePage(1)">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const animeId = window.location.pathname.split('/').pop();
|
||||
let player;
|
||||
|
||||
// Episode State
|
||||
let totalEpisodes = 0;
|
||||
let currentPage = 1;
|
||||
const itemsPerPage = 12;
|
||||
|
||||
// Load YouTube API
|
||||
var tag = document.createElement('script');
|
||||
tag.src = "https://www.youtube.com/iframe_api";
|
||||
var firstScriptTag = document.getElementsByTagName('script')[0];
|
||||
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
||||
|
||||
async function loadAnime() {
|
||||
try {
|
||||
const res = await fetch(`/api/anime/${animeId}`);
|
||||
const data = await res.json();
|
||||
|
||||
if(data.error) {
|
||||
document.getElementById('title').innerText = "Anime Not Found";
|
||||
return;
|
||||
}
|
||||
|
||||
// Populate Data
|
||||
const title = data.title.english || data.title.romaji;
|
||||
document.title = `${title} | StreamFlow`;
|
||||
document.getElementById('title').innerText = title;
|
||||
document.getElementById('poster').src = data.coverImage.extraLarge;
|
||||
|
||||
// Description Logic
|
||||
const rawDesc = data.description || "No description available.";
|
||||
handleDescription(rawDesc);
|
||||
|
||||
document.getElementById('score').innerText = (data.averageScore || '?') + '% Score';
|
||||
document.getElementById('year').innerText = data.seasonYear || '????';
|
||||
document.getElementById('genres').innerText = data.genres ? data.genres.slice(0, 3).join(' • ') : '';
|
||||
|
||||
document.getElementById('format').innerText = data.format || 'TV';
|
||||
document.getElementById('episodes').innerText = data.episodes || '?';
|
||||
document.getElementById('status').innerText = data.status || 'Unknown';
|
||||
document.getElementById('season').innerText = `${data.season || ''} ${data.seasonYear || ''}`;
|
||||
|
||||
if (data.studios && data.studios.nodes.length > 0) {
|
||||
document.getElementById('studio').innerText = data.studios.nodes[0].name;
|
||||
}
|
||||
|
||||
if (data.characters && data.characters.nodes) {
|
||||
const charContainer = document.getElementById('char-list');
|
||||
data.characters.nodes.slice(0, 5).forEach(char => {
|
||||
charContainer.innerHTML += `
|
||||
<div class="character-item">
|
||||
<div class="char-dot"></div> ${char.name.full}
|
||||
</div>`;
|
||||
});
|
||||
}
|
||||
|
||||
// Watch Button
|
||||
document.getElementById('watch-btn').onclick = () => {
|
||||
window.location.href = `/watch/${animeId}/1`;
|
||||
};
|
||||
|
||||
// Setup Trailer
|
||||
if (data.trailer && data.trailer.site === 'youtube') {
|
||||
window.onYouTubeIframeAPIReady = function() {
|
||||
player = new YT.Player('player', {
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
videoId: data.trailer.id,
|
||||
playerVars: {
|
||||
'autoplay': 1, 'controls': 0, 'mute': 1,
|
||||
'loop': 1, 'playlist': data.trailer.id,
|
||||
'showinfo': 0, 'modestbranding': 1, 'disablekb': 1
|
||||
},
|
||||
events: { 'onReady': (e) => e.target.playVideo() }
|
||||
});
|
||||
};
|
||||
} else {
|
||||
const banner = data.bannerImage || data.coverImage.extraLarge;
|
||||
document.querySelector('.video-background').innerHTML = `<img src="${banner}" style="width:100%; height:100%; object-fit:cover;">`;
|
||||
}
|
||||
|
||||
// --- MODIFIED EPISODE LOGIC ---
|
||||
// Prioritize "nextAiringEpisode" to determine actual released count.
|
||||
// If nextAiringEpisode exists (e.g. ep 4), then 3 are out.
|
||||
// If it doesn't exist, we assume the show is finished or has no airing data, so use total.
|
||||
|
||||
if (data.nextAiringEpisode) {
|
||||
// Show is currently Airing: use (Next Episode - 1)
|
||||
totalEpisodes = data.nextAiringEpisode.episode - 1;
|
||||
} else {
|
||||
// Show is Finished or data unavailable: use Total Episodes
|
||||
totalEpisodes = data.episodes || 12; // fallback
|
||||
}
|
||||
|
||||
// Clamp safe range
|
||||
totalEpisodes = Math.min(Math.max(totalEpisodes, 1), 5000);
|
||||
|
||||
renderEpisodes();
|
||||
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
// --- DESCRIPTION MODAL LOGIC ---
|
||||
function handleDescription(text) {
|
||||
// Strip HTML tags for sentence counting (rough approximation)
|
||||
const tmp = document.createElement("DIV");
|
||||
tmp.innerHTML = text;
|
||||
const cleanText = tmp.textContent || tmp.innerText || "";
|
||||
|
||||
// Split by punctuation to count sentences
|
||||
const sentences = cleanText.match(/[^\.!\?]+[\.!\?]+/g) || [cleanText];
|
||||
|
||||
// Full description in modal
|
||||
document.getElementById('full-description').innerHTML = text; // Keep HTML for modal
|
||||
|
||||
if (sentences.length > 4) {
|
||||
// Truncate
|
||||
const shortText = sentences.slice(0, 4).join(' ');
|
||||
document.getElementById('description-preview').innerText = shortText + '...';
|
||||
document.getElementById('read-more-btn').style.display = 'inline-flex';
|
||||
} else {
|
||||
document.getElementById('description-preview').innerHTML = text;
|
||||
document.getElementById('read-more-btn').style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function openModal() {
|
||||
document.getElementById('desc-modal').classList.add('active');
|
||||
document.body.style.overflow = 'hidden'; // Prevent scrolling bg
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById('desc-modal').classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
// Close modal on outside click
|
||||
document.getElementById('desc-modal').addEventListener('click', (e) => {
|
||||
if (e.target.id === 'desc-modal') closeModal();
|
||||
});
|
||||
|
||||
// --- EPISODE LOGIC ---
|
||||
|
||||
function renderEpisodes() {
|
||||
const grid = document.getElementById('episodes-grid');
|
||||
grid.innerHTML = '';
|
||||
|
||||
const start = (currentPage - 1) * itemsPerPage + 1;
|
||||
const end = Math.min(start + itemsPerPage - 1, totalEpisodes);
|
||||
|
||||
for(let i = start; i <= end; i++) {
|
||||
createEpisodeButton(i, grid);
|
||||
}
|
||||
updatePaginationControls();
|
||||
}
|
||||
|
||||
function createEpisodeButton(num, container) {
|
||||
const btn = document.createElement('div');
|
||||
btn.className = 'episode-btn';
|
||||
btn.innerText = `Ep ${num}`;
|
||||
btn.onclick = () => window.location.href = `/watch/${animeId}/${num}`;
|
||||
container.appendChild(btn);
|
||||
}
|
||||
|
||||
function updatePaginationControls() {
|
||||
const totalPages = Math.ceil(totalEpisodes / itemsPerPage);
|
||||
document.getElementById('page-info').innerText = `Page ${currentPage} of ${totalPages}`;
|
||||
document.getElementById('prev-page').disabled = currentPage === 1;
|
||||
document.getElementById('next-page').disabled = currentPage === totalPages;
|
||||
|
||||
// Show pagination only if searching is not active (search clears pagination view)
|
||||
document.getElementById('pagination-controls').style.display = 'flex';
|
||||
}
|
||||
|
||||
function changePage(delta) {
|
||||
currentPage += delta;
|
||||
renderEpisodes();
|
||||
}
|
||||
|
||||
// Search Logic
|
||||
const searchInput = document.getElementById('ep-search');
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
const val = parseInt(e.target.value);
|
||||
const grid = document.getElementById('episodes-grid');
|
||||
|
||||
if (val > 0 && val <= totalEpisodes) {
|
||||
// Show specific result
|
||||
grid.innerHTML = '';
|
||||
createEpisodeButton(val, grid);
|
||||
document.getElementById('pagination-controls').style.display = 'none';
|
||||
} else if (!e.target.value) {
|
||||
// Restore pagination if empty
|
||||
renderEpisodes();
|
||||
} else {
|
||||
// Invalid input (out of range)
|
||||
grid.innerHTML = '<div style="color:#666; width:100%; text-align:center;">Episode not found</div>';
|
||||
document.getElementById('pagination-controls').style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
loadAnime();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
114
views/book.html
Normal file
114
views/book.html
Normal file
@@ -0,0 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<base href="/">
|
||||
<title>StreamFlow Book</title>
|
||||
<link rel="stylesheet" href="../public/book.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Back Button -->
|
||||
<a href="/books" class="back-btn">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
|
||||
Back to Books
|
||||
</a>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<div class="hero-wrapper">
|
||||
<div class="hero-background">
|
||||
<img id="hero-bg" src="" alt="">
|
||||
</div>
|
||||
<div class="hero-overlay"></div>
|
||||
</div>
|
||||
|
||||
<div class="content-container">
|
||||
|
||||
<!-- Left Sidebar -->
|
||||
<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>Chapters</h4>
|
||||
<span id="chapters">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Status</h4>
|
||||
<span id="status">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Published</h4>
|
||||
<!-- Updated ID to avoid CSS conflict -->
|
||||
<span id="published-date">--</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Right Content -->
|
||||
<main class="main-content">
|
||||
<div class="book-header">
|
||||
<h1 class="book-title" id="title">Loading...</h1>
|
||||
|
||||
<div class="meta-row">
|
||||
<div class="pill score" id="score">--% Score</div>
|
||||
<div class="pill" id="genres">Action</div>
|
||||
</div>
|
||||
|
||||
<div class="action-row">
|
||||
<button class="btn-primary" id="read-start-btn">
|
||||
Start Reading
|
||||
</button>
|
||||
<button class="btn-secondary">+ Add to Library</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chapters-section">
|
||||
<div class="section-title">
|
||||
<h2>Chapters</h2>
|
||||
<div class="chapter-controls">
|
||||
<!-- New Provider Filter Dropdown -->
|
||||
<select id="provider-filter" class="filter-select" style="display: none; margin-left: 15px;">
|
||||
<option value="all">All Providers</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chapters-table-wrapper">
|
||||
<table class="chapters-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Title</th>
|
||||
<!-- Date Column Removed -->
|
||||
<th>Provider</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="chapters-body">
|
||||
<!-- Populated via JS -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="pagination-controls" id="pagination" style="display:none;">
|
||||
<button class="page-btn" id="prev-page">Previous</button>
|
||||
<span class="page-info" id="page-info">Page 1</span>
|
||||
<button class="page-btn" id="next-page">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../public/book.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
82
views/books.html
Normal file
82
views/books.html
Normal file
@@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>StreamFlow Books</title>
|
||||
<link rel="stylesheet" href="../public/books.css">
|
||||
<script src="../public/books.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar" id="navbar">
|
||||
<a href="/" class="nav-brand">
|
||||
<div class="brand-icon">SF</div>
|
||||
StreamFlow
|
||||
</a>
|
||||
|
||||
<div class="nav-center">
|
||||
<button class="nav-button" onclick="window.location.href='/'">Anime</button>
|
||||
<button class="nav-button active">Books</button>
|
||||
<button class="nav-button">Gallery</button>
|
||||
<button class="nav-button">Schedule</button>
|
||||
<button class="nav-button">My List</button>
|
||||
<button class="nav-button">Marketplace</button>
|
||||
</div>
|
||||
|
||||
<div class="search-wrapper">
|
||||
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
|
||||
<input type="text" class="search-input" id="search-input" placeholder="Search manga..." autocomplete="off">
|
||||
<div class="search-results" id="search-results"></div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<div class="hero-wrapper">
|
||||
<div class="hero-background">
|
||||
<img id="hero-bg-media" src="" alt="">
|
||||
</div>
|
||||
<div class="hero-vignette"></div>
|
||||
|
||||
<div class="hero-content">
|
||||
<div class="hero-poster-card">
|
||||
<img id="hero-poster" src="" alt="">
|
||||
</div>
|
||||
<div class="hero-text">
|
||||
<h1 class="hero-title" id="hero-title">Loading...</h1>
|
||||
<div class="hero-meta">
|
||||
<span class="score-badge" id="hero-score"></span>
|
||||
<span id="hero-year"></span>
|
||||
<span id="hero-type"></span>
|
||||
</div>
|
||||
<p class="hero-desc" id="hero-desc"></p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-primary" id="read-btn">Read Now</button>
|
||||
<button class="btn-blur">+ Add to Library</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<section class="section">
|
||||
<div class="section-header"><div class="section-title">Trending Books</div></div>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button>
|
||||
<div class="carousel" id="trending"></div>
|
||||
<button class="scroll-btn right" onclick="scrollCarousel('trending', 1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="section-header"><div class="section-title">All Time Popular</div></div>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollCarousel('popular', -1)">‹</button>
|
||||
<div class="carousel" id="popular"></div>
|
||||
<button class="scroll-btn right" onclick="scrollCarousel('popular', 1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
322
views/index.html
Normal file
322
views/index.html
Normal file
@@ -0,0 +1,322 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>StreamFlow</title>
|
||||
<link rel="stylesheet" href="../public/home.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar" id="navbar">
|
||||
<div class="nav-brand">
|
||||
<div class="brand-icon">SF</div>
|
||||
StreamFlow
|
||||
</div>
|
||||
|
||||
<div class="nav-center">
|
||||
<button class="nav-button active" onclick="window.location.href='/'">Anime</button>
|
||||
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
|
||||
<button class="nav-button" onclick="window.location.href='/art'">Gallery</button>
|
||||
<button class="nav-button">Schedule</button>
|
||||
<button class="nav-button">My List</button>
|
||||
<button class="nav-button">Marketplace</button>
|
||||
</div>
|
||||
|
||||
<div class="search-wrapper">
|
||||
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
|
||||
<input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
|
||||
<!-- Search Results Dropdown -->
|
||||
<div class="search-results" id="search-results"></div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<div class="hero-wrapper">
|
||||
<div class="hero-background">
|
||||
<img id="hero-bg-media" src="" alt="">
|
||||
<div id="player" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120vw; height: 120vh; pointer-events: none; opacity: 0; transition: opacity 1s;"></div>
|
||||
</div>
|
||||
<div class="hero-vignette"></div>
|
||||
|
||||
<div class="hero-content">
|
||||
<div class="hero-poster-card">
|
||||
<div class="skeleton poster-skeleton" id="hero-poster-skeleton"></div>
|
||||
<img id="hero-poster" src="" alt="" style="display: none;" onload="this.style.display='block'; document.getElementById('hero-poster-skeleton').style.display='none'">
|
||||
</div>
|
||||
<div class="hero-text">
|
||||
<div id="hero-loading-ui">
|
||||
<div class="skeleton title-skeleton"></div>
|
||||
<div class="skeleton text-skeleton" style="width: 40%"></div>
|
||||
<div class="skeleton text-skeleton" style="width: 100%; height: 4em;"></div>
|
||||
</div>
|
||||
|
||||
<div id="hero-real-ui" style="display: none;">
|
||||
<h1 class="hero-title" id="hero-title"></h1>
|
||||
<div class="hero-meta">
|
||||
<span class="score-badge" id="hero-score"></span>
|
||||
<span id="hero-year"></span>
|
||||
<span id="hero-type"></span>
|
||||
</div>
|
||||
<p class="hero-desc" id="hero-desc"></p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-primary" id="watch-btn">Watch Now</button>
|
||||
<button class="btn-blur">+ Add to List</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<!-- Trending -->
|
||||
<section class="section">
|
||||
<div class="section-header"><div class="section-title">Trending This Season</div></div>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button>
|
||||
<div class="carousel" id="trending">
|
||||
<!-- Loading Skeletons -->
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
</div>
|
||||
<button class="scroll-btn right" onclick="scrollCarousel('trending', 1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Top Airing -->
|
||||
<section class="section">
|
||||
<div class="section-header"><div class="section-title">Top Airing Now</div></div>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollCarousel('top-airing', -1)">‹</button>
|
||||
<div class="carousel" id="top-airing">
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
</div>
|
||||
<button class="scroll-btn right" onclick="scrollCarousel('top-airing', 1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// --- SEARCH LOGIC ---
|
||||
const searchInput = document.getElementById('search-input');
|
||||
const searchResults = document.getElementById('search-results');
|
||||
let searchTimeout;
|
||||
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
const query = e.target.value;
|
||||
clearTimeout(searchTimeout);
|
||||
if (query.length < 2) {
|
||||
searchResults.classList.remove('active');
|
||||
searchResults.innerHTML = '';
|
||||
searchInput.style.borderRadius = '99px';
|
||||
return;
|
||||
}
|
||||
searchTimeout = setTimeout(() => {
|
||||
fetchLocalSearch(query);
|
||||
}, 300);
|
||||
});
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('.search-wrapper')) {
|
||||
searchResults.classList.remove('active');
|
||||
searchInput.style.borderRadius = '99px';
|
||||
}
|
||||
});
|
||||
|
||||
async function fetchLocalSearch(query) {
|
||||
try {
|
||||
const res = await fetch(`/api/search/local?q=${encodeURIComponent(query)}`);
|
||||
const data = await res.json();
|
||||
renderSearchResults(data.results);
|
||||
} catch (err) { console.error("Search Error:", err); }
|
||||
}
|
||||
|
||||
function renderSearchResults(results) {
|
||||
searchResults.innerHTML = '';
|
||||
if (results.length === 0) {
|
||||
searchResults.innerHTML = '<div style="padding:1rem; color:#888; text-align:center">No results found</div>';
|
||||
} else {
|
||||
results.forEach(anime => {
|
||||
const title = getTitle(anime);
|
||||
const img = anime.coverImage.medium || anime.coverImage.large;
|
||||
const rating = anime.averageScore ? `${anime.averageScore}%` : 'N/A';
|
||||
const year = anime.seasonYear || '';
|
||||
const format = anime.format || 'TV';
|
||||
|
||||
const item = document.createElement('a');
|
||||
item.className = 'search-item';
|
||||
item.href = `/anime/${anime.id}`; // DIRECT LINK
|
||||
item.innerHTML = `
|
||||
<img src="${img}" class="search-poster" alt="${title}">
|
||||
<div class="search-info">
|
||||
<div class="search-title">${title}</div>
|
||||
<div class="search-meta">
|
||||
<span class="rating-pill">${rating}</span>
|
||||
<span>• ${year}</span>
|
||||
<span>• ${format}</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
searchResults.appendChild(item);
|
||||
});
|
||||
}
|
||||
searchResults.classList.add('active');
|
||||
searchInput.style.borderRadius = '12px 12px 0 0';
|
||||
}
|
||||
|
||||
// --- CAROUSEL LOGIC ---
|
||||
function scrollCarousel(id, direction) {
|
||||
const container = document.getElementById(id);
|
||||
if(container) {
|
||||
const scrollAmount = container.clientWidth * 0.75;
|
||||
container.scrollBy({ left: direction * scrollAmount, behavior: 'smooth' });
|
||||
}
|
||||
}
|
||||
|
||||
// --- MAIN APP LOGIC ---
|
||||
let trendingAnimes = [];
|
||||
let currentHeroIndex = 0;
|
||||
let player;
|
||||
let heroInterval;
|
||||
|
||||
var tag = document.createElement('script');
|
||||
tag.src = "https://www.youtube.com/iframe_api";
|
||||
var firstScriptTag = document.getElementsByTagName('script')[0];
|
||||
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
||||
|
||||
function onYouTubeIframeAPIReady() {
|
||||
player = new YT.Player('player', {
|
||||
height: '100%', width: '100%',
|
||||
playerVars: { 'autoplay': 1, 'controls': 0, 'mute': 1, 'loop': 1, 'showinfo': 0, 'modestbranding': 1 },
|
||||
events: { 'onReady': (e) => { e.target.mute(); if(trendingAnimes.length) updateHeroVideo(trendingAnimes[currentHeroIndex]); } }
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchContent(isUpdate = false) {
|
||||
try {
|
||||
const trendingRes = await fetch('/api/trending');
|
||||
const trendingData = await trendingRes.json();
|
||||
|
||||
if (trendingData.results && trendingData.results.length > 0) {
|
||||
trendingAnimes = trendingData.results;
|
||||
if (!isUpdate) {
|
||||
updateHeroUI(trendingAnimes[0]);
|
||||
startHeroCycle();
|
||||
}
|
||||
renderList('trending', trendingAnimes);
|
||||
} else if (!isUpdate) {
|
||||
setTimeout(() => fetchContent(false), 2000);
|
||||
}
|
||||
|
||||
const topRes = await fetch('/api/top-airing');
|
||||
const topData = await topRes.json();
|
||||
if (topData.results && topData.results.length > 0) {
|
||||
renderList('top-airing', topData.results);
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
console.error("Fetch Error:", e);
|
||||
if(!isUpdate) setTimeout(() => fetchContent(false), 5000);
|
||||
}
|
||||
}
|
||||
|
||||
function startHeroCycle() {
|
||||
if(heroInterval) clearInterval(heroInterval);
|
||||
heroInterval = setInterval(() => {
|
||||
if(trendingAnimes.length > 0) {
|
||||
currentHeroIndex = (currentHeroIndex + 1) % trendingAnimes.length;
|
||||
updateHeroUI(trendingAnimes[currentHeroIndex]);
|
||||
}
|
||||
}, 10000);
|
||||
}
|
||||
|
||||
function getTitle(anime) {
|
||||
return anime.title.english || anime.title.romaji || "Unknown Title";
|
||||
}
|
||||
|
||||
function updateHeroUI(anime) {
|
||||
if(!anime) return;
|
||||
const title = getTitle(anime);
|
||||
const score = anime.averageScore ? anime.averageScore + '% Match' : 'N/A';
|
||||
const year = anime.seasonYear || '';
|
||||
const type = anime.format || 'TV';
|
||||
const desc = anime.description || 'No description available.';
|
||||
const poster = anime.coverImage ? anime.coverImage.extraLarge : '';
|
||||
const banner = anime.bannerImage || poster;
|
||||
|
||||
document.getElementById('hero-title').innerText = title;
|
||||
document.getElementById('hero-desc').innerHTML = desc;
|
||||
document.getElementById('hero-score').innerText = score;
|
||||
document.getElementById('hero-year').innerText = year;
|
||||
document.getElementById('hero-type').innerText = type;
|
||||
document.getElementById('hero-poster').src = poster;
|
||||
|
||||
// Set Watch Button Link
|
||||
const watchBtn = document.getElementById('watch-btn');
|
||||
if(watchBtn) watchBtn.onclick = () => window.location.href = `/anime/${anime.id}`;
|
||||
|
||||
const bgImg = document.getElementById('hero-bg-media');
|
||||
if(bgImg && bgImg.src !== banner) bgImg.src = banner;
|
||||
|
||||
updateHeroVideo(anime);
|
||||
|
||||
document.getElementById('hero-loading-ui').style.display = 'none';
|
||||
document.getElementById('hero-real-ui').style.display = 'block';
|
||||
}
|
||||
|
||||
function updateHeroVideo(anime) {
|
||||
if (!player || !player.loadVideoById) return;
|
||||
const videoContainer = document.getElementById('player');
|
||||
if (anime.trailer && anime.trailer.site === 'youtube' && anime.trailer.id) {
|
||||
if(player.getVideoData && player.getVideoData().video_id !== anime.trailer.id) {
|
||||
player.loadVideoById(anime.trailer.id);
|
||||
player.mute();
|
||||
}
|
||||
videoContainer.style.opacity = "1";
|
||||
} else {
|
||||
videoContainer.style.opacity = "0";
|
||||
player.stopVideo();
|
||||
}
|
||||
}
|
||||
|
||||
function renderList(id, list) {
|
||||
const container = document.getElementById(id);
|
||||
const firstId = list.length > 0 ? list[0].id : null;
|
||||
const currentFirstId = container.firstElementChild?.dataset?.id;
|
||||
if (currentFirstId && parseInt(currentFirstId) === firstId && container.children.length === list.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = '';
|
||||
list.forEach(anime => {
|
||||
const title = getTitle(anime);
|
||||
const cover = anime.coverImage ? anime.coverImage.large : '';
|
||||
const ep = anime.nextAiringEpisode ? 'Ep ' + anime.nextAiringEpisode.episode : (anime.episodes ? anime.episodes + ' Eps' : 'TV');
|
||||
const score = anime.averageScore || '--';
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.className = 'card';
|
||||
el.dataset.id = anime.id;
|
||||
// CLICK GOES TO ANIME PAGE
|
||||
el.onclick = () => window.location.href = `/anime/${anime.id}`;
|
||||
el.innerHTML = `
|
||||
<div class="card-img-wrap"><img src="${cover}" loading="lazy"></div>
|
||||
<div class="card-content">
|
||||
<h3>${title}</h3>
|
||||
<p>${score}% • ${ep}</p>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(el);
|
||||
});
|
||||
}
|
||||
|
||||
fetchContent();
|
||||
setInterval(() => fetchContent(true), 60000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
296
views/watch.html
Normal file
296
views/watch.html
Normal file
@@ -0,0 +1,296 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<base href="/">
|
||||
<title>StreamFlow Watch</title>
|
||||
<link rel="stylesheet" href="../public/watch.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>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="top-bar">
|
||||
<a href="#" id="back-link" class="back-btn">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
|
||||
Back to Series
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="theater-container">
|
||||
|
||||
<!-- Toolbar -->
|
||||
<div class="player-toolbar">
|
||||
<div class="sd-toggle" id="sd-toggle" data-state="sub" style="display: none;" 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>
|
||||
|
||||
<select id="server-select" class="extension-select" style="display:none;" onchange="loadStream()">
|
||||
<!-- Populated via JS -->
|
||||
</select>
|
||||
|
||||
<select id="extension-select" class="extension-select" onchange="onExtensionChange()">
|
||||
<option value="" disabled selected>Source...</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Video Player -->
|
||||
<div class="video-wrapper">
|
||||
<video id="player" controls crossorigin playsinline poster=""></video>
|
||||
<div id="loading-overlay" class="loading-overlay">
|
||||
<div class="spinner"></div>
|
||||
<span id="loading-text">Select a source...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controls -->
|
||||
<div class="controls-area">
|
||||
<div class="episode-info">
|
||||
<h2 id="anime-title">Loading...</h2>
|
||||
<span id="episode-label">Episode --</span>
|
||||
</div>
|
||||
|
||||
<div class="nav-controls">
|
||||
<button class="nav-btn" id="prev-btn">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
|
||||
Prev
|
||||
</button>
|
||||
<button class="nav-btn" id="next-btn">
|
||||
Next
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const pathParts = window.location.pathname.split('/');
|
||||
const animeId = pathParts[2];
|
||||
const currentEpisode = parseInt(pathParts[3]);
|
||||
|
||||
let audioMode = 'sub';
|
||||
let currentExtension = '';
|
||||
let plyrInstance;
|
||||
let hlsInstance;
|
||||
|
||||
document.getElementById('back-link').href = `/anime/${animeId}`;
|
||||
document.getElementById('episode-label').innerText = `Episode ${currentEpisode}`;
|
||||
|
||||
async function loadMetadata() {
|
||||
try {
|
||||
const res = await fetch(`/api/anime/${animeId}`);
|
||||
const data = await res.json();
|
||||
if(!data.error) {
|
||||
const title = data.title.english || data.title.romaji;
|
||||
document.getElementById('anime-title').innerText = title;
|
||||
document.title = `Watching ${title} - Ep ${currentEpisode}`;
|
||||
}
|
||||
} catch(e) { console.error(e); }
|
||||
}
|
||||
|
||||
async function loadExtensions() {
|
||||
try {
|
||||
const res = await fetch('/api/extensions');
|
||||
const data = await res.json();
|
||||
const select = document.getElementById('extension-select');
|
||||
|
||||
if (data.extensions && data.extensions.length > 0) {
|
||||
data.extensions.forEach(extName => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = extName;
|
||||
opt.innerText = extName;
|
||||
select.appendChild(opt);
|
||||
});
|
||||
} else {
|
||||
select.innerHTML = '<option>No Extensions</option>';
|
||||
select.disabled = true;
|
||||
setLoading("No extensions found in WaifuBoards folder.");
|
||||
}
|
||||
} catch(e) { console.error("Extension Error:", e); }
|
||||
}
|
||||
|
||||
async function onExtensionChange() {
|
||||
const select = document.getElementById('extension-select');
|
||||
currentExtension = select.value;
|
||||
setLoading("Fetching extension settings...");
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/extension/${currentExtension}/settings`);
|
||||
const settings = await res.json();
|
||||
|
||||
const toggle = document.getElementById('sd-toggle');
|
||||
if (settings.supportsDub) {
|
||||
toggle.style.display = 'flex';
|
||||
setAudioMode('sub');
|
||||
} else {
|
||||
toggle.style.display = 'none';
|
||||
setAudioMode('sub');
|
||||
}
|
||||
|
||||
const serverSelect = document.getElementById('server-select');
|
||||
serverSelect.innerHTML = '';
|
||||
if (settings.episodeServers && settings.episodeServers.length > 0) {
|
||||
settings.episodeServers.forEach(srv => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = srv;
|
||||
opt.innerText = srv;
|
||||
serverSelect.appendChild(opt);
|
||||
});
|
||||
serverSelect.style.display = 'block';
|
||||
} else {
|
||||
serverSelect.style.display = 'none';
|
||||
}
|
||||
|
||||
loadStream();
|
||||
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setLoading("Failed to load extension settings.");
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAudioMode() {
|
||||
const newMode = audioMode === 'sub' ? 'dub' : 'sub';
|
||||
setAudioMode(newMode);
|
||||
loadStream();
|
||||
}
|
||||
|
||||
function setAudioMode(mode) {
|
||||
audioMode = mode;
|
||||
const toggle = document.getElementById('sd-toggle');
|
||||
const subOpt = document.getElementById('opt-sub');
|
||||
const dubOpt = document.getElementById('opt-dub');
|
||||
|
||||
toggle.setAttribute('data-state', mode);
|
||||
if (mode === 'sub') {
|
||||
subOpt.classList.add('active');
|
||||
dubOpt.classList.remove('active');
|
||||
} else {
|
||||
subOpt.classList.remove('active');
|
||||
dubOpt.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
async function loadStream() {
|
||||
if (!currentExtension) return;
|
||||
|
||||
const serverSelect = document.getElementById('server-select');
|
||||
const server = serverSelect.value || "default";
|
||||
|
||||
setLoading(`Searching & Resolving Stream (${audioMode})...`);
|
||||
|
||||
try {
|
||||
const url = `/api/watch/stream?animeId=${animeId}&episode=${currentEpisode}&server=${server}&category=${audioMode}&ext=${currentExtension}`;
|
||||
const res = await fetch(url);
|
||||
const data = await res.json();
|
||||
|
||||
if (data.error) {
|
||||
setLoading(`Error: ${data.error}`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!data.videoSources || data.videoSources.length === 0) {
|
||||
setLoading("No video sources found.");
|
||||
return;
|
||||
}
|
||||
|
||||
const source = data.videoSources.find(s => s.type === 'm3u8') || data.videoSources[0];
|
||||
|
||||
// --- THE PROXY URL CONTRUCTION ---
|
||||
const headers = data.headers || {};
|
||||
let proxyUrl = `/api/proxy?url=${encodeURIComponent(source.url)}`;
|
||||
|
||||
// Append headers to proxy URL
|
||||
if (headers['Referer']) proxyUrl += `&referer=${encodeURIComponent(headers['Referer'])}`;
|
||||
if (headers['Origin']) proxyUrl += `&origin=${encodeURIComponent(headers['Origin'])}`;
|
||||
if (headers['User-Agent']) proxyUrl += `&userAgent=${encodeURIComponent(headers['User-Agent'])}`;
|
||||
|
||||
playVideo(proxyUrl, data.videoSources[0].subtitles);
|
||||
|
||||
document.getElementById('loading-overlay').style.display = 'none';
|
||||
|
||||
} catch (err) {
|
||||
setLoading("Stream Error. Check console.");
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
function playVideo(url, subtitles) {
|
||||
const video = document.getElementById('player');
|
||||
|
||||
if (Hls.isSupported()) {
|
||||
if (hlsInstance) hlsInstance.destroy();
|
||||
hlsInstance = new Hls({
|
||||
xhrSetup: (xhr, url) => {
|
||||
xhr.withCredentials = false; // Ensure no cookies are sent to proxy
|
||||
}
|
||||
});
|
||||
hlsInstance.loadSource(url);
|
||||
hlsInstance.attachMedia(video);
|
||||
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
video.src = url;
|
||||
}
|
||||
|
||||
// Ensure clean slate
|
||||
if (plyrInstance) plyrInstance.destroy();
|
||||
|
||||
// 1. Define Tracks
|
||||
// We attach them to the DOM or Plyr configuration so Plyr recognizes them.
|
||||
// The 'captions' option in Plyr can also take a 'src' via config if we were not using HLS.js directly attached.
|
||||
// However, since we use HLS.js attached to the video tag, Plyr wraps that video tag.
|
||||
|
||||
// Clear existing tracks
|
||||
while (video.firstChild) {
|
||||
video.removeChild(video.firstChild);
|
||||
}
|
||||
|
||||
// Add Track Elements
|
||||
if (subtitles && subtitles.length > 0) {
|
||||
subtitles.forEach(sub => {
|
||||
const track = document.createElement('track');
|
||||
track.kind = 'captions';
|
||||
track.label = sub.language;
|
||||
track.srclang = sub.language.slice(0, 2).toLowerCase();
|
||||
track.src = sub.url; // These are usually VTT/SRT links
|
||||
if (sub.default || sub.language.toLowerCase().includes('english')) {
|
||||
track.default = true;
|
||||
}
|
||||
video.appendChild(track);
|
||||
});
|
||||
}
|
||||
|
||||
// 2. Initialize Plyr
|
||||
plyrInstance = new Plyr(video, {
|
||||
captions: { active: true, update: true, language: 'en' }, // Enable by default
|
||||
controls: ['play-large', 'play', 'progress', 'current-time', 'duration', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
|
||||
settings: ['captions', 'quality', 'speed']
|
||||
});
|
||||
|
||||
video.play().catch(e => console.log("Auto-play blocked"));
|
||||
}
|
||||
|
||||
function setLoading(msg) {
|
||||
const overlay = document.getElementById('loading-overlay');
|
||||
const text = document.getElementById('loading-text');
|
||||
overlay.style.display = 'flex';
|
||||
text.innerText = msg;
|
||||
}
|
||||
|
||||
document.getElementById('prev-btn').onclick = () => {
|
||||
if(currentEpisode > 1) window.location.href = `/watch/${animeId}/${currentEpisode - 1}`;
|
||||
};
|
||||
document.getElementById('next-btn').onclick = () => {
|
||||
window.location.href = `/watch/${animeId}/${currentEpisode + 1}`;
|
||||
};
|
||||
if(currentEpisode <= 1) document.getElementById('prev-btn').disabled = true;
|
||||
|
||||
loadMetadata();
|
||||
loadExtensions();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user