feat/anoblet/jw-player-gravity-form

packages/cxl-ui/package.json

@@ -17,6 +17,7 @@
     "@pika/plugin-build-web": "^0.9.2",
     "@pika/plugin-bundle-web": "^0.9.2",
     "@pika/plugin-standard-pkg": "^0.9.2",
+    "@polymer/polymer": "^3.5.1",
     "@vaadin/accordion": "^23.2.0",
     "@vaadin/button": "^23.2.0",
     "@vaadin/checkbox": "^23.2.0",

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

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

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

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

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/cxl-jw-player/cxl-jw-player-transcript.scss

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

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

@@ -0,0 +1,8 @@
+.jw-player-button {
+  width: 32px;
+  fill: rgba(255, 255, 255, 0.8);
+
+  &:hover {
+    fill: rgba(255, 255, 255, 1);
+  }
+}

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

@@ -0,0 +1,61 @@
+import { DialogOverlay } from '@vaadin/dialog';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+registerStyles(
+  'cxl-dialog-overlay',
+  css`
+    :host {
+      position: absolute;
+    }
+
+    [part='backdrop'] {
+      position: absolute;
+    }
+  `,
+  { moduleId: 'cxl-dialog-overlay-styles' }
+);
+
+export class CXLDialogOverlay extends DialogOverlay {
+  static get is() {
+    return 'cxl-dialog-overlay';
+  }
+
+  static get properties() {
+    return {
+      container: Object,
+    };
+  }
+
+  /** @protected */
+  _attachOverlay() {
+    if(!this.container) return super._attachOverlay();
+
+    this._placeholder = document.createComment('vaadin-overlay-placeholder');
+    this.parentNode.insertBefore(this._placeholder, this);
+    this.container.appendChild(this);
+    this.bringToFront();
+  }
+
+  /** @protected */
+  _enterModalState() {
+    if(!this.container) return super._enterModalState();
+
+    if (document.body.style.pointerEvents !== 'none') {
+      // Set body pointer-events to 'none' to disable mouse interactions with
+      // other document nodes.
+      this._previousDocumentPointerEvents = document.body.style.pointerEvents;
+
+      // Don't set pointer-events
+      // document.body.style.pointerEvents = 'none';
+    }
+
+    // Disable pointer events in other attached overlays
+    CXLDialogOverlay.__attachedInstances.forEach((el) => {
+      if (el !== this) {
+        el.shadowRoot.querySelector('[part="overlay"]').style.pointerEvents = 'none';
+      }
+    });
+  }
+}
+
+customElements.define(CXLDialogOverlay.is, CXLDialogOverlay);

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

