Skip to content

Commit

Permalink
chore: refactor redundant or verbose code in player.js (#3597)
Browse files Browse the repository at this point in the history
* removing duplicate constructor docs
fixing doc block (should not have ended in ?)

* adding back event doc comments
brandonocasey authored and gkatsev committed Sep 29, 2016
1 parent e479f8c commit ae3e277
Showing 1 changed file with 206 additions and 354 deletions.
560 changes: 206 additions & 354 deletions src/js/player.js
Original file line number Diff line number Diff line change
@@ -44,6 +44,86 @@ import './tracks/text-track-settings.js';
// Import Html5 tech, at least for disposing the original video tag.
import './tech/html5.js';

const TECH_EVENTS_RETRIGGER = [
/**
* Fired while the user agent is downloading media data
*
* @private
* @method Player.prototype.handleTechProgress_
*/
'progress',
/**
* Fires when the loading of an audio/video is aborted
*
* @private
* @method Player.prototype.handleTechAbort_
*/
'abort',
/**
* Fires when the browser is intentionally not getting media data
*
* @private
* @method Player.prototype.handleTechSuspend_
*/
'suspend',
/**
* Fires when the current playlist is empty
*
* @private
* @method Player.prototype.handleTechEmptied_
*/
'emptied',
/**
* Fires when the browser is trying to get media data, but data is not available
*
* @private
* @method Player.prototype.handleTechStalled_
*/
'stalled',
/**
* Fires when the browser has loaded meta data for the audio/video
*
* @private
* @method Player.prototype.handleTechLoadedmetadata_
*/
'loadedmetadata',
/**
* Fires when the browser has loaded the current frame of the audio/video
*
* @private
* @method Player.prototype.handleTechLoaddeddata_
*/
'loadeddata',
/**
* Fires when the current playback position has changed
*
* @private
* @method Player.prototype.handleTechTimeUpdate_
*/
'timeupdate',
/**
* Fires when the playing speed of the audio/video is changed
*
* @private
* @method Player.prototype.handleTechRatechange_
*/
'ratechange',
/**
* Fires when the volume has been changed
*
* @private
* @method Player.prototype.handleTechVolumechange_
*/
'volumechange',
/**
* Fires when the text track has been changed
*
* @private
* @method Player.prototype.handleTechTexttrackchange_
*/
'texttrackchange'
];

/**
* An instance of the `Player` class is created when any of the Video.js setup methods are used to initialize a video.
* ```js
@@ -60,20 +140,10 @@ import './tech/html5.js';
* @param {Element} tag The original video tag used for configuring options
* @param {Object=} options Object of option names and values
* @param {Function=} ready Ready callback function
* @extends Component
* @class Player
*/
class Player extends Component {

/**
* player's constructor function
*
* @constructs
* @method init
* @param {Element} tag The original video tag used for configuring options
* @param {Object=} options Player options
* @param {Function=} ready Ready callback function
*/
constructor(tag, options, ready) {
// Make sure tag ID exists
tag.id = tag.id || `vjs_video_${Guid.newGUID()}`;
@@ -257,8 +327,6 @@ class Player extends Component {
* ```
* This is especially helpful if you are dynamically adding and removing videos
* to/from the DOM.
*
* @method dispose
*/
dispose() {
this.trigger('dispose');
@@ -291,7 +359,6 @@ class Player extends Component {
* Create the component's DOM element
*
* @return {Element}
* @method createEl
*/
createEl() {
const el = this.el_ = super.createEl('div');
@@ -381,7 +448,6 @@ class Player extends Component {
*
* @param {Number=} value Value for width
* @return {Number} Width when getting
* @method width
*/
width(value) {
return this.dimension('width', value);
@@ -392,7 +458,6 @@ class Player extends Component {
*
* @param {Number=} value Value for height
* @return {Number} Height when getting
* @method height
*/
height(value) {
return this.dimension('height', value);
@@ -404,7 +469,6 @@ class Player extends Component {
* @param {String} dimension Either width or height
* @param {Number=} value Value for dimension
* @return {Component}
* @method dimension
*/
dimension(dimension, value) {
const privDimension = dimension + '_';
@@ -435,7 +499,6 @@ class Player extends Component {
* Add/remove the vjs-fluid class
*
* @param {Boolean} bool Value of true adds the class, value of false removes the class
* @method fluid
*/
fluid(bool) {
if (bool === undefined) {
@@ -456,7 +519,6 @@ class Player extends Component {
*
* @param {String=} ratio Aspect ratio for player
* @return aspectRatio
* @method aspectRatio
*/
aspectRatio(ratio) {
if (ratio === undefined) {
@@ -478,8 +540,6 @@ class Player extends Component {

/**
* Update styles of the player element (height, width and aspect ratio)
*
* @method updateStyleEl_
*/
updateStyleEl_() {
if (window.VIDEOJS_NO_DYNAMIC_STYLE === true) {
@@ -568,7 +628,6 @@ class Player extends Component {
*
* @param {String} techName Name of the playback technology
* @param {String} source Video source
* @method loadTech_
* @private
*/
loadTech_(techName, source) {
@@ -637,6 +696,9 @@ class Player extends Component {
textTrackConverter.jsonToTextTracks(this.textTracksJson_ || [], this.tech_);

// Listen to all HTML5-defined events and trigger them on the player
TECH_EVENTS_RETRIGGER.forEach((event) => {
this.on(this.tech_, event, this[`handleTech${toTitleCase(event)}_`]);
});
this.on(this.tech_, 'loadstart', this.handleTechLoadStart_);
this.on(this.tech_, 'waiting', this.handleTechWaiting_);
this.on(this.tech_, 'canplay', this.handleTechCanPlay_);
@@ -648,20 +710,9 @@ class Player extends Component {
this.on(this.tech_, 'play', this.handleTechPlay_);
this.on(this.tech_, 'firstplay', this.handleTechFirstPlay_);
this.on(this.tech_, 'pause', this.handleTechPause_);
this.on(this.tech_, 'progress', this.handleTechProgress_);
this.on(this.tech_, 'durationchange', this.handleTechDurationChange_);
this.on(this.tech_, 'fullscreenchange', this.handleTechFullscreenChange_);
this.on(this.tech_, 'error', this.handleTechError_);
this.on(this.tech_, 'suspend', this.handleTechSuspend_);
this.on(this.tech_, 'abort', this.handleTechAbort_);
this.on(this.tech_, 'emptied', this.handleTechEmptied_);
this.on(this.tech_, 'stalled', this.handleTechStalled_);
this.on(this.tech_, 'loadedmetadata', this.handleTechLoadedMetaData_);
this.on(this.tech_, 'loadeddata', this.handleTechLoadedData_);
this.on(this.tech_, 'timeupdate', this.handleTechTimeUpdate_);
this.on(this.tech_, 'ratechange', this.handleTechRateChange_);
this.on(this.tech_, 'volumechange', this.handleTechVolumeChange_);
this.on(this.tech_, 'texttrackchange', this.handleTechTextTrackChange_);
this.on(this.tech_, 'loadedmetadata', this.updateStyleEl_);
this.on(this.tech_, 'posterchange', this.handleTechPosterChange_);
this.on(this.tech_, 'textdata', this.handleTechTextData_);
@@ -688,7 +739,6 @@ class Player extends Component {
/**
* Unload playback technology
*
* @method unloadTech_
* @private
*/
unloadTech_() {
@@ -713,7 +763,6 @@ class Player extends Component {
*
* @param {Object}
* @return {Object} The Tech
* @method tech
*/
tech(safety) {
if (safety && safety.IWillNotUseThisInPlugins) {
@@ -749,7 +798,6 @@ class Player extends Component {
* on any controls will still keep the user active
*
* @private
* @method addTechControlsListeners_
*/
addTechControlsListeners_() {
// Make sure to remove all the previous listeners in case we are called multiple times.
@@ -777,7 +825,6 @@ class Player extends Component {
* Remove the listeners used for click and tap controls. This is needed for
* toggling to controls disabled, where a tap/touch should do nothing.
*
* @method removeTechControlsListeners_
* @private
*/
removeTechControlsListeners_() {
@@ -793,7 +840,6 @@ class Player extends Component {
/**
* Player waits for the tech to be ready
*
* @method handleTechReady_
* @private
*/
handleTechReady_() {
@@ -828,8 +874,8 @@ class Player extends Component {
/**
* Fired when the user agent begins looking for media data
*
* @event loadstart
* @private
* @method handleTechLoadStart_
*/
handleTechLoadStart_() {
// TODO: Update to use `emptied` event instead. See #1277.
@@ -858,7 +904,6 @@ class Player extends Component {
* @param {Boolean} hasStarted The value of true adds the class the value of false remove the class
* @return {Boolean} Boolean value if has started
* @private
* @method hasStarted
*/
hasStarted(hasStarted) {
if (hasStarted !== undefined) {
@@ -882,7 +927,6 @@ class Player extends Component {
* Fired whenever the media begins or resumes playback
*
* @private
* @method handleTechPlay_
*/
handleTechPlay_() {
this.removeClass('vjs-ended');
@@ -900,7 +944,6 @@ class Player extends Component {
* Fired whenever the media begins waiting
*
* @private
* @method handleTechWaiting_
*/
handleTechWaiting_() {
this.addClass('vjs-waiting');
@@ -913,7 +956,6 @@ class Player extends Component {
* which is not consistent between browsers. See #1351
*
* @private
* @method handleTechCanPlay_
*/
handleTechCanPlay_() {
this.removeClass('vjs-waiting');
@@ -925,7 +967,6 @@ class Player extends Component {
* which is not consistent between browsers. See #1351
*
* @private
* @method handleTechCanPlayThrough_
*/
handleTechCanPlayThrough_() {
this.removeClass('vjs-waiting');
@@ -937,7 +978,6 @@ class Player extends Component {
* which is not consistent between browsers. See #1351
*
* @private
* @method handleTechPlaying_
*/
handleTechPlaying_() {
this.removeClass('vjs-waiting');
@@ -948,7 +988,6 @@ class Player extends Component {
* Fired whenever the player is jumping to a new time
*
* @private
* @method handleTechSeeking_
*/
handleTechSeeking_() {
this.addClass('vjs-seeking');
@@ -959,7 +998,6 @@ class Player extends Component {
* Fired when the player has finished jumping to a new time
*
* @private
* @method handleTechSeeked_
*/
handleTechSeeked_() {
this.removeClass('vjs-seeking');
@@ -973,7 +1011,6 @@ class Player extends Component {
* prevent playback, use `myPlayer.one('play');` instead.
*
* @private
* @method handleTechFirstPlay_
*/
handleTechFirstPlay_() {
// If the first starttime attribute is specified
@@ -990,29 +1027,18 @@ class Player extends Component {
* Fired whenever the media has been paused
*
* @private
* @method handleTechPause_
*/
handleTechPause_() {
this.removeClass('vjs-playing');
this.addClass('vjs-paused');
this.trigger('pause');
}

/**
* Fired while the user agent is downloading media data
*
* @private
* @method handleTechProgress_
*/
handleTechProgress_() {
this.trigger('progress');
}

/**
* Fired when the end of the media resource is reached (currentTime == duration)
*
* @event ended
* @private
* @method handleTechEnded_
*/
handleTechEnded_() {
this.addClass('vjs-ended');
@@ -1030,7 +1056,6 @@ class Player extends Component {
* Fired when the duration of the media resource is first known or changed
*
* @private
* @method handleTechDurationChange_
*/
handleTechDurationChange_() {
this.duration(this.techGet_('duration'));
@@ -1041,7 +1066,6 @@ class Player extends Component {
*
* @param {Object=} event Event object
* @private
* @method handleTechClick_
*/
handleTechClick_(event) {
// We're using mousedown to detect clicks thanks to Flash, but mousedown
@@ -1066,7 +1090,6 @@ class Player extends Component {
* activity state, which hides and shows the controls.
*
* @private
* @method handleTechTap_
*/
handleTechTap_() {
this.userActive(!this.userActive());
@@ -1076,7 +1099,6 @@ class Player extends Component {
* Handle touch to start
*
* @private
* @method handleTechTouchStart_
*/
handleTechTouchStart_() {
this.userWasActive = this.userActive();
@@ -1086,7 +1108,6 @@ class Player extends Component {
* Handle touch to move
*
* @private
* @method handleTechTouchMove_
*/
handleTechTouchMove_() {
if (this.userWasActive) {
@@ -1098,7 +1119,6 @@ class Player extends Component {
* Handle touch to end
*
* @private
* @method handleTechTouchEnd_
*/
handleTechTouchEnd_(event) {
// Stop the mouse events from also happening
@@ -1109,7 +1129,6 @@ class Player extends Component {
* Fired when the player switches in or out of fullscreen mode
*
* @private
* @method handleFullscreenChange_
*/
handleFullscreenChange_() {
if (this.isFullscreen()) {
@@ -1124,7 +1143,6 @@ class Player extends Component {
* use stageclick events triggered from inside the SWF instead
*
* @private
* @method handleStageClick_
*/
handleStageClick_() {
this.reportUserActivity();
@@ -1134,7 +1152,6 @@ class Player extends Component {
* Handle Tech Fullscreen Change
*
* @private
* @method handleTechFullscreenChange_
*/
handleTechFullscreenChange_(event, data) {
if (data) {
@@ -1147,64 +1164,13 @@ class Player extends Component {
* Fires when an error occurred during the loading of an audio/video
*
* @private
* @method handleTechError_
*/
handleTechError_() {
const error = this.tech_.error();

this.error(error);
}

/**
* Fires when the browser is intentionally not getting media data
*
* @private
* @method handleTechSuspend_
*/
handleTechSuspend_() {
this.trigger('suspend');
}

/**
* Fires when the loading of an audio/video is aborted
*
* @private
* @method handleTechAbort_
*/
handleTechAbort_() {
this.trigger('abort');
}

/**
* Fires when the current playlist is empty
*
* @private
* @method handleTechEmptied_
*/
handleTechEmptied_() {
this.trigger('emptied');
}

/**
* Fires when the browser is trying to get media data, but data is not available
*
* @private
* @method handleTechStalled_
*/
handleTechStalled_() {
this.trigger('stalled');
}

/**
* Fires when the browser has loaded meta data for the audio/video
*
* @private
* @method handleTechLoadedMetaData_
*/
handleTechLoadedMetaData_() {
this.trigger('loadedmetadata');
}

handleTechTextData_() {
let data = null;

@@ -1214,61 +1180,10 @@ class Player extends Component {
this.trigger('textdata', data);
}

/**
* Fires when the browser has loaded the current frame of the audio/video
*
* @private
* @method handleTechLoadedData_
*/
handleTechLoadedData_() {
this.trigger('loadeddata');
}

/**
* Fires when the current playback position has changed
*
* @private
* @method handleTechTimeUpdate_
*/
handleTechTimeUpdate_() {
this.trigger('timeupdate');
}

/**
* Fires when the playing speed of the audio/video is changed
*
* @private
* @method handleTechRateChange_
*/
handleTechRateChange_() {
this.trigger('ratechange');
}

/**
* Fires when the volume has been changed
*
* @private
* @method handleTechVolumeChange_
*/
handleTechVolumeChange_() {
this.trigger('volumechange');
}

/**
* Fires when the text track has been changed
*
* @private
* @method handleTechTextTrackChange_
*/
handleTechTextTrackChange_() {
this.trigger('texttrackchange');
}

/**
* Get object for cached values.
*
* @return {Object}
* @method getCache
*/
getCache() {
return this.cache_;
@@ -1280,7 +1195,6 @@ class Player extends Component {
* @param {String=} method Method
* @param {Object=} arg Argument
* @private
* @method techCall_
*/
techCall_(method, arg) {
// If it's not ready yet, call method when it is
@@ -1308,7 +1222,6 @@ class Player extends Component {
* @param {String} method Tech method
* @return {Method}
* @private
* @method techGet_
*/
techGet_(method) {
if (this.tech_ && this.tech_.isReady_) {
@@ -1344,7 +1257,6 @@ class Player extends Component {
* ```
*
* @return {Player} self
* @method play
*/
play() {
// Only calls the tech's play if we already have a src loaded
@@ -1366,7 +1278,6 @@ class Player extends Component {
* ```
*
* @return {Player} self
* @method pause
*/
pause() {
this.techCall_('pause');
@@ -1381,7 +1292,6 @@ class Player extends Component {
* ```
*
* @return {Boolean} false if the media is currently playing, or true otherwise
* @method paused
*/
paused() {
// The initial state of paused should be true (in Safari it's actually false)
@@ -1395,7 +1305,6 @@ class Player extends Component {
* @param {Boolean} isScrubbing True/false the user is scrubbing
* @return {Boolean} The scrubbing status when getting
* @return {Object} The player when setting
* @method scrubbing
*/
scrubbing(isScrubbing) {
if (isScrubbing !== undefined) {
@@ -1425,7 +1334,6 @@ class Player extends Component {
* @param {Number|String=} seconds The time to seek to
* @return {Number} The time in seconds, when not setting
* @return {Player} self, when the current time is set
* @method currentTime
*/
currentTime(seconds) {
if (seconds !== undefined) {
@@ -1457,7 +1365,6 @@ class Player extends Component {
*
* @param {Number} seconds Duration when setting
* @return {Number} The duration of the video in seconds when getting
* @method duration
*/
duration(seconds) {
if (seconds === undefined) {
@@ -1495,7 +1402,6 @@ class Player extends Component {
* Not a native video element function, but useful
*
* @return {Number} The time remaining in seconds
* @method remainingTime
*/
remainingTime() {
return this.duration() - this.currentTime();
@@ -1521,7 +1427,6 @@ class Player extends Component {
* ```
*
* @return {Object} A mock TimeRange object (following HTML spec)
* @method buffered
*/
buffered() {
let buffered = this.techGet_('buffered');
@@ -1542,7 +1447,6 @@ class Player extends Component {
* (This method isn't in the HTML5 spec, but it's very convenient)
*
* @return {Number} A decimal between 0 and 1 representing the percent
* @method bufferedPercent
*/
bufferedPercent() {
return bufferedPercent(this.buffered(), this.duration());
@@ -1553,7 +1457,6 @@ class Player extends Component {
* This is used in the progress bar to encapsulate all time ranges.
*
* @return {Number} The end of the last buffered time range
* @method bufferedEnd
*/
bufferedEnd() {
const buffered = this.buffered();
@@ -1580,7 +1483,6 @@ class Player extends Component {
* @param {Number} percentAsDecimal The new volume as a decimal percent
* @return {Number} The current volume when getting
* @return {Player} self when setting
* @method volume
*/
volume(percentAsDecimal) {
let vol;
@@ -1611,7 +1513,6 @@ class Player extends Component {
* @param {Boolean=} muted True to mute, false to unmute
* @return {Boolean} True if mute is on, false if not when getting
* @return {Player} self when setting mute
* @method muted
*/
muted(muted) {
if (muted !== undefined) {
@@ -1627,7 +1528,6 @@ class Player extends Component {
* Check to see if fullscreen is supported
*
* @return {Boolean}
* @method supportsFullScreen
*/
supportsFullScreen() {
return this.techGet_('supportsFullScreen') || false;
@@ -1648,7 +1548,6 @@ class Player extends Component {
* @param {Boolean=} isFS Update the player's fullscreen state
* @return {Boolean} true if fullscreen false if not when getting
* @return {Player} self when setting
* @method isFullscreen
*/
isFullscreen(isFS) {
if (isFS !== undefined) {
@@ -1671,7 +1570,6 @@ class Player extends Component {
* Safari.
*
* @return {Player} self
* @method requestFullscreen
*/
requestFullscreen() {
const fsApi = FullscreenApi;
@@ -1721,7 +1619,6 @@ class Player extends Component {
* ```
*
* @return {Player} self
* @method exitFullscreen
*/
exitFullscreen() {
const fsApi = FullscreenApi;
@@ -1743,8 +1640,6 @@ class Player extends Component {

/**
* When fullscreen isn't supported we can stretch the video container to as wide as the browser will let us.
*
* @method enterFullWindow
*/
enterFullWindow() {
this.isFullWindow = true;
@@ -1768,7 +1663,6 @@ class Player extends Component {
* Check for call to either exit full window or full screen on ESC key
*
* @param {String} event Event to check for key press
* @method fullWindowOnEscKey
*/
fullWindowOnEscKey(event) {
if (event.keyCode === 27) {
@@ -1782,8 +1676,6 @@ class Player extends Component {

/**
* Exit full window
*
* @method exitFullWindow
*/
exitFullWindow() {
this.isFullWindow = false;
@@ -1805,7 +1697,6 @@ class Player extends Component {
*
* @param {String} type The mimetype to check
* @return {String} 'probably', 'maybe', or '' (empty string)
* @method canPlayType
*/
canPlayType(type) {
let can;
@@ -1847,7 +1738,6 @@ class Player extends Component {
*
* @param {Array} sources The sources for a media asset
* @return {Object|Boolean} Object of source and tech order, otherwise false
* @method selectSource
*/
selectSource(sources) {
// Get only the techs specified in `techOrder` that exist and are supported by the
@@ -1942,7 +1832,6 @@ class Player extends Component {
* @param {String|Object|Array=} source The source URL, object, or array of sources
* @return {String} The current video source when getting
* @return {String} The player when setting
* @method src
*/
src(source) {
if (source === undefined) {
@@ -2012,7 +1901,6 @@ class Player extends Component {
*
* @param {Array} sources Array of source objects
* @private
* @method sourceList_
*/
sourceList_(sources) {
const sourceTech = this.selectSource(sources);
@@ -2041,7 +1929,6 @@ class Player extends Component {
* Begin loading the src data.
*
* @return {Player} Returns the player
* @method load
*/
load() {
this.techCall_('load');
@@ -2053,7 +1940,6 @@ class Player extends Component {
* and calls `reset` on the tech`.
*
* @return {Player} Returns the player
* @method reset
*/
reset() {
this.loadTech_(toTitleCase(this.options_.techOrder[0]), null);
@@ -2066,7 +1952,6 @@ class Player extends Component {
* Can be used in conjuction with `currentType` to assist in rebuilding the current source object.
*
* @return {String} The current source
* @method currentSrc
*/
currentSrc() {
return this.techGet_('currentSrc') || this.cache_.src || '';
@@ -2078,7 +1963,6 @@ class Player extends Component {
* source and tech later
*
* @return {String} The source MIME type
* @method currentType
*/
currentType() {
return this.currentType_ || '';
@@ -2090,7 +1974,6 @@ class Player extends Component {
* @param {Boolean} value Boolean to determine if preload should be used
* @return {String} The preload attribute value when getting
* @return {Player} Returns the player when setting
* @method preload
*/
preload(value) {
if (value !== undefined) {
@@ -2107,7 +1990,6 @@ class Player extends Component {
* @param {Boolean} value Boolean to determine if video should autoplay
* @return {String} The autoplay attribute value when getting
* @return {Player} Returns the player when setting
* @method autoplay
*/
autoplay(value) {
if (value !== undefined) {
@@ -2124,7 +2006,6 @@ class Player extends Component {
* @param {Boolean} value Boolean to determine if video should loop
* @return {String} The loop attribute value when getting
* @return {Player} Returns the player when setting
* @method loop
*/
loop(value) {
if (value !== undefined) {
@@ -2149,7 +2030,6 @@ class Player extends Component {
* @param {String=} src Poster image source URL
* @return {String} poster URL when getting
* @return {Player} self when setting
* @method poster
*/
poster(src) {
if (src === undefined) {
@@ -2183,7 +2063,6 @@ class Player extends Component {
* the normal APIs.
*
* @private
* @method handleTechPosterChange_
*/
handleTechPosterChange_() {
if (!this.poster_ && this.tech_ && this.tech_.poster) {
@@ -2199,7 +2078,6 @@ class Player extends Component {
*
* @param {Boolean} bool Set controls to showing or not
* @return {Boolean} Controls are showing
* @method controls
*/
controls(bool) {
if (bool !== undefined) {
@@ -2246,7 +2124,6 @@ class Player extends Component {
* @param {Boolean} bool True signals that native controls are on
* @return {Player} Returns the player
* @private
* @method usingNativeControls
*/
usingNativeControls(bool) {
if (bool !== undefined) {
@@ -2292,7 +2169,6 @@ class Player extends Component {
* @param {*} err A MediaError or a String/Number to be turned into a MediaError
* @return {MediaError|null} when getting
* @return {Player} when setting
* @method error
*/
error(err) {
if (err === undefined) {
@@ -2324,42 +2200,10 @@ class Player extends Component {
return this;
}

/**
* Returns whether or not the player is in the "ended" state.
*
* @return {Boolean} True if the player is in the ended state, false if not.
* @method ended
*/
ended() {
return this.techGet_('ended');
}

/**
* Returns whether or not the player is in the "seeking" state.
*
* @return {Boolean} True if the player is in the seeking state, false if not.
* @method seeking
*/
seeking() {
return this.techGet_('seeking');
}

/**
* Returns the TimeRanges of the media that are currently available
* for seeking to.
*
* @return {TimeRanges} the seekable intervals of the media timeline
* @method seekable
*/
seekable() {
return this.techGet_('seekable');
}

/**
* Report user activity
*
* @param {Object} event Event object
* @method reportUserActivity
*/
reportUserActivity(event) {
this.userActivity_ = true;
@@ -2370,7 +2214,6 @@ class Player extends Component {
*
* @param {Boolean} bool Value when setting
* @return {Boolean} Value if user is active user when getting
* @method userActive
*/
userActive(bool) {
if (bool !== undefined) {
@@ -2418,7 +2261,6 @@ class Player extends Component {
* Listen for user activity based on timeout value
*
* @private
* @method listenForUserActivity_
*/
listenForUserActivity_() {
let mouseInProgress;
@@ -2510,7 +2352,6 @@ class Player extends Component {
* @param {Number} rate New playback rate to set.
* @return {Number} Returns the new playback rate when setting
* @return {Number} Returns the current playback rate when getting
* @method playbackRate
*/
playbackRate(rate) {
if (rate !== undefined) {
@@ -2531,7 +2372,6 @@ class Player extends Component {
* @return {Boolean} Returns true if player is audio, false if not when getting
* @return {Player} Returns the player if setting
* @private
* @method isAudio
*/
isAudio(bool) {
if (bool !== undefined) {
@@ -2542,63 +2382,11 @@ class Player extends Component {
return !!this.isAudio_;
}

/**
* Returns the current state of network activity for the element, from
* the codes in the list below.
* - NETWORK_EMPTY (numeric value 0)
* The element has not yet been initialised. All attributes are in
* their initial states.
* - NETWORK_IDLE (numeric value 1)
* The element's resource selection algorithm is active and has
* selected a resource, but it is not actually using the network at
* this time.
* - NETWORK_LOADING (numeric value 2)
* The user agent is actively trying to download data.
* - NETWORK_NO_SOURCE (numeric value 3)
* The element's resource selection algorithm is active, but it has
* not yet found a resource to use.
*
* @see https://html.spec.whatwg.org/multipage/embedded-content.html#network-states
* @return {Number} the current network activity state
* @method networkState
*/
networkState() {
return this.techGet_('networkState');
}

/**
* Returns a value that expresses the current state of the element
* with respect to rendering the current playback position, from the
* codes in the list below.
* - HAVE_NOTHING (numeric value 0)
* No information regarding the media resource is available.
* - HAVE_METADATA (numeric value 1)
* Enough of the resource has been obtained that the duration of the
* resource is available.
* - HAVE_CURRENT_DATA (numeric value 2)
* Data for the immediate current playback position is available.
* - HAVE_FUTURE_DATA (numeric value 3)
* Data for the immediate current playback position is available, as
* well as enough data for the user agent to advance the current
* playback position in the direction of playback.
* - HAVE_ENOUGH_DATA (numeric value 4)
* The user agent estimates that enough data is available for
* playback to proceed uninterrupted.
*
* @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-readystate
* @return {Number} the current playback rendering state
* @method readyState
*/
readyState() {
return this.techGet_('readyState');
}

/**
* Get a video track list
* @link https://html.spec.whatwg.org/multipage/embedded-content.html#videotracklist
*
* @return {VideoTrackList} thes current video track list
* @method videoTracks
*/
videoTracks() {
// if we have not yet loadTech_, we create videoTracks_
@@ -2616,7 +2404,6 @@ class Player extends Component {
* @link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotracklist
*
* @return {AudioTrackList} thes current audio track list
* @method audioTracks
*/
audioTracks() {
// if we have not yet loadTech_, we create videoTracks_
@@ -2629,20 +2416,19 @@ class Player extends Component {
return this.tech_.audioTracks();
}

/*
* Text tracks are tracks of timed text events.
* Captions - text displayed over the video for the hearing impaired
* Subtitles - text displayed over the video for those who don't understand language in the video
* Chapters - text displayed in a menu allowing the user to jump to particular points (chapters) in the video
* Descriptions (not supported yet) - audio descriptions that are read back to the user by a screen reading device
*/
/**
* Text tracks are tracks of timed text events.
* Captions - text displayed over the video for the hearing impaired
* Subtitles - text displayed over the video for those who don't understand language in the video
* Chapters - text displayed in a menu allowing the user to jump to particular points (chapters) in the video
* Descriptions (not supported yet) - audio descriptions that are read back to the user by a screen reading device
*/

/**
* Get an array of associated text tracks. captions, subtitles, chapters, descriptions
* http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-texttracks
*
* @return {Array} Array of track objects
* @method textTracks
*/
textTracks() {
// cannot use techGet_ directly because it checks to see whether the tech is ready.
@@ -2656,7 +2442,6 @@ class Player extends Component {
* Get an array of remote text tracks
*
* @return {Array}
* @method remoteTextTracks
*/
remoteTextTracks() {
if (this.tech_) {
@@ -2668,7 +2453,6 @@ class Player extends Component {
* Get an array of remote html track elements
*
* @return {HTMLTrackElement[]}
* @method remoteTextTrackEls
*/
remoteTextTrackEls() {
if (this.tech_) {
@@ -2684,7 +2468,6 @@ class Player extends Component {
* @param {String} kind Captions, subtitles, chapters, descriptions, or metadata
* @param {String=} label Optional label
* @param {String=} language Optional language
* @method addTextTrack
*/
addTextTrack(kind, label, language) {
if (this.tech_) {
@@ -2696,7 +2479,6 @@ class Player extends Component {
* Add a remote text track
*
* @param {Object} options Options for remote text track
* @method addRemoteTextTrack
*/
addRemoteTextTrack(options) {
if (this.tech_) {
@@ -2708,7 +2490,6 @@ class Player extends Component {
* Remove a remote text track
*
* @param {Object} track Remote text track to remove
* @method removeRemoteTextTrack
*/
// destructure the input into an object with a track argument, defaulting to arguments[0]
// default the whole argument to an empty object if nothing was passed in
@@ -2722,7 +2503,6 @@ class Player extends Component {
* Get video width
*
* @return {Number} Video width
* @method videoWidth
*/
videoWidth() {
return this.tech_ && this.tech_.videoWidth && this.tech_.videoWidth() || 0;
@@ -2732,7 +2512,6 @@ class Player extends Component {
* Get video height
*
* @return {Number} Video height
* @method videoHeight
*/
videoHeight() {
return this.tech_ && this.tech_.videoHeight && this.tech_.videoHeight() || 0;
@@ -2754,7 +2533,6 @@ class Player extends Component {
* @param {String} code The locale string
* @return {String} The locale string when getting
* @return {Player} self when setting
* @method language
*/
language(code) {
if (code === undefined) {
@@ -2771,7 +2549,6 @@ class Player extends Component {
* Languages specified directly in the player options have precedence
*
* @return {Array} Array of languages
* @method languages
*/
languages() {
return mergeOptions(Player.prototype.options_.languages, this.languages_);
@@ -2781,7 +2558,6 @@ class Player extends Component {
* Converts track info to JSON
*
* @return {Object} JSON object of options
* @method toJSON
*/
toJSON() {
const options = mergeOptions(this.options_);
@@ -2837,7 +2613,6 @@ class Player extends Component {
* @param {Element} tag The player tag
* @return {Array} An array of sources and track objects
* @static
* @method getTagSettings
*/
static getTagSettings(tag) {
const baseOptions = {
@@ -2882,6 +2657,23 @@ class Player extends Component {
return baseOptions;
}

/**
* Determine wether or not flexbox is supported
*
* @return {Boolean} wether or not flexbox is supported
*/
flexNotSupported_() {
const elem = document.createElement('i');

// Note: We don't actually use flexBasis (or flexOrder), but it's one of the more
// common flex features that we can rely on when checking for flex support.
return !('flexBasis' in elem.style ||
'webkitFlexBasis' in elem.style ||
'mozFlexBasis' in elem.style ||
'msFlexBasis' in elem.style ||
// IE10-specific (2012 flex spec)
'msFlexOrder' in elem.style);
}
}

/*
@@ -2941,92 +2733,152 @@ Player.prototype.options_ = {
notSupportedMessage: 'No compatible source was found for this media.'
};

// The following no-op expressions are here only for purposes of documentation.

/**
* Fired when the user agent begins looking for media data
*
* @event loadstart
*/
Player.prototype.handleTechLoadStart_; // eslint-disable-line

[
/**
* Returns whether or not the player is in the "ended" state.
*
* @return {Boolean} True if the player is in the ended state, false if not.
* @method Player.prototype.ended
*/
'ended',
/**
* Returns whether or not the player is in the "seeking" state.
*
* @return {Boolean} True if the player is in the seeking state, false if not.
* @method Player.prototype.seeking
*/
'seeking',
/**
* Returns the TimeRanges of the media that are currently available
* for seeking to.
*
* @return {TimeRanges} the seekable intervals of the media timeline
* @method Player.prototype.seekable
*/
'seekable',
/**
* Returns the current state of network activity for the element, from
* the codes in the list below.
* - NETWORK_EMPTY (numeric value 0)
* The element has not yet been initialised. All attributes are in
* their initial states.
* - NETWORK_IDLE (numeric value 1)
* The element's resource selection algorithm is active and has
* selected a resource, but it is not actually using the network at
* this time.
* - NETWORK_LOADING (numeric value 2)
* The user agent is actively trying to download data.
* - NETWORK_NO_SOURCE (numeric value 3)
* The element's resource selection algorithm is active, but it has
* not yet found a resource to use.
*
* @see https://html.spec.whatwg.org/multipage/embedded-content.html#network-states
* @return {Number} the current network activity state
* @method Player.prototype.networkState
*/
'networkState',
/**
* Returns a value that expresses the current state of the element
* with respect to rendering the current playback position, from the
* codes in the list below.
* - HAVE_NOTHING (numeric value 0)
* No information regarding the media resource is available.
* - HAVE_METADATA (numeric value 1)
* Enough of the resource has been obtained that the duration of the
* resource is available.
* - HAVE_CURRENT_DATA (numeric value 2)
* Data for the immediate current playback position is available.
* - HAVE_FUTURE_DATA (numeric value 3)
* Data for the immediate current playback position is available, as
* well as enough data for the user agent to advance the current
* playback position in the direction of playback.
* - HAVE_ENOUGH_DATA (numeric value 4)
* The user agent estimates that enough data is available for
* playback to proceed uninterrupted.
*
* @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-readystate
* @return {Number} the current playback rendering state
* @method Player.prototype.readyState
*/
'readyState'
].forEach(function(fn) {
Player.prototype[fn] = function() {
return this.techGet_(fn);
};
});

TECH_EVENTS_RETRIGGER.forEach(function(event) {
Player.prototype[`handleTech${toTitleCase(event)}_`] = function() {
return this.trigger(event);
};
});

/* document methods */
/**
* Fired when the player has initial duration and dimension information
*
* @event loadedmetadata
* @private
* @method Player.prototype.handleLoadedMetaData_
*/
Player.prototype.handleLoadedMetaData_; // eslint-disable-line

/**
* Fired when the player receives text data
*
* @event textdata
* @private
* @method Player.prototype.handleTextData_
*/
Player.prototype.handleTextData_; // eslint-disable-line

/**
* Fired when the player has downloaded data at the current playback position
*
* @event loadeddata
* @private
* @method Player.prototype.handleLoadedData_
*/
Player.prototype.handleLoadedData_; // eslint-disable-line

/**
* Fired when the user is active, e.g. moves the mouse over the player
*
* @event useractive
* @private
* @method Player.prototype.handleUserActive_
*/
Player.prototype.handleUserActive_; // eslint-disable-line

/**
* Fired when the user is inactive, e.g. a short delay after the last mouse move or control interaction
*
* @event userinactive
* @private
* @method Player.prototype.handleUserInactive_
*/
Player.prototype.handleUserInactive_; // eslint-disable-line

/**
* Fired when the current playback position has changed *
* During playback this is fired every 15-250 milliseconds, depending on the
* playback technology in use.
*
* @event timeupdate
* @private
* @method Player.prototype.handleTimeUpdate_
*/
Player.prototype.handleTimeUpdate_; // eslint-disable-line

/**
* Fired when video playback ends
*
* @event ended
*/
Player.prototype.handleTechEnded_; // eslint-disable-line

/**
* Fired when the volume changes
*
* @event volumechange
* @private
* @method Player.prototype.handleVolumeChange_
*/
Player.prototype.handleVolumeChange_; // eslint-disable-line

/**
* Fired when an error occurs
*
* @event error
* @private
* @method Player.prototype.handleError_
*/
Player.prototype.handleError_; // eslint-disable-line

Player.prototype.flexNotSupported_ = function() {
const elem = document.createElement('i');

// Note: We don't actually use flexBasis (or flexOrder), but it's one of the more
// common flex features that we can rely on when checking for flex support.
return !('flexBasis' in elem.style ||
'webkitFlexBasis' in elem.style ||
'mozFlexBasis' in elem.style ||
'msFlexBasis' in elem.style ||
// IE10-specific (2012 flex spec)
'msFlexOrder' in elem.style);
};

Component.registerComponent('Player', Player);
export default Player;

0 comments on commit ae3e277

Please sign in to comment.