From 5dba466fca730e36f5cdc6861620394ded31f223 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Paulo?= <vieira.joaopaulo.91@gmail.com>
Date: Fri, 2 Apr 2021 15:53:55 -0300
Subject: [PATCH 1/3] style(html5_video): simplify render code

---
 src/playbacks/html5_video/html5_video.js | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/src/playbacks/html5_video/html5_video.js b/src/playbacks/html5_video/html5_video.js
index 7ead0216..517b9be5 100644
--- a/src/playbacks/html5_video/html5_video.js
+++ b/src/playbacks/html5_video/html5_video.js
@@ -652,17 +652,8 @@ export default class HTML5Video extends Playback {
   get template() { return template(tracksHTML) }
 
   render() {
-    if (this.options.playback.disableContextMenu) {
-      this.$el.on('contextmenu', () => {
-        return false
-      })
-    }
-
-    if (this._externalTracks && this._externalTracks.length > 0) {
-      this.$el.html(this.template({
-        tracks: this._externalTracks,
-      }))
-    }
+    this.options.playback.disableContextMenu && this.$el.on('contextmenu', () => { return false })
+    this._externalTracks && this._externalTracks.length > 0 && this.$el.html(this.template({ tracks: this._externalTracks }))
 
     this._ready()
     const style = Styler.getStyleFor(HTML5VideoStyle.toString(), { baseUrl: this.options.baseUrl })

From fa83c65d8772d963b765abe1f4a665cf16a513c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Paulo?= <vieira.joaopaulo.91@gmail.com>
Date: Fri, 2 Apr 2021 15:55:31 -0300
Subject: [PATCH 2/3] style(html5_video): move template getter for the top of
 class declaration

---
 src/playbacks/html5_video/html5_video.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/playbacks/html5_video/html5_video.js b/src/playbacks/html5_video/html5_video.js
index 517b9be5..aca5e04a 100644
--- a/src/playbacks/html5_video/html5_video.js
+++ b/src/playbacks/html5_video/html5_video.js
@@ -43,6 +43,7 @@ export default class HTML5Video extends Playback {
   get name() { return 'html5_video' }
   get supportedVersion() { return { min: VERSION } }
   get tagName() { return this.isAudioOnly ? 'audio' : 'video' }
+  get template() { return template(tracksHTML) }
 
   get isAudioOnly() {
     const resourceUrl = this.options.src
@@ -649,8 +650,6 @@ export default class HTML5Video extends Playback {
     })
   }
 
-  get template() { return template(tracksHTML) }
-
   render() {
     this.options.playback.disableContextMenu && this.$el.on('contextmenu', () => { return false })
     this._externalTracks && this._externalTracks.length > 0 && this.$el.html(this.template({ tracks: this._externalTracks }))

From 7884ce7f3354b3efeb412e9993dd3ad80223bd60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Paulo?= <vieira.joaopaulo.91@gmail.com>
Date: Fri, 2 Apr 2021 16:08:48 -0300
Subject: [PATCH 3/3] refactor(html5_video): only call _ready after
 loadedmetadata video tag event

---
 src/playbacks/html5_video/html5_video.js      |  6 +++---
 src/playbacks/html5_video/html5_video.test.js | 10 ++++++++++
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/playbacks/html5_video/html5_video.js b/src/playbacks/html5_video/html5_video.js
index aca5e04a..1ddcc1a9 100644
--- a/src/playbacks/html5_video/html5_video.js
+++ b/src/playbacks/html5_video/html5_video.js
@@ -231,6 +231,7 @@ export default class HTML5Video extends Playback {
   }
 
   _onLoadedMetadata(e) {
+    this._ready()
     this._handleBufferingEvents()
     this.trigger(Events.PLAYBACK_LOADEDMETADATA, { duration: e.target.duration, data: e })
     this._updateSettings()
@@ -566,8 +567,7 @@ export default class HTML5Video extends Playback {
   }
 
   _ready() {
-    if (this._isReadyState)
-      return
+    if (this._isReadyState) return
 
     this._isReadyState = true
     this.trigger(Events.PLAYBACK_READY, this.name)
@@ -654,9 +654,9 @@ export default class HTML5Video extends Playback {
     this.options.playback.disableContextMenu && this.$el.on('contextmenu', () => { return false })
     this._externalTracks && this._externalTracks.length > 0 && this.$el.html(this.template({ tracks: this._externalTracks }))
 
-    this._ready()
     const style = Styler.getStyleFor(HTML5VideoStyle.toString(), { baseUrl: this.options.baseUrl })
     this.$el.append(style[0])
+
     return this
   }
 }
diff --git a/src/playbacks/html5_video/html5_video.test.js b/src/playbacks/html5_video/html5_video.test.js
index 87883175..12310eac 100644
--- a/src/playbacks/html5_video/html5_video.test.js
+++ b/src/playbacks/html5_video/html5_video.test.js
@@ -609,4 +609,14 @@ describe('HTML5Video playback', function() {
       expect(html5Video._updateDvr).toHaveBeenCalledWith(true)
     })
   })
+
+  describe('_onLoadedMetadata callback', () => {
+    test('calls _ready method', () => {
+      const playback = new HTML5Video({ src: '/test/fixtures/SampleVideo_360x240_1mb.mp4' })
+      jest.spyOn(playback, '_ready')
+      playback.el.dispatchEvent(new Event('loadedmetadata'))
+
+      expect(playback._ready).toHaveBeenCalledTimes(1)
+    })
+  })
 })