cxl jwplayer upgrades & tweaks

packages/cxl-ui/scss/jw-player/chapter.scss → packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player-chapter-navigation.scss

@@ -14,6 +14,10 @@
   background: var(--lumo-shade);
   gap: var(--lumo-space-s);
 
+  &[hidden] {
+    display: none;
+  }
+
   .close {
     font-size: var(--lumo-font-size-xs);
     cursor: pointer;

packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player-next-up.scss

@@ -0,0 +1,3 @@
+.jw-next-up-cta {
+  pointer-events: all;
+}

packages/cxl-ui/scss/jw-player/jw-player.scss → packages/cxl-ui/scss/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 {
@@ -39,6 +35,11 @@
   justify-content: center;
 }
 
+.cxl-jw-player-container {
+  display: grid;
+  height: 100%;
+}
+
 .flex {
   display: flex;
   height: 100%;

packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player-transcript-shadow.scss

@@ -0,0 +1,3 @@
+:host(:not([hidden])) {
+  display: block;
+}

packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player-transcript.scss

@@ -0,0 +1,3 @@
+:host(:not([hidden])) {
+  display: block;
+}

packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player.scss

@@ -0,0 +1,25 @@
+cxl-jw-player {
+  .jw-player-button {
+    width: 32px;
+    fill: rgba(255, 255, 255, 0.8);
+
+    &:hover {
+      fill: rgba(255, 255, 255, 1);
+    }
+  }
+
+  .jw-related-item {
+    height: 100% !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .jwplayer:not(.jw-flag-small-player) .jw-related-item-next-up {
+    .jw-related-item-poster {
+      height: 100%;
+    }
+
+    .jw-related-item-title {
+      position: absolute;
+      bottom: 0;
+    }
+  }
+}

packages/cxl-ui/src/components/jw-player/README.md → packages/cxl-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:

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

packages/cxl-ui/src/components/jw-player/index.html.js → packages/cxl-ui/src/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`

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

@@ -0,0 +1,48 @@
+import { LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import style from '../../styles/cxl-jw-player/cxl-jw-player-css';
+import shadowStyle from '../../styles/cxl-jw-player/cxl-jw-player-shadow-css';
+import { template } from './index.html';
+import {
+  BaseMixin,
+  ChapterNavigationMixin,
+  NextUpMixin,
+  SavePositionMixin,
+  TranscriptMixin,
+} from './mixins';
+import { mixin } from './utility';
+
+@customElement('cxl-jw-player')
+export class CXLJWPlayerElement extends mixin(LitElement, [
+  BaseMixin,
+  TranscriptMixin,
+  ChapterNavigationMixin,
+  NextUpMixin,
+  SavePositionMixin,
+]) {
+  config = {
+    width: '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 [shadowStyle];
+  }
+
+  render() {
+    return template.bind(this)();
+  }
+
+  async __setup() {
+    await super.__setup();
+
+    this.__addStyle(style);
+  }
+}

packages/cxl-ui/src/components/jw-player/mixins/BaseMixin.js → packages/cxl-ui/src/components/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');

packages/cxl-ui/src/components/cxl-jw-player/mixins/NextUpMixin.js

@@ -0,0 +1,42 @@
+import { html, render } from 'lit';
+import style from '../../../styles/cxl-jw-player/cxl-jw-player-next-up-css';
+export function NextUpMixin(BaseClass) {
+  class Mixin extends BaseClass {
+    __nextUpCTA;
+
+    async __setup() {
+      await super.__setup();
+
+      this.__addStyle(style);
+
+      this.__nextUpCTA = document.createElement('div');
+      this.__nextUpCTA.classList.add('jw-next-up-cta');
+
+      const container = this.querySelector('.jw-nextup-container');
+      container.insertBefore(this.__nextUpCTA, container.firstChild);
+
+      this.__updateNextUp();
+      this.__jwPlayer.on('playlistItem', this.__updateNextUp.bind(this));
+    }
+
+    __updateNextUp() {
+      const index = this.__jwPlayer.getPlaylistIndex();
+      const playlistItem = this.__jwPlayer.getPlaylistItem(index + 1);
+
+      if (playlistItem && playlistItem.coursePage) {
+        render(this.__getTemplate(playlistItem), this.__nextUpCTA);
+      }
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    __getTemplate(playlistItem) {
+      return html`
+        <a href=${playlistItem.coursePage}>
+          <vaadin-button role="link" theme="primary">Go to the course page</vaadin-button>
+        </a>
+      `;
+    }
+  }
+
+  return Mixin;
+}

packages/cxl-ui/src/components/jw-player/mixins/SavePositionMixin.js → packages/cxl-ui/src/components/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();
     }