diff --git a/src/lib/viewers/media/MP3Viewer.js b/src/lib/viewers/media/MP3Viewer.js index 6f35a3dc6..393ddf042 100644 --- a/src/lib/viewers/media/MP3Viewer.js +++ b/src/lib/viewers/media/MP3Viewer.js @@ -34,6 +34,33 @@ class MP3Viewer extends MediaBaseViewer { this.mediaControls.show(); this.mediaControls.resizeTimeScrubber(); } + + /** + * Determines if media should autoplay based on cached settings value. + * + * @override + * @emits volume + * @return {Promise} + */ + autoplay() { + const autoPlayPromise = this.mediaEl.play(); + + if (autoPlayPromise && typeof autoPlayPromise.then === 'function') { + return autoPlayPromise + .then(() => { + this.handleRate(); + this.handleVolume(); + }) + .catch(() => { + // Auto-play was prevented, pause + this.mediaEl.pause(); + }); + } + + // Fallback to traditional autoplay tag if play does not return a promise + this.mediaEl.autoplay = true; + return Promise.resolve(); + } } export default MP3Viewer; diff --git a/src/lib/viewers/media/MediaBaseViewer.js b/src/lib/viewers/media/MediaBaseViewer.js index 0a823442e..8b2271467 100644 --- a/src/lib/viewers/media/MediaBaseViewer.js +++ b/src/lib/viewers/media/MediaBaseViewer.js @@ -317,15 +317,22 @@ class MediaBaseViewer extends BaseViewer { const autoPlayPromise = this.mediaEl.play(); if (autoPlayPromise && typeof autoPlayPromise.then === 'function') { - this.handleRate(); return autoPlayPromise .then(() => { + this.handleRate(); this.handleVolume(); }) .catch(() => { // Auto-play was prevented, try muted play this.setVolume(0); - this.mediaEl.play(); + this.mediaEl + .play() + .then(() => { + this.handleRate(); + }) + .catch(() => { + this.mediaEl.pause(); + }); }); } diff --git a/src/lib/viewers/media/__tests__/MP3Viewer-test.js b/src/lib/viewers/media/__tests__/MP3Viewer-test.js index e38edbc1e..4edf691bf 100644 --- a/src/lib/viewers/media/__tests__/MP3Viewer-test.js +++ b/src/lib/viewers/media/__tests__/MP3Viewer-test.js @@ -74,4 +74,17 @@ describe('lib/viewers/media/MP3Viewer', () => { mp3.loadUI(); }); }); + + describe('autoplay()', () => { + it('should pause autoplay if the promise is rejected', done => { + mp3.mediaEl = { + play: sandbox.stub().returns(Promise.reject()), + pause: sandbox.stub(), + }; + mp3.autoplay().then(() => { + expect(mp3.mediaEl.pause).to.be.called; + done(); + }); + }); + }); });