fix(convert): fix missing slides in HTML presentation after #508 (#515)

* fix(convert): fix missing slides after #508 * Update template.html * Update CHANGELOG.md * Update CHANGELOG.md Co-authored-by: Jérome Eertmans <jeertmans@icloud.com> --------- Co-authored-by: Jérome Eertmans <jeertmans@icloud.com>
jeertmans · Jan 15, 2025 · a58ff6c · a58ff6c
1 parent bf512f2
commit a58ff6c
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 25 deletions.
diff --git 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
@@ -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 %}
     </script>
 

diff --git 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