diff --git a/modules/web/index.html b/modules/web/index.html index 0772f75..8e122a2 100644 --- a/modules/web/index.html +++ b/modules/web/index.html @@ -12,12 +12,11 @@ font-weight: 400; } html,body{height:100%; margin:0; background:linear-gradient(180deg,#071018,#0b1220 60%); color:#eef2f6; overflow: hidden;} - .container{max-width:1600px; margin:16px auto; padding:16px; display:flex; flex-direction:column; gap:10px} - h1{margin:0; font-size:22px; font-weight:500} - .layout{display:flex; gap:14px; height:calc(100vh - 140px);} - .panel{background:var(--panel); border-radius:10px; padding:8px; box-shadow: 0 6px 18px rgba(2,8,16,0.6); display:flex; flex-direction:column; overflow:hidden} - .left{flex:1.2; min-width:420px} - .right{flex:1; display:flex; flex-direction:column; gap:6px} + .container{max-width:1640px; margin:12px auto; padding:14px; display:flex; flex-direction:column; gap:8px} + .layout{display:flex; gap:10px; height:calc(100vh - 100px);} + .panel{background:var(--panel); border-radius:10px; padding:6px; box-shadow: 0 6px 18px rgba(2,8,16,0.6); display:flex; flex-direction:column; overflow:hidden} + .left{flex:1; min-width:420px} + .right{flex:1.2; display:flex; gap:4px} .frame-title-nc{ font-size:16px; color:var(--muted); margin-bottom:6px; display: flex; justify-content: space-between; align-items: center; user-select: none; padding: 2px 0; transition: color 0.2s ease; } .frame-title{ font-size:16px; color:var(--muted); margin-bottom:4px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; padding: 2px 0; transition: color 0.2s ease; } @@ -33,7 +32,8 @@ .now .track, .next .track {font-weight:400; font-size:14px; word-break:break-all} .progress-wrap { display:flex; gap:10px; align-items:center} .progress-bar { flex:1; height:10px; background:var(--glass); border-radius:8px; overflow:hidden; position:relative } - .progress-fill { height:100%; width:0%; background:linear-gradient(45deg,var(--accent), #2aa2ff); transition: width 0.5s linear} + .progress-fill { height:100%; width:0%; background:linear-gradient(45deg,var(--accent), #2aa2ff); } + .progress-fill.init { opacity: 0;} button, .btn{ background:transparent; border:1px solid rgba(255,255,255,0.06); padding:8px 12px; border-radius:8px; color:inherit; cursor:pointer; transition: background-color 0.15s ease, transform 0.15s ease; } button:hover, .btn:hover { background-color: var(--glass); } @@ -42,7 +42,7 @@ .btn.primary:hover { background:linear-gradient(90deg, #3399ee, #5bbaff); } ul.playlist{list-style:none; padding:6px; margin:0; font-family: "Consolas",monospace; font-size:13px;} - ul.playlist li{ padding:4px 6px; border-radius:6px; display:flex; justify-content:space -between; gap:8px; transition: background-color 0.2s ease, transform 0.15s ease; } + ul.playlist li{ padding:4px 6px; border-radius:6px; display:flex; justify-content:space-between; gap:8px; transition: background-color 0.2s ease, transform 0.15s ease; } ul.playlist li:hover{ background:rgba(255,255,255,0.04); } ul.playlist li.current{background:rgba(62,166,255,0.08)} ul.playlist li.selected{background:rgba(62, 165, 255, 0.305)} @@ -170,19 +170,13 @@
-
-
-

-
-
-
Now Playing
Loading...
-
+
00:00 / 00:00 (00:00)
diff --git a/modules/web/web.js b/modules/web/web.js index 172d59e..6e0f2cd 100644 --- a/modules/web/web.js +++ b/modules/web/web.js @@ -13,6 +13,9 @@ let skipCount = 0; let skipCountToRender = 0; let indexDigits = 1; let skippedIndices = []; +let lastElapsed = 0; +let lastUpdateTime = 0; +let currentRealTotal = 1; function toggleSection(id) { document.getElementById(id).classList.toggle("collapsed"); @@ -164,7 +167,10 @@ function applyProgressState(payload) { const realTotal = Number(payload.real_total || payload.total || 1) || 1; const percent = Math.max(0, Math.min(100, (elapsed / realTotal) * 100)); - document.getElementById("prog-fill").style.width = percent + "%"; + lastElapsed = elapsed; + lastUpdateTime = performance.now(); + currentRealTotal = realTotal; + document.getElementById("time-label").textContent = `${formatTime(elapsed)} / ${formatTime(total)} (${formatTime(total - elapsed)})`; @@ -180,8 +186,6 @@ function applyProgressState(payload) { } } -// ─── Rendering ─────────────────────────────────────────────────────────────── - function renderPlaylist() { const ul = document.getElementById("playlist-ul"); ul.innerHTML = ""; @@ -537,5 +541,20 @@ async function whepConnect() { } } +function animateProgress() { + const now = performance.now(); + const delta = (now - lastUpdateTime) / 1000; // seconds + const smoothElapsed = lastElapsed + delta; + + const percent = Math.max(0, Math.min(100, (smoothElapsed / currentRealTotal) * 100)); + document.getElementById("prog-fill").style.width = percent + "%"; + + requestAnimationFrame(animateProgress); +} + initLayout(); -setTimeout(connectWs, 100); \ No newline at end of file +setTimeout(connectWs, 100); +requestAnimationFrame(animateProgress); +setTimeout(() => { + document.getElementById("prog-fill").classList.remove("init") +}, 1000) \ No newline at end of file