code organisation & refactor
This commit is contained in:
@@ -7,7 +7,7 @@ The official recode repo, its private no one should know about this or have the
|
||||
| -----|------| ------ |
|
||||
| Book Reader | ✅ | N/A |
|
||||
| Multi book provider loading | ✅ | N/A |
|
||||
| Better Code Organization | Not Done | N/A |
|
||||
| Better Code Organization | ✅ | N/A |
|
||||
| Mobile View | Not Done | N/A |
|
||||
| Gallery | Not Done | N/A |
|
||||
| Anime Schedule (Release Calendar for the month) | Not Done | N/A |
|
||||
|
||||
|
Before Width: | Height: | Size: 123 KiB After Width: | Height: | Size: 123 KiB |
574
server.js
574
server.js
@@ -1,574 +1,46 @@
|
||||
const fastify = require('fastify')({ logger: true });
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const os = require('os');
|
||||
const { animeMetadata } = require('./src/metadata/anilist');
|
||||
const sqlite3 = require('sqlite3').verbose();
|
||||
|
||||
// --- DATABASE CONNECTION ---
|
||||
const DB_PATH = path.join(__dirname, 'src', 'metadata', 'anilist_anime.db');
|
||||
const db = new sqlite3.Database(DB_PATH, sqlite3.OPEN_READONLY, (err) => {
|
||||
if (err) console.error("Database Error:", err.message);
|
||||
else console.log("Connected to local AniList database.");
|
||||
});
|
||||
const { initDatabase } = require('./src/shared/database');
|
||||
const { loadExtensions } = require('./src/shared/extensions');
|
||||
|
||||
// --- EXTENSION LOADER ---
|
||||
const extensions = new Map();
|
||||
const viewsRoutes = require('./src/views/views.routes');
|
||||
const animeRoutes = require('./src/anime/anime.routes');
|
||||
const booksRoutes = require('./src/books/books.routes');
|
||||
const proxyRoutes = require('./src/shared/proxy/proxy.routes');
|
||||
|
||||
async function loadExtensions() {
|
||||
const homeDir = os.homedir();
|
||||
const extensionsDir = path.join(homeDir, 'WaifuBoards', 'extensions');
|
||||
|
||||
if (!fs.existsSync(extensionsDir)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const files = await fs.promises.readdir(extensionsDir);
|
||||
for (const file of files) {
|
||||
if (file.endsWith('.js')) {
|
||||
const filePath = path.join(extensionsDir, file);
|
||||
try {
|
||||
delete require.cache[require.resolve(filePath)];
|
||||
const ExtensionClass = require(filePath);
|
||||
const instance = typeof ExtensionClass === 'function'
|
||||
? new ExtensionClass()
|
||||
: (ExtensionClass.default ? new ExtensionClass.default() : null);
|
||||
|
||||
if (instance && (instance.type === "anime-board" || instance.type === "book-board")) {
|
||||
const name = instance.constructor.name;
|
||||
extensions.set(name, instance);
|
||||
console.log(`Loaded Extension: ${name}`);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`Failed to load extension ${file}:`, e);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Extension Scan Error:", err);
|
||||
}
|
||||
}
|
||||
|
||||
loadExtensions();
|
||||
|
||||
// --- STATIC & VIEWS ---
|
||||
fastify.register(require('@fastify/static'), {
|
||||
root: path.join(__dirname, 'public'),
|
||||
prefix: '/public/',
|
||||
decorateReply: false
|
||||
});
|
||||
|
||||
fastify.get('/', (req, reply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, 'views', 'index.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
fastify.register(require('@fastify/static'), {
|
||||
root: path.join(__dirname, 'views'),
|
||||
prefix: '/views/',
|
||||
decorateReply: false
|
||||
});
|
||||
|
||||
// NEW: Books Page
|
||||
fastify.get('/books', (req, reply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, 'views', 'books.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
fastify.register(require('@fastify/static'), {
|
||||
root: path.join(__dirname, 'src'),
|
||||
prefix: '/src/',
|
||||
decorateReply: false
|
||||
});
|
||||
|
||||
fastify.get('/anime/:id', (req, reply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, 'views', 'anime.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
});
|
||||
|
||||
fastify.get('/watch/:id/:episode', (req, reply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, 'views', 'watch.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
});
|
||||
|
||||
// --- API ENDPOINTS ---
|
||||
|
||||
// NEW: Books API (Manga)
|
||||
fastify.get('/api/books/trending', (req, reply) => {
|
||||
return new Promise((resolve) => {
|
||||
db.all("SELECT full_data FROM trending_books ORDER BY rank ASC LIMIT 10", [], (err, rows) => {
|
||||
if (err || !rows) resolve({ results: [] });
|
||||
else resolve({ results: rows.map(r => JSON.parse(r.full_data)) });
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
fastify.get('/api/books/popular', (req, reply) => {
|
||||
return new Promise((resolve) => {
|
||||
db.all("SELECT full_data FROM popular_books ORDER BY rank ASC LIMIT 10", [], (err, rows) => {
|
||||
if (err || !rows) resolve({ results: [] });
|
||||
else resolve({ results: rows.map(r => JSON.parse(r.full_data)) });
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// ... [Keep previous Anime/Proxy APIs] ...
|
||||
// 1. Proxy
|
||||
fastify.get('/api/proxy', async (req, reply) => {
|
||||
const { url, referer, origin, userAgent } = req.query;
|
||||
if (!url) return reply.code(400).send("No URL provided");
|
||||
|
||||
const headers = {
|
||||
'User-Agent': userAgent || "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
|
||||
'Accept': '*/*',
|
||||
'Accept-Language': 'en-US,en;q=0.9'
|
||||
};
|
||||
if (referer) headers['Referer'] = referer;
|
||||
if (origin) headers['Origin'] = origin;
|
||||
|
||||
try {
|
||||
const response = await fetch(url, { headers, redirect: 'follow' });
|
||||
if (!response.ok) return reply.code(response.status).send(`Proxy Error: ${response.statusText}`);
|
||||
|
||||
reply.header('Access-Control-Allow-Origin', '*');
|
||||
reply.header('Access-Control-Allow-Methods', 'GET, OPTIONS');
|
||||
const contentType = response.headers.get('content-type');
|
||||
if (contentType) reply.header('Content-Type', contentType);
|
||||
|
||||
const isM3U8 = (contentType && (contentType.includes('mpegurl'))) || url.includes('.m3u8');
|
||||
|
||||
if (isM3U8) {
|
||||
const text = await response.text();
|
||||
const baseUrl = new URL(response.url);
|
||||
const newText = text.replace(/^(?!#)(?!\s*$).+/gm, (line) => {
|
||||
line = line.trim();
|
||||
let absoluteUrl;
|
||||
try { absoluteUrl = new URL(line, baseUrl).href; } catch(e) { return line; }
|
||||
const proxyParams = new URLSearchParams();
|
||||
proxyParams.set('url', absoluteUrl);
|
||||
if (referer) proxyParams.set('referer', referer);
|
||||
if (origin) proxyParams.set('origin', origin);
|
||||
if (userAgent) proxyParams.set('userAgent', userAgent);
|
||||
return `/api/proxy?${proxyParams.toString()}`;
|
||||
});
|
||||
return newText;
|
||||
} else {
|
||||
const { Readable } = require('stream');
|
||||
return reply.send(Readable.fromWeb(response.body));
|
||||
}
|
||||
} catch (err) {
|
||||
fastify.log.error(err);
|
||||
return reply.code(500).send("Internal Server Error");
|
||||
}
|
||||
});
|
||||
|
||||
// Extensions
|
||||
fastify.get('/api/extensions', async (req, reply) => {
|
||||
return { extensions: Array.from(extensions.keys()) };
|
||||
});
|
||||
|
||||
fastify.get('/api/extension/:name/settings', async (req, reply) => {
|
||||
const name = req.params.name;
|
||||
const ext = extensions.get(name);
|
||||
if (!ext) return { error: "Extension not found" };
|
||||
if (!ext.getSettings) return { episodeServers: ["default"], supportsDub: false };
|
||||
return ext.getSettings();
|
||||
});
|
||||
|
||||
fastify.get('/api/watch/stream', async (req, reply) => {
|
||||
const { animeId, episode, server, category, ext } = req.query;
|
||||
const extension = extensions.get(ext);
|
||||
if (!extension) return { error: "Extension not found" };
|
||||
|
||||
const animeData = await new Promise((resolve) => {
|
||||
db.get("SELECT full_data FROM anime WHERE id = ?", [animeId], (err, row) => {
|
||||
if (err || !row) resolve(null);
|
||||
else resolve(JSON.parse(row.full_data));
|
||||
});
|
||||
});
|
||||
|
||||
if (!animeData) return { error: "Anime metadata not found" };
|
||||
|
||||
try {
|
||||
const searchOptions = {
|
||||
query: animeData.title.english || animeData.title.romaji,
|
||||
dub: category === 'dub',
|
||||
media: {
|
||||
romajiTitle: animeData.title.romaji,
|
||||
englishTitle: animeData.title.english || "",
|
||||
startDate: animeData.startDate || { year: 0, month: 0, day: 0 }
|
||||
}
|
||||
};
|
||||
|
||||
const searchResults = await extension.search(searchOptions);
|
||||
if (!searchResults || searchResults.length === 0) return { error: "Anime not found on provider" };
|
||||
|
||||
const bestMatch = searchResults[0];
|
||||
const episodes = await extension.findEpisodes(bestMatch.id);
|
||||
const targetEp = episodes.find(e => e.number === parseInt(episode));
|
||||
|
||||
if (!targetEp) return { error: "Episode not found" };
|
||||
|
||||
const serverName = server || "default";
|
||||
const streamData = await extension.findEpisodeServer(targetEp, serverName);
|
||||
return streamData;
|
||||
} catch (err) {
|
||||
return { error: err.message };
|
||||
}
|
||||
});
|
||||
|
||||
fastify.get('/api/anime/:id', (req, reply) => {
|
||||
const id = req.params.id;
|
||||
return new Promise((resolve) => {
|
||||
db.get("SELECT full_data FROM anime WHERE id = ?", [id], (err, row) => {
|
||||
if(err) resolve({ error: "Database error" });
|
||||
else if (!row) resolve({ error: "Anime not found" });
|
||||
else resolve(JSON.parse(row.full_data));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
fastify.get('/api/search/books', async (req, reply) => {
|
||||
const query = req.query.q;
|
||||
if (!query || query.length < 2) return { results: [] };
|
||||
|
||||
// A. Local DB Search (Prioritized)
|
||||
const dbResults = await new Promise((resolve) => {
|
||||
const sql = `SELECT full_data FROM books WHERE full_data LIKE ? LIMIT 50`;
|
||||
db.all(sql, [`%${query}%`], (err, rows) => {
|
||||
if (err || !rows) resolve([]);
|
||||
else {
|
||||
try {
|
||||
const results = rows.map(row => JSON.parse(row.full_data));
|
||||
const clean = results.filter(book => {
|
||||
const searchTerms = [
|
||||
book.title.english,
|
||||
book.title.romaji,
|
||||
book.title.native,
|
||||
...(book.synonyms || [])
|
||||
].filter(Boolean).map(t => t.toLowerCase());
|
||||
return searchTerms.some(term => term.includes(query.toLowerCase()));
|
||||
});
|
||||
resolve(clean.slice(0, 10));
|
||||
} catch (e) { resolve([]); }
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (dbResults.length > 0) {
|
||||
return { results: dbResults };
|
||||
}
|
||||
|
||||
// B. Live AniList Fallback (If Local DB is empty/missing data)
|
||||
try {
|
||||
console.log(`[Books] Local DB miss for "${query}", fetching live...`);
|
||||
const gql = `
|
||||
query ($search: String) {
|
||||
Page(page: 1, perPage: 5) {
|
||||
media(search: $search, type: MANGA, isAdult: false) {
|
||||
id title { romaji english native }
|
||||
coverImage { extraLarge large }
|
||||
bannerImage description averageScore format
|
||||
seasonYear startDate { year }
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
const response = await fetch('https://graphql.anilist.co', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
|
||||
body: JSON.stringify({ query: gql, variables: { search: query } })
|
||||
});
|
||||
|
||||
const liveData = await response.json();
|
||||
if (liveData.data && liveData.data.Page.media.length > 0) {
|
||||
return { results: liveData.data.Page.media };
|
||||
}
|
||||
} catch(e) {
|
||||
console.error("Live Search Error:", e.message);
|
||||
}
|
||||
|
||||
// C. Extensions Fallback (If not on AniList at all)
|
||||
let extResults = [];
|
||||
for (const [name, ext] of extensions) {
|
||||
// UPDATED: Check for 'book-board' or 'manga-board'
|
||||
if ((ext.type === 'book-board' || ext.type === 'manga-board') && ext.search) {
|
||||
try {
|
||||
console.log(`[${name}] Searching for book: ${query}`);
|
||||
const matches = await ext.search({
|
||||
query: query,
|
||||
media: {
|
||||
romajiTitle: query,
|
||||
englishTitle: query,
|
||||
startDate: { year: 0, month: 0, day: 0 }
|
||||
}
|
||||
});
|
||||
|
||||
if (matches && matches.length > 0) {
|
||||
extResults = matches.map(m => ({
|
||||
id: m.id,
|
||||
title: { romaji: m.title, english: m.title },
|
||||
coverImage: { large: m.image || '' },
|
||||
// UPDATED: Try to get score from extension if available
|
||||
averageScore: m.rating || m.score || null,
|
||||
format: 'MANGA',
|
||||
seasonYear: null,
|
||||
isExtensionResult: true
|
||||
}));
|
||||
break;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`Extension search failed for ${name}:`, e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return { results: extResults };
|
||||
});
|
||||
|
||||
fastify.get('/api/book/:id/chapters', async (req, reply) => {
|
||||
const id = req.params.id;
|
||||
|
||||
// Helper to get metadata (Local or Live)
|
||||
let bookData = await new Promise((resolve) => {
|
||||
db.get("SELECT full_data FROM books WHERE id = ?", [id], (err, row) => {
|
||||
if (err || !row) resolve(null);
|
||||
else resolve(JSON.parse(row.full_data));
|
||||
});
|
||||
});
|
||||
|
||||
if (!bookData) {
|
||||
try {
|
||||
const query = `query ($id: Int) { Media(id: $id, type: MANGA) { title { romaji english } startDate { year month day } } }`;
|
||||
const res = await fetch('https://graphql.anilist.co', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ query, variables: { id: parseInt(id) } })
|
||||
});
|
||||
const d = await res.json();
|
||||
if(d.data?.Media) bookData = d.data.Media;
|
||||
} catch(e) {}
|
||||
}
|
||||
|
||||
if (!bookData) return { chapters: [] };
|
||||
|
||||
const titles = [bookData.title.english, bookData.title.romaji].filter(t => t);
|
||||
const searchTitle = titles[0]; // Prefer English, fallback to Romaji
|
||||
|
||||
const allChapters = [];
|
||||
|
||||
// Create an array of promises for all matching extensions
|
||||
const searchPromises = Array.from(extensions.entries())
|
||||
.filter(([name, ext]) => (ext.type === 'book-board' || ext.type === 'manga-board') && ext.search && ext.findChapters)
|
||||
.map(async ([name, ext]) => {
|
||||
try {
|
||||
console.log(`[${name}] Searching chapters for: ${searchTitle}`);
|
||||
|
||||
// Pass strict search options
|
||||
const matches = await ext.search({
|
||||
query: searchTitle,
|
||||
media: {
|
||||
romajiTitle: bookData.title.romaji,
|
||||
englishTitle: bookData.title.english,
|
||||
startDate: bookData.startDate
|
||||
}
|
||||
});
|
||||
|
||||
if (matches && matches.length > 0) {
|
||||
// Use the first match to find chapters
|
||||
const best = matches[0];
|
||||
const chaps = await ext.findChapters(best.id);
|
||||
|
||||
if (chaps && chaps.length > 0) {
|
||||
console.log(`[${name}] Found ${chaps.length} chapters.`);
|
||||
chaps.forEach(ch => {
|
||||
const num = parseFloat(ch.number);
|
||||
// Add to aggregator with provider tag
|
||||
allChapters.push({
|
||||
id: ch.id,
|
||||
number: num,
|
||||
title: ch.title,
|
||||
date: ch.releaseDate,
|
||||
provider: name
|
||||
});
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log(`[${name}] No matches found for book.`);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`Failed to fetch chapters from ${name}:`, e.message);
|
||||
}
|
||||
});
|
||||
|
||||
// Wait for all providers to finish (in parallel)
|
||||
await Promise.all(searchPromises);
|
||||
|
||||
// Sort all aggregated chapters by number
|
||||
const sortedChapters = allChapters.sort((a, b) => a.number - b.number);
|
||||
|
||||
return { chapters: sortedChapters };
|
||||
});
|
||||
|
||||
fastify.get('/api/book/:bookId/:chapter/:provider', async (req, reply) => {
|
||||
const { bookId, chapter, provider } = req.params;
|
||||
|
||||
const ext = extensions.get(provider);
|
||||
if (!ext)
|
||||
return reply.code(404).send({ error: "Provider not found" });
|
||||
|
||||
let chapterId = decodeURIComponent(chapter);
|
||||
let chapterTitle = null;
|
||||
let chapterNumber = null;
|
||||
|
||||
const index = parseInt(chapter);
|
||||
const chapterList = await fetch(
|
||||
`http://localhost:3000/api/book/${bookId}/chapters`
|
||||
).then(r => r.json());
|
||||
|
||||
if (!chapterList?.chapters)
|
||||
return reply.code(404).send({ error: "Chapters not found" });
|
||||
|
||||
const providerChapters = chapterList.chapters.filter(
|
||||
c => c.provider === provider
|
||||
);
|
||||
|
||||
if (!providerChapters[index])
|
||||
return reply.code(404).send({ error: "Chapter index out of range" });
|
||||
|
||||
const selected = providerChapters[index];
|
||||
|
||||
chapterId = selected.id;
|
||||
chapterTitle = selected.title || null;
|
||||
chapterNumber = selected.number || index;
|
||||
|
||||
|
||||
try {
|
||||
if (ext.mediaType === "manga") {
|
||||
const pages = await ext.findChapterPages(chapterId);
|
||||
return reply.send({
|
||||
type: "manga",
|
||||
chapterId,
|
||||
title: chapterTitle,
|
||||
number: chapterNumber,
|
||||
provider,
|
||||
pages
|
||||
});
|
||||
}
|
||||
|
||||
if (ext.mediaType === "ln") {
|
||||
const content = await ext.findChapterPages(chapterId);
|
||||
return reply.send({
|
||||
type: "ln",
|
||||
chapterId,
|
||||
title: chapterTitle,
|
||||
number: chapterNumber,
|
||||
provider,
|
||||
content
|
||||
});
|
||||
}
|
||||
|
||||
return reply.code(400).send({ error: "Unknown mediaType" });
|
||||
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
return reply.code(500).send({ error: "Error loading chapter" });
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
fastify.get('/api/book/:id', async (req, reply) => {
|
||||
const id = req.params.id;
|
||||
|
||||
// 1. Try Local DB
|
||||
const bookData = await new Promise((resolve) => {
|
||||
db.get("SELECT full_data FROM books WHERE id = ?", [id], (err, row) => {
|
||||
if(err || !row) resolve(null);
|
||||
else resolve(JSON.parse(row.full_data));
|
||||
});
|
||||
});
|
||||
|
||||
if (bookData) return bookData;
|
||||
|
||||
// 2. Live Fallback (If not in DB)
|
||||
try {
|
||||
console.log(`[Book] Local miss for ID ${id}, fetching live...`);
|
||||
const query = `
|
||||
query ($id: Int) {
|
||||
Media(id: $id, type: MANGA) {
|
||||
id idMal title { romaji english native userPreferred } type format status description
|
||||
startDate { year month day } endDate { year month day } season seasonYear seasonInt
|
||||
episodes duration chapters volumes countryOfOrigin isLicensed source hashtag
|
||||
trailer { id site thumbnail } updatedAt coverImage { extraLarge large medium color }
|
||||
bannerImage genres synonyms averageScore meanScore popularity isLocked trending favourites
|
||||
tags { id name description category rank isGeneralSpoiler isMediaSpoiler isAdult userId }
|
||||
relations { edges { relationType node { id title { romaji } } } }
|
||||
characters(page: 1, perPage: 10) { nodes { id name { full } } }
|
||||
studios { nodes { id name isAnimationStudio } }
|
||||
isAdult nextAiringEpisode { airingAt timeUntilAiring episode }
|
||||
externalLinks { url site }
|
||||
rankings { id rank type format year season allTime context }
|
||||
}
|
||||
}`;
|
||||
|
||||
// CRITICAL FIX: Ensure ID is parsed as Integer for AniList GraphQL
|
||||
const response = await fetch('https://graphql.anilist.co', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
|
||||
body: JSON.stringify({ query, variables: { id: parseInt(id) } })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (data.data && data.data.Media) {
|
||||
return data.data.Media;
|
||||
}
|
||||
return { error: "Book not found on AniList" };
|
||||
} catch(e) {
|
||||
fastify.log.error(e);
|
||||
return { error: "Fetch error" };
|
||||
}
|
||||
});
|
||||
|
||||
fastify.get('/book/:id', (req, reply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, 'views', 'book.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
});
|
||||
|
||||
fastify.get('/api/search/local', (req, reply) => {
|
||||
const query = req.query.q;
|
||||
if (!query || query.length < 2) return { results: [] };
|
||||
// Increased limit to 50 here as well for consistency
|
||||
const sql = `SELECT full_data FROM anime WHERE full_data LIKE ? LIMIT 50`;
|
||||
return new Promise((resolve) => {
|
||||
db.all(sql, [`%${query}%`], (err, rows) => {
|
||||
if (err) resolve({ results: [] });
|
||||
else {
|
||||
try {
|
||||
const results = rows.map(row => JSON.parse(row.full_data));
|
||||
const cleanResults = results.filter(anime => {
|
||||
const q = query.toLowerCase();
|
||||
const titles = [
|
||||
anime.title.english,
|
||||
anime.title.romaji,
|
||||
anime.title.native,
|
||||
...(anime.synonyms || [])
|
||||
].filter(Boolean).map(t => t.toLowerCase());
|
||||
return titles.some(t => t.includes(q));
|
||||
});
|
||||
resolve({ results: cleanResults.slice(0, 10) });
|
||||
} catch (e) {
|
||||
resolve({ results: [] });
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
fastify.get('/api/trending', (req, reply) => {
|
||||
return new Promise((resolve) => db.all("SELECT full_data FROM trending ORDER BY rank ASC LIMIT 10", [], (err, rows) => resolve({ results: rows ? rows.map(r => JSON.parse(r.full_data)) : [] })));
|
||||
});
|
||||
|
||||
fastify.get('/api/top-airing', (req, reply) => {
|
||||
return new Promise((resolve) => db.all("SELECT full_data FROM top_airing ORDER BY rank ASC LIMIT 10", [], (err, rows) => resolve({ results: rows ? rows.map(r => JSON.parse(r.full_data)) : [] })));
|
||||
});
|
||||
|
||||
fastify.get('/read/:id/:chapter/:provider', (req, reply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, 'views', 'reader.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
});
|
||||
fastify.register(viewsRoutes);
|
||||
fastify.register(animeRoutes, { prefix: '/api' });
|
||||
fastify.register(booksRoutes, { prefix: '/api' });
|
||||
fastify.register(proxyRoutes, { prefix: '/api' });
|
||||
|
||||
const start = async () => {
|
||||
try {
|
||||
initDatabase();
|
||||
await loadExtensions();
|
||||
|
||||
await fastify.listen({ port: 3000, host: '0.0.0.0' });
|
||||
console.log(`Server running at http://localhost:3000`);
|
||||
|
||||
animeMetadata();
|
||||
} catch (err) {
|
||||
fastify.log.error(err);
|
||||
|
||||
97
src/anime/anime.controller.js
Normal file
97
src/anime/anime.controller.js
Normal file
@@ -0,0 +1,97 @@
|
||||
const animeService = require('./anime.service');
|
||||
const { getExtension, getExtensionsList } = require('../shared/extensions');
|
||||
|
||||
async function getAnime(req, reply) {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const anime = await animeService.getAnimeById(id);
|
||||
return anime;
|
||||
} catch (err) {
|
||||
return { error: "Database error" };
|
||||
}
|
||||
}
|
||||
|
||||
async function getTrending(req, reply) {
|
||||
try {
|
||||
const results = await animeService.getTrendingAnime();
|
||||
return { results };
|
||||
} catch (err) {
|
||||
return { results: [] };
|
||||
}
|
||||
}
|
||||
|
||||
async function getTopAiring(req, reply) {
|
||||
try {
|
||||
const results = await animeService.getTopAiringAnime();
|
||||
return { results };
|
||||
} catch (err) {
|
||||
return { results: [] };
|
||||
}
|
||||
}
|
||||
|
||||
async function searchLocal(req, reply) {
|
||||
try {
|
||||
const query = req.query.q;
|
||||
const results = await animeService.searchAnimeLocal(query);
|
||||
return { results };
|
||||
} catch (err) {
|
||||
return { results: [] };
|
||||
}
|
||||
}
|
||||
|
||||
async function getExtensions(req, reply) {
|
||||
return { extensions: getExtensionsList() };
|
||||
}
|
||||
|
||||
async function getExtensionSettings(req, reply) {
|
||||
const { name } = req.params;
|
||||
const ext = getExtension(name);
|
||||
|
||||
if (!ext) {
|
||||
return { error: "Extension not found" };
|
||||
}
|
||||
|
||||
if (!ext.getSettings) {
|
||||
return { episodeServers: ["default"], supportsDub: false };
|
||||
}
|
||||
|
||||
return ext.getSettings();
|
||||
}
|
||||
|
||||
async function getWatchStream(req, reply) {
|
||||
try {
|
||||
const { animeId, episode, server, category, ext } = req.query;
|
||||
|
||||
const extension = getExtension(ext);
|
||||
if (!extension) {
|
||||
return { error: "Extension not found" };
|
||||
}
|
||||
|
||||
const animeData = await animeService.getAnimeById(animeId);
|
||||
if (animeData.error) {
|
||||
return { error: "Anime metadata not found" };
|
||||
}
|
||||
|
||||
const streamData = await animeService.getStreamData(
|
||||
extension,
|
||||
animeData,
|
||||
episode,
|
||||
server,
|
||||
category
|
||||
);
|
||||
|
||||
return streamData;
|
||||
} catch (err) {
|
||||
return { error: err.message };
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
getAnime,
|
||||
getTrending,
|
||||
getTopAiring,
|
||||
searchLocal,
|
||||
getExtensions,
|
||||
getExtensionSettings,
|
||||
getWatchStream
|
||||
};
|
||||
14
src/anime/anime.routes.js
Normal file
14
src/anime/anime.routes.js
Normal file
@@ -0,0 +1,14 @@
|
||||
const controller = require('./anime.controller');
|
||||
|
||||
async function animeRoutes(fastify, options) {
|
||||
|
||||
fastify.get('/anime/:id', controller.getAnime);
|
||||
fastify.get('/trending', controller.getTrending);
|
||||
fastify.get('/top-airing', controller.getTopAiring);
|
||||
fastify.get('/search/local', controller.searchLocal);
|
||||
fastify.get('/extensions', controller.getExtensions);
|
||||
fastify.get('/extension/:name/settings', controller.getExtensionSettings);
|
||||
fastify.get('/watch/stream', controller.getWatchStream);
|
||||
}
|
||||
|
||||
module.exports = animeRoutes;
|
||||
85
src/anime/anime.service.js
Normal file
85
src/anime/anime.service.js
Normal file
@@ -0,0 +1,85 @@
|
||||
const { queryOne, queryAll } = require('../shared/database');
|
||||
|
||||
async function getAnimeById(id) {
|
||||
const row = await queryOne("SELECT full_data FROM anime WHERE id = ?", [id]);
|
||||
|
||||
if (!row) {
|
||||
return { error: "Anime not found" };
|
||||
}
|
||||
|
||||
return JSON.parse(row.full_data);
|
||||
}
|
||||
|
||||
async function getTrendingAnime() {
|
||||
const rows = await queryAll("SELECT full_data FROM trending ORDER BY rank ASC LIMIT 10");
|
||||
return rows.map(r => JSON.parse(r.full_data));
|
||||
}
|
||||
|
||||
async function getTopAiringAnime() {
|
||||
const rows = await queryAll("SELECT full_data FROM top_airing ORDER BY rank ASC LIMIT 10");
|
||||
return rows.map(r => JSON.parse(r.full_data));
|
||||
}
|
||||
|
||||
async function searchAnimeLocal(query) {
|
||||
if (!query || query.length < 2) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const sql = `SELECT full_data FROM anime WHERE full_data LIKE ? LIMIT 50`;
|
||||
const rows = await queryAll(sql, [`%${query}%`]);
|
||||
|
||||
const results = rows.map(row => JSON.parse(row.full_data));
|
||||
|
||||
const cleanResults = results.filter(anime => {
|
||||
const q = query.toLowerCase();
|
||||
const titles = [
|
||||
anime.title.english,
|
||||
anime.title.romaji,
|
||||
anime.title.native,
|
||||
...(anime.synonyms || [])
|
||||
].filter(Boolean).map(t => t.toLowerCase());
|
||||
|
||||
return titles.some(t => t.includes(q));
|
||||
});
|
||||
|
||||
return cleanResults.slice(0, 10);
|
||||
}
|
||||
|
||||
async function getStreamData(extension, animeData, episode, server, category) {
|
||||
const searchOptions = {
|
||||
query: animeData.title.english || animeData.title.romaji,
|
||||
dub: category === 'dub',
|
||||
media: {
|
||||
romajiTitle: animeData.title.romaji,
|
||||
englishTitle: animeData.title.english || "",
|
||||
startDate: animeData.startDate || { year: 0, month: 0, day: 0 }
|
||||
}
|
||||
};
|
||||
|
||||
const searchResults = await extension.search(searchOptions);
|
||||
|
||||
if (!searchResults || searchResults.length === 0) {
|
||||
throw new Error("Anime not found on provider");
|
||||
}
|
||||
|
||||
const bestMatch = searchResults[0];
|
||||
const episodes = await extension.findEpisodes(bestMatch.id);
|
||||
const targetEp = episodes.find(e => e.number === parseInt(episode));
|
||||
|
||||
if (!targetEp) {
|
||||
throw new Error("Episode not found");
|
||||
}
|
||||
|
||||
const serverName = server || "default";
|
||||
const streamData = await extension.findEpisodeServer(targetEp, serverName);
|
||||
|
||||
return streamData;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
getAnimeById,
|
||||
getTrendingAnime,
|
||||
getTopAiringAnime,
|
||||
searchAnimeLocal,
|
||||
getStreamData
|
||||
};
|
||||
90
src/books/books.controller.js
Normal file
90
src/books/books.controller.js
Normal file
@@ -0,0 +1,90 @@
|
||||
const booksService = require('./books.service');
|
||||
|
||||
async function getBook(req, reply) {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const book = await booksService.getBookById(id);
|
||||
return book;
|
||||
} catch (err) {
|
||||
return { error: "Fetch error" };
|
||||
}
|
||||
}
|
||||
|
||||
async function getTrending(req, reply) {
|
||||
try {
|
||||
const results = await booksService.getTrendingBooks();
|
||||
return { results };
|
||||
} catch (err) {
|
||||
return { results: [] };
|
||||
}
|
||||
}
|
||||
|
||||
async function getPopular(req, reply) {
|
||||
try {
|
||||
const results = await booksService.getPopularBooks();
|
||||
return { results };
|
||||
} catch (err) {
|
||||
return { results: [] };
|
||||
}
|
||||
}
|
||||
|
||||
async function searchBooks(req, reply) {
|
||||
try {
|
||||
const query = req.query.q;
|
||||
|
||||
const dbResults = await booksService.searchBooksLocal(query);
|
||||
if (dbResults.length > 0) {
|
||||
return { results: dbResults };
|
||||
}
|
||||
|
||||
console.log(`[Books] Local DB miss for "${query}", fetching live...`);
|
||||
const anilistResults = await booksService.searchBooksAniList(query);
|
||||
if (anilistResults.length > 0) {
|
||||
return { results: anilistResults };
|
||||
}
|
||||
|
||||
const extResults = await booksService.searchBooksExtensions(query);
|
||||
return { results: extResults };
|
||||
|
||||
} catch(e) {
|
||||
console.error("Search Error:", e.message);
|
||||
return { results: [] };
|
||||
}
|
||||
}
|
||||
|
||||
async function getChapters(req, reply) {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const chapters = await booksService.getChaptersForBook(id);
|
||||
return chapters;
|
||||
} catch (err) {
|
||||
return { chapters: [] };
|
||||
}
|
||||
}
|
||||
|
||||
async function getChapterContent(req, reply) {
|
||||
try {
|
||||
const { bookId, chapter, provider } = req.params;
|
||||
|
||||
const content = await booksService.getChapterContent(
|
||||
bookId,
|
||||
chapter,
|
||||
provider
|
||||
);
|
||||
|
||||
return reply.send(content);
|
||||
} catch (err) {
|
||||
console.error("getChapterContent error:", err.message);
|
||||
|
||||
return reply.code(500).send({ error: "Error loading chapter" });
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
getBook,
|
||||
getTrending,
|
||||
getPopular,
|
||||
searchBooks,
|
||||
getChapters,
|
||||
getChapterContent
|
||||
};
|
||||
13
src/books/books.routes.js
Normal file
13
src/books/books.routes.js
Normal file
@@ -0,0 +1,13 @@
|
||||
const controller = require('./books.controller');
|
||||
|
||||
async function booksRoutes(fastify, options) {
|
||||
|
||||
fastify.get('/book/:id', controller.getBook);
|
||||
fastify.get('/books/trending', controller.getTrending);
|
||||
fastify.get('/books/popular', controller.getPopular);
|
||||
fastify.get('/search/books', controller.searchBooks);
|
||||
fastify.get('/book/:id/chapters', controller.getChapters);
|
||||
fastify.get('/book/:bookId/:chapter/:provider', controller.getChapterContent);
|
||||
}
|
||||
|
||||
module.exports = booksRoutes;
|
||||
289
src/books/books.service.js
Normal file
289
src/books/books.service.js
Normal file
@@ -0,0 +1,289 @@
|
||||
const { queryOne, queryAll } = require('../shared/database');
|
||||
const { getAllExtensions } = require('../shared/extensions');
|
||||
|
||||
async function getBookById(id) {
|
||||
const row = await queryOne("SELECT full_data FROM books WHERE id = ?", [id]);
|
||||
|
||||
if (row) {
|
||||
return JSON.parse(row.full_data);
|
||||
}
|
||||
|
||||
try {
|
||||
console.log(`[Book] Local miss for ID ${id}, fetching live...`);
|
||||
const query = `
|
||||
query ($id: Int) {
|
||||
Media(id: $id, type: MANGA) {
|
||||
id idMal title { romaji english native userPreferred } type format status description
|
||||
startDate { year month day } endDate { year month day } season seasonYear seasonInt
|
||||
episodes duration chapters volumes countryOfOrigin isLicensed source hashtag
|
||||
trailer { id site thumbnail } updatedAt coverImage { extraLarge large medium color }
|
||||
bannerImage genres synonyms averageScore meanScore popularity isLocked trending favourites
|
||||
tags { id name description category rank isGeneralSpoiler isMediaSpoiler isAdult userId }
|
||||
relations { edges { relationType node { id title { romaji } } } }
|
||||
characters(page: 1, perPage: 10) { nodes { id name { full } } }
|
||||
studios { nodes { id name isAnimationStudio } }
|
||||
isAdult nextAiringEpisode { airingAt timeUntilAiring episode }
|
||||
externalLinks { url site }
|
||||
rankings { id rank type format year season allTime context }
|
||||
}
|
||||
}`;
|
||||
|
||||
const response = await fetch('https://graphql.anilist.co', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
|
||||
body: JSON.stringify({ query, variables: { id: parseInt(id) } })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (data.data && data.data.Media) {
|
||||
return data.data.Media;
|
||||
}
|
||||
} catch(e) {
|
||||
console.error("Fetch error:", e);
|
||||
}
|
||||
|
||||
return { error: "Book not found" };
|
||||
}
|
||||
|
||||
async function getTrendingBooks() {
|
||||
const rows = await queryAll("SELECT full_data FROM trending_books ORDER BY rank ASC LIMIT 10");
|
||||
return rows.map(r => JSON.parse(r.full_data));
|
||||
}
|
||||
|
||||
async function getPopularBooks() {
|
||||
const rows = await queryAll("SELECT full_data FROM popular_books ORDER BY rank ASC LIMIT 10");
|
||||
return rows.map(r => JSON.parse(r.full_data));
|
||||
}
|
||||
|
||||
async function searchBooksLocal(query) {
|
||||
if (!query || query.length < 2) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const sql = `SELECT full_data FROM books WHERE full_data LIKE ? LIMIT 50`;
|
||||
const rows = await queryAll(sql, [`%${query}%`]);
|
||||
|
||||
const results = rows.map(row => JSON.parse(row.full_data));
|
||||
|
||||
const clean = results.filter(book => {
|
||||
const searchTerms = [
|
||||
book.title.english,
|
||||
book.title.romaji,
|
||||
book.title.native,
|
||||
...(book.synonyms || [])
|
||||
].filter(Boolean).map(t => t.toLowerCase());
|
||||
|
||||
return searchTerms.some(term => term.includes(query.toLowerCase()));
|
||||
});
|
||||
|
||||
return clean.slice(0, 10);
|
||||
}
|
||||
|
||||
async function searchBooksAniList(query) {
|
||||
const gql = `
|
||||
query ($search: String) {
|
||||
Page(page: 1, perPage: 5) {
|
||||
media(search: $search, type: MANGA, isAdult: false) {
|
||||
id title { romaji english native }
|
||||
coverImage { extraLarge large }
|
||||
bannerImage description averageScore format
|
||||
seasonYear startDate { year }
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
const response = await fetch('https://graphql.anilist.co', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
|
||||
body: JSON.stringify({ query: gql, variables: { search: query } })
|
||||
});
|
||||
|
||||
const liveData = await response.json();
|
||||
|
||||
if (liveData.data && liveData.data.Page.media.length > 0) {
|
||||
return liveData.data.Page.media;
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
|
||||
async function searchBooksExtensions(query) {
|
||||
const extensions = getAllExtensions();
|
||||
|
||||
for (const [name, ext] of extensions) {
|
||||
if ((ext.type === 'book-board' || ext.type === 'manga-board') && ext.search) {
|
||||
try {
|
||||
console.log(`[${name}] Searching for book: ${query}`);
|
||||
const matches = await ext.search({
|
||||
query: query,
|
||||
media: {
|
||||
romajiTitle: query,
|
||||
englishTitle: query,
|
||||
startDate: { year: 0, month: 0, day: 0 }
|
||||
}
|
||||
});
|
||||
|
||||
if (matches && matches.length > 0) {
|
||||
return matches.map(m => ({
|
||||
id: m.id,
|
||||
title: { romaji: m.title, english: m.title },
|
||||
coverImage: { large: m.image || '' },
|
||||
averageScore: m.rating || m.score || null,
|
||||
format: 'MANGA',
|
||||
seasonYear: null,
|
||||
isExtensionResult: true
|
||||
}));
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`Extension search failed for ${name}:`, e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
|
||||
async function getChaptersForBook(id) {
|
||||
let bookData = await queryOne("SELECT full_data FROM books WHERE id = ?", [id])
|
||||
.then(row => row ? JSON.parse(row.full_data) : null)
|
||||
.catch(() => null);
|
||||
|
||||
if (!bookData) {
|
||||
try {
|
||||
const query = `query ($id: Int) { Media(id: $id, type: MANGA) { title { romaji english } startDate { year month day } } }`;
|
||||
const res = await fetch('https://graphql.anilist.co', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ query, variables: { id: parseInt(id) } })
|
||||
});
|
||||
const d = await res.json();
|
||||
if(d.data?.Media) bookData = d.data.Media;
|
||||
} catch(e) {}
|
||||
}
|
||||
|
||||
if (!bookData) return { chapters: [] };
|
||||
|
||||
const titles = [bookData.title.english, bookData.title.romaji].filter(t => t);
|
||||
const searchTitle = titles[0];
|
||||
|
||||
const allChapters = [];
|
||||
const extensions = getAllExtensions();
|
||||
|
||||
const searchPromises = Array.from(extensions.entries())
|
||||
.filter(([name, ext]) => (ext.type === 'book-board' || ext.type === 'manga-board') && ext.search && ext.findChapters)
|
||||
.map(async ([name, ext]) => {
|
||||
try {
|
||||
console.log(`[${name}] Searching chapters for: ${searchTitle}`);
|
||||
|
||||
const matches = await ext.search({
|
||||
query: searchTitle,
|
||||
media: {
|
||||
romajiTitle: bookData.title.romaji,
|
||||
englishTitle: bookData.title.english,
|
||||
startDate: bookData.startDate
|
||||
}
|
||||
});
|
||||
|
||||
if (matches && matches.length > 0) {
|
||||
const best = matches[0];
|
||||
const chaps = await ext.findChapters(best.id);
|
||||
|
||||
if (chaps && chaps.length > 0) {
|
||||
console.log(`[${name}] Found ${chaps.length} chapters.`);
|
||||
chaps.forEach(ch => {
|
||||
const num = parseFloat(ch.number);
|
||||
allChapters.push({
|
||||
id: ch.id,
|
||||
number: num,
|
||||
title: ch.title,
|
||||
date: ch.releaseDate,
|
||||
provider: name
|
||||
});
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log(`[${name}] No matches found for book.`);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`Failed to fetch chapters from ${name}:`, e.message);
|
||||
}
|
||||
});
|
||||
|
||||
await Promise.all(searchPromises);
|
||||
|
||||
return { chapters: allChapters.sort((a, b) => a.number - b.number) };
|
||||
}
|
||||
|
||||
async function getChapterContent(bookId, chapterIndex, providerName) {
|
||||
const extensions = getAllExtensions();
|
||||
const ext = extensions.get(providerName);
|
||||
|
||||
if (!ext) {
|
||||
throw new Error("Provider not found");
|
||||
}
|
||||
|
||||
const chapterList = await getChaptersForBook(bookId);
|
||||
|
||||
if (!chapterList?.chapters || chapterList.chapters.length === 0) {
|
||||
throw new Error("Chapters not found");
|
||||
}
|
||||
|
||||
const providerChapters = chapterList.chapters.filter(c => c.provider === providerName);
|
||||
const index = parseInt(chapterIndex, 10);
|
||||
|
||||
if (Number.isNaN(index)) {
|
||||
throw new Error("Invalid chapter index");
|
||||
}
|
||||
|
||||
if (!providerChapters[index]) {
|
||||
throw new Error("Chapter index out of range");
|
||||
}
|
||||
|
||||
const selectedChapter = providerChapters[index];
|
||||
|
||||
const chapterId = selectedChapter.id;
|
||||
const chapterTitle = selectedChapter.title || null;
|
||||
const chapterNumber = typeof selectedChapter.number === 'number' ? selectedChapter.number : index;
|
||||
|
||||
try {
|
||||
if (ext.mediaType === "manga") {
|
||||
const pages = await ext.findChapterPages(chapterId);
|
||||
return {
|
||||
type: "manga",
|
||||
chapterId,
|
||||
title: chapterTitle,
|
||||
number: chapterNumber,
|
||||
provider: providerName,
|
||||
pages
|
||||
};
|
||||
}
|
||||
|
||||
if (ext.mediaType === "ln") {
|
||||
const content = await ext.findChapterPages(chapterId);
|
||||
return {
|
||||
type: "ln",
|
||||
chapterId,
|
||||
title: chapterTitle,
|
||||
number: chapterNumber,
|
||||
provider: providerName,
|
||||
content
|
||||
};
|
||||
}
|
||||
|
||||
throw new Error("Unknown mediaType");
|
||||
} catch (err) {
|
||||
console.error(`[Chapter] Error loading from ${providerName}:`, err && err.message ? err.message : err);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
getBookById,
|
||||
getTrendingBooks,
|
||||
getPopularBooks,
|
||||
searchBooksLocal,
|
||||
searchBooksAniList,
|
||||
searchBooksExtensions,
|
||||
getChaptersForBook,
|
||||
getChapterContent
|
||||
};
|
||||
@@ -2,13 +2,11 @@ const sqlite3 = require('sqlite3').verbose();
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
|
||||
// --- CONFIGURATION ---
|
||||
const DB_PATH = path.join(__dirname, 'anilist_anime.db');
|
||||
const REQUESTS_PER_MINUTE = 20; // 20 RPM is safe (AniList limit is 90)
|
||||
const REQUESTS_PER_MINUTE = 20;
|
||||
const DELAY_MS = (60000 / REQUESTS_PER_MINUTE);
|
||||
const FEATURED_REFRESH_RATE = 8 * 60 * 1000; // 8 Minutes
|
||||
const FEATURED_REFRESH_RATE = 8 * 60 * 1000;
|
||||
|
||||
// Ensure directory exists
|
||||
const dir = path.dirname(DB_PATH);
|
||||
if (!fs.existsSync(dir)) {
|
||||
fs.mkdirSync(dir, { recursive: true });
|
||||
@@ -16,16 +14,13 @@ if (!fs.existsSync(dir)) {
|
||||
|
||||
const db = new sqlite3.Database(DB_PATH);
|
||||
|
||||
// --- DATABASE SETUP ---
|
||||
function initDB() {
|
||||
return new Promise((resolve, reject) => {
|
||||
db.serialize(() => {
|
||||
// 1. Anime Tables
|
||||
db.run(`CREATE TABLE IF NOT EXISTS anime (id INTEGER PRIMARY KEY, title TEXT, updatedAt INTEGER, full_data JSON)`);
|
||||
db.run(`CREATE TABLE IF NOT EXISTS trending (rank INTEGER PRIMARY KEY, id INTEGER, full_data JSON)`);
|
||||
db.run(`CREATE TABLE IF NOT EXISTS top_airing (rank INTEGER PRIMARY KEY, id INTEGER, full_data JSON)`);
|
||||
|
||||
// 2. Books Tables (Manga/LN)
|
||||
db.run(`CREATE TABLE IF NOT EXISTS books (id INTEGER PRIMARY KEY, title TEXT, updatedAt INTEGER, full_data JSON)`);
|
||||
db.run(`CREATE TABLE IF NOT EXISTS trending_books (rank INTEGER PRIMARY KEY, id INTEGER, full_data JSON)`);
|
||||
db.run(`CREATE TABLE IF NOT EXISTS popular_books (rank INTEGER PRIMARY KEY, id INTEGER, full_data JSON)`, (err) => {
|
||||
@@ -36,9 +31,7 @@ function initDB() {
|
||||
});
|
||||
}
|
||||
|
||||
// --- QUERIES ---
|
||||
|
||||
// Exhaustive list of fields
|
||||
const MEDIA_FIELDS = `
|
||||
id
|
||||
idMal
|
||||
@@ -170,7 +163,6 @@ query ($sort: [MediaSort], $type: MediaType, $status: MediaStatus) {
|
||||
}
|
||||
`;
|
||||
|
||||
// --- NETWORK HELPERS ---
|
||||
async function sleep(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
@@ -211,7 +203,6 @@ async function fetchGraphQL(query, variables) {
|
||||
}
|
||||
}
|
||||
|
||||
// --- FUNCTIONS ---
|
||||
|
||||
function saveMediaBatch(tableName, mediaList) {
|
||||
return new Promise((resolve, reject) => {
|
||||
@@ -259,7 +250,6 @@ function getLocalCount(tableName) {
|
||||
return new Promise((resolve) => db.get(`SELECT COUNT(*) as count FROM ${tableName}`, (err, row) => resolve(row ? row.count : 0)));
|
||||
}
|
||||
|
||||
// --- LOOPS ---
|
||||
|
||||
async function startFeaturedLoop() {
|
||||
console.log(`✨ Starting Featured Content Loop (Refreshes every ${FEATURED_REFRESH_RATE / 60000} mins)`);
|
||||
@@ -267,28 +257,24 @@ async function startFeaturedLoop() {
|
||||
const runUpdate = async () => {
|
||||
console.log("🔄 Refreshing Featured tables (Anime & Books)...");
|
||||
|
||||
// 1. Anime Trending
|
||||
const animeTrending = await fetchGraphQL(FEATURED_QUERY, { sort: "TRENDING_DESC", type: "ANIME" });
|
||||
if (animeTrending && animeTrending.media) {
|
||||
await updateFeaturedTable('trending', animeTrending.media);
|
||||
console.log(` ✅ Updated Anime Trending.`);
|
||||
}
|
||||
|
||||
// 2. Anime Top Airing
|
||||
const animeTop = await fetchGraphQL(FEATURED_QUERY, { sort: "SCORE_DESC", type: "ANIME", status: "RELEASING" });
|
||||
if (animeTop && animeTop.media) {
|
||||
await updateFeaturedTable('top_airing', animeTop.media);
|
||||
console.log(` ✅ Updated Anime Top Airing.`);
|
||||
}
|
||||
|
||||
// 3. Books Trending
|
||||
const mangaTrending = await fetchGraphQL(FEATURED_QUERY, { sort: "TRENDING_DESC", type: "MANGA" });
|
||||
if (mangaTrending && mangaTrending.media) {
|
||||
await updateFeaturedTable('trending_books', mangaTrending.media);
|
||||
console.log(` ✅ Updated Books Trending.`);
|
||||
}
|
||||
|
||||
// 4. Books Popular
|
||||
const mangaPop = await fetchGraphQL(FEATURED_QUERY, { sort: "POPULARITY_DESC", type: "MANGA" });
|
||||
if (mangaPop && mangaPop.media) {
|
||||
await updateFeaturedTable('popular_books', mangaPop.media);
|
||||
@@ -343,12 +329,10 @@ async function startScraper(type, tableName) {
|
||||
}
|
||||
}
|
||||
|
||||
// --- MAIN ENTRY ---
|
||||
async function animeMetadata() {
|
||||
await initDB();
|
||||
|
||||
// Start loops
|
||||
startFeaturedLoop();
|
||||
startFeaturedLoop();
|
||||
startScraper('ANIME', 'anime');
|
||||
startScraper('MANGA', 'books');
|
||||
}
|
||||
|
||||
178
src/scripts/anime/anime.js
Normal file
178
src/scripts/anime/anime.js
Normal file
@@ -0,0 +1,178 @@
|
||||
const animeId = window.location.pathname.split('/').pop();
|
||||
let player;
|
||||
|
||||
let totalEpisodes = 0;
|
||||
let currentPage = 1;
|
||||
const itemsPerPage = 12;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
const title = data.title.english || data.title.romaji;
|
||||
document.title = `${title} | WaifuBoard`;
|
||||
document.getElementById('title').innerText = title;
|
||||
document.getElementById('poster').src = data.coverImage.extraLarge;
|
||||
|
||||
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>`;
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('watch-btn').onclick = () => {
|
||||
window.location.href = `/watch/${animeId}/1`;
|
||||
};
|
||||
|
||||
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;">`;
|
||||
}
|
||||
|
||||
|
||||
if (data.nextAiringEpisode) {
|
||||
totalEpisodes = data.nextAiringEpisode.episode - 1;
|
||||
} else {
|
||||
totalEpisodes = data.episodes || 12;
|
||||
}
|
||||
|
||||
totalEpisodes = Math.min(Math.max(totalEpisodes, 1), 5000);
|
||||
|
||||
renderEpisodes();
|
||||
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
function handleDescription(text) {
|
||||
const tmp = document.createElement("DIV");
|
||||
tmp.innerHTML = text;
|
||||
const cleanText = tmp.textContent || tmp.innerText || "";
|
||||
|
||||
const sentences = cleanText.match(/[^\.!\?]+[\.!\?]+/g) || [cleanText];
|
||||
|
||||
document.getElementById('full-description').innerHTML = text;
|
||||
|
||||
if (sentences.length > 4) {
|
||||
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';
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById('desc-modal').classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
document.getElementById('desc-modal').addEventListener('click', (e) => {
|
||||
if (e.target.id === 'desc-modal') closeModal();
|
||||
});
|
||||
|
||||
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;
|
||||
|
||||
document.getElementById('pagination-controls').style.display = 'flex';
|
||||
}
|
||||
|
||||
function changePage(delta) {
|
||||
currentPage += delta;
|
||||
renderEpisodes();
|
||||
}
|
||||
|
||||
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) {
|
||||
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';
|
||||
}
|
||||
});
|
||||
|
||||
loadAnime();
|
||||
210
src/scripts/anime/animes.js
Normal file
210
src/scripts/anime/animes.js
Normal file
@@ -0,0 +1,210 @@
|
||||
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}`;
|
||||
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';
|
||||
}
|
||||
|
||||
function scrollCarousel(id, direction) {
|
||||
const container = document.getElementById(id);
|
||||
if(container) {
|
||||
const scrollAmount = container.clientWidth * 0.75;
|
||||
container.scrollBy({ left: direction * scrollAmount, behavior: 'smooth' });
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
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;
|
||||
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);
|
||||
211
src/scripts/anime/player.js
Normal file
211
src/scripts/anime/player.js
Normal file
@@ -0,0 +1,211 @@
|
||||
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];
|
||||
|
||||
const headers = data.headers || {};
|
||||
let proxyUrl = `/api/proxy?url=${encodeURIComponent(source.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;
|
||||
}
|
||||
});
|
||||
hlsInstance.loadSource(url);
|
||||
hlsInstance.attachMedia(video);
|
||||
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
video.src = url;
|
||||
}
|
||||
|
||||
if (plyrInstance) plyrInstance.destroy();
|
||||
|
||||
while (video.firstChild) {
|
||||
video.removeChild(video.firstChild);
|
||||
}
|
||||
|
||||
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;
|
||||
if (sub.default || sub.language.toLowerCase().includes('english')) {
|
||||
track.default = true;
|
||||
}
|
||||
video.appendChild(track);
|
||||
});
|
||||
}
|
||||
|
||||
plyrInstance = new Plyr(video, {
|
||||
captions: { active: true, update: true, language: 'en' },
|
||||
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();
|
||||
@@ -1,12 +1,11 @@
|
||||
const bookId = window.location.pathname.split('/').pop();
|
||||
let allChapters = []; // Stores all fetched chapters
|
||||
let filteredChapters = []; // Stores currently displayed chapters (filtered)
|
||||
let allChapters = [];
|
||||
let filteredChapters = [];
|
||||
let currentPage = 1;
|
||||
const itemsPerPage = 12;
|
||||
|
||||
async function init() {
|
||||
try {
|
||||
// 1. Load Metadata
|
||||
const res = await fetch(`/api/book/${bookId}`);
|
||||
const data = await res.json();
|
||||
|
||||
@@ -16,7 +15,6 @@ async function init() {
|
||||
return;
|
||||
}
|
||||
|
||||
// Populate Hero Elements
|
||||
const title = data.title.english || data.title.romaji;
|
||||
document.title = `${title} | WaifuBoard Books`;
|
||||
|
||||
@@ -63,7 +61,6 @@ async function init() {
|
||||
const heroBgEl = document.getElementById('hero-bg');
|
||||
if (heroBgEl) heroBgEl.src = data.bannerImage || img;
|
||||
|
||||
// 2. Load Chapters
|
||||
loadChapters();
|
||||
|
||||
} catch (err) {
|
||||
@@ -82,7 +79,7 @@ async function loadChapters() {
|
||||
const data = await res.json();
|
||||
|
||||
allChapters = data.chapters || [];
|
||||
filteredChapters = [...allChapters]; // Initially, show all
|
||||
filteredChapters = [...allChapters];
|
||||
|
||||
const totalEl = document.getElementById('total-chapters');
|
||||
|
||||
@@ -94,10 +91,8 @@ async function loadChapters() {
|
||||
|
||||
if (totalEl) totalEl.innerText = `${allChapters.length} Found`;
|
||||
|
||||
// Populate Provider Filter
|
||||
populateProviderFilter();
|
||||
|
||||
// Read Button Action (Start at filtered Ch 1)
|
||||
const readBtn = document.getElementById('read-start-btn');
|
||||
if (readBtn && filteredChapters.length > 0) {
|
||||
readBtn.onclick = () => openReader(filteredChapters[0].id);
|
||||
@@ -115,14 +110,11 @@ function populateProviderFilter() {
|
||||
const select = document.getElementById('provider-filter');
|
||||
if (!select) return;
|
||||
|
||||
// Extract unique providers
|
||||
const providers = [...new Set(allChapters.map(ch => ch.provider))];
|
||||
|
||||
// Only show filter if there are actual providers found
|
||||
if (providers.length > 0) {
|
||||
select.style.display = 'inline-block';
|
||||
|
||||
// Clear existing options except "All"
|
||||
select.innerHTML = '<option value="all">All Providers</option>';
|
||||
|
||||
providers.forEach(prov => {
|
||||
@@ -132,7 +124,6 @@ function populateProviderFilter() {
|
||||
select.appendChild(opt);
|
||||
});
|
||||
|
||||
// Attach Event Listener
|
||||
select.onchange = (e) => {
|
||||
const selected = e.target.value;
|
||||
if (selected === 'all') {
|
||||
@@ -140,7 +131,7 @@ function populateProviderFilter() {
|
||||
} else {
|
||||
filteredChapters = allChapters.filter(ch => ch.provider === selected);
|
||||
}
|
||||
currentPage = 1; // Reset to page 1 on filter change
|
||||
currentPage = 1;
|
||||
renderTable();
|
||||
};
|
||||
}
|
||||
@@ -208,7 +199,6 @@ function updatePagination() {
|
||||
}
|
||||
|
||||
function openReader(bookId, chapterId, provider) {
|
||||
localStorage.setItem('reader_prev_url', window.location.href);
|
||||
const c = encodeURIComponent(chapterId);
|
||||
const p = encodeURIComponent(provider);
|
||||
window.location.href = `/read/${bookId}/${c}/${p}`;
|
||||
@@ -2,14 +2,12 @@ let trendingBooks = [];
|
||||
let currentHeroIndex = 0;
|
||||
let heroInterval;
|
||||
|
||||
// --- NAVBAR SCROLL ---
|
||||
window.addEventListener('scroll', () => {
|
||||
const nav = document.getElementById('navbar');
|
||||
if (window.scrollY > 50) nav.classList.add('scrolled');
|
||||
else nav.classList.remove('scrolled');
|
||||
});
|
||||
|
||||
// --- SEARCH LOGIC ---
|
||||
const searchInput = document.getElementById('search-input');
|
||||
const searchResults = document.getElementById('search-results');
|
||||
let searchTimeout;
|
||||
@@ -25,13 +23,11 @@ searchInput.addEventListener('input', (e) => {
|
||||
return;
|
||||
}
|
||||
|
||||
// Debounce 300ms
|
||||
searchTimeout = setTimeout(() => {
|
||||
fetchBookSearch(query);
|
||||
}, 300);
|
||||
});
|
||||
|
||||
// Hide results on outside click
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('.search-wrapper')) {
|
||||
searchResults.classList.remove('active');
|
||||
@@ -65,7 +61,7 @@ function renderSearchResults(results) {
|
||||
|
||||
const item = document.createElement('a');
|
||||
item.className = 'search-item';
|
||||
item.href = `/book/${book.id}`; // Direct navigation link
|
||||
item.href = `/book/${book.id}`;
|
||||
|
||||
item.innerHTML = `
|
||||
<img src="${img}" class="search-poster" alt="${title}">
|
||||
@@ -87,7 +83,6 @@ function renderSearchResults(results) {
|
||||
searchInput.style.borderRadius = '12px 12px 0 0';
|
||||
}
|
||||
|
||||
// --- CAROUSEL LOGIC ---
|
||||
function scrollCarousel(id, direction) {
|
||||
const container = document.getElementById(id);
|
||||
if(container) {
|
||||
@@ -96,10 +91,8 @@ function scrollCarousel(id, direction) {
|
||||
}
|
||||
}
|
||||
|
||||
// --- FETCH DATA ---
|
||||
async function init() {
|
||||
try {
|
||||
// Fetch Trending
|
||||
const res = await fetch('/api/books/trending');
|
||||
const data = await res.json();
|
||||
|
||||
@@ -110,7 +103,6 @@ async function init() {
|
||||
startHeroCycle();
|
||||
}
|
||||
|
||||
// Fetch Popular
|
||||
const resPop = await fetch('/api/books/popular');
|
||||
const dataPop = await resPop.json();
|
||||
if (dataPop.results) renderList('popular', dataPop.results);
|
||||
@@ -120,7 +112,6 @@ async function init() {
|
||||
}
|
||||
}
|
||||
|
||||
// --- HERO LOGIC ---
|
||||
function startHeroCycle() {
|
||||
if(heroInterval) clearInterval(heroInterval);
|
||||
heroInterval = setInterval(() => {
|
||||
@@ -147,18 +138,15 @@ function updateHeroUI(book) {
|
||||
const heroPoster = document.getElementById('hero-poster');
|
||||
if(heroPoster) heroPoster.src = poster;
|
||||
|
||||
// Update background
|
||||
const bg = document.getElementById('hero-bg-media');
|
||||
if(bg) bg.src = banner;
|
||||
|
||||
// Setup Read Now Button
|
||||
const readBtn = document.getElementById('read-btn');
|
||||
if (readBtn) {
|
||||
readBtn.onclick = () => window.location.href = `/book/${book.id}`;
|
||||
}
|
||||
}
|
||||
|
||||
// --- RENDER LIST ---
|
||||
function renderList(id, list) {
|
||||
const container = document.getElementById(id);
|
||||
container.innerHTML = '';
|
||||
@@ -172,7 +160,6 @@ function renderList(id, list) {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'card';
|
||||
el.onclick = () => {
|
||||
// Navigate to book page
|
||||
window.location.href = `/book/${book.id}`;
|
||||
};
|
||||
el.innerHTML = `
|
||||
@@ -7,8 +7,6 @@ const chapterLabel = document.getElementById('chapter-label');
|
||||
const prevBtn = document.getElementById('prev-chapter');
|
||||
const nextBtn = document.getElementById('next-chapter');
|
||||
|
||||
const prevUrl = localStorage.getItem('reader_prev_url');
|
||||
|
||||
const lnSettings = document.getElementById('ln-settings');
|
||||
const mangaSettings = document.getElementById('manga-settings');
|
||||
|
||||
@@ -64,7 +62,6 @@ function saveConfig() {
|
||||
}
|
||||
|
||||
function updateUIFromConfig() {
|
||||
// Light Novel
|
||||
document.getElementById('font-size').value = config.ln.fontSize;
|
||||
document.getElementById('font-size-value').textContent = config.ln.fontSize + 'px';
|
||||
|
||||
@@ -78,19 +75,16 @@ function updateUIFromConfig() {
|
||||
document.getElementById('text-color').value = config.ln.textColor;
|
||||
document.getElementById('bg-color').value = config.ln.bg;
|
||||
|
||||
// Text alignment buttons
|
||||
document.querySelectorAll('[data-align]').forEach(btn => {
|
||||
btn.classList.toggle('active', btn.dataset.align === config.ln.textAlign);
|
||||
});
|
||||
|
||||
// Manga
|
||||
document.getElementById('display-mode').value = config.manga.mode;
|
||||
document.getElementById('image-fit').value = config.manga.imageFit;
|
||||
document.getElementById('page-spacing').value = config.manga.spacing;
|
||||
document.getElementById('page-spacing-value').textContent = config.manga.spacing + 'px';
|
||||
document.getElementById('preload-count').value = config.manga.preloadCount;
|
||||
|
||||
// Direction buttons
|
||||
document.querySelectorAll('[data-direction]').forEach(btn => {
|
||||
btn.classList.toggle('active', btn.dataset.direction === config.manga.direction);
|
||||
});
|
||||
@@ -349,7 +343,6 @@ function loadLN(html) {
|
||||
reader.appendChild(div);
|
||||
}
|
||||
|
||||
// Event Listeners - Light Novel
|
||||
document.getElementById('font-size').addEventListener('input', (e) => {
|
||||
config.ln.fontSize = parseInt(e.target.value);
|
||||
document.getElementById('font-size-value').textContent = e.target.value + 'px';
|
||||
@@ -389,7 +382,6 @@ document.getElementById('bg-color').addEventListener('change', (e) => {
|
||||
saveConfig();
|
||||
});
|
||||
|
||||
// Text alignment
|
||||
document.querySelectorAll('[data-align]').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
document.querySelectorAll('[data-align]').forEach(b => b.classList.remove('active'));
|
||||
@@ -400,7 +392,6 @@ document.querySelectorAll('[data-align]').forEach(btn => {
|
||||
});
|
||||
});
|
||||
|
||||
// Presets
|
||||
document.querySelectorAll('[data-preset]').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const preset = btn.dataset.preset;
|
||||
@@ -422,8 +413,6 @@ document.querySelectorAll('[data-preset]').forEach(btn => {
|
||||
});
|
||||
});
|
||||
|
||||
// Event Listeners - Manga
|
||||
|
||||
document.getElementById('display-mode').addEventListener('change', (e) => {
|
||||
config.manga.mode = e.target.value;
|
||||
saveConfig();
|
||||
@@ -448,7 +437,6 @@ document.getElementById('preload-count').addEventListener('change', (e) => {
|
||||
saveConfig();
|
||||
});
|
||||
|
||||
// Direction
|
||||
document.querySelectorAll('[data-direction]').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
document.querySelectorAll('[data-direction]').forEach(b => b.classList.remove('active'));
|
||||
@@ -459,7 +447,6 @@ document.querySelectorAll('[data-direction]').forEach(btn => {
|
||||
});
|
||||
});
|
||||
|
||||
// Navigation
|
||||
prevBtn.addEventListener('click', () => {
|
||||
const newChapter = String(parseInt(chapter) - 1);
|
||||
updateURL(newChapter);
|
||||
@@ -481,12 +468,10 @@ function updateURL(newChapter) {
|
||||
}
|
||||
|
||||
document.getElementById('back-btn').addEventListener('click', () => {
|
||||
const prev = localStorage.getItem('reader_prev_url');
|
||||
if (prev) {
|
||||
window.location.href = prev;
|
||||
} else {
|
||||
history.back();
|
||||
}
|
||||
const parts = window.location.pathname.split('/');
|
||||
|
||||
const mangaId = parts[2];
|
||||
window.location.href = `/book/${mangaId}`;
|
||||
});
|
||||
|
||||
settingsBtn.addEventListener('click', () => {
|
||||
48
src/shared/database.js
Normal file
48
src/shared/database.js
Normal file
@@ -0,0 +1,48 @@
|
||||
const sqlite3 = require('sqlite3').verbose();
|
||||
const path = require('path');
|
||||
|
||||
const DB_PATH = path.join(__dirname, '..', 'metadata', 'anilist_anime.db');
|
||||
let db = null;
|
||||
|
||||
function initDatabase() {
|
||||
db = new sqlite3.Database(DB_PATH, sqlite3.OPEN_READONLY, (err) => {
|
||||
if (err) {
|
||||
console.error("Database Error:", err.message);
|
||||
} else {
|
||||
console.log("Connected to local AniList database.");
|
||||
}
|
||||
});
|
||||
return db;
|
||||
}
|
||||
|
||||
function getDatabase() {
|
||||
if (!db) {
|
||||
throw new Error("Database not initialized. Call initDatabase() first.");
|
||||
}
|
||||
return db;
|
||||
}
|
||||
|
||||
function queryOne(sql, params = []) {
|
||||
return new Promise((resolve, reject) => {
|
||||
getDatabase().get(sql, params, (err, row) => {
|
||||
if (err) reject(err);
|
||||
else resolve(row);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function queryAll(sql, params = []) {
|
||||
return new Promise((resolve, reject) => {
|
||||
getDatabase().all(sql, params, (err, rows) => {
|
||||
if (err) reject(err);
|
||||
else resolve(rows || []);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
initDatabase,
|
||||
getDatabase,
|
||||
queryOne,
|
||||
queryAll
|
||||
};
|
||||
65
src/shared/extensions.js
Normal file
65
src/shared/extensions.js
Normal file
@@ -0,0 +1,65 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const os = require('os');
|
||||
|
||||
const extensions = new Map();
|
||||
|
||||
async function loadExtensions() {
|
||||
const homeDir = os.homedir();
|
||||
const extensionsDir = path.join(homeDir, 'WaifuBoards', 'extensions');
|
||||
|
||||
if (!fs.existsSync(extensionsDir)) {
|
||||
console.log("⚠️ Extensions directory not found, skipping...");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const files = await fs.promises.readdir(extensionsDir);
|
||||
|
||||
for (const file of files) {
|
||||
if (file.endsWith('.js')) {
|
||||
const filePath = path.join(extensionsDir, file);
|
||||
|
||||
try {
|
||||
delete require.cache[require.resolve(filePath)];
|
||||
|
||||
const ExtensionClass = require(filePath);
|
||||
const instance = typeof ExtensionClass === 'function'
|
||||
? new ExtensionClass()
|
||||
: (ExtensionClass.default ? new ExtensionClass.default() : null);
|
||||
|
||||
if (instance && (instance.type === "anime-board" || instance.type === "book-board")) {
|
||||
const name = instance.constructor.name;
|
||||
extensions.set(name, instance);
|
||||
console.log(`📦 Loaded Extension: ${name}`);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`❌ Failed to load extension ${file}:`, e.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
console.log(`✅ Loaded ${extensions.size} extensions`);
|
||||
} catch (err) {
|
||||
console.error("❌ Extension Scan Error:", err);
|
||||
}
|
||||
}
|
||||
|
||||
function getExtension(name) {
|
||||
return extensions.get(name);
|
||||
}
|
||||
|
||||
function getAllExtensions() {
|
||||
return extensions;
|
||||
}
|
||||
|
||||
function getExtensionsList() {
|
||||
return Array.from(extensions.keys());
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
loadExtensions,
|
||||
getExtension,
|
||||
getAllExtensions,
|
||||
getExtensionsList
|
||||
};
|
||||
47
src/shared/proxy/proxy.routes.js
Normal file
47
src/shared/proxy/proxy.routes.js
Normal file
@@ -0,0 +1,47 @@
|
||||
const { proxyRequest, processM3U8Content, streamToReadable } = require('./proxy.service');
|
||||
|
||||
async function proxyRoutes(fastify, options) {
|
||||
|
||||
fastify.get('/proxy', async (req, reply) => {
|
||||
const { url, referer, origin, userAgent } = req.query;
|
||||
|
||||
if (!url) {
|
||||
return reply.code(400).send({ error: "No URL provided" });
|
||||
}
|
||||
|
||||
try {
|
||||
const { response, contentType, isM3U8 } = await proxyRequest(url, {
|
||||
referer,
|
||||
origin,
|
||||
userAgent
|
||||
});
|
||||
|
||||
reply.header('Access-Control-Allow-Origin', '*');
|
||||
reply.header('Access-Control-Allow-Methods', 'GET, OPTIONS');
|
||||
|
||||
if (contentType) {
|
||||
reply.header('Content-Type', contentType);
|
||||
}
|
||||
|
||||
if (isM3U8) {
|
||||
const text = await response.text();
|
||||
const baseUrl = new URL(response.url);
|
||||
const processedContent = processM3U8Content(text, baseUrl, {
|
||||
referer,
|
||||
origin,
|
||||
userAgent
|
||||
});
|
||||
|
||||
return processedContent;
|
||||
} else {
|
||||
return reply.send(streamToReadable(response.body));
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
fastify.log.error(err);
|
||||
return reply.code(500).send({ error: "Internal Server Error" });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = proxyRoutes;
|
||||
58
src/shared/proxy/proxy.service.js
Normal file
58
src/shared/proxy/proxy.service.js
Normal file
@@ -0,0 +1,58 @@
|
||||
const { Readable } = require('stream');
|
||||
|
||||
async function proxyRequest(url, { referer, origin, userAgent }) {
|
||||
const headers = {
|
||||
'User-Agent': userAgent || "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
|
||||
'Accept': '*/*',
|
||||
'Accept-Language': 'en-US,en;q=0.9'
|
||||
};
|
||||
|
||||
if (referer) headers['Referer'] = referer;
|
||||
if (origin) headers['Origin'] = origin;
|
||||
|
||||
const response = await fetch(url, { headers, redirect: 'follow' });
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Proxy Error: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const contentType = response.headers.get('content-type');
|
||||
const isM3U8 = (contentType && contentType.includes('mpegurl')) || url.includes('.m3u8');
|
||||
|
||||
return {
|
||||
response,
|
||||
contentType,
|
||||
isM3U8
|
||||
};
|
||||
}
|
||||
|
||||
function processM3U8Content(text, baseUrl, { referer, origin, userAgent }) {
|
||||
return text.replace(/^(?!#)(?!\s*$).+/gm, (line) => {
|
||||
line = line.trim();
|
||||
let absoluteUrl;
|
||||
|
||||
try {
|
||||
absoluteUrl = new URL(line, baseUrl).href;
|
||||
} catch(e) {
|
||||
return line;
|
||||
}
|
||||
|
||||
const proxyParams = new URLSearchParams();
|
||||
proxyParams.set('url', absoluteUrl);
|
||||
if (referer) proxyParams.set('referer', referer);
|
||||
if (origin) proxyParams.set('origin', origin);
|
||||
if (userAgent) proxyParams.set('userAgent', userAgent);
|
||||
|
||||
return `/api/proxy?${proxyParams.toString()}`;
|
||||
});
|
||||
}
|
||||
|
||||
function streamToReadable(webStream) {
|
||||
return Readable.fromWeb(webStream);
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
proxyRequest,
|
||||
processM3U8Content,
|
||||
streamToReadable
|
||||
};
|
||||
37
src/views/views.routes.js
Normal file
37
src/views/views.routes.js
Normal file
@@ -0,0 +1,37 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
async function viewsRoutes(fastify, options) {
|
||||
|
||||
fastify.get('/', (req, reply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'index.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
});
|
||||
|
||||
fastify.get('/books', (req, reply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
});
|
||||
|
||||
fastify.get('/anime/:id', (req, reply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
});
|
||||
|
||||
fastify.get('/watch/:id/:episode', (req, reply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'watch.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
});
|
||||
|
||||
fastify.get('/book/:id', (req, reply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'book.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
});
|
||||
|
||||
fastify.get('/read/:id/:chapter/:provider', (req, reply) => {
|
||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'read.html'));
|
||||
reply.type('text/html').send(stream);
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = viewsRoutes;
|
||||
546
views/anime.html
546
views/anime.html
@@ -3,484 +3,130 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="/public/waifuboards.ico" type="image/x-icon">
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||
<title>WaifuBoard</title>
|
||||
<link rel="stylesheet" href="../public/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>
|
||||
<link rel="stylesheet" href="/views/css/anime/anime.css">
|
||||
</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 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>
|
||||
<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>
|
||||
|
||||
|
||||
<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 class="content-container">
|
||||
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="poster-card">
|
||||
<img id="poster" src="" alt="">
|
||||
</div>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<h4>Format</h4>
|
||||
<span id="format">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Episodes</h4>
|
||||
<span id="episodes">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Status</h4>
|
||||
<span id="status">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Season</h4>
|
||||
<span id="season">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Studio</h4>
|
||||
<span id="studio">--</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<h4>Main Characters</h4>
|
||||
<div class="character-list" id="char-list">
|
||||
|
||||
<div 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>
|
||||
</aside>
|
||||
|
||||
<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>
|
||||
<main class="main-content">
|
||||
<div class="anime-header">
|
||||
<h1 class="anime-title" id="title">Loading...</h1>
|
||||
|
||||
<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 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>
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
|
||||
<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 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">
|
||||
|
||||
<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="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 class="episode-search-wrapper">
|
||||
<input type="number" id="ep-search" class="episode-search-input" placeholder="Jump to Ep #" min="1">
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
<div class="episodes-grid" id="episodes-grid"></div>
|
||||
|
||||
<script>
|
||||
const animeId = window.location.pathname.split('/').pop();
|
||||
let player;
|
||||
|
||||
// Episode State
|
||||
let totalEpisodes = 0;
|
||||
let currentPage = 1;
|
||||
const itemsPerPage = 12;
|
||||
<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>
|
||||
|
||||
// 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);
|
||||
</div>
|
||||
|
||||
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} | WaifuBoard`;
|
||||
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>
|
||||
<script src="../src/scripts/anime/anime.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
178
views/book.html
178
views/book.html
@@ -3,113 +3,113 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<base href="/">
|
||||
<base href="/">
|
||||
<title>WaifuBoard Book</title>
|
||||
<link rel="icon" href="/public/waifuboards.ico" type="image/x-icon">
|
||||
<link rel="stylesheet" href="../public/book.css">
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/views/css/books/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="">
|
||||
<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>
|
||||
|
||||
|
||||
<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">
|
||||
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="poster-card">
|
||||
<img id="poster" 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 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>
|
||||
|
||||
<span id="published-date">--</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
<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="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 class="action-row">
|
||||
<button class="btn-primary" id="read-start-btn">
|
||||
Start Reading
|
||||
</button>
|
||||
<button class="btn-secondary">+ Add to Library</button>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<!-- 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="chapters-section">
|
||||
<div class="section-title">
|
||||
<h2>Chapters</h2>
|
||||
<div class="chapter-controls">
|
||||
|
||||
<div class="action-row">
|
||||
<button class="btn-primary" id="read-start-btn">
|
||||
Start Reading
|
||||
</button>
|
||||
<button class="btn-secondary">+ Add to Library</button>
|
||||
<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-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>
|
||||
<div class="chapters-table-wrapper">
|
||||
<table class="chapters-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Title</th>
|
||||
|
||||
<!-- 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>
|
||||
<th>Provider</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="chapters-body">
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../public/book.js"></script>
|
||||
<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="../src/scripts/books/book.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
134
views/books.html
134
views/books.html
@@ -4,82 +4,82 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WaifuBoard Books</title>
|
||||
<link rel="stylesheet" href="../public/books.css">
|
||||
<script src="../public/books.js" defer></script>
|
||||
<link rel="icon" href="/public/waifuboards.ico" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/views/css/books/books.css">
|
||||
<script src="../src/scripts/books/books.js" defer></script>
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar" id="navbar">
|
||||
<a href="/" class="nav-brand">
|
||||
<div class="brand-icon">
|
||||
<img src="/public/waifuboards.ico" alt="WF Logo">
|
||||
<nav class="navbar" id="navbar">
|
||||
<a href="/" class="nav-brand">
|
||||
<div class="brand-icon">
|
||||
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
|
||||
</div>
|
||||
WaifuBoard
|
||||
</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>
|
||||
|
||||
|
||||
<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>
|
||||
WaifuBoard
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
@@ -19,7 +19,6 @@ body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* --- BACK BUTTON --- */
|
||||
.back-btn {
|
||||
position: fixed;
|
||||
top: 2rem;
|
||||
@@ -45,11 +44,10 @@ body {
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
|
||||
/* --- HERO VIDEO SECTION --- */
|
||||
.hero-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 85vh; /* Covers most of the screen */
|
||||
height: 85vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -57,7 +55,7 @@ body {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(1.35); /* Zoom to remove black bars */
|
||||
transform: translate(-50%, -50%) scale(1.35);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
@@ -69,16 +67,15 @@ body {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(circle at center, transparent 0%, var(--bg-base) 120%),
|
||||
linear-gradient(to top, var(--bg-base) 10%, rgba(9,9,11,0.8) 25%, transparent 60%);
|
||||
linear-gradient(to top, var(--bg-base) 10%, rgba(9,9,11,0.8) 25%, transparent 60%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* --- CONTENT LAYOUT --- */
|
||||
.content-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
max-width: 1600px;
|
||||
margin: -350px auto 0 auto; /* Pull content up over the video */
|
||||
margin: -350px auto 0 auto;
|
||||
padding: 0 3rem 4rem 3rem;
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr;
|
||||
@@ -86,7 +83,6 @@ body {
|
||||
animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
/* LEFT SIDEBAR */
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -129,11 +125,10 @@ body {
|
||||
.character-item { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; }
|
||||
.char-dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
|
||||
|
||||
/* RIGHT MAIN CONTENT */
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end; /* Align header to bottom of hero area */
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.anime-header {
|
||||
@@ -219,7 +214,6 @@ body {
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
/* EPISODES */
|
||||
.episodes-section {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
@@ -266,5 +260,150 @@ body {
|
||||
.main-content { text-align: center; align-items: center; }
|
||||
.anime-title { font-size: 2.5rem; }
|
||||
.meta-row { justify-content: center; }
|
||||
.sidebar { display: none; /* Hide sidebar on mobile for simplicity, or move to bottom */ }
|
||||
.sidebar { display: none; }
|
||||
}
|
||||
|
||||
.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; }
|
||||
|
||||
.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;
|
||||
}
|
||||
.episode-search-input:focus {
|
||||
border-color: #8b5cf6;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.episode-search-input::-webkit-outer-spin-button,
|
||||
.episode-search-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -21,7 +21,6 @@ body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* --- NAV --- */
|
||||
.navbar {
|
||||
width: 100%;
|
||||
height: var(--nav-height);
|
||||
@@ -71,7 +70,6 @@ body {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
|
||||
.nav-center {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
@@ -101,7 +99,6 @@ body {
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
/* SEARCH BAR */
|
||||
.search-wrapper {
|
||||
position: relative;
|
||||
width: 250px;
|
||||
@@ -130,7 +127,6 @@ body {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* --- HERO --- */
|
||||
.hero-wrapper {
|
||||
position: relative;
|
||||
height: 85vh;
|
||||
@@ -148,7 +144,7 @@ body {
|
||||
.hero-vignette {
|
||||
position: absolute; inset: 0;
|
||||
background: radial-gradient(circle at center, transparent 0%, var(--bg-base) 120%),
|
||||
linear-gradient(to top, var(--bg-base) 10%, transparent 60%);
|
||||
linear-gradient(to top, var(--bg-base) 10%, transparent 60%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -162,7 +158,7 @@ body {
|
||||
width: 260px; height: 380px; border-radius: var(--radius-lg);
|
||||
overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
|
||||
border: 1px solid rgba(255,255,255,0.1); flex-shrink: 0;
|
||||
background: #1a1a1a; /* fallback */
|
||||
background: #1a1a1a;
|
||||
}
|
||||
.hero-poster-card img { width: 100%; height: 100%; object-fit: cover; }
|
||||
|
||||
@@ -195,7 +191,6 @@ body {
|
||||
.btn-blur { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); color: white; border: 1px solid rgba(255,255,255,0.2); }
|
||||
.btn-blur:hover { background: rgba(255, 255, 255, 0.2); }
|
||||
|
||||
/* --- CAROUSELS --- */
|
||||
.section { max-width: 1700px; margin: 0 auto; padding: 2rem 3rem; }
|
||||
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
|
||||
.section-title { font-size: 1.8rem; font-weight: 800; }
|
||||
@@ -215,7 +210,6 @@ body {
|
||||
.scroll-btn.left { left: -25px; }
|
||||
.scroll-btn.right { right: -25px; }
|
||||
|
||||
/* --- CARDS --- */
|
||||
.card { min-width: 220px; cursor: pointer; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
|
||||
.card:hover { transform: translateY(-8px); }
|
||||
.card-img-wrap { width: 100%; aspect-ratio: 2/3; border-radius: var(--radius-md); overflow: hidden; position: relative; margin-bottom: 0.8rem; background: #222; }
|
||||
@@ -225,7 +219,6 @@ body {
|
||||
.card-content h3 { margin: 0; font-size: 1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.card-content p { margin: 4px 0 0 0; font-size: 0.85rem; color: var(--text-secondary); }
|
||||
|
||||
/* SKELETON LOADING (The "Non-Dumb" Metadata fix) */
|
||||
.skeleton {
|
||||
background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
|
||||
background-size: 200% 100%;
|
||||
@@ -243,7 +236,7 @@ body {
|
||||
.search-wrapper {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
z-index: 2000; /* Ensure it sits above hero content */
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
@@ -261,7 +254,7 @@ body {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 15px var(--accent-glow);
|
||||
border-radius: 12px 12px 0 0; /* Flatten bottom corners when open */
|
||||
border-radius: 12px 12px 0 0;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
@@ -273,7 +266,6 @@ body {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* The Dropdown Container */
|
||||
.search-results {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
@@ -285,7 +277,7 @@ body {
|
||||
border-top: none;
|
||||
border-radius: 0 0 12px 12px;
|
||||
padding: 0.5rem;
|
||||
display: none; /* Hidden by default */
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
||||
@@ -297,7 +289,6 @@ body {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Individual Result Item */
|
||||
.search-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -350,12 +341,10 @@ body {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Scrollbar for results */
|
||||
.search-results::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
.search-results::-webkit-scrollbar-thumb {
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
:root {
|
||||
--bg-base: #000000;
|
||||
--bg-overlay: #101012;
|
||||
--accent: #8b5cf6; /* Keeping your purple accent for brand consistency */
|
||||
--accent: #8b5cf6;
|
||||
--accent-dark: #7c3aed;
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #a1a1aa;
|
||||
@@ -9,17 +9,17 @@
|
||||
--radius-md: 16px;
|
||||
--glass-border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
--glass-bg: rgba(20, 20, 23, 0.7);
|
||||
|
||||
/* Plyr Theme Variables - YouTube Style */
|
||||
|
||||
|
||||
--plyr-color-main: #8b5cf6;
|
||||
--plyr-video-control-color: #ffffff;
|
||||
--plyr-video-control-background-hover: rgba(255, 255, 255, 0.1); /* Subtle hover like YT */
|
||||
--plyr-video-control-background-hover: rgba(255, 255, 255, 0.1);
|
||||
--plyr-menu-background: rgba(28, 28, 30, 0.95);
|
||||
--plyr-menu-color: #ffffff;
|
||||
--plyr-menu-border-color: rgba(255, 255, 255, 0.1);
|
||||
--plyr-font-family: 'Inter', sans-serif;
|
||||
|
||||
/* Custom YT-like sizing */
|
||||
|
||||
|
||||
--plyr-control-icon-size: 18px;
|
||||
--plyr-control-spacing: 10px;
|
||||
}
|
||||
@@ -35,7 +35,6 @@ body {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* --- TOP BAR --- */
|
||||
.top-bar {
|
||||
padding: 1.5rem 2rem;
|
||||
display: flex;
|
||||
@@ -73,7 +72,6 @@ body {
|
||||
border-color: rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
/* --- THEATER LAYOUT --- */
|
||||
.theater-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
@@ -88,7 +86,6 @@ body {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* --- TOOLBAR (Extensions + Toggles) --- */
|
||||
.player-toolbar {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -100,7 +97,6 @@ body {
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
/* Modern Pill Dropdown */
|
||||
.extension-select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
@@ -127,7 +123,6 @@ body {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* SUB / DUB TOGGLE */
|
||||
.sd-toggle {
|
||||
display: flex;
|
||||
background: var(--glass-bg);
|
||||
@@ -154,7 +149,6 @@ body {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* The sliding pill background */
|
||||
.sd-bg {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
@@ -168,12 +162,10 @@ body {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Toggle State Logic handled via class on parent */
|
||||
.sd-toggle[data-state="dub"] .sd-bg {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
/* --- VIDEO WRAPPER --- */
|
||||
.video-wrapper {
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
@@ -195,7 +187,6 @@ video {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Loading Overlay */
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
@@ -220,7 +211,6 @@ video {
|
||||
|
||||
@keyframes spin { 100% { transform: rotate(360deg); } }
|
||||
|
||||
/* --- CONTROLS --- */
|
||||
.controls-area {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -280,15 +270,11 @@ video {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* --- PLYR YOUTUBE-STYLE OVERRIDES --- */
|
||||
|
||||
/* 1. Base Video Container */
|
||||
.plyr--video {
|
||||
border-radius: 20px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
/* 2. Controls Container (Gradient Overlay) */
|
||||
.plyr__controls {
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%) !important;
|
||||
padding: 10px 20px 20px 20px !important;
|
||||
@@ -296,24 +282,20 @@ video {
|
||||
border-radius: 0 0 20px 20px !important;
|
||||
}
|
||||
|
||||
/* 3. Progress Bar (YouTube Style) */
|
||||
.plyr__progress input[type=range] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* The track */
|
||||
.plyr--full-ui input[type=range] {
|
||||
color: var(--accent); /* Your brand color instead of YouTube red */
|
||||
height: 4px; /* Thinner by default */
|
||||
color: var(--accent);
|
||||
height: 4px;
|
||||
transition: height 0.1s ease;
|
||||
}
|
||||
|
||||
/* Expand progress bar on hover like YT */
|
||||
.plyr__progress__container:hover input[type=range] {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
/* 4. Buttons (Clean Icons, No Background) */
|
||||
.plyr__control {
|
||||
background: transparent !important;
|
||||
border-radius: 4px;
|
||||
@@ -332,10 +314,9 @@ video {
|
||||
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
|
||||
}
|
||||
|
||||
/* 5. Center Play Button (Large, Pulsing) */
|
||||
.plyr__control--overlaid {
|
||||
background: rgba(0, 0, 0, 0.6) !important;
|
||||
border: 2px solid white; /* Optional: White ring for classic look */
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
padding: 1.5rem !important;
|
||||
opacity: 0.9;
|
||||
@@ -353,14 +334,12 @@ video {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* 6. Time Display */
|
||||
.plyr__time {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
/* 7. Menus (Floating Glass Panels) */
|
||||
.plyr__menu__container {
|
||||
background: rgba(28, 28, 30, 0.95) !important;
|
||||
backdrop-filter: blur(12px);
|
||||
@@ -368,7 +347,7 @@ video {
|
||||
border-radius: 12px !important;
|
||||
padding: 8px;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
|
||||
bottom: 60px !important; /* Lift above controls */
|
||||
bottom: 60px !important;
|
||||
}
|
||||
|
||||
.plyr__menu__container .plyr__control {
|
||||
@@ -383,15 +362,13 @@ video {
|
||||
background: rgba(255,255,255,0.1) !important;
|
||||
}
|
||||
|
||||
/* Active menu item */
|
||||
.plyr__menu__container .plyr__control[aria-checked="true"] {
|
||||
color: var(--accent);
|
||||
}
|
||||
.plyr__menu__container .plyr__control[aria-checked="true"]::after {
|
||||
background: var(--accent); /* The checkmark */
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
/* 8. Tooltips (Time preview) */
|
||||
.plyr__tooltip {
|
||||
background: rgba(28, 28, 30, 0.9);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
@@ -402,9 +379,8 @@ video {
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
/* 9. Subtitles (Cinematic) */
|
||||
.plyr__cues {
|
||||
margin-bottom: 50px !important; /* Push subtitles up so controls don't overlap */
|
||||
margin-bottom: 50px !important;
|
||||
}
|
||||
|
||||
.plyr__cues span {
|
||||
@@ -415,4 +391,23 @@ video {
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
text-shadow: 0 2px 4px rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
.extension-select option {
|
||||
background: var(--bg-overlay);
|
||||
color: var(--text-primary);
|
||||
padding: 0.8rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.extension-select option:hover {
|
||||
background: rgba(139, 92, 246, 0.2);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.extension-select option:checked {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
@@ -13,7 +13,6 @@
|
||||
--nav-height: 80px;
|
||||
}
|
||||
|
||||
/* Global Reset */
|
||||
* { box-sizing: border-box; outline: none; }
|
||||
|
||||
body {
|
||||
@@ -24,7 +23,6 @@ body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Back Button */
|
||||
.back-btn {
|
||||
position: fixed;
|
||||
top: 2rem; left: 2rem; z-index: 100;
|
||||
@@ -37,7 +35,6 @@ body {
|
||||
}
|
||||
.back-btn:hover { background: rgba(255, 255, 255, 0.15); transform: translateX(-5px); }
|
||||
|
||||
/* Hero */
|
||||
.hero-wrapper {
|
||||
position: relative; width: 100%; height: 60vh; overflow: hidden;
|
||||
}
|
||||
@@ -48,28 +45,25 @@ body {
|
||||
background: linear-gradient(to bottom, transparent 0%, var(--bg-base) 100%);
|
||||
}
|
||||
|
||||
/* Content Layout - Pulled Up Higher */
|
||||
.content-container {
|
||||
position: relative; z-index: 10;
|
||||
max-width: 1600px; margin: -350px auto 0 auto; /* Pulled up significantly */
|
||||
max-width: 1600px; margin: -350px auto 0 auto;
|
||||
padding: 0 3rem 4rem 3rem;
|
||||
display: grid;
|
||||
grid-template-columns: 260px 1fr;
|
||||
display: grid;
|
||||
grid-template-columns: 260px 1fr;
|
||||
gap: 3rem;
|
||||
align-items: flex-start; /* Important for sticky sidebar */
|
||||
align-items: flex-start;
|
||||
animation: slideUp 0.8s ease;
|
||||
}
|
||||
|
||||
/* Hero Content Overlay (Hidden) */
|
||||
.hero-content { display: none; }
|
||||
|
||||
/* Left Sidebar - Sticky Poster */
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
position: sticky;
|
||||
top: calc(var(--nav-height) + 2rem); /* Sticks to top when scrolling */
|
||||
top: calc(var(--nav-height) + 2rem);
|
||||
align-self: flex-start;
|
||||
z-index: 20;
|
||||
}
|
||||
@@ -77,7 +71,7 @@ body {
|
||||
.poster-card {
|
||||
width: 100%; aspect-ratio: 2/3; border-radius: var(--radius-lg);
|
||||
overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.8);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
background: #1a1a1a;
|
||||
}
|
||||
.poster-card img { width: 100%; height: 100%; object-fit: cover; }
|
||||
@@ -90,14 +84,12 @@ body {
|
||||
.info-item h4 { margin: 0 0 0.25rem 0; font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.info-item span { font-weight: 600; font-size: 0.95rem; }
|
||||
|
||||
/* Main Content */
|
||||
.main-content {
|
||||
display: flex; flex-direction: column;
|
||||
padding-top: 4rem; /* Adjusted spacing */
|
||||
.main-content {
|
||||
display: flex; flex-direction: column;
|
||||
padding-top: 4rem;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/* Header Section */
|
||||
.book-header { margin-bottom: 1.5rem; }
|
||||
.book-title { font-size: 3.5rem; font-weight: 900; line-height: 1.1; margin: 0 0 1rem 0; text-shadow: 0 4px 30px rgba(0,0,0,0.8); }
|
||||
|
||||
@@ -105,9 +97,8 @@ body {
|
||||
.pill { padding: 0.4rem 1rem; background: rgba(255,255,255,0.1); border-radius: 99px; font-size: 0.9rem; font-weight: 600; border: var(--glass-border); backdrop-filter: blur(10px); }
|
||||
.pill.score { background: rgba(34, 197, 94, 0.2); color: #4ade80; border-color: rgba(34, 197, 94, 0.2); }
|
||||
|
||||
/* Hidden elements as requested */
|
||||
#description { display: none; } /* Hides description box */
|
||||
#year { display: none; } /* Hides year pill */
|
||||
#description { display: none; }
|
||||
#year { display: none; }
|
||||
|
||||
.action-row { display: flex; gap: 1rem; }
|
||||
.btn-primary {
|
||||
@@ -116,38 +107,34 @@ body {
|
||||
}
|
||||
.btn-primary:hover { transform: scale(1.05); }
|
||||
|
||||
/* Fixed Add to Library Button (Matching books.html style) */
|
||||
.btn-secondary {
|
||||
padding: 0.8rem 2rem;
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: white;
|
||||
padding: 0.8rem 2rem;
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: white;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
border-radius: 99px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
border-radius: 99px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
/* Legacy class support if HTML uses btn-blur */
|
||||
.btn-blur {
|
||||
padding: 0.8rem 2rem;
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: white;
|
||||
padding: 0.8rem 2rem;
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: white;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
border-radius: 99px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
border-radius: 99px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.btn-blur:hover { background: rgba(255,255,255,0.2); }
|
||||
|
||||
|
||||
/* Chapters Section */
|
||||
.chapters-section { margin-top: 1rem; }
|
||||
.section-title { display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.8rem; margin-bottom: 1.5rem; }
|
||||
.section-title h2 { font-size: 1.5rem; margin: 0; border-left: 4px solid var(--accent); padding-left: 1rem; }
|
||||
@@ -172,8 +159,8 @@ body {
|
||||
.filter-select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background-color: var(--bg-surface); /* Dark background */
|
||||
color: var(--text-primary); /* White text */
|
||||
background-color: var(--bg-surface);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
padding: 0.5rem 2rem 0.5rem 1rem;
|
||||
border-radius: 99px;
|
||||
@@ -191,7 +178,6 @@ body {
|
||||
background-color: var(--bg-surface-hover);
|
||||
}
|
||||
|
||||
/* Force Dropdown Options Background (browser dependent but works on most modern ones) */
|
||||
.filter-select option {
|
||||
background-color: var(--bg-surface);
|
||||
color: var(--text-primary);
|
||||
@@ -204,7 +190,6 @@ body {
|
||||
}
|
||||
.read-btn-small:hover { background: #7c3aed; }
|
||||
|
||||
/* Pagination */
|
||||
.pagination-controls {
|
||||
display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; align-items: center;
|
||||
}
|
||||
@@ -220,14 +205,14 @@ body {
|
||||
@media (max-width: 1024px) {
|
||||
.hero-wrapper { height: 40vh; }
|
||||
.content-container { grid-template-columns: 1fr; margin-top: -80px; padding: 0 1.5rem 4rem 1.5rem; }
|
||||
.poster-card { display: none; } /* Hide large poster on mobile */
|
||||
|
||||
.poster-card { display: none; }
|
||||
|
||||
.main-content { padding-top: 0; align-items: center; text-align: center; }
|
||||
.book-title { font-size: 2.2rem; }
|
||||
.meta-row { justify-content: center; }
|
||||
.action-row { justify-content: center; width: 100%; }
|
||||
.btn-primary, .btn-blur { flex: 1; justify-content: center; }
|
||||
|
||||
|
||||
.sidebar { display: none; }
|
||||
.chapters-table th:nth-child(3), .chapters-table td:nth-child(3) { display: none; }
|
||||
.chapters-table th:nth-child(4), .chapters-table td:nth-child(4) { display: none; }
|
||||
@@ -21,7 +21,6 @@ body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* --- NAV --- */
|
||||
.navbar {
|
||||
width: 100%;
|
||||
height: var(--nav-height);
|
||||
@@ -100,7 +99,6 @@ body {
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
/* SEARCH BAR */
|
||||
.search-wrapper {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
@@ -134,7 +132,6 @@ body {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Dropdown */
|
||||
.search-results {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
@@ -200,7 +197,6 @@ body {
|
||||
|
||||
.rating-pill { color: #4ade80; font-weight: 700; }
|
||||
|
||||
/* --- HERO --- */
|
||||
.hero-wrapper {
|
||||
position: relative;
|
||||
height: 85vh;
|
||||
@@ -218,7 +214,7 @@ body {
|
||||
.hero-vignette {
|
||||
position: absolute; inset: 0;
|
||||
background: radial-gradient(circle at center, transparent 0%, var(--bg-base) 120%),
|
||||
linear-gradient(to top, var(--bg-base) 10%, transparent 60%);
|
||||
linear-gradient(to top, var(--bg-base) 10%, transparent 60%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -265,7 +261,6 @@ body {
|
||||
.btn-blur { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); color: white; border: 1px solid rgba(255,255,255,0.2); }
|
||||
.btn-blur:hover { background: rgba(255, 255, 255, 0.2); }
|
||||
|
||||
/* --- SECTIONS --- */
|
||||
.section { max-width: 1700px; margin: 0 auto; padding: 2rem 3rem; }
|
||||
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
|
||||
.section-title { font-size: 1.8rem; font-weight: 800; }
|
||||
@@ -285,7 +280,6 @@ body {
|
||||
.scroll-btn.left { left: -25px; }
|
||||
.scroll-btn.right { right: -25px; }
|
||||
|
||||
/* --- CARDS --- */
|
||||
.card { min-width: 220px; cursor: pointer; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
|
||||
.card:hover { transform: translateY(-8px); }
|
||||
.card-img-wrap { width: 100%; aspect-ratio: 2/3; border-radius: var(--radius-md); overflow: hidden; position: relative; margin-bottom: 0.8rem; background: #222; }
|
||||
@@ -309,7 +303,6 @@ body {
|
||||
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
|
||||
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
||||
|
||||
/* --- MOBILE --- */
|
||||
@media (max-width: 768px) {
|
||||
:root { --nav-height: auto; }
|
||||
.navbar { padding: 1rem; flex-wrap: wrap; gap: 1rem; background: rgba(9,9,11,0.98); position: fixed; }
|
||||
@@ -323,7 +316,7 @@ body {
|
||||
}
|
||||
.nav-center::-webkit-scrollbar { display: none; }
|
||||
.nav-button { flex-shrink: 0; background: rgba(255,255,255,0.05); padding: 0.5rem 1rem; font-size: 0.85rem; border-radius: 99px; }
|
||||
|
||||
|
||||
.hero-wrapper { height: 75vh; }
|
||||
.hero-content { flex-direction: column; justify-content: flex-end; padding: 0 1.5rem 6rem 1.5rem; gap: 1rem; }
|
||||
.hero-poster-card { display: none; }
|
||||
@@ -333,12 +326,12 @@ body {
|
||||
.hero-buttons { justify-content: center; width: 100%; }
|
||||
.btn-primary, .btn-blur { flex: 1; justify-content: center; }
|
||||
.hero-desc { text-align: center; -webkit-line-clamp: 3; font-size: 0.95rem; }
|
||||
|
||||
|
||||
.section { padding: 1.5rem 1rem; }
|
||||
.section-title { font-size: 1.4rem; }
|
||||
.scroll-btn { display: none; }
|
||||
.card { min-width: 140px; }
|
||||
|
||||
|
||||
.search-results {
|
||||
position: fixed; top: 120px; left: 0; right: 0;
|
||||
width: 100%; border-radius: 0; max-height: 60vh; border: none; z-index: 2001;
|
||||
@@ -37,7 +37,6 @@ body {
|
||||
|
||||
.hidden { display: none !important; }
|
||||
|
||||
/* ===== TOP BAR ===== */
|
||||
.top-bar {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0;
|
||||
@@ -113,7 +112,6 @@ body {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ===== READER CONTAINER ===== */
|
||||
#reader {
|
||||
margin-top: 64px;
|
||||
padding: 2rem 1rem;
|
||||
@@ -124,7 +122,6 @@ body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ===== MANGA STYLES ===== */
|
||||
.manga-container {
|
||||
width: 100%;
|
||||
max-width: var(--manga-max-width, 1200px);
|
||||
@@ -201,7 +198,6 @@ body {
|
||||
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
/* ===== LIGHT NOVEL STYLES ===== */
|
||||
.ln-content {
|
||||
max-width: var(--ln-max-width, 750px);
|
||||
width: 100%;
|
||||
@@ -224,7 +220,6 @@ body {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ===== SETTINGS PANEL ===== */
|
||||
.settings-panel {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
@@ -337,7 +332,6 @@ body {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
/* Range Inputs */
|
||||
input[type="range"] {
|
||||
width: 100%;
|
||||
border-radius: var(--radius-full);
|
||||
@@ -375,7 +369,6 @@ input[type="range"]::-moz-range-thumb {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
/* Select & Color Inputs */
|
||||
select, input[type="color"], input[type="number"] {
|
||||
width: 100%;
|
||||
padding: 0.625rem 0.875rem;
|
||||
@@ -405,7 +398,6 @@ input[type="color"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Presets */
|
||||
.presets {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@@ -434,7 +426,6 @@ input[type="color"] {
|
||||
box-shadow: 0 4px 15px var(--accent-light);
|
||||
}
|
||||
|
||||
/* Toggle Switches */
|
||||
.toggle-group {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
@@ -468,7 +459,6 @@ input[type="color"] {
|
||||
box-shadow: 0 2px 10px var(--accent-light);
|
||||
}
|
||||
|
||||
/* Overlay */
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
@@ -484,7 +474,6 @@ input[type="color"] {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
/* Loading State */
|
||||
.loading-spinner {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
@@ -509,7 +498,6 @@ input[type="color"] {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
.settings-panel::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
@@ -527,7 +515,6 @@ input[type="color"] {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.settings-panel {
|
||||
width: 100%;
|
||||
@@ -563,7 +550,6 @@ input[type="color"] {
|
||||
}
|
||||
}
|
||||
|
||||
/* Image Fit Modes */
|
||||
.fit-width {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
388
views/index.html
388
views/index.html
@@ -4,322 +4,106 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WaifuBoard</title>
|
||||
<link rel="stylesheet" href="../public/home.css">
|
||||
<link rel="icon" href="/public/waifuboards.ico" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/views/css/anime/home.css">
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar" id="navbar">
|
||||
<a href="/" class="nav-brand">
|
||||
<div class="brand-icon">
|
||||
<img src="/public/waifuboards.ico" alt="WF Logo">
|
||||
<nav class="navbar" id="navbar">
|
||||
<a href="/" class="nav-brand">
|
||||
<div class="brand-icon">
|
||||
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
|
||||
</div>
|
||||
WaifuBoard
|
||||
</a>
|
||||
|
||||
<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">
|
||||
|
||||
<div class="search-results" id="search-results"></div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<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>
|
||||
WaifuBoard
|
||||
</a>
|
||||
|
||||
<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 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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<main>
|
||||
|
||||
<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">
|
||||
|
||||
<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>
|
||||
</section>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</section>
|
||||
</main>
|
||||
<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>
|
||||
<script src="../src/scripts/anime/animes.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -4,13 +4,12 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Reader</title>
|
||||
<link rel="stylesheet" href="/public/reader.css">
|
||||
<link rel="icon" href="/public/waifuboards.ico" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/views/css/books/reader.css">
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Top Bar -->
|
||||
<header class="top-bar">
|
||||
<button id="back-btn" class="glass-btn">
|
||||
← Back
|
||||
@@ -27,7 +26,6 @@
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<!-- Settings Panel -->
|
||||
<aside id="settings-panel" class="settings-panel">
|
||||
<div class="panel-header">
|
||||
<h3>Reader Settings</h3>
|
||||
@@ -35,9 +33,9 @@
|
||||
</div>
|
||||
|
||||
<div class="panel-content">
|
||||
<!-- Light Novel Settings -->
|
||||
|
||||
<div id="ln-settings" class="hidden">
|
||||
<!-- Typography -->
|
||||
|
||||
<div class="settings-section">
|
||||
<h4>Typography</h4>
|
||||
|
||||
@@ -87,7 +85,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Color Theme -->
|
||||
|
||||
<div class="settings-section">
|
||||
<h4>Color Theme</h4>
|
||||
|
||||
@@ -110,9 +108,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Manga Settings -->
|
||||
|
||||
<div id="manga-settings" class="hidden">
|
||||
<!-- Display -->
|
||||
|
||||
<div class="settings-section">
|
||||
<h4>Display</h4>
|
||||
|
||||
@@ -144,7 +142,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Appearance -->
|
||||
|
||||
<div class="settings-section">
|
||||
<h4>Appearance</h4>
|
||||
|
||||
@@ -157,7 +155,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Performance -->
|
||||
|
||||
<div class="settings-section">
|
||||
<h4>Performance</h4>
|
||||
|
||||
@@ -179,6 +177,6 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="/public/reader.js"></script>
|
||||
<script src="/src/scripts/books/reader.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
325
views/watch.html
325
views/watch.html
@@ -3,295 +3,72 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<base href="/">
|
||||
<base href="/">
|
||||
<title>WaifuBoard Watch</title>
|
||||
<link rel="stylesheet" href="../public/watch.css">
|
||||
|
||||
<link rel="stylesheet" href="/views/css/anime/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>
|
||||
<link rel="icon" href="/public/waifuboards.ico" type="image/x-icon">
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||
</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 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">
|
||||
|
||||
|
||||
<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()">
|
||||
|
||||
</select>
|
||||
|
||||
<select id="extension-select" class="extension-select" onchange="onExtensionChange()">
|
||||
<option value="" disabled selected>Source...</option>
|
||||
</select>
|
||||
</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 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>
|
||||
|
||||
<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}`;
|
||||
<div class="controls-area">
|
||||
<div class="episode-info">
|
||||
<h2 id="anime-title">Loading...</h2>
|
||||
<span id="episode-label">Episode --</span>
|
||||
</div>
|
||||
|
||||
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); }
|
||||
}
|
||||
<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>
|
||||
|
||||
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>
|
||||
<script src="../src/scripts/anime/player.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user