ravnur-player-public 3.4.4 → 3.4.6

package/src/playlist.js

@@ -1,362 +0,0 @@
-// @flow
-
-import Entity from './entity';
-
-import {
-   each, createElement, addClass, removeClass, hasClass, findIndex, head
-} from './utils';
-
-import MicroEvent from './microevent';
-import type { Player$Logger } from './types/Logger';
-import type { Player$PlaylistMode } from './types/Playlist';
-import type { Player$Source } from './types/Source';
-
-import createSvg, { BACK, NEXT } from './svgs';
-
-const CN = 'rplayer';
-const PLAYLIST_CN = `${CN}__playlist`;
-
-const PLAYLIST_WRAPPER_CN = `${CN}__playlist-wrapper`;
-const PLAYLIST_WRAPPER_WITHOUT_TITLE_CN = `${PLAYLIST_WRAPPER_CN}--wot-title`;
-const PLAYLIST_HEADER_CN = `${CN}__playlist-header`;
-const PLAYLIST_OF_CN = `${CN}__playlist-of`;
-const PLAYLIST_CURRENT_TITLE_CN = `${CN}__playlist-current-title`;
-
-const PLAYLIST_ITEM_CN = `${CN}__playlist-item`;
-const PLAYLIST_INNER_ITEM_CN = `${CN}__playlist-item-thumb`;
-const PLAYLIST_CURRENT_ITEM_CN = `${PLAYLIST_ITEM_CN}--current`;
-const PLAYLIST_ITEM_TITLE_CN = `${CN}__playlist-item-title`;
-const PLAYLIST_LEFT_BTN_CN = `${CN}__playlist-left-btn`;
-const PLAYLIST_RIGHT_BTN_CN = `${CN}__playlist-right-btn`;
-
-const SLIDE_DELTA = 250;
-
-const SPACE_CODE = 32;
-
-type PlaylistOptions = {
-   mode: Player$PlaylistMode,
-   bus: MicroEvent,
-   title: string,
-   label: string,
-   forcePoint: number,
-   logger: Player$Logger,
-   loop: boolean
-};
-
-type ResizeEvent = { width: number, height: number, outerWidth: number };
-
-export default class Playlist extends Entity {
-   $element: HTMLElement
-   $wrapper: HTMLElement
-   $of: HTMLElement
-   $currentTitle: HTMLElement
-   $header: HTMLElement
-   $left: HTMLElement;
-   $right: HTMLElement;
-
-   $items = [];
-   _playlist: Player$Source[] = [];
-   _current: ?HTMLElement = null;
-   _header = '';
-   _label = 'videos';
-   _point: number;
-   _mode: string;
-   _forceDowngrade: boolean = false;
-   _isLoop: boolean = false;
-
-   constructor(playlist: Player$Source[], options: PlaylistOptions) {
-      super(options.bus, options.logger);
-      this._playlist = playlist;
-      this._mode = options.mode;
-      this._header = options.title;
-      this._label = options.label;
-      this._point = options.forcePoint;
-      this._isLoop = options.loop;
-
-      // $FlowFixMe
-      this._onResize = this._onResize.bind(this);
-      // $FlowFixMe
-      this._onFullScreenChanged = this._onFullScreenChanged.bind(this);
-      // $FlowFixMe
-      this._gotoNextTrack = this._gotoNextTrack.bind(this);
-      // $FlowFixMe
-      this._gotoPrevTrack = this._gotoPrevTrack.bind(this);
-
-      options.bus.on('resizeplayer', this._onResize);
-      options.bus.on('nexttrack', this._gotoNextTrack);
-      options.bus.on('prevtrack', this._gotoPrevTrack);
-      options.bus.on('fullscreenchanged', this._onFullScreenChanged);
-
-      this.render();
-
-      this.addEvent(this.$left, 'click', () => this.slideLeft(SLIDE_DELTA));
-      this.addEvent(this.$right, 'click', () => this.slideRight(SLIDE_DELTA));
-   }
-
-   isBottom() {
-      return this._forceDowngrade ? true : this._mode === 'bottom';
-   }
-
-   _gotoNextTrack() {
-      let idx = findIndex(this.$items, this._current);
-      let item = this.$items[++idx];
-
-      if (this._isLoop && !item) {
-         item = this.$items[0];
-      }
-
-      eventFire(item, 'click');
-   }
-
-   _gotoPrevTrack() {
-      let idx = findIndex(this.$items, this._current);
-      const item = this.$items[--idx];
-      if (item) {
-         eventFire(item, 'click');
-      }
-   }
-
-   render() {
-      this.$wrapper = createElement('div', { class: `${PLAYLIST_WRAPPER_CN} ${this._header ? '' : PLAYLIST_WRAPPER_WITHOUT_TITLE_CN}` });
-      this.$header = createElement('h3', { class: PLAYLIST_HEADER_CN, title: this._header }, this.$wrapper);
-      this.$header.textContent = this._header;
-      this.$of = createElement('span', { class: PLAYLIST_OF_CN }, this.$wrapper);
-      this.$currentTitle = createElement('span', { class: PLAYLIST_CURRENT_TITLE_CN }, this.$wrapper);
-      this.$element = createElement('div', { class: PLAYLIST_CN, tabindex: -1 }, this.$wrapper);
-
-      const params = { type: 'button', class: PLAYLIST_LEFT_BTN_CN, style: 'display: none;' };
-      this.$left = createElement('button', params, this.$wrapper);
-      createSvg(this.$left, BACK);
-      this.$left.setAttribute('aria-label', 'Scroll left');
-
-      this.$right = createElement('button', { type: 'button', class: PLAYLIST_RIGHT_BTN_CN }, this.$wrapper);
-      createSvg(this.$right, NEXT);
-      this.$right.setAttribute('aria-label', 'Scroll right');
-
-      // find(this._playlist, pl => pl.default) ||
-      let options = head(this._playlist);
-
-      each(this._playlist, opts => {
-         const wrapper = this._renderItem(opts);
-         if (opts === options) {
-            this._changeSource(options);
-            this._changeCurrent(wrapper);
-         }
-         this.$items.push(wrapper);
-      });
-   }
-
-   _changeSource(options: Player$Source) {
-      this.bus.emit('changesource', options);
-      this.bus.emit('changeplaylistmode', this.isBottom() ? 'bottom' : 'right');
-      const idx = this._playlist.indexOf(options) + 1;
-      this.$of.textContent = `${idx}/${this._playlist.length} ${this._label}`;
-      this.$currentTitle.textContent = options.title;
-      this.$currentTitle.setAttribute('title', options.title);
-   }
-
-   _changeCurrent(current: HTMLElement) {
-      if (this._current) {
-         removeClass(this._current, PLAYLIST_CURRENT_ITEM_CN);
-      }
-      addClass(current, PLAYLIST_CURRENT_ITEM_CN);
-
-      this._current = current;
-      this._stablePlaylist();
-   }
-
-   _stablePlaylist() {
-      if (!this._current) {
-         return;
-      }
-      const rect = this._current.getBoundingClientRect();
-      if ( this.isBottom() ) {
-         if ( this.$left ) {
-            let leftRect = this.$left.getBoundingClientRect();
-            if (leftRect.right > rect.left) {
-               this.slideLeft(leftRect.right - rect.left);
-            }
-         }
-
-         if ( this.$right ) {
-            let rightRect = this.$right.getBoundingClientRect();
-            if (rightRect.left < rect.right) {
-               this.slideRight(rect.right - rightRect.left);
-            }
-         }
-      } else {
-         const parentRect = this.$element.getBoundingClientRect();
-         this.$element.scrollTop -= Math.max(0, parentRect.top - rect.top);
-         this.$element.scrollTop += Math.max(0, rect.bottom - parentRect.bottom);
-      }
-   }
-
-   _renderItem(options: Player$Source) {
-      const wrapper = createElement(
-         'div',
-         { class: PLAYLIST_ITEM_CN, title: options.title, tabindex: 0 },
-         this.$element
-      );
-      const inner = createElement('div', { class: PLAYLIST_INNER_ITEM_CN }, wrapper);
-      createElement('img', { src: options.poster }, inner);
-      const span = createElement('span', { class: PLAYLIST_ITEM_TITLE_CN }, wrapper);
-      span.textContent = options.title;
-      createElement('b', { }, wrapper);
-
-      const handler = () => {
-         if ( hasClass(wrapper, PLAYLIST_CURRENT_ITEM_CN) ) {
-            return;
-         }
-         this._changeSource(options);
-         this._changeCurrent(wrapper);
-      };
-
-      this.addEvent(wrapper, 'click', handler);
-      this.addEvent(wrapper, 'keydown', (e: KeyboardEvent) => {
-         if (e.keyCode !== SPACE_CODE) return;
-         e.preventDefault();
-         handler();
-      });
-
-      return wrapper;
-   }
-
-   _onResize(data: ResizeEvent) {
-      const { outerWidth } = data;
-
-      if ( this._forceDowngrade !== outerWidth < this._point ) {
-         this._forceDowngrade = !this._forceDowngrade;
-         this.bus.emit('changeplaylistmode', this.isBottom() ? 'bottom' : 'right');
-         this.$wrapper.style.height = '';
-         this.$element.style.width = '';
-         this.$element.style.marginLeft = '';
-         this._stablePlaylist();
-      }
-
-      if (this.isBottom()) {
-         this._resize4bottom(data);
-      } else {
-         this._resize4right(data);
-      }
-   }
-
-   _resize4right({height}: ResizeEvent) {
-      this.$wrapper.style.height = `${height}px`;
-      if (!this._current) {
-         return;
-      }
-
-      const current = this._current.getBoundingClientRect();
-      const parent = this.$element.getBoundingClientRect();
-
-      if ( parent.top > current.top ) {
-         this.$element.scrollTop = this.$element.scrollTop - ( parent.top - current.top );
-      } else if (parent.bottom < current.bottom) {
-         this.$element.scrollTop = this.$element.scrollTop + current.bottom - parent.bottom;
-      }
-   }
-
-   _resize4bottom({ width }: ResizeEvent) {
-      each(this.$items, c => {
-         c.style.width = '';
-      });
-      this.$element.style.width = `${width}px`;
-
-      width = 0;
-      each(this.$items, c => {
-         width += c.offsetWidth;
-         const style = c.currentStyle || window.getComputedStyle(c);
-         width += parseFloat(style.marginRight);
-      });
-      this.$element.style.width = `${width}px`;
-      this._stableBottomPosition();
-   }
-
-   _stableBottomPosition() {
-      if (!this._current) {
-         return;
-      }
-      const current = this._current.getBoundingClientRect();
-      const parent = this.$wrapper.getBoundingClientRect();
-
-      if ( parent.left > current.left ) {
-         eventFire(this.$left, 'click');
-         setTimeout(() => this._stableBottomPosition());
-      } else if (parent.right < current.right) {
-         eventFire(this.$right, 'click');
-         setTimeout(() => this._stableBottomPosition());
-      }
-   }
-
-   _onFullScreenChanged(isFullScreenMode: boolean) {
-      this.$element.style.display = isFullScreenMode ? 'none' : 'block';
-   }
-
-   slideLeft(delta: number) {
-      let ml = parseInt(this.$element.style.marginLeft, 10) || 0;
-      ml = Math.min(0, ml + delta);
-      this.$element.style.marginLeft = `${ml}px`;
-      this.$right.style.display = 'block';
-      if (!ml) {
-         this.$left.style.display = 'none';
-      }
-   }
-
-   slideRight(delta: number) {
-      const parent = this.$element.parentNode;
-      if (!(parent instanceof HTMLElement)) {
-         return;
-      }
-      let ml = parseInt(this.$element.style.marginLeft, 10) || 0;
-      ml -= delta;
-      const min = parent.offsetWidth - this.$element.offsetWidth;
-      ml = Math.max(min, ml);
-      this.$element.style.marginLeft = `${ml}px`;
-      this.$left.style.display = 'block';
-      if (ml === min) {
-         this.$right.style.display = 'none';
-      }
-   }
-
-   getElement() {
-      return this.$wrapper;
-   }
-
-   destroy() {
-      super.destroy();
-      this.bus.off('resizeplayer', this._onResize);
-      this.bus.off('nexttrack', this._gotoNextTrack);
-      this.bus.off('prevtrack', this._gotoPrevTrack);
-      this.bus.off('fullscreenchanged', this._onFullScreenChanged);
-      if (this.$element.parentNode) {
-         this.$element.parentNode.removeChild(this.$element);
-      }
-
-      // this.$element = null;
-      this.$items.length = 0;
-      this._playlist.length = 0;
-      this._current = null;
-   }
-}
-
-function eventFire(el, etype) {
-   var event;
-   if (document.createEvent) {
-      event = document.createEvent('HTMLEvents');
-      event.initEvent(etype, true, true);
-   } else {
-      // $FlowFixMe
-      event = document.createEventObject();
-      event.eventType = etype;
-   }
-
-   // $FlowFixMe
-   event.eventName = etype;
-
-   if (el.dispatchEvent) {
-      el.dispatchEvent(event);
-   } else {
-      // $FlowFixMe
-      el.fireEvent('on' + etype, event);
-   }
-}

