ravnur-player-public 3.4.2 → 3.4.4

package/src/player.js

@@ -0,0 +1,864 @@
+// @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();
+}