From a58ff6c388eb856ad905857bc503ac18ac12b2b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Mart=C3=ADn?= Date: Wed, 15 Jan 2025 11:25:18 +0100 Subject: [PATCH] fix(convert): fix missing slides in HTML presentation after #508 (#515) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(convert): fix missing slides after #508 * Update template.html * Update CHANGELOG.md * Update CHANGELOG.md Co-authored-by: Jérome Eertmans --------- Co-authored-by: Jérome Eertmans --- CHANGELOG.md | 6 ++++ docs/source/_static/template.html | 53 +++++++++++++++++++--------- manim_slides/templates/revealjs.html | 39 +++++++++++++++----- 3 files changed, 73 insertions(+), 25 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 456e2a81..492d21b9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 (unreleased)= ## [Unreleased](https://github.com/jeertmans/manim-slides/compare/v5.3.0...HEAD) +(unreleased-fixed)= +### Fixed + +- Fixed HTML template to avoid missing slides when exporting with `--one-file`. + [@Rapsssito](https://github.com/Rapsssito) [#515](https://github.com/jeertmans/manim-slides/pull/515) + (v5.3.0)= ## [v5.3.0](https://github.com/jeertmans/manim-slides/compare/v5.2.0...v5.3.0) diff --git a/docs/source/_static/template.html b/docs/source/_static/template.html index 4b084bb3..9addfad6 100644 --- a/docs/source/_static/template.html +++ b/docs/source/_static/template.html @@ -316,26 +316,47 @@ }); {% if one_file %} - // Fix found by @t-fritsch and @Rapsssito on GitHub - // see: https://github.com/hakimel/reveal.js/discussions/3362#discussioncomment-11733074. - function fixBase64VideoBackground(event) { - // Analyze all slides backgrounds - for (const slide of Reveal.getBackgroundsElement().querySelectorAll('.slide-background')) { - // Get the slide video and its sources for each background - const video = slide.querySelector('video'); - const sources = video.querySelectorAll('source'); - // Update the source of the video - sources.forEach((source, i) => { - const src = source.getAttribute('src'); - if(src.match(/^data:video.*;base64$/)) { - const nextSrc = sources[i+1]?.getAttribute('src'); - video.setAttribute('src', `${src},${nextSrc}`); + // Fix found by @t-fritsch and @Rapsssito on GitHub + // see: https://github.com/hakimel/reveal.js/discussions/3362#discussioncomment-11733074. + function setVideoBase64(video) { + const sources = video.querySelectorAll('source'); + // Update the source of the video + sources.forEach((source, i) => { + const src = source.getAttribute('src'); + if(src.match(/^data:video.*;base64$/)) { + const nextSrc = sources[i+1]?.getAttribute('src'); + video.setAttribute('src', `${src},${nextSrc}`); + } + }); + } + + function fixBase64VideoBackground(event) { + // Analyze all slides backgrounds + for (const slide of Reveal.getBackgroundsElement().querySelectorAll('.slide-background')) { + // Get the slide video and its sources for each background + const video = slide.querySelector('video'); + if (video) { + setVideoBase64(video); + } else { + // Listen to the creation of the video element + const observer = new MutationObserver((mutationsList) => { + for (const mutation of mutationsList) { + if (mutation.type === 'childList') { + for (const addedNode of mutation.addedNodes) { + if (addedNode.tagName === 'VIDEO') { + setVideoBase64(addedNode); + observer.disconnect(); // Stop observing once the video is handled + } + } + } } }); + observer.observe(slide, { childList: true, subtree: true }); } } - // Setup base64 videos - Reveal.on( 'ready', fixBase64VideoBackground ); + } + // Setup base64 videos + Reveal.on( 'ready', fixBase64VideoBackground ); {% endif %} diff --git a/manim_slides/templates/revealjs.html b/manim_slides/templates/revealjs.html index a7d8ed7e..bd6b003c 100644 --- a/manim_slides/templates/revealjs.html +++ b/manim_slides/templates/revealjs.html @@ -323,20 +323,41 @@ {% if one_file -%} // Fix found by @t-fritsch and @Rapsssito on GitHub // see: https://github.com/hakimel/reveal.js/discussions/3362#discussioncomment-11733074. + function setVideoBase64(video) { + const sources = video.querySelectorAll('source'); + // Update the source of the video + sources.forEach((source, i) => { + const src = source.getAttribute('src'); + if(src.match(/^data:video.*;base64$/)) { + const nextSrc = sources[i+1]?.getAttribute('src'); + video.setAttribute('src', `${src},${nextSrc}`); + } + }); + } + function fixBase64VideoBackground(event) { // Analyze all slides backgrounds for (const slide of Reveal.getBackgroundsElement().querySelectorAll('.slide-background')) { // Get the slide video and its sources for each background const video = slide.querySelector('video'); - const sources = video.querySelectorAll('source'); - // Update the source of the video - sources.forEach((source, i) => { - const src = source.getAttribute('src'); - if(src.match(/^data:video.*;base64$/)) { - const nextSrc = sources[i+1]?.getAttribute('src'); - video.setAttribute('src', `${src},${nextSrc}`); - } - }); + if (video) { + setVideoBase64(video); + } else { + // Listen to the creation of the video element + const observer = new MutationObserver((mutationsList) => { + for (const mutation of mutationsList) { + if (mutation.type === 'childList') { + for (const addedNode of mutation.addedNodes) { + if (addedNode.tagName === 'VIDEO') { + setVideoBase64(addedNode); + observer.disconnect(); // Stop observing once the video is handled + } + } + } + } + }); + observer.observe(slide, { childList: true, subtree: true }); + } } } // Setup base64 videos