feat(cxl-ui): [jw-player] add support for sources

cherry-pick: #236
conversionxl · Nov 15, 2022 · 6d4303f · 6d4303f
1 parent 2317ae1
commit 6d4303f
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 12 deletions.
diff --git 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,16 @@ export function BaseMixin(BaseClass) {
 
     @property({ attribute: 'media-id', type: String }) mediaId;
 
+    @property({ attribute: 'media-source', type: String }) mediaSource;
+
     @property({ attribute: 'player-id', type: String }) playerId;
 
+    @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 +40,17 @@ export function BaseMixin(BaseClass) {
     }
 
     get __scriptUrl() {
-      return `https://content.jwplatform.com/libraries/${this.playerId}.js`;
+      let scriptUrl;
+
+      if (this.playerId) {
+        scriptUrl = `https://content.jwplatform.com/libraries/${this.playerId}.js`;
+      } else if (this.playerSource) {
+        scriptUrl = this.playerSource;
+      } else {
+        return false;
+      }
+
+      return scriptUrl;
     }
 
     async __getChapters() {
@@ -46,21 +62,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) {
+        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() {

diff --git 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`
     <style>
       #root-inner {
@@ -24,9 +34,12 @@ const Template = ({ captions, mediaId, minimumSearchLength, playerId, playlistId
     <jw-player
       ?captions=${captions}
       media-id=${mediaId}
+      media-source=${mediaSource}
       minimum-search-length=${minimumSearchLength}
       player-id=${playerId}
+      player-source=${playerSource}
       playlist-id=${playlistId}
+      playlist-source=${playlistSource}
       plugin-path="${pluginPath}"
     ></jw-player>
   `;
@@ -37,9 +50,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/',
   },
 });