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

Compare commits

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

25 Commits
v2.0.0-rc. ... 6222e7736f

Author SHA1 Message Date
lenafx
6222e7736f added missing package (again xd) 2025-12-27 22:07:26 +01:00
lenafx
03d8337d89 added missing package 2025-12-27 22:07:26 +01:00
lenafx
d49f739565 added local manga, todo: novels 2025-12-27 22:07:26 +01:00
lenafx
295cab93f3 enhanced list modal and fixes 2025-12-27 22:07:26 +01:00
lenafx
4bca41f6a2 made navbar ssr 2025-12-27 22:07:26 +01:00
lenafx
bc74aa8116 fixed a bug & replicated all changes to docker version 2025-12-27 22:07:26 +01:00
lenafx
cc0b0a891e wip settings section 2025-12-27 22:07:26 +01:00
lenafx
76391f74d2 created config api 2025-12-27 22:07:26 +01:00
lenafx
487e24a20a added page 404 2025-12-27 22:07:26 +01:00
lenafx
25ea30f086 wip implementation of local library on anime 2025-12-27 22:07:26 +01:00
lenafx
6075dcf149 implemented api for local library & global config 2025-12-27 22:07:26 +01:00
itsskaiya
dbce12b708 Updated files to be exported into the exe 2025-12-20 14:52:56 -05:00
lenafx
9943c5d010 added chapters on player using aniskip api 2025-12-20 19:56:15 +01:00
lenafx
cbacf2ea07 removed electron stuff from docker ver 2025-12-20 00:16:01 +01:00
lenafx
90231f6608 added updateall btn to marketplace 2025-12-20 00:13:10 +01:00
lenafx
a26f03f024 new marketplace page 2025-12-19 23:12:53 +01:00
lenafx
16cf6b3d4f now on my list page, source dropdown only shows anime and book extensions 2025-12-19 20:01:08 +01:00
lenafx
4811c4535a removed electron stuff from docker ver 2025-12-19 19:49:07 +01:00
lenafx
d6a99bfeb4 animes & books page data is fetched auto now 2025-12-19 19:23:29 +01:00
itsskaiya
b8f560141c Updated version in updateNotifier for server & docker version 2025-12-19 12:02:41 -05:00
lenafx
2cf475931c lazy loading of chapters on book page 2025-12-18 17:00:50 +01:00
lenafx
41dddef354 added splash loading screen 2025-12-18 17:00:50 +01:00
lenafx
d54b0bcdef if user has pass ask for it before deleting it 2025-12-18 17:00:50 +01:00
lenafx
c7ed97a452 fixed discord rpc on anime 2025-12-18 17:00:50 +01:00
itsskaiya
1ebac7ee15 Updated version in updateNotifier for server version 2025-12-18 03:24:50 -05:00
116 changed files with 7120 additions and 4363 deletions
Expand all files Collapse all files

229
desktop/loading.html Normal file
View File

@@ -0,0 +1,229 @@
<!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>

39
desktop/main.js
View File

