Redesign ring header into structured 2-row grid, show full now-playing title and thumbnail

Ring header restructured from flat 1fr/auto grid into two semantic rows:
- Info row: title + badges left, progress counter right
- Controls row: Reverse and Autoplay toggles right-aligned

Now-playing row shows full title (no line-clamp truncation) and product
thumbnail. JS reads og:image meta tag for current thumbnail during SPA
navigation. SPA updates for edit button, download button, file info,
comments, and canonical link. Footer and docs updates.

docs/JAVASCRIPT.md

@@ -24,6 +24,33 @@ Located in `make_post_sell/static/js/`:
 - Functions: `previewAjax()`, `sendPreview()`
 - Uses fetch API for AJAX calls to `/markup-editor-preview`
 
+### watch.js
+- Watch mode continuous playback engine
+- Used by: `product.j2` when shop has `watch_mode_enabled`
+- Discovery ring with deterministic content traversal per shop
+- Crossfade transitions between media (3s, 60 steps)
+- Countdown overlay (7s) between items
+- Queue management: add, remove, reorder
+- Two-phase preload: JSON metadata fetch, then media buffering 30s before end
+- Recently-played filtering via localStorage (4-hour expiry)
+- Handles video, audio, and static content (PDFs, images)
+- Autoplay toggle persisted in localStorage
+- Ring state (position, direction, history) persisted in localStorage
+
+### comments.js
+- AJAX comment submission (progressive enhancement)
+- Intercepts comment form POST, submits via `fetch()` with `X-Requested-With: XMLHttpRequest`
+- Server returns JSON (HTTP 201) for AJAX requests
+- Inserts new comment into DOM without page reload (preserves media playback)
+- Falls back to normal POST + redirect without JS or on error
+
+### player.js
+- Pop-out media player with draggable window
+- Prev/next navigation and keyboard shortcuts
+- Auto-advance for images/PDFs (60s timer)
+- Preloads adjacent media for instant switching
+- Used by: `/random` and `/tv` endpoints
+
 ## Inline JavaScript by Template
 
 ### base.j2
@@ -84,6 +111,19 @@ Located in `make_post_sell/static/js/`:
 - Google Analytics (gtag.js)
 - Only loaded if shop has configured analytics
 
+### product.j2
+**Purpose:** Inline video playback
+
+- `playInline()` replaces thumbnail container with `<video>` element on click
+- Used for preview playback on product pages without watch mode
+- Loads `watch.js` when shop has `watch_mode_enabled`
+
+### snippets/comments.j2
+**Purpose:** Comment form
+
+- Loads `comments.js` async for AJAX submission
+- Uses `js-only` class pattern for elements requiring JS
+
 ### snippets/optional-javascript.j2
 **Purpose:** Optional JS loading
 
@@ -111,8 +151,6 @@ Pages work without JavaScript where possible:
 - Payment provider toggles use `<details>` (pure CSS)
 - Forms submit normally without JS
 - JS enhances UX (copy buttons, QR codes, live previews)
-
-## Future Improvements
-
-- Convert remaining checkbox toggles to `<details>` elements
-- Consider removing Google Analytics option (privacy)
+- Comment forms POST normally without JS; AJAX submission preserves playback with JS
+- Watch mode elements use `js-only` class (hidden via `<noscript>` stylesheet)
+- Video thumbnails link directly to media without JS; inline playback with JS