@vidispine/vdt-videojs 23.1.0 → 23.2.0-pre.2

package/src/externalControls.js

@@ -1,318 +0,0 @@
-import { classNames, colors } from './constants';
-import { reactiveSetters } from './helpers';
-
-const buttonNames = Object.freeze({
-  play: 'play-pause',
-  start: 'start',
-  fb: 'frame-backward',
-  ff: 'frame-forward',
-  end: 'end',
-});
-
-const buttons = [
-  // order matters
-  buttonNames.start,
-  buttonNames.fb,
-  buttonNames.play,
-  buttonNames.ff,
-  buttonNames.end,
-];
-
-/*
-Since this could possibly be used in a
-context without the player and vice versa -
-will try and make it as self-contained
-as possible, currently utilizing
-shadow DOM (style encapsulation as main reason),
-https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
-BEWARE - IE < Edge is unsupported
-*/
-
-const CSS = `
-  .vdt-external-controls{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .control{
-    flex: 1;
-    flex-grow: 1;
-    height: 100%;
-    align-contents: center;
-    align-self: center;
-    text-align: center;
-    vertical-align: middle;
-    cursor: pointer;
-    user-select: none;
-    height: 20px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
-
-  .control .icon{
-    display: inline-block;
-    height: 20px;
-    white-space: nowrap;
-    opacity: .9;
-  }
-
-  .control:hover .icon{ opacity: 1; }
-
-  .control .icon:before{
-    opacity: 1;
-    flex: 1;
-    align-self: center;
-    content: " ";
-    display: inline-block;
-    margin: 0 auto;
-
-    /* triangles */
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 16px 0 16px 23px;
-    border-color: transparent transparent transparent ${colors.gray};
-  }
-
-  .vdt-external-controls.${classNames.onDark} .control .icon:before{
-    border-color: transparent transparent transparent ${colors.light};
-  }
-
-  /* specific buttons */
-
-  .control.${buttonNames.start},
-  .control.${buttonNames.end}{
-    height: 20px;
-  }
-
-  .control.${buttonNames.play}{
-    height: 30px;
-    padding-top: 0px;
-    padding-bottom: 0px;
-  }
-
-  .control.${buttonNames.play} .icon{
-    height: 30px;
-  }
-
-  .control.${buttonNames.ff} .icon:before,
-  .control.${buttonNames.fb} .icon:before,
-  .control.${buttonNames.end} .icon:before,
-  .control.${buttonNames.start} .icon:before{
-    border-width: 10px 0 10px 16px;
-  }
-
-  .control.${buttonNames.fb} .icon,
-  .control.${buttonNames.start}{
-    transform: rotate(180deg);
-  }
-
-  .control.${buttonNames.end} .icon:after,
-  .control.${buttonNames.start} .icon:after{
-    content: " ";
-    width: 4px;
-    height: 20px;
-    display: inline-block;
-    background: ${colors.gray};
-  }
-
-  .vdt-external-controls.${classNames.onDark} .control.${buttonNames.end} .icon:after,
-  .vdt-external-controls.${classNames.onDark} .control.${buttonNames.start} .icon:after{
-    background: ${colors.light};
-  }
-
-  /* stateful styles */
-  .control.${buttonNames.play}.playing .icon:before{
-    height: 30px;
-    width: 6px;
-    border-width: 0px 8px 0px 8px;
-    border-color: transparent ${colors.gray} transparent ${colors.gray};
-  }
-
-  .vdt-external-controls.${classNames.onDark} .control.${buttonNames.play}.playing .icon:before{
-    border-color: transparent ${colors.light} transparent ${colors.light};
-  }
-
-  .vdt-external-controls.${classNames.loading} .control.${buttonNames.play}{
-    border-color: transparent #f00 transparent #f00;
-  }
-`;
-
-class ExternalControls {
-  constructor(props) {
-    this.props = props;
-    reactiveSetters.apply(this);
-
-    this.state = {
-      playing: false,
-      onDark: false,
-      loading: false,
-    };
-
-    this.shadowRoot = document.createElement('div'); // will attach shadow here, after appending to target
-    this.shadowRoot.className = 'vdt-external-controls-wrapper';
-    this.container = document.createElement('div');
-    this.container.className = 'vdt-external-controls';
-
-    if (this.props.target) {
-      this.props.target.appendChild(this.shadowRoot);
-      this.shadow = this.shadowRoot.attachShadow({ mode: 'open' });
-      // attach styles
-      this.style = document.createElement('style');
-      this.style.type = 'text/css';
-      this.style.appendChild(document.createTextNode(CSS));
-      this.shadow.appendChild(this.style);
-
-      // attach container to shadow root
-      this.shadow.appendChild(this.container);
-    }
-
-    this.handleNewProps(props);
-    this.bindEvents();
-    this.draw();
-  }
-
-  draw() {
-    this.buttons = {}; // map of html nodes for DOM manipulations
-    const excludes = this.props.excludes || [];
-
-    buttons.forEach((buttonName) => {
-      if (excludes.indexOf(buttonName) < 0) {
-        const btn = document.createElement('div');
-        btn.className = `control ${buttonName}`;
-        btn.innerHTML = '<span class="icon"></span>';
-
-        btn.onclick = () => {
-          this.handlePress(buttonName);
-        };
-
-        this.buttons[buttonName] = btn;
-        this.container.appendChild(btn);
-      }
-    });
-  }
-
-  /*
-  bind to play / pause / stop and other events,
-  so that controls reflect the player state
-  */
-  bindEvents() {
-    if (this.props.player && this.props.player.videojs) {
-      const { player } = this.props;
-
-      player.videojs.on('play', () => {
-        this.playing = true;
-      });
-
-      player.videojs.on('pause', () => {
-        this.playing = false;
-      });
-
-      player.videojs.on('stop', () => {
-        this.playing = false;
-      });
-    }
-  }
-
-  handlePress(buttonName) {
-    if (this.props.player) {
-      // control a vdt player instance directly
-      const { player } = this.props;
-      if (player.osd) player.osd.disable(); // temporarily disable OSD
-
-      switch (buttonName) {
-        case buttonNames.start:
-          player.toStart();
-          break;
-        case buttonNames.fb:
-          player.triggerHotkey('left');
-          break;
-        case buttonNames.play:
-          player.triggerHotkey('k'); // TODO - triggering hotkeys has a side effect - OSD will give feedback
-          break;
-        case buttonNames.ff:
-          player.triggerHotkey('right');
-          break;
-        case buttonNames.end:
-          player.toEnd();
-          break;
-        default:
-          // do nothing
-          break;
-      }
-
-      if (player.osd) player.osd.enable(); // re-enable OSD
-    } else {
-      switch (buttonName) {
-        case buttonNames.start:
-          if (this.props.onPrev) this.props.onPrev();
-          break;
-        case buttonNames.fb:
-          if (this.props.onFB) this.props.onFB();
-          break;
-        case buttonNames.play:
-          if (this.playing) {
-            if (this.props.onPause) this.props.onPause();
-          } else if (this.props.onPlay) this.props.onPlay();
-          break;
-        case buttonNames.ff:
-          if (this.props.onFF) this.props.onFF();
-          break;
-        case buttonNames.end:
-          if (this.props.onNext) this.props.onNext();
-          break;
-        default:
-          // do nothing
-          break;
-      }
-    }
-  }
-
-  // setters and getters for state
-  set playing(bool) {
-    if (bool) {
-      this.state.playing = true;
-      this.buttons[buttonNames.play].classList.add('playing');
-    } else {
-      this.state.playing = false;
-      this.buttons[buttonNames.play].classList.remove('playing');
-    }
-  }
-
-  get playing() {
-    return this.state.playing;
-  }
-
-  set onDark(bool) {
-    if (bool) {
-      this.state.onDark = true;
-      this.container.classList.add(classNames.onDark);
-    } else {
-      this.state.onDark = false;
-      this.container.classList.remove(classNames.onDark);
-    }
-  }
-
-  get onDark() {
-    return this.container.classList.contains(classNames.onDark);
-  }
-
-  set loading(bool) {
-    if (bool) {
-      this.state.loading = true;
-      this.container.classList.add(classNames.loading);
-    } else {
-      this.state.loading = false;
-      this.container.classList.remove(classNames.loading);
-    }
-  }
-
-  get loading() {
-    return this.state.loading;
-  }
-}
-
-ExternalControls.buttonNames = buttonNames;
-
-export default ExternalControls;

