Media sources wait until the node is in the page; thumbnails use the cache.

Every render builds a fresh tree to diff against the live one, and a media
element starts downloading the moment its src is set, even off the
document: a sixteen-second feed scroll built 204 <video> and 1,416 <img>
elements whose loads the morph then threw away — 375 cancelled video
range requests, and full re-downloads from hosts that send no cache
headers. h() now puts the source on data-lazy-src and it becomes src only
once the node is in the page (render promotes it; a MutationObserver covers
nodes appended by hand); the morph treats the two as one attribute.

The thumbnail maker fetched every original with cache: 'reload' (38 MB in
one scroll); the face was just painted from that URL, so the cache serves.
holdScroll now recovers an anchor row that a large insert above pushed out
of the window, from the height cache. Tests: the YouTube test accepts the
in-view players autoplay loads; the stability test watches the notice for
the catch-up, since the new rows land inside the window's spacer.

Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01VhUKyXKtsJ67QAFfb7QR9D

1 files changed, 4 insertions, 2 deletions

diff --git a/tools/youtube-embed-test.js b/tools/youtube-embed-test.js
index b32eb98..1c66676 100644
--- a/tools/youtube-embed-test.js
+++ b/tools/youtube-embed-test.js
@@ -50,7 +50,9 @@ await sleep(3500);
 let ok = true;
 const check = (n, c, d = '') => { console.log(` ${c ? '✓' : '✗'} ${n}${d ? ' — ' + d : ''}`); if (!c) ok = false; };
 
-const posters = await page.evaluate(() => [...document.querySelectorAll('.yt-embed img')].map((i) => i.getAttribute('src')));
+if (process.env.DEBUG) console.log('ROWS:', await page.evaluate(() => [...document.querySelectorAll('.notes-feed > .row')].map((r) => r.innerText.replace(/\n+/g, ' | ').slice(0, 80) + ' :: embeds=' + r.querySelectorAll('.yt-embed').length + ' links=' + r.querySelectorAll('a').length)));
+// a box in view has already swapped its poster for a muted player (autoplay), so read either
+const posters = await page.evaluate(() => [...document.querySelectorAll('.yt-embed')].map((b) => b.querySelector('iframe')?.getAttribute('src') || b.querySelector('img')?.getAttribute('src') || ''));
 check('every shape of YouTube link becomes a video', posters.length === 3, posters.length + ' embed(s)');
 check('...the long one', posters.some((u) => u.includes('dQw4w9WgXcQ')));
 check('...the short one', posters.some((u) => u.includes('aqz-KE-bpKQ')));
@@ -58,7 +60,7 @@ check('...and a Shorts link', posters.some((u) => u.includes('abc123XYZ_-')));
 const other = await page.evaluate(() => [...document.querySelectorAll('.notes-feed a[href^="http"]')].map((a) => a.getAttribute('href')));
 check('a link that only looks like one stays a link', other.includes('https://example.com/watch?v=nope'));
 
-check('nothing has loaded a player yet', (await page.evaluate(() => document.querySelectorAll('iframe').length)) === 0);
+check('players load only for boxes in view, muted', await page.evaluate(() => [...document.querySelectorAll('.yt-embed')].every((b) => { const r = b.getBoundingClientRect(); const inView = r.top < innerHeight && r.bottom > 0; const f = b.querySelector('iframe'); return inView ? !!f && /mute=1/.test(f.src) : !f; })));
 await page.evaluate(() => document.querySelector('.yt-play').click());
 await sleep(1200);
 const src = await page.evaluate(() => { const f = document.querySelector('iframe'); return f ? f.getAttribute('src') : ''; });