From 7c6a491432f5a67dad40bf0cc269c2dd7a6f68a2 Mon Sep 17 00:00:00 2001
From: Mingze <mxiao@box.com>
Date: Fri, 6 Sep 2019 14:46:46 -0700
Subject: [PATCH] fix(viewer): Update volume icon after UI is loaded (#1066)

* fix(viewer): Update volume icon after UI is loaded

* fix(viewer): move autoplay after loadUI
---
 src/lib/viewers/media/DashViewer.js           |  5 +++--
 src/lib/viewers/media/MediaBaseViewer.js      | 15 ++++++++-----
 .../media/__tests__/MediaBaseViewer-test.js   | 22 +++++++++----------
 3 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/lib/viewers/media/DashViewer.js b/src/lib/viewers/media/DashViewer.js
index 2adb145d9..b2e959e1b 100644
--- a/src/lib/viewers/media/DashViewer.js
+++ b/src/lib/viewers/media/DashViewer.js
@@ -572,12 +572,13 @@ class DashViewer extends VideoBaseViewer {
             return;
         }
 
+        this.calculateVideoDimensions();
+        this.loadUI();
+
         if (this.isAutoplayEnabled()) {
             this.autoplay();
         }
 
-        this.calculateVideoDimensions();
-        this.loadUI();
         this.loadFilmStrip();
         this.resize();
         this.handleVolume();
diff --git a/src/lib/viewers/media/MediaBaseViewer.js b/src/lib/viewers/media/MediaBaseViewer.js
index 5d47cffb0..0a823442e 100644
--- a/src/lib/viewers/media/MediaBaseViewer.js
+++ b/src/lib/viewers/media/MediaBaseViewer.js
@@ -175,9 +175,6 @@ class MediaBaseViewer extends BaseViewer {
             .then(() => {
                 this.startLoadTimer();
                 this.mediaEl.src = this.mediaUrl;
-                if (this.isAutoplayEnabled()) {
-                    this.autoplay();
-                }
             })
             .catch(this.handleAssetError);
     }
@@ -203,14 +200,20 @@ class MediaBaseViewer extends BaseViewer {
         if (this.destroyed) {
             return;
         }
+
+        this.loadUI();
+
+        if (this.isAutoplayEnabled()) {
+            this.autoplay();
+        }
+
         this.setMediaTime(this.startTimeInSeconds);
+        this.resize();
         this.handleVolume();
+
         this.loaded = true;
         this.emit(VIEWER_EVENT.load);
 
-        this.loadUI();
-        this.resize();
-
         // Make media element visible after resize
         this.showMedia();
 
diff --git a/src/lib/viewers/media/__tests__/MediaBaseViewer-test.js b/src/lib/viewers/media/__tests__/MediaBaseViewer-test.js
index 209b176d3..21900ac75 100644
--- a/src/lib/viewers/media/__tests__/MediaBaseViewer-test.js
+++ b/src/lib/viewers/media/__tests__/MediaBaseViewer-test.js
@@ -115,8 +115,6 @@ describe('lib/viewers/media/MediaBaseViewer', () => {
         beforeEach(() => {
             media.mediaEl = document.createElement('video');
             media.mediaEl.addEventListener = sandbox.stub();
-            sandbox.stub(media, 'isAutoplayEnabled').returns(false);
-            sandbox.stub(media, 'autoplay');
         });
 
         it('should load mediaUrl in the media element', () => {
@@ -138,16 +136,6 @@ describe('lib/viewers/media/MediaBaseViewer', () => {
             });
         });
 
-        it('should autoplay if enabled', () => {
-            media.isAutoplayEnabled.returns(true);
-            sandbox.stub(media, 'getRepStatus').returns({ getPromise: () => Promise.resolve() });
-            media.mediaEl = document.createElement('video');
-
-            return media.load().then(() => {
-                expect(media.autoplay).to.be.called;
-            });
-        });
-
         it('should invoke startLoadTimer()', () => {
             sandbox.stub(media, 'startLoadTimer');
             sandbox.stub(media, 'getRepStatus').returns({ getPromise: () => Promise.resolve() });
@@ -177,6 +165,16 @@ describe('lib/viewers/media/MediaBaseViewer', () => {
             expect(media.showMedia).to.be.called;
             expect(document.activeElement).to.equal(media.mediaContainerEl);
         });
+
+        it('should autoplay if enabled', () => {
+            sandbox.stub(media, 'isAutoplayEnabled').returns(true);
+            sandbox.stub(media, 'autoplay');
+            media.mediaEl = document.createElement('video');
+
+            media.loadeddataHandler();
+
+            expect(media.autoplay).to.be.called;
+        });
     });
 
     describe('showMedia()', () => {