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

package/lib/index.umd.js

@@ -2,7 +2,7 @@
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('video.js/dist/alt/video.core.min'), require('mousetrap')) :
   typeof define === 'function' && define.amd ? define(['exports', 'video.js/dist/alt/video.core.min', 'mousetrap'], factory) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.vdtVideojs = {}, global.videojs, global.mousetrap));
-}(this, (function (exports, videojs, mousetrap) { 'use strict';
+})(this, (function (exports, videojs, mousetrap) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -10,7 +10,7 @@
   var mousetrap__default = /*#__PURE__*/_interopDefaultLegacy(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";
@@ -163,7 +163,7 @@
     vendor: pkgInfo.name.split('/')[0],
   });
 
-  const constants = Object.freeze({
+  const constants$2 = Object.freeze({
     defaults,
     settings,
     classNames,
@@ -249,13 +249,13 @@
       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
 
@@ -272,10 +272,10 @@
 
           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;
       }
@@ -656,7 +656,7 @@
         this.container.classList.add('active');
         this.state.active = true;
 
-        mousetrap__default['default'].bind('esc', () => { this.hide(); });
+        mousetrap__default["default"].bind('esc', () => { this.hide(); });
 
         this.props.onToggle && this.props.onToggle(true);
       }
@@ -667,7 +667,7 @@
         this.container.classList.remove('active');
         this.state.active = false;
 
-        mousetrap__default['default'].unbind('esc');
+        mousetrap__default["default"].unbind('esc');
 
         this.props.onToggle && this.props.onToggle(false);
       }
@@ -702,7 +702,7 @@
   });
 
 
-  const CSS = () => `
+  const CSS$2 = () => `
     .${constants$1.menuClassName}{
         position: relative;
         height: 100%;
@@ -905,7 +905,7 @@
         // 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);
       }
     }
@@ -967,7 +967,7 @@
 
       this.handleClicksWhenMenuOpenedTimeout = setTimeout(() => {
         document.addEventListener('click', this.handleClicksWhenMenuOpened);
-        mousetrap__default['default'].bind('esc', this.close.bind(this)); // esc closes menu aswell
+        mousetrap__default["default"].bind('esc', this.close.bind(this)); // esc closes menu aswell
       }, constants$1.animationLength);
     }
 
@@ -980,7 +980,7 @@
 
       this.props.onClose && this.props.onClose();
 
