Videos: a desktop-sized window defaults to every shape (a phone keeps to its way round; the choice is stored only when it differs from the device's default). A clip's shape falls back to its still's proportions, so leaving All shapes finds the clips known. The grid's pager keeps a clip of unknown shape out until measured, as the grid does (d898efb let an unmeasured landscape clip into a phone's vertical pager).

Co-Authored-By: Claude Opus 5.5 <[email protected]>

3 files changed, 29 insertions, 7 deletions

diff --git a/src/features/messages.js b/src/features/messages.js
index c8b5683..2b175e2 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -13918,9 +13918,12 @@ export function messagesFeature(ctx) {
   // videos by default on a phone that's in vertical orientation and only
   // horizontal videos if the phone is in landscape but have some kind of
   // control to toggle the ability to see all videos".)
-  const CLIPS_FIT_KEY = 'coinos-clips-fit'; // 'all', or unset: the screen's way round
-  const clipsAll = () => { try { return localStorage.getItem(CLIPS_FIT_KEY) === 'all'; } catch { return false; } };
-  const setClipsAll = (all) => { try { if (all) localStorage.setItem(CLIPS_FIT_KEY, 'all'); else localStorage.removeItem(CLIPS_FIT_KEY); } catch {} };
+  // On a desktop-sized window every shape is the default (Adam, 2026-10-22:
+  // the justified rows hold both); a phone keeps to its way round.
+  const CLIPS_FIT_KEY = 'coinos-clips-fit'; // 'all', 'fit' (the screen's way round), or unset: the device's default
+  const bigWindow = () => { try { return matchMedia('(min-width: 1000px) and (min-height: 600px)').matches; } catch { return false; } };
+  const clipsAll = () => { try { const v = localStorage.getItem(CLIPS_FIT_KEY); return v === 'all' || (v !== 'fit' && bigWindow()); } catch { return bigWindow(); } };
+  const setClipsAll = (all) => { try { if (all === bigWindow()) localStorage.removeItem(CLIPS_FIT_KEY); else localStorage.setItem(CLIPS_FIT_KEY, all ? 'all' : 'fit'); } catch {} };
   const screenTall = () => window.innerHeight >= window.innerWidth;
   const clipSize = (url) => {
     const d = videoInfo.get(url) || {};
@@ -13928,7 +13931,13 @@ export function messagesFeature(ctx) {
     const w = k && (k.w || k.width), hh = k && (k.h || k.height);
     return w && hh ? { w, h: hh } : null;
   };
-  const clipShape = (url) => { const z = clipSize(url); return z ? (z.h > z.w ? 'tall' : z.h < z.w ? 'wide' : 'square') : null; };
+  // (no size yet: the still's proportions, which a grid of every shape has
+  // loaded without measuring anything — so going back to one shape finds
+  // the clips' shapes known)
+  const clipShape = (url) => {
+    const z = clipSize(url), r = z ? z.w / z.h : posterAr.get(url);
+    return r ? (r < 0.99 ? 'tall' : r > 1.01 ? 'wide' : 'square') : null;
+  };
   // width over height, kept between a phone's upright 9:16 and a cinema 2:1
   // (a stray 32:9 or 1:4 would make a tile a sliver); unknown: a square
   // (until the clip's size is known, the still's own proportions: the
@@ -15736,8 +15745,13 @@ export function messagesFeature(ctx) {
   function pagerFit() {
     if (!pager) return;
     const cur = pager.cur || pager.anchor, cg = cur && cur.closest('.mp-group');
+    // the grid's pager goes by the grid's rule: a clip of a shape not yet
+    // known stays out until it's measured (fitClip measures it); a page's
+    // pager shows one until it's known not to fit
+    const strict = pager.kind === 'videos' && !pagerSource();
+    const ok = (u) => (strict ? fitClip(u) : clipFits(u) !== false);
     for (const g of pagerGroups(true)) {
-      const fits = g._opened || g === cg || [...g._row.children].some((s) => { const m = s.querySelector('.mp-media'); return !m || clipFits(m.getAttribute('data-full') || m.getAttribute('data-src')) !== false; });
+      const fits = g._opened || g === cg || [...g._row.children].some((s) => { const m = s.querySelector('.mp-media'); return !m || ok(m.getAttribute('data-full') || m.getAttribute('data-src')); });
       pagerToggleGroup(g, 'mp-off', !fits);
     }
   }
diff --git a/tools/feed-media-views-test.js b/tools/feed-media-views-test.js
index 87bf3cf..1eac95c 100644
--- a/tools/feed-media-views-test.js
+++ b/tools/feed-media-views-test.js
@@ -95,7 +95,8 @@ const pagerState = () => page.evaluate(() => {
   const p = document.querySelector('.media-pager');
   if (!p) return null;
   const sc = p.querySelector('.mp-scroll');
-  const slides = [...sc.querySelectorAll('.mp-slide')]; // (not the loading screen at the end)
+  // (not the loading screen at the end, nor a clip held out for its shape)
+  const slides = [...sc.querySelectorAll('.mp-slide')].filter((x) => !x.closest('.mp-off'));
   const i = slides.findIndex((x) => { const r = x.getBoundingClientRect(); return Math.abs(r.top) < 4 && Math.abs(r.left) < 4; }); // the slide on screen
   const vids = slides.map((s) => s.querySelector('video'));
   return { n: slides.length, i, src: (slides[i]?.querySelector('.mp-media')?.getAttribute('data-src') || '').split('/').pop(),
@@ -201,7 +202,7 @@ try {
   const vi = await info();
   check('a probe reads the size, ranges, layout and picture size from 64 KB', vi['a.mp4']?.probed && vi['a.mp4'].ranges && vi['a.mp4'].faststart
     && vi['a.mp4'].size > 1000 && vi['a.mp4'].w === 360 && vi['a.mp4'].h === 640, JSON.stringify(vi['a.mp4']));
-  check('the landscape clip is left out of Videos', !(await page.evaluate(() => [...document.querySelectorAll('.media-pager video')].some((v) => /slow/.test(v.getAttribute('data-src'))))));
+  check('the landscape clip is left out of Videos', !(await page.evaluate(() => [...document.querySelectorAll('.media-pager video')].some((v) => /slow/.test(v.getAttribute('data-src')) && !v.closest('.mp-off')))));
   check('an index-last file from a server without ranges is seen for what it is', vi['slow.mp4']?.probed && vi['slow.mp4'].faststart === false && vi['slow.mp4'].ranges === false, JSON.stringify(vi['slow.mp4']));
   check('the 50 MB clip is known as such before any of it plays', vi['c.mp4']?.size === 50000000, JSON.stringify(vi['c.mp4']));
   await page.keyboard.press('ArrowDown'); await sleep(1200);
diff --git a/tools/media-grid-dups-test.js b/tools/media-grid-dups-test.js
index 948e727..205a4a5 100644
--- a/tools/media-grid-dups-test.js
+++ b/tools/media-grid-dups-test.js
@@ -94,6 +94,12 @@ try {
   await page.evaluate(() => document.querySelector('.app-nav-button[aria-label="Feed"]').click());
   check('the clips are in the feed', await waitFor(() => document.querySelectorAll('.notes-feed video.note-video').length >= 8, null, 20000));
   await page.evaluate(() => document.querySelector('.media-mode[data-mode="videos"]').click());
+  // a desktop-sized window starts on every shape (justified rows, the tall clip in)
+  check('a desktop starts on every shape', await waitFor(() => !!document.querySelector('.media-grid.justified') && [...document.querySelectorAll('.media-grid .media-tile')].some((t) => t.getAttribute('data-key').endsWith('/tall.webm')), null, 15000));
+  // the rest starts from the screen's way round: wide only
+  await page.evaluate(() => { localStorage.setItem('coinos-clips-fit', 'fit'); document.querySelector('.media-mode[data-mode="images"]').click(); });
+  await sleep(300);
+  await page.evaluate(() => document.querySelector('.media-mode[data-mode="videos"]').click());
   await waitFor(() => document.querySelectorAll('.media-grid .media-tile').length >= 3, null, 15000);
   await waitFor(() => document.querySelectorAll('.media-grid .media-tile').length === 3, null, 8000);
   await sleep(1500);
@@ -110,6 +116,7 @@ try {
   await page.evaluate(() => document.querySelector('.mp-fit').click());
   check('…and "All shapes" brings it in', await waitFor(() => { const s = [...document.querySelectorAll('.mp-slide')].find((x) => x.getAttribute('data-k').endsWith('/tall.webm')); return !!s && !s.closest('.mp-group').classList.contains('mp-off'); }, null, 3000));
   await page.keyboard.press('Escape');
+  check('…which, being the desktop\'s default, is kept as no setting at all', await page.evaluate(() => localStorage.getItem('coinos-clips-fit') === null));
   check('the grid has it too', await waitFor(() => [...document.querySelectorAll('.media-grid .media-tile')].some((t) => t.getAttribute('data-key').endsWith('/tall.webm')), null, 5000));
   const rows = () => page.evaluate(() => {
     const g = document.querySelector('.media-grid'), gw = g.getBoundingClientRect().width;