zwitschi/tesla-cam-view
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor HTML and JavaScript structure; add health-check endpoint

Browse Source 
- Removed inline CSS from index.html and linked to external stylesheet.
- Moved JavaScript code to a separate app.js file for better organization.
- Added a health-check endpoint to the Flask application for monitoring purposes.
- Implemented a static file serving route to handle requests for static assets.
This commit is contained in:
zwitschi committed 2026-07-24 14:38:40 +02:00
1 parent 6a0929ac2e
commit cca5dd00ae
6 files changed
+953 -1727
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

templates/index.html
+2 -918
View File
@@ -4,520 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TeslaCam Video Player</title>
<style>
:root {
--bg-primary: #0a0a0c;
--bg-secondary: #17171a;
--bg-tertiary: #202024;
--bg-elevated: #2a2a2f;
--accent: #e31937; /* Tesla Red */
--accent-hover: #ff2b4d;
--text-primary: #f4f4f5;
--text-secondary: #a1a1aa;
--text-muted: #6b6b73;
--border: #303036;
--radius: 12px;
--radius-sm: 8px;
--shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
--font:
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
background: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font);
-webkit-font-smoothing: antialiased;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Header */
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 24px;
background: linear-gradient(
180deg,
#131316 0%,
var(--bg-secondary) 100%
);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 50;
gap: 16px;
flex-wrap: wrap;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
font-weight: 700;
font-size: 18px;
letter-spacing: 0.5px;
}
.brand .logo {
width: 30px;
height: 30px;
display: grid;
place-items: center;
color: var(--accent);
}
.brand .logo svg {
width: 100%;
height: 100%;
fill: var(--accent);
}
.brand small {
display: block;
font-size: 11px;
font-weight: 500;
color: var(--text-muted);
letter-spacing: 1.5px;
text-transform: uppercase;
}
.search-wrap {
flex: 1 1 320px;
max-width: 480px;
position: relative;
}
.search-wrap input {
width: 100%;
padding: 11px 40px 11px 40px;
background: var(--bg-tertiary);
border: 1px solid var(--border);
border-radius: 30px;
color: var(--text-primary);
font-size: 14px;
outline: none;
transition:
border-color 0.2s,
box-shadow 0.2s;
}
.search-wrap input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(227, 25, 55, 0.15);
}
.search-wrap .search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
pointer-events: none;
}
.search-wrap .clear-btn {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: var(--bg-elevated);
border: none;
color: var(--text-secondary);
width: 22px;
height: 22px;
border-radius: 50%;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
font-size: 14px;
line-height: 1;
}
.search-wrap .clear-btn.visible {
display: flex;
}
/* Layout */
.layout {
display: grid;
grid-template-columns: minmax(0, 1.9fr) minmax(320px, 1fr);
gap: 20px;
padding: 20px 24px;
flex: 1;
align-items: start;
}
/* Video Player Section */
.player-panel {
position: sticky;
top: 84px;
display: flex;
flex-direction: column;
gap: 14px;
}
.video-stage {
position: relative;
background: #000;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
border: 1px solid var(--border);
aspect-ratio: 16 / 9;
}
.video-stage video {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
background: #000;
}
.video-placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
color: var(--text-muted);
text-align: center;
padding: 20px;
}
.video-placeholder svg {
width: 54px;
height: 54px;
opacity: 0.4;
}
.video-badge {
position: absolute;
top: 12px;
left: 12px;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(6px);
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
display: none;
align-items: center;
gap: 8px;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.video-badge.visible {
display: flex;
}
.video-badge .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px var(--accent);
}
/* Camera Synchronized Switch Bar */
.cam-switch {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 12px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.cam-switch .cs-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
width: 100%;
margin-bottom: 2px;
}
.cam-switch button {
flex: 1 1 auto;
min-width: 88px;
padding: 9px 10px;
background: var(--bg-tertiary);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-secondary);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.cam-switch button:hover:not(:disabled) {
background: var(--bg-elevated);
color: var(--text-primary);
border-color: #444;
}
.cam-switch button.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.cam-switch button:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.now-playing {
font-size: 13px;
color: var(--text-secondary);
padding: 0 4px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.now-playing strong {
color: var(--text-primary);
}
.now-playing .ts {
color: var(--accent);
font-variant-numeric: tabular-nums;
}
/* Sidebar & Clip List */
.sidebar {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.cam-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.cam-tabs .tab {
padding: 8px 14px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 30px;
color: var(--text-secondary);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
display: flex;
align-items: center;
gap: 7px;
}
.cam-tabs .tab:hover {
background: var(--bg-tertiary);
color: var(--text-primary);
}
.cam-tabs .tab.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.cam-tabs .tab .count {
background: rgba(255, 255, 255, 0.12);
padding: 1px 7px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
}
.cam-tabs .tab.active .count {
background: rgba(0, 0, 0, 0.25);
}
.list-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 12px;
color: var(--text-muted);
}
.list-toolbar select {
background: var(--bg-tertiary);
border: 1px solid var(--border);
color: var(--text-secondary);
border-radius: var(--radius-sm);
padding: 6px 10px;
font-size: 12px;
cursor: pointer;
outline: none;
}
.clip-list {
display: flex;
flex-direction: column;
gap: 8px;
max-height: calc(100vh - 260px);
overflow-y: auto;
padding-right: 4px;
}
.clip-list::-webkit-scrollbar {
width: 8px;
}
.clip-list::-webkit-scrollbar-thumb {
background: var(--bg-elevated);
border-radius: 10px;
}
.clip-list::-webkit-scrollbar-track {
background: transparent;
}
.cam-group-header {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
padding: 10px 4px 4px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
background: var(--bg-primary);
z-index: 2;
}
.cam-group-header a {
color: var(--accent);
text-decoration: none;
font-size: 11px;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
display: inline-flex;
align-items: center;
gap: 4px;
}
.cam-group-header a:hover {
text-decoration: underline;
}
.clip {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.15s;
}
.clip:hover {
background: var(--bg-tertiary);
border-color: #3d3d44;
transform: translateX(2px);
}
.clip.playing {
border-color: var(--accent);
background: linear-gradient(
90deg,
rgba(227, 25, 55, 0.12),
var(--bg-tertiary)
);
}
.clip .thumb {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 8px;
background: var(--bg-tertiary);
display: grid;
place-items: center;
color: var(--accent);
}
.clip.playing .thumb {
background: rgba(227, 25, 55, 0.15);
}
.clip .meta {
min-width: 0;
flex: 1;
}
.clip .meta .fn {
font-size: 13px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--text-primary);
}
.clip .meta .sub {
font-size: 11.5px;
color: var(--text-muted);
margin-top: 2px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.clip .meta .sub .cam-pill {
color: var(--text-secondary);
background: var(--bg-tertiary);
padding: 0 7px;
border-radius: 20px;
font-weight: 600;
}
.clip .play-ico {
color: var(--text-muted);
flex-shrink: 0;
}
.clip.playing .play-ico {
color: var(--accent);
}
.empty {
text-align: center;
padding: 40px 20px;
color: var(--text-muted);
font-size: 14px;
}
.empty svg {
width: 40px;
height: 40px;
opacity: 0.3;
margin-bottom: 10px;
}
@media (max-width: 960px) {
.layout {
grid-template-columns: 1fr;
}
.player-panel {
position: static;
}
.clip-list {
max-height: none;
}
}
@media (max-width: 560px) {
header {
padding: 12px 16px;
}
.layout {
padding: 14px 16px;
}
.brand small {
display: none;
}
}
[hidden] {
display: none !important;
}
</style>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<!-- Header -->
@@ -655,409 +142,6 @@
}
</script>
<script>
(function () {
"use strict";
const RAW = JSON.parse(
document.getElementById("videoData").textContent || "{}",
);
const cameras = {};
const clips = [];
Object.keys(RAW).forEach(function (key) {
const cam = RAW[key];
cameras[key] = cam.display;
(cam.videos || []).forEach(function (v) {
clips.push({
cam: key,
camDisplay: cam.display,
filename: v.filename,
timestamp: v.timestamp,
rel_path: v.rel_path,
url: v.url,
});
});
});
// Index clips by timestamp for angle synchronization
const byTimestamp = {};
clips.forEach(function (c) {
if (!byTimestamp[c.timestamp]) byTimestamp[c.timestamp] = {};
byTimestamp[c.timestamp][c.cam] = c;
});
const player = document.getElementById("player");
const placeholder = document.getElementById("videoPlaceholder");
const badge = document.getElementById("videoBadge");
const badgeText = document.getElementById("badgeText");
const clipListEl = document.getElementById("clipList");
const searchBox = document.getElementById("searchBox");
const clearSearch = document.getElementById("clearSearch");
const camTabsEl = document.getElementById("camTabs");
const sortSelect = document.getElementById("sortSelect");
const resultCount = document.getElementById("resultCount");
const camSwitchBtns = document.getElementById("camSwitchButtons");
const nowPlaying = document.getElementById("nowPlaying");
const npName = document.getElementById("npName");
const npTime = document.getElementById("npTime");
document.getElementById("countAll").textContent = clips.length;
let activeCam = "all";
let query = "";
let sortMode = "oldest";
let current = null;
function tsToDate(ts) {
const m = /^(\d{4})-(\d{2})-(\d{2})[_ ](\d{2})-(\d{2})-(\d{2})/.exec(
ts || "",
);
if (!m) return null;
return new Date(+m[1], +m[2] - 1, +m[3], +m[4], +m[5], +m[6]);
}
function prettyTs(ts) {
const d = tsToDate(ts);
if (!d) return ts || "Unknown";
return d.toLocaleString(undefined, {
year: "numeric",
month: "short",
day: "numeric",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
});
}
function esc(s) {
return String(s).replace(/[&<>"']/g, function (c) {
return {
"&": "&amp;",
"<": "&lt;",
">": "&gt;",
'"': "&quot;",
"'": "&#39;",
}[c];
});
}
function getFiltered() {
let out = clips.filter(function (c) {
if (activeCam !== "all" && c.cam !== activeCam) return false;
if (query) {
const hay = (
c.filename +
" " +
c.timestamp +
" " +
c.camDisplay +
" " +
prettyTs(c.timestamp)
).toLowerCase();
if (hay.indexOf(query) === -1) return false;
}
return true;
});
out.sort(function (a, b) {
if (sortMode === "name")
return a.filename.localeCompare(b.filename);
const da = tsToDate(a.timestamp),
db = tsToDate(b.timestamp);
const ta = da ? da.getTime() : 0,
tb = db ? db.getTime() : 0;
return sortMode === "oldest" ? ta - tb : tb - ta;
});
return out;
}
function render() {
const list = getFiltered();
resultCount.textContent =
list.length + (list.length === 1 ? " clip" : " clips");
if (!list.length) {
clipListEl.innerHTML =
'<div class="empty"><div>No clips match your filters.</div></div>';
return;
}
let html = "";
if (activeCam === "all") {
const groups = {};
list.forEach(function (c) {
(groups[c.cam] = groups[c.cam] || []).push(c);
});
Object.keys(groups).forEach(function (key) {
html += groupHeader(key, groups[key].length);
groups[key].forEach(function (c) {
html += clipRow(c);
});
});
} else {
html += groupHeader(activeCam, list.length);
list.forEach(function (c) {
html += clipRow(c);
});
}
clipListEl.innerHTML = html;
highlightCurrent();
}
function groupHeader(key, n) {
return (
'<div class="cam-group-header"><span>' +
esc(cameras[key] || key) +
" &middot; " +
n +
"</span>" +
'<a href="/camera/' +
encodeURIComponent(key) +
'" title="Open dedicated camera route">' +
"Open route →</a></div>"
);
}
function clipRow(c) {
const id = c.cam + "|" + c.timestamp + "|" + c.filename;
return (
'<div class="clip" data-id="' +
esc(id) +
'" ' +
'data-url="' +
esc(c.url) +
'" data-cam="' +
esc(c.cam) +
'" ' +
'data-ts="' +
esc(c.timestamp) +
'" data-fn="' +
esc(c.filename) +
'">' +
'<div class="thumb">' +
'<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="2" y="6" width="14" height="12" rx="2"/><path d="M16 10l6-3v10l-6-3"/></svg>' +
"</div>" +
'<div class="meta">' +
'<div class="fn">' +
esc(c.filename) +
"</div>" +
'<div class="sub"><span class="cam-pill">' +
esc(c.camDisplay) +
"</span>" +
"<span>" +
esc(prettyTs(c.timestamp)) +
"</span></div>" +
"</div>" +
'<div class="play-ico">' +
'<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>' +
"</div>" +
"</div>"
);
}
function playClip(clip) {
if (!clip) return;
current = clip;
player.src = clip.url;
player.load();
player.play().catch(function () {});
placeholder.hidden = true;
badge.classList.add("visible");
badgeText.textContent = clip.camDisplay;
nowPlaying.hidden = false;
npName.textContent = clip.filename;
npTime.textContent = prettyTs(clip.timestamp);
buildCamSwitch(clip);
highlightCurrent();
}
function buildCamSwitch(clip) {
const group = byTimestamp[clip.timestamp] || {};
const availKeys = Object.keys(group);
let html = "";
Object.keys(cameras).forEach(function (key) {
const has = group[key];
const isActive = key === clip.cam;
html +=
'<button data-switch="' +
esc(key) +
'" ' +
(has ? "" : "disabled ") +
'class="' +
(isActive ? "active" : "") +
'" ' +
'title="' +
(has
? "Switch to " + esc(cameras[key])
: "No footage available") +
'">' +
esc(cameras[key]) +
"</button>";
});
if (availKeys.length <= 1) {
html +=
'<span style="color:var(--text-muted);font-size:11.5px;width:100%;padding-top:4px;">' +
"Only one camera view recorded for this timestamp.</span>";
}
camSwitchBtns.innerHTML = html;
}
function switchCam(key) {
if (!current) return;
const group = byTimestamp[current.timestamp] || {};
const target = group[key];
if (!target) return;
const savedTime = player.currentTime || 0;
const wasPlaying = !player.paused;
current = target;
player.src = target.url;
player.load();
badgeText.textContent = target.camDisplay;
npName.textContent = target.filename;
// Preserve video playback timestamp position across camera angles
player.addEventListener("loadedmetadata", function onMeta() {
player.removeEventListener("loadedmetadata", onMeta);
try {
if (savedTime && savedTime < player.duration) {
player.currentTime = savedTime;
}
} catch (e) {}
if (wasPlaying) player.play().catch(function () {});
});
camSwitchBtns.querySelectorAll("button").forEach(function (b) {
b.classList.toggle("active", b.getAttribute("data-switch") === key);
});
highlightCurrent();
}
function highlightCurrent() {
const rows = clipListEl.querySelectorAll(".clip");
rows.forEach(function (r) {
const isCur =
current &&
r.getAttribute("data-cam") === current.cam &&
r.getAttribute("data-ts") === current.timestamp &&
r.getAttribute("data-fn") === current.filename;
r.classList.toggle("playing", !!isCur);
});
}
clipListEl.addEventListener("click", function (e) {
const row = e.target.closest(".clip");
if (!row) return;
playClip({
cam: row.getAttribute("data-cam"),
camDisplay: cameras[row.getAttribute("data-cam")],
filename: row.getAttribute("data-fn"),
timestamp: row.getAttribute("data-ts"),
url: row.getAttribute("data-url"),
});
});
camSwitchBtns.addEventListener("click", function (e) {
const btn = e.target.closest("button[data-switch]");
if (!btn || btn.disabled) return;
switchCam(btn.getAttribute("data-switch"));
});
camTabsEl.addEventListener("click", function (e) {
const tab = e.target.closest(".tab");
if (!tab) return;
camTabsEl.querySelectorAll(".tab").forEach(function (t) {
t.classList.remove("active");
});
tab.classList.add("active");
activeCam = tab.getAttribute("data-cam");
render();
});
let searchTimer;
searchBox.addEventListener("input", function () {
clearSearch.classList.toggle("visible", !!searchBox.value);
clearTimeout(searchTimer);
searchTimer = setTimeout(function () {
query = searchBox.value.trim().toLowerCase();
render();
}, 120);
});
clearSearch.addEventListener("click", function () {
searchBox.value = "";
query = "";
clearSearch.classList.remove("visible");
render();
searchBox.focus();
});
sortSelect.addEventListener("change", function () {
sortMode = sortSelect.value;
render();
});
// Keyboard Shortcuts: 1-9 (Camera Switch), J/K (Next/Prev Clip)
document.addEventListener("keydown", function (e) {
if (/INPUT|TEXTAREA|SELECT/.test(document.activeElement.tagName))
return;
if (e.key >= "1" && e.key <= "9") {
const keys = Object.keys(cameras);
const idx = +e.key - 1;
if (current && keys[idx]) switchCam(keys[idx]);
} else if (e.key === "j" || e.key === "k") {
const list = getFiltered();
if (!list.length) return;
let i = list.findIndex(function (c) {
return (
current &&
c.cam === current.cam &&
c.timestamp === current.timestamp &&
c.filename === current.filename
);
});
i =
e.key === "j"
? Math.min(list.length - 1, i + 1)
: Math.max(0, i - 1);
if (list[i]) playClip(list[i]);
}
});
// Auto-play next clip of the same camera when video finishes
player.addEventListener("ended", function () {
if (!current) return;
// Build a list of clips for the SAME camera, sorted like the sidebar
const sameCam = clips
.filter(function (c) {
return c.cam === current.cam;
})
.sort(function (a, b) {
if (sortMode === "name")
return a.filename.localeCompare(b.filename);
const da = tsToDate(a.timestamp),
db = tsToDate(b.timestamp);
const ta = da ? da.getTime() : 0,
tb = db ? db.getTime() : 0;
return sortMode === "oldest" ? ta - tb : tb - ta;
});
const i = sameCam.findIndex(function (c) {
return (
c.cam === current.cam &&
c.timestamp === current.timestamp &&
c.filename === current.filename
);
});
if (i > -1 && sameCam[i + 1]) playClip(sameCam[i + 1]);
});
render();
})();
</script>
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>