fix video restarting on same bg hakimel#2882

slavaGanzin · Sep 8, 2023 · 17008f3 · 17008f3
1 parent 03fe25c
commit 17008f3
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 28 deletions.
diff --git a/js/controllers/backgrounds.js b/js/controllers/backgrounds.js
@@ -281,43 +281,47 @@ export default class Backgrounds {
 
 		} );
 
-		// Stop content inside of previous backgrounds
-		if( this.previousBackground ) {
-
-			this.Reveal.slideContent.stopEmbeddedContent( this.previousBackground, { unloadIframes: !this.Reveal.slideContent.shouldPreload( this.previousBackground ) } );
+    let previousBackgroundHash = this.previousBackground ? this.previousBackground.getAttribute( 'data-background-hash' ) : null;
+    let currentBackgroundHash = currentBackground.getAttribute( 'data-background-hash' );
 
-		}
+    const backgroundNotChanged = currentBackgroundHash && currentBackgroundHash === previousBackgroundHash && currentBackground.classList.contains('present') && this.previousBackground.classList.contains('present')
+		// Stop content inside of previous backgrounds
+    // console.log(this.previousBackground, currentBackground, backgroundNotChanged, currentBackgroundHash)
 
-		// Start content in the current background
-		if( currentBackground ) {
+    if (!backgroundNotChanged) {
+  		if(this.previousBackground) {
+  			this.Reveal.slideContent.stopEmbeddedContent( this.previousBackground, { unloadIframes: !this.Reveal.slideContent.shouldPreload( this.previousBackground ) } );
+  		}
 
-			this.Reveal.slideContent.startEmbeddedContent( currentBackground );
 
-			let currentBackgroundContent = currentBackground.querySelector( '.slide-background-content' );
-			if( currentBackgroundContent ) {
+  		// Start content in the current background
+  		if(currentBackground) {
+  			this.Reveal.slideContent.startEmbeddedContent( currentBackground );
 
-				let backgroundImageURL = currentBackgroundContent.style.backgroundImage || '';
+  			let currentBackgroundContent = currentBackground.querySelector( '.slide-background-content' );
+  			if( currentBackgroundContent ) {
 
-				// Restart GIFs (doesn't work in Firefox)
-				if( /\.gif/i.test( backgroundImageURL ) ) {
-					currentBackgroundContent.style.backgroundImage = '';
-					window.getComputedStyle( currentBackgroundContent ).opacity;
-					currentBackgroundContent.style.backgroundImage = backgroundImageURL;
-				}
+  				let backgroundImageURL = currentBackgroundContent.style.backgroundImage || '';
 
-			}
+  				// Restart GIFs (doesn't work in Firefox)
+  				if( /\.gif/i.test( backgroundImageURL ) ) {
+  					currentBackgroundContent.style.backgroundImage = '';
+  					window.getComputedStyle( currentBackgroundContent ).opacity;
+  					currentBackgroundContent.style.backgroundImage = backgroundImageURL;
+  				}
 
-			// 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' );
-			}
+  			}
 
-			this.previousBackground = currentBackground;
+  			// Don't transition between identical backgrounds. This
+  			// prevents unwanted flicker.
+  			if(backgroundNotChanged) {
+  				this.element.classList.add( 'no-transition' );
+  			}
+        this.previousBackground = currentBackground
+  		}
+    }
 
-		}
+    this.previousBackground = currentBackground
 
 		// If there's a background brightness flag for this slide,
 		// bubble it to the .reveal container

diff --git a/js/controllers/slidecontent.js b/js/controllers/slidecontent.js
@@ -301,7 +301,7 @@ export default class SlideContent {
 				if( autoplay && typeof el.play === 'function' ) {
 
 					// If the media is ready, start playback
-					if( el.readyState > 1 ) {
+					if( el.readyState > 1 && el.paused || el.ended || el.currentTime == 0) {
 						this.startEmbeddedMedia( { target: el } );
 					}
 					// Mobile devices never fire a loaded event so instead