Let the reader have the captured pictures taken again

A frame taken out of a video is kept for good: that is what makes a dead
favorite cheap to scroll past, and it is also the one thing that can go wrong
with no way out. A picture from the wrong moment, or one kept by a version of
this that would keep a frame with nothing in it, stays on the card for the life
of the item.

So Settings grows a Captured Thumbnails section: what is kept and how much room
it takes, and a button that throws the lot away. The cards on screen go back to
the start of the thumbnail ladder rather than waiting to be scrolled out of the
window and back, which is where a fresh capture comes from, and the session's
memory of which items there was no point asking about goes with the pictures --
otherwise "take them again" would quietly skip every item that failed once.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MPZFnNdHbPGDTqQUNiE4ZN

frontend/js/ui.js

@@ -288,6 +288,11 @@ App.ui = App.ui || {};
         if (otherBtn) otherBtn.classList.remove('active');
 
         if (willOpen) {
+            // What the captured-thumbnail note says is a count, and captures
+            // happen while the drawer is shut, so it is read as it opens.
+            if (!isMenu && typeof App.ui.syncPosterCache === 'function') {
+                App.ui.syncPosterCache();
+            }
             targetDrawer.classList.add('open');
             if (targetBtn) targetBtn.classList.add('active');
             overlay.classList.add('open');
@@ -1696,6 +1701,56 @@ App.ui = App.ui || {};
         });
     };
 
+    // Settings -> Captured Thumbnails. A favorite whose listed picture is gone
+    // gets a frame out of the video instead, kept for good so no later session
+    // pays for it again (see App.posters). Kept for good is also the problem:
+    // a picture taken from the wrong moment, or from a version of this that
+    // kept frames with nothing in them, has no other way out. So the reader
+    // can throw the lot away and have them taken again.
+    const posterCacheNote = function() {
+        if (!App.posters || typeof App.posters.stats !== 'function') return '';
+        const stats = App.posters.stats();
+        if (!stats.count) {
+            return 'No pictures taken from videos yet. A favorite gets one when ' +
+                'its own thumbnail is gone for good.';
+        }
+        const plural = stats.count === 1 ? 'picture' : 'pictures';
+        const kb = Math.max(1, Math.round(stats.bytes / 1024));
+        return `${stats.count} ${plural} kept, ${kb} KB. Throwing them away has ` +
+            'each one taken again from the video the next time its card is shown.';
+    };
+
+    App.ui.syncPosterCache = function() {
+        const status = document.getElementById('clear-posters-status');
+        if (status) status.textContent = posterCacheNote();
+    };
+
+    App.ui.bindPosterCacheControls = function() {
+        const button = document.getElementById('clear-posters-btn');
+        if (!button) return;
+        App.ui.syncPosterCache();
+        button.addEventListener('click', () => {
+            const before = App.posters.stats().count;
+            App.posters.clear();
+            // The cards on screen are still showing what was just thrown away,
+            // so they go back to the start of the thumbnail ladder -- which is
+            // where a fresh capture comes from.
+            if (typeof App.videos.refreshThumbnails === 'function') {
+                App.videos.refreshThumbnails();
+            }
+            if (App.favorites && typeof App.favorites.renderBar === 'function') {
+                App.favorites.renderBar();
+            }
+            const status = document.getElementById('clear-posters-status');
+            if (status) {
+                status.textContent = before
+                    ? `Threw away ${before} ${before === 1 ? 'picture' : 'pictures'}. ` +
+                      'They are being taken again.'
+                    : posterCacheNote();
+            }
+        });
+    };
+
     // Favorites bar header: the sort order (which applies to the bar and the
     // favorites grid alike) and the toggle into that grid.
     App.ui.bindFavoritesControls = function() {
@@ -1721,6 +1776,7 @@ App.ui = App.ui || {};
 
     App.ui.bindGlobalHandlers = function() {
         App.ui.bindBackupImport();
+        App.ui.bindPosterCacheControls();
         App.ui.bindFavoritesControls();
 
         window.toggleDrawer = App.ui.toggleDrawer;