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

package/lib/index.cjs.js

@@ -11,7 +11,7 @@ var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
 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$1 = "lib/index.es.js";
@@ -164,7 +164,7 @@ const packageInfo = Object.freeze({
   vendor: pkgInfo.name.split('/')[0],
 });
 
-const constants = Object.freeze({
+const constants$2 = Object.freeze({
   defaults,
   settings,
   classNames,
@@ -250,13 +250,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
 
@@ -273,10 +273,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;
     }
@@ -657,7 +657,7 @@ class HelpOverlay {
       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);
     }
@@ -668,7 +668,7 @@ class HelpOverlay {
       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);
     }
@@ -703,7 +703,7 @@ const constants$1 = Object.freeze({
 });
 
 
-const CSS = () => `
+const CSS$2 = () => `
     .${constants$1.menuClassName}{
         position: relative;
         height: 100%;
@@ -906,7 +906,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);
     }
   }
@@ -968,7 +968,7 @@ class Menu {
 
     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);
   }
 
@@ -981,7 +981,7 @@ class Menu {
 
     this.props.onClose && this.props.onClose();
 
-    mousetrap__default['default'].unbind('esc');
+    mousetrap__default["default"].unbind('esc');
   }
 
   toggle() {
@@ -1051,7 +1051,7 @@ class Menu {
 
 /* eslint-disable max-len */
 
-const constants$2 = Object.freeze({
+const constants = Object.freeze({
   className: 'vdt-seekbar',
   defaults: {
     bgColor: '#fafafa',
@@ -1068,7 +1068,7 @@ const constants$2 = Object.freeze({
 });
 
 const CSS$1 = (bgColor, fillColor) => `
-  .${constants$2.className}{
+  .${constants.className}{
     user-select: none;
     background: ${colors.light};
     height: 6px;
@@ -1078,7 +1078,7 @@ const CSS$1 = (bgColor, fillColor) => `
     z-index: 5;
   }
 
-  .${classNames.onDark}.${constants$2.className}{
+  .${classNames.onDark}.${constants.className}{
     background: ${colors.gray};
   }
 
@@ -1089,7 +1089,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;
   }
 
@@ -1100,11 +1100,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;
   }
 
@@ -1120,7 +1120,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; }
@@ -1129,7 +1129,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;
@@ -1139,7 +1139,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);
   }
 
@@ -1158,13 +1158,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;
   }
 
@@ -1181,7 +1181,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;
@@ -1257,11 +1257,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;
   }
 
@@ -1287,7 +1287,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
@@ -1307,8 +1307,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);
@@ -1387,26 +1387,26 @@ class SeekBar {
 
     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);
       });
     });
@@ -1414,7 +1414,7 @@ class SeekBar {
 
   unbindHotKeys() {
     this.bindings && this.bindings.forEach((binding) => {
-      mousetrap__default['default'].unbind(binding.key);
+      mousetrap__default["default"].unbind(binding.key);
     });
   }
 
@@ -1502,7 +1502,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);
@@ -1538,10 +1538,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');
@@ -1551,14 +1551,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);
@@ -1590,8 +1590,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('%', ''))}%`;
     }
   }
 
@@ -1608,7 +1608,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
@@ -1642,7 +1642,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();
@@ -1665,12 +1665,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;
     }
 
@@ -1713,7 +1713,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(),
       });
 
@@ -1740,7 +1740,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(),
       });
 
@@ -1910,6 +1910,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;
@@ -1984,8 +1985,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
     ];
 
@@ -1996,7 +1997,7 @@ class Player {
     };
 
     this.timeConverter = new VideoTime({
-      frameRate: this.props.frameRate || constants.defaults.frameRate,
+      frameRate: this.props.frameRate || constants$2.defaults.frameRate,
     });
 
     /*
@@ -2068,7 +2069,7 @@ class Player {
     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,
@@ -2079,7 +2080,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,
@@ -2168,8 +2169,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;
       },
     };
 
@@ -2327,7 +2328,7 @@ class Player {
 
     // 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);
       });
@@ -2336,13 +2337,13 @@ class Player {
 
   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
@@ -2351,33 +2352,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 });
     }
   }
 
@@ -2405,13 +2406,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() {
@@ -2429,7 +2430,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
@@ -2493,22 +2494,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();
     }
   }
@@ -2523,7 +2524,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';
@@ -2559,8 +2560,8 @@ class Player {
   }
   */
   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);
@@ -2572,7 +2573,7 @@ class Player {
       },
     });
 
-    videojs__default['default'].registerComponent(options.componentName, CustomButton);
+    videojs__default["default"].registerComponent(options.componentName, CustomButton);
     this.videojs.getChild('controlBar').addChild(options.componentName, {}, 7);
   }
 
@@ -2730,7 +2731,7 @@ class Player {
 
   // eslint-disable-next-line class-methods-use-this
   triggerHotkey(key) {
-    mousetrap__default['default'].trigger(key);
+    mousetrap__default["default"].trigger(key);
   }
 
   toStart() {
@@ -2757,10 +2758,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);
     }
   }
 
@@ -2897,17 +2898,17 @@ help with undesired behaviour
 */
 
 // 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);
@@ -2920,7 +2921,7 @@ class CustomSubsCapsButton extends subsButton {
 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 */
 
@@ -2950,7 +2951,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;
@@ -3083,7 +3084,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