@vidispine/vdt-videojs 23.2.0-pre.1 → 23.2.0

package/src/menu.js

@@ -1,373 +0,0 @@
-/* eslint-disable no-param-reassign */
-/* eslint-disable no-multi-assign */
-/* eslint-disable no-unused-expressions */
-/* eslint-disable max-classes-per-file */
-import mousetrap from 'mousetrap';
-
-const constants = Object.freeze({
-  className: 'vdt-menu',
-  menuClassName: 'menu',
-  subLvlClassName: 'sub-level',
-  menuItemClassName: 'menu-item',
-  animationLength: 300,
-  defaults: {
-    bgColor: 'rgba(0,0,0,.8)',
-    textColor: '#999',
-    textColorDark: '#333',
-    textColorLight: 'rgba(255,255,255)',
-    bgColorLight: 'rgba(255,255,255,.2)',
-    bgColorSelected: 'rgba(255,255,255,.1)',
-  },
-});
-
-const CSS = () => `
-    .${constants.menuClassName}{
-        position: relative;
-        height: 100%;
-        width: 200%;
-        // min-width: 200px;
-        right: 0px;
-        bottom: 0px;
-        background: ${constants.defaults.bgColor};
-        z-index: 1px;
-        transform: translate3d(100%, 0px, 0px);
-        transition: all 300ms ease-in-out;
-        box-shadow: 0px 0px 30px rgb;
-        -webkit-backdrop-filter: blur(10px);
-        overflow: hidden;
-    }
-
-    .${constants.menuClassName} .level-1{
-        float: left;
-    }
-
-    .${constants.menuClassName} div h3{
-        padding: 16px 24px;
-        font-size: 12px;
-        border-bottom: 1px solid ${constants.defaults.bgColorLight}
-    }
-
-    .${constants.menuClassName} .level-2 h3{
-        cursor: pointer;
-        position: relative;
-    }
-    .${constants.menuClassName} .level-2 h3:before{
-        content: '◂';
-        margin-left: -12px;
-        width: 12px;
-        display: inline-block;
-        position: absolute;
-        margin-top: -1px;
-    }
-
-    .${constants.menuClassName} .level-1,
-    .${constants.menuClassName} .level-2{
-        transform: translate3d(0px, 0px, 0px);
-        transition: all 300ms ease-in-out;
-        width: 50%;
-        height: 100%;
-        float: left;
-    }
-
-    .${constants.menuClassName}.sub-level .level-1,
-    .${constants.menuClassName}.sub-level .level-2{
-        transform: translate3d(-100%, 0px, 0px);
-    }
-
-    .${constants.menuClassName} table{
-        border-collapse: collapse;
-        width: 100%;
-    }
-
-    .${constants.menuClassName}.open{
-        transform: translate3d(0px, 0px, 0px);
-    }
-
-    .${constants.menuClassName} tr{
-        cursor: pointer;
-        height: 40px;
-    }
-
-    .${constants.menuClassName} tr.selected{
-        background: ${constants.defaults.bgColorSelected};
-    }
-
-
-    .${constants.menuClassName} tr td{
-        color: white;
-        font-size: 15px;
-        vertical-align: middle;
-    }
-
-    
-    .${constants.menuClassName} tr:hover td{
-        color: white;
-        background: ${constants.defaults.bgColorLight};
-    }
-
-    .${constants.menuClassName} tr td.title{
-        padding-top: 12px;
-        padding-bottom: 12px;
-        font-weight: 300;
-        font-family: Helvetica, Arial, sans-serif; 
-    }
-
-    .${constants.menuClassName} tr td.caret{
-        font-size: 12px;
-    }
-
-    .${constants.menuClassName} tr td:first-child{
-        padding-left: 24px;
-    }
-
-    .${constants.menuClassName} tr td:last-child{
-        padding-right: 16px;
-    }
-
-    .${constants.menuClassName} tr.has-items td:last-child{
-        text-align: right;
-    }
-
-    .${constants.menuClassName} tr.has-items td.subtitle{
-      font-size: 12px;
-      text-align: right;
-      color: ${constants.defaults.textColorLight};
-    }
-`;
-
-class MenuDisplayItem {
-  constructor(props) {
-    this.props = props;
-
-    const classNames = [
-      constants.menuItemClassName,
-      this.props.items && 'has-items',
-      this.props.selected && 'selected',
-    ];
-    this.container = document.createElement('tr');
-    this.container.className = classNames.join(' ');
-
-    if (this.props.target) this.props.target.appendChild(this.container);
-
-    // bind click
-    this.container.onclick = (event) => {
-      if (this.props.onClick) this.props.onClick(event);
-    };
-
-    this.render();
-  }
-
-  render() {
-    if (this.props.items) {
-      // will transition to 2nd level
-      this.container.innerHTML = `
-          <td class="title"></td>
-          <td class="subtitle"></td>
-          <td class="caret">▷</td>
-      `;
-    } else {
-      this.container.innerHTML = `
-          <td class="title"></td>
-      `;
-    }
-
-    const titleNode = this.container.getElementsByClassName('title')[0];
-    const subtitleNode = this.props.items
-      ? this.container.getElementsByClassName('subtitle')[0]
-      : false;
-
-    titleNode.textContent = this.props.title;
-    if (subtitleNode) subtitleNode.textContent = this.props.subtitle;
-  }
-}
-
-export default class Menu {
-  constructor(props) {
-    this.props = props;
-
-    this.container = document.createElement('div');
-    this.container.className = `${constants.className}`;
-
-    this.state = {
-      opened: false,
-      selectedItem: 0,
-      items: [],
-      subItems: [],
-    };
-
-    this.mount();
-    this.draw();
-  }
-
-  mount() {
-    // this.props.target && this.props.target.appendChild(this.container)
-    if (this.props.target) {
-      // container node, acts as an overlay in is stylable from outside
-      this.container.style.position = 'absolute';
-      this.container.style.bottom = this.container.style.right = '0px';
-      this.container.style.height = '100%';
-      this.container.style.overflow = 'hidden';
-      this.container.style.width = '30%';
-      this.container.style.minWidth = '250px';
-      this.container.style.maxWidth = '320px';
-
-      // shadow node encapsulates style and prevents css collisions
-      this.shadow = this.container.attachShadow({ mode: 'open' });
-      if (this.props.target) this.props.target.appendChild(this.container);
-
-      // node for menu itself
-      this.menuContainer = document.createElement('div');
-      this.menuContainer.className = 'menu';
-
-      this.shadow.appendChild(this.menuContainer);
-
-      // attach styles
-      this.style = document.createElement('style');
-      this.style.type = 'text/css';
-      this.style.innerHTML = CSS();
-      this.shadow.appendChild(this.style);
-    }
-  }
-
-  draw() {
-    // first draw
-    const mainDiv = document.createElement('div');
-    mainDiv.className = 'level-1';
-    this.mainLevel = document.createElement('table');
-    mainDiv.innerHTML = '<h3>Settings</h3>';
-    mainDiv.appendChild(this.mainLevel);
-
-    const subDiv = document.createElement('div');
-    subDiv.className = 'level-2';
-    this.subLvlTitle = document.createElement('h3');
-    this.subLvlTitle.onclick = () => {
-      this.up();
-    };
-    subDiv.appendChild(this.subLvlTitle);
-    this.secondaryLevel = document.createElement('table');
-    subDiv.appendChild(this.secondaryLevel);
-
-    this.menuContainer.appendChild(mainDiv);
-    this.menuContainer.appendChild(subDiv);
-
-    this.props.items.forEach((menuItem) => {
-      // get selected item title if such exists
-      const activeTitle = menuItem.items[menuItem.getActiveIndex(menuItem.items)].title || '';
-      const displayItem = new MenuDisplayItem({
-        target: this.mainLevel,
-        subtitle: activeTitle,
-        onClick: () => {
-          this.handleSupItemSelected(menuItem);
-        },
-        ...menuItem,
-      });
-
-      this.state.items.push(displayItem);
-    });
-  }
-
-  open() {
-    this.render();
-
-    this.menuContainer.classList.add('open');
-    if (this.props.onOpen) this.props.onOpen();
-    this.state.opened = true;
-
-    // close the menu when user clicks outside it
-    if (!this.handleClicksWhenMenuOpened) {
-      // eslint-disable-next-line func-names
-      this.handleClicksWhenMenuOpened = function (event) {
-        if (this.state.opened) {
-          event.stopPropagation();
-          const isClickInside = this.container.contains(event.target);
-          if (!isClickInside) {
-            this.close();
-          }
-        }
-      }.bind(this);
-    }
-
-    this.handleClicksWhenMenuOpenedTimeout = setTimeout(() => {
-      document.addEventListener('click', this.handleClicksWhenMenuOpened);
-      mousetrap.bind('esc', this.close.bind(this)); // esc closes menu aswell
-    }, constants.animationLength);
-  }
-
-  close() {
-    this.menuContainer.classList.remove('open');
-    this.state.opened = false;
-
-    if (this.handleClicksWhenMenuOpenedTimeout)
-      clearTimeout(this.handleClicksWhenMenuOpenedTimeout);
-    document.removeEventListener('click', this.handleClicksWhenMenuOpened);
-
-    if (this.props.onClose) this.props.onClose();
-
-    mousetrap.unbind('esc');
-  }
-
-  toggle() {
-    if (this.state.opened) {
-      this.close();
-    } else {
-      this.open();
-    }
-  }
-
-  up() {
-    // go to level 1
-    this.menuContainer.classList.remove(constants.subLvlClassName);
-    this.render();
-  }
-
-  handleSupItemSelected(item) {
-    this.subLvlTitle.textContent = item.title;
-    this.renderSubItems(item.items, item.getActiveIndex(item.items));
-    this.menuContainer.classList.add(constants.subLvlClassName);
-  }
-
-  renderSubItems(items, activeIndex = false) {
-    this.secondaryLevel.innerHTML = '';
-
-    const subItemRefs = [];
-    items.forEach((menuItem, index) => {
-      const displayItem = new MenuDisplayItem({
-        target: this.secondaryLevel,
-        ...menuItem,
-        onClick: (event) => {
-          this.handleSubItemSelected(event, menuItem);
-        },
-        selected: index === activeIndex, // mark selected
-      });
-
-      subItemRefs.push(displayItem);
-    });
-
-    this.state.subItems = subItemRefs;
-  }
-
-  handleSubItemSelected(event, item) {
-    this.close();
-    if (item.onClick) item.onClick(event, item);
-    this.up();
-  }
-
-  get opened() {
-    return this.state.opened;
-  }
-
-  set opened(bool) {
-    this.state.opened = bool;
-  }
-
-  render() {
-    // update selections at level 1
-    this.state.items.forEach((menuDisplayItem, index) => {
-      const { items } = this.props;
-      const activeIndex = items[index].getActiveIndex(items[index].items);
-      const activeTitle = items[index].items[activeIndex].title;
-      menuDisplayItem.props.subtitle = activeTitle;
-      menuDisplayItem.render();
-    });
-  }
-}

