@vidispine/vdt-videojs 21.3.0 → 22.1.0-pre.1

package/lib/src/menu.js

@@ -1,365 +0,0 @@
-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(' ');
-
-
-    this.props.target && this.props.target.appendChild(this.container);
-
-    
-    this.container.onclick = (event) => {
-      this.props.onClick && this.props.onClick(event);
-    };
-
-    this.render();
-  }
-
-  render() {
-    if (this.props.items) { 
-      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;
-    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() {
-    
-    if (this.props.target) {
-      
-      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';
-
-      
-      this.shadow = this.container.attachShadow({ mode: 'open' });
-      this.props.target && this.props.target.appendChild(this.container);
-
-
-      
-      this.menuContainer = document.createElement('div');
-      this.menuContainer.className = 'menu';
-
-      this.shadow.appendChild(this.menuContainer);
-
-      
-      this.style = document.createElement('style');
-      this.style.type = 'text/css';
-      this.style.innerHTML = CSS();
-      this.shadow.appendChild(this.style);
-    }
-  }
-
-  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) => {
-      
-      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');
-    this.props.onOpen && this.props.onOpen();
-    this.state.opened = true;
-
-    
-    if (!this.handleClicksWhenMenuOpened) {
-      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)); 
-    }, constants.animationLength);
-  }
-
-  close() {
-    this.menuContainer.classList.remove('open');
-    this.state.opened = false;
-
-    this.handleClicksWhenMenuOpenedTimeout && clearTimeout(this.handleClicksWhenMenuOpenedTimeout);
-    document.removeEventListener('click', this.handleClicksWhenMenuOpened);
-
-    this.props.onClose && this.props.onClose();
-
-    mousetrap.unbind('esc');
-  }
-
-  toggle() {
-    if (this.state.opened) {
-      this.close();
-    } else {
-      this.open();
-    }
-  }
-
-  up() { 
-    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), 
-      });
-
-      subItemRefs.push(displayItem);
-    });
-
-    this.state.subItems = subItemRefs;
-  }
-
-  handleSubItemSelected(event, item) {
-    this.close();
-    item.onClick && item.onClick(event, item);
-    this.up();
-  }
-
-  get opened() {
-    return this.state.opened;
-  }
-
-  set opened(bool) {
-    this.state.opened = bool;
-  }
-
-  render() {
-    
-    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/lib/src/osd.js

@@ -1,91 +0,0 @@
-
-import constants 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';
-
-    
-    this.container.innerHTML = `
-            <table>
-                <tbody>
-                    <td>
-                        <div class="osd-feedback-icon"></div>
-                    </td>
-                </tbody>
-            </table>
-        `;
-
-    this.iconEl = this.container.getElementsByClassName('osd-feedback-icon')[0];
-
-    this.props.target && this.props.target.appendChild(this.container);
-  }
-
-  feedback(feedbackType, details = null) { 
-    if (!this.state.enabled) {
-      return;
-    }
-
-    let className;
-
-    switch (feedbackType) {
-      case constants.osd.pause:
-        className = 'pause';
-        break;
-      case constants.osd.play:
-        className = 'play';
-        break;
-      case constants.osd.volchange:
-        const currentVolumeLevel = details.volume;
-        let perceivedVolumeLevel; 
-
-        
-        
-        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 constants.osd.jumpForward:
-        className = 'forward-jump';
-        break;
-      case constants.osd.jumpBackward:
-        className = 'backward-jump';
-        break;
-      default:
-        
-        break;
-    }
-
-
-    if (this.osdTimeout) { 
-      this.container.classList.remove('active');
-      clearTimeout(this.osdTimeout);
-    }
-
-    
-    this.container.classList.add('active');
-    this.osdTimeout = setTimeout(() => {
-      this.container.classList.remove('active');
-    }, 200);
-
-    
-    this.iconEl.className = `osd-feedback-icon ${className}`; 
-  }
-
-  disable() {
-    this.state.enabled = false;
-  }
-
-  enable() {
-    this.state.enabled = true;
-  }
-}