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

package/package.json

@@ -1,101 +1,45 @@
 {
   "name": "@vidispine/vdt-videojs",
-  "version": "21.3.0",
+  "version": "22.1.0-pre.1",
   "license": "UNLICENSED",
   "private": false,
-  "main": "lib/index.cjs.js",
-  "module": "lib/index.es.js",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "browser": "dist/index.umd.js",
   "author": "Oto Inša <otoinsa@bertelsmann.de>",
   "scripts": {
-    "cleanup": "rm -rf ./dist && rm -rf ./.cache",
-    "start": "npm run cleanup && parcel ./demo.html --no-source-maps --no-hmr -p 2222 -t browser --open --out-dir ./dev",
-    "build-legacy": "parcel build ./src/player.js --out-dir ./lib --no-source-maps",
-    "build": "node ./build.js",
-    "build:watch": "node ./build.js --watch",
-    "build:demo": "rm -rf ./demo/ && parcel build ./demo.html --out-file index.html --out-dir ./demo --no-source-maps --public-url ./",
-    "docs": "jsdoc ./src/player.js -d ./docs/"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.7.7",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "chokidar": "^3.3.1",
-    "colors": "^1.4.0",
-    "parcel-bundler": "^1.12.4",
-    "rollup": "^2.20.0",
-    "rollup-plugin-json": "^4.0.0",
-    "sass": "^1.24.3",
-    "strip-comments": "^2.0.1"
+    "build": "rm -rf dist/ && rollup -c",
+    "build:watch": "rm -rf dist/*.js* && rollup -c -w --environment DEVELOPMENT",
+    "lint": "eslint \"./{src/**/*,*}.{js,md}\"",
+    "lint:fix": "yarn lint --fix"
   },
   "dependencies": {
     "mousetrap": "^1.6.3",
     "video.js": "^7.6.6"
   },
+  "devDependencies": {
+    "@babel/core": "^7.17.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@vidispine/eslint-config-base": "^22.1.0-pre.1",
+    "@vidispine/eslint-config-storybook": "*",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "rollup": "^2.67.0",
+    "rollup-plugin-cleanup": "^3.2.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-sass": "^1.2.10"
+  },
   "browserslist": [
     "since 2017-06"
   ],
-  "changelog": {
-    "0.1.2": [
-      "Removed unwanted videojs markup",
-      "Implemented playback hotkeys",
-      "Borrowed styling ideas from a popular online video platform",
-      "Visual feedback gizmo as hotkey feedback",
-      "Subtitle support (VVT)",
-      "Persistance - volume level",
-      "Custom timecode display (SMPTE)",
-      "Frame forward / frame backward 6unctionality"
-    ],
-    "0.1.3": [
-      "Renamed 'subtitles off' to just 'off'",
-      "Timecode SMPTE - current time in SMPTE with input capabilities",
-      "Timecode SMPTE - total video duration timecode (read-only)",
-      "Settings persistance - storing wether subtitles should be on and the selected language as well"
-    ],
-    "0.1.4": [
-      "Subtitles toggle hotkey - c",
-      "Now accepts Blob as subtitles source file",
-      "Timecode input improvements",
-      "Screenshot button with currentTime callback",
-      "Moved OSD in its own class"
-    ],
-    "0.1.6": [
-      "Help overlay for keyboard controls",
-      "External player controls component (js, React)",
-      "External seek-bar component (js, React)"
-    ],
-    "0.1.7": [
-      "In / Out markers for seek bar"
-    ],
-    "0.1.8": [
-      "External TimeCodeDisplay support for player"
-    ],
-    "0.1.9": [
-      "Multiple regions with annotations for SeekBar"
-    ],
-    "0.2.2": [
-      "Overall version bump (improvements)"
-    ],
-    "0.3.0": [
-      "controlsBelowPlayer - reactive option",
-      "onDark - used in conjuction with controlsBelowPlayer for dark backgrounds",
-      "Bug fixes, convenience class methods"
-    ],
-    "0.3.1": [
-      "SeekBar - Seek animation, dark mode improvements",
-      "Bug fixes, refactor & code sharing improvements"
-    ],
-    "0.5.3": [
-      "vdt-videojs now provides a commonjs module with named exports"
-    ],
-    "0.6.1": [
-      "Internal refactor before splitting main features into videojs plugins",
-      "More bugfixes"
+  "eslintConfig": {
+    "extends": [
+      "@vidispine/eslint-config-base",
+      "@vidispine/eslint-config-storybook"
     ]
   },
-  "wishlist": [
-    "Timecode offset capabilities - i.e. start time from 10:00:00:00"
-  ],
-  "backlog": [
-    "External player controls component",
-    "Check for hijacked hotkeys and player focus"
-  ]
-}
+  "prettier": "@vidispine/prettier-config",
+  "gitHead": "9e1d15560719544a68e6bc881e1a40901fe9f786"
+}

package/rollup.config.js

@@ -0,0 +1,54 @@
+import { babel } from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import cleanup from 'rollup-plugin-cleanup';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import sass from 'rollup-plugin-sass';
+
+import pkg from './package.json';
+
+const isDevelopment = !!process.env.DEVELOPMENT;
+
+export default {
+  external: Object.keys(pkg.dependencies || {}).map(
+    (packageName) => new RegExp(`^${packageName}(/.*)?`),
+  ),
+  input: 'src/index.js',
+  output: [
+    {
+      file: pkg.main,
+      format: 'cjs',
+      sourcemap: isDevelopment,
+    },
+    {
+      file: pkg.module,
+      format: 'esm',
+      sourcemap: isDevelopment,
+    },
+    {
+      file: pkg.browser,
+      format: 'umd',
+      sourcemap: isDevelopment,
+      name: 'vdtVideojs',
+      globals: { mousetrap: 'mousetrap', 'video.js/dist/alt/video.core.min': 'videojs' },
+    },
+  ],
+  plugins: [
+    json(),
+    sass({
+      output: 'dist/index.css',
+    }),
+    peerDepsExternal(),
+    nodeResolve(),
+    commonjs(),
+    babel({
+      babelHelpers: 'runtime',
+      exclude: /^(.+\/)?node_modules\/.+$/,
+      presets: ['@babel/preset-env'],
+      plugins: ['@babel/plugin-transform-runtime'],
+      compact: isDevelopment ? false : 'auto',
+    }),
+    ...(isDevelopment ? [] : [cleanup()]),
+  ],
+};

package/src/constants.js

@@ -1,7 +1,7 @@
 import pkgInfo from '../package.json';
 
 export const defaults = Object.freeze({
-  frameRate: (30000 / 1001),
+  frameRate: 30000 / 1001,
   jumpSeconds: 10,
   inactivityTimeout: 1200, // hide player controls if user inactive for this duration
   audioInactivityTimeout: 0,

package/src/externalControls.js

@@ -1,7 +1,5 @@
-/* eslint-disable no-plusplus */
-/* eslint-disable no-unused-expressions */
-import { reactiveSetters } from './helpers';
 import { classNames, colors } from './constants';
+import { reactiveSetters } from './helpers';
 
 const buttonNames = Object.freeze({
   play: 'play-pause',
@@ -11,7 +9,8 @@ const buttonNames = Object.freeze({
   end: 'end',
 });
 
-const buttons = [ // order matters
+const buttons = [
+  // order matters
   buttonNames.start,
   buttonNames.fb,
   buttonNames.play,
@@ -217,10 +216,10 @@ class ExternalControls {
   }
 
   handlePress(buttonName) {
-    if (this.props.player) { // control a vdt player instance directly
-      const player = this.props.player;
-      console.log(player)
-      player.osd && player.osd.disable(); // temporarily disable OSD
+    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:
@@ -243,27 +242,25 @@ class ExternalControls {
           break;
       }
 
-      player.osd && player.osd.enable(); // re-enable OSD
+      if (player.osd) player.osd.enable(); // re-enable OSD
     } else {
       switch (buttonName) {
         case buttonNames.start:
-          this.props.onPrev && this.props.onPrev();
+          if (this.props.onPrev) this.props.onPrev();
           break;
         case buttonNames.fb:
-          this.props.onFB && this.props.onFB();
+          if (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();
-          }
+            if (this.props.onPause) this.props.onPause();
+          } else if (this.props.onPlay) this.props.onPlay();
           break;
         case buttonNames.ff:
-          this.props.onFF && this.props.onFF();
+          if (this.props.onFF) this.props.onFF();
           break;
         case buttonNames.end:
-          this.props.onNext && this.props.onNext();
+          if (this.props.onNext) this.props.onNext();
           break;
         default:
           // do nothing
@@ -318,5 +315,4 @@ class ExternalControls {
 
 ExternalControls.buttonNames = buttonNames;
 
-
 export default ExternalControls;

package/src/helpOverlay.js

@@ -1,6 +1,3 @@
-/* eslint-disable no-plusplus */
-/* eslint-disable no-unused-expressions */
-
 import mousetrap from 'mousetrap';
 
 export default class HelpOverlay {
@@ -18,12 +15,13 @@ export default class HelpOverlay {
       this.hide();
     };
 
-    this.props.target && this.props.target.appendChild(this.container);
+    if (this.props.target) this.props.target.appendChild(this.container);
 
     this.draw();
   }
 
-  draw() { // draws keyboard controls
+  draw() {
+    // draws keyboard controls
     let tableRowMarkup = ''; // will insert a DOM string here
     const rows = [
       ['⎵', 'Play / Pause'],
@@ -41,23 +39,19 @@ export default class HelpOverlay {
       ['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),
-    ];
+    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++) {
+    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>
+                <td>${columns[1][i] ? `<div>${columns[1][i][0]}</div>` : ''}</td>
+                <td>${columns[1][i] ? `- ${columns[1][i][1]}` : ''}</td>
             </tr>
         `;
     }
@@ -87,9 +81,11 @@ export default class HelpOverlay {
       this.container.classList.add('active');
       this.state.active = true;
 
-      mousetrap.bind('esc', () => { this.hide(); });
+      mousetrap.bind('esc', () => {
+        this.hide();
+      });
 
-      this.props.onToggle && this.props.onToggle(true);
+      if (this.props.onToggle) this.props.onToggle(true);
     }
   }
 
@@ -100,7 +96,7 @@ export default class HelpOverlay {
 
       mousetrap.unbind('esc');
 
-      this.props.onToggle && this.props.onToggle(false);
+      if (this.props.onToggle) this.props.onToggle(false);
     }
   }
 

package/src/helpers.js

@@ -3,7 +3,6 @@ export function truncate(input, len) {
   return input;
 }
 
-
 /*
 Make certain component props React-ive
 by being able to call respective component .handleNewProps()
@@ -20,7 +19,8 @@ export function reactiveSetters() {
         // check for own setters / getters
         const descriptor = Object.getOwnPropertyDescriptor(proto, key);
 
-        if (descriptor && descriptor.set) { // if a setter is defined, apply the prop
+        if (descriptor && descriptor.set) {
+          // if a setter is defined, apply the prop
           this[key] = props[key];
         }
       });
@@ -32,7 +32,7 @@ export function reactiveSetters() {
 }
 
 // an elegant way to prevent xss attacks
-export function sanitize(str) { 
+export function sanitize(str) {
   const temp = document.createElement('div');
   temp.textContent = str;
   return temp.innerHTML;

package/src/index.js

@@ -1,13 +1,7 @@
-import Player from './player';
-import TimeCodeDisplay from './timeCodeDisplay';
 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,
-};
+export { TimeCodeDisplay, ExternalControls, SeekBar, Player, VideoTime };

package/src/index.stories.mdx

@@ -0,0 +1,59 @@
+import { Meta, Description } from '@storybook/addon-docs';
+
+import pkgJson from '../package.json';
+import playerReadme from '../README.md';
+
+<Meta
+  title="vdt-videojs/Introduction"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: { hidden: true },
+    },
+  }}
+/>
+
+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;
+};
+
+# Introduction
+
+```
+┌───────────┐                                                   ┌───────┐
+│ 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

@@ -0,0 +1,59 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta
+  title="vdt-videojs/Player Menu/Class Methods"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: { hidden: true },
+    },
+  }}
+/>
+
+## 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>

package/src/menu.js

@@ -4,7 +4,6 @@
 /* eslint-disable max-classes-per-file */
 import mousetrap from 'mousetrap';
 
-
 const constants = Object.freeze({
   className: 'vdt-menu',
   menuClassName: 'menu',
@@ -21,7 +20,6 @@ const constants = Object.freeze({
   },
 });
 
-
 const CSS = () => `
     .${constants.menuClassName}{
         position: relative;
@@ -149,19 +147,19 @@ class MenuDisplayItem {
     this.container = document.createElement('tr');
     this.container.className = classNames.join(' ');
 
-
-    this.props.target && this.props.target.appendChild(this.container);
+    if (this.props.target) this.props.target.appendChild(this.container);
 
     // bind click
     this.container.onclick = (event) => {
-      this.props.onClick && this.props.onClick(event);
+      if (this.props.onClick) this.props.onClick(event);
     };
 
     this.render();
   }
 
   render() {
-    if (this.props.items) { // will transition to 2nd level
+    if (this.props.items) {
+      // will transition to 2nd level
       this.container.innerHTML = `
           <td class="title"></td>
           <td class="subtitle"></td>
@@ -174,10 +172,12 @@ class MenuDisplayItem {
     }
 
     const titleNode = this.container.getElementsByClassName('title')[0];
-    const subtitleNode = (this.props.items) ? this.container.getElementsByClassName('subtitle')[0] : false;
+    const subtitleNode = this.props.items
+      ? this.container.getElementsByClassName('subtitle')[0]
+      : false;
 
     titleNode.textContent = this.props.title;
-    subtitleNode && (subtitleNode.textContent = this.props.subtitle);
+    if (subtitleNode) subtitleNode.textContent = this.props.subtitle;
   }
 }
 
@@ -213,8 +213,7 @@ export default class Menu {
 
       // shadow node encapsulates style and prevents css collisions
       this.shadow = this.container.attachShadow({ mode: 'open' });
-      this.props.target && this.props.target.appendChild(this.container);
-
+      if (this.props.target) this.props.target.appendChild(this.container);
 
       // node for menu itself
       this.menuContainer = document.createElement('div');
@@ -230,7 +229,8 @@ export default class Menu {
     }
   }
 
-  draw() { // first draw
+  draw() {
+    // first draw
     const mainDiv = document.createElement('div');
     mainDiv.className = 'level-1';
     this.mainLevel = document.createElement('table');
@@ -240,12 +240,13 @@ export default class Menu {
     const subDiv = document.createElement('div');
     subDiv.className = 'level-2';
     this.subLvlTitle = document.createElement('h3');
-    this.subLvlTitle.onclick = () => { this.up(); };
+    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);
 
@@ -269,11 +270,12 @@ export default class Menu {
     this.render();
 
     this.menuContainer.classList.add('open');
-    this.props.onOpen && this.props.onOpen();
+    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();
@@ -295,10 +297,11 @@ export default class Menu {
     this.menuContainer.classList.remove('open');
     this.state.opened = false;
 
-    this.handleClicksWhenMenuOpenedTimeout && clearTimeout(this.handleClicksWhenMenuOpenedTimeout);
+    if (this.handleClicksWhenMenuOpenedTimeout)
+      clearTimeout(this.handleClicksWhenMenuOpenedTimeout);
     document.removeEventListener('click', this.handleClicksWhenMenuOpened);
 
-    this.props.onClose && this.props.onClose();
+    if (this.props.onClose) this.props.onClose();
 
     mousetrap.unbind('esc');
   }
@@ -311,7 +314,8 @@ export default class Menu {
     }
   }
 
-  up() { // go to level 1
+  up() {
+    // go to level 1
     this.menuContainer.classList.remove(constants.subLvlClassName);
     this.render();
   }
@@ -333,7 +337,7 @@ export default class Menu {
         onClick: (event) => {
           this.handleSubItemSelected(event, menuItem);
         },
-        selected: (index === activeIndex), // mark selected
+        selected: index === activeIndex, // mark selected
       });
 
       subItemRefs.push(displayItem);
@@ -344,7 +348,7 @@ export default class Menu {
 
   handleSubItemSelected(event, item) {
     this.close();
-    item.onClick && item.onClick(event, item);
+    if (item.onClick) item.onClick(event, item);
     this.up();
   }