Add auto-thumbnails, library-wide remaining time, backup restore

Auto-generated course thumbnails: find_course_thumbnail() falls back to
grabbing a frame from a course's first video via ffmpeg when there's no
manual cover image, cached to .offlineu_thumbnail.jpg so it only ever
runs once. Folded into the "Precompute" prewarm button, now "Precompute
Lengths & Cover Art".

Library-wide "Remaining" stat: sums every course's already-cached
duration (no ffprobe, just a JSON read) into the dashboard's Library
Stats card, alongside the existing "Watched" figure.

Backup restore: new /api/backup/restore endpoint and a "Choose Backup
File..." control in Settings, with zip-slip and missing-course guards.
Also fixed a gap in the export itself - next_up.json and
outline_config.json weren't being backed up before, so restore wouldn't
have been a true round trip.

Move Surprise Me from a full-width button above the course list to a
dice-icon button in the dashboard header, swapping with the course-name
badge depending on whether a course is loaded.

Update README to cover all of the above.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-23 22:50:48 -04:00
co-authored by Claude Sonnet 5
parent 01a965c0f1
commit acabb89981
5 changed files with 261 additions and 49 deletions
+27 -14
View File
@@ -136,6 +136,25 @@
white-space: nowrap;
}
.header-icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: 50%;
background: var(--bg-primary);
border: 1px solid var(--accent);
color: var(--accent);
text-decoration: none;
transition: background 0.2s, color 0.2s;
}
.header-icon-btn:hover {
background: var(--accent);
color: white;
}
.course-name-heading {
/* course.name is the raw folder name, unlike lesson titles
(cleaned up via _clean_lesson_name) - real course folders are
@@ -288,14 +307,6 @@
box-sizing: border-box;
}
.surprise-me-btn {
display: block;
width: 100%;
text-align: center;
font-size: 1.05em;
font-weight: 600;
box-sizing: border-box;
}
.progress-bar {
background: #444;
@@ -982,6 +993,8 @@
</a>
{% if course %}
<div class="header-course-badge">{{ course.name }}</div>
{% elif library_stats and library_stats.total_courses %}
<a href="/random-pick" class="header-icon-btn" title="Surprise Me - random incomplete course">{{ icons.icon('dice', 20) }}</a>
{% endif %}
</div>
</div>
@@ -1153,12 +1166,6 @@
</div>
{% endmacro %}
{% if library_stats and library_stats.total_courses %}
<div class="container">
<a class="btn surprise-me-btn" href="/random-pick">{{ icons.icon('dice', 16) }} Surprise Me</a>
</div>
{% endif %}
<div class="container">
<div class="card" id="library-card">
<h2><span class="card-header-label">{{ icons.icon('grid') }}Your Courses</span></h2>
@@ -1212,6 +1219,12 @@
<div class="stats-tile-value">{{ library_stats.watched_display }}</div>
<div class="stats-tile-label">Watched</div>
</div>
{% if library_stats.remaining_display %}
<div class="stats-tile">
<div class="stats-tile-value">{{ library_stats.remaining_display }}</div>
<div class="stats-tile-label">Remaining</div>
</div>
{% endif %}
<div class="stats-tile">
<div class="stats-tile-value">{{ library_stats.streak_days }}</div>
<div class="stats-tile-label">Day streak</div>