From 28776ad695ad5b861668e480bedb21731d98dcb1 Mon Sep 17 00:00:00 2001
From: Andrew Noblet <andrewbnoblet@gmail.com>
Date: Tue, 7 Mar 2023 09:38:17 -0500
Subject: [PATCH] feat(cxl-ui): [cxl-jw-player] add nextupoffset attribute

---
 packages/cxl-ui/src/components/cxl-jw-player/index.js |  1 -
 .../src/components/cxl-jw-player/mixins/BaseMixin.js  |  4 ++++
 .../components/cxl-jw-player/mixins/NextUpMixin.js    | 11 ++++++++++-
 .../cxl-ui/cxl-jw-player/playlist.stories.js          |  3 +++
 4 files changed, 17 insertions(+), 2 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
index 903c10535..5504602a4 100644
--- 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
index db0ac098d..05d5a92cb 100644
--- a/packages/cxl-ui/src/components/cxl-jw-player/mixins/BaseMixin.js
+++ b/packages/cxl-ui/src/components/cxl-jw-player/mixins/BaseMixin.js
@@ -34,6 +34,7 @@ export function BaseMixin(BaseClass) {
     firstUpdated(_changedProperties) {
       super.firstUpdated(_changedProperties);
 
+      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
index 3b8797d51..b2332cbc5 100644
--- 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,16 @@
 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 = '-60';
+
+    async _beforeSetup() {
+      this.config.nextupoffset = this.nextupoffset;
+    }
+
     async _setup() {
       await super._setup();
 
@@ -31,7 +38,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
index 1db9e33ae..5759fc811 100644
--- 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: '-60',
     playlistId: 'tAxwbNsA',
     playlistSource: '',
     pluginPath: 'https://cxl.com/institute/wp-content/plugins/cxl-jwplayer/',