Fix: make video player and stats boxes semi-transparent (no big black box)

prod-test.js

@@ -0,0 +1,37 @@
+const puppeteer = require('puppeteer-core');
+const fs = require('fs');
+const OUT = '/root/folxplay-test/prod';
+fs.mkdirSync(OUT, { recursive: true });
+
+(async () => {
+  const browser = await puppeteer.launch({
+    executablePath: '/usr/bin/google-chrome',
+    headless: 'new',
+    args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage', '--autoplay-policy=no-user-gesture-required']
+  });
+
+  const page = await browser.newPage();
+  await page.setViewport({ width: 1440, height: 900 });
+
+  console.log('Loading https://folxplay.biba.live ...');
+  const resp = await page.goto('https://folxplay.biba.live/', { waitUntil: 'networkidle2', timeout: 20000 });
+  console.log('HTTP status:', resp.status());
+  console.log('Final URL:', resp.url());
+  
+  await new Promise(r => setTimeout(r, 1500));
+  await page.screenshot({ path: OUT + '/prod-home.png', fullPage: false });
+  console.log('prod-home.png saved');
+
+  // Click Folx Music
+  await page.click('[data-channel="mt"]');
+  await new Promise(r => setTimeout(r, 5000));
+  await page.screenshot({ path: OUT + '/prod-playing.png', fullPage: false });
+  
+  const state = await page.evaluate(() => {
+    const v = document.getElementById('video');
+    return v ? { paused: v.paused, currentTime: v.currentTime, duration: v.duration, vw: v.videoWidth, vh: v.videoHeight } : null;
+  });
+  console.log('Video state:', JSON.stringify(state));
+  
+  await browser.close();
+})();

public/styles.css

@@ -102,7 +102,9 @@ a:hover { border-bottom: 1px solid #313131; }
 
 /* ---------- currently playing / select ---------- */
 .currentlyPlaying {
-  background: #0009;
+  background: rgba(0, 0, 0, 0.55);
+  -webkit-backdrop-filter: blur(15px);
+  backdrop-filter: blur(15px);
   padding: 15px;
   margin-top: 10px;
   border-radius: 15px;
@@ -111,7 +113,9 @@ a:hover { border-bottom: 1px solid #313131; }
 .currentlyPlaying b { font-weight: 700; }
 
 .selectChannelBox {
-  background: #000;
+  background: rgba(0, 0, 0, 0.55);
+  -webkit-backdrop-filter: blur(15px);
+  backdrop-filter: blur(15px);
   height: 400px;
   display: flex;
   text-align: center;
@@ -119,7 +123,6 @@ a:hover { border-bottom: 1px solid #313131; }
   border-radius: 15px;
   color: #b4b4b4;
   align-items: center;
-  background-color: #000000e6;
   font-size: 18px;
 }
 @media all and (max-width: 800px) {
@@ -138,7 +141,9 @@ a:hover { border-bottom: 1px solid #313131; }
 /* ---------- playing stats / Top10 ---------- */
 .playingStats {
   color: #eee;
-  background: #0009;
+  background: rgba(0, 0, 0, 0.55);
+  -webkit-backdrop-filter: blur(15px);
+  backdrop-filter: blur(15px);
   padding: 15px;
   margin-top: 10px;
   border-radius: 15px;