@@ -3,6 +3,9 @@ const { fork } = require('child_process');
const path = require('path'); const path = require('path');
const log = require('electron-log'); 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.transports.file.level = 'info';
log.format = '[{y}-{m}-{d} {h}:{i}:{s}.{ms}] [{level}] {text}'; log.format = '[{y}-{m}-{d} {h}:{i}:{s}.{ms}] [{level}] {text}';
@@ -61,6 +64,23 @@ function startBackend() {
}); });
} }
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() { function createWindow() {
win = new BrowserWindow({ win = new BrowserWindow({
width: 1200, width: 1200,
@@ -75,6 +95,7 @@ function createWindow() {
}); });
win.setMenu(null); win.setMenu(null);
win.maximize();
win.loadURL('http://localhost:54322'); win.loadURL('http://localhost:54322');
@@ -98,15 +119,17 @@ process.on('uncaughtException', (err) => {
}); });
app.whenReady().then(async () => { app.whenReady().then(async () => {
log.info('--- Application Started ---');
console.log("Logs location:", log.transports.file.getFile().path);
startBackend(); startBackend();
await waitForServer(54322); createSplash();
createWindow(); try {
await waitForServer(54322);
app.on('activate', () => { createWindow();
if (BrowserWindow.getAllWindows().length === 0) createWindow(); splash.close();
}); } catch (e) {
splash.close();
log.error(e);
app.quit();
}
}); });
app.on('window-all-closed', () => { app.on('window-all-closed', () => {

178
desktop/package-lock.json generated
View File

@@ -10,19 +10,23 @@
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@fastify/static": "^8.3.0", "@fastify/static": "^8.3.0",
"@ryuziii/discord-rpc": "^1.0.1-rc.1", "@xhayper/discord-rpc": "^1.3.0",
"adm-zip": "^0.5.16",
"bcryptjs": "^3.0.3", "bcryptjs": "^3.0.3",
"bindings": "^1.5.0", "bindings": "^1.5.0",
"cheerio": "^1.1.2", "cheerio": "^1.1.2",
"dotenv": "^17.2.3", "dotenv": "^17.2.3",
"electron-log": "^5.4.3", "electron-log": "^5.4.3",
"fastify": "^5.6.2", "fastify": "^5.6.2",
"js-yaml": "^4.1.1",
"jsonwebtoken": "^9.0.3", "jsonwebtoken": "^9.0.3",
"node-addon-api": "^8.5.0", "node-addon-api": "^8.5.0",
"node-cron": "^4.2.1",
"playwright-chromium": "^1.57.0", "playwright-chromium": "^1.57.0",
"sqlite3": "^5.1.7" "sqlite3": "^5.1.7"
}, },
"devDependencies": { "devDependencies": {
"@types/adm-zip": "^0.5.7",
"@types/bcrypt": "^6.0.0", "@types/bcrypt": "^6.0.0",
"@types/jsonwebtoken": "^9.0.10", "@types/jsonwebtoken": "^9.0.10",
"@types/node": "^24.0.0", "@types/node": "^24.0.0",
@@ -98,6 +102,65 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/@discordjs/collection": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/@discordjs/collection/-/collection-2.1.1.tgz",
"integrity": "sha512-LiSusze9Tc7qF03sLCujF5iZp7K+vRNEDBZ86FT9aQAv3vxMLihUvKvpsCWiQ2DJq1tVckopKm1rxomgNUc9hg==",
"license": "Apache-2.0",
"engines": {
"node": ">=18"
},
"funding": {
"url": "https://github.com/discordjs/discord.js?sponsor"
}
},
"node_modules/@discordjs/rest": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/@discordjs/rest/-/rest-2.6.0.tgz",
"integrity": "sha512-RDYrhmpB7mTvmCKcpj+pc5k7POKszS4E2O9TYc+U+Y4iaCP+r910QdO43qmpOja8LRr1RJ0b3U+CqVsnPqzf4w==",
"license": "Apache-2.0",
"dependencies": {
"@discordjs/collection": "^2.1.1",
"@discordjs/util": "^1.1.1",
"@sapphire/async-queue": "^1.5.3",
"@sapphire/snowflake": "^3.5.3",
"@vladfrangu/async_event_emitter": "^2.4.6",
"discord-api-types": "^0.38.16",
"magic-bytes.js": "^1.10.0",
"tslib": "^2.6.3",
"undici": "6.21.3"
},
"engines": {
"node": ">=18"
},
"funding": {
"url": "https://github.com/discordjs/discord.js?sponsor"
}
},
"node_modules/@discordjs/rest/node_modules/undici": {
"version": "6.21.3",
"resolved": "https://registry.npmjs.org/undici/-/undici-6.21.3.tgz",
"integrity": "sha512-gBLkYIlEnSp8pFbT64yFgGE6UIB9tAkhukC23PmMDCe5Nd+cRqKxSjw5y54MK2AZMgZfJWMaNE4nYUHgi1XEOw==",
"license": "MIT",
"engines": {
"node": ">=18.17"
}
},
"node_modules/@discordjs/util": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@discordjs/util/-/util-1.2.0.tgz",
"integrity": "sha512-3LKP7F2+atl9vJFhaBjn4nOaSWahZ/yWjOvA4e5pnXkt2qyXRCHLxoBQy81GFtLGCq7K9lPm9R517M1U+/90Qg==",
"license": "Apache-2.0",
"dependencies": {
"discord-api-types": "^0.38.33"
},
"engines": {
"node": ">=18"
},
"funding": {
"url": "https://github.com/discordjs/discord.js?sponsor"
}
},
"node_modules/@electron/asar": { "node_modules/@electron/asar": {
"version": "3.2.18", "version": "3.2.18",
"resolved": "https://registry.npmjs.org/@electron/asar/-/asar-3.2.18.tgz", "resolved": "https://registry.npmjs.org/@electron/asar/-/asar-3.2.18.tgz",
@@ -1364,14 +1427,24 @@
"node": ">=14" "node": ">=14"
} }
}, },
"node_modules/@ryuziii/discord-rpc": { "node_modules/@sapphire/async-queue": {
"version": "1.0.1-rc.1", "version": "1.5.5",
"resolved": "https://registry.npmjs.org/@ryuziii/discord-rpc/-/discord-rpc-1.0.1-rc.1.tgz", "resolved": "https://registry.npmjs.org/@sapphire/async-queue/-/async-queue-1.5.5.tgz",
"integrity": "sha512-q9YgU8Rj9To1LWzo4u8cXOHUorEkB5KZ5cdW80KoYtAUx+nQy7wYCEFiNh8kcmqFqQ8m3Fsx1IXx3UpVymkaSw==", "integrity": "sha512-cvGzxbba6sav2zZkH8GPf2oGk9yYoD5qrNWdu9fRehifgnFZJMV+nuy2nON2roRO4yQQ+v7MK/Pktl/HgfsUXg==",
"license": "ISC", "license": "MIT",
"dependencies": { "engines": {
"@types/ws": "^8.18.1", "node": ">=v14.0.0",
"ws": "^8.18.3" "npm": ">=7.0.0"
}
},
"node_modules/@sapphire/snowflake": {
"version": "3.5.5",
"resolved": "https://registry.npmjs.org/@sapphire/snowflake/-/snowflake-3.5.5.tgz",
"integrity": "sha512-xzvBr1Q1c4lCe7i6sRnrofxeO1QTP/LKQ6A6qy0iB4x5yfiSfARMEQEghojzTNALDTcv8En04qYNIco9/K9eZQ==",
"license": "MIT",
"engines": {
"node": ">=v14.0.0",
"npm": ">=7.0.0"
} }
}, },
"node_modules/@sindresorhus/is": { "node_modules/@sindresorhus/is": {
@@ -1438,6 +1511,16 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/@types/adm-zip": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/@types/adm-zip/-/adm-zip-0.5.7.tgz",
"integrity": "sha512-DNEs/QvmyRLurdQPChqq0Md4zGvPwHerAJYWk9l2jCbD1VPpnzRJorOdiq4zsw09NFbYnhfsoEhWtxIzXpn2yw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/node": "*"
}
},
"node_modules/@types/bcrypt": { "node_modules/@types/bcrypt": {
"version": "6.0.0", "version": "6.0.0",
"resolved": "https://registry.npmjs.org/@types/bcrypt/-/bcrypt-6.0.0.tgz", "resolved": "https://registry.npmjs.org/@types/bcrypt/-/bcrypt-6.0.0.tgz",
@@ -1520,6 +1603,7 @@
"version": "24.10.1", "version": "24.10.1",
"resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz",
"integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==", "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"undici-types": "~7.16.0" "undici-types": "~7.16.0"
@@ -1555,15 +1639,6 @@
"license": "MIT", "license": "MIT",
"optional": true "optional": true
}, },
"node_modules/@types/ws": {
"version": "8.18.1",
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
"integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
"license": "MIT",
"dependencies": {
"@types/node": "*"
}
},
"node_modules/@types/yauzl": { "node_modules/@types/yauzl": {
"version": "2.10.3", "version": "2.10.3",
"resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz", "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
@@ -1575,6 +1650,31 @@
"@types/node": "*" "@types/node": "*"
} }
}, },
"node_modules/@vladfrangu/async_event_emitter": {
"version": "2.4.7",
"resolved": "https://registry.npmjs.org/@vladfrangu/async_event_emitter/-/async_event_emitter-2.4.7.tgz",
"integrity": "sha512-Xfe6rpCTxSxfbswi/W/Pz7zp1WWSNn4A0eW4mLkQUewCrXXtMj31lCg+iQyTkh/CkusZSq9eDflu7tjEDXUY6g==",
"license": "MIT",
"engines": {
"node": ">=v14.0.0",
"npm": ">=7.0.0"
}
},
"node_modules/@xhayper/discord-rpc": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@xhayper/discord-rpc/-/discord-rpc-1.3.0.tgz",
"integrity": "sha512-0NmUTiODl7u3UEjmO6y0Syp3dmgVLAt2EHrH4QKTQcXRwtF8Wl7Eipdn/GSSZ8HkDwxQFvcDGJMxT9VWB0pH8g==",
"license": "ISC",
"dependencies": {
"@discordjs/rest": "^2.5.1",
"@vladfrangu/async_event_emitter": "^2.4.6",
"discord-api-types": "^0.38.16",
"ws": "^8.18.3"
},
"engines": {
"node": ">=18.20.7"
}
},
"node_modules/@xmldom/xmldom": { "node_modules/@xmldom/xmldom": {
"version": "0.8.11", "version": "0.8.11",
"resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.11.tgz", "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.11.tgz",
@@ -1634,6 +1734,15 @@
"node": ">=0.4.0" "node": ">=0.4.0"
} }
}, },
"node_modules/adm-zip": {
"version": "0.5.16",
"resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.5.16.tgz",
"integrity": "sha512-TGw5yVi4saajsSEgz25grObGHEUaDrniwvA2qwSC060KfqGPdglhvPMA2lPIoxs3PQIItj2iag35fONcQqgUaQ==",
"license": "MIT",
"engines": {
"node": ">=12.0"
}
},
"node_modules/agent-base": { "node_modules/agent-base": {
"version": "7.1.4", "version": "7.1.4",
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
@@ -1868,7 +1977,6 @@
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
"dev": true,
"license": "Python-2.0" "license": "Python-2.0"
}, },
"node_modules/assert-plus": { "node_modules/assert-plus": {
@@ -3051,6 +3159,15 @@
"node": "*" "node": "*"
} }
}, },
"node_modules/discord-api-types": {
"version": "0.38.37",
"resolved": "https://registry.npmjs.org/discord-api-types/-/discord-api-types-0.38.37.tgz",
"integrity": "sha512-Cv47jzY1jkGkh5sv0bfHYqGgKOWO1peOrGMkDFM4UmaGMOTgOW8QSexhvixa9sVOiz8MnVOBryWYyw/CEVhj7w==",
"license": "MIT",
"workspaces": [
"scripts/actions/documentation"
]
},
"node_modules/dmg-builder": { "node_modules/dmg-builder": {
"version": "26.0.12", "version": "26.0.12",
"resolved": "https://registry.npmjs.org/dmg-builder/-/dmg-builder-26.0.12.tgz", "resolved": "https://registry.npmjs.org/dmg-builder/-/dmg-builder-26.0.12.tgz",
@@ -4729,7 +4846,6 @@
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz", "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
"integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==", "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"argparse": "^2.0.1" "argparse": "^2.0.1"
@@ -4983,6 +5099,12 @@
"node": "20 || >=22" "node": "20 || >=22"
} }
}, },
"node_modules/magic-bytes.js": {
"version": "1.12.1",
"resolved": "https://registry.npmjs.org/magic-bytes.js/-/magic-bytes.js-1.12.1.tgz",
"integrity": "sha512-ThQLOhN86ZkJ7qemtVRGYM+gRgR8GEXNli9H/PMvpnZsE44Xfh3wx9kGJaldg314v85m+bFW6WBMaVHJc/c3zA==",
"license": "MIT"
},
"node_modules/make-error": { "node_modules/make-error": {
"version": "1.3.6", "version": "1.3.6",
"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
@@ -5345,6 +5467,15 @@
"semver": "^7.3.5" "semver": "^7.3.5"
} }
}, },
"node_modules/node-cron": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/node-cron/-/node-cron-4.2.1.tgz",
"integrity": "sha512-lgimEHPE/QDgFlywTd8yTR61ptugX3Qer29efeyWw2rv259HtGBNn1vZVmp8lB9uo9wC0t/AT4iGqXxia+CJFg==",
"license": "ISC",
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/node-gyp": { "node_modules/node-gyp": {
"version": "12.1.0", "version": "12.1.0",
"resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-12.1.0.tgz", "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-12.1.0.tgz",
@@ -7444,6 +7575,12 @@
} }
} }
}, },
"node_modules/tslib": {
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
"license": "0BSD"
},
"node_modules/tunnel-agent": { "node_modules/tunnel-agent": {
"version": "0.6.0", "version": "0.6.0",
"resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz", "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
@@ -7497,6 +7634,7 @@
"version": "7.16.0", "version": "7.16.0",
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
"integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==", "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/unique-filename": { "node_modules/unique-filename": {

9
desktop/package.json
View File

@@ -13,19 +13,23 @@
"type": "commonjs", "type": "commonjs",
"dependencies": { "dependencies": {
"@fastify/static": "^8.3.0", "@fastify/static": "^8.3.0",
"@ryuziii/discord-rpc": "^1.0.1-rc.1", "@xhayper/discord-rpc": "^1.3.0",
"adm-zip": "^0.5.16",
"bcryptjs": "^3.0.3", "bcryptjs": "^3.0.3",
"bindings": "^1.5.0", "bindings": "^1.5.0",
"cheerio": "^1.1.2", "cheerio": "^1.1.2",
"dotenv": "^17.2.3", "dotenv": "^17.2.3",
"electron-log": "^5.4.3", "electron-log": "^5.4.3",
"fastify": "^5.6.2", "fastify": "^5.6.2",
"js-yaml": "^4.1.1",
"jsonwebtoken": "^9.0.3", "jsonwebtoken": "^9.0.3",
"node-addon-api": "^8.5.0", "node-addon-api": "^8.5.0",
"node-cron": "^4.2.1",
"playwright-chromium": "^1.57.0", "playwright-chromium": "^1.57.0",
"sqlite3": "^5.1.7" "sqlite3": "^5.1.7"
}, },
"devDependencies": { "devDependencies": {
"@types/adm-zip": "^0.5.7",
"@types/bcrypt": "^6.0.0", "@types/bcrypt": "^6.0.0",
"@types/jsonwebtoken": "^9.0.10", "@types/jsonwebtoken": "^9.0.10",
"@types/node": "^24.0.0", "@types/node": "^24.0.0",
@@ -46,7 +50,8 @@
"package.json", "package.json",
"views/**/*", "views/**/*",
"src/scripts/**/*", "src/scripts/**/*",
"public/assets/*" "public/assets/*",
"loading.html"
], ],
"extraResources": [ "extraResources": [
{ {

71
desktop/server.js
View File

@@ -4,14 +4,17 @@ const fastify = require("fastify")({
const path = require("path"); const path = require("path");
const jwt = require("jsonwebtoken"); const jwt = require("jsonwebtoken");
const cron = require("node-cron");
const { initHeadless } = require("./electron/shared/headless"); const { initHeadless } = require("./electron/shared/headless");
const { initDatabase } = require("./electron/shared/database"); const { initDatabase } = require("./electron/shared/database");
const { loadExtensions } = require("./electron/shared/extensions"); const { loadExtensions } = require("./electron/shared/extensions");
const { ensureConfigFile } = require("./electron/shared/config");
const { init } = require("./electron/api/rpc/rpc.controller"); 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 dotenv = require("dotenv");
const isPackaged = process.env.IS_PACKAGED === "true"; const isPackaged = process.env.IS_PACKAGED === "true";
const envPath = isPackaged const envPath = isPackaged
? path.join(process.resourcesPath, ".env") ? path.join(process.resourcesPath, ".env")
: path.join(__dirname, ".env"); : path.join(__dirname, ".env");
@@ -27,39 +30,8 @@ const rpcRoutes = require("./electron/api/rpc/rpc.routes");
const userRoutes = require("./electron/api/user/user.routes"); const userRoutes = require("./electron/api/user/user.routes");
const listRoutes = require("./electron/api/list/list.routes"); const listRoutes = require("./electron/api/list/list.routes");
const anilistRoute = require("./electron/api/anilist/anilist"); const anilistRoute = require("./electron/api/anilist/anilist");
const localRoutes = require("./electron/api/local/local.routes");
const fs = require("fs"); const configRoutes = require("./electron/api/config/config.routes");
try {
console.log("--- DEBUGGING PATHS ---");
// 1. Check where we are currently running
console.log("Current Directory:", __dirname);
// 2. Check if 'electron' exists
const electronPath = path.join(__dirname, "electron");
if (fs.existsSync(electronPath)) {
console.log("✅ electron folder found.");
} else {
console.log("❌ electron folder missing!");
}
// 3. Check 'electron/api/rpc' specifically
const rpcPath = path.join(__dirname, "electron", "api", "rpc");
if (fs.existsSync(rpcPath)) {
console.log("✅ electron/api/rpc folder found. Contents:");
// LIST EVERYTHING INSIDE THE RPC FOLDER
console.log(fs.readdirSync(rpcPath));
} else {
console.log(`❌ electron/api/rpc folder NOT found at: ${rpcPath}`);
// Check parent folder to see what IS there
const parent = path.join(__dirname, "electron", "api");
console.log("Contents of electron/api:", fs.readdirSync(parent));
}
console.log("-----------------------");
} catch (e) {
console.log("Debug Error:", e);
}
fastify.addHook("preHandler", async (request) => { fastify.addHook("preHandler", async (request) => {
const auth = request.headers.authorization; const auth = request.headers.authorization;
@@ -101,21 +73,46 @@ fastify.register(rpcRoutes, { prefix: "/api" });
fastify.register(userRoutes, { prefix: "/api" }); fastify.register(userRoutes, { prefix: "/api" });
fastify.register(anilistRoute, { prefix: "/api" }); fastify.register(anilistRoute, { prefix: "/api" });
fastify.register(listRoutes, { prefix: "/api" }); fastify.register(listRoutes, { prefix: "/api" });
fastify.register(localRoutes, { prefix: "/api" });
fastify.register(configRoutes, { prefix: "/api" });
const sleep = ms => new Promise(r => setTimeout(r, ms));
const start = async () => { const start = async () => {
try { try {
ensureConfigFile()
initDatabase("anilist"); initDatabase("anilist");
initDatabase("favorites"); initDatabase("favorites");
initDatabase("cache"); initDatabase("cache");
initDatabase("userdata"); initDatabase("userdata");
initDatabase("local_library");
init(); init();
const refreshAll = async () => {
await refreshTrendingAnime();
await sleep(300);
await refreshTopAiringAnime();
await sleep(300);
await refreshTrendingBooks();
await sleep(300);
await refreshPopularBooks();
};
cron.schedule("*/30 * * * *", async () => {
try {
await refreshAll();
console.log("cache refreshed");
} catch (e) {
console.error("refresh failed", e);
}
});
await loadExtensions(); await loadExtensions();
await initHeadless();
await refreshAll();
await fastify.listen({ port: 54322, host: "0.0.0.0" }); await fastify.listen({ port: 54322, host: "0.0.0.0" });
console.log(`Server running at http://localhost:54322`); console.log(`Server running at http://localhost:54322`);
await initHeadless();
} catch (err) { } catch (err) {
fastify.log.error(err); fastify.log.error(err);
process.exit(1); process.exit(1);

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

@@ -3,7 +3,6 @@ import { queryAll, queryOne } from '../../shared/database';
import {Anime, Episode, Extension, StreamData} from '../types'; import {Anime, Episode, Extension, StreamData} from '../types';
const CACHE_TTL_MS = 24 * 60 * 60 * 1000; const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
const TTL = 60 * 60 * 6;
const ANILIST_URL = "https://graphql.anilist.co"; const ANILIST_URL = "https://graphql.anilist.co";
@@ -79,6 +78,54 @@ const MEDIA_FIELDS = `
} }
`; `;
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) { async function fetchAniList(query: string, variables: any) {
const res = await fetch(ANILIST_URL, { const res = await fetch(ANILIST_URL, {
method: "POST", method: "POST",
@@ -119,76 +166,16 @@ export async function getAnimeById(id: string | number): Promise<Anime | { error
export async function getTrendingAnime(): Promise<Anime[]> { export async function getTrendingAnime(): Promise<Anime[]> {
const rows = await queryAll( const rows = await queryAll(
"SELECT full_data, updated_at FROM trending ORDER BY rank ASC LIMIT 10" "SELECT full_data FROM trending ORDER BY rank ASC LIMIT 10"
); );
return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
if (rows.length) {
const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
if (!expired) {
return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
}
}
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]
);
}
return list;
} }
export async function getTopAiringAnime(): Promise<Anime[]> { export async function getTopAiringAnime(): Promise<Anime[]> {
const rows = await queryAll( const rows = await queryAll(
"SELECT full_data, updated_at FROM top_airing ORDER BY rank ASC LIMIT 10" "SELECT full_data FROM top_airing ORDER BY rank ASC LIMIT 10"
); );
return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
if (rows.length) {
const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
if (!expired) {
return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
}
}
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]
);
}
return list;
} }
export async function searchAnimeLocal(query: string): Promise<Anime[]> { export async function searchAnimeLocal(query: string): Promise<Anime[]> {

7
desktop/src/api/books/books.controller.ts
View File

@@ -87,15 +87,16 @@ export async function getChapters(req: any, reply: FastifyReply) {
try { try {
const { id } = req.params; const { id } = req.params;
const source = req.query.source || 'anilist'; const source = req.query.source || 'anilist';
const provider = req.query.provider;
const isExternal = source !== 'anilist'; const isExternal = source !== 'anilist';
return await booksService.getChaptersForBook(id, isExternal); return await booksService.getChaptersForBook(id, isExternal, provider);
} catch { } catch (err) {
console.error(err);
return { chapters: [] }; return { chapters: [] };
} }
} }
export async function getChapterContent(req: any, reply: FastifyReply) { export async function getChapterContent(req: any, reply: FastifyReply) {
try { try {
const { bookId, chapter, provider } = req.params; const { bookId, chapter, provider } = req.params;

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

@@ -4,7 +4,6 @@ import { getAllExtensions, getBookExtensionsMap } from '../../shared/extensions'
import { Book, Extension, ChapterWithProvider, ChapterContent } from '../types'; import { Book, Extension, ChapterWithProvider, ChapterContent } from '../types';
const CACHE_TTL_MS = 24 * 60 * 60 * 1000; const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
const TTL = 60 * 60 * 6;
const ANILIST_URL = "https://graphql.anilist.co"; const ANILIST_URL = "https://graphql.anilist.co";
async function fetchAniList(query: string, variables: any) { async function fetchAniList(query: string, variables: any) {
@@ -134,25 +133,14 @@ export async function getBookById(id: string | number): Promise<Book | { error:
return { error: "Book not found" }; return { error: "Book not found" };
} }
export async function getTrendingBooks(): Promise<Book[]> { export async function refreshTrendingBooks(): Promise<void> {
const rows = await queryAll(
"SELECT full_data, updated_at FROM trending_books ORDER BY rank ASC LIMIT 10"
);
if (rows.length) {
const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
if (!expired) {
return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
}
}
const query = ` const query = `
query { query {
Page(page: 1, perPage: 10) { Page(page: 1, perPage: 10) {
media(type: MANGA, sort: TRENDING_DESC) { ${MEDIA_FIELDS} } media(type: MANGA, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
}
} }
} `;
`;
const data = await fetchAniList(query, {}); const data = await fetchAniList(query, {});
const list = data?.Page?.media || []; const list = data?.Page?.media || [];
@@ -167,30 +155,16 @@ export async function getTrendingBooks(): Promise<Book[]> {
[rank++, book.id, JSON.stringify(book), now] [rank++, book.id, JSON.stringify(book), now]
); );
} }
return list;
} }
export async function refreshPopularBooks(): Promise<void> {
export async function getPopularBooks(): Promise<Book[]> {
const rows = await queryAll(
"SELECT full_data, updated_at FROM popular_books ORDER BY rank ASC LIMIT 10"
);
if (rows.length) {
const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
if (!expired) {
return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
}
}
const query = ` const query = `
query { query {
Page(page: 1, perPage: 10) { Page(page: 1, perPage: 10) {
media(type: MANGA, sort: POPULARITY_DESC) { ${MEDIA_FIELDS} } media(type: MANGA, sort: POPULARITY_DESC) { ${MEDIA_FIELDS} }
}
} }
} `;
`;
const data = await fetchAniList(query, {}); const data = await fetchAniList(query, {});
const list = data?.Page?.media || []; const list = data?.Page?.media || [];
@@ -205,10 +179,21 @@ export async function getPopularBooks(): Promise<Book[]> {
[rank++, book.id, JSON.stringify(book), now] [rank++, book.id, JSON.stringify(book), now]
); );
} }
return list;
} }
export async function getTrendingBooks(): Promise<Book[]> {
const rows = await queryAll(
"SELECT full_data FROM trending_books ORDER BY rank ASC LIMIT 10"
);
return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
}
export async function getPopularBooks(): Promise<Book[]> {
const rows = await queryAll(
"SELECT full_data FROM popular_books ORDER BY rank ASC LIMIT 10"
);
return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
}
export async function searchBooksLocal(query: string): Promise<Book[]> { export async function searchBooksLocal(query: string): Promise<Book[]> {
if (!query || query.length < 2) { if (!query || query.length < 2) {

43
desktop/src/api/config/config.controller.ts Normal file
View File

@@ -0,0 +1,43 @@
import {FastifyReply, FastifyRequest} from 'fastify';
import {getConfig, setConfig} from '../../shared/config';
export async function getFullConfig(req: FastifyRequest, reply: FastifyReply) {
try {
return getConfig();
} catch (err) {
return { error: "Error loading config" };
}
}
export async function getConfigSection(req: FastifyRequest<{ Params: { section: string } }>, reply: FastifyReply) {
try {
const { section } = req.params;
const config = getConfig();
if (config[section] === undefined) {
return { error: "Section not found" };
}
return { [section]: config[section] };
} catch (err) {
return { error: "Error loading config section" };
}
}
export async function updateConfig(req: FastifyRequest<{ Body: any }>, reply: FastifyReply) {
try {
return setConfig(req.body);
} catch (err) {
return { error: "Error updating config" };
}
}
export async function updateConfigSection(req: FastifyRequest<{ Params: { section: string }, Body: any }>, reply: FastifyReply) {
try {
const { section } = req.params;
const updatedConfig = setConfig({ [section]: req.body });
return { [section]: updatedConfig[section] };
} catch (err) {
return { error: "Error updating config section" };
}
}

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

@@ -0,0 +1,11 @@
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;

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

@@ -1,6 +1,59 @@
import { FastifyReply, FastifyRequest } from 'fastify'; import { FastifyReply, FastifyRequest } from 'fastify';
import { getExtension, getExtensionsList, getGalleryExtensionsMap, getBookExtensionsMap, getAnimeExtensionsMap, saveExtensionFile, deleteExtensionFile } from '../../shared/extensions'; import { getExtension, getExtensionsList, getGalleryExtensionsMap, getBookExtensionsMap, getAnimeExtensionsMap, saveExtensionFile, deleteExtensionFile } from '../../shared/extensions';
import { ExtensionNameRequest } from '../types'; import { ExtensionNameRequest } from '../types';
import path from 'path';
import fs from 'fs/promises';
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) { export async function getExtensions(req: FastifyRequest, reply: FastifyReply) {
return { extensions: getExtensionsList() }; return { extensions: getExtensionsList() };
@@ -37,24 +90,33 @@ export async function getExtensionSettings(req: ExtensionNameRequest, reply: Fas
} }
export async function installExtension(req: any, reply: FastifyReply) { export async function installExtension(req: any, reply: FastifyReply) {
const { fileName } = req.body; const { url } = req.body;
if (!fileName || !fileName.endsWith('.js')) { if (!url || typeof url !== 'string' || !url.endsWith('.js')) {
return reply.code(400).send({ error: "Invalid extension fileName provided" }); return reply.code(400).send({ error: "Invalid extension URL provided" });
} }
try { try {
const fileName = url.split('/').pop();
const downloadUrl = `https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/${fileName}` if (!fileName) {
return reply.code(400).send({ error: "Could not determine file name from URL" });
}
await saveExtensionFile(fileName, downloadUrl); await saveExtensionFile(fileName, url);
req.server.log.info(`Extension installed: ${fileName}`); req.server.log.info(`Extension installed: ${fileName}`);
return reply.code(200).send({ success: true, message: `Extension ${fileName} installed successfully.` }); return reply.code(200).send({
success: true,
message: `Extension ${fileName} installed successfully.`,
});
} catch (error) { } catch (error) {
req.server.log.error(`Failed to install extension ${fileName}:`, error); req.server.log.error(`Failed to install extension from ${url}:`, error);
return reply.code(500).send({ success: false, error: `Failed to install extension ${fileName}.` }); return reply.code(500).send({
success: false,
error: "Failed to install extension.",
});
} }
} }

1
desktop/src/api/extensions/extensions.routes.ts
View File

@@ -4,6 +4,7 @@ import * as controller from './extensions.controller';
async function extensionsRoutes(fastify: FastifyInstance) { async function extensionsRoutes(fastify: FastifyInstance) {
fastify.get('/extensions', controller.getExtensions); fastify.get('/extensions', controller.getExtensions);
fastify.get('/extensions/anime', controller.getAnimeExtensions); fastify.get('/extensions/anime', controller.getAnimeExtensions);
fastify.post('/extensions/update', controller.updateExtensions);
fastify.get('/extensions/book', controller.getBookExtensions); fastify.get('/extensions/book', controller.getBookExtensions);
fastify.get('/extensions/gallery', controller.getGalleryExtensions); fastify.get('/extensions/gallery', controller.getGalleryExtensions);
fastify.get('/extensions/:name/settings', controller.getExtensionSettings); fastify.get('/extensions/:name/settings', controller.getExtensionSettings);

357
desktop/src/api/local/local.controller.ts Normal file
View File

@@ -0,0 +1,357 @@
import { FastifyRequest, FastifyReply } from 'fastify';
import { getConfig as loadConfig, setConfig as saveConfig } 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, searchBooksLocal} from "../books/books.service";
import AdmZip from 'adm-zip';
type SetConfigBody = {
library?: {
anime?: string | null;
manga?: string | null;
novels?: string | null;
};
};
type ScanQuery = {
mode?: 'full' | 'incremental';
};
type Params = {
type: 'anime' | 'manga' | 'novels';
id?: string;
};
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);
const first = results?.[0];
if (first?.id) {
matchedId = first.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 scanLibrary(request: FastifyRequest<{ Querystring: ScanQuery }>, reply: FastifyReply) {
try {
const mode = request.query.mode || 'incremental';
const config = loadConfig();
if (!config.library) {
return reply.status(400).send({ 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(config.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())
.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' };
} catch (err) {
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;
const entries = await queryAll(`SELECT * FROM local_entries WHERE type = ?`, [type], 'local_library');
return await Promise.all(entries.map((entry: any) => resolveEntryMetadata(entry, 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 queryOne(
`SELECT * FROM local_entries WHERE matched_id = ? AND type = ?`,
[Number(id), type],
'local_library'
);
if (!entry) {
return reply.status(404).send({ error: 'ENTRY_NOT_FOUND' });
}
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 };
} 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 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 reply.status(404).send({ error: 'FILE_NOT_FOUND' });
}
const stat = fs.statSync(file.file_path);
const range = request.headers.range;
if (!range) {
reply
.header('Content-Length', stat.size)
.header('Content-Type', 'video/mp4');
return fs.createReadStream(file.file_path);
}
const parts = range.replace(/bytes=/, '').split('-');
const start = Number(parts[0]);
let end = parts[1] ? Number(parts[1]) : stat.size - 1;
if (
Number.isNaN(start) ||
Number.isNaN(end) ||
start < 0 ||
end < start ||
end >= stat.size
) {
end = stat.size - 1;
}
reply
.status(206)
.header('Content-Range', `bytes ${start}-${end}/${stat.size}`)
.header('Accept-Ranges', 'bytes')
.header('Content-Length', end - start + 1)
.header('Content-Type', 'video/mp4');
return fs.createReadStream(file.file_path, { start, end });
}
type MatchBody = {
source: 'anilist';
matched_id: number | null;
};
export async function matchEntry(
request: FastifyRequest<{ Body: MatchBody }>,
reply: FastifyReply
) {
const { id, type } = request.params as any;
const { source, matched_id } = request.body;
const entry = await queryOne(
`SELECT id FROM local_entries WHERE id = ? AND type = ?`,
[id, type],
'local_library'
);
if (!entry) {
return reply.status(404).send({ error: 'ENTRY_NOT_FOUND' });
}
await run(
`UPDATE local_entries
SET matched_source = ?, matched_id = ?
WHERE id = ?`,
[source, matched_id, id],
'local_library'
);
return { status: 'OK', matched: !!matched_id };
}
export async function getUnits(
request: FastifyRequest<{ Params: Params }>,
reply: FastifyReply
) {
try {
const { type, id } = request.params as { type: string, id: string };
// Buscar la entrada por matched_id
const entry = await queryOne(
`SELECT id, type, matched_id FROM local_entries WHERE matched_id = ? AND type = ?`,
[Number(id), type],
'local_library'
);
if (!entry) {
return reply.status(404).send({ error: 'ENTRY_NOT_FOUND' });
}
// Obtener todos los archivos/unidades ordenados
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'
);
// Formatear la respuesta según el tipo
const units = files.map((file: any) => {
const fileName = path.basename(file.file_path);
const fileExt = path.extname(file.file_path).toLowerCase();
// Detectar si es un archivo comprimido (capítulo único) o carpeta
const isDirectory = fs.existsSync(file.file_path) &&
fs.statSync(file.file_path).isDirectory();
return {
id: file.id,
number: file.unit_number,
name: fileName,
type: type === 'anime' ? 'episode' : 'chapter',
format: fileExt === '.cbz' ? 'cbz' : 'file',
path: file.file_path
};
});
return {
entry_id: entry.id,
matched_id: entry.matched_id,
type: entry.type,
total: units.length,
units
};
} catch (err) {
console.error('Error getting units:', err);
return reply.status(500).send({ error: 'FAILED_TO_GET_UNITS' });
}
}
export async function getCbzPages(request: FastifyRequest, reply: FastifyReply) {
const { unitId } = request.params as any;
const file = await queryOne(
`SELECT file_path FROM local_files WHERE id = ?`,
[unitId],
'local_library'
);
if (!file || !fs.existsSync(file.file_path)) {
return reply.status(404).send({ error: 'FILE_NOT_FOUND' });
}
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) =>
`/api/library/manga/cbz/${unitId}/page/${i}`
);
return { pages };
}
export async function getCbzPage(request: FastifyRequest, reply: FastifyReply) {
const { unitId, page } = request.params as any;
const file = await queryOne(
`SELECT file_path FROM local_files WHERE id = ?`,
[unitId],
'local_library'
);
if (!file) return reply.status(404).send();
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[page];
if (!entry) return reply.status(404).send();
reply
.header('Content-Type', 'image/jpeg')
.send(entry.getData());
}

15
desktop/src/api/local/local.routes.ts Normal file
View File

@@ -0,0 +1,15 @@
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);
fastify.get('/library/stream/:type/:id/:unit', controller.streamUnit);
fastify.post('/library/:type/:id/match', controller.matchEntry);
fastify.get('/library/:type/:id/units', controller.getUnits);
fastify.get('/library/:type/cbz/:unitId/pages', controller.getCbzPages);
fastify.get('/library/:type/cbz/:unitId/page/:page', controller.getCbzPage);
}
export default localRoutes;

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

@@ -1,16 +1,18 @@
// @ts-ignore import { Client } from "@xhayper/discord-rpc";
import { DiscordRPCClient } from "@ryuziii/discord-rpc";
let rpcClient: DiscordRPCClient | null = null; let rpcClient: Client | null = null;
let reconnectTimer: NodeJS.Timeout | null = null; let reconnectTimer: NodeJS.Timeout | null = null;
let connected: boolean = false; let connected = false;
type RPCMode = "watching" | "reading" | string; type RPCMode = "watching" | "reading" | string;
interface RPCData { interface RPCData {
details?: string; details?: string;
state?: string; state?: string;
mode?: RPCMode; mode?: string;
startTimestamp?: number;
endTimestamp?: number;
paused?: boolean;
version?: string; version?: string;
} }
@@ -30,91 +32,68 @@ function attemptReconnect(clientId: string) {
} }
export function initRPC(clientId: string) { export function initRPC(clientId: string) {
if (rpcClient) { if (rpcClient) {
try { rpcClient.destroy(); } catch (e) {} try { rpcClient.destroy(); } catch {}
rpcClient = null; rpcClient = null;
} }
if (reconnectTimer) { if (reconnectTimer) {
clearTimeout(reconnectTimer); clearTimeout(reconnectTimer);
reconnectTimer = null; reconnectTimer = null;
} }
console.log(`Discord RPC: Starting with id ...${clientId.slice(-4)}`); rpcClient = new Client({ clientId });
try {
rpcClient = new DiscordRPCClient({
clientId: clientId,
transport: 'ipc'
});
} catch (err) {
console.error('Discord RPC:', err);
return;
}
rpcClient.on("ready", () => { rpcClient.on("ready", () => {
connected = true; connected = true;
const user = rpcClient?.user ? rpcClient.user.username : 'User'; console.log("Discord RPC conectado");
console.log(`Discord RPC: Authenticated for: ${user}`);
setTimeout(() => { setTimeout(() => {
setActivity({ details: "Browsing", state: "In App", mode: "idle" }); setActivity({ details: "Browsing", state: "In App" });
}, 1000); }, 1000);
}); });
rpcClient.on('disconnected', () => { rpcClient.on("disconnected", () => {
console.log('Discord RPC: Desconexión detectada.'); connected = false;
attemptReconnect(clientId); attemptReconnect(clientId);
}); });
rpcClient.on('error', (err: { message: any; }) => { rpcClient.on("error", () => {
console.error('[Discord RPC] Error:', err.message); if (connected) attemptReconnect(clientId);
if (connected) {
attemptReconnect(clientId);
}
}); });
try { rpcClient.login().catch(() => {
rpcClient.connect().catch((err: { message: any; }) => {
console.error('Discord RPC: Error al conectar', err.message);
attemptReconnect(clientId);
});
} catch (err) {
console.error('Discord RPC: Error al iniciar la conexión', err);
attemptReconnect(clientId); attemptReconnect(clientId);
} });
} }
export function setActivity(data: RPCData = {}) { export function setActivity(data: RPCData = {}) {
if (!rpcClient || !connected) return; if (!rpcClient || !connected) return;
let type; let type = 0;
let state = data.state; if (data.mode === "watching") type = 3;
let details = data.details; if (data.mode === "reading") type = 0;
if (data.mode === "watching") { const activity: any = {
type = 3 details: data.details,
} else if (data.mode === "reading") { state: data.state,
type = 0 type,
instance: false
};
if (data.paused) {
activity.largeImageText = "⏸ ";
delete activity.startTimestamp;
delete activity.endTimestamp;
} else { } else {
type = 0 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);
try {
rpcClient.setActivity({
details: details,
state: state,
type: type,
startTimestamp: new Date(),
largeImageKey: "bigpicture",
largeImageText: "v2.0.0",
instance: false
});
} catch (error) {
console.error("Discord RPC: Failed to set activity", error);
}
} }

17
desktop/src/api/rpc/rpc.controller.ts
View File

@@ -11,16 +11,29 @@ export function init() {
} }
export async function setRPC(request: FastifyRequest, reply: FastifyReply) { export async function setRPC(request: FastifyRequest, reply: FastifyReply) {
const { details, state, mode } = request.body as { const {
details,
state,
mode,
startTimestamp,
endTimestamp,
paused
} = request.body as {
details?: string; details?: string;
state?: string; state?: string;
mode?: "watching" | "reading" | string; mode?: "watching" | "reading" | string;
startTimestamp?: number;
endTimestamp?: number;
paused?: boolean;
}; };
setActivity({ setActivity({
details, details,
state, state,
mode mode,
startTimestamp,
endTimestamp,
paused
}); });
return reply.send({ ok: true }); return reply.send({ ok: true });

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

@@ -168,20 +168,39 @@ export async function deleteUser(req: FastifyRequest, reply: FastifyReply) {
const { id } = req.params as { id: string }; const { id } = req.params as { id: string };
const userId = parseInt(id, 10); const userId = parseInt(id, 10);
const body = (req.body ?? {}) as { password?: string };
const password = body.password;
if (!userId || isNaN(userId)) { if (!userId || isNaN(userId)) {
return reply.code(400).send({ error: "Invalid user id" }); return reply.code(400).send({ error: "Invalid user id" });
} }
const result = await userService.deleteUser(userId); const user = await userService.getUserById(userId);
if (!user) {
if (result && result.changes > 0) {
return { success: true, message: "User deleted successfully" };
} else {
return reply.code(404).send({ error: "User not found" }); 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) { } catch (err) {
console.error("Delete User Error:", (err as Error).message); console.error("Delete User Error:", err);
return reply.code(500).send({ error: "Failed to delete user" }); return reply.code(500).send({ error: "Failed to delete user" });
} }
} }
@@ -246,16 +265,17 @@ export async function changePassword(req: FastifyRequest, reply: FastifyReply) {
return reply.code(404).send({ error: "User not found" }); return reply.code(404).send({ error: "User not found" });
} }
// Si el usuario tiene contraseña actual, debe proporcionar la contraseña actual if (user.has_password) {
if (user.has_password && currentPassword) { if (!currentPassword) {
const isValid = await userService.verifyPassword(userId, currentPassword); return reply.code(401).send({ error: "Current password required" });
}
const isValid = await userService.verifyPassword(userId, currentPassword);
if (!isValid) { if (!isValid) {
return reply.code(401).send({ error: "Current password is incorrect" }); return reply.code(401).send({ error: "Current password is incorrect" });
} }
} }
// Actualizar la contraseña (null para eliminarla, string para establecerla)
await userService.updateUser(userId, { password: newPassword }); await userService.updateUser(userId, { password: newPassword });
return reply.send({ return reply.send({

36
desktop/src/scripts/anime/anime.js
View File

@@ -1,6 +1,7 @@
let animeData = null; let animeData = null;
let extensionName = null; let extensionName = null;
let animeId = null; let animeId = null;
let isLocal = false;
const episodePagination = Object.create(PaginationManager); const episodePagination = Object.create(PaginationManager);
episodePagination.init(12, renderEpisodes); episodePagination.init(12, renderEpisodes);
@@ -13,6 +14,30 @@ document.addEventListener('DOMContentLoaded', () => {
setupEpisodeSearch(); setupEpisodeSearch();
}); });
function markAsLocal() {
isLocal = true;
const pill = document.getElementById('local-pill');
if (!pill) return;
pill.textContent = 'Local';
pill.style.display = 'inline-flex';
pill.style.background = 'rgba(34,197,94,.2)';
pill.style.color = '#22c55e';
pill.style.borderColor = 'rgba(34,197,94,.3)';
}
async function checkLocalLibraryEntry() {
try {
const res = await fetch(`/api/library/anime/${animeId}`);
if (!res.ok) return;
markAsLocal();
} catch (e) {
}
}
async function loadAnime() { async function loadAnime() {
try { try {
@@ -24,6 +49,7 @@ async function loadAnime() {
extensionName = urlData.extensionName; extensionName = urlData.extensionName;
animeId = urlData.entityId; animeId = urlData.entityId;
await checkLocalLibraryEntry();
const fetchUrl = extensionName const fetchUrl = extensionName
? `/api/anime/${animeId}?source=${extensionName}` ? `/api/anime/${animeId}?source=${extensionName}`
@@ -38,7 +64,7 @@ async function loadAnime() {
} }
animeData = data; animeData = data;
animeData.entry_type = 'ANIME';
const metadata = MediaMetadataUtils.formatAnimeData(data, !!extensionName); const metadata = MediaMetadataUtils.formatAnimeData(data, !!extensionName);
updatePageTitle(metadata.title); updatePageTitle(metadata.title);
@@ -142,8 +168,8 @@ function setupWatchButton() {
const watchBtn = document.getElementById('watch-btn'); const watchBtn = document.getElementById('watch-btn');
if (watchBtn) { if (watchBtn) {
watchBtn.onclick = () => { watchBtn.onclick = () => {
const url = URLUtils.buildWatchUrl(animeId, 1, extensionName); const source = isLocal ? 'local' : (extensionName || 'anilist');
window.location.href = url; window.location.href = URLUtils.buildWatchUrl(animeId, num, source);
}; };
} }
} }
@@ -226,8 +252,8 @@ function createEpisodeButton(num, container) {
btn.className = 'episode-btn'; btn.className = 'episode-btn';
btn.innerText = `Ep ${num}`; btn.innerText = `Ep ${num}`;
btn.onclick = () => { btn.onclick = () => {
const url = URLUtils.buildWatchUrl(animeId, num, extensionName); const source = isLocal ? 'local' : (extensionName || 'anilist');
window.location.href = url; window.location.href = URLUtils.buildWatchUrl(animeId, num, source);
}; };
container.appendChild(btn); container.appendChild(btn);
} }

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

@@ -92,6 +92,7 @@ function startHeroCycle() {
async function updateHeroUI(anime) { async function updateHeroUI(anime) {
if(!anime) return; if(!anime) return;
anime.entry_type = 'ANIME';
const title = anime.title.english || anime.title.romaji || "Unknown Title"; const title = anime.title.english || anime.title.romaji || "Unknown Title";
const score = anime.averageScore ? anime.averageScore + '% Match' : 'N/A'; const score = anime.averageScore ? anime.averageScore + '% Match' : 'N/A';

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

@@ -7,23 +7,56 @@ let currentExtension = '';
let plyrInstance; let plyrInstance;
let hlsInstance; let hlsInstance;
let totalEpisodes = 0; let totalEpisodes = 0;
let animeTitle = "";
let aniSkipData = null;
let isAnilist = false;
let malId = null;
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const firstKey = params.keys().next().value; const firstKey = params.keys().next().value;
let extName; let extName;
if (firstKey) extName = firstKey; if (firstKey) extName = firstKey;
const href = extName // URL de retroceso: Si es local, volvemos a la vista de Anilist normal
const href = (extName && extName !== 'local')
? `/anime/${extName}/${animeId}` ? `/anime/${extName}/${animeId}`
: `/anime/${animeId}`; : `/anime/${animeId}`;
document.getElementById('back-link').href = href; document.getElementById('back-link').href = href;
document.getElementById('episode-label').innerText = `Episode ${currentEpisode}`; document.getElementById('episode-label').innerText = `Episode ${currentEpisode}`;
async function loadMetadata() {
let localEntryId = null;
async function checkLocal() {
try { try {
const extQuery = extName ? `?source=${extName}` : "?source=anilist"; const res = await fetch(`/api/library/anime/${animeId}`);
const res = await fetch(`/api/anime/${animeId}${extQuery}`); if (!res.ok) return;
const data = await res.json();
localEntryId = data.id; // ← ID interna
} catch {}
}
async function loadAniSkip(malId, episode, duration) {
try {
const res = await fetch(`https://api.aniskip.com/v2/skip-times/${malId}/${episode}?types[]=op&types[]=ed&episodeLength=${duration}`);
if (!res.ok) return null;
const data = await res.json();
return data.results || [];
} catch (error) {
console.error('Error loading AniSkip data:', error);
return null;
}
}
async function loadMetadata() {
checkLocal();
try {
const sourceQuery = (extName === 'local' || !extName) ? "source=anilist" : `source=${extName}`;
const res = await fetch(`/api/anime/${animeId}?${sourceQuery}`);
const data = await res.json(); const data = await res.json();
if (data.error) { if (data.error) {
@@ -33,18 +66,9 @@ async function loadMetadata() {
const isAnilistFormat = data.title && (data.title.romaji || data.title.english); const isAnilistFormat = data.title && (data.title.romaji || data.title.english);
let title = ''; let title = '', description = '', coverImage = '', averageScore = '', format = '', seasonYear = '', season = '';
let description = '';
let coverImage = '';
let averageScore = '';
let format = '';
let seasonYear = '';
let season = '';
let episodesCount = 0;
let characters = [];
if (isAnilistFormat) { if (isAnilistFormat) {
title = data.title.romaji || data.title.english || data.title.native || 'Anime Title'; title = data.title.romaji || data.title.english || data.title.native || 'Anime Title';
description = data.description || 'No description available.'; description = data.description || 'No description available.';
coverImage = data.coverImage?.large || data.coverImage?.medium || ''; coverImage = data.coverImage?.large || data.coverImage?.medium || '';
@@ -62,20 +86,19 @@ async function loadMetadata() {
seasonYear = data.year || ''; seasonYear = data.year || '';
} }
if (isAnilistFormat && data.idMal) {
isAnilist = true;
malId = data.idMal;
} else {
isAnilist = false;
malId = null;
}
document.getElementById('anime-title-details').innerText = title; document.getElementById('anime-title-details').innerText = title;
document.getElementById('anime-title-details2').innerText = title; document.getElementById('anime-title-details2').innerText = title;
animeTitle = title;
document.title = `Watching ${title} - Ep ${currentEpisode}`; document.title = `Watching ${title} - Ep ${currentEpisode}`;
fetch("/api/rpc", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({
details: title,
state: `Episode ${currentEpisode}`,
mode: "watching"
})
});
const tempDiv = document.createElement('div'); const tempDiv = document.createElement('div');
tempDiv.innerHTML = description; tempDiv.innerHTML = description;
document.getElementById('detail-description').innerText = tempDiv.textContent || tempDiv.innerText || 'No description available.'; document.getElementById('detail-description').innerText = tempDiv.textContent || tempDiv.innerText || 'No description available.';
@@ -85,7 +108,8 @@ async function loadMetadata() {
document.getElementById('detail-season').innerText = season && seasonYear ? `${season} ${seasonYear}` : (season || seasonYear || '--'); document.getElementById('detail-season').innerText = season && seasonYear ? `${season} ${seasonYear}` : (season || seasonYear || '--');
document.getElementById('detail-cover-image').src = coverImage || '/default-cover.jpg'; document.getElementById('detail-cover-image').src = coverImage || '/default-cover.jpg';
if (extName) { // Solo cargamos episodios de extensión si hay extensión real y no es local
if (extName && extName !== 'local') {
await loadExtensionEpisodes(); await loadExtensionEpisodes();
} else { } else {
if (data.nextAiringEpisode?.episode) { if (data.nextAiringEpisode?.episode) {
@@ -97,12 +121,7 @@ async function loadMetadata() {
} }
const simpleEpisodes = []; const simpleEpisodes = [];
for (let i = 1; i <= totalEpisodes; i++) { for (let i = 1; i <= totalEpisodes; i++) {
simpleEpisodes.push({ simpleEpisodes.push({ number: i, title: null, thumbnail: null, isDub: false });
number: i,
title: null,
thumbnail: null,
isDub: false
});
} }
populateEpisodeCarousel(simpleEpisodes); populateEpisodeCarousel(simpleEpisodes);
} }
@@ -116,27 +135,65 @@ async function loadMetadata() {
} }
} }
async function applyAniSkip(video) {
if (!isAnilist || !malId) return;
aniSkipData = await loadAniSkip(malId, currentEpisode, Math.floor(video.duration));
if (!aniSkipData || aniSkipData.length === 0) return;
const markers = [];
aniSkipData.forEach(item => {
const { startTime, endTime } = item.interval;
markers.push({
start: startTime,
end: endTime,
label: item.skipType === 'op' ? 'Opening' : 'Ending'
});
});
if (plyrInstance && markers.length > 0) {
setTimeout(() => {
const progressContainer = document.querySelector('.plyr__progress');
if (!progressContainer) return;
const oldMarkers = progressContainer.querySelector('.plyr__markers');
if (oldMarkers) oldMarkers.remove();
const markersContainer = document.createElement('div');
markersContainer.className = 'plyr__markers';
markers.forEach(marker => {
const markerElement = document.createElement('div');
markerElement.className = 'plyr__marker';
markerElement.dataset.label = marker.label;
const startPercent = (marker.start / video.duration) * 100;
const widthPercent = ((marker.end - marker.start) / video.duration) * 100;
markerElement.style.left = `${startPercent}%`;
markerElement.style.width = `${widthPercent}%`;
markerElement.addEventListener('click', (e) => {
e.stopPropagation();
video.currentTime = marker.start;
});
markersContainer.appendChild(markerElement);
});
progressContainer.appendChild(markersContainer);
}, 500);
}
}
async function loadExtensionEpisodes() { async function loadExtensionEpisodes() {
try { try {
const extQuery = extName ? `?source=${extName}` : "?source=anilist"; const res = await fetch(`/api/anime/${animeId}/episodes?source=${extName}`);
const res = await fetch(`/api/anime/${animeId}/episodes${extQuery}`);
const data = await res.json(); const data = await res.json();
totalEpisodes = Array.isArray(data) ? data.length : 0; totalEpisodes = Array.isArray(data) ? data.length : 0;
populateEpisodeCarousel(Array.isArray(data) ? data : []);
if (Array.isArray(data) && data.length > 0) {
populateEpisodeCarousel(data);
} else {
const fallback = [];
for (let i = 1; i <= totalEpisodes; i++) {
fallback.push({ number: i, title: null, thumbnail: null });
}
populateEpisodeCarousel(fallback);
}
} catch (e) { } catch (e) {
console.error("Error cargando episodios por extensión:", e); console.error("Error cargando episodios:", e);
totalEpisodes = 0;
} }
} }
@@ -148,15 +205,12 @@ function populateEpisodeCarousel(episodesData) {
const epNumber = ep.number || ep.episodeNumber || ep.id || (index + 1); const epNumber = ep.number || ep.episodeNumber || ep.id || (index + 1);
if (!epNumber) return; if (!epNumber) return;
const extParam = extName ? `?${extName}` : ""; const extParam = (extName && extName !== 'local') ? `?${extName}` : "";
const hasThumbnail = ep.thumbnail && ep.thumbnail.trim() !== ''; const hasThumbnail = ep.thumbnail && ep.thumbnail.trim() !== '';
const link = document.createElement('a'); const link = document.createElement('a');
link.href = `/watch/${animeId}/${epNumber}${extParam}`; link.href = `/watch/${animeId}/${epNumber}${extParam}`;
link.classList.add('carousel-item'); link.classList.add('carousel-item');
link.dataset.episode = epNumber;
if (!hasThumbnail) link.classList.add('no-thumbnail');
if (parseInt(epNumber) === currentEpisode) link.classList.add('active-ep-carousel'); if (parseInt(epNumber) === currentEpisode) link.classList.add('active-ep-carousel');
const imgContainer = document.createElement('div'); const imgContainer = document.createElement('div');
@@ -164,21 +218,15 @@ function populateEpisodeCarousel(episodesData) {
if (hasThumbnail) { if (hasThumbnail) {
const img = document.createElement('img'); const img = document.createElement('img');
img.classList.add('carousel-item-img');
img.src = ep.thumbnail; img.src = ep.thumbnail;
img.alt = `Episode ${epNumber} Thumbnail`; img.classList.add('carousel-item-img');
imgContainer.appendChild(img); imgContainer.appendChild(img);
} }
link.appendChild(imgContainer); link.appendChild(imgContainer);
const info = document.createElement('div'); const info = document.createElement('div');
info.classList.add('carousel-item-info'); info.classList.add('carousel-item-info');
info.innerHTML = `<p>Ep ${epNumber}: ${ep.title || 'Untitled'}</p>`;
const title = document.createElement('p');
title.innerText = `Ep ${epNumber}: ${ep.title || 'Untitled'}`;
info.appendChild(title);
link.appendChild(info); link.appendChild(info);
carousel.appendChild(link); carousel.appendChild(link);
}); });
@@ -189,28 +237,27 @@ async function loadExtensions() {
const res = await fetch('/api/extensions/anime'); const res = await fetch('/api/extensions/anime');
const data = await res.json(); const data = await res.json();
const select = document.getElementById('extension-select'); const select = document.getElementById('extension-select');
let extensions = data.extensions || [];
if (data.extensions && data.extensions.length > 0) { if (extName === 'local' && !extensions.includes('local')) {
select.innerHTML = ''; extensions.push('local');
data.extensions.forEach(ext => {
const opt = document.createElement('option');
opt.value = opt.innerText = ext;
select.appendChild(opt);
});
if (typeof extName === 'string' && data.extensions.includes(extName)) {
select.value = extName;
} else {
select.selectedIndex = 0;
}
currentExtension = select.value;
onExtensionChange();
} else {
select.innerHTML = '<option>No Extensions</option>';
select.disabled = true;
setLoading("No anime extensions found.");
} }
select.innerHTML = '';
extensions.forEach(ext => {
const opt = document.createElement('option');
opt.value = opt.innerText = ext;
select.appendChild(opt);
});
if (extName && extensions.includes(extName)) {
select.value = extName;
} else if (extensions.length > 0) {
select.value = extensions[0];
}
currentExtension = select.value;
onExtensionChange();
} catch (error) { } catch (error) {
console.error("Extension Error:", error); console.error("Extension Error:", error);
} }
@@ -219,83 +266,70 @@ async function loadExtensions() {
async function onExtensionChange() { async function onExtensionChange() {
const select = document.getElementById('extension-select'); const select = document.getElementById('extension-select');
currentExtension = select.value; currentExtension = select.value;
setLoading("Fetching extension settings...");
if (currentExtension === 'local') {
document.getElementById('sd-toggle').style.display = 'none';
document.getElementById('server-select').style.display = 'none';
loadStream();
return;
}
setLoading("Fetching extension settings...");
try { try {
const res = await fetch(`/api/extensions/${currentExtension}/settings`); const res = await fetch(`/api/extensions/${currentExtension}/settings`);
const settings = await res.json(); const settings = await res.json();
const toggle = document.getElementById('sd-toggle'); const toggle = document.getElementById('sd-toggle');
if (settings.supportsDub) { toggle.style.display = settings.supportsDub ? 'flex' : 'none';
toggle.style.display = 'flex'; setAudioMode('sub');
setAudioMode('sub');
} else {
toggle.style.display = 'none';
setAudioMode('sub');
}
const serverSelect = document.getElementById('server-select'); const serverSelect = document.getElementById('server-select');
serverSelect.innerHTML = ''; serverSelect.innerHTML = '';
if (settings.episodeServers && settings.episodeServers.length > 0) { if (settings.episodeServers?.length > 0) {
settings.episodeServers.forEach(srv => { settings.episodeServers.forEach(srv => {
const opt = document.createElement('option'); const opt = document.createElement('option');
opt.value = srv; opt.value = opt.innerText = srv;
opt.innerText = srv;
serverSelect.appendChild(opt); serverSelect.appendChild(opt);
}); });
serverSelect.style.display = 'block'; serverSelect.style.display = 'block';
} else { } else {
serverSelect.style.display = 'none'; serverSelect.style.display = 'none';
} }
loadStream(); loadStream();
} catch (error) { } catch (error) {
console.error(error); setLoading("Failed to load settings.");
setLoading("Failed to load extension settings.");
} }
} }
function toggleAudioMode() {
const newMode = audioMode === 'sub' ? 'dub' : 'sub';
setAudioMode(newMode);
loadStream();
}
function setAudioMode(mode) {
audioMode = mode;
const toggle = document.getElementById('sd-toggle');
const subOpt = document.getElementById('opt-sub');
const dubOpt = document.getElementById('opt-dub');
toggle.setAttribute('data-state', mode);
subOpt.classList.toggle('active', mode === 'sub');
dubOpt.classList.toggle('active', mode === 'dub');
}
async function loadStream() { async function loadStream() {
if (!currentExtension) return; if (!currentExtension) return;
if (currentExtension === 'local') {
console.log(localEntryId);
if (!localEntryId) {
setLoading("No existe en local");
return;
}
const localUrl = `/api/library/stream/anime/${localEntryId}/${currentEpisode}`;
playVideo(localUrl, []);
document.getElementById('loading-overlay').style.display = 'none';
return;
}
const serverSelect = document.getElementById('server-select'); const serverSelect = document.getElementById('server-select');
const server = serverSelect.value || "default"; const server = serverSelect.value || "default";
setLoading(`Loading stream (${audioMode})...`); setLoading(`Loading stream (${audioMode})...`);
try { try {
let sourc = "&source=anilist"; const sourc = (extName && extName !== 'local') ? `&source=${extName}` : "&source=anilist";
if (extName){
sourc = `&source=${extName}`;
}
const url = `/api/watch/stream?animeId=${animeId}&episode=${currentEpisode}&server=${server}&category=${audioMode}&ext=${currentExtension}${sourc}`; const url = `/api/watch/stream?animeId=${animeId}&episode=${currentEpisode}&server=${server}&category=${audioMode}&ext=${currentExtension}${sourc}`;
const res = await fetch(url); const res = await fetch(url);
const data = await res.json(); const data = await res.json();
if (data.error) { if (data.error || !data.videoSources?.length) {
setLoading(`Error: ${data.error}`); setLoading(data.error || "No video sources.");
return;
}
if (!data.videoSources || data.videoSources.length === 0) {
setLoading("No video sources found.");
return; return;
} }
@@ -307,34 +341,31 @@ async function loadStream() {
if (headers['Origin']) proxyUrl += `&origin=${encodeURIComponent(headers['Origin'])}`; if (headers['Origin']) proxyUrl += `&origin=${encodeURIComponent(headers['Origin'])}`;
if (headers['User-Agent']) proxyUrl += `&userAgent=${encodeURIComponent(headers['User-Agent'])}`; if (headers['User-Agent']) proxyUrl += `&userAgent=${encodeURIComponent(headers['User-Agent'])}`;
playVideo(proxyUrl, data.videoSources[0].subtitles || data.subtitles); playVideo(proxyUrl, source.subtitles || data.subtitles || []);
document.getElementById('loading-overlay').style.display = 'none'; document.getElementById('loading-overlay').style.display = 'none';
} catch (error) { } catch (error) {
setLoading("Stream error. Check console."); setLoading("Stream error.");
console.error(error);
} }
} }
function playVideo(url, subtitles = []) { function playVideo(url, subtitles = []) {
const video = document.getElementById('player'); const video = document.getElementById('player');
const isLocal = url.includes('/api/library/stream/');
if (Hls.isSupported()) { if (!isLocal && Hls.isSupported()) {
if (hlsInstance) hlsInstance.destroy(); if (hlsInstance) hlsInstance.destroy();
hlsInstance = new Hls({ xhrSetup: (xhr) => xhr.withCredentials = false }); hlsInstance = new Hls({ xhrSetup: (xhr) => xhr.withCredentials = false });
hlsInstance.loadSource(url); hlsInstance.loadSource(url);
hlsInstance.attachMedia(video); hlsInstance.attachMedia(video);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) { } else {
if (hlsInstance) hlsInstance.destroy();
video.src = url; video.src = url;
} }
if (plyrInstance) plyrInstance.destroy(); if (plyrInstance) plyrInstance.destroy();
while (video.textTracks.length > 0) video.removeChild(video.textTracks[0]);
while (video.textTracks.length > 0) {
video.removeChild(video.textTracks[0]);
}
subtitles.forEach(sub => { subtitles.forEach(sub => {
if (!sub.url) return;
const track = document.createElement('track'); const track = document.createElement('track');
track.kind = 'captions'; track.kind = 'captions';
track.label = sub.language || 'Unknown'; track.label = sub.language || 'Unknown';
@@ -350,65 +381,58 @@ function playVideo(url, subtitles = []) {
settings: ['captions', 'quality', 'speed'] settings: ['captions', 'quality', 'speed']
}); });
let alreadyTriggered = false; video.addEventListener('loadedmetadata', () => applyAniSkip(video));
video.addEventListener('timeupdate', () => { // LÓGICA DE RPC (Discord)
let rpcActive = false;
video.addEventListener("play", () => {
if (!video.duration) return; if (!video.duration) return;
const elapsed = Math.floor(video.currentTime);
const percent = (video.currentTime / video.duration) * 100; const start = Math.floor(Date.now() / 1000) - elapsed;
const end = start + Math.floor(video.duration);
if (percent >= 80 && !alreadyTriggered) { sendRPC({ startTimestamp: start, endTimestamp: end });
alreadyTriggered = true; rpcActive = true;
sendProgress();
}
}); });
video.addEventListener("pause", () => {
if (rpcActive) sendRPC({ paused: true });
});
video.play().catch(() => console.log("Autoplay blocked")); video.addEventListener("seeked", () => {
if (video.paused || !rpcActive) return;
const elapsed = Math.floor(video.currentTime);
const start = Math.floor(Date.now() / 1000) - elapsed;
const end = start + Math.floor(video.duration);
sendRPC({ startTimestamp: start, endTimestamp: end });
});
} }
function setLoading(message) { function sendRPC({ startTimestamp, endTimestamp, paused = false } = {}) {
const overlay = document.getElementById('loading-overlay'); fetch("/api/rpc", {
const text = document.getElementById('loading-text'); method: "POST",
overlay.style.display = 'flex'; headers: { "Content-Type": "application/json" },
text.innerText = message; body: JSON.stringify({
details: animeTitle,
state: `Episode ${currentEpisode}`,
mode: "watching",
startTimestamp,
endTimestamp,
paused
})
});
} }
const extParam = extName ? `?${extName}` : "";
document.getElementById('prev-btn').onclick = () => {
if (currentEpisode > 1) {
window.location.href = `/watch/${animeId}/${currentEpisode - 1}${extParam}`;
}
};
document.getElementById('next-btn').onclick = () => {
if (currentEpisode < totalEpisodes || totalEpisodes === 0) {
window.location.href = `/watch/${animeId}/${currentEpisode + 1}${extParam}`;
}
};
if (currentEpisode <= 1) {
document.getElementById('prev-btn').disabled = true;
}
async function sendProgress() { async function sendProgress() {
const token = localStorage.getItem('token'); const token = localStorage.getItem('token');
if (!token) return; if (!token) return;
const source = (extName && extName !== 'local') ? extName : "anilist";
const source = extName
? extName
: "anilist";
const body = { const body = {
entry_id: animeId, entry_id: animeId,
source: source, source: source,
entry_type: "ANIME", entry_type: "ANIME",
status: 'CURRENT', status: 'CURRENT',
progress: source === 'anilist' progress: currentEpisode
? Math.floor(currentEpisode)
: currentEpisode
}; };
try { try {
@@ -425,7 +449,39 @@ async function sendProgress() {
} }
} }
// Botones y Toggle
document.getElementById('sd-toggle').onclick = () => {
audioMode = audioMode === 'sub' ? 'dub' : 'sub';
setAudioMode(audioMode);
loadStream();
};
function setAudioMode(mode) {
const toggle = document.getElementById('sd-toggle');
toggle.setAttribute('data-state', mode);
document.getElementById('opt-sub').classList.toggle('active', mode === 'sub');
document.getElementById('opt-dub').classList.toggle('active', mode === 'dub');
}
function setLoading(message) {
document.getElementById('loading-text').innerText = message;
document.getElementById('loading-overlay').style.display = 'flex';
}
const extParam = (extName && extName !== 'local') ? `?${extName}` : "";
document.getElementById('prev-btn').onclick = () => {
if (currentEpisode > 1) window.location.href = `/watch/${animeId}/${currentEpisode - 1}${extParam}`;
};
document.getElementById('next-btn').onclick = () => {
if (currentEpisode < totalEpisodes || totalEpisodes === 0) window.location.href = `/watch/${animeId}/${currentEpisode + 1}${extParam}`;
};
if (currentEpisode <= 1) document.getElementById('prev-btn').disabled = true;
// Actualizar progreso cada 1 minuto si el video está reproduciéndose
setInterval(() => {
if (plyrInstance && !plyrInstance.paused) sendProgress();
}, 60000);
loadMetadata(); loadMetadata();
loadExtensions(); loadExtensions();

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

@@ -43,6 +43,43 @@ async function loadMeUI() {
} }
} }
// Variable para saber si el modal ya fue cargado
let settingsModalLoaded = false;
document.getElementById('nav-settings').addEventListener('click', openSettings)
async function openSettings() {
if (!settingsModalLoaded) {
try {
const res = await fetch('/views/components/settings-modal.html')
const html = await res.text()
document.body.insertAdjacentHTML('beforeend', html)
settingsModalLoaded = true;
// Esperar un momento para que el DOM se actualice
await new Promise(resolve => setTimeout(resolve, 50));
// Ahora cargar los settings
if (window.toggleSettingsModal) {
await window.toggleSettingsModal(false);
}
} catch (err) {
console.error('Error loading settings modal:', err);
}
} else {
if (window.toggleSettingsModal) {
await window.toggleSettingsModal(false);
}
}
}
function closeSettings() {
const modal = document.getElementById('settings-modal');
if (modal) {
modal.classList.add('hidden');
}
}
function setupDropdown() { function setupDropdown() {
const userAvatarBtn = document.querySelector(".user-avatar-btn") const userAvatarBtn = document.querySelector(".user-avatar-btn")
const navDropdown = document.getElementById("nav-dropdown") const navDropdown = document.getElementById("nav-dropdown")

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

@@ -6,6 +6,8 @@ let bookSlug = null;
let allChapters = []; let allChapters = [];
let filteredChapters = []; let filteredChapters = [];
let availableExtensions = [];
let isLocal = false;
const chapterPagination = Object.create(PaginationManager); const chapterPagination = Object.create(PaginationManager);
chapterPagination.init(12, () => renderChapterTable()); chapterPagination.init(12, () => renderChapterTable());
@@ -14,9 +16,42 @@ document.addEventListener('DOMContentLoaded', () => {
setupModalClickOutside(); setupModalClickOutside();
}); });
async function checkLocalLibraryEntry() {
try {
const res = await fetch(`/api/library/manga/${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 status:", e);
}
}
function markAsLocal() {
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)';
}
}
async function init() { async function init() {
try { try {
const urlData = URLUtils.parseEntityPath('book'); const urlData = URLUtils.parseEntityPath('book');
if (!urlData) { if (!urlData) {
showError("Book Not Found"); showError("Book Not Found");
@@ -26,9 +61,10 @@ async function init() {
extensionName = urlData.extensionName; extensionName = urlData.extensionName;
bookId = urlData.entityId; bookId = urlData.entityId;
bookSlug = urlData.slug; bookSlug = urlData.slug;
await checkLocalLibraryEntry();
await loadBookMetadata(); await loadBookMetadata();
await loadAvailableExtensions();
await loadChapters(); await loadChapters();
await setupAddToListButton(); await setupAddToListButton();
@@ -39,11 +75,23 @@ async function init() {
} }
} }
async function loadAvailableExtensions() {
try {
const res = await fetch('/api/extensions/book');
const data = await res.json();
availableExtensions = data.extensions || [];
setupProviderFilter();
} catch (err) {
console.error("Error fetching extensions:", err);
}
}
async function loadBookMetadata() { async function loadBookMetadata() {
const source = extensionName || 'anilist'; const source = extensionName || 'anilist';
const fetchUrl = `/api/book/${bookId}?source=${source}`; const fetchUrl = `/api/book/${bookId}?source=${source}`;
const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() }); const res = await fetch(fetchUrl);
const data = await res.json(); const data = await res.json();
if (data.error || !data) { if (data.error || !data) {
@@ -55,7 +103,8 @@ async function loadBookMetadata() {
bookData = raw; bookData = raw;
const metadata = MediaMetadataUtils.formatBookData(raw, !!extensionName); const metadata = MediaMetadataUtils.formatBookData(raw, !!extensionName);
bookData.entry_type =
metadata.format === 'MANGA' ? 'MANGA' : 'NOVEL';
updatePageTitle(metadata.title); updatePageTitle(metadata.title);
updateMetadata(metadata); updateMetadata(metadata);
updateExtensionPill(); updateExtensionPill();
@@ -154,39 +203,61 @@ function updateCustomAddButton() {
} }
} }
async function loadChapters() { async function loadChapters(targetProvider = null) {
const tbody = document.getElementById('chapters-body'); const tbody = document.getElementById('chapters-body');
if (!tbody) return; if (!tbody) return;
tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">Searching extensions for chapters...</td></tr>'; if (!targetProvider) {
const select = document.getElementById('provider-filter');
targetProvider = select ? select.value : (availableExtensions[0] || 'all');
}
tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">Loading chapters...</td></tr>';
try { try {
const source = extensionName || 'anilist'; let fetchUrl;
const fetchUrl = `/api/book/${bookId}/chapters?source=${source}`; let isLocalRequest = targetProvider === 'local';
const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() }); if (isLocalRequest) {
// Nuevo endpoint para archivos locales
fetchUrl = `/api/library/manga/${bookId}/units`;
} else {
const source = extensionName || 'anilist';
fetchUrl = `/api/book/${bookId}/chapters?source=${source}`;
if (targetProvider !== 'all') fetchUrl += `&provider=${targetProvider}`;
}
const res = await fetch(fetchUrl);
const data = await res.json(); const data = await res.json();
allChapters = data.chapters || []; // Mapeo de datos: Si es local usamos 'units', si no, usamos 'chapters'
filteredChapters = [...allChapters]; if (isLocalRequest) {
allChapters = (data.units || []).map((unit, idx) => ({
number: unit.number,
title: unit.name,
provider: 'local',
index: idx, // ✅ índice (0,1,2…)
format: unit.format
}));
} else {
allChapters = data.chapters || [];
}
filteredChapters = [...allChapters];
applyChapterFilter(); applyChapterFilter();
const totalEl = document.getElementById('total-chapters'); const totalEl = document.getElementById('total-chapters');
if (allChapters.length === 0) { if (allChapters.length === 0) {
tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters found on loaded extensions.</td></tr>'; tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters found.</td></tr>';
if (totalEl) totalEl.innerText = "0 Found"; if (totalEl) totalEl.innerText = "0 Found";
return; return;
} }
if (totalEl) totalEl.innerText = `${allChapters.length} Found`; if (totalEl) totalEl.innerText = `${allChapters.length} Found`;
setupProviderFilter();
setupReadButton(); setupReadButton();
chapterPagination.setTotalItems(filteredChapters.length); chapterPagination.setTotalItems(filteredChapters.length);
chapterPagination.reset();
renderChapterTable(); renderChapterTable();
} catch (err) { } catch (err) {
@@ -213,42 +284,42 @@ function setupProviderFilter() {
const select = document.getElementById('provider-filter'); const select = document.getElementById('provider-filter');
if (!select) return; if (!select) return;
const providers = [...new Set(allChapters.map(ch => ch.provider))];
if (providers.length === 0) return;
select.style.display = 'inline-block'; select.style.display = 'inline-block';
select.innerHTML = '<option value="all">All Providers</option>'; select.innerHTML = '';
providers.forEach(prov => { // Opción para cargar todo
const allOpt = document.createElement('option');
allOpt.value = 'all';
allOpt.innerText = 'Load All (Slower)';
select.appendChild(allOpt);
// NUEVO: Si es local, añadimos la opción 'local' al principio
if (isLocal) {
const localOpt = document.createElement('option');
localOpt.value = 'local';
localOpt.innerText = 'Local';
select.appendChild(localOpt);
}
// Añadir extensiones normales
availableExtensions.forEach(ext => {
const opt = document.createElement('option'); const opt = document.createElement('option');
opt.value = prov; opt.value = ext;
opt.innerText = prov; opt.innerText = ext.charAt(0).toUpperCase() + ext.slice(1);
select.appendChild(opt); select.appendChild(opt);
}); });
if (extensionName) { // Lógica de selección automática
const extensionProvider = providers.find( if (isLocal) {
p => p.toLowerCase() === extensionName.toLowerCase() select.value = 'local'; // Prioridad si es local
); } else if (extensionName && availableExtensions.includes(extensionName)) {
select.value = extensionName;
if (extensionProvider) { } else if (availableExtensions.length > 0) {
select.value = extensionProvider; select.value = availableExtensions[0];
filteredChapters = allChapters.filter(ch => ch.provider === extensionProvider);
}
} }
select.onchange = (e) => { select.onchange = () => {
const selected = e.target.value; loadChapters(select.value);
if (selected === 'all') {
filteredChapters = [...allChapters];
} else {
filteredChapters = allChapters.filter(ch => ch.provider === selected);
}
chapterPagination.reset();
chapterPagination.setTotalItems(filteredChapters.length);
renderChapterTable();
}; };
} }
@@ -303,7 +374,14 @@ function renderChapterTable() {
} }
function openReader(chapterId, provider) { function openReader(chapterId, provider) {
window.location.href = URLUtils.buildReadUrl(bookId, chapterId, provider, extensionName); const effectiveExtension = extensionName || 'anilist';
window.location.href = URLUtils.buildReadUrl(
bookId, // SIEMPRE anilist
chapterId, // número normal
provider, // 'local' o extensión
extensionName || 'anilist'
);
} }
function setupModalClickOutside() { function setupModalClickOutside() {

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

@@ -55,7 +55,8 @@ function startHeroCycle() {
async function updateHeroUI(book) { async function updateHeroUI(book) {
if(!book) return; if(!book) return;
book.entry_type =
book.format === 'MANGA' ? 'MANGA' : 'NOVEL';
const title = book.title.english || book.title.romaji; const title = book.title.english || book.title.romaji;
const desc = book.description || "No description available."; const desc = book.description || "No description available.";
const poster = (book.coverImage && (book.coverImage.extraLarge || book.coverImage.large)) || ''; const poster = (book.coverImage && (book.coverImage.extraLarge || book.coverImage.large)) || '';

48
desktop/src/scripts/books/reader.js
View File

@@ -129,11 +129,44 @@ async function loadChapter() {
if (!source) { if (!source) {
source = 'anilist'; source = 'anilist';
} }
const newEndpoint = `/api/book/${bookId}/${chapter}/${provider}?source=${source}`; let newEndpoint;
if (provider === 'local') {
newEndpoint = `/api/library/manga/${bookId}/units`;
} else {
newEndpoint = `/api/book/${bookId}/${chapter}/${provider}?source=${source}`;
}
try { try {
const res = await fetch(newEndpoint); const res = await fetch(newEndpoint);
const data = await res.json(); const data = await res.json();
if (provider === 'local') {
const unit = data.units[Number(chapter)];
if (!unit) {
reader.innerHTML = '<div class="loading-container"><span>Chapter not found</span></div>';
return;
}
if (unit.format === 'cbz') {
chapterLabel.textContent = unit.name; // ✅
document.title = unit.name;
const pagesRes = await fetch(
`/api/library/manga/cbz/${unit.id}/pages`
);
const pagesData = await pagesRes.json();
currentType = 'manga';
updateSettingsVisibility();
applyStyles();
currentPages = pagesData.pages.map(url => ({ url }));
reader.innerHTML = '';
loadManga(currentPages);
return;
}
}
if (data.title) { if (data.title) {
chapterLabel.textContent = data.title; chapterLabel.textContent = data.title;
@@ -172,8 +205,13 @@ async function loadChapter() {
reader.innerHTML = ''; reader.innerHTML = '';
if (data.type === 'manga') { if (data.type === 'manga') {
currentPages = data.pages || []; if (provider === 'local' && data.format === 'cbz') {
loadManga(currentPages); currentPages = data.pages.map(url => ({ url }));
loadManga(currentPages);
} else {
currentPages = data.pages || [];
loadManga(currentPages);
}
} else if (data.type === 'ln') { } else if (data.type === 'ln') {
loadLN(data.content); loadLN(data.content);
} }
@@ -293,7 +331,9 @@ function createImageElement(page, index) {
img.className = 'page-img'; img.className = 'page-img';
img.dataset.index = index; img.dataset.index = index;
const url = buildProxyUrl(page.url, page.headers); const url = provider === 'local'
? page.url
: buildProxyUrl(page.url, page.headers);
const placeholder = "/public/assets/placeholder.svg"; const placeholder = "/public/assets/placeholder.svg";
img.onerror = () => { img.onerror = () => {

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

@@ -1,5 +1,5 @@
const providerSelector = document.getElementById('provider-selector'); const providerSelector = document.getElementById('provider-selector');
const searchInput = document.getElementById('main-search-input'); const searchInput = document.getElementById('search-input');
const resultsContainer = document.getElementById('gallery-results'); const resultsContainer = document.getElementById('gallery-results');
let currentPage = 1; let currentPage = 1;
@@ -299,7 +299,7 @@ async function searchGallery(isLoadMore = false) {
const msg = favoritesMode const msg = favoritesMode
? (query ? 'No favorites found matching your search' : 'You don\'t have any favorite images yet') ? (query ? 'No favorites found matching your search' : 'You don\'t have any favorite images yet')
: 'No results found'; : 'No results found';
resultsContainer.innerHTML = `<p style="text-align:center;color:var(--text-secondary);padding:4rem;font-size:1.1rem;">${msg}</p>`; resultsContainer.innerHTML = `<p style="text-align:center;color:var(--color-text-secondary);padding:4rem;font-size:1.1rem;">${msg}</p>`;
} }
if (msnry) msnry.layout(); if (msnry) msnry.layout();

38
desktop/src/scripts/list.js
View File

@@ -29,20 +29,32 @@ async function populateSourceFilter() {
`; `;
try { try {
const response = await fetch(`${API_BASE}/extensions`); const [animeRes, bookRes] = await Promise.all([
if (response.ok) { fetch(`${API_BASE}/extensions/anime`),
const data = await response.json(); fetch(`${API_BASE}/extensions/book`)
const extensions = data.extensions || []; ]);
extensions.forEach(extName => { const extensions = new Set();
if (extName.toLowerCase() !== 'anilist' && extName.toLowerCase() !== 'local') {
const option = document.createElement('option'); if (animeRes.ok) {
option.value = extName; const data = await animeRes.json();
option.textContent = extName.charAt(0).toUpperCase() + extName.slice(1); (data.extensions || []).forEach(ext => extensions.add(ext));
select.appendChild(option);
}
});
} }
if (bookRes.ok) {
const data = await bookRes.json();
(data.extensions || []).forEach(ext => extensions.add(ext));
}
extensions.forEach(extName => {
const lower = extName.toLowerCase();
if (lower !== 'anilist' && lower !== 'local') {
const option = document.createElement('option');
option.value = extName;
option.textContent = extName.charAt(0).toUpperCase() + extName.slice(1);
select.appendChild(option);
}
});
} catch (error) { } catch (error) {
console.error('Error loading extensions:', error); console.error('Error loading extensions:', error);
} }
@@ -272,7 +284,7 @@ function createListItem(item) {
const itemLink = getEntryLink(item); const itemLink = getEntryLink(item);
const posterUrl = item.poster || '/public/assets/placeholder.png'; const posterUrl = item.poster || '/public/assets/placeholder.svg';
const progress = item.progress || 0; const progress = item.progress || 0;
const totalUnits = item.entry_type === 'ANIME' ? const totalUnits = item.entry_type === 'ANIME' ?

89
desktop/src/scripts/local-library-books.js Normal file
View File

@@ -0,0 +1,89 @@
let activeFilter = 'all';
let activeSort = 'az';
let isLocalMode = false;
let localEntries = [];
function toggleLibraryMode() {
isLocalMode = !isLocalMode;
const btn = document.getElementById('library-mode-btn');
const onlineContent = document.getElementById('online-content');
const localContent = document.getElementById('local-content');
if (isLocalMode) {
btn.classList.add('active');
onlineContent.classList.add('hidden');
localContent.classList.remove('hidden');
loadLocalEntries();
} else {
btn.classList.remove('active');
onlineContent.classList.remove('hidden');
localContent.classList.add('hidden');
}
}
async function loadLocalEntries() {
const grid = document.getElementById('local-entries-grid');
grid.innerHTML = '<div class="skeleton-card"></div>'.repeat(6);
try {
// Cambiado a endpoint de libros
const response = await fetch('/api/library/manga');
const entries = await response.json();
localEntries = entries;
if (entries.length === 0) {
grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: var(--color-text-secondary); padding: 3rem;">No books found in your local library.</p>';
return;
}
renderLocalEntries(entries);
} catch (err) {
grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: var(--color-danger); padding: 3rem;">Error loading local books.</p>';
}
}
function renderLocalEntries(entries) {
const grid = document.getElementById('local-entries-grid');
grid.innerHTML = entries.map(entry => {
const title = entry.metadata?.title?.romaji || entry.metadata?.title?.english || entry.id;
const cover = entry.metadata?.coverImage?.extraLarge || '/public/assets/placeholder.jpg';
const chapters = entry.metadata?.chapters || '??';
return `
<div class="local-card" onclick="viewLocalEntry(${entry.metadata?.id || 'null'})">
<div class="card-img-wrap">
<img src="${cover}" alt="${title}" loading="lazy">
</div>
<div class="local-card-info">
<div class="local-card-title">${title}</div>
<p style="font-size: 0.85rem; color: var(--color-text-secondary); margin: 0;">
${chapters} Chapters
</p>
<div class="match-status ${entry.matched ? 'status-linked' : 'status-unlinked'}">
${entry.matched ? '● Linked' : '○ Unlinked'}
</div>
</div>
</div>
`;
}).join('');
}
async function scanLocalLibrary() {
const btnText = document.getElementById('scan-text');
btnText.innerText = "Scanning...";
try {
// Asumiendo que el scan de libros usa este query param
const response = await fetch('/api/library/scan?mode=incremental', { method: 'POST' });
if (response.ok) {
await loadLocalEntries();
if (window.NotificationUtils) NotificationUtils.show('Library scanned!', 'success');
}
} catch (err) {
if (window.NotificationUtils) NotificationUtils.show('Scan failed', 'error');
} finally {
btnText.innerText = "Scan Library";
}
}
function viewLocalEntry(id) {
if (id) window.location.href = `/book/${id}`;
}

209
desktop/src/scripts/local-library.js Normal file
View File

@@ -0,0 +1,209 @@
let activeFilter = 'all';
let activeSort = 'az';
let isLocalMode = false;
let localEntries = [];
function toggleLibraryMode() {
isLocalMode = !isLocalMode;
const btn = document.getElementById('library-mode-btn');
const onlineContent = document.getElementById('online-content');
const localContent = document.getElementById('local-content');
const svg = btn.querySelector('svg');
const label = btn.querySelector('span');
if (isLocalMode) {
// LOCAL MODE
btn.classList.add('active');
onlineContent.classList.add('hidden');
localContent.classList.remove('hidden');
loadLocalEntries();
svg.innerHTML = `
<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"/>
`;
} else {
// ONLINE MODE
btn.classList.remove('active');
onlineContent.classList.remove('hidden');
localContent.classList.add('hidden');
svg.innerHTML = `
<circle cx="12" cy="12" r="10"/>
<line x1="2" y1="12" x2="22" y2="12"/>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
`;
}
}
async function loadLocalEntries() {
const grid = document.getElementById('local-entries-grid');
grid.innerHTML = '<div class="skeleton-card"></div>'.repeat(8);
try {
const response = await fetch('/api/library/anime');
const entries = await response.json();
localEntries = entries;
if (entries.length === 0) {
grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: var(--color-text-secondary); padding: 3rem;">No anime found in your local library. Click "Scan Library" to scan your folders.</p>';
return;
}
// Renderizar grid
grid.innerHTML = entries.map(entry => {
const title = entry.metadata?.title?.romaji || entry.metadata?.title?.english || entry.id;
const cover = entry.metadata?.coverImage?.extraLarge || entry.metadata?.coverImage?.large || '/public/assets/placeholder.jpg';
const score = entry.metadata?.averageScore || '--';
const episodes = entry.metadata?.episodes || '??';
return `
<div class="local-card" onclick="viewLocalEntry(${entry.metadata?.id || 'null'})">
<div class="card-img-wrap">
<img src="${cover}" alt="${title}" loading="lazy">
</div>
<div class="local-card-info">
<div class="local-card-title">${title}</div>
<p style="font-size: 0.85rem; color: var(--color-text-secondary); margin: 0;">
${score}% • ${episodes} Eps
</p>
<div class="match-status ${entry.matched ? 'status-linked' : 'status-unlinked'}">
${entry.matched ? '● Linked' : '○ Unlinked'}
</div>
</div>
</div>
`;
}).join('');
} catch (err) {
console.error('Error loading local entries:', err);
grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: var(--color-danger); padding: 3rem;">Error loading local library. Make sure the backend is running.</p>';
}
}
async function scanLocalLibrary() {
const btnText = document.getElementById('scan-text');
const originalText = btnText.innerText;
btnText.innerText = "Scanning...";
try {
const response = await fetch('/api/library/scan?mode=incremental', {
method: 'POST'
});
if (response.ok) {
await loadLocalEntries();
// Mostrar notificación de éxito si tienes sistema de notificaciones
if (window.NotificationUtils) {
NotificationUtils.show('Library scanned successfully!', 'success');
}
} else {
throw new Error('Scan failed');
}
} catch (err) {
console.error("Scan failed", err);
alert("Failed to scan library. Check console for details.");
// Mostrar notificación de error si tienes sistema de notificaciones
if (window.NotificationUtils) {
NotificationUtils.show('Failed to scan library', 'error');
}
} finally {
btnText.innerText = originalText;
}
}
function viewLocalEntry(anilistId) {
if (!anilistId) {
console.warn('Anime not linked');
return;
}
window.location.href = `/anime/${anilistId}`;
}
function renderLocalEntries(entries) {
const grid = document.getElementById('local-entries-grid');
grid.innerHTML = entries.map(entry => {
const title = entry.metadata?.title?.romaji
|| entry.metadata?.title?.english
|| entry.id;
const cover =
entry.metadata?.coverImage?.extraLarge
|| entry.metadata?.coverImage?.large
|| '/public/assets/placeholder.jpg';
const score = entry.metadata?.averageScore || '--';
const episodes = entry.metadata?.episodes || '??';
return `
<div class="local-card" onclick="viewLocalEntry(${entry.metadata?.id || 'null'})">
<div class="card-img-wrap">
<img src="${cover}" alt="${title}" loading="lazy">
</div>
<div class="local-card-info">
<div class="local-card-title">${title}</div>
<p style="font-size: 0.85rem; color: var(--color-text-secondary); margin: 0;">
${score}% • ${episodes} Eps
</p>
<div class="match-status ${entry.matched ? 'status-linked' : 'status-unlinked'}">
${entry.matched ? '● Linked' : '○ Unlinked'}
</div>
</div>
</div>
`;
}).join('');
}
function applyLocalFilters() {
let filtered = [...localEntries];
if (activeFilter === 'linked') {
filtered = filtered.filter(e => e.matched);
}
if (activeFilter === 'unlinked') {
filtered = filtered.filter(e => !e.matched);
}
if (activeSort === 'az') {
filtered.sort((a, b) =>
(a.metadata?.title?.romaji || a.id)
.localeCompare(b.metadata?.title?.romaji || b.id)
);
}
if (activeSort === 'za') {
filtered.sort((a, b) =>
(b.metadata?.title?.romaji || b.id)
.localeCompare(a.metadata?.title?.romaji || a.id)
);
}
renderLocalEntries(filtered);
}
document.addEventListener('click', e => {
const btn = e.target.closest('.filter-btn');
if (!btn) return;
if (btn.dataset.filter) {
activeFilter = btn.dataset.filter;
}
if (btn.dataset.sort) {
activeSort = btn.dataset.sort;
}
btn
.closest('.local-filters')
.querySelectorAll('.filter-btn')
.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
applyLocalFilters();
});

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

@@ -1,422 +1,262 @@
const GITEA_INSTANCE = 'https://git.waifuboard.app'; const ORIGINAL_MARKETPLACE_URL = 'https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/marketplace.json';
const REPO_OWNER = 'ItsSkaiya'; const MARKETPLACE_JSON_URL = `/api/proxy?url=${encodeURIComponent(ORIGINAL_MARKETPLACE_URL)}`;
const REPO_NAME = 'WaifuBoard-Extensions';
let DETECTED_BRANCH = 'main';
const API_URL_BASE = `${GITEA_INSTANCE}/api/v1/repos/${REPO_OWNER}/${REPO_NAME}/contents`;
const INSTALLED_EXTENSIONS_API = '/api/extensions'; const INSTALLED_EXTENSIONS_API = '/api/extensions';
const UPDATE_EXTENSIONS_API = '/api/extensions/update';
const extensionsGrid = document.getElementById('extensions-grid'); const marketplaceContent = document.getElementById('marketplace-content');
const filterSelect = document.getElementById('extension-filter'); const filterSelect = document.getElementById('extension-filter');
const updateAllBtn = document.getElementById('btn-update-all');
let allExtensionsData = []; const modal = document.getElementById('customModal');
const customModal = document.getElementById('customModal');
const modalTitle = document.getElementById('modalTitle'); const modalTitle = document.getElementById('modalTitle');
const modalMessage = document.getElementById('modalMessage'); const modalMessage = document.getElementById('modalMessage');
const modalConfirmBtn = document.getElementById('modalConfirmButton');
const modalCloseBtn = document.getElementById('modalCloseButton');
function getRawUrl(filename) { let marketplaceMetadata = {};
let installedExtensions = [];
let currentTab = 'marketplace';
const targetUrl = `${GITEA_INSTANCE}/${REPO_OWNER}/${REPO_NAME}/raw/branch/main/${filename}`; async function loadMarketplace() {
showSkeletons();
const encodedUrl = encodeURIComponent(targetUrl);
return `/api/proxy?url=${encodedUrl}`;
}
function updateExtensionState(fileName, installed) {
const ext = allExtensionsData.find(e => e.fileName === fileName);
if (!ext) return;
ext.isInstalled = installed;
ext.isLocal = installed && ext.isLocal;
filterAndRenderExtensions(filterSelect?.value || 'All');
}
function formatExtensionName(fileName) {
return fileName.replace('.js', '')
.replace(/([a-z])([A-Z])/g, '$1 $2')
.replace(/^[a-z]/, (char) => char.toUpperCase());
}
function getIconUrl(extensionDetails) {
return extensionDetails;
}
async function getExtensionDetails(url) {
try { try {
const res = await fetch(url); const [metaRes, installedRes] = await Promise.all([
if (!res.ok) throw new Error(`Fetch failed: ${res.status}`); fetch(MARKETPLACE_JSON_URL).then(res => res.json()),
const text = await res.text(); fetch(INSTALLED_EXTENSIONS_API).then(res => res.json())
]);
const regex = /(?:this\.|const\s+|let\s+|var\s+)?baseUrl\s*=\s*(["'`])(.*?)\1/i; marketplaceMetadata = metaRes.extensions;
const match = text.match(regex); installedExtensions = (installedRes.extensions || []).map(e => e.toLowerCase());
let finalHostname = null;
if (match && match[2]) { initTabs();
let rawUrl = match[2].trim(); renderGroupedView();
if (!rawUrl.startsWith('http')) rawUrl = 'https://' + rawUrl;
try { if (filterSelect) {
const urlObj = new URL(rawUrl); filterSelect.addEventListener('change', () => renderGroupedView());
finalHostname = urlObj.hostname;
} catch(e) {
console.warn(`Could not parse baseUrl: ${rawUrl}`);
}
} }
const classMatch = text.match(/class\s+(\w+)/); if (updateAllBtn) {
const name = classMatch ? classMatch[1] : null; updateAllBtn.onclick = handleUpdateAll;
}
let type = 'Image'; } catch (error) {
if (text.includes('type = "book-board"') || text.includes("type = 'book-board'")) type = 'Book'; console.error('Error loading marketplace:', error);
else if (text.includes('type = "anime-board"') || text.includes("type = 'anime-board'")) type = 'Anime'; marketplaceContent.innerHTML = `<div class="error-msg">Error al cargar el marketplace.</div>`;
return { baseUrl: finalHostname, name, type };
} catch (e) {
return { baseUrl: null, name: null, type: 'Unknown' };
} }
} }
function showCustomModal(title, message, isConfirm = false) { function initTabs() {
return new Promise(resolve => { const tabs = document.querySelectorAll('.tab-button');
tabs.forEach(tab => {
tab.onclick = () => {
tabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
currentTab = tab.dataset.tab;
modalTitle.textContent = title; if (updateAllBtn) {
modalMessage.textContent = message; if (currentTab === 'installed') {
updateAllBtn.classList.remove('hidden');
} else {
updateAllBtn.classList.add('hidden');
}
}
const currentConfirmButton = document.getElementById('modalConfirmButton'); renderGroupedView();
const currentCloseButton = document.getElementById('modalCloseButton');
const newConfirmButton = currentConfirmButton.cloneNode(true);
currentConfirmButton.parentNode.replaceChild(newConfirmButton, currentConfirmButton);
const newCloseButton = currentCloseButton.cloneNode(true);
currentCloseButton.parentNode.replaceChild(newCloseButton, currentCloseButton);
if (isConfirm) {
newConfirmButton.classList.remove('hidden');
newConfirmButton.textContent = 'Confirm';
newCloseButton.textContent = 'Cancel';
} else {
newConfirmButton.classList.add('hidden');
newCloseButton.textContent = 'Close';
}
const closeModal = (confirmed) => {
customModal.classList.add('hidden');
resolve(confirmed);
}; };
newConfirmButton.onclick = () => closeModal(true);
newCloseButton.onclick = () => closeModal(false);
customModal.classList.remove('hidden');
}); });
} }
function renderExtensionCard(extension, isInstalled, isLocalOnly = false) { async function handleUpdateAll() {
const originalText = updateAllBtn.innerText;
try {
updateAllBtn.disabled = true;
updateAllBtn.innerText = 'Updating...';
const extensionName = formatExtensionName(extension.fileName || extension.name); const res = await fetch(UPDATE_EXTENSIONS_API, { method: 'POST' });
const extensionType = extension.type || 'Unknown'; if (!res.ok) throw new Error('Update failed');
let iconUrl; const data = await res.json();
if (extension.baseUrl && extension.baseUrl !== 'Local Install') { if (data.updated && data.updated.length > 0) {
iconUrl = `https://www.google.com/s2/favicons?domain=${extension.baseUrl}&sz=128`; const list = data.updated.join(', ');
window.NotificationUtils.success(`Updated: ${list}`);
await loadMarketplace();
} else {
window.NotificationUtils.info('Everything is up to date.');
}
} catch (error) {
console.error('Update All Error:', error);
window.NotificationUtils.error('Failed to perform bulk update.');
} finally {
updateAllBtn.disabled = false;
updateAllBtn.innerText = originalText;
}
}
function renderGroupedView() {
marketplaceContent.innerHTML = '';
const activeFilter = filterSelect.value;
const groups = {};
let listToRender = [];
if (currentTab === 'marketplace') {
for (const [id, data] of Object.entries(marketplaceMetadata)) {
listToRender.push({
id,
...data,
isInstalled: installedExtensions.includes(id.toLowerCase())
});
}
} else { } else {
for (const [id, data] of Object.entries(marketplaceMetadata)) {
if (installedExtensions.includes(id.toLowerCase())) {
listToRender.push({ id, ...data, isInstalled: true });
}
}
const displayName = extensionName.replace(/\s/g, '+'); installedExtensions.forEach(id => {
iconUrl = `https://ui-avatars.com/api/?name=${displayName}&background=1f2937&color=fff&length=1`; const existsInMeta = Object.keys(marketplaceMetadata).some(k => k.toLowerCase() === id);
if (!existsInMeta) {
listToRender.push({
id: id,
name: id.charAt(0).toUpperCase() + id.slice(1),
type: 'Local',
author: 'Unknown',
isInstalled: true
});
}
});
} }
listToRender.forEach(ext => {
const type = ext.type || 'Other';
if (activeFilter !== 'All' && type !== activeFilter) return;
if (!groups[type]) groups[type] = [];
groups[type].push(ext);
});
const sortedTypes = Object.keys(groups).sort();
if (sortedTypes.length === 0) {
marketplaceContent.innerHTML = `<p class="empty-msg">No extensions found for this criteria.</p>`;
return;
}
sortedTypes.forEach(type => {
const section = document.createElement('div');
section.className = 'category-group';
const title = document.createElement('h2');
title.className = 'marketplace-section-title';
title.innerText = type.replace('-', ' ');
const grid = document.createElement('div');
grid.className = 'marketplace-grid';
groups[type].forEach(ext => grid.appendChild(createCard(ext)));
section.appendChild(title);
section.appendChild(grid);
marketplaceContent.appendChild(section);
});
}
function createCard(ext) {
const card = document.createElement('div'); const card = document.createElement('div');
card.className = `extension-card grid-item extension-type-${extensionType.toLowerCase()}`; card.className = `extension-card ${ext.nsfw ? 'nsfw-ext' : ''} ${ext.broken ? 'broken-ext' : ''}`;
card.dataset.path = extension.fileName || extension.name;
card.dataset.type = extensionType;
let buttonHtml; const iconUrl = `https://www.google.com/s2/favicons?domain=${ext.domain}&sz=128`;
let badgeHtml = '';
if (isInstalled) { let buttonHtml = '';
if (ext.isInstalled) {
if (isLocalOnly) { buttonHtml = `<button class="extension-action-button btn-uninstall">Uninstall</button>`;
badgeHtml = '<span class="extension-status-badge badge-local">Local</span>'; } else if (ext.broken) {
} else { buttonHtml = `<button class="extension-action-button" style="background: #4b5563; cursor: not-allowed;" disabled>Broken</button>`;
badgeHtml = '<span class="extension-status-badge badge-installed">Installed</span>';
}
buttonHtml = `
<button class="extension-action-button btn-uninstall" data-action="uninstall">Uninstall</button>
`;
} else { } else {
buttonHtml = `<button class="extension-action-button btn-install">Install</button>`;
buttonHtml = `
<button class="extension-action-button btn-install" data-action="install">Install</button>
`;
} }
card.innerHTML = ` card.innerHTML = `
<img class="extension-icon" src="${iconUrl}" alt="${extensionName} Icon" onerror="this.onerror=null; this.src='https://ui-avatars.com/api/?name=E&background=1f2937&color=fff&length=1'"> <img class="extension-icon" src="${iconUrl}" onerror="this.src='/public/assets/waifuboards.ico'">
<div class="card-content-wrapper"> <div class="card-content-wrapper">
<h3 class="extension-name" title="${extensionName}">${extensionName}</h3> <h3 class="extension-name">${ext.name}</h3>
${badgeHtml} <span class="extension-author">by ${ext.author || 'Unknown'}</span>
<p class="extension-description">${ext.description || 'No description available.'}</p>
<div class="extension-tags">
<span class="extension-status-badge badge-${ext.isInstalled ? 'installed' : (ext.broken ? 'local' : 'available')}">
${ext.isInstalled ? 'Installed' : (ext.broken ? 'Broken' : 'Available')}
</span>
${ext.nsfw ? '<span class="extension-status-badge badge-local">NSFW</span>' : ''}
</div>
</div> </div>
${buttonHtml} ${buttonHtml}
`; `;
const installButton = card.querySelector('[data-action="install"]'); const btn = card.querySelector('.extension-action-button');
const uninstallButton = card.querySelector('[data-action="uninstall"]'); if (!ext.broken || ext.isInstalled) {
btn.onclick = () => ext.isInstalled ? promptUninstall(ext) : handleInstall(ext);
if (installButton) {
installButton.addEventListener('click', async () => {
try {
const response = await fetch('/api/extensions/install', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ fileName: extension.fileName }),
});
const result = await response.json();
if (response.ok) {
updateExtensionState(extension.fileName, true);
await showCustomModal(
'Installation Successful',
`${extensionName} has been successfully installed.`,
false
);
} else {
await showCustomModal(
'Installation Failed',
`Installation failed: ${result.error || 'Unknown error.'}`,
false
);
}
} catch (error) {
await showCustomModal(
'Installation Failed',
`Network error during installation.`,
false
);
}
});
} }
if (uninstallButton) { return card;
uninstallButton.addEventListener('click', async () => {
const confirmed = await showCustomModal(
'Confirm Uninstallation',
`Are you sure you want to uninstall ${extensionName}?`,
true
);
if (!confirmed) return;
try {
const response = await fetch('/api/extensions/uninstall', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ fileName: extension.fileName }),
});
const result = await response.json();
if (response.ok) {
updateExtensionState(extension.fileName, false);
await showCustomModal(
'Uninstallation Successful',
`${extensionName} has been successfully uninstalled.`,
false
);
} else {
await showCustomModal(
'Uninstallation Failed',
`Uninstallation failed: ${result.error || 'Unknown error.'}`,
false
);
}
} catch (error) {
await showCustomModal(
'Uninstallation Failed',
`Network error during uninstallation.`,
false
);
}
});
}
extensionsGrid.appendChild(card);
} }
async function getInstalledExtensions() { function showModal(title, message, showConfirm = false, onConfirm = null) {
console.log(`Fetching installed extensions from: ${INSTALLED_EXTENSIONS_API}`); modalTitle.innerText = title;
modalMessage.innerText = message;
try { if (showConfirm) {
const response = await fetch(INSTALLED_EXTENSIONS_API); modalConfirmBtn.classList.remove('hidden');
modalConfirmBtn.onclick = () => { hideModal(); if (onConfirm) onConfirm(); };
if (!response.ok) {
console.error(`Error fetching installed extensions. Status: ${response.status}`);
return new Set();
}
const data = await response.json();
if (!data.extensions || !Array.isArray(data.extensions)) {
console.error("Invalid response format from /api/extensions: 'extensions' array missing or incorrect.");
return new Set();
}
const installedFileNames = data.extensions
.map(name => `${name.toLowerCase()}.js`);
return new Set(installedFileNames);
} catch (error) {
console.error('Network or JSON parsing error during fetch of installed extensions:', error);
return new Set();
}
}
function filterAndRenderExtensions(filterType) {
extensionsGrid.innerHTML = '';
if (!allExtensionsData || allExtensionsData.length === 0) {
console.log('No extension data to filter.');
return;
}
const filteredExtensions = allExtensionsData.filter(ext =>
filterType === 'All' || ext.type === filterType || (ext.isLocal && filterType === 'Local')
);
filteredExtensions.forEach(ext => {
renderExtensionCard(ext, ext.isInstalled, ext.isLocal);
});
if (filteredExtensions.length === 0) {
extensionsGrid.innerHTML = `<p style="grid-column: 1 / -1; text-align: center; color: var(--text-secondary);">No extensions found for the selected filter (${filterType}).</p>`;
}
}
async function loadMarketplace() {
extensionsGrid.innerHTML = '';
for (let i = 0; i < 6; i++) {
extensionsGrid.innerHTML += `
<div class="extension-card skeleton grid-item">
<div class="skeleton-icon skeleton" style="width: 50px; height: 50px;"></div>
<div class="card-content-wrapper">
<div class="skeleton-text title-skeleton skeleton" style="width: 80%; height: 1.1em;"></div>
<div class="skeleton-text text-skeleton skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
</div>
<div class="skeleton-button skeleton" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
</div>`;
}
try {
const [availableExtensionsRaw, installedExtensionsSet] = await Promise.all([
fetch(API_URL_BASE).then(res => {
if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
return res.json();
}),
getInstalledExtensions()
]);
const availableExtensionsJs = availableExtensionsRaw.filter(ext => ext.type === 'file' && ext.name.endsWith('.js'));
const detailPromises = [];
const marketplaceFileNames = new Set(availableExtensionsJs.map(ext => ext.name.toLowerCase()));
for (const ext of availableExtensionsJs) {
const downloadUrl = getRawUrl(ext.name);
const detailsPromise = getExtensionDetails(downloadUrl).then(details => ({
...ext,
...details,
fileName: ext.name,
isInstalled: installedExtensionsSet.has(ext.name.toLowerCase()),
isLocal: false,
}));
detailPromises.push(detailsPromise);
}
const extensionsWithDetails = await Promise.all(detailPromises);
installedExtensionsSet.forEach(installedName => {
if (!marketplaceFileNames.has(installedName)) {
const localExt = {
name: formatExtensionName(installedName),
fileName: installedName,
type: 'Local',
isInstalled: true,
isLocal: true,
baseUrl: 'Local Install',
};
extensionsWithDetails.push(localExt);
}
});
extensionsWithDetails.sort((a, b) => {
if (a.isInstalled !== b.isInstalled) {
return b.isInstalled - a.isInstalled;
}
const nameA = a.name || '';
const nameB = b.name || '';
return nameA.localeCompare(nameB);
});
allExtensionsData = extensionsWithDetails;
if (filterSelect) {
filterSelect.addEventListener('change', (event) => {
filterAndRenderExtensions(event.target.value);
});
}
filterAndRenderExtensions('All');
} catch (error) {
console.error('Error loading the marketplace:', error);
extensionsGrid.innerHTML = `
<div style="grid-column: 1 / -1; color: #dc2626; text-align: center; padding: 2rem; background: rgba(220,38,38,0.1); border-radius: 12px; margin-top: 1rem;">
🚨 Error loading extensions.
<p>Could not connect to the extension repository or local endpoint. Detail: ${error.message}</p>
</div>
`;
allExtensionsData = [];
}
}
customModal.addEventListener('click', (e) => {
if (e.target === customModal || e.target.tagName === 'BUTTON') {
customModal.classList.add('hidden');
}
});
document.addEventListener('DOMContentLoaded', loadMarketplace);
window.addEventListener('scroll', () => {
const navbar = document.getElementById('navbar');
if (window.scrollY > 0) {
navbar.classList.add('scrolled');
} else { } else {
navbar.classList.remove('scrolled'); modalConfirmBtn.classList.add('hidden');
} }
}); modalCloseBtn.onclick = hideModal;
modal.classList.remove('hidden');
}
function hideModal() { modal.classList.add('hidden'); }
async function handleInstall(ext) {
try {
const res = await fetch('/api/extensions/install', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ url: ext.entry })
});
if (res.ok) {
installedExtensions.push(ext.id.toLowerCase());
renderGroupedView();
window.NotificationUtils.success(`${ext.name} installed!`);
}
} catch (e) { window.NotificationUtils.error('Install failed.'); }
}
function promptUninstall(ext) {
showModal('Confirm', `Uninstall ${ext.name}?`, true, () => handleUninstall(ext));
}
async function handleUninstall(ext) {
try {
const res = await fetch('/api/extensions/uninstall', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ fileName: ext.id + '.js' })
});
if (res.ok) {
installedExtensions = installedExtensions.filter(id => id !== ext.id.toLowerCase());
renderGroupedView();
window.NotificationUtils.info(`${ext.name} uninstalled.`);
}
} catch (e) { window.NotificationUtils.error('Uninstall failed.'); }
}
function showSkeletons() {
marketplaceContent.innerHTML = `
<div class="marketplace-grid">
${Array(3).fill('<div class="extension-card skeleton"></div>').join('')}
</div>
`;
}
document.addEventListener('DOMContentLoaded', loadMarketplace);

218
desktop/src/scripts/settings.js Normal file
View File

@@ -0,0 +1,218 @@
const API_BASE = '/api/config';
let currentConfig = {};
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) {
console.error('Modal not found');
return;
}
if (forceClose) {
modal.classList.add('hidden');
} else {
const isHidden = modal.classList.contains('hidden');
if (isHidden) {
// Abrir modal
modal.classList.remove('hidden');
await loadSettings();
} else {
// Cerrar modal
modal.classList.add('hidden');
}
}
};
async function loadSettings() {
if (!formContent) {
console.error('Form content not found');
return;
}
// Mostrar loading
formContent.innerHTML = `
<div class="skeleton-loader">
<div class="skeleton title-skeleton"></div>
<div class="skeleton text-skeleton"></div>
<div class="skeleton text-skeleton"></div>
</div>
`;
try {
const res = await fetch(API_BASE);
if (!res.ok) {
throw new Error(`HTTP error! status: ${res.status}`);
}
const data = await res.json();
if (data.error) throw new Error(data.error);
currentConfig = data;
renderNav();
// Seleccionar la primera sección si no hay ninguna activa
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: var(--color-danger); margin-bottom: 1rem;">Failed to load settings</p>
<p style="color: var(--color-text-muted); font-size: 0.9rem;">${err.message}</p>
</div>
`;
}
}
function renderNav() {
if (!navContainer) return;
navContainer.innerHTML = '';
Object.keys(currentConfig).forEach(section => {
const btn = document.createElement('div');
btn.className = `nav-item ${section === activeSection ? 'active' : ''}`;
btn.textContent = section;
btn.onclick = () => switchSection(section);
navContainer.appendChild(btn);
});
}
function switchSection(section) {
if (!currentConfig[section]) return;
activeSection = section;
renderNav();
const sectionData = currentConfig[section];
formContent.innerHTML = `
<h2 class="section-title" style="margin-bottom: 2rem; text-transform: capitalize;">
${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 label = key.replace(/_/g, ' ');
if (isBool) {
group.innerHTML = `
<div style="display: flex; align-items: center; gap: 0.5rem;">
<input type="checkbox" id="${inputId}" name="${key}" ${value ? 'checked' : ''}>
<label for="${inputId}" style="margin: 0; cursor: pointer;">${label}</label>
</div>
`;
} else {
group.innerHTML = `
<label for="${inputId}">${label}</label>
<input class="config-input" id="${inputId}" name="${key}"
type="${typeof value === 'number' ? 'number' : 'text'}"
value="${value}">
`;
}
formContent.appendChild(group);
});
}
// Setup form submit handler
document.addEventListener('DOMContentLoaded', () => {
// Usar delegación de eventos ya que el form se carga dinámicamente
document.addEventListener('submit', async (e) => {
if (e.target.id === 'config-form') {
e.preventDefault();
await saveSettings();
}
});
});
async function saveSettings() {
if (!form || !activeSection) return;
const updatedData = {};
Object.keys(currentConfig[activeSection]).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_BASE}/${activeSection}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(updatedData)
});
if (res.ok) {
currentConfig[activeSection] = updatedData;
// Mostrar notificación de éxito
const notification = document.createElement('div');
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background: var(--color-success, #10b981);
color: white;
padding: 1rem 1.5rem;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
z-index: 10000;
animation: slideIn 0.3s ease-out;
`;
notification.textContent = 'Settings saved successfully!';
document.body.appendChild(notification);
setTimeout(() => {
notification.style.animation = 'slideOut 0.3s ease-out';
setTimeout(() => notification.remove(), 300);
}, 2000);
} else {
throw new Error('Failed to save settings');
}
} catch (err) {
console.error('Error saving settings:', err);
alert('Error saving settings: ' + err.message);
}
}
// Añadir estilos para las animaciones (solo si no existen)
if (!document.getElementById('settings-animations')) {
const animationStyles = document.createElement('style');
animationStyles.id = 'settings-animations';
animationStyles.textContent = `
@keyframes slideIn {
from { transform: translateX(400px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(400px); opacity: 0; }
}
`;
document.head.appendChild(animationStyles);
}

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

@@ -1,6 +1,6 @@
const Gitea_OWNER = "ItsSkaiya"; const Gitea_OWNER = "ItsSkaiya";
const Gitea_REPO = "WaifuBoard"; const Gitea_REPO = "WaifuBoard";
const CURRENT_VERSION = "v2.0.0-rc.1"; const CURRENT_VERSION = "v2.0.0-rc.2";
const UPDATE_CHECK_INTERVAL = 5 * 60 * 1000; const UPDATE_CHECK_INTERVAL = 5 * 60 * 1000;
let currentVersionDisplay; let currentVersionDisplay;

86
desktop/src/scripts/users.js
View File

@@ -694,30 +694,102 @@ window.handleDeleteConfirmation = function(userId) {
closeModal(); closeModal();
if (user.has_password) {
modalAniList.innerHTML = `
<div class="modal-overlay"></div>
<div class="modal-content" style="max-width:400px;">
<div class="modal-header">
<h2>Confirm Deletion</h2>
<button class="modal-close" onclick="closeModal()">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
<form id="deleteWithPasswordForm">
<p style="margin-bottom:1.25rem; color:var(--color-text-secondary)">
Enter your password to permanently delete
<b>${user.username}</b>
</p>
<div class="form-group">
<label for="deletePassword">Password</label>
<div class="password-toggle-wrapper">
<input
type="password"
id="deletePassword"
required
placeholder="Enter password"
autofocus
>
<button
type="button"
class="password-toggle-btn"
onclick="togglePasswordVisibility('deletePassword', this)"
>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<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>
</button>
</div>
</div>
<div class="modal-actions">
<button type="button" class="btn-secondary" onclick="closeModal()">
Cancel
</button>
<button type="submit" class="btn-disconnect">
Delete Profile
</button>
</div>
</form>
</div>
`;
modalAniList.classList.add('active');
document
.getElementById('deleteWithPasswordForm')
.addEventListener('submit', e => {
e.preventDefault();
const password = document.getElementById('deletePassword').value;
handleConfirmedDeleteUser(userId, password);
});
return;
}
showConfirmationModal( showConfirmationModal(
'Confirm Deletion', 'Confirm Deletion',
`Are you absolutely sure you want to delete profile ${user.username}? This action cannot be undone.`, `Are you absolutely sure you want to delete profile ${user.username}?`,
`handleConfirmedDeleteUser(${userId})` `handleConfirmedDeleteUser(${userId})`
); );
}; };
window.handleConfirmedDeleteUser = async function(userId) { window.handleConfirmedDeleteUser = async function(userId, password = null) {
closeModal(); closeModal();
showUserToast('Deleting user...', 'info');
try { try {
const res = await fetch(`${API_BASE}/users/${userId}`, { method: 'DELETE' }); const options = { method: 'DELETE' };
if (password) {
options.headers = { 'Content-Type': 'application/json' };
options.body = JSON.stringify({ password });
}
const res = await fetch(`${API_BASE}/users/${userId}`, options);
if (!res.ok) { if (!res.ok) {
const error = await res.json(); const error = await res.json();
throw new Error(error.error || 'Error deleting user'); throw new Error(error.error);
} }
await loadUsers(); await loadUsers();
showUserToast('User deleted successfully!', 'success'); showUserToast('User deleted successfully!', 'success');
} catch (err) { } catch (err) {
console.error(err); showUserToast(err.message || 'Error deleting user', 'error');
showUserToast('Error deleting user', 'error');
} }
}; };

32
desktop/src/scripts/utils/list-modal-manager.js
View File

@@ -83,7 +83,7 @@ const ListModalManager = {
document.getElementById('progress-label'); document.getElementById('progress-label');
if (this.isInList && this.currentEntry) { if (this.isInList && this.currentEntry) {
document.getElementById('entry-status').value = this.currentEntry.status || 'PLANNING'; document.getElementById('entry-status').value = this.normalizeStatus(this.currentEntry.status);
document.getElementById('entry-progress').value = this.currentEntry.progress || 0; document.getElementById('entry-progress').value = this.currentEntry.progress || 0;
document.getElementById('entry-score').value = this.currentEntry.score || ''; document.getElementById('entry-score').value = this.currentEntry.score || '';
document.getElementById('entry-start-date').value = this.currentEntry.start_date?.split('T')[0] || ''; document.getElementById('entry-start-date').value = this.currentEntry.start_date?.split('T')[0] || '';
@@ -131,6 +131,12 @@ const ListModalManager = {
document.getElementById('add-list-modal').classList.add('active'); document.getElementById('add-list-modal').classList.add('active');
}, },
normalizeStatus(status) {
if (!status) return 'PLANNING';
if (status === 'WATCHING' || status === 'READING') return 'CURRENT';
return status;
},
close() { close() {
document.getElementById('add-list-modal').classList.remove('active'); document.getElementById('add-list-modal').classList.remove('active');
}, },
@@ -212,15 +218,21 @@ const ListModalManager = {
} }
}; };
document.addEventListener('DOMContentLoaded', () => { 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'); const modal = document.getElementById('add-list-modal');
if (modal) { modal.addEventListener('click', (e) => {
modal.addEventListener('click', (e) => { if (e.target.id === 'add-list-modal') {
if (e.target.id === 'add-list-modal') { ListModalManager.close();
ListModalManager.close(); }
} });
}); }
}
}); document.addEventListener('DOMContentLoaded', loadListModal);
window.ListModalManager = ListModalManager; window.ListModalManager = ListModalManager;

71
desktop/src/shared/config.js Normal file
View File

@@ -0,0 +1,71 @@
import fs from 'fs';
import path from 'path';
import os from 'os';
import yaml from 'js-yaml';
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
}
};
function ensureConfigFile() {
if (!fs.existsSync(BASE_DIR)) {
fs.mkdirSync(BASE_DIR, { recursive: true });
}
if (!fs.existsSync(CONFIG_PATH)) {
fs.writeFileSync(
CONFIG_PATH,
yaml.dump(DEFAULT_CONFIG),
'utf8'
);
}
}
export function getConfig() {
ensureConfigFile();
const raw = fs.readFileSync(CONFIG_PATH, 'utf8');
return yaml.load(raw) || DEFAULT_CONFIG;
}
export function setConfig(partialConfig) {
ensureConfigFile();
const current = getConfig();
const next = deepMerge(current, partialConfig);
fs.writeFileSync(
CONFIG_PATH,
yaml.dump(next),
'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,
};

10
desktop/src/shared/database.js
View File

@@ -2,7 +2,7 @@ const sqlite3 = require('sqlite3').verbose();
const os = require("os"); const os = require("os");
const path = require("path"); const path = require("path");
const fs = require("fs"); const fs = require("fs");
const {ensureUserDataDB, ensureAnilistSchema, ensureExtensionsTable, ensureCacheTable, ensureFavoritesDB} = require('./schemas'); const {ensureUserDataDB, ensureAnilistSchema, ensureExtensionsTable, ensureCacheTable, ensureFavoritesDB, ensureLocalLibrarySchema } = require('./schemas');
const databases = new Map(); const databases = new Map();
@@ -10,7 +10,8 @@ const DEFAULT_PATHS = {
anilist: path.join(os.homedir(), "WaifuBoards", 'anilist_anime.db'), anilist: path.join(os.homedir(), "WaifuBoards", 'anilist_anime.db'),
favorites: path.join(os.homedir(), "WaifuBoards", "favorites.db"), favorites: path.join(os.homedir(), "WaifuBoards", "favorites.db"),
cache: path.join(os.homedir(), "WaifuBoards", "cache.db"), cache: path.join(os.homedir(), "WaifuBoards", "cache.db"),
userdata: path.join(os.homedir(), "WaifuBoards", "user_data.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) { function initDatabase(name = 'anilist', dbPath = null, readOnly = false) {
@@ -49,6 +50,11 @@ function initDatabase(name = 'anilist', dbPath = null, readOnly = false) {
databases.set(name, db); databases.set(name, db);
if (name === "local_library") {
ensureLocalLibrarySchema(db)
.catch(err => console.error("Error creating local library schema:", err));
}
if (name === "anilist") { if (name === "anilist") {
ensureAnilistSchema(db) ensureAnilistSchema(db)
.then(() => ensureExtensionsTable(db)) .then(() => ensureExtensionsTable(db))

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

@@ -46,7 +46,6 @@ async function loadExtensions() {
} }
} }
async function loadExtension(fileName) { async function loadExtension(fileName) {
const homeDir = os.homedir(); const homeDir = os.homedir();
const extensionsDir = path.join(homeDir, 'WaifuBoards', 'extensions'); const extensionsDir = path.join(homeDir, 'WaifuBoards', 'extensions');
@@ -77,6 +76,7 @@ async function loadExtension(fileName) {
} }
const name = instance.constructor.name; const name = instance.constructor.name;
instance.__fileName = fileName;
instance.scrape = scrape; instance.scrape = scrape;
instance.cheerio = cheerio; instance.cheerio = cheerio;
extensions.set(name, instance); extensions.set(name, instance);
@@ -114,6 +114,14 @@ async function saveExtensionFile(fileName, downloadUrl) {
file.on('finish', async () => { file.on('finish', async () => {
file.close(async () => { file.close(async () => {
try { try {
const extName = fileName.replace('.js', '');
for (const key of extensions.keys()) {
if (key.toLowerCase() === extName.toLowerCase()) {
extensions.delete(key);
break;
}
}
await loadExtension(fileName); await loadExtension(fileName);
resolve(); resolve();
} catch (err) { } catch (err) {

51
desktop/src/shared/schemas.js
View File

@@ -2,6 +2,54 @@ const sqlite3 = require('sqlite3').verbose();
const path = require("path"); const path = require("path");
const fs = require("fs"); 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) { async function ensureUserDataDB(dbPath) {
const dir = path.dirname(dbPath); const dir = path.dirname(dbPath);
@@ -230,5 +278,6 @@ module.exports = {
ensureAnilistSchema, ensureAnilistSchema,
ensureExtensionsTable, ensureExtensionsTable,
ensureCacheTable, ensureCacheTable,
ensureFavoritesDB ensureFavoritesDB,
ensureLocalLibrarySchema
}; };

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

@@ -2,80 +2,144 @@ import { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify';
import * as fs from 'fs'; import * as fs from 'fs';
import * as path from 'path'; import * as path from 'path';
let cachedNavbar: string | null = null;
function getNavbarHTML(activePage: string, showSearch: boolean = true): string {
if (!cachedNavbar) {
const navbarPath = path.join(__dirname, '..', '..', 'views', 'components', 'navbar.html');
cachedNavbar = fs.readFileSync(navbarPath, 'utf-8');
}
let navbar = cachedNavbar;
const pages = ['anime', 'books', 'gallery', 'schedule', 'my-list', 'marketplace'];
pages.forEach(page => {
const regex = new RegExp(`(<button class="nav-button[^"]*)"\\s+data-page="${page}"`, 'g');
if (page === activePage) {
navbar = navbar.replace(regex, `$1 active" data-page="${page}"`);
}
});
if (!showSearch) {
navbar = navbar.replace(
'<div class="search-wrapper">',
'<div class="search-wrapper" style="visibility: hidden;">'
);
}
return navbar;
}
function injectNavbar(htmlContent: string, activePage: string, showSearch: boolean = true): string {
const navbar = getNavbarHTML(activePage, showSearch);
return htmlContent.replace(/<body[^>]*>/, `$&\n${navbar}`);
}
async function viewsRoutes(fastify: FastifyInstance) { async function viewsRoutes(fastify: FastifyInstance) {
fastify.get('/', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'users.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'users.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
reply.type('text/html').send(html);
}); });
fastify.get('/anime', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/anime', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime', 'animes.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'animes.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
const htmlWithNavbar = injectNavbar(html, 'anime', true);
reply.type('text/html').send(htmlWithNavbar);
}); });
fastify.get('/my-list', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/my-list', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'list.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'list.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
const htmlWithNavbar = injectNavbar(html, 'my-list', false);
reply.type('text/html').send(htmlWithNavbar);
}); });
fastify.get('/books', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/books', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'books.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'books.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
const htmlWithNavbar = injectNavbar(html, 'books', true);
reply.type('text/html').send(htmlWithNavbar);
}); });
fastify.get('/schedule', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/schedule', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'schedule.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'schedule.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
const htmlWithNavbar = injectNavbar(html, 'schedule', false);
reply.type('text/html').send(htmlWithNavbar);
}); });
fastify.get('/gallery', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/gallery', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'gallery', 'gallery.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'gallery', 'gallery.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
const htmlWithNavbar = injectNavbar(html, 'gallery', true);
reply.type('text/html').send(htmlWithNavbar);
}); });
fastify.get('/marketplace', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/marketplace', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'marketplace.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'marketplace.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
const htmlWithNavbar = injectNavbar(html, 'marketplace', false);
reply.type('text/html').send(htmlWithNavbar);
}); });
fastify.get('/gallery/:extension/*', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/gallery/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
const htmlWithNavbar = injectNavbar(html, 'gallery', true);
reply.type('text/html').send(htmlWithNavbar);
}); });
fastify.get('/gallery/favorites/*', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/gallery/favorites/*', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
const htmlWithNavbar = injectNavbar(html, 'gallery', true);
reply.type('text/html').send(htmlWithNavbar);
}); });
fastify.get('/anime/:id', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/anime/:id', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
reply.type('text/html').send(html);
}); });
fastify.get('/anime/:extension/*', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/anime/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
reply.type('text/html').send(html);
}); });
fastify.get('/watch/:id/:episode', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/watch/:id/:episode', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime', 'watch.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'watch.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
reply.type('text/html').send(html);
}); });
fastify.get('/book/:id', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/book/:id', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'book.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
reply.type('text/html').send(html);
}); });
fastify.get('/book/:extension/*', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/book/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'book.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
reply.type('text/html').send(html);
}); });
fastify.get('/read/:provider/:chapter/*', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/read/:provider/:chapter/*', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'read.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'read.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
reply.type('text/html').send(html);
});
fastify.setNotFoundHandler((req, reply) => {
const htmlPath = path.join(__dirname, '..', '..', 'views', '404.html');
const html = fs.readFileSync(htmlPath, 'utf-8');
reply.code(404).type('text/html').send(html);
}); });
} }

139
desktop/views/404.html Normal file
View File

@@ -0,0 +1,139 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 - WaifuBoard</title>
<link rel="stylesheet" href="/views/css/globals.css">
<link rel="stylesheet" href="/views/css/components/navbar.css">
<link rel="stylesheet" href="/views/css/components/titlebar.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<script src="/src/scripts/titlebar.js"></script>
<style>
.error-container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--spacing-2xl);
background: var(--color-bg-base);
}
.error-code {
font-size: 6rem;
font-weight: 900;
margin: 0;
color: var(--color-primary);
}
.error-message {
font-size: 1.1rem;
color: var(--color-text-secondary);
margin: var(--spacing-md) 0 var(--spacing-xl);
max-width: 420px;
}
.error-actions {
display: flex;
gap: var(--spacing-md);
justify-content: center;
}
</style>
</head>
<body>
<div id="titlebar">
<div class="title-left">
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
<span class="app-title">WaifuBoard</span>
</div>
<div class="title-right">
<button class="min">−</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<nav class="navbar" id="navbar">
<a href="#" class="nav-brand">
<div class="brand-icon">
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
</div>
WaifuBoard
</a>
<div class="nav-center">
<button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
<button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
<button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
<button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
<button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
</div>
<div class="nav-right">
<div class="search-wrapper" style="visibility: hidden;">
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<circle cx="11" cy="11" r="8"/>
<path d="M21 21l-4.35-4.35"/>
</svg>
<input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
<div class="search-results" id="search-results"></div>
</div>
<div class="nav-user" id="nav-user" style="display:none;">
<div class="user-avatar-btn">
<img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
<div class="online-indicator"></div>
</div>
<div class="nav-dropdown" id="nav-dropdown">
<div class="dropdown-header">
<img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
<div class="dropdown-user-info">
<div class="dropdown-username" id="nav-username"></div>
</div>
</div>
<a href="/my-list" class="dropdown-item">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
<polyline points="17 21 17 13 7 13 7 21"/>
<polyline points="7 3 7 8 15 8"/>
</svg>
<span>My List</span>
</a>
<button class="dropdown-item logout-item" id="nav-logout">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
<polyline points="16 17 21 12 16 7"/>
<line x1="21" y1="12" x2="9" y2="12"/>
</svg>
<span>Logout</span>
</button>
</div>
</div>
</div>
</nav>
<main class="error-container">
<div>
<h1 class="error-code">404</h1>
<p class="error-message">
This page doesn’t exist.
</p>
<div class="error-actions">
<button class="btn-primary" onclick="location.href='/'">Home</button>
<button class="btn-blur" onclick="history.back()">Back</button>
</div>
</div>
</main>
<script src="/src/scripts/utils/auth-utils.js"></script>
</body>
</html>

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

@@ -34,75 +34,6 @@
</div> </div>
</div> </div>
<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="WATCHING">Watching</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>
<a href="/anime" class="back-btn"> <a href="/anime" class="back-btn">
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg> <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
Back to Home Back to Home
@@ -158,6 +89,7 @@
<div class="meta-row"> <div class="meta-row">
<div class="pill extension-pill" id="extension-pill" style="display: none; background: #8b5cf6;"></div> <div class="pill extension-pill" id="extension-pill" style="display: none; background: #8b5cf6;"></div>
<div class="pill" id="local-pill" style="display: none; background: #8b5cf6;"></div>
<div class="pill score" id="score">--% Score</div> <div class="pill score" id="score">--% Score</div>
<div class="pill" id="year">----</div> <div class="pill" id="year">----</div>
<div class="pill" id="genres">Action</div> <div class="pill" id="genres">Action</div>

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

@@ -9,84 +9,24 @@
<link rel="stylesheet" href="/views/css/components/hero.css"> <link rel="stylesheet" href="/views/css/components/hero.css">
<link rel="stylesheet" href="/views/css/components/anilist-modal.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/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/titlebar.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon"> <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<script src="/src/scripts/titlebar.js"></script> <script src="/src/scripts/titlebar.js"></script>
</head> </head>
<body > <body>
<div id="titlebar"><div class="title-left"> <div id="titlebar">
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/> <div class="title-left">
<span class="app-title">WaifuBoard</span> <img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
</div> <span class="app-title">WaifuBoard</span>
</div>
<div class="title-right"> <div class="title-right">
<button class="min">—</button> <button class="min">−</button>
<button class="max">🗖</button> <button class="max">🗖</button>
<button class="close">✕</button> <button class="close">✕</button>
</div> </div>
</div> </div>
<nav class="navbar" id="navbar">
<a href="#" class="nav-brand">
<div class="brand-icon">
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
</div>
WaifuBoard
</a>
<div class="nav-center">
<button class="nav-button active">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">
<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>
<div class="hero-wrapper"> <div class="hero-wrapper">
<div class="hero-background"> <div class="hero-background">
<img id="hero-bg-media" alt=""> <img id="hero-bg-media" alt="">
@@ -121,77 +61,17 @@
</div> </div>
</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> </div>
<div class="modal-overlay" id="add-list-modal"> <!-- Online Mode Content -->
<div class="modal-content modal-list"> <main id="online-content">
<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="WATCHING">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>
<main>
<section class="section"> <section class="section">
<div class="section-header"> <div class="section-header">
<div class="section-title">Continue watching</div> <div class="section-title">Continue watching</div>
@@ -208,13 +88,11 @@
</div> </div>
</section> </section>
<section class="section"> <section class="section">
<div class="section-header"><div class="section-title">Trending This Season</div></div> <div class="section-header"><div class="section-title">Trending This Season</div></div>
<div class="carousel-wrapper"> <div class="carousel-wrapper">
<button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button> <button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button>
<div class="carousel" id="trending"> <div class="carousel" id="trending">
<div class="card"><div class="card-img-wrap skeleton"></div></div> <div class="card"><div class="card-img-wrap skeleton"></div></div>
<div class="card"><div class="card-img-wrap skeleton"></div></div> <div class="card"><div class="card-img-wrap skeleton"></div></div>
<div class="card"><div class="card-img-wrap skeleton"></div></div> <div class="card"><div class="card-img-wrap skeleton"></div></div>
@@ -224,7 +102,6 @@
</div> </div>
</section> </section>
<section class="section"> <section class="section">
<div class="section-header"><div class="section-title">Top Airing Now</div></div> <div class="section-header"><div class="section-title">Top Airing Now</div></div>
<div class="carousel-wrapper"> <div class="carousel-wrapper">
@@ -240,14 +117,49 @@
</section> </section>
</main> </main>
<!-- Local Library Mode Content -->
<main id="local-content" class="hidden">
<section class="section">
<div class="section-header">
<div class="section-title">Local Anime Library</div>
<button class="btn-secondary" onclick="scanLocalLibrary()">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M21 12a9 9 0 1 1-9-9"/>
<path d="M21 3v6h-6"/>
</svg>
<span id="scan-text">Scan Library</span>
</button>
</div>
<div class="local-filters">
<div class="filter-group">
<button class="filter-btn active" data-filter="all">All</button>
<button class="filter-btn" data-filter="watching">Watching</button>
<button class="filter-btn" data-filter="completed">Completed</button>
<button class="filter-btn" data-filter="unwatched">Unwatched</button>
<button class="filter-btn" data-filter="unlinked">Unlinked</button>
</div>
<div class="filter-group">
<button class="filter-btn" data-sort="az">A–Z</button>
<button class="filter-btn" data-sort="recent">Recent</button>
</div>
</div>
<div class="local-library-grid" id="local-entries-grid">
<div class="skeleton-card"></div>
<div class="skeleton-card"></div>
<div class="skeleton-card"></div>
<div class="skeleton-card"></div>
<div class="skeleton-card"></div>
<div class="skeleton-card"></div>
<div class="skeleton-card"></div>
<div class="skeleton-card"></div>
</div>
</section>
</main>
<div id="updateToast" class="hidden"> <div id="updateToast" class="hidden">
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p> <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
<a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">
<a
id="downloadButton"
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
target="_blank"
>
Click To Download Click To Download
</a> </a>
</div> </div>
@@ -258,8 +170,10 @@
<script src="/src/scripts/utils/continue-watching-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/utils/youtube-player-utils.js"></script>
<script src="/src/scripts/anime/animes.js"></script> <script src="/src/scripts/anime/animes.js"></script>
<script src="/src/scripts/local-library.js"></script>
<script src="/src/scripts/updateNotifier.js"></script> <script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/rpc-inapp.js"></script> <script src="/src/scripts/rpc-inapp.js"></script>
<script src="/src/scripts/auth-guard.js"></script> <script src="/src/scripts/auth-guard.js"></script>
<script src="/src/scripts/settings.js"></script>
</body> </body>
</html> </html>

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

@@ -25,72 +25,6 @@
</div> </div>
</div> </div>
<div class="modal-overlay" id="add-list-modal">
<div class="modal-content">
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
<h2 class="modal-title" id="modal-title">Add to Library</h2>
<div class="modal-body">
<div class="modal-fields-grid">
<div class="form-group">
<label for="entry-status">Status</label>
<select id="entry-status" class="form-input">
<option value="CURRENT">Reading</option>
<option value="COMPLETED">Completed</option>
<option value="PLANNING">Plan to Read</option>
<option value="PAUSED">Paused</option>
<option value="DROPPED">Dropped</option>
<option value="REPEATING">Rereading</option>
</select>
</div>
<div class="form-group">
<label for="entry-progress" id="progress-label">Chapters Read</label>
<input type="number" id="entry-progress" class="form-input" min="0" max="0" placeholder="0">
</div>
<div class="form-group">
<label for="entry-score">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 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 class="form-group">
<label for="entry-repeat-count">Re-read 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>
<a href="/books" class="back-btn"> <a href="/books" class="back-btn">
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg> <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
Back to Books Back to Books
@@ -140,6 +74,7 @@
<div class="meta-row"> <div class="meta-row">
<div class="pill extension-pill" id="extension-pill" style="display: none; background: #8b5cf6;"></div> <div class="pill extension-pill" id="extension-pill" style="display: none; background: #8b5cf6;"></div>
<div class="pill" id="local-pill" style="display: none; background: #8b5cf6;"></div>
<div class="pill score" id="score">--% Score</div> <div class="pill score" id="score">--% Score</div>
<div class="pill" id="genres">Action</div> <div class="pill" id="genres">Action</div>
</div> </div>

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

@@ -12,6 +12,7 @@
<link rel="stylesheet" href="/views/css/components/updateNotifier.css"> <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon"> <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<script src="/src/scripts/titlebar.js"></script> <script src="/src/scripts/titlebar.js"></script>
<link rel="stylesheet" href="/views/css/components/local-library.css">
</head> </head>
<body> <body>
<div id="titlebar"> <div class="title-left"> <div id="titlebar"> <div class="title-left">
@@ -25,66 +26,6 @@
</div> </div>
</div> </div>
<nav class="navbar" id="navbar">
<a href="#" class="nav-brand">
<div class="brand-icon">
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
</div>
WaifuBoard
</a>
<div class="nav-center">
<button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
<button class="nav-button active">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">
<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 books..." 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>
<div class="hero-wrapper"> <div class="hero-wrapper">
<div class="hero-background"> <div class="hero-background">
<img id="hero-bg-media" src="" alt=""> <img id="hero-bg-media" src="" alt="">
@@ -109,75 +50,40 @@
</div> </div>
</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> </div>
<main id="local-content" class="hidden">
<div class="modal-overlay" id="add-list-modal"> <section class="section">
<div class="modal-content modal-list"> <div class="section-header">
<button class="modal-close" onclick="closeAddToListModal()">✕</button> <div class="section-title">Local Books Library</div>
<h2 class="modal-title" id="modal-title">Add to Library</h2> <button class="btn-secondary" onclick="scanLocalLibrary()">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<div class="modal-body"> <path d="M21 12a9 9 0 1 1-9-9"/><path d="M21 3v6h-6"/>
<div class="modal-fields-grid"> </svg>
<span id="scan-text">Scan Library</span>
<div class="form-group"> </button>
<label for="entry-status">Status</label> </div>
<select id="entry-status" class="form-input"> <div class="local-filters">
<option value="CURRENT">Reading</option> <div class="filter-group">
<option value="COMPLETED">Completed</option> <button class="filter-btn active" data-filter="all">All</button>
<option value="PLANNING">Plan to Read</option> <button class="filter-btn" data-filter="unlinked">Unlinked</button>
<option value="PAUSED">Paused</option> </div>
<option value="DROPPED">Dropped</option> <div class="filter-group">
<option value="REPEATING">Rereading</option> <button class="filter-btn" data-sort="az">A–Z</button>
</select>
</div>
<div class="form-group">
<label for="entry-progress" id="progress-label">Chapters Read</label>
<input type="number" id="entry-progress" class="form-input" min="0" max="0" placeholder="0">
</div>
<div class="form-group">
<label for="entry-score">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 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 class="form-group">
<label for="entry-repeat-count">Re-read 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> </div>
<div class="local-library-grid" id="local-entries-grid">
<div class="modal-actions"> <div class="skeleton-card"></div>
<button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button> <div class="skeleton-card"></div>
<button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
<button class="btn-primary" onclick="saveToList()">Save Changes</button>
</div> </div>
</div> </section>
</div> </main>
<main> <main id="online-content">
<section class="section"> <section class="section">
<div class="section-header"> <div class="section-header">
<div class="section-title">Continue Reading</div> <div class="section-title">Continue Reading</div>
@@ -226,7 +132,7 @@
<script src="/src/scripts/utils/list-modal-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/continue-watching-manager.js"></script>
<script src="/src/scripts/books/books.js"></script> <script src="/src/scripts/books/books.js"></script>
<script src="/src/scripts/local-library-books.js"></script>
<script src="/src/scripts/updateNotifier.js"></script> <script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/rpc-inapp.js"></script> <script src="/src/scripts/rpc-inapp.js"></script>
<script src="/src/scripts/auth-guard.js"></script> <script src="/src/scripts/auth-guard.js"></script>

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

@@ -0,0 +1,66 @@
<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>

69
desktop/views/components/navbar.html Normal file
View File

@@ -0,0 +1,69 @@
<nav class="navbar" id="navbar">
<a href="#" class="nav-brand">
<div class="brand-icon">
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
</div>
WaifuBoard
</a>
<div class="nav-center">
<button class="nav-button" data-page="anime" onclick="window.location.href='/anime'">Anime</button>
<button class="nav-button" data-page="books" onclick="window.location.href='/books'">Books</button>
<button class="nav-button" data-page="gallery" onclick="window.location.href='/gallery'">Gallery</button>
<button class="nav-button" data-page="schedule" onclick="window.location.href='/schedule'">Schedule</button>
<button class="nav-button" data-page="my-list" onclick="window.location.href='/my-list'">My List</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>
<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>
<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>

278
desktop/views/components/settings-modal.html Normal file
View File

@@ -0,0 +1,278 @@
<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>
/* --- AMOLED THEME VARIABLES --- */
:root {
--amoled-black: #000000;
--amoled-surface: #080808;
--amoled-field: #0e0e0e;
--amoled-border: rgba(255, 255, 255, 0.08);
--accent-purple: #8b5cf6;
--accent-glow: rgba(139, 92, 246, 0.15);
--text-main: #ffffff;
--text-dim: #a1a1aa;
}
/* --- MODAL BASE --- */
.modal {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.modal.hidden { display: none !important; }
.modal-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(12px);
z-index: -1;
}
.modal-content {
position: relative;
display: flex;
flex-direction: row; /* Horizontal layout */
width: 95%;
max-width: 1200px; /* Increased size */
height: 85vh;
background: var(--amoled-black);
border: var(--amoled-border);
border-radius: 28px;
overflow: hidden;
box-shadow: 0 0 0 1px var(--amoled-border), 0 24px 60px rgba(0,0,0,0.8);
animation: modalScaleUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* --- SIDEBAR --- */
.modal-sidebar {
width: 280px;
background: var(--amoled-surface);
border-right: var(--amoled-border);
display: flex;
flex-direction: column;
padding: 2rem;
flex-shrink: 0;
}
.sidebar-title {
font-size: 1.4rem;
font-weight: 800;
margin-bottom: 2.5rem;
color: var(--text-main);
letter-spacing: -0.02em;
}
.nav-list { flex: 1; }
.nav-item {
padding: 12px 16px;
border-radius: 14px;
cursor: pointer;
color: var(--text-dim);
transition: all 0.2s ease;
margin-bottom: 6px;
font-weight: 500;
display: flex;
align-items: center;
gap: 12px;
text-transform: capitalize;
}
.nav-item:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--text-main);
}
.nav-item.active {
background: var(--accent-glow);
color: var(--accent-purple);
box-shadow: inset 3px 0 0 var(--accent-purple);
}
/* --- MAIN CONTENT & DYNAMIC INPUTS --- */
.modal-main {
flex: 1;
display: flex;
flex-direction: column;
background: var(--amoled-black);
min-width: 0;
}
.config-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.section-container {
flex: 1;
padding: 3.5rem;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #222 transparent;
}
/* Styles for the injected section content */
.config-group {
margin-bottom: 2.5rem;
animation: fadeInSection 0.4s ease-out;
}
.config-group label {
display: block;
font-size: 0.75rem;
color: var(--accent-purple);
margin-bottom: 0.8rem;
letter-spacing: 0.05em;
font-weight: 800;
text-transform: uppercase;
}
.config-input {
width: 100%;
padding: 1rem 1.2rem;
background: var(--amoled-field);
border: 1px solid #1a1a1a;
border-radius: 14px;
color: #fff;
font-size: 1rem;
transition: all 0.25s ease;
}
.config-input:focus {
outline: none;
border-color: var(--accent-purple);
background: #121212;
box-shadow: 0 0 0 4px var(--accent-glow);
}
/* --- FOOTER --- */
.modal-footer-sticky {
padding: 1.5rem 3.5rem;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
border-top: var(--amoled-border);
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-hint {
font-size: 0.85rem;
color: var(--text-dim);
}
/* --- BUTTONS --- */
.btn-primary {
padding: 0.8rem 2.2rem;
background: #ffffff;
color: #000000;
border: none;
border-radius: 100px;
font-weight: 700;
cursor: pointer;
transition: transform 0.2s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
background: #f0f0f0;
}
.btn-exit {
background: #111;
border: 1px solid #222;
color: #ef4444;
padding: 10px;
border-radius: 12px;
width: 100%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 600;
margin-top: auto;
}
/* --- ANIMATIONS & SKELETON --- */
@keyframes modalScaleUp {
from { opacity: 0; transform: scale(0.97) translateY(10px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes fadeInSection {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.skeleton-loader { display: flex; flex-direction: column; gap: 2rem; }
.skeleton {
background: linear-gradient(90deg, #080808 25%, #121212 50%, #080808 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 12px;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.title-skeleton { height: 35px; width: 40%; }
.field-skeleton { height: 55px; width: 100%; }
/* Responsive Mobile View */
@media (max-width: 850px) {
.modal-content { flex-direction: column; height: 95vh; width: 100vw; border-radius: 0; }
.modal-sidebar { width: 100%; height: auto; border-right: none; border-bottom: var(--amoled-border); padding: 1rem; }
.sidebar-title { margin-bottom: 1rem; font-size: 1.2rem; }
.section-container { padding: 2rem; }
.modal-footer-sticky { padding: 1.5rem 2rem; }
}
</style>

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

@@ -53,8 +53,8 @@
gap: 1.25rem; gap: 1.25rem;
} }
.info-item h4 { margin: 0 0 0.25rem 0; font-size: 0.85rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .info-item h4 { margin: 0 0 0.25rem 0; font-size: 0.85rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.info-item span { font-weight: 600; font-size: 1rem; color: var(--text-primary); } .info-item span { font-weight: 600; font-size: 1rem; color: var(--color-text-primary); }
.character-list { .character-list {
display: flex; display: flex;
@@ -180,7 +180,7 @@
transition: 0.2s; transition: 0.2s;
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
color: var(--text-secondary); color: var(--color-text-secondary);
} }
.episode-btn:hover { .episode-btn:hover {

417
desktop/views/css/anime/watch.css
View File

@@ -4,7 +4,11 @@
left: 0; left: 0;
right: 0; right: 0;
padding: var(--spacing-lg) var(--spacing-xl); padding: var(--spacing-lg) var(--spacing-xl);
background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%); background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.8) 0%,
transparent 100%
);
z-index: 1000; z-index: 1000;
pointer-events: none; pointer-events: none;
} }
@@ -64,7 +68,11 @@
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
} }
.control-group { display: flex; align-items: center; gap: var(--spacing-md); } .control-group {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.sd-toggle { .sd-toggle {
display: flex; display: flex;
@@ -87,11 +95,15 @@
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
.sd-option.active { color: var(--color-text-primary); } .sd-option.active {
color: var(--color-text-primary);
}
.sd-bg { .sd-bg {
position: absolute; position: absolute;
top: 4px; left: 4px; bottom: 4px; top: 4px;
left: 4px;
bottom: 4px;
width: calc(50% - 4px); width: calc(50% - 4px);
background: var(--color-primary); background: var(--color-primary);
border-radius: var(--radius-full); border-radius: var(--radius-full);
@@ -100,7 +112,9 @@
z-index: 1; z-index: 1;
} }
.sd-toggle[data-state="dub"] .sd-bg { transform: translateX(100%); } .sd-toggle[data-state="dub"] .sd-bg {
transform: translateX(100%);
}
.source-select { .source-select {
appearance: none; appearance: none;
@@ -119,8 +133,15 @@
transition: all var(--transition-base); transition: all var(--transition-base);
} }
.source-select:hover { border-color: var(--color-primary); background-color: var(--color-bg-card); } .source-select:hover {
.source-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-glow); } border-color: var(--color-primary);
background-color: var(--color-bg-card);
}
.source-select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-glow);
}
.video-container { .video-container {
aspect-ratio: 16/9; aspect-ratio: 16/9;
@@ -128,14 +149,25 @@
background: var(--color-bg-base); background: var(--color-bg-base);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
overflow: hidden; overflow: hidden;
box-shadow: var(--shadow-lg), 0 0 0 1px var(--glass-border); box-shadow:
var(--shadow-lg),
0 0 0 1px var(--glass-border);
position: relative; position: relative;
transition: box-shadow var(--transition-smooth); transition: box-shadow var(--transition-smooth);
} }
.video-container:hover { box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-primary), var(--shadow-glow); } .video-container:hover {
box-shadow:
var(--shadow-lg),
0 0 0 1px var(--color-primary),
var(--shadow-glow);
}
#player { width: 100%; height: 100%; object-fit: contain; } #player {
width: 100%;
height: 100%;
object-fit: contain;
}
.loading-overlay { .loading-overlay {
position: absolute; position: absolute;
@@ -150,16 +182,25 @@
} }
.spinner { .spinner {
width: 48px; height: 48px; width: 48px;
border: 3px solid rgba(255,255,255,0.1); height: 48px;
border: 3px solid rgba(255, 255, 255, 0.1);
border-top-color: var(--color-primary); border-top-color: var(--color-primary);
border-radius: 50%; border-radius: 50%;
animation: spin 0.8s linear infinite; animation: spin 0.8s linear infinite;
} }
@keyframes spin { to { transform: rotate(360deg); } } @keyframes spin {
to {
transform: rotate(360deg);
}
}
.loading-overlay p { color: var(--color-text-secondary); font-size: 0.95rem; font-weight: 500; } .loading-overlay p {
color: var(--color-text-secondary);
font-size: 0.95rem;
font-weight: 500;
}
.episode-controls { .episode-controls {
display: flex; display: flex;
@@ -174,21 +215,49 @@
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
} }
.episode-info h1 { font-size: 1.75rem; font-weight: 800; margin: 0 0 var(--spacing-xs); } .episode-info h1 {
.episode-info p { color: var(--color-primary); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; } font-size: 1.75rem;
font-weight: 800;
.navigation-buttons { display: flex; gap: var(--spacing-md); } margin: 0 0 var(--spacing-xs);
}
.nav-btn { .episode-info p {
display: flex; align-items: center; gap: var(--spacing-sm); color: var(--color-primary);
background: var(--color-bg-elevated); border: var(--border-subtle); font-weight: 600;
color: var(--color-text-primary); padding: 0.75rem 1.5rem; font-size: 1rem;
border-radius: var(--radius-full); font-weight: 600; font-size: 0.9rem; text-transform: uppercase;
cursor: pointer; transition: all var(--transition-base); letter-spacing: 0.05em;
} }
.nav-btn:hover:not(:disabled) { background: var(--color-primary); border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-glow); } .navigation-buttons {
.nav-btn:disabled { opacity: 0.3; cursor: not-allowed; } display: flex;
gap: var(--spacing-md);
}
.nav-btn {
display: flex;
align-items: center;
gap: var(--spacing-sm);
background: var(--color-bg-elevated);
border: var(--border-subtle);
color: var(--color-text-primary);
padding: 0.75rem 1.5rem;
border-radius: var(--radius-full);
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all var(--transition-base);
}
.nav-btn:hover:not(:disabled) {
background: var(--color-primary);
border-color: var(--color-primary);
transform: translateY(-2px);
box-shadow: var(--shadow-glow);
}
.nav-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.episode-carousel-compact { .episode-carousel-compact {
width: 100%; width: 100%;
@@ -258,10 +327,18 @@
scroll-snap-type: x mandatory; scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
scrollbar-width: none; scrollbar-width: none;
mask-image: linear-gradient(to right, transparent, black var(--spacing-md), black calc(100% - var(--spacing-md)), transparent); mask-image: linear-gradient(
to right,
transparent,
black var(--spacing-md),
black calc(100% - var(--spacing-md)),
transparent
);
} }
.episode-carousel-compact-list::-webkit-scrollbar { display: none; } .episode-carousel-compact-list::-webkit-scrollbar {
display: none;
}
.carousel-item { .carousel-item {
flex: 0 0 200px; flex: 0 0 200px;
@@ -290,12 +367,14 @@
.carousel-item.active-ep-carousel { .carousel-item.active-ep-carousel {
border-color: var(--color-primary); border-color: var(--color-primary);
background: rgba(139, 92, 246, 0.15); background: rgba(139, 92, 246, 0.15);
box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-md); box-shadow:
0 0 0 2px var(--color-primary),
var(--shadow-md);
transform: scale(1.02); transform: scale(1.02);
} }
.carousel-item.active-ep-carousel::after { .carousel-item.active-ep-carousel::after {
content: 'WATCHING'; content: "WATCHING";
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@@ -391,7 +470,8 @@
color: var(--color-primary); color: var(--color-primary);
} }
.anime-details, .anime-extra-content { .anime-details,
.anime-extra-content {
max-width: 1600px; max-width: 1600px;
margin: var(--spacing-2xl) auto; margin: var(--spacing-2xl) auto;
} }
@@ -425,9 +505,17 @@
text-align: left; text-align: left;
} }
.cover-image { width: 220px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .cover-image {
width: 220px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
}
.details-content h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: var(--spacing-md); } .details-content h1 {
font-size: 1.5rem;
font-weight: 800;
margin-bottom: var(--spacing-md);
}
.meta-badge { .meta-badge {
background: rgba(139, 92, 246, 0.12); background: rgba(139, 92, 246, 0.12);
@@ -439,8 +527,15 @@
border: 1px solid rgba(139, 92, 246, 0.2); border: 1px solid rgba(139, 92, 246, 0.2);
} }
.meta-badge.meta-score { background: var(--color-primary); color: white; } .meta-badge.meta-score {
.details-description { font-size: 1rem; line-height: 1.7; color: var(--color-text-secondary); } background: var(--color-primary);
color: white;
}
.details-description {
font-size: 1rem;
line-height: 1.7;
color: var(--color-text-secondary);
}
.characters-header { .characters-header {
display: flex; display: flex;
@@ -471,9 +566,15 @@
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
} }
.expand-btn:hover { background: rgba(139, 92, 246, 0.1); } .expand-btn:hover {
.expand-btn svg { transition: transform var(--transition-smooth); } background: rgba(139, 92, 246, 0.1);
.expand-btn[data-expanded="true"] svg { transform: rotate(180deg); } }
.expand-btn svg {
transition: transform var(--transition-smooth);
}
.expand-btn[data-expanded="true"] svg {
transform: rotate(180deg);
}
.characters-carousel { .characters-carousel {
display: flex; display: flex;
@@ -495,7 +596,6 @@
} }
.characters-carousel.expanded { .characters-carousel.expanded {
height: auto; height: auto;
max-height: 3200px; max-height: 3200px;
overflow-y: auto; overflow-y: auto;
@@ -519,15 +619,38 @@
background: transparent; background: transparent;
} }
.plyr--video { border-radius: var(--radius-xl); } .plyr--video {
.plyr__controls { background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent 100%) !important; padding: 1rem 1.5rem 1.5rem !important; } border-radius: var(--radius-xl);
.plyr--full-ui input[type=range] { color: var(--color-primary); } }
.plyr__control:hover { background: rgba(255,255,255,0.12) !important; } .plyr__controls {
.plyr__menu__container { background: var(--glass-bg) !important; backdrop-filter: blur(16px); border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg) !important; } background: linear-gradient(
to top,
rgba(0, 0, 0, 0.9) 0%,
rgba(0, 0, 0, 0.5) 50%,
transparent 100%
) !important;
padding: 1rem 1.5rem 1.5rem !important;
}
.plyr--full-ui input[type="range"] {
color: var(--color-primary);
}
.plyr__control:hover {
background: rgba(255, 255, 255, 0.12) !important;
}
.plyr__menu__container {
background: var(--glass-bg) !important;
backdrop-filter: blur(16px);
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-lg) !important;
}
@media (min-width: 1024px) { @media (min-width: 1024px) {
.carousel-nav { display: flex; } .carousel-nav {
.watch-container { padding-top: 5rem; } display: flex;
}
.watch-container {
padding-top: 5rem;
}
.details-cover { .details-cover {
align-items: center; align-items: center;
@@ -540,64 +663,168 @@
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.watch-container { padding: 4.5rem 1rem; } .watch-container {
padding: 5rem 1rem 2rem 1rem;
.episode-carousel-compact-list { margin: 0;
padding: var(--spacing-sm) var(--spacing-md); width: 100%;
} overflow-x: hidden;
.carousel-header {
padding: 0 var(--spacing-md);
}
.carousel-item {
flex: 0 0 180px;
height: 100px;
}
.carousel-item-img-container { height: 60px; }
.carousel-item-info p { font-size: 0.95rem; }
.carousel-item.no-thumbnail {
flex: 0 0 140px;
height: 80px;
} }
.details-container { flex-direction: column; text-align: center; } .player-toolbar {
flex-direction: column;
align-items: stretch;
gap: 1rem;
padding: 1rem;
}
.details-cover { .control-group {
align-items: center; justify-content: space-between;
width: 100%; width: 100%;
} }
.details-cover h1 {
font-size: 2rem;
text-align: center;
}
.cover-image { width: 180px; margin: 0 auto; }
.episode-controls { flex-direction: column; gap: var(--spacing-md); } .source-select {
.navigation-buttons { width: 100%; justify-content: center; } width: 100%;
.nav-btn { flex: 1; justify-content: center; } background-position: right 1.5rem center;
}
@media (max-width: 480px) {
.episode-info h1, .details-content h1 { font-size: 1.5rem; }
.carousel-item {
flex: 0 0 150px;
height: 90px;
}
.carousel-item-img-container { height: 50px; }
.carousel-item-info p { font-size: 0.9rem; }
.carousel-item.no-thumbnail {
flex: 0 0 120px;
height: 70px;
} }
.details-cover h1 { .episode-controls {
font-size: 1.5rem; flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
} }
.nav-btn span { display: none; } .episode-info {
width: 100%;
text-align: left;
}
.episode-info h1 {
font-size: 1.4rem;
line-height: 1.3;
}
.navigation-buttons {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.8rem;
}
.nav-btn {
justify-content: center;
padding: 0.8rem;
width: 100%;
}
.details-container {
flex-direction: column;
padding: 1.5rem;
gap: 2rem;
}
.details-cover {
flex-direction: row;
align-items: flex-start;
width: 100%;
gap: 1.5rem;
}
@media (max-width: 480px) {
.details-cover {
flex-direction: column;
align-items: center;
text-align: center;
}
.details-cover h1 {
text-align: center;
}
}
.cover-image {
width: 140px;
flex-shrink: 0;
margin: 0 auto;
}
.details-content h1 {
font-size: 1.3rem;
}
.characters-carousel {
justify-content: center;
padding-bottom: 1rem;
}
.character-card { .character-card {
width: calc(50% - 0.75rem);
flex: 1 1 100%; flex: 0 0 calc(50% - 0.75rem);
} }
} }
.plyr__progress {
position: relative;
}
.plyr__markers {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100%;
pointer-events: none;
z-index: 2;
}
.plyr__marker {
position: absolute;
bottom: 0;
width: 3px;
height: 100%;
background: rgba(255, 215, 0, 0.8); /* Color dorado para Opening */
pointer-events: all;
cursor: pointer;
transition: all 0.2s ease;
}
.plyr__marker[data-label*="Ending"] {
background: rgba(255, 100, 100, 0.8); /* Color rojo para Ending */
}
.plyr__marker:hover {
height: 120%;
width: 4px;
background: rgba(255, 215, 0, 1);
}
.plyr__marker[data-label*="Ending"]:hover {
background: rgba(255, 100, 100, 1);
}
/* Tooltip para mostrar el label */
.plyr__marker::before {
content: attr(data-label);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-8px);
background: rgba(0, 0, 0, 0.9);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.plyr__marker:hover::before {
opacity: 1;
}
.plyr__marker {
position: absolute;
height: 100%;
background: rgba(255, 255, 255, 0.35);
cursor: pointer;
}

132
desktop/views/css/components/local-library.css Normal file
View File

@@ -0,0 +1,132 @@
.library-mode-btn {
padding: 0.6rem 1.2rem;
background: rgba(255, 255, 255, 0.05);
border-radius: var(--radius-full);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--color-text-secondary);
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.2s;
}
.library-mode-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
}
.library-mode-btn.active {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
.library-mode-btn svg {
width: 18px;
height: 18px;
}
.local-library-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1.5rem;
padding: 1rem 0;
}
.local-card {
cursor: pointer;
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.local-card:hover {
transform: translateY(-8px);
}
.local-card-info {
padding: 0.8rem 0;
}
.local-card-title {
font-size: 1rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 0.5rem;
}
.match-status {
font-size: 0.85rem;
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: var(--radius-sm);
}
.status-linked {
background: rgba(34, 197, 94, 0.2);
color: var(--color-success);
}
.status-unlinked {
background: rgba(239, 68, 68, 0.2);
color: var(--color-danger);
}
.hidden {
display: none !important;
}
.skeleton-card {
width: 100%;
aspect-ratio: 2/3;
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; }
}
.hero-wrapper {
position: relative;
}
.library-mode-btn.icon-only {
position: absolute;
bottom: 2rem;
right: 2rem;
z-index: 50;
}
.hero-mode-switch .library-mode-btn {
backdrop-filter: blur(10px);
}
.local-filters {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.filter-btn {
padding: 0.4rem 0.9rem;
border-radius: 999px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
color: #bbb;
cursor: pointer;
}
.filter-btn.active {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}

95
desktop/views/css/marketplace.css
View File

@@ -292,4 +292,99 @@
.modal-button.btn-uninstall:hover { .modal-button.btn-uninstall:hover {
background: #ef4444; background: #ef4444;
transform: scale(1.02); transform: scale(1.02);
}
.extension-author {
font-size: 0.8rem;
color: var(--color-text-secondary);
display: block;
margin-bottom: 0.5rem;
}
.extension-tags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.badge-available {
background: rgba(59, 130, 246, 0.2);
color: #60a5fa;
border: 1px solid rgba(59, 130, 246, 0.3);
}
.nsfw-ext {
border-color: rgba(220, 38, 38, 0.3);
}
.broken-ext {
filter: grayscale(0.8);
opacity: 0.7;
border: 1px dashed #ef4444; /* Borde rojo discontinuo */
}
.broken-ext:hover {
transform: none; /* Evitamos que se mueva al pasar el ratón si está rota */
}
/* Estilos para los Tabs */
.tabs-container {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid rgba(255,255,255,0.1);
padding-bottom: 0.5rem;
}
.tab-button {
background: none;
border: none;
color: var(--color-text-secondary);
font-size: 1.1rem;
font-weight: 700;
padding: 0.5rem 1rem;
cursor: pointer;
transition: all 0.3s;
position: relative;
}
.tab-button.active {
color: var(--color-primary);
}
.tab-button.active::after {
content: '';
position: absolute;
bottom: -0.6rem;
left: 0;
width: 100%;
height: 3px;
background: var(--color-primary);
border-radius: 999px;
box-shadow: 0 0 10px var(--color-primary-glow);
}
/* Títulos de Secciones en Marketplace */
.marketplace-section-title {
font-size: 1.4rem;
font-weight: 800;
margin: 2rem 0 1rem 0;
color: var(--color-text-primary);
display: flex;
align-items: center;
gap: 0.5rem;
text-transform: capitalize;
}
.marketplace-section-title::before {
content: '';
display: inline-block;
width: 4px;
height: 20px;
background: var(--color-primary);
border-radius: 2px;
}
.category-group {
margin-bottom: 3rem;
} }

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

@@ -27,70 +27,6 @@
</div> </div>
</div> </div>
<nav class="navbar" id="navbar">
<a href="#" class="nav-brand">
<div class="brand-icon">
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
</div>
WaifuBoard
</a>
<div class="nav-center">
<button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
<button class="nav-button active">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>
<!-- Mejorado el contenedor de usuario con dropdown más completo -->
<div class="nav-right">
<div class="search-wrapper">
<input type="text" id="main-search-input" class="search-input" placeholder="Search in gallery..." autocomplete="off">
<div class="search-results">
<button id="favorites-toggle-nav" class="fav-toggle-btn" title="Mostrar favoritos" style="margin: 10px; width: auto; font-size: 0.85rem;">
<i class="far fa-heart"></i>
<span class="fav-text">Favorites Mode</span>
</button>
</div>
</div>
<div class="nav-user" id="nav-user" style="display:none;">
<div class="user-avatar-btn">
<img id="nav-avatar" src="/placeholder.svg" alt="avatar">
<div class="online-indicator"></div>
</div>
<div class="nav-dropdown" id="nav-dropdown">
<div class="dropdown-header">
<img id="dropdown-avatar" src="/placeholder.svg" 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="gallery-main"> <main class="gallery-main">
<div class="gallery-hero-placeholder"></div> <div class="gallery-hero-placeholder"></div>

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

@@ -26,65 +26,6 @@
</div> </div>
</div> </div>
<nav class="navbar" id="navbar">
<a href="#" class="nav-brand">
<div class="brand-icon">
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
</div>
WaifuBoard
</a>
<div class="nav-center">
<button class="nav-button">Anime</button>
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
<button class="nav-button active" 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>
<!-- Mejorado el contenedor de usuario con dropdown más completo -->
<div class="nav-right">
<div class="search-wrapper" id="global-search-wrapper" style="visibility: hidden;width: 250px;">
<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" placeholder="Search site..." autocomplete="off">
<div class="search-results"></div>
</div>
<div class="nav-user" id="nav-user" style="display:none;">
<div class="user-avatar-btn">
<img id="nav-avatar" src="/placeholder.svg" alt="avatar">
<div class="online-indicator"></div>
</div>
<div class="nav-dropdown" id="nav-dropdown">
<div class="dropdown-header">
<img id="dropdown-avatar" src="/placeholder.svg" 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>
<a href="/gallery" class="back-btn"> <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> <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 Back to Gallery

133
desktop/views/list.html
View File

@@ -25,68 +25,6 @@
</div> </div>
</div> </div>
<nav class="navbar" id="navbar">
<a href="#" class="nav-brand">
<div class="brand-icon">
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
</div>
WaifuBoard
</a>
<div class="nav-center">
<button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
<button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
<button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
<button class="nav-button active">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>
<div class="container"> <div class="container">
<div class="header-section"> <div class="header-section">
<h1 class="page-title">My List</h1> <h1 class="page-title">My List</h1>
@@ -189,77 +127,6 @@
<div id="list-container" class="list-grid"></div> <div id="list-container" class="list-grid"></div>
</div> </div>
<div class="modal-overlay" id="add-list-modal">
<div class="modal-content">
<button class="modal-close" onclick="window.ListModalManager.close()">✕</button>
<h2 class="modal-title" id="modal-title">Edit List Entry</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">Current</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/Rereading</option>
</select>
</div>
<div class="form-group">
<label for="entry-progress" id="progress-label">Progress</label>
<input type="number" id="entry-progress" class="form-input" min="0">
</div>
<div class="form-group">
<label>Score (0-10)</label>
<input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1">
</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">Repeat 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-secondary" onclick="window.ListModalManager.close()">Cancel</button>
<button class="btn-danger" id="modal-delete-btn" style="display:none;">Delete</button>
<button class="btn-primary" id="modal-save-btn">Save Changes</button>
</div>
</div>
</div>
<div id="updateToast" class="hidden"> <div id="updateToast" class="hidden">
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p> <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
<a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank"> <a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">

135
desktop/views/marketplace.html
View File

@@ -10,13 +10,13 @@
<link rel="stylesheet" href="/views/css/components/updateNotifier.css"> <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon"> <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<link rel="stylesheet" href="/views/css/components/titlebar.css"> <link rel="stylesheet" href="/views/css/components/titlebar.css">
<script src="/src/scripts/titlebar.js"></script>
</head> </head>
<body> <body>
<div id="titlebar"> <div class="title-left"> <div id="titlebar">
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/> <div class="title-left">
<span class="app-title">WaifuBoard</span> <img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
</div> <span class="app-title">WaifuBoard</span>
</div>
<div class="title-right"> <div class="title-right">
<button class="min">—</button> <button class="min">—</button>
<button class="max">🗖</button> <button class="max">🗖</button>
@@ -24,113 +24,35 @@
</div> </div>
</div> </div>
<nav class="navbar" id="navbar">
<a href="#" class="nav-brand">
<div class="brand-icon">
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
</div>
WaifuBoard
</a>
<div class="nav-center">
<button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
<button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
<button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
<button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
<button class="nav-button active">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>
<div class="hero-spacer"></div> <div class="hero-spacer"></div>
<main> <main>
<section class="section"> <section class="section">
<header class="section-header"> <header class="section-header">
<p class="marketplace-subtitle">Explore, install, and manage all available data source extensions for WaifuBoard.</p> <div class="tabs-container">
<button class="tab-button active" data-tab="marketplace">Marketplace</button>
<button class="tab-button" data-tab="installed">My Extensions</button>
</div>
<div class="filter-controls"> <div class="filter-controls">
<button id="btn-update-all" class="btn-blur hidden" style="margin-right: 10px; width: auto; padding: 0 15px;">
Update All
</button>
<label for="extension-filter" class="filter-label">Filter by Type:</label> <label for="extension-filter" class="filter-label">Filter by Type:</label>
<select id="extension-filter" class="filter-select"> <select id="extension-filter" class="filter-select">
<option value="All">All Extensions</option> <option value="All">All Categories</option>
<option value="Image">Image Boards</option> <option value="image-board">Image Boards</option>
<option value="Anime">Anime Boards</option> <option value="anime-board">Anime Boards</option>
<option value="Book">Book Boards</option> <option value="book-board">Book Boards</option>
<option value="Local">Local Only</option> <option value="Local">Local/Manual</option>
</select> </select>
</div> </div>
</header> </header>
<div class="marketplace-grid" id="extensions-grid">
<div class="extension-card skeleton grid-item"> <div id="marketplace-content">
<div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
<div class="card-content-wrapper">
<div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
<div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
</div>
<div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
</div>
<div class="extension-card skeleton grid-item">
<div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
<div class="card-content-wrapper">
<div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
<div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
</div>
<div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
</div>
<div class="extension-card skeleton grid-item">
<div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
<div class="card-content-wrapper">
<div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
<div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
</div>
<div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
</div>
</div> </div>
</section> </section>
<div id="customModal" class="modal-overlay hidden"> <div id="customModal" class="modal-overlay hidden">
<div class="modal-content"> <div class="modal-content">
<h3 id="modalTitle"></h3> <h3 id="modalTitle"></h3>
@@ -143,22 +65,11 @@
</div> </div>
</main> </main>
<div id="updateToast" class="hidden"> <script src="/src/scripts/utils/notification-utils.js"></script>
<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/updateNotifier.js"></script>
<script src="/src/scripts/rpc-inapp.js"></script>
<script src="/src/scripts/marketplace.js"></script> <script src="/src/scripts/marketplace.js"></script>
<script src="/src/scripts/titlebar.js"></script> <script src="/src/scripts/titlebar.js"></script>
<script src="/src/scripts/rpc-inapp.js"></script>
<script src="/src/scripts/auth-guard.js"></script> <script src="/src/scripts/auth-guard.js"></script>
</body> </body>
</html> </html>

62
desktop/views/schedule.html
View File

@@ -29,68 +29,6 @@
<div class="ambient-bg" id="ambientBg"></div> <div class="ambient-bg" id="ambientBg"></div>
<nav class="navbar" id="navbar">
<a href="#" class="nav-brand">
<div class="brand-icon">
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
</div>
WaifuBoard
</a>
<div class="nav-center">
<button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
<button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
<button class="nav-button active">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>
<div class="calendar-wrapper"> <div class="calendar-wrapper">
<div class="calendar-controls"> <div class="calendar-controls">
<div class="month-selector"> <div class="month-selector">

41
docker/main.js
View File

@@ -1,41 +0,0 @@
const { app, BrowserWindow, ipcMain } = require('electron');
const { fork } = require('child_process');
const path = require('path');
let win;
let backend;
function startBackend() {
backend = fork(path.join(__dirname, 'server.js'));
}
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.loadURL('http://localhost:54322');
}
ipcMain.on("win:minimize", () => win.minimize());
ipcMain.on("win:maximize", () => win.maximize());
ipcMain.on("win:close", () => win.close());
app.whenReady().then(() => {
startBackend();
createWindow();
});
app.on('window-all-closed', () => {
if (backend) backend.kill();
app.quit();
});

