From 0f9111cfe4c6900f8838694e80165b702e35c1bd Mon Sep 17 00:00:00 2001 From: saasfreelancer Date: Wed, 26 Oct 2022 16:39:22 +0500 Subject: [PATCH] feat: cleanup, refactor & improve the code for PHP `cxl/jw-player` * jw-player height tweaks * [jw-player] add support for sources cherry-pick: https://github.com/conversionxl/aybolit/pull/236 * [cxl-jw-player] set up api endpoint cherry-pick: https://github.com/conversionxl/aybolit/pull/234 --- packages/cxl-ui/scss/jw-player/jw-player.scss | 4 -- .../src/components/jw-player/index.html.js | 2 +- .../cxl-ui/src/components/jw-player/index.js | 2 +- .../components/jw-player/mixins/BaseMixin.js | 60 +++++++++++++++---- .../jw-player/mixins/SavePositionMixin.js | 5 +- .../cxl-ui/jw-player/index.stories.js | 21 ++++++- 6 files changed, 73 insertions(+), 21 deletions(-) diff --git a/packages/cxl-ui/scss/jw-player/jw-player.scss b/packages/cxl-ui/scss/jw-player/jw-player.scss index 5868a2c64..54f4f6c4e 100644 --- a/packages/cxl-ui/scss/jw-player/jw-player.scss +++ b/packages/cxl-ui/scss/jw-player/jw-player.scss @@ -8,10 +8,6 @@ } } -:host([captions]) #container { - grid-template-rows: 1fr max-content 1fr; -} - .captions { h2, span { diff --git a/packages/cxl-ui/src/components/jw-player/index.html.js b/packages/cxl-ui/src/components/jw-player/index.html.js index fd37a2de1..0199e1eb3 100644 --- a/packages/cxl-ui/src/components/jw-player/index.html.js +++ b/packages/cxl-ui/src/components/jw-player/index.html.js @@ -5,7 +5,7 @@ import '@vaadin/text-field'; // eslint-disable-next-line func-names export const template = function () { return html` -
+
${this.captions ? html` diff --git a/packages/cxl-ui/src/components/jw-player/index.js b/packages/cxl-ui/src/components/jw-player/index.js index c0a80cb51..a53c15b61 100644 --- a/packages/cxl-ui/src/components/jw-player/index.js +++ b/packages/cxl-ui/src/components/jw-player/index.js @@ -14,7 +14,6 @@ export class JWPlayerElement extends mixin(LitElement, [ ]) { config = { width: '100%', - height: '100%', playbackRateControls: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2], plugins: { // 'http://192.168.0.101:8080/telemetry-8.20.0.js': {}, @@ -22,6 +21,7 @@ export class JWPlayerElement extends mixin(LitElement, [ skin: { name: 'cxl-institute', }, + stretching: 'uniform', }; static get styles() { diff --git a/packages/cxl-ui/src/components/jw-player/mixins/BaseMixin.js b/packages/cxl-ui/src/components/jw-player/mixins/BaseMixin.js index 5f49c5e83..df340e132 100644 --- a/packages/cxl-ui/src/components/jw-player/mixins/BaseMixin.js +++ b/packages/cxl-ui/src/components/jw-player/mixins/BaseMixin.js @@ -16,10 +16,18 @@ export function BaseMixin(BaseClass) { @property({ attribute: 'media-id', type: String }) mediaId; - @property({ attribute: 'player-id', type: String }) playerId; + @property({ attribute: 'media-source', type: String }) mediaSource; + + @property({ attribute: 'is-public', type: String }) isPublic; + + @property({ attribute: 'library-id', type: String }) libraryId; + + @property({ attribute: 'player-source', type: String }) playerSource; @property({ attribute: 'playlist-id', type: String }) playlistId; + @property({ attribute: 'playlist-source', type: String }) playlistSource; + firstUpdated(_changedProperties) { super.firstUpdated(_changedProperties); @@ -34,7 +42,17 @@ export function BaseMixin(BaseClass) { } get __scriptUrl() { - return `https://content.jwplatform.com/libraries/${this.playerId}.js`; + let scriptUrl; + + if (this.libraryId && this.isPublic) { + scriptUrl = `https://content.jwplatform.com/libraries/${this.libraryId}.js`; + } else if (this.playerSource) { + scriptUrl = this.playerSource; + } else { + return false; + } + + return scriptUrl; } async __getChapters() { @@ -46,21 +64,31 @@ export function BaseMixin(BaseClass) { } async __getMedia() { - if (!this.mediaId) return false; - - const response = await fetch(`https://cdn.jwplayer.com/v2/media/${this.mediaId}`); - const result = await response.json(); + let response; + + if (this.mediaId && this.isPublic) { + response = await fetch(`https://cdn.jwplayer.com/v2/media/${this.mediaId}`); + } else if (this.mediaSource) { + response = await fetch(this.mediaSource); + } else { + return false; + } - return result; + return response.json(); } async __getPlaylist() { - if (!this.playlistId) return false; - - const response = await fetch(`https://cdn.jwplayer.com/v2/playlists/${this.playlistId}`); - const result = await response.json(); + let response; + + if (this.playlistId) { + response = await fetch(`https://cdn.jwplayer.com/v2/playlists/${this.playlistId}`); + } else if (this.playlistSource) { + response = await fetch(`https://cdn.jwplayer.com/v2/playlists/${this.playlistId}`); + } else { + return false; + } - return result; + return response.json(); } async __loadScript() { @@ -90,6 +118,14 @@ export function BaseMixin(BaseClass) { * Each mixin has the ability to hook onto this method. */ async __setup() { + // Merge configs from `cxlJWPlayerData`. + if (typeof window.cxlJWPlayerData !== 'undefined') { + // eslint-disable-next-line camelcase + const { media_config } = window.cxlJWPlayerData[this.mediaId]; + // eslint-disable-next-line camelcase + this.config = { ...this.config, ...media_config }; + } + const jwPlayer = await this.__loadScript(); const el = document.createElement('div'); diff --git a/packages/cxl-ui/src/components/jw-player/mixins/SavePositionMixin.js b/packages/cxl-ui/src/components/jw-player/mixins/SavePositionMixin.js index 6ae10b0b6..793ea00d9 100644 --- a/packages/cxl-ui/src/components/jw-player/mixins/SavePositionMixin.js +++ b/packages/cxl-ui/src/components/jw-player/mixins/SavePositionMixin.js @@ -1,6 +1,6 @@ export function SavePositionMixin(BaseClass) { class Mixin extends BaseClass { - __endpoint = ''; + __endpoint; __nonce; @@ -9,6 +9,9 @@ export function SavePositionMixin(BaseClass) { async __setup() { await super.__setup(); + this.__endpoint = `${window.ajaxurl}?action=jwplayer_save_position`; + this.__nonce = window.cxl_pum_vars.nonce; + this.__loadPosition(); } diff --git a/packages/storybook/cxl-ui/jw-player/index.stories.js b/packages/storybook/cxl-ui/jw-player/index.stories.js index 17bf14379..d1952a593 100644 --- a/packages/storybook/cxl-ui/jw-player/index.stories.js +++ b/packages/storybook/cxl-ui/jw-player/index.stories.js @@ -5,7 +5,17 @@ export default { title: 'JW Player/JW Player', }; -const Template = ({ captions, mediaId, minimumSearchLength, playerId, playlistId, pluginPath }) => +const Template = ({ + captions, + mediaId, + mediaSource, + minimumSearchLength, + playerId, + playerSource, + playlistId, + playlistSource, + pluginPath, +}) => html` `; @@ -37,9 +51,12 @@ Object.assign(Default, { args: { captions: true, mediaId: 'fZ0XiGdb', + mediaSource: '', minimumSearchLength: 3, playerId: '5CFJNXKb', + playerSource: '', playlistId: '', + playlistSource: '', pluginPath: 'https://cxl.com/institute/wp-content/plugins/cxl-jwplayer/', }, });