package/src/menu.usage.stories.mdx

@@ -1,78 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-import { docsParameters } from '@vidispine/vdt-storybook';
-
-<Meta title="vdt-videojs/Player Menu/Example Usage" parameters={docsParameters} />
-
-## Example Usage
-
-It's possible to pass your own menu items to a new Player instance during initialization like so:
-
-```js
-import { Player } from '@vidispine/vdt-videojs';
-
-const target = {
-  /* ... */
-};
-const testData = {
-  /* ... */
-};
-const menuItems = {
-  /* ... */
-};
-const randIndex = 0; // random index
-
-const player = new Player({
-  target,
-  sources: testData[randIndex].sources,
-  menuItems,
-  // ...
-});
-```
-
-The items can be defined as follows:
-
-```js
-import { Player } from '@vidispine/vdt-videojs';
-
-const player = new Player({
-  /* ... */
-});
-const menuItems = [
-  {
-    title: 'Example 1',
-    // predicate method for determining active index
-    getActiveIndex: (subitems) => {
-      let activeIndex = 0;
-
-      subitems.forEach((item, index) => {
-        if (item.src === player.src) {
-          activeIndex = index;
-        }
-      });
-
-      return activeIndex;
-    },
-    items: [
-      {
-        title: 'Option 1',
-        src: '//vjs.zencdn.net/v/oceans.mp4',
-        onClick: (event, item) => {
-          console.log(event, item, player);
-        },
-      },
-      {
-        title: 'Option 2',
-        src: '//commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4',
-        someKey: 'value', // store arbitrary data
-        onClick: (event, item) => {
-          console.log(event, item, player);
-        },
-      },
-    ],
-  },
-];
-```
-
-Note the `getActiveIndex` method on top level items - this method is invoked
-during opening of the menu, while navigating up to main level and on the first draw to determine the active (selected) item.

