fix(viewer): move autoplay after loadUI

box · Sep 5, 2019 · 5b6f76c · 5b6f76c
1 parent d2a47bc
commit 5b6f76c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 24 deletions.
diff --git a/src/lib/viewers/media/DashViewer.js b/src/lib/viewers/media/DashViewer.js
@@ -572,12 +572,13 @@ class DashViewer extends VideoBaseViewer {
             return;
         }
 
+        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
@@ -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,17 +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();
-        // If media is muted because of auto-play,
-        // the volume icon should be updated after the UI is loaded
-        this.updateVolumeIcon();
-        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
@@ -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() });
@@ -163,7 +151,6 @@ describe('lib/viewers/media/MediaBaseViewer', () => {
             sandbox.stub(media, 'handleVolume');
             sandbox.stub(media, 'emit');
             sandbox.stub(media, 'loadUI');
-            sandbox.stub(media, 'updateVolumeIcon');
             sandbox.stub(media, 'resize');
             sandbox.stub(media, 'showMedia');
 
@@ -174,11 +161,20 @@ describe('lib/viewers/media/MediaBaseViewer', () => {
             expect(media.loaded).to.be.true;
             expect(media.emit).to.be.calledWith(VIEWER_EVENT.load);
             expect(media.loadUI).to.be.called;
-            expect(media.updateVolumeIcon).to.be.called;
             expect(media.resize).to.be.called;
             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()', () => {