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>

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)
 

docs/source/_static/template.html

@@ -316,26 +316,47 @@
       });
 
       {% if one_file %}
-        // Fix found by @t-fritsch and @Rapsssito on GitHub
+      // Fix found by @t-fritsch and @Rapsssito on GitHub
-        // see: https://github.com/hakimel/reveal.js/discussions/3362#discussioncomment-11733074.
+      // see: https://github.com/hakimel/reveal.js/discussions/3362#discussioncomment-11733074.
-        function fixBase64VideoBackground(event) {
+      function setVideoBase64(video) {
-          // Analyze all slides backgrounds
+        const sources = video.querySelectorAll('source');
-          for (const slide of Reveal.getBackgroundsElement().querySelectorAll('.slide-background')) {
+        // Update the source of the video
-            // Get the slide video and its sources for each background
+        sources.forEach((source, i) => {
-            const video = slide.querySelector('video');
+          const src = source.getAttribute('src');
-            const sources = video.querySelectorAll('source');
+          if(src.match(/^data:video.*;base64$/)) {
-            // Update the source of the video
+            const nextSrc = sources[i+1]?.getAttribute('src');
-            sources.forEach((source, i) => {
+            video.setAttribute('src', `${src},${nextSrc}`);
-              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>
 

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');
+          if (video) {
-          // Update the source of the video
+            setVideoBase64(video);
-          sources.forEach((source, i) => {
+          } else {
-            const src = source.getAttribute('src');
+            // Listen to the creation of the video element
-            if(src.match(/^data:video.*;base64$/)) {
+            const observer = new MutationObserver((mutationsList) => {
-              const nextSrc = sources[i+1]?.getAttribute('src');
+              for (const mutation of mutationsList) {
-              video.setAttribute('src', `${src},${nextSrc}`);
+                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