Videos: know what a clip costs before fetching it; vertical clips only

- What a clip costs is learned up front: the post's imeta (size, dim,
  image) when it says, else one 64 KB ranged request — the total from
  Content-Range, whether ranges are served, whether the MP4's index
  (moov) comes before its data, and the picture size from the track
  header. Up to three at a time; remembered across sessions. It also
  replaces the player-based shape probe the feed ran on every clip.
- Clips over 25 MB (8 MB on 2G/3G, 3 MB with data saver), above 1080p,
  index-last files over 8 MB from servers without ranges, or clips that
  couldn't be measured wait for a tap: a cover saying what they cost
  ("50 MB", "4K"). Settings → Nostr → Videos: Autoplay large videos.
- The pager loads only the clip on screen in full; the next gets its
  opening if within budget; everything else holds nothing. Sizes are
  asked three slides ahead.
- Feed clips fetch nothing until they're about to play (preload none),
  with the post's still as a poster.
- Video grid tiles show a first frame only for small clips that start
  quickly; others show their cost.
- Videos lists only clips known to stand taller than wide; one of unknown
  shape is measured and joins when it qualifies; choosing Videos with none
  known yet opens the pager on the first that turns up.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01ULQZS9MQa6iAsXnrJUD9Du

1 files changed, 17 insertions, 0 deletions

diff --git a/src/style.css b/src/style.css
index f8987f2..2f89590 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1443,3 +1443,20 @@ body::after {
 .media-pager.quiet .mp-top .mp-x { opacity: 0; pointer-events: none; }
 .media-pager.quiet .mp-top .mp-sound { pointer-events: auto; }
 .media-pager.quiet.show .mp-top .mp-x { opacity: 1; pointer-events: auto; }
+
+/* a clip that waits for a tap: what it costs, over its (blank or still) box */
+.vid-heavy {
+  position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; border: 0; border-radius: inherit;
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
+  background: rgba(0, 0, 0, .45); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
+}
+.vid-heavy-play {
+  width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .2);
+  display: flex; align-items: center; justify-content: center; font-size: 22px; padding-left: 4px;
+}
+.note-video-box .vid-heavy { min-height: 120px; }
+.media-tile-cost {
+  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
+  color: var(--muted); font-size: 12px; font-weight: 600; background: var(--surface2);
+}