ravnur-player-public 3.4.4 → 3.4.5

package/src/player.js

@@ -1,864 +0,0 @@
-// @flow
-import createPlayer from './players';
-import { isHLS } from './players';
-import screenfull from './screenfull';
-import extensions from './extensions';
-import appendStyles from './styles';
-import Playlist from './playlist';
-import Entity from './entity';
-import MicroEvent from './microevent';
-
-import hasFlashPlayer from './flash-detector';
-
-import BaseController from './players/base';
-import BaseExtension from './extensions/base';
-
-import createLogger from './logger';
-import normalizeOptions from './normalize-options';
-
-import $t from './helpers/$t';
-import binder from './helpers/binder';
-
-import {
-   isElement, append, extend, each, createElement, existy, addClass, removeClass, toggleClass,
-   contains, isArray, head, findIndex, get, hasClass
-} from './utils';
-
-import DEFAULT_OPTIONS from './config/options';
-import DEFAULT_STYLES from './config/styles';
-import { PLAYLIST_MODES, BOTTOM_MODE, RIGHT_MODE, AUTO_MODE } from './config/playlist';
-
-import isMobile from './helpers/isMobile';
-import isiOS from './helpers/isiOS';
-import isIE, { isIE8, isIE11 } from './helpers/isIE';
-
-import StateEntity from './state';
-
-import type { Player$Logger } from './types/Logger';
-import type { Player$Styles } from './types/Styles';
-import type { Player$Source } from './types/Source';
-import type { Player$PlaylistMode } from './types/Playlist';
-import type { Player$InputOptions, Player$CombineOptions } from './types/Options';
-import type { Player$State, Player$CCLocation, Player$CCFontSize } from './types/State';
-import type { Level } from './logger';
-import type { Player$CrawlOptions } from './config/options';
-import { getStoredData, storeData } from './extensions/helpers/storage';
-import CrawlExtension from './extensions/crawl';
-
-const CN = 'rplayer';
-const FULLSCREEN_CN = `${CN}--fullscreen`;
-const IPHONE_CN = `${CN}--iphone`;
-const MOBILE_CN = `${CN}--mobile`;
-const EL_BELOW_CC_75_CN    = `${CN}--cc-75-below`;
-const EL_BELOW_CC_100_CN   = `${CN}--cc-100-below`;
-const EL_BELOW_CC_125_CN   = `${CN}--cc-125-below`;
-const EL_BELOW_CC_150_CN   = `${CN}--cc-150-below`;
-const EL_BELOW_CC_200_CN = `${CN}--cc-200-below`;
-
-const INNER_CN = `${CN}__inner`;
-const INNER_PLAYING_CN = `${INNER_CN}--playing`;
-const INNER_ACTIVE_CN = `${INNER_CN}--active`;
-const INNER_HOVER_CN = `${INNER_CN}--hovering`;
-const INNER_LIGHT_CN = `${INNER_CN}--light`;
-const INNER_BELOW_CC_CN = `${INNER_CN}--cc-below`;
-const INNER_ACCESSABILITY_CN = `${INNER_CN}--accessibility`;
-
-const EXTENSIONS_CN = 'rmp-extensions';
-const EXTENSIONS_HIDDEN_CN = `${EXTENSIONS_CN}--hidden`;
-const EXTENSION_CRAWL_CN = 'rmp-ext-crawl';
-const EXTENSION_CRAWL_VISIBLE_CN = `${EXTENSION_CRAWL_CN}--exist`;
-
-const SAVE_PLAY_TIME_KEY = 'last-play-time';
-const SAVE_PLAY_TIME_LAST_TIME = 10; // 10 seconds
-const SAVE_PLAY_TIME_SKIP = 5; // 5 seconds
-
-let hasAddedStyles = false;
-let accessibility = false;
-let inactivityTimer = 0;
-let intervalId;
-
-const PLAYLIST_MODES_CN: { [key: Player$PlaylistMode]: string } = {
-   [BOTTOM_MODE] : `${CN}--bottom-playlist`,
-   [RIGHT_MODE]  : `${CN}--right-playlist`
-};
-
-const TAB_KEY = 9;
-
-export default class Player extends Entity {
-   controller: ?BaseController = null
-   extensions: BaseExtension[] = []
-   state: StateEntity
-   _playlist: Player$Source[] = []
-
-   originOptions: ?Player$InputOptions = null
-   options: ?Player$CombineOptions = null
-   activeSourceId: string;
-
-   $el: HTMLElement
-   $inner: HTMLElement
-   $extensionsWrapper: ?HTMLElement = null
-
-   playlistController: ?Playlist = null
-
-   _timerId: ?TimeoutID = null
-   _isOpenPopup: boolean = false
-   _clipStopInterval: ?IntervalID = null
-   _isPlaylist: boolean = false
-
-   constructor(el: HTMLElement, styles?: $Shape<Player$Styles> = {}, logger?: Player$Logger = createLogger()) {
-      super(new MicroEvent(), logger);
-
-      if (!hasAddedStyles) {
-         styles = extend({}, DEFAULT_STYLES, styles);
-         appendStyles(styles, isIE8() ? el.getBoundingClientRect() : null);
-         hasAddedStyles = true;
-      }
-
-      const parent = el;
-      this.$el = createElement('div', { class: CN }, parent);
-
-      toggleClass(this.$el, IPHONE_CN, isiOS());
-      toggleClass(this.$el, MOBILE_CN, isMobile());
-
-      this.$inner = createElement('div', { class: INNER_CN }, this.$el);
-
-      binder(this, [ 'onStateChanged', 'onFullScreenChanged', 'disappearExtensions',
-         'appearExtensions', '_renderPlayer', 'onPlay', 'onPause', 'onMouseMove', 'onClick',
-         '_disappearExtensionsDelayed', '_appearExtensionsImmediately', 'onOpenPopup', 'onClosePopup',
-         'onPlayClicked', 'onChangePlaylistMode', 'onMouseEnter', 'onMouseLeave', 'onKeydown', 'onMobileTouch',
-         '_heartbeatExtension', '_handleQualityChange', 'onTimeUpdate', '_handleLastPlayTime']);
-
-      this.bus.on('statechanged', this.onStateChanged);
-      this.bus.on('pause', this.onPause);
-      this.bus.on('timeupdate', this.onTimeUpdate);
-      this.bus.on('ended', this.onPause);
-      this.bus.on('play', this.onPlay);
-      this.bus.on('changesource', this._renderPlayer );
-      this.bus.on('showpopup', this.onOpenPopup);
-      this.bus.on('hidepopup', this.onClosePopup);
-      this.bus.on('handle-play-clicked', this.onPlayClicked);
-      this.bus.on('changeplaylistmode', this.onChangePlaylistMode);
-      this.bus.on('heartbeatextensions', this._heartbeatExtension);
-      this.bus.on('manualquality', this._handleQualityChange);
-
-      this.state = new StateEntity(this.bus, logger);
-
-      if ( isMobile() ) {
-         this.bus.on('mobiletouch', this.onMobileTouch);
-      } else {
-         this.addEvent(this.$el, 'mouseleave', this.onMouseLeave);
-         this.addEvent(this.$el, 'mouseenter', this.onMouseEnter);
-         this.addEvent(this.$el, 'mousemove', this.onMouseMove);
-         this.addEvent(this.$el, 'keydown', this.onKeydown);
-         this.addEvent(this.$el, 'click', this.onClick);
-      }
-
-      if (screenfull.enabled) {
-         this.$el.addEventListener('webkitfullscreenchange', this.onFullScreenChanged);
-         this.$el.addEventListener('fullscreenchange',       this.onFullScreenChanged);
-         document.addEventListener('mozfullscreenchange',    this.onFullScreenChanged);
-         document.addEventListener('MSFullscreenChange',     this.onFullScreenChanged);
-      }
-   }
-
-   onMouseLeave() {
-      removeClass(this.$inner, INNER_HOVER_CN);
-      this.disappearExtensions();
-   }
-
-   onMouseEnter() {
-      addClass(this.$inner, INNER_HOVER_CN);
-      this.appearExtensions();
-   }
-
-   onKeydown(e: KeyboardEvent) {
-      if (!accessibility) return;
-      clearInterval(intervalId);
-      inactivityTimer = 0;
-
-      const keyCode = e.keyCode;
-
-      if (keyCode === TAB_KEY) {
-         this.appearExtensions();
-      }
-
-      intervalId = setInterval(() => {
-         inactivityTimer++;
-         if (inactivityTimer > 5) {
-            inactivityTimer = 0;
-            this.disappearExtensions();
-            clearInterval(intervalId);
-         }
-      }, 1000);
-   }
-
-   onPlay() {
-      addClass(this.$inner, INNER_PLAYING_CN);
-      this.onMouseMove();
-   }
-
-   onPause() {
-      if (!this.options.playLoop) {
-         removeClass(this.$inner, INNER_PLAYING_CN);
-         this.appearExtensions();
-      }
-   }
-
-   onPlayClicked() {
-      removeClass(this.$inner, INNER_LIGHT_CN);
-   }
-
-   onTimeUpdate() {
-      const { activeSourceId, controller } = this;
-      const { savePlayTime } = this.originOptions;
-      const ignoreSaveTime = controller.getDuration() <= (SAVE_PLAY_TIME_LAST_TIME + SAVE_PLAY_TIME_SKIP);
-      let time = controller.getCurrentTime();
-
-      if (time < SAVE_PLAY_TIME_SKIP || ignoreSaveTime) {
-         return;
-      }
-
-      if (!savePlayTime || !activeSourceId) {
-         return;
-      }
-
-      let existed = getStoredData(SAVE_PLAY_TIME_KEY) || '{}';
-      existed = JSON.parse(existed);
-
-      if (!existed.expires) {
-         let expires = new Date();
-         existed.expires = new Date().setMonth(expires.getMonth() + 1);
-      }
-
-      if (new Date().getTime() > existed.expires) {
-         existed = {};
-         existed.expires = new Date().setMonth(new Date().getMonth() + 1);
-      }
-
-      const lastAvailableTime = controller.getDuration() - SAVE_PLAY_TIME_LAST_TIME;
-      time = time <= lastAvailableTime ? time : lastAvailableTime;
-
-      existed[activeSourceId] = time;
-
-      storeData(SAVE_PLAY_TIME_KEY, JSON.stringify(existed));
-   }
-
-   isShownExtensions() {
-      const { $extensionsWrapper } = this;
-
-      if (!$extensionsWrapper) {
-         return false;
-      }
-
-      let res = !hasClass(this.$inner, EXTENSIONS_HIDDEN_CN);
-      res = res || hasClass(this.$inner, INNER_LIGHT_CN);
-      // res = res || hasClass(this.$inner, INNER_HOVER_CN);
-      return res;
-   }
-
-   onMobileTouch() {
-      const { controller } = this;
-      if ( controller && this.isShownExtensions() ) {
-         if ( controller.isPaused() ) {
-            controller.play();
-         } else {
-            controller.pause();
-         }
-      }
-      this._heartbeatExtension();
-   }
-
-   onMouseMove() {
-      this._heartbeatExtension();
-   }
-
-   onClick() {
-      this._heartbeatExtension();
-   }
-
-   _heartbeatExtension() {
-      this._appearExtensionsImmediately();
-
-      if (!this._isOpenPopup) {
-         this._disappearExtensionsDelayed();
-      }
-   }
-
-   onOpenPopup() {
-      this._isOpenPopup = true;
-      addClass(this.$inner, INNER_ACTIVE_CN);
-      this._appearExtensionsImmediately();
-   }
-
-   onClosePopup() {
-      this._isOpenPopup = false;
-      removeClass(this.$inner, INNER_ACTIVE_CN);
-      this._disappearExtensionsDelayed();
-   }
-
-   _appearExtensionsImmediately() {
-      this.appearExtensions();
-      if (this._timerId) {
-         clearTimeout(this._timerId);
-      }
-   }
-
-   _disappearExtensionsDelayed() {
-      const { originOptions } = this;
-      if (!originOptions || originOptions.alwaysShowExtensions) {
-         return;
-      }
-      this._timerId = setTimeout(this.disappearExtensions, originOptions.extensionsVisibilityTimeout);
-   }
-
-   _getParentElementForController(): ?HTMLElement {
-      const { controller } = this;
-      if (!controller) {
-         return null;
-      }
-
-      const $el = controller.getElement();
-      if (!$el) {
-         return null;
-      }
-
-      const parent = $el.parentNode;
-      if (parent && parent instanceof HTMLElement) {
-         return parent;
-      }
-
-      return null;
-   }
-
-   changeFullScreenMode() {
-      const parent = this._getParentElementForController();
-      if (!parent && !isiOS()) {
-         return;
-      }
-
-      const isFullScreenMode = this.state.isFullScreen();
-
-      // if ( isFullScreenMode) {
-      //    if (!screenfull.enabled) {
-      //       _setFullSize(parent);
-      //    }
-
-      //    return;
-      // }
-
-      this.$inner.style.width = '';
-      this.$inner.style.height = '';
-
-      if (screenfull.enabled) {
-         if (isFullScreenMode) {
-            screenfull.request(this.$el);
-         } else {
-            screenfull.exit();
-         }
-      } else if (isiOS() && this.controller) {
-         // $FlowFixMe
-         this.controller.getElement().webkitEnterFullscreen();
-         this.bus.emit('fullscreenchanging', false);
-      } else {
-         const parent = this.$el.parentNode;
-         if (!parent || !( parent instanceof HTMLElement )) {
-            return;
-         }
-
-         if (isFullScreenMode) {
-            addClass(parent, FULLSCREEN_CN);
-            _setFullSize(parent);
-         } else {
-            removeClass(parent, FULLSCREEN_CN);
-            _clearSize(parent);
-         }
-         this.bus.emit('fullscreenchanged', isFullScreenMode);
-      }
-   }
-
-   onStateChanged(state: Player$State, old: Player$State) {
-      if (state.isFullScreen !== old.isFullScreen) {
-         this.changeFullScreenMode();
-      }
-      if ( state.cc.fontSize !== old.cc.fontSize ||
-           state.cc.location !== old.cc.location ||
-           state.cc.lang !== old.cc.lang
-      ) {
-
-         const lang = state.cc.lang;
-         if (lang) {
-            this.changeLayout(lang, state.cc.fontSize, state.cc.location);
-         }
-      }
-   }
-
-   onFullScreenChanged() {
-      const isFullScreen = screenfull.isFullscreen;
-      this.bus.emit('fullscreenchanging', isFullScreen);
-      const parent = this.$el.parentNode;
-      if (!parent || !( parent instanceof HTMLElement )) {
-         return;
-      }
-
-      toggleClass(parent, FULLSCREEN_CN, screenfull.isFullscreen);
-   }
-
-   changeLayout(lang: string, fontSize: Player$CCFontSize, location: Player$CCLocation) {
-      const isBelowtMode = lang && location === 'below';
-      toggleClass(this.$inner, INNER_BELOW_CC_CN, isBelowtMode);
-      toggleClass(this.$el, EL_BELOW_CC_75_CN, isBelowtMode && fontSize === '75%');
-      toggleClass(this.$el, EL_BELOW_CC_100_CN, isBelowtMode && fontSize === '100%');
-      toggleClass(this.$el, EL_BELOW_CC_125_CN, isBelowtMode && fontSize === '125%');
-      toggleClass(this.$el, EL_BELOW_CC_150_CN, isBelowtMode && fontSize === '150%');
-      toggleClass(this.$el, EL_BELOW_CC_200_CN, isBelowtMode && fontSize === '200%');
-   }
-
-   _detectPlaylistMode(): Player$PlaylistMode {
-      const { originOptions } = this;
-      if (!originOptions) {
-         return 'auto';
-      }
-      let mode = originOptions.playlistmode;
-      mode = contains(PLAYLIST_MODES, mode) ? mode : head(PLAYLIST_MODES);
-      if ( mode === AUTO_MODE ) {
-         mode =  isMobile() ? BOTTOM_MODE : RIGHT_MODE;
-      }
-      return mode;
-   }
-
-   setup(playlist: Player$Source | Player$Source[], options?: $Shape<Player$InputOptions> = {}) {
-      // $FlowFixMe
-      const level: Level = existy(options.loggerLevel) ? options.loggerLevel : DEFAULT_OPTIONS.loggerLevel;
-      const logger = options.logger || createLogger(level);
-      const o = { bus: this.bus, logger: options.logger || logger };
-      const originOptions: Player$InputOptions = extend(o, DEFAULT_OPTIONS, options);
-
-      accessibility = options.accessibility;
-
-      // Accessability: always keep controls visible
-      if (accessibility) {
-         addClass(this.$inner, INNER_ACCESSABILITY_CN);
-      }
-
-      this.originOptions = originOptions;
-
-      this._isPlaylist = isArray(playlist);
-      this._playlist = [].concat(playlist);
-
-      if ( !this._playlist.length ) {
-         setTimeout(() => {
-            const parent = this.$el.parentNode;
-            if (parent && parent instanceof HTMLElement) {
-               parent.style.position = 'relative';
-               parent.style.border = '1px solid grey';
-            }
-            this.destroy();
-            const h1 = createElement('i', { class: 'rmp-no-video' }, parent);
-            h1.textContent = $t(originOptions.i18n, 'no-video');
-         }, 5);
-         return;
-      }
-
-      if (this._isPlaylist) {
-         const mode = this._detectPlaylistMode();
-         this.onChangePlaylistMode(mode);
-         const label = $t(originOptions.i18n, 'playlist-count-of');
-         const title = originOptions.playlistitle;
-         const forcePoint = originOptions.playlistforcepoint;
-         const loop = originOptions.playLoop;
-         const opts = { mode, bus: this.bus, title, label, forcePoint, logger, loop };
-         this.playlistController = new Playlist(this._playlist, opts);
-
-         if (!originOptions.hideplaylist) {
-            append(this.$el, this.playlistController.getElement());
-         }
-
-         if (originOptions.plalistAutoGoNext) {
-            this.bus.on('ended', () => {
-               this.bus.emit('nexttrack');
-               this._playOnLoad();
-            });
-         }
-      }
-
-      if (!this._isPlaylist || this.originOptions.hideplaylist) {
-         this.bus.emit('changesource', head(this._playlist));
-      }
-
-      this.bus.on('*', e => originOptions.logger.debug(e) );
-      const state = this.state;
-      const mode = state.getCCLang() && state.getCCLocation() || 'over';
-      this._afterSetup();
-
-      setTimeout(() => {
-         this.bus.emit('cclayoutchange', { mode, fontSize: state.getCCFontSize() });
-      });
-   }
-
-   onChangePlaylistMode(mode: Player$PlaylistMode) {
-      if (!this.originOptions.hideplaylist) {
-         each(PLAYLIST_MODES_CN, (cls, key) => toggleClass(this.$el, cls, key === mode) );
-      }
-   }
-
-   _runOnce(fnc: () => void) {
-      this.bus.once('canplaythrough', () => setTimeout(fnc));
-      this.bus.once('loadedmetadata', () => setTimeout(fnc));
-   }
-
-   _playOnLoad() {
-      this._runOnce(() => {
-         const { controller } = this;
-         if (controller) {
-            controller.play();
-         }
-      });
-   }
-
-   _afterSetup() {
-      const { controller, originOptions } = this;
-      if (!controller || !originOptions) {
-         return;
-      }
-      const { autoStart, startTime, endTime } = originOptions;
-
-      if (autoStart) {
-         this._playOnLoad();
-      }
-
-      if (startTime || endTime) {
-         this.playPart(startTime, endTime, true);
-      }
-   }
-
-   _handleLastPlayTime() {
-      const { savePlayTime, startTime } = this.originOptions;
-      const { activeSourceId } = this;
-
-      if (startTime || !savePlayTime || !activeSourceId) {
-         return;
-      }
-
-      let existed = getStoredData(SAVE_PLAY_TIME_KEY);
-
-      if (!existed) {
-         return;
-      }
-
-      existed = JSON.parse(existed);
-
-      const storedTime = existed[activeSourceId];
-
-      if (storedTime) {
-         this.playPart(storedTime, undefined, true);
-      }
-   }
-
-   playPart(from: ?number, to: ?number, lazy: boolean = false) {
-      const { controller } = this;
-      if (!controller) {
-         return;
-      }
-
-      if (typeof from === 'number') {
-         if (lazy) {
-            const f = from;
-            this._runOnce(() => controller.setCurrentTime(f));
-         } else {
-            controller.setCurrentTime(from);
-         }
-      }
-
-      if (typeof to === 'number') {
-         const _listener = () => {
-            const currentTime = controller.getCurrentTime();
-            if (typeof currentTime === 'number' && typeof to === 'number' && currentTime > to) {
-               controller.pause();
-               this.bus.off('timeupdate', _listener);
-            }
-         };
-         this.bus.on('timeupdate', _listener);
-      }
-
-      if (!lazy) {
-         controller.play();
-      }
-   }
-
-   // eslint-disable-next-line complexity
-   _renderPlayer(source: Player$Source) {
-      if ( !source.src ) {
-         throw new Error('Incorrent load\'s options.');
-      }
-
-      this.activeSourceId = source.id;
-
-      const lang = this.state.getCCLang();
-      if (lang) {
-         this.changeLayout(lang, this.state.getCCFontSize(), this.state.getCCLocation());
-      }
-
-      let playlistMoverOptions = {};
-      if (this._isPlaylist && !this.originOptions.hideplaylist) {
-         const idx = findIndex(this._playlist, source);
-         const next = this._playlist[idx + 1] || null;
-         const prev = this._playlist[idx - 1] || null;
-         playlistMoverOptions = {
-            showNext: existy(next),
-            nextTrackThumbnails: get(next, 'poster', ''),
-            nextTrackTitle: get(next, 'title', ''),
-
-            showPrev: existy(prev),
-            prevTrackThumbnails: get(prev, 'poster', ''),
-            prevTrackTitle: get(prev, 'title', '')
-         };
-      }
-      const options = normalizeOptions(this.originOptions || {}, extend({}, source, playlistMoverOptions));
-      this.options = options;
-
-      if ( this.controller ) {
-         this.controller.destroy();
-      }
-
-      this.destroyExtensions();
-
-      if ( isHLS(options.type) && !Player.canPlayHLS ) {
-         const parent = this.$el.parentNode;
-         if (parent && parent instanceof HTMLElement) {
-            parent.style.position = 'relative';
-            parent.style.border = '1px solid grey';
-         }
-         this.destroy();
-         const h1 = createElement('i', { class: 'rmp-no-video' }, parent);
-         if (this.originOptions) {
-            h1.textContent = $t(this.originOptions.i18n || {}, 'no-flash');
-         }
-         return;
-      }
-
-      this._beforeRender(options);
-
-      const controller = createPlayer(options, this.state);
-      this.controller = controller;
-      append(this.$inner, controller.$el);
-
-      controller.load(options);
-
-      this._handleLastPlayTime();
-
-      if (options.useNativeControls) {
-         return;
-      }
-      removeClass(this.$inner, INNER_PLAYING_CN);
-      addClass(this.$inner, INNER_LIGHT_CN);
-
-      if (options.showCrawl) {
-         addClass(this.$inner, EXTENSION_CRAWL_VISIBLE_CN);
-      }
-
-      const $extensionsWrapper = createElement('div', { class: EXTENSIONS_CN }, this.$inner);
-      this.$extensionsWrapper = $extensionsWrapper;
-
-      each(extensions(controller, this.state, options), ext => {
-         try {
-            const element = ext.getElement();
-            if ( element ) {
-               append($extensionsWrapper, element);
-               ext.addEvent(element, 'dblclick', _stop);
-            }
-
-            const outer = ext.getOuter();
-            if ( outer ) {
-               append(this.$inner, outer, $extensionsWrapper);
-            }
-            this.extensions.push(ext);
-         } catch (e) {
-            options.logger.error(e);
-         }
-      });
-   }
-
-   _beforeRender({ clip, timecode }: $Shape<Player$CombineOptions>) {
-      if (this._clipStopInterval) {
-         clearInterval(this._clipStopInterval);
-      }
-      if ( clip ) {
-         const [ start, end ] = clip;
-         if (start) {
-            this._runOnce(() => {
-               if (this.controller) {
-                  this.controller.setCurrentTime(start);
-               }
-            });
-         }
-
-         if ( end ) {
-            this._clipStopInterval = setInterval(() => {
-               const controller = this.controller;
-               if ( !controller || controller.isPaused() ) {
-                  return;
-               }
-               const currentTime = controller.getCurrentTime();
-               if (currentTime > end + timecode) {
-                  controller.pause();
-                  setTimeout(() => this.bus.emit('ended'));
-               }
-            }, 26);
-         }
-      }
-   }
-
-   _handleQualityChange(quality: mixed) {
-      if (this.originOptions) {
-         // $FlowFixMe
-         this.originOptions.qualityLevel = quality;
-      }
-   }
-
-   refreshCrawlExtension(crawl: Player$CrawlOptions, visibility: boolean = true) {
-      this.originOptions.logger.debug('crawl:extensions:refreshing');
-
-      if (!crawl) {
-         throw new Error('Crawl options not found');
-      }
-
-      const crawlExtension = this.extensions.find(ext => '$crawl' in ext);
-
-      if (!crawlExtension) {
-         this.originOptions.logger.debug('crawl:extensions:creating');
-
-         const options = extend({}, this.originOptions, { crawl });
-         const extension = new CrawlExtension(this.controller, this.state, options);
-         const outer = extension.getOuter();
-
-         if ( outer ) {
-            append(this.$inner, outer, this.$extensionsWrapper);
-         }
-
-         this.extensions.push(extension);
-
-         return;
-      }
-
-      this.logger.debug('crawl:extensions:refreshing');
-
-      // $FlowFixMe
-      crawlExtension.refresh(crawl, visibility);
-   }
-
-   destroyExtensions() {
-      each(this.extensions, ext => ext.destroy());
-      this.extensions.length = 0;
-
-      const { $extensionsWrapper } = this;
-
-      if ( $extensionsWrapper && isElement($extensionsWrapper) ) {
-         const parent = $extensionsWrapper.parentNode;
-         if (parent) {
-            parent.removeChild($extensionsWrapper);
-         }
-      }
-   }
-
-   disappearExtensions() {
-      const { originOptions, $inner } = this;
-
-      if (!originOptions || !$inner) {
-         return;
-      }
-
-      const showExts = originOptions.alwaysShowExtensions;
-      if (this.controller && (showExts || this._isOpenPopup || this.controller.isPaused())) {
-         return;
-      }
-      addClass($inner, EXTENSIONS_HIDDEN_CN);
-   }
-
-   appearExtensions() {
-      removeClass(this.$inner, EXTENSIONS_HIDDEN_CN);
-   }
-
-   on(event: string, fnc: (...args: Array<mixed>) => mixed) {
-      this.bus.on(event, fnc);
-   }
-
-   off(event: string, fnc: (...args: Array<mixed>) => mixed) {
-      this.bus.off(event, fnc);
-   }
-
-   destroy() {
-      super.destroy();
-      this.bus.destroy();
-
-      if (this._clipStopInterval) {
-         clearInterval(this._clipStopInterval);
-      }
-
-      this.destroyExtensions();
-      const { controller } = this;
-
-      if (controller) {
-         controller.pause();
-         controller.destroy();
-      }
-      this.controller = null;
-
-      if (screenfull.enabled) {
-         this.$el.removeEventListener('webkitfullscreenchange', this.onFullScreenChanged);
-         this.$el.removeEventListener('fullscreenchange',       this.onFullScreenChanged);
-         document.removeEventListener('mozfullscreenchange',    this.onFullScreenChanged);
-         document.removeEventListener('MSFullscreenChange',     this.onFullScreenChanged);
-      }
-
-      if (this.playlistController) {
-         this.playlistController.destroy();
-      }
-
-      const parent = this.$el.parentNode;
-      this.$el.removeChild(this.$inner);
-
-      if (parent) {
-         parent.removeChild(this.$el);
-      }
-   }
-
-   static addStyles(styles: $Shape<Player$Styles>) {
-      appendStyles(extend({}, DEFAULT_STYLES, styles));
-   }
-
-   static canPlayHLS = !(isIE() || isIE11()) || hasFlashPlayer
-}
-
-function _windowWidth() {
-   const de = document.documentElement;
-   return de ? de.clientWidth : null;
-}
-
-function _windowHeight() {
-   const de = document.documentElement;
-   return de ? de.clientHeight : null;
-}
-
-/* set correct width/height for fullsize mode */
-function _setFullSize(el: HTMLElement) {
-   const w = _windowWidth();
-   const h = _windowHeight();
-   if (typeof w === 'number' && typeof h === 'number') {
-      _normalizeSize(el, w, h);
-   }
-}
-
-/* set correct width/height */
-function _normalizeSize(el: HTMLElement, w: number, h: number) {
-   el.style.width = `${w}px`;
-   el.style.height = `${h}px`;
-}
-
-function _clearSize(el: HTMLElement) {
-   el.style.width = '';
-   el.style.height = '';
-}
-
-function _stop(e: Event) {
-   e.stopPropagation();
-}