package/src/helpOverlay.js

@@ -1,110 +0,0 @@
-import mousetrap from 'mousetrap';
-
-export default class HelpOverlay {
-  constructor(props) {
-    this.props = props;
-
-    this.state = {
-      active: this.props.active || false,
-    };
-
-    this.container = document.createElement('div');
-    this.container.className = 'vdt-help-overlay';
-    this.container.innerHTML = '';
-    this.container.onclick = () => {
-      this.hide();
-    };
-
-    if (this.props.target) this.props.target.appendChild(this.container);
-
-    this.draw();
-  }
-
-  draw() {
-    // draws keyboard controls
-    let tableRowMarkup = ''; // will insert a DOM string here
-    const rows = [
-      ['⎵', 'Play / Pause'],
-      ['⇧', 'Increase volume '],
-      ['⇩', 'Decrease volume'],
-      ['⇨', 'Step frame forward'],
-      ['⇦', 'Step frame backward'],
-      ['M', 'Mute / Unmute'],
-
-      ['J', 'Seek 10 seconds backward'],
-      ['K', 'Play / Pause'],
-      ['L', 'Seek 10 seconds forward'],
-      ['C', 'Toggle subtitles'],
-      ['N', 'Toggle settings menu'],
-      ['H', 'Toggle this help overlay'],
-    ];
-
-    // split the data for 2 columns
-    const halfpointIndex = Math.round(rows.length / 2);
-    const columns = [rows.slice(0, halfpointIndex), rows.slice(halfpointIndex, rows.length)];
-
-    // table will niceley auto adjust td's according to length
-    for (let i = 0; i < halfpointIndex; i += 1) {
-      tableRowMarkup += `
-            <tr>
-                <td><div>${columns[0][i][0]}</div></td>
-                <td>- ${columns[0][i][1]}</td>
-
-                <td>${columns[1][i] ? `<div>${columns[1][i][0]}</div>` : ''}</td>
-                <td>${columns[1][i] ? `- ${columns[1][i][1]}` : ''}</td>
-            </tr>
-        `;
-    }
-
-    /*
-    insert table row markup in the table;
-    note that there are two tables going
-    on here - one is for vertically centering the
-    content of help overlay (the other table)
-    */
-
-    this.container.innerHTML = `
-        <table>
-            <tbody>
-                <tr>
-                    <td class="vdt-help-contents">
-                        <table><tbody>${tableRowMarkup}</tbody></table>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    `;
-  }
-
-  show() {
-    if (!this.state.active) {
-      this.container.classList.add('active');
-      this.state.active = true;
-
-      mousetrap.bind('esc', () => {
-        this.hide();
-      });
-
-      if (this.props.onToggle) this.props.onToggle(true);
-    }
-  }
-
-  hide() {
-    if (this.state.active) {
-      this.container.classList.remove('active');
-      this.state.active = false;
-
-      mousetrap.unbind('esc');
-
-      if (this.props.onToggle) this.props.onToggle(false);
-    }
-  }
-
-  toggle() {
-    if (this.state.active) {
-      this.hide();
-    } else {
-      this.show();
-    }
-  }
-}

