jozamudi/ani-web
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Player: buffering visuals — spinner ring, buffer-ahead gauge, CDN chip

Browse Source 
- Loading/Buffering overlays now show a rotating ring, not just text
- thin gauge under the video: how much is buffered ahead (0-30s scale),
  fills while loading, drains as it plays — you can see a stall building
- corner chip: live CDN KB/s from /api/cdn, green dot OK / amber degraded,
  refreshed on every stall — explains WHY it's buffering

Verified in-browser (CDN-independent): chip reflects live state (0 KB/s
degraded), gauge fills from video.buffered, stall overlay + ring,
playing clears. 18/18 API tests. assets v=5.
This commit is contained in:
jozamudi committed 2026-08-31 15:37:06 +00:00
1 parent a61e7dd0e7
commit 733fa673c2
3 files changed
+66 -7
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

static/style.css
+16
View File
@@ -145,6 +145,22 @@ button.tiny.on { border-color: var(--acc); color: var(--acc); }
.pl-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .6rem;
align-items: center; justify-content: center; background: rgba(0, 0, 0, .72);
border-radius: 10px; color: var(--fg); font-size: .95rem; z-index: 1; }
/* buffering visuals: spinner ring + buffer-ahead gauge + CDN chip */
.pl-spin { width: 48px; height: 48px; flex: none; border-radius: 50%;
border: 4px solid rgba(255, 255, 255, .18); border-top-color: var(--acc);
animation: plspin .8s linear infinite; }
@keyframes plspin { to { transform: rotate(1turn); } }
.pl-buffer { height: 4px; margin-top: 6px; border-radius: 2px; overflow: hidden;
background: rgba(255, 255, 255, .1); }
.pl-buffer i { display: block; height: 100%; width: 0;
background: linear-gradient(90deg, var(--acc), #fbbf24); transition: width .25s ease; }
.pl-cdn { position: absolute; top: 10px; right: 10px; z-index: 2;
display: flex; align-items: center; gap: .4rem;
font: 600 .72rem/1 system-ui, sans-serif; padding: .3rem .55rem; border-radius: 999px;
background: rgba(0, 0, 0, .55); color: #fff; pointer-events: none; }
.pl-cdn i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #6b7280; }
.pl-cdn.ok i { background: #22c55e; }
.pl-cdn.degraded i { background: #f59e0b; }
#toasts { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; gap: .4rem; z-index: 9; }
@keyframes toast-in { from { opacity: 0; transform: translateY(.4rem); } }