JW Player

packages/cxl-ui/package.json

@@ -32,8 +32,10 @@
     "@vaadin/tooltip": "^23.3.7",
     "@vaadin/vaadin-themable-mixin": "^23.3.7",
     "cross-env": "~7.0.2",
+    "crypto-js": "^4.1.1",
     "headroom.js": "^0.12.0",
     "imports-loader": "^2.0.0",
+    "jose": "^4.13.1",
     "laravel-mix": "^6.0.39",
     "lit": "^2.2.5",
     "lodash-es": "^4.17.21",

packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player-shadow.scss

@@ -0,0 +1,147 @@
+@use '~@conversionxl/cxl-lumo-styles/scss/mixins';
+@use '~@conversionxl/cxl-lumo-styles/scss/mq';
+
+:host {
+  background-color: var(--wp--preset--color--white);
+  box-sizing: border-box;
+  display: block;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  [active] {
+    background-color: var(--lumo-shade-10pct);
+  }
+
+  [hidden] {
+    display: none;
+  }
+}
+
+:host([captions]) {
+  #container {
+    background-color: var(--lumo-shade-5pct);
+    display: grid;
+    grid-template-rows: max-content max-content auto;
+    padding-bottom: var(--lumo-space-m);
+  }
+}
+
+.captions {
+  line-height: calc(var(--lumo-line-height-m) * 1.25);
+  margin: 0 auto;
+  max-height: 16rem;
+  max-width: var(--cxl-content-max-width);
+
+  h2,
+  span {
+    &:hover {
+      color: var(--lumo-primary-color);
+    }
+
+    cursor: var(--captions-cursor, pointer);
+  }
+
+  mark {
+    background-color: var(--lumo-shade-10pct);
+
+    &.search-active {
+      background-color: var(--lumo-primary-color);
+      color: #fff;
+    }
+  }
+
+  span {
+    padding: var(--lumo-space-xs) calc(var(--lumo-space-xs) / 2);
+  }
+}
+
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cxl-jw-player-container {
+  height: 100%;
+}
+
+.flex {
+  display: flex;
+  height: 100%;
+}
+
+.flex.column {
+  flex-direction: column;
+}
+
+.flex.grow {
+  flex-grow: 1;
+}
+
+.gap {
+  gap: var(--lumo-space-s);
+}
+
+.grid {
+  display: grid;
+}
+
+.height-50 {
+  height: 50%;
+}
+
+.height-100 {
+  height: 100%;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.padding {
+  padding: var(--lumo-space-s);
+}
+
+.scroll {
+  @include mixins.better-webkit-scrollbars();
+
+  overflow: hidden;
+
+  &:hover {
+    overflow: auto;
+  }
+}
+
+.search {
+  flex-direction: column;
+  margin: 0 auto;
+  max-width: var(--cxl-content-max-width);
+  width: 100%;
+
+  #search-result-count {
+    font-size: var(--lumo-font-size-s);
+  }
+
+  vaadin-checkbox {
+    --lumo-body-text-color: #fff;
+
+    display: none;
+  }
+
+  vaadin-checkbox:not([checked])::part(checkbox) {
+    background-color: #fff;
+  }
+
+  vaadin-text-field {
+    box-shadow: var(--lumo-box-shadow-xs);
+    background-color: #fff;
+    border-radius: var(--lumo-space-xs);
+    width: 100%;
+
+    &::part(input-field) {
+      background-color: initial;
+    }
+  }
+}

packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player-transcript-shadow.scss

@@ -0,0 +1,3 @@
+:host(:not([hidden])) {
+  display: block;
+}

packages/cxl-ui/scss/jw-player/chapter.scss → packages/cxl-ui/scss/global/cxl-jw-player/cxl-jw-player-chapter-navigation.scss

@@ -14,6 +14,10 @@
   background: var(--lumo-shade);
   gap: var(--lumo-space-s);
 
+  &[hidden] {
+    display: none;
+  }
+
   .close {
     font-size: var(--lumo-font-size-xs);
     cursor: pointer;

packages/cxl-ui/scss/global/cxl-jw-player/cxl-jw-player-nextup.scss

@@ -0,0 +1,35 @@
+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%;
+
+      vaadin-button {
+        width: 100%;
+      }
+    }
+  }
+}

packages/cxl-ui/scss/global/cxl-jw-player/cxl-jw-player-transcript.scss

@@ -0,0 +1,3 @@
+:host(:not([hidden])) {
+  display: block;
+}

packages/cxl-ui/scss/global/cxl-jw-player/cxl-jw-player.scss

@@ -0,0 +1,29 @@
+cxl-jw-player {
+  .jw-player-button {
+    width: 32px;
+    fill: rgba(255, 255, 255, 0.8);
+
+    &:hover {
+      fill: rgba(255, 255, 255, 1);
+    }
+  }
+
+  .jw-related-item {
+    height: 100% !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .jwplayer:not(.jw-flag-small-player) .jw-related-item-next-up {
+    .jw-related-item-poster {
+      height: 100%;
+    }
+
+    .jw-related-item-title {
+      position: absolute;
+      bottom: 0;
+    }
+  }
+}
+
+.jw-rightclick-list li:last-of-type {
+  display: none;
+}

packages/cxl-ui/src/components/cxl-course-dialog.js

@@ -5,7 +5,6 @@ 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 { dialogFooterRenderer, dialogRenderer } from '@vaadin/dialog/lit.js';
 import cxlCourseDialogGlobalStyles from '../styles/global/cxl-course-dialog-css.js';
 
@@ -64,14 +63,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>