Compare commits
2 Commits
main
...
df5f4d0563
| Author | SHA1 | Date | |
|---|---|---|---|
| df5f4d0563 | |||
| 194c0d80e7 |
16
.gitignore
vendored
16
.gitignore
vendored
@@ -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
|
|
||||||
|
|||||||
51
README.md
51
README.md
@@ -1,13 +1,11 @@
|
|||||||
# 🎀 WaifuBoard
|
# 🎀 WaifuBoard
|
||||||
|
|
||||||
**Lightweight hub for boorus, anime, manga & LN — powered by extensions, zero sources bundled.**
|
**Lightweight all-in-one app for boorus, anime, manga and light novels — no sources included, total freedom via extensions.**
|
||||||
|
|
||||||
<img src="assets/hero.png" alt="WaifuBoard Hero" width="100%"/>
|
<img src="assets/hero.png" alt="WaifuBoard Hero" width="100%"/>
|
||||||
<div align="center">
|
<div align="center">
|
||||||
|
|
||||||
[](https://waifuboard.app)
|
[](https://waifuboard.app)
|
||||||
[]()
|
|
||||||
[](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest)
|
|
||||||
[](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest)
|
[](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest)
|
||||||
[](https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions)
|
[](https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions)
|
||||||
|
|
||||||
@@ -15,22 +13,22 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## ✨ Key Features
|
## ✨ Features
|
||||||
|
|
||||||
### 🚀 Core
|
- Lightweight
|
||||||
* **Lightweight & fast**
|
- Discord Rich Presence
|
||||||
* **Watchparties** — instant public links
|
- Local lists & anilist integration
|
||||||
* **Extension-based sources** — total freedom
|
- Multi user support
|
||||||
* **Tracking** with local lists + **AniList**
|
- Server version (Coming soon!)
|
||||||
* **Discord Rich Presence**
|
- Fully open-source & community-driven
|
||||||
* **Multi-user profiles**
|
|
||||||
* **Local library**
|
|
||||||
|
|
||||||
## 🖼️ Preview
|
> ⚠️ **Note**
|
||||||
|
>
|
||||||
|
> Release candidates may contain breaking changes and unresolved bugs.
|
||||||
|
> Expect frequent updates and major changes between versions.
|
||||||
|
|
||||||
A quick look at WaifuBoard in action.
|
## 🖼️ Gallery
|
||||||
|
|
||||||
### 👥 Multi-User Profiles
|
### 👥 Multi-User Profiles
|
||||||
<img src="assets/users.gif" alt="Multi-user profiles" width="100%"/>
|
<img src="assets/users.gif" alt="Multi-user profiles" width="100%"/>
|
||||||
@@ -40,22 +38,26 @@ A quick look at WaifuBoard in action.
|
|||||||
#### Manga
|
#### Manga
|
||||||
<img src="assets/manga.png" alt="Manga reader" width="100%"/>
|
<img src="assets/manga.png" alt="Manga reader" width="100%"/>
|
||||||
|
|
||||||
|
#### Manhwa
|
||||||
|
<img src="assets/manhwa.png" alt="Manhwa reader" width="100%"/>
|
||||||
|
|
||||||
#### Light Novel
|
#### Light Novel
|
||||||
<img src="assets/novel.gif" alt="Light novel reader" width="100%"/>
|
<img src="assets/novel.gif" alt="Light novel reader" width="100%"/>
|
||||||
|
|
||||||
### 📅 Schedule & Tracking
|
### 📅 Schedule & Tracking
|
||||||
<img src="assets/schedule.png" alt="Anime schedule" width="100%"/>
|
<img src="assets/schedule.png" alt="Anime schedule" width="100%"/>
|
||||||
|
|
||||||
|
### 📚 Lists (Local & AniList)
|
||||||
|
<img src="assets/list.gif" alt="Lists and tracking" width="100%"/>
|
||||||
|
|
||||||
|
|
||||||
## 🖥️ Download & Platform Support
|
## 🖥️ Download & Platform Support
|
||||||
|
|
||||||
| Platform | Status | Link |
|
| Platform | Status | Link |
|
||||||
|----------|-----------------|-----------------------------------------------------------------------------------|
|
|------------|-----------------|-----------------------------------------------------------|
|
||||||
| Windows | ✅ Available now | [Latest Release](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest) |
|
| Windows | ✅ Available now | [Latest Release](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest) |
|
||||||
| Docker | ✅ Available now | WIP docs |
|
| Linux | ⏳ Coming soon | — |
|
||||||
| Android | ✅ Available now | [Latest Release](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest) |
|
| macOS | ⏳ Coming soon | — |
|
||||||
| Linux | ⏳ Coming soon | — |
|
|
||||||
| macOS | ⏳ Coming soon | — |
|
|
||||||
|
|
||||||
## 📦 Extensions & Marketplace
|
## 📦 Extensions & Marketplace
|
||||||
|
|
||||||
@@ -66,8 +68,9 @@ WaifuBoard ships empty. **You decide exactly what sources you want.**
|
|||||||
|
|
||||||
## ⚠️ Legal Disclaimer
|
## ⚠️ Legal Disclaimer
|
||||||
|
|
||||||
**WaifuBoard does not host, store, or distribute any content.** All material is retrieved in real time through third-party extensions installed by the user or from the user's local storage.
|
**WaifuBoard does not host, store, or distribute any content.
|
||||||
**You are fully responsible for ensuring that the sources you access comply with the laws of your region.**
|
All material is retrieved in real time through third-party extensions installed by the user.
|
||||||
|
You are fully responsible for ensuring that the sources you access comply with the laws of your region.**
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
BIN
assets/hero.png
BIN
assets/hero.png
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 1.8 MiB |
BIN
assets/list.gif
Normal file
BIN
assets/list.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 227 KiB |
5
desktop/.gitignore
vendored
5
desktop/.gitignore
vendored
@@ -1,5 +0,0 @@
|
|||||||
node_modules
|
|
||||||
electron
|
|
||||||
dist
|
|
||||||
.env
|
|
||||||
build
|
|
||||||
@@ -1,229 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Waifuboard</title>
|
|
||||||
<style>
|
|
||||||
:root {
|
|
||||||
--color-bg: #09090b;
|
|
||||||
--color-primary: #8b5cf6;
|
|
||||||
--color-text: #ffffff;
|
|
||||||
--color-text-dim: #a1a1aa;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
background: linear-gradient(135deg, #18181b 0%, var(--color-bg) 100%);
|
|
||||||
color: var(--color-text);
|
|
||||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 400px;
|
|
||||||
height: 300px;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
border-radius: 16px;
|
|
||||||
-webkit-app-region: drag;
|
|
||||||
}
|
|
||||||
|
|
||||||
body::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
border-radius: 16px;
|
|
||||||
box-shadow: 0 0 0 1px rgba(255,255,255,0.05),
|
|
||||||
0 20px 40px rgba(0,0,0,0.6);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
-webkit-user-drag: none;
|
|
||||||
user-drag: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-particle {
|
|
||||||
position: absolute;
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-radius: 50%;
|
|
||||||
opacity: 0;
|
|
||||||
animation: particleFloat 8s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-particle:nth-child(1) {
|
|
||||||
width: 4px;
|
|
||||||
height: 4px;
|
|
||||||
top: 20%;
|
|
||||||
left: 10%;
|
|
||||||
animation-delay: 0s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-particle:nth-child(2) {
|
|
||||||
width: 6px;
|
|
||||||
height: 6px;
|
|
||||||
top: 60%;
|
|
||||||
left: 80%;
|
|
||||||
animation-delay: 2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-particle:nth-child(3) {
|
|
||||||
width: 3px;
|
|
||||||
height: 3px;
|
|
||||||
top: 40%;
|
|
||||||
left: 20%;
|
|
||||||
animation-delay: 4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-particle:nth-child(4) {
|
|
||||||
width: 5px;
|
|
||||||
height: 5px;
|
|
||||||
top: 70%;
|
|
||||||
left: 70%;
|
|
||||||
animation-delay: 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.splash-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 28px;
|
|
||||||
width: 100%;
|
|
||||||
animation: fadeIn 0.5s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-container.horizontal {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 14px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-icon {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
object-fit: contain;
|
|
||||||
animation: iconPulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-name {
|
|
||||||
font-size: 25px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: -0.02em;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
color: #ffffff;
|
|
||||||
line-height: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner {
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
border: 5px solid rgba(139, 92, 246, 0.2);
|
|
||||||
border-top: 5px solid var(--color-primary);
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-text {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #a1a1aa;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes iconPulse {
|
|
||||||
0%, 100% {
|
|
||||||
transform: scale(1);
|
|
||||||
filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.4));
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: scale(1.05);
|
|
||||||
filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.6));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes particleFloat {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(0) scale(0);
|
|
||||||
}
|
|
||||||
25% {
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 0.6;
|
|
||||||
transform: translateY(-100px) scale(1);
|
|
||||||
}
|
|
||||||
75% {
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-200px) scale(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="bg-particle"></div>
|
|
||||||
<div class="bg-particle"></div>
|
|
||||||
<div class="bg-particle"></div>
|
|
||||||
<div class="bg-particle"></div>
|
|
||||||
|
|
||||||
<div class="splash-container">
|
|
||||||
<div class="brand-container horizontal">
|
|
||||||
<img src="public/assets/waifuboards.ico" alt="Waifuboard Logo" class="brand-icon">
|
|
||||||
<h1 class="brand-name">Waifuboard</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="spinner-wrapper">
|
|
||||||
<div class="spinner"></div>
|
|
||||||
<span class="loading-text">Loading</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
144
desktop/main.js
144
desktop/main.js
@@ -1,144 +0,0 @@
|
|||||||
const { app, BrowserWindow, ipcMain } = require('electron');
|
|
||||||
const { fork } = require('child_process');
|
|
||||||
const path = require('path');
|
|
||||||
const log = require('electron-log');
|
|
||||||
|
|
||||||
const sessionId = new Date().toISOString().replace(/[:.]/g, '-');
|
|
||||||
log.transports.file.resolvePath = () => path.join(app.getPath('userData'), 'logs', `${sessionId}.log`);
|
|
||||||
|
|
||||||
log.transports.file.level = 'info';
|
|
||||||
log.format = '[{y}-{m}-{d} {h}:{i}:{s}.{ms}] [{level}] {text}';
|
|
||||||
|
|
||||||
let win;
|
|
||||||
let backend;
|
|
||||||
const net = require('net');
|
|
||||||
|
|
||||||
function waitForServer(port, host = '127.0.0.1', timeout = 30000) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const start = Date.now();
|
|
||||||
|
|
||||||
const check = () => {
|
|
||||||
const socket = new net.Socket();
|
|
||||||
|
|
||||||
socket
|
|
||||||
.once('connect', () => {
|
|
||||||
socket.destroy();
|
|
||||||
resolve();
|
|
||||||
})
|
|
||||||
.once('error', () => {
|
|
||||||
socket.destroy();
|
|
||||||
if (Date.now() - start > timeout) {
|
|
||||||
reject(new Error('Backend timeout'));
|
|
||||||
} else {
|
|
||||||
setTimeout(check, 200);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.connect(port, host);
|
|
||||||
};
|
|
||||||
|
|
||||||
check();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function startBackend() {
|
|
||||||
backend = fork(path.join(__dirname, 'server.js'), [], {
|
|
||||||
stdio: ['pipe', 'pipe', 'pipe', 'ipc'],
|
|
||||||
env: {
|
|
||||||
...process.env,
|
|
||||||
IS_PACKAGED: app.isPackaged ? 'true' : 'false'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
log.info('Starting backend process...');
|
|
||||||
|
|
||||||
backend.stdout.on('data', (data) => {
|
|
||||||
log.info(`[Backend]: ${data.toString().trim()}`);
|
|
||||||
});
|
|
||||||
|
|
||||||
backend.stderr.on('data', (data) => {
|
|
||||||
log.error(`[Backend ERROR]: ${data.toString().trim()}`);
|
|
||||||
});
|
|
||||||
|
|
||||||
backend.on('exit', (code) => {
|
|
||||||
log.warn(`Backend process exited with code: ${code}`);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
let splash;
|
|
||||||
|
|
||||||
function createSplash() {
|
|
||||||
splash = new BrowserWindow({
|
|
||||||
width: 400,
|
|
||||||
height: 300,
|
|
||||||
frame: false,
|
|
||||||
transparent: false,
|
|
||||||
alwaysOnTop: true,
|
|
||||||
resizable: false,
|
|
||||||
hasShadow: false,
|
|
||||||
backgroundColor: '#00000000'
|
|
||||||
});
|
|
||||||
|
|
||||||
splash.loadFile('loading.html');
|
|
||||||
}
|
|
||||||
|
|
||||||
function createWindow() {
|
|
||||||
win = new BrowserWindow({
|
|
||||||
width: 1200,
|
|
||||||
height: 800,
|
|
||||||
frame: false,
|
|
||||||
titleBarStyle: "hidden",
|
|
||||||
webPreferences: {
|
|
||||||
preload: path.join(__dirname, "preload.js"),
|
|
||||||
nodeIntegration: false,
|
|
||||||
contextIsolation: true
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
win.setMenu(null);
|
|
||||||
win.maximize();
|
|
||||||
|
|
||||||
win.loadURL('http://localhost:54322');
|
|
||||||
|
|
||||||
win.on('closed', () => {
|
|
||||||
win = null;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
ipcMain.on("win:minimize", () => win.minimize());
|
|
||||||
ipcMain.on("win:maximize", () => {
|
|
||||||
if (win.isMaximized()) {
|
|
||||||
win.unmaximize();
|
|
||||||
} else {
|
|
||||||
win.maximize();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
ipcMain.on("win:close", () => win.close());
|
|
||||||
|
|
||||||
process.on('uncaughtException', (err) => {
|
|
||||||
log.error('Critical unhandled error in Main:', err);
|
|
||||||
});
|
|
||||||
|
|
||||||
app.whenReady().then(async () => {
|
|
||||||
startBackend();
|
|
||||||
createSplash();
|
|
||||||
try {
|
|
||||||
await waitForServer(54322);
|
|
||||||
createWindow();
|
|
||||||
splash.close();
|
|
||||||
} catch (e) {
|
|
||||||
splash.close();
|
|
||||||
log.error(e);
|
|
||||||
app.quit();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
app.on('window-all-closed', () => {
|
|
||||||
log.info('Closing all windows...');
|
|
||||||
if (backend) {
|
|
||||||
backend.kill();
|
|
||||||
log.info('Backend process terminated.');
|
|
||||||
}
|
|
||||||
if (process.platform !== 'darwin') {
|
|
||||||
app.quit();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@@ -1,212 +0,0 @@
|
|||||||
const fastify = require("fastify")({
|
|
||||||
logger: { level: "error" },
|
|
||||||
});
|
|
||||||
|
|
||||||
const path = require("path");
|
|
||||||
const jwt = require("jsonwebtoken");
|
|
||||||
const cron = require("node-cron");
|
|
||||||
const { initHeadless } = require("./electron/shared/headless");
|
|
||||||
const { initDatabase } = require("./electron/shared/database");
|
|
||||||
const { loadExtensions } = require("./electron/shared/extensions");
|
|
||||||
const { ensureConfigFile } = require("./electron/shared/config");
|
|
||||||
const { init } = require("./electron/api/rpc/rpc.controller");
|
|
||||||
const {refreshTrendingAnime, refreshTopAiringAnime} = require("./electron/api/anime/anime.service");
|
|
||||||
const {refreshPopularBooks, refreshTrendingBooks} = require("./electron/api/books/books.service");
|
|
||||||
|
|
||||||
const dotenv = require("dotenv");
|
|
||||||
const isPackaged = process.env.IS_PACKAGED === "true";
|
|
||||||
const envPath = isPackaged
|
|
||||||
? path.join(process.resourcesPath, ".env")
|
|
||||||
: path.join(__dirname, ".env");
|
|
||||||
|
|
||||||
dotenv.config({ path: envPath, override: false });
|
|
||||||
const viewsRoutes = require("./electron/views/views.routes");
|
|
||||||
const animeRoutes = require("./electron/api/anime/anime.routes");
|
|
||||||
const booksRoutes = require("./electron/api/books/books.routes");
|
|
||||||
const proxyRoutes = require("./electron/api/proxy/proxy.routes");
|
|
||||||
const extensionsRoutes = require("./electron/api/extensions/extensions.routes");
|
|
||||||
const galleryRoutes = require("./electron/api/gallery/gallery.routes");
|
|
||||||
const rpcRoutes = require("./electron/api/rpc/rpc.routes");
|
|
||||||
const userRoutes = require("./electron/api/user/user.routes");
|
|
||||||
const listRoutes = require("./electron/api/list/list.routes");
|
|
||||||
const anilistRoute = require("./electron/api/anilist/anilist");
|
|
||||||
const localRoutes = require("./electron/api/local/local.routes");
|
|
||||||
const configRoutes = require("./electron/api/config/config.routes");
|
|
||||||
const roomRoutes = require("./electron/api/rooms/rooms.routes");
|
|
||||||
const { setupRoomWebSocket } = require("./electron/api/rooms/rooms.websocket");
|
|
||||||
|
|
||||||
const { getConfig } = require('./electron/shared/config');
|
|
||||||
const { values } = getConfig();
|
|
||||||
const jwtSecret = values.server?.jwt_secret;
|
|
||||||
|
|
||||||
fastify.addHook("preHandler", async (request, reply) => {
|
|
||||||
const auth = request.headers.authorization;
|
|
||||||
if (!auth) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const token = auth.replace("Bearer ", "");
|
|
||||||
request.user = jwt.verify(token, jwtSecret);
|
|
||||||
} catch (e) {
|
|
||||||
return reply.code(401).send({ error: "Invalid token" });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const roomService = require('./electron/api/rooms/rooms.service');
|
|
||||||
|
|
||||||
fastify.addHook('onRequest', async (req, reply) => {
|
|
||||||
const isTunnel =
|
|
||||||
!!req.headers['cf-connecting-ip'] ||
|
|
||||||
!!req.headers['cf-ray'];
|
|
||||||
|
|
||||||
if (!isTunnel) return;
|
|
||||||
|
|
||||||
if (req.url.startsWith('/public/') ||
|
|
||||||
req.url.startsWith('/views/') ||
|
|
||||||
req.url.startsWith('/src/')) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (req.url.startsWith('/room')) {
|
|
||||||
const urlParams = new URLSearchParams(req.url.split('?')[1]);
|
|
||||||
const roomId = urlParams.get('id');
|
|
||||||
|
|
||||||
if (!roomId) {
|
|
||||||
return reply.code(404).send({ error: 'Room ID required' });
|
|
||||||
}
|
|
||||||
|
|
||||||
const room = roomService.getRoom(roomId);
|
|
||||||
if (!room || room.exposed !== true) {
|
|
||||||
return reply.code(404).send({ error: 'Room not found' });
|
|
||||||
}
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const wsMatch = req.url.match(/^\/ws\/room\/([a-f0-9]+)/);
|
|
||||||
if (wsMatch) {
|
|
||||||
const roomId = wsMatch[1];
|
|
||||||
const room = roomService.getRoom(roomId);
|
|
||||||
|
|
||||||
if (!room || room.exposed !== true) {
|
|
||||||
return reply.code(404).send({ error: 'Room not found' });
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const apiMatch = req.url.match(/^\/api\/rooms\/([a-f0-9]+)/);
|
|
||||||
if (apiMatch) {
|
|
||||||
const roomId = apiMatch[1];
|
|
||||||
const room = roomService.getRoom(roomId);
|
|
||||||
|
|
||||||
if (!room || room.exposed !== true) {
|
|
||||||
return reply.code(404).send({ error: 'Room not found' });
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const allowedEndpoints = [
|
|
||||||
'/api/watch/stream',
|
|
||||||
'/api/proxy',
|
|
||||||
'/api/extensions',
|
|
||||||
'/api/search'
|
|
||||||
];
|
|
||||||
|
|
||||||
for (const endpoint of allowedEndpoints) {
|
|
||||||
if (req.url.startsWith(endpoint)) {
|
|
||||||
console.log('[Tunnel] ✓ Allowing utility endpoint:', endpoint);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return reply.code(404).send({ error: 'Not found' });
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.register(require("@fastify/static"), {
|
|
||||||
root: path.join(__dirname, "public"),
|
|
||||||
prefix: "/public/",
|
|
||||||
decorateReply: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.register(require("@fastify/static"), {
|
|
||||||
root: path.join(__dirname, "views"),
|
|
||||||
prefix: "/views/",
|
|
||||||
decorateReply: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.register(require("@fastify/static"), {
|
|
||||||
root: path.join(__dirname, "src", "scripts"),
|
|
||||||
prefix: "/src/scripts/",
|
|
||||||
decorateReply: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.register(viewsRoutes);
|
|
||||||
fastify.register(animeRoutes, { prefix: "/api" });
|
|
||||||
fastify.register(booksRoutes, { prefix: "/api" });
|
|
||||||
fastify.register(proxyRoutes, { prefix: "/api" });
|
|
||||||
fastify.register(extensionsRoutes, { prefix: "/api" });
|
|
||||||
fastify.register(galleryRoutes, { prefix: "/api" });
|
|
||||||
fastify.register(rpcRoutes, { prefix: "/api" });
|
|
||||||
fastify.register(userRoutes, { prefix: "/api" });
|
|
||||||
fastify.register(anilistRoute, { prefix: "/api" });
|
|
||||||
fastify.register(listRoutes, { prefix: "/api" });
|
|
||||||
fastify.register(localRoutes, { prefix: "/api" });
|
|
||||||
fastify.register(configRoutes, { prefix: "/api" });
|
|
||||||
fastify.register(roomRoutes, { prefix: "/api" });
|
|
||||||
|
|
||||||
const sleep = ms => new Promise(r => setTimeout(r, ms));
|
|
||||||
|
|
||||||
const start = async () => {
|
|
||||||
try {
|
|
||||||
await fastify.register(require('@fastify/websocket'));
|
|
||||||
ensureConfigFile()
|
|
||||||
initDatabase("anilist");
|
|
||||||
initDatabase("favorites");
|
|
||||||
initDatabase("cache");
|
|
||||||
initDatabase("userdata");
|
|
||||||
initDatabase("local_library");
|
|
||||||
init();
|
|
||||||
setupRoomWebSocket(fastify);
|
|
||||||
|
|
||||||
const refreshAll = async () => {
|
|
||||||
await refreshTrendingAnime();
|
|
||||||
await sleep(300);
|
|
||||||
await refreshTopAiringAnime();
|
|
||||||
await sleep(300);
|
|
||||||
await refreshTrendingBooks();
|
|
||||||
await sleep(300);
|
|
||||||
await refreshPopularBooks();
|
|
||||||
};
|
|
||||||
|
|
||||||
const job = cron.schedule("*/30 * * * *", async () => {
|
|
||||||
try {
|
|
||||||
await refreshAll();
|
|
||||||
console.log("cache refreshed");
|
|
||||||
} catch (e) {
|
|
||||||
console.error("refresh failed", e);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
await loadExtensions();
|
|
||||||
await initHeadless();
|
|
||||||
|
|
||||||
await fastify.listen({ port: 54322, host: "0.0.0.0" });
|
|
||||||
refreshAll().catch(e =>
|
|
||||||
console.error("initial refresh failed", e)
|
|
||||||
);
|
|
||||||
console.log(`Server running at http://localhost:54322`);
|
|
||||||
|
|
||||||
const shutdown = async () => {
|
|
||||||
job.stop();
|
|
||||||
await fastify.close();
|
|
||||||
process.exit(0);
|
|
||||||
};
|
|
||||||
|
|
||||||
process.on("SIGINT", shutdown);
|
|
||||||
process.on("SIGTERM", shutdown);
|
|
||||||
} catch (err) {
|
|
||||||
fastify.log.error(err);
|
|
||||||
process.exit(1);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
start();
|
|
||||||
@@ -1,82 +0,0 @@
|
|||||||
import { FastifyInstance } from "fastify";
|
|
||||||
import { run } from "../../shared/database";
|
|
||||||
|
|
||||||
async function anilist(fastify: FastifyInstance) {
|
|
||||||
fastify.post("/anilist/store", async (request, reply) => {
|
|
||||||
try {
|
|
||||||
const {
|
|
||||||
userId,
|
|
||||||
accessToken,
|
|
||||||
tokenType = "Bearer",
|
|
||||||
expiresIn
|
|
||||||
} = request.body as {
|
|
||||||
userId: number;
|
|
||||||
accessToken: string;
|
|
||||||
tokenType?: string;
|
|
||||||
expiresIn?: number;
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!userId || !accessToken) {
|
|
||||||
return reply.status(400).send({ error: "Faltan datos (User ID o Token)" });
|
|
||||||
}
|
|
||||||
|
|
||||||
// 1. Verificar que el token es válido consultando a AniList
|
|
||||||
const userRes = await fetch("https://graphql.anilist.co", {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
Authorization: `${tokenType} ${accessToken}`
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
query: `query { Viewer { id } }`
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!userRes.ok) {
|
|
||||||
return reply.status(401).send({ error: "Token de AniList inválido o expirado" });
|
|
||||||
}
|
|
||||||
|
|
||||||
const userData = await userRes.json();
|
|
||||||
const anilistUserId = userData?.data?.Viewer?.id;
|
|
||||||
|
|
||||||
if (!anilistUserId) {
|
|
||||||
return reply.status(500).send({ error: "No se pudo obtener el ID de usuario de AniList" });
|
|
||||||
}
|
|
||||||
|
|
||||||
const expiresAt = new Date(
|
|
||||||
Date.now() + 365 * 24 * 60 * 60 * 1000
|
|
||||||
).toISOString();
|
|
||||||
|
|
||||||
await run(
|
|
||||||
`
|
|
||||||
INSERT INTO UserIntegration
|
|
||||||
(user_id, platform, access_token, refresh_token, token_type, anilist_user_id, expires_at)
|
|
||||||
VALUES (?, ?, ?, ?, ?, ?, ?)
|
|
||||||
ON CONFLICT(user_id) DO UPDATE SET
|
|
||||||
access_token = excluded.access_token,
|
|
||||||
refresh_token = excluded.refresh_token,
|
|
||||||
token_type = excluded.token_type,
|
|
||||||
anilist_user_id = excluded.anilist_user_id,
|
|
||||||
expires_at = excluded.expires_at
|
|
||||||
`,
|
|
||||||
[
|
|
||||||
userId,
|
|
||||||
"AniList",
|
|
||||||
accessToken,
|
|
||||||
"", // <- aquí
|
|
||||||
tokenType,
|
|
||||||
anilistUserId,
|
|
||||||
expiresAt
|
|
||||||
],
|
|
||||||
"userdata"
|
|
||||||
);
|
|
||||||
|
|
||||||
return reply.send({ ok: true, anilistUserId });
|
|
||||||
} catch (e) {
|
|
||||||
console.error("AniList error:", e);
|
|
||||||
return reply.status(500).send({ error: "Error interno del servidor al guardar AniList" });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export default anilist;
|
|
||||||
@@ -1,373 +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';
|
|
||||||
|
|
||||||
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 { q, ...rest } = req.query;
|
|
||||||
|
|
||||||
const ext = getExtension(extensionName);
|
|
||||||
if (!ext) return { results: [] };
|
|
||||||
|
|
||||||
const results = await animeService.searchAnimeInExtension(
|
|
||||||
ext,
|
|
||||||
extensionName,
|
|
||||||
{
|
|
||||||
query: q || '',
|
|
||||||
filters: Object.keys(rest).length ? rest : undefined
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
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 };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function searchAdvanced(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const {
|
|
||||||
q,
|
|
||||||
type = 'ANIME',
|
|
||||||
year,
|
|
||||||
season,
|
|
||||||
status,
|
|
||||||
format,
|
|
||||||
genre,
|
|
||||||
minScore,
|
|
||||||
sort
|
|
||||||
} = req.query as any;
|
|
||||||
|
|
||||||
const results = await animeService.searchMediaAdvanced(q, type, {
|
|
||||||
year, season, status, format, genre, minScore, sort
|
|
||||||
});
|
|
||||||
|
|
||||||
return { results };
|
|
||||||
} catch (e) {
|
|
||||||
return { results: [] };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,16 +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/advanced', controller.searchAdvanced);
|
|
||||||
fastify.get('/search/:extension', controller.searchInExtension);
|
|
||||||
fastify.get('/watch/stream', controller.getWatchStream);
|
|
||||||
fastify.post('/watch/mpv', controller.openInMPV);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default animeRoutes;
|
|
||||||
@@ -1,671 +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 || !data.Media.title) {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
type AdvancedFilters = {
|
|
||||||
year?: string;
|
|
||||||
season?: string;
|
|
||||||
status?: string;
|
|
||||||
format?: string;
|
|
||||||
genre?: string;
|
|
||||||
minScore?: string;
|
|
||||||
sort?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export async function searchMediaAdvanced(
|
|
||||||
query: string,
|
|
||||||
type: 'ANIME' | 'MANGA',
|
|
||||||
filters: AdvancedFilters
|
|
||||||
): Promise<Anime[]> {
|
|
||||||
|
|
||||||
const gql = `
|
|
||||||
query (
|
|
||||||
$type: MediaType
|
|
||||||
$search: String
|
|
||||||
$seasonYear: Int
|
|
||||||
$season: MediaSeason
|
|
||||||
$status: MediaStatus
|
|
||||||
$format: MediaFormat
|
|
||||||
$genres: [String]
|
|
||||||
$minScore: Int
|
|
||||||
$sort: [MediaSort]
|
|
||||||
) {
|
|
||||||
Page(page: 1, perPage: 20) {
|
|
||||||
media(
|
|
||||||
type: $type
|
|
||||||
search: $search
|
|
||||||
seasonYear: $seasonYear
|
|
||||||
season: $season
|
|
||||||
status: $status
|
|
||||||
format: $format
|
|
||||||
genre_in: $genres
|
|
||||||
averageScore_greater: $minScore
|
|
||||||
sort: $sort
|
|
||||||
isAdult: false
|
|
||||||
) {
|
|
||||||
${MEDIA_FIELDS}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const vars = {
|
|
||||||
type,
|
|
||||||
search: query || undefined,
|
|
||||||
seasonYear: filters.year ? Number(filters.year) : undefined,
|
|
||||||
season: filters.season || undefined,
|
|
||||||
status: filters.status || undefined,
|
|
||||||
format: filters.format || undefined,
|
|
||||||
genres: filters.genre ? [filters.genre] : undefined,
|
|
||||||
minScore: filters.minScore ? Number(filters.minScore) : undefined,
|
|
||||||
sort: filters.sort ? [filters.sort] : ['POPULARITY_DESC']
|
|
||||||
};
|
|
||||||
|
|
||||||
const data = await fetchAniList(gql, vars);
|
|
||||||
return data?.Page?.media || [];
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
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 &&
|
|
||||||
match.title &&
|
|
||||||
match.title !== "Unknown"
|
|
||||||
) {
|
|
||||||
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,
|
|
||||||
searchObj: { query: string; filters?: any }
|
|
||||||
) {
|
|
||||||
if (!ext) return [];
|
|
||||||
|
|
||||||
if (ext.type === 'anime-board' && ext.search) {
|
|
||||||
try {
|
|
||||||
const payload: any = {
|
|
||||||
query: searchObj.query,
|
|
||||||
media: {
|
|
||||||
romajiTitle: searchObj.query,
|
|
||||||
englishTitle: searchObj.query,
|
|
||||||
startDate: { year: 0, month: 0, day: 0 }
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (searchObj.filters) {
|
|
||||||
payload.filters = searchObj.filters;
|
|
||||||
}
|
|
||||||
|
|
||||||
const matches = await ext.search(payload);
|
|
||||||
|
|
||||||
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: '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
|
|
||||||
}));
|
|
||||||
|
|
||||||
if (result.length > 0) {
|
|
||||||
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");
|
|
||||||
}
|
|
||||||
|
|
||||||
let streamData: StreamData;
|
|
||||||
|
|
||||||
try {
|
|
||||||
streamData = await extension.findEpisodeServer(targetEp, server, category);
|
|
||||||
} catch (e) {
|
|
||||||
console.error(`[${providerName}] findEpisodeServer failed`, e);
|
|
||||||
throw e;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (
|
|
||||||
!streamData ||
|
|
||||||
!Array.isArray(streamData.videoSources) ||
|
|
||||||
streamData.videoSources.length === 0
|
|
||||||
) {
|
|
||||||
throw new Error("Empty stream data");
|
|
||||||
}
|
|
||||||
|
|
||||||
await setCache(cacheKey, streamData, CACHE_TTL_MS);
|
|
||||||
return streamData;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function similarity(s1: string, s2: string): number {
|
|
||||||
const str1 = normalize(s1);
|
|
||||||
const str2 = normalize(s2);
|
|
||||||
|
|
||||||
const longer = str1.length > str2.length ? str1 : str2;
|
|
||||||
const shorter = str1.length > str2.length ? str2 : str1;
|
|
||||||
|
|
||||||
if (longer.length === 0) return 1.0;
|
|
||||||
|
|
||||||
const editDistance = levenshteinDistance(longer, shorter);
|
|
||||||
return (longer.length - editDistance) / longer.length;
|
|
||||||
}
|
|
||||||
|
|
||||||
function levenshteinDistance(s1: string, s2: string): number {
|
|
||||||
const costs: number[] = [];
|
|
||||||
for (let i = 0; i <= s1.length; i++) {
|
|
||||||
let lastValue = i;
|
|
||||||
for (let j = 0; j <= s2.length; j++) {
|
|
||||||
if (i === 0) {
|
|
||||||
costs[j] = j;
|
|
||||||
} else if (j > 0) {
|
|
||||||
let newValue = costs[j - 1];
|
|
||||||
if (s1.charAt(i - 1) !== s2.charAt(j - 1)) {
|
|
||||||
newValue = Math.min(Math.min(newValue, lastValue), costs[j]) + 1;
|
|
||||||
}
|
|
||||||
costs[j - 1] = lastValue;
|
|
||||||
lastValue = newValue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (i > 0) costs[s2.length] = lastValue;
|
|
||||||
}
|
|
||||||
return costs[s2.length];
|
|
||||||
}
|
|
||||||
|
|
||||||
function normalize(str: string): string {
|
|
||||||
return str
|
|
||||||
.toLowerCase()
|
|
||||||
.replace(/'/g, "'") // decodificar entidades HTML
|
|
||||||
.replace(/[^\w\s]/g, ' ') // convertir puntuación a espacios
|
|
||||||
.replace(/\s+/g, ' ') // normalizar espacios
|
|
||||||
.trim();
|
|
||||||
}
|
|
||||||
@@ -1,128 +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 { q, ...rawFilters } = req.query;
|
|
||||||
|
|
||||||
const ext = getExtension(extensionName);
|
|
||||||
if (!ext) return { results: [] };
|
|
||||||
|
|
||||||
const results = await booksService.searchBooksInExtension(
|
|
||||||
ext,
|
|
||||||
extensionName,
|
|
||||||
{
|
|
||||||
query: q || '',
|
|
||||||
filters: rawFilters
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
return { results };
|
|
||||||
} catch (e) {
|
|
||||||
console.error("Search Error:", (e as Error).message);
|
|
||||||
return { results: [] };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getChapters(req: any, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { id } = req.params;
|
|
||||||
const source = req.query.source || 'anilist';
|
|
||||||
const provider = req.query.provider;
|
|
||||||
const extensionBookId = req.query.extensionBookId;
|
|
||||||
|
|
||||||
const isExternal = source !== 'anilist';
|
|
||||||
return await booksService.getChaptersForBook(id, isExternal, provider, extensionBookId);
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
return { chapters: [] };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getChapterContent(req: any, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { bookId, chapter, provider } = req.params;
|
|
||||||
const source = req.query.source || 'anilist';
|
|
||||||
const lang = req.query.lang || 'none';
|
|
||||||
|
|
||||||
const content = await booksService.getChapterContent(
|
|
||||||
bookId,
|
|
||||||
chapter,
|
|
||||||
provider,
|
|
||||||
source,
|
|
||||||
lang
|
|
||||||
);
|
|
||||||
|
|
||||||
return reply.send(content);
|
|
||||||
} catch (err) {
|
|
||||||
console.error("getChapterContent error:", (err as Error).message);
|
|
||||||
return reply.code(500).send({ error: "Error loading chapter" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
import { FastifyReply, FastifyRequest } from 'fastify';
|
|
||||||
import { getConfig, setConfig } from '../../shared/config';
|
|
||||||
|
|
||||||
function hideSecrets(values: any) {
|
|
||||||
const copy = structuredClone(values);
|
|
||||||
if (copy.server?.jwt_secret) delete copy.server.jwt_secret;
|
|
||||||
return copy;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getFullConfig(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { values, schema } = getConfig();
|
|
||||||
return { values: hideSecrets(values), schema };
|
|
||||||
} catch {
|
|
||||||
return { error: "Error loading config" };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getConfigSection(
|
|
||||||
req: FastifyRequest<{ Params: { section: string } }>,
|
|
||||||
reply: FastifyReply
|
|
||||||
) {
|
|
||||||
try {
|
|
||||||
const { section } = req.params;
|
|
||||||
const { values } = getConfig();
|
|
||||||
|
|
||||||
if (values[section] === undefined) {
|
|
||||||
return { error: "Section not found" };
|
|
||||||
}
|
|
||||||
|
|
||||||
return { [section]: hideSecrets(values)[section] };
|
|
||||||
} catch {
|
|
||||||
return { error: "Error loading config section" };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function updateConfig(
|
|
||||||
req: FastifyRequest<{ Body: any }>,
|
|
||||||
reply: FastifyReply
|
|
||||||
) {
|
|
||||||
try {
|
|
||||||
return setConfig(req.body); // schema nunca se toca
|
|
||||||
} catch {
|
|
||||||
return { error: "Error updating config" };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function updateConfigSection(
|
|
||||||
req: FastifyRequest<{ Params: { section: string }, Body: any }>,
|
|
||||||
reply: FastifyReply
|
|
||||||
) {
|
|
||||||
try {
|
|
||||||
const { section } = req.params;
|
|
||||||
const updatedValues = setConfig({ [section]: req.body });
|
|
||||||
return { [section]: updatedValues[section] };
|
|
||||||
} catch {
|
|
||||||
return { error: "Error updating config section" };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
import { FastifyInstance } from 'fastify';
|
|
||||||
import * as controller from './config.controller';
|
|
||||||
|
|
||||||
async function configRoutes(fastify: FastifyInstance) {
|
|
||||||
fastify.get('/config', controller.getFullConfig);
|
|
||||||
fastify.get('/config/:section', controller.getConfigSection);
|
|
||||||
fastify.post('/config', controller.updateConfig);
|
|
||||||
fastify.post('/config/:section', controller.updateConfigSection);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default configRoutes;
|
|
||||||
@@ -1,176 +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}.` });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getExtensionFilters(req: any, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const extensionName = req.params.extension;
|
|
||||||
const ext = getExtension(extensionName);
|
|
||||||
|
|
||||||
if (!ext) {
|
|
||||||
return { filters: {} };
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof ext.getFilters === 'function') {
|
|
||||||
const filters = ext.getFilters();
|
|
||||||
return { filters: filters || {} };
|
|
||||||
}
|
|
||||||
|
|
||||||
return { filters: {} };
|
|
||||||
} catch (e) {
|
|
||||||
console.error('getExtensionFilters error:', e);
|
|
||||||
return { filters: {} };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,565 +0,0 @@
|
|||||||
import { getConfig as loadConfig } from '../../shared/config';
|
|
||||||
import { queryOne, queryAll, run } from '../../shared/database';
|
|
||||||
import { getAnimeById } from '../anime/anime.service';
|
|
||||||
import { getBookById } from '../books/books.service';
|
|
||||||
import crypto from 'crypto';
|
|
||||||
import fs from 'fs';
|
|
||||||
import path from 'path';
|
|
||||||
import AdmZip from 'adm-zip';
|
|
||||||
import { spawn } from 'child_process';
|
|
||||||
const { values } = loadConfig();
|
|
||||||
|
|
||||||
const FFMPEG_PATH = values.paths?.ffmpeg || 'ffmpeg';
|
|
||||||
|
|
||||||
type DownloadStatus = {
|
|
||||||
id: string;
|
|
||||||
type: 'anime' | 'manga' | 'novel';
|
|
||||||
anilistId: number;
|
|
||||||
unitNumber: number;
|
|
||||||
status: 'pending' | 'downloading' | 'completed' | 'failed';
|
|
||||||
progress: number;
|
|
||||||
speed?: string;
|
|
||||||
timeElapsed?: string;
|
|
||||||
error?: string;
|
|
||||||
startedAt: number;
|
|
||||||
completedAt?: number;
|
|
||||||
folderName?: string;
|
|
||||||
fileName?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const activeDownloads = new Map<string, DownloadStatus>();
|
|
||||||
|
|
||||||
export function getActiveDownloads(): DownloadStatus[] {
|
|
||||||
return Array.from(activeDownloads.values());
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getDownloadById(id: string): DownloadStatus | undefined {
|
|
||||||
return activeDownloads.get(id);
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateDownloadProgress(id: string, updates: Partial<DownloadStatus>) {
|
|
||||||
const current = activeDownloads.get(id);
|
|
||||||
if (current) {
|
|
||||||
activeDownloads.set(id, { ...current, ...updates });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
type AnimeDownloadParams = {
|
|
||||||
anilistId: number;
|
|
||||||
episodeNumber: number;
|
|
||||||
streamUrl: string;
|
|
||||||
headers?: Record<string, string>;
|
|
||||||
quality?: string;
|
|
||||||
subtitles?: Array<{ language: string; url: string }>;
|
|
||||||
chapters?: Array<{ title: string; start_time: number; end_time: number }>;
|
|
||||||
totalDuration?: number;
|
|
||||||
};
|
|
||||||
|
|
||||||
type BookDownloadParams = {
|
|
||||||
anilistId: number;
|
|
||||||
chapterNumber: number;
|
|
||||||
format: 'manga' | 'novel';
|
|
||||||
content?: string;
|
|
||||||
images?: Array<{ index: number; url: string }>;
|
|
||||||
};
|
|
||||||
|
|
||||||
async function ensureDirectory(dirPath: string) {
|
|
||||||
if (!fs.existsSync(dirPath)) {
|
|
||||||
fs.mkdirSync(dirPath, { recursive: true });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function downloadFile(url: string, outputPath: string): Promise<void> {
|
|
||||||
const res = await fetch(url);
|
|
||||||
if (!res.ok) throw new Error(`HTTP_${res.status}`);
|
|
||||||
|
|
||||||
await ensureDirectory(path.dirname(outputPath));
|
|
||||||
const buf = Buffer.from(await res.arrayBuffer());
|
|
||||||
fs.writeFileSync(outputPath, buf);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getOrCreateEntry(
|
|
||||||
anilistId: number,
|
|
||||||
type: 'anime' | 'manga' | 'novels'
|
|
||||||
): Promise<{ id: string; path: string; folderName: string }> {
|
|
||||||
const existing = await queryOne(
|
|
||||||
`SELECT id, path, folder_name FROM local_entries
|
|
||||||
WHERE matched_id = ? AND matched_source = 'anilist' AND type = ?`,
|
|
||||||
[anilistId, type],
|
|
||||||
'local_library'
|
|
||||||
);
|
|
||||||
|
|
||||||
if (existing) {
|
|
||||||
return {
|
|
||||||
id: existing.id,
|
|
||||||
path: existing.path,
|
|
||||||
folderName: existing.folder_name
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const metadata: any = type === 'anime'
|
|
||||||
? await getAnimeById(anilistId)
|
|
||||||
: await getBookById(anilistId);
|
|
||||||
|
|
||||||
if (!metadata) {
|
|
||||||
throw new Error('METADATA_NOT_FOUND');
|
|
||||||
}
|
|
||||||
|
|
||||||
const { values } = loadConfig();
|
|
||||||
const basePath = values.library?.[type];
|
|
||||||
|
|
||||||
if (!basePath) {
|
|
||||||
throw new Error(`NO_LIBRARY_PATH_FOR_${type.toUpperCase()}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const title = metadata.title?.romaji || metadata.title?.english || `ID_${anilistId}`;
|
|
||||||
const safeName = title.replace(/[<>:"/\\|?*]/g, '_');
|
|
||||||
const folderPath = path.join(basePath, safeName);
|
|
||||||
|
|
||||||
await ensureDirectory(folderPath);
|
|
||||||
|
|
||||||
const entryId = crypto
|
|
||||||
.createHash('sha1')
|
|
||||||
.update(`anilist:${type}:${anilistId}`)
|
|
||||||
.digest('hex');
|
|
||||||
const now = Date.now();
|
|
||||||
|
|
||||||
await run(
|
|
||||||
`INSERT OR IGNORE INTO local_entries
|
|
||||||
(id, type, path, folder_name, matched_id, matched_source, last_scan)
|
|
||||||
VALUES (?, ?, ?, ?, ?, 'anilist', ?)`,
|
|
||||||
[entryId, type, folderPath, safeName, anilistId, now],
|
|
||||||
'local_library'
|
|
||||||
);
|
|
||||||
|
|
||||||
return {
|
|
||||||
id: entryId,
|
|
||||||
path: folderPath,
|
|
||||||
folderName: safeName
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function downloadAnimeEpisode(params: AnimeDownloadParams) {
|
|
||||||
const { anilistId, episodeNumber, streamUrl, subtitles, chapters, totalDuration } = params;
|
|
||||||
|
|
||||||
const entry: any = await getOrCreateEntry(anilistId, 'anime');
|
|
||||||
const fileName = `Episode_${episodeNumber.toString().padStart(2, '0')}.mkv`;
|
|
||||||
|
|
||||||
const downloadId = crypto.randomUUID();
|
|
||||||
activeDownloads.set(downloadId, {
|
|
||||||
id: downloadId,
|
|
||||||
type: 'anime',
|
|
||||||
anilistId,
|
|
||||||
unitNumber: episodeNumber,
|
|
||||||
status: 'pending',
|
|
||||||
progress: 0,
|
|
||||||
startedAt: Date.now(),
|
|
||||||
folderName: entry.folderName,
|
|
||||||
fileName: fileName
|
|
||||||
});
|
|
||||||
|
|
||||||
const exists = await queryOne(
|
|
||||||
`SELECT id FROM local_files WHERE entry_id = ? AND unit_number = ?`,
|
|
||||||
[entry.id, episodeNumber],
|
|
||||||
'local_library'
|
|
||||||
);
|
|
||||||
|
|
||||||
if (exists) {
|
|
||||||
activeDownloads.delete(downloadId);
|
|
||||||
return { status: 'ALREADY_EXISTS', entry_id: entry.id, episode: episodeNumber };
|
|
||||||
}
|
|
||||||
|
|
||||||
const outputPath = path.join(entry.path, `Episode_${episodeNumber.toString().padStart(2, '0')}.mkv`);
|
|
||||||
const tempDir = path.join(entry.path, '.temp');
|
|
||||||
await ensureDirectory(tempDir);
|
|
||||||
|
|
||||||
try {
|
|
||||||
updateDownloadProgress(downloadId, { status: 'downloading' });
|
|
||||||
|
|
||||||
let videoInput = streamUrl;
|
|
||||||
let audioInputs: string[] = [];
|
|
||||||
|
|
||||||
const isMaster = (params as any).is_master === true;
|
|
||||||
|
|
||||||
if (isMaster) {
|
|
||||||
const variant = (params as any).variant;
|
|
||||||
const audios = (params as any).audio;
|
|
||||||
|
|
||||||
if (!variant || !variant.playlist_url) {
|
|
||||||
throw new Error('VARIANT_REQUIRED_FOR_MASTER');
|
|
||||||
}
|
|
||||||
|
|
||||||
videoInput = variant.playlist_url;
|
|
||||||
|
|
||||||
if (audios && audios.length > 0) {
|
|
||||||
audioInputs = audios.map((a: any) => a.playlist_url);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const subFiles: string[] = [];
|
|
||||||
if (subtitles?.length) {
|
|
||||||
for (let i = 0; i < subtitles.length; i++) {
|
|
||||||
const ext = subtitles[i].url.endsWith('.vtt') ? 'vtt' : 'srt';
|
|
||||||
const p = path.join(tempDir, `sub_${i}.${ext}`);
|
|
||||||
await downloadFile(subtitles[i].url, p);
|
|
||||||
subFiles.push(p);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const args = [
|
|
||||||
'-protocol_whitelist', 'file,http,https,tcp,tls,crypto',
|
|
||||||
'-allowed_extensions', 'ALL',
|
|
||||||
'-f', 'hls',
|
|
||||||
'-extension_picky', '0',
|
|
||||||
'-i', videoInput
|
|
||||||
];
|
|
||||||
|
|
||||||
audioInputs.forEach(audioUrl => {
|
|
||||||
args.push(
|
|
||||||
'-protocol_whitelist', 'file,http,https,tcp,tls,crypto',
|
|
||||||
'-allowed_extensions', 'ALL',
|
|
||||||
'-f', 'hls',
|
|
||||||
'-extension_picky', '0',
|
|
||||||
'-i', audioUrl
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
subFiles.forEach(f => args.push('-i', f));
|
|
||||||
|
|
||||||
let chaptersInputIndex = -1;
|
|
||||||
|
|
||||||
if (chapters?.length) {
|
|
||||||
const meta = path.join(tempDir, 'chapters.txt');
|
|
||||||
const sorted = [...chapters].sort((a, b) => a.start_time - b.start_time);
|
|
||||||
const lines: string[] = [';FFMETADATA1'];
|
|
||||||
|
|
||||||
for (let i = 0; i < sorted.length; i++) {
|
|
||||||
const c = sorted[i];
|
|
||||||
const start = Math.floor(c.start_time * 1000);
|
|
||||||
const end = Math.floor(c.end_time * 1000);
|
|
||||||
const title = (c.title || 'chapter').toUpperCase();
|
|
||||||
|
|
||||||
lines.push(
|
|
||||||
'[CHAPTER]',
|
|
||||||
'TIMEBASE=1/1000',
|
|
||||||
`START=${start}`,
|
|
||||||
`END=${end}`,
|
|
||||||
`title=${title}`
|
|
||||||
);
|
|
||||||
|
|
||||||
if (i < sorted.length - 1) {
|
|
||||||
const nextStart = Math.floor(sorted[i + 1].start_time * 1000);
|
|
||||||
if (nextStart - end > 1000) {
|
|
||||||
lines.push(
|
|
||||||
'[CHAPTER]',
|
|
||||||
'TIMEBASE=1/1000',
|
|
||||||
`START=${end}`,
|
|
||||||
`END=${nextStart}`,
|
|
||||||
'title=Episode'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
lines.push(
|
|
||||||
'[CHAPTER]',
|
|
||||||
'TIMEBASE=1/1000',
|
|
||||||
`START=${end}`,
|
|
||||||
'title=Episode'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fs.writeFileSync(meta, lines.join('\n'));
|
|
||||||
args.push('-i', meta);
|
|
||||||
chaptersInputIndex = 1 + audioInputs.length + subFiles.length;
|
|
||||||
}
|
|
||||||
|
|
||||||
args.push('-map', '0:v:0');
|
|
||||||
|
|
||||||
if (audioInputs.length > 0) {
|
|
||||||
audioInputs.forEach((_, i) => {
|
|
||||||
args.push('-map', `${i + 1}:a:0`);
|
|
||||||
const audioInfo = (params as any).audio?.[i];
|
|
||||||
if (audioInfo) {
|
|
||||||
const audioStreamIndex = i;
|
|
||||||
if (audioInfo.language) {
|
|
||||||
args.push(`-metadata:s:a:${audioStreamIndex}`, `language=${audioInfo.language}`);
|
|
||||||
}
|
|
||||||
if (audioInfo.name) {
|
|
||||||
args.push(`-metadata:s:a:${audioStreamIndex}`, `title=${audioInfo.name}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
args.push('-map', '0:a:0?');
|
|
||||||
}
|
|
||||||
|
|
||||||
const subtitleStartIndex = 1 + audioInputs.length;
|
|
||||||
subFiles.forEach((_, i) => {
|
|
||||||
args.push('-map', `${subtitleStartIndex + i}:0`);
|
|
||||||
args.push(`-metadata:s:s:${i}`, `language=${subtitles![i].language}`);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (chaptersInputIndex >= 0) {
|
|
||||||
args.push('-map_metadata', `${chaptersInputIndex}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
args.push('-c:v', 'copy', '-c:a', 'copy');
|
|
||||||
if (subFiles.length) args.push('-c:s', 'srt');
|
|
||||||
args.push('-y', outputPath);
|
|
||||||
|
|
||||||
await new Promise((resolve, reject) => {
|
|
||||||
const ff = spawn(FFMPEG_PATH, args, {
|
|
||||||
windowsHide: true,
|
|
||||||
stdio: ['ignore', 'pipe', 'pipe']
|
|
||||||
});
|
|
||||||
|
|
||||||
ff.stderr.on('data', (data) => {
|
|
||||||
const text = data.toString();
|
|
||||||
const timeMatch = text.match(/time=(\S+)/);
|
|
||||||
const speedMatch = text.match(/speed=(\S+)/);
|
|
||||||
|
|
||||||
if (timeMatch || speedMatch) {
|
|
||||||
const updates: any = {};
|
|
||||||
|
|
||||||
if (timeMatch) updates.timeElapsed = timeMatch[1];
|
|
||||||
if (speedMatch) updates.speed = speedMatch[1];
|
|
||||||
|
|
||||||
if (timeMatch && totalDuration && totalDuration > 0) {
|
|
||||||
const elapsedSeconds = parseFFmpegTime(timeMatch[1]);
|
|
||||||
updates.progress = Math.min(
|
|
||||||
99,
|
|
||||||
Math.round((elapsedSeconds / totalDuration) * 100)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
updateDownloadProgress(downloadId, updates);
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
ff.on('error', (error) => reject(error));
|
|
||||||
ff.on('close', (code) => {
|
|
||||||
if (code === 0) resolve(true);
|
|
||||||
else reject(new Error(`FFmpeg exited with code ${code}`));
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
fs.rmSync(tempDir, { recursive: true, force: true });
|
|
||||||
|
|
||||||
const fileId = crypto.randomUUID();
|
|
||||||
await run(
|
|
||||||
`INSERT INTO local_files (id, entry_id, file_path, unit_number)
|
|
||||||
VALUES (?, ?, ?, ?)`,
|
|
||||||
[fileId, entry.id, outputPath, episodeNumber],
|
|
||||||
'local_library'
|
|
||||||
);
|
|
||||||
|
|
||||||
await run(
|
|
||||||
`UPDATE local_entries SET last_scan = ? WHERE id = ?`,
|
|
||||||
[Date.now(), entry.id],
|
|
||||||
'local_library'
|
|
||||||
);
|
|
||||||
|
|
||||||
updateDownloadProgress(downloadId, {
|
|
||||||
status: 'completed',
|
|
||||||
progress: 100,
|
|
||||||
completedAt: Date.now()
|
|
||||||
});
|
|
||||||
|
|
||||||
setTimeout(() => activeDownloads.delete(downloadId), 30000);
|
|
||||||
|
|
||||||
return {
|
|
||||||
status: 'SUCCESS',
|
|
||||||
download_id: downloadId,
|
|
||||||
entry_id: entry.id,
|
|
||||||
file_id: fileId,
|
|
||||||
episode: episodeNumber,
|
|
||||||
path: outputPath
|
|
||||||
};
|
|
||||||
|
|
||||||
} catch (e: any) {
|
|
||||||
fs.rmSync(tempDir, { recursive: true, force: true });
|
|
||||||
if (fs.existsSync(outputPath)) fs.unlinkSync(outputPath);
|
|
||||||
|
|
||||||
updateDownloadProgress(downloadId, {
|
|
||||||
status: 'failed',
|
|
||||||
error: e.message
|
|
||||||
});
|
|
||||||
|
|
||||||
setTimeout(() => activeDownloads.delete(downloadId), 60000);
|
|
||||||
|
|
||||||
const err = new Error('DOWNLOAD_FAILED');
|
|
||||||
(err as any).details = e.message;
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function downloadBookChapter(params: BookDownloadParams) {
|
|
||||||
const { anilistId, chapterNumber, format, content, images } = params;
|
|
||||||
|
|
||||||
const type = format === 'manga' ? 'manga' : 'novels';
|
|
||||||
const entry = await getOrCreateEntry(anilistId, type);
|
|
||||||
|
|
||||||
const ext = format === 'manga' ? 'cbz' : 'epub';
|
|
||||||
const fileName = `Chapter_${chapterNumber.toString().padStart(3, '0')}.${ext}`;
|
|
||||||
|
|
||||||
const downloadId = crypto.randomUUID();
|
|
||||||
|
|
||||||
activeDownloads.set(downloadId, {
|
|
||||||
id: downloadId,
|
|
||||||
type: format === 'manga' ? 'manga' : 'novel',
|
|
||||||
anilistId,
|
|
||||||
unitNumber: chapterNumber,
|
|
||||||
status: 'pending',
|
|
||||||
progress: 0,
|
|
||||||
startedAt: Date.now(),
|
|
||||||
folderName: entry.folderName,
|
|
||||||
fileName: fileName
|
|
||||||
});
|
|
||||||
|
|
||||||
const existingFile = await queryOne(
|
|
||||||
`SELECT id FROM local_files WHERE entry_id = ? AND unit_number = ?`,
|
|
||||||
[entry.id, chapterNumber],
|
|
||||||
'local_library'
|
|
||||||
);
|
|
||||||
|
|
||||||
if (existingFile) {
|
|
||||||
activeDownloads.delete(downloadId);
|
|
||||||
return {
|
|
||||||
status: 'ALREADY_EXISTS',
|
|
||||||
message: `Chapter ${chapterNumber} already exists`,
|
|
||||||
entry_id: entry.id,
|
|
||||||
chapter: chapterNumber
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
updateDownloadProgress(downloadId, { status: 'downloading' });
|
|
||||||
|
|
||||||
let outputPath: string;
|
|
||||||
let fileId: string;
|
|
||||||
|
|
||||||
if (format === 'manga') {
|
|
||||||
const chapterName = `Chapter_${chapterNumber.toString().padStart(3, '0')}.cbz`;
|
|
||||||
outputPath = path.join(entry.path, chapterName);
|
|
||||||
|
|
||||||
const zip = new AdmZip();
|
|
||||||
const sortedImages = images!.sort((a, b) => a.index - b.index);
|
|
||||||
|
|
||||||
for (let i = 0; i < sortedImages.length; i++) {
|
|
||||||
const img = sortedImages[i];
|
|
||||||
const res = await fetch(img.url);
|
|
||||||
if (!res.ok) throw new Error(`HTTP_${res.status}`);
|
|
||||||
const buf = Buffer.from(await res.arrayBuffer());
|
|
||||||
|
|
||||||
const ext = path.extname(new URL(img.url).pathname) || '.jpg';
|
|
||||||
const filename = `${img.index.toString().padStart(4, '0')}${ext}`;
|
|
||||||
zip.addFile(filename, buf);
|
|
||||||
|
|
||||||
updateDownloadProgress(downloadId, {
|
|
||||||
progress: Math.floor((i / sortedImages.length) * 100)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
zip.writeZip(outputPath);
|
|
||||||
|
|
||||||
} else {
|
|
||||||
const chapterName = `Chapter_${chapterNumber.toString().padStart(3, '0')}.epub`;
|
|
||||||
outputPath = path.join(entry.path, chapterName);
|
|
||||||
|
|
||||||
const zip = new AdmZip();
|
|
||||||
zip.addFile('mimetype', Buffer.from('application/epub+zip'), '', 0);
|
|
||||||
|
|
||||||
const containerXml = `<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
|
|
||||||
<rootfiles>
|
|
||||||
<rootfile full-path="OEBPS/content.opf" media-type="application/oebps-package+xml"/>
|
|
||||||
</rootfiles>
|
|
||||||
</container>`;
|
|
||||||
zip.addFile('META-INF/container.xml', Buffer.from(containerXml));
|
|
||||||
|
|
||||||
const contentOpf = `<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<package xmlns="http://www.idpf.org/2007/opf" version="3.0" unique-identifier="bookid">
|
|
||||||
<metadata xmlns:dc="http://purl.org/dc/elements/1.1/">
|
|
||||||
<dc:title>Chapter ${chapterNumber}</dc:title>
|
|
||||||
<dc:identifier id="bookid">chapter-${anilistId}-${chapterNumber}</dc:identifier>
|
|
||||||
<dc:language>en</dc:language>
|
|
||||||
</metadata>
|
|
||||||
<manifest>
|
|
||||||
<item id="chapter" href="chapter.xhtml" media-type="application/xhtml+xml"/>
|
|
||||||
</manifest>
|
|
||||||
<spine>
|
|
||||||
<itemref idref="chapter"/>
|
|
||||||
</spine>
|
|
||||||
</package>`;
|
|
||||||
zip.addFile('OEBPS/content.opf', Buffer.from(contentOpf));
|
|
||||||
|
|
||||||
const chapterXhtml = `<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
||||||
<head>
|
|
||||||
<title>Chapter ${chapterNumber}</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
${content}
|
|
||||||
</body>
|
|
||||||
</html>`;
|
|
||||||
zip.addFile('OEBPS/chapter.xhtml', Buffer.from(chapterXhtml));
|
|
||||||
zip.writeZip(outputPath);
|
|
||||||
}
|
|
||||||
|
|
||||||
fileId = crypto.randomUUID();
|
|
||||||
await run(
|
|
||||||
`INSERT INTO local_files (id, entry_id, file_path, unit_number)
|
|
||||||
VALUES (?, ?, ?, ?)`,
|
|
||||||
[fileId, entry.id, outputPath, chapterNumber],
|
|
||||||
'local_library'
|
|
||||||
);
|
|
||||||
|
|
||||||
await run(
|
|
||||||
`UPDATE local_entries SET last_scan = ? WHERE id = ?`,
|
|
||||||
[Date.now(), entry.id],
|
|
||||||
'local_library'
|
|
||||||
);
|
|
||||||
|
|
||||||
updateDownloadProgress(downloadId, {
|
|
||||||
status: 'completed',
|
|
||||||
progress: 100,
|
|
||||||
completedAt: Date.now()
|
|
||||||
});
|
|
||||||
|
|
||||||
setTimeout(() => activeDownloads.delete(downloadId), 30000);
|
|
||||||
|
|
||||||
return {
|
|
||||||
status: 'SUCCESS',
|
|
||||||
download_id: downloadId,
|
|
||||||
entry_id: entry.id,
|
|
||||||
file_id: fileId,
|
|
||||||
chapter: chapterNumber,
|
|
||||||
format,
|
|
||||||
path: outputPath
|
|
||||||
};
|
|
||||||
|
|
||||||
} catch (error: any) {
|
|
||||||
updateDownloadProgress(downloadId, {
|
|
||||||
status: 'failed',
|
|
||||||
error: error.message
|
|
||||||
});
|
|
||||||
|
|
||||||
setTimeout(() => activeDownloads.delete(downloadId), 60000);
|
|
||||||
|
|
||||||
const err = new Error('DOWNLOAD_FAILED');
|
|
||||||
(err as any).details = error.message;
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function parseFFmpegTime(timeStr: string): number {
|
|
||||||
const parts = timeStr.split(':');
|
|
||||||
if (parts.length < 3) return 0;
|
|
||||||
|
|
||||||
const h = parseFloat(parts[0]) || 0;
|
|
||||||
const m = parseFloat(parts[1]) || 0;
|
|
||||||
const s = parseFloat(parts[2]) || 0;
|
|
||||||
|
|
||||||
return (h * 3600) + (m * 60) + s;
|
|
||||||
}
|
|
||||||
@@ -1,485 +0,0 @@
|
|||||||
import {FastifyReply, FastifyRequest} from 'fastify';
|
|
||||||
import fs from 'fs';
|
|
||||||
import * as service from './local.service';
|
|
||||||
import * as downloadService from './download.service';
|
|
||||||
import * as streamingService from './streaming.service';
|
|
||||||
|
|
||||||
type ScanQuery = {
|
|
||||||
mode?: 'full' | 'incremental';
|
|
||||||
};
|
|
||||||
|
|
||||||
type Params = {
|
|
||||||
type: 'anime' | 'manga' | 'novels';
|
|
||||||
id?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
type MatchBody = {
|
|
||||||
source: 'anilist';
|
|
||||||
matched_id: number | null;
|
|
||||||
};
|
|
||||||
|
|
||||||
type DownloadAnimeBody =
|
|
||||||
| {
|
|
||||||
anilist_id: number;
|
|
||||||
episode_number: number;
|
|
||||||
stream_url: string;
|
|
||||||
is_master?: false;
|
|
||||||
subtitles?: {
|
|
||||||
language: string;
|
|
||||||
url: string;
|
|
||||||
}[];
|
|
||||||
duration?: number;
|
|
||||||
chapters?: {
|
|
||||||
title: string;
|
|
||||||
start_time: number;
|
|
||||||
end_time: number;
|
|
||||||
}[];
|
|
||||||
}
|
|
||||||
| {
|
|
||||||
anilist_id: number;
|
|
||||||
episode_number: number;
|
|
||||||
stream_url: string;
|
|
||||||
duration?: number;
|
|
||||||
is_master: true;
|
|
||||||
variant: {
|
|
||||||
resolution: string;
|
|
||||||
bandwidth?: number;
|
|
||||||
codecs?: string;
|
|
||||||
playlist_url: string;
|
|
||||||
};
|
|
||||||
audio?: {
|
|
||||||
group?: string;
|
|
||||||
language?: string;
|
|
||||||
name?: string;
|
|
||||||
playlist_url: string;
|
|
||||||
}[];
|
|
||||||
subtitles?: {
|
|
||||||
language: string;
|
|
||||||
url: string;
|
|
||||||
}[];
|
|
||||||
chapters?: {
|
|
||||||
title: string;
|
|
||||||
start_time: number;
|
|
||||||
end_time: number;
|
|
||||||
}[];
|
|
||||||
};
|
|
||||||
|
|
||||||
type DownloadBookBody = {
|
|
||||||
anilist_id: number;
|
|
||||||
chapter_number: number;
|
|
||||||
format: 'manga' | 'novel';
|
|
||||||
content?: string;
|
|
||||||
images?: Array<{
|
|
||||||
index: number;
|
|
||||||
url: string;
|
|
||||||
}>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export async function scanLibrary(request: FastifyRequest<{ Querystring: ScanQuery }>, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const mode = request.query.mode || 'incremental';
|
|
||||||
return await service.performLibraryScan(mode);
|
|
||||||
} catch (err: any) {
|
|
||||||
if (err.message === 'NO_LIBRARY_CONFIGURED') {
|
|
||||||
return reply.status(400).send({ error: 'NO_LIBRARY_CONFIGURED' });
|
|
||||||
}
|
|
||||||
return reply.status(500).send({ error: 'FAILED_TO_SCAN_LIBRARY' });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function listEntries(request: FastifyRequest<{ Params: Params }>, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { type } = request.params;
|
|
||||||
return await service.getEntriesByType(type);
|
|
||||||
} catch {
|
|
||||||
return reply.status(500).send({ error: 'FAILED_TO_LIST_ENTRIES' });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getEntry(request: FastifyRequest<{ Params: Params }>, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { type, id } = request.params as { type: string, id: string };
|
|
||||||
const entry = await service.getEntryDetails(type, id);
|
|
||||||
|
|
||||||
if (!entry) {
|
|
||||||
return reply.status(404).send({ error: 'ENTRY_NOT_FOUND' });
|
|
||||||
}
|
|
||||||
|
|
||||||
return entry;
|
|
||||||
} catch {
|
|
||||||
return reply.status(500).send({ error: 'FAILED_TO_GET_ENTRY' });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function streamUnit(request: FastifyRequest, reply: FastifyReply) {
|
|
||||||
const { id, unit } = request.params as any;
|
|
||||||
|
|
||||||
const fileInfo = await service.getFileForStreaming(id, unit);
|
|
||||||
|
|
||||||
if (!fileInfo) {
|
|
||||||
return reply.status(404).send({ error: 'FILE_NOT_FOUND' });
|
|
||||||
}
|
|
||||||
|
|
||||||
const { filePath, stat } = fileInfo;
|
|
||||||
const range = request.headers.range;
|
|
||||||
|
|
||||||
if (!range) {
|
|
||||||
reply
|
|
||||||
.header('Content-Length', stat.size)
|
|
||||||
.header('Content-Type', 'video/mp4');
|
|
||||||
return fs.createReadStream(filePath);
|
|
||||||
}
|
|
||||||
|
|
||||||
const parts = range.replace(/bytes=/, '').split('-');
|
|
||||||
const start = Number(parts[0]);
|
|
||||||
const end = parts[1] ? Number(parts[1]) : stat.size - 1;
|
|
||||||
|
|
||||||
if (
|
|
||||||
Number.isNaN(start) ||
|
|
||||||
Number.isNaN(end) ||
|
|
||||||
start < 0 ||
|
|
||||||
start >= stat.size ||
|
|
||||||
end < start ||
|
|
||||||
end >= stat.size
|
|
||||||
) {
|
|
||||||
return reply.status(416).send({ error: 'INVALID_RANGE' });
|
|
||||||
}
|
|
||||||
|
|
||||||
const contentLength = end - start + 1;
|
|
||||||
|
|
||||||
reply
|
|
||||||
.status(206)
|
|
||||||
.header('Content-Range', `bytes ${start}-${end}/${stat.size}`)
|
|
||||||
.header('Accept-Ranges', 'bytes')
|
|
||||||
.header('Content-Length', contentLength)
|
|
||||||
.header('Content-Type', 'video/mp4');
|
|
||||||
|
|
||||||
return fs.createReadStream(filePath, { start, end });
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function matchEntry(
|
|
||||||
request: FastifyRequest<{ Body: MatchBody }>,
|
|
||||||
reply: FastifyReply
|
|
||||||
) {
|
|
||||||
const { id, type } = request.params as any;
|
|
||||||
const { source, matched_id } = request.body;
|
|
||||||
|
|
||||||
const result = await service.updateEntryMatch(id, type, source, matched_id);
|
|
||||||
|
|
||||||
if (!result) {
|
|
||||||
return reply.status(404).send({ error: 'ENTRY_NOT_FOUND' });
|
|
||||||
}
|
|
||||||
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getUnits(request: FastifyRequest<{ Params: Params }>, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { id } = request.params as { id: string };
|
|
||||||
const units = await service.getEntryUnits(id);
|
|
||||||
|
|
||||||
if (!units) {
|
|
||||||
return reply.status(404).send({ error: 'ENTRY_NOT_FOUND' });
|
|
||||||
}
|
|
||||||
|
|
||||||
return units;
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error getting units:', err);
|
|
||||||
return reply.status(500).send({ error: 'FAILED_TO_GET_UNITS' });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getManifest(request: FastifyRequest, reply: FastifyReply) {
|
|
||||||
const { unitId } = request.params as any;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const manifest = await service.getUnitManifest(unitId);
|
|
||||||
|
|
||||||
if (!manifest) {
|
|
||||||
return reply.status(404).send({ error: 'FILE_NOT_FOUND' });
|
|
||||||
}
|
|
||||||
|
|
||||||
return manifest;
|
|
||||||
} catch (err: any) {
|
|
||||||
if (err.message === 'UNSUPPORTED_FORMAT') {
|
|
||||||
return reply.status(400).send({ error: 'UNSUPPORTED_FORMAT' });
|
|
||||||
}
|
|
||||||
return reply.status(500).send({ error: 'FAILED_TO_GET_MANIFEST' });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getPage(request: FastifyRequest, reply: FastifyReply) {
|
|
||||||
const { unitId, resId } = request.params as any;
|
|
||||||
|
|
||||||
const resource = await service.getUnitResource(unitId, resId);
|
|
||||||
|
|
||||||
if (!resource) {
|
|
||||||
return reply.status(404).send();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (resource.type === 'image') {
|
|
||||||
if (resource.data) {
|
|
||||||
return reply
|
|
||||||
.header('Content-Type', 'image/jpeg')
|
|
||||||
.send(resource.data);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (resource.path && resource.size) {
|
|
||||||
reply
|
|
||||||
.header('Content-Length', resource.size)
|
|
||||||
.header('Content-Type', 'image/jpeg');
|
|
||||||
|
|
||||||
return fs.createReadStream(resource.path);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (resource.type === 'html') {
|
|
||||||
return reply
|
|
||||||
.header('Content-Type', 'text/html; charset=utf-8')
|
|
||||||
.send(resource.data);
|
|
||||||
}
|
|
||||||
|
|
||||||
return reply.status(400).send();
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildProxyUrl(rawUrl: string, headers: Record<string, string>) {
|
|
||||||
const params = new URLSearchParams({ url: rawUrl });
|
|
||||||
|
|
||||||
for (const [key, value] of Object.entries(headers)) {
|
|
||||||
params.set(key.toLowerCase(), value);
|
|
||||||
}
|
|
||||||
|
|
||||||
return `http://localhost:54322/api/proxy?${params.toString()}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function downloadAnime(request: FastifyRequest<{ Body: DownloadAnimeBody }>, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const {
|
|
||||||
anilist_id,
|
|
||||||
episode_number,
|
|
||||||
stream_url,
|
|
||||||
duration,
|
|
||||||
is_master,
|
|
||||||
subtitles,
|
|
||||||
chapters
|
|
||||||
} = request.body;
|
|
||||||
|
|
||||||
const clientHeaders = (request.body as any).headers || {};
|
|
||||||
|
|
||||||
if (!anilist_id || !episode_number || !stream_url) {
|
|
||||||
return reply.status(400).send({
|
|
||||||
error: 'MISSING_REQUIRED_FIELDS',
|
|
||||||
required: ['anilist_id', 'episode_number', 'stream_url']
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const proxyUrl = buildProxyUrl(stream_url, clientHeaders);
|
|
||||||
console.log('Stream URL:', proxyUrl);
|
|
||||||
|
|
||||||
const proxiedSubs = subtitles?.map(sub => ({
|
|
||||||
...sub,
|
|
||||||
url: buildProxyUrl(sub.url, clientHeaders)
|
|
||||||
}));
|
|
||||||
|
|
||||||
const downloadParams: any = {
|
|
||||||
anilistId: anilist_id,
|
|
||||||
episodeNumber: episode_number,
|
|
||||||
streamUrl: proxyUrl,
|
|
||||||
subtitles: proxiedSubs,
|
|
||||||
chapters,
|
|
||||||
totalDuration: duration
|
|
||||||
};
|
|
||||||
|
|
||||||
if (is_master === true) {
|
|
||||||
const { variant, audio } = request.body as any;
|
|
||||||
|
|
||||||
if (!variant || !variant.playlist_url) {
|
|
||||||
return reply.status(400).send({
|
|
||||||
error: 'MISSING_VARIANT',
|
|
||||||
message: 'variant with playlist_url is required when is_master is true'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
downloadParams.is_master = true;
|
|
||||||
downloadParams.variant = {
|
|
||||||
...variant,
|
|
||||||
playlist_url: buildProxyUrl(variant.playlist_url, clientHeaders)
|
|
||||||
};
|
|
||||||
|
|
||||||
if (audio && audio.length > 0) {
|
|
||||||
downloadParams.audio = audio.map((a: any) => ({
|
|
||||||
...a,
|
|
||||||
playlist_url: buildProxyUrl(a.playlist_url, clientHeaders)
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Master playlist detected');
|
|
||||||
console.log('Variant:', downloadParams.variant.resolution);
|
|
||||||
console.log('Audio tracks:', downloadParams.audio?.length || 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
const result = await downloadService.downloadAnimeEpisode(downloadParams);
|
|
||||||
|
|
||||||
if (result.status === 'ALREADY_EXISTS') {
|
|
||||||
return reply.status(409).send(result);
|
|
||||||
}
|
|
||||||
|
|
||||||
return result;
|
|
||||||
} catch (err: any) {
|
|
||||||
console.error('Error downloading anime:', err);
|
|
||||||
|
|
||||||
if (err.message === 'METADATA_NOT_FOUND') {
|
|
||||||
return reply.status(404).send({ error: 'ANIME_NOT_FOUND_IN_ANILIST' });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (err.message === 'VARIANT_REQUIRED_FOR_MASTER') {
|
|
||||||
return reply.status(400).send({ error: 'VARIANT_REQUIRED_FOR_MASTER' });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (err.message === 'DOWNLOAD_FAILED') {
|
|
||||||
return reply.status(500).send({ error: 'DOWNLOAD_FAILED', details: err.details });
|
|
||||||
}
|
|
||||||
|
|
||||||
return reply.status(500).send({ error: 'FAILED_TO_DOWNLOAD_ANIME' });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function downloadBook(request: FastifyRequest<{ Body: DownloadBookBody }>, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const {
|
|
||||||
anilist_id,
|
|
||||||
chapter_number,
|
|
||||||
format,
|
|
||||||
content,
|
|
||||||
images
|
|
||||||
} = request.body;
|
|
||||||
|
|
||||||
if (!anilist_id || !chapter_number || !format) {
|
|
||||||
return reply.status(400).send({
|
|
||||||
error: 'MISSING_REQUIRED_FIELDS',
|
|
||||||
required: ['anilist_id', 'chapter_number', 'format']
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (format === 'novel' && !content) {
|
|
||||||
return reply.status(400).send({
|
|
||||||
error: 'MISSING_CONTENT',
|
|
||||||
message: 'content field is required for novels'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (format === 'manga' && (!images || images.length === 0)) {
|
|
||||||
return reply.status(400).send({
|
|
||||||
error: 'MISSING_IMAGES',
|
|
||||||
message: 'images field is required for manga'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const result = await downloadService.downloadBookChapter({
|
|
||||||
anilistId: anilist_id,
|
|
||||||
chapterNumber: chapter_number,
|
|
||||||
format,
|
|
||||||
content,
|
|
||||||
images
|
|
||||||
});
|
|
||||||
|
|
||||||
if (result.status === 'ALREADY_EXISTS') {
|
|
||||||
return reply.status(409).send(result);
|
|
||||||
}
|
|
||||||
|
|
||||||
return result;
|
|
||||||
} catch (err: any) {
|
|
||||||
console.error('Error downloading book:', err);
|
|
||||||
|
|
||||||
if (err.message === 'METADATA_NOT_FOUND') {
|
|
||||||
return reply.status(404).send({ error: 'BOOK_NOT_FOUND_IN_ANILIST' });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (err.message === 'DOWNLOAD_FAILED') {
|
|
||||||
return reply.status(500).send({ error: 'DOWNLOAD_FAILED', details: err.details });
|
|
||||||
}
|
|
||||||
|
|
||||||
return reply.status(500).send({ error: 'FAILED_TO_DOWNLOAD_BOOK' });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getDownloadStatus(request: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const downloads = downloadService.getActiveDownloads();
|
|
||||||
const streams = streamingService.getActiveStreamsStatus();
|
|
||||||
|
|
||||||
return {
|
|
||||||
downloads: {
|
|
||||||
total: downloads.length,
|
|
||||||
active: downloads.filter(d => d.status === 'downloading').length,
|
|
||||||
completed: downloads.filter(d => d.status === 'completed').length,
|
|
||||||
failed: downloads.filter(d => d.status === 'failed').length,
|
|
||||||
list: downloads
|
|
||||||
},
|
|
||||||
streams: {
|
|
||||||
total: streams.length,
|
|
||||||
active: streams.filter(s => !s.isComplete).length,
|
|
||||||
completed: streams.filter(s => s.isComplete).length,
|
|
||||||
list: streams
|
|
||||||
}
|
|
||||||
};
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error getting download status:', err);
|
|
||||||
return reply.status(500).send({ error: 'FAILED_TO_GET_DOWNLOAD_STATUS' });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getAnimeStreamManifest(request: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { type, id, unit } = request.params as any;
|
|
||||||
|
|
||||||
if (type !== 'anime') {
|
|
||||||
return reply.status(400).send({ error: 'ONLY_ANIME_SUPPORTED' });
|
|
||||||
}
|
|
||||||
|
|
||||||
const fileInfo = await service.getFileForStreaming(id, unit);
|
|
||||||
|
|
||||||
if (!fileInfo) {
|
|
||||||
return reply.status(404).send({ error: 'FILE_NOT_FOUND' });
|
|
||||||
}
|
|
||||||
|
|
||||||
const manifest = await streamingService.getStreamingManifest(fileInfo.filePath);
|
|
||||||
|
|
||||||
if (!manifest) {
|
|
||||||
return reply.status(500).send({ error: 'FAILED_TO_GENERATE_MANIFEST' });
|
|
||||||
}
|
|
||||||
|
|
||||||
return manifest;
|
|
||||||
} catch (err: any) {
|
|
||||||
console.error('Error getting stream manifest:', err);
|
|
||||||
return reply.status(500).send({ error: 'FAILED_TO_GET_STREAM_MANIFEST' });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function serveHLSFile(request: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { hash, filename } = request.params as any;
|
|
||||||
|
|
||||||
const file = await streamingService.getHLSFile(hash, filename);
|
|
||||||
|
|
||||||
if (!file) {
|
|
||||||
return reply.status(404).send({ error: 'FILE_NOT_FOUND' });
|
|
||||||
}
|
|
||||||
|
|
||||||
const contentType = filename.endsWith('.m3u8')
|
|
||||||
? 'application/vnd.apple.mpegurl'
|
|
||||||
: filename.endsWith('.vtt')
|
|
||||||
? 'text/vtt'
|
|
||||||
: 'video/mp2t';
|
|
||||||
|
|
||||||
reply
|
|
||||||
.header('Content-Type', contentType)
|
|
||||||
.header('Content-Length', file.stat.size)
|
|
||||||
.header('Access-Control-Allow-Origin', '*');
|
|
||||||
|
|
||||||
return fs.createReadStream(file.path);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error serving HLS file:', err);
|
|
||||||
return reply.status(500).send({ error: 'FAILED_TO_SERVE_HLS_FILE' });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
import { FastifyInstance } from 'fastify';
|
|
||||||
import * as controller from './local.controller';
|
|
||||||
|
|
||||||
async function localRoutes(fastify: FastifyInstance) {
|
|
||||||
fastify.post('/library/scan', controller.scanLibrary);
|
|
||||||
fastify.get('/library/:type', controller.listEntries);
|
|
||||||
fastify.get('/library/:type/:id', controller.getEntry);
|
|
||||||
|
|
||||||
// Streaming básico (legacy)
|
|
||||||
fastify.get('/library/stream/:type/:id/:unit', controller.streamUnit);
|
|
||||||
fastify.post('/library/:type/:id/match', controller.matchEntry);
|
|
||||||
fastify.get('/library/:id/units', controller.getUnits);
|
|
||||||
fastify.get('/library/:unitId/manifest', controller.getManifest);
|
|
||||||
fastify.get('/library/:unitId/resource/:resId', controller.getPage);
|
|
||||||
fastify.post('/library/download/anime', controller.downloadAnime);
|
|
||||||
fastify.post('/library/download/book', controller.downloadBook);
|
|
||||||
fastify.get('/library/downloads/status', controller.getDownloadStatus);
|
|
||||||
fastify.get('/library/stream/:type/:id/:unit/manifest', controller.getAnimeStreamManifest);
|
|
||||||
fastify.get('/library/hls/:hash/:filename', controller.serveHLSFile);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default localRoutes;
|
|
||||||
@@ -1,513 +0,0 @@
|
|||||||
import { getConfig as loadConfig } from '../../shared/config.js';
|
|
||||||
import { queryOne, queryAll, run } from '../../shared/database.js';
|
|
||||||
import crypto from 'crypto';
|
|
||||||
import fs from "fs";
|
|
||||||
import { PathLike } from "node:fs";
|
|
||||||
import path from "path";
|
|
||||||
import { getAnimeById, searchAnimeLocal } from "../anime/anime.service";
|
|
||||||
import { getBookById, searchBooksAniList } from "../books/books.service";
|
|
||||||
import AdmZip from 'adm-zip';
|
|
||||||
import { getStreamHash, getSubtitleFileStream } from './streaming.service';
|
|
||||||
|
|
||||||
const MANGA_IMAGE_EXTS = ['.jpg', '.jpeg', '.png', '.webp'];
|
|
||||||
const MANGA_ARCHIVES = ['.cbz', '.cbr', '.zip'];
|
|
||||||
const NOVEL_EXTS = ['.epub', '.pdf', '.txt', '.md', '.docx', '.mobi'];
|
|
||||||
|
|
||||||
function normalize(str: string) {
|
|
||||||
return str
|
|
||||||
.toLowerCase()
|
|
||||||
.normalize('NFD')
|
|
||||||
.replace(/[\u0300-\u036f]/g, '')
|
|
||||||
.replace(/[^a-z0-9 ]/g, '')
|
|
||||||
.trim();
|
|
||||||
}
|
|
||||||
|
|
||||||
function levenshtein(a: string, b: string) {
|
|
||||||
const matrix = Array.from({ length: b.length + 1 }, (_, i) => [i]);
|
|
||||||
|
|
||||||
for (let j = 0; j <= a.length; j++) matrix[0][j] = j;
|
|
||||||
|
|
||||||
for (let i = 1; i <= b.length; i++) {
|
|
||||||
for (let j = 1; j <= a.length; j++) {
|
|
||||||
matrix[i][j] = Math.min(
|
|
||||||
matrix[i - 1][j] + 1,
|
|
||||||
matrix[i][j - 1] + 1,
|
|
||||||
matrix[i - 1][j - 1] + (b[i - 1] === a[j - 1] ? 0 : 1)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return matrix[b.length][a.length];
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTitleVariants(media: any): string[] {
|
|
||||||
const t = media.title || {};
|
|
||||||
return [
|
|
||||||
t.romaji,
|
|
||||||
t.english,
|
|
||||||
t.native,
|
|
||||||
...(media.synonyms || [])
|
|
||||||
].filter(Boolean);
|
|
||||||
}
|
|
||||||
|
|
||||||
function scoreEntry(query: string, media: any) {
|
|
||||||
const q = normalize(query);
|
|
||||||
let best = Infinity;
|
|
||||||
|
|
||||||
for (const title of getTitleVariants(media)) {
|
|
||||||
const t = normalize(title);
|
|
||||||
|
|
||||||
if (t.includes(q) || q.includes(t)) {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
best = Math.min(best, levenshtein(q, t));
|
|
||||||
}
|
|
||||||
|
|
||||||
return best;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function resolveEntryMetadata(entry: any, type: string) {
|
|
||||||
let metadata = null;
|
|
||||||
let matchedId = entry.matched_id;
|
|
||||||
|
|
||||||
if (!matchedId) {
|
|
||||||
const query = entry.folder_name;
|
|
||||||
|
|
||||||
const results = type === 'anime'
|
|
||||||
? await searchAnimeLocal(query)
|
|
||||||
: await searchBooksAniList(query);
|
|
||||||
|
|
||||||
let picked = null;
|
|
||||||
|
|
||||||
let candidates = results;
|
|
||||||
|
|
||||||
if (type !== 'anime' && Array.isArray(results)) {
|
|
||||||
if (entry.type === 'novels') {
|
|
||||||
candidates = results.filter(r => r.format === 'NOVEL');
|
|
||||||
} else if (entry.type === 'manga') {
|
|
||||||
candidates = results.filter(r => r.format !== 'NOVEL');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(candidates) && candidates.length) {
|
|
||||||
const scored = candidates
|
|
||||||
.map(r => ({ r, score: scoreEntry(entry.folder_name, r) }))
|
|
||||||
.sort((a, b) => a.score - b.score);
|
|
||||||
|
|
||||||
// cutoff opcional
|
|
||||||
if (scored[0].score <= 10) {
|
|
||||||
picked = scored[0].r;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (picked?.id) {
|
|
||||||
matchedId = picked.id;
|
|
||||||
|
|
||||||
await run(
|
|
||||||
`UPDATE local_entries
|
|
||||||
SET matched_id = ?, matched_source = 'anilist'
|
|
||||||
WHERE id = ?`,
|
|
||||||
[matchedId, entry.id],
|
|
||||||
'local_library'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (matchedId) {
|
|
||||||
metadata = type === 'anime'
|
|
||||||
? await getAnimeById(matchedId)
|
|
||||||
: await getBookById(matchedId);
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
id: entry.id,
|
|
||||||
type: entry.type,
|
|
||||||
matched: !!matchedId,
|
|
||||||
metadata
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function performLibraryScan(mode: 'full' | 'incremental' = 'incremental') {
|
|
||||||
const { values } = loadConfig();
|
|
||||||
|
|
||||||
if (!values.library) {
|
|
||||||
throw new Error('NO_LIBRARY_CONFIGURED');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (mode === 'full') {
|
|
||||||
await run(`DELETE FROM local_files`, [], 'local_library');
|
|
||||||
await run(`DELETE FROM local_entries`, [], 'local_library');
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const [type, basePath] of Object.entries(values.library)) {
|
|
||||||
if (!basePath || !fs.existsSync(<PathLike>basePath)) continue;
|
|
||||||
|
|
||||||
const dirs = fs.readdirSync(<string>basePath, { withFileTypes: true }).filter(d => d.isDirectory());
|
|
||||||
|
|
||||||
for (const dir of dirs) {
|
|
||||||
const fullPath = path.join(<string>basePath, dir.name);
|
|
||||||
const id = crypto.createHash('sha1').update(fullPath).digest('hex');
|
|
||||||
const now = Date.now();
|
|
||||||
|
|
||||||
const existing = await queryOne(`SELECT id FROM local_entries WHERE id = ?`, [id], 'local_library');
|
|
||||||
|
|
||||||
if (existing) {
|
|
||||||
await run(`UPDATE local_entries SET last_scan = ? WHERE id = ?`, [now, id], 'local_library');
|
|
||||||
await run(`DELETE FROM local_files WHERE entry_id = ?`, [id], 'local_library');
|
|
||||||
} else {
|
|
||||||
await run(
|
|
||||||
`INSERT INTO local_entries (id, type, path, folder_name, last_scan) VALUES (?, ?, ?, ?, ?)`,
|
|
||||||
[id, type, fullPath, dir.name, now],
|
|
||||||
'local_library'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const files = fs.readdirSync(fullPath, { withFileTypes: true })
|
|
||||||
.filter(f =>
|
|
||||||
f.isFile() ||
|
|
||||||
(type === 'manga' && f.isDirectory())
|
|
||||||
)
|
|
||||||
.sort((a, b) => a.name.localeCompare(b.name));
|
|
||||||
|
|
||||||
let unit = 1;
|
|
||||||
|
|
||||||
for (const file of files) {
|
|
||||||
await run(
|
|
||||||
`INSERT INTO local_files (id, entry_id, file_path, unit_number)
|
|
||||||
VALUES (?, ?, ?, ?)`,
|
|
||||||
[crypto.randomUUID(), id, path.join(fullPath, file.name), unit],
|
|
||||||
'local_library'
|
|
||||||
);
|
|
||||||
unit++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return { status: 'OK' };
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getEntriesByType(type: string) {
|
|
||||||
const sql = `
|
|
||||||
SELECT local_entries.*, COUNT(local_files.id) as file_count
|
|
||||||
FROM local_entries
|
|
||||||
LEFT JOIN local_files ON local_entries.id = local_files.entry_id
|
|
||||||
WHERE local_entries.type = ?
|
|
||||||
GROUP BY local_entries.id
|
|
||||||
`;
|
|
||||||
const entries = await queryAll(sql, [type], 'local_library');
|
|
||||||
return await Promise.all(entries.map(async (entry: any) => {
|
|
||||||
const metadata = await resolveEntryMetadata(entry, type);
|
|
||||||
return {
|
|
||||||
...metadata,
|
|
||||||
path: entry.path,
|
|
||||||
files: entry.file_count
|
|
||||||
};
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getEntryDetails(type: string, id: string) {
|
|
||||||
const entry = await queryOne(
|
|
||||||
`SELECT * FROM local_entries WHERE matched_id = ? AND type = ?`,
|
|
||||||
[Number(id), type],
|
|
||||||
'local_library'
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!entry) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const [details, files] = await Promise.all([
|
|
||||||
resolveEntryMetadata(entry, type),
|
|
||||||
queryAll(
|
|
||||||
`SELECT id, file_path, unit_number FROM local_files WHERE entry_id = ? ORDER BY unit_number ASC`,
|
|
||||||
[id],
|
|
||||||
'local_library'
|
|
||||||
)
|
|
||||||
]);
|
|
||||||
|
|
||||||
return { ...details, files };
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getFileForStreaming(id: string, unit: string) {
|
|
||||||
const file = await queryOne(
|
|
||||||
`SELECT file_path FROM local_files WHERE entry_id = ? AND unit_number = ?`,
|
|
||||||
[id, unit],
|
|
||||||
'local_library'
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!file || !fs.existsSync(file.file_path)) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
filePath: file.file_path,
|
|
||||||
stat: fs.statSync(file.file_path)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function updateEntryMatch(id: string, type: string, source: string, matchedId: number | null) {
|
|
||||||
const entry = await queryOne(
|
|
||||||
`SELECT id FROM local_entries WHERE id = ? AND type = ?`,
|
|
||||||
[id, type],
|
|
||||||
'local_library'
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!entry) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
await run(
|
|
||||||
`UPDATE local_entries
|
|
||||||
SET matched_source = ?, matched_id = ?
|
|
||||||
WHERE id = ?`,
|
|
||||||
[source, matchedId, id],
|
|
||||||
'local_library'
|
|
||||||
);
|
|
||||||
|
|
||||||
return { status: 'OK', matched: !!matchedId };
|
|
||||||
}
|
|
||||||
|
|
||||||
function isImageFolder(folderPath: string): boolean {
|
|
||||||
if (!fs.existsSync(folderPath)) return false;
|
|
||||||
if (!fs.statSync(folderPath).isDirectory()) return false;
|
|
||||||
|
|
||||||
const files = fs.readdirSync(folderPath);
|
|
||||||
return files.some(f => MANGA_IMAGE_EXTS.includes(path.extname(f).toLowerCase()));
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getEntryUnits(id: string) {
|
|
||||||
const entry = await queryOne(
|
|
||||||
`SELECT id, type, matched_id FROM local_entries WHERE matched_id = ?`,
|
|
||||||
[Number(id)],
|
|
||||||
'local_library'
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!entry) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const files = await queryAll(
|
|
||||||
`SELECT id, file_path, unit_number FROM local_files
|
|
||||||
WHERE entry_id = ?
|
|
||||||
ORDER BY unit_number ASC`,
|
|
||||||
[entry.id],
|
|
||||||
'local_library'
|
|
||||||
);
|
|
||||||
|
|
||||||
const units = files
|
|
||||||
.map((file: any) => {
|
|
||||||
const fileExt = path.extname(file.file_path).toLowerCase();
|
|
||||||
const isDir = fs.existsSync(file.file_path) &&
|
|
||||||
fs.statSync(file.file_path).isDirectory();
|
|
||||||
|
|
||||||
if (entry.type === 'manga') {
|
|
||||||
if (MANGA_ARCHIVES.includes(fileExt)) {
|
|
||||||
return {
|
|
||||||
id: file.id,
|
|
||||||
number: file.unit_number,
|
|
||||||
name: path.basename(file.file_path),
|
|
||||||
type: 'chapter',
|
|
||||||
format: fileExt.replace('.', ''),
|
|
||||||
path: file.file_path
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isDir && isImageFolder(file.file_path)) {
|
|
||||||
return {
|
|
||||||
id: file.id,
|
|
||||||
number: file.unit_number,
|
|
||||||
name: path.basename(file.file_path),
|
|
||||||
type: 'chapter',
|
|
||||||
format: 'folder',
|
|
||||||
path: file.file_path
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (entry.type === 'novels') {
|
|
||||||
if (NOVEL_EXTS.includes(fileExt)) {
|
|
||||||
return {
|
|
||||||
id: file.id,
|
|
||||||
number: file.unit_number,
|
|
||||||
name: path.basename(file.file_path),
|
|
||||||
type: 'chapter',
|
|
||||||
format: fileExt.replace('.', ''),
|
|
||||||
path: file.file_path
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (entry.type === 'anime') {
|
|
||||||
return {
|
|
||||||
id: file.id,
|
|
||||||
number: file.unit_number,
|
|
||||||
name: path.basename(file.file_path),
|
|
||||||
type: 'episode',
|
|
||||||
format: fileExt.replace('.', ''),
|
|
||||||
path: file.file_path
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
})
|
|
||||||
.filter(Boolean);
|
|
||||||
|
|
||||||
return {
|
|
||||||
entry_id: entry.id,
|
|
||||||
matched_id: entry.matched_id,
|
|
||||||
type: entry.type,
|
|
||||||
total: units.length,
|
|
||||||
units
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getUnitManifest(unitId: string) {
|
|
||||||
const file = await queryOne(
|
|
||||||
`SELECT file_path FROM local_files WHERE id = ?`,
|
|
||||||
[unitId],
|
|
||||||
'local_library'
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!file || !fs.existsSync(file.file_path)) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ext = path.extname(file.file_path).toLowerCase();
|
|
||||||
|
|
||||||
if (['.cbz', '.cbr', '.zip'].includes(ext)) {
|
|
||||||
const zip = new AdmZip(file.file_path);
|
|
||||||
|
|
||||||
const pages = zip.getEntries()
|
|
||||||
.filter(e => !e.isDirectory && /\.(jpg|jpeg|png|webp)$/i.test(e.entryName))
|
|
||||||
.sort((a, b) => a.entryName.localeCompare(b.entryName, undefined, { numeric: true }))
|
|
||||||
.map((_, i) => ({
|
|
||||||
id: i,
|
|
||||||
url: `/api/library/${unitId}/resource/${i}`
|
|
||||||
}));
|
|
||||||
|
|
||||||
return {
|
|
||||||
type: 'manga',
|
|
||||||
format: 'archive',
|
|
||||||
pages
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (fs.statSync(file.file_path).isDirectory()) {
|
|
||||||
const pages = fs.readdirSync(file.file_path)
|
|
||||||
.filter(f => /\.(jpg|jpeg|png|webp)$/i.test(f))
|
|
||||||
.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }))
|
|
||||||
.map((_, i) => ({
|
|
||||||
id: i,
|
|
||||||
url: `/api/library/${unitId}/resource/${i}`
|
|
||||||
}));
|
|
||||||
|
|
||||||
return {
|
|
||||||
type: 'manga',
|
|
||||||
format: 'folder',
|
|
||||||
pages
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (ext === '.epub') {
|
|
||||||
return {
|
|
||||||
type: 'ln',
|
|
||||||
format: 'epub',
|
|
||||||
url: `/api/library/${unitId}/resource/epub`
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (['.txt', '.md'].includes(ext)) {
|
|
||||||
return {
|
|
||||||
type: 'ln',
|
|
||||||
format: 'text',
|
|
||||||
url: `/api/library/${unitId}/resource/text`
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (ext === '.pdf') {
|
|
||||||
return {
|
|
||||||
type: 'ln',
|
|
||||||
format: 'pdf',
|
|
||||||
url: `/api/library/${unitId}/resource/pdf`
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
throw new Error('UNSUPPORTED_FORMAT');
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getUnitResource(unitId: string, resId: string) {
|
|
||||||
const file = await queryOne(
|
|
||||||
`SELECT file_path FROM local_files WHERE id = ?`,
|
|
||||||
[unitId],
|
|
||||||
'local_library'
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!file) return null;
|
|
||||||
|
|
||||||
const ext = path.extname(file.file_path).toLowerCase();
|
|
||||||
|
|
||||||
if (['.cbz', '.zip', '.cbr'].includes(ext)) {
|
|
||||||
const zip = new AdmZip(file.file_path);
|
|
||||||
const images = zip.getEntries()
|
|
||||||
.filter(e => !e.isDirectory && /\.(jpg|jpeg|png|webp)$/i.test(e.entryName))
|
|
||||||
.sort((a, b) => a.entryName.localeCompare(b.entryName, undefined, { numeric: true }));
|
|
||||||
|
|
||||||
const entry = images[Number(resId)];
|
|
||||||
if (!entry) return null;
|
|
||||||
|
|
||||||
return {
|
|
||||||
type: 'image',
|
|
||||||
data: entry.getData()
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (fs.statSync(file.file_path).isDirectory()) {
|
|
||||||
const images = fs.readdirSync(file.file_path)
|
|
||||||
.filter(f => /\.(jpg|jpeg|png|webp)$/i.test(f))
|
|
||||||
.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
|
|
||||||
|
|
||||||
const img = images[Number(resId)];
|
|
||||||
if (!img) return null;
|
|
||||||
|
|
||||||
const imgPath = path.join(file.file_path, img);
|
|
||||||
const stat = fs.statSync(imgPath);
|
|
||||||
|
|
||||||
return {
|
|
||||||
type: 'image',
|
|
||||||
path: imgPath,
|
|
||||||
size: stat.size
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (ext === '.epub') {
|
|
||||||
const html = await parseEpubToHtml(file.file_path);
|
|
||||||
|
|
||||||
return {
|
|
||||||
type: 'html',
|
|
||||||
data: html
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (['.txt', '.md'].includes(ext)) {
|
|
||||||
const text = fs.readFileSync(file.file_path, 'utf8');
|
|
||||||
|
|
||||||
return {
|
|
||||||
type: 'html',
|
|
||||||
data: `<div class="ln-content"><pre>${text}</pre></div>`
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function parseEpubToHtml(filePath: string) {
|
|
||||||
const zip = new AdmZip(filePath);
|
|
||||||
const entry = zip.getEntry('OEBPS/chapter.xhtml');
|
|
||||||
if (!entry) throw new Error('CHAPTER_NOT_FOUND');
|
|
||||||
return entry.getData().toString('utf8');
|
|
||||||
}
|
|
||||||
@@ -1,622 +0,0 @@
|
|||||||
import { getConfig as loadConfig } from '../../shared/config';
|
|
||||||
import { queryOne } from '../../shared/database';
|
|
||||||
import crypto from 'crypto';
|
|
||||||
import fs from 'fs';
|
|
||||||
import path from 'path';
|
|
||||||
import { spawn } from 'child_process';
|
|
||||||
|
|
||||||
const { values } = loadConfig();
|
|
||||||
const FFMPEG_PATH = values.paths?.ffmpeg || 'ffmpeg';
|
|
||||||
const FFPROBE_PATH = values.paths?.ffprobe || 'ffprobe';
|
|
||||||
|
|
||||||
const STREAM_TTL = 2 * 60 * 60 * 1000;
|
|
||||||
|
|
||||||
type VideoStreamInfo = {
|
|
||||||
index: number;
|
|
||||||
codec: string;
|
|
||||||
width: number;
|
|
||||||
height: number;
|
|
||||||
fps: number;
|
|
||||||
};
|
|
||||||
|
|
||||||
type AudioStreamInfo = {
|
|
||||||
index: number;
|
|
||||||
codec: string;
|
|
||||||
language?: string;
|
|
||||||
title?: string;
|
|
||||||
channels: number;
|
|
||||||
sampleRate: number;
|
|
||||||
};
|
|
||||||
|
|
||||||
type SubtitleStreamInfo = {
|
|
||||||
index: number;
|
|
||||||
codec: string;
|
|
||||||
language?: string;
|
|
||||||
title?: string;
|
|
||||||
duration: number;
|
|
||||||
};
|
|
||||||
|
|
||||||
type ChapterInfo = {
|
|
||||||
id: number;
|
|
||||||
start: number;
|
|
||||||
end: number;
|
|
||||||
title: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
type MediaInfo = {
|
|
||||||
video: VideoStreamInfo[];
|
|
||||||
audio: AudioStreamInfo[];
|
|
||||||
subtitles: SubtitleStreamInfo[];
|
|
||||||
chapters: ChapterInfo[];
|
|
||||||
duration: number;
|
|
||||||
};
|
|
||||||
|
|
||||||
type ActiveStream = {
|
|
||||||
hash: string;
|
|
||||||
filePath: string;
|
|
||||||
hlsDir: string;
|
|
||||||
info: MediaInfo;
|
|
||||||
process?: any;
|
|
||||||
startedAt: number;
|
|
||||||
lastAccessed: number;
|
|
||||||
isComplete: boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
const activeStreams = new Map<string, ActiveStream>();
|
|
||||||
|
|
||||||
setInterval(() => {
|
|
||||||
const now = Date.now();
|
|
||||||
|
|
||||||
for (const [hash, stream] of activeStreams.entries()) {
|
|
||||||
const age = now - stream.lastAccessed;
|
|
||||||
|
|
||||||
if (age > STREAM_TTL) {
|
|
||||||
console.log(`🗑️ Limpiando stream antiguo: ${hash}`);
|
|
||||||
|
|
||||||
if (stream.process && !stream.process.killed) {
|
|
||||||
stream.process.kill('SIGKILL');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (fs.existsSync(stream.hlsDir)) {
|
|
||||||
fs.rmSync(stream.hlsDir, { recursive: true, force: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
activeStreams.delete(hash);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, 60 * 1000);
|
|
||||||
|
|
||||||
export function getStreamHash(filePath: string): string {
|
|
||||||
const stat = fs.statSync(filePath);
|
|
||||||
return crypto
|
|
||||||
.createHash('md5')
|
|
||||||
.update(`${filePath}-${stat.mtime.getTime()}`)
|
|
||||||
.digest('hex');
|
|
||||||
}
|
|
||||||
|
|
||||||
function ensureHLSDirectory(hash: string): string {
|
|
||||||
const tempDir = path.join(require('os').tmpdir(), 'hls-streams', hash);
|
|
||||||
|
|
||||||
if (!fs.existsSync(tempDir)) {
|
|
||||||
fs.mkdirSync(tempDir, { recursive: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
return tempDir;
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildStreamMap(info: MediaInfo): string {
|
|
||||||
const maps: string[] = [];
|
|
||||||
|
|
||||||
maps.push(`v:0,a:0`);
|
|
||||||
|
|
||||||
return maps.join(' ');
|
|
||||||
}
|
|
||||||
|
|
||||||
function writeMasterPlaylist(info: MediaInfo, hlsDir: string) {
|
|
||||||
const lines: string[] = ['#EXTM3U'];
|
|
||||||
|
|
||||||
info.audio.forEach((a, i) => {
|
|
||||||
lines.push(
|
|
||||||
`#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",NAME="${a.title || `Audio ${i+1}`}",LANGUAGE="${a.language || 'und'}",AUTOSELECT=YES,DEFAULT=${i===0?'YES':'NO'},URI="audio_${i}.m3u8"`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
info.subtitles.forEach((s, i) => {
|
|
||||||
lines.push(
|
|
||||||
`#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="${s.title || `Sub ${i+1}`}",LANGUAGE="${s.language || 'und'}",AUTOSELECT=YES,DEFAULT=NO,URI="subs_${i}.m3u8"`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
const v = info.video[0];
|
|
||||||
const bandwidth = v.width * v.height * v.fps * 0.07 | 0;
|
|
||||||
|
|
||||||
lines.push(
|
|
||||||
`#EXT-X-STREAM-INF:BANDWIDTH=${bandwidth},RESOLUTION=${v.width}x${v.height},AUDIO="audio"${info.subtitles.length ? ',SUBTITLES="subs"' : ''}`
|
|
||||||
);
|
|
||||||
lines.push('video.m3u8');
|
|
||||||
|
|
||||||
fs.writeFileSync(path.join(hlsDir, 'master.m3u8'), lines.join('\n'));
|
|
||||||
}
|
|
||||||
|
|
||||||
function startHLSConversion(filePath: string, info: MediaInfo, hash: string): ActiveStream {
|
|
||||||
const hlsDir = ensureHLSDirectory(hash);
|
|
||||||
|
|
||||||
const stream: ActiveStream = {
|
|
||||||
hash,
|
|
||||||
filePath,
|
|
||||||
hlsDir,
|
|
||||||
info,
|
|
||||||
process: null,
|
|
||||||
startedAt: Date.now(),
|
|
||||||
lastAccessed: Date.now(),
|
|
||||||
isComplete: false
|
|
||||||
};
|
|
||||||
|
|
||||||
activeStreams.set(hash, stream);
|
|
||||||
|
|
||||||
(async () => {
|
|
||||||
try {
|
|
||||||
|
|
||||||
await extractSubtitles(filePath, info, hlsDir);
|
|
||||||
|
|
||||||
writeMasterPlaylist(info, hlsDir);
|
|
||||||
|
|
||||||
startVideoTranscoding(stream, filePath, info, hlsDir);
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error('❌ Error en el flujo de inicio:', err);
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
|
|
||||||
return stream;
|
|
||||||
}
|
|
||||||
|
|
||||||
function startVideoTranscoding(stream: ActiveStream, filePath: string, info: MediaInfo, hlsDir: string) {
|
|
||||||
const args: string[] = ['-i', filePath];
|
|
||||||
|
|
||||||
args.push(
|
|
||||||
'-map', '0:v:0',
|
|
||||||
'-c:v', 'libx264',
|
|
||||||
'-preset', 'veryfast',
|
|
||||||
'-profile:v', 'main',
|
|
||||||
'-g', '48',
|
|
||||||
'-keyint_min', '48',
|
|
||||||
'-sc_threshold', '0',
|
|
||||||
'-pix_fmt', 'yuv420p',
|
|
||||||
'-f', 'hls',
|
|
||||||
'-hls_time', '4',
|
|
||||||
'-hls_playlist_type', 'event',
|
|
||||||
|
|
||||||
'-hls_flags', 'independent_segments',
|
|
||||||
'-hls_segment_filename', path.join(hlsDir, 'v_%05d.ts'),
|
|
||||||
path.join(hlsDir, 'video.m3u8')
|
|
||||||
);
|
|
||||||
|
|
||||||
info.audio.forEach((a, i) => {
|
|
||||||
args.push(
|
|
||||||
'-map', `0:${a.index}`,
|
|
||||||
`-c:a:${i}`, 'aac',
|
|
||||||
`-b:a:${i}`, '128k',
|
|
||||||
'-f', 'hls',
|
|
||||||
'-hls_time', '4',
|
|
||||||
'-hls_playlist_type', 'event',
|
|
||||||
'-hls_flags', 'independent_segments',
|
|
||||||
'-hls_segment_filename', path.join(hlsDir, `a${i}_%05d.ts`),
|
|
||||||
path.join(hlsDir, `audio_${i}.m3u8`)
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('🎬 Starting Video/Audio transcoding:', args.join(' '));
|
|
||||||
|
|
||||||
const ffmpeg = spawn(FFMPEG_PATH, args, {
|
|
||||||
windowsHide: true,
|
|
||||||
stdio: ['ignore', 'pipe', 'pipe']
|
|
||||||
});
|
|
||||||
|
|
||||||
stream.process = ffmpeg;
|
|
||||||
|
|
||||||
ffmpeg.stderr.on('data', (data) => {
|
|
||||||
const text = data.toString();
|
|
||||||
|
|
||||||
if (text.includes('time=')) {
|
|
||||||
const timeMatch = text.match(/time=(\S+)/);
|
|
||||||
if (timeMatch) console.log(`⏱️ Converting ${stream.hash.substr(0,6)}: ${timeMatch[1]}`);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
ffmpeg.on('close', (code) => {
|
|
||||||
if (code === 0) {
|
|
||||||
console.log('✅ Video transcoding complete');
|
|
||||||
stream.isComplete = true;
|
|
||||||
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const SUBTITLE_EXTENSIONS: Record<string, string> = {
|
|
||||||
'ass': 'ass',
|
|
||||||
'ssa': 'ass',
|
|
||||||
'subrip': 'srt',
|
|
||||||
'webvtt': 'vtt',
|
|
||||||
'hdmv_pgs_subtitle': 'sup',
|
|
||||||
'mov_text': 'srt',
|
|
||||||
'dvd_subtitle': 'sub',
|
|
||||||
'text': 'srt'
|
|
||||||
};
|
|
||||||
|
|
||||||
async function extractSubtitles(filePath: string, info: MediaInfo, hlsDir: string): Promise<void> {
|
|
||||||
if (info.subtitles.length === 0) return;
|
|
||||||
|
|
||||||
console.log('📝 Extrayendo subtítulos...');
|
|
||||||
|
|
||||||
const promises = info.subtitles.map((s, i) => {
|
|
||||||
return new Promise<void>((resolve, reject) => {
|
|
||||||
const codec = s.codec.toLowerCase();
|
|
||||||
const ext = codec === 'subrip' ? 'srt'
|
|
||||||
: codec === 'ass' || codec === 'ssa' ? 'ass'
|
|
||||||
: codec === 'webvtt' ? 'vtt'
|
|
||||||
: 'sub';
|
|
||||||
|
|
||||||
const outputFilename = `s${i}_full.${ext}`;
|
|
||||||
const outputPath = path.join(hlsDir, outputFilename);
|
|
||||||
const playlistPath = path.join(hlsDir, `subs_${i}.m3u8`);
|
|
||||||
|
|
||||||
if (s.duration === 0) {
|
|
||||||
console.log(`⚠️ Sub vacío, skip: ${i}`);
|
|
||||||
createDummySubtitlePlaylist(playlistPath, outputFilename, info.duration);
|
|
||||||
fs.writeFileSync(outputPath, '');
|
|
||||||
resolve();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(` Track ${i}: ${s.title || s.language || 'Unknown'} [${codec}] -> ${ext}`);
|
|
||||||
|
|
||||||
const args = [
|
|
||||||
'-i', filePath,
|
|
||||||
'-map', `0:s:${i}`
|
|
||||||
];
|
|
||||||
|
|
||||||
args.push('-c:s', 'copy');
|
|
||||||
args.push('-y', outputPath);
|
|
||||||
|
|
||||||
console.log(` Comando: ffmpeg ${args.join(' ')}`);
|
|
||||||
|
|
||||||
const p = spawn(FFMPEG_PATH, args, {
|
|
||||||
stdio: ['ignore', 'pipe', 'pipe']
|
|
||||||
});
|
|
||||||
|
|
||||||
let errorOutput = '';
|
|
||||||
|
|
||||||
p.stderr.on('data', (data) => {
|
|
||||||
errorOutput += data.toString();
|
|
||||||
});
|
|
||||||
|
|
||||||
p.on('close', (code) => {
|
|
||||||
if (code === 0) {
|
|
||||||
try {
|
|
||||||
|
|
||||||
if (!fs.existsSync(outputPath)) {
|
|
||||||
console.error(` ❌ Archivo no creado: ${outputFilename}`);
|
|
||||||
|
|
||||||
fs.writeFileSync(outputPath, '');
|
|
||||||
} else {
|
|
||||||
const stat = fs.statSync(outputPath);
|
|
||||||
if (stat.size === 0) {
|
|
||||||
console.error(` ⚠️ Subtítulo ${i} tiene 0 bytes`);
|
|
||||||
console.error(` FFmpeg stderr:`, errorOutput.slice(-500));
|
|
||||||
} else {
|
|
||||||
console.log(` ✅ Subtítulo ${i} extraído: ${stat.size} bytes`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
createDummySubtitlePlaylist(playlistPath, outputFilename, info.duration);
|
|
||||||
resolve();
|
|
||||||
} catch (e) {
|
|
||||||
console.error(` Error procesando subtítulo ${i}:`, e);
|
|
||||||
resolve();
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
console.error(` ❌ Error extrayendo subtítulo ${i}. Exit code: ${code}`);
|
|
||||||
console.error(` FFmpeg stderr:`, errorOutput.slice(-500));
|
|
||||||
|
|
||||||
fs.writeFileSync(outputPath, '');
|
|
||||||
createDummySubtitlePlaylist(playlistPath, outputFilename, info.duration);
|
|
||||||
resolve();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
p.on('error', (err) => {
|
|
||||||
console.error(` Error spawn ffmpeg subs ${i}:`, err);
|
|
||||||
fs.writeFileSync(outputPath, '');
|
|
||||||
createDummySubtitlePlaylist(playlistPath, outputFilename, info.duration);
|
|
||||||
resolve();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
await Promise.all(promises);
|
|
||||||
console.log('✅ Proceso de subtítulos finalizado.');
|
|
||||||
}
|
|
||||||
|
|
||||||
function createDummySubtitlePlaylist(playlistPath: string, subtitleFilename: string, duration: number) {
|
|
||||||
const content = [
|
|
||||||
'#EXTM3U',
|
|
||||||
'#EXT-X-VERSION:3',
|
|
||||||
`#EXT-X-TARGETDURATION:${Math.ceil(duration)}`,
|
|
||||||
'#EXT-X-MEDIA-SEQUENCE:0',
|
|
||||||
'#EXT-X-PLAYLIST-TYPE:VOD',
|
|
||||||
`#EXTINF:${duration.toFixed(6)},`,
|
|
||||||
subtitleFilename,
|
|
||||||
'#EXT-X-ENDLIST'
|
|
||||||
].join('\n');
|
|
||||||
|
|
||||||
fs.writeFileSync(playlistPath, content);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function probeMediaFile(filePath: string): Promise<MediaInfo> {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const args = [
|
|
||||||
'-v', 'quiet',
|
|
||||||
'-print_format', 'json',
|
|
||||||
'-show_streams',
|
|
||||||
'-show_chapters',
|
|
||||||
'-show_format',
|
|
||||||
filePath
|
|
||||||
];
|
|
||||||
|
|
||||||
const ffprobe = spawn(FFPROBE_PATH, args);
|
|
||||||
let output = '';
|
|
||||||
|
|
||||||
ffprobe.stdout.on('data', (data) => {
|
|
||||||
output += data.toString();
|
|
||||||
});
|
|
||||||
|
|
||||||
ffprobe.on('close', (code) => {
|
|
||||||
if (code !== 0) {
|
|
||||||
return reject(new Error(`FFprobe failed with code ${code}`));
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const data = JSON.parse(output);
|
|
||||||
|
|
||||||
const video: VideoStreamInfo[] = data.streams
|
|
||||||
.filter((s: any) => s.codec_type === 'video')
|
|
||||||
.map((s: any) => ({
|
|
||||||
index: s.index,
|
|
||||||
codec: s.codec_name,
|
|
||||||
width: s.width,
|
|
||||||
height: s.height,
|
|
||||||
fps: eval(s.r_frame_rate) || 24
|
|
||||||
}));
|
|
||||||
|
|
||||||
const audio: AudioStreamInfo[] = data.streams
|
|
||||||
.filter((s: any) => s.codec_type === 'audio')
|
|
||||||
.map((s: any) => ({
|
|
||||||
index: s.index,
|
|
||||||
codec: s.codec_name,
|
|
||||||
language: s.tags?.language,
|
|
||||||
title: s.tags?.title,
|
|
||||||
channels: s.channels || 2,
|
|
||||||
sampleRate: parseInt(s.sample_rate) || 48000
|
|
||||||
}));
|
|
||||||
|
|
||||||
const subtitles: SubtitleStreamInfo[] = data.streams
|
|
||||||
.filter((s: any) => s.codec_type === 'subtitle')
|
|
||||||
.map((s: any) => ({
|
|
||||||
index: s.index,
|
|
||||||
codec: s.codec_name,
|
|
||||||
language: s.tags?.language,
|
|
||||||
title: s.tags?.title,
|
|
||||||
duration: parseFloat(s.duration) || 0
|
|
||||||
}));
|
|
||||||
|
|
||||||
const chapters: ChapterInfo[] = (data.chapters || []).map((c: any) => ({
|
|
||||||
id: c.id,
|
|
||||||
start: parseFloat(c.start_time),
|
|
||||||
end: parseFloat(c.end_time),
|
|
||||||
title: c.tags?.title || `Chapter ${c.id + 1}`
|
|
||||||
}));
|
|
||||||
|
|
||||||
const duration = parseFloat(data.format?.duration) || 0;
|
|
||||||
|
|
||||||
console.log(`📊 Media info: ${video.length} video, ${audio.length} audio, ${subtitles.length} subs`);
|
|
||||||
|
|
||||||
resolve({ video, audio, subtitles, chapters, duration });
|
|
||||||
} catch (e) {
|
|
||||||
reject(e);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
ffprobe.on('error', reject);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getStreamingManifest(filePath: string) {
|
|
||||||
if (!fs.existsSync(filePath)) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const hash = getStreamHash(filePath);
|
|
||||||
|
|
||||||
const formatSubtitles = (subs: SubtitleStreamInfo[]) => {
|
|
||||||
return subs.map((s, i) => {
|
|
||||||
const ext = SUBTITLE_EXTENSIONS[s.codec] || 'vtt';
|
|
||||||
return {
|
|
||||||
index: s.index,
|
|
||||||
codec: s.codec,
|
|
||||||
language: s.language || 'und',
|
|
||||||
title: s.title || `Subtitle ${s.index}`,
|
|
||||||
|
|
||||||
url: `/api/library/hls/${hash}/s${i}_full.${ext}`
|
|
||||||
};
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const existing = activeStreams.get(hash);
|
|
||||||
if (existing) {
|
|
||||||
existing.lastAccessed = Date.now();
|
|
||||||
|
|
||||||
return {
|
|
||||||
type: 'hls',
|
|
||||||
hash,
|
|
||||||
masterPlaylist: `/api/library/hls/${hash}/master.m3u8`,
|
|
||||||
duration: existing.info.duration,
|
|
||||||
isComplete: existing.isComplete,
|
|
||||||
video: existing.info.video.map(v => ({
|
|
||||||
index: v.index,
|
|
||||||
codec: v.codec,
|
|
||||||
resolution: `${v.width}x${v.height}`,
|
|
||||||
fps: v.fps
|
|
||||||
})),
|
|
||||||
audio: existing.info.audio.map(a => ({
|
|
||||||
index: a.index,
|
|
||||||
codec: a.codec,
|
|
||||||
language: a.language || 'und',
|
|
||||||
title: a.title || `Audio ${a.index}`,
|
|
||||||
channels: a.channels
|
|
||||||
})),
|
|
||||||
|
|
||||||
subtitles: formatSubtitles(existing.info.subtitles),
|
|
||||||
chapters: existing.info.chapters.map(c => ({
|
|
||||||
id: c.id,
|
|
||||||
start: c.start,
|
|
||||||
end: c.end,
|
|
||||||
title: c.title
|
|
||||||
}))
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const duplicateCheck = activeStreams.get(hash);
|
|
||||||
|
|
||||||
if (duplicateCheck) {
|
|
||||||
duplicateCheck.lastAccessed = Date.now();
|
|
||||||
return {
|
|
||||||
type: 'hls',
|
|
||||||
hash,
|
|
||||||
masterPlaylist: `/api/library/hls/${hash}/master.m3u8`,
|
|
||||||
duration: duplicateCheck.info.duration,
|
|
||||||
isComplete: duplicateCheck.isComplete,
|
|
||||||
video: duplicateCheck.info.video.map(v => ({
|
|
||||||
index: v.index,
|
|
||||||
codec: v.codec,
|
|
||||||
resolution: `${v.width}x${v.height}`,
|
|
||||||
fps: v.fps
|
|
||||||
})),
|
|
||||||
audio: duplicateCheck.info.audio.map(a => ({
|
|
||||||
index: a.index,
|
|
||||||
codec: a.codec,
|
|
||||||
language: a.language || 'und',
|
|
||||||
title: a.title || `Audio ${a.index}`,
|
|
||||||
channels: a.channels
|
|
||||||
})),
|
|
||||||
subtitles: formatSubtitles(duplicateCheck.info.subtitles),
|
|
||||||
chapters: duplicateCheck.info.chapters.map(c => ({
|
|
||||||
id: c.id,
|
|
||||||
start: c.start,
|
|
||||||
end: c.end,
|
|
||||||
title: c.title
|
|
||||||
}))
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const info = await probeMediaFile(filePath);
|
|
||||||
return {
|
|
||||||
type: 'hls',
|
|
||||||
hash,
|
|
||||||
masterPlaylist: `/api/library/hls/${hash}/master.m3u8`,
|
|
||||||
duration: info.duration,
|
|
||||||
isComplete: false,
|
|
||||||
generating: true,
|
|
||||||
video: info.video.map(v => ({
|
|
||||||
index: v.index,
|
|
||||||
codec: v.codec,
|
|
||||||
resolution: `${v.width}x${v.height}`,
|
|
||||||
fps: v.fps
|
|
||||||
})),
|
|
||||||
audio: info.audio.map(a => ({
|
|
||||||
index: a.index,
|
|
||||||
codec: a.codec,
|
|
||||||
language: a.language || 'und',
|
|
||||||
title: a.title || `Audio ${a.index}`,
|
|
||||||
channels: a.channels
|
|
||||||
})),
|
|
||||||
subtitles: formatSubtitles(info.subtitles),
|
|
||||||
chapters: info.chapters.map(c => ({
|
|
||||||
id: c.id,
|
|
||||||
start: c.start,
|
|
||||||
end: c.end,
|
|
||||||
title: c.title
|
|
||||||
}))
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getSubtitleFileStream(hash: string, trackIndex: number) {
|
|
||||||
const stream = activeStreams.get(hash);
|
|
||||||
|
|
||||||
if (!stream) {
|
|
||||||
|
|
||||||
const tempDir = path.join(require('os').tmpdir(), 'hls-streams', hash);
|
|
||||||
if(fs.existsSync(tempDir)) {
|
|
||||||
|
|
||||||
const files = fs.readdirSync(tempDir);
|
|
||||||
const subFile = files.find(f => f.startsWith(`s${trackIndex}_full.`));
|
|
||||||
if (subFile) return fs.createReadStream(path.join(tempDir, subFile));
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!fs.existsSync(stream.hlsDir)) return null;
|
|
||||||
|
|
||||||
const files = fs.readdirSync(stream.hlsDir);
|
|
||||||
const subtitleFile = files.find(f => f.startsWith(`s${trackIndex}_full.`));
|
|
||||||
|
|
||||||
if (!subtitleFile) return null;
|
|
||||||
|
|
||||||
return fs.createReadStream(path.join(stream.hlsDir, subtitleFile));
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getHLSFile(hash: string, filename: string) {
|
|
||||||
const stream = activeStreams.get(hash);
|
|
||||||
|
|
||||||
if (!stream) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
stream.lastAccessed = Date.now();
|
|
||||||
|
|
||||||
const filePath = path.join(stream.hlsDir, filename);
|
|
||||||
|
|
||||||
const maxWait = 30000;
|
|
||||||
|
|
||||||
const startWait = Date.now();
|
|
||||||
|
|
||||||
while (!fs.existsSync(filePath)) {
|
|
||||||
if (Date.now() - startWait > maxWait) {
|
|
||||||
console.error(`⏱️ Timeout esperando archivo: ${filename}`);
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (stream.isComplete && !fs.existsSync(filePath)) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 100));
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
path: filePath,
|
|
||||||
stat: fs.statSync(filePath)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getActiveStreamsStatus() {
|
|
||||||
return Array.from(activeStreams.values()).map(stream => ({
|
|
||||||
hash: stream.hash,
|
|
||||||
filePath: stream.filePath,
|
|
||||||
isComplete: stream.isComplete,
|
|
||||||
startedAt: stream.startedAt,
|
|
||||||
lastAccessed: stream.lastAccessed,
|
|
||||||
age: Date.now() - stream.startedAt,
|
|
||||||
idle: Date.now() - stream.lastAccessed
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
@@ -1,115 +0,0 @@
|
|||||||
import {FastifyReply, FastifyRequest} from 'fastify';
|
|
||||||
import {processM3U8Content, proxyRequest, streamToReadable} from './proxy.service';
|
|
||||||
|
|
||||||
interface ProxyQuerystring {
|
|
||||||
url: string;
|
|
||||||
referer?: string;
|
|
||||||
origin?: string;
|
|
||||||
userAgent?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
type ProxyRequest = FastifyRequest<{
|
|
||||||
Querystring: ProxyQuerystring
|
|
||||||
}>;
|
|
||||||
|
|
||||||
export async function handleProxy(req: ProxyRequest, reply: FastifyReply) {
|
|
||||||
const { url, referer, origin, userAgent } = req.query;
|
|
||||||
|
|
||||||
if (!url) {
|
|
||||||
return reply.code(400).send({ error: "No URL provided" });
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const rangeHeader = req.headers.range;
|
|
||||||
|
|
||||||
const { response, contentType, isM3U8, contentLength } = await proxyRequest(url, {
|
|
||||||
referer,
|
|
||||||
origin,
|
|
||||||
userAgent
|
|
||||||
}, rangeHeader);
|
|
||||||
|
|
||||||
|
|
||||||
reply.header('Access-Control-Allow-Origin', '*');
|
|
||||||
reply.header('Access-Control-Allow-Methods', 'GET, OPTIONS');
|
|
||||||
reply.header('Access-Control-Allow-Headers', 'Content-Type, Range');
|
|
||||||
reply.header('Access-Control-Expose-Headers', 'Content-Length, Content-Range, Accept-Ranges');
|
|
||||||
|
|
||||||
if (isM3U8) {
|
|
||||||
reply.header('Content-Type', 'application/vnd.apple.mpegurl');
|
|
||||||
|
|
||||||
const text = await response.text();
|
|
||||||
const baseUrl = new URL(response.url);
|
|
||||||
|
|
||||||
const processedContent = processM3U8Content(text, baseUrl, {
|
|
||||||
referer,
|
|
||||||
origin,
|
|
||||||
userAgent
|
|
||||||
});
|
|
||||||
|
|
||||||
return reply.send(processedContent);
|
|
||||||
}
|
|
||||||
|
|
||||||
const isSubtitle = url.includes('.vtt') || url.includes('.srt') || url.includes('.ass') ||
|
|
||||||
contentType?.includes('text/vtt') || contentType?.includes('text/srt');
|
|
||||||
|
|
||||||
if (isSubtitle) {
|
|
||||||
const text = await response.text();
|
|
||||||
|
|
||||||
let mimeType = 'text/vtt';
|
|
||||||
if (url.includes('.srt') || contentType?.includes('srt')) {
|
|
||||||
mimeType = 'text/plain';
|
|
||||||
} else if (url.includes('.ass')) {
|
|
||||||
mimeType = 'text/plain';
|
|
||||||
}
|
|
||||||
|
|
||||||
reply.header('Content-Type', mimeType);
|
|
||||||
reply.header('Cache-Control', 'public, max-age=3600');
|
|
||||||
return reply.send(text);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (contentType) {
|
|
||||||
reply.header('Content-Type', contentType);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (response.status === 206) {
|
|
||||||
const contentRange = response.headers.get('content-range');
|
|
||||||
if (contentRange) {
|
|
||||||
reply.header('Content-Range', contentRange);
|
|
||||||
}
|
|
||||||
reply.code(206);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (contentLength) {
|
|
||||||
reply.header('Content-Length', contentLength);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (contentType?.startsWith('image/') || contentType?.startsWith('video/')) {
|
|
||||||
reply.header('Cache-Control', 'public, max-age=31536000, immutable');
|
|
||||||
}
|
|
||||||
|
|
||||||
reply.header('Accept-Ranges', 'bytes');
|
|
||||||
|
|
||||||
return reply.send(streamToReadable(response.body!));
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
req.server.log.error(err);
|
|
||||||
console.error('=== PROXY ERROR ===');
|
|
||||||
console.error('URL:', url);
|
|
||||||
console.error('Error:', err);
|
|
||||||
console.error('===================');
|
|
||||||
|
|
||||||
if (!reply.sent) {
|
|
||||||
return reply.code(500).send({
|
|
||||||
error: "Internal Server Error",
|
|
||||||
details: err instanceof Error ? err.message : String(err)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function handleProxyOptions(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
reply.header('Access-Control-Allow-Origin', '*');
|
|
||||||
reply.header('Access-Control-Allow-Methods', 'GET, OPTIONS');
|
|
||||||
reply.header('Access-Control-Allow-Headers', 'Content-Type, Range');
|
|
||||||
return reply.code(204).send();
|
|
||||||
}
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
import { FastifyInstance } from 'fastify';
|
|
||||||
import {handleProxy, handleProxyOptions} from './proxy.controller';
|
|
||||||
|
|
||||||
async function proxyRoutes(fastify: FastifyInstance) {
|
|
||||||
fastify.get('/proxy', handleProxy);
|
|
||||||
fastify.options('/proxy', handleProxyOptions);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default proxyRoutes;
|
|
||||||
@@ -1,175 +0,0 @@
|
|||||||
import {Readable} from 'stream';
|
|
||||||
|
|
||||||
interface ProxyHeaders {
|
|
||||||
referer?: string;
|
|
||||||
origin?: string;
|
|
||||||
userAgent?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ProxyResponse {
|
|
||||||
response: Response;
|
|
||||||
contentType: string | null;
|
|
||||||
isM3U8: boolean;
|
|
||||||
contentLength: string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function proxyRequest(url: string, { referer, origin, userAgent }: ProxyHeaders, rangeHeader?: string): Promise<ProxyResponse> {
|
|
||||||
const headers: Record<string, string> = {
|
|
||||||
'User-Agent': userAgent || "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
|
|
||||||
'Accept': '*/*',
|
|
||||||
'Accept-Language': 'en-US,en;q=0.9',
|
|
||||||
'Accept-Encoding': 'identity',
|
|
||||||
'Connection': 'keep-alive'
|
|
||||||
};
|
|
||||||
|
|
||||||
if (referer) headers['Referer'] = referer;
|
|
||||||
if (origin) headers['Origin'] = origin;
|
|
||||||
if (rangeHeader) headers['Range'] = rangeHeader;
|
|
||||||
|
|
||||||
let lastError: Error | null = null;
|
|
||||||
const maxRetries = 2;
|
|
||||||
|
|
||||||
for (let attempt = 0; attempt < maxRetries; attempt++) {
|
|
||||||
try {
|
|
||||||
const controller = new AbortController();
|
|
||||||
const timeoutId = setTimeout(() => controller.abort(), 60000);
|
|
||||||
|
|
||||||
const response = await fetch(url, {
|
|
||||||
headers,
|
|
||||||
redirect: 'follow',
|
|
||||||
signal: controller.signal
|
|
||||||
});
|
|
||||||
|
|
||||||
clearTimeout(timeoutId);
|
|
||||||
|
|
||||||
if (!response.ok && response.status !== 206) {
|
|
||||||
if (response.status === 404 || response.status === 403) {
|
|
||||||
throw new Error(`Proxy Error: ${response.status} ${response.statusText}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (attempt < maxRetries - 1) {
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 500));
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
throw new Error(`Proxy Error: ${response.status} ${response.statusText}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const contentLength = response.headers.get('content-length');
|
|
||||||
const contentType = response.headers.get('content-type');
|
|
||||||
const ct = contentType?.toLowerCase();
|
|
||||||
|
|
||||||
const isM3U8 =
|
|
||||||
!!ct && (
|
|
||||||
ct.includes('mpegurl') ||
|
|
||||||
ct.includes('m3u8')
|
|
||||||
) ||
|
|
||||||
url.toLowerCase().includes('.m3u8');
|
|
||||||
|
|
||||||
return {
|
|
||||||
response,
|
|
||||||
contentType,
|
|
||||||
isM3U8,
|
|
||||||
contentLength
|
|
||||||
};
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
lastError = error as Error;
|
|
||||||
|
|
||||||
if (attempt === maxRetries - 1) {
|
|
||||||
throw lastError;
|
|
||||||
}
|
|
||||||
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 500));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
throw lastError || new Error('Unknown error in proxyRequest');
|
|
||||||
}
|
|
||||||
|
|
||||||
export function processM3U8Content(text: string, baseUrl: URL, { referer, origin, userAgent }: ProxyHeaders): string {
|
|
||||||
const buildProxy = (url: string) => {
|
|
||||||
try {
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
params.set('url', new URL(url, baseUrl).href);
|
|
||||||
if (referer) params.set('referer', referer);
|
|
||||||
if (origin) params.set('origin', origin);
|
|
||||||
if (userAgent) params.set('userAgent', userAgent);
|
|
||||||
return `/api/proxy?${params.toString()}`;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error building proxy URL for:', url, error);
|
|
||||||
return url;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const isMasterPlaylist = text.includes('#EXT-X-STREAM-INF');
|
|
||||||
|
|
||||||
|
|
||||||
let lines = text.split('\n');
|
|
||||||
let result = [];
|
|
||||||
|
|
||||||
for (let i = 0; i < lines.length; i++) {
|
|
||||||
const line = lines[i];
|
|
||||||
const trimmed = line.trim();
|
|
||||||
|
|
||||||
if (!trimmed) {
|
|
||||||
result.push(line);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (trimmed.startsWith('#')) {
|
|
||||||
if (line.includes('URI=')) {
|
|
||||||
const processedLine = line.replace(/URI="([^"]+)"/g, (match, uri) => {
|
|
||||||
return `URI="${buildProxy(uri)}"`;
|
|
||||||
});
|
|
||||||
result.push(processedLine);
|
|
||||||
} else {
|
|
||||||
result.push(line);
|
|
||||||
}
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const proxiedUrl = buildProxy(trimmed);
|
|
||||||
result.push(proxiedUrl);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error processing M3U8 URL line:', trimmed, error);
|
|
||||||
result.push(line);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return result.join('\n');
|
|
||||||
}
|
|
||||||
|
|
||||||
export function streamToReadable(webStream: ReadableStream): Readable {
|
|
||||||
const reader = webStream.getReader();
|
|
||||||
let readTimeout: NodeJS.Timeout;
|
|
||||||
|
|
||||||
return new Readable({
|
|
||||||
async read() {
|
|
||||||
try {
|
|
||||||
const timeoutPromise = new Promise((_, reject) => {
|
|
||||||
readTimeout = setTimeout(() => reject(new Error('Stream read timeout')), 10000);
|
|
||||||
});
|
|
||||||
|
|
||||||
const readPromise = reader.read();
|
|
||||||
const { done, value } = await Promise.race([readPromise, timeoutPromise]) as any;
|
|
||||||
|
|
||||||
clearTimeout(readTimeout);
|
|
||||||
|
|
||||||
if (done) {
|
|
||||||
this.push(null);
|
|
||||||
} else {
|
|
||||||
this.push(Buffer.from(value));
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
clearTimeout(readTimeout);
|
|
||||||
this.destroy(error as Error);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
destroy(error, callback) {
|
|
||||||
clearTimeout(readTimeout);
|
|
||||||
reader.cancel().then(() => callback(error)).catch(callback);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,158 +0,0 @@
|
|||||||
import { FastifyReply, FastifyRequest } from 'fastify';
|
|
||||||
import * as roomService from './rooms.service';
|
|
||||||
import { getUserById } from '../user/user.service';
|
|
||||||
import { openTunnel } from "./tunnel.manager";
|
|
||||||
|
|
||||||
interface CreateRoomBody {
|
|
||||||
name: string;
|
|
||||||
password?: string;
|
|
||||||
expose?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function createRoom(req: any, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { name, password, expose } = req.body as CreateRoomBody;
|
|
||||||
const userId = req.user?.id;
|
|
||||||
|
|
||||||
if (!userId) {
|
|
||||||
return reply.code(401).send({ error: "Authentication required to create room" });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!name || name.trim().length === 0) {
|
|
||||||
return reply.code(400).send({ error: "Room name is required" });
|
|
||||||
}
|
|
||||||
|
|
||||||
const user = await getUserById(userId);
|
|
||||||
if (!user) {
|
|
||||||
return reply.code(404).send({ error: "User not found" });
|
|
||||||
}
|
|
||||||
|
|
||||||
const host = {
|
|
||||||
id: `user_${userId}`,
|
|
||||||
username: user.username,
|
|
||||||
avatar: user.profile_picture_url || undefined,
|
|
||||||
isHost: true,
|
|
||||||
isGuest: false,
|
|
||||||
userId
|
|
||||||
};
|
|
||||||
|
|
||||||
let publicUrl: string | undefined;
|
|
||||||
|
|
||||||
if (expose) {
|
|
||||||
publicUrl = await openTunnel();
|
|
||||||
}
|
|
||||||
|
|
||||||
const room = roomService.createRoom(
|
|
||||||
name,
|
|
||||||
host,
|
|
||||||
password,
|
|
||||||
!!expose,
|
|
||||||
publicUrl
|
|
||||||
);
|
|
||||||
|
|
||||||
if (expose && publicUrl) {
|
|
||||||
room.publicUrl = `${publicUrl}/room?id=${room.id}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return reply.send({
|
|
||||||
success: true,
|
|
||||||
room: {
|
|
||||||
id: room.id,
|
|
||||||
name: room.name,
|
|
||||||
hasPassword: !!room.password,
|
|
||||||
userCount: room.users.size,
|
|
||||||
exposed: room.exposed,
|
|
||||||
publicUrl: room.publicUrl
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Create Room Error:", err);
|
|
||||||
return reply.code(500).send({ error: "Failed to create room" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getRooms(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const rooms = roomService.getAllRooms();
|
|
||||||
|
|
||||||
const roomList = rooms.map((room) => ({
|
|
||||||
id: room.id,
|
|
||||||
name: room.name,
|
|
||||||
host: room.host.username,
|
|
||||||
userCount: room.users.size,
|
|
||||||
hasPassword: !!room.password,
|
|
||||||
currentlyWatching: room.currentVideo ? {
|
|
||||||
animeId: room.currentVideo.animeId,
|
|
||||||
episode: room.currentVideo.episode
|
|
||||||
} : null
|
|
||||||
}));
|
|
||||||
|
|
||||||
return reply.send({ rooms: roomList });
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Get Rooms Error:", err);
|
|
||||||
return reply.code(500).send({ error: "Failed to retrieve rooms" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getRoom(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { id } = req.params as { id: string };
|
|
||||||
const room = roomService.getRoom(id);
|
|
||||||
|
|
||||||
if (!room) {
|
|
||||||
return reply.code(404).send({ error: "Room not found" });
|
|
||||||
}
|
|
||||||
|
|
||||||
return reply.send({
|
|
||||||
room: {
|
|
||||||
id: room.id,
|
|
||||||
name: room.name,
|
|
||||||
host: {
|
|
||||||
username: room.host.username,
|
|
||||||
avatar: room.host.avatar
|
|
||||||
},
|
|
||||||
users: Array.from(room.users.values()).map(u => ({
|
|
||||||
id: u.id,
|
|
||||||
username: u.username,
|
|
||||||
avatar: u.avatar,
|
|
||||||
isHost: u.isHost,
|
|
||||||
isGuest: u.isGuest
|
|
||||||
})),
|
|
||||||
hasPassword: !!room.password,
|
|
||||||
currentVideo: room.currentVideo,
|
|
||||||
exposed: room.exposed,
|
|
||||||
publicUrl: room.publicUrl
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Get Room Error:", err);
|
|
||||||
return reply.code(500).send({ error: "Failed to retrieve room" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function deleteRoom(req: any, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { id } = req.params as { id: string };
|
|
||||||
const userId = req.user?.id;
|
|
||||||
|
|
||||||
if (!userId) {
|
|
||||||
return reply.code(401).send({ error: "Authentication required" });
|
|
||||||
}
|
|
||||||
|
|
||||||
const room = roomService.getRoom(id);
|
|
||||||
if (!room) {
|
|
||||||
return reply.code(404).send({ error: "Room not found" });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (room.host.userId !== userId) {
|
|
||||||
return reply.code(403).send({ error: "Only the host can delete the room" });
|
|
||||||
}
|
|
||||||
|
|
||||||
roomService.deleteRoom(id);
|
|
||||||
|
|
||||||
return reply.send({ success: true });
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Delete Room Error:", err);
|
|
||||||
return reply.code(500).send({ error: "Failed to delete room" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
import { FastifyInstance } from 'fastify';
|
|
||||||
import * as controller from './rooms.controller';
|
|
||||||
|
|
||||||
async function roomRoutes(fastify: FastifyInstance) {
|
|
||||||
fastify.post('/rooms', controller.createRoom);
|
|
||||||
fastify.get('/rooms', controller.getRooms);
|
|
||||||
fastify.get('/rooms/:id', controller.getRoom);
|
|
||||||
fastify.delete('/rooms/:id', controller.deleteRoom);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default roomRoutes;
|
|
||||||
@@ -1,296 +0,0 @@
|
|||||||
import crypto from 'crypto';
|
|
||||||
import { closeTunnelIfUnused } from "./tunnel.manager";
|
|
||||||
|
|
||||||
interface RoomPermissions {
|
|
||||||
canControl: boolean;
|
|
||||||
canManageQueue: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface RoomUser {
|
|
||||||
id: string;
|
|
||||||
username: string;
|
|
||||||
avatar?: string;
|
|
||||||
isHost: boolean;
|
|
||||||
isGuest: boolean;
|
|
||||||
userId?: number;
|
|
||||||
permissions?: RoomPermissions;
|
|
||||||
ipAddress?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface SourceContext {
|
|
||||||
animeId: string;
|
|
||||||
episode: string | number;
|
|
||||||
source: string;
|
|
||||||
extension: string;
|
|
||||||
server: string;
|
|
||||||
category: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface QueueItem {
|
|
||||||
uid: string;
|
|
||||||
metadata: RoomMetadata;
|
|
||||||
videoData: any;
|
|
||||||
addedBy: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface RoomMetadata {
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
episode: number;
|
|
||||||
image?: string;
|
|
||||||
source?: string;
|
|
||||||
malId?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface RoomData {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
host: RoomUser;
|
|
||||||
users: Map<string, RoomUser>;
|
|
||||||
createdAt: number;
|
|
||||||
currentVideo: {
|
|
||||||
animeId?: number;
|
|
||||||
episode?: number;
|
|
||||||
source?: string;
|
|
||||||
videoData?: any;
|
|
||||||
currentTime: number;
|
|
||||||
isPlaying: boolean;
|
|
||||||
context?: SourceContext;
|
|
||||||
} | null;
|
|
||||||
password?: string;
|
|
||||||
metadata?: RoomMetadata | null;
|
|
||||||
exposed: boolean;
|
|
||||||
publicUrl?: string;
|
|
||||||
queue: QueueItem[];
|
|
||||||
bannedIPs: Set<string>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const DEFAULT_GUEST_PERMISSIONS: RoomPermissions = {
|
|
||||||
canControl: false,
|
|
||||||
canManageQueue: false
|
|
||||||
};
|
|
||||||
|
|
||||||
const rooms = new Map<string, RoomData>();
|
|
||||||
|
|
||||||
export function generateRoomId(): string {
|
|
||||||
return crypto.randomBytes(8).toString('hex');
|
|
||||||
}
|
|
||||||
|
|
||||||
export function createRoom(name: string, host: RoomUser, password?: string, exposed = false, publicUrl?: string): RoomData {
|
|
||||||
const roomId = generateRoomId();
|
|
||||||
|
|
||||||
const room: RoomData = {
|
|
||||||
id: roomId,
|
|
||||||
name,
|
|
||||||
host,
|
|
||||||
users: new Map([[host.id, host]]),
|
|
||||||
createdAt: Date.now(),
|
|
||||||
currentVideo: null,
|
|
||||||
password: password || undefined,
|
|
||||||
metadata: null,
|
|
||||||
exposed,
|
|
||||||
publicUrl,
|
|
||||||
queue: [],
|
|
||||||
bannedIPs: new Set() // NUEVO
|
|
||||||
};
|
|
||||||
|
|
||||||
rooms.set(roomId, room);
|
|
||||||
return room;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function updateUserPermissions(roomId: string, userId: string, permissions: Partial<RoomPermissions>): boolean {
|
|
||||||
const room = rooms.get(roomId);
|
|
||||||
if (!room) return false;
|
|
||||||
|
|
||||||
const user: any = room.users.get(userId);
|
|
||||||
if (!user) return false;
|
|
||||||
|
|
||||||
if (user.isHost) return false;
|
|
||||||
|
|
||||||
user.permissions = {
|
|
||||||
...user.permissions,
|
|
||||||
...permissions
|
|
||||||
};
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function banUserIP(roomId: string, ipAddress: string): boolean {
|
|
||||||
const room = rooms.get(roomId);
|
|
||||||
if (!room) return false;
|
|
||||||
|
|
||||||
room.bannedIPs.add(ipAddress);
|
|
||||||
|
|
||||||
// Remover a todos los usuarios con esa IP
|
|
||||||
Array.from(room.users.values()).forEach(user => {
|
|
||||||
if (user.ipAddress === ipAddress) {
|
|
||||||
removeUserFromRoom(roomId, user.id);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function unbanUserIP(roomId: string, ipAddress: string): boolean {
|
|
||||||
const room = rooms.get(roomId);
|
|
||||||
if (!room) return false;
|
|
||||||
|
|
||||||
return room.bannedIPs.delete(ipAddress);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function isIPBanned(roomId: string, ipAddress: string): boolean {
|
|
||||||
const room = rooms.get(roomId);
|
|
||||||
if (!room) return false;
|
|
||||||
return room.bannedIPs.has(ipAddress);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getBannedIPs(roomId: string): string[] {
|
|
||||||
const room = rooms.get(roomId);
|
|
||||||
if (!room) return [];
|
|
||||||
return Array.from(room.bannedIPs);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function hasPermission(roomId: string, userId: string, permission: keyof RoomPermissions): boolean {
|
|
||||||
const room = rooms.get(roomId);
|
|
||||||
if (!room) return false;
|
|
||||||
|
|
||||||
const user = room.users.get(userId);
|
|
||||||
if (!user) return false;
|
|
||||||
|
|
||||||
// El host siempre tiene todos los permisos
|
|
||||||
if (user.isHost) return true;
|
|
||||||
|
|
||||||
// Si no tiene permisos definidos, usar defaults
|
|
||||||
const userPerms = user.permissions || DEFAULT_GUEST_PERMISSIONS;
|
|
||||||
return userPerms[permission] || false;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getRoom(roomId: string): RoomData | null {
|
|
||||||
return rooms.get(roomId) || null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getAllRooms(): RoomData[] {
|
|
||||||
return Array.from(rooms.values()).map(room => ({
|
|
||||||
...room,
|
|
||||||
users: room.users
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
export function addQueueItem(roomId: string, item: QueueItem): boolean {
|
|
||||||
const room = rooms.get(roomId);
|
|
||||||
if (!room) return false;
|
|
||||||
room.queue.push(item);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function removeQueueItem(roomId: string, itemUid: string): boolean {
|
|
||||||
const room = rooms.get(roomId);
|
|
||||||
if (!room) return false;
|
|
||||||
room.queue = room.queue.filter(i => i.uid !== itemUid);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getNextQueueItem(roomId: string): QueueItem | undefined {
|
|
||||||
const room = rooms.get(roomId);
|
|
||||||
if (!room || room.queue.length === 0) return undefined;
|
|
||||||
return room.queue.shift(); // Saca el primero y lo retorna
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getAndRemoveQueueItem(roomId: string, itemUid: string): QueueItem | undefined {
|
|
||||||
const room = rooms.get(roomId);
|
|
||||||
if (!room) return undefined;
|
|
||||||
|
|
||||||
const index = room.queue.findIndex(i => i.uid === itemUid);
|
|
||||||
if (index === -1) return undefined;
|
|
||||||
|
|
||||||
const [item] = room.queue.splice(index, 1);
|
|
||||||
return item;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function moveQueueItem(roomId: string, itemUid: string, direction: 'up' | 'down'): boolean {
|
|
||||||
const room = rooms.get(roomId);
|
|
||||||
if (!room) return false;
|
|
||||||
|
|
||||||
const index = room.queue.findIndex(i => i.uid === itemUid);
|
|
||||||
if (index === -1) return false;
|
|
||||||
|
|
||||||
const newIndex = direction === 'up' ? index - 1 : index + 1;
|
|
||||||
|
|
||||||
if (newIndex < 0 || newIndex >= room.queue.length) return false;
|
|
||||||
|
|
||||||
const temp = room.queue[newIndex];
|
|
||||||
room.queue[newIndex] = room.queue[index];
|
|
||||||
room.queue[index] = temp;
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function addUserToRoom(roomId: string, user: RoomUser): boolean {
|
|
||||||
const room = rooms.get(roomId);
|
|
||||||
if (!room) return false;
|
|
||||||
|
|
||||||
room.users.set(user.id, user);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function removeUserFromRoom(roomId: string, userId: string): boolean {
|
|
||||||
const room = rooms.get(roomId);
|
|
||||||
if (!room) return false;
|
|
||||||
|
|
||||||
room.users.delete(userId);
|
|
||||||
|
|
||||||
if (room.users.size === 0) {
|
|
||||||
if (room.exposed) {
|
|
||||||
closeTunnelIfUnused();
|
|
||||||
}
|
|
||||||
rooms.delete(roomId);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (room.host.id === userId && room.users.size > 0) {
|
|
||||||
const newHost = Array.from(room.users.values())[0];
|
|
||||||
newHost.isHost = true;
|
|
||||||
room.host = newHost;
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function updateRoomVideo(roomId: string, videoData: any): boolean {
|
|
||||||
const room = rooms.get(roomId);
|
|
||||||
if (!room) return false;
|
|
||||||
|
|
||||||
room.currentVideo = {
|
|
||||||
...room.currentVideo,
|
|
||||||
...videoData
|
|
||||||
};
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function deleteRoom(roomId: string): boolean {
|
|
||||||
const room = rooms.get(roomId);
|
|
||||||
if (!room) return false;
|
|
||||||
|
|
||||||
if (room.exposed) {
|
|
||||||
closeTunnelIfUnused();
|
|
||||||
}
|
|
||||||
|
|
||||||
return rooms.delete(roomId);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function verifyRoomPassword(roomId: string, password?: string): boolean {
|
|
||||||
const room = rooms.get(roomId);
|
|
||||||
if (!room) return false;
|
|
||||||
if (!room.password) return true;
|
|
||||||
if (!password) return false;
|
|
||||||
|
|
||||||
return room.password === password;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function updateRoomMetadata(roomId: string, metadata: any): boolean {
|
|
||||||
const room = rooms.get(roomId);
|
|
||||||
if (!room) return false;
|
|
||||||
|
|
||||||
room.metadata = metadata;
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
@@ -1,588 +0,0 @@
|
|||||||
import { FastifyInstance, FastifyRequest } from 'fastify';
|
|
||||||
import * as roomService from './rooms.service';
|
|
||||||
import { getUserById } from '../user/user.service';
|
|
||||||
import jwt from 'jsonwebtoken';
|
|
||||||
|
|
||||||
import {getConfig} from '../../shared/config';
|
|
||||||
const { values } = getConfig();
|
|
||||||
const jwtSecret = values.server?.jwt_secret;
|
|
||||||
|
|
||||||
interface WSClient {
|
|
||||||
socket: any;
|
|
||||||
userId: string;
|
|
||||||
username: string;
|
|
||||||
roomId: string;
|
|
||||||
isGuest: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const clients = new Map<string, WSClient>();
|
|
||||||
|
|
||||||
|
|
||||||
function getClientIP(req: any): string {
|
|
||||||
return req.headers['x-forwarded-for']?.split(',')[0].trim() ||
|
|
||||||
req.headers['x-real-ip'] ||
|
|
||||||
req.connection?.remoteAddress ||
|
|
||||||
req.socket?.remoteAddress ||
|
|
||||||
'unknown';
|
|
||||||
}
|
|
||||||
|
|
||||||
export function setupRoomWebSocket(fastify: FastifyInstance) {
|
|
||||||
// @ts-ignore
|
|
||||||
fastify.get('/ws/room/:roomId', { websocket: true }, (connection: any, req: any) => {
|
|
||||||
handleWebSocketConnection(connection, req).catch(err => {
|
|
||||||
console.error('WebSocket error:', err);
|
|
||||||
try {
|
|
||||||
connection.socket.close();
|
|
||||||
} catch (e) {
|
|
||||||
// Socket already closed
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleWebSocketConnection(connection: any, req: any) {
|
|
||||||
const socket = connection.socket || connection;
|
|
||||||
const roomId = req.params.roomId;
|
|
||||||
const token = req.query.token;
|
|
||||||
const guestName = req.query.guestName;
|
|
||||||
const password = req.query.password;
|
|
||||||
const clientIP = getClientIP(req);
|
|
||||||
|
|
||||||
let userId: string;
|
|
||||||
let username: string;
|
|
||||||
let avatar: string | undefined;
|
|
||||||
let isGuest = false;
|
|
||||||
let realUserId: any;
|
|
||||||
|
|
||||||
const room = roomService.getRoom(roomId);
|
|
||||||
|
|
||||||
// 1. Validaciones básicas de existencia y Ban
|
|
||||||
if (!room) {
|
|
||||||
socket.send(JSON.stringify({ type: 'error', message: 'Room not found' }));
|
|
||||||
socket.close();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (roomService.isIPBanned(roomId, clientIP)) {
|
|
||||||
socket.send(JSON.stringify({ type: 'error', message: 'You have been banned from this room' }));
|
|
||||||
socket.close();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 2. MOVIDO ARRIBA: Autenticar usuario PRIMERO para saber quién es
|
|
||||||
if (token) {
|
|
||||||
try {
|
|
||||||
const decoded: any = jwt.verify(token, jwtSecret);
|
|
||||||
realUserId = decoded.id;
|
|
||||||
const user = await getUserById(realUserId);
|
|
||||||
|
|
||||||
if (user) {
|
|
||||||
userId = `user_${realUserId}`;
|
|
||||||
username = user.username;
|
|
||||||
avatar = user.profile_picture_url || undefined;
|
|
||||||
isGuest = false;
|
|
||||||
} else {
|
|
||||||
throw new Error('User not found');
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
socket.send(JSON.stringify({ type: 'error', message: 'Invalid token' }));
|
|
||||||
socket.close();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
} else if (guestName && guestName.trim()) {
|
|
||||||
// ... (Lógica de Guest se mantiene igual) ...
|
|
||||||
const nameToCheck = guestName.trim();
|
|
||||||
const isNameTaken = Array.from(room.users.values()).some(
|
|
||||||
u => u.username.toLowerCase() === nameToCheck.toLowerCase()
|
|
||||||
);
|
|
||||||
if (isNameTaken) {
|
|
||||||
socket.send(JSON.stringify({ type: 'error', message: 'Username is already taken' }));
|
|
||||||
socket.close();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
userId = `guest_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
|
|
||||||
username = nameToCheck;
|
|
||||||
isGuest = true;
|
|
||||||
} else {
|
|
||||||
socket.send(JSON.stringify({ type: 'error', message: 'Authentication required' }));
|
|
||||||
socket.close();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3. Determinar si es Host
|
|
||||||
const isHost = room.host.userId === realUserId || room.host.id === userId;
|
|
||||||
|
|
||||||
// 4. MOVIDO ABAJO: Validar contraseña SOLO SI NO ES HOST
|
|
||||||
if (room.password && !isHost) {
|
|
||||||
if (!password || !roomService.verifyRoomPassword(roomId, password)) {
|
|
||||||
socket.send(JSON.stringify({ type: 'error', message: 'Invalid password' }));
|
|
||||||
socket.close();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const userInRoom = {
|
|
||||||
id: userId,
|
|
||||||
username,
|
|
||||||
avatar,
|
|
||||||
isHost: isHost,
|
|
||||||
isGuest,
|
|
||||||
userId: realUserId,
|
|
||||||
ipAddress: clientIP, // NUEVO
|
|
||||||
permissions: isHost ? undefined : { ...roomService.DEFAULT_GUEST_PERMISSIONS }
|
|
||||||
};
|
|
||||||
|
|
||||||
roomService.addUserToRoom(roomId, userInRoom);
|
|
||||||
|
|
||||||
// Registrar cliente
|
|
||||||
clients.set(userId, {
|
|
||||||
socket: socket,
|
|
||||||
userId,
|
|
||||||
username,
|
|
||||||
roomId,
|
|
||||||
isGuest
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.send(JSON.stringify({
|
|
||||||
type: 'init',
|
|
||||||
userId,
|
|
||||||
username,
|
|
||||||
isGuest,
|
|
||||||
isHost, // NUEVO: Enviar explícitamente
|
|
||||||
room: {
|
|
||||||
id: room.id,
|
|
||||||
name: room.name,
|
|
||||||
users: Array.from(room.users.values()).map(u => ({
|
|
||||||
id: u.id,
|
|
||||||
username: u.username,
|
|
||||||
avatar: u.avatar,
|
|
||||||
isHost: u.isHost,
|
|
||||||
isGuest: u.isGuest,
|
|
||||||
permissions: u.permissions // NUEVO
|
|
||||||
})),
|
|
||||||
currentVideo: room.currentVideo,
|
|
||||||
queue: room.queue || []
|
|
||||||
}
|
|
||||||
}));
|
|
||||||
|
|
||||||
// Notificar a otros usuarios
|
|
||||||
broadcastToRoom(roomId, {
|
|
||||||
type: 'user_joined',
|
|
||||||
user: {
|
|
||||||
id: userId,
|
|
||||||
username,
|
|
||||||
avatar,
|
|
||||||
isGuest
|
|
||||||
}
|
|
||||||
}, userId);
|
|
||||||
|
|
||||||
// Manejar mensajes
|
|
||||||
socket.on('message', (message: Buffer) => {
|
|
||||||
try {
|
|
||||||
const data = JSON.parse(message.toString());
|
|
||||||
handleMessage(roomId, userId, data);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('WebSocket message error:', err);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Manejar desconexión
|
|
||||||
socket.on('close', () => {
|
|
||||||
clients.delete(userId);
|
|
||||||
roomService.removeUserFromRoom(roomId, userId);
|
|
||||||
|
|
||||||
broadcastToRoom(roomId, {
|
|
||||||
type: 'user_left',
|
|
||||||
user: { userId, username }
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleMessage(roomId: string, userId: string, data: any) {
|
|
||||||
const room = roomService.getRoom(roomId);
|
|
||||||
if (!room) return;
|
|
||||||
|
|
||||||
const user = room.users.get(userId);
|
|
||||||
if (!user) return;
|
|
||||||
|
|
||||||
console.log('Handling message:', data.type, 'from user:', userId, 'isHost:', room.host.id === userId);
|
|
||||||
|
|
||||||
switch (data.type) {
|
|
||||||
case 'chat':
|
|
||||||
broadcastToRoom(roomId, {
|
|
||||||
type: 'chat',
|
|
||||||
userId,
|
|
||||||
username: room.users.get(userId)?.username || 'Unknown',
|
|
||||||
avatar: room.users.get(userId)?.avatar,
|
|
||||||
message: data.message,
|
|
||||||
timestamp: Date.now()
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'update_permissions':
|
|
||||||
if (!user.isHost) {
|
|
||||||
console.warn('Non-host attempted to update permissions');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const success = roomService.updateUserPermissions(
|
|
||||||
roomId,
|
|
||||||
data.targetUserId,
|
|
||||||
data.permissions
|
|
||||||
);
|
|
||||||
|
|
||||||
if (success) {
|
|
||||||
const updatedRoom = roomService.getRoom(roomId);
|
|
||||||
if (updatedRoom) {
|
|
||||||
broadcastToRoom(roomId, {
|
|
||||||
type: 'permissions_updated',
|
|
||||||
users: Array.from(updatedRoom.users.values()).map(u => ({
|
|
||||||
id: u.id,
|
|
||||||
username: u.username,
|
|
||||||
avatar: u.avatar,
|
|
||||||
isHost: u.isHost,
|
|
||||||
isGuest: u.isGuest,
|
|
||||||
permissions: u.permissions
|
|
||||||
}))
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
// NUEVO: Baneo de usuarios (solo host)
|
|
||||||
case 'ban_user':
|
|
||||||
if (!user.isHost) {
|
|
||||||
console.warn('Non-host attempted to ban user');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const targetUser = room.users.get(data.targetUserId);
|
|
||||||
if (targetUser && targetUser.ipAddress) {
|
|
||||||
roomService.banUserIP(roomId, targetUser.ipAddress);
|
|
||||||
|
|
||||||
// Cerrar conexión del usuario baneado
|
|
||||||
const targetClient = clients.get(data.targetUserId);
|
|
||||||
if (targetClient && targetClient.socket) {
|
|
||||||
targetClient.socket.send(JSON.stringify({
|
|
||||||
type: 'banned',
|
|
||||||
message: 'You have been banned from this room'
|
|
||||||
}));
|
|
||||||
targetClient.socket.close();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
|
|
||||||
case 'queue_play_item':
|
|
||||||
if (!user.isHost && !roomService.hasPermission(roomId, userId, 'canManageQueue')) {
|
|
||||||
console.warn('User lacks permission for queue management');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const itemToPlay = roomService.getAndRemoveQueueItem(roomId, data.itemUid);
|
|
||||||
if (itemToPlay) {
|
|
||||||
const videoPayload = {
|
|
||||||
videoData: itemToPlay.videoData.videoData,
|
|
||||||
subtitles: itemToPlay.videoData.subtitles,
|
|
||||||
currentTime: 0,
|
|
||||||
isPlaying: true
|
|
||||||
};
|
|
||||||
|
|
||||||
roomService.updateRoomVideo(roomId, videoPayload);
|
|
||||||
roomService.updateRoomMetadata(roomId, itemToPlay.metadata);
|
|
||||||
|
|
||||||
broadcastToRoom(roomId, {
|
|
||||||
type: 'video_update',
|
|
||||||
video: videoPayload,
|
|
||||||
metadata: itemToPlay.metadata
|
|
||||||
});
|
|
||||||
|
|
||||||
broadcastToRoom(roomId, {
|
|
||||||
type: 'queue_update',
|
|
||||||
queue: room.queue
|
|
||||||
});
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'queue_move':
|
|
||||||
if (!user.isHost && !roomService.hasPermission(roomId, userId, 'canManageQueue')) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const moved = roomService.moveQueueItem(roomId, data.itemUid, data.direction);
|
|
||||||
if (moved) {
|
|
||||||
broadcastToRoom(roomId, {
|
|
||||||
type: 'queue_update',
|
|
||||||
queue: room.queue
|
|
||||||
});
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'request_sync':
|
|
||||||
// Cualquier usuario puede pedir sync
|
|
||||||
const host = clients.get(room.host.id);
|
|
||||||
if (host && host.socket && host.socket.readyState === 1) {
|
|
||||||
console.log(`[Sync Request] User ${userId} requested sync from host`);
|
|
||||||
|
|
||||||
host.socket.send(JSON.stringify({
|
|
||||||
type: 'sync_requested',
|
|
||||||
requestedBy: userId,
|
|
||||||
username: room.users.get(userId)?.username
|
|
||||||
}));
|
|
||||||
} else {
|
|
||||||
console.warn(`[Sync Request] Host not available for user ${userId}`);
|
|
||||||
|
|
||||||
if (room.currentVideo) {
|
|
||||||
const client = clients.get(userId);
|
|
||||||
if (client && client.socket && client.socket.readyState === 1) {
|
|
||||||
console.log(`[Sync Request] Sending cached video state to ${userId}`);
|
|
||||||
client.socket.send(JSON.stringify({
|
|
||||||
type: 'sync',
|
|
||||||
currentTime: room.currentVideo.currentTime || 0,
|
|
||||||
isPlaying: room.currentVideo.isPlaying || false
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'video_update':
|
|
||||||
const canUpdateVideo = user.isHost ||
|
|
||||||
roomService.hasPermission(roomId, userId, 'canControl') ||
|
|
||||||
roomService.hasPermission(roomId, userId, 'canManageQueue');
|
|
||||||
|
|
||||||
if (!canUpdateVideo) {
|
|
||||||
console.warn('User lacks permissions to update video');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
roomService.updateRoomVideo(roomId, data.video);
|
|
||||||
roomService.updateRoomMetadata(roomId, data.metadata);
|
|
||||||
|
|
||||||
broadcastToRoom(roomId, {
|
|
||||||
type: 'video_update',
|
|
||||||
video: data.video,
|
|
||||||
metadata: data.metadata
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'queue_add_batch':
|
|
||||||
if (!user.isHost && !roomService.hasPermission(roomId, userId, 'canManageQueue')) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(data.items)) {
|
|
||||||
data.items.forEach((item: any, i: number) => {
|
|
||||||
const newItem = {
|
|
||||||
uid: `q_${Date.now()}_${i}_${Math.random().toString(36).substr(2, 5)}`,
|
|
||||||
metadata: item.metadata,
|
|
||||||
videoData: item.video,
|
|
||||||
addedBy: room.users.get(userId)?.username || 'Unknown'
|
|
||||||
};
|
|
||||||
roomService.addQueueItem(roomId, newItem);
|
|
||||||
});
|
|
||||||
|
|
||||||
broadcastToRoom(roomId, {
|
|
||||||
type: 'queue_update',
|
|
||||||
queue: room.queue
|
|
||||||
});
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'sync':
|
|
||||||
if (room.host.id !== userId) return;
|
|
||||||
|
|
||||||
if (room.currentVideo) {
|
|
||||||
room.currentVideo.currentTime = data.currentTime;
|
|
||||||
room.currentVideo.isPlaying = data.isPlaying;
|
|
||||||
}
|
|
||||||
|
|
||||||
broadcastToRoom(roomId, {
|
|
||||||
type: 'sync',
|
|
||||||
currentTime: data.currentTime,
|
|
||||||
isPlaying: data.isPlaying
|
|
||||||
}, userId);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'request_users':
|
|
||||||
const currentRoom = roomService.getRoom(roomId);
|
|
||||||
if (currentRoom) {
|
|
||||||
const client = clients.get(userId);
|
|
||||||
if (client && client.socket && client.socket.readyState === 1) {
|
|
||||||
client.socket.send(JSON.stringify({
|
|
||||||
type: 'users_update', // Nuevo tipo de respuesta
|
|
||||||
users: Array.from(currentRoom.users.values()).map(u => ({
|
|
||||||
id: u.id,
|
|
||||||
username: u.username,
|
|
||||||
avatar: u.avatar,
|
|
||||||
isHost: u.isHost,
|
|
||||||
isGuest: u.isGuest
|
|
||||||
}))
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'play':
|
|
||||||
if (!user.isHost && !roomService.hasPermission(roomId, userId, 'canControl')) {
|
|
||||||
console.warn('User lacks control permissions');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
broadcastToRoom(roomId, {
|
|
||||||
type: 'play',
|
|
||||||
currentTime: data.currentTime,
|
|
||||||
timestamp: Date.now()
|
|
||||||
}, userId);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'pause':
|
|
||||||
if (!user.isHost && !roomService.hasPermission(roomId, userId, 'canControl')) {
|
|
||||||
console.warn('User lacks control permissions for pause');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Broadcasting pause event to room:', roomId);
|
|
||||||
broadcastToRoom(roomId, {
|
|
||||||
type: 'pause',
|
|
||||||
currentTime: data.currentTime,
|
|
||||||
timestamp: Date.now()
|
|
||||||
}, userId);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'seek':
|
|
||||||
if (!user.isHost && !roomService.hasPermission(roomId, userId, 'canControl')) {
|
|
||||||
console.warn('User lacks control permissions for seek');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Broadcasting seek event to room:', roomId);
|
|
||||||
broadcastToRoom(roomId, {
|
|
||||||
type: 'seek',
|
|
||||||
currentTime: data.currentTime,
|
|
||||||
timestamp: Date.now()
|
|
||||||
}, userId);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'request_state':
|
|
||||||
const client = clients.get(userId);
|
|
||||||
if (client && client.socket && client.socket.readyState === 1) {
|
|
||||||
const updatedRoom = roomService.getRoom(roomId);
|
|
||||||
if (updatedRoom) {
|
|
||||||
client.socket.send(JSON.stringify({
|
|
||||||
type: 'init',
|
|
||||||
userId,
|
|
||||||
username: client.username,
|
|
||||||
isGuest: client.isGuest,
|
|
||||||
room: {
|
|
||||||
id: updatedRoom.id,
|
|
||||||
name: updatedRoom.name,
|
|
||||||
users: Array.from(updatedRoom.users.values()).map(u => ({
|
|
||||||
id: u.id,
|
|
||||||
username: u.username,
|
|
||||||
avatar: u.avatar,
|
|
||||||
isHost: u.isHost,
|
|
||||||
isGuest: u.isGuest
|
|
||||||
})),
|
|
||||||
currentVideo: room.currentVideo,
|
|
||||||
metadata: room.metadata
|
|
||||||
}
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'queue_add':
|
|
||||||
if (!user.isHost && !roomService.hasPermission(roomId, userId, 'canManageQueue')) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const newItem = {
|
|
||||||
uid: `q_${Date.now()}_${Math.random().toString(36).substr(2, 5)}`,
|
|
||||||
metadata: data.metadata,
|
|
||||||
videoData: data.video,
|
|
||||||
addedBy: room.users.get(userId)?.username || 'Unknown'
|
|
||||||
};
|
|
||||||
|
|
||||||
roomService.addQueueItem(roomId, newItem);
|
|
||||||
|
|
||||||
broadcastToRoom(roomId, {
|
|
||||||
type: 'queue_update',
|
|
||||||
queue: room.queue
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'queue_remove':
|
|
||||||
if (!user.isHost && !roomService.hasPermission(roomId, userId, 'canManageQueue')) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
roomService.removeQueueItem(roomId, data.itemUid);
|
|
||||||
broadcastToRoom(roomId, {
|
|
||||||
type: 'queue_update',
|
|
||||||
queue: room.queue
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'play_next':
|
|
||||||
if (room.host.id !== userId) return;
|
|
||||||
|
|
||||||
const nextItem = roomService.getNextQueueItem(roomId);
|
|
||||||
if (nextItem) {
|
|
||||||
const videoPayload = {
|
|
||||||
videoData: nextItem.videoData.videoData,
|
|
||||||
subtitles: nextItem.videoData.subtitles,
|
|
||||||
currentTime: 0,
|
|
||||||
isPlaying: true
|
|
||||||
};
|
|
||||||
|
|
||||||
roomService.updateRoomVideo(roomId, videoPayload);
|
|
||||||
roomService.updateRoomMetadata(roomId, nextItem.metadata);
|
|
||||||
|
|
||||||
broadcastToRoom(roomId, {
|
|
||||||
type: 'video_update',
|
|
||||||
video: videoPayload,
|
|
||||||
metadata: nextItem.metadata
|
|
||||||
});
|
|
||||||
|
|
||||||
broadcastToRoom(roomId, {
|
|
||||||
type: 'queue_update',
|
|
||||||
queue: room.queue
|
|
||||||
});
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
|
||||||
console.warn('Unknown message type:', data.type);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function broadcastToRoom(roomId: string, message: any, excludeUserId?: string) {
|
|
||||||
const room = roomService.getRoom(roomId);
|
|
||||||
if (!room) return;
|
|
||||||
|
|
||||||
const messageStr = JSON.stringify(message);
|
|
||||||
|
|
||||||
console.log('Broadcasting to room:', roomId, 'message type:', message.type, 'excluding:', excludeUserId);
|
|
||||||
|
|
||||||
let sentCount = 0;
|
|
||||||
room.users.forEach((user) => {
|
|
||||||
if (user.id !== excludeUserId) {
|
|
||||||
const client = clients.get(user.id);
|
|
||||||
if (client && client.socket && client.socket.readyState === 1) {
|
|
||||||
try {
|
|
||||||
client.socket.send(messageStr);
|
|
||||||
sentCount++;
|
|
||||||
console.log('Sent to user:', user.id, user.username);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error sending message to user:', user.id, err);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
console.warn('User socket not ready:', user.id, 'readyState:', client?.socket?.readyState);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log(`Broadcast complete: sent to ${sentCount} users`);
|
|
||||||
}
|
|
||||||
@@ -1,111 +0,0 @@
|
|||||||
import { spawn, ChildProcess } from "child_process";
|
|
||||||
import { getConfig as loadConfig } from '../../shared/config';
|
|
||||||
const { values } = loadConfig();
|
|
||||||
const CLOUDFLARED_PATH = values.paths?.cloudflared || 'cloudflared';
|
|
||||||
|
|
||||||
let tunnelProcess: ChildProcess | null = null;
|
|
||||||
let exposedRooms = 0;
|
|
||||||
let publicUrl: string | null = null;
|
|
||||||
let tunnelPromise: Promise<string> | null = null;
|
|
||||||
|
|
||||||
export function openTunnel(): Promise<string> {
|
|
||||||
if (tunnelProcess && publicUrl) {
|
|
||||||
exposedRooms++;
|
|
||||||
return Promise.resolve(publicUrl);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (tunnelPromise) {
|
|
||||||
return tunnelPromise;
|
|
||||||
}
|
|
||||||
|
|
||||||
tunnelPromise = new Promise((resolve, reject) => {
|
|
||||||
const timeout = setTimeout(() => {
|
|
||||||
cleanup();
|
|
||||||
reject(new Error("Timeout esperando URL del túnel (30s)"));
|
|
||||||
}, 30000);
|
|
||||||
|
|
||||||
tunnelProcess = spawn(CLOUDFLARED_PATH, [
|
|
||||||
"tunnel",
|
|
||||||
"--url",
|
|
||||||
"http://localhost:54322",
|
|
||||||
"--no-autoupdate"
|
|
||||||
]);
|
|
||||||
|
|
||||||
const cleanup = () => {
|
|
||||||
clearTimeout(timeout);
|
|
||||||
tunnelPromise = null;
|
|
||||||
};
|
|
||||||
|
|
||||||
let outputBuffer = "";
|
|
||||||
|
|
||||||
const processOutput = (data: Buffer) => {
|
|
||||||
const text = data.toString();
|
|
||||||
outputBuffer += text;
|
|
||||||
|
|
||||||
const match = outputBuffer.match(/https:\/\/[a-z0-9-]+\.trycloudflare\.com/);
|
|
||||||
if (match && !publicUrl) {
|
|
||||||
publicUrl = match[0];
|
|
||||||
exposedRooms = 1;
|
|
||||||
cleanup();
|
|
||||||
resolve(publicUrl);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
tunnelProcess.stdout?.on("data", (data) => {
|
|
||||||
processOutput(data);
|
|
||||||
});
|
|
||||||
|
|
||||||
tunnelProcess.stderr?.on("data", (data) => {
|
|
||||||
processOutput(data);
|
|
||||||
});
|
|
||||||
|
|
||||||
tunnelProcess.on("error", (error) => {
|
|
||||||
console.error("[Cloudflared Process Error]", error);
|
|
||||||
cleanup();
|
|
||||||
tunnelProcess = null;
|
|
||||||
reject(error);
|
|
||||||
});
|
|
||||||
|
|
||||||
tunnelProcess.on("exit", (code, signal) => {
|
|
||||||
tunnelProcess = null;
|
|
||||||
publicUrl = null;
|
|
||||||
exposedRooms = 0;
|
|
||||||
|
|
||||||
if (!publicUrl) {
|
|
||||||
cleanup();
|
|
||||||
reject(new Error(`Proceso cloudflared terminó antes de obtener URL (código: ${code})`));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
return tunnelPromise;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function closeTunnelIfUnused() {
|
|
||||||
exposedRooms--;
|
|
||||||
console.log(`[Tunnel Manager] Rooms expuestas: ${exposedRooms}`);
|
|
||||||
|
|
||||||
if (exposedRooms <= 0 && tunnelProcess) {
|
|
||||||
console.log("[Tunnel Manager] Cerrando túnel...");
|
|
||||||
tunnelProcess.kill();
|
|
||||||
tunnelProcess = null;
|
|
||||||
publicUrl = null;
|
|
||||||
exposedRooms = 0;
|
|
||||||
tunnelPromise = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getTunnelUrl(): string | null {
|
|
||||||
return publicUrl;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function forceTunnelClose() {
|
|
||||||
if (tunnelProcess) {
|
|
||||||
console.log("[Tunnel Manager] Forzando cierre del túnel...");
|
|
||||||
tunnelProcess.kill();
|
|
||||||
tunnelProcess = null;
|
|
||||||
publicUrl = null;
|
|
||||||
exposedRooms = 0;
|
|
||||||
tunnelPromise = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,97 +0,0 @@
|
|||||||
import { Client } from "@xhayper/discord-rpc";
|
|
||||||
|
|
||||||
let rpcClient: Client | null = null;
|
|
||||||
let reconnectTimer: NodeJS.Timeout | null = null;
|
|
||||||
let connected = false;
|
|
||||||
|
|
||||||
interface RPCData {
|
|
||||||
details?: string;
|
|
||||||
state?: string;
|
|
||||||
mode?: string;
|
|
||||||
startTimestamp?: number;
|
|
||||||
endTimestamp?: number;
|
|
||||||
paused?: boolean;
|
|
||||||
version?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
function attemptReconnect(clientId: string) {
|
|
||||||
connected = false;
|
|
||||||
|
|
||||||
if (reconnectTimer) {
|
|
||||||
clearTimeout(reconnectTimer);
|
|
||||||
reconnectTimer = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Discord RPC: Trying to reconnect...');
|
|
||||||
|
|
||||||
reconnectTimer = setTimeout(() => {
|
|
||||||
initRPC(clientId);
|
|
||||||
}, 10000);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function initRPC(clientId: string) {
|
|
||||||
if (rpcClient) {
|
|
||||||
try { rpcClient.destroy(); } catch {}
|
|
||||||
rpcClient = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (reconnectTimer) {
|
|
||||||
clearTimeout(reconnectTimer);
|
|
||||||
reconnectTimer = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
rpcClient = new Client({ clientId });
|
|
||||||
|
|
||||||
rpcClient.on("ready", () => {
|
|
||||||
connected = true;
|
|
||||||
console.log("Discord RPC conectado");
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
setActivity({ details: "Browsing", state: "In App" });
|
|
||||||
}, 1000);
|
|
||||||
});
|
|
||||||
|
|
||||||
rpcClient.on("disconnected", () => {
|
|
||||||
connected = false;
|
|
||||||
attemptReconnect(clientId);
|
|
||||||
});
|
|
||||||
|
|
||||||
rpcClient.on("error", () => {
|
|
||||||
if (connected) attemptReconnect(clientId);
|
|
||||||
});
|
|
||||||
|
|
||||||
rpcClient.login().catch(() => {
|
|
||||||
attemptReconnect(clientId);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function setActivity(data: RPCData = {}) {
|
|
||||||
if (!rpcClient || !connected) return;
|
|
||||||
|
|
||||||
let type = 0;
|
|
||||||
if (data.mode === "watching") type = 3;
|
|
||||||
if (data.mode === "reading") type = 0;
|
|
||||||
|
|
||||||
const activity: any = {
|
|
||||||
details: data.details,
|
|
||||||
state: data.state,
|
|
||||||
type,
|
|
||||||
instance: false
|
|
||||||
};
|
|
||||||
|
|
||||||
if (data.paused) {
|
|
||||||
activity.largeImageText = "⏸ ";
|
|
||||||
delete activity.startTimestamp;
|
|
||||||
delete activity.endTimestamp;
|
|
||||||
} else {
|
|
||||||
activity.largeImageKey = "bigpicture";
|
|
||||||
activity.largeImageText = data.version ?? "v2.0.0";
|
|
||||||
|
|
||||||
if (data.startTimestamp && data.endTimestamp) {
|
|
||||||
activity.startTimestamp = data.startTimestamp;
|
|
||||||
activity.endTimestamp = data.endTimestamp;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
rpcClient.user?.setActivity(activity);
|
|
||||||
}
|
|
||||||
@@ -1,293 +0,0 @@
|
|||||||
import { FastifyReply, FastifyRequest } from 'fastify';
|
|
||||||
import * as userService from './user.service';
|
|
||||||
import {queryOne} from '../../shared/database';
|
|
||||||
import jwt from "jsonwebtoken";
|
|
||||||
import { getConfig } from '../../shared/config';
|
|
||||||
const { values } = getConfig();
|
|
||||||
const jwtSecret = values.server?.jwt_secret;
|
|
||||||
|
|
||||||
|
|
||||||
interface UserIdParams { id: string; }
|
|
||||||
interface CreateUserBody {
|
|
||||||
username: string;
|
|
||||||
profilePictureUrl?: string;
|
|
||||||
password?: string;
|
|
||||||
}
|
|
||||||
interface UpdateUserBody {
|
|
||||||
username?: string;
|
|
||||||
profilePictureUrl?: string | null;
|
|
||||||
password?: string | null;
|
|
||||||
}
|
|
||||||
interface LoginBody {
|
|
||||||
userId: number;
|
|
||||||
password?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface DBRunResult { changes: number; lastID: number; }
|
|
||||||
|
|
||||||
export async function getMe(req: any, reply: any) {
|
|
||||||
const userId = req.user?.id;
|
|
||||||
|
|
||||||
if (!userId) {
|
|
||||||
return reply.code(401).send({ error: "Unauthorized" });
|
|
||||||
}
|
|
||||||
|
|
||||||
const user = await queryOne(
|
|
||||||
`SELECT username, profile_picture_url FROM User WHERE id = ?`,
|
|
||||||
[userId],
|
|
||||||
'userdata'
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!user) {
|
|
||||||
return reply.code(404).send({ error: "User not found" });
|
|
||||||
}
|
|
||||||
|
|
||||||
return reply.send({
|
|
||||||
username: user.username,
|
|
||||||
avatar: user.profile_picture_url
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function login(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
const { userId, password } = req.body as LoginBody;
|
|
||||||
|
|
||||||
if (!userId || typeof userId !== "number" || userId <= 0) {
|
|
||||||
return reply.code(400).send({ error: "Invalid userId provided" });
|
|
||||||
}
|
|
||||||
|
|
||||||
const user = await userService.getUserById(userId);
|
|
||||||
|
|
||||||
if (!user) {
|
|
||||||
return reply.code(404).send({ error: "User not found in local database" });
|
|
||||||
}
|
|
||||||
|
|
||||||
// Si el usuario tiene contraseña, debe proporcionarla
|
|
||||||
if (user.has_password) {
|
|
||||||
if (!password) {
|
|
||||||
return reply.code(401).send({
|
|
||||||
error: "Password required",
|
|
||||||
requiresPassword: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const isValid = await userService.verifyPassword(userId, password);
|
|
||||||
|
|
||||||
if (!isValid) {
|
|
||||||
return reply.code(401).send({ error: "Incorrect password" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const token = jwt.sign(
|
|
||||||
{ id: userId },
|
|
||||||
jwtSecret,
|
|
||||||
{ expiresIn: "7d" }
|
|
||||||
);
|
|
||||||
|
|
||||||
return reply.code(200).send({
|
|
||||||
success: true,
|
|
||||||
token
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getAllUsers(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const users: any = await userService.getAllUsers();
|
|
||||||
return { users };
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Get All Users Error:", (err as Error).message);
|
|
||||||
return reply.code(500).send({ error: "Failed to retrieve user list" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function createUser(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { username, profilePictureUrl, password } = req.body as CreateUserBody;
|
|
||||||
|
|
||||||
if (!username) {
|
|
||||||
return reply.code(400).send({ error: "Missing required field: username" });
|
|
||||||
}
|
|
||||||
|
|
||||||
const result: any = await userService.createUser(username, profilePictureUrl, password);
|
|
||||||
|
|
||||||
return reply.code(201).send({
|
|
||||||
success: true,
|
|
||||||
userId: result.lastID,
|
|
||||||
username
|
|
||||||
});
|
|
||||||
} catch (err) {
|
|
||||||
if ((err as Error).message.includes('SQLITE_CONSTRAINT')) {
|
|
||||||
return reply.code(409).send({ error: "Username already exists." });
|
|
||||||
}
|
|
||||||
console.error("Create User Error:", (err as Error).message);
|
|
||||||
return reply.code(500).send({ error: "Failed to create user" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getUser(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { id } = req.params as UserIdParams;
|
|
||||||
const userId = parseInt(id, 10);
|
|
||||||
|
|
||||||
const user: any = await userService.getUserById(userId);
|
|
||||||
|
|
||||||
if (!user) {
|
|
||||||
return reply.code(404).send({ error: "User not found" });
|
|
||||||
}
|
|
||||||
|
|
||||||
return { user };
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Get User Error:", (err as Error).message);
|
|
||||||
return reply.code(500).send({ error: "Failed to retrieve user" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function updateUser(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { id } = req.params as UserIdParams;
|
|
||||||
const userId = parseInt(id, 10);
|
|
||||||
const updates = req.body as UpdateUserBody;
|
|
||||||
|
|
||||||
if (Object.keys(updates).length === 0) {
|
|
||||||
return reply.code(400).send({ error: "No update fields provided" });
|
|
||||||
}
|
|
||||||
|
|
||||||
const result: DBRunResult = await userService.updateUser(userId, updates);
|
|
||||||
|
|
||||||
if (result && result.changes > 0) {
|
|
||||||
return { success: true, message: "User updated successfully" };
|
|
||||||
} else {
|
|
||||||
return reply.code(404).send({ error: "User not found or nothing to update" });
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
if ((err as Error).message.includes('SQLITE_CONSTRAINT')) {
|
|
||||||
return reply.code(409).send({ error: "Username already exists or is invalid." });
|
|
||||||
}
|
|
||||||
console.error("Update User Error:", (err as Error).message);
|
|
||||||
return reply.code(500).send({ error: "Failed to update user" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function deleteUser(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { id } = req.params as { id: string };
|
|
||||||
const userId = parseInt(id, 10);
|
|
||||||
|
|
||||||
const body = (req.body ?? {}) as { password?: string };
|
|
||||||
const password = body.password;
|
|
||||||
|
|
||||||
if (!userId || isNaN(userId)) {
|
|
||||||
return reply.code(400).send({ error: "Invalid user id" });
|
|
||||||
}
|
|
||||||
|
|
||||||
const user = await userService.getUserById(userId);
|
|
||||||
if (!user) {
|
|
||||||
return reply.code(404).send({ error: "User not found" });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (user.has_password) {
|
|
||||||
if (!password) {
|
|
||||||
return reply.code(401).send({ error: "Password required" });
|
|
||||||
}
|
|
||||||
|
|
||||||
const isValid = await userService.verifyPassword(userId, password);
|
|
||||||
if (!isValid) {
|
|
||||||
return reply.code(401).send({ error: "Incorrect password" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const result = await userService.deleteUser(userId);
|
|
||||||
|
|
||||||
if (result.changes > 0) {
|
|
||||||
return reply.send({ success: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
return reply.code(500).send({ error: "Failed to delete user" });
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Delete User Error:", err);
|
|
||||||
return reply.code(500).send({ error: "Failed to delete user" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getIntegrationStatus(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { id } = req.params as { id: string };
|
|
||||||
const userId = parseInt(id, 10);
|
|
||||||
|
|
||||||
if (!userId || isNaN(userId)) {
|
|
||||||
return reply.code(400).send({ error: "Invalid user id" });
|
|
||||||
}
|
|
||||||
|
|
||||||
const integration = await userService.getAniListIntegration(userId);
|
|
||||||
|
|
||||||
return reply.code(200).send(integration);
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Get Integration Status Error:", (err as Error).message);
|
|
||||||
return reply.code(500).send({ error: "Failed to check integration status" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function disconnectAniList(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { id } = req.params as { id: string };
|
|
||||||
const userId = parseInt(id, 10);
|
|
||||||
|
|
||||||
if (!userId || isNaN(userId)) {
|
|
||||||
return reply.code(400).send({ error: "Invalid user id" });
|
|
||||||
}
|
|
||||||
|
|
||||||
const result = await userService.removeAniListIntegration(userId);
|
|
||||||
|
|
||||||
if (result.changes === 0) {
|
|
||||||
return reply.code(404).send({ error: "AniList integration not found" });
|
|
||||||
}
|
|
||||||
|
|
||||||
return reply.send({ success: true });
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Disconnect AniList Error:", err);
|
|
||||||
return reply.code(500).send({ error: "Failed to disconnect AniList" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function changePassword(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { id } = req.params as { id: string };
|
|
||||||
const { currentPassword, newPassword } = req.body as {
|
|
||||||
currentPassword?: string;
|
|
||||||
newPassword: string | null;
|
|
||||||
};
|
|
||||||
const userId = parseInt(id, 10);
|
|
||||||
|
|
||||||
if (!userId || isNaN(userId)) {
|
|
||||||
return reply.code(400).send({ error: "Invalid user id" });
|
|
||||||
}
|
|
||||||
|
|
||||||
const user = await userService.getUserById(userId);
|
|
||||||
|
|
||||||
if (!user) {
|
|
||||||
return reply.code(404).send({ error: "User not found" });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (user.has_password) {
|
|
||||||
if (!currentPassword) {
|
|
||||||
return reply.code(401).send({ error: "Current password required" });
|
|
||||||
}
|
|
||||||
|
|
||||||
const isValid = await userService.verifyPassword(userId, currentPassword);
|
|
||||||
if (!isValid) {
|
|
||||||
return reply.code(401).send({ error: "Current password is incorrect" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
await userService.updateUser(userId, { password: newPassword });
|
|
||||||
|
|
||||||
return reply.send({
|
|
||||||
success: true,
|
|
||||||
message: newPassword ? "Password updated successfully" : "Password removed successfully"
|
|
||||||
});
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Change Password Error:", err);
|
|
||||||
return reply.code(500).send({ error: "Failed to change password" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,186 +0,0 @@
|
|||||||
import {queryAll, queryOne, run} from '../../shared/database';
|
|
||||||
import bcrypt from 'bcryptjs';
|
|
||||||
|
|
||||||
const USER_DB_NAME = 'userdata';
|
|
||||||
const SALT_ROUNDS = 10;
|
|
||||||
|
|
||||||
interface User {
|
|
||||||
id: number;
|
|
||||||
username: string;
|
|
||||||
profile_picture_url: string | null;
|
|
||||||
has_password: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function userExists(id: number): Promise<boolean> {
|
|
||||||
const sql = 'SELECT 1 FROM User WHERE id = ?';
|
|
||||||
const row = await queryOne(sql, [id], USER_DB_NAME);
|
|
||||||
return !!row;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function createUser(username: string, profilePictureUrl?: string, password?: string): Promise<{ lastID: number }> {
|
|
||||||
let passwordHash = null;
|
|
||||||
|
|
||||||
if (password && password.trim()) {
|
|
||||||
passwordHash = await bcrypt.hash(password.trim(), SALT_ROUNDS);
|
|
||||||
}
|
|
||||||
|
|
||||||
const sql = `
|
|
||||||
INSERT INTO User (username, profile_picture_url, password_hash)
|
|
||||||
VALUES (?, ?, ?)
|
|
||||||
`;
|
|
||||||
const params = [username, profilePictureUrl || null, passwordHash];
|
|
||||||
|
|
||||||
const result = await run(sql, params, USER_DB_NAME);
|
|
||||||
|
|
||||||
return { lastID: result.lastID };
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function updateUser(userId: number, updates: any): Promise<any> {
|
|
||||||
const fields: string[] = [];
|
|
||||||
const values: (string | number | null)[] = [];
|
|
||||||
|
|
||||||
if (updates.username !== undefined) {
|
|
||||||
fields.push('username = ?');
|
|
||||||
values.push(updates.username);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (updates.profilePictureUrl !== undefined) {
|
|
||||||
fields.push('profile_picture_url = ?');
|
|
||||||
values.push(updates.profilePictureUrl);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (updates.password !== undefined) {
|
|
||||||
if (updates.password === null || updates.password === '') {
|
|
||||||
// Eliminar contraseña
|
|
||||||
fields.push('password_hash = ?');
|
|
||||||
values.push(null);
|
|
||||||
} else {
|
|
||||||
// Actualizar contraseña
|
|
||||||
const hash = await bcrypt.hash(updates.password.trim(), SALT_ROUNDS);
|
|
||||||
fields.push('password_hash = ?');
|
|
||||||
values.push(hash);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (fields.length === 0) {
|
|
||||||
return { changes: 0, lastID: userId };
|
|
||||||
}
|
|
||||||
|
|
||||||
const setClause = fields.join(', ');
|
|
||||||
const sql = `UPDATE User SET ${setClause} WHERE id = ?`;
|
|
||||||
values.push(userId);
|
|
||||||
|
|
||||||
return await run(sql, values, USER_DB_NAME);
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function deleteUser(userId: number): Promise<any> {
|
|
||||||
await run(
|
|
||||||
`DELETE FROM ListEntry WHERE user_id = ?`,
|
|
||||||
[userId],
|
|
||||||
USER_DB_NAME
|
|
||||||
);
|
|
||||||
|
|
||||||
await run(
|
|
||||||
`DELETE FROM UserIntegration WHERE user_id = ?`,
|
|
||||||
[userId],
|
|
||||||
USER_DB_NAME
|
|
||||||
);
|
|
||||||
|
|
||||||
await run(
|
|
||||||
`DELETE FROM favorites WHERE user_id = ?`,
|
|
||||||
[userId],
|
|
||||||
'favorites'
|
|
||||||
);
|
|
||||||
|
|
||||||
const result = await run(
|
|
||||||
`DELETE FROM User WHERE id = ?`,
|
|
||||||
[userId],
|
|
||||||
USER_DB_NAME
|
|
||||||
);
|
|
||||||
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getAllUsers(): Promise<User[]> {
|
|
||||||
const sql = `
|
|
||||||
SELECT
|
|
||||||
id,
|
|
||||||
username,
|
|
||||||
profile_picture_url,
|
|
||||||
CASE WHEN password_hash IS NOT NULL THEN 1 ELSE 0 END as has_password
|
|
||||||
FROM User
|
|
||||||
ORDER BY id
|
|
||||||
`;
|
|
||||||
|
|
||||||
const users = await queryAll(sql, [], USER_DB_NAME);
|
|
||||||
|
|
||||||
return users.map((user: any) => ({
|
|
||||||
id: user.id,
|
|
||||||
username: user.username,
|
|
||||||
profile_picture_url: user.profile_picture_url || null,
|
|
||||||
has_password: !!user.has_password
|
|
||||||
})) as User[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getUserById(id: number): Promise<User | null> {
|
|
||||||
const sql = `
|
|
||||||
SELECT
|
|
||||||
id,
|
|
||||||
username,
|
|
||||||
profile_picture_url,
|
|
||||||
CASE WHEN password_hash IS NOT NULL THEN 1 ELSE 0 END as has_password
|
|
||||||
FROM User
|
|
||||||
WHERE id = ?
|
|
||||||
`;
|
|
||||||
|
|
||||||
const user = await queryOne(sql, [id], USER_DB_NAME);
|
|
||||||
|
|
||||||
if (!user) return null;
|
|
||||||
|
|
||||||
return {
|
|
||||||
id: user.id,
|
|
||||||
username: user.username,
|
|
||||||
profile_picture_url: user.profile_picture_url || null,
|
|
||||||
has_password: !!user.has_password
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function verifyPassword(userId: number, password: string): Promise<boolean> {
|
|
||||||
const sql = 'SELECT password_hash FROM User WHERE id = ?';
|
|
||||||
const user = await queryOne(sql, [userId], USER_DB_NAME);
|
|
||||||
|
|
||||||
if (!user || !user.password_hash) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return await bcrypt.compare(password, user.password_hash);
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getAniListIntegration(userId: number) {
|
|
||||||
const sql = `
|
|
||||||
SELECT anilist_user_id, expires_at
|
|
||||||
FROM UserIntegration
|
|
||||||
WHERE user_id = ? AND platform = ?
|
|
||||||
`;
|
|
||||||
|
|
||||||
const row = await queryOne(sql, [userId, "AniList"], USER_DB_NAME);
|
|
||||||
|
|
||||||
if (!row) {
|
|
||||||
return { connected: false };
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
connected: true,
|
|
||||||
anilistUserId: row.anilist_user_id,
|
|
||||||
expiresAt: row.expires_at
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function removeAniListIntegration(userId: number) {
|
|
||||||
const sql = `
|
|
||||||
DELETE FROM UserIntegration
|
|
||||||
WHERE user_id = ? AND platform = ?
|
|
||||||
`;
|
|
||||||
|
|
||||||
return run(sql, [userId, "AniList"], USER_DB_NAME);
|
|
||||||
}
|
|
||||||
@@ -1,408 +0,0 @@
|
|||||||
let animeData = null;
|
|
||||||
let extensionName = null;
|
|
||||||
|
|
||||||
let animeId = null;
|
|
||||||
let isLocal = false;
|
|
||||||
|
|
||||||
const episodePagination = Object.create(PaginationManager);
|
|
||||||
episodePagination.init(50, renderEpisodes);
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
loadAnimeData();
|
|
||||||
setupDescriptionModal();
|
|
||||||
setupEpisodeSearch();
|
|
||||||
|
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
|
||||||
const initialEp = urlParams.get('episode');
|
|
||||||
|
|
||||||
if (initialEp) {
|
|
||||||
setTimeout(() => {
|
|
||||||
if (animeData) {
|
|
||||||
|
|
||||||
const source = isLocal ? 'local' : (extensionName || 'anilist');
|
|
||||||
|
|
||||||
if (typeof AnimePlayer !== 'undefined') {
|
|
||||||
AnimePlayer.init(animeId, source, isLocal, animeData);
|
|
||||||
AnimePlayer.playEpisode(parseInt(initialEp));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, 800);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
async function loadAnimeData() {
|
|
||||||
try {
|
|
||||||
|
|
||||||
const pathParts = window.location.pathname.split('/');
|
|
||||||
|
|
||||||
const cleanParts = pathParts.filter(p => p.length > 0);
|
|
||||||
|
|
||||||
if (cleanParts.length >= 3 && cleanParts[0] === 'anime') {
|
|
||||||
|
|
||||||
extensionName = cleanParts[1];
|
|
||||||
animeId = cleanParts[2];
|
|
||||||
} else if (cleanParts.length === 2 && cleanParts[0] === 'anime') {
|
|
||||||
|
|
||||||
extensionName = null;
|
|
||||||
|
|
||||||
animeId = cleanParts[1];
|
|
||||||
} else {
|
|
||||||
showError("Invalid URL Format");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const localRes = await fetch(`/api/library/anime/${animeId}`);
|
|
||||||
if (localRes.ok) isLocal = true;
|
|
||||||
} catch {}
|
|
||||||
|
|
||||||
const fetchUrl = extensionName
|
|
||||||
? `/api/anime/${animeId}?source=${extensionName}`
|
|
||||||
: `/api/anime/${animeId}?source=anilist`;
|
|
||||||
|
|
||||||
const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() });
|
|
||||||
const data = await res.json();
|
|
||||||
|
|
||||||
if (data.error) {
|
|
||||||
showError("Anime Not Found");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
animeData = data;
|
|
||||||
animeData.entry_type = 'ANIME';
|
|
||||||
|
|
||||||
const metadata = MediaMetadataUtils.formatAnimeData(data, !!extensionName);
|
|
||||||
|
|
||||||
document.title = `${metadata.title} | WaifuBoard`;
|
|
||||||
document.getElementById('title').innerText = metadata.title;
|
|
||||||
if (metadata.poster) document.getElementById('poster').src = metadata.poster;
|
|
||||||
|
|
||||||
document.getElementById('score').innerText = `${metadata.score}% Score`;
|
|
||||||
document.getElementById('year').innerText = metadata.year;
|
|
||||||
document.getElementById('genres').innerText = metadata.genres.split(',').join(' • ');
|
|
||||||
document.getElementById('format').innerText = metadata.format;
|
|
||||||
document.getElementById('status').innerText = metadata.status;
|
|
||||||
document.getElementById('season').innerText = metadata.season;
|
|
||||||
document.getElementById('studio').innerText = metadata.studio;
|
|
||||||
document.getElementById('episodes').innerText = `${metadata.episodes} Ep`;
|
|
||||||
|
|
||||||
updateLocalPill();
|
|
||||||
updateDescription(data.description || data.summary);
|
|
||||||
updateRelations(data.relations?.edges);
|
|
||||||
updateCharacters(metadata.characters);
|
|
||||||
updateRecommendations(data.recommendations?.nodes);
|
|
||||||
|
|
||||||
const source = isLocal ? 'local' : (extensionName || 'anilist');
|
|
||||||
|
|
||||||
if (typeof AnimePlayer !== 'undefined') {
|
|
||||||
AnimePlayer.init(animeId, source, isLocal, animeData);
|
|
||||||
}
|
|
||||||
|
|
||||||
YouTubePlayerUtils.init('trailer-player');
|
|
||||||
YouTubePlayerUtils.playTrailer(metadata.trailer, 'trailer-player', metadata.banner);
|
|
||||||
|
|
||||||
const watchBtn = document.getElementById('watch-btn');
|
|
||||||
if (watchBtn) {
|
|
||||||
watchBtn.onclick = () => {
|
|
||||||
if (typeof AnimePlayer !== 'undefined') AnimePlayer.playEpisode(1);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const total = metadata.episodes || 12;
|
|
||||||
setupEpisodes(total);
|
|
||||||
|
|
||||||
setupAddToListButton();
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error loading anime details:', err);
|
|
||||||
showError("Error loading anime");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateLocalPill() {
|
|
||||||
if (isLocal) {
|
|
||||||
const pill = document.getElementById('local-pill');
|
|
||||||
if(pill) pill.style.display = 'inline-flex';
|
|
||||||
}
|
|
||||||
if (extensionName) {
|
|
||||||
const pill = document.getElementById('extension-pill');
|
|
||||||
if(pill) {
|
|
||||||
pill.innerText = extensionName;
|
|
||||||
pill.style.display = 'inline-flex';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateDescription(rawDescription) {
|
|
||||||
const desc = MediaMetadataUtils.truncateDescription(rawDescription, 3);
|
|
||||||
const previewEl = document.getElementById('description-preview');
|
|
||||||
const fullEl = document.getElementById('full-description');
|
|
||||||
|
|
||||||
if (previewEl) {
|
|
||||||
previewEl.innerHTML = desc.short +
|
|
||||||
(desc.isTruncated ? ' <span onclick="openDescriptionModal()" style="color:white; cursor:pointer; font-weight:700; margin-left:5px;">Read more</span>' : '');
|
|
||||||
}
|
|
||||||
if (fullEl) fullEl.innerHTML = desc.full;
|
|
||||||
}
|
|
||||||
|
|
||||||
function setupDescriptionModal() {
|
|
||||||
const modal = document.getElementById('desc-modal');
|
|
||||||
if (!modal) return;
|
|
||||||
modal.addEventListener('click', (e) => {
|
|
||||||
if (e.target.id === 'desc-modal') {
|
|
||||||
closeDescriptionModal();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function openDescriptionModal() {
|
|
||||||
const modal = document.getElementById('desc-modal');
|
|
||||||
if(modal) modal.classList.add('active');
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeDescriptionModal() {
|
|
||||||
const modal = document.getElementById('desc-modal');
|
|
||||||
if(modal) modal.classList.remove('active');
|
|
||||||
}
|
|
||||||
|
|
||||||
function setupEpisodes(totalEpisodes) {
|
|
||||||
const limitedTotal = Math.min(Math.max(totalEpisodes, 1), 5000);
|
|
||||||
episodePagination.setTotalItems(limitedTotal);
|
|
||||||
renderEpisodes();
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderEpisodes() {
|
|
||||||
const grid = document.getElementById('episodes-grid');
|
|
||||||
if (!grid) return;
|
|
||||||
grid.innerHTML = '';
|
|
||||||
|
|
||||||
const range = episodePagination.getPageRange();
|
|
||||||
const currentEp = (typeof AnimePlayer !== 'undefined') ? AnimePlayer.getCurrentEpisode() : 0;
|
|
||||||
|
|
||||||
for (let i = range.start + 1; i <= range.end; i++) {
|
|
||||||
const btn = document.createElement('div');
|
|
||||||
btn.className = 'episode-btn';
|
|
||||||
if (currentEp === i) btn.classList.add('active-playing');
|
|
||||||
|
|
||||||
btn.innerText = i;
|
|
||||||
|
|
||||||
btn.onclick = () => {
|
|
||||||
if (typeof AnimePlayer !== 'undefined') {
|
|
||||||
AnimePlayer.playEpisode(i);
|
|
||||||
renderEpisodes();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
grid.appendChild(btn);
|
|
||||||
}
|
|
||||||
|
|
||||||
const totalItems = episodePagination.totalItems || 0;
|
|
||||||
const itemsPerPage = episodePagination.itemsPerPage || 50;
|
|
||||||
const safeTotalPages = Math.ceil(totalItems / itemsPerPage) || 1;
|
|
||||||
|
|
||||||
const info = document.getElementById('page-info');
|
|
||||||
if(info) info.innerText = `Page ${episodePagination.currentPage} of ${safeTotalPages}`;
|
|
||||||
|
|
||||||
const prevBtn = document.getElementById('prev-page');
|
|
||||||
const nextBtn = document.getElementById('next-page');
|
|
||||||
|
|
||||||
if(prevBtn) {
|
|
||||||
prevBtn.disabled = episodePagination.currentPage === 1;
|
|
||||||
prevBtn.onclick = () => { episodePagination.prevPage(); };
|
|
||||||
}
|
|
||||||
|
|
||||||
if(nextBtn) {
|
|
||||||
|
|
||||||
nextBtn.disabled = episodePagination.currentPage >= safeTotalPages;
|
|
||||||
nextBtn.onclick = () => { episodePagination.nextPage(); };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function setupEpisodeSearch() {
|
|
||||||
const searchInput = document.getElementById('ep-search');
|
|
||||||
if (!searchInput) return;
|
|
||||||
|
|
||||||
searchInput.addEventListener('input', (e) => {
|
|
||||||
const val = parseInt(e.target.value);
|
|
||||||
const grid = document.getElementById('episodes-grid');
|
|
||||||
const controls = document.getElementById('pagination-controls');
|
|
||||||
|
|
||||||
if (val > 0) {
|
|
||||||
grid.innerHTML = '';
|
|
||||||
const btn = document.createElement('div');
|
|
||||||
btn.className = 'episode-btn';
|
|
||||||
btn.innerText = `${val}`;
|
|
||||||
btn.onclick = () => { if (typeof AnimePlayer !== 'undefined') AnimePlayer.playEpisode(val); };
|
|
||||||
grid.appendChild(btn);
|
|
||||||
if(controls) controls.style.display = 'none';
|
|
||||||
} else if (!e.target.value) {
|
|
||||||
if(controls) controls.style.display = 'flex';
|
|
||||||
renderEpisodes();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateCharacters(characters) {
|
|
||||||
const container = document.getElementById('char-list');
|
|
||||||
if (!container) return;
|
|
||||||
container.innerHTML = '';
|
|
||||||
if (!characters || characters.length === 0) return;
|
|
||||||
|
|
||||||
characters.forEach((char, index) => {
|
|
||||||
const img = char.node?.image?.large || char.image;
|
|
||||||
const name = char.node?.name?.full || char.name;
|
|
||||||
const role = char.role || 'Supporting';
|
|
||||||
|
|
||||||
const card = document.createElement('div');
|
|
||||||
card.className = `character-item ${index >= 12 ? 'hidden-char' : ''}`;
|
|
||||||
card.style.display = index >= 12 ? 'none' : 'flex';
|
|
||||||
|
|
||||||
card.innerHTML = `
|
|
||||||
<div class="char-avatar"><img src="${img}" loading="lazy"></div>
|
|
||||||
<div class="char-info"><div class="char-name">${name}</div><div class="char-role">${role}</div></div>
|
|
||||||
`;
|
|
||||||
container.appendChild(card);
|
|
||||||
});
|
|
||||||
|
|
||||||
const showMoreBtn = document.getElementById('show-more-chars');
|
|
||||||
if (showMoreBtn) {
|
|
||||||
if (characters.length > 12) {
|
|
||||||
showMoreBtn.style.display = 'block';
|
|
||||||
showMoreBtn.onclick = () => {
|
|
||||||
document.querySelectorAll('.hidden-char').forEach(el => el.style.display = 'flex');
|
|
||||||
showMoreBtn.style.display = 'none';
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
showMoreBtn.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateRelations(relations) {
|
|
||||||
const container = document.getElementById('relations-grid');
|
|
||||||
const section = document.getElementById('relations-section');
|
|
||||||
|
|
||||||
if (!container || !relations || relations.length === 0) {
|
|
||||||
if (section) section.style.display = 'none';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
section.style.display = 'block';
|
|
||||||
container.innerHTML = '';
|
|
||||||
|
|
||||||
const priorityMap = {
|
|
||||||
'ADAPTATION': 1,
|
|
||||||
'PREQUEL': 2,
|
|
||||||
'SEQUEL': 3,
|
|
||||||
'PARENT': 4,
|
|
||||||
'SIDE_STORY': 5,
|
|
||||||
'SPIN_OFF': 6,
|
|
||||||
'ALTERNATIVE': 7,
|
|
||||||
'CHARACTER': 8,
|
|
||||||
'OTHER': 99
|
|
||||||
};
|
|
||||||
|
|
||||||
relations.sort((a, b) => {
|
|
||||||
const pA = priorityMap[a.relationType] || 50;
|
|
||||||
const pB = priorityMap[b.relationType] || 50;
|
|
||||||
return pA - pB;
|
|
||||||
});
|
|
||||||
|
|
||||||
relations.forEach(rel => {
|
|
||||||
const media = rel.node;
|
|
||||||
if (!media) return;
|
|
||||||
|
|
||||||
const title = media.title?.romaji || media.title?.english || 'Unknown';
|
|
||||||
const cover = media.coverImage?.large || media.coverImage?.medium || '';
|
|
||||||
|
|
||||||
const typeDisplay = rel.relationType ? rel.relationType.replace(/_/g, ' ') : 'RELATION';
|
|
||||||
const rawType = rel.relationType;
|
|
||||||
|
|
||||||
const el = document.createElement('div');
|
|
||||||
el.className = 'relation-card-horizontal';
|
|
||||||
|
|
||||||
let targetUrl = null;
|
|
||||||
|
|
||||||
if (rawType === 'ADAPTATION') {
|
|
||||||
targetUrl = `/book/${media.id}`;
|
|
||||||
|
|
||||||
} else if (media.type === 'ANIME' && rawType !== 'OTHER') {
|
|
||||||
targetUrl = `/anime/${media.id}`;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
if (targetUrl) {
|
|
||||||
el.onclick = () => { window.location.href = targetUrl; };
|
|
||||||
} else {
|
|
||||||
el.classList.add('no-link');
|
|
||||||
|
|
||||||
el.onclick = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
el.innerHTML = `
|
|
||||||
<img src="${cover}" class="rel-img" alt="${title}" onerror="this.src='/public/assets/placeholder.svg'">
|
|
||||||
<div class="rel-info">
|
|
||||||
<span class="rel-type">${typeDisplay}</span>
|
|
||||||
<span class="rel-title">${title}</span>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
container.appendChild(el);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateRecommendations(recommendations) {
|
|
||||||
const container = document.getElementById('recommendations-grid');
|
|
||||||
if (!container || !recommendations) return;
|
|
||||||
container.innerHTML = '';
|
|
||||||
|
|
||||||
recommendations.forEach(rec => {
|
|
||||||
const media = rec.mediaRecommendation;
|
|
||||||
if (!media) return;
|
|
||||||
|
|
||||||
const title = media.title?.romaji || 'Unknown';
|
|
||||||
const cover = media.coverImage?.large || media.coverImage?.medium || '';
|
|
||||||
|
|
||||||
const el = document.createElement('div');
|
|
||||||
el.className = 'card';
|
|
||||||
|
|
||||||
el.onclick = () => { window.location.href = `/anime/${media.id}`; };
|
|
||||||
|
|
||||||
el.innerHTML = `
|
|
||||||
<div class="card-img-wrap"><img src="${cover}" loading="lazy" onerror="this.src='/public/assets/no-cover.jpg'"></div>
|
|
||||||
<div class="card-content"><h3>${title}</h3></div>
|
|
||||||
`;
|
|
||||||
container.appendChild(el);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function setupAddToListButton() {
|
|
||||||
const btn = document.getElementById('add-to-list-btn');
|
|
||||||
if (!btn || !animeData) return;
|
|
||||||
|
|
||||||
ListModalManager.currentData = animeData;
|
|
||||||
const entryType = 'ANIME';
|
|
||||||
await ListModalManager.checkIfInList(animeId, extensionName || 'anilist', entryType);
|
|
||||||
updateCustomAddButton();
|
|
||||||
btn.onclick = () => ListModalManager.open(animeData, extensionName || 'anilist');
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateCustomAddButton() {
|
|
||||||
const btn = document.getElementById('add-to-list-btn');
|
|
||||||
if (btn && ListModalManager.isInList) {
|
|
||||||
btn.innerHTML = `✓ In Your List`;
|
|
||||||
btn.style.background = 'rgba(34, 197, 94, 0.2)';
|
|
||||||
btn.style.borderColor = '#22c55e';
|
|
||||||
btn.style.color = '#22c55e';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function showError(msg) {
|
|
||||||
const el = document.getElementById('title');
|
|
||||||
if(el) el.innerText = msg;
|
|
||||||
}
|
|
||||||
|
|
||||||
window.openDescriptionModal = openDescriptionModal;
|
|
||||||
window.closeDescriptionModal = closeDescriptionModal;
|
|
||||||
window.scrollRecommendations = (dir) => {
|
|
||||||
const el = document.getElementById('recommendations-grid');
|
|
||||||
if(el) el.scrollBy({ left: 240 * 3 * dir, behavior: 'smooth' });
|
|
||||||
};
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,152 +0,0 @@
|
|||||||
const BASE_PATH = '/src/scripts/jassub/';
|
|
||||||
class SubtitleRenderer {
|
|
||||||
constructor(video, canvas) {
|
|
||||||
this.video = video;
|
|
||||||
this.canvas = canvas;
|
|
||||||
this.instance = null;
|
|
||||||
this.currentUrl = null;
|
|
||||||
}
|
|
||||||
async init(subtitleUrl) {
|
|
||||||
if (!this.video || !this.canvas) return;
|
|
||||||
this.dispose();
|
|
||||||
const finalUrl = subtitleUrl.includes('/api/proxy')
|
|
||||||
? subtitleUrl
|
|
||||||
: `/api/proxy?url=${encodeURIComponent(subtitleUrl)}`;
|
|
||||||
this.currentUrl = finalUrl;
|
|
||||||
try {
|
|
||||||
this.instance = new JASSUB({
|
|
||||||
video: this.video,
|
|
||||||
canvas: this.canvas,
|
|
||||||
subUrl: finalUrl,
|
|
||||||
workerUrl: `${BASE_PATH}jassub-worker.js`,
|
|
||||||
wasmUrl: `${BASE_PATH}jassub-worker.wasm`,
|
|
||||||
modernWasmUrl: `${BASE_PATH}jassub-worker-modern.wasm`,
|
|
||||||
blendMode: 'js',
|
|
||||||
asyncRender: true,
|
|
||||||
onDemand: true,
|
|
||||||
targetFps: 60,
|
|
||||||
debug: false
|
|
||||||
});
|
|
||||||
console.log('JASSUB initialized for:', finalUrl);
|
|
||||||
} catch (e) {
|
|
||||||
console.error("JASSUB Init Error:", e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
resize() {
|
|
||||||
if (this.instance && this.instance.resize) {
|
|
||||||
this.instance.resize();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
setTrack(url) {
|
|
||||||
const finalUrl = url.includes('/api/proxy')
|
|
||||||
? url
|
|
||||||
: `/api/proxy?url=${encodeURIComponent(url)}`;
|
|
||||||
if (this.instance) {
|
|
||||||
this.instance.setTrackByUrl(finalUrl);
|
|
||||||
this.currentUrl = finalUrl;
|
|
||||||
} else {
|
|
||||||
this.init(url);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
dispose() {
|
|
||||||
if (this.instance) {
|
|
||||||
try {
|
|
||||||
this.instance.destroy();
|
|
||||||
} catch (e) {
|
|
||||||
console.warn("Error destroying JASSUB:", e);
|
|
||||||
}
|
|
||||||
this.instance = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
class SimpleSubtitleRenderer {
|
|
||||||
constructor(video, canvas) {
|
|
||||||
this.video = video;
|
|
||||||
this.canvas = canvas;
|
|
||||||
this.ctx = canvas.getContext('2d');
|
|
||||||
this.cues = [];
|
|
||||||
this.destroyed = false;
|
|
||||||
this.setupCanvas();
|
|
||||||
this.video.addEventListener('timeupdate', () => this.render());
|
|
||||||
}
|
|
||||||
setupCanvas() {
|
|
||||||
const updateSize = () => {
|
|
||||||
if (!this.video || !this.canvas) return;
|
|
||||||
const rect = this.video.getBoundingClientRect();
|
|
||||||
this.canvas.width = rect.width;
|
|
||||||
this.canvas.height = rect.height;
|
|
||||||
};
|
|
||||||
updateSize();
|
|
||||||
window.addEventListener('resize', updateSize);
|
|
||||||
this.resizeHandler = updateSize;
|
|
||||||
}
|
|
||||||
async loadSubtitles(url) {
|
|
||||||
try {
|
|
||||||
let finalUrl = url;
|
|
||||||
const isLocal = url.startsWith('/');
|
|
||||||
const isAlreadyProxied = url.includes('/api/proxy');
|
|
||||||
if (!isLocal && !isAlreadyProxied && (url.startsWith('http:') || url.startsWith('https:'))) {
|
|
||||||
finalUrl = `/api/proxy?url=${encodeURIComponent(url)}`;
|
|
||||||
}
|
|
||||||
console.log('Fetching subtitles from:', finalUrl);
|
|
||||||
const response = await fetch(finalUrl);
|
|
||||||
if (!response.ok) throw new Error(`Status: ${response.status}`);
|
|
||||||
const text = await response.text();
|
|
||||||
this.cues = this.parseSRT(text);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to load subtitles:', error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
setTrack(url) {
|
|
||||||
this.cues = [];
|
|
||||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
||||||
this.loadSubtitles(url);
|
|
||||||
}
|
|
||||||
parseSRT(srtText) {
|
|
||||||
const normalizedText = srtText.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
|
|
||||||
const blocks = normalizedText.trim().split('\n\n');
|
|
||||||
return blocks.map(block => {
|
|
||||||
const lines = block.split('\n');
|
|
||||||
if (lines.length < 3) return null;
|
|
||||||
const timeMatch = lines[1].match(/(\d{2}):(\d{2}):(\d{2}),(\d{3}) --> (\d{2}):(\d{2}):(\d{2}),(\d{3})/);
|
|
||||||
if (!timeMatch) return null;
|
|
||||||
const start = parseInt(timeMatch[1]) * 3600 + parseInt(timeMatch[2]) * 60 + parseInt(timeMatch[3]) + parseInt(timeMatch[4]) / 1000;
|
|
||||||
const end = parseInt(timeMatch[5]) * 3600 + parseInt(timeMatch[6]) * 60 + parseInt(timeMatch[7]) + parseInt(timeMatch[8]) / 1000;
|
|
||||||
let text = lines.slice(2).join('\n');
|
|
||||||
text = text.replace(/<[^>]*>/g, '');
|
|
||||||
text = text.replace(/\{[^}]*\}/g, '');
|
|
||||||
return { start, end, text };
|
|
||||||
}).filter(Boolean);
|
|
||||||
}
|
|
||||||
render() {
|
|
||||||
if (this.destroyed) return;
|
|
||||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
||||||
const currentTime = this.video.currentTime;
|
|
||||||
const cue = this.cues.find(c => currentTime >= c.start && currentTime <= c.end);
|
|
||||||
if (cue) this.drawSubtitle(cue.text);
|
|
||||||
}
|
|
||||||
drawSubtitle(text) {
|
|
||||||
const lines = text.split('\n');
|
|
||||||
const fontSize = Math.max(20, this.canvas.height * 0.04);
|
|
||||||
this.ctx.font = `bold ${fontSize}px Arial, sans-serif`;
|
|
||||||
this.ctx.textAlign = 'center';
|
|
||||||
this.ctx.textBaseline = 'bottom';
|
|
||||||
const lineHeight = fontSize * 1.2;
|
|
||||||
const startY = this.canvas.height - 60;
|
|
||||||
lines.reverse().forEach((line, index) => {
|
|
||||||
const y = startY - (index * lineHeight);
|
|
||||||
this.ctx.strokeStyle = 'black';
|
|
||||||
this.ctx.lineWidth = 4;
|
|
||||||
this.ctx.strokeText(line, this.canvas.width / 2, y);
|
|
||||||
this.ctx.fillStyle = 'white';
|
|
||||||
this.ctx.fillText(line, this.canvas.width / 2, y);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
dispose() {
|
|
||||||
this.destroyed = true;
|
|
||||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
||||||
if (this.resizeHandler) window.removeEventListener('resize', this.resizeHandler);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
window.SubtitleRenderer = SubtitleRenderer;
|
|
||||||
window.SimpleSubtitleRenderer = SimpleSubtitleRenderer;
|
|
||||||
@@ -1,200 +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 avatarUrl = user.avatar || "/public/assets/avatar.png"
|
|
||||||
|
|
||||||
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) {
|
|
||||||
navUser.style.display = "flex"
|
|
||||||
navUsername.textContent = user.username
|
|
||||||
navAvatar.src = avatarUrl
|
|
||||||
if (dropdownAvatar) dropdownAvatar.src = avatarUrl
|
|
||||||
}
|
|
||||||
|
|
||||||
const titlebarAvatar = document.getElementById("titlebar-avatar")
|
|
||||||
const titlebarActions = document.getElementById("titlebar-actions")
|
|
||||||
|
|
||||||
if (titlebarAvatar) {
|
|
||||||
titlebarAvatar.src = avatarUrl
|
|
||||||
}
|
|
||||||
|
|
||||||
if (titlebarActions) {
|
|
||||||
titlebarActions.style.display = "flex"
|
|
||||||
}
|
|
||||||
|
|
||||||
setupDropdown()
|
|
||||||
|
|
||||||
} catch (e) {
|
|
||||||
console.error("Failed to load user UI:", e)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let settingsModalLoaded = false;
|
|
||||||
|
|
||||||
const navSettingsBtn = document.getElementById('nav-settings');
|
|
||||||
const titlebarSettingsBtn = document.getElementById('titlebar-settings');
|
|
||||||
|
|
||||||
if (navSettingsBtn) navSettingsBtn.addEventListener('click', openSettings);
|
|
||||||
if (titlebarSettingsBtn) titlebarSettingsBtn.addEventListener('click', (e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
|
|
||||||
openSettings();
|
|
||||||
document.getElementById("titlebar-dropdown")?.classList.remove("active");
|
|
||||||
});
|
|
||||||
|
|
||||||
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;
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 50));
|
|
||||||
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 setupDropdown() {
|
|
||||||
|
|
||||||
const userAvatarBtn = document.querySelector(".user-avatar-btn")
|
|
||||||
const navDropdown = document.getElementById("nav-dropdown")
|
|
||||||
const navLogout = document.getElementById("nav-logout")
|
|
||||||
|
|
||||||
if (userAvatarBtn && navDropdown) {
|
|
||||||
userAvatarBtn.addEventListener("click", (e) => {
|
|
||||||
e.stopPropagation()
|
|
||||||
navDropdown.classList.toggle("active")
|
|
||||||
|
|
||||||
document.getElementById("titlebar-dropdown")?.classList.remove("active")
|
|
||||||
})
|
|
||||||
if (navLogout) {
|
|
||||||
navLogout.addEventListener("click", () => {
|
|
||||||
localStorage.removeItem("token")
|
|
||||||
window.location.href = "/"
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const titlebarUserBox = document.getElementById("titlebar-user-box")
|
|
||||||
const titlebarDropdown = document.getElementById("titlebar-dropdown")
|
|
||||||
const titlebarLogout = document.getElementById("titlebar-logout")
|
|
||||||
|
|
||||||
if (titlebarUserBox && titlebarDropdown) {
|
|
||||||
titlebarUserBox.addEventListener("click", (e) => {
|
|
||||||
e.stopPropagation()
|
|
||||||
titlebarDropdown.classList.toggle("active")
|
|
||||||
|
|
||||||
document.getElementById("nav-dropdown")?.classList.remove("active")
|
|
||||||
})
|
|
||||||
|
|
||||||
if (titlebarLogout) {
|
|
||||||
titlebarLogout.addEventListener("click", (e) => {
|
|
||||||
e.stopPropagation()
|
|
||||||
localStorage.removeItem("token")
|
|
||||||
window.location.href = "/"
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
titlebarDropdown.addEventListener("click", (e) => {
|
|
||||||
e.stopPropagation()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener("click", (e) => {
|
|
||||||
if (navDropdown && !navDropdown.contains(e.target)) {
|
|
||||||
navDropdown.classList.remove("active")
|
|
||||||
}
|
|
||||||
if (titlebarDropdown && !titlebarDropdown.contains(e.target)) {
|
|
||||||
titlebarDropdown.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();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('click', (e) => {
|
|
||||||
if (!searchWrapper.contains(e.target)) {
|
|
||||||
searchWrapper.classList.remove('active-mobile');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const createRoomModal = new CreateRoomModal();
|
|
||||||
|
|
||||||
const createBtn = document.getElementById('nav-create-party');
|
|
||||||
if (createBtn) {
|
|
||||||
createBtn.addEventListener('click', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
const dropdown = document.getElementById('nav-dropdown');
|
|
||||||
if(dropdown) dropdown.classList.remove('active');
|
|
||||||
|
|
||||||
createRoomModal.open();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,655 +0,0 @@
|
|||||||
let bookData = null;
|
|
||||||
let extensionName = null;
|
|
||||||
let bookId = null;
|
|
||||||
let bookSlug = null;
|
|
||||||
|
|
||||||
let allChapters = [];
|
|
||||||
let filteredChapters = [];
|
|
||||||
let availableExtensions = [];
|
|
||||||
let isLocal = false;
|
|
||||||
|
|
||||||
let currentLanguage = null;
|
|
||||||
let uniqueLanguages = [];
|
|
||||||
let isSortAscending = true;
|
|
||||||
let manualExtensionBookId = null;
|
|
||||||
|
|
||||||
const chapterPagination = Object.create(PaginationManager);
|
|
||||||
chapterPagination.init(6, () => renderChapterList());
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
init();
|
|
||||||
setupModalClickOutside();
|
|
||||||
document.getElementById('sort-btn')?.addEventListener('click', toggleSortOrder);
|
|
||||||
});
|
|
||||||
|
|
||||||
async function init() {
|
|
||||||
try {
|
|
||||||
const urlData = URLUtils.parseEntityPath('book');
|
|
||||||
if (!urlData) { showError("Book Not Found"); return; }
|
|
||||||
|
|
||||||
extensionName = urlData.extensionName;
|
|
||||||
bookId = urlData.entityId;
|
|
||||||
bookSlug = urlData.slug;
|
|
||||||
|
|
||||||
await loadBookMetadata();
|
|
||||||
await checkLocalLibraryEntry();
|
|
||||||
await loadAvailableExtensions();
|
|
||||||
await loadChapters();
|
|
||||||
await setupAddToListButton();
|
|
||||||
|
|
||||||
document.getElementById('manual-match-btn')?.addEventListener('click', () => {
|
|
||||||
const select = document.getElementById('provider-filter');
|
|
||||||
const provider = select.value;
|
|
||||||
|
|
||||||
// Obtener título para prellenar
|
|
||||||
const currentTitle = bookData?.title?.romaji || bookData?.title?.english || '';
|
|
||||||
|
|
||||||
MatchModal.open({
|
|
||||||
provider: provider,
|
|
||||||
initialQuery: currentTitle,
|
|
||||||
// Define CÓMO buscar
|
|
||||||
onSearch: async (query, prov) => {
|
|
||||||
const res = await fetch(`/api/search/books/${prov}?q=${encodeURIComponent(query)}`);
|
|
||||||
const data = await res.json();
|
|
||||||
return data.results || [];
|
|
||||||
},
|
|
||||||
// Define QUÉ hacer al seleccionar
|
|
||||||
onSelect: (item) => {
|
|
||||||
console.log("Selected Book ID:", item.id);
|
|
||||||
manualExtensionBookId = item.id;
|
|
||||||
|
|
||||||
// Lógica existente de tu book.js para recargar caps
|
|
||||||
loadChapters(provider);
|
|
||||||
|
|
||||||
// Feedback visual en el botón
|
|
||||||
const btn = document.getElementById('manual-match-btn');
|
|
||||||
if(btn) btn.style.color = '#22c55e';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Init Error:", err);
|
|
||||||
showError("Error loading book");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadBookMetadata() {
|
|
||||||
const source = extensionName || 'anilist';
|
|
||||||
const fetchUrl = `/api/book/${bookId}?source=${source}`;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(fetchUrl);
|
|
||||||
const data = await res.json();
|
|
||||||
|
|
||||||
if (data.error || !data) { showError("Book Not Found"); return; }
|
|
||||||
|
|
||||||
const raw = Array.isArray(data) ? data[0] : data;
|
|
||||||
bookData = raw;
|
|
||||||
|
|
||||||
const metadata = MediaMetadataUtils.formatBookData(raw, !!extensionName);
|
|
||||||
bookData.entry_type = metadata.format === 'MANGA' ? 'MANGA' : 'NOVEL';
|
|
||||||
|
|
||||||
updatePageTitle(metadata.title);
|
|
||||||
updateMetadata(metadata, raw);
|
|
||||||
updateExtensionPill();
|
|
||||||
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
showError("Error loading metadata");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updatePageTitle(title) {
|
|
||||||
document.title = `${title} | WaifuBoard Books`;
|
|
||||||
const titleEl = document.getElementById('title');
|
|
||||||
if (titleEl) titleEl.innerText = title;
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateMetadata(metadata, rawData) {
|
|
||||||
// 1. Cabecera (Score, Año, Status, Formato, Caps)
|
|
||||||
const elements = {
|
|
||||||
'description': metadata.description,
|
|
||||||
'published-date': metadata.year,
|
|
||||||
'status': metadata.status,
|
|
||||||
'format': metadata.format,
|
|
||||||
'chapters-count': metadata.chapters ? `${metadata.chapters} Ch` : '?? Ch',
|
|
||||||
'genres': metadata.genres ? metadata.genres.replace(/,/g, ' • ') : '',
|
|
||||||
'poster': metadata.poster,
|
|
||||||
'hero-bg': metadata.banner
|
|
||||||
};
|
|
||||||
|
|
||||||
if(document.getElementById('description')) document.getElementById('description').innerHTML = metadata.description;
|
|
||||||
if(document.getElementById('poster')) document.getElementById('poster').src = metadata.poster;
|
|
||||||
if(document.getElementById('hero-bg')) document.getElementById('hero-bg').src = metadata.banner;
|
|
||||||
|
|
||||||
['published-date','status','format','chapters-count','genres'].forEach(id => {
|
|
||||||
const el = document.getElementById(id);
|
|
||||||
if(el) el.innerText = elements[id];
|
|
||||||
});
|
|
||||||
|
|
||||||
const scoreEl = document.getElementById('score');
|
|
||||||
if (scoreEl) scoreEl.innerText = extensionName ? `${metadata.score}` : `${metadata.score}% Score`;
|
|
||||||
|
|
||||||
// 2. Sidebar: Sinónimos (Para llenar espacio vacío)
|
|
||||||
if (rawData.synonyms && rawData.synonyms.length > 0) {
|
|
||||||
const sidebarInfo = document.getElementById('sidebar-info');
|
|
||||||
const list = document.getElementById('synonyms-list');
|
|
||||||
if (sidebarInfo && list) {
|
|
||||||
sidebarInfo.style.display = 'block';
|
|
||||||
list.innerHTML = '';
|
|
||||||
// Mostrar máx 5 sinónimos para no alargar demasiado
|
|
||||||
rawData.synonyms.slice(0, 5).forEach(syn => {
|
|
||||||
const li = document.createElement('li');
|
|
||||||
li.innerText = syn;
|
|
||||||
list.appendChild(li);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3. Renderizar Personajes
|
|
||||||
if (rawData.characters && rawData.characters.nodes && rawData.characters.nodes.length > 0) {
|
|
||||||
renderCharacters(rawData.characters.nodes);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 4. Renderizar Relaciones
|
|
||||||
if (rawData.relations && rawData.relations.edges && rawData.relations.edges.length > 0) {
|
|
||||||
renderRelations(rawData.relations.edges);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderCharacters(nodes) {
|
|
||||||
const container = document.getElementById('characters-list');
|
|
||||||
if(!container) return;
|
|
||||||
container.innerHTML = '';
|
|
||||||
|
|
||||||
nodes.forEach(char => {
|
|
||||||
const el = document.createElement('div');
|
|
||||||
el.className = 'character-item';
|
|
||||||
|
|
||||||
const img = char.image?.large || char.image?.medium || '/public/assets/no-image.png';
|
|
||||||
const name = char.name?.full || 'Unknown';
|
|
||||||
const role = char.role || 'Supporting';
|
|
||||||
|
|
||||||
el.innerHTML = `
|
|
||||||
<div class="char-avatar"><img src="${img}" loading="lazy"></div>
|
|
||||||
<div class="char-info">
|
|
||||||
<div class="char-name">${name}</div>
|
|
||||||
<div class="char-role">${role}</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
container.appendChild(el);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderRelations(edges) {
|
|
||||||
const container = document.getElementById('relations-list');
|
|
||||||
const section = document.getElementById('relations-section');
|
|
||||||
if(!container || !section) return;
|
|
||||||
|
|
||||||
if (!edges || edges.length === 0) {
|
|
||||||
section.style.display = 'none';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
section.style.display = 'block';
|
|
||||||
container.innerHTML = '';
|
|
||||||
|
|
||||||
edges.forEach(edge => {
|
|
||||||
const node = edge.node;
|
|
||||||
if (!node) return;
|
|
||||||
|
|
||||||
const el = document.createElement('div');
|
|
||||||
el.className = 'relation-card-horizontal';
|
|
||||||
|
|
||||||
const img = node.coverImage?.large || node.coverImage?.medium || '/public/assets/placeholder.svg';
|
|
||||||
const title = node.title?.romaji || node.title?.english || node.title?.native || 'Unknown';
|
|
||||||
const type = edge.relationType ? edge.relationType.replace(/_/g, ' ') : 'Related';
|
|
||||||
|
|
||||||
el.innerHTML = `
|
|
||||||
<img src="${img}" class="rel-img" alt="${title}" loading="lazy">
|
|
||||||
<div class="rel-info">
|
|
||||||
<span class="rel-type">${type}</span>
|
|
||||||
<span class="rel-title">${title}</span>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
el.onclick = () => {
|
|
||||||
const imgUrl = node.coverImage?.medium || '';
|
|
||||||
const targetType = imgUrl.includes('/manga/') ? 'book' : 'anime';
|
|
||||||
window.location.href = `/${targetType}/${node.id}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
container.appendChild(el);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function processChaptersData(chaptersData) {
|
|
||||||
allChapters = chaptersData;
|
|
||||||
const langSet = new Set(allChapters.map(ch => ch.language).filter(l => l));
|
|
||||||
uniqueLanguages = Array.from(langSet);
|
|
||||||
setupLanguageSelector();
|
|
||||||
filterAndRenderChapters();
|
|
||||||
setupReadButton();
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildProxyUrl(url, headers = {}) {
|
|
||||||
const origin = window.location.origin;
|
|
||||||
|
|
||||||
const params = new URLSearchParams({ url });
|
|
||||||
if (headers.Referer || headers.referer)
|
|
||||||
params.append("referer", headers.Referer || headers.referer);
|
|
||||||
if (headers["User-Agent"] || headers["user-agent"])
|
|
||||||
params.append("userAgent", headers["User-Agent"] || headers["user-agent"]);
|
|
||||||
if (headers.Origin || headers.origin)
|
|
||||||
params.append("origin", headers.Origin || headers.origin);
|
|
||||||
|
|
||||||
return `${origin}/api/proxy?${params.toString()}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function downloadChapter(chapterId, chapterNumber, provider, btnElement) {
|
|
||||||
// Validamos que tengamos bookId y un provider válido
|
|
||||||
if (!bookId || !provider) return showError("Error: Faltan datos del capítulo");
|
|
||||||
|
|
||||||
// Feedback visual
|
|
||||||
const originalText = btnElement.innerHTML;
|
|
||||||
btnElement.innerHTML = `<span class="spinner">↻</span>`; // Spinner pequeño
|
|
||||||
btnElement.disabled = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
// 1. OBTENER CONTENIDO USANDO EL PROVIDER DEL CAPÍTULO
|
|
||||||
// CAMBIO AQUÍ: Usamos 'provider' en lugar de 'extensionName'
|
|
||||||
const fetchUrl = `/api/book/${bookId}/${chapterId}/${provider}?source=${extensionName || 'anilist'}&lang=none`;
|
|
||||||
|
|
||||||
const contentRes = await fetch(fetchUrl);
|
|
||||||
|
|
||||||
if (!contentRes.ok) throw new Error("Error obteniendo contenido del capítulo");
|
|
||||||
const chapterData = await contentRes.json();
|
|
||||||
|
|
||||||
// 2. PREPARAR BODY (Misma lógica)
|
|
||||||
let payload = {
|
|
||||||
anilist_id: parseInt(bookId),
|
|
||||||
chapter_number: parseFloat(chapterNumber),
|
|
||||||
format: "",
|
|
||||||
};
|
|
||||||
|
|
||||||
if (chapterData.pages && Array.isArray(chapterData.pages)) {
|
|
||||||
payload.format = "manga";
|
|
||||||
payload.images = chapterData.pages.map((img, index) => {
|
|
||||||
let finalUrl = img.url;
|
|
||||||
if (img.headers && Object.keys(img.headers).length > 0) {
|
|
||||||
finalUrl = buildProxyUrl(img.url, img.headers);
|
|
||||||
}
|
|
||||||
return { index: index, url: finalUrl };
|
|
||||||
});
|
|
||||||
}
|
|
||||||
else if (chapterData.content) {
|
|
||||||
payload.format = "novel";
|
|
||||||
payload.content = chapterData.content;
|
|
||||||
} else {
|
|
||||||
throw new Error("Formato desconocido");
|
|
||||||
}
|
|
||||||
|
|
||||||
const downloadRes = await fetch('/api/library/download/book', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify(payload)
|
|
||||||
});
|
|
||||||
|
|
||||||
const downloadData = await downloadRes.json();
|
|
||||||
|
|
||||||
if (downloadRes.status === 200) {
|
|
||||||
btnElement.innerHTML = "✓";
|
|
||||||
btnElement.style.color = "#22c55e"; // Icono verde
|
|
||||||
} else if (downloadRes.status === 409) {
|
|
||||||
btnElement.innerHTML = "✓";
|
|
||||||
btnElement.style.color = "#3b82f6"; // Icono azul (ya existe)
|
|
||||||
} else {
|
|
||||||
throw new Error(downloadData.message || "Error");
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Download Error:", err);
|
|
||||||
btnElement.innerHTML = "✕"; // X roja
|
|
||||||
btnElement.style.color = "#ef4444";
|
|
||||||
btnElement.disabled = false;
|
|
||||||
|
|
||||||
// Restaurar icono original después de 3 seg
|
|
||||||
setTimeout(() => {
|
|
||||||
btnElement.innerHTML = originalText;
|
|
||||||
btnElement.style.color = "";
|
|
||||||
}, 3000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadChapters(targetProvider = null) {
|
|
||||||
const listContainer = document.getElementById('chapters-list');
|
|
||||||
const loadingMsg = document.getElementById('loading-msg');
|
|
||||||
|
|
||||||
if(listContainer) listContainer.innerHTML = '';
|
|
||||||
if(loadingMsg) loadingMsg.style.display = 'block';
|
|
||||||
|
|
||||||
if (!targetProvider) {
|
|
||||||
const select = document.getElementById('provider-filter');
|
|
||||||
targetProvider = select ? select.value : (availableExtensions[0] || 'all');
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
let fetchUrl;
|
|
||||||
let isLocalRequest = targetProvider === 'local';
|
|
||||||
|
|
||||||
if (isLocalRequest) {
|
|
||||||
fetchUrl = `/api/library/${bookId}/units`;
|
|
||||||
} else {
|
|
||||||
const source = extensionName || 'anilist';
|
|
||||||
fetchUrl = `/api/book/${bookId}/chapters?source=${source}`;
|
|
||||||
if (targetProvider !== 'all') fetchUrl += `&provider=${targetProvider}`;
|
|
||||||
if (manualExtensionBookId && targetProvider !== 'all') {
|
|
||||||
fetchUrl += `&extensionBookId=${manualExtensionBookId}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const res = await fetch(fetchUrl);
|
|
||||||
const data = await res.json();
|
|
||||||
|
|
||||||
if(loadingMsg) loadingMsg.style.display = 'none';
|
|
||||||
|
|
||||||
let rawData = [];
|
|
||||||
if (isLocalRequest) {
|
|
||||||
rawData = (data.units || []).map((unit, idx) => ({
|
|
||||||
id: unit.id || idx, number: unit.number, title: unit.name,
|
|
||||||
provider: 'local', index: idx, format: unit.format, language: 'local'
|
|
||||||
}));
|
|
||||||
} else {
|
|
||||||
rawData = data.chapters || [];
|
|
||||||
}
|
|
||||||
processChaptersData(rawData);
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
if(loadingMsg) loadingMsg.style.display = 'none';
|
|
||||||
if(listContainer) listContainer.innerHTML = '<div style="text-align:center; color: #ef4444;">Error loading chapters.</div>';
|
|
||||||
console.error(err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function setupLanguageSelector() {
|
|
||||||
const selectorContainer = document.getElementById('language-selector-container');
|
|
||||||
const select = document.getElementById('language-select');
|
|
||||||
if (!selectorContainer || !select) return;
|
|
||||||
|
|
||||||
if (uniqueLanguages.length <= 1) {
|
|
||||||
selectorContainer.classList.add('hidden');
|
|
||||||
currentLanguage = uniqueLanguages[0] || null;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
selectorContainer.classList.remove('hidden');
|
|
||||||
select.innerHTML = '';
|
|
||||||
|
|
||||||
const langNames = { 'es': 'Español', 'es-419': 'Latino', 'en': 'English', 'pt-br': 'Português', 'ja': '日本語' };
|
|
||||||
|
|
||||||
uniqueLanguages.forEach(lang => {
|
|
||||||
const option = document.createElement('option');
|
|
||||||
option.value = lang;
|
|
||||||
option.textContent = langNames[lang] || lang.toUpperCase();
|
|
||||||
select.appendChild(option);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (uniqueLanguages.includes('es-419')) currentLanguage = 'es-419';
|
|
||||||
else if (uniqueLanguages.includes('es')) currentLanguage = 'es';
|
|
||||||
else currentLanguage = uniqueLanguages[0];
|
|
||||||
select.value = currentLanguage;
|
|
||||||
|
|
||||||
select.onchange = (e) => {
|
|
||||||
currentLanguage = e.target.value;
|
|
||||||
chapterPagination.currentPage = 1;
|
|
||||||
filterAndRenderChapters();
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function filterAndRenderChapters() {
|
|
||||||
let tempChapters = [...allChapters];
|
|
||||||
if (currentLanguage && uniqueLanguages.length > 1) {
|
|
||||||
tempChapters = tempChapters.filter(ch => ch.language === currentLanguage);
|
|
||||||
}
|
|
||||||
const searchQuery = document.getElementById('chapter-search')?.value.toLowerCase();
|
|
||||||
if(searchQuery){
|
|
||||||
tempChapters = tempChapters.filter(ch =>
|
|
||||||
(ch.title && ch.title.toLowerCase().includes(searchQuery)) ||
|
|
||||||
(ch.number && ch.number.toString().includes(searchQuery))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
tempChapters.sort((a, b) => {
|
|
||||||
const numA = parseFloat(a.number) || 0;
|
|
||||||
const numB = parseFloat(b.number) || 0;
|
|
||||||
return isSortAscending ? numA - numB : numB - numA;
|
|
||||||
});
|
|
||||||
filteredChapters = tempChapters;
|
|
||||||
chapterPagination.setTotalItems(filteredChapters.length);
|
|
||||||
renderChapterList();
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderChapterList() {
|
|
||||||
const container = document.getElementById('chapters-list');
|
|
||||||
if(!container) return;
|
|
||||||
container.innerHTML = '';
|
|
||||||
const itemsToShow = chapterPagination.getCurrentPageItems(filteredChapters);
|
|
||||||
|
|
||||||
if (itemsToShow.length === 0) {
|
|
||||||
container.innerHTML = '<div style="text-align:center; padding:2rem; color:#888;">No chapters found.</div>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
itemsToShow.forEach(chapter => {
|
|
||||||
const el = document.createElement('div');
|
|
||||||
el.className = 'chapter-item';
|
|
||||||
|
|
||||||
// El clic principal abre el lector
|
|
||||||
el.onclick = () => openReader(chapter.id, chapter.provider);
|
|
||||||
|
|
||||||
const dateStr = chapter.date ? new Date(chapter.date).toLocaleDateString() : '';
|
|
||||||
const providerLabel = chapter.provider !== 'local' ? chapter.provider : '';
|
|
||||||
|
|
||||||
// Definimos el icono SVG de descarga para no ensuciar tanto el template string
|
|
||||||
const downloadIcon = `
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
|
||||||
<polyline points="7 10 12 15 17 10"></polyline>
|
|
||||||
<line x1="12" y1="15" x2="12" y2="3"></line>
|
|
||||||
</svg>`;
|
|
||||||
|
|
||||||
const isLocal = chapter.provider === 'local';
|
|
||||||
const downloadBtnStyle = isLocal ? 'display:none;' : '';
|
|
||||||
|
|
||||||
el.innerHTML = `
|
|
||||||
<div class="chapter-info">
|
|
||||||
<span class="chapter-number">Chapter ${chapter.number}</span>
|
|
||||||
<span class="chapter-title">${chapter.title || ''}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="chapter-actions" style="display: flex; align-items: center; gap: 10px;">
|
|
||||||
<div class="chapter-meta">
|
|
||||||
${providerLabel ? `<span class="lang-tag">${providerLabel}</span>` : ''}
|
|
||||||
${dateStr ? `<span>${dateStr}</span>` : ''}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button class="download-btn"
|
|
||||||
style="${downloadBtnStyle}"
|
|
||||||
onclick="event.stopPropagation(); downloadChapter('${chapter.id}', '${chapter.number}', '${chapter.provider}', this)"
|
|
||||||
title="Descargar">
|
|
||||||
${downloadIcon}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<svg class="chapter-play-icon" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path d="M8 5v14l11-7z"/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
container.appendChild(el);
|
|
||||||
});
|
|
||||||
|
|
||||||
chapterPagination.renderControls('pagination', 'page-info', 'prev-page', 'next-page');
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleSortOrder() {
|
|
||||||
isSortAscending = !isSortAscending;
|
|
||||||
const btn = document.getElementById('sort-btn');
|
|
||||||
if(btn) btn.style.transform = isSortAscending ? 'rotate(180deg)' : 'rotate(0deg)';
|
|
||||||
filterAndRenderChapters();
|
|
||||||
}
|
|
||||||
|
|
||||||
function setupReadButton() {
|
|
||||||
const readBtn = document.getElementById('read-start-btn');
|
|
||||||
if (!readBtn || allChapters.length === 0) return;
|
|
||||||
const firstChapter = [...allChapters].sort((a,b) => a.index - b.index)[0];
|
|
||||||
if (firstChapter) readBtn.onclick = () =>
|
|
||||||
openReader(firstChapter.index ?? firstChapter.id, firstChapter.provider);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function openReader(chapterIndexOrId, provider) {
|
|
||||||
const lang = currentLanguage ?? 'none';
|
|
||||||
window.location.href =
|
|
||||||
URLUtils.buildReadUrl(bookId, chapterIndexOrId, provider, extensionName || 'anilist')
|
|
||||||
+ `?lang=${lang}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function checkLocalLibraryEntry() {
|
|
||||||
try {
|
|
||||||
const libraryType = bookData?.entry_type === 'NOVEL' ? 'novels' : 'manga';
|
|
||||||
const res = await fetch(`/api/library/${libraryType}/${bookId}`);
|
|
||||||
if (!res.ok) return;
|
|
||||||
const data = await res.json();
|
|
||||||
if (data.matched) {
|
|
||||||
isLocal = true;
|
|
||||||
const pill = document.getElementById('local-pill');
|
|
||||||
if (pill) {
|
|
||||||
pill.textContent = 'Local';
|
|
||||||
pill.style.display = 'inline-flex';
|
|
||||||
pill.style.background = 'rgba(34, 197, 94, 0.2)';
|
|
||||||
pill.style.color = '#22c55e';
|
|
||||||
pill.style.borderColor = 'rgba(34, 197, 94, 0.3)';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (e) { console.error("Error checking local:", e); }
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadAvailableExtensions() {
|
|
||||||
try {
|
|
||||||
if (!bookData?.entry_type) return;
|
|
||||||
console.log(bookData.entry_type)
|
|
||||||
|
|
||||||
const type = bookData.entry_type === 'MANGA' ? 'manga' : 'novel';
|
|
||||||
const res = await fetch(`/api/extensions/${type}`);
|
|
||||||
const data = await res.json();
|
|
||||||
|
|
||||||
availableExtensions = data.extensions || [];
|
|
||||||
setupProviderFilter();
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function setupProviderFilter() {
|
|
||||||
const select = document.getElementById('provider-filter');
|
|
||||||
const manualBtn = document.getElementById('manual-match-btn'); // NUEVO
|
|
||||||
|
|
||||||
if (!select) return;
|
|
||||||
select.style.display = 'inline-block';
|
|
||||||
select.innerHTML = '';
|
|
||||||
|
|
||||||
const allOpt = document.createElement('option');
|
|
||||||
allOpt.value = 'all';
|
|
||||||
allOpt.innerText = 'All Providers';
|
|
||||||
select.appendChild(allOpt);
|
|
||||||
|
|
||||||
if (isLocal) {
|
|
||||||
const localOpt = document.createElement('option');
|
|
||||||
localOpt.value = 'local';
|
|
||||||
localOpt.innerText = 'Local';
|
|
||||||
select.appendChild(localOpt);
|
|
||||||
}
|
|
||||||
|
|
||||||
availableExtensions.forEach(ext => {
|
|
||||||
const opt = document.createElement('option');
|
|
||||||
opt.value = ext;
|
|
||||||
opt.innerText = ext.charAt(0).toUpperCase() + ext.slice(1);
|
|
||||||
select.appendChild(opt);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Lógica de selección inicial
|
|
||||||
if (isLocal) select.value = 'local';
|
|
||||||
else if (extensionName && availableExtensions.includes(extensionName)) select.value = extensionName;
|
|
||||||
else if (availableExtensions.length > 0) select.value = availableExtensions[0];
|
|
||||||
|
|
||||||
// Visibilidad inicial del botón manual
|
|
||||||
updateManualButtonVisibility(select.value);
|
|
||||||
|
|
||||||
select.onchange = () => {
|
|
||||||
// Al cambiar de proveedor, reseteamos la selección manual para evitar conflictos
|
|
||||||
manualExtensionBookId = null;
|
|
||||||
updateManualButtonVisibility(select.value);
|
|
||||||
loadChapters(select.value);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateManualButtonVisibility(provider) {
|
|
||||||
const btn = document.getElementById('manual-match-btn');
|
|
||||||
if (!btn) return;
|
|
||||||
|
|
||||||
// Solo mostrar si es un proveedor específico (no 'all' ni 'local')
|
|
||||||
if (provider !== 'all' && provider !== 'local') {
|
|
||||||
btn.style.display = 'flex';
|
|
||||||
} else {
|
|
||||||
btn.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateExtensionPill() {
|
|
||||||
const pill = document.getElementById('extension-pill');
|
|
||||||
if(pill && extensionName) { pill.innerText = extensionName; pill.style.display = 'inline-flex'; }
|
|
||||||
}
|
|
||||||
|
|
||||||
async function setupAddToListButton() {
|
|
||||||
const btn = document.getElementById('add-to-list-btn');
|
|
||||||
if (!btn || !bookData) return;
|
|
||||||
ListModalManager.currentData = bookData;
|
|
||||||
const entryType = ListModalManager.getEntryType(bookData);
|
|
||||||
const idForCheck = extensionName ? bookSlug : bookId;
|
|
||||||
await ListModalManager.checkIfInList(idForCheck, extensionName || 'anilist', entryType);
|
|
||||||
updateCustomAddButton();
|
|
||||||
btn.onclick = () => ListModalManager.open(bookData, extensionName || 'anilist');
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateCustomAddButton() {
|
|
||||||
const btn = document.getElementById('add-to-list-btn');
|
|
||||||
if(btn && ListModalManager.isInList) {
|
|
||||||
btn.innerHTML = '✓ In Your List'; btn.style.background = 'rgba(34, 197, 94, 0.2)'; btn.style.color = '#22c55e'; btn.style.borderColor = '#22c55e';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function setupModalClickOutside() {
|
|
||||||
const addListModal = document.getElementById('add-list-modal');
|
|
||||||
if (addListModal) {
|
|
||||||
addListModal.addEventListener('click', (e) => {
|
|
||||||
if (e.target.id === 'add-list-modal') ListModalManager.close();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function showError(message) {
|
|
||||||
const titleEl = document.getElementById('title');
|
|
||||||
if (titleEl) titleEl.innerText = message;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Exports
|
|
||||||
window.openReader = openReader;
|
|
||||||
window.saveToList = () => {
|
|
||||||
const idToSave = extensionName ? bookSlug : bookId;
|
|
||||||
ListModalManager.save(idToSave, extensionName || 'anilist');
|
|
||||||
};
|
|
||||||
window.deleteFromList = () => {
|
|
||||||
const idToDelete = extensionName ? bookSlug : bookId;
|
|
||||||
ListModalManager.delete(idToDelete, extensionName || 'anilist');
|
|
||||||
};
|
|
||||||
window.closeAddToListModal = () => ListModalManager.close();
|
|
||||||
window.openAddToListModal = () => ListModalManager.open(bookData, extensionName || 'anilist');
|
|
||||||
@@ -1,794 +0,0 @@
|
|||||||
const urlParams = new URLSearchParams(window.location.search);
|
|
||||||
const reader = document.getElementById('reader');
|
|
||||||
const panel = document.getElementById('settings-panel');
|
|
||||||
const overlay2 = document.getElementById('overlay');
|
|
||||||
const settingsBtn = document.getElementById('settings-btn');
|
|
||||||
const closePanel = document.getElementById('close-panel');
|
|
||||||
const chapterLabel = document.getElementById('chapter-label');
|
|
||||||
const prevBtn = document.getElementById('prev-chapter');
|
|
||||||
const nextBtn = document.getElementById('next-chapter');
|
|
||||||
|
|
||||||
const lnSettings = document.getElementById('ln-settings');
|
|
||||||
const mangaSettings = document.getElementById('manga-settings');
|
|
||||||
|
|
||||||
|
|
||||||
const rawSource = urlParams.get('source') || 'anilist';
|
|
||||||
const sourceParts = rawSource.split('?');
|
|
||||||
const source = sourceParts[0];
|
|
||||||
|
|
||||||
let lang =
|
|
||||||
urlParams.get('lang') ??
|
|
||||||
new URLSearchParams(sourceParts[1] || '').get('lang') ??
|
|
||||||
'none';
|
|
||||||
|
|
||||||
const config = {
|
|
||||||
ln: {
|
|
||||||
fontSize: 18,
|
|
||||||
lineHeight: 1.8,
|
|
||||||
maxWidth: 750,
|
|
||||||
fontFamily: '"Georgia", serif',
|
|
||||||
textColor: '#e5e7eb',
|
|
||||||
bg: '#14141b',
|
|
||||||
textAlign: 'justify'
|
|
||||||
},
|
|
||||||
manga: {
|
|
||||||
direction: 'rtl',
|
|
||||||
mode: 'auto',
|
|
||||||
spacing: 16,
|
|
||||||
imageFit: 'screen',
|
|
||||||
preloadCount: 3
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
let currentType = null;
|
|
||||||
let currentPages = [];
|
|
||||||
let observer = null;
|
|
||||||
|
|
||||||
// === CAMBIO: Parseo de URL para obtener ID ===
|
|
||||||
const parts = window.location.pathname.split('/');
|
|
||||||
const bookId = parts[4];
|
|
||||||
let currentChapterId = decodeURIComponent(parts[3]);
|
|
||||||
let provider = parts[2];
|
|
||||||
let chaptersList = []; // Buffer para guardar el orden de capítulos
|
|
||||||
|
|
||||||
function loadConfig() {
|
|
||||||
try {
|
|
||||||
const saved = localStorage.getItem('readerConfig');
|
|
||||||
if (saved) {
|
|
||||||
const parsed = JSON.parse(saved);
|
|
||||||
Object.assign(config.ln, parsed.ln || {});
|
|
||||||
Object.assign(config.manga, parsed.manga || {});
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error('Error loading config:', e);
|
|
||||||
}
|
|
||||||
updateUIFromConfig();
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveConfig() {
|
|
||||||
try {
|
|
||||||
localStorage.setItem('readerConfig', JSON.stringify(config));
|
|
||||||
} catch (e) {
|
|
||||||
console.error('Error saving config:', e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateUIFromConfig() {
|
|
||||||
document.getElementById('font-size').value = config.ln.fontSize;
|
|
||||||
document.getElementById('font-size-value').textContent = config.ln.fontSize + 'px';
|
|
||||||
|
|
||||||
document.getElementById('line-height').value = config.ln.lineHeight;
|
|
||||||
document.getElementById('line-height-value').textContent = config.ln.lineHeight;
|
|
||||||
|
|
||||||
document.getElementById('max-width').value = config.ln.maxWidth;
|
|
||||||
document.getElementById('max-width-value').textContent = config.ln.maxWidth + 'px';
|
|
||||||
|
|
||||||
document.getElementById('font-family').value = config.ln.fontFamily;
|
|
||||||
document.getElementById('text-color').value = config.ln.textColor;
|
|
||||||
document.getElementById('bg-color').value = config.ln.bg;
|
|
||||||
|
|
||||||
document.querySelectorAll('[data-align]').forEach(btn => {
|
|
||||||
btn.classList.toggle('active', btn.dataset.align === config.ln.textAlign);
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('display-mode').value = config.manga.mode;
|
|
||||||
document.getElementById('image-fit').value = config.manga.imageFit;
|
|
||||||
document.getElementById('page-spacing').value = config.manga.spacing;
|
|
||||||
document.getElementById('page-spacing-value').textContent = config.manga.spacing + 'px';
|
|
||||||
document.getElementById('preload-count').value = config.manga.preloadCount;
|
|
||||||
|
|
||||||
document.querySelectorAll('[data-direction]').forEach(btn => {
|
|
||||||
btn.classList.toggle('active', btn.dataset.direction === config.manga.direction);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function applyStyles() {
|
|
||||||
if (currentType === 'ln') {
|
|
||||||
document.documentElement.style.setProperty('--ln-font-size', config.ln.fontSize + 'px');
|
|
||||||
document.documentElement.style.setProperty('--ln-line-height', config.ln.lineHeight);
|
|
||||||
document.documentElement.style.setProperty('--ln-max-width', config.ln.maxWidth + 'px');
|
|
||||||
document.documentElement.style.setProperty('--ln-font-family', config.ln.fontFamily);
|
|
||||||
document.documentElement.style.setProperty('--ln-text-color', config.ln.textColor);
|
|
||||||
document.documentElement.style.setProperty('--color-bg-base', config.ln.bg);
|
|
||||||
document.documentElement.style.setProperty('--ln-text-align', config.ln.textAlign);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (currentType === 'manga') {
|
|
||||||
document.documentElement.style.setProperty('--page-spacing', config.manga.spacing + 'px');
|
|
||||||
document.documentElement.style.setProperty('--page-max-width', 900 + 'px');
|
|
||||||
document.documentElement.style.setProperty('--manga-max-width', 1400 + 'px');
|
|
||||||
|
|
||||||
const viewportHeight = window.innerHeight - 64 - 32;
|
|
||||||
document.documentElement.style.setProperty('--viewport-height', viewportHeight + 'px');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateSettingsVisibility() {
|
|
||||||
lnSettings.classList.toggle('hidden', currentType !== 'ln');
|
|
||||||
mangaSettings.classList.toggle('hidden', currentType !== 'manga');
|
|
||||||
}
|
|
||||||
|
|
||||||
// === CAMBIO: Nueva función para traer la lista de capítulos y saber el orden ===
|
|
||||||
async function fetchChapterList() {
|
|
||||||
try {
|
|
||||||
// Reusamos el endpoint que lista capítulos
|
|
||||||
const res = await fetch(`/api/book/${bookId}/chapters?source=${source}&provider=${provider}`);
|
|
||||||
const data = await res.json();
|
|
||||||
|
|
||||||
// Ordenamos por número para asegurar navegación correcta
|
|
||||||
let list = data.chapters || [];
|
|
||||||
list.sort((a, b) => Number(a.number) - Number(b.number));
|
|
||||||
|
|
||||||
// Si hay filtro de idioma en la URL, filtramos la navegación también
|
|
||||||
if (lang !== 'none') {
|
|
||||||
list = list.filter(c => c.language === lang);
|
|
||||||
}
|
|
||||||
|
|
||||||
chaptersList = list;
|
|
||||||
} catch (e) {
|
|
||||||
console.error("Error fetching chapter list:", e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadChapter() {
|
|
||||||
reader.innerHTML = `
|
|
||||||
<div class="loading-container">
|
|
||||||
<div class="loading-spinner"></div>
|
|
||||||
<span>Loading chapter...</span>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
// === CAMBIO: Si no tenemos la lista de capítulos (y no es local), la pedimos ===
|
|
||||||
if (provider !== 'local' && chaptersList.length === 0) {
|
|
||||||
await fetchChapterList();
|
|
||||||
}
|
|
||||||
|
|
||||||
let newEndpoint;
|
|
||||||
|
|
||||||
if (provider === 'local') {
|
|
||||||
newEndpoint = `/api/library/${bookId}/units`;
|
|
||||||
} else {
|
|
||||||
// === CAMBIO: Usamos currentChapterId en la URL ===
|
|
||||||
newEndpoint = `/api/book/${bookId}/${currentChapterId}/${provider}?source=${source}&lang=${lang}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(newEndpoint);
|
|
||||||
const data = await res.json();
|
|
||||||
|
|
||||||
const chapterMeta = chaptersList.find(
|
|
||||||
c => String(c.id) === String(currentChapterId)
|
|
||||||
);
|
|
||||||
|
|
||||||
if (chapterMeta) {
|
|
||||||
chapterLabel.textContent = `Chapter ${chapterMeta.number}`;
|
|
||||||
document.title = `Chapter ${chapterMeta.number}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Lógica específica para contenido LOCAL
|
|
||||||
if (provider === 'local') {
|
|
||||||
const unit = data.units.find(u => String(u.id) === String(currentChapterId));
|
|
||||||
|
|
||||||
if (!unit) {
|
|
||||||
reader.innerHTML = '<div class="loading-container"><span>Chapter not found (Local)</span></div>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const manifestRes = await fetch(`/api/library/${unit.id}/manifest`);
|
|
||||||
const manifest = await manifestRes.json();
|
|
||||||
|
|
||||||
reader.innerHTML = '';
|
|
||||||
|
|
||||||
// Setup navegación manual para local (simple index +/- 1)
|
|
||||||
const unitIndex = data.units.findIndex(
|
|
||||||
u => String(u.id) === String(currentChapterId)
|
|
||||||
);
|
|
||||||
setupLocalNavigation(unitIndex, data.units.length);
|
|
||||||
|
|
||||||
|
|
||||||
if (manifest.type === 'manga') {
|
|
||||||
currentType = 'manga';
|
|
||||||
updateSettingsVisibility();
|
|
||||||
applyStyles();
|
|
||||||
currentPages = manifest.pages;
|
|
||||||
await loadManga(currentPages);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (manifest.type === 'ln') {
|
|
||||||
currentType = 'ln';
|
|
||||||
updateSettingsVisibility();
|
|
||||||
applyStyles();
|
|
||||||
const contentRes = await fetch(manifest.url);
|
|
||||||
const html = await contentRes.text();
|
|
||||||
loadLN(html);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const rawSource = urlParams.get('source') || 'anilist';
|
|
||||||
const source = rawSource.split('?')[0];
|
|
||||||
|
|
||||||
const res2 = await fetch(`/api/book/${bookId}?source=${source}`);
|
|
||||||
const data2 = await res2.json();
|
|
||||||
|
|
||||||
fetch("/api/rpc", {
|
|
||||||
method: "POST",
|
|
||||||
headers: {"Content-Type": "application/json"},
|
|
||||||
body: JSON.stringify({
|
|
||||||
details: data2.title.romaji ?? data2.title,
|
|
||||||
state: `Chapter ${data.title}`,
|
|
||||||
mode: "reading"
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
if (data.error) {
|
|
||||||
reader.innerHTML = `<div class="loading-container"><span style="color: #ef4444;">Error: ${data.error}</span></div>`;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!chapterMeta) {
|
|
||||||
if (data.title) {
|
|
||||||
chapterLabel.textContent = `Chapter ${data.number ?? ''} - ${data.title}`;
|
|
||||||
document.title = chapterLabel.textContent;
|
|
||||||
} else {
|
|
||||||
chapterLabel.textContent = `Chapter ${data.number ?? currentChapterId}`;
|
|
||||||
document.title = chapterLabel.textContent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setupProgressTracking(data, source);
|
|
||||||
|
|
||||||
// === CAMBIO: Actualizar botones basado en IDs ===
|
|
||||||
updateNavigationButtons();
|
|
||||||
|
|
||||||
currentType = data.type;
|
|
||||||
updateSettingsVisibility();
|
|
||||||
applyStyles();
|
|
||||||
reader.innerHTML = '';
|
|
||||||
|
|
||||||
if (data.type === 'manga') {
|
|
||||||
currentPages = data.pages || [];
|
|
||||||
await loadManga(currentPages);
|
|
||||||
} else if (data.type === 'ln') {
|
|
||||||
loadLN(data.content);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
reader.innerHTML = `
|
|
||||||
<div class="loading-container">
|
|
||||||
<span style="color: #ef4444;">Error loading chapter: ${error.message}</span>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// === CAMBIO: Lógica de navegación basada en IDs ===
|
|
||||||
function updateNavigationButtons() {
|
|
||||||
if (provider === 'local') return; // Se maneja aparte
|
|
||||||
|
|
||||||
// Buscamos el índice actual en la lista completa
|
|
||||||
const currentIndex = chaptersList.findIndex(c => String(c.id) === String(currentChapterId));
|
|
||||||
|
|
||||||
if (currentIndex === -1) {
|
|
||||||
console.warn("Current chapter not found in list, navigation disabled");
|
|
||||||
prevBtn.disabled = true;
|
|
||||||
nextBtn.disabled = true;
|
|
||||||
prevBtn.style.opacity = 0.5;
|
|
||||||
nextBtn.style.opacity = 0.5;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Configurar botón ANTERIOR
|
|
||||||
if (currentIndex > 0) {
|
|
||||||
const prevId = chaptersList[currentIndex - 1].id;
|
|
||||||
prevBtn.onclick = () => changeChapter(prevId);
|
|
||||||
prevBtn.disabled = false;
|
|
||||||
prevBtn.style.opacity = 1;
|
|
||||||
} else {
|
|
||||||
prevBtn.onclick = null;
|
|
||||||
prevBtn.disabled = true;
|
|
||||||
prevBtn.style.opacity = 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Configurar botón SIGUIENTE
|
|
||||||
if (currentIndex < chaptersList.length - 1) {
|
|
||||||
const nextId = chaptersList[currentIndex + 1].id;
|
|
||||||
nextBtn.onclick = () => changeChapter(nextId);
|
|
||||||
nextBtn.disabled = false;
|
|
||||||
nextBtn.style.opacity = 1;
|
|
||||||
} else {
|
|
||||||
nextBtn.onclick = null;
|
|
||||||
nextBtn.disabled = true;
|
|
||||||
nextBtn.style.opacity = 0.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fallback para navegación local (basada en índices)
|
|
||||||
function setupLocalNavigation(currentIndex, totalUnits) {
|
|
||||||
if (currentIndex > 0) {
|
|
||||||
prevBtn.onclick = () => changeChapter(currentIndex - 1);
|
|
||||||
prevBtn.disabled = false;
|
|
||||||
prevBtn.style.opacity = 1;
|
|
||||||
} else {
|
|
||||||
prevBtn.disabled = true;
|
|
||||||
prevBtn.style.opacity = 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (currentIndex < totalUnits - 1) {
|
|
||||||
nextBtn.onclick = () => changeChapter(currentIndex + 1);
|
|
||||||
nextBtn.disabled = false;
|
|
||||||
nextBtn.style.opacity = 1;
|
|
||||||
} else {
|
|
||||||
nextBtn.disabled = true;
|
|
||||||
nextBtn.style.opacity = 0.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function changeChapter(newId) {
|
|
||||||
currentChapterId = newId;
|
|
||||||
updateURL(newId);
|
|
||||||
window.scrollTo(0, 0);
|
|
||||||
loadChapter();
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadLongStrip(container, pages) {
|
|
||||||
pages.forEach((page, index) => {
|
|
||||||
const img = createImageElement(page, index);
|
|
||||||
img.classList.remove('fit-width', 'fit-height', 'fit-screen');
|
|
||||||
|
|
||||||
img.classList.add('longstrip-fit');
|
|
||||||
container.appendChild(img);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateURL(newId) {
|
|
||||||
const newUrl = `/read/${provider}/${newId}/${bookId}?source=${source}&lang=${lang}`;
|
|
||||||
window.history.pushState({}, '', newUrl);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadManga(pages) {
|
|
||||||
if (!pages || pages.length === 0) {
|
|
||||||
reader.innerHTML = '<div class="loading-container"><span>No pages found</span></div>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const container = document.createElement('div');
|
|
||||||
container.className = 'manga-container';
|
|
||||||
|
|
||||||
const analysis = await analyzePages(pages);
|
|
||||||
|
|
||||||
const isLongStrip =
|
|
||||||
config.manga.mode === 'longstrip' ||
|
|
||||||
(config.manga.mode === 'auto' && analysis.tallRatio > 0.3);
|
|
||||||
|
|
||||||
const useDouble =
|
|
||||||
!isLongStrip &&
|
|
||||||
(
|
|
||||||
config.manga.mode === 'double' ||
|
|
||||||
(config.manga.mode === 'auto' && analysis.wideRatio < 0.3)
|
|
||||||
);
|
|
||||||
|
|
||||||
if (isLongStrip) {
|
|
||||||
loadLongStrip(container, pages);
|
|
||||||
} else if (useDouble) {
|
|
||||||
loadDoublePage(container, pages);
|
|
||||||
} else {
|
|
||||||
loadSinglePage(container, pages);
|
|
||||||
}
|
|
||||||
|
|
||||||
reader.appendChild(container);
|
|
||||||
setupLazyLoading();
|
|
||||||
enableMangaPageNavigation();
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadSinglePage(container, pages) {
|
|
||||||
pages.forEach((page, index) => {
|
|
||||||
const img = createImageElement(page, index);
|
|
||||||
container.appendChild(img);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadDoublePage(container, pages) {
|
|
||||||
let i = 0;
|
|
||||||
while (i < pages.length) {
|
|
||||||
const currentPage = pages[i];
|
|
||||||
const nextPage = pages[i + 1];
|
|
||||||
|
|
||||||
const isWide = currentPage.width && currentPage.height &&
|
|
||||||
(currentPage.width / currentPage.height) > 1.1;
|
|
||||||
|
|
||||||
if (isWide) {
|
|
||||||
const img = createImageElement(currentPage, i);
|
|
||||||
container.appendChild(img);
|
|
||||||
i++;
|
|
||||||
} else {
|
|
||||||
const doubleContainer = document.createElement('div');
|
|
||||||
doubleContainer.className = 'double-container';
|
|
||||||
|
|
||||||
const leftPage = createImageElement(currentPage, i);
|
|
||||||
|
|
||||||
if (nextPage) {
|
|
||||||
const nextIsWide = nextPage.width && nextPage.height &&
|
|
||||||
(nextPage.width / nextPage.height) > 1.3;
|
|
||||||
|
|
||||||
if (nextIsWide) {
|
|
||||||
const singleImg = createImageElement(currentPage, i);
|
|
||||||
container.appendChild(singleImg);
|
|
||||||
i++;
|
|
||||||
} else {
|
|
||||||
const rightPage = createImageElement(nextPage, i + 1);
|
|
||||||
if (config.manga.direction === 'rtl') {
|
|
||||||
doubleContainer.appendChild(rightPage);
|
|
||||||
doubleContainer.appendChild(leftPage);
|
|
||||||
} else {
|
|
||||||
doubleContainer.appendChild(leftPage);
|
|
||||||
doubleContainer.appendChild(rightPage);
|
|
||||||
}
|
|
||||||
container.appendChild(doubleContainer);
|
|
||||||
i += 2;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const singleImg = createImageElement(currentPage, i);
|
|
||||||
container.appendChild(singleImg);
|
|
||||||
i++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function createImageElement(page, index) {
|
|
||||||
const img = document.createElement('img');
|
|
||||||
img.className = 'page-img';
|
|
||||||
img.dataset.index = index;
|
|
||||||
|
|
||||||
const url = provider === 'local'
|
|
||||||
? page.url
|
|
||||||
: buildProxyUrl(page.url, page.headers);
|
|
||||||
const placeholder = "/public/assets/placeholder.svg";
|
|
||||||
|
|
||||||
img.onerror = () => {
|
|
||||||
if (img.src !== placeholder) {
|
|
||||||
img.src = placeholder;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
img.onload = () => {
|
|
||||||
const ratio = img.naturalWidth / img.naturalHeight;
|
|
||||||
|
|
||||||
if (ratio > 1.3) {
|
|
||||||
const double = img.closest('.double-container');
|
|
||||||
if (double) {
|
|
||||||
double.replaceWith(img);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
if (config.manga.mode === 'longstrip' && index > 0) {
|
|
||||||
img.classList.add('longstrip-fit');
|
|
||||||
} else {
|
|
||||||
if (config.manga.imageFit === 'width') img.classList.add('fit-width');
|
|
||||||
else if (config.manga.imageFit === 'height') img.classList.add('fit-height');
|
|
||||||
else if (config.manga.imageFit === 'screen') img.classList.add('fit-screen');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (index < config.manga.preloadCount) {
|
|
||||||
img.src = url;
|
|
||||||
} else {
|
|
||||||
img.dataset.src = url;
|
|
||||||
img.loading = 'lazy';
|
|
||||||
}
|
|
||||||
img.alt = `Page ${index + 1}`;
|
|
||||||
return img;
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildProxyUrl(url, headers = {}) {
|
|
||||||
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 `/api/proxy?${params.toString()}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function analyzePages(pages, sample = 6) {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
let tall = 0;
|
|
||||||
let wide = 0;
|
|
||||||
let loaded = 0;
|
|
||||||
|
|
||||||
const count = Math.min(sample, pages.length);
|
|
||||||
|
|
||||||
for (let i = 0; i < count; i++) {
|
|
||||||
const img = new Image();
|
|
||||||
img.src = provider === 'local'
|
|
||||||
? pages[i].url
|
|
||||||
: buildProxyUrl(pages[i].url, pages[i].headers);
|
|
||||||
|
|
||||||
img.onload = () => {
|
|
||||||
const ratio = img.naturalWidth / img.naturalHeight;
|
|
||||||
if (ratio < 0.6) tall++;
|
|
||||||
else if (ratio > 1.3) wide++;
|
|
||||||
loaded++;
|
|
||||||
if (loaded === count) finish();
|
|
||||||
};
|
|
||||||
|
|
||||||
img.onerror = () => {
|
|
||||||
loaded++;
|
|
||||||
if (loaded === count) finish();
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function finish() {
|
|
||||||
resolve({
|
|
||||||
tallRatio: tall / count,
|
|
||||||
wideRatio: wide / count
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function setupLazyLoading() {
|
|
||||||
if (observer) observer.disconnect();
|
|
||||||
observer = new IntersectionObserver((entries) => {
|
|
||||||
entries.forEach(entry => {
|
|
||||||
if (entry.isIntersecting) {
|
|
||||||
const img = entry.target;
|
|
||||||
if (img.dataset.src) {
|
|
||||||
img.src = img.dataset.src;
|
|
||||||
delete img.dataset.src;
|
|
||||||
observer.unobserve(img);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}, { rootMargin: '200px' });
|
|
||||||
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadLN(html) {
|
|
||||||
const div = document.createElement('div');
|
|
||||||
div.className = 'ln-content';
|
|
||||||
div.innerHTML = html;
|
|
||||||
reader.appendChild(div);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Listeners de configuración
|
|
||||||
document.getElementById('font-size').addEventListener('input', (e) => {
|
|
||||||
config.ln.fontSize = parseInt(e.target.value);
|
|
||||||
document.getElementById('font-size-value').textContent = e.target.value + 'px';
|
|
||||||
applyStyles(); saveConfig();
|
|
||||||
});
|
|
||||||
document.getElementById('line-height').addEventListener('input', (e) => {
|
|
||||||
config.ln.lineHeight = parseFloat(e.target.value);
|
|
||||||
document.getElementById('line-height-value').textContent = e.target.value;
|
|
||||||
applyStyles(); saveConfig();
|
|
||||||
});
|
|
||||||
document.getElementById('max-width').addEventListener('input', (e) => {
|
|
||||||
config.ln.maxWidth = parseInt(e.target.value);
|
|
||||||
document.getElementById('max-width-value').textContent = e.target.value + 'px';
|
|
||||||
applyStyles(); saveConfig();
|
|
||||||
});
|
|
||||||
document.getElementById('font-family').addEventListener('change', (e) => {
|
|
||||||
config.ln.fontFamily = e.target.value;
|
|
||||||
applyStyles(); saveConfig();
|
|
||||||
});
|
|
||||||
document.getElementById('text-color').addEventListener('change', (e) => {
|
|
||||||
config.ln.textColor = e.target.value;
|
|
||||||
applyStyles(); saveConfig();
|
|
||||||
});
|
|
||||||
document.getElementById('bg-color').addEventListener('change', (e) => {
|
|
||||||
config.ln.bg = e.target.value;
|
|
||||||
applyStyles(); saveConfig();
|
|
||||||
});
|
|
||||||
document.querySelectorAll('[data-align]').forEach(btn => {
|
|
||||||
btn.addEventListener('click', () => {
|
|
||||||
document.querySelectorAll('[data-align]').forEach(b => b.classList.remove('active'));
|
|
||||||
btn.classList.add('active');
|
|
||||||
config.ln.textAlign = btn.dataset.align;
|
|
||||||
applyStyles(); saveConfig();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
document.querySelectorAll('[data-preset]').forEach(btn => {
|
|
||||||
btn.addEventListener('click', () => {
|
|
||||||
const preset = btn.dataset.preset;
|
|
||||||
const presets = {
|
|
||||||
dark: { bg: '#14141b', textColor: '#e5e7eb' },
|
|
||||||
sepia: { bg: '#f4ecd8', textColor: '#5c472d' },
|
|
||||||
light: { bg: '#fafafa', textColor: '#1f2937' },
|
|
||||||
amoled: { bg: '#000000', textColor: '#ffffff' }
|
|
||||||
};
|
|
||||||
if (presets[preset]) {
|
|
||||||
Object.assign(config.ln, presets[preset]);
|
|
||||||
document.getElementById('bg-color').value = config.ln.bg;
|
|
||||||
document.getElementById('text-color').value = config.ln.textColor;
|
|
||||||
applyStyles(); saveConfig();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
document.getElementById('display-mode').addEventListener('change', (e) => {
|
|
||||||
config.manga.mode = e.target.value;
|
|
||||||
saveConfig(); loadChapter();
|
|
||||||
});
|
|
||||||
document.getElementById('image-fit').addEventListener('change', (e) => {
|
|
||||||
config.manga.imageFit = e.target.value;
|
|
||||||
saveConfig(); loadChapter();
|
|
||||||
});
|
|
||||||
document.getElementById('page-spacing').addEventListener('input', (e) => {
|
|
||||||
config.manga.spacing = parseInt(e.target.value);
|
|
||||||
document.getElementById('page-spacing-value').textContent = e.target.value + 'px';
|
|
||||||
applyStyles(); saveConfig();
|
|
||||||
});
|
|
||||||
document.getElementById('preload-count').addEventListener('change', (e) => {
|
|
||||||
config.manga.preloadCount = parseInt(e.target.value);
|
|
||||||
saveConfig();
|
|
||||||
});
|
|
||||||
document.querySelectorAll('[data-direction]').forEach(btn => {
|
|
||||||
btn.addEventListener('click', () => {
|
|
||||||
document.querySelectorAll('[data-direction]').forEach(b => b.classList.remove('active'));
|
|
||||||
btn.classList.add('active');
|
|
||||||
config.manga.direction = btn.dataset.direction;
|
|
||||||
saveConfig(); loadChapter();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Botón "Atrás"
|
|
||||||
document.getElementById('back-btn').addEventListener('click', () => {
|
|
||||||
|
|
||||||
if (source === 'anilist' || !source) {
|
|
||||||
window.location.href = `/book/${bookId}`;
|
|
||||||
} else {
|
|
||||||
window.location.href = `/book/${source}/${bookId}`;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Panel de configuración
|
|
||||||
settingsBtn.addEventListener('click', () => {
|
|
||||||
panel.classList.add('open');
|
|
||||||
overlay2.classList.add('active');
|
|
||||||
});
|
|
||||||
closePanel.addEventListener('click', closeSettings);
|
|
||||||
overlay2.addEventListener('click', closeSettings);
|
|
||||||
|
|
||||||
function closeSettings() {
|
|
||||||
panel.classList.remove('open');
|
|
||||||
overlay2.classList.remove('active');
|
|
||||||
}
|
|
||||||
document.addEventListener('keydown', (e) => {
|
|
||||||
if (e.key === 'Escape' && panel.classList.contains('open')) {
|
|
||||||
closeSettings();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function enableMangaPageNavigation() {
|
|
||||||
if (currentType !== 'manga') return;
|
|
||||||
const logicalPages = [];
|
|
||||||
document.querySelectorAll('.manga-container > *').forEach(el => {
|
|
||||||
if (el.classList.contains('double-container') || el.tagName === 'IMG') {
|
|
||||||
logicalPages.push(el);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (logicalPages.length === 0) return;
|
|
||||||
|
|
||||||
function scrollToLogical(index) {
|
|
||||||
if (index < 0 || index >= logicalPages.length) return;
|
|
||||||
const topBar = document.querySelector('.top-bar');
|
|
||||||
const offset = topBar ? -topBar.offsetHeight : 0;
|
|
||||||
const y = logicalPages[index].getBoundingClientRect().top + window.pageYOffset + offset;
|
|
||||||
window.scrollTo({ top: y, behavior: 'smooth' });
|
|
||||||
}
|
|
||||||
|
|
||||||
function getCurrentLogicalIndex() {
|
|
||||||
let closest = 0;
|
|
||||||
let minDist = Infinity;
|
|
||||||
logicalPages.forEach((el, i) => {
|
|
||||||
const rect = el.getBoundingClientRect();
|
|
||||||
const dist = Math.abs(rect.top);
|
|
||||||
if (dist < minDist) {
|
|
||||||
minDist = dist;
|
|
||||||
closest = i;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return closest;
|
|
||||||
}
|
|
||||||
const rtl = () => config.manga.direction === 'rtl';
|
|
||||||
|
|
||||||
document.addEventListener('keydown', (e) => {
|
|
||||||
if (currentType !== 'manga') return;
|
|
||||||
if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;
|
|
||||||
const index = getCurrentLogicalIndex();
|
|
||||||
if (e.key === 'ArrowLeft') scrollToLogical(rtl() ? index + 1 : index - 1);
|
|
||||||
if (e.key === 'ArrowRight') scrollToLogical(rtl() ? index - 1 : index + 1);
|
|
||||||
});
|
|
||||||
|
|
||||||
reader.addEventListener('click', (e) => {
|
|
||||||
if (currentType !== 'manga') return;
|
|
||||||
const bounds = reader.getBoundingClientRect();
|
|
||||||
const x = e.clientX - bounds.left;
|
|
||||||
const half = bounds.width / 2;
|
|
||||||
const index = getCurrentLogicalIndex();
|
|
||||||
if (x < half) scrollToLogical(rtl() ? index + 1 : index - 1);
|
|
||||||
else scrollToLogical(rtl() ? index - 1 : index + 1);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
let resizeTimer;
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
clearTimeout(resizeTimer);
|
|
||||||
resizeTimer = setTimeout(() => { applyStyles(); }, 250);
|
|
||||||
});
|
|
||||||
|
|
||||||
let progressSaved = false;
|
|
||||||
function setupProgressTracking(data, source) {
|
|
||||||
progressSaved = false;
|
|
||||||
|
|
||||||
async function sendProgress(chapterNumber) {
|
|
||||||
const token = localStorage.getItem('token');
|
|
||||||
if (!token) return;
|
|
||||||
|
|
||||||
const body = {
|
|
||||||
entry_id: bookId,
|
|
||||||
source: source,
|
|
||||||
entry_type: data.type === 'manga' ? 'MANGA' : 'NOVEL',
|
|
||||||
status: 'CURRENT',
|
|
||||||
progress: source === 'anilist' ? Math.floor(chapterNumber) : chapterNumber
|
|
||||||
};
|
|
||||||
|
|
||||||
try {
|
|
||||||
await fetch('/api/list/entry', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
|
|
||||||
body: JSON.stringify(body)
|
|
||||||
});
|
|
||||||
} catch (err) { console.error('Error updating progress:', err); }
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkProgress() {
|
|
||||||
const scrollTop = window.scrollY;
|
|
||||||
const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
|
|
||||||
const percent = scrollHeight > 0 ? scrollTop / scrollHeight : 0;
|
|
||||||
|
|
||||||
if (percent >= 0.8 && !progressSaved) {
|
|
||||||
progressSaved = true;
|
|
||||||
const chapterNumber = (typeof data.number !== 'undefined' && data.number !== null)
|
|
||||||
? data.number
|
|
||||||
: 0; // Fallback si no hay numero
|
|
||||||
|
|
||||||
sendProgress(chapterNumber);
|
|
||||||
window.removeEventListener('scroll', checkProgress);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
window.removeEventListener('scroll', checkProgress);
|
|
||||||
window.addEventListener('scroll', checkProgress);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!bookId || !currentChapterId || !provider) {
|
|
||||||
reader.innerHTML = `
|
|
||||||
<div class="loading-container">
|
|
||||||
<span style="color: #ef4444;">Missing required parameters (bookId, chapterId, provider)</span>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
} else {
|
|
||||||
loadConfig();
|
|
||||||
loadChapter();
|
|
||||||
}
|
|
||||||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
@@ -1,368 +0,0 @@
|
|||||||
const LS_KEY_MARKETPLACE_URL = 'wb_marketplace_url';
|
|
||||||
const DEFAULT_URL_PLACEHOLDER = 'https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/marketplace.json';
|
|
||||||
const INSTALLED_EXTENSIONS_API = '/api/extensions';
|
|
||||||
const UPDATE_EXTENSIONS_API = '/api/extensions/update';
|
|
||||||
|
|
||||||
// DOM Elements
|
|
||||||
const dom = {
|
|
||||||
content: document.getElementById('marketplace-content'),
|
|
||||||
configPanel: document.getElementById('config-panel'),
|
|
||||||
inputUrl: document.getElementById('source-url-input'),
|
|
||||||
|
|
||||||
// Filters & Toggles
|
|
||||||
filterType: document.getElementById('filter-type'),
|
|
||||||
filterLang: document.getElementById('filter-lang'),
|
|
||||||
btnNsfw: document.getElementById('btn-toggle-nsfw'),
|
|
||||||
|
|
||||||
// Buttons
|
|
||||||
btnConfig: document.getElementById('btn-configure'),
|
|
||||||
btnSaveSource: document.getElementById('btn-save-source'),
|
|
||||||
btnResetSource: document.getElementById('btn-reset-source'),
|
|
||||||
btnUpdateAll: document.getElementById('btn-update-all'),
|
|
||||||
|
|
||||||
// Tabs
|
|
||||||
tabs: document.querySelectorAll('.tab-btn'),
|
|
||||||
|
|
||||||
// Modal
|
|
||||||
modal: document.getElementById('customModal'),
|
|
||||||
modalTitle: document.getElementById('modalTitle'),
|
|
||||||
modalMsg: document.getElementById('modalMessage'),
|
|
||||||
modalConfirm: document.getElementById('modalConfirmButton'),
|
|
||||||
modalClose: document.getElementById('modalCloseButton')
|
|
||||||
};
|
|
||||||
|
|
||||||
// State
|
|
||||||
let state = {
|
|
||||||
url: localStorage.getItem(LS_KEY_MARKETPLACE_URL) || null,
|
|
||||||
metadata: {},
|
|
||||||
installed: [],
|
|
||||||
currentTab: 'marketplace',
|
|
||||||
showNsfw: false // Default to HIDDEN
|
|
||||||
};
|
|
||||||
|
|
||||||
/* --- Initialization --- */
|
|
||||||
async function init() {
|
|
||||||
setupEventListeners();
|
|
||||||
|
|
||||||
if (!state.url) {
|
|
||||||
renderWelcomeState();
|
|
||||||
} else {
|
|
||||||
await loadData();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function setupEventListeners() {
|
|
||||||
// Config Panel
|
|
||||||
dom.btnConfig.addEventListener('click', () => {
|
|
||||||
dom.configPanel.classList.toggle('hidden');
|
|
||||||
if(!dom.configPanel.classList.contains('hidden')) dom.inputUrl.focus();
|
|
||||||
});
|
|
||||||
|
|
||||||
dom.btnSaveSource.addEventListener('click', saveSource);
|
|
||||||
dom.btnResetSource.addEventListener('click', () => {
|
|
||||||
dom.inputUrl.value = DEFAULT_URL_PLACEHOLDER;
|
|
||||||
saveSource();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Filters
|
|
||||||
dom.filterType.addEventListener('change', render);
|
|
||||||
dom.filterLang.addEventListener('change', render);
|
|
||||||
|
|
||||||
// NSFW Toggle
|
|
||||||
dom.btnNsfw.addEventListener('click', toggleNsfw);
|
|
||||||
|
|
||||||
// Tabs
|
|
||||||
dom.tabs.forEach(tab => {
|
|
||||||
tab.addEventListener('click', () => {
|
|
||||||
dom.tabs.forEach(t => t.classList.remove('active'));
|
|
||||||
tab.classList.add('active');
|
|
||||||
state.currentTab = tab.dataset.tab;
|
|
||||||
|
|
||||||
if (state.currentTab === 'installed') dom.btnUpdateAll.classList.remove('hidden');
|
|
||||||
else dom.btnUpdateAll.classList.add('hidden');
|
|
||||||
|
|
||||||
render();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
if(dom.btnUpdateAll) dom.btnUpdateAll.addEventListener('click', handleUpdateAll);
|
|
||||||
|
|
||||||
// Modal
|
|
||||||
dom.modalClose.addEventListener('click', hideModal);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Logic --- */
|
|
||||||
function toggleNsfw() {
|
|
||||||
state.showNsfw = !state.showNsfw;
|
|
||||||
|
|
||||||
// Update Button UI
|
|
||||||
if (state.showNsfw) {
|
|
||||||
dom.btnNsfw.classList.add('btn-danger'); // Red for ALERT/NSFW
|
|
||||||
dom.btnNsfw.classList.remove('btn-secondary');
|
|
||||||
dom.btnNsfw.innerHTML = `
|
|
||||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 6px;">
|
|
||||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
|
||||||
<circle cx="12" cy="12" r="3"></circle>
|
|
||||||
</svg> NSFW: ON
|
|
||||||
`;
|
|
||||||
} else {
|
|
||||||
dom.btnNsfw.classList.remove('btn-danger');
|
|
||||||
dom.btnNsfw.classList.add('btn-secondary');
|
|
||||||
dom.btnNsfw.innerHTML = `
|
|
||||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 6px;">
|
|
||||||
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
|
|
||||||
<line x1="1" y1="1" x2="23" y2="23"></line>
|
|
||||||
</svg> NSFW: Off
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
render();
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveSource() {
|
|
||||||
const url = dom.inputUrl.value.trim();
|
|
||||||
if (!url) return window.NotificationUtils.error('Please enter a valid URL');
|
|
||||||
localStorage.setItem(LS_KEY_MARKETPLACE_URL, url);
|
|
||||||
state.url = url;
|
|
||||||
dom.configPanel.classList.add('hidden');
|
|
||||||
window.NotificationUtils.success('Source updated');
|
|
||||||
loadData();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadData() {
|
|
||||||
renderLoading();
|
|
||||||
try {
|
|
||||||
const proxyUrl = `/api/proxy?url=${encodeURIComponent(state.url)}`;
|
|
||||||
const [metaRes, installedRes] = await Promise.all([
|
|
||||||
fetch(proxyUrl).then(r => r.ok ? r.json() : null),
|
|
||||||
fetch(INSTALLED_EXTENSIONS_API).then(r => r.json())
|
|
||||||
]);
|
|
||||||
|
|
||||||
if (!metaRes) throw new Error('Failed to fetch marketplace JSON');
|
|
||||||
|
|
||||||
state.metadata = metaRes.extensions || {};
|
|
||||||
state.installed = (installedRes.extensions || []).map(e => e.toLowerCase());
|
|
||||||
|
|
||||||
render();
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
renderError(error.message);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Rendering --- */
|
|
||||||
function render() {
|
|
||||||
dom.content.innerHTML = '';
|
|
||||||
const typeFilter = dom.filterType.value;
|
|
||||||
const langFilter = dom.filterLang.value;
|
|
||||||
|
|
||||||
let items = [];
|
|
||||||
|
|
||||||
// 1. Prepare items
|
|
||||||
if (state.currentTab === 'marketplace') {
|
|
||||||
items = Object.entries(state.metadata).map(([id, data]) => ({
|
|
||||||
id, ...data, isInstalled: state.installed.includes(id.toLowerCase())
|
|
||||||
}));
|
|
||||||
} else {
|
|
||||||
const metaItems = Object.entries(state.metadata)
|
|
||||||
.filter(([id]) => state.installed.includes(id.toLowerCase()))
|
|
||||||
.map(([id, data]) => ({ id, ...data, isInstalled: true }));
|
|
||||||
|
|
||||||
items = [...metaItems];
|
|
||||||
|
|
||||||
state.installed.forEach(instId => {
|
|
||||||
if (!items.find(i => i.id.toLowerCase() === instId)) {
|
|
||||||
items.push({
|
|
||||||
id: instId,
|
|
||||||
name: capitalize(instId),
|
|
||||||
type: 'Local',
|
|
||||||
description: 'Locally installed.',
|
|
||||||
author: '?',
|
|
||||||
lang: 'Local',
|
|
||||||
isInstalled: true,
|
|
||||||
isLocal: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 2. Filter
|
|
||||||
items = items.filter(item => {
|
|
||||||
// NSFW Filter logic
|
|
||||||
if (!state.showNsfw && item.nsfw) return false;
|
|
||||||
|
|
||||||
// Type Filter
|
|
||||||
if (typeFilter !== 'All' && item.type !== typeFilter && item.type !== 'Local') return false;
|
|
||||||
|
|
||||||
// Lang Filter
|
|
||||||
if (langFilter !== 'All') {
|
|
||||||
const itemLang = (item.lang || 'en').toLowerCase();
|
|
||||||
// Si es image-board, ignoramos el filtro de idioma (ya que no tienen idioma)
|
|
||||||
// O podemos decidir que siempre pasen, o que solo pasen si el filtro es "All".
|
|
||||||
// Para simplificar: Si es image-board, pasa el filtro de idioma automáticamente.
|
|
||||||
if (item.type !== 'image-board' && itemLang !== 'multi' && itemLang !== langFilter.toLowerCase()) return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
|
|
||||||
const grouped = groupBy(items, 'type');
|
|
||||||
const types = Object.keys(grouped).sort();
|
|
||||||
|
|
||||||
if (types.length === 0) return renderEmptyState();
|
|
||||||
|
|
||||||
types.forEach(type => {
|
|
||||||
const section = document.createElement('div');
|
|
||||||
section.className = 'mp-section';
|
|
||||||
const title = document.createElement('h2');
|
|
||||||
title.className = 'category-title';
|
|
||||||
title.innerText = formatType(type);
|
|
||||||
const grid = document.createElement('div');
|
|
||||||
grid.className = 'mp-grid';
|
|
||||||
grouped[type].forEach(ext => grid.appendChild(createCard(ext)));
|
|
||||||
section.appendChild(title);
|
|
||||||
section.appendChild(grid);
|
|
||||||
dom.content.appendChild(section);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function createCard(ext) {
|
|
||||||
const card = document.createElement('div');
|
|
||||||
card.className = `mp-card ${ext.nsfw ? 'card-nsfw' : ''}`;
|
|
||||||
|
|
||||||
// Icon logic
|
|
||||||
const iconSrc = ext.icon || '/public/assets/waifuboards.ico';
|
|
||||||
|
|
||||||
// Button Logic
|
|
||||||
let btnClass = 'btn-primary';
|
|
||||||
let btnText = 'Install';
|
|
||||||
|
|
||||||
if (ext.isInstalled) {
|
|
||||||
btnClass = 'btn-danger';
|
|
||||||
btnText = 'Uninstall';
|
|
||||||
} else if (ext.broken) {
|
|
||||||
btnClass = 'btn-secondary';
|
|
||||||
btnText = 'Broken';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Language Pill Logic
|
|
||||||
let langHtml = '';
|
|
||||||
// Solo mostramos lenguaje si NO es un image-board
|
|
||||||
if (ext.type !== 'image-board') {
|
|
||||||
const langCode = (ext.lang || 'EN').toLowerCase();
|
|
||||||
const langClass = `lang-${langCode}`;
|
|
||||||
const langLabel = langCode === 'multi' ? 'MULTI' : langCode.toUpperCase();
|
|
||||||
langHtml = `<span class="pill ${langClass}">${langLabel}</span>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
card.innerHTML = `
|
|
||||||
<div class="card-header">
|
|
||||||
<img class="card-icon" src="${iconSrc}" loading="lazy" onerror="this.src='/public/assets/waifuboards.ico'">
|
|
||||||
<div class="card-info">
|
|
||||||
<h3 class="card-title" title="${ext.name}">${ext.name}</h3>
|
|
||||||
<span class="card-author">by ${ext.author || 'Unknown'}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card-meta">
|
|
||||||
${langHtml}
|
|
||||||
${ext.isInstalled ? '<span class="pill status-installed">INSTALLED</span>' : ''}
|
|
||||||
${ext.nsfw ? '<span class="pill nsfw">NSFW</span>' : ''}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="card-desc">${ext.description || 'No description provided.'}</p>
|
|
||||||
|
|
||||||
<div class="card-actions">
|
|
||||||
<button class="btn-primary btn-card ${btnClass}" ${ext.broken && !ext.isInstalled ? 'disabled' : ''}>
|
|
||||||
${btnText}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
const btn = card.querySelector('button');
|
|
||||||
if (!ext.broken || ext.isInstalled) {
|
|
||||||
btn.onclick = () => ext.isInstalled ? confirmUninstall(ext) : installExtension(ext);
|
|
||||||
}
|
|
||||||
|
|
||||||
return card;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Actions & Helpers --- */
|
|
||||||
async function installExtension(ext) {
|
|
||||||
if (!ext.entry) return window.NotificationUtils.error('Invalid extension entry point');
|
|
||||||
try {
|
|
||||||
window.NotificationUtils.info(`Installing ${ext.name}...`);
|
|
||||||
const res = await fetch('/api/extensions/install', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ url: ext.entry })
|
|
||||||
});
|
|
||||||
if (res.ok) {
|
|
||||||
window.NotificationUtils.success(`${ext.name} Installed!`);
|
|
||||||
state.installed.push(ext.id.toLowerCase());
|
|
||||||
render();
|
|
||||||
} else throw new Error('Install failed');
|
|
||||||
} catch (e) { window.NotificationUtils.error(`Failed to install ${ext.name}`); }
|
|
||||||
}
|
|
||||||
|
|
||||||
function confirmUninstall(ext) {
|
|
||||||
showModal('Uninstall Extension', `Remove ${ext.name}?`, true, () => uninstallExtension(ext));
|
|
||||||
}
|
|
||||||
|
|
||||||
async function uninstallExtension(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) {
|
|
||||||
state.installed = state.installed.filter(id => id !== ext.id.toLowerCase());
|
|
||||||
window.NotificationUtils.success(`${ext.name} removed.`);
|
|
||||||
render();
|
|
||||||
}
|
|
||||||
} catch (e) { window.NotificationUtils.error('Uninstall failed'); }
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleUpdateAll() {
|
|
||||||
const btn = dom.btnUpdateAll;
|
|
||||||
const oldText = btn.innerHTML;
|
|
||||||
btn.disabled = true;
|
|
||||||
btn.innerHTML = 'Updating...';
|
|
||||||
try {
|
|
||||||
const res = await fetch(UPDATE_EXTENSIONS_API, { method: 'POST' });
|
|
||||||
const data = await res.json();
|
|
||||||
if (data.updated?.length) {
|
|
||||||
window.NotificationUtils.success(`Updated ${data.updated.length} extensions.`);
|
|
||||||
loadData();
|
|
||||||
} else window.NotificationUtils.info('All up to date.');
|
|
||||||
} catch (e) { window.NotificationUtils.error('Bulk update failed.'); }
|
|
||||||
finally { btn.disabled = false; btn.innerHTML = oldText; }
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderWelcomeState() {
|
|
||||||
dom.content.innerHTML = `
|
|
||||||
<div class="empty-state">
|
|
||||||
<div style="font-size: 3rem; margin-bottom: 1rem;">🔌</div>
|
|
||||||
<h2>Configure Source</h2>
|
|
||||||
<p class="empty-text" style="max-width: 500px; margin: 0 auto 2rem;">Configure a source URL to start.</p>
|
|
||||||
<button class="btn-primary" onclick="document.getElementById('config-panel').classList.remove('hidden'); document.getElementById('source-url-input').focus();">Setup URL</button>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderEmptyState() {
|
|
||||||
dom.content.innerHTML = `<div class="empty-state"><div style="font-size: 3rem;">🔍</div><p class="empty-text">No extensions found.</p></div>`;
|
|
||||||
}
|
|
||||||
function renderLoading() { dom.content.innerHTML = '<div class="empty-state"><p class="empty-text">Loading...</p></div>'; }
|
|
||||||
function renderError(msg) { dom.content.innerHTML = `<div class="empty-state"><p class="empty-text" style="color:#f87171;">Error: ${msg}</p></div>`; }
|
|
||||||
function showModal(title, msg, hasConfirm, onConfirm) {
|
|
||||||
dom.modalTitle.innerText = title; dom.modalMsg.innerText = msg; dom.modal.classList.remove('hidden');
|
|
||||||
if (hasConfirm) { dom.modalConfirm.classList.remove('hidden'); dom.modalConfirm.onclick = () => { hideModal(); if (onConfirm) onConfirm(); }; }
|
|
||||||
else dom.modalConfirm.classList.add('hidden');
|
|
||||||
}
|
|
||||||
function hideModal() { dom.modal.classList.add('hidden'); }
|
|
||||||
function groupBy(arr, key) { return arr.reduce((acc, i) => ((acc[i[key] || 'Other'] = acc[i[key] || 'Other'] || []).push(i), acc), {}); }
|
|
||||||
function capitalize(s) { return s.charAt(0).toUpperCase() + s.slice(1); }
|
|
||||||
function formatType(t) { return t.replace(/-/g, ' ').toUpperCase(); }
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', init);
|
|
||||||
@@ -1,811 +0,0 @@
|
|||||||
const API_BASE = '/api';
|
|
||||||
|
|
||||||
const DashboardApp = {
|
|
||||||
|
|
||||||
State: {
|
|
||||||
currentList: [],
|
|
||||||
filteredList: [],
|
|
||||||
localLibraryData: [],
|
|
||||||
currentUserId: null,
|
|
||||||
currentLocalType: 'anime',
|
|
||||||
pagination: {
|
|
||||||
itemsPerPage: 50,
|
|
||||||
visibleCount: 50
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
init: async function() {
|
|
||||||
console.log('Initializing Dashboard...');
|
|
||||||
await this.User.init();
|
|
||||||
await this.Tracking.load();
|
|
||||||
|
|
||||||
this.UI.setupTabSystem();
|
|
||||||
this.initListeners();
|
|
||||||
|
|
||||||
const localInput = document.getElementById('local-search-input');
|
|
||||||
if(localInput) {
|
|
||||||
localInput.addEventListener('input', (e) => this.Library.filterContent(e.target.value));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
initListeners: function() {
|
|
||||||
|
|
||||||
document.getElementById('scan-incremental-btn')?.addEventListener('click', () => this.Library.triggerScan('incremental'));
|
|
||||||
document.getElementById('scan-full-btn')?.addEventListener('click', () => this.Library.triggerScan('full'));
|
|
||||||
|
|
||||||
document.getElementById('profile-form')?.addEventListener('submit', (e) => this.User.updateProfile(e));
|
|
||||||
document.getElementById('password-form')?.addEventListener('submit', (e) => this.User.changePassword(e));
|
|
||||||
document.getElementById('logout-btn')?.addEventListener('click', () => window.AuthUtils.logout());
|
|
||||||
|
|
||||||
const fileInput = document.getElementById('avatar-upload');
|
|
||||||
if (fileInput) {
|
|
||||||
fileInput.addEventListener('change', (e) => {
|
|
||||||
const file = e.target.files[0];
|
|
||||||
if (file) {
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = evt => {
|
|
||||||
document.getElementById('user-avatar').src = evt.target.result;
|
|
||||||
const urlInput = document.getElementById('setting-avatar-url');
|
|
||||||
if(urlInput) urlInput.value = '';
|
|
||||||
};
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const trackingInput = document.getElementById('tracking-search-input');
|
|
||||||
if (trackingInput) trackingInput.addEventListener('input', () => this.Tracking.applyFilters());
|
|
||||||
|
|
||||||
['status-filter', 'type-filter', 'sort-filter'].forEach(id => {
|
|
||||||
document.getElementById(id)?.addEventListener('change', () => this.Tracking.applyFilters());
|
|
||||||
});
|
|
||||||
|
|
||||||
document.querySelectorAll('.view-btn').forEach(btn => {
|
|
||||||
btn.addEventListener('click', () => {
|
|
||||||
document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
|
|
||||||
btn.classList.add('active');
|
|
||||||
const view = btn.dataset.view;
|
|
||||||
const container = document.getElementById('list-container');
|
|
||||||
view === 'list' ? container.classList.add('list-view') : container.classList.remove('list-view');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
User: {
|
|
||||||
init: async function() {
|
|
||||||
try {
|
|
||||||
const headers = window.AuthUtils.getSimpleAuthHeaders();
|
|
||||||
const res = await fetch(`${API_BASE}/me`, { headers });
|
|
||||||
|
|
||||||
if (res.ok) {
|
|
||||||
const data = await res.json();
|
|
||||||
document.getElementById('user-username').textContent = data.username;
|
|
||||||
const settingUsername = document.getElementById('setting-username');
|
|
||||||
if(settingUsername) settingUsername.value = data.username;
|
|
||||||
|
|
||||||
if (data.avatar) {
|
|
||||||
document.getElementById('user-avatar').src = data.avatar;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const token = localStorage.getItem('token');
|
|
||||||
if (token) {
|
|
||||||
const payload = JSON.parse(atob(token.split('.')[1]));
|
|
||||||
DashboardApp.State.currentUserId = payload.id;
|
|
||||||
await this.checkIntegrations(payload.id);
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Error loading user profile:", err);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
checkIntegrations: async function(userId) {
|
|
||||||
if (!userId) return;
|
|
||||||
try {
|
|
||||||
const res = await fetch(`${API_BASE}/users/${userId}/integration`);
|
|
||||||
let data = { connected: false };
|
|
||||||
if (res.ok) data = await res.json();
|
|
||||||
|
|
||||||
this.updateIntegrationUI(data, userId);
|
|
||||||
} catch (e) { console.error("Integration check error:", e); }
|
|
||||||
},
|
|
||||||
|
|
||||||
updateIntegrationUI: function(data, userId) {
|
|
||||||
const statusEl = document.getElementById('anilist-status');
|
|
||||||
const btn = document.getElementById('anilist-action-btn');
|
|
||||||
const headerBadge = document.getElementById('header-anilist-link');
|
|
||||||
|
|
||||||
if (data.connected) {
|
|
||||||
if (headerBadge) {
|
|
||||||
headerBadge.style.display = 'flex';
|
|
||||||
headerBadge.href = `https://anilist.co/user/${data.anilistUserId}`;
|
|
||||||
headerBadge.title = `Connected as ${data.anilistUserId}`;
|
|
||||||
}
|
|
||||||
if (statusEl) {
|
|
||||||
// CAMBIO: Mostrar fecha de expiración si existe
|
|
||||||
const expiresDate = data.expiresAt ? new Date(data.expiresAt).toLocaleDateString() : 'Unknown';
|
|
||||||
statusEl.innerHTML = `
|
|
||||||
<span style="color:var(--color-success)">Connected as: <b>${data.anilistUserId}</b></span>
|
|
||||||
<span style="display:block; font-size:0.75rem; color:#71717a">Expires: ${expiresDate}</span>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
if (btn) {
|
|
||||||
btn.textContent = 'Disconnect';
|
|
||||||
btn.className = 'btn-stream-outline link-danger';
|
|
||||||
btn.onclick = () => this.disconnectAniList(userId);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (headerBadge) headerBadge.style.display = 'none';
|
|
||||||
if (statusEl) {
|
|
||||||
statusEl.textContent = 'Not connected';
|
|
||||||
statusEl.style.color = 'var(--color-text-secondary)';
|
|
||||||
}
|
|
||||||
if (btn) {
|
|
||||||
btn.textContent = 'Connect';
|
|
||||||
btn.className = 'btn-stream-outline';
|
|
||||||
btn.onclick = () => this.openAniListModal();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
redirectToAniListLogin: async function() {
|
|
||||||
if (!DashboardApp.State.currentUserId) return;
|
|
||||||
try {
|
|
||||||
const clientId = 32898;
|
|
||||||
const redirectUri = encodeURIComponent(window.location.origin + '/api/anilist');
|
|
||||||
const state = encodeURIComponent(DashboardApp.State.currentUserId);
|
|
||||||
window.location.href = `https://anilist.co/api/v2/oauth/authorize?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}&state=${state}`;
|
|
||||||
} catch (err) { console.error(err); alert('Error starting AniList login'); }
|
|
||||||
},
|
|
||||||
openAniListModal: function() {
|
|
||||||
const modal = document.getElementById('anilist-connect-modal');
|
|
||||||
const body = document.getElementById('anilist-modal-body');
|
|
||||||
const clientId = 32898; // Tu Client ID
|
|
||||||
|
|
||||||
// Generamos el HTML del modal dinámicamente
|
|
||||||
body.innerHTML = `
|
|
||||||
<p class="modal-description">Connect your AniList account to sync your progress automatically.</p>
|
|
||||||
|
|
||||||
<div style="margin-bottom: 1.5rem;">
|
|
||||||
<label style="display:block; font-size:0.85rem; font-weight:600; color:#a1a1aa; margin-bottom:0.5rem">Step 1: Get Token</label>
|
|
||||||
<a href="https://anilist.co/api/v2/oauth/authorize?client_id=${clientId}&response_type=token"
|
|
||||||
target="_blank"
|
|
||||||
class="btn-blur"
|
|
||||||
style="width:100%; text-align:center; box-sizing:border-box; display:block;">
|
|
||||||
Open AniList Login ↗
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input-group">
|
|
||||||
<label>Step 2: Paste Token</label>
|
|
||||||
<input type="text" id="manual-anilist-token" class="stream-input" placeholder="Paste the long access token here..." autocomplete="off">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-footer" style="padding:0; background:transparent;">
|
|
||||||
<button class="btn-primary" style="width:100%" onclick="DashboardApp.User.submitAniListToken()">Verify & Connect</button>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
modal.classList.remove('hidden');
|
|
||||||
},
|
|
||||||
|
|
||||||
closeAniListModal: function() {
|
|
||||||
document.getElementById('anilist-connect-modal').classList.add('hidden');
|
|
||||||
},
|
|
||||||
|
|
||||||
submitAniListToken: async function() {
|
|
||||||
const tokenInput = document.getElementById('manual-anilist-token');
|
|
||||||
const token = tokenInput.value.trim();
|
|
||||||
const userId = DashboardApp.State.currentUserId;
|
|
||||||
|
|
||||||
if (!token) {
|
|
||||||
alert('Please paste the AniList token first');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const confirmBtn = document.querySelector('#anilist-connect-modal .btn-primary');
|
|
||||||
const originalText = confirmBtn.textContent;
|
|
||||||
confirmBtn.textContent = "Verifying...";
|
|
||||||
confirmBtn.disabled = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(`${API_BASE}/anilist/store`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({
|
|
||||||
userId: userId,
|
|
||||||
accessToken: token
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = await res.json();
|
|
||||||
|
|
||||||
if (!res.ok) throw new Error(data.error || 'Failed to verify token');
|
|
||||||
|
|
||||||
this.closeAniListModal();
|
|
||||||
await this.checkIntegrations(userId);
|
|
||||||
alert('AniList connected successfully!');
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
alert(err.message || 'Invalid Token');
|
|
||||||
} finally {
|
|
||||||
confirmBtn.textContent = originalText;
|
|
||||||
confirmBtn.disabled = false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
disconnectAniList: async function(userId) {
|
|
||||||
if(!confirm("Disconnect AniList?")) return;
|
|
||||||
try {
|
|
||||||
const token = localStorage.getItem('token');
|
|
||||||
await fetch(`${API_BASE}/users/${userId}/integration`, {
|
|
||||||
method: 'DELETE',
|
|
||||||
headers: { 'Authorization': `Bearer ${token}` }
|
|
||||||
});
|
|
||||||
this.checkIntegrations(userId);
|
|
||||||
} catch (e) { alert("Failed to disconnect"); }
|
|
||||||
},
|
|
||||||
|
|
||||||
updateProfile: async function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const userId = DashboardApp.State.currentUserId;
|
|
||||||
if (!userId) return;
|
|
||||||
|
|
||||||
const username = document.getElementById('setting-username').value;
|
|
||||||
const urlInput = document.getElementById('setting-avatar-url')?.value || '';
|
|
||||||
const fileInput = document.getElementById('avatar-upload');
|
|
||||||
let finalAvatar = null;
|
|
||||||
|
|
||||||
if (fileInput && fileInput.files && fileInput.files[0]) {
|
|
||||||
try {
|
|
||||||
finalAvatar = await DashboardApp.Utils.fileToBase64(fileInput.files[0]);
|
|
||||||
} catch (err) { alert("Error reading file"); return; }
|
|
||||||
} else if (urlInput.trim() !== "") {
|
|
||||||
finalAvatar = urlInput.trim();
|
|
||||||
}
|
|
||||||
|
|
||||||
const bodyData = { username };
|
|
||||||
if (finalAvatar) bodyData.profilePictureUrl = finalAvatar;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(`${API_BASE}/users/${userId}`, {
|
|
||||||
method: 'PUT',
|
|
||||||
headers: { ...window.AuthUtils.getSimpleAuthHeaders(), 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify(bodyData)
|
|
||||||
});
|
|
||||||
if (res.ok) alert('Profile updated successfully!');
|
|
||||||
else { const err = await res.json(); alert(err.error || 'Update failed'); }
|
|
||||||
} catch (e) { console.error(e); }
|
|
||||||
},
|
|
||||||
|
|
||||||
changePassword: async function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const userId = DashboardApp.State.currentUserId;
|
|
||||||
if (!userId) return;
|
|
||||||
const currentPassword = document.getElementById('current-password').value;
|
|
||||||
const newPassword = document.getElementById('new-password').value;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(`${API_BASE}/users/${userId}/password`, {
|
|
||||||
method: 'PUT',
|
|
||||||
headers: { ...window.AuthUtils.getSimpleAuthHeaders(), 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ currentPassword, newPassword })
|
|
||||||
});
|
|
||||||
const data = await res.json();
|
|
||||||
if (res.ok) { alert("Password updated successfully"); document.getElementById('password-form').reset(); }
|
|
||||||
else alert(data.error || "Failed to update password");
|
|
||||||
} catch (e) { console.error(e); }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
Tracking: {
|
|
||||||
load: async function() {
|
|
||||||
const loadingState = document.getElementById('loading-state');
|
|
||||||
const emptyState = document.getElementById('empty-state');
|
|
||||||
const container = document.getElementById('list-container');
|
|
||||||
|
|
||||||
try {
|
|
||||||
loadingState.style.display = 'flex';
|
|
||||||
emptyState.style.display = 'none';
|
|
||||||
container.innerHTML = '';
|
|
||||||
|
|
||||||
const response = await fetch(`${API_BASE}/list`, { headers: window.AuthUtils.getSimpleAuthHeaders() });
|
|
||||||
if (!response.ok) throw new Error('Failed');
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
DashboardApp.State.currentList = data.results || [];
|
|
||||||
|
|
||||||
this.updateStats();
|
|
||||||
|
|
||||||
loadingState.style.display = 'none';
|
|
||||||
if (DashboardApp.State.currentList.length === 0) emptyState.style.display = 'flex';
|
|
||||||
else this.applyFilters();
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
loadingState.style.display = 'none';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
updateStats: function() {
|
|
||||||
const list = DashboardApp.State.currentList;
|
|
||||||
const animeCount = list.filter(item => item.entry_type === 'ANIME').length;
|
|
||||||
const mangaCount = list.filter(item => item.entry_type === 'MANGA').length;
|
|
||||||
|
|
||||||
document.getElementById('total-stat').textContent = list.length;
|
|
||||||
if (document.getElementById('anime-stat')) document.getElementById('anime-stat').textContent = animeCount;
|
|
||||||
if (document.getElementById('manga-stat')) document.getElementById('manga-stat').textContent = mangaCount;
|
|
||||||
},
|
|
||||||
|
|
||||||
applyFilters: function() {
|
|
||||||
const statusFilter = document.getElementById('status-filter').value;
|
|
||||||
const typeFilter = document.getElementById('type-filter').value;
|
|
||||||
const sortFilter = document.getElementById('sort-filter').value;
|
|
||||||
const searchInput = document.getElementById('tracking-search-input');
|
|
||||||
const searchQuery = searchInput ? searchInput.value.toLowerCase().trim() : '';
|
|
||||||
|
|
||||||
let result = [...DashboardApp.State.currentList];
|
|
||||||
|
|
||||||
if (searchQuery) {
|
|
||||||
result = result.filter(item => (item.title ? item.title.toLowerCase() : '').includes(searchQuery));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (statusFilter !== 'all') result = result.filter(item => item.status === statusFilter);
|
|
||||||
if (typeFilter !== 'all') result = result.filter(item => item.entry_type === typeFilter);
|
|
||||||
|
|
||||||
if (sortFilter === 'title') result.sort((a, b) => (a.title || '').localeCompare(b.title || ''));
|
|
||||||
else if (sortFilter === 'score') result.sort((a, b) => (b.score || 0) - (a.score || 0));
|
|
||||||
else result.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
|
|
||||||
|
|
||||||
DashboardApp.State.filteredList = result;
|
|
||||||
DashboardApp.State.pagination.visibleCount = DashboardApp.State.pagination.itemsPerPage;
|
|
||||||
this.render();
|
|
||||||
},
|
|
||||||
|
|
||||||
render: function() {
|
|
||||||
const container = document.getElementById('list-container');
|
|
||||||
container.innerHTML = '';
|
|
||||||
const list = DashboardApp.State.filteredList;
|
|
||||||
const count = DashboardApp.State.pagination.visibleCount;
|
|
||||||
|
|
||||||
if (list.length === 0) {
|
|
||||||
container.innerHTML = '<div class="empty-text" style="grid-column: 1/-1; text-align:center; color: var(--color-text-secondary);">No matches found</div>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const itemsToShow = list.slice(0, count);
|
|
||||||
itemsToShow.forEach(item => container.appendChild(this.createItemElement(item)));
|
|
||||||
|
|
||||||
if (count < list.length) {
|
|
||||||
this.renderLoadMoreButton(container, list.length - count);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
createItemElement: function(item) {
|
|
||||||
const div = document.createElement('div');
|
|
||||||
div.className = 'list-item';
|
|
||||||
|
|
||||||
const itemLink = this.getEntryLink(item);
|
|
||||||
const posterUrl = item.poster || '/public/assets/placeholder.svg';
|
|
||||||
const progress = item.progress || 0;
|
|
||||||
const totalUnits = item.entry_type === 'ANIME' ? item.total_episodes || 0 : item.total_chapters || 0;
|
|
||||||
const progressPercent = totalUnits > 0 ? (progress / totalUnits) * 100 : 0;
|
|
||||||
const score = item.score ? item.score.toFixed(1) : null;
|
|
||||||
const entryType = (item.entry_type).toUpperCase();
|
|
||||||
|
|
||||||
const statusLabels = {
|
|
||||||
'CURRENT': entryType === 'ANIME' ? 'Watching' : 'Reading',
|
|
||||||
'COMPLETED': 'Completed', 'PLANNING': 'Planning', 'PAUSED': 'Paused',
|
|
||||||
'DROPPED': 'Dropped', 'REPEATING': entryType === 'ANIME' ? 'Rewatching' : 'Rereading'
|
|
||||||
};
|
|
||||||
|
|
||||||
const extraInfo = [];
|
|
||||||
if (item.repeat_count > 0) extraInfo.push(`<span class="meta-pill repeat-pill">🔁 ${item.repeat_count}</span>`);
|
|
||||||
if (item.is_private) extraInfo.push('<span class="meta-pill private-pill">🔒 Private</span>');
|
|
||||||
|
|
||||||
div.innerHTML = `
|
|
||||||
<a href="${itemLink}" class="item-poster-link">
|
|
||||||
<img src="${posterUrl}" alt="${item.title}" class="item-poster" onerror="this.src='/public/assets/placeholder.svg'">
|
|
||||||
</a>
|
|
||||||
<div class="item-content">
|
|
||||||
<div>
|
|
||||||
<a href="${itemLink}" style="text-decoration:none; color:inherit;">
|
|
||||||
<h3 class="item-title">${item.title || 'Unknown'}</h3>
|
|
||||||
</a>
|
|
||||||
<div class="item-meta">
|
|
||||||
<span class="meta-pill status-pill">${statusLabels[item.status] || item.status}</span>
|
|
||||||
<span class="meta-pill type-pill">${entryType}</span>
|
|
||||||
<span class="meta-pill source-pill">${item.source.toUpperCase()}</span>
|
|
||||||
${extraInfo.join('')}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="progress-bar-container"><div class="progress-bar" style="width: ${progressPercent}%"></div></div>
|
|
||||||
<div class="progress-text">
|
|
||||||
<span>${progress}${totalUnits > 0 ? ` / ${totalUnits}` : ''}</span>
|
|
||||||
${score ? `<span class="score-badge">⭐ ${score}</span>` : ''}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button class="edit-icon-btn">
|
|
||||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15.232 5.232l3.536 3.536m-2.036-5.808a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.536L15.232 5.232z"/></svg>
|
|
||||||
</button>
|
|
||||||
`;
|
|
||||||
|
|
||||||
div.querySelector('.edit-icon-btn').onclick = (e) => {
|
|
||||||
e.preventDefault(); e.stopPropagation();
|
|
||||||
window.ListModalManager.currentData = item;
|
|
||||||
window.ListModalManager.isInList = true;
|
|
||||||
window.ListModalManager.currentEntry = item;
|
|
||||||
window.ListModalManager.open(item, item.source || 'anilist');
|
|
||||||
};
|
|
||||||
|
|
||||||
return div;
|
|
||||||
},
|
|
||||||
|
|
||||||
renderLoadMoreButton: function(container, remaining) {
|
|
||||||
const btnContainer = document.createElement('div');
|
|
||||||
Object.assign(btnContainer.style, { gridColumn: "1 / -1", display: "flex", justifyContent: "center", padding: "2rem 0" });
|
|
||||||
|
|
||||||
const loadMoreBtn = document.createElement('button');
|
|
||||||
loadMoreBtn.className = "btn-blur";
|
|
||||||
loadMoreBtn.textContent = `Show All (${remaining} more)`;
|
|
||||||
loadMoreBtn.onclick = () => {
|
|
||||||
DashboardApp.State.pagination.visibleCount = DashboardApp.State.filteredList.length;
|
|
||||||
this.render();
|
|
||||||
};
|
|
||||||
|
|
||||||
btnContainer.appendChild(loadMoreBtn);
|
|
||||||
container.appendChild(btnContainer);
|
|
||||||
},
|
|
||||||
|
|
||||||
getEntryLink: function(item) {
|
|
||||||
const baseRoute = (item.entry_type?.toUpperCase() === 'ANIME') ? '/anime' : '/book';
|
|
||||||
return `${baseRoute}/${item.entry_id}`;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
Library: {
|
|
||||||
tempMatchContext: null,
|
|
||||||
pollInterval: null,
|
|
||||||
updateDownloadStatus: async function() {
|
|
||||||
try {
|
|
||||||
const res = await fetch(`${API_BASE}/library/downloads/status`, {
|
|
||||||
headers: window.AuthUtils.getSimpleAuthHeaders()
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!res.ok) return;
|
|
||||||
|
|
||||||
const data = await res.json();
|
|
||||||
this.renderDownloadMonitor(data);
|
|
||||||
|
|
||||||
// Si hay descargas completadas nuevas, podríamos recargar la lista de archivos
|
|
||||||
// (Opcional: lógica para detectar cambios y llamar a loadContent)
|
|
||||||
|
|
||||||
} catch (e) {
|
|
||||||
console.error("Error polling downloads:", e);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
renderDownloadMonitor: function(data) {
|
|
||||||
const monitor = document.getElementById('downloads-monitor');
|
|
||||||
const listContainer = document.getElementById('downloads-list-container');
|
|
||||||
const activeCountEl = document.getElementById('dl-stat-active');
|
|
||||||
|
|
||||||
// Datos por defecto
|
|
||||||
const downloads = data.downloads || { list: [], active: 0, failed: 0 };
|
|
||||||
|
|
||||||
// Actualizar contadores cabecera
|
|
||||||
if(activeCountEl) activeCountEl.textContent = `${downloads.active} Active / ${downloads.list.length} Total`;
|
|
||||||
|
|
||||||
// Ocultar si vacío
|
|
||||||
if (downloads.list.length === 0) {
|
|
||||||
monitor.classList.add('hidden');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
monitor.classList.remove('hidden');
|
|
||||||
|
|
||||||
listContainer.innerHTML = downloads.list.map(item => {
|
|
||||||
const fileName = item.fileName || `Unknown_File_${item.unitNumber}`;
|
|
||||||
const folderName = item.folderName || 'Unsorted';
|
|
||||||
const status = item.status || 'pending';
|
|
||||||
const progress = item.progress || 0;
|
|
||||||
const speed = item.speed || '0 KB/s';
|
|
||||||
|
|
||||||
const isCompleted = status === 'completed';
|
|
||||||
const isFailed = status === 'failed';
|
|
||||||
|
|
||||||
let statusText = `${progress}%`;
|
|
||||||
if (isCompleted) statusText = 'Done';
|
|
||||||
if (isFailed) statusText = 'Failed';
|
|
||||||
|
|
||||||
const folderIcon = `<svg width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>`;
|
|
||||||
|
|
||||||
// ESTRUCTURA NUEVA: Más plana para permitir Flexbox horizontal
|
|
||||||
return `
|
|
||||||
<div class="dl-item compact">
|
|
||||||
<div class="dl-left-col">
|
|
||||||
<div class="dl-filename" title="${fileName}">${fileName}</div>
|
|
||||||
<div class="dl-folder" title="${folderName}">${folderIcon} ${folderName}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="dl-right-col">
|
|
||||||
<div class="dl-meta-info">
|
|
||||||
<span class="dl-speed">${isCompleted ? '' : speed}</span>
|
|
||||||
<span class="dl-status-text ${status}">${statusText}</span>
|
|
||||||
</div>
|
|
||||||
<div class="dl-progress-track">
|
|
||||||
<div class="dl-progress-fill ${status}" style="width: ${progress}%"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}).join('');
|
|
||||||
},
|
|
||||||
|
|
||||||
startPolling: function() {
|
|
||||||
if (this.pollInterval) clearInterval(this.pollInterval);
|
|
||||||
this.updateDownloadStatus(); // Primera llamada inmediata
|
|
||||||
this.pollInterval = setInterval(() => this.updateDownloadStatus(), 2000); // Cada 2 segundos
|
|
||||||
},
|
|
||||||
|
|
||||||
stopPolling: function() {
|
|
||||||
if (this.pollInterval) {
|
|
||||||
clearInterval(this.pollInterval);
|
|
||||||
this.pollInterval = null;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
loadStats: async function() {
|
|
||||||
const types = ['anime', 'manga', 'novels'];
|
|
||||||
const elements = { 'anime': 'local-anime-count', 'manga': 'local-manga-count', 'novels': 'local-novel-count' };
|
|
||||||
|
|
||||||
for (const type of types) {
|
|
||||||
try {
|
|
||||||
const res = await fetch(`${API_BASE}/library/${type}`, { headers: window.AuthUtils.getSimpleAuthHeaders() });
|
|
||||||
if(res.ok) {
|
|
||||||
const data = await res.json();
|
|
||||||
const el = document.getElementById(elements[type]);
|
|
||||||
if (el) el.textContent = `${data.length} items`;
|
|
||||||
}
|
|
||||||
} catch (e) { console.error(e); }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
loadContent: async function(type) {
|
|
||||||
DashboardApp.State.currentLocalType = type;
|
|
||||||
const container = document.getElementById('local-list-container');
|
|
||||||
const loading = document.getElementById('local-loading');
|
|
||||||
const searchInput = document.getElementById('local-search-input');
|
|
||||||
|
|
||||||
container.innerHTML = '';
|
|
||||||
loading.style.display = 'flex';
|
|
||||||
if(searchInput) searchInput.value = '';
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(`${API_BASE}/library/${type}`, { headers: window.AuthUtils.getSimpleAuthHeaders() });
|
|
||||||
if (!res.ok) throw new Error('Failed to load local content');
|
|
||||||
|
|
||||||
const data = await res.json();
|
|
||||||
DashboardApp.State.localLibraryData = data;
|
|
||||||
this.renderGrid(data, type);
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
container.innerHTML = `<div class="empty-state"><p>Error loading library</p></div>`;
|
|
||||||
} finally {
|
|
||||||
loading.style.display = 'none';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
renderGrid: function(entries, type) {
|
|
||||||
const container = document.getElementById('local-list-container');
|
|
||||||
container.innerHTML = '';
|
|
||||||
|
|
||||||
if (entries.length === 0) {
|
|
||||||
container.innerHTML = `
|
|
||||||
<div class="empty-state" style="grid-column: 1/-1;">
|
|
||||||
<p>No ${type} files found.</p>
|
|
||||||
<button onclick="DashboardApp.Library.triggerScan('incremental')" class="btn-blur">Scan Now</button>
|
|
||||||
</div>`;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
entries.forEach(entry => {
|
|
||||||
const isMatched = entry.matched && entry.metadata;
|
|
||||||
const meta = entry.metadata || {};
|
|
||||||
let poster = meta.coverImage?.large || '/public/assets/placeholder.svg';
|
|
||||||
|
|
||||||
let title = isMatched ? (meta.title?.english || meta.title?.romaji) : entry.path;
|
|
||||||
if (!isMatched) title = title.replace(/\[.*?\]|\(.*?\)|\.mkv|\.mp4/g, '').trim();
|
|
||||||
|
|
||||||
const url = isMatched ? (type === 'anime' ? `/anime/${meta.id}` : `/book/${meta.id}`) : '#';
|
|
||||||
|
|
||||||
const div = document.createElement('div');
|
|
||||||
div.className = 'list-item';
|
|
||||||
div.innerHTML = `
|
|
||||||
<div class="item-poster-link" onclick="${isMatched ? `window.location='${url}'` : ''}" style="cursor: ${isMatched ? 'pointer' : 'default'}">
|
|
||||||
<img src="${poster}" class="item-poster" loading="lazy">
|
|
||||||
${!isMatched ? `<div class="unmatched-badge"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg> UNMATCHED</div>` : ''}
|
|
||||||
</div>
|
|
||||||
<div class="item-content">
|
|
||||||
<h3 class="item-title" title="${entry.path}">${title}</h3>
|
|
||||||
<div class="item-meta">
|
|
||||||
<span class="meta-pill type-pill">${entry.files} FILES</span>
|
|
||||||
${isMatched ? '<span class="meta-pill status-pill">MATCHED</span>' : ''}
|
|
||||||
</div>
|
|
||||||
<div class="folder-path-tooltip">${entry.path}</div>
|
|
||||||
</div>
|
|
||||||
<button class="edit-icon-btn" onclick="DashboardApp.Library.openManualMatch('${entry.id}', '${type}')" title="${isMatched ? 'Rematch' : 'Fix Match'}">
|
|
||||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
|
|
||||||
</button>
|
|
||||||
`;
|
|
||||||
container.appendChild(div);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
filterContent: function(query) {
|
|
||||||
if (!DashboardApp.State.localLibraryData) return;
|
|
||||||
const lowerQuery = query.toLowerCase();
|
|
||||||
const filtered = DashboardApp.State.localLibraryData.filter(entry => {
|
|
||||||
const metaTitle = entry.metadata?.title?.english || entry.metadata?.title?.romaji || '';
|
|
||||||
const folderName = entry.folder_name || '';
|
|
||||||
return metaTitle.toLowerCase().includes(lowerQuery) || folderName.toLowerCase().includes(lowerQuery);
|
|
||||||
});
|
|
||||||
this.renderGrid(filtered, DashboardApp.State.currentLocalType);
|
|
||||||
},
|
|
||||||
|
|
||||||
triggerScan: async function(mode) {
|
|
||||||
const consoleDiv = document.getElementById('scan-console');
|
|
||||||
const statusText = document.getElementById('scan-status-text');
|
|
||||||
if(consoleDiv) consoleDiv.style.display = 'flex';
|
|
||||||
if(statusText) statusText.textContent = `Starting ${mode} scan...`;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(`${API_BASE}/library/scan?mode=${mode}`, {
|
|
||||||
method: 'POST', headers: window.AuthUtils.getSimpleAuthHeaders()
|
|
||||||
});
|
|
||||||
if (res.ok) {
|
|
||||||
if(statusText) statusText.textContent = "Scan completed successfully!";
|
|
||||||
setTimeout(() => { if(consoleDiv) consoleDiv.style.display = 'none'; this.loadStats(); }, 3000);
|
|
||||||
} else throw new Error('Scan failed');
|
|
||||||
} catch (e) {
|
|
||||||
if(statusText) { statusText.textContent = "Error during scan."; statusText.style.color = 'var(--color-danger)'; }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
openManualMatch: function(id, type) {
|
|
||||||
const item = DashboardApp.State.localLibraryData.find(x => x.id === id);
|
|
||||||
const pathName = item ? item.path : 'Unknown path';
|
|
||||||
|
|
||||||
this.tempMatchContext = { id, type };
|
|
||||||
|
|
||||||
document.getElementById('manual-match-path').textContent = pathName;
|
|
||||||
document.getElementById('manual-match-id').value = '';
|
|
||||||
|
|
||||||
const modal = document.getElementById('manual-match-modal');
|
|
||||||
modal.classList.remove('hidden');
|
|
||||||
|
|
||||||
setTimeout(() => document.getElementById('manual-match-id').focus(), 100);
|
|
||||||
},
|
|
||||||
|
|
||||||
closeManualMatch: function() {
|
|
||||||
document.getElementById('manual-match-modal').classList.add('hidden');
|
|
||||||
this.tempMatchContext = null;
|
|
||||||
},
|
|
||||||
|
|
||||||
submitManualMatch: async function() {
|
|
||||||
if (!this.tempMatchContext) return;
|
|
||||||
|
|
||||||
const newId = document.getElementById('manual-match-id').value;
|
|
||||||
if (!newId) {
|
|
||||||
alert("Please enter a valid ID");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { id, type } = this.tempMatchContext;
|
|
||||||
|
|
||||||
const confirmBtn = document.querySelector('#manual-match-modal .btn-primary');
|
|
||||||
const originalText = confirmBtn.textContent;
|
|
||||||
confirmBtn.textContent = "Matching...";
|
|
||||||
confirmBtn.disabled = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(`${API_BASE}/library/${type}/${id}/match`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
...window.AuthUtils.getSimpleAuthHeaders(),
|
|
||||||
'Content-Type': 'application/json'
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
source: 'anilist',
|
|
||||||
matched_id: parseInt(newId)
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
if(res.ok) {
|
|
||||||
this.closeManualMatch();
|
|
||||||
this.loadContent(type);
|
|
||||||
} else {
|
|
||||||
const errData = await res.json();
|
|
||||||
alert("Failed to match: " + (errData.error || "Unknown error"));
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
alert("Connection error");
|
|
||||||
} finally {
|
|
||||||
confirmBtn.textContent = originalText;
|
|
||||||
confirmBtn.disabled = false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
switchType: function(type, btnElement) {
|
|
||||||
document.querySelectorAll('.type-pill-btn').forEach(b => b.classList.remove('active'));
|
|
||||||
if(btnElement) btnElement.classList.add('active');
|
|
||||||
this.loadContent(type);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
UI: {
|
|
||||||
setupTabSystem: function() {
|
|
||||||
const tabs = document.querySelectorAll('.nav-pill');
|
|
||||||
const sections = document.querySelectorAll('.tab-section');
|
|
||||||
|
|
||||||
tabs.forEach(tab => {
|
|
||||||
tab.addEventListener('click', () => {
|
|
||||||
// Gestión de clases activas
|
|
||||||
tabs.forEach(t => t.classList.remove('active'));
|
|
||||||
tab.classList.add('active');
|
|
||||||
|
|
||||||
const targetId = `section-${tab.dataset.target}`;
|
|
||||||
sections.forEach(sec => {
|
|
||||||
sec.classList.remove('active');
|
|
||||||
if (sec.id === targetId) sec.classList.add('active');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Lógica específica por pestaña
|
|
||||||
if (tab.dataset.target === 'local') {
|
|
||||||
DashboardApp.Library.loadStats();
|
|
||||||
DashboardApp.Library.loadContent(DashboardApp.State.currentLocalType || 'anime');
|
|
||||||
DashboardApp.Library.startPolling(); // <--- INICIAR POLLING
|
|
||||||
} else {
|
|
||||||
DashboardApp.Library.stopPolling(); // <--- DETENER POLLING AL SALIR
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
Utils: {
|
|
||||||
fileToBase64: (file) => new Promise((resolve, reject) => {
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
reader.onload = () => resolve(reader.result);
|
|
||||||
reader.onerror = error => reject(error);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
DashboardApp.init();
|
|
||||||
});
|
|
||||||
|
|
||||||
window.switchLocalType = (type, btn) => DashboardApp.Library.switchType(type, btn);
|
|
||||||
|
|
||||||
window.saveToList = async () => {
|
|
||||||
const data = window.ListModalManager.currentData;
|
|
||||||
if (!data) return;
|
|
||||||
const idToSave = data.entry_id || data.id;
|
|
||||||
await window.ListModalManager.save(idToSave, data.source || 'anilist');
|
|
||||||
await DashboardApp.Tracking.load();
|
|
||||||
};
|
|
||||||
|
|
||||||
window.deleteFromList = async () => {
|
|
||||||
const data = window.ListModalManager.currentData;
|
|
||||||
if (!data) return;
|
|
||||||
const idToDelete = data.entry_id || data.id;
|
|
||||||
await window.ListModalManager.delete(idToDelete, data.source || 'anilist');
|
|
||||||
await DashboardApp.Tracking.load();
|
|
||||||
};
|
|
||||||
|
|
||||||
window.closeAddToListModal = () => window.ListModalManager.close();
|
|
||||||
@@ -1,131 +0,0 @@
|
|||||||
class CreateRoomModal {
|
|
||||||
constructor() {
|
|
||||||
this.modalId = 'cr-modal-overlay';
|
|
||||||
this.isRendered = false;
|
|
||||||
this.render(); // Crear el HTML en el DOM al instanciar
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
if (document.getElementById(this.modalId)) return;
|
|
||||||
|
|
||||||
const modalHtml = `
|
|
||||||
<div class="cr-modal-overlay" id="${this.modalId}">
|
|
||||||
<div class="cr-modal-content">
|
|
||||||
<button class="cr-modal-close" id="cr-close">✕</button>
|
|
||||||
<h2 class="cr-modal-title">Create Watch Party</h2>
|
|
||||||
|
|
||||||
<form id="cr-form">
|
|
||||||
<div class="cr-form-group">
|
|
||||||
<label>Room Name</label>
|
|
||||||
<input type="text" class="cr-input" name="name" placeholder="My Awesome Room" required maxlength="50" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="cr-form-group">
|
|
||||||
<label>Password (Optional)</label>
|
|
||||||
<input type="password" class="cr-input" name="password" placeholder="Leave empty for public" maxlength="50" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="cr-form-group cr-checkbox-group">
|
|
||||||
<label class="cr-checkbox">
|
|
||||||
<input type="checkbox" name="expose" />
|
|
||||||
<span>Generate public link (via tunnel)</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="cr-actions">
|
|
||||||
<button type="button" class="cr-btn-cancel" id="cr-cancel">Cancel</button>
|
|
||||||
<button type="submit" class="cr-btn-confirm">Create Room</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
|
||||||
this.bindEvents();
|
|
||||||
this.isRendered = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
bindEvents() {
|
|
||||||
const modal = document.getElementById(this.modalId);
|
|
||||||
const closeBtn = document.getElementById('cr-close');
|
|
||||||
const cancelBtn = document.getElementById('cr-cancel');
|
|
||||||
const form = document.getElementById('cr-form');
|
|
||||||
|
|
||||||
const close = () => this.close();
|
|
||||||
|
|
||||||
closeBtn.onclick = close;
|
|
||||||
cancelBtn.onclick = close;
|
|
||||||
|
|
||||||
// Cerrar si clicamos fuera del contenido
|
|
||||||
modal.onclick = (e) => {
|
|
||||||
if (e.target === modal) close();
|
|
||||||
};
|
|
||||||
|
|
||||||
form.onsubmit = (e) => this.handleSubmit(e);
|
|
||||||
}
|
|
||||||
|
|
||||||
open() {
|
|
||||||
const token = localStorage.getItem('token');
|
|
||||||
if (!token) {
|
|
||||||
// Aquí puedes disparar tu modal de login o redirigir
|
|
||||||
alert('You must be logged in to create a room');
|
|
||||||
window.location.href = '/login'; // Opcional
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const modal = document.getElementById(this.modalId);
|
|
||||||
modal.classList.add('show');
|
|
||||||
document.querySelector('#cr-form input[name="name"]').focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
close() {
|
|
||||||
const modal = document.getElementById(this.modalId);
|
|
||||||
modal.classList.remove('show');
|
|
||||||
document.getElementById('cr-form').reset();
|
|
||||||
}
|
|
||||||
|
|
||||||
async handleSubmit(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const btn = e.target.querySelector('button[type="submit"]');
|
|
||||||
const originalText = btn.textContent;
|
|
||||||
|
|
||||||
btn.disabled = true;
|
|
||||||
btn.textContent = 'Creating...';
|
|
||||||
|
|
||||||
const formData = new FormData(e.target);
|
|
||||||
const expose = formData.get('expose') === 'on';
|
|
||||||
const name = formData.get('name').trim();
|
|
||||||
const password = formData.get('password').trim();
|
|
||||||
const token = localStorage.getItem('token');
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch('/api/rooms', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Authorization': `Bearer ${token}`
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
name,
|
|
||||||
password: password || undefined,
|
|
||||||
expose
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = await res.json();
|
|
||||||
if (!res.ok) throw new Error(data.error || 'Failed to create room');
|
|
||||||
|
|
||||||
this.close();
|
|
||||||
|
|
||||||
window.location.href = `/room?id=${data.room.id}`
|
|
||||||
} catch (err) {
|
|
||||||
alert(err.message);
|
|
||||||
} finally {
|
|
||||||
btn.disabled = false;
|
|
||||||
btn.textContent = originalText;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.CreateRoomModal = CreateRoomModal;
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,520 +0,0 @@
|
|||||||
const ANILIST_API = 'https://graphql.anilist.co';
|
|
||||||
const CACHE_NAME = 'waifuboard-schedule-v5';
|
|
||||||
|
|
||||||
const CACHE_DURATION = 6 * 60 * 60 * 1000;
|
|
||||||
|
|
||||||
const state = {
|
|
||||||
currentDate: new Date(),
|
|
||||||
viewType: 'MONTH',
|
|
||||||
mode: 'SUB',
|
|
||||||
filter: 'ALL',
|
|
||||||
loading: false,
|
|
||||||
abortController: null,
|
|
||||||
userListIds: new Set(),
|
|
||||||
scheduleData: [],
|
|
||||||
selectedWeekDayIndex: 0
|
|
||||||
};
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', async () => {
|
|
||||||
await fetchUserList();
|
|
||||||
renderHeader();
|
|
||||||
fetchSchedule();
|
|
||||||
|
|
||||||
if (state.userListIds.size > 0) {
|
|
||||||
const filterGroup = document.getElementById('filter-group');
|
|
||||||
if (filterGroup) filterGroup.style.display = 'flex';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
async function fetchUserList() {
|
|
||||||
const token = localStorage.getItem('token');
|
|
||||||
if (!token) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch('http://localhost:54322/api/list', {
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${token}`,
|
|
||||||
'Accept': 'application/json'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (res.ok) {
|
|
||||||
const json = await res.json();
|
|
||||||
if (json.results && Array.isArray(json.results)) {
|
|
||||||
state.userListIds.clear();
|
|
||||||
json.results.forEach(item => {
|
|
||||||
|
|
||||||
if (item.source === 'anilist') {
|
|
||||||
state.userListIds.add(item.entry_id);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
console.log(`[UserList] Loaded ${state.userListIds.size} entries.`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.warn("[UserList] Could not fetch user list:", e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchSchedule(forceRefresh = false) {
|
|
||||||
const key = getCacheKey();
|
|
||||||
|
|
||||||
if (!forceRefresh) {
|
|
||||||
const cachedData = await getCache(key);
|
|
||||||
if (cachedData) {
|
|
||||||
console.log(`[Schedule] Using cached data for key: ${key}`);
|
|
||||||
state.scheduleData = cachedData;
|
|
||||||
renderContent();
|
|
||||||
updateAmbient(cachedData);
|
|
||||||
return;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (state.abortController) state.abortController.abort();
|
|
||||||
state.abortController = new AbortController();
|
|
||||||
const signal = state.abortController.signal;
|
|
||||||
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
let startObj, endObj;
|
|
||||||
|
|
||||||
if (state.viewType === 'MONTH') {
|
|
||||||
const year = state.currentDate.getFullYear();
|
|
||||||
const month = state.currentDate.getMonth();
|
|
||||||
startObj = new Date(year, month, 1, 0, 0, 0, 0);
|
|
||||||
endObj = new Date(year, month + 1, 0, 23, 59, 59, 999);
|
|
||||||
} else {
|
|
||||||
const start = getWeekStart(state.currentDate);
|
|
||||||
|
|
||||||
startObj = new Date(start);
|
|
||||||
|
|
||||||
endObj = new Date(startObj);
|
|
||||||
endObj.setDate(endObj.getDate() + 7);
|
|
||||||
endObj.setHours(23, 59, 59, 999);
|
|
||||||
}
|
|
||||||
|
|
||||||
const startTs = Math.floor(startObj.getTime() / 1000);
|
|
||||||
const endTs = Math.floor(endObj.getTime() / 1000);
|
|
||||||
|
|
||||||
const query = `
|
|
||||||
query ($start: Int, $end: Int, $page: Int) {
|
|
||||||
Page(page: $page, perPage: 50) {
|
|
||||||
pageInfo { hasNextPage }
|
|
||||||
airingSchedules(airingAt_greater: $start, airingAt_lesser: $end, sort: TIME) {
|
|
||||||
airingAt
|
|
||||||
episode
|
|
||||||
media {
|
|
||||||
id
|
|
||||||
title { userPreferred english }
|
|
||||||
coverImage { large extraLarge }
|
|
||||||
bannerImage
|
|
||||||
isAdult
|
|
||||||
countryOfOrigin
|
|
||||||
format
|
|
||||||
duration
|
|
||||||
popularity
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
let allData = [];
|
|
||||||
let page = 1;
|
|
||||||
let hasNext = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
while (hasNext && page <= 10) {
|
|
||||||
if (signal.aborted) throw new DOMException("Aborted", "AbortError");
|
|
||||||
|
|
||||||
const res = await fetch(ANILIST_API, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
|
|
||||||
body: JSON.stringify({ query, variables: { start: startTs, end: endTs, page } }),
|
|
||||||
signal: signal
|
|
||||||
});
|
|
||||||
|
|
||||||
if (res.status === 429) {
|
|
||||||
await delay(2000);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
const json = await res.json();
|
|
||||||
if (json.errors) throw new Error("API Error");
|
|
||||||
|
|
||||||
const data = json.data.Page;
|
|
||||||
allData = [...allData, ...data.airingSchedules];
|
|
||||||
hasNext = data.pageInfo.hasNextPage;
|
|
||||||
page++;
|
|
||||||
await delay(200);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!signal.aborted) {
|
|
||||||
state.scheduleData = allData;
|
|
||||||
await setCache(key, allData);
|
|
||||||
|
|
||||||
renderContent();
|
|
||||||
updateAmbient(allData);
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (e) {
|
|
||||||
if (e.name !== 'AbortError') console.error("Fetch failed:", e);
|
|
||||||
} finally {
|
|
||||||
if (!signal.aborted) {
|
|
||||||
setLoading(false);
|
|
||||||
state.abortController = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderContent() {
|
|
||||||
|
|
||||||
let items = state.scheduleData.filter(i =>
|
|
||||||
!i.media.isAdult &&
|
|
||||||
i.media.countryOfOrigin === 'JP'
|
|
||||||
|
|
||||||
);
|
|
||||||
|
|
||||||
if (state.mode === 'DUB') {
|
|
||||||
items = items.filter(i => i.media.popularity > 20000);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (state.filter === 'MY_LIST') {
|
|
||||||
items = items.filter(i => state.userListIds.has(i.media.id));
|
|
||||||
}
|
|
||||||
|
|
||||||
const container = document.getElementById('schedule-content');
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
container.innerHTML = '';
|
|
||||||
|
|
||||||
if (state.viewType === 'MONTH') {
|
|
||||||
renderMonthView(container, items);
|
|
||||||
} else {
|
|
||||||
renderWeekView(container, items);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderMonthView(container, items) {
|
|
||||||
const grid = document.createElement('div');
|
|
||||||
grid.className = 'calendar-grid';
|
|
||||||
|
|
||||||
const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
|
|
||||||
days.forEach(d => {
|
|
||||||
const h = document.createElement('div');
|
|
||||||
h.className = 'weekday-header';
|
|
||||||
h.textContent = d;
|
|
||||||
grid.appendChild(h);
|
|
||||||
});
|
|
||||||
|
|
||||||
const year = state.currentDate.getFullYear();
|
|
||||||
const month = state.currentDate.getMonth();
|
|
||||||
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
||||||
|
|
||||||
let firstDayIndex = new Date(year, month, 1).getDay() - 1;
|
|
||||||
if (firstDayIndex === -1) firstDayIndex = 6;
|
|
||||||
|
|
||||||
for (let i = 0; i < firstDayIndex; i++) {
|
|
||||||
const empty = document.createElement('div');
|
|
||||||
empty.className = 'day-cell empty';
|
|
||||||
grid.appendChild(empty);
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let day = 1; day <= daysInMonth; day++) {
|
|
||||||
const cell = document.createElement('div');
|
|
||||||
cell.className = 'day-cell';
|
|
||||||
|
|
||||||
const currentCellDate = new Date(year, month, day);
|
|
||||||
const now = new Date();
|
|
||||||
|
|
||||||
if (isSameDay(currentCellDate, now)) {
|
|
||||||
cell.classList.add('today');
|
|
||||||
}
|
|
||||||
|
|
||||||
cell.innerHTML = `<span class="day-number">${day}</span>`;
|
|
||||||
|
|
||||||
const dayEvents = items.filter(i => {
|
|
||||||
const releaseDate = new Date(i.airingAt * 1000);
|
|
||||||
return isSameDay(currentCellDate, releaseDate);
|
|
||||||
});
|
|
||||||
|
|
||||||
dayEvents.sort((a, b) => b.media.popularity - a.media.popularity);
|
|
||||||
|
|
||||||
dayEvents.forEach(evt => {
|
|
||||||
const title = evt.media.title.english || evt.media.title.userPreferred;
|
|
||||||
const ep = evt.episode;
|
|
||||||
const time = new Date(evt.airingAt * 1000).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
|
|
||||||
const isMine = state.userListIds.has(evt.media.id);
|
|
||||||
|
|
||||||
const el = document.createElement('a');
|
|
||||||
el.className = `anime-item-month ${isMine ? 'is-mine' : ''}`;
|
|
||||||
el.href = `/anime/${evt.media.id}`;
|
|
||||||
el.innerHTML = `
|
|
||||||
<span class="item-time">${time}</span>
|
|
||||||
<span class="item-title">
|
|
||||||
${title} <span class="ep-badge">EP ${ep}</span>
|
|
||||||
</span>
|
|
||||||
`;
|
|
||||||
|
|
||||||
cell.appendChild(el);
|
|
||||||
});
|
|
||||||
|
|
||||||
grid.appendChild(cell);
|
|
||||||
}
|
|
||||||
|
|
||||||
container.appendChild(grid);
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderWeekView(container, items) {
|
|
||||||
const wrapper = document.createElement('div');
|
|
||||||
wrapper.className = 'week-container';
|
|
||||||
|
|
||||||
const nav = document.createElement('div');
|
|
||||||
nav.className = 'week-nav';
|
|
||||||
|
|
||||||
const startOfWeek = getWeekStart(state.currentDate);
|
|
||||||
const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
|
|
||||||
|
|
||||||
for (let i = 0; i < 7; i++) {
|
|
||||||
const d = new Date(startOfWeek);
|
|
||||||
d.setDate(startOfWeek.getDate() + i);
|
|
||||||
|
|
||||||
const btn = document.createElement('button');
|
|
||||||
btn.className = `day-btn ${i === state.selectedWeekDayIndex ? 'active' : ''}`;
|
|
||||||
|
|
||||||
btn.onclick = () => {
|
|
||||||
state.selectedWeekDayIndex = i;
|
|
||||||
renderWeekCards(d, items);
|
|
||||||
|
|
||||||
document.querySelectorAll('.day-btn').forEach(b => b.classList.remove('active'));
|
|
||||||
btn.classList.add('active');
|
|
||||||
};
|
|
||||||
|
|
||||||
btn.innerHTML = `
|
|
||||||
<span class="name">${dayNames[i]}</span>
|
|
||||||
<span class="date">${d.getDate()}</span>
|
|
||||||
`;
|
|
||||||
nav.appendChild(btn);
|
|
||||||
}
|
|
||||||
wrapper.appendChild(nav);
|
|
||||||
|
|
||||||
const grid = document.createElement('div');
|
|
||||||
grid.className = 'week-grid';
|
|
||||||
grid.id = 'weekGrid';
|
|
||||||
wrapper.appendChild(grid);
|
|
||||||
|
|
||||||
container.appendChild(wrapper);
|
|
||||||
|
|
||||||
const selectedDate = new Date(startOfWeek);
|
|
||||||
selectedDate.setDate(selectedDate.getDate() + state.selectedWeekDayIndex);
|
|
||||||
renderWeekCards(selectedDate, items);
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderWeekCards(targetDate, allItems) {
|
|
||||||
const grid = document.getElementById('weekGrid');
|
|
||||||
if (!grid) return;
|
|
||||||
grid.innerHTML = '';
|
|
||||||
|
|
||||||
const dayItems = allItems.filter(i => {
|
|
||||||
const releaseDate = new Date(i.airingAt * 1000);
|
|
||||||
return isSameDay(targetDate, releaseDate);
|
|
||||||
});
|
|
||||||
|
|
||||||
dayItems.sort((a, b) => b.media.popularity - a.media.popularity);
|
|
||||||
|
|
||||||
if (dayItems.length === 0) {
|
|
||||||
grid.innerHTML = `
|
|
||||||
<div style="grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem; opacity: 0.5;">
|
|
||||||
<p style="margin-top: 1rem; font-size: 1.2rem; font-weight: 500;">No releases found for this day</p>
|
|
||||||
</div>`;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
dayItems.forEach(evt => {
|
|
||||||
const m = evt.media;
|
|
||||||
const title = m.title.english || m.title.userPreferred;
|
|
||||||
const time = new Date(evt.airingAt * 1000).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
|
|
||||||
|
|
||||||
const card = document.createElement('div');
|
|
||||||
card.className = `card`;
|
|
||||||
card.onclick = () => window.location.href = `/anime/${m.id}`;
|
|
||||||
|
|
||||||
card.innerHTML = `
|
|
||||||
<div class="card-img-wrap">
|
|
||||||
<img src="${m.coverImage.large}" alt="${title}" loading="lazy">
|
|
||||||
<div class="card-ep-badge">EP ${evt.episode} • ${time}</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-content">
|
|
||||||
<h3>${title}</h3>
|
|
||||||
<p>${m.format || 'TV'}</p>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
grid.appendChild(card);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function isSameDay(d1, d2) {
|
|
||||||
return d1.getFullYear() === d2.getFullYear() &&
|
|
||||||
d1.getMonth() === d2.getMonth() &&
|
|
||||||
d1.getDate() === d2.getDate();
|
|
||||||
}
|
|
||||||
|
|
||||||
function getWeekStart(d) {
|
|
||||||
const date = new Date(d);
|
|
||||||
date.setHours(0, 0, 0, 0);
|
|
||||||
|
|
||||||
const day = date.getDay();
|
|
||||||
const diff = date.getDate() - day + (day === 0 ? -6 : 1);
|
|
||||||
date.setDate(diff);
|
|
||||||
return date;
|
|
||||||
}
|
|
||||||
|
|
||||||
function navigate(delta) {
|
|
||||||
if (state.abortController) state.abortController.abort();
|
|
||||||
|
|
||||||
if (state.viewType === 'MONTH') {
|
|
||||||
state.currentDate.setMonth(state.currentDate.getMonth() + delta);
|
|
||||||
} else {
|
|
||||||
state.currentDate.setDate(state.currentDate.getDate() + (delta * 7));
|
|
||||||
}
|
|
||||||
|
|
||||||
renderHeader();
|
|
||||||
fetchSchedule();
|
|
||||||
}
|
|
||||||
|
|
||||||
function setViewType(type) {
|
|
||||||
if (state.viewType === type) return;
|
|
||||||
state.viewType = type;
|
|
||||||
|
|
||||||
document.getElementById('btnViewMonth').classList.toggle('active', type === 'MONTH');
|
|
||||||
document.getElementById('btnViewWeek').classList.toggle('active', type === 'WEEK');
|
|
||||||
|
|
||||||
state.selectedWeekDayIndex = new Date().getDay() - 1;
|
|
||||||
if (state.selectedWeekDayIndex === -1) state.selectedWeekDayIndex = 6;
|
|
||||||
|
|
||||||
renderHeader();
|
|
||||||
|
|
||||||
if (state.scheduleData.length) {
|
|
||||||
renderContent();
|
|
||||||
|
|
||||||
} else {
|
|
||||||
fetchSchedule();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function setMode(mode) {
|
|
||||||
if (state.mode === mode) return;
|
|
||||||
state.mode = mode;
|
|
||||||
document.getElementById('btnSub').classList.toggle('active', mode === 'SUB');
|
|
||||||
document.getElementById('btnDub').classList.toggle('active', mode === 'DUB');
|
|
||||||
renderContent();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function setFilter(filterType) {
|
|
||||||
if (state.filter === filterType) return;
|
|
||||||
state.filter = filterType;
|
|
||||||
|
|
||||||
document.getElementById('btnAll').classList.toggle('active', filterType === 'ALL');
|
|
||||||
document.getElementById('btnMyList').classList.toggle('active', filterType === 'MY_LIST');
|
|
||||||
|
|
||||||
renderContent();
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderHeader() {
|
|
||||||
const options = { month: 'long', year: 'numeric' };
|
|
||||||
let title = state.currentDate.toLocaleDateString('en-US', options);
|
|
||||||
|
|
||||||
if (state.viewType === 'WEEK') {
|
|
||||||
const start = getWeekStart(state.currentDate);
|
|
||||||
const end = new Date(start);
|
|
||||||
end.setDate(end.getDate() + 6);
|
|
||||||
|
|
||||||
const startStr = start.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
|
|
||||||
const endStr = end.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
|
|
||||||
title = `${startStr} - ${endStr}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const titleEl = document.getElementById('monthTitle');
|
|
||||||
if (titleEl) titleEl.textContent = title;
|
|
||||||
}
|
|
||||||
|
|
||||||
function setLoading(bool) {
|
|
||||||
state.loading = bool;
|
|
||||||
const loader = document.getElementById('loader');
|
|
||||||
if (loader) {
|
|
||||||
if (bool) loader.classList.add('active');
|
|
||||||
else loader.classList.remove('active');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateAmbient(data) {
|
|
||||||
if (!data || !data.length) return;
|
|
||||||
|
|
||||||
const top = data.reduce((prev, curr) => (prev.media.popularity > curr.media.popularity) ? prev : curr, data[0]);
|
|
||||||
|
|
||||||
const img = top.media.bannerImage || top.media.coverImage.extraLarge;
|
|
||||||
const bgEl = document.getElementById('ambientBg');
|
|
||||||
if (bgEl && img) {
|
|
||||||
bgEl.style.backgroundImage = `url('${img}')`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function delay(ms) { return new Promise(r => setTimeout(r, ms)); }
|
|
||||||
|
|
||||||
async function getCache(key) {
|
|
||||||
try {
|
|
||||||
const cache = await caches.open(CACHE_NAME);
|
|
||||||
const response = await cache.match(`/schedule-cache/${key}`);
|
|
||||||
if (!response) return null;
|
|
||||||
|
|
||||||
const cached = await response.json();
|
|
||||||
const age = Date.now() - cached.timestamp;
|
|
||||||
|
|
||||||
if (age < CACHE_DURATION) {
|
|
||||||
console.log(`[Cache Hit] ${key}`);
|
|
||||||
return cached.data;
|
|
||||||
}
|
|
||||||
cache.delete(`/schedule-cache/${key}`);
|
|
||||||
return null;
|
|
||||||
} catch (e) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getCacheKey() {
|
|
||||||
|
|
||||||
let d;
|
|
||||||
|
|
||||||
if (state.viewType === 'MONTH') {
|
|
||||||
d = new Date(state.currentDate.getFullYear(), state.currentDate.getMonth(), 1);
|
|
||||||
const year = d.getFullYear();
|
|
||||||
const month = String(d.getMonth() + 1).padStart(2, '0');
|
|
||||||
return `M_${year}_${month}`;
|
|
||||||
} else {
|
|
||||||
d = getWeekStart(state.currentDate);
|
|
||||||
const year = d.getFullYear();
|
|
||||||
const month = String(d.getMonth() + 1).padStart(2, '0');
|
|
||||||
const day = String(d.getDate()).padStart(2, '0');
|
|
||||||
return `W_${year}_${month}_${day}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function setCache(key, data) {
|
|
||||||
try {
|
|
||||||
const cache = await caches.open(CACHE_NAME);
|
|
||||||
const payload = JSON.stringify({ timestamp: Date.now(), data: data });
|
|
||||||
const response = new Response(payload, { headers: { 'Content-Type': 'application/json' } });
|
|
||||||
await cache.put(`/schedule-cache/${key}`, response);
|
|
||||||
} catch (e) {
|
|
||||||
console.warn("Cache write failed", e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.navigate = navigate;
|
|
||||||
window.setViewType = setViewType;
|
|
||||||
window.setMode = setMode;
|
|
||||||
window.setFilter = setFilter;
|
|
||||||
@@ -1,511 +0,0 @@
|
|||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
// --- Constants ---
|
|
||||||
const GENRES = [
|
|
||||||
"Action", "Adventure", "Comedy", "Drama", "Ecchi", "Fantasy",
|
|
||||||
"Horror", "Mahou Shoujo", "Mecha", "Music", "Mystery",
|
|
||||||
"Psychological", "Romance", "Sci-Fi", "Slice of Life",
|
|
||||||
"Sports", "Supernatural", "Thriller"
|
|
||||||
];
|
|
||||||
|
|
||||||
const FORMATS = {
|
|
||||||
anime: [
|
|
||||||
{ val: 'TV', label: 'TV Show' },
|
|
||||||
{ val: 'MOVIE', label: 'Movie' },
|
|
||||||
{ val: 'OVA', label: 'OVA' },
|
|
||||||
{ val: 'SPECIAL', label: 'Special' }
|
|
||||||
],
|
|
||||||
books: [
|
|
||||||
{ val: 'MANGA', label: 'Manga' },
|
|
||||||
{ val: 'NOVEL', label: 'Light Novel' }
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
// --- State ---
|
|
||||||
const state = {
|
|
||||||
mode: 'anime', // 'anime' | 'books'
|
|
||||||
source: 'anilist',
|
|
||||||
query: '',
|
|
||||||
// Filtros estáticos para Anilist
|
|
||||||
anilistFilters: {
|
|
||||||
year: '', season: '', status: '', format: '',
|
|
||||||
genre: '', sort: 'TRENDING_DESC'
|
|
||||||
},
|
|
||||||
// Filtros dinámicos para Extensiones
|
|
||||||
extensionFilters: {}, // Almacena los valores actuales de la extensión
|
|
||||||
isLoading: false
|
|
||||||
};
|
|
||||||
|
|
||||||
// --- DOM Elements ---
|
|
||||||
const els = {
|
|
||||||
sidebar: document.getElementById('sidebar'),
|
|
||||||
toggleBtn: document.getElementById('toggle-sidebar'),
|
|
||||||
overlay: document.getElementById('mobile-overlay'),
|
|
||||||
closeMobileBtn: document.getElementById('close-sidebar-mobile'),
|
|
||||||
|
|
||||||
input: document.getElementById('main-search'),
|
|
||||||
grid: document.getElementById('results-grid'),
|
|
||||||
title: document.getElementById('results-title'),
|
|
||||||
count: document.getElementById('result-count'),
|
|
||||||
loader: document.getElementById('search-loader'),
|
|
||||||
|
|
||||||
modeBtns: document.querySelectorAll('.mode-btn'),
|
|
||||||
sourceSelect: document.getElementById('source-select'),
|
|
||||||
|
|
||||||
// Paneles de Filtros
|
|
||||||
anilistPanel: document.getElementById('anilist-filters'),
|
|
||||||
extensionPanel: document.getElementById('extension-filters'),
|
|
||||||
|
|
||||||
// Inputs estáticos de Anilist
|
|
||||||
staticFilters: {
|
|
||||||
year: document.getElementById('filter-year'),
|
|
||||||
season: document.getElementById('filter-season'),
|
|
||||||
status: document.getElementById('filter-status'),
|
|
||||||
format: document.getElementById('filter-format'),
|
|
||||||
genre: document.getElementById('filter-genre'),
|
|
||||||
sort: document.getElementById('filter-sort')
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// --- Init ---
|
|
||||||
init();
|
|
||||||
|
|
||||||
async function init() {
|
|
||||||
populateStaticSelects();
|
|
||||||
setupEvents();
|
|
||||||
// Carga inicial
|
|
||||||
await loadExtensionsForMode();
|
|
||||||
performSearch();
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Setup Helpers ---
|
|
||||||
function populateStaticSelects() {
|
|
||||||
GENRES.forEach(g => els.staticFilters.genre.add(new Option(g, g)));
|
|
||||||
|
|
||||||
const currentYear = new Date().getFullYear() + 1;
|
|
||||||
for (let i = currentYear; i >= 1970; i--) {
|
|
||||||
els.staticFilters.year.add(new Option(i, i));
|
|
||||||
}
|
|
||||||
updateFormatSelect();
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateFormatSelect() {
|
|
||||||
const currentVal = els.staticFilters.format.value;
|
|
||||||
els.staticFilters.format.innerHTML = '<option value="">Any Format</option>';
|
|
||||||
const list = state.mode === 'anime' ? FORMATS.anime : FORMATS.books;
|
|
||||||
list.forEach(f => els.staticFilters.format.add(new Option(f.label, f.val)));
|
|
||||||
|
|
||||||
// Restaurar valor si existe en el nuevo modo
|
|
||||||
const exists = list.find(f => f.val === currentVal);
|
|
||||||
els.staticFilters.format.value = exists ? currentVal : "";
|
|
||||||
state.anilistFilters.format = els.staticFilters.format.value;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadExtensionsForMode() {
|
|
||||||
const endpoint = state.mode === 'anime' ? '/api/extensions/anime' : '/api/extensions/book';
|
|
||||||
try {
|
|
||||||
const res = await fetch(endpoint);
|
|
||||||
const data = await res.json();
|
|
||||||
const extensions = data.extensions || [];
|
|
||||||
updateSourceDropdown(extensions);
|
|
||||||
} catch (e) {
|
|
||||||
console.error("Failed to load extensions", e);
|
|
||||||
updateSourceDropdown([]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateSourceDropdown(extensions) {
|
|
||||||
// Guardar la selección actual si es posible
|
|
||||||
const currentSource = els.sourceSelect.value;
|
|
||||||
|
|
||||||
els.sourceSelect.innerHTML = `<option value="anilist">Anilist</option>`;
|
|
||||||
extensions.forEach(ext => els.sourceSelect.add(new Option(ext, ext)));
|
|
||||||
|
|
||||||
// Si la fuente actual existe en la nueva lista, mantenerla; si no, volver a anilist
|
|
||||||
if (extensions.includes(currentSource) || currentSource === 'anilist') {
|
|
||||||
els.sourceSelect.value = currentSource;
|
|
||||||
} else {
|
|
||||||
els.sourceSelect.value = 'anilist';
|
|
||||||
state.source = 'anilist';
|
|
||||||
handleSourceChange(); // Resetear UI
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function setupEvents() {
|
|
||||||
const toggleSidebar = () => {
|
|
||||||
els.sidebar.classList.toggle('active');
|
|
||||||
els.overlay.classList.toggle('active');
|
|
||||||
};
|
|
||||||
|
|
||||||
els.toggleBtn.addEventListener('click', toggleSidebar);
|
|
||||||
els.overlay.addEventListener('click', toggleSidebar);
|
|
||||||
els.closeMobileBtn.addEventListener('click', toggleSidebar);
|
|
||||||
|
|
||||||
let debounce;
|
|
||||||
els.input.addEventListener('input', (e) => {
|
|
||||||
state.query = e.target.value.trim();
|
|
||||||
clearTimeout(debounce);
|
|
||||||
debounce = setTimeout(performSearch, 500);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Cambio de Modo (Anime <-> Manga)
|
|
||||||
els.modeBtns.forEach(btn => {
|
|
||||||
btn.addEventListener('click', async () => {
|
|
||||||
if(btn.classList.contains('active')) return;
|
|
||||||
els.modeBtns.forEach(b => b.classList.remove('active'));
|
|
||||||
btn.classList.add('active');
|
|
||||||
|
|
||||||
state.mode = btn.dataset.mode;
|
|
||||||
updateFormatSelect();
|
|
||||||
|
|
||||||
// Recargar lista de extensiones para el nuevo modo
|
|
||||||
await loadExtensionsForMode();
|
|
||||||
|
|
||||||
// Forzar vuelta a anilist al cambiar de modo para evitar inconsistencias
|
|
||||||
state.source = 'anilist';
|
|
||||||
els.sourceSelect.value = 'anilist';
|
|
||||||
handleSourceChange();
|
|
||||||
|
|
||||||
performSearch();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Cambio de Fuente (Anilist <-> Extensiones)
|
|
||||||
els.sourceSelect.addEventListener('change', (e) => {
|
|
||||||
state.source = e.target.value;
|
|
||||||
handleSourceChange();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Eventos para filtros de Anilist
|
|
||||||
Object.entries(els.staticFilters).forEach(([key, element]) => {
|
|
||||||
element.addEventListener('change', (e) => {
|
|
||||||
state.anilistFilters[key] = e.target.value;
|
|
||||||
performSearch();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleSourceChange() {
|
|
||||||
// Limpiar resultados al cambiar fuente
|
|
||||||
els.grid.innerHTML = '';
|
|
||||||
els.count.textContent = '';
|
|
||||||
|
|
||||||
if (state.source === 'anilist') {
|
|
||||||
els.anilistPanel.style.display = 'flex';
|
|
||||||
els.extensionPanel.style.display = 'none';
|
|
||||||
els.extensionPanel.innerHTML = ''; // Limpiar DOM
|
|
||||||
state.extensionFilters = {};
|
|
||||||
performSearch();
|
|
||||||
} else {
|
|
||||||
els.anilistPanel.style.display = 'none';
|
|
||||||
els.extensionPanel.style.display = 'flex';
|
|
||||||
await loadExtensionFilters(state.source);
|
|
||||||
performSearch();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Extension Filters Logic ---
|
|
||||||
|
|
||||||
async function loadExtensionFilters(extensionName) {
|
|
||||||
els.extensionPanel.innerHTML = '<div class="spinner" style="width:20px;height:20px;border-width:2px;align-self:center;"></div>';
|
|
||||||
state.extensionFilters = {}; // Resetear filtros actuales
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(`/api/extensions/${extensionName}/filters`);
|
|
||||||
const data = await res.json();
|
|
||||||
|
|
||||||
// Renderizar
|
|
||||||
els.extensionPanel.innerHTML = '';
|
|
||||||
|
|
||||||
// Data.filters puede ser un objeto (diccionario) o un array. Lo normalizamos.
|
|
||||||
let filters = [];
|
|
||||||
if (Array.isArray(data.filters)) {
|
|
||||||
filters = data.filters;
|
|
||||||
} else if (data.filters && typeof data.filters === 'object') {
|
|
||||||
// Si es objeto, convertimos values a array asegurando que la key esté dentro
|
|
||||||
filters = Object.entries(data.filters).map(([k, v]) => ({ ...v, key: k }));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (filters.length === 0) {
|
|
||||||
els.extensionPanel.innerHTML = '<p style="color:var(--c-text-muted);font-size:0.8rem;text-align:center;">No filters available for this source.</p>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
filters.forEach(filter => {
|
|
||||||
const filterEl = createDynamicFilter(filter);
|
|
||||||
els.extensionPanel.appendChild(filterEl);
|
|
||||||
|
|
||||||
// Set default if exists
|
|
||||||
if (filter.default !== undefined) {
|
|
||||||
state.extensionFilters[filter.key] = filter.default;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
els.extensionPanel.innerHTML = '<p style="color:red;font-size:0.8rem;">Error loading filters.</p>';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function createDynamicFilter(filter) {
|
|
||||||
const container = document.createElement('div');
|
|
||||||
container.className = 'filter-group';
|
|
||||||
|
|
||||||
const label = document.createElement('label');
|
|
||||||
label.textContent = filter.label || filter.key;
|
|
||||||
|
|
||||||
const updateState = (val) => {
|
|
||||||
state.extensionFilters[filter.key] = val;
|
|
||||||
performSearch();
|
|
||||||
};
|
|
||||||
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'select':
|
|
||||||
container.appendChild(label);
|
|
||||||
const wrapper = document.createElement('div');
|
|
||||||
wrapper.className = 'custom-select';
|
|
||||||
const sel = document.createElement('select');
|
|
||||||
sel.add(new Option('Any', ''));
|
|
||||||
(filter.options || []).forEach(opt => sel.add(new Option(opt.label, opt.value)));
|
|
||||||
sel.addEventListener('change', e => updateState(e.target.value));
|
|
||||||
wrapper.appendChild(sel);
|
|
||||||
container.appendChild(wrapper);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'multiselect':
|
|
||||||
container.appendChild(label);
|
|
||||||
|
|
||||||
// Contenedor principal
|
|
||||||
const msContainer = document.createElement('div');
|
|
||||||
msContainer.className = 'multiselect-container';
|
|
||||||
|
|
||||||
// BUSCADOR: Solo si hay más de 8 opciones
|
|
||||||
if ((filter.options || []).length > 8) {
|
|
||||||
const searchWrapper = document.createElement('div');
|
|
||||||
searchWrapper.className = 'multiselect-search-wrapper';
|
|
||||||
|
|
||||||
const searchInput = document.createElement('input');
|
|
||||||
searchInput.type = 'text';
|
|
||||||
searchInput.className = 'multiselect-search-input';
|
|
||||||
searchInput.placeholder = 'Search...';
|
|
||||||
|
|
||||||
// Filtrar opciones en tiempo real
|
|
||||||
searchInput.addEventListener('input', (e) => {
|
|
||||||
const term = e.target.value.toLowerCase();
|
|
||||||
const items = groupWrapper.querySelectorAll('.checkbox-item');
|
|
||||||
items.forEach(item => {
|
|
||||||
const text = item.textContent.toLowerCase();
|
|
||||||
item.style.display = text.includes(term) ? 'flex' : 'none';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
searchWrapper.appendChild(searchInput);
|
|
||||||
msContainer.appendChild(searchWrapper);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Lista Scrollable
|
|
||||||
const groupWrapper = document.createElement('div');
|
|
||||||
groupWrapper.className = 'multiselect-group';
|
|
||||||
|
|
||||||
const getCheckedValues = () => {
|
|
||||||
return Array.from(groupWrapper.querySelectorAll('input:checked')).map(cb => cb.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
(filter.options || []).forEach(opt => {
|
|
||||||
const itemLabel = document.createElement('label');
|
|
||||||
itemLabel.className = 'checkbox-item';
|
|
||||||
|
|
||||||
const chk = document.createElement('input');
|
|
||||||
chk.type = 'checkbox';
|
|
||||||
chk.value = opt.value;
|
|
||||||
|
|
||||||
// Restaurar estado si ya estaba seleccionado
|
|
||||||
const currentVals = state.extensionFilters[filter.key] || [];
|
|
||||||
if (Array.isArray(currentVals) && currentVals.includes(opt.value)) {
|
|
||||||
chk.checked = true;
|
|
||||||
itemLabel.classList.add('is-selected');
|
|
||||||
}
|
|
||||||
|
|
||||||
chk.addEventListener('change', (e) => {
|
|
||||||
if(e.target.checked) itemLabel.classList.add('is-selected');
|
|
||||||
else itemLabel.classList.remove('is-selected');
|
|
||||||
updateState(getCheckedValues());
|
|
||||||
});
|
|
||||||
|
|
||||||
const spanText = document.createElement('span');
|
|
||||||
spanText.textContent = opt.label;
|
|
||||||
|
|
||||||
itemLabel.appendChild(chk);
|
|
||||||
itemLabel.appendChild(spanText);
|
|
||||||
groupWrapper.appendChild(itemLabel);
|
|
||||||
});
|
|
||||||
|
|
||||||
msContainer.appendChild(groupWrapper);
|
|
||||||
container.appendChild(msContainer);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'checkbox':
|
|
||||||
const checkWrapper = document.createElement('div');
|
|
||||||
checkWrapper.className = 'checkbox-wrapper';
|
|
||||||
const checkLabel = document.createElement('span');
|
|
||||||
checkLabel.className = 'checkbox-label';
|
|
||||||
checkLabel.textContent = filter.label || filter.key;
|
|
||||||
|
|
||||||
const chk = document.createElement('input');
|
|
||||||
chk.type = 'checkbox';
|
|
||||||
chk.checked = !!filter.default;
|
|
||||||
chk.addEventListener('change', e => updateState(e.target.checked));
|
|
||||||
|
|
||||||
checkWrapper.appendChild(checkLabel);
|
|
||||||
checkWrapper.appendChild(chk);
|
|
||||||
container.appendChild(checkWrapper);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'text':
|
|
||||||
case 'number':
|
|
||||||
case 'tags':
|
|
||||||
container.appendChild(label);
|
|
||||||
const inp = document.createElement('input');
|
|
||||||
inp.type = filter.type === 'number' ? 'number' : 'text';
|
|
||||||
inp.className = 'filter-input';
|
|
||||||
|
|
||||||
let timer;
|
|
||||||
inp.addEventListener('input', (e) => {
|
|
||||||
clearTimeout(timer);
|
|
||||||
timer = setTimeout(() => {
|
|
||||||
let val = e.target.value;
|
|
||||||
if (filter.type === 'tags') val = val.replace(/,\s+/g, ',');
|
|
||||||
updateState(val);
|
|
||||||
}, 600);
|
|
||||||
});
|
|
||||||
container.appendChild(inp);
|
|
||||||
if(filter.type === 'tags') {
|
|
||||||
const hint = document.createElement('span');
|
|
||||||
hint.className = 'input-hint';
|
|
||||||
hint.textContent = 'e.g. action, comedy';
|
|
||||||
container.appendChild(hint);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
|
||||||
container.appendChild(label);
|
|
||||||
const defInp = document.createElement('input');
|
|
||||||
defInp.className = 'filter-input';
|
|
||||||
defInp.addEventListener('change', e => updateState(e.target.value));
|
|
||||||
container.appendChild(defInp);
|
|
||||||
}
|
|
||||||
return container;
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Search Logic ---
|
|
||||||
async function performSearch() {
|
|
||||||
state.isLoading = true;
|
|
||||||
els.loader.style.display = 'block';
|
|
||||||
els.grid.style.opacity = '0.5';
|
|
||||||
|
|
||||||
let url = '';
|
|
||||||
|
|
||||||
if (state.source === 'anilist') {
|
|
||||||
// Lógica existente de Anilist
|
|
||||||
const p = new URLSearchParams({
|
|
||||||
type: state.mode === 'anime' ? 'ANIME' : 'MANGA',
|
|
||||||
sort: state.anilistFilters.sort
|
|
||||||
});
|
|
||||||
if(state.query) p.append('q', state.query);
|
|
||||||
if(state.anilistFilters.year) p.append('year', state.anilistFilters.year);
|
|
||||||
if(state.anilistFilters.season) p.append('season', state.anilistFilters.season);
|
|
||||||
if(state.anilistFilters.genre) p.append('genre', state.anilistFilters.genre);
|
|
||||||
if(state.anilistFilters.status) p.append('status', state.anilistFilters.status);
|
|
||||||
if(state.anilistFilters.format) p.append('format', state.anilistFilters.format);
|
|
||||||
url = `/api/search/advanced?${p}`;
|
|
||||||
} else {
|
|
||||||
// Lógica para Extensiones
|
|
||||||
// Endpoint: /api/search/{source} o /api/search/books/{source}
|
|
||||||
const basePath = state.mode === 'anime'
|
|
||||||
? `/api/search/${state.source}`
|
|
||||||
: `/api/search/books/${state.source}`;
|
|
||||||
|
|
||||||
const p = new URLSearchParams();
|
|
||||||
if (state.query) p.append('q', state.query);
|
|
||||||
|
|
||||||
// Añadir filtros dinámicos a la URL
|
|
||||||
Object.entries(state.extensionFilters).forEach(([key, val]) => {
|
|
||||||
if (val === null || val === undefined || val === '') return;
|
|
||||||
|
|
||||||
if (Array.isArray(val)) {
|
|
||||||
// Si es array (multiselect), unir por comas para el backend
|
|
||||||
if (val.length > 0) p.append(key, val.join(','));
|
|
||||||
} else {
|
|
||||||
p.append(key, val);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
url = `${basePath}?${p.toString()}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(url);
|
|
||||||
if(!res.ok) throw new Error('Network err');
|
|
||||||
const data = await res.json();
|
|
||||||
render(data.results || []);
|
|
||||||
} catch(e) {
|
|
||||||
console.error(e);
|
|
||||||
els.grid.innerHTML = `<p style="grid-column:1/-1;text-align:center;">Error loading results from ${state.source}.</p>`;
|
|
||||||
} finally {
|
|
||||||
state.isLoading = false;
|
|
||||||
els.loader.style.display = 'none';
|
|
||||||
els.grid.style.opacity = '1';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function render(results) {
|
|
||||||
els.grid.innerHTML = '';
|
|
||||||
els.count.textContent = `${results.length} results`;
|
|
||||||
|
|
||||||
if(state.query) els.title.textContent = `Results for "${state.query}"`;
|
|
||||||
else if(state.source === 'anilist' && state.anilistFilters.sort === 'TRENDING_DESC') els.title.textContent = 'Trending Now';
|
|
||||||
else els.title.textContent = 'Explore';
|
|
||||||
|
|
||||||
if(results.length === 0) {
|
|
||||||
els.grid.innerHTML = `<p style="grid-column:1/-1;text-align:center;color:#666">No results found.</p>`;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const fragment = document.createDocumentFragment();
|
|
||||||
|
|
||||||
results.forEach(item => {
|
|
||||||
const div = document.createElement('div');
|
|
||||||
div.className = 'card';
|
|
||||||
|
|
||||||
const title = item.title?.userPreferred || item.title?.english || item.title?.romaji || 'Unknown';
|
|
||||||
const img = item.coverImage?.large || item.coverImage || '/public/assets/placeholder.svg';
|
|
||||||
const year = item.year || item.startDate?.year || '';
|
|
||||||
const type = item.format || (state.mode === 'anime' ? 'TV' : 'MANGA');
|
|
||||||
|
|
||||||
// Construir URL: si es extensión, la URL incluye la fuente
|
|
||||||
const typePath = state.mode === 'anime' ? 'anime' : 'book';
|
|
||||||
|
|
||||||
let href;
|
|
||||||
if (state.source === 'anilist') {
|
|
||||||
href = `/${typePath}/${item.id}`;
|
|
||||||
} else {
|
|
||||||
// En resultados de extensiones, el ID puede necesitar codificación
|
|
||||||
// Además, pasamos explícitamente la fuente en la URL
|
|
||||||
href = `/${typePath}/${state.source}/${encodeURIComponent(item.id)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.innerHTML = `
|
|
||||||
<div class="card-img-wrap">
|
|
||||||
<img src="${img}" alt="${title}" loading="lazy">
|
|
||||||
</div>
|
|
||||||
<div class="card-content">
|
|
||||||
<h3>${title}</h3>
|
|
||||||
<p>${year ? year + ' • ' : ''}${type}</p>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
div.addEventListener('click', () => window.location.href = href);
|
|
||||||
fragment.appendChild(div);
|
|
||||||
});
|
|
||||||
|
|
||||||
els.grid.appendChild(fragment);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@@ -1,213 +0,0 @@
|
|||||||
const API_BASE2 = '/api/config';
|
|
||||||
let currentConfig = {};
|
|
||||||
let currentSchema = {};
|
|
||||||
let activeSection = '';
|
|
||||||
let modal, navContainer, formContent, form;
|
|
||||||
|
|
||||||
window.toggleSettingsModal = async (forceClose = false) => {
|
|
||||||
modal = document.getElementById('settings-modal');
|
|
||||||
navContainer = document.getElementById('config-nav');
|
|
||||||
formContent = document.getElementById('config-section-content');
|
|
||||||
form = document.getElementById('config-form');
|
|
||||||
|
|
||||||
if (!modal) return;
|
|
||||||
|
|
||||||
if (forceClose) {
|
|
||||||
modal.classList.add('hidden');
|
|
||||||
} else {
|
|
||||||
const isHidden = modal.classList.contains('hidden');
|
|
||||||
if (isHidden) {
|
|
||||||
modal.classList.remove('hidden');
|
|
||||||
await loadSettings();
|
|
||||||
} else {
|
|
||||||
modal.classList.add('hidden');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
async function loadSettings() {
|
|
||||||
if (!formContent) return;
|
|
||||||
|
|
||||||
// Loading State
|
|
||||||
formContent.innerHTML = `
|
|
||||||
<div class="skeleton-loader">
|
|
||||||
<div class="skeleton title-skeleton"></div>
|
|
||||||
<div class="skeleton field-skeleton"></div>
|
|
||||||
<div class="skeleton field-skeleton"></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(API_BASE2);
|
|
||||||
if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
|
|
||||||
|
|
||||||
const data = await res.json();
|
|
||||||
if (data.error) throw new Error(data.error);
|
|
||||||
|
|
||||||
// --- CORRECCIÓN AQUI ---
|
|
||||||
// Tu JSON devuelve "values", el código original buscaba "config"
|
|
||||||
currentConfig = data.values || data.config || data;
|
|
||||||
currentSchema = data.schema || {};
|
|
||||||
|
|
||||||
renderNav();
|
|
||||||
|
|
||||||
if (!activeSection || !currentConfig[activeSection]) {
|
|
||||||
activeSection = Object.keys(currentConfig)[0];
|
|
||||||
}
|
|
||||||
|
|
||||||
switchSection(activeSection);
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error loading settings:', err);
|
|
||||||
formContent.innerHTML = `
|
|
||||||
<div style="padding: 2rem; text-align: center;">
|
|
||||||
<p style="color: #ef4444; margin-bottom: 1rem;">Failed to load settings</p>
|
|
||||||
<p style="color: #888; font-size: 0.9rem;">${err.message}</p>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function switchSection(section) {
|
|
||||||
if (!currentConfig[section]) return;
|
|
||||||
activeSection = section;
|
|
||||||
renderNav();
|
|
||||||
|
|
||||||
const sectionData = currentConfig[section];
|
|
||||||
const sectionSchema = currentSchema[section] || {};
|
|
||||||
|
|
||||||
formContent.innerHTML = `
|
|
||||||
<h2 class="section-title" style="margin-bottom: 2rem; text-transform: capitalize; font-size: 1.8rem;">
|
|
||||||
${section.replace(/_/g, ' ')}
|
|
||||||
</h2>
|
|
||||||
`;
|
|
||||||
|
|
||||||
Object.entries(sectionData).forEach(([key, value]) => {
|
|
||||||
const group = document.createElement('div');
|
|
||||||
group.className = 'config-group';
|
|
||||||
|
|
||||||
const isBool = typeof value === 'boolean';
|
|
||||||
const inputId = `input-${section}-${key}`;
|
|
||||||
const labelText = key.replace(/_/g, ' ');
|
|
||||||
|
|
||||||
// Obtener descripción
|
|
||||||
const description = sectionSchema[key]?.description || '';
|
|
||||||
const descHtml = description
|
|
||||||
? `<p class="config-description">${description}</p>`
|
|
||||||
: '';
|
|
||||||
|
|
||||||
if (isBool) {
|
|
||||||
group.innerHTML = `
|
|
||||||
<div style="display: flex; flex-direction: column; gap: 8px;">
|
|
||||||
<div style="display: flex; align-items: center; gap: 0.8rem;">
|
|
||||||
<input type="checkbox" id="${inputId}" name="${key}" ${value ? 'checked' : ''}
|
|
||||||
style="width: 20px; height: 20px; accent-color: var(--accent);">
|
|
||||||
<label for="${inputId}" style="margin: 0; cursor: pointer; font-size: 1rem;">${labelText}</label>
|
|
||||||
</div>
|
|
||||||
${descHtml} </div>
|
|
||||||
`;
|
|
||||||
} else {
|
|
||||||
// --- CAMBIO PRINCIPAL AQUI ---
|
|
||||||
// Movimos ${descHtml} para que esté DESPUÉS del input
|
|
||||||
group.innerHTML = `
|
|
||||||
<label for="${inputId}">${labelText}</label>
|
|
||||||
<input class="config-input" id="${inputId}" name="${key}"
|
|
||||||
type="${typeof value === 'number' ? 'number' : 'text'}"
|
|
||||||
value="${value || ''}"
|
|
||||||
placeholder="Not set">
|
|
||||||
${descHtml}
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
formContent.appendChild(group);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderNav() {
|
|
||||||
if (!navContainer) return;
|
|
||||||
navContainer.innerHTML = '';
|
|
||||||
|
|
||||||
Object.keys(currentConfig).forEach(section => {
|
|
||||||
const btn = document.createElement('div');
|
|
||||||
btn.className = `nav-item ${section === activeSection ? 'active' : ''}`;
|
|
||||||
|
|
||||||
// Icono opcional según la sección (puedes personalizar esto)
|
|
||||||
let icon = '';
|
|
||||||
if(section === 'library') icon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>';
|
|
||||||
if(section === 'paths') icon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><folder></folder><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
|
|
||||||
|
|
||||||
btn.innerHTML = `${icon} ${section}`;
|
|
||||||
btn.onclick = () => switchSection(section);
|
|
||||||
navContainer.appendChild(btn);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handler de guardado
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
document.addEventListener('submit', async (e) => {
|
|
||||||
if (e.target.id === 'config-form') {
|
|
||||||
e.preventDefault();
|
|
||||||
await saveSettings();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
async function saveSettings() {
|
|
||||||
if (!form || !activeSection) return;
|
|
||||||
|
|
||||||
const updatedData = {};
|
|
||||||
const sectionConfig = currentConfig[activeSection];
|
|
||||||
|
|
||||||
Object.keys(sectionConfig).forEach(key => {
|
|
||||||
const input = form.elements[key];
|
|
||||||
if (!input) return;
|
|
||||||
|
|
||||||
if (input.type === 'checkbox') {
|
|
||||||
updatedData[key] = input.checked;
|
|
||||||
} else if (input.type === 'number') {
|
|
||||||
updatedData[key] = Number(input.value);
|
|
||||||
} else {
|
|
||||||
updatedData[key] = input.value;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(`${API_BASE2}/${activeSection}`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify(updatedData)
|
|
||||||
});
|
|
||||||
|
|
||||||
if (res.ok) {
|
|
||||||
currentConfig[activeSection] = updatedData; // Actualizamos localmente
|
|
||||||
showNotification('Settings saved successfully!');
|
|
||||||
} else {
|
|
||||||
throw new Error('Failed to save settings');
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
showNotification('Error saving settings', true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function showNotification(msg, isError = false) {
|
|
||||||
const notification = document.createElement('div');
|
|
||||||
const bg = isError ? '#ef4444' : '#10b981';
|
|
||||||
|
|
||||||
notification.style.cssText = `
|
|
||||||
position: fixed; top: 20px; right: 20px;
|
|
||||||
background: ${bg}; color: white;
|
|
||||||
padding: 1rem 1.5rem; border-radius: 8px; font-weight: 600;
|
|
||||||
box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 20000;
|
|
||||||
animation: slideIn 0.3s ease-out; display: flex; align-items: center; gap: 10px;
|
|
||||||
`;
|
|
||||||
notification.innerHTML = isError
|
|
||||||
? `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg> ${msg}`
|
|
||||||
: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg> ${msg}`;
|
|
||||||
|
|
||||||
document.body.appendChild(notification);
|
|
||||||
setTimeout(() => {
|
|
||||||
notification.style.animation = 'slideOut 0.3s ease-out';
|
|
||||||
setTimeout(() => notification.remove(), 300);
|
|
||||||
}, 3000);
|
|
||||||
}
|
|
||||||
@@ -1,102 +0,0 @@
|
|||||||
const Gitea_OWNER = "ItsSkaiya";
|
|
||||||
const Gitea_REPO = "WaifuBoard";
|
|
||||||
const CURRENT_VERSION = "v2.0.0";
|
|
||||||
const UPDATE_CHECK_INTERVAL = 5 * 60 * 1000;
|
|
||||||
|
|
||||||
let currentVersionDisplay;
|
|
||||||
let latestVersionDisplay;
|
|
||||||
let updateToast;
|
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
|
||||||
currentVersionDisplay = document.getElementById("currentVersionDisplay");
|
|
||||||
latestVersionDisplay = document.getElementById("latestVersionDisplay");
|
|
||||||
updateToast = document.getElementById("updateToast");
|
|
||||||
|
|
||||||
if (currentVersionDisplay) {
|
|
||||||
currentVersionDisplay.textContent = CURRENT_VERSION;
|
|
||||||
}
|
|
||||||
|
|
||||||
checkForUpdates();
|
|
||||||
|
|
||||||
setInterval(checkForUpdates, UPDATE_CHECK_INTERVAL);
|
|
||||||
});
|
|
||||||
|
|
||||||
function showToast(latestVersion) {
|
|
||||||
if (latestVersionDisplay && updateToast) {
|
|
||||||
latestVersionDisplay.textContent = latestVersion;
|
|
||||||
updateToast.classList.add("update-available");
|
|
||||||
updateToast.classList.remove("hidden");
|
|
||||||
} else {
|
|
||||||
console.error(
|
|
||||||
"Error: Cannot display toast because one or more DOM elements were not found.",
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function hideToast() {
|
|
||||||
if (updateToast) {
|
|
||||||
updateToast.classList.add("hidden");
|
|
||||||
updateToast.classList.remove("update-available");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function isVersionOutdated(versionA, versionB) {
|
|
||||||
const vA = versionA.replace(/^v/, "").split(".").map(Number);
|
|
||||||
const vB = versionB.replace(/^v/, "").split(".").map(Number);
|
|
||||||
|
|
||||||
for (let i = 0; i < Math.max(vA.length, vB.length); i++) {
|
|
||||||
const numA = vA[i] || 0;
|
|
||||||
const numB = vB[i] || 0;
|
|
||||||
|
|
||||||
if (numA < numB) return true;
|
|
||||||
if (numA > numB) return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function checkForUpdates() {
|
|
||||||
console.log(`Checking for updates for ${Gitea_OWNER}/${Gitea_REPO}...`);
|
|
||||||
|
|
||||||
const apiUrl = `https://git.waifuboard.app/api/v1/repos/${Gitea_OWNER}/${Gitea_REPO}/releases/latest`;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(apiUrl, {
|
|
||||||
method: "GET",
|
|
||||||
headers: {
|
|
||||||
Accept: "application/json",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
if (response.status === 404) {
|
|
||||||
console.info("No releases found for this repository.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
throw new Error(
|
|
||||||
`Gitea API error: ${response.status} ${response.statusText}`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
const latestVersion = data.tag_name;
|
|
||||||
|
|
||||||
if (!latestVersion) {
|
|
||||||
console.warn("Release found but no tag_name present");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(`Latest Gitea Release: ${latestVersion}`);
|
|
||||||
|
|
||||||
if (isVersionOutdated(CURRENT_VERSION, latestVersion)) {
|
|
||||||
console.warn("Update available!");
|
|
||||||
showToast(latestVersion);
|
|
||||||
} else {
|
|
||||||
console.info("Package is up to date.");
|
|
||||||
hideToast();
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Failed to fetch Gitea release:", error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,85 +0,0 @@
|
|||||||
const ContinueWatchingManager = {
|
|
||||||
API_BASE: '/api',
|
|
||||||
|
|
||||||
async load(containerId, status = 'watching', entryType = 'ANIME') {
|
|
||||||
if (!AuthUtils.isAuthenticated()) return;
|
|
||||||
|
|
||||||
const container = document.getElementById(containerId);
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(`${this.API_BASE}/list/filter?status=${status}&entry_type=${entryType}`, {
|
|
||||||
headers: AuthUtils.getAuthHeaders()
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!res.ok) return;
|
|
||||||
|
|
||||||
const data = await res.json();
|
|
||||||
const list = data.results || [];
|
|
||||||
|
|
||||||
this.render(containerId, list, entryType);
|
|
||||||
} catch (err) {
|
|
||||||
console.error(`Continue ${entryType === 'ANIME' ? 'Watching' : 'Reading'} Error:`, err);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
render(containerId, list, entryType = 'ANIME') {
|
|
||||||
const container = document.getElementById(containerId);
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
container.innerHTML = '';
|
|
||||||
|
|
||||||
if (list.length === 0) {
|
|
||||||
const label = entryType === 'ANIME' ? 'watching anime' : 'reading manga';
|
|
||||||
container.innerHTML = `<div style="padding:1rem; color:#888">No ${label}</div>`;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
list.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
|
|
||||||
|
|
||||||
list.forEach(item => {
|
|
||||||
const card = this.createCard(item, entryType);
|
|
||||||
container.appendChild(card);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
createCard(item, entryType) {
|
|
||||||
const el = document.createElement('div');
|
|
||||||
el.className = 'card';
|
|
||||||
|
|
||||||
const nextProgress = (item.progress || 0) + 1;
|
|
||||||
let url;
|
|
||||||
|
|
||||||
if (entryType === 'ANIME') {
|
|
||||||
url = item.source === 'anilist'
|
|
||||||
? `/anime/${item.entry_id}?episode=${nextProgress}`
|
|
||||||
: `/anime/${item.entry_id}/${item.source}/?episode=${nextProgress}`;
|
|
||||||
} else {
|
|
||||||
url = item.source === 'anilist'
|
|
||||||
? `/book/${item.entry_id}?chapter=${nextProgress}`
|
|
||||||
: `/read/${item.source}/${nextProgress}/${item.entry_id}?source=${item.source}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
el.onclick = () => window.location.href = url;
|
|
||||||
|
|
||||||
const progressText = item.total_episodes || item.total_chapters
|
|
||||||
? `${item.progress || 0}/${item.total_episodes || item.total_chapters}`
|
|
||||||
: `${item.progress || 0}`;
|
|
||||||
|
|
||||||
const unitLabel = entryType === 'ANIME' ? 'Ep' : 'Ch';
|
|
||||||
|
|
||||||
el.innerHTML = `
|
|
||||||
<div class="card-img-wrap">
|
|
||||||
<img src="${item.poster}" loading="lazy" alt="${item.title}">
|
|
||||||
</div>
|
|
||||||
<div class="card-content">
|
|
||||||
<h3>${item.title}</h3>
|
|
||||||
<p>${unitLabel} ${progressText} - ${item.source}</p>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
return el;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
window.ContinueWatchingManager = ContinueWatchingManager;
|
|
||||||
@@ -1,238 +0,0 @@
|
|||||||
const ListModalManager = {
|
|
||||||
API_BASE: '/api',
|
|
||||||
currentData: null,
|
|
||||||
isInList: false,
|
|
||||||
currentEntry: null,
|
|
||||||
|
|
||||||
STATUS_MAP: {
|
|
||||||
CURRENT: 'CURRENT',
|
|
||||||
COMPLETED: 'COMPLETED',
|
|
||||||
PLANNING: 'PLANNING',
|
|
||||||
PAUSED: 'PAUSED',
|
|
||||||
DROPPED: 'DROPPED',
|
|
||||||
REPEATING: 'REPEATING'
|
|
||||||
},
|
|
||||||
|
|
||||||
getEntryType(data) {
|
|
||||||
if (!data) return 'ANIME';
|
|
||||||
if (data.entry_type) return data.entry_type.toUpperCase();
|
|
||||||
return 'ANIME';
|
|
||||||
},
|
|
||||||
|
|
||||||
async checkIfInList(entryId, source = 'anilist', entryType) {
|
|
||||||
if (!AuthUtils.isAuthenticated()) return false;
|
|
||||||
|
|
||||||
const url = `${this.API_BASE}/list/entry/${entryId}?source=${source}&entry_type=${entryType}`;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(url, {
|
|
||||||
headers: AuthUtils.getSimpleAuthHeaders()
|
|
||||||
});
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
const data = await response.json();
|
|
||||||
this.isInList = data.found && !!data.entry;
|
|
||||||
this.currentEntry = data.entry || null;
|
|
||||||
} else {
|
|
||||||
this.isInList = false;
|
|
||||||
this.currentEntry = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return this.isInList;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error checking list entry:', error);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
updateButton(buttonSelector = '.hero-buttons .btn-blur') {
|
|
||||||
const btn = document.querySelector(buttonSelector);
|
|
||||||
if (!btn) return;
|
|
||||||
|
|
||||||
if (this.isInList) {
|
|
||||||
btn.innerHTML = `
|
|
||||||
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
|
|
||||||
</svg>
|
|
||||||
In Your ${this.currentData?.format ? 'Library' : 'List'}
|
|
||||||
`;
|
|
||||||
btn.style.background = 'rgba(34, 197, 94, 0.2)';
|
|
||||||
btn.style.color = '#22c55e';
|
|
||||||
btn.style.borderColor = 'rgba(34, 197, 94, 0.3)';
|
|
||||||
} else {
|
|
||||||
btn.innerHTML = `+ Add to ${this.currentData?.format ? 'Library' : 'List'}`;
|
|
||||||
btn.style.background = null;
|
|
||||||
btn.style.color = null;
|
|
||||||
btn.style.borderColor = null;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
open(data, source = 'anilist') {
|
|
||||||
if (!AuthUtils.isAuthenticated()) {
|
|
||||||
NotificationUtils.error('Please log in to manage your list.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.currentData = data;
|
|
||||||
const entryType = this.getEntryType(data);
|
|
||||||
const totalUnits = data.episodes || data.chapters || data.volumes || 999;
|
|
||||||
|
|
||||||
const modalTitle = document.getElementById('modal-title');
|
|
||||||
const deleteBtn = document.getElementById('modal-delete-btn');
|
|
||||||
const progressLabel = document.querySelector('label[for="entry-progress"]') ||
|
|
||||||
document.getElementById('progress-label');
|
|
||||||
|
|
||||||
if (this.isInList && this.currentEntry) {
|
|
||||||
document.getElementById('entry-status').value = this.normalizeStatus(this.currentEntry.status);
|
|
||||||
document.getElementById('entry-progress').value = this.currentEntry.progress || 0;
|
|
||||||
document.getElementById('entry-score').value = this.currentEntry.score || '';
|
|
||||||
document.getElementById('entry-start-date').value = this.currentEntry.start_date?.split('T')[0] || '';
|
|
||||||
document.getElementById('entry-end-date').value = this.currentEntry.end_date?.split('T')[0] || '';
|
|
||||||
document.getElementById('entry-repeat-count').value = this.currentEntry.repeat_count || 0;
|
|
||||||
document.getElementById('entry-notes').value = this.currentEntry.notes || '';
|
|
||||||
document.getElementById('entry-is-private').checked = this.currentEntry.is_private === true || this.currentEntry.is_private === 1;
|
|
||||||
|
|
||||||
modalTitle.textContent = `Edit ${entryType === 'ANIME' ? 'List' : 'Library'} Entry`;
|
|
||||||
deleteBtn.style.display = 'block';
|
|
||||||
} else {
|
|
||||||
document.getElementById('entry-status').value = 'PLANNING';
|
|
||||||
document.getElementById('entry-progress').value = 0;
|
|
||||||
document.getElementById('entry-score').value = '';
|
|
||||||
document.getElementById('entry-start-date').value = '';
|
|
||||||
document.getElementById('entry-end-date').value = '';
|
|
||||||
document.getElementById('entry-repeat-count').value = 0;
|
|
||||||
document.getElementById('entry-notes').value = '';
|
|
||||||
document.getElementById('entry-is-private').checked = false;
|
|
||||||
|
|
||||||
modalTitle.textContent = `Add to ${entryType === 'ANIME' ? 'List' : 'Library'}`;
|
|
||||||
deleteBtn.style.display = 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
const statusSelect = document.getElementById('entry-status');
|
|
||||||
|
|
||||||
[...statusSelect.options].forEach(opt => {
|
|
||||||
if (opt.value === 'CURRENT') {
|
|
||||||
opt.textContent = entryType === 'ANIME' ? 'Watching' : 'Reading';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
if (progressLabel) {
|
|
||||||
if (entryType === 'ANIME') {
|
|
||||||
progressLabel.textContent = 'Episodes Watched';
|
|
||||||
} else if (entryType === 'MANGA') {
|
|
||||||
progressLabel.textContent = 'Chapters Read';
|
|
||||||
} else {
|
|
||||||
progressLabel.textContent = 'Volumes/Parts Read';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('entry-progress').max = totalUnits;
|
|
||||||
document.getElementById('add-list-modal').classList.add('active');
|
|
||||||
},
|
|
||||||
|
|
||||||
normalizeStatus(status) {
|
|
||||||
if (!status) return 'PLANNING';
|
|
||||||
if (status === 'WATCHING' || status === 'READING') return 'CURRENT';
|
|
||||||
return status;
|
|
||||||
},
|
|
||||||
|
|
||||||
close() {
|
|
||||||
document.getElementById('add-list-modal').classList.remove('active');
|
|
||||||
},
|
|
||||||
|
|
||||||
async save(entryId, source = 'anilist') {
|
|
||||||
const uiStatus = document.getElementById('entry-status').value;
|
|
||||||
const status = this.STATUS_MAP[uiStatus] || uiStatus;
|
|
||||||
const progress = parseInt(document.getElementById('entry-progress').value) || 0;
|
|
||||||
const scoreValue = document.getElementById('entry-score').value;
|
|
||||||
const score = scoreValue ? parseFloat(scoreValue) : null;
|
|
||||||
const start_date = document.getElementById('entry-start-date').value || null;
|
|
||||||
const end_date = document.getElementById('entry-end-date').value || null;
|
|
||||||
const repeat_count = parseInt(document.getElementById('entry-repeat-count').value) || 0;
|
|
||||||
const notes = document.getElementById('entry-notes').value || null;
|
|
||||||
const is_private = document.getElementById('entry-is-private').checked;
|
|
||||||
|
|
||||||
const entryType = this.getEntryType(this.currentData);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(`${this.API_BASE}/list/entry`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: AuthUtils.getAuthHeaders(),
|
|
||||||
body: JSON.stringify({
|
|
||||||
entry_id: entryId,
|
|
||||||
source,
|
|
||||||
entry_type: entryType,
|
|
||||||
status,
|
|
||||||
progress,
|
|
||||||
score,
|
|
||||||
start_date,
|
|
||||||
end_date,
|
|
||||||
repeat_count,
|
|
||||||
notes,
|
|
||||||
is_private
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) throw new Error('Failed to save entry');
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
this.isInList = true;
|
|
||||||
this.currentEntry = data.entry;
|
|
||||||
this.updateButton();
|
|
||||||
this.close();
|
|
||||||
NotificationUtils.success(this.isInList ? 'Updated successfully!' : 'Added to your list!');
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error saving to list:', error);
|
|
||||||
NotificationUtils.error('Failed to save. Please try again.');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
async delete(entryId, source = 'anilist') {
|
|
||||||
if (!confirm(`Remove this ${this.getEntryType(this.currentData).toLowerCase()} from your list?`)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const entryType = this.getEntryType(this.currentData);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(
|
|
||||||
`${this.API_BASE}/list/entry/${entryId}?source=${source}&entry_type=${entryType}`,
|
|
||||||
{
|
|
||||||
method: 'DELETE',
|
|
||||||
headers: AuthUtils.getSimpleAuthHeaders()
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!response.ok) throw new Error('Failed to delete entry');
|
|
||||||
|
|
||||||
this.isInList = false;
|
|
||||||
this.currentEntry = null;
|
|
||||||
this.updateButton();
|
|
||||||
this.close();
|
|
||||||
NotificationUtils.success('Removed from your list');
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error deleting from list:', error);
|
|
||||||
NotificationUtils.error('Failed to remove. Please try again.');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
async function loadListModal() {
|
|
||||||
if (document.getElementById('add-list-modal')) return;
|
|
||||||
|
|
||||||
const res = await fetch('/views/components/list-modal.html');
|
|
||||||
const html = await res.text();
|
|
||||||
document.body.insertAdjacentHTML('beforeend', html);
|
|
||||||
|
|
||||||
const modal = document.getElementById('add-list-modal');
|
|
||||||
modal.addEventListener('click', (e) => {
|
|
||||||
if (e.target.id === 'add-list-modal') {
|
|
||||||
ListModalManager.close();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', loadListModal);
|
|
||||||
|
|
||||||
window.ListModalManager = ListModalManager;
|
|
||||||
@@ -1,171 +0,0 @@
|
|||||||
const MatchModal = (function() {
|
|
||||||
let _config = {
|
|
||||||
onSearch: async (query, provider) => [], // Debe devolver Array de objetos
|
|
||||||
onSelect: (item, provider) => {},
|
|
||||||
provider: 'generic'
|
|
||||||
};
|
|
||||||
|
|
||||||
let elements = {};
|
|
||||||
let searchTimeout = null;
|
|
||||||
|
|
||||||
function init() {
|
|
||||||
if (document.getElementById('waifu-match-modal')) return;
|
|
||||||
|
|
||||||
// Inyectar HTML
|
|
||||||
const modalHTML = `
|
|
||||||
<div class="match-modal-overlay" id="waifu-match-modal">
|
|
||||||
<div class="match-modal-content">
|
|
||||||
<div class="match-header">
|
|
||||||
<h3 class="match-title">Manual Match <span id="match-provider-badge" style="opacity:0.6; font-size:0.8em; margin-left:8px;"></span></h3>
|
|
||||||
<button class="match-close-btn" id="match-close-btn">✕</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="match-search-container">
|
|
||||||
<input type="text" id="match-input" class="match-input" placeholder="Search title..." autocomplete="off">
|
|
||||||
<button id="match-btn-action" class="match-search-btn">Search</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="match-results-body" id="match-results-container">
|
|
||||||
<div class="match-msg">Type to start searching...</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
document.body.insertAdjacentHTML('beforeend', modalHTML);
|
|
||||||
|
|
||||||
// Cachear elementos
|
|
||||||
elements = {
|
|
||||||
overlay: document.getElementById('waifu-match-modal'),
|
|
||||||
input: document.getElementById('match-input'),
|
|
||||||
results: document.getElementById('match-results-container'),
|
|
||||||
badge: document.getElementById('match-provider-badge'),
|
|
||||||
closeBtn: document.getElementById('match-close-btn'),
|
|
||||||
searchBtn: document.getElementById('match-btn-action')
|
|
||||||
};
|
|
||||||
|
|
||||||
// Event Listeners
|
|
||||||
elements.closeBtn.onclick = close;
|
|
||||||
elements.overlay.onclick = (e) => { if(e.target === elements.overlay) close(); };
|
|
||||||
|
|
||||||
// Búsqueda al hacer clic
|
|
||||||
elements.searchBtn.onclick = () => performSearch(elements.input.value);
|
|
||||||
|
|
||||||
// Búsqueda al escribir (Debounce)
|
|
||||||
elements.input.addEventListener('input', (e) => {
|
|
||||||
clearTimeout(searchTimeout);
|
|
||||||
if(e.target.value.trim().length === 0) return;
|
|
||||||
searchTimeout = setTimeout(() => performSearch(e.target.value), 600);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Enter key
|
|
||||||
elements.input.addEventListener('keypress', (e) => {
|
|
||||||
if (e.key === 'Enter') performSearch(elements.input.value);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function open(options) {
|
|
||||||
init(); // Asegurar que el DOM existe
|
|
||||||
|
|
||||||
_config = { ..._config, ...options };
|
|
||||||
|
|
||||||
// Resetear UI
|
|
||||||
elements.input.value = options.initialQuery || '';
|
|
||||||
elements.results.innerHTML = '<div class="match-msg">Search above to find matches...</div>';
|
|
||||||
elements.badge.innerText = options.provider ? `(${options.provider})` : '';
|
|
||||||
|
|
||||||
// Mostrar Modal
|
|
||||||
elements.overlay.classList.add('active');
|
|
||||||
|
|
||||||
// Auto-search si hay query inicial
|
|
||||||
if (options.initialQuery) {
|
|
||||||
performSearch(options.initialQuery);
|
|
||||||
}
|
|
||||||
|
|
||||||
setTimeout(() => elements.input.focus(), 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
function close() {
|
|
||||||
if(elements.overlay) elements.overlay.classList.remove('active');
|
|
||||||
}
|
|
||||||
|
|
||||||
async function performSearch(query) {
|
|
||||||
if (!query || query.trim().length < 2) return;
|
|
||||||
|
|
||||||
elements.results.innerHTML = '<div class="match-spinner"></div>';
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Ejecutar la función de búsqueda pasada en la config
|
|
||||||
const results = await _config.onSearch(query, _config.provider);
|
|
||||||
renderResults(results);
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
elements.results.innerHTML = '<div class="match-msg error">Error searching provider.</div>';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderResults(results) {
|
|
||||||
elements.results.innerHTML = '';
|
|
||||||
|
|
||||||
if (!results || results.length === 0) {
|
|
||||||
elements.results.innerHTML = '<div class="match-msg">No matches found.</div>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const grid = document.createElement('div');
|
|
||||||
grid.className = 'match-list-grid';
|
|
||||||
|
|
||||||
results.forEach(item => {
|
|
||||||
const el = document.createElement('div');
|
|
||||||
el.className = 'match-item';
|
|
||||||
|
|
||||||
// Normalización de datos para asegurar compatibilidad con Anime/Libros
|
|
||||||
const img = item.coverImage?.large || item.coverImage || item.image || '/public/assets/no-image.png';
|
|
||||||
const title = item.title?.english || item.title?.romaji || item.title || 'Unknown Title';
|
|
||||||
const meta = item.releaseDate || item.year || item.startDate?.year || '';
|
|
||||||
const url = item.url || item.externalUrl || null;
|
|
||||||
|
|
||||||
el.innerHTML = `
|
|
||||||
<img src="${img}" class="match-poster" loading="lazy">
|
|
||||||
<div class="match-info">
|
|
||||||
<div class="match-item-title">${title}</div>
|
|
||||||
<div class="match-item-meta">${meta}</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
// Botón de enlace externo (si existe URL)
|
|
||||||
if (url) {
|
|
||||||
const linkBtn = document.createElement('a');
|
|
||||||
linkBtn.href = url;
|
|
||||||
linkBtn.target = "_blank";
|
|
||||||
linkBtn.className = "match-link-btn";
|
|
||||||
linkBtn.title = "View Source";
|
|
||||||
linkBtn.innerHTML = `
|
|
||||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
|
|
||||||
<polyline points="15 3 21 3 21 9"></polyline>
|
|
||||||
<line x1="10" y1="14" x2="21" y2="3"></line>
|
|
||||||
</svg>
|
|
||||||
`;
|
|
||||||
// Evitar que el click en el enlace dispare el select
|
|
||||||
linkBtn.onclick = (e) => e.stopPropagation();
|
|
||||||
el.appendChild(linkBtn);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Click en la tarjeta selecciona
|
|
||||||
el.onclick = () => {
|
|
||||||
_config.onSelect(item);
|
|
||||||
close();
|
|
||||||
};
|
|
||||||
|
|
||||||
grid.appendChild(el);
|
|
||||||
});
|
|
||||||
|
|
||||||
elements.results.appendChild(grid);
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
open,
|
|
||||||
close
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
@@ -1,131 +0,0 @@
|
|||||||
import fs from 'fs';
|
|
||||||
import path from 'path';
|
|
||||||
import os from 'os';
|
|
||||||
import yaml from 'js-yaml';
|
|
||||||
import crypto from 'crypto';
|
|
||||||
|
|
||||||
const BASE_DIR = path.join(os.homedir(), 'WaifuBoards');
|
|
||||||
const CONFIG_PATH = path.join(BASE_DIR, 'config.yaml');
|
|
||||||
|
|
||||||
const DEFAULT_CONFIG = {
|
|
||||||
library: {
|
|
||||||
anime: null,
|
|
||||||
manga: null,
|
|
||||||
novels: null
|
|
||||||
},
|
|
||||||
paths: {
|
|
||||||
mpv: null,
|
|
||||||
ffmpeg: null,
|
|
||||||
ffprobe: null,
|
|
||||||
cloudflared: null,
|
|
||||||
},
|
|
||||||
server: {
|
|
||||||
jwt_secret: null
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export const CONFIG_SCHEMA = {
|
|
||||||
library: {
|
|
||||||
anime: { description: "Path where anime is stored" },
|
|
||||||
manga: { description: "Path where manga is stored" },
|
|
||||||
novels: { description: "Path where novels are stored" }
|
|
||||||
},
|
|
||||||
paths: {
|
|
||||||
mpv: { description: "Required to open anime episodes in mpv on desktop version." },
|
|
||||||
ffmpeg: { description: "Required for downloading anime episodes." },
|
|
||||||
ffprobe: { description: "Required for watching local anime episodes." },
|
|
||||||
cloudflared: { description: "Required for creating pubic rooms." }
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
function ensureConfigFile() {
|
|
||||||
if (!fs.existsSync(BASE_DIR)) {
|
|
||||||
fs.mkdirSync(BASE_DIR, { recursive: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
let configExists = fs.existsSync(CONFIG_PATH);
|
|
||||||
|
|
||||||
if (!configExists) {
|
|
||||||
fs.writeFileSync(
|
|
||||||
CONFIG_PATH,
|
|
||||||
yaml.dump(DEFAULT_CONFIG),
|
|
||||||
'utf8'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const raw = fs.readFileSync(CONFIG_PATH, 'utf8');
|
|
||||||
const loaded = yaml.load(raw) || {};
|
|
||||||
|
|
||||||
if (!loaded.server) loaded.server = {};
|
|
||||||
if (!loaded.server.jwt_secret) {
|
|
||||||
loaded.server.jwt_secret = crypto.randomBytes(32).toString('hex');
|
|
||||||
fs.writeFileSync(CONFIG_PATH, yaml.dump(deepMerge(structuredClone(DEFAULT_CONFIG), loaded)), 'utf8');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getPublicConfig() {
|
|
||||||
const { values } = getConfig();
|
|
||||||
const publicConfig = structuredClone(values);
|
|
||||||
if (publicConfig.server) delete publicConfig.server.jwt_secret;
|
|
||||||
return publicConfig;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getConfig() {
|
|
||||||
ensureConfigFile();
|
|
||||||
const raw = fs.readFileSync(CONFIG_PATH, 'utf8');
|
|
||||||
const loaded = yaml.load(raw) || {};
|
|
||||||
|
|
||||||
return {
|
|
||||||
values: deepMerge(structuredClone(DEFAULT_CONFIG), loaded),
|
|
||||||
schema: CONFIG_SCHEMA
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function sanitizeLoadedConfig(loaded) {
|
|
||||||
return {
|
|
||||||
library: loaded.library,
|
|
||||||
paths: loaded.paths
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function setConfig(partialConfig) {
|
|
||||||
ensureConfigFile();
|
|
||||||
|
|
||||||
const raw = fs.readFileSync(CONFIG_PATH, 'utf8');
|
|
||||||
const loadedRaw = yaml.load(raw) || {};
|
|
||||||
const loaded = sanitizeLoadedConfig(loadedRaw);
|
|
||||||
|
|
||||||
const next = deepMerge(
|
|
||||||
structuredClone(DEFAULT_CONFIG),
|
|
||||||
deepMerge(loaded, partialConfig)
|
|
||||||
);
|
|
||||||
|
|
||||||
const toSave = {
|
|
||||||
library: next.library,
|
|
||||||
paths: next.paths
|
|
||||||
};
|
|
||||||
|
|
||||||
fs.writeFileSync(CONFIG_PATH, yaml.dump(toSave), 'utf8');
|
|
||||||
return next;
|
|
||||||
}
|
|
||||||
|
|
||||||
function deepMerge(target, source) {
|
|
||||||
for (const key in source) {
|
|
||||||
if (
|
|
||||||
source[key] &&
|
|
||||||
typeof source[key] === 'object' &&
|
|
||||||
!Array.isArray(source[key])
|
|
||||||
) {
|
|
||||||
target[key] = deepMerge(target[key] || {}, source[key]);
|
|
||||||
} else {
|
|
||||||
target[key] = source[key];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return target;
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
ensureConfigFile,
|
|
||||||
getConfig,
|
|
||||||
setConfig,
|
|
||||||
};
|
|
||||||
@@ -1,131 +0,0 @@
|
|||||||
const sqlite3 = require('sqlite3').verbose();
|
|
||||||
const os = require("os");
|
|
||||||
const path = require("path");
|
|
||||||
const fs = require("fs");
|
|
||||||
const {ensureUserDataDB, ensureAnilistSchema, ensureExtensionsTable, ensureCacheTable, ensureFavoritesDB, ensureLocalLibrarySchema } = require('./schemas');
|
|
||||||
|
|
||||||
const databases = new Map();
|
|
||||||
|
|
||||||
const DEFAULT_PATHS = {
|
|
||||||
anilist: path.join(os.homedir(), "WaifuBoards", 'anilist_anime.db'),
|
|
||||||
favorites: path.join(os.homedir(), "WaifuBoards", "favorites.db"),
|
|
||||||
cache: path.join(os.homedir(), "WaifuBoards", "cache.db"),
|
|
||||||
userdata: path.join(os.homedir(), "WaifuBoards", "user_data.db"),
|
|
||||||
local_library: path.join(os.homedir(), "WaifuBoards", "local_library.db")
|
|
||||||
};
|
|
||||||
|
|
||||||
function initDatabase(name = 'anilist', dbPath = null, readOnly = false) {
|
|
||||||
if (databases.has(name)) {
|
|
||||||
return databases.get(name);
|
|
||||||
}
|
|
||||||
|
|
||||||
const finalPath = dbPath || DEFAULT_PATHS[name] || DEFAULT_PATHS.anilist;
|
|
||||||
|
|
||||||
if (name === "favorites") {
|
|
||||||
ensureFavoritesDB(finalPath)
|
|
||||||
.catch(err => console.error("Error creando favorites:", err));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (name === "cache") {
|
|
||||||
const dir = path.dirname(finalPath);
|
|
||||||
if (!fs.existsSync(dir)) {
|
|
||||||
fs.mkdirSync(dir, { recursive: true });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (name === "userdata") {
|
|
||||||
ensureUserDataDB(finalPath)
|
|
||||||
.catch(err => console.error("Error creando userdata:", err));
|
|
||||||
}
|
|
||||||
|
|
||||||
const mode = readOnly ? sqlite3.OPEN_READONLY : (sqlite3.OPEN_READWRITE | sqlite3.OPEN_CREATE);
|
|
||||||
|
|
||||||
const db = new sqlite3.Database(finalPath, mode, (err) => {
|
|
||||||
if (err) {
|
|
||||||
console.error(`Database Error (${name}):`, err.message);
|
|
||||||
} else {
|
|
||||||
console.log(`Connected to ${name} database at ${finalPath}`);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
databases.set(name, db);
|
|
||||||
|
|
||||||
if (name === "local_library") {
|
|
||||||
ensureLocalLibrarySchema(db)
|
|
||||||
.catch(err => console.error("Error creating local library schema:", err));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (name === "anilist") {
|
|
||||||
ensureAnilistSchema(db)
|
|
||||||
.then(() => ensureExtensionsTable(db))
|
|
||||||
.catch(err => console.error("Error creating anilist schema:", err));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (name === "cache") {
|
|
||||||
ensureCacheTable(db)
|
|
||||||
.catch(err => console.error("Error creating cache table:", err));
|
|
||||||
}
|
|
||||||
|
|
||||||
return db;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getDatabase(name = 'anilist') {
|
|
||||||
if (!databases.has(name)) {
|
|
||||||
const readOnly = (name === 'anilist');
|
|
||||||
return initDatabase(name, null, readOnly);
|
|
||||||
}
|
|
||||||
return databases.get(name);
|
|
||||||
}
|
|
||||||
|
|
||||||
function queryOne(sql, params = [], dbName = 'anilist') {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
getDatabase(dbName).get(sql, params, (err, row) => {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve(row);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function queryAll(sql, params = [], dbName = 'anilist') {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
getDatabase(dbName).all(sql, params, (err, rows) => {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve(rows || []);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function run(sql, params = [], dbName = 'anilist') {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
getDatabase(dbName).run(sql, params, function(err) {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve({ changes: this.changes, lastID: this.lastID });
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeDatabase(name = null) {
|
|
||||||
if (name) {
|
|
||||||
const db = databases.get(name);
|
|
||||||
if (db) {
|
|
||||||
db.close();
|
|
||||||
databases.delete(name);
|
|
||||||
console.log(`Closed ${name} database`);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
for (const [dbName, db] of databases) {
|
|
||||||
db.close();
|
|
||||||
console.log(`Closed ${dbName} database`);
|
|
||||||
}
|
|
||||||
databases.clear();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
initDatabase,
|
|
||||||
getDatabase,
|
|
||||||
queryOne,
|
|
||||||
queryAll,
|
|
||||||
run,
|
|
||||||
closeDatabase
|
|
||||||
};
|
|
||||||
@@ -1,145 +0,0 @@
|
|||||||
const fs = require("fs");
|
|
||||||
const { chromium } = require("playwright");
|
|
||||||
const {spawn} = require("node:child_process");
|
|
||||||
|
|
||||||
let browser;
|
|
||||||
const BLOCK_LIST = [
|
|
||||||
"google-analytics", "doubleclick", "facebook", "twitter",
|
|
||||||
"adsystem", "analytics", "tracker", "pixel", "quantserve", "newrelic"
|
|
||||||
];
|
|
||||||
|
|
||||||
function runHidden(cmd, args) {
|
|
||||||
return new Promise((res, rej) => {
|
|
||||||
const p = spawn(cmd, args, {
|
|
||||||
stdio: "ignore",
|
|
||||||
shell: true,
|
|
||||||
windowsHide: true
|
|
||||||
});
|
|
||||||
p.on("exit", c => c === 0 ? res() : rej(new Error("exit " + c)));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function ensureChromiumShell() {
|
|
||||||
const exe = chromium.executablePath();
|
|
||||||
if (exe && fs.existsSync(exe)) return;
|
|
||||||
|
|
||||||
await runHidden("npx", ["playwright", "install", "chromium-headless-shell"]);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function initHeadless() {
|
|
||||||
if (browser) return;
|
|
||||||
|
|
||||||
await ensureChromiumShell();
|
|
||||||
|
|
||||||
browser = await chromium.launch({
|
|
||||||
headless: true,
|
|
||||||
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",
|
|
||||||
]
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
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 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"
|
|
||||||
});
|
|
||||||
|
|
||||||
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 === "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.addInitScript(() => {
|
|
||||||
Object.defineProperty(navigator, "webdriver", { get: () => false });
|
|
||||||
});
|
|
||||||
|
|
||||||
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();
|
|
||||||
await context.close();
|
|
||||||
return { result, requests: collectedRequests };
|
|
||||||
}
|
|
||||||
|
|
||||||
async function closeScraper() {
|
|
||||||
if (browser) await browser.close();
|
|
||||||
browser = null;
|
|
||||||
}
|
|
||||||
module.exports = {
|
|
||||||
initHeadless,
|
|
||||||
scrape,
|
|
||||||
closeScraper
|
|
||||||
};
|
|
||||||
@@ -1,283 +0,0 @@
|
|||||||
const sqlite3 = require('sqlite3').verbose();
|
|
||||||
const path = require("path");
|
|
||||||
const fs = require("fs");
|
|
||||||
|
|
||||||
async function ensureLocalLibrarySchema(db) {
|
|
||||||
await run(db, `
|
|
||||||
CREATE TABLE IF NOT EXISTS local_entries (
|
|
||||||
id TEXT PRIMARY KEY,
|
|
||||||
type TEXT NOT NULL,
|
|
||||||
path TEXT NOT NULL,
|
|
||||||
folder_name TEXT NOT NULL,
|
|
||||||
matched_id INTEGER,
|
|
||||||
matched_source TEXT,
|
|
||||||
last_scan INTEGER NOT NULL
|
|
||||||
)
|
|
||||||
`);
|
|
||||||
|
|
||||||
await run(db, `
|
|
||||||
CREATE TABLE IF NOT EXISTS local_files (
|
|
||||||
id TEXT PRIMARY KEY,
|
|
||||||
entry_id TEXT NOT NULL,
|
|
||||||
file_path TEXT NOT NULL,
|
|
||||||
unit_number INTEGER,
|
|
||||||
FOREIGN KEY (entry_id) REFERENCES local_entries(id)
|
|
||||||
)
|
|
||||||
`);
|
|
||||||
|
|
||||||
await run(db, `
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_local_entries_type
|
|
||||||
ON local_entries(type)
|
|
||||||
`);
|
|
||||||
|
|
||||||
await run(db, `
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_local_entries_matched
|
|
||||||
ON local_entries(matched_id)
|
|
||||||
`);
|
|
||||||
|
|
||||||
await run(db, `
|
|
||||||
CREATE INDEX IF NOT EXISTS idx_local_files_entry
|
|
||||||
ON local_files(entry_id)
|
|
||||||
`);
|
|
||||||
}
|
|
||||||
|
|
||||||
function run(db, sql, params = []) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
db.run(sql, params, err => {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function ensureUserDataDB(dbPath) {
|
|
||||||
const dir = path.dirname(dbPath);
|
|
||||||
|
|
||||||
if (!fs.existsSync(dir)) {
|
|
||||||
fs.mkdirSync(dir, { recursive: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
const db = new sqlite3.Database(
|
|
||||||
dbPath,
|
|
||||||
sqlite3.OPEN_READWRITE | sqlite3.OPEN_CREATE
|
|
||||||
);
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const schema = `
|
|
||||||
CREATE TABLE IF NOT EXISTS User (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
username TEXT NOT NULL UNIQUE,
|
|
||||||
profile_picture_url TEXT,
|
|
||||||
email TEXT UNIQUE,
|
|
||||||
password_hash TEXT,
|
|
||||||
created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS UserIntegration (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
user_id INTEGER NOT NULL UNIQUE,
|
|
||||||
platform TEXT NOT NULL DEFAULT 'AniList',
|
|
||||||
access_token TEXT NOT NULL,
|
|
||||||
refresh_token TEXT NOT NULL,
|
|
||||||
token_type TEXT NOT NULL,
|
|
||||||
anilist_user_id INTEGER NOT NULL,
|
|
||||||
expires_at DATETIME NOT NULL,
|
|
||||||
FOREIGN KEY (user_id) REFERENCES User(id) ON DELETE CASCADE
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS ListEntry (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
user_id INTEGER NOT NULL,
|
|
||||||
entry_id INTEGER NOT NULL,
|
|
||||||
source TEXT NOT NULL,
|
|
||||||
entry_type TEXT NOT NULL,
|
|
||||||
status TEXT NOT NULL,
|
|
||||||
progress INTEGER NOT NULL DEFAULT 0,
|
|
||||||
score INTEGER,
|
|
||||||
|
|
||||||
start_date DATE,
|
|
||||||
end_date DATE,
|
|
||||||
repeat_count INTEGER NOT NULL DEFAULT 0,
|
|
||||||
notes TEXT,
|
|
||||||
is_private BOOLEAN NOT NULL DEFAULT 0,
|
|
||||||
updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
UNIQUE (user_id, entry_id),
|
|
||||||
FOREIGN KEY (user_id) REFERENCES User(id) ON DELETE CASCADE
|
|
||||||
);
|
|
||||||
`;
|
|
||||||
|
|
||||||
db.exec(schema, (err) => {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function ensureAnilistSchema(db) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const schema = `
|
|
||||||
CREATE TABLE IF NOT EXISTS anime (
|
|
||||||
id INTEGER PRIMARY KEY,
|
|
||||||
title TEXT,
|
|
||||||
updatedAt INTEGER,
|
|
||||||
cache_created_at INTEGER DEFAULT 0,
|
|
||||||
cache_ttl_ms INTEGER DEFAULT 0,
|
|
||||||
full_data JSON
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS trending (
|
|
||||||
rank INTEGER PRIMARY KEY,
|
|
||||||
id INTEGER,
|
|
||||||
full_data JSON,
|
|
||||||
updated_at INTEGER NOT NULL DEFAULT 0
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS top_airing (
|
|
||||||
rank INTEGER PRIMARY KEY,
|
|
||||||
id INTEGER,
|
|
||||||
full_data JSON,
|
|
||||||
updated_at INTEGER NOT NULL DEFAULT 0
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS books (
|
|
||||||
id INTEGER PRIMARY KEY,
|
|
||||||
title TEXT,
|
|
||||||
updatedAt INTEGER,
|
|
||||||
full_data JSON
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS trending_books (
|
|
||||||
rank INTEGER PRIMARY KEY,
|
|
||||||
id INTEGER,
|
|
||||||
full_data JSON,
|
|
||||||
updated_at INTEGER NOT NULL DEFAULT 0
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS popular_books (
|
|
||||||
rank INTEGER PRIMARY KEY,
|
|
||||||
id INTEGER,
|
|
||||||
full_data JSON,
|
|
||||||
updated_at INTEGER NOT NULL DEFAULT 0
|
|
||||||
);
|
|
||||||
`;
|
|
||||||
|
|
||||||
db.exec(schema, (err) => {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function ensureExtensionsTable(db) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
db.exec(`
|
|
||||||
CREATE TABLE IF NOT EXISTS extension (
|
|
||||||
ext_name TEXT NOT NULL,
|
|
||||||
id TEXT NOT NULL,
|
|
||||||
title TEXT NOT NULL,
|
|
||||||
metadata TEXT NOT NULL,
|
|
||||||
updated_at INTEGER NOT NULL,
|
|
||||||
PRIMARY KEY(ext_name, id)
|
|
||||||
);
|
|
||||||
`, (err) => {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function ensureCacheTable(db) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
db.exec(`
|
|
||||||
CREATE TABLE IF NOT EXISTS cache (
|
|
||||||
key TEXT PRIMARY KEY,
|
|
||||||
result TEXT NOT NULL,
|
|
||||||
created_at INTEGER NOT NULL,
|
|
||||||
ttl_ms INTEGER NOT NULL
|
|
||||||
);
|
|
||||||
`, (err) => {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function ensureFavoritesDB(dbPath) {
|
|
||||||
const dir = path.dirname(dbPath);
|
|
||||||
|
|
||||||
if (!fs.existsSync(dir)) {
|
|
||||||
fs.mkdirSync(dir, { recursive: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
const exists = fs.existsSync(dbPath);
|
|
||||||
|
|
||||||
const db = new sqlite3.Database(
|
|
||||||
dbPath,
|
|
||||||
sqlite3.OPEN_READWRITE | sqlite3.OPEN_CREATE
|
|
||||||
);
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
if (!exists) {
|
|
||||||
const schema = `
|
|
||||||
CREATE TABLE IF NOT EXISTS favorites (
|
|
||||||
id TEXT NOT NULL,
|
|
||||||
user_id INTEGER NOT NULL,
|
|
||||||
title TEXT NOT NULL,
|
|
||||||
image_url TEXT NOT NULL,
|
|
||||||
thumbnail_url TEXT NOT NULL DEFAULT "",
|
|
||||||
tags TEXT NOT NULL DEFAULT "",
|
|
||||||
headers TEXT NOT NULL DEFAULT "",
|
|
||||||
provider TEXT NOT NULL DEFAULT "",
|
|
||||||
PRIMARY KEY (id, user_id)
|
|
||||||
);
|
|
||||||
`;
|
|
||||||
|
|
||||||
db.exec(schema, (err) => {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
db.all(`PRAGMA table_info(favorites)`, (err, cols) => {
|
|
||||||
if (err) return reject(err);
|
|
||||||
|
|
||||||
const hasHeaders = cols.some(c => c.name === "headers");
|
|
||||||
const hasProvider = cols.some(c => c.name === "provider");
|
|
||||||
const hasUserId = cols.some(c => c.name === "user_id");
|
|
||||||
|
|
||||||
const queries = [];
|
|
||||||
|
|
||||||
if (!hasHeaders) {
|
|
||||||
queries.push(`ALTER TABLE favorites ADD COLUMN headers TEXT NOT NULL DEFAULT ""`);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!hasProvider) {
|
|
||||||
queries.push(`ALTER TABLE favorites ADD COLUMN provider TEXT NOT NULL DEFAULT ""`);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!hasUserId) {
|
|
||||||
queries.push(`ALTER TABLE favorites ADD COLUMN user_id INTEGER NOT NULL DEFAULT 1`);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (queries.length === 0) {
|
|
||||||
return resolve(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
db.exec(queries.join(";"), (err) => {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
ensureUserDataDB,
|
|
||||||
ensureAnilistSchema,
|
|
||||||
ensureExtensionsTable,
|
|
||||||
ensureCacheTable,
|
|
||||||
ensureFavoritesDB,
|
|
||||||
ensureLocalLibrarySchema
|
|
||||||
};
|
|
||||||
@@ -1,181 +0,0 @@
|
|||||||
import {FastifyInstance, FastifyReply, FastifyRequest} from 'fastify';
|
|
||||||
import * as fs from 'fs';
|
|
||||||
import * as path from 'path';
|
|
||||||
|
|
||||||
let cachedTitlebar: string | null = null;
|
|
||||||
|
|
||||||
function getTitlebarHTML(): string {
|
|
||||||
if (!cachedTitlebar) {
|
|
||||||
|
|
||||||
const titlebarPath = path.join(__dirname, '..', '..', 'views', 'components', 'titlebar.html');
|
|
||||||
cachedTitlebar = fs.readFileSync(titlebarPath, 'utf-8');
|
|
||||||
}
|
|
||||||
return cachedTitlebar;
|
|
||||||
}
|
|
||||||
|
|
||||||
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 = ['search', '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 injectLayout(htmlContent: string, activePage: string | null = null, showSearch: boolean = true): string {
|
|
||||||
let contentToInject = getTitlebarHTML();
|
|
||||||
|
|
||||||
if (activePage !== null) {
|
|
||||||
const navbar = getNavbarHTML(activePage, showSearch);
|
|
||||||
contentToInject += `\n${navbar}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return htmlContent.replace(/<body[^>]*>/, `$&\n${contentToInject}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
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');
|
|
||||||
|
|
||||||
const finalHtml = injectLayout(html, null);
|
|
||||||
reply.type('text/html').send(finalHtml);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/anime', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'animes.html');
|
|
||||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
|
||||||
const finalHtml = injectLayout(html, 'anime', true);
|
|
||||||
reply.type('text/html').send(finalHtml);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/search', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'search.html');
|
|
||||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
|
||||||
const finalHtml = injectLayout(html, 'search', false);
|
|
||||||
reply.type('text/html').send(finalHtml);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/profile', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'profile.html');
|
|
||||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
|
||||||
const finalHtml = injectLayout(html, '', false);
|
|
||||||
reply.type('text/html').send(finalHtml);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/books', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'books.html');
|
|
||||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
|
||||||
const finalHtml = injectLayout(html, 'books', true);
|
|
||||||
reply.type('text/html').send(finalHtml);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/schedule', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'schedule.html');
|
|
||||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
|
||||||
const finalHtml = injectLayout(html, 'schedule', false);
|
|
||||||
reply.type('text/html').send(finalHtml);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/gallery', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'gallery', 'gallery.html');
|
|
||||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
|
||||||
const finalHtml = injectLayout(html, 'gallery', true);
|
|
||||||
reply.type('text/html').send(finalHtml);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/marketplace', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'marketplace.html');
|
|
||||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
|
||||||
const finalHtml = injectLayout(html, 'marketplace', false);
|
|
||||||
reply.type('text/html').send(finalHtml);
|
|
||||||
});
|
|
||||||
|
|
||||||
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 finalHtml = injectLayout(html, 'gallery', true);
|
|
||||||
reply.type('text/html').send(finalHtml);
|
|
||||||
});
|
|
||||||
|
|
||||||
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 finalHtml = injectLayout(html, 'gallery', true);
|
|
||||||
reply.type('text/html').send(finalHtml);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/anime/:id', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html');
|
|
||||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
|
||||||
|
|
||||||
const finalHtml = injectLayout(html, null);
|
|
||||||
reply.type('text/html').send(finalHtml);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/anime/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html');
|
|
||||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
|
||||||
const finalHtml = injectLayout(html, null);
|
|
||||||
reply.type('text/html').send(finalHtml);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/book/:id', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
|
|
||||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
|
||||||
const finalHtml = injectLayout(html, null);
|
|
||||||
reply.type('text/html').send(finalHtml);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/book/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
|
|
||||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
|
||||||
const finalHtml = injectLayout(html, null);
|
|
||||||
reply.type('text/html').send(finalHtml);
|
|
||||||
});
|
|
||||||
|
|
||||||
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');
|
|
||||||
|
|
||||||
const finalHtml = injectLayout(html, null);
|
|
||||||
reply.type('text/html').send(finalHtml);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/room', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const htmlPath = path.join(__dirname, '..', '..', 'views', 'room.html');
|
|
||||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
|
||||||
const finalHtml = injectLayout(html, null);
|
|
||||||
reply.type('text/html').send(finalHtml);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.setNotFoundHandler((req, reply) => {
|
|
||||||
const htmlPath = path.join(__dirname, '..', '..', 'views', '404.html');
|
|
||||||
const html = fs.readFileSync(htmlPath, 'utf-8');
|
|
||||||
const finalHtml = injectLayout(html, null);
|
|
||||||
reply.code(404).type('text/html').send(finalHtml);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export default viewsRoutes;
|
|
||||||
@@ -1,127 +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>
|
|
||||||
|
|
||||||
<nav class="navbar" id="navbar">
|
|
||||||
<a href="#" class="nav-brand">
|
|
||||||
<div class="brand-icon">
|
|
||||||
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
|
|
||||||
</div>
|
|
||||||
WaifuBoard
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="nav-center">
|
|
||||||
<button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-right">
|
|
||||||
<div class="search-wrapper" style="visibility: hidden;">
|
|
||||||
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<circle cx="11" cy="11" r="8"/>
|
|
||||||
<path d="M21 21l-4.35-4.35"/>
|
|
||||||
</svg>
|
|
||||||
<input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
|
|
||||||
<div class="search-results" id="search-results"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-user" id="nav-user" style="display:none;">
|
|
||||||
<div class="user-avatar-btn">
|
|
||||||
<img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
|
|
||||||
<div class="online-indicator"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-dropdown" id="nav-dropdown">
|
|
||||||
<div class="dropdown-header">
|
|
||||||
<img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
|
|
||||||
<div class="dropdown-user-info">
|
|
||||||
<div class="dropdown-username" id="nav-username"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a href="/my-list" class="dropdown-item">
|
|
||||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
|
|
||||||
<polyline points="17 21 17 13 7 13 7 21"/>
|
|
||||||
<polyline points="7 3 7 8 15 8"/>
|
|
||||||
</svg>
|
|
||||||
<span>My List</span>
|
|
||||||
</a>
|
|
||||||
<button class="dropdown-item logout-item" id="nav-logout">
|
|
||||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
|
|
||||||
<polyline points="16 17 21 12 16 7"/>
|
|
||||||
<line x1="21" y1="12" x2="9" y2="12"/>
|
|
||||||
</svg>
|
|
||||||
<span>Logout</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<main class="error-container">
|
|
||||||
<div>
|
|
||||||
<h1 class="error-code">404</h1>
|
|
||||||
<p class="error-message">
|
|
||||||
This page doesn’t exist.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="error-actions">
|
|
||||||
<button class="btn-primary" onclick="location.href='/'">Home</button>
|
|
||||||
<button class="btn-blur" onclick="history.back()">Back</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,304 +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">
|
|
||||||
<script src="/src/scripts/titlebar.js"></script>
|
|
||||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<a href="/anime" class="back-btn">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
|
|
||||||
</svg>
|
|
||||||
Back
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="modal-overlay" id="desc-modal">
|
|
||||||
<div class="modal-content">
|
|
||||||
<button class="modal-close" onclick="closeDescriptionModal()">✕</button>
|
|
||||||
<h2 class="modal-title">Synopsis</h2>
|
|
||||||
<div class="modal-text" id="full-description"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="top-media-wrapper" id="top-media-wrapper">
|
|
||||||
|
|
||||||
<div class="hero-wrapper" id="hero-wrapper">
|
|
||||||
<div class="video-background"><div id="trailer-player"></div></div>
|
|
||||||
<div class="hero-overlay"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="player-wrapper" id="player-wrapper" style="display: none;">
|
|
||||||
<div class="player-container">
|
|
||||||
<!-- Side Navigation Buttons -->
|
|
||||||
<button id="prev-ep-btn" class="side-nav-btn left" title="Previous Episode">
|
|
||||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<path d="M15 18l-6-6 6-6"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button id="next-ep-btn" class="side-nav-btn right" title="Next Episode">
|
|
||||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<path d="M9 18l6-6-6-6"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Header Controls -->
|
|
||||||
<div class="player-header">
|
|
||||||
<div class="header-left">
|
|
||||||
<button class="btn-icon-glass" id="close-player-btn" title="Close Player">
|
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<path d="M19 12H5"/>
|
|
||||||
<path d="M12 19l-7-7 7-7"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<div class="episode-info">
|
|
||||||
<span class="ep-label">Watching</span>
|
|
||||||
<span id="player-episode-title" class="ep-title">Episode 1</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="header-right">
|
|
||||||
<button class="btn-icon-glass" id="download-btn" title="Download Episode" style="display: none;">
|
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
|
||||||
<polyline points="7 10 12 15 17 10"></polyline>
|
|
||||||
<line x1="12" y1="15" x2="12" y2="3"></line>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="settings-group">
|
|
||||||
<button class="btn-icon-glass" id="manual-match-btn" title="Manual Match" style="display: none;">
|
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
|
|
||||||
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button id="mpv-btn" class="glass-btn-mpv" title="Open in MPV">
|
|
||||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
|
||||||
<path d="M5 3l14 9-14 9V3z"></path>
|
|
||||||
</svg>
|
|
||||||
<span>MPV</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="sd-toggle" id="sd-toggle" data-state="sub">
|
|
||||||
<div class="sd-bg"></div>
|
|
||||||
<div class="sd-option active" id="opt-sub">Sub</div>
|
|
||||||
<div class="sd-option" id="opt-dub">Dub</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<select id="server-select" class="glass-select" style="display:none;"></select>
|
|
||||||
<select id="extension-select" class="glass-select"></select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Video Frame -->
|
|
||||||
<div class="video-frame">
|
|
||||||
<video id="player" crossorigin playsinline></video>
|
|
||||||
<canvas id="subtitles-canvas"></canvas>
|
|
||||||
|
|
||||||
<div id="player-loading" class="player-loading-overlay">
|
|
||||||
<div class="spinner"></div>
|
|
||||||
<p id="player-loading-text">Loading Stream...</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Skip Overlay Button -->
|
|
||||||
<button id="skip-overlay-btn">
|
|
||||||
Skip Intro
|
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
|
||||||
<path d="M13 17l5-5-5-5M6 17l5-5-5-5"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Custom Controls -->
|
|
||||||
<div class="custom-controls">
|
|
||||||
<div class="controls-gradient"></div>
|
|
||||||
|
|
||||||
<!-- Progress Bar -->
|
|
||||||
<div class="progress-container">
|
|
||||||
<div class="progress-buffer"></div>
|
|
||||||
<div class="progress-played"></div>
|
|
||||||
<div class="progress-handle"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Controls Row -->
|
|
||||||
<div class="controls-row">
|
|
||||||
<div class="controls-left">
|
|
||||||
<button class="control-btn play-pause" id="play-pause-btn" title="Play/Pause (Space)">
|
|
||||||
<svg viewBox="0 0 24 24">
|
|
||||||
<path d="M8 5v14l11-7z"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="volume-control">
|
|
||||||
<button class="control-btn" id="volume-btn" title="Mute (M)">
|
|
||||||
<svg viewBox="0 0 24 24">
|
|
||||||
<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<div class="volume-slider-container">
|
|
||||||
<input type="range" class="volume-slider" id="volume-slider" min="0" max="100" value="100">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span class="time-display" id="time-display">0:00 / 0:00</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="controls-center">
|
|
||||||
<!-- Center space for future controls -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="controls-right">
|
|
||||||
<button class="control-btn" id="settings-btn" title="Settings">
|
|
||||||
<svg viewBox="0 0 24 24">
|
|
||||||
<path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="control-btn" id="fullscreen-btn" title="Fullscreen (F)">
|
|
||||||
<svg viewBox="0 0 24 24">
|
|
||||||
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Settings Panel -->
|
|
||||||
<div class="settings-panel" id="settings-panel">
|
|
||||||
<!-- Populated dynamically by JS -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-container" id="main-content">
|
|
||||||
<div class="anime-header">
|
|
||||||
<h1 class="anime-title" id="title">Loading...</h1>
|
|
||||||
<div class="hero-meta-info">
|
|
||||||
<span id="local-pill" class="pill-local" style="display:none;">Local</span>
|
|
||||||
<span id="extension-pill" class="pill-local" style="background:#8b5cf6; display:none;">Ext</span>
|
|
||||||
<span id="score">--% Score</span> • <span id="year">----</span> • <span id="format">--</span> • <span id="episodes">-- Ep</span>
|
|
||||||
</div>
|
|
||||||
<div class="hero-description-mini" id="description-preview"></div>
|
|
||||||
<div class="hero-tags" id="genres"></div>
|
|
||||||
|
|
||||||
<div class="action-row">
|
|
||||||
<button class="btn-watch" id="watch-btn">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="black"><path d="M8 5v14l11-7z"/></svg>
|
|
||||||
Start Watching
|
|
||||||
</button>
|
|
||||||
<button class="btn-add-list" id="add-to-list-btn">+ Add to List</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="main-layout">
|
|
||||||
<aside class="poster-section">
|
|
||||||
<div class="poster-card"><img id="poster" src="" alt="Poster"></div>
|
|
||||||
<div class="metadata-sidebar">
|
|
||||||
<div class="meta-item-side"><span>Status</span><p id="status">--</p></div>
|
|
||||||
<div class="meta-item-side"><span>Season</span><p id="season">--</p></div>
|
|
||||||
<div class="meta-item-side"><span>Studio</span><p id="studio">--</p></div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<div class="content-column">
|
|
||||||
|
|
||||||
<section class="episodes-section">
|
|
||||||
<div class="episodes-header-row">
|
|
||||||
<h2>Episodes</h2>
|
|
||||||
<input type="number" id="ep-search" class="episode-search-input" placeholder="Jump to...">
|
|
||||||
</div>
|
|
||||||
<div id="episodes-grid" class="episodes-grid"></div>
|
|
||||||
|
|
||||||
<div class="pagination-controls" id="pagination-controls">
|
|
||||||
<button class="page-btn" id="prev-page">Previous</button>
|
|
||||||
<span class="page-info" id="page-info">Page 1 of 1</span>
|
|
||||||
<button class="page-btn" id="next-page">Next</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div id="relations-section" style="display:none; margin-top: 3rem;">
|
|
||||||
<h3 class="subsection-title">Relations</h3>
|
|
||||||
<div class="relations-horizontal" id="relations-grid"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<section class="content-section">
|
|
||||||
<h2 class="subsection-title">Characters</h2>
|
|
||||||
<div class="characters-grid" id="char-list"></div>
|
|
||||||
<button id="show-more-chars" class="btn-show-more" style="display: none;">Show Full Cast</button>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="content-section">
|
|
||||||
<h2 class="subsection-title">Recommended</h2>
|
|
||||||
<div class="carousel-wrapper">
|
|
||||||
<button class="scroll-btn left" onclick="scrollRecommendations(-1)">‹</button>
|
|
||||||
<div class="carousel" id="recommendations-grid"></div>
|
|
||||||
<button class="scroll-btn right" onclick="scrollRecommendations(1)">›</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-overlay" id="download-modal">
|
|
||||||
<div class="modal-content download-settings-content">
|
|
||||||
<button class="modal-close" id="close-download-modal">✕</button>
|
|
||||||
<h2 class="modal-title">Download Settings</h2>
|
|
||||||
|
|
||||||
<div class="download-sections-wrapper">
|
|
||||||
<div id="dl-quality-section" class="dl-section" style="display:none;">
|
|
||||||
<h3>Video Quality</h3>
|
|
||||||
<div class="dl-list" id="dl-quality-list"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="dl-audio-section" class="dl-section" style="display:none;">
|
|
||||||
<h3>Audio Tracks</h3>
|
|
||||||
<div class="dl-list" id="dl-audio-list"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="dl-subs-section" class="dl-section">
|
|
||||||
<h3>Subtitles</h3>
|
|
||||||
<div class="dl-list" id="dl-subs-list"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="dl-actions">
|
|
||||||
<button class="btn-cancel" id="cancel-dl-btn">Cancel</button>
|
|
||||||
<button class="btn-confirm" id="confirm-dl-btn">Start Download</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
|
||||||
<script src="/src/scripts/auth-guard.js"></script>
|
|
||||||
<script src="/src/scripts/utils/url-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/pagination-manager.js"></script>
|
|
||||||
<script src="/src/scripts/utils/media-metadata-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/youtube-player-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/list-modal-manager.js"></script>
|
|
||||||
<script src="/src/scripts/utils/match-modal.js"></script>
|
|
||||||
<script src="/src/scripts/anime/subtitle-renderer.js"></script>
|
|
||||||
|
|
||||||
<script src="/src/scripts/anime/player.js"></script>
|
|
||||||
<script src="/src/scripts/anime/entry.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,129 +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 class="hero-wrapper">
|
|
||||||
<div class="hero-background">
|
|
||||||
<img id="hero-bg-media" alt="">
|
|
||||||
<div id="player" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120vw; height: 120vh; pointer-events: none; opacity: 0; transition: opacity 1s;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="hero-vignette"></div>
|
|
||||||
|
|
||||||
<div class="hero-content">
|
|
||||||
<div class="hero-poster-card">
|
|
||||||
<div class="skeleton poster-skeleton" id="hero-poster-skeleton"></div>
|
|
||||||
<img id="hero-poster" alt="" style="display: none;" onload="this.style.display='block'; document.getElementById('hero-poster-skeleton').style.display='none'">
|
|
||||||
</div>
|
|
||||||
<div class="hero-text">
|
|
||||||
<div id="hero-loading-ui">
|
|
||||||
<div class="skeleton title-skeleton"></div>
|
|
||||||
<div class="skeleton text-skeleton" style="width: 40%"></div>
|
|
||||||
<div class="skeleton text-skeleton" style="width: 100%; height: 4em;"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="hero-real-ui" style="display: none;">
|
|
||||||
<h1 class="hero-title" id="hero-title"></h1>
|
|
||||||
<div class="hero-meta">
|
|
||||||
<span class="score-badge" id="hero-score"></span>
|
|
||||||
<span id="hero-year"></span>
|
|
||||||
<span id="hero-type"></span>
|
|
||||||
</div>
|
|
||||||
<p class="hero-desc" id="hero-desc"></p>
|
|
||||||
<div class="hero-buttons">
|
|
||||||
<button class="btn-primary" id="watch-btn">Watch Now</button>
|
|
||||||
<button class="btn-blur">+ Add to List</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button class="library-mode-btn icon-only" id="library-mode-btn" onclick="toggleLibraryMode()" title="Switch library mode">
|
|
||||||
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
|
||||||
<polyline points="9 22 9 12 15 12 15 22"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Online Mode Content -->
|
|
||||||
<main id="online-content">
|
|
||||||
<section class="section">
|
|
||||||
<div class="section-header">
|
|
||||||
<div class="section-title">Continue watching</div>
|
|
||||||
</div>
|
|
||||||
<div class="carousel-wrapper">
|
|
||||||
<button class="scroll-btn left" onclick="scrollCarousel('my-status', -1)">‹</button>
|
|
||||||
<div class="carousel" id="my-status">
|
|
||||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
|
||||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
|
||||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
|
||||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
|
||||||
</div>
|
|
||||||
<button class="scroll-btn right" onclick="scrollCarousel('my-status', 1)">›</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section">
|
|
||||||
<div class="section-header"><div class="section-title">Trending This Season</div></div>
|
|
||||||
<div class="carousel-wrapper">
|
|
||||||
<button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button>
|
|
||||||
<div class="carousel" id="trending">
|
|
||||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
|
||||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
|
||||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
|
||||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
|
||||||
</div>
|
|
||||||
<button class="scroll-btn right" onclick="scrollCarousel('trending', 1)">›</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section">
|
|
||||||
<div class="section-header"><div class="section-title">Top Airing Now</div></div>
|
|
||||||
<div class="carousel-wrapper">
|
|
||||||
<button class="scroll-btn left" onclick="scrollCarousel('top-airing', -1)">‹</button>
|
|
||||||
<div class="carousel" id="top-airing">
|
|
||||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
|
||||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
|
||||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
|
||||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
|
||||||
</div>
|
|
||||||
<button class="scroll-btn right" onclick="scrollCarousel('top-airing', 1)">›</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<div id="updateToast" class="hidden">
|
|
||||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
|
||||||
<a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">
|
|
||||||
Click To Download
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
|
||||||
<script src="/src/scripts/room-modal.js"></script>
|
|
||||||
<script src="/src/scripts/utils/notification-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/search-manager.js"></script>
|
|
||||||
<script src="/src/scripts/utils/list-modal-manager.js"></script>
|
|
||||||
<script src="/src/scripts/utils/continue-watching-manager.js"></script>
|
|
||||||
<script src="/src/scripts/utils/youtube-player-utils.js"></script>
|
|
||||||
<script src="/src/scripts/anime/animes.js"></script>
|
|
||||||
<script src="/src/scripts/updateNotifier.js"></script>
|
|
||||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
|
||||||
<script src="/src/scripts/auth-guard.js"></script>
|
|
||||||
<script src="/src/scripts/settings.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,154 +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>
|
|
||||||
<a href="/books" class="back-btn">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
|
|
||||||
</svg>
|
|
||||||
Back
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="hero-wrapper">
|
|
||||||
<div class="hero-background">
|
|
||||||
<img id="hero-bg" src="" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="hero-overlay"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-container">
|
|
||||||
|
|
||||||
<div class="book-header-section">
|
|
||||||
<h1 class="book-title" id="title">Loading...</h1>
|
|
||||||
|
|
||||||
<div class="hero-meta-info">
|
|
||||||
<span id="local-pill" class="pill-local" style="display:none;">Local</span>
|
|
||||||
<span id="extension-pill" class="pill-local" style="background:#8b5cf6; display:none;">Ext</span>
|
|
||||||
|
|
||||||
<span id="score">--% Score</span>
|
|
||||||
<span class="meta-separator">•</span>
|
|
||||||
<span id="published-date">----</span>
|
|
||||||
<span class="meta-separator">•</span>
|
|
||||||
<span id="status">--</span>
|
|
||||||
<span class="meta-separator">•</span>
|
|
||||||
<span id="format">--</span>
|
|
||||||
<span class="meta-separator">•</span>
|
|
||||||
<span id="chapters-count">-- Ch</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hero-description-mini" id="description"></div>
|
|
||||||
<div class="hero-tags" id="genres"></div>
|
|
||||||
|
|
||||||
<div class="action-row">
|
|
||||||
<button class="btn-read" id="read-start-btn">
|
|
||||||
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M2 9v12h5v-9h8v9h5v-12h2l-10 -9 -10 9z" transform="scale(0.8) translate(3,3)"/></svg>
|
|
||||||
Start Reading
|
|
||||||
</button>
|
|
||||||
<button class="btn-add-list" id="add-to-list-btn">+ Add to Library</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="main-layout">
|
|
||||||
|
|
||||||
<aside class="poster-section">
|
|
||||||
<div class="poster-card">
|
|
||||||
<img id="poster" src="" alt="">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sidebar-extra-info" id="sidebar-info" style="display: none;">
|
|
||||||
<h4 class="sidebar-label">Alternative Titles</h4>
|
|
||||||
<ul class="synonyms-list" id="synonyms-list">
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<div class="content-column">
|
|
||||||
|
|
||||||
<div class="chapters-section">
|
|
||||||
<div class="chapters-header">
|
|
||||||
<h2>Chapters</h2>
|
|
||||||
|
|
||||||
<div class="chapter-controls">
|
|
||||||
<button id="manual-match-btn" class="glass-btn-icon" style="display: none;" title="Manual Match">
|
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
|
|
||||||
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<select id="provider-filter" class="glass-select" style="display: none;">
|
|
||||||
<option value="all">All Providers</option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<div id="language-selector-container" class="control-group hidden">
|
|
||||||
<select id="language-select" class="glass-select"></select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="search-box">
|
|
||||||
<input type="text" id="chapter-search" placeholder="Search..." class="glass-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button id="sort-btn" class="glass-btn-icon" title="Sort">
|
|
||||||
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="chapters-list" class="chapters-grid"></div>
|
|
||||||
<div id="loading-msg" style="text-align: center; padding: 2rem; display: none; color: #888;">Loading...</div>
|
|
||||||
|
|
||||||
<div class="pagination-controls" id="pagination" style="display:none;">
|
|
||||||
<button class="page-btn" id="prev-page">Previous</button>
|
|
||||||
<span class="page-info" id="page-info">Page 1</span>
|
|
||||||
<button class="page-btn" id="next-page">Next</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="relations-section" style="display:none; margin-top: 3rem;">
|
|
||||||
<h3 class="subsection-title">Relations</h3>
|
|
||||||
<div class="relations-horizontal" id="relations-list"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<section class="content-section">
|
|
||||||
<h2 class="subsection-title">Characters</h2>
|
|
||||||
<div class="characters-grid" id="characters-list"></div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="updateToast" class="hidden">
|
|
||||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
|
||||||
<a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">Click To Download</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="/src/scripts/updateNotifier.js"></script>
|
|
||||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/notification-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/url-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/pagination-manager.js"></script>
|
|
||||||
<script src="/src/scripts/utils/media-metadata-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/list-modal-manager.js"></script>
|
|
||||||
<script src="/src/scripts/utils/match-modal.js"></script>
|
|
||||||
<script src="/src/scripts/books/book.js"></script>
|
|
||||||
<script src="/src/scripts/auth-guard.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,105 +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 class="hero-wrapper">
|
|
||||||
<div class="hero-background">
|
|
||||||
<img id="hero-bg-media" src="" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="hero-vignette"></div>
|
|
||||||
|
|
||||||
<div class="hero-content">
|
|
||||||
<div class="hero-poster-card">
|
|
||||||
<img id="hero-poster" src="" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="hero-text">
|
|
||||||
<h1 class="hero-title" id="hero-title">Loading...</h1>
|
|
||||||
<div class="hero-meta">
|
|
||||||
<span class="score-badge" id="hero-score"></span>
|
|
||||||
<span id="hero-year"></span>
|
|
||||||
<span id="hero-type"></span>
|
|
||||||
</div>
|
|
||||||
<p class="hero-desc" id="hero-desc"></p>
|
|
||||||
<div class="hero-buttons">
|
|
||||||
<button class="btn-primary" id="read-btn">Read Now</button>
|
|
||||||
<button class="btn-blur">+ Add to Library</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button class="library-mode-btn icon-only" id="library-mode-btn" onclick="toggleLibraryMode()" title="Switch library mode">
|
|
||||||
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
|
||||||
<polyline points="9 22 9 12 15 12 15 22"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<main id="online-content">
|
|
||||||
<section class="section">
|
|
||||||
<div class="section-header">
|
|
||||||
<div class="section-title">Continue Reading</div>
|
|
||||||
</div>
|
|
||||||
<div class="carousel-wrapper">
|
|
||||||
<button class="scroll-btn left" onclick="scrollCarousel('my-status-books', -1)">‹</button>
|
|
||||||
<div class="carousel" id="my-status-books"></div>
|
|
||||||
<button class="scroll-btn right" onclick="scrollCarousel('my-status-books', 1)">›</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section">
|
|
||||||
<div class="section-header"><div class="section-title">Trending Books</div></div>
|
|
||||||
<div class="carousel-wrapper">
|
|
||||||
<button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button>
|
|
||||||
<div class="carousel" id="trending"></div>
|
|
||||||
<button class="scroll-btn right" onclick="scrollCarousel('trending', 1)">›</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section">
|
|
||||||
<div class="section-header"><div class="section-title">All Time Popular</div></div>
|
|
||||||
<div class="carousel-wrapper">
|
|
||||||
<button class="scroll-btn left" onclick="scrollCarousel('popular', -1)">‹</button>
|
|
||||||
<div class="carousel" id="popular"></div>
|
|
||||||
<button class="scroll-btn right" onclick="scrollCarousel('popular', 1)">›</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<div id="updateToast" class="hidden">
|
|
||||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
|
||||||
|
|
||||||
<a
|
|
||||||
id="downloadButton"
|
|
||||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Click To Download
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
|
||||||
<script src="/src/scripts/room-modal.js"></script>
|
|
||||||
<script src="/src/scripts/utils/notification-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/search-manager.js"></script>
|
|
||||||
<script src="/src/scripts/utils/list-modal-manager.js"></script>
|
|
||||||
<script src="/src/scripts/utils/continue-watching-manager.js"></script>
|
|
||||||
<script src="/src/scripts/books/books.js"></script>
|
|
||||||
<script src="/src/scripts/updateNotifier.js"></script>
|
|
||||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
|
||||||
<script src="/src/scripts/auth-guard.js"></script>
|
|
||||||
<script src="/src/scripts/settings.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,66 +0,0 @@
|
|||||||
<div class="modal-overlay" id="add-list-modal">
|
|
||||||
<div class="modal-content modal-list">
|
|
||||||
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
|
|
||||||
<h2 class="modal-title" id="modal-title">Add to List</h2>
|
|
||||||
|
|
||||||
<div class="modal-body">
|
|
||||||
<div class="modal-fields-grid">
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Status</label>
|
|
||||||
<select id="entry-status" class="form-input">
|
|
||||||
<option value="CURRENT">Watching/Reading</option>
|
|
||||||
<option value="COMPLETED">Completed</option>
|
|
||||||
<option value="PLANNING">Planning</option>
|
|
||||||
<option value="PAUSED">Paused</option>
|
|
||||||
<option value="DROPPED">Dropped</option>
|
|
||||||
<option value="REPEATING">Rewatching</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Episodes Watched</label>
|
|
||||||
<input type="number" id="entry-progress" class="form-input" min="0" placeholder="0">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Your Score (0-10)</label>
|
|
||||||
<input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group full-width">
|
|
||||||
<div class="date-group">
|
|
||||||
<div class="date-input-pair">
|
|
||||||
<label for="entry-start-date">Start Date</label>
|
|
||||||
<input type="date" id="entry-start-date" class="form-input">
|
|
||||||
</div>
|
|
||||||
<div class="date-input-pair">
|
|
||||||
<label for="entry-end-date">End Date</label>
|
|
||||||
<input type="date" id="entry-end-date" class="form-input">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="entry-repeat-count">Rewatch Count</label>
|
|
||||||
<input type="number" id="entry-repeat-count" class="form-input" min="0">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group notes-group">
|
|
||||||
<label for="entry-notes">Notes</label>
|
|
||||||
<textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group checkbox-group">
|
|
||||||
<input type="checkbox" id="entry-is-private" class="form-checkbox">
|
|
||||||
<label for="entry-is-private">Mark as Private</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-actions">
|
|
||||||
<button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
|
|
||||||
<button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
|
|
||||||
<button class="btn-primary" onclick="saveToList()">Save Changes</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@@ -1,92 +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="search" onclick="window.location.href='/search'">
|
|
||||||
<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<button class="nav-button" data-page="anime" onclick="window.location.href='/anime'">Anime</button>
|
|
||||||
<button class="nav-button" data-page="books" onclick="window.location.href='/books'">Books</button>
|
|
||||||
<button class="nav-button" data-page="gallery" onclick="window.location.href='/gallery'">Gallery</button>
|
|
||||||
<button class="nav-button" data-page="schedule" onclick="window.location.href='/schedule'">Schedule</button>
|
|
||||||
<button class="nav-button" data-page="marketplace" onclick="window.location.href='/marketplace'">Marketplace</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-right">
|
|
||||||
<div class="search-wrapper">
|
|
||||||
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<circle cx="11" cy="11" r="8"/>
|
|
||||||
<path d="M21 21l-4.35-4.35"/>
|
|
||||||
</svg>
|
|
||||||
<input type="text" class="search-input" id="search-input" placeholder="Search..." autocomplete="off">
|
|
||||||
<div class="search-results" id="search-results"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-user" id="nav-user" style="display:none;">
|
|
||||||
<div class="user-avatar-btn">
|
|
||||||
<img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
|
|
||||||
<div class="online-indicator"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-dropdown" id="nav-dropdown">
|
|
||||||
<div class="dropdown-header">
|
|
||||||
<img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
|
|
||||||
<div class="dropdown-user-info">
|
|
||||||
<div class="dropdown-username" id="nav-username"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a href="/profile" class="dropdown-item">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="18" height="18"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round">
|
|
||||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
|
|
||||||
<circle cx="12" cy="7" r="4"/>
|
|
||||||
</svg>
|
|
||||||
<span>Profile</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<button class="dropdown-item" id="nav-create-party">
|
|
||||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
|
|
||||||
</svg>
|
|
||||||
<span>Watchparty</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="dropdown-item" id="nav-settings">
|
|
||||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<circle cx="12" cy="12" r="3"/>
|
|
||||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.65 1.65 0 0 0 15 19.4a1.65 1.65 0 0 0-1 .6 1.65 1.65 0 0 0-.33 1.82V22a2 2 0 1 1-4 0v-.18a1.65 1.65 0 0 0-.33-1.82 1.65 1.65 0 0 0-1-.6 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-.6-1 1.65 1.65 0 0 0-1.82-.33H2a2 2 0 1 1 0-4h.18a1.65 1.65 0 0 0 1.82-.33 1.65 1.65 0 0 0 .6-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6c.37 0 .72-.14 1-.6A1.65 1.65 0 0 0 10.33 2.18V2a2 2 0 1 1 4 0v.18a1.65 1.65 0 0 0 .33 1.82c.28.46.63.6 1 .6a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c0 .37.14.72.6 1 .46.28.6.63.6 1z"/>
|
|
||||||
</svg>
|
|
||||||
<span>Settings</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="dropdown-item logout-item" id="nav-logout">
|
|
||||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
|
|
||||||
<polyline points="16 17 21 12 16 7"/>
|
|
||||||
<line x1="21" y1="12" x2="9" y2="12"/>
|
|
||||||
</svg>
|
|
||||||
<span>Logout</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button class="mobile-menu-toggle" id="mobile-menu-toggle">
|
|
||||||
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
@@ -1,310 +0,0 @@
|
|||||||
<div id="settings-modal" class="modal hidden" onclick="if(event.target === this) window.toggleSettingsModal(true)">
|
|
||||||
<div class="modal-overlay"></div>
|
|
||||||
<div class="modal-content">
|
|
||||||
|
|
||||||
<aside class="modal-sidebar">
|
|
||||||
<div class="sidebar-header">
|
|
||||||
<h2 class="sidebar-title">Settings</h2>
|
|
||||||
</div>
|
|
||||||
<nav id="config-nav" class="nav-list">
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div class="sidebar-footer">
|
|
||||||
<button onclick="window.toggleSettingsModal(true)" class="btn-exit">
|
|
||||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
|
|
||||||
<polyline points="16 17 21 12 16 7"></polyline>
|
|
||||||
<line x1="21" y1="12" x2="9" y2="12"></line>
|
|
||||||
</svg>
|
|
||||||
Close
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<main class="modal-main">
|
|
||||||
<form id="config-form" class="config-wrapper">
|
|
||||||
<div id="config-section-content" class="section-container">
|
|
||||||
<div class="skeleton-loader">
|
|
||||||
<div class="skeleton title-skeleton"></div>
|
|
||||||
<div class="skeleton field-skeleton"></div>
|
|
||||||
<div class="skeleton field-skeleton"></div>
|
|
||||||
<div class="skeleton field-skeleton"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-footer-sticky">
|
|
||||||
<p class="footer-hint">Changes are applied immediately after saving.</p>
|
|
||||||
<button type="submit" class="btn-primary">Save Changes</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
/* --- THEME VARIABLES (Heredadas y adaptadas de anime.css) --- */
|
|
||||||
:root {
|
|
||||||
--modal-bg: #0b0b0b;
|
|
||||||
--modal-sidebar: rgba(255, 255, 255, 0.02);
|
|
||||||
--modal-border: rgba(255, 255, 255, 0.08);
|
|
||||||
--input-bg: rgba(255, 255, 255, 0.04);
|
|
||||||
--accent: #8b5cf6; /* Tu morado principal */
|
|
||||||
--text-primary: #ffffff;
|
|
||||||
--text-secondary: #a1a1aa;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- MODAL BASE --- */
|
|
||||||
.modal {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
z-index: 10000;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 20px;
|
|
||||||
font-family: system-ui, -apple-system, sans-serif; /* Coherencia con anime.css */
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal.hidden { display: none !important; }
|
|
||||||
|
|
||||||
.modal-overlay {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.85); /* Un poco menos opaco para profundidad */
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
z-index: -1;
|
|
||||||
animation: fadeIn 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 1100px;
|
|
||||||
height: 80vh;
|
|
||||||
background: var(--modal-bg);
|
|
||||||
border: 1px solid var(--modal-border);
|
|
||||||
border-radius: 16px; /* Bordes menos exagerados, más elegantes */
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 40px 80px rgba(0,0,0,0.6);
|
|
||||||
animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- SIDEBAR --- */
|
|
||||||
.modal-sidebar {
|
|
||||||
width: 260px;
|
|
||||||
background: var(--modal-sidebar);
|
|
||||||
border-right: 1px solid var(--modal-border);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 2rem 1.5rem;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-header { margin-bottom: 2rem; }
|
|
||||||
|
|
||||||
.sidebar-title {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: 800;
|
|
||||||
color: var(--text-primary);
|
|
||||||
margin: 0;
|
|
||||||
letter-spacing: -0.03em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-list { flex: 1; display: flex; flex-direction: column; gap: 4px; }
|
|
||||||
|
|
||||||
.nav-item {
|
|
||||||
padding: 10px 14px;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
text-transform: capitalize;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item.active {
|
|
||||||
background: var(--accent);
|
|
||||||
color: white;
|
|
||||||
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25); /* Glow sutil */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- MAIN CONTENT area --- */
|
|
||||||
.modal-main {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background: transparent;
|
|
||||||
min-width: 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.config-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-container {
|
|
||||||
flex: 1;
|
|
||||||
padding: 3rem;
|
|
||||||
overflow-y: auto;
|
|
||||||
/* Custom Scrollbar sutil */
|
|
||||||
scrollbar-width: thin;
|
|
||||||
scrollbar-color: #333 transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- INPUTS & FORMS (Estilo WaifuBoards/Anime) --- */
|
|
||||||
.config-group {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
animation: fadeInSection 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.config-group label {
|
|
||||||
display: block;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
margin-bottom: 0.6rem;
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.config-input {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.9rem 1rem;
|
|
||||||
background: var(--input-bg);
|
|
||||||
border: 1px solid var(--modal-border);
|
|
||||||
border-radius: 8px;
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-size: 1rem;
|
|
||||||
font-family: inherit;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.config-input:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--accent);
|
|
||||||
background: rgba(255, 255, 255, 0.08);
|
|
||||||
box-shadow: 0 0 0 1px var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- FOOTER ACTION BAR --- */
|
|
||||||
.modal-footer-sticky {
|
|
||||||
padding: 1.2rem 3rem;
|
|
||||||
background: rgba(11, 11, 11, 0.8); /* Glass effect */
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
border-top: 1px solid var(--modal-border);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-hint {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- BUTTONS --- */
|
|
||||||
.btn-primary {
|
|
||||||
padding: 0.7rem 2rem;
|
|
||||||
background: white; /* Estilo 'btn-watch' de anime.css */
|
|
||||||
color: black;
|
|
||||||
border: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-weight: 800;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: transform 0.2s ease, filter 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
transform: scale(1.02);
|
|
||||||
filter: brightness(0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-exit {
|
|
||||||
background: transparent;
|
|
||||||
border: 1px solid var(--modal-border);
|
|
||||||
color: #ef4444; /* Rojo error sutil */
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 8px;
|
|
||||||
width: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 8px;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-top: auto;
|
|
||||||
transition: background 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-exit:hover {
|
|
||||||
background: rgba(239, 68, 68, 0.1);
|
|
||||||
border-color: #ef4444;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- SKELETON & ANIMATIONS --- */
|
|
||||||
@keyframes modalSlideUp {
|
|
||||||
from { opacity: 0; transform: scale(0.98) translateY(15px); }
|
|
||||||
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
|
||||||
@keyframes fadeInSection { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
|
|
||||||
|
|
||||||
.skeleton-loader { display: flex; flex-direction: column; gap: 1.5rem; }
|
|
||||||
.skeleton {
|
|
||||||
background: linear-gradient(90deg, #111 25%, #1a1a1a 50%, #111 75%);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
animation: shimmer 2s infinite;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
|
|
||||||
|
|
||||||
.title-skeleton { height: 28px; width: 30%; margin-bottom: 1rem; }
|
|
||||||
.field-skeleton { height: 48px; width: 100%; }
|
|
||||||
|
|
||||||
/* --- RESPONSIVE --- */
|
|
||||||
@media (max-width: 850px) {
|
|
||||||
.modal-content { flex-direction: column; height: 100%; width: 100%; border-radius: 0; border: none; }
|
|
||||||
.modal-sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--modal-border); padding: 1.5rem; }
|
|
||||||
.sidebar-footer { display: none; } /* Ocultar btn salir sidebar en movil */
|
|
||||||
.section-container { padding: 1.5rem; }
|
|
||||||
.modal-footer-sticky { padding: 1rem 1.5rem; }
|
|
||||||
|
|
||||||
/* Añadir un botón de cierre flotante en móvil si fuera necesario,
|
|
||||||
pero el diseño actual debería funcionar bien con scroll */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Estilo para la nueva descripción --- */
|
|
||||||
.config-description {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: rgba(255, 255, 255, 0.5); /* Gris sutil */
|
|
||||||
|
|
||||||
/* Ajustes para posición inferior */
|
|
||||||
margin-top: 0.5rem; /* Espacio entre el input y la descripción */
|
|
||||||
margin-bottom: 0; /* Ya no necesitamos margen abajo */
|
|
||||||
|
|
||||||
line-height: 1.4;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ajuste para inputs vacíos (placeholder) */
|
|
||||||
.config-input::placeholder {
|
|
||||||
color: rgba(255, 255, 255, 0.2);
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
<div id="titlebar">
|
|
||||||
<div class="title-left">
|
|
||||||
<div class="app-icon">
|
|
||||||
<img src="/public/assets/waifuboards.ico" alt="WB"/>
|
|
||||||
</div>
|
|
||||||
<span class="app-title">WaifuBoard</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="title-drag-area"></div>
|
|
||||||
|
|
||||||
<div class="title-right">
|
|
||||||
<div id="titlebar-actions" style="display: none; height: 100%; align-items: center;">
|
|
||||||
|
|
||||||
<button class="title-action-btn" id="titlebar-settings" title="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>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<a href="/profile" class="title-avatar-link" id="titlebar-profile-link" title="Profile">
|
|
||||||
<img id="titlebar-avatar" src="/public/assets/waifuboards.ico" alt="User" />
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="title-sep"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="window-controls">
|
|
||||||
<button class="control-btn min" title="Minimize">
|
|
||||||
<svg width="11" height="1" viewBox="0 0 11 1"><path d="M0 0h11v1H0z" fill="currentColor"/></svg>
|
|
||||||
</button>
|
|
||||||
<button class="control-btn max" title="Maximize">
|
|
||||||
<svg width="10" height="10" viewBox="0 0 10 10"><path d="M1 1v8h8V1H1zm1 1h6v6H2V2z" fill="currentColor"/></svg>
|
|
||||||
</button>
|
|
||||||
<button class="control-btn close" title="Close">
|
|
||||||
<svg width="11" height="11" viewBox="0 0 11 11"><path d="M5.5 4.793L1.854 1.146.646 2.354 4.293 6 .646 9.646l1.208 1.208L5.5 7.207l3.646 3.647 1.208-1.208L6.707 6l3.647-3.646-1.208-1.208L5.5 4.793z" fill="currentColor"/></svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@@ -1,274 +0,0 @@
|
|||||||
:root {
|
|
||||||
--bg-card: rgba(255, 255, 255, 0.04);
|
|
||||||
--border-subtle: rgba(255, 255, 255, 0.1);
|
|
||||||
--color-primary: #8b5cf6;
|
|
||||||
--player-height: 85vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: #0b0b0b;
|
|
||||||
color: white;
|
|
||||||
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
overflow-x: hidden;
|
|
||||||
width: 100%;
|
|
||||||
font-family: system-ui, -apple-system, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-media-wrapper {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
width: 100vw;
|
|
||||||
left: 0;
|
|
||||||
background: #000;
|
|
||||||
transition: all 0.5s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-wrapper {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-background {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 1;
|
|
||||||
pointer-events: none;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.video-background iframe,
|
|
||||||
.video-background #trailer-player {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
|
|
||||||
width: 100vw;
|
|
||||||
height: 56.25vw;
|
|
||||||
min-height: 100vh;
|
|
||||||
min-width: 177.77vh;
|
|
||||||
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-overlay {
|
|
||||||
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
|
||||||
background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.8) 70%, #0b0b0b 100%);
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-container {
|
|
||||||
position: relative;
|
|
||||||
z-index: 10;
|
|
||||||
max-width: 1400px;
|
|
||||||
margin: -45vh auto 0 auto;
|
|
||||||
padding: 0 3rem 4rem 3rem;
|
|
||||||
transition: margin-top 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.watch-mode .content-container { margin-top: 0; }
|
|
||||||
body.watch-mode .anime-header { margin-top: 2rem; }
|
|
||||||
|
|
||||||
.anime-header { margin-bottom: 5rem; max-width: 900px; }
|
|
||||||
.anime-title {
|
|
||||||
font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900;
|
|
||||||
margin-bottom: 0.5rem; text-shadow: 0 4px 30px rgba(0,0,0,0.6);
|
|
||||||
}
|
|
||||||
.hero-meta-info {
|
|
||||||
display: flex; align-items: center; gap: 0.8rem;
|
|
||||||
color: rgba(255,255,255,0.7); font-weight: 600; margin-bottom: 1.2rem;
|
|
||||||
}
|
|
||||||
.pill-local {
|
|
||||||
background: #22c55e; color: black; padding: 2px 8px;
|
|
||||||
border-radius: 4px; font-size: 0.75rem; font-weight: 900;
|
|
||||||
}
|
|
||||||
.hero-description-mini {
|
|
||||||
font-size: 1.05rem; line-height: 1.5; color: rgba(255,255,255,0.8);
|
|
||||||
margin-bottom: 1.2rem; max-width: 700px;
|
|
||||||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
|
||||||
}
|
|
||||||
.hero-tags {
|
|
||||||
display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem;
|
|
||||||
color: rgba(255,255,255,0.5); font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-row { display: flex; align-items: center; gap: 1rem; }
|
|
||||||
.btn-watch {
|
|
||||||
padding: 0.8rem 2.2rem; background: white; color: black;
|
|
||||||
border-radius: 8px; font-weight: 800; border: none; cursor: pointer;
|
|
||||||
display: flex; align-items: center; gap: 0.6rem; transition: 0.2s ease;
|
|
||||||
}
|
|
||||||
.btn-watch:hover { transform: scale(1.03); filter: brightness(0.9); }
|
|
||||||
|
|
||||||
.btn-add-list {
|
|
||||||
padding: 0.8rem 1.5rem; background: rgba(255,255,255,0.1);
|
|
||||||
border: 1px solid rgba(255,255,255,0.2); color: white;
|
|
||||||
border-radius: 8px; font-weight: 700; cursor: pointer; transition: 0.2s;
|
|
||||||
}
|
|
||||||
.btn-add-list:hover { background: rgba(255,255,255,0.2); }
|
|
||||||
|
|
||||||
.main-layout { display: grid; grid-template-columns: 300px 1fr; gap: 4rem; margin-top: 2rem; }
|
|
||||||
.content-section { margin-top: 4rem; }
|
|
||||||
h2, .subsection-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; color: white; }
|
|
||||||
|
|
||||||
.poster-card {
|
|
||||||
border-radius: 12px; overflow: hidden;
|
|
||||||
box-shadow: 0 30px 60px rgba(0,0,0,0.5); border: 1px solid var(--border-subtle);
|
|
||||||
}
|
|
||||||
.poster-card img { width: 100%; height: auto; display: block; }
|
|
||||||
|
|
||||||
.relations-horizontal { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
|
|
||||||
.relation-card-horizontal {
|
|
||||||
display: flex; background: var(--bg-card); border: 1px solid var(--border-subtle);
|
|
||||||
border-radius: 10px; overflow: hidden; transition: 0.2s; cursor: pointer;
|
|
||||||
}
|
|
||||||
.relation-card-horizontal:hover { background: rgba(255,255,255,0.08); transform: translateX(5px); }
|
|
||||||
.rel-img { width: 85px; height: 110px; object-fit: cover; }
|
|
||||||
.rel-info { padding: 1rem; display: flex; flex-direction: column; justify-content: center; }
|
|
||||||
.rel-type {
|
|
||||||
font-size: 0.7rem; color: var(--color-primary); font-weight: 800;
|
|
||||||
margin-bottom: 4px; background: rgba(139, 92, 246, 0.1); width: fit-content; padding: 2px 6px; border-radius: 4px;
|
|
||||||
}
|
|
||||||
.rel-title { font-size: 0.95rem; font-weight: 700; color: #eee; }
|
|
||||||
|
|
||||||
.characters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
|
||||||
.character-item { display: flex; align-items: center; gap: 1rem; }
|
|
||||||
.char-avatar { width: 60px; height: 60px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
|
|
||||||
.char-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
|
||||||
.char-info { display: flex; flex-direction: column; gap: 2px; }
|
|
||||||
.char-name { font-size: 1rem; font-weight: 700; color: #fff; }
|
|
||||||
.char-role { font-size: 0.8rem; color: #888; font-weight: 500; }
|
|
||||||
.btn-show-more { background: transparent; border: 1px solid var(--border-subtle); color: #aaa; padding: 10px; width: 100%; margin-top: 1rem; cursor: pointer; }
|
|
||||||
|
|
||||||
.episodes-section { margin-top: 3rem; }
|
|
||||||
.episodes-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
|
|
||||||
.episode-search-input {
|
|
||||||
background: rgba(255,255,255,0.05); border: 1px solid var(--border-subtle);
|
|
||||||
color: white; padding: 8px 15px; border-radius: 8px; width: 100px;
|
|
||||||
}
|
|
||||||
.episodes-grid {
|
|
||||||
display: grid;
|
|
||||||
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
|
|
||||||
gap: 0.6rem;
|
|
||||||
}
|
|
||||||
.episode-btn {
|
|
||||||
background: rgba(255,255,255,0.03);
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
padding: 0.6rem 0;
|
|
||||||
border-radius: 6px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
.episode-btn:hover {
|
|
||||||
background: white;
|
|
||||||
color: black;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
.episode-btn.active-playing {
|
|
||||||
background: var(--color-primary);
|
|
||||||
color: white;
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.metadata-sidebar {
|
|
||||||
margin-top: 2rem;
|
|
||||||
background: rgba(255,255,255,0.03);
|
|
||||||
padding: 1.5rem;
|
|
||||||
border-radius: 16px;
|
|
||||||
border: 1px solid rgba(255,255,255,0.08);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1.2rem;
|
|
||||||
}
|
|
||||||
.meta-item-side {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
|
||||||
padding-bottom: 0.8rem;
|
|
||||||
}
|
|
||||||
.meta-item-side:last-child { border-bottom: none; padding-bottom: 0; }
|
|
||||||
.meta-item-side span {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
color: #888;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.meta-item-side p {
|
|
||||||
font-size: 0.95rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #fff;
|
|
||||||
margin: 0;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.content-container { margin-top: -200px; padding: 0 1.5rem; }
|
|
||||||
.main-layout { grid-template-columns: 1fr; gap: 2rem; }
|
|
||||||
.poster-section { display: flex; flex-direction: column; align-items: center; }
|
|
||||||
.poster-card { width: 220px; }
|
|
||||||
.metadata-sidebar { width: 100%; max-width: 400px; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.relation-card-horizontal.no-link {
|
|
||||||
cursor: default;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
.relation-card-horizontal.no-link:hover {
|
|
||||||
transform: none;
|
|
||||||
background: var(--bg-card);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination-controls {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1.5rem;
|
|
||||||
margin-top: 2rem;
|
|
||||||
padding-top: 1.5rem;
|
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-info {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #888;
|
|
||||||
min-width: 100px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-btn {
|
|
||||||
background: transparent;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
color: white;
|
|
||||||
padding: 0.6rem 1.2rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-btn:hover:not(:disabled) {
|
|
||||||
background: white;
|
|
||||||
color: black;
|
|
||||||
border-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-btn:disabled {
|
|
||||||
opacity: 0.4;
|
|
||||||
cursor: not-allowed;
|
|
||||||
border-color: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,228 +0,0 @@
|
|||||||
:root {
|
|
||||||
--bg-card: rgba(255, 255, 255, 0.04);
|
|
||||||
--border-subtle: rgba(255, 255, 255, 0.1);
|
|
||||||
--color-primary: #8b5cf6;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- BASICS --- */
|
|
||||||
.back-btn {
|
|
||||||
position: fixed; top: 2rem; left: 2rem; z-index: 100; display: flex; align-items: center; gap: 0.5rem;
|
|
||||||
padding: 0.8rem 1.5rem; background: var(--color-glass-bg); backdrop-filter: blur(12px);
|
|
||||||
border: var(--border-subtle); border-radius: 8px; /* Anime style */
|
|
||||||
color: white; text-decoration: none; font-weight: 600; transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
.back-btn:hover { background: rgba(255, 255, 255, 0.15); transform: translateX(-5px); }
|
|
||||||
|
|
||||||
.hero-wrapper { position: relative; width: 100%; height: 60vh; overflow: hidden; }
|
|
||||||
.hero-background { position: absolute; inset: 0; z-index: 0; }
|
|
||||||
.hero-background img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; filter: blur(8px); transform: scale(1.1); }
|
|
||||||
.hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, transparent 0%, var(--color-bg-base) 100%); }
|
|
||||||
|
|
||||||
.content-container {
|
|
||||||
position: relative; z-index: 10; max-width: 1400px; margin: -300px auto 0 auto;
|
|
||||||
padding: 0 3rem 4rem 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- HEADER SECTION --- */
|
|
||||||
.book-header-section { margin-bottom: 4rem; max-width: 900px; }
|
|
||||||
.book-title {
|
|
||||||
font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900;
|
|
||||||
margin-bottom: 0.5rem; text-shadow: 0 4px 30px rgba(0,0,0,0.6); line-height: 1.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-meta-info {
|
|
||||||
display: flex; align-items: center; gap: 0.8rem;
|
|
||||||
color: rgba(255,255,255,0.7); font-weight: 600; margin-bottom: 1.2rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.meta-separator { color: rgba(255,255,255,0.3); font-size: 0.8rem; }
|
|
||||||
|
|
||||||
.pill-local {
|
|
||||||
background: #22c55e; color: black; padding: 2px 8px;
|
|
||||||
border-radius: 4px; font-size: 0.75rem; font-weight: 900;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-description-mini {
|
|
||||||
font-size: 1.05rem; line-height: 1.5; color: rgba(255,255,255,0.8);
|
|
||||||
margin-bottom: 1.2rem; max-width: 700px;
|
|
||||||
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
|
|
||||||
}
|
|
||||||
.hero-tags {
|
|
||||||
display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem;
|
|
||||||
color: rgba(255,255,255,0.5); font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- BUTTONS --- */
|
|
||||||
.action-row { display: flex; align-items: center; gap: 1rem; }
|
|
||||||
.btn-read {
|
|
||||||
padding: 0.8rem 2.2rem; background: white; color: black;
|
|
||||||
border-radius: 8px; font-weight: 800; border: none; cursor: pointer;
|
|
||||||
display: flex; align-items: center; gap: 0.6rem; transition: 0.2s ease;
|
|
||||||
}
|
|
||||||
.btn-read:hover { transform: scale(1.03); filter: brightness(0.9); }
|
|
||||||
|
|
||||||
.btn-add-list {
|
|
||||||
padding: 0.8rem 1.5rem; background: rgba(255,255,255,0.1);
|
|
||||||
border: 1px solid rgba(255,255,255,0.2); color: white;
|
|
||||||
border-radius: 8px; font-weight: 700; cursor: pointer; transition: 0.2s;
|
|
||||||
}
|
|
||||||
.btn-add-list:hover { background: rgba(255,255,255,0.2); }
|
|
||||||
|
|
||||||
|
|
||||||
/* --- MAIN LAYOUT --- */
|
|
||||||
.main-layout { display: grid; grid-template-columns: 280px 1fr; gap: 4rem; margin-top: 2rem; }
|
|
||||||
|
|
||||||
/* Sidebar */
|
|
||||||
.poster-section { display: flex; flex-direction: column; gap: 1.5rem; }
|
|
||||||
.poster-card {
|
|
||||||
border-radius: 12px; overflow: hidden; width: 100%;
|
|
||||||
box-shadow: 0 30px 60px rgba(0,0,0,0.5); border: 1px solid var(--border-subtle);
|
|
||||||
}
|
|
||||||
.poster-card img { width: 100%; height: auto; display: block; aspect-ratio: 2/3; object-fit: cover; }
|
|
||||||
|
|
||||||
/* Sidebar Extra Info (Synonyms) */
|
|
||||||
.sidebar-extra-info {
|
|
||||||
background: rgba(255,255,255,0.03); padding: 1.5rem;
|
|
||||||
border-radius: 16px; border: 1px solid rgba(255,255,255,0.08);
|
|
||||||
}
|
|
||||||
.sidebar-label {
|
|
||||||
font-size: 0.8rem; color: #888; text-transform: uppercase; margin: 0 0 1rem 0; letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
.synonyms-list {
|
|
||||||
list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem;
|
|
||||||
}
|
|
||||||
.synonyms-list li {
|
|
||||||
font-size: 0.9rem; color: #ddd; line-height: 1.4; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
.synonyms-list li:last-child { border-bottom: none; }
|
|
||||||
|
|
||||||
|
|
||||||
/* --- CONTENT COLUMN --- */
|
|
||||||
.content-section { margin-top: 4rem; }
|
|
||||||
h2, .subsection-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; color: white; }
|
|
||||||
|
|
||||||
/* Chapters Section */
|
|
||||||
.chapters-section { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1rem; }
|
|
||||||
.chapters-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
|
|
||||||
|
|
||||||
/* Chapter Controls */
|
|
||||||
.chapter-controls { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
|
|
||||||
.glass-select, .glass-input {
|
|
||||||
appearance: none; -webkit-appearance: none;
|
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='rgba(255,255,255,0.7)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
||||||
background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 10px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9);
|
|
||||||
padding: 0.4rem 2rem 0.4rem 0.8rem; border-radius: 6px; font-size: 0.8rem; font-weight: 500; height: 34px;
|
|
||||||
outline: none; backdrop-filter: blur(4px); transition: all 0.2s ease; cursor: pointer; min-width: 110px;
|
|
||||||
}
|
|
||||||
.glass-input { background-image: none; padding: 0.4rem 0.8rem; width: 180px; }
|
|
||||||
.glass-input:focus { border-color: var(--color-primary); width: 220px; }
|
|
||||||
.glass-btn-icon { width: 34px; height: 34px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
|
|
||||||
.glass-btn-icon:hover { background: var(--color-primary); border-color: var(--color-primary); }
|
|
||||||
|
|
||||||
/* Chapters Grid */
|
|
||||||
.chapters-grid { display: flex; flex-direction: column; gap: 0.5rem; }
|
|
||||||
.chapter-item {
|
|
||||||
display: flex; align-items: center; justify-content: space-between;
|
|
||||||
background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
padding: 0.8rem 1.2rem; border-radius: 8px;
|
|
||||||
transition: all 0.2s ease; cursor: pointer; position: relative; overflow: hidden;
|
|
||||||
}
|
|
||||||
.chapter-item:hover { background: rgba(255, 255, 255, 0.08); transform: translateX(5px); border-color: rgba(255, 255, 255, 0.2); }
|
|
||||||
.chapter-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--color-primary); opacity: 0; transition: opacity 0.2s; }
|
|
||||||
.chapter-info { display: flex; flex-direction: column; gap: 0.2rem; }
|
|
||||||
.chapter-number { font-size: 0.85rem; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; }
|
|
||||||
.chapter-title { font-size: 1rem; font-weight: 500; color: white; }
|
|
||||||
.chapter-meta { display: flex; align-items: center; gap: 1rem; font-size: 0.85rem; color: #888; }
|
|
||||||
.lang-tag { font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.1); text-transform: uppercase; color: #ccc; }
|
|
||||||
|
|
||||||
|
|
||||||
/* --- RELATIONS (Horizontal Cards) --- */
|
|
||||||
.relations-horizontal { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
|
|
||||||
.relation-card-horizontal {
|
|
||||||
display: flex; background: var(--bg-card); border: 1px solid var(--border-subtle);
|
|
||||||
border-radius: 10px; overflow: hidden; transition: 0.2s; cursor: pointer;
|
|
||||||
}
|
|
||||||
.relation-card-horizontal:hover { background: rgba(255,255,255,0.08); transform: translateX(5px); }
|
|
||||||
.rel-img { width: 85px; height: 110px; object-fit: cover; }
|
|
||||||
.rel-info { padding: 1rem; display: flex; flex-direction: column; justify-content: center; }
|
|
||||||
.rel-type {
|
|
||||||
font-size: 0.7rem; color: var(--color-primary); font-weight: 800;
|
|
||||||
margin-bottom: 4px; background: rgba(139, 92, 246, 0.1); width: fit-content; padding: 2px 6px; border-radius: 4px;
|
|
||||||
}
|
|
||||||
.rel-title { font-size: 0.95rem; font-weight: 700; color: #eee; }
|
|
||||||
|
|
||||||
|
|
||||||
/* --- CHARACTERS (Grid Style) --- */
|
|
||||||
.characters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 1rem; }
|
|
||||||
.character-item { display: flex; align-items: center; gap: 1rem; }
|
|
||||||
.char-avatar { width: 60px; height: 60px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
|
|
||||||
.char-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
|
||||||
.char-info { display: flex; flex-direction: column; gap: 2px; }
|
|
||||||
.char-name { font-size: 1rem; font-weight: 700; color: #fff; }
|
|
||||||
.char-role { font-size: 0.8rem; color: #888; font-weight: 500; }
|
|
||||||
|
|
||||||
/* --- PAGINATION --- */
|
|
||||||
.pagination-controls { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; align-items: center; }
|
|
||||||
.page-btn { background: var(--color-bg-elevated); border: 1px solid rgba(255, 255, 255, 0.1); color: white; padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer; font-size: 0.9rem; }
|
|
||||||
.page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
||||||
.page-btn:hover:not(:disabled) { border-color: var(--color-primary); }
|
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.content-container { margin-top: -150px; padding: 0 1.5rem; }
|
|
||||||
.main-layout { grid-template-columns: 1fr; gap: 2rem; }
|
|
||||||
.poster-section { display: flex; flex-direction: column; align-items: center; }
|
|
||||||
.poster-card { width: 220px; }
|
|
||||||
.metadata-sidebar { width: 100%; max-width: 400px; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.hero-wrapper { height: 40vh; }
|
|
||||||
.book-title { font-size: 2.5rem; }
|
|
||||||
.action-row { flex-direction: column; width: 100%; }
|
|
||||||
.btn-read, .btn-add-list { width: 100%; justify-content: center; }
|
|
||||||
.chapters-header { flex-direction: column; align-items: flex-start; }
|
|
||||||
.chapter-controls { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
|
|
||||||
.search-box { grid-column: span 2; }
|
|
||||||
.glass-input { width: 100%; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 10px;
|
|
||||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-btn {
|
|
||||||
background: transparent;
|
|
||||||
border: 1px solid rgba(255,255,255,0.3);
|
|
||||||
color: #ccc;
|
|
||||||
padding: 6px 10px;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-btn:hover {
|
|
||||||
background: rgba(255,255,255,0.1);
|
|
||||||
border-color: #fff;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-btn:disabled {
|
|
||||||
opacity: 0.7;
|
|
||||||
cursor: wait;
|
|
||||||
}
|
|
||||||
@@ -1,625 +0,0 @@
|
|||||||
:root {
|
|
||||||
--bg-surface: #14141b;
|
|
||||||
--bg-elevated: #1c1c26;
|
|
||||||
--bg-hover: #252530;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-bar {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 64px;
|
|
||||||
background: rgba(10, 10, 15, 0.85);
|
|
||||||
backdrop-filter: blur(20px) saturate(180%);
|
|
||||||
border-bottom: 1px solid var(--border-subtle);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 1.5rem;
|
|
||||||
z-index: 1000;
|
|
||||||
box-shadow: var(--shadow-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-btn {
|
|
||||||
background: var(--bg-surface);
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
padding: 0.625rem 1.25rem;
|
|
||||||
border-radius: var(--radius-full);
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-btn:hover {
|
|
||||||
background: var(--bg-hover);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-btn:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter-info {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-arrow {
|
|
||||||
background: var(--bg-surface);
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
border-radius: 50%;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-arrow:hover {
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-arrow:disabled {
|
|
||||||
opacity: 0.4;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
#reader {
|
|
||||||
margin-top: 64px;
|
|
||||||
padding: 2rem 1rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
min-height: calc(100vh - 64px);
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.manga-container {
|
|
||||||
width: 100%;
|
|
||||||
max-width: var(--manga-max-width, 1200px);
|
|
||||||
margin: 0 auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--page-spacing, 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-img {
|
|
||||||
width: 100%;
|
|
||||||
max-width: var(--page-max-width, 900px);
|
|
||||||
height: auto;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
box-shadow: var(--shadow-lg);
|
|
||||||
transition:
|
|
||||||
transform 0.2s ease,
|
|
||||||
box-shadow 0.2s ease;
|
|
||||||
cursor: pointer;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-img:hover {
|
|
||||||
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-img.zoomed {
|
|
||||||
position: fixed;
|
|
||||||
top: 64px;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
max-width: 100vw;
|
|
||||||
max-height: calc(100vh - 64px);
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
margin: auto;
|
|
||||||
z-index: 999;
|
|
||||||
cursor: zoom-out;
|
|
||||||
border-radius: 0;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.zoom-overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 64px;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.95);
|
|
||||||
z-index: 998;
|
|
||||||
cursor: zoom-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.double-container {
|
|
||||||
display: flex;
|
|
||||||
gap: var(--page-spacing, 16px);
|
|
||||||
width: 100%;
|
|
||||||
max-width: var(--manga-max-width, 1400px);
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.double-container img {
|
|
||||||
width: 48%;
|
|
||||||
max-width: 700px;
|
|
||||||
height: auto;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
box-shadow: var(--shadow-lg);
|
|
||||||
object-fit: contain;
|
|
||||||
cursor: pointer;
|
|
||||||
transition:
|
|
||||||
transform 0.2s ease,
|
|
||||||
box-shadow 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.double-container img:hover {
|
|
||||||
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ln-content {
|
|
||||||
max-width: var(--ln-max-width, 750px);
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 3rem 2.5rem;
|
|
||||||
line-height: var(--ln-line-height, 1.8);
|
|
||||||
font-size: var(--ln-font-size, 18px);
|
|
||||||
font-family: var(--ln-font-family, "Georgia", serif);
|
|
||||||
color: var(--ln-text-color, #e5e7eb);
|
|
||||||
text-align: var(--ln-text-align, left);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ln-content p {
|
|
||||||
margin-bottom: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ln-content h1,
|
|
||||||
.ln-content h2,
|
|
||||||
.ln-content h3 {
|
|
||||||
margin-top: 2em;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-panel {
|
|
||||||
position: fixed;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 400px;
|
|
||||||
padding: 0;
|
|
||||||
z-index: 1001;
|
|
||||||
transform: translateX(100%);
|
|
||||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
overflow-y: auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background: var(--bg-surface);
|
|
||||||
border-left: 1px solid var(--border-subtle);
|
|
||||||
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-panel.open {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-header {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 1.5rem;
|
|
||||||
z-index: 10;
|
|
||||||
background: #0a0a0f;
|
|
||||||
border-bottom: 1px solid var(--border-subtle);
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-header h3 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-btn {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 50%;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: var(--bg-elevated);
|
|
||||||
border: none;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-btn:hover {
|
|
||||||
background: var(--color-primary);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-content {
|
|
||||||
flex: 1;
|
|
||||||
padding: 1.5rem;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-section {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
padding-bottom: 2rem;
|
|
||||||
border-bottom: 1px solid var(--border-subtle);
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-section:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
margin-bottom: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-section h4 {
|
|
||||||
margin: 0 0 1.25rem 0;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: -0.01em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control {
|
|
||||||
margin-bottom: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control label {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 0.625rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control label span {
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
font-weight: 600;
|
|
||||||
font-family: "JetBrains Mono", monospace;
|
|
||||||
font-size: 0.8125rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="range"] {
|
|
||||||
width: 100%;
|
|
||||||
border-radius: var(--radius-full);
|
|
||||||
outline: none;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
cursor: pointer;
|
|
||||||
height: 8px;
|
|
||||||
background: var(--bg-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="range"]::-webkit-slider-thumb {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
border-radius: 50%;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
background: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="range"]::-webkit-slider-thumb:hover {
|
|
||||||
transform: scale(1.15);
|
|
||||||
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="range"]::-moz-range-thumb {
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-radius: 50%;
|
|
||||||
cursor: pointer;
|
|
||||||
border: none;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
select,
|
|
||||||
input[type="color"],
|
|
||||||
input[type="number"] {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.625rem 0.875rem;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
font-size: 0.875rem;
|
|
||||||
transition: all 0.2s;
|
|
||||||
cursor: pointer;
|
|
||||||
background: var(--bg-elevated);
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
}
|
|
||||||
|
|
||||||
select:hover,
|
|
||||||
input[type="color"]:hover,
|
|
||||||
input[type="number"]:hover {
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
select:focus,
|
|
||||||
input[type="color"]:focus,
|
|
||||||
input[type="number"]:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
box-shadow: 0 0 0 3px var(--color-primary-glow);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="color"] {
|
|
||||||
height: 44px;
|
|
||||||
padding: 0.25rem;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.presets {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.presets button {
|
|
||||||
background: var(--bg-elevated);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
padding: 1rem;
|
|
||||||
background: var(--bg-elevated);
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.02em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.presets button:hover {
|
|
||||||
background: var(--color-primary);
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 15px var(--color-primary-glow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-group {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn {
|
|
||||||
flex: 1;
|
|
||||||
background: var(--bg-elevated);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
font-size: 0.8125rem;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
background: var(--bg-elevated);
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn:hover {
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn.active {
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
box-shadow: 0 2px 10px var(--color-primary-glow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.75);
|
|
||||||
z-index: 1000;
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay.active {
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: all;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-spinner {
|
|
||||||
display: inline-block;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border: 3px solid var(--bg-elevated);
|
|
||||||
border-top-color: var(--color-primary);
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 0.8s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 4rem 2rem;
|
|
||||||
gap: 1rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-panel::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-panel::-webkit-scrollbar-track {
|
|
||||||
background: var(--bg-surface);
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-panel::-webkit-scrollbar-thumb {
|
|
||||||
background: var(--bg-elevated);
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-panel::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: var(--bg-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.settings-panel {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-bar {
|
|
||||||
padding: 0 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-btn {
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
font-size: 0.8125rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter-info {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.double-container {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.double-container img {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ln-content {
|
|
||||||
padding: 2rem 1.5rem;
|
|
||||||
font-size: var(--ln-font-size, 16px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fit-width {
|
|
||||||
width: 100% !important;
|
|
||||||
height: auto !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fit-height {
|
|
||||||
height: var(--viewport-height, 85vh) !important;
|
|
||||||
width: auto !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fit-screen {
|
|
||||||
max-height: var(--viewport-height, 85vh) !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
width: auto !important;
|
|
||||||
height: auto !important;
|
|
||||||
object-fit: contain !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-img.longstrip-fit {
|
|
||||||
width: 50%;
|
|
||||||
max-width: 50%;
|
|
||||||
margin: 0 auto;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
#reader {
|
|
||||||
padding-left: 0 !important;
|
|
||||||
padding-right: 0 !important;
|
|
||||||
|
|
||||||
padding-top: 64px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.manga-container {
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
gap: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-img {
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
height: auto !important;
|
|
||||||
border-radius: 0 !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-img.longstrip-fit {
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.double-container {
|
|
||||||
flex-direction: column !important;
|
|
||||||
gap: 0 !important;
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.double-container img {
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
border-radius: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fit-height,
|
|
||||||
.fit-screen {
|
|
||||||
width: 100% !important;
|
|
||||||
height: auto !important;
|
|
||||||
max-height: none !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
object-fit: contain !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.double-container.break-double {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.double-container.break-double img {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
@@ -1,316 +0,0 @@
|
|||||||
:root {
|
|
||||||
|
|
||||||
--color-primary: #8b5cf6;
|
|
||||||
--bg-modal: rgba(15, 15, 15, 0.95);
|
|
||||||
--border-subtle: rgba(255, 255, 255, 0.1);
|
|
||||||
--input-bg: rgba(0, 0, 0, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-overlay {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.85);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
z-index: 2000;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 1rem;
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-overlay.active {
|
|
||||||
opacity: 1;
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
background: var(--bg-modal);
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
border-radius: 16px;
|
|
||||||
max-width: 850px;
|
|
||||||
width: 95%;
|
|
||||||
position: relative;
|
|
||||||
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9),
|
|
||||||
0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
||||||
max-height: 90vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
transform: scale(0.95) translateY(10px);
|
|
||||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-overlay.active .modal-content {
|
|
||||||
transform: scale(1) translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-close {
|
|
||||||
position: absolute;
|
|
||||||
top: 1.2rem;
|
|
||||||
right: 1.2rem;
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
color: #ccc;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 1rem;
|
|
||||||
transition: all 0.2s;
|
|
||||||
z-index: 2001;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-close:hover {
|
|
||||||
background: #ef4444;
|
|
||||||
border-color: #ef4444;
|
|
||||||
color: white;
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-title {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: 800;
|
|
||||||
padding: 2rem 2.5rem 1rem 2.5rem;
|
|
||||||
margin: 0;
|
|
||||||
color: white;
|
|
||||||
border-bottom: 1px solid var(--border-subtle);
|
|
||||||
letter-spacing: -0.02em;
|
|
||||||
background: linear-gradient(to right, #fff, #aaa);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-body {
|
|
||||||
padding: 0 2.5rem;
|
|
||||||
overflow-y: auto;
|
|
||||||
flex-grow: 1;
|
|
||||||
|
|
||||||
scrollbar-width: thin;
|
|
||||||
scrollbar-color: rgba(255,255,255,0.2) transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-body::-webkit-scrollbar { width: 6px; }
|
|
||||||
.modal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
|
|
||||||
|
|
||||||
.modal-fields-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: 1.5rem 2rem;
|
|
||||||
padding: 2rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group label {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: rgba(255, 255, 255, 0.6);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input {
|
|
||||||
background: var(--input-bg);
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
color: white;
|
|
||||||
border-radius: 10px;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
height: 45px;
|
|
||||||
padding: 0 1rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea.form-input {
|
|
||||||
height: auto;
|
|
||||||
padding: 1rem;
|
|
||||||
min-height: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input:focus {
|
|
||||||
outline: none;
|
|
||||||
background: rgba(0,0,0,0.6);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group.notes-group {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
order: 10;
|
|
||||||
}
|
|
||||||
.form-group.checkbox-group {
|
|
||||||
grid-column: 3 / 4;
|
|
||||||
align-self: end;
|
|
||||||
margin-bottom: 0.8rem;
|
|
||||||
order: 5;
|
|
||||||
}
|
|
||||||
.form-group.full-width { grid-column: 1 / -1; }
|
|
||||||
.notes-textarea { resize: vertical; min-height: 100px; line-height: 1.5; }
|
|
||||||
|
|
||||||
/* Cambia de 3 columnas a 2 columnas para que Start y End llenen el espacio */
|
|
||||||
.date-group {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr; /* Antes era 1fr 1fr 1fr */
|
|
||||||
gap: 2rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-input-pair {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.6rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-group {
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
background: rgba(255,255,255,0.02);
|
|
||||||
padding: 0.8rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-group:hover { border-color: var(--border-subtle); }
|
|
||||||
|
|
||||||
.form-checkbox {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
||||||
background: transparent;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
appearance: none;
|
|
||||||
position: relative;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-checkbox:checked {
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-checkbox:checked::after {
|
|
||||||
content: "✓";
|
|
||||||
position: absolute;
|
|
||||||
top: 50%; left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
color: white;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 900;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
padding: 1.5rem 2.5rem;
|
|
||||||
border-top: 1px solid var(--border-subtle);
|
|
||||||
background: rgba(10, 10, 10, 0.3);
|
|
||||||
border-bottom-left-radius: 16px;
|
|
||||||
border-bottom-right-radius: 16px;
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary, .btn-secondary, .btn-danger {
|
|
||||||
padding: 0.85rem 1.8rem;
|
|
||||||
border-radius: 10px;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: var(--color-primary);
|
|
||||||
color: white;
|
|
||||||
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
|
|
||||||
filter: brightness(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
background: transparent;
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
color: white;
|
|
||||||
border-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-danger {
|
|
||||||
background: rgba(239, 68, 68, 0.1);
|
|
||||||
color: #ef4444;
|
|
||||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-danger:hover {
|
|
||||||
background: #ef4444;
|
|
||||||
color: white;
|
|
||||||
box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.modal-content {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
max-height: 100vh;
|
|
||||||
border-radius: 0;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-title { padding: 1.5rem 1.5rem 1rem; }
|
|
||||||
.modal-body { padding: 0 1.5rem; }
|
|
||||||
.modal-fields-grid { display: flex; flex-direction: column; gap: 1.2rem; }
|
|
||||||
|
|
||||||
.form-group, .form-group.notes-group,
|
|
||||||
.form-group.checkbox-group, .form-group.full-width {
|
|
||||||
grid-column: auto;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-group { flex-direction: column; gap: 1rem; }
|
|
||||||
.modal-actions {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.8rem;
|
|
||||||
padding: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary, .btn-secondary, .btn-danger { width: 100%; padding: 1rem; }
|
|
||||||
.btn-primary { order: 1; }
|
|
||||||
.btn-secondary { order: 2; }
|
|
||||||
.btn-danger { order: 3; margin-top: 0.5rem; }
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="date"].form-input {
|
|
||||||
display: block; /* Elimina el comportamiento flex */
|
|
||||||
text-align: left; /* Asegura alineación a la izquierda */
|
|
||||||
padding-top: 10px; /* Ajuste pequeño para centrar verticalmente si es necesario */
|
|
||||||
}
|
|
||||||
@@ -1,291 +0,0 @@
|
|||||||
/* create-room.css */
|
|
||||||
.cr-modal-overlay {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.7);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
display: none;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 10001; /* Mayor que el navbar */
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cr-modal-overlay.show {
|
|
||||||
display: flex;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cr-modal-content {
|
|
||||||
background: rgba(20, 20, 20, 0.95);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 32px;
|
|
||||||
max-width: 450px;
|
|
||||||
width: 90%;
|
|
||||||
position: relative;
|
|
||||||
transform: scale(0.95);
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cr-modal-overlay.show .cr-modal-content {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cr-modal-close {
|
|
||||||
position: absolute;
|
|
||||||
top: 20px;
|
|
||||||
right: 20px;
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
color: rgba(255, 255, 255, 0.5);
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 5px;
|
|
||||||
transition: color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cr-modal-close:hover {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cr-modal-title {
|
|
||||||
margin: 0 0 24px 0;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: 800;
|
|
||||||
color: white;
|
|
||||||
background: linear-gradient(to right, #fff, #a78bfa);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cr-form-group {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cr-form-group label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #e5e7eb;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cr-input {
|
|
||||||
width: 100%;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
color: white;
|
|
||||||
padding: 12px 16px;
|
|
||||||
border-radius: 10px;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
outline: none;
|
|
||||||
transition: border-color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cr-input:focus {
|
|
||||||
border-color: #8b5cf6; /* Tu color primario */
|
|
||||||
}
|
|
||||||
|
|
||||||
.cr-actions {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 12px;
|
|
||||||
margin-top: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cr-btn-cancel {
|
|
||||||
background: transparent;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
color: rgba(255, 255, 255, 0.8);
|
|
||||||
padding: 10px 20px;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cr-btn-confirm {
|
|
||||||
background: #8b5cf6;
|
|
||||||
border: none;
|
|
||||||
color: white;
|
|
||||||
padding: 10px 24px;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-weight: 700;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cr-btn-confirm:hover {
|
|
||||||
background: #7c3aed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cr-btn-confirm:disabled {
|
|
||||||
opacity: 0.7;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Add to room.css */
|
|
||||||
.modal-header-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-icon-small {
|
|
||||||
background: rgba(255,255,255,0.1);
|
|
||||||
border: none;
|
|
||||||
color: white;
|
|
||||||
padding: 6px;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.config-grid {
|
|
||||||
display: flex;
|
|
||||||
gap: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.config-poster img {
|
|
||||||
width: 140px;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.config-form {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-select, .form-input {
|
|
||||||
width: 100%;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
color: white;
|
|
||||||
padding: 10px 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
outline: none;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-select:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-row {
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group.half {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.full-width {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.config-grid { flex-direction: column; align-items: center; }
|
|
||||||
.config-poster img { width: 100px; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-icon-small {
|
|
||||||
background: rgba(255,255,255,0.1);
|
|
||||||
border: none;
|
|
||||||
color: white;
|
|
||||||
padding: 6px;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-icon-small:hover {
|
|
||||||
background: rgba(255,255,255,0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Config Grid Layout */
|
|
||||||
.config-grid {
|
|
||||||
display: flex;
|
|
||||||
gap: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.config-poster img {
|
|
||||||
width: 140px;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
|
|
||||||
border: 1px solid rgba(255,255,255,0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.config-form {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Form Elements */
|
|
||||||
.form-select, .form-input {
|
|
||||||
width: 100%;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
color: white;
|
|
||||||
padding: 10px 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
outline: none;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-select:focus, .form-input:focus {
|
|
||||||
border-color: var(--brand-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-select:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Form Select specific for dark mode options */
|
|
||||||
.form-select option {
|
|
||||||
background: #1a1a1a;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-row {
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group.half {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.full-width {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile Responsiveness */
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.config-grid { flex-direction: column; align-items: center; }
|
|
||||||
.config-poster img { width: 100px; }
|
|
||||||
.form-row { flex-direction: column; gap: 0; }
|
|
||||||
}
|
|
||||||
@@ -1,282 +0,0 @@
|
|||||||
/* match-modal.css */
|
|
||||||
:root {
|
|
||||||
--match-primary: #8b5cf6;
|
|
||||||
--match-bg: rgba(15, 15, 15, 0.95);
|
|
||||||
--match-border: rgba(255, 255, 255, 0.1);
|
|
||||||
--match-input-bg: rgba(0, 0, 0, 0.4);
|
|
||||||
--match-text-muted: #a1a1aa;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Overlay Global con efecto Glass */
|
|
||||||
.match-modal-overlay {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.85);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
z-index: 9999;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 1rem;
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.match-modal-overlay.active {
|
|
||||||
opacity: 1;
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Contenido del Modal */
|
|
||||||
.match-modal-content {
|
|
||||||
background: var(--match-bg);
|
|
||||||
border: 1px solid var(--match-border);
|
|
||||||
border-radius: 16px;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 700px; /* Un poco más ancho para mejor lectura */
|
|
||||||
max-height: 85vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
box-shadow:
|
|
||||||
0 25px 80px rgba(0, 0, 0, 0.9),
|
|
||||||
0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
||||||
transform: scale(0.95) translateY(10px);
|
|
||||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.match-modal-overlay.active .match-modal-content {
|
|
||||||
transform: scale(1) translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Header Estilizado */
|
|
||||||
.match-header {
|
|
||||||
padding: 1.5rem 2rem;
|
|
||||||
border-bottom: 1px solid var(--match-border);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
background: linear-gradient(to bottom, rgba(255,255,255,0.02), transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.match-title {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: 800;
|
|
||||||
margin: 0;
|
|
||||||
letter-spacing: -0.02em;
|
|
||||||
/* Efecto gradiente en el texto como en anilist-modal */
|
|
||||||
background: linear-gradient(to right, #fff, #aaa);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
#match-provider-badge {
|
|
||||||
opacity: 0.6;
|
|
||||||
font-size: 0.8em;
|
|
||||||
margin-left: 8px;
|
|
||||||
font-weight: normal;
|
|
||||||
-webkit-text-fill-color: #888; /* Resetear el gradiente para el badge */
|
|
||||||
}
|
|
||||||
|
|
||||||
.match-close-btn {
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border: 1px solid var(--match-border);
|
|
||||||
color: #ccc;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.match-close-btn:hover {
|
|
||||||
background: #ef4444;
|
|
||||||
border-color: #ef4444;
|
|
||||||
color: white;
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Buscador y Controles */
|
|
||||||
.match-search-container {
|
|
||||||
padding: 1.5rem 2rem 1rem 2rem;
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
background: rgba(0,0,0,0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.match-input {
|
|
||||||
flex: 1;
|
|
||||||
background: var(--match-input-bg);
|
|
||||||
border: 1px solid var(--match-border);
|
|
||||||
color: white;
|
|
||||||
padding: 1rem 1.2rem;
|
|
||||||
border-radius: 10px;
|
|
||||||
font-size: 1rem;
|
|
||||||
font-family: inherit;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.match-input:focus {
|
|
||||||
background: rgba(0,0,0,0.6);
|
|
||||||
border-color: var(--match-primary);
|
|
||||||
box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.match-search-btn {
|
|
||||||
padding: 0 1.8rem;
|
|
||||||
background: var(--match-primary);
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 10px;
|
|
||||||
font-weight: 700;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.match-search-btn:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
|
|
||||||
filter: brightness(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Lista de Resultados */
|
|
||||||
.match-results-body {
|
|
||||||
flex: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 0.5rem 2rem 2rem 2rem;
|
|
||||||
scrollbar-width: thin;
|
|
||||||
scrollbar-color: rgba(255,255,255,0.2) transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.match-results-body::-webkit-scrollbar { width: 6px; }
|
|
||||||
.match-results-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
|
|
||||||
|
|
||||||
.match-list-grid {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.8rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tarjeta de Resultado Mejorada */
|
|
||||||
.match-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1.2rem;
|
|
||||||
background: rgba(255, 255, 255, 0.02);
|
|
||||||
padding: 0.8rem;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.match-item:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.06);
|
|
||||||
border-color: rgba(255, 255, 255, 0.1);
|
|
||||||
transform: translateX(4px);
|
|
||||||
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.match-poster {
|
|
||||||
width: 50px;
|
|
||||||
height: 72px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #222;
|
|
||||||
flex-shrink: 0;
|
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.match-info {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 0.3rem;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.match-item-title {
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #fff;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.match-item-meta {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: var(--match-text-muted);
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Botón de enlace externo refinado */
|
|
||||||
.match-link-btn {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border-radius: 8px;
|
|
||||||
color: rgba(255, 255, 255, 0.4);
|
|
||||||
transition: all 0.2s;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.match-link-btn:hover {
|
|
||||||
background: var(--match-primary);
|
|
||||||
color: white;
|
|
||||||
border-color: var(--match-primary);
|
|
||||||
transform: scale(1.05);
|
|
||||||
box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mensajes y Spinner */
|
|
||||||
.match-spinner {
|
|
||||||
width: 40px; height: 40px;
|
|
||||||
border: 3px solid rgba(255,255,255,0.1);
|
|
||||||
border-top-color: var(--match-primary);
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 0.8s linear infinite;
|
|
||||||
margin: 3rem auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin { to { transform: rotate(360deg); } }
|
|
||||||
|
|
||||||
.match-msg {
|
|
||||||
text-align: center;
|
|
||||||
color: var(--match-text-muted);
|
|
||||||
margin-top: 3rem;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
.match-msg.error { color: #ef4444; }
|
|
||||||
|
|
||||||
/* Responsive */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.match-modal-content {
|
|
||||||
height: 100%;
|
|
||||||
max-height: 100vh;
|
|
||||||
border-radius: 0;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
.match-search-container {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.8rem;
|
|
||||||
}
|
|
||||||
.match-search-btn {
|
|
||||||
width: 100%;
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,451 +0,0 @@
|
|||||||
:root {
|
|
||||||
--titlebar-height: 40px;
|
|
||||||
--primary-glass: rgba(9, 9, 11, 0.95);
|
|
||||||
--border-color: rgba(139, 92, 246, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
background: #09090b;
|
|
||||||
visibility: hidden;
|
|
||||||
scrollbar-gutter: stable;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.electron {
|
|
||||||
margin: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.electron .navbar,
|
|
||||||
html.electron .top-bar,
|
|
||||||
html.electron .panel-header {
|
|
||||||
top: var(--titlebar-height) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.electron .player-wrapper {
|
|
||||||
top: var(--titlebar-height);
|
|
||||||
height: calc(100% - var(--titlebar-height));
|
|
||||||
}
|
|
||||||
|
|
||||||
html.electron .panel-content {
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.electron .calendar-wrapper {
|
|
||||||
margin-top: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.electron .back-btn {
|
|
||||||
top: 55px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#back-link {
|
|
||||||
margin-top: 55px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar {
|
|
||||||
width: calc(100vw - 12px); display: none;
|
|
||||||
|
|
||||||
height: var(--titlebar-height);
|
|
||||||
background: var(--primary-glass);
|
|
||||||
color: white;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding-left: 12px;
|
|
||||||
padding-right: 0;
|
|
||||||
|
|
||||||
-webkit-app-region: drag;
|
|
||||||
user-select: none;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 999999;
|
|
||||||
|
|
||||||
font-family: "Inter", system-ui, sans-serif;
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar .app-icon {
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 5px;
|
|
||||||
background: rgba(139, 92, 246, 0.1);
|
|
||||||
border: 1px solid rgba(139, 92, 246, 0.25);
|
|
||||||
padding: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar .app-icon img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-title {
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: rgba(255, 255, 255, 0.9);
|
|
||||||
letter-spacing: -0.1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-drag-area {
|
|
||||||
flex-grow: 1;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-right {
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
align-items: center;
|
|
||||||
-webkit-app-region: no-drag;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-box {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
margin-right: 12px;
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
transition: background 0.2s;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-box:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-box img {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
border-radius: 50%;
|
|
||||||
object-fit: cover;
|
|
||||||
border: 1px solid rgba(139, 92, 246, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-box span {
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
opacity: 0.9;
|
|
||||||
color: #e4e4e7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.window-controls {
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-btn {
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
color: #a1a1aa;
|
|
||||||
width: 46px;
|
|
||||||
height: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: all 0.2s;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-btn:hover {
|
|
||||||
color: white;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-btn.min:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-btn.max:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-btn.close:hover {
|
|
||||||
background: #e81123;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-btn:active {
|
|
||||||
background: rgba(255, 255, 255, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-btn.close:active {
|
|
||||||
background: #bf0f1d;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.electron::-webkit-scrollbar {
|
|
||||||
width: 12px;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.electron::-webkit-scrollbar-track {
|
|
||||||
background: #09090b;
|
|
||||||
margin-top: var(--titlebar-height);
|
|
||||||
border-left: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
html.electron::-webkit-scrollbar-thumb {
|
|
||||||
background: rgba(139, 92, 246, 0.3);
|
|
||||||
border-radius: 6px;
|
|
||||||
border: 2px solid #09090b;
|
|
||||||
background-clip: content-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.electron::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: rgba(139, 92, 246, 0.5);
|
|
||||||
border: 2px solid #09090b;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.electron #room-view {
|
|
||||||
height: calc(100vh - var(--titlebar-height));
|
|
||||||
margin-top: var(--titlebar-height);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.electron #room-view .room-layout {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar-user-box {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar-dropdown {
|
|
||||||
position: absolute;
|
|
||||||
top: calc(100% + 8px);
|
|
||||||
right: 0;
|
|
||||||
width: 240px;
|
|
||||||
background: rgba(18, 18, 21, 0.98);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
|
|
||||||
|
|
||||||
display: none;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 1000001;
|
|
||||||
|
|
||||||
transform-origin: top right;
|
|
||||||
animation: titlebarDropdownSlide 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar-dropdown.active {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes titlebarDropdownSlide {
|
|
||||||
from { opacity: 0; transform: scale(0.95) translateY(-5px); }
|
|
||||||
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar-dropdown .dropdown-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
padding: 16px;
|
|
||||||
background: rgba(139, 92, 246, 0.05);
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar-dropdown .dropdown-avatar {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 2px solid #8b5cf6;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar-dropdown .dropdown-user-info {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar-dropdown .dropdown-username {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar-dropdown .dropdown-status {
|
|
||||||
font-size: 11px;
|
|
||||||
color: #22c55e;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar-dropdown .dropdown-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
padding: 10px 16px;
|
|
||||||
color: #a1a1aa;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 13px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
width: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
font-family: inherit;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar-dropdown .dropdown-item:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
color: white;
|
|
||||||
padding-left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar-dropdown .dropdown-item svg {
|
|
||||||
color: inherit;
|
|
||||||
transition: transform 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar-dropdown .dropdown-item:hover svg {
|
|
||||||
color: #8b5cf6;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar-dropdown .dropdown-divider {
|
|
||||||
height: 1px;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
margin: 4px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar-dropdown .logout-item {
|
|
||||||
color: #ef4444;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar-dropdown .logout-item:hover {
|
|
||||||
background: rgba(239, 68, 68, 0.1);
|
|
||||||
color: #f87171;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar-dropdown .logout-item:hover svg {
|
|
||||||
color: #f87171;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.electron::-webkit-scrollbar {
|
|
||||||
width: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.electron::-webkit-scrollbar-track {
|
|
||||||
margin-top: var(--titlebar-height);
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar .control-btn {
|
|
||||||
width: 46px !important;
|
|
||||||
height: 100% !important;
|
|
||||||
color: #a1a1aa;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar .control-btn svg {
|
|
||||||
width: auto !important;
|
|
||||||
height: auto !important;
|
|
||||||
max-width: 14px;
|
|
||||||
max-height: 14px;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar .app-icon img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
max-width: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Nuevo estilo para la parte derecha */
|
|
||||||
.title-right {
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
align-items: center;
|
|
||||||
-webkit-app-region: no-drag;
|
|
||||||
gap: 0; /* Quitamos gap general para controlar mejor los botones */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Botones de acción (Settings, etc) */
|
|
||||||
.title-action-btn {
|
|
||||||
width: 40px; /* Un poco más estrechos que los controles de ventana */
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
color: #a1a1aa;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-action-btn:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.08);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-action-btn svg {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Contenedor del Avatar */
|
|
||||||
.title-avatar-link {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0 10px; /* Espacio a los lados */
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background 0.2s;
|
|
||||||
/* Quitamos el borde por defecto de los links */
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-avatar-link:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-avatar-link img {
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
border-radius: 50%;
|
|
||||||
object-fit: cover;
|
|
||||||
border: 1px solid rgba(139, 92, 246, 0.4); /* Borde morado sutil */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Separador visual antes de los controles de ventana */
|
|
||||||
.title-sep {
|
|
||||||
width: 1px;
|
|
||||||
height: 16px;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
margin: 0 4px;
|
|
||||||
}
|
|
||||||
@@ -1,96 +0,0 @@
|
|||||||
/* home.css - Estilo Streaming Profesional (Sin modificar cards/flechas) */
|
|
||||||
|
|
||||||
/* 1. Fondo y Fusión del Layout */
|
|
||||||
body {
|
|
||||||
background-color: #0b0b0b; /* Fondo oscuro profundo */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Efecto de superposición: El contenido sube sobre el banner */
|
|
||||||
main#online-content {
|
|
||||||
position: relative;
|
|
||||||
z-index: 10;
|
|
||||||
margin-top: -12vh; /* Sube el contenido visualmente hacia el banner */
|
|
||||||
padding-top: 3rem;
|
|
||||||
/* Degradado para que el corte no sea brusco */
|
|
||||||
background: linear-gradient(to bottom, transparent 0%, #0b0b0b 15%);
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Estilizamos los botones del Hero para igualar a anime.css */
|
|
||||||
.hero-buttons .btn-primary {
|
|
||||||
background: white;
|
|
||||||
color: black;
|
|
||||||
font-weight: 800;
|
|
||||||
border: none;
|
|
||||||
padding: 0.9rem 2.4rem;
|
|
||||||
border-radius: 8px; /* Bordes menos redondos, más modernos */
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-buttons .btn-blur {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
font-weight: 700;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 3. Títulos de Secciones */
|
|
||||||
/* Añadimos un acento de color a la izquierda */
|
|
||||||
.section-header {
|
|
||||||
border-left: 5px solid var(--color-primary); /* Línea morada vertical */
|
|
||||||
padding-left: 1rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 1.6rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #fff;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 4. Botón Flotante (Modo Biblioteca) */
|
|
||||||
/* Estilo Glassmorphism sin cambiar su posición */
|
|
||||||
.library-mode-btn {
|
|
||||||
width: 56px;
|
|
||||||
height: 56px;
|
|
||||||
bottom: 2rem;
|
|
||||||
right: 2rem;
|
|
||||||
background: rgba(20, 20, 23, 0.6);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
-webkit-backdrop-filter: blur(10px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
||||||
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
|
|
||||||
border-radius: 16px; /* Cuadrado redondeado en vez de círculo total */
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.library-mode-btn svg {
|
|
||||||
width: 26px;
|
|
||||||
height: 26px;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.library-mode-btn:hover {
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4); /* Glow morado */
|
|
||||||
}
|
|
||||||
|
|
||||||
.library-mode-btn:hover svg {
|
|
||||||
opacity: 1;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ajustes Responsive para que el overlap no rompa el móvil */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
main#online-content {
|
|
||||||
margin-top: -5vh; /* Menos subida en móvil */
|
|
||||||
background: linear-gradient(to bottom, transparent 0%, #0b0b0b 10%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,267 +0,0 @@
|
|||||||
:root {
|
|
||||||
--bg-base: #0b0b0b;
|
|
||||||
--bg-card: rgba(255, 255, 255, 0.03);
|
|
||||||
--bg-card-hover: rgba(255, 255, 255, 0.08);
|
|
||||||
--border-subtle: rgba(255, 255, 255, 0.08);
|
|
||||||
--color-primary: #8b5cf6;
|
|
||||||
--color-primary-glow: rgba(139, 92, 246, 0.5);
|
|
||||||
--color-text-main: #ffffff;
|
|
||||||
--color-text-muted: #a1a1aa;
|
|
||||||
--nav-height: 70px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: var(--bg-base);
|
|
||||||
color: var(--color-text-main);
|
|
||||||
font-family: system-ui, -apple-system, sans-serif;
|
|
||||||
margin: 0;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-spacer { height: var(--nav-height); width: 100%; }
|
|
||||||
|
|
||||||
.content-container {
|
|
||||||
max-width: 1400px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 2rem 1.5rem 5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Header & Config --- */
|
|
||||||
.mp-header { margin-bottom: 3rem; }
|
|
||||||
|
|
||||||
.header-top {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
font-weight: 800;
|
|
||||||
margin: 0;
|
|
||||||
background: linear-gradient(to right, #fff, #a1a1aa);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Buttons */
|
|
||||||
.btn-primary, .btn-secondary, .btn-danger {
|
|
||||||
padding: 0.6rem 1.2rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: var(--color-primary);
|
|
||||||
color: white;
|
|
||||||
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
|
|
||||||
}
|
|
||||||
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
background: rgba(255,255,255,0.05);
|
|
||||||
color: white;
|
|
||||||
border-color: var(--border-subtle);
|
|
||||||
}
|
|
||||||
.btn-secondary:hover { background: rgba(255,255,255,0.1); }
|
|
||||||
|
|
||||||
.btn-danger {
|
|
||||||
background: rgba(220, 38, 38, 0.2);
|
|
||||||
color: #f87171;
|
|
||||||
border-color: rgba(220, 38, 38, 0.3);
|
|
||||||
}
|
|
||||||
.btn-danger:hover { background: rgba(220, 38, 38, 0.3); }
|
|
||||||
|
|
||||||
/* Config Panel */
|
|
||||||
.config-panel {
|
|
||||||
background: rgba(20, 20, 25, 0.95);
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 1.5rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
animation: slideDown 0.3s ease-out;
|
|
||||||
}
|
|
||||||
.config-panel.hidden { display: none; }
|
|
||||||
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
|
|
||||||
|
|
||||||
.config-desc { color: var(--color-text-muted); font-size: 0.9rem; margin-top: 0.5rem; }
|
|
||||||
.input-group { display: flex; gap: 10px; margin: 1rem 0; }
|
|
||||||
.input-group input {
|
|
||||||
flex: 1;
|
|
||||||
background: rgba(0,0,0,0.3);
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 0.8rem 1rem;
|
|
||||||
color: white;
|
|
||||||
font-family: inherit;
|
|
||||||
}
|
|
||||||
.input-group input:focus { outline: none; border-color: var(--color-primary); }
|
|
||||||
.btn-text { background: none; border: none; color: var(--color-text-muted); text-decoration: underline; cursor: pointer; font-size: 0.85rem; }
|
|
||||||
|
|
||||||
/* Tabs */
|
|
||||||
.tabs-wrapper {
|
|
||||||
display: flex;
|
|
||||||
gap: 2rem;
|
|
||||||
border-bottom: 1px solid var(--border-subtle);
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
.tab-btn {
|
|
||||||
background: none; border: none;
|
|
||||||
color: var(--color-text-muted);
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 700;
|
|
||||||
padding: 0.8rem 0;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
transition: color 0.2s;
|
|
||||||
}
|
|
||||||
.tab-btn.active { color: white; }
|
|
||||||
.tab-btn.active::after {
|
|
||||||
content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px;
|
|
||||||
background: var(--color-primary); box-shadow: 0 0 10px var(--color-primary-glow);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Toolbar */
|
|
||||||
.toolbar { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-end; justify-content: space-between; margin-bottom: 2rem; }
|
|
||||||
.filter-group { display: flex; gap: 1.5rem; }
|
|
||||||
.select-wrapper { display: flex; flex-direction: column; gap: 6px; }
|
|
||||||
.select-wrapper label { font-size: 0.75rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; }
|
|
||||||
.select-wrapper select {
|
|
||||||
background: var(--bg-card);
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
color: white;
|
|
||||||
padding: 0.6rem 2.5rem 0.6rem 1rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
appearance: none;
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: right 8px center;
|
|
||||||
background-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
min-width: 140px;
|
|
||||||
}
|
|
||||||
.select-wrapper select:hover { background-color: var(--bg-card-hover); }
|
|
||||||
|
|
||||||
/* --- Grid & Cards --- */
|
|
||||||
.category-title {
|
|
||||||
font-size: 1.4rem; font-weight: 700; margin: 2.5rem 0 1rem;
|
|
||||||
color: white; display: flex; align-items: center; gap: 0.8rem;
|
|
||||||
}
|
|
||||||
.category-title::before { content: ''; display: block; width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; box-shadow: 0 0 10px var(--color-primary); }
|
|
||||||
|
|
||||||
.mp-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mp-card {
|
|
||||||
background: var(--bg-card);
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 1.2rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mp-card:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
background: var(--bg-card-hover);
|
|
||||||
border-color: rgba(255,255,255,0.2);
|
|
||||||
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-header { display: flex; gap: 1rem; margin-bottom: 1rem; }
|
|
||||||
.card-icon {
|
|
||||||
width: 56px; height: 56px; border-radius: 12px;
|
|
||||||
background: #000; object-fit: contain;
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
}
|
|
||||||
.card-info { flex: 1; min-width: 0; }
|
|
||||||
.card-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 4px 0; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
||||||
.card-author { font-size: 0.85rem; color: var(--color-text-muted); }
|
|
||||||
|
|
||||||
.card-desc {
|
|
||||||
font-size: 0.9rem; color: #ccc; line-height: 1.5;
|
|
||||||
margin-bottom: 1.2rem; flex: 1;
|
|
||||||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-meta { display: flex; gap: 0.5rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
|
|
||||||
.pill {
|
|
||||||
font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 4px;
|
|
||||||
border: 1px solid transparent; text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Specific Pills */
|
|
||||||
.pill.lang-multi { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border-color: rgba(59, 130, 246, 0.3); }
|
|
||||||
.pill.lang-es { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border-color: rgba(245, 158, 11, 0.3); }
|
|
||||||
.pill.lang-en { background: rgba(16, 185, 129, 0.15); color: #34d399; border-color: rgba(16, 185, 129, 0.3); }
|
|
||||||
.pill.lang-jp { background: rgba(236, 72, 153, 0.15); color: #f472b6; border-color: rgba(236, 72, 153, 0.3); }
|
|
||||||
|
|
||||||
.pill.status-installed { background: rgba(139, 92, 246, 0.15); color: #a78bfa; border-color: rgba(139, 92, 246, 0.3); }
|
|
||||||
.pill.nsfw { background: rgba(220, 38, 38, 0.1); color: #ef4444; border-color: rgba(220, 38, 38, 0.3); }
|
|
||||||
|
|
||||||
.card-actions { margin-top: auto; }
|
|
||||||
.btn-card { width: 100%; justify-content: center; }
|
|
||||||
|
|
||||||
/* Empty States */
|
|
||||||
.empty-state {
|
|
||||||
text-align: center; padding: 4rem 1rem;
|
|
||||||
background: var(--bg-card); border-radius: 16px; border: 1px dashed var(--border-subtle);
|
|
||||||
}
|
|
||||||
.empty-icon { width: 64px; height: 64px; margin-bottom: 1rem; opacity: 0.5; }
|
|
||||||
.empty-text { font-size: 1.2rem; color: var(--color-text-muted); }
|
|
||||||
|
|
||||||
/* Modal */
|
|
||||||
.modal-overlay {
|
|
||||||
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
|
||||||
background: rgba(0,0,0,0.8); backdrop-filter: blur(5px);
|
|
||||||
display: flex; align-items: center; justify-content: center; z-index: 5000;
|
|
||||||
}
|
|
||||||
.modal-overlay.hidden { display: none; }
|
|
||||||
.modal-box {
|
|
||||||
background: #18181b; border: 1px solid var(--border-subtle);
|
|
||||||
padding: 2rem; border-radius: 16px; width: 90%; max-width: 450px;
|
|
||||||
box-shadow: 0 20px 50px rgba(0,0,0,0.7);
|
|
||||||
}
|
|
||||||
.modal-box h3 { margin-top: 0; color: white; }
|
|
||||||
.modal-box p { color: #ccc; line-height: 1.5; }
|
|
||||||
.modal-footer { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem; }
|
|
||||||
|
|
||||||
/* Añadir al final del CSS existente */
|
|
||||||
|
|
||||||
.mp-card.card-nsfw {
|
|
||||||
border-color: rgba(220, 38, 38, 0.2);
|
|
||||||
background: rgba(220, 38, 38, 0.03);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mp-card.card-nsfw:hover {
|
|
||||||
background: rgba(220, 38, 38, 0.08);
|
|
||||||
border-color: rgba(220, 38, 38, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-wrapper select option {
|
|
||||||
background-color: #18181b; /* Color oscuro sólido (Zinc-900) */
|
|
||||||
color: #ffffff; /* Texto blanco */
|
|
||||||
padding: 10px; /* Espaciado (si el navegador lo permite) */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Opcional: Para navegadores basados en Webkit que permitan algo de estilo en hover */
|
|
||||||
.select-wrapper select option:checked,
|
|
||||||
.select-wrapper select option:hover {
|
|
||||||
background-color: var(--color-primary);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
@@ -1,944 +0,0 @@
|
|||||||
/* =========================================
|
|
||||||
1. LAYOUT & ESTRUCTURA BASE
|
|
||||||
========================================= */
|
|
||||||
.main-wrapper {
|
|
||||||
width: 100%;
|
|
||||||
min-height: 100vh;
|
|
||||||
padding-bottom: 6rem;
|
|
||||||
position: relative;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Efecto de fondo ambiental (Glow superior) */
|
|
||||||
.main-wrapper::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0; left: 0; right: 0;
|
|
||||||
height: 60vh;
|
|
||||||
background: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.15), transparent 70%);
|
|
||||||
z-index: -1;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-container {
|
|
||||||
max-width: 1600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 3rem;
|
|
||||||
animation: fadeInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeInUp {
|
|
||||||
from { opacity: 0; transform: translateY(20px); }
|
|
||||||
to { opacity: 1; transform: translateY(0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================================
|
|
||||||
2. PERFIL (Modern Header)
|
|
||||||
========================================= */
|
|
||||||
.profile-header {
|
|
||||||
background: var(--color-bg-elevated, #18181b);
|
|
||||||
border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.05));
|
|
||||||
padding-bottom: 0;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-banner {
|
|
||||||
height: 200px;
|
|
||||||
background: linear-gradient(120deg, #2e1065, #8b5cf6);
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-body {
|
|
||||||
max-width: 1400px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 3rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-end;
|
|
||||||
gap: 2rem;
|
|
||||||
margin-top: -60px; /* Superposición sobre el banner */
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Avatar */
|
|
||||||
.profile-avatar-wrapper {
|
|
||||||
position: relative;
|
|
||||||
width: 160px;
|
|
||||||
height: 160px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 5px solid var(--color-bg-base, #09090b);
|
|
||||||
object-fit: cover;
|
|
||||||
background: var(--color-bg-elevated, #18181b);
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-edit-overlay {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background: rgba(0,0,0,0.5);
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: white;
|
|
||||||
opacity: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.2s;
|
|
||||||
border: 5px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-avatar-wrapper:hover .avatar-edit-overlay {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Detalles de Texto y Badges */
|
|
||||||
.profile-details {
|
|
||||||
flex-grow: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-end;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.username-wrapper {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-text h1 {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
margin: 0;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-anilist-badge {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: transform 0.2s, box-shadow 0.2s;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-anilist-badge img { width: 100%; height: 100%; object-fit: cover; }
|
|
||||||
.header-anilist-badge:hover { transform: scale(1.1); box-shadow: 0 0 15px rgba(61, 180, 242, 0.5); }
|
|
||||||
|
|
||||||
/* Estadísticas */
|
|
||||||
.profile-stats-grid { display: flex; gap: 1.5rem; }
|
|
||||||
|
|
||||||
.stat-card {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
background: rgba(255,255,255,0.03);
|
|
||||||
padding: 0.5rem 1.5rem;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: 1px solid rgba(255,255,255,0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-value { font-size: 1.4rem; font-weight: 800; color: white; }
|
|
||||||
.stat-label { font-size: 0.8rem; color: var(--color-text-secondary, #a1a1aa); text-transform: uppercase; letter-spacing: 0.5px; }
|
|
||||||
|
|
||||||
/* Responsive Profile */
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
.profile-body { flex-direction: column; align-items: center; margin-top: -100px; text-align: center; }
|
|
||||||
.profile-details { flex-direction: column; align-items: center; width: 100%; }
|
|
||||||
.profile-stats-grid { justify-content: center; width: 100%; }
|
|
||||||
.username-wrapper { justify-content: center; }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================================
|
|
||||||
3. NAVEGACIÓN (Pills Modernos)
|
|
||||||
========================================= */
|
|
||||||
.hub-navigation-modern {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
max-width: 1400px;
|
|
||||||
margin: 1rem auto 0 auto;
|
|
||||||
padding: 0 3rem 1rem 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-pill {
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
color: var(--color-text-secondary, #a1a1aa);
|
|
||||||
padding: 0.6rem 1.2rem;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
font-weight: 600;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-pill:hover { background: rgba(255,255,255,0.05); color: white; }
|
|
||||||
.nav-pill.active { background: var(--color-primary, #8b5cf6); color: white; }
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.hub-navigation-modern { justify-content: center; padding-left: 1rem; padding-right: 1rem; flex-wrap: wrap; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-section {
|
|
||||||
display: none;
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(10px);
|
|
||||||
transition: opacity 0.3s, transform 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-section.active {
|
|
||||||
display: block;
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================================
|
|
||||||
4. TOOLBAR & CONTROLES
|
|
||||||
========================================= */
|
|
||||||
.toolbar {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 2.5rem;
|
|
||||||
background: rgba(255,255,255,0.03);
|
|
||||||
border: 1px solid rgba(255,255,255,0.05);
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
border-radius: 12px;
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Local Toolbar Variant */
|
|
||||||
.toolbar.local-toolbar {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr auto auto;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-box {
|
|
||||||
position: relative;
|
|
||||||
flex-grow: 1;
|
|
||||||
max-width: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-box svg {
|
|
||||||
position: absolute;
|
|
||||||
left: 14px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
color: var(--color-text-muted, #71717a);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input {
|
|
||||||
width: 100%;
|
|
||||||
background: rgba(0,0,0,0.2);
|
|
||||||
border: 1px solid transparent;
|
|
||||||
padding: 0.7rem 1rem 0.7rem 2.8rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
color: white;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input:focus {
|
|
||||||
background: rgba(0,0,0,0.4);
|
|
||||||
border-color: var(--color-primary, #8b5cf6);
|
|
||||||
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters-inline {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.8rem;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.minimal-select {
|
|
||||||
background: rgba(255,255,255,0.05);
|
|
||||||
border: 1px solid rgba(255,255,255,0.08);
|
|
||||||
color: var(--color-text-secondary, #a1a1aa);
|
|
||||||
padding: 0.6rem 2rem 0.6rem 1rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: 0.2s;
|
|
||||||
appearance: none;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a1a1aa'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: right 0.7rem center;
|
|
||||||
background-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.minimal-select option {
|
|
||||||
background-color: var(--color-bg-elevated, #18181b);
|
|
||||||
color: #e4e4e7;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.minimal-select:hover { background: rgba(255,255,255,0.1); color: white; }
|
|
||||||
.minimal-select:focus { border-color: var(--color-primary, #8b5cf6); color: white; }
|
|
||||||
|
|
||||||
.view-toggle {
|
|
||||||
display: flex;
|
|
||||||
background: rgba(0,0,0,0.3);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-btn {
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
color: var(--color-text-muted, #71717a);
|
|
||||||
padding: 0.5rem 0.8rem;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-btn.active, .view-btn:hover { background: rgba(255,255,255,0.1); color: white; }
|
|
||||||
|
|
||||||
/* Switcher Local (Segmented Control) */
|
|
||||||
.local-type-switcher {
|
|
||||||
display: flex;
|
|
||||||
background: rgba(0,0,0,0.3);
|
|
||||||
padding: 4px;
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid rgba(255,255,255,0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.type-pill-btn {
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
color: var(--color-text-secondary, #a1a1aa);
|
|
||||||
padding: 0.5rem 1.2rem;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 600;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.type-pill-btn:hover { color: white; }
|
|
||||||
.type-pill-btn.active {
|
|
||||||
background: var(--color-bg-elevated, #18181b);
|
|
||||||
color: white;
|
|
||||||
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Action Buttons (Scan) */
|
|
||||||
.actions-group {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
border-left: 1px solid rgba(255,255,255,0.1);
|
|
||||||
padding-left: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-icon-btn {
|
|
||||||
background: rgba(255,255,255,0.05);
|
|
||||||
border: 1px solid rgba(255,255,255,0.1);
|
|
||||||
color: var(--color-text-secondary, #a1a1aa);
|
|
||||||
width: 40px; height: 40px;
|
|
||||||
border-radius: 8px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-icon-btn:hover { background: var(--color-primary, #8b5cf6); border-color: var(--color-primary, #8b5cf6); color: white; }
|
|
||||||
.action-icon-btn.danger:hover { background: rgba(239, 68, 68, 0.2); border-color: #ef4444; color: #ef4444; }
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.toolbar { flex-direction: column; align-items: stretch; }
|
|
||||||
.toolbar.local-toolbar { grid-template-columns: 1fr; gap: 1rem; }
|
|
||||||
.actions-group { border-left: none; padding-left: 0; justify-content: flex-end; }
|
|
||||||
.local-type-switcher, .type-pill-btn { width: 100%; flex: 1; }
|
|
||||||
.search-box { max-width: 100%; }
|
|
||||||
.filters-inline { justify-content: space-between; }
|
|
||||||
.minimal-select { flex: 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================================
|
|
||||||
5. LIST GRID (Cards)
|
|
||||||
========================================= */
|
|
||||||
.list-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
||||||
gap: 2rem 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-item {
|
|
||||||
position: relative;
|
|
||||||
border-radius: 8px;
|
|
||||||
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-item:hover { transform: scale(1.05); z-index: 10; }
|
|
||||||
|
|
||||||
.item-poster-link {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
aspect-ratio: 2/3;
|
|
||||||
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-poster {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
transition: filter 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-item:hover .item-poster { filter: brightness(1.1); }
|
|
||||||
|
|
||||||
.item-content { padding-top: 0.8rem; }
|
|
||||||
|
|
||||||
.item-title {
|
|
||||||
font-size: 0.95rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin: 0 0 0.4rem 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
color: rgba(255,255,255,0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-item:hover .item-title { color: var(--color-primary, #8b5cf6); }
|
|
||||||
|
|
||||||
.item-meta {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta-pill {
|
|
||||||
font-size: 0.65rem;
|
|
||||||
padding: 0.15rem 0.4rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-weight: 700;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-pill { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
|
|
||||||
.type-pill { background: rgba(255, 255, 255, 0.1); color: #e4e4e7; }
|
|
||||||
.source-pill { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
|
|
||||||
.repeat-pill { background: rgba(234, 179, 8, 0.15); color: #facc15; }
|
|
||||||
.private-pill { background: rgba(239, 68, 68, 0.15); color: #f87171; }
|
|
||||||
|
|
||||||
.progress-bar-container {
|
|
||||||
height: 4px;
|
|
||||||
background: rgba(255,255,255,0.1);
|
|
||||||
border-radius: 2px;
|
|
||||||
margin-bottom: 0.4rem;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
height: 100%;
|
|
||||||
background: var(--color-primary, #8b5cf6);
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-text {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
color: var(--color-text-secondary, #a1a1aa);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Edit Button (Hover) */
|
|
||||||
.edit-icon-btn {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px; right: 10px;
|
|
||||||
background: rgba(0,0,0,0.7);
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
border: 1px solid rgba(255,255,255,0.2);
|
|
||||||
color: white;
|
|
||||||
width: 32px; height: 32px;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-5px);
|
|
||||||
transition: all 0.2s;
|
|
||||||
z-index: 20;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-item:hover .edit-icon-btn { opacity: 1; transform: translateY(0); }
|
|
||||||
.edit-icon-btn:hover { background: var(--color-primary, #8b5cf6); border-color: var(--color-primary, #8b5cf6); }
|
|
||||||
|
|
||||||
/* Badges adicionales */
|
|
||||||
.unmatched-badge {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px; left: 10px;
|
|
||||||
background: rgba(0, 0, 0, 0.7);
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #fbbf24;
|
|
||||||
display: flex; align-items: center; gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.folder-path-tooltip {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: var(--color-text-muted, #71717a);
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
margin-top: 0.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- LIST VIEW MODE --- */
|
|
||||||
.list-grid.list-view { grid-template-columns: 1fr; gap: 1rem; }
|
|
||||||
|
|
||||||
.list-grid.list-view .list-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background: var(--color-bg-elevated, #18181b);
|
|
||||||
padding: 1rem;
|
|
||||||
border: 1px solid rgba(255,255,255,0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-grid.list-view .list-item:hover {
|
|
||||||
transform: scale(1.01);
|
|
||||||
border-color: var(--color-primary, #8b5cf6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-grid.list-view .item-poster-link { width: 60px; aspect-ratio: 2/3; margin-right: 1.5rem; flex-shrink: 0; }
|
|
||||||
.list-grid.list-view .item-content { padding-top: 0; flex-grow: 1; display: flex; align-items: center; justify-content: space-between; }
|
|
||||||
.list-grid.list-view .item-title { font-size: 1.1rem; margin-bottom: 0.2rem; }
|
|
||||||
.list-grid.list-view .edit-icon-btn { position: static; opacity: 1; transform: none; background: transparent; border: 1px solid rgba(255,255,255,0.1); }
|
|
||||||
|
|
||||||
/* =========================================
|
|
||||||
6. CONFIGURACIÓN (Stream Style)
|
|
||||||
========================================= */
|
|
||||||
.stream-settings-container {
|
|
||||||
max-width: 800px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding-top: 1rem;
|
|
||||||
color: #e5e5e5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stream-section {
|
|
||||||
margin-bottom: 2.5rem;
|
|
||||||
padding-bottom: 2.5rem;
|
|
||||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stream-section.no-border { border-bottom: none; }
|
|
||||||
|
|
||||||
.section-label {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
color: #a1a1aa;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Row de Perfil */
|
|
||||||
.stream-profile-row { display: flex; gap: 3rem; align-items: flex-start; }
|
|
||||||
|
|
||||||
.stream-avatar-wrapper {
|
|
||||||
position: relative;
|
|
||||||
width: 120px; height: 120px;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
flex-shrink: 0;
|
|
||||||
background: #27272a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stream-avatar-wrapper img { width: 100%; height: 100%; object-fit: cover; }
|
|
||||||
|
|
||||||
.avatar-overlay {
|
|
||||||
position: absolute; inset: 0;
|
|
||||||
background: rgba(0,0,0,0.6);
|
|
||||||
display: flex; align-items: center; justify-content: center;
|
|
||||||
opacity: 0; cursor: pointer; transition: 0.2s;
|
|
||||||
font-weight: 600; text-transform: uppercase; font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stream-avatar-wrapper:hover .avatar-overlay { opacity: 1; }
|
|
||||||
|
|
||||||
.stream-inputs-col { flex-grow: 1; display: flex; flex-direction: column; gap: 1.5rem; }
|
|
||||||
|
|
||||||
/* Formularios */
|
|
||||||
.stream-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: end; }
|
|
||||||
|
|
||||||
.stream-input-group { display: flex; flex-direction: column; gap: 0.5rem; }
|
|
||||||
.stream-input-group label { font-size: 0.85rem; color: #d4d4d8; font-weight: 500; }
|
|
||||||
|
|
||||||
.stream-input {
|
|
||||||
background: #27272a;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 0.8rem 1rem;
|
|
||||||
color: white;
|
|
||||||
font-size: 1rem;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stream-input:focus { background: #3f3f46; outline: none; border-color: var(--color-primary, #8b5cf6); }
|
|
||||||
|
|
||||||
/* Botones Settings */
|
|
||||||
.stream-actions { margin-top: 0.5rem; }
|
|
||||||
|
|
||||||
.btn-stream-primary {
|
|
||||||
background: white; color: black;
|
|
||||||
border: none; padding: 0.7rem 2rem;
|
|
||||||
font-weight: 700; border-radius: 4px;
|
|
||||||
cursor: pointer; transition: 0.2s;
|
|
||||||
}
|
|
||||||
.btn-stream-primary:hover { background: #d4d4d8; }
|
|
||||||
|
|
||||||
.btn-stream-ghost {
|
|
||||||
background: transparent; border: 1px solid #52525b;
|
|
||||||
color: white; padding: 0.75rem 1.5rem;
|
|
||||||
border-radius: 4px; cursor: pointer;
|
|
||||||
font-weight: 600; height: 46px;
|
|
||||||
}
|
|
||||||
.btn-stream-ghost:hover { border-color: white; background: rgba(255,255,255,0.05); }
|
|
||||||
|
|
||||||
/* Integraciones */
|
|
||||||
.stream-integration-row {
|
|
||||||
display: flex; justify-content: space-between; align-items: center;
|
|
||||||
background: rgba(255,255,255,0.03);
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.int-info { display: flex; align-items: center; gap: 1rem; }
|
|
||||||
.int-logo { width: 32px; height: 32px; }
|
|
||||||
.int-text { display: flex; flex-direction: column; }
|
|
||||||
.int-name { font-weight: 700; font-size: 1rem; }
|
|
||||||
.int-status { font-size: 0.85rem; color: #a1a1aa; }
|
|
||||||
|
|
||||||
.btn-stream-outline {
|
|
||||||
background: transparent; border: none;
|
|
||||||
color: var(--color-primary, #8b5cf6);
|
|
||||||
font-weight: 600; cursor: pointer; font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
.btn-stream-outline:hover { text-decoration: underline; }
|
|
||||||
.btn-danger-outline { color: #ef4444; border: 1px solid #ef4444; padding: 0.5rem 1rem; border-radius: 4px; }
|
|
||||||
|
|
||||||
.link-danger {
|
|
||||||
background: transparent; border: none;
|
|
||||||
color: #ef4444; font-size: 1rem;
|
|
||||||
cursor: pointer; padding: 0;
|
|
||||||
text-decoration: underline; opacity: 0.8;
|
|
||||||
}
|
|
||||||
.link-danger:hover { opacity: 1; }
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.stream-profile-row { flex-direction: column; align-items: center; text-align: center; gap: 2rem; }
|
|
||||||
.stream-form-row { grid-template-columns: 1fr; }
|
|
||||||
.btn-stream-ghost { width: 100%; }
|
|
||||||
.stream-actions { display: flex; justify-content: center; }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================================
|
|
||||||
7. UTILIDADES & ESTADOS (Loading/Console)
|
|
||||||
========================================= */
|
|
||||||
.loading-state {
|
|
||||||
display: flex; flex-direction: column; align-items: center;
|
|
||||||
justify-content: center; padding: 4rem 0;
|
|
||||||
color: var(--color-text-secondary, #a1a1aa);
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner {
|
|
||||||
width: 40px; height: 40px;
|
|
||||||
border: 3px solid rgba(139, 92, 246, 0.1);
|
|
||||||
border-top-color: var(--color-primary, #8b5cf6);
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 0.8s linear infinite;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
.spinner.small { width: 20px; height: 20px; border-width: 2px; margin-bottom: 0; }
|
|
||||||
@keyframes spin { to { transform: rotate(360deg); } }
|
|
||||||
|
|
||||||
.empty-state {
|
|
||||||
text-align: center; padding: 5rem 2rem;
|
|
||||||
background: rgba(255,255,255,0.02);
|
|
||||||
border-radius: 20px;
|
|
||||||
border: 2px dashed rgba(255,255,255,0.05);
|
|
||||||
}
|
|
||||||
.empty-state p { font-size: 1.2rem; color: var(--color-text-secondary, #a1a1aa); margin-bottom: 1.5rem; }
|
|
||||||
|
|
||||||
.btn-blur {
|
|
||||||
background: rgba(255,255,255,0.1); backdrop-filter: blur(10px);
|
|
||||||
border: 1px solid rgba(255,255,255,0.2);
|
|
||||||
color: white; padding: 0.8rem 1.5rem;
|
|
||||||
border-radius: 99px; text-decoration: none;
|
|
||||||
display: inline-block; transition: 0.2s;
|
|
||||||
}
|
|
||||||
.btn-blur:hover { background: white; color: black; }
|
|
||||||
|
|
||||||
.console-output {
|
|
||||||
background: #09090b; border: 1px solid #27272a;
|
|
||||||
padding: 1.5rem; border-radius: 12px;
|
|
||||||
font-family: 'JetBrains Mono', monospace;
|
|
||||||
font-size: 0.9rem; color: #4ade80;
|
|
||||||
display: flex; align-items: center; gap: 1rem;
|
|
||||||
box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden { display: none !important; }
|
|
||||||
|
|
||||||
/* =========================================
|
|
||||||
8. CUSTOM MODAL (Manual Match)
|
|
||||||
========================================= */
|
|
||||||
.custom-modal-overlay {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.7);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
z-index: 1000;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
opacity: 1;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-modal-overlay.hidden {
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-modal-content {
|
|
||||||
background: var(--color-bg-elevated, #18181b);
|
|
||||||
border: 1px solid var(--border-medium, rgba(255,255,255,0.1));
|
|
||||||
width: 100%;
|
|
||||||
max-width: 500px;
|
|
||||||
border-radius: 16px;
|
|
||||||
box-shadow: var(--shadow-lg);
|
|
||||||
transform: scale(1);
|
|
||||||
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-modal-overlay.hidden .custom-modal-content {
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
padding: 1.5rem;
|
|
||||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header h3 { margin: 0; font-size: 1.25rem; }
|
|
||||||
|
|
||||||
.close-modal-btn {
|
|
||||||
background: transparent; border: none;
|
|
||||||
color: var(--color-text-muted); font-size: 1.5rem;
|
|
||||||
cursor: pointer; line-height: 1;
|
|
||||||
}
|
|
||||||
.close-modal-btn:hover { color: white; }
|
|
||||||
|
|
||||||
.modal-body { padding: 1.5rem; }
|
|
||||||
|
|
||||||
.modal-description {
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
font-size: 0.9rem; margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.path-display {
|
|
||||||
background: rgba(0,0,0,0.3);
|
|
||||||
border: 1px solid rgba(255,255,255,0.1);
|
|
||||||
padding: 0.8rem;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-family: 'Consolas', 'Monaco', monospace;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: #e4e4e7;
|
|
||||||
word-break: break-all;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
max-height: 100px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group { margin-bottom: 1.5rem; }
|
|
||||||
.input-group label {
|
|
||||||
display: block; font-size: 0.85rem;
|
|
||||||
font-weight: 600; color: var(--color-text-secondary);
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-footer {
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
background: rgba(0,0,0,0.2);
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================================
|
|
||||||
DOWNLOAD MANAGER (COMPACTO)
|
|
||||||
========================================= */
|
|
||||||
.downloads-monitor {
|
|
||||||
background: var(--color-bg-elevated, #18181b);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: 12px;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.monitor-header {
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
padding: 0.8rem 1.2rem; /* Header más delgado */
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.monitor-title h3 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: white;
|
|
||||||
display: flex; align-items: center; gap: 0.6rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.monitor-list {
|
|
||||||
padding: 0;
|
|
||||||
max-height: 250px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- ITEM COMPACTO --- */
|
|
||||||
.dl-item.compact {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0.6rem 1.2rem; /* Mucho menos padding vertical */
|
|
||||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
|
||||||
background: transparent;
|
|
||||||
transition: background 0.2s;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dl-item.compact:last-child { border-bottom: none; }
|
|
||||||
.dl-item.compact:hover { background: rgba(255,255,255,0.02); }
|
|
||||||
|
|
||||||
/* Columna Izquierda: Nombres */
|
|
||||||
.dl-left-col {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
overflow: hidden;
|
|
||||||
flex: 1; /* Ocupa el espacio disponible */
|
|
||||||
min-width: 0; /* Permite truncar texto */
|
|
||||||
}
|
|
||||||
|
|
||||||
.dl-filename {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #f4f4f5;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
font-family: 'Consolas', monospace;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dl-folder {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: #71717a;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.4rem;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dl-folder svg {
|
|
||||||
color: var(--color-primary, #8b5cf6);
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Columna Derecha: Progreso y Stats */
|
|
||||||
.dl-right-col {
|
|
||||||
width: 40%; /* Ancho fijo para la zona de progreso */
|
|
||||||
max-width: 300px;
|
|
||||||
min-width: 150px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dl-meta-info {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
color: #a1a1aa;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dl-status-text.completed { color: #4ade80; }
|
|
||||||
.dl-status-text.failed { color: #ef4444; }
|
|
||||||
|
|
||||||
/* Barra de progreso más fina */
|
|
||||||
.dl-progress-track {
|
|
||||||
width: 100%;
|
|
||||||
height: 4px; /* Barra delgada */
|
|
||||||
background: rgba(255,255,255,0.08);
|
|
||||||
border-radius: 2px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dl-progress-fill {
|
|
||||||
height: 100%;
|
|
||||||
background: var(--color-primary, #8b5cf6);
|
|
||||||
border-radius: 2px;
|
|
||||||
transition: width 0.3s ease-out;
|
|
||||||
width: 0%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dl-progress-fill.completed { background: #4ade80; }
|
|
||||||
.dl-progress-fill.failed { background: #ef4444; }
|
|
||||||
|
|
||||||
/* Responsive para móviles */
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.dl-item.compact {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: stretch;
|
|
||||||
gap: 0.8rem;
|
|
||||||
}
|
|
||||||
.dl-right-col { width: 100%; max-width: none; }
|
|
||||||
}
|
|
||||||
@@ -1,853 +0,0 @@
|
|||||||
/* =========================================
|
|
||||||
1. VARIABLES & RESET
|
|
||||||
========================================= */
|
|
||||||
:root {
|
|
||||||
--brand-color: #8b5cf6;
|
|
||||||
--brand-gradient: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
|
|
||||||
--glass-bg: rgba(20, 20, 20, 0.6);
|
|
||||||
--glass-border: rgba(255, 255, 255, 0.08);
|
|
||||||
--glass-blur: blur(12px);
|
|
||||||
--text-main: #ffffff;
|
|
||||||
--text-muted: rgba(255, 255, 255, 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 6px;
|
|
||||||
height: 6px;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================================
|
|
||||||
2. UTILITIES & ANIMATIONS
|
|
||||||
========================================= */
|
|
||||||
.spinner {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
border: 3px solid rgba(255, 255, 255, 0.1);
|
|
||||||
border-top-color: var(--brand-color);
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin { to { transform: rotate(360deg); } }
|
|
||||||
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
|
|
||||||
@keyframes slideUp { from { transform: translateX(-50%) translateY(20px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }
|
|
||||||
@keyframes slideDown { from { transform: translateX(-50%) translateY(-20px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }
|
|
||||||
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
|
|
||||||
@keyframes scaleIn { from { transform: translate(-50%, -50%) scale(0.8); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
|
|
||||||
@keyframes toastSlideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
|
|
||||||
@keyframes toastFadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); visibility: hidden; } }
|
|
||||||
@keyframes pulse {
|
|
||||||
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
|
|
||||||
70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
|
|
||||||
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================================
|
|
||||||
3. BUTTONS & INPUTS
|
|
||||||
========================================= */
|
|
||||||
.btn-icon-glass, .btn-icon-small, .modal-close {
|
|
||||||
appearance: none;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
color: #eee;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.btn-icon-glass { width: 36px; height: 36px; backdrop-filter: blur(8px); }
|
|
||||||
.btn-icon-small { padding: 6px; }
|
|
||||||
.modal-close { width: 32px; height: 32px; position: absolute; top: 20px; right: 20px; background: rgba(255, 255, 255, 0.1); }
|
|
||||||
|
|
||||||
.btn-icon-glass:hover, .btn-icon-small:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.15);
|
|
||||||
border-color: rgba(255, 255, 255, 0.2);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.modal-close:hover { background: rgba(255, 255, 255, 0.3); transform: rotate(90deg); }
|
|
||||||
|
|
||||||
.btn-glass-primary {
|
|
||||||
display: flex; align-items: center; gap: 8px;
|
|
||||||
background: rgba(139, 92, 246, 0.25);
|
|
||||||
border: 1px solid rgba(139, 92, 246, 0.4);
|
|
||||||
color: white;
|
|
||||||
padding: 0 16px; height: 36px;
|
|
||||||
border-radius: 10px; font-weight: 600; font-size: 0.9rem;
|
|
||||||
cursor: pointer; backdrop-filter: blur(8px);
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
.btn-glass-primary:hover {
|
|
||||||
background: rgba(139, 92, 246, 0.4);
|
|
||||||
box-shadow: 0 0 15px rgba(139, 92, 246, 0.2);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-confirm, .btn-primary {
|
|
||||||
background: var(--brand-color);
|
|
||||||
border: none; color: white;
|
|
||||||
padding: 10px 24px; border-radius: 10px;
|
|
||||||
font-weight: 700; cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
display: flex; align-items: center; justify-content: center; gap: 8px;
|
|
||||||
}
|
|
||||||
.btn-confirm:hover, .btn-primary:hover { background: #7c3aed; transform: translateY(-2px); }
|
|
||||||
.btn-confirm:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
|
|
||||||
.btn-confirm.full-width { width: 100%; }
|
|
||||||
|
|
||||||
.btn-cancel {
|
|
||||||
background: transparent;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
color: rgba(255, 255, 255, 0.8);
|
|
||||||
padding: 10px 20px; border-radius: 8px;
|
|
||||||
cursor: pointer; font-weight: 600;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
.btn-cancel:hover { background: rgba(255, 255, 255, 0.1); color: white; }
|
|
||||||
|
|
||||||
.btn-quick-action {
|
|
||||||
display: flex; align-items: center; gap: 6px;
|
|
||||||
height: 34px; padding: 0 12px;
|
|
||||||
background: rgba(139, 92, 246, 0.15);
|
|
||||||
border: 1px solid rgba(139, 92, 246, 0.3);
|
|
||||||
border-radius: 8px; color: #d8b4fe;
|
|
||||||
font-size: 0.85rem; font-weight: 600;
|
|
||||||
cursor: pointer; transition: all 0.2s;
|
|
||||||
}
|
|
||||||
.btn-quick-action:hover {
|
|
||||||
background: var(--brand-color); border-color: var(--brand-color);
|
|
||||||
color: white; transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
#copy-invite-btn { transition: all 0.3s ease; }
|
|
||||||
#copy-invite-btn:hover { transform: scale(1.05); }
|
|
||||||
#copy-invite-btn:active { transform: scale(0.95); }
|
|
||||||
|
|
||||||
/* Inputs */
|
|
||||||
input[type="text"], input[type="password"], input[type="number"], .form-input {
|
|
||||||
width: 100%;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
color: white; padding: 12px 16px;
|
|
||||||
border-radius: 10px; font-size: 1rem;
|
|
||||||
outline: none; transition: border-color 0.2s;
|
|
||||||
}
|
|
||||||
input:focus, .form-input:focus { border-color: var(--brand-color); background: rgba(255, 255, 255, 0.08); }
|
|
||||||
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
|
|
||||||
input[type=number] { -moz-appearance: textfield; }
|
|
||||||
|
|
||||||
/* Custom Select Wrappers */
|
|
||||||
.quick-select-wrapper {
|
|
||||||
position: relative; display: flex; align-items: center;
|
|
||||||
height: 34px; background: rgba(255, 255, 255, 0.03);
|
|
||||||
border-radius: 8px; transition: all 0.2s;
|
|
||||||
padding: 0 8px; min-width: 110px;
|
|
||||||
}
|
|
||||||
.quick-select-wrapper:hover { background: rgba(255, 255, 255, 0.08); }
|
|
||||||
.quick-select-wrapper svg { pointer-events: none; color: var(--text-muted); margin-right: 6px; flex-shrink: 0; }
|
|
||||||
.select-arrow { font-size: 0.6rem; color: rgba(255, 255, 255, 0.4); pointer-events: none; margin-left: 4px; }
|
|
||||||
|
|
||||||
.quick-select, .glass-select-sm {
|
|
||||||
appearance: none; -webkit-appearance: none;
|
|
||||||
background: transparent; border: none;
|
|
||||||
color: #fff; width: 100%; height: 100%;
|
|
||||||
cursor: pointer; outline: none; position: relative; z-index: 2;
|
|
||||||
}
|
|
||||||
.glass-select-sm {
|
|
||||||
background-color: rgba(255, 255, 255, 0.05);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
padding: 0 32px 0 12px; height: 32px; line-height: 30px;
|
|
||||||
border-radius: 8px; font-size: 0.85rem; font-weight: 600;
|
|
||||||
max-width: 140px; white-space: nowrap; text-overflow: ellipsis;
|
|
||||||
background-image: url("data:image/svg+xml,..."); /* SVG truncated for brevity */
|
|
||||||
background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
|
|
||||||
}
|
|
||||||
.quick-select option, .glass-select-sm option { background: #1a1a1a; color: #eee; }
|
|
||||||
|
|
||||||
/* =========================================
|
|
||||||
4. LAYOUT
|
|
||||||
========================================= */
|
|
||||||
.room-layout {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 380px;
|
|
||||||
height: 100vh; overflow: hidden;
|
|
||||||
transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
.room-layout.chat-hidden { grid-template-columns: 1fr 0px !important; }
|
|
||||||
|
|
||||||
/* Video Area */
|
|
||||||
.video-area {
|
|
||||||
display: flex; flex-direction: column;
|
|
||||||
background: #000; flex: 1; min-height: 0;
|
|
||||||
overflow: hidden; position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================================
|
|
||||||
5. HEADER
|
|
||||||
========================================= */
|
|
||||||
.room-header {
|
|
||||||
display: flex; justify-content: space-between; align-items: center;
|
|
||||||
padding: 0 24px; height: 64px;
|
|
||||||
background: rgba(10, 10, 10, 0.85); backdrop-filter: blur(20px);
|
|
||||||
border-bottom: 1px solid var(--glass-border);
|
|
||||||
z-index: 20; flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-left, .header-right { display: flex; align-items: center; gap: 16px; flex: 1; }
|
|
||||||
.header-right { justify-content: flex-end; }
|
|
||||||
.header-center { flex: 2; display: flex; justify-content: center; z-index: 50; }
|
|
||||||
|
|
||||||
.room-info { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
|
|
||||||
#room-name { margin: 0; font-size: 1rem; font-weight: 700; color: white; letter-spacing: -0.01em; }
|
|
||||||
.np-fade { display: flex; align-items: center; opacity: 0.7; font-size: 0.8rem; gap: 6px; margin-top: 2px; }
|
|
||||||
.np-title { color: #ccc; font-weight: 500; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
||||||
.np-sep { color: #555; }
|
|
||||||
.np-badge { background: rgba(255, 255, 255, 0.1); color: #fff; padding: 1px 6px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; }
|
|
||||||
|
|
||||||
/* Header Controls */
|
|
||||||
.quick-controls-group {
|
|
||||||
display: flex; align-items: center; gap: 4px;
|
|
||||||
background: rgba(15, 15, 15, 0.85);
|
|
||||||
backdrop-filter: blur(16px);
|
|
||||||
padding: 4px; height: 44px;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
.quick-controls-group:hover { border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }
|
|
||||||
|
|
||||||
.control-divider { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.1); margin: 0 4px; }
|
|
||||||
|
|
||||||
/* Sub/Dub Toggle */
|
|
||||||
.sd-toggle.small {
|
|
||||||
height: 34px; min-width: 86px;
|
|
||||||
background: transparent; border: none;
|
|
||||||
display: flex; position: relative; cursor: pointer; box-sizing: border-box;
|
|
||||||
padding: 2px;
|
|
||||||
}
|
|
||||||
.sd-toggle.small .sd-bg {
|
|
||||||
position: absolute; top: 2px; left: 2px;
|
|
||||||
width: calc(50% - 2px); height: calc(100% - 4px);
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
border-radius: 6px;
|
|
||||||
transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
||||||
}
|
|
||||||
.sd-toggle[data-state="dub"] .sd-bg { transform: translateX(100%); }
|
|
||||||
.sd-toggle.small .sd-option {
|
|
||||||
flex: 1; z-index: 2;
|
|
||||||
display: flex; align-items: center; justify-content: center;
|
|
||||||
font-size: 0.75rem; font-weight: 700;
|
|
||||||
color: rgba(255,255,255,0.4);
|
|
||||||
transition: color 0.2s; user-select: none;
|
|
||||||
}
|
|
||||||
.sd-toggle.small .sd-option.active { color: #fff; }
|
|
||||||
|
|
||||||
.viewers-pill {
|
|
||||||
display: flex; align-items: center; gap: 6px;
|
|
||||||
background: rgba(0,0,0,0.3); padding: 0 10px;
|
|
||||||
border-radius: 20px; border: 1px solid rgba(255,255,255,0.05);
|
|
||||||
font-size: 0.8rem; color: #aaa; height: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#toggle-chat-btn { position: relative; }
|
|
||||||
#toggle-chat-btn.has-unread::after {
|
|
||||||
content: ''; position: absolute; top: 2px; right: 2px;
|
|
||||||
width: 10px; height: 10px; background-color: #ef4444;
|
|
||||||
border: 2px solid #1a1a1a; border-radius: 50%;
|
|
||||||
animation: pulse 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================================
|
|
||||||
6. PLAYER
|
|
||||||
========================================= */
|
|
||||||
.player-wrapper {
|
|
||||||
display: flex !important; flex-direction: column; flex: 1;
|
|
||||||
width: 100%; height: auto !important; min-height: 0;
|
|
||||||
position: relative !important; z-index: 1 !important;
|
|
||||||
background: transparent !important; overflow: hidden;
|
|
||||||
}
|
|
||||||
.player-container { width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; }
|
|
||||||
.video-frame {
|
|
||||||
flex: 1; min-height: 0; position: relative;
|
|
||||||
background: #000; display: flex; align-items: center; justify-content: center;
|
|
||||||
}
|
|
||||||
#player { width: 100%; height: 100%; max-height: 100%; }
|
|
||||||
#subtitles-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }
|
|
||||||
|
|
||||||
.custom-controls {
|
|
||||||
position: absolute; bottom: 0; left: 0; width: 100%; z-index: 60;
|
|
||||||
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
|
|
||||||
padding: 20px 10px 10px;
|
|
||||||
}
|
|
||||||
.controls-left { display: flex; align-items: center; gap: 10px; }
|
|
||||||
.time-display { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 0.9rem; color: #ddd; min-width: fit-content; }
|
|
||||||
|
|
||||||
/* Hidden Legacy Buttons */
|
|
||||||
#download-btn, #manual-match-btn, #server-select, #extension-select, #sd-toggle, .side-nav-btn { display: none !important; }
|
|
||||||
|
|
||||||
/* Settings Panel */
|
|
||||||
.settings-panel {
|
|
||||||
position: absolute; bottom: 70px; right: 20px; z-index: 1000;
|
|
||||||
max-height: 60vh; overflow-y: auto;
|
|
||||||
background: rgba(15, 15, 15, 0.95);
|
|
||||||
border: 1px solid var(--glass-border); border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Video Toasts */
|
|
||||||
.video-toast-container {
|
|
||||||
position: absolute; bottom: 100px; left: 20px; z-index: 80;
|
|
||||||
display: flex; flex-direction: column; gap: 10px;
|
|
||||||
pointer-events: none; max-width: 400px;
|
|
||||||
}
|
|
||||||
.video-toast {
|
|
||||||
display: flex; align-items: center; gap: 10px;
|
|
||||||
background: rgba(15, 15, 15, 0.85); backdrop-filter: blur(8px);
|
|
||||||
padding: 8px 12px; border-radius: 8px;
|
|
||||||
border-left: 3px solid var(--brand-color);
|
|
||||||
color: white; font-size: 0.9rem;
|
|
||||||
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
|
||||||
animation: toastSlideIn 0.3s ease forwards, toastFadeOut 0.5s ease 4.5s forwards;
|
|
||||||
pointer-events: auto; opacity: 0;
|
|
||||||
}
|
|
||||||
.toast-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
|
|
||||||
.toast-content { display: flex; flex-direction: column; line-height: 1.2; }
|
|
||||||
.toast-user { font-weight: 700; font-size: 0.8rem; color: #a78bfa; }
|
|
||||||
.toast-msg { color: #eee; margin-top: 2px; }
|
|
||||||
.video-toast.system-toast {
|
|
||||||
border-left-color: #9ca3af; background: rgba(20, 20, 20, 0.7);
|
|
||||||
justify-content: center; padding: 6px 12px; min-height: auto;
|
|
||||||
}
|
|
||||||
.video-toast.system-toast .toast-msg { font-size: 0.85rem; font-style: italic; color: rgba(255, 255, 255, 0.8); margin: 0; }
|
|
||||||
|
|
||||||
/* =========================================
|
|
||||||
7. CHAT SIDEBAR
|
|
||||||
========================================= */
|
|
||||||
.chat-sidebar {
|
|
||||||
display: flex; flex-direction: column; height: 100%;
|
|
||||||
background: rgba(15, 15, 15, 0.95);
|
|
||||||
border-left: 1px solid var(--glass-border); overflow: hidden;
|
|
||||||
}
|
|
||||||
.room-layout.chat-hidden .chat-sidebar { opacity: 0; pointer-events: none; border-left: none; }
|
|
||||||
|
|
||||||
.chat-header {
|
|
||||||
display: flex; justify-content: space-between; align-items: center;
|
|
||||||
padding: 16px 20px; border-bottom: 1px solid var(--glass-border);
|
|
||||||
}
|
|
||||||
.chat-header h3 { margin: 0; font-size: 1.1rem; font-weight: 700; color: white; }
|
|
||||||
|
|
||||||
.sidebar-tabs {
|
|
||||||
display: flex; width: 100%; flex: 0 0 auto; height: 50px;
|
|
||||||
border-bottom: 1px solid var(--glass-border); background: rgba(0,0,0,0.2);
|
|
||||||
}
|
|
||||||
.tab-btn {
|
|
||||||
flex: 1; height: 100%; padding: 0;
|
|
||||||
display: flex; align-items: center; justify-content: center;
|
|
||||||
background: transparent; border: none; border-bottom: 2px solid transparent;
|
|
||||||
color: var(--text-muted); font-weight: 600; cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
.tab-btn:hover { background: rgba(255,255,255,0.05); color: white; }
|
|
||||||
.tab-btn.active { border-bottom-color: var(--brand-color); color: white; background: rgba(255,255,255,0.02); }
|
|
||||||
|
|
||||||
.tab-content { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
|
|
||||||
|
|
||||||
/* Users List */
|
|
||||||
.users-list {
|
|
||||||
padding: 12px; border-bottom: 1px solid var(--glass-border);
|
|
||||||
max-height: 200px; overflow-y: auto; background: rgba(0,0,0,0.2);
|
|
||||||
}
|
|
||||||
.user-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; margin-bottom: 4px; }
|
|
||||||
.user-item:hover { background: rgba(255, 255, 255, 0.05); }
|
|
||||||
.user-avatar {
|
|
||||||
width: 32px; height: 32px; border-radius: 50%;
|
|
||||||
background: var(--brand-gradient);
|
|
||||||
display: flex; align-items: center; justify-content: center;
|
|
||||||
font-weight: 700; color: white; font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
.user-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
|
|
||||||
.user-name { flex: 1; font-size: 0.9rem; color: white; }
|
|
||||||
.user-badge { font-size: 0.7rem; background: var(--brand-color); color: white; padding: 2px 8px; border-radius: 4px; font-weight: 600; }
|
|
||||||
|
|
||||||
/* Chat Messages */
|
|
||||||
.chat-messages {
|
|
||||||
flex: 1; overflow-y: auto; padding: 16px;
|
|
||||||
display: flex; flex-direction: column; gap: 12px; min-height: 0;
|
|
||||||
}
|
|
||||||
.chat-message { display: flex; gap: 10px; }
|
|
||||||
.chat-message.system { justify-content: center; margin: 8px 0; }
|
|
||||||
.chat-message.system .message-content {
|
|
||||||
background: rgba(255, 255, 255, 0.05); color: var(--text-muted);
|
|
||||||
font-size: 0.8rem; text-align: center; padding: 4px 12px; border-radius: 12px;
|
|
||||||
}
|
|
||||||
.message-avatar {
|
|
||||||
width: 36px; height: 36px; border-radius: 50%;
|
|
||||||
background: var(--brand-gradient);
|
|
||||||
display: flex; align-items: center; justify-content: center;
|
|
||||||
font-weight: 700; color: white; font-size: 0.9rem; flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.message-body { flex: 1; min-width: 0; }
|
|
||||||
.message-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
|
|
||||||
.message-username { font-weight: 600; color: white; font-size: 0.9rem; }
|
|
||||||
.message-time { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); }
|
|
||||||
.message-content { color: rgba(255, 255, 255, 0.9); font-size: 0.95rem; line-height: 1.4; word-wrap: break-word; }
|
|
||||||
|
|
||||||
.chat-input { display: flex; gap: 8px; padding: 16px; border-top: 1px solid var(--glass-border); }
|
|
||||||
.chat-input input {
|
|
||||||
flex: 1; background: rgba(255, 255, 255, 0.05);
|
|
||||||
border: 1px solid var(--glass-border); color: white;
|
|
||||||
padding: 12px 16px; border-radius: 10px; outline: none;
|
|
||||||
}
|
|
||||||
.chat-input button {
|
|
||||||
background: var(--brand-color); border: none; color: white;
|
|
||||||
padding: 0 16px; border-radius: 10px; cursor: pointer; transition: background 0.2s;
|
|
||||||
}
|
|
||||||
.chat-input button:hover { background: #7c3aed; }
|
|
||||||
|
|
||||||
/* =========================================
|
|
||||||
8. QUEUE TAB
|
|
||||||
========================================= */
|
|
||||||
.queue-list {
|
|
||||||
flex: 1; overflow-y: auto; padding: 10px;
|
|
||||||
display: flex; flex-direction: column; gap: 10px;
|
|
||||||
}
|
|
||||||
.queue-item {
|
|
||||||
display: flex; gap: 10px; padding: 10px;
|
|
||||||
background: rgba(255,255,255,0.05);
|
|
||||||
border-radius: 8px; border: 1px solid transparent;
|
|
||||||
position: relative; align-items: center; transition: transform 0.2s;
|
|
||||||
}
|
|
||||||
.queue-item:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.1); }
|
|
||||||
.q-img { width: 50px; height: 70px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
|
|
||||||
.q-info { flex: 1; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
|
|
||||||
.q-title { font-weight: 700; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
||||||
.q-meta { font-size: 0.8rem; color: #aaa; }
|
|
||||||
.q-actions { display: flex; flex-direction: column; gap: 4px; opacity: 0.7; transition: opacity 0.2s; }
|
|
||||||
.queue-item:hover .q-actions { opacity: 1; }
|
|
||||||
|
|
||||||
.q-btn {
|
|
||||||
background: rgba(255,255,255,0.1); border: none; color: white;
|
|
||||||
width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
|
|
||||||
display: flex; align-items: center; justify-content: center; transition: all 0.2s;
|
|
||||||
}
|
|
||||||
.q-btn:hover { background: rgba(255,255,255,0.2); transform: scale(1.1); }
|
|
||||||
.q-btn.play:hover { background: var(--brand-color); }
|
|
||||||
.q-btn.remove:hover { background: #ff6b6b; }
|
|
||||||
.badge { background: var(--brand-color); padding: 1px 6px; border-radius: 10px; font-size: 0.7rem; margin-left: 6px; }
|
|
||||||
.queue-empty { text-align: center; color: #666; margin-top: 40px; font-style: italic; }
|
|
||||||
|
|
||||||
/* =========================================
|
|
||||||
9. MODALS
|
|
||||||
========================================= */
|
|
||||||
.modal-overlay {
|
|
||||||
position: fixed; inset: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(8px);
|
|
||||||
display: none; align-items: center; justify-content: center;
|
|
||||||
z-index: 10000; opacity: 0; transition: opacity 0.3s ease;
|
|
||||||
}
|
|
||||||
.modal-overlay.show { display: flex; opacity: 1; }
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
background: rgba(20, 20, 20, 0.95);
|
|
||||||
border: 1px solid var(--glass-border); border-radius: 16px;
|
|
||||||
padding: 32px; max-width: 500px; width: 90%;
|
|
||||||
position: relative; transform: scale(0.9); transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
.modal-overlay.show .modal-content { transform: scale(1); }
|
|
||||||
.modal-title { margin: 0 0 24px 0; font-size: 1.5rem; font-weight: 800; color: white; }
|
|
||||||
.modal-header-row { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
|
|
||||||
.modal-header-row .modal-title { margin: 0; }
|
|
||||||
|
|
||||||
.form-group { margin-bottom: 20px; }
|
|
||||||
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: white; }
|
|
||||||
.form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
|
|
||||||
|
|
||||||
/* Join Info */
|
|
||||||
.join-host-info { display: flex; flex-direction: column; align-items: center; margin-bottom: 24px; animation: fadeIn 0.5s ease; }
|
|
||||||
.join-avatar-container {
|
|
||||||
width: 80px; height: 80px; border-radius: 50%; padding: 3px;
|
|
||||||
background: var(--brand-gradient); margin-bottom: 12px;
|
|
||||||
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
|
|
||||||
}
|
|
||||||
.join-avatar-container img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #1a1a1a; background: #2a2a2a; }
|
|
||||||
.join-text { font-size: 1.1rem; color: white; font-weight: 500; text-align: center; margin: 0; }
|
|
||||||
.join-text span { font-weight: 700; color: #a78bfa; }
|
|
||||||
|
|
||||||
/* Search Content */
|
|
||||||
.anime-search-content { max-width: 800px; max-height: 85vh; display: flex; flex-direction: column; }
|
|
||||||
.search-bar { display: flex; gap: 12px; margin-bottom: 20px; }
|
|
||||||
.search-bar button {
|
|
||||||
background: var(--brand-color); border: none; color: white;
|
|
||||||
padding: 12px 24px; border-radius: 10px; font-weight: 700; cursor: pointer;
|
|
||||||
}
|
|
||||||
.anime-results {
|
|
||||||
flex: 1; overflow-y: auto; display: flex; flex-direction: column;
|
|
||||||
gap: 12px; min-height: 0; max-height: 60vh; padding-right: 8px;
|
|
||||||
}
|
|
||||||
.anime-result-item, .search-item {
|
|
||||||
display: flex; gap: 16px; padding: 12px;
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
|
|
||||||
cursor: pointer; text-decoration: none; color: inherit; transition: all 0.2s;
|
|
||||||
}
|
|
||||||
.anime-result-item:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.08); border-color: var(--brand-color);
|
|
||||||
transform: translateX(4px);
|
|
||||||
}
|
|
||||||
.search-poster { width: 60px; height: 85px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
|
|
||||||
.search-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
|
|
||||||
.search-title { font-weight: 700; color: white; margin-bottom: 4px; font-size: 1rem; }
|
|
||||||
.search-meta { font-size: 0.85rem; color: var(--text-muted); }
|
|
||||||
|
|
||||||
/* Config Layout */
|
|
||||||
.config-layout { display: flex; gap: 24px; margin-top: 20px; }
|
|
||||||
.config-sidebar { width: 140px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
|
|
||||||
.config-cover {
|
|
||||||
width: 100%; aspect-ratio: 2/3; object-fit: cover;
|
|
||||||
border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.4);
|
|
||||||
border: 1px solid var(--glass-border);
|
|
||||||
}
|
|
||||||
.config-main { flex: 1; display: flex; flex-direction: column; gap: 20px; }
|
|
||||||
.cfg-section-title {
|
|
||||||
font-size: 0.85rem; text-transform: uppercase;
|
|
||||||
letter-spacing: 1px; color: rgba(255,255,255,0.5);
|
|
||||||
margin-bottom: 8px; font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Chips & Toggles in Modal */
|
|
||||||
.chips-grid { display: flex; flex-wrap: wrap; gap: 10px; }
|
|
||||||
.chip {
|
|
||||||
padding: 8px 16px; background: rgba(255, 255, 255, 0.05);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px;
|
|
||||||
color: #ccc; font-size: 0.9rem; cursor: pointer;
|
|
||||||
transition: all 0.2s; user-select: none;
|
|
||||||
}
|
|
||||||
.chip:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); }
|
|
||||||
.chip.active {
|
|
||||||
background: var(--brand-color); border-color: var(--brand-color);
|
|
||||||
color: white; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
|
|
||||||
}
|
|
||||||
.cat-toggle { display: flex; background: rgba(0,0,0,0.3); padding: 4px; border-radius: 10px; width: fit-content; }
|
|
||||||
.cat-opt {
|
|
||||||
padding: 6px 16px; border-radius: 8px; font-size: 0.85rem; color: #888;
|
|
||||||
cursor: pointer; transition: all 0.2s; font-weight: 600;
|
|
||||||
}
|
|
||||||
.cat-opt.active { background: rgba(255,255,255,0.15); color: white; }
|
|
||||||
.cat-opt.disabled { opacity: 0.3; pointer-events: none; text-decoration: line-through; }
|
|
||||||
|
|
||||||
/* Episodes Grid */
|
|
||||||
.episodes-grid-container {
|
|
||||||
display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
|
|
||||||
gap: 8px; max-height: 280px; overflow-y: auto; padding: 10px;
|
|
||||||
background: rgba(0, 0, 0, 0.2); border-radius: 12px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
.episodes-grid-container::-webkit-scrollbar { width: 4px; }
|
|
||||||
.episodes-grid-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }
|
|
||||||
|
|
||||||
.ep-grid-btn {
|
|
||||||
background: rgba(255,255,255,0.03); border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
color: #ccc; padding: 8px 0; border-radius: 6px; text-align: center;
|
|
||||||
font-size: 0.9rem; font-weight: 600; cursor: pointer;
|
|
||||||
transition: all 0.2s; user-select: none;
|
|
||||||
}
|
|
||||||
.ep-grid-btn:hover { background: white; color: black; transform: translateY(-2px); }
|
|
||||||
.ep-grid-btn.selected, .ep-grid-btn.active {
|
|
||||||
background: var(--brand-color); color: white;
|
|
||||||
border-color: var(--brand-color); box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-text-tiny {
|
|
||||||
background: transparent; border: none; color: var(--brand-color);
|
|
||||||
font-size: 0.75rem; font-weight: 700; cursor: pointer; padding: 2px 6px;
|
|
||||||
}
|
|
||||||
.btn-text-tiny:hover { text-decoration: underline; }
|
|
||||||
|
|
||||||
/* Manual Control */
|
|
||||||
.ep-control {
|
|
||||||
display: flex; align-items: center; justify-content: space-between;
|
|
||||||
background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
border-radius: 12px; padding: 4px; width: 100%; height: 48px;
|
|
||||||
margin-top: 8px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
|
|
||||||
}
|
|
||||||
.ep-btn {
|
|
||||||
width: 40px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
|
|
||||||
background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255,255,255,0.05);
|
|
||||||
color: white; border-radius: 8px; cursor: pointer; font-size: 1.2rem; transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
.ep-btn:hover { background: var(--brand-color); border-color: var(--brand-color); transform: translateY(-1px); }
|
|
||||||
.ep-btn:active { transform: translateY(1px); }
|
|
||||||
.ep-input {
|
|
||||||
flex: 1; min-width: 0; background: transparent; border: none;
|
|
||||||
color: white; text-align: center; font-size: 1.2rem; font-weight: 800;
|
|
||||||
outline: none; font-family: monospace;
|
|
||||||
}
|
|
||||||
.grid-loader { width: 100%; padding: 20px; text-align: center; color: var(--text-muted); font-size: 0.9rem; }
|
|
||||||
|
|
||||||
/* Modal Pagination */
|
|
||||||
.modal-pagination {
|
|
||||||
display: flex; justify-content: center; align-items: center; gap: 15px;
|
|
||||||
margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
.modal-page-btn {
|
|
||||||
background: transparent; border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
color: white; width: 30px; height: 30px; border-radius: 6px;
|
|
||||||
display: flex; align-items: center; justify-content: center;
|
|
||||||
cursor: pointer; transition: all 0.2s;
|
|
||||||
}
|
|
||||||
.modal-page-btn:hover:not(:disabled) { background: white; color: black; }
|
|
||||||
.modal-page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
|
|
||||||
.modal-page-info { font-size: 0.85rem; color: #888; font-weight: 700; }
|
|
||||||
|
|
||||||
/* =========================================
|
|
||||||
10. MEDIA QUERIES (Combined)
|
|
||||||
========================================= */
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
.room-layout { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
|
|
||||||
.room-layout.chat-hidden { grid-template-rows: 1fr 0px; }
|
|
||||||
.chat-sidebar {
|
|
||||||
height: 350px; border-left: none; border-top: 1px solid var(--glass-border);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.config-layout { flex-direction: column; }
|
|
||||||
.config-sidebar { width: 100%; flex-direction: row; }
|
|
||||||
.config-cover { width: 80px; }
|
|
||||||
.ep-control { width: auto; flex: 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================================
|
|
||||||
PERMISSIONS & MODERATION
|
|
||||||
========================================= */
|
|
||||||
|
|
||||||
.permissions-content {
|
|
||||||
max-width: 700px;
|
|
||||||
width: 90%;
|
|
||||||
max-height: 85vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.permissions-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.permission-card {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 16px;
|
|
||||||
padding: 16px;
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: 12px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.permission-card:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border-color: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-info-section {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
min-width: 180px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-avatar-small {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: var(--brand-gradient);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-weight: 700;
|
|
||||||
color: white;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-avatar-small img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 50%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-details {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-name-text {
|
|
||||||
font-weight: 600;
|
|
||||||
color: white;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.guest-badge {
|
|
||||||
font-size: 0.7rem;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
color: #aaa;
|
|
||||||
padding: 2px 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-weight: 600;
|
|
||||||
width: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.permissions-toggles {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.perm-toggle {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.perm-toggle input[type="checkbox"] {
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
cursor: pointer;
|
|
||||||
accent-color: var(--brand-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.perm-label {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: rgba(255, 255, 255, 0.8);
|
|
||||||
transition: color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.perm-toggle:hover .perm-label {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.perm-label svg {
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ban-btn {
|
|
||||||
background: rgba(239, 68, 68, 0.1);
|
|
||||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
|
||||||
color: #ef4444;
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ban-btn:hover {
|
|
||||||
background: rgba(239, 68, 68, 0.2);
|
|
||||||
border-color: #ef4444;
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.banned-ips-section {
|
|
||||||
margin-top: 30px;
|
|
||||||
padding-top: 20px;
|
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
color: rgba(255, 255, 255, 0.5);
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banned-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banned-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 10px 14px;
|
|
||||||
background: rgba(239, 68, 68, 0.05);
|
|
||||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banned-ip {
|
|
||||||
font-family: monospace;
|
|
||||||
color: #ef4444;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.unban-btn {
|
|
||||||
background: transparent;
|
|
||||||
border: 1px solid rgba(74, 222, 128, 0.3);
|
|
||||||
color: #4ade80;
|
|
||||||
padding: 4px 12px;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.unban-btn:hover {
|
|
||||||
background: rgba(74, 222, 128, 0.1);
|
|
||||||
border-color: #4ade80;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-state {
|
|
||||||
text-align: center;
|
|
||||||
color: #666;
|
|
||||||
font-style: italic;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.permission-card {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-info-section {
|
|
||||||
min-width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ban-btn {
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,440 +0,0 @@
|
|||||||
:root {
|
|
||||||
--header-height: 140px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #050505;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ambient-bg {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center top;
|
|
||||||
opacity: 0.15;
|
|
||||||
filter: blur(80px) saturate(1.5);
|
|
||||||
z-index: -2;
|
|
||||||
transition: background-image 1s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-overlay {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
background: radial-gradient(circle at top, transparent 0%, #050505 80%);
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.schedule-container {
|
|
||||||
padding: calc(var(--nav-height) + 2rem) 3rem 2rem 3rem;
|
|
||||||
max-width: 1800px;
|
|
||||||
margin: 0 auto;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.schedule-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-end;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
padding-bottom: 1.5rem;
|
|
||||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
font-weight: 900;
|
|
||||||
margin: 0 0 0.5rem 0;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-left {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.month-navigator {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.current-date-label {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--color-primary);
|
|
||||||
min-width: 180px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-btn {
|
|
||||||
background: rgba(255,255,255,0.05);
|
|
||||||
border: 1px solid rgba(255,255,255,0.1);
|
|
||||||
color: white;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 50%;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: all 0.2s;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-btn:hover {
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-controls {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.divider-vertical {
|
|
||||||
width: 1px;
|
|
||||||
height: 30px;
|
|
||||||
background: rgba(255,255,255,0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-group {
|
|
||||||
background: rgba(0,0,0,0.3);
|
|
||||||
border: 1px solid rgba(255,255,255,0.1);
|
|
||||||
padding: 4px;
|
|
||||||
border-radius: 99px;
|
|
||||||
display: flex;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn {
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
padding: 6px 16px;
|
|
||||||
border-radius: 99px;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn:hover { color: white; }
|
|
||||||
.toggle-btn.active {
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
color: white;
|
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-switcher {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-btn {
|
|
||||||
background: transparent;
|
|
||||||
border: 1px solid rgba(255,255,255,0.1);
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-btn:hover { border-color: white; color: white; }
|
|
||||||
.view-btn.active {
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(7, 1fr);
|
|
||||||
gap: 1px;
|
|
||||||
background: rgba(255,255,255,0.05);
|
|
||||||
border: 1px solid rgba(255,255,255,0.05);
|
|
||||||
border-radius: 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weekday-header {
|
|
||||||
background: var(--color-bg-card);
|
|
||||||
padding: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.day-cell {
|
|
||||||
background: var(--color-bg-base);
|
|
||||||
min-height: 160px;
|
|
||||||
max-height: 160px;
|
|
||||||
padding: 0.8rem;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
|
|
||||||
overflow-y: auto;
|
|
||||||
scrollbar-width: none;
|
|
||||||
-ms-overflow-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.day-cell::-webkit-scrollbar { display: none; }
|
|
||||||
.day-cell.empty { background: rgba(0,0,0,0.2); }
|
|
||||||
.day-cell.today { background: rgba(139, 92, 246, 0.05); box-shadow: inset 0 0 0 1px var(--color-primary); }
|
|
||||||
|
|
||||||
.day-number {
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
margin-bottom: 4px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.today .day-number { color: var(--color-primary); }
|
|
||||||
|
|
||||||
.anime-item-month {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 6px;
|
|
||||||
background: rgba(255,255,255,0.03);
|
|
||||||
border-radius: 6px;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: 0.2s;
|
|
||||||
border-left: 2px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anime-item-month:hover {
|
|
||||||
background: rgba(255,255,255,0.08);
|
|
||||||
transform: translateX(2px);
|
|
||||||
}
|
|
||||||
.anime-item-month.is-mine {
|
|
||||||
border-left-color: var(--color-success);
|
|
||||||
background: rgba(34, 197, 94, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-time { font-size: 0.75rem; color: var(--color-text-muted); font-family: monospace; }
|
|
||||||
.item-title { font-size: 0.8rem; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
|
|
||||||
|
|
||||||
.week-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.week-nav {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
overflow-x: auto;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
scrollbar-width: none;
|
|
||||||
mask-image: linear-gradient(to right, black 90%, transparent 100%);
|
|
||||||
}
|
|
||||||
.week-nav::-webkit-scrollbar { display: none; }
|
|
||||||
|
|
||||||
.day-btn {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 120px;
|
|
||||||
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 1rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.day-btn:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.08);
|
|
||||||
color: white;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
border-color: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.day-btn.active {
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
color: white;
|
|
||||||
box-shadow: 0 8px 20px var(--color-primary-glow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.day-btn span.name {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.day-btn span.date {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
font-weight: 800;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.week-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
||||||
gap: 1.5rem;
|
|
||||||
animation: fadeInUp 0.4s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-ep-badge {
|
|
||||||
position: absolute;
|
|
||||||
top: 8px;
|
|
||||||
right: 8px;
|
|
||||||
background: rgba(0,0,0,0.8);
|
|
||||||
color: var(--color-primary);
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-weight: 800;
|
|
||||||
border: 1px solid rgba(139, 92, 246, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card.mine .card-img-wrap {
|
|
||||||
box-shadow: 0 0 0 2px var(--color-success);
|
|
||||||
}
|
|
||||||
.card.mine::after {
|
|
||||||
content: "IN LIST";
|
|
||||||
position: absolute;
|
|
||||||
top: 8px; left: 8px;
|
|
||||||
background: var(--color-success);
|
|
||||||
color: black;
|
|
||||||
font-size: 0.65rem;
|
|
||||||
font-weight: 900;
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loader-overlay {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
background: rgba(0,0,0,0.6);
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
z-index: 999;
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
}
|
|
||||||
.loader-overlay.active { opacity: 1; pointer-events: auto; }
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.schedule-container {
|
|
||||||
padding: 5rem 1.5rem 2rem 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
|
|
||||||
.schedule-header {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: stretch;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-left {
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-controls {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title {
|
|
||||||
font-size: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-grid {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weekday-header, .day-cell.empty { display: none; }
|
|
||||||
|
|
||||||
.day-cell {
|
|
||||||
min-height: auto;
|
|
||||||
max-height: none;
|
|
||||||
overflow: visible;
|
|
||||||
border: 1px solid rgba(255,255,255,0.08);
|
|
||||||
border-radius: 12px;
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
}
|
|
||||||
|
|
||||||
.week-nav {
|
|
||||||
margin: 0 -1.5rem;
|
|
||||||
padding: 0 1.5rem 1rem 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.day-btn {
|
|
||||||
min-width: 90px;
|
|
||||||
padding: 0.8rem;
|
|
||||||
}
|
|
||||||
.day-btn span.name { font-size: 0.75rem; }
|
|
||||||
.day-btn span.date { font-size: 1.5rem; }
|
|
||||||
|
|
||||||
.week-grid {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.week-grid .card {
|
|
||||||
min-width: 0 !important;
|
|
||||||
width: 100% !important;
|
|
||||||
flex: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-content h3 { font-size: 0.8rem; }
|
|
||||||
.card-ep-badge { font-size: 0.65rem; padding: 2px 4px; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 380px) {
|
|
||||||
.header-controls {
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
.toggle-btn {
|
|
||||||
padding: 6px 10px;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
.nav-btn {
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
}
|
|
||||||
.current-date-label {
|
|
||||||
font-size: 1rem;
|
|
||||||
min-width: 140px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,410 +0,0 @@
|
|||||||
/* search.css - Fixed & Unified */
|
|
||||||
|
|
||||||
:root {
|
|
||||||
/* Dimensiones */
|
|
||||||
--sidebar-width: 260px;
|
|
||||||
--nav-height: 80px;
|
|
||||||
--content-max-width: 1800px;
|
|
||||||
|
|
||||||
/* Colores Base (Dark Mode) */
|
|
||||||
--c-bg-page: #09090b; /* Zinc-950 */
|
|
||||||
--c-bg-input: #18181b; /* Zinc-900 */
|
|
||||||
--c-bg-input-hover: #27272a;/* Zinc-800 */
|
|
||||||
|
|
||||||
/* Textos */
|
|
||||||
--c-text-main: #f4f4f5; /* Zinc-100 */
|
|
||||||
--c-text-muted: #a1a1aa; /* Zinc-400 */
|
|
||||||
|
|
||||||
/* Bordes y Acentos */
|
|
||||||
--c-border: rgba(255, 255, 255, 0.08);
|
|
||||||
--c-accent: #8b5cf6; /* Violet-500 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================================
|
|
||||||
1. LAYOUT & BASE
|
|
||||||
========================================= */
|
|
||||||
.app-layout {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: var(--sidebar-width) 1fr;
|
|
||||||
max-width: var(--content-max-width);
|
|
||||||
min-height: 100vh;
|
|
||||||
padding-top: var(--nav-height);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-view {
|
|
||||||
padding: 2.5rem 3rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================================
|
|
||||||
2. SIDEBAR & FILTROS (DISEÑO MEJORADO)
|
|
||||||
========================================= */
|
|
||||||
.filters-sidebar {
|
|
||||||
position: sticky;
|
|
||||||
top: var(--nav-height);
|
|
||||||
height: calc(100vh - var(--nav-height));
|
|
||||||
border-right: 1px solid var(--c-border);
|
|
||||||
padding: 2rem 1.5rem 2rem 0;
|
|
||||||
margin-left: 2rem;
|
|
||||||
overflow-y: auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
/* Scrollbar oculta */
|
|
||||||
scrollbar-width: none;
|
|
||||||
-ms-overflow-style: none;
|
|
||||||
}
|
|
||||||
.filters-sidebar::-webkit-scrollbar { display: none; }
|
|
||||||
|
|
||||||
.filter-group {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-group label {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--c-text-muted);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
margin-bottom: 0.8rem;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Mode Switcher --- */
|
|
||||||
.mode-switcher {
|
|
||||||
display: flex;
|
|
||||||
background: var(--c-bg-input);
|
|
||||||
padding: 4px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid var(--c-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mode-btn {
|
|
||||||
flex: 1;
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
color: var(--c-text-muted);
|
|
||||||
padding: 8px;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
font-weight: 600;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mode-btn:hover { color: var(--c-text-main); }
|
|
||||||
.mode-btn.active {
|
|
||||||
background: var(--c-bg-input-hover);
|
|
||||||
color: white;
|
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Inputs y Selects Modernos (Boxed Style) --- */
|
|
||||||
.custom-select select,
|
|
||||||
.filter-input {
|
|
||||||
width: 100%;
|
|
||||||
background-color: var(--c-bg-input);
|
|
||||||
border: 1px solid var(--c-border);
|
|
||||||
border-radius: 8px;
|
|
||||||
color: var(--c-text-main);
|
|
||||||
padding: 10px 12px;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Icono flecha para selects */
|
|
||||||
.custom-select { position: relative; }
|
|
||||||
.custom-select::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
right: 12px; top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
border-left: 5px solid transparent;
|
|
||||||
border-right: 5px solid transparent;
|
|
||||||
border-top: 5px solid var(--c-text-muted);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-select select:focus,
|
|
||||||
.filter-input:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--c-accent);
|
|
||||||
background-color: var(--c-bg-page);
|
|
||||||
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Checkbox Simple & Toggle --- */
|
|
||||||
.checkbox-wrapper {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 8px 0;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.checkbox-wrapper input[type="checkbox"] {
|
|
||||||
accent-color: var(--c-accent);
|
|
||||||
width: 18px; height: 18px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.checkbox-label {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: var(--c-text-main);
|
|
||||||
}
|
|
||||||
.input-hint {
|
|
||||||
font-size: 0.7rem; color: var(--c-text-muted); margin-top: 4px; display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================================
|
|
||||||
3. MULTISELECT AVANZADO (Searchable)
|
|
||||||
========================================= */
|
|
||||||
.multiselect-container {
|
|
||||||
background: var(--c-bg-input);
|
|
||||||
border: 1px solid var(--c-border);
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Buscador interno */
|
|
||||||
.multiselect-search-wrapper {
|
|
||||||
padding: 8px;
|
|
||||||
border-bottom: 1px solid var(--c-border);
|
|
||||||
background: var(--c-bg-input);
|
|
||||||
position: sticky; top: 0; z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect-search-input {
|
|
||||||
width: 100%;
|
|
||||||
background: rgba(255,255,255,0.05);
|
|
||||||
border: none;
|
|
||||||
padding: 6px 10px;
|
|
||||||
border-radius: 4px;
|
|
||||||
color: var(--c-text-main);
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
.multiselect-search-input:focus { outline: none; background: rgba(255,255,255,0.1); }
|
|
||||||
|
|
||||||
/* Lista Items */
|
|
||||||
.multiselect-group {
|
|
||||||
max-height: 220px;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 4px;
|
|
||||||
scrollbar-width: thin;
|
|
||||||
scrollbar-color: var(--c-border) transparent;
|
|
||||||
}
|
|
||||||
.multiselect-group::-webkit-scrollbar { width: 6px; }
|
|
||||||
.multiselect-group::-webkit-scrollbar-thumb { background-color: #3f3f46; border-radius: 3px; }
|
|
||||||
|
|
||||||
/* Item Individual */
|
|
||||||
.checkbox-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
padding: 8px 10px;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: var(--c-text-muted);
|
|
||||||
transition: background 0.15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-item:hover { background-color: rgba(255,255,255,0.05); color: var(--c-text-main); }
|
|
||||||
.checkbox-item.is-selected {
|
|
||||||
background-color: rgba(139, 92, 246, 0.15);
|
|
||||||
color: #ddd6fe;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Checkbox Custom */
|
|
||||||
.checkbox-item input[type="checkbox"] {
|
|
||||||
appearance: none;
|
|
||||||
width: 16px; height: 16px;
|
|
||||||
border: 2px solid #52525b;
|
|
||||||
border-radius: 4px;
|
|
||||||
display: grid; place-content: center;
|
|
||||||
margin: 0;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
.checkbox-item input[type="checkbox"]::before {
|
|
||||||
content: ""; width: 8px; height: 8px;
|
|
||||||
transform: scale(0);
|
|
||||||
box-shadow: inset 1em 1em white;
|
|
||||||
transform-origin: center;
|
|
||||||
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
|
|
||||||
background-color: white;
|
|
||||||
transition: 0.1s transform ease-in-out;
|
|
||||||
}
|
|
||||||
.checkbox-item input[type="checkbox"]:checked { background-color: var(--c-accent); border-color: var(--c-accent); }
|
|
||||||
.checkbox-item input[type="checkbox"]:checked::before { transform: scale(1); }
|
|
||||||
|
|
||||||
/* =========================================
|
|
||||||
4. HEADER & GRID RESULTADOS
|
|
||||||
========================================= */
|
|
||||||
.content-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-end;
|
|
||||||
margin-bottom: 2.5rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
.header-left h1 { font-size: 2.5rem; font-weight: 800; margin: 0; line-height: 1; color: var(--c-text-main); }
|
|
||||||
#result-count { font-size: 0.9rem; color: var(--c-text-muted); margin-top: 5px; display: block; }
|
|
||||||
|
|
||||||
/* Barra de búsqueda */
|
|
||||||
.search-container { position: relative; width: 350px; max-width: 100%; }
|
|
||||||
#main-search {
|
|
||||||
width: 100%;
|
|
||||||
background: var(--c-bg-input);
|
|
||||||
border: 1px solid var(--c-border);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 12px 16px 12px 42px;
|
|
||||||
color: white;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
#main-search:focus {
|
|
||||||
border-color: var(--c-accent);
|
|
||||||
box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--c-text-muted); font-size: 1.1rem; }
|
|
||||||
.loader-spinner {
|
|
||||||
position: absolute; right: 12px; top: 50%; margin-top: -8px;
|
|
||||||
width: 16px; height: 16px;
|
|
||||||
border: 2px solid rgba(255,255,255,0.1); border-top-color: var(--c-accent);
|
|
||||||
border-radius: 50%; animation: spin 0.8s linear infinite; display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Grid */
|
|
||||||
.media-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
|
|
||||||
gap: 3rem 2rem;
|
|
||||||
padding-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cards */
|
|
||||||
.card { cursor: pointer; display: flex; flex-direction: column; }
|
|
||||||
.card:hover .card-img-wrap img { transform: scale(1.05); }
|
|
||||||
.card:hover h3 { color: var(--c-accent); }
|
|
||||||
|
|
||||||
.card-img-wrap {
|
|
||||||
width: 100%; aspect-ratio: 2 / 3;
|
|
||||||
border-radius: 12px; overflow: hidden;
|
|
||||||
background-color: var(--c-bg-input);
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
.card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
|
|
||||||
|
|
||||||
.card-content h3 {
|
|
||||||
font-size: 1rem; font-weight: 600; margin: 0 0 0.4rem 0;
|
|
||||||
color: var(--c-text-main);
|
|
||||||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
|
||||||
}
|
|
||||||
.card-content p { font-size: 0.85rem; color: var(--c-text-muted); margin: 0; }
|
|
||||||
|
|
||||||
/* =========================================
|
|
||||||
5. RESPONSIVE (MÓVIL)
|
|
||||||
========================================= */
|
|
||||||
|
|
||||||
/* Por defecto ocultamos los controles móviles en escritorio */
|
|
||||||
.mobile-header-controls { display: none; }
|
|
||||||
.overlay-backdrop {
|
|
||||||
position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px);
|
|
||||||
z-index: 900; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
|
|
||||||
}
|
|
||||||
.overlay-backdrop.active { opacity: 1; pointer-events: auto; }
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
:root { --sidebar-width: 0px; }
|
|
||||||
|
|
||||||
.app-layout { display: block; }
|
|
||||||
.main-view { padding: 1.5rem; }
|
|
||||||
|
|
||||||
/* Mostrar controles de cabecera en móvil */
|
|
||||||
.mobile-header-controls {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-title { font-size: 1.25rem; font-weight: 700; color: var(--c-text-main); }
|
|
||||||
|
|
||||||
/* Botón hamburguesa */
|
|
||||||
.icon-btn-plain {
|
|
||||||
background: none; border: none; padding: 0;
|
|
||||||
color: var(--c-text-main); font-size: 1.5rem; cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sidebar Móvil (Drawer) */
|
|
||||||
.filters-sidebar {
|
|
||||||
position: fixed;
|
|
||||||
left: 0; top: 0;
|
|
||||||
height: 100dvh;
|
|
||||||
width: 85%; max-width: 320px;
|
|
||||||
background: var(--c-bg-page);
|
|
||||||
z-index: 1000;
|
|
||||||
transform: translateX(-100%);
|
|
||||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
margin-left: 0;
|
|
||||||
padding: 2rem; /* Restauramos padding normal para el drawer */
|
|
||||||
box-shadow: 10px 0 30px rgba(0,0,0,0.5);
|
|
||||||
border-right: 1px solid var(--c-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters-sidebar.active { transform: translateX(0); }
|
|
||||||
|
|
||||||
.sidebar-header.mobile-only {
|
|
||||||
display: flex !important;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2rem 1rem; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin { to { transform: rotate(360deg); } }
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
/* Aseguramos que el contenedor se muestre */
|
|
||||||
.mobile-header-controls {
|
|
||||||
display: flex !important;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
z-index: 5; /* Por encima de elementos flotantes */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Estilo explícito para el botón */
|
|
||||||
#toggle-sidebar {
|
|
||||||
display: flex !important;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 44px; /* Tamaño táctil mínimo */
|
|
||||||
height: 44px;
|
|
||||||
background: transparent;
|
|
||||||
border: 1px solid var(--c-border); /* Borde sutil para verlo si falla el icono */
|
|
||||||
border-radius: 8px;
|
|
||||||
color: var(--c-text-main);
|
|
||||||
font-size: 1.5rem; /* Tamaño del icono */
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#toggle-sidebar:active {
|
|
||||||
background-color: var(--c-bg-input-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ajuste del título móvil */
|
|
||||||
.mobile-title {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--c-text-main);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,864 +0,0 @@
|
|||||||
.page-wrapper {
|
|
||||||
position: relative;
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.background-gradient {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
background:
|
|
||||||
radial-gradient(
|
|
||||||
ellipse at top,
|
|
||||||
rgba(139, 92, 246, 0.15) 0%,
|
|
||||||
transparent 60%
|
|
||||||
),
|
|
||||||
radial-gradient(
|
|
||||||
ellipse at bottom right,
|
|
||||||
rgba(59, 130, 246, 0.1) 0%,
|
|
||||||
transparent 50%
|
|
||||||
);
|
|
||||||
z-index: 0;
|
|
||||||
animation: gradientShift 10s ease infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes gradientShift {
|
|
||||||
0%,
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-container {
|
|
||||||
position: relative;
|
|
||||||
z-index: 10;
|
|
||||||
max-width: 1400px;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-section {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 4rem;
|
|
||||||
animation: fadeInDown 0.6s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
font-weight: 900;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
background: linear-gradient(135deg, #ffffff 0%, #a78bfa 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-subtitle {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.users-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, 260px);
|
|
||||||
gap: 2rem;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
animation: fadeInUp 0.8s ease;
|
|
||||||
justify-content: center;
|
|
||||||
max-width: 1200px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-card {
|
|
||||||
position: relative;
|
|
||||||
aspect-ratio: 1;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
overflow: hidden;
|
|
||||||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
border: 2px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-card:hover {
|
|
||||||
transform: translateY(-12px) scale(1.02);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
box-shadow: 0 20px 40px rgba(139, 92, 246, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-card.has-password::after {
|
|
||||||
content: "🔒";
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
left: 10px;
|
|
||||||
background: rgba(0, 0, 0, 0.7);
|
|
||||||
padding: 0.4rem 0.7rem;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
z-index: 10;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-avatar {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: linear-gradient(135deg, #1e1e22 0%, #2a2a2f 100%);
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-avatar img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-avatar-placeholder {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: linear-gradient(
|
|
||||||
135deg,
|
|
||||||
rgba(139, 92, 246, 0.1) 0%,
|
|
||||||
rgba(59, 130, 246, 0.05) 100%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-avatar-placeholder svg {
|
|
||||||
width: 50%;
|
|
||||||
height: 50%;
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-info {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
background: linear-gradient(
|
|
||||||
to top,
|
|
||||||
rgba(0, 0, 0, 0.95) 0%,
|
|
||||||
rgba(0, 0, 0, 0.7) 50%,
|
|
||||||
transparent 100%
|
|
||||||
);
|
|
||||||
transform: translateY(100%);
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-card:hover .user-info {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-name {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-status {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-config-btn {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
border: none;
|
|
||||||
color: white;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: 0;
|
|
||||||
transition:
|
|
||||||
opacity 0.3s,
|
|
||||||
background 0.2s;
|
|
||||||
z-index: 20;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-card:hover .user-config-btn {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-config-btn:hover {
|
|
||||||
background: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-add-user {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 0.75rem;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 400px;
|
|
||||||
margin: 0 auto 2rem;
|
|
||||||
padding: 1.2rem 2rem;
|
|
||||||
background: rgba(139, 92, 246, 0.1);
|
|
||||||
border: 2px dashed var(--color-primary);
|
|
||||||
border-radius: 999px;
|
|
||||||
color: var(--color-primary);
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-add-user:hover {
|
|
||||||
background: rgba(139, 92, 246, 0.2);
|
|
||||||
transform: scale(1.05);
|
|
||||||
box-shadow: 0 10px 30px var(--color-primary-glow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal.active {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-overlay {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.8);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
animation: fadeIn 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
position: relative;
|
|
||||||
z-index: 10;
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
padding: 2rem;
|
|
||||||
max-width: 500px;
|
|
||||||
width: 90%;
|
|
||||||
max-height: 90vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
animation: scaleIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-large {
|
|
||||||
max-width: 700px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header h2 {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
font-weight: 800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-close {
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0.5rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-close:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group input[type="text"],
|
|
||||||
.form-group input[type="password"] {
|
|
||||||
width: 100%;
|
|
||||||
padding: 1rem;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
color: white;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: 1rem;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group input[type="text"]:focus,
|
|
||||||
.form-group input[type="password"]:focus {
|
|
||||||
background: rgba(255, 255, 255, 0.08);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
box-shadow: 0 0 15px var(--color-primary-glow);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-toggle-wrapper {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-toggle-btn {
|
|
||||||
position: absolute;
|
|
||||||
right: 1rem;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0.5rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-toggle-btn:hover {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.optional-label {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: var(--color-text-muted);
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-upload-area {
|
|
||||||
border: 2px dashed rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
padding: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s;
|
|
||||||
background: rgba(255, 255, 255, 0.02);
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-upload-area:hover {
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
background: rgba(139, 92, 246, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-upload-area.dragover {
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
background: rgba(139, 92, 246, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-preview {
|
|
||||||
width: 120px;
|
|
||||||
height: 120px;
|
|
||||||
margin: 0 auto 1rem;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
overflow: hidden;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-preview img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-preview-placeholder {
|
|
||||||
width: 60%;
|
|
||||||
height: 60%;
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-upload-text {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-upload-hint {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="file"] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary,
|
|
||||||
.btn-secondary {
|
|
||||||
flex: 1;
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
border-radius: 999px;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1rem;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: var(--color-primary);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
background: #7c3aed;
|
|
||||||
transform: scale(1.02);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-modal-content {
|
|
||||||
padding: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-info {
|
|
||||||
background: rgba(59, 130, 246, 0.1);
|
|
||||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
padding: 1rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
color: #3b82f6;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-info svg {
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin-top: 0.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.manage-actions-modal {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.manage-actions-modal .btn-action {
|
|
||||||
width: 100%;
|
|
||||||
padding: 1rem;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
font-weight: 700;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 0.75rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action.edit {
|
|
||||||
background: rgba(59, 130, 246, 0.1);
|
|
||||||
color: #3b82f6;
|
|
||||||
border-color: rgba(59, 130, 246, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action.edit:hover {
|
|
||||||
background: rgba(59, 130, 246, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action.password {
|
|
||||||
background: rgba(245, 158, 11, 0.1);
|
|
||||||
color: #f59e0b;
|
|
||||||
border-color: rgba(245, 158, 11, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action.password:hover {
|
|
||||||
background: rgba(245, 158, 11, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action.delete {
|
|
||||||
background: rgba(239, 68, 68, 0.1);
|
|
||||||
color: #ef4444;
|
|
||||||
border-color: rgba(239, 68, 68, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action.delete:hover {
|
|
||||||
background: rgba(239, 68, 68, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action.anilist {
|
|
||||||
background: rgba(2, 169, 255, 0.1);
|
|
||||||
color: #02a9ff;
|
|
||||||
border-color: rgba(2, 169, 255, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action.anilist:hover {
|
|
||||||
background: rgba(2, 169, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action.cancel {
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action.cancel:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anilist-status {
|
|
||||||
padding: 1.5rem;
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anilist-connected {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anilist-icon {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
background: linear-gradient(135deg, #02a9ff 0%, #0170d9 100%);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-weight: 900;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anilist-info h3 {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anilist-info p {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-disconnect {
|
|
||||||
width: 100%;
|
|
||||||
padding: 1rem;
|
|
||||||
background: rgba(239, 68, 68, 0.1);
|
|
||||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
|
||||||
color: #ef4444;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
font-weight: 700;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-disconnect:hover {
|
|
||||||
background: rgba(239, 68, 68, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-connect {
|
|
||||||
width: 100%;
|
|
||||||
padding: 1rem;
|
|
||||||
background: linear-gradient(135deg, #02a9ff 0%, #0170d9 100%);
|
|
||||||
border: none;
|
|
||||||
color: white;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
font-weight: 700;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-connect:hover {
|
|
||||||
transform: scale(1.02);
|
|
||||||
box-shadow: 0 10px 30px rgba(2, 169, 255, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-state {
|
|
||||||
text-align: center;
|
|
||||||
padding: 4rem 2rem;
|
|
||||||
animation: fadeInUp 0.8s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-icon {
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
margin: 0 auto 1.5rem;
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-title {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-text {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#userToastContainer {
|
|
||||||
position: fixed;
|
|
||||||
top: 20px;
|
|
||||||
right: 20px;
|
|
||||||
z-index: 2000;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wb-toast {
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
font-weight: 600;
|
|
||||||
color: white;
|
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(100%);
|
|
||||||
transition: all 0.5s ease-out;
|
|
||||||
pointer-events: all;
|
|
||||||
min-width: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wb-toast.show {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.wb-toast.success {
|
|
||||||
background: #22c55e;
|
|
||||||
border: 1px solid rgba(34, 197, 94, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.wb-toast.error {
|
|
||||||
background: #ef4444;
|
|
||||||
border: 1px solid rgba(239, 68, 68, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.wb-toast.info {
|
|
||||||
background: #3b82f6;
|
|
||||||
border: 1px solid rgba(59, 130, 246, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeInDown {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-30px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeInUp {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(30px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes scaleIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(0.9);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton {
|
|
||||||
background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
animation: shimmer 1.5s infinite;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes shimmer {
|
|
||||||
0% {
|
|
||||||
background-position: 200% 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
background-position: -200% 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.page-wrapper {
|
|
||||||
padding: 1rem;
|
|
||||||
|
|
||||||
align-items: flex-start;
|
|
||||||
padding-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-section {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
line-height: 1.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.users-grid {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 0.75rem;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-name {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 800;
|
|
||||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-config-btn {
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
top: 5px;
|
|
||||||
right: 5px;
|
|
||||||
background: rgba(0, 0, 0, 0.6);
|
|
||||||
opacity: 1 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-config-btn svg {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-add-user {
|
|
||||||
width: 100%;
|
|
||||||
padding: 1.25rem;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 380px) {
|
|
||||||
.users-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-card {
|
|
||||||
aspect-ratio: 16/9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (hover: none) {
|
|
||||||
.user-info {
|
|
||||||
transform: translateY(0);
|
|
||||||
background: linear-gradient(
|
|
||||||
to top,
|
|
||||||
rgba(0, 0, 0, 0.95) 0%,
|
|
||||||
rgba(0, 0, 0, 0.6) 50%,
|
|
||||||
transparent 100%
|
|
||||||
);
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-card:hover {
|
|
||||||
transform: none;
|
|
||||||
border-color: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-card:active {
|
|
||||||
transform: scale(0.97);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.modal {
|
|
||||||
align-items: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
border-radius: 20px 20px 0 0;
|
|
||||||
max-height: 85vh;
|
|
||||||
padding: 1.5rem;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group input[type="text"],
|
|
||||||
.form-group input[type="password"] {
|
|
||||||
padding: 1.2rem;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary,
|
|
||||||
.btn-secondary {
|
|
||||||
padding: 1.2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,64 +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="/views/css/components/create-room.css">
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
<script src="/src/scripts/settings.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,54 +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>
|
|
||||||
<a href="/gallery" class="back-btn">
|
|
||||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
|
|
||||||
Back to Gallery
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<main class="gallery-item-main">
|
|
||||||
<div class="gallery-hero-placeholder"></div>
|
|
||||||
|
|
||||||
<section class="section">
|
|
||||||
<div id="item-main-content" class="item-content"></div>
|
|
||||||
|
|
||||||
<div id="similar-section" class="similar-section">
|
|
||||||
<p style="text-align:center;color:var(--color-text-secondary);opacity:0.7;padding:3rem 0;">Loading similar images...</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<div id="updateToast" class="hidden">
|
|
||||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
|
||||||
|
|
||||||
<a
|
|
||||||
id="downloadButton"
|
|
||||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Click To Download
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="/src/scripts/updateNotifier.js"></script>
|
|
||||||
<script src="/src/scripts/room-modal.js"></script>
|
|
||||||
<script src="/src/scripts/gallery/image.js"></script>
|
|
||||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
|
||||||
<script src="/src/scripts/auth-guard.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,112 +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="stylesheet" href="/views/css/components/titlebar.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/create-room.css"/>
|
|
||||||
<script src="/src/scripts/titlebar.js"></script>
|
|
||||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="nav-spacer"></div>
|
|
||||||
|
|
||||||
<main class="content-container">
|
|
||||||
|
|
||||||
<header class="mp-header">
|
|
||||||
<div class="header-top">
|
|
||||||
<h1 class="page-title">Extension Store</h1>
|
|
||||||
<div class="header-actions">
|
|
||||||
<button id="btn-configure" class="btn-secondary">
|
|
||||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"/><path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/><path d="M12 2v2"/><path d="M12 22v-2"/><path d="m17 20.66-1-1.73"/><path d="M11 10.27 7 3.34"/><path d="m20.66 17-1.73-1"/><path d="m3.34 7 1.73 1"/><path d="M14 12h8"/><path d="M2 12h2"/><path d="m20.66 7-1.73 1"/><path d="m3.34 17 1.73-1"/><path d="m17 3.34-1 1.73"/><path d="m11 13.73-4 6.93"/></svg>
|
|
||||||
Source Settings
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="config-panel" class="config-panel hidden">
|
|
||||||
<div class="config-box">
|
|
||||||
<h3>Marketplace Source</h3>
|
|
||||||
<p class="config-desc">Enter a valid JSON URL to fetch extensions from.</p>
|
|
||||||
<div class="input-group">
|
|
||||||
<input type="text" id="source-url-input" placeholder="https://example.com/marketplace.json">
|
|
||||||
<button id="btn-save-source" class="btn-primary">Save & Reload</button>
|
|
||||||
</div>
|
|
||||||
<button id="btn-reset-source" class="btn-text">Reset to Default</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tabs-wrapper">
|
|
||||||
<button class="tab-btn active" data-tab="marketplace">Discover</button>
|
|
||||||
<button class="tab-btn" data-tab="installed">Installed</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="toolbar" id="mp-toolbar">
|
|
||||||
<div class="filter-group">
|
|
||||||
<div class="select-wrapper">
|
|
||||||
<label>Type</label>
|
|
||||||
<select id="filter-type">
|
|
||||||
<option value="All">All Types</option>
|
|
||||||
<option value="anime-board">Anime</option>
|
|
||||||
<option value="book-board">Manga/Books</option>
|
|
||||||
<option value="image-board">Images</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="select-wrapper">
|
|
||||||
<label>Language</label>
|
|
||||||
<select id="filter-lang">
|
|
||||||
<option value="All">Any Language</option>
|
|
||||||
<option value="MULTI">Multi</option>
|
|
||||||
<option value="en">English</option>
|
|
||||||
<option value="es">Spanish</option>
|
|
||||||
<option value="jp">Japanese</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="select-wrapper" style="justify-content: flex-end;">
|
|
||||||
<button id="btn-toggle-nsfw" class="btn-secondary" style="height: 42px; margin-top: auto;">
|
|
||||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 6px;">
|
|
||||||
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
|
|
||||||
<line x1="1" y1="1" x2="23" y2="23"></line>
|
|
||||||
</svg>
|
|
||||||
NSFW: Off
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button id="btn-update-all" class="btn-primary hidden">
|
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 21h5v-5"/></svg>
|
|
||||||
Update All
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div id="marketplace-content" class="mp-grid-wrapper"></div>
|
|
||||||
|
|
||||||
<div id="customModal" class="modal-overlay hidden">
|
|
||||||
<div class="modal-box">
|
|
||||||
<h3 id="modalTitle"></h3>
|
|
||||||
<p id="modalMessage"></p>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button id="modalCloseButton" class="btn-secondary">Cancel</button>
|
|
||||||
<button id="modalConfirmButton" class="btn-danger hidden">Confirm</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<script src="/src/scripts/utils/notification-utils.js"></script>
|
|
||||||
<script src="/src/scripts/room-modal.js"></script>
|
|
||||||
<script src="/src/scripts/updateNotifier.js"></script>
|
|
||||||
<script src="/src/scripts/marketplace.js"></script>
|
|
||||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
|
||||||
<script src="/src/scripts/auth-guard.js"></script>
|
|
||||||
<script src="/src/scripts/settings.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,255 +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 class="main-wrapper">
|
|
||||||
<section class="profile-header">
|
|
||||||
<div class="profile-banner"></div> <div class="profile-body">
|
|
||||||
<div class="profile-avatar-wrapper">
|
|
||||||
<img id="user-avatar" src="/public/assets/placeholder.svg" alt="Profile" class="avatar-img">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="profile-details">
|
|
||||||
<div class="profile-text">
|
|
||||||
<div class="username-wrapper">
|
|
||||||
<h1 id="user-username">Loading...</h1>
|
|
||||||
<a id="header-anilist-link" href="#" target="_blank" class="header-anilist-badge" style="display: none;">
|
|
||||||
<img src="https://anilist.co/img/icons/android-chrome-512x512.png" alt="AniList">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="profile-stats-grid">
|
|
||||||
<div class="stat-card">
|
|
||||||
<span class="stat-value" id="total-stat">0</span>
|
|
||||||
<span class="stat-label">Total Entries</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<span class="stat-value" id="anime-stat">-</span>
|
|
||||||
<span class="stat-label">Anime</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<span class="stat-value" id="manga-stat">-</span>
|
|
||||||
<span class="stat-label">Manga</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hub-navigation-modern">
|
|
||||||
<button class="nav-pill active" data-target="tracking">Tracking List</button>
|
|
||||||
<button class="nav-pill" data-target="local">Local Library</button>
|
|
||||||
<button class="nav-pill" data-target="settings">Settings</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div class="content-container">
|
|
||||||
|
|
||||||
<div id="section-tracking" class="tab-section active">
|
|
||||||
<div class="toolbar">
|
|
||||||
<div class="search-box">
|
|
||||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
|
||||||
<input type="text" id="tracking-search-input" class="search-input" placeholder="Search your list...">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="filters-inline">
|
|
||||||
<select id="status-filter" class="minimal-select"><option value="all">Status: All</option><option value="CURRENT">Watching</option><option value="COMPLETED">Completed</option><option value="PLANNING">Planning</option><option value="PAUSED">Paused</option><option value="DROPPED">Dropped</option></select>
|
|
||||||
<select id="type-filter" class="minimal-select"><option value="all">Type: All</option><option value="ANIME">Anime</option><option value="MANGA">Manga</option><option value="NOVEL">Novel</option></select>
|
|
||||||
<select id="sort-filter" class="minimal-select"><option value="updated">Latest</option><option value="score">Score</option><option value="title">A-Z</option></select>
|
|
||||||
<div class="view-toggle">
|
|
||||||
<button class="view-btn active" data-view="grid">⊞</button>
|
|
||||||
<button class="view-btn" data-view="list">☰</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="loading-state" class="loading-state"><div class="spinner"></div></div>
|
|
||||||
<div id="empty-state" class="empty-state" style="display: none;">
|
|
||||||
<p>No content found</p>
|
|
||||||
<a href="/anime" class="btn-blur">Discover Content</a>
|
|
||||||
</div>
|
|
||||||
<div id="list-container" class="list-grid"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="section-local" class="tab-section">
|
|
||||||
|
|
||||||
<div id="downloads-monitor" class="downloads-monitor">
|
|
||||||
<div class="monitor-header">
|
|
||||||
<div class="monitor-title">
|
|
||||||
<span class="pulse-dot"></span>
|
|
||||||
<h3>Download Manager</h3>
|
|
||||||
</div>
|
|
||||||
<div class="monitor-stats">
|
|
||||||
<span id="dl-stat-active">0 Active</span>
|
|
||||||
<span class="divider">•</span>
|
|
||||||
<span id="dl-stat-failed">0 Failed</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="downloads-list-container" class="monitor-list">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="toolbar local-toolbar">
|
|
||||||
<div class="search-box">
|
|
||||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
|
||||||
<input type="text" id="local-search-input" class="search-input" placeholder="Filter local files...">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="local-type-switcher">
|
|
||||||
<button class="type-pill-btn active" onclick="switchLocalType('anime', this)">Anime</button>
|
|
||||||
<button class="type-pill-btn" onclick="switchLocalType('manga', this)">Manga</button>
|
|
||||||
<button class="type-pill-btn" onclick="switchLocalType('novels', this)">Novels</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="actions-group">
|
|
||||||
<button id="scan-incremental-btn" class="action-icon-btn" title="Update Library (Fast)">
|
|
||||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
|
|
||||||
</button>
|
|
||||||
<button id="scan-full-btn" class="action-icon-btn danger" title="Full Rescan (Slow)">
|
|
||||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="console-output" id="scan-console" style="display: none;">
|
|
||||||
<div class="spinner small"></div>
|
|
||||||
<span id="scan-status-text">Scanning folders...</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="local-list-container" class="list-grid"></div>
|
|
||||||
|
|
||||||
<div id="local-loading" class="loading-state" style="display: none;">
|
|
||||||
<div class="spinner"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="section-settings" class="tab-section">
|
|
||||||
<div class="stream-settings-container">
|
|
||||||
|
|
||||||
<div class="stream-section">
|
|
||||||
<h3 class="section-label">Profile</h3>
|
|
||||||
<form id="profile-form" class="stream-profile-row">
|
|
||||||
|
|
||||||
<div class="stream-avatar-wrapper">
|
|
||||||
<img id="setting-avatar-preview" src="/public/assets/placeholder.svg" alt="Avatar">
|
|
||||||
<div class="avatar-overlay" onclick="document.getElementById('avatar-upload').click()">
|
|
||||||
<span>Edit</span>
|
|
||||||
</div>
|
|
||||||
<input type="file" id="avatar-upload" accept="image/*" style="display: none;">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stream-inputs-col">
|
|
||||||
<div class="stream-input-group">
|
|
||||||
<label>Username</label>
|
|
||||||
<input type="text" id="setting-username" class="stream-input">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stream-actions">
|
|
||||||
<button type="submit" class="btn-stream-primary">Submit</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stream-section">
|
|
||||||
<h3 class="section-label">Change password</h3>
|
|
||||||
<form id="password-form" class="stream-form-row">
|
|
||||||
<div class="stream-input-group">
|
|
||||||
<label>Current password</label>
|
|
||||||
<input type="password" id="current-password" class="stream-input" placeholder="••••••">
|
|
||||||
</div>
|
|
||||||
<div class="stream-input-group">
|
|
||||||
<label>New password</label>
|
|
||||||
<input type="password" id="new-password" class="stream-input" placeholder="••••••">
|
|
||||||
</div>
|
|
||||||
<div class="stream-actions-inline">
|
|
||||||
<button type="submit" class="btn-stream-ghost">Update password</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stream-section">
|
|
||||||
<h3 class="section-label">Connections</h3>
|
|
||||||
<div class="stream-integration-row">
|
|
||||||
<div class="int-info">
|
|
||||||
<img src="https://anilist.co/img/icons/android-chrome-512x512.png" alt="AL" class="int-logo">
|
|
||||||
<div class="int-text">
|
|
||||||
<span class="int-name">AniList</span>
|
|
||||||
<span id="anilist-status" class="int-status">Checking...</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button id="anilist-action-btn" class="btn-stream-outline">Manage</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="manual-match-modal" class="custom-modal-overlay hidden">
|
|
||||||
<div class="custom-modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h3>Fix Match</h3>
|
|
||||||
<button class="close-modal-btn" onclick="DashboardApp.Library.closeManualMatch()">×</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-body">
|
|
||||||
<p class="modal-description">Introduce el ID de AniList correcto para asociar este archivo local.</p>
|
|
||||||
|
|
||||||
<div class="input-group">
|
|
||||||
<label>File Path / Folder Name</label>
|
|
||||||
<div id="manual-match-path" class="path-display"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input-group">
|
|
||||||
<label>AniList ID</label>
|
|
||||||
<input type="number" id="manual-match-id" class="stream-input" placeholder="Ej: 21 (One Piece)">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button class="btn-secondary" onclick="DashboardApp.Library.closeManualMatch()">Cancel</button>
|
|
||||||
<button class="btn-primary" onclick="DashboardApp.Library.submitManualMatch()">Confirm Match</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="updateToast" class="hidden">
|
|
||||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
|
||||||
<a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">Download</a>
|
|
||||||
</div>
|
|
||||||
<div id="anilist-connect-modal" class="custom-modal-overlay hidden">
|
|
||||||
<div class="custom-modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h3>AniList Integration</h3>
|
|
||||||
<button class="close-modal-btn" onclick="DashboardApp.User.closeAniListModal()">×</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-body" id="anilist-modal-body">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="/src/scripts/updateNotifier.js"></script>
|
|
||||||
<script src="/src/scripts/room-modal.js"></script>
|
|
||||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
|
||||||
<script src="/src/scripts/auth-guard.js"></script>
|
|
||||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/notification-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/list-modal-manager.js"></script>
|
|
||||||
<script src="/src/scripts/profile.js"></script>
|
|
||||||
<script src="/src/scripts/settings.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,296 +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="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">
|
|
||||||
<div class="quick-select-wrapper" style="min-width: 130px; background: rgba(255,255,255,0.05);">
|
|
||||||
<select id="search-source-select" class="quick-select">
|
|
||||||
<option value="anilist">AniList</option>
|
|
||||||
</select>
|
|
||||||
<div class="select-arrow">▼</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<input type="text" id="anime-search-input" placeholder="Search anime..." autocomplete="off"/>
|
|
||||||
<button id="anime-search-btn">Search</button>
|
|
||||||
</div>
|
|
||||||
<div id="anime-results" class="anime-results"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="step-config" style="display: none;">
|
|
||||||
<div class="modal-header-row">
|
|
||||||
<button class="btn-icon-small" id="back-to-search" title="Back">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
|
|
||||||
</button>
|
|
||||||
<h2 class="modal-title" id="selected-anime-title">Configure Episode</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="config-layout">
|
|
||||||
<div class="config-sidebar">
|
|
||||||
<img id="config-cover" class="config-cover" src="" alt="Cover">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="config-main" style="justify-content: center;">
|
|
||||||
|
|
||||||
<div style="display: flex; flex-direction: column; height: 100%;">
|
|
||||||
|
|
||||||
<div class="cfg-header" style="margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
|
|
||||||
<div class="cfg-section-title">Select Episodes</div>
|
|
||||||
<div class="cfg-actions">
|
|
||||||
<button id="select-all-page" class="btn-text-tiny">Select Page</button>
|
|
||||||
<button id="select-none-eps" class="btn-text-tiny">Clear</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="episodes-grid" class="episodes-grid-container">
|
|
||||||
<div class="grid-loader">Loading...</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="modal-pagination" class="modal-pagination" style="display: none;">
|
|
||||||
<button id="modal-prev-page" class="modal-page-btn">
|
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
|
|
||||||
</button>
|
|
||||||
<span id="modal-page-info" class="modal-page-info">1 - 50</span>
|
|
||||||
<button id="modal-next-page" class="modal-page-btn">
|
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="manual-ep-input" style="margin-top: 10px; display: none;">
|
|
||||||
<label style="font-size: 0.8rem; color: #aaa;">Manual Entry:</label>
|
|
||||||
<div class="ep-control">
|
|
||||||
<button class="ep-btn" id="ep-dec">−</button>
|
|
||||||
<input type="number" id="inp-episode" class="ep-input" value="1" min="1">
|
|
||||||
<button class="ep-btn" id="ep-inc">+</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="config-error" style="color:#ff6b6b; font-size:0.9rem; display:none; background:rgba(255,0,0,0.1); padding:10px; border-radius:8px; margin-top: 10px;"></div>
|
|
||||||
|
|
||||||
<div class="form-actions" style="margin-top:auto; display:flex; gap:10px; padding-top: 20px;">
|
|
||||||
<button id="btn-add-queue" class="btn-cancel" style="flex:1; justify-content: center; border-color: var(--brand-color); color: white;">
|
|
||||||
+ Add Selected (<span id="sel-count">0</span>)
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button id="btn-launch-stream" class="btn-confirm" style="flex:1;">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
|
|
||||||
Play First
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/search-manager.js"></script>
|
|
||||||
<script src="/src/scripts/anime/subtitle-renderer.js"></script>
|
|
||||||
<script src="/src/scripts/anime/player.js"></script>
|
|
||||||
<script src="/src/scripts/room.js"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,86 +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 - Schedule</title>
|
|
||||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="/views/css/globals.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/schedule/schedule.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/navbar.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/create-room.css"/>
|
|
||||||
<script src="/src/scripts/titlebar.js"></script>
|
|
||||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="ambient-bg" id="ambientBg"></div>
|
|
||||||
<div class="bg-overlay"></div>
|
|
||||||
|
|
||||||
<div class="schedule-container">
|
|
||||||
|
|
||||||
<header class="schedule-header">
|
|
||||||
<div class="header-left">
|
|
||||||
<h1 class="page-title">Release Schedule</h1>
|
|
||||||
<div class="month-navigator">
|
|
||||||
<button class="nav-btn" onclick="navigate(-1)">‹</button>
|
|
||||||
<span id="monthTitle" class="current-date-label">Loading...</span>
|
|
||||||
<button class="nav-btn" onclick="navigate(1)">›</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="header-controls">
|
|
||||||
<div class="toggle-group" id="filter-group" style="display: none;">
|
|
||||||
<button class="toggle-btn active" id="btnAll" onclick="setFilter('ALL')">All</button>
|
|
||||||
<button class="toggle-btn" id="btnMyList" onclick="setFilter('MY_LIST')">My List</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="divider-vertical"></div>
|
|
||||||
|
|
||||||
<div class="toggle-group">
|
|
||||||
<button class="toggle-btn active" id="btnSub" onclick="setMode('SUB')">Sub</button>
|
|
||||||
<button class="toggle-btn" id="btnDub" onclick="setMode('DUB')">Dub</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="view-switcher">
|
|
||||||
<button class="view-btn active" id="btnViewMonth" onclick="setViewType('MONTH')" title="Month View">
|
|
||||||
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
|
|
||||||
</button>
|
|
||||||
<button class="view-btn" id="btnViewWeek" onclick="setViewType('WEEK')" title="Week View">
|
|
||||||
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="schedule-content">
|
|
||||||
</main>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="loader-overlay" id="loader">
|
|
||||||
<div class="spinner"></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"
|
|
||||||
>
|
|
||||||
Click To Download
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="/src/scripts/room-modal.js"></script>
|
|
||||||
<script src="/src/scripts/auth-guard.js"></script>
|
|
||||||
<script src="/src/scripts/schedule/schedule.js"></script>
|
|
||||||
<script src="/src/scripts/updateNotifier.js"></script>
|
|
||||||
<script src="/src/scripts/settings.js"></script>
|
|
||||||
<script src="/src/scripts/rcp-inapp.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,143 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Browse - 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/search.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>
|
|
||||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="app-layout">
|
|
||||||
|
|
||||||
<aside class="filters-sidebar" id="sidebar">
|
|
||||||
|
|
||||||
<div class="sidebar-header mobile-only" style="margin-bottom: 2rem; display:none;">
|
|
||||||
<h3 style="margin:0;">Filters</h3>
|
|
||||||
<button id="close-sidebar-mobile" style="background:none; border:none; color:white; font-size:1.5rem;"><i class="ri-close-line"></i></button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="filter-group">
|
|
||||||
<div class="mode-switcher">
|
|
||||||
<button class="mode-btn active" data-mode="anime">Anime</button>
|
|
||||||
<button class="mode-btn" data-mode="books">Manga</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="filter-group" style="padding-bottom: 1.5rem; border-bottom: 1px solid var(--c-border-light); margin-bottom: 1.5rem;">
|
|
||||||
<label>Source</label>
|
|
||||||
<div class="custom-select">
|
|
||||||
<select id="source-select">
|
|
||||||
<option value="anilist">Anilist</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="anilist-filters" style="display: flex; flex-direction: column; gap: 1.5rem;">
|
|
||||||
|
|
||||||
<div class="filter-group">
|
|
||||||
<label>Sort By</label>
|
|
||||||
<div class="custom-select">
|
|
||||||
<select id="filter-sort">
|
|
||||||
<option value="TRENDING_DESC">Trending</option>
|
|
||||||
<option value="POPULARITY_DESC">Popularity</option>
|
|
||||||
<option value="SCORE_DESC">Top Rated</option>
|
|
||||||
<option value="START_DATE_DESC">Newest</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="filter-group">
|
|
||||||
<label>Season & Year</label>
|
|
||||||
<div style="display: flex; gap: 8px;">
|
|
||||||
<div class="custom-select" style="flex:1">
|
|
||||||
<select id="filter-season">
|
|
||||||
<option value="">Season</option>
|
|
||||||
<option value="WINTER">Winter</option>
|
|
||||||
<option value="SPRING">Spring</option>
|
|
||||||
<option value="SUMMER">Summer</option>
|
|
||||||
<option value="FALL">Fall</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="custom-select" style="flex:1">
|
|
||||||
<select id="filter-year"><option value="">Year</option></select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="filter-group">
|
|
||||||
<label>Genre</label>
|
|
||||||
<div class="custom-select">
|
|
||||||
<select id="filter-genre"><option value="">All Genres</option></select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="filter-group">
|
|
||||||
<label>Status</label>
|
|
||||||
<div class="custom-select">
|
|
||||||
<select id="filter-status">
|
|
||||||
<option value="">Any Status</option>
|
|
||||||
<option value="RELEASING">Airing</option>
|
|
||||||
<option value="FINISHED">Finished</option>
|
|
||||||
<option value="NOT_YET_RELEASED">Upcoming</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="filter-group">
|
|
||||||
<label>Format</label>
|
|
||||||
<div class="custom-select">
|
|
||||||
<select id="filter-format"><option value="">Any Format</option></select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="extension-filters" style="display: none; flex-direction: column; gap: 1.5rem;">
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<main class="main-view">
|
|
||||||
|
|
||||||
<div class="mobile-header-controls">
|
|
||||||
<button id="toggle-sidebar" class="icon-btn-plain">
|
|
||||||
<i class="ri-menu-2-line"></i>
|
|
||||||
</button>
|
|
||||||
<span class="mobile-title">Browse</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-header">
|
|
||||||
<div class="header-left">
|
|
||||||
<h1 id="results-title">Trending Now</h1>
|
|
||||||
<span id="result-count">20 results</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="search-container">
|
|
||||||
<i class="ri-search-line search-icon"></i>
|
|
||||||
<input type="text" id="main-search" placeholder="Search..." autocomplete="off">
|
|
||||||
<div id="search-loader" class="loader-spinner"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="results-grid" class="media-grid"></div>
|
|
||||||
|
|
||||||
<div class="loading-state" id="initial-loader" style="display: none;">
|
|
||||||
<div class="spinner"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="mobile-overlay" class="overlay-backdrop"></div>
|
|
||||||
|
|
||||||
<script src="/src/scripts/room-modal.js"></script>
|
|
||||||
<script src="/src/scripts/auth-guard.js"></script>
|
|
||||||
<script src="/src/scripts/settings.js"></script>
|
|
||||||
<script src="/src/scripts/search.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
node_modules
|
|
||||||
electron
|
|
||||||
dist
|
|
||||||
.env
|
|
||||||
build
|
|
||||||
.gitignore
|
|
||||||
Dockerfile
|
|
||||||
.dockerignore
|
|
||||||
5
docker/.gitignore
vendored
5
docker/.gitignore
vendored
@@ -1,5 +0,0 @@
|
|||||||
node_modules
|
|
||||||
electron
|
|
||||||
dist
|
|
||||||
.env
|
|
||||||
build
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
FROM node:20-bookworm
|
|
||||||
|
|
||||||
RUN apt-get update && apt-get install -y \
|
|
||||||
git \
|
|
||||||
ffmpeg \
|
|
||||||
curl \
|
|
||||||
wget \
|
|
||||||
&& rm -rf /var/lib/apt/lists/*
|
|
||||||
|
|
||||||
RUN wget -q https://github.com/cloudflare/cloudflared/releases/download/2025.11.1/cloudflared-linux-amd64.deb \
|
|
||||||
&& dpkg -i cloudflared-linux-amd64.deb \
|
|
||||||
&& rm cloudflared-linux-amd64.deb
|
|
||||||
|
|
||||||
WORKDIR /app
|
|
||||||
|
|
||||||
RUN git clone https://git.waifuboard.app/ItsSkaiya/WaifuBoard.git repo
|
|
||||||
|
|
||||||
RUN mv repo/docker/* . \
|
|
||||||
&& rm -rf repo
|
|
||||||
|
|
||||||
RUN npm install
|
|
||||||
|
|
||||||
RUN npx playwright install chromium
|
|
||||||
RUN npx playwright install-deps
|
|
||||||
|
|
||||||
EXPOSE 54322
|
|
||||||
CMD ["npm", "run", "start"]
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "waifu-board",
|
|
||||||
"version": "2.0.0",
|
|
||||||
"description": "",
|
|
||||||
"main": "main.js",
|
|
||||||
"scripts": {
|
|
||||||
"build": "tsc",
|
|
||||||
"start": "tsc && node server.js"
|
|
||||||
},
|
|
||||||
"keywords": [],
|
|
||||||
"author": "",
|
|
||||||
"license": "ISC",
|
|
||||||
"type": "commonjs",
|
|
||||||
"dependencies": {
|
|
||||||
"@fastify/static": "^8.3.0",
|
|
||||||
"@fastify/websocket": "^11.2.0",
|
|
||||||
"adm-zip": "^0.5.16",
|
|
||||||
"bcrypt": "^6.0.0",
|
|
||||||
"bindings": "^1.5.0",
|
|
||||||
"cheerio": "^1.1.2",
|
|
||||||
"dotenv": "^17.2.3",
|
|
||||||
"epub": "^1.3.0",
|
|
||||||
"fastify": "^5.6.2",
|
|
||||||
"js-yaml": "^4.1.1",
|
|
||||||
"jsonwebtoken": "^9.0.3",
|
|
||||||
"node-addon-api": "^8.5.0",
|
|
||||||
"node-cron": "^4.2.1",
|
|
||||||
"playwright-chromium": "^1.57.0",
|
|
||||||
"sqlite3": "^5.1.7",
|
|
||||||
"ws": "^8.18.3"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@types/adm-zip": "^0.5.7",
|
|
||||||
"@types/bcrypt": "^6.0.0",
|
|
||||||
"@types/jsonwebtoken": "^9.0.10",
|
|
||||||
"@types/node": "^24.0.0",
|
|
||||||
"@types/ws": "^8.18.1",
|
|
||||||
"node-gyp": "^12.1.0",
|
|
||||||
"ts-node": "^10.9.0",
|
|
||||||
"typescript": "^5.3.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="1200" viewBox="0 0 800 1200"><rect width="100%" height="100%" fill="#DDDDDD"/><path fill="#999999" d="M214.535 564.095h11.97v73.02h-6.97q-1.61 0-2.7-.53-1.08-.53-2.09-1.79l-38.13-48.69q.3 3.34.3 6.17v44.84h-11.97v-73.02h7.12q.86 0 1.49.07.63.08 1.11.31.48.22.94.65.45.43 1.01 1.14l38.28 48.88q-.15-1.77-.26-3.48-.1-1.72-.1-3.18zm49.19 20.4q5.76 0 10.48 1.87t8.08 5.3 5.18 8.38q1.81 4.95 1.81 11.06 0 6.16-1.81 11.11-1.82 4.95-5.18 8.44-3.36 3.48-8.08 5.35t-10.48 1.87q-5.81 0-10.55-1.87-4.75-1.87-8.11-5.35-3.36-3.49-5.2-8.44t-1.84-11.11q0-6.11 1.84-11.06t5.2-8.38 8.11-5.3q4.74-1.87 10.55-1.87m0 43.78q6.46 0 9.57-4.34t3.11-12.73q0-8.38-3.11-12.77-3.11-4.4-9.57-4.4-6.56 0-9.72 4.42t-3.16 12.75q0 8.34 3.16 12.7 3.16 4.37 9.72 4.37m52.37 9.65q-6.77 0-10.38-3.81-3.61-3.82-3.61-10.53v-28.94h-5.3q-1.01 0-1.72-.66-.71-.65-.71-1.97v-4.95l8.34-1.36 2.62-14.14q.26-1.01.96-1.56.71-.56 1.82-.56h6.46v16.31h13.84v8.89h-13.84v28.08q0 2.42 1.19 3.78 1.19 1.37 3.26 1.37 1.16 0 1.94-.28.79-.28 1.37-.58t1.03-.58q.46-.28.91-.28.56 0 .91.28t.76.83l3.73 6.06q-2.72 2.27-6.26 3.44-3.53 1.16-7.32 1.16m92.87-63.03h-32.42v21.62h27.37v10.86h-27.37v29.74h-13.64v-73.02h46.06zm32.07 9.6q5.75 0 10.47 1.87 4.73 1.87 8.08 5.3 3.36 3.43 5.18 8.38t1.82 11.06q0 6.16-1.82 11.11t-5.18 8.44q-3.35 3.48-8.08 5.35-4.72 1.87-10.47 1.87-5.81 0-10.56-1.87t-8.1-5.35q-3.36-3.49-5.21-8.44-1.84-4.95-1.84-11.11 0-6.11 1.84-11.06 1.85-4.95 5.21-8.38 3.35-3.43 8.1-5.3t10.56-1.87m0 43.78q6.46 0 9.57-4.34 3.1-4.34 3.1-12.73 0-8.38-3.1-12.77-3.11-4.4-9.57-4.4-6.57 0-9.73 4.42-3.15 4.42-3.15 12.75 0 8.34 3.15 12.7 3.16 4.37 9.73 4.37m67.26-42.97h12.48v51.81h-7.63q-2.47 0-3.13-2.27l-.86-4.14q-3.18 3.23-7.02 5.22-3.84 2-9.04 2-4.24 0-7.5-1.44-3.25-1.44-5.48-4.07-2.22-2.62-3.36-6.23-1.13-3.61-1.13-7.96v-32.92h12.47v32.92q0 4.75 2.2 7.35t6.59 2.6q3.23 0 6.06-1.44t5.35-3.96zm35.6 2.27.86 4.09q1.57-1.57 3.31-2.9 1.74-1.34 3.69-2.28 1.94-.93 4.16-1.46 2.23-.53 4.85-.53 4.24 0 7.53 1.44 3.28 1.44 5.48 4.04 2.19 2.6 3.33 6.21 1.13 3.61 1.13 7.95v32.98h-12.47v-32.98q0-4.74-2.17-7.34-2.17-2.61-6.62-2.61-3.23 0-6.06 1.47-2.82 1.46-5.35 3.99v37.47h-12.47v-51.81h7.62q2.43 0 3.18 2.27m78.68 34.19v-23.23q-2.12-2.58-4.62-3.64t-5.38-1.06q-2.82 0-5.1 1.06-2.27 1.06-3.88 3.21-1.62 2.14-2.48 5.45t-.86 7.8q0 4.55.73 7.71.74 3.15 2.1 5.15 1.36 1.99 3.33 2.88 1.97.88 4.4.88 3.89 0 6.61-1.62 2.73-1.61 5.15-4.59m0-59.69h12.48v75.04h-7.63q-2.47 0-3.13-2.27l-1.06-5q-3.13 3.58-7.2 5.81-4.06 2.22-9.46 2.22-4.25 0-7.78-1.77-3.54-1.77-6.09-5.13-2.55-3.35-3.94-8.3-1.38-4.95-1.38-11.32 0-5.75 1.56-10.7 1.57-4.95 4.5-8.59 2.92-3.63 7.01-5.68 4.1-2.04 9.2-2.04 4.34 0 7.42 1.36t5.5 3.69z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 123 KiB |
202
docker/server.js
202
docker/server.js
@@ -1,202 +0,0 @@
|
|||||||
const fastify = require("fastify")({
|
|
||||||
logger: { level: "error" },
|
|
||||||
});
|
|
||||||
|
|
||||||
const path = require("path");
|
|
||||||
const jwt = require("jsonwebtoken");
|
|
||||||
const cron = require("node-cron");
|
|
||||||
const { initHeadless } = require("./dist/shared/headless");
|
|
||||||
const { initDatabase } = require("./dist/shared/database");
|
|
||||||
const { loadExtensions } = require("./dist/shared/extensions");
|
|
||||||
const {refreshTrendingAnime, refreshTopAiringAnime} = require("./dist/api/anime/anime.service");
|
|
||||||
const {refreshPopularBooks, refreshTrendingBooks} = require("./dist/api/books/books.service");
|
|
||||||
const { ensureConfigFile } = require("./dist/shared/config");
|
|
||||||
|
|
||||||
const viewsRoutes = require("./dist/views/views.routes");
|
|
||||||
const animeRoutes = require("./dist/api/anime/anime.routes");
|
|
||||||
const booksRoutes = require("./dist/api/books/books.routes");
|
|
||||||
const proxyRoutes = require("./dist/api/proxy/proxy.routes");
|
|
||||||
const extensionsRoutes = require("./dist/api/extensions/extensions.routes");
|
|
||||||
const galleryRoutes = require("./dist/api/gallery/gallery.routes");
|
|
||||||
const userRoutes = require("./dist/api/user/user.routes");
|
|
||||||
const listRoutes = require("./dist/api/list/list.routes");
|
|
||||||
const anilistRoute = require("./dist/api/anilist/anilist");
|
|
||||||
const localRoutes = require("./dist/api/local/local.routes");
|
|
||||||
const configRoutes = require("./dist/api/config/config.routes");
|
|
||||||
const roomRoutes = require("./dist/api/rooms/rooms.routes");
|
|
||||||
const { setupRoomWebSocket } = require("./dist/api/rooms/rooms.websocket");
|
|
||||||
|
|
||||||
const { getConfig } = require('./dist/shared/config');
|
|
||||||
const { values } = getConfig();
|
|
||||||
const jwtSecret = values.server?.jwt_secret;
|
|
||||||
|
|
||||||
fastify.addHook("preHandler", async (request, reply) => {
|
|
||||||
const auth = request.headers.authorization;
|
|
||||||
if (!auth) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const token = auth.replace("Bearer ", "");
|
|
||||||
request.user = jwt.verify(token, jwtSecret);
|
|
||||||
} catch (e) {
|
|
||||||
return reply.code(401).send({ error: "Invalid token" });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const roomService = require('./dist/api/rooms/rooms.service');
|
|
||||||
|
|
||||||
fastify.addHook('onRequest', async (req, reply) => {
|
|
||||||
const isTunnel =
|
|
||||||
!!req.headers['cf-connecting-ip'] ||
|
|
||||||
!!req.headers['cf-ray'];
|
|
||||||
|
|
||||||
if (!isTunnel) return;
|
|
||||||
|
|
||||||
if (req.url.startsWith('/public/') ||
|
|
||||||
req.url.startsWith('/views/') ||
|
|
||||||
req.url.startsWith('/src/')) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (req.url.startsWith('/room')) {
|
|
||||||
const urlParams = new URLSearchParams(req.url.split('?')[1]);
|
|
||||||
const roomId = urlParams.get('id');
|
|
||||||
|
|
||||||
if (!roomId) {
|
|
||||||
return reply.code(404).send({ error: 'Room ID required' });
|
|
||||||
}
|
|
||||||
|
|
||||||
const room = roomService.getRoom(roomId);
|
|
||||||
if (!room || room.exposed !== true) {
|
|
||||||
return reply.code(404).send({ error: 'Room not found' });
|
|
||||||
}
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const wsMatch = req.url.match(/^\/ws\/room\/([a-f0-9]+)/);
|
|
||||||
if (wsMatch) {
|
|
||||||
const roomId = wsMatch[1];
|
|
||||||
const room = roomService.getRoom(roomId);
|
|
||||||
|
|
||||||
if (!room || room.exposed !== true) {
|
|
||||||
return reply.code(404).send({ error: 'Room not found' });
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const apiMatch = req.url.match(/^\/api\/rooms\/([a-f0-9]+)/);
|
|
||||||
if (apiMatch) {
|
|
||||||
const roomId = apiMatch[1];
|
|
||||||
const room = roomService.getRoom(roomId);
|
|
||||||
|
|
||||||
if (!room || room.exposed !== true) {
|
|
||||||
return reply.code(404).send({ error: 'Room not found' });
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const allowedEndpoints = [
|
|
||||||
'/api/watch/stream',
|
|
||||||
'/api/proxy',
|
|
||||||
'/api/extensions',
|
|
||||||
'/api/search'
|
|
||||||
];
|
|
||||||
|
|
||||||
for (const endpoint of allowedEndpoints) {
|
|
||||||
if (req.url.startsWith(endpoint)) {
|
|
||||||
console.log('[Tunnel] ✓ Allowing utility endpoint:', endpoint);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return reply.code(404).send({ error: 'Not found' });
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.register(require("@fastify/static"), {
|
|
||||||
root: path.join(__dirname, "public"),
|
|
||||||
prefix: "/public/",
|
|
||||||
decorateReply: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.register(require("@fastify/static"), {
|
|
||||||
root: path.join(__dirname, "views"),
|
|
||||||
prefix: "/views/",
|
|
||||||
decorateReply: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.register(require("@fastify/static"), {
|
|
||||||
root: path.join(__dirname, "src", "scripts"),
|
|
||||||
prefix: "/src/scripts/",
|
|
||||||
decorateReply: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.register(viewsRoutes);
|
|
||||||
fastify.register(animeRoutes, { prefix: "/api" });
|
|
||||||
fastify.register(booksRoutes, { prefix: "/api" });
|
|
||||||
fastify.register(proxyRoutes, { prefix: "/api" });
|
|
||||||
fastify.register(extensionsRoutes, { prefix: "/api" });
|
|
||||||
fastify.register(galleryRoutes, { prefix: "/api" });
|
|
||||||
fastify.register(userRoutes, { prefix: "/api" });
|
|
||||||
fastify.register(anilistRoute, { prefix: "/api" });
|
|
||||||
fastify.register(listRoutes, { prefix: "/api" });
|
|
||||||
fastify.register(localRoutes, { prefix: "/api" });
|
|
||||||
fastify.register(configRoutes, { prefix: "/api" });
|
|
||||||
fastify.register(roomRoutes, { prefix: "/api" });
|
|
||||||
|
|
||||||
const sleep = ms => new Promise(r => setTimeout(r, ms));
|
|
||||||
|
|
||||||
const start = async () => {
|
|
||||||
try {
|
|
||||||
await fastify.register(require('@fastify/websocket'));
|
|
||||||
ensureConfigFile()
|
|
||||||
initDatabase("anilist");
|
|
||||||
initDatabase("favorites");
|
|
||||||
initDatabase("cache");
|
|
||||||
initDatabase("userdata");
|
|
||||||
initDatabase("local_library");
|
|
||||||
setupRoomWebSocket(fastify);
|
|
||||||
|
|
||||||
const refreshAll = async () => {
|
|
||||||
await refreshTrendingAnime();
|
|
||||||
await sleep(300);
|
|
||||||
await refreshTopAiringAnime();
|
|
||||||
await sleep(300);
|
|
||||||
await refreshTrendingBooks();
|
|
||||||
await sleep(300);
|
|
||||||
await refreshPopularBooks();
|
|
||||||
};
|
|
||||||
|
|
||||||
const job = cron.schedule("*/30 * * * *", async () => {
|
|
||||||
try {
|
|
||||||
await refreshAll();
|
|
||||||
console.log("cache refreshed");
|
|
||||||
} catch (e) {
|
|
||||||
console.error("refresh failed", e);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
await loadExtensions();
|
|
||||||
await initHeadless();
|
|
||||||
|
|
||||||
await fastify.listen({ port: 54322, host: "0.0.0.0" });
|
|
||||||
refreshAll().catch(e =>
|
|
||||||
console.error("initial refresh failed", e)
|
|
||||||
);
|
|
||||||
console.log(`Server running at http://localhost:54322`);
|
|
||||||
|
|
||||||
const shutdown = async () => {
|
|
||||||
job.stop();
|
|
||||||
await fastify.close();
|
|
||||||
process.exit(0);
|
|
||||||
};
|
|
||||||
|
|
||||||
process.on("SIGINT", shutdown);
|
|
||||||
process.on("SIGTERM", shutdown);
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
fastify.log.error(err);
|
|
||||||
process.exit(1);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
start();
|
|
||||||
@@ -1,564 +0,0 @@
|
|||||||
import { queryOne } from '../../shared/database';
|
|
||||||
|
|
||||||
const USER_DB = 'userdata';
|
|
||||||
|
|
||||||
// Configuración de reintentos
|
|
||||||
const RETRY_CONFIG = {
|
|
||||||
maxRetries: 3,
|
|
||||||
initialDelay: 1000,
|
|
||||||
maxDelay: 5000,
|
|
||||||
backoffMultiplier: 2
|
|
||||||
};
|
|
||||||
|
|
||||||
// Helper para hacer requests con reintentos y manejo de errores
|
|
||||||
async function fetchWithRetry(
|
|
||||||
url: string,
|
|
||||||
options: RequestInit,
|
|
||||||
retries = RETRY_CONFIG.maxRetries
|
|
||||||
): Promise<Response> {
|
|
||||||
let lastError: Error | null = null;
|
|
||||||
let delay = RETRY_CONFIG.initialDelay;
|
|
||||||
|
|
||||||
for (let attempt = 0; attempt <= retries; attempt++) {
|
|
||||||
try {
|
|
||||||
const controller = new AbortController();
|
|
||||||
const timeoutId = setTimeout(() => controller.abort(), 10000); // 10s timeout
|
|
||||||
|
|
||||||
const response = await fetch(url, {
|
|
||||||
...options,
|
|
||||||
signal: controller.signal
|
|
||||||
});
|
|
||||||
|
|
||||||
clearTimeout(timeoutId);
|
|
||||||
|
|
||||||
// Si es rate limit (429), esperamos más tiempo
|
|
||||||
if (response.status === 429) {
|
|
||||||
const retryAfter = response.headers.get('Retry-After');
|
|
||||||
const waitTime = retryAfter ? parseInt(retryAfter) * 1000 : delay;
|
|
||||||
|
|
||||||
if (attempt < retries) {
|
|
||||||
console.warn(`Rate limited. Esperando ${waitTime}ms antes de reintentar...`);
|
|
||||||
await new Promise(resolve => setTimeout(resolve, waitTime));
|
|
||||||
delay = Math.min(delay * RETRY_CONFIG.backoffMultiplier, RETRY_CONFIG.maxDelay);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Si es un error de servidor (5xx), reintentamos
|
|
||||||
if (response.status >= 500 && attempt < retries) {
|
|
||||||
console.warn(`Error del servidor (${response.status}). Reintentando en ${delay}ms...`);
|
|
||||||
await new Promise(resolve => setTimeout(resolve, delay));
|
|
||||||
delay = Math.min(delay * RETRY_CONFIG.backoffMultiplier, RETRY_CONFIG.maxDelay);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
return response;
|
|
||||||
} catch (error) {
|
|
||||||
lastError = error as Error;
|
|
||||||
|
|
||||||
if (attempt < retries && (
|
|
||||||
error instanceof Error && (
|
|
||||||
error.name === 'AbortError' ||
|
|
||||||
error.message.includes('fetch') ||
|
|
||||||
error.message.includes('network')
|
|
||||||
)
|
|
||||||
)) {
|
|
||||||
console.warn(`Error de conexión (intento ${attempt + 1}/${retries + 1}). Reintentando en ${delay}ms...`);
|
|
||||||
await new Promise(resolve => setTimeout(resolve, delay));
|
|
||||||
delay = Math.min(delay * RETRY_CONFIG.backoffMultiplier, RETRY_CONFIG.maxDelay);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
throw lastError || new Error('Request failed after all retries');
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getUserAniList(appUserId: number) {
|
|
||||||
try {
|
|
||||||
const sql = `
|
|
||||||
SELECT access_token, anilist_user_id
|
|
||||||
FROM UserIntegration
|
|
||||||
WHERE user_id = ? AND platform = 'AniList';
|
|
||||||
`;
|
|
||||||
|
|
||||||
const integration = await queryOne(sql, [appUserId], USER_DB) as any;
|
|
||||||
if (!integration) return [];
|
|
||||||
|
|
||||||
const { access_token, anilist_user_id } = integration;
|
|
||||||
if (!access_token || !anilist_user_id) return [];
|
|
||||||
|
|
||||||
const query = `
|
|
||||||
query ($userId: Int) {
|
|
||||||
anime: MediaListCollection(userId: $userId, type: ANIME) {
|
|
||||||
lists {
|
|
||||||
entries {
|
|
||||||
media {
|
|
||||||
id
|
|
||||||
title { romaji english userPreferred }
|
|
||||||
coverImage { extraLarge }
|
|
||||||
episodes
|
|
||||||
nextAiringEpisode { episode }
|
|
||||||
}
|
|
||||||
status
|
|
||||||
progress
|
|
||||||
score
|
|
||||||
repeat
|
|
||||||
notes
|
|
||||||
private
|
|
||||||
startedAt { year month day }
|
|
||||||
completedAt { year month day }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
manga: MediaListCollection(userId: $userId, type: MANGA) {
|
|
||||||
lists {
|
|
||||||
entries {
|
|
||||||
media {
|
|
||||||
id
|
|
||||||
type
|
|
||||||
format
|
|
||||||
title { romaji english userPreferred }
|
|
||||||
coverImage { extraLarge }
|
|
||||||
chapters
|
|
||||||
volumes
|
|
||||||
}
|
|
||||||
status
|
|
||||||
progress
|
|
||||||
score
|
|
||||||
repeat
|
|
||||||
notes
|
|
||||||
private
|
|
||||||
startedAt { year month day }
|
|
||||||
completedAt { year month day }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const res = await fetchWithRetry('https://graphql.anilist.co', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${access_token}`,
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
query,
|
|
||||||
variables: { userId: anilist_user_id }
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!res.ok) throw new Error(`AniList API error: ${res.status}`);
|
|
||||||
|
|
||||||
const json = await res.json();
|
|
||||||
if (json?.errors?.length) throw new Error(json.errors[0].message);
|
|
||||||
|
|
||||||
const fromFuzzy = (d: any) => {
|
|
||||||
if (!d?.year) return null;
|
|
||||||
const m = String(d.month || 1).padStart(2, '0');
|
|
||||||
const day = String(d.day || 1).padStart(2, '0');
|
|
||||||
return `${d.year}-${m}-${day}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
const normalize = (lists: any[], type: 'ANIME' | 'MANGA') => {
|
|
||||||
const result: any[] = [];
|
|
||||||
|
|
||||||
for (const list of lists || []) {
|
|
||||||
for (const entry of list.entries || []) {
|
|
||||||
const media = entry.media;
|
|
||||||
|
|
||||||
const totalEpisodes =
|
|
||||||
media?.episodes ||
|
|
||||||
(media?.nextAiringEpisode?.episode
|
|
||||||
? media.nextAiringEpisode.episode - 1
|
|
||||||
: 0);
|
|
||||||
|
|
||||||
const totalChapters =
|
|
||||||
media?.chapters ||
|
|
||||||
(media?.volumes ? media.volumes * 10 : 0);
|
|
||||||
|
|
||||||
const resolvedType =
|
|
||||||
type === 'MANGA' &&
|
|
||||||
(media?.format === 'LIGHT_NOVEL' || media?.format === 'NOVEL')
|
|
||||||
? 'NOVEL'
|
|
||||||
: type;
|
|
||||||
|
|
||||||
|
|
||||||
result.push({
|
|
||||||
user_id: appUserId,
|
|
||||||
|
|
||||||
entry_id: media.id,
|
|
||||||
source: 'anilist',
|
|
||||||
|
|
||||||
// ✅ AHORA TU FRONT RECIBE NOVEL
|
|
||||||
entry_type: resolvedType,
|
|
||||||
|
|
||||||
status: entry.status,
|
|
||||||
progress: entry.progress || 0,
|
|
||||||
score: entry.score || null,
|
|
||||||
start_date: fromFuzzy(entry.startedAt),
|
|
||||||
end_date: fromFuzzy(entry.completedAt),
|
|
||||||
repeat_count: entry.repeat || 0,
|
|
||||||
notes: entry.notes || null,
|
|
||||||
is_private: entry.private ? 1 : 0,
|
|
||||||
|
|
||||||
title: media?.title?.userPreferred
|
|
||||||
|| media?.title?.english
|
|
||||||
|| media?.title?.romaji
|
|
||||||
|| 'Unknown Title',
|
|
||||||
|
|
||||||
poster: media?.coverImage?.extraLarge
|
|
||||||
|| 'https://placehold.co/400x600?text=No+Cover',
|
|
||||||
|
|
||||||
total_episodes: resolvedType === 'ANIME' ? totalEpisodes : undefined,
|
|
||||||
total_chapters: resolvedType !== 'ANIME' ? totalChapters : undefined,
|
|
||||||
|
|
||||||
updated_at: new Date().toISOString()
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
|
|
||||||
return [
|
|
||||||
...normalize(json?.data?.anime?.lists, 'ANIME'),
|
|
||||||
...normalize(json?.data?.manga?.lists, 'MANGA')
|
|
||||||
];
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching AniList data:', error);
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function updateAniListEntry(token: string, params: {
|
|
||||||
mediaId: number | string;
|
|
||||||
status?: string | null;
|
|
||||||
progress?: number | null;
|
|
||||||
score?: number | null;
|
|
||||||
start_date?: string | null; // YYYY-MM-DD
|
|
||||||
end_date?: string | null; // YYYY-MM-DD
|
|
||||||
repeat_count?: number | null;
|
|
||||||
notes?: string | null;
|
|
||||||
is_private?: boolean | number | null;
|
|
||||||
}) {
|
|
||||||
try {
|
|
||||||
if (!token) throw new Error('AniList token is required');
|
|
||||||
|
|
||||||
const mutation = `
|
|
||||||
mutation (
|
|
||||||
$mediaId: Int,
|
|
||||||
$status: MediaListStatus,
|
|
||||||
$progress: Int,
|
|
||||||
$score: Float,
|
|
||||||
$startedAt: FuzzyDateInput,
|
|
||||||
$completedAt: FuzzyDateInput,
|
|
||||||
$repeat: Int,
|
|
||||||
$notes: String,
|
|
||||||
$private: Boolean
|
|
||||||
) {
|
|
||||||
SaveMediaListEntry (
|
|
||||||
mediaId: $mediaId,
|
|
||||||
status: $status,
|
|
||||||
progress: $progress,
|
|
||||||
score: $score,
|
|
||||||
startedAt: $startedAt,
|
|
||||||
completedAt: $completedAt,
|
|
||||||
repeat: $repeat,
|
|
||||||
notes: $notes,
|
|
||||||
private: $private
|
|
||||||
) {
|
|
||||||
id
|
|
||||||
status
|
|
||||||
progress
|
|
||||||
score
|
|
||||||
startedAt { year month day }
|
|
||||||
completedAt { year month day }
|
|
||||||
repeat
|
|
||||||
notes
|
|
||||||
private
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const toFuzzyDate = (dateStr?: string | null) => {
|
|
||||||
if (!dateStr) return null;
|
|
||||||
const [year, month, day] = dateStr.split('-').map(Number);
|
|
||||||
return { year, month, day };
|
|
||||||
};
|
|
||||||
|
|
||||||
const variables: any = {
|
|
||||||
mediaId: Number(params.mediaId),
|
|
||||||
status: params.status ?? undefined,
|
|
||||||
progress: params.progress ?? undefined,
|
|
||||||
score: params.score ?? undefined,
|
|
||||||
startedAt: toFuzzyDate(params.start_date),
|
|
||||||
completedAt: toFuzzyDate(params.end_date),
|
|
||||||
repeat: params.repeat_count ?? undefined,
|
|
||||||
notes: params.notes ?? undefined,
|
|
||||||
private: typeof params.is_private === 'boolean'
|
|
||||||
? params.is_private
|
|
||||||
: params.is_private === 1
|
|
||||||
};
|
|
||||||
|
|
||||||
const res = await fetchWithRetry('https://graphql.anilist.co', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${token}`,
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ query: mutation, variables }),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!res.ok) {
|
|
||||||
const errorText = await res.text();
|
|
||||||
throw new Error(`AniList update failed: ${res.status} - ${errorText}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const json = await res.json();
|
|
||||||
|
|
||||||
if (json?.errors?.length) {
|
|
||||||
throw new Error(`AniList GraphQL error: ${json.errors[0].message}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
return json.data?.SaveMediaListEntry || null;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error updating AniList entry:', error);
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function deleteAniListEntry(token: string, mediaId: number) {
|
|
||||||
if (!token) throw new Error("AniList token required");
|
|
||||||
|
|
||||||
try {
|
|
||||||
// 1️⃣ OBTENER VIEWER
|
|
||||||
const viewerQuery = `query { Viewer { id name } }`;
|
|
||||||
|
|
||||||
const vRes = await fetchWithRetry('https://graphql.anilist.co', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${token}`,
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ query: viewerQuery }),
|
|
||||||
});
|
|
||||||
|
|
||||||
const vJson = await vRes.json();
|
|
||||||
const userId = vJson?.data?.Viewer?.id;
|
|
||||||
|
|
||||||
if (!userId) throw new Error("Invalid AniList token");
|
|
||||||
|
|
||||||
// 2️⃣ DETECTAR TIPO REAL DEL MEDIA
|
|
||||||
const mediaQuery = `
|
|
||||||
query ($id: Int) {
|
|
||||||
Media(id: $id) {
|
|
||||||
id
|
|
||||||
type
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const mTypeRes = await fetchWithRetry('https://graphql.anilist.co', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${token}`,
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
query: mediaQuery,
|
|
||||||
variables: { id: mediaId }
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
const mTypeJson = await mTypeRes.json();
|
|
||||||
const mediaType = mTypeJson?.data?.Media?.type;
|
|
||||||
|
|
||||||
if (!mediaType) {
|
|
||||||
throw new Error("Media not found in AniList");
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3️⃣ BUSCAR ENTRY CON TIPO REAL
|
|
||||||
const listQuery = `
|
|
||||||
query ($userId: Int, $mediaId: Int, $type: MediaType) {
|
|
||||||
MediaList(userId: $userId, mediaId: $mediaId, type: $type) {
|
|
||||||
id
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const qRes = await fetchWithRetry('https://graphql.anilist.co', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${token}`,
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
query: listQuery,
|
|
||||||
variables: {
|
|
||||||
userId,
|
|
||||||
mediaId,
|
|
||||||
type: mediaType
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
const qJson = await qRes.json();
|
|
||||||
const listEntryId = qJson?.data?.MediaList?.id;
|
|
||||||
|
|
||||||
if (!listEntryId) {
|
|
||||||
throw new Error("Entry not found in user's AniList");
|
|
||||||
}
|
|
||||||
|
|
||||||
// 4️⃣ BORRAR
|
|
||||||
const mutation = `
|
|
||||||
mutation ($id: Int) {
|
|
||||||
DeleteMediaListEntry(id: $id) {
|
|
||||||
deleted
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const delRes = await fetchWithRetry('https://graphql.anilist.co', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${token}`,
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
query: mutation,
|
|
||||||
variables: { id: listEntryId }
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
const delJson = await delRes.json();
|
|
||||||
|
|
||||||
if (delJson?.errors?.length) {
|
|
||||||
throw new Error(delJson.errors[0].message);
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error("AniList DELETE failed:", err);
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export async function getSingleAniListEntry(
|
|
||||||
token: string,
|
|
||||||
mediaId: number,
|
|
||||||
type: 'ANIME' | 'MANGA'
|
|
||||||
) {
|
|
||||||
try {
|
|
||||||
if (!token) {
|
|
||||||
throw new Error('AniList token is required');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 1️⃣ Obtener userId desde el token
|
|
||||||
const viewerRes = await fetchWithRetry('https://graphql.anilist.co', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${token}`,
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
query: `query { Viewer { id } }`
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
const viewerJson = await viewerRes.json();
|
|
||||||
const userId = viewerJson?.data?.Viewer?.id;
|
|
||||||
|
|
||||||
if (!userId) {
|
|
||||||
throw new Error('Failed to get AniList userId');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 2️⃣ Query correcta con userId
|
|
||||||
const query = `
|
|
||||||
query ($mediaId: Int, $type: MediaType, $userId: Int) {
|
|
||||||
MediaList(mediaId: $mediaId, type: $type, userId: $userId) {
|
|
||||||
id
|
|
||||||
status
|
|
||||||
progress
|
|
||||||
score
|
|
||||||
repeat
|
|
||||||
private
|
|
||||||
notes
|
|
||||||
startedAt { year month day }
|
|
||||||
completedAt { year month day }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const res = await fetchWithRetry('https://graphql.anilist.co', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${token}`,
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
query,
|
|
||||||
variables: { mediaId, type, userId }
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
if (res.status === 404) {
|
|
||||||
return null; // ✅ No existe entry todavía → es totalmente válido
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!res.ok) {
|
|
||||||
const errorText = await res.text();
|
|
||||||
throw new Error(`AniList fetch failed: ${res.status} - ${errorText}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const json = await res.json();
|
|
||||||
|
|
||||||
if (json?.errors?.length) {
|
|
||||||
if (json.errors[0].status === 404) return null;
|
|
||||||
throw new Error(`GraphQL error: ${json.errors[0].message}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const entry = json?.data?.MediaList;
|
|
||||||
if (!entry) return null;
|
|
||||||
|
|
||||||
return {
|
|
||||||
entry_id: mediaId,
|
|
||||||
source: 'anilist',
|
|
||||||
entry_type: type,
|
|
||||||
status: entry.status,
|
|
||||||
progress: entry.progress || 0,
|
|
||||||
score: entry.score ?? null,
|
|
||||||
|
|
||||||
start_date: entry.startedAt?.year
|
|
||||||
? `${entry.startedAt.year}-${String(entry.startedAt.month).padStart(2, '0')}-${String(entry.startedAt.day).padStart(2, '0')}`
|
|
||||||
: null,
|
|
||||||
|
|
||||||
end_date: entry.completedAt?.year
|
|
||||||
? `${entry.completedAt.year}-${String(entry.completedAt.month).padStart(2, '0')}-${String(entry.completedAt.day).padStart(2, '0')}`
|
|
||||||
: null,
|
|
||||||
|
|
||||||
repeat_count: entry.repeat || 0,
|
|
||||||
notes: entry.notes || null,
|
|
||||||
is_private: entry.private ? 1 : 0,
|
|
||||||
};
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching single AniList entry:', error);
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,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;
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user