package/src/osd.js

@@ -1,105 +0,0 @@
-import { osd } from './constants';
-
-export default class OSD {
-  constructor(props) {
-    this.props = props;
-
-    this.state = {
-      enabled: true,
-    };
-
-    this.container = document.createElement('div');
-    this.container.className = 'vdt-player-osd';
-
-    // vertically center with css
-    this.container.innerHTML = `
-            <table>
-                <tbody>
-                    <td>
-                        <div class="osd-feedback-icon"></div>
-                    </td>
-                </tbody>
-            </table>
-        `;
-
-    // eslint-disable-next-line prefer-destructuring
-    this.iconEl = this.container.getElementsByClassName('osd-feedback-icon')[0];
-
-    if (this.props.target) this.props.target.appendChild(this.container);
-  }
-
-  feedback(feedbackType, details = null) {
-    // details - {} - can contain additional data
-    if (!this.state.enabled) {
-      return;
-    }
-
-    let className;
-
-    switch (feedbackType) {
-      case osd.pause:
-        className = 'pause';
-        break;
-      case osd.play:
-        className = 'play';
-        break;
-      case osd.volchange:
-        // eslint-disable-next-line no-case-declarations
-        const currentVolumeLevel = details.volume;
-        // eslint-disable-next-line no-case-declarations
-        let perceivedVolumeLevel; // 'low' | 'mid' | 'high' string to utilize video js eisting icons
-
-        /*
-        case switch will be too slow for this, if's are 2x more performant for this case
-        (Except in IE)
-        so... no case switch inside case switch this time :/
-        */
-
-        // values here are a bit of a guess, but they seem to match videojs thresholds
-        if (currentVolumeLevel === 0) {
-          perceivedVolumeLevel = 'null';
-        } else if (currentVolumeLevel > 0.65) {
-          perceivedVolumeLevel = 'high';
-        } else if (currentVolumeLevel < 0.35) {
-          perceivedVolumeLevel = 'low';
-        } else {
-          perceivedVolumeLevel = 'mid';
-        }
-
-        className = `volchange ${perceivedVolumeLevel}`;
-        break;
-      case osd.jumpForward:
-        className = 'forward-jump';
-        break;
-      case osd.jumpBackward:
-        className = 'backward-jump';
-        break;
-      default:
-        // do nothing
-        break;
-    }
-
-    if (this.osdTimeout) {
-      // should clear previous timeout/classname if in progress
-      this.container.classList.remove('active');
-      clearTimeout(this.osdTimeout);
-    }
-
-    // do feedback
-    this.container.classList.add('active');
-    this.osdTimeout = setTimeout(() => {
-      this.container.classList.remove('active');
-    }, 200);
-
-    // get specific with classnames
-    this.iconEl.className = `osd-feedback-icon ${className}`; // gets an overwrite each time
-  }
-
-  disable() {
-    this.state.enabled = false;
-  }
-
-  enable() {
-    this.state.enabled = true;
-  }
-}