package/src/helpers.js

@@ -1,39 +0,0 @@
-export function truncate(input, len) {
-  if (input.length > len) return `${input.substring(0, len)}...`;
-  return input;
-}
-
-/*
-Make certain component props React-ive
-by being able to call respective component .handleNewProps()
-method in react wrappers
-*/
-export function reactiveSetters() {
-  // will try to find a matching setter in context
-  // TODO - switch to for loop for more efficient updates
-  function handleNewProps(props) {
-    if (typeof props === 'object') {
-      const keys = Object.getOwnPropertyNames(props);
-      const proto = Object.getPrototypeOf(this);
-      keys.forEach((key) => {
-        // check for own setters / getters
-        const descriptor = Object.getOwnPropertyDescriptor(proto, key);
-
-        if (descriptor && descriptor.set) {
-          // if a setter is defined, apply the prop
-          this[key] = props[key];
-        }
-      });
-    }
-  }
-
-  // extends a context with handleNewProps method
-  this.handleNewProps = handleNewProps;
-}
-
-// an elegant way to prevent xss attacks
-export function sanitize(str) {
-  const temp = document.createElement('div');
-  temp.textContent = str;
-  return temp.innerHTML;
-}

package/src/index.js

@@ -1,7 +0,0 @@
-import ExternalControls from './externalControls';
-import Player from './player';
-import SeekBar from './seekBar';
-import TimeCodeDisplay from './timeCodeDisplay';
-import VideoTime from './videoTime';
-
-export { TimeCodeDisplay, ExternalControls, SeekBar, Player, VideoTime };

