diff options
Diffstat (limited to 'docs/site/site.typ')
| -rw-r--r-- | docs/site/site.typ | 31 |
1 files changed, 17 insertions, 14 deletions
diff --git a/docs/site/site.typ b/docs/site/site.typ index 62b1292e..f50a8d9b 100644 --- a/docs/site/site.typ +++ b/docs/site/site.typ @@ -98,6 +98,20 @@ ] ] +#let in-view-script = el("script")[#( + "(() => { if (!('IntersectionObserver' in window)) return; +" + + " const p = el => el.player || (el.tagName === 'VIDEO' ? el : null); +" + + " const io = new IntersectionObserver(es => { for (const e of es) { const r = p(e.target); if (!r) continue; +" + + " if (e.isIntersecting) Promise.resolve(r.play()).catch(() => {}); else r.pause(); } }, {threshold: 0.25}); +" + + " for (const el of document.querySelectorAll('.clip video, .cast .player')) io.observe(el); +" + + "})();" +)] + #let shell(id, title, body) = html.html(lang: "en", { html.head({ html.meta(charset: "utf-8") @@ -122,6 +136,9 @@ #el("a", (href: "player/LICENSE-asciinema-player.txt"))[asciinema-player] (Apache-2.0) ] ] + // after the page's own scripts (the landing's players), on every page + // that has a recording + in-view-script }) }) @@ -179,19 +196,6 @@ /// Plays a recording while it is on screen and pauses it once it leaves. /// The casts wait for it (autoPlay off) so each shows its poster frame /// until then; the videos autoplay by themselves too. -#let in-view-script = el("script")[#( - "(() => { if (!('IntersectionObserver' in window)) return; -" + - " const p = el => el.player || (el.tagName === 'VIDEO' ? el : null); -" + - " const io = new IntersectionObserver(es => { for (const e of es) { const r = p(e.target); if (!r) continue; -" + - " if (e.isIntersecting) Promise.resolve(r.play()).catch(() => {}); else r.pause(); } }, {threshold: 0.25}); -" + - " for (const el of document.querySelectorAll('.clip video, .cast .player')) io.observe(el); -" + - "})();" -)] #document(href("index"), title: "pardes", shell("index", "pardes")[ #el("h1", (class: "masthead"))[pardes] @@ -231,7 +235,6 @@ el("link", (rel: "stylesheet", href: "player/asciinema-player.css"))[] player-script } - #in-view-script ]) #for p in pages.slice(1, -1) { |