package/src/player.api.stories.mdx

@@ -1,114 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-import { docsParameters } from '@vidispine/vdt-storybook';
-
-<Meta title="vdt-videojs/Player/Class Methods" parameters={docsParameters} />
-
-## Class Methods
-
-<table>
-  <thead>
-    <tr>
-      <th>Method</th>
-      <th>Description</th>
-      <th>Associated hotkey</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>.togglePlayback()</td>
-      <td>toggle Play / Pause</td>
-      <td>Space, K</td>
-    </tr>
-    <tr>
-      <td>.pause()</td>
-      <td>Pause</td>
-      <td />
-    </tr>
-    <tr>
-      <td>.play()</td>
-      <td>Play</td>
-      <td />
-    </tr>
-    <tr>
-      <td>.volumeUp()</td>
-      <td>Increase playback volume</td>
-      <td>Arrow up</td>
-    </tr>
-    <tr>
-      <td>.volumeDown()</td>
-      <td>Decrease playback volume</td>
-      <td>Arrow down</td>
-    </tr>
-    <tr>
-      <td>.toggleMute()</td>
-      <td>Mute / Unmute audio</td>
-      <td>M</td>
-    </tr>
-    <tr>
-      <td>.toggleFullscreen()</td>
-      <td>Toggle fullscreen</td>
-      <td>F</td>
-    </tr>
-    <tr>
-      <td>.jumpForward()</td>
-      <td>Jump 10 seconds forward</td>
-      <td>L</td>
-    </tr>
-    <tr>
-      <td>.jumpBackward()</td>
-      <td>Jump 10 seconds backward</td>
-      <td>J</td>
-    </tr>
-    <tr>
-      <td>.frameForward()</td>
-      <td>Navigate to next frame</td>
-      <td>Arrow right</td>
-    </tr>
-    <tr>
-      <td>.frameBackward()</td>
-      <td>Navigate to previous frame</td>
-      <td>Arrow left</td>
-    </tr>
-    <tr>
-      <td>.toggleSubs()</td>
-      <td>Toggle subtitles on / off if any</td>
-      <td>C</td>
-    </tr>
-    <tr>
-      <td>.disableSubs()</td>
-      <td>Turn subtitles off</td>
-      <td />
-    </tr>
-    <tr>
-      <td>.enableSubs()</td>
-      <td>Turn subtitles on</td>
-      <td />
-    </tr>
-    <tr>
-      <td>.volume</td>
-      <td>Returns current volume level (0-1)</td>
-      <td />
-    </tr>
-    <tr>
-      <td>.volume = 0.345</td>
-      <td>Sets volume level (0-1)</td>
-      <td />
-    </tr>
-    <tr>
-      <td>.toStart()</td>
-      <td>Navigate to start of the video</td>
-      <td />
-    </tr>
-    <tr>
-      <td>.toEnd()</td>
-      <td>Navigate to end of the video</td>
-      <td />
-    </tr>
-    <tr>
-      <td>.destroy()</td>
-      <td>Deconstructor</td>
-      <td />
-    </tr>
-  </tbody>
-</table>