Files
tesla-cam-view/templates/index.html
T
2026-07-24 11:16:50 +02:00

1052 lines
30 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en">
<head>
<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>
</head>
<body>
<!-- Header -->
<header>
<div class="brand">
<span class="logo" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path
d="M12 3C7 3 3.2 4.4 3.2 4.4l.9 1.7s3.1-1 5-.9l.7 1.3C7.9 7.7 6 9 6 9s.6 2.4 3 4.6c2.5-2.2 3-4.6 3-4.6s-1.9-1.3-3.7-1.5l.6-1.3c1.9-.1 5 .9 5 .9l.9-1.7S17 3 12 3z"
/>
</svg>
</span>
<div>
TeslaCam Player
<small>Dashcam &amp; Sentry Archive</small>
</div>
</div>
<div class="search-wrap">
<span class="search-icon" aria-hidden="true">
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<circle cx="11" cy="11" r="7" />
<line x1="21" y1="21" x2="16.65" y2="16.65" />
</svg>
</span>
<input
type="text"
id="searchBox"
placeholder="Search by date, timestamp or filename…"
autocomplete="off"
aria-label="Search clips"
/>
<button class="clear-btn" id="clearSearch" aria-label="Clear search">
&times;
</button>
</div>
</header>
<!-- Main Layout -->
<div class="layout">
<!-- Left: Video Player Panel -->
<section class="player-panel">
<div class="video-stage">
<video id="player" controls preload="metadata" playsinline></video>
<div class="video-badge" id="videoBadge">
<span class="dot"></span><span id="badgeText">Front</span>
</div>
<div class="video-placeholder" id="videoPlaceholder">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
>
<rect x="2" y="6" width="14" height="12" rx="2" />
<path d="M16 10l6-3v10l-6-3" />
</svg>
<div>Select a clip from the list to begin playback</div>
</div>
</div>
<!-- Synchronized Camera Switching Bar -->
<div class="cam-switch" id="camSwitch">
<span class="cs-label">Camera Angles — Same Timestamp</span>
<div
id="camSwitchButtons"
style="display: flex; flex-wrap: wrap; gap: 8px; width: 100%"
>
<span
style="color: var(--text-muted); font-size: 12.5px; padding: 4px"
>Select a video to unlock synchronized camera switching.</span
>
</div>
</div>
<div class="now-playing" id="nowPlaying" hidden>
<span>Now Playing: <strong id="npName">—</strong></span>
<span class="ts" id="npTime">—</span>
</div>
</section>
<!-- Right: Sidebar & Clip Library -->
<aside class="sidebar">
<div class="cam-tabs" id="camTabs">
<button class="tab active" data-cam="all">
All Views <span class="count" id="countAll">0</span>
</button>
{% for name, data in categorized_videos.items() %}
<button class="tab" data-cam="{{ data.raw_key }}">
{{ name }} <span class="count">{{ data.videos | length }}</span>
</button>
{% endfor %}
</div>
<div class="list-toolbar">
<span id="resultCount">0 clips</span>
<select id="sortSelect" aria-label="Sort clips">
<option value="newest">Newest first</option>
<option value="oldest">Oldest first</option>
<option value="name">Filename A–Z</option>
</select>
</div>
<div class="clip-list" id="clipList">
<!-- Dynamically populated -->
</div>
</aside>
</div>
<!-- Embedded Data Payload from Flask -->
<script type="application/json" id="videoData">
{
{% for name, data in categorized_videos.items() %}
"{{ data.raw_key }}": {
"display": {{ name | tojson }},
"raw_key": {{ data.raw_key | tojson }},
"videos": [
{% for v in data.videos %}
{
"filename": {{ v.filename | tojson }},
"timestamp": {{ v.timestamp | tojson }},
"rel_path": {{ v.rel_path | tojson }},
"url": {{ v.url | tojson }}
}{% if not loop.last %},{% endif %}
{% endfor %}
]
}{% if not loop.last %},{% endif %}
{% endfor %}
}
</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 = "newest";
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 when video finishes
player.addEventListener("ended", function () {
const list = getFiltered();
const i = list.findIndex(function (c) {
return (
current &&
c.cam === current.cam &&
c.timestamp === current.timestamp &&
c.filename === current.filename
);
});
if (i > -1 && list[i + 1]) playClip(list[i + 1]);
});
render();
})();
</script>
</body>
</html>