From f55857ea734d6f9421655b7863e4ac3549a2a61c Mon Sep 17 00:00:00 2001
From: Mingze <mxiao@box.com>
Date: Fri, 16 Aug 2019 13:00:10 -0700
Subject: [PATCH] fix(viewer): Audio can muted autoplay if failed (#1054)

---
 src/lib/viewers/media/MediaBaseViewer.js      | 22 +++++++++++--------
 .../media/__tests__/MediaBaseViewer-test.js   |  9 ++++++++
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/lib/viewers/media/MediaBaseViewer.js b/src/lib/viewers/media/MediaBaseViewer.js
index 7b17e96be..5d47cffb0 100644
--- a/src/lib/viewers/media/MediaBaseViewer.js
+++ b/src/lib/viewers/media/MediaBaseViewer.js
@@ -304,27 +304,31 @@ class MediaBaseViewer extends BaseViewer {
      *
      * @private
      * @emits volume
-     * @return {void}
+     * @return {Promise}
      */
     autoplay() {
-        // Play may return a promise depening on browser support. This promise
-        // will resolve when playback starts. If it fails, pause UI should be shown.
+        // 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.
         // https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/
         const autoPlayPromise = this.mediaEl.play();
 
         if (autoPlayPromise && typeof autoPlayPromise.then === 'function') {
-            autoPlayPromise
+            this.handleRate();
+            return autoPlayPromise
                 .then(() => {
-                    this.handleRate();
                     this.handleVolume();
                 })
                 .catch(() => {
-                    this.pause();
+                    // Auto-play was prevented, try muted play
+                    this.setVolume(0);
+                    this.mediaEl.play();
                 });
-        } else {
-            // Fallback to traditional autoplay tag if play does not return a promise
-            this.mediaEl.autoplay = true;
         }
+
+        // Fallback to traditional autoplay tag if play does not return a promise
+        this.mediaEl.autoplay = true;
+        return Promise.resolve();
     }
 
     /**
diff --git a/src/lib/viewers/media/__tests__/MediaBaseViewer-test.js b/src/lib/viewers/media/__tests__/MediaBaseViewer-test.js
index 251f11783..209b176d3 100644
--- a/src/lib/viewers/media/__tests__/MediaBaseViewer-test.js
+++ b/src/lib/viewers/media/__tests__/MediaBaseViewer-test.js
@@ -294,6 +294,15 @@ describe('lib/viewers/media/MediaBaseViewer', () => {
             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());
+            media.autoplay().then(() => {
+                expect(media.setVolume).to.be.calledWith(0);
+                done();
+            });
+        });
     });
 
     describe('loadUI()', () => {