50
docker/package-lock.json generated
View File

@@ -10,17 +10,21 @@
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@fastify/static": "^8.3.0", "@fastify/static": "^8.3.0",
"adm-zip": "^0.5.16",
"bcrypt": "^6.0.0", "bcrypt": "^6.0.0",
"bindings": "^1.5.0", "bindings": "^1.5.0",
"cheerio": "^1.1.2", "cheerio": "^1.1.2",
"dotenv": "^17.2.3", "dotenv": "^17.2.3",
"fastify": "^5.6.2", "fastify": "^5.6.2",
"js-yaml": "^4.1.1",
"jsonwebtoken": "^9.0.3", "jsonwebtoken": "^9.0.3",
"node-addon-api": "^8.5.0", "node-addon-api": "^8.5.0",
"node-cron": "^4.2.1",
"playwright-chromium": "^1.57.0", "playwright-chromium": "^1.57.0",
"sqlite3": "^5.1.7" "sqlite3": "^5.1.7"
}, },
"devDependencies": { "devDependencies": {
"@types/adm-zip": "^0.5.7",
"@types/bcrypt": "^6.0.0", "@types/bcrypt": "^6.0.0",
"@types/jsonwebtoken": "^9.0.10", "@types/jsonwebtoken": "^9.0.10",
"@types/node": "^24.0.0", "@types/node": "^24.0.0",
@@ -400,6 +404,16 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/@types/adm-zip": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/@types/adm-zip/-/adm-zip-0.5.7.tgz",
"integrity": "sha512-DNEs/QvmyRLurdQPChqq0Md4zGvPwHerAJYWk9l2jCbD1VPpnzRJorOdiq4zsw09NFbYnhfsoEhWtxIzXpn2yw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/node": "*"
}
},
"node_modules/@types/bcrypt": { "node_modules/@types/bcrypt": {
"version": "6.0.0", "version": "6.0.0",
"resolved": "https://registry.npmjs.org/@types/bcrypt/-/bcrypt-6.0.0.tgz", "resolved": "https://registry.npmjs.org/@types/bcrypt/-/bcrypt-6.0.0.tgz",
@@ -480,6 +494,15 @@
"node": ">=0.4.0" "node": ">=0.4.0"
} }
}, },
"node_modules/adm-zip": {
"version": "0.5.16",
"resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.5.16.tgz",
"integrity": "sha512-TGw5yVi4saajsSEgz25grObGHEUaDrniwvA2qwSC060KfqGPdglhvPMA2lPIoxs3PQIItj2iag35fONcQqgUaQ==",
"license": "MIT",
"engines": {
"node": ">=12.0"
}
},
"node_modules/agent-base": { "node_modules/agent-base": {
"version": "7.1.4", "version": "7.1.4",
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
@@ -603,6 +626,12 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/argparse": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
"license": "Python-2.0"
},
"node_modules/atomic-sleep": { "node_modules/atomic-sleep": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/atomic-sleep/-/atomic-sleep-1.0.0.tgz", "resolved": "https://registry.npmjs.org/atomic-sleep/-/atomic-sleep-1.0.0.tgz",
@@ -1779,6 +1808,18 @@
"url": "https://github.com/sponsors/isaacs" "url": "https://github.com/sponsors/isaacs"
} }
}, },
"node_modules/js-yaml": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
"integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
"license": "MIT",
"dependencies": {
"argparse": "^2.0.1"
},
"bin": {
"js-yaml": "bin/js-yaml.js"
}
},
"node_modules/json-schema-ref-resolver": { "node_modules/json-schema-ref-resolver": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/json-schema-ref-resolver/-/json-schema-ref-resolver-3.0.0.tgz", "resolved": "https://registry.npmjs.org/json-schema-ref-resolver/-/json-schema-ref-resolver-3.0.0.tgz",
@@ -2230,6 +2271,15 @@
"node": "^18 || ^20 || >= 21" "node": "^18 || ^20 || >= 21"
} }
}, },
"node_modules/node-cron": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/node-cron/-/node-cron-4.2.1.tgz",
"integrity": "sha512-lgimEHPE/QDgFlywTd8yTR61ptugX3Qer29efeyWw2rv259HtGBNn1vZVmp8lB9uo9wC0t/AT4iGqXxia+CJFg==",
"license": "ISC",
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/node-gyp": { "node_modules/node-gyp": {
"version": "12.1.0", "version": "12.1.0",
"resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-12.1.0.tgz", "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-12.1.0.tgz",