package/src/screenfull.js

@@ -1,121 +0,0 @@
-import { addProperty, noop } from './utils';
-
-// var keyboardAllowed = typeof Element !== 'undefined' && 'ALLOW_KEYBOARD_INPUT' in Element;
-
-var fn = (() => {
-   var val;
-   var valLength;
-
-   var fnMap = [
-      [
-         'requestFullscreen',
-         'exitFullscreen',
-         'fullscreenElement',
-         'fullscreenEnabled',
-         'fullscreenchange',
-         'fullscreenerror'
-      ],
-      // new WebKit
-      [
-         'webkitRequestFullscreen',
-         'webkitExitFullscreen',
-         'webkitFullscreenElement',
-         'webkitFullscreenEnabled',
-         'webkitfullscreenchange',
-         'webkitfullscreenerror'
-
-      ],
-      // old WebKit (Safari 5.1)
-      [
-         'webkitRequestFullScreen',
-         'webkitCancelFullScreen',
-         'webkitCurrentFullScreenElement',
-         'webkitCancelFullScreen',
-         'webkitfullscreenchange',
-         'webkitfullscreenerror'
-
-      ],
-      [
-         'mozRequestFullScreen',
-         'mozCancelFullScreen',
-         'mozFullScreenElement',
-         'mozFullScreenEnabled',
-         'mozfullscreenchange',
-         'mozfullscreenerror'
-      ],
-      [
-         'msRequestFullscreen',
-         'msExitFullscreen',
-         'msFullscreenElement',
-         'msFullscreenEnabled',
-         'MSFullscreenChange',
-         'MSFullscreenError'
-      ]
-   ];
-
-   var i = 0;
-   var l = fnMap.length;
-   var ret = {};
-
-   for (; i < l; i++) {
-      val = fnMap[i];
-      if (val && val[1] in document) {
-         for (i = 0, valLength = val.length; i < valLength; i++) {
-            ret[fnMap[0][i]] = val[i];
-         }
-         return ret;
-      }
-   }
-
-   return false;
-})();
-
-const screenfull = {
-   request(elem) {
-      var request = fn.requestFullscreen;
-
-      elem = elem || document.documentElement;
-
-      // Work around Safari 5.1 bug: reports support for
-      // keyboard in fullscreen even though it doesn't.
-      // Browser sniffing, since the alternative with
-      // setTimeout is even worse.
-      if (/5\.1[\.\d]* Safari/.test(navigator.userAgent)) {
-         elem[request]();
-      } else {
-         elem[request]();
-         // keyboardAllowed && Element.ALLOW_KEYBOARD_INPUT
-      }
-   },
-   exit() {
-      if (this.isFullscreen) {
-         document[fn.exitFullscreen]();
-      }
-   },
-   toggle(elem) {
-      if (this.isFullscreen) {
-         this.exit();
-      } else {
-         this.request(elem);
-      }
-   },
-   raw: fn
-};
-
-addProperty(screenfull, 'isFullscreen', isFullscreen, noop);
-addProperty(screenfull, 'element', element, noop);
-addProperty(screenfull, 'enabled', enabled, noop);
-
-export default fn ? screenfull : false;
-
-function isFullscreen() {
-   return Boolean(document[fn.fullscreenElement]);
-}
-
-function element() {
-   return document[fn.fullscreenElement];
-}
-
-function enabled() {
-   return Boolean(document[fn.fullscreenEnabled]);
-}