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 |
|
| Book Reader | ✅ | N/A |
|
||||||
| Multi book provider loading | ✅ | 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 |
|
| Mobile View | Not Done | N/A |
|
||||||
| Gallery | Not Done | N/A |
|
| Gallery | Not Done | N/A |
|
||||||
| Anime Schedule (Release Calendar for the month) | 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 fastify = require('fastify')({ logger: true });
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
const fs = require('fs');
|
|
||||||
const os = require('os');
|
|
||||||
const { animeMetadata } = require('./src/metadata/anilist');
|
const { animeMetadata } = require('./src/metadata/anilist');
|
||||||
const sqlite3 = require('sqlite3').verbose();
|
|
||||||
|
|
||||||
// --- DATABASE CONNECTION ---
|
const { initDatabase } = require('./src/shared/database');
|
||||||
const DB_PATH = path.join(__dirname, 'src', 'metadata', 'anilist_anime.db');
|
const { loadExtensions } = require('./src/shared/extensions');
|
||||||
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.");
|
|
||||||
});
|
|
||||||
|
|
||||||
// --- EXTENSION LOADER ---
|
const viewsRoutes = require('./src/views/views.routes');
|
||||||
const extensions = new Map();
|
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'), {
|
fastify.register(require('@fastify/static'), {
|
||||||
root: path.join(__dirname, 'public'),
|
root: path.join(__dirname, 'public'),
|
||||||
prefix: '/public/',
|
prefix: '/public/',
|
||||||
|
decorateReply: false
|
||||||
});
|
});
|
||||||
|
|
||||||
fastify.get('/', (req, reply) => {
|
fastify.register(require('@fastify/static'), {
|
||||||
const stream = fs.createReadStream(path.join(__dirname, 'views', 'index.html'));
|
root: path.join(__dirname, 'views'),
|
||||||
reply.type('text/html').send(stream);
|
prefix: '/views/',
|
||||||
|
decorateReply: false
|
||||||
});
|
});
|
||||||
|
|
||||||
// NEW: Books Page
|
fastify.register(require('@fastify/static'), {
|
||||||
fastify.get('/books', (req, reply) => {
|
root: path.join(__dirname, 'src'),
|
||||||
const stream = fs.createReadStream(path.join(__dirname, 'views', 'books.html'));
|
prefix: '/src/',
|
||||||
reply.type('text/html').send(stream);
|
decorateReply: false
|
||||||
});
|
});
|
||||||
|
|
||||||
fastify.get('/anime/:id', (req, reply) => {
|
fastify.register(viewsRoutes);
|
||||||
const stream = fs.createReadStream(path.join(__dirname, 'views', 'anime.html'));
|
fastify.register(animeRoutes, { prefix: '/api' });
|
||||||
reply.type('text/html').send(stream);
|
fastify.register(booksRoutes, { prefix: '/api' });
|
||||||
});
|
fastify.register(proxyRoutes, { prefix: '/api' });
|
||||||
|
|
||||||
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);
|
|
||||||
});
|
|
||||||
|
|
||||||
const start = async () => {
|
const start = async () => {
|
||||||
try {
|
try {
|
||||||
|
initDatabase();
|
||||||
|
await loadExtensions();
|
||||||
|
|
||||||
await fastify.listen({ port: 3000, host: '0.0.0.0' });
|
await fastify.listen({ port: 3000, host: '0.0.0.0' });
|
||||||
console.log(`Server running at http://localhost:3000`);
|
console.log(`Server running at http://localhost:3000`);
|
||||||
|
|
||||||
animeMetadata();
|
animeMetadata();
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
fastify.log.error(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 path = require('path');
|
||||||
const fs = require('fs');
|
const fs = require('fs');
|
||||||
|
|
||||||
// --- CONFIGURATION ---
|
|
||||||
const DB_PATH = path.join(__dirname, 'anilist_anime.db');
|
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 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);
|
const dir = path.dirname(DB_PATH);
|
||||||
if (!fs.existsSync(dir)) {
|
if (!fs.existsSync(dir)) {
|
||||||
fs.mkdirSync(dir, { recursive: true });
|
fs.mkdirSync(dir, { recursive: true });
|
||||||
@@ -16,16 +14,13 @@ if (!fs.existsSync(dir)) {
|
|||||||
|
|
||||||
const db = new sqlite3.Database(DB_PATH);
|
const db = new sqlite3.Database(DB_PATH);
|
||||||
|
|
||||||
// --- DATABASE SETUP ---
|
|
||||||
function initDB() {
|
function initDB() {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
db.serialize(() => {
|
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 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 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)`);
|
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 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 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) => {
|
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 = `
|
const MEDIA_FIELDS = `
|
||||||
id
|
id
|
||||||
idMal
|
idMal
|
||||||
@@ -170,7 +163,6 @@ query ($sort: [MediaSort], $type: MediaType, $status: MediaStatus) {
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// --- NETWORK HELPERS ---
|
|
||||||
async function sleep(ms) {
|
async function sleep(ms) {
|
||||||
return new Promise(resolve => setTimeout(resolve, ms));
|
return new Promise(resolve => setTimeout(resolve, ms));
|
||||||
}
|
}
|
||||||
@@ -211,7 +203,6 @@ async function fetchGraphQL(query, variables) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- FUNCTIONS ---
|
|
||||||
|
|
||||||
function saveMediaBatch(tableName, mediaList) {
|
function saveMediaBatch(tableName, mediaList) {
|
||||||
return new Promise((resolve, reject) => {
|
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)));
|
return new Promise((resolve) => db.get(`SELECT COUNT(*) as count FROM ${tableName}`, (err, row) => resolve(row ? row.count : 0)));
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- LOOPS ---
|
|
||||||
|
|
||||||
async function startFeaturedLoop() {
|
async function startFeaturedLoop() {
|
||||||
console.log(`✨ Starting Featured Content Loop (Refreshes every ${FEATURED_REFRESH_RATE / 60000} mins)`);
|
console.log(`✨ Starting Featured Content Loop (Refreshes every ${FEATURED_REFRESH_RATE / 60000} mins)`);
|
||||||
@@ -267,28 +257,24 @@ async function startFeaturedLoop() {
|
|||||||
const runUpdate = async () => {
|
const runUpdate = async () => {
|
||||||
console.log("🔄 Refreshing Featured tables (Anime & Books)...");
|
console.log("🔄 Refreshing Featured tables (Anime & Books)...");
|
||||||
|
|
||||||
// 1. Anime Trending
|
|
||||||
const animeTrending = await fetchGraphQL(FEATURED_QUERY, { sort: "TRENDING_DESC", type: "ANIME" });
|
const animeTrending = await fetchGraphQL(FEATURED_QUERY, { sort: "TRENDING_DESC", type: "ANIME" });
|
||||||
if (animeTrending && animeTrending.media) {
|
if (animeTrending && animeTrending.media) {
|
||||||
await updateFeaturedTable('trending', animeTrending.media);
|
await updateFeaturedTable('trending', animeTrending.media);
|
||||||
console.log(` ✅ Updated Anime Trending.`);
|
console.log(` ✅ Updated Anime Trending.`);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 2. Anime Top Airing
|
|
||||||
const animeTop = await fetchGraphQL(FEATURED_QUERY, { sort: "SCORE_DESC", type: "ANIME", status: "RELEASING" });
|
const animeTop = await fetchGraphQL(FEATURED_QUERY, { sort: "SCORE_DESC", type: "ANIME", status: "RELEASING" });
|
||||||
if (animeTop && animeTop.media) {
|
if (animeTop && animeTop.media) {
|
||||||
await updateFeaturedTable('top_airing', animeTop.media);
|
await updateFeaturedTable('top_airing', animeTop.media);
|
||||||
console.log(` ✅ Updated Anime Top Airing.`);
|
console.log(` ✅ Updated Anime Top Airing.`);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 3. Books Trending
|
|
||||||
const mangaTrending = await fetchGraphQL(FEATURED_QUERY, { sort: "TRENDING_DESC", type: "MANGA" });
|
const mangaTrending = await fetchGraphQL(FEATURED_QUERY, { sort: "TRENDING_DESC", type: "MANGA" });
|
||||||
if (mangaTrending && mangaTrending.media) {
|
if (mangaTrending && mangaTrending.media) {
|
||||||
await updateFeaturedTable('trending_books', mangaTrending.media);
|
await updateFeaturedTable('trending_books', mangaTrending.media);
|
||||||
console.log(` ✅ Updated Books Trending.`);
|
console.log(` ✅ Updated Books Trending.`);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 4. Books Popular
|
|
||||||
const mangaPop = await fetchGraphQL(FEATURED_QUERY, { sort: "POPULARITY_DESC", type: "MANGA" });
|
const mangaPop = await fetchGraphQL(FEATURED_QUERY, { sort: "POPULARITY_DESC", type: "MANGA" });
|
||||||
if (mangaPop && mangaPop.media) {
|
if (mangaPop && mangaPop.media) {
|
||||||
await updateFeaturedTable('popular_books', mangaPop.media);
|
await updateFeaturedTable('popular_books', mangaPop.media);
|
||||||
@@ -343,11 +329,9 @@ async function startScraper(type, tableName) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- MAIN ENTRY ---
|
|
||||||
async function animeMetadata() {
|
async function animeMetadata() {
|
||||||
await initDB();
|
await initDB();
|
||||||
|
|
||||||
// Start loops
|
|
||||||
startFeaturedLoop();
|
startFeaturedLoop();
|
||||||
startScraper('ANIME', 'anime');
|
startScraper('ANIME', 'anime');
|
||||||
startScraper('MANGA', 'books');
|
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();
|
const bookId = window.location.pathname.split('/').pop();
|
||||||
let allChapters = []; // Stores all fetched chapters
|
let allChapters = [];
|
||||||
let filteredChapters = []; // Stores currently displayed chapters (filtered)
|
let filteredChapters = [];
|
||||||
let currentPage = 1;
|
let currentPage = 1;
|
||||||
const itemsPerPage = 12;
|
const itemsPerPage = 12;
|
||||||
|
|
||||||
async function init() {
|
async function init() {
|
||||||
try {
|
try {
|
||||||
// 1. Load Metadata
|
|
||||||
const res = await fetch(`/api/book/${bookId}`);
|
const res = await fetch(`/api/book/${bookId}`);
|
||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
|
|
||||||
@@ -16,7 +15,6 @@ async function init() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Populate Hero Elements
|
|
||||||
const title = data.title.english || data.title.romaji;
|
const title = data.title.english || data.title.romaji;
|
||||||
document.title = `${title} | WaifuBoard Books`;
|
document.title = `${title} | WaifuBoard Books`;
|
||||||
|
|
||||||
@@ -63,7 +61,6 @@ async function init() {
|
|||||||
const heroBgEl = document.getElementById('hero-bg');
|
const heroBgEl = document.getElementById('hero-bg');
|
||||||
if (heroBgEl) heroBgEl.src = data.bannerImage || img;
|
if (heroBgEl) heroBgEl.src = data.bannerImage || img;
|
||||||
|
|
||||||
// 2. Load Chapters
|
|
||||||
loadChapters();
|
loadChapters();
|
||||||
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@@ -82,7 +79,7 @@ async function loadChapters() {
|
|||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
|
|
||||||
allChapters = data.chapters || [];
|
allChapters = data.chapters || [];
|
||||||
filteredChapters = [...allChapters]; // Initially, show all
|
filteredChapters = [...allChapters];
|
||||||
|
|
||||||
const totalEl = document.getElementById('total-chapters');
|
const totalEl = document.getElementById('total-chapters');
|
||||||
|
|
||||||
@@ -94,10 +91,8 @@ async function loadChapters() {
|
|||||||
|
|
||||||
if (totalEl) totalEl.innerText = `${allChapters.length} Found`;
|
if (totalEl) totalEl.innerText = `${allChapters.length} Found`;
|
||||||
|
|
||||||
// Populate Provider Filter
|
|
||||||
populateProviderFilter();
|
populateProviderFilter();
|
||||||
|
|
||||||
// Read Button Action (Start at filtered Ch 1)
|
|
||||||
const readBtn = document.getElementById('read-start-btn');
|
const readBtn = document.getElementById('read-start-btn');
|
||||||
if (readBtn && filteredChapters.length > 0) {
|
if (readBtn && filteredChapters.length > 0) {
|
||||||
readBtn.onclick = () => openReader(filteredChapters[0].id);
|
readBtn.onclick = () => openReader(filteredChapters[0].id);
|
||||||
@@ -115,14 +110,11 @@ function populateProviderFilter() {
|
|||||||
const select = document.getElementById('provider-filter');
|
const select = document.getElementById('provider-filter');
|
||||||
if (!select) return;
|
if (!select) return;
|
||||||
|
|
||||||
// Extract unique providers
|
|
||||||
const providers = [...new Set(allChapters.map(ch => ch.provider))];
|
const providers = [...new Set(allChapters.map(ch => ch.provider))];
|
||||||
|
|
||||||
// Only show filter if there are actual providers found
|
|
||||||
if (providers.length > 0) {
|
if (providers.length > 0) {
|
||||||
select.style.display = 'inline-block';
|
select.style.display = 'inline-block';
|
||||||
|
|
||||||
// Clear existing options except "All"
|
|
||||||
select.innerHTML = '<option value="all">All Providers</option>';
|
select.innerHTML = '<option value="all">All Providers</option>';
|
||||||
|
|
||||||
providers.forEach(prov => {
|
providers.forEach(prov => {
|
||||||
@@ -132,7 +124,6 @@ function populateProviderFilter() {
|
|||||||
select.appendChild(opt);
|
select.appendChild(opt);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Attach Event Listener
|
|
||||||
select.onchange = (e) => {
|
select.onchange = (e) => {
|
||||||
const selected = e.target.value;
|
const selected = e.target.value;
|
||||||
if (selected === 'all') {
|
if (selected === 'all') {
|
||||||
@@ -140,7 +131,7 @@ function populateProviderFilter() {
|
|||||||
} else {
|
} else {
|
||||||
filteredChapters = allChapters.filter(ch => ch.provider === selected);
|
filteredChapters = allChapters.filter(ch => ch.provider === selected);
|
||||||
}
|
}
|
||||||
currentPage = 1; // Reset to page 1 on filter change
|
currentPage = 1;
|
||||||
renderTable();
|
renderTable();
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@@ -208,7 +199,6 @@ function updatePagination() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function openReader(bookId, chapterId, provider) {
|
function openReader(bookId, chapterId, provider) {
|
||||||
localStorage.setItem('reader_prev_url', window.location.href);
|
|
||||||
const c = encodeURIComponent(chapterId);
|
const c = encodeURIComponent(chapterId);
|
||||||
const p = encodeURIComponent(provider);
|
const p = encodeURIComponent(provider);
|
||||||
window.location.href = `/read/${bookId}/${c}/${p}`;
|
window.location.href = `/read/${bookId}/${c}/${p}`;
|
||||||
@@ -2,14 +2,12 @@ let trendingBooks = [];
|
|||||||
let currentHeroIndex = 0;
|
let currentHeroIndex = 0;
|
||||||
let heroInterval;
|
let heroInterval;
|
||||||
|
|
||||||
// --- NAVBAR SCROLL ---
|
|
||||||
window.addEventListener('scroll', () => {
|
window.addEventListener('scroll', () => {
|
||||||
const nav = document.getElementById('navbar');
|
const nav = document.getElementById('navbar');
|
||||||
if (window.scrollY > 50) nav.classList.add('scrolled');
|
if (window.scrollY > 50) nav.classList.add('scrolled');
|
||||||
else nav.classList.remove('scrolled');
|
else nav.classList.remove('scrolled');
|
||||||
});
|
});
|
||||||
|
|
||||||
// --- SEARCH LOGIC ---
|
|
||||||
const searchInput = document.getElementById('search-input');
|
const searchInput = document.getElementById('search-input');
|
||||||
const searchResults = document.getElementById('search-results');
|
const searchResults = document.getElementById('search-results');
|
||||||
let searchTimeout;
|
let searchTimeout;
|
||||||
@@ -25,13 +23,11 @@ searchInput.addEventListener('input', (e) => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Debounce 300ms
|
|
||||||
searchTimeout = setTimeout(() => {
|
searchTimeout = setTimeout(() => {
|
||||||
fetchBookSearch(query);
|
fetchBookSearch(query);
|
||||||
}, 300);
|
}, 300);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Hide results on outside click
|
|
||||||
document.addEventListener('click', (e) => {
|
document.addEventListener('click', (e) => {
|
||||||
if (!e.target.closest('.search-wrapper')) {
|
if (!e.target.closest('.search-wrapper')) {
|
||||||
searchResults.classList.remove('active');
|
searchResults.classList.remove('active');
|
||||||
@@ -65,7 +61,7 @@ function renderSearchResults(results) {
|
|||||||
|
|
||||||
const item = document.createElement('a');
|
const item = document.createElement('a');
|
||||||
item.className = 'search-item';
|
item.className = 'search-item';
|
||||||
item.href = `/book/${book.id}`; // Direct navigation link
|
item.href = `/book/${book.id}`;
|
||||||
|
|
||||||
item.innerHTML = `
|
item.innerHTML = `
|
||||||
<img src="${img}" class="search-poster" alt="${title}">
|
<img src="${img}" class="search-poster" alt="${title}">
|
||||||
@@ -87,7 +83,6 @@ function renderSearchResults(results) {
|
|||||||
searchInput.style.borderRadius = '12px 12px 0 0';
|
searchInput.style.borderRadius = '12px 12px 0 0';
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- CAROUSEL LOGIC ---
|
|
||||||
function scrollCarousel(id, direction) {
|
function scrollCarousel(id, direction) {
|
||||||
const container = document.getElementById(id);
|
const container = document.getElementById(id);
|
||||||
if(container) {
|
if(container) {
|
||||||
@@ -96,10 +91,8 @@ function scrollCarousel(id, direction) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- FETCH DATA ---
|
|
||||||
async function init() {
|
async function init() {
|
||||||
try {
|
try {
|
||||||
// Fetch Trending
|
|
||||||
const res = await fetch('/api/books/trending');
|
const res = await fetch('/api/books/trending');
|
||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
|
|
||||||
@@ -110,7 +103,6 @@ async function init() {
|
|||||||
startHeroCycle();
|
startHeroCycle();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fetch Popular
|
|
||||||
const resPop = await fetch('/api/books/popular');
|
const resPop = await fetch('/api/books/popular');
|
||||||
const dataPop = await resPop.json();
|
const dataPop = await resPop.json();
|
||||||
if (dataPop.results) renderList('popular', dataPop.results);
|
if (dataPop.results) renderList('popular', dataPop.results);
|
||||||
@@ -120,7 +112,6 @@ async function init() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- HERO LOGIC ---
|
|
||||||
function startHeroCycle() {
|
function startHeroCycle() {
|
||||||
if(heroInterval) clearInterval(heroInterval);
|
if(heroInterval) clearInterval(heroInterval);
|
||||||
heroInterval = setInterval(() => {
|
heroInterval = setInterval(() => {
|
||||||
@@ -147,18 +138,15 @@ function updateHeroUI(book) {
|
|||||||
const heroPoster = document.getElementById('hero-poster');
|
const heroPoster = document.getElementById('hero-poster');
|
||||||
if(heroPoster) heroPoster.src = poster;
|
if(heroPoster) heroPoster.src = poster;
|
||||||
|
|
||||||
// Update background
|
|
||||||
const bg = document.getElementById('hero-bg-media');
|
const bg = document.getElementById('hero-bg-media');
|
||||||
if(bg) bg.src = banner;
|
if(bg) bg.src = banner;
|
||||||
|
|
||||||
// Setup Read Now Button
|
|
||||||
const readBtn = document.getElementById('read-btn');
|
const readBtn = document.getElementById('read-btn');
|
||||||
if (readBtn) {
|
if (readBtn) {
|
||||||
readBtn.onclick = () => window.location.href = `/book/${book.id}`;
|
readBtn.onclick = () => window.location.href = `/book/${book.id}`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- RENDER LIST ---
|
|
||||||
function renderList(id, list) {
|
function renderList(id, list) {
|
||||||
const container = document.getElementById(id);
|
const container = document.getElementById(id);
|
||||||
container.innerHTML = '';
|
container.innerHTML = '';
|
||||||
@@ -172,7 +160,6 @@ function renderList(id, list) {
|
|||||||
const el = document.createElement('div');
|
const el = document.createElement('div');
|
||||||
el.className = 'card';
|
el.className = 'card';
|
||||||
el.onclick = () => {
|
el.onclick = () => {
|
||||||
// Navigate to book page
|
|
||||||
window.location.href = `/book/${book.id}`;
|
window.location.href = `/book/${book.id}`;
|
||||||
};
|
};
|
||||||
el.innerHTML = `
|
el.innerHTML = `
|
||||||
@@ -7,8 +7,6 @@ const chapterLabel = document.getElementById('chapter-label');
|
|||||||
const prevBtn = document.getElementById('prev-chapter');
|
const prevBtn = document.getElementById('prev-chapter');
|
||||||
const nextBtn = document.getElementById('next-chapter');
|
const nextBtn = document.getElementById('next-chapter');
|
||||||
|
|
||||||
const prevUrl = localStorage.getItem('reader_prev_url');
|
|
||||||
|
|
||||||
const lnSettings = document.getElementById('ln-settings');
|
const lnSettings = document.getElementById('ln-settings');
|
||||||
const mangaSettings = document.getElementById('manga-settings');
|
const mangaSettings = document.getElementById('manga-settings');
|
||||||
|
|
||||||
@@ -64,7 +62,6 @@ function saveConfig() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function updateUIFromConfig() {
|
function updateUIFromConfig() {
|
||||||
// Light Novel
|
|
||||||
document.getElementById('font-size').value = config.ln.fontSize;
|
document.getElementById('font-size').value = config.ln.fontSize;
|
||||||
document.getElementById('font-size-value').textContent = config.ln.fontSize + 'px';
|
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('text-color').value = config.ln.textColor;
|
||||||
document.getElementById('bg-color').value = config.ln.bg;
|
document.getElementById('bg-color').value = config.ln.bg;
|
||||||
|
|
||||||
// Text alignment buttons
|
|
||||||
document.querySelectorAll('[data-align]').forEach(btn => {
|
document.querySelectorAll('[data-align]').forEach(btn => {
|
||||||
btn.classList.toggle('active', btn.dataset.align === config.ln.textAlign);
|
btn.classList.toggle('active', btn.dataset.align === config.ln.textAlign);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Manga
|
|
||||||
document.getElementById('display-mode').value = config.manga.mode;
|
document.getElementById('display-mode').value = config.manga.mode;
|
||||||
document.getElementById('image-fit').value = config.manga.imageFit;
|
document.getElementById('image-fit').value = config.manga.imageFit;
|
||||||
document.getElementById('page-spacing').value = config.manga.spacing;
|
document.getElementById('page-spacing').value = config.manga.spacing;
|
||||||
document.getElementById('page-spacing-value').textContent = config.manga.spacing + 'px';
|
document.getElementById('page-spacing-value').textContent = config.manga.spacing + 'px';
|
||||||
document.getElementById('preload-count').value = config.manga.preloadCount;
|
document.getElementById('preload-count').value = config.manga.preloadCount;
|
||||||
|
|
||||||
// Direction buttons
|
|
||||||
document.querySelectorAll('[data-direction]').forEach(btn => {
|
document.querySelectorAll('[data-direction]').forEach(btn => {
|
||||||
btn.classList.toggle('active', btn.dataset.direction === config.manga.direction);
|
btn.classList.toggle('active', btn.dataset.direction === config.manga.direction);
|
||||||
});
|
});
|
||||||
@@ -349,7 +343,6 @@ function loadLN(html) {
|
|||||||
reader.appendChild(div);
|
reader.appendChild(div);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Event Listeners - Light Novel
|
|
||||||
document.getElementById('font-size').addEventListener('input', (e) => {
|
document.getElementById('font-size').addEventListener('input', (e) => {
|
||||||
config.ln.fontSize = parseInt(e.target.value);
|
config.ln.fontSize = parseInt(e.target.value);
|
||||||
document.getElementById('font-size-value').textContent = e.target.value + 'px';
|
document.getElementById('font-size-value').textContent = e.target.value + 'px';
|
||||||
@@ -389,7 +382,6 @@ document.getElementById('bg-color').addEventListener('change', (e) => {
|
|||||||
saveConfig();
|
saveConfig();
|
||||||
});
|
});
|
||||||
|
|
||||||
// Text alignment
|
|
||||||
document.querySelectorAll('[data-align]').forEach(btn => {
|
document.querySelectorAll('[data-align]').forEach(btn => {
|
||||||
btn.addEventListener('click', () => {
|
btn.addEventListener('click', () => {
|
||||||
document.querySelectorAll('[data-align]').forEach(b => b.classList.remove('active'));
|
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 => {
|
document.querySelectorAll('[data-preset]').forEach(btn => {
|
||||||
btn.addEventListener('click', () => {
|
btn.addEventListener('click', () => {
|
||||||
const preset = btn.dataset.preset;
|
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) => {
|
document.getElementById('display-mode').addEventListener('change', (e) => {
|
||||||
config.manga.mode = e.target.value;
|
config.manga.mode = e.target.value;
|
||||||
saveConfig();
|
saveConfig();
|
||||||
@@ -448,7 +437,6 @@ document.getElementById('preload-count').addEventListener('change', (e) => {
|
|||||||
saveConfig();
|
saveConfig();
|
||||||
});
|
});
|
||||||
|
|
||||||
// Direction
|
|
||||||
document.querySelectorAll('[data-direction]').forEach(btn => {
|
document.querySelectorAll('[data-direction]').forEach(btn => {
|
||||||
btn.addEventListener('click', () => {
|
btn.addEventListener('click', () => {
|
||||||
document.querySelectorAll('[data-direction]').forEach(b => b.classList.remove('active'));
|
document.querySelectorAll('[data-direction]').forEach(b => b.classList.remove('active'));
|
||||||
@@ -459,7 +447,6 @@ document.querySelectorAll('[data-direction]').forEach(btn => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Navigation
|
|
||||||
prevBtn.addEventListener('click', () => {
|
prevBtn.addEventListener('click', () => {
|
||||||
const newChapter = String(parseInt(chapter) - 1);
|
const newChapter = String(parseInt(chapter) - 1);
|
||||||
updateURL(newChapter);
|
updateURL(newChapter);
|
||||||
@@ -481,12 +468,10 @@ function updateURL(newChapter) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById('back-btn').addEventListener('click', () => {
|
document.getElementById('back-btn').addEventListener('click', () => {
|
||||||
const prev = localStorage.getItem('reader_prev_url');
|
const parts = window.location.pathname.split('/');
|
||||||
if (prev) {
|
|
||||||
window.location.href = prev;
|
const mangaId = parts[2];
|
||||||
} else {
|
window.location.href = `/book/${mangaId}`;
|
||||||
history.back();
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
settingsBtn.addEventListener('click', () => {
|
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;
|
||||||
396
views/anime.html
396
views/anime.html
@@ -3,188 +3,39 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="icon" href="/public/waifuboards.ico" type="image/x-icon">
|
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||||
<title>WaifuBoard</title>
|
<title>WaifuBoard</title>
|
||||||
<link rel="stylesheet" href="../public/anime.css">
|
<link rel="stylesheet" href="/views/css/anime/anime.css">
|
||||||
<style>
|
|
||||||
/* --- MODAL STYLES --- */
|
|
||||||
.modal-overlay {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.85);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
z-index: 2000;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
}
|
|
||||||
.modal-overlay.active {
|
|
||||||
display: flex;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.modal-content {
|
|
||||||
background: #18181b;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: 24px;
|
|
||||||
padding: 2.5rem;
|
|
||||||
max-width: 650px;
|
|
||||||
width: 90%;
|
|
||||||
max-height: 80vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
position: relative;
|
|
||||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
||||||
transform: scale(0.95);
|
|
||||||
transition: transform 0.3s;
|
|
||||||
}
|
|
||||||
.modal-overlay.active .modal-content {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
.modal-close {
|
|
||||||
position: absolute;
|
|
||||||
top: 1.5rem;
|
|
||||||
right: 1.5rem;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
border: none;
|
|
||||||
color: white;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 50%;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
.modal-close:hover { background: rgba(255, 255, 255, 0.2); }
|
|
||||||
.modal-text {
|
|
||||||
line-height: 1.8;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
color: #e4e4e7;
|
|
||||||
}
|
|
||||||
.modal-title { margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; }
|
|
||||||
|
|
||||||
.read-more-btn {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: #8b5cf6;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 600;
|
|
||||||
padding: 0;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.25rem;
|
|
||||||
}
|
|
||||||
.read-more-btn:hover { text-decoration: underline; }
|
|
||||||
|
|
||||||
/* --- EPISODE TOOLBAR --- */
|
|
||||||
.episodes-header-row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
.episodes-header-row h2 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.8rem;
|
|
||||||
border-left: 4px solid #8b5cf6;
|
|
||||||
padding-left: 1rem;
|
|
||||||
}
|
|
||||||
.episode-search-wrapper {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.episode-search-input {
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: 99px;
|
|
||||||
padding: 0.6rem 1rem;
|
|
||||||
color: white;
|
|
||||||
width: 140px;
|
|
||||||
text-align: center;
|
|
||||||
font-family: inherit;
|
|
||||||
transition: 0.2s;
|
|
||||||
-moz-appearance: textfield; /* Firefox spinner hide */
|
|
||||||
}
|
|
||||||
.episode-search-input:focus {
|
|
||||||
border-color: #8b5cf6;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
/* Hide number spinners for Webkit/Chrome */
|
|
||||||
.episode-search-input::-webkit-outer-spin-button,
|
|
||||||
.episode-search-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
|
||||||
|
|
||||||
/* --- PAGINATION --- */
|
|
||||||
.pagination-controls {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-top: 2rem;
|
|
||||||
padding-top: 1rem;
|
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
.page-btn {
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
color: white;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.2s;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.page-btn:hover:not(:disabled) {
|
|
||||||
background: rgba(255, 255, 255, 0.15);
|
|
||||||
border-color: #8b5cf6;
|
|
||||||
}
|
|
||||||
.page-btn:disabled {
|
|
||||||
opacity: 0.4;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
.page-info {
|
|
||||||
color: #a1a1aa;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- Description Modal -->
|
|
||||||
<div class="modal-overlay" id="desc-modal">
|
<div class="modal-overlay" id="desc-modal">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<button class="modal-close" onclick="closeModal()">✕</button>
|
<button class="modal-close" onclick="closeModal()">✕</button>
|
||||||
<h2 class="modal-title">Synopsis</h2>
|
<h2 class="modal-title">Synopsis</h2>
|
||||||
<div class="modal-text" id="full-description"></div>
|
<div class="modal-text" id="full-description"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Back Button -->
|
|
||||||
<a href="/" class="back-btn">
|
<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>
|
<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
|
Back to Home
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Video Hero (Trailer on Loop) -->
|
|
||||||
<div class="hero-wrapper">
|
<div class="hero-wrapper">
|
||||||
<div class="video-background">
|
<div class="video-background">
|
||||||
<div id="player"></div>
|
<div id="player"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-overlay"></div>
|
<div class="hero-overlay"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="content-container">
|
||||||
|
|
||||||
<!-- Main Content -->
|
|
||||||
<div class="content-container">
|
|
||||||
|
|
||||||
<!-- Left Sidebar (Info) -->
|
|
||||||
<aside class="sidebar">
|
<aside class="sidebar">
|
||||||
<div class="poster-card">
|
<div class="poster-card">
|
||||||
<img id="poster" src="" alt="">
|
<img id="poster" src="" alt="">
|
||||||
@@ -217,13 +68,13 @@
|
|||||||
<div class="info-item">
|
<div class="info-item">
|
||||||
<h4>Main Characters</h4>
|
<h4>Main Characters</h4>
|
||||||
<div class="character-list" id="char-list">
|
<div class="character-list" id="char-list">
|
||||||
<!-- Populated via JS -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<!-- Right Content -->
|
|
||||||
<main class="main-content">
|
<main class="main-content">
|
||||||
<div class="anime-header">
|
<div class="anime-header">
|
||||||
<h1 class="anime-title" id="title">Loading...</h1>
|
<h1 class="anime-title" id="title">Loading...</h1>
|
||||||
@@ -243,7 +94,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Description Box -->
|
|
||||||
<div class="description-box">
|
<div class="description-box">
|
||||||
<div id="description-preview"></div>
|
<div id="description-preview"></div>
|
||||||
<button id="read-more-btn" class="read-more-btn" style="display: none;" onclick="openModal()">
|
<button id="read-more-btn" class="read-more-btn" style="display: none;" onclick="openModal()">
|
||||||
@@ -253,7 +104,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="episodes-section">
|
<div class="episodes-section">
|
||||||
<!-- Header Row with Search -->
|
|
||||||
<div class="episodes-header-row">
|
<div class="episodes-header-row">
|
||||||
<div class="section-title" style="margin:0; border:none; padding:0;">
|
<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>
|
<h2 style="font-size: 1.8rem; border-left: 4px solid #8b5cf6; padding-left: 1rem;">Episodes</h2>
|
||||||
@@ -265,7 +116,7 @@
|
|||||||
|
|
||||||
<div class="episodes-grid" id="episodes-grid"></div>
|
<div class="episodes-grid" id="episodes-grid"></div>
|
||||||
|
|
||||||
<!-- Pagination Controls -->
|
|
||||||
<div class="pagination-controls" id="pagination-controls">
|
<div class="pagination-controls" id="pagination-controls">
|
||||||
<button class="page-btn" id="prev-page" onclick="changePage(-1)">Previous</button>
|
<button class="page-btn" id="prev-page" onclick="changePage(-1)">Previous</button>
|
||||||
<span class="page-info" id="page-info">Page 1 of 1</span>
|
<span class="page-info" id="page-info">Page 1 of 1</span>
|
||||||
@@ -274,213 +125,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script src="../src/scripts/anime/anime.js"></script>
|
||||||
const animeId = window.location.pathname.split('/').pop();
|
|
||||||
let player;
|
|
||||||
|
|
||||||
// Episode State
|
|
||||||
let totalEpisodes = 0;
|
|
||||||
let currentPage = 1;
|
|
||||||
const itemsPerPage = 12;
|
|
||||||
|
|
||||||
// Load YouTube API
|
|
||||||
var tag = document.createElement('script');
|
|
||||||
tag.src = "https://www.youtube.com/iframe_api";
|
|
||||||
var firstScriptTag = document.getElementsByTagName('script')[0];
|
|
||||||
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
|
||||||
|
|
||||||
async function loadAnime() {
|
|
||||||
try {
|
|
||||||
const res = await fetch(`/api/anime/${animeId}`);
|
|
||||||
const data = await res.json();
|
|
||||||
|
|
||||||
if(data.error) {
|
|
||||||
document.getElementById('title').innerText = "Anime Not Found";
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Populate Data
|
|
||||||
const title = data.title.english || data.title.romaji;
|
|
||||||
document.title = `${title} | 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>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -5,28 +5,28 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<base href="/">
|
<base href="/">
|
||||||
<title>WaifuBoard Book</title>
|
<title>WaifuBoard Book</title>
|
||||||
<link rel="icon" href="/public/waifuboards.ico" type="image/x-icon">
|
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||||
<link rel="stylesheet" href="../public/book.css">
|
<link rel="stylesheet" href="/views/css/books/book.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- Back Button -->
|
|
||||||
<a href="/books" class="back-btn">
|
<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>
|
<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
|
Back to Books
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Hero Section -->
|
|
||||||
<div class="hero-wrapper">
|
<div class="hero-wrapper">
|
||||||
<div class="hero-background">
|
<div class="hero-background">
|
||||||
<img id="hero-bg" src="" alt="">
|
<img id="hero-bg" src="" alt="">
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-overlay"></div>
|
<div class="hero-overlay"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="content-container">
|
||||||
|
|
||||||
<div class="content-container">
|
|
||||||
|
|
||||||
<!-- Left Sidebar -->
|
|
||||||
<aside class="sidebar">
|
<aside class="sidebar">
|
||||||
<div class="poster-card">
|
<div class="poster-card">
|
||||||
<img id="poster" src="" alt="">
|
<img id="poster" src="" alt="">
|
||||||
@@ -47,13 +47,13 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="info-item">
|
<div class="info-item">
|
||||||
<h4>Published</h4>
|
<h4>Published</h4>
|
||||||
<!-- Updated ID to avoid CSS conflict -->
|
|
||||||
<span id="published-date">--</span>
|
<span id="published-date">--</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<!-- Right Content -->
|
|
||||||
<main class="main-content">
|
<main class="main-content">
|
||||||
<div class="book-header">
|
<div class="book-header">
|
||||||
<h1 class="book-title" id="title">Loading...</h1>
|
<h1 class="book-title" id="title">Loading...</h1>
|
||||||
@@ -75,7 +75,7 @@
|
|||||||
<div class="section-title">
|
<div class="section-title">
|
||||||
<h2>Chapters</h2>
|
<h2>Chapters</h2>
|
||||||
<div class="chapter-controls">
|
<div class="chapter-controls">
|
||||||
<!-- New Provider Filter Dropdown -->
|
|
||||||
<select id="provider-filter" class="filter-select" style="display: none; margin-left: 15px;">
|
<select id="provider-filter" class="filter-select" style="display: none; margin-left: 15px;">
|
||||||
<option value="all">All Providers</option>
|
<option value="all">All Providers</option>
|
||||||
</select>
|
</select>
|
||||||
@@ -88,18 +88,18 @@
|
|||||||
<tr>
|
<tr>
|
||||||
<th>#</th>
|
<th>#</th>
|
||||||
<th>Title</th>
|
<th>Title</th>
|
||||||
<!-- Date Column Removed -->
|
|
||||||
<th>Provider</th>
|
<th>Provider</th>
|
||||||
<th>Action</th>
|
<th>Action</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody id="chapters-body">
|
<tbody id="chapters-body">
|
||||||
<!-- Populated via JS -->
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Pagination -->
|
|
||||||
<div class="pagination-controls" id="pagination" style="display:none;">
|
<div class="pagination-controls" id="pagination" style="display:none;">
|
||||||
<button class="page-btn" id="prev-page">Previous</button>
|
<button class="page-btn" id="prev-page">Previous</button>
|
||||||
<span class="page-info" id="page-info">Page 1</span>
|
<span class="page-info" id="page-info">Page 1</span>
|
||||||
@@ -108,8 +108,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="../public/book.js"></script>
|
<script src="../src/scripts/books/book.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -4,16 +4,16 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>WaifuBoard Books</title>
|
<title>WaifuBoard Books</title>
|
||||||
<link rel="stylesheet" href="../public/books.css">
|
<link rel="stylesheet" href="/views/css/books/books.css">
|
||||||
<script src="../public/books.js" defer></script>
|
<script src="../src/scripts/books/books.js" defer></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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<nav class="navbar" id="navbar">
|
<nav class="navbar" id="navbar">
|
||||||
<a href="/" class="nav-brand">
|
<a href="/" class="nav-brand">
|
||||||
<div class="brand-icon">
|
<div class="brand-icon">
|
||||||
<img src="/public/waifuboards.ico" alt="WF Logo">
|
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
|
||||||
</div>
|
</div>
|
||||||
WaifuBoard
|
WaifuBoard
|
||||||
</a>
|
</a>
|
||||||
@@ -32,10 +32,10 @@
|
|||||||
<input type="text" class="search-input" id="search-input" placeholder="Search manga..." autocomplete="off">
|
<input type="text" class="search-input" id="search-input" placeholder="Search manga..." autocomplete="off">
|
||||||
<div class="search-results" id="search-results"></div>
|
<div class="search-results" id="search-results"></div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- HERO -->
|
|
||||||
<div class="hero-wrapper">
|
<div class="hero-wrapper">
|
||||||
<div class="hero-background">
|
<div class="hero-background">
|
||||||
<img id="hero-bg-media" src="" alt="">
|
<img id="hero-bg-media" src="" alt="">
|
||||||
</div>
|
</div>
|
||||||
@@ -59,9 +59,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="section-header"><div class="section-title">Trending Books</div></div>
|
<div class="section-header"><div class="section-title">Trending Books</div></div>
|
||||||
<div class="carousel-wrapper">
|
<div class="carousel-wrapper">
|
||||||
@@ -79,7 +79,7 @@
|
|||||||
<button class="scroll-btn right" onclick="scrollCarousel('popular', 1)">›</button>
|
<button class="scroll-btn right" onclick="scrollCarousel('popular', 1)">›</button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -19,7 +19,6 @@ body {
|
|||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- BACK BUTTON --- */
|
|
||||||
.back-btn {
|
.back-btn {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 2rem;
|
top: 2rem;
|
||||||
@@ -45,11 +44,10 @@ body {
|
|||||||
transform: translateX(-5px);
|
transform: translateX(-5px);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- HERO VIDEO SECTION --- */
|
|
||||||
.hero-wrapper {
|
.hero-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 85vh; /* Covers most of the screen */
|
height: 85vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -57,7 +55,7 @@ body {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%) scale(1.35); /* Zoom to remove black bars */
|
transform: translate(-50%, -50%) scale(1.35);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
@@ -73,12 +71,11 @@ body {
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- CONTENT LAYOUT --- */
|
|
||||||
.content-container {
|
.content-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
max-width: 1600px;
|
max-width: 1600px;
|
||||||
margin: -350px auto 0 auto; /* Pull content up over the video */
|
margin: -350px auto 0 auto;
|
||||||
padding: 0 3rem 4rem 3rem;
|
padding: 0 3rem 4rem 3rem;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 280px 1fr;
|
grid-template-columns: 280px 1fr;
|
||||||
@@ -86,7 +83,6 @@ body {
|
|||||||
animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* LEFT SIDEBAR */
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -129,11 +125,10 @@ body {
|
|||||||
.character-item { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; }
|
.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%; }
|
.char-dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
|
||||||
|
|
||||||
/* RIGHT MAIN CONTENT */
|
|
||||||
.main-content {
|
.main-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-end; /* Align header to bottom of hero area */
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.anime-header {
|
.anime-header {
|
||||||
@@ -219,7 +214,6 @@ body {
|
|||||||
border: 1px solid rgba(255,255,255,0.05);
|
border: 1px solid rgba(255,255,255,0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* EPISODES */
|
|
||||||
.episodes-section {
|
.episodes-section {
|
||||||
margin-top: 4rem;
|
margin-top: 4rem;
|
||||||
}
|
}
|
||||||
@@ -266,5 +260,150 @@ body {
|
|||||||
.main-content { text-align: center; align-items: center; }
|
.main-content { text-align: center; align-items: center; }
|
||||||
.anime-title { font-size: 2.5rem; }
|
.anime-title { font-size: 2.5rem; }
|
||||||
.meta-row { justify-content: center; }
|
.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;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- NAV --- */
|
|
||||||
.navbar {
|
.navbar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: var(--nav-height);
|
height: var(--nav-height);
|
||||||
@@ -71,7 +70,6 @@ body {
|
|||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.nav-center {
|
.nav-center {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
@@ -101,7 +99,6 @@ body {
|
|||||||
border: 1px solid rgba(255,255,255,0.1);
|
border: 1px solid rgba(255,255,255,0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* SEARCH BAR */
|
|
||||||
.search-wrapper {
|
.search-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 250px;
|
width: 250px;
|
||||||
@@ -130,7 +127,6 @@ body {
|
|||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- HERO --- */
|
|
||||||
.hero-wrapper {
|
.hero-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 85vh;
|
height: 85vh;
|
||||||
@@ -162,7 +158,7 @@ body {
|
|||||||
width: 260px; height: 380px; border-radius: var(--radius-lg);
|
width: 260px; height: 380px; border-radius: var(--radius-lg);
|
||||||
overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
|
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;
|
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; }
|
.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 { 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); }
|
.btn-blur:hover { background: rgba(255, 255, 255, 0.2); }
|
||||||
|
|
||||||
/* --- CAROUSELS --- */
|
|
||||||
.section { max-width: 1700px; margin: 0 auto; padding: 2rem 3rem; }
|
.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-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
|
||||||
.section-title { font-size: 1.8rem; font-weight: 800; }
|
.section-title { font-size: 1.8rem; font-weight: 800; }
|
||||||
@@ -215,7 +210,6 @@ body {
|
|||||||
.scroll-btn.left { left: -25px; }
|
.scroll-btn.left { left: -25px; }
|
||||||
.scroll-btn.right { right: -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 { min-width: 220px; cursor: pointer; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
|
||||||
.card:hover { transform: translateY(-8px); }
|
.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; }
|
.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 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); }
|
.card-content p { margin: 4px 0 0 0; font-size: 0.85rem; color: var(--text-secondary); }
|
||||||
|
|
||||||
/* SKELETON LOADING (The "Non-Dumb" Metadata fix) */
|
|
||||||
.skeleton {
|
.skeleton {
|
||||||
background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
|
background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
|
||||||
background-size: 200% 100%;
|
background-size: 200% 100%;
|
||||||
@@ -243,7 +236,7 @@ body {
|
|||||||
.search-wrapper {
|
.search-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
z-index: 2000; /* Ensure it sits above hero content */
|
z-index: 2000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-input {
|
.search-input {
|
||||||
@@ -261,7 +254,7 @@ body {
|
|||||||
background: rgba(0, 0, 0, 0.8);
|
background: rgba(0, 0, 0, 0.8);
|
||||||
border-color: var(--accent);
|
border-color: var(--accent);
|
||||||
box-shadow: 0 0 15px var(--accent-glow);
|
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 {
|
.search-icon {
|
||||||
@@ -273,7 +266,6 @@ body {
|
|||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* The Dropdown Container */
|
|
||||||
.search-results {
|
.search-results {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
@@ -285,7 +277,7 @@ body {
|
|||||||
border-top: none;
|
border-top: none;
|
||||||
border-radius: 0 0 12px 12px;
|
border-radius: 0 0 12px 12px;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
display: none; /* Hidden by default */
|
display: none;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.25rem;
|
gap: 0.25rem;
|
||||||
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
||||||
@@ -297,7 +289,6 @@ body {
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Individual Result Item */
|
|
||||||
.search-item {
|
.search-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -350,7 +341,6 @@ body {
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Scrollbar for results */
|
|
||||||
.search-results::-webkit-scrollbar {
|
.search-results::-webkit-scrollbar {
|
||||||
width: 6px;
|
width: 6px;
|
||||||
}
|
}
|
||||||
@@ -358,4 +348,3 @@ body {
|
|||||||
background: rgba(255,255,255,0.2);
|
background: rgba(255,255,255,0.2);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
:root {
|
:root {
|
||||||
--bg-base: #000000;
|
--bg-base: #000000;
|
||||||
--bg-overlay: #101012;
|
--bg-overlay: #101012;
|
||||||
--accent: #8b5cf6; /* Keeping your purple accent for brand consistency */
|
--accent: #8b5cf6;
|
||||||
--accent-dark: #7c3aed;
|
--accent-dark: #7c3aed;
|
||||||
--text-primary: #ffffff;
|
--text-primary: #ffffff;
|
||||||
--text-secondary: #a1a1aa;
|
--text-secondary: #a1a1aa;
|
||||||
@@ -10,16 +10,16 @@
|
|||||||
--glass-border: 1px solid rgba(255, 255, 255, 0.1);
|
--glass-border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
--glass-bg: rgba(20, 20, 23, 0.7);
|
--glass-bg: rgba(20, 20, 23, 0.7);
|
||||||
|
|
||||||
/* Plyr Theme Variables - YouTube Style */
|
|
||||||
--plyr-color-main: #8b5cf6;
|
--plyr-color-main: #8b5cf6;
|
||||||
--plyr-video-control-color: #ffffff;
|
--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-background: rgba(28, 28, 30, 0.95);
|
||||||
--plyr-menu-color: #ffffff;
|
--plyr-menu-color: #ffffff;
|
||||||
--plyr-menu-border-color: rgba(255, 255, 255, 0.1);
|
--plyr-menu-border-color: rgba(255, 255, 255, 0.1);
|
||||||
--plyr-font-family: 'Inter', sans-serif;
|
--plyr-font-family: 'Inter', sans-serif;
|
||||||
|
|
||||||
/* Custom YT-like sizing */
|
|
||||||
--plyr-control-icon-size: 18px;
|
--plyr-control-icon-size: 18px;
|
||||||
--plyr-control-spacing: 10px;
|
--plyr-control-spacing: 10px;
|
||||||
}
|
}
|
||||||
@@ -35,7 +35,6 @@ body {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- TOP BAR --- */
|
|
||||||
.top-bar {
|
.top-bar {
|
||||||
padding: 1.5rem 2rem;
|
padding: 1.5rem 2rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -73,7 +72,6 @@ body {
|
|||||||
border-color: rgba(139, 92, 246, 0.3);
|
border-color: rgba(139, 92, 246, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- THEATER LAYOUT --- */
|
|
||||||
.theater-container {
|
.theater-container {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -88,7 +86,6 @@ body {
|
|||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- TOOLBAR (Extensions + Toggles) --- */
|
|
||||||
.player-toolbar {
|
.player-toolbar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -100,7 +97,6 @@ body {
|
|||||||
z-index: 50;
|
z-index: 50;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Modern Pill Dropdown */
|
|
||||||
.extension-select {
|
.extension-select {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
@@ -127,7 +123,6 @@ body {
|
|||||||
border-color: var(--accent);
|
border-color: var(--accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* SUB / DUB TOGGLE */
|
|
||||||
.sd-toggle {
|
.sd-toggle {
|
||||||
display: flex;
|
display: flex;
|
||||||
background: var(--glass-bg);
|
background: var(--glass-bg);
|
||||||
@@ -154,7 +149,6 @@ body {
|
|||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* The sliding pill background */
|
|
||||||
.sd-bg {
|
.sd-bg {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 4px;
|
top: 4px;
|
||||||
@@ -168,12 +162,10 @@ body {
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Toggle State Logic handled via class on parent */
|
|
||||||
.sd-toggle[data-state="dub"] .sd-bg {
|
.sd-toggle[data-state="dub"] .sd-bg {
|
||||||
transform: translateX(100%);
|
transform: translateX(100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- VIDEO WRAPPER --- */
|
|
||||||
.video-wrapper {
|
.video-wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
aspect-ratio: 16/9;
|
aspect-ratio: 16/9;
|
||||||
@@ -195,7 +187,6 @@ video {
|
|||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Loading Overlay */
|
|
||||||
.loading-overlay {
|
.loading-overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
@@ -220,7 +211,6 @@ video {
|
|||||||
|
|
||||||
@keyframes spin { 100% { transform: rotate(360deg); } }
|
@keyframes spin { 100% { transform: rotate(360deg); } }
|
||||||
|
|
||||||
/* --- CONTROLS --- */
|
|
||||||
.controls-area {
|
.controls-area {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -280,15 +270,11 @@ video {
|
|||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- PLYR YOUTUBE-STYLE OVERRIDES --- */
|
|
||||||
|
|
||||||
/* 1. Base Video Container */
|
|
||||||
.plyr--video {
|
.plyr--video {
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
font-family: 'Inter', sans-serif;
|
font-family: 'Inter', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 2. Controls Container (Gradient Overlay) */
|
|
||||||
.plyr__controls {
|
.plyr__controls {
|
||||||
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%) !important;
|
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;
|
padding: 10px 20px 20px 20px !important;
|
||||||
@@ -296,24 +282,20 @@ video {
|
|||||||
border-radius: 0 0 20px 20px !important;
|
border-radius: 0 0 20px 20px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 3. Progress Bar (YouTube Style) */
|
|
||||||
.plyr__progress input[type=range] {
|
.plyr__progress input[type=range] {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* The track */
|
|
||||||
.plyr--full-ui input[type=range] {
|
.plyr--full-ui input[type=range] {
|
||||||
color: var(--accent); /* Your brand color instead of YouTube red */
|
color: var(--accent);
|
||||||
height: 4px; /* Thinner by default */
|
height: 4px;
|
||||||
transition: height 0.1s ease;
|
transition: height 0.1s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Expand progress bar on hover like YT */
|
|
||||||
.plyr__progress__container:hover input[type=range] {
|
.plyr__progress__container:hover input[type=range] {
|
||||||
height: 6px;
|
height: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 4. Buttons (Clean Icons, No Background) */
|
|
||||||
.plyr__control {
|
.plyr__control {
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
@@ -332,10 +314,9 @@ video {
|
|||||||
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
|
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 5. Center Play Button (Large, Pulsing) */
|
|
||||||
.plyr__control--overlaid {
|
.plyr__control--overlaid {
|
||||||
background: rgba(0, 0, 0, 0.6) !important;
|
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%;
|
border-radius: 50%;
|
||||||
padding: 1.5rem !important;
|
padding: 1.5rem !important;
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
@@ -353,14 +334,12 @@ video {
|
|||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 6. Time Display */
|
|
||||||
.plyr__time {
|
.plyr__time {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
|
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 7. Menus (Floating Glass Panels) */
|
|
||||||
.plyr__menu__container {
|
.plyr__menu__container {
|
||||||
background: rgba(28, 28, 30, 0.95) !important;
|
background: rgba(28, 28, 30, 0.95) !important;
|
||||||
backdrop-filter: blur(12px);
|
backdrop-filter: blur(12px);
|
||||||
@@ -368,7 +347,7 @@ video {
|
|||||||
border-radius: 12px !important;
|
border-radius: 12px !important;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
|
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 {
|
.plyr__menu__container .plyr__control {
|
||||||
@@ -383,15 +362,13 @@ video {
|
|||||||
background: rgba(255,255,255,0.1) !important;
|
background: rgba(255,255,255,0.1) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Active menu item */
|
|
||||||
.plyr__menu__container .plyr__control[aria-checked="true"] {
|
.plyr__menu__container .plyr__control[aria-checked="true"] {
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
}
|
}
|
||||||
.plyr__menu__container .plyr__control[aria-checked="true"]::after {
|
.plyr__menu__container .plyr__control[aria-checked="true"]::after {
|
||||||
background: var(--accent); /* The checkmark */
|
background: var(--accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 8. Tooltips (Time preview) */
|
|
||||||
.plyr__tooltip {
|
.plyr__tooltip {
|
||||||
background: rgba(28, 28, 30, 0.9);
|
background: rgba(28, 28, 30, 0.9);
|
||||||
border: 1px solid rgba(255,255,255,0.1);
|
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);
|
box-shadow: 0 2px 10px rgba(0,0,0,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 9. Subtitles (Cinematic) */
|
|
||||||
.plyr__cues {
|
.plyr__cues {
|
||||||
margin-bottom: 50px !important; /* Push subtitles up so controls don't overlap */
|
margin-bottom: 50px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.plyr__cues span {
|
.plyr__cues span {
|
||||||
@@ -416,3 +392,22 @@ video {
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
text-shadow: 0 2px 4px rgba(0,0,0,0.8);
|
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;
|
--nav-height: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Global Reset */
|
|
||||||
* { box-sizing: border-box; outline: none; }
|
* { box-sizing: border-box; outline: none; }
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@@ -24,7 +23,6 @@ body {
|
|||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Back Button */
|
|
||||||
.back-btn {
|
.back-btn {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 2rem; left: 2rem; z-index: 100;
|
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); }
|
.back-btn:hover { background: rgba(255, 255, 255, 0.15); transform: translateX(-5px); }
|
||||||
|
|
||||||
/* Hero */
|
|
||||||
.hero-wrapper {
|
.hero-wrapper {
|
||||||
position: relative; width: 100%; height: 60vh; overflow: hidden;
|
position: relative; width: 100%; height: 60vh; overflow: hidden;
|
||||||
}
|
}
|
||||||
@@ -48,28 +45,25 @@ body {
|
|||||||
background: linear-gradient(to bottom, transparent 0%, var(--bg-base) 100%);
|
background: linear-gradient(to bottom, transparent 0%, var(--bg-base) 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Content Layout - Pulled Up Higher */
|
|
||||||
.content-container {
|
.content-container {
|
||||||
position: relative; z-index: 10;
|
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;
|
padding: 0 3rem 4rem 3rem;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 260px 1fr;
|
grid-template-columns: 260px 1fr;
|
||||||
gap: 3rem;
|
gap: 3rem;
|
||||||
align-items: flex-start; /* Important for sticky sidebar */
|
align-items: flex-start;
|
||||||
animation: slideUp 0.8s ease;
|
animation: slideUp 0.8s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hero Content Overlay (Hidden) */
|
|
||||||
.hero-content { display: none; }
|
.hero-content { display: none; }
|
||||||
|
|
||||||
/* Left Sidebar - Sticky Poster */
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: calc(var(--nav-height) + 2rem); /* Sticks to top when scrolling */
|
top: calc(var(--nav-height) + 2rem);
|
||||||
align-self: flex-start;
|
align-self: flex-start;
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
}
|
}
|
||||||
@@ -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 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; }
|
.info-item span { font-weight: 600; font-size: 0.95rem; }
|
||||||
|
|
||||||
/* Main Content */
|
|
||||||
.main-content {
|
.main-content {
|
||||||
display: flex; flex-direction: column;
|
display: flex; flex-direction: column;
|
||||||
padding-top: 4rem; /* Adjusted spacing */
|
padding-top: 4rem;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Header Section */
|
|
||||||
.book-header { margin-bottom: 1.5rem; }
|
.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); }
|
.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 { 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); }
|
.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; }
|
||||||
#description { display: none; } /* Hides description box */
|
#year { display: none; }
|
||||||
#year { display: none; } /* Hides year pill */
|
|
||||||
|
|
||||||
.action-row { display: flex; gap: 1rem; }
|
.action-row { display: flex; gap: 1rem; }
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
@@ -116,7 +107,6 @@ body {
|
|||||||
}
|
}
|
||||||
.btn-primary:hover { transform: scale(1.05); }
|
.btn-primary:hover { transform: scale(1.05); }
|
||||||
|
|
||||||
/* Fixed Add to Library Button (Matching books.html style) */
|
|
||||||
.btn-secondary {
|
.btn-secondary {
|
||||||
padding: 0.8rem 2rem;
|
padding: 0.8rem 2rem;
|
||||||
background: rgba(255,255,255,0.1);
|
background: rgba(255,255,255,0.1);
|
||||||
@@ -132,7 +122,6 @@ body {
|
|||||||
background: rgba(255,255,255,0.2);
|
background: rgba(255,255,255,0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Legacy class support if HTML uses btn-blur */
|
|
||||||
.btn-blur {
|
.btn-blur {
|
||||||
padding: 0.8rem 2rem;
|
padding: 0.8rem 2rem;
|
||||||
background: rgba(255,255,255,0.1);
|
background: rgba(255,255,255,0.1);
|
||||||
@@ -146,8 +135,6 @@ body {
|
|||||||
}
|
}
|
||||||
.btn-blur:hover { background: rgba(255,255,255,0.2); }
|
.btn-blur:hover { background: rgba(255,255,255,0.2); }
|
||||||
|
|
||||||
|
|
||||||
/* Chapters Section */
|
|
||||||
.chapters-section { margin-top: 1rem; }
|
.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 { 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; }
|
.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 {
|
.filter-select {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
background-color: var(--bg-surface); /* Dark background */
|
background-color: var(--bg-surface);
|
||||||
color: var(--text-primary); /* White text */
|
color: var(--text-primary);
|
||||||
border: 1px solid rgba(255,255,255,0.1);
|
border: 1px solid rgba(255,255,255,0.1);
|
||||||
padding: 0.5rem 2rem 0.5rem 1rem;
|
padding: 0.5rem 2rem 0.5rem 1rem;
|
||||||
border-radius: 99px;
|
border-radius: 99px;
|
||||||
@@ -191,7 +178,6 @@ body {
|
|||||||
background-color: var(--bg-surface-hover);
|
background-color: var(--bg-surface-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Force Dropdown Options Background (browser dependent but works on most modern ones) */
|
|
||||||
.filter-select option {
|
.filter-select option {
|
||||||
background-color: var(--bg-surface);
|
background-color: var(--bg-surface);
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
@@ -204,7 +190,6 @@ body {
|
|||||||
}
|
}
|
||||||
.read-btn-small:hover { background: #7c3aed; }
|
.read-btn-small:hover { background: #7c3aed; }
|
||||||
|
|
||||||
/* Pagination */
|
|
||||||
.pagination-controls {
|
.pagination-controls {
|
||||||
display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; align-items: center;
|
display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; align-items: center;
|
||||||
}
|
}
|
||||||
@@ -220,7 +205,7 @@ body {
|
|||||||
@media (max-width: 1024px) {
|
@media (max-width: 1024px) {
|
||||||
.hero-wrapper { height: 40vh; }
|
.hero-wrapper { height: 40vh; }
|
||||||
.content-container { grid-template-columns: 1fr; margin-top: -80px; padding: 0 1.5rem 4rem 1.5rem; }
|
.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; }
|
.main-content { padding-top: 0; align-items: center; text-align: center; }
|
||||||
.book-title { font-size: 2.2rem; }
|
.book-title { font-size: 2.2rem; }
|
||||||
@@ -21,7 +21,6 @@ body {
|
|||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- NAV --- */
|
|
||||||
.navbar {
|
.navbar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: var(--nav-height);
|
height: var(--nav-height);
|
||||||
@@ -100,7 +99,6 @@ body {
|
|||||||
border: 1px solid rgba(255,255,255,0.1);
|
border: 1px solid rgba(255,255,255,0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* SEARCH BAR */
|
|
||||||
.search-wrapper {
|
.search-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
@@ -134,7 +132,6 @@ body {
|
|||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Dropdown */
|
|
||||||
.search-results {
|
.search-results {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
@@ -200,7 +197,6 @@ body {
|
|||||||
|
|
||||||
.rating-pill { color: #4ade80; font-weight: 700; }
|
.rating-pill { color: #4ade80; font-weight: 700; }
|
||||||
|
|
||||||
/* --- HERO --- */
|
|
||||||
.hero-wrapper {
|
.hero-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 85vh;
|
height: 85vh;
|
||||||
@@ -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 { 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); }
|
.btn-blur:hover { background: rgba(255, 255, 255, 0.2); }
|
||||||
|
|
||||||
/* --- SECTIONS --- */
|
|
||||||
.section { max-width: 1700px; margin: 0 auto; padding: 2rem 3rem; }
|
.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-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
|
||||||
.section-title { font-size: 1.8rem; font-weight: 800; }
|
.section-title { font-size: 1.8rem; font-weight: 800; }
|
||||||
@@ -285,7 +280,6 @@ body {
|
|||||||
.scroll-btn.left { left: -25px; }
|
.scroll-btn.left { left: -25px; }
|
||||||
.scroll-btn.right { right: -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 { min-width: 220px; cursor: pointer; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
|
||||||
.card:hover { transform: translateY(-8px); }
|
.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; }
|
.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 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); } }
|
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
||||||
|
|
||||||
/* --- MOBILE --- */
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
:root { --nav-height: auto; }
|
:root { --nav-height: auto; }
|
||||||
.navbar { padding: 1rem; flex-wrap: wrap; gap: 1rem; background: rgba(9,9,11,0.98); position: fixed; }
|
.navbar { padding: 1rem; flex-wrap: wrap; gap: 1rem; background: rgba(9,9,11,0.98); position: fixed; }
|
||||||
@@ -37,7 +37,6 @@ body {
|
|||||||
|
|
||||||
.hidden { display: none !important; }
|
.hidden { display: none !important; }
|
||||||
|
|
||||||
/* ===== TOP BAR ===== */
|
|
||||||
.top-bar {
|
.top-bar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0; left: 0; right: 0;
|
top: 0; left: 0; right: 0;
|
||||||
@@ -113,7 +112,6 @@ body {
|
|||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===== READER CONTAINER ===== */
|
|
||||||
#reader {
|
#reader {
|
||||||
margin-top: 64px;
|
margin-top: 64px;
|
||||||
padding: 2rem 1rem;
|
padding: 2rem 1rem;
|
||||||
@@ -124,7 +122,6 @@ body {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===== MANGA STYLES ===== */
|
|
||||||
.manga-container {
|
.manga-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: var(--manga-max-width, 1200px);
|
max-width: var(--manga-max-width, 1200px);
|
||||||
@@ -201,7 +198,6 @@ body {
|
|||||||
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6);
|
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===== LIGHT NOVEL STYLES ===== */
|
|
||||||
.ln-content {
|
.ln-content {
|
||||||
max-width: var(--ln-max-width, 750px);
|
max-width: var(--ln-max-width, 750px);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -224,7 +220,6 @@ body {
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===== SETTINGS PANEL ===== */
|
|
||||||
.settings-panel {
|
.settings-panel {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 0;
|
right: 0;
|
||||||
@@ -337,7 +332,6 @@ body {
|
|||||||
font-size: 0.8125rem;
|
font-size: 0.8125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Range Inputs */
|
|
||||||
input[type="range"] {
|
input[type="range"] {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: var(--radius-full);
|
border-radius: var(--radius-full);
|
||||||
@@ -375,7 +369,6 @@ input[type="range"]::-moz-range-thumb {
|
|||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Select & Color Inputs */
|
|
||||||
select, input[type="color"], input[type="number"] {
|
select, input[type="color"], input[type="number"] {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0.625rem 0.875rem;
|
padding: 0.625rem 0.875rem;
|
||||||
@@ -405,7 +398,6 @@ input[type="color"] {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Presets */
|
|
||||||
.presets {
|
.presets {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
@@ -434,7 +426,6 @@ input[type="color"] {
|
|||||||
box-shadow: 0 4px 15px var(--accent-light);
|
box-shadow: 0 4px 15px var(--accent-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Toggle Switches */
|
|
||||||
.toggle-group {
|
.toggle-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
@@ -468,7 +459,6 @@ input[type="color"] {
|
|||||||
box-shadow: 0 2px 10px var(--accent-light);
|
box-shadow: 0 2px 10px var(--accent-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Overlay */
|
|
||||||
.overlay {
|
.overlay {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
@@ -484,7 +474,6 @@ input[type="color"] {
|
|||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Loading State */
|
|
||||||
.loading-spinner {
|
.loading-spinner {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
@@ -509,7 +498,6 @@ input[type="color"] {
|
|||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Scrollbar */
|
|
||||||
.settings-panel::-webkit-scrollbar {
|
.settings-panel::-webkit-scrollbar {
|
||||||
width: 8px;
|
width: 8px;
|
||||||
}
|
}
|
||||||
@@ -527,7 +515,6 @@ input[type="color"] {
|
|||||||
background: var(--bg-hover);
|
background: var(--bg-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive */
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.settings-panel {
|
.settings-panel {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -563,7 +550,6 @@ input[type="color"] {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Image Fit Modes */
|
|
||||||
.fit-width {
|
.fit-width {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
height: auto !important;
|
height: auto !important;
|
||||||
246
views/index.html
246
views/index.html
@@ -4,15 +4,15 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>WaifuBoard</title>
|
<title>WaifuBoard</title>
|
||||||
<link rel="stylesheet" href="../public/home.css">
|
<link rel="stylesheet" href="/views/css/anime/home.css">
|
||||||
<link rel="icon" href="/public/waifuboards.ico" type="image/x-icon">
|
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<nav class="navbar" id="navbar">
|
<nav class="navbar" id="navbar">
|
||||||
<a href="/" class="nav-brand">
|
<a href="/" class="nav-brand">
|
||||||
<div class="brand-icon">
|
<div class="brand-icon">
|
||||||
<img src="/public/waifuboards.ico" alt="WF Logo">
|
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
|
||||||
</div>
|
</div>
|
||||||
WaifuBoard
|
WaifuBoard
|
||||||
</a>
|
</a>
|
||||||
@@ -29,13 +29,13 @@
|
|||||||
<div class="search-wrapper">
|
<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>
|
<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">
|
<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 class="search-results" id="search-results"></div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- HERO -->
|
|
||||||
<div class="hero-wrapper">
|
<div class="hero-wrapper">
|
||||||
<div class="hero-background">
|
<div class="hero-background">
|
||||||
<img id="hero-bg-media" src="" alt="">
|
<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 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>
|
||||||
@@ -69,16 +69,16 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
<main>
|
|
||||||
<!-- Trending -->
|
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="section-header"><div class="section-title">Trending This Season</div></div>
|
<div class="section-header"><div class="section-title">Trending This Season</div></div>
|
||||||
<div class="carousel-wrapper">
|
<div class="carousel-wrapper">
|
||||||
<button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button>
|
<button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button>
|
||||||
<div class="carousel" id="trending">
|
<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 class="card"><div class="card-img-wrap skeleton"></div></div>
|
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||||
@@ -88,7 +88,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Top Airing -->
|
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="section-header"><div class="section-title">Top Airing Now</div></div>
|
<div class="section-header"><div class="section-title">Top Airing Now</div></div>
|
||||||
<div class="carousel-wrapper">
|
<div class="carousel-wrapper">
|
||||||
@@ -102,224 +102,8 @@
|
|||||||
<button class="scroll-btn right" onclick="scrollCarousel('top-airing', 1)">›</button>
|
<button class="scroll-btn right" onclick="scrollCarousel('top-airing', 1)">›</button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<script>
|
<script src="../src/scripts/anime/animes.js"></script>
|
||||||
// --- SEARCH LOGIC ---
|
|
||||||
const searchInput = document.getElementById('search-input');
|
|
||||||
const searchResults = document.getElementById('search-results');
|
|
||||||
let searchTimeout;
|
|
||||||
|
|
||||||
searchInput.addEventListener('input', (e) => {
|
|
||||||
const query = e.target.value;
|
|
||||||
clearTimeout(searchTimeout);
|
|
||||||
if (query.length < 2) {
|
|
||||||
searchResults.classList.remove('active');
|
|
||||||
searchResults.innerHTML = '';
|
|
||||||
searchInput.style.borderRadius = '99px';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
searchTimeout = setTimeout(() => {
|
|
||||||
fetchLocalSearch(query);
|
|
||||||
}, 300);
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('click', (e) => {
|
|
||||||
if (!e.target.closest('.search-wrapper')) {
|
|
||||||
searchResults.classList.remove('active');
|
|
||||||
searchInput.style.borderRadius = '99px';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
async function fetchLocalSearch(query) {
|
|
||||||
try {
|
|
||||||
const res = await fetch(`/api/search/local?q=${encodeURIComponent(query)}`);
|
|
||||||
const data = await res.json();
|
|
||||||
renderSearchResults(data.results);
|
|
||||||
} catch (err) { console.error("Search Error:", err); }
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderSearchResults(results) {
|
|
||||||
searchResults.innerHTML = '';
|
|
||||||
if (results.length === 0) {
|
|
||||||
searchResults.innerHTML = '<div style="padding:1rem; color:#888; text-align:center">No results found</div>';
|
|
||||||
} else {
|
|
||||||
results.forEach(anime => {
|
|
||||||
const title = getTitle(anime);
|
|
||||||
const img = anime.coverImage.medium || anime.coverImage.large;
|
|
||||||
const rating = anime.averageScore ? `${anime.averageScore}%` : 'N/A';
|
|
||||||
const year = anime.seasonYear || '';
|
|
||||||
const format = anime.format || 'TV';
|
|
||||||
|
|
||||||
const item = document.createElement('a');
|
|
||||||
item.className = 'search-item';
|
|
||||||
item.href = `/anime/${anime.id}`; // DIRECT LINK
|
|
||||||
item.innerHTML = `
|
|
||||||
<img src="${img}" class="search-poster" alt="${title}">
|
|
||||||
<div class="search-info">
|
|
||||||
<div class="search-title">${title}</div>
|
|
||||||
<div class="search-meta">
|
|
||||||
<span class="rating-pill">${rating}</span>
|
|
||||||
<span>• ${year}</span>
|
|
||||||
<span>• ${format}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
searchResults.appendChild(item);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
searchResults.classList.add('active');
|
|
||||||
searchInput.style.borderRadius = '12px 12px 0 0';
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- CAROUSEL LOGIC ---
|
|
||||||
function scrollCarousel(id, direction) {
|
|
||||||
const container = document.getElementById(id);
|
|
||||||
if(container) {
|
|
||||||
const scrollAmount = container.clientWidth * 0.75;
|
|
||||||
container.scrollBy({ left: direction * scrollAmount, behavior: 'smooth' });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- MAIN APP LOGIC ---
|
|
||||||
let trendingAnimes = [];
|
|
||||||
let currentHeroIndex = 0;
|
|
||||||
let player;
|
|
||||||
let heroInterval;
|
|
||||||
|
|
||||||
var tag = document.createElement('script');
|
|
||||||
tag.src = "https://www.youtube.com/iframe_api";
|
|
||||||
var firstScriptTag = document.getElementsByTagName('script')[0];
|
|
||||||
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
|
||||||
|
|
||||||
function onYouTubeIframeAPIReady() {
|
|
||||||
player = new YT.Player('player', {
|
|
||||||
height: '100%', width: '100%',
|
|
||||||
playerVars: { 'autoplay': 1, 'controls': 0, 'mute': 1, 'loop': 1, 'showinfo': 0, 'modestbranding': 1 },
|
|
||||||
events: { 'onReady': (e) => { e.target.mute(); if(trendingAnimes.length) updateHeroVideo(trendingAnimes[currentHeroIndex]); } }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchContent(isUpdate = false) {
|
|
||||||
try {
|
|
||||||
const trendingRes = await fetch('/api/trending');
|
|
||||||
const trendingData = await trendingRes.json();
|
|
||||||
|
|
||||||
if (trendingData.results && trendingData.results.length > 0) {
|
|
||||||
trendingAnimes = trendingData.results;
|
|
||||||
if (!isUpdate) {
|
|
||||||
updateHeroUI(trendingAnimes[0]);
|
|
||||||
startHeroCycle();
|
|
||||||
}
|
|
||||||
renderList('trending', trendingAnimes);
|
|
||||||
} else if (!isUpdate) {
|
|
||||||
setTimeout(() => fetchContent(false), 2000);
|
|
||||||
}
|
|
||||||
|
|
||||||
const topRes = await fetch('/api/top-airing');
|
|
||||||
const topData = await topRes.json();
|
|
||||||
if (topData.results && topData.results.length > 0) {
|
|
||||||
renderList('top-airing', topData.results);
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (e) {
|
|
||||||
console.error("Fetch Error:", e);
|
|
||||||
if(!isUpdate) setTimeout(() => fetchContent(false), 5000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function startHeroCycle() {
|
|
||||||
if(heroInterval) clearInterval(heroInterval);
|
|
||||||
heroInterval = setInterval(() => {
|
|
||||||
if(trendingAnimes.length > 0) {
|
|
||||||
currentHeroIndex = (currentHeroIndex + 1) % trendingAnimes.length;
|
|
||||||
updateHeroUI(trendingAnimes[currentHeroIndex]);
|
|
||||||
}
|
|
||||||
}, 10000);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTitle(anime) {
|
|
||||||
return anime.title.english || anime.title.romaji || "Unknown Title";
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateHeroUI(anime) {
|
|
||||||
if(!anime) return;
|
|
||||||
const title = getTitle(anime);
|
|
||||||
const score = anime.averageScore ? anime.averageScore + '% Match' : 'N/A';
|
|
||||||
const year = anime.seasonYear || '';
|
|
||||||
const type = anime.format || 'TV';
|
|
||||||
const desc = anime.description || 'No description available.';
|
|
||||||
const poster = anime.coverImage ? anime.coverImage.extraLarge : '';
|
|
||||||
const banner = anime.bannerImage || poster;
|
|
||||||
|
|
||||||
document.getElementById('hero-title').innerText = title;
|
|
||||||
document.getElementById('hero-desc').innerHTML = desc;
|
|
||||||
document.getElementById('hero-score').innerText = score;
|
|
||||||
document.getElementById('hero-year').innerText = year;
|
|
||||||
document.getElementById('hero-type').innerText = type;
|
|
||||||
document.getElementById('hero-poster').src = poster;
|
|
||||||
|
|
||||||
// Set Watch Button Link
|
|
||||||
const watchBtn = document.getElementById('watch-btn');
|
|
||||||
if(watchBtn) watchBtn.onclick = () => window.location.href = `/anime/${anime.id}`;
|
|
||||||
|
|
||||||
const bgImg = document.getElementById('hero-bg-media');
|
|
||||||
if(bgImg && bgImg.src !== banner) bgImg.src = banner;
|
|
||||||
|
|
||||||
updateHeroVideo(anime);
|
|
||||||
|
|
||||||
document.getElementById('hero-loading-ui').style.display = 'none';
|
|
||||||
document.getElementById('hero-real-ui').style.display = 'block';
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateHeroVideo(anime) {
|
|
||||||
if (!player || !player.loadVideoById) return;
|
|
||||||
const videoContainer = document.getElementById('player');
|
|
||||||
if (anime.trailer && anime.trailer.site === 'youtube' && anime.trailer.id) {
|
|
||||||
if(player.getVideoData && player.getVideoData().video_id !== anime.trailer.id) {
|
|
||||||
player.loadVideoById(anime.trailer.id);
|
|
||||||
player.mute();
|
|
||||||
}
|
|
||||||
videoContainer.style.opacity = "1";
|
|
||||||
} else {
|
|
||||||
videoContainer.style.opacity = "0";
|
|
||||||
player.stopVideo();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderList(id, list) {
|
|
||||||
const container = document.getElementById(id);
|
|
||||||
const firstId = list.length > 0 ? list[0].id : null;
|
|
||||||
const currentFirstId = container.firstElementChild?.dataset?.id;
|
|
||||||
if (currentFirstId && parseInt(currentFirstId) === firstId && container.children.length === list.length) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
container.innerHTML = '';
|
|
||||||
list.forEach(anime => {
|
|
||||||
const title = getTitle(anime);
|
|
||||||
const cover = anime.coverImage ? anime.coverImage.large : '';
|
|
||||||
const ep = anime.nextAiringEpisode ? 'Ep ' + anime.nextAiringEpisode.episode : (anime.episodes ? anime.episodes + ' Eps' : 'TV');
|
|
||||||
const score = anime.averageScore || '--';
|
|
||||||
|
|
||||||
const el = document.createElement('div');
|
|
||||||
el.className = 'card';
|
|
||||||
el.dataset.id = anime.id;
|
|
||||||
// CLICK GOES TO ANIME PAGE
|
|
||||||
el.onclick = () => window.location.href = `/anime/${anime.id}`;
|
|
||||||
el.innerHTML = `
|
|
||||||
<div class="card-img-wrap"><img src="${cover}" loading="lazy"></div>
|
|
||||||
<div class="card-content">
|
|
||||||
<h3>${title}</h3>
|
|
||||||
<p>${score}% • ${ep}</p>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
container.appendChild(el);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchContent();
|
|
||||||
setInterval(() => fetchContent(true), 60000);
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -4,13 +4,12 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Reader</title>
|
<title>Reader</title>
|
||||||
<link rel="stylesheet" href="/public/reader.css">
|
<link rel="stylesheet" href="/views/css/books/reader.css">
|
||||||
<link rel="icon" href="/public/waifuboards.ico" type="image/x-icon">
|
<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">
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- Top Bar -->
|
|
||||||
<header class="top-bar">
|
<header class="top-bar">
|
||||||
<button id="back-btn" class="glass-btn">
|
<button id="back-btn" class="glass-btn">
|
||||||
← Back
|
← Back
|
||||||
@@ -27,7 +26,6 @@
|
|||||||
</button>
|
</button>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Settings Panel -->
|
|
||||||
<aside id="settings-panel" class="settings-panel">
|
<aside id="settings-panel" class="settings-panel">
|
||||||
<div class="panel-header">
|
<div class="panel-header">
|
||||||
<h3>Reader Settings</h3>
|
<h3>Reader Settings</h3>
|
||||||
@@ -35,9 +33,9 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="panel-content">
|
<div class="panel-content">
|
||||||
<!-- Light Novel Settings -->
|
|
||||||
<div id="ln-settings" class="hidden">
|
<div id="ln-settings" class="hidden">
|
||||||
<!-- Typography -->
|
|
||||||
<div class="settings-section">
|
<div class="settings-section">
|
||||||
<h4>Typography</h4>
|
<h4>Typography</h4>
|
||||||
|
|
||||||
@@ -87,7 +85,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Color Theme -->
|
|
||||||
<div class="settings-section">
|
<div class="settings-section">
|
||||||
<h4>Color Theme</h4>
|
<h4>Color Theme</h4>
|
||||||
|
|
||||||
@@ -110,9 +108,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Manga Settings -->
|
|
||||||
<div id="manga-settings" class="hidden">
|
<div id="manga-settings" class="hidden">
|
||||||
<!-- Display -->
|
|
||||||
<div class="settings-section">
|
<div class="settings-section">
|
||||||
<h4>Display</h4>
|
<h4>Display</h4>
|
||||||
|
|
||||||
@@ -144,7 +142,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Appearance -->
|
|
||||||
<div class="settings-section">
|
<div class="settings-section">
|
||||||
<h4>Appearance</h4>
|
<h4>Appearance</h4>
|
||||||
|
|
||||||
@@ -157,7 +155,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Performance -->
|
|
||||||
<div class="settings-section">
|
<div class="settings-section">
|
||||||
<h4>Performance</h4>
|
<h4>Performance</h4>
|
||||||
|
|
||||||
@@ -179,6 +177,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<script src="/public/reader.js"></script>
|
<script src="/src/scripts/books/reader.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
245
views/watch.html
245
views/watch.html
@@ -5,25 +5,25 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<base href="/">
|
<base href="/">
|
||||||
<title>WaifuBoard Watch</title>
|
<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>
|
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
||||||
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
|
<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>
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="top-bar">
|
<div class="top-bar">
|
||||||
<a href="#" id="back-link" class="back-btn">
|
<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>
|
<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
|
Back to Series
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="theater-container">
|
||||||
|
|
||||||
<div class="theater-container">
|
|
||||||
|
|
||||||
<!-- Toolbar -->
|
|
||||||
<div class="player-toolbar">
|
<div class="player-toolbar">
|
||||||
<div class="sd-toggle" id="sd-toggle" data-state="sub" style="display: none;" onclick="toggleAudioMode()">
|
<div class="sd-toggle" id="sd-toggle" data-state="sub" style="display: none;" onclick="toggleAudioMode()">
|
||||||
<div class="sd-bg"></div>
|
<div class="sd-bg"></div>
|
||||||
@@ -32,7 +32,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<select id="server-select" class="extension-select" style="display:none;" onchange="loadStream()">
|
<select id="server-select" class="extension-select" style="display:none;" onchange="loadStream()">
|
||||||
<!-- Populated via JS -->
|
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<select id="extension-select" class="extension-select" onchange="onExtensionChange()">
|
<select id="extension-select" class="extension-select" onchange="onExtensionChange()">
|
||||||
@@ -40,7 +40,7 @@
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Video Player -->
|
|
||||||
<div class="video-wrapper">
|
<div class="video-wrapper">
|
||||||
<video id="player" controls crossorigin playsinline poster=""></video>
|
<video id="player" controls crossorigin playsinline poster=""></video>
|
||||||
<div id="loading-overlay" class="loading-overlay">
|
<div id="loading-overlay" class="loading-overlay">
|
||||||
@@ -49,7 +49,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Controls -->
|
|
||||||
<div class="controls-area">
|
<div class="controls-area">
|
||||||
<div class="episode-info">
|
<div class="episode-info">
|
||||||
<h2 id="anime-title">Loading...</h2>
|
<h2 id="anime-title">Loading...</h2>
|
||||||
@@ -67,231 +67,8 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script src="../src/scripts/anime/player.js"></script>
|
||||||
const pathParts = window.location.pathname.split('/');
|
|
||||||
const animeId = pathParts[2];
|
|
||||||
const currentEpisode = parseInt(pathParts[3]);
|
|
||||||
|
|
||||||
let audioMode = 'sub';
|
|
||||||
let currentExtension = '';
|
|
||||||
let plyrInstance;
|
|
||||||
let hlsInstance;
|
|
||||||
|
|
||||||
document.getElementById('back-link').href = `/anime/${animeId}`;
|
|
||||||
document.getElementById('episode-label').innerText = `Episode ${currentEpisode}`;
|
|
||||||
|
|
||||||
async function loadMetadata() {
|
|
||||||
try {
|
|
||||||
const res = await fetch(`/api/anime/${animeId}`);
|
|
||||||
const data = await res.json();
|
|
||||||
if(!data.error) {
|
|
||||||
const title = data.title.english || data.title.romaji;
|
|
||||||
document.getElementById('anime-title').innerText = title;
|
|
||||||
document.title = `Watching ${title} - Ep ${currentEpisode}`;
|
|
||||||
}
|
|
||||||
} catch(e) { console.error(e); }
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadExtensions() {
|
|
||||||
try {
|
|
||||||
const res = await fetch('/api/extensions');
|
|
||||||
const data = await res.json();
|
|
||||||
const select = document.getElementById('extension-select');
|
|
||||||
|
|
||||||
if (data.extensions && data.extensions.length > 0) {
|
|
||||||
data.extensions.forEach(extName => {
|
|
||||||
const opt = document.createElement('option');
|
|
||||||
opt.value = extName;
|
|
||||||
opt.innerText = extName;
|
|
||||||
select.appendChild(opt);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
select.innerHTML = '<option>No Extensions</option>';
|
|
||||||
select.disabled = true;
|
|
||||||
setLoading("No extensions found in WaifuBoards folder.");
|
|
||||||
}
|
|
||||||
} catch(e) { console.error("Extension Error:", e); }
|
|
||||||
}
|
|
||||||
|
|
||||||
async function onExtensionChange() {
|
|
||||||
const select = document.getElementById('extension-select');
|
|
||||||
currentExtension = select.value;
|
|
||||||
setLoading("Fetching extension settings...");
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(`/api/extension/${currentExtension}/settings`);
|
|
||||||
const settings = await res.json();
|
|
||||||
|
|
||||||
const toggle = document.getElementById('sd-toggle');
|
|
||||||
if (settings.supportsDub) {
|
|
||||||
toggle.style.display = 'flex';
|
|
||||||
setAudioMode('sub');
|
|
||||||
} else {
|
|
||||||
toggle.style.display = 'none';
|
|
||||||
setAudioMode('sub');
|
|
||||||
}
|
|
||||||
|
|
||||||
const serverSelect = document.getElementById('server-select');
|
|
||||||
serverSelect.innerHTML = '';
|
|
||||||
if (settings.episodeServers && settings.episodeServers.length > 0) {
|
|
||||||
settings.episodeServers.forEach(srv => {
|
|
||||||
const opt = document.createElement('option');
|
|
||||||
opt.value = srv;
|
|
||||||
opt.innerText = srv;
|
|
||||||
serverSelect.appendChild(opt);
|
|
||||||
});
|
|
||||||
serverSelect.style.display = 'block';
|
|
||||||
} else {
|
|
||||||
serverSelect.style.display = 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
loadStream();
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
setLoading("Failed to load extension settings.");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleAudioMode() {
|
|
||||||
const newMode = audioMode === 'sub' ? 'dub' : 'sub';
|
|
||||||
setAudioMode(newMode);
|
|
||||||
loadStream();
|
|
||||||
}
|
|
||||||
|
|
||||||
function setAudioMode(mode) {
|
|
||||||
audioMode = mode;
|
|
||||||
const toggle = document.getElementById('sd-toggle');
|
|
||||||
const subOpt = document.getElementById('opt-sub');
|
|
||||||
const dubOpt = document.getElementById('opt-dub');
|
|
||||||
|
|
||||||
toggle.setAttribute('data-state', mode);
|
|
||||||
if (mode === 'sub') {
|
|
||||||
subOpt.classList.add('active');
|
|
||||||
dubOpt.classList.remove('active');
|
|
||||||
} else {
|
|
||||||
subOpt.classList.remove('active');
|
|
||||||
dubOpt.classList.add('active');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadStream() {
|
|
||||||
if (!currentExtension) return;
|
|
||||||
|
|
||||||
const serverSelect = document.getElementById('server-select');
|
|
||||||
const server = serverSelect.value || "default";
|
|
||||||
|
|
||||||
setLoading(`Searching & Resolving Stream (${audioMode})...`);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const url = `/api/watch/stream?animeId=${animeId}&episode=${currentEpisode}&server=${server}&category=${audioMode}&ext=${currentExtension}`;
|
|
||||||
const res = await fetch(url);
|
|
||||||
const data = await res.json();
|
|
||||||
|
|
||||||
if (data.error) {
|
|
||||||
setLoading(`Error: ${data.error}`);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!data.videoSources || data.videoSources.length === 0) {
|
|
||||||
setLoading("No video sources found.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const source = data.videoSources.find(s => s.type === 'm3u8') || data.videoSources[0];
|
|
||||||
|
|
||||||
// --- THE PROXY URL CONTRUCTION ---
|
|
||||||
const headers = data.headers || {};
|
|
||||||
let proxyUrl = `/api/proxy?url=${encodeURIComponent(source.url)}`;
|
|
||||||
|
|
||||||
// Append headers to proxy URL
|
|
||||||
if (headers['Referer']) proxyUrl += `&referer=${encodeURIComponent(headers['Referer'])}`;
|
|
||||||
if (headers['Origin']) proxyUrl += `&origin=${encodeURIComponent(headers['Origin'])}`;
|
|
||||||
if (headers['User-Agent']) proxyUrl += `&userAgent=${encodeURIComponent(headers['User-Agent'])}`;
|
|
||||||
|
|
||||||
playVideo(proxyUrl, data.videoSources[0].subtitles);
|
|
||||||
|
|
||||||
document.getElementById('loading-overlay').style.display = 'none';
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
setLoading("Stream Error. Check console.");
|
|
||||||
console.error(err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function playVideo(url, subtitles) {
|
|
||||||
const video = document.getElementById('player');
|
|
||||||
|
|
||||||
if (Hls.isSupported()) {
|
|
||||||
if (hlsInstance) hlsInstance.destroy();
|
|
||||||
hlsInstance = new Hls({
|
|
||||||
xhrSetup: (xhr, url) => {
|
|
||||||
xhr.withCredentials = false; // Ensure no cookies are sent to proxy
|
|
||||||
}
|
|
||||||
});
|
|
||||||
hlsInstance.loadSource(url);
|
|
||||||
hlsInstance.attachMedia(video);
|
|
||||||
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
|
||||||
video.src = url;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Ensure clean slate
|
|
||||||
if (plyrInstance) plyrInstance.destroy();
|
|
||||||
|
|
||||||
// 1. Define Tracks
|
|
||||||
// We attach them to the DOM or Plyr configuration so Plyr recognizes them.
|
|
||||||
// The 'captions' option in Plyr can also take a 'src' via config if we were not using HLS.js directly attached.
|
|
||||||
// However, since we use HLS.js attached to the video tag, Plyr wraps that video tag.
|
|
||||||
|
|
||||||
// Clear existing tracks
|
|
||||||
while (video.firstChild) {
|
|
||||||
video.removeChild(video.firstChild);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add Track Elements
|
|
||||||
if (subtitles && subtitles.length > 0) {
|
|
||||||
subtitles.forEach(sub => {
|
|
||||||
const track = document.createElement('track');
|
|
||||||
track.kind = 'captions';
|
|
||||||
track.label = sub.language;
|
|
||||||
track.srclang = sub.language.slice(0, 2).toLowerCase();
|
|
||||||
track.src = sub.url; // These are usually VTT/SRT links
|
|
||||||
if (sub.default || sub.language.toLowerCase().includes('english')) {
|
|
||||||
track.default = true;
|
|
||||||
}
|
|
||||||
video.appendChild(track);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 2. Initialize Plyr
|
|
||||||
plyrInstance = new Plyr(video, {
|
|
||||||
captions: { active: true, update: true, language: 'en' }, // Enable by default
|
|
||||||
controls: ['play-large', 'play', 'progress', 'current-time', 'duration', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
|
|
||||||
settings: ['captions', 'quality', 'speed']
|
|
||||||
});
|
|
||||||
|
|
||||||
video.play().catch(e => console.log("Auto-play blocked"));
|
|
||||||
}
|
|
||||||
|
|
||||||
function setLoading(msg) {
|
|
||||||
const overlay = document.getElementById('loading-overlay');
|
|
||||||
const text = document.getElementById('loading-text');
|
|
||||||
overlay.style.display = 'flex';
|
|
||||||
text.innerText = msg;
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('prev-btn').onclick = () => {
|
|
||||||
if(currentEpisode > 1) window.location.href = `/watch/${animeId}/${currentEpisode - 1}`;
|
|
||||||
};
|
|
||||||
document.getElementById('next-btn').onclick = () => {
|
|
||||||
window.location.href = `/watch/${animeId}/${currentEpisode + 1}`;
|
|
||||||
};
|
|
||||||
if(currentEpisode <= 1) document.getElementById('prev-btn').disabled = true;
|
|
||||||
|
|
||||||
loadMetadata();
|
|
||||||
loadExtensions();
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user