feat(cxl-ui): [cxl-jw-player] add nextupoffset attribute

conversionxl · Mar 7, 2023 · 4f5889c · 4f5889c
1 parent 5fe476c
commit 4f5889c
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 4 deletions.
diff --git a/packages/cxl-ui/src/components/cxl-jw-player/index.js b/packages/cxl-ui/src/components/cxl-jw-player/index.js
@@ -22,7 +22,6 @@ export class CXLJWPlayerElement extends mixin(LitElement, [
 ]) {
   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': {},

diff --git a/packages/cxl-ui/src/components/cxl-jw-player/mixins/BaseMixin.js b/packages/cxl-ui/src/components/cxl-jw-player/mixins/BaseMixin.js
@@ -31,9 +31,10 @@ export function BaseMixin(BaseClass) {
 
     @property({ attribute: 'playlist-source', type: String }) playlistSource;
 
-    firstUpdated(_changedProperties) {
-      super.firstUpdated(_changedProperties);
+    async firstUpdated(_changedProperties) {
+      await super.firstUpdated(_changedProperties);
 
+      await this._beforeSetup();
       this._setup();
     }
 
@@ -70,6 +71,9 @@ export function BaseMixin(BaseClass) {
       this.appendChild(el);
     }
 
+    // eslint-disable-next-line class-methods-use-this, no-empty-function
+    _beforeSetup() {}
+
     async _getChapters() {
       const playlistItem = this._jwPlayer.getPlaylistItem();
       const chapters = playlistItem.tracks.filter((track) => track.kind === 'chapters');

diff --git a/packages/cxl-ui/src/components/cxl-jw-player/mixins/NextUpMixin.js b/packages/cxl-ui/src/components/cxl-jw-player/mixins/NextUpMixin.js
@@ -1,9 +1,18 @@
 import { html, render } from 'lit';
+import { property } from 'lit/decorators.js';
 import style from '../../../styles/global/cxl-jw-player/cxl-jw-player-nextup-css';
 export function NextUpMixin(BaseClass) {
   class Mixin extends BaseClass {
     _nextUpCTA;
 
+    @property({ attribute: 'nextupoffset', type: String }) nextupoffset = '-100%`';
+
+    async _beforeSetup() {
+      await super._beforeSetup();
+
+      this.config.nextupoffset = this.nextupoffset;
+    }
+
     async _setup() {
       await super._setup();
 
@@ -31,7 +40,9 @@ export function NextUpMixin(BaseClass) {
     _getTemplate(playlistItem) {
       return html`
         <a href=${playlistItem.coursePage}>
-          <vaadin-button role="link" theme="primary">Click here to continue this course</vaadin-button>
+          <vaadin-button role="link" theme="primary"
+            >Click here to continue this course</vaadin-button
+          >
         </a>
       `;
     }

diff --git a/packages/storybook/cxl-ui/cxl-jw-player/playlist.stories.js b/packages/storybook/cxl-ui/cxl-jw-player/playlist.stories.js
@@ -14,6 +14,7 @@ const Template = ({
   mediaId,
   mediaSource,
   minimumSearchLength,
+  nextupoffset,
   playlistId,
   playlistSource,
   pluginPath,
@@ -43,6 +44,7 @@ const Template = ({
       media-id=${mediaId}
       media-source=${mediaSource}
       minimum-search-length=${minimumSearchLength}
+      nextupoffset=${nextupoffset}
       playlist-id=${playlistId}
       playlist-source=${playlistSource}
       plugin-path="${pluginPath}"
@@ -61,6 +63,7 @@ Object.assign(Playlist, {
     mediaId: '',
     mediaSource: '',
     minimumSearchLength: 3,
+    nextupoffset: '-100%',
     playlistId: 'tAxwbNsA',
     playlistSource: '',
     pluginPath: 'https://cxl.com/institute/wp-content/plugins/cxl-jwplayer/',