diff --git a/packages/cxl-ui/src/components/cxl-jw-player/mixins/BaseMixin.js b/packages/cxl-ui/src/components/cxl-jw-player/mixins/BaseMixin.js index 11fc4ae3..225f748d 100644 --- a/packages/cxl-ui/src/components/cxl-jw-player/mixins/BaseMixin.js +++ b/packages/cxl-ui/src/components/cxl-jw-player/mixins/BaseMixin.js @@ -18,6 +18,10 @@ export function BaseMixin(BaseClass) { _jwPlayerContainer; + _mediaId + + _playlistId; + // Device Detector media query. _wideMediaQuery = '(min-width: 750px)'; @@ -92,7 +96,25 @@ export function BaseMixin(BaseClass) { } // eslint-disable-next-line class-methods-use-this, no-empty-function - _beforeSetup() {} + _beforeSetup() { + if(this.mediaId) { + this._mediaId = this.mediaId; + } + + if(this.mediaSource) { + const url = new URL(this.mediaSource); + this._mediaId = url.pathname.split('/').pop(); + } + + if(this.playlistId) { + this._playlistId = this.playlistId; + } + + if(this.playlistSource) { + const url = new URL(this.playlistSource); + this._playlistId = url.pathname.split('/').pop(); + } + } async _getChapters() { const playlistItem = this._jwPlayer.getPlaylistItem(); diff --git a/packages/cxl-ui/src/components/cxl-jw-player/mixins/StateMixin.js b/packages/cxl-ui/src/components/cxl-jw-player/mixins/StateMixin.js index 1046210a..c0ea4016 100644 --- a/packages/cxl-ui/src/components/cxl-jw-player/mixins/StateMixin.js +++ b/packages/cxl-ui/src/components/cxl-jw-player/mixins/StateMixin.js @@ -7,15 +7,15 @@ export function StateMixin(BaseClass) { _userId; async _index() { - if (this.playlistId) { + if (this._playlistId) { const index = - localStorage.getItem(`cxl-jw-player-${this.playlistId}-index`) || + localStorage.getItem(`cxl-jw-player-${this._playlistId}-index`) || this._jwPlayer.getPlaylistIndex(); this._jwPlayer.playlistItem(index); this._jwPlayer.on('playlistItem', async ({ index }) => { - localStorage.setItem(`cxl-jw-player-${this.playlistId}-index`, index); + localStorage.setItem(`cxl-jw-player-${this._playlistId}-index`, index); }); } } @@ -49,28 +49,30 @@ export function StateMixin(BaseClass) { } _position() { - if (this.mediaId) { + if (this._mediaId) { this._setPosition(); } - if (this.playlistId) { + if (this._playlistId) { this._jwPlayer.on('playlistItem', async ({ index }) => { - await jwplayer().getPlaylistItemPromise(index); + await this._jwPlayer.getPlaylistItemPromise(index); this._setPosition(); }); } this._jwPlayer.on('seek time', ({ position }) => { - const mediaId = this.mediaId || this._jwPlayer.getPlaylistItem().mediaid; + const mediaId = this._mediaId || this._jwPlayer.getPlaylistItem().mediaid; localStorage.setItem(`cxl-jw-player-${mediaId}-position`, position); }); } _setPosition() { - const mediaId = this.mediaId || this._jwPlayer.getPlaylistItem().mediaid; + const mediaId = this._mediaId || this._jwPlayer.getPlaylistItem().mediaid; const position = localStorage.getItem(`cxl-jw-player-${mediaId}-position`); - this._jwPlayer.seek(Number(position)); + this._jwPlayer.on('firstFrame', () => { + this._jwPlayer.seek(Number(position)); + }); } }