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

---
 .../cxl-ui/src/components/cxl-jw-player/index.js    |  1 -
 .../components/cxl-jw-player/mixins/BaseMixin.js    |  8 ++++++--
 .../components/cxl-jw-player/mixins/NextUpMixin.js  | 13 ++++++++++++-
 .../cxl-ui/cxl-jw-player/playlist.stories.js        |  3 +++
 4 files changed, 21 insertions(+), 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
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..3fc218bcd 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
@@ -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
index 3b8797d51..011264f7d 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,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
index 1db9e33ae..7e32092de 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: '-100%',
     playlistId: 'tAxwbNsA',
     playlistSource: '',
     pluginPath: 'https://cxl.com/institute/wp-content/plugins/cxl-jwplayer/',