feat(cxl-ui): add feedback mixin

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/src/components/cxl-jw-player/README.md

@@ -9,7 +9,9 @@
       minimum-search-length="3"
       player-id="5CFJNXKb"
       plugin-path="https://cxl.com/institute/wp-content/plugins/cxl-jwplayer/"
-    ></cxl-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/index.js

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import { BaseMixin, TranscriptMixin, ChapterNavigationMixin, SavePositionMixin } from './mixins';
+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';
@@ -11,6 +11,7 @@ export class CXLJWPlayerElement extends mixin(LitElement, [
   BaseMixin,
   TranscriptMixin,
   ChapterNavigationMixin,
+  FeedbackMixin,
   SavePositionMixin,
 ]) {
   config = {

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

@@ -0,0 +1,8 @@
+import { html } from 'lit';
+import '@vaadin/button';
+import '@vaadin/icon';
+
+// eslint-disable-next-line func-names
+export const feedbackTemplate = function () {
+  return html`This is a sample feedback form.`;
+};

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

@@ -0,0 +1,69 @@
+import { html, render } from 'lit';
+import { property } from 'lit/decorators.js';
+import '../../../cxl-dialog/cxl-dialog';
+
+export function FeedbackMixin(BaseClass) {
+  class Mixin extends BaseClass {
+    @property({ attribute: 'plugin-path', type: String }) pluginPath;
+
+    __feedbackContent;
+
+    __feedbackDialog;
+
+    async __setupFeedback() {
+      this.__feedbackContent = this.querySelector('cxl-jw-player-feedback');
+
+      /* eslint-disable no-param-reassign */
+      const headerRenderer = (root, dialog) =>
+        render(
+          html`
+            <vaadin-button
+              theme="tertiary"
+              @click="${() => {
+                dialog.opened = false;
+              }}"
+            >
+              <vaadin-icon icon="lumo:cross"></vaadin-icon>
+            </vaadin-button>
+          `,
+          root
+        );
+      /* eslint-enable no-param-reassign */
+
+      const renderer = function (root) {
+        root.appendChild(this.__feedbackContent);
+        this.__feedbackContent.hidden = false;
+      }.bind(this);
+
+      render(
+        html`<cxl-dialog
+          contained
+          .headerRenderer=${headerRenderer}
+          .renderer=${renderer}
+          header-title="Feedback"
+        ></cxl-dialog>`,
+        this.__jwPlayerContainer
+      );
+
+      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="M367 675H292v-258C292 325 366 250 459 250H458V208c0-23 18-42 42-41 23 0 42 18 42 41v42h-1C634 250 708 325 708 417V675h-75v-258c0-51-41-92-91-92h-84C408 325 367 366 367 417V675z m-159 37c0-21 17-38 38-37h508c21 0 37 17 38 37 0 21-17 38-38 38H246C225 750 208 733 208 713z m230 71h125v32c0 17-14 31-32 31h-62c-17 0-32-14-31-31v-32z"></path></g></svg>`,
+        'Feedback',
+        this.__toggleFeedback.bind(this),
+        'toggle-feedback'
+      );
+    }
+
+    async __setup() {
+      await super.__setup();
+
+      this.__setupFeedback();
+    }
+
+    __toggleFeedback() {
+      const el = this.querySelector('.jwplayer').querySelector('cxl-dialog');
+      el.opened = !el.opened;
+    }
+  }
+
+  return Mixin;
+}

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

@@ -1,4 +1,5 @@
 export { BaseMixin } from './BaseMixin';
 export { TranscriptMixin } from './TranscriptMixin';
 export { ChapterNavigationMixin } from './chapter-navigation';
+export { FeedbackMixin } from './feedback';
 export { SavePositionMixin } from './SavePositionMixin';

packages/storybook/cxl-ui/cxl-jw-player/feedback.stories.js

@@ -0,0 +1,21 @@
+import { html } from 'lit';
+import '@conversionxl/cxl-ui/src/components/cxl-jw-player/index.js';
+import '@conversionxl/cxl-ui/src/components/cxl-jw-player/cxl-jw-player-feedback/index.js';
+
+export default {
+  title: 'CXL UI/cxl-jw-player',
+};
+
+// eslint-disable-next-line no-empty-pattern
+const Template = ({}) =>
+  html`
+    <style>
+      #root-inner {
+        height: 100vh;
+      }
+    </style>
+
+    <cxl-jw-player-feedback>This is a feedback form</cxl-jw-player-feedback>
+  `;
+
+export const Feedback = Template.bind({});

packages/storybook/cxl-ui/cxl-jw-player/index.stories.js

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import '@conversionxl/cxl-ui/src/components/cxl-jw-player/index.js';
+import '@conversionxl/cxl-ui/src/components/cxl-jw-player/cxl-jw-player-feedback/index.js';
 
 export default {
   title: 'CXL UI/cxl-jw-player',
@@ -28,7 +29,9 @@ const Template = ({ captions, mediaId, minimumSearchLength, playerId, playlistId
       player-id=${playerId}
       playlist-id=${playlistId}
       plugin-path="${pluginPath}"
-    ></cxl-jw-player>
+    >
+      <cxl-jw-player-feedback>This is a feedback form</cxl-jw-player-feedback>
+    </cxl-jw-player>
   `;
 
 export const Default = Template.bind({});

packages/storybook/cxl-ui/cxl-jw-player/playlist.stories.js

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import '@conversionxl/cxl-ui/src/components/cxl-jw-player/index.js';
+import '@conversionxl/cxl-ui/src/components/cxl-jw-player/cxl-jw-player-feedback/index.js';
 
 export default {
   title: 'CXL UI/cxl-jw-player',
@@ -29,7 +30,9 @@ const Template = ({ captions, mediaId, playerId, playlistId, pluginPath }) =>
       playlist-id=${playlistId}
       plugin-path="${pluginPath}"
       type="playlist"
-    ></cxl-jw-player>
+    >
+      <cxl-jw-player-feedback>This is a feedback form</cxl-jw-player-feedback>
+    </cxl-jw-player>
   `;
 
 export const Playlist = Template.bind({});