feat(cxl-ui): [cxl-jw-player] add separate mobile CTA

conversionxl · Mar 7, 2023 · 71a4554 · 71a4554
1 parent 4f5889c
commit 71a4554
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 8 deletions.
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
@@ -1,4 +1,16 @@
 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;

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
@@ -4,6 +4,7 @@ import { property } from 'lit/decorators.js';
 import { throttle } from 'lodash-es';
 import { parseSync } from 'subtitle';
 import { MD5 } from 'crypto-js';
+import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 
 export function BaseMixin(BaseClass) {
   class Mixin extends BaseClass {
@@ -15,6 +16,9 @@ export function BaseMixin(BaseClass) {
 
     _jwPlayerContainer;
 
+    // Device Detector media query.
+    _wideMediaQuery = '(min-width: 750px)';
+
     @property({ attribute: 'api-secret', type: String }) apiSecret = '';
 
     @property({ attribute: 'is-public', type: Boolean }) isPublic;
@@ -31,6 +35,20 @@ export function BaseMixin(BaseClass) {
 
     @property({ attribute: 'playlist-source', type: String }) playlistSource;
 
+    // MediaQueryController.
+    @property({ type: Boolean, reflect: true })
+    wide;
+
+    constructor() {
+      super();
+
+      this.addController(
+        new MediaQueryController(this._wideMediaQuery, (matches) => {
+          this.wide = matches;
+        })
+      );
+    }
+
     async firstUpdated(_changedProperties) {
       await super.firstUpdated(_changedProperties);
 

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
@@ -3,7 +3,8 @@ 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;
+    _nextupCTA;
+    _nextupCTAMobile;
 
     @property({ attribute: 'nextupoffset', type: String }) nextupoffset = '-100%`';
 
@@ -18,11 +19,15 @@ export function NextUpMixin(BaseClass) {
 
       this._addStyle(style);
 
-      this._nextUpCTA = document.createElement('div');
-      this._nextUpCTA.classList.add('jw-nextup-cta');
+      this._nextupCTA = document.createElement('div');
+      this._nextupCTA.classList.add('jw-nextup-cta');
+
+      this._nextupCTAMobile = document.createElement('div');
+      this._nextupCTAMobile.classList.add('jw-nextup-cta-mobile');
 
       const container = this.querySelector('.jw-nextup-container');
-      container.insertBefore(this._nextUpCTA, container.firstChild);
+      container.insertBefore(this._nextupCTA, container.firstChild);
+      container.insertBefore(this._nextupCTAMobile, container.firstChild);
 
       this._updateNextUp();
       this._jwPlayer.on('playlistItem', this._updateNextUp.bind(this));
@@ -32,17 +37,25 @@ export function NextUpMixin(BaseClass) {
       const playlistItem = this._jwPlayer.getPlaylistItem();
 
       if (playlistItem && playlistItem.coursePage) {
-        render(this._getTemplate(playlistItem), this._nextUpCTA);
+        render(this._getTemplate(playlistItem), this._nextupCTA);
+        render(this._getMobileTemplate(playlistItem), this._nextupCTAMobile);
       }
     }
 
+    // eslint-disable-next-line class-methods-use-this
+    _getMobileTemplate(playlistItem) {
+      return html`
+        <a href=${playlistItem.coursePage}>
+          <vaadin-button role="link" theme="primary small">Go to course</vaadin-button>
+        </a>
+      `;
+    }
+
     // eslint-disable-next-line class-methods-use-this
     _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">Go to course</vaadin-button>
         </a>
       `;
     }