ItsSkaiya/WaifuBoard
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

Compare commits

base: ItsSkaiya:v2.0.0
Branches Tags
ItsSkaiya:main
ItsSkaiya:v2.0.0 ItsSkaiya:v2.0.0-rc.2 ItsSkaiya:v2.0.0-rc.1 ItsSkaiya:v2.0.0-rc.0 ItsSkaiya:v1.6.4 ItsSkaiya:v1.6.3 ItsSkaiya:v1.6.2 ItsSkaiya:v1.6.1
..
compare: ItsSkaiya:df5f4d05631f6463c760ad9c162db2186137490c
Branches Tags
ItsSkaiya:main
ItsSkaiya:v2.0.0 ItsSkaiya:v2.0.0-rc.2 ItsSkaiya:v2.0.0-rc.1 ItsSkaiya:v2.0.0-rc.0 ItsSkaiya:v1.6.4 ItsSkaiya:v1.6.3 ItsSkaiya:v1.6.2 ItsSkaiya:v1.6.1

2 Commits
v2.0.0 ... df5f4d0563

Author SHA1 Message Date
lenafx
df5f4d0563 updated readme 2025-12-15 23:01:24 +01:00
lenafx
194c0d80e7 fix on the reader 2025-12-15 23:01:14 +01:00
272 changed files with 6850 additions and 57866 deletions
Expand all files Collapse all files

16
.gitignore vendored
View File

@@ -1,11 +1,5 @@
desktop/node_modules node_modules
desktop/electron electron
desktop/dist dist
desktop/.env .env
desktop/build build
docker/node_modules
docker/electron
docker/dist
docker/.env
docker/build

5
desktop/.gitignore vendored
View File

@@ -1,5 +0,0 @@
node_modules
electron
dist
.env
build

229
desktop/loading.html
View File

@@ -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
View File

@@ -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();
}
});

212
desktop/server.js
View File

@@ -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();

82
desktop/src/api/anilist/anilist.ts
View File

@@ -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;

342
desktop/src/api/anime/anime.controller.ts
View File

@@ -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 };
}
}

15
desktop/src/api/anime/anime.routes.ts
View File

@@ -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;

575
desktop/src/api/anime/anime.service.ts
View File

@@ -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(/&#39;/g, "'") // decodificar entidades HTML
.replace(/[^\w\s]/g, ' ') // convertir puntuación a espacios
.replace(/\s+/g, ' ') // normalizar espacios
.trim();
}

652
desktop/src/api/books/books.service.ts
View File

@@ -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(/&#39;/g, "'") // decodificar entidades HTML
.replace(/[^\w\s]/g, ' ') // convertir puntuación a espacios
.replace(/\s+/g, ' ') // normalizar espacios
.trim();
}

59
desktop/src/api/config/config.controller.ts
View File

@@ -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" };
}
}

11
desktop/src/api/config/config.routes.ts
View File

@@ -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;

155
desktop/src/api/extensions/extensions.controller.ts
View File

@@ -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}.` });
}
}

565
desktop/src/api/local/download.service.ts
View File

@@ -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;
}

485
desktop/src/api/local/local.controller.ts
View File

@@ -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' });
}
}

22
desktop/src/api/local/local.routes.ts
View 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;

513
desktop/src/api/local/local.service.ts
View File

@@ -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');
}

622
desktop/src/api/local/streaming.service.ts
View File

@@ -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
}));
}

115
desktop/src/api/proxy/proxy.controller.ts
View File

@@ -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();
}

9
desktop/src/api/proxy/proxy.routes.ts
View File

@@ -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;

175
desktop/src/api/proxy/proxy.service.ts
View File

@@ -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);
}
});
}

158
desktop/src/api/rooms/rooms.controller.ts
View File

@@ -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" });
}
}

11
desktop/src/api/rooms/rooms.routes.ts
View File

@@ -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;

296
desktop/src/api/rooms/rooms.service.ts
View File

@@ -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;
}

588
desktop/src/api/rooms/rooms.websocket.ts
View File

@@ -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`);
}

111
desktop/src/api/rooms/tunnel.manager.ts
View File

@@ -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;
}
}

97
desktop/src/api/rpc/rp.service.ts
View File

@@ -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);
}

297
desktop/src/api/types.ts
View File

@@ -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;
}

293
desktop/src/api/user/user.controller.ts
View File

@@ -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" });
}
}

186
desktop/src/api/user/user.service.ts
View File

@@ -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);
}

195
desktop/src/scripts/anime/animes.js
View File

@@ -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();
}

408
desktop/src/scripts/anime/entry.js
View File

@@ -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' });
};

2024
desktop/src/scripts/anime/player.js
View File

File diff suppressed because it is too large Load Diff

152
desktop/src/scripts/anime/subtitle-renderer.js
View File

@@ -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;

180
desktop/src/scripts/auth-guard.js
View File

@@ -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();
});
}

655
desktop/src/scripts/books/book.js
View File

@@ -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');

