From ad3c140836776331fea4131f43c5181a642355e3 Mon Sep 17 00:00:00 2001 From: Karim Slimani Date: Wed, 29 Jan 2020 15:16:03 +0100 Subject: [PATCH 1/7] fix: trigger playback ready event when rendered --- src/clappr-dash-shaka-playback.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/clappr-dash-shaka-playback.js b/src/clappr-dash-shaka-playback.js index 2d53266..0b9ed67 100644 --- a/src/clappr-dash-shaka-playback.js +++ b/src/clappr-dash-shaka-playback.js @@ -73,7 +73,9 @@ class DashShakaPlayback extends HTML5Video { } getCurrentTime() { - return this.shakaPlayerInstance.getMediaElement().currentTime - this.seekRange.start + return this.shakaPlayerInstance + ? this.shakaPlayerInstance.getMediaElement().currentTime - this.seekRange.start + : 0 } get _startTime() { @@ -81,6 +83,8 @@ class DashShakaPlayback extends HTML5Video { } get presentationTimeline() { + if (!this.shakaPlayerInstance) return + return this.shakaPlayerInstance.getManifest().presentationTimeline } @@ -99,7 +103,11 @@ class DashShakaPlayback extends HTML5Video { } getProgramDateTime() { - return new Date((this.presentationTimeline.getPresentationStartTime() + this.seekRange.start) * 1000) + let presentationStartTime = this.presentationTimeline + ? this.presentationTimeline.getPresentationStartTime() + : null + + return new Date((presentationStartTime + this.seekRange.start) * 1000) } _updateDvr(status) { @@ -155,15 +163,13 @@ class DashShakaPlayback extends HTML5Video { // skipping HTML5Video `_setupSrc` (on tag video) _setupSrc () {} - // skipping ready event on video tag in favor of ready on shaka _ready () { - // override with no-op + this.trigger(Events.PLAYBACK_READY, this.name) } _onShakaReady() { this._isShakaReadyState = true this.trigger(DashShakaPlayback.Events.SHAKA_READY) - this.trigger(Events.PLAYBACK_READY, this.name) } get isReady () { From a1626136c89a72fb5047f263278f9b1bc443024d Mon Sep 17 00:00:00 2001 From: Karim Slimani Date: Wed, 29 Jan 2020 17:32:06 +0100 Subject: [PATCH 2/7] fix: store user interaction before setup Shaka instance --- src/clappr-dash-shaka-playback.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/clappr-dash-shaka-playback.js b/src/clappr-dash-shaka-playback.js index 0b9ed67..3733055 100644 --- a/src/clappr-dash-shaka-playback.js +++ b/src/clappr-dash-shaka-playback.js @@ -135,7 +135,10 @@ class DashShakaPlayback extends HTML5Video { play () { if (!this._player) { - this._setup() + // User interaction is lost when Shaka instance load() fetch the manifest + // Calling consent() before setup Shaka instance fix this issue (Safari browser on macOS) + this.consent() + process.nextTick(() => this._setup()) } if (!this.isReady) { From 2296dd1b85d95cd006839dbb2de7586dfde67d18 Mon Sep 17 00:00:00 2001 From: Karim Slimani Date: Thu, 30 Jan 2020 10:54:47 +0100 Subject: [PATCH 3/7] fix: avoid uncaugth error when manifest not available --- src/clappr-dash-shaka-playback.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/clappr-dash-shaka-playback.js b/src/clappr-dash-shaka-playback.js index 3733055..b388e63 100644 --- a/src/clappr-dash-shaka-playback.js +++ b/src/clappr-dash-shaka-playback.js @@ -83,9 +83,14 @@ class DashShakaPlayback extends HTML5Video { } get presentationTimeline() { - if (!this.shakaPlayerInstance) return + // Manifest may equals null (for example, source load failure) + let manifest = this.shakaPlayerInstance + ? this.shakaPlayerInstance.getManifest() + : null - return this.shakaPlayerInstance.getManifest().presentationTimeline + return manifest + ? manifest.presentationTimeline + : null } get bandwidthEstimate() { From 2393e2a520f4a1ff669904f9cdf88cd56f9fe3aa Mon Sep 17 00:00:00 2001 From: Karim Slimani Date: Thu, 30 Jan 2020 11:13:19 +0100 Subject: [PATCH 4/7] chore: use latest level selector plugin in dev. index page Use jsDelivr npm version over gh. --- public/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/index.html b/public/index.html index 7417573..4b0720f 100644 --- a/public/index.html +++ b/public/index.html @@ -44,8 +44,8 @@ }) } - + + - From 8244eeb3b1ffe843f191fd004504c5ee18ace481 Mon Sep 17 00:00:00 2001 From: Karim Slimani Date: Thu, 30 Jan 2020 11:22:05 +0100 Subject: [PATCH 5/7] docs(readme): update jsDelivr script urls --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index c3d6435..b232547 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ A [clappr](https://github.com/clappr/clappr) playback to play dash based on the amazing [shaka-player](https://github.com/google/shaka-player). -> CDN JSDELIVR: https://cdn.jsdelivr.net/gh/clappr/dash-shaka-playback@latest/dist/dash-shaka-playback.js +> CDN JSDELIVR: https://cdn.jsdelivr.net/npm/dash-shaka-playback@latest/dist/dash-shaka-playback.min.js > > CDNJS: https://cdnjs.cloudflare.com/ajax/libs/dash-shaka-playback/2.0.5/dash-shaka-playback.js > @@ -24,8 +24,8 @@ A [clappr](https://github.com/clappr/clappr) playback to play dash based on the ```html - - + + From a4535aeb0a7e5791d3d4f6be301ccbb9e52cb278 Mon Sep 17 00:00:00 2001 From: Karim Slimani Date: Fri, 31 Jan 2020 11:37:56 +0100 Subject: [PATCH 6/7] feat: add level property in PLAYBACK_LEVELS_AVAILABLE event object --- src/clappr-dash-shaka-playback.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/clappr-dash-shaka-playback.js b/src/clappr-dash-shaka-playback.js index b388e63..623d418 100644 --- a/src/clappr-dash-shaka-playback.js +++ b/src/clappr-dash-shaka-playback.js @@ -401,7 +401,7 @@ class DashShakaPlayback extends HTML5Video { _fillLevels () { if (this._levels.length === 0) { - this._levels = this.videoTracks.map((videoTrack) => { return {id: videoTrack.id, label: `${videoTrack.height}p`} }).reverse() + this._levels = this.videoTracks.map((videoTrack) => { return {id: videoTrack.id, level: videoTrack, label: `${videoTrack.height}p`} }).reverse() this.trigger(Events.PLAYBACK_LEVELS_AVAILABLE, this.levels) } } From 74c8a627af10390dd53873ead660c8591db68846 Mon Sep 17 00:00:00 2001 From: Karim Slimani Date: Tue, 4 Feb 2020 18:12:14 +0100 Subject: [PATCH 7/7] fix: handle tracks with multiple languages Change default track label format. Add language in tracks label when required. Ensure tracks are sorted. --- src/clappr-dash-shaka-playback.js | 43 ++++++++++++++++++++++++++++--- 1 file changed, 39 insertions(+), 4 deletions(-) diff --git a/src/clappr-dash-shaka-playback.js b/src/clappr-dash-shaka-playback.js index 623d418..f377160 100644 --- a/src/clappr-dash-shaka-playback.js +++ b/src/clappr-dash-shaka-playback.js @@ -399,11 +399,46 @@ class DashShakaPlayback extends HTML5Video { this._checkForClosedCaptions() } - _fillLevels () { - if (this._levels.length === 0) { - this._levels = this.videoTracks.map((videoTrack) => { return {id: videoTrack.id, level: videoTrack, label: `${videoTrack.height}p`} }).reverse() - this.trigger(Events.PLAYBACK_LEVELS_AVAILABLE, this.levels) + _hasMultipleLanguages() { + let lang + let tracks = this.videoTracks + + for (let i = 0; i < tracks.length; ++i) { + if (i === 0) { + lang = tracks[i].language + continue + } + + if (lang !== tracks[i].language) + return true } + + return false + } + + _fillLevels () { + if (this._levels.length !== 0) + return + + // If multiple language available, add it to label + let labelWithLanguage = this._hasMultipleLanguages() + + this._levels = this.videoTracks.map((videoTrack) => { + return { + id: videoTrack.id, + level: videoTrack, + label: labelWithLanguage ? `${videoTrack.bandwidth/1000}Kbps - ${videoTrack.language}` : `${videoTrack.bandwidth/1000}Kbps`, + } + }) + + if (labelWithLanguage) + // Sort by language ASC, bandwidth DESC + this._levels.sort((a, b) => (a.level.language > b.level.language) ? 1 : (a.level.language === b.level.language) ? ((a.level.bandwidth < b.level.bandwidth) ? 1 : -1) : -1 ) + else + // Sort by bandwidth DESC + this._levels.sort((a, b) => (a.level.bandwidth < b.level.bandwidth) ? 1 : -1) + + this.trigger(Events.PLAYBACK_LEVELS_AVAILABLE, this.levels) } _startToSendStats () {