Compare commits
2 Commits
v2.0.0
...
df5f4d0563
| Author | SHA1 | Date | |
|---|---|---|---|
| df5f4d0563 | |||
| 194c0d80e7 |
16
.gitignore
vendored
16
.gitignore
vendored
@@ -1,11 +1,5 @@
|
||||
desktop/node_modules
|
||||
desktop/electron
|
||||
desktop/dist
|
||||
desktop/.env
|
||||
desktop/build
|
||||
|
||||
docker/node_modules
|
||||
docker/electron
|
||||
docker/dist
|
||||
docker/.env
|
||||
docker/build
|
||||
node_modules
|
||||
electron
|
||||
dist
|
||||
.env
|
||||
build
|
||||
|
||||
5
desktop/.gitignore
vendored
5
desktop/.gitignore
vendored
@@ -1,5 +0,0 @@
|
||||
node_modules
|
||||
electron
|
||||
dist
|
||||
.env
|
||||
build
|
||||
@@ -1,229 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Waifuboard</title>
|
||||
<style>
|
||||
:root {
|
||||
--color-bg: #09090b;
|
||||
--color-primary: #8b5cf6;
|
||||
--color-text: #ffffff;
|
||||
--color-text-dim: #a1a1aa;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: linear-gradient(135deg, #18181b 0%, var(--color-bg) 100%);
|
||||
color: var(--color-text);
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-radius: 16px;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 0 0 1px rgba(255,255,255,0.05),
|
||||
0 20px 40px rgba(0,0,0,0.6);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
img {
|
||||
-webkit-user-drag: none;
|
||||
user-drag: none;
|
||||
}
|
||||
|
||||
.bg-particle {
|
||||
position: absolute;
|
||||
background: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
animation: particleFloat 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.bg-particle:nth-child(1) {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
top: 20%;
|
||||
left: 10%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.bg-particle:nth-child(2) {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
top: 60%;
|
||||
left: 80%;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.bg-particle:nth-child(3) {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
top: 40%;
|
||||
left: 20%;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.bg-particle:nth-child(4) {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
top: 70%;
|
||||
left: 70%;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.splash-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 28px;
|
||||
width: 100%;
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
.brand-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.brand-container.horizontal {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
object-fit: contain;
|
||||
animation: iconPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
font-size: 25px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #ffffff;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.spinner-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border: 5px solid rgba(139, 92, 246, 0.2);
|
||||
border-top: 5px solid var(--color-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 12px;
|
||||
color: #a1a1aa;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes iconPulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.4));
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.6));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes particleFloat {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(0) scale(0);
|
||||
}
|
||||
25% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
transform: translateY(-100px) scale(1);
|
||||
}
|
||||
75% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(-200px) scale(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="bg-particle"></div>
|
||||
<div class="bg-particle"></div>
|
||||
<div class="bg-particle"></div>
|
||||
<div class="bg-particle"></div>
|
||||
|
||||
<div class="splash-container">
|
||||
<div class="brand-container horizontal">
|
||||
<img src="public/assets/waifuboards.ico" alt="Waifuboard Logo" class="brand-icon">
|
||||
<h1 class="brand-name">Waifuboard</h1>
|
||||
</div>
|
||||
|
||||
<div class="spinner-wrapper">
|
||||
<div class="spinner"></div>
|
||||
<span class="loading-text">Loading</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
144
desktop/main.js
144
desktop/main.js
@@ -1,144 +0,0 @@
|
||||
const { app, BrowserWindow, ipcMain } = require('electron');
|
||||
const { fork } = require('child_process');
|
||||
const path = require('path');
|
||||
const log = require('electron-log');
|
||||
|
||||
const sessionId = new Date().toISOString().replace(/[:.]/g, '-');
|
||||
log.transports.file.resolvePath = () => path.join(app.getPath('userData'), 'logs', `${sessionId}.log`);
|
||||
|
||||
log.transports.file.level = 'info';
|
||||
log.format = '[{y}-{m}-{d} {h}:{i}:{s}.{ms}] [{level}] {text}';
|
||||
|
||||
let win;
|
||||
let backend;
|
||||
const net = require('net');
|
||||
|
||||
function waitForServer(port, host = '127.0.0.1', timeout = 10000) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const start = Date.now();
|
||||
|
||||
const check = () => {
|
||||
const socket = new net.Socket();
|
||||
|
||||
socket
|
||||
.once('connect', () => {
|
||||
socket.destroy();
|
||||
resolve();
|
||||
})
|
||||
.once('error', () => {
|
||||
socket.destroy();
|
||||
if (Date.now() - start > timeout) {
|
||||
reject(new Error('Backend timeout'));
|
||||
} else {
|
||||
setTimeout(check, 200);
|
||||
}
|
||||
})
|
||||
.connect(port, host);
|
||||
};
|
||||
|
||||
check();
|
||||
});
|
||||
}
|
||||
|
||||
function startBackend() {
|
||||
backend = fork(path.join(__dirname, 'server.js'), [], {
|
||||
stdio: ['pipe', 'pipe', 'pipe', 'ipc'],
|
||||
env: {
|
||||
...process.env,
|
||||
IS_PACKAGED: app.isPackaged ? 'true' : 'false'
|
||||
}
|
||||
});
|
||||
|
||||
log.info('Starting backend process...');
|
||||
|
||||
backend.stdout.on('data', (data) => {
|
||||
log.info(`[Backend]: ${data.toString().trim()}`);
|
||||
});
|
||||
|
||||
backend.stderr.on('data', (data) => {
|
||||
log.error(`[Backend ERROR]: ${data.toString().trim()}`);
|
||||
});
|
||||
|
||||
backend.on('exit', (code) => {
|
||||
log.warn(`Backend process exited with code: ${code}`);
|
||||
});
|
||||
}
|
||||
|
||||
let splash;
|
||||
|
||||
function createSplash() {
|
||||
splash = new BrowserWindow({
|
||||
width: 400,
|
||||
height: 300,
|
||||
frame: false,
|
||||
transparent: false,
|
||||
alwaysOnTop: true,
|
||||
resizable: false,
|
||||
hasShadow: false,
|
||||
backgroundColor: '#00000000'
|
||||
});
|
||||
|
||||
splash.loadFile('loading.html');
|
||||
}
|
||||
|
||||
function createWindow() {
|
||||
win = new BrowserWindow({
|
||||
width: 1200,
|
||||
height: 800,
|
||||
frame: false,
|
||||
titleBarStyle: "hidden",
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, "preload.js"),
|
||||
nodeIntegration: false,
|
||||
contextIsolation: true
|
||||
}
|
||||
});
|
||||
|
||||
win.setMenu(null);
|
||||
win.maximize();
|
||||
|
||||
win.loadURL('http://localhost:54322');
|
||||
|
||||
win.on('closed', () => {
|
||||
win = null;
|
||||
});
|
||||
}
|
||||
|
||||
ipcMain.on("win:minimize", () => win.minimize());
|
||||
ipcMain.on("win:maximize", () => {
|
||||
if (win.isMaximized()) {
|
||||
win.unmaximize();
|
||||
} else {
|
||||
win.maximize();
|
||||
}
|
||||
});
|
||||
ipcMain.on("win:close", () => win.close());
|
||||
|
||||
process.on('uncaughtException', (err) => {
|
||||
log.error('Critical unhandled error in Main:', err);
|
||||
});
|
||||
|
||||
app.whenReady().then(async () => {
|
||||
startBackend();
|
||||
createSplash();
|
||||
try {
|
||||
await waitForServer(54322);
|
||||
createWindow();
|
||||
splash.close();
|
||||
} catch (e) {
|
||||
splash.close();
|
||||
log.error(e);
|
||||
app.quit();
|
||||
}
|
||||
});
|
||||
|
||||
app.on('window-all-closed', () => {
|
||||
log.info('Closing all windows...');
|
||||
if (backend) {
|
||||
backend.kill();
|
||||
log.info('Backend process terminated.');
|
||||
}
|
||||
if (process.platform !== 'darwin') {
|
||||
app.quit();
|
||||
}
|
||||
});
|
||||
@@ -1,212 +0,0 @@
|
||||
const fastify = require("fastify")({
|
||||
logger: { level: "error" },
|
||||
});
|
||||
|
||||
const path = require("path");
|
||||
const jwt = require("jsonwebtoken");
|
||||
const cron = require("node-cron");
|
||||
const { initHeadless } = require("./electron/shared/headless");
|
||||
const { initDatabase } = require("./electron/shared/database");
|
||||
const { loadExtensions } = require("./electron/shared/extensions");
|
||||
const { ensureConfigFile } = require("./electron/shared/config");
|
||||
const { init } = require("./electron/api/rpc/rpc.controller");
|
||||
const {refreshTrendingAnime, refreshTopAiringAnime} = require("./electron/api/anime/anime.service");
|
||||
const {refreshPopularBooks, refreshTrendingBooks} = require("./electron/api/books/books.service");
|
||||
|
||||
const dotenv = require("dotenv");
|
||||
const isPackaged = process.env.IS_PACKAGED === "true";
|
||||
const envPath = isPackaged
|
||||
? path.join(process.resourcesPath, ".env")
|
||||
: path.join(__dirname, ".env");
|
||||
|
||||
dotenv.config({ path: envPath, override: false });
|
||||
const viewsRoutes = require("./electron/views/views.routes");
|
||||
const animeRoutes = require("./electron/api/anime/anime.routes");
|
||||
const booksRoutes = require("./electron/api/books/books.routes");
|
||||
const proxyRoutes = require("./electron/api/proxy/proxy.routes");
|
||||
const extensionsRoutes = require("./electron/api/extensions/extensions.routes");
|
||||
const galleryRoutes = require("./electron/api/gallery/gallery.routes");
|
||||
const rpcRoutes = require("./electron/api/rpc/rpc.routes");
|
||||
const userRoutes = require("./electron/api/user/user.routes");
|
||||
const listRoutes = require("./electron/api/list/list.routes");
|
||||
const anilistRoute = require("./electron/api/anilist/anilist");
|
||||
const localRoutes = require("./electron/api/local/local.routes");
|
||||
const configRoutes = require("./electron/api/config/config.routes");
|
||||
const roomRoutes = require("./electron/api/rooms/rooms.routes");
|
||||
const { setupRoomWebSocket } = require("./electron/api/rooms/rooms.websocket");
|
||||
|
||||
const { getConfig } = require('./electron/shared/config');
|
||||
const { values } = getConfig();
|
||||
const jwtSecret = values.server?.jwt_secret;
|
||||
|
||||
fastify.addHook("preHandler", async (request, reply) => {
|
||||
const auth = request.headers.authorization;
|
||||
if (!auth) return;
|
||||
|
||||
try {
|
||||
const token = auth.replace("Bearer ", "");
|
||||
request.user = jwt.verify(token, jwtSecret);
|
||||
} catch (e) {
|
||||
return reply.code(401).send({ error: "Invalid token" });
|
||||
}
|
||||
});
|
||||
|
||||
const roomService = require('./electron/api/rooms/rooms.service');
|
||||
|
||||
fastify.addHook('onRequest', async (req, reply) => {
|
||||
const isTunnel =
|
||||
!!req.headers['cf-connecting-ip'] ||
|
||||
!!req.headers['cf-ray'];
|
||||
|
||||
if (!isTunnel) return;
|
||||
|
||||
if (req.url.startsWith('/public/') ||
|
||||
req.url.startsWith('/views/') ||
|
||||
req.url.startsWith('/src/')) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.url.startsWith('/room')) {
|
||||
const urlParams = new URLSearchParams(req.url.split('?')[1]);
|
||||
const roomId = urlParams.get('id');
|
||||
|
||||
if (!roomId) {
|
||||
return reply.code(404).send({ error: 'Room ID required' });
|
||||
}
|
||||
|
||||
const room = roomService.getRoom(roomId);
|
||||
if (!room || room.exposed !== true) {
|
||||
return reply.code(404).send({ error: 'Room not found' });
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const wsMatch = req.url.match(/^\/ws\/room\/([a-f0-9]+)/);
|
||||
if (wsMatch) {
|
||||
const roomId = wsMatch[1];
|
||||
const room = roomService.getRoom(roomId);
|
||||
|
||||
if (!room || room.exposed !== true) {
|
||||
return reply.code(404).send({ error: 'Room not found' });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const apiMatch = req.url.match(/^\/api\/rooms\/([a-f0-9]+)/);
|
||||
if (apiMatch) {
|
||||
const roomId = apiMatch[1];
|
||||
const room = roomService.getRoom(roomId);
|
||||
|
||||
if (!room || room.exposed !== true) {
|
||||
return reply.code(404).send({ error: 'Room not found' });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const allowedEndpoints = [
|
||||
'/api/watch/stream',
|
||||
'/api/proxy',
|
||||
'/api/extensions',
|
||||
'/api/search'
|
||||
];
|
||||
|
||||
for (const endpoint of allowedEndpoints) {
|
||||
if (req.url.startsWith(endpoint)) {
|
||||
console.log('[Tunnel] ✓ Allowing utility endpoint:', endpoint);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
return reply.code(404).send({ error: 'Not found' });
|
||||
});
|
||||
|
||||
fastify.register(require("@fastify/static"), {
|
||||
root: path.join(__dirname, "public"),
|
||||
prefix: "/public/",
|
||||
decorateReply: false,
|
||||
});
|
||||
|
||||
fastify.register(require("@fastify/static"), {
|
||||
root: path.join(__dirname, "views"),
|
||||
prefix: "/views/",
|
||||
decorateReply: false,
|
||||
});
|
||||
|
||||
fastify.register(require("@fastify/static"), {
|
||||
root: path.join(__dirname, "src", "scripts"),
|
||||
prefix: "/src/scripts/",
|
||||
decorateReply: false,
|
||||
});
|
||||
|
||||
fastify.register(viewsRoutes);
|
||||
fastify.register(animeRoutes, { prefix: "/api" });
|
||||
fastify.register(booksRoutes, { prefix: "/api" });
|
||||
fastify.register(proxyRoutes, { prefix: "/api" });
|
||||
fastify.register(extensionsRoutes, { prefix: "/api" });
|
||||
fastify.register(galleryRoutes, { prefix: "/api" });
|
||||
fastify.register(rpcRoutes, { prefix: "/api" });
|
||||
fastify.register(userRoutes, { prefix: "/api" });
|
||||
fastify.register(anilistRoute, { prefix: "/api" });
|
||||
fastify.register(listRoutes, { prefix: "/api" });
|
||||
fastify.register(localRoutes, { prefix: "/api" });
|
||||
fastify.register(configRoutes, { prefix: "/api" });
|
||||
fastify.register(roomRoutes, { prefix: "/api" });
|
||||
|
||||
const sleep = ms => new Promise(r => setTimeout(r, ms));
|
||||
|
||||
const start = async () => {
|
||||
try {
|
||||
await fastify.register(require('@fastify/websocket'));
|
||||
ensureConfigFile()
|
||||
initDatabase("anilist");
|
||||
initDatabase("favorites");
|
||||
initDatabase("cache");
|
||||
initDatabase("userdata");
|
||||
initDatabase("local_library");
|
||||
init();
|
||||
setupRoomWebSocket(fastify);
|
||||
|
||||
const refreshAll = async () => {
|
||||
await refreshTrendingAnime();
|
||||
await sleep(300);
|
||||
await refreshTopAiringAnime();
|
||||
await sleep(300);
|
||||
await refreshTrendingBooks();
|
||||
await sleep(300);
|
||||
await refreshPopularBooks();
|
||||
};
|
||||
|
||||
const job = cron.schedule("*/30 * * * *", async () => {
|
||||
try {
|
||||
await refreshAll();
|
||||
console.log("cache refreshed");
|
||||
} catch (e) {
|
||||
console.error("refresh failed", e);
|
||||
}
|
||||
});
|
||||
|
||||
await loadExtensions();
|
||||
await initHeadless();
|
||||
|
||||
await fastify.listen({ port: 54322, host: "0.0.0.0" });
|
||||
refreshAll().catch(e =>
|
||||
console.error("initial refresh failed", e)
|
||||
);
|
||||
console.log(`Server running at http://localhost:54322`);
|
||||
|
||||
const shutdown = async () => {
|
||||
job.stop();
|
||||
await fastify.close();
|
||||
process.exit(0);
|
||||
};
|
||||
|
||||
process.on("SIGINT", shutdown);
|
||||
process.on("SIGTERM", shutdown);
|
||||
} catch (err) {
|
||||
fastify.log.error(err);
|
||||
process.exit(1);
|
||||
}
|
||||
};
|
||||
|
||||
start();
|
||||
@@ -1,82 +0,0 @@
|
||||
import { FastifyInstance } from "fastify";
|
||||
import { run } from "../../shared/database";
|
||||
|
||||
async function anilist(fastify: FastifyInstance) {
|
||||
fastify.post("/anilist/store", async (request, reply) => {
|
||||
try {
|
||||
const {
|
||||
userId,
|
||||
accessToken,
|
||||
tokenType = "Bearer",
|
||||
expiresIn
|
||||
} = request.body as {
|
||||
userId: number;
|
||||
accessToken: string;
|
||||
tokenType?: string;
|
||||
expiresIn?: number;
|
||||
};
|
||||
|
||||
if (!userId || !accessToken) {
|
||||
return reply.status(400).send({ error: "Faltan datos (User ID o Token)" });
|
||||
}
|
||||
|
||||
// 1. Verificar que el token es válido consultando a AniList
|
||||
const userRes = await fetch("https://graphql.anilist.co", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `${tokenType} ${accessToken}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
query: `query { Viewer { id } }`
|
||||
})
|
||||
});
|
||||
|
||||
if (!userRes.ok) {
|
||||
return reply.status(401).send({ error: "Token de AniList inválido o expirado" });
|
||||
}
|
||||
|
||||
const userData = await userRes.json();
|
||||
const anilistUserId = userData?.data?.Viewer?.id;
|
||||
|
||||
if (!anilistUserId) {
|
||||
return reply.status(500).send({ error: "No se pudo obtener el ID de usuario de AniList" });
|
||||
}
|
||||
|
||||
const expiresAt = new Date(
|
||||
Date.now() + 365 * 24 * 60 * 60 * 1000
|
||||
).toISOString();
|
||||
|
||||
await run(
|
||||
`
|
||||
INSERT INTO UserIntegration
|
||||
(user_id, platform, access_token, refresh_token, token_type, anilist_user_id, expires_at)
|
||||
VALUES (?, ?, ?, ?, ?, ?, ?)
|
||||
ON CONFLICT(user_id) DO UPDATE SET
|
||||
access_token = excluded.access_token,
|
||||
refresh_token = excluded.refresh_token,
|
||||
token_type = excluded.token_type,
|
||||
anilist_user_id = excluded.anilist_user_id,
|
||||
expires_at = excluded.expires_at
|
||||
`,
|
||||
[
|
||||
userId,
|
||||
"AniList",
|
||||
accessToken,
|
||||
"", // <- aquí
|
||||
tokenType,
|
||||
anilistUserId,
|
||||
expiresAt
|
||||
],
|
||||
"userdata"
|
||||
);
|
||||
|
||||
return reply.send({ ok: true, anilistUserId });
|
||||
} catch (e) {
|
||||
console.error("AniList error:", e);
|
||||
return reply.status(500).send({ error: "Error interno del servidor al guardar AniList" });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export default anilist;
|
||||
@@ -1,342 +0,0 @@
|
||||
import {FastifyReply, FastifyRequest} from 'fastify';
|
||||
import * as animeService from './anime.service';
|
||||
import { setActivity } from '../rpc/rp.service';
|
||||
import { upsertListEntry } from '../list/list.service';
|
||||
import {getExtension} from '../../shared/extensions';
|
||||
import { getConfig as loadConfig } from '../../shared/config';
|
||||
import {Anime, AnimeRequest, SearchRequest, WatchStreamRequest} from '../types';
|
||||
import {spawn} from "node:child_process";
|
||||
import net from 'net';
|
||||
import fs from 'fs';
|
||||
import os from 'os';
|
||||
import path from 'path';
|
||||
import jwt from "jsonwebtoken";
|
||||
|
||||
export async function getAnime(req: AnimeRequest, reply: FastifyReply) {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const source = req.query.source;
|
||||
|
||||
let anime: Anime | { error: string };
|
||||
if (source === 'anilist') {
|
||||
anime = await animeService.getAnimeById(id);
|
||||
} else {
|
||||
const ext = getExtension(source);
|
||||
anime = await animeService.getAnimeInfoExtension(ext, id)
|
||||
}
|
||||
|
||||
return anime;
|
||||
} catch (err) {
|
||||
return { error: "Database error" };
|
||||
}
|
||||
}
|
||||
|
||||
export async function getAnimeEpisodes(req: AnimeRequest, reply: FastifyReply) {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const source = req.query.source || 'anilist';
|
||||
const ext = getExtension(source);
|
||||
|
||||
return await animeService.searchEpisodesInExtension(
|
||||
ext,
|
||||
source,
|
||||
id
|
||||
);
|
||||
} catch (err) {
|
||||
return { error: "Database error" };
|
||||
}
|
||||
}
|
||||
|
||||
export async function getTrending(req: FastifyRequest, reply: FastifyReply) {
|
||||
try {
|
||||
const results = await animeService.getTrendingAnime();
|
||||
return { results };
|
||||
} catch (err) {
|
||||
return { results: [] };
|
||||
}
|
||||
}
|
||||
|
||||
export async function getTopAiring(req: FastifyRequest, reply: FastifyReply) {
|
||||
try {
|
||||
const results = await animeService.getTopAiringAnime();
|
||||
return { results };
|
||||
} catch (err) {
|
||||
return { results: [] };
|
||||
}
|
||||
}
|
||||
|
||||
export async function search(req: SearchRequest, reply: FastifyReply) {
|
||||
try {
|
||||
const query = req.query.q;
|
||||
const results = await animeService.searchAnimeLocal(query);
|
||||
|
||||
if (results.length > 0) {
|
||||
return { results: results };
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
return { results: [] };
|
||||
}
|
||||
}
|
||||
|
||||
export async function searchInExtension(req: any, reply: FastifyReply) {
|
||||
try {
|
||||
const extensionName = req.params.extension;
|
||||
const query = req.query.q;
|
||||
|
||||
const ext = getExtension(extensionName);
|
||||
if (!ext) return { results: [] };
|
||||
|
||||
const results = await animeService.searchAnimeInExtension(ext, extensionName, query);
|
||||
return { results };
|
||||
} catch {
|
||||
return { results: [] };
|
||||
}
|
||||
}
|
||||
|
||||
export async function getWatchStream(req: WatchStreamRequest, reply: FastifyReply) {
|
||||
try {
|
||||
const { animeId, episode, server, category, ext, source, extensionAnimeId } = req.query;
|
||||
|
||||
const extension = getExtension(ext);
|
||||
if (!extension) return { error: "Extension not found" };
|
||||
|
||||
return await animeService.getStreamData(
|
||||
extension,
|
||||
episode,
|
||||
animeId,
|
||||
source,
|
||||
server,
|
||||
category,
|
||||
extensionAnimeId
|
||||
);
|
||||
} catch (err) {
|
||||
const error = err as Error;
|
||||
return { error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
export async function openInMPV(req: any, reply: any) {
|
||||
try {
|
||||
const { title, video, subtitles = [], chapters = [], animeId, episode, entrySource } = req.body;
|
||||
|
||||
if (!video?.url) return { error: 'Missing video url' };
|
||||
|
||||
const isLocalPath = (p: string) =>
|
||||
p.startsWith('file://') ||
|
||||
p.startsWith('/') ||
|
||||
/^[a-zA-Z]:\\/.test(p);
|
||||
|
||||
const toFileUrl = (p: string) =>
|
||||
p.startsWith('file://')
|
||||
? p
|
||||
: `file://${p.replace(/\\/g, '/')}`;
|
||||
|
||||
const PORT = 54322;
|
||||
const proxyBase = `http://localhost:${PORT}/api/proxy`;
|
||||
const mediaTitle = title || 'Anime';
|
||||
|
||||
const videoUrl = isLocalPath(video.url)
|
||||
? toFileUrl(video.url)
|
||||
: `${proxyBase}?url=${encodeURIComponent(video.url)}` +
|
||||
`&referer=${encodeURIComponent(video.headers?.Referer ?? '')}` +
|
||||
`&origin=${encodeURIComponent(video.headers?.Origin ?? '')}` +
|
||||
`&userAgent=${encodeURIComponent(video.headers?.['User-Agent'] ?? '')}`;
|
||||
|
||||
|
||||
const subsUrls = subtitles.map((s: any) =>
|
||||
isLocalPath(s.src)
|
||||
? toFileUrl(s.src)
|
||||
: `${proxyBase}?url=${encodeURIComponent(s.src)}` +
|
||||
`&referer=${encodeURIComponent(video.headers?.Referer ?? '')}` +
|
||||
`&origin=${encodeURIComponent(video.headers?.Origin ?? '')}` +
|
||||
`&userAgent=${encodeURIComponent(video.headers?.['User-Agent'] ?? '')}`
|
||||
);
|
||||
|
||||
|
||||
const pipe = `\\\\.\\pipe\\mpv-${Date.now()}`;
|
||||
const { values } = loadConfig();
|
||||
|
||||
const MPV_PATH =
|
||||
values.paths?.mpv || 'mpv';
|
||||
|
||||
let chaptersArg: string[] = [];
|
||||
if (chapters.length) {
|
||||
|
||||
chapters.sort((a: any, b: any) => a.startTime - b.startTime);
|
||||
|
||||
const lines = [';FFMETADATA1'];
|
||||
|
||||
for (let i = 0; i < chapters.length; i++) {
|
||||
const c = chapters[i];
|
||||
|
||||
const start = Math.floor(c.startTime * 1000);
|
||||
const end = Math.floor(c.endTime * 1000);
|
||||
|
||||
const title = (c.type || 'chapter').toUpperCase();
|
||||
|
||||
lines.push(
|
||||
`[CHAPTER]`, `TIMEBASE=1/1000`, `START=${start}`, `END=${end}`, `title=${title}`
|
||||
);
|
||||
|
||||
if (i < chapters.length - 1) {
|
||||
const nextStart = Math.floor(chapters[i + 1].startTime * 1000);
|
||||
|
||||
if (nextStart - end > 1000) {
|
||||
lines.push(
|
||||
`[CHAPTER]`, `TIMEBASE=1/1000`, `START=${end}`, `END=${nextStart}`, `title=Episode`
|
||||
);
|
||||
}
|
||||
} else {
|
||||
lines.push(
|
||||
`[CHAPTER]`, `TIMEBASE=1/1000`, `START=${end}`, `title=Episode`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const chaptersFile = path.join(os.tmpdir(), `mpv-chapters-${Date.now()}.txt`);
|
||||
fs.writeFileSync(chaptersFile, lines.join('\n'));
|
||||
chaptersArg = [`--chapters-file=${chaptersFile}`];
|
||||
}
|
||||
|
||||
if (!MPV_PATH) {
|
||||
return { error: 'MPV_NOT_CONFIGURED' };
|
||||
}
|
||||
|
||||
spawn(
|
||||
MPV_PATH,
|
||||
[
|
||||
'--force-window=yes',
|
||||
'--idle=yes',
|
||||
'--keep-open=yes',
|
||||
'--no-terminal',
|
||||
'--hwdec=auto',
|
||||
`--force-media-title=Loading...`,
|
||||
|
||||
`--input-ipc-server=${pipe}`,
|
||||
...chaptersArg
|
||||
],
|
||||
{ stdio: 'ignore', windowsHide: true, detached: true }
|
||||
).unref();
|
||||
|
||||
await new Promise(r => setTimeout(r, 400));
|
||||
const socket = net.connect(pipe);
|
||||
|
||||
let duration = 0;
|
||||
let currentTime = 0;
|
||||
let isPaused = false;
|
||||
let titleChanged = false;
|
||||
let progressUpdated = false;
|
||||
|
||||
const sendRPC = (paused: boolean) => {
|
||||
let startTimestamp = undefined;
|
||||
let endTimestamp = undefined;
|
||||
|
||||
if (!paused && duration > 0) {
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
const elapsed = Math.floor(currentTime);
|
||||
|
||||
startTimestamp = now - elapsed;
|
||||
endTimestamp = startTimestamp + Math.floor(duration);
|
||||
}
|
||||
setActivity({
|
||||
details: mediaTitle,
|
||||
state: `Episode ${episode}`,
|
||||
mode: "watching",
|
||||
paused: paused,
|
||||
startTimestamp: startTimestamp,
|
||||
endTimestamp: endTimestamp
|
||||
})
|
||||
};
|
||||
|
||||
const updateProgress = async () => {
|
||||
if (!req.user || progressUpdated) return;
|
||||
try {
|
||||
const userId = req.user.id;
|
||||
await upsertListEntry({
|
||||
user_id: userId,
|
||||
entry_id: animeId,
|
||||
source: entrySource,
|
||||
entry_type: "ANIME",
|
||||
status: "CURRENT",
|
||||
progress: episode
|
||||
});
|
||||
progressUpdated = true;
|
||||
progressUpdated = true;
|
||||
} catch (e) { console.error("[MPV] Progress update failed", e); }
|
||||
};
|
||||
|
||||
const loadingTimeout = setTimeout(() => { if (!socket.destroyed) socket.end(); }, 15000);
|
||||
|
||||
socket.on('data', (data) => {
|
||||
const chunks = data.toString().split('\n');
|
||||
for (const chunk of chunks) {
|
||||
if (!chunk.trim()) continue;
|
||||
try {
|
||||
const json = JSON.parse(chunk);
|
||||
|
||||
if (json.event === 'property-change' && json.name === 'duration' && typeof json.data === 'number') {
|
||||
duration = json.data;
|
||||
if (!titleChanged) {
|
||||
socket.write(JSON.stringify({ command: ['set_property', 'force-media-title', mediaTitle] }) + '\n');
|
||||
|
||||
sendRPC(false);
|
||||
titleChanged = true;
|
||||
clearTimeout(loadingTimeout);
|
||||
}
|
||||
}
|
||||
|
||||
if (json.event === 'property-change' && json.name === 'time-pos' && typeof json.data === 'number') {
|
||||
currentTime = json.data;
|
||||
|
||||
if (duration > 0 && !progressUpdated && (currentTime / duration) >= 0.8) {
|
||||
updateProgress();
|
||||
}
|
||||
}
|
||||
|
||||
if (json.event === 'property-change' && json.name === 'pause') {
|
||||
isPaused = json.data === true;
|
||||
sendRPC(isPaused);
|
||||
|
||||
}
|
||||
|
||||
if (json.event === 'seek') {
|
||||
|
||||
setTimeout(() => sendRPC(isPaused), 100);
|
||||
}
|
||||
|
||||
if (json.event === 'end-file' || json.event === 'shutdown') {
|
||||
sendRPC(true);
|
||||
if (!socket.destroyed) socket.destroy();
|
||||
}
|
||||
|
||||
} catch (err) {}
|
||||
}
|
||||
});
|
||||
|
||||
const commands = [
|
||||
{ command: ['observe_property', 1, 'duration'] },
|
||||
{ command: ['observe_property', 2, 'time-pos'] },
|
||||
{ command: ['observe_property', 3, 'pause'] },
|
||||
{ command: ['loadfile', videoUrl, 'replace'] }
|
||||
];
|
||||
|
||||
commands.forEach(cmd => socket.write(JSON.stringify(cmd) + '\n'));
|
||||
|
||||
subtitles.forEach((s: any, i: number) => {
|
||||
socket.write(JSON.stringify({
|
||||
command: [
|
||||
'sub-add',
|
||||
subsUrls[i],
|
||||
'auto',
|
||||
s.label || 'Subtitle',
|
||||
s.srclang || ''
|
||||
]
|
||||
}) + '\n');
|
||||
});
|
||||
|
||||
return { success: true };
|
||||
} catch (e) {
|
||||
return { error: (e as Error).message };
|
||||
}
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import { FastifyInstance } from 'fastify';
|
||||
import * as controller from './anime.controller';
|
||||
|
||||
async function animeRoutes(fastify: FastifyInstance) {
|
||||
fastify.get('/anime/:id', controller.getAnime);
|
||||
fastify.get('/anime/:id/:episodes', controller.getAnimeEpisodes);
|
||||
fastify.get('/trending', controller.getTrending);
|
||||
fastify.get('/top-airing', controller.getTopAiring);
|
||||
fastify.get('/search', controller.search);
|
||||
fastify.get('/search/:extension', controller.searchInExtension);
|
||||
fastify.get('/watch/stream', controller.getWatchStream);
|
||||
fastify.post('/watch/mpv', controller.openInMPV);
|
||||
}
|
||||
|
||||
export default animeRoutes;
|
||||
@@ -1,575 +0,0 @@
|
||||
import { getCache, setCache, getCachedExtension, cacheExtension, getExtensionTitle } from '../../shared/queries';
|
||||
import { queryAll, queryOne } from '../../shared/database';
|
||||
import {Anime, Episode, Extension, StreamData} from '../types';
|
||||
|
||||
const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
|
||||
|
||||
const ANILIST_URL = "https://graphql.anilist.co";
|
||||
|
||||
const MEDIA_FIELDS = `
|
||||
id
|
||||
idMal
|
||||
title { romaji english native userPreferred }
|
||||
type
|
||||
format
|
||||
status
|
||||
description
|
||||
startDate { year month day }
|
||||
endDate { year month day }
|
||||
season
|
||||
seasonYear
|
||||
episodes
|
||||
duration
|
||||
chapters
|
||||
volumes
|
||||
countryOfOrigin
|
||||
isLicensed
|
||||
source
|
||||
hashtag
|
||||
trailer { id site thumbnail }
|
||||
updatedAt
|
||||
coverImage { extraLarge large medium color }
|
||||
bannerImage
|
||||
genres
|
||||
synonyms
|
||||
averageScore
|
||||
popularity
|
||||
isLocked
|
||||
trending
|
||||
favourites
|
||||
isAdult
|
||||
siteUrl
|
||||
tags { id name description category rank isGeneralSpoiler isMediaSpoiler isAdult }
|
||||
relations {
|
||||
edges {
|
||||
relationType
|
||||
node {
|
||||
id
|
||||
title { romaji english }
|
||||
type
|
||||
format
|
||||
status
|
||||
coverImage { medium large color }
|
||||
bannerImage
|
||||
season
|
||||
seasonYear
|
||||
}
|
||||
}
|
||||
}
|
||||
studios {
|
||||
edges {
|
||||
isMain
|
||||
node { id name isAnimationStudio }
|
||||
}
|
||||
}
|
||||
nextAiringEpisode { airingAt timeUntilAiring episode }
|
||||
externalLinks { id url site type language color icon notes }
|
||||
rankings { id rank type format year season allTime context }
|
||||
stats {
|
||||
scoreDistribution { score amount }
|
||||
statusDistribution { status amount }
|
||||
}
|
||||
recommendations(perPage: 7, sort: RATING_DESC) {
|
||||
nodes {
|
||||
mediaRecommendation {
|
||||
id
|
||||
title { romaji }
|
||||
coverImage { medium large}
|
||||
format
|
||||
type
|
||||
}
|
||||
}
|
||||
}
|
||||
characters(perPage: 12, sort: [ROLE, RELEVANCE]) {
|
||||
edges {
|
||||
role
|
||||
node {
|
||||
id
|
||||
name { full native }
|
||||
image { medium large }
|
||||
}
|
||||
voiceActors {
|
||||
id
|
||||
name { full }
|
||||
language
|
||||
image { medium }
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export async function refreshTrendingAnime(): Promise<void> {
|
||||
const query = `
|
||||
query {
|
||||
Page(page: 1, perPage: 10) {
|
||||
media(type: ANIME, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const data = await fetchAniList(query, {});
|
||||
const list = data?.Page?.media || [];
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
|
||||
await queryOne("DELETE FROM trending");
|
||||
|
||||
let rank = 1;
|
||||
for (const anime of list) {
|
||||
await queryOne(
|
||||
"INSERT INTO trending (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
|
||||
[rank++, anime.id, JSON.stringify(anime), now]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export async function refreshTopAiringAnime(): Promise<void> {
|
||||
const query = `
|
||||
query {
|
||||
Page(page: 1, perPage: 10) {
|
||||
media(type: ANIME, status: RELEASING, sort: SCORE_DESC) { ${MEDIA_FIELDS} }
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const data = await fetchAniList(query, {});
|
||||
const list = data?.Page?.media || [];
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
|
||||
await queryOne("DELETE FROM top_airing");
|
||||
|
||||
let rank = 1;
|
||||
for (const anime of list) {
|
||||
await queryOne(
|
||||
"INSERT INTO top_airing (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
|
||||
[rank++, anime.id, JSON.stringify(anime), now]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchAniList(query: string, variables: any) {
|
||||
const res = await fetch(ANILIST_URL, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ query, variables })
|
||||
});
|
||||
|
||||
const json = await res.json();
|
||||
return json?.data;
|
||||
}
|
||||
|
||||
export async function getAnimeById(id: string | number): Promise<Anime | { error: string }> {
|
||||
const row = await queryOne("SELECT full_data FROM anime WHERE id = ?", [id]);
|
||||
|
||||
if (row) {
|
||||
const cached = JSON.parse(row.full_data);
|
||||
|
||||
if (cached?.characters?.edges?.length) {
|
||||
return cached;
|
||||
}
|
||||
|
||||
await queryOne(
|
||||
"DELETE FROM anime WHERE id = ?",
|
||||
[id]
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const query = `
|
||||
query ($id: Int) {
|
||||
Media(id: $id, type: ANIME) { ${MEDIA_FIELDS} }
|
||||
}
|
||||
`;
|
||||
|
||||
const data = await fetchAniList(query, { id: Number(id) });
|
||||
if (!data?.Media) return { error: "Anime not found" };
|
||||
|
||||
await queryOne(
|
||||
"INSERT INTO anime (id, title, updatedAt, full_data) VALUES (?, ?, ?, ?)",
|
||||
[
|
||||
data.Media.id,
|
||||
data.Media.title?.english || data.Media.title?.romaji,
|
||||
data.Media.updatedAt || 0,
|
||||
JSON.stringify(data.Media)
|
||||
]
|
||||
);
|
||||
|
||||
return data.Media;
|
||||
}
|
||||
|
||||
export async function getTrendingAnime(): Promise<Anime[]> {
|
||||
const rows = await queryAll(
|
||||
"SELECT full_data FROM trending ORDER BY rank ASC LIMIT 10"
|
||||
);
|
||||
return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
|
||||
}
|
||||
|
||||
export async function getTopAiringAnime(): Promise<Anime[]> {
|
||||
const rows = await queryAll(
|
||||
"SELECT full_data FROM top_airing ORDER BY rank ASC LIMIT 10"
|
||||
);
|
||||
return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
|
||||
}
|
||||
|
||||
export async function searchAnimeLocal(query: string): Promise<Anime[]> {
|
||||
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 localResults: Anime[] = rows
|
||||
.map((r: { full_data: string }) => JSON.parse(r.full_data))
|
||||
.filter((anime: { title: { english: any; romaji: any; native: any; }; synonyms: any; }) => {
|
||||
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));
|
||||
})
|
||||
.slice(0, 10);
|
||||
|
||||
if (localResults.length >= 5) {
|
||||
return localResults;
|
||||
}
|
||||
|
||||
const gql = `
|
||||
query ($search: String) {
|
||||
Page(page: 1, perPage: 10) {
|
||||
media(type: ANIME, search: $search) { ${MEDIA_FIELDS} }
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const data = await fetchAniList(gql, { search: query });
|
||||
const remoteResults: Anime[] = data?.Page?.media || [];
|
||||
|
||||
for (const anime of remoteResults) {
|
||||
await queryOne(
|
||||
"INSERT OR IGNORE INTO anime (id, title, updatedAt, full_data) VALUES (?, ?, ?, ?)",
|
||||
[
|
||||
anime.id,
|
||||
anime.title?.english || anime.title?.romaji,
|
||||
anime.updatedAt || 0,
|
||||
JSON.stringify(anime)
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
const merged = [...localResults];
|
||||
|
||||
for (const anime of remoteResults) {
|
||||
if (!merged.find(a => a.id === anime.id)) {
|
||||
merged.push(anime);
|
||||
}
|
||||
if (merged.length >= 10) break;
|
||||
}
|
||||
|
||||
return merged;
|
||||
}
|
||||
|
||||
export async function getAnimeInfoExtension(ext: Extension | null, id: string): Promise<Anime | { error: string }> {
|
||||
if (!ext) return { error: "not found" };
|
||||
|
||||
const extName = ext.constructor.name;
|
||||
const cached = await getCachedExtension(extName, id);
|
||||
if (cached) {
|
||||
try {
|
||||
console.log(`[${extName}] Metadata cache hit for ID: ${id}`);
|
||||
return JSON.parse(cached.metadata) as Anime;
|
||||
} catch {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
if ((ext.type === 'anime-board') && ext.getMetadata) {
|
||||
try {
|
||||
const match = await ext.getMetadata(id);
|
||||
|
||||
if (match) {
|
||||
const normalized: any = {
|
||||
title: match.title ?? "Unknown",
|
||||
summary: match.summary ?? "No summary available",
|
||||
episodes: Number(match.episodes) || 0,
|
||||
characters: Array.isArray(match.characters) ? match.characters : [],
|
||||
season: match.season ?? null,
|
||||
status: match.status ?? "Unknown",
|
||||
studio: match.studio ?? "Unknown",
|
||||
score: Number(match.score) || 0,
|
||||
year: match.year ?? null,
|
||||
genres: Array.isArray(match.genres) ? match.genres : [],
|
||||
image: match.image ?? ""
|
||||
};
|
||||
|
||||
await cacheExtension(extName, id, normalized.title, normalized);
|
||||
return normalized;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`Extension getMetadata failed:`, e);
|
||||
}
|
||||
}
|
||||
|
||||
return { error: "not found" };
|
||||
}
|
||||
|
||||
export async function searchAnimeInExtension(ext: Extension | null, name: string, query: string) {
|
||||
if (!ext) return [];
|
||||
|
||||
if (ext.type === 'anime-board' && ext.search) {
|
||||
try {
|
||||
console.log(`[${name}] Searching for anime: ${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,
|
||||
extensionName: name,
|
||||
title: { romaji: m.title, english: m.title, native: null },
|
||||
coverImage: { large: m.image || '' },
|
||||
averageScore: m.rating || m.score || null,
|
||||
format: 'ANIME',
|
||||
seasonYear: null,
|
||||
url: m.url,
|
||||
isExtensionResult: true,
|
||||
}));
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`Extension search failed for ${name}:`, e);
|
||||
}
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
|
||||
export async function searchEpisodesInExtension(ext: Extension | null, name: string, query: string): Promise<Episode[]> {
|
||||
if (!ext) return [];
|
||||
|
||||
const cacheKey = `anime:episodes:${name}:${query}`;
|
||||
const cached = await getCache(cacheKey);
|
||||
|
||||
if (cached) {
|
||||
const isExpired = Date.now() - cached.created_at > CACHE_TTL_MS;
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(cached.result) as {
|
||||
mediaId?: string;
|
||||
episodes: Episode[];
|
||||
};
|
||||
|
||||
if (!isExpired) {
|
||||
console.log(`[${name}] Episodes cache hit for: ${query}`);
|
||||
return parsed.episodes;
|
||||
}
|
||||
|
||||
// Si el caché expiró pero tenemos mediaId, refrescamos directamente
|
||||
if (parsed.mediaId && ext.type === "anime-board" && ext.search && typeof ext.findEpisodes === "function") {
|
||||
console.log(`[${name}] Episodes cache expired but mediaId found, refreshing...`);
|
||||
const chapterList = await ext.findEpisodes(parsed.mediaId);
|
||||
|
||||
if (!Array.isArray(chapterList)) return [];
|
||||
|
||||
const result: Episode[] = chapterList.map(ep => ({
|
||||
id: ep.id,
|
||||
number: ep.number,
|
||||
url: ep.url,
|
||||
title: ep.title
|
||||
}));
|
||||
|
||||
await setCache(cacheKey, { mediaId: parsed.mediaId, episodes: result }, CACHE_TTL_MS);
|
||||
return result;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`[${name}] Error parsing cached episodes:`, e);
|
||||
}
|
||||
}
|
||||
|
||||
if (ext.type === "anime-board" && ext.search && typeof ext.findEpisodes === "function") {
|
||||
try {
|
||||
const title = await getExtensionTitle(name, query);
|
||||
let mediaId: string;
|
||||
|
||||
if (!title) {
|
||||
const matches = await ext.search({
|
||||
query,
|
||||
media: {
|
||||
romajiTitle: query,
|
||||
englishTitle: query,
|
||||
startDate: { year: 0, month: 0, day: 0 }
|
||||
}
|
||||
});
|
||||
if (!matches || matches.length === 0) return [];
|
||||
|
||||
const normalizedQuery = normalize(query);
|
||||
const scored = matches.map(match => {
|
||||
const normalizedTitle = normalize(match.title);
|
||||
const score = similarity(normalizedQuery, normalizedTitle);
|
||||
|
||||
let bonus = 0;
|
||||
if (normalizedTitle === normalizedQuery) {
|
||||
bonus = 0.5;
|
||||
} else if (normalizedTitle.toLowerCase().includes(normalizedQuery.toLowerCase())) {
|
||||
bonus = 0.5;
|
||||
}
|
||||
|
||||
const finalScore = score + bonus;
|
||||
|
||||
return {
|
||||
match,
|
||||
score: finalScore
|
||||
};
|
||||
});
|
||||
|
||||
scored.sort((a, b) => b.score - a.score);
|
||||
const bestMatches = scored.filter(s => s.score > 0.4);
|
||||
|
||||
if (bestMatches.length === 0) return [];
|
||||
const res = bestMatches[0].match;
|
||||
if (!res?.id) return [];
|
||||
mediaId = res.id;
|
||||
} else {
|
||||
mediaId = query;
|
||||
}
|
||||
|
||||
const chapterList = await ext.findEpisodes(mediaId);
|
||||
if (!Array.isArray(chapterList)) return [];
|
||||
|
||||
const result: Episode[] = chapterList.map(ep => ({
|
||||
id: ep.id,
|
||||
number: ep.number,
|
||||
url: ep.url,
|
||||
title: ep.title
|
||||
}));
|
||||
|
||||
// Cachear tanto el mediaId como los episodios
|
||||
await setCache(cacheKey, { mediaId, episodes: result }, CACHE_TTL_MS);
|
||||
|
||||
return result;
|
||||
} catch (e) {
|
||||
console.error(`Extension search failed for ${name}:`, e);
|
||||
}
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
|
||||
export async function getStreamData(extension: Extension, episode: string, id: string, source: string, server?: string, category?: string, extensionAnimeId?: string): Promise<StreamData> {
|
||||
const providerName = extension.constructor.name;
|
||||
|
||||
const finalCategory = category ?? "sub";
|
||||
|
||||
const cacheKey =
|
||||
`anime:stream:${providerName}:${id}:${episode}:${server}:${finalCategory}`;
|
||||
if (!extensionAnimeId) {
|
||||
const cached = await getCache(cacheKey);
|
||||
|
||||
if (cached) {
|
||||
const isExpired = Date.now() - cached.created_at > CACHE_TTL_MS;
|
||||
|
||||
if (!isExpired) {
|
||||
console.log(`[${providerName}] Stream data cache hit for episode ${episode}`);
|
||||
try {
|
||||
return JSON.parse(cached.result) as StreamData;
|
||||
} catch (e) {
|
||||
console.error(`[${providerName}] Error parsing cached stream data:`, e);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!extension.findEpisodes || !extension.findEpisodeServer) {
|
||||
throw new Error("Extension doesn't support required methods");
|
||||
}
|
||||
let episodes;
|
||||
let animeTitle: string | undefined;
|
||||
|
||||
if (source === "anilist" && !extensionAnimeId) {
|
||||
const anime: any = await getAnimeById(id);
|
||||
episodes = await searchEpisodesInExtension(extension, extension.constructor.name, anime.title.romaji);
|
||||
} else {
|
||||
const targetId = extensionAnimeId ?? id;
|
||||
episodes = await extension.findEpisodes(targetId);
|
||||
|
||||
if (extensionAnimeId) {
|
||||
const anime: any = await getAnimeById(id);
|
||||
animeTitle = anime.title.romaji;
|
||||
|
||||
const episodesCacheKey = `anime:episodes:${providerName}:${animeTitle}`;
|
||||
const episodesResult: Episode[] = episodes.map((ep: any) => ({
|
||||
id: ep.id,
|
||||
number: ep.number,
|
||||
url: ep.url,
|
||||
title: ep.title
|
||||
}));
|
||||
|
||||
await setCache(episodesCacheKey, {
|
||||
mediaId: extensionAnimeId,
|
||||
episodes: episodesResult
|
||||
}, CACHE_TTL_MS);
|
||||
}
|
||||
}
|
||||
|
||||
const targetEp = episodes.find((e: any) => e.number === parseInt(episode));
|
||||
|
||||
if (!targetEp) {
|
||||
throw new Error("Episode not found");
|
||||
}
|
||||
|
||||
const streamData = await extension.findEpisodeServer(targetEp, server, category);
|
||||
|
||||
await setCache(cacheKey, streamData, CACHE_TTL_MS);
|
||||
return streamData;
|
||||
}
|
||||
|
||||
function similarity(s1: string, s2: string): number {
|
||||
const str1 = normalize(s1);
|
||||
const str2 = normalize(s2);
|
||||
|
||||
const longer = str1.length > str2.length ? str1 : str2;
|
||||
const shorter = str1.length > str2.length ? str2 : str1;
|
||||
|
||||
if (longer.length === 0) return 1.0;
|
||||
|
||||
const editDistance = levenshteinDistance(longer, shorter);
|
||||
return (longer.length - editDistance) / longer.length;
|
||||
}
|
||||
|
||||
function levenshteinDistance(s1: string, s2: string): number {
|
||||
const costs: number[] = [];
|
||||
for (let i = 0; i <= s1.length; i++) {
|
||||
let lastValue = i;
|
||||
for (let j = 0; j <= s2.length; j++) {
|
||||
if (i === 0) {
|
||||
costs[j] = j;
|
||||
} else if (j > 0) {
|
||||
let newValue = costs[j - 1];
|
||||
if (s1.charAt(i - 1) !== s2.charAt(j - 1)) {
|
||||
newValue = Math.min(Math.min(newValue, lastValue), costs[j]) + 1;
|
||||
}
|
||||
costs[j - 1] = lastValue;
|
||||
lastValue = newValue;
|
||||
}
|
||||
}
|
||||
if (i > 0) costs[s2.length] = lastValue;
|
||||
}
|
||||
return costs[s2.length];
|
||||
}
|
||||
|
||||
function normalize(str: string): string {
|
||||
return str
|
||||
.toLowerCase()
|
||||
.replace(/'/g, "'") // decodificar entidades HTML
|
||||
.replace(/[^\w\s]/g, ' ') // convertir puntuación a espacios
|
||||
.replace(/\s+/g, ' ') // normalizar espacios
|
||||
.trim();
|
||||
}
|
||||
@@ -1,652 +0,0 @@
|
||||
import { getCachedExtension, cacheExtension, getCache, setCache, getExtensionTitle } from '../../shared/queries';
|
||||
import { queryOne, queryAll, run } from '../../shared/database';
|
||||
import { getAllExtensions, getBookExtensionsMap } from '../../shared/extensions';
|
||||
import { Book, Extension, ChapterWithProvider, ChapterContent } from '../types';
|
||||
|
||||
const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
|
||||
const ANILIST_URL = "https://graphql.anilist.co";
|
||||
|
||||
async function fetchAniList(query: string, variables: any) {
|
||||
const res = await fetch(ANILIST_URL, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Accept": "application/json"
|
||||
},
|
||||
body: JSON.stringify({ query, variables })
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(`AniList error ${res.status}`);
|
||||
}
|
||||
|
||||
const json = await res.json();
|
||||
return json?.data;
|
||||
}
|
||||
const MEDIA_FIELDS = `
|
||||
id
|
||||
title {
|
||||
romaji
|
||||
english
|
||||
native
|
||||
userPreferred
|
||||
}
|
||||
type
|
||||
format
|
||||
status
|
||||
description
|
||||
startDate { year month day }
|
||||
endDate { year month day }
|
||||
season
|
||||
seasonYear
|
||||
episodes
|
||||
chapters
|
||||
volumes
|
||||
duration
|
||||
genres
|
||||
synonyms
|
||||
averageScore
|
||||
popularity
|
||||
favourites
|
||||
isAdult
|
||||
siteUrl
|
||||
coverImage {
|
||||
extraLarge
|
||||
large
|
||||
medium
|
||||
color
|
||||
}
|
||||
bannerImage
|
||||
updatedAt
|
||||
`;
|
||||
|
||||
export async function getBookById(id: string | number): Promise<Book | { error: string }> {
|
||||
const row = await queryOne(
|
||||
"SELECT full_data FROM books WHERE id = ?",
|
||||
[id]
|
||||
);
|
||||
|
||||
if (row) {
|
||||
const parsed = JSON.parse(row.full_data);
|
||||
|
||||
const hasRelationImages =
|
||||
parsed?.relations?.edges?.[0]?.node?.coverImage?.large;
|
||||
|
||||
const hasCharacterImages =
|
||||
parsed?.characters?.nodes?.[0]?.image?.large;
|
||||
|
||||
if (hasRelationImages && hasCharacterImages) {
|
||||
return parsed;
|
||||
}
|
||||
|
||||
console.log(`[Book] Cache outdated for ID ${id}, refetching...`);
|
||||
}
|
||||
|
||||
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 } coverImage { large medium } } } }
|
||||
characters(page: 1, perPage: 10) { nodes { id name { full } image { large medium } } }
|
||||
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.toString()) }
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data?.data?.Media) {
|
||||
const media = data.data.Media;
|
||||
|
||||
const insertSql = `
|
||||
INSERT INTO books (id, title, updatedAt, full_data)
|
||||
VALUES (?, ?, ?, ?)
|
||||
ON CONFLICT(id) DO UPDATE SET
|
||||
title = EXCLUDED.title,
|
||||
updatedAt = EXCLUDED.updatedAt,
|
||||
full_data = EXCLUDED.full_data;
|
||||
`;
|
||||
|
||||
await run(insertSql, [
|
||||
media.id,
|
||||
media.title?.userPreferred || media.title?.romaji || media.title?.english || null,
|
||||
media.updatedAt || Math.floor(Date.now() / 1000),
|
||||
JSON.stringify(media)
|
||||
]);
|
||||
|
||||
return media;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Fetch error:", e);
|
||||
}
|
||||
|
||||
return { error: "Book not found" };
|
||||
}
|
||||
|
||||
export async function refreshTrendingBooks(): Promise<void> {
|
||||
const query = `
|
||||
query {
|
||||
Page(page: 1, perPage: 10) {
|
||||
media(type: MANGA, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const data = await fetchAniList(query, {});
|
||||
const list = data?.Page?.media || [];
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
|
||||
await queryOne("DELETE FROM trending_books");
|
||||
|
||||
let rank = 1;
|
||||
for (const book of list) {
|
||||
await queryOne(
|
||||
"INSERT INTO trending_books (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
|
||||
[rank++, book.id, JSON.stringify(book), now]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export async function refreshPopularBooks(): Promise<void> {
|
||||
const query = `
|
||||
query {
|
||||
Page(page: 1, perPage: 10) {
|
||||
media(type: MANGA, sort: POPULARITY_DESC) { ${MEDIA_FIELDS} }
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const data = await fetchAniList(query, {});
|
||||
const list = data?.Page?.media || [];
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
|
||||
await queryOne("DELETE FROM popular_books");
|
||||
|
||||
let rank = 1;
|
||||
for (const book of list) {
|
||||
await queryOne(
|
||||
"INSERT INTO popular_books (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
|
||||
[rank++, book.id, JSON.stringify(book), now]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export async function getTrendingBooks(): Promise<Book[]> {
|
||||
const rows = await queryAll(
|
||||
"SELECT full_data FROM trending_books ORDER BY rank ASC LIMIT 10"
|
||||
);
|
||||
return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
|
||||
}
|
||||
|
||||
export async function getPopularBooks(): Promise<Book[]> {
|
||||
const rows = await queryAll(
|
||||
"SELECT full_data FROM popular_books ORDER BY rank ASC LIMIT 10"
|
||||
);
|
||||
return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
|
||||
}
|
||||
|
||||
export async function searchBooksLocal(query: string): Promise<Book[]> {
|
||||
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: Book[] = rows.map((row: { full_data: string; }) => 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);
|
||||
}
|
||||
|
||||
export async function searchBooksAniList(query: string): Promise<Book[]> {
|
||||
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 [];
|
||||
}
|
||||
|
||||
export async function getBookInfoExtension(ext: Extension | null, id: string): Promise<any[]> {
|
||||
if (!ext) return [];
|
||||
|
||||
const extName = ext.constructor.name;
|
||||
|
||||
const cached = await getCachedExtension(extName, id);
|
||||
if (cached) {
|
||||
try {
|
||||
return JSON.parse(cached.metadata);
|
||||
} catch {}
|
||||
}
|
||||
|
||||
if (ext.type === 'book-board' && ext.getMetadata) {
|
||||
try {
|
||||
const info = await ext.getMetadata(id);
|
||||
|
||||
if (info) {
|
||||
const normalized = {
|
||||
id: info.id ?? id,
|
||||
title: info.title ?? "",
|
||||
format: info.format ?? "",
|
||||
score: typeof info.score === "number" ? info.score : null,
|
||||
genres: Array.isArray(info.genres) ? info.genres : [],
|
||||
status: info.status ?? "",
|
||||
published: info.published ?? "",
|
||||
summary: info.summary ?? "",
|
||||
chapters: Number.isFinite(info.chapters) ? info.chapters : 1,
|
||||
image: typeof info.image === "string" ? info.image : ""
|
||||
};
|
||||
|
||||
await cacheExtension(extName, id, normalized.title, normalized);
|
||||
return [normalized];
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`Extension getInfo failed:`, e);
|
||||
}
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
|
||||
export async function searchBooksInExtension(ext: Extension | null, name: string, query: string): Promise<Book[]> {
|
||||
if (!ext) return [];
|
||||
|
||||
if ((ext.type === 'book-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?.length) {
|
||||
return matches.map(m => ({
|
||||
id: m.id,
|
||||
extensionName: name,
|
||||
title: { romaji: m.title, english: m.title, native: null },
|
||||
coverImage: { large: m.image || '' },
|
||||
averageScore: m.rating || m.score || null,
|
||||
format: m.format,
|
||||
seasonYear: null,
|
||||
isExtensionResult: true,
|
||||
url: m.url,
|
||||
}));
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
console.error(`Extension search failed for ${name}:`, e);
|
||||
}
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
|
||||
async function fetchBookMetadata(id: string): Promise<Book | null> {
|
||||
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();
|
||||
return d.data?.Media || null;
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch book metadata:", e);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function searchChaptersInExtension(ext: Extension, name: string, lookupId: string, cacheId: string, search: boolean, origin: string, disableCache = false): Promise<ChapterWithProvider[]> {
|
||||
const cacheKey = `chapters:${name}:${origin}:id:${cacheId}`;
|
||||
if (!disableCache) {
|
||||
const cached = await getCache(cacheKey);
|
||||
|
||||
if (cached) {
|
||||
const isExpired = Date.now() - cached.created_at > CACHE_TTL_MS;
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(cached.result) as {
|
||||
mediaId?: string;
|
||||
chapters: ChapterWithProvider[];
|
||||
};
|
||||
|
||||
if (!isExpired) {
|
||||
console.log(`[${name}] Chapters cache hit for: ${lookupId}`);
|
||||
return parsed.chapters;
|
||||
}
|
||||
|
||||
if (parsed.mediaId) {
|
||||
const chaps = await ext.findChapters!(parsed.mediaId);
|
||||
|
||||
const result = chaps.map(ch => ({
|
||||
id: ch.id,
|
||||
number: parseFloat(ch.number.toString()),
|
||||
title: ch.title,
|
||||
date: ch.releaseDate,
|
||||
provider: name,
|
||||
index: ch.index,
|
||||
language: ch.language ?? null,
|
||||
}));
|
||||
|
||||
await setCache(cacheKey, { mediaId: parsed.mediaId, chapters: result }, CACHE_TTL_MS);
|
||||
return result;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`[${name}] Error parsing cached chapters:`, e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
console.log(`[${name}] Searching chapters for: ${lookupId}`);
|
||||
|
||||
let mediaId: string;
|
||||
if (search) {
|
||||
const matches = await ext.search!({
|
||||
query: lookupId,
|
||||
media: {
|
||||
romajiTitle: lookupId,
|
||||
englishTitle: lookupId,
|
||||
startDate: { year: 0, month: 0, day: 0 }
|
||||
}
|
||||
});
|
||||
|
||||
if (!matches?.length) return [];
|
||||
|
||||
const nq = normalize(lookupId);
|
||||
|
||||
const scored = matches.map(m => {
|
||||
const nt = normalize(m.title);
|
||||
let score = similarity(nq, nt);
|
||||
|
||||
if (nt === nq || nt.includes(nq)) score += 0.5;
|
||||
|
||||
return { m, score };
|
||||
});
|
||||
|
||||
scored.sort((a, b) => b.score - a.score);
|
||||
|
||||
if (scored[0].score < 0.4) return [];
|
||||
|
||||
mediaId = scored[0].m.id;
|
||||
|
||||
} else {
|
||||
const match = await ext.getMetadata(lookupId);
|
||||
mediaId = match.id;
|
||||
}
|
||||
|
||||
const chaps = await ext.findChapters!(mediaId);
|
||||
|
||||
if (!chaps?.length){
|
||||
return [];
|
||||
}
|
||||
|
||||
console.log(`[${name}] Found ${chaps.length} chapters.`);
|
||||
const result: ChapterWithProvider[] = chaps.map((ch) => ({
|
||||
id: ch.id,
|
||||
number: parseFloat(ch.number.toString()),
|
||||
title: ch.title,
|
||||
date: ch.releaseDate,
|
||||
provider: name,
|
||||
index: ch.index,
|
||||
language: ch.language ?? null,
|
||||
}));
|
||||
|
||||
await setCache(cacheKey, {
|
||||
mediaId,
|
||||
chapters: result
|
||||
}, CACHE_TTL_MS);
|
||||
return result;
|
||||
|
||||
} catch (e) {
|
||||
const error = e as Error;
|
||||
console.error(`Failed to fetch chapters from ${name}:`, error.message);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export async function getChaptersForBook(id: string, ext: Boolean, onlyProvider?: string, extensionBookId?: string): Promise<{ chapters: ChapterWithProvider[] }> {
|
||||
let bookData: Book | null = null;
|
||||
let searchTitle: string = "";
|
||||
|
||||
if (!ext) {
|
||||
const result = await getBookById(id);
|
||||
if (!result || "error" in result) return { chapters: [] }
|
||||
bookData = result;
|
||||
const titles = [bookData.title.english, bookData.title.romaji].filter(Boolean) as string[];
|
||||
searchTitle = titles[0];
|
||||
}
|
||||
const bookExtensions = getBookExtensionsMap();
|
||||
|
||||
let extension;
|
||||
if (!searchTitle) {
|
||||
for (const [name, ext] of bookExtensions) {
|
||||
const title = await getExtensionTitle(name, id)
|
||||
if (title){
|
||||
searchTitle = title;
|
||||
extension = name;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const allChapters: any[] = [];
|
||||
let exts = "anilist";
|
||||
if (ext) exts = "ext";
|
||||
|
||||
for (const [name, ext] of bookExtensions) {
|
||||
if (onlyProvider && name !== onlyProvider) continue;
|
||||
if (extensionBookId && name === onlyProvider) {
|
||||
const targetId = extensionBookId ?? id;
|
||||
|
||||
const chapters = await searchChaptersInExtension(
|
||||
ext,
|
||||
name,
|
||||
targetId, // lookup
|
||||
id, // cache siempre con el id normal
|
||||
false,
|
||||
exts,
|
||||
Boolean(extensionBookId)
|
||||
);
|
||||
|
||||
allChapters.push(...chapters);
|
||||
} else {
|
||||
const chapters = await searchChaptersInExtension(
|
||||
ext,
|
||||
name,
|
||||
searchTitle,
|
||||
id, // cache con id normal
|
||||
true,
|
||||
exts
|
||||
);
|
||||
|
||||
allChapters.push(...chapters);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
chapters: allChapters.sort((a, b) => Number(a.number) - Number(b.number))
|
||||
};
|
||||
}
|
||||
|
||||
export async function getChapterContent(bookId: string, chapterId: string, providerName: string, source: string, lang: string): Promise<ChapterContent> {
|
||||
const extensions = getAllExtensions();
|
||||
const ext = extensions.get(providerName);
|
||||
|
||||
if (!ext) {
|
||||
throw new Error("Provider not found");
|
||||
}
|
||||
|
||||
const contentCacheKey = `content:${providerName}:${source}:${lang}:${bookId}:${chapterId}`;
|
||||
const cachedContent = await getCache(contentCacheKey);
|
||||
|
||||
if (cachedContent) {
|
||||
const isExpired = Date.now() - cachedContent.created_at > CACHE_TTL_MS;
|
||||
|
||||
if (!isExpired) {
|
||||
console.log(`[${providerName}] Content cache hit for Book ID ${bookId}, Index ${chapterId}`);
|
||||
try {
|
||||
return JSON.parse(cachedContent.result) as ChapterContent;
|
||||
} catch (e) {
|
||||
console.error(`[${providerName}] Error parsing cached content:`, e);
|
||||
|
||||
}
|
||||
} else {
|
||||
console.log(`[${providerName}] Content cache expired for Book ID ${bookId}, Index ${chapterId}`);
|
||||
}
|
||||
}
|
||||
|
||||
const selectedChapter: any = {
|
||||
id: chapterId,
|
||||
provider: providerName
|
||||
};
|
||||
|
||||
try {
|
||||
if (!ext.findChapterPages) {
|
||||
throw new Error("Extension doesn't support findChapterPages");
|
||||
}
|
||||
|
||||
let contentResult: ChapterContent;
|
||||
|
||||
if (ext.mediaType === "manga") {
|
||||
// Usamos el ID directamente
|
||||
const pages = await ext.findChapterPages(chapterId);
|
||||
contentResult = {
|
||||
type: "manga",
|
||||
chapterId: selectedChapter.id,
|
||||
title: selectedChapter.title,
|
||||
number: selectedChapter.number,
|
||||
provider: providerName,
|
||||
pages
|
||||
};
|
||||
} else if (ext.mediaType === "ln") {
|
||||
const content = await ext.findChapterPages(chapterId);
|
||||
contentResult = {
|
||||
type: "ln",
|
||||
chapterId: selectedChapter.id,
|
||||
title: selectedChapter.title,
|
||||
number: selectedChapter.number,
|
||||
provider: providerName,
|
||||
content
|
||||
};
|
||||
} else {
|
||||
throw new Error("Unknown mediaType");
|
||||
}
|
||||
|
||||
await setCache(contentCacheKey, contentResult, CACHE_TTL_MS);
|
||||
return contentResult;
|
||||
|
||||
} catch (err) {
|
||||
const error = err as Error;
|
||||
console.error(`[Chapter] Error loading from ${providerName}:`, error.message);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
function similarity(s1: string, s2: string): number {
|
||||
const str1 = normalize(s1);
|
||||
const str2 = normalize(s2);
|
||||
|
||||
const longer = str1.length > str2.length ? str1 : str2;
|
||||
const shorter = str1.length > str2.length ? str2 : str1;
|
||||
|
||||
if (longer.length === 0) return 1.0;
|
||||
|
||||
const editDistance = levenshteinDistance(longer, shorter);
|
||||
return (longer.length - editDistance) / longer.length;
|
||||
}
|
||||
|
||||
function levenshteinDistance(s1: string, s2: string): number {
|
||||
const costs: number[] = [];
|
||||
for (let i = 0; i <= s1.length; i++) {
|
||||
let lastValue = i;
|
||||
for (let j = 0; j <= s2.length; j++) {
|
||||
if (i === 0) {
|
||||
costs[j] = j;
|
||||
} else if (j > 0) {
|
||||
let newValue = costs[j - 1];
|
||||
if (s1.charAt(i - 1) !== s2.charAt(j - 1)) {
|
||||
newValue = Math.min(Math.min(newValue, lastValue), costs[j]) + 1;
|
||||
}
|
||||
costs[j - 1] = lastValue;
|
||||
lastValue = newValue;
|
||||
}
|
||||
}
|
||||
if (i > 0) costs[s2.length] = lastValue;
|
||||
}
|
||||
return costs[s2.length];
|
||||
}
|
||||
|
||||
function normalize(str: string): string {
|
||||
return str
|
||||
.toLowerCase()
|
||||
.replace(/'/g, "'") // decodificar entidades HTML
|
||||
.replace(/[^\w\s]/g, ' ') // convertir puntuación a espacios
|
||||
.replace(/\s+/g, ' ') // normalizar espacios
|
||||
.trim();
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
import { FastifyReply, FastifyRequest } from 'fastify';
|
||||
import { getConfig, setConfig } from '../../shared/config';
|
||||
|
||||
function hideSecrets(values: any) {
|
||||
const copy = structuredClone(values);
|
||||
if (copy.server?.jwt_secret) delete copy.server.jwt_secret;
|
||||
return copy;
|
||||
}
|
||||
|
||||
export async function getFullConfig(req: FastifyRequest, reply: FastifyReply) {
|
||||
try {
|
||||
const { values, schema } = getConfig();
|
||||
return { values: hideSecrets(values), schema };
|
||||
} catch {
|
||||
return { error: "Error loading config" };
|
||||
}
|
||||
}
|
||||
|
||||
export async function getConfigSection(
|
||||
req: FastifyRequest<{ Params: { section: string } }>,
|
||||
reply: FastifyReply
|
||||
) {
|
||||
try {
|
||||
const { section } = req.params;
|
||||
const { values } = getConfig();
|
||||
|
||||
if (values[section] === undefined) {
|
||||
return { error: "Section not found" };
|
||||
}
|
||||
|
||||
return { [section]: hideSecrets(values)[section] };
|
||||
} catch {
|
||||
return { error: "Error loading config section" };
|
||||
}
|
||||
}
|
||||
|
||||
export async function updateConfig(
|
||||
req: FastifyRequest<{ Body: any }>,
|
||||
reply: FastifyReply
|
||||
) {
|
||||
try {
|
||||
return setConfig(req.body); // schema nunca se toca
|
||||
} catch {
|
||||
return { error: "Error updating config" };
|
||||
}
|
||||
}
|
||||
|
||||
export async function updateConfigSection(
|
||||
req: FastifyRequest<{ Params: { section: string }, Body: any }>,
|
||||
reply: FastifyReply
|
||||
) {
|
||||
try {
|
||||
const { section } = req.params;
|
||||
const updatedValues = setConfig({ [section]: req.body });
|
||||
return { [section]: updatedValues[section] };
|
||||
} catch {
|
||||
return { error: "Error updating config section" };
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
import { FastifyInstance } from 'fastify';
|
||||
import * as controller from './config.controller';
|
||||
|
||||
async function configRoutes(fastify: FastifyInstance) {
|
||||
fastify.get('/config', controller.getFullConfig);
|
||||
fastify.get('/config/:section', controller.getConfigSection);
|
||||
fastify.post('/config', controller.updateConfig);
|
||||
fastify.post('/config/:section', controller.updateConfigSection);
|
||||
}
|
||||
|
||||
export default configRoutes;
|
||||
@@ -1,155 +0,0 @@
|
||||
import { FastifyReply, FastifyRequest } from 'fastify';
|
||||
import { getExtension, getExtensionsList, getGalleryExtensionsMap, getBookExtensionsMap, getMangaExtensionsMap, getNovelExtensionsMap, getAnimeExtensionsMap, saveExtensionFile, deleteExtensionFile } from '../../shared/extensions';
|
||||
import { ExtensionNameRequest } from '../types';
|
||||
|
||||
const TYPE_MAP: Record<string, string> = {
|
||||
'anime-board': 'anime',
|
||||
'image-board': 'image',
|
||||
'book-board': 'book',
|
||||
};
|
||||
|
||||
function extractProp(source: string, prop: string): string | null {
|
||||
const m = source.match(new RegExp(`this\\.${prop}\\s*=\\s*["']([^"']+)["']`));
|
||||
return m ? m[1] : null;
|
||||
}
|
||||
|
||||
function isNewer(remote: string, local?: string | null) {
|
||||
if (!local) return true;
|
||||
return remote !== local;
|
||||
}
|
||||
|
||||
export async function updateExtensions(req: any, reply: FastifyReply) {
|
||||
const updated: string[] = [];
|
||||
|
||||
for (const name of getExtensionsList()) {
|
||||
const ext = getExtension(name);
|
||||
if (!ext) continue;
|
||||
|
||||
const type = ext.type;
|
||||
if (!TYPE_MAP[type]) continue;
|
||||
|
||||
const fileName = ext.__fileName;
|
||||
const remoteUrl = `https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/${TYPE_MAP[type]}/${fileName}`;
|
||||
|
||||
let remoteSrc: string;
|
||||
try {
|
||||
const res = await fetch(remoteUrl);
|
||||
if (!res.ok) continue;
|
||||
remoteSrc = await res.text();
|
||||
} catch {
|
||||
continue;
|
||||
}
|
||||
|
||||
const remoteVersion = extractProp(remoteSrc, 'version');
|
||||
const localVersion = ext.version ?? null;
|
||||
if (!remoteVersion) continue;
|
||||
|
||||
if (isNewer(remoteVersion, localVersion)) {
|
||||
await saveExtensionFile(fileName, remoteUrl);
|
||||
updated.push(name);
|
||||
}
|
||||
}
|
||||
|
||||
return { updated };
|
||||
}
|
||||
|
||||
export async function getExtensions(req: FastifyRequest, reply: FastifyReply) {
|
||||
return { extensions: getExtensionsList() };
|
||||
}
|
||||
|
||||
export async function getAnimeExtensions(req: FastifyRequest, reply: FastifyReply) {
|
||||
const animeExtensions = getAnimeExtensionsMap();
|
||||
return { extensions: Array.from(animeExtensions.keys()) };
|
||||
}
|
||||
|
||||
export async function getBookExtensions(req: FastifyRequest, reply: FastifyReply) {
|
||||
const bookExtensions = getBookExtensionsMap();
|
||||
return { extensions: Array.from(bookExtensions.keys()) };
|
||||
}
|
||||
|
||||
export async function getMangaExtensions(req: FastifyRequest, reply: FastifyReply) {
|
||||
const bookExtensions = getMangaExtensionsMap();
|
||||
return { extensions: Array.from(bookExtensions.keys()) };
|
||||
}
|
||||
|
||||
export async function getNovelExtensions(req: FastifyRequest, reply: FastifyReply) {
|
||||
const bookExtensions = getNovelExtensionsMap();
|
||||
return { extensions: Array.from(bookExtensions.keys()) };
|
||||
}
|
||||
|
||||
export async function getGalleryExtensions(req: FastifyRequest, reply: FastifyReply) {
|
||||
const galleryExtensions = getGalleryExtensionsMap();
|
||||
return { extensions: Array.from(galleryExtensions.keys()) };
|
||||
}
|
||||
|
||||
export async function getExtensionSettings(req: ExtensionNameRequest, reply: FastifyReply) {
|
||||
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();
|
||||
}
|
||||
|
||||
export async function installExtension(req: any, reply: FastifyReply) {
|
||||
const { url } = req.body;
|
||||
|
||||
if (!url || typeof url !== 'string' || !url.endsWith('.js')) {
|
||||
return reply.code(400).send({ error: "Invalid extension URL provided" });
|
||||
}
|
||||
|
||||
try {
|
||||
const fileName = url.split('/').pop();
|
||||
|
||||
if (!fileName) {
|
||||
return reply.code(400).send({ error: "Could not determine file name from URL" });
|
||||
}
|
||||
|
||||
await saveExtensionFile(fileName, url);
|
||||
|
||||
req.server.log.info(`Extension installed: ${fileName}`);
|
||||
return reply.code(200).send({
|
||||
success: true,
|
||||
message: `Extension ${fileName} installed successfully.`,
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
req.server.log.error(`Failed to install extension from ${url}:`, error);
|
||||
return reply.code(500).send({
|
||||
success: false,
|
||||
error: "Failed to install extension.",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export async function uninstallExtension(req: any, reply: FastifyReply) {
|
||||
const { fileName } = req.body;
|
||||
|
||||
if (!fileName || !fileName.endsWith('.js')) {
|
||||
return reply.code(400).send({ error: "Invalid extension fileName provided" });
|
||||
}
|
||||
|
||||
try {
|
||||
|
||||
await deleteExtensionFile(fileName);
|
||||
|
||||
req.server.log.info(`Extension uninstalled: ${fileName}`);
|
||||
return reply.code(200).send({ success: true, message: `Extension ${fileName} uninstalled successfully.` });
|
||||
|
||||
} catch (error) {
|
||||
|
||||
// @ts-ignore
|
||||
if (error.code === 'ENOENT') {
|
||||
return reply.code(200).send({ success: true, message: `Extension ${fileName} already uninstalled (file not found).` });
|
||||
}
|
||||
|
||||
req.server.log.error(`Failed to uninstall extension ${fileName}:`, error);
|
||||
return reply.code(500).send({ success: false, error: `Failed to uninstall extension ${fileName}.` });
|
||||
}
|
||||
}
|
||||
@@ -1,565 +0,0 @@
|
||||
import { getConfig as loadConfig } from '../../shared/config';
|
||||
import { queryOne, queryAll, run } from '../../shared/database';
|
||||
import { getAnimeById } from '../anime/anime.service';
|
||||
import { getBookById } from '../books/books.service';
|
||||
import crypto from 'crypto';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import AdmZip from 'adm-zip';
|
||||
import { spawn } from 'child_process';
|
||||
const { values } = loadConfig();
|
||||
|
||||
const FFMPEG_PATH = values.paths?.ffmpeg || 'ffmpeg';
|
||||
|
||||
type DownloadStatus = {
|
||||
id: string;
|
||||
type: 'anime' | 'manga' | 'novel';
|
||||
anilistId: number;
|
||||
unitNumber: number;
|
||||
status: 'pending' | 'downloading' | 'completed' | 'failed';
|
||||
progress: number;
|
||||
speed?: string;
|
||||
timeElapsed?: string;
|
||||
error?: string;
|
||||
startedAt: number;
|
||||
completedAt?: number;
|
||||
folderName?: string;
|
||||
fileName?: string;
|
||||
};
|
||||
|
||||
const activeDownloads = new Map<string, DownloadStatus>();
|
||||
|
||||
export function getActiveDownloads(): DownloadStatus[] {
|
||||
return Array.from(activeDownloads.values());
|
||||
}
|
||||
|
||||
export function getDownloadById(id: string): DownloadStatus | undefined {
|
||||
return activeDownloads.get(id);
|
||||
}
|
||||
|
||||
function updateDownloadProgress(id: string, updates: Partial<DownloadStatus>) {
|
||||
const current = activeDownloads.get(id);
|
||||
if (current) {
|
||||
activeDownloads.set(id, { ...current, ...updates });
|
||||
}
|
||||
}
|
||||
|
||||
type AnimeDownloadParams = {
|
||||
anilistId: number;
|
||||
episodeNumber: number;
|
||||
streamUrl: string;
|
||||
headers?: Record<string, string>;
|
||||
quality?: string;
|
||||
subtitles?: Array<{ language: string; url: string }>;
|
||||
chapters?: Array<{ title: string; start_time: number; end_time: number }>;
|
||||
totalDuration?: number;
|
||||
};
|
||||
|
||||
type BookDownloadParams = {
|
||||
anilistId: number;
|
||||
chapterNumber: number;
|
||||
format: 'manga' | 'novel';
|
||||
content?: string;
|
||||
images?: Array<{ index: number; url: string }>;
|
||||
};
|
||||
|
||||
async function ensureDirectory(dirPath: string) {
|
||||
if (!fs.existsSync(dirPath)) {
|
||||
fs.mkdirSync(dirPath, { recursive: true });
|
||||
}
|
||||
}
|
||||
|
||||
async function downloadFile(url: string, outputPath: string): Promise<void> {
|
||||
const res = await fetch(url);
|
||||
if (!res.ok) throw new Error(`HTTP_${res.status}`);
|
||||
|
||||
await ensureDirectory(path.dirname(outputPath));
|
||||
const buf = Buffer.from(await res.arrayBuffer());
|
||||
fs.writeFileSync(outputPath, buf);
|
||||
}
|
||||
|
||||
async function getOrCreateEntry(
|
||||
anilistId: number,
|
||||
type: 'anime' | 'manga' | 'novels'
|
||||
): Promise<{ id: string; path: string; folderName: string }> {
|
||||
const existing = await queryOne(
|
||||
`SELECT id, path, folder_name FROM local_entries
|
||||
WHERE matched_id = ? AND matched_source = 'anilist' AND type = ?`,
|
||||
[anilistId, type],
|
||||
'local_library'
|
||||
);
|
||||
|
||||
if (existing) {
|
||||
return {
|
||||
id: existing.id,
|
||||
path: existing.path,
|
||||
folderName: existing.folder_name
|
||||
};
|
||||
}
|
||||
|
||||
const metadata: any = type === 'anime'
|
||||
? await getAnimeById(anilistId)
|
||||
: await getBookById(anilistId);
|
||||
|
||||
if (!metadata) {
|
||||
throw new Error('METADATA_NOT_FOUND');
|
||||
}
|
||||
|
||||
const { values } = loadConfig();
|
||||
const basePath = values.library?.[type];
|
||||
|
||||
if (!basePath) {
|
||||
throw new Error(`NO_LIBRARY_PATH_FOR_${type.toUpperCase()}`);
|
||||
}
|
||||
|
||||
const title = metadata.title?.romaji || metadata.title?.english || `ID_${anilistId}`;
|
||||
const safeName = title.replace(/[<>:"/\\|?*]/g, '_');
|
||||
const folderPath = path.join(basePath, safeName);
|
||||
|
||||
await ensureDirectory(folderPath);
|
||||
|
||||
const entryId = crypto
|
||||
.createHash('sha1')
|
||||
.update(`anilist:${type}:${anilistId}`)
|
||||
.digest('hex');
|
||||
const now = Date.now();
|
||||
|
||||
await run(
|
||||
`INSERT OR IGNORE INTO local_entries
|
||||
(id, type, path, folder_name, matched_id, matched_source, last_scan)
|
||||
VALUES (?, ?, ?, ?, ?, 'anilist', ?)`,
|
||||
[entryId, type, folderPath, safeName, anilistId, now],
|
||||
'local_library'
|
||||
);
|
||||
|
||||
return {
|
||||
id: entryId,
|
||||
path: folderPath,
|
||||
folderName: safeName
|
||||
};
|
||||
}
|
||||
|
||||
export async function downloadAnimeEpisode(params: AnimeDownloadParams) {
|
||||
const { anilistId, episodeNumber, streamUrl, subtitles, chapters, totalDuration } = params;
|
||||
|
||||
const entry: any = await getOrCreateEntry(anilistId, 'anime');
|
||||
const fileName = `Episode_${episodeNumber.toString().padStart(2, '0')}.mkv`;
|
||||
|
||||
const downloadId = crypto.randomUUID();
|
||||
activeDownloads.set(downloadId, {
|
||||
id: downloadId,
|
||||
type: 'anime',
|
||||
anilistId,
|
||||
unitNumber: episodeNumber,
|
||||
status: 'pending',
|
||||
progress: 0,
|
||||
startedAt: Date.now(),
|
||||
folderName: entry.folderName,
|
||||
fileName: fileName
|
||||
});
|
||||
|
||||
const exists = await queryOne(
|
||||
`SELECT id FROM local_files WHERE entry_id = ? AND unit_number = ?`,
|
||||
[entry.id, episodeNumber],
|
||||
'local_library'
|
||||
);
|
||||
|
||||
if (exists) {
|
||||
activeDownloads.delete(downloadId);
|
||||
return { status: 'ALREADY_EXISTS', entry_id: entry.id, episode: episodeNumber };
|
||||
}
|
||||
|
||||
const outputPath = path.join(entry.path, `Episode_${episodeNumber.toString().padStart(2, '0')}.mkv`);
|
||||
const tempDir = path.join(entry.path, '.temp');
|
||||
await ensureDirectory(tempDir);
|
||||
|
||||
try {
|
||||
updateDownloadProgress(downloadId, { status: 'downloading' });
|
||||
|
||||
let videoInput = streamUrl;
|
||||
let audioInputs: string[] = [];
|
||||
|
||||
const isMaster = (params as any).is_master === true;
|
||||
|
||||
if (isMaster) {
|
||||
const variant = (params as any).variant;
|
||||
const audios = (params as any).audio;
|
||||
|
||||
if (!variant || !variant.playlist_url) {
|
||||
throw new Error('VARIANT_REQUIRED_FOR_MASTER');
|
||||
}
|
||||
|
||||
videoInput = variant.playlist_url;
|
||||
|
||||
if (audios && audios.length > 0) {
|
||||
audioInputs = audios.map((a: any) => a.playlist_url);
|
||||
}
|
||||
}
|
||||
|
||||
const subFiles: string[] = [];
|
||||
if (subtitles?.length) {
|
||||
for (let i = 0; i < subtitles.length; i++) {
|
||||
const ext = subtitles[i].url.endsWith('.vtt') ? 'vtt' : 'srt';
|
||||
const p = path.join(tempDir, `sub_${i}.${ext}`);
|
||||
await downloadFile(subtitles[i].url, p);
|
||||
subFiles.push(p);
|
||||
}
|
||||
}
|
||||
|
||||
const args = [
|
||||
'-protocol_whitelist', 'file,http,https,tcp,tls,crypto',
|
||||
'-allowed_extensions', 'ALL',
|
||||
'-f', 'hls',
|
||||
'-extension_picky', '0',
|
||||
'-i', videoInput
|
||||
];
|
||||
|
||||
audioInputs.forEach(audioUrl => {
|
||||
args.push(
|
||||
'-protocol_whitelist', 'file,http,https,tcp,tls,crypto',
|
||||
'-allowed_extensions', 'ALL',
|
||||
'-f', 'hls',
|
||||
'-extension_picky', '0',
|
||||
'-i', audioUrl
|
||||
);
|
||||
});
|
||||
|
||||
subFiles.forEach(f => args.push('-i', f));
|
||||
|
||||
let chaptersInputIndex = -1;
|
||||
|
||||
if (chapters?.length) {
|
||||
const meta = path.join(tempDir, 'chapters.txt');
|
||||
const sorted = [...chapters].sort((a, b) => a.start_time - b.start_time);
|
||||
const lines: string[] = [';FFMETADATA1'];
|
||||
|
||||
for (let i = 0; i < sorted.length; i++) {
|
||||
const c = sorted[i];
|
||||
const start = Math.floor(c.start_time * 1000);
|
||||
const end = Math.floor(c.end_time * 1000);
|
||||
const title = (c.title || 'chapter').toUpperCase();
|
||||
|
||||
lines.push(
|
||||
'[CHAPTER]',
|
||||
'TIMEBASE=1/1000',
|
||||
`START=${start}`,
|
||||
`END=${end}`,
|
||||
`title=${title}`
|
||||
);
|
||||
|
||||
if (i < sorted.length - 1) {
|
||||
const nextStart = Math.floor(sorted[i + 1].start_time * 1000);
|
||||
if (nextStart - end > 1000) {
|
||||
lines.push(
|
||||
'[CHAPTER]',
|
||||
'TIMEBASE=1/1000',
|
||||
`START=${end}`,
|
||||
`END=${nextStart}`,
|
||||
'title=Episode'
|
||||
);
|
||||
}
|
||||
} else {
|
||||
lines.push(
|
||||
'[CHAPTER]',
|
||||
'TIMEBASE=1/1000',
|
||||
`START=${end}`,
|
||||
'title=Episode'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
fs.writeFileSync(meta, lines.join('\n'));
|
||||
args.push('-i', meta);
|
||||
chaptersInputIndex = 1 + audioInputs.length + subFiles.length;
|
||||
}
|
||||
|
||||
args.push('-map', '0:v:0');
|
||||
|
||||
if (audioInputs.length > 0) {
|
||||
audioInputs.forEach((_, i) => {
|
||||
args.push('-map', `${i + 1}:a:0`);
|
||||
const audioInfo = (params as any).audio?.[i];
|
||||
if (audioInfo) {
|
||||
const audioStreamIndex = i;
|
||||
if (audioInfo.language) {
|
||||
args.push(`-metadata:s:a:${audioStreamIndex}`, `language=${audioInfo.language}`);
|
||||
}
|
||||
if (audioInfo.name) {
|
||||
args.push(`-metadata:s:a:${audioStreamIndex}`, `title=${audioInfo.name}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
args.push('-map', '0:a:0?');
|
||||
}
|
||||
|
||||
const subtitleStartIndex = 1 + audioInputs.length;
|
||||
subFiles.forEach((_, i) => {
|
||||
args.push('-map', `${subtitleStartIndex + i}:0`);
|
||||
args.push(`-metadata:s:s:${i}`, `language=${subtitles![i].language}`);
|
||||
});
|
||||
|
||||
if (chaptersInputIndex >= 0) {
|
||||
args.push('-map_metadata', `${chaptersInputIndex}`);
|
||||
}
|
||||
|
||||
args.push('-c:v', 'copy', '-c:a', 'copy');
|
||||
if (subFiles.length) args.push('-c:s', 'srt');
|
||||
args.push('-y', outputPath);
|
||||
|
||||
await new Promise((resolve, reject) => {
|
||||
const ff = spawn(FFMPEG_PATH, args, {
|
||||
windowsHide: true,
|
||||
stdio: ['ignore', 'pipe', 'pipe']
|
||||
});
|
||||
|
||||
ff.stderr.on('data', (data) => {
|
||||
const text = data.toString();
|
||||
const timeMatch = text.match(/time=(\S+)/);
|
||||
const speedMatch = text.match(/speed=(\S+)/);
|
||||
|
||||
if (timeMatch || speedMatch) {
|
||||
const updates: any = {};
|
||||
|
||||
if (timeMatch) updates.timeElapsed = timeMatch[1];
|
||||
if (speedMatch) updates.speed = speedMatch[1];
|
||||
|
||||
if (timeMatch && totalDuration && totalDuration > 0) {
|
||||
const elapsedSeconds = parseFFmpegTime(timeMatch[1]);
|
||||
updates.progress = Math.min(
|
||||
99,
|
||||
Math.round((elapsedSeconds / totalDuration) * 100)
|
||||
);
|
||||
}
|
||||
updateDownloadProgress(downloadId, updates);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
ff.on('error', (error) => reject(error));
|
||||
ff.on('close', (code) => {
|
||||
if (code === 0) resolve(true);
|
||||
else reject(new Error(`FFmpeg exited with code ${code}`));
|
||||
});
|
||||
});
|
||||
|
||||
fs.rmSync(tempDir, { recursive: true, force: true });
|
||||
|
||||
const fileId = crypto.randomUUID();
|
||||
await run(
|
||||
`INSERT INTO local_files (id, entry_id, file_path, unit_number)
|
||||
VALUES (?, ?, ?, ?)`,
|
||||
[fileId, entry.id, outputPath, episodeNumber],
|
||||
'local_library'
|
||||
);
|
||||
|
||||
await run(
|
||||
`UPDATE local_entries SET last_scan = ? WHERE id = ?`,
|
||||
[Date.now(), entry.id],
|
||||
'local_library'
|
||||
);
|
||||
|
||||
updateDownloadProgress(downloadId, {
|
||||
status: 'completed',
|
||||
progress: 100,
|
||||
completedAt: Date.now()
|
||||
});
|
||||
|
||||
setTimeout(() => activeDownloads.delete(downloadId), 30000);
|
||||
|
||||
return {
|
||||
status: 'SUCCESS',
|
||||
download_id: downloadId,
|
||||
entry_id: entry.id,
|
||||
file_id: fileId,
|
||||
episode: episodeNumber,
|
||||
path: outputPath
|
||||
};
|
||||
|
||||
} catch (e: any) {
|
||||
fs.rmSync(tempDir, { recursive: true, force: true });
|
||||
if (fs.existsSync(outputPath)) fs.unlinkSync(outputPath);
|
||||
|
||||
updateDownloadProgress(downloadId, {
|
||||
status: 'failed',
|
||||
error: e.message
|
||||
});
|
||||
|
||||
setTimeout(() => activeDownloads.delete(downloadId), 60000);
|
||||
|
||||
const err = new Error('DOWNLOAD_FAILED');
|
||||
(err as any).details = e.message;
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
export async function downloadBookChapter(params: BookDownloadParams) {
|
||||
const { anilistId, chapterNumber, format, content, images } = params;
|
||||
|
||||
const type = format === 'manga' ? 'manga' : 'novels';
|
||||
const entry = await getOrCreateEntry(anilistId, type);
|
||||
|
||||
const ext = format === 'manga' ? 'cbz' : 'epub';
|
||||
const fileName = `Chapter_${chapterNumber.toString().padStart(3, '0')}.${ext}`;
|
||||
|
||||
const downloadId = crypto.randomUUID();
|
||||
|
||||
activeDownloads.set(downloadId, {
|
||||
id: downloadId,
|
||||
type: format === 'manga' ? 'manga' : 'novel',
|
||||
anilistId,
|
||||
unitNumber: chapterNumber,
|
||||
status: 'pending',
|
||||
progress: 0,
|
||||
startedAt: Date.now(),
|
||||
folderName: entry.folderName,
|
||||
fileName: fileName
|
||||
});
|
||||
|
||||
const existingFile = await queryOne(
|
||||
`SELECT id FROM local_files WHERE entry_id = ? AND unit_number = ?`,
|
||||
[entry.id, chapterNumber],
|
||||
'local_library'
|
||||
);
|
||||
|
||||
if (existingFile) {
|
||||
activeDownloads.delete(downloadId);
|
||||
return {
|
||||
status: 'ALREADY_EXISTS',
|
||||
message: `Chapter ${chapterNumber} already exists`,
|
||||
entry_id: entry.id,
|
||||
chapter: chapterNumber
|
||||
};
|
||||
}
|
||||
|
||||
try {
|
||||
updateDownloadProgress(downloadId, { status: 'downloading' });
|
||||
|
||||
let outputPath: string;
|
||||
let fileId: string;
|
||||
|
||||
if (format === 'manga') {
|
||||
const chapterName = `Chapter_${chapterNumber.toString().padStart(3, '0')}.cbz`;
|
||||
outputPath = path.join(entry.path, chapterName);
|
||||
|
||||
const zip = new AdmZip();
|
||||
const sortedImages = images!.sort((a, b) => a.index - b.index);
|
||||
|
||||
for (let i = 0; i < sortedImages.length; i++) {
|
||||
const img = sortedImages[i];
|
||||
const res = await fetch(img.url);
|
||||
if (!res.ok) throw new Error(`HTTP_${res.status}`);
|
||||
const buf = Buffer.from(await res.arrayBuffer());
|
||||
|
||||
const ext = path.extname(new URL(img.url).pathname) || '.jpg';
|
||||
const filename = `${img.index.toString().padStart(4, '0')}${ext}`;
|
||||
zip.addFile(filename, buf);
|
||||
|
||||
updateDownloadProgress(downloadId, {
|
||||
progress: Math.floor((i / sortedImages.length) * 100)
|
||||
});
|
||||
}
|
||||
|
||||
zip.writeZip(outputPath);
|
||||
|
||||
} else {
|
||||
const chapterName = `Chapter_${chapterNumber.toString().padStart(3, '0')}.epub`;
|
||||
outputPath = path.join(entry.path, chapterName);
|
||||
|
||||
const zip = new AdmZip();
|
||||
zip.addFile('mimetype', Buffer.from('application/epub+zip'), '', 0);
|
||||
|
||||
const containerXml = `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
|
||||
<rootfiles>
|
||||
<rootfile full-path="OEBPS/content.opf" media-type="application/oebps-package+xml"/>
|
||||
</rootfiles>
|
||||
</container>`;
|
||||
zip.addFile('META-INF/container.xml', Buffer.from(containerXml));
|
||||
|
||||
const contentOpf = `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<package xmlns="http://www.idpf.org/2007/opf" version="3.0" unique-identifier="bookid">
|
||||
<metadata xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||
<dc:title>Chapter ${chapterNumber}</dc:title>
|
||||
<dc:identifier id="bookid">chapter-${anilistId}-${chapterNumber}</dc:identifier>
|
||||
<dc:language>en</dc:language>
|
||||
</metadata>
|
||||
<manifest>
|
||||
<item id="chapter" href="chapter.xhtml" media-type="application/xhtml+xml"/>
|
||||
</manifest>
|
||||
<spine>
|
||||
<itemref idref="chapter"/>
|
||||
</spine>
|
||||
</package>`;
|
||||
zip.addFile('OEBPS/content.opf', Buffer.from(contentOpf));
|
||||
|
||||
const chapterXhtml = `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Chapter ${chapterNumber}</title>
|
||||
</head>
|
||||
<body>
|
||||
${content}
|
||||
</body>
|
||||
</html>`;
|
||||
zip.addFile('OEBPS/chapter.xhtml', Buffer.from(chapterXhtml));
|
||||
zip.writeZip(outputPath);
|
||||
}
|
||||
|
||||
fileId = crypto.randomUUID();
|
||||
await run(
|
||||
`INSERT INTO local_files (id, entry_id, file_path, unit_number)
|
||||
VALUES (?, ?, ?, ?)`,
|
||||
[fileId, entry.id, outputPath, chapterNumber],
|
||||
'local_library'
|
||||
);
|
||||
|
||||
await run(
|
||||
`UPDATE local_entries SET last_scan = ? WHERE id = ?`,
|
||||
[Date.now(), entry.id],
|
||||
'local_library'
|
||||
);
|
||||
|
||||
updateDownloadProgress(downloadId, {
|
||||
status: 'completed',
|
||||
progress: 100,
|
||||
completedAt: Date.now()
|
||||
});
|
||||
|
||||
setTimeout(() => activeDownloads.delete(downloadId), 30000);
|
||||
|
||||
return {
|
||||
status: 'SUCCESS',
|
||||
download_id: downloadId,
|
||||
entry_id: entry.id,
|
||||
file_id: fileId,
|
||||
chapter: chapterNumber,
|
||||
format,
|
||||
path: outputPath
|
||||
};
|
||||
|
||||
} catch (error: any) {
|
||||
updateDownloadProgress(downloadId, {
|
||||
status: 'failed',
|
||||
error: error.message
|
||||
});
|
||||
|
||||
setTimeout(() => activeDownloads.delete(downloadId), 60000);
|
||||
|
||||
const err = new Error('DOWNLOAD_FAILED');
|
||||
(err as any).details = error.message;
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
function parseFFmpegTime(timeStr: string): number {
|
||||
const parts = timeStr.split(':');
|
||||
if (parts.length < 3) return 0;
|
||||
|
||||
const h = parseFloat(parts[0]) || 0;
|
||||
const m = parseFloat(parts[1]) || 0;
|
||||
const s = parseFloat(parts[2]) || 0;
|
||||
|
||||
return (h * 3600) + (m * 60) + s;
|
||||
}
|
||||
@@ -1,485 +0,0 @@
|
||||
import {FastifyReply, FastifyRequest} from 'fastify';
|
||||
import fs from 'fs';
|
||||
import * as service from './local.service';
|
||||
import * as downloadService from './download.service';
|
||||
import * as streamingService from './streaming.service';
|
||||
|
||||
type ScanQuery = {
|
||||
mode?: 'full' | 'incremental';
|
||||
};
|
||||
|
||||
type Params = {
|
||||
type: 'anime' | 'manga' | 'novels';
|
||||
id?: string;
|
||||
};
|
||||
|
||||
type MatchBody = {
|
||||
source: 'anilist';
|
||||
matched_id: number | null;
|
||||
};
|
||||
|
||||
type DownloadAnimeBody =
|
||||
| {
|
||||
anilist_id: number;
|
||||
episode_number: number;
|
||||
stream_url: string;
|
||||
is_master?: false;
|
||||
subtitles?: {
|
||||
language: string;
|
||||
url: string;
|
||||
}[];
|
||||
duration?: number;
|
||||
chapters?: {
|
||||
title: string;
|
||||
start_time: number;
|
||||
end_time: number;
|
||||
}[];
|
||||
}
|
||||
| {
|
||||
anilist_id: number;
|
||||
episode_number: number;
|
||||
stream_url: string;
|
||||
duration?: number;
|
||||
is_master: true;
|
||||
variant: {
|
||||
resolution: string;
|
||||
bandwidth?: number;
|
||||
codecs?: string;
|
||||
playlist_url: string;
|
||||
};
|
||||
audio?: {
|
||||
group?: string;
|
||||
language?: string;
|
||||
name?: string;
|
||||
playlist_url: string;
|
||||
}[];
|
||||
subtitles?: {
|
||||
language: string;
|
||||
url: string;
|
||||
}[];
|
||||
chapters?: {
|
||||
title: string;
|
||||
start_time: number;
|
||||
end_time: number;
|
||||
}[];
|
||||
};
|
||||
|
||||
type DownloadBookBody = {
|
||||
anilist_id: number;
|
||||
chapter_number: number;
|
||||
format: 'manga' | 'novel';
|
||||
content?: string;
|
||||
images?: Array<{
|
||||
index: number;
|
||||
url: string;
|
||||
}>;
|
||||
};
|
||||
|
||||
export async function scanLibrary(request: FastifyRequest<{ Querystring: ScanQuery }>, reply: FastifyReply) {
|
||||
try {
|
||||
const mode = request.query.mode || 'incremental';
|
||||
return await service.performLibraryScan(mode);
|
||||
} catch (err: any) {
|
||||
if (err.message === 'NO_LIBRARY_CONFIGURED') {
|
||||
return reply.status(400).send({ error: 'NO_LIBRARY_CONFIGURED' });
|
||||
}
|
||||
return reply.status(500).send({ error: 'FAILED_TO_SCAN_LIBRARY' });
|
||||
}
|
||||
}
|
||||
|
||||
export async function listEntries(request: FastifyRequest<{ Params: Params }>, reply: FastifyReply) {
|
||||
try {
|
||||
const { type } = request.params;
|
||||
return await service.getEntriesByType(type);
|
||||
} catch {
|
||||
return reply.status(500).send({ error: 'FAILED_TO_LIST_ENTRIES' });
|
||||
}
|
||||
}
|
||||
|
||||
export async function getEntry(request: FastifyRequest<{ Params: Params }>, reply: FastifyReply) {
|
||||
try {
|
||||
const { type, id } = request.params as { type: string, id: string };
|
||||
const entry = await service.getEntryDetails(type, id);
|
||||
|
||||
if (!entry) {
|
||||
return reply.status(404).send({ error: 'ENTRY_NOT_FOUND' });
|
||||
}
|
||||
|
||||
return entry;
|
||||
} catch {
|
||||
return reply.status(500).send({ error: 'FAILED_TO_GET_ENTRY' });
|
||||
}
|
||||
}
|
||||
|
||||
export async function streamUnit(request: FastifyRequest, reply: FastifyReply) {
|
||||
const { id, unit } = request.params as any;
|
||||
|
||||
const fileInfo = await service.getFileForStreaming(id, unit);
|
||||
|
||||
if (!fileInfo) {
|
||||
return reply.status(404).send({ error: 'FILE_NOT_FOUND' });
|
||||
}
|
||||
|
||||
const { filePath, stat } = fileInfo;
|
||||
const range = request.headers.range;
|
||||
|
||||
if (!range) {
|
||||
reply
|
||||
.header('Content-Length', stat.size)
|
||||
.header('Content-Type', 'video/mp4');
|
||||
return fs.createReadStream(filePath);
|
||||
}
|
||||
|
||||
const parts = range.replace(/bytes=/, '').split('-');
|
||||
const start = Number(parts[0]);
|
||||
const end = parts[1] ? Number(parts[1]) : stat.size - 1;
|
||||
|
||||
if (
|
||||
Number.isNaN(start) ||
|
||||
Number.isNaN(end) ||
|
||||
start < 0 ||
|
||||
start >= stat.size ||
|
||||
end < start ||
|
||||
end >= stat.size
|
||||
) {
|
||||
return reply.status(416).send({ error: 'INVALID_RANGE' });
|
||||
}
|
||||
|
||||
const contentLength = end - start + 1;
|
||||
|
||||
reply
|
||||
.status(206)
|
||||
.header('Content-Range', `bytes ${start}-${end}/${stat.size}`)
|
||||
.header('Accept-Ranges', 'bytes')
|
||||
.header('Content-Length', contentLength)
|
||||
.header('Content-Type', 'video/mp4');
|
||||
|
||||
return fs.createReadStream(filePath, { start, end });
|
||||
}
|
||||
|
||||
export async function matchEntry(
|
||||
request: FastifyRequest<{ Body: MatchBody }>,
|
||||
reply: FastifyReply
|
||||
) {
|
||||
const { id, type } = request.params as any;
|
||||
const { source, matched_id } = request.body;
|
||||
|
||||
const result = await service.updateEntryMatch(id, type, source, matched_id);
|
||||
|
||||
if (!result) {
|
||||
return reply.status(404).send({ error: 'ENTRY_NOT_FOUND' });
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
export async function getUnits(request: FastifyRequest<{ Params: Params }>, reply: FastifyReply) {
|
||||
try {
|
||||
const { id } = request.params as { id: string };
|
||||
const units = await service.getEntryUnits(id);
|
||||
|
||||
if (!units) {
|
||||
return reply.status(404).send({ error: 'ENTRY_NOT_FOUND' });
|
||||
}
|
||||
|
||||
return units;
|
||||
} catch (err) {
|
||||
console.error('Error getting units:', err);
|
||||
return reply.status(500).send({ error: 'FAILED_TO_GET_UNITS' });
|
||||
}
|
||||
}
|
||||
|
||||
export async function getManifest(request: FastifyRequest, reply: FastifyReply) {
|
||||
const { unitId } = request.params as any;
|
||||
|
||||
try {
|
||||
const manifest = await service.getUnitManifest(unitId);
|
||||
|
||||
if (!manifest) {
|
||||
return reply.status(404).send({ error: 'FILE_NOT_FOUND' });
|
||||
}
|
||||
|
||||
return manifest;
|
||||
} catch (err: any) {
|
||||
if (err.message === 'UNSUPPORTED_FORMAT') {
|
||||
return reply.status(400).send({ error: 'UNSUPPORTED_FORMAT' });
|
||||
}
|
||||
return reply.status(500).send({ error: 'FAILED_TO_GET_MANIFEST' });
|
||||
}
|
||||
}
|
||||
|
||||
export async function getPage(request: FastifyRequest, reply: FastifyReply) {
|
||||
const { unitId, resId } = request.params as any;
|
||||
|
||||
const resource = await service.getUnitResource(unitId, resId);
|
||||
|
||||
if (!resource) {
|
||||
return reply.status(404).send();
|
||||
}
|
||||
|
||||
if (resource.type === 'image') {
|
||||
if (resource.data) {
|
||||
return reply
|
||||
.header('Content-Type', 'image/jpeg')
|
||||
.send(resource.data);
|
||||
}
|
||||
|
||||
if (resource.path && resource.size) {
|
||||
reply
|
||||
.header('Content-Length', resource.size)
|
||||
.header('Content-Type', 'image/jpeg');
|
||||
|
||||
return fs.createReadStream(resource.path);
|
||||
}
|
||||
}
|
||||
|
||||
if (resource.type === 'html') {
|
||||
return reply
|
||||
.header('Content-Type', 'text/html; charset=utf-8')
|
||||
.send(resource.data);
|
||||
}
|
||||
|
||||
return reply.status(400).send();
|
||||
}
|
||||
|
||||
function buildProxyUrl(rawUrl: string, headers: Record<string, string>) {
|
||||
const params = new URLSearchParams({ url: rawUrl });
|
||||
|
||||
for (const [key, value] of Object.entries(headers)) {
|
||||
params.set(key.toLowerCase(), value);
|
||||
}
|
||||
|
||||
return `http://localhost:54322/api/proxy?${params.toString()}`;
|
||||
}
|
||||
|
||||
export async function downloadAnime(request: FastifyRequest<{ Body: DownloadAnimeBody }>, reply: FastifyReply) {
|
||||
try {
|
||||
const {
|
||||
anilist_id,
|
||||
episode_number,
|
||||
stream_url,
|
||||
duration,
|
||||
is_master,
|
||||
subtitles,
|
||||
chapters
|
||||
} = request.body;
|
||||
|
||||
const clientHeaders = (request.body as any).headers || {};
|
||||
|
||||
if (!anilist_id || !episode_number || !stream_url) {
|
||||
return reply.status(400).send({
|
||||
error: 'MISSING_REQUIRED_FIELDS',
|
||||
required: ['anilist_id', 'episode_number', 'stream_url']
|
||||
});
|
||||
}
|
||||
|
||||
const proxyUrl = buildProxyUrl(stream_url, clientHeaders);
|
||||
console.log('Stream URL:', proxyUrl);
|
||||
|
||||
const proxiedSubs = subtitles?.map(sub => ({
|
||||
...sub,
|
||||
url: buildProxyUrl(sub.url, clientHeaders)
|
||||
}));
|
||||
|
||||
const downloadParams: any = {
|
||||
anilistId: anilist_id,
|
||||
episodeNumber: episode_number,
|
||||
streamUrl: proxyUrl,
|
||||
subtitles: proxiedSubs,
|
||||
chapters,
|
||||
totalDuration: duration
|
||||
};
|
||||
|
||||
if (is_master === true) {
|
||||
const { variant, audio } = request.body as any;
|
||||
|
||||
if (!variant || !variant.playlist_url) {
|
||||
return reply.status(400).send({
|
||||
error: 'MISSING_VARIANT',
|
||||
message: 'variant with playlist_url is required when is_master is true'
|
||||
});
|
||||
}
|
||||
|
||||
downloadParams.is_master = true;
|
||||
downloadParams.variant = {
|
||||
...variant,
|
||||
playlist_url: buildProxyUrl(variant.playlist_url, clientHeaders)
|
||||
};
|
||||
|
||||
if (audio && audio.length > 0) {
|
||||
downloadParams.audio = audio.map((a: any) => ({
|
||||
...a,
|
||||
playlist_url: buildProxyUrl(a.playlist_url, clientHeaders)
|
||||
}));
|
||||
}
|
||||
|
||||
console.log('Master playlist detected');
|
||||
console.log('Variant:', downloadParams.variant.resolution);
|
||||
console.log('Audio tracks:', downloadParams.audio?.length || 0);
|
||||
}
|
||||
|
||||
const result = await downloadService.downloadAnimeEpisode(downloadParams);
|
||||
|
||||
if (result.status === 'ALREADY_EXISTS') {
|
||||
return reply.status(409).send(result);
|
||||
}
|
||||
|
||||
return result;
|
||||
} catch (err: any) {
|
||||
console.error('Error downloading anime:', err);
|
||||
|
||||
if (err.message === 'METADATA_NOT_FOUND') {
|
||||
return reply.status(404).send({ error: 'ANIME_NOT_FOUND_IN_ANILIST' });
|
||||
}
|
||||
|
||||
if (err.message === 'VARIANT_REQUIRED_FOR_MASTER') {
|
||||
return reply.status(400).send({ error: 'VARIANT_REQUIRED_FOR_MASTER' });
|
||||
}
|
||||
|
||||
if (err.message === 'DOWNLOAD_FAILED') {
|
||||
return reply.status(500).send({ error: 'DOWNLOAD_FAILED', details: err.details });
|
||||
}
|
||||
|
||||
return reply.status(500).send({ error: 'FAILED_TO_DOWNLOAD_ANIME' });
|
||||
}
|
||||
}
|
||||
|
||||
export async function downloadBook(request: FastifyRequest<{ Body: DownloadBookBody }>, reply: FastifyReply) {
|
||||
try {
|
||||
const {
|
||||
anilist_id,
|
||||
chapter_number,
|
||||
format,
|
||||
content,
|
||||
images
|
||||
} = request.body;
|
||||
|
||||
if (!anilist_id || !chapter_number || !format) {
|
||||
return reply.status(400).send({
|
||||
error: 'MISSING_REQUIRED_FIELDS',
|
||||
required: ['anilist_id', 'chapter_number', 'format']
|
||||
});
|
||||
}
|
||||
|
||||
if (format === 'novel' && !content) {
|
||||
return reply.status(400).send({
|
||||
error: 'MISSING_CONTENT',
|
||||
message: 'content field is required for novels'
|
||||
});
|
||||
}
|
||||
|
||||
if (format === 'manga' && (!images || images.length === 0)) {
|
||||
return reply.status(400).send({
|
||||
error: 'MISSING_IMAGES',
|
||||
message: 'images field is required for manga'
|
||||
});
|
||||
}
|
||||
|
||||
const result = await downloadService.downloadBookChapter({
|
||||
anilistId: anilist_id,
|
||||
chapterNumber: chapter_number,
|
||||
format,
|
||||
content,
|
||||
images
|
||||
});
|
||||
|
||||
if (result.status === 'ALREADY_EXISTS') {
|
||||
return reply.status(409).send(result);
|
||||
}
|
||||
|
||||
return result;
|
||||
} catch (err: any) {
|
||||
console.error('Error downloading book:', err);
|
||||
|
||||
if (err.message === 'METADATA_NOT_FOUND') {
|
||||
return reply.status(404).send({ error: 'BOOK_NOT_FOUND_IN_ANILIST' });
|
||||
}
|
||||
|
||||
if (err.message === 'DOWNLOAD_FAILED') {
|
||||
return reply.status(500).send({ error: 'DOWNLOAD_FAILED', details: err.details });
|
||||
}
|
||||
|
||||
return reply.status(500).send({ error: 'FAILED_TO_DOWNLOAD_BOOK' });
|
||||
}
|
||||
}
|
||||
|
||||
export async function getDownloadStatus(request: FastifyRequest, reply: FastifyReply) {
|
||||
try {
|
||||
const downloads = downloadService.getActiveDownloads();
|
||||
const streams = streamingService.getActiveStreamsStatus();
|
||||
|
||||
return {
|
||||
downloads: {
|
||||
total: downloads.length,
|
||||
active: downloads.filter(d => d.status === 'downloading').length,
|
||||
completed: downloads.filter(d => d.status === 'completed').length,
|
||||
failed: downloads.filter(d => d.status === 'failed').length,
|
||||
list: downloads
|
||||
},
|
||||
streams: {
|
||||
total: streams.length,
|
||||
active: streams.filter(s => !s.isComplete).length,
|
||||
completed: streams.filter(s => s.isComplete).length,
|
||||
list: streams
|
||||
}
|
||||
};
|
||||
} catch (err) {
|
||||
console.error('Error getting download status:', err);
|
||||
return reply.status(500).send({ error: 'FAILED_TO_GET_DOWNLOAD_STATUS' });
|
||||
}
|
||||
}
|
||||
|
||||
export async function getAnimeStreamManifest(request: FastifyRequest, reply: FastifyReply) {
|
||||
try {
|
||||
const { type, id, unit } = request.params as any;
|
||||
|
||||
if (type !== 'anime') {
|
||||
return reply.status(400).send({ error: 'ONLY_ANIME_SUPPORTED' });
|
||||
}
|
||||
|
||||
const fileInfo = await service.getFileForStreaming(id, unit);
|
||||
|
||||
if (!fileInfo) {
|
||||
return reply.status(404).send({ error: 'FILE_NOT_FOUND' });
|
||||
}
|
||||
|
||||
const manifest = await streamingService.getStreamingManifest(fileInfo.filePath);
|
||||
|
||||
if (!manifest) {
|
||||
return reply.status(500).send({ error: 'FAILED_TO_GENERATE_MANIFEST' });
|
||||
}
|
||||
|
||||
return manifest;
|
||||
} catch (err: any) {
|
||||
console.error('Error getting stream manifest:', err);
|
||||
return reply.status(500).send({ error: 'FAILED_TO_GET_STREAM_MANIFEST' });
|
||||
}
|
||||
}
|
||||
|
||||
export async function serveHLSFile(request: FastifyRequest, reply: FastifyReply) {
|
||||
try {
|
||||
const { hash, filename } = request.params as any;
|
||||
|
||||
const file = await streamingService.getHLSFile(hash, filename);
|
||||
|
||||
if (!file) {
|
||||
return reply.status(404).send({ error: 'FILE_NOT_FOUND' });
|
||||
}
|
||||
|
||||
const contentType = filename.endsWith('.m3u8')
|
||||
? 'application/vnd.apple.mpegurl'
|
||||
: filename.endsWith('.vtt')
|
||||
? 'text/vtt'
|
||||
: 'video/mp2t';
|
||||
|
||||
reply
|
||||
.header('Content-Type', contentType)
|
||||
.header('Content-Length', file.stat.size)
|
||||
.header('Access-Control-Allow-Origin', '*');
|
||||
|
||||
return fs.createReadStream(file.path);
|
||||
} catch (err) {
|
||||
console.error('Error serving HLS file:', err);
|
||||
return reply.status(500).send({ error: 'FAILED_TO_SERVE_HLS_FILE' });
|
||||
}
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
import { FastifyInstance } from 'fastify';
|
||||
import * as controller from './local.controller';
|
||||
|
||||
async function localRoutes(fastify: FastifyInstance) {
|
||||
fastify.post('/library/scan', controller.scanLibrary);
|
||||
fastify.get('/library/:type', controller.listEntries);
|
||||
fastify.get('/library/:type/:id', controller.getEntry);
|
||||
|
||||
// Streaming básico (legacy)
|
||||
fastify.get('/library/stream/:type/:id/:unit', controller.streamUnit);
|
||||
fastify.post('/library/:type/:id/match', controller.matchEntry);
|
||||
fastify.get('/library/:id/units', controller.getUnits);
|
||||
fastify.get('/library/:unitId/manifest', controller.getManifest);
|
||||
fastify.get('/library/:unitId/resource/:resId', controller.getPage);
|
||||
fastify.post('/library/download/anime', controller.downloadAnime);
|
||||
fastify.post('/library/download/book', controller.downloadBook);
|
||||
fastify.get('/library/downloads/status', controller.getDownloadStatus);
|
||||
fastify.get('/library/stream/:type/:id/:unit/manifest', controller.getAnimeStreamManifest);
|
||||
fastify.get('/library/hls/:hash/:filename', controller.serveHLSFile);
|
||||
}
|
||||
|
||||
export default localRoutes;
|
||||
@@ -1,513 +0,0 @@
|
||||
import { getConfig as loadConfig } from '../../shared/config.js';
|
||||
import { queryOne, queryAll, run } from '../../shared/database.js';
|
||||
import crypto from 'crypto';
|
||||
import fs from "fs";
|
||||
import { PathLike } from "node:fs";
|
||||
import path from "path";
|
||||
import { getAnimeById, searchAnimeLocal } from "../anime/anime.service";
|
||||
import { getBookById, searchBooksAniList } from "../books/books.service";
|
||||
import AdmZip from 'adm-zip';
|
||||
import { getStreamHash, getSubtitleFileStream } from './streaming.service';
|
||||
|
||||
const MANGA_IMAGE_EXTS = ['.jpg', '.jpeg', '.png', '.webp'];
|
||||
const MANGA_ARCHIVES = ['.cbz', '.cbr', '.zip'];
|
||||
const NOVEL_EXTS = ['.epub', '.pdf', '.txt', '.md', '.docx', '.mobi'];
|
||||
|
||||
function normalize(str: string) {
|
||||
return str
|
||||
.toLowerCase()
|
||||
.normalize('NFD')
|
||||
.replace(/[\u0300-\u036f]/g, '')
|
||||
.replace(/[^a-z0-9 ]/g, '')
|
||||
.trim();
|
||||
}
|
||||
|
||||
function levenshtein(a: string, b: string) {
|
||||
const matrix = Array.from({ length: b.length + 1 }, (_, i) => [i]);
|
||||
|
||||
for (let j = 0; j <= a.length; j++) matrix[0][j] = j;
|
||||
|
||||
for (let i = 1; i <= b.length; i++) {
|
||||
for (let j = 1; j <= a.length; j++) {
|
||||
matrix[i][j] = Math.min(
|
||||
matrix[i - 1][j] + 1,
|
||||
matrix[i][j - 1] + 1,
|
||||
matrix[i - 1][j - 1] + (b[i - 1] === a[j - 1] ? 0 : 1)
|
||||
);
|
||||
}
|
||||
}
|
||||
return matrix[b.length][a.length];
|
||||
}
|
||||
|
||||
function getTitleVariants(media: any): string[] {
|
||||
const t = media.title || {};
|
||||
return [
|
||||
t.romaji,
|
||||
t.english,
|
||||
t.native,
|
||||
...(media.synonyms || [])
|
||||
].filter(Boolean);
|
||||
}
|
||||
|
||||
function scoreEntry(query: string, media: any) {
|
||||
const q = normalize(query);
|
||||
let best = Infinity;
|
||||
|
||||
for (const title of getTitleVariants(media)) {
|
||||
const t = normalize(title);
|
||||
|
||||
if (t.includes(q) || q.includes(t)) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
best = Math.min(best, levenshtein(q, t));
|
||||
}
|
||||
|
||||
return best;
|
||||
}
|
||||
|
||||
export async function resolveEntryMetadata(entry: any, type: string) {
|
||||
let metadata = null;
|
||||
let matchedId = entry.matched_id;
|
||||
|
||||
if (!matchedId) {
|
||||
const query = entry.folder_name;
|
||||
|
||||
const results = type === 'anime'
|
||||
? await searchAnimeLocal(query)
|
||||
: await searchBooksAniList(query);
|
||||
|
||||
let picked = null;
|
||||
|
||||
let candidates = results;
|
||||
|
||||
if (type !== 'anime' && Array.isArray(results)) {
|
||||
if (entry.type === 'novels') {
|
||||
candidates = results.filter(r => r.format === 'NOVEL');
|
||||
} else if (entry.type === 'manga') {
|
||||
candidates = results.filter(r => r.format !== 'NOVEL');
|
||||
}
|
||||
}
|
||||
|
||||
if (Array.isArray(candidates) && candidates.length) {
|
||||
const scored = candidates
|
||||
.map(r => ({ r, score: scoreEntry(entry.folder_name, r) }))
|
||||
.sort((a, b) => a.score - b.score);
|
||||
|
||||
// cutoff opcional
|
||||
if (scored[0].score <= 10) {
|
||||
picked = scored[0].r;
|
||||
}
|
||||
}
|
||||
|
||||
if (picked?.id) {
|
||||
matchedId = picked.id;
|
||||
|
||||
await run(
|
||||
`UPDATE local_entries
|
||||
SET matched_id = ?, matched_source = 'anilist'
|
||||
WHERE id = ?`,
|
||||
[matchedId, entry.id],
|
||||
'local_library'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (matchedId) {
|
||||
metadata = type === 'anime'
|
||||
? await getAnimeById(matchedId)
|
||||
: await getBookById(matchedId);
|
||||
}
|
||||
|
||||
return {
|
||||
id: entry.id,
|
||||
type: entry.type,
|
||||
matched: !!matchedId,
|
||||
metadata
|
||||
};
|
||||
}
|
||||
|
||||
export async function performLibraryScan(mode: 'full' | 'incremental' = 'incremental') {
|
||||
const { values } = loadConfig();
|
||||
|
||||
if (!values.library) {
|
||||
throw new Error('NO_LIBRARY_CONFIGURED');
|
||||
}
|
||||
|
||||
if (mode === 'full') {
|
||||
await run(`DELETE FROM local_files`, [], 'local_library');
|
||||
await run(`DELETE FROM local_entries`, [], 'local_library');
|
||||
}
|
||||
|
||||
for (const [type, basePath] of Object.entries(values.library)) {
|
||||
if (!basePath || !fs.existsSync(<PathLike>basePath)) continue;
|
||||
|
||||
const dirs = fs.readdirSync(<string>basePath, { withFileTypes: true }).filter(d => d.isDirectory());
|
||||
|
||||
for (const dir of dirs) {
|
||||
const fullPath = path.join(<string>basePath, dir.name);
|
||||
const id = crypto.createHash('sha1').update(fullPath).digest('hex');
|
||||
const now = Date.now();
|
||||
|
||||
const existing = await queryOne(`SELECT id FROM local_entries WHERE id = ?`, [id], 'local_library');
|
||||
|
||||
if (existing) {
|
||||
await run(`UPDATE local_entries SET last_scan = ? WHERE id = ?`, [now, id], 'local_library');
|
||||
await run(`DELETE FROM local_files WHERE entry_id = ?`, [id], 'local_library');
|
||||
} else {
|
||||
await run(
|
||||
`INSERT INTO local_entries (id, type, path, folder_name, last_scan) VALUES (?, ?, ?, ?, ?)`,
|
||||
[id, type, fullPath, dir.name, now],
|
||||
'local_library'
|
||||
);
|
||||
}
|
||||
|
||||
const files = fs.readdirSync(fullPath, { withFileTypes: true })
|
||||
.filter(f =>
|
||||
f.isFile() ||
|
||||
(type === 'manga' && f.isDirectory())
|
||||
)
|
||||
.sort((a, b) => a.name.localeCompare(b.name));
|
||||
|
||||
let unit = 1;
|
||||
|
||||
for (const file of files) {
|
||||
await run(
|
||||
`INSERT INTO local_files (id, entry_id, file_path, unit_number)
|
||||
VALUES (?, ?, ?, ?)`,
|
||||
[crypto.randomUUID(), id, path.join(fullPath, file.name), unit],
|
||||
'local_library'
|
||||
);
|
||||
unit++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return { status: 'OK' };
|
||||
}
|
||||
|
||||
export async function getEntriesByType(type: string) {
|
||||
const sql = `
|
||||
SELECT local_entries.*, COUNT(local_files.id) as file_count
|
||||
FROM local_entries
|
||||
LEFT JOIN local_files ON local_entries.id = local_files.entry_id
|
||||
WHERE local_entries.type = ?
|
||||
GROUP BY local_entries.id
|
||||
`;
|
||||
const entries = await queryAll(sql, [type], 'local_library');
|
||||
return await Promise.all(entries.map(async (entry: any) => {
|
||||
const metadata = await resolveEntryMetadata(entry, type);
|
||||
return {
|
||||
...metadata,
|
||||
path: entry.path,
|
||||
files: entry.file_count
|
||||
};
|
||||
}));
|
||||
}
|
||||
|
||||
export async function getEntryDetails(type: string, id: string) {
|
||||
const entry = await queryOne(
|
||||
`SELECT * FROM local_entries WHERE matched_id = ? AND type = ?`,
|
||||
[Number(id), type],
|
||||
'local_library'
|
||||
);
|
||||
|
||||
if (!entry) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const [details, files] = await Promise.all([
|
||||
resolveEntryMetadata(entry, type),
|
||||
queryAll(
|
||||
`SELECT id, file_path, unit_number FROM local_files WHERE entry_id = ? ORDER BY unit_number ASC`,
|
||||
[id],
|
||||
'local_library'
|
||||
)
|
||||
]);
|
||||
|
||||
return { ...details, files };
|
||||
}
|
||||
|
||||
export async function getFileForStreaming(id: string, unit: string) {
|
||||
const file = await queryOne(
|
||||
`SELECT file_path FROM local_files WHERE entry_id = ? AND unit_number = ?`,
|
||||
[id, unit],
|
||||
'local_library'
|
||||
);
|
||||
|
||||
if (!file || !fs.existsSync(file.file_path)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
filePath: file.file_path,
|
||||
stat: fs.statSync(file.file_path)
|
||||
};
|
||||
}
|
||||
|
||||
export async function updateEntryMatch(id: string, type: string, source: string, matchedId: number | null) {
|
||||
const entry = await queryOne(
|
||||
`SELECT id FROM local_entries WHERE id = ? AND type = ?`,
|
||||
[id, type],
|
||||
'local_library'
|
||||
);
|
||||
|
||||
if (!entry) {
|
||||
return null;
|
||||
}
|
||||
|
||||
await run(
|
||||
`UPDATE local_entries
|
||||
SET matched_source = ?, matched_id = ?
|
||||
WHERE id = ?`,
|
||||
[source, matchedId, id],
|
||||
'local_library'
|
||||
);
|
||||
|
||||
return { status: 'OK', matched: !!matchedId };
|
||||
}
|
||||
|
||||
function isImageFolder(folderPath: string): boolean {
|
||||
if (!fs.existsSync(folderPath)) return false;
|
||||
if (!fs.statSync(folderPath).isDirectory()) return false;
|
||||
|
||||
const files = fs.readdirSync(folderPath);
|
||||
return files.some(f => MANGA_IMAGE_EXTS.includes(path.extname(f).toLowerCase()));
|
||||
}
|
||||
|
||||
export async function getEntryUnits(id: string) {
|
||||
const entry = await queryOne(
|
||||
`SELECT id, type, matched_id FROM local_entries WHERE matched_id = ?`,
|
||||
[Number(id)],
|
||||
'local_library'
|
||||
);
|
||||
|
||||
if (!entry) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const files = await queryAll(
|
||||
`SELECT id, file_path, unit_number FROM local_files
|
||||
WHERE entry_id = ?
|
||||
ORDER BY unit_number ASC`,
|
||||
[entry.id],
|
||||
'local_library'
|
||||
);
|
||||
|
||||
const units = files
|
||||
.map((file: any) => {
|
||||
const fileExt = path.extname(file.file_path).toLowerCase();
|
||||
const isDir = fs.existsSync(file.file_path) &&
|
||||
fs.statSync(file.file_path).isDirectory();
|
||||
|
||||
if (entry.type === 'manga') {
|
||||
if (MANGA_ARCHIVES.includes(fileExt)) {
|
||||
return {
|
||||
id: file.id,
|
||||
number: file.unit_number,
|
||||
name: path.basename(file.file_path),
|
||||
type: 'chapter',
|
||||
format: fileExt.replace('.', ''),
|
||||
path: file.file_path
|
||||
};
|
||||
}
|
||||
|
||||
if (isDir && isImageFolder(file.file_path)) {
|
||||
return {
|
||||
id: file.id,
|
||||
number: file.unit_number,
|
||||
name: path.basename(file.file_path),
|
||||
type: 'chapter',
|
||||
format: 'folder',
|
||||
path: file.file_path
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
if (entry.type === 'novels') {
|
||||
if (NOVEL_EXTS.includes(fileExt)) {
|
||||
return {
|
||||
id: file.id,
|
||||
number: file.unit_number,
|
||||
name: path.basename(file.file_path),
|
||||
type: 'chapter',
|
||||
format: fileExt.replace('.', ''),
|
||||
path: file.file_path
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
if (entry.type === 'anime') {
|
||||
return {
|
||||
id: file.id,
|
||||
number: file.unit_number,
|
||||
name: path.basename(file.file_path),
|
||||
type: 'episode',
|
||||
format: fileExt.replace('.', ''),
|
||||
path: file.file_path
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
})
|
||||
.filter(Boolean);
|
||||
|
||||
return {
|
||||
entry_id: entry.id,
|
||||
matched_id: entry.matched_id,
|
||||
type: entry.type,
|
||||
total: units.length,
|
||||
units
|
||||
};
|
||||
}
|
||||
|
||||
export async function getUnitManifest(unitId: string) {
|
||||
const file = await queryOne(
|
||||
`SELECT file_path FROM local_files WHERE id = ?`,
|
||||
[unitId],
|
||||
'local_library'
|
||||
);
|
||||
|
||||
if (!file || !fs.existsSync(file.file_path)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const ext = path.extname(file.file_path).toLowerCase();
|
||||
|
||||
if (['.cbz', '.cbr', '.zip'].includes(ext)) {
|
||||
const zip = new AdmZip(file.file_path);
|
||||
|
||||
const pages = zip.getEntries()
|
||||
.filter(e => !e.isDirectory && /\.(jpg|jpeg|png|webp)$/i.test(e.entryName))
|
||||
.sort((a, b) => a.entryName.localeCompare(b.entryName, undefined, { numeric: true }))
|
||||
.map((_, i) => ({
|
||||
id: i,
|
||||
url: `/api/library/${unitId}/resource/${i}`
|
||||
}));
|
||||
|
||||
return {
|
||||
type: 'manga',
|
||||
format: 'archive',
|
||||
pages
|
||||
};
|
||||
}
|
||||
|
||||
if (fs.statSync(file.file_path).isDirectory()) {
|
||||
const pages = fs.readdirSync(file.file_path)
|
||||
.filter(f => /\.(jpg|jpeg|png|webp)$/i.test(f))
|
||||
.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }))
|
||||
.map((_, i) => ({
|
||||
id: i,
|
||||
url: `/api/library/${unitId}/resource/${i}`
|
||||
}));
|
||||
|
||||
return {
|
||||
type: 'manga',
|
||||
format: 'folder',
|
||||
pages
|
||||
};
|
||||
}
|
||||
|
||||
if (ext === '.epub') {
|
||||
return {
|
||||
type: 'ln',
|
||||
format: 'epub',
|
||||
url: `/api/library/${unitId}/resource/epub`
|
||||
};
|
||||
}
|
||||
|
||||
if (['.txt', '.md'].includes(ext)) {
|
||||
return {
|
||||
type: 'ln',
|
||||
format: 'text',
|
||||
url: `/api/library/${unitId}/resource/text`
|
||||
};
|
||||
}
|
||||
|
||||
if (ext === '.pdf') {
|
||||
return {
|
||||
type: 'ln',
|
||||
format: 'pdf',
|
||||
url: `/api/library/${unitId}/resource/pdf`
|
||||
};
|
||||
}
|
||||
|
||||
throw new Error('UNSUPPORTED_FORMAT');
|
||||
}
|
||||
|
||||
export async function getUnitResource(unitId: string, resId: string) {
|
||||
const file = await queryOne(
|
||||
`SELECT file_path FROM local_files WHERE id = ?`,
|
||||
[unitId],
|
||||
'local_library'
|
||||
);
|
||||
|
||||
if (!file) return null;
|
||||
|
||||
const ext = path.extname(file.file_path).toLowerCase();
|
||||
|
||||
if (['.cbz', '.zip', '.cbr'].includes(ext)) {
|
||||
const zip = new AdmZip(file.file_path);
|
||||
const images = zip.getEntries()
|
||||
.filter(e => !e.isDirectory && /\.(jpg|jpeg|png|webp)$/i.test(e.entryName))
|
||||
.sort((a, b) => a.entryName.localeCompare(b.entryName, undefined, { numeric: true }));
|
||||
|
||||
const entry = images[Number(resId)];
|
||||
if (!entry) return null;
|
||||
|
||||
return {
|
||||
type: 'image',
|
||||
data: entry.getData()
|
||||
};
|
||||
}
|
||||
|
||||
if (fs.statSync(file.file_path).isDirectory()) {
|
||||
const images = fs.readdirSync(file.file_path)
|
||||
.filter(f => /\.(jpg|jpeg|png|webp)$/i.test(f))
|
||||
.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
|
||||
|
||||
const img = images[Number(resId)];
|
||||
if (!img) return null;
|
||||
|
||||
const imgPath = path.join(file.file_path, img);
|
||||
const stat = fs.statSync(imgPath);
|
||||
|
||||
return {
|
||||
type: 'image',
|
||||
path: imgPath,
|
||||
size: stat.size
|
||||
};
|
||||
}
|
||||
|
||||
if (ext === '.epub') {
|
||||
const html = await parseEpubToHtml(file.file_path);
|
||||
|
||||
return {
|
||||
type: 'html',
|
||||
data: html
|
||||
};
|
||||
}
|
||||
|
||||
if (['.txt', '.md'].includes(ext)) {
|
||||
const text = fs.readFileSync(file.file_path, 'utf8');
|
||||
|
||||
return {
|
||||
type: 'html',
|
||||
data: `<div class="ln-content"><pre>${text}</pre></div>`
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
function parseEpubToHtml(filePath: string) {
|
||||
const zip = new AdmZip(filePath);
|
||||
const entry = zip.getEntry('OEBPS/chapter.xhtml');
|
||||
if (!entry) throw new Error('CHAPTER_NOT_FOUND');
|
||||
return entry.getData().toString('utf8');
|
||||
}
|
||||
@@ -1,622 +0,0 @@
|
||||
import { getConfig as loadConfig } from '../../shared/config';
|
||||
import { queryOne } from '../../shared/database';
|
||||
import crypto from 'crypto';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { spawn } from 'child_process';
|
||||
|
||||
const { values } = loadConfig();
|
||||
const FFMPEG_PATH = values.paths?.ffmpeg || 'ffmpeg';
|
||||
const FFPROBE_PATH = values.paths?.ffprobe || 'ffprobe';
|
||||
|
||||
const STREAM_TTL = 2 * 60 * 60 * 1000;
|
||||
|
||||
type VideoStreamInfo = {
|
||||
index: number;
|
||||
codec: string;
|
||||
width: number;
|
||||
height: number;
|
||||
fps: number;
|
||||
};
|
||||
|
||||
type AudioStreamInfo = {
|
||||
index: number;
|
||||
codec: string;
|
||||
language?: string;
|
||||
title?: string;
|
||||
channels: number;
|
||||
sampleRate: number;
|
||||
};
|
||||
|
||||
type SubtitleStreamInfo = {
|
||||
index: number;
|
||||
codec: string;
|
||||
language?: string;
|
||||
title?: string;
|
||||
duration: number;
|
||||
};
|
||||
|
||||
type ChapterInfo = {
|
||||
id: number;
|
||||
start: number;
|
||||
end: number;
|
||||
title: string;
|
||||
};
|
||||
|
||||
type MediaInfo = {
|
||||
video: VideoStreamInfo[];
|
||||
audio: AudioStreamInfo[];
|
||||
subtitles: SubtitleStreamInfo[];
|
||||
chapters: ChapterInfo[];
|
||||
duration: number;
|
||||
};
|
||||
|
||||
type ActiveStream = {
|
||||
hash: string;
|
||||
filePath: string;
|
||||
hlsDir: string;
|
||||
info: MediaInfo;
|
||||
process?: any;
|
||||
startedAt: number;
|
||||
lastAccessed: number;
|
||||
isComplete: boolean;
|
||||
};
|
||||
|
||||
const activeStreams = new Map<string, ActiveStream>();
|
||||
|
||||
setInterval(() => {
|
||||
const now = Date.now();
|
||||
|
||||
for (const [hash, stream] of activeStreams.entries()) {
|
||||
const age = now - stream.lastAccessed;
|
||||
|
||||
if (age > STREAM_TTL) {
|
||||
console.log(`🗑️ Limpiando stream antiguo: ${hash}`);
|
||||
|
||||
if (stream.process && !stream.process.killed) {
|
||||
stream.process.kill('SIGKILL');
|
||||
}
|
||||
|
||||
if (fs.existsSync(stream.hlsDir)) {
|
||||
fs.rmSync(stream.hlsDir, { recursive: true, force: true });
|
||||
}
|
||||
|
||||
activeStreams.delete(hash);
|
||||
}
|
||||
}
|
||||
}, 60 * 1000);
|
||||
|
||||
export function getStreamHash(filePath: string): string {
|
||||
const stat = fs.statSync(filePath);
|
||||
return crypto
|
||||
.createHash('md5')
|
||||
.update(`${filePath}-${stat.mtime.getTime()}`)
|
||||
.digest('hex');
|
||||
}
|
||||
|
||||
function ensureHLSDirectory(hash: string): string {
|
||||
const tempDir = path.join(require('os').tmpdir(), 'hls-streams', hash);
|
||||
|
||||
if (!fs.existsSync(tempDir)) {
|
||||
fs.mkdirSync(tempDir, { recursive: true });
|
||||
}
|
||||
|
||||
return tempDir;
|
||||
}
|
||||
|
||||
function buildStreamMap(info: MediaInfo): string {
|
||||
const maps: string[] = [];
|
||||
|
||||
maps.push(`v:0,a:0`);
|
||||
|
||||
return maps.join(' ');
|
||||
}
|
||||
|
||||
function writeMasterPlaylist(info: MediaInfo, hlsDir: string) {
|
||||
const lines: string[] = ['#EXTM3U'];
|
||||
|
||||
info.audio.forEach((a, i) => {
|
||||
lines.push(
|
||||
`#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",NAME="${a.title || `Audio ${i+1}`}",LANGUAGE="${a.language || 'und'}",AUTOSELECT=YES,DEFAULT=${i===0?'YES':'NO'},URI="audio_${i}.m3u8"`
|
||||
);
|
||||
});
|
||||
|
||||
info.subtitles.forEach((s, i) => {
|
||||
lines.push(
|
||||
`#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="${s.title || `Sub ${i+1}`}",LANGUAGE="${s.language || 'und'}",AUTOSELECT=YES,DEFAULT=NO,URI="subs_${i}.m3u8"`
|
||||
);
|
||||
});
|
||||
|
||||
const v = info.video[0];
|
||||
const bandwidth = v.width * v.height * v.fps * 0.07 | 0;
|
||||
|
||||
lines.push(
|
||||
`#EXT-X-STREAM-INF:BANDWIDTH=${bandwidth},RESOLUTION=${v.width}x${v.height},AUDIO="audio"${info.subtitles.length ? ',SUBTITLES="subs"' : ''}`
|
||||
);
|
||||
lines.push('video.m3u8');
|
||||
|
||||
fs.writeFileSync(path.join(hlsDir, 'master.m3u8'), lines.join('\n'));
|
||||
}
|
||||
|
||||
function startHLSConversion(filePath: string, info: MediaInfo, hash: string): ActiveStream {
|
||||
const hlsDir = ensureHLSDirectory(hash);
|
||||
|
||||
const stream: ActiveStream = {
|
||||
hash,
|
||||
filePath,
|
||||
hlsDir,
|
||||
info,
|
||||
process: null,
|
||||
startedAt: Date.now(),
|
||||
lastAccessed: Date.now(),
|
||||
isComplete: false
|
||||
};
|
||||
|
||||
activeStreams.set(hash, stream);
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
|
||||
await extractSubtitles(filePath, info, hlsDir);
|
||||
|
||||
writeMasterPlaylist(info, hlsDir);
|
||||
|
||||
startVideoTranscoding(stream, filePath, info, hlsDir);
|
||||
|
||||
} catch (err) {
|
||||
console.error('❌ Error en el flujo de inicio:', err);
|
||||
}
|
||||
})();
|
||||
|
||||
return stream;
|
||||
}
|
||||
|
||||
function startVideoTranscoding(stream: ActiveStream, filePath: string, info: MediaInfo, hlsDir: string) {
|
||||
const args: string[] = ['-i', filePath];
|
||||
|
||||
args.push(
|
||||
'-map', '0:v:0',
|
||||
'-c:v', 'libx264',
|
||||
'-preset', 'veryfast',
|
||||
'-profile:v', 'main',
|
||||
'-g', '48',
|
||||
'-keyint_min', '48',
|
||||
'-sc_threshold', '0',
|
||||
'-pix_fmt', 'yuv420p',
|
||||
'-f', 'hls',
|
||||
'-hls_time', '4',
|
||||
'-hls_playlist_type', 'event',
|
||||
|
||||
'-hls_flags', 'independent_segments',
|
||||
'-hls_segment_filename', path.join(hlsDir, 'v_%05d.ts'),
|
||||
path.join(hlsDir, 'video.m3u8')
|
||||
);
|
||||
|
||||
info.audio.forEach((a, i) => {
|
||||
args.push(
|
||||
'-map', `0:${a.index}`,
|
||||
`-c:a:${i}`, 'aac',
|
||||
`-b:a:${i}`, '128k',
|
||||
'-f', 'hls',
|
||||
'-hls_time', '4',
|
||||
'-hls_playlist_type', 'event',
|
||||
'-hls_flags', 'independent_segments',
|
||||
'-hls_segment_filename', path.join(hlsDir, `a${i}_%05d.ts`),
|
||||
path.join(hlsDir, `audio_${i}.m3u8`)
|
||||
);
|
||||
});
|
||||
|
||||
console.log('🎬 Starting Video/Audio transcoding:', args.join(' '));
|
||||
|
||||
const ffmpeg = spawn(FFMPEG_PATH, args, {
|
||||
windowsHide: true,
|
||||
stdio: ['ignore', 'pipe', 'pipe']
|
||||
});
|
||||
|
||||
stream.process = ffmpeg;
|
||||
|
||||
ffmpeg.stderr.on('data', (data) => {
|
||||
const text = data.toString();
|
||||
|
||||
if (text.includes('time=')) {
|
||||
const timeMatch = text.match(/time=(\S+)/);
|
||||
if (timeMatch) console.log(`⏱️ Converting ${stream.hash.substr(0,6)}: ${timeMatch[1]}`);
|
||||
}
|
||||
});
|
||||
|
||||
ffmpeg.on('close', (code) => {
|
||||
if (code === 0) {
|
||||
console.log('✅ Video transcoding complete');
|
||||
stream.isComplete = true;
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const SUBTITLE_EXTENSIONS: Record<string, string> = {
|
||||
'ass': 'ass',
|
||||
'ssa': 'ass',
|
||||
'subrip': 'srt',
|
||||
'webvtt': 'vtt',
|
||||
'hdmv_pgs_subtitle': 'sup',
|
||||
'mov_text': 'srt',
|
||||
'dvd_subtitle': 'sub',
|
||||
'text': 'srt'
|
||||
};
|
||||
|
||||
async function extractSubtitles(filePath: string, info: MediaInfo, hlsDir: string): Promise<void> {
|
||||
if (info.subtitles.length === 0) return;
|
||||
|
||||
console.log('📝 Extrayendo subtítulos...');
|
||||
|
||||
const promises = info.subtitles.map((s, i) => {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
const codec = s.codec.toLowerCase();
|
||||
const ext = codec === 'subrip' ? 'srt'
|
||||
: codec === 'ass' || codec === 'ssa' ? 'ass'
|
||||
: codec === 'webvtt' ? 'vtt'
|
||||
: 'sub';
|
||||
|
||||
const outputFilename = `s${i}_full.${ext}`;
|
||||
const outputPath = path.join(hlsDir, outputFilename);
|
||||
const playlistPath = path.join(hlsDir, `subs_${i}.m3u8`);
|
||||
|
||||
if (s.duration === 0) {
|
||||
console.log(`⚠️ Sub vacío, skip: ${i}`);
|
||||
createDummySubtitlePlaylist(playlistPath, outputFilename, info.duration);
|
||||
fs.writeFileSync(outputPath, '');
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(` Track ${i}: ${s.title || s.language || 'Unknown'} [${codec}] -> ${ext}`);
|
||||
|
||||
const args = [
|
||||
'-i', filePath,
|
||||
'-map', `0:s:${i}`
|
||||
];
|
||||
|
||||
args.push('-c:s', 'copy');
|
||||
args.push('-y', outputPath);
|
||||
|
||||
console.log(` Comando: ffmpeg ${args.join(' ')}`);
|
||||
|
||||
const p = spawn(FFMPEG_PATH, args, {
|
||||
stdio: ['ignore', 'pipe', 'pipe']
|
||||
});
|
||||
|
||||
let errorOutput = '';
|
||||
|
||||
p.stderr.on('data', (data) => {
|
||||
errorOutput += data.toString();
|
||||
});
|
||||
|
||||
p.on('close', (code) => {
|
||||
if (code === 0) {
|
||||
try {
|
||||
|
||||
if (!fs.existsSync(outputPath)) {
|
||||
console.error(` ❌ Archivo no creado: ${outputFilename}`);
|
||||
|
||||
fs.writeFileSync(outputPath, '');
|
||||
} else {
|
||||
const stat = fs.statSync(outputPath);
|
||||
if (stat.size === 0) {
|
||||
console.error(` ⚠️ Subtítulo ${i} tiene 0 bytes`);
|
||||
console.error(` FFmpeg stderr:`, errorOutput.slice(-500));
|
||||
} else {
|
||||
console.log(` ✅ Subtítulo ${i} extraído: ${stat.size} bytes`);
|
||||
}
|
||||
}
|
||||
|
||||
createDummySubtitlePlaylist(playlistPath, outputFilename, info.duration);
|
||||
resolve();
|
||||
} catch (e) {
|
||||
console.error(` Error procesando subtítulo ${i}:`, e);
|
||||
resolve();
|
||||
}
|
||||
} else {
|
||||
console.error(` ❌ Error extrayendo subtítulo ${i}. Exit code: ${code}`);
|
||||
console.error(` FFmpeg stderr:`, errorOutput.slice(-500));
|
||||
|
||||
fs.writeFileSync(outputPath, '');
|
||||
createDummySubtitlePlaylist(playlistPath, outputFilename, info.duration);
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
|
||||
p.on('error', (err) => {
|
||||
console.error(` Error spawn ffmpeg subs ${i}:`, err);
|
||||
fs.writeFileSync(outputPath, '');
|
||||
createDummySubtitlePlaylist(playlistPath, outputFilename, info.duration);
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
await Promise.all(promises);
|
||||
console.log('✅ Proceso de subtítulos finalizado.');
|
||||
}
|
||||
|
||||
function createDummySubtitlePlaylist(playlistPath: string, subtitleFilename: string, duration: number) {
|
||||
const content = [
|
||||
'#EXTM3U',
|
||||
'#EXT-X-VERSION:3',
|
||||
`#EXT-X-TARGETDURATION:${Math.ceil(duration)}`,
|
||||
'#EXT-X-MEDIA-SEQUENCE:0',
|
||||
'#EXT-X-PLAYLIST-TYPE:VOD',
|
||||
`#EXTINF:${duration.toFixed(6)},`,
|
||||
subtitleFilename,
|
||||
'#EXT-X-ENDLIST'
|
||||
].join('\n');
|
||||
|
||||
fs.writeFileSync(playlistPath, content);
|
||||
}
|
||||
|
||||
async function probeMediaFile(filePath: string): Promise<MediaInfo> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const args = [
|
||||
'-v', 'quiet',
|
||||
'-print_format', 'json',
|
||||
'-show_streams',
|
||||
'-show_chapters',
|
||||
'-show_format',
|
||||
filePath
|
||||
];
|
||||
|
||||
const ffprobe = spawn(FFPROBE_PATH, args);
|
||||
let output = '';
|
||||
|
||||
ffprobe.stdout.on('data', (data) => {
|
||||
output += data.toString();
|
||||
});
|
||||
|
||||
ffprobe.on('close', (code) => {
|
||||
if (code !== 0) {
|
||||
return reject(new Error(`FFprobe failed with code ${code}`));
|
||||
}
|
||||
|
||||
try {
|
||||
const data = JSON.parse(output);
|
||||
|
||||
const video: VideoStreamInfo[] = data.streams
|
||||
.filter((s: any) => s.codec_type === 'video')
|
||||
.map((s: any) => ({
|
||||
index: s.index,
|
||||
codec: s.codec_name,
|
||||
width: s.width,
|
||||
height: s.height,
|
||||
fps: eval(s.r_frame_rate) || 24
|
||||
}));
|
||||
|
||||
const audio: AudioStreamInfo[] = data.streams
|
||||
.filter((s: any) => s.codec_type === 'audio')
|
||||
.map((s: any) => ({
|
||||
index: s.index,
|
||||
codec: s.codec_name,
|
||||
language: s.tags?.language,
|
||||
title: s.tags?.title,
|
||||
channels: s.channels || 2,
|
||||
sampleRate: parseInt(s.sample_rate) || 48000
|
||||
}));
|
||||
|
||||
const subtitles: SubtitleStreamInfo[] = data.streams
|
||||
.filter((s: any) => s.codec_type === 'subtitle')
|
||||
.map((s: any) => ({
|
||||
index: s.index,
|
||||
codec: s.codec_name,
|
||||
language: s.tags?.language,
|
||||
title: s.tags?.title,
|
||||
duration: parseFloat(s.duration) || 0
|
||||
}));
|
||||
|
||||
const chapters: ChapterInfo[] = (data.chapters || []).map((c: any) => ({
|
||||
id: c.id,
|
||||
start: parseFloat(c.start_time),
|
||||
end: parseFloat(c.end_time),
|
||||
title: c.tags?.title || `Chapter ${c.id + 1}`
|
||||
}));
|
||||
|
||||
const duration = parseFloat(data.format?.duration) || 0;
|
||||
|
||||
console.log(`📊 Media info: ${video.length} video, ${audio.length} audio, ${subtitles.length} subs`);
|
||||
|
||||
resolve({ video, audio, subtitles, chapters, duration });
|
||||
} catch (e) {
|
||||
reject(e);
|
||||
}
|
||||
});
|
||||
|
||||
ffprobe.on('error', reject);
|
||||
});
|
||||
}
|
||||
|
||||
export async function getStreamingManifest(filePath: string) {
|
||||
if (!fs.existsSync(filePath)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const hash = getStreamHash(filePath);
|
||||
|
||||
const formatSubtitles = (subs: SubtitleStreamInfo[]) => {
|
||||
return subs.map((s, i) => {
|
||||
const ext = SUBTITLE_EXTENSIONS[s.codec] || 'vtt';
|
||||
return {
|
||||
index: s.index,
|
||||
codec: s.codec,
|
||||
language: s.language || 'und',
|
||||
title: s.title || `Subtitle ${s.index}`,
|
||||
|
||||
url: `/api/library/hls/${hash}/s${i}_full.${ext}`
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const existing = activeStreams.get(hash);
|
||||
if (existing) {
|
||||
existing.lastAccessed = Date.now();
|
||||
|
||||
return {
|
||||
type: 'hls',
|
||||
hash,
|
||||
masterPlaylist: `/api/library/hls/${hash}/master.m3u8`,
|
||||
duration: existing.info.duration,
|
||||
isComplete: existing.isComplete,
|
||||
video: existing.info.video.map(v => ({
|
||||
index: v.index,
|
||||
codec: v.codec,
|
||||
resolution: `${v.width}x${v.height}`,
|
||||
fps: v.fps
|
||||
})),
|
||||
audio: existing.info.audio.map(a => ({
|
||||
index: a.index,
|
||||
codec: a.codec,
|
||||
language: a.language || 'und',
|
||||
title: a.title || `Audio ${a.index}`,
|
||||
channels: a.channels
|
||||
})),
|
||||
|
||||
subtitles: formatSubtitles(existing.info.subtitles),
|
||||
chapters: existing.info.chapters.map(c => ({
|
||||
id: c.id,
|
||||
start: c.start,
|
||||
end: c.end,
|
||||
title: c.title
|
||||
}))
|
||||
};
|
||||
}
|
||||
|
||||
const duplicateCheck = activeStreams.get(hash);
|
||||
|
||||
if (duplicateCheck) {
|
||||
duplicateCheck.lastAccessed = Date.now();
|
||||
return {
|
||||
type: 'hls',
|
||||
hash,
|
||||
masterPlaylist: `/api/library/hls/${hash}/master.m3u8`,
|
||||
duration: duplicateCheck.info.duration,
|
||||
isComplete: duplicateCheck.isComplete,
|
||||
video: duplicateCheck.info.video.map(v => ({
|
||||
index: v.index,
|
||||
codec: v.codec,
|
||||
resolution: `${v.width}x${v.height}`,
|
||||
fps: v.fps
|
||||
})),
|
||||
audio: duplicateCheck.info.audio.map(a => ({
|
||||
index: a.index,
|
||||
codec: a.codec,
|
||||
language: a.language || 'und',
|
||||
title: a.title || `Audio ${a.index}`,
|
||||
channels: a.channels
|
||||
})),
|
||||
subtitles: formatSubtitles(duplicateCheck.info.subtitles),
|
||||
chapters: duplicateCheck.info.chapters.map(c => ({
|
||||
id: c.id,
|
||||
start: c.start,
|
||||
end: c.end,
|
||||
title: c.title
|
||||
}))
|
||||
};
|
||||
}
|
||||
|
||||
const info = await probeMediaFile(filePath);
|
||||
return {
|
||||
type: 'hls',
|
||||
hash,
|
||||
masterPlaylist: `/api/library/hls/${hash}/master.m3u8`,
|
||||
duration: info.duration,
|
||||
isComplete: false,
|
||||
generating: true,
|
||||
video: info.video.map(v => ({
|
||||
index: v.index,
|
||||
codec: v.codec,
|
||||
resolution: `${v.width}x${v.height}`,
|
||||
fps: v.fps
|
||||
})),
|
||||
audio: info.audio.map(a => ({
|
||||
index: a.index,
|
||||
codec: a.codec,
|
||||
language: a.language || 'und',
|
||||
title: a.title || `Audio ${a.index}`,
|
||||
channels: a.channels
|
||||
})),
|
||||
subtitles: formatSubtitles(info.subtitles),
|
||||
chapters: info.chapters.map(c => ({
|
||||
id: c.id,
|
||||
start: c.start,
|
||||
end: c.end,
|
||||
title: c.title
|
||||
}))
|
||||
};
|
||||
}
|
||||
|
||||
export function getSubtitleFileStream(hash: string, trackIndex: number) {
|
||||
const stream = activeStreams.get(hash);
|
||||
|
||||
if (!stream) {
|
||||
|
||||
const tempDir = path.join(require('os').tmpdir(), 'hls-streams', hash);
|
||||
if(fs.existsSync(tempDir)) {
|
||||
|
||||
const files = fs.readdirSync(tempDir);
|
||||
const subFile = files.find(f => f.startsWith(`s${trackIndex}_full.`));
|
||||
if (subFile) return fs.createReadStream(path.join(tempDir, subFile));
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!fs.existsSync(stream.hlsDir)) return null;
|
||||
|
||||
const files = fs.readdirSync(stream.hlsDir);
|
||||
const subtitleFile = files.find(f => f.startsWith(`s${trackIndex}_full.`));
|
||||
|
||||
if (!subtitleFile) return null;
|
||||
|
||||
return fs.createReadStream(path.join(stream.hlsDir, subtitleFile));
|
||||
}
|
||||
|
||||
export async function getHLSFile(hash: string, filename: string) {
|
||||
const stream = activeStreams.get(hash);
|
||||
|
||||
if (!stream) {
|
||||
return null;
|
||||
}
|
||||
|
||||
stream.lastAccessed = Date.now();
|
||||
|
||||
const filePath = path.join(stream.hlsDir, filename);
|
||||
|
||||
const maxWait = 30000;
|
||||
|
||||
const startWait = Date.now();
|
||||
|
||||
while (!fs.existsSync(filePath)) {
|
||||
if (Date.now() - startWait > maxWait) {
|
||||
console.error(`⏱️ Timeout esperando archivo: ${filename}`);
|
||||
return null;
|
||||
}
|
||||
|
||||
if (stream.isComplete && !fs.existsSync(filePath)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, 100));
|
||||
}
|
||||
|
||||
return {
|
||||
path: filePath,
|
||||
stat: fs.statSync(filePath)
|
||||
};
|
||||
}
|
||||
|
||||
export function getActiveStreamsStatus() {
|
||||
return Array.from(activeStreams.values()).map(stream => ({
|
||||
hash: stream.hash,
|
||||
filePath: stream.filePath,
|
||||
isComplete: stream.isComplete,
|
||||
startedAt: stream.startedAt,
|
||||
lastAccessed: stream.lastAccessed,
|
||||
age: Date.now() - stream.startedAt,
|
||||
idle: Date.now() - stream.lastAccessed
|
||||
}));
|
||||
}
|
||||
@@ -1,115 +0,0 @@
|
||||
import {FastifyReply, FastifyRequest} from 'fastify';
|
||||
import {processM3U8Content, proxyRequest, streamToReadable} from './proxy.service';
|
||||
|
||||
interface ProxyQuerystring {
|
||||
url: string;
|
||||
referer?: string;
|
||||
origin?: string;
|
||||
userAgent?: string;
|
||||
}
|
||||
|
||||
type ProxyRequest = FastifyRequest<{
|
||||
Querystring: ProxyQuerystring
|
||||
}>;
|
||||
|
||||
export async function handleProxy(req: ProxyRequest, reply: FastifyReply) {
|
||||
const { url, referer, origin, userAgent } = req.query;
|
||||
|
||||
if (!url) {
|
||||
return reply.code(400).send({ error: "No URL provided" });
|
||||
}
|
||||
|
||||
try {
|
||||
const rangeHeader = req.headers.range;
|
||||
|
||||
const { response, contentType, isM3U8, contentLength } = await proxyRequest(url, {
|
||||
referer,
|
||||
origin,
|
||||
userAgent
|
||||
}, rangeHeader);
|
||||
|
||||
|
||||
reply.header('Access-Control-Allow-Origin', '*');
|
||||
reply.header('Access-Control-Allow-Methods', 'GET, OPTIONS');
|
||||
reply.header('Access-Control-Allow-Headers', 'Content-Type, Range');
|
||||
reply.header('Access-Control-Expose-Headers', 'Content-Length, Content-Range, Accept-Ranges');
|
||||
|
||||
if (isM3U8) {
|
||||
reply.header('Content-Type', 'application/vnd.apple.mpegurl');
|
||||
|
||||
const text = await response.text();
|
||||
const baseUrl = new URL(response.url);
|
||||
|
||||
const processedContent = processM3U8Content(text, baseUrl, {
|
||||
referer,
|
||||
origin,
|
||||
userAgent
|
||||
});
|
||||
|
||||
return reply.send(processedContent);
|
||||
}
|
||||
|
||||
const isSubtitle = url.includes('.vtt') || url.includes('.srt') || url.includes('.ass') ||
|
||||
contentType?.includes('text/vtt') || contentType?.includes('text/srt');
|
||||
|
||||
if (isSubtitle) {
|
||||
const text = await response.text();
|
||||
|
||||
let mimeType = 'text/vtt';
|
||||
if (url.includes('.srt') || contentType?.includes('srt')) {
|
||||
mimeType = 'text/plain';
|
||||
} else if (url.includes('.ass')) {
|
||||
mimeType = 'text/plain';
|
||||
}
|
||||
|
||||
reply.header('Content-Type', mimeType);
|
||||
reply.header('Cache-Control', 'public, max-age=3600');
|
||||
return reply.send(text);
|
||||
}
|
||||
|
||||
if (contentType) {
|
||||
reply.header('Content-Type', contentType);
|
||||
}
|
||||
|
||||
if (response.status === 206) {
|
||||
const contentRange = response.headers.get('content-range');
|
||||
if (contentRange) {
|
||||
reply.header('Content-Range', contentRange);
|
||||
}
|
||||
reply.code(206);
|
||||
}
|
||||
|
||||
if (contentLength) {
|
||||
reply.header('Content-Length', contentLength);
|
||||
}
|
||||
|
||||
if (contentType?.startsWith('image/') || contentType?.startsWith('video/')) {
|
||||
reply.header('Cache-Control', 'public, max-age=31536000, immutable');
|
||||
}
|
||||
|
||||
reply.header('Accept-Ranges', 'bytes');
|
||||
|
||||
return reply.send(streamToReadable(response.body!));
|
||||
|
||||
} catch (err) {
|
||||
req.server.log.error(err);
|
||||
console.error('=== PROXY ERROR ===');
|
||||
console.error('URL:', url);
|
||||
console.error('Error:', err);
|
||||
console.error('===================');
|
||||
|
||||
if (!reply.sent) {
|
||||
return reply.code(500).send({
|
||||
error: "Internal Server Error",
|
||||
details: err instanceof Error ? err.message : String(err)
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export async function handleProxyOptions(req: FastifyRequest, reply: FastifyReply) {
|
||||
reply.header('Access-Control-Allow-Origin', '*');
|
||||
reply.header('Access-Control-Allow-Methods', 'GET, OPTIONS');
|
||||
reply.header('Access-Control-Allow-Headers', 'Content-Type, Range');
|
||||
return reply.code(204).send();
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import { FastifyInstance } from 'fastify';
|
||||
import {handleProxy, handleProxyOptions} from './proxy.controller';
|
||||
|
||||
async function proxyRoutes(fastify: FastifyInstance) {
|
||||
fastify.get('/proxy', handleProxy);
|
||||
fastify.options('/proxy', handleProxyOptions);
|
||||
}
|
||||
|
||||
export default proxyRoutes;
|
||||
@@ -1,175 +0,0 @@
|
||||
import {Readable} from 'stream';
|
||||
|
||||
interface ProxyHeaders {
|
||||
referer?: string;
|
||||
origin?: string;
|
||||
userAgent?: string;
|
||||
}
|
||||
|
||||
interface ProxyResponse {
|
||||
response: Response;
|
||||
contentType: string | null;
|
||||
isM3U8: boolean;
|
||||
contentLength: string | null;
|
||||
}
|
||||
|
||||
export async function proxyRequest(url: string, { referer, origin, userAgent }: ProxyHeaders, rangeHeader?: string): Promise<ProxyResponse> {
|
||||
const headers: Record<string, string> = {
|
||||
'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',
|
||||
'Accept-Encoding': 'identity',
|
||||
'Connection': 'keep-alive'
|
||||
};
|
||||
|
||||
if (referer) headers['Referer'] = referer;
|
||||
if (origin) headers['Origin'] = origin;
|
||||
if (rangeHeader) headers['Range'] = rangeHeader;
|
||||
|
||||
let lastError: Error | null = null;
|
||||
const maxRetries = 2;
|
||||
|
||||
for (let attempt = 0; attempt < maxRetries; attempt++) {
|
||||
try {
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(() => controller.abort(), 60000);
|
||||
|
||||
const response = await fetch(url, {
|
||||
headers,
|
||||
redirect: 'follow',
|
||||
signal: controller.signal
|
||||
});
|
||||
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
if (!response.ok && response.status !== 206) {
|
||||
if (response.status === 404 || response.status === 403) {
|
||||
throw new Error(`Proxy Error: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
if (attempt < maxRetries - 1) {
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
continue;
|
||||
}
|
||||
|
||||
throw new Error(`Proxy Error: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
const contentLength = response.headers.get('content-length');
|
||||
const contentType = response.headers.get('content-type');
|
||||
const ct = contentType?.toLowerCase();
|
||||
|
||||
const isM3U8 =
|
||||
!!ct && (
|
||||
ct.includes('mpegurl') ||
|
||||
ct.includes('m3u8')
|
||||
) ||
|
||||
url.toLowerCase().includes('.m3u8');
|
||||
|
||||
return {
|
||||
response,
|
||||
contentType,
|
||||
isM3U8,
|
||||
contentLength
|
||||
};
|
||||
|
||||
} catch (error) {
|
||||
lastError = error as Error;
|
||||
|
||||
if (attempt === maxRetries - 1) {
|
||||
throw lastError;
|
||||
}
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
}
|
||||
}
|
||||
|
||||
throw lastError || new Error('Unknown error in proxyRequest');
|
||||
}
|
||||
|
||||
export function processM3U8Content(text: string, baseUrl: URL, { referer, origin, userAgent }: ProxyHeaders): string {
|
||||
const buildProxy = (url: string) => {
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
params.set('url', new URL(url, baseUrl).href);
|
||||
if (referer) params.set('referer', referer);
|
||||
if (origin) params.set('origin', origin);
|
||||
if (userAgent) params.set('userAgent', userAgent);
|
||||
return `/api/proxy?${params.toString()}`;
|
||||
} catch (error) {
|
||||
console.error('Error building proxy URL for:', url, error);
|
||||
return url;
|
||||
}
|
||||
};
|
||||
|
||||
const isMasterPlaylist = text.includes('#EXT-X-STREAM-INF');
|
||||
|
||||
|
||||
let lines = text.split('\n');
|
||||
let result = [];
|
||||
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines[i];
|
||||
const trimmed = line.trim();
|
||||
|
||||
if (!trimmed) {
|
||||
result.push(line);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (trimmed.startsWith('#')) {
|
||||
if (line.includes('URI=')) {
|
||||
const processedLine = line.replace(/URI="([^"]+)"/g, (match, uri) => {
|
||||
return `URI="${buildProxy(uri)}"`;
|
||||
});
|
||||
result.push(processedLine);
|
||||
} else {
|
||||
result.push(line);
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
try {
|
||||
const proxiedUrl = buildProxy(trimmed);
|
||||
result.push(proxiedUrl);
|
||||
} catch (error) {
|
||||
console.error('Error processing M3U8 URL line:', trimmed, error);
|
||||
result.push(line);
|
||||
}
|
||||
}
|
||||
|
||||
return result.join('\n');
|
||||
}
|
||||
|
||||
export function streamToReadable(webStream: ReadableStream): Readable {
|
||||
const reader = webStream.getReader();
|
||||
let readTimeout: NodeJS.Timeout;
|
||||
|
||||
return new Readable({
|
||||
async read() {
|
||||
try {
|
||||
const timeoutPromise = new Promise((_, reject) => {
|
||||
readTimeout = setTimeout(() => reject(new Error('Stream read timeout')), 10000);
|
||||
});
|
||||
|
||||
const readPromise = reader.read();
|
||||
const { done, value } = await Promise.race([readPromise, timeoutPromise]) as any;
|
||||
|
||||
clearTimeout(readTimeout);
|
||||
|
||||
if (done) {
|
||||
this.push(null);
|
||||
} else {
|
||||
this.push(Buffer.from(value));
|
||||
}
|
||||
} catch (error) {
|
||||
clearTimeout(readTimeout);
|
||||
this.destroy(error as Error);
|
||||
}
|
||||
},
|
||||
destroy(error, callback) {
|
||||
clearTimeout(readTimeout);
|
||||
reader.cancel().then(() => callback(error)).catch(callback);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -1,158 +0,0 @@
|
||||
import { FastifyReply, FastifyRequest } from 'fastify';
|
||||
import * as roomService from './rooms.service';
|
||||
import { getUserById } from '../user/user.service';
|
||||
import { openTunnel } from "./tunnel.manager";
|
||||
|
||||
interface CreateRoomBody {
|
||||
name: string;
|
||||
password?: string;
|
||||
expose?: boolean;
|
||||
}
|
||||
|
||||
export async function createRoom(req: any, reply: FastifyReply) {
|
||||
try {
|
||||
const { name, password, expose } = req.body as CreateRoomBody;
|
||||
const userId = req.user?.id;
|
||||
|
||||
if (!userId) {
|
||||
return reply.code(401).send({ error: "Authentication required to create room" });
|
||||
}
|
||||
|
||||
if (!name || name.trim().length === 0) {
|
||||
return reply.code(400).send({ error: "Room name is required" });
|
||||
}
|
||||
|
||||
const user = await getUserById(userId);
|
||||
if (!user) {
|
||||
return reply.code(404).send({ error: "User not found" });
|
||||
}
|
||||
|
||||
const host = {
|
||||
id: `user_${userId}`,
|
||||
username: user.username,
|
||||
avatar: user.profile_picture_url || undefined,
|
||||
isHost: true,
|
||||
isGuest: false,
|
||||
userId
|
||||
};
|
||||
|
||||
let publicUrl: string | undefined;
|
||||
|
||||
if (expose) {
|
||||
publicUrl = await openTunnel();
|
||||
}
|
||||
|
||||
const room = roomService.createRoom(
|
||||
name,
|
||||
host,
|
||||
password,
|
||||
!!expose,
|
||||
publicUrl
|
||||
);
|
||||
|
||||
if (expose && publicUrl) {
|
||||
room.publicUrl = `${publicUrl}/room?id=${room.id}`;
|
||||
}
|
||||
|
||||
return reply.send({
|
||||
success: true,
|
||||
room: {
|
||||
id: room.id,
|
||||
name: room.name,
|
||||
hasPassword: !!room.password,
|
||||
userCount: room.users.size,
|
||||
exposed: room.exposed,
|
||||
publicUrl: room.publicUrl
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Create Room Error:", err);
|
||||
return reply.code(500).send({ error: "Failed to create room" });
|
||||
}
|
||||
}
|
||||
|
||||
export async function getRooms(req: FastifyRequest, reply: FastifyReply) {
|
||||
try {
|
||||
const rooms = roomService.getAllRooms();
|
||||
|
||||
const roomList = rooms.map((room) => ({
|
||||
id: room.id,
|
||||
name: room.name,
|
||||
host: room.host.username,
|
||||
userCount: room.users.size,
|
||||
hasPassword: !!room.password,
|
||||
currentlyWatching: room.currentVideo ? {
|
||||
animeId: room.currentVideo.animeId,
|
||||
episode: room.currentVideo.episode
|
||||
} : null
|
||||
}));
|
||||
|
||||
return reply.send({ rooms: roomList });
|
||||
} catch (err) {
|
||||
console.error("Get Rooms Error:", err);
|
||||
return reply.code(500).send({ error: "Failed to retrieve rooms" });
|
||||
}
|
||||
}
|
||||
|
||||
export async function getRoom(req: FastifyRequest, reply: FastifyReply) {
|
||||
try {
|
||||
const { id } = req.params as { id: string };
|
||||
const room = roomService.getRoom(id);
|
||||
|
||||
if (!room) {
|
||||
return reply.code(404).send({ error: "Room not found" });
|
||||
}
|
||||
|
||||
return reply.send({
|
||||
room: {
|
||||
id: room.id,
|
||||
name: room.name,
|
||||
host: {
|
||||
username: room.host.username,
|
||||
avatar: room.host.avatar
|
||||
},
|
||||
users: Array.from(room.users.values()).map(u => ({
|
||||
id: u.id,
|
||||
username: u.username,
|
||||
avatar: u.avatar,
|
||||
isHost: u.isHost,
|
||||
isGuest: u.isGuest
|
||||
})),
|
||||
hasPassword: !!room.password,
|
||||
currentVideo: room.currentVideo,
|
||||
exposed: room.exposed,
|
||||
publicUrl: room.publicUrl
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Get Room Error:", err);
|
||||
return reply.code(500).send({ error: "Failed to retrieve room" });
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteRoom(req: any, reply: FastifyReply) {
|
||||
try {
|
||||
const { id } = req.params as { id: string };
|
||||
const userId = req.user?.id;
|
||||
|
||||
if (!userId) {
|
||||
return reply.code(401).send({ error: "Authentication required" });
|
||||
}
|
||||
|
||||
const room = roomService.getRoom(id);
|
||||
if (!room) {
|
||||
return reply.code(404).send({ error: "Room not found" });
|
||||
}
|
||||
|
||||
if (room.host.userId !== userId) {
|
||||
return reply.code(403).send({ error: "Only the host can delete the room" });
|
||||
}
|
||||
|
||||
roomService.deleteRoom(id);
|
||||
|
||||
return reply.send({ success: true });
|
||||
} catch (err) {
|
||||
console.error("Delete Room Error:", err);
|
||||
return reply.code(500).send({ error: "Failed to delete room" });
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
import { FastifyInstance } from 'fastify';
|
||||
import * as controller from './rooms.controller';
|
||||
|
||||
async function roomRoutes(fastify: FastifyInstance) {
|
||||
fastify.post('/rooms', controller.createRoom);
|
||||
fastify.get('/rooms', controller.getRooms);
|
||||
fastify.get('/rooms/:id', controller.getRoom);
|
||||
fastify.delete('/rooms/:id', controller.deleteRoom);
|
||||
}
|
||||
|
||||
export default roomRoutes;
|
||||
@@ -1,296 +0,0 @@
|
||||
import crypto from 'crypto';
|
||||
import { closeTunnelIfUnused } from "./tunnel.manager";
|
||||
|
||||
interface RoomPermissions {
|
||||
canControl: boolean;
|
||||
canManageQueue: boolean;
|
||||
}
|
||||
|
||||
interface RoomUser {
|
||||
id: string;
|
||||
username: string;
|
||||
avatar?: string;
|
||||
isHost: boolean;
|
||||
isGuest: boolean;
|
||||
userId?: number;
|
||||
permissions?: RoomPermissions;
|
||||
ipAddress?: string;
|
||||
}
|
||||
|
||||
interface SourceContext {
|
||||
animeId: string;
|
||||
episode: string | number;
|
||||
source: string;
|
||||
extension: string;
|
||||
server: string;
|
||||
category: string;
|
||||
}
|
||||
|
||||
export interface QueueItem {
|
||||
uid: string;
|
||||
metadata: RoomMetadata;
|
||||
videoData: any;
|
||||
addedBy: string;
|
||||
}
|
||||
|
||||
interface RoomMetadata {
|
||||
id: string;
|
||||
title: string;
|
||||
episode: number;
|
||||
image?: string;
|
||||
source?: string;
|
||||
malId?: number;
|
||||
}
|
||||
|
||||
interface RoomData {
|
||||
id: string;
|
||||
name: string;
|
||||
host: RoomUser;
|
||||
users: Map<string, RoomUser>;
|
||||
createdAt: number;
|
||||
currentVideo: {
|
||||
animeId?: number;
|
||||
episode?: number;
|
||||
source?: string;
|
||||
videoData?: any;
|
||||
currentTime: number;
|
||||
isPlaying: boolean;
|
||||
context?: SourceContext;
|
||||
} | null;
|
||||
password?: string;
|
||||
metadata?: RoomMetadata | null;
|
||||
exposed: boolean;
|
||||
publicUrl?: string;
|
||||
queue: QueueItem[];
|
||||
bannedIPs: Set<string>;
|
||||
}
|
||||
|
||||
export const DEFAULT_GUEST_PERMISSIONS: RoomPermissions = {
|
||||
canControl: false,
|
||||
canManageQueue: false
|
||||
};
|
||||
|
||||
const rooms = new Map<string, RoomData>();
|
||||
|
||||
export function generateRoomId(): string {
|
||||
return crypto.randomBytes(8).toString('hex');
|
||||
}
|
||||
|
||||
export function createRoom(name: string, host: RoomUser, password?: string, exposed = false, publicUrl?: string): RoomData {
|
||||
const roomId = generateRoomId();
|
||||
|
||||
const room: RoomData = {
|
||||
id: roomId,
|
||||
name,
|
||||
host,
|
||||
users: new Map([[host.id, host]]),
|
||||
createdAt: Date.now(),
|
||||
currentVideo: null,
|
||||
password: password || undefined,
|
||||
metadata: null,
|
||||
exposed,
|
||||
publicUrl,
|
||||
queue: [],
|
||||
bannedIPs: new Set() // NUEVO
|
||||
};
|
||||
|
||||
rooms.set(roomId, room);
|
||||
return room;
|
||||
}
|
||||
|
||||
export function updateUserPermissions(roomId: string, userId: string, permissions: Partial<RoomPermissions>): boolean {
|
||||
const room = rooms.get(roomId);
|
||||
if (!room) return false;
|
||||
|
||||
const user: any = room.users.get(userId);
|
||||
if (!user) return false;
|
||||
|
||||
if (user.isHost) return false;
|
||||
|
||||
user.permissions = {
|
||||
...user.permissions,
|
||||
...permissions
|
||||
};
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
export function banUserIP(roomId: string, ipAddress: string): boolean {
|
||||
const room = rooms.get(roomId);
|
||||
if (!room) return false;
|
||||
|
||||
room.bannedIPs.add(ipAddress);
|
||||
|
||||
// Remover a todos los usuarios con esa IP
|
||||
Array.from(room.users.values()).forEach(user => {
|
||||
if (user.ipAddress === ipAddress) {
|
||||
removeUserFromRoom(roomId, user.id);
|
||||
}
|
||||
});
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
export function unbanUserIP(roomId: string, ipAddress: string): boolean {
|
||||
const room = rooms.get(roomId);
|
||||
if (!room) return false;
|
||||
|
||||
return room.bannedIPs.delete(ipAddress);
|
||||
}
|
||||
|
||||
export function isIPBanned(roomId: string, ipAddress: string): boolean {
|
||||
const room = rooms.get(roomId);
|
||||
if (!room) return false;
|
||||
return room.bannedIPs.has(ipAddress);
|
||||
}
|
||||
|
||||
export function getBannedIPs(roomId: string): string[] {
|
||||
const room = rooms.get(roomId);
|
||||
if (!room) return [];
|
||||
return Array.from(room.bannedIPs);
|
||||
}
|
||||
|
||||
export function hasPermission(roomId: string, userId: string, permission: keyof RoomPermissions): boolean {
|
||||
const room = rooms.get(roomId);
|
||||
if (!room) return false;
|
||||
|
||||
const user = room.users.get(userId);
|
||||
if (!user) return false;
|
||||
|
||||
// El host siempre tiene todos los permisos
|
||||
if (user.isHost) return true;
|
||||
|
||||
// Si no tiene permisos definidos, usar defaults
|
||||
const userPerms = user.permissions || DEFAULT_GUEST_PERMISSIONS;
|
||||
return userPerms[permission] || false;
|
||||
}
|
||||
|
||||
export function getRoom(roomId: string): RoomData | null {
|
||||
return rooms.get(roomId) || null;
|
||||
}
|
||||
|
||||
export function getAllRooms(): RoomData[] {
|
||||
return Array.from(rooms.values()).map(room => ({
|
||||
...room,
|
||||
users: room.users
|
||||
}));
|
||||
}
|
||||
|
||||
export function addQueueItem(roomId: string, item: QueueItem): boolean {
|
||||
const room = rooms.get(roomId);
|
||||
if (!room) return false;
|
||||
room.queue.push(item);
|
||||
return true;
|
||||
}
|
||||
|
||||
export function removeQueueItem(roomId: string, itemUid: string): boolean {
|
||||
const room = rooms.get(roomId);
|
||||
if (!room) return false;
|
||||
room.queue = room.queue.filter(i => i.uid !== itemUid);
|
||||
return true;
|
||||
}
|
||||
|
||||
export function getNextQueueItem(roomId: string): QueueItem | undefined {
|
||||
const room = rooms.get(roomId);
|
||||
if (!room || room.queue.length === 0) return undefined;
|
||||
return room.queue.shift(); // Saca el primero y lo retorna
|
||||
}
|
||||
|
||||
export function getAndRemoveQueueItem(roomId: string, itemUid: string): QueueItem | undefined {
|
||||
const room = rooms.get(roomId);
|
||||
if (!room) return undefined;
|
||||
|
||||
const index = room.queue.findIndex(i => i.uid === itemUid);
|
||||
if (index === -1) return undefined;
|
||||
|
||||
const [item] = room.queue.splice(index, 1);
|
||||
return item;
|
||||
}
|
||||
|
||||
export function moveQueueItem(roomId: string, itemUid: string, direction: 'up' | 'down'): boolean {
|
||||
const room = rooms.get(roomId);
|
||||
if (!room) return false;
|
||||
|
||||
const index = room.queue.findIndex(i => i.uid === itemUid);
|
||||
if (index === -1) return false;
|
||||
|
||||
const newIndex = direction === 'up' ? index - 1 : index + 1;
|
||||
|
||||
if (newIndex < 0 || newIndex >= room.queue.length) return false;
|
||||
|
||||
const temp = room.queue[newIndex];
|
||||
room.queue[newIndex] = room.queue[index];
|
||||
room.queue[index] = temp;
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
export function addUserToRoom(roomId: string, user: RoomUser): boolean {
|
||||
const room = rooms.get(roomId);
|
||||
if (!room) return false;
|
||||
|
||||
room.users.set(user.id, user);
|
||||
return true;
|
||||
}
|
||||
|
||||
export function removeUserFromRoom(roomId: string, userId: string): boolean {
|
||||
const room = rooms.get(roomId);
|
||||
if (!room) return false;
|
||||
|
||||
room.users.delete(userId);
|
||||
|
||||
if (room.users.size === 0) {
|
||||
if (room.exposed) {
|
||||
closeTunnelIfUnused();
|
||||
}
|
||||
rooms.delete(roomId);
|
||||
return true;
|
||||
}
|
||||
|
||||
if (room.host.id === userId && room.users.size > 0) {
|
||||
const newHost = Array.from(room.users.values())[0];
|
||||
newHost.isHost = true;
|
||||
room.host = newHost;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
export function updateRoomVideo(roomId: string, videoData: any): boolean {
|
||||
const room = rooms.get(roomId);
|
||||
if (!room) return false;
|
||||
|
||||
room.currentVideo = {
|
||||
...room.currentVideo,
|
||||
...videoData
|
||||
};
|
||||
return true;
|
||||
}
|
||||
|
||||
export function deleteRoom(roomId: string): boolean {
|
||||
const room = rooms.get(roomId);
|
||||
if (!room) return false;
|
||||
|
||||
if (room.exposed) {
|
||||
closeTunnelIfUnused();
|
||||
}
|
||||
|
||||
return rooms.delete(roomId);
|
||||
}
|
||||
|
||||
export function verifyRoomPassword(roomId: string, password?: string): boolean {
|
||||
const room = rooms.get(roomId);
|
||||
if (!room) return false;
|
||||
if (!room.password) return true;
|
||||
if (!password) return false;
|
||||
|
||||
return room.password === password;
|
||||
}
|
||||
|
||||
export function updateRoomMetadata(roomId: string, metadata: any): boolean {
|
||||
const room = rooms.get(roomId);
|
||||
if (!room) return false;
|
||||
|
||||
room.metadata = metadata;
|
||||
return true;
|
||||
}
|
||||
@@ -1,588 +0,0 @@
|
||||
import { FastifyInstance, FastifyRequest } from 'fastify';
|
||||
import * as roomService from './rooms.service';
|
||||
import { getUserById } from '../user/user.service';
|
||||
import jwt from 'jsonwebtoken';
|
||||
|
||||
import {getConfig} from '../../shared/config';
|
||||
const { values } = getConfig();
|
||||
const jwtSecret = values.server?.jwt_secret;
|
||||
|
||||
interface WSClient {
|
||||
socket: any;
|
||||
userId: string;
|
||||
username: string;
|
||||
roomId: string;
|
||||
isGuest: boolean;
|
||||
}
|
||||
|
||||
const clients = new Map<string, WSClient>();
|
||||
|
||||
|
||||
function getClientIP(req: any): string {
|
||||
return req.headers['x-forwarded-for']?.split(',')[0].trim() ||
|
||||
req.headers['x-real-ip'] ||
|
||||
req.connection?.remoteAddress ||
|
||||
req.socket?.remoteAddress ||
|
||||
'unknown';
|
||||
}
|
||||
|
||||
export function setupRoomWebSocket(fastify: FastifyInstance) {
|
||||
// @ts-ignore
|
||||
fastify.get('/ws/room/:roomId', { websocket: true }, (connection: any, req: any) => {
|
||||
handleWebSocketConnection(connection, req).catch(err => {
|
||||
console.error('WebSocket error:', err);
|
||||
try {
|
||||
connection.socket.close();
|
||||
} catch (e) {
|
||||
// Socket already closed
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function handleWebSocketConnection(connection: any, req: any) {
|
||||
const socket = connection.socket || connection;
|
||||
const roomId = req.params.roomId;
|
||||
const token = req.query.token;
|
||||
const guestName = req.query.guestName;
|
||||
const password = req.query.password;
|
||||
const clientIP = getClientIP(req);
|
||||
|
||||
let userId: string;
|
||||
let username: string;
|
||||
let avatar: string | undefined;
|
||||
let isGuest = false;
|
||||
let realUserId: any;
|
||||
|
||||
const room = roomService.getRoom(roomId);
|
||||
|
||||
// 1. Validaciones básicas de existencia y Ban
|
||||
if (!room) {
|
||||
socket.send(JSON.stringify({ type: 'error', message: 'Room not found' }));
|
||||
socket.close();
|
||||
return;
|
||||
}
|
||||
|
||||
if (roomService.isIPBanned(roomId, clientIP)) {
|
||||
socket.send(JSON.stringify({ type: 'error', message: 'You have been banned from this room' }));
|
||||
socket.close();
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. MOVIDO ARRIBA: Autenticar usuario PRIMERO para saber quién es
|
||||
if (token) {
|
||||
try {
|
||||
const decoded: any = jwt.verify(token, jwtSecret);
|
||||
realUserId = decoded.id;
|
||||
const user = await getUserById(realUserId);
|
||||
|
||||
if (user) {
|
||||
userId = `user_${realUserId}`;
|
||||
username = user.username;
|
||||
avatar = user.profile_picture_url || undefined;
|
||||
isGuest = false;
|
||||
} else {
|
||||
throw new Error('User not found');
|
||||
}
|
||||
} catch (err) {
|
||||
socket.send(JSON.stringify({ type: 'error', message: 'Invalid token' }));
|
||||
socket.close();
|
||||
return;
|
||||
}
|
||||
} else if (guestName && guestName.trim()) {
|
||||
// ... (Lógica de Guest se mantiene igual) ...
|
||||
const nameToCheck = guestName.trim();
|
||||
const isNameTaken = Array.from(room.users.values()).some(
|
||||
u => u.username.toLowerCase() === nameToCheck.toLowerCase()
|
||||
);
|
||||
if (isNameTaken) {
|
||||
socket.send(JSON.stringify({ type: 'error', message: 'Username is already taken' }));
|
||||
socket.close();
|
||||
return;
|
||||
}
|
||||
userId = `guest_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
|
||||
username = nameToCheck;
|
||||
isGuest = true;
|
||||
} else {
|
||||
socket.send(JSON.stringify({ type: 'error', message: 'Authentication required' }));
|
||||
socket.close();
|
||||
return;
|
||||
}
|
||||
|
||||
// 3. Determinar si es Host
|
||||
const isHost = room.host.userId === realUserId || room.host.id === userId;
|
||||
|
||||
// 4. MOVIDO ABAJO: Validar contraseña SOLO SI NO ES HOST
|
||||
if (room.password && !isHost) {
|
||||
if (!password || !roomService.verifyRoomPassword(roomId, password)) {
|
||||
socket.send(JSON.stringify({ type: 'error', message: 'Invalid password' }));
|
||||
socket.close();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const userInRoom = {
|
||||
id: userId,
|
||||
username,
|
||||
avatar,
|
||||
isHost: isHost,
|
||||
isGuest,
|
||||
userId: realUserId,
|
||||
ipAddress: clientIP, // NUEVO
|
||||
permissions: isHost ? undefined : { ...roomService.DEFAULT_GUEST_PERMISSIONS }
|
||||
};
|
||||
|
||||
roomService.addUserToRoom(roomId, userInRoom);
|
||||
|
||||
// Registrar cliente
|
||||
clients.set(userId, {
|
||||
socket: socket,
|
||||
userId,
|
||||
username,
|
||||
roomId,
|
||||
isGuest
|
||||
});
|
||||
|
||||
socket.send(JSON.stringify({
|
||||
type: 'init',
|
||||
userId,
|
||||
username,
|
||||
isGuest,
|
||||
isHost, // NUEVO: Enviar explícitamente
|
||||
room: {
|
||||
id: room.id,
|
||||
name: room.name,
|
||||
users: Array.from(room.users.values()).map(u => ({
|
||||
id: u.id,
|
||||
username: u.username,
|
||||
avatar: u.avatar,
|
||||
isHost: u.isHost,
|
||||
isGuest: u.isGuest,
|
||||
permissions: u.permissions // NUEVO
|
||||
})),
|
||||
currentVideo: room.currentVideo,
|
||||
queue: room.queue || []
|
||||
}
|
||||
}));
|
||||
|
||||
// Notificar a otros usuarios
|
||||
broadcastToRoom(roomId, {
|
||||
type: 'user_joined',
|
||||
user: {
|
||||
id: userId,
|
||||
username,
|
||||
avatar,
|
||||
isGuest
|
||||
}
|
||||
}, userId);
|
||||
|
||||
// Manejar mensajes
|
||||
socket.on('message', (message: Buffer) => {
|
||||
try {
|
||||
const data = JSON.parse(message.toString());
|
||||
handleMessage(roomId, userId, data);
|
||||
} catch (err) {
|
||||
console.error('WebSocket message error:', err);
|
||||
}
|
||||
});
|
||||
|
||||
// Manejar desconexión
|
||||
socket.on('close', () => {
|
||||
clients.delete(userId);
|
||||
roomService.removeUserFromRoom(roomId, userId);
|
||||
|
||||
broadcastToRoom(roomId, {
|
||||
type: 'user_left',
|
||||
user: { userId, username }
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function handleMessage(roomId: string, userId: string, data: any) {
|
||||
const room = roomService.getRoom(roomId);
|
||||
if (!room) return;
|
||||
|
||||
const user = room.users.get(userId);
|
||||
if (!user) return;
|
||||
|
||||
console.log('Handling message:', data.type, 'from user:', userId, 'isHost:', room.host.id === userId);
|
||||
|
||||
switch (data.type) {
|
||||
case 'chat':
|
||||
broadcastToRoom(roomId, {
|
||||
type: 'chat',
|
||||
userId,
|
||||
username: room.users.get(userId)?.username || 'Unknown',
|
||||
avatar: room.users.get(userId)?.avatar,
|
||||
message: data.message,
|
||||
timestamp: Date.now()
|
||||
});
|
||||
break;
|
||||
|
||||
case 'update_permissions':
|
||||
if (!user.isHost) {
|
||||
console.warn('Non-host attempted to update permissions');
|
||||
return;
|
||||
}
|
||||
|
||||
const success = roomService.updateUserPermissions(
|
||||
roomId,
|
||||
data.targetUserId,
|
||||
data.permissions
|
||||
);
|
||||
|
||||
if (success) {
|
||||
const updatedRoom = roomService.getRoom(roomId);
|
||||
if (updatedRoom) {
|
||||
broadcastToRoom(roomId, {
|
||||
type: 'permissions_updated',
|
||||
users: Array.from(updatedRoom.users.values()).map(u => ({
|
||||
id: u.id,
|
||||
username: u.username,
|
||||
avatar: u.avatar,
|
||||
isHost: u.isHost,
|
||||
isGuest: u.isGuest,
|
||||
permissions: u.permissions
|
||||
}))
|
||||
});
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
// NUEVO: Baneo de usuarios (solo host)
|
||||
case 'ban_user':
|
||||
if (!user.isHost) {
|
||||
console.warn('Non-host attempted to ban user');
|
||||
return;
|
||||
}
|
||||
|
||||
const targetUser = room.users.get(data.targetUserId);
|
||||
if (targetUser && targetUser.ipAddress) {
|
||||
roomService.banUserIP(roomId, targetUser.ipAddress);
|
||||
|
||||
// Cerrar conexión del usuario baneado
|
||||
const targetClient = clients.get(data.targetUserId);
|
||||
if (targetClient && targetClient.socket) {
|
||||
targetClient.socket.send(JSON.stringify({
|
||||
type: 'banned',
|
||||
message: 'You have been banned from this room'
|
||||
}));
|
||||
targetClient.socket.close();
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
|
||||
case 'queue_play_item':
|
||||
if (!user.isHost && !roomService.hasPermission(roomId, userId, 'canManageQueue')) {
|
||||
console.warn('User lacks permission for queue management');
|
||||
return;
|
||||
}
|
||||
|
||||
const itemToPlay = roomService.getAndRemoveQueueItem(roomId, data.itemUid);
|
||||
if (itemToPlay) {
|
||||
const videoPayload = {
|
||||
videoData: itemToPlay.videoData.videoData,
|
||||
subtitles: itemToPlay.videoData.subtitles,
|
||||
currentTime: 0,
|
||||
isPlaying: true
|
||||
};
|
||||
|
||||
roomService.updateRoomVideo(roomId, videoPayload);
|
||||
roomService.updateRoomMetadata(roomId, itemToPlay.metadata);
|
||||
|
||||
broadcastToRoom(roomId, {
|
||||
type: 'video_update',
|
||||
video: videoPayload,
|
||||
metadata: itemToPlay.metadata
|
||||
});
|
||||
|
||||
broadcastToRoom(roomId, {
|
||||
type: 'queue_update',
|
||||
queue: room.queue
|
||||
});
|
||||
}
|
||||
break;
|
||||
|
||||
case 'queue_move':
|
||||
if (!user.isHost && !roomService.hasPermission(roomId, userId, 'canManageQueue')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const moved = roomService.moveQueueItem(roomId, data.itemUid, data.direction);
|
||||
if (moved) {
|
||||
broadcastToRoom(roomId, {
|
||||
type: 'queue_update',
|
||||
queue: room.queue
|
||||
});
|
||||
}
|
||||
break;
|
||||
|
||||
case 'request_sync':
|
||||
// Cualquier usuario puede pedir sync
|
||||
const host = clients.get(room.host.id);
|
||||
if (host && host.socket && host.socket.readyState === 1) {
|
||||
console.log(`[Sync Request] User ${userId} requested sync from host`);
|
||||
|
||||
host.socket.send(JSON.stringify({
|
||||
type: 'sync_requested',
|
||||
requestedBy: userId,
|
||||
username: room.users.get(userId)?.username
|
||||
}));
|
||||
} else {
|
||||
console.warn(`[Sync Request] Host not available for user ${userId}`);
|
||||
|
||||
if (room.currentVideo) {
|
||||
const client = clients.get(userId);
|
||||
if (client && client.socket && client.socket.readyState === 1) {
|
||||
console.log(`[Sync Request] Sending cached video state to ${userId}`);
|
||||
client.socket.send(JSON.stringify({
|
||||
type: 'sync',
|
||||
currentTime: room.currentVideo.currentTime || 0,
|
||||
isPlaying: room.currentVideo.isPlaying || false
|
||||
}));
|
||||
}
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case 'video_update':
|
||||
const canUpdateVideo = user.isHost ||
|
||||
roomService.hasPermission(roomId, userId, 'canControl') ||
|
||||
roomService.hasPermission(roomId, userId, 'canManageQueue');
|
||||
|
||||
if (!canUpdateVideo) {
|
||||
console.warn('User lacks permissions to update video');
|
||||
return;
|
||||
}
|
||||
|
||||
roomService.updateRoomVideo(roomId, data.video);
|
||||
roomService.updateRoomMetadata(roomId, data.metadata);
|
||||
|
||||
broadcastToRoom(roomId, {
|
||||
type: 'video_update',
|
||||
video: data.video,
|
||||
metadata: data.metadata
|
||||
});
|
||||
break;
|
||||
|
||||
case 'queue_add_batch':
|
||||
if (!user.isHost && !roomService.hasPermission(roomId, userId, 'canManageQueue')) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (Array.isArray(data.items)) {
|
||||
data.items.forEach((item: any, i: number) => {
|
||||
const newItem = {
|
||||
uid: `q_${Date.now()}_${i}_${Math.random().toString(36).substr(2, 5)}`,
|
||||
metadata: item.metadata,
|
||||
videoData: item.video,
|
||||
addedBy: room.users.get(userId)?.username || 'Unknown'
|
||||
};
|
||||
roomService.addQueueItem(roomId, newItem);
|
||||
});
|
||||
|
||||
broadcastToRoom(roomId, {
|
||||
type: 'queue_update',
|
||||
queue: room.queue
|
||||
});
|
||||
}
|
||||
break;
|
||||
|
||||
case 'sync':
|
||||
if (room.host.id !== userId) return;
|
||||
|
||||
if (room.currentVideo) {
|
||||
room.currentVideo.currentTime = data.currentTime;
|
||||
room.currentVideo.isPlaying = data.isPlaying;
|
||||
}
|
||||
|
||||
broadcastToRoom(roomId, {
|
||||
type: 'sync',
|
||||
currentTime: data.currentTime,
|
||||
isPlaying: data.isPlaying
|
||||
}, userId);
|
||||
break;
|
||||
|
||||
case 'request_users':
|
||||
const currentRoom = roomService.getRoom(roomId);
|
||||
if (currentRoom) {
|
||||
const client = clients.get(userId);
|
||||
if (client && client.socket && client.socket.readyState === 1) {
|
||||
client.socket.send(JSON.stringify({
|
||||
type: 'users_update', // Nuevo tipo de respuesta
|
||||
users: Array.from(currentRoom.users.values()).map(u => ({
|
||||
id: u.id,
|
||||
username: u.username,
|
||||
avatar: u.avatar,
|
||||
isHost: u.isHost,
|
||||
isGuest: u.isGuest
|
||||
}))
|
||||
}));
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case 'play':
|
||||
if (!user.isHost && !roomService.hasPermission(roomId, userId, 'canControl')) {
|
||||
console.warn('User lacks control permissions');
|
||||
return;
|
||||
}
|
||||
|
||||
broadcastToRoom(roomId, {
|
||||
type: 'play',
|
||||
currentTime: data.currentTime,
|
||||
timestamp: Date.now()
|
||||
}, userId);
|
||||
break;
|
||||
|
||||
case 'pause':
|
||||
if (!user.isHost && !roomService.hasPermission(roomId, userId, 'canControl')) {
|
||||
console.warn('User lacks control permissions for pause');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Broadcasting pause event to room:', roomId);
|
||||
broadcastToRoom(roomId, {
|
||||
type: 'pause',
|
||||
currentTime: data.currentTime,
|
||||
timestamp: Date.now()
|
||||
}, userId);
|
||||
break;
|
||||
|
||||
case 'seek':
|
||||
if (!user.isHost && !roomService.hasPermission(roomId, userId, 'canControl')) {
|
||||
console.warn('User lacks control permissions for seek');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Broadcasting seek event to room:', roomId);
|
||||
broadcastToRoom(roomId, {
|
||||
type: 'seek',
|
||||
currentTime: data.currentTime,
|
||||
timestamp: Date.now()
|
||||
}, userId);
|
||||
break;
|
||||
|
||||
case 'request_state':
|
||||
const client = clients.get(userId);
|
||||
if (client && client.socket && client.socket.readyState === 1) {
|
||||
const updatedRoom = roomService.getRoom(roomId);
|
||||
if (updatedRoom) {
|
||||
client.socket.send(JSON.stringify({
|
||||
type: 'init',
|
||||
userId,
|
||||
username: client.username,
|
||||
isGuest: client.isGuest,
|
||||
room: {
|
||||
id: updatedRoom.id,
|
||||
name: updatedRoom.name,
|
||||
users: Array.from(updatedRoom.users.values()).map(u => ({
|
||||
id: u.id,
|
||||
username: u.username,
|
||||
avatar: u.avatar,
|
||||
isHost: u.isHost,
|
||||
isGuest: u.isGuest
|
||||
})),
|
||||
currentVideo: room.currentVideo,
|
||||
metadata: room.metadata
|
||||
}
|
||||
}));
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case 'queue_add':
|
||||
if (!user.isHost && !roomService.hasPermission(roomId, userId, 'canManageQueue')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const newItem = {
|
||||
uid: `q_${Date.now()}_${Math.random().toString(36).substr(2, 5)}`,
|
||||
metadata: data.metadata,
|
||||
videoData: data.video,
|
||||
addedBy: room.users.get(userId)?.username || 'Unknown'
|
||||
};
|
||||
|
||||
roomService.addQueueItem(roomId, newItem);
|
||||
|
||||
broadcastToRoom(roomId, {
|
||||
type: 'queue_update',
|
||||
queue: room.queue
|
||||
});
|
||||
break;
|
||||
|
||||
case 'queue_remove':
|
||||
if (!user.isHost && !roomService.hasPermission(roomId, userId, 'canManageQueue')) {
|
||||
return;
|
||||
}
|
||||
|
||||
roomService.removeQueueItem(roomId, data.itemUid);
|
||||
broadcastToRoom(roomId, {
|
||||
type: 'queue_update',
|
||||
queue: room.queue
|
||||
});
|
||||
break;
|
||||
|
||||
case 'play_next':
|
||||
if (room.host.id !== userId) return;
|
||||
|
||||
const nextItem = roomService.getNextQueueItem(roomId);
|
||||
if (nextItem) {
|
||||
const videoPayload = {
|
||||
videoData: nextItem.videoData.videoData,
|
||||
subtitles: nextItem.videoData.subtitles,
|
||||
currentTime: 0,
|
||||
isPlaying: true
|
||||
};
|
||||
|
||||
roomService.updateRoomVideo(roomId, videoPayload);
|
||||
roomService.updateRoomMetadata(roomId, nextItem.metadata);
|
||||
|
||||
broadcastToRoom(roomId, {
|
||||
type: 'video_update',
|
||||
video: videoPayload,
|
||||
metadata: nextItem.metadata
|
||||
});
|
||||
|
||||
broadcastToRoom(roomId, {
|
||||
type: 'queue_update',
|
||||
queue: room.queue
|
||||
});
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
console.warn('Unknown message type:', data.type);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function broadcastToRoom(roomId: string, message: any, excludeUserId?: string) {
|
||||
const room = roomService.getRoom(roomId);
|
||||
if (!room) return;
|
||||
|
||||
const messageStr = JSON.stringify(message);
|
||||
|
||||
console.log('Broadcasting to room:', roomId, 'message type:', message.type, 'excluding:', excludeUserId);
|
||||
|
||||
let sentCount = 0;
|
||||
room.users.forEach((user) => {
|
||||
if (user.id !== excludeUserId) {
|
||||
const client = clients.get(user.id);
|
||||
if (client && client.socket && client.socket.readyState === 1) {
|
||||
try {
|
||||
client.socket.send(messageStr);
|
||||
sentCount++;
|
||||
console.log('Sent to user:', user.id, user.username);
|
||||
} catch (err) {
|
||||
console.error('Error sending message to user:', user.id, err);
|
||||
}
|
||||
} else {
|
||||
console.warn('User socket not ready:', user.id, 'readyState:', client?.socket?.readyState);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
console.log(`Broadcast complete: sent to ${sentCount} users`);
|
||||
}
|
||||
@@ -1,111 +0,0 @@
|
||||
import { spawn, ChildProcess } from "child_process";
|
||||
import { getConfig as loadConfig } from '../../shared/config';
|
||||
const { values } = loadConfig();
|
||||
const CLOUDFLARED_PATH = values.paths?.cloudflared || 'cloudflared';
|
||||
|
||||
let tunnelProcess: ChildProcess | null = null;
|
||||
let exposedRooms = 0;
|
||||
let publicUrl: string | null = null;
|
||||
let tunnelPromise: Promise<string> | null = null;
|
||||
|
||||
export function openTunnel(): Promise<string> {
|
||||
if (tunnelProcess && publicUrl) {
|
||||
exposedRooms++;
|
||||
return Promise.resolve(publicUrl);
|
||||
}
|
||||
|
||||
if (tunnelPromise) {
|
||||
return tunnelPromise;
|
||||
}
|
||||
|
||||
tunnelPromise = new Promise((resolve, reject) => {
|
||||
const timeout = setTimeout(() => {
|
||||
cleanup();
|
||||
reject(new Error("Timeout esperando URL del túnel (30s)"));
|
||||
}, 30000);
|
||||
|
||||
tunnelProcess = spawn(CLOUDFLARED_PATH, [
|
||||
"tunnel",
|
||||
"--url",
|
||||
"http://localhost:54322",
|
||||
"--no-autoupdate"
|
||||
]);
|
||||
|
||||
const cleanup = () => {
|
||||
clearTimeout(timeout);
|
||||
tunnelPromise = null;
|
||||
};
|
||||
|
||||
let outputBuffer = "";
|
||||
|
||||
const processOutput = (data: Buffer) => {
|
||||
const text = data.toString();
|
||||
outputBuffer += text;
|
||||
|
||||
const match = outputBuffer.match(/https:\/\/[a-z0-9-]+\.trycloudflare\.com/);
|
||||
if (match && !publicUrl) {
|
||||
publicUrl = match[0];
|
||||
exposedRooms = 1;
|
||||
cleanup();
|
||||
resolve(publicUrl);
|
||||
}
|
||||
};
|
||||
|
||||
tunnelProcess.stdout?.on("data", (data) => {
|
||||
processOutput(data);
|
||||
});
|
||||
|
||||
tunnelProcess.stderr?.on("data", (data) => {
|
||||
processOutput(data);
|
||||
});
|
||||
|
||||
tunnelProcess.on("error", (error) => {
|
||||
console.error("[Cloudflared Process Error]", error);
|
||||
cleanup();
|
||||
tunnelProcess = null;
|
||||
reject(error);
|
||||
});
|
||||
|
||||
tunnelProcess.on("exit", (code, signal) => {
|
||||
tunnelProcess = null;
|
||||
publicUrl = null;
|
||||
exposedRooms = 0;
|
||||
|
||||
if (!publicUrl) {
|
||||
cleanup();
|
||||
reject(new Error(`Proceso cloudflared terminó antes de obtener URL (código: ${code})`));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return tunnelPromise;
|
||||
}
|
||||
|
||||
export function closeTunnelIfUnused() {
|
||||
exposedRooms--;
|
||||
console.log(`[Tunnel Manager] Rooms expuestas: ${exposedRooms}`);
|
||||
|
||||
if (exposedRooms <= 0 && tunnelProcess) {
|
||||
console.log("[Tunnel Manager] Cerrando túnel...");
|
||||
tunnelProcess.kill();
|
||||
tunnelProcess = null;
|
||||
publicUrl = null;
|
||||
exposedRooms = 0;
|
||||
tunnelPromise = null;
|
||||
}
|
||||
}
|
||||
|
||||
export function getTunnelUrl(): string | null {
|
||||
return publicUrl;
|
||||
}
|
||||
|
||||
export function forceTunnelClose() {
|
||||
if (tunnelProcess) {
|
||||
console.log("[Tunnel Manager] Forzando cierre del túnel...");
|
||||
tunnelProcess.kill();
|
||||
tunnelProcess = null;
|
||||
publicUrl = null;
|
||||
exposedRooms = 0;
|
||||
tunnelPromise = null;
|
||||
}
|
||||
}
|
||||
@@ -1,97 +0,0 @@
|
||||
import { Client } from "@xhayper/discord-rpc";
|
||||
|
||||
let rpcClient: Client | null = null;
|
||||
let reconnectTimer: NodeJS.Timeout | null = null;
|
||||
let connected = false;
|
||||
|
||||
interface RPCData {
|
||||
details?: string;
|
||||
state?: string;
|
||||
mode?: string;
|
||||
startTimestamp?: number;
|
||||
endTimestamp?: number;
|
||||
paused?: boolean;
|
||||
version?: string;
|
||||
}
|
||||
|
||||
function attemptReconnect(clientId: string) {
|
||||
connected = false;
|
||||
|
||||
if (reconnectTimer) {
|
||||
clearTimeout(reconnectTimer);
|
||||
reconnectTimer = null;
|
||||
}
|
||||
|
||||
console.log('Discord RPC: Trying to reconnect...');
|
||||
|
||||
reconnectTimer = setTimeout(() => {
|
||||
initRPC(clientId);
|
||||
}, 10000);
|
||||
}
|
||||
|
||||
export function initRPC(clientId: string) {
|
||||
if (rpcClient) {
|
||||
try { rpcClient.destroy(); } catch {}
|
||||
rpcClient = null;
|
||||
}
|
||||
|
||||
if (reconnectTimer) {
|
||||
clearTimeout(reconnectTimer);
|
||||
reconnectTimer = null;
|
||||
}
|
||||
|
||||
rpcClient = new Client({ clientId });
|
||||
|
||||
rpcClient.on("ready", () => {
|
||||
connected = true;
|
||||
console.log("Discord RPC conectado");
|
||||
|
||||
setTimeout(() => {
|
||||
setActivity({ details: "Browsing", state: "In App" });
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
rpcClient.on("disconnected", () => {
|
||||
connected = false;
|
||||
attemptReconnect(clientId);
|
||||
});
|
||||
|
||||
rpcClient.on("error", () => {
|
||||
if (connected) attemptReconnect(clientId);
|
||||
});
|
||||
|
||||
rpcClient.login().catch(() => {
|
||||
attemptReconnect(clientId);
|
||||
});
|
||||
}
|
||||
|
||||
export function setActivity(data: RPCData = {}) {
|
||||
if (!rpcClient || !connected) return;
|
||||
|
||||
let type = 0;
|
||||
if (data.mode === "watching") type = 3;
|
||||
if (data.mode === "reading") type = 0;
|
||||
|
||||
const activity: any = {
|
||||
details: data.details,
|
||||
state: data.state,
|
||||
type,
|
||||
instance: false
|
||||
};
|
||||
|
||||
if (data.paused) {
|
||||
activity.largeImageText = "⏸ ";
|
||||
delete activity.startTimestamp;
|
||||
delete activity.endTimestamp;
|
||||
} else {
|
||||
activity.largeImageKey = "bigpicture";
|
||||
activity.largeImageText = data.version ?? "v2.0.0";
|
||||
|
||||
if (data.startTimestamp && data.endTimestamp) {
|
||||
activity.startTimestamp = data.startTimestamp;
|
||||
activity.endTimestamp = data.endTimestamp;
|
||||
}
|
||||
}
|
||||
|
||||
rpcClient.user?.setActivity(activity);
|
||||
}
|
||||
@@ -1,297 +0,0 @@
|
||||
import { FastifyRequest, FastifyReply } from 'fastify';
|
||||
|
||||
export interface AnimeTitle {
|
||||
romaji: string;
|
||||
english: string | null;
|
||||
native: string | null;
|
||||
userPreferred?: string;
|
||||
}
|
||||
|
||||
export interface CoverImage {
|
||||
extraLarge?: string;
|
||||
large: string;
|
||||
medium?: string;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
export interface StartDate {
|
||||
year: number;
|
||||
month: number;
|
||||
day: number;
|
||||
}
|
||||
|
||||
export interface Anime {
|
||||
updatedAt: any;
|
||||
id: number | string;
|
||||
title: AnimeTitle;
|
||||
coverImage: CoverImage;
|
||||
bannerImage?: string;
|
||||
description?: string;
|
||||
averageScore: number | null;
|
||||
format: string;
|
||||
seasonYear: number | null;
|
||||
startDate?: StartDate;
|
||||
synonyms?: string[];
|
||||
extensionName?: string;
|
||||
isExtensionResult?: boolean;
|
||||
}
|
||||
|
||||
export interface Book {
|
||||
id: number | string;
|
||||
title: AnimeTitle;
|
||||
coverImage: CoverImage;
|
||||
bannerImage?: string;
|
||||
description?: string;
|
||||
averageScore: number | null;
|
||||
format: string;
|
||||
seasonYear: number | null;
|
||||
startDate?: StartDate;
|
||||
synonyms?: string[];
|
||||
extensionName?: string;
|
||||
isExtensionResult?: boolean;
|
||||
}
|
||||
|
||||
export interface ExtensionSearchOptions {
|
||||
query: string;
|
||||
dub?: boolean;
|
||||
media?: {
|
||||
romajiTitle: string;
|
||||
englishTitle: string;
|
||||
startDate: StartDate;
|
||||
};
|
||||
}
|
||||
|
||||
export interface ExtensionSearchResult {
|
||||
url: string;
|
||||
format: string;
|
||||
headers: any;
|
||||
id: string;
|
||||
title: string;
|
||||
image?: string;
|
||||
rating?: number;
|
||||
score?: number;
|
||||
}
|
||||
|
||||
export interface Episode {
|
||||
url: string;
|
||||
id: string;
|
||||
number: number;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
export interface Chapter {
|
||||
language?: string | null;
|
||||
index: number;
|
||||
id: string;
|
||||
number: string | number;
|
||||
title?: string;
|
||||
releaseDate?: string;
|
||||
}
|
||||
|
||||
export interface ChapterWithProvider extends Chapter {
|
||||
provider: string;
|
||||
date?: string;
|
||||
}
|
||||
|
||||
export interface Extension {
|
||||
getMetadata: any;
|
||||
type: 'anime-board' | 'book-board' | 'manga-board';
|
||||
mediaType?: 'manga' | 'ln';
|
||||
search?: (options: ExtensionSearchOptions) => Promise<ExtensionSearchResult[]>;
|
||||
findEpisodes?: (id: string) => Promise<Episode[]>;
|
||||
findEpisodeServer?: (s: any, server1: string | undefined, category: string | undefined) => Promise<any>;
|
||||
findChapters?: (id: string) => Promise<Chapter[]>;
|
||||
findChapterPages?: (chapterId: string) => Promise<any>;
|
||||
getSettings?: () => ExtensionSettings;
|
||||
}
|
||||
|
||||
export interface ExtensionSettings {
|
||||
episodeServers: string[];
|
||||
supportsDub: boolean;
|
||||
}
|
||||
|
||||
export interface StreamData {
|
||||
url?: string;
|
||||
sources?: any[];
|
||||
subtitles?: any[];
|
||||
}
|
||||
|
||||
export interface MangaChapterContent {
|
||||
type: 'manga';
|
||||
chapterId: string;
|
||||
title: string | null;
|
||||
number: number;
|
||||
provider: string;
|
||||
pages: any[];
|
||||
}
|
||||
|
||||
export interface LightNovelChapterContent {
|
||||
type: 'ln';
|
||||
chapterId: string;
|
||||
title: string | null;
|
||||
number: number;
|
||||
provider: string;
|
||||
content: any;
|
||||
}
|
||||
|
||||
export type ChapterContent = MangaChapterContent | LightNovelChapterContent;
|
||||
|
||||
export interface AnimeParams {
|
||||
id: string;
|
||||
}
|
||||
|
||||
export interface AnimeQuery {
|
||||
source?: string;
|
||||
}
|
||||
|
||||
export interface SearchQuery {
|
||||
q: string;
|
||||
}
|
||||
|
||||
export interface ExtensionNameParams {
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface WatchStreamQuery {
|
||||
source: string;
|
||||
animeId: string;
|
||||
episode: string;
|
||||
server?: string;
|
||||
category?: string;
|
||||
ext: string;
|
||||
extensionAnimeId?: string;
|
||||
}
|
||||
|
||||
export interface BookParams {
|
||||
id: string;
|
||||
}
|
||||
|
||||
export interface BookQuery {
|
||||
ext?: string;
|
||||
}
|
||||
|
||||
export interface ChapterParams {
|
||||
bookId: string;
|
||||
chapter: string;
|
||||
provider: string;
|
||||
}
|
||||
|
||||
export interface ProxyQuery {
|
||||
url: string;
|
||||
referer?: string;
|
||||
origin?: string;
|
||||
userAgent?: string;
|
||||
}
|
||||
|
||||
export type AnimeRequest = FastifyRequest<{
|
||||
Params: AnimeParams;
|
||||
Querystring: AnimeQuery;
|
||||
}>;
|
||||
|
||||
export type SearchRequest = FastifyRequest<{
|
||||
Querystring: SearchQuery;
|
||||
}>;
|
||||
|
||||
export type ExtensionNameRequest = FastifyRequest<{
|
||||
Params: ExtensionNameParams;
|
||||
}>;
|
||||
|
||||
export type WatchStreamRequest = FastifyRequest<{
|
||||
Querystring: WatchStreamQuery;
|
||||
}>;
|
||||
|
||||
export type BookRequest = FastifyRequest<{
|
||||
Params: BookParams;
|
||||
Querystring: BookQuery;
|
||||
}>;
|
||||
|
||||
export type ChapterRequest = FastifyRequest<{
|
||||
Params: ChapterParams;
|
||||
}>;
|
||||
|
||||
export type ProxyRequest = FastifyRequest<{
|
||||
Querystring: ProxyQuery;
|
||||
}>;
|
||||
|
||||
export interface GalleryItemPreview {
|
||||
id: string;
|
||||
image: string;
|
||||
tags: string[];
|
||||
type: 'preview';
|
||||
provider?: string;
|
||||
}
|
||||
|
||||
export interface GallerySearchResult {
|
||||
total: number;
|
||||
next: number;
|
||||
previous: number;
|
||||
pages: number;
|
||||
page: number;
|
||||
hasNextPage: boolean;
|
||||
results: GalleryItemPreview[];
|
||||
}
|
||||
|
||||
export interface GalleryInfo {
|
||||
id: string;
|
||||
fullImage: string;
|
||||
resizedImageUrl: string;
|
||||
tags: string[];
|
||||
createdAt: string | null;
|
||||
publishedBy: string;
|
||||
rating: string;
|
||||
comments: any[];
|
||||
provider?: string;
|
||||
}
|
||||
|
||||
export interface GalleryExtension {
|
||||
type: 'gallery';
|
||||
search: (query: string, page: number, perPage: number) => Promise<GallerySearchResult>;
|
||||
getInfo: (id: string) => Promise<Omit<GalleryInfo, 'provider'>>;
|
||||
}
|
||||
|
||||
export interface GallerySearchRequest extends FastifyRequest {
|
||||
query: {
|
||||
q?: string;
|
||||
page?: string;
|
||||
perPage?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface GalleryInfoRequest extends FastifyRequest {
|
||||
params: {
|
||||
id: string;
|
||||
};
|
||||
query: {
|
||||
provider?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface AddFavoriteBody {
|
||||
id: string;
|
||||
title: string;
|
||||
image_url: string;
|
||||
thumbnail_url: string;
|
||||
tags?: string;
|
||||
provider: string;
|
||||
headers: string;
|
||||
}
|
||||
|
||||
export interface RemoveFavoriteParams {
|
||||
id: string;
|
||||
}
|
||||
|
||||
export interface Favorite {
|
||||
id: string;
|
||||
title: string;
|
||||
image_url: string;
|
||||
thumbnail_url: string;
|
||||
tags: string;
|
||||
provider: string;
|
||||
headers: string;
|
||||
}
|
||||
|
||||
export interface FavoriteResult {
|
||||
success: boolean;
|
||||
error?: string;
|
||||
id?: string;
|
||||
}
|
||||
@@ -1,293 +0,0 @@
|
||||
import { FastifyReply, FastifyRequest } from 'fastify';
|
||||
import * as userService from './user.service';
|
||||
import {queryOne} from '../../shared/database';
|
||||
import jwt from "jsonwebtoken";
|
||||
import { getConfig } from '../../shared/config';
|
||||
const { values } = getConfig();
|
||||
const jwtSecret = values.server?.jwt_secret;
|
||||
|
||||
|
||||
interface UserIdParams { id: string; }
|
||||
interface CreateUserBody {
|
||||
username: string;
|
||||
profilePictureUrl?: string;
|
||||
password?: string;
|
||||
}
|
||||
interface UpdateUserBody {
|
||||
username?: string;
|
||||
profilePictureUrl?: string | null;
|
||||
password?: string | null;
|
||||
}
|
||||
interface LoginBody {
|
||||
userId: number;
|
||||
password?: string;
|
||||
}
|
||||
|
||||
interface DBRunResult { changes: number; lastID: number; }
|
||||
|
||||
export async function getMe(req: any, reply: any) {
|
||||
const userId = req.user?.id;
|
||||
|
||||
if (!userId) {
|
||||
return reply.code(401).send({ error: "Unauthorized" });
|
||||
}
|
||||
|
||||
const user = await queryOne(
|
||||
`SELECT username, profile_picture_url FROM User WHERE id = ?`,
|
||||
[userId],
|
||||
'userdata'
|
||||
);
|
||||
|
||||
if (!user) {
|
||||
return reply.code(404).send({ error: "User not found" });
|
||||
}
|
||||
|
||||
return reply.send({
|
||||
username: user.username,
|
||||
avatar: user.profile_picture_url
|
||||
});
|
||||
}
|
||||
|
||||
export async function login(req: FastifyRequest, reply: FastifyReply) {
|
||||
const { userId, password } = req.body as LoginBody;
|
||||
|
||||
if (!userId || typeof userId !== "number" || userId <= 0) {
|
||||
return reply.code(400).send({ error: "Invalid userId provided" });
|
||||
}
|
||||
|
||||
const user = await userService.getUserById(userId);
|
||||
|
||||
if (!user) {
|
||||
return reply.code(404).send({ error: "User not found in local database" });
|
||||
}
|
||||
|
||||
// Si el usuario tiene contraseña, debe proporcionarla
|
||||
if (user.has_password) {
|
||||
if (!password) {
|
||||
return reply.code(401).send({
|
||||
error: "Password required",
|
||||
requiresPassword: true
|
||||
});
|
||||
}
|
||||
|
||||
const isValid = await userService.verifyPassword(userId, password);
|
||||
|
||||
if (!isValid) {
|
||||
return reply.code(401).send({ error: "Incorrect password" });
|
||||
}
|
||||
}
|
||||
|
||||
const token = jwt.sign(
|
||||
{ id: userId },
|
||||
jwtSecret,
|
||||
{ expiresIn: "7d" }
|
||||
);
|
||||
|
||||
return reply.code(200).send({
|
||||
success: true,
|
||||
token
|
||||
});
|
||||
}
|
||||
|
||||
export async function getAllUsers(req: FastifyRequest, reply: FastifyReply) {
|
||||
try {
|
||||
const users: any = await userService.getAllUsers();
|
||||
return { users };
|
||||
} catch (err) {
|
||||
console.error("Get All Users Error:", (err as Error).message);
|
||||
return reply.code(500).send({ error: "Failed to retrieve user list" });
|
||||
}
|
||||
}
|
||||
|
||||
export async function createUser(req: FastifyRequest, reply: FastifyReply) {
|
||||
try {
|
||||
const { username, profilePictureUrl, password } = req.body as CreateUserBody;
|
||||
|
||||
if (!username) {
|
||||
return reply.code(400).send({ error: "Missing required field: username" });
|
||||
}
|
||||
|
||||
const result: any = await userService.createUser(username, profilePictureUrl, password);
|
||||
|
||||
return reply.code(201).send({
|
||||
success: true,
|
||||
userId: result.lastID,
|
||||
username
|
||||
});
|
||||
} catch (err) {
|
||||
if ((err as Error).message.includes('SQLITE_CONSTRAINT')) {
|
||||
return reply.code(409).send({ error: "Username already exists." });
|
||||
}
|
||||
console.error("Create User Error:", (err as Error).message);
|
||||
return reply.code(500).send({ error: "Failed to create user" });
|
||||
}
|
||||
}
|
||||
|
||||
export async function getUser(req: FastifyRequest, reply: FastifyReply) {
|
||||
try {
|
||||
const { id } = req.params as UserIdParams;
|
||||
const userId = parseInt(id, 10);
|
||||
|
||||
const user: any = await userService.getUserById(userId);
|
||||
|
||||
if (!user) {
|
||||
return reply.code(404).send({ error: "User not found" });
|
||||
}
|
||||
|
||||
return { user };
|
||||
} catch (err) {
|
||||
console.error("Get User Error:", (err as Error).message);
|
||||
return reply.code(500).send({ error: "Failed to retrieve user" });
|
||||
}
|
||||
}
|
||||
|
||||
export async function updateUser(req: FastifyRequest, reply: FastifyReply) {
|
||||
try {
|
||||
const { id } = req.params as UserIdParams;
|
||||
const userId = parseInt(id, 10);
|
||||
const updates = req.body as UpdateUserBody;
|
||||
|
||||
if (Object.keys(updates).length === 0) {
|
||||
return reply.code(400).send({ error: "No update fields provided" });
|
||||
}
|
||||
|
||||
const result: DBRunResult = await userService.updateUser(userId, updates);
|
||||
|
||||
if (result && result.changes > 0) {
|
||||
return { success: true, message: "User updated successfully" };
|
||||
} else {
|
||||
return reply.code(404).send({ error: "User not found or nothing to update" });
|
||||
}
|
||||
} catch (err) {
|
||||
if ((err as Error).message.includes('SQLITE_CONSTRAINT')) {
|
||||
return reply.code(409).send({ error: "Username already exists or is invalid." });
|
||||
}
|
||||
console.error("Update User Error:", (err as Error).message);
|
||||
return reply.code(500).send({ error: "Failed to update user" });
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteUser(req: FastifyRequest, reply: FastifyReply) {
|
||||
try {
|
||||
const { id } = req.params as { id: string };
|
||||
const userId = parseInt(id, 10);
|
||||
|
||||
const body = (req.body ?? {}) as { password?: string };
|
||||
const password = body.password;
|
||||
|
||||
if (!userId || isNaN(userId)) {
|
||||
return reply.code(400).send({ error: "Invalid user id" });
|
||||
}
|
||||
|
||||
const user = await userService.getUserById(userId);
|
||||
if (!user) {
|
||||
return reply.code(404).send({ error: "User not found" });
|
||||
}
|
||||
|
||||
if (user.has_password) {
|
||||
if (!password) {
|
||||
return reply.code(401).send({ error: "Password required" });
|
||||
}
|
||||
|
||||
const isValid = await userService.verifyPassword(userId, password);
|
||||
if (!isValid) {
|
||||
return reply.code(401).send({ error: "Incorrect password" });
|
||||
}
|
||||
}
|
||||
|
||||
const result = await userService.deleteUser(userId);
|
||||
|
||||
if (result.changes > 0) {
|
||||
return reply.send({ success: true });
|
||||
}
|
||||
|
||||
return reply.code(500).send({ error: "Failed to delete user" });
|
||||
|
||||
} catch (err) {
|
||||
console.error("Delete User Error:", err);
|
||||
return reply.code(500).send({ error: "Failed to delete user" });
|
||||
}
|
||||
}
|
||||
|
||||
export async function getIntegrationStatus(req: FastifyRequest, reply: FastifyReply) {
|
||||
try {
|
||||
const { id } = req.params as { id: string };
|
||||
const userId = parseInt(id, 10);
|
||||
|
||||
if (!userId || isNaN(userId)) {
|
||||
return reply.code(400).send({ error: "Invalid user id" });
|
||||
}
|
||||
|
||||
const integration = await userService.getAniListIntegration(userId);
|
||||
|
||||
return reply.code(200).send(integration);
|
||||
|
||||
} catch (err) {
|
||||
console.error("Get Integration Status Error:", (err as Error).message);
|
||||
return reply.code(500).send({ error: "Failed to check integration status" });
|
||||
}
|
||||
}
|
||||
|
||||
export async function disconnectAniList(req: FastifyRequest, reply: FastifyReply) {
|
||||
try {
|
||||
const { id } = req.params as { id: string };
|
||||
const userId = parseInt(id, 10);
|
||||
|
||||
if (!userId || isNaN(userId)) {
|
||||
return reply.code(400).send({ error: "Invalid user id" });
|
||||
}
|
||||
|
||||
const result = await userService.removeAniListIntegration(userId);
|
||||
|
||||
if (result.changes === 0) {
|
||||
return reply.code(404).send({ error: "AniList integration not found" });
|
||||
}
|
||||
|
||||
return reply.send({ success: true });
|
||||
} catch (err) {
|
||||
console.error("Disconnect AniList Error:", err);
|
||||
return reply.code(500).send({ error: "Failed to disconnect AniList" });
|
||||
}
|
||||
}
|
||||
|
||||
export async function changePassword(req: FastifyRequest, reply: FastifyReply) {
|
||||
try {
|
||||
const { id } = req.params as { id: string };
|
||||
const { currentPassword, newPassword } = req.body as {
|
||||
currentPassword?: string;
|
||||
newPassword: string | null;
|
||||
};
|
||||
const userId = parseInt(id, 10);
|
||||
|
||||
if (!userId || isNaN(userId)) {
|
||||
return reply.code(400).send({ error: "Invalid user id" });
|
||||
}
|
||||
|
||||
const user = await userService.getUserById(userId);
|
||||
|
||||
if (!user) {
|
||||
return reply.code(404).send({ error: "User not found" });
|
||||
}
|
||||
|
||||
if (user.has_password) {
|
||||
if (!currentPassword) {
|
||||
return reply.code(401).send({ error: "Current password required" });
|
||||
}
|
||||
|
||||
const isValid = await userService.verifyPassword(userId, currentPassword);
|
||||
if (!isValid) {
|
||||
return reply.code(401).send({ error: "Current password is incorrect" });
|
||||
}
|
||||
}
|
||||
|
||||
await userService.updateUser(userId, { password: newPassword });
|
||||
|
||||
return reply.send({
|
||||
success: true,
|
||||
message: newPassword ? "Password updated successfully" : "Password removed successfully"
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Change Password Error:", err);
|
||||
return reply.code(500).send({ error: "Failed to change password" });
|
||||
}
|
||||
}
|
||||
@@ -1,186 +0,0 @@
|
||||
import {queryAll, queryOne, run} from '../../shared/database';
|
||||
import bcrypt from 'bcryptjs';
|
||||
|
||||
const USER_DB_NAME = 'userdata';
|
||||
const SALT_ROUNDS = 10;
|
||||
|
||||
interface User {
|
||||
id: number;
|
||||
username: string;
|
||||
profile_picture_url: string | null;
|
||||
has_password: boolean;
|
||||
}
|
||||
|
||||
export async function userExists(id: number): Promise<boolean> {
|
||||
const sql = 'SELECT 1 FROM User WHERE id = ?';
|
||||
const row = await queryOne(sql, [id], USER_DB_NAME);
|
||||
return !!row;
|
||||
}
|
||||
|
||||
export async function createUser(username: string, profilePictureUrl?: string, password?: string): Promise<{ lastID: number }> {
|
||||
let passwordHash = null;
|
||||
|
||||
if (password && password.trim()) {
|
||||
passwordHash = await bcrypt.hash(password.trim(), SALT_ROUNDS);
|
||||
}
|
||||
|
||||
const sql = `
|
||||
INSERT INTO User (username, profile_picture_url, password_hash)
|
||||
VALUES (?, ?, ?)
|
||||
`;
|
||||
const params = [username, profilePictureUrl || null, passwordHash];
|
||||
|
||||
const result = await run(sql, params, USER_DB_NAME);
|
||||
|
||||
return { lastID: result.lastID };
|
||||
}
|
||||
|
||||
export async function updateUser(userId: number, updates: any): Promise<any> {
|
||||
const fields: string[] = [];
|
||||
const values: (string | number | null)[] = [];
|
||||
|
||||
if (updates.username !== undefined) {
|
||||
fields.push('username = ?');
|
||||
values.push(updates.username);
|
||||
}
|
||||
|
||||
if (updates.profilePictureUrl !== undefined) {
|
||||
fields.push('profile_picture_url = ?');
|
||||
values.push(updates.profilePictureUrl);
|
||||
}
|
||||
|
||||
if (updates.password !== undefined) {
|
||||
if (updates.password === null || updates.password === '') {
|
||||
// Eliminar contraseña
|
||||
fields.push('password_hash = ?');
|
||||
values.push(null);
|
||||
} else {
|
||||
// Actualizar contraseña
|
||||
const hash = await bcrypt.hash(updates.password.trim(), SALT_ROUNDS);
|
||||
fields.push('password_hash = ?');
|
||||
values.push(hash);
|
||||
}
|
||||
}
|
||||
|
||||
if (fields.length === 0) {
|
||||
return { changes: 0, lastID: userId };
|
||||
}
|
||||
|
||||
const setClause = fields.join(', ');
|
||||
const sql = `UPDATE User SET ${setClause} WHERE id = ?`;
|
||||
values.push(userId);
|
||||
|
||||
return await run(sql, values, USER_DB_NAME);
|
||||
}
|
||||
|
||||
export async function deleteUser(userId: number): Promise<any> {
|
||||
await run(
|
||||
`DELETE FROM ListEntry WHERE user_id = ?`,
|
||||
[userId],
|
||||
USER_DB_NAME
|
||||
);
|
||||
|
||||
await run(
|
||||
`DELETE FROM UserIntegration WHERE user_id = ?`,
|
||||
[userId],
|
||||
USER_DB_NAME
|
||||
);
|
||||
|
||||
await run(
|
||||
`DELETE FROM favorites WHERE user_id = ?`,
|
||||
[userId],
|
||||
'favorites'
|
||||
);
|
||||
|
||||
const result = await run(
|
||||
`DELETE FROM User WHERE id = ?`,
|
||||
[userId],
|
||||
USER_DB_NAME
|
||||
);
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
export async function getAllUsers(): Promise<User[]> {
|
||||
const sql = `
|
||||
SELECT
|
||||
id,
|
||||
username,
|
||||
profile_picture_url,
|
||||
CASE WHEN password_hash IS NOT NULL THEN 1 ELSE 0 END as has_password
|
||||
FROM User
|
||||
ORDER BY id
|
||||
`;
|
||||
|
||||
const users = await queryAll(sql, [], USER_DB_NAME);
|
||||
|
||||
return users.map((user: any) => ({
|
||||
id: user.id,
|
||||
username: user.username,
|
||||
profile_picture_url: user.profile_picture_url || null,
|
||||
has_password: !!user.has_password
|
||||
})) as User[];
|
||||
}
|
||||
|
||||
export async function getUserById(id: number): Promise<User | null> {
|
||||
const sql = `
|
||||
SELECT
|
||||
id,
|
||||
username,
|
||||
profile_picture_url,
|
||||
CASE WHEN password_hash IS NOT NULL THEN 1 ELSE 0 END as has_password
|
||||
FROM User
|
||||
WHERE id = ?
|
||||
`;
|
||||
|
||||
const user = await queryOne(sql, [id], USER_DB_NAME);
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
return {
|
||||
id: user.id,
|
||||
username: user.username,
|
||||
profile_picture_url: user.profile_picture_url || null,
|
||||
has_password: !!user.has_password
|
||||
};
|
||||
}
|
||||
|
||||
export async function verifyPassword(userId: number, password: string): Promise<boolean> {
|
||||
const sql = 'SELECT password_hash FROM User WHERE id = ?';
|
||||
const user = await queryOne(sql, [userId], USER_DB_NAME);
|
||||
|
||||
if (!user || !user.password_hash) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return await bcrypt.compare(password, user.password_hash);
|
||||
}
|
||||
|
||||
export async function getAniListIntegration(userId: number) {
|
||||
const sql = `
|
||||
SELECT anilist_user_id, expires_at
|
||||
FROM UserIntegration
|
||||
WHERE user_id = ? AND platform = ?
|
||||
`;
|
||||
|
||||
const row = await queryOne(sql, [userId, "AniList"], USER_DB_NAME);
|
||||
|
||||
if (!row) {
|
||||
return { connected: false };
|
||||
}
|
||||
|
||||
return {
|
||||
connected: true,
|
||||
anilistUserId: row.anilist_user_id,
|
||||
expiresAt: row.expires_at
|
||||
};
|
||||
}
|
||||
|
||||
export async function removeAniListIntegration(userId: number) {
|
||||
const sql = `
|
||||
DELETE FROM UserIntegration
|
||||
WHERE user_id = ? AND platform = ?
|
||||
`;
|
||||
|
||||
return run(sql, [userId, "AniList"], USER_DB_NAME);
|
||||
}
|
||||
@@ -1,195 +0,0 @@
|
||||
let trendingAnimes = [];
|
||||
let currentHeroIndex = 0;
|
||||
let player;
|
||||
let heroInterval;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
SearchManager.init('#search-input', '#search-results', 'anime');
|
||||
ContinueWatchingManager.load('my-status', 'watching', 'ANIME');
|
||||
fetchContent();
|
||||
setInterval(() => fetchContent(true), 60000);
|
||||
});
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('.search-wrapper')) {
|
||||
const searchResults = document.getElementById('search-results');
|
||||
const searchInput = document.getElementById('search-input');
|
||||
searchResults.classList.remove('active');
|
||||
searchInput.style.borderRadius = '99px';
|
||||
}
|
||||
});
|
||||
|
||||
function scrollCarousel(id, direction) {
|
||||
const container = document.getElementById(id);
|
||||
if(container) {
|
||||
const scrollAmount = container.clientWidth * 0.75;
|
||||
container.scrollBy({ left: direction * scrollAmount, behavior: 'smooth' });
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
async function updateHeroUI(anime) {
|
||||
if(!anime) return;
|
||||
anime.entry_type = 'ANIME';
|
||||
|
||||
const title = anime.title.english || anime.title.romaji || "Unknown Title";
|
||||
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 addToListBtn = document.querySelector('.hero-buttons .btn-blur');
|
||||
if(addToListBtn) {
|
||||
ListModalManager.currentData = anime;
|
||||
const entryType = ListModalManager.getEntryType(anime);
|
||||
|
||||
await ListModalManager.checkIfInList(anime.id, 'anilist', entryType);
|
||||
ListModalManager.updateButton();
|
||||
|
||||
addToListBtn.onclick = () => ListModalManager.open(anime, 'anilist');
|
||||
}
|
||||
|
||||
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 = anime.title.english || anime.title.romaji || "Unknown Title";
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
function saveToList() {
|
||||
const animeId = ListModalManager.currentData ? ListModalManager.currentData.id : null;
|
||||
if (!animeId) return;
|
||||
ListModalManager.save(animeId, 'anilist');
|
||||
}
|
||||
|
||||
function deleteFromList() {
|
||||
const animeId = ListModalManager.currentData ? ListModalManager.currentData.id : null;
|
||||
if (!animeId) return;
|
||||
ListModalManager.delete(animeId, 'anilist');
|
||||
}
|
||||
|
||||
function closeAddToListModal() {
|
||||
ListModalManager.close();
|
||||
}
|
||||
@@ -1,408 +0,0 @@
|
||||
let animeData = null;
|
||||
let extensionName = null;
|
||||
|
||||
let animeId = null;
|
||||
let isLocal = false;
|
||||
|
||||
const episodePagination = Object.create(PaginationManager);
|
||||
episodePagination.init(50, renderEpisodes);
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadAnimeData();
|
||||
setupDescriptionModal();
|
||||
setupEpisodeSearch();
|
||||
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const initialEp = urlParams.get('episode');
|
||||
|
||||
if (initialEp) {
|
||||
setTimeout(() => {
|
||||
if (animeData) {
|
||||
|
||||
const source = isLocal ? 'local' : (extensionName || 'anilist');
|
||||
|
||||
if (typeof AnimePlayer !== 'undefined') {
|
||||
AnimePlayer.init(animeId, source, isLocal, animeData);
|
||||
AnimePlayer.playEpisode(parseInt(initialEp));
|
||||
}
|
||||
}
|
||||
}, 800);
|
||||
}
|
||||
});
|
||||
|
||||
async function loadAnimeData() {
|
||||
try {
|
||||
|
||||
const pathParts = window.location.pathname.split('/');
|
||||
|
||||
const cleanParts = pathParts.filter(p => p.length > 0);
|
||||
|
||||
if (cleanParts.length >= 3 && cleanParts[0] === 'anime') {
|
||||
|
||||
extensionName = cleanParts[1];
|
||||
animeId = cleanParts[2];
|
||||
} else if (cleanParts.length === 2 && cleanParts[0] === 'anime') {
|
||||
|
||||
extensionName = null;
|
||||
|
||||
animeId = cleanParts[1];
|
||||
} else {
|
||||
showError("Invalid URL Format");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const localRes = await fetch(`/api/library/anime/${animeId}`);
|
||||
if (localRes.ok) isLocal = true;
|
||||
} catch {}
|
||||
|
||||
const fetchUrl = extensionName
|
||||
? `/api/anime/${animeId}?source=${extensionName}`
|
||||
: `/api/anime/${animeId}?source=anilist`;
|
||||
|
||||
const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() });
|
||||
const data = await res.json();
|
||||
|
||||
if (data.error) {
|
||||
showError("Anime Not Found");
|
||||
return;
|
||||
}
|
||||
|
||||
animeData = data;
|
||||
animeData.entry_type = 'ANIME';
|
||||
|
||||
const metadata = MediaMetadataUtils.formatAnimeData(data, !!extensionName);
|
||||
|
||||
document.title = `${metadata.title} | WaifuBoard`;
|
||||
document.getElementById('title').innerText = metadata.title;
|
||||
if (metadata.poster) document.getElementById('poster').src = metadata.poster;
|
||||
|
||||
document.getElementById('score').innerText = `${metadata.score}% Score`;
|
||||
document.getElementById('year').innerText = metadata.year;
|
||||
document.getElementById('genres').innerText = metadata.genres.split(',').join(' • ');
|
||||
document.getElementById('format').innerText = metadata.format;
|
||||
document.getElementById('status').innerText = metadata.status;
|
||||
document.getElementById('season').innerText = metadata.season;
|
||||
document.getElementById('studio').innerText = metadata.studio;
|
||||
document.getElementById('episodes').innerText = `${metadata.episodes} Ep`;
|
||||
|
||||
updateLocalPill();
|
||||
updateDescription(data.description || data.summary);
|
||||
updateRelations(data.relations?.edges);
|
||||
updateCharacters(metadata.characters);
|
||||
updateRecommendations(data.recommendations?.nodes);
|
||||
|
||||
const source = isLocal ? 'local' : (extensionName || 'anilist');
|
||||
|
||||
if (typeof AnimePlayer !== 'undefined') {
|
||||
AnimePlayer.init(animeId, source, isLocal, animeData);
|
||||
}
|
||||
|
||||
YouTubePlayerUtils.init('trailer-player');
|
||||
YouTubePlayerUtils.playTrailer(metadata.trailer, 'trailer-player', metadata.banner);
|
||||
|
||||
const watchBtn = document.getElementById('watch-btn');
|
||||
if (watchBtn) {
|
||||
watchBtn.onclick = () => {
|
||||
if (typeof AnimePlayer !== 'undefined') AnimePlayer.playEpisode(1);
|
||||
};
|
||||
}
|
||||
|
||||
const total = metadata.episodes || 12;
|
||||
setupEpisodes(total);
|
||||
|
||||
setupAddToListButton();
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error loading anime details:', err);
|
||||
showError("Error loading anime");
|
||||
}
|
||||
}
|
||||
|
||||
function updateLocalPill() {
|
||||
if (isLocal) {
|
||||
const pill = document.getElementById('local-pill');
|
||||
if(pill) pill.style.display = 'inline-flex';
|
||||
}
|
||||
if (extensionName) {
|
||||
const pill = document.getElementById('extension-pill');
|
||||
if(pill) {
|
||||
pill.innerText = extensionName;
|
||||
pill.style.display = 'inline-flex';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateDescription(rawDescription) {
|
||||
const desc = MediaMetadataUtils.truncateDescription(rawDescription, 3);
|
||||
const previewEl = document.getElementById('description-preview');
|
||||
const fullEl = document.getElementById('full-description');
|
||||
|
||||
if (previewEl) {
|
||||
previewEl.innerHTML = desc.short +
|
||||
(desc.isTruncated ? ' <span onclick="openDescriptionModal()" style="color:white; cursor:pointer; font-weight:700; margin-left:5px;">Read more</span>' : '');
|
||||
}
|
||||
if (fullEl) fullEl.innerHTML = desc.full;
|
||||
}
|
||||
|
||||
function setupDescriptionModal() {
|
||||
const modal = document.getElementById('desc-modal');
|
||||
if (!modal) return;
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target.id === 'desc-modal') {
|
||||
closeDescriptionModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openDescriptionModal() {
|
||||
const modal = document.getElementById('desc-modal');
|
||||
if(modal) modal.classList.add('active');
|
||||
}
|
||||
|
||||
function closeDescriptionModal() {
|
||||
const modal = document.getElementById('desc-modal');
|
||||
if(modal) modal.classList.remove('active');
|
||||
}
|
||||
|
||||
function setupEpisodes(totalEpisodes) {
|
||||
const limitedTotal = Math.min(Math.max(totalEpisodes, 1), 5000);
|
||||
episodePagination.setTotalItems(limitedTotal);
|
||||
renderEpisodes();
|
||||
}
|
||||
|
||||
function renderEpisodes() {
|
||||
const grid = document.getElementById('episodes-grid');
|
||||
if (!grid) return;
|
||||
grid.innerHTML = '';
|
||||
|
||||
const range = episodePagination.getPageRange();
|
||||
const currentEp = (typeof AnimePlayer !== 'undefined') ? AnimePlayer.getCurrentEpisode() : 0;
|
||||
|
||||
for (let i = range.start + 1; i <= range.end; i++) {
|
||||
const btn = document.createElement('div');
|
||||
btn.className = 'episode-btn';
|
||||
if (currentEp === i) btn.classList.add('active-playing');
|
||||
|
||||
btn.innerText = i;
|
||||
|
||||
btn.onclick = () => {
|
||||
if (typeof AnimePlayer !== 'undefined') {
|
||||
AnimePlayer.playEpisode(i);
|
||||
renderEpisodes();
|
||||
}
|
||||
};
|
||||
grid.appendChild(btn);
|
||||
}
|
||||
|
||||
const totalItems = episodePagination.totalItems || 0;
|
||||
const itemsPerPage = episodePagination.itemsPerPage || 50;
|
||||
const safeTotalPages = Math.ceil(totalItems / itemsPerPage) || 1;
|
||||
|
||||
const info = document.getElementById('page-info');
|
||||
if(info) info.innerText = `Page ${episodePagination.currentPage} of ${safeTotalPages}`;
|
||||
|
||||
const prevBtn = document.getElementById('prev-page');
|
||||
const nextBtn = document.getElementById('next-page');
|
||||
|
||||
if(prevBtn) {
|
||||
prevBtn.disabled = episodePagination.currentPage === 1;
|
||||
prevBtn.onclick = () => { episodePagination.prevPage(); };
|
||||
}
|
||||
|
||||
if(nextBtn) {
|
||||
|
||||
nextBtn.disabled = episodePagination.currentPage >= safeTotalPages;
|
||||
nextBtn.onclick = () => { episodePagination.nextPage(); };
|
||||
}
|
||||
}
|
||||
|
||||
function setupEpisodeSearch() {
|
||||
const searchInput = document.getElementById('ep-search');
|
||||
if (!searchInput) return;
|
||||
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
const val = parseInt(e.target.value);
|
||||
const grid = document.getElementById('episodes-grid');
|
||||
const controls = document.getElementById('pagination-controls');
|
||||
|
||||
if (val > 0) {
|
||||
grid.innerHTML = '';
|
||||
const btn = document.createElement('div');
|
||||
btn.className = 'episode-btn';
|
||||
btn.innerText = `${val}`;
|
||||
btn.onclick = () => { if (typeof AnimePlayer !== 'undefined') AnimePlayer.playEpisode(val); };
|
||||
grid.appendChild(btn);
|
||||
if(controls) controls.style.display = 'none';
|
||||
} else if (!e.target.value) {
|
||||
if(controls) controls.style.display = 'flex';
|
||||
renderEpisodes();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateCharacters(characters) {
|
||||
const container = document.getElementById('char-list');
|
||||
if (!container) return;
|
||||
container.innerHTML = '';
|
||||
if (!characters || characters.length === 0) return;
|
||||
|
||||
characters.forEach((char, index) => {
|
||||
const img = char.node?.image?.large || char.image;
|
||||
const name = char.node?.name?.full || char.name;
|
||||
const role = char.role || 'Supporting';
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = `character-item ${index >= 12 ? 'hidden-char' : ''}`;
|
||||
card.style.display = index >= 12 ? 'none' : 'flex';
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="char-avatar"><img src="${img}" loading="lazy"></div>
|
||||
<div class="char-info"><div class="char-name">${name}</div><div class="char-role">${role}</div></div>
|
||||
`;
|
||||
container.appendChild(card);
|
||||
});
|
||||
|
||||
const showMoreBtn = document.getElementById('show-more-chars');
|
||||
if (showMoreBtn) {
|
||||
if (characters.length > 12) {
|
||||
showMoreBtn.style.display = 'block';
|
||||
showMoreBtn.onclick = () => {
|
||||
document.querySelectorAll('.hidden-char').forEach(el => el.style.display = 'flex');
|
||||
showMoreBtn.style.display = 'none';
|
||||
};
|
||||
} else {
|
||||
showMoreBtn.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateRelations(relations) {
|
||||
const container = document.getElementById('relations-grid');
|
||||
const section = document.getElementById('relations-section');
|
||||
|
||||
if (!container || !relations || relations.length === 0) {
|
||||
if (section) section.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
section.style.display = 'block';
|
||||
container.innerHTML = '';
|
||||
|
||||
const priorityMap = {
|
||||
'ADAPTATION': 1,
|
||||
'PREQUEL': 2,
|
||||
'SEQUEL': 3,
|
||||
'PARENT': 4,
|
||||
'SIDE_STORY': 5,
|
||||
'SPIN_OFF': 6,
|
||||
'ALTERNATIVE': 7,
|
||||
'CHARACTER': 8,
|
||||
'OTHER': 99
|
||||
};
|
||||
|
||||
relations.sort((a, b) => {
|
||||
const pA = priorityMap[a.relationType] || 50;
|
||||
const pB = priorityMap[b.relationType] || 50;
|
||||
return pA - pB;
|
||||
});
|
||||
|
||||
relations.forEach(rel => {
|
||||
const media = rel.node;
|
||||
if (!media) return;
|
||||
|
||||
const title = media.title?.romaji || media.title?.english || 'Unknown';
|
||||
const cover = media.coverImage?.large || media.coverImage?.medium || '';
|
||||
|
||||
const typeDisplay = rel.relationType ? rel.relationType.replace(/_/g, ' ') : 'RELATION';
|
||||
const rawType = rel.relationType;
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.className = 'relation-card-horizontal';
|
||||
|
||||
let targetUrl = null;
|
||||
|
||||
if (rawType === 'ADAPTATION') {
|
||||
targetUrl = `/book/${media.id}`;
|
||||
|
||||
} else if (media.type === 'ANIME' && rawType !== 'OTHER') {
|
||||
targetUrl = `/anime/${media.id}`;
|
||||
|
||||
}
|
||||
|
||||
if (targetUrl) {
|
||||
el.onclick = () => { window.location.href = targetUrl; };
|
||||
} else {
|
||||
el.classList.add('no-link');
|
||||
|
||||
el.onclick = null;
|
||||
}
|
||||
|
||||
el.innerHTML = `
|
||||
<img src="${cover}" class="rel-img" alt="${title}" onerror="this.src='/public/assets/placeholder.svg'">
|
||||
<div class="rel-info">
|
||||
<span class="rel-type">${typeDisplay}</span>
|
||||
<span class="rel-title">${title}</span>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(el);
|
||||
});
|
||||
}
|
||||
|
||||
function updateRecommendations(recommendations) {
|
||||
const container = document.getElementById('recommendations-grid');
|
||||
if (!container || !recommendations) return;
|
||||
container.innerHTML = '';
|
||||
|
||||
recommendations.forEach(rec => {
|
||||
const media = rec.mediaRecommendation;
|
||||
if (!media) return;
|
||||
|
||||
const title = media.title?.romaji || 'Unknown';
|
||||
const cover = media.coverImage?.large || media.coverImage?.medium || '';
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.className = 'card';
|
||||
|
||||
el.onclick = () => { window.location.href = `/anime/${media.id}`; };
|
||||
|
||||
el.innerHTML = `
|
||||
<div class="card-img-wrap"><img src="${cover}" loading="lazy" onerror="this.src='/public/assets/no-cover.jpg'"></div>
|
||||
<div class="card-content"><h3>${title}</h3></div>
|
||||
`;
|
||||
container.appendChild(el);
|
||||
});
|
||||
}
|
||||
|
||||
async function setupAddToListButton() {
|
||||
const btn = document.getElementById('add-to-list-btn');
|
||||
if (!btn || !animeData) return;
|
||||
|
||||
ListModalManager.currentData = animeData;
|
||||
const entryType = 'ANIME';
|
||||
await ListModalManager.checkIfInList(animeId, extensionName || 'anilist', entryType);
|
||||
updateCustomAddButton();
|
||||
btn.onclick = () => ListModalManager.open(animeData, extensionName || 'anilist');
|
||||
}
|
||||
|
||||
function updateCustomAddButton() {
|
||||
const btn = document.getElementById('add-to-list-btn');
|
||||
if (btn && ListModalManager.isInList) {
|
||||
btn.innerHTML = `✓ In Your List`;
|
||||
btn.style.background = 'rgba(34, 197, 94, 0.2)';
|
||||
btn.style.borderColor = '#22c55e';
|
||||
btn.style.color = '#22c55e';
|
||||
}
|
||||
}
|
||||
|
||||
function showError(msg) {
|
||||
const el = document.getElementById('title');
|
||||
if(el) el.innerText = msg;
|
||||
}
|
||||
|
||||
window.openDescriptionModal = openDescriptionModal;
|
||||
window.closeDescriptionModal = closeDescriptionModal;
|
||||
window.scrollRecommendations = (dir) => {
|
||||
const el = document.getElementById('recommendations-grid');
|
||||
if(el) el.scrollBy({ left: 240 * 3 * dir, behavior: 'smooth' });
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,152 +0,0 @@
|
||||
const BASE_PATH = '/src/scripts/jassub/';
|
||||
class SubtitleRenderer {
|
||||
constructor(video, canvas) {
|
||||
this.video = video;
|
||||
this.canvas = canvas;
|
||||
this.instance = null;
|
||||
this.currentUrl = null;
|
||||
}
|
||||
async init(subtitleUrl) {
|
||||
if (!this.video || !this.canvas) return;
|
||||
this.dispose();
|
||||
const finalUrl = subtitleUrl.includes('/api/proxy')
|
||||
? subtitleUrl
|
||||
: `/api/proxy?url=${encodeURIComponent(subtitleUrl)}`;
|
||||
this.currentUrl = finalUrl;
|
||||
try {
|
||||
this.instance = new JASSUB({
|
||||
video: this.video,
|
||||
canvas: this.canvas,
|
||||
subUrl: finalUrl,
|
||||
workerUrl: `${BASE_PATH}jassub-worker.js`,
|
||||
wasmUrl: `${BASE_PATH}jassub-worker.wasm`,
|
||||
modernWasmUrl: `${BASE_PATH}jassub-worker-modern.wasm`,
|
||||
blendMode: 'js',
|
||||
asyncRender: true,
|
||||
onDemand: true,
|
||||
targetFps: 60,
|
||||
debug: false
|
||||
});
|
||||
console.log('JASSUB initialized for:', finalUrl);
|
||||
} catch (e) {
|
||||
console.error("JASSUB Init Error:", e);
|
||||
}
|
||||
}
|
||||
resize() {
|
||||
if (this.instance && this.instance.resize) {
|
||||
this.instance.resize();
|
||||
}
|
||||
}
|
||||
setTrack(url) {
|
||||
const finalUrl = url.includes('/api/proxy')
|
||||
? url
|
||||
: `/api/proxy?url=${encodeURIComponent(url)}`;
|
||||
if (this.instance) {
|
||||
this.instance.setTrackByUrl(finalUrl);
|
||||
this.currentUrl = finalUrl;
|
||||
} else {
|
||||
this.init(url);
|
||||
}
|
||||
}
|
||||
dispose() {
|
||||
if (this.instance) {
|
||||
try {
|
||||
this.instance.destroy();
|
||||
} catch (e) {
|
||||
console.warn("Error destroying JASSUB:", e);
|
||||
}
|
||||
this.instance = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
class SimpleSubtitleRenderer {
|
||||
constructor(video, canvas) {
|
||||
this.video = video;
|
||||
this.canvas = canvas;
|
||||
this.ctx = canvas.getContext('2d');
|
||||
this.cues = [];
|
||||
this.destroyed = false;
|
||||
this.setupCanvas();
|
||||
this.video.addEventListener('timeupdate', () => this.render());
|
||||
}
|
||||
setupCanvas() {
|
||||
const updateSize = () => {
|
||||
if (!this.video || !this.canvas) return;
|
||||
const rect = this.video.getBoundingClientRect();
|
||||
this.canvas.width = rect.width;
|
||||
this.canvas.height = rect.height;
|
||||
};
|
||||
updateSize();
|
||||
window.addEventListener('resize', updateSize);
|
||||
this.resizeHandler = updateSize;
|
||||
}
|
||||
async loadSubtitles(url) {
|
||||
try {
|
||||
let finalUrl = url;
|
||||
const isLocal = url.startsWith('/');
|
||||
const isAlreadyProxied = url.includes('/api/proxy');
|
||||
if (!isLocal && !isAlreadyProxied && (url.startsWith('http:') || url.startsWith('https:'))) {
|
||||
finalUrl = `/api/proxy?url=${encodeURIComponent(url)}`;
|
||||
}
|
||||
console.log('Fetching subtitles from:', finalUrl);
|
||||
const response = await fetch(finalUrl);
|
||||
if (!response.ok) throw new Error(`Status: ${response.status}`);
|
||||
const text = await response.text();
|
||||
this.cues = this.parseSRT(text);
|
||||
} catch (error) {
|
||||
console.error('Failed to load subtitles:', error);
|
||||
}
|
||||
}
|
||||
setTrack(url) {
|
||||
this.cues = [];
|
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
this.loadSubtitles(url);
|
||||
}
|
||||
parseSRT(srtText) {
|
||||
const normalizedText = srtText.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
|
||||
const blocks = normalizedText.trim().split('\n\n');
|
||||
return blocks.map(block => {
|
||||
const lines = block.split('\n');
|
||||
if (lines.length < 3) return null;
|
||||
const timeMatch = lines[1].match(/(\d{2}):(\d{2}):(\d{2}),(\d{3}) --> (\d{2}):(\d{2}):(\d{2}),(\d{3})/);
|
||||
if (!timeMatch) return null;
|
||||
const start = parseInt(timeMatch[1]) * 3600 + parseInt(timeMatch[2]) * 60 + parseInt(timeMatch[3]) + parseInt(timeMatch[4]) / 1000;
|
||||
const end = parseInt(timeMatch[5]) * 3600 + parseInt(timeMatch[6]) * 60 + parseInt(timeMatch[7]) + parseInt(timeMatch[8]) / 1000;
|
||||
let text = lines.slice(2).join('\n');
|
||||
text = text.replace(/<[^>]*>/g, '');
|
||||
text = text.replace(/\{[^}]*\}/g, '');
|
||||
return { start, end, text };
|
||||
}).filter(Boolean);
|
||||
}
|
||||
render() {
|
||||
if (this.destroyed) return;
|
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
const currentTime = this.video.currentTime;
|
||||
const cue = this.cues.find(c => currentTime >= c.start && currentTime <= c.end);
|
||||
if (cue) this.drawSubtitle(cue.text);
|
||||
}
|
||||
drawSubtitle(text) {
|
||||
const lines = text.split('\n');
|
||||
const fontSize = Math.max(20, this.canvas.height * 0.04);
|
||||
this.ctx.font = `bold ${fontSize}px Arial, sans-serif`;
|
||||
this.ctx.textAlign = 'center';
|
||||
this.ctx.textBaseline = 'bottom';
|
||||
const lineHeight = fontSize * 1.2;
|
||||
const startY = this.canvas.height - 60;
|
||||
lines.reverse().forEach((line, index) => {
|
||||
const y = startY - (index * lineHeight);
|
||||
this.ctx.strokeStyle = 'black';
|
||||
this.ctx.lineWidth = 4;
|
||||
this.ctx.strokeText(line, this.canvas.width / 2, y);
|
||||
this.ctx.fillStyle = 'white';
|
||||
this.ctx.fillText(line, this.canvas.width / 2, y);
|
||||
});
|
||||
}
|
||||
dispose() {
|
||||
this.destroyed = true;
|
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
if (this.resizeHandler) window.removeEventListener('resize', this.resizeHandler);
|
||||
}
|
||||
}
|
||||
window.SubtitleRenderer = SubtitleRenderer;
|
||||
window.SimpleSubtitleRenderer = SimpleSubtitleRenderer;
|
||||
@@ -1,180 +0,0 @@
|
||||
;(() => {
|
||||
const token = localStorage.getItem("token")
|
||||
|
||||
if (!token && window.location.pathname !== "/") {
|
||||
window.location.href = "/"
|
||||
}
|
||||
})()
|
||||
|
||||
async function loadMeUI() {
|
||||
const token = localStorage.getItem("token")
|
||||
if (!token) return
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/me", {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
|
||||
if (!res.ok) return
|
||||
|
||||
const user = await res.json()
|
||||
|
||||
const navUser = document.getElementById("nav-user")
|
||||
const navUsername = document.getElementById("nav-username")
|
||||
const navAvatar = document.getElementById("nav-avatar")
|
||||
const dropdownAvatar = document.getElementById("dropdown-avatar")
|
||||
|
||||
if (!navUser || !navUsername || !navAvatar) return
|
||||
|
||||
navUser.style.display = "flex"
|
||||
navUsername.textContent = user.username
|
||||
|
||||
const avatarUrl = user.avatar || "/public/assets/avatar.png"
|
||||
navAvatar.src = avatarUrl
|
||||
if (dropdownAvatar) {
|
||||
dropdownAvatar.src = avatarUrl
|
||||
}
|
||||
|
||||
setupDropdown()
|
||||
} catch (e) {
|
||||
console.error("Failed to load user UI:", e)
|
||||
}
|
||||
}
|
||||
|
||||
// Variable para saber si el modal ya fue cargado
|
||||
let settingsModalLoaded = false;
|
||||
|
||||
document.getElementById('nav-settings').addEventListener('click', openSettings)
|
||||
|
||||
async function openSettings() {
|
||||
if (!settingsModalLoaded) {
|
||||
try {
|
||||
const res = await fetch('/views/components/settings-modal.html')
|
||||
const html = await res.text()
|
||||
document.body.insertAdjacentHTML('beforeend', html)
|
||||
settingsModalLoaded = true;
|
||||
|
||||
// Esperar un momento para que el DOM se actualice
|
||||
await new Promise(resolve => setTimeout(resolve, 50));
|
||||
|
||||
// Ahora cargar los settings
|
||||
if (window.toggleSettingsModal) {
|
||||
await window.toggleSettingsModal(false);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error loading settings modal:', err);
|
||||
}
|
||||
} else {
|
||||
if (window.toggleSettingsModal) {
|
||||
await window.toggleSettingsModal(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function closeSettings() {
|
||||
const modal = document.getElementById('settings-modal');
|
||||
if (modal) {
|
||||
modal.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
function setupDropdown() {
|
||||
const userAvatarBtn = document.querySelector(".user-avatar-btn")
|
||||
const navDropdown = document.getElementById("nav-dropdown")
|
||||
const navLogout = document.getElementById("nav-logout")
|
||||
|
||||
if (!userAvatarBtn || !navDropdown || !navLogout) return
|
||||
|
||||
userAvatarBtn.addEventListener("click", (e) => {
|
||||
e.stopPropagation()
|
||||
navDropdown.classList.toggle("active")
|
||||
})
|
||||
|
||||
document.addEventListener("click", (e) => {
|
||||
if (!navDropdown.contains(e.target)) {
|
||||
navDropdown.classList.remove("active")
|
||||
}
|
||||
})
|
||||
|
||||
navDropdown.addEventListener("click", (e) => {
|
||||
e.stopPropagation()
|
||||
})
|
||||
|
||||
navLogout.addEventListener("click", () => {
|
||||
localStorage.removeItem("token")
|
||||
window.location.href = "/"
|
||||
})
|
||||
|
||||
const dropdownLinks = navDropdown.querySelectorAll("a.dropdown-item")
|
||||
dropdownLinks.forEach((link) => {
|
||||
link.addEventListener("click", () => {
|
||||
navDropdown.classList.remove("active")
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
loadMeUI()
|
||||
|
||||
const mobileToggle = document.getElementById('mobile-menu-toggle');
|
||||
const navCenter = document.querySelector('.nav-center');
|
||||
|
||||
let overlay = document.querySelector('.menu-overlay');
|
||||
if (!overlay) {
|
||||
overlay = document.createElement('div');
|
||||
overlay.className = 'menu-overlay';
|
||||
document.body.appendChild(overlay);
|
||||
}
|
||||
|
||||
function toggleMenu() {
|
||||
navCenter.classList.toggle('open');
|
||||
overlay.classList.toggle('active');
|
||||
|
||||
const isOpen = navCenter.classList.contains('open');
|
||||
mobileToggle.innerHTML = isOpen
|
||||
? '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>'
|
||||
: '<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/></svg>';
|
||||
}
|
||||
|
||||
mobileToggle.addEventListener('click', toggleMenu);
|
||||
|
||||
overlay.addEventListener('click', () => {
|
||||
if (navCenter.classList.contains('open')) toggleMenu();
|
||||
});
|
||||
|
||||
navCenter.querySelectorAll('.nav-button').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
if (navCenter.classList.contains('open')) toggleMenu();
|
||||
});
|
||||
});
|
||||
|
||||
const searchWrapper = document.querySelector('.search-wrapper');
|
||||
const searchInput = document.getElementById('search-input');
|
||||
|
||||
searchWrapper.addEventListener('click', (e) => {
|
||||
if (window.innerWidth <= 768) {
|
||||
searchWrapper.classList.add('active-mobile');
|
||||
searchInput.focus();
|
||||
}
|
||||
});
|
||||
|
||||
// Cerrar el buscador si se hace clic fuera
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!searchWrapper.contains(e.target)) {
|
||||
searchWrapper.classList.remove('active-mobile');
|
||||
}
|
||||
});
|
||||
|
||||
const createRoomModal = new CreateRoomModal();
|
||||
|
||||
const createBtn = document.getElementById('nav-create-party');
|
||||
if (createBtn) {
|
||||
createBtn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const dropdown = document.getElementById('nav-dropdown');
|
||||
if(dropdown) dropdown.classList.remove('active');
|
||||
|
||||
createRoomModal.open();
|
||||
});
|
||||
}
|
||||
@@ -1,655 +0,0 @@
|
||||
let bookData = null;
|
||||
let extensionName = null;
|
||||
let bookId = null;
|
||||
let bookSlug = null;
|
||||
|
||||
let allChapters = [];
|
||||
let filteredChapters = [];
|
||||
let availableExtensions = [];
|
||||
let isLocal = false;
|
||||
|
||||
let currentLanguage = null;
|
||||
let uniqueLanguages = [];
|
||||
let isSortAscending = true;
|
||||
let manualExtensionBookId = null;
|
||||
|
||||
const chapterPagination = Object.create(PaginationManager);
|
||||
chapterPagination.init(6, () => renderChapterList());
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
init();
|
||||
setupModalClickOutside();
|
||||
document.getElementById('sort-btn')?.addEventListener('click', toggleSortOrder);
|
||||
});
|
||||
|
||||
async function init() {
|
||||
try {
|
||||
const urlData = URLUtils.parseEntityPath('book');
|
||||
if (!urlData) { showError("Book Not Found"); return; }
|
||||
|
||||
extensionName = urlData.extensionName;
|
||||
bookId = urlData.entityId;
|
||||
bookSlug = urlData.slug;
|
||||
|
||||
await loadBookMetadata();
|
||||
await checkLocalLibraryEntry();
|
||||
await loadAvailableExtensions();
|
||||
await loadChapters();
|
||||
await setupAddToListButton();
|
||||
|
||||
document.getElementById('manual-match-btn')?.addEventListener('click', () => {
|
||||
const select = document.getElementById('provider-filter');
|
||||
const provider = select.value;
|
||||
|
||||
// Obtener título para prellenar
|
||||
const currentTitle = bookData?.title?.romaji || bookData?.title?.english || '';
|
||||
|
||||
MatchModal.open({
|
||||
provider: provider,
|
||||
initialQuery: currentTitle,
|
||||
// Define CÓMO buscar
|
||||
onSearch: async (query, prov) => {
|
||||
const res = await fetch(`/api/search/books/${prov}?q=${encodeURIComponent(query)}`);
|
||||
const data = await res.json();
|
||||
return data.results || [];
|
||||
},
|
||||
// Define QUÉ hacer al seleccionar
|
||||
onSelect: (item) => {
|
||||
console.log("Selected Book ID:", item.id);
|
||||
manualExtensionBookId = item.id;
|
||||
|
||||
// Lógica existente de tu book.js para recargar caps
|
||||
loadChapters(provider);
|
||||
|
||||
// Feedback visual en el botón
|
||||
const btn = document.getElementById('manual-match-btn');
|
||||
if(btn) btn.style.color = '#22c55e';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
} catch (err) {
|
||||
console.error("Init Error:", err);
|
||||
showError("Error loading book");
|
||||
}
|
||||
}
|
||||
|
||||
async function loadBookMetadata() {
|
||||
const source = extensionName || 'anilist';
|
||||
const fetchUrl = `/api/book/${bookId}?source=${source}`;
|
||||
|
||||
try {
|
||||
const res = await fetch(fetchUrl);
|
||||
const data = await res.json();
|
||||
|
||||
if (data.error || !data) { showError("Book Not Found"); return; }
|
||||
|
||||
const raw = Array.isArray(data) ? data[0] : data;
|
||||
bookData = raw;
|
||||
|
||||
const metadata = MediaMetadataUtils.formatBookData(raw, !!extensionName);
|
||||
bookData.entry_type = metadata.format === 'MANGA' ? 'MANGA' : 'NOVEL';
|
||||
|
||||
updatePageTitle(metadata.title);
|
||||
updateMetadata(metadata, raw);
|
||||
updateExtensionPill();
|
||||
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
showError("Error loading metadata");
|
||||
}
|
||||
}
|
||||
|
||||
function updatePageTitle(title) {
|
||||
document.title = `${title} | WaifuBoard Books`;
|
||||
const titleEl = document.getElementById('title');
|
||||
if (titleEl) titleEl.innerText = title;
|
||||
}
|
||||
|
||||
function updateMetadata(metadata, rawData) {
|
||||
// 1. Cabecera (Score, Año, Status, Formato, Caps)
|
||||
const elements = {
|
||||
'description': metadata.description,
|
||||
'published-date': metadata.year,
|
||||
'status': metadata.status,
|
||||
'format': metadata.format,
|
||||
'chapters-count': metadata.chapters ? `${metadata.chapters} Ch` : '?? Ch',
|
||||
'genres': metadata.genres ? metadata.genres.replace(/,/g, ' • ') : '',
|
||||
'poster': metadata.poster,
|
||||
'hero-bg': metadata.banner
|
||||
};
|
||||
|
||||
if(document.getElementById('description')) document.getElementById('description').innerHTML = metadata.description;
|
||||
if(document.getElementById('poster')) document.getElementById('poster').src = metadata.poster;
|
||||
if(document.getElementById('hero-bg')) document.getElementById('hero-bg').src = metadata.banner;
|
||||
|
||||
['published-date','status','format','chapters-count','genres'].forEach(id => {
|
||||
const el = document.getElementById(id);
|
||||
if(el) el.innerText = elements[id];
|
||||
});
|
||||
|
||||
const scoreEl = document.getElementById('score');
|
||||
if (scoreEl) scoreEl.innerText = extensionName ? `${metadata.score}` : `${metadata.score}% Score`;
|
||||
|
||||
// 2. Sidebar: Sinónimos (Para llenar espacio vacío)
|
||||
if (rawData.synonyms && rawData.synonyms.length > 0) {
|
||||
const sidebarInfo = document.getElementById('sidebar-info');
|
||||
const list = document.getElementById('synonyms-list');
|
||||
if (sidebarInfo && list) {
|
||||
sidebarInfo.style.display = 'block';
|
||||
list.innerHTML = '';
|
||||
// Mostrar máx 5 sinónimos para no alargar demasiado
|
||||
rawData.synonyms.slice(0, 5).forEach(syn => {
|
||||
const li = document.createElement('li');
|
||||
li.innerText = syn;
|
||||
list.appendChild(li);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Renderizar Personajes
|
||||
if (rawData.characters && rawData.characters.nodes && rawData.characters.nodes.length > 0) {
|
||||
renderCharacters(rawData.characters.nodes);
|
||||
}
|
||||
|
||||
// 4. Renderizar Relaciones
|
||||
if (rawData.relations && rawData.relations.edges && rawData.relations.edges.length > 0) {
|
||||
renderRelations(rawData.relations.edges);
|
||||
}
|
||||
}
|
||||
|
||||
function renderCharacters(nodes) {
|
||||
const container = document.getElementById('characters-list');
|
||||
if(!container) return;
|
||||
container.innerHTML = '';
|
||||
|
||||
nodes.forEach(char => {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'character-item';
|
||||
|
||||
const img = char.image?.large || char.image?.medium || '/public/assets/no-image.png';
|
||||
const name = char.name?.full || 'Unknown';
|
||||
const role = char.role || 'Supporting';
|
||||
|
||||
el.innerHTML = `
|
||||
<div class="char-avatar"><img src="${img}" loading="lazy"></div>
|
||||
<div class="char-info">
|
||||
<div class="char-name">${name}</div>
|
||||
<div class="char-role">${role}</div>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(el);
|
||||
});
|
||||
}
|
||||
|
||||
function renderRelations(edges) {
|
||||
const container = document.getElementById('relations-list');
|
||||
const section = document.getElementById('relations-section');
|
||||
if(!container || !section) return;
|
||||
|
||||
if (!edges || edges.length === 0) {
|
||||
section.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
section.style.display = 'block';
|
||||
container.innerHTML = '';
|
||||
|
||||
edges.forEach(edge => {
|
||||
const node = edge.node;
|
||||
if (!node) return;
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.className = 'relation-card-horizontal';
|
||||
|
||||
const img = node.coverImage?.large || node.coverImage?.medium || '/public/assets/placeholder.svg';
|
||||
const title = node.title?.romaji || node.title?.english || node.title?.native || 'Unknown';
|
||||
const type = edge.relationType ? edge.relationType.replace(/_/g, ' ') : 'Related';
|
||||
|
||||
el.innerHTML = `
|
||||
<img src="${img}" class="rel-img" alt="${title}" loading="lazy">
|
||||
<div class="rel-info">
|
||||
<span class="rel-type">${type}</span>
|
||||
<span class="rel-title">${title}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
el.onclick = () => {
|
||||
const imgUrl = node.coverImage?.medium || '';
|
||||
const targetType = imgUrl.includes('/manga/') ? 'book' : 'anime';
|
||||
window.location.href = `/${targetType}/${node.id}`;
|
||||
};
|
||||
|
||||
container.appendChild(el);
|
||||
});
|
||||
}
|
||||
|
||||
function processChaptersData(chaptersData) {
|
||||
allChapters = chaptersData;
|
||||
const langSet = new Set(allChapters.map(ch => ch.language).filter(l => l));
|
||||
uniqueLanguages = Array.from(langSet);
|
||||
setupLanguageSelector();
|
||||
filterAndRenderChapters();
|
||||
setupReadButton();
|
||||
}
|
||||
|
||||
function buildProxyUrl(url, headers = {}) {
|
||||
const origin = window.location.origin;
|
||||
|
||||
const params = new URLSearchParams({ url });
|
||||
if (headers.Referer || headers.referer)
|
||||
params.append("referer", headers.Referer || headers.referer);
|
||||
if (headers["User-Agent"] || headers["user-agent"])
|
||||
params.append("userAgent", headers["User-Agent"] || headers["user-agent"]);
|
||||
if (headers.Origin || headers.origin)
|
||||
params.append("origin", headers.Origin || headers.origin);
|
||||
|
||||
return `${origin}/api/proxy?${params.toString()}`;
|
||||
}
|
||||
|
||||
async function downloadChapter(chapterId, chapterNumber, provider, btnElement) {
|
||||
// Validamos que tengamos bookId y un provider válido
|
||||
if (!bookId || !provider) return showError("Error: Faltan datos del capítulo");
|
||||
|
||||
// Feedback visual
|
||||
const originalText = btnElement.innerHTML;
|
||||
btnElement.innerHTML = `<span class="spinner">↻</span>`; // Spinner pequeño
|
||||
btnElement.disabled = true;
|
||||
|
||||
try {
|
||||
// 1. OBTENER CONTENIDO USANDO EL PROVIDER DEL CAPÍTULO
|
||||
// CAMBIO AQUÍ: Usamos 'provider' en lugar de 'extensionName'
|
||||
const fetchUrl = `/api/book/${bookId}/${chapterId}/${provider}?source=${extensionName || 'anilist'}&lang=none`;
|
||||
|
||||
const contentRes = await fetch(fetchUrl);
|
||||
|
||||
if (!contentRes.ok) throw new Error("Error obteniendo contenido del capítulo");
|
||||
const chapterData = await contentRes.json();
|
||||
|
||||
// 2. PREPARAR BODY (Misma lógica)
|
||||
let payload = {
|
||||
anilist_id: parseInt(bookId),
|
||||
chapter_number: parseFloat(chapterNumber),
|
||||
format: "",
|
||||
};
|
||||
|
||||
if (chapterData.pages && Array.isArray(chapterData.pages)) {
|
||||
payload.format = "manga";
|
||||
payload.images = chapterData.pages.map((img, index) => {
|
||||
let finalUrl = img.url;
|
||||
if (img.headers && Object.keys(img.headers).length > 0) {
|
||||
finalUrl = buildProxyUrl(img.url, img.headers);
|
||||
}
|
||||
return { index: index, url: finalUrl };
|
||||
});
|
||||
}
|
||||
else if (chapterData.content) {
|
||||
payload.format = "novel";
|
||||
payload.content = chapterData.content;
|
||||
} else {
|
||||
throw new Error("Formato desconocido");
|
||||
}
|
||||
|
||||
const downloadRes = await fetch('/api/library/download/book', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
const downloadData = await downloadRes.json();
|
||||
|
||||
if (downloadRes.status === 200) {
|
||||
btnElement.innerHTML = "✓";
|
||||
btnElement.style.color = "#22c55e"; // Icono verde
|
||||
} else if (downloadRes.status === 409) {
|
||||
btnElement.innerHTML = "✓";
|
||||
btnElement.style.color = "#3b82f6"; // Icono azul (ya existe)
|
||||
} else {
|
||||
throw new Error(downloadData.message || "Error");
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.error("Download Error:", err);
|
||||
btnElement.innerHTML = "✕"; // X roja
|
||||
btnElement.style.color = "#ef4444";
|
||||
btnElement.disabled = false;
|
||||
|
||||
// Restaurar icono original después de 3 seg
|
||||
setTimeout(() => {
|
||||
btnElement.innerHTML = originalText;
|
||||
btnElement.style.color = "";
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadChapters(targetProvider = null) {
|
||||
const listContainer = document.getElementById('chapters-list');
|
||||
const loadingMsg = document.getElementById('loading-msg');
|
||||
|
||||
if(listContainer) listContainer.innerHTML = '';
|
||||
if(loadingMsg) loadingMsg.style.display = 'block';
|
||||
|
||||
if (!targetProvider) {
|
||||
const select = document.getElementById('provider-filter');
|
||||
targetProvider = select ? select.value : (availableExtensions[0] || 'all');
|
||||
}
|
||||
|
||||
try {
|
||||
let fetchUrl;
|
||||
let isLocalRequest = targetProvider === 'local';
|
||||
|
||||
if (isLocalRequest) {
|
||||
fetchUrl = `/api/library/${bookId}/units`;
|
||||
} else {
|
||||
const source = extensionName || 'anilist';
|
||||
fetchUrl = `/api/book/${bookId}/chapters?source=${source}`;
|
||||
if (targetProvider !== 'all') fetchUrl += `&provider=${targetProvider}`;
|
||||
if (manualExtensionBookId && targetProvider !== 'all') {
|
||||
fetchUrl += `&extensionBookId=${manualExtensionBookId}`;
|
||||
}
|
||||
}
|
||||
|
||||
const res = await fetch(fetchUrl);
|
||||
const data = await res.json();
|
||||
|
||||
if(loadingMsg) loadingMsg.style.display = 'none';
|
||||
|
||||
let rawData = [];
|
||||
if (isLocalRequest) {
|
||||
rawData = (data.units || []).map((unit, idx) => ({
|
||||
id: unit.id || idx, number: unit.number, title: unit.name,
|
||||
provider: 'local', index: idx, format: unit.format, language: 'local'
|
||||
}));
|
||||
} else {
|
||||
rawData = data.chapters || [];
|
||||
}
|
||||
processChaptersData(rawData);
|
||||
|
||||
} catch (err) {
|
||||
if(loadingMsg) loadingMsg.style.display = 'none';
|
||||
if(listContainer) listContainer.innerHTML = '<div style="text-align:center; color: #ef4444;">Error loading chapters.</div>';
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
function setupLanguageSelector() {
|
||||
const selectorContainer = document.getElementById('language-selector-container');
|
||||
const select = document.getElementById('language-select');
|
||||
if (!selectorContainer || !select) return;
|
||||
|
||||
if (uniqueLanguages.length <= 1) {
|
||||
selectorContainer.classList.add('hidden');
|
||||
currentLanguage = uniqueLanguages[0] || null;
|
||||
return;
|
||||
}
|
||||
selectorContainer.classList.remove('hidden');
|
||||
select.innerHTML = '';
|
||||
|
||||
const langNames = { 'es': 'Español', 'es-419': 'Latino', 'en': 'English', 'pt-br': 'Português', 'ja': '日本語' };
|
||||
|
||||
uniqueLanguages.forEach(lang => {
|
||||
const option = document.createElement('option');
|
||||
option.value = lang;
|
||||
option.textContent = langNames[lang] || lang.toUpperCase();
|
||||
select.appendChild(option);
|
||||
});
|
||||
|
||||
if (uniqueLanguages.includes('es-419')) currentLanguage = 'es-419';
|
||||
else if (uniqueLanguages.includes('es')) currentLanguage = 'es';
|
||||
else currentLanguage = uniqueLanguages[0];
|
||||
select.value = currentLanguage;
|
||||
|
||||
select.onchange = (e) => {
|
||||
currentLanguage = e.target.value;
|
||||
chapterPagination.currentPage = 1;
|
||||
filterAndRenderChapters();
|
||||
};
|
||||
}
|
||||
|
||||
function filterAndRenderChapters() {
|
||||
let tempChapters = [...allChapters];
|
||||
if (currentLanguage && uniqueLanguages.length > 1) {
|
||||
tempChapters = tempChapters.filter(ch => ch.language === currentLanguage);
|
||||
}
|
||||
const searchQuery = document.getElementById('chapter-search')?.value.toLowerCase();
|
||||
if(searchQuery){
|
||||
tempChapters = tempChapters.filter(ch =>
|
||||
(ch.title && ch.title.toLowerCase().includes(searchQuery)) ||
|
||||
(ch.number && ch.number.toString().includes(searchQuery))
|
||||
);
|
||||
}
|
||||
tempChapters.sort((a, b) => {
|
||||
const numA = parseFloat(a.number) || 0;
|
||||
const numB = parseFloat(b.number) || 0;
|
||||
return isSortAscending ? numA - numB : numB - numA;
|
||||
});
|
||||
filteredChapters = tempChapters;
|
||||
chapterPagination.setTotalItems(filteredChapters.length);
|
||||
renderChapterList();
|
||||
}
|
||||
|
||||
function renderChapterList() {
|
||||
const container = document.getElementById('chapters-list');
|
||||
if(!container) return;
|
||||
container.innerHTML = '';
|
||||
const itemsToShow = chapterPagination.getCurrentPageItems(filteredChapters);
|
||||
|
||||
if (itemsToShow.length === 0) {
|
||||
container.innerHTML = '<div style="text-align:center; padding:2rem; color:#888;">No chapters found.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
itemsToShow.forEach(chapter => {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'chapter-item';
|
||||
|
||||
// El clic principal abre el lector
|
||||
el.onclick = () => openReader(chapter.id, chapter.provider);
|
||||
|
||||
const dateStr = chapter.date ? new Date(chapter.date).toLocaleDateString() : '';
|
||||
const providerLabel = chapter.provider !== 'local' ? chapter.provider : '';
|
||||
|
||||
// Definimos el icono SVG de descarga para no ensuciar tanto el template string
|
||||
const downloadIcon = `
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||||
<polyline points="7 10 12 15 17 10"></polyline>
|
||||
<line x1="12" y1="15" x2="12" y2="3"></line>
|
||||
</svg>`;
|
||||
|
||||
const isLocal = chapter.provider === 'local';
|
||||
const downloadBtnStyle = isLocal ? 'display:none;' : '';
|
||||
|
||||
el.innerHTML = `
|
||||
<div class="chapter-info">
|
||||
<span class="chapter-number">Chapter ${chapter.number}</span>
|
||||
<span class="chapter-title">${chapter.title || ''}</span>
|
||||
</div>
|
||||
|
||||
<div class="chapter-actions" style="display: flex; align-items: center; gap: 10px;">
|
||||
<div class="chapter-meta">
|
||||
${providerLabel ? `<span class="lang-tag">${providerLabel}</span>` : ''}
|
||||
${dateStr ? `<span>${dateStr}</span>` : ''}
|
||||
</div>
|
||||
|
||||
<button class="download-btn"
|
||||
style="${downloadBtnStyle}"
|
||||
onclick="event.stopPropagation(); downloadChapter('${chapter.id}', '${chapter.number}', '${chapter.provider}', this)"
|
||||
title="Descargar">
|
||||
${downloadIcon}
|
||||
</button>
|
||||
|
||||
<svg class="chapter-play-icon" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5v14l11-7z"/>
|
||||
</svg>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(el);
|
||||
});
|
||||
|
||||
chapterPagination.renderControls('pagination', 'page-info', 'prev-page', 'next-page');
|
||||
}
|
||||
|
||||
function toggleSortOrder() {
|
||||
isSortAscending = !isSortAscending;
|
||||
const btn = document.getElementById('sort-btn');
|
||||
if(btn) btn.style.transform = isSortAscending ? 'rotate(180deg)' : 'rotate(0deg)';
|
||||
filterAndRenderChapters();
|
||||
}
|
||||
|
||||
function setupReadButton() {
|
||||
const readBtn = document.getElementById('read-start-btn');
|
||||
if (!readBtn || allChapters.length === 0) return;
|
||||
const firstChapter = [...allChapters].sort((a,b) => a.index - b.index)[0];
|
||||
if (firstChapter) readBtn.onclick = () =>
|
||||
openReader(firstChapter.index ?? firstChapter.id, firstChapter.provider);
|
||||
|
||||
}
|
||||
|
||||
function openReader(chapterIndexOrId, provider) {
|
||||
const lang = currentLanguage ?? 'none';
|
||||
window.location.href =
|
||||
URLUtils.buildReadUrl(bookId, chapterIndexOrId, provider, extensionName || 'anilist')
|
||||
+ `?lang=${lang}`;
|
||||
}
|
||||
|
||||
async function checkLocalLibraryEntry() {
|
||||
try {
|
||||
const libraryType = bookData?.entry_type === 'NOVEL' ? 'novels' : 'manga';
|
||||
const res = await fetch(`/api/library/${libraryType}/${bookId}`);
|
||||
if (!res.ok) return;
|
||||
const data = await res.json();
|
||||
if (data.matched) {
|
||||
isLocal = true;
|
||||
const pill = document.getElementById('local-pill');
|
||||
if (pill) {
|
||||
pill.textContent = 'Local';
|
||||
pill.style.display = 'inline-flex';
|
||||
pill.style.background = 'rgba(34, 197, 94, 0.2)';
|
||||
pill.style.color = '#22c55e';
|
||||
pill.style.borderColor = 'rgba(34, 197, 94, 0.3)';
|
||||
}
|
||||
}
|
||||
} catch (e) { console.error("Error checking local:", e); }
|
||||
}
|
||||
|
||||
async function loadAvailableExtensions() {
|
||||
try {
|
||||
if (!bookData?.entry_type) return;
|
||||
console.log(bookData.entry_type)
|
||||
|
||||
const type = bookData.entry_type === 'MANGA' ? 'manga' : 'novel';
|
||||
const res = await fetch(`/api/extensions/${type}`);
|
||||
const data = await res.json();
|
||||
|
||||
availableExtensions = data.extensions || [];
|
||||
setupProviderFilter();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
function setupProviderFilter() {
|
||||
const select = document.getElementById('provider-filter');
|
||||
const manualBtn = document.getElementById('manual-match-btn'); // NUEVO
|
||||
|
||||
if (!select) return;
|
||||
select.style.display = 'inline-block';
|
||||
select.innerHTML = '';
|
||||
|
||||
const allOpt = document.createElement('option');
|
||||
allOpt.value = 'all';
|
||||
allOpt.innerText = 'All Providers';
|
||||
select.appendChild(allOpt);
|
||||
|
||||
if (isLocal) {
|
||||
const localOpt = document.createElement('option');
|
||||
localOpt.value = 'local';
|
||||
localOpt.innerText = 'Local';
|
||||
select.appendChild(localOpt);
|
||||
}
|
||||
|
||||
availableExtensions.forEach(ext => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = ext;
|
||||
opt.innerText = ext.charAt(0).toUpperCase() + ext.slice(1);
|
||||
select.appendChild(opt);
|
||||
});
|
||||
|
||||
// Lógica de selección inicial
|
||||
if (isLocal) select.value = 'local';
|
||||
else if (extensionName && availableExtensions.includes(extensionName)) select.value = extensionName;
|
||||
else if (availableExtensions.length > 0) select.value = availableExtensions[0];
|
||||
|
||||
// Visibilidad inicial del botón manual
|
||||
updateManualButtonVisibility(select.value);
|
||||
|
||||
select.onchange = () => {
|
||||
// Al cambiar de proveedor, reseteamos la selección manual para evitar conflictos
|
||||
manualExtensionBookId = null;
|
||||
updateManualButtonVisibility(select.value);
|
||||
loadChapters(select.value);
|
||||
};
|
||||
}
|
||||
|
||||
function updateManualButtonVisibility(provider) {
|
||||
const btn = document.getElementById('manual-match-btn');
|
||||
if (!btn) return;
|
||||
|
||||
// Solo mostrar si es un proveedor específico (no 'all' ni 'local')
|
||||
if (provider !== 'all' && provider !== 'local') {
|
||||
btn.style.display = 'flex';
|
||||
} else {
|
||||
btn.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function updateExtensionPill() {
|
||||
const pill = document.getElementById('extension-pill');
|
||||
if(pill && extensionName) { pill.innerText = extensionName; pill.style.display = 'inline-flex'; }
|
||||
}
|
||||
|
||||
async function setupAddToListButton() {
|
||||
const btn = document.getElementById('add-to-list-btn');
|
||||
if (!btn || !bookData) return;
|
||||
ListModalManager.currentData = bookData;
|
||||
const entryType = ListModalManager.getEntryType(bookData);
|
||||
const idForCheck = extensionName ? bookSlug : bookId;
|
||||
await ListModalManager.checkIfInList(idForCheck, extensionName || 'anilist', entryType);
|
||||
updateCustomAddButton();
|
||||
btn.onclick = () => ListModalManager.open(bookData, extensionName || 'anilist');
|
||||
}
|
||||
|
||||
function updateCustomAddButton() {
|
||||
const btn = document.getElementById('add-to-list-btn');
|
||||
if(btn && ListModalManager.isInList) {
|
||||
btn.innerHTML = '✓ In Your List'; btn.style.background = 'rgba(34, 197, 94, 0.2)'; btn.style.color = '#22c55e'; btn.style.borderColor = '#22c55e';
|
||||
}
|
||||
}
|
||||
|
||||
function setupModalClickOutside() {
|
||||
const addListModal = document.getElementById('add-list-modal');
|
||||
if (addListModal) {
|
||||
addListModal.addEventListener('click', (e) => {
|
||||
if (e.target.id === 'add-list-modal') ListModalManager.close();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
const titleEl = document.getElementById('title');
|
||||
if (titleEl) titleEl.innerText = message;
|
||||
}
|
||||
|
||||
// Exports
|
||||
window.openReader = openReader;
|
||||
window.saveToList = () => {
|
||||
const idToSave = extensionName ? bookSlug : bookId;
|
||||
ListModalManager.save(idToSave, extensionName || 'anilist');
|
||||
};
|
||||
window.deleteFromList = () => {
|
||||
const idToDelete = extensionName ? bookSlug : bookId;
|
||||
ListModalManager.delete(idToDelete, extensionName || 'anilist');
|
||||
};
|
||||
window.closeAddToListModal = () => ListModalManager.close();
|
||||
window.openAddToListModal = () => ListModalManager.open(bookData, extensionName || 'anilist');
|
||||
@@ -1,135 +0,0 @@
|
||||
let trendingBooks = [];
|
||||
let currentHeroIndex = 0;
|
||||
let heroInterval;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
SearchManager.init('#search-input', '#search-results', 'book');
|
||||
ContinueWatchingManager.load('my-status-books', 'reading', 'MANGA');
|
||||
init();
|
||||
});
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const nav = document.getElementById('navbar');
|
||||
if (window.scrollY > 50) nav.classList.add('scrolled');
|
||||
else nav.classList.remove('scrolled');
|
||||
});
|
||||
|
||||
function scrollCarousel(id, direction) {
|
||||
const container = document.getElementById(id);
|
||||
if(container) {
|
||||
const scrollAmount = container.clientWidth * 0.75;
|
||||
container.scrollBy({ left: direction * scrollAmount, behavior: 'smooth' });
|
||||
}
|
||||
}
|
||||
|
||||
async function init() {
|
||||
try {
|
||||
const res = await fetch('/api/books/trending');
|
||||
const data = await res.json();
|
||||
|
||||
if (data.results && data.results.length > 0) {
|
||||
trendingBooks = data.results;
|
||||
updateHeroUI(trendingBooks[0]);
|
||||
renderList('trending', trendingBooks);
|
||||
startHeroCycle();
|
||||
}
|
||||
|
||||
const resPop = await fetch('/api/books/popular');
|
||||
const dataPop = await resPop.json();
|
||||
if (dataPop.results) renderList('popular', dataPop.results);
|
||||
|
||||
} catch (e) {
|
||||
console.error("Books Error:", e);
|
||||
}
|
||||
}
|
||||
|
||||
function startHeroCycle() {
|
||||
if(heroInterval) clearInterval(heroInterval);
|
||||
heroInterval = setInterval(() => {
|
||||
if(trendingBooks.length > 0) {
|
||||
currentHeroIndex = (currentHeroIndex + 1) % trendingBooks.length;
|
||||
updateHeroUI(trendingBooks[currentHeroIndex]);
|
||||
}
|
||||
}, 8000);
|
||||
}
|
||||
|
||||
async function updateHeroUI(book) {
|
||||
if(!book) return;
|
||||
book.entry_type =
|
||||
book.format === 'MANGA' ? 'MANGA' : 'NOVEL';
|
||||
const title = book.title.english || book.title.romaji;
|
||||
const desc = book.description || "No description available.";
|
||||
const poster = (book.coverImage && (book.coverImage.extraLarge || book.coverImage.large)) || '';
|
||||
const banner = book.bannerImage || poster;
|
||||
|
||||
document.getElementById('hero-title').innerText = title;
|
||||
document.getElementById('hero-desc').innerHTML = desc;
|
||||
document.getElementById('hero-score').innerText = (book.averageScore || '?') + '% Score';
|
||||
document.getElementById('hero-year').innerText = (book.startDate && book.startDate.year) ? book.startDate.year : '????';
|
||||
document.getElementById('hero-type').innerText = book.format || 'MANGA';
|
||||
|
||||
const heroPoster = document.getElementById('hero-poster');
|
||||
if(heroPoster) heroPoster.src = poster;
|
||||
|
||||
const bg = document.getElementById('hero-bg-media');
|
||||
if(bg) bg.src = banner;
|
||||
|
||||
const readBtn = document.getElementById('read-btn');
|
||||
if (readBtn) {
|
||||
readBtn.onclick = () => window.location.href = `/book/${book.id}`;
|
||||
}
|
||||
|
||||
const addToListBtn = document.querySelector('.hero-buttons .btn-blur');
|
||||
if(addToListBtn) {
|
||||
ListModalManager.currentData = book;
|
||||
const entryType = ListModalManager.getEntryType(book);
|
||||
|
||||
await ListModalManager.checkIfInList(book.id, 'anilist', entryType);
|
||||
ListModalManager.updateButton();
|
||||
|
||||
addToListBtn.onclick = () => ListModalManager.open(book, 'anilist');
|
||||
}
|
||||
}
|
||||
|
||||
function renderList(id, list) {
|
||||
const container = document.getElementById(id);
|
||||
container.innerHTML = '';
|
||||
|
||||
list.forEach(book => {
|
||||
const title = book.title.english || book.title.romaji;
|
||||
const cover = book.coverImage ? book.coverImage.large : '';
|
||||
const score = book.averageScore || '--';
|
||||
const type = book.format || 'Book';
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.className = 'card';
|
||||
|
||||
el.onclick = () => {
|
||||
window.location.href = `/book/${book.id}`;
|
||||
};
|
||||
el.innerHTML = `
|
||||
<div class="card-img-wrap"><img src="${cover}" loading="lazy"></div>
|
||||
<div class="card-content">
|
||||
<h3>${title}</h3>
|
||||
<p>${score}% • ${type}</p>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(el);
|
||||
});
|
||||
}
|
||||
|
||||
function saveToList() {
|
||||
const bookId = ListModalManager.currentData ? ListModalManager.currentData.id : null;
|
||||
if (!bookId) return;
|
||||
ListModalManager.save(bookId, 'anilist');
|
||||
}
|
||||
|
||||
function deleteFromList() {
|
||||
const bookId = ListModalManager.currentData ? ListModalManager.currentData.id : null;
|
||||
if (!bookId) return;
|
||||
ListModalManager.delete(bookId, 'anilist');
|
||||
}
|
||||
|
||||
function closeAddToListModal() {
|
||||
ListModalManager.close();
|
||||
}
|
||||
@@ -1,391 +0,0 @@
|
||||
const providerSelector = document.getElementById('provider-selector');
|
||||
const searchInput = document.getElementById('search-input');
|
||||
const resultsContainer = document.getElementById('gallery-results');
|
||||
|
||||
let currentPage = 1;
|
||||
let currentProvider = '';
|
||||
let currentQuery = '';
|
||||
const perPage = 48;
|
||||
let isLoading = false;
|
||||
let favorites = new Set();
|
||||
let favoritesMode = false;
|
||||
|
||||
let msnry = null;
|
||||
|
||||
const sentinel = document.createElement('div');
|
||||
sentinel.id = 'infinite-scroll-sentinel';
|
||||
sentinel.style.height = '1px';
|
||||
sentinel.style.marginBottom = '300px';
|
||||
sentinel.style.display = 'none';
|
||||
resultsContainer.parentNode.appendChild(sentinel);
|
||||
|
||||
function getAuthHeaders(extra = {}) {
|
||||
const token = localStorage.getItem("token");
|
||||
return token
|
||||
? { ...extra, Authorization: `Bearer ${token}` }
|
||||
: extra;
|
||||
}
|
||||
|
||||
function initializeMasonry() {
|
||||
if (typeof Masonry === 'undefined') {
|
||||
setTimeout(initializeMasonry, 100);
|
||||
return;
|
||||
}
|
||||
if (msnry) msnry.destroy();
|
||||
msnry = new Masonry(resultsContainer, {
|
||||
itemSelector: '.gallery-card',
|
||||
columnWidth: '.gallery-card',
|
||||
percentPosition: true,
|
||||
gutter: 0,
|
||||
transitionDuration: '0.4s'
|
||||
});
|
||||
msnry.layout();
|
||||
}
|
||||
initializeMasonry();
|
||||
|
||||
function getTagsArray(item) {
|
||||
if (Array.isArray(item.tags)) return item.tags;
|
||||
if (typeof item.tags === 'string') {
|
||||
return item.tags
|
||||
.split(',')
|
||||
.map(t => t.trim())
|
||||
.filter(t => t.length > 0);
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
function getProxiedImageUrl(item) {
|
||||
const imageUrl = item.image || item.image_url;
|
||||
|
||||
if (!imageUrl || !item.headers) {
|
||||
return imageUrl;
|
||||
}
|
||||
|
||||
let proxyUrl = `/api/proxy?url=${encodeURIComponent(imageUrl)}`;
|
||||
|
||||
const headers = item.headers;
|
||||
const lowerCaseHeaders = {};
|
||||
for (const key in headers) {
|
||||
if (Object.prototype.hasOwnProperty.call(headers, key)) {
|
||||
lowerCaseHeaders[key.toLowerCase()] = headers[key];
|
||||
}
|
||||
}
|
||||
|
||||
const referer = lowerCaseHeaders.referer;
|
||||
if (referer) {
|
||||
proxyUrl += `&referer=${encodeURIComponent(referer)}`;
|
||||
}
|
||||
|
||||
const origin = lowerCaseHeaders.origin;
|
||||
if (origin) {
|
||||
proxyUrl += `&origin=${encodeURIComponent(origin)}`;
|
||||
}
|
||||
|
||||
const userAgent = lowerCaseHeaders['user-agent'];
|
||||
if (userAgent) {
|
||||
proxyUrl += `&userAgent=${encodeURIComponent(userAgent)}`;
|
||||
}
|
||||
|
||||
return proxyUrl;
|
||||
}
|
||||
|
||||
async function loadFavorites() {
|
||||
try {
|
||||
const res = await fetch('/api/gallery/favorites', {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
if (!res.ok) return;
|
||||
const data = await res.json();
|
||||
favorites.clear();
|
||||
(data.favorites || []).forEach(fav => favorites.add(fav.id));
|
||||
} catch (err) {
|
||||
console.error('Error loading favorites:', err);
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleFavorite(item) {
|
||||
const id = item.id;
|
||||
const isFav = favorites.has(id);
|
||||
|
||||
try {
|
||||
if (isFav) {
|
||||
await fetch(`/api/gallery/favorites/${encodeURIComponent(id)}`, {
|
||||
method: 'DELETE',
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
favorites.delete(id);
|
||||
} else {
|
||||
const tagsArray = getTagsArray(item);
|
||||
|
||||
const serializedHeaders = item.headers ? JSON.stringify(item.headers) : "";
|
||||
|
||||
await fetch('/api/gallery/favorites', {
|
||||
method: 'POST',
|
||||
headers: getAuthHeaders({
|
||||
'Content-Type': 'application/json'
|
||||
}),
|
||||
body: JSON.stringify({
|
||||
id: item.id,
|
||||
title: item.title || tagsArray.join(', ') || 'Untitled',
|
||||
image_url: item.image || item.image_url,
|
||||
thumbnail_url: item.image || item.image_url,
|
||||
tags: tagsArray.join(','),
|
||||
provider: item.provider || "",
|
||||
headers: serializedHeaders
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
favorites.add(id);
|
||||
}
|
||||
|
||||
document.querySelectorAll(`.gallery-card[data-id="${CSS.escape(id)}"] .fav-btn`).forEach(btn => {
|
||||
btn.classList.toggle('favorited', !isFav);
|
||||
btn.innerHTML = !isFav
|
||||
? '<i class="fas fa-heart"></i>'
|
||||
: '<i class="far fa-heart"></i>';
|
||||
});
|
||||
|
||||
if (providerSelector.value === 'favorites' && isFav) {
|
||||
setTimeout(() => searchGallery(false), 300);
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error toggling favorite:', err);
|
||||
alert('Error updating favorite');
|
||||
}
|
||||
}
|
||||
|
||||
function createGalleryCard(item, isLoadMore = false) {
|
||||
const card = document.createElement('a');
|
||||
card.className = 'gallery-card grid-item';
|
||||
card.href = `/gallery/${item.provider || currentProvider || 'unknown'}/${encodeURIComponent(item.id)}`;
|
||||
card.dataset.id = item.id;
|
||||
|
||||
const img = document.createElement('img');
|
||||
img.className = 'gallery-card-img';
|
||||
|
||||
img.src = getProxiedImageUrl(item);
|
||||
img.alt = getTagsArray(item).join(', ') || 'Image';
|
||||
if (isLoadMore) {
|
||||
img.loading = 'lazy';
|
||||
}
|
||||
|
||||
const favBtn = document.createElement('button');
|
||||
favBtn.className = 'fav-btn';
|
||||
const isFav = favorites.has(item.id);
|
||||
favBtn.classList.toggle('favorited', isFav);
|
||||
favBtn.innerHTML = isFav ? '<i class="fas fa-heart"></i>' : '<i class="far fa-heart"></i>';
|
||||
favBtn.onclick = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleFavorite(item);
|
||||
};
|
||||
|
||||
card.appendChild(favBtn);
|
||||
card.appendChild(img);
|
||||
|
||||
if (currentProvider !== 'favorites') {
|
||||
const badge = document.createElement('div');
|
||||
badge.className = 'provider-badge';
|
||||
badge.textContent = item.provider || 'Global';
|
||||
card.appendChild(badge);
|
||||
} else {
|
||||
const badge = document.createElement('div');
|
||||
badge.className = 'provider-badge';
|
||||
badge.textContent = 'Favorites';
|
||||
badge.style.background = 'rgba(255,107,107,0.7)';
|
||||
card.appendChild(badge);
|
||||
}
|
||||
|
||||
img.onload = img.onerror = () => {
|
||||
card.classList.add('is-loaded');
|
||||
if (msnry) msnry.layout();
|
||||
};
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
function showSkeletons(count, append = false) {
|
||||
const skeleton = `<div class="gallery-card skeleton grid-item"><div class="poster-skeleton"></div></div>`;
|
||||
if (!append) {
|
||||
resultsContainer.innerHTML = '';
|
||||
initializeMasonry();
|
||||
}
|
||||
const elements = [];
|
||||
for (let i = 0; i < count; i++) {
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = skeleton;
|
||||
const el = div.firstChild;
|
||||
resultsContainer.appendChild(el);
|
||||
elements.push(el);
|
||||
}
|
||||
if (msnry) {
|
||||
msnry.appended(elements);
|
||||
msnry.layout();
|
||||
}
|
||||
sentinel.style.display = 'none';
|
||||
observer.unobserve(sentinel);
|
||||
}
|
||||
|
||||
async function searchGallery(isLoadMore = false) {
|
||||
if (isLoading) return;
|
||||
|
||||
const query = searchInput.value.trim();
|
||||
const provider = providerSelector.value;
|
||||
const page = isLoadMore ? currentPage + 1 : 1;
|
||||
|
||||
favoritesMode = (provider === 'favorites');
|
||||
|
||||
currentQuery = query;
|
||||
currentProvider = provider;
|
||||
|
||||
if (!isLoadMore) {
|
||||
currentPage = 1;
|
||||
showSkeletons(perPage);
|
||||
} else {
|
||||
showSkeletons(8, true);
|
||||
}
|
||||
|
||||
isLoading = true;
|
||||
|
||||
try {
|
||||
let data;
|
||||
|
||||
if (favoritesMode) {
|
||||
const res = await fetch('/api/gallery/favorites', {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
data = await res.json();
|
||||
|
||||
let favoritesResults = data.favorites || [];
|
||||
if (query) {
|
||||
const lowerQuery = query.toLowerCase();
|
||||
favoritesResults = favoritesResults.filter(fav =>
|
||||
(fav.title && fav.title.toLowerCase().includes(lowerQuery)) ||
|
||||
(fav.tags && fav.tags.toLowerCase().includes(lowerQuery))
|
||||
);
|
||||
}
|
||||
|
||||
data.results = favoritesResults.map(fav => ({
|
||||
id: fav.id,
|
||||
image: fav.image_url,
|
||||
image_url: fav.image_url,
|
||||
provider: fav.provider,
|
||||
tags: fav.tags
|
||||
}));
|
||||
data.hasNextPage = false;
|
||||
|
||||
} else if (provider && provider !== '') {
|
||||
const res = await fetch(`/api/gallery/search/provider?provider=${provider}&q=${encodeURIComponent(query)}&page=${page}&perPage=${perPage}`);
|
||||
data = await res.json();
|
||||
} else {
|
||||
const res = await fetch(`/api/gallery/search?q=${encodeURIComponent(query)}&page=${page}&perPage=${perPage}`);
|
||||
data = await res.json();
|
||||
}
|
||||
|
||||
const results = data.results || [];
|
||||
|
||||
const skeletons = resultsContainer.querySelectorAll('.gallery-card.skeleton');
|
||||
const toRemove = isLoadMore ? Array.from(skeletons).slice(-8) : skeletons;
|
||||
if (msnry) msnry.remove(toRemove);
|
||||
toRemove.forEach(el => el.remove());
|
||||
|
||||
const newCards = results.map((item, index) => createGalleryCard(item, isLoadMore));
|
||||
newCards.forEach(card => resultsContainer.appendChild(card));
|
||||
if (msnry) msnry.appended(newCards);
|
||||
|
||||
if (results.length === 0 && !isLoadMore) {
|
||||
const msg = favoritesMode
|
||||
? (query ? 'No favorites found matching your search' : 'You don\'t have any favorite images yet')
|
||||
: 'No results found';
|
||||
resultsContainer.innerHTML = `<p style="text-align:center;color:var(--color-text-secondary);padding:4rem;font-size:1.1rem;">${msg}</p>`;
|
||||
}
|
||||
|
||||
if (msnry) msnry.layout();
|
||||
|
||||
if (!favoritesMode && data.hasNextPage) {
|
||||
sentinel.style.display = 'block';
|
||||
observer.observe(sentinel);
|
||||
} else {
|
||||
sentinel.style.display = 'none';
|
||||
observer.unobserve(sentinel);
|
||||
}
|
||||
|
||||
if (isLoadMore) currentPage++;
|
||||
else currentPage = 1;
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error:', err);
|
||||
if (!isLoadMore) {
|
||||
resultsContainer.innerHTML = '<p style="text-align:center;color:red;padding:4rem;">Error loading gallery</p>';
|
||||
}
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadExtensions() {
|
||||
try {
|
||||
const res = await fetch('/api/extensions/gallery');
|
||||
const data = await res.json();
|
||||
|
||||
providerSelector.innerHTML = '';
|
||||
|
||||
const favoritesOption = document.createElement('option');
|
||||
favoritesOption.value = 'favorites';
|
||||
favoritesOption.textContent = 'Favorites';
|
||||
providerSelector.appendChild(favoritesOption);
|
||||
|
||||
(data.extensions || []).forEach(ext => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = ext;
|
||||
opt.textContent = ext.charAt(0).toUpperCase() + ext.slice(1);
|
||||
providerSelector.appendChild(opt);
|
||||
});
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error loading extensions:', err);
|
||||
}
|
||||
}
|
||||
|
||||
providerSelector.addEventListener('change', () => {
|
||||
if (providerSelector.value === 'favorites') {
|
||||
searchInput.placeholder = "Search in favorites...";
|
||||
} else {
|
||||
searchInput.placeholder = "Search in gallery...";
|
||||
}
|
||||
searchGallery(false);
|
||||
});
|
||||
|
||||
let searchTimeout;
|
||||
|
||||
searchInput.addEventListener('input', () => {
|
||||
clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(() => {
|
||||
searchGallery(false);
|
||||
}, 500);
|
||||
});
|
||||
searchInput.addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter') {
|
||||
clearTimeout(searchTimeout);
|
||||
searchGallery(false);
|
||||
}
|
||||
});
|
||||
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
if (entries[0].isIntersecting && !isLoading && !favoritesMode) {
|
||||
observer.unobserve(sentinel);
|
||||
searchGallery(true);
|
||||
}
|
||||
}, { rootMargin: '1000px' });
|
||||
|
||||
loadFavorites().then(() => {
|
||||
loadExtensions().then(() => {
|
||||
searchGallery(false);
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
document.getElementById('navbar')?.classList.toggle('scrolled', window.scrollY > 50);
|
||||
});
|
||||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
@@ -1,262 +0,0 @@
|
||||
const ORIGINAL_MARKETPLACE_URL = 'https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/marketplace.json';
|
||||
const MARKETPLACE_JSON_URL = `/api/proxy?url=${encodeURIComponent(ORIGINAL_MARKETPLACE_URL)}`;
|
||||
const INSTALLED_EXTENSIONS_API = '/api/extensions';
|
||||
const UPDATE_EXTENSIONS_API = '/api/extensions/update';
|
||||
|
||||
const marketplaceContent = document.getElementById('marketplace-content');
|
||||
const filterSelect = document.getElementById('extension-filter');
|
||||
const updateAllBtn = document.getElementById('btn-update-all');
|
||||
|
||||
const modal = document.getElementById('customModal');
|
||||
const modalTitle = document.getElementById('modalTitle');
|
||||
const modalMessage = document.getElementById('modalMessage');
|
||||
const modalConfirmBtn = document.getElementById('modalConfirmButton');
|
||||
const modalCloseBtn = document.getElementById('modalCloseButton');
|
||||
|
||||
let marketplaceMetadata = {};
|
||||
let installedExtensions = [];
|
||||
let currentTab = 'marketplace';
|
||||
|
||||
async function loadMarketplace() {
|
||||
showSkeletons();
|
||||
try {
|
||||
const [metaRes, installedRes] = await Promise.all([
|
||||
fetch(MARKETPLACE_JSON_URL).then(res => res.json()),
|
||||
fetch(INSTALLED_EXTENSIONS_API).then(res => res.json())
|
||||
]);
|
||||
|
||||
marketplaceMetadata = metaRes.extensions;
|
||||
installedExtensions = (installedRes.extensions || []).map(e => e.toLowerCase());
|
||||
|
||||
initTabs();
|
||||
renderGroupedView();
|
||||
|
||||
if (filterSelect) {
|
||||
filterSelect.addEventListener('change', () => renderGroupedView());
|
||||
}
|
||||
|
||||
if (updateAllBtn) {
|
||||
updateAllBtn.onclick = handleUpdateAll;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading marketplace:', error);
|
||||
marketplaceContent.innerHTML = `<div class="error-msg">Error al cargar el marketplace.</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function initTabs() {
|
||||
const tabs = document.querySelectorAll('.tab-button');
|
||||
tabs.forEach(tab => {
|
||||
tab.onclick = () => {
|
||||
tabs.forEach(t => t.classList.remove('active'));
|
||||
tab.classList.add('active');
|
||||
currentTab = tab.dataset.tab;
|
||||
|
||||
if (updateAllBtn) {
|
||||
if (currentTab === 'installed') {
|
||||
updateAllBtn.classList.remove('hidden');
|
||||
} else {
|
||||
updateAllBtn.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
renderGroupedView();
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
async function handleUpdateAll() {
|
||||
const originalText = updateAllBtn.innerText;
|
||||
try {
|
||||
updateAllBtn.disabled = true;
|
||||
updateAllBtn.innerText = 'Updating...';
|
||||
|
||||
const res = await fetch(UPDATE_EXTENSIONS_API, { method: 'POST' });
|
||||
if (!res.ok) throw new Error('Update failed');
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (data.updated && data.updated.length > 0) {
|
||||
|
||||
const list = data.updated.join(', ');
|
||||
window.NotificationUtils.success(`Updated: ${list}`);
|
||||
|
||||
await loadMarketplace();
|
||||
} else {
|
||||
window.NotificationUtils.info('Everything is up to date.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Update All Error:', error);
|
||||
window.NotificationUtils.error('Failed to perform bulk update.');
|
||||
} finally {
|
||||
updateAllBtn.disabled = false;
|
||||
updateAllBtn.innerText = originalText;
|
||||
}
|
||||
}
|
||||
|
||||
function renderGroupedView() {
|
||||
marketplaceContent.innerHTML = '';
|
||||
const activeFilter = filterSelect.value;
|
||||
const groups = {};
|
||||
|
||||
let listToRender = [];
|
||||
|
||||
if (currentTab === 'marketplace') {
|
||||
for (const [id, data] of Object.entries(marketplaceMetadata)) {
|
||||
listToRender.push({
|
||||
id,
|
||||
...data,
|
||||
isInstalled: installedExtensions.includes(id.toLowerCase())
|
||||
});
|
||||
}
|
||||
} else {
|
||||
for (const [id, data] of Object.entries(marketplaceMetadata)) {
|
||||
if (installedExtensions.includes(id.toLowerCase())) {
|
||||
listToRender.push({ id, ...data, isInstalled: true });
|
||||
}
|
||||
}
|
||||
|
||||
installedExtensions.forEach(id => {
|
||||
const existsInMeta = Object.keys(marketplaceMetadata).some(k => k.toLowerCase() === id);
|
||||
if (!existsInMeta) {
|
||||
listToRender.push({
|
||||
id: id,
|
||||
name: id.charAt(0).toUpperCase() + id.slice(1),
|
||||
type: 'Local',
|
||||
author: 'Unknown',
|
||||
isInstalled: true
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
listToRender.forEach(ext => {
|
||||
const type = ext.type || 'Other';
|
||||
if (activeFilter !== 'All' && type !== activeFilter) return;
|
||||
if (!groups[type]) groups[type] = [];
|
||||
groups[type].push(ext);
|
||||
});
|
||||
|
||||
const sortedTypes = Object.keys(groups).sort();
|
||||
|
||||
if (sortedTypes.length === 0) {
|
||||
marketplaceContent.innerHTML = `<p class="empty-msg">No extensions found for this criteria.</p>`;
|
||||
return;
|
||||
}
|
||||
|
||||
sortedTypes.forEach(type => {
|
||||
const section = document.createElement('div');
|
||||
section.className = 'category-group';
|
||||
|
||||
const title = document.createElement('h2');
|
||||
title.className = 'marketplace-section-title';
|
||||
title.innerText = type.replace('-', ' ');
|
||||
|
||||
const grid = document.createElement('div');
|
||||
grid.className = 'marketplace-grid';
|
||||
|
||||
groups[type].forEach(ext => grid.appendChild(createCard(ext)));
|
||||
|
||||
section.appendChild(title);
|
||||
section.appendChild(grid);
|
||||
marketplaceContent.appendChild(section);
|
||||
});
|
||||
}
|
||||
|
||||
function createCard(ext) {
|
||||
const card = document.createElement('div');
|
||||
card.className = `extension-card ${ext.nsfw ? 'nsfw-ext' : ''} ${ext.broken ? 'broken-ext' : ''}`;
|
||||
|
||||
const iconUrl = `https://www.google.com/s2/favicons?domain=${ext.domain}&sz=128`;
|
||||
|
||||
let buttonHtml = '';
|
||||
if (ext.isInstalled) {
|
||||
buttonHtml = `<button class="extension-action-button btn-uninstall">Uninstall</button>`;
|
||||
} else if (ext.broken) {
|
||||
buttonHtml = `<button class="extension-action-button" style="background: #4b5563; cursor: not-allowed;" disabled>Broken</button>`;
|
||||
} else {
|
||||
buttonHtml = `<button class="extension-action-button btn-install">Install</button>`;
|
||||
}
|
||||
|
||||
card.innerHTML = `
|
||||
<img class="extension-icon" src="${iconUrl}" onerror="this.src='/public/assets/waifuboards.ico'">
|
||||
<div class="card-content-wrapper">
|
||||
<h3 class="extension-name">${ext.name}</h3>
|
||||
<span class="extension-author">by ${ext.author || 'Unknown'}</span>
|
||||
<p class="extension-description">${ext.description || 'No description available.'}</p>
|
||||
<div class="extension-tags">
|
||||
<span class="extension-status-badge badge-${ext.isInstalled ? 'installed' : (ext.broken ? 'local' : 'available')}">
|
||||
${ext.isInstalled ? 'Installed' : (ext.broken ? 'Broken' : 'Available')}
|
||||
</span>
|
||||
${ext.nsfw ? '<span class="extension-status-badge badge-local">NSFW</span>' : ''}
|
||||
</div>
|
||||
</div>
|
||||
${buttonHtml}
|
||||
`;
|
||||
|
||||
const btn = card.querySelector('.extension-action-button');
|
||||
if (!ext.broken || ext.isInstalled) {
|
||||
btn.onclick = () => ext.isInstalled ? promptUninstall(ext) : handleInstall(ext);
|
||||
}
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
function showModal(title, message, showConfirm = false, onConfirm = null) {
|
||||
modalTitle.innerText = title;
|
||||
modalMessage.innerText = message;
|
||||
if (showConfirm) {
|
||||
modalConfirmBtn.classList.remove('hidden');
|
||||
modalConfirmBtn.onclick = () => { hideModal(); if (onConfirm) onConfirm(); };
|
||||
} else {
|
||||
modalConfirmBtn.classList.add('hidden');
|
||||
}
|
||||
modalCloseBtn.onclick = hideModal;
|
||||
modal.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function hideModal() { modal.classList.add('hidden'); }
|
||||
|
||||
async function handleInstall(ext) {
|
||||
try {
|
||||
const res = await fetch('/api/extensions/install', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ url: ext.entry })
|
||||
});
|
||||
if (res.ok) {
|
||||
installedExtensions.push(ext.id.toLowerCase());
|
||||
renderGroupedView();
|
||||
window.NotificationUtils.success(`${ext.name} installed!`);
|
||||
}
|
||||
} catch (e) { window.NotificationUtils.error('Install failed.'); }
|
||||
}
|
||||
|
||||
function promptUninstall(ext) {
|
||||
showModal('Confirm', `Uninstall ${ext.name}?`, true, () => handleUninstall(ext));
|
||||
}
|
||||
|
||||
async function handleUninstall(ext) {
|
||||
try {
|
||||
const res = await fetch('/api/extensions/uninstall', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ fileName: ext.id + '.js' })
|
||||
});
|
||||
if (res.ok) {
|
||||
installedExtensions = installedExtensions.filter(id => id !== ext.id.toLowerCase());
|
||||
renderGroupedView();
|
||||
window.NotificationUtils.info(`${ext.name} uninstalled.`);
|
||||
}
|
||||
} catch (e) { window.NotificationUtils.error('Uninstall failed.'); }
|
||||
}
|
||||
|
||||
function showSkeletons() {
|
||||
marketplaceContent.innerHTML = `
|
||||
<div class="marketplace-grid">
|
||||
${Array(3).fill('<div class="extension-card skeleton"></div>').join('')}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', loadMarketplace);
|
||||
@@ -1,811 +0,0 @@
|
||||
const API_BASE = '/api';
|
||||
|
||||
const DashboardApp = {
|
||||
|
||||
State: {
|
||||
currentList: [],
|
||||
filteredList: [],
|
||||
localLibraryData: [],
|
||||
currentUserId: null,
|
||||
currentLocalType: 'anime',
|
||||
pagination: {
|
||||
itemsPerPage: 50,
|
||||
visibleCount: 50
|
||||
}
|
||||
},
|
||||
|
||||
init: async function() {
|
||||
console.log('Initializing Dashboard...');
|
||||
await this.User.init();
|
||||
await this.Tracking.load();
|
||||
|
||||
this.UI.setupTabSystem();
|
||||
this.initListeners();
|
||||
|
||||
const localInput = document.getElementById('local-search-input');
|
||||
if(localInput) {
|
||||
localInput.addEventListener('input', (e) => this.Library.filterContent(e.target.value));
|
||||
}
|
||||
},
|
||||
|
||||
initListeners: function() {
|
||||
|
||||
document.getElementById('scan-incremental-btn')?.addEventListener('click', () => this.Library.triggerScan('incremental'));
|
||||
document.getElementById('scan-full-btn')?.addEventListener('click', () => this.Library.triggerScan('full'));
|
||||
|
||||
document.getElementById('profile-form')?.addEventListener('submit', (e) => this.User.updateProfile(e));
|
||||
document.getElementById('password-form')?.addEventListener('submit', (e) => this.User.changePassword(e));
|
||||
document.getElementById('logout-btn')?.addEventListener('click', () => window.AuthUtils.logout());
|
||||
|
||||
const fileInput = document.getElementById('avatar-upload');
|
||||
if (fileInput) {
|
||||
fileInput.addEventListener('change', (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = evt => {
|
||||
document.getElementById('user-avatar').src = evt.target.result;
|
||||
const urlInput = document.getElementById('setting-avatar-url');
|
||||
if(urlInput) urlInput.value = '';
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const trackingInput = document.getElementById('tracking-search-input');
|
||||
if (trackingInput) trackingInput.addEventListener('input', () => this.Tracking.applyFilters());
|
||||
|
||||
['status-filter', 'type-filter', 'sort-filter'].forEach(id => {
|
||||
document.getElementById(id)?.addEventListener('change', () => this.Tracking.applyFilters());
|
||||
});
|
||||
|
||||
document.querySelectorAll('.view-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
const view = btn.dataset.view;
|
||||
const container = document.getElementById('list-container');
|
||||
view === 'list' ? container.classList.add('list-view') : container.classList.remove('list-view');
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
User: {
|
||||
init: async function() {
|
||||
try {
|
||||
const headers = window.AuthUtils.getSimpleAuthHeaders();
|
||||
const res = await fetch(`${API_BASE}/me`, { headers });
|
||||
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
document.getElementById('user-username').textContent = data.username;
|
||||
const settingUsername = document.getElementById('setting-username');
|
||||
if(settingUsername) settingUsername.value = data.username;
|
||||
|
||||
if (data.avatar) {
|
||||
document.getElementById('user-avatar').src = data.avatar;
|
||||
}
|
||||
}
|
||||
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
const payload = JSON.parse(atob(token.split('.')[1]));
|
||||
DashboardApp.State.currentUserId = payload.id;
|
||||
await this.checkIntegrations(payload.id);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error loading user profile:", err);
|
||||
}
|
||||
},
|
||||
|
||||
checkIntegrations: async function(userId) {
|
||||
if (!userId) return;
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/users/${userId}/integration`);
|
||||
let data = { connected: false };
|
||||
if (res.ok) data = await res.json();
|
||||
|
||||
this.updateIntegrationUI(data, userId);
|
||||
} catch (e) { console.error("Integration check error:", e); }
|
||||
},
|
||||
|
||||
updateIntegrationUI: function(data, userId) {
|
||||
const statusEl = document.getElementById('anilist-status');
|
||||
const btn = document.getElementById('anilist-action-btn');
|
||||
const headerBadge = document.getElementById('header-anilist-link');
|
||||
|
||||
if (data.connected) {
|
||||
if (headerBadge) {
|
||||
headerBadge.style.display = 'flex';
|
||||
headerBadge.href = `https://anilist.co/user/${data.anilistUserId}`;
|
||||
headerBadge.title = `Connected as ${data.anilistUserId}`;
|
||||
}
|
||||
if (statusEl) {
|
||||
// CAMBIO: Mostrar fecha de expiración si existe
|
||||
const expiresDate = data.expiresAt ? new Date(data.expiresAt).toLocaleDateString() : 'Unknown';
|
||||
statusEl.innerHTML = `
|
||||
<span style="color:var(--color-success)">Connected as: <b>${data.anilistUserId}</b></span>
|
||||
<span style="display:block; font-size:0.75rem; color:#71717a">Expires: ${expiresDate}</span>
|
||||
`;
|
||||
}
|
||||
if (btn) {
|
||||
btn.textContent = 'Disconnect';
|
||||
btn.className = 'btn-stream-outline link-danger';
|
||||
btn.onclick = () => this.disconnectAniList(userId);
|
||||
}
|
||||
} else {
|
||||
if (headerBadge) headerBadge.style.display = 'none';
|
||||
if (statusEl) {
|
||||
statusEl.textContent = 'Not connected';
|
||||
statusEl.style.color = 'var(--color-text-secondary)';
|
||||
}
|
||||
if (btn) {
|
||||
btn.textContent = 'Connect';
|
||||
btn.className = 'btn-stream-outline';
|
||||
btn.onclick = () => this.openAniListModal();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
redirectToAniListLogin: async function() {
|
||||
if (!DashboardApp.State.currentUserId) return;
|
||||
try {
|
||||
const clientId = 32898;
|
||||
const redirectUri = encodeURIComponent(window.location.origin + '/api/anilist');
|
||||
const state = encodeURIComponent(DashboardApp.State.currentUserId);
|
||||
window.location.href = `https://anilist.co/api/v2/oauth/authorize?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}&state=${state}`;
|
||||
} catch (err) { console.error(err); alert('Error starting AniList login'); }
|
||||
},
|
||||
openAniListModal: function() {
|
||||
const modal = document.getElementById('anilist-connect-modal');
|
||||
const body = document.getElementById('anilist-modal-body');
|
||||
const clientId = 32898; // Tu Client ID
|
||||
|
||||
// Generamos el HTML del modal dinámicamente
|
||||
body.innerHTML = `
|
||||
<p class="modal-description">Connect your AniList account to sync your progress automatically.</p>
|
||||
|
||||
<div style="margin-bottom: 1.5rem;">
|
||||
<label style="display:block; font-size:0.85rem; font-weight:600; color:#a1a1aa; margin-bottom:0.5rem">Step 1: Get Token</label>
|
||||
<a href="https://anilist.co/api/v2/oauth/authorize?client_id=${clientId}&response_type=token"
|
||||
target="_blank"
|
||||
class="btn-blur"
|
||||
style="width:100%; text-align:center; box-sizing:border-box; display:block;">
|
||||
Open AniList Login ↗
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label>Step 2: Paste Token</label>
|
||||
<input type="text" id="manual-anilist-token" class="stream-input" placeholder="Paste the long access token here..." autocomplete="off">
|
||||
</div>
|
||||
|
||||
<div class="modal-footer" style="padding:0; background:transparent;">
|
||||
<button class="btn-primary" style="width:100%" onclick="DashboardApp.User.submitAniListToken()">Verify & Connect</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
modal.classList.remove('hidden');
|
||||
},
|
||||
|
||||
closeAniListModal: function() {
|
||||
document.getElementById('anilist-connect-modal').classList.add('hidden');
|
||||
},
|
||||
|
||||
submitAniListToken: async function() {
|
||||
const tokenInput = document.getElementById('manual-anilist-token');
|
||||
const token = tokenInput.value.trim();
|
||||
const userId = DashboardApp.State.currentUserId;
|
||||
|
||||
if (!token) {
|
||||
alert('Please paste the AniList token first');
|
||||
return;
|
||||
}
|
||||
|
||||
const confirmBtn = document.querySelector('#anilist-connect-modal .btn-primary');
|
||||
const originalText = confirmBtn.textContent;
|
||||
confirmBtn.textContent = "Verifying...";
|
||||
confirmBtn.disabled = true;
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/anilist/store`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
userId: userId,
|
||||
accessToken: token
|
||||
})
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (!res.ok) throw new Error(data.error || 'Failed to verify token');
|
||||
|
||||
this.closeAniListModal();
|
||||
await this.checkIntegrations(userId);
|
||||
alert('AniList connected successfully!');
|
||||
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert(err.message || 'Invalid Token');
|
||||
} finally {
|
||||
confirmBtn.textContent = originalText;
|
||||
confirmBtn.disabled = false;
|
||||
}
|
||||
},
|
||||
|
||||
disconnectAniList: async function(userId) {
|
||||
if(!confirm("Disconnect AniList?")) return;
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
await fetch(`${API_BASE}/users/${userId}/integration`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
this.checkIntegrations(userId);
|
||||
} catch (e) { alert("Failed to disconnect"); }
|
||||
},
|
||||
|
||||
updateProfile: async function(e) {
|
||||
e.preventDefault();
|
||||
const userId = DashboardApp.State.currentUserId;
|
||||
if (!userId) return;
|
||||
|
||||
const username = document.getElementById('setting-username').value;
|
||||
const urlInput = document.getElementById('setting-avatar-url')?.value || '';
|
||||
const fileInput = document.getElementById('avatar-upload');
|
||||
let finalAvatar = null;
|
||||
|
||||
if (fileInput && fileInput.files && fileInput.files[0]) {
|
||||
try {
|
||||
finalAvatar = await DashboardApp.Utils.fileToBase64(fileInput.files[0]);
|
||||
} catch (err) { alert("Error reading file"); return; }
|
||||
} else if (urlInput.trim() !== "") {
|
||||
finalAvatar = urlInput.trim();
|
||||
}
|
||||
|
||||
const bodyData = { username };
|
||||
if (finalAvatar) bodyData.profilePictureUrl = finalAvatar;
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/users/${userId}`, {
|
||||
method: 'PUT',
|
||||
headers: { ...window.AuthUtils.getSimpleAuthHeaders(), 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(bodyData)
|
||||
});
|
||||
if (res.ok) alert('Profile updated successfully!');
|
||||
else { const err = await res.json(); alert(err.error || 'Update failed'); }
|
||||
} catch (e) { console.error(e); }
|
||||
},
|
||||
|
||||
changePassword: async function(e) {
|
||||
e.preventDefault();
|
||||
const userId = DashboardApp.State.currentUserId;
|
||||
if (!userId) return;
|
||||
const currentPassword = document.getElementById('current-password').value;
|
||||
const newPassword = document.getElementById('new-password').value;
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/users/${userId}/password`, {
|
||||
method: 'PUT',
|
||||
headers: { ...window.AuthUtils.getSimpleAuthHeaders(), 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ currentPassword, newPassword })
|
||||
});
|
||||
const data = await res.json();
|
||||
if (res.ok) { alert("Password updated successfully"); document.getElementById('password-form').reset(); }
|
||||
else alert(data.error || "Failed to update password");
|
||||
} catch (e) { console.error(e); }
|
||||
}
|
||||
},
|
||||
|
||||
Tracking: {
|
||||
load: async function() {
|
||||
const loadingState = document.getElementById('loading-state');
|
||||
const emptyState = document.getElementById('empty-state');
|
||||
const container = document.getElementById('list-container');
|
||||
|
||||
try {
|
||||
loadingState.style.display = 'flex';
|
||||
emptyState.style.display = 'none';
|
||||
container.innerHTML = '';
|
||||
|
||||
const response = await fetch(`${API_BASE}/list`, { headers: window.AuthUtils.getSimpleAuthHeaders() });
|
||||
if (!response.ok) throw new Error('Failed');
|
||||
|
||||
const data = await response.json();
|
||||
DashboardApp.State.currentList = data.results || [];
|
||||
|
||||
this.updateStats();
|
||||
|
||||
loadingState.style.display = 'none';
|
||||
if (DashboardApp.State.currentList.length === 0) emptyState.style.display = 'flex';
|
||||
else this.applyFilters();
|
||||
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
loadingState.style.display = 'none';
|
||||
}
|
||||
},
|
||||
|
||||
updateStats: function() {
|
||||
const list = DashboardApp.State.currentList;
|
||||
const animeCount = list.filter(item => item.entry_type === 'ANIME').length;
|
||||
const mangaCount = list.filter(item => item.entry_type === 'MANGA').length;
|
||||
|
||||
document.getElementById('total-stat').textContent = list.length;
|
||||
if (document.getElementById('anime-stat')) document.getElementById('anime-stat').textContent = animeCount;
|
||||
if (document.getElementById('manga-stat')) document.getElementById('manga-stat').textContent = mangaCount;
|
||||
},
|
||||
|
||||
applyFilters: function() {
|
||||
const statusFilter = document.getElementById('status-filter').value;
|
||||
const typeFilter = document.getElementById('type-filter').value;
|
||||
const sortFilter = document.getElementById('sort-filter').value;
|
||||
const searchInput = document.getElementById('tracking-search-input');
|
||||
const searchQuery = searchInput ? searchInput.value.toLowerCase().trim() : '';
|
||||
|
||||
let result = [...DashboardApp.State.currentList];
|
||||
|
||||
if (searchQuery) {
|
||||
result = result.filter(item => (item.title ? item.title.toLowerCase() : '').includes(searchQuery));
|
||||
}
|
||||
|
||||
if (statusFilter !== 'all') result = result.filter(item => item.status === statusFilter);
|
||||
if (typeFilter !== 'all') result = result.filter(item => item.entry_type === typeFilter);
|
||||
|
||||
if (sortFilter === 'title') result.sort((a, b) => (a.title || '').localeCompare(b.title || ''));
|
||||
else if (sortFilter === 'score') result.sort((a, b) => (b.score || 0) - (a.score || 0));
|
||||
else result.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
|
||||
|
||||
DashboardApp.State.filteredList = result;
|
||||
DashboardApp.State.pagination.visibleCount = DashboardApp.State.pagination.itemsPerPage;
|
||||
this.render();
|
||||
},
|
||||
|
||||
render: function() {
|
||||
const container = document.getElementById('list-container');
|
||||
container.innerHTML = '';
|
||||
const list = DashboardApp.State.filteredList;
|
||||
const count = DashboardApp.State.pagination.visibleCount;
|
||||
|
||||
if (list.length === 0) {
|
||||
container.innerHTML = '<div class="empty-text" style="grid-column: 1/-1; text-align:center; color: var(--color-text-secondary);">No matches found</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
const itemsToShow = list.slice(0, count);
|
||||
itemsToShow.forEach(item => container.appendChild(this.createItemElement(item)));
|
||||
|
||||
if (count < list.length) {
|
||||
this.renderLoadMoreButton(container, list.length - count);
|
||||
}
|
||||
},
|
||||
|
||||
createItemElement: function(item) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'list-item';
|
||||
|
||||
const itemLink = this.getEntryLink(item);
|
||||
const posterUrl = item.poster || '/public/assets/placeholder.svg';
|
||||
const progress = item.progress || 0;
|
||||
const totalUnits = item.entry_type === 'ANIME' ? item.total_episodes || 0 : item.total_chapters || 0;
|
||||
const progressPercent = totalUnits > 0 ? (progress / totalUnits) * 100 : 0;
|
||||
const score = item.score ? item.score.toFixed(1) : null;
|
||||
const entryType = (item.entry_type).toUpperCase();
|
||||
|
||||
const statusLabels = {
|
||||
'CURRENT': entryType === 'ANIME' ? 'Watching' : 'Reading',
|
||||
'COMPLETED': 'Completed', 'PLANNING': 'Planning', 'PAUSED': 'Paused',
|
||||
'DROPPED': 'Dropped', 'REPEATING': entryType === 'ANIME' ? 'Rewatching' : 'Rereading'
|
||||
};
|
||||
|
||||
const extraInfo = [];
|
||||
if (item.repeat_count > 0) extraInfo.push(`<span class="meta-pill repeat-pill">🔁 ${item.repeat_count}</span>`);
|
||||
if (item.is_private) extraInfo.push('<span class="meta-pill private-pill">🔒 Private</span>');
|
||||
|
||||
div.innerHTML = `
|
||||
<a href="${itemLink}" class="item-poster-link">
|
||||
<img src="${posterUrl}" alt="${item.title}" class="item-poster" onerror="this.src='/public/assets/placeholder.svg'">
|
||||
</a>
|
||||
<div class="item-content">
|
||||
<div>
|
||||
<a href="${itemLink}" style="text-decoration:none; color:inherit;">
|
||||
<h3 class="item-title">${item.title || 'Unknown'}</h3>
|
||||
</a>
|
||||
<div class="item-meta">
|
||||
<span class="meta-pill status-pill">${statusLabels[item.status] || item.status}</span>
|
||||
<span class="meta-pill type-pill">${entryType}</span>
|
||||
<span class="meta-pill source-pill">${item.source.toUpperCase()}</span>
|
||||
${extraInfo.join('')}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="progress-bar-container"><div class="progress-bar" style="width: ${progressPercent}%"></div></div>
|
||||
<div class="progress-text">
|
||||
<span>${progress}${totalUnits > 0 ? ` / ${totalUnits}` : ''}</span>
|
||||
${score ? `<span class="score-badge">⭐ ${score}</span>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="edit-icon-btn">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15.232 5.232l3.536 3.536m-2.036-5.808a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.536L15.232 5.232z"/></svg>
|
||||
</button>
|
||||
`;
|
||||
|
||||
div.querySelector('.edit-icon-btn').onclick = (e) => {
|
||||
e.preventDefault(); e.stopPropagation();
|
||||
window.ListModalManager.currentData = item;
|
||||
window.ListModalManager.isInList = true;
|
||||
window.ListModalManager.currentEntry = item;
|
||||
window.ListModalManager.open(item, item.source || 'anilist');
|
||||
};
|
||||
|
||||
return div;
|
||||
},
|
||||
|
||||
renderLoadMoreButton: function(container, remaining) {
|
||||
const btnContainer = document.createElement('div');
|
||||
Object.assign(btnContainer.style, { gridColumn: "1 / -1", display: "flex", justifyContent: "center", padding: "2rem 0" });
|
||||
|
||||
const loadMoreBtn = document.createElement('button');
|
||||
loadMoreBtn.className = "btn-blur";
|
||||
loadMoreBtn.textContent = `Show All (${remaining} more)`;
|
||||
loadMoreBtn.onclick = () => {
|
||||
DashboardApp.State.pagination.visibleCount = DashboardApp.State.filteredList.length;
|
||||
this.render();
|
||||
};
|
||||
|
||||
btnContainer.appendChild(loadMoreBtn);
|
||||
container.appendChild(btnContainer);
|
||||
},
|
||||
|
||||
getEntryLink: function(item) {
|
||||
const baseRoute = (item.entry_type?.toUpperCase() === 'ANIME') ? '/anime' : '/book';
|
||||
return `${baseRoute}/${item.entry_id}`;
|
||||
}
|
||||
},
|
||||
|
||||
Library: {
|
||||
tempMatchContext: null,
|
||||
pollInterval: null,
|
||||
updateDownloadStatus: async function() {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/library/downloads/status`, {
|
||||
headers: window.AuthUtils.getSimpleAuthHeaders()
|
||||
});
|
||||
|
||||
if (!res.ok) return;
|
||||
|
||||
const data = await res.json();
|
||||
this.renderDownloadMonitor(data);
|
||||
|
||||
// Si hay descargas completadas nuevas, podríamos recargar la lista de archivos
|
||||
// (Opcional: lógica para detectar cambios y llamar a loadContent)
|
||||
|
||||
} catch (e) {
|
||||
console.error("Error polling downloads:", e);
|
||||
}
|
||||
},
|
||||
|
||||
renderDownloadMonitor: function(data) {
|
||||
const monitor = document.getElementById('downloads-monitor');
|
||||
const listContainer = document.getElementById('downloads-list-container');
|
||||
const activeCountEl = document.getElementById('dl-stat-active');
|
||||
|
||||
// Datos por defecto
|
||||
const downloads = data.downloads || { list: [], active: 0, failed: 0 };
|
||||
|
||||
// Actualizar contadores cabecera
|
||||
if(activeCountEl) activeCountEl.textContent = `${downloads.active} Active / ${downloads.list.length} Total`;
|
||||
|
||||
// Ocultar si vacío
|
||||
if (downloads.list.length === 0) {
|
||||
monitor.classList.add('hidden');
|
||||
return;
|
||||
}
|
||||
|
||||
monitor.classList.remove('hidden');
|
||||
|
||||
listContainer.innerHTML = downloads.list.map(item => {
|
||||
const fileName = item.fileName || `Unknown_File_${item.unitNumber}`;
|
||||
const folderName = item.folderName || 'Unsorted';
|
||||
const status = item.status || 'pending';
|
||||
const progress = item.progress || 0;
|
||||
const speed = item.speed || '0 KB/s';
|
||||
|
||||
const isCompleted = status === 'completed';
|
||||
const isFailed = status === 'failed';
|
||||
|
||||
let statusText = `${progress}%`;
|
||||
if (isCompleted) statusText = 'Done';
|
||||
if (isFailed) statusText = 'Failed';
|
||||
|
||||
const folderIcon = `<svg width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>`;
|
||||
|
||||
// ESTRUCTURA NUEVA: Más plana para permitir Flexbox horizontal
|
||||
return `
|
||||
<div class="dl-item compact">
|
||||
<div class="dl-left-col">
|
||||
<div class="dl-filename" title="${fileName}">${fileName}</div>
|
||||
<div class="dl-folder" title="${folderName}">${folderIcon} ${folderName}</div>
|
||||
</div>
|
||||
|
||||
<div class="dl-right-col">
|
||||
<div class="dl-meta-info">
|
||||
<span class="dl-speed">${isCompleted ? '' : speed}</span>
|
||||
<span class="dl-status-text ${status}">${statusText}</span>
|
||||
</div>
|
||||
<div class="dl-progress-track">
|
||||
<div class="dl-progress-fill ${status}" style="width: ${progress}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
},
|
||||
|
||||
startPolling: function() {
|
||||
if (this.pollInterval) clearInterval(this.pollInterval);
|
||||
this.updateDownloadStatus(); // Primera llamada inmediata
|
||||
this.pollInterval = setInterval(() => this.updateDownloadStatus(), 2000); // Cada 2 segundos
|
||||
},
|
||||
|
||||
stopPolling: function() {
|
||||
if (this.pollInterval) {
|
||||
clearInterval(this.pollInterval);
|
||||
this.pollInterval = null;
|
||||
}
|
||||
},
|
||||
loadStats: async function() {
|
||||
const types = ['anime', 'manga', 'novels'];
|
||||
const elements = { 'anime': 'local-anime-count', 'manga': 'local-manga-count', 'novels': 'local-novel-count' };
|
||||
|
||||
for (const type of types) {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/library/${type}`, { headers: window.AuthUtils.getSimpleAuthHeaders() });
|
||||
if(res.ok) {
|
||||
const data = await res.json();
|
||||
const el = document.getElementById(elements[type]);
|
||||
if (el) el.textContent = `${data.length} items`;
|
||||
}
|
||||
} catch (e) { console.error(e); }
|
||||
}
|
||||
},
|
||||
|
||||
loadContent: async function(type) {
|
||||
DashboardApp.State.currentLocalType = type;
|
||||
const container = document.getElementById('local-list-container');
|
||||
const loading = document.getElementById('local-loading');
|
||||
const searchInput = document.getElementById('local-search-input');
|
||||
|
||||
container.innerHTML = '';
|
||||
loading.style.display = 'flex';
|
||||
if(searchInput) searchInput.value = '';
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/library/${type}`, { headers: window.AuthUtils.getSimpleAuthHeaders() });
|
||||
if (!res.ok) throw new Error('Failed to load local content');
|
||||
|
||||
const data = await res.json();
|
||||
DashboardApp.State.localLibraryData = data;
|
||||
this.renderGrid(data, type);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
container.innerHTML = `<div class="empty-state"><p>Error loading library</p></div>`;
|
||||
} finally {
|
||||
loading.style.display = 'none';
|
||||
}
|
||||
},
|
||||
|
||||
renderGrid: function(entries, type) {
|
||||
const container = document.getElementById('local-list-container');
|
||||
container.innerHTML = '';
|
||||
|
||||
if (entries.length === 0) {
|
||||
container.innerHTML = `
|
||||
<div class="empty-state" style="grid-column: 1/-1;">
|
||||
<p>No ${type} files found.</p>
|
||||
<button onclick="DashboardApp.Library.triggerScan('incremental')" class="btn-blur">Scan Now</button>
|
||||
</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
entries.forEach(entry => {
|
||||
const isMatched = entry.matched && entry.metadata;
|
||||
const meta = entry.metadata || {};
|
||||
let poster = meta.coverImage?.large || '/public/assets/placeholder.svg';
|
||||
|
||||
let title = isMatched ? (meta.title?.english || meta.title?.romaji) : entry.path;
|
||||
if (!isMatched) title = title.replace(/\[.*?\]|\(.*?\)|\.mkv|\.mp4/g, '').trim();
|
||||
|
||||
const url = isMatched ? (type === 'anime' ? `/anime/${meta.id}` : `/book/${meta.id}`) : '#';
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.className = 'list-item';
|
||||
div.innerHTML = `
|
||||
<div class="item-poster-link" onclick="${isMatched ? `window.location='${url}'` : ''}" style="cursor: ${isMatched ? 'pointer' : 'default'}">
|
||||
<img src="${poster}" class="item-poster" loading="lazy">
|
||||
${!isMatched ? `<div class="unmatched-badge"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg> UNMATCHED</div>` : ''}
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<h3 class="item-title" title="${entry.path}">${title}</h3>
|
||||
<div class="item-meta">
|
||||
<span class="meta-pill type-pill">${entry.files} FILES</span>
|
||||
${isMatched ? '<span class="meta-pill status-pill">MATCHED</span>' : ''}
|
||||
</div>
|
||||
<div class="folder-path-tooltip">${entry.path}</div>
|
||||
</div>
|
||||
<button class="edit-icon-btn" onclick="DashboardApp.Library.openManualMatch('${entry.id}', '${type}')" title="${isMatched ? 'Rematch' : 'Fix Match'}">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
|
||||
</button>
|
||||
`;
|
||||
container.appendChild(div);
|
||||
});
|
||||
},
|
||||
|
||||
filterContent: function(query) {
|
||||
if (!DashboardApp.State.localLibraryData) return;
|
||||
const lowerQuery = query.toLowerCase();
|
||||
const filtered = DashboardApp.State.localLibraryData.filter(entry => {
|
||||
const metaTitle = entry.metadata?.title?.english || entry.metadata?.title?.romaji || '';
|
||||
const folderName = entry.folder_name || '';
|
||||
return metaTitle.toLowerCase().includes(lowerQuery) || folderName.toLowerCase().includes(lowerQuery);
|
||||
});
|
||||
this.renderGrid(filtered, DashboardApp.State.currentLocalType);
|
||||
},
|
||||
|
||||
triggerScan: async function(mode) {
|
||||
const consoleDiv = document.getElementById('scan-console');
|
||||
const statusText = document.getElementById('scan-status-text');
|
||||
if(consoleDiv) consoleDiv.style.display = 'flex';
|
||||
if(statusText) statusText.textContent = `Starting ${mode} scan...`;
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/library/scan?mode=${mode}`, {
|
||||
method: 'POST', headers: window.AuthUtils.getSimpleAuthHeaders()
|
||||
});
|
||||
if (res.ok) {
|
||||
if(statusText) statusText.textContent = "Scan completed successfully!";
|
||||
setTimeout(() => { if(consoleDiv) consoleDiv.style.display = 'none'; this.loadStats(); }, 3000);
|
||||
} else throw new Error('Scan failed');
|
||||
} catch (e) {
|
||||
if(statusText) { statusText.textContent = "Error during scan."; statusText.style.color = 'var(--color-danger)'; }
|
||||
}
|
||||
},
|
||||
|
||||
openManualMatch: function(id, type) {
|
||||
const item = DashboardApp.State.localLibraryData.find(x => x.id === id);
|
||||
const pathName = item ? item.path : 'Unknown path';
|
||||
|
||||
this.tempMatchContext = { id, type };
|
||||
|
||||
document.getElementById('manual-match-path').textContent = pathName;
|
||||
document.getElementById('manual-match-id').value = '';
|
||||
|
||||
const modal = document.getElementById('manual-match-modal');
|
||||
modal.classList.remove('hidden');
|
||||
|
||||
setTimeout(() => document.getElementById('manual-match-id').focus(), 100);
|
||||
},
|
||||
|
||||
closeManualMatch: function() {
|
||||
document.getElementById('manual-match-modal').classList.add('hidden');
|
||||
this.tempMatchContext = null;
|
||||
},
|
||||
|
||||
submitManualMatch: async function() {
|
||||
if (!this.tempMatchContext) return;
|
||||
|
||||
const newId = document.getElementById('manual-match-id').value;
|
||||
if (!newId) {
|
||||
alert("Please enter a valid ID");
|
||||
return;
|
||||
}
|
||||
|
||||
const { id, type } = this.tempMatchContext;
|
||||
|
||||
const confirmBtn = document.querySelector('#manual-match-modal .btn-primary');
|
||||
const originalText = confirmBtn.textContent;
|
||||
confirmBtn.textContent = "Matching...";
|
||||
confirmBtn.disabled = true;
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/library/${type}/${id}/match`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
...window.AuthUtils.getSimpleAuthHeaders(),
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
source: 'anilist',
|
||||
matched_id: parseInt(newId)
|
||||
})
|
||||
});
|
||||
|
||||
if(res.ok) {
|
||||
this.closeManualMatch();
|
||||
this.loadContent(type);
|
||||
} else {
|
||||
const errData = await res.json();
|
||||
alert("Failed to match: " + (errData.error || "Unknown error"));
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
alert("Connection error");
|
||||
} finally {
|
||||
confirmBtn.textContent = originalText;
|
||||
confirmBtn.disabled = false;
|
||||
}
|
||||
},
|
||||
|
||||
switchType: function(type, btnElement) {
|
||||
document.querySelectorAll('.type-pill-btn').forEach(b => b.classList.remove('active'));
|
||||
if(btnElement) btnElement.classList.add('active');
|
||||
this.loadContent(type);
|
||||
}
|
||||
},
|
||||
|
||||
UI: {
|
||||
setupTabSystem: function() {
|
||||
const tabs = document.querySelectorAll('.nav-pill');
|
||||
const sections = document.querySelectorAll('.tab-section');
|
||||
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
// Gestión de clases activas
|
||||
tabs.forEach(t => t.classList.remove('active'));
|
||||
tab.classList.add('active');
|
||||
|
||||
const targetId = `section-${tab.dataset.target}`;
|
||||
sections.forEach(sec => {
|
||||
sec.classList.remove('active');
|
||||
if (sec.id === targetId) sec.classList.add('active');
|
||||
});
|
||||
|
||||
// Lógica específica por pestaña
|
||||
if (tab.dataset.target === 'local') {
|
||||
DashboardApp.Library.loadStats();
|
||||
DashboardApp.Library.loadContent(DashboardApp.State.currentLocalType || 'anime');
|
||||
DashboardApp.Library.startPolling(); // <--- INICIAR POLLING
|
||||
} else {
|
||||
DashboardApp.Library.stopPolling(); // <--- DETENER POLLING AL SALIR
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
Utils: {
|
||||
fileToBase64: (file) => new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => resolve(reader.result);
|
||||
reader.onerror = error => reject(error);
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
DashboardApp.init();
|
||||
});
|
||||
|
||||
window.switchLocalType = (type, btn) => DashboardApp.Library.switchType(type, btn);
|
||||
|
||||
window.saveToList = async () => {
|
||||
const data = window.ListModalManager.currentData;
|
||||
if (!data) return;
|
||||
const idToSave = data.entry_id || data.id;
|
||||
await window.ListModalManager.save(idToSave, data.source || 'anilist');
|
||||
await DashboardApp.Tracking.load();
|
||||
};
|
||||
|
||||
window.deleteFromList = async () => {
|
||||
const data = window.ListModalManager.currentData;
|
||||
if (!data) return;
|
||||
const idToDelete = data.entry_id || data.id;
|
||||
await window.ListModalManager.delete(idToDelete, data.source || 'anilist');
|
||||
await DashboardApp.Tracking.load();
|
||||
};
|
||||
|
||||
window.closeAddToListModal = () => window.ListModalManager.close();
|
||||
@@ -1,131 +0,0 @@
|
||||
class CreateRoomModal {
|
||||
constructor() {
|
||||
this.modalId = 'cr-modal-overlay';
|
||||
this.isRendered = false;
|
||||
this.render(); // Crear el HTML en el DOM al instanciar
|
||||
}
|
||||
|
||||
render() {
|
||||
if (document.getElementById(this.modalId)) return;
|
||||
|
||||
const modalHtml = `
|
||||
<div class="cr-modal-overlay" id="${this.modalId}">
|
||||
<div class="cr-modal-content">
|
||||
<button class="cr-modal-close" id="cr-close">✕</button>
|
||||
<h2 class="cr-modal-title">Create Watch Party</h2>
|
||||
|
||||
<form id="cr-form">
|
||||
<div class="cr-form-group">
|
||||
<label>Room Name</label>
|
||||
<input type="text" class="cr-input" name="name" placeholder="My Awesome Room" required maxlength="50" />
|
||||
</div>
|
||||
|
||||
<div class="cr-form-group">
|
||||
<label>Password (Optional)</label>
|
||||
<input type="password" class="cr-input" name="password" placeholder="Leave empty for public" maxlength="50" />
|
||||
</div>
|
||||
|
||||
<div class="cr-form-group cr-checkbox-group">
|
||||
<label class="cr-checkbox">
|
||||
<input type="checkbox" name="expose" />
|
||||
<span>Generate public link (via tunnel)</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="cr-actions">
|
||||
<button type="button" class="cr-btn-cancel" id="cr-cancel">Cancel</button>
|
||||
<button type="submit" class="cr-btn-confirm">Create Room</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
||||
this.bindEvents();
|
||||
this.isRendered = true;
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
const modal = document.getElementById(this.modalId);
|
||||
const closeBtn = document.getElementById('cr-close');
|
||||
const cancelBtn = document.getElementById('cr-cancel');
|
||||
const form = document.getElementById('cr-form');
|
||||
|
||||
const close = () => this.close();
|
||||
|
||||
closeBtn.onclick = close;
|
||||
cancelBtn.onclick = close;
|
||||
|
||||
// Cerrar si clicamos fuera del contenido
|
||||
modal.onclick = (e) => {
|
||||
if (e.target === modal) close();
|
||||
};
|
||||
|
||||
form.onsubmit = (e) => this.handleSubmit(e);
|
||||
}
|
||||
|
||||
open() {
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token) {
|
||||
// Aquí puedes disparar tu modal de login o redirigir
|
||||
alert('You must be logged in to create a room');
|
||||
window.location.href = '/login'; // Opcional
|
||||
return;
|
||||
}
|
||||
|
||||
const modal = document.getElementById(this.modalId);
|
||||
modal.classList.add('show');
|
||||
document.querySelector('#cr-form input[name="name"]').focus();
|
||||
}
|
||||
|
||||
close() {
|
||||
const modal = document.getElementById(this.modalId);
|
||||
modal.classList.remove('show');
|
||||
document.getElementById('cr-form').reset();
|
||||
}
|
||||
|
||||
async handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
const btn = e.target.querySelector('button[type="submit"]');
|
||||
const originalText = btn.textContent;
|
||||
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'Creating...';
|
||||
|
||||
const formData = new FormData(e.target);
|
||||
const expose = formData.get('expose') === 'on';
|
||||
const name = formData.get('name').trim();
|
||||
const password = formData.get('password').trim();
|
||||
const token = localStorage.getItem('token');
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/rooms', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name,
|
||||
password: password || undefined,
|
||||
expose
|
||||
})
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.error || 'Failed to create room');
|
||||
|
||||
this.close();
|
||||
|
||||
window.location.href = `/room?id=${data.room.id}`
|
||||
} catch (err) {
|
||||
alert(err.message);
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.textContent = originalText;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.CreateRoomModal = CreateRoomModal;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,213 +0,0 @@
|
||||
const API_BASE2 = '/api/config';
|
||||
let currentConfig = {};
|
||||
let currentSchema = {};
|
||||
let activeSection = '';
|
||||
let modal, navContainer, formContent, form;
|
||||
|
||||
window.toggleSettingsModal = async (forceClose = false) => {
|
||||
modal = document.getElementById('settings-modal');
|
||||
navContainer = document.getElementById('config-nav');
|
||||
formContent = document.getElementById('config-section-content');
|
||||
form = document.getElementById('config-form');
|
||||
|
||||
if (!modal) return;
|
||||
|
||||
if (forceClose) {
|
||||
modal.classList.add('hidden');
|
||||
} else {
|
||||
const isHidden = modal.classList.contains('hidden');
|
||||
if (isHidden) {
|
||||
modal.classList.remove('hidden');
|
||||
await loadSettings();
|
||||
} else {
|
||||
modal.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
async function loadSettings() {
|
||||
if (!formContent) return;
|
||||
|
||||
// Loading State
|
||||
formContent.innerHTML = `
|
||||
<div class="skeleton-loader">
|
||||
<div class="skeleton title-skeleton"></div>
|
||||
<div class="skeleton field-skeleton"></div>
|
||||
<div class="skeleton field-skeleton"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
try {
|
||||
const res = await fetch(API_BASE2);
|
||||
if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
|
||||
|
||||
const data = await res.json();
|
||||
if (data.error) throw new Error(data.error);
|
||||
|
||||
// --- CORRECCIÓN AQUI ---
|
||||
// Tu JSON devuelve "values", el código original buscaba "config"
|
||||
currentConfig = data.values || data.config || data;
|
||||
currentSchema = data.schema || {};
|
||||
|
||||
renderNav();
|
||||
|
||||
if (!activeSection || !currentConfig[activeSection]) {
|
||||
activeSection = Object.keys(currentConfig)[0];
|
||||
}
|
||||
|
||||
switchSection(activeSection);
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error loading settings:', err);
|
||||
formContent.innerHTML = `
|
||||
<div style="padding: 2rem; text-align: center;">
|
||||
<p style="color: #ef4444; margin-bottom: 1rem;">Failed to load settings</p>
|
||||
<p style="color: #888; font-size: 0.9rem;">${err.message}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
function switchSection(section) {
|
||||
if (!currentConfig[section]) return;
|
||||
activeSection = section;
|
||||
renderNav();
|
||||
|
||||
const sectionData = currentConfig[section];
|
||||
const sectionSchema = currentSchema[section] || {};
|
||||
|
||||
formContent.innerHTML = `
|
||||
<h2 class="section-title" style="margin-bottom: 2rem; text-transform: capitalize; font-size: 1.8rem;">
|
||||
${section.replace(/_/g, ' ')}
|
||||
</h2>
|
||||
`;
|
||||
|
||||
Object.entries(sectionData).forEach(([key, value]) => {
|
||||
const group = document.createElement('div');
|
||||
group.className = 'config-group';
|
||||
|
||||
const isBool = typeof value === 'boolean';
|
||||
const inputId = `input-${section}-${key}`;
|
||||
const labelText = key.replace(/_/g, ' ');
|
||||
|
||||
// Obtener descripción
|
||||
const description = sectionSchema[key]?.description || '';
|
||||
const descHtml = description
|
||||
? `<p class="config-description">${description}</p>`
|
||||
: '';
|
||||
|
||||
if (isBool) {
|
||||
group.innerHTML = `
|
||||
<div style="display: flex; flex-direction: column; gap: 8px;">
|
||||
<div style="display: flex; align-items: center; gap: 0.8rem;">
|
||||
<input type="checkbox" id="${inputId}" name="${key}" ${value ? 'checked' : ''}
|
||||
style="width: 20px; height: 20px; accent-color: var(--accent);">
|
||||
<label for="${inputId}" style="margin: 0; cursor: pointer; font-size: 1rem;">${labelText}</label>
|
||||
</div>
|
||||
${descHtml} </div>
|
||||
`;
|
||||
} else {
|
||||
// --- CAMBIO PRINCIPAL AQUI ---
|
||||
// Movimos ${descHtml} para que esté DESPUÉS del input
|
||||
group.innerHTML = `
|
||||
<label for="${inputId}">${labelText}</label>
|
||||
<input class="config-input" id="${inputId}" name="${key}"
|
||||
type="${typeof value === 'number' ? 'number' : 'text'}"
|
||||
value="${value || ''}"
|
||||
placeholder="Not set">
|
||||
${descHtml}
|
||||
`;
|
||||
}
|
||||
|
||||
formContent.appendChild(group);
|
||||
});
|
||||
}
|
||||
|
||||
function renderNav() {
|
||||
if (!navContainer) return;
|
||||
navContainer.innerHTML = '';
|
||||
|
||||
Object.keys(currentConfig).forEach(section => {
|
||||
const btn = document.createElement('div');
|
||||
btn.className = `nav-item ${section === activeSection ? 'active' : ''}`;
|
||||
|
||||
// Icono opcional según la sección (puedes personalizar esto)
|
||||
let icon = '';
|
||||
if(section === 'library') icon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>';
|
||||
if(section === 'paths') icon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><folder></folder><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
|
||||
|
||||
btn.innerHTML = `${icon} ${section}`;
|
||||
btn.onclick = () => switchSection(section);
|
||||
navContainer.appendChild(btn);
|
||||
});
|
||||
}
|
||||
|
||||
// Handler de guardado
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.addEventListener('submit', async (e) => {
|
||||
if (e.target.id === 'config-form') {
|
||||
e.preventDefault();
|
||||
await saveSettings();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
async function saveSettings() {
|
||||
if (!form || !activeSection) return;
|
||||
|
||||
const updatedData = {};
|
||||
const sectionConfig = currentConfig[activeSection];
|
||||
|
||||
Object.keys(sectionConfig).forEach(key => {
|
||||
const input = form.elements[key];
|
||||
if (!input) return;
|
||||
|
||||
if (input.type === 'checkbox') {
|
||||
updatedData[key] = input.checked;
|
||||
} else if (input.type === 'number') {
|
||||
updatedData[key] = Number(input.value);
|
||||
} else {
|
||||
updatedData[key] = input.value;
|
||||
}
|
||||
});
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE2}/${activeSection}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(updatedData)
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
currentConfig[activeSection] = updatedData; // Actualizamos localmente
|
||||
showNotification('Settings saved successfully!');
|
||||
} else {
|
||||
throw new Error('Failed to save settings');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
showNotification('Error saving settings', true);
|
||||
}
|
||||
}
|
||||
|
||||
function showNotification(msg, isError = false) {
|
||||
const notification = document.createElement('div');
|
||||
const bg = isError ? '#ef4444' : '#10b981';
|
||||
|
||||
notification.style.cssText = `
|
||||
position: fixed; top: 20px; right: 20px;
|
||||
background: ${bg}; color: white;
|
||||
padding: 1rem 1.5rem; border-radius: 8px; font-weight: 600;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 20000;
|
||||
animation: slideIn 0.3s ease-out; display: flex; align-items: center; gap: 10px;
|
||||
`;
|
||||
notification.innerHTML = isError
|
||||
? `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg> ${msg}`
|
||||
: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg> ${msg}`;
|
||||
|
||||
document.body.appendChild(notification);
|
||||
setTimeout(() => {
|
||||
notification.style.animation = 'slideOut 0.3s ease-out';
|
||||
setTimeout(() => notification.remove(), 300);
|
||||
}, 3000);
|
||||
}
|
||||
@@ -1,102 +0,0 @@
|
||||
const Gitea_OWNER = "ItsSkaiya";
|
||||
const Gitea_REPO = "WaifuBoard";
|
||||
const CURRENT_VERSION = "v2.0.0";
|
||||
const UPDATE_CHECK_INTERVAL = 5 * 60 * 1000;
|
||||
|
||||
let currentVersionDisplay;
|
||||
let latestVersionDisplay;
|
||||
let updateToast;
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
currentVersionDisplay = document.getElementById("currentVersionDisplay");
|
||||
latestVersionDisplay = document.getElementById("latestVersionDisplay");
|
||||
updateToast = document.getElementById("updateToast");
|
||||
|
||||
if (currentVersionDisplay) {
|
||||
currentVersionDisplay.textContent = CURRENT_VERSION;
|
||||
}
|
||||
|
||||
checkForUpdates();
|
||||
|
||||
setInterval(checkForUpdates, UPDATE_CHECK_INTERVAL);
|
||||
});
|
||||
|
||||
function showToast(latestVersion) {
|
||||
if (latestVersionDisplay && updateToast) {
|
||||
latestVersionDisplay.textContent = latestVersion;
|
||||
updateToast.classList.add("update-available");
|
||||
updateToast.classList.remove("hidden");
|
||||
} else {
|
||||
console.error(
|
||||
"Error: Cannot display toast because one or more DOM elements were not found.",
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function hideToast() {
|
||||
if (updateToast) {
|
||||
updateToast.classList.add("hidden");
|
||||
updateToast.classList.remove("update-available");
|
||||
}
|
||||
}
|
||||
|
||||
function isVersionOutdated(versionA, versionB) {
|
||||
const vA = versionA.replace(/^v/, "").split(".").map(Number);
|
||||
const vB = versionB.replace(/^v/, "").split(".").map(Number);
|
||||
|
||||
for (let i = 0; i < Math.max(vA.length, vB.length); i++) {
|
||||
const numA = vA[i] || 0;
|
||||
const numB = vB[i] || 0;
|
||||
|
||||
if (numA < numB) return true;
|
||||
if (numA > numB) return false;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
async function checkForUpdates() {
|
||||
console.log(`Checking for updates for ${Gitea_OWNER}/${Gitea_REPO}...`);
|
||||
|
||||
const apiUrl = `https://git.waifuboard.app/api/v1/repos/${Gitea_OWNER}/${Gitea_REPO}/releases/latest`;
|
||||
|
||||
try {
|
||||
const response = await fetch(apiUrl, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 404) {
|
||||
console.info("No releases found for this repository.");
|
||||
return;
|
||||
}
|
||||
throw new Error(
|
||||
`Gitea API error: ${response.status} ${response.statusText}`,
|
||||
);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
const latestVersion = data.tag_name;
|
||||
|
||||
if (!latestVersion) {
|
||||
console.warn("Release found but no tag_name present");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`Latest Gitea Release: ${latestVersion}`);
|
||||
|
||||
if (isVersionOutdated(CURRENT_VERSION, latestVersion)) {
|
||||
console.warn("Update available!");
|
||||
showToast(latestVersion);
|
||||
} else {
|
||||
console.info("Package is up to date.");
|
||||
hideToast();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch Gitea release:", error);
|
||||
}
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
const ContinueWatchingManager = {
|
||||
API_BASE: '/api',
|
||||
|
||||
async load(containerId, status = 'watching', entryType = 'ANIME') {
|
||||
if (!AuthUtils.isAuthenticated()) return;
|
||||
|
||||
const container = document.getElementById(containerId);
|
||||
if (!container) return;
|
||||
|
||||
try {
|
||||
const res = await fetch(`${this.API_BASE}/list/filter?status=${status}&entry_type=${entryType}`, {
|
||||
headers: AuthUtils.getAuthHeaders()
|
||||
});
|
||||
|
||||
if (!res.ok) return;
|
||||
|
||||
const data = await res.json();
|
||||
const list = data.results || [];
|
||||
|
||||
this.render(containerId, list, entryType);
|
||||
} catch (err) {
|
||||
console.error(`Continue ${entryType === 'ANIME' ? 'Watching' : 'Reading'} Error:`, err);
|
||||
}
|
||||
},
|
||||
|
||||
render(containerId, list, entryType = 'ANIME') {
|
||||
const container = document.getElementById(containerId);
|
||||
if (!container) return;
|
||||
|
||||
container.innerHTML = '';
|
||||
|
||||
if (list.length === 0) {
|
||||
const label = entryType === 'ANIME' ? 'watching anime' : 'reading manga';
|
||||
container.innerHTML = `<div style="padding:1rem; color:#888">No ${label}</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
list.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
|
||||
|
||||
list.forEach(item => {
|
||||
const card = this.createCard(item, entryType);
|
||||
container.appendChild(card);
|
||||
});
|
||||
},
|
||||
|
||||
createCard(item, entryType) {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'card';
|
||||
|
||||
const nextProgress = (item.progress || 0) + 1;
|
||||
let url;
|
||||
|
||||
if (entryType === 'ANIME') {
|
||||
url = item.source === 'anilist'
|
||||
? `/anime/${item.entry_id}?episode=${nextProgress}`
|
||||
: `/anime/${item.entry_id}/${item.source}/?episode=${nextProgress}`;
|
||||
} else {
|
||||
url = item.source === 'anilist'
|
||||
? `/book/${item.entry_id}?chapter=${nextProgress}`
|
||||
: `/read/${item.source}/${nextProgress}/${item.entry_id}?source=${item.source}`;
|
||||
}
|
||||
|
||||
el.onclick = () => window.location.href = url;
|
||||
|
||||
const progressText = item.total_episodes || item.total_chapters
|
||||
? `${item.progress || 0}/${item.total_episodes || item.total_chapters}`
|
||||
: `${item.progress || 0}`;
|
||||
|
||||
const unitLabel = entryType === 'ANIME' ? 'Ep' : 'Ch';
|
||||
|
||||
el.innerHTML = `
|
||||
<div class="card-img-wrap">
|
||||
<img src="${item.poster}" loading="lazy" alt="${item.title}">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3>${item.title}</h3>
|
||||
<p>${unitLabel} ${progressText} - ${item.source}</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return el;
|
||||
}
|
||||
};
|
||||
|
||||
window.ContinueWatchingManager = ContinueWatchingManager;
|
||||
@@ -1,171 +0,0 @@
|
||||
const MatchModal = (function() {
|
||||
let _config = {
|
||||
onSearch: async (query, provider) => [], // Debe devolver Array de objetos
|
||||
onSelect: (item, provider) => {},
|
||||
provider: 'generic'
|
||||
};
|
||||
|
||||
let elements = {};
|
||||
let searchTimeout = null;
|
||||
|
||||
function init() {
|
||||
if (document.getElementById('waifu-match-modal')) return;
|
||||
|
||||
// Inyectar HTML
|
||||
const modalHTML = `
|
||||
<div class="match-modal-overlay" id="waifu-match-modal">
|
||||
<div class="match-modal-content">
|
||||
<div class="match-header">
|
||||
<h3 class="match-title">Manual Match <span id="match-provider-badge" style="opacity:0.6; font-size:0.8em; margin-left:8px;"></span></h3>
|
||||
<button class="match-close-btn" id="match-close-btn">✕</button>
|
||||
</div>
|
||||
|
||||
<div class="match-search-container">
|
||||
<input type="text" id="match-input" class="match-input" placeholder="Search title..." autocomplete="off">
|
||||
<button id="match-btn-action" class="match-search-btn">Search</button>
|
||||
</div>
|
||||
|
||||
<div class="match-results-body" id="match-results-container">
|
||||
<div class="match-msg">Type to start searching...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.insertAdjacentHTML('beforeend', modalHTML);
|
||||
|
||||
// Cachear elementos
|
||||
elements = {
|
||||
overlay: document.getElementById('waifu-match-modal'),
|
||||
input: document.getElementById('match-input'),
|
||||
results: document.getElementById('match-results-container'),
|
||||
badge: document.getElementById('match-provider-badge'),
|
||||
closeBtn: document.getElementById('match-close-btn'),
|
||||
searchBtn: document.getElementById('match-btn-action')
|
||||
};
|
||||
|
||||
// Event Listeners
|
||||
elements.closeBtn.onclick = close;
|
||||
elements.overlay.onclick = (e) => { if(e.target === elements.overlay) close(); };
|
||||
|
||||
// Búsqueda al hacer clic
|
||||
elements.searchBtn.onclick = () => performSearch(elements.input.value);
|
||||
|
||||
// Búsqueda al escribir (Debounce)
|
||||
elements.input.addEventListener('input', (e) => {
|
||||
clearTimeout(searchTimeout);
|
||||
if(e.target.value.trim().length === 0) return;
|
||||
searchTimeout = setTimeout(() => performSearch(e.target.value), 600);
|
||||
});
|
||||
|
||||
// Enter key
|
||||
elements.input.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') performSearch(elements.input.value);
|
||||
});
|
||||
}
|
||||
|
||||
function open(options) {
|
||||
init(); // Asegurar que el DOM existe
|
||||
|
||||
_config = { ..._config, ...options };
|
||||
|
||||
// Resetear UI
|
||||
elements.input.value = options.initialQuery || '';
|
||||
elements.results.innerHTML = '<div class="match-msg">Search above to find matches...</div>';
|
||||
elements.badge.innerText = options.provider ? `(${options.provider})` : '';
|
||||
|
||||
// Mostrar Modal
|
||||
elements.overlay.classList.add('active');
|
||||
|
||||
// Auto-search si hay query inicial
|
||||
if (options.initialQuery) {
|
||||
performSearch(options.initialQuery);
|
||||
}
|
||||
|
||||
setTimeout(() => elements.input.focus(), 100);
|
||||
}
|
||||
|
||||
function close() {
|
||||
if(elements.overlay) elements.overlay.classList.remove('active');
|
||||
}
|
||||
|
||||
async function performSearch(query) {
|
||||
if (!query || query.trim().length < 2) return;
|
||||
|
||||
elements.results.innerHTML = '<div class="match-spinner"></div>';
|
||||
|
||||
try {
|
||||
// Ejecutar la función de búsqueda pasada en la config
|
||||
const results = await _config.onSearch(query, _config.provider);
|
||||
renderResults(results);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
elements.results.innerHTML = '<div class="match-msg error">Error searching provider.</div>';
|
||||
}
|
||||
}
|
||||
|
||||
function renderResults(results) {
|
||||
elements.results.innerHTML = '';
|
||||
|
||||
if (!results || results.length === 0) {
|
||||
elements.results.innerHTML = '<div class="match-msg">No matches found.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
const grid = document.createElement('div');
|
||||
grid.className = 'match-list-grid';
|
||||
|
||||
results.forEach(item => {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'match-item';
|
||||
|
||||
// Normalización de datos para asegurar compatibilidad con Anime/Libros
|
||||
const img = item.coverImage?.large || item.coverImage || item.image || '/public/assets/no-image.png';
|
||||
const title = item.title?.english || item.title?.romaji || item.title || 'Unknown Title';
|
||||
const meta = item.releaseDate || item.year || item.startDate?.year || '';
|
||||
const url = item.url || item.externalUrl || null;
|
||||
|
||||
el.innerHTML = `
|
||||
<img src="${img}" class="match-poster" loading="lazy">
|
||||
<div class="match-info">
|
||||
<div class="match-item-title">${title}</div>
|
||||
<div class="match-item-meta">${meta}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Botón de enlace externo (si existe URL)
|
||||
if (url) {
|
||||
const linkBtn = document.createElement('a');
|
||||
linkBtn.href = url;
|
||||
linkBtn.target = "_blank";
|
||||
linkBtn.className = "match-link-btn";
|
||||
linkBtn.title = "View Source";
|
||||
linkBtn.innerHTML = `
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
|
||||
<polyline points="15 3 21 3 21 9"></polyline>
|
||||
<line x1="10" y1="14" x2="21" y2="3"></line>
|
||||
</svg>
|
||||
`;
|
||||
// Evitar que el click en el enlace dispare el select
|
||||
linkBtn.onclick = (e) => e.stopPropagation();
|
||||
el.appendChild(linkBtn);
|
||||
}
|
||||
|
||||
// Click en la tarjeta selecciona
|
||||
el.onclick = () => {
|
||||
_config.onSelect(item);
|
||||
close();
|
||||
};
|
||||
|
||||
grid.appendChild(el);
|
||||
});
|
||||
|
||||
elements.results.appendChild(grid);
|
||||
}
|
||||
|
||||
return {
|
||||
open,
|
||||
close
|
||||
};
|
||||
})();
|
||||
@@ -1,131 +0,0 @@
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import os from 'os';
|
||||
import yaml from 'js-yaml';
|
||||
import crypto from 'crypto';
|
||||
|
||||
const BASE_DIR = path.join(os.homedir(), 'WaifuBoards');
|
||||
const CONFIG_PATH = path.join(BASE_DIR, 'config.yaml');
|
||||
|
||||
const DEFAULT_CONFIG = {
|
||||
library: {
|
||||
anime: null,
|
||||
manga: null,
|
||||
novels: null
|
||||
},
|
||||
paths: {
|
||||
mpv: null,
|
||||
ffmpeg: null,
|
||||
ffprobe: null,
|
||||
cloudflared: null,
|
||||
},
|
||||
server: {
|
||||
jwt_secret: null
|
||||
}
|
||||
};
|
||||
|
||||
export const CONFIG_SCHEMA = {
|
||||
library: {
|
||||
anime: { description: "Path where anime is stored" },
|
||||
manga: { description: "Path where manga is stored" },
|
||||
novels: { description: "Path where novels are stored" }
|
||||
},
|
||||
paths: {
|
||||
mpv: { description: "Required to open anime episodes in mpv on desktop version." },
|
||||
ffmpeg: { description: "Required for downloading anime episodes." },
|
||||
ffprobe: { description: "Required for watching local anime episodes." },
|
||||
cloudflared: { description: "Required for creating pubic rooms." }
|
||||
}
|
||||
};
|
||||
|
||||
function ensureConfigFile() {
|
||||
if (!fs.existsSync(BASE_DIR)) {
|
||||
fs.mkdirSync(BASE_DIR, { recursive: true });
|
||||
}
|
||||
|
||||
let configExists = fs.existsSync(CONFIG_PATH);
|
||||
|
||||
if (!configExists) {
|
||||
fs.writeFileSync(
|
||||
CONFIG_PATH,
|
||||
yaml.dump(DEFAULT_CONFIG),
|
||||
'utf8'
|
||||
);
|
||||
}
|
||||
|
||||
const raw = fs.readFileSync(CONFIG_PATH, 'utf8');
|
||||
const loaded = yaml.load(raw) || {};
|
||||
|
||||
if (!loaded.server) loaded.server = {};
|
||||
if (!loaded.server.jwt_secret) {
|
||||
loaded.server.jwt_secret = crypto.randomBytes(32).toString('hex');
|
||||
fs.writeFileSync(CONFIG_PATH, yaml.dump(deepMerge(structuredClone(DEFAULT_CONFIG), loaded)), 'utf8');
|
||||
}
|
||||
}
|
||||
|
||||
export function getPublicConfig() {
|
||||
const { values } = getConfig();
|
||||
const publicConfig = structuredClone(values);
|
||||
if (publicConfig.server) delete publicConfig.server.jwt_secret;
|
||||
return publicConfig;
|
||||
}
|
||||
|
||||
export function getConfig() {
|
||||
ensureConfigFile();
|
||||
const raw = fs.readFileSync(CONFIG_PATH, 'utf8');
|
||||
const loaded = yaml.load(raw) || {};
|
||||
|
||||
return {
|
||||
values: deepMerge(structuredClone(DEFAULT_CONFIG), loaded),
|
||||
schema: CONFIG_SCHEMA
|
||||
};
|
||||
}
|
||||
|
||||
function sanitizeLoadedConfig(loaded) {
|
||||
return {
|
||||
library: loaded.library,
|
||||
paths: loaded.paths
|
||||
};
|
||||
}
|
||||
|
||||
export function setConfig(partialConfig) {
|
||||
ensureConfigFile();
|
||||
|
||||
const raw = fs.readFileSync(CONFIG_PATH, 'utf8');
|
||||
const loadedRaw = yaml.load(raw) || {};
|
||||
const loaded = sanitizeLoadedConfig(loadedRaw);
|
||||
|
||||
const next = deepMerge(
|
||||
structuredClone(DEFAULT_CONFIG),
|
||||
deepMerge(loaded, partialConfig)
|
||||
);
|
||||
|
||||
const toSave = {
|
||||
library: next.library,
|
||||
paths: next.paths
|
||||
};
|
||||
|
||||
fs.writeFileSync(CONFIG_PATH, yaml.dump(toSave), 'utf8');
|
||||
return next;
|
||||
}
|
||||
|
||||
function deepMerge(target, source) {
|
||||
for (const key in source) {
|
||||
if (
|
||||
source[key] &&
|
||||
typeof source[key] === 'object' &&
|
||||
!Array.isArray(source[key])
|
||||
) {
|
||||
target[key] = deepMerge(target[key] || {}, source[key]);
|
||||
} else {
|
||||
target[key] = source[key];
|
||||
}
|
||||
}
|
||||
return target;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
ensureConfigFile,
|
||||
getConfig,
|
||||
setConfig,
|
||||
};
|
||||
@@ -1,239 +0,0 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const os = require('os');
|
||||
const cheerio = require("cheerio");
|
||||
const { queryAll, run } = require('./database');
|
||||
const { scrape } = require("./headless");
|
||||
|
||||
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, creating...");
|
||||
fs.mkdirSync(extensionsDir, { recursive: true });
|
||||
}
|
||||
|
||||
try {
|
||||
const files = await fs.promises.readdir(extensionsDir);
|
||||
|
||||
for (const file of files) {
|
||||
if (file.endsWith('.js')) {
|
||||
await loadExtension(file);
|
||||
}
|
||||
}
|
||||
|
||||
console.log(`✅ Loaded ${extensions.size} extensions`);
|
||||
|
||||
try {
|
||||
const loaded = Array.from(extensions.keys());
|
||||
const rows = await queryAll("SELECT DISTINCT ext_name FROM extension");
|
||||
|
||||
for (const row of rows) {
|
||||
if (!loaded.includes(row.ext_name)) {
|
||||
console.log(`🧹 Cleaning cached metadata for removed extension: ${row.ext_name}`);
|
||||
await run("DELETE FROM extension WHERE ext_name = ?", [row.ext_name]);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("❌ Error cleaning extension cache:", err);
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.error("❌ Extension Scan Error:", err);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadExtension(fileName) {
|
||||
const homeDir = os.homedir();
|
||||
const extensionsDir = path.join(homeDir, 'WaifuBoards', 'extensions');
|
||||
const filePath = path.join(extensionsDir, fileName);
|
||||
|
||||
if (!fs.existsSync(filePath)) {
|
||||
console.warn(`⚠️ Extension not found: ${fileName}`);
|
||||
return;
|
||||
}
|
||||
|
||||
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) {
|
||||
console.warn(`⚠️ Invalid extension: ${fileName}`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!["anime-board", "book-board", "image-board"].includes(instance.type)) {
|
||||
console.warn(`⚠️ Invalid extension (${instance.type}): ${fileName}`);
|
||||
return;
|
||||
}
|
||||
|
||||
const name = instance.constructor.name;
|
||||
instance.__fileName = fileName;
|
||||
instance.scrape = scrape;
|
||||
instance.cheerio = cheerio;
|
||||
extensions.set(name, instance);
|
||||
|
||||
console.log(`📦 Installed & loaded: ${name}`);
|
||||
return name;
|
||||
|
||||
} catch (err) {
|
||||
console.warn(`⚠️ Error loading ${fileName}: ${err.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
const https = require('https');
|
||||
|
||||
async function saveExtensionFile(fileName, downloadUrl) {
|
||||
const homeDir = os.homedir();
|
||||
const extensionsDir = path.join(homeDir, 'WaifuBoards', 'extensions');
|
||||
const filePath = path.join(extensionsDir, fileName);
|
||||
const fullUrl = downloadUrl;
|
||||
|
||||
if (!fs.existsSync(extensionsDir)) {
|
||||
fs.mkdirSync(extensionsDir, { recursive: true });
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const file = fs.createWriteStream(filePath);
|
||||
|
||||
https.get(fullUrl, async (response) => {
|
||||
if (response.statusCode !== 200) {
|
||||
return reject(new Error(`Download failed: ${response.statusCode}`));
|
||||
}
|
||||
|
||||
response.pipe(file);
|
||||
|
||||
file.on('finish', async () => {
|
||||
file.close(async () => {
|
||||
try {
|
||||
const extName = fileName.replace('.js', '');
|
||||
|
||||
for (const key of extensions.keys()) {
|
||||
if (key.toLowerCase() === extName.toLowerCase()) {
|
||||
extensions.delete(key);
|
||||
break;
|
||||
}
|
||||
}
|
||||
await loadExtension(fileName);
|
||||
resolve();
|
||||
} catch (err) {
|
||||
if (fs.existsSync(filePath)) {
|
||||
await fs.promises.unlink(filePath);
|
||||
}
|
||||
reject(new Error(`Load failed, file rolled back: ${err.message}`));
|
||||
}
|
||||
});
|
||||
});
|
||||
}).on('error', async (err) => {
|
||||
if (fs.existsSync(filePath)) {
|
||||
await fs.promises.unlink(filePath);
|
||||
}
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function deleteExtensionFile(fileName) {
|
||||
const homeDir = os.homedir();
|
||||
const extensionsDir = path.join(homeDir, 'WaifuBoards', 'extensions');
|
||||
const filePath = path.join(extensionsDir, fileName);
|
||||
|
||||
const extName = fileName.replace(".js", "");
|
||||
|
||||
for (const key of extensions.keys()) {
|
||||
if (key.toLowerCase() === extName) {
|
||||
extensions.delete(key);
|
||||
console.log(`🗑️ Removed from memory: ${key}`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (fs.existsSync(filePath)) {
|
||||
await fs.promises.unlink(filePath);
|
||||
console.log(`🗑️ Deleted file: ${fileName}`);
|
||||
}
|
||||
}
|
||||
|
||||
function getExtension(name) {
|
||||
return extensions.get(name);
|
||||
}
|
||||
|
||||
function getAllExtensions() {
|
||||
return extensions;
|
||||
}
|
||||
|
||||
function getExtensionsList() {
|
||||
return Array.from(extensions.keys());
|
||||
}
|
||||
|
||||
function getAnimeExtensionsMap() {
|
||||
const animeExts = new Map();
|
||||
for (const [name, ext] of extensions) {
|
||||
if (ext.type === 'anime-board') {
|
||||
animeExts.set(name, ext);
|
||||
}
|
||||
}
|
||||
return animeExts;
|
||||
}
|
||||
|
||||
function getBookExtensionsMap() {
|
||||
const bookExts = new Map();
|
||||
for (const [name, ext] of extensions) {
|
||||
if (ext.type === 'book-board' || ext.type === 'manga-board') {
|
||||
bookExts.set(name, ext);
|
||||
}
|
||||
}
|
||||
return bookExts;
|
||||
}
|
||||
|
||||
function getMangaExtensionsMap() {
|
||||
const mangaExts = new Map();
|
||||
for (const [name, ext] of extensions) {
|
||||
if (ext.type === 'book-board' && ext.mediaType !== 'ln') {
|
||||
mangaExts.set(name, ext);
|
||||
}
|
||||
}
|
||||
return mangaExts;
|
||||
}
|
||||
|
||||
function getNovelExtensionsMap() {
|
||||
const novelExts = new Map();
|
||||
for (const [name, ext] of extensions) {
|
||||
if (ext.type === 'book-board' && ext.mediaType === 'ln') {
|
||||
novelExts.set(name, ext);
|
||||
}
|
||||
}
|
||||
return novelExts;
|
||||
}
|
||||
|
||||
function getGalleryExtensionsMap() {
|
||||
const galleryExts = new Map();
|
||||
for (const [name, ext] of extensions) {
|
||||
if (ext.type === 'image-board') {
|
||||
galleryExts.set(name, ext);
|
||||
}
|
||||
}
|
||||
return galleryExts;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
loadExtensions,
|
||||
getExtension,
|
||||
getAllExtensions,
|
||||
getExtensionsList,
|
||||
getAnimeExtensionsMap,
|
||||
getBookExtensionsMap,
|
||||
getGalleryExtensionsMap,
|
||||
saveExtensionFile,
|
||||
deleteExtensionFile,
|
||||
getMangaExtensionsMap,
|
||||
getNovelExtensionsMap
|
||||
};
|
||||
@@ -1,147 +0,0 @@
|
||||
const path = require("path");
|
||||
const fs = require("fs");
|
||||
const { chromium } = require("playwright-core");
|
||||
|
||||
let browser;
|
||||
let context;
|
||||
const BLOCK_LIST = [
|
||||
"google-analytics", "doubleclick", "facebook", "twitter",
|
||||
"adsystem", "analytics", "tracker", "pixel", "quantserve", "newrelic"
|
||||
];
|
||||
|
||||
function isPackaged() {
|
||||
return process.env.IS_PACKAGED === "true";
|
||||
}
|
||||
|
||||
function getChromiumPath() {
|
||||
if (isPackaged()) {
|
||||
return path.join(
|
||||
process.resourcesPath,
|
||||
"playwright",
|
||||
"chromium",
|
||||
"chrome-headless-shell-win64",
|
||||
"chrome-headless-shell.exe"
|
||||
);
|
||||
}
|
||||
|
||||
return chromium.executablePath();
|
||||
}
|
||||
|
||||
async function initHeadless() {
|
||||
if (browser) return;
|
||||
|
||||
const exePath = getChromiumPath();
|
||||
|
||||
if (!fs.existsSync(exePath)) {
|
||||
throw new Error("Chromium not found: " + exePath);
|
||||
}
|
||||
|
||||
browser = await chromium.launch({
|
||||
headless: true,
|
||||
executablePath: exePath,
|
||||
args: [
|
||||
"--no-sandbox",
|
||||
"--disable-setuid-sandbox",
|
||||
"--disable-dev-shm-usage",
|
||||
"--disable-gpu",
|
||||
"--disable-extensions",
|
||||
"--disable-background-networking",
|
||||
"--disable-sync",
|
||||
"--disable-translate",
|
||||
"--mute-audio",
|
||||
"--no-first-run",
|
||||
"--no-zygote",
|
||||
]
|
||||
});
|
||||
context = await browser.newContext({
|
||||
userAgent:
|
||||
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 Chrome/122.0.0.0 Safari/537.36"
|
||||
});
|
||||
}
|
||||
|
||||
async function turboScroll(page) {
|
||||
await page.evaluate(() => {
|
||||
return new Promise((resolve) => {
|
||||
let last = 0;
|
||||
let same = 0;
|
||||
const timer = setInterval(() => {
|
||||
const h = document.body.scrollHeight;
|
||||
window.scrollTo(0, h);
|
||||
if (h === last) {
|
||||
same++;
|
||||
if (same >= 5) {
|
||||
clearInterval(timer);
|
||||
resolve();
|
||||
}
|
||||
} else {
|
||||
same = 0;
|
||||
last = h;
|
||||
}
|
||||
}, 20);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function scrape(url, handler, options = {}) {
|
||||
const {
|
||||
waitUntil = "domcontentloaded",
|
||||
waitSelector = null,
|
||||
timeout = 10000,
|
||||
scrollToBottom = false,
|
||||
renderWaitTime = 0,
|
||||
loadImages = true
|
||||
} = options;
|
||||
if (!browser) await initHeadless();
|
||||
const page = await context.newPage();
|
||||
let collectedRequests = [];
|
||||
await page.route("**/*", (route) => {
|
||||
const req = route.request();
|
||||
const rUrl = req.url().toLowerCase();
|
||||
const type = req.resourceType();
|
||||
|
||||
collectedRequests.push({
|
||||
url: req.url(),
|
||||
method: req.method(),
|
||||
resourceType: type
|
||||
});
|
||||
|
||||
if (type === "font" || type === "media" || type === "manifest")
|
||||
return route.abort();
|
||||
|
||||
if (BLOCK_LIST.some(k => rUrl.includes(k)))
|
||||
return route.abort();
|
||||
|
||||
if (!loadImages && (
|
||||
type === "image" || rUrl.match(/\.(jpg|jpeg|png|gif|webp|svg)$/)
|
||||
)) return route.abort();
|
||||
route.continue();
|
||||
});
|
||||
await page.goto(url, { waitUntil, timeout });
|
||||
if (waitSelector) {
|
||||
try {
|
||||
await page.waitForSelector(waitSelector, { timeout });
|
||||
} catch {}
|
||||
}
|
||||
if (scrollToBottom) {
|
||||
await turboScroll(page);
|
||||
}
|
||||
if (renderWaitTime > 0) {
|
||||
await new Promise(r => setTimeout(r, renderWaitTime));
|
||||
}
|
||||
const result = await handler(page);
|
||||
await page.close();
|
||||
|
||||
return { result, requests: collectedRequests };
|
||||
}
|
||||
|
||||
async function closeScraper() {
|
||||
if (context) await context.close();
|
||||
if (browser) await browser.close();
|
||||
context = null;
|
||||
browser = null;
|
||||
}
|
||||
module.exports = {
|
||||
initHeadless,
|
||||
scrape,
|
||||
closeScraper
|
||||
};
|
||||
@@ -1,146 +0,0 @@
|
||||
import { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify';
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
|
||||
let cachedNavbar: string | null = null;
|
||||
|
||||
function getNavbarHTML(activePage: string, showSearch: boolean = true): string {
|
||||
if (!cachedNavbar) {
|
||||
const navbarPath = path.join(__dirname, '..', '..', 'views', 'components', 'navbar.html');
|
||||
cachedNavbar = fs.readFileSync(navbarPath, 'utf-8');
|
||||
}
|
||||
|
||||
let navbar = cachedNavbar;
|
||||
|
||||
const pages = ['anime', 'books', 'gallery', 'schedule' , 'marketplace'];
|
||||
pages.forEach(page => {
|
||||
const regex = new RegExp(`(<button class="nav-button[^"]*)"\\s+data-page="${page}"`, 'g');
|
||||
if (page === activePage) {
|
||||
navbar = navbar.replace(regex, `$1 active" data-page="${page}"`);
|
||||
}
|
||||
});
|
||||
|
||||
if (!showSearch) {
|
||||
navbar = navbar.replace(
|
||||
'<div class="search-wrapper">',
|
||||
'<div class="search-wrapper" style="visibility: hidden;">'
|
||||
);
|
||||
}
|
||||
|
||||
return navbar;
|
||||
}
|
||||
|
||||
function injectNavbar(htmlContent: string, activePage: string, showSearch: boolean = true): string {
|
||||
const navbar = getNavbarHTML(activePage, showSearch);
|
||||
|
||||
return htmlContent.replace(/<body[^>]*>/, `$&\n${navbar}`);
|
||||
}
|
||||
|
||||
async function viewsRoutes(fastify: FastifyInstance) {
|
||||
|
||||
fastify.get('/', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'users.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
reply.type('text/html').send(html);
|
||||
});
|
||||
|
||||
fastify.get('/anime', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'animes.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
const htmlWithNavbar = injectNavbar(html, 'anime', true);
|
||||
reply.type('text/html').send(htmlWithNavbar);
|
||||
});
|
||||
|
||||
fastify.get('/profile', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'profile.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
const htmlWithNavbar = injectNavbar(html, '', false);
|
||||
reply.type('text/html').send(htmlWithNavbar);
|
||||
});
|
||||
|
||||
fastify.get('/books', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'books.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
const htmlWithNavbar = injectNavbar(html, 'books', true);
|
||||
reply.type('text/html').send(htmlWithNavbar);
|
||||
});
|
||||
|
||||
fastify.get('/schedule', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'schedule.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
const htmlWithNavbar = injectNavbar(html, 'schedule', false);
|
||||
reply.type('text/html').send(htmlWithNavbar);
|
||||
});
|
||||
|
||||
fastify.get('/gallery', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'gallery', 'gallery.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
const htmlWithNavbar = injectNavbar(html, 'gallery', true);
|
||||
reply.type('text/html').send(htmlWithNavbar);
|
||||
});
|
||||
|
||||
fastify.get('/marketplace', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'marketplace.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
const htmlWithNavbar = injectNavbar(html, 'marketplace', false);
|
||||
reply.type('text/html').send(htmlWithNavbar);
|
||||
});
|
||||
|
||||
fastify.get('/gallery/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
const htmlWithNavbar = injectNavbar(html, 'gallery', true);
|
||||
reply.type('text/html').send(htmlWithNavbar);
|
||||
});
|
||||
|
||||
fastify.get('/gallery/favorites/*', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
const htmlWithNavbar = injectNavbar(html, 'gallery', true);
|
||||
reply.type('text/html').send(htmlWithNavbar);
|
||||
});
|
||||
|
||||
fastify.get('/anime/:id', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
reply.type('text/html').send(html);
|
||||
});
|
||||
|
||||
fastify.get('/anime/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
reply.type('text/html').send(html);
|
||||
});
|
||||
|
||||
fastify.get('/book/:id', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
reply.type('text/html').send(html);
|
||||
});
|
||||
|
||||
fastify.get('/book/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
reply.type('text/html').send(html);
|
||||
});
|
||||
|
||||
fastify.get('/read/:provider/:chapter/*', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'read.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
reply.type('text/html').send(html);
|
||||
});
|
||||
|
||||
fastify.get('/room', (req: FastifyRequest, reply: FastifyReply) => {
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'room.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
reply.type('text/html').send(html);
|
||||
});
|
||||
|
||||
fastify.setNotFoundHandler((req, reply) => {
|
||||
const htmlPath = path.join(__dirname, '..', '..', 'views', '404.html');
|
||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
||||
reply.code(404).type('text/html').send(html);
|
||||
});
|
||||
}
|
||||
|
||||
export default viewsRoutes;
|
||||
@@ -1,139 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>404 - WaifuBoard</title>
|
||||
<link rel="stylesheet" href="/views/css/globals.css">
|
||||
<link rel="stylesheet" href="/views/css/components/navbar.css">
|
||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||
|
||||
<script src="/src/scripts/titlebar.js"></script>
|
||||
|
||||
<style>
|
||||
.error-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: var(--spacing-2xl);
|
||||
background: var(--color-bg-base);
|
||||
}
|
||||
|
||||
.error-code {
|
||||
font-size: 6rem;
|
||||
font-weight: 900;
|
||||
margin: 0;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
font-size: 1.1rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin: var(--spacing-md) 0 var(--spacing-xl);
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.error-actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="titlebar">
|
||||
<div class="title-left">
|
||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
||||
<span class="app-title">WaifuBoard</span>
|
||||
</div>
|
||||
<div class="title-right">
|
||||
<button class="min">−</button>
|
||||
<button class="max">🗖</button>
|
||||
<button class="close">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="navbar" id="navbar">
|
||||
<a href="#" class="nav-brand">
|
||||
<div class="brand-icon">
|
||||
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
|
||||
</div>
|
||||
WaifuBoard
|
||||
</a>
|
||||
|
||||
<div class="nav-center">
|
||||
<button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
|
||||
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
|
||||
<button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
|
||||
<button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
|
||||
<button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
|
||||
<button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
|
||||
</div>
|
||||
|
||||
<div class="nav-right">
|
||||
<div class="search-wrapper" style="visibility: hidden;">
|
||||
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<circle cx="11" cy="11" r="8"/>
|
||||
<path d="M21 21l-4.35-4.35"/>
|
||||
</svg>
|
||||
<input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
|
||||
<div class="search-results" id="search-results"></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-user" id="nav-user" style="display:none;">
|
||||
<div class="user-avatar-btn">
|
||||
<img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
|
||||
<div class="online-indicator"></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-dropdown" id="nav-dropdown">
|
||||
<div class="dropdown-header">
|
||||
<img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
|
||||
<div class="dropdown-user-info">
|
||||
<div class="dropdown-username" id="nav-username"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="/my-list" class="dropdown-item">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
|
||||
<polyline points="17 21 17 13 7 13 7 21"/>
|
||||
<polyline points="7 3 7 8 15 8"/>
|
||||
</svg>
|
||||
<span>My List</span>
|
||||
</a>
|
||||
<button class="dropdown-item logout-item" id="nav-logout">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
|
||||
<polyline points="16 17 21 12 16 7"/>
|
||||
<line x1="21" y1="12" x2="9" y2="12"/>
|
||||
</svg>
|
||||
<span>Logout</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="error-container">
|
||||
<div>
|
||||
<h1 class="error-code">404</h1>
|
||||
<p class="error-message">
|
||||
This page doesn’t exist.
|
||||
</p>
|
||||
|
||||
<div class="error-actions">
|
||||
<button class="btn-primary" onclick="location.href='/'">Home</button>
|
||||
<button class="btn-blur" onclick="history.back()">Back</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,314 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon" />
|
||||
<title>WaifuBoard</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
||||
<script type="module">
|
||||
import JASSUB from 'https://cdn.jsdelivr.net/npm/jassub@1.8.8/dist/jassub.es.js';
|
||||
window.JASSUB = JASSUB;
|
||||
</script>
|
||||
<link rel="stylesheet" href="/views/css/globals.css" />
|
||||
<link rel="stylesheet" href="/views/css/components/anilist-modal.css" />
|
||||
<link rel="stylesheet" href="/views/css/anime/anime.css" />
|
||||
<link rel="stylesheet" href="/views/css/anime/player.css" />
|
||||
<link rel="stylesheet" href="/views/css/components/match-modal.css">
|
||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
||||
<script src="/src/scripts/titlebar.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="titlebar">
|
||||
<div class="title-left">
|
||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
||||
<span class="app-title">WaifuBoard</span>
|
||||
</div>
|
||||
<div class="title-right">
|
||||
<button class="min">−</button>
|
||||
<button class="max">🗖</button>
|
||||
<button class="close">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/anime" class="back-btn">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
Back
|
||||
</a>
|
||||
|
||||
<div class="modal-overlay" id="desc-modal">
|
||||
<div class="modal-content">
|
||||
<button class="modal-close" onclick="closeDescriptionModal()">✕</button>
|
||||
<h2 class="modal-title">Synopsis</h2>
|
||||
<div class="modal-text" id="full-description"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="top-media-wrapper" id="top-media-wrapper">
|
||||
|
||||
<div class="hero-wrapper" id="hero-wrapper">
|
||||
<div class="video-background"><div id="trailer-player"></div></div>
|
||||
<div class="hero-overlay"></div>
|
||||
</div>
|
||||
|
||||
<div class="player-wrapper" id="player-wrapper" style="display: none;">
|
||||
<div class="player-container">
|
||||
<!-- Side Navigation Buttons -->
|
||||
<button id="prev-ep-btn" class="side-nav-btn left" title="Previous Episode">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M15 18l-6-6 6-6"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button id="next-ep-btn" class="side-nav-btn right" title="Next Episode">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 18l6-6-6-6"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Header Controls -->
|
||||
<div class="player-header">
|
||||
<div class="header-left">
|
||||
<button class="btn-icon-glass" id="close-player-btn" title="Close Player">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M19 12H5"/>
|
||||
<path d="M12 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="episode-info">
|
||||
<span class="ep-label">Watching</span>
|
||||
<span id="player-episode-title" class="ep-title">Episode 1</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<button class="btn-icon-glass" id="download-btn" title="Download Episode" style="display: none;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||||
<polyline points="7 10 12 15 17 10"></polyline>
|
||||
<line x1="12" y1="15" x2="12" y2="3"></line>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="settings-group">
|
||||
<button class="btn-icon-glass" id="manual-match-btn" title="Manual Match" style="display: none;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
|
||||
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button id="mpv-btn" class="glass-btn-mpv" title="Open in MPV">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<path d="M5 3l14 9-14 9V3z"></path>
|
||||
</svg>
|
||||
<span>MPV</span>
|
||||
</button>
|
||||
|
||||
<div class="sd-toggle" id="sd-toggle" data-state="sub">
|
||||
<div class="sd-bg"></div>
|
||||
<div class="sd-option active" id="opt-sub">Sub</div>
|
||||
<div class="sd-option" id="opt-dub">Dub</div>
|
||||
</div>
|
||||
|
||||
<select id="server-select" class="glass-select" style="display:none;"></select>
|
||||
<select id="extension-select" class="glass-select"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Video Frame -->
|
||||
<div class="video-frame">
|
||||
<video id="player" crossorigin playsinline></video>
|
||||
<canvas id="subtitles-canvas"></canvas>
|
||||
|
||||
<div id="player-loading" class="player-loading-overlay">
|
||||
<div class="spinner"></div>
|
||||
<p id="player-loading-text">Loading Stream...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skip Overlay Button -->
|
||||
<button id="skip-overlay-btn">
|
||||
Skip Intro
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
||||
<path d="M13 17l5-5-5-5M6 17l5-5-5-5"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Custom Controls -->
|
||||
<div class="custom-controls">
|
||||
<div class="controls-gradient"></div>
|
||||
|
||||
<!-- Progress Bar -->
|
||||
<div class="progress-container">
|
||||
<div class="progress-buffer"></div>
|
||||
<div class="progress-played"></div>
|
||||
<div class="progress-handle"></div>
|
||||
</div>
|
||||
|
||||
<!-- Controls Row -->
|
||||
<div class="controls-row">
|
||||
<div class="controls-left">
|
||||
<button class="control-btn play-pause" id="play-pause-btn" title="Play/Pause (Space)">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M8 5v14l11-7z"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="volume-control">
|
||||
<button class="control-btn" id="volume-btn" title="Mute (M)">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="volume-slider-container">
|
||||
<input type="range" class="volume-slider" id="volume-slider" min="0" max="100" value="100">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="time-display" id="time-display">0:00 / 0:00</span>
|
||||
</div>
|
||||
|
||||
<div class="controls-center">
|
||||
<!-- Center space for future controls -->
|
||||
</div>
|
||||
|
||||
<div class="controls-right">
|
||||
<button class="control-btn" id="settings-btn" title="Settings">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button class="control-btn" id="fullscreen-btn" title="Fullscreen (F)">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings Panel -->
|
||||
<div class="settings-panel" id="settings-panel">
|
||||
<!-- Populated dynamically by JS -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-container" id="main-content">
|
||||
<div class="anime-header">
|
||||
<h1 class="anime-title" id="title">Loading...</h1>
|
||||
<div class="hero-meta-info">
|
||||
<span id="local-pill" class="pill-local" style="display:none;">Local</span>
|
||||
<span id="extension-pill" class="pill-local" style="background:#8b5cf6; display:none;">Ext</span>
|
||||
<span id="score">--% Score</span> • <span id="year">----</span> • <span id="format">--</span> • <span id="episodes">-- Ep</span>
|
||||
</div>
|
||||
<div class="hero-description-mini" id="description-preview"></div>
|
||||
<div class="hero-tags" id="genres"></div>
|
||||
|
||||
<div class="action-row">
|
||||
<button class="btn-watch" id="watch-btn">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="black"><path d="M8 5v14l11-7z"/></svg>
|
||||
Start Watching
|
||||
</button>
|
||||
<button class="btn-add-list" id="add-to-list-btn">+ Add to List</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-layout">
|
||||
<aside class="poster-section">
|
||||
<div class="poster-card"><img id="poster" src="" alt="Poster"></div>
|
||||
<div class="metadata-sidebar">
|
||||
<div class="meta-item-side"><span>Status</span><p id="status">--</p></div>
|
||||
<div class="meta-item-side"><span>Season</span><p id="season">--</p></div>
|
||||
<div class="meta-item-side"><span>Studio</span><p id="studio">--</p></div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="content-column">
|
||||
|
||||
<section class="episodes-section">
|
||||
<div class="episodes-header-row">
|
||||
<h2>Episodes</h2>
|
||||
<input type="number" id="ep-search" class="episode-search-input" placeholder="Jump to...">
|
||||
</div>
|
||||
<div id="episodes-grid" class="episodes-grid"></div>
|
||||
|
||||
<div class="pagination-controls" id="pagination-controls">
|
||||
<button class="page-btn" id="prev-page">Previous</button>
|
||||
<span class="page-info" id="page-info">Page 1 of 1</span>
|
||||
<button class="page-btn" id="next-page">Next</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="relations-section" style="display:none; margin-top: 3rem;">
|
||||
<h3 class="subsection-title">Relations</h3>
|
||||
<div class="relations-horizontal" id="relations-grid"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="content-section">
|
||||
<h2 class="subsection-title">Characters</h2>
|
||||
<div class="characters-grid" id="char-list"></div>
|
||||
<button id="show-more-chars" class="btn-show-more" style="display: none;">Show Full Cast</button>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2 class="subsection-title">Recommended</h2>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollRecommendations(-1)">‹</button>
|
||||
<div class="carousel" id="recommendations-grid"></div>
|
||||
<button class="scroll-btn right" onclick="scrollRecommendations(1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="download-modal">
|
||||
<div class="modal-content download-settings-content">
|
||||
<button class="modal-close" id="close-download-modal">✕</button>
|
||||
<h2 class="modal-title">Download Settings</h2>
|
||||
|
||||
<div class="download-sections-wrapper">
|
||||
<div id="dl-quality-section" class="dl-section" style="display:none;">
|
||||
<h3>Video Quality</h3>
|
||||
<div class="dl-list" id="dl-quality-list"></div>
|
||||
</div>
|
||||
|
||||
<div id="dl-audio-section" class="dl-section" style="display:none;">
|
||||
<h3>Audio Tracks</h3>
|
||||
<div class="dl-list" id="dl-audio-list"></div>
|
||||
</div>
|
||||
|
||||
<div id="dl-subs-section" class="dl-section">
|
||||
<h3>Subtitles</h3>
|
||||
<div class="dl-list" id="dl-subs-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dl-actions">
|
||||
<button class="btn-cancel" id="cancel-dl-btn">Cancel</button>
|
||||
<button class="btn-confirm" id="confirm-dl-btn">Start Download</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
||||
<script src="/src/scripts/auth-guard.js"></script>
|
||||
<script src="/src/scripts/utils/url-utils.js"></script>
|
||||
<script src="/src/scripts/utils/pagination-manager.js"></script>
|
||||
<script src="/src/scripts/utils/media-metadata-utils.js"></script>
|
||||
<script src="/src/scripts/utils/youtube-player-utils.js"></script>
|
||||
<script src="/src/scripts/utils/list-modal-manager.js"></script>
|
||||
<script src="/src/scripts/utils/match-modal.js"></script>
|
||||
<script src="/src/scripts/anime/subtitle-renderer.js"></script>
|
||||
|
||||
<script src="/src/scripts/anime/player.js"></script>
|
||||
<script src="/src/scripts/anime/entry.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,141 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WaifuBoard</title>
|
||||
<link rel="stylesheet" href="/views/css/globals.css">
|
||||
<link rel="stylesheet" href="/views/css/components/navbar.css">
|
||||
<link rel="stylesheet" href="/views/css/components/hero.css">
|
||||
<link rel="stylesheet" href="/views/css/home.css">
|
||||
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
|
||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
||||
<link rel="stylesheet" href="/views/css/components/local-library.css">
|
||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
||||
<link rel="stylesheet" href="/views/css/components/create-room.css"/>
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||
<script src="/src/scripts/titlebar.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="titlebar">
|
||||
<div class="title-left">
|
||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
||||
<span class="app-title">WaifuBoard</span>
|
||||
</div>
|
||||
<div class="title-right">
|
||||
<button class="min">−</button>
|
||||
<button class="max">🗖</button>
|
||||
<button class="close">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-wrapper">
|
||||
<div class="hero-background">
|
||||
<img id="hero-bg-media" alt="">
|
||||
<div id="player" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120vw; height: 120vh; pointer-events: none; opacity: 0; transition: opacity 1s;"></div>
|
||||
</div>
|
||||
<div class="hero-vignette"></div>
|
||||
|
||||
<div class="hero-content">
|
||||
<div class="hero-poster-card">
|
||||
<div class="skeleton poster-skeleton" id="hero-poster-skeleton"></div>
|
||||
<img id="hero-poster" alt="" style="display: none;" onload="this.style.display='block'; document.getElementById('hero-poster-skeleton').style.display='none'">
|
||||
</div>
|
||||
<div class="hero-text">
|
||||
<div id="hero-loading-ui">
|
||||
<div class="skeleton title-skeleton"></div>
|
||||
<div class="skeleton text-skeleton" style="width: 40%"></div>
|
||||
<div class="skeleton text-skeleton" style="width: 100%; height: 4em;"></div>
|
||||
</div>
|
||||
|
||||
<div id="hero-real-ui" style="display: none;">
|
||||
<h1 class="hero-title" id="hero-title"></h1>
|
||||
<div class="hero-meta">
|
||||
<span class="score-badge" id="hero-score"></span>
|
||||
<span id="hero-year"></span>
|
||||
<span id="hero-type"></span>
|
||||
</div>
|
||||
<p class="hero-desc" id="hero-desc"></p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-primary" id="watch-btn">Watch Now</button>
|
||||
<button class="btn-blur">+ Add to List</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="library-mode-btn icon-only" id="library-mode-btn" onclick="toggleLibraryMode()" title="Switch library mode">
|
||||
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
||||
<polyline points="9 22 9 12 15 12 15 22"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Online Mode Content -->
|
||||
<main id="online-content">
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">Continue watching</div>
|
||||
</div>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollCarousel('my-status', -1)">‹</button>
|
||||
<div class="carousel" id="my-status">
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
</div>
|
||||
<button class="scroll-btn right" onclick="scrollCarousel('my-status', 1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="section-header"><div class="section-title">Trending This Season</div></div>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button>
|
||||
<div class="carousel" id="trending">
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
</div>
|
||||
<button class="scroll-btn right" onclick="scrollCarousel('trending', 1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="section-header"><div class="section-title">Top Airing Now</div></div>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollCarousel('top-airing', -1)">‹</button>
|
||||
<div class="carousel" id="top-airing">
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
</div>
|
||||
<button class="scroll-btn right" onclick="scrollCarousel('top-airing', 1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="updateToast" class="hidden">
|
||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
||||
<a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">
|
||||
Click To Download
|
||||
</a>
|
||||
</div>
|
||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
||||
<script src="/src/scripts/room-modal.js"></script>
|
||||
<script src="/src/scripts/utils/notification-utils.js"></script>
|
||||
<script src="/src/scripts/utils/search-manager.js"></script>
|
||||
<script src="/src/scripts/utils/list-modal-manager.js"></script>
|
||||
<script src="/src/scripts/utils/continue-watching-manager.js"></script>
|
||||
<script src="/src/scripts/utils/youtube-player-utils.js"></script>
|
||||
<script src="/src/scripts/anime/animes.js"></script>
|
||||
<script src="/src/scripts/updateNotifier.js"></script>
|
||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
||||
<script src="/src/scripts/auth-guard.js"></script>
|
||||
<script src="/src/scripts/settings.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,164 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<base href="/">
|
||||
<title>WaifuBoard Book</title>
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/views/css/globals.css">
|
||||
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
|
||||
<link rel="stylesheet" href="/views/css/books/book.css">
|
||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
||||
<link rel="stylesheet" href="/views/css/components/match-modal.css">
|
||||
<script src="/src/scripts/titlebar.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="titlebar"> <div class="title-left">
|
||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
||||
<span class="app-title">WaifuBoard</span>
|
||||
</div>
|
||||
<div class="title-right">
|
||||
<button class="min">—</button>
|
||||
<button class="max">🗖</button>
|
||||
<button class="close">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/books" class="back-btn">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
Back
|
||||
</a>
|
||||
|
||||
<div class="hero-wrapper">
|
||||
<div class="hero-background">
|
||||
<img id="hero-bg" src="" alt="">
|
||||
</div>
|
||||
<div class="hero-overlay"></div>
|
||||
</div>
|
||||
|
||||
<div class="content-container">
|
||||
|
||||
<div class="book-header-section">
|
||||
<h1 class="book-title" id="title">Loading...</h1>
|
||||
|
||||
<div class="hero-meta-info">
|
||||
<span id="local-pill" class="pill-local" style="display:none;">Local</span>
|
||||
<span id="extension-pill" class="pill-local" style="background:#8b5cf6; display:none;">Ext</span>
|
||||
|
||||
<span id="score">--% Score</span>
|
||||
<span class="meta-separator">•</span>
|
||||
<span id="published-date">----</span>
|
||||
<span class="meta-separator">•</span>
|
||||
<span id="status">--</span>
|
||||
<span class="meta-separator">•</span>
|
||||
<span id="format">--</span>
|
||||
<span class="meta-separator">•</span>
|
||||
<span id="chapters-count">-- Ch</span>
|
||||
</div>
|
||||
|
||||
<div class="hero-description-mini" id="description"></div>
|
||||
<div class="hero-tags" id="genres"></div>
|
||||
|
||||
<div class="action-row">
|
||||
<button class="btn-read" id="read-start-btn">
|
||||
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M2 9v12h5v-9h8v9h5v-12h2l-10 -9 -10 9z" transform="scale(0.8) translate(3,3)"/></svg>
|
||||
Start Reading
|
||||
</button>
|
||||
<button class="btn-add-list" id="add-to-list-btn">+ Add to Library</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-layout">
|
||||
|
||||
<aside class="poster-section">
|
||||
<div class="poster-card">
|
||||
<img id="poster" src="" alt="">
|
||||
</div>
|
||||
|
||||
<div class="sidebar-extra-info" id="sidebar-info" style="display: none;">
|
||||
<h4 class="sidebar-label">Alternative Titles</h4>
|
||||
<ul class="synonyms-list" id="synonyms-list">
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="content-column">
|
||||
|
||||
<div class="chapters-section">
|
||||
<div class="chapters-header">
|
||||
<h2>Chapters</h2>
|
||||
|
||||
<div class="chapter-controls">
|
||||
<button id="manual-match-btn" class="glass-btn-icon" style="display: none;" title="Manual Match">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
|
||||
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<select id="provider-filter" class="glass-select" style="display: none;">
|
||||
<option value="all">All Providers</option>
|
||||
</select>
|
||||
|
||||
<div id="language-selector-container" class="control-group hidden">
|
||||
<select id="language-select" class="glass-select"></select>
|
||||
</div>
|
||||
|
||||
<div class="search-box">
|
||||
<input type="text" id="chapter-search" placeholder="Search..." class="glass-input">
|
||||
</div>
|
||||
|
||||
<button id="sort-btn" class="glass-btn-icon" title="Sort">
|
||||
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="chapters-list" class="chapters-grid"></div>
|
||||
<div id="loading-msg" style="text-align: center; padding: 2rem; display: none; color: #888;">Loading...</div>
|
||||
|
||||
<div class="pagination-controls" id="pagination" style="display:none;">
|
||||
<button class="page-btn" id="prev-page">Previous</button>
|
||||
<span class="page-info" id="page-info">Page 1</span>
|
||||
<button class="page-btn" id="next-page">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="relations-section" style="display:none; margin-top: 3rem;">
|
||||
<h3 class="subsection-title">Relations</h3>
|
||||
<div class="relations-horizontal" id="relations-list"></div>
|
||||
</div>
|
||||
|
||||
<section class="content-section">
|
||||
<h2 class="subsection-title">Characters</h2>
|
||||
<div class="characters-grid" id="characters-list"></div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="updateToast" class="hidden">
|
||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
||||
<a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">Click To Download</a>
|
||||
</div>
|
||||
|
||||
<script src="/src/scripts/updateNotifier.js"></script>
|
||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
||||
<script src="/src/scripts/utils/notification-utils.js"></script>
|
||||
<script src="/src/scripts/utils/url-utils.js"></script>
|
||||
<script src="/src/scripts/utils/pagination-manager.js"></script>
|
||||
<script src="/src/scripts/utils/media-metadata-utils.js"></script>
|
||||
<script src="/src/scripts/utils/list-modal-manager.js"></script>
|
||||
<script src="/src/scripts/utils/match-modal.js"></script>
|
||||
<script src="/src/scripts/books/book.js"></script>
|
||||
<script src="/src/scripts/auth-guard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,116 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WaifuBoard Books</title>
|
||||
<link rel="stylesheet" href="/views/css/globals.css">
|
||||
<link rel="stylesheet" href="/views/css/components/navbar.css">
|
||||
<link rel="stylesheet" href="/views/css/components/hero.css">
|
||||
<link rel="stylesheet" href="/views/css/home.css">
|
||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
||||
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
|
||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
||||
<script src="/src/scripts/room-modal.js"></script>
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||
<script src="/src/scripts/titlebar.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="titlebar"> <div class="title-left">
|
||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
||||
<span class="app-title">WaifuBoard</span>
|
||||
</div>
|
||||
<div class="title-right">
|
||||
<button class="min">—</button>
|
||||
<button class="max">🗖</button>
|
||||
<button class="close">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-wrapper">
|
||||
<div class="hero-background">
|
||||
<img id="hero-bg-media" src="" alt="">
|
||||
</div>
|
||||
<div class="hero-vignette"></div>
|
||||
|
||||
<div class="hero-content">
|
||||
<div class="hero-poster-card">
|
||||
<img id="hero-poster" src="" alt="">
|
||||
</div>
|
||||
<div class="hero-text">
|
||||
<h1 class="hero-title" id="hero-title">Loading...</h1>
|
||||
<div class="hero-meta">
|
||||
<span class="score-badge" id="hero-score"></span>
|
||||
<span id="hero-year"></span>
|
||||
<span id="hero-type"></span>
|
||||
</div>
|
||||
<p class="hero-desc" id="hero-desc"></p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-primary" id="read-btn">Read Now</button>
|
||||
<button class="btn-blur">+ Add to Library</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="library-mode-btn icon-only" id="library-mode-btn" onclick="toggleLibraryMode()" title="Switch library mode">
|
||||
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
||||
<polyline points="9 22 9 12 15 12 15 22"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<main id="online-content">
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">Continue Reading</div>
|
||||
</div>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollCarousel('my-status-books', -1)">‹</button>
|
||||
<div class="carousel" id="my-status-books"></div>
|
||||
<button class="scroll-btn right" onclick="scrollCarousel('my-status-books', 1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="section-header"><div class="section-title">Trending Books</div></div>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button>
|
||||
<div class="carousel" id="trending"></div>
|
||||
<button class="scroll-btn right" onclick="scrollCarousel('trending', 1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="section-header"><div class="section-title">All Time Popular</div></div>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollCarousel('popular', -1)">‹</button>
|
||||
<div class="carousel" id="popular"></div>
|
||||
<button class="scroll-btn right" onclick="scrollCarousel('popular', 1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="updateToast" class="hidden">
|
||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
||||
|
||||
<a
|
||||
id="downloadButton"
|
||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
||||
target="_blank"
|
||||
>
|
||||
Click To Download
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
||||
<script src="/src/scripts/room-modal.js"></script>
|
||||
<script src="/src/scripts/utils/notification-utils.js"></script>
|
||||
<script src="/src/scripts/utils/search-manager.js"></script>
|
||||
<script src="/src/scripts/utils/list-modal-manager.js"></script>
|
||||
<script src="/src/scripts/utils/continue-watching-manager.js"></script>
|
||||
<script src="/src/scripts/books/books.js"></script>
|
||||
<script src="/src/scripts/updateNotifier.js"></script>
|
||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
||||
<script src="/src/scripts/auth-guard.js"></script>
|
||||
<script src="/src/scripts/settings.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,66 +0,0 @@
|
||||
<div class="modal-overlay" id="add-list-modal">
|
||||
<div class="modal-content modal-list">
|
||||
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
|
||||
<h2 class="modal-title" id="modal-title">Add to List</h2>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="modal-fields-grid">
|
||||
<div class="form-group">
|
||||
<label>Status</label>
|
||||
<select id="entry-status" class="form-input">
|
||||
<option value="CURRENT">Watching/Reading</option>
|
||||
<option value="COMPLETED">Completed</option>
|
||||
<option value="PLANNING">Planning</option>
|
||||
<option value="PAUSED">Paused</option>
|
||||
<option value="DROPPED">Dropped</option>
|
||||
<option value="REPEATING">Rewatching</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Episodes Watched</label>
|
||||
<input type="number" id="entry-progress" class="form-input" min="0" placeholder="0">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Your Score (0-10)</label>
|
||||
<input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
|
||||
</div>
|
||||
|
||||
<div class="form-group full-width">
|
||||
<div class="date-group">
|
||||
<div class="date-input-pair">
|
||||
<label for="entry-start-date">Start Date</label>
|
||||
<input type="date" id="entry-start-date" class="form-input">
|
||||
</div>
|
||||
<div class="date-input-pair">
|
||||
<label for="entry-end-date">End Date</label>
|
||||
<input type="date" id="entry-end-date" class="form-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="entry-repeat-count">Rewatch Count</label>
|
||||
<input type="number" id="entry-repeat-count" class="form-input" min="0">
|
||||
</div>
|
||||
|
||||
<div class="form-group notes-group">
|
||||
<label for="entry-notes">Notes</label>
|
||||
<textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group checkbox-group">
|
||||
<input type="checkbox" id="entry-is-private" class="form-checkbox">
|
||||
<label for="entry-is-private">Mark as Private</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
|
||||
<button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
|
||||
<button class="btn-primary" onclick="saveToList()">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,87 +0,0 @@
|
||||
<nav class="navbar" id="navbar">
|
||||
<a href="#" class="nav-brand">
|
||||
<div class="brand-icon">
|
||||
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
|
||||
</div>
|
||||
WaifuBoard
|
||||
</a>
|
||||
|
||||
<div class="nav-center">
|
||||
<button class="nav-button" data-page="anime" onclick="window.location.href='/anime'">Anime</button>
|
||||
<button class="nav-button" data-page="books" onclick="window.location.href='/books'">Books</button>
|
||||
<button class="nav-button" data-page="gallery" onclick="window.location.href='/gallery'">Gallery</button>
|
||||
<button class="nav-button" data-page="schedule" onclick="window.location.href='/schedule'">Schedule</button>
|
||||
<button class="nav-button" data-page="marketplace" onclick="window.location.href='/marketplace'">Marketplace</button>
|
||||
</div>
|
||||
|
||||
<div class="nav-right">
|
||||
<div class="search-wrapper">
|
||||
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<circle cx="11" cy="11" r="8"/>
|
||||
<path d="M21 21l-4.35-4.35"/>
|
||||
</svg>
|
||||
<input type="text" class="search-input" id="search-input" placeholder="Search..." autocomplete="off">
|
||||
<div class="search-results" id="search-results"></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-user" id="nav-user" style="display:none;">
|
||||
<div class="user-avatar-btn">
|
||||
<img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
|
||||
<div class="online-indicator"></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-dropdown" id="nav-dropdown">
|
||||
<div class="dropdown-header">
|
||||
<img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
|
||||
<div class="dropdown-user-info">
|
||||
<div class="dropdown-username" id="nav-username"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="/profile" class="dropdown-item">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="18" height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="12" cy="7" r="4"/>
|
||||
</svg>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
|
||||
<button class="dropdown-item" id="nav-create-party">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
|
||||
</svg>
|
||||
<span>Watchparty</span>
|
||||
</button>
|
||||
|
||||
<button class="dropdown-item" id="nav-settings">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.65 1.65 0 0 0 15 19.4a1.65 1.65 0 0 0-1 .6 1.65 1.65 0 0 0-.33 1.82V22a2 2 0 1 1-4 0v-.18a1.65 1.65 0 0 0-.33-1.82 1.65 1.65 0 0 0-1-.6 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-.6-1 1.65 1.65 0 0 0-1.82-.33H2a2 2 0 1 1 0-4h.18a1.65 1.65 0 0 0 1.82-.33 1.65 1.65 0 0 0 .6-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6c.37 0 .72-.14 1-.6A1.65 1.65 0 0 0 10.33 2.18V2a2 2 0 1 1 4 0v.18a1.65 1.65 0 0 0 .33 1.82c.28.46.63.6 1 .6a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c0 .37.14.72.6 1 .46.28.6.63.6 1z"/>
|
||||
</svg>
|
||||
<span>Settings</span>
|
||||
</button>
|
||||
|
||||
<button class="dropdown-item logout-item" id="nav-logout">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
|
||||
<polyline points="16 17 21 12 16 7"/>
|
||||
<line x1="21" y1="12" x2="9" y2="12"/>
|
||||
</svg>
|
||||
<span>Logout</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="mobile-menu-toggle" id="mobile-menu-toggle">
|
||||
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -1,310 +0,0 @@
|
||||
<div id="settings-modal" class="modal hidden" onclick="if(event.target === this) window.toggleSettingsModal(true)">
|
||||
<div class="modal-overlay"></div>
|
||||
<div class="modal-content">
|
||||
|
||||
<aside class="modal-sidebar">
|
||||
<div class="sidebar-header">
|
||||
<h2 class="sidebar-title">Settings</h2>
|
||||
</div>
|
||||
<nav id="config-nav" class="nav-list">
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<button onclick="window.toggleSettingsModal(true)" class="btn-exit">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
|
||||
<polyline points="16 17 21 12 16 7"></polyline>
|
||||
<line x1="21" y1="12" x2="9" y2="12"></line>
|
||||
</svg>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="modal-main">
|
||||
<form id="config-form" class="config-wrapper">
|
||||
<div id="config-section-content" class="section-container">
|
||||
<div class="skeleton-loader">
|
||||
<div class="skeleton title-skeleton"></div>
|
||||
<div class="skeleton field-skeleton"></div>
|
||||
<div class="skeleton field-skeleton"></div>
|
||||
<div class="skeleton field-skeleton"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer-sticky">
|
||||
<p class="footer-hint">Changes are applied immediately after saving.</p>
|
||||
<button type="submit" class="btn-primary">Save Changes</button>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* --- THEME VARIABLES (Heredadas y adaptadas de anime.css) --- */
|
||||
:root {
|
||||
--modal-bg: #0b0b0b;
|
||||
--modal-sidebar: rgba(255, 255, 255, 0.02);
|
||||
--modal-border: rgba(255, 255, 255, 0.08);
|
||||
--input-bg: rgba(255, 255, 255, 0.04);
|
||||
--accent: #8b5cf6; /* Tu morado principal */
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #a1a1aa;
|
||||
}
|
||||
|
||||
/* --- MODAL BASE --- */
|
||||
.modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
font-family: system-ui, -apple-system, sans-serif; /* Coherencia con anime.css */
|
||||
}
|
||||
|
||||
.modal.hidden { display: none !important; }
|
||||
|
||||
.modal-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.85); /* Un poco menos opaco para profundidad */
|
||||
backdrop-filter: blur(8px);
|
||||
z-index: -1;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
height: 80vh;
|
||||
background: var(--modal-bg);
|
||||
border: 1px solid var(--modal-border);
|
||||
border-radius: 16px; /* Bordes menos exagerados, más elegantes */
|
||||
overflow: hidden;
|
||||
box-shadow: 0 40px 80px rgba(0,0,0,0.6);
|
||||
animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
/* --- SIDEBAR --- */
|
||||
.modal-sidebar {
|
||||
width: 260px;
|
||||
background: var(--modal-sidebar);
|
||||
border-right: 1px solid var(--modal-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2rem 1.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-header { margin-bottom: 2rem; }
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.nav-list { flex: 1; display: flex; flex-direction: column; gap: 4px; }
|
||||
|
||||
.nav-item {
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
color: var(--text-secondary);
|
||||
transition: all 0.2s ease;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25); /* Glow sutil */
|
||||
}
|
||||
|
||||
/* --- MAIN CONTENT area --- */
|
||||
.modal-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: transparent;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.config-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.section-container {
|
||||
flex: 1;
|
||||
padding: 3rem;
|
||||
overflow-y: auto;
|
||||
/* Custom Scrollbar sutil */
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #333 transparent;
|
||||
}
|
||||
|
||||
/* --- INPUTS & FORMS (Estilo WaifuBoards/Anime) --- */
|
||||
.config-group {
|
||||
margin-bottom: 2rem;
|
||||
animation: fadeInSection 0.3s ease-out;
|
||||
}
|
||||
|
||||
.config-group label {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 0.6rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.config-input {
|
||||
width: 100%;
|
||||
padding: 0.9rem 1rem;
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--modal-border);
|
||||
border-radius: 8px;
|
||||
color: var(--text-primary);
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.config-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 0 0 1px var(--accent);
|
||||
}
|
||||
|
||||
/* --- FOOTER ACTION BAR --- */
|
||||
.modal-footer-sticky {
|
||||
padding: 1.2rem 3rem;
|
||||
background: rgba(11, 11, 11, 0.8); /* Glass effect */
|
||||
backdrop-filter: blur(10px);
|
||||
border-top: 1px solid var(--modal-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.footer-hint {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* --- BUTTONS --- */
|
||||
.btn-primary {
|
||||
padding: 0.7rem 2rem;
|
||||
background: white; /* Estilo 'btn-watch' de anime.css */
|
||||
color: black;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-weight: 800;
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, filter 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: scale(1.02);
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
||||
.btn-exit {
|
||||
background: transparent;
|
||||
border: 1px solid var(--modal-border);
|
||||
color: #ef4444; /* Rojo error sutil */
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
margin-top: auto;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-exit:hover {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border-color: #ef4444;
|
||||
}
|
||||
|
||||
/* --- SKELETON & ANIMATIONS --- */
|
||||
@keyframes modalSlideUp {
|
||||
from { opacity: 0; transform: scale(0.98) translateY(15px); }
|
||||
to { opacity: 1; transform: scale(1) translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
@keyframes fadeInSection { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
|
||||
|
||||
.skeleton-loader { display: flex; flex-direction: column; gap: 1.5rem; }
|
||||
.skeleton {
|
||||
background: linear-gradient(90deg, #111 25%, #1a1a1a 50%, #111 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 2s infinite;
|
||||
border-radius: 6px;
|
||||
}
|
||||
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
|
||||
|
||||
.title-skeleton { height: 28px; width: 30%; margin-bottom: 1rem; }
|
||||
.field-skeleton { height: 48px; width: 100%; }
|
||||
|
||||
/* --- RESPONSIVE --- */
|
||||
@media (max-width: 850px) {
|
||||
.modal-content { flex-direction: column; height: 100%; width: 100%; border-radius: 0; border: none; }
|
||||
.modal-sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--modal-border); padding: 1.5rem; }
|
||||
.sidebar-footer { display: none; } /* Ocultar btn salir sidebar en movil */
|
||||
.section-container { padding: 1.5rem; }
|
||||
.modal-footer-sticky { padding: 1rem 1.5rem; }
|
||||
|
||||
/* Añadir un botón de cierre flotante en móvil si fuera necesario,
|
||||
pero el diseño actual debería funcionar bien con scroll */
|
||||
}
|
||||
|
||||
/* --- Estilo para la nueva descripción --- */
|
||||
.config-description {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(255, 255, 255, 0.5); /* Gris sutil */
|
||||
|
||||
/* Ajustes para posición inferior */
|
||||
margin-top: 0.5rem; /* Espacio entre el input y la descripción */
|
||||
margin-bottom: 0; /* Ya no necesitamos margen abajo */
|
||||
|
||||
line-height: 1.4;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Ajuste para inputs vacíos (placeholder) */
|
||||
.config-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.2);
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
@@ -1,274 +0,0 @@
|
||||
:root {
|
||||
--bg-card: rgba(255, 255, 255, 0.04);
|
||||
--border-subtle: rgba(255, 255, 255, 0.1);
|
||||
--color-primary: #8b5cf6;
|
||||
--player-height: 85vh;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #0b0b0b;
|
||||
color: white;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
.top-media-wrapper {
|
||||
position: relative;
|
||||
|
||||
width: 100vw;
|
||||
left: 0;
|
||||
background: #000;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.hero-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.video-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.video-background iframe,
|
||||
.video-background #trailer-player {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
width: 100vw;
|
||||
height: 56.25vw;
|
||||
min-height: 100vh;
|
||||
min-width: 177.77vh;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.8) 70%, #0b0b0b 100%);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
max-width: 1400px;
|
||||
margin: -45vh auto 0 auto;
|
||||
padding: 0 3rem 4rem 3rem;
|
||||
transition: margin-top 0.5s ease;
|
||||
}
|
||||
|
||||
body.watch-mode .content-container { margin-top: 0; }
|
||||
body.watch-mode .anime-header { margin-top: 2rem; }
|
||||
|
||||
.anime-header { margin-bottom: 5rem; max-width: 900px; }
|
||||
.anime-title {
|
||||
font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900;
|
||||
margin-bottom: 0.5rem; text-shadow: 0 4px 30px rgba(0,0,0,0.6);
|
||||
}
|
||||
.hero-meta-info {
|
||||
display: flex; align-items: center; gap: 0.8rem;
|
||||
color: rgba(255,255,255,0.7); font-weight: 600; margin-bottom: 1.2rem;
|
||||
}
|
||||
.pill-local {
|
||||
background: #22c55e; color: black; padding: 2px 8px;
|
||||
border-radius: 4px; font-size: 0.75rem; font-weight: 900;
|
||||
}
|
||||
.hero-description-mini {
|
||||
font-size: 1.05rem; line-height: 1.5; color: rgba(255,255,255,0.8);
|
||||
margin-bottom: 1.2rem; max-width: 700px;
|
||||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
||||
}
|
||||
.hero-tags {
|
||||
display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem;
|
||||
color: rgba(255,255,255,0.5); font-weight: 500;
|
||||
}
|
||||
|
||||
.action-row { display: flex; align-items: center; gap: 1rem; }
|
||||
.btn-watch {
|
||||
padding: 0.8rem 2.2rem; background: white; color: black;
|
||||
border-radius: 8px; font-weight: 800; border: none; cursor: pointer;
|
||||
display: flex; align-items: center; gap: 0.6rem; transition: 0.2s ease;
|
||||
}
|
||||
.btn-watch:hover { transform: scale(1.03); filter: brightness(0.9); }
|
||||
|
||||
.btn-add-list {
|
||||
padding: 0.8rem 1.5rem; background: rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(255,255,255,0.2); color: white;
|
||||
border-radius: 8px; font-weight: 700; cursor: pointer; transition: 0.2s;
|
||||
}
|
||||
.btn-add-list:hover { background: rgba(255,255,255,0.2); }
|
||||
|
||||
.main-layout { display: grid; grid-template-columns: 300px 1fr; gap: 4rem; margin-top: 2rem; }
|
||||
.content-section { margin-top: 4rem; }
|
||||
h2, .subsection-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; color: white; }
|
||||
|
||||
.poster-card {
|
||||
border-radius: 12px; overflow: hidden;
|
||||
box-shadow: 0 30px 60px rgba(0,0,0,0.5); border: 1px solid var(--border-subtle);
|
||||
}
|
||||
.poster-card img { width: 100%; height: auto; display: block; }
|
||||
|
||||
.relations-horizontal { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
|
||||
.relation-card-horizontal {
|
||||
display: flex; background: var(--bg-card); border: 1px solid var(--border-subtle);
|
||||
border-radius: 10px; overflow: hidden; transition: 0.2s; cursor: pointer;
|
||||
}
|
||||
.relation-card-horizontal:hover { background: rgba(255,255,255,0.08); transform: translateX(5px); }
|
||||
.rel-img { width: 85px; height: 110px; object-fit: cover; }
|
||||
.rel-info { padding: 1rem; display: flex; flex-direction: column; justify-content: center; }
|
||||
.rel-type {
|
||||
font-size: 0.7rem; color: var(--color-primary); font-weight: 800;
|
||||
margin-bottom: 4px; background: rgba(139, 92, 246, 0.1); width: fit-content; padding: 2px 6px; border-radius: 4px;
|
||||
}
|
||||
.rel-title { font-size: 0.95rem; font-weight: 700; color: #eee; }
|
||||
|
||||
.characters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
||||
.character-item { display: flex; align-items: center; gap: 1rem; }
|
||||
.char-avatar { width: 60px; height: 60px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
|
||||
.char-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.char-info { display: flex; flex-direction: column; gap: 2px; }
|
||||
.char-name { font-size: 1rem; font-weight: 700; color: #fff; }
|
||||
.char-role { font-size: 0.8rem; color: #888; font-weight: 500; }
|
||||
.btn-show-more { background: transparent; border: 1px solid var(--border-subtle); color: #aaa; padding: 10px; width: 100%; margin-top: 1rem; cursor: pointer; }
|
||||
|
||||
.episodes-section { margin-top: 3rem; }
|
||||
.episodes-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
|
||||
.episode-search-input {
|
||||
background: rgba(255,255,255,0.05); border: 1px solid var(--border-subtle);
|
||||
color: white; padding: 8px 15px; border-radius: 8px; width: 100px;
|
||||
}
|
||||
.episodes-grid {
|
||||
display: grid;
|
||||
|
||||
grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
|
||||
gap: 0.6rem;
|
||||
}
|
||||
.episode-btn {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid var(--border-subtle);
|
||||
padding: 0.6rem 0;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
color: #ccc;
|
||||
}
|
||||
.episode-btn:hover {
|
||||
background: white;
|
||||
color: black;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.episode-btn.active-playing {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
.metadata-sidebar {
|
||||
margin-top: 2rem;
|
||||
background: rgba(255,255,255,0.03);
|
||||
padding: 1.5rem;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.2rem;
|
||||
}
|
||||
.meta-item-side {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
padding-bottom: 0.8rem;
|
||||
}
|
||||
.meta-item-side:last-child { border-bottom: none; padding-bottom: 0; }
|
||||
.meta-item-side span {
|
||||
font-size: 0.8rem;
|
||||
color: #888;
|
||||
font-weight: 600;
|
||||
}
|
||||
.meta-item-side p {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.content-container { margin-top: -200px; padding: 0 1.5rem; }
|
||||
.main-layout { grid-template-columns: 1fr; gap: 2rem; }
|
||||
.poster-section { display: flex; flex-direction: column; align-items: center; }
|
||||
.poster-card { width: 220px; }
|
||||
.metadata-sidebar { width: 100%; max-width: 400px; }
|
||||
}
|
||||
|
||||
.relation-card-horizontal.no-link {
|
||||
cursor: default;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.relation-card-horizontal.no-link:hover {
|
||||
transform: none;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
color: #888;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
padding: 0.6rem 1.2rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.page-btn:hover:not(:disabled) {
|
||||
background: white;
|
||||
color: black;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.page-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,228 +0,0 @@
|
||||
:root {
|
||||
--bg-card: rgba(255, 255, 255, 0.04);
|
||||
--border-subtle: rgba(255, 255, 255, 0.1);
|
||||
--color-primary: #8b5cf6;
|
||||
}
|
||||
|
||||
/* --- BASICS --- */
|
||||
.back-btn {
|
||||
position: fixed; top: 2rem; left: 2rem; z-index: 100; display: flex; align-items: center; gap: 0.5rem;
|
||||
padding: 0.8rem 1.5rem; background: var(--color-glass-bg); backdrop-filter: blur(12px);
|
||||
border: var(--border-subtle); border-radius: 8px; /* Anime style */
|
||||
color: white; text-decoration: none; font-weight: 600; transition: all 0.2s ease;
|
||||
}
|
||||
.back-btn:hover { background: rgba(255, 255, 255, 0.15); transform: translateX(-5px); }
|
||||
|
||||
.hero-wrapper { position: relative; width: 100%; height: 60vh; overflow: hidden; }
|
||||
.hero-background { position: absolute; inset: 0; z-index: 0; }
|
||||
.hero-background img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; filter: blur(8px); transform: scale(1.1); }
|
||||
.hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, transparent 0%, var(--color-bg-base) 100%); }
|
||||
|
||||
.content-container {
|
||||
position: relative; z-index: 10; max-width: 1400px; margin: -300px auto 0 auto;
|
||||
padding: 0 3rem 4rem 3rem;
|
||||
}
|
||||
|
||||
/* --- HEADER SECTION --- */
|
||||
.book-header-section { margin-bottom: 4rem; max-width: 900px; }
|
||||
.book-title {
|
||||
font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900;
|
||||
margin-bottom: 0.5rem; text-shadow: 0 4px 30px rgba(0,0,0,0.6); line-height: 1.1;
|
||||
}
|
||||
|
||||
.hero-meta-info {
|
||||
display: flex; align-items: center; gap: 0.8rem;
|
||||
color: rgba(255,255,255,0.7); font-weight: 600; margin-bottom: 1.2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.meta-separator { color: rgba(255,255,255,0.3); font-size: 0.8rem; }
|
||||
|
||||
.pill-local {
|
||||
background: #22c55e; color: black; padding: 2px 8px;
|
||||
border-radius: 4px; font-size: 0.75rem; font-weight: 900;
|
||||
}
|
||||
|
||||
.hero-description-mini {
|
||||
font-size: 1.05rem; line-height: 1.5; color: rgba(255,255,255,0.8);
|
||||
margin-bottom: 1.2rem; max-width: 700px;
|
||||
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
|
||||
}
|
||||
.hero-tags {
|
||||
display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem;
|
||||
color: rgba(255,255,255,0.5); font-weight: 500;
|
||||
}
|
||||
|
||||
/* --- BUTTONS --- */
|
||||
.action-row { display: flex; align-items: center; gap: 1rem; }
|
||||
.btn-read {
|
||||
padding: 0.8rem 2.2rem; background: white; color: black;
|
||||
border-radius: 8px; font-weight: 800; border: none; cursor: pointer;
|
||||
display: flex; align-items: center; gap: 0.6rem; transition: 0.2s ease;
|
||||
}
|
||||
.btn-read:hover { transform: scale(1.03); filter: brightness(0.9); }
|
||||
|
||||
.btn-add-list {
|
||||
padding: 0.8rem 1.5rem; background: rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(255,255,255,0.2); color: white;
|
||||
border-radius: 8px; font-weight: 700; cursor: pointer; transition: 0.2s;
|
||||
}
|
||||
.btn-add-list:hover { background: rgba(255,255,255,0.2); }
|
||||
|
||||
|
||||
/* --- MAIN LAYOUT --- */
|
||||
.main-layout { display: grid; grid-template-columns: 280px 1fr; gap: 4rem; margin-top: 2rem; }
|
||||
|
||||
/* Sidebar */
|
||||
.poster-section { display: flex; flex-direction: column; gap: 1.5rem; }
|
||||
.poster-card {
|
||||
border-radius: 12px; overflow: hidden; width: 100%;
|
||||
box-shadow: 0 30px 60px rgba(0,0,0,0.5); border: 1px solid var(--border-subtle);
|
||||
}
|
||||
.poster-card img { width: 100%; height: auto; display: block; aspect-ratio: 2/3; object-fit: cover; }
|
||||
|
||||
/* Sidebar Extra Info (Synonyms) */
|
||||
.sidebar-extra-info {
|
||||
background: rgba(255,255,255,0.03); padding: 1.5rem;
|
||||
border-radius: 16px; border: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
.sidebar-label {
|
||||
font-size: 0.8rem; color: #888; text-transform: uppercase; margin: 0 0 1rem 0; letter-spacing: 0.5px;
|
||||
}
|
||||
.synonyms-list {
|
||||
list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem;
|
||||
}
|
||||
.synonyms-list li {
|
||||
font-size: 0.9rem; color: #ddd; line-height: 1.4; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 0.5rem;
|
||||
}
|
||||
.synonyms-list li:last-child { border-bottom: none; }
|
||||
|
||||
|
||||
/* --- CONTENT COLUMN --- */
|
||||
.content-section { margin-top: 4rem; }
|
||||
h2, .subsection-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; color: white; }
|
||||
|
||||
/* Chapters Section */
|
||||
.chapters-section { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1rem; }
|
||||
.chapters-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
|
||||
|
||||
/* Chapter Controls */
|
||||
.chapter-controls { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
|
||||
.glass-select, .glass-input {
|
||||
appearance: none; -webkit-appearance: none;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='rgba(255,255,255,0.7)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9);
|
||||
padding: 0.4rem 2rem 0.4rem 0.8rem; border-radius: 6px; font-size: 0.8rem; font-weight: 500; height: 34px;
|
||||
outline: none; backdrop-filter: blur(4px); transition: all 0.2s ease; cursor: pointer; min-width: 110px;
|
||||
}
|
||||
.glass-input { background-image: none; padding: 0.4rem 0.8rem; width: 180px; }
|
||||
.glass-input:focus { border-color: var(--color-primary); width: 220px; }
|
||||
.glass-btn-icon { width: 34px; height: 34px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
|
||||
.glass-btn-icon:hover { background: var(--color-primary); border-color: var(--color-primary); }
|
||||
|
||||
/* Chapters Grid */
|
||||
.chapters-grid { display: flex; flex-direction: column; gap: 0.5rem; }
|
||||
.chapter-item {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
padding: 0.8rem 1.2rem; border-radius: 8px;
|
||||
transition: all 0.2s ease; cursor: pointer; position: relative; overflow: hidden;
|
||||
}
|
||||
.chapter-item:hover { background: rgba(255, 255, 255, 0.08); transform: translateX(5px); border-color: rgba(255, 255, 255, 0.2); }
|
||||
.chapter-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--color-primary); opacity: 0; transition: opacity 0.2s; }
|
||||
.chapter-info { display: flex; flex-direction: column; gap: 0.2rem; }
|
||||
.chapter-number { font-size: 0.85rem; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; }
|
||||
.chapter-title { font-size: 1rem; font-weight: 500; color: white; }
|
||||
.chapter-meta { display: flex; align-items: center; gap: 1rem; font-size: 0.85rem; color: #888; }
|
||||
.lang-tag { font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.1); text-transform: uppercase; color: #ccc; }
|
||||
|
||||
|
||||
/* --- RELATIONS (Horizontal Cards) --- */
|
||||
.relations-horizontal { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
|
||||
.relation-card-horizontal {
|
||||
display: flex; background: var(--bg-card); border: 1px solid var(--border-subtle);
|
||||
border-radius: 10px; overflow: hidden; transition: 0.2s; cursor: pointer;
|
||||
}
|
||||
.relation-card-horizontal:hover { background: rgba(255,255,255,0.08); transform: translateX(5px); }
|
||||
.rel-img { width: 85px; height: 110px; object-fit: cover; }
|
||||
.rel-info { padding: 1rem; display: flex; flex-direction: column; justify-content: center; }
|
||||
.rel-type {
|
||||
font-size: 0.7rem; color: var(--color-primary); font-weight: 800;
|
||||
margin-bottom: 4px; background: rgba(139, 92, 246, 0.1); width: fit-content; padding: 2px 6px; border-radius: 4px;
|
||||
}
|
||||
.rel-title { font-size: 0.95rem; font-weight: 700; color: #eee; }
|
||||
|
||||
|
||||
/* --- CHARACTERS (Grid Style) --- */
|
||||
.characters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 1rem; }
|
||||
.character-item { display: flex; align-items: center; gap: 1rem; }
|
||||
.char-avatar { width: 60px; height: 60px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
|
||||
.char-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.char-info { display: flex; flex-direction: column; gap: 2px; }
|
||||
.char-name { font-size: 1rem; font-weight: 700; color: #fff; }
|
||||
.char-role { font-size: 0.8rem; color: #888; font-weight: 500; }
|
||||
|
||||
/* --- PAGINATION --- */
|
||||
.pagination-controls { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; align-items: center; }
|
||||
.page-btn { background: var(--color-bg-elevated); border: 1px solid rgba(255, 255, 255, 0.1); color: white; padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer; font-size: 0.9rem; }
|
||||
.page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.page-btn:hover:not(:disabled) { border-color: var(--color-primary); }
|
||||
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.content-container { margin-top: -150px; padding: 0 1.5rem; }
|
||||
.main-layout { grid-template-columns: 1fr; gap: 2rem; }
|
||||
.poster-section { display: flex; flex-direction: column; align-items: center; }
|
||||
.poster-card { width: 220px; }
|
||||
.metadata-sidebar { width: 100%; max-width: 400px; }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-wrapper { height: 40vh; }
|
||||
.book-title { font-size: 2.5rem; }
|
||||
.action-row { flex-direction: column; width: 100%; }
|
||||
.btn-read, .btn-add-list { width: 100%; justify-content: center; }
|
||||
.chapters-header { flex-direction: column; align-items: flex-start; }
|
||||
.chapter-controls { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
|
||||
.search-box { grid-column: span 2; }
|
||||
.glass-input { width: 100%; }
|
||||
}
|
||||
|
||||
.chapter-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.chapter-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
color: #ccc;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.download-btn:hover {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.download-btn:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: wait;
|
||||
}
|
||||
@@ -1,625 +0,0 @@
|
||||
:root {
|
||||
--bg-surface: #14141b;
|
||||
--bg-elevated: #1c1c26;
|
||||
--bg-hover: #252530;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 64px;
|
||||
background: rgba(10, 10, 15, 0.85);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 1.5rem;
|
||||
z-index: 1000;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.glass-btn {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-subtle);
|
||||
color: var(--color-text-primary);
|
||||
padding: 0.625rem 1.25rem;
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.glass-btn:hover {
|
||||
background: var(--bg-hover);
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.glass-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.chapter-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-subtle);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
color: var(--color-text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-arrow:hover {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.nav-arrow:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#reader {
|
||||
margin-top: 64px;
|
||||
padding: 2rem 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-height: calc(100vh - 64px);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.manga-container {
|
||||
width: 100%;
|
||||
max-width: var(--manga-max-width, 1200px);
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--page-spacing, 16px);
|
||||
}
|
||||
|
||||
.page-img {
|
||||
width: 100%;
|
||||
max-width: var(--page-max-width, 900px);
|
||||
height: auto;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.page-img:hover {
|
||||
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.page-img.zoomed {
|
||||
position: fixed;
|
||||
top: 64px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
max-width: 100vw;
|
||||
max-height: calc(100vh - 64px);
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
z-index: 999;
|
||||
cursor: zoom-out;
|
||||
border-radius: 0;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.zoom-overlay {
|
||||
position: fixed;
|
||||
top: 64px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.95);
|
||||
z-index: 998;
|
||||
cursor: zoom-out;
|
||||
}
|
||||
|
||||
.double-container {
|
||||
display: flex;
|
||||
gap: var(--page-spacing, 16px);
|
||||
width: 100%;
|
||||
max-width: var(--manga-max-width, 1400px);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.double-container img {
|
||||
width: 48%;
|
||||
max-width: 700px;
|
||||
height: auto;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
object-fit: contain;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.double-container img:hover {
|
||||
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.ln-content {
|
||||
max-width: var(--ln-max-width, 750px);
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 3rem 2.5rem;
|
||||
line-height: var(--ln-line-height, 1.8);
|
||||
font-size: var(--ln-font-size, 18px);
|
||||
font-family: var(--ln-font-family, "Georgia", serif);
|
||||
color: var(--ln-text-color, #e5e7eb);
|
||||
text-align: var(--ln-text-align, left);
|
||||
}
|
||||
|
||||
.ln-content p {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.ln-content h1,
|
||||
.ln-content h2,
|
||||
.ln-content h3 {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 1em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.settings-panel {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 400px;
|
||||
padding: 0;
|
||||
z-index: 1001;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-surface);
|
||||
border-left: 1px solid var(--border-subtle);
|
||||
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.settings-panel.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5rem;
|
||||
z-index: 10;
|
||||
background: #0a0a0f;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.panel-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg-elevated);
|
||||
border: none;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-primary);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
flex: 1;
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.settings-section:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.settings-section h4 {
|
||||
margin: 0 0 1.25rem 0;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.control {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.control:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.control label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.625rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.control label span {
|
||||
color: var(--color-text-primary);
|
||||
font-weight: 600;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
width: 100%;
|
||||
border-radius: var(--radius-full);
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
cursor: pointer;
|
||||
height: 8px;
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb:hover {
|
||||
transform: scale(1.15);
|
||||
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.6);
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-thumb {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
select,
|
||||
input[type="color"],
|
||||
input[type="number"] {
|
||||
width: 100%;
|
||||
padding: 0.625rem 0.875rem;
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text-primary);
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
select:hover,
|
||||
input[type="color"]:hover,
|
||||
input[type="number"]:hover {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
select:focus,
|
||||
input[type="color"]:focus,
|
||||
input[type="number"]:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px var(--color-primary-glow);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
height: 44px;
|
||||
padding: 0.25rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.presets {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.presets button {
|
||||
background: var(--bg-elevated);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text-primary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.875rem;
|
||||
padding: 1rem;
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border-subtle);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.presets button:hover {
|
||||
background: var(--color-primary);
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px var(--color-primary-glow);
|
||||
}
|
||||
|
||||
.toggle-group {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
flex: 1;
|
||||
background: var(--bg-elevated);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.8125rem;
|
||||
text-align: center;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border-subtle);
|
||||
color: var(--color-text-secondary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.toggle-btn:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.toggle-btn.active {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-text-primary);
|
||||
box-shadow: 0 2px 10px var(--color-primary-glow);
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.overlay.active {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid var(--bg-elevated);
|
||||
border-top-color: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4rem 2rem;
|
||||
gap: 1rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.settings-panel::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.settings-panel::-webkit-scrollbar-track {
|
||||
background: var(--bg-surface);
|
||||
}
|
||||
|
||||
.settings-panel::-webkit-scrollbar-thumb {
|
||||
background: var(--bg-elevated);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.settings-panel::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.settings-panel {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.glass-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.chapter-info {
|
||||
font-size: 0.875rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.double-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.double-container img {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.ln-content {
|
||||
padding: 2rem 1.5rem;
|
||||
font-size: var(--ln-font-size, 16px);
|
||||
}
|
||||
}
|
||||
|
||||
.fit-width {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.fit-height {
|
||||
height: var(--viewport-height, 85vh) !important;
|
||||
width: auto !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.fit-screen {
|
||||
max-height: var(--viewport-height, 85vh) !important;
|
||||
max-width: 100% !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
|
||||
.page-img.longstrip-fit {
|
||||
width: 50%;
|
||||
max-width: 50%;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#reader {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
|
||||
padding-top: 64px;
|
||||
}
|
||||
|
||||
.manga-container {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
gap: 0 !important;
|
||||
}
|
||||
|
||||
.page-img {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.page-img.longstrip-fit {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.double-container {
|
||||
flex-direction: column !important;
|
||||
gap: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.double-container img {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.fit-height,
|
||||
.fit-screen {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
max-height: none !important;
|
||||
max-width: 100% !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
}
|
||||
|
||||
.double-container.break-double {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.double-container.break-double img {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
@@ -1,316 +0,0 @@
|
||||
:root {
|
||||
|
||||
--color-primary: #8b5cf6;
|
||||
--bg-modal: rgba(15, 15, 15, 0.95);
|
||||
--border-subtle: rgba(255, 255, 255, 0.1);
|
||||
--input-bg: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
backdrop-filter: blur(8px);
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.modal-overlay.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--bg-modal);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 16px;
|
||||
max-width: 850px;
|
||||
width: 95%;
|
||||
position: relative;
|
||||
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform: scale(0.95) translateY(10px);
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.modal-overlay.active .modal-content {
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 1.2rem;
|
||||
right: 1.2rem;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid var(--border-subtle);
|
||||
color: #ccc;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s;
|
||||
z-index: 2001;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
background: #ef4444;
|
||||
border-color: #ef4444;
|
||||
color: white;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
padding: 2rem 2.5rem 1rem 2.5rem;
|
||||
margin: 0;
|
||||
color: white;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
letter-spacing: -0.02em;
|
||||
background: linear-gradient(to right, #fff, #aaa);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 0 2.5rem;
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255,255,255,0.2) transparent;
|
||||
}
|
||||
|
||||
.modal-body::-webkit-scrollbar { width: 6px; }
|
||||
.modal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
|
||||
|
||||
.modal-fields-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.5rem 2rem;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--border-subtle);
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
font-family: inherit;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
height: 45px;
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
textarea.form-input {
|
||||
height: auto;
|
||||
padding: 1rem;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
background: rgba(0,0,0,0.6);
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
|
||||
}
|
||||
|
||||
.form-group.notes-group {
|
||||
grid-column: 1 / -1;
|
||||
order: 10;
|
||||
}
|
||||
.form-group.checkbox-group {
|
||||
grid-column: 3 / 4;
|
||||
align-self: end;
|
||||
margin-bottom: 0.8rem;
|
||||
order: 5;
|
||||
}
|
||||
.form-group.full-width { grid-column: 1 / -1; }
|
||||
.notes-textarea { resize: vertical; min-height: 100px; line-height: 1.5; }
|
||||
|
||||
/* Cambia de 3 columnas a 2 columnas para que Start y End llenen el espacio */
|
||||
.date-group {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr; /* Antes era 1fr 1fr 1fr */
|
||||
gap: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.date-input-pair {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background: rgba(255,255,255,0.02);
|
||||
padding: 0.8rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.checkbox-group:hover { border-color: var(--border-subtle); }
|
||||
|
||||
.form-checkbox {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
background: transparent;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.form-checkbox:checked {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
|
||||
}
|
||||
|
||||
.form-checkbox:checked::after {
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem 2.5rem;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
background: rgba(10, 10, 10, 0.3);
|
||||
border-bottom-left-radius: 16px;
|
||||
border-bottom-right-radius: 16px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.btn-primary, .btn-secondary, .btn-danger {
|
||||
padding: 0.85rem 1.8rem;
|
||||
border-radius: 10px;
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-subtle);
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: #ef4444;
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.modal-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100vh;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.modal-title { padding: 1.5rem 1.5rem 1rem; }
|
||||
.modal-body { padding: 0 1.5rem; }
|
||||
.modal-fields-grid { display: flex; flex-direction: column; gap: 1.2rem; }
|
||||
|
||||
.form-group, .form-group.notes-group,
|
||||
.form-group.checkbox-group, .form-group.full-width {
|
||||
grid-column: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.date-group { flex-direction: column; gap: 1rem; }
|
||||
.modal-actions {
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-secondary, .btn-danger { width: 100%; padding: 1rem; }
|
||||
.btn-primary { order: 1; }
|
||||
.btn-secondary { order: 2; }
|
||||
.btn-danger { order: 3; margin-top: 0.5rem; }
|
||||
}
|
||||
|
||||
input[type="date"].form-input {
|
||||
display: block; /* Elimina el comportamiento flex */
|
||||
text-align: left; /* Asegura alineación a la izquierda */
|
||||
padding-top: 10px; /* Ajuste pequeño para centrar verticalmente si es necesario */
|
||||
}
|
||||
@@ -1,291 +0,0 @@
|
||||
/* create-room.css */
|
||||
.cr-modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(8px);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10001; /* Mayor que el navbar */
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.cr-modal-overlay.show {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.cr-modal-content {
|
||||
background: rgba(20, 20, 20, 0.95);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
max-width: 450px;
|
||||
width: 90%;
|
||||
position: relative;
|
||||
transform: scale(0.95);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.cr-modal-overlay.show .cr-modal-content {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.cr-modal-close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.cr-modal-close:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cr-modal-title {
|
||||
margin: 0 0 24px 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
color: white;
|
||||
background: linear-gradient(to right, #fff, #a78bfa);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.cr-form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.cr-form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
color: #e5e7eb;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.cr-input {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
padding: 12px 16px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.95rem;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.cr-input:focus {
|
||||
border-color: #8b5cf6; /* Tu color primario */
|
||||
}
|
||||
|
||||
.cr-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.cr-btn-cancel {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cr-btn-confirm {
|
||||
background: #8b5cf6;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 24px;
|
||||
border-radius: 8px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.cr-btn-confirm:hover {
|
||||
background: #7c3aed;
|
||||
}
|
||||
|
||||
.cr-btn-confirm:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Add to room.css */
|
||||
.modal-header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.btn-icon-small {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.config-grid {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.config-poster img {
|
||||
width: 140px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.config-form {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.form-select, .form-input {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
outline: none;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.form-select:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.form-group.half {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.config-grid { flex-direction: column; align-items: center; }
|
||||
.config-poster img { width: 100px; }
|
||||
}
|
||||
|
||||
.modal-header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.btn-icon-small {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-icon-small:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
/* Config Grid Layout */
|
||||
.config-grid {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.config-poster img {
|
||||
width: 140px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.config-form {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Form Elements */
|
||||
.form-select, .form-input {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
outline: none;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.form-select:focus, .form-input:focus {
|
||||
border-color: var(--brand-color);
|
||||
}
|
||||
|
||||
.form-select:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Form Select specific for dark mode options */
|
||||
.form-select option {
|
||||
background: #1a1a1a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.form-group.half {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Mobile Responsiveness */
|
||||
@media (max-width: 600px) {
|
||||
.config-grid { flex-direction: column; align-items: center; }
|
||||
.config-poster img { width: 100px; }
|
||||
.form-row { flex-direction: column; gap: 0; }
|
||||
}
|
||||
@@ -1,282 +0,0 @@
|
||||
/* match-modal.css */
|
||||
:root {
|
||||
--match-primary: #8b5cf6;
|
||||
--match-bg: rgba(15, 15, 15, 0.95);
|
||||
--match-border: rgba(255, 255, 255, 0.1);
|
||||
--match-input-bg: rgba(0, 0, 0, 0.4);
|
||||
--match-text-muted: #a1a1aa;
|
||||
}
|
||||
|
||||
/* Overlay Global con efecto Glass */
|
||||
.match-modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
backdrop-filter: blur(8px);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.match-modal-overlay.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Contenido del Modal */
|
||||
.match-modal-content {
|
||||
background: var(--match-bg);
|
||||
border: 1px solid var(--match-border);
|
||||
border-radius: 16px;
|
||||
width: 100%;
|
||||
max-width: 700px; /* Un poco más ancho para mejor lectura */
|
||||
max-height: 85vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow:
|
||||
0 25px 80px rgba(0, 0, 0, 0.9),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
transform: scale(0.95) translateY(10px);
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.match-modal-overlay.active .match-modal-content {
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
|
||||
/* Header Estilizado */
|
||||
.match-header {
|
||||
padding: 1.5rem 2rem;
|
||||
border-bottom: 1px solid var(--match-border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: linear-gradient(to bottom, rgba(255,255,255,0.02), transparent);
|
||||
}
|
||||
|
||||
.match-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
letter-spacing: -0.02em;
|
||||
/* Efecto gradiente en el texto como en anilist-modal */
|
||||
background: linear-gradient(to right, #fff, #aaa);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
#match-provider-badge {
|
||||
opacity: 0.6;
|
||||
font-size: 0.8em;
|
||||
margin-left: 8px;
|
||||
font-weight: normal;
|
||||
-webkit-text-fill-color: #888; /* Resetear el gradiente para el badge */
|
||||
}
|
||||
|
||||
.match-close-btn {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid var(--match-border);
|
||||
color: #ccc;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.match-close-btn:hover {
|
||||
background: #ef4444;
|
||||
border-color: #ef4444;
|
||||
color: white;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* Buscador y Controles */
|
||||
.match-search-container {
|
||||
padding: 1.5rem 2rem 1rem 2rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
background: rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.match-input {
|
||||
flex: 1;
|
||||
background: var(--match-input-bg);
|
||||
border: 1px solid var(--match-border);
|
||||
color: white;
|
||||
padding: 1rem 1.2rem;
|
||||
border-radius: 10px;
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.match-input:focus {
|
||||
background: rgba(0,0,0,0.6);
|
||||
border-color: var(--match-primary);
|
||||
box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
|
||||
}
|
||||
|
||||
.match-search-btn {
|
||||
padding: 0 1.8rem;
|
||||
background: var(--match-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
.match-search-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
/* Lista de Resultados */
|
||||
.match-results-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0.5rem 2rem 2rem 2rem;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255,255,255,0.2) transparent;
|
||||
}
|
||||
|
||||
.match-results-body::-webkit-scrollbar { width: 6px; }
|
||||
.match-results-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
|
||||
|
||||
.match-list-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* Tarjeta de Resultado Mejorada */
|
||||
.match-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.2rem;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
padding: 0.8rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.match-item:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
transform: translateX(4px);
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.match-poster {
|
||||
width: 50px;
|
||||
height: 72px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
background: #222;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.match-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 0.3rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.match-item-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.match-item-meta {
|
||||
font-size: 0.85rem;
|
||||
color: var(--match-text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Botón de enlace externo refinado */
|
||||
.match-link-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
transition: all 0.2s;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.match-link-btn:hover {
|
||||
background: var(--match-primary);
|
||||
color: white;
|
||||
border-color: var(--match-primary);
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
|
||||
}
|
||||
|
||||
/* Mensajes y Spinner */
|
||||
.match-spinner {
|
||||
width: 40px; height: 40px;
|
||||
border: 3px solid rgba(255,255,255,0.1);
|
||||
border-top-color: var(--match-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
margin: 3rem auto;
|
||||
}
|
||||
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
.match-msg {
|
||||
text-align: center;
|
||||
color: var(--match-text-muted);
|
||||
margin-top: 3rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.match-msg.error { color: #ef4444; }
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.match-modal-content {
|
||||
height: 100%;
|
||||
max-height: 100vh;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
.match-search-container {
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
.match-search-btn {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
@@ -1,96 +0,0 @@
|
||||
/* home.css - Estilo Streaming Profesional (Sin modificar cards/flechas) */
|
||||
|
||||
/* 1. Fondo y Fusión del Layout */
|
||||
body {
|
||||
background-color: #0b0b0b; /* Fondo oscuro profundo */
|
||||
}
|
||||
|
||||
/* Efecto de superposición: El contenido sube sobre el banner */
|
||||
main#online-content {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
margin-top: -12vh; /* Sube el contenido visualmente hacia el banner */
|
||||
padding-top: 3rem;
|
||||
/* Degradado para que el corte no sea brusco */
|
||||
background: linear-gradient(to bottom, transparent 0%, #0b0b0b 15%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
/* Estilizamos los botones del Hero para igualar a anime.css */
|
||||
.hero-buttons .btn-primary {
|
||||
background: white;
|
||||
color: black;
|
||||
font-weight: 800;
|
||||
border: none;
|
||||
padding: 0.9rem 2.4rem;
|
||||
border-radius: 8px; /* Bordes menos redondos, más modernos */
|
||||
text-transform: uppercase;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.hero-buttons .btn-blur {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* 3. Títulos de Secciones */
|
||||
/* Añadimos un acento de color a la izquierda */
|
||||
.section-header {
|
||||
border-left: 5px solid var(--color-primary); /* Línea morada vertical */
|
||||
padding-left: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* 4. Botón Flotante (Modo Biblioteca) */
|
||||
/* Estilo Glassmorphism sin cambiar su posición */
|
||||
.library-mode-btn {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
background: rgba(20, 20, 23, 0.6);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
|
||||
border-radius: 16px; /* Cuadrado redondeado en vez de círculo total */
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.library-mode-btn svg {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.library-mode-btn:hover {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4); /* Glow morado */
|
||||
}
|
||||
|
||||
.library-mode-btn:hover svg {
|
||||
opacity: 1;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Ajustes Responsive para que el overlap no rompa el móvil */
|
||||
@media (max-width: 768px) {
|
||||
main#online-content {
|
||||
margin-top: -5vh; /* Menos subida en móvil */
|
||||
background: linear-gradient(to bottom, transparent 0%, #0b0b0b 10%);
|
||||
}
|
||||
}
|
||||
@@ -1,944 +0,0 @@
|
||||
/* =========================================
|
||||
1. LAYOUT & ESTRUCTURA BASE
|
||||
========================================= */
|
||||
.main-wrapper {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 6rem;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Efecto de fondo ambiental (Glow superior) */
|
||||
.main-wrapper::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 60vh;
|
||||
background: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.15), transparent 70%);
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
padding: 0 3rem;
|
||||
animation: fadeInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
2. PERFIL (Modern Header)
|
||||
========================================= */
|
||||
.profile-header {
|
||||
background: var(--color-bg-elevated, #18181b);
|
||||
border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.05));
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.profile-banner {
|
||||
height: 200px;
|
||||
background: linear-gradient(120deg, #2e1065, #8b5cf6);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.profile-body {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 3rem;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 2rem;
|
||||
margin-top: -60px; /* Superposición sobre el banner */
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Avatar */
|
||||
.profile-avatar-wrapper {
|
||||
position: relative;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 5px solid var(--color-bg-base, #09090b);
|
||||
object-fit: cover;
|
||||
background: var(--color-bg-elevated, #18181b);
|
||||
}
|
||||
|
||||
.avatar-edit-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
border: 5px solid transparent;
|
||||
}
|
||||
|
||||
.profile-avatar-wrapper:hover .avatar-edit-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Detalles de Texto y Badges */
|
||||
.profile-details {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
padding-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.username-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.profile-text h1 {
|
||||
font-size: 2.5rem;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.header-anilist-badge {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header-anilist-badge img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.header-anilist-badge:hover { transform: scale(1.1); box-shadow: 0 0 15px rgba(61, 180, 242, 0.5); }
|
||||
|
||||
/* Estadísticas */
|
||||
.profile-stats-grid { display: flex; gap: 1.5rem; }
|
||||
|
||||
.stat-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: rgba(255,255,255,0.03);
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.stat-value { font-size: 1.4rem; font-weight: 800; color: white; }
|
||||
.stat-label { font-size: 0.8rem; color: var(--color-text-secondary, #a1a1aa); text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
|
||||
/* Responsive Profile */
|
||||
@media (max-width: 900px) {
|
||||
.profile-body { flex-direction: column; align-items: center; margin-top: -100px; text-align: center; }
|
||||
.profile-details { flex-direction: column; align-items: center; width: 100%; }
|
||||
.profile-stats-grid { justify-content: center; width: 100%; }
|
||||
.username-wrapper { justify-content: center; }
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
3. NAVEGACIÓN (Pills Modernos)
|
||||
========================================= */
|
||||
.hub-navigation-modern {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
max-width: 1400px;
|
||||
margin: 1rem auto 0 auto;
|
||||
padding: 0 3rem 1rem 3rem;
|
||||
}
|
||||
|
||||
.nav-pill {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--color-text-secondary, #a1a1aa);
|
||||
padding: 0.6rem 1.2rem;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.nav-pill:hover { background: rgba(255,255,255,0.05); color: white; }
|
||||
.nav-pill.active { background: var(--color-primary, #8b5cf6); color: white; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hub-navigation-modern { justify-content: center; padding-left: 1rem; padding-right: 1rem; flex-wrap: wrap; }
|
||||
}
|
||||
|
||||
.tab-section {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
.tab-section.active {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
4. TOOLBAR & CONTROLES
|
||||
========================================= */
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2.5rem;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(5px);
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Local Toolbar Variant */
|
||||
.toolbar.local-toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.search-box svg {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--color-text-muted, #71717a);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
background: rgba(0,0,0,0.2);
|
||||
border: 1px solid transparent;
|
||||
padding: 0.7rem 1rem 0.7rem 2.8rem;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
font-family: inherit;
|
||||
font-size: 0.95rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
background: rgba(0,0,0,0.4);
|
||||
border-color: var(--color-primary, #8b5cf6);
|
||||
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
|
||||
}
|
||||
|
||||
.filters-inline {
|
||||
display: flex;
|
||||
gap: 0.8rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.minimal-select {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
color: var(--color-text-secondary, #a1a1aa);
|
||||
padding: 0.6rem 2rem 0.6rem 1rem;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
transition: 0.2s;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a1a1aa'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.7rem center;
|
||||
background-size: 1rem;
|
||||
}
|
||||
|
||||
.minimal-select option {
|
||||
background-color: var(--color-bg-elevated, #18181b);
|
||||
color: #e4e4e7;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.minimal-select:hover { background: rgba(255,255,255,0.1); color: white; }
|
||||
.minimal-select:focus { border-color: var(--color-primary, #8b5cf6); color: white; }
|
||||
|
||||
.view-toggle {
|
||||
display: flex;
|
||||
background: rgba(0,0,0,0.3);
|
||||
border-radius: 8px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--color-text-muted, #71717a);
|
||||
padding: 0.5rem 0.8rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.view-btn.active, .view-btn:hover { background: rgba(255,255,255,0.1); color: white; }
|
||||
|
||||
/* Switcher Local (Segmented Control) */
|
||||
.local-type-switcher {
|
||||
display: flex;
|
||||
background: rgba(0,0,0,0.3);
|
||||
padding: 4px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.type-pill-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--color-text-secondary, #a1a1aa);
|
||||
padding: 0.5rem 1.2rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.type-pill-btn:hover { color: white; }
|
||||
.type-pill-btn.active {
|
||||
background: var(--color-bg-elevated, #18181b);
|
||||
color: white;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
/* Action Buttons (Scan) */
|
||||
.actions-group {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
border-left: 1px solid rgba(255,255,255,0.1);
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.action-icon-btn {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: var(--color-text-secondary, #a1a1aa);
|
||||
width: 40px; height: 40px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.action-icon-btn:hover { background: var(--color-primary, #8b5cf6); border-color: var(--color-primary, #8b5cf6); color: white; }
|
||||
.action-icon-btn.danger:hover { background: rgba(239, 68, 68, 0.2); border-color: #ef4444; color: #ef4444; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.toolbar { flex-direction: column; align-items: stretch; }
|
||||
.toolbar.local-toolbar { grid-template-columns: 1fr; gap: 1rem; }
|
||||
.actions-group { border-left: none; padding-left: 0; justify-content: flex-end; }
|
||||
.local-type-switcher, .type-pill-btn { width: 100%; flex: 1; }
|
||||
.search-box { max-width: 100%; }
|
||||
.filters-inline { justify-content: space-between; }
|
||||
.minimal-select { flex: 1; }
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
5. LIST GRID (Cards)
|
||||
========================================= */
|
||||
.list-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 2rem 1.5rem;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.list-item:hover { transform: scale(1.05); z-index: 10; }
|
||||
|
||||
.item-poster-link {
|
||||
display: block;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 2/3;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.item-poster {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: filter 0.3s;
|
||||
}
|
||||
|
||||
.list-item:hover .item-poster { filter: brightness(1.1); }
|
||||
|
||||
.item-content { padding-top: 0.8rem; }
|
||||
|
||||
.item-title {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 0.4rem 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: rgba(255,255,255,0.9);
|
||||
}
|
||||
|
||||
.list-item:hover .item-title { color: var(--color-primary, #8b5cf6); }
|
||||
|
||||
.item-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.meta-pill {
|
||||
font-size: 0.65rem;
|
||||
padding: 0.15rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.status-pill { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
|
||||
.type-pill { background: rgba(255, 255, 255, 0.1); color: #e4e4e7; }
|
||||
.source-pill { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
|
||||
.repeat-pill { background: rgba(234, 179, 8, 0.15); color: #facc15; }
|
||||
.private-pill { background: rgba(239, 68, 68, 0.15); color: #f87171; }
|
||||
|
||||
.progress-bar-container {
|
||||
height: 4px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 0.4rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: var(--color-primary, #8b5cf6);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-secondary, #a1a1aa);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Edit Button (Hover) */
|
||||
.edit-icon-btn {
|
||||
position: absolute;
|
||||
top: 10px; right: 10px;
|
||||
background: rgba(0,0,0,0.7);
|
||||
backdrop-filter: blur(4px);
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
color: white;
|
||||
width: 32px; height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transform: translateY(-5px);
|
||||
transition: all 0.2s;
|
||||
z-index: 20;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.list-item:hover .edit-icon-btn { opacity: 1; transform: translateY(0); }
|
||||
.edit-icon-btn:hover { background: var(--color-primary, #8b5cf6); border-color: var(--color-primary, #8b5cf6); }
|
||||
|
||||
/* Badges adicionales */
|
||||
.unmatched-badge {
|
||||
position: absolute;
|
||||
top: 10px; left: 10px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(4px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
color: #fbbf24;
|
||||
display: flex; align-items: center; gap: 4px;
|
||||
}
|
||||
|
||||
.folder-path-tooltip {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-muted, #71717a);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
/* --- LIST VIEW MODE --- */
|
||||
.list-grid.list-view { grid-template-columns: 1fr; gap: 1rem; }
|
||||
|
||||
.list-grid.list-view .list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--color-bg-elevated, #18181b);
|
||||
padding: 1rem;
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.list-grid.list-view .list-item:hover {
|
||||
transform: scale(1.01);
|
||||
border-color: var(--color-primary, #8b5cf6);
|
||||
}
|
||||
|
||||
.list-grid.list-view .item-poster-link { width: 60px; aspect-ratio: 2/3; margin-right: 1.5rem; flex-shrink: 0; }
|
||||
.list-grid.list-view .item-content { padding-top: 0; flex-grow: 1; display: flex; align-items: center; justify-content: space-between; }
|
||||
.list-grid.list-view .item-title { font-size: 1.1rem; margin-bottom: 0.2rem; }
|
||||
.list-grid.list-view .edit-icon-btn { position: static; opacity: 1; transform: none; background: transparent; border: 1px solid rgba(255,255,255,0.1); }
|
||||
|
||||
/* =========================================
|
||||
6. CONFIGURACIÓN (Stream Style)
|
||||
========================================= */
|
||||
.stream-settings-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding-top: 1rem;
|
||||
color: #e5e5e5;
|
||||
}
|
||||
|
||||
.stream-section {
|
||||
margin-bottom: 2.5rem;
|
||||
padding-bottom: 2.5rem;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.stream-section.no-border { border-bottom: none; }
|
||||
|
||||
.section-label {
|
||||
font-size: 1.1rem;
|
||||
color: #a1a1aa;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Row de Perfil */
|
||||
.stream-profile-row { display: flex; gap: 3rem; align-items: flex-start; }
|
||||
|
||||
.stream-avatar-wrapper {
|
||||
position: relative;
|
||||
width: 120px; height: 120px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
background: #27272a;
|
||||
}
|
||||
|
||||
.stream-avatar-wrapper img { width: 100%; height: 100%; object-fit: cover; }
|
||||
|
||||
.avatar-overlay {
|
||||
position: absolute; inset: 0;
|
||||
background: rgba(0,0,0,0.6);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
opacity: 0; cursor: pointer; transition: 0.2s;
|
||||
font-weight: 600; text-transform: uppercase; font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.stream-avatar-wrapper:hover .avatar-overlay { opacity: 1; }
|
||||
|
||||
.stream-inputs-col { flex-grow: 1; display: flex; flex-direction: column; gap: 1.5rem; }
|
||||
|
||||
/* Formularios */
|
||||
.stream-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: end; }
|
||||
|
||||
.stream-input-group { display: flex; flex-direction: column; gap: 0.5rem; }
|
||||
.stream-input-group label { font-size: 0.85rem; color: #d4d4d8; font-weight: 500; }
|
||||
|
||||
.stream-input {
|
||||
background: #27272a;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
padding: 0.8rem 1rem;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.stream-input:focus { background: #3f3f46; outline: none; border-color: var(--color-primary, #8b5cf6); }
|
||||
|
||||
/* Botones Settings */
|
||||
.stream-actions { margin-top: 0.5rem; }
|
||||
|
||||
.btn-stream-primary {
|
||||
background: white; color: black;
|
||||
border: none; padding: 0.7rem 2rem;
|
||||
font-weight: 700; border-radius: 4px;
|
||||
cursor: pointer; transition: 0.2s;
|
||||
}
|
||||
.btn-stream-primary:hover { background: #d4d4d8; }
|
||||
|
||||
.btn-stream-ghost {
|
||||
background: transparent; border: 1px solid #52525b;
|
||||
color: white; padding: 0.75rem 1.5rem;
|
||||
border-radius: 4px; cursor: pointer;
|
||||
font-weight: 600; height: 46px;
|
||||
}
|
||||
.btn-stream-ghost:hover { border-color: white; background: rgba(255,255,255,0.05); }
|
||||
|
||||
/* Integraciones */
|
||||
.stream-integration-row {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
background: rgba(255,255,255,0.03);
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.int-info { display: flex; align-items: center; gap: 1rem; }
|
||||
.int-logo { width: 32px; height: 32px; }
|
||||
.int-text { display: flex; flex-direction: column; }
|
||||
.int-name { font-weight: 700; font-size: 1rem; }
|
||||
.int-status { font-size: 0.85rem; color: #a1a1aa; }
|
||||
|
||||
.btn-stream-outline {
|
||||
background: transparent; border: none;
|
||||
color: var(--color-primary, #8b5cf6);
|
||||
font-weight: 600; cursor: pointer; font-size: 0.95rem;
|
||||
}
|
||||
.btn-stream-outline:hover { text-decoration: underline; }
|
||||
.btn-danger-outline { color: #ef4444; border: 1px solid #ef4444; padding: 0.5rem 1rem; border-radius: 4px; }
|
||||
|
||||
.link-danger {
|
||||
background: transparent; border: none;
|
||||
color: #ef4444; font-size: 1rem;
|
||||
cursor: pointer; padding: 0;
|
||||
text-decoration: underline; opacity: 0.8;
|
||||
}
|
||||
.link-danger:hover { opacity: 1; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.stream-profile-row { flex-direction: column; align-items: center; text-align: center; gap: 2rem; }
|
||||
.stream-form-row { grid-template-columns: 1fr; }
|
||||
.btn-stream-ghost { width: 100%; }
|
||||
.stream-actions { display: flex; justify-content: center; }
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
7. UTILIDADES & ESTADOS (Loading/Console)
|
||||
========================================= */
|
||||
.loading-state {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
justify-content: center; padding: 4rem 0;
|
||||
color: var(--color-text-secondary, #a1a1aa);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 40px; height: 40px;
|
||||
border: 3px solid rgba(139, 92, 246, 0.1);
|
||||
border-top-color: var(--color-primary, #8b5cf6);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.spinner.small { width: 20px; height: 20px; border-width: 2px; margin-bottom: 0; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
.empty-state {
|
||||
text-align: center; padding: 5rem 2rem;
|
||||
background: rgba(255,255,255,0.02);
|
||||
border-radius: 20px;
|
||||
border: 2px dashed rgba(255,255,255,0.05);
|
||||
}
|
||||
.empty-state p { font-size: 1.2rem; color: var(--color-text-secondary, #a1a1aa); margin-bottom: 1.5rem; }
|
||||
|
||||
.btn-blur {
|
||||
background: rgba(255,255,255,0.1); backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
color: white; padding: 0.8rem 1.5rem;
|
||||
border-radius: 99px; text-decoration: none;
|
||||
display: inline-block; transition: 0.2s;
|
||||
}
|
||||
.btn-blur:hover { background: white; color: black; }
|
||||
|
||||
.console-output {
|
||||
background: #09090b; border: 1px solid #27272a;
|
||||
padding: 1.5rem; border-radius: 12px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.9rem; color: #4ade80;
|
||||
display: flex; align-items: center; gap: 1rem;
|
||||
box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.hidden { display: none !important; }
|
||||
|
||||
/* =========================================
|
||||
8. CUSTOM MODAL (Manual Match)
|
||||
========================================= */
|
||||
.custom-modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(8px);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.custom-modal-overlay.hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.custom-modal-content {
|
||||
background: var(--color-bg-elevated, #18181b);
|
||||
border: 1px solid var(--border-medium, rgba(255,255,255,0.1));
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
border-radius: 16px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
transform: scale(1);
|
||||
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.custom-modal-overlay.hidden .custom-modal-content {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-header h3 { margin: 0; font-size: 1.25rem; }
|
||||
|
||||
.close-modal-btn {
|
||||
background: transparent; border: none;
|
||||
color: var(--color-text-muted); font-size: 1.5rem;
|
||||
cursor: pointer; line-height: 1;
|
||||
}
|
||||
.close-modal-btn:hover { color: white; }
|
||||
|
||||
.modal-body { padding: 1.5rem; }
|
||||
|
||||
.modal-description {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.9rem; margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.path-display {
|
||||
background: rgba(0,0,0,0.3);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
padding: 0.8rem;
|
||||
border-radius: 6px;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
font-size: 0.85rem;
|
||||
color: #e4e4e7;
|
||||
word-break: break-all;
|
||||
margin-top: 0.5rem;
|
||||
max-height: 100px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.input-group { margin-bottom: 1.5rem; }
|
||||
.input-group label {
|
||||
display: block; font-size: 0.85rem;
|
||||
font-weight: 600; color: var(--color-text-secondary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 1rem 1.5rem;
|
||||
background: rgba(0,0,0,0.2);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
DOWNLOAD MANAGER (COMPACTO)
|
||||
========================================= */
|
||||
.downloads-monitor {
|
||||
background: var(--color-bg-elevated, #18181b);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
margin-bottom: 2rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.monitor-header {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
padding: 0.8rem 1.2rem; /* Header más delgado */
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.monitor-title h3 {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
color: white;
|
||||
display: flex; align-items: center; gap: 0.6rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.monitor-list {
|
||||
padding: 0;
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* --- ITEM COMPACTO --- */
|
||||
.dl-item.compact {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.6rem 1.2rem; /* Mucho menos padding vertical */
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
background: transparent;
|
||||
transition: background 0.2s;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.dl-item.compact:last-child { border-bottom: none; }
|
||||
.dl-item.compact:hover { background: rgba(255,255,255,0.02); }
|
||||
|
||||
/* Columna Izquierda: Nombres */
|
||||
.dl-left-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
flex: 1; /* Ocupa el espacio disponible */
|
||||
min-width: 0; /* Permite truncar texto */
|
||||
}
|
||||
|
||||
.dl-filename {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: #f4f4f5;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-family: 'Consolas', monospace;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.dl-folder {
|
||||
font-size: 0.75rem;
|
||||
color: #71717a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.dl-folder svg {
|
||||
color: var(--color-primary, #8b5cf6);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Columna Derecha: Progreso y Stats */
|
||||
.dl-right-col {
|
||||
width: 40%; /* Ancho fijo para la zona de progreso */
|
||||
max-width: 300px;
|
||||
min-width: 150px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.dl-meta-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.7rem;
|
||||
color: #a1a1aa;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dl-status-text.completed { color: #4ade80; }
|
||||
.dl-status-text.failed { color: #ef4444; }
|
||||
|
||||
/* Barra de progreso más fina */
|
||||
.dl-progress-track {
|
||||
width: 100%;
|
||||
height: 4px; /* Barra delgada */
|
||||
background: rgba(255,255,255,0.08);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dl-progress-fill {
|
||||
height: 100%;
|
||||
background: var(--color-primary, #8b5cf6);
|
||||
border-radius: 2px;
|
||||
transition: width 0.3s ease-out;
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
.dl-progress-fill.completed { background: #4ade80; }
|
||||
.dl-progress-fill.failed { background: #ef4444; }
|
||||
|
||||
/* Responsive para móviles */
|
||||
@media (max-width: 600px) {
|
||||
.dl-item.compact {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
.dl-right-col { width: 100%; max-width: none; }
|
||||
}
|
||||
@@ -1,853 +0,0 @@
|
||||
/* =========================================
|
||||
1. VARIABLES & RESET
|
||||
========================================= */
|
||||
:root {
|
||||
--brand-color: #8b5cf6;
|
||||
--brand-gradient: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
|
||||
--glass-bg: rgba(20, 20, 20, 0.6);
|
||||
--glass-border: rgba(255, 255, 255, 0.08);
|
||||
--glass-blur: blur(12px);
|
||||
--text-main: #ffffff;
|
||||
--text-muted: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
2. UTILITIES & ANIMATIONS
|
||||
========================================= */
|
||||
.spinner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.1);
|
||||
border-top-color: var(--brand-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
|
||||
@keyframes slideUp { from { transform: translateX(-50%) translateY(20px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }
|
||||
@keyframes slideDown { from { transform: translateX(-50%) translateY(-20px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }
|
||||
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
|
||||
@keyframes scaleIn { from { transform: translate(-50%, -50%) scale(0.8); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
|
||||
@keyframes toastSlideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
|
||||
@keyframes toastFadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); visibility: hidden; } }
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
|
||||
70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
|
||||
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
3. BUTTONS & INPUTS
|
||||
========================================= */
|
||||
.btn-icon-glass, .btn-icon-small, .modal-close {
|
||||
appearance: none;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
color: #eee;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.btn-icon-glass { width: 36px; height: 36px; backdrop-filter: blur(8px); }
|
||||
.btn-icon-small { padding: 6px; }
|
||||
.modal-close { width: 32px; height: 32px; position: absolute; top: 20px; right: 20px; background: rgba(255, 255, 255, 0.1); }
|
||||
|
||||
.btn-icon-glass:hover, .btn-icon-small:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
transform: translateY(-1px);
|
||||
color: white;
|
||||
}
|
||||
.modal-close:hover { background: rgba(255, 255, 255, 0.3); transform: rotate(90deg); }
|
||||
|
||||
.btn-glass-primary {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
background: rgba(139, 92, 246, 0.25);
|
||||
border: 1px solid rgba(139, 92, 246, 0.4);
|
||||
color: white;
|
||||
padding: 0 16px; height: 36px;
|
||||
border-radius: 10px; font-weight: 600; font-size: 0.9rem;
|
||||
cursor: pointer; backdrop-filter: blur(8px);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.btn-glass-primary:hover {
|
||||
background: rgba(139, 92, 246, 0.4);
|
||||
box-shadow: 0 0 15px rgba(139, 92, 246, 0.2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-confirm, .btn-primary {
|
||||
background: var(--brand-color);
|
||||
border: none; color: white;
|
||||
padding: 10px 24px; border-radius: 10px;
|
||||
font-weight: 700; cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex; align-items: center; justify-content: center; gap: 8px;
|
||||
}
|
||||
.btn-confirm:hover, .btn-primary:hover { background: #7c3aed; transform: translateY(-2px); }
|
||||
.btn-confirm:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
|
||||
.btn-confirm.full-width { width: 100%; }
|
||||
|
||||
.btn-cancel {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
padding: 10px 20px; border-radius: 8px;
|
||||
cursor: pointer; font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.btn-cancel:hover { background: rgba(255, 255, 255, 0.1); color: white; }
|
||||
|
||||
.btn-quick-action {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
height: 34px; padding: 0 12px;
|
||||
background: rgba(139, 92, 246, 0.15);
|
||||
border: 1px solid rgba(139, 92, 246, 0.3);
|
||||
border-radius: 8px; color: #d8b4fe;
|
||||
font-size: 0.85rem; font-weight: 600;
|
||||
cursor: pointer; transition: all 0.2s;
|
||||
}
|
||||
.btn-quick-action:hover {
|
||||
background: var(--brand-color); border-color: var(--brand-color);
|
||||
color: white; transform: translateY(-1px);
|
||||
}
|
||||
#copy-invite-btn { transition: all 0.3s ease; }
|
||||
#copy-invite-btn:hover { transform: scale(1.05); }
|
||||
#copy-invite-btn:active { transform: scale(0.95); }
|
||||
|
||||
/* Inputs */
|
||||
input[type="text"], input[type="password"], input[type="number"], .form-input {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: white; padding: 12px 16px;
|
||||
border-radius: 10px; font-size: 1rem;
|
||||
outline: none; transition: border-color 0.2s;
|
||||
}
|
||||
input:focus, .form-input:focus { border-color: var(--brand-color); background: rgba(255, 255, 255, 0.08); }
|
||||
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
|
||||
input[type=number] { -moz-appearance: textfield; }
|
||||
|
||||
/* Custom Select Wrappers */
|
||||
.quick-select-wrapper {
|
||||
position: relative; display: flex; align-items: center;
|
||||
height: 34px; background: rgba(255, 255, 255, 0.03);
|
||||
border-radius: 8px; transition: all 0.2s;
|
||||
padding: 0 8px; min-width: 110px;
|
||||
}
|
||||
.quick-select-wrapper:hover { background: rgba(255, 255, 255, 0.08); }
|
||||
.quick-select-wrapper svg { pointer-events: none; color: var(--text-muted); margin-right: 6px; flex-shrink: 0; }
|
||||
.select-arrow { font-size: 0.6rem; color: rgba(255, 255, 255, 0.4); pointer-events: none; margin-left: 4px; }
|
||||
|
||||
.quick-select, .glass-select-sm {
|
||||
appearance: none; -webkit-appearance: none;
|
||||
background: transparent; border: none;
|
||||
color: #fff; width: 100%; height: 100%;
|
||||
cursor: pointer; outline: none; position: relative; z-index: 2;
|
||||
}
|
||||
.glass-select-sm {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 0 32px 0 12px; height: 32px; line-height: 30px;
|
||||
border-radius: 8px; font-size: 0.85rem; font-weight: 600;
|
||||
max-width: 140px; white-space: nowrap; text-overflow: ellipsis;
|
||||
background-image: url("data:image/svg+xml,..."); /* SVG truncated for brevity */
|
||||
background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
|
||||
}
|
||||
.quick-select option, .glass-select-sm option { background: #1a1a1a; color: #eee; }
|
||||
|
||||
/* =========================================
|
||||
4. LAYOUT
|
||||
========================================= */
|
||||
.room-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 380px;
|
||||
height: 100vh; overflow: hidden;
|
||||
transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.room-layout.chat-hidden { grid-template-columns: 1fr 0px !important; }
|
||||
|
||||
/* Video Area */
|
||||
.video-area {
|
||||
display: flex; flex-direction: column;
|
||||
background: #000; flex: 1; min-height: 0;
|
||||
overflow: hidden; position: relative;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
5. HEADER
|
||||
========================================= */
|
||||
.room-header {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 0 24px; height: 64px;
|
||||
background: rgba(10, 10, 10, 0.85); backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--glass-border);
|
||||
z-index: 20; flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-left, .header-right { display: flex; align-items: center; gap: 16px; flex: 1; }
|
||||
.header-right { justify-content: flex-end; }
|
||||
.header-center { flex: 2; display: flex; justify-content: center; z-index: 50; }
|
||||
|
||||
.room-info { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
|
||||
#room-name { margin: 0; font-size: 1rem; font-weight: 700; color: white; letter-spacing: -0.01em; }
|
||||
.np-fade { display: flex; align-items: center; opacity: 0.7; font-size: 0.8rem; gap: 6px; margin-top: 2px; }
|
||||
.np-title { color: #ccc; font-weight: 500; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.np-sep { color: #555; }
|
||||
.np-badge { background: rgba(255, 255, 255, 0.1); color: #fff; padding: 1px 6px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; }
|
||||
|
||||
/* Header Controls */
|
||||
.quick-controls-group {
|
||||
display: flex; align-items: center; gap: 4px;
|
||||
background: rgba(15, 15, 15, 0.85);
|
||||
backdrop-filter: blur(16px);
|
||||
padding: 4px; height: 44px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.quick-controls-group:hover { border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }
|
||||
|
||||
.control-divider { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.1); margin: 0 4px; }
|
||||
|
||||
/* Sub/Dub Toggle */
|
||||
.sd-toggle.small {
|
||||
height: 34px; min-width: 86px;
|
||||
background: transparent; border: none;
|
||||
display: flex; position: relative; cursor: pointer; box-sizing: border-box;
|
||||
padding: 2px;
|
||||
}
|
||||
.sd-toggle.small .sd-bg {
|
||||
position: absolute; top: 2px; left: 2px;
|
||||
width: calc(50% - 2px); height: calc(100% - 4px);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: 6px;
|
||||
transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
}
|
||||
.sd-toggle[data-state="dub"] .sd-bg { transform: translateX(100%); }
|
||||
.sd-toggle.small .sd-option {
|
||||
flex: 1; z-index: 2;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 0.75rem; font-weight: 700;
|
||||
color: rgba(255,255,255,0.4);
|
||||
transition: color 0.2s; user-select: none;
|
||||
}
|
||||
.sd-toggle.small .sd-option.active { color: #fff; }
|
||||
|
||||
.viewers-pill {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
background: rgba(0,0,0,0.3); padding: 0 10px;
|
||||
border-radius: 20px; border: 1px solid rgba(255,255,255,0.05);
|
||||
font-size: 0.8rem; color: #aaa; height: 32px;
|
||||
}
|
||||
|
||||
#toggle-chat-btn { position: relative; }
|
||||
#toggle-chat-btn.has-unread::after {
|
||||
content: ''; position: absolute; top: 2px; right: 2px;
|
||||
width: 10px; height: 10px; background-color: #ef4444;
|
||||
border: 2px solid #1a1a1a; border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
6. PLAYER
|
||||
========================================= */
|
||||
.player-wrapper {
|
||||
display: flex !important; flex-direction: column; flex: 1;
|
||||
width: 100%; height: auto !important; min-height: 0;
|
||||
position: relative !important; z-index: 1 !important;
|
||||
background: transparent !important; overflow: hidden;
|
||||
}
|
||||
.player-container { width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; }
|
||||
.video-frame {
|
||||
flex: 1; min-height: 0; position: relative;
|
||||
background: #000; display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
#player { width: 100%; height: 100%; max-height: 100%; }
|
||||
#subtitles-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }
|
||||
|
||||
.custom-controls {
|
||||
position: absolute; bottom: 0; left: 0; width: 100%; z-index: 60;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
|
||||
padding: 20px 10px 10px;
|
||||
}
|
||||
.controls-left { display: flex; align-items: center; gap: 10px; }
|
||||
.time-display { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 0.9rem; color: #ddd; min-width: fit-content; }
|
||||
|
||||
/* Hidden Legacy Buttons */
|
||||
#download-btn, #manual-match-btn, #server-select, #extension-select, #sd-toggle, .side-nav-btn { display: none !important; }
|
||||
|
||||
/* Settings Panel */
|
||||
.settings-panel {
|
||||
position: absolute; bottom: 70px; right: 20px; z-index: 1000;
|
||||
max-height: 60vh; overflow-y: auto;
|
||||
background: rgba(15, 15, 15, 0.95);
|
||||
border: 1px solid var(--glass-border); border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Video Toasts */
|
||||
.video-toast-container {
|
||||
position: absolute; bottom: 100px; left: 20px; z-index: 80;
|
||||
display: flex; flex-direction: column; gap: 10px;
|
||||
pointer-events: none; max-width: 400px;
|
||||
}
|
||||
.video-toast {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
background: rgba(15, 15, 15, 0.85); backdrop-filter: blur(8px);
|
||||
padding: 8px 12px; border-radius: 8px;
|
||||
border-left: 3px solid var(--brand-color);
|
||||
color: white; font-size: 0.9rem;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
||||
animation: toastSlideIn 0.3s ease forwards, toastFadeOut 0.5s ease 4.5s forwards;
|
||||
pointer-events: auto; opacity: 0;
|
||||
}
|
||||
.toast-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
|
||||
.toast-content { display: flex; flex-direction: column; line-height: 1.2; }
|
||||
.toast-user { font-weight: 700; font-size: 0.8rem; color: #a78bfa; }
|
||||
.toast-msg { color: #eee; margin-top: 2px; }
|
||||
.video-toast.system-toast {
|
||||
border-left-color: #9ca3af; background: rgba(20, 20, 20, 0.7);
|
||||
justify-content: center; padding: 6px 12px; min-height: auto;
|
||||
}
|
||||
.video-toast.system-toast .toast-msg { font-size: 0.85rem; font-style: italic; color: rgba(255, 255, 255, 0.8); margin: 0; }
|
||||
|
||||
/* =========================================
|
||||
7. CHAT SIDEBAR
|
||||
========================================= */
|
||||
.chat-sidebar {
|
||||
display: flex; flex-direction: column; height: 100%;
|
||||
background: rgba(15, 15, 15, 0.95);
|
||||
border-left: 1px solid var(--glass-border); overflow: hidden;
|
||||
}
|
||||
.room-layout.chat-hidden .chat-sidebar { opacity: 0; pointer-events: none; border-left: none; }
|
||||
|
||||
.chat-header {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 16px 20px; border-bottom: 1px solid var(--glass-border);
|
||||
}
|
||||
.chat-header h3 { margin: 0; font-size: 1.1rem; font-weight: 700; color: white; }
|
||||
|
||||
.sidebar-tabs {
|
||||
display: flex; width: 100%; flex: 0 0 auto; height: 50px;
|
||||
border-bottom: 1px solid var(--glass-border); background: rgba(0,0,0,0.2);
|
||||
}
|
||||
.tab-btn {
|
||||
flex: 1; height: 100%; padding: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: transparent; border: none; border-bottom: 2px solid transparent;
|
||||
color: var(--text-muted); font-weight: 600; cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.tab-btn:hover { background: rgba(255,255,255,0.05); color: white; }
|
||||
.tab-btn.active { border-bottom-color: var(--brand-color); color: white; background: rgba(255,255,255,0.02); }
|
||||
|
||||
.tab-content { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
|
||||
|
||||
/* Users List */
|
||||
.users-list {
|
||||
padding: 12px; border-bottom: 1px solid var(--glass-border);
|
||||
max-height: 200px; overflow-y: auto; background: rgba(0,0,0,0.2);
|
||||
}
|
||||
.user-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; margin-bottom: 4px; }
|
||||
.user-item:hover { background: rgba(255, 255, 255, 0.05); }
|
||||
.user-avatar {
|
||||
width: 32px; height: 32px; border-radius: 50%;
|
||||
background: var(--brand-gradient);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-weight: 700; color: white; font-size: 0.8rem;
|
||||
}
|
||||
.user-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
|
||||
.user-name { flex: 1; font-size: 0.9rem; color: white; }
|
||||
.user-badge { font-size: 0.7rem; background: var(--brand-color); color: white; padding: 2px 8px; border-radius: 4px; font-weight: 600; }
|
||||
|
||||
/* Chat Messages */
|
||||
.chat-messages {
|
||||
flex: 1; overflow-y: auto; padding: 16px;
|
||||
display: flex; flex-direction: column; gap: 12px; min-height: 0;
|
||||
}
|
||||
.chat-message { display: flex; gap: 10px; }
|
||||
.chat-message.system { justify-content: center; margin: 8px 0; }
|
||||
.chat-message.system .message-content {
|
||||
background: rgba(255, 255, 255, 0.05); color: var(--text-muted);
|
||||
font-size: 0.8rem; text-align: center; padding: 4px 12px; border-radius: 12px;
|
||||
}
|
||||
.message-avatar {
|
||||
width: 36px; height: 36px; border-radius: 50%;
|
||||
background: var(--brand-gradient);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-weight: 700; color: white; font-size: 0.9rem; flex-shrink: 0;
|
||||
}
|
||||
.message-body { flex: 1; min-width: 0; }
|
||||
.message-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
|
||||
.message-username { font-weight: 600; color: white; font-size: 0.9rem; }
|
||||
.message-time { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); }
|
||||
.message-content { color: rgba(255, 255, 255, 0.9); font-size: 0.95rem; line-height: 1.4; word-wrap: break-word; }
|
||||
|
||||
.chat-input { display: flex; gap: 8px; padding: 16px; border-top: 1px solid var(--glass-border); }
|
||||
.chat-input input {
|
||||
flex: 1; background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid var(--glass-border); color: white;
|
||||
padding: 12px 16px; border-radius: 10px; outline: none;
|
||||
}
|
||||
.chat-input button {
|
||||
background: var(--brand-color); border: none; color: white;
|
||||
padding: 0 16px; border-radius: 10px; cursor: pointer; transition: background 0.2s;
|
||||
}
|
||||
.chat-input button:hover { background: #7c3aed; }
|
||||
|
||||
/* =========================================
|
||||
8. QUEUE TAB
|
||||
========================================= */
|
||||
.queue-list {
|
||||
flex: 1; overflow-y: auto; padding: 10px;
|
||||
display: flex; flex-direction: column; gap: 10px;
|
||||
}
|
||||
.queue-item {
|
||||
display: flex; gap: 10px; padding: 10px;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-radius: 8px; border: 1px solid transparent;
|
||||
position: relative; align-items: center; transition: transform 0.2s;
|
||||
}
|
||||
.queue-item:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.1); }
|
||||
.q-img { width: 50px; height: 70px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
|
||||
.q-info { flex: 1; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
|
||||
.q-title { font-weight: 700; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.q-meta { font-size: 0.8rem; color: #aaa; }
|
||||
.q-actions { display: flex; flex-direction: column; gap: 4px; opacity: 0.7; transition: opacity 0.2s; }
|
||||
.queue-item:hover .q-actions { opacity: 1; }
|
||||
|
||||
.q-btn {
|
||||
background: rgba(255,255,255,0.1); border: none; color: white;
|
||||
width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
|
||||
display: flex; align-items: center; justify-content: center; transition: all 0.2s;
|
||||
}
|
||||
.q-btn:hover { background: rgba(255,255,255,0.2); transform: scale(1.1); }
|
||||
.q-btn.play:hover { background: var(--brand-color); }
|
||||
.q-btn.remove:hover { background: #ff6b6b; }
|
||||
.badge { background: var(--brand-color); padding: 1px 6px; border-radius: 10px; font-size: 0.7rem; margin-left: 6px; }
|
||||
.queue-empty { text-align: center; color: #666; margin-top: 40px; font-style: italic; }
|
||||
|
||||
/* =========================================
|
||||
9. MODALS
|
||||
========================================= */
|
||||
.modal-overlay {
|
||||
position: fixed; inset: 0;
|
||||
background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(8px);
|
||||
display: none; align-items: center; justify-content: center;
|
||||
z-index: 10000; opacity: 0; transition: opacity 0.3s ease;
|
||||
}
|
||||
.modal-overlay.show { display: flex; opacity: 1; }
|
||||
|
||||
.modal-content {
|
||||
background: rgba(20, 20, 20, 0.95);
|
||||
border: 1px solid var(--glass-border); border-radius: 16px;
|
||||
padding: 32px; max-width: 500px; width: 90%;
|
||||
position: relative; transform: scale(0.9); transition: transform 0.3s ease;
|
||||
}
|
||||
.modal-overlay.show .modal-content { transform: scale(1); }
|
||||
.modal-title { margin: 0 0 24px 0; font-size: 1.5rem; font-weight: 800; color: white; }
|
||||
.modal-header-row { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
|
||||
.modal-header-row .modal-title { margin: 0; }
|
||||
|
||||
.form-group { margin-bottom: 20px; }
|
||||
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: white; }
|
||||
.form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
|
||||
|
||||
/* Join Info */
|
||||
.join-host-info { display: flex; flex-direction: column; align-items: center; margin-bottom: 24px; animation: fadeIn 0.5s ease; }
|
||||
.join-avatar-container {
|
||||
width: 80px; height: 80px; border-radius: 50%; padding: 3px;
|
||||
background: var(--brand-gradient); margin-bottom: 12px;
|
||||
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
|
||||
}
|
||||
.join-avatar-container img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #1a1a1a; background: #2a2a2a; }
|
||||
.join-text { font-size: 1.1rem; color: white; font-weight: 500; text-align: center; margin: 0; }
|
||||
.join-text span { font-weight: 700; color: #a78bfa; }
|
||||
|
||||
/* Search Content */
|
||||
.anime-search-content { max-width: 800px; max-height: 85vh; display: flex; flex-direction: column; }
|
||||
.search-bar { display: flex; gap: 12px; margin-bottom: 20px; }
|
||||
.search-bar button {
|
||||
background: var(--brand-color); border: none; color: white;
|
||||
padding: 12px 24px; border-radius: 10px; font-weight: 700; cursor: pointer;
|
||||
}
|
||||
.anime-results {
|
||||
flex: 1; overflow-y: auto; display: flex; flex-direction: column;
|
||||
gap: 12px; min-height: 0; max-height: 60vh; padding-right: 8px;
|
||||
}
|
||||
.anime-result-item, .search-item {
|
||||
display: flex; gap: 16px; padding: 12px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
|
||||
cursor: pointer; text-decoration: none; color: inherit; transition: all 0.2s;
|
||||
}
|
||||
.anime-result-item:hover {
|
||||
background: rgba(255, 255, 255, 0.08); border-color: var(--brand-color);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
.search-poster { width: 60px; height: 85px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
|
||||
.search-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
|
||||
.search-title { font-weight: 700; color: white; margin-bottom: 4px; font-size: 1rem; }
|
||||
.search-meta { font-size: 0.85rem; color: var(--text-muted); }
|
||||
|
||||
/* Config Layout */
|
||||
.config-layout { display: flex; gap: 24px; margin-top: 20px; }
|
||||
.config-sidebar { width: 140px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
|
||||
.config-cover {
|
||||
width: 100%; aspect-ratio: 2/3; object-fit: cover;
|
||||
border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.4);
|
||||
border: 1px solid var(--glass-border);
|
||||
}
|
||||
.config-main { flex: 1; display: flex; flex-direction: column; gap: 20px; }
|
||||
.cfg-section-title {
|
||||
font-size: 0.85rem; text-transform: uppercase;
|
||||
letter-spacing: 1px; color: rgba(255,255,255,0.5);
|
||||
margin-bottom: 8px; font-weight: 700;
|
||||
}
|
||||
|
||||
/* Chips & Toggles in Modal */
|
||||
.chips-grid { display: flex; flex-wrap: wrap; gap: 10px; }
|
||||
.chip {
|
||||
padding: 8px 16px; background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px;
|
||||
color: #ccc; font-size: 0.9rem; cursor: pointer;
|
||||
transition: all 0.2s; user-select: none;
|
||||
}
|
||||
.chip:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); }
|
||||
.chip.active {
|
||||
background: var(--brand-color); border-color: var(--brand-color);
|
||||
color: white; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
.cat-toggle { display: flex; background: rgba(0,0,0,0.3); padding: 4px; border-radius: 10px; width: fit-content; }
|
||||
.cat-opt {
|
||||
padding: 6px 16px; border-radius: 8px; font-size: 0.85rem; color: #888;
|
||||
cursor: pointer; transition: all 0.2s; font-weight: 600;
|
||||
}
|
||||
.cat-opt.active { background: rgba(255,255,255,0.15); color: white; }
|
||||
.cat-opt.disabled { opacity: 0.3; pointer-events: none; text-decoration: line-through; }
|
||||
|
||||
/* Episodes Grid */
|
||||
.episodes-grid-container {
|
||||
display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
|
||||
gap: 8px; max-height: 280px; overflow-y: auto; padding: 10px;
|
||||
background: rgba(0, 0, 0, 0.2); border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
.episodes-grid-container::-webkit-scrollbar { width: 4px; }
|
||||
.episodes-grid-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }
|
||||
|
||||
.ep-grid-btn {
|
||||
background: rgba(255,255,255,0.03); border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #ccc; padding: 8px 0; border-radius: 6px; text-align: center;
|
||||
font-size: 0.9rem; font-weight: 600; cursor: pointer;
|
||||
transition: all 0.2s; user-select: none;
|
||||
}
|
||||
.ep-grid-btn:hover { background: white; color: black; transform: translateY(-2px); }
|
||||
.ep-grid-btn.selected, .ep-grid-btn.active {
|
||||
background: var(--brand-color); color: white;
|
||||
border-color: var(--brand-color); box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
.btn-text-tiny {
|
||||
background: transparent; border: none; color: var(--brand-color);
|
||||
font-size: 0.75rem; font-weight: 700; cursor: pointer; padding: 2px 6px;
|
||||
}
|
||||
.btn-text-tiny:hover { text-decoration: underline; }
|
||||
|
||||
/* Manual Control */
|
||||
.ep-control {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 12px; padding: 4px; width: 100%; height: 48px;
|
||||
margin-top: 8px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
|
||||
}
|
||||
.ep-btn {
|
||||
width: 40px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
|
||||
background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255,255,255,0.05);
|
||||
color: white; border-radius: 8px; cursor: pointer; font-size: 1.2rem; transition: all 0.2s ease;
|
||||
}
|
||||
.ep-btn:hover { background: var(--brand-color); border-color: var(--brand-color); transform: translateY(-1px); }
|
||||
.ep-btn:active { transform: translateY(1px); }
|
||||
.ep-input {
|
||||
flex: 1; min-width: 0; background: transparent; border: none;
|
||||
color: white; text-align: center; font-size: 1.2rem; font-weight: 800;
|
||||
outline: none; font-family: monospace;
|
||||
}
|
||||
.grid-loader { width: 100%; padding: 20px; text-align: center; color: var(--text-muted); font-size: 0.9rem; }
|
||||
|
||||
/* Modal Pagination */
|
||||
.modal-pagination {
|
||||
display: flex; justify-content: center; align-items: center; gap: 15px;
|
||||
margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
.modal-page-btn {
|
||||
background: transparent; border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: white; width: 30px; height: 30px; border-radius: 6px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
cursor: pointer; transition: all 0.2s;
|
||||
}
|
||||
.modal-page-btn:hover:not(:disabled) { background: white; color: black; }
|
||||
.modal-page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
|
||||
.modal-page-info { font-size: 0.85rem; color: #888; font-weight: 700; }
|
||||
|
||||
/* =========================================
|
||||
10. MEDIA QUERIES (Combined)
|
||||
========================================= */
|
||||
@media (max-width: 1200px) {
|
||||
.room-layout { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
|
||||
.room-layout.chat-hidden { grid-template-rows: 1fr 0px; }
|
||||
.chat-sidebar {
|
||||
height: 350px; border-left: none; border-top: 1px solid var(--glass-border);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.config-layout { flex-direction: column; }
|
||||
.config-sidebar { width: 100%; flex-direction: row; }
|
||||
.config-cover { width: 80px; }
|
||||
.ep-control { width: auto; flex: 1; }
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
PERMISSIONS & MODERATION
|
||||
========================================= */
|
||||
|
||||
.permissions-content {
|
||||
max-width: 700px;
|
||||
width: 90%;
|
||||
max-height: 85vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.permissions-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.permission-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.permission-card:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.user-info-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.user-avatar-small {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: var(--brand-gradient);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
font-size: 0.9rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-avatar-small img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.user-name-text {
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.guest-badge {
|
||||
font-size: 0.7rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #aaa;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.permissions-toggles {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.perm-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.perm-toggle input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
accent-color: var(--brand-color);
|
||||
}
|
||||
|
||||
.perm-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.9rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.perm-toggle:hover .perm-label {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.perm-label svg {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.ban-btn {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
color: #ef4444;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ban-btn:hover {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
border-color: #ef4444;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.banned-ips-section {
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 0.9rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin-bottom: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.banned-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.banned-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 14px;
|
||||
background: rgba(239, 68, 68, 0.05);
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.banned-ip {
|
||||
font-family: monospace;
|
||||
color: #ef4444;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.unban-btn {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(74, 222, 128, 0.3);
|
||||
color: #4ade80;
|
||||
padding: 4px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.unban-btn:hover {
|
||||
background: rgba(74, 222, 128, 0.1);
|
||||
border-color: #4ade80;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.permission-card {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.user-info-section {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.ban-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@@ -1,864 +0,0 @@
|
||||
.page-wrapper {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.background-gradient {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(
|
||||
ellipse at top,
|
||||
rgba(139, 92, 246, 0.15) 0%,
|
||||
transparent 60%
|
||||
),
|
||||
radial-gradient(
|
||||
ellipse at bottom right,
|
||||
rgba(59, 130, 246, 0.1) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
z-index: 0;
|
||||
animation: gradientShift 10s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes gradientShift {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.content-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
max-width: 1400px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header-section {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
animation: fadeInDown 0.6s ease;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 900;
|
||||
margin-bottom: 1rem;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #a78bfa 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.2rem;
|
||||
color: var(--color-text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.users-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, 260px);
|
||||
gap: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
animation: fadeInUp 0.8s ease;
|
||||
justify-content: center;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
position: relative;
|
||||
aspect-ratio: 1;
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
background: var(--color-bg-elevated);
|
||||
border: 2px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.user-card:hover {
|
||||
transform: translateY(-12px) scale(1.02);
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 20px 40px rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
.user-card.has-password::after {
|
||||
content: "🔒";
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
padding: 0.4rem 0.7rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.9rem;
|
||||
z-index: 10;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #1e1e22 0%, #2a2a2f 100%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.user-avatar-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(139, 92, 246, 0.1) 0%,
|
||||
rgba(59, 130, 246, 0.05) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.user-avatar-placeholder svg {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 1rem 1.5rem;
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
rgba(0, 0, 0, 0.95) 0%,
|
||||
rgba(0, 0, 0, 0.7) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.user-card:hover .user-info {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.25rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.user-status {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.user-config-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: none;
|
||||
color: white;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity 0.3s,
|
||||
background 0.2s;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.user-card:hover .user-config-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.user-config-btn:hover {
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
.btn-add-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin: 0 auto 2rem;
|
||||
padding: 1.2rem 2rem;
|
||||
background: rgba(139, 92, 246, 0.1);
|
||||
border: 2px dashed var(--color-primary);
|
||||
border-radius: 999px;
|
||||
color: var(--color-primary);
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-add-user:hover {
|
||||
background: rgba(139, 92, 246, 0.2);
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 10px 30px var(--color-primary-glow);
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
backdrop-filter: blur(8px);
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
background: var(--color-bg-elevated);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 2rem;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
animation: scaleIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
||||
.modal-large {
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.form-group input[type="text"],
|
||||
.form-group input[type="password"] {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--radius-md);
|
||||
color: white;
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.form-group input[type="text"]:focus,
|
||||
.form-group input[type="password"]:focus {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 15px var(--color-primary-glow);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.password-toggle-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.password-toggle-btn {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.password-toggle-btn:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.optional-label {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-muted);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.avatar-upload-area {
|
||||
border: 2px dashed rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.avatar-upload-area:hover {
|
||||
border-color: var(--color-primary);
|
||||
background: rgba(139, 92, 246, 0.05);
|
||||
}
|
||||
|
||||
.avatar-upload-area.dragover {
|
||||
border-color: var(--color-primary);
|
||||
background: rgba(139, 92, 246, 0.1);
|
||||
}
|
||||
|
||||
.avatar-preview {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: 0 auto 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar-preview img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-preview-placeholder {
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.avatar-upload-text {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.avatar-upload-hint {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-secondary);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-secondary {
|
||||
flex: 1;
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 999px;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #7c3aed;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: var(--color-text-secondary);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.password-modal-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.password-info {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #3b82f6;
|
||||
font-size: 0.9rem;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.password-info svg {
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
.manage-actions-modal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.manage-actions-modal .btn-action {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 700;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn-action.edit {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
color: #3b82f6;
|
||||
border-color: rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.btn-action.edit:hover {
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
.btn-action.password {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
color: #f59e0b;
|
||||
border-color: rgba(245, 158, 11, 0.3);
|
||||
}
|
||||
|
||||
.btn-action.password:hover {
|
||||
background: rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
|
||||
.btn-action.delete {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: #ef4444;
|
||||
border-color: rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.btn-action.delete:hover {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.btn-action.anilist {
|
||||
background: rgba(2, 169, 255, 0.1);
|
||||
color: #02a9ff;
|
||||
border-color: rgba(2, 169, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-action.anilist:hover {
|
||||
background: rgba(2, 169, 255, 0.2);
|
||||
}
|
||||
|
||||
.btn-action.cancel {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.btn-action.cancel:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.anilist-status {
|
||||
padding: 1.5rem;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.anilist-connected {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.anilist-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: var(--radius-md);
|
||||
background: linear-gradient(135deg, #02a9ff 0%, #0170d9 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 900;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.anilist-info h3 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.anilist-info p {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.btn-disconnect {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
color: #ef4444;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-disconnect:hover {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.btn-connect {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
background: linear-gradient(135deg, #02a9ff 0%, #0170d9 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-connect:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 10px 30px rgba(2, 169, 255, 0.3);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
animation: fadeInUp 0.8s ease;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto 1.5rem;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 1.1rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
#userToastContainer {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.wb-toast {
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
transition: all 0.5s ease-out;
|
||||
pointer-events: all;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.wb-toast.show {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.wb-toast.success {
|
||||
background: #22c55e;
|
||||
border: 1px solid rgba(34, 197, 94, 0.4);
|
||||
}
|
||||
|
||||
.wb-toast.error {
|
||||
background: #ef4444;
|
||||
border: 1px solid rgba(239, 68, 68, 0.4);
|
||||
}
|
||||
|
||||
.wb-toast.info {
|
||||
background: #3b82f6;
|
||||
border: 1px solid rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-wrapper {
|
||||
padding: 1rem;
|
||||
|
||||
align-items: flex-start;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.header-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2.2rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.users-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.75rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 800;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.user-config-btn {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.user-config-btn svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.btn-add-user {
|
||||
width: 100%;
|
||||
padding: 1.25rem;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
.users-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: none) {
|
||||
.user-info {
|
||||
transform: translateY(0);
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
rgba(0, 0, 0, 0.95) 0%,
|
||||
rgba(0, 0, 0, 0.6) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.user-card:hover {
|
||||
transform: none;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.user-card:active {
|
||||
transform: scale(0.97);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.modal {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-radius: 20px 20px 0 0;
|
||||
max-height: 85vh;
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-group input[type="text"],
|
||||
.form-group input[type="password"] {
|
||||
padding: 1.2rem;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-secondary {
|
||||
padding: 1.2rem;
|
||||
}
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WaifuBoard - Gallery</title>
|
||||
<link rel="stylesheet" href="/views/css/globals.css">
|
||||
<link rel="stylesheet" href="/views/css/components/navbar.css">
|
||||
<link rel="stylesheet" href="/views/css/gallery/gallery.css">
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
|
||||
<script src="/src/scripts/room-modal.js"></script>
|
||||
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js" async></script>
|
||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
||||
<script src="/src/scripts/titlebar.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="titlebar"> <div class="title-left">
|
||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
||||
<span class="app-title">WaifuBoard</span>
|
||||
</div>
|
||||
<div class="title-right">
|
||||
<button class="min">—</button>
|
||||
<button class="max">🗖</button>
|
||||
<button class="close">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="gallery-main">
|
||||
<div class="gallery-hero-placeholder"></div>
|
||||
|
||||
<section class="section">
|
||||
<div class="gallery-controls">
|
||||
<select id="provider-selector" class="provider-selector"></select>
|
||||
</div>
|
||||
|
||||
<div class="gallery-results grid" id="gallery-results">
|
||||
<div class="gallery-card skeleton grid-item"><div class="poster-skeleton"></div></div>
|
||||
<div class="gallery-card skeleton grid-item"><div class="poster-skeleton"></div></div>
|
||||
<div class="gallery-card skeleton grid-item"><div class="poster-skeleton"></div></div>
|
||||
<div class="gallery-card skeleton grid-item"><div class="poster-skeleton"></div></div>
|
||||
<div class="gallery-card skeleton grid-item"><div class="poster-skeleton"></div></div>
|
||||
<div class="gallery-card skeleton grid-item"><div class="poster-skeleton"></div></div>
|
||||
<div class="gallery-card skeleton grid-item"><div class="poster-skeleton"></div></div>
|
||||
<div class="gallery-card skeleton grid-item"><div class="poster-skeleton"></div></div>
|
||||
</div>
|
||||
|
||||
<div class="load-more-container">
|
||||
<button id="load-more-btn" class="btn-primary" style="display:none;">Load More</button>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="updateToast" class="hidden">
|
||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
||||
|
||||
<a
|
||||
id="downloadButton"
|
||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
||||
target="_blank"
|
||||
>
|
||||
Click To Download
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script src="/src/scripts/updateNotifier.js"></script>
|
||||
<script src="/src/scripts/room-modal.js"></script>
|
||||
<script src="/src/scripts/gallery/gallery.js"></script>
|
||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
||||
<script src="/src/scripts/auth-guard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,65 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title id="page-title">WaifuBoard - Gallery Item</title>
|
||||
<link rel="stylesheet" href="/views/css/components/navbar.css">
|
||||
<link rel="stylesheet" href="/views/css/globals.css">
|
||||
<link rel="stylesheet" href="/views/css/gallery/gallery.css">
|
||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
||||
<link rel="stylesheet" href="/views/css/gallery/image.css">
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
|
||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
||||
<script src="/src/scripts/room-modal.js"></script>
|
||||
<script src="/src/scripts/titlebar.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="titlebar"> <div class="title-left">
|
||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
||||
<span class="app-title">WaifuBoard</span>
|
||||
</div>
|
||||
<div class="title-right">
|
||||
<button class="min">—</button>
|
||||
<button class="max">🗖</button>
|
||||
<button class="close">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="/gallery" class="back-btn">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
|
||||
Back to Gallery
|
||||
</a>
|
||||
|
||||
<main class="gallery-item-main">
|
||||
<div class="gallery-hero-placeholder"></div>
|
||||
|
||||
<section class="section">
|
||||
<div id="item-main-content" class="item-content"></div>
|
||||
|
||||
<div id="similar-section" class="similar-section">
|
||||
<p style="text-align:center;color:var(--color-text-secondary);opacity:0.7;padding:3rem 0;">Loading similar images...</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="updateToast" class="hidden">
|
||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
||||
|
||||
<a
|
||||
id="downloadButton"
|
||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
||||
target="_blank"
|
||||
>
|
||||
Click To Download
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script src="/src/scripts/updateNotifier.js"></script>
|
||||
<script src="/src/scripts/room-modal.js"></script>
|
||||
<script src="/src/scripts/gallery/image.js"></script>
|
||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
||||
<script src="/src/scripts/auth-guard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,78 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WaifuBoard - Marketplace</title>
|
||||
<link rel="stylesheet" href="/views/css/globals.css">
|
||||
<link rel="stylesheet" href="/views/css/components/navbar.css">
|
||||
<link rel="stylesheet" href="/views/css/marketplace.css">
|
||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
||||
<link rel="stylesheet" href="/views/css/components/create-room.css"/>
|
||||
<script src="/src/scripts/titlebar.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="titlebar">
|
||||
<div class="title-left">
|
||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
||||
<span class="app-title">WaifuBoard</span>
|
||||
</div>
|
||||
<div class="title-right">
|
||||
<button class="min">—</button>
|
||||
<button class="max">🗖</button>
|
||||
<button class="close">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-spacer"></div>
|
||||
|
||||
<main>
|
||||
<section class="section">
|
||||
<header class="section-header">
|
||||
<div class="tabs-container">
|
||||
<button class="tab-button active" data-tab="marketplace">Marketplace</button>
|
||||
<button class="tab-button" data-tab="installed">My Extensions</button>
|
||||
</div>
|
||||
|
||||
<div class="filter-controls">
|
||||
<button id="btn-update-all" class="btn-blur hidden" style="margin-right: 10px; width: auto; padding: 0 15px;">
|
||||
Update All
|
||||
</button>
|
||||
<label for="extension-filter" class="filter-label">Filter by Type:</label>
|
||||
<select id="extension-filter" class="filter-select">
|
||||
<option value="All">All Categories</option>
|
||||
<option value="image-board">Image Boards</option>
|
||||
<option value="anime-board">Anime Boards</option>
|
||||
<option value="book-board">Book Boards</option>
|
||||
<option value="Local">Local/Manual</option>
|
||||
</select>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="marketplace-content">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="customModal" class="modal-overlay hidden">
|
||||
<div class="modal-content">
|
||||
<h3 id="modalTitle"></h3>
|
||||
<p id="modalMessage"></p>
|
||||
<div class="modal-actions">
|
||||
<button id="modalConfirmButton" class="modal-button btn-uninstall hidden">Confirm</button>
|
||||
<button id="modalCloseButton" class="modal-button btn-install">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="/src/scripts/utils/notification-utils.js"></script>
|
||||
<link rel="stylesheet" href="/views/css/components/create-room.css"/>
|
||||
<script src="/src/scripts/updateNotifier.js"></script>
|
||||
<script src="/src/scripts/marketplace.js"></script>
|
||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
||||
<script src="/src/scripts/auth-guard.js"></script>
|
||||
<script src="/src/scripts/settings.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,266 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||
<title>Profile - WaifuBoard</title>
|
||||
<link rel="stylesheet" href="/views/css/globals.css">
|
||||
<link rel="stylesheet" href="/views/css/components/navbar.css">
|
||||
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
|
||||
<link rel="stylesheet" href="/views/css/profile.css">
|
||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
||||
<link rel="stylesheet" href="/views/css/components/create-room.css"/>
|
||||
<script src="/src/scripts/titlebar.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="titlebar">
|
||||
<div class="title-left">
|
||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
||||
<span class="app-title">WaifuBoard</span>
|
||||
</div>
|
||||
<div class="title-right">
|
||||
<button class="min">−</button>
|
||||
<button class="max">🗖</button>
|
||||
<button class="close">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<section class="profile-header">
|
||||
<div class="profile-banner"></div> <div class="profile-body">
|
||||
<div class="profile-avatar-wrapper">
|
||||
<img id="user-avatar" src="/public/assets/placeholder.svg" alt="Profile" class="avatar-img">
|
||||
</div>
|
||||
|
||||
<div class="profile-details">
|
||||
<div class="profile-text">
|
||||
<div class="username-wrapper">
|
||||
<h1 id="user-username">Loading...</h1>
|
||||
<a id="header-anilist-link" href="#" target="_blank" class="header-anilist-badge" style="display: none;">
|
||||
<img src="https://anilist.co/img/icons/android-chrome-512x512.png" alt="AniList">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="profile-stats-grid">
|
||||
<div class="stat-card">
|
||||
<span class="stat-value" id="total-stat">0</span>
|
||||
<span class="stat-label">Total Entries</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-value" id="anime-stat">-</span>
|
||||
<span class="stat-label">Anime</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-value" id="manga-stat">-</span>
|
||||
<span class="stat-label">Manga</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hub-navigation-modern">
|
||||
<button class="nav-pill active" data-target="tracking">Tracking List</button>
|
||||
<button class="nav-pill" data-target="local">Local Library</button>
|
||||
<button class="nav-pill" data-target="settings">Settings</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="content-container">
|
||||
|
||||
<div id="section-tracking" class="tab-section active">
|
||||
<div class="toolbar">
|
||||
<div class="search-box">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
<input type="text" id="tracking-search-input" class="search-input" placeholder="Search your list...">
|
||||
|
||||
</div>
|
||||
<div class="filters-inline">
|
||||
<select id="status-filter" class="minimal-select"><option value="all">Status: All</option><option value="CURRENT">Watching</option><option value="COMPLETED">Completed</option><option value="PLANNING">Planning</option><option value="PAUSED">Paused</option><option value="DROPPED">Dropped</option></select>
|
||||
<select id="type-filter" class="minimal-select"><option value="all">Type: All</option><option value="ANIME">Anime</option><option value="MANGA">Manga</option><option value="NOVEL">Novel</option></select>
|
||||
<select id="sort-filter" class="minimal-select"><option value="updated">Latest</option><option value="score">Score</option><option value="title">A-Z</option></select>
|
||||
<div class="view-toggle">
|
||||
<button class="view-btn active" data-view="grid">⊞</button>
|
||||
<button class="view-btn" data-view="list">☰</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="loading-state" class="loading-state"><div class="spinner"></div></div>
|
||||
<div id="empty-state" class="empty-state" style="display: none;">
|
||||
<p>No content found</p>
|
||||
<a href="/anime" class="btn-blur">Discover Content</a>
|
||||
</div>
|
||||
<div id="list-container" class="list-grid"></div>
|
||||
</div>
|
||||
|
||||
<div id="section-local" class="tab-section">
|
||||
|
||||
<div id="downloads-monitor" class="downloads-monitor">
|
||||
<div class="monitor-header">
|
||||
<div class="monitor-title">
|
||||
<span class="pulse-dot"></span>
|
||||
<h3>Download Manager</h3>
|
||||
</div>
|
||||
<div class="monitor-stats">
|
||||
<span id="dl-stat-active">0 Active</span>
|
||||
<span class="divider">•</span>
|
||||
<span id="dl-stat-failed">0 Failed</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="downloads-list-container" class="monitor-list">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toolbar local-toolbar">
|
||||
<div class="search-box">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
<input type="text" id="local-search-input" class="search-input" placeholder="Filter local files...">
|
||||
</div>
|
||||
|
||||
<div class="local-type-switcher">
|
||||
<button class="type-pill-btn active" onclick="switchLocalType('anime', this)">Anime</button>
|
||||
<button class="type-pill-btn" onclick="switchLocalType('manga', this)">Manga</button>
|
||||
<button class="type-pill-btn" onclick="switchLocalType('novels', this)">Novels</button>
|
||||
</div>
|
||||
|
||||
<div class="actions-group">
|
||||
<button id="scan-incremental-btn" class="action-icon-btn" title="Update Library (Fast)">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
|
||||
</button>
|
||||
<button id="scan-full-btn" class="action-icon-btn danger" title="Full Rescan (Slow)">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="console-output" id="scan-console" style="display: none;">
|
||||
<div class="spinner small"></div>
|
||||
<span id="scan-status-text">Scanning folders...</span>
|
||||
</div>
|
||||
|
||||
<div id="local-list-container" class="list-grid"></div>
|
||||
|
||||
<div id="local-loading" class="loading-state" style="display: none;">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="section-settings" class="tab-section">
|
||||
<div class="stream-settings-container">
|
||||
|
||||
<div class="stream-section">
|
||||
<h3 class="section-label">Profile</h3>
|
||||
<form id="profile-form" class="stream-profile-row">
|
||||
|
||||
<div class="stream-avatar-wrapper">
|
||||
<img id="setting-avatar-preview" src="/public/assets/placeholder.svg" alt="Avatar">
|
||||
<div class="avatar-overlay" onclick="document.getElementById('avatar-upload').click()">
|
||||
<span>Edit</span>
|
||||
</div>
|
||||
<input type="file" id="avatar-upload" accept="image/*" style="display: none;">
|
||||
</div>
|
||||
|
||||
<div class="stream-inputs-col">
|
||||
<div class="stream-input-group">
|
||||
<label>Username</label>
|
||||
<input type="text" id="setting-username" class="stream-input">
|
||||
</div>
|
||||
|
||||
<div class="stream-actions">
|
||||
<button type="submit" class="btn-stream-primary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="stream-section">
|
||||
<h3 class="section-label">Change password</h3>
|
||||
<form id="password-form" class="stream-form-row">
|
||||
<div class="stream-input-group">
|
||||
<label>Current password</label>
|
||||
<input type="password" id="current-password" class="stream-input" placeholder="••••••">
|
||||
</div>
|
||||
<div class="stream-input-group">
|
||||
<label>New password</label>
|
||||
<input type="password" id="new-password" class="stream-input" placeholder="••••••">
|
||||
</div>
|
||||
<div class="stream-actions-inline">
|
||||
<button type="submit" class="btn-stream-ghost">Update password</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="stream-section">
|
||||
<h3 class="section-label">Connections</h3>
|
||||
<div class="stream-integration-row">
|
||||
<div class="int-info">
|
||||
<img src="https://anilist.co/img/icons/android-chrome-512x512.png" alt="AL" class="int-logo">
|
||||
<div class="int-text">
|
||||
<span class="int-name">AniList</span>
|
||||
<span id="anilist-status" class="int-status">Checking...</span>
|
||||
</div>
|
||||
</div>
|
||||
<button id="anilist-action-btn" class="btn-stream-outline">Manage</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="manual-match-modal" class="custom-modal-overlay hidden">
|
||||
<div class="custom-modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>Fix Match</h3>
|
||||
<button class="close-modal-btn" onclick="DashboardApp.Library.closeManualMatch()">×</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<p class="modal-description">Introduce el ID de AniList correcto para asociar este archivo local.</p>
|
||||
|
||||
<div class="input-group">
|
||||
<label>File Path / Folder Name</label>
|
||||
<div id="manual-match-path" class="path-display"></div>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label>AniList ID</label>
|
||||
<input type="number" id="manual-match-id" class="stream-input" placeholder="Ej: 21 (One Piece)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="btn-secondary" onclick="DashboardApp.Library.closeManualMatch()">Cancel</button>
|
||||
<button class="btn-primary" onclick="DashboardApp.Library.submitManualMatch()">Confirm Match</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="updateToast" class="hidden">
|
||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
||||
<a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">Download</a>
|
||||
</div>
|
||||
<div id="anilist-connect-modal" class="custom-modal-overlay hidden">
|
||||
<div class="custom-modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>AniList Integration</h3>
|
||||
<button class="close-modal-btn" onclick="DashboardApp.User.closeAniListModal()">×</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body" id="anilist-modal-body">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/src/scripts/updateNotifier.js"></script>
|
||||
<script src="/src/scripts/room-modal.js"></script>
|
||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
||||
<script src="/src/scripts/auth-guard.js"></script>
|
||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
||||
<script src="/src/scripts/utils/notification-utils.js"></script>
|
||||
<script src="/src/scripts/utils/list-modal-manager.js"></script>
|
||||
<script src="/src/scripts/profile.js"></script>
|
||||
<script src="/src/scripts/settings.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,300 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon" />
|
||||
<title>Watch Party - WaifuBoard</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
||||
<script type="module">
|
||||
import JASSUB from 'https://cdn.jsdelivr.net/npm/jassub@1.8.8/dist/jassub.es.js';
|
||||
window.JASSUB = JASSUB;
|
||||
</script>
|
||||
<link rel="stylesheet" href="/views/css/globals.css" />
|
||||
<link rel="stylesheet" href="/views/css/anime/player.css" />
|
||||
<link rel="stylesheet" href="/views/css/room.css" />
|
||||
<link rel="stylesheet" href="/views/css/components/create-room.css"/>
|
||||
<link rel="stylesheet" href="/views/css/components/titlebar.css"/>
|
||||
<script src="/src/scripts/titlebar.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="titlebar">
|
||||
<div class="title-left">
|
||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
||||
<span class="app-title">WaifuBoard</span>
|
||||
</div>
|
||||
<div class="title-right">
|
||||
<button class="min">−</button>
|
||||
<button class="max">🗖</button>
|
||||
<button class="close">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="room-view">
|
||||
<div class="room-layout" id="room-layout">
|
||||
<div class="video-area">
|
||||
<div class="room-header">
|
||||
<div class="header-left">
|
||||
<div class="room-info">
|
||||
<h2 id="room-name">Loading...</h2>
|
||||
<div id="now-playing-info" class="np-fade">
|
||||
<span id="np-title" class="np-title">Waiting selection...</span>
|
||||
<span class="np-sep">•</span>
|
||||
<span id="np-episode" class="np-badge">Episode --</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-center" id="host-controls" style="display: none;">
|
||||
<div class="quick-controls-group">
|
||||
<div class="sd-toggle small" id="room-sd-toggle" data-state="sub">
|
||||
<div class="sd-bg"></div>
|
||||
<div class="sd-option active" data-val="sub">Sub</div>
|
||||
<div class="sd-option" data-val="dub">Dub</div>
|
||||
</div>
|
||||
|
||||
<div class="control-divider"></div>
|
||||
|
||||
<div class="quick-select-wrapper">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 7h-9"/><path d="M14 17H5"/><circle cx="17" cy="17" r="3"/><circle cx="7" cy="7" r="3"/></svg>
|
||||
<select id="room-ext-select" class="quick-select" title="Extension">
|
||||
<option value="" disabled selected>Extension</option>
|
||||
</select>
|
||||
<div class="select-arrow">▼</div>
|
||||
</div>
|
||||
|
||||
<div class="quick-select-wrapper">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>
|
||||
<select id="room-server-select" class="quick-select" title="Server">
|
||||
<option value="" disabled selected>Server</option>
|
||||
</select>
|
||||
<div class="select-arrow">▼</div>
|
||||
</div>
|
||||
|
||||
<div class="control-divider"></div>
|
||||
|
||||
<button id="copy-invite-btn" class="btn-quick-action" title="Copy invite link" style="display:none;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M10 13a5 5 0 0 0 7.07 0l1.41-1.41a5 5 0 0 0-7.07-7.07L10 5"/>
|
||||
<path d="M14 11a5 5 0 0 0-7.07 0L5.5 12.41a5 5 0 0 0 7.07 7.07L14 19"/>
|
||||
</svg>
|
||||
<span>Invite</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<div class="viewers-pill">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
|
||||
<span id="room-viewers">0</span>
|
||||
</div>
|
||||
|
||||
<button id="select-anime-btn" class="btn-glass-primary" style="display: none;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>
|
||||
</button>
|
||||
|
||||
<button id="toggle-chat-btn" class="btn-icon-glass" title="Toggle Chat">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="player-wrapper">
|
||||
<div class="player-container show-cursor">
|
||||
<div class="video-frame">
|
||||
<canvas id="subtitles-canvas"></canvas>
|
||||
<div id="video-toast-container" class="video-toast-container"></div>
|
||||
<video id="player" crossorigin="anonymous" playsinline></video>
|
||||
|
||||
<div id="player-loading" class="player-loading-overlay">
|
||||
<div class="spinner"></div>
|
||||
<p id="player-loading-text">Waiting for host...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="custom-controls">
|
||||
<div class="progress-container">
|
||||
<div class="progress-buffer"></div>
|
||||
<div class="progress-played"></div>
|
||||
<div class="progress-handle"></div>
|
||||
</div>
|
||||
|
||||
<div class="controls-row">
|
||||
<div class="controls-left">
|
||||
<button class="control-btn play-pause" id="play-pause-btn">
|
||||
<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||||
</button>
|
||||
<button class="control-btn volume" id="volume-btn">
|
||||
<svg viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/></svg>
|
||||
</button>
|
||||
<input type="range" class="volume-slider" id="volume-slider" min="0" max="100" value="100">
|
||||
<span class="time-display" id="time-display">0:00 / 0:00</span>
|
||||
</div>
|
||||
|
||||
<div class="controls-center"></div>
|
||||
|
||||
<div class="controls-right">
|
||||
<button class="control-btn settings" id="settings-btn">
|
||||
<svg viewBox="0 0 24 24"><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></svg>
|
||||
</button>
|
||||
<div class="settings-panel" id="settings-panel"></div>
|
||||
<button class="control-btn fullscreen" id="fullscreen-btn">
|
||||
<svg viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-sidebar">
|
||||
<div class="sidebar-tabs">
|
||||
<button class="tab-btn active" id="tab-chat-btn">Chat</button>
|
||||
<button class="tab-btn" id="tab-queue-btn">Queue <span id="queue-count" class="badge">0</span></button>
|
||||
</div>
|
||||
|
||||
<div id="tab-content-chat" class="tab-content active" style="display: flex; flex-direction: column; height: 100%;">
|
||||
<div style="padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: flex-end;">
|
||||
<button id="toggle-users-btn" class="btn-icon-glass" title="Toggle User List" style="width: 32px; height: 32px;">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
||||
<circle cx="9" cy="7" r="4"></circle>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="users-list" id="users-list" style="display: none;"></div>
|
||||
<div class="chat-messages" id="chat-messages"></div>
|
||||
<form class="chat-input" id="chat-form" autocomplete="off">
|
||||
<input type="text" id="chat-input" placeholder="Type a message..." maxlength="500" autocomplete="off" />
|
||||
<button type="submit">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div id="tab-content-queue" class="tab-content" style="display: none;">
|
||||
<div class="queue-list" id="queue-list">
|
||||
<div class="queue-empty">Queue is empty</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="join-room-modal">
|
||||
<div class="modal-content">
|
||||
<div id="join-host-info" class="join-host-info" style="display: none;">
|
||||
<div class="join-avatar-container">
|
||||
<img id="join-host-avatar" src="" alt="Host">
|
||||
</div>
|
||||
<p id="join-host-text" class="join-text"></p>
|
||||
</div>
|
||||
|
||||
<h2 class="modal-title" style="text-align: center;">Join Room</h2>
|
||||
|
||||
<form id="join-room-form">
|
||||
<div class="form-group">
|
||||
<label>Your Name</label>
|
||||
<input type="text" id="guest-name-input" placeholder="Enter your name" maxlength="30" />
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="password-group" style="display: none;">
|
||||
<label>Room Password</label>
|
||||
<input type="password" id="join-password-input" placeholder="Enter password" maxlength="50" />
|
||||
</div>
|
||||
|
||||
<div class="form-actions" style="justify-content: center;">
|
||||
<button type="button" class="btn-cancel" id="cancel-join-btn">Go Back</button>
|
||||
<button type="submit" class="btn-confirm">Join Party</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="anime-search-modal">
|
||||
<div class="modal-content anime-search-content">
|
||||
<button class="modal-close" id="close-search-modal">✕</button>
|
||||
|
||||
<div id="step-search">
|
||||
<h2 class="modal-title">Select Anime</h2>
|
||||
<div class="search-bar">
|
||||
<input type="text" id="anime-search-input" placeholder="Search anime..." />
|
||||
<button id="anime-search-btn">Search</button>
|
||||
</div>
|
||||
<div id="anime-results" class="anime-results"></div>
|
||||
</div>
|
||||
|
||||
<div id="step-config" style="display: none;">
|
||||
<div class="modal-header-row">
|
||||
<button class="btn-icon-small" id="back-to-search" title="Back">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
|
||||
</button>
|
||||
<h2 class="modal-title" id="selected-anime-title">Configure Episode</h2>
|
||||
</div>
|
||||
|
||||
<div class="config-layout">
|
||||
<div class="config-sidebar">
|
||||
<img id="config-cover" class="config-cover" src="" alt="Cover">
|
||||
</div>
|
||||
|
||||
<div class="config-main" style="justify-content: center;">
|
||||
|
||||
<div style="display: flex; flex-direction: column; height: 100%;">
|
||||
|
||||
<div class="cfg-header" style="margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
|
||||
<div class="cfg-section-title">Select Episodes</div>
|
||||
<div class="cfg-actions">
|
||||
<button id="select-all-page" class="btn-text-tiny">Select Page</button>
|
||||
<button id="select-none-eps" class="btn-text-tiny">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="episodes-grid" class="episodes-grid-container">
|
||||
<div class="grid-loader">Loading...</div>
|
||||
</div>
|
||||
|
||||
<div id="modal-pagination" class="modal-pagination" style="display: none;">
|
||||
<button id="modal-prev-page" class="modal-page-btn">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
|
||||
</button>
|
||||
<span id="modal-page-info" class="modal-page-info">1 - 50</span>
|
||||
<button id="modal-next-page" class="modal-page-btn">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="manual-ep-input" style="margin-top: 10px; display: none;">
|
||||
<label style="font-size: 0.8rem; color: #aaa;">Manual Entry:</label>
|
||||
<div class="ep-control">
|
||||
<button class="ep-btn" id="ep-dec">−</button>
|
||||
<input type="number" id="inp-episode" class="ep-input" value="1" min="1">
|
||||
<button class="ep-btn" id="ep-inc">+</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="config-error" style="color:#ff6b6b; font-size:0.9rem; display:none; background:rgba(255,0,0,0.1); padding:10px; border-radius:8px; margin-top: 10px;"></div>
|
||||
|
||||
<div class="form-actions" style="margin-top:auto; display:flex; gap:10px; padding-top: 20px;">
|
||||
<button id="btn-add-queue" class="btn-cancel" style="flex:1; justify-content: center; border-color: var(--brand-color); color: white;">
|
||||
+ Add Selected (<span id="sel-count">0</span>)
|
||||
</button>
|
||||
|
||||
<button id="btn-launch-stream" class="btn-confirm" style="flex:1;">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
|
||||
Play First
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
||||
<script src="/src/scripts/utils/search-manager.js"></script>
|
||||
<script src="/src/scripts/anime/subtitle-renderer.js"></script>
|
||||
<script src="/src/scripts/anime/player.js"></script>
|
||||
<script src="/src/scripts/room.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,8 +0,0 @@
|
||||
node_modules
|
||||
electron
|
||||
dist
|
||||
.env
|
||||
build
|
||||
.gitignore
|
||||
Dockerfile
|
||||
.dockerignore
|
||||
5
docker/.gitignore
vendored
5
docker/.gitignore
vendored
@@ -1,5 +0,0 @@
|
||||
node_modules
|
||||
electron
|
||||
dist
|
||||
.env
|
||||
build
|
||||
@@ -1,27 +0,0 @@
|
||||
FROM node:20-bookworm
|
||||
|
||||
RUN apt-get update && apt-get install -y \
|
||||
git \
|
||||
ffmpeg \
|
||||
curl \
|
||||
wget \
|
||||
&& rm -rf /var/lib/apt/lists/*
|
||||
|
||||
RUN wget -q https://github.com/cloudflare/cloudflared/releases/download/2025.11.1/cloudflared-linux-amd64.deb \
|
||||
&& dpkg -i cloudflared-linux-amd64.deb \
|
||||
&& rm cloudflared-linux-amd64.deb
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
RUN git clone https://git.waifuboard.app/ItsSkaiya/WaifuBoard.git repo
|
||||
|
||||
RUN mv repo/docker/* . \
|
||||
&& rm -rf repo
|
||||
|
||||
RUN npm install
|
||||
|
||||
RUN npx playwright install chromium
|
||||
RUN npx playwright install-deps
|
||||
|
||||
EXPOSE 54322
|
||||
CMD ["npm", "run", "start"]
|
||||
4687
docker/package-lock.json
generated
4687
docker/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,42 +0,0 @@
|
||||
{
|
||||
"name": "waifu-board",
|
||||
"version": "2.0.0",
|
||||
"description": "",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
"build": "tsc",
|
||||
"start": "tsc && node server.js"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"type": "commonjs",
|
||||
"dependencies": {
|
||||
"@fastify/static": "^8.3.0",
|
||||
"@fastify/websocket": "^11.2.0",
|
||||
"adm-zip": "^0.5.16",
|
||||
"bcrypt": "^6.0.0",
|
||||
"bindings": "^1.5.0",
|
||||
"cheerio": "^1.1.2",
|
||||
"dotenv": "^17.2.3",
|
||||
"epub": "^1.3.0",
|
||||
"fastify": "^5.6.2",
|
||||
"js-yaml": "^4.1.1",
|
||||
"jsonwebtoken": "^9.0.3",
|
||||
"node-addon-api": "^8.5.0",
|
||||
"node-cron": "^4.2.1",
|
||||
"playwright-chromium": "^1.57.0",
|
||||
"sqlite3": "^5.1.7",
|
||||
"ws": "^8.18.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/adm-zip": "^0.5.7",
|
||||
"@types/bcrypt": "^6.0.0",
|
||||
"@types/jsonwebtoken": "^9.0.10",
|
||||
"@types/node": "^24.0.0",
|
||||
"@types/ws": "^8.18.1",
|
||||
"node-gyp": "^12.1.0",
|
||||
"ts-node": "^10.9.0",
|
||||
"typescript": "^5.3.0"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="1200" viewBox="0 0 800 1200"><rect width="100%" height="100%" fill="#DDDDDD"/><path fill="#999999" d="M214.535 564.095h11.97v73.02h-6.97q-1.61 0-2.7-.53-1.08-.53-2.09-1.79l-38.13-48.69q.3 3.34.3 6.17v44.84h-11.97v-73.02h7.12q.86 0 1.49.07.63.08 1.11.31.48.22.94.65.45.43 1.01 1.14l38.28 48.88q-.15-1.77-.26-3.48-.1-1.72-.1-3.18zm49.19 20.4q5.76 0 10.48 1.87t8.08 5.3 5.18 8.38q1.81 4.95 1.81 11.06 0 6.16-1.81 11.11-1.82 4.95-5.18 8.44-3.36 3.48-8.08 5.35t-10.48 1.87q-5.81 0-10.55-1.87-4.75-1.87-8.11-5.35-3.36-3.49-5.2-8.44t-1.84-11.11q0-6.11 1.84-11.06t5.2-8.38 8.11-5.3q4.74-1.87 10.55-1.87m0 43.78q6.46 0 9.57-4.34t3.11-12.73q0-8.38-3.11-12.77-3.11-4.4-9.57-4.4-6.56 0-9.72 4.42t-3.16 12.75q0 8.34 3.16 12.7 3.16 4.37 9.72 4.37m52.37 9.65q-6.77 0-10.38-3.81-3.61-3.82-3.61-10.53v-28.94h-5.3q-1.01 0-1.72-.66-.71-.65-.71-1.97v-4.95l8.34-1.36 2.62-14.14q.26-1.01.96-1.56.71-.56 1.82-.56h6.46v16.31h13.84v8.89h-13.84v28.08q0 2.42 1.19 3.78 1.19 1.37 3.26 1.37 1.16 0 1.94-.28.79-.28 1.37-.58t1.03-.58q.46-.28.91-.28.56 0 .91.28t.76.83l3.73 6.06q-2.72 2.27-6.26 3.44-3.53 1.16-7.32 1.16m92.87-63.03h-32.42v21.62h27.37v10.86h-27.37v29.74h-13.64v-73.02h46.06zm32.07 9.6q5.75 0 10.47 1.87 4.73 1.87 8.08 5.3 3.36 3.43 5.18 8.38t1.82 11.06q0 6.16-1.82 11.11t-5.18 8.44q-3.35 3.48-8.08 5.35-4.72 1.87-10.47 1.87-5.81 0-10.56-1.87t-8.1-5.35q-3.36-3.49-5.21-8.44-1.84-4.95-1.84-11.11 0-6.11 1.84-11.06 1.85-4.95 5.21-8.38 3.35-3.43 8.1-5.3t10.56-1.87m0 43.78q6.46 0 9.57-4.34 3.1-4.34 3.1-12.73 0-8.38-3.1-12.77-3.11-4.4-9.57-4.4-6.57 0-9.73 4.42-3.15 4.42-3.15 12.75 0 8.34 3.15 12.7 3.16 4.37 9.73 4.37m67.26-42.97h12.48v51.81h-7.63q-2.47 0-3.13-2.27l-.86-4.14q-3.18 3.23-7.02 5.22-3.84 2-9.04 2-4.24 0-7.5-1.44-3.25-1.44-5.48-4.07-2.22-2.62-3.36-6.23-1.13-3.61-1.13-7.96v-32.92h12.47v32.92q0 4.75 2.2 7.35t6.59 2.6q3.23 0 6.06-1.44t5.35-3.96zm35.6 2.27.86 4.09q1.57-1.57 3.31-2.9 1.74-1.34 3.69-2.28 1.94-.93 4.16-1.46 2.23-.53 4.85-.53 4.24 0 7.53 1.44 3.28 1.44 5.48 4.04 2.19 2.6 3.33 6.21 1.13 3.61 1.13 7.95v32.98h-12.47v-32.98q0-4.74-2.17-7.34-2.17-2.61-6.62-2.61-3.23 0-6.06 1.47-2.82 1.46-5.35 3.99v37.47h-12.47v-51.81h7.62q2.43 0 3.18 2.27m78.68 34.19v-23.23q-2.12-2.58-4.62-3.64t-5.38-1.06q-2.82 0-5.1 1.06-2.27 1.06-3.88 3.21-1.62 2.14-2.48 5.45t-.86 7.8q0 4.55.73 7.71.74 3.15 2.1 5.15 1.36 1.99 3.33 2.88 1.97.88 4.4.88 3.89 0 6.61-1.62 2.73-1.61 5.15-4.59m0-59.69h12.48v75.04h-7.63q-2.47 0-3.13-2.27l-1.06-5q-3.13 3.58-7.2 5.81-4.06 2.22-9.46 2.22-4.25 0-7.78-1.77-3.54-1.77-6.09-5.13-2.55-3.35-3.94-8.3-1.38-4.95-1.38-11.32 0-5.75 1.56-10.7 1.57-4.95 4.5-8.59 2.92-3.63 7.01-5.68 4.1-2.04 9.2-2.04 4.34 0 7.42 1.36t5.5 3.69z"/></svg>
|
||||
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 123 KiB |
202
docker/server.js
202
docker/server.js
@@ -1,202 +0,0 @@
|
||||
const fastify = require("fastify")({
|
||||
logger: { level: "error" },
|
||||
});
|
||||
|
||||
const path = require("path");
|
||||
const jwt = require("jsonwebtoken");
|
||||
const cron = require("node-cron");
|
||||
const { initHeadless } = require("./dist/shared/headless");
|
||||
const { initDatabase } = require("./dist/shared/database");
|
||||
const { loadExtensions } = require("./dist/shared/extensions");
|
||||
const {refreshTrendingAnime, refreshTopAiringAnime} = require("./dist/api/anime/anime.service");
|
||||
const {refreshPopularBooks, refreshTrendingBooks} = require("./dist/api/books/books.service");
|
||||
const { ensureConfigFile } = require("./dist/shared/config");
|
||||
|
||||
const viewsRoutes = require("./dist/views/views.routes");
|
||||
const animeRoutes = require("./dist/api/anime/anime.routes");
|
||||
const booksRoutes = require("./dist/api/books/books.routes");
|
||||
const proxyRoutes = require("./dist/api/proxy/proxy.routes");
|
||||
const extensionsRoutes = require("./dist/api/extensions/extensions.routes");
|
||||
const galleryRoutes = require("./dist/api/gallery/gallery.routes");
|
||||
const userRoutes = require("./dist/api/user/user.routes");
|
||||
const listRoutes = require("./dist/api/list/list.routes");
|
||||
const anilistRoute = require("./dist/api/anilist/anilist");
|
||||
const localRoutes = require("./dist/api/local/local.routes");
|
||||
const configRoutes = require("./dist/api/config/config.routes");
|
||||
const roomRoutes = require("./dist/api/rooms/rooms.routes");
|
||||
const { setupRoomWebSocket } = require("./dist/api/rooms/rooms.websocket");
|
||||
|
||||
const { getConfig } = require('./dist/shared/config');
|
||||
const { values } = getConfig();
|
||||
const jwtSecret = values.server?.jwt_secret;
|
||||
|
||||
fastify.addHook("preHandler", async (request, reply) => {
|
||||
const auth = request.headers.authorization;
|
||||
if (!auth) return;
|
||||
|
||||
try {
|
||||
const token = auth.replace("Bearer ", "");
|
||||
request.user = jwt.verify(token, jwtSecret);
|
||||
} catch (e) {
|
||||
return reply.code(401).send({ error: "Invalid token" });
|
||||
}
|
||||
});
|
||||
|
||||
const roomService = require('./dist/api/rooms/rooms.service');
|
||||
|
||||
fastify.addHook('onRequest', async (req, reply) => {
|
||||
const isTunnel =
|
||||
!!req.headers['cf-connecting-ip'] ||
|
||||
!!req.headers['cf-ray'];
|
||||
|
||||
if (!isTunnel) return;
|
||||
|
||||
if (req.url.startsWith('/public/') ||
|
||||
req.url.startsWith('/views/') ||
|
||||
req.url.startsWith('/src/')) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.url.startsWith('/room')) {
|
||||
const urlParams = new URLSearchParams(req.url.split('?')[1]);
|
||||
const roomId = urlParams.get('id');
|
||||
|
||||
if (!roomId) {
|
||||
return reply.code(404).send({ error: 'Room ID required' });
|
||||
}
|
||||
|
||||
const room = roomService.getRoom(roomId);
|
||||
if (!room || room.exposed !== true) {
|
||||
return reply.code(404).send({ error: 'Room not found' });
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const wsMatch = req.url.match(/^\/ws\/room\/([a-f0-9]+)/);
|
||||
if (wsMatch) {
|
||||
const roomId = wsMatch[1];
|
||||
const room = roomService.getRoom(roomId);
|
||||
|
||||
if (!room || room.exposed !== true) {
|
||||
return reply.code(404).send({ error: 'Room not found' });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const apiMatch = req.url.match(/^\/api\/rooms\/([a-f0-9]+)/);
|
||||
if (apiMatch) {
|
||||
const roomId = apiMatch[1];
|
||||
const room = roomService.getRoom(roomId);
|
||||
|
||||
if (!room || room.exposed !== true) {
|
||||
return reply.code(404).send({ error: 'Room not found' });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const allowedEndpoints = [
|
||||
'/api/watch/stream',
|
||||
'/api/proxy',
|
||||
'/api/extensions',
|
||||
'/api/search'
|
||||
];
|
||||
|
||||
for (const endpoint of allowedEndpoints) {
|
||||
if (req.url.startsWith(endpoint)) {
|
||||
console.log('[Tunnel] ✓ Allowing utility endpoint:', endpoint);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
return reply.code(404).send({ error: 'Not found' });
|
||||
});
|
||||
|
||||
fastify.register(require("@fastify/static"), {
|
||||
root: path.join(__dirname, "public"),
|
||||
prefix: "/public/",
|
||||
decorateReply: false,
|
||||
});
|
||||
|
||||
fastify.register(require("@fastify/static"), {
|
||||
root: path.join(__dirname, "views"),
|
||||
prefix: "/views/",
|
||||
decorateReply: false,
|
||||
});
|
||||
|
||||
fastify.register(require("@fastify/static"), {
|
||||
root: path.join(__dirname, "src", "scripts"),
|
||||
prefix: "/src/scripts/",
|
||||
decorateReply: false,
|
||||
});
|
||||
|
||||
fastify.register(viewsRoutes);
|
||||
fastify.register(animeRoutes, { prefix: "/api" });
|
||||
fastify.register(booksRoutes, { prefix: "/api" });
|
||||
fastify.register(proxyRoutes, { prefix: "/api" });
|
||||
fastify.register(extensionsRoutes, { prefix: "/api" });
|
||||
fastify.register(galleryRoutes, { prefix: "/api" });
|
||||
fastify.register(userRoutes, { prefix: "/api" });
|
||||
fastify.register(anilistRoute, { prefix: "/api" });
|
||||
fastify.register(listRoutes, { prefix: "/api" });
|
||||
fastify.register(localRoutes, { prefix: "/api" });
|
||||
fastify.register(configRoutes, { prefix: "/api" });
|
||||
fastify.register(roomRoutes, { prefix: "/api" });
|
||||
|
||||
const sleep = ms => new Promise(r => setTimeout(r, ms));
|
||||
|
||||
const start = async () => {
|
||||
try {
|
||||
await fastify.register(require('@fastify/websocket'));
|
||||
ensureConfigFile()
|
||||
initDatabase("anilist");
|
||||
initDatabase("favorites");
|
||||
initDatabase("cache");
|
||||
initDatabase("userdata");
|
||||
initDatabase("local_library");
|
||||
setupRoomWebSocket(fastify);
|
||||
|
||||
const refreshAll = async () => {
|
||||
await refreshTrendingAnime();
|
||||
await sleep(300);
|
||||
await refreshTopAiringAnime();
|
||||
await sleep(300);
|
||||
await refreshTrendingBooks();
|
||||
await sleep(300);
|
||||
await refreshPopularBooks();
|
||||
};
|
||||
|
||||
const job = cron.schedule("*/30 * * * *", async () => {
|
||||
try {
|
||||
await refreshAll();
|
||||
console.log("cache refreshed");
|
||||
} catch (e) {
|
||||
console.error("refresh failed", e);
|
||||
}
|
||||
});
|
||||
|
||||
await loadExtensions();
|
||||
await initHeadless();
|
||||
|
||||
await fastify.listen({ port: 54322, host: "0.0.0.0" });
|
||||
refreshAll().catch(e =>
|
||||
console.error("initial refresh failed", e)
|
||||
);
|
||||
console.log(`Server running at http://localhost:54322`);
|
||||
|
||||
const shutdown = async () => {
|
||||
job.stop();
|
||||
await fastify.close();
|
||||
process.exit(0);
|
||||
};
|
||||
|
||||
process.on("SIGINT", shutdown);
|
||||
process.on("SIGTERM", shutdown);
|
||||
|
||||
} catch (err) {
|
||||
fastify.log.error(err);
|
||||
process.exit(1);
|
||||
}
|
||||
};
|
||||
|
||||
start();
|
||||
@@ -1,564 +0,0 @@
|
||||
import { queryOne } from '../../shared/database';
|
||||
|
||||
const USER_DB = 'userdata';
|
||||
|
||||
// Configuración de reintentos
|
||||
const RETRY_CONFIG = {
|
||||
maxRetries: 3,
|
||||
initialDelay: 1000,
|
||||
maxDelay: 5000,
|
||||
backoffMultiplier: 2
|
||||
};
|
||||
|
||||
// Helper para hacer requests con reintentos y manejo de errores
|
||||
async function fetchWithRetry(
|
||||
url: string,
|
||||
options: RequestInit,
|
||||
retries = RETRY_CONFIG.maxRetries
|
||||
): Promise<Response> {
|
||||
let lastError: Error | null = null;
|
||||
let delay = RETRY_CONFIG.initialDelay;
|
||||
|
||||
for (let attempt = 0; attempt <= retries; attempt++) {
|
||||
try {
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(() => controller.abort(), 10000); // 10s timeout
|
||||
|
||||
const response = await fetch(url, {
|
||||
...options,
|
||||
signal: controller.signal
|
||||
});
|
||||
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
// Si es rate limit (429), esperamos más tiempo
|
||||
if (response.status === 429) {
|
||||
const retryAfter = response.headers.get('Retry-After');
|
||||
const waitTime = retryAfter ? parseInt(retryAfter) * 1000 : delay;
|
||||
|
||||
if (attempt < retries) {
|
||||
console.warn(`Rate limited. Esperando ${waitTime}ms antes de reintentar...`);
|
||||
await new Promise(resolve => setTimeout(resolve, waitTime));
|
||||
delay = Math.min(delay * RETRY_CONFIG.backoffMultiplier, RETRY_CONFIG.maxDelay);
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
// Si es un error de servidor (5xx), reintentamos
|
||||
if (response.status >= 500 && attempt < retries) {
|
||||
console.warn(`Error del servidor (${response.status}). Reintentando en ${delay}ms...`);
|
||||
await new Promise(resolve => setTimeout(resolve, delay));
|
||||
delay = Math.min(delay * RETRY_CONFIG.backoffMultiplier, RETRY_CONFIG.maxDelay);
|
||||
continue;
|
||||
}
|
||||
|
||||
return response;
|
||||
} catch (error) {
|
||||
lastError = error as Error;
|
||||
|
||||
if (attempt < retries && (
|
||||
error instanceof Error && (
|
||||
error.name === 'AbortError' ||
|
||||
error.message.includes('fetch') ||
|
||||
error.message.includes('network')
|
||||
)
|
||||
)) {
|
||||
console.warn(`Error de conexión (intento ${attempt + 1}/${retries + 1}). Reintentando en ${delay}ms...`);
|
||||
await new Promise(resolve => setTimeout(resolve, delay));
|
||||
delay = Math.min(delay * RETRY_CONFIG.backoffMultiplier, RETRY_CONFIG.maxDelay);
|
||||
continue;
|
||||
}
|
||||
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
throw lastError || new Error('Request failed after all retries');
|
||||
}
|
||||
|
||||
export async function getUserAniList(appUserId: number) {
|
||||
try {
|
||||
const sql = `
|
||||
SELECT access_token, anilist_user_id
|
||||
FROM UserIntegration
|
||||
WHERE user_id = ? AND platform = 'AniList';
|
||||
`;
|
||||
|
||||
const integration = await queryOne(sql, [appUserId], USER_DB) as any;
|
||||
if (!integration) return [];
|
||||
|
||||
const { access_token, anilist_user_id } = integration;
|
||||
if (!access_token || !anilist_user_id) return [];
|
||||
|
||||
const query = `
|
||||
query ($userId: Int) {
|
||||
anime: MediaListCollection(userId: $userId, type: ANIME) {
|
||||
lists {
|
||||
entries {
|
||||
media {
|
||||
id
|
||||
title { romaji english userPreferred }
|
||||
coverImage { extraLarge }
|
||||
episodes
|
||||
nextAiringEpisode { episode }
|
||||
}
|
||||
status
|
||||
progress
|
||||
score
|
||||
repeat
|
||||
notes
|
||||
private
|
||||
startedAt { year month day }
|
||||
completedAt { year month day }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
manga: MediaListCollection(userId: $userId, type: MANGA) {
|
||||
lists {
|
||||
entries {
|
||||
media {
|
||||
id
|
||||
type
|
||||
format
|
||||
title { romaji english userPreferred }
|
||||
coverImage { extraLarge }
|
||||
chapters
|
||||
volumes
|
||||
}
|
||||
status
|
||||
progress
|
||||
score
|
||||
repeat
|
||||
notes
|
||||
private
|
||||
startedAt { year month day }
|
||||
completedAt { year month day }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const res = await fetchWithRetry('https://graphql.anilist.co', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${access_token}`,
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
query,
|
||||
variables: { userId: anilist_user_id }
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) throw new Error(`AniList API error: ${res.status}`);
|
||||
|
||||
const json = await res.json();
|
||||
if (json?.errors?.length) throw new Error(json.errors[0].message);
|
||||
|
||||
const fromFuzzy = (d: any) => {
|
||||
if (!d?.year) return null;
|
||||
const m = String(d.month || 1).padStart(2, '0');
|
||||
const day = String(d.day || 1).padStart(2, '0');
|
||||
return `${d.year}-${m}-${day}`;
|
||||
};
|
||||
|
||||
const normalize = (lists: any[], type: 'ANIME' | 'MANGA') => {
|
||||
const result: any[] = [];
|
||||
|
||||
for (const list of lists || []) {
|
||||
for (const entry of list.entries || []) {
|
||||
const media = entry.media;
|
||||
|
||||
const totalEpisodes =
|
||||
media?.episodes ||
|
||||
(media?.nextAiringEpisode?.episode
|
||||
? media.nextAiringEpisode.episode - 1
|
||||
: 0);
|
||||
|
||||
const totalChapters =
|
||||
media?.chapters ||
|
||||
(media?.volumes ? media.volumes * 10 : 0);
|
||||
|
||||
const resolvedType =
|
||||
type === 'MANGA' &&
|
||||
(media?.format === 'LIGHT_NOVEL' || media?.format === 'NOVEL')
|
||||
? 'NOVEL'
|
||||
: type;
|
||||
|
||||
|
||||
result.push({
|
||||
user_id: appUserId,
|
||||
|
||||
entry_id: media.id,
|
||||
source: 'anilist',
|
||||
|
||||
// ✅ AHORA TU FRONT RECIBE NOVEL
|
||||
entry_type: resolvedType,
|
||||
|
||||
status: entry.status,
|
||||
progress: entry.progress || 0,
|
||||
score: entry.score || null,
|
||||
start_date: fromFuzzy(entry.startedAt),
|
||||
end_date: fromFuzzy(entry.completedAt),
|
||||
repeat_count: entry.repeat || 0,
|
||||
notes: entry.notes || null,
|
||||
is_private: entry.private ? 1 : 0,
|
||||
|
||||
title: media?.title?.userPreferred
|
||||
|| media?.title?.english
|
||||
|| media?.title?.romaji
|
||||
|| 'Unknown Title',
|
||||
|
||||
poster: media?.coverImage?.extraLarge
|
||||
|| 'https://placehold.co/400x600?text=No+Cover',
|
||||
|
||||
total_episodes: resolvedType === 'ANIME' ? totalEpisodes : undefined,
|
||||
total_chapters: resolvedType !== 'ANIME' ? totalChapters : undefined,
|
||||
|
||||
updated_at: new Date().toISOString()
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
return [
|
||||
...normalize(json?.data?.anime?.lists, 'ANIME'),
|
||||
...normalize(json?.data?.manga?.lists, 'MANGA')
|
||||
];
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error fetching AniList data:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export async function updateAniListEntry(token: string, params: {
|
||||
mediaId: number | string;
|
||||
status?: string | null;
|
||||
progress?: number | null;
|
||||
score?: number | null;
|
||||
start_date?: string | null; // YYYY-MM-DD
|
||||
end_date?: string | null; // YYYY-MM-DD
|
||||
repeat_count?: number | null;
|
||||
notes?: string | null;
|
||||
is_private?: boolean | number | null;
|
||||
}) {
|
||||
try {
|
||||
if (!token) throw new Error('AniList token is required');
|
||||
|
||||
const mutation = `
|
||||
mutation (
|
||||
$mediaId: Int,
|
||||
$status: MediaListStatus,
|
||||
$progress: Int,
|
||||
$score: Float,
|
||||
$startedAt: FuzzyDateInput,
|
||||
$completedAt: FuzzyDateInput,
|
||||
$repeat: Int,
|
||||
$notes: String,
|
||||
$private: Boolean
|
||||
) {
|
||||
SaveMediaListEntry (
|
||||
mediaId: $mediaId,
|
||||
status: $status,
|
||||
progress: $progress,
|
||||
score: $score,
|
||||
startedAt: $startedAt,
|
||||
completedAt: $completedAt,
|
||||
repeat: $repeat,
|
||||
notes: $notes,
|
||||
private: $private
|
||||
) {
|
||||
id
|
||||
status
|
||||
progress
|
||||
score
|
||||
startedAt { year month day }
|
||||
completedAt { year month day }
|
||||
repeat
|
||||
notes
|
||||
private
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const toFuzzyDate = (dateStr?: string | null) => {
|
||||
if (!dateStr) return null;
|
||||
const [year, month, day] = dateStr.split('-').map(Number);
|
||||
return { year, month, day };
|
||||
};
|
||||
|
||||
const variables: any = {
|
||||
mediaId: Number(params.mediaId),
|
||||
status: params.status ?? undefined,
|
||||
progress: params.progress ?? undefined,
|
||||
score: params.score ?? undefined,
|
||||
startedAt: toFuzzyDate(params.start_date),
|
||||
completedAt: toFuzzyDate(params.end_date),
|
||||
repeat: params.repeat_count ?? undefined,
|
||||
notes: params.notes ?? undefined,
|
||||
private: typeof params.is_private === 'boolean'
|
||||
? params.is_private
|
||||
: params.is_private === 1
|
||||
};
|
||||
|
||||
const res = await fetchWithRetry('https://graphql.anilist.co', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ query: mutation, variables }),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const errorText = await res.text();
|
||||
throw new Error(`AniList update failed: ${res.status} - ${errorText}`);
|
||||
}
|
||||
|
||||
const json = await res.json();
|
||||
|
||||
if (json?.errors?.length) {
|
||||
throw new Error(`AniList GraphQL error: ${json.errors[0].message}`);
|
||||
}
|
||||
|
||||
return json.data?.SaveMediaListEntry || null;
|
||||
} catch (error) {
|
||||
console.error('Error updating AniList entry:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteAniListEntry(token: string, mediaId: number) {
|
||||
if (!token) throw new Error("AniList token required");
|
||||
|
||||
try {
|
||||
// 1️⃣ OBTENER VIEWER
|
||||
const viewerQuery = `query { Viewer { id name } }`;
|
||||
|
||||
const vRes = await fetchWithRetry('https://graphql.anilist.co', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ query: viewerQuery }),
|
||||
});
|
||||
|
||||
const vJson = await vRes.json();
|
||||
const userId = vJson?.data?.Viewer?.id;
|
||||
|
||||
if (!userId) throw new Error("Invalid AniList token");
|
||||
|
||||
// 2️⃣ DETECTAR TIPO REAL DEL MEDIA
|
||||
const mediaQuery = `
|
||||
query ($id: Int) {
|
||||
Media(id: $id) {
|
||||
id
|
||||
type
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const mTypeRes = await fetchWithRetry('https://graphql.anilist.co', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
query: mediaQuery,
|
||||
variables: { id: mediaId }
|
||||
}),
|
||||
});
|
||||
|
||||
const mTypeJson = await mTypeRes.json();
|
||||
const mediaType = mTypeJson?.data?.Media?.type;
|
||||
|
||||
if (!mediaType) {
|
||||
throw new Error("Media not found in AniList");
|
||||
}
|
||||
|
||||
// 3️⃣ BUSCAR ENTRY CON TIPO REAL
|
||||
const listQuery = `
|
||||
query ($userId: Int, $mediaId: Int, $type: MediaType) {
|
||||
MediaList(userId: $userId, mediaId: $mediaId, type: $type) {
|
||||
id
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const qRes = await fetchWithRetry('https://graphql.anilist.co', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
query: listQuery,
|
||||
variables: {
|
||||
userId,
|
||||
mediaId,
|
||||
type: mediaType
|
||||
}
|
||||
}),
|
||||
});
|
||||
|
||||
const qJson = await qRes.json();
|
||||
const listEntryId = qJson?.data?.MediaList?.id;
|
||||
|
||||
if (!listEntryId) {
|
||||
throw new Error("Entry not found in user's AniList");
|
||||
}
|
||||
|
||||
// 4️⃣ BORRAR
|
||||
const mutation = `
|
||||
mutation ($id: Int) {
|
||||
DeleteMediaListEntry(id: $id) {
|
||||
deleted
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const delRes = await fetchWithRetry('https://graphql.anilist.co', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
query: mutation,
|
||||
variables: { id: listEntryId }
|
||||
}),
|
||||
});
|
||||
|
||||
const delJson = await delRes.json();
|
||||
|
||||
if (delJson?.errors?.length) {
|
||||
throw new Error(delJson.errors[0].message);
|
||||
}
|
||||
|
||||
return true;
|
||||
|
||||
} catch (err) {
|
||||
console.error("AniList DELETE failed:", err);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export async function getSingleAniListEntry(
|
||||
token: string,
|
||||
mediaId: number,
|
||||
type: 'ANIME' | 'MANGA'
|
||||
) {
|
||||
try {
|
||||
if (!token) {
|
||||
throw new Error('AniList token is required');
|
||||
}
|
||||
|
||||
// 1️⃣ Obtener userId desde el token
|
||||
const viewerRes = await fetchWithRetry('https://graphql.anilist.co', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
query: `query { Viewer { id } }`
|
||||
})
|
||||
});
|
||||
|
||||
const viewerJson = await viewerRes.json();
|
||||
const userId = viewerJson?.data?.Viewer?.id;
|
||||
|
||||
if (!userId) {
|
||||
throw new Error('Failed to get AniList userId');
|
||||
}
|
||||
|
||||
// 2️⃣ Query correcta con userId
|
||||
const query = `
|
||||
query ($mediaId: Int, $type: MediaType, $userId: Int) {
|
||||
MediaList(mediaId: $mediaId, type: $type, userId: $userId) {
|
||||
id
|
||||
status
|
||||
progress
|
||||
score
|
||||
repeat
|
||||
private
|
||||
notes
|
||||
startedAt { year month day }
|
||||
completedAt { year month day }
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const res = await fetchWithRetry('https://graphql.anilist.co', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
query,
|
||||
variables: { mediaId, type, userId }
|
||||
})
|
||||
});
|
||||
|
||||
if (res.status === 404) {
|
||||
return null; // ✅ No existe entry todavía → es totalmente válido
|
||||
}
|
||||
|
||||
if (!res.ok) {
|
||||
const errorText = await res.text();
|
||||
throw new Error(`AniList fetch failed: ${res.status} - ${errorText}`);
|
||||
}
|
||||
|
||||
const json = await res.json();
|
||||
|
||||
if (json?.errors?.length) {
|
||||
if (json.errors[0].status === 404) return null;
|
||||
throw new Error(`GraphQL error: ${json.errors[0].message}`);
|
||||
}
|
||||
|
||||
const entry = json?.data?.MediaList;
|
||||
if (!entry) return null;
|
||||
|
||||
return {
|
||||
entry_id: mediaId,
|
||||
source: 'anilist',
|
||||
entry_type: type,
|
||||
status: entry.status,
|
||||
progress: entry.progress || 0,
|
||||
score: entry.score ?? null,
|
||||
|
||||
start_date: entry.startedAt?.year
|
||||
? `${entry.startedAt.year}-${String(entry.startedAt.month).padStart(2, '0')}-${String(entry.startedAt.day).padStart(2, '0')}`
|
||||
: null,
|
||||
|
||||
end_date: entry.completedAt?.year
|
||||
? `${entry.completedAt.year}-${String(entry.completedAt.month).padStart(2, '0')}-${String(entry.completedAt.day).padStart(2, '0')}`
|
||||
: null,
|
||||
|
||||
repeat_count: entry.repeat || 0,
|
||||
notes: entry.notes || null,
|
||||
is_private: entry.private ? 1 : 0,
|
||||
};
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error fetching single AniList entry:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
@@ -1,120 +0,0 @@
|
||||
import {FastifyReply, FastifyRequest} from 'fastify';
|
||||
import * as booksService from './books.service';
|
||||
import {getExtension} from '../../shared/extensions';
|
||||
import {BookRequest, ChapterRequest, SearchRequest} from '../types';
|
||||
|
||||
export async function getBook(req: any, reply: FastifyReply) {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const source = req.query.source;
|
||||
|
||||
let book;
|
||||
if (source === 'anilist') {
|
||||
book = await booksService.getBookById(id);
|
||||
} else {
|
||||
const ext = getExtension(source);
|
||||
const result = await booksService.getBookInfoExtension(ext, id);
|
||||
book = result || null;
|
||||
}
|
||||
|
||||
return book;
|
||||
} catch (err) {
|
||||
return { error: (err as Error).message };
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export async function getTrending(req: FastifyRequest, reply: FastifyReply) {
|
||||
try {
|
||||
const results = await booksService.getTrendingBooks();
|
||||
return { results };
|
||||
} catch (err) {
|
||||
return { results: [] };
|
||||
}
|
||||
}
|
||||
|
||||
export async function getPopular(req: FastifyRequest, reply: FastifyReply) {
|
||||
try {
|
||||
const results = await booksService.getPopularBooks();
|
||||
return { results };
|
||||
} catch (err) {
|
||||
return { results: [] };
|
||||
}
|
||||
}
|
||||
|
||||
export async function searchBooks(req: SearchRequest, reply: FastifyReply) {
|
||||
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 };
|
||||
}
|
||||
|
||||
return { results: [] };
|
||||
|
||||
} catch (e) {
|
||||
const error = e as Error;
|
||||
console.error("Search Error:", error.message);
|
||||
return { results: [] };
|
||||
}
|
||||
}
|
||||
|
||||
export async function searchBooksInExtension(req: any, reply: FastifyReply) {
|
||||
try {
|
||||
const extensionName = req.params.extension;
|
||||
const query = req.query.q;
|
||||
|
||||
const ext = getExtension(extensionName);
|
||||
if (!ext) return { results: [] };
|
||||
|
||||
const results = await booksService.searchBooksInExtension(ext, extensionName, query);
|
||||
return { results };
|
||||
} catch (e) {
|
||||
const error = e as Error;
|
||||
console.error("Search Error:", error.message);
|
||||
return { results: [] };
|
||||
}
|
||||
}
|
||||
|
||||
export async function getChapters(req: any, reply: FastifyReply) {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const source = req.query.source || 'anilist';
|
||||
const provider = req.query.provider;
|
||||
const extensionBookId = req.query.extensionBookId;
|
||||
|
||||
const isExternal = source !== 'anilist';
|
||||
return await booksService.getChaptersForBook(id, isExternal, provider, extensionBookId);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
return { chapters: [] };
|
||||
}
|
||||
}
|
||||
|
||||
export async function getChapterContent(req: any, reply: FastifyReply) {
|
||||
try {
|
||||
const { bookId, chapter, provider } = req.params;
|
||||
const source = req.query.source || 'anilist';
|
||||
const lang = req.query.lang || 'none';
|
||||
|
||||
const content = await booksService.getChapterContent(
|
||||
bookId,
|
||||
chapter,
|
||||
provider,
|
||||
source,
|
||||
lang
|
||||
);
|
||||
|
||||
return reply.send(content);
|
||||
} catch (err) {
|
||||
console.error("getChapterContent error:", (err as Error).message);
|
||||
return reply.code(500).send({ error: "Error loading chapter" });
|
||||
}
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import { FastifyInstance } from 'fastify';
|
||||
import * as controller from './books.controller';
|
||||
|
||||
async function booksRoutes(fastify: FastifyInstance) {
|
||||
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('/search/books/:extension', controller.searchBooksInExtension);
|
||||
fastify.get('/book/:id/chapters', controller.getChapters);
|
||||
fastify.get('/book/:bookId/:chapter/:provider', controller.getChapterContent);
|
||||
}
|
||||
|
||||
export default booksRoutes;
|
||||
@@ -1,59 +0,0 @@
|
||||
import { FastifyReply, FastifyRequest } from 'fastify';
|
||||
import { getConfig, setConfig } from '../../shared/config';
|
||||
|
||||
function hideSecrets(values: any) {
|
||||
const copy = structuredClone(values);
|
||||
if (copy.server?.jwt_secret) delete copy.server.jwt_secret;
|
||||
return copy;
|
||||
}
|
||||
|
||||
export async function getFullConfig(req: FastifyRequest, reply: FastifyReply) {
|
||||
try {
|
||||
const { values, schema } = getConfig();
|
||||
return { values: hideSecrets(values), schema };
|
||||
} catch {
|
||||
return { error: "Error loading config" };
|
||||
}
|
||||
}
|
||||
|
||||
export async function getConfigSection(
|
||||
req: FastifyRequest<{ Params: { section: string } }>,
|
||||
reply: FastifyReply
|
||||
) {
|
||||
try {
|
||||
const { section } = req.params;
|
||||
const { values } = getConfig();
|
||||
|
||||
if (values[section] === undefined) {
|
||||
return { error: "Section not found" };
|
||||
}
|
||||
|
||||
return { [section]: hideSecrets(values)[section] };
|
||||
} catch {
|
||||
return { error: "Error loading config section" };
|
||||
}
|
||||
}
|
||||
|
||||
export async function updateConfig(
|
||||
req: FastifyRequest<{ Body: any }>,
|
||||
reply: FastifyReply
|
||||
) {
|
||||
try {
|
||||
return setConfig(req.body); // schema nunca se toca
|
||||
} catch {
|
||||
return { error: "Error updating config" };
|
||||
}
|
||||
}
|
||||
|
||||
export async function updateConfigSection(
|
||||
req: FastifyRequest<{ Params: { section: string }, Body: any }>,
|
||||
reply: FastifyReply
|
||||
) {
|
||||
try {
|
||||
const { section } = req.params;
|
||||
const updatedValues = setConfig({ [section]: req.body });
|
||||
return { [section]: updatedValues[section] };
|
||||
} catch {
|
||||
return { error: "Error updating config section" };
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
import { FastifyInstance } from 'fastify';
|
||||
import * as controller from './config.controller';
|
||||
|
||||
async function configRoutes(fastify: FastifyInstance) {
|
||||
fastify.get('/config', controller.getFullConfig);
|
||||
fastify.get('/config/:section', controller.getConfigSection);
|
||||
fastify.post('/config', controller.updateConfig);
|
||||
fastify.post('/config/:section', controller.updateConfigSection);
|
||||
}
|
||||
|
||||
export default configRoutes;
|
||||
@@ -1,155 +0,0 @@
|
||||
import { FastifyReply, FastifyRequest } from 'fastify';
|
||||
import { getExtension, getExtensionsList, getGalleryExtensionsMap, getBookExtensionsMap, getMangaExtensionsMap, getNovelExtensionsMap, getAnimeExtensionsMap, saveExtensionFile, deleteExtensionFile } from '../../shared/extensions';
|
||||
import { ExtensionNameRequest } from '../types';
|
||||
|
||||
const TYPE_MAP: Record<string, string> = {
|
||||
'anime-board': 'anime',
|
||||
'image-board': 'image',
|
||||
'book-board': 'book',
|
||||
};
|
||||
|
||||
function extractProp(source: string, prop: string): string | null {
|
||||
const m = source.match(new RegExp(`this\\.${prop}\\s*=\\s*["']([^"']+)["']`));
|
||||
return m ? m[1] : null;
|
||||
}
|
||||
|
||||
function isNewer(remote: string, local?: string | null) {
|
||||
if (!local) return true;
|
||||
return remote !== local;
|
||||
}
|
||||
|
||||
export async function updateExtensions(req: any, reply: FastifyReply) {
|
||||
const updated: string[] = [];
|
||||
|
||||
for (const name of getExtensionsList()) {
|
||||
const ext = getExtension(name);
|
||||
if (!ext) continue;
|
||||
|
||||
const type = ext.type;
|
||||
if (!TYPE_MAP[type]) continue;
|
||||
|
||||
const fileName = ext.__fileName;
|
||||
const remoteUrl = `https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/${TYPE_MAP[type]}/${fileName}`;
|
||||
|
||||
let remoteSrc: string;
|
||||
try {
|
||||
const res = await fetch(remoteUrl);
|
||||
if (!res.ok) continue;
|
||||
remoteSrc = await res.text();
|
||||
} catch {
|
||||
continue;
|
||||
}
|
||||
|
||||
const remoteVersion = extractProp(remoteSrc, 'version');
|
||||
const localVersion = ext.version ?? null;
|
||||
if (!remoteVersion) continue;
|
||||
|
||||
if (isNewer(remoteVersion, localVersion)) {
|
||||
await saveExtensionFile(fileName, remoteUrl);
|
||||
updated.push(name);
|
||||
}
|
||||
}
|
||||
|
||||
return { updated };
|
||||
}
|
||||
|
||||
export async function getExtensions(req: FastifyRequest, reply: FastifyReply) {
|
||||
return { extensions: getExtensionsList() };
|
||||
}
|
||||
|
||||
export async function getAnimeExtensions(req: FastifyRequest, reply: FastifyReply) {
|
||||
const animeExtensions = getAnimeExtensionsMap();
|
||||
return { extensions: Array.from(animeExtensions.keys()) };
|
||||
}
|
||||
|
||||
export async function getBookExtensions(req: FastifyRequest, reply: FastifyReply) {
|
||||
const bookExtensions = getBookExtensionsMap();
|
||||
return { extensions: Array.from(bookExtensions.keys()) };
|
||||
}
|
||||
|
||||
export async function getMangaExtensions(req: FastifyRequest, reply: FastifyReply) {
|
||||
const bookExtensions = getMangaExtensionsMap();
|
||||
return { extensions: Array.from(bookExtensions.keys()) };
|
||||
}
|
||||
|
||||
export async function getNovelExtensions(req: FastifyRequest, reply: FastifyReply) {
|
||||
const bookExtensions = getNovelExtensionsMap();
|
||||
return { extensions: Array.from(bookExtensions.keys()) };
|
||||
}
|
||||
|
||||
export async function getGalleryExtensions(req: FastifyRequest, reply: FastifyReply) {
|
||||
const galleryExtensions = getGalleryExtensionsMap();
|
||||
return { extensions: Array.from(galleryExtensions.keys()) };
|
||||
}
|
||||
|
||||
export async function getExtensionSettings(req: ExtensionNameRequest, reply: FastifyReply) {
|
||||
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();
|
||||
}
|
||||
|
||||
export async function installExtension(req: any, reply: FastifyReply) {
|
||||
const { url } = req.body;
|
||||
|
||||
if (!url || typeof url !== 'string' || !url.endsWith('.js')) {
|
||||
return reply.code(400).send({ error: "Invalid extension URL provided" });
|
||||
}
|
||||
|
||||
try {
|
||||
const fileName = url.split('/').pop();
|
||||
|
||||
if (!fileName) {
|
||||
return reply.code(400).send({ error: "Could not determine file name from URL" });
|
||||
}
|
||||
|
||||
await saveExtensionFile(fileName, url);
|
||||
|
||||
req.server.log.info(`Extension installed: ${fileName}`);
|
||||
return reply.code(200).send({
|
||||
success: true,
|
||||
message: `Extension ${fileName} installed successfully.`,
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
req.server.log.error(`Failed to install extension from ${url}:`, error);
|
||||
return reply.code(500).send({
|
||||
success: false,
|
||||
error: "Failed to install extension.",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export async function uninstallExtension(req: any, reply: FastifyReply) {
|
||||
const { fileName } = req.body;
|
||||
|
||||
if (!fileName || !fileName.endsWith('.js')) {
|
||||
return reply.code(400).send({ error: "Invalid extension fileName provided" });
|
||||
}
|
||||
|
||||
try {
|
||||
|
||||
await deleteExtensionFile(fileName);
|
||||
|
||||
req.server.log.info(`Extension uninstalled: ${fileName}`);
|
||||
return reply.code(200).send({ success: true, message: `Extension ${fileName} uninstalled successfully.` });
|
||||
|
||||
} catch (error) {
|
||||
|
||||
// @ts-ignore
|
||||
if (error.code === 'ENOENT') {
|
||||
return reply.code(200).send({ success: true, message: `Extension ${fileName} already uninstalled (file not found).` });
|
||||
}
|
||||
|
||||
req.server.log.error(`Failed to uninstall extension ${fileName}:`, error);
|
||||
return reply.code(500).send({ success: false, error: `Failed to uninstall extension ${fileName}.` });
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
import { FastifyInstance } from 'fastify';
|
||||
import * as controller from './extensions.controller';
|
||||
|
||||
async function extensionsRoutes(fastify: FastifyInstance) {
|
||||
fastify.get('/extensions', controller.getExtensions);
|
||||
fastify.get('/extensions/anime', controller.getAnimeExtensions);
|
||||
fastify.post('/extensions/update', controller.updateExtensions);
|
||||
fastify.get('/extensions/book', controller.getBookExtensions);
|
||||
fastify.get('/extensions/manga', controller.getMangaExtensions);
|
||||
fastify.get('/extensions/novel', controller.getNovelExtensions);
|
||||
fastify.get('/extensions/gallery', controller.getGalleryExtensions);
|
||||
fastify.get('/extensions/:name/settings', controller.getExtensionSettings);
|
||||
fastify.post('/extensions/install', controller.installExtension);
|
||||
fastify.post('/extensions/uninstall', controller.uninstallExtension);
|
||||
}
|
||||
|
||||
export default extensionsRoutes;
|
||||
@@ -1,126 +0,0 @@
|
||||
import {FastifyReply, FastifyRequest} from 'fastify';
|
||||
import * as galleryService from './gallery.service';
|
||||
|
||||
export async function searchInExtension(req: any, reply: FastifyReply) {
|
||||
try {
|
||||
const provider = req.query.provider;
|
||||
const query = req.query.q || '';
|
||||
const page = parseInt(req.query.page as string) || 1;
|
||||
const perPage = parseInt(req.query.perPage as string) || 48;
|
||||
|
||||
if (!provider) {
|
||||
return reply.code(400).send({ error: "Missing provider" });
|
||||
}
|
||||
|
||||
return await galleryService.searchInExtension(provider, query, page, perPage);
|
||||
|
||||
} catch (err) {
|
||||
console.error("Gallery SearchInExtension Error:", (err as Error).message);
|
||||
|
||||
return {
|
||||
results: [],
|
||||
total: 0,
|
||||
page: 1,
|
||||
hasNextPage: false
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export async function getInfo(req: any, reply: FastifyReply) {
|
||||
try {
|
||||
const { id } = req.params;
|
||||
const provider = req.query.provider;
|
||||
|
||||
return await galleryService.getGalleryInfo(id, provider);
|
||||
} catch (err) {
|
||||
const error = err as Error;
|
||||
console.error("Gallery Info Error:", error.message);
|
||||
return reply.code(404).send({ error: "Gallery item not found" });
|
||||
}
|
||||
}
|
||||
|
||||
export async function getFavorites(req: any, reply: FastifyReply) {
|
||||
try {
|
||||
if (!req.user) return reply.code(401).send({ error: "Unauthorized" });
|
||||
|
||||
const favorites = await galleryService.getFavorites(req.user.id);
|
||||
return { favorites };
|
||||
} catch (err) {
|
||||
console.error("Get Favorites Error:", (err as Error).message);
|
||||
return reply.code(500).send({ error: "Failed to retrieve favorites" });
|
||||
}
|
||||
}
|
||||
|
||||
export async function getFavoriteById(req: any, reply: FastifyReply) {
|
||||
try {
|
||||
if (!req.user) return reply.code(401).send({ error: "Unauthorized" });
|
||||
|
||||
const { id } = req.params as { id: string };
|
||||
|
||||
const favorite = await galleryService.getFavoriteById(id, req.user.id);
|
||||
|
||||
if (!favorite) {
|
||||
return reply.code(404).send({ error: "Favorite not found" });
|
||||
}
|
||||
|
||||
return { favorite };
|
||||
|
||||
} catch (err) {
|
||||
console.error("Get Favorite By ID Error:", (err as Error).message);
|
||||
return reply.code(500).send({ error: "Failed to retrieve favorite" });
|
||||
}
|
||||
}
|
||||
|
||||
export async function addFavorite(req: any, reply: FastifyReply) {
|
||||
try {
|
||||
if (!req.user) return reply.code(401).send({ error: "Unauthorized" });
|
||||
|
||||
const { id, title, image_url, thumbnail_url, tags, provider, headers } = req.body;
|
||||
|
||||
if (!id || !title || !image_url || !thumbnail_url) {
|
||||
return reply.code(400).send({
|
||||
error: "Missing required fields"
|
||||
});
|
||||
}
|
||||
|
||||
const result = await galleryService.addFavorite({
|
||||
id,
|
||||
user_id: req.user.id,
|
||||
title,
|
||||
image_url,
|
||||
thumbnail_url,
|
||||
tags: tags || '',
|
||||
provider: provider || "",
|
||||
headers: headers || ""
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
return reply.code(201).send(result);
|
||||
} else {
|
||||
return reply.code(409).send(result);
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.error("Add Favorite Error:", (err as Error).message);
|
||||
return reply.code(500).send({ error: "Failed to add favorite" });
|
||||
}
|
||||
}
|
||||
|
||||
export async function removeFavorite(req: any, reply: FastifyReply) {
|
||||
try {
|
||||
if (!req.user) return reply.code(401).send({ error: "Unauthorized" });
|
||||
|
||||
const { id } = req.params;
|
||||
|
||||
const result = await galleryService.removeFavorite(id, req.user.id);
|
||||
|
||||
if (result.success) {
|
||||
return { success: true, message: "Favorite removed successfully" };
|
||||
} else {
|
||||
return reply.code(404).send({ error: "Favorite not found" });
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Remove Favorite Error:", (err as Error).message);
|
||||
return reply.code(500).send({ error: "Failed to remove favorite" });
|
||||
}
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
import { FastifyInstance } from 'fastify';
|
||||
import * as controller from './gallery.controller';
|
||||
|
||||
async function galleryRoutes(fastify: FastifyInstance) {
|
||||
fastify.get('/gallery/fetch/:id', controller.getInfo);
|
||||
fastify.get('/gallery/search/provider', controller.searchInExtension);
|
||||
fastify.get('/gallery/favorites', controller.getFavorites);
|
||||
fastify.get('/gallery/favorites/:id', controller.getFavoriteById);
|
||||
fastify.post('/gallery/favorites', controller.addFavorite);
|
||||
fastify.delete('/gallery/favorites/:id', controller.removeFavorite);
|
||||
}
|
||||
|
||||
export default galleryRoutes;
|
||||
@@ -1,178 +0,0 @@
|
||||
import { getAllExtensions, getExtension } from '../../shared/extensions';
|
||||
import { GallerySearchResult, GalleryInfo, Favorite, FavoriteResult } from '../types';
|
||||
import { getDatabase } from '../../shared/database';
|
||||
|
||||
export async function getGalleryInfo(id: string, providerName?: string): Promise<any> {
|
||||
const extensions = getAllExtensions();
|
||||
|
||||
if (providerName) {
|
||||
const ext = extensions.get(providerName);
|
||||
if (ext && ext.type === 'image-board' && ext.getInfo) {
|
||||
try {
|
||||
console.log(`[Gallery] Getting info from ${providerName} for: ${id}`);
|
||||
const info = await ext.getInfo(id);
|
||||
return {
|
||||
id: info.id ?? id,
|
||||
provider: providerName,
|
||||
image: info.image,
|
||||
tags: info.tags,
|
||||
title: info.title,
|
||||
headers: info.headers
|
||||
};
|
||||
} catch (e) {
|
||||
const error = e as Error;
|
||||
console.error(`[Gallery] Failed to get info from ${providerName}:`, error.message);
|
||||
throw new Error(`Failed to get gallery info from ${providerName}`);
|
||||
}
|
||||
}
|
||||
throw new Error("Provider not found or doesn't support getInfo");
|
||||
}
|
||||
|
||||
for (const [name, ext] of extensions) {
|
||||
if (ext.type === 'gallery' && ext.getInfo) {
|
||||
try {
|
||||
console.log(`[Gallery] Trying to get info from ${name} for: ${id}`);
|
||||
const info = await ext.getInfo(id);
|
||||
return {
|
||||
...info,
|
||||
provider: name
|
||||
};
|
||||
} catch {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
throw new Error("Gallery item not found in any extension");
|
||||
}
|
||||
|
||||
export async function searchInExtension(providerName: string, query: string, page: number = 1, perPage: number = 48): Promise<any> {
|
||||
const ext = getExtension(providerName);
|
||||
|
||||
try {
|
||||
console.log(`[Gallery] Searching ONLY in ${providerName} for: ${query}`);
|
||||
const results = await ext.search(query, page, perPage);
|
||||
|
||||
const normalizedResults = (results?.results ?? []).map((r: any) => ({
|
||||
id: r.id,
|
||||
image: r.image,
|
||||
tags: r.tags,
|
||||
title: r.title,
|
||||
headers: r.headers,
|
||||
provider: providerName
|
||||
}));
|
||||
|
||||
return {
|
||||
page: results.page ?? page,
|
||||
hasNextPage: !!results.hasNextPage,
|
||||
results: normalizedResults
|
||||
};
|
||||
|
||||
} catch (e) {
|
||||
const error = e as Error;
|
||||
console.error(`[Gallery] Search failed in ${providerName}:`, error.message);
|
||||
|
||||
return {
|
||||
total: 0,
|
||||
next: 0,
|
||||
previous: 0,
|
||||
pages: 0,
|
||||
page,
|
||||
hasNextPage: false,
|
||||
results: []
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export async function getFavorites(userId: number): Promise<Favorite[]> {
|
||||
const db = getDatabase("favorites");
|
||||
|
||||
return new Promise((resolve) => {
|
||||
db.all(
|
||||
'SELECT * FROM favorites WHERE user_id = ?',
|
||||
[userId],
|
||||
(err: Error | null, rows: Favorite[]) => {
|
||||
if (err) {
|
||||
console.error('Error getting favorites:', err.message);
|
||||
resolve([]);
|
||||
} else {
|
||||
resolve(rows);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export async function getFavoriteById(id: string, userId: number): Promise<Favorite | null> {
|
||||
const db = getDatabase("favorites");
|
||||
|
||||
return new Promise((resolve) => {
|
||||
db.get(
|
||||
'SELECT * FROM favorites WHERE id = ? AND user_id = ?',
|
||||
[id, userId],
|
||||
(err: Error | null, row: Favorite | undefined) => {
|
||||
if (err) {
|
||||
console.error('Error getting favorite by id:', err.message);
|
||||
resolve(null);
|
||||
} else {
|
||||
resolve(row || null);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export async function addFavorite(fav: Favorite & { user_id: number }): Promise<FavoriteResult> {
|
||||
const db = getDatabase("favorites");
|
||||
|
||||
return new Promise((resolve) => {
|
||||
const stmt = `
|
||||
INSERT INTO favorites (id, user_id, title, image_url, thumbnail_url, tags, headers, provider)
|
||||
VALUES (?, ?, ?, ?, ?, ?, ?, ?)
|
||||
`;
|
||||
|
||||
db.run(
|
||||
stmt,
|
||||
[
|
||||
fav.id,
|
||||
fav.user_id,
|
||||
fav.title,
|
||||
fav.image_url,
|
||||
fav.thumbnail_url,
|
||||
fav.tags || "",
|
||||
fav.headers || "",
|
||||
fav.provider || ""
|
||||
],
|
||||
function (err: any) {
|
||||
if (err) {
|
||||
if (err.code && err.code.includes('SQLITE_CONSTRAINT')) {
|
||||
resolve({ success: false, error: 'Item is already a favorite.' });
|
||||
} else {
|
||||
console.error('Error adding favorite:', err.message);
|
||||
resolve({ success: false, error: err.message });
|
||||
}
|
||||
} else {
|
||||
resolve({ success: true, id: fav.id });
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export async function removeFavorite(id: string, userId: number): Promise<FavoriteResult> {
|
||||
const db = getDatabase("favorites");
|
||||
|
||||
return new Promise((resolve) => {
|
||||
const stmt = 'DELETE FROM favorites WHERE id = ? AND user_id = ?';
|
||||
|
||||
db.run(stmt, [id, userId], function (err: Error | null) {
|
||||
if (err) {
|
||||
console.error('Error removing favorite:', err.message);
|
||||
resolve({ success: false, error: err.message });
|
||||
} else {
|
||||
// @ts-ignore
|
||||
resolve({ success: this.changes > 0 });
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -1,166 +0,0 @@
|
||||
import {FastifyReply, FastifyRequest} from 'fastify';
|
||||
import * as listService from './list.service';
|
||||
|
||||
interface UserRequest extends FastifyRequest {
|
||||
user?: { id: number };
|
||||
}
|
||||
|
||||
interface EntryParams {
|
||||
entryId: string;
|
||||
|
||||
}
|
||||
|
||||
interface SingleEntryQuery {
|
||||
source: string;
|
||||
entry_type: string;
|
||||
}
|
||||
|
||||
export async function getList(req: UserRequest, reply: FastifyReply) {
|
||||
const userId = req.user?.id;
|
||||
if (!userId) {
|
||||
return reply.code(401).send({ error: "Unauthorized" });
|
||||
}
|
||||
|
||||
try {
|
||||
const results = await listService.getUserList(userId);
|
||||
return { results };
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
return reply.code(500).send({ error: "Failed to retrieve list" });
|
||||
}
|
||||
}
|
||||
|
||||
export async function getSingleEntry(req: UserRequest, reply: FastifyReply) {
|
||||
const userId = req.user?.id;
|
||||
const { entryId } = req.params as EntryParams;
|
||||
const { source, entry_type } = req.query as SingleEntryQuery;
|
||||
|
||||
if (!userId) {
|
||||
return reply.code(401).send({ error: "Unauthorized" });
|
||||
}
|
||||
|
||||
if (!entryId || !source || !entry_type) {
|
||||
return reply.code(400).send({ error: "Missing required identifier: entryId, source, or entry_type." });
|
||||
}
|
||||
|
||||
try {
|
||||
|
||||
const entry = await listService.getSingleListEntry(
|
||||
userId,
|
||||
entryId,
|
||||
source,
|
||||
entry_type
|
||||
);
|
||||
|
||||
if (!entry) {
|
||||
|
||||
return reply.code(404).send({ found: false, message: "Entry not found in user list." });
|
||||
}
|
||||
|
||||
return { found: true, entry: entry };
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
return reply.code(500).send({ error: "Failed to retrieve list entry" });
|
||||
}
|
||||
}
|
||||
|
||||
export async function upsertEntry(req: UserRequest, reply: FastifyReply) {
|
||||
const userId = req.user?.id;
|
||||
const body = req.body as any;
|
||||
|
||||
if (!userId) {
|
||||
return reply.code(401).send({ error: "Unauthorized" });
|
||||
}
|
||||
|
||||
if (!body.entry_id || !body.source || !body.status || !body.entry_type) {
|
||||
return reply.code(400).send({
|
||||
error: "Missing required fields (entry_id, source, status, entry_type)."
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
const entryData = {
|
||||
user_id: userId,
|
||||
entry_id: body.entry_id,
|
||||
external_id: body.external_id,
|
||||
source: body.source,
|
||||
entry_type: body.entry_type,
|
||||
status: body.status,
|
||||
progress: body.progress || 0,
|
||||
score: body.score || null,
|
||||
start_date: body.start_date || null,
|
||||
end_date: body.end_date || null,
|
||||
repeat_count: body.repeat_count ?? 0,
|
||||
notes: body.notes || null,
|
||||
is_private: body.is_private ?? 0
|
||||
};
|
||||
|
||||
const result = await listService.upsertListEntry(entryData);
|
||||
|
||||
return { success: true, changes: result.changes };
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
return reply.code(500).send({ error: "Failed to save list entry" });
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteEntry(req: UserRequest, reply: FastifyReply) {
|
||||
const userId = req.user?.id;
|
||||
const { entryId } = req.params as EntryParams;
|
||||
const { source } = req.query as { source?: string }; // ✅ VIENE DEL FRONT
|
||||
|
||||
if (!userId) {
|
||||
return reply.code(401).send({ error: "Unauthorized" });
|
||||
}
|
||||
|
||||
if (!entryId || !source) {
|
||||
return reply.code(400).send({ error: "Missing entryId or source." });
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await listService.deleteListEntry(
|
||||
userId,
|
||||
entryId,
|
||||
source
|
||||
);
|
||||
|
||||
if (result.success) {
|
||||
return { success: true, external: result.external };
|
||||
} else {
|
||||
return reply.code(404).send({
|
||||
error: "Entry not found or unauthorized to delete."
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
return reply.code(500).send({ error: "Failed to delete list entry" });
|
||||
}
|
||||
}
|
||||
|
||||
export async function getListByFilter(req: UserRequest, reply: FastifyReply) {
|
||||
const userId = req.user?.id;
|
||||
const { status, entry_type } = req.query as any;
|
||||
|
||||
if (!userId) {
|
||||
return reply.code(401).send({ error: "Unauthorized" });
|
||||
}
|
||||
|
||||
if (!status && !entry_type) {
|
||||
return reply.code(400).send({
|
||||
error: "At least one filter is required (status or entry_type)."
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
const results = await listService.getUserListByFilter(
|
||||
userId,
|
||||
status,
|
||||
entry_type
|
||||
);
|
||||
|
||||
return { results };
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
return reply.code(500).send({ error: "Failed to retrieve filtered list" });
|
||||
}
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
import { FastifyInstance } from 'fastify';
|
||||
import * as controller from './list.controller';
|
||||
|
||||
async function listRoutes(fastify: FastifyInstance) {
|
||||
fastify.get('/list', controller.getList);
|
||||
fastify.get('/list/entry/:entryId', controller.getSingleEntry);
|
||||
fastify.post('/list/entry', controller.upsertEntry);
|
||||
fastify.delete('/list/entry/:entryId', controller.deleteEntry);
|
||||
fastify.get('/list/filter', controller.getListByFilter);
|
||||
}
|
||||
|
||||
export default listRoutes;
|
||||
@@ -1,584 +0,0 @@
|
||||
import {queryAll, run, queryOne} from '../../shared/database';
|
||||
import {getExtension} from '../../shared/extensions';
|
||||
import * as animeService from '../anime/anime.service';
|
||||
import * as booksService from '../books/books.service';
|
||||
import * as aniListService from '../anilist/anilist.service';
|
||||
|
||||
interface ListEntryData {
|
||||
entry_type: any;
|
||||
user_id: number;
|
||||
entry_id: number;
|
||||
|
||||
source: string;
|
||||
|
||||
status: string;
|
||||
|
||||
progress: number;
|
||||
score: number | null;
|
||||
}
|
||||
|
||||
const USER_DB = 'userdata';
|
||||
|
||||
export async function upsertListEntry(entry: any) {
|
||||
const {
|
||||
user_id,
|
||||
entry_id,
|
||||
source,
|
||||
entry_type,
|
||||
status,
|
||||
progress,
|
||||
score,
|
||||
start_date,
|
||||
end_date,
|
||||
repeat_count,
|
||||
notes,
|
||||
is_private
|
||||
} = entry;
|
||||
|
||||
let prev: any = null;
|
||||
|
||||
try {
|
||||
prev = await getSingleListEntry(user_id, entry_id, source, entry_type);
|
||||
} catch {
|
||||
prev = null;
|
||||
|
||||
}
|
||||
|
||||
const isNew = !prev;
|
||||
if (!isNew && prev?.progress != null && progress < prev.progress) {
|
||||
return { changes: 0, ignored: true };
|
||||
}
|
||||
|
||||
const today = new Date().toISOString().slice(0, 10);
|
||||
|
||||
if (prev?.start_date && !entry.start_date) {
|
||||
entry.start_date = prev.start_date;
|
||||
}
|
||||
|
||||
if (!prev?.start_date && progress === 1) {
|
||||
entry.start_date = today;
|
||||
}
|
||||
|
||||
const total =
|
||||
prev?.total_episodes ??
|
||||
prev?.total_chapters ??
|
||||
null;
|
||||
|
||||
if (total && progress >= total) {
|
||||
entry.status = 'COMPLETED';
|
||||
entry.end_date = today;
|
||||
}
|
||||
|
||||
if (source === 'anilist') {
|
||||
const token = await getActiveAccessToken(user_id);
|
||||
|
||||
if (token) {
|
||||
try {
|
||||
const result = await aniListService.updateAniListEntry(token, {
|
||||
mediaId: entry.entry_id,
|
||||
status: entry.status,
|
||||
progress: entry.progress,
|
||||
score: entry.score,
|
||||
start_date: entry.start_date,
|
||||
end_date: entry.end_date,
|
||||
repeat_count: entry.repeat_count,
|
||||
notes: entry.notes,
|
||||
is_private: entry.is_private
|
||||
});
|
||||
|
||||
return { changes: 0, external: true, anilistResult: result };
|
||||
} catch (err) {
|
||||
console.error("Error actualizando AniList:", err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const sql = `
|
||||
INSERT INTO ListEntry
|
||||
(
|
||||
user_id, entry_id, source, entry_type, status,
|
||||
progress, score,
|
||||
start_date, end_date, repeat_count, notes, is_private,
|
||||
updated_at
|
||||
)
|
||||
VALUES
|
||||
(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, CURRENT_TIMESTAMP)
|
||||
ON CONFLICT(user_id, entry_id) DO UPDATE SET
|
||||
source = EXCLUDED.source,
|
||||
entry_type = EXCLUDED.entry_type,
|
||||
status = EXCLUDED.status,
|
||||
progress = EXCLUDED.progress,
|
||||
score = EXCLUDED.score,
|
||||
start_date = EXCLUDED.start_date,
|
||||
end_date = EXCLUDED.end_date,
|
||||
repeat_count = EXCLUDED.repeat_count,
|
||||
notes = EXCLUDED.notes,
|
||||
is_private = EXCLUDED.is_private,
|
||||
updated_at = CURRENT_TIMESTAMP;
|
||||
`;
|
||||
|
||||
const params = [
|
||||
entry.user_id,
|
||||
entry.entry_id,
|
||||
entry.source,
|
||||
entry.entry_type,
|
||||
entry.status,
|
||||
entry.progress,
|
||||
entry.score ?? null,
|
||||
entry.start_date || null,
|
||||
entry.end_date || null,
|
||||
entry.repeat_count ?? 0,
|
||||
entry.notes || null,
|
||||
entry.is_private ?? 0
|
||||
];
|
||||
|
||||
try {
|
||||
const result = await run(sql, params, USER_DB);
|
||||
return { changes: result.changes, lastID: result.lastID, external: false };
|
||||
} catch (error) {
|
||||
console.error("Error al guardar la entrada de lista:", error);
|
||||
throw new Error("Error en la base de datos al guardar la entrada.");
|
||||
}
|
||||
}
|
||||
|
||||
export async function getUserList(userId: number): Promise<any> {
|
||||
const sql = `
|
||||
SELECT * FROM ListEntry
|
||||
WHERE user_id = ?
|
||||
ORDER BY updated_at DESC;
|
||||
`;
|
||||
|
||||
try {
|
||||
const dbList = await queryAll(sql, [userId], USER_DB) as ListEntryData[];
|
||||
const connected = await isConnected(userId);
|
||||
|
||||
let finalList: any[] = [...dbList];
|
||||
|
||||
if (connected) {
|
||||
const anilistEntries = await aniListService.getUserAniList(userId);
|
||||
const localWithoutAnilist = dbList.filter(
|
||||
entry => entry.source !== 'anilist'
|
||||
);
|
||||
|
||||
finalList = [...anilistEntries, ...localWithoutAnilist];
|
||||
}
|
||||
|
||||
const enrichedListPromises = finalList.map(async (entry) => {
|
||||
if (entry.source === 'anilist' && connected) {
|
||||
let finalTitle = entry.title;
|
||||
if (typeof finalTitle === 'object' && finalTitle !== null) {
|
||||
finalTitle =
|
||||
finalTitle.userPreferred ||
|
||||
finalTitle.english ||
|
||||
finalTitle.romaji ||
|
||||
'Unknown Title';
|
||||
}
|
||||
|
||||
return {
|
||||
...entry,
|
||||
title: finalTitle,
|
||||
poster: entry.poster || 'https://placehold.co/400x600?text=No+Cover',
|
||||
};
|
||||
}
|
||||
|
||||
let contentDetails: any | null = null;
|
||||
const id = entry.entry_id;
|
||||
const type = entry.entry_type;
|
||||
const ext = getExtension(entry.source);
|
||||
|
||||
try {
|
||||
if (type === 'ANIME') {
|
||||
if(entry.source === 'anilist') {
|
||||
const anime: any = await animeService.getAnimeById(id);
|
||||
contentDetails = {
|
||||
title: anime?.title.english || 'Unknown Anime Title',
|
||||
poster: anime?.coverImage?.extraLarge || '',
|
||||
total_episodes: anime?.episodes || 0,
|
||||
};
|
||||
}
|
||||
else{
|
||||
const anime: any = await animeService.getAnimeInfoExtension(ext, id.toString());
|
||||
|
||||
contentDetails = {
|
||||
title: anime?.title || 'Unknown Anime Title',
|
||||
poster: anime?.image || 'https://placehold.co/400x600?text=No+Cover',
|
||||
total_episodes: anime?.episodes || 0,
|
||||
};
|
||||
}
|
||||
|
||||
} else if (type === 'MANGA' || type === 'NOVEL') {
|
||||
if(entry.source === 'anilist') {
|
||||
const book: any = await booksService.getBookById(id);
|
||||
|
||||
contentDetails = {
|
||||
title: book?.title.english || 'Unknown Book Title',
|
||||
poster: book?.coverImage?.extraLarge || 'https://placehold.co/400x600?text=No+Cover',
|
||||
total_chapters: book?.chapters || book?.volumes * 10 || 0,
|
||||
};
|
||||
}
|
||||
else{
|
||||
const book: any = await booksService.getBookInfoExtension(ext, id.toString());
|
||||
|
||||
contentDetails = {
|
||||
title: book?.title || 'Unknown Book Title',
|
||||
poster: book?.image || '',
|
||||
total_chapters: book?.chapters || book?.volumes * 10 || 0,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
} catch {
|
||||
contentDetails = {
|
||||
title: 'Error Loading Details',
|
||||
poster: 'https://placehold.co/400x600?text=No+Cover',
|
||||
};
|
||||
}
|
||||
|
||||
let finalTitle = contentDetails?.title || 'Unknown Title';
|
||||
let finalPoster = contentDetails?.poster || 'https://placehold.co/400x600?text=No+Cover';
|
||||
|
||||
if (typeof finalTitle === 'object' && finalTitle !== null) {
|
||||
finalTitle =
|
||||
finalTitle.userPreferred ||
|
||||
finalTitle.english ||
|
||||
finalTitle.romaji ||
|
||||
'Unknown Title';
|
||||
}
|
||||
|
||||
return {
|
||||
...entry,
|
||||
title: finalTitle,
|
||||
poster: finalPoster,
|
||||
total_episodes: contentDetails?.total_episodes,
|
||||
total_chapters: contentDetails?.total_chapters,
|
||||
};
|
||||
});
|
||||
|
||||
return await Promise.all(enrichedListPromises);
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error al obtener la lista del usuario:", error);
|
||||
throw new Error("Error getting list.");
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteListEntry(
|
||||
userId: number,
|
||||
entryId: string | number,
|
||||
source: string
|
||||
) {
|
||||
|
||||
if (source === 'anilist') {
|
||||
const token = await getActiveAccessToken(userId);
|
||||
|
||||
if (token) {
|
||||
try {
|
||||
await aniListService.deleteAniListEntry(
|
||||
token,
|
||||
Number(entryId),
|
||||
);
|
||||
|
||||
return { success: true, external: true };
|
||||
} catch (err) {
|
||||
console.error("Error borrando en AniList:", err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const sql = `
|
||||
DELETE FROM ListEntry
|
||||
WHERE user_id = ? AND entry_id = ?;
|
||||
`;
|
||||
|
||||
const result = await run(sql, [userId, entryId], USER_DB);
|
||||
return { success: result.changes > 0, changes: result.changes, external: false };
|
||||
}
|
||||
|
||||
export async function getSingleListEntry(
|
||||
userId: number,
|
||||
entryId: string | number,
|
||||
source: string,
|
||||
entryType: string
|
||||
): Promise<any> {
|
||||
|
||||
const localSql = `
|
||||
SELECT * FROM ListEntry
|
||||
WHERE user_id = ? AND entry_id = ? AND source = ? AND entry_type = ?;
|
||||
`;
|
||||
|
||||
const localResult = await queryAll(
|
||||
localSql,
|
||||
[userId, entryId, source, entryType],
|
||||
USER_DB
|
||||
) as any[];
|
||||
|
||||
if (localResult.length > 0) {
|
||||
const entry = localResult[0];
|
||||
|
||||
const contentDetails: any =
|
||||
entryType === 'ANIME'
|
||||
? await animeService.getAnimeById(entryId).catch(() => null)
|
||||
: await booksService.getBookById(entryId).catch(() => null);
|
||||
|
||||
let finalTitle = contentDetails?.title || 'Unknown';
|
||||
let finalPoster = contentDetails?.coverImage?.extraLarge ||
|
||||
contentDetails?.image ||
|
||||
'https://placehold.co/400x600?text=No+Cover';
|
||||
|
||||
if (typeof finalTitle === 'object') {
|
||||
finalTitle =
|
||||
finalTitle.userPreferred ||
|
||||
finalTitle.english ||
|
||||
finalTitle.romaji ||
|
||||
'Unknown';
|
||||
}
|
||||
|
||||
return {
|
||||
...entry,
|
||||
title: finalTitle,
|
||||
poster: finalPoster,
|
||||
total_episodes: contentDetails?.episodes,
|
||||
total_chapters: contentDetails?.chapters,
|
||||
};
|
||||
}
|
||||
|
||||
if (source === 'anilist') {
|
||||
|
||||
const connected = await isConnected(userId);
|
||||
if (!connected) return null;
|
||||
|
||||
const sql = `
|
||||
SELECT access_token
|
||||
FROM UserIntegration
|
||||
WHERE user_id = ? AND platform = 'AniList';
|
||||
`;
|
||||
|
||||
const integration = await queryOne(sql, [userId], USER_DB) as any;
|
||||
if (!integration?.access_token) return null;
|
||||
if (entryType === 'NOVEL') {entryType = 'MANGA'}
|
||||
|
||||
const aniEntry = await aniListService.getSingleAniListEntry(
|
||||
integration.access_token,
|
||||
Number(entryId),
|
||||
entryType as any
|
||||
);
|
||||
|
||||
if (!aniEntry) return null;
|
||||
|
||||
const contentDetails: any =
|
||||
entryType === 'ANIME'
|
||||
? await animeService.getAnimeById(entryId).catch(() => null)
|
||||
: await booksService.getBookById(entryId).catch(() => null);
|
||||
|
||||
let finalTitle = contentDetails?.title || 'Unknown';
|
||||
let finalPoster = contentDetails?.coverImage?.extraLarge ||
|
||||
contentDetails?.image ||
|
||||
'https://placehold.co/400x600?text=No+Cover';
|
||||
|
||||
if (typeof finalTitle === 'object') {
|
||||
finalTitle =
|
||||
finalTitle.userPreferred ||
|
||||
finalTitle.english ||
|
||||
finalTitle.romaji ||
|
||||
'Unknown';
|
||||
}
|
||||
|
||||
return {
|
||||
user_id: userId,
|
||||
...aniEntry,
|
||||
title: finalTitle,
|
||||
poster: finalPoster,
|
||||
total_episodes: contentDetails?.episodes,
|
||||
total_chapters: contentDetails?.chapters,
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export async function getActiveAccessToken(userId: number): Promise<string | null> {
|
||||
const sql = `
|
||||
SELECT access_token, expires_at
|
||||
FROM UserIntegration
|
||||
WHERE user_id = ? AND platform = 'AniList';
|
||||
`;
|
||||
|
||||
try {
|
||||
const integration = await queryOne(sql, [userId], USER_DB) as any | null;
|
||||
|
||||
if (!integration) {
|
||||
return null;
|
||||
|
||||
}
|
||||
|
||||
const expiryDate = new Date(integration.expires_at);
|
||||
const now = new Date();
|
||||
|
||||
const fiveMinutes = 5 * 60 * 1000;
|
||||
|
||||
if (expiryDate.getTime() < (now.getTime() + fiveMinutes)) {
|
||||
|
||||
console.log(`AniList token for user ${userId} expired or near expiry.`);
|
||||
return null;
|
||||
}
|
||||
|
||||
return integration.access_token;
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error al verificar la integración de AniList:", error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export async function isConnected(userId: number): Promise<boolean> {
|
||||
const token = await getActiveAccessToken(userId);
|
||||
return !!token;
|
||||
}
|
||||
|
||||
export async function getUserListByFilter(
|
||||
userId: number,
|
||||
status?: string,
|
||||
entryType?: string
|
||||
): Promise<any> {
|
||||
|
||||
let sql = `
|
||||
SELECT * FROM ListEntry
|
||||
WHERE user_id = ?
|
||||
ORDER BY updated_at DESC;
|
||||
`;
|
||||
|
||||
const params: any[] = [userId];
|
||||
|
||||
try {
|
||||
const dbList = await queryAll(sql, params, USER_DB) as ListEntryData[];
|
||||
const connected = await isConnected(userId);
|
||||
|
||||
const statusMap: any = {
|
||||
watching: 'CURRENT',
|
||||
reading: 'CURRENT',
|
||||
completed: 'COMPLETED',
|
||||
paused: 'PAUSED',
|
||||
dropped: 'DROPPED',
|
||||
planning: 'PLANNING'
|
||||
};
|
||||
|
||||
const mappedStatus = status ? statusMap[status.toLowerCase()] : null;
|
||||
|
||||
let finalList: any[] = [];
|
||||
|
||||
const filteredLocal = dbList.filter((entry) => {
|
||||
if (mappedStatus && entry.status !== mappedStatus) return false;
|
||||
|
||||
if (entryType) {
|
||||
if (entryType === 'MANGA') {
|
||||
|
||||
if (!['MANGA', 'NOVEL'].includes(entry.entry_type)) return false;
|
||||
} else {
|
||||
if (entry.entry_type !== entryType) return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
let filteredAniList: any[] = [];
|
||||
|
||||
if (connected) {
|
||||
const anilistEntries = await aniListService.getUserAniList(userId);
|
||||
|
||||
filteredAniList = anilistEntries.filter((entry: any) => {
|
||||
if (mappedStatus && entry.status !== mappedStatus) return false;
|
||||
|
||||
if (entryType) {
|
||||
if (entryType === 'MANGA') {
|
||||
if (!['MANGA', 'NOVEL'].includes(entry.entry_type)) return false;
|
||||
} else {
|
||||
if (entry.entry_type !== entryType) return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
finalList = [...filteredAniList, ...filteredLocal];
|
||||
|
||||
const enrichedListPromises = finalList.map(async (entry) => {
|
||||
|
||||
if (entry.source === 'anilist') {
|
||||
let finalTitle = entry.title;
|
||||
|
||||
if (typeof finalTitle === 'object' && finalTitle !== null) {
|
||||
finalTitle =
|
||||
finalTitle.userPreferred ||
|
||||
finalTitle.english ||
|
||||
finalTitle.romaji ||
|
||||
'Unknown Title';
|
||||
}
|
||||
|
||||
return {
|
||||
...entry,
|
||||
title: finalTitle,
|
||||
poster: entry.poster || 'https://placehold.co/400x600?text=No+Cover',
|
||||
};
|
||||
}
|
||||
|
||||
let contentDetails: any | null = null;
|
||||
const id = entry.entry_id;
|
||||
const type = entry.entry_type;
|
||||
const ext = getExtension(entry.source);
|
||||
|
||||
try {
|
||||
if (type === 'ANIME') {
|
||||
const anime: any = await animeService.getAnimeInfoExtension(ext, id.toString());
|
||||
|
||||
contentDetails = {
|
||||
title: anime?.title || 'Unknown Anime Title',
|
||||
poster: anime?.image || '',
|
||||
total_episodes: anime?.episodes || 0,
|
||||
};
|
||||
|
||||
} else if (type === 'MANGA' || type === 'NOVEL') {
|
||||
const book: any = await booksService.getBookInfoExtension(ext, id.toString());
|
||||
|
||||
contentDetails = {
|
||||
title: book?.title || 'Unknown Book Title',
|
||||
poster: book?.image || '',
|
||||
total_chapters: book?.chapters || book?.volumes * 10 || 0,
|
||||
};
|
||||
}
|
||||
|
||||
} catch {
|
||||
contentDetails = {
|
||||
title: 'Error Loading Details',
|
||||
poster: 'https://placehold.co/400x600?text=No+Cover',
|
||||
};
|
||||
}
|
||||
|
||||
let finalTitle = contentDetails?.title || 'Unknown Title';
|
||||
let finalPoster = contentDetails?.poster || 'https://placehold.co/400x600?text=No+Cover';
|
||||
|
||||
if (typeof finalTitle === 'object' && finalTitle !== null) {
|
||||
finalTitle =
|
||||
finalTitle.userPreferred ||
|
||||
finalTitle.english ||
|
||||
finalTitle.romaji ||
|
||||
'Unknown Title';
|
||||
}
|
||||
|
||||
return {
|
||||
...entry,
|
||||
title: finalTitle,
|
||||
poster: finalPoster,
|
||||
total_episodes: contentDetails?.total_episodes,
|
||||
total_chapters: contentDetails?.total_chapters,
|
||||
};
|
||||
});
|
||||
|
||||
return await Promise.all(enrichedListPromises);
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error al filtrar la lista del usuario:", error);
|
||||
throw new Error("Error en la base de datos al obtener la lista filtrada.");
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user