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

package/lib/index.esm.js

@@ -2,7 +2,7 @@ import videojs from 'video.js/dist/alt/video.core.min';
 import mousetrap from 'mousetrap';
 
 var name = "@vidispine/vdt-videojs";
-var version = "21.3.0";
+var version = "21.4.0-pre.1";
 var license = "UNLICENSED";
 var main = "lib/index.cjs.js";
 var module = "lib/index.es.js";
@@ -155,7 +155,7 @@ const packageInfo = Object.freeze({
   vendor: pkgInfo.name.split('/')[0],
 });
 
-const constants = Object.freeze({
+const constants$2 = Object.freeze({
   defaults,
   settings,
   classNames,
@@ -241,13 +241,13 @@ class OSD {
     let className;
 
     switch (feedbackType) {
-      case constants.osd.pause:
+      case constants$2.osd.pause:
         className = 'pause';
         break;
-      case constants.osd.play:
+      case constants$2.osd.play:
         className = 'play';
         break;
-      case constants.osd.volchange:
+      case constants$2.osd.volchange:
         const currentVolumeLevel = details.volume;
         let perceivedVolumeLevel; // 'low' | 'mid' | 'high' string to utilize video js eisting icons
 
@@ -264,10 +264,10 @@ class OSD {
 
         className = `volchange ${perceivedVolumeLevel}`;
         break;
-      case constants.osd.jumpForward:
+      case constants$2.osd.jumpForward:
         className = 'forward-jump';
         break;
-      case constants.osd.jumpBackward:
+      case constants$2.osd.jumpBackward:
         className = 'backward-jump';
         break;
     }
@@ -694,7 +694,7 @@ const constants$1 = Object.freeze({
 });
 
 
-const CSS = () => `
+const CSS$2 = () => `
     .${constants$1.menuClassName}{
         position: relative;
         height: 100%;
@@ -897,7 +897,7 @@ class Menu {
       // attach styles
       this.style = document.createElement('style');
       this.style.type = 'text/css';
-      this.style.innerHTML = CSS();
+      this.style.innerHTML = CSS$2();
       this.shadow.appendChild(this.style);
     }
   }
@@ -1042,7 +1042,7 @@ class Menu {
 
 /* eslint-disable max-len */
 
-const constants$2 = Object.freeze({
+const constants = Object.freeze({
   className: 'vdt-seekbar',
   defaults: {
     bgColor: '#fafafa',
@@ -1059,7 +1059,7 @@ const constants$2 = Object.freeze({
 });
 
 const CSS$1 = (bgColor, fillColor) => `
-  .${constants$2.className}{
+  .${constants.className}{
     user-select: none;
     background: ${colors.light};
     height: 6px;
@@ -1069,7 +1069,7 @@ const CSS$1 = (bgColor, fillColor) => `
     z-index: 5;
   }
 
-  .${classNames.onDark}.${constants$2.className}{
+  .${classNames.onDark}.${constants.className}{
     background: ${colors.gray};
   }
 
@@ -1080,7 +1080,7 @@ const CSS$1 = (bgColor, fillColor) => `
     left: 0px;
     top: 0px;
     background: ${fillColor};
-    transition: width ${constants$2.defaults.transitionTime}ms linear;
+    transition: width ${constants.defaults.transitionTime}ms linear;
     z-index: 2;
   }
 
@@ -1091,11 +1091,11 @@ const CSS$1 = (bgColor, fillColor) => `
     transition: none;
   }
 
-  .${classNames.onDark}.${constants$2.className} .load-indicator{
+  .${classNames.onDark}.${constants.className} .load-indicator{
     background: white;
   }
 
-  .${constants$2.className}.dragging .fill{
+  .${constants.className}.dragging .fill{
     transition: none;
   }
 
@@ -1111,7 +1111,7 @@ const CSS$1 = (bgColor, fillColor) => `
   }
 
   .marker{
-    transition: opacity ${constants$2.defaults.transitionTime}ms linear;
+    transition: opacity ${constants.defaults.transitionTime}ms linear;
   }
 
   .marker{ display: none; }
@@ -1120,7 +1120,7 @@ const CSS$1 = (bgColor, fillColor) => `
   .marker .handle{
     position: absolute;
     bottom: 10px; right: 0px;
-    width: ${constants$2.defaults.markerWidth}px;
+    width: ${constants.defaults.markerWidth}px;
     height: 28px;
     background: #999;
     border-radius: 3px;
@@ -1130,7 +1130,7 @@ const CSS$1 = (bgColor, fillColor) => `
   }
 
   .marker.regional .handle{
-    background: ${constants$2.defaults.regionAccentColor};
+    background: ${constants.defaults.regionAccentColor};
     box-shadow: -2px 1px 1px rgba(0,0,0,.1);
   }
 
@@ -1149,13 +1149,13 @@ const CSS$1 = (bgColor, fillColor) => `
   }
 
   .handle:active{
-    background: ${constants$2.defaults.regionColor};
+    background: ${constants.defaults.regionColor};
   }
 
   .region{
     position: absolute;
     width: auto;
-    background: ${constants$2.defaults.regionColor};
+    background: ${constants.defaults.regionColor};
     opacity: .7;
   }
 
@@ -1172,7 +1172,7 @@ const CSS$1 = (bgColor, fillColor) => `
     bottom: 10px;
     width: 16px;
     border-radius: 16px;
-    background: ${constants$2.defaults.regionAccentColor};
+    background: ${constants.defaults.regionAccentColor};
     position: absolute;
     margin-left: -8px;
     transition: transform 200ms ease-out;
@@ -1248,11 +1248,11 @@ const CSS$1 = (bgColor, fillColor) => `
     visibility: visible;
   }
 
-  .${constants$2.className}.dragging .bubble{
+  .${constants.className}.dragging .bubble{
     transform: scale3d(.75,.75,.75);
   }
 
-  .${constants$2.className}.hide-markers .marker{
+  .${constants.className}.hide-markers .marker{
     opacity: 0;
   }
 
@@ -1278,7 +1278,7 @@ class SeekBar {
     reactiveSetters.apply(this); // ability to handle new props via setters
 
     this.container = document.createElement('div');
-    this.container.className = `${constants$2.className}-wrapper`;
+    this.container.className = `${constants.className}-wrapper`;
 
     this.state = {
       in: null, // in seconds from 0
@@ -1298,8 +1298,8 @@ class SeekBar {
       this.style.type = 'text/css';
 
       // colors from props
-      const bgColor = (this.props.bgColor) ? this.props.bgColor : constants$2.defaults.bgColor;
-      const fillColor = (this.props.fillColor) ? this.props.fillColor : constants$2.defaults.fillColor;
+      const bgColor = (this.props.bgColor) ? this.props.bgColor : constants.defaults.bgColor;
+      const fillColor = (this.props.fillColor) ? this.props.fillColor : constants.defaults.fillColor;
 
       this.style.innerHTML = CSS$1(sanitize(bgColor), sanitize(fillColor));
       this.shadow.appendChild(this.style);
@@ -1493,7 +1493,7 @@ class SeekBar {
 
   draw() {
     this.bar = document.createElement('div');
-    this.bar.className = constants$2.className;
+    this.bar.className = constants.className;
     this.bar.onclick = (e) => {
       if (!e.target.classList.contains('marker') && !e.target.classList.contains('handle')) {
         this.handleSeek(e);
@@ -1529,10 +1529,10 @@ class SeekBar {
 
   drawMarkers() { // TODO - add touch events
     if (this.markersEnabled) {
-      const markerIn = this.markers[constants$2.markerTypes.in] = document.createElement('div');
-      const markerOut = this.markers[constants$2.markerTypes.out] = document.createElement('div');
-      markerIn.className = `marker ${constants$2.markerTypes.in}`;
-      markerOut.className = `marker ${constants$2.markerTypes.out}`;
+      const markerIn = this.markers[constants.markerTypes.in] = document.createElement('div');
+      const markerOut = this.markers[constants.markerTypes.out] = document.createElement('div');
+      markerIn.className = `marker ${constants.markerTypes.in}`;
+      markerOut.className = `marker ${constants.markerTypes.out}`;
 
       const handleIn = document.createElement('div');
       const handleOut = document.createElement('div');
@@ -1542,14 +1542,14 @@ class SeekBar {
         e.preventDefault(); // prevents selection cursor
         e.stopPropagation(); // prevent triggering seek bar drag
 
-        this.handleMarkerDrag(markerIn, constants$2.markerTypes.in, e);
+        this.handleMarkerDrag(markerIn, constants.markerTypes.in, e);
       }, false);
 
       handleOut.addEventListener('mousedown', (e) => {
         e.preventDefault(); // prevents selection cursor
         e.stopPropagation(); // prevent triggering seek bar drag
 
-        this.handleMarkerDrag(markerOut, constants$2.markerTypes.out, e);
+        this.handleMarkerDrag(markerOut, constants.markerTypes.out, e);
       }, false);
 
       markerIn.appendChild(handleIn);
@@ -1581,8 +1581,8 @@ class SeekBar {
 
   drawInAndOutRegion() { // triggered after drawMarkers if in + out is set
     if (this.state.in !== null && this.state.out !== null) {
-      this.region.style.left = this.markers[constants$2.markerTypes.in].style.left;
-      this.region.style.right = `${100 - parseFloat(this.markers[constants$2.markerTypes.out].style.left.replace('%', ''))}%`;
+      this.region.style.left = this.markers[constants.markerTypes.in].style.left;
+      this.region.style.right = `${100 - parseFloat(this.markers[constants.markerTypes.out].style.left.replace('%', ''))}%`;
     }
   }
 
@@ -1599,7 +1599,7 @@ class SeekBar {
 
     const drag = (e) => {
       const pxDragged = Math.abs(mouseDownEvent.clientX - e.clientX);
-      const markerOffset = (type === constants$2.markerTypes.in) ? (constants$2.defaults.markerWidth / 2) : -(constants$2.defaults.markerWidth / 2);
+      const markerOffset = (type === constants.markerTypes.in) ? (constants.defaults.markerWidth / 2) : -(constants.defaults.markerWidth / 2);
       const left = e.clientX - barOffset + markerOffset;
 
       if (left >= 0 && left < barWidth && pxDragged > 1) { // prevent out-of-bounds
@@ -1633,7 +1633,7 @@ class SeekBar {
       jump to the time of marker in player
       */
       if (!dragHappened) {
-        if (type === constants$2.markerTypes.in) {
+        if (type === constants.markerTypes.in) {
           this.navigateToIn();
         } else {
           this.navigateToOut();
@@ -1656,12 +1656,12 @@ class SeekBar {
   cleanupMarkers() {
     let removedMarker = false;
     if (this.state.in === null) {
-      this.markers[constants$2.markerTypes.in].classList.remove('active');
+      this.markers[constants.markerTypes.in].classList.remove('active');
       removedMarker = true;
     }
 
     if (this.state.out === null) {
-      this.markers[constants$2.markerTypes.out].classList.remove('active');
+      this.markers[constants.markerTypes.out].classList.remove('active');
       removedMarker = true;
     }
 
@@ -1704,7 +1704,7 @@ class SeekBar {
     if (val !== null && val !== undefined) {
       const { player } = this.props;
       this.updateMarkers({
-        type: constants$2.markerTypes.in,
+        type: constants.markerTypes.in,
         value: val / player.videojs.duration(),
       });
 
@@ -1731,7 +1731,7 @@ class SeekBar {
     if (val !== null && val !== undefined) {
       const { player } = this.props;
       this.updateMarkers({
-        type: constants$2.markerTypes.out,
+        type: constants.markerTypes.out,
         value: val / player.videojs.duration(),
       });
 
@@ -1901,6 +1901,7 @@ SeekBar.Region = Region;
 class VideoTime {
   constructor(props) {
     if (props.frameRate === undefined) {
+      delete this;
       throw new Error('No "frameRate" option provided, refer to docs.');
     } else {
       this.props = props;
@@ -1975,8 +1976,8 @@ class Player {
     const classNames = [ // add conditional css classes here for the whole container
       'video-js',
       'vjs-big-play-centered',
-      (this.props.posterUrl) ? constants.classNames.poster : '',
-      (this.props.subtitles && this.props.subtitles.length > 0) ? constants.classNames.subtitles : '',
+      (this.props.posterUrl) ? constants$2.classNames.poster : '',
+      (this.props.subtitles && this.props.subtitles.length > 0) ? constants$2.classNames.subtitles : '',
       'init', // make player height 0 while no metadata for video size available with css
     ];
 
@@ -1987,7 +1988,7 @@ class Player {
     };
 
     this.timeConverter = new VideoTime({
-      frameRate: this.props.frameRate || constants.defaults.frameRate,
+      frameRate: this.props.frameRate || constants$2.defaults.frameRate,
     });
 
     /*
@@ -2070,7 +2071,7 @@ class Player {
         durationDisplay: showDefaultTimeDisplay,
         currentTimeDisplay: showDefaultTimeDisplay,
       },
-      inactivityTimeout: (this.audioOnly) ? constants.defaults.audioInactivityTimeout : constants.defaults.inactivityTimeout,
+      inactivityTimeout: (this.audioOnly) ? constants$2.defaults.audioInactivityTimeout : constants$2.defaults.inactivityTimeout,
       preload: 'auto',
       captionsButton: false,
       subsCapsButton: false,
@@ -2159,8 +2160,8 @@ class Player {
         this.videojs.pause();
       },
       onInputBlur: () => {
-        this.videojs.options().inactivityTimeout = constants.defaults.inactivityTimeout;
-        this.videojs.cache_.inactivityTimeout = constants.defaults.inactivityTimeout;
+        this.videojs.options().inactivityTimeout = constants$2.defaults.inactivityTimeout;
+        this.videojs.cache_.inactivityTimeout = constants$2.defaults.inactivityTimeout;
       },
     };
 
@@ -2333,7 +2334,7 @@ class Player {
 
   bindEvents() {
     this.videojs.on('volumechange', () => { // persist volume changes
-      this.persistSetting(constants.settings.volume, this.volume);
+      this.persistSetting(constants$2.settings.volume, this.volume);
     });
 
     this.videojs.textTracks().on('change', () => { // determine subtitles state
@@ -2342,33 +2343,33 @@ class Player {
       const areAnyTxtTracksActive = selected.length > 0; // -> true if any text tracks are showing
 
       if (areAnyTxtTracksActive) { // update container with appropriate className
-        this.videojs.el_.classList.add(constants.classNames.subtitlesActive);
-        this.persistSetting(constants.settings.subs, true);
-        this.persistSetting(constants.settings.subLang, selected[0].language);
+        this.videojs.el_.classList.add(constants$2.classNames.subtitlesActive);
+        this.persistSetting(constants$2.settings.subs, true);
+        this.persistSetting(constants$2.settings.subLang, selected[0].language);
       } else {
-        this.videojs.el_.classList.remove(constants.classNames.subtitlesActive);
-        this.persistSetting(constants.settings.subs, false);
+        this.videojs.el_.classList.remove(constants$2.classNames.subtitlesActive);
+        this.persistSetting(constants$2.settings.subs, false);
       }
     });
   }
 
   volumeUp() {
     this.videojs.controlBar.volumePanel.volumeControl.volumeBar.stepForward();
-    this.osd.feedback(constants.osd.volchange, { volume: this.volume });
+    this.osd.feedback(constants$2.osd.volchange, { volume: this.volume });
   }
 
   volumeDown() {
     this.videojs.controlBar.volumePanel.volumeControl.volumeBar.stepBack();
-    this.osd.feedback(constants.osd.volchange, { volume: this.volume });
+    this.osd.feedback(constants$2.osd.volchange, { volume: this.volume });
   }
 
   toggleMute() {
     if (!this.videojs.muted()) {
       this.videojs.muted(true);
-      this.osd.feedback(constants.osd.volchange, { volume: this.volume });
+      this.osd.feedback(constants$2.osd.volchange, { volume: this.volume });
     } else {
       this.videojs.muted(false);
-      this.osd.feedback(constants.osd.volchange, { volume: this.volume });
+      this.osd.feedback(constants$2.osd.volchange, { volume: this.volume });
     }
   }
 
@@ -2396,13 +2397,13 @@ class Player {
   }
 
   jumpForward() {
-    this.seek(constants.defaults.jumpSeconds);
-    this.osd.feedback(constants.osd.jumpForward);
+    this.seek(constants$2.defaults.jumpSeconds);
+    this.osd.feedback(constants$2.osd.jumpForward);
   }
 
   jumpBackward() {
-    this.seek(-constants.defaults.jumpSeconds);
-    this.osd.feedback(constants.osd.jumpBackward);
+    this.seek(-constants$2.defaults.jumpSeconds);
+    this.osd.feedback(constants$2.osd.jumpBackward);
   }
 
   frameForward() {
@@ -2420,7 +2421,7 @@ class Player {
   }
 
   secondsToFramesFromStart(seconds) {
-    const frameRate = this.props.frameRate || constants.defaults.frameRate;
+    const frameRate = this.props.frameRate || constants$2.defaults.frameRate;
     let frame = seconds * frameRate;
     frame = Math.round(frame);
     return frame; // we're on this frame, could be for example 23.45
@@ -2484,22 +2485,22 @@ class Player {
 
   restoreSettings() { // restore settings, like volume level or language track
     // get values from storage
-    const volume = localStorage.getItem(constants.settings.volume);
-    const subsEnabled = localStorage.getItem(constants.settings.subs);
-    const subLang = localStorage.getItem(constants.settings.subLang);
+    const volume = localStorage.getItem(constants$2.settings.volume);
+    const subsEnabled = localStorage.getItem(constants$2.settings.subs);
+    const subLang = localStorage.getItem(constants$2.settings.subLang);
 
     // values vs default behaviours in a neatly readable map
     this.settings = {
       // avoid .99999999 and other float pecularities in js
-      [constants.settings.volume]: (volume !== null) ? Math.round(volume * 100) / 100 : 1,
-      [constants.settings.subLang]: (subLang !== null) ? subLang : 'en',
-      [constants.settings.subs]: (subsEnabled !== null) ? JSON.parse(subsEnabled) : false,
+      [constants$2.settings.volume]: (volume !== null) ? Math.round(volume * 100) / 100 : 1,
+      [constants$2.settings.subLang]: (subLang !== null) ? subLang : 'en',
+      [constants$2.settings.subs]: (subsEnabled !== null) ? JSON.parse(subsEnabled) : false,
     };
 
     // apply values (settings)
-    this.volume = this.settings[constants.settings.volume]; // volume
+    this.volume = this.settings[constants$2.settings.volume]; // volume
 
-    if (this.settings[constants.settings.subs]) { // subtitles
+    if (this.settings[constants$2.settings.subs]) { // subtitles
       this.enableSubs();
     }
   }
@@ -2514,7 +2515,7 @@ class Player {
 
     for (let i = 0; i < subs.length; i++) {
       const sub = subs[i];
-      if (sub.language === this.settings[constants.settings.subLang]) {
+      if (sub.language === this.settings[constants$2.settings.subLang]) {
         sub.mode = 'showing';
       } else {
         sub.mode = 'hidden';
@@ -2748,10 +2749,10 @@ class Player {
   togglePlayback() {
     if (this.videojs.paused()) {
       this.play();
-      this.videojs.hasStarted_ && this.osd.feedback(constants.osd.play);
+      this.videojs.hasStarted_ && this.osd.feedback(constants$2.osd.play);
     } else {
       this.pause();
-      this.osd.feedback(constants.osd.pause);
+      this.osd.feedback(constants$2.osd.pause);
     }
   }
 
@@ -2941,7 +2942,7 @@ https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
 BEWARE - IE < Edge is unsupported
 */
 
-const CSS$2 = `
+const CSS = `
   .vdt-external-controls{
     display: flex;
     justify-content: center;
@@ -3074,7 +3075,7 @@ class ExternalControls {
       // attach styles
       this.style = document.createElement('style');
       this.style.type = 'text/css';
-      this.style.appendChild(document.createTextNode(CSS$2));
+      this.style.appendChild(document.createTextNode(CSS));
       this.shadow.appendChild(this.style);
 
       // attach container to shadow root