-      mousetrap__default['default'].unbind('esc');
+      mousetrap__default["default"].unbind('esc');
     }
 
     toggle() {
@@ -1050,7 +1050,7 @@
 
   /* eslint-disable max-len */
 
-  const constants$2 = Object.freeze({
+  const constants = Object.freeze({
     className: 'vdt-seekbar',
     defaults: {
       bgColor: '#fafafa',
@@ -1067,7 +1067,7 @@
   });
 
   const CSS$1 = (bgColor, fillColor) => `
-  .${constants$2.className}{
+  .${constants.className}{
     user-select: none;
     background: ${colors.light};
     height: 6px;
@@ -1077,7 +1077,7 @@
     z-index: 5;
   }
 
-  .${classNames.onDark}.${constants$2.className}{
+  .${classNames.onDark}.${constants.className}{
     background: ${colors.gray};
   }
 
@@ -1088,7 +1088,7 @@
     left: 0px;
     top: 0px;
     background: ${fillColor};
-    transition: width ${constants$2.defaults.transitionTime}ms linear;
+    transition: width ${constants.defaults.transitionTime}ms linear;
     z-index: 2;
   }
 
@@ -1099,11 +1099,11 @@
     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;
   }
 
@@ -1119,7 +1119,7 @@
   }
 
   .marker{
-    transition: opacity ${constants$2.defaults.transitionTime}ms linear;
+    transition: opacity ${constants.defaults.transitionTime}ms linear;
   }
 
   .marker{ display: none; }
@@ -1128,7 +1128,7 @@
   .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;
@@ -1138,7 +1138,7 @@
   }
 
   .marker.regional .handle{
-    background: ${constants$2.defaults.regionAccentColor};
+    background: ${constants.defaults.regionAccentColor};
     box-shadow: -2px 1px 1px rgba(0,0,0,.1);
   }
 
@@ -1157,13 +1157,13 @@
   }
 
   .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;
   }
 
@@ -1180,7 +1180,7 @@
     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;
@@ -1256,11 +1256,11 @@
     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;
   }
 
@@ -1286,7 +1286,7 @@
       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
@@ -1306,8 +1306,8 @@
         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);
@@ -1386,26 +1386,26 @@
 
       if (this.props.player) {
         const { player } = this.props;
-        mousetrap__default['default'].bind('i', () => {
+        mousetrap__default["default"].bind('i', () => {
           if (this.markersEnabled) this.in = player.videojs.currentTime();
         });
 
-        mousetrap__default['default'].bind('o', () => {
+        mousetrap__default["default"].bind('o', () => {
           if (this.markersEnabled) this.out = player.videojs.currentTime();
         });
 
-        mousetrap__default['default'].bind('shift+i', () => {
+        mousetrap__default["default"].bind('shift+i', () => {
           if (this.markersEnabled) this.navigateToIn();
         });
 
-        mousetrap__default['default'].bind('shift+o', () => {
+        mousetrap__default["default"].bind('shift+o', () => {
           if (this.markersEnabled) this.navigateToOut();
         });
       }
 
       // bind
       this.bindings.forEach((binding) => {
-        mousetrap__default['default'].bind(binding.key, (e) => {
+        mousetrap__default["default"].bind(binding.key, (e) => {
           binding.method(e);
         });
       });
@@ -1413,7 +1413,7 @@
 
     unbindHotKeys() {
       this.bindings && this.bindings.forEach((binding) => {
-        mousetrap__default['default'].unbind(binding.key);
+        mousetrap__default["default"].unbind(binding.key);
       });
     }
 
@@ -1501,7 +1501,7 @@
 
     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);
@@ -1537,10 +1537,10 @@
 
     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');
@@ -1550,14 +1550,14 @@
           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);
@@ -1589,8 +1589,8 @@
 
     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('%', ''))}%`;
       }
     }
 
@@ -1607,7 +1607,7 @@
 
       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
@@ -1641,7 +1641,7 @@
         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();
@@ -1664,12 +1664,12 @@
     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;
       }
 
@@ -1712,7 +1712,7 @@
       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(),
         });
 
@@ -1739,7 +1739,7 @@
       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(),
         });
 
