aleph1.co.uk Git - yaffs-website/blob - node_modules/video.js/es5/control-bar/progress-control/seek-bar.js

   1 'use strict';
   2
   3 exports.__esModule = true;
   4
   5 var _slider = require('../../slider/slider.js');
   6
   7 var _slider2 = _interopRequireDefault(_slider);
   8
   9 var _component = require('../../component.js');
  10
  11 var _component2 = _interopRequireDefault(_component);
  12
  13 var _fn = require('../../utils/fn.js');
  14
  15 var Fn = _interopRequireWildcard(_fn);
  16
  17 var _formatTime = require('../../utils/format-time.js');
  18
  19 var _formatTime2 = _interopRequireDefault(_formatTime);
  20
  21 var _computedStyle = require('../../utils/computed-style.js');
  22
  23 var _computedStyle2 = _interopRequireDefault(_computedStyle);
  24
  25 require('./load-progress-bar.js');
  26
  27 require('./play-progress-bar.js');
  28
  29 require('./tooltip-progress-bar.js');
  30
  31 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
  32
  33 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  34
  35 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  36
  37 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
  38
  39 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
  40                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 * @file seek-bar.js
  41                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 */
  42
  43
  44 /**
  45  * Seek Bar and holder for the progress bars
  46  *
  47  * @extends Slider
  48  */
  49 var SeekBar = function (_Slider) {
  50   _inherits(SeekBar, _Slider);
  51
  52   /**
  53    * Creates an instance of this class.
  54    *
  55    * @param {Player} player
  56    *        The `Player` that this class should be attached to.
  57    *
  58    * @param {Object} [options]
  59    *        The key/value store of player options.
  60    */
  61   function SeekBar(player, options) {
  62     _classCallCheck(this, SeekBar);
  63
  64     var _this = _possibleConstructorReturn(this, _Slider.call(this, player, options));
  65
  66     _this.on(player, 'timeupdate', _this.updateProgress);
  67     _this.on(player, 'ended', _this.updateProgress);
  68     player.ready(Fn.bind(_this, _this.updateProgress));
  69
  70     if (options.playerOptions && options.playerOptions.controlBar && options.playerOptions.controlBar.progressControl && options.playerOptions.controlBar.progressControl.keepTooltipsInside) {
  71       _this.keepTooltipsInside = options.playerOptions.controlBar.progressControl.keepTooltipsInside;
  72     }
  73
  74     if (_this.keepTooltipsInside) {
  75       _this.tooltipProgressBar = _this.addChild('TooltipProgressBar');
  76     }
  77     return _this;
  78   }
  79
  80   /**
  81    * Create the `Component`'s DOM element
  82    *
  83    * @return {Element}
  84    *         The element that was created.
  85    */
  86
  87
  88   SeekBar.prototype.createEl = function createEl() {
  89     return _Slider.prototype.createEl.call(this, 'div', {
  90       className: 'vjs-progress-holder'
  91     }, {
  92       'aria-label': 'progress bar'
  93     });
  94   };
  95
  96   /**
  97    * Update the seek bars tooltip and width.
  98    *
  99    * @param {EventTarget~Event} [event]
 100    *        The `timeupdate` or `ended` event that caused this to run.
 101    *
 102    * @listens Player#timeupdate
 103    * @listens Player#ended
 104    */
 105
 106
 107   SeekBar.prototype.updateProgress = function updateProgress(event) {
 108     this.updateAriaAttributes(this.el_);
 109
 110     if (this.keepTooltipsInside) {
 111       this.updateAriaAttributes(this.tooltipProgressBar.el_);
 112       this.tooltipProgressBar.el_.style.width = this.bar.el_.style.width;
 113
 114       var playerWidth = parseFloat((0, _computedStyle2['default'])(this.player().el(), 'width'));
 115       var tooltipWidth = parseFloat((0, _computedStyle2['default'])(this.tooltipProgressBar.tooltip, 'width'));
 116       var tooltipStyle = this.tooltipProgressBar.el().style;
 117
 118       tooltipStyle.maxWidth = Math.floor(playerWidth - tooltipWidth / 2) + 'px';
 119       tooltipStyle.minWidth = Math.ceil(tooltipWidth / 2) + 'px';
 120       tooltipStyle.right = '-' + tooltipWidth / 2 + 'px';
 121     }
 122   };
 123
 124   /**
 125    * Update ARIA accessibility attributes
 126    *
 127    * @param {Element} el
 128    *        The element to update with aria accessibility attributes.
 129    */
 130
 131
 132   SeekBar.prototype.updateAriaAttributes = function updateAriaAttributes(el) {
 133     // Allows for smooth scrubbing, when player can't keep up.
 134     var time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
 135
 136     // machine readable value of progress bar (percentage complete)
 137     el.setAttribute('aria-valuenow', (this.getPercent() * 100).toFixed(2));
 138     // human readable value of progress bar (time complete)
 139     el.setAttribute('aria-valuetext', (0, _formatTime2['default'])(time, this.player_.duration()));
 140   };
 141
 142   /**
 143    * Get percentage of video played
 144    *
 145    * @return {number}
 146    *         The percentage played
 147    */
 148
 149
 150   SeekBar.prototype.getPercent = function getPercent() {
 151     var percent = this.player_.currentTime() / this.player_.duration();
 152
 153     return percent >= 1 ? 1 : percent;
 154   };
 155
 156   /**
 157    * Handle mouse down on seek bar
 158    *
 159    * @param {EventTarget~Event} event
 160    *        The `mousedown` event that caused this to run.
 161    *
 162    * @listens mousedown
 163    */
 164
 165
 166   SeekBar.prototype.handleMouseDown = function handleMouseDown(event) {
 167     this.player_.scrubbing(true);
 168
 169     this.videoWasPlaying = !this.player_.paused();
 170     this.player_.pause();
 171
 172     _Slider.prototype.handleMouseDown.call(this, event);
 173   };
 174
 175   /**
 176    * Handle mouse move on seek bar
 177    *
 178    * @param {EventTarget~Event} event
 179    *        The `mousemove` event that caused this to run.
 180    *
 181    * @listens mousemove
 182    */
 183
 184
 185   SeekBar.prototype.handleMouseMove = function handleMouseMove(event) {
 186     var newTime = this.calculateDistance(event) * this.player_.duration();
 187
 188     // Don't let video end while scrubbing.
 189     if (newTime === this.player_.duration()) {
 190       newTime = newTime - 0.1;
 191     }
 192
 193     // Set new time (tell player to seek to new time)
 194     this.player_.currentTime(newTime);
 195   };
 196
 197   /**
 198    * Handle mouse up on seek bar
 199    *
 200    * @param {EventTarget~Event} event
 201    *        The `mouseup` event that caused this to run.
 202    *
 203    * @listens mouseup
 204    */
 205
 206
 207   SeekBar.prototype.handleMouseUp = function handleMouseUp(event) {
 208     _Slider.prototype.handleMouseUp.call(this, event);
 209
 210     this.player_.scrubbing(false);
 211     if (this.videoWasPlaying) {
 212       this.player_.play();
 213     }
 214   };
 215
 216   /**
 217    * Move more quickly fast forward for keyboard-only users
 218    */
 219
 220
 221   SeekBar.prototype.stepForward = function stepForward() {
 222     // more quickly fast forward for keyboard-only users
 223     this.player_.currentTime(this.player_.currentTime() + 5);
 224   };
 225
 226   /**
 227    * Move more quickly rewind for keyboard-only users
 228    */
 229
 230
 231   SeekBar.prototype.stepBack = function stepBack() {
 232     // more quickly rewind for keyboard-only users
 233     this.player_.currentTime(this.player_.currentTime() - 5);
 234   };
 235
 236   return SeekBar;
 237 }(_slider2['default']);
 238
 239 /**
 240  * Default options for the `SeekBar`
 241  *
 242  * @type {Object}
 243  * @private
 244  */
 245
 246
 247 SeekBar.prototype.options_ = {
 248   children: ['loadProgressBar', 'mouseTimeDisplay', 'playProgressBar'],
 249   barName: 'playProgressBar'
 250 };
 251
 252 /**
 253  * Call the update event for this Slider when this event happens on the player.
 254  *
 255  * @type {string}
 256  */
 257 SeekBar.prototype.playerEvent = 'timeupdate';
 258
 259 _component2['default'].registerComponent('SeekBar', SeekBar);
 260 exports['default'] = SeekBar;