ravnur-player-public 3.4.2 → 3.4.4

package/src/utils/uidGenerator.js

@@ -0,0 +1,8 @@
+/* eslint no-magic-numbers: 0, eqeqeq: 0, no-bitwise: 0, no-extra-parens: 0 */
+
+export default function uidGenerator() {
+   return 'rav_id_xxxxxxxxxxxx'.replace(/[xy]/g, function _repl(c) {
+      var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+      return v.toString(16);
+   });
+}

package/src/utils/upperFirst.js

@@ -0,0 +1,4 @@
+export default function upperFirst(str) {
+   // eslint-disable-next-line no-magic-numbers
+   return str.substring(0, 1).toUpperCase() + str.substring(1);
+}

package/tests/extensions/__snapshots__/download.spec.js.snap

@@ -0,0 +1,226 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Download extension Download button should be rendered correctly 1`] = `
+<span
+  class="rmp-ext-settings"
+  data-testid="download"
+>
+  <span
+    class="rmp-ext-popover"
+    tabindex="0"
+  />
+  <button
+    aria-label="Download"
+    class="rmp-ext-settings__button"
+    type="button"
+  >
+    <svg
+      height="32"
+      viewBox="0 0 24 24"
+      width="32"
+    >
+      <path
+        d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+      />
+    </svg>
+  </button>
+  <div
+    class="rmp-ext-settings__selector"
+  >
+    <a
+      style="display: none;"
+    />
+    <div
+      class="rmp-ext-settings__main-step"
+    >
+      <button
+        class="rmp-ext-settings__download-cc rmp-ext-settings__more"
+        type="button"
+      >
+        <span>
+          Closed Captions
+        </span>
+        <span
+          class="arrow"
+        >
+          <svg
+            height="32"
+            viewBox="0 0 24 24"
+            width="32"
+          >
+            <path
+              d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        class="rmp-ext-settings__download-cc rmp-ext-settings__more"
+        type="button"
+      >
+        <span>
+          Transcript
+        </span>
+        <span
+          class="arrow"
+        >
+          <svg
+            height="32"
+            viewBox="0 0 24 24"
+            width="32"
+          >
+            <path
+              d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        class="rmp-ext-settings__download-cc"
+        type="button"
+      >
+        <span>
+          Video
+        </span>
+      </button>
+    </div>
+    <div
+      class="rmp-ext-settings__additional-step"
+    >
+      <button
+        class="rmp-ext-settings__back"
+        type="button"
+      >
+        <span
+          class="arrow"
+        >
+          <svg
+            height="32"
+            viewBox="0 0 24 24"
+            width="32"
+          >
+            <path
+              d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+            />
+          </svg>
+        </span>
+        <span />
+      </button>
+      <div
+        class="tab-content"
+      />
+    </div>
+  </div>
+</span>
+`;
+
+exports[`Download extension Should render next step 1`] = `
+<div
+  class="rmp-ext-settings__selector"
+>
+  <a
+    style="display: none;"
+  />
+  <div
+    class="rmp-ext-settings__main-step"
+    style="max-height: -100px;"
+  >
+    <button
+      class="rmp-ext-settings__download-cc rmp-ext-settings__more"
+      type="button"
+    >
+      <span>
+        Closed Captions
+      </span>
+      <span
+        class="arrow"
+      >
+        <svg
+          height="32"
+          viewBox="0 0 24 24"
+          width="32"
+        >
+          <path
+            d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+          />
+        </svg>
+      </span>
+    </button>
+    <button
+      class="rmp-ext-settings__download-cc rmp-ext-settings__more"
+      type="button"
+    >
+      <span>
+        Transcript
+      </span>
+      <span
+        class="arrow"
+      >
+        <svg
+          height="32"
+          viewBox="0 0 24 24"
+          width="32"
+        >
+          <path
+            d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+          />
+        </svg>
+      </span>
+    </button>
+    <button
+      class="rmp-ext-settings__download-cc"
+      type="button"
+    >
+      <span>
+        Video
+      </span>
+    </button>
+  </div>
+  <div
+    class="rmp-ext-settings__additional-step"
+    style="max-height: -100px;"
+  >
+    <button
+      class="rmp-ext-settings__back"
+      type="button"
+    >
+      <span
+        class="arrow"
+      >
+        <svg
+          height="32"
+          viewBox="0 0 24 24"
+          width="32"
+        >
+          <path
+            d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+          />
+        </svg>
+      </span>
+      <span>
+        Closed Captions
+      </span>
+    </button>
+    <div
+      class="tab-content"
+    >
+      <button
+        class="rmp-ext-settings__download-cc"
+        type="button"
+      >
+        <span>
+          English
+        </span>
+      </button>
+      <button
+        class="rmp-ext-settings__download-cc"
+        type="button"
+      >
+        <span>
+          German
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;

