Skip to content

Commit 739b169

Browse files
author
Grok
committed
[Grok] Keep all cameras in sync with buffering overlay (1.3.1)
Pause every angle when one stalls or drifts, show Buffering…, then resync to the front-camera clock. Frozen tiles no longer sit until seek.
1 parent b989089 commit 739b169

7 files changed

Lines changed: 236 additions & 20 deletions

File tree

‎README.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@ Lightweight, self-hosted web app for browsing TeslaUSB / TeslaCam archives.
44

55
Play Saved, Sentry, and Recent clips with synchronized multi-camera playback. Runs in Docker, including on older NAS/homelab hardware.
66

7-
**Image:** [`ghcr.io/adsouza98/teslacam-viewer:1.3.0`](https://github.com/Adsouza98/teslacam-viewer/pkgs/container/teslacam-viewer)
7+
**Image:** [`ghcr.io/adsouza98/teslacam-viewer:1.3.1`](https://github.com/Adsouza98/teslacam-viewer/pkgs/container/teslacam-viewer)
88

99
## Features
1010

1111
- Dark-theme UI that works on desktop, phones, and foldables
1212
- Browse **Saved**, **Sentry**, and **Recent** clips (one card per event or day folder)
1313
- Sequential 1-minute TeslaCam files play as a single timeline per camera
1414
- Next-segment prefetch (double-buffer) so 1-minute clip boundaries don’t stutter
15+
- Multi-camera sync watchdog: if one angle stalls, all pause with a Buffering… overlay and resync
1516
- Driving HUD (FSD / Autosteer, steering wheel, accelerator, brake) from telemetry embedded in the MP4s — parsed locally, never uploaded
1617
- Filter by date range
1718
- Multi-camera synchronized playback (front / back / left / right / pillars)
@@ -27,15 +28,15 @@ docker run -d --name teslacam-viewer \
2728
-p 8000:8000 \
2829
-e TZ=UTC \
2930
-v /path/to/TeslaUSB:/media:ro \
30-
ghcr.io/adsouza98/teslacam-viewer:1.3.0
31+
ghcr.io/adsouza98/teslacam-viewer:1.3.1
3132
```
3233

3334
Or with Compose:
3435

3536
```yaml
3637
services:
3738
teslacam-viewer:
38-
image: ghcr.io/adsouza98/teslacam-viewer:1.3.0
39+
image: ghcr.io/adsouza98/teslacam-viewer:1.3.1
3940
container_name: teslacam-viewer
4041
environment:
4142
PUID: "1000"

‎VERSION‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
1.3.0
1+
1.3.1

‎app/main.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -312,7 +312,7 @@ def scan_events() -> List[Dict[str, Any]]:
312312
app = FastAPI(
313313
title="TeslaCam Viewer",
314314
description="Lightweight viewer for TeslaUSB / TeslaCam archived clips",
315-
version="1.3.0",
315+
version="1.3.1",
316316
)
317317

318318
app.add_middleware(

‎app/static/css/style.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -272,6 +272,33 @@ html, body {
272272
margin-left: auto;
273273
}
274274

275+
.buffering-overlay {
276+
position: absolute;
277+
inset: 0;
278+
z-index: 20;
279+
display: flex;
280+
flex-direction: column;
281+
align-items: center;
282+
justify-content: center;
283+
gap: 0.7rem;
284+
background: rgba(8, 12, 18, 0.55);
285+
color: #e6edf3;
286+
font-weight: 600;
287+
letter-spacing: 0.04em;
288+
pointer-events: none;
289+
}
290+
.buffering-overlay[hidden] { display: none !important; }
291+
.buffering-spinner {
292+
width: 36px;
293+
height: 36px;
294+
border-radius: 50%;
295+
border: 3px solid rgba(255,255,255,0.2);
296+
border-top-color: var(--accent);
297+
animation: spin 0.8s linear infinite;
298+
}
299+
.buffering-label { font-size: 0.9rem; }
300+
@keyframes spin { to { transform: rotate(360deg); } }
301+
275302
.camera-stage {
276303
flex: 1 1 0;
277304
min-height: 0;

‎app/static/index.html‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<meta name="apple-mobile-web-app-capable" content="yes" />
99
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
1010
<title>TeslaCam Viewer</title>
11-
<link rel="stylesheet" href="/static/css/style.css?v=1.3.0" />
11+
<link rel="stylesheet" href="/static/css/style.css?v=1.3.1" />
1212
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>&#x1F697;</text></svg>">
1313
</head>
1414
<body>
@@ -68,6 +68,10 @@ <h2>Select an event</h2>
6868

6969
<div class="camera-stage">
7070
<div class="camera-grid" id="cameraGrid"></div>
71+
<div id="bufferingOverlay" class="buffering-overlay" hidden>
72+
<div class="buffering-spinner" aria-hidden="true"></div>
73+
<div class="buffering-label">Buffering…</div>
74+
</div>
7175
<div id="hud" class="hud" hidden>
7276
<div class="hud-ap" id="hudAp">—</div>
7377
<div class="hud-blink hud-blink-l" id="hudBlinkL"></div>
@@ -125,13 +129,17 @@ <h2>Select an event</h2>
125129
<div class="fs-stage">
126130
<video id="fsVideo" class="active" playsinline webkit-playsinline></video>
127131
<video id="fsStandby" class="standby" playsinline webkit-playsinline></video>
132+
<div id="fsBuffering" class="buffering-overlay" hidden>
133+
<div class="buffering-spinner" aria-hidden="true"></div>
134+
<div class="buffering-label">Buffering…</div>
135+
</div>
128136
</div>
129137
<div id="fsHud" class="hud hud-fs" hidden></div>
130138
<div class="fs-seek">
131139
<input type="range" id="fsSeekBar" min="0" max="100" value="0" step="0.1" />
132140
</div>
133141
</div>
134142

135-
<script src="/static/js/app.js?v=1.3.0"></script>
143+
<script src="/static/js/app.js?v=1.3.1"></script>
136144
</body>
137145
</html>

0 commit comments

Comments
 (0)