JW Player

packages/cxl-ui/package.json

@@ -32,8 +32,10 @@
     "@vaadin/tooltip": "^23.3.7",
     "@vaadin/vaadin-themable-mixin": "^23.3.7",
     "cross-env": "~7.0.2",
+    "crypto-js": "^4.1.1",
     "headroom.js": "^0.12.0",
     "imports-loader": "^2.0.0",
+    "jose": "^4.13.1",
     "laravel-mix": "^6.0.39",
     "lit": "^2.2.5",
     "lodash-es": "^4.17.21",

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

@@ -1,4 +1,4 @@
-@use "~@conversionxl/cxl-lumo-styles/scss/mixins";
+@use '~@conversionxl/cxl-lumo-styles/scss/mixins';
 
 :host {
   box-sizing: border-box;
@@ -8,8 +8,11 @@
   }
 }
 
-:host([captions]) #container {
-  grid-template-rows: 1fr max-content 1fr;
+:host([captions]) {
+  #container {
+    display: grid;
+    grid-template-rows: 1fr max-content 1fr;
+  }
 }
 
 .captions {
@@ -39,6 +42,10 @@
   justify-content: center;
 }
 
+.cxl-jw-player-container {
+  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/jw-player/chapter.scss → packages/cxl-ui/scss/global/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/global/cxl-jw-player/cxl-jw-player-nextup.scss

@@ -0,0 +1,35 @@
+cxl-jw-player {
+  &[wide] {
+    .jw-nextup-cta-mobile {
+      display: none;
+    }
+  }
+
+  &:not([wide]) {
+    .jw-nextup-cta {
+      display: none;
+    }
+  }
+
+  .jw-nextup-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+
+    .jw-nextup-cta,
+    .jw-nextup-cta-mobile {
+      a {
+        pointer-events: all;
+      }
+    }
+
+    .jw-nextup-cta {
+      max-width: 400px;
+      width: 64%;
+
+      vaadin-button {
+        width: 100%;
+      }
+    }
+  }
+}

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

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

packages/cxl-ui/scss/global/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/cxl-course-dialog.js

@@ -5,7 +5,7 @@ import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
 import '@vaadin/button';
 import '@vaadin/dialog';
 import './cxl-time.js';
-import './jw-player/index.js';
+import './cxl-jw-player/index.js';
 import { dialogFooterRenderer, dialogRenderer } from '@vaadin/dialog/lit.js';
 import cxlCourseDialogGlobalStyles from '../styles/global/cxl-course-dialog-css.js';
 
@@ -64,14 +64,14 @@ export class CXLCourseDialogElement extends LitElement {
     </div>
     <section>
       ${this.video
-        ? html` <jw-player
+        ? html` <cxl-jw-player
             ?captions=${this.video.captions}
             media-id=${this.video.mediaId}
             minimum-search-length=${this.video.minimumSearchLength}
             player-id=${this.video.playerId}
             playlist-id=${this.video.playlistId}
             plugin-path="${this.video.pluginPath}"
-          ></jw-player>`
+          ></cxl-jw-player>`
         : ''}
       <div class="content">
         <p>${this.course.description}</p>

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:
@@ -61,13 +62,13 @@ Order is important as each mixin extends the previous one. In this case, `MixinT
 
 There are currently two methods which are important to the lifecycle of the component:
 
-`__setup()`
+`_setup()`
 
-This method is async and called when the component is first created. You must call `await super.__setup()` at the beginning of this method to make sure each parent class's setup method is called.
+This method is async and called when the component is first created. You must call `await super._setup()` at the beginning of this method to make sure each parent class's setup method is called.
 
-`__onTimeListener()`
+`_onTimeListener()`
 
-This method is async and called when the player's time changes. As with `__setup()`, you must call `await super.__onTimeListener()` at the beginning of this method.
+This method is async and called when the player's time changes. As with `_setup()`, you must call `await super._onTimeListener()` at the beginning of this method.
 
 Current mixins available for use:
 

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/global/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

@@ -11,34 +11,34 @@ export const template = function () {
         ? html`
             <div class="center gap search padding">
               <vaadin-text-field
-                @input=${this.__debouncedSearch}
+                @input=${this._debouncedSearch}
                 clear-button-visible
                 id="search"
                 placeholder="Type and press enter to search"
                 theme="small"
               >
                 <vaadin-icon slot="prefix" icon="lumo:search"></vaadin-icon>
               </vaadin-text-field>
-              ${this.__isSearchMinimumLength
-                ? html`<span>(${this.__matches} matches)</span>`
+              ${this._isSearchMinimumLength
+                ? html`<span>(${this._matches} matches)</span>`
                 : nothing}
               <vaadin-checkbox
-                @change=${this.__toggleShouldScroll}
-                ?checked=${this.__shouldScroll}
+                @change=${this._toggleShouldScroll}
+                ?checked=${this._shouldScroll}
                 label="Scroll"
               ></vaadin-checkbox>
             </div>
             <div class="captions padding scroll">
-              ${this.__tracks.map(
+              ${this._tracks.map(
                 (track, index) =>
                   html`${track.isChapter
-                    ? html`<h2 @click=${this.__onCaptionClick} data-index=${index}>
+                    ? html`<h2 @click=${this._onCaptionClick} data-index=${index}>
                         ${track.data.text}
                       </h2>`
                     : html`
                         <span
-                          @click=${this.__onCaptionClick}
-                          ?active=${this.__currentTrack === index}
+                          @click=${this._onCaptionClick}
+                          ?active=${this._currentTrack === index}
                           data-index=${index}
                         >
                           ${track.data.text}

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

@@ -0,0 +1,49 @@
+import { LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import style from '../../styles/global/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,
+  StateMixin,
+  TranscriptMixin,
+} from './mixins';
+import { mixin } from './utility';
+
+@customElement('cxl-jw-player')
+export class CXLJWPlayerElement extends mixin(LitElement, [
+  BaseMixin,
+  TranscriptMixin,
+  ChapterNavigationMixin,
+  NextUpMixin,
+  StateMixin,
+]) {
+  config = {
+    height: '100%',
+    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);
+  }
+}