First dev release of v2.0.0
This commit is contained in:
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
node_modules
|
||||||
2894
package-lock.json
generated
Normal file
2894
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
18
package.json
Normal file
18
package.json
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"name": "waifu-board-(server)",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"type": "commonjs",
|
||||||
|
"dependencies": {
|
||||||
|
"@fastify/static": "^8.3.0",
|
||||||
|
"fastify": "^5.6.2",
|
||||||
|
"sqlite3": "^5.1.7"
|
||||||
|
}
|
||||||
|
}
|
||||||
270
public/anime.css
Normal file
270
public/anime.css
Normal file
@@ -0,0 +1,270 @@
|
|||||||
|
:root {
|
||||||
|
--bg-base: #09090b;
|
||||||
|
--bg-surface: #121215;
|
||||||
|
--bg-surface-hover: #1e1e22;
|
||||||
|
--accent: #8b5cf6;
|
||||||
|
--accent-glow: rgba(139, 92, 246, 0.4);
|
||||||
|
--text-primary: #ffffff;
|
||||||
|
--text-secondary: #a1a1aa;
|
||||||
|
--radius-md: 12px;
|
||||||
|
--radius-lg: 24px;
|
||||||
|
--radius-full: 9999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background-color: var(--bg-base);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-family: 'Inter', system-ui, sans-serif;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- BACK BUTTON --- */
|
||||||
|
.back-btn {
|
||||||
|
position: fixed;
|
||||||
|
top: 2rem;
|
||||||
|
left: 2rem;
|
||||||
|
z-index: 100;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.8rem 1.5rem;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-btn:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
transform: translateX(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- HERO VIDEO SECTION --- */
|
||||||
|
.hero-wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 85vh; /* Covers most of the screen */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-background {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%) scale(1.35); /* Zoom to remove black bars */
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-overlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: radial-gradient(circle at center, transparent 0%, var(--bg-base) 120%),
|
||||||
|
linear-gradient(to top, var(--bg-base) 10%, rgba(9,9,11,0.8) 25%, transparent 60%);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- CONTENT LAYOUT --- */
|
||||||
|
.content-container {
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
max-width: 1600px;
|
||||||
|
margin: -350px auto 0 auto; /* Pull content up over the video */
|
||||||
|
padding: 0 3rem 4rem 3rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 280px 1fr;
|
||||||
|
gap: 3rem;
|
||||||
|
animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LEFT SIDEBAR */
|
||||||
|
.sidebar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poster-card {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 2/3;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
|
||||||
|
border: 1px solid rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.poster-card img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-grid {
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border: 1px solid rgba(255,255,255,0.05);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
padding: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
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 span { font-weight: 600; font-size: 1rem; color: var(--text-primary); }
|
||||||
|
|
||||||
|
.character-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
.character-item { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; }
|
||||||
|
.char-dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
|
||||||
|
|
||||||
|
/* RIGHT MAIN CONTENT */
|
||||||
|
.main-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-end; /* Align header to bottom of hero area */
|
||||||
|
}
|
||||||
|
|
||||||
|
.anime-header {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anime-title {
|
||||||
|
font-size: 4rem;
|
||||||
|
font-weight: 900;
|
||||||
|
line-height: 1;
|
||||||
|
margin: 0 0 1.5rem 0;
|
||||||
|
text-shadow: 0 4px 30px rgba(0,0,0,0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pill {
|
||||||
|
padding: 0.5rem 1.25rem;
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.1);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
.pill.score { background: rgba(34, 197, 94, 0.2); color: #4ade80; border-color: rgba(34, 197, 94, 0.2); }
|
||||||
|
|
||||||
|
.action-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-watch {
|
||||||
|
padding: 1rem 3rem;
|
||||||
|
background: var(--text-primary);
|
||||||
|
color: var(--bg-base);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
transition: transform 0.2s, box-shadow 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-watch:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
color: white;
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1rem;
|
||||||
|
border: 1px solid rgba(255,255,255,0.2);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
.btn-secondary:hover { background: rgba(255, 255, 255, 0.2); }
|
||||||
|
|
||||||
|
.description-box {
|
||||||
|
margin-top: 3rem;
|
||||||
|
font-size: 1.15rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: #e4e4e7;
|
||||||
|
max-width: 900px;
|
||||||
|
background: rgba(255,255,255,0.03);
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
border: 1px solid rgba(255,255,255,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* EPISODES */
|
||||||
|
.episodes-section {
|
||||||
|
margin-top: 4rem;
|
||||||
|
}
|
||||||
|
.section-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.8rem; }
|
||||||
|
.section-title::before { content: ''; width: 4px; height: 28px; background: var(--accent); border-radius: 2px; }
|
||||||
|
|
||||||
|
.episodes-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.episode-btn {
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border: 1px solid rgba(255,255,255,0.1);
|
||||||
|
padding: 1.25rem 1rem;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.2s;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.episode-btn:hover {
|
||||||
|
background: var(--bg-surface-hover);
|
||||||
|
color: white;
|
||||||
|
transform: translateY(-3px);
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideUp {
|
||||||
|
from { opacity: 0; transform: translateY(60px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.content-container {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
margin-top: -100px;
|
||||||
|
padding: 0 1.5rem 4rem 1.5rem;
|
||||||
|
}
|
||||||
|
.poster-card { width: 220px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
|
||||||
|
.main-content { text-align: center; align-items: center; }
|
||||||
|
.anime-title { font-size: 2.5rem; }
|
||||||
|
.meta-row { justify-content: center; }
|
||||||
|
.sidebar { display: none; /* Hide sidebar on mobile for simplicity, or move to bottom */ }
|
||||||
|
}
|
||||||
234
public/book.css
Normal file
234
public/book.css
Normal file
@@ -0,0 +1,234 @@
|
|||||||
|
:root {
|
||||||
|
--bg-base: #09090b;
|
||||||
|
--bg-surface: #121215;
|
||||||
|
--bg-surface-hover: #1e1e22;
|
||||||
|
--accent: #8b5cf6;
|
||||||
|
--text-primary: #ffffff;
|
||||||
|
--text-secondary: #a1a1aa;
|
||||||
|
--radius-md: 12px;
|
||||||
|
--radius-lg: 24px;
|
||||||
|
--radius-full: 9999px;
|
||||||
|
--glass-border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
--glass-bg: rgba(20, 20, 23, 0.7);
|
||||||
|
--nav-height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Global Reset */
|
||||||
|
* { box-sizing: border-box; outline: none; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background-color: var(--bg-base);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-family: 'Inter', system-ui, sans-serif;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Back Button */
|
||||||
|
.back-btn {
|
||||||
|
position: fixed;
|
||||||
|
top: 2rem; left: 2rem; z-index: 100;
|
||||||
|
display: flex; align-items: center; gap: 0.5rem;
|
||||||
|
padding: 0.8rem 1.5rem;
|
||||||
|
background: var(--glass-bg); backdrop-filter: blur(12px);
|
||||||
|
border: var(--glass-border); border-radius: var(--radius-full);
|
||||||
|
color: white; text-decoration: none; font-weight: 600;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
.back-btn:hover { background: rgba(255, 255, 255, 0.15); transform: translateX(-5px); }
|
||||||
|
|
||||||
|
/* Hero */
|
||||||
|
.hero-wrapper {
|
||||||
|
position: relative; width: 100%; height: 60vh; overflow: hidden;
|
||||||
|
}
|
||||||
|
.hero-background { position: absolute; inset: 0; z-index: 0; }
|
||||||
|
.hero-background img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; filter: blur(8px); transform: scale(1.1); }
|
||||||
|
.hero-overlay {
|
||||||
|
position: absolute; inset: 0; z-index: 1;
|
||||||
|
background: linear-gradient(to bottom, transparent 0%, var(--bg-base) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Content Layout - Pulled Up Higher */
|
||||||
|
.content-container {
|
||||||
|
position: relative; z-index: 10;
|
||||||
|
max-width: 1600px; margin: -350px auto 0 auto; /* Pulled up significantly */
|
||||||
|
padding: 0 3rem 4rem 3rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 260px 1fr;
|
||||||
|
gap: 3rem;
|
||||||
|
align-items: flex-start; /* Important for sticky sidebar */
|
||||||
|
animation: slideUp 0.8s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Content Overlay (Hidden) */
|
||||||
|
.hero-content { display: none; }
|
||||||
|
|
||||||
|
/* Left Sidebar - Sticky Poster */
|
||||||
|
.sidebar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
position: sticky;
|
||||||
|
top: calc(var(--nav-height) + 2rem); /* Sticks to top when scrolling */
|
||||||
|
align-self: flex-start;
|
||||||
|
z-index: 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poster-card {
|
||||||
|
width: 100%; aspect-ratio: 2/3; border-radius: var(--radius-lg);
|
||||||
|
overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.8);
|
||||||
|
border: 1px solid rgba(255,255,255,0.1);
|
||||||
|
background: #1a1a1a;
|
||||||
|
}
|
||||||
|
.poster-card img { width: 100%; height: 100%; object-fit: cover; }
|
||||||
|
|
||||||
|
.info-grid {
|
||||||
|
background: var(--bg-surface); border: var(--glass-border);
|
||||||
|
border-radius: var(--radius-md); padding: 1.25rem;
|
||||||
|
display: flex; flex-direction: column; gap: 1rem;
|
||||||
|
}
|
||||||
|
.info-item h4 { margin: 0 0 0.25rem 0; font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
|
||||||
|
.info-item span { font-weight: 600; font-size: 0.95rem; }
|
||||||
|
|
||||||
|
/* Main Content */
|
||||||
|
.main-content {
|
||||||
|
display: flex; flex-direction: column;
|
||||||
|
padding-top: 4rem; /* Adjusted spacing */
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header Section */
|
||||||
|
.book-header { margin-bottom: 1.5rem; }
|
||||||
|
.book-title { font-size: 3.5rem; font-weight: 900; line-height: 1.1; margin: 0 0 1rem 0; text-shadow: 0 4px 30px rgba(0,0,0,0.8); }
|
||||||
|
|
||||||
|
.meta-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
|
||||||
|
.pill { padding: 0.4rem 1rem; background: rgba(255,255,255,0.1); border-radius: 99px; font-size: 0.9rem; font-weight: 600; border: var(--glass-border); backdrop-filter: blur(10px); }
|
||||||
|
.pill.score { background: rgba(34, 197, 94, 0.2); color: #4ade80; border-color: rgba(34, 197, 94, 0.2); }
|
||||||
|
|
||||||
|
/* Hidden elements as requested */
|
||||||
|
#description { display: none; } /* Hides description box */
|
||||||
|
#year { display: none; } /* Hides year pill */
|
||||||
|
|
||||||
|
.action-row { display: flex; gap: 1rem; }
|
||||||
|
.btn-primary {
|
||||||
|
padding: 0.8rem 2rem; background: white; color: black; border: none; border-radius: 99px;
|
||||||
|
font-weight: 800; cursor: pointer; transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
.btn-primary:hover { transform: scale(1.05); }
|
||||||
|
|
||||||
|
/* Fixed Add to Library Button (Matching books.html style) */
|
||||||
|
.btn-secondary {
|
||||||
|
padding: 0.8rem 2rem;
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
color: white;
|
||||||
|
border: 1px solid rgba(255,255,255,0.2);
|
||||||
|
border-radius: 99px;
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.2s;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Legacy class support if HTML uses btn-blur */
|
||||||
|
.btn-blur {
|
||||||
|
padding: 0.8rem 2rem;
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
color: white;
|
||||||
|
border: 1px solid rgba(255,255,255,0.2);
|
||||||
|
border-radius: 99px;
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.2s;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
.btn-blur:hover { background: rgba(255,255,255,0.2); }
|
||||||
|
|
||||||
|
|
||||||
|
/* Chapters Section */
|
||||||
|
.chapters-section { margin-top: 1rem; }
|
||||||
|
.section-title { display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.8rem; margin-bottom: 1.5rem; }
|
||||||
|
.section-title h2 { font-size: 1.5rem; margin: 0; border-left: 4px solid var(--accent); padding-left: 1rem; }
|
||||||
|
|
||||||
|
.chapters-table-wrapper {
|
||||||
|
background: var(--bg-surface); border-radius: var(--radius-md);
|
||||||
|
border: 1px solid rgba(255,255,255,0.05); overflow: hidden;
|
||||||
|
}
|
||||||
|
.chapters-table { width: 100%; border-collapse: collapse; text-align: left; }
|
||||||
|
.chapters-table th {
|
||||||
|
padding: 0.8rem 1.2rem; background: rgba(255,255,255,0.03);
|
||||||
|
color: var(--text-secondary); font-weight: 600; font-size: 0.85rem;
|
||||||
|
text-transform: uppercase; letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
.chapters-table td {
|
||||||
|
padding: 1rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||||
|
color: var(--text-primary); font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
.chapters-table tr:last-child td { border-bottom: none; }
|
||||||
|
.chapters-table tr:hover { background: var(--bg-surface-hover); }
|
||||||
|
|
||||||
|
.filter-select {
|
||||||
|
appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
background-color: var(--bg-surface); /* Dark background */
|
||||||
|
color: var(--text-primary); /* White text */
|
||||||
|
border: 1px solid rgba(255,255,255,0.1);
|
||||||
|
padding: 0.5rem 2rem 0.5rem 1rem;
|
||||||
|
border-radius: 99px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right 1rem center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-select:hover {
|
||||||
|
border-color: var(--accent);
|
||||||
|
background-color: var(--bg-surface-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Force Dropdown Options Background (browser dependent but works on most modern ones) */
|
||||||
|
.filter-select option {
|
||||||
|
background-color: var(--bg-surface);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.read-btn-small {
|
||||||
|
background: var(--accent); color: white; border: none;
|
||||||
|
padding: 0.4rem 0.9rem; border-radius: 6px; font-weight: 600; cursor: pointer;
|
||||||
|
font-size: 0.8rem; transition: 0.2s;
|
||||||
|
}
|
||||||
|
.read-btn-small:hover { background: #7c3aed; }
|
||||||
|
|
||||||
|
/* Pagination */
|
||||||
|
.pagination-controls {
|
||||||
|
display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; align-items: center;
|
||||||
|
}
|
||||||
|
.page-btn {
|
||||||
|
background: var(--bg-surface); border: 1px solid rgba(255,255,255,0.1);
|
||||||
|
color: white; padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer; font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
.page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||||
|
.page-btn:hover:not(:disabled) { border-color: var(--accent); }
|
||||||
|
|
||||||
|
@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.hero-wrapper { height: 40vh; }
|
||||||
|
.content-container { grid-template-columns: 1fr; margin-top: -80px; padding: 0 1.5rem 4rem 1.5rem; }
|
||||||
|
.poster-card { display: none; } /* Hide large poster on mobile */
|
||||||
|
|
||||||
|
.main-content { padding-top: 0; align-items: center; text-align: center; }
|
||||||
|
.book-title { font-size: 2.2rem; }
|
||||||
|
.meta-row { justify-content: center; }
|
||||||
|
.action-row { justify-content: center; width: 100%; }
|
||||||
|
.btn-primary, .btn-blur { flex: 1; justify-content: center; }
|
||||||
|
|
||||||
|
.sidebar { display: none; }
|
||||||
|
.chapters-table th:nth-child(3), .chapters-table td:nth-child(3) { display: none; }
|
||||||
|
.chapters-table th:nth-child(4), .chapters-table td:nth-child(4) { display: none; }
|
||||||
|
}
|
||||||
210
public/book.js
Normal file
210
public/book.js
Normal file
@@ -0,0 +1,210 @@
|
|||||||
|
const bookId = window.location.pathname.split('/').pop();
|
||||||
|
let allChapters = []; // Stores all fetched chapters
|
||||||
|
let filteredChapters = []; // Stores currently displayed chapters (filtered)
|
||||||
|
let currentPage = 1;
|
||||||
|
const itemsPerPage = 12;
|
||||||
|
|
||||||
|
async function init() {
|
||||||
|
try {
|
||||||
|
// 1. Load Metadata
|
||||||
|
const res = await fetch(`/api/book/${bookId}`);
|
||||||
|
const data = await res.json();
|
||||||
|
|
||||||
|
if (data.error) {
|
||||||
|
const titleEl = document.getElementById('title');
|
||||||
|
if (titleEl) titleEl.innerText = "Book Not Found";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Populate Hero Elements
|
||||||
|
const title = data.title.english || data.title.romaji;
|
||||||
|
document.title = `${title} | StreamFlow Books`;
|
||||||
|
|
||||||
|
const titleEl = document.getElementById('title');
|
||||||
|
if (titleEl) titleEl.innerText = title;
|
||||||
|
|
||||||
|
const descEl = document.getElementById('description');
|
||||||
|
if (descEl) descEl.innerHTML = data.description || "No description available.";
|
||||||
|
|
||||||
|
const scoreEl = document.getElementById('score');
|
||||||
|
if (scoreEl) scoreEl.innerText = (data.averageScore || '?') + '% Score';
|
||||||
|
|
||||||
|
const pubEl = document.getElementById('published-date');
|
||||||
|
if (pubEl) {
|
||||||
|
if (data.startDate && data.startDate.year) {
|
||||||
|
const y = data.startDate.year;
|
||||||
|
const m = data.startDate.month ? `-${data.startDate.month.toString().padStart(2, '0')}` : '';
|
||||||
|
const d = data.startDate.day ? `-${data.startDate.day.toString().padStart(2, '0')}` : '';
|
||||||
|
pubEl.innerText = `${y}${m}${d}`;
|
||||||
|
} else {
|
||||||
|
pubEl.innerText = '????';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusEl = document.getElementById('status');
|
||||||
|
if (statusEl) statusEl.innerText = data.status || 'Unknown';
|
||||||
|
|
||||||
|
const formatEl = document.getElementById('format');
|
||||||
|
if (formatEl) formatEl.innerText = data.format || 'MANGA';
|
||||||
|
|
||||||
|
const chaptersEl = document.getElementById('chapters');
|
||||||
|
if (chaptersEl) chaptersEl.innerText = data.chapters || '?';
|
||||||
|
|
||||||
|
const genresEl = document.getElementById('genres');
|
||||||
|
if(genresEl && data.genres) {
|
||||||
|
genresEl.innerText = data.genres.slice(0, 3).join(' • ');
|
||||||
|
}
|
||||||
|
|
||||||
|
const img = data.coverImage.extraLarge || data.coverImage.large;
|
||||||
|
|
||||||
|
const posterEl = document.getElementById('poster');
|
||||||
|
if (posterEl) posterEl.src = img;
|
||||||
|
|
||||||
|
const heroBgEl = document.getElementById('hero-bg');
|
||||||
|
if (heroBgEl) heroBgEl.src = data.bannerImage || img;
|
||||||
|
|
||||||
|
// 2. Load Chapters
|
||||||
|
loadChapters();
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Metadata Error:", err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadChapters() {
|
||||||
|
const tbody = document.getElementById('chapters-body');
|
||||||
|
if (!tbody) return;
|
||||||
|
|
||||||
|
tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">Searching extensions for chapters...</td></tr>';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/book/${bookId}/chapters`);
|
||||||
|
const data = await res.json();
|
||||||
|
|
||||||
|
allChapters = data.chapters || [];
|
||||||
|
filteredChapters = [...allChapters]; // Initially, show all
|
||||||
|
|
||||||
|
const totalEl = document.getElementById('total-chapters');
|
||||||
|
|
||||||
|
if (allChapters.length === 0) {
|
||||||
|
tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters found on loaded extensions.</td></tr>';
|
||||||
|
if (totalEl) totalEl.innerText = "0 Found";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (totalEl) totalEl.innerText = `${allChapters.length} Found`;
|
||||||
|
|
||||||
|
// Populate Provider Filter
|
||||||
|
populateProviderFilter();
|
||||||
|
|
||||||
|
// Read Button Action (Start at filtered Ch 1)
|
||||||
|
const readBtn = document.getElementById('read-start-btn');
|
||||||
|
if (readBtn && filteredChapters.length > 0) {
|
||||||
|
readBtn.onclick = () => openReader(filteredChapters[0].id);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderTable();
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; color: #ef4444;">Error loading chapters.</td></tr>';
|
||||||
|
console.error(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function populateProviderFilter() {
|
||||||
|
const select = document.getElementById('provider-filter');
|
||||||
|
if (!select) return;
|
||||||
|
|
||||||
|
// Extract unique providers
|
||||||
|
const providers = [...new Set(allChapters.map(ch => ch.provider))];
|
||||||
|
|
||||||
|
// Only show filter if there are actual providers found
|
||||||
|
if (providers.length > 0) {
|
||||||
|
select.style.display = 'inline-block';
|
||||||
|
|
||||||
|
// Clear existing options except "All"
|
||||||
|
select.innerHTML = '<option value="all">All Providers</option>';
|
||||||
|
|
||||||
|
providers.forEach(prov => {
|
||||||
|
const opt = document.createElement('option');
|
||||||
|
opt.value = prov;
|
||||||
|
opt.innerText = prov;
|
||||||
|
select.appendChild(opt);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Attach Event Listener
|
||||||
|
select.onchange = (e) => {
|
||||||
|
const selected = e.target.value;
|
||||||
|
if (selected === 'all') {
|
||||||
|
filteredChapters = [...allChapters];
|
||||||
|
} else {
|
||||||
|
filteredChapters = allChapters.filter(ch => ch.provider === selected);
|
||||||
|
}
|
||||||
|
currentPage = 1; // Reset to page 1 on filter change
|
||||||
|
renderTable();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTable() {
|
||||||
|
const tbody = document.getElementById('chapters-body');
|
||||||
|
if (!tbody) return;
|
||||||
|
|
||||||
|
tbody.innerHTML = '';
|
||||||
|
|
||||||
|
if (filteredChapters.length === 0) {
|
||||||
|
tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters match this filter.</td></tr>';
|
||||||
|
updatePagination(); // Update to hide buttons
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const start = (currentPage - 1) * itemsPerPage;
|
||||||
|
const end = start + itemsPerPage;
|
||||||
|
const pageItems = filteredChapters.slice(start, end);
|
||||||
|
|
||||||
|
pageItems.forEach(ch => {
|
||||||
|
const row = document.createElement('tr');
|
||||||
|
row.innerHTML = `
|
||||||
|
<td>${ch.number}</td>
|
||||||
|
<td>${ch.title || `Chapter ${ch.number}`}</td>
|
||||||
|
<td><span class="pill" style="font-size:0.75rem;">${ch.provider}</span></td>
|
||||||
|
<td>
|
||||||
|
<button class="read-btn-small" onclick="openReader('${ch.id}')">Read</button>
|
||||||
|
</td>
|
||||||
|
`;
|
||||||
|
tbody.appendChild(row);
|
||||||
|
});
|
||||||
|
|
||||||
|
updatePagination();
|
||||||
|
}
|
||||||
|
|
||||||
|
function updatePagination() {
|
||||||
|
const totalPages = Math.ceil(filteredChapters.length / itemsPerPage);
|
||||||
|
const pagination = document.getElementById('pagination');
|
||||||
|
|
||||||
|
if (!pagination) return;
|
||||||
|
|
||||||
|
if (totalPages <= 1) {
|
||||||
|
pagination.style.display = 'none';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
pagination.style.display = 'flex';
|
||||||
|
document.getElementById('page-info').innerText = `Page ${currentPage} of ${totalPages}`;
|
||||||
|
|
||||||
|
const prevBtn = document.getElementById('prev-page');
|
||||||
|
const nextBtn = document.getElementById('next-page');
|
||||||
|
|
||||||
|
prevBtn.disabled = currentPage === 1;
|
||||||
|
nextBtn.disabled = currentPage >= totalPages;
|
||||||
|
|
||||||
|
prevBtn.onclick = () => { currentPage--; renderTable(); };
|
||||||
|
nextBtn.onclick = () => { currentPage++; renderTable(); };
|
||||||
|
}
|
||||||
|
|
||||||
|
function openReader(chapterId) {
|
||||||
|
alert("Opening Reader for Chapter ID: " + chapterId);
|
||||||
|
// window.location.href = `/read/${bookId}/${chapterId}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
init();
|
||||||
341
public/books.css
Normal file
341
public/books.css
Normal file
@@ -0,0 +1,341 @@
|
|||||||
|
:root {
|
||||||
|
--bg-base: #09090b;
|
||||||
|
--bg-surface: #121215;
|
||||||
|
--bg-surface-hover: #1e1e22;
|
||||||
|
--accent: #8b5cf6;
|
||||||
|
--accent-glow: rgba(139, 92, 246, 0.4);
|
||||||
|
--text-primary: #ffffff;
|
||||||
|
--text-secondary: #a1a1aa;
|
||||||
|
--radius-md: 12px;
|
||||||
|
--radius-lg: 24px;
|
||||||
|
--nav-height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; outline: none; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background-color: var(--bg-base);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-family: 'Inter', system-ui, sans-serif;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- NAV --- */
|
||||||
|
.navbar {
|
||||||
|
width: 100%;
|
||||||
|
height: var(--nav-height);
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 3rem;
|
||||||
|
background: linear-gradient(to bottom, rgba(9,9,11,0.9) 0%, rgba(9,9,11,0) 100%);
|
||||||
|
transition: background 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar.scrolled {
|
||||||
|
background: rgba(9, 9, 11, 0.85);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-brand {
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.8rem;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
min-width: 200px;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-icon {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
background: linear-gradient(135deg, #8b5cf6, #3b82f6);
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 0 20px var(--accent-glow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-center {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
background: rgba(255,255,255,0.03);
|
||||||
|
padding: 0.4rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid rgba(255,255,255,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
padding: 0.6rem 1.5rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button:hover { color: white; }
|
||||||
|
.nav-button.active {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SEARCH BAR */
|
||||||
|
.search-wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 300px;
|
||||||
|
z-index: 2000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
width: 100%;
|
||||||
|
background: rgba(255,255,255,0.05);
|
||||||
|
border: 1px solid rgba(255,255,255,0.1);
|
||||||
|
padding: 0.7rem 1rem 0.7rem 2.5rem;
|
||||||
|
border-radius: 99px;
|
||||||
|
color: white;
|
||||||
|
font-family: inherit;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input:focus {
|
||||||
|
background: rgba(0, 0, 0, 0.8);
|
||||||
|
border-color: var(--accent);
|
||||||
|
box-shadow: 0 0 15px var(--accent-glow);
|
||||||
|
border-radius: 12px 12px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
position: absolute;
|
||||||
|
left: 12px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
pointer-events: none;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dropdown */
|
||||||
|
.search-results {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: rgba(15, 15, 18, 0.95);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.1);
|
||||||
|
border-top: none;
|
||||||
|
border-radius: 0 0 12px 12px;
|
||||||
|
padding: 0.5rem;
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.25rem;
|
||||||
|
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
||||||
|
max-height: 400px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-results.active { display: flex; }
|
||||||
|
|
||||||
|
.search-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-item:hover { background: rgba(255,255,255,0.1); }
|
||||||
|
|
||||||
|
.search-poster {
|
||||||
|
width: 40px;
|
||||||
|
height: 56px;
|
||||||
|
border-radius: 4px;
|
||||||
|
object-fit: cover;
|
||||||
|
background: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-info { flex: 1; overflow: hidden; }
|
||||||
|
|
||||||
|
.search-title {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rating-pill { color: #4ade80; font-weight: 700; }
|
||||||
|
|
||||||
|
/* --- HERO --- */
|
||||||
|
.hero-wrapper {
|
||||||
|
position: relative;
|
||||||
|
height: 85vh;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-background { position: absolute; inset: 0; z-index: 0; }
|
||||||
|
|
||||||
|
#hero-bg-media {
|
||||||
|
width: 100%; height: 100%; object-fit: cover; opacity: 0.6;
|
||||||
|
transform: scale(1.1); transition: opacity 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-vignette {
|
||||||
|
position: absolute; inset: 0;
|
||||||
|
background: radial-gradient(circle at center, transparent 0%, var(--bg-base) 120%),
|
||||||
|
linear-gradient(to top, var(--bg-base) 10%, transparent 60%);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
position: relative; z-index: 10; height: 100%;
|
||||||
|
max-width: 1600px; margin: 0 auto; padding: 0 3rem;
|
||||||
|
display: flex; align-items: flex-end; padding-bottom: 6rem; gap: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-poster-card {
|
||||||
|
width: 260px; height: 380px; border-radius: var(--radius-lg);
|
||||||
|
overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
|
||||||
|
border: 1px solid rgba(255,255,255,0.1); flex-shrink: 0;
|
||||||
|
background: #1a1a1a;
|
||||||
|
}
|
||||||
|
.hero-poster-card img { width: 100%; height: 100%; object-fit: cover; }
|
||||||
|
|
||||||
|
.hero-text { flex: 1; max-width: 800px; margin-bottom: 1rem; animation: fadeInUp 0.8s ease; }
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
font-size: 4rem; font-weight: 900; line-height: 1.1; margin: 0 0 1rem 0;
|
||||||
|
text-shadow: 0 4px 20px rgba(0,0,0,0.8);
|
||||||
|
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-meta { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; font-size: 1.1rem; font-weight: 600; }
|
||||||
|
.score-badge { color: #22c55e; background: rgba(34, 197, 94, 0.1); padding: 0.2rem 0.8rem; border-radius: 6px; border: 1px solid rgba(34, 197, 94, 0.2); }
|
||||||
|
|
||||||
|
.hero-desc {
|
||||||
|
font-size: 1.1rem; line-height: 1.6; color: #e4e4e7; margin-bottom: 2rem;
|
||||||
|
max-width: 650px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
|
||||||
|
overflow: hidden; text-shadow: 0 2px 4px rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-buttons { display: flex; gap: 1rem; }
|
||||||
|
|
||||||
|
.btn-primary, .btn-blur {
|
||||||
|
padding: 1rem 2.5rem; border-radius: 999px; font-weight: 700; font-size: 1rem;
|
||||||
|
border: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
.btn-primary { background: white; color: black; }
|
||||||
|
.btn-primary:hover { transform: scale(1.05); }
|
||||||
|
.btn-blur { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); color: white; border: 1px solid rgba(255,255,255,0.2); }
|
||||||
|
.btn-blur:hover { background: rgba(255, 255, 255, 0.2); }
|
||||||
|
|
||||||
|
/* --- SECTIONS --- */
|
||||||
|
.section { max-width: 1700px; margin: 0 auto; padding: 2rem 3rem; }
|
||||||
|
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
|
||||||
|
.section-title { font-size: 1.8rem; font-weight: 800; }
|
||||||
|
|
||||||
|
.carousel-wrapper { position: relative; }
|
||||||
|
.carousel { display: flex; gap: 1.25rem; overflow-x: auto; padding: 1rem 0; scroll-behavior: smooth; scrollbar-width: none; }
|
||||||
|
.carousel::-webkit-scrollbar { display: none; }
|
||||||
|
|
||||||
|
.scroll-btn {
|
||||||
|
position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px;
|
||||||
|
border-radius: 50%; background: rgba(20, 20, 23, 0.9); border: 1px solid rgba(255,255,255,0.1);
|
||||||
|
color: white; z-index: 20; cursor: pointer; display: flex; align-items: center; justify-content: center;
|
||||||
|
opacity: 0; transition: 0.3s;
|
||||||
|
}
|
||||||
|
.carousel-wrapper:hover .scroll-btn { opacity: 1; }
|
||||||
|
.scroll-btn:hover { background: var(--accent); }
|
||||||
|
.scroll-btn.left { left: -25px; }
|
||||||
|
.scroll-btn.right { right: -25px; }
|
||||||
|
|
||||||
|
/* --- CARDS --- */
|
||||||
|
.card { min-width: 220px; cursor: pointer; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
|
||||||
|
.card:hover { transform: translateY(-8px); }
|
||||||
|
.card-img-wrap { width: 100%; aspect-ratio: 2/3; border-radius: var(--radius-md); overflow: hidden; position: relative; margin-bottom: 0.8rem; background: #222; }
|
||||||
|
.card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
|
||||||
|
.card:hover .card-img-wrap img { transform: scale(1.05); }
|
||||||
|
|
||||||
|
.card-content h3 { margin: 0; font-size: 1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||||
|
.card-content p { margin: 4px 0 0 0; font-size: 0.85rem; color: var(--text-secondary); }
|
||||||
|
|
||||||
|
.skeleton {
|
||||||
|
background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
|
||||||
|
background-size: 200% 100%;
|
||||||
|
animation: shimmer 1.5s infinite;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.text-skeleton { height: 1em; width: 70%; margin-bottom: 0.5rem; }
|
||||||
|
.title-skeleton { height: 3em; width: 80%; margin-bottom: 1rem; }
|
||||||
|
.poster-skeleton { width: 100%; height: 100%; }
|
||||||
|
|
||||||
|
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
|
||||||
|
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
||||||
|
|
||||||
|
/* --- MOBILE --- */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
:root { --nav-height: auto; }
|
||||||
|
.navbar { padding: 1rem; flex-wrap: wrap; gap: 1rem; background: rgba(9,9,11,0.98); position: fixed; }
|
||||||
|
.nav-brand { flex: 1; min-width: auto; font-size: 1.3rem; }
|
||||||
|
.search-wrapper { order: 2; width: auto; flex: 1; min-width: 140px; }
|
||||||
|
.search-input { width: 100%; padding-left: 2.2rem; font-size: 0.9rem; }
|
||||||
|
.nav-center {
|
||||||
|
order: 3; width: 100%; padding: 0.5rem 0; overflow-x: auto;
|
||||||
|
justify-content: flex-start; gap: 0.8rem; background: transparent; border: none;
|
||||||
|
border-radius: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none;
|
||||||
|
}
|
||||||
|
.nav-center::-webkit-scrollbar { display: none; }
|
||||||
|
.nav-button { flex-shrink: 0; background: rgba(255,255,255,0.05); padding: 0.5rem 1rem; font-size: 0.85rem; border-radius: 99px; }
|
||||||
|
|
||||||
|
.hero-wrapper { height: 75vh; }
|
||||||
|
.hero-content { flex-direction: column; justify-content: flex-end; padding: 0 1.5rem 6rem 1.5rem; gap: 1rem; }
|
||||||
|
.hero-poster-card { display: none; }
|
||||||
|
.hero-text { width: 100%; text-align: center; margin-bottom: 0; }
|
||||||
|
.hero-title { font-size: 2.5rem; line-height: 1.1; }
|
||||||
|
.hero-meta { justify-content: center; flex-wrap: wrap; gap: 0.8rem; }
|
||||||
|
.hero-buttons { justify-content: center; width: 100%; }
|
||||||
|
.btn-primary, .btn-blur { flex: 1; justify-content: center; }
|
||||||
|
.hero-desc { text-align: center; -webkit-line-clamp: 3; font-size: 0.95rem; }
|
||||||
|
|
||||||
|
.section { padding: 1.5rem 1rem; }
|
||||||
|
.section-title { font-size: 1.4rem; }
|
||||||
|
.scroll-btn { display: none; }
|
||||||
|
.card { min-width: 140px; }
|
||||||
|
|
||||||
|
.search-results {
|
||||||
|
position: fixed; top: 120px; left: 0; right: 0;
|
||||||
|
width: 100%; border-radius: 0; max-height: 60vh; border: none; z-index: 2001;
|
||||||
|
}
|
||||||
|
}
|
||||||
189
public/books.js
Normal file
189
public/books.js
Normal file
@@ -0,0 +1,189 @@
|
|||||||
|
let trendingBooks = [];
|
||||||
|
let currentHeroIndex = 0;
|
||||||
|
let heroInterval;
|
||||||
|
|
||||||
|
// --- NAVBAR SCROLL ---
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
const nav = document.getElementById('navbar');
|
||||||
|
if (window.scrollY > 50) nav.classList.add('scrolled');
|
||||||
|
else nav.classList.remove('scrolled');
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- SEARCH LOGIC ---
|
||||||
|
const searchInput = document.getElementById('search-input');
|
||||||
|
const searchResults = document.getElementById('search-results');
|
||||||
|
let searchTimeout;
|
||||||
|
|
||||||
|
searchInput.addEventListener('input', (e) => {
|
||||||
|
const query = e.target.value;
|
||||||
|
clearTimeout(searchTimeout);
|
||||||
|
|
||||||
|
if (query.length < 2) {
|
||||||
|
searchResults.classList.remove('active');
|
||||||
|
searchResults.innerHTML = '';
|
||||||
|
searchInput.style.borderRadius = '99px';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Debounce 300ms
|
||||||
|
searchTimeout = setTimeout(() => {
|
||||||
|
fetchBookSearch(query);
|
||||||
|
}, 300);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Hide results on outside click
|
||||||
|
document.addEventListener('click', (e) => {
|
||||||
|
if (!e.target.closest('.search-wrapper')) {
|
||||||
|
searchResults.classList.remove('active');
|
||||||
|
searchInput.style.borderRadius = '99px';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
async function fetchBookSearch(query) {
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/search/books?q=${encodeURIComponent(query)}`);
|
||||||
|
const data = await res.json();
|
||||||
|
renderSearchResults(data.results || []);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Search Error:", err);
|
||||||
|
renderSearchResults([]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderSearchResults(results) {
|
||||||
|
searchResults.innerHTML = '';
|
||||||
|
|
||||||
|
if (!results || results.length === 0) {
|
||||||
|
searchResults.innerHTML = '<div style="padding:1rem; color:#888; text-align:center">No results found</div>';
|
||||||
|
} else {
|
||||||
|
results.forEach(book => {
|
||||||
|
const title = book.title.english || book.title.romaji || "Unknown";
|
||||||
|
const img = (book.coverImage && (book.coverImage.medium || book.coverImage.large)) || '';
|
||||||
|
const rating = book.averageScore ? `${book.averageScore}%` : 'N/A';
|
||||||
|
const year = book.seasonYear || (book.startDate ? book.startDate.year : '') || '????';
|
||||||
|
const format = book.format || 'MANGA';
|
||||||
|
|
||||||
|
const item = document.createElement('a');
|
||||||
|
item.className = 'search-item';
|
||||||
|
item.href = `/book/${book.id}`; // Direct navigation link
|
||||||
|
|
||||||
|
item.innerHTML = `
|
||||||
|
<img src="${img}" class="search-poster" alt="${title}">
|
||||||
|
<div class="search-info">
|
||||||
|
<div class="search-title">${title}</div>
|
||||||
|
<div class="search-meta">
|
||||||
|
<span class="rating-pill">${rating}</span>
|
||||||
|
<span>• ${year}</span>
|
||||||
|
<span>• ${format}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
searchResults.appendChild(item);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
searchResults.classList.add('active');
|
||||||
|
searchInput.style.borderRadius = '12px 12px 0 0';
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- CAROUSEL LOGIC ---
|
||||||
|
function scrollCarousel(id, direction) {
|
||||||
|
const container = document.getElementById(id);
|
||||||
|
if(container) {
|
||||||
|
const scrollAmount = container.clientWidth * 0.75;
|
||||||
|
container.scrollBy({ left: direction * scrollAmount, behavior: 'smooth' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- FETCH DATA ---
|
||||||
|
async function init() {
|
||||||
|
try {
|
||||||
|
// Fetch Trending
|
||||||
|
const res = await fetch('/api/books/trending');
|
||||||
|
const data = await res.json();
|
||||||
|
|
||||||
|
if (data.results && data.results.length > 0) {
|
||||||
|
trendingBooks = data.results;
|
||||||
|
updateHeroUI(trendingBooks[0]);
|
||||||
|
renderList('trending', trendingBooks);
|
||||||
|
startHeroCycle();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fetch Popular
|
||||||
|
const resPop = await fetch('/api/books/popular');
|
||||||
|
const dataPop = await resPop.json();
|
||||||
|
if (dataPop.results) renderList('popular', dataPop.results);
|
||||||
|
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Books Error:", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- HERO LOGIC ---
|
||||||
|
function startHeroCycle() {
|
||||||
|
if(heroInterval) clearInterval(heroInterval);
|
||||||
|
heroInterval = setInterval(() => {
|
||||||
|
if(trendingBooks.length > 0) {
|
||||||
|
currentHeroIndex = (currentHeroIndex + 1) % trendingBooks.length;
|
||||||
|
updateHeroUI(trendingBooks[currentHeroIndex]);
|
||||||
|
}
|
||||||
|
}, 8000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateHeroUI(book) {
|
||||||
|
if(!book) return;
|
||||||
|
const title = book.title.english || book.title.romaji;
|
||||||
|
const desc = book.description || "No description available.";
|
||||||
|
const poster = (book.coverImage && (book.coverImage.extraLarge || book.coverImage.large)) || '';
|
||||||
|
const banner = book.bannerImage || poster;
|
||||||
|
|
||||||
|
document.getElementById('hero-title').innerText = title;
|
||||||
|
document.getElementById('hero-desc').innerHTML = desc;
|
||||||
|
document.getElementById('hero-score').innerText = (book.averageScore || '?') + '% Score';
|
||||||
|
document.getElementById('hero-year').innerText = (book.startDate && book.startDate.year) ? book.startDate.year : '????';
|
||||||
|
document.getElementById('hero-type').innerText = book.format || 'MANGA';
|
||||||
|
|
||||||
|
const heroPoster = document.getElementById('hero-poster');
|
||||||
|
if(heroPoster) heroPoster.src = poster;
|
||||||
|
|
||||||
|
// Update background
|
||||||
|
const bg = document.getElementById('hero-bg-media');
|
||||||
|
if(bg) bg.src = banner;
|
||||||
|
|
||||||
|
// Setup Read Now Button
|
||||||
|
const readBtn = document.getElementById('read-btn');
|
||||||
|
if (readBtn) {
|
||||||
|
readBtn.onclick = () => window.location.href = `/book/${book.id}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- RENDER LIST ---
|
||||||
|
function renderList(id, list) {
|
||||||
|
const container = document.getElementById(id);
|
||||||
|
container.innerHTML = '';
|
||||||
|
|
||||||
|
list.forEach(book => {
|
||||||
|
const title = book.title.english || book.title.romaji;
|
||||||
|
const cover = book.coverImage ? book.coverImage.large : '';
|
||||||
|
const score = book.averageScore || '--';
|
||||||
|
const type = book.format || 'Book';
|
||||||
|
|
||||||
|
const el = document.createElement('div');
|
||||||
|
el.className = 'card';
|
||||||
|
el.onclick = () => {
|
||||||
|
// Navigate to book page
|
||||||
|
window.location.href = `/book/${book.id}`;
|
||||||
|
};
|
||||||
|
el.innerHTML = `
|
||||||
|
<div class="card-img-wrap"><img src="${cover}" loading="lazy"></div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h3>${title}</h3>
|
||||||
|
<p>${score}% • ${type}</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
container.appendChild(el);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
init();
|
||||||
352
public/home.css
Normal file
352
public/home.css
Normal file
@@ -0,0 +1,352 @@
|
|||||||
|
:root {
|
||||||
|
--bg-base: #09090b;
|
||||||
|
--bg-surface: #121215;
|
||||||
|
--bg-surface-hover: #1e1e22;
|
||||||
|
--accent: #8b5cf6;
|
||||||
|
--accent-glow: rgba(139, 92, 246, 0.4);
|
||||||
|
--text-primary: #ffffff;
|
||||||
|
--text-secondary: #a1a1aa;
|
||||||
|
--radius-md: 12px;
|
||||||
|
--radius-lg: 24px;
|
||||||
|
--nav-height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; outline: none; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background-color: var(--bg-base);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-family: 'Inter', system-ui, sans-serif;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- NAV --- */
|
||||||
|
.navbar {
|
||||||
|
width: 100%;
|
||||||
|
height: var(--nav-height);
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 3rem;
|
||||||
|
background: linear-gradient(to bottom, rgba(9,9,11,0.9) 0%, rgba(9,9,11,0) 100%);
|
||||||
|
transition: background 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar.scrolled {
|
||||||
|
background: rgba(9, 9, 11, 0.85);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-brand {
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.8rem;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-icon {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
background: linear-gradient(135deg, #8b5cf6, #3b82f6);
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 0 20px var(--accent-glow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-center {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
background: rgba(255,255,255,0.03);
|
||||||
|
padding: 0.4rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid rgba(255,255,255,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
padding: 0.6rem 1.5rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button:hover { color: white; }
|
||||||
|
.nav-button.active {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SEARCH BAR */
|
||||||
|
.search-wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
.search-input {
|
||||||
|
width: 100%;
|
||||||
|
background: rgba(255,255,255,0.05);
|
||||||
|
border: 1px solid rgba(255,255,255,0.1);
|
||||||
|
padding: 0.7rem 1rem 0.7rem 2.5rem;
|
||||||
|
border-radius: 99px;
|
||||||
|
color: white;
|
||||||
|
font-family: inherit;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
.search-input:focus {
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
border-color: var(--accent);
|
||||||
|
box-shadow: 0 0 15px var(--accent-glow);
|
||||||
|
}
|
||||||
|
.search-icon {
|
||||||
|
position: absolute;
|
||||||
|
left: 12px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
pointer-events: none;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- HERO --- */
|
||||||
|
.hero-wrapper {
|
||||||
|
position: relative;
|
||||||
|
height: 85vh;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-background { position: absolute; inset: 0; z-index: 0; }
|
||||||
|
|
||||||
|
#hero-bg-media {
|
||||||
|
width: 100%; height: 100%; object-fit: cover; opacity: 0.6;
|
||||||
|
transform: scale(1.1); transition: opacity 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-vignette {
|
||||||
|
position: absolute; inset: 0;
|
||||||
|
background: radial-gradient(circle at center, transparent 0%, var(--bg-base) 120%),
|
||||||
|
linear-gradient(to top, var(--bg-base) 10%, transparent 60%);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
position: relative; z-index: 10; height: 100%;
|
||||||
|
max-width: 1600px; margin: 0 auto; padding: 0 3rem;
|
||||||
|
display: flex; align-items: flex-end; padding-bottom: 6rem; gap: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-poster-card {
|
||||||
|
width: 260px; height: 380px; border-radius: var(--radius-lg);
|
||||||
|
overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
|
||||||
|
border: 1px solid rgba(255,255,255,0.1); flex-shrink: 0;
|
||||||
|
background: #1a1a1a; /* fallback */
|
||||||
|
}
|
||||||
|
.hero-poster-card img { width: 100%; height: 100%; object-fit: cover; }
|
||||||
|
|
||||||
|
.hero-text { flex: 1; max-width: 800px; margin-bottom: 1rem; animation: fadeInUp 0.8s ease; }
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
font-size: 4rem; font-weight: 900; line-height: 1.1; margin: 0 0 1rem 0;
|
||||||
|
text-shadow: 0 4px 20px rgba(0,0,0,0.8);
|
||||||
|
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-meta { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; font-size: 1.1rem; font-weight: 600; }
|
||||||
|
.score-badge { color: #22c55e; background: rgba(34, 197, 94, 0.1); padding: 0.2rem 0.8rem; border-radius: 6px; border: 1px solid rgba(34, 197, 94, 0.2); }
|
||||||
|
|
||||||
|
.hero-desc {
|
||||||
|
font-size: 1.1rem; line-height: 1.6; color: #e4e4e7; margin-bottom: 2rem;
|
||||||
|
max-width: 650px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
|
||||||
|
overflow: hidden; text-shadow: 0 2px 4px rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-buttons { display: flex; gap: 1rem; }
|
||||||
|
|
||||||
|
.btn-primary, .btn-blur {
|
||||||
|
padding: 1rem 2.5rem; border-radius: 999px; font-weight: 700; font-size: 1rem;
|
||||||
|
border: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
.btn-primary { background: white; color: black; }
|
||||||
|
.btn-primary:hover { transform: scale(1.05); }
|
||||||
|
.btn-blur { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); color: white; border: 1px solid rgba(255,255,255,0.2); }
|
||||||
|
.btn-blur:hover { background: rgba(255, 255, 255, 0.2); }
|
||||||
|
|
||||||
|
/* --- CAROUSELS --- */
|
||||||
|
.section { max-width: 1700px; margin: 0 auto; padding: 2rem 3rem; }
|
||||||
|
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
|
||||||
|
.section-title { font-size: 1.8rem; font-weight: 800; }
|
||||||
|
|
||||||
|
.carousel-wrapper { position: relative; }
|
||||||
|
.carousel { display: flex; gap: 1.25rem; overflow-x: auto; padding: 1rem 0; scroll-behavior: smooth; scrollbar-width: none; }
|
||||||
|
.carousel::-webkit-scrollbar { display: none; }
|
||||||
|
|
||||||
|
.scroll-btn {
|
||||||
|
position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px;
|
||||||
|
border-radius: 50%; background: rgba(20, 20, 23, 0.9); border: 1px solid rgba(255,255,255,0.1);
|
||||||
|
color: white; z-index: 20; cursor: pointer; display: flex; align-items: center; justify-content: center;
|
||||||
|
opacity: 0; transition: 0.3s;
|
||||||
|
}
|
||||||
|
.carousel-wrapper:hover .scroll-btn { opacity: 1; }
|
||||||
|
.scroll-btn:hover { background: var(--accent); }
|
||||||
|
.scroll-btn.left { left: -25px; }
|
||||||
|
.scroll-btn.right { right: -25px; }
|
||||||
|
|
||||||
|
/* --- CARDS --- */
|
||||||
|
.card { min-width: 220px; cursor: pointer; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
|
||||||
|
.card:hover { transform: translateY(-8px); }
|
||||||
|
.card-img-wrap { width: 100%; aspect-ratio: 2/3; border-radius: var(--radius-md); overflow: hidden; position: relative; margin-bottom: 0.8rem; background: #222; }
|
||||||
|
.card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
|
||||||
|
.card:hover .card-img-wrap img { transform: scale(1.05); }
|
||||||
|
|
||||||
|
.card-content h3 { margin: 0; font-size: 1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||||
|
.card-content p { margin: 4px 0 0 0; font-size: 0.85rem; color: var(--text-secondary); }
|
||||||
|
|
||||||
|
/* SKELETON LOADING (The "Non-Dumb" Metadata fix) */
|
||||||
|
.skeleton {
|
||||||
|
background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
|
||||||
|
background-size: 200% 100%;
|
||||||
|
animation: shimmer 1.5s infinite;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.text-skeleton { height: 1em; width: 70%; margin-bottom: 0.5rem; }
|
||||||
|
.title-skeleton { height: 3em; width: 80%; margin-bottom: 1rem; }
|
||||||
|
.poster-skeleton { width: 100%; height: 100%; }
|
||||||
|
|
||||||
|
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
|
||||||
|
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
||||||
|
|
||||||
|
.search-wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 300px;
|
||||||
|
z-index: 2000; /* Ensure it sits above hero content */
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
width: 100%;
|
||||||
|
background: rgba(255,255,255,0.05);
|
||||||
|
border: 1px solid rgba(255,255,255,0.1);
|
||||||
|
padding: 0.7rem 1rem 0.7rem 2.5rem;
|
||||||
|
border-radius: 99px;
|
||||||
|
color: white;
|
||||||
|
font-family: inherit;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input:focus {
|
||||||
|
background: rgba(0, 0, 0, 0.8);
|
||||||
|
border-color: var(--accent);
|
||||||
|
box-shadow: 0 0 15px var(--accent-glow);
|
||||||
|
border-radius: 12px 12px 0 0; /* Flatten bottom corners when open */
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
position: absolute;
|
||||||
|
left: 12px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
pointer-events: none;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The Dropdown Container */
|
||||||
|
.search-results {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: rgba(15, 15, 18, 0.95);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.1);
|
||||||
|
border-top: none;
|
||||||
|
border-radius: 0 0 12px 12px;
|
||||||
|
padding: 0.5rem;
|
||||||
|
display: none; /* Hidden by default */
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.25rem;
|
||||||
|
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
||||||
|
max-height: 400px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-results.active {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Individual Result Item */
|
||||||
|
.search-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-item:hover {
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-poster {
|
||||||
|
width: 40px;
|
||||||
|
height: 56px;
|
||||||
|
border-radius: 4px;
|
||||||
|
object-fit: cover;
|
||||||
|
background: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-info {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-title {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rating-pill {
|
||||||
|
color: #4ade80;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scrollbar for results */
|
||||||
|
.search-results::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
.search-results::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
418
public/watch.css
Normal file
418
public/watch.css
Normal file
@@ -0,0 +1,418 @@
|
|||||||
|
:root {
|
||||||
|
--bg-base: #000000;
|
||||||
|
--bg-overlay: #101012;
|
||||||
|
--accent: #8b5cf6; /* Keeping your purple accent for brand consistency */
|
||||||
|
--accent-dark: #7c3aed;
|
||||||
|
--text-primary: #ffffff;
|
||||||
|
--text-secondary: #a1a1aa;
|
||||||
|
--radius-full: 9999px;
|
||||||
|
--radius-md: 16px;
|
||||||
|
--glass-border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
--glass-bg: rgba(20, 20, 23, 0.7);
|
||||||
|
|
||||||
|
/* Plyr Theme Variables - YouTube Style */
|
||||||
|
--plyr-color-main: #8b5cf6;
|
||||||
|
--plyr-video-control-color: #ffffff;
|
||||||
|
--plyr-video-control-background-hover: rgba(255, 255, 255, 0.1); /* Subtle hover like YT */
|
||||||
|
--plyr-menu-background: rgba(28, 28, 30, 0.95);
|
||||||
|
--plyr-menu-color: #ffffff;
|
||||||
|
--plyr-menu-border-color: rgba(255, 255, 255, 0.1);
|
||||||
|
--plyr-font-family: 'Inter', sans-serif;
|
||||||
|
|
||||||
|
/* Custom YT-like sizing */
|
||||||
|
--plyr-control-icon-size: 18px;
|
||||||
|
--plyr-control-spacing: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background-color: var(--bg-base);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- TOP BAR --- */
|
||||||
|
.top-bar {
|
||||||
|
padding: 1.5rem 2rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
position: fixed;
|
||||||
|
top: 0; left: 0; right: 0;
|
||||||
|
z-index: 100;
|
||||||
|
background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-btn {
|
||||||
|
pointer-events: auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.6rem;
|
||||||
|
padding: 0.8rem 1.8rem;
|
||||||
|
background: var(--glass-bg);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
border: var(--glass-border);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||||
|
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-btn:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
transform: scale(1.02);
|
||||||
|
box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
|
||||||
|
border-color: rgba(139, 92, 246, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- THEATER LAYOUT --- */
|
||||||
|
.theater-container {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1300px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 2rem;
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- TOOLBAR (Extensions + Toggles) --- */
|
||||||
|
.player-toolbar {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
position: relative;
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modern Pill Dropdown */
|
||||||
|
.extension-select {
|
||||||
|
appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
background-color: var(--glass-bg);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
border: var(--glass-border);
|
||||||
|
color: var(--text-primary);
|
||||||
|
padding: 0.7rem 2.5rem 0.7rem 1.5rem;
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
min-width: 180px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right 1rem center;
|
||||||
|
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.extension-select:hover {
|
||||||
|
background-color: rgba(255,255,255,0.1);
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SUB / DUB TOGGLE */
|
||||||
|
.sd-toggle {
|
||||||
|
display: flex;
|
||||||
|
background: var(--glass-bg);
|
||||||
|
border: var(--glass-border);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
padding: 4px;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sd-option {
|
||||||
|
padding: 0.5rem 1.2rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
z-index: 2;
|
||||||
|
transition: color 0.3s;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sd-option.active {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The sliding pill background */
|
||||||
|
.sd-bg {
|
||||||
|
position: absolute;
|
||||||
|
top: 4px;
|
||||||
|
left: 4px;
|
||||||
|
bottom: 4px;
|
||||||
|
width: calc(50% - 4px);
|
||||||
|
background: var(--accent);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||||
|
box-shadow: 0 2px 10px rgba(139, 92, 246, 0.4);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Toggle State Logic handled via class on parent */
|
||||||
|
.sd-toggle[data-state="dub"] .sd-bg {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- VIDEO WRAPPER --- */
|
||||||
|
.video-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 16/9;
|
||||||
|
background: #000;
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08);
|
||||||
|
position: relative;
|
||||||
|
transition: box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-wrapper:hover {
|
||||||
|
box-shadow: 0 25px 70px rgba(139, 92, 246, 0.15), 0 0 0 1px rgba(139, 92, 246, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
video {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loading Overlay */
|
||||||
|
.loading-overlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: #000;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 20;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border: 3px solid rgba(255,255,255,0.1);
|
||||||
|
border-radius: 50%;
|
||||||
|
border-top-color: var(--accent);
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin { 100% { transform: rotate(360deg); } }
|
||||||
|
|
||||||
|
/* --- CONTROLS --- */
|
||||||
|
.controls-area {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.episode-info h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.episode-info span {
|
||||||
|
color: var(--accent);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
margin-top: 4px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-controls {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn {
|
||||||
|
background: rgba(255,255,255,0.05);
|
||||||
|
border: 1px solid rgba(255,255,255,0.1);
|
||||||
|
color: white;
|
||||||
|
padding: 0.8rem 1.6rem;
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.6rem;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn:hover:not(:disabled) {
|
||||||
|
background: var(--accent);
|
||||||
|
border-color: var(--accent);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 5px 15px rgba(139, 92, 246, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn:disabled {
|
||||||
|
opacity: 0.3;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- PLYR YOUTUBE-STYLE OVERRIDES --- */
|
||||||
|
|
||||||
|
/* 1. Base Video Container */
|
||||||
|
.plyr--video {
|
||||||
|
border-radius: 20px;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 2. Controls Container (Gradient Overlay) */
|
||||||
|
.plyr__controls {
|
||||||
|
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%) !important;
|
||||||
|
padding: 10px 20px 20px 20px !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
border-radius: 0 0 20px 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 3. Progress Bar (YouTube Style) */
|
||||||
|
.plyr__progress input[type=range] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The track */
|
||||||
|
.plyr--full-ui input[type=range] {
|
||||||
|
color: var(--accent); /* Your brand color instead of YouTube red */
|
||||||
|
height: 4px; /* Thinner by default */
|
||||||
|
transition: height 0.1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Expand progress bar on hover like YT */
|
||||||
|
.plyr__progress__container:hover input[type=range] {
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 4. Buttons (Clean Icons, No Background) */
|
||||||
|
.plyr__control {
|
||||||
|
background: transparent !important;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: transform 0.1s, opacity 0.2s;
|
||||||
|
padding: 7px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plyr__control:hover {
|
||||||
|
background: rgba(255,255,255,0.1) !important;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plyr__control svg {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 5. Center Play Button (Large, Pulsing) */
|
||||||
|
.plyr__control--overlaid {
|
||||||
|
background: rgba(0, 0, 0, 0.6) !important;
|
||||||
|
border: 2px solid white; /* Optional: White ring for classic look */
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 1.5rem !important;
|
||||||
|
opacity: 0.9;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plyr__control--overlaid svg {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plyr__control--overlaid:hover {
|
||||||
|
background: var(--accent) !important;
|
||||||
|
border-color: var(--accent);
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 6. Time Display */
|
||||||
|
.plyr__time {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 7. Menus (Floating Glass Panels) */
|
||||||
|
.plyr__menu__container {
|
||||||
|
background: rgba(28, 28, 30, 0.95) !important;
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
border: 1px solid rgba(255,255,255,0.1);
|
||||||
|
border-radius: 12px !important;
|
||||||
|
padding: 8px;
|
||||||
|
box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
|
||||||
|
bottom: 60px !important; /* Lift above controls */
|
||||||
|
}
|
||||||
|
|
||||||
|
.plyr__menu__container .plyr__control {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 8px 12px !important;
|
||||||
|
border-radius: 6px;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plyr__menu__container .plyr__control:hover {
|
||||||
|
background: rgba(255,255,255,0.1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Active menu item */
|
||||||
|
.plyr__menu__container .plyr__control[aria-checked="true"] {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
.plyr__menu__container .plyr__control[aria-checked="true"]::after {
|
||||||
|
background: var(--accent); /* The checkmark */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 8. Tooltips (Time preview) */
|
||||||
|
.plyr__tooltip {
|
||||||
|
background: rgba(28, 28, 30, 0.9);
|
||||||
|
border: 1px solid rgba(255,255,255,0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 4px 8px;
|
||||||
|
box-shadow: 0 2px 10px rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 9. Subtitles (Cinematic) */
|
||||||
|
.plyr__cues {
|
||||||
|
margin-bottom: 50px !important; /* Push subtitles up so controls don't overlap */
|
||||||
|
}
|
||||||
|
|
||||||
|
.plyr__cues span {
|
||||||
|
background-color: rgba(0, 0, 0, 0.75) !important;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-shadow: 0 2px 4px rgba(0,0,0,0.8);
|
||||||
|
}
|
||||||
507
server.js
Normal file
507
server.js
Normal file
@@ -0,0 +1,507 @@
|
|||||||
|
const fastify = require('fastify')({ logger: true });
|
||||||
|
const path = require('path');
|
||||||
|
const fs = require('fs');
|
||||||
|
const os = require('os');
|
||||||
|
const { animeMetadata } = require('./src/metadata/anilist');
|
||||||
|
const sqlite3 = require('sqlite3').verbose();
|
||||||
|
|
||||||
|
// --- DATABASE CONNECTION ---
|
||||||
|
const DB_PATH = path.join(__dirname, 'src', 'metadata', 'anilist_anime.db');
|
||||||
|
const db = new sqlite3.Database(DB_PATH, sqlite3.OPEN_READONLY, (err) => {
|
||||||
|
if (err) console.error("Database Error:", err.message);
|
||||||
|
else console.log("Connected to local AniList database.");
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- EXTENSION LOADER ---
|
||||||
|
const extensions = new Map();
|
||||||
|
|
||||||
|
async function loadExtensions() {
|
||||||
|
const homeDir = os.homedir();
|
||||||
|
const extensionsDir = path.join(homeDir, 'WaifuBoards', 'extensions');
|
||||||
|
|
||||||
|
if (!fs.existsSync(extensionsDir)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const files = await fs.promises.readdir(extensionsDir);
|
||||||
|
for (const file of files) {
|
||||||
|
if (file.endsWith('.js')) {
|
||||||
|
const filePath = path.join(extensionsDir, file);
|
||||||
|
try {
|
||||||
|
delete require.cache[require.resolve(filePath)];
|
||||||
|
const ExtensionClass = require(filePath);
|
||||||
|
const instance = typeof ExtensionClass === 'function'
|
||||||
|
? new ExtensionClass()
|
||||||
|
: (ExtensionClass.default ? new ExtensionClass.default() : null);
|
||||||
|
|
||||||
|
if (instance && (instance.type === "anime-board" || instance.type === "book-board")) {
|
||||||
|
const name = instance.constructor.name;
|
||||||
|
extensions.set(name, instance);
|
||||||
|
console.log(`Loaded Extension: ${name}`);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(`Failed to load extension ${file}:`, e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Extension Scan Error:", err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
loadExtensions();
|
||||||
|
|
||||||
|
// --- STATIC & VIEWS ---
|
||||||
|
fastify.register(require('@fastify/static'), {
|
||||||
|
root: path.join(__dirname, 'public'),
|
||||||
|
prefix: '/public/',
|
||||||
|
});
|
||||||
|
|
||||||
|
fastify.get('/', (req, reply) => {
|
||||||
|
const stream = fs.createReadStream(path.join(__dirname, 'views', 'index.html'));
|
||||||
|
reply.type('text/html').send(stream);
|
||||||
|
});
|
||||||
|
|
||||||
|
// NEW: Books Page
|
||||||
|
fastify.get('/books', (req, reply) => {
|
||||||
|
const stream = fs.createReadStream(path.join(__dirname, 'views', 'books.html'));
|
||||||
|
reply.type('text/html').send(stream);
|
||||||
|
});
|
||||||
|
|
||||||
|
fastify.get('/anime/:id', (req, reply) => {
|
||||||
|
const stream = fs.createReadStream(path.join(__dirname, 'views', 'anime.html'));
|
||||||
|
reply.type('text/html').send(stream);
|
||||||
|
});
|
||||||
|
|
||||||
|
fastify.get('/watch/:id/:episode', (req, reply) => {
|
||||||
|
const stream = fs.createReadStream(path.join(__dirname, 'views', 'watch.html'));
|
||||||
|
reply.type('text/html').send(stream);
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- API ENDPOINTS ---
|
||||||
|
|
||||||
|
// NEW: Books API (Manga)
|
||||||
|
fastify.get('/api/books/trending', (req, reply) => {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
db.all("SELECT full_data FROM trending_books ORDER BY rank ASC LIMIT 10", [], (err, rows) => {
|
||||||
|
if (err || !rows) resolve({ results: [] });
|
||||||
|
else resolve({ results: rows.map(r => JSON.parse(r.full_data)) });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
fastify.get('/api/books/popular', (req, reply) => {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
db.all("SELECT full_data FROM popular_books ORDER BY rank ASC LIMIT 10", [], (err, rows) => {
|
||||||
|
if (err || !rows) resolve({ results: [] });
|
||||||
|
else resolve({ results: rows.map(r => JSON.parse(r.full_data)) });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// ... [Keep previous Anime/Proxy APIs] ...
|
||||||
|
// 1. Proxy
|
||||||
|
fastify.get('/api/proxy', async (req, reply) => {
|
||||||
|
const { url, referer, origin, userAgent } = req.query;
|
||||||
|
if (!url) return reply.code(400).send("No URL provided");
|
||||||
|
|
||||||
|
const headers = {
|
||||||
|
'User-Agent': userAgent || "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
|
||||||
|
'Accept': '*/*',
|
||||||
|
'Accept-Language': 'en-US,en;q=0.9'
|
||||||
|
};
|
||||||
|
if (referer) headers['Referer'] = referer;
|
||||||
|
if (origin) headers['Origin'] = origin;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(url, { headers, redirect: 'follow' });
|
||||||
|
if (!response.ok) return reply.code(response.status).send(`Proxy Error: ${response.statusText}`);
|
||||||
|
|
||||||
|
reply.header('Access-Control-Allow-Origin', '*');
|
||||||
|
reply.header('Access-Control-Allow-Methods', 'GET, OPTIONS');
|
||||||
|
const contentType = response.headers.get('content-type');
|
||||||
|
if (contentType) reply.header('Content-Type', contentType);
|
||||||
|
|
||||||
|
const isM3U8 = (contentType && (contentType.includes('mpegurl'))) || url.includes('.m3u8');
|
||||||
|
|
||||||
|
if (isM3U8) {
|
||||||
|
const text = await response.text();
|
||||||
|
const baseUrl = new URL(response.url);
|
||||||
|
const newText = text.replace(/^(?!#)(?!\s*$).+/gm, (line) => {
|
||||||
|
line = line.trim();
|
||||||
|
let absoluteUrl;
|
||||||
|
try { absoluteUrl = new URL(line, baseUrl).href; } catch(e) { return line; }
|
||||||
|
const proxyParams = new URLSearchParams();
|
||||||
|
proxyParams.set('url', absoluteUrl);
|
||||||
|
if (referer) proxyParams.set('referer', referer);
|
||||||
|
if (origin) proxyParams.set('origin', origin);
|
||||||
|
if (userAgent) proxyParams.set('userAgent', userAgent);
|
||||||
|
return `/api/proxy?${proxyParams.toString()}`;
|
||||||
|
});
|
||||||
|
return newText;
|
||||||
|
} else {
|
||||||
|
const { Readable } = require('stream');
|
||||||
|
return reply.send(Readable.fromWeb(response.body));
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
fastify.log.error(err);
|
||||||
|
return reply.code(500).send("Internal Server Error");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Extensions
|
||||||
|
fastify.get('/api/extensions', async (req, reply) => {
|
||||||
|
return { extensions: Array.from(extensions.keys()) };
|
||||||
|
});
|
||||||
|
|
||||||
|
fastify.get('/api/extension/:name/settings', async (req, reply) => {
|
||||||
|
const name = req.params.name;
|
||||||
|
const ext = extensions.get(name);
|
||||||
|
if (!ext) return { error: "Extension not found" };
|
||||||
|
if (!ext.getSettings) return { episodeServers: ["default"], supportsDub: false };
|
||||||
|
return ext.getSettings();
|
||||||
|
});
|
||||||
|
|
||||||
|
fastify.get('/api/watch/stream', async (req, reply) => {
|
||||||
|
const { animeId, episode, server, category, ext } = req.query;
|
||||||
|
const extension = extensions.get(ext);
|
||||||
|
if (!extension) return { error: "Extension not found" };
|
||||||
|
|
||||||
|
const animeData = await new Promise((resolve) => {
|
||||||
|
db.get("SELECT full_data FROM anime WHERE id = ?", [animeId], (err, row) => {
|
||||||
|
if (err || !row) resolve(null);
|
||||||
|
else resolve(JSON.parse(row.full_data));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!animeData) return { error: "Anime metadata not found" };
|
||||||
|
|
||||||
|
try {
|
||||||
|
const searchOptions = {
|
||||||
|
query: animeData.title.english || animeData.title.romaji,
|
||||||
|
dub: category === 'dub',
|
||||||
|
media: {
|
||||||
|
romajiTitle: animeData.title.romaji,
|
||||||
|
englishTitle: animeData.title.english || "",
|
||||||
|
startDate: animeData.startDate || { year: 0, month: 0, day: 0 }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const searchResults = await extension.search(searchOptions);
|
||||||
|
if (!searchResults || searchResults.length === 0) return { error: "Anime not found on provider" };
|
||||||
|
|
||||||
|
const bestMatch = searchResults[0];
|
||||||
|
const episodes = await extension.findEpisodes(bestMatch.id);
|
||||||
|
const targetEp = episodes.find(e => e.number === parseInt(episode));
|
||||||
|
|
||||||
|
if (!targetEp) return { error: "Episode not found" };
|
||||||
|
|
||||||
|
const serverName = server || "default";
|
||||||
|
const streamData = await extension.findEpisodeServer(targetEp, serverName);
|
||||||
|
return streamData;
|
||||||
|
} catch (err) {
|
||||||
|
return { error: err.message };
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
fastify.get('/api/anime/:id', (req, reply) => {
|
||||||
|
const id = req.params.id;
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
db.get("SELECT full_data FROM anime WHERE id = ?", [id], (err, row) => {
|
||||||
|
if(err) resolve({ error: "Database error" });
|
||||||
|
else if (!row) resolve({ error: "Anime not found" });
|
||||||
|
else resolve(JSON.parse(row.full_data));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
fastify.get('/api/search/books', async (req, reply) => {
|
||||||
|
const query = req.query.q;
|
||||||
|
if (!query || query.length < 2) return { results: [] };
|
||||||
|
|
||||||
|
// A. Local DB Search (Prioritized)
|
||||||
|
const dbResults = await new Promise((resolve) => {
|
||||||
|
const sql = `SELECT full_data FROM books WHERE full_data LIKE ? LIMIT 50`;
|
||||||
|
db.all(sql, [`%${query}%`], (err, rows) => {
|
||||||
|
if (err || !rows) resolve([]);
|
||||||
|
else {
|
||||||
|
try {
|
||||||
|
const results = rows.map(row => JSON.parse(row.full_data));
|
||||||
|
const clean = results.filter(book => {
|
||||||
|
const searchTerms = [
|
||||||
|
book.title.english,
|
||||||
|
book.title.romaji,
|
||||||
|
book.title.native,
|
||||||
|
...(book.synonyms || [])
|
||||||
|
].filter(Boolean).map(t => t.toLowerCase());
|
||||||
|
return searchTerms.some(term => term.includes(query.toLowerCase()));
|
||||||
|
});
|
||||||
|
resolve(clean.slice(0, 10));
|
||||||
|
} catch (e) { resolve([]); }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
if (dbResults.length > 0) {
|
||||||
|
return { results: dbResults };
|
||||||
|
}
|
||||||
|
|
||||||
|
// B. Live AniList Fallback (If Local DB is empty/missing data)
|
||||||
|
try {
|
||||||
|
console.log(`[Books] Local DB miss for "${query}", fetching live...`);
|
||||||
|
const gql = `
|
||||||
|
query ($search: String) {
|
||||||
|
Page(page: 1, perPage: 5) {
|
||||||
|
media(search: $search, type: MANGA, isAdult: false) {
|
||||||
|
id title { romaji english native }
|
||||||
|
coverImage { extraLarge large }
|
||||||
|
bannerImage description averageScore format
|
||||||
|
seasonYear startDate { year }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}`;
|
||||||
|
|
||||||
|
const response = await fetch('https://graphql.anilist.co', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
|
||||||
|
body: JSON.stringify({ query: gql, variables: { search: query } })
|
||||||
|
});
|
||||||
|
|
||||||
|
const liveData = await response.json();
|
||||||
|
if (liveData.data && liveData.data.Page.media.length > 0) {
|
||||||
|
return { results: liveData.data.Page.media };
|
||||||
|
}
|
||||||
|
} catch(e) {
|
||||||
|
console.error("Live Search Error:", e.message);
|
||||||
|
}
|
||||||
|
|
||||||
|
// C. Extensions Fallback (If not on AniList at all)
|
||||||
|
let extResults = [];
|
||||||
|
for (const [name, ext] of extensions) {
|
||||||
|
// UPDATED: Check for 'book-board' or 'manga-board'
|
||||||
|
if ((ext.type === 'book-board' || ext.type === 'manga-board') && ext.search) {
|
||||||
|
try {
|
||||||
|
console.log(`[${name}] Searching for book: ${query}`);
|
||||||
|
const matches = await ext.search({
|
||||||
|
query: query,
|
||||||
|
media: {
|
||||||
|
romajiTitle: query,
|
||||||
|
englishTitle: query,
|
||||||
|
startDate: { year: 0, month: 0, day: 0 }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (matches && matches.length > 0) {
|
||||||
|
extResults = matches.map(m => ({
|
||||||
|
id: m.id,
|
||||||
|
title: { romaji: m.title, english: m.title },
|
||||||
|
coverImage: { large: m.image || '' },
|
||||||
|
// UPDATED: Try to get score from extension if available
|
||||||
|
averageScore: m.rating || m.score || null,
|
||||||
|
format: 'MANGA',
|
||||||
|
seasonYear: null,
|
||||||
|
isExtensionResult: true
|
||||||
|
}));
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(`Extension search failed for ${name}:`, e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return { results: extResults };
|
||||||
|
});
|
||||||
|
|
||||||
|
fastify.get('/api/book/:id/chapters', async (req, reply) => {
|
||||||
|
const id = req.params.id;
|
||||||
|
|
||||||
|
// Helper to get metadata (Local or Live)
|
||||||
|
let bookData = await new Promise((resolve) => {
|
||||||
|
db.get("SELECT full_data FROM books WHERE id = ?", [id], (err, row) => {
|
||||||
|
if (err || !row) resolve(null);
|
||||||
|
else resolve(JSON.parse(row.full_data));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!bookData) {
|
||||||
|
try {
|
||||||
|
const query = `query ($id: Int) { Media(id: $id, type: MANGA) { title { romaji english } startDate { year month day } } }`;
|
||||||
|
const res = await fetch('https://graphql.anilist.co', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ query, variables: { id: parseInt(id) } })
|
||||||
|
});
|
||||||
|
const d = await res.json();
|
||||||
|
if(d.data?.Media) bookData = d.data.Media;
|
||||||
|
} catch(e) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!bookData) return { chapters: [] };
|
||||||
|
|
||||||
|
const titles = [bookData.title.english, bookData.title.romaji].filter(t => t);
|
||||||
|
const searchTitle = titles[0]; // Prefer English, fallback to Romaji
|
||||||
|
|
||||||
|
const allChapters = [];
|
||||||
|
|
||||||
|
// Create an array of promises for all matching extensions
|
||||||
|
const searchPromises = Array.from(extensions.entries())
|
||||||
|
.filter(([name, ext]) => (ext.type === 'book-board' || ext.type === 'manga-board') && ext.search && ext.findChapters)
|
||||||
|
.map(async ([name, ext]) => {
|
||||||
|
try {
|
||||||
|
console.log(`[${name}] Searching chapters for: ${searchTitle}`);
|
||||||
|
|
||||||
|
// Pass strict search options
|
||||||
|
const matches = await ext.search({
|
||||||
|
query: searchTitle,
|
||||||
|
media: {
|
||||||
|
romajiTitle: bookData.title.romaji,
|
||||||
|
englishTitle: bookData.title.english,
|
||||||
|
startDate: bookData.startDate
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (matches && matches.length > 0) {
|
||||||
|
// Use the first match to find chapters
|
||||||
|
const best = matches[0];
|
||||||
|
const chaps = await ext.findChapters(best.id);
|
||||||
|
|
||||||
|
if (chaps && chaps.length > 0) {
|
||||||
|
console.log(`[${name}] Found ${chaps.length} chapters.`);
|
||||||
|
chaps.forEach(ch => {
|
||||||
|
const num = parseFloat(ch.number);
|
||||||
|
// Add to aggregator with provider tag
|
||||||
|
allChapters.push({
|
||||||
|
id: ch.id,
|
||||||
|
number: num,
|
||||||
|
title: ch.title,
|
||||||
|
date: ch.releaseDate,
|
||||||
|
provider: name
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log(`[${name}] No matches found for book.`);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(`Failed to fetch chapters from ${name}:`, e.message);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Wait for all providers to finish (in parallel)
|
||||||
|
await Promise.all(searchPromises);
|
||||||
|
|
||||||
|
// Sort all aggregated chapters by number
|
||||||
|
const sortedChapters = allChapters.sort((a, b) => a.number - b.number);
|
||||||
|
|
||||||
|
return { chapters: sortedChapters };
|
||||||
|
});
|
||||||
|
|
||||||
|
fastify.get('/api/book/:id', async (req, reply) => {
|
||||||
|
const id = req.params.id;
|
||||||
|
|
||||||
|
// 1. Try Local DB
|
||||||
|
const bookData = await new Promise((resolve) => {
|
||||||
|
db.get("SELECT full_data FROM books WHERE id = ?", [id], (err, row) => {
|
||||||
|
if(err || !row) resolve(null);
|
||||||
|
else resolve(JSON.parse(row.full_data));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
if (bookData) return bookData;
|
||||||
|
|
||||||
|
// 2. Live Fallback (If not in DB)
|
||||||
|
try {
|
||||||
|
console.log(`[Book] Local miss for ID ${id}, fetching live...`);
|
||||||
|
const query = `
|
||||||
|
query ($id: Int) {
|
||||||
|
Media(id: $id, type: MANGA) {
|
||||||
|
id idMal title { romaji english native userPreferred } type format status description
|
||||||
|
startDate { year month day } endDate { year month day } season seasonYear seasonInt
|
||||||
|
episodes duration chapters volumes countryOfOrigin isLicensed source hashtag
|
||||||
|
trailer { id site thumbnail } updatedAt coverImage { extraLarge large medium color }
|
||||||
|
bannerImage genres synonyms averageScore meanScore popularity isLocked trending favourites
|
||||||
|
tags { id name description category rank isGeneralSpoiler isMediaSpoiler isAdult userId }
|
||||||
|
relations { edges { relationType node { id title { romaji } } } }
|
||||||
|
characters(page: 1, perPage: 10) { nodes { id name { full } } }
|
||||||
|
studios { nodes { id name isAnimationStudio } }
|
||||||
|
isAdult nextAiringEpisode { airingAt timeUntilAiring episode }
|
||||||
|
externalLinks { url site }
|
||||||
|
rankings { id rank type format year season allTime context }
|
||||||
|
}
|
||||||
|
}`;
|
||||||
|
|
||||||
|
// CRITICAL FIX: Ensure ID is parsed as Integer for AniList GraphQL
|
||||||
|
const response = await fetch('https://graphql.anilist.co', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
|
||||||
|
body: JSON.stringify({ query, variables: { id: parseInt(id) } })
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
if (data.data && data.data.Media) {
|
||||||
|
return data.data.Media;
|
||||||
|
}
|
||||||
|
return { error: "Book not found on AniList" };
|
||||||
|
} catch(e) {
|
||||||
|
fastify.log.error(e);
|
||||||
|
return { error: "Fetch error" };
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
fastify.get('/book/:id', (req, reply) => {
|
||||||
|
const stream = fs.createReadStream(path.join(__dirname, 'views', 'book.html'));
|
||||||
|
reply.type('text/html').send(stream);
|
||||||
|
});
|
||||||
|
|
||||||
|
fastify.get('/api/search/local', (req, reply) => {
|
||||||
|
const query = req.query.q;
|
||||||
|
if (!query || query.length < 2) return { results: [] };
|
||||||
|
// Increased limit to 50 here as well for consistency
|
||||||
|
const sql = `SELECT full_data FROM anime WHERE full_data LIKE ? LIMIT 50`;
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
db.all(sql, [`%${query}%`], (err, rows) => {
|
||||||
|
if (err) resolve({ results: [] });
|
||||||
|
else {
|
||||||
|
try {
|
||||||
|
const results = rows.map(row => JSON.parse(row.full_data));
|
||||||
|
const cleanResults = results.filter(anime => {
|
||||||
|
const q = query.toLowerCase();
|
||||||
|
const titles = [
|
||||||
|
anime.title.english,
|
||||||
|
anime.title.romaji,
|
||||||
|
anime.title.native,
|
||||||
|
...(anime.synonyms || [])
|
||||||
|
].filter(Boolean).map(t => t.toLowerCase());
|
||||||
|
return titles.some(t => t.includes(q));
|
||||||
|
});
|
||||||
|
resolve({ results: cleanResults.slice(0, 10) });
|
||||||
|
} catch (e) {
|
||||||
|
resolve({ results: [] });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
fastify.get('/api/trending', (req, reply) => {
|
||||||
|
return new Promise((resolve) => db.all("SELECT full_data FROM trending ORDER BY rank ASC LIMIT 10", [], (err, rows) => resolve({ results: rows ? rows.map(r => JSON.parse(r.full_data)) : [] })));
|
||||||
|
});
|
||||||
|
|
||||||
|
fastify.get('/api/top-airing', (req, reply) => {
|
||||||
|
return new Promise((resolve) => db.all("SELECT full_data FROM top_airing ORDER BY rank ASC LIMIT 10", [], (err, rows) => resolve({ results: rows ? rows.map(r => JSON.parse(r.full_data)) : [] })));
|
||||||
|
});
|
||||||
|
|
||||||
|
const start = async () => {
|
||||||
|
try {
|
||||||
|
await fastify.listen({ port: 3000, host: '0.0.0.0' });
|
||||||
|
console.log(`Server running at http://localhost:3000`);
|
||||||
|
animeMetadata();
|
||||||
|
} catch (err) {
|
||||||
|
fastify.log.error(err);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
start();
|
||||||
360
src/metadata/anilist.js
Normal file
360
src/metadata/anilist.js
Normal file
@@ -0,0 +1,360 @@
|
|||||||
|
const sqlite3 = require('sqlite3').verbose();
|
||||||
|
const path = require('path');
|
||||||
|
const fs = require('fs');
|
||||||
|
|
||||||
|
// --- CONFIGURATION ---
|
||||||
|
const DB_PATH = path.join(__dirname, 'anilist_anime.db');
|
||||||
|
const REQUESTS_PER_MINUTE = 20; // 20 RPM is safe (AniList limit is 90)
|
||||||
|
const DELAY_MS = (60000 / REQUESTS_PER_MINUTE);
|
||||||
|
const FEATURED_REFRESH_RATE = 8 * 60 * 1000; // 8 Minutes
|
||||||
|
|
||||||
|
// Ensure directory exists
|
||||||
|
const dir = path.dirname(DB_PATH);
|
||||||
|
if (!fs.existsSync(dir)) {
|
||||||
|
fs.mkdirSync(dir, { recursive: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
const db = new sqlite3.Database(DB_PATH);
|
||||||
|
|
||||||
|
// --- DATABASE SETUP ---
|
||||||
|
function initDB() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.serialize(() => {
|
||||||
|
// 1. Anime Tables
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS anime (id INTEGER PRIMARY KEY, title TEXT, updatedAt INTEGER, full_data JSON)`);
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS trending (rank INTEGER PRIMARY KEY, id INTEGER, full_data JSON)`);
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS top_airing (rank INTEGER PRIMARY KEY, id INTEGER, full_data JSON)`);
|
||||||
|
|
||||||
|
// 2. Books Tables (Manga/LN)
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS books (id INTEGER PRIMARY KEY, title TEXT, updatedAt INTEGER, full_data JSON)`);
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS trending_books (rank INTEGER PRIMARY KEY, id INTEGER, full_data JSON)`);
|
||||||
|
db.run(`CREATE TABLE IF NOT EXISTS popular_books (rank INTEGER PRIMARY KEY, id INTEGER, full_data JSON)`, (err) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- QUERIES ---
|
||||||
|
|
||||||
|
// Exhaustive list of fields
|
||||||
|
const MEDIA_FIELDS = `
|
||||||
|
id
|
||||||
|
idMal
|
||||||
|
title { romaji english native userPreferred }
|
||||||
|
type
|
||||||
|
format
|
||||||
|
status
|
||||||
|
description
|
||||||
|
startDate { year month day }
|
||||||
|
endDate { year month day }
|
||||||
|
season
|
||||||
|
seasonYear
|
||||||
|
seasonInt
|
||||||
|
episodes
|
||||||
|
duration
|
||||||
|
chapters
|
||||||
|
volumes
|
||||||
|
countryOfOrigin
|
||||||
|
isLicensed
|
||||||
|
source
|
||||||
|
hashtag
|
||||||
|
trailer { id site thumbnail }
|
||||||
|
updatedAt
|
||||||
|
coverImage { extraLarge large medium color }
|
||||||
|
bannerImage
|
||||||
|
genres
|
||||||
|
synonyms
|
||||||
|
averageScore
|
||||||
|
meanScore
|
||||||
|
popularity
|
||||||
|
isLocked
|
||||||
|
trending
|
||||||
|
favourites
|
||||||
|
isAdult
|
||||||
|
siteUrl
|
||||||
|
autoCreateForumThread
|
||||||
|
isRecommendationBlocked
|
||||||
|
isReviewBlocked
|
||||||
|
modNotes
|
||||||
|
|
||||||
|
tags {
|
||||||
|
id name description category rank isGeneralSpoiler isMediaSpoiler isAdult userId
|
||||||
|
}
|
||||||
|
|
||||||
|
relations {
|
||||||
|
edges {
|
||||||
|
relationType
|
||||||
|
node { id title { romaji } type format status }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
characters(page: 1, perPage: 25, sort: [ROLE, RELEVANCE]) {
|
||||||
|
edges {
|
||||||
|
role
|
||||||
|
name
|
||||||
|
voiceActors(language: JAPANESE, sort: [RELEVANCE, ID]) { id name { full } }
|
||||||
|
node { id name { full } image { large } }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
staff(page: 1, perPage: 10, sort: [RELEVANCE, ID]) {
|
||||||
|
edges {
|
||||||
|
role
|
||||||
|
node { id name { full } image { large } }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
studios {
|
||||||
|
edges {
|
||||||
|
isMain
|
||||||
|
node { id name isAnimationStudio }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nextAiringEpisode { airingAt timeUntilAiring episode }
|
||||||
|
|
||||||
|
airingSchedule(notYetAired: true, perPage: 1) {
|
||||||
|
nodes { airingAt timeUntilAiring episode }
|
||||||
|
}
|
||||||
|
|
||||||
|
externalLinks {
|
||||||
|
id url site type language color icon notes
|
||||||
|
}
|
||||||
|
|
||||||
|
streamingEpisodes {
|
||||||
|
title thumbnail url site
|
||||||
|
}
|
||||||
|
|
||||||
|
rankings {
|
||||||
|
id rank type format year season allTime context
|
||||||
|
}
|
||||||
|
|
||||||
|
stats {
|
||||||
|
scoreDistribution { score amount }
|
||||||
|
statusDistribution { status amount }
|
||||||
|
}
|
||||||
|
|
||||||
|
recommendations(perPage: 7, sort: RATING_DESC) {
|
||||||
|
nodes {
|
||||||
|
mediaRecommendation {
|
||||||
|
id
|
||||||
|
title { romaji }
|
||||||
|
coverImage { medium }
|
||||||
|
format
|
||||||
|
type
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const BULK_QUERY = `
|
||||||
|
query ($page: Int, $type: MediaType) {
|
||||||
|
Page(page: $page, perPage: 50) {
|
||||||
|
pageInfo { total currentPage lastPage hasNextPage }
|
||||||
|
media(type: $type, sort: ID) {
|
||||||
|
${MEDIA_FIELDS}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const FEATURED_QUERY = `
|
||||||
|
query ($sort: [MediaSort], $type: MediaType, $status: MediaStatus) {
|
||||||
|
Page(page: 1, perPage: 20) {
|
||||||
|
media(type: $type, sort: $sort, status: $status, isAdult: false) {
|
||||||
|
${MEDIA_FIELDS}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
// --- NETWORK HELPERS ---
|
||||||
|
async function sleep(ms) {
|
||||||
|
return new Promise(resolve => setTimeout(resolve, ms));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchGraphQL(query, variables) {
|
||||||
|
try {
|
||||||
|
const response = await fetch('https://graphql.anilist.co', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
|
||||||
|
body: JSON.stringify({ query, variables })
|
||||||
|
});
|
||||||
|
|
||||||
|
const remaining = response.headers.get('X-RateLimit-Remaining');
|
||||||
|
const resetTime = response.headers.get('X-RateLimit-Reset');
|
||||||
|
|
||||||
|
if (remaining && parseInt(remaining) < 10) {
|
||||||
|
const now = Math.floor(Date.now() / 1000);
|
||||||
|
const waitSeconds = resetTime ? (parseInt(resetTime) - now) + 2 : 60;
|
||||||
|
console.warn(`⚠️ Rate Limit Approaching! Sleeping for ${waitSeconds} seconds...`);
|
||||||
|
await sleep(waitSeconds * 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
if (response.status === 429) {
|
||||||
|
console.log("Hit absolute rate limit. Sleeping 1 minute...");
|
||||||
|
await sleep(60000);
|
||||||
|
return fetchGraphQL(query, variables);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const json = await response.json();
|
||||||
|
return json.data ? json.data.Page : null;
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Fetch Error:", error.message);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- FUNCTIONS ---
|
||||||
|
|
||||||
|
function saveMediaBatch(tableName, mediaList) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const stmt = db.prepare(`
|
||||||
|
INSERT INTO ${tableName} (id, title, updatedAt, full_data)
|
||||||
|
VALUES (?, ?, ?, ?)
|
||||||
|
ON CONFLICT(id) DO UPDATE SET
|
||||||
|
title=excluded.title, updatedAt=excluded.updatedAt, full_data=excluded.full_data
|
||||||
|
WHERE updatedAt < excluded.updatedAt OR title != excluded.title
|
||||||
|
`);
|
||||||
|
|
||||||
|
db.serialize(() => {
|
||||||
|
db.run("BEGIN TRANSACTION");
|
||||||
|
mediaList.forEach(media => {
|
||||||
|
const title = media.title.english || media.title.romaji || "Unknown";
|
||||||
|
stmt.run(media.id, title, media.updatedAt, JSON.stringify(media));
|
||||||
|
});
|
||||||
|
db.run("COMMIT", (err) => {
|
||||||
|
stmt.finalize();
|
||||||
|
if (err) reject(err); else resolve(mediaList.length);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateFeaturedTable(tableName, mediaList) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
db.serialize(() => {
|
||||||
|
db.run(`DELETE FROM ${tableName}`);
|
||||||
|
const stmt = db.prepare(`INSERT INTO ${tableName} (rank, id, full_data) VALUES (?, ?, ?)`);
|
||||||
|
|
||||||
|
db.run("BEGIN TRANSACTION");
|
||||||
|
mediaList.forEach((media, index) => {
|
||||||
|
stmt.run(index + 1, media.id, JSON.stringify(media));
|
||||||
|
});
|
||||||
|
db.run("COMMIT", (err) => {
|
||||||
|
stmt.finalize();
|
||||||
|
if (err) reject(err); else resolve();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getLocalCount(tableName) {
|
||||||
|
return new Promise((resolve) => db.get(`SELECT COUNT(*) as count FROM ${tableName}`, (err, row) => resolve(row ? row.count : 0)));
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- LOOPS ---
|
||||||
|
|
||||||
|
async function startFeaturedLoop() {
|
||||||
|
console.log(`✨ Starting Featured Content Loop (Refreshes every ${FEATURED_REFRESH_RATE / 60000} mins)`);
|
||||||
|
|
||||||
|
const runUpdate = async () => {
|
||||||
|
console.log("🔄 Refreshing Featured tables (Anime & Books)...");
|
||||||
|
|
||||||
|
// 1. Anime Trending
|
||||||
|
const animeTrending = await fetchGraphQL(FEATURED_QUERY, { sort: "TRENDING_DESC", type: "ANIME" });
|
||||||
|
if (animeTrending && animeTrending.media) {
|
||||||
|
await updateFeaturedTable('trending', animeTrending.media);
|
||||||
|
console.log(` ✅ Updated Anime Trending.`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Anime Top Airing
|
||||||
|
const animeTop = await fetchGraphQL(FEATURED_QUERY, { sort: "SCORE_DESC", type: "ANIME", status: "RELEASING" });
|
||||||
|
if (animeTop && animeTop.media) {
|
||||||
|
await updateFeaturedTable('top_airing', animeTop.media);
|
||||||
|
console.log(` ✅ Updated Anime Top Airing.`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. Books Trending
|
||||||
|
const mangaTrending = await fetchGraphQL(FEATURED_QUERY, { sort: "TRENDING_DESC", type: "MANGA" });
|
||||||
|
if (mangaTrending && mangaTrending.media) {
|
||||||
|
await updateFeaturedTable('trending_books', mangaTrending.media);
|
||||||
|
console.log(` ✅ Updated Books Trending.`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 4. Books Popular
|
||||||
|
const mangaPop = await fetchGraphQL(FEATURED_QUERY, { sort: "POPULARITY_DESC", type: "MANGA" });
|
||||||
|
if (mangaPop && mangaPop.media) {
|
||||||
|
await updateFeaturedTable('popular_books', mangaPop.media);
|
||||||
|
console.log(` ✅ Updated Books Popular.`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
await runUpdate();
|
||||||
|
setInterval(runUpdate, FEATURED_REFRESH_RATE);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function startScraper(type, tableName) {
|
||||||
|
let page = 1;
|
||||||
|
let isCaughtUp = false;
|
||||||
|
|
||||||
|
console.log(`🚀 Starting ${type} Scraper (Table: ${tableName})...`);
|
||||||
|
|
||||||
|
while (true) {
|
||||||
|
if (isCaughtUp) {
|
||||||
|
console.log(`💤 ${type} DB caught up. Sleeping 10 mins...`);
|
||||||
|
await sleep(10 * 60 * 1000);
|
||||||
|
console.log(`⏰ Waking up ${type} scraper...`);
|
||||||
|
page = 1;
|
||||||
|
isCaughtUp = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await fetchGraphQL(BULK_QUERY, { page: page, type: type });
|
||||||
|
|
||||||
|
if (!data || !data.media || data.media.length === 0) {
|
||||||
|
if (data && data.pageInfo && !data.pageInfo.hasNextPage) {
|
||||||
|
console.log(`\n🎉 ${type} Scraper reached the end!`);
|
||||||
|
isCaughtUp = true;
|
||||||
|
} else {
|
||||||
|
await sleep(5000);
|
||||||
|
}
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
await saveMediaBatch(tableName, data.media);
|
||||||
|
const totalInDb = await getLocalCount(tableName);
|
||||||
|
const percent = data.pageInfo.total ? ((page * 50 / data.pageInfo.total) * 100).toFixed(2) : "??";
|
||||||
|
|
||||||
|
process.stdout.write(`\r📥 ${type}: Page ${data.pageInfo.currentPage} | DB Total: ${totalInDb} | ~${percent}%`);
|
||||||
|
|
||||||
|
if (data.pageInfo.hasNextPage) {
|
||||||
|
page++;
|
||||||
|
await sleep(DELAY_MS);
|
||||||
|
} else {
|
||||||
|
console.log(`\n🎉 ${type} Scraper reached the end!`);
|
||||||
|
isCaughtUp = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- MAIN ENTRY ---
|
||||||
|
async function animeMetadata() {
|
||||||
|
await initDB();
|
||||||
|
|
||||||
|
// Start loops
|
||||||
|
startFeaturedLoop();
|
||||||
|
startScraper('ANIME', 'anime');
|
||||||
|
startScraper('MANGA', 'books');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (require.main === module) {
|
||||||
|
animeMetadata();
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = { animeMetadata };
|
||||||
BIN
src/metadata/anilist_anime.db
Normal file
BIN
src/metadata/anilist_anime.db
Normal file
Binary file not shown.
485
views/anime.html
Normal file
485
views/anime.html
Normal file
@@ -0,0 +1,485 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>StreamFlow</title>
|
||||||
|
<link rel="stylesheet" href="./styles/anime.css">
|
||||||
|
<style>
|
||||||
|
/* --- MODAL STYLES --- */
|
||||||
|
.modal-overlay {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.85);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
z-index: 2000;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
.modal-overlay.active {
|
||||||
|
display: flex;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.modal-content {
|
||||||
|
background: #18181b;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 24px;
|
||||||
|
padding: 2.5rem;
|
||||||
|
max-width: 650px;
|
||||||
|
width: 90%;
|
||||||
|
max-height: 80vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||||
|
transform: scale(0.95);
|
||||||
|
transition: transform 0.3s;
|
||||||
|
}
|
||||||
|
.modal-overlay.active .modal-content {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
.modal-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 1.5rem;
|
||||||
|
right: 1.5rem;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
.modal-close:hover { background: rgba(255, 255, 255, 0.2); }
|
||||||
|
.modal-text {
|
||||||
|
line-height: 1.8;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: #e4e4e7;
|
||||||
|
}
|
||||||
|
.modal-title { margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; }
|
||||||
|
|
||||||
|
.read-more-btn {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: #8b5cf6;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
.read-more-btn:hover { text-decoration: underline; }
|
||||||
|
|
||||||
|
/* --- EPISODE TOOLBAR --- */
|
||||||
|
.episodes-header-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
.episodes-header-row h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
border-left: 4px solid #8b5cf6;
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
.episode-search-wrapper {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.episode-search-input {
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 99px;
|
||||||
|
padding: 0.6rem 1rem;
|
||||||
|
color: white;
|
||||||
|
width: 140px;
|
||||||
|
text-align: center;
|
||||||
|
font-family: inherit;
|
||||||
|
transition: 0.2s;
|
||||||
|
-moz-appearance: textfield; /* Firefox spinner hide */
|
||||||
|
}
|
||||||
|
.episode-search-input:focus {
|
||||||
|
border-color: #8b5cf6;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
/* Hide number spinners for Webkit/Chrome */
|
||||||
|
.episode-search-input::-webkit-outer-spin-button,
|
||||||
|
.episode-search-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
||||||
|
|
||||||
|
/* --- PAGINATION --- */
|
||||||
|
.pagination-controls {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding-top: 1rem;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
.page-btn {
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
color: white;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.2s;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.page-btn:hover:not(:disabled) {
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
border-color: #8b5cf6;
|
||||||
|
}
|
||||||
|
.page-btn:disabled {
|
||||||
|
opacity: 0.4;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
.page-info {
|
||||||
|
color: #a1a1aa;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Description Modal -->
|
||||||
|
<div class="modal-overlay" id="desc-modal">
|
||||||
|
<div class="modal-content">
|
||||||
|
<button class="modal-close" onclick="closeModal()">✕</button>
|
||||||
|
<h2 class="modal-title">Synopsis</h2>
|
||||||
|
<div class="modal-text" id="full-description"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Back Button -->
|
||||||
|
<a href="/" class="back-btn">
|
||||||
|
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
|
||||||
|
Back to Home
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Video Hero (Trailer on Loop) -->
|
||||||
|
<div class="hero-wrapper">
|
||||||
|
<div class="video-background">
|
||||||
|
<div id="player"></div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-overlay"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div class="content-container">
|
||||||
|
|
||||||
|
<!-- Left Sidebar (Info) -->
|
||||||
|
<aside class="sidebar">
|
||||||
|
<div class="poster-card">
|
||||||
|
<img id="poster" src="" alt="">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-grid">
|
||||||
|
<div class="info-item">
|
||||||
|
<h4>Format</h4>
|
||||||
|
<span id="format">--</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<h4>Episodes</h4>
|
||||||
|
<span id="episodes">--</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<h4>Status</h4>
|
||||||
|
<span id="status">--</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<h4>Season</h4>
|
||||||
|
<span id="season">--</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<h4>Studio</h4>
|
||||||
|
<span id="studio">--</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-grid">
|
||||||
|
<div class="info-item">
|
||||||
|
<h4>Main Characters</h4>
|
||||||
|
<div class="character-list" id="char-list">
|
||||||
|
<!-- Populated via JS -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Right Content -->
|
||||||
|
<main class="main-content">
|
||||||
|
<div class="anime-header">
|
||||||
|
<h1 class="anime-title" id="title">Loading...</h1>
|
||||||
|
|
||||||
|
<div class="meta-row">
|
||||||
|
<div class="pill score" id="score">--% Score</div>
|
||||||
|
<div class="pill" id="year">----</div>
|
||||||
|
<div class="pill" id="genres">Action</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="action-row">
|
||||||
|
<button class="btn-watch" id="watch-btn">
|
||||||
|
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||||||
|
Start Watching
|
||||||
|
</button>
|
||||||
|
<button class="btn-secondary">+ Add to List</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Description Box -->
|
||||||
|
<div class="description-box">
|
||||||
|
<div id="description-preview"></div>
|
||||||
|
<button id="read-more-btn" class="read-more-btn" style="display: none;" onclick="openModal()">
|
||||||
|
Read More
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="episodes-section">
|
||||||
|
<!-- Header Row with Search -->
|
||||||
|
<div class="episodes-header-row">
|
||||||
|
<div class="section-title" style="margin:0; border:none; padding:0;">
|
||||||
|
<h2 style="font-size: 1.8rem; border-left: 4px solid #8b5cf6; padding-left: 1rem;">Episodes</h2>
|
||||||
|
</div>
|
||||||
|
<div class="episode-search-wrapper">
|
||||||
|
<input type="number" id="ep-search" class="episode-search-input" placeholder="Jump to Ep #" min="1">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="episodes-grid" id="episodes-grid"></div>
|
||||||
|
|
||||||
|
<!-- Pagination Controls -->
|
||||||
|
<div class="pagination-controls" id="pagination-controls">
|
||||||
|
<button class="page-btn" id="prev-page" onclick="changePage(-1)">Previous</button>
|
||||||
|
<span class="page-info" id="page-info">Page 1 of 1</span>
|
||||||
|
<button class="page-btn" id="next-page" onclick="changePage(1)">Next</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const animeId = window.location.pathname.split('/').pop();
|
||||||
|
let player;
|
||||||
|
|
||||||
|
// Episode State
|
||||||
|
let totalEpisodes = 0;
|
||||||
|
let currentPage = 1;
|
||||||
|
const itemsPerPage = 12;
|
||||||
|
|
||||||
|
// Load YouTube API
|
||||||
|
var tag = document.createElement('script');
|
||||||
|
tag.src = "https://www.youtube.com/iframe_api";
|
||||||
|
var firstScriptTag = document.getElementsByTagName('script')[0];
|
||||||
|
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
||||||
|
|
||||||
|
async function loadAnime() {
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/anime/${animeId}`);
|
||||||
|
const data = await res.json();
|
||||||
|
|
||||||
|
if(data.error) {
|
||||||
|
document.getElementById('title').innerText = "Anime Not Found";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Populate Data
|
||||||
|
const title = data.title.english || data.title.romaji;
|
||||||
|
document.title = `${title} | StreamFlow`;
|
||||||
|
document.getElementById('title').innerText = title;
|
||||||
|
document.getElementById('poster').src = data.coverImage.extraLarge;
|
||||||
|
|
||||||
|
// Description Logic
|
||||||
|
const rawDesc = data.description || "No description available.";
|
||||||
|
handleDescription(rawDesc);
|
||||||
|
|
||||||
|
document.getElementById('score').innerText = (data.averageScore || '?') + '% Score';
|
||||||
|
document.getElementById('year').innerText = data.seasonYear || '????';
|
||||||
|
document.getElementById('genres').innerText = data.genres ? data.genres.slice(0, 3).join(' • ') : '';
|
||||||
|
|
||||||
|
document.getElementById('format').innerText = data.format || 'TV';
|
||||||
|
document.getElementById('episodes').innerText = data.episodes || '?';
|
||||||
|
document.getElementById('status').innerText = data.status || 'Unknown';
|
||||||
|
document.getElementById('season').innerText = `${data.season || ''} ${data.seasonYear || ''}`;
|
||||||
|
|
||||||
|
if (data.studios && data.studios.nodes.length > 0) {
|
||||||
|
document.getElementById('studio').innerText = data.studios.nodes[0].name;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.characters && data.characters.nodes) {
|
||||||
|
const charContainer = document.getElementById('char-list');
|
||||||
|
data.characters.nodes.slice(0, 5).forEach(char => {
|
||||||
|
charContainer.innerHTML += `
|
||||||
|
<div class="character-item">
|
||||||
|
<div class="char-dot"></div> ${char.name.full}
|
||||||
|
</div>`;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Watch Button
|
||||||
|
document.getElementById('watch-btn').onclick = () => {
|
||||||
|
window.location.href = `/watch/${animeId}/1`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Setup Trailer
|
||||||
|
if (data.trailer && data.trailer.site === 'youtube') {
|
||||||
|
window.onYouTubeIframeAPIReady = function() {
|
||||||
|
player = new YT.Player('player', {
|
||||||
|
height: '100%',
|
||||||
|
width: '100%',
|
||||||
|
videoId: data.trailer.id,
|
||||||
|
playerVars: {
|
||||||
|
'autoplay': 1, 'controls': 0, 'mute': 1,
|
||||||
|
'loop': 1, 'playlist': data.trailer.id,
|
||||||
|
'showinfo': 0, 'modestbranding': 1, 'disablekb': 1
|
||||||
|
},
|
||||||
|
events: { 'onReady': (e) => e.target.playVideo() }
|
||||||
|
});
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
const banner = data.bannerImage || data.coverImage.extraLarge;
|
||||||
|
document.querySelector('.video-background').innerHTML = `<img src="${banner}" style="width:100%; height:100%; object-fit:cover;">`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- MODIFIED EPISODE LOGIC ---
|
||||||
|
// Prioritize "nextAiringEpisode" to determine actual released count.
|
||||||
|
// If nextAiringEpisode exists (e.g. ep 4), then 3 are out.
|
||||||
|
// If it doesn't exist, we assume the show is finished or has no airing data, so use total.
|
||||||
|
|
||||||
|
if (data.nextAiringEpisode) {
|
||||||
|
// Show is currently Airing: use (Next Episode - 1)
|
||||||
|
totalEpisodes = data.nextAiringEpisode.episode - 1;
|
||||||
|
} else {
|
||||||
|
// Show is Finished or data unavailable: use Total Episodes
|
||||||
|
totalEpisodes = data.episodes || 12; // fallback
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clamp safe range
|
||||||
|
totalEpisodes = Math.min(Math.max(totalEpisodes, 1), 5000);
|
||||||
|
|
||||||
|
renderEpisodes();
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- DESCRIPTION MODAL LOGIC ---
|
||||||
|
function handleDescription(text) {
|
||||||
|
// Strip HTML tags for sentence counting (rough approximation)
|
||||||
|
const tmp = document.createElement("DIV");
|
||||||
|
tmp.innerHTML = text;
|
||||||
|
const cleanText = tmp.textContent || tmp.innerText || "";
|
||||||
|
|
||||||
|
// Split by punctuation to count sentences
|
||||||
|
const sentences = cleanText.match(/[^\.!\?]+[\.!\?]+/g) || [cleanText];
|
||||||
|
|
||||||
|
// Full description in modal
|
||||||
|
document.getElementById('full-description').innerHTML = text; // Keep HTML for modal
|
||||||
|
|
||||||
|
if (sentences.length > 4) {
|
||||||
|
// Truncate
|
||||||
|
const shortText = sentences.slice(0, 4).join(' ');
|
||||||
|
document.getElementById('description-preview').innerText = shortText + '...';
|
||||||
|
document.getElementById('read-more-btn').style.display = 'inline-flex';
|
||||||
|
} else {
|
||||||
|
document.getElementById('description-preview').innerHTML = text;
|
||||||
|
document.getElementById('read-more-btn').style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function openModal() {
|
||||||
|
document.getElementById('desc-modal').classList.add('active');
|
||||||
|
document.body.style.overflow = 'hidden'; // Prevent scrolling bg
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeModal() {
|
||||||
|
document.getElementById('desc-modal').classList.remove('active');
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close modal on outside click
|
||||||
|
document.getElementById('desc-modal').addEventListener('click', (e) => {
|
||||||
|
if (e.target.id === 'desc-modal') closeModal();
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- EPISODE LOGIC ---
|
||||||
|
|
||||||
|
function renderEpisodes() {
|
||||||
|
const grid = document.getElementById('episodes-grid');
|
||||||
|
grid.innerHTML = '';
|
||||||
|
|
||||||
|
const start = (currentPage - 1) * itemsPerPage + 1;
|
||||||
|
const end = Math.min(start + itemsPerPage - 1, totalEpisodes);
|
||||||
|
|
||||||
|
for(let i = start; i <= end; i++) {
|
||||||
|
createEpisodeButton(i, grid);
|
||||||
|
}
|
||||||
|
updatePaginationControls();
|
||||||
|
}
|
||||||
|
|
||||||
|
function createEpisodeButton(num, container) {
|
||||||
|
const btn = document.createElement('div');
|
||||||
|
btn.className = 'episode-btn';
|
||||||
|
btn.innerText = `Ep ${num}`;
|
||||||
|
btn.onclick = () => window.location.href = `/watch/${animeId}/${num}`;
|
||||||
|
container.appendChild(btn);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updatePaginationControls() {
|
||||||
|
const totalPages = Math.ceil(totalEpisodes / itemsPerPage);
|
||||||
|
document.getElementById('page-info').innerText = `Page ${currentPage} of ${totalPages}`;
|
||||||
|
document.getElementById('prev-page').disabled = currentPage === 1;
|
||||||
|
document.getElementById('next-page').disabled = currentPage === totalPages;
|
||||||
|
|
||||||
|
// Show pagination only if searching is not active (search clears pagination view)
|
||||||
|
document.getElementById('pagination-controls').style.display = 'flex';
|
||||||
|
}
|
||||||
|
|
||||||
|
function changePage(delta) {
|
||||||
|
currentPage += delta;
|
||||||
|
renderEpisodes();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Search Logic
|
||||||
|
const searchInput = document.getElementById('ep-search');
|
||||||
|
searchInput.addEventListener('input', (e) => {
|
||||||
|
const val = parseInt(e.target.value);
|
||||||
|
const grid = document.getElementById('episodes-grid');
|
||||||
|
|
||||||
|
if (val > 0 && val <= totalEpisodes) {
|
||||||
|
// Show specific result
|
||||||
|
grid.innerHTML = '';
|
||||||
|
createEpisodeButton(val, grid);
|
||||||
|
document.getElementById('pagination-controls').style.display = 'none';
|
||||||
|
} else if (!e.target.value) {
|
||||||
|
// Restore pagination if empty
|
||||||
|
renderEpisodes();
|
||||||
|
} else {
|
||||||
|
// Invalid input (out of range)
|
||||||
|
grid.innerHTML = '<div style="color:#666; width:100%; text-align:center;">Episode not found</div>';
|
||||||
|
document.getElementById('pagination-controls').style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
loadAnime();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
114
views/book.html
Normal file
114
views/book.html
Normal file
@@ -0,0 +1,114 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<base href="/">
|
||||||
|
<title>StreamFlow Book</title>
|
||||||
|
<link rel="stylesheet" href="../public/book.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Back Button -->
|
||||||
|
<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>
|
||||||
|
Back to Books
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<div class="hero-wrapper">
|
||||||
|
<div class="hero-background">
|
||||||
|
<img id="hero-bg" src="" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="hero-overlay"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-container">
|
||||||
|
|
||||||
|
<!-- Left Sidebar -->
|
||||||
|
<aside class="sidebar">
|
||||||
|
<div class="poster-card">
|
||||||
|
<img id="poster" src="" alt="">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-grid">
|
||||||
|
<div class="info-item">
|
||||||
|
<h4>Format</h4>
|
||||||
|
<span id="format">--</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<h4>Chapters</h4>
|
||||||
|
<span id="chapters">--</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<h4>Status</h4>
|
||||||
|
<span id="status">--</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<h4>Published</h4>
|
||||||
|
<!-- Updated ID to avoid CSS conflict -->
|
||||||
|
<span id="published-date">--</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Right Content -->
|
||||||
|
<main class="main-content">
|
||||||
|
<div class="book-header">
|
||||||
|
<h1 class="book-title" id="title">Loading...</h1>
|
||||||
|
|
||||||
|
<div class="meta-row">
|
||||||
|
<div class="pill score" id="score">--% Score</div>
|
||||||
|
<div class="pill" id="genres">Action</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="action-row">
|
||||||
|
<button class="btn-primary" id="read-start-btn">
|
||||||
|
Start Reading
|
||||||
|
</button>
|
||||||
|
<button class="btn-secondary">+ Add to Library</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chapters-section">
|
||||||
|
<div class="section-title">
|
||||||
|
<h2>Chapters</h2>
|
||||||
|
<div class="chapter-controls">
|
||||||
|
<!-- New Provider Filter Dropdown -->
|
||||||
|
<select id="provider-filter" class="filter-select" style="display: none; margin-left: 15px;">
|
||||||
|
<option value="all">All Providers</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chapters-table-wrapper">
|
||||||
|
<table class="chapters-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>#</th>
|
||||||
|
<th>Title</th>
|
||||||
|
<!-- Date Column Removed -->
|
||||||
|
<th>Provider</th>
|
||||||
|
<th>Action</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="chapters-body">
|
||||||
|
<!-- Populated via JS -->
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pagination -->
|
||||||
|
<div class="pagination-controls" id="pagination" style="display:none;">
|
||||||
|
<button class="page-btn" id="prev-page">Previous</button>
|
||||||
|
<span class="page-info" id="page-info">Page 1</span>
|
||||||
|
<button class="page-btn" id="next-page">Next</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../public/book.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
82
views/books.html
Normal file
82
views/books.html
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>StreamFlow Books</title>
|
||||||
|
<link rel="stylesheet" href="../public/books.css">
|
||||||
|
<script src="../public/books.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav class="navbar" id="navbar">
|
||||||
|
<a href="/" class="nav-brand">
|
||||||
|
<div class="brand-icon">SF</div>
|
||||||
|
StreamFlow
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="nav-center">
|
||||||
|
<button class="nav-button" onclick="window.location.href='/'">Anime</button>
|
||||||
|
<button class="nav-button active">Books</button>
|
||||||
|
<button class="nav-button">Gallery</button>
|
||||||
|
<button class="nav-button">Schedule</button>
|
||||||
|
<button class="nav-button">My List</button>
|
||||||
|
<button class="nav-button">Marketplace</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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 manga..." autocomplete="off">
|
||||||
|
<div class="search-results" id="search-results"></div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- HERO -->
|
||||||
|
<div class="hero-wrapper">
|
||||||
|
<div class="hero-background">
|
||||||
|
<img id="hero-bg-media" src="" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="hero-vignette"></div>
|
||||||
|
|
||||||
|
<div class="hero-content">
|
||||||
|
<div class="hero-poster-card">
|
||||||
|
<img id="hero-poster" src="" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="hero-text">
|
||||||
|
<h1 class="hero-title" id="hero-title">Loading...</h1>
|
||||||
|
<div class="hero-meta">
|
||||||
|
<span class="score-badge" id="hero-score"></span>
|
||||||
|
<span id="hero-year"></span>
|
||||||
|
<span id="hero-type"></span>
|
||||||
|
</div>
|
||||||
|
<p class="hero-desc" id="hero-desc"></p>
|
||||||
|
<div class="hero-buttons">
|
||||||
|
<button class="btn-primary" id="read-btn">Read Now</button>
|
||||||
|
<button class="btn-blur">+ Add to Library</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="section">
|
||||||
|
<div class="section-header"><div class="section-title">Trending Books</div></div>
|
||||||
|
<div class="carousel-wrapper">
|
||||||
|
<button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button>
|
||||||
|
<div class="carousel" id="trending"></div>
|
||||||
|
<button class="scroll-btn right" onclick="scrollCarousel('trending', 1)">›</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="section-header"><div class="section-title">All Time Popular</div></div>
|
||||||
|
<div class="carousel-wrapper">
|
||||||
|
<button class="scroll-btn left" onclick="scrollCarousel('popular', -1)">‹</button>
|
||||||
|
<div class="carousel" id="popular"></div>
|
||||||
|
<button class="scroll-btn right" onclick="scrollCarousel('popular', 1)">›</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
322
views/index.html
Normal file
322
views/index.html
Normal file
@@ -0,0 +1,322 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>StreamFlow</title>
|
||||||
|
<link rel="stylesheet" href="../public/home.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav class="navbar" id="navbar">
|
||||||
|
<div class="nav-brand">
|
||||||
|
<div class="brand-icon">SF</div>
|
||||||
|
StreamFlow
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nav-center">
|
||||||
|
<button class="nav-button active" onclick="window.location.href='/'">Anime</button>
|
||||||
|
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
|
||||||
|
<button class="nav-button" onclick="window.location.href='/art'">Gallery</button>
|
||||||
|
<button class="nav-button">Schedule</button>
|
||||||
|
<button class="nav-button">My List</button>
|
||||||
|
<button class="nav-button">Marketplace</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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">
|
||||||
|
<!-- Search Results Dropdown -->
|
||||||
|
<div class="search-results" id="search-results"></div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- HERO -->
|
||||||
|
<div class="hero-wrapper">
|
||||||
|
<div class="hero-background">
|
||||||
|
<img id="hero-bg-media" src="" alt="">
|
||||||
|
<div id="player" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120vw; height: 120vh; pointer-events: none; opacity: 0; transition: opacity 1s;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-vignette"></div>
|
||||||
|
|
||||||
|
<div class="hero-content">
|
||||||
|
<div class="hero-poster-card">
|
||||||
|
<div class="skeleton poster-skeleton" id="hero-poster-skeleton"></div>
|
||||||
|
<img id="hero-poster" src="" alt="" style="display: none;" onload="this.style.display='block'; document.getElementById('hero-poster-skeleton').style.display='none'">
|
||||||
|
</div>
|
||||||
|
<div class="hero-text">
|
||||||
|
<div id="hero-loading-ui">
|
||||||
|
<div class="skeleton title-skeleton"></div>
|
||||||
|
<div class="skeleton text-skeleton" style="width: 40%"></div>
|
||||||
|
<div class="skeleton text-skeleton" style="width: 100%; height: 4em;"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="hero-real-ui" style="display: none;">
|
||||||
|
<h1 class="hero-title" id="hero-title"></h1>
|
||||||
|
<div class="hero-meta">
|
||||||
|
<span class="score-badge" id="hero-score"></span>
|
||||||
|
<span id="hero-year"></span>
|
||||||
|
<span id="hero-type"></span>
|
||||||
|
</div>
|
||||||
|
<p class="hero-desc" id="hero-desc"></p>
|
||||||
|
<div class="hero-buttons">
|
||||||
|
<button class="btn-primary" id="watch-btn">Watch Now</button>
|
||||||
|
<button class="btn-blur">+ Add to List</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<!-- Trending -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="section-header"><div class="section-title">Trending This Season</div></div>
|
||||||
|
<div class="carousel-wrapper">
|
||||||
|
<button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button>
|
||||||
|
<div class="carousel" id="trending">
|
||||||
|
<!-- Loading Skeletons -->
|
||||||
|
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||||
|
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||||
|
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||||
|
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||||
|
</div>
|
||||||
|
<button class="scroll-btn right" onclick="scrollCarousel('trending', 1)">›</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Top Airing -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="section-header"><div class="section-title">Top Airing Now</div></div>
|
||||||
|
<div class="carousel-wrapper">
|
||||||
|
<button class="scroll-btn left" onclick="scrollCarousel('top-airing', -1)">‹</button>
|
||||||
|
<div class="carousel" id="top-airing">
|
||||||
|
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||||
|
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||||
|
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||||
|
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||||
|
</div>
|
||||||
|
<button class="scroll-btn right" onclick="scrollCarousel('top-airing', 1)">›</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// --- SEARCH LOGIC ---
|
||||||
|
const searchInput = document.getElementById('search-input');
|
||||||
|
const searchResults = document.getElementById('search-results');
|
||||||
|
let searchTimeout;
|
||||||
|
|
||||||
|
searchInput.addEventListener('input', (e) => {
|
||||||
|
const query = e.target.value;
|
||||||
|
clearTimeout(searchTimeout);
|
||||||
|
if (query.length < 2) {
|
||||||
|
searchResults.classList.remove('active');
|
||||||
|
searchResults.innerHTML = '';
|
||||||
|
searchInput.style.borderRadius = '99px';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
searchTimeout = setTimeout(() => {
|
||||||
|
fetchLocalSearch(query);
|
||||||
|
}, 300);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('click', (e) => {
|
||||||
|
if (!e.target.closest('.search-wrapper')) {
|
||||||
|
searchResults.classList.remove('active');
|
||||||
|
searchInput.style.borderRadius = '99px';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
async function fetchLocalSearch(query) {
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/search/local?q=${encodeURIComponent(query)}`);
|
||||||
|
const data = await res.json();
|
||||||
|
renderSearchResults(data.results);
|
||||||
|
} catch (err) { console.error("Search Error:", err); }
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderSearchResults(results) {
|
||||||
|
searchResults.innerHTML = '';
|
||||||
|
if (results.length === 0) {
|
||||||
|
searchResults.innerHTML = '<div style="padding:1rem; color:#888; text-align:center">No results found</div>';
|
||||||
|
} else {
|
||||||
|
results.forEach(anime => {
|
||||||
|
const title = getTitle(anime);
|
||||||
|
const img = anime.coverImage.medium || anime.coverImage.large;
|
||||||
|
const rating = anime.averageScore ? `${anime.averageScore}%` : 'N/A';
|
||||||
|
const year = anime.seasonYear || '';
|
||||||
|
const format = anime.format || 'TV';
|
||||||
|
|
||||||
|
const item = document.createElement('a');
|
||||||
|
item.className = 'search-item';
|
||||||
|
item.href = `/anime/${anime.id}`; // DIRECT LINK
|
||||||
|
item.innerHTML = `
|
||||||
|
<img src="${img}" class="search-poster" alt="${title}">
|
||||||
|
<div class="search-info">
|
||||||
|
<div class="search-title">${title}</div>
|
||||||
|
<div class="search-meta">
|
||||||
|
<span class="rating-pill">${rating}</span>
|
||||||
|
<span>• ${year}</span>
|
||||||
|
<span>• ${format}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
searchResults.appendChild(item);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
searchResults.classList.add('active');
|
||||||
|
searchInput.style.borderRadius = '12px 12px 0 0';
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- CAROUSEL LOGIC ---
|
||||||
|
function scrollCarousel(id, direction) {
|
||||||
|
const container = document.getElementById(id);
|
||||||
|
if(container) {
|
||||||
|
const scrollAmount = container.clientWidth * 0.75;
|
||||||
|
container.scrollBy({ left: direction * scrollAmount, behavior: 'smooth' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- MAIN APP LOGIC ---
|
||||||
|
let trendingAnimes = [];
|
||||||
|
let currentHeroIndex = 0;
|
||||||
|
let player;
|
||||||
|
let heroInterval;
|
||||||
|
|
||||||
|
var tag = document.createElement('script');
|
||||||
|
tag.src = "https://www.youtube.com/iframe_api";
|
||||||
|
var firstScriptTag = document.getElementsByTagName('script')[0];
|
||||||
|
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
||||||
|
|
||||||
|
function onYouTubeIframeAPIReady() {
|
||||||
|
player = new YT.Player('player', {
|
||||||
|
height: '100%', width: '100%',
|
||||||
|
playerVars: { 'autoplay': 1, 'controls': 0, 'mute': 1, 'loop': 1, 'showinfo': 0, 'modestbranding': 1 },
|
||||||
|
events: { 'onReady': (e) => { e.target.mute(); if(trendingAnimes.length) updateHeroVideo(trendingAnimes[currentHeroIndex]); } }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchContent(isUpdate = false) {
|
||||||
|
try {
|
||||||
|
const trendingRes = await fetch('/api/trending');
|
||||||
|
const trendingData = await trendingRes.json();
|
||||||
|
|
||||||
|
if (trendingData.results && trendingData.results.length > 0) {
|
||||||
|
trendingAnimes = trendingData.results;
|
||||||
|
if (!isUpdate) {
|
||||||
|
updateHeroUI(trendingAnimes[0]);
|
||||||
|
startHeroCycle();
|
||||||
|
}
|
||||||
|
renderList('trending', trendingAnimes);
|
||||||
|
} else if (!isUpdate) {
|
||||||
|
setTimeout(() => fetchContent(false), 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
const topRes = await fetch('/api/top-airing');
|
||||||
|
const topData = await topRes.json();
|
||||||
|
if (topData.results && topData.results.length > 0) {
|
||||||
|
renderList('top-airing', topData.results);
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Fetch Error:", e);
|
||||||
|
if(!isUpdate) setTimeout(() => fetchContent(false), 5000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function startHeroCycle() {
|
||||||
|
if(heroInterval) clearInterval(heroInterval);
|
||||||
|
heroInterval = setInterval(() => {
|
||||||
|
if(trendingAnimes.length > 0) {
|
||||||
|
currentHeroIndex = (currentHeroIndex + 1) % trendingAnimes.length;
|
||||||
|
updateHeroUI(trendingAnimes[currentHeroIndex]);
|
||||||
|
}
|
||||||
|
}, 10000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTitle(anime) {
|
||||||
|
return anime.title.english || anime.title.romaji || "Unknown Title";
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateHeroUI(anime) {
|
||||||
|
if(!anime) return;
|
||||||
|
const title = getTitle(anime);
|
||||||
|
const score = anime.averageScore ? anime.averageScore + '% Match' : 'N/A';
|
||||||
|
const year = anime.seasonYear || '';
|
||||||
|
const type = anime.format || 'TV';
|
||||||
|
const desc = anime.description || 'No description available.';
|
||||||
|
const poster = anime.coverImage ? anime.coverImage.extraLarge : '';
|
||||||
|
const banner = anime.bannerImage || poster;
|
||||||
|
|
||||||
|
document.getElementById('hero-title').innerText = title;
|
||||||
|
document.getElementById('hero-desc').innerHTML = desc;
|
||||||
|
document.getElementById('hero-score').innerText = score;
|
||||||
|
document.getElementById('hero-year').innerText = year;
|
||||||
|
document.getElementById('hero-type').innerText = type;
|
||||||
|
document.getElementById('hero-poster').src = poster;
|
||||||
|
|
||||||
|
// Set Watch Button Link
|
||||||
|
const watchBtn = document.getElementById('watch-btn');
|
||||||
|
if(watchBtn) watchBtn.onclick = () => window.location.href = `/anime/${anime.id}`;
|
||||||
|
|
||||||
|
const bgImg = document.getElementById('hero-bg-media');
|
||||||
|
if(bgImg && bgImg.src !== banner) bgImg.src = banner;
|
||||||
|
|
||||||
|
updateHeroVideo(anime);
|
||||||
|
|
||||||
|
document.getElementById('hero-loading-ui').style.display = 'none';
|
||||||
|
document.getElementById('hero-real-ui').style.display = 'block';
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateHeroVideo(anime) {
|
||||||
|
if (!player || !player.loadVideoById) return;
|
||||||
|
const videoContainer = document.getElementById('player');
|
||||||
|
if (anime.trailer && anime.trailer.site === 'youtube' && anime.trailer.id) {
|
||||||
|
if(player.getVideoData && player.getVideoData().video_id !== anime.trailer.id) {
|
||||||
|
player.loadVideoById(anime.trailer.id);
|
||||||
|
player.mute();
|
||||||
|
}
|
||||||
|
videoContainer.style.opacity = "1";
|
||||||
|
} else {
|
||||||
|
videoContainer.style.opacity = "0";
|
||||||
|
player.stopVideo();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderList(id, list) {
|
||||||
|
const container = document.getElementById(id);
|
||||||
|
const firstId = list.length > 0 ? list[0].id : null;
|
||||||
|
const currentFirstId = container.firstElementChild?.dataset?.id;
|
||||||
|
if (currentFirstId && parseInt(currentFirstId) === firstId && container.children.length === list.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
container.innerHTML = '';
|
||||||
|
list.forEach(anime => {
|
||||||
|
const title = getTitle(anime);
|
||||||
|
const cover = anime.coverImage ? anime.coverImage.large : '';
|
||||||
|
const ep = anime.nextAiringEpisode ? 'Ep ' + anime.nextAiringEpisode.episode : (anime.episodes ? anime.episodes + ' Eps' : 'TV');
|
||||||
|
const score = anime.averageScore || '--';
|
||||||
|
|
||||||
|
const el = document.createElement('div');
|
||||||
|
el.className = 'card';
|
||||||
|
el.dataset.id = anime.id;
|
||||||
|
// CLICK GOES TO ANIME PAGE
|
||||||
|
el.onclick = () => window.location.href = `/anime/${anime.id}`;
|
||||||
|
el.innerHTML = `
|
||||||
|
<div class="card-img-wrap"><img src="${cover}" loading="lazy"></div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h3>${title}</h3>
|
||||||
|
<p>${score}% • ${ep}</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
container.appendChild(el);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchContent();
|
||||||
|
setInterval(() => fetchContent(true), 60000);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
296
views/watch.html
Normal file
296
views/watch.html
Normal file
@@ -0,0 +1,296 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<base href="/">
|
||||||
|
<title>StreamFlow Watch</title>
|
||||||
|
<link rel="stylesheet" href="../public/watch.css">
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
||||||
|
<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>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="top-bar">
|
||||||
|
<a href="#" id="back-link" class="back-btn">
|
||||||
|
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
|
||||||
|
Back to Series
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="theater-container">
|
||||||
|
|
||||||
|
<!-- Toolbar -->
|
||||||
|
<div class="player-toolbar">
|
||||||
|
<div class="sd-toggle" id="sd-toggle" data-state="sub" style="display: none;" onclick="toggleAudioMode()">
|
||||||
|
<div class="sd-bg"></div>
|
||||||
|
<div class="sd-option active" id="opt-sub">Sub</div>
|
||||||
|
<div class="sd-option" id="opt-dub">Dub</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<select id="server-select" class="extension-select" style="display:none;" onchange="loadStream()">
|
||||||
|
<!-- Populated via JS -->
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select id="extension-select" class="extension-select" onchange="onExtensionChange()">
|
||||||
|
<option value="" disabled selected>Source...</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Video Player -->
|
||||||
|
<div class="video-wrapper">
|
||||||
|
<video id="player" controls crossorigin playsinline poster=""></video>
|
||||||
|
<div id="loading-overlay" class="loading-overlay">
|
||||||
|
<div class="spinner"></div>
|
||||||
|
<span id="loading-text">Select a source...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Controls -->
|
||||||
|
<div class="controls-area">
|
||||||
|
<div class="episode-info">
|
||||||
|
<h2 id="anime-title">Loading...</h2>
|
||||||
|
<span id="episode-label">Episode --</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nav-controls">
|
||||||
|
<button class="nav-btn" id="prev-btn">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
|
||||||
|
Prev
|
||||||
|
</button>
|
||||||
|
<button class="nav-btn" id="next-btn">
|
||||||
|
Next
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const pathParts = window.location.pathname.split('/');
|
||||||
|
const animeId = pathParts[2];
|
||||||
|
const currentEpisode = parseInt(pathParts[3]);
|
||||||
|
|
||||||
|
let audioMode = 'sub';
|
||||||
|
let currentExtension = '';
|
||||||
|
let plyrInstance;
|
||||||
|
let hlsInstance;
|
||||||
|
|
||||||
|
document.getElementById('back-link').href = `/anime/${animeId}`;
|
||||||
|
document.getElementById('episode-label').innerText = `Episode ${currentEpisode}`;
|
||||||
|
|
||||||
|
async function loadMetadata() {
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/anime/${animeId}`);
|
||||||
|
const data = await res.json();
|
||||||
|
if(!data.error) {
|
||||||
|
const title = data.title.english || data.title.romaji;
|
||||||
|
document.getElementById('anime-title').innerText = title;
|
||||||
|
document.title = `Watching ${title} - Ep ${currentEpisode}`;
|
||||||
|
}
|
||||||
|
} catch(e) { console.error(e); }
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadExtensions() {
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/extensions');
|
||||||
|
const data = await res.json();
|
||||||
|
const select = document.getElementById('extension-select');
|
||||||
|
|
||||||
|
if (data.extensions && data.extensions.length > 0) {
|
||||||
|
data.extensions.forEach(extName => {
|
||||||
|
const opt = document.createElement('option');
|
||||||
|
opt.value = extName;
|
||||||
|
opt.innerText = extName;
|
||||||
|
select.appendChild(opt);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
select.innerHTML = '<option>No Extensions</option>';
|
||||||
|
select.disabled = true;
|
||||||
|
setLoading("No extensions found in WaifuBoards folder.");
|
||||||
|
}
|
||||||
|
} catch(e) { console.error("Extension Error:", e); }
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onExtensionChange() {
|
||||||
|
const select = document.getElementById('extension-select');
|
||||||
|
currentExtension = select.value;
|
||||||
|
setLoading("Fetching extension settings...");
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/extension/${currentExtension}/settings`);
|
||||||
|
const settings = await res.json();
|
||||||
|
|
||||||
|
const toggle = document.getElementById('sd-toggle');
|
||||||
|
if (settings.supportsDub) {
|
||||||
|
toggle.style.display = 'flex';
|
||||||
|
setAudioMode('sub');
|
||||||
|
} else {
|
||||||
|
toggle.style.display = 'none';
|
||||||
|
setAudioMode('sub');
|
||||||
|
}
|
||||||
|
|
||||||
|
const serverSelect = document.getElementById('server-select');
|
||||||
|
serverSelect.innerHTML = '';
|
||||||
|
if (settings.episodeServers && settings.episodeServers.length > 0) {
|
||||||
|
settings.episodeServers.forEach(srv => {
|
||||||
|
const opt = document.createElement('option');
|
||||||
|
opt.value = srv;
|
||||||
|
opt.innerText = srv;
|
||||||
|
serverSelect.appendChild(opt);
|
||||||
|
});
|
||||||
|
serverSelect.style.display = 'block';
|
||||||
|
} else {
|
||||||
|
serverSelect.style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
loadStream();
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
setLoading("Failed to load extension settings.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleAudioMode() {
|
||||||
|
const newMode = audioMode === 'sub' ? 'dub' : 'sub';
|
||||||
|
setAudioMode(newMode);
|
||||||
|
loadStream();
|
||||||
|
}
|
||||||
|
|
||||||
|
function setAudioMode(mode) {
|
||||||
|
audioMode = mode;
|
||||||
|
const toggle = document.getElementById('sd-toggle');
|
||||||
|
const subOpt = document.getElementById('opt-sub');
|
||||||
|
const dubOpt = document.getElementById('opt-dub');
|
||||||
|
|
||||||
|
toggle.setAttribute('data-state', mode);
|
||||||
|
if (mode === 'sub') {
|
||||||
|
subOpt.classList.add('active');
|
||||||
|
dubOpt.classList.remove('active');
|
||||||
|
} else {
|
||||||
|
subOpt.classList.remove('active');
|
||||||
|
dubOpt.classList.add('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadStream() {
|
||||||
|
if (!currentExtension) return;
|
||||||
|
|
||||||
|
const serverSelect = document.getElementById('server-select');
|
||||||
|
const server = serverSelect.value || "default";
|
||||||
|
|
||||||
|
setLoading(`Searching & Resolving Stream (${audioMode})...`);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const url = `/api/watch/stream?animeId=${animeId}&episode=${currentEpisode}&server=${server}&category=${audioMode}&ext=${currentExtension}`;
|
||||||
|
const res = await fetch(url);
|
||||||
|
const data = await res.json();
|
||||||
|
|
||||||
|
if (data.error) {
|
||||||
|
setLoading(`Error: ${data.error}`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!data.videoSources || data.videoSources.length === 0) {
|
||||||
|
setLoading("No video sources found.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const source = data.videoSources.find(s => s.type === 'm3u8') || data.videoSources[0];
|
||||||
|
|
||||||
|
// --- THE PROXY URL CONTRUCTION ---
|
||||||
|
const headers = data.headers || {};
|
||||||
|
let proxyUrl = `/api/proxy?url=${encodeURIComponent(source.url)}`;
|
||||||
|
|
||||||
|
// Append headers to proxy URL
|
||||||
|
if (headers['Referer']) proxyUrl += `&referer=${encodeURIComponent(headers['Referer'])}`;
|
||||||
|
if (headers['Origin']) proxyUrl += `&origin=${encodeURIComponent(headers['Origin'])}`;
|
||||||
|
if (headers['User-Agent']) proxyUrl += `&userAgent=${encodeURIComponent(headers['User-Agent'])}`;
|
||||||
|
|
||||||
|
playVideo(proxyUrl, data.videoSources[0].subtitles);
|
||||||
|
|
||||||
|
document.getElementById('loading-overlay').style.display = 'none';
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
setLoading("Stream Error. Check console.");
|
||||||
|
console.error(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function playVideo(url, subtitles) {
|
||||||
|
const video = document.getElementById('player');
|
||||||
|
|
||||||
|
if (Hls.isSupported()) {
|
||||||
|
if (hlsInstance) hlsInstance.destroy();
|
||||||
|
hlsInstance = new Hls({
|
||||||
|
xhrSetup: (xhr, url) => {
|
||||||
|
xhr.withCredentials = false; // Ensure no cookies are sent to proxy
|
||||||
|
}
|
||||||
|
});
|
||||||
|
hlsInstance.loadSource(url);
|
||||||
|
hlsInstance.attachMedia(video);
|
||||||
|
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
||||||
|
video.src = url;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ensure clean slate
|
||||||
|
if (plyrInstance) plyrInstance.destroy();
|
||||||
|
|
||||||
|
// 1. Define Tracks
|
||||||
|
// We attach them to the DOM or Plyr configuration so Plyr recognizes them.
|
||||||
|
// The 'captions' option in Plyr can also take a 'src' via config if we were not using HLS.js directly attached.
|
||||||
|
// However, since we use HLS.js attached to the video tag, Plyr wraps that video tag.
|
||||||
|
|
||||||
|
// Clear existing tracks
|
||||||
|
while (video.firstChild) {
|
||||||
|
video.removeChild(video.firstChild);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add Track Elements
|
||||||
|
if (subtitles && subtitles.length > 0) {
|
||||||
|
subtitles.forEach(sub => {
|
||||||
|
const track = document.createElement('track');
|
||||||
|
track.kind = 'captions';
|
||||||
|
track.label = sub.language;
|
||||||
|
track.srclang = sub.language.slice(0, 2).toLowerCase();
|
||||||
|
track.src = sub.url; // These are usually VTT/SRT links
|
||||||
|
if (sub.default || sub.language.toLowerCase().includes('english')) {
|
||||||
|
track.default = true;
|
||||||
|
}
|
||||||
|
video.appendChild(track);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Initialize Plyr
|
||||||
|
plyrInstance = new Plyr(video, {
|
||||||
|
captions: { active: true, update: true, language: 'en' }, // Enable by default
|
||||||
|
controls: ['play-large', 'play', 'progress', 'current-time', 'duration', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
|
||||||
|
settings: ['captions', 'quality', 'speed']
|
||||||
|
});
|
||||||
|
|
||||||
|
video.play().catch(e => console.log("Auto-play blocked"));
|
||||||
|
}
|
||||||
|
|
||||||
|
function setLoading(msg) {
|
||||||
|
const overlay = document.getElementById('loading-overlay');
|
||||||
|
const text = document.getElementById('loading-text');
|
||||||
|
overlay.style.display = 'flex';
|
||||||
|
text.innerText = msg;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('prev-btn').onclick = () => {
|
||||||
|
if(currentEpisode > 1) window.location.href = `/watch/${animeId}/${currentEpisode - 1}`;
|
||||||
|
};
|
||||||
|
document.getElementById('next-btn').onclick = () => {
|
||||||
|
window.location.href = `/watch/${animeId}/${currentEpisode + 1}`;
|
||||||
|
};
|
||||||
|
if(currentEpisode <= 1) document.getElementById('prev-btn').disabled = true;
|
||||||
|
|
||||||
|
loadMetadata();
|
||||||
|
loadExtensions();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user