@@ -1909,6 +1909,7 @@
   class VideoTime {
     constructor(props) {
       if (props.frameRate === undefined) {
+        delete this;
         throw new Error('No "frameRate" option provided, refer to docs.');
       } else {
         this.props = props;
@@ -1983,8 +1984,8 @@
       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
       ];
 
@@ -1995,7 +1996,7 @@
       };
 
       this.timeConverter = new VideoTime({
-        frameRate: this.props.frameRate || constants.defaults.frameRate,
+        frameRate: this.props.frameRate || constants$2.defaults.frameRate,
       });
 
       /*
@@ -2067,7 +2068,7 @@
       const controlsEnabled = (this.props.controls !== false);
       const options = this.props.options || {};
 
-      this.videojs = new videojs__default['default']('vdt-video', {
+      this.videojs = new videojs__default["default"]('vdt-video', {
         responsive: true,
         fluid: true,
         controls: controlsEnabled,
@@ -2078,7 +2079,7 @@
           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,
@@ -2167,8 +2168,8 @@
           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;
         },
       };
 
@@ -2326,7 +2327,7 @@
 
       // bind
       this.bindings.forEach((binding) => {
-        mousetrap__default['default'].bind(binding.key, (e) => {
+        mousetrap__default["default"].bind(binding.key, (e) => {
           binding.method(e);
           this.onHotkeyPressed(binding.key);
         });
@@ -2335,13 +2336,13 @@
 
     unbindHotKeys() {
       this.bindings && this.bindings.forEach((binding) => {
-        mousetrap__default['default'].unbind(binding.key);
+        mousetrap__default["default"].unbind(binding.key);
       });
     }
 
     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
@@ -2350,33 +2351,33 @@
         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 });
       }
     }
 
@@ -2404,13 +2405,13 @@
     }
 
     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() {
@@ -2428,7 +2429,7 @@
     }
 
     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
@@ -2492,22 +2493,22 @@
 
     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();
       }
     }
@@ -2522,7 +2523,7 @@
 
       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';
@@ -2558,8 +2559,8 @@
     }
     */
     addButtonToControlBar(options) {
-      const Button = videojs__default['default'].getComponent('Button');
-      const CustomButton = videojs__default['default'].extend(Button, {
+      const Button = videojs__default["default"].getComponent('Button');
+      const CustomButton = videojs__default["default"].extend(Button, {
         /* eslint-disable func-names, object-shorthand */
         constructor: function () {
           Button.apply(this, arguments);
@@ -2571,7 +2572,7 @@
         },
       });
 
-      videojs__default['default'].registerComponent(options.componentName, CustomButton);
+      videojs__default["default"].registerComponent(options.componentName, CustomButton);
       this.videojs.getChild('controlBar').addChild(options.componentName, {}, 7);
     }
 
@@ -2729,7 +2730,7 @@
 
     // eslint-disable-next-line class-methods-use-this
     triggerHotkey(key) {
-      mousetrap__default['default'].trigger(key);
+      mousetrap__default["default"].trigger(key);
     }
 
     toStart() {
@@ -2756,10 +2757,10 @@
     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);
       }
     }
 
@@ -2896,17 +2897,17 @@
   */
 
   // take over space button, prevent video.js default behaviour
-  const button = videojs__default['default'].prototype.constructor.getComponent('Button');
+  const button = videojs__default["default"].prototype.constructor.getComponent('Button');
   // eslint-disable-next-line func-names
   button.prototype.handleKeyDown = function (e) {
     if (e.keyCode === 32) {
       e.preventDefault();
     }
   };
-  videojs__default['default'].prototype.constructor.registerComponent('Button', button);
+  videojs__default["default"].prototype.constructor.registerComponent('Button', button);
 
   // video.js opens menu on hover by default, this prevents that
-  const subsButton = videojs__default['default'].prototype.constructor.getComponent('SubsCapsButton');
+  const subsButton = videojs__default["default"].prototype.constructor.getComponent('SubsCapsButton');
   class CustomSubsCapsButton extends subsButton {
     constructor(player, options = {}) {
       super(player, options);
@@ -2919,7 +2920,7 @@
   TODO - see what can be done about strange behaviour
   when cc button is clicked with the menu showing
   */
-  videojs__default['default'].prototype.constructor.registerComponent('SubsCapsButton', CustomSubsCapsButton);
+  videojs__default["default"].prototype.constructor.registerComponent('SubsCapsButton', CustomSubsCapsButton);
 
   /* eslint-disable no-plusplus */
 
@@ -2949,7 +2950,7 @@
   BEWARE - IE < Edge is unsupported
   */
 
-  const CSS$2 = `
+  const CSS = `
   .vdt-external-controls{
     display: flex;
     justify-content: center;
@@ -3082,7 +3083,7 @@
         // 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
@@ -3240,4 +3241,4 @@
 
   Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vidispine/vdt-videojs",
-  "version": "21.3.0",
+  "version": "21.4.0-pre.1",
   "license": "UNLICENSED",
   "author": "Oto Inša <otoinsa@bertelsmann.de>",
   "dependencies": {