Update index.js

index.js

@@ -2,6 +2,7 @@ const puppeteer = require('puppeteer-extra');
 const StealthPlugin = require('puppeteer-extra-plugin-stealth');
 const express = require('express');
 const admin = require('firebase-admin');
+const views = require('./views'); // Panggil UI
 
 puppeteer.use(StealthPlugin());
 const app = express();
@@ -17,85 +18,10 @@ if (serviceAccount.project_id) {
 }
 const db = admin.database();
 
-// GOD MODE UI (Obsidian Premium with Live Logs)
-const UI = (content, query = '', page = 1) => `
-<html><head>
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-<style>
-    :root { --primary: #3b82f6; --bg: #050505; --card: #111; --text: #f8fafc; }
-    body { background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; margin: 0; padding-bottom: 90px; }
-    
-    header { background: rgba(5,5,5,0.9); backdrop-filter: blur(20px); padding: 12px 20px; border-bottom: 1px solid #222; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1000; }
-    .logo { font-weight: 900; font-size: 18px; color: #fff; text-decoration: none; }
-    .logo span { color: var(--primary); }
-    
-    .search-input { background: #111; border: 1px solid #333; padding: 8px 15px; border-radius: 20px; color: #fff; font-size: 12px; outline: none; width: 130px; }
-
-    .main { padding: 15px; max-width: 1200px; margin: 0 auto; }
-    
-    /* SYSTEM LOG BOX */
-    #sys-log { background: #000; border: 1px solid #222; border-radius: 8px; padding: 10px; margin-bottom: 20px; font-family: monospace; font-size: 10px; color: #10b981; max-height: 80px; overflow-y: auto; display: none; }
+let scrapeStatus = { status: 'idle', msg: '' };
+app.get('/api/status', (req, res) => res.json(scrapeStatus));
 
-    .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
-    @media (min-width: 768px) { .grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; } }
-    
-    .card { background: var(--card); border-radius: 12px; overflow: hidden; border: 1px solid #222; cursor: pointer; transition: 0.3s; position: relative; }
-    .card img { width: 100%; height: 230px; object-fit: cover; background: #111; }
-    .card-title { padding: 10px; font-size: 11px; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-    .card-status { position: absolute; top: 5px; right: 5px; background: rgba(0,0,0,0.8); color: var(--primary); font-size: 8px; padding: 2px 6px; border-radius: 4px; font-weight: 900; }
-
-    .pagination { display: flex; justify-content: center; gap: 8px; margin: 25px 0; }
-    .page-btn { background: #111; border: 1px solid #222; color: #94a3b8; padding: 8px 14px; border-radius: 8px; text-decoration: none; font-size: 11px; font-weight: bold; }
-    .page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
-
-    .bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(5,5,5,0.95); backdrop-filter: blur(20px); border-top: 1px solid #222; display: flex; justify-content: space-around; padding: 15px 0; z-index: 9999; }
-    .nav-item { color: #4b5563; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 10px; font-weight: bold; }
-    .nav-item.active { color: var(--primary); }
-
-    #loader { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 100000; flex-direction: column; justify-content: center; align-items: center; }
-</style>
-<script>
-    function showLoading() { document.getElementById("loader").style.display = "flex"; }
-    function startSync() {
-        const u = prompt("Target (Anichin.cafe):", "https://anichin.cafe");
-        if(u) { 
-            document.getElementById("sys-log").style.display = "block";
-            fetch('/api/scrape?url=' + encodeURIComponent(u)); 
-            monitor(); 
-        }
-    }
-    async function monitor() {
-        const r = await fetch('/api/status'); const d = await r.json();
-        const log = document.getElementById("sys-log");
-        log.innerHTML += "> " + d.msg + "<br>";
-        log.scrollTop = log.scrollHeight;
-        if(d.status === "running") setTimeout(monitor, 3000); else location.reload();
-    }
-</script>
-</head><body>
-    <div id="loader"><div style="border:3px solid #111; border-top:3px solid var(--primary); border-radius:50%; width:40px; height:40px; animation:spin 1s linear infinite;"></div><p id="st-text" style="color:var(--primary); margin-top:15px; font-size:11px; font-weight:bold;">EXECUTING COMMAND...</p></div>
-    <header>
-        <a href="/" class="logo">AQSO <span>OMEGA</span></a>
-        <form action="/" style="margin:0;"><input type="text" name="q" value="${query}" class="search-input" placeholder="Search..."></form>
-        <i class="fas fa-sync-alt" style="color:var(--primary); cursor:pointer;" onclick="startSync()"></i>
-    </header>
-    <div class="main">
-        <div id="sys-log"></div>
-        ${content}
-    </div>
-    <div class="bottom-nav">
-        <a href="/" class="nav-item ${!query ? 'active' : ''}"><i class="fas fa-home"></i>HOME</a>
-        <a href="/?page=1" class="nav-item"><i class="fas fa-database"></i>DATABASE</a>
-        <a href="javascript:void(0)" onclick="startSync()" class="nav-item"><i class="fas fa-bolt"></i>SYNC</a>
-    </div>
-    <style>@keyframes spin { to { transform: rotate(360deg); } }</style>
-</body></html>`;
-
-let s = { status: 'idle', msg: '' };
-app.get('/api/status', (req, res) => res.json(s));
-
-// 1. DASHBOARD WITH FALLBACK
+// 1. DASHBOARD: Hanya munculkan yang READY
 app.get('/', async (req, res) => {
     const q = req.query.q?.toLowerCase() || '';
     const page = parseInt(req.query.page) || 1;
@@ -104,104 +30,105 @@ app.get('/', async (req, res) => {
     const snapshot = await db.ref('donghua').once('value');
     const data = snapshot.val() || {};
     
-    // Cuma tampilkan yang ada posternya
+    // Filter: Sudah ada episodes
     let items = Object.keys(data).map(k => ({ id: k, ...data[k] }))
-        .filter(i => i.img);
+        .filter(i => i.episodes && i.episodes.length > 0 && i.img);
 
     if (q) items = items.filter(i => i.title.toLowerCase().includes(q));
 
+    const totalPages = Math.ceil(items.length / limit);
     const paginated = items.reverse().slice((page - 1) * limit, page * limit);
+
     let grid = `<div class="grid">`;
-    
     paginated.forEach(i => {
-        const epReady = (i.episodes?.length > 0);
-        grid += `<div class="card" onclick="${epReady ? "showLoading(); location.href='/view?id='+this.dataset.id" : "alert('Eps Belum Siap!')"}" data-id="${i.id}">
-                    ${!epReady ? '<div class="card-status">DOWNLOADING...</div>' : ''}
+        grid += `<div class="card" onclick="location.href='/view?id=${i.id}'">
                     <img src="${i.img}"><div class="card-title">${i.title}</div></div>`;
     });
     grid += '</div>';
 
     let pages = '<div class="pagination">';
-    for (let i = 1; i <= Math.ceil(items.length / limit); i++) {
+    for (let i = 1; i <= totalPages; i++) {
         pages += `<a href="/?page=${i}${q ? '&q='+q : ''}" class="page-btn ${page === i ? 'active' : ''}">${i}</a>`;
     }
     pages += '</div>';
 
-    res.send(UI(grid + (items.length > limit ? pages : '')));
+    res.send(views.layout(grid + (totalPages > 1 ? pages : ''), q, page));
 });
 
-// 2. GOD SCRAPER (Aggressive & Honest)
+// 2. LIVE SCRAPER: Smart Check & One-by-One
 app.get('/api/scrape', async (req, res) => {
     const { url } = req.query;
-    s = { status: 'running', msg: 'Checking Firebase Connection...' };
+    scrapeStatus = { status: 'running', msg: 'Awakening Blitz Engine...' };
     let browser;
     try {
         browser = await puppeteer.launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] });
         const page = await browser.newPage();
-        await page.goto(url, { waitUntil: 'networkidle2', timeout: 90000 });
-        await page.waitForFunction(() => !document.body.innerText.includes('7 detik'), { timeout: 30000 }).catch(() => {});
+        await page.goto(url, { waitUntil: 'networkidle2', timeout: 60000 });
+        await page.waitForFunction(() => !document.body.innerText.includes('7 detik'), { timeout: 20000 }).catch(() => {});
 
-        s.msg = 'Home Page Captured. Extracting Titles...';
         const list = await page.evaluate(() => {
-            return Array.from(document.querySelectorAll('.bs, .article')).map(el => {
-                const img = el.querySelector('img');
-                return {
-                    title: el.querySelector('h2, .title, .entry-title')?.innerText,
-                    img: img?.src || img?.dataset?.src || img?.dataset?.lazySrc || img?.srcset?.split(' ')[0],
-                    url: el.querySelector('a')?.href
-                };
-            }).filter(i => i.title && i.url);
+            return Array.from(document.querySelectorAll('.bs, .article')).map(el => ({
+                title: el.querySelector('h2, .title, .entry-title')?.innerText,
+                img: el.querySelector('img')?.src || el.querySelector('img')?.dataset?.src,
+                url: el.querySelector('a')?.href
+            })).filter(i => i.title && i.url);
         });
 
         for(let i=0; i < list.length; i++) {
             const key = Buffer.from(list[i].title).toString('hex').slice(0, 30);
             
-            // Masukkan Judul & Poster dulu biar gak "KOSONG"
-            await db.ref('donghua/' + key).update({ title: list[i].title, img: list[i].img, url: list[i].url });
-            
-            s.msg = `Injected Poster: ${list[i].title}`;
+            // LOGIKA SMART: Cek DB dulu
+            const check = await db.ref('donghua/' + key).once('value');
+            if (check.val()?.episodes?.length > 0) {
+                scrapeStatus.msg = `Skip: ${list[i].title} (Ready)`;
+                continue;
+            }
+
+            scrapeStatus.msg = `Installing (${i+1}/${list.length}): ${list[i].title}`;
             const dp = await browser.newPage();
             try {
-                await dp.goto(list[i].url, { waitUntil: 'domcontentloaded', timeout: 60000 });
-                await dp.waitForSelector('.eplister, .list-episode, .cl-item', { timeout: 15000 }).catch(() => {});
+                await dp.goto(list[i].url, { waitUntil: 'domcontentloaded', timeout: 30000 });
+                await dp.waitForSelector('.eplister, .list-episode', { timeout: 10000 }).catch(() => {});
                 
                 const episodes = await dp.evaluate(() => {
-                    return Array.from(document.querySelectorAll('.eplister li, .list-episode li, .cl-item')).map(li => ({
+                    return Array.from(document.querySelectorAll('.eplister li, .list-episode li')).map(li => ({
                         num: li.querySelector('.epl-num, .num')?.innerText || '?',
                         url: li.querySelector('a')?.href
                     })).filter(e => e.url);
                 }) || [];
 
                 if (episodes.length > 0) {
-                    await db.ref('donghua/' + key).update({ episodes, lastSync: Date.now() });
-                    s.msg = `SUCCESS: ${list[i].title} (${episodes.length} Eps)`;
+                    // Inject satu-persatu
+                    await db.ref('donghua/' + key).set({ ...list[i], episodes, lastSync: Date.now() });
                 } else {
-                    s.msg = `FAILED: No episodes found for ${list[i].title}`;
+                    await db.ref('donghua/' + key).remove(); // Hapus jika error
                 }
-            } catch (e) { s.msg = `ERROR Detail: ${list[i].title}`; }
+            } catch (e) {
+                await db.ref('donghua/' + key).remove();
+            }
             await dp.close();
         }
-        s = { status: 'done', msg: 'System Overlord Complete.' };
-    } catch (e) { s = { status: 'error', msg: e.message }; }
+        scrapeStatus = { status: 'done', msg: 'Sync Majestic Selesai!' };
+    } catch (e) { scrapeStatus = { status: 'error', msg: e.message }; }
     finally { if(browser) await browser.close(); }
 });
 
-// 3. VIEW DETAIL
+// 3. VIEW DETAIL & MULTI-SERVER
 app.get('/view', async (req, res) => {
     const snapshot = await db.ref('donghua/' + req.query.id).once('value');
     const item = snapshot.val();
-    if(!item || !item.episodes) return res.send("Data Belum Siap!");
+    if(!item) return res.redirect('/');
 
-    let list = `<div style="margin-bottom:20px; text-align:center;">
-                    <img src="${item.img}" style="width:140px; border-radius:12px; border:1px solid #222;">
-                    <h2 style="margin:10px 0;">${item.title}</h2>
+    let list = `<div style="display:flex; gap:15px; margin-bottom:20px; align-items:center;">
+                    <img src="${item.img}" style="width:100px; height:140px; border-radius:10px; object-fit:cover;">
+                    <div><h2>${item.title}</h2><p style="color:var(--primary); font-weight:800;">${item.episodes.length} EPS READY</p></div>
                 </div>`;
     
     item.episodes.forEach(e => {
         list += `<a href="/player?url=${encodeURIComponent(e.url)}" class="page-btn" style="display:block; margin-bottom:10px; text-align:left; padding:15px;">
-                <i class="fas fa-play" style="margin-right:12px; color:var(--primary);"></i> Episode ${e.num}</a>`;
+                <i class="fas fa-play" style="margin-right:12px;"></i> Episode ${e.num}</a>`;
     });
-    res.send(UI(list));
+    res.send(views.layout(list));
 });
 
 // 4. PLAYER
@@ -213,8 +140,8 @@ app.get('/player', async (req, res) => {
         const page = await browser.newPage();
         await page.goto(url, { waitUntil: 'networkidle2' });
         const player = await page.evaluate(() => document.querySelector('iframe, .video-content iframe')?.src);
-        res.send(UI(`<div style="background:#000; height:60vh; border-radius:15px; overflow:hidden;"><iframe src="${player}" style="width:100%; height:100%; border:none;" allowfullscreen></iframe></div>`));
-    } catch (e) { res.send(UI("Error Player: " + e.message)); }
+        res.send(views.layout(`<div style="background:#000; height:60vh; border-radius:15px; overflow:hidden;"><iframe src="${player}" style="width:100%; height:100%; border:none;" allowfullscreen></iframe></div>`));
+    } catch (e) { res.send(views.layout("Error: " + e.message)); }
     finally { if(browser) await browser.close(); }
 });