feat(cxl-ui): cxl-jw-player rename jw player component

Co-authored-by: Andrew Noblet <[email protected]> feat(cxl-ui): tweak jw player component Co-authored-by: Andrew Noblet <[email protected]> feat(cxl-ui): rename caption mixin to transcript mixin Co-authored-by: Andrew Noblet <[email protected]> feat(cxl-ui): tweak transcript mixin Co-authored-by: Andrew Noblet <[email protected]> feat(cxl-ui): rename chapter mixin to chapter navigation mixin Co-authored-by: Andrew Noblet <[email protected]> feat(cxl-ui): tweak chapter navigation mixin Co-authored-by: Andrew Noblet <[email protected]> feat(cxl-ui): add cxl-jw-player-transcript element Co-authored-by: Andrew Noblet <[email protected]> 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
conversionxl · Sep 11, 2024 · 9ee71da · 9ee71da
1 parent dfb02e1
commit 9ee71da
Show file tree

Hide file tree

Showing 22 changed files with 178 additions and 72 deletions.
diff --git a/packages/cxl-ui/scss/jw-player/chapter.scss → ...yer/cxl-jw-player-chapter-navigation.scss b/packages/cxl-ui/scss/jw-player/chapter.scss → ...yer/cxl-jw-player-chapter-navigation.scss
diff --git a/...ages/cxl-ui/scss/jw-player/jw-player.scss → ...s/cxl-jw-player/cxl-jw-player-shadow.scss b/...ages/cxl-ui/scss/jw-player/jw-player.scss → ...s/cxl-jw-player/cxl-jw-player-shadow.scss
@@ -8,10 +8,6 @@
   }
 }
 