package/tests/extensions/__snapshots__/fullscreen.spec.js.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Full screen extension Should render fullscreen button 1`] = `
+<button
+  class="rmp-ext-fullscreen"
+  data-testid="fullscreen"
+  type="button"
+>
+  <svg
+    class="fullscreen-icon"
+    height="32"
+    viewBox="0 0 24 24"
+    width="32"
+  >
+    <path
+      d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
+    />
+  </svg>
+  <svg
+    class="exit-fullscreen-icon"
+    height="32"
+    viewBox="0 0 24 24"
+    width="32"
+  >
+    <path
+      d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"
+    />
+  </svg>
+</button>
+`;

package/tests/extensions/__snapshots__/title.spec.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Title extension Should render fullscreen button 1`] = `
+<div
+  class="rmp-ext-title"
+  data-testid="title"
+>
+  <span
+    class="rmp-ext-title__title"
+    tabindex="0"
+    title="Test title"
+  >
+    Test title
+  </span>
+</div>
+`;

package/tests/extensions/download.spec.js

@@ -0,0 +1,111 @@
+import Player from '../../src/player';
+import sources from '../mocks/sources';
+import { wait } from '../utils/wait';
+import { BASE_OPTIONS }  from '../mocks/base-player-options';
+
+let container;
+let player;
+
+// jest.mock('@ravnur-inc/c2pa', () => ({
+//    C2PA: jest.fn(),
+//    ValidationResult: jest.fn(),
+//    C2PAValidationError: jest.fn()
+// }));
+
+const SELECTOR = '[data-testid="download"]';
+
+describe('Download extension', () => {
+   const renderPlayer = (src, options = {}) => {
+      container = document.createElement('div');
+      container.removeAttribute('style');
+
+      player = new Player(container, {});
+      player.setup(src, {
+         ...BASE_OPTIONS,
+         ...options
+      });
+   };
+
+   it('Download button should be rendered correctly', () => {
+      renderPlayer(sources[1], {
+         showDownload: true,
+         showDownloadCC: true,
+         downloadVideoURL: '/dummy-video.mp4'
+      });
+
+      const wrapper = container.querySelector(SELECTOR);
+      expect(wrapper).toBeInstanceOf(HTMLSpanElement);
+      expect(wrapper).toMatchSnapshot();
+   });
+
+   it('Shuould not render download button if disabled', () => {
+      renderPlayer(sources[1], {
+         showDownload: false,
+         showDownloadCC: true,
+         downloadVideoURL: '/dummy-video.mp4'
+      });
+
+      const wrapper = container.querySelector(SELECTOR);
+      expect(wrapper).toBeNull();
+   });
+
+   it('Should not render download button if no values', () => {
+      renderPlayer(sources[0], {
+         downloadVideoURL: '',
+         showDownload: true,
+         showDownloadCC: true
+      });
+
+      const wrapper = container.querySelector(SELECTOR);
+      expect(wrapper).toBeNull();
+   });
+
+   it('Should check that button works', async () => {
+      renderPlayer(sources[1], {
+         showDownload: true,
+         downloadVideoURL: '/dummy-video.mp4'
+      });
+
+      const wrapper = container.querySelector(SELECTOR);
+      const button = wrapper.querySelector('[class*="__button"]');
+      const menu = wrapper.querySelector('[class*="__selector"]');
+
+      expect(menu).toBeTruthy();
+
+      button.click();
+      let openedMenu = container.querySelector('[class*="__selector--open"]');
+      expect(openedMenu).toBeTruthy();
+
+      wrapper.click();
+
+      await wait();
+
+      openedMenu = container.querySelector('[class*="__selector--open"]');
+      expect(openedMenu).toBeNull();
+   });
+
+   it('Should render next step', async () => {
+      renderPlayer(sources[1], {
+         showDownload: true,
+         showDownloadCC: true
+      });
+
+      const wrapper = container.querySelector(SELECTOR);
+      const button = wrapper.querySelector('[class*="__button"]');
+
+      button.click();
+
+      const openedMenu = container.querySelector('[class*="__selector--open"]');
+      const menuItem = openedMenu.querySelectorAll('[class*="__more"]');
+
+      menuItem[0].click();
+
+      await wait();
+
+      const tabContent = openedMenu.querySelector('.tab-content');
+      const languages = tabContent.querySelectorAll('span');
+      expect(languages.length).toBe(2);
+
+      expect(openedMenu).toMatchSnapshot();
+   });
+});

