fix(viewer): Pause audio instead of muting it if autoplay is prevented

src/lib/viewers/media/MP3Viewer.js

@@ -34,6 +34,15 @@ class MP3Viewer extends MediaBaseViewer {
         this.mediaControls.show();
         this.mediaControls.resizeTimeScrubber();
     }
+
+    /**
+     * Auto-play was prevented, pause the audio
+     *
+     * @override
+     */
+    handleAutoplayFail = () => {
+        this.pause();
+    };
 }
 
 export default MP3Viewer;

src/lib/viewers/media/MediaBaseViewer.js

@@ -303,30 +303,28 @@ class MediaBaseViewer extends BaseViewer {
     }
 
     /**
-     * Determines if media should autoplay based on cached settings value.
+     * Handler for autoplay failure
+     * overrided in child class
+     *
+     * @private
+     */
+    handleAutoplayFail = () => {};
+
+    /**
+     * Autoplay the media
      *
      * @private
      * @emits volume
      * @return {Promise}
      */
     autoplay() {
         // Play may return a promise depending on browser support. This promise
-        // will resolve when playback starts. If it fails, we mute the video
-        // and try to play again.
+        // will resolve when playback starts.
         // https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/
-        const autoPlayPromise = this.mediaEl.play();
+        const autoPlayPromise = this.play();
 
         if (autoPlayPromise && typeof autoPlayPromise.then === 'function') {
-            this.handleRate();
-            return autoPlayPromise
-                .then(() => {
-                    this.handleVolume();
-                })
-                .catch(() => {
-                    // Auto-play was prevented, try muted play
-                    this.setVolume(0);
-                    this.mediaEl.play();
-                });
+            return autoPlayPromise.catch(this.handleAutoplayFail);
         }
 
         // Fallback to traditional autoplay tag if play does not return a promise
@@ -570,7 +568,7 @@ class MediaBaseViewer extends BaseViewer {
      * @param {number} start - start time in seconds
      * @param {number} end - end time in seconds
      * @emits play
-     * @return {void}
+     * @return {Promise}
      */
     play(start, end) {
         const hasValidStart = this.isValidTime(start);
@@ -584,10 +582,13 @@ class MediaBaseViewer extends BaseViewer {
             this.setMediaTime(start);
         }
         if (arguments.length === 0 || hasValidStart) {
-            this.mediaEl.play();
+            const playPromise = this.mediaEl.play();
             this.handleRate();
             this.handleVolume();
+
+            return playPromise;
         }
+        return Promise.resolve();
     }
 
     /**

src/lib/viewers/media/VideoBaseViewer.js

@@ -234,6 +234,16 @@ class VideoBaseViewer extends MediaBaseViewer {
     onKeydown(key) {
         return super.onKeydown(key);
     }
+
+    /**
+     * Auto-play was prevented, try muted play
+     *
+     * @override
+     */
+    handleAutoplayFail = () => {
+        this.setVolume(0);
+        this.play().catch(this.pause);
+    };
 }
 
 export default VideoBaseViewer;

src/lib/viewers/media/__tests__/MP3Viewer-test.js

@@ -74,4 +74,12 @@ describe('lib/viewers/media/MP3Viewer', () => {
             mp3.loadUI();
         });
     });
+
+    describe('handleAutoplayFail()', () => {
+        it('should call pause', () => {
+            sandbox.stub(mp3, 'pause');
+            mp3.handleAutoplayFail();
+            expect(mp3.pause).to.be.called;
+        });
+    });
 });

src/lib/viewers/media/__tests__/MediaBaseViewer-test.js

@@ -273,31 +273,27 @@ describe('lib/viewers/media/MediaBaseViewer', () => {
 
     describe('autoplay()', () => {
         beforeEach(() => {
-            media.mediaEl = {
-                play: sandbox.stub().returns(Promise.resolve()),
-            };
-
-            sandbox.stub(media, 'isAutoplayEnabled').returns(true);
-            sandbox.stub(Browser, 'isIOS').returns(false);
+            media.mediaEl = {};
+            media.play = sandbox.stub().returns(Promise.resolve());
         });
 
         it('should set autoplay if setting is enabled and handle the promise if it is a valid promise', () => {
             media.autoplay();
-            expect(media.mediaEl.play).to.be.called;
+            expect(media.play).to.be.called;
             expect(media.mediaEl.autoplay).to.be.undefined;
         });
 
         it('should set autoplay to true if play does not return a promise', () => {
-            media.mediaEl.play.returns(undefined);
+            media.play.returns(undefined);
             media.autoplay();
             expect(media.mediaEl.autoplay).to.be.true;
         });
 
-        it('should muted autoplay if the promise is rejected', done => {
-            sandbox.stub(media, 'setVolume');
-            media.mediaEl.play = sandbox.stub().returns(Promise.reject());
+        it('should call handleAutoplayFail if the promise is rejected', done => {
+            sandbox.stub(media, 'handleAutoplayFail');
+            media.play.returns(Promise.reject());
             media.autoplay().then(() => {
-                expect(media.setVolume).to.be.calledWith(0);
+                expect(media.handleAutoplayFail).to.be.called;
                 done();
             });
         });

src/lib/viewers/media/__tests__/VideoBaseViewer-test.js

@@ -244,4 +244,16 @@ describe('lib/viewers/media/VideoBaseViewer', () => {
             expect(videoBase.rootEl.classList.contains('bp-dark')).to.be.true;
         });
     });
+
+    describe('handleAutoplayFail()', () => {
+        it('should mute and play again', () => {
+            sandbox.stub(videoBase, 'setVolume');
+            videoBase.play = sandbox.stub().returns(Promise.reject());
+
+            videoBase.handleAutoplayFail();
+
+            expect(videoBase.setVolume).to.be.calledWith(0);
+            expect(videoBase.play).to.be.called;
+        });
+    });
 });