ravnur-player-public 3.4.2 → 3.4.4

package/src/playlist.js

@@ -0,0 +1,362 @@
+// @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

@@ -0,0 +1,121 @@
+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]);
+}