package/tests/extensions/fullscreen.spec.js

@@ -0,0 +1,56 @@
+import Player from '../../src/player';
+import sources from '../mocks/sources';
+import { BASE_OPTIONS }  from '../mocks/base-player-options';
+
+let container;
+let player;
+
+// jest.mock('@ravnur-inc/c2pa', () => ({
+//    C2PA: jest.fn(),
+//    ValidationResult: jest.fn(),
+//    C2PAValidationError: jest.fn()
+// }));
+
+const SELECTOR = '[data-testid="fullscreen"]';
+
+describe('Full screen extension', () => {
+   const renderPlayer = (options = {}) => {
+      container = document.createElement('div');
+      container.removeAttribute('style');
+
+      player = new Player(container, {});
+      player.setup(sources[0], {
+         ...BASE_OPTIONS,
+         ...options
+      });
+   };
+
+   it('Should render fullscreen button', () => {
+      renderPlayer();
+
+      const button = container.querySelector(SELECTOR);
+      expect(button).toBeInstanceOf(HTMLButtonElement);
+      expect(button).toMatchSnapshot();
+   });
+
+   it('Shuould not render fullscreen button', () => {
+      renderPlayer({
+         showFullScreen: false
+      });
+
+      const button = container.querySelector(SELECTOR);
+      expect(button).toBeNull();
+   });
+
+   it('Should check that fullscreen button works', () => {
+      renderPlayer();
+
+      const button = container.querySelector(SELECTOR);
+
+      button.click();
+      expect(container.classList.contains('rplayer--fullscreen')).toBe(true);
+
+      button.click();
+      expect(container.classList.contains('rplayer--fullscreen')).toBe(false);
+   });
+});

package/tests/extensions/title.spec.js

@@ -0,0 +1,35 @@
+import Player from '../../src/player';
+import { BASE_OPTIONS }  from '../mocks/base-player-options';
+import sources from '../mocks/sources';
+
+let container;
+let player;
+
+// jest.mock('@ravnur-inc/c2pa', () => ({
+//    C2PA: jest.fn(),
+//    ValidationResult: jest.fn(),
+//    C2PAValidationError: jest.fn()
+// }));
+
+const SELECTOR = '[data-testid="title"]';
+
+describe('Title extension', () => {
+   const renderPlayer = (options = {}) => {
+      container = document.createElement('div');
+      container.removeAttribute('style');
+
+      player = new Player(container, {});
+      player.setup(sources[0], {
+         ...BASE_OPTIONS,
+         ...options
+      });
+   };
+
+   it('Should render fullscreen button', () => {
+      renderPlayer();
+
+      const button = container.querySelector(SELECTOR);
+      expect(button).toBeInstanceOf(HTMLDivElement);
+      expect(button).toMatchSnapshot();
+   });
+});