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]>

2 files changed, 10 insertions, 2 deletions

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;