4
docker/package.json
View File

@@ -13,17 +13,21 @@
"type": "commonjs", "type": "commonjs",
"dependencies": { "dependencies": {
"@fastify/static": "^8.3.0", "@fastify/static": "^8.3.0",
"adm-zip": "^0.5.16",
"bcrypt": "^6.0.0", "bcrypt": "^6.0.0",
"bindings": "^1.5.0", "bindings": "^1.5.0",
"cheerio": "^1.1.2", "cheerio": "^1.1.2",
"dotenv": "^17.2.3", "dotenv": "^17.2.3",
"fastify": "^5.6.2", "fastify": "^5.6.2",
"js-yaml": "^4.1.1",
"jsonwebtoken": "^9.0.3", "jsonwebtoken": "^9.0.3",
"node-addon-api": "^8.5.0", "node-addon-api": "^8.5.0",
"node-cron": "^4.2.1",
"playwright-chromium": "^1.57.0", "playwright-chromium": "^1.57.0",
"sqlite3": "^5.1.7" "sqlite3": "^5.1.7"
}, },
"devDependencies": { "devDependencies": {
"@types/adm-zip": "^0.5.7",
"@types/bcrypt": "^6.0.0", "@types/bcrypt": "^6.0.0",
"@types/jsonwebtoken": "^9.0.10", "@types/jsonwebtoken": "^9.0.10",
"@types/node": "^24.0.0", "@types/node": "^24.0.0",

10
docker/preload.js
View File

@@ -1,10 +0,0 @@
const { contextBridge, ipcRenderer } = require("electron");
contextBridge.exposeInMainWorld("electronAPI", {
isElectron: true,
win: {
minimize: () => ipcRenderer.send("win:minimize"),
maximize: () => ipcRenderer.send("win:maximize"),
close: () => ipcRenderer.send("win:close")
}
});

67
docker/server.js
View File

@@ -4,26 +4,28 @@ const fastify = require("fastify")({
const path = require("path"); const path = require("path");
const jwt = require("jsonwebtoken"); const jwt = require("jsonwebtoken");
const { initHeadless } = require("./electron/shared/headless"); const cron = require("node-cron");
const { initDatabase } = require("./electron/shared/database"); const { initHeadless } = require("./dist/shared/headless");
const { loadExtensions } = require("./electron/shared/extensions"); 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 dotenv = require("dotenv"); const dotenv = require("dotenv");
const envPath = process.resourcesPath
? path.join(process.resourcesPath, ".env")
: path.join(__dirname, ".env");
// Attempt to load it and log the result to be sure dotenv.config();
dotenv.config({ path: envPath });
const viewsRoutes = require("./electron/views/views.routes"); const viewsRoutes = require("./dist/views/views.routes");
const animeRoutes = require("./electron/api/anime/anime.routes"); const animeRoutes = require("./dist/api/anime/anime.routes");
const booksRoutes = require("./electron/api/books/books.routes"); const booksRoutes = require("./dist/api/books/books.routes");
const proxyRoutes = require("./electron/api/proxy/proxy.routes"); const proxyRoutes = require("./dist/api/proxy/proxy.routes");
const extensionsRoutes = require("./electron/api/extensions/extensions.routes"); const extensionsRoutes = require("./dist/api/extensions/extensions.routes");
const galleryRoutes = require("./electron/api/gallery/gallery.routes"); const galleryRoutes = require("./dist/api/gallery/gallery.routes");
const userRoutes = require("./electron/api/user/user.routes"); const userRoutes = require("./dist/api/user/user.routes");
const listRoutes = require("./electron/api/list/list.routes"); const listRoutes = require("./dist/api/list/list.routes");
const anilistRoute = require("./electron/api/anilist/anilist"); const anilistRoute = require("./dist/api/anilist/anilist");
const localRoutes = require("./dist/api/local/local.routes");
const configRoutes = require("./dist/api/config/config.routes");
fastify.addHook("preHandler", async (request) => { fastify.addHook("preHandler", async (request) => {
const auth = request.headers.authorization; const auth = request.headers.authorization;
@@ -64,20 +66,45 @@ fastify.register(galleryRoutes, { prefix: "/api" });
fastify.register(userRoutes, { prefix: "/api" }); fastify.register(userRoutes, { prefix: "/api" });
fastify.register(anilistRoute, { prefix: "/api" }); fastify.register(anilistRoute, { prefix: "/api" });
fastify.register(listRoutes, { prefix: "/api" }); fastify.register(listRoutes, { prefix: "/api" });
fastify.register(localRoutes, { prefix: "/api" });
fastify.register(configRoutes, { prefix: "/api" });
const sleep = ms => new Promise(r => setTimeout(r, ms));
const start = async () => { const start = async () => {
try { try {
ensureConfigFile()
initDatabase("anilist"); initDatabase("anilist");
initDatabase("favorites"); initDatabase("favorites");
initDatabase("cache"); initDatabase("cache");
initDatabase("userdata"); initDatabase("userdata");
initDatabase("local_library");
const refreshAll = async () => {
await refreshTrendingAnime();
await sleep(300);
await refreshTopAiringAnime();
await sleep(300);
await refreshTrendingBooks();
await sleep(300);
await refreshPopularBooks();
};
cron.schedule("*/30 * * * *", async () => {
try {
await refreshAll();
console.log("cache refreshed");
} catch (e) {
console.error("refresh failed", e);
}
});
await loadExtensions(); await loadExtensions();
await initHeadless();
await refreshAll();
await fastify.listen({ port: 54322, host: "0.0.0.0" }); await fastify.listen({ port: 54322, host: "0.0.0.0" });
console.log(`Server is now running!`); console.log(`Server running at http://localhost:54322`);
await initHeadless();
} catch (err) { } catch (err) {
fastify.log.error(err); fastify.log.error(err);
process.exit(1); process.exit(1);

117
docker/src/api/anime/anime.service.ts
View File

@@ -3,7 +3,6 @@ import { queryAll, queryOne } from '../../shared/database';
import {Anime, Episode, Extension, StreamData} from '../types'; import {Anime, Episode, Extension, StreamData} from '../types';
const CACHE_TTL_MS = 24 * 60 * 60 * 1000; const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
const TTL = 60 * 60 * 6;
const ANILIST_URL = "https://graphql.anilist.co"; const ANILIST_URL = "https://graphql.anilist.co";
@@ -79,6 +78,54 @@ const MEDIA_FIELDS = `
} }
`; `;
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) { async function fetchAniList(query: string, variables: any) {
const res = await fetch(ANILIST_URL, { const res = await fetch(ANILIST_URL, {
method: "POST", method: "POST",
@@ -119,76 +166,16 @@ export async function getAnimeById(id: string | number): Promise<Anime | { error
export async function getTrendingAnime(): Promise<Anime[]> { export async function getTrendingAnime(): Promise<Anime[]> {
const rows = await queryAll( const rows = await queryAll(
"SELECT full_data, updated_at FROM trending ORDER BY rank ASC LIMIT 10" "SELECT full_data FROM trending ORDER BY rank ASC LIMIT 10"
); );
return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
if (rows.length) {
const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
if (!expired) {
return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
}
}
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]
);
}
return list;
} }
export async function getTopAiringAnime(): Promise<Anime[]> { export async function getTopAiringAnime(): Promise<Anime[]> {
const rows = await queryAll( const rows = await queryAll(
"SELECT full_data, updated_at FROM top_airing ORDER BY rank ASC LIMIT 10" "SELECT full_data FROM top_airing ORDER BY rank ASC LIMIT 10"
); );
return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
if (rows.length) {
const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
if (!expired) {
return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
}
}
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]
);
}
return list;
} }
export async function searchAnimeLocal(query: string): Promise<Anime[]> { export async function searchAnimeLocal(query: string): Promise<Anime[]> {

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

@@ -87,15 +87,16 @@ export async function getChapters(req: any, reply: FastifyReply) {
try { try {
const { id } = req.params; const { id } = req.params;
const source = req.query.source || 'anilist'; const source = req.query.source || 'anilist';
const provider = req.query.provider;
const isExternal = source !== 'anilist'; const isExternal = source !== 'anilist';
return await booksService.getChaptersForBook(id, isExternal); return await booksService.getChaptersForBook(id, isExternal, provider);
} catch { } catch (err) {
console.error(err);
return { chapters: [] }; return { chapters: [] };
} }
} }
export async function getChapterContent(req: any, reply: FastifyReply) { export async function getChapterContent(req: any, reply: FastifyReply) {
try { try {
const { bookId, chapter, provider } = req.params; const { bookId, chapter, provider } = req.params;

65
docker/src/api/books/books.service.ts
View File

@@ -4,7 +4,6 @@ import { getAllExtensions, getBookExtensionsMap } from '../../shared/extensions'
import { Book, Extension, ChapterWithProvider, ChapterContent } from '../types'; import { Book, Extension, ChapterWithProvider, ChapterContent } from '../types';
const CACHE_TTL_MS = 24 * 60 * 60 * 1000; const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
const TTL = 60 * 60 * 6;
const ANILIST_URL = "https://graphql.anilist.co"; const ANILIST_URL = "https://graphql.anilist.co";
async function fetchAniList(query: string, variables: any) { async function fetchAniList(query: string, variables: any) {
@@ -134,25 +133,14 @@ export async function getBookById(id: string | number): Promise<Book | { error:
return { error: "Book not found" }; return { error: "Book not found" };
} }
export async function getTrendingBooks(): Promise<Book[]> { export async function refreshTrendingBooks(): Promise<void> {
const rows = await queryAll(
"SELECT full_data, updated_at FROM trending_books ORDER BY rank ASC LIMIT 10"
);
if (rows.length) {
const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
if (!expired) {
return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
}
}
const query = ` const query = `
query { query {
Page(page: 1, perPage: 10) { Page(page: 1, perPage: 10) {
media(type: MANGA, sort: TRENDING_DESC) { ${MEDIA_FIELDS} } media(type: MANGA, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
}
} }
} `;
`;
const data = await fetchAniList(query, {}); const data = await fetchAniList(query, {});
const list = data?.Page?.media || []; const list = data?.Page?.media || [];
@@ -167,30 +155,16 @@ export async function getTrendingBooks(): Promise<Book[]> {
[rank++, book.id, JSON.stringify(book), now] [rank++, book.id, JSON.stringify(book), now]
); );
} }
return list;
} }
export async function refreshPopularBooks(): Promise<void> {
export async function getPopularBooks(): Promise<Book[]> {
const rows = await queryAll(
"SELECT full_data, updated_at FROM popular_books ORDER BY rank ASC LIMIT 10"
);
if (rows.length) {
const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
if (!expired) {
return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
}
}
const query = ` const query = `
query { query {
Page(page: 1, perPage: 10) { Page(page: 1, perPage: 10) {
media(type: MANGA, sort: POPULARITY_DESC) { ${MEDIA_FIELDS} } media(type: MANGA, sort: POPULARITY_DESC) { ${MEDIA_FIELDS} }
}
} }
} `;
`;
const data = await fetchAniList(query, {}); const data = await fetchAniList(query, {});
const list = data?.Page?.media || []; const list = data?.Page?.media || [];
@@ -205,10 +179,21 @@ export async function getPopularBooks(): Promise<Book[]> {
[rank++, book.id, JSON.stringify(book), now] [rank++, book.id, JSON.stringify(book), now]
); );
} }
return list;
} }
export async function getTrendingBooks(): Promise<Book[]> {
const rows = await queryAll(
"SELECT full_data FROM trending_books ORDER BY rank ASC LIMIT 10"
);
return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
}
export async function getPopularBooks(): Promise<Book[]> {
const rows = await queryAll(
"SELECT full_data FROM popular_books ORDER BY rank ASC LIMIT 10"
);
return rows.map((r: { full_data: string; }) => JSON.parse(r.full_data));
}
export async function searchBooksLocal(query: string): Promise<Book[]> { export async function searchBooksLocal(query: string): Promise<Book[]> {
if (!query || query.length < 2) { if (!query || query.length < 2) {

43
docker/src/api/config/config.controller.ts Normal file
View File

@@ -0,0 +1,43 @@
import {FastifyReply, FastifyRequest} from 'fastify';
import {getConfig, setConfig} from '../../shared/config';
export async function getFullConfig(req: FastifyRequest, reply: FastifyReply) {
try {
return getConfig();
} catch (err) {
return { error: "Error loading config" };
}
}
export async function getConfigSection(req: FastifyRequest<{ Params: { section: string } }>, reply: FastifyReply) {
try {
const { section } = req.params;
const config = getConfig();
if (config[section] === undefined) {
return { error: "Section not found" };
}
return { [section]: config[section] };
} catch (err) {
return { error: "Error loading config section" };
}
}
export async function updateConfig(req: FastifyRequest<{ Body: any }>, reply: FastifyReply) {
try {
return setConfig(req.body);
} catch (err) {
return { error: "Error updating config" };
}
}
export async function updateConfigSection(req: FastifyRequest<{ Params: { section: string }, Body: any }>, reply: FastifyReply) {
try {
const { section } = req.params;
const updatedConfig = setConfig({ [section]: req.body });
return { [section]: updatedConfig[section] };
} catch (err) {
return { error: "Error updating config section" };
}
}

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

@@ -0,0 +1,11 @@
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;

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

@@ -1,6 +1,59 @@
import { FastifyReply, FastifyRequest } from 'fastify'; import { FastifyReply, FastifyRequest } from 'fastify';
import { getExtension, getExtensionsList, getGalleryExtensionsMap, getBookExtensionsMap, getAnimeExtensionsMap, saveExtensionFile, deleteExtensionFile } from '../../shared/extensions'; import { getExtension, getExtensionsList, getGalleryExtensionsMap, getBookExtensionsMap, getAnimeExtensionsMap, saveExtensionFile, deleteExtensionFile } from '../../shared/extensions';
import { ExtensionNameRequest } from '../types'; import { ExtensionNameRequest } from '../types';
import path from 'path';
import fs from 'fs/promises';
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) { export async function getExtensions(req: FastifyRequest, reply: FastifyReply) {
return { extensions: getExtensionsList() }; return { extensions: getExtensionsList() };
@@ -37,24 +90,33 @@ export async function getExtensionSettings(req: ExtensionNameRequest, reply: Fas
} }
export async function installExtension(req: any, reply: FastifyReply) { export async function installExtension(req: any, reply: FastifyReply) {
const { fileName } = req.body; const { url } = req.body;
if (!fileName || !fileName.endsWith('.js')) { if (!url || typeof url !== 'string' || !url.endsWith('.js')) {
return reply.code(400).send({ error: "Invalid extension fileName provided" }); return reply.code(400).send({ error: "Invalid extension URL provided" });
} }
try { try {
const fileName = url.split('/').pop();
const downloadUrl = `https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/${fileName}` if (!fileName) {
return reply.code(400).send({ error: "Could not determine file name from URL" });
}
await saveExtensionFile(fileName, downloadUrl); await saveExtensionFile(fileName, url);
req.server.log.info(`Extension installed: ${fileName}`); req.server.log.info(`Extension installed: ${fileName}`);
return reply.code(200).send({ success: true, message: `Extension ${fileName} installed successfully.` }); return reply.code(200).send({
success: true,
message: `Extension ${fileName} installed successfully.`,
});
} catch (error) { } catch (error) {
req.server.log.error(`Failed to install extension ${fileName}:`, error); req.server.log.error(`Failed to install extension from ${url}:`, error);
return reply.code(500).send({ success: false, error: `Failed to install extension ${fileName}.` }); return reply.code(500).send({
success: false,
error: "Failed to install extension.",
});
} }
} }

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

@@ -4,6 +4,7 @@ import * as controller from './extensions.controller';
async function extensionsRoutes(fastify: FastifyInstance) { async function extensionsRoutes(fastify: FastifyInstance) {
fastify.get('/extensions', controller.getExtensions); fastify.get('/extensions', controller.getExtensions);
fastify.get('/extensions/anime', controller.getAnimeExtensions); fastify.get('/extensions/anime', controller.getAnimeExtensions);
fastify.post('/extensions/update', controller.updateExtensions);
fastify.get('/extensions/book', controller.getBookExtensions); fastify.get('/extensions/book', controller.getBookExtensions);
fastify.get('/extensions/gallery', controller.getGalleryExtensions); fastify.get('/extensions/gallery', controller.getGalleryExtensions);
fastify.get('/extensions/:name/settings', controller.getExtensionSettings); fastify.get('/extensions/:name/settings', controller.getExtensionSettings);

357
docker/src/api/local/local.controller.ts Normal file
View File

@@ -0,0 +1,357 @@
import { FastifyRequest, FastifyReply } from 'fastify';
import { getConfig as loadConfig, setConfig as saveConfig } 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, searchBooksLocal} from "../books/books.service";
import AdmZip from 'adm-zip';
type SetConfigBody = {
library?: {
anime?: string | null;
manga?: string | null;
novels?: string | null;
};
};
type ScanQuery = {
mode?: 'full' | 'incremental';
};
type Params = {
type: 'anime' | 'manga' | 'novels';
id?: string;
};
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);
const first = results?.[0];
if (first?.id) {
matchedId = first.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 scanLibrary(request: FastifyRequest<{ Querystring: ScanQuery }>, reply: FastifyReply) {
try {
const mode = request.query.mode || 'incremental';
const config = loadConfig();
if (!config.library) {
return reply.status(400).send({ 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(config.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())
.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' };
} catch (err) {
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;
const entries = await queryAll(`SELECT * FROM local_entries WHERE type = ?`, [type], 'local_library');
return await Promise.all(entries.map((entry: any) => resolveEntryMetadata(entry, 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 queryOne(
`SELECT * FROM local_entries WHERE matched_id = ? AND type = ?`,
[Number(id), type],
'local_library'
);
if (!entry) {
return reply.status(404).send({ error: 'ENTRY_NOT_FOUND' });
}
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 };
} 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 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 reply.status(404).send({ error: 'FILE_NOT_FOUND' });
}
const stat = fs.statSync(file.file_path);
const range = request.headers.range;
if (!range) {
reply
.header('Content-Length', stat.size)
.header('Content-Type', 'video/mp4');
return fs.createReadStream(file.file_path);
}
const parts = range.replace(/bytes=/, '').split('-');
const start = Number(parts[0]);
let end = parts[1] ? Number(parts[1]) : stat.size - 1;
if (
Number.isNaN(start) ||
Number.isNaN(end) ||
start < 0 ||
end < start ||
end >= stat.size
) {
end = stat.size - 1;
}
reply
.status(206)
.header('Content-Range', `bytes ${start}-${end}/${stat.size}`)
.header('Accept-Ranges', 'bytes')
.header('Content-Length', end - start + 1)
.header('Content-Type', 'video/mp4');
return fs.createReadStream(file.file_path, { start, end });
}
type MatchBody = {
source: 'anilist';
matched_id: number | null;
};
export async function matchEntry(
request: FastifyRequest<{ Body: MatchBody }>,
reply: FastifyReply
) {
const { id, type } = request.params as any;
const { source, matched_id } = request.body;
const entry = await queryOne(
`SELECT id FROM local_entries WHERE id = ? AND type = ?`,
[id, type],
'local_library'
);
if (!entry) {
return reply.status(404).send({ error: 'ENTRY_NOT_FOUND' });
}
await run(
`UPDATE local_entries
SET matched_source = ?, matched_id = ?
WHERE id = ?`,
[source, matched_id, id],
'local_library'
);
return { status: 'OK', matched: !!matched_id };
}
export async function getUnits(
request: FastifyRequest<{ Params: Params }>,
reply: FastifyReply
) {
try {
const { type, id } = request.params as { type: string, id: string };
// Buscar la entrada por matched_id
const entry = await queryOne(
`SELECT id, type, matched_id FROM local_entries WHERE matched_id = ? AND type = ?`,
[Number(id), type],
'local_library'
);
if (!entry) {
return reply.status(404).send({ error: 'ENTRY_NOT_FOUND' });
}
// Obtener todos los archivos/unidades ordenados
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'
);
// Formatear la respuesta según el tipo
const units = files.map((file: any) => {
const fileName = path.basename(file.file_path);
const fileExt = path.extname(file.file_path).toLowerCase();
// Detectar si es un archivo comprimido (capítulo único) o carpeta
const isDirectory = fs.existsSync(file.file_path) &&
fs.statSync(file.file_path).isDirectory();
return {
id: file.id,
number: file.unit_number,
name: fileName,
type: type === 'anime' ? 'episode' : 'chapter',
format: fileExt === '.cbz' ? 'cbz' : 'file',
path: file.file_path
};
});
return {
entry_id: entry.id,
matched_id: entry.matched_id,
type: entry.type,
total: units.length,
units
};
} catch (err) {
console.error('Error getting units:', err);
return reply.status(500).send({ error: 'FAILED_TO_GET_UNITS' });
}
}
export async function getCbzPages(request: FastifyRequest, reply: FastifyReply) {
const { unitId } = request.params as any;
const file = await queryOne(
`SELECT file_path FROM local_files WHERE id = ?`,
[unitId],
'local_library'
);
if (!file || !fs.existsSync(file.file_path)) {
return reply.status(404).send({ error: 'FILE_NOT_FOUND' });
}
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) =>
`/api/library/manga/cbz/${unitId}/page/${i}`
);
return { pages };
}
export async function getCbzPage(request: FastifyRequest, reply: FastifyReply) {
const { unitId, page } = request.params as any;
const file = await queryOne(
`SELECT file_path FROM local_files WHERE id = ?`,
[unitId],
'local_library'
);
if (!file) return reply.status(404).send();
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[page];
if (!entry) return reply.status(404).send();
reply
.header('Content-Type', 'image/jpeg')
.send(entry.getData());
}

15
docker/src/api/local/local.routes.ts Normal file
View File

@@ -0,0 +1,15 @@
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);
fastify.get('/library/stream/:type/:id/:unit', controller.streamUnit);
fastify.post('/library/:type/:id/match', controller.matchEntry);
fastify.get('/library/:type/:id/units', controller.getUnits);
fastify.get('/library/:type/cbz/:unitId/pages', controller.getCbzPages);
fastify.get('/library/:type/cbz/:unitId/page/:page', controller.getCbzPage);
}
export default localRoutes;

40
docker/src/api/user/user.controller.ts
View File

@@ -168,20 +168,39 @@ export async function deleteUser(req: FastifyRequest, reply: FastifyReply) {
const { id } = req.params as { id: string }; const { id } = req.params as { id: string };
const userId = parseInt(id, 10); const userId = parseInt(id, 10);
const body = (req.body ?? {}) as { password?: string };
const password = body.password;
if (!userId || isNaN(userId)) { if (!userId || isNaN(userId)) {
return reply.code(400).send({ error: "Invalid user id" }); return reply.code(400).send({ error: "Invalid user id" });
} }
const result = await userService.deleteUser(userId); const user = await userService.getUserById(userId);
if (!user) {
if (result && result.changes > 0) {
return { success: true, message: "User deleted successfully" };
} else {
return reply.code(404).send({ error: "User not found" }); 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) { } catch (err) {
console.error("Delete User Error:", (err as Error).message); console.error("Delete User Error:", err);
return reply.code(500).send({ error: "Failed to delete user" }); return reply.code(500).send({ error: "Failed to delete user" });
} }
} }
@@ -246,16 +265,17 @@ export async function changePassword(req: FastifyRequest, reply: FastifyReply) {
return reply.code(404).send({ error: "User not found" }); return reply.code(404).send({ error: "User not found" });
} }
// Si el usuario tiene contraseña actual, debe proporcionar la contraseña actual if (user.has_password) {
if (user.has_password && currentPassword) { if (!currentPassword) {
const isValid = await userService.verifyPassword(userId, currentPassword); return reply.code(401).send({ error: "Current password required" });
}
const isValid = await userService.verifyPassword(userId, currentPassword);
if (!isValid) { if (!isValid) {
return reply.code(401).send({ error: "Current password is incorrect" }); return reply.code(401).send({ error: "Current password is incorrect" });
} }
} }
// Actualizar la contraseña (null para eliminarla, string para establecerla)
await userService.updateUser(userId, { password: newPassword }); await userService.updateUser(userId, { password: newPassword });
return reply.send({ return reply.send({

35
docker/src/scripts/anime/anime.js
View File

@@ -1,6 +1,7 @@
let animeData = null; let animeData = null;
let extensionName = null; let extensionName = null;
let animeId = null; let animeId = null;
let isLocal = false;
const episodePagination = Object.create(PaginationManager); const episodePagination = Object.create(PaginationManager);
episodePagination.init(12, renderEpisodes); episodePagination.init(12, renderEpisodes);
@@ -13,6 +14,29 @@ document.addEventListener('DOMContentLoaded', () => {
setupEpisodeSearch(); setupEpisodeSearch();
}); });
function markAsLocal() {
isLocal = true;
const pill = document.getElementById('local-pill');
if (!pill) return;
pill.textContent = 'Local';
pill.style.display = 'inline-flex';
pill.style.background = 'rgba(34,197,94,.2)';
pill.style.color = '#22c55e';
pill.style.borderColor = 'rgba(34,197,94,.3)';
}
async function checkLocalLibraryEntry() {
try {
const res = await fetch(`/api/library/anime/${animeId}`);
if (!res.ok) return;
markAsLocal();
} catch (e) {
}
}
async function loadAnime() { async function loadAnime() {
try { try {
@@ -24,6 +48,7 @@ async function loadAnime() {
extensionName = urlData.extensionName; extensionName = urlData.extensionName;
animeId = urlData.entityId; animeId = urlData.entityId;
await checkLocalLibraryEntry();
const fetchUrl = extensionName const fetchUrl = extensionName
? `/api/anime/${animeId}?source=${extensionName}` ? `/api/anime/${animeId}?source=${extensionName}`
@@ -38,7 +63,7 @@ async function loadAnime() {
} }
animeData = data; animeData = data;
animeData.entry_type = 'ANIME';
const metadata = MediaMetadataUtils.formatAnimeData(data, !!extensionName); const metadata = MediaMetadataUtils.formatAnimeData(data, !!extensionName);
updatePageTitle(metadata.title); updatePageTitle(metadata.title);
@@ -142,8 +167,8 @@ function setupWatchButton() {
const watchBtn = document.getElementById('watch-btn'); const watchBtn = document.getElementById('watch-btn');
if (watchBtn) { if (watchBtn) {
watchBtn.onclick = () => { watchBtn.onclick = () => {
const url = URLUtils.buildWatchUrl(animeId, 1, extensionName); const source = isLocal ? 'local' : (extensionName || 'anilist');
window.location.href = url; window.location.href = URLUtils.buildWatchUrl(animeId, num, source);
}; };
} }
} }
@@ -226,8 +251,8 @@ function createEpisodeButton(num, container) {
btn.className = 'episode-btn'; btn.className = 'episode-btn';
btn.innerText = `Ep ${num}`; btn.innerText = `Ep ${num}`;
btn.onclick = () => { btn.onclick = () => {
const url = URLUtils.buildWatchUrl(animeId, num, extensionName); const source = isLocal ? 'local' : (extensionName || 'anilist');
window.location.href = url; window.location.href = URLUtils.buildWatchUrl(animeId, num, source);
}; };
container.appendChild(btn); container.appendChild(btn);
} }

1
docker/src/scripts/anime/animes.js
View File

@@ -92,6 +92,7 @@ function startHeroCycle() {
async function updateHeroUI(anime) { async function updateHeroUI(anime) {
if(!anime) return; if(!anime) return;
anime.entry_type = 'ANIME';
const title = anime.title.english || anime.title.romaji || "Unknown Title"; const title = anime.title.english || anime.title.romaji || "Unknown Title";
const score = anime.averageScore ? anime.averageScore + '% Match' : 'N/A'; const score = anime.averageScore ? anime.averageScore + '% Match' : 'N/A';

380
docker/src/scripts/anime/player.js
View File

@@ -7,23 +7,56 @@ let currentExtension = '';
let plyrInstance; let plyrInstance;
let hlsInstance; let hlsInstance;
let totalEpisodes = 0; let totalEpisodes = 0;
let animeTitle = "";
let aniSkipData = null;
let isAnilist = false;
let malId = null;
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const firstKey = params.keys().next().value; const firstKey = params.keys().next().value;
let extName; let extName;
if (firstKey) extName = firstKey; if (firstKey) extName = firstKey;
const href = extName // URL de retroceso: Si es local, volvemos a la vista de Anilist normal
const href = (extName && extName !== 'local')
? `/anime/${extName}/${animeId}` ? `/anime/${extName}/${animeId}`
: `/anime/${animeId}`; : `/anime/${animeId}`;
document.getElementById('back-link').href = href; document.getElementById('back-link').href = href;
document.getElementById('episode-label').innerText = `Episode ${currentEpisode}`; document.getElementById('episode-label').innerText = `Episode ${currentEpisode}`;
async function loadMetadata() {
let localEntryId = null;
async function checkLocal() {
try { try {
const extQuery = extName ? `?source=${extName}` : "?source=anilist"; const res = await fetch(`/api/library/anime/${animeId}`);
const res = await fetch(`/api/anime/${animeId}${extQuery}`); if (!res.ok) return;
const data = await res.json();
localEntryId = data.id;
} catch {}
}
async function loadAniSkip(malId, episode, duration) {
try {
const res = await fetch(`https://api.aniskip.com/v2/skip-times/${malId}/${episode}?types[]=op&types[]=ed&episodeLength=${duration}`);
if (!res.ok) return null;
const data = await res.json();
return data.results || [];
} catch (error) {
console.error('Error loading AniSkip data:', error);
return null;
}
}
async function loadMetadata() {
checkLocal();
try {
const sourceQuery = (extName === 'local' || !extName) ? "source=anilist" : `source=${extName}`;
const res = await fetch(`/api/anime/${animeId}?${sourceQuery}`);
const data = await res.json(); const data = await res.json();
if (data.error) { if (data.error) {
@@ -33,18 +66,9 @@ async function loadMetadata() {
const isAnilistFormat = data.title && (data.title.romaji || data.title.english); const isAnilistFormat = data.title && (data.title.romaji || data.title.english);
let title = ''; let title = '', description = '', coverImage = '', averageScore = '', format = '', seasonYear = '', season = '';
let description = '';
let coverImage = '';
let averageScore = '';
let format = '';
let seasonYear = '';
let season = '';
let episodesCount = 0;
let characters = [];
if (isAnilistFormat) { if (isAnilistFormat) {
title = data.title.romaji || data.title.english || data.title.native || 'Anime Title'; title = data.title.romaji || data.title.english || data.title.native || 'Anime Title';
description = data.description || 'No description available.'; description = data.description || 'No description available.';
coverImage = data.coverImage?.large || data.coverImage?.medium || ''; coverImage = data.coverImage?.large || data.coverImage?.medium || '';
@@ -62,20 +86,19 @@ async function loadMetadata() {
seasonYear = data.year || ''; seasonYear = data.year || '';
} }
if (isAnilistFormat && data.idMal) {
isAnilist = true;
malId = data.idMal;
} else {
isAnilist = false;
malId = null;
}
document.getElementById('anime-title-details').innerText = title; document.getElementById('anime-title-details').innerText = title;
document.getElementById('anime-title-details2').innerText = title; document.getElementById('anime-title-details2').innerText = title;
animeTitle = title;
document.title = `Watching ${title} - Ep ${currentEpisode}`; document.title = `Watching ${title} - Ep ${currentEpisode}`;
fetch("/api/rpc", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({
details: title,
state: `Episode ${currentEpisode}`,
mode: "watching"
})
});
const tempDiv = document.createElement('div'); const tempDiv = document.createElement('div');
tempDiv.innerHTML = description; tempDiv.innerHTML = description;
document.getElementById('detail-description').innerText = tempDiv.textContent || tempDiv.innerText || 'No description available.'; document.getElementById('detail-description').innerText = tempDiv.textContent || tempDiv.innerText || 'No description available.';
@@ -85,7 +108,8 @@ async function loadMetadata() {
document.getElementById('detail-season').innerText = season && seasonYear ? `${season} ${seasonYear}` : (season || seasonYear || '--'); document.getElementById('detail-season').innerText = season && seasonYear ? `${season} ${seasonYear}` : (season || seasonYear || '--');
document.getElementById('detail-cover-image').src = coverImage || '/default-cover.jpg'; document.getElementById('detail-cover-image').src = coverImage || '/default-cover.jpg';
if (extName) { // Solo cargamos episodios de extensión si hay extensión real y no es local
if (extName && extName !== 'local') {
await loadExtensionEpisodes(); await loadExtensionEpisodes();
} else { } else {
if (data.nextAiringEpisode?.episode) { if (data.nextAiringEpisode?.episode) {
@@ -97,12 +121,7 @@ async function loadMetadata() {
} }
const simpleEpisodes = []; const simpleEpisodes = [];
for (let i = 1; i <= totalEpisodes; i++) { for (let i = 1; i <= totalEpisodes; i++) {
simpleEpisodes.push({ simpleEpisodes.push({ number: i, title: null, thumbnail: null, isDub: false });
number: i,
title: null,
thumbnail: null,
isDub: false
});
} }
populateEpisodeCarousel(simpleEpisodes); populateEpisodeCarousel(simpleEpisodes);
} }
@@ -116,27 +135,65 @@ async function loadMetadata() {
} }
} }
async function applyAniSkip(video) {
if (!isAnilist || !malId) return;
aniSkipData = await loadAniSkip(malId, currentEpisode, Math.floor(video.duration));
if (!aniSkipData || aniSkipData.length === 0) return;
const markers = [];
aniSkipData.forEach(item => {
const { startTime, endTime } = item.interval;
markers.push({
start: startTime,
end: endTime,
label: item.skipType === 'op' ? 'Opening' : 'Ending'
});
});
if (plyrInstance && markers.length > 0) {
setTimeout(() => {
const progressContainer = document.querySelector('.plyr__progress');
if (!progressContainer) return;
const oldMarkers = progressContainer.querySelector('.plyr__markers');
if (oldMarkers) oldMarkers.remove();
const markersContainer = document.createElement('div');
markersContainer.className = 'plyr__markers';
markers.forEach(marker => {
const markerElement = document.createElement('div');
markerElement.className = 'plyr__marker';
markerElement.dataset.label = marker.label;
const startPercent = (marker.start / video.duration) * 100;
const widthPercent = ((marker.end - marker.start) / video.duration) * 100;
markerElement.style.left = `${startPercent}%`;
markerElement.style.width = `${widthPercent}%`;
markerElement.addEventListener('click', (e) => {
e.stopPropagation();
video.currentTime = marker.start;
});
markersContainer.appendChild(markerElement);
});
progressContainer.appendChild(markersContainer);
}, 500);
}
}
async function loadExtensionEpisodes() { async function loadExtensionEpisodes() {
try { try {
const extQuery = extName ? `?source=${extName}` : "?source=anilist"; const res = await fetch(`/api/anime/${animeId}/episodes?source=${extName}`);
const res = await fetch(`/api/anime/${animeId}/episodes${extQuery}`);
const data = await res.json(); const data = await res.json();
totalEpisodes = Array.isArray(data) ? data.length : 0; totalEpisodes = Array.isArray(data) ? data.length : 0;
populateEpisodeCarousel(Array.isArray(data) ? data : []);
if (Array.isArray(data) && data.length > 0) {
populateEpisodeCarousel(data);
} else {
const fallback = [];
for (let i = 1; i <= totalEpisodes; i++) {
fallback.push({ number: i, title: null, thumbnail: null });
}
populateEpisodeCarousel(fallback);
}
} catch (e) { } catch (e) {
console.error("Error cargando episodios por extensión:", e); console.error("Error cargando episodios:", e);
totalEpisodes = 0;
} }
} }
@@ -148,15 +205,12 @@ function populateEpisodeCarousel(episodesData) {
const epNumber = ep.number || ep.episodeNumber || ep.id || (index + 1); const epNumber = ep.number || ep.episodeNumber || ep.id || (index + 1);
if (!epNumber) return; if (!epNumber) return;
const extParam = extName ? `?${extName}` : ""; const extParam = (extName && extName !== 'local') ? `?${extName}` : "";
const hasThumbnail = ep.thumbnail && ep.thumbnail.trim() !== ''; const hasThumbnail = ep.thumbnail && ep.thumbnail.trim() !== '';
const link = document.createElement('a'); const link = document.createElement('a');
link.href = `/watch/${animeId}/${epNumber}${extParam}`; link.href = `/watch/${animeId}/${epNumber}${extParam}`;
link.classList.add('carousel-item'); link.classList.add('carousel-item');
link.dataset.episode = epNumber;
if (!hasThumbnail) link.classList.add('no-thumbnail');
if (parseInt(epNumber) === currentEpisode) link.classList.add('active-ep-carousel'); if (parseInt(epNumber) === currentEpisode) link.classList.add('active-ep-carousel');
const imgContainer = document.createElement('div'); const imgContainer = document.createElement('div');
@@ -164,21 +218,15 @@ function populateEpisodeCarousel(episodesData) {
if (hasThumbnail) { if (hasThumbnail) {
const img = document.createElement('img'); const img = document.createElement('img');
img.classList.add('carousel-item-img');
img.src = ep.thumbnail; img.src = ep.thumbnail;
img.alt = `Episode ${epNumber} Thumbnail`; img.classList.add('carousel-item-img');
imgContainer.appendChild(img); imgContainer.appendChild(img);
} }
link.appendChild(imgContainer); link.appendChild(imgContainer);
const info = document.createElement('div'); const info = document.createElement('div');
info.classList.add('carousel-item-info'); info.classList.add('carousel-item-info');
info.innerHTML = `<p>Ep ${epNumber}: ${ep.title || 'Untitled'}</p>`;
const title = document.createElement('p');
title.innerText = `Ep ${epNumber}: ${ep.title || 'Untitled'}`;
info.appendChild(title);
link.appendChild(info); link.appendChild(info);
carousel.appendChild(link); carousel.appendChild(link);
}); });
@@ -189,28 +237,27 @@ async function loadExtensions() {
const res = await fetch('/api/extensions/anime'); const res = await fetch('/api/extensions/anime');
const data = await res.json(); const data = await res.json();
const select = document.getElementById('extension-select'); const select = document.getElementById('extension-select');
let extensions = data.extensions || [];
if (data.extensions && data.extensions.length > 0) { if (extName === 'local' && !extensions.includes('local')) {
select.innerHTML = ''; extensions.push('local');
data.extensions.forEach(ext => {
const opt = document.createElement('option');
opt.value = opt.innerText = ext;
select.appendChild(opt);
});
if (typeof extName === 'string' && data.extensions.includes(extName)) {
select.value = extName;
} else {
select.selectedIndex = 0;
}
currentExtension = select.value;
onExtensionChange();
} else {
select.innerHTML = '<option>No Extensions</option>';
select.disabled = true;
setLoading("No anime extensions found.");
} }
select.innerHTML = '';
extensions.forEach(ext => {
const opt = document.createElement('option');
opt.value = opt.innerText = ext;
select.appendChild(opt);
});
if (extName && extensions.includes(extName)) {
select.value = extName;
} else if (extensions.length > 0) {
select.value = extensions[0];
}
currentExtension = select.value;
onExtensionChange();
} catch (error) { } catch (error) {
console.error("Extension Error:", error); console.error("Extension Error:", error);
} }
@@ -219,83 +266,69 @@ async function loadExtensions() {
async function onExtensionChange() { async function onExtensionChange() {
const select = document.getElementById('extension-select'); const select = document.getElementById('extension-select');
currentExtension = select.value; currentExtension = select.value;
setLoading("Fetching extension settings...");
if (currentExtension === 'local') {
document.getElementById('sd-toggle').style.display = 'none';
document.getElementById('server-select').style.display = 'none';
loadStream();
return;
}
setLoading("Fetching extension settings...");
try { try {
const res = await fetch(`/api/extensions/${currentExtension}/settings`); const res = await fetch(`/api/extensions/${currentExtension}/settings`);
const settings = await res.json(); const settings = await res.json();
const toggle = document.getElementById('sd-toggle'); const toggle = document.getElementById('sd-toggle');
if (settings.supportsDub) { toggle.style.display = settings.supportsDub ? 'flex' : 'none';
toggle.style.display = 'flex'; setAudioMode('sub');
setAudioMode('sub');
} else {
toggle.style.display = 'none';
setAudioMode('sub');
}
const serverSelect = document.getElementById('server-select'); const serverSelect = document.getElementById('server-select');
serverSelect.innerHTML = ''; serverSelect.innerHTML = '';
if (settings.episodeServers && settings.episodeServers.length > 0) { if (settings.episodeServers?.length > 0) {
settings.episodeServers.forEach(srv => { settings.episodeServers.forEach(srv => {
const opt = document.createElement('option'); const opt = document.createElement('option');
opt.value = srv; opt.value = opt.innerText = srv;
opt.innerText = srv;
serverSelect.appendChild(opt); serverSelect.appendChild(opt);
}); });
serverSelect.style.display = 'block'; serverSelect.style.display = 'block';
} else { } else {
serverSelect.style.display = 'none'; serverSelect.style.display = 'none';
} }
loadStream(); loadStream();
} catch (error) { } catch (error) {
console.error(error); setLoading("Failed to load settings.");
setLoading("Failed to load extension settings.");
} }
} }
function toggleAudioMode() {
const newMode = audioMode === 'sub' ? 'dub' : 'sub';
setAudioMode(newMode);
loadStream();
}
function setAudioMode(mode) {
audioMode = mode;
const toggle = document.getElementById('sd-toggle');
const subOpt = document.getElementById('opt-sub');
const dubOpt = document.getElementById('opt-dub');
toggle.setAttribute('data-state', mode);
subOpt.classList.toggle('active', mode === 'sub');
dubOpt.classList.toggle('active', mode === 'dub');
}
async function loadStream() { async function loadStream() {
if (!currentExtension) return; if (!currentExtension) return;
if (currentExtension === 'local') {
if (!localEntryId) {
setLoading("No existe en local");
return;
}
const localUrl = `/api/library/stream/anime/${localEntryId}/${currentEpisode}`;
playVideo(localUrl, []);
document.getElementById('loading-overlay').style.display = 'none';
return;
}
const serverSelect = document.getElementById('server-select'); const serverSelect = document.getElementById('server-select');
const server = serverSelect.value || "default"; const server = serverSelect.value || "default";
setLoading(`Loading stream (${audioMode})...`); setLoading(`Loading stream (${audioMode})...`);
try { try {
let sourc = "&source=anilist"; const sourc = (extName && extName !== 'local') ? `&source=${extName}` : "&source=anilist";
if (extName){
sourc = `&source=${extName}`;
}
const url = `/api/watch/stream?animeId=${animeId}&episode=${currentEpisode}&server=${server}&category=${audioMode}&ext=${currentExtension}${sourc}`; const url = `/api/watch/stream?animeId=${animeId}&episode=${currentEpisode}&server=${server}&category=${audioMode}&ext=${currentExtension}${sourc}`;
const res = await fetch(url); const res = await fetch(url);
const data = await res.json(); const data = await res.json();
if (data.error) { if (data.error || !data.videoSources?.length) {
setLoading(`Error: ${data.error}`); setLoading(data.error || "No video sources.");
return;
}
if (!data.videoSources || data.videoSources.length === 0) {
setLoading("No video sources found.");
return; return;
} }
@@ -307,34 +340,31 @@ async function loadStream() {
if (headers['Origin']) proxyUrl += `&origin=${encodeURIComponent(headers['Origin'])}`; if (headers['Origin']) proxyUrl += `&origin=${encodeURIComponent(headers['Origin'])}`;
if (headers['User-Agent']) proxyUrl += `&userAgent=${encodeURIComponent(headers['User-Agent'])}`; if (headers['User-Agent']) proxyUrl += `&userAgent=${encodeURIComponent(headers['User-Agent'])}`;
playVideo(proxyUrl, data.videoSources[0].subtitles || data.subtitles); playVideo(proxyUrl, source.subtitles || data.subtitles || []);
document.getElementById('loading-overlay').style.display = 'none'; document.getElementById('loading-overlay').style.display = 'none';
} catch (error) { } catch (error) {
setLoading("Stream error. Check console."); setLoading("Stream error.");
console.error(error);
} }
} }
function playVideo(url, subtitles = []) { function playVideo(url, subtitles = []) {
const video = document.getElementById('player'); const video = document.getElementById('player');
const isLocal = url.includes('/api/library/stream/');
if (Hls.isSupported()) { if (!isLocal && Hls.isSupported()) {
if (hlsInstance) hlsInstance.destroy(); if (hlsInstance) hlsInstance.destroy();
hlsInstance = new Hls({ xhrSetup: (xhr) => xhr.withCredentials = false }); hlsInstance = new Hls({ xhrSetup: (xhr) => xhr.withCredentials = false });
hlsInstance.loadSource(url); hlsInstance.loadSource(url);
hlsInstance.attachMedia(video); hlsInstance.attachMedia(video);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) { } else {
if (hlsInstance) hlsInstance.destroy();
video.src = url; video.src = url;
} }
if (plyrInstance) plyrInstance.destroy(); if (plyrInstance) plyrInstance.destroy();
while (video.textTracks.length > 0) video.removeChild(video.textTracks[0]);
while (video.textTracks.length > 0) {
video.removeChild(video.textTracks[0]);
}
subtitles.forEach(sub => { subtitles.forEach(sub => {
if (!sub.url) return;
const track = document.createElement('track'); const track = document.createElement('track');
track.kind = 'captions'; track.kind = 'captions';
track.label = sub.language || 'Unknown'; track.label = sub.language || 'Unknown';
@@ -350,65 +380,20 @@ function playVideo(url, subtitles = []) {
settings: ['captions', 'quality', 'speed'] settings: ['captions', 'quality', 'speed']
}); });
let alreadyTriggered = false; video.addEventListener('loadedmetadata', () => applyAniSkip(video));
video.addEventListener('timeupdate', () => {
if (!video.duration) return;
const percent = (video.currentTime / video.duration) * 100;
if (percent >= 80 && !alreadyTriggered) {
alreadyTriggered = true;
sendProgress();
}
});
video.play().catch(() => console.log("Autoplay blocked"));
} }
function setLoading(message) {
const overlay = document.getElementById('loading-overlay');
const text = document.getElementById('loading-text');
overlay.style.display = 'flex';
text.innerText = message;
}
const extParam = extName ? `?${extName}` : "";
document.getElementById('prev-btn').onclick = () => {
if (currentEpisode > 1) {
window.location.href = `/watch/${animeId}/${currentEpisode - 1}${extParam}`;
}
};
document.getElementById('next-btn').onclick = () => {
if (currentEpisode < totalEpisodes || totalEpisodes === 0) {
window.location.href = `/watch/${animeId}/${currentEpisode + 1}${extParam}`;
}
};
if (currentEpisode <= 1) {
document.getElementById('prev-btn').disabled = true;
}
async function sendProgress() { async function sendProgress() {
const token = localStorage.getItem('token'); const token = localStorage.getItem('token');
if (!token) return; if (!token) return;
const source = (extName && extName !== 'local') ? extName : "anilist";
const source = extName
? extName
: "anilist";
const body = { const body = {
entry_id: animeId, entry_id: animeId,
source: source, source: source,
entry_type: "ANIME", entry_type: "ANIME",
status: 'CURRENT', status: 'CURRENT',
progress: source === 'anilist' progress: currentEpisode
? Math.floor(currentEpisode)
: currentEpisode
}; };
try { try {
@@ -425,7 +410,38 @@ async function sendProgress() {
} }
} }
// Botones y Toggle
document.getElementById('sd-toggle').onclick = () => {
audioMode = audioMode === 'sub' ? 'dub' : 'sub';
setAudioMode(audioMode);
loadStream();
};
function setAudioMode(mode) {
const toggle = document.getElementById('sd-toggle');
toggle.setAttribute('data-state', mode);
document.getElementById('opt-sub').classList.toggle('active', mode === 'sub');
document.getElementById('opt-dub').classList.toggle('active', mode === 'dub');
}
function setLoading(message) {
document.getElementById('loading-text').innerText = message;
document.getElementById('loading-overlay').style.display = 'flex';
}
const extParam = (extName && extName !== 'local') ? `?${extName}` : "";
document.getElementById('prev-btn').onclick = () => {
if (currentEpisode > 1) window.location.href = `/watch/${animeId}/${currentEpisode - 1}${extParam}`;
};
document.getElementById('next-btn').onclick = () => {
if (currentEpisode < totalEpisodes || totalEpisodes === 0) window.location.href = `/watch/${animeId}/${currentEpisode + 1}${extParam}`;
};
if (currentEpisode <= 1) document.getElementById('prev-btn').disabled = true;
setInterval(() => {
if (plyrInstance && !plyrInstance.paused) sendProgress();
}, 60000);
loadMetadata(); loadMetadata();
loadExtensions(); loadExtensions();

37
docker/src/scripts/auth-guard.js
View File

@@ -43,6 +43,43 @@ async function loadMeUI() {
} }
} }
// Variable para saber si el modal ya fue cargado
let settingsModalLoaded = false;
document.getElementById('nav-settings').addEventListener('click', openSettings)
async function openSettings() {
if (!settingsModalLoaded) {
try {
const res = await fetch('/views/components/settings-modal.html')
const html = await res.text()
document.body.insertAdjacentHTML('beforeend', html)
settingsModalLoaded = true;
// Esperar un momento para que el DOM se actualice
await new Promise(resolve => setTimeout(resolve, 50));
// Ahora cargar los settings
if (window.toggleSettingsModal) {
await window.toggleSettingsModal(false);
}
} catch (err) {
console.error('Error loading settings modal:', err);
}
} else {
if (window.toggleSettingsModal) {
await window.toggleSettingsModal(false);
}
}
}
function closeSettings() {
const modal = document.getElementById('settings-modal');
if (modal) {
modal.classList.add('hidden');
}
}
function setupDropdown() { function setupDropdown() {
const userAvatarBtn = document.querySelector(".user-avatar-btn") const userAvatarBtn = document.querySelector(".user-avatar-btn")
const navDropdown = document.getElementById("nav-dropdown") const navDropdown = document.getElementById("nav-dropdown")

168
docker/src/scripts/books/book.js
View File

@@ -6,6 +6,8 @@ let bookSlug = null;
let allChapters = []; let allChapters = [];
let filteredChapters = []; let filteredChapters = [];
let availableExtensions = [];
let isLocal = false;
const chapterPagination = Object.create(PaginationManager); const chapterPagination = Object.create(PaginationManager);
chapterPagination.init(12, () => renderChapterTable()); chapterPagination.init(12, () => renderChapterTable());
@@ -14,9 +16,42 @@ document.addEventListener('DOMContentLoaded', () => {
setupModalClickOutside(); setupModalClickOutside();
}); });
async function checkLocalLibraryEntry() {
try {
const res = await fetch(`/api/library/manga/${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 status:", e);
}
}
function markAsLocal() {
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)';
}
}
async function init() { async function init() {
try { try {
const urlData = URLUtils.parseEntityPath('book'); const urlData = URLUtils.parseEntityPath('book');
if (!urlData) { if (!urlData) {
showError("Book Not Found"); showError("Book Not Found");
@@ -26,9 +61,10 @@ async function init() {
extensionName = urlData.extensionName; extensionName = urlData.extensionName;
bookId = urlData.entityId; bookId = urlData.entityId;
bookSlug = urlData.slug; bookSlug = urlData.slug;
await checkLocalLibraryEntry();
await loadBookMetadata(); await loadBookMetadata();
await loadAvailableExtensions();
await loadChapters(); await loadChapters();
await setupAddToListButton(); await setupAddToListButton();
@@ -39,11 +75,23 @@ async function init() {
} }
} }
async function loadAvailableExtensions() {
try {
const res = await fetch('/api/extensions/book');
const data = await res.json();
availableExtensions = data.extensions || [];
setupProviderFilter();
} catch (err) {
console.error("Error fetching extensions:", err);
}
}
async function loadBookMetadata() { async function loadBookMetadata() {
const source = extensionName || 'anilist'; const source = extensionName || 'anilist';
const fetchUrl = `/api/book/${bookId}?source=${source}`; const fetchUrl = `/api/book/${bookId}?source=${source}`;
const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() }); const res = await fetch(fetchUrl);
const data = await res.json(); const data = await res.json();
if (data.error || !data) { if (data.error || !data) {
@@ -55,7 +103,8 @@ async function loadBookMetadata() {
bookData = raw; bookData = raw;
const metadata = MediaMetadataUtils.formatBookData(raw, !!extensionName); const metadata = MediaMetadataUtils.formatBookData(raw, !!extensionName);
bookData.entry_type =
metadata.format === 'MANGA' ? 'MANGA' : 'NOVEL';
updatePageTitle(metadata.title); updatePageTitle(metadata.title);
updateMetadata(metadata); updateMetadata(metadata);
updateExtensionPill(); updateExtensionPill();
@@ -154,39 +203,61 @@ function updateCustomAddButton() {
} }
} }
async function loadChapters() { async function loadChapters(targetProvider = null) {
const tbody = document.getElementById('chapters-body'); const tbody = document.getElementById('chapters-body');
if (!tbody) return; if (!tbody) return;
tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">Searching extensions for chapters...</td></tr>'; if (!targetProvider) {
const select = document.getElementById('provider-filter');
targetProvider = select ? select.value : (availableExtensions[0] || 'all');
}
tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">Loading chapters...</td></tr>';
try { try {
const source = extensionName || 'anilist'; let fetchUrl;
const fetchUrl = `/api/book/${bookId}/chapters?source=${source}`; let isLocalRequest = targetProvider === 'local';
const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() }); if (isLocalRequest) {
// Nuevo endpoint para archivos locales
fetchUrl = `/api/library/manga/${bookId}/units`;
} else {
const source = extensionName || 'anilist';
fetchUrl = `/api/book/${bookId}/chapters?source=${source}`;
if (targetProvider !== 'all') fetchUrl += `&provider=${targetProvider}`;
}
const res = await fetch(fetchUrl);
const data = await res.json(); const data = await res.json();
allChapters = data.chapters || []; // Mapeo de datos: Si es local usamos 'units', si no, usamos 'chapters'
filteredChapters = [...allChapters]; if (isLocalRequest) {
allChapters = (data.units || []).map((unit, idx) => ({
number: unit.number,
title: unit.name,
provider: 'local',
index: idx, // ✅ índice (0,1,2…)
format: unit.format
}));
} else {
allChapters = data.chapters || [];
}
filteredChapters = [...allChapters];
applyChapterFilter(); applyChapterFilter();
const totalEl = document.getElementById('total-chapters'); const totalEl = document.getElementById('total-chapters');
if (allChapters.length === 0) { if (allChapters.length === 0) {
tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters found on loaded extensions.</td></tr>'; tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters found.</td></tr>';
if (totalEl) totalEl.innerText = "0 Found"; if (totalEl) totalEl.innerText = "0 Found";
return; return;
} }
if (totalEl) totalEl.innerText = `${allChapters.length} Found`; if (totalEl) totalEl.innerText = `${allChapters.length} Found`;
setupProviderFilter();
setupReadButton(); setupReadButton();
chapterPagination.setTotalItems(filteredChapters.length); chapterPagination.setTotalItems(filteredChapters.length);
chapterPagination.reset();
renderChapterTable(); renderChapterTable();
} catch (err) { } catch (err) {
@@ -213,42 +284,42 @@ function setupProviderFilter() {
const select = document.getElementById('provider-filter'); const select = document.getElementById('provider-filter');
if (!select) return; if (!select) return;
const providers = [...new Set(allChapters.map(ch => ch.provider))];
if (providers.length === 0) return;
select.style.display = 'inline-block'; select.style.display = 'inline-block';
select.innerHTML = '<option value="all">All Providers</option>'; select.innerHTML = '';
providers.forEach(prov => { // Opción para cargar todo
const allOpt = document.createElement('option');
allOpt.value = 'all';
allOpt.innerText = 'Load All (Slower)';
select.appendChild(allOpt);
// NUEVO: Si es local, añadimos la opción 'local' al principio
if (isLocal) {
const localOpt = document.createElement('option');
localOpt.value = 'local';
localOpt.innerText = 'Local';
select.appendChild(localOpt);
}
// Añadir extensiones normales
availableExtensions.forEach(ext => {
const opt = document.createElement('option'); const opt = document.createElement('option');
opt.value = prov; opt.value = ext;
opt.innerText = prov; opt.innerText = ext.charAt(0).toUpperCase() + ext.slice(1);
select.appendChild(opt); select.appendChild(opt);
}); });
if (extensionName) { // Lógica de selección automática
const extensionProvider = providers.find( if (isLocal) {
p => p.toLowerCase() === extensionName.toLowerCase() select.value = 'local'; // Prioridad si es local
); } else if (extensionName && availableExtensions.includes(extensionName)) {
select.value = extensionName;
if (extensionProvider) { } else if (availableExtensions.length > 0) {
select.value = extensionProvider; select.value = availableExtensions[0];
filteredChapters = allChapters.filter(ch => ch.provider === extensionProvider);
}
} }
select.onchange = (e) => { select.onchange = () => {
const selected = e.target.value; loadChapters(select.value);
if (selected === 'all') {
filteredChapters = [...allChapters];
} else {
filteredChapters = allChapters.filter(ch => ch.provider === selected);
}
chapterPagination.reset();
chapterPagination.setTotalItems(filteredChapters.length);
renderChapterTable();
}; };
} }
@@ -303,7 +374,14 @@ function renderChapterTable() {
} }
function openReader(chapterId, provider) { function openReader(chapterId, provider) {
window.location.href = URLUtils.buildReadUrl(bookId, chapterId, provider, extensionName); const effectiveExtension = extensionName || 'anilist';
window.location.href = URLUtils.buildReadUrl(
bookId, // SIEMPRE anilist
chapterId, // número normal
provider, // 'local' o extensión
extensionName || 'anilist'
);
} }
function setupModalClickOutside() { function setupModalClickOutside() {

3
docker/src/scripts/books/books.js
View File

@@ -55,7 +55,8 @@ function startHeroCycle() {
async function updateHeroUI(book) { async function updateHeroUI(book) {
if(!book) return; if(!book) return;
book.entry_type =
book.format === 'MANGA' ? 'MANGA' : 'NOVEL';
const title = book.title.english || book.title.romaji; const title = book.title.english || book.title.romaji;
const desc = book.description || "No description available."; const desc = book.description || "No description available.";
const poster = (book.coverImage && (book.coverImage.extraLarge || book.coverImage.large)) || ''; const poster = (book.coverImage && (book.coverImage.extraLarge || book.coverImage.large)) || '';

60
docker/src/scripts/books/reader.js
View File

@@ -129,11 +129,44 @@ async function loadChapter() {
if (!source) { if (!source) {
source = 'anilist'; source = 'anilist';
} }
const newEndpoint = `/api/book/${bookId}/${chapter}/${provider}?source=${source}`; let newEndpoint;
if (provider === 'local') {
newEndpoint = `/api/library/manga/${bookId}/units`;
} else {
newEndpoint = `/api/book/${bookId}/${chapter}/${provider}?source=${source}`;
}
try { try {
const res = await fetch(newEndpoint); const res = await fetch(newEndpoint);
const data = await res.json(); const data = await res.json();
if (provider === 'local') {
const unit = data.units[Number(chapter)];
if (!unit) {
reader.innerHTML = '<div class="loading-container"><span>Chapter not found</span></div>';
return;
}
if (unit.format === 'cbz') {
chapterLabel.textContent = unit.name; // ✅
document.title = unit.name;
const pagesRes = await fetch(
`/api/library/manga/cbz/${unit.id}/pages`
);
const pagesData = await pagesRes.json();
currentType = 'manga';
updateSettingsVisibility();
applyStyles();
currentPages = pagesData.pages.map(url => ({ url }));
reader.innerHTML = '';
loadManga(currentPages);
return;
}
}
if (data.title) { if (data.title) {
chapterLabel.textContent = data.title; chapterLabel.textContent = data.title;
@@ -145,18 +178,6 @@ async function loadChapter() {
setupProgressTracking(data, source); setupProgressTracking(data, source);
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) { if (data.error) {
reader.innerHTML = ` reader.innerHTML = `
<div class="loading-container"> <div class="loading-container">
@@ -172,8 +193,13 @@ async function loadChapter() {
reader.innerHTML = ''; reader.innerHTML = '';
if (data.type === 'manga') { if (data.type === 'manga') {
currentPages = data.pages || []; if (provider === 'local' && data.format === 'cbz') {
loadManga(currentPages); currentPages = data.pages.map(url => ({ url }));
loadManga(currentPages);
} else {
currentPages = data.pages || [];
loadManga(currentPages);
}
} else if (data.type === 'ln') { } else if (data.type === 'ln') {
loadLN(data.content); loadLN(data.content);
} }
@@ -293,7 +319,9 @@ function createImageElement(page, index) {
img.className = 'page-img'; img.className = 'page-img';
img.dataset.index = index; img.dataset.index = index;
const url = buildProxyUrl(page.url, page.headers); const url = provider === 'local'
? page.url
: buildProxyUrl(page.url, page.headers);
const placeholder = "/public/assets/placeholder.svg"; const placeholder = "/public/assets/placeholder.svg";
img.onerror = () => { img.onerror = () => {

4
docker/src/scripts/gallery/gallery.js
View File

@@ -1,5 +1,5 @@
const providerSelector = document.getElementById('provider-selector'); const providerSelector = document.getElementById('provider-selector');
const searchInput = document.getElementById('main-search-input'); const searchInput = document.getElementById('search-input');
const resultsContainer = document.getElementById('gallery-results'); const resultsContainer = document.getElementById('gallery-results');
let currentPage = 1; let currentPage = 1;
@@ -299,7 +299,7 @@ async function searchGallery(isLoadMore = false) {
const msg = favoritesMode const msg = favoritesMode
? (query ? 'No favorites found matching your search' : 'You don\'t have any favorite images yet') ? (query ? 'No favorites found matching your search' : 'You don\'t have any favorite images yet')
: 'No results found'; : 'No results found';
resultsContainer.innerHTML = `<p style="text-align:center;color:var(--text-secondary);padding:4rem;font-size:1.1rem;">${msg}</p>`; resultsContainer.innerHTML = `<p style="text-align:center;color:var(--color-text-secondary);padding:4rem;font-size:1.1rem;">${msg}</p>`;
} }
if (msnry) msnry.layout(); if (msnry) msnry.layout();

36
docker/src/scripts/list.js
View File

@@ -29,20 +29,32 @@ async function populateSourceFilter() {
`; `;
try { try {
const response = await fetch(`${API_BASE}/extensions`); const [animeRes, bookRes] = await Promise.all([
if (response.ok) { fetch(`${API_BASE}/extensions/anime`),
const data = await response.json(); fetch(`${API_BASE}/extensions/book`)
const extensions = data.extensions || []; ]);
extensions.forEach(extName => { const extensions = new Set();
if (extName.toLowerCase() !== 'anilist' && extName.toLowerCase() !== 'local') {
const option = document.createElement('option'); if (animeRes.ok) {
option.value = extName; const data = await animeRes.json();
option.textContent = extName.charAt(0).toUpperCase() + extName.slice(1); (data.extensions || []).forEach(ext => extensions.add(ext));
select.appendChild(option);
}
});
} }
if (bookRes.ok) {
const data = await bookRes.json();
(data.extensions || []).forEach(ext => extensions.add(ext));
}
extensions.forEach(extName => {
const lower = extName.toLowerCase();
if (lower !== 'anilist' && lower !== 'local') {
const option = document.createElement('option');
option.value = extName;
option.textContent = extName.charAt(0).toUpperCase() + extName.slice(1);
select.appendChild(option);
}
});
} catch (error) { } catch (error) {
console.error('Error loading extensions:', error); console.error('Error loading extensions:', error);
} }

89
docker/src/scripts/local-library-books.js Normal file
View File

@@ -0,0 +1,89 @@
let activeFilter = 'all';
let activeSort = 'az';
let isLocalMode = false;
let localEntries = [];
function toggleLibraryMode() {
isLocalMode = !isLocalMode;
const btn = document.getElementById('library-mode-btn');
const onlineContent = document.getElementById('online-content');
const localContent = document.getElementById('local-content');
if (isLocalMode) {
btn.classList.add('active');
onlineContent.classList.add('hidden');
localContent.classList.remove('hidden');
loadLocalEntries();
} else {
btn.classList.remove('active');
onlineContent.classList.remove('hidden');
localContent.classList.add('hidden');
}
}
async function loadLocalEntries() {
const grid = document.getElementById('local-entries-grid');
grid.innerHTML = '<div class="skeleton-card"></div>'.repeat(6);
try {
// Cambiado a endpoint de libros
const response = await fetch('/api/library/manga');
const entries = await response.json();
localEntries = entries;
if (entries.length === 0) {
grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: var(--color-text-secondary); padding: 3rem;">No books found in your local library.</p>';
return;
}
renderLocalEntries(entries);
} catch (err) {
grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: var(--color-danger); padding: 3rem;">Error loading local books.</p>';
}
}
function renderLocalEntries(entries) {
const grid = document.getElementById('local-entries-grid');
grid.innerHTML = entries.map(entry => {
const title = entry.metadata?.title?.romaji || entry.metadata?.title?.english || entry.id;
const cover = entry.metadata?.coverImage?.extraLarge || '/public/assets/placeholder.jpg';
const chapters = entry.metadata?.chapters || '??';
return `
<div class="local-card" onclick="viewLocalEntry(${entry.metadata?.id || 'null'})">
<div class="card-img-wrap">
<img src="${cover}" alt="${title}" loading="lazy">
</div>
<div class="local-card-info">
<div class="local-card-title">${title}</div>
<p style="font-size: 0.85rem; color: var(--color-text-secondary); margin: 0;">
${chapters} Chapters
</p>
<div class="match-status ${entry.matched ? 'status-linked' : 'status-unlinked'}">
${entry.matched ? '● Linked' : '○ Unlinked'}
</div>
</div>
</div>
`;
}).join('');
}
async function scanLocalLibrary() {
const btnText = document.getElementById('scan-text');
btnText.innerText = "Scanning...";
try {
// Asumiendo que el scan de libros usa este query param
const response = await fetch('/api/library/scan?mode=incremental', { method: 'POST' });
if (response.ok) {
await loadLocalEntries();
if (window.NotificationUtils) NotificationUtils.show('Library scanned!', 'success');
}
} catch (err) {
if (window.NotificationUtils) NotificationUtils.show('Scan failed', 'error');
} finally {
btnText.innerText = "Scan Library";
}
}
function viewLocalEntry(id) {
if (id) window.location.href = `/book/${id}`;
}

209
docker/src/scripts/local-library.js Normal file
View File

@@ -0,0 +1,209 @@
let activeFilter = 'all';
let activeSort = 'az';
let isLocalMode = false;
let localEntries = [];
function toggleLibraryMode() {
isLocalMode = !isLocalMode;
const btn = document.getElementById('library-mode-btn');
const onlineContent = document.getElementById('online-content');
const localContent = document.getElementById('local-content');
const svg = btn.querySelector('svg');
const label = btn.querySelector('span');
if (isLocalMode) {
// LOCAL MODE
btn.classList.add('active');
onlineContent.classList.add('hidden');
localContent.classList.remove('hidden');
loadLocalEntries();
svg.innerHTML = `
<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"/>
`;
} else {
// ONLINE MODE
btn.classList.remove('active');
onlineContent.classList.remove('hidden');
localContent.classList.add('hidden');
svg.innerHTML = `
<circle cx="12" cy="12" r="10"/>
<line x1="2" y1="12" x2="22" y2="12"/>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
`;
}
}
async function loadLocalEntries() {
const grid = document.getElementById('local-entries-grid');
grid.innerHTML = '<div class="skeleton-card"></div>'.repeat(8);
try {
const response = await fetch('/api/library/anime');
const entries = await response.json();
localEntries = entries;
if (entries.length === 0) {
grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: var(--color-text-secondary); padding: 3rem;">No anime found in your local library. Click "Scan Library" to scan your folders.</p>';
return;
}
// Renderizar grid
grid.innerHTML = entries.map(entry => {
const title = entry.metadata?.title?.romaji || entry.metadata?.title?.english || entry.id;
const cover = entry.metadata?.coverImage?.extraLarge || entry.metadata?.coverImage?.large || '/public/assets/placeholder.jpg';
const score = entry.metadata?.averageScore || '--';
const episodes = entry.metadata?.episodes || '??';
return `
<div class="local-card" onclick="viewLocalEntry(${entry.metadata?.id || 'null'})">
<div class="card-img-wrap">
<img src="${cover}" alt="${title}" loading="lazy">
</div>
<div class="local-card-info">
<div class="local-card-title">${title}</div>
<p style="font-size: 0.85rem; color: var(--color-text-secondary); margin: 0;">
${score}% • ${episodes} Eps
</p>
<div class="match-status ${entry.matched ? 'status-linked' : 'status-unlinked'}">
${entry.matched ? '● Linked' : '○ Unlinked'}
</div>
</div>
</div>
`;
}).join('');
} catch (err) {
console.error('Error loading local entries:', err);
grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: var(--color-danger); padding: 3rem;">Error loading local library. Make sure the backend is running.</p>';
}
}
async function scanLocalLibrary() {
const btnText = document.getElementById('scan-text');
const originalText = btnText.innerText;
btnText.innerText = "Scanning...";
try {
const response = await fetch('/api/library/scan?mode=incremental', {
method: 'POST'
});
if (response.ok) {
await loadLocalEntries();
// Mostrar notificación de éxito si tienes sistema de notificaciones
if (window.NotificationUtils) {
NotificationUtils.show('Library scanned successfully!', 'success');
}
} else {
throw new Error('Scan failed');
}
} catch (err) {
console.error("Scan failed", err);
alert("Failed to scan library. Check console for details.");
// Mostrar notificación de error si tienes sistema de notificaciones
if (window.NotificationUtils) {
NotificationUtils.show('Failed to scan library', 'error');
}
} finally {
btnText.innerText = originalText;
}
}
function viewLocalEntry(anilistId) {
if (!anilistId) {
console.warn('Anime not linked');
return;
}
window.location.href = `/anime/${anilistId}`;
}
function renderLocalEntries(entries) {
const grid = document.getElementById('local-entries-grid');
grid.innerHTML = entries.map(entry => {
const title = entry.metadata?.title?.romaji
|| entry.metadata?.title?.english
|| entry.id;
const cover =
entry.metadata?.coverImage?.extraLarge
|| entry.metadata?.coverImage?.large
|| '/public/assets/placeholder.jpg';
const score = entry.metadata?.averageScore || '--';
const episodes = entry.metadata?.episodes || '??';
return `
<div class="local-card" onclick="viewLocalEntry(${entry.metadata?.id || 'null'})">
<div class="card-img-wrap">
<img src="${cover}" alt="${title}" loading="lazy">
</div>
<div class="local-card-info">
<div class="local-card-title">${title}</div>
<p style="font-size: 0.85rem; color: var(--color-text-secondary); margin: 0;">
${score}% • ${episodes} Eps
</p>
<div class="match-status ${entry.matched ? 'status-linked' : 'status-unlinked'}">
${entry.matched ? '● Linked' : '○ Unlinked'}
</div>
</div>
</div>
`;
}).join('');
}
function applyLocalFilters() {
let filtered = [...localEntries];
if (activeFilter === 'linked') {
filtered = filtered.filter(e => e.matched);
}
if (activeFilter === 'unlinked') {
filtered = filtered.filter(e => !e.matched);
}
if (activeSort === 'az') {
filtered.sort((a, b) =>
(a.metadata?.title?.romaji || a.id)
.localeCompare(b.metadata?.title?.romaji || b.id)
);
}
if (activeSort === 'za') {
filtered.sort((a, b) =>
(b.metadata?.title?.romaji || b.id)
.localeCompare(a.metadata?.title?.romaji || a.id)
);
}
renderLocalEntries(filtered);
}
document.addEventListener('click', e => {
const btn = e.target.closest('.filter-btn');
if (!btn) return;
if (btn.dataset.filter) {
activeFilter = btn.dataset.filter;
}
if (btn.dataset.sort) {
activeSort = btn.dataset.sort;
}
btn
.closest('.local-filters')
.querySelectorAll('.filter-btn')
.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
applyLocalFilters();
});

590
docker/src/scripts/marketplace.js
View File

@@ -1,422 +1,262 @@
const GITEA_INSTANCE = 'https://git.waifuboard.app'; const ORIGINAL_MARKETPLACE_URL = 'https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/marketplace.json';
const REPO_OWNER = 'ItsSkaiya'; const MARKETPLACE_JSON_URL = `/api/proxy?url=${encodeURIComponent(ORIGINAL_MARKETPLACE_URL)}`;
const REPO_NAME = 'WaifuBoard-Extensions';
let DETECTED_BRANCH = 'main';
const API_URL_BASE = `${GITEA_INSTANCE}/api/v1/repos/${REPO_OWNER}/${REPO_NAME}/contents`;
const INSTALLED_EXTENSIONS_API = '/api/extensions'; const INSTALLED_EXTENSIONS_API = '/api/extensions';
const UPDATE_EXTENSIONS_API = '/api/extensions/update';
const extensionsGrid = document.getElementById('extensions-grid'); const marketplaceContent = document.getElementById('marketplace-content');
const filterSelect = document.getElementById('extension-filter'); const filterSelect = document.getElementById('extension-filter');
const updateAllBtn = document.getElementById('btn-update-all');
let allExtensionsData = []; const modal = document.getElementById('customModal');
const customModal = document.getElementById('customModal');
const modalTitle = document.getElementById('modalTitle'); const modalTitle = document.getElementById('modalTitle');
const modalMessage = document.getElementById('modalMessage'); const modalMessage = document.getElementById('modalMessage');
const modalConfirmBtn = document.getElementById('modalConfirmButton');
const modalCloseBtn = document.getElementById('modalCloseButton');
function getRawUrl(filename) { let marketplaceMetadata = {};
let installedExtensions = [];
let currentTab = 'marketplace';
const targetUrl = `${GITEA_INSTANCE}/${REPO_OWNER}/${REPO_NAME}/raw/branch/main/${filename}`; async function loadMarketplace() {
showSkeletons();
const encodedUrl = encodeURIComponent(targetUrl);
return `/api/proxy?url=${encodedUrl}`;
}
function updateExtensionState(fileName, installed) {
const ext = allExtensionsData.find(e => e.fileName === fileName);
if (!ext) return;
ext.isInstalled = installed;
ext.isLocal = installed && ext.isLocal;
filterAndRenderExtensions(filterSelect?.value || 'All');
}
function formatExtensionName(fileName) {
return fileName.replace('.js', '')
.replace(/([a-z])([A-Z])/g, '$1 $2')
.replace(/^[a-z]/, (char) => char.toUpperCase());
}
function getIconUrl(extensionDetails) {
return extensionDetails;
}
async function getExtensionDetails(url) {
try { try {
const res = await fetch(url); const [metaRes, installedRes] = await Promise.all([
if (!res.ok) throw new Error(`Fetch failed: ${res.status}`); fetch(MARKETPLACE_JSON_URL).then(res => res.json()),
const text = await res.text(); fetch(INSTALLED_EXTENSIONS_API).then(res => res.json())
]);
const regex = /(?:this\.|const\s+|let\s+|var\s+)?baseUrl\s*=\s*(["'`])(.*?)\1/i; marketplaceMetadata = metaRes.extensions;
const match = text.match(regex); installedExtensions = (installedRes.extensions || []).map(e => e.toLowerCase());
let finalHostname = null;
if (match && match[2]) { initTabs();
let rawUrl = match[2].trim(); renderGroupedView();
if (!rawUrl.startsWith('http')) rawUrl = 'https://' + rawUrl;
try { if (filterSelect) {
const urlObj = new URL(rawUrl); filterSelect.addEventListener('change', () => renderGroupedView());
finalHostname = urlObj.hostname;
} catch(e) {
console.warn(`Could not parse baseUrl: ${rawUrl}`);
}
} }
const classMatch = text.match(/class\s+(\w+)/); if (updateAllBtn) {
const name = classMatch ? classMatch[1] : null; updateAllBtn.onclick = handleUpdateAll;
}
let type = 'Image'; } catch (error) {
if (text.includes('type = "book-board"') || text.includes("type = 'book-board'")) type = 'Book'; console.error('Error loading marketplace:', error);
else if (text.includes('type = "anime-board"') || text.includes("type = 'anime-board'")) type = 'Anime'; marketplaceContent.innerHTML = `<div class="error-msg">Error al cargar el marketplace.</div>`;
return { baseUrl: finalHostname, name, type };
} catch (e) {
return { baseUrl: null, name: null, type: 'Unknown' };
} }
} }
function showCustomModal(title, message, isConfirm = false) { function initTabs() {
return new Promise(resolve => { const tabs = document.querySelectorAll('.tab-button');
tabs.forEach(tab => {
tab.onclick = () => {
tabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
currentTab = tab.dataset.tab;
modalTitle.textContent = title; if (updateAllBtn) {
modalMessage.textContent = message; if (currentTab === 'installed') {
updateAllBtn.classList.remove('hidden');
} else {
updateAllBtn.classList.add('hidden');
}
}
const currentConfirmButton = document.getElementById('modalConfirmButton'); renderGroupedView();
const currentCloseButton = document.getElementById('modalCloseButton');
const newConfirmButton = currentConfirmButton.cloneNode(true);
currentConfirmButton.parentNode.replaceChild(newConfirmButton, currentConfirmButton);
const newCloseButton = currentCloseButton.cloneNode(true);
currentCloseButton.parentNode.replaceChild(newCloseButton, currentCloseButton);
if (isConfirm) {
newConfirmButton.classList.remove('hidden');
newConfirmButton.textContent = 'Confirm';
newCloseButton.textContent = 'Cancel';
} else {
newConfirmButton.classList.add('hidden');
newCloseButton.textContent = 'Close';
}
const closeModal = (confirmed) => {
customModal.classList.add('hidden');
resolve(confirmed);
}; };
newConfirmButton.onclick = () => closeModal(true);
newCloseButton.onclick = () => closeModal(false);
customModal.classList.remove('hidden');
}); });
} }
function renderExtensionCard(extension, isInstalled, isLocalOnly = false) { async function handleUpdateAll() {
const originalText = updateAllBtn.innerText;
try {
updateAllBtn.disabled = true;
updateAllBtn.innerText = 'Updating...';
const extensionName = formatExtensionName(extension.fileName || extension.name); const res = await fetch(UPDATE_EXTENSIONS_API, { method: 'POST' });
const extensionType = extension.type || 'Unknown'; if (!res.ok) throw new Error('Update failed');
let iconUrl; const data = await res.json();
if (extension.baseUrl && extension.baseUrl !== 'Local Install') { if (data.updated && data.updated.length > 0) {
iconUrl = `https://www.google.com/s2/favicons?domain=${extension.baseUrl}&sz=128`; const list = data.updated.join(', ');
window.NotificationUtils.success(`Updated: ${list}`);
await loadMarketplace();
} else {
window.NotificationUtils.info('Everything is up to date.');
}
} catch (error) {
console.error('Update All Error:', error);
window.NotificationUtils.error('Failed to perform bulk update.');
} finally {
updateAllBtn.disabled = false;
updateAllBtn.innerText = originalText;
}
}
function renderGroupedView() {
marketplaceContent.innerHTML = '';
const activeFilter = filterSelect.value;
const groups = {};
let listToRender = [];
if (currentTab === 'marketplace') {
for (const [id, data] of Object.entries(marketplaceMetadata)) {
listToRender.push({
id,
...data,
isInstalled: installedExtensions.includes(id.toLowerCase())
});
}
} else { } else {
for (const [id, data] of Object.entries(marketplaceMetadata)) {
if (installedExtensions.includes(id.toLowerCase())) {
listToRender.push({ id, ...data, isInstalled: true });
}
}
const displayName = extensionName.replace(/\s/g, '+'); installedExtensions.forEach(id => {
iconUrl = `https://ui-avatars.com/api/?name=${displayName}&background=1f2937&color=fff&length=1`; const existsInMeta = Object.keys(marketplaceMetadata).some(k => k.toLowerCase() === id);
if (!existsInMeta) {
listToRender.push({
id: id,
name: id.charAt(0).toUpperCase() + id.slice(1),
type: 'Local',
author: 'Unknown',
isInstalled: true
});
}
});
} }
listToRender.forEach(ext => {
const type = ext.type || 'Other';
if (activeFilter !== 'All' && type !== activeFilter) return;
if (!groups[type]) groups[type] = [];
groups[type].push(ext);
});
const sortedTypes = Object.keys(groups).sort();
if (sortedTypes.length === 0) {
marketplaceContent.innerHTML = `<p class="empty-msg">No extensions found for this criteria.</p>`;
return;
}
sortedTypes.forEach(type => {
const section = document.createElement('div');
section.className = 'category-group';
const title = document.createElement('h2');
title.className = 'marketplace-section-title';
title.innerText = type.replace('-', ' ');
const grid = document.createElement('div');
grid.className = 'marketplace-grid';
groups[type].forEach(ext => grid.appendChild(createCard(ext)));
section.appendChild(title);
section.appendChild(grid);
marketplaceContent.appendChild(section);
});
}
function createCard(ext) {
const card = document.createElement('div'); const card = document.createElement('div');
card.className = `extension-card grid-item extension-type-${extensionType.toLowerCase()}`; card.className = `extension-card ${ext.nsfw ? 'nsfw-ext' : ''} ${ext.broken ? 'broken-ext' : ''}`;
card.dataset.path = extension.fileName || extension.name;
card.dataset.type = extensionType;
let buttonHtml; const iconUrl = `https://www.google.com/s2/favicons?domain=${ext.domain}&sz=128`;
let badgeHtml = '';
if (isInstalled) { let buttonHtml = '';
if (ext.isInstalled) {
if (isLocalOnly) { buttonHtml = `<button class="extension-action-button btn-uninstall">Uninstall</button>`;
badgeHtml = '<span class="extension-status-badge badge-local">Local</span>'; } else if (ext.broken) {
} else { buttonHtml = `<button class="extension-action-button" style="background: #4b5563; cursor: not-allowed;" disabled>Broken</button>`;
badgeHtml = '<span class="extension-status-badge badge-installed">Installed</span>';
}
buttonHtml = `
<button class="extension-action-button btn-uninstall" data-action="uninstall">Uninstall</button>
`;
} else { } else {
buttonHtml = `<button class="extension-action-button btn-install">Install</button>`;
buttonHtml = `
<button class="extension-action-button btn-install" data-action="install">Install</button>
`;
} }
card.innerHTML = ` card.innerHTML = `
<img class="extension-icon" src="${iconUrl}" alt="${extensionName} Icon" onerror="this.onerror=null; this.src='https://ui-avatars.com/api/?name=E&background=1f2937&color=fff&length=1'"> <img class="extension-icon" src="${iconUrl}" onerror="this.src='/public/assets/waifuboards.ico'">
<div class="card-content-wrapper"> <div class="card-content-wrapper">
<h3 class="extension-name" title="${extensionName}">${extensionName}</h3> <h3 class="extension-name">${ext.name}</h3>
${badgeHtml} <span class="extension-author">by ${ext.author || 'Unknown'}</span>
<p class="extension-description">${ext.description || 'No description available.'}</p>
<div class="extension-tags">
<span class="extension-status-badge badge-${ext.isInstalled ? 'installed' : (ext.broken ? 'local' : 'available')}">
${ext.isInstalled ? 'Installed' : (ext.broken ? 'Broken' : 'Available')}
</span>
${ext.nsfw ? '<span class="extension-status-badge badge-local">NSFW</span>' : ''}
</div>
</div> </div>
${buttonHtml} ${buttonHtml}
`; `;
const installButton = card.querySelector('[data-action="install"]'); const btn = card.querySelector('.extension-action-button');
const uninstallButton = card.querySelector('[data-action="uninstall"]'); if (!ext.broken || ext.isInstalled) {
btn.onclick = () => ext.isInstalled ? promptUninstall(ext) : handleInstall(ext);
if (installButton) {
installButton.addEventListener('click', async () => {
try {
const response = await fetch('/api/extensions/install', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ fileName: extension.fileName }),
});
const result = await response.json();
if (response.ok) {
updateExtensionState(extension.fileName, true);
await showCustomModal(
'Installation Successful',
`${extensionName} has been successfully installed.`,
false
);
} else {
await showCustomModal(
'Installation Failed',
`Installation failed: ${result.error || 'Unknown error.'}`,
false
);
}
} catch (error) {
await showCustomModal(
'Installation Failed',
`Network error during installation.`,
false
);
}
});
} }
if (uninstallButton) { return card;
uninstallButton.addEventListener('click', async () => {
const confirmed = await showCustomModal(
'Confirm Uninstallation',
`Are you sure you want to uninstall ${extensionName}?`,
true
);
if (!confirmed) return;
try {
const response = await fetch('/api/extensions/uninstall', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ fileName: extension.fileName }),
});
const result = await response.json();
if (response.ok) {
updateExtensionState(extension.fileName, false);
await showCustomModal(
'Uninstallation Successful',
`${extensionName} has been successfully uninstalled.`,
false
);
} else {
await showCustomModal(
'Uninstallation Failed',
`Uninstallation failed: ${result.error || 'Unknown error.'}`,
false
);
}
} catch (error) {
await showCustomModal(
'Uninstallation Failed',
`Network error during uninstallation.`,
false
);
}
});
}
extensionsGrid.appendChild(card);
} }
async function getInstalledExtensions() { function showModal(title, message, showConfirm = false, onConfirm = null) {
console.log(`Fetching installed extensions from: ${INSTALLED_EXTENSIONS_API}`); modalTitle.innerText = title;
modalMessage.innerText = message;
try { if (showConfirm) {
const response = await fetch(INSTALLED_EXTENSIONS_API); modalConfirmBtn.classList.remove('hidden');
modalConfirmBtn.onclick = () => { hideModal(); if (onConfirm) onConfirm(); };
if (!response.ok) {
console.error(`Error fetching installed extensions. Status: ${response.status}`);
return new Set();
}
const data = await response.json();
if (!data.extensions || !Array.isArray(data.extensions)) {
console.error("Invalid response format from /api/extensions: 'extensions' array missing or incorrect.");
return new Set();
}
const installedFileNames = data.extensions
.map(name => `${name.toLowerCase()}.js`);
return new Set(installedFileNames);
} catch (error) {
console.error('Network or JSON parsing error during fetch of installed extensions:', error);
return new Set();
}
}
function filterAndRenderExtensions(filterType) {
extensionsGrid.innerHTML = '';
if (!allExtensionsData || allExtensionsData.length === 0) {
console.log('No extension data to filter.');
return;
}
const filteredExtensions = allExtensionsData.filter(ext =>
filterType === 'All' || ext.type === filterType || (ext.isLocal && filterType === 'Local')
);
filteredExtensions.forEach(ext => {
renderExtensionCard(ext, ext.isInstalled, ext.isLocal);
});
if (filteredExtensions.length === 0) {
extensionsGrid.innerHTML = `<p style="grid-column: 1 / -1; text-align: center; color: var(--text-secondary);">No extensions found for the selected filter (${filterType}).</p>`;
}
}
async function loadMarketplace() {
extensionsGrid.innerHTML = '';
for (let i = 0; i < 6; i++) {
extensionsGrid.innerHTML += `
<div class="extension-card skeleton grid-item">
<div class="skeleton-icon skeleton" style="width: 50px; height: 50px;"></div>
<div class="card-content-wrapper">
<div class="skeleton-text title-skeleton skeleton" style="width: 80%; height: 1.1em;"></div>
<div class="skeleton-text text-skeleton skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
</div>
<div class="skeleton-button skeleton" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
</div>`;
}
try {
const [availableExtensionsRaw, installedExtensionsSet] = await Promise.all([
fetch(API_URL_BASE).then(res => {
if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
return res.json();
}),
getInstalledExtensions()
]);
const availableExtensionsJs = availableExtensionsRaw.filter(ext => ext.type === 'file' && ext.name.endsWith('.js'));
const detailPromises = [];
const marketplaceFileNames = new Set(availableExtensionsJs.map(ext => ext.name.toLowerCase()));
for (const ext of availableExtensionsJs) {
const downloadUrl = getRawUrl(ext.name);
const detailsPromise = getExtensionDetails(downloadUrl).then(details => ({
...ext,
...details,
fileName: ext.name,
isInstalled: installedExtensionsSet.has(ext.name.toLowerCase()),
isLocal: false,
}));
detailPromises.push(detailsPromise);
}
const extensionsWithDetails = await Promise.all(detailPromises);
installedExtensionsSet.forEach(installedName => {
if (!marketplaceFileNames.has(installedName)) {
const localExt = {
name: formatExtensionName(installedName),
fileName: installedName,
type: 'Local',
isInstalled: true,
isLocal: true,
baseUrl: 'Local Install',
};
extensionsWithDetails.push(localExt);
}
});
extensionsWithDetails.sort((a, b) => {
if (a.isInstalled !== b.isInstalled) {
return b.isInstalled - a.isInstalled;
}
const nameA = a.name || '';
const nameB = b.name || '';
return nameA.localeCompare(nameB);
});
allExtensionsData = extensionsWithDetails;
if (filterSelect) {
filterSelect.addEventListener('change', (event) => {
filterAndRenderExtensions(event.target.value);
});
}
filterAndRenderExtensions('All');
} catch (error) {
console.error('Error loading the marketplace:', error);
extensionsGrid.innerHTML = `
<div style="grid-column: 1 / -1; color: #dc2626; text-align: center; padding: 2rem; background: rgba(220,38,38,0.1); border-radius: 12px; margin-top: 1rem;">
🚨 Error loading extensions.
<p>Could not connect to the extension repository or local endpoint. Detail: ${error.message}</p>
</div>
`;
allExtensionsData = [];
}
}
customModal.addEventListener('click', (e) => {
if (e.target === customModal || e.target.tagName === 'BUTTON') {
customModal.classList.add('hidden');
}
});
document.addEventListener('DOMContentLoaded', loadMarketplace);
window.addEventListener('scroll', () => {
const navbar = document.getElementById('navbar');
if (window.scrollY > 0) {
navbar.classList.add('scrolled');
} else { } else {
navbar.classList.remove('scrolled'); modalConfirmBtn.classList.add('hidden');
} }
}); modalCloseBtn.onclick = hideModal;
modal.classList.remove('hidden');
}
function hideModal() { modal.classList.add('hidden'); }
async function handleInstall(ext) {
try {
const res = await fetch('/api/extensions/install', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ url: ext.entry })
});
if (res.ok) {
installedExtensions.push(ext.id.toLowerCase());
renderGroupedView();
window.NotificationUtils.success(`${ext.name} installed!`);
}
} catch (e) { window.NotificationUtils.error('Install failed.'); }
}
function promptUninstall(ext) {
showModal('Confirm', `Uninstall ${ext.name}?`, true, () => handleUninstall(ext));
}
async function handleUninstall(ext) {
try {
const res = await fetch('/api/extensions/uninstall', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ fileName: ext.id + '.js' })
});
if (res.ok) {
installedExtensions = installedExtensions.filter(id => id !== ext.id.toLowerCase());
renderGroupedView();
window.NotificationUtils.info(`${ext.name} uninstalled.`);
}
} catch (e) { window.NotificationUtils.error('Uninstall failed.'); }
}
function showSkeletons() {
marketplaceContent.innerHTML = `
<div class="marketplace-grid">
${Array(3).fill('<div class="extension-card skeleton"></div>').join('')}
</div>
`;
}
document.addEventListener('DOMContentLoaded', loadMarketplace);

