Skip to content

Commit

Permalink
feat(cxl-ui): cxl-jw-player add separate mobile CTA
Browse files Browse the repository at this point in the history 
feat(cxl-ui): cxl-jw-player fix chapter navigation when using playlists

feat(cxl-ui): cxl-jw-player fix CTA pointer events

feat(cxl-ui): cxl-jw-player fix saving position when using a playlist

feat(cxl-ui): cxl-jw-player update component references

feat(cxl-ui): cxl-jw-player fix poor refactoring
  • Loading branch information
@anoblet
anoblet committed Sep 11, 2024
1 parent ab8abe3 commit 702065a
Show file tree
Hide file tree
Showing 10 changed files with 134 additions and 59 deletions.
9 changes: 7 additions & 2 deletions packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player-shadow.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,16 @@

:host {
box-sizing: border-box;

[active] {
background-color: var(--lumo-shade-10pct);
}
}

:host([has-captions]) {
.cxl-jw-player-container {
:host([captions]) {
#container {
display: grid;
grid-template-rows: 1fr max-content 1fr;
}
}

Expand Down
27 changes: 21 additions & 6 deletions packages/cxl-ui/scss/global/cxl-jw-player/cxl-jw-player-nextup.scss
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,34 @@
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;
align-items: flex-end;

.jw-nextup-cta,
.jw-nextup-cta-mobile {
a {
pointer-events: all;
}
}

.jw-nextup-cta {
max-width: 400px;
width: 64%;

a {
pointer-events: all;

vaadin-button {
width: 100%;
}
vaadin-button {
width: 100%;
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions packages/cxl-ui/src/components/cxl-course-dialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
import '@vaadin/button';
import '@vaadin/dialog';
import './cxl-time.js';
import './jw-player/index.js';
import './cxl-jw-player/index.js';
import { dialogFooterRenderer, dialogRenderer } from '@vaadin/dialog/lit.js';
import cxlCourseDialogGlobalStyles from '../styles/global/cxl-course-dialog-css.js';

Expand Down Expand Up @@ -64,14 +64,14 @@ export class CXLCourseDialogElement extends LitElement {
</div>
<section>
${this.video
? html` <jw-player
? html` <cxl-jw-player
?captions=${this.video.captions}
media-id=${this.video.mediaId}
minimum-search-length=${this.video.minimumSearchLength}
player-id=${this.video.playerId}
playlist-id=${this.video.playlistId}
plugin-path="${this.video.pluginPath}"
></jw-player>`
></cxl-jw-player>`
: ''}
<div class="content">
<p>${this.course.description}</p>
Expand Down
2 changes: 1 addition & 1 deletion packages/cxl-ui/src/components/cxl-jw-player/index.html.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import '@vaadin/text-field';
// eslint-disable-next-line func-names
export const template = function () {
return html`
<div class="cxl-jw-player-container" id="cxl-jw-player-container">
<div class="grid height-100" id="container">
<slot></slot>
${this.captions
? html`
Expand Down
1 change: 1 addition & 0 deletions packages/cxl-ui/src/components/cxl-jw-player/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export class CXLJWPlayerElement extends mixin(LitElement, [
StateMixin,
]) {
config = {
height: '100%',
width: '100%',
playbackRateControls: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
plugins: {
Expand Down
27 changes: 26 additions & 1 deletion packages/cxl-ui/src/components/cxl-jw-player/mixins/BaseMixin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand All @@ -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);
Expand Down Expand Up @@ -143,6 +161,9 @@ export function BaseMixin(BaseClass) {
* Each mixin has the ability to hook onto this method.
*/
// eslint-disable-next-line class-methods-use-this, no-unused-vars, no-empty-function
async _onReadyListener() {}
// eslint-disable-next-line class-methods-use-this, no-unused-vars, no-empty-function
async _onTimeListener(event) {}
Expand Down Expand Up @@ -175,7 +196,11 @@ export function BaseMixin(BaseClass) {
});
await new Promise((resolve) => {
this._jwPlayer.on('ready', resolve);
this._jwPlayer.on('ready', async () => {
await this._onReadyListener();
resolve();
});
});
this._jwPlayerContainer = this._jwPlayer.getContainer();
Expand Down
29 changes: 21 additions & 8 deletions packages/cxl-ui/src/components/cxl-jw-player/mixins/NextUpMixin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%`';

Expand All @@ -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));
Expand All @@ -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>
`;
}
Expand Down
60 changes: 33 additions & 27 deletions packages/cxl-ui/src/components/cxl-jw-player/mixins/StateMixin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,26 @@ export function StateMixin(BaseClass) {

_userId;

async _index() {
if (this.playlistId) {
const index =
localStorage.getItem(`cxl-jw-player-${this.playlistId}-index`) ||
this._jwPlayer.getPlaylistIndex();

this._jwPlayer.playlistItem(index);

this._jwPlayer.on('playlistItem', async ({ index }) => {
localStorage.setItem(`cxl-jw-player-${this.playlistId}-index`, index);
});
}
}

async _onReadyListener() {
await this._index();
this._position();
this._playbackRate();
}

async _setup() {
await super._setup();

Expand All @@ -14,9 +34,6 @@ export function StateMixin(BaseClass) {
if (typeof window.cxl_pum_vars !== 'undefined') {
this._nonce = window.cxl_pum_vars.nonce;
}

this._playbackRate();
this._position();
}

_playbackRate() {
Expand All @@ -32,39 +49,28 @@ export function StateMixin(BaseClass) {
}

_position() {
const mediaId = this.mediaId || this._jwPlayer.getPlaylistItem().mediaId;

const position = localStorage.getItem(`cxl-jw-player-${mediaId}-position`);
if (this.mediaId) {
this._setPosition();
}

if (position) {
if (this.mediaId) {
this._setPosition(position);
} else {
this._jwPlayer.on('playlistItem', ({ index }) => {
localStorage.setItem(`cxl-jw-player-${this.playlistId}-index`, index);

// Wait for the player to load the new playlist item
setTimeout(() => {
this._setPosition(position);
}, 1000);
});

const index =
localStorage.getItem(`cxl-jw-player-${this.playlistId}-index`) ||
this._jwPlayer.getPlaylistIndex();

this._jwPlayer.playlistItem(index);
}
if (this.playlistId) {
this._jwPlayer.on('playlistItem', async ({ index }) => {
await jwplayer().getPlaylistItemPromise(index);
this._setPosition();
});
}

this._jwPlayer.on('seek time', ({ position }) => {
const mediaId = this.mediaId || this._jwPlayer.getPlaylistItem().mediaid;
localStorage.setItem(`cxl-jw-player-${mediaId}-position`, position);
});
}

_setPosition(position) {
_setPosition() {
const mediaId = this.mediaId || this._jwPlayer.getPlaylistItem().mediaid;
const position = localStorage.getItem(`cxl-jw-player-${mediaId}-position`);

this._jwPlayer.seek(Number(position));
this._jwPlayer.pause();
}
}

Expand Down
4 changes: 2 additions & 2 deletions packages/cxl-ui/src/components/cxl-jw-player/mixins/TranscriptMixin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ export function TranscriptMixin(BaseClass) {
}

if (this._tracks.length) {
this.hasCaptions = true;
this.captions = true;

// Make sure the DOM is up to date
await this.updateComplete;
Expand All @@ -155,7 +155,7 @@ export function TranscriptMixin(BaseClass) {
'toggle-transcript'
);
} else {
this.hasCaptions = false;
this.captions = false;
this._jwPlayer.removeButton('toggle-transcript');
}
}
Expand Down
28 changes: 19 additions & 9 deletions packages/cxl-ui/src/components/cxl-jw-player/mixins/chapter-navigation/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,21 @@ import { chapterNavigationTemplate } from './index.html';

export function ChapterNavigationMixin(BaseClass) {
class Mixin extends BaseClass {
_chapterNavigation;

@property({ attribute: 'plugin-path', type: String }) pluginPath;

async _setupChapterNavigation() {
const chapters = await this._getChapters();

if (!chapters.length) {
this._jwPlayer.removeButton('chapter-navigation');
this._jwPlayer.removeButton('toggle-chapters');

return;
}

this._chapterNavigation = document.createElement('div');
this._chapterNavigation.classList.add('chapter-navigation');
this._chapterNavigation.hidden = true;

render(chapterNavigationTemplate.bind(this)(chapters), this._chapterNavigation);

this._jwPlayerContainer.appendChild(this._chapterNavigation);

this._jwPlayer.addButton(
`<svg class="jw-player-button" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" aria-hidden="true" viewBox="0 0 1000 1000"><g><path d="M146 325c-42 0-67-26-67-63 0-37 25-63 67-63 42 0 67 26 67 63 0 37-25 63-67 63z m0 250c-42 0-67-26-67-63 0-37 25-63 67-63 42 0 67 26 67 63 0 37-25 63-67 63z m0 250c-42 0-67-26-67-63 0-37 25-63 67-63 42 0 67 26 67 63 0 37-25 63-67 63zM333 258c0-18 15-33 34-33h516c18 0 33 15 34 33 0 18-15 33-34 34H367c-18 0-33-15-34-34z m0 250c0-18 15-33 34-33h516c18 0 33 15 34 33s-15 33-34 34H367c-18 0-33-15-34-34z m0 250c0-18 15-33 34-33h516c18 0 33 15 34 33s-15 33-34 34H367c-18 0-33-15-34-34z"></path></g></svg>`,
'Show Chapters',
Expand All @@ -39,9 +35,23 @@ export function ChapterNavigationMixin(BaseClass) {

async _setup() {
await super._setup();

this._addStyle(style);
this._setupChapterNavigation();

this._chapterNavigation = document.createElement('div');
this._chapterNavigation.classList.add('chapter-navigation');
this._chapterNavigation.hidden = true;
this._jwPlayerContainer.appendChild(this._chapterNavigation);

if (this.mediaId) {
this._setupChapterNavigation();
}

if (this.playlistId) {
this._jwPlayer.on('playlistItem', () => {
this._setupChapterNavigation();
});
}
}

_toggleChapterNavigation() {
Expand Down

0 comments on commit 702065a

Please sign in to comment.