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

- 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

No files matched your search

+2 -2
View File
@@ -6,7 +6,7 @@
<title>ani-web</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23f97316'/%3E%3Ctext x='32' y='45' font-family='sans-serif' font-size='42' font-weight='700' text-anchor='middle' fill='%230e0f13'%3Ea%3C/text%3E%3C/svg%3E">
<link rel="stylesheet" href="style.css?v=4">
<link rel="stylesheet" href="style.css?v=5">
</head>
<body>
<header>
@@ -30,6 +30,6 @@
max-age=300 in browser AND possibly in your HTTPS proxy, and a stale
copy is exactly how users keep seeing an old UI after a deploy -->
<script src="hls.min.js"></script>
<script src="app.js?v=4"></script>
<script src="app.js?v=5"></script>
</body>
</html>