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

package/lib/src/player.js

@@ -1,943 +0,0 @@
-
-import videojs from 'video.js/dist/alt/video.core.min';
-import mousetrap from 'mousetrap';
-
-import constants from './constants';
-import { reactiveSetters } from './helpers';
-
-import OSD from './osd';
-import TimeCodeDisplay from './timeCodeDisplay';
-import HelpOverlay from './helpOverlay';
-import Menu from './menu';
-import SeekBar from './seekBar';
-
-import VideoTime from './videoTime';
-
-const correctMimeTypes = {
-  'audio/x-aac': 'audio/aac',
-};
-const sanitizeMimeType = (mimeType) => correctMimeTypes[mimeType] || mimeType;
-
-export default class Player {
-  constructor(props) {
-    this.props = props; 
-    reactiveSetters.apply(this); 
-
-    const classNames = [ 
-      'video-js',
-      'vjs-big-play-centered',
-      (this.props.posterUrl) ? constants.classNames.poster : '',
-      (this.props.subtitles && this.props.subtitles.length > 0) ? constants.classNames.subtitles : '',
-      'init', 
-    ];
-
-    this.externalTimecodes = {
-      
-      duration: [],
-      playback: [],
-    };
-
-    this.timeConverter = new VideoTime({
-      frameRate: this.props.frameRate || constants.defaults.frameRate,
-    });
-
-    
-    this.videoEl = document.createElement('video');
-    this.videoEl.crossOrigin = this.props.crossOrigin;
-    this.videoEl.id = 'vdt-video';
-    this.videoEl.className = classNames.join(' ');
-    this.videoEl.controls = true; 
-
-    
-    if (this.props.sources) {
-      
-      if (this.props.sources.length > 1) {
-        this.props.sources.sort((a) => ((a.type.indexOf('mp4') > 0) ? 1 : -1));
-      }
-
-      
-      this.props.sources.forEach((source) => {
-        const aSource = document.createElement('source');
-        aSource.src = source.src;
-        aSource.type = sanitizeMimeType(source.type);
-        this.videoEl.appendChild(aSource);
-      });
-    }
-
-    this.videoEl.onloadedmetadata = () => { 
-      if (this.durationTimeCode) {
-        this.setDurationTimeCode();
-      }
-
-      this.videojs.el_.classList.remove('init');
-    };
-
-    
-    setTimeout(() => {
-      if (this.videojs.el_) {
-        this.videojs.el_.classList.remove('init');
-      }
-    }, 2000);
-
-    
-    if (this.props.subtitles) {
-      this.props.subtitles.forEach((sub) => {
-        const subtitleTag = document.createElement('track');
-        subtitleTag.kind = 'subtitles';
-        subtitleTag.srclang = sub.lang;
-        subtitleTag.label = sub.label;
-        
-
-        if (typeof sub.src === 'string') {
-          subtitleTag.src = sub.src; 
-        } else {
-          subtitleTag.src = window.URL.createObjectURL(sub.src); 
-        }
-
-        this.videoEl.appendChild(subtitleTag);
-      });
-    }
-
-    
-    if (this.props.target) {
-      this.props.target && this.props.target.appendChild(this.videoEl);
-    }
-
-    const showDefaultTimeDisplay = (this.props.timecode !== true);
-    const controlsEnabled = (this.props.controls !== false);
-    const options = this.props.options || {};
-
-    this.videojs = new videojs('vdt-video', {
-      responsive: true,
-      fluid: true,
-      controls: controlsEnabled,
-      alwaysCaptureHotkeys: false,
-      controlBar: {
-        RemainingTimeDisplay: false,
-        timeDivider: showDefaultTimeDisplay, 
-        durationDisplay: showDefaultTimeDisplay,
-        currentTimeDisplay: showDefaultTimeDisplay,
-      },
-      inactivityTimeout: (this.audioOnly) ? constants.defaults.audioInactivityTimeout : constants.defaults.inactivityTimeout,
-      preload: 'auto',
-      captionsButton: false,
-      subsCapsButton: false,
-      subtitlesButton: false,
-      textTrackSettings: false,
-      html5: {
-        nativeTextTracks: false,
-      },
-      languages: {
-        en: {
-          'captions off': 'off',
-          'subtitles off': 'off',
-        },
-      },
-      ...options,
-    });
-
-    
-    this.props.posterUrl && this.videojs.poster(this.props.posterUrl);
-
-    
-    this.handleNewProps(this.props);
-
-    
-    this.videojs.ready(() => {
-      this.bindHotkeys();
-      this.bindEvents();
-      this.props.onReady && this.props.onReady(this.videojs);
-
-      this.restoreSettings();
-      this.setupTimeCode();
-      this.doEsothericWork();
-      this.setupMenu();
-      this.setupCustomSeekbar();
-    });
-  }
-
-  setupCustomSeekbar() {
-    if (this.props.seekBar) {
-      
-      this.videojs.controlBar.progressControl.disable();
-      this.videojs.controlBar.progressControl.hide();
-
-      const target = this.container.getElementsByClassName('vjs-control-bar')[0];
-      const props = {
-        target,
-        player: this,
-        onDark: this.props.onDark,
-        ...this.props.seekBar,
-      };
-
-      this.seekBar = new SeekBar(props);
-
-      
-      this.videojs.on('userinactive', () => {
-        if (!this.controlsBelowPlayer) {
-          this.seekBar && this.seekBar.hideMarkers();
-        } else {
-          this.seekBar && this.seekBar.showMarkers();
-        }
-      });
-
-      this.videojs.on('useractive', () => {
-        this.seekBar && this.seekBar.showMarkers();
-      });
-    }
-  }
-
-  setupTimeCode(externalTimecodeInstance = null) {
-    const props = {
-      onInput: (e, nodeName, values) => {
-        
-        this.seekTo(this.timeConverter.smpteToCurrentTimeFromStart(values));
-      },
-      onInputFocus: () => {
-                this.videojs.options_.inactivityTimeout = 0;
-        this.videojs.cache_.inactivityTimeout = 0;
-        this.videojs.reportUserActivity();
-
-        
-        this.videojs.pause();
-      },
-      onInputBlur: () => {
-        this.videojs.options().inactivityTimeout = constants.defaults.inactivityTimeout;
-        this.videojs.cache_.inactivityTimeout = constants.defaults.inactivityTimeout;
-      },
-    };
-
-    if (externalTimecodeInstance !== null) { 
-      externalTimecodeInstance.props = Object.assign(externalTimecodeInstance.props, props);
-      this.externalTimecodes.playback.push(externalTimecodeInstance);
-    } else if (this.props.timecode === true) { 
-      
-      if (this.props.controls !== false) {
-        const target = document.getElementsByClassName('vjs-volume-panel')[0];
-        
-        this.timeCode = new TimeCodeDisplay(Object.assign(props, { target, appendAfter: true }));
-
-        
-        this.durationTimeCode = new TimeCodeDisplay({
-          target: this.timeCode.container,
-          appendAfter: true,
-        });
-      }
-    }
-
-    if (this.timeCode || this.externalTimecodes.playback.length > 0) {
-      
-      this.videojs.on('timeupdate', () => {
-        this.updateTimeCode();
-      });
-
-      this.videojs.on('play', () => {
-        this.updateTimeCodeFrame();
-      });
-    }
-  }
-
-  updateTimeCode() { 
-    const currentSecond = this.videojs.currentTime();
-    const props = this.timeConverter.secondsFromStartToSMPTE(currentSecond);
-
-    this.timeCode && this.timeCode.update(props);
-
-    if (this.externalTimecodes.playback.length > 0) {
-      this.externalTimecodes.playback.forEach((timecode) => {
-        timecode.update(props);
-      });
-    }
-  }
-
-  updateTimeCodeFrame() { 
-    const frame = this.timeConverter.currentFrame(this.videojs.currentTime()); 
-
-    this.timeCode && this.timeCode.update({ frame }); 
-
-    if (this.externalTimecodes.playback.length > 0) {
-      this.externalTimecodes.playback.forEach((timecode) => {
-        timecode.update({ frame });
-      });
-    }
-
-    
-    if (!this.videojs.paused()) {
-      this.rafID = requestAnimationFrame(() => { this.updateTimeCodeFrame(); });
-    }
-  }
-
-  setDurationTimeCode() { 
-    const durationInSeconds = this.videojs.duration();
-    const props = this.timeConverter.secondsFromStartToSMPTE(durationInSeconds);
-    props.frame = this.timeConverter.secondsToFrame(durationInSeconds);
-
-    this.durationTimeCode.update(props);
-    this.durationTimeCode.container.classList.add('duration');
-  }
-
-  bindHotkeys() { 
-    this.bindings = [
-      {
-        key: ['space', 'k'],
-        method: (e) => {
-          
-          (e.preventDefault) && e.preventDefault();
-          this.togglePlayback();
-        },
-      },
-      {
-        key: 'j',
-        method: () => {
-          this.videojs.hasStarted_ && this.jumpBackward();
-        },
-      },
-      {
-        key: 'l',
-        method: () => {
-          this.videojs.hasStarted_ && this.jumpForward();
-        },
-      },
-      {
-        key: ['.', 'right'],
-        method: () => {
-          this.frameForward();
-        },
-      },
-      {
-        key: [',', 'left'],
-        method: () => {
-          this.frameBackward();
-        },
-      },
-      {
-        key: 'f',
-        method: () => {
-          this.toggleFullscreen();
-        },
-      },
-      {
-        key: 'm',
-        method: () => {
-          this.toggleMute();
-        },
-      },
-      {
-        key: 'up',
-        method: (e) => {
-          e.preventDefault && e.preventDefault(); 
-          this.volumeUp();
-        },
-      },
-      {
-        key: 'down',
-        method: (e) => {
-          e.preventDefault && e.preventDefault(); 
-          this.volumeDown();
-        },
-      },
-      {
-        key: 'h',
-        method: () => {
-          this.help.toggle();
-        },
-      },
-      {
-        key: 'n',
-        method: () => {
-          this.menu && this.menu.toggle();
-        },
-      },
-    ];
-
-    if (this.props.subtitles) {
-      this.bindings.push({
-        key: 'c',
-        method: () => {
-          this.toggleSubs();
-        },
-      });
-    }
-
-    
-    this.bindings.forEach((binding) => {
-      mousetrap.bind(binding.key, (e) => {
-        binding.method(e);
-        this.onHotkeyPressed(binding.key);
-      });
-    });
-  }
-
-  unbindHotKeys() {
-    this.bindings && this.bindings.forEach((binding) => {
-      mousetrap.unbind(binding.key);
-    });
-  }
-
-  bindEvents() {
-    this.videojs.on('volumechange', () => { 
-      this.persistSetting(constants.settings.volume, this.volume);
-    });
-
-    this.videojs.textTracks().on('change', () => { 
-      const tracks = this.videojs.textTracks().tracks_;
-      const selected = tracks.filter((track) => (track.mode === 'showing'));
-      const areAnyTxtTracksActive = selected.length > 0; 
-
-      if (areAnyTxtTracksActive) { 
-        this.videojs.el_.classList.add(constants.classNames.subtitlesActive);
-        this.persistSetting(constants.settings.subs, true);
-        this.persistSetting(constants.settings.subLang, selected[0].language);
-      } else {
-        this.videojs.el_.classList.remove(constants.classNames.subtitlesActive);
-        this.persistSetting(constants.settings.subs, false);
-      }
-    });
-  }
-
-  volumeUp() {
-    this.videojs.controlBar.volumePanel.volumeControl.volumeBar.stepForward();
-    this.osd.feedback(constants.osd.volchange, { volume: this.volume });
-  }
-
-  volumeDown() {
-    this.videojs.controlBar.volumePanel.volumeControl.volumeBar.stepBack();
-    this.osd.feedback(constants.osd.volchange, { volume: this.volume });
-  }
-
-  toggleMute() {
-    if (!this.videojs.muted()) {
-      this.videojs.muted(true);
-      this.osd.feedback(constants.osd.volchange, { volume: this.volume });
-    } else {
-      this.videojs.muted(false);
-      this.osd.feedback(constants.osd.volchange, { volume: this.volume });
-    }
-  }
-
-  toggleFullscreen() {
-    if (this.videojs.isFullscreen()) {
-      this.videojs.exitFullscreen();
-    } else {
-      this.videojs.requestFullscreen();
-    }
-  }
-
-  seek(secs) { 
-    let time = this.videojs.currentTime() + secs;
-
-    if (time < 0) {
-      time = 0;
-    }
-
-    this.videojs.currentTime(time);
-  }
-
-  seekTo(sec) {
-    !this.videojs.hasStarted() && this.videojs.hasStarted(true);
-    this.videojs.currentTime(sec);
-  }
-
-  jumpForward() {
-    this.seek(constants.defaults.jumpSeconds);
-    this.osd.feedback(constants.osd.jumpForward);
-  }
-
-  jumpBackward() {
-    this.seek(-constants.defaults.jumpSeconds);
-    this.osd.feedback(constants.osd.jumpBackward);
-  }
-
-  frameForward() {
-    const thisFrame = this.timeConverter.secondsToFramesFromStart(this.videojs.currentTime());
-    const nextFrame = Math.round(thisFrame) + 1;
-
-    this.videojs.currentTime(this.timeConverter.frameToCurrentTimeFromStart(nextFrame));
-  }
-
-  frameBackward() {
-    const thisFrame = this.timeConverter.secondsToFramesFromStart(this.videojs.currentTime());
-    const previousFrame = Math.round(thisFrame) - 1;
-
-    this.videojs.currentTime(this.timeConverter.frameToCurrentTimeFromStart(previousFrame));
-  }
-
-  secondsToFramesFromStart(seconds) {
-    const frameRate = this.props.frameRate || constants.defaults.frameRate;
-    let frame = seconds * frameRate;
-    frame = Math.round(frame);
-    return frame; 
-  }
-
-  doEsothericWork() { 
-    if (this.props.color) { 
-      document.getElementsByClassName('vjs-play-progress')[0].style.backgroundColor = this.props.color;
-    }
-
-    
-    this.osd = new OSD({
-      target: this.videoEl.parentElement,
-    });
-
-    
-    if (this.props.onCinema) {
-      this.videoEl.parentElement.classList.add('has-cinema-button');
-      this.cinema = false;
-
-      this.addButtonToControlBar({
-        onClick: () => {
-          this.props.onCinema(!this.cinema);
-          this.cinema = !this.cinema;
-        },
-        componentName: 'CinemaButton',
-        className: 'vdt-cinema-button',
-        title: 'Cinema-mode',
-      });
-    }
-
-    
-    if (this.props.onScreenshot) {
-      this.videoEl.parentElement.classList.add('has-screenshot-button');
-
-      this.addButtonToControlBar({
-        onClick: () => {
-          this.props.onScreenshot(this.videojs.currentTime());
-        },
-        componentName: 'ScreenshotButton',
-        className: 'vdt-screenshot-button',
-        title: 'Screenshot',
-      });
-    }
-
-    
-    this.help = new HelpOverlay({
-      target: this.videoEl.parentElement,
-      onToggle: (willShow) => {
-        if (this.menu && this.menu.opened) {
-          this.menu.close();
-        }
-        if (willShow && !this.controlsBelowPlayer) {
-          this.hideControls();
-        } else {
-          this.showControls();
-        }
-      },
-    });
-  }
-
-  restoreSettings() { 
-    
-    const volume = localStorage.getItem(constants.settings.volume);
-    const subsEnabled = localStorage.getItem(constants.settings.subs);
-    const subLang = localStorage.getItem(constants.settings.subLang);
-
-    
-    this.settings = {
-      
-      [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,
-    };
-
-    
-    this.volume = this.settings[constants.settings.volume]; 
-
-    if (this.settings[constants.settings.subs]) { 
-      this.enableSubs();
-    }
-  }
-
-  persistSetting(key, val) {
-    this.settings[key] = val;
-    localStorage.setItem(key, val);
-  }
-
-  enableSubs() {
-    const subs = this.videojs.textTracks();
-
-    for (let i = 0; i < subs.length; i++) {
-      const sub = subs[i];
-      if (sub.language === this.settings[constants.settings.subLang]) {
-        sub.mode = 'showing';
-      } else {
-        sub.mode = 'hidden';
-      }
-    }
-  }
-
-  disableSubs() {
-    const subs = this.videojs.textTracks();
-
-    for (let i = 0; i < subs.length; i++) {
-      const sub = subs[i];
-      sub.mode = 'hidden';
-    }
-  }
-
-  toggleSubs() {
-    if (this.videojs.textTracks().length > 0) { 
-      if (this.videojs.textTracks().tracks_.filter((track) => (track.mode === 'showing')).length > 0) { 
-        this.disableSubs();
-      } else {
-        this.enableSubs();
-      }
-    }
-  }
-
-    addButtonToControlBar(options) {
-    const Button = videojs.getComponent('Button');
-    const CustomButton = videojs.extend(Button, {
-            constructor: function () {
-        Button.apply(this, arguments);
-        options.className && this.el_.classList.add(options.className);
-        if (options.title) { this.el_.title = options.title; }
-      },
-      handleClick: () => {
-        options.onClick && options.onClick();
-      },
-    });
-
-    videojs.registerComponent(options.componentName, CustomButton);
-    this.videojs.getChild('controlBar').addChild(options.componentName, {}, 7);
-  }
-
-  
-  get volume() {
-    return this.videojs.controlBar.volumePanel.volumeControl.volumeBar.getPercent();
-  }
-
-  set volume(floatVal) {
-    if (floatVal === 0) {
-      this.videojs.muted(true);
-    } else {
-      this.videojs.muted(false);
-      this.videojs.volume(floatVal);
-    }
-  }
-
-  setupMenu() {
-    const menuItems = this.props.menuItems || [];
-    const sourcesMenuItems = [];
-    if (this.props.sources.length > 1) { 
-      this.props.sources.forEach((source) => {
-        if (source.label) {
-          sourcesMenuItems.push({
-            title: source.label,
-            onClick: () => {
-              this.src = source;
-            },
-          });
-        }
-      });
-
-      menuItems.push({
-        title: 'Sources',
-        getActiveIndex: () => {
-          const matchingSource = this.props.sources.find((source) => (source.src === this.videojs.src()));
-          return sourcesMenuItems.indexOf(sourcesMenuItems.find((menuItem) => (menuItem.title === matchingSource.label)));
-        },
-        items: sourcesMenuItems,
-      });
-    }
-
-    
-    if (this.props.subtitles && this.props.subtitles.length > 0) {
-      
-      const subtitleMenuItems = [{
-        title: 'Off',
-        onClick: () => {
-          this.disableSubs();
-        },
-      }];
-
-      
-      
-      
-      
-      
-      
-      
-      
-      
-
-      this.props.subtitles.forEach((subtitle, index) => {
-        subtitleMenuItems.push({
-          title: subtitle.label,
-          onClick: () => {
-            const subs = this.videojs.textTracks();
-            for (let i = 0; i < subs.length; i++) {
-              const sub = subs[i];
-              if (i === index) {
-                sub.mode = 'showing';
-              } else {
-                sub.mode = 'hidden';
-              }
-            }
-          },
-        });
-      });
-
-      menuItems.push(
-        {
-          title: 'Subtitles',
-          getActiveIndex: () => {
-            const subs = this.videojs.textTracks();
-            for (let i = 0; i < subs.length; i++) {
-              const sub = subs[i];
-              if (sub.mode === 'showing') {
-                return i + 1; 
-              }
-            }
-
-            return 0; 
-          },
-          items: subtitleMenuItems,
-        },
-      );
-    }
-
-    if (menuItems.length > 0) {
-      const target = this.videojs.el_;
-
-      this.menu = new Menu({
-        target,
-        items: menuItems,
-        onOpen: () => {
-          !this.controlsBelowPlayer && this.hideControls();
-        },
-        onClose: () => {
-          !this.controlsBelowPlayer && this.videojs.controls(true);
-        },
-      });
-
-      
-      this.videoEl.parentElement.classList.add('has-vdt-menu');
-
-      this.addButtonToControlBar({
-        onClick: () => {
-          this.menu.toggle();
-        },
-        componentName: 'SettingsMenuButton',
-        className: 'vdt-settings-menu-button',
-        title: 'Settings',
-      });
-    } else {
-      
-
-    }
-  }
-
-  hideControls() {
-    this.videojs.userActive(false);
-    this.videojs.controls(false);
-    this.videojs.fluid(true);
-
-    this.videoEl.parentElement.classList.remove('vjs-user-active');
-    this.videojs.userActive(false);
-  }
-
-  showControls() {
-    this.videojs.fluid(!this.controlsBelowPlayer);
-    this.videojs.controls(true);
-    this.videojs.userActive(true);
-  }
-
-  toggleControls() {
-    if (this.videojs.controls()) {
-      this.hideControls();
-    } else {
-      this.showControls();
-    }
-  }
-
-  onHotkeyPressed(key) {
-    if (key !== 'h' && this.help.state.active) {
-      this.help.hide();
-    }
-  }
-
-  
-  triggerHotkey(key) {
-    mousetrap.trigger(key);
-  }
-
-  toStart() {
-    this.videojs.currentTime(0);
-  }
-
-  toEnd() {
-    this.videojs.currentTime(this.videojs.duration());
-  }
-
-  replay() {
-    this.toStart();
-    this.videojs.play();
-  }
-
-  play() {
-    this.videojs.play();
-  }
-
-  pause() {
-    !this.videojs.paused() && this.videojs.pause();
-  }
-
-  togglePlayback() {
-    if (this.videojs.paused()) {
-      this.play();
-      this.videojs.hasStarted_ && this.osd.feedback(constants.osd.play);
-    } else {
-      this.pause();
-      this.osd.feedback(constants.osd.pause);
-    }
-  }
-
-  destroy() { 
-    this.videojs.paused(true);
-    this.rafID && cancelAnimationFrame(this.rafID);
-    this.videojs.dispose();
-    this.unbindHotKeys();
-    this.seekBar && this.seekBar.destroy();
-  }
-
-  get container() {
-    return this.videoEl.parentElement;
-  }
-
-  set onDark(bool) {
-    if (bool) {
-      this.container.classList.add('on-dark');
-    } else {
-      this.container.classList.remove('on-dark');
-    }
-
-    if (this.seekBar) {
-      this.seekBar.onDark = bool;
-    }
-  }
-
-  get onDark() {
-    return this.container.classList.contains('on-dark');
-  }
-
-  set controlsBelowPlayer(bool) {
-    if (this.videojs.controls()) {
-      if (bool) {
-        this.container.classList.add('controls-below-player');
-        this.videojs.fluid(false);
-      } else {
-        this.container.classList.remove('controls-below-player');
-        this.videojs.fluid(true);
-      }
-    }
-  }
-
-  get controlsBelowPlayer() {
-    return this.container.classList.contains('controls-below-player');
-  }
-
-  get smpte() {
-    const currentSecond = this.videojs.currentTime();
-    return this.timeConverter.secondsFromStartToSMPTE(currentSecond);
-  }
-
-  set smpte(smpte) {
-    const currentSecond = this.videojs.currentTime();
-    return this.timeConverter.secondsFromStartToSMPTE(currentSecond);
-  }
-
-  set src({ src, type = 'video/mp4', label = null }) {
-    const currentTime = this.videojs.currentTime();
-    
-    const source = this.props.sources.find((aSource) => (aSource.src === src));
-    
-
-    const onReady = () => {
-      let initdone = false;
-      
-      this.videojs.on('loadedmetadata', () => {
-        this.videojs.currentTime(currentTime);
-      });
-
-      
-      
-      this.videojs.on('canplaythrough', () => {
-        if (!initdone) {
-          this.videojs.currentTime(currentTime);
-          initdone = true;
-          this.videojs.play();
-        }
-      });
-    };
-
-    if (source && typeof souce === 'Array' && source.length > 0) {
-      
-      this.videojs.addClass('vjs-waiting');
-      this.videojs.src({
-        ...source[0],
-      });
-      onReady();
-    } else {
-      this.videojs.addClass('vjs-waiting');
-      this.videojs.src(this.addSrc(src, type, label));
-      onReady();
-    }
-  }
-
-  get src() {
-    return this.videojs.src();
-  }
-
-  addSrc(src, type, label) {
-    const newSource = {
-      src,
-      type,
-      label,
-    };
-    const index = this.props.sources.push(newSource) - 1;
-
-    return this.props.sources[index];
-  }
-
-  removeSrc(url) {
-    
-  }
-
-  set controls(bool) {
-    if (bool) {
-      this.showControls();
-    } else {
-      this.hideControls();
-    }
-  }
-
-  get percentLoaded() {
-    const r = this.videojs.buffered();
-
-    const percentLoaded = (r.end(0) / this.videojs.duration()) * 100;
-    return percentLoaded;
-  }
-}
-
-
-
-const button = videojs.prototype.constructor.getComponent('Button');
-
-button.prototype.handleKeyDown = function (e) {
-  if (e.keyCode === 32) {
-    e.preventDefault();
-  }
-};
-videojs.prototype.constructor.registerComponent('Button', button);
-
-
-const subsButton = videojs.prototype.constructor.getComponent('SubsCapsButton');
-class CustomSubsCapsButton extends subsButton {
-  constructor(player, options = {}) {
-    super(player, options);
-    this.menuButton_.off('mouseenter');
-    this.menuButton_.off('mouseleave');
-  }
-}
-
-videojs.prototype.constructor.registerComponent('SubsCapsButton', CustomSubsCapsButton);