feat: cleanup, refactor & improve the code for PHP cxl/jw-player

* jw-player height tweaks
* [jw-player] add support for sources
	cherry-pick: #236

* [cxl-jw-player] set up api endpoint
	cherry-pick: #234

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 {

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`
-    <div class="grid height-100" id="container">
+    <div class="cxl-jw-player-container" id="cxl-jw-player-container">
       <slot></slot>
       ${this.captions
         ? html`

packages/cxl-ui/src/components/jw-player/index.js

@@ -14,14 +14,14 @@ 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': {},
     },
     skin: {
       name: 'cxl-institute',
     },
+    stretching: 'uniform',
   };
 
   static get styles() {

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');

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();
     }
 

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`
     <style>
       #root-inner {
@@ -22,11 +32,15 @@ const Template = ({ captions, mediaId, minimumSearchLength, playerId, playlistId
       }
     </style>
     <jw-player
+      is-public="true"
       ?captions=${captions}
       media-id=${mediaId}
+      media-source=${mediaSource}
       minimum-search-length=${minimumSearchLength}
-      player-id=${playerId}
+      library-id=${playerId}
+      library-source=${playerSource}
       playlist-id=${playlistId}
+      playlist-source=${playlistSource}
       plugin-path="${pluginPath}"
     ></jw-player>
   `;
@@ -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/',
   },
 });