fix previous bg video playing in background

hakimel · Mar 12, 2024 · 421da63 · 421da63
1 parent 62b1ea3
commit 421da63
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 37 deletions.
diff --git a/dist/reveal.esm.js b/dist/reveal.esm.js
diff --git a/dist/reveal.esm.js.map b/dist/reveal.esm.js.map
diff --git a/dist/reveal.js b/dist/reveal.js
diff --git a/dist/reveal.js.map b/dist/reveal.js.map
diff --git a/js/controllers/backgrounds.js b/js/controllers/backgrounds.js
@@ -322,16 +322,47 @@ export default class Backgrounds {
 
 		} );
 
+		// The previous background may refer to a DOM element that has
+		// been removed after a presentation is synced & bgs are recreated
+		if( this.previousBackground && !this.previousBackground.closest( 'body' ) ) {
+			this.previousBackground = null;
+		}
+
+		if( currentBackground && this.previousBackground ) {
+
+			// Don't transition between identical backgrounds. This
+			// prevents unwanted flicker.
+			let previousBackgroundHash = this.previousBackground.getAttribute( 'data-background-hash' );
+			let currentBackgroundHash = currentBackground.getAttribute( 'data-background-hash' );
+
+			if( currentBackgroundHash && currentBackgroundHash === previousBackgroundHash && currentBackground !== this.previousBackground ) {
+				this.element.classList.add( 'no-transition' );
+
+				// If multiple slides have the same background video, carry
+				// the <video> element forward so that it plays continuously
+				// across multiple slides
+				const currentVideo = currentBackground.querySelector( 'video' );
+				const previousVideo = this.previousBackground.querySelector( 'video' );
+
+				if( currentVideo && previousVideo ) {
+
+					const currentVideoParent = currentVideo.parentNode;
+					const previousVideoParent = previousVideo.parentNode;
+
+					// Swap the two videos
+					previousVideoParent.appendChild( currentVideo );
+					currentVideoParent.appendChild( previousVideo );
+
+				}
+			}
+
+		}
+
 		// Stop content inside of previous backgrounds
 		if( this.previousBackground ) {
 
 			this.Reveal.slideContent.stopEmbeddedContent( this.previousBackground, { unloadIframes: !this.Reveal.slideContent.shouldPreload( this.previousBackground ) } );
 
-			// Clear the previous background if it was removed from DOM
-			if( !this.previousBackground.closest( 'body' ) ) {
-				this.previousBackground = null;
-			}
-
 		}
 
 		// Start content in the current background
@@ -353,34 +384,6 @@ export default class Backgrounds {
 
 			}
 
-			// Don't transition between identical backgrounds. This
-			// prevents unwanted flicker.
-			let previousBackgroundHash = this.previousBackground ? this.previousBackground.getAttribute( 'data-background-hash' ) : null;
-			let currentBackgroundHash = currentBackground.getAttribute( 'data-background-hash' );
-			if( currentBackgroundHash && currentBackgroundHash === previousBackgroundHash && currentBackground !== this.previousBackground ) {
-				this.element.classList.add( 'no-transition' );
-
-				// If multiple slides have the same background video, we carry
-				// the <video> element forward so that it doesn't restart
-				const currentVideo = currentBackground.querySelector( 'video' );
-				if( currentVideo && this.previousBackground ) {
-					const previousVideo = this.previousBackground.querySelector( 'video' );
-
-					if( previousVideo ) {
-						const currentVideoParent = currentVideo.parentNode;
-						const previousVideoParent = previousVideo.parentNode;
-
-						// Swap the two videos
-						previousVideoParent.appendChild( currentVideo );
-						currentVideoParent.appendChild( previousVideo );
-
-						if( config.autoPlayMedia !== false ) {
-							previousVideo.play();
-						}
-					}
-				}
-			}
-
 			this.previousBackground = currentBackground;
 
 		}