Update server.js

server.js

@@ -1,13 +1,12 @@
-
 const express = require('express');
 const io = require('socket.io-client');
 const axios = require('axios');
 const NodeCache = require('node-cache');
-const { v4: uuidv4 } = require('uuid');
+const { randomUUID } = require('crypto'); // Gunakan modul bawaan Node.js
 
 const app = express();
 const port = 7860;
-const jobCache = new NodeCache({ stdTTL: 3600 }); // Job disimpan selama 1 jam
+const jobCache = new NodeCache({ stdTTL: 3600 });
 
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
@@ -28,7 +27,7 @@ const HEADERS = {
 // --- LOGIC STABILIZER ---
 async function runStabilize(jobId, videoUrl) {
     try {
-        jobCache.set(jobId, { status: 'Initializing', progress: 0 });
+        jobCache.set(jobId, { status: 'Initializing', progress: 5 });
 
         const page = await axios.get(CONFIG.targetUrl, { headers: HEADERS });
         const html = page.data;
@@ -38,7 +37,7 @@ async function runStabilize(jobId, videoUrl) {
         setCookie.forEach(c => {
             const [kv] = c.split(';');
             const [k, v] = kv.split('=');
-            cookieMap[k.trim()] = v.trim();
+            if (k && v) cookieMap[k.trim()] = v.trim();
         });
 
         const uid = cookieMap['uid'];
@@ -46,25 +45,25 @@ async function runStabilize(jobId, videoUrl) {
         const g = html.match(/"g"\s*:\s*"([^"]+)"/)?.[1];
         const f = html.match(/"f"\s*:\s*"([^"]+)"/)?.[1] || "44ec01b4c5d979004ecf7d57eed8ba65";
 
-        if (!uid || !i || !g) throw new Error("Gagal ekstraksi token website.");
+        if (!uid || !i || !g) throw new Error("Gagal mengambil token website.");
 
         const cookieStr = Object.entries(cookieMap).map(([k, v]) => `${k}=${v}`).join('; ');
 
-        jobCache.set(jobId, { status: 'Handshaking SSO', progress: 10 });
+        jobCache.set(jobId, { status: 'Handshaking', progress: 15 });
         const attachResponse = await axios.get('https://online-video-cutter.com/sso/attach/', {
             params: { callback: 'jQuery' + Math.floor(Math.random() * 10e15), _: Date.now() },
             headers: { ...HEADERS, 'cookie': cookieStr, 'x-requested-with': 'XMLHttpRequest' }
         });
 
         const verify = attachResponse.data.match(/"verify"\s*:\s*"([^"]+)"/)?.[1];
-        if (!verify) throw new Error("Gagal SSO Handshake.");
+        if (!verify) throw new Error("SSO Verify Token tidak ditemukan.");
 
         await axios.post('https://online-video-cutter.com/sso/verify/', 
             new URLSearchParams({ verify }).toString(), 
             { headers: { ...HEADERS, 'content-type': 'application/x-www-form-urlencoded; charset=UTF-8', 'cookie': cookieStr + `; sso_verify_onlinevideocuttercom=${verify}` } }
         );
 
-        jobCache.set(jobId, { status: 'Connecting to Worker', progress: 20 });
+        jobCache.set(jobId, { status: 'Connecting', progress: 25 });
         const socket = io(CONFIG.workerUrl, {
             path: '/socket.io/',
             transports: ['websocket'],
@@ -83,7 +82,7 @@ async function runStabilize(jobId, videoUrl) {
 
         socket.on('open_remote', (data) => {
             if (data.message_type === 'final_result' && data.tmp_filename) {
-                jobCache.set(jobId, { status: 'Processing Video', progress: 40 });
+                jobCache.set(jobId, { status: 'Stabilizing Video...', progress: 50 });
                 socket.emit('encode', {
                     site_id: "vcutter", uid, operation_id: `${Date.now()}_enc`,
                     action_type: "encode", tmp_filename: data.tmp_filename, v2: true,
@@ -107,7 +106,7 @@ async function runStabilize(jobId, videoUrl) {
         });
 
         socket.on('connect_error', (err) => {
-            jobCache.set(jobId, { status: 'Error', error: 'Socket Connection Error' });
+            jobCache.set(jobId, { status: 'Error', error: 'Connection to worker failed' });
         });
 
     } catch (e) {
@@ -126,48 +125,44 @@ app.get('/', (req, res) => {
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Video Stabilizer</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <style>
-        .loader { border-top-color: #3498db; animation: spin 1s linear infinite; }
-        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-    </style>
 </head>
-<body class="bg-gray-900 text-white min-h-screen flex flex-col items-center p-6">
-    <div class="w-full max-w-md bg-gray-800 p-6 rounded-2xl shadow-xl">
-        <h1 class="text-2xl font-bold mb-2 text-center text-blue-400">Video Stabilizer</h1>
-        <p class="text-xs text-gray-400 mb-6 text-center">Powered by Online-Video-Cutter API</p>
+<body class="bg-slate-900 text-slate-100 min-h-screen flex flex-col items-center p-4">
+    <div class="w-full max-w-md bg-slate-800 p-6 rounded-3xl shadow-2xl mt-10">
+        <h1 class="text-3xl font-extrabold mb-1 text-center bg-gradient-to-r from-blue-400 to-emerald-400 bg-clip-text text-transparent">Stabilizer</h1>
+        <p class="text-xs text-slate-400 mb-8 text-center uppercase tracking-widest">Mobile Video Tools</p>
         
         <div class="space-y-4">
-            <input type="text" id="videoUrl" placeholder="Paste Video URL (.mp4)" 
-                   class="w-full p-3 rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:border-blue-500">
+            <input type="text" id="videoUrl" placeholder="Tempel Link Video (.mp4)" 
+                   class="w-full p-4 rounded-2xl bg-slate-700 border border-slate-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all">
             <button onclick="startJob()" id="btnStart" 
-                    class="w-full bg-blue-600 hover:bg-blue-700 p-3 rounded-lg font-bold transition">
-                Stabilkan Video
+                    class="w-full bg-blue-600 hover:bg-blue-500 p-4 rounded-2xl font-bold text-lg shadow-lg active:scale-95 transition-all">
+                Proses Video
             </button>
         </div>
 
-        <div id="statusContainer" class="hidden mt-8 border-t border-gray-700 pt-6">
-            <div class="flex items-center justify-between mb-2">
-                <span id="statusText" class="text-sm font-medium italic text-gray-300">Menyiapkan...</span>
-                <span id="progressPercent" class="text-sm font-bold text-blue-400">0%</span>
+        <div id="statusContainer" class="hidden mt-10 p-4 bg-slate-900/50 rounded-2xl">
+            <div class="flex justify-between mb-3">
+                <span id="statusText" class="text-sm font-medium text-blue-300 tracking-wide">Menyiapkan...</span>
+                <span id="progressPercent" class="text-sm font-black text-blue-400">0%</span>
             </div>
-            <div class="w-full bg-gray-700 rounded-full h-2.5">
-                <div id="progressBar" class="bg-blue-500 h-2.5 rounded-full transition-all duration-500" style="width: 0%"></div>
+            <div class="w-full bg-slate-700 rounded-full h-3">
+                <div id="progressBar" class="bg-blue-500 h-3 rounded-full transition-all duration-700 ease-out" style="width: 0%"></div>
             </div>
-            <div id="resultArea" class="mt-6 hidden text-center">
+            
+            <div id="resultArea" class="mt-8 hidden animate-bounce">
                 <a id="downloadBtn" href="#" target="_blank" 
-                   class="inline-block bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-full font-bold">
-                   Download Video
+                   class="flex items-center justify-center gap-2 bg-emerald-600 hover:bg-emerald-500 text-white p-4 rounded-2xl font-bold shadow-xl">
+                   <span>Simpan Video</span>
                 </a>
             </div>
         </div>
     </div>
 
     <script>
-        let pollingInterval;
-        
+        let polling;
         async function startJob() {
             const url = document.getElementById('videoUrl').value;
-            if(!url) return alert('Input URL dulu!');
+            if(!url) return alert('Masukkan link video dulu!');
 
             document.getElementById('btnStart').disabled = true;
             document.getElementById('statusContainer').classList.remove('hidden');
@@ -182,28 +177,30 @@ app.get('/', (req, res) => {
                 const data = await res.json();
                 if(data.jobId) pollStatus(data.jobId);
             } catch (err) {
-                alert('Gagal memulai job');
+                alert('Gagal menghubungi server');
                 document.getElementById('btnStart').disabled = false;
             }
         }
 
         function pollStatus(jobId) {
-            pollingInterval = setInterval(async () => {
+            polling = setInterval(async () => {
                 const res = await fetch('/api/status/' + jobId);
                 const data = await res.json();
 
                 document.getElementById('statusText').innerText = data.status;
-                document.getElementById('progressPercent').innerText = (data.progress || 0) + '%';
-                document.getElementById('progressBar').style.width = (data.progress || 0) + '%';
+                const prog = data.progress || 0;
+                document.getElementById('progressPercent').innerText = prog + '%';
+                document.getElementById('progressBar').style.width = prog + '%';
 
                 if(data.status === 'Completed') {
-                    clearInterval(pollingInterval);
+                    clearInterval(polling);
                     document.getElementById('btnStart').disabled = false;
                     document.getElementById('resultArea').classList.remove('hidden');
                     document.getElementById('downloadBtn').href = data.result;
+                    document.getElementById('statusText').innerText = "Selesai!";
                 } else if(data.status === 'Error') {
-                    clearInterval(pollingInterval);
-                    alert('Error: ' + data.error);
+                    clearInterval(polling);
+                    alert('Gagal: ' + data.error);
                     document.getElementById('btnStart').disabled = false;
                 }
             }, 2000);
@@ -216,7 +213,7 @@ app.get('/', (req, res) => {
 
 app.post('/api/stabilize', (req, res) => {
     const { url } = req.body;
-    const jobId = uuidv4();
+    const jobId = randomUUID(); // Menggunakan crypto bawaan
     runStabilize(jobId, url);
     res.json({ jobId });
 });
@@ -227,6 +224,6 @@ app.get('/api/status/:jobId', (req, res) => {
     res.json(job);
 });
 
-app.listen(port, () => {
-    console.log(`Server running at http://localhost:${port}`);
+app.listen(port, '0.0.0.0', () => {
+    console.log(`Server aktif di port ${port}`);
 });