fix(convert): avoid micro-stuttering with --one-file in HTML presentation (#508)

* fix: Fix micro-stuttering with --one-file in HTML presentation

* Update template.html

* Update CHANGELOG.md

* Update CHANGELOG.md

Co-authored-by: Jérome Eertmans <[email protected]>

* Update CHANGELOG.md

---------

Co-authored-by: Jérome Eertmans <[email protected]>

Author: Rapsssito

CHANGELOG.md

@@ -22,6 +22,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Deprecate `-cdata_uri` in favor of `-cone_file` for `manim-slides convert`.
   [@Rapsssito](https://github.com/Rapsssito) [#505](https://github.com/jeertmans/manim-slides/pull/505)
+- Changed template to avoid micro-stuttering with `--one-file` in HTML presentation.
+  [@Rapsssito](https://github.com/Rapsssito) [#508](https://github.com/jeertmans/manim-slides/pull/508)
 
 (v5.2.0)=
 ## [v5.2.0](https://github.com/jeertmans/manim-slides/compare/v5.1.10...v5.2.0)

docs/source/_static/template.html

@@ -316,15 +316,15 @@
       });
 
       {% if one_file %}
-        // Fix found by @t-fritsch on GitHub
-        // see: https://github.com/hakimel/reveal.js/discussions/3362#discussioncomment-6651475.
+        // Fix found by @t-fritsch and @Rapsssito on GitHub
+        // see: https://github.com/hakimel/reveal.js/discussions/3362#discussioncomment-11733074.
         function fixBase64VideoBackground(event) {
-          // event.previousSlide, event.currentSlide, event.indexh, event.indexv
-          if (event.currentSlide.getAttribute('data-background-video')) {
-            const background = Reveal.getSlideBackground(event.indexh, event.indexv),
-              video = background.querySelector('video'),
-              sources = video.querySelectorAll('source');
-
+          // 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$/)) {
@@ -334,8 +334,8 @@
             });
           }
         }
+        // Setup base64 videos
         Reveal.on( 'ready', fixBase64VideoBackground );
-        Reveal.on( 'slidechanged', fixBase64VideoBackground );
       {% endif %}
     </script>
 

manim_slides/templates/revealjs.html

@@ -321,15 +321,15 @@
       });
 
       {% if one_file -%}
-      // Fix found by @t-fritsch on GitHub
-      // see: https://github.com/hakimel/reveal.js/discussions/3362#discussioncomment-6651475.
+      // Fix found by @t-fritsch and @Rapsssito on GitHub
+      // see: https://github.com/hakimel/reveal.js/discussions/3362#discussioncomment-11733074.
       function fixBase64VideoBackground(event) {
-        // event.previousSlide, event.currentSlide, event.indexh, event.indexv
-        if (event.currentSlide.getAttribute('data-background-video')) {
-          const background = Reveal.getSlideBackground(event.indexh, event.indexv),
-            video = background.querySelector('video'),
-            sources = video.querySelectorAll('source');
-
+        // 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$/)) {
@@ -339,8 +339,8 @@
           });
         }
       }
+      // Setup base64 videos
       Reveal.on( 'ready', fixBase64VideoBackground );
-      Reveal.on( 'slidechanged', fixBase64VideoBackground );
       {%- endif %}
     </script>