9
docker/src/scripts/rpc-inapp.js
View File

@@ -1,9 +0,0 @@
fetch("/api/rpc", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({
details: "Browsing",
state: `In App`,
mode: "idle"
})
});

218
docker/src/scripts/settings.js Normal file
View File

@@ -0,0 +1,218 @@
const API_BASE = '/api/config';
let currentConfig = {};
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) {
console.error('Modal not found');
return;
}
if (forceClose) {
modal.classList.add('hidden');
} else {
const isHidden = modal.classList.contains('hidden');
if (isHidden) {
// Abrir modal
modal.classList.remove('hidden');
await loadSettings();
} else {
// Cerrar modal
modal.classList.add('hidden');
}
}
};
async function loadSettings() {
if (!formContent) {
console.error('Form content not found');
return;
}
// Mostrar loading
formContent.innerHTML = `
<div class="skeleton-loader">
<div class="skeleton title-skeleton"></div>
<div class="skeleton text-skeleton"></div>
<div class="skeleton text-skeleton"></div>
</div>
`;
try {
const res = await fetch(API_BASE);
if (!res.ok) {
throw new Error(`HTTP error! status: ${res.status}`);
}
const data = await res.json();
if (data.error) throw new Error(data.error);
currentConfig = data;
renderNav();
// Seleccionar la primera sección si no hay ninguna activa
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: var(--color-danger); margin-bottom: 1rem;">Failed to load settings</p>
<p style="color: var(--color-text-muted); font-size: 0.9rem;">${err.message}</p>
</div>
`;
}
}
function renderNav() {
if (!navContainer) return;
navContainer.innerHTML = '';
Object.keys(currentConfig).forEach(section => {
const btn = document.createElement('div');
btn.className = `nav-item ${section === activeSection ? 'active' : ''}`;
btn.textContent = section;
btn.onclick = () => switchSection(section);
navContainer.appendChild(btn);
});
}
function switchSection(section) {
if (!currentConfig[section]) return;
activeSection = section;
renderNav();
const sectionData = currentConfig[section];
formContent.innerHTML = `
<h2 class="section-title" style="margin-bottom: 2rem; text-transform: capitalize;">
${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 label = key.replace(/_/g, ' ');
if (isBool) {
group.innerHTML = `
<div style="display: flex; align-items: center; gap: 0.5rem;">
<input type="checkbox" id="${inputId}" name="${key}" ${value ? 'checked' : ''}>
<label for="${inputId}" style="margin: 0; cursor: pointer;">${label}</label>
</div>
`;
} else {
group.innerHTML = `
<label for="${inputId}">${label}</label>
<input class="config-input" id="${inputId}" name="${key}"
type="${typeof value === 'number' ? 'number' : 'text'}"
value="${value}">
`;
}
formContent.appendChild(group);
});
}
// Setup form submit handler
document.addEventListener('DOMContentLoaded', () => {
// Usar delegación de eventos ya que el form se carga dinámicamente
document.addEventListener('submit', async (e) => {
if (e.target.id === 'config-form') {
e.preventDefault();
await saveSettings();
}
});
});
async function saveSettings() {
if (!form || !activeSection) return;
const updatedData = {};
Object.keys(currentConfig[activeSection]).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_BASE}/${activeSection}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(updatedData)
});
if (res.ok) {
currentConfig[activeSection] = updatedData;
// Mostrar notificación de éxito
const notification = document.createElement('div');
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background: var(--color-success, #10b981);
color: white;
padding: 1rem 1.5rem;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
z-index: 10000;
animation: slideIn 0.3s ease-out;
`;
notification.textContent = 'Settings saved successfully!';
document.body.appendChild(notification);
setTimeout(() => {
notification.style.animation = 'slideOut 0.3s ease-out';
setTimeout(() => notification.remove(), 300);
}, 2000);
} else {
throw new Error('Failed to save settings');
}
} catch (err) {
console.error('Error saving settings:', err);
alert('Error saving settings: ' + err.message);
}
}
// Añadir estilos para las animaciones (solo si no existen)
if (!document.getElementById('settings-animations')) {
const animationStyles = document.createElement('style');
animationStyles.id = 'settings-animations';
animationStyles.textContent = `
@keyframes slideIn {
from { transform: translateX(400px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(400px); opacity: 0; }
}
`;
document.head.appendChild(animationStyles);
}

18
docker/src/scripts/titlebar.js
View File

@@ -1,18 +0,0 @@
if (window.electronAPI?.isElectron) {
document.documentElement.classList.add("electron");
}
document.addEventListener("DOMContentLoaded", () => {
document.documentElement.style.visibility = "visible";
if (!window.electronAPI?.isElectron) return;
document.body.classList.add("electron");
const titlebar = document.getElementById("titlebar");
if (!titlebar) return;
titlebar.style.display = "flex";
titlebar.querySelector(".min").onclick = () => window.electronAPI.win.minimize();
titlebar.querySelector(".max").onclick = () => window.electronAPI.win.maximize();
titlebar.querySelector(".close").onclick = () => window.electronAPI.win.close();
});

2
docker/src/scripts/updateNotifier.js
View File

@@ -1,6 +1,6 @@
const Gitea_OWNER = "ItsSkaiya"; const Gitea_OWNER = "ItsSkaiya";
const Gitea_REPO = "WaifuBoard"; const Gitea_REPO = "WaifuBoard";
const CURRENT_VERSION = "v2.0.0-rc.0"; const CURRENT_VERSION = "v2.0.0-rc.2";
const UPDATE_CHECK_INTERVAL = 5 * 60 * 1000; const UPDATE_CHECK_INTERVAL = 5 * 60 * 1000;
let currentVersionDisplay; let currentVersionDisplay;

86
docker/src/scripts/users.js
View File

@@ -694,30 +694,102 @@ window.handleDeleteConfirmation = function(userId) {
closeModal(); closeModal();
if (user.has_password) {
modalAniList.innerHTML = `
<div class="modal-overlay"></div>
<div class="modal-content" style="max-width:400px;">
<div class="modal-header">
<h2>Confirm Deletion</h2>
<button class="modal-close" onclick="closeModal()">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
<form id="deleteWithPasswordForm">
<p style="margin-bottom:1.25rem; color:var(--color-text-secondary)">
Enter your password to permanently delete
<b>${user.username}</b>
</p>
<div class="form-group">
<label for="deletePassword">Password</label>
<div class="password-toggle-wrapper">
<input
type="password"
id="deletePassword"
required
placeholder="Enter password"
autofocus
>
<button
type="button"
class="password-toggle-btn"
onclick="togglePasswordVisibility('deletePassword', this)"
>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<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>
</button>
</div>
</div>
<div class="modal-actions">
<button type="button" class="btn-secondary" onclick="closeModal()">
Cancel
</button>
<button type="submit" class="btn-disconnect">
Delete Profile
</button>
</div>
</form>
</div>
`;
modalAniList.classList.add('active');
document
.getElementById('deleteWithPasswordForm')
.addEventListener('submit', e => {
e.preventDefault();
const password = document.getElementById('deletePassword').value;
handleConfirmedDeleteUser(userId, password);
});
return;
}
showConfirmationModal( showConfirmationModal(
'Confirm Deletion', 'Confirm Deletion',
`Are you absolutely sure you want to delete profile ${user.username}? This action cannot be undone.`, `Are you absolutely sure you want to delete profile ${user.username}?`,
`handleConfirmedDeleteUser(${userId})` `handleConfirmedDeleteUser(${userId})`
); );
}; };
window.handleConfirmedDeleteUser = async function(userId) { window.handleConfirmedDeleteUser = async function(userId, password = null) {
closeModal(); closeModal();
showUserToast('Deleting user...', 'info');
try { try {
const res = await fetch(`${API_BASE}/users/${userId}`, { method: 'DELETE' }); const options = { method: 'DELETE' };
if (password) {
options.headers = { 'Content-Type': 'application/json' };
options.body = JSON.stringify({ password });
}
const res = await fetch(`${API_BASE}/users/${userId}`, options);
if (!res.ok) { if (!res.ok) {
const error = await res.json(); const error = await res.json();
throw new Error(error.error || 'Error deleting user'); throw new Error(error.error);
} }
await loadUsers(); await loadUsers();
showUserToast('User deleted successfully!', 'success'); showUserToast('User deleted successfully!', 'success');
} catch (err) { } catch (err) {
console.error(err); showUserToast(err.message || 'Error deleting user', 'error');
showUserToast('Error deleting user', 'error');
} }
}; };

32
docker/src/scripts/utils/list-modal-manager.js
View File

@@ -83,7 +83,7 @@ const ListModalManager = {
document.getElementById('progress-label'); document.getElementById('progress-label');
if (this.isInList && this.currentEntry) { if (this.isInList && this.currentEntry) {
document.getElementById('entry-status').value = this.currentEntry.status || 'PLANNING'; document.getElementById('entry-status').value = this.normalizeStatus(this.currentEntry.status);
document.getElementById('entry-progress').value = this.currentEntry.progress || 0; document.getElementById('entry-progress').value = this.currentEntry.progress || 0;
document.getElementById('entry-score').value = this.currentEntry.score || ''; document.getElementById('entry-score').value = this.currentEntry.score || '';
document.getElementById('entry-start-date').value = this.currentEntry.start_date?.split('T')[0] || ''; document.getElementById('entry-start-date').value = this.currentEntry.start_date?.split('T')[0] || '';
@@ -131,6 +131,12 @@ const ListModalManager = {
document.getElementById('add-list-modal').classList.add('active'); document.getElementById('add-list-modal').classList.add('active');
}, },
normalizeStatus(status) {
if (!status) return 'PLANNING';
if (status === 'WATCHING' || status === 'READING') return 'CURRENT';
return status;
},
close() { close() {
document.getElementById('add-list-modal').classList.remove('active'); document.getElementById('add-list-modal').classList.remove('active');
}, },
@@ -212,15 +218,21 @@ const ListModalManager = {
} }
}; };
document.addEventListener('DOMContentLoaded', () => { 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'); const modal = document.getElementById('add-list-modal');
if (modal) { modal.addEventListener('click', (e) => {
modal.addEventListener('click', (e) => { if (e.target.id === 'add-list-modal') {
if (e.target.id === 'add-list-modal') { ListModalManager.close();
ListModalManager.close(); }
} });
}); }
}
}); document.addEventListener('DOMContentLoaded', loadListModal);
window.ListModalManager = ListModalManager; window.ListModalManager = ListModalManager;

71
docker/src/shared/config.js Normal file
View File

@@ -0,0 +1,71 @@
import fs from 'fs';
import path from 'path';
import os from 'os';
import yaml from 'js-yaml';
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
}
};
function ensureConfigFile() {
if (!fs.existsSync(BASE_DIR)) {
fs.mkdirSync(BASE_DIR, { recursive: true });
}
if (!fs.existsSync(CONFIG_PATH)) {
fs.writeFileSync(
CONFIG_PATH,
yaml.dump(DEFAULT_CONFIG),
'utf8'
);
}
}
export function getConfig() {
ensureConfigFile();
const raw = fs.readFileSync(CONFIG_PATH, 'utf8');
return yaml.load(raw) || DEFAULT_CONFIG;
}
export function setConfig(partialConfig) {
ensureConfigFile();
const current = getConfig();
const next = deepMerge(current, partialConfig);
fs.writeFileSync(
CONFIG_PATH,
yaml.dump(next),
'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,
};

10
docker/src/shared/database.js
View File

@@ -2,7 +2,7 @@ const sqlite3 = require('sqlite3').verbose();
const os = require("os"); const os = require("os");
const path = require("path"); const path = require("path");
const fs = require("fs"); const fs = require("fs");
const {ensureUserDataDB, ensureAnilistSchema, ensureExtensionsTable, ensureCacheTable, ensureFavoritesDB} = require('./schemas'); const {ensureUserDataDB, ensureAnilistSchema, ensureExtensionsTable, ensureCacheTable, ensureFavoritesDB, ensureLocalLibrarySchema } = require('./schemas');
const databases = new Map(); const databases = new Map();
@@ -10,7 +10,8 @@ const DEFAULT_PATHS = {
anilist: path.join(os.homedir(), "WaifuBoards", 'anilist_anime.db'), anilist: path.join(os.homedir(), "WaifuBoards", 'anilist_anime.db'),
favorites: path.join(os.homedir(), "WaifuBoards", "favorites.db"), favorites: path.join(os.homedir(), "WaifuBoards", "favorites.db"),
cache: path.join(os.homedir(), "WaifuBoards", "cache.db"), cache: path.join(os.homedir(), "WaifuBoards", "cache.db"),
userdata: path.join(os.homedir(), "WaifuBoards", "user_data.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) { function initDatabase(name = 'anilist', dbPath = null, readOnly = false) {
@@ -49,6 +50,11 @@ function initDatabase(name = 'anilist', dbPath = null, readOnly = false) {
databases.set(name, db); databases.set(name, db);
if (name === "local_library") {
ensureLocalLibrarySchema(db)
.catch(err => console.error("Error creating local library schema:", err));
}
if (name === "anilist") { if (name === "anilist") {
ensureAnilistSchema(db) ensureAnilistSchema(db)
.then(() => ensureExtensionsTable(db)) .then(() => ensureExtensionsTable(db))

10
docker/src/shared/extensions.js
View File

@@ -46,7 +46,6 @@ async function loadExtensions() {
} }
} }
async function loadExtension(fileName) { async function loadExtension(fileName) {
const homeDir = os.homedir(); const homeDir = os.homedir();
const extensionsDir = path.join(homeDir, 'WaifuBoards', 'extensions'); const extensionsDir = path.join(homeDir, 'WaifuBoards', 'extensions');
@@ -77,6 +76,7 @@ async function loadExtension(fileName) {
} }
const name = instance.constructor.name; const name = instance.constructor.name;
instance.__fileName = fileName;
instance.scrape = scrape; instance.scrape = scrape;
instance.cheerio = cheerio; instance.cheerio = cheerio;
extensions.set(name, instance); extensions.set(name, instance);
@@ -114,6 +114,14 @@ async function saveExtensionFile(fileName, downloadUrl) {
file.on('finish', async () => { file.on('finish', async () => {
file.close(async () => { file.close(async () => {
try { try {
const extName = fileName.replace('.js', '');
for (const key of extensions.keys()) {
if (key.toLowerCase() === extName.toLowerCase()) {
extensions.delete(key);
break;
}
}
await loadExtension(fileName); await loadExtension(fileName);
resolve(); resolve();
} catch (err) { } catch (err) {

51
docker/src/shared/schemas.js
View File

@@ -2,6 +2,54 @@ const sqlite3 = require('sqlite3').verbose();
const path = require("path"); const path = require("path");
const fs = require("fs"); 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) { async function ensureUserDataDB(dbPath) {
const dir = path.dirname(dbPath); const dir = path.dirname(dbPath);
@@ -230,5 +278,6 @@ module.exports = {
ensureAnilistSchema, ensureAnilistSchema,
ensureExtensionsTable, ensureExtensionsTable,
ensureCacheTable, ensureCacheTable,
ensureFavoritesDB ensureFavoritesDB,
ensureLocalLibrarySchema
}; };

124
docker/src/views/views.routes.ts
View File

@@ -2,80 +2,144 @@ import { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify';
import * as fs from 'fs'; import * as fs from 'fs';
import * as path from 'path'; import * as path from 'path';
let cachedNavbar: string | null = null;
function getNavbarHTML(activePage: string, showSearch: boolean = true): string {
if (!cachedNavbar) {
const navbarPath = path.join(__dirname, '..', '..', 'views', 'components', 'navbar.html');
cachedNavbar = fs.readFileSync(navbarPath, 'utf-8');
}
let navbar = cachedNavbar;
const pages = ['anime', 'books', 'gallery', 'schedule', 'my-list', 'marketplace'];
pages.forEach(page => {
const regex = new RegExp(`(<button class="nav-button[^"]*)"\\s+data-page="${page}"`, 'g');
if (page === activePage) {
navbar = navbar.replace(regex, `$1 active" data-page="${page}"`);
}
});
if (!showSearch) {
navbar = navbar.replace(
'<div class="search-wrapper">',
'<div class="search-wrapper" style="visibility: hidden;">'
);
}
return navbar;
}
function injectNavbar(htmlContent: string, activePage: string, showSearch: boolean = true): string {
const navbar = getNavbarHTML(activePage, showSearch);
return htmlContent.replace(/<body[^>]*>/, `$&\n${navbar}`);
}
async function viewsRoutes(fastify: FastifyInstance) { async function viewsRoutes(fastify: FastifyInstance) {
fastify.get('/', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'users.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'users.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
reply.type('text/html').send(html);
}); });
fastify.get('/anime', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/anime', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime', 'animes.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'animes.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
const htmlWithNavbar = injectNavbar(html, 'anime', true);
reply.type('text/html').send(htmlWithNavbar);
}); });
fastify.get('/my-list', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/my-list', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'list.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'list.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
const htmlWithNavbar = injectNavbar(html, 'my-list', false);
reply.type('text/html').send(htmlWithNavbar);
}); });
fastify.get('/books', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/books', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'books.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'books.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
const htmlWithNavbar = injectNavbar(html, 'books', true);
reply.type('text/html').send(htmlWithNavbar);
}); });
fastify.get('/schedule', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/schedule', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'schedule.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'schedule.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
const htmlWithNavbar = injectNavbar(html, 'schedule', false);
reply.type('text/html').send(htmlWithNavbar);
}); });
fastify.get('/gallery', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/gallery', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'gallery', 'gallery.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'gallery', 'gallery.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
const htmlWithNavbar = injectNavbar(html, 'gallery', true);
reply.type('text/html').send(htmlWithNavbar);
}); });
fastify.get('/marketplace', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/marketplace', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'marketplace.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'marketplace.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
const htmlWithNavbar = injectNavbar(html, 'marketplace', false);
reply.type('text/html').send(htmlWithNavbar);
}); });
fastify.get('/gallery/:extension/*', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/gallery/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
const htmlWithNavbar = injectNavbar(html, 'gallery', true);
reply.type('text/html').send(htmlWithNavbar);
}); });
fastify.get('/gallery/favorites/*', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/gallery/favorites/*', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
const htmlWithNavbar = injectNavbar(html, 'gallery', true);
reply.type('text/html').send(htmlWithNavbar);
}); });
fastify.get('/anime/:id', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/anime/:id', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
reply.type('text/html').send(html);
}); });
fastify.get('/anime/:extension/*', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/anime/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
reply.type('text/html').send(html);
}); });
fastify.get('/watch/:id/:episode', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/watch/:id/:episode', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime', 'watch.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'anime', 'watch.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
reply.type('text/html').send(html);
}); });
fastify.get('/book/:id', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/book/:id', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'book.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
reply.type('text/html').send(html);
}); });
fastify.get('/book/:extension/*', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/book/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'book.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'book.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
reply.type('text/html').send(html);
}); });
fastify.get('/read/:provider/:chapter/*', (req: FastifyRequest, reply: FastifyReply) => { fastify.get('/read/:provider/:chapter/*', (req: FastifyRequest, reply: FastifyReply) => {
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'read.html')); const htmlPath = path.join(__dirname, '..', '..', 'views', 'books', 'read.html');
reply.type('text/html').send(stream); const html = fs.readFileSync(htmlPath, 'utf-8');
reply.type('text/html').send(html);
});
fastify.setNotFoundHandler((req, reply) => {
const htmlPath = path.join(__dirname, '..', '..', 'views', '404.html');
const html = fs.readFileSync(htmlPath, 'utf-8');
reply.code(404).type('text/html').send(html);
}); });
} }

2
docker/tsconfig.json
View File

@@ -5,7 +5,7 @@
"allowJs": true, "allowJs": true,
"checkJs": false, "checkJs": false,
"strict": true, "strict": true,
"outDir": "electron", "outDir": "dist",
"rootDir": "src", "rootDir": "src",
"esModuleInterop": true, "esModuleInterop": true,
"skipLibCheck": true "skipLibCheck": true

127
docker/views/404.html Normal file
View File

@@ -0,0 +1,127 @@
<!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>

144
docker/views/anime/anime.html
View File

@@ -17,26 +17,8 @@
rel="stylesheet" rel="stylesheet"
href="/views/css/components/updateNotifier.css" href="/views/css/components/updateNotifier.css"
/> />
<script src="/src/scripts/titlebar.js"></script>
<link rel="stylesheet" href="/views/css/components/titlebar.css" />
</head> </head>
<body> <body>
<div id="titlebar">
<div class="title-left">
<img
class="app-icon"
src="/public/assets/waifuboards.ico"
alt=""
/>
<span class="app-title">WaifuBoard</span>
</div>
<div class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<div class="modal-overlay" id="desc-modal"> <div class="modal-overlay" id="desc-modal">
<div class="modal-content"> <div class="modal-content">
<button class="modal-close" onclick="closeModal()">✕</button> <button class="modal-close" onclick="closeModal()">✕</button>
@@ -45,130 +27,6 @@
</div> </div>
</div> </div>
<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="WATCHING">Watching</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>
<a href="/anime" class="back-btn"> <a href="/anime" class="back-btn">
<svg <svg
width="20" width="20"
@@ -237,6 +95,7 @@
id="extension-pill" id="extension-pill"
style="display: none; background: #8b5cf6" style="display: none; background: #8b5cf6"
></div> ></div>
<div class="pill" id="local-pill" style="display: none; background: #8b5cf6;"></div>
<div class="pill score" id="score">--% Score</div> <div class="pill score" id="score">--% Score</div>
<div class="pill" id="year">----</div> <div class="pill" id="year">----</div>
<div class="pill" id="genres">Action</div> <div class="pill" id="genres">Action</div>
@@ -350,7 +209,6 @@
</div> </div>
<script src="/src/scripts/updateNotifier.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/auth-guard.js"></script>
<script src="/src/scripts/utils/auth-utils.js"></script> <script src="/src/scripts/utils/auth-utils.js"></script>

209
docker/views/anime/animes.html
View File

@@ -9,84 +9,10 @@
<link rel="stylesheet" href="/views/css/components/hero.css"> <link rel="stylesheet" href="/views/css/components/hero.css">
<link rel="stylesheet" href="/views/css/components/anilist-modal.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/updateNotifier.css">
<link rel="stylesheet" href="/views/css/components/titlebar.css"> <link rel="stylesheet" href="/views/css/components/local-library.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon"> <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<script src="/src/scripts/titlebar.js"></script>
</head> </head>
<body > <body>
<div id="titlebar"><div class="title-left">
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
<span class="app-title">WaifuBoard</span>
</div>
<div class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<nav class="navbar" id="navbar">
<a href="#" class="nav-brand">
<div class="brand-icon">
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
</div>
WaifuBoard
</a>
<div class="nav-center">
<button class="nav-button active">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">
<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>
<div class="hero-wrapper"> <div class="hero-wrapper">
<div class="hero-background"> <div class="hero-background">
<img id="hero-bg-media" alt=""> <img id="hero-bg-media" alt="">
@@ -121,77 +47,17 @@
</div> </div>
</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> </div>
<div class="modal-overlay" id="add-list-modal"> <!-- Online Mode Content -->
<div class="modal-content modal-list"> <main id="online-content">
<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="WATCHING">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>
<main>
<section class="section"> <section class="section">
<div class="section-header"> <div class="section-header">
<div class="section-title">Continue watching</div> <div class="section-title">Continue watching</div>
@@ -208,13 +74,11 @@
</div> </div>
</section> </section>
<section class="section"> <section class="section">
<div class="section-header"><div class="section-title">Trending This Season</div></div> <div class="section-header"><div class="section-title">Trending This Season</div></div>
<div class="carousel-wrapper"> <div class="carousel-wrapper">
<button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button> <button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button>
<div class="carousel" id="trending"> <div class="carousel" id="trending">
<div class="card"><div class="card-img-wrap skeleton"></div></div> <div class="card"><div class="card-img-wrap skeleton"></div></div>
<div class="card"><div class="card-img-wrap skeleton"></div></div> <div class="card"><div class="card-img-wrap skeleton"></div></div>
<div class="card"><div class="card-img-wrap skeleton"></div></div> <div class="card"><div class="card-img-wrap skeleton"></div></div>
@@ -224,7 +88,6 @@
</div> </div>
</section> </section>
<section class="section"> <section class="section">
<div class="section-header"><div class="section-title">Top Airing Now</div></div> <div class="section-header"><div class="section-title">Top Airing Now</div></div>
<div class="carousel-wrapper"> <div class="carousel-wrapper">
@@ -240,14 +103,49 @@
</section> </section>
</main> </main>
<!-- Local Library Mode Content -->
<main id="local-content" class="hidden">
<section class="section">
<div class="section-header">
<div class="section-title">Local Anime Library</div>
<button class="btn-secondary" onclick="scanLocalLibrary()">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M21 12a9 9 0 1 1-9-9"/>
<path d="M21 3v6h-6"/>
</svg>
<span id="scan-text">Scan Library</span>
</button>
</div>
<div class="local-filters">
<div class="filter-group">
<button class="filter-btn active" data-filter="all">All</button>
<button class="filter-btn" data-filter="watching">Watching</button>
<button class="filter-btn" data-filter="completed">Completed</button>
<button class="filter-btn" data-filter="unwatched">Unwatched</button>
<button class="filter-btn" data-filter="unlinked">Unlinked</button>
</div>
<div class="filter-group">
<button class="filter-btn" data-sort="az">A–Z</button>
<button class="filter-btn" data-sort="recent">Recent</button>
</div>
</div>
<div class="local-library-grid" id="local-entries-grid">
<div class="skeleton-card"></div>
<div class="skeleton-card"></div>
<div class="skeleton-card"></div>
<div class="skeleton-card"></div>
<div class="skeleton-card"></div>
<div class="skeleton-card"></div>
<div class="skeleton-card"></div>
<div class="skeleton-card"></div>
</div>
</section>
</main>
<div id="updateToast" class="hidden"> <div id="updateToast" class="hidden">
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p> <p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
<a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">
<a
id="downloadButton"
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
target="_blank"
>
Click To Download Click To Download
</a> </a>
</div> </div>
@@ -258,8 +156,9 @@
<script src="/src/scripts/utils/continue-watching-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/utils/youtube-player-utils.js"></script>
<script src="/src/scripts/anime/animes.js"></script> <script src="/src/scripts/anime/animes.js"></script>
<script src="/src/scripts/local-library.js"></script>
<script src="/src/scripts/updateNotifier.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/auth-guard.js"></script>
<script src="/src/scripts/settings.js"></script>
</body> </body>
</html> </html>

13
docker/views/anime/watch.html
View File

@@ -11,21 +11,8 @@
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" /> <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script> <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
<link rel="icon" href="/public/assets/waifuboards.ico"> <link rel="icon" href="/public/assets/waifuboards.ico">
<link rel="stylesheet" href="/views/css/components/titlebar.css">
<script src="/src/scripts/titlebar.js"></script>
</head> </head>
<body> <body>
<div id="titlebar"> <div class="title-left">
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
<span class="app-title">WaifuBoard</span>
</div>
<div class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<header class="top-bar"> <header class="top-bar">
<a href="#" id="back-link" class="back-btn"> <a href="#" id="back-link" class="back-btn">

80
docker/views/books/book.html
View File

@@ -10,87 +10,9 @@
<link rel="stylesheet" href="/views/css/components/anilist-modal.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/books/book.css">
<link rel="stylesheet" href="/views/css/components/updateNotifier.css"> <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
<link rel="stylesheet" href="/views/css/components/titlebar.css">
<script src="/src/scripts/titlebar.js"></script>
</head> </head>
<body> <body>
<div id="titlebar"> <div class="title-left">
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
<span class="app-title">WaifuBoard</span>
</div>
<div class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<div class="modal-overlay" id="add-list-modal">
<div class="modal-content">
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
<h2 class="modal-title" id="modal-title">Add to Library</h2>
<div class="modal-body">
<div class="modal-fields-grid">
<div class="form-group">
<label for="entry-status">Status</label>
<select id="entry-status" class="form-input">
<option value="CURRENT">Reading</option>
<option value="COMPLETED">Completed</option>
<option value="PLANNING">Plan to Read</option>
<option value="PAUSED">Paused</option>
<option value="DROPPED">Dropped</option>
<option value="REPEATING">Rereading</option>
</select>
</div>
<div class="form-group">
<label for="entry-progress" id="progress-label">Chapters Read</label>
<input type="number" id="entry-progress" class="form-input" min="0" max="0" placeholder="0">
</div>
<div class="form-group">
<label for="entry-score">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 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 class="form-group">
<label for="entry-repeat-count">Re-read 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>
<a href="/books" class="back-btn"> <a href="/books" class="back-btn">
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg> <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
Back to Books Back to Books
@@ -140,6 +62,7 @@
<div class="meta-row"> <div class="meta-row">
<div class="pill extension-pill" id="extension-pill" style="display: none; background: #8b5cf6;"></div> <div class="pill extension-pill" id="extension-pill" style="display: none; background: #8b5cf6;"></div>
<div class="pill" id="local-pill" style="display: none; background: #8b5cf6;"></div>
<div class="pill score" id="score">--% Score</div> <div class="pill score" id="score">--% Score</div>
<div class="pill" id="genres">Action</div> <div class="pill" id="genres">Action</div>
</div> </div>
@@ -204,7 +127,6 @@
</div> </div>
<script src="/src/scripts/updateNotifier.js"></script> <script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/rpc-inapp.js"></script>
<script src="/src/scripts/utils/auth-utils.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/notification-utils.js"></script>

172
docker/views/books/books.html
View File

@@ -7,84 +7,12 @@
<link rel="stylesheet" href="/views/css/globals.css"> <link rel="stylesheet" href="/views/css/globals.css">
<link rel="stylesheet" href="/views/css/components/navbar.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/components/hero.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/anilist-modal.css">
<link rel="stylesheet" href="/views/css/components/updateNotifier.css"> <link rel="stylesheet" href="/views/css/components/updateNotifier.css">
<link rel="stylesheet" href="/views/css/components/local-library.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon"> <link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<script src="/src/scripts/titlebar.js"></script>
</head> </head>
<body> <body>
<div id="titlebar"> <div class="title-left">
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
<span class="app-title">WaifuBoard</span>
</div>
<div class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<nav class="navbar" id="navbar">
<a href="#" class="nav-brand">
<div class="brand-icon">
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
</div>
WaifuBoard
</a>
<div class="nav-center">
<button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
<button class="nav-button active">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">
<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 books..." 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>
<div class="hero-wrapper"> <div class="hero-wrapper">
<div class="hero-background"> <div class="hero-background">
<img id="hero-bg-media" src="" alt=""> <img id="hero-bg-media" src="" alt="">
@@ -109,75 +37,40 @@
</div> </div>
</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> </div>
<main id="local-content" class="hidden">
<div class="modal-overlay" id="add-list-modal"> <section class="section">
<div class="modal-content modal-list"> <div class="section-header">
<button class="modal-close" onclick="closeAddToListModal()">✕</button> <div class="section-title">Local Books Library</div>
<h2 class="modal-title" id="modal-title">Add to Library</h2> <button class="btn-secondary" onclick="scanLocalLibrary()">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<div class="modal-body"> <path d="M21 12a9 9 0 1 1-9-9"/><path d="M21 3v6h-6"/>
<div class="modal-fields-grid"> </svg>
<span id="scan-text">Scan Library</span>
<div class="form-group"> </button>
<label for="entry-status">Status</label> </div>
<select id="entry-status" class="form-input"> <div class="local-filters">
<option value="CURRENT">Reading</option> <div class="filter-group">
<option value="COMPLETED">Completed</option> <button class="filter-btn active" data-filter="all">All</button>
<option value="PLANNING">Plan to Read</option> <button class="filter-btn" data-filter="unlinked">Unlinked</button>
<option value="PAUSED">Paused</option> </div>
<option value="DROPPED">Dropped</option> <div class="filter-group">
<option value="REPEATING">Rereading</option> <button class="filter-btn" data-sort="az">A–Z</button>
</select>
</div>
<div class="form-group">
<label for="entry-progress" id="progress-label">Chapters Read</label>
<input type="number" id="entry-progress" class="form-input" min="0" max="0" placeholder="0">
</div>
<div class="form-group">
<label for="entry-score">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 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 class="form-group">
<label for="entry-repeat-count">Re-read 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> </div>
<div class="local-library-grid" id="local-entries-grid">
<div class="modal-actions"> <div class="skeleton-card"></div>
<button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button> <div class="skeleton-card"></div>
<button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
<button class="btn-primary" onclick="saveToList()">Save Changes</button>
</div> </div>
</div> </section>
</div> </main>
<main> <main id="online-content">
<section class="section"> <section class="section">
<div class="section-header"> <div class="section-header">
<div class="section-title">Continue Reading</div> <div class="section-title">Continue Reading</div>
@@ -226,9 +119,8 @@
<script src="/src/scripts/utils/list-modal-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/continue-watching-manager.js"></script>
<script src="/src/scripts/books/books.js"></script> <script src="/src/scripts/books/books.js"></script>
<script src="/src/scripts/local-library-books.js"></script>
<script src="/src/scripts/updateNotifier.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/auth-guard.js"></script>
</body> </body>
</html> </html>

Some files were not shown because too many files have changed in this diff Show More