135
desktop/src/scripts/books/books.js
View File

@@ -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();
}

391
desktop/src/scripts/gallery/gallery.js
View File

@@ -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);
});

BIN
desktop/src/scripts/jassub/default.woff2
View File

Binary file not shown.

BIN
desktop/src/scripts/jassub/jassub-worker-modern.wasm
View File

Binary file not shown.

11
desktop/src/scripts/jassub/jassub-worker.js
View File

File diff suppressed because one or more lines are too long

BIN
desktop/src/scripts/jassub/jassub-worker.wasm
View File

Binary file not shown.

262
desktop/src/scripts/marketplace.js
View File

@@ -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);

811
desktop/src/scripts/profile.js
View File

@@ -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();

131
desktop/src/scripts/room-modal.js
View File

@@ -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;

2274
desktop/src/scripts/room.js
View File

File diff suppressed because it is too large Load Diff

213
desktop/src/scripts/settings.js
View File

@@ -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);
}

102
desktop/src/scripts/updateNotifier.js
View File

@@ -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);
}
}

85
desktop/src/scripts/utils/continue-watching-manager.js
View File

@@ -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;

171
desktop/src/scripts/utils/match-modal.js
View File

@@ -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
};
})();

131
desktop/src/shared/config.js
View File

@@ -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,
};

239
desktop/src/shared/extensions.js
View File

@@ -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
};

147
desktop/src/shared/headless.js
View File

@@ -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
};

146
desktop/src/views/views.routes.ts
View File

@@ -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;

139
desktop/views/404.html
View File

@@ -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>

314
desktop/views/anime/anime.html
View File

@@ -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>

141
desktop/views/anime/animes.html
View File

@@ -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>

164
desktop/views/books/book.html
View File

@@ -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>

116
desktop/views/books/books.html
View File

@@ -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>

66
desktop/views/components/list-modal.html
View File

@@ -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>

87
desktop/views/components/navbar.html
View File

@@ -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>

310
desktop/views/components/settings-modal.html
View File

@@ -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>

274
desktop/views/css/anime/anime.css
View File

@@ -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);
}

1003
desktop/views/css/anime/player.css
View File

File diff suppressed because it is too large Load Diff

228
desktop/views/css/books/book.css
View File

@@ -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;
}

625
desktop/views/css/books/reader.css
View File

@@ -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;
}

316
desktop/views/css/components/anilist-modal.css
View File

@@ -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 */
}

291
desktop/views/css/components/create-room.css
View File

@@ -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; }
}

282
desktop/views/css/components/match-modal.css
View File

@@ -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;
}
}

96
desktop/views/css/home.css
View File

@@ -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%);
}
}

944
desktop/views/css/profile.css
View File

@@ -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; }
}

853
desktop/views/css/room.css
View File

@@ -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;
}
}

864
desktop/views/css/users.css
View File

@@ -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;
}
}

74
desktop/views/gallery/gallery.html
View File

@@ -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>

65
desktop/views/gallery/image.html
View File

@@ -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>

78
desktop/views/marketplace.html
View File

@@ -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>

266
desktop/views/profile.html
View File

@@ -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>

300
desktop/views/room.html
View File

@@ -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>

8
docker/.dockerignore
View File

@@ -1,8 +0,0 @@
node_modules
electron
dist
.env
build
.gitignore
Dockerfile
.dockerignore

5
docker/.gitignore vendored
View File

@@ -1,5 +0,0 @@
node_modules
electron
dist
.env
build

27
docker/Dockerfile
View File

@@ -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
View File

File diff suppressed because it is too large Load Diff

42
docker/package.json
View File

@@ -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"
}
}

BIN
docker/public/assets/avatar.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 KiB

1
docker/public/assets/placeholder.svg
View File

@@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

BIN
docker/public/assets/waifuboards.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 123 KiB

202
docker/server.js
View File

@@ -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();

564
docker/src/api/anilist/anilist.service.ts
View File

@@ -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;
}
}

120
docker/src/api/books/books.controller.ts
View File

@@ -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" });
}
}

14
docker/src/api/books/books.routes.ts
View File

@@ -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;

59
docker/src/api/config/config.controller.ts
View File

@@ -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" };
}
}

11
docker/src/api/config/config.routes.ts
View File

@@ -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;

155
docker/src/api/extensions/extensions.controller.ts
View File

@@ -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}.` });
}
}

17
docker/src/api/extensions/extensions.routes.ts
View File

@@ -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;

126
docker/src/api/gallery/gallery.controller.ts
View File

@@ -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" });
}
}

13
docker/src/api/gallery/gallery.routes.ts
View File

@@ -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;

178
docker/src/api/gallery/gallery.service.ts
View File

@@ -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 });
}
});
});
}

166
docker/src/api/list/list.controller.ts
View File

@@ -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" });
}
}

12
docker/src/api/list/list.routes.ts
View File

@@ -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;

584
docker/src/api/list/list.service.ts
View File

@@ -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