Title updates and fix the ugly close button

This commit is contained in:
dirwin31
2026-08-27 17:05:45 -07:00
parent 2d93c29890
commit f5ba6362ce
5 changed files with 45 additions and 13 deletions
@@ -1225,12 +1225,32 @@
line-height: 1.25;
}
.dashcam-player-overlay .dashcam-player-close,
.dashcam-player-close {
align-items: center;
background: transparent;
border: 0;
color: var(--text-muted);
box-shadow: none;
color: var(--danger-fg, #e05577);
cursor: pointer;
font-size: 2rem;
display: inline-flex;
font-size: 2.75rem;
font-weight: 300;
justify-content: center;
line-height: 0.8;
margin: 0;
padding: 0 0.25rem;
transition: color var(--transition-fast, 0.15s ease), transform var(--transition-fast, 0.15s ease), opacity var(--transition-fast, 0.15s ease);
}
.dashcam-player-overlay .dashcam-player-close:hover,
.dashcam-player-overlay .dashcam-player-close:focus-visible,
.dashcam-player-close:hover,
.dashcam-player-close:focus-visible {
background: transparent;
color: var(--danger-hover-bg, #ff6b8b);
outline: none;
transform: scale(1.15);
}
.dashcam-video-shell {
@@ -205,11 +205,13 @@ async function renameRoute(route) {
return
}
const updatedRoute = normalizeRoute({ ...route, timestamp: newName, isCustomName: true })
const payload = await response.json().catch(() => ({}))
const savedName = payload.name || newName
const updatedRoute = normalizeRoute({ ...route, timestamp: savedName, isCustomName: true })
replaceRoute(updatedRoute)
closeDialog(dialog)
const title = overlay?.querySelector(".media-player-title-text")
if (title) title.textContent = newName
if (title) title.textContent = savedName
showSnackbar("Route renamed!")
}
}
@@ -301,7 +303,7 @@ async function openOverlay(route) {
<button class="dashcam-title-rename action-rename" type="button" title="Rename route" aria-label="Rename route"><i class="bi bi-pencil"></i></button>
</div>
</div>
<button class="dashcam-player-close action-close" type="button" aria-label="Close player">&times;</button>
<button class="dashcam-player-close" type="button" aria-label="Close player">&times;</button>
</header>
<div class="dashcam-video-shell">
<video class="dashcam-video active" controls muted playsinline preload="metadata"></video>
@@ -597,7 +599,7 @@ async function openOverlay(route) {
overlay.addEventListener("click", event => { if (event.target === overlay) closeOverlay() })
document.addEventListener("keydown", closeOnEscape)
overlay._closeOnEscape = closeOnEscape
overlay.querySelector(".action-close").onclick = closeOverlay
overlay.querySelector(".dashcam-player-close").onclick = closeOverlay
overlay.querySelector(".action-delete").onclick = () => deleteRoute(state.selectedRoute || route)
overlay.querySelector(".action-rename").onclick = () => renameRoute(state.selectedRoute || route)
@@ -876,10 +878,10 @@ export function RouteRecordings() {
</div>
<div class="dashcam-card-body">
<div class="dashcam-route-title-row">
<h3 title="${route.displayName}">${route.displayName}</h3>
${route.isCustomName ? html`<span class="dashcam-custom-badge" title="Custom name"><i class="bi bi-tag-fill"></i></span>` : ""}
<h3 title="${() => route.displayName}">${() => route.displayName}</h3>
${() => route.isCustomName ? html`<span class="dashcam-custom-badge" title="Custom name"><i class="bi bi-tag-fill"></i></span>` : ""}
</div>
${route.isCustomName ? html`<p class="dashcam-card-date">${route.displayDate}</p>` : ""}
${() => route.isCustomName ? html`<p class="dashcam-card-date">${route.displayDate}</p>` : ""}
<div class="dashcam-route-meta-pills">
<span class="meta-pill duration-pill"><i class="bi bi-clock"></i> ${formatApproxDuration(route.approxDurationSeconds)}</span>
<span class="meta-pill segments-pill"><i class="bi bi-collection-play"></i> ${route.segmentCount} seg</span>
@@ -910,10 +912,10 @@ export function RouteRecordings() {
</div>
<div class="dashcam-route-info">
<div class="dashcam-route-title-row">
<h3 class="dashcam-route-title" title="${route.displayName}">${route.displayName}</h3>
${route.isCustomName ? html`<span class="dashcam-custom-badge" title="Custom name"><i class="bi bi-tag-fill"></i> Custom</span>` : ""}
<h3 class="dashcam-route-title" title="${() => route.displayName}">${() => route.displayName}</h3>
${() => route.isCustomName ? html`<span class="dashcam-custom-badge" title="Custom name"><i class="bi bi-tag-fill"></i> Custom</span>` : ""}
</div>
${route.isCustomName ? html`<p class="dashcam-route-subdate"><i class="bi bi-calendar3"></i> ${route.displayDate}</p>` : ""}
${() => route.isCustomName ? html`<p class="dashcam-route-subdate"><i class="bi bi-calendar3"></i> ${route.displayDate}</p>` : ""}
<div class="dashcam-route-meta-pills">
<span class="meta-pill duration-pill" title="Estimated duration"><i class="bi bi-clock"></i> ${formatApproxDuration(route.approxDurationSeconds)}</span>
<span class="meta-pill segments-pill" title="Segments recorded"><i class="bi bi-collection-play"></i> ${route.segmentCount} segment${route.segmentCount === 1 ? "" : "s"}</span>
@@ -326,6 +326,7 @@ def test_rename_and_reset_keep_logs_and_use_both_reset_urls(monkeypatch, tmp_pat
renamed = client.post("/api/routes/rename", json={"old": ROUTE_NAME, "new": "New name"})
assert renamed.status_code == 200
assert renamed.get_json()["name"] == "New_name"
assert all((segment / "New_name").exists() for segment in segments)
assert all((segment / "qlog.zst").read_bytes() == b"log" for segment in segments)
@@ -14,6 +14,7 @@ import subprocess
import pytest
HELPERS_PATH = Path(__file__).resolve().parent.parent / "assets" / "components" / "recordings" / "dashcam_routes_helpers.js"
COMPONENT_PATH = HELPERS_PATH.with_name("dashcam_routes.js")
# node infers ESM from `export` syntax in a bare .js file from 22.7 on, so the helpers
# need no package.json and stay a normal asset next to the component that imports them.
@@ -69,6 +70,14 @@ def test_helpers_module_is_a_plain_js_asset():
assert not list(HELPERS_PATH.parent.glob("*.mjs"))
def test_route_titles_and_custom_name_badges_are_reactive():
source = COMPONENT_PATH.read_text(encoding="utf-8")
# Both grid and row views must subscribe directly to the renamed route fields.
assert source.count('${() => route.displayName}') >= 4
assert source.count('${() => route.isCustomName ? html`') >= 4
def test_groups_routes_into_today_yesterday_dates_and_unknown():
groups = evaluate('''
const routes = [
+1 -1
View File
@@ -6644,7 +6644,7 @@ def setup(app):
return jsonify({"error": f"Error creating new name file: {e}"}), 500
if renamed:
return jsonify({"message": "Route renamed successfully!"}), 200
return jsonify({"message": "Route renamed successfully!", "name": new_name}), 200
else:
return jsonify({"error": "Route not found"}), 404