-:host([captions]) #container {
-  grid-template-rows: 1fr max-content 1fr;
-}
-
 .captions {
   h2,
   span {

diff --git a/packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player-transcript-shadow.scss b/packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player-transcript-shadow.scss
@@ -0,0 +1,3 @@
+:host(:not([hidden])) {
+  display: block;
+}
diff --git a/packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player-transcript.scss b/packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player-transcript.scss
@@ -0,0 +1,3 @@
+:host(:not([hidden])) {
+  display: block;
+}
diff --git a/packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player.scss b/packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player.scss
@@ -0,0 +1,8 @@
+.jw-player-button {
+  width: 32px;
+  fill: rgba(255, 255, 255, 0.8);
+
+  &:hover {
+    fill: rgba(255, 255, 255, 1);
+  }
+}
diff --git a/...cxl-ui/src/components/jw-player/README.md → ...ui/src/components/cxl-jw-player/README.md b/...cxl-ui/src/components/jw-player/README.md → ...ui/src/components/cxl-jw-player/README.md
@@ -1,15 +1,16 @@
-# JW Player
+# CXL JW Player
 
 ## Usage
 
 ```
-    <jw-player
+    <cxl-jw-player
+      is-public
       captions
       media-id="fZ0XiGdb"
       minimum-search-length="3"
-      player-id="5CFJNXKb"
+      library-id="5CFJNXKb"
       plugin-path="https://cxl.com/institute/wp-content/plugins/cxl-jwplayer/"
-    ></jw-player>
+    ></cxl-jw-player>
 ```
 
 ## Features:

diff --git a/packages/cxl-ui/src/components/cxl-jw-player/cxl-jw-player-transcript/index.js b/packages/cxl-ui/src/components/cxl-jw-player/cxl-jw-player-transcript/index.js
@@ -0,0 +1,21 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import style from '../../../styles/cxl-jw-player/cxl-jw-player-transcript-css';
+import shadowStyle from '../../../styles/cxl-jw-player/cxl-jw-player-transcript-shadow-css';
+
+@customElement('cxl-jw-player-transcript')
+export class CXLJWPlayerTranscriptElement extends LitElement {
+  static get styles() {
+    return [shadowStyle];
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+
+  async __setup() {
+    await super.__setup();
+
+    this.__addStyle(style);
+  }
+}
diff --git a/...ui/src/components/jw-player/index.html.js → ...rc/components/cxl-jw-player/index.html.js b/...ui/src/components/jw-player/index.html.js → ...rc/components/cxl-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`

diff --git a/.../cxl-ui/src/components/jw-player/index.js → ...-ui/src/components/cxl-jw-player/index.js b/.../cxl-ui/src/components/jw-player/index.js → ...-ui/src/components/cxl-jw-player/index.js
@@ -1,34 +1,41 @@
 import { LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import { BaseMixin, CaptionMixin, ChapterMixin, SavePositionMixin } from './mixins';
-import style from '../../styles/jw-player/jw-player-css';
+import { BaseMixin, TranscriptMixin, ChapterNavigationMixin, SavePositionMixin } from './mixins';
+import style from '../../styles/cxl-jw-player/cxl-jw-player-css';
+import shadowStyle from '../../styles/cxl-jw-player/cxl-jw-player-shadow-css';
 import { mixin } from './utility';
 import { template } from './index.html';
 
-@customElement('jw-player')
-export class JWPlayerElement extends mixin(LitElement, [
+@customElement('cxl-jw-player')
+export class CXLJWPlayerElement extends mixin(LitElement, [
   BaseMixin,
-  CaptionMixin,
-  ChapterMixin,
+  TranscriptMixin,
+  ChapterNavigationMixin,
   SavePositionMixin,
 ]) {
   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() {
-    return [style];
+    return [shadowStyle];
   }
 
   render() {
     return template.bind(this)();
   }
+
+  async __setup() {
+    await super.__setup();
+
+    this.__addStyle(style);
+  }
 }
diff --git a/.../components/jw-player/mixins/BaseMixin.js → ...ponents/cxl-jw-player/mixins/BaseMixin.js b/.../components/jw-player/mixins/BaseMixin.js → ...ponents/cxl-jw-player/mixins/BaseMixin.js
@@ -1,3 +1,4 @@
+import { render } from 'lit';
 import { property } from 'lit/decorators.js';
 import { throttle } from 'lodash-es';
 import { parseSync } from 'subtitle';
@@ -16,10 +17,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: 'library-source', type: String }) librarySource;
 
     @property({ attribute: 'playlist-id', type: String }) playlistId;
 
+    @property({ attribute: 'playlist-source', type: String }) playlistSource;
+
     firstUpdated(_changedProperties) {
       super.firstUpdated(_changedProperties);
 
@@ -34,33 +43,60 @@ 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.librarySource) {
+        scriptUrl = this.librarySource;
+      } else {
+        return false;
+      }
+
+      return scriptUrl;
+    }
+
+    __addStyle(style) {
+      const el = document.createElement('style');
+      render(style, el);
+      this.appendChild(el);
     }
 
     async __getChapters() {
       const playlistItem = this.__jwPlayer.getPlaylistItem();
-      const { file } = playlistItem.tracks.filter((track) => track.kind === 'chapters')[0];
+      const chapters = playlistItem.tracks.filter((track) => track.kind === 'chapters');
+      const { file } = chapters.length > 0 ? chapters[0] : '';
       const response = await (await fetch(file)).text();
 
       return parseSync(response);
     }
 
     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 +126,15 @@ 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/...nts/jw-player/mixins/SavePositionMixin.js → ...cxl-jw-player/mixins/SavePositionMixin.js b/...nts/jw-player/mixins/SavePositionMixin.js → ...cxl-jw-player/mixins/SavePositionMixin.js
@@ -1,6 +1,6 @@
 export function SavePositionMixin(BaseClass) {
   class Mixin extends BaseClass {
-    __endpoint = '';
+    __endpoint;
 
     __nonce;
 
@@ -9,6 +9,12 @@ export function SavePositionMixin(BaseClass) {
     async __setup() {
       await super.__setup();
 
+      this.__endpoint = `${window.ajaxurl}?action=jwplayer_save_position`;
+
+      if ( typeof window.cxl_pum_vars !== 'undefined' ) {
+        this.__nonce = window.cxl_pum_vars.nonce;
+      }
+
       this.__loadPosition();
     }
 

diff --git a/...mponents/jw-player/mixins/CaptionMixin.js → ...s/cxl-jw-player/mixins/TranscriptMixin.js b/...mponents/jw-player/mixins/CaptionMixin.js → ...s/cxl-jw-player/mixins/TranscriptMixin.js
@@ -3,13 +3,13 @@ import { debounce } from 'lodash-es';
 import Mark from 'mark.js';
 import { parseSync } from 'subtitle';
 
-export function CaptionMixin(BaseClass) {
+export function TranscriptMixin(BaseClass) {
   class Mixin extends BaseClass {
     __debouncedSearch;
 
     __mark;
 
-    @property({ type: Boolean }) captions = false;
+    @property({ reflect: true, type: Boolean }) captions = false;
 
     @state() __currentCue = 0;
 
@@ -117,12 +117,19 @@ export function CaptionMixin(BaseClass) {
     async __setup() {
       await super.__setup();
 
-      this.__setupCaptions();
+      this.__setupTranscript();
     }
 
-    async __setupCaptions() {
+    async __setupTranscript() {
       if (!this.__jwPlayer) return;
 
+      this.__jwPlayer.addButton(
+        `<svg class="jw-player-button" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" aria-hidden="true" viewBox="0 0 1000 1000"><g><path d="M662 603l131 131c16 16 16 42 0 59-16 16-43 16-59 0l-131-131C562 691 512 708 458 708c-138 0-250-112-250-250 0-138 112-250 250-250 138 0 250 112 250 250 0 54-17 104-46 145zM458 646c104 0 188-84 188-188S562 271 458 271 271 355 271 458s84 188 187 188z"></path></g></svg>`,
+        'Transcript',
+        this.__toggleTranscript.bind(this),
+        'toggle-transcript'
+      );
+
       if (this.captions) {
         this.__tracks = await this.__getTracks();
 
@@ -138,16 +145,26 @@ export function CaptionMixin(BaseClass) {
 
       if (changedProperties.has('captions')) {
         if (this.captions) {
-          this.__setupCaptions();
+          this.__setupTranscript();
         } else if (this.mark) {
           this.__mark.unmark();
         }
       }
     }
 
+    __attachListeners() {
+      super.__attachListeners();
+    }
+
     __toggleShouldScroll() {
       this.shouldScroll = !this.shouldScroll;
     }
+
+    __toggleTranscript() {
+      // this.dispatchEvent(new CustomEvent('toggle-transcript'));
+
+      this.captions = !this.captions;
+    }
   }
 
   return Mixin;

diff --git a/...ts/jw-player/mixins/chapter/index.html.js → ...r/mixins/chapter-navigation/index.html.js b/...ts/jw-player/mixins/chapter/index.html.js → ...r/mixins/chapter-navigation/index.html.js
@@ -13,8 +13,7 @@ export const chapterNavigationTemplate = function (chapters) {
         theme="icon small primary"
         aria-label="Close"
       >
-        <!-- <vaadin-icon icon="lumo:close-small"></vaadin-icon> -->
-        &#10005;
+        <vaadin-icon icon="lumo:cross"></vaadin-icon>
       </vaadin-button>
     </div>
     <ul class="chapter-navigation-list">

diff --git a/...ponents/jw-player/mixins/chapter/index.js → ...player/mixins/chapter-navigation/index.js b/...ponents/jw-player/mixins/chapter/index.js → ...player/mixins/chapter-navigation/index.js
@@ -1,13 +1,13 @@
 import { render } from 'lit';
 import { property } from 'lit/decorators.js';
-import style from '../../../../styles/jw-player/chapter-css';
+import style from '../../../../styles/cxl-jw-player/cxl-jw-player-chapter-navigation-css';
 import { chapterNavigationTemplate } from './index.html';
 
-export function ChapterMixin(BaseClass) {
+export function ChapterNavigationMixin(BaseClass) {
   class Mixin extends BaseClass {
     @property({ attribute: 'plugin-path', type: String }) pluginPath;
 
-    async __createChapterNavigation() {
+    async __setupChapterNavigation() {
       const chapters = await this.__getChapters();
 
       this.__chapterNavigation = document.createElement('div');
@@ -19,19 +19,13 @@ export function ChapterMixin(BaseClass) {
       this.__jwPlayerContainer.appendChild(this.__chapterNavigation);
 
       this.__jwPlayer.addButton(
-        `${this.pluginPath}images/chapter-bookmark-icon.svg`,
+        `<svg class="jw-player-button" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" aria-hidden="true" viewBox="0 0 1000 1000"><g><path d="M146 325c-42 0-67-26-67-63 0-37 25-63 67-63 42 0 67 26 67 63 0 37-25 63-67 63z m0 250c-42 0-67-26-67-63 0-37 25-63 67-63 42 0 67 26 67 63 0 37-25 63-67 63z m0 250c-42 0-67-26-67-63 0-37 25-63 67-63 42 0 67 26 67 63 0 37-25 63-67 63zM333 258c0-18 15-33 34-33h516c18 0 33 15 34 33 0 18-15 33-34 34H367c-18 0-33-15-34-34z m0 250c0-18 15-33 34-33h516c18 0 33 15 34 33s-15 33-34 34H367c-18 0-33-15-34-34z m0 250c0-18 15-33 34-33h516c18 0 33 15 34 33s-15 33-34 34H367c-18 0-33-15-34-34z"></path></g></svg>`,
         'Show Chapters',
         this.__toggleChapterNavigation.bind(this),
         'toggle-chapters'
       );
     }
 
-    __addStyle() {
-      const el = document.createElement('style');
-      render(style, el);
-      this.appendChild(el);
-    }
-
     __chapterSeek(e) {
       const index = Number(e.currentTarget.dataset.index);
       this.__jwPlayer.seek(this.__chapters[index].data.start / 1000);
@@ -40,8 +34,8 @@ export function ChapterMixin(BaseClass) {
     async __setup() {
       await super.__setup();
 
-      this.__addStyle();
-      this.__createChapterNavigation();
+      this.__addStyle(style);
+      this.__setupChapterNavigation();
     }
 
     __toggleChapterNavigation() {

diff --git a/packages/cxl-ui/src/components/cxl-jw-player/mixins/index.js b/packages/cxl-ui/src/components/cxl-jw-player/mixins/index.js
@@ -0,0 +1,4 @@
+export { BaseMixin } from './BaseMixin';
+export { TranscriptMixin } from './TranscriptMixin';
+export { ChapterNavigationMixin } from './chapter-navigation';
+export { SavePositionMixin } from './SavePositionMixin';
diff --git a/...xl-ui/src/components/jw-player/utility.js → ...i/src/components/cxl-jw-player/utility.js b/...xl-ui/src/components/jw-player/utility.js → ...i/src/components/cxl-jw-player/utility.js
diff --git a/packages/cxl-ui/src/components/jw-player/mixins/index.js b/packages/cxl-ui/src/components/jw-player/mixins/index.js
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,10 +8,6 @@ @@
       }
     }
-    :host([captions]) #container {
-      grid-template-rows: 1fr max-content 1fr;
-    }
     .captions {
       h2,
       span {
@@ Expand Down @@