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

package/lib/package.json

@@ -1,13 +0,0 @@
-{
-  "name": "@vidispine/vdt-videojs",
-  "version": "21.3.0",
-  "license": "UNLICENSED",
-  "author": "Oto Inša <otoinsa@bertelsmann.de>",
-  "dependencies": {
-    "mousetrap": "^1.6.3",
-    "video.js": "^7.6.6"
-  },
-  "private": false,
-  "main": "index.cjs.js",
-  "module": "index.esm.js"
-}

package/lib/src/constants.js

@@ -1,51 +0,0 @@
-import pkgInfo from '../package.json';
-
-export const defaults = Object.freeze({
-  frameRate: (30000 / 1001),
-  jumpSeconds: 10,
-  inactivityTimeout: 1200, 
-  audioInactivityTimeout: 0,
-});
-
-export const osd = Object.freeze({
-  play: 0,
-  pause: 1,
-  volchange: 2,
-  jumpForward: 3,
-  jumpBackward: 4,
-});
-
-export const settings = Object.freeze({
-  volume: 'volume-setting',
-  subLang: 'subtitles-language',
-  subs: 'subtitles-enabled',
-});
-
-export const classNames = Object.freeze({
-  poster: 'has-poster',
-  subtitles: 'has-subtitles',
-  subtitlesActive: 'subtitles-active',
-  onDark: 'on-dark',
-  loading: 'loading',
-});
-
-export const colors = Object.freeze({
-  gray: '#787878',
-  light: 'rgba(255,255,255,.75)',
-});
-
-export const packageInfo = Object.freeze({
-  name: pkgInfo.name.split('/')[1],
-  vendor: pkgInfo.name.split('/')[0],
-});
-
-const constants = Object.freeze({
-  defaults,
-  settings,
-  classNames,
-  colors,
-  osd,
-  packageInfo,
-});
-
-export default constants;

package/lib/src/externalControls.js

@@ -1,307 +0,0 @@
-import { reactiveSetters } from './helpers';
-import { classNames, colors } from './constants';
-
-const buttonNames = Object.freeze({
-  play: 'play-pause',
-  start: 'start',
-  fb: 'frame-backward',
-  ff: 'frame-forward',
-  end: 'end',
-});
-
-const buttons = [ 
-  buttonNames.start,
-  buttonNames.fb,
-  buttonNames.play,
-  buttonNames.ff,
-  buttonNames.end,
-];
-
-
-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'); 
-    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' });
-      
-      this.style = document.createElement('style');
-      this.style.type = 'text/css';
-      this.style.appendChild(document.createTextNode(CSS));
-      this.shadow.appendChild(this.style);
-
-      
-      this.shadow.appendChild(this.container);
-    }
-
-    this.handleNewProps(props);
-    this.bindEvents();
-    this.draw();
-  }
-
-  draw() {
-    this.buttons = {}; 
-    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);
-      }
-    });
-  }
-
-    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) { 
-      const player = this.props.player;
-      console.log(player)
-      player.osd && player.osd.disable(); 
-
-      switch (buttonName) {
-        case buttonNames.start:
-          player.toStart();
-          break;
-        case buttonNames.fb:
-          player.triggerHotkey('left');
-          break;
-        case buttonNames.play:
-          player.triggerHotkey('k'); 
-          break;
-        case buttonNames.ff:
-          player.triggerHotkey('right');
-          break;
-        case buttonNames.end:
-          player.toEnd();
-          break;
-        default:
-          
-          break;
-      }
-
-      player.osd && player.osd.enable(); 
-    } else {
-      switch (buttonName) {
-        case buttonNames.start:
-          this.props.onPrev && this.props.onPrev();
-          break;
-        case buttonNames.fb:
-          this.props.onFB && this.props.onFB();
-          break;
-        case buttonNames.play:
-          if (this.playing) {
-            this.props.onPause && this.props.onPause();
-          } else {
-            this.props.onPlay && this.props.onPlay();
-          }
-          break;
-        case buttonNames.ff:
-          this.props.onFF && this.props.onFF();
-          break;
-        case buttonNames.end:
-          this.props.onNext && this.props.onNext();
-          break;
-        default:
-          
-          break;
-      }
-    }
-  }
-
-  
-  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/lib/src/helpOverlay.js

@@ -1,106 +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();
-    };
-
-    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'],
-    ];
-
-
-    
-    const halfpointIndex = Math.round(rows.length / 2);
-    const columns = [
-      rows.slice(0, halfpointIndex),
-      rows.slice(halfpointIndex, rows.length),
-    ];
-
-    
-    for (let i = 0; i < halfpointIndex; i++) {
-      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>
-        `;
-    }
-
-    
-    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(); });
-
-      this.props.onToggle && this.props.onToggle(true);
-    }
-  }
-
-  hide() {
-    if (this.state.active) {
-      this.container.classList.remove('active');
-      this.state.active = false;
-
-      mousetrap.unbind('esc');
-
-      this.props.onToggle && this.props.onToggle(false);
-    }
-  }
-
-  toggle() {
-    if (this.state.active) {
-      this.hide();
-    } else {
-      this.show();
-    }
-  }
-}

package/lib/src/helpers.js

@@ -1,34 +0,0 @@
-export function truncate(input, len) {
-  if (input.length > len) return `${input.substring(0, len)}...`;
-  return input;
-}
-
-
-export function reactiveSetters() {
-  
-  
-  function handleNewProps(props) {
-    if (typeof props === 'object') {
-      const keys = Object.getOwnPropertyNames(props);
-      const proto = Object.getPrototypeOf(this);
-      keys.forEach((key) => {
-        
-        const descriptor = Object.getOwnPropertyDescriptor(proto, key);
-
-        if (descriptor && descriptor.set) { 
-          this[key] = props[key];
-        }
-      });
-    }
-  }
-
-  
-  this.handleNewProps = handleNewProps;
-}
-
-
-export function sanitize(str) { 
-  const temp = document.createElement('div');
-  temp.textContent = str;
-  return temp.innerHTML;
-}

package/lib/src/index.js

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