fix(dashcam): range-request video streaming, modal player, async thumbnails
- app.py: replace send_file with manual Range-aware chunked generator;
returns 206 on partial requests so browsers can seek/buffer properly.
Thumbnail route returns 202 while ffmpeg is generating.
- app_video.py: thumbnail generation moved to background gevent greenlet
(_generate_thumbnail_bg). get_thumbnail_path returns immediately with
RuntimeError('generating') if not cached; ffmpeg only ever runs once
per video (result cached in dash/thumbnails/).
- dash.html: replaced bottom card player with Bootstrap modal (modal-xl,
centered, dark bg) — video pops up in place regardless of scroll position.
- local-videos.js: rewritten to use Bootstrap modal; thumbnail loader
polls with fetch() and retries on 202 every 2s (up to 15x) instead of
setting img.src directly (which can't detect 202).
Co-authored-by: Copilot <[email protected]>
This commit is contained in:
Mathieu Moran
+200
-10
@@ -4,23 +4,213 @@
|
||||
const summary = document.getElementById("local-video-summary");
|
||||
const body = document.querySelector("#local-video-list [data-data-list-body]");
|
||||
const refreshButton = document.getElementById("local-videos-refresh-btn");
|
||||
const playerPanel = document.getElementById("local-video-player-panel");
|
||||
const playerTitle = document.getElementById("local-video-player-title");
|
||||
const player = document.getElementById("local-video-player");
|
||||
const closePlayerButton = document.getElementById("local-video-player-close");
|
||||
let playingPath = null;
|
||||
|
||||
// ── Modal player ──────────────────────────────────────────────────────────
|
||||
const modalEl = document.getElementById("video-player-modal");
|
||||
const modalTitle = document.getElementById("video-player-modal-title");
|
||||
const player = document.getElementById("local-video-player");
|
||||
const bsModal = new bootstrap.Modal(modalEl);
|
||||
|
||||
modalEl.addEventListener("hidden.bs.modal", function () {
|
||||
player.pause();
|
||||
player.removeAttribute("src");
|
||||
player.load();
|
||||
playingPath = null;
|
||||
});
|
||||
|
||||
function playVideo(path) {
|
||||
playingPath = path;
|
||||
modalTitle.textContent = path.split("/").pop();
|
||||
player.src = `/api/local-video/file?path=${encodeURIComponent(path)}`;
|
||||
bsModal.show();
|
||||
player.load();
|
||||
player.play().catch(function () {});
|
||||
}
|
||||
|
||||
// ── Thumbnail loading with retry on 202 ──────────────────────────────────
|
||||
const THUMB_RETRY_MS = 2000;
|
||||
const THUMB_MAX_RETRIES = 15;
|
||||
|
||||
function loadThumbnail(image) {
|
||||
const url = `/api/local-video/thumbnail?path=${encodeURIComponent(image.dataset.path)}`;
|
||||
let attempts = 0;
|
||||
|
||||
function attempt() {
|
||||
fetch(url)
|
||||
.then(function (resp) {
|
||||
if (resp.status === 202 && attempts < THUMB_MAX_RETRIES) {
|
||||
attempts++;
|
||||
setTimeout(attempt, THUMB_RETRY_MS);
|
||||
return;
|
||||
}
|
||||
if (!resp.ok) {
|
||||
image.hidden = true;
|
||||
return;
|
||||
}
|
||||
return resp.blob().then(function (blob) {
|
||||
image.src = URL.createObjectURL(blob);
|
||||
});
|
||||
})
|
||||
.catch(function () {
|
||||
image.hidden = true;
|
||||
});
|
||||
}
|
||||
attempt();
|
||||
}
|
||||
|
||||
const thumbnailObserver = new IntersectionObserver(function (entries, observer) {
|
||||
entries.forEach(function (entry) {
|
||||
if (!entry.isIntersecting) {
|
||||
return;
|
||||
}
|
||||
const image = entry.target;
|
||||
image.src = `/api/local-video/thumbnail?path=${encodeURIComponent(image.dataset.path)}`;
|
||||
observer.unobserve(image);
|
||||
if (!entry.isIntersecting) return;
|
||||
observer.unobserve(entry.target);
|
||||
loadThumbnail(entry.target);
|
||||
});
|
||||
}, { rootMargin: "200px" });
|
||||
|
||||
// ── Utilities ─────────────────────────────────────────────────────────────
|
||||
function fetchJson(url, options) {
|
||||
return fetch(url, options).then(function (response) {
|
||||
return response.json().then(function (data) {
|
||||
if (!response.ok) {
|
||||
throw new Error(data.message || data.error || data.status || `HTTP ${response.status}`);
|
||||
}
|
||||
return data;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function textCell(text) {
|
||||
const cell = document.createElement("td");
|
||||
cell.textContent = text;
|
||||
return cell;
|
||||
}
|
||||
|
||||
// ── File list rendering ───────────────────────────────────────────────────
|
||||
function renderFiles(result) {
|
||||
thumbnailObserver.disconnect();
|
||||
body.replaceChildren();
|
||||
const files = result.files || [];
|
||||
let uploadedCount = 0;
|
||||
|
||||
files.forEach(function (file) {
|
||||
const row = document.createElement("tr");
|
||||
row.dataset.path = file.path;
|
||||
|
||||
// Thumbnail cell
|
||||
const preview = document.createElement("td");
|
||||
const image = document.createElement("img");
|
||||
image.className = "local-video-thumbnail";
|
||||
image.alt = "";
|
||||
image.dataset.path = file.path;
|
||||
preview.appendChild(image);
|
||||
row.appendChild(preview);
|
||||
thumbnailObserver.observe(image);
|
||||
|
||||
// File name
|
||||
const nameCell = document.createElement("td");
|
||||
nameCell.className = "dash-col-file";
|
||||
nameCell.textContent = file.path;
|
||||
row.appendChild(nameCell);
|
||||
|
||||
// Size
|
||||
const sizeCell = textCell(YarisUI.formatBytes(file.size));
|
||||
sizeCell.className = "dash-col-size";
|
||||
row.appendChild(sizeCell);
|
||||
|
||||
// Date
|
||||
const dateCell = textCell(new Date(file.modified_at * 1000).toLocaleString());
|
||||
dateCell.className = "dash-col-date";
|
||||
row.appendChild(dateCell);
|
||||
|
||||
// Upload badge
|
||||
const upload = document.createElement("td");
|
||||
upload.className = "dash-col-upload";
|
||||
const badge = document.createElement("span");
|
||||
badge.className = file.uploaded ? "badge bg-success" : "badge bg-warning text-dark";
|
||||
badge.textContent = file.uploaded ? "✓" : "…";
|
||||
upload.appendChild(badge);
|
||||
row.appendChild(upload);
|
||||
if (file.uploaded) uploadedCount++;
|
||||
|
||||
// Actions
|
||||
const actions = document.createElement("td");
|
||||
actions.className = "data-list-actions";
|
||||
|
||||
const playButton = document.createElement("button");
|
||||
playButton.type = "button";
|
||||
playButton.className = "btn btn-sm btn-outline-primary btn-icon-mobile";
|
||||
playButton.dataset.playPath = file.path;
|
||||
playButton.innerHTML = '<i class="fas fa-play"></i><span class="btn-label"> Play</span>';
|
||||
actions.appendChild(playButton);
|
||||
|
||||
const deleteButton = document.createElement("button");
|
||||
deleteButton.type = "button";
|
||||
deleteButton.className = "btn btn-sm btn-outline-danger btn-icon-mobile";
|
||||
deleteButton.dataset.deleteLocalPath = file.path;
|
||||
deleteButton.dataset.confirm = `Delete the local Pi copy of "${file.path}"?`;
|
||||
deleteButton.innerHTML = '<i class="fas fa-trash"></i><span class="btn-label"> Del</span>';
|
||||
actions.appendChild(deleteButton);
|
||||
row.appendChild(actions);
|
||||
body.appendChild(row);
|
||||
});
|
||||
|
||||
summary.textContent = `${files.length} video(s), ${YarisUI.formatBytes(result.total_size || 0)} total, ${uploadedCount} uploaded`;
|
||||
if (result.retention_days > 0) {
|
||||
summary.textContent += `; > ${result.retention_days}d uploaded auto-deleted`;
|
||||
}
|
||||
if (result.errors && result.errors.length) {
|
||||
summary.textContent += ` (${result.errors.length} error(s))`;
|
||||
}
|
||||
}
|
||||
|
||||
function refreshFiles() {
|
||||
refreshButton.disabled = true;
|
||||
summary.textContent = "Loading...";
|
||||
return fetchJson("/api/local-videos")
|
||||
.then(renderFiles)
|
||||
.catch(function (error) {
|
||||
body.replaceChildren();
|
||||
summary.textContent = `Unable to list local videos: ${error.message}`;
|
||||
})
|
||||
.finally(function () {
|
||||
refreshButton.disabled = false;
|
||||
});
|
||||
}
|
||||
|
||||
function deleteVideo(path) {
|
||||
return fetchJson("/api/local-video", {
|
||||
method: "DELETE",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ path }),
|
||||
}).then(function () {
|
||||
if (playingPath === path) bsModal.hide();
|
||||
return refreshFiles();
|
||||
}).catch(function (error) {
|
||||
summary.textContent = `Local delete failed: ${error.message}`;
|
||||
});
|
||||
}
|
||||
|
||||
body.addEventListener("click", function (event) {
|
||||
const playButton = event.target.closest("[data-play-path]");
|
||||
if (playButton) {
|
||||
playVideo(playButton.dataset.playPath);
|
||||
return;
|
||||
}
|
||||
const deleteButton = event.target.closest("[data-delete-local-path]");
|
||||
if (deleteButton) {
|
||||
if (!confirm(deleteButton.dataset.confirm)) return;
|
||||
deleteButton.disabled = true;
|
||||
deleteVideo(deleteButton.dataset.deleteLocalPath).finally(function () {
|
||||
deleteButton.disabled = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
refreshButton.addEventListener("click", refreshFiles);
|
||||
refreshFiles();
|
||||
}());
|
||||
|
||||
|
||||
function fetchJson(url, options) {
|
||||
return fetch(url, options).then(function (response) {
|
||||
return response.json().then(function (data) {
|
||||
|
||||
Reference in New Issue
Block a user