@@ -0,0 +1,85 @@
+import { html } from '@polymer/polymer/polymer-element.js';
+import { Dialog } from '@vaadin/dialog';
+import './cxl-dialog-overlay.js';
+
+export class CXLDialog extends Dialog {
+  static get template() {
+    /* eslint-disable lit/no-legacy-template-syntax */
+    return html`
+      <style>
+        :host(:not[opened]) {
+          display: none !important;
+        }
+      </style>
+      <cxl-dialog-overlay
+        id="overlay"
+        container="[[container]]"
+        header-title="[[headerTitle]]"
+        on-opened-changed="_onOverlayOpened"
+        on-mousedown="_bringOverlayToFront"
+        on-touchstart="_bringOverlayToFront"
+        theme$="[[_theme]]"
+        modeless="[[modeless]]"
+        with-backdrop="[[!modeless]]"
+        resizable$="[[resizable]]"
+        focus-trap
+      ></cxl-dialog-overlay>
+    `;
+    /* eslint-enable lit/no-legacy-template-syntax */
+  }
+
+  static get is() {
+    return 'cxl-dialog';
+  }
+
+  static get properties() {
+    return {
+      contained: Boolean,
+      container: Object,
+    };
+  }
+
+  constructor() {
+    super();
+
+    if (this.hasAttribute('contained')) {
+      this.container = this.parentNode;
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    if (this.hasAttribute('contained')) {
+      this.container = this.parentNode;
+    }
+  }
+
+  ready() {
+    super.ready();
+
+    if (this.contained) {
+      this.container = this.parentNode;
+      this.$.overlay.addEventListener('click', this.onClick.bind(this));
+      this.$.overlay.addEventListener('keydown', this.onKeyDown.bind(this));
+    }
+  }
+
+  onClick(event) {
+    const { overlay } = this.$;
+    const overlayPart = overlay.shadowRoot.querySelector('[part="overlay"]');
+    const composedPath = event.composedPath();
+
+    if (!composedPath.includes(overlayPart)) {
+      this.opened = false;
+    }
+  }
+
+  onKeyDown(e) {
+    if (e.key === 'Escape') {
+      this.opened = false;
+    }
+  }
+}
+
+customElements.define(CXLDialog.is, CXLDialog);

packages/cxl-ui/src/components/jw-player/README.md → packages/cxl-ui/src/components/cxl-jw-player/README.md

@@ -1,15 +1,17 @@
-# JW Player
+# CXL JW Player
 
 ## Usage
 
 ```
-    <jw-player
+    <cxl-jw-player
       captions
       media-id="fZ0XiGdb"
       minimum-search-length="3"
       player-id="5CFJNXKb"
       plugin-path="https://cxl.com/institute/wp-content/plugins/cxl-jwplayer/"
-    ></jw-player>
+    >
+    <cxl-jw-player-feedback>...PHP</cxl-jw-player-feedback>
+    </cxl-jw-player>
 ```
 
 ## Features:
@@ -22,6 +24,7 @@
 - [x] Captions search and highlight
 - [x] Save position
 - [ ] Theater mode
+- [X] Feedback form
 
 ## Dependencies:
 

packages/cxl-ui/src/components/cxl-jw-player/cxl-jw-player-feedback/index.js

@@ -0,0 +1,23 @@
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import style from '../../../styles/cxl-jw-player/cxl-jw-player-feedback-css';
+import shadowStyle from '../../../styles/cxl-jw-player/cxl-jw-player-feedback-shadow-css';
+
+@customElement('cxl-jw-player-feedback')
+export class CXLJWPlayerFeedbackElement extends LitElement {
+  @property({ reflect: true, type: Boolean }) hidden = true;
+
+  static get styles() {
+    return [shadowStyle];
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+
+  async __setup() {
+    await super.__setup();
+
+    this.__addStyle(style);
+  }
+}

packages/cxl-ui/src/components/cxl-jw-player/cxl-jw-player-transcript/index.js

@@ -0,0 +1,21 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import style from '../../../styles/cxl-jw-player/cxl-jw-player-transcript-css';
+import shadowStyle from '../../../styles/cxl-jw-player/cxl-jw-player-transcript-shadow-css';
+
+@customElement('cxl-jw-player-transcript')
+export class CXLJWPlayerTranscriptElement extends LitElement {
+  static get styles() {
+    return [shadowStyle];
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+
+  async __setup() {
+    await super.__setup();
+
+    this.__addStyle(style);
+  }
+}

packages/cxl-ui/src/components/jw-player/index.js → packages/cxl-ui/src/components/cxl-jw-player/index.js

@@ -1,15 +1,17 @@
 import { LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import { BaseMixin, CaptionMixin, ChapterMixin, SavePositionMixin } from './mixins';
-import style from '../../styles/jw-player/jw-player-css';
+import { BaseMixin, TranscriptMixin, ChapterNavigationMixin, FeedbackMixin, SavePositionMixin } from './mixins';
+import style from '../../styles/cxl-jw-player/cxl-jw-player-css';
+import shadowStyle from '../../styles/cxl-jw-player/cxl-jw-player-shadow-css';
 import { mixin } from './utility';
 import { template } from './index.html';
 
-@customElement('jw-player')
-export class JWPlayerElement extends mixin(LitElement, [
+@customElement('cxl-jw-player')
+export class CXLJWPlayerElement extends mixin(LitElement, [
   BaseMixin,
-  CaptionMixin,
-  ChapterMixin,
+  TranscriptMixin,
+  ChapterNavigationMixin,
+  FeedbackMixin,
   SavePositionMixin,
 ]) {
   config = {
@@ -25,10 +27,16 @@ export class JWPlayerElement extends mixin(LitElement, [
   };
 
   static get styles() {
-    return [style];
+    return [shadowStyle];
   }
 
   render() {
     return template.bind(this)();
   }
+
+  async __setup() {
+    await super.__setup();
+
+    this.__addStyle(style);
+  }
 }

packages/cxl-ui/src/components/jw-player/mixins/BaseMixin.js → packages/cxl-ui/src/components/cxl-jw-player/mixins/BaseMixin.js

@@ -1,3 +1,4 @@
+import { render } from 'lit';
 import { property } from 'lit/decorators.js';
 import { throttle } from 'lodash-es';
 import { parseSync } from 'subtitle';
@@ -37,6 +38,12 @@ export function BaseMixin(BaseClass) {
       return `https://content.jwplatform.com/libraries/${this.playerId}.js`;
     }
 
+    __addStyle(style) {
+      const el = document.createElement('style');
+      render(style, el);
+      this.appendChild(el);
+    }
+
     async __getChapters() {
       const playlistItem = this.__jwPlayer.getPlaylistItem();
       const { file } = playlistItem.tracks.filter((track) => track.kind === 'chapters')[0];

packages/cxl-ui/src/components/jw-player/mixins/CaptionMixin.js → packages/cxl-ui/src/components/cxl-jw-player/mixins/TranscriptMixin.js

@@ -3,13 +3,13 @@ import { debounce } from 'lodash-es';
 import Mark from 'mark.js';
 import { parseSync } from 'subtitle';
 
-export function CaptionMixin(BaseClass) {
+export function TranscriptMixin(BaseClass) {
   class Mixin extends BaseClass {
     __debouncedSearch;
 
     __mark;
 
-    @property({ type: Boolean }) captions = false;
+    @property({ reflect: true, type: Boolean }) captions = false;
 
     @state() __currentCue = 0;
 
@@ -117,12 +117,19 @@ export function CaptionMixin(BaseClass) {
     async __setup() {
       await super.__setup();
 
-      this.__setupCaptions();
+      this.__setupTranscript();
     }
 
-    async __setupCaptions() {
+    async __setupTranscript() {
       if (!this.__jwPlayer) return;
 
+      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="M662 603l131 131c16 16 16 42 0 59-16 16-43 16-59 0l-131-131C562 691 512 708 458 708c-138 0-250-112-250-250 0-138 112-250 250-250 138 0 250 112 250 250 0 54-17 104-46 145zM458 646c104 0 188-84 188-188S562 271 458 271 271 355 271 458s84 188 187 188z"></path></g></svg>`,
+        'Transcript',
+        this.__toggleTranscript.bind(this),
+        'toggle-transcript'
+      );
+
       if (this.captions) {
         this.__tracks = await this.__getTracks();
 
@@ -138,16 +145,26 @@ export function CaptionMixin(BaseClass) {
 
       if (changedProperties.has('captions')) {
         if (this.captions) {
-          this.__setupCaptions();
+          this.__setupTranscript();
         } else if (this.mark) {
           this.__mark.unmark();
         }
       }
     }
 
+    __attachListeners() {
+      super.__attachListeners();
+    }
+
     __toggleShouldScroll() {
       this.shouldScroll = !this.shouldScroll;
     }
+
+    __toggleTranscript() {
+      // this.dispatchEvent(new CustomEvent('toggle-transcript'));
+
+      this.captions = !this.captions;
+    }
   }
 
   return Mixin;

packages/cxl-ui/src/components/jw-player/mixins/chapter/index.html.js → packages/cxl-ui/src/components/cxl-jw-player/mixins/chapter-navigation/index.html.js

@@ -13,8 +13,7 @@ export const chapterNavigationTemplate = function (chapters) {
         theme="icon small primary"
         aria-label="Close"
       >
-        <!-- <vaadin-icon icon="lumo:close-small"></vaadin-icon> -->
-        &#10005;
+        <vaadin-icon icon="lumo:cross"></vaadin-icon>
       </vaadin-button>
     </div>
     <ul class="chapter-navigation-list">