Mathieu MoranandCopilot
600fd41353
- 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]>
135 lines
7.3 KiB
HTML
135 lines
7.3 KiB
HTML
{% extends "base.html" %}
|
|
{% from "components.html" import data_table %}
|
|
|
|
{% block title %}Dashcam - Yaris OBD{% endblock %}
|
|
|
|
{% block content %}
|
|
<h3 class="text-dark mb-3 fw-bold">Dashcam</h3>
|
|
|
|
{# ── Device status bar ───────────────────────────────────────────────── #}
|
|
<div class="card shadow-sm mb-3">
|
|
<div class="card-body py-2 d-flex flex-wrap align-items-center gap-2">
|
|
<i class="fas fa-usb text-muted"></i>
|
|
<span id="dash-device-status" class="me-auto small">Checking for a USB dashcam…</span>
|
|
<button id="dash-scan-btn" class="btn btn-sm btn-secondary" type="button">
|
|
<i class="fas fa-search me-1"></i>Scan
|
|
</button>
|
|
<button id="dash-import-btn" class="btn btn-sm btn-primary" type="button" disabled>
|
|
<i class="fas fa-download me-1"></i>Import all
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{# ── Files on dashcam (collapsible) ─────────────────────────────────── #}
|
|
<div class="card shadow-sm mb-3">
|
|
<div class="card-header py-2 d-flex flex-wrap align-items-center gap-2">
|
|
<button class="btn btn-link text-primary fw-bold p-0 text-decoration-none d-flex align-items-center gap-1"
|
|
type="button" data-bs-toggle="collapse" data-bs-target="#dashcam-files-body"
|
|
aria-expanded="false" aria-controls="dashcam-files-body" id="dashcam-files-toggle">
|
|
<i class="fas fa-chevron-right toggle-icon" style="font-size:.7rem;transition:transform .2s;"></i>
|
|
Files on dashcam
|
|
</button>
|
|
<small id="dash-file-summary" class="text-muted ms-1"></small>
|
|
<div class="ms-auto d-flex gap-1 flex-wrap">
|
|
<button id="dash-files-refresh-btn" class="btn btn-sm btn-outline-secondary" type="button">
|
|
<i class="fas fa-sync-alt"></i>
|
|
</button>
|
|
<button id="dash-select-all-btn" class="btn btn-sm btn-outline-secondary" type="button" disabled>All</button>
|
|
<button id="dash-import-selected-btn" class="btn btn-sm btn-primary" type="button" disabled>
|
|
<i class="fas fa-download me-1"></i>Import
|
|
</button>
|
|
<button id="dash-delete-all-btn" class="btn btn-sm btn-outline-danger" type="button"
|
|
data-confirm="Permanently delete every video from the dashcam? This cannot be undone." disabled>
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="collapse" id="dashcam-files-body">
|
|
<div class="card-body p-0">
|
|
{{ data_table(
|
|
"dashcam-file-list",
|
|
[
|
|
{"key": "selected", "label": "", "sortable": false},
|
|
{"key": "path", "label": "File", "sortable": true},
|
|
{"key": "size", "label": "Size", "sortable": true},
|
|
{"key": "modified", "label": "Modified", "sortable": true},
|
|
{"key": "actions", "label": "", "sortable": false}
|
|
],
|
|
"No videos found",
|
|
"Connect the dashcam in USB storage mode, then refresh this list."
|
|
) }}
|
|
</div>
|
|
<div class="card-footer py-2 d-flex align-items-center gap-2">
|
|
<i class="fas fa-info-circle text-muted small"></i>
|
|
<span id="dash-import-status" class="small text-muted">No import has been run yet.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# ── Imported videos on Pi ───────────────────────────────────────────── #}
|
|
<div class="card shadow-sm mb-3">
|
|
<div class="card-header py-2 d-flex flex-wrap align-items-center gap-2">
|
|
<button class="btn btn-link text-primary fw-bold p-0 text-decoration-none d-flex align-items-center gap-1"
|
|
type="button" data-bs-toggle="collapse" data-bs-target="#local-videos-body"
|
|
aria-expanded="true" aria-controls="local-videos-body" id="local-videos-toggle">
|
|
<i class="fas fa-chevron-down toggle-icon" style="font-size:.7rem;transition:transform .2s;"></i>
|
|
Videos on Pi
|
|
</button>
|
|
<small id="local-video-summary" class="text-muted ms-1">Loading…</small>
|
|
<button id="local-videos-refresh-btn" class="btn btn-sm btn-outline-secondary ms-auto" type="button">
|
|
<i class="fas fa-sync-alt"></i>
|
|
</button>
|
|
</div>
|
|
<div class="collapse show" id="local-videos-body">
|
|
<div class="card-body p-0">
|
|
{{ data_table(
|
|
"local-video-list",
|
|
[
|
|
{"key": "thumbnail", "label": "", "sortable": false},
|
|
{"key": "path", "label": "File", "sortable": true},
|
|
{"key": "size", "label": "Size", "sortable": true},
|
|
{"key": "modified", "label": "Date", "sortable": true},
|
|
{"key": "uploaded", "label": "Upload", "sortable": true},
|
|
{"key": "actions", "label": "", "sortable": false}
|
|
],
|
|
"No imported videos",
|
|
"Import videos from the connected dashcam to browse and play them here."
|
|
) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# ── Video player modal ──────────────────────────────────────────────── #}
|
|
<div class="modal fade" id="video-player-modal" tabindex="-1" aria-labelledby="video-player-modal-title" aria-modal="true" role="dialog">
|
|
<div class="modal-dialog modal-xl modal-dialog-centered">
|
|
<div class="modal-content bg-dark">
|
|
<div class="modal-header border-secondary py-2">
|
|
<h6 class="modal-title text-light text-truncate me-2" id="video-player-modal-title"></h6>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body p-0">
|
|
<video id="local-video-player" class="w-100 d-block" style="max-height:75vh;background:#000;"
|
|
controls preload="metadata"></video>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="{{ url_for('static', filename='js/dash.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/local-videos.js') }}"></script>
|
|
<script>
|
|
// Rotate chevron icons on collapse toggle
|
|
document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(function (btn) {
|
|
const target = document.querySelector(btn.getAttribute('data-bs-target'));
|
|
if (!target) return;
|
|
const icon = btn.querySelector('.toggle-icon');
|
|
if (!icon) return;
|
|
target.addEventListener('show.bs.collapse', function () { icon.style.transform = 'rotate(90deg)'; });
|
|
target.addEventListener('hide.bs.collapse', function () { icon.style.transform = 'rotate(0deg)'; });
|
|
// Init state
|
|
if (target.classList.contains('show')) icon.style.transform = 'rotate(90deg)';
|
|
});
|
|
</script>
|
|
{% endblock %} |