feat(cxl-ui): [cxl-jw-player] rename playerId, playerSource to librar…

…yId, librarySource feat(cxl-ui): [cxl-jw-player] add hidden property style feat(cxl-ui): [cxl-jw-player] set container display and height feat(cxl-ui): [cxl-jw-player] fix playlist story feat(cxl-ui): [cxl-jw-player] fix playlist styles feat(cxl-ui): [cxl-jw-player] add next up CTA feat(cxl-ui): [cxl-jw-player] hide default next up overlay feat(cxl-ui): [cxl-jw-player] add pointer events to the link not the container feat(cxl-ui): [cxl-jw-player] move next up styles to the global directory feat(cxl-ui): [cxl-jw-player] refactor private methods and properties to protected feat(cxl-ui): [cxl-jw-player] refactor for playlists feat(cxl-ui): [cxl-jw-player] move styles to global directory feat(cxl-ui): [cxl-jw-player] remove save position endpoint request feat(cxl-ui): [cxl-jw-player] add the ability to save the playback rate feat(cxl-ui): [cxl-jw-player] add the ability to play protected content feat(cxl-ui): [cxl-jw-player] fix media and playlist source url feat(cxl-ui): [cxl-jw-player] fix and improve next up feature feat(cxl-ui): [cxl-jw-player] remove api secret default value feat(cxl-ui): [cxl-jw-player] fix save position when using a playlist
conversionxl · Sep 11, 2024 · 3a4e6a6 · 3a4e6a6
1 parent 0a8a484
commit 3a4e6a6
Show file tree

Hide file tree

Showing 23 changed files with 455 additions and 223 deletions.
diff --git a/packages/cxl-ui/package.json b/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",

diff --git a/packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player-shadow.scss b/packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player-shadow.scss
@@ -1,10 +1,12 @@
-@use "~@conversionxl/cxl-lumo-styles/scss/mixins";
+@use '~@conversionxl/cxl-lumo-styles/scss/mixins';
 
 :host {
   box-sizing: border-box;
+}
 
-  [active] {
-    background-color: var(--lumo-shade-10pct);
+:host([has-captions]) {
+  .cxl-jw-player-container {
+    display: grid;
   }
 }
 
@@ -35,6 +37,10 @@
   justify-content: center;
 }
 
+.cxl-jw-player-container {
+  height: 100%;
+}
+
 .flex {
   display: flex;
   height: 100%;

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
diff --git a/...yer/cxl-jw-player-chapter-navigation.scss → ...yer/cxl-jw-player-chapter-navigation.scss b/...yer/cxl-jw-player-chapter-navigation.scss → ...yer/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;

diff --git a/packages/cxl-ui/scss/global/cxl-jw-player/cxl-jw-player-nextup.scss b/packages/cxl-ui/scss/global/cxl-jw-player/cxl-jw-player-nextup.scss
@@ -0,0 +1,20 @@
+cxl-jw-player {
+  .jw-nextup-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+
+    .jw-nextup-cta {
+      max-width: 400px;
+      width: 64%;
+
+      a {
+        pointer-events: all;
+
+        vaadin-button {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
diff --git a/...l-jw-player/cxl-jw-player-transcript.scss → ...l-jw-player/cxl-jw-player-transcript.scss b/...l-jw-player/cxl-jw-player-transcript.scss → ...l-jw-player/cxl-jw-player-transcript.scss
diff --git a/packages/cxl-ui/scss/global/cxl-jw-player/cxl-jw-player.scss b/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;
+    }
+  }
+}
diff --git a/packages/cxl-ui/src/components/cxl-jw-player/README.md b/packages/cxl-ui/src/components/cxl-jw-player/README.md
@@ -62,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:
 

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
@@ -1,6 +1,6 @@
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import style from '../../../styles/cxl-jw-player/cxl-jw-player-transcript-css';
+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')
@@ -13,9 +13,9 @@ export class CXLJWPlayerTranscriptElement extends LitElement {
     return html`<slot></slot>`;
   }
 
-  async __setup() {
-    await super.__setup();
+  async _setup() {
+    await super._setup();
 
-    this.__addStyle(style);
+    this._addStyle(style);
   }
 }
diff --git a/packages/cxl-ui/src/components/cxl-jw-player/index.html.js b/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}

diff --git a/packages/cxl-ui/src/components/cxl-jw-player/index.js b/packages/cxl-ui/src/components/cxl-jw-player/index.js
@@ -1,20 +1,28 @@
 import { LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import { BaseMixin, TranscriptMixin, ChapterNavigationMixin, SavePositionMixin } from './mixins';
-import style from '../../styles/cxl-jw-player/cxl-jw-player-css';
+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 { mixin } from './utility';
 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,
-  SavePositionMixin,
+  NextUpMixin,
+  StateMixin,
 ]) {
   config = {
     width: '100%',
+    nextupoffset: '-60',
     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': {},
@@ -33,9 +41,9 @@ export class CXLJWPlayerElement extends mixin(LitElement, [
     return template.bind(this)();
   }
 
-  async __setup() {
-    await super.__setup();
+  async _setup() {
+    await super._setup();
 
-    this.__addStyle(style);
+    this._addStyle(style);
   }
 }