package/src/index.stories.mdx

@@ -1,52 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-import { docsParameters } from '@vidispine/vdt-storybook';
-
-import pkgJson from '../package.json';
-
-<Meta title="vdt-videojs/Overview" parameters={docsParameters} />
-
-export const changelogMd = () => {
-  let mdChangeLog = '';
-  Object.keys(pkgJson.changelog)
-    .reverse()
-    .forEach((changelogKey) => {
-      mdChangeLog += `### ${changelogKey}:\n\n`;
-      pkgJson.changelog[changelogKey].forEach((entry) => {
-        mdChangeLog += `- ${entry}\n`;
-      });
-    });
-  return mdChangeLog;
-};
-
-# Overview
-
-```
-┌───────────┐                                                   ┌───────┐
-│ vdt-react ---------------- ( hooks, providers, wrappers ) --> │       │
-└───────────┘                                                   │       │
-┌─────────┐                                                     │       │
-│ vdt-api ------------------------- ( API js Promises ) ------> │       │
-└─────────┘                                                     │       │
-┌────────────────┐                                              │       │
-│ vdt-materialui -- (Customized Material UI React library) ---> │       │
-└────────────────┘                                              │  Your │
-                                  ┌─── player components ──┐    │  SPA  │
-                                  │┌───────────────────────┐    │       │
-  open-source player packages --> ││ vdt-videojs-react     ---> │       │
-                                  │└───────────────────────┘    │       │
-┌─────────────┐                   │┌───────────────────────┐    │       │
-│ vdt-videojs ------------------> ││ vdt-videojs-vue (?)   ---> │       │
-└─────────────┘                   │└───────────────────────┘    └───────┘
-   (pure js)                      └ wrapped for frameworks ┘
-
-```
-
-vdt-videojs sets out to build a pure javascript video player on top of [video.js](https://videojs.com) and delivers more features with a "familiar" user interface / experience. There is an every-so-often manually deployed [live demo here](https://vdt-js-player.netlify.app/).
-
-vdt-videojs is written in ES6 Javascript and has minimal dependencies; It's wrapable for supported frameworks.
-
-Additionally vdt-videojs package exports other pure js components closely related to Player (SeekBar, TimeCodeDisplay, ExternalControls and others) for
-use with react / other frameworks within their respective wrappers.
-
-See the [vdt-videojs-react](./?path=/story/vdt-videojs-react-videoplayer--basic) package for use with React.

package/src/menu.api.stories.mdx

@@ -1,53 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-import { docsParameters } from '@vidispine/vdt-storybook';
-
-<Meta title="vdt-videojs/Player Menu/Class Methods" parameters={docsParameters} />
-
-## Class Methods
-
-Menu is initialized at `player.menu`, so you can access
-the Menu class instance methods via `player.menu.methodName()`.
-
-<br />
-<table>
-  <thead>
-    <tr>
-      <th>Method</th>
-      <th>Description</th>
-      <th>Associated hotkey</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>.open()</td>
-      <td>Open menu</td>
-      <td>N</td>
-    </tr>
-    <tr>
-      <td>.close()</td>
-      <td>Close menu</td>
-      <td>ESC, N</td>
-    </tr>
-    <tr>
-      <td>.toggle()</td>
-      <td>Toggle open / close</td>
-      <td>N</td>
-    </tr>
-    <tr>
-      <td>.up()</td>
-      <td>Go up to main level</td>
-      <td />
-    </tr>
-    <tr>
-      <td>.render()</td>
-      <td>Update selected items in main level</td>
-      <td />
-    </tr>
-    <tr>
-      <td>.opened</td>
-      <td>Getter property (bool) - use this to get the state of menu</td>
-      <td />
-    </tr>
-  </tbody>
-</table>