diff --git a/src/js/control-bar/mute-toggle.js b/src/js/control-bar/mute-toggle.js index ee0e476c83..f9d2986521 100644 --- a/src/js/control-bar/mute-toggle.js +++ b/src/js/control-bar/mute-toggle.js @@ -21,14 +21,14 @@ class MuteToggle extends Button { this.on(player, 'volumechange', this.update); // hide mute toggle if the current tech doesn't support volume control - if (player.tech && player.tech['featuresVolumeControl'] === false) { + if (player.tech_ && player.tech_['featuresVolumeControl'] === false) { this.addClass('vjs-hidden'); } this.on(player, 'loadstart', function() { this.update(); // We need to update the button to account for a default muted state. - if (player.tech['featuresVolumeControl'] === false) { + if (player.tech_['featuresVolumeControl'] === false) { this.addClass('vjs-hidden'); } else { this.removeClass('vjs-hidden'); diff --git a/src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js b/src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js index c561b15cc2..fe02e06b1d 100644 --- a/src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js +++ b/src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js @@ -125,8 +125,8 @@ class PlaybackRateMenuButton extends MenuButton { * @method playbackRateSupported */ playbackRateSupported() { - return this.player().tech - && this.player().tech['featuresPlaybackRate'] + return this.player().tech_ + && this.player().tech_['featuresPlaybackRate'] && this.playbackRates() && this.playbackRates().length > 0 ; diff --git a/src/js/control-bar/text-track-controls/captions-button.js b/src/js/control-bar/text-track-controls/captions-button.js index 1bf73a5ef1..b5ee37cfc9 100644 --- a/src/js/control-bar/text-track-controls/captions-button.js +++ b/src/js/control-bar/text-track-controls/captions-button.js @@ -41,7 +41,7 @@ class CaptionsButton extends TextTrackButton { super.update(); // if native, then threshold is 1 because no settings button - if (this.player().tech && this.player().tech['featuresNativeTextTracks']) { + if (this.player().tech_ && this.player().tech_['featuresNativeTextTracks']) { threshold = 1; } @@ -61,7 +61,7 @@ class CaptionsButton extends TextTrackButton { createItems() { let items = []; - if (!(this.player().tech && this.player().tech['featuresNativeTextTracks'])) { + if (!(this.player().tech_ && this.player().tech_['featuresNativeTextTracks'])) { items.push(new CaptionSettingsMenuItem(this.player_, { 'kind': this.kind_ })); } diff --git a/src/js/control-bar/volume-control/volume-control.js b/src/js/control-bar/volume-control/volume-control.js index 40c25f3072..5c69aae93c 100644 --- a/src/js/control-bar/volume-control/volume-control.js +++ b/src/js/control-bar/volume-control/volume-control.js @@ -20,11 +20,11 @@ class VolumeControl extends Component { super(player, options); // hide volume controls when they're not supported by the current tech - if (player.tech && player.tech['featuresVolumeControl'] === false) { + if (player.tech_ && player.tech_['featuresVolumeControl'] === false) { this.addClass('vjs-hidden'); } this.on(player, 'loadstart', function(){ - if (player.tech['featuresVolumeControl'] === false) { + if (player.tech_['featuresVolumeControl'] === false) { this.addClass('vjs-hidden'); } else { this.removeClass('vjs-hidden'); diff --git a/src/js/control-bar/volume-menu-button.js b/src/js/control-bar/volume-menu-button.js index d504b8ab63..b138b45449 100644 --- a/src/js/control-bar/volume-menu-button.js +++ b/src/js/control-bar/volume-menu-button.js @@ -48,7 +48,7 @@ class VolumeMenuButton extends MenuButton { // hide mute toggle if the current tech doesn't support volume control function updateVisibility() { - if (player.tech && player.tech['featuresVolumeControl'] === false) { + if (player.tech_ && player.tech_['featuresVolumeControl'] === false) { this.addClass('vjs-hidden'); } else { this.removeClass('vjs-hidden'); diff --git a/src/js/player.js b/src/js/player.js index fba12670e7..7edc4c8479 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -201,10 +201,10 @@ class Player extends Component { // like the control bar show themselves if needed this.userActive(true); this.reportUserActivity(); - this.listenForUserActivity(); + this.listenForUserActivity_(); - this.on('fullscreenchange', this.handleFullscreenChange); - this.on('stageclick', this.handleStageClick); + this.on('fullscreenchange', this.handleFullscreenChange_); + this.on('stageclick', this.handleStageClick_); } /** @@ -231,7 +231,7 @@ class Player extends Component { if (this.tag && this.tag.player) { this.tag.player = null; } if (this.el_ && this.el_.player) { this.el_.player = null; } - if (this.tech) { this.tech.dispose(); } + if (this.tech_) { this.tech_.dispose(); } super.dispose(); } @@ -473,13 +473,14 @@ class Player extends Component { * * @param {String} techName Name of the playback technology * @param {String} source Video source - * @method loadTech + * @method loadTech_ + * @private */ - loadTech(techName, source) { + loadTech_(techName, source) { // Pause and remove current playback technology - if (this.tech) { - this.unloadTech(); + if (this.tech_) { + this.unloadTech_(); } // get rid of the HTML5 video tag as soon as we are using another tech @@ -489,7 +490,7 @@ class Player extends Component { this.tag = null; } - this.techName = techName; + this.techName_ = techName; // Turn off API access because we're loading a new tech that might load asynchronously this.isReady_ = false; @@ -529,50 +530,50 @@ class Player extends Component { // Initialize tech instance let techComponent = Component.getComponent(techName); - this.tech = new techComponent(techOptions); + this.tech_ = new techComponent(techOptions); - textTrackConverter.jsonToTextTracks(this.textTracksJson_ || [], this.tech); + textTrackConverter.jsonToTextTracks(this.textTracksJson_ || [], this.tech_); - this.on(this.tech, 'ready', this.handleTechReady); + this.on(this.tech_, 'ready', this.handleTechReady_); // Listen to every HTML5 events and trigger them back on the player for the plugins - this.on(this.tech, 'loadstart', this.handleTechLoadStart); - this.on(this.tech, 'waiting', this.handleTechWaiting); - this.on(this.tech, 'canplay', this.handleTechCanPlay); - this.on(this.tech, 'canplaythrough', this.handleTechCanPlayThrough); - this.on(this.tech, 'playing', this.handleTechPlaying); - this.on(this.tech, 'ended', this.handleTechEnded); - this.on(this.tech, 'seeking', this.handleTechSeeking); - this.on(this.tech, 'seeked', this.handleTechSeeked); - 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.onTextTrackChange); - this.on(this.tech, 'loadedmetadata', this.updateStyleEl_); - - this.usingNativeControls(this.techGet('controls')); + this.on(this.tech_, 'loadstart', this.handleTechLoadStart_); + this.on(this.tech_, 'waiting', this.handleTechWaiting_); + this.on(this.tech_, 'canplay', this.handleTechCanPlay_); + this.on(this.tech_, 'canplaythrough', this.handleTechCanPlayThrough_); + this.on(this.tech_, 'playing', this.handleTechPlaying_); + this.on(this.tech_, 'ended', this.handleTechEnded_); + this.on(this.tech_, 'seeking', this.handleTechSeeking_); + this.on(this.tech_, 'seeked', this.handleTechSeeked_); + 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.usingNativeControls(this.techGet_('controls')); if (this.controls() && !this.usingNativeControls()) { - this.addTechControlsListeners(); + this.addTechControlsListeners_(); } // Add the tech element in the DOM if it was not already there // Make sure to not insert the original video element if using Html5 - if (this.tech.el().parentNode !== this.el() && (techName !== 'Html5' || !this.tag)) { - Dom.insertElFirst(this.tech.el(), this.el()); + if (this.tech_.el().parentNode !== this.el() && (techName !== 'Html5' || !this.tag)) { + Dom.insertElFirst(this.tech_.el(), this.el()); } // Get rid of the original video tag reference after the first tech is loaded @@ -582,85 +583,88 @@ class Player extends Component { } // player.triggerReady is always async, so don't need this to be async - this.tech.ready(techReady, true); + this.tech_.ready(techReady, true); } /** * Unload playback technology * - * @method unloadTech + * @method unloadTech_ + * @private */ - unloadTech() { + unloadTech_() { // Save the current text tracks so that we can reuse the same text tracks with the next tech this.textTracks_ = this.textTracks(); this.textTracksJson_ = textTrackConverter.textTracksToJson(this); this.isReady_ = false; - this.tech.dispose(); + this.tech_.dispose(); - this.tech = false; + this.tech_ = false; } /** * Add playback technology listeners - * - * @method addTechControlsListeners + * + * @private + * @method addTechControlsListeners_ */ - addTechControlsListeners() { + addTechControlsListeners_() { // Make sure to remove all the previous listeners in case we are called multiple times. - this.removeTechControlsListeners(); + this.removeTechControlsListeners_(); // Some browsers (Chrome & IE) don't trigger a click on a flash swf, but do // trigger mousedown/up. // http://stackoverflow.com/questions/1444562/javascript-onclick-event-over-flash-object // Any touch events are set to block the mousedown event from happening - this.on(this.tech, 'mousedown', this.handleTechClick); + this.on(this.tech_, 'mousedown', this.handleTechClick_); // If the controls were hidden we don't want that to change without a tap event // so we'll check if the controls were already showing before reporting user // activity - this.on(this.tech, 'touchstart', this.handleTechTouchStart); - this.on(this.tech, 'touchmove', this.handleTechTouchMove); - this.on(this.tech, 'touchend', this.handleTechTouchEnd); + this.on(this.tech_, 'touchstart', this.handleTechTouchStart_); + this.on(this.tech_, 'touchmove', this.handleTechTouchMove_); + this.on(this.tech_, 'touchend', this.handleTechTouchEnd_); // The tap listener needs to come after the touchend listener because the tap // listener cancels out any reportedUserActivity when setting userActive(false) - this.on(this.tech, 'tap', this.handleTechTap); + this.on(this.tech_, 'tap', this.handleTechTap_); } /** * 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 + * @method removeTechControlsListeners_ + * @private */ - removeTechControlsListeners() { + removeTechControlsListeners_() { // We don't want to just use `this.off()` because there might be other needed // listeners added by techs that extend this. - this.off(this.tech, 'tap', this.handleTechTap); - this.off(this.tech, 'touchstart', this.handleTechTouchStart); - this.off(this.tech, 'touchmove', this.handleTechTouchMove); - this.off(this.tech, 'touchend', this.handleTechTouchEnd); - this.off(this.tech, 'mousedown', this.handleTechClick); + this.off(this.tech_, 'tap', this.handleTechTap_); + this.off(this.tech_, 'touchstart', this.handleTechTouchStart_); + this.off(this.tech_, 'touchmove', this.handleTechTouchMove_); + this.off(this.tech_, 'touchend', this.handleTechTouchEnd_); + this.off(this.tech_, 'mousedown', this.handleTechClick_); } /** * Player waits for the tech to be ready - * + * + * @method handleTechReady_ * @private - * @method handleTechReady */ - handleTechReady() { + handleTechReady_() { this.triggerReady(); // Keep the same volume as before if (this.cache_.volume) { - this.techCall('setVolume', this.cache_.volume); + this.techCall_('setVolume', this.cache_.volume); } // Update the duration if available - this.handleTechDurationChange(); + this.handleTechDurationChange_(); // Chrome and Safari both have issues with autoplay. // In Safari (5.1.1), when we move the video element into the container div, autoplay doesn't work. @@ -675,9 +679,10 @@ class Player extends Component { /** * Fired when the user agent begins looking for media data * - * @event loadstart + * @private + * @method handleTechLoadStart_ */ - handleTechLoadStart() { + handleTechLoadStart_() { // TODO: Update to use `emptied` event instead. See #1277. this.removeClass('vjs-ended'); @@ -703,6 +708,7 @@ 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) { @@ -726,9 +732,10 @@ class Player extends Component { /** * Fired whenever the media begins or resumes playback * - * @event play + * @private + * @method handleTechPlay_ */ - handleTechPlay() { + handleTechPlay_() { this.removeClass('vjs-ended'); this.removeClass('vjs-paused'); this.addClass('vjs-playing'); @@ -743,9 +750,10 @@ class Player extends Component { /** * Fired whenever the media begins waiting * - * @event waiting + * @private + * @method handleTechWaiting_ */ - handleTechWaiting() { + handleTechWaiting_() { this.addClass('vjs-waiting'); this.trigger('waiting'); } @@ -754,9 +762,10 @@ class Player extends Component { * A handler for events that signal that waiting has ended * which is not consistent between browsers. See #1351 * - * @event canplay + * @private + * @method handleTechCanPlay_ */ - handleTechCanPlay() { + handleTechCanPlay_() { this.removeClass('vjs-waiting'); this.trigger('canplay'); } @@ -765,9 +774,10 @@ class Player extends Component { * A handler for events that signal that waiting has ended * which is not consistent between browsers. See #1351 * - * @event canplaythrough + * @private + * @method handleTechCanPlayThrough_ */ - handleTechCanPlayThrough() { + handleTechCanPlayThrough_() { this.removeClass('vjs-waiting'); this.trigger('canplaythrough'); } @@ -776,9 +786,10 @@ class Player extends Component { * A handler for events that signal that waiting has ended * which is not consistent between browsers. See #1351 * - * @event playing + * @private + * @method handleTechPlaying_ */ - handleTechPlaying() { + handleTechPlaying_() { this.removeClass('vjs-waiting'); this.trigger('playing'); } @@ -786,9 +797,10 @@ class Player extends Component { /** * Fired whenever the player is jumping to a new time * - * @event seeking + * @private + * @method handleTechSeeking_ */ - handleTechSeeking() { + handleTechSeeking_() { this.addClass('vjs-seeking'); this.trigger('seeking'); } @@ -796,9 +808,10 @@ class Player extends Component { /** * Fired when the player has finished jumping to a new time * - * @event seeked + * @private + * @method handleTechSeeked_ */ - handleTechSeeked() { + handleTechSeeked_() { this.removeClass('vjs-seeking'); this.trigger('seeked'); } @@ -809,9 +822,10 @@ class Player extends Component { * implementation yet, so use sparingly. If you don't have a reason to * prevent playback, use `myPlayer.one('play');` instead. * - * @event firstplay + * @private + * @method handleTechFirstPlay_ */ - handleTechFirstPlay() { + handleTechFirstPlay_() { //If the first starttime attribute is specified //then we will start at the given offset in seconds if(this.options_.starttime){ @@ -825,9 +839,10 @@ class Player extends Component { /** * Fired whenever the media has been paused * - * @event pause + * @private + * @method handleTechPause_ */ - handleTechPause() { + handleTechPause_() { this.removeClass('vjs-playing'); this.addClass('vjs-paused'); this.trigger('pause'); @@ -836,9 +851,10 @@ class Player extends Component { /** * Fired while the user agent is downloading media data * - * @event progress + * @private + * @method handleTechProgress_ */ - handleTechProgress() { + handleTechProgress_() { this.trigger('progress'); // Add custom event for when source is finished downloading. @@ -850,9 +866,10 @@ class Player extends Component { /** * Fired when the end of the media resource is reached (currentTime == duration) * - * @event ended + * @private + * @method handleTechEnded_ */ - handleTechEnded() { + handleTechEnded_() { this.addClass('vjs-ended'); if (this.options_.loop) { this.currentTime(0); @@ -867,19 +884,21 @@ class Player extends Component { /** * Fired when the duration of the media resource is first known or changed * - * @event durationchange + * @private + * @method handleTechDurationChange_ */ - handleTechDurationChange() { - this.duration(this.techGet('duration')); + handleTechDurationChange_() { + this.duration(this.techGet_('duration')); } /** * Handle a click on the media element to play/pause * * @param {Object=} event Event object - * @method handleTechClick + * @private + * @method handleTechClick_ */ - handleTechClick(event) { + handleTechClick_(event) { // We're using mousedown to detect clicks thanks to Flash, but mousedown // will also be triggered with right-clicks, so we need to prevent that if (event.button !== 0) return; @@ -899,27 +918,30 @@ class Player extends Component { * Handle a tap on the media element. It will toggle the user * activity state, which hides and shows the controls. * - * @method handleTechTap + * @private + * @method handleTechTap_ */ - handleTechTap() { + handleTechTap_() { this.userActive(!this.userActive()); } /** * Handle touch to start * - * @method handleTechTouchStart + * @private + * @method handleTechTouchStart_ */ - handleTechTouchStart() { + handleTechTouchStart_() { this.userWasActive = this.userActive(); } /** * Handle touch to move * - * @method handleTechTouchMove + * @private + * @method handleTechTouchMove_ */ - handleTechTouchMove() { + handleTechTouchMove_() { if (this.userWasActive){ this.reportUserActivity(); } @@ -928,9 +950,10 @@ class Player extends Component { /** * Handle touch to end * - * @method handleTechTouchEnd + * @private + * @method handleTechTouchEnd_ */ - handleTechTouchEnd(event) { + handleTechTouchEnd_(event) { // Stop the mouse events from also happening event.preventDefault(); } @@ -938,9 +961,10 @@ class Player extends Component { /** * Fired when the player switches in or out of fullscreen mode * - * @event fullscreenchange + * @private + * @method handleFullscreenChange_ */ - handleFullscreenChange() { + handleFullscreenChange_() { if (this.isFullscreen()) { this.addClass('vjs-fullscreen'); } else { @@ -953,18 +977,19 @@ class Player extends Component { * use stageclick events triggered from inside the SWF instead * * @private - * @method handleStageClick + * @method handleStageClick_ */ - handleStageClick() { + handleStageClick_() { this.reportUserActivity(); } /** * Handle Tech Fullscreen Change * - * @method handleTechFullscreenChange + * @private + * @method handleTechFullscreenChange_ */ - handleTechFullscreenChange(event, data) { + handleTechFullscreenChange_(event, data) { if (data) { this.isFullscreen(data.isFullscreen); } @@ -974,100 +999,111 @@ class Player extends Component { /** * Fires when an error occurred during the loading of an audio/video * - * @event error + * @private + * @method handleTechError_ */ - handleTechError() { - let error = this.tech.error(); + handleTechError_() { + let error = this.tech_.error(); this.error(error && error.code); } /** * Fires when the browser is intentionally not getting media data * - * @event suspend + * @private + * @method handleTechSuspend_ */ - handleTechSuspend() { + handleTechSuspend_() { this.trigger('suspend'); } /** * Fires when the loading of an audio/video is aborted * - * @event abort + * @private + * @method handleTechAbort_ */ - handleTechAbort() { + handleTechAbort_() { this.trigger('abort'); } /** * Fires when the current playlist is empty * - * @event emptied + * @private + * @method handleTechEmptied_ */ - handleTechEmptied() { + handleTechEmptied_() { this.trigger('emptied'); } /** * Fires when the browser is trying to get media data, but data is not available * - * @event stalled + * @private + * @method handleTechStalled_ */ - handleTechStalled() { + handleTechStalled_() { this.trigger('stalled'); } /** * Fires when the browser has loaded meta data for the audio/video * - * @event loadedmetadata + * @private + * @method handleTechLoadedMetaData_ */ - handleTechLoadedMetaData() { + handleTechLoadedMetaData_() { this.trigger('loadedmetadata'); } /** * Fires when the browser has loaded the current frame of the audio/video * - * @event loaddata + * @private + * @method handleTechLoadedData_ */ - handleTechLoadedData() { + handleTechLoadedData_() { this.trigger('loadeddata'); } /** * Fires when the current playback position has changed * - * @event timeupdate + * @private + * @method handleTechTimeUpdate_ */ - handleTechTimeUpdate() { + handleTechTimeUpdate_() { this.trigger('timeupdate'); } /** * Fires when the playing speed of the audio/video is changed * - * @event ratechange + * @private + * @method handleTechRateChange_ */ - handleTechRateChange() { + handleTechRateChange_() { this.trigger('ratechange'); } /** * Fires when the volume has been changed * - * @event volumechange + * @private + * @method handleTechVolumeChange_ */ - handleTechVolumeChange() { + handleTechVolumeChange_() { this.trigger('volumechange'); } /** * Fires when the text track has been changed * - * @event texttrackchange + * @private + * @method handleTechTextTrackChange_ */ - onTextTrackChange() { + handleTechTextTrackChange_() { this.trigger('texttrackchange'); } @@ -1086,19 +1122,20 @@ class Player extends Component { * * @param {String=} method Method * @param {Object=} arg Argument - * @method techCall + * @private + * @method techCall_ */ - techCall(method, arg) { + techCall_(method, arg) { // If it's not ready yet, call method when it is - if (this.tech && !this.tech.isReady_) { - this.tech.ready(function(){ + if (this.tech_ && !this.tech_.isReady_) { + this.tech_.ready(function(){ this[method](arg); }, true); // Otherwise call method now } else { try { - this.tech[method](arg); + this.tech_[method](arg); } catch(e) { log(e); throw e; @@ -1111,25 +1148,26 @@ class Player extends Component { * * @param {String} method Tech method * @return {Method} - * @method techGet + * @private + * @method techGet_ */ - techGet(method) { - if (this.tech && this.tech.isReady_) { + techGet_(method) { + if (this.tech_ && this.tech_.isReady_) { // Flash likes to die and reload when you hide or reposition it. // In these cases the object methods go away and we get errors. // When that happens we'll catch the errors and inform tech that it's not ready any more. try { - return this.tech[method](); + return this.tech_[method](); } catch(e) { // When building additional tech libs, an expected method may not be defined yet - if (this.tech[method] === undefined) { - log(`Video.js: ${method} method not defined for ${this.techName} playback technology.`, e); + if (this.tech_[method] === undefined) { + log(`Video.js: ${method} method not defined for ${this.techName_} playback technology.`, e); } else { // When a method isn't available on the object it throws a TypeError if (e.name === 'TypeError') { - log(`Video.js: ${method} unavailable on ${this.techName} playback technology element.`, e); - this.tech.isReady_ = false; + log(`Video.js: ${method} unavailable on ${this.techName_} playback technology element.`, e); + this.tech_.isReady_ = false; } else { log(e); } @@ -1151,7 +1189,7 @@ class Player extends Component { * @method play */ play() { - this.techCall('play'); + this.techCall_('play'); return this; } @@ -1165,7 +1203,7 @@ class Player extends Component { * @method pause */ pause() { - this.techCall('pause'); + this.techCall_('pause'); return this; } @@ -1181,7 +1219,7 @@ class Player extends Component { */ paused() { // The initial state of paused should be true (in Safari it's actually false) - return (this.techGet('paused') === false) ? false : true; + return (this.techGet_('paused') === false) ? false : true; } /** @@ -1226,7 +1264,7 @@ class Player extends Component { currentTime(seconds) { if (seconds !== undefined) { - this.techCall('setCurrentTime', seconds); + this.techCall_('setCurrentTime', seconds); return this; } @@ -1237,7 +1275,7 @@ class Player extends Component { // currentTime when scrubbing, but may not provide much performance benefit afterall. // Should be tested. Also something has to read the actual current time or the cache will // never get updated. - return this.cache_.currentTime = (this.techGet('currentTime') || 0); + return this.cache_.currentTime = (this.techGet_('currentTime') || 0); } /** @@ -1318,7 +1356,7 @@ class Player extends Component { * @method buffered */ buffered() { - var buffered = this.techGet('buffered'); + var buffered = this.techGet_('buffered'); if (!buffered || !buffered.length) { buffered = createTimeRange(0,0); @@ -1382,13 +1420,13 @@ class Player extends Component { if (percentAsDecimal !== undefined) { vol = Math.max(0, Math.min(1, parseFloat(percentAsDecimal))); // Force value to between 0 and 1 this.cache_.volume = vol; - this.techCall('setVolume', vol); + this.techCall_('setVolume', vol); return this; } // Default to 1 when returning current volume. - vol = parseFloat(this.techGet('volume')); + vol = parseFloat(this.techGet_('volume')); return (isNaN(vol)) ? 1 : vol; } @@ -1409,10 +1447,10 @@ class Player extends Component { */ muted(muted) { if (muted !== undefined) { - this.techCall('setMuted', muted); + this.techCall_('setMuted', muted); return this; } - return this.techGet('muted') || false; // Default to false + return this.techGet_('muted') || false; // Default to false } // Check if current tech can support native fullscreen @@ -1424,7 +1462,7 @@ class Player extends Component { * @method supportsFullScreen */ supportsFullScreen() { - return this.techGet('supportsFullScreen') || false; + return this.techGet_('supportsFullScreen') || false; } /** @@ -1494,10 +1532,10 @@ class Player extends Component { this.el_[fsApi.requestFullscreen](); - } else if (this.tech.supportsFullScreen()) { + } else if (this.tech_.supportsFullScreen()) { // we can't take the video.js controls fullscreen but we can go fullscreen // with native controls - this.techCall('enterFullScreen'); + this.techCall_('enterFullScreen'); } else { // fullscreen isn't supported so we'll just stretch the video element to // fill the viewport @@ -1524,8 +1562,8 @@ class Player extends Component { // Check for browser element fullscreen support if (fsApi.requestFullscreen) { document[fsApi.exitFullscreen](); - } else if (this.tech.supportsFullScreen()) { - this.techCall('exitFullScreen'); + } else if (this.tech_.supportsFullScreen()) { + this.techCall_('exitFullScreen'); } else { this.exitFullWindow(); this.trigger('fullscreenchange'); @@ -1663,10 +1701,10 @@ class Player extends Component { */ src(source) { if (source === undefined) { - return this.techGet('src'); + return this.techGet_('src'); } - let currentTech = Component.getComponent(this.techName); + let currentTech = Component.getComponent(this.techName_); // case: Array of source objects to choose from and pick the best to play if (Array.isArray(source)) { @@ -1697,9 +1735,9 @@ class Player extends Component { // We need to check the direct prototype for the case where subclasses // of the tech do not support source handlers if (currentTech.prototype.hasOwnProperty('setSource')) { - this.techCall('setSource', source); + this.techCall_('setSource', source); } else { - this.techCall('src', source.src); + this.techCall_('src', source.src); } if (this.options_.preload === 'auto') { @@ -1729,12 +1767,12 @@ class Player extends Component { var sourceTech = this.selectSource(sources); if (sourceTech) { - if (sourceTech.tech === this.techName) { + if (sourceTech.tech === this.techName_) { // if this technology is already loaded, set the source this.src(sourceTech.source); } else { // load this technology with the chosen source - this.loadTech(sourceTech.tech, sourceTech.source); + this.loadTech_(sourceTech.tech, sourceTech.source); } } else { // We need to wrap this in a timeout to give folks a chance to add error event handlers @@ -1755,7 +1793,7 @@ class Player extends Component { * @method load */ load() { - this.techCall('load'); + this.techCall_('load'); return this; } @@ -1767,7 +1805,7 @@ class Player extends Component { * @method currentSrc */ currentSrc() { - return this.techGet('currentSrc') || this.cache_.src || ''; + return this.techGet_('currentSrc') || this.cache_.src || ''; } /** @@ -1779,7 +1817,7 @@ class Player extends Component { * @method currentType */ currentType() { - return this.currentType_ || ''; + return this.currentType_ || ''; } /** @@ -1792,11 +1830,11 @@ class Player extends Component { */ preload(value) { if (value !== undefined) { - this.techCall('setPreload', value); + this.techCall_('setPreload', value); this.options_.preload = value; return this; } - return this.techGet('preload'); + return this.techGet_('preload'); } /** @@ -1809,11 +1847,11 @@ class Player extends Component { */ autoplay(value) { if (value !== undefined) { - this.techCall('setAutoplay', value); + this.techCall_('setAutoplay', value); this.options_.autoplay = value; return this; } - return this.techGet('autoplay', value); + return this.techGet_('autoplay', value); } /** @@ -1826,11 +1864,11 @@ class Player extends Component { */ loop(value) { if (value !== undefined) { - this.techCall('setLoop', value); + this.techCall_('setLoop', value); this.options_['loop'] = value; return this; } - return this.techGet('loop'); + return this.techGet_('loop'); } /** @@ -1863,7 +1901,7 @@ class Player extends Component { this.poster_ = src; // update the tech's poster - this.techCall('setPoster', src); + this.techCall_('setPoster', src); // alert components that the poster has been set this.trigger('posterchange'); @@ -1886,7 +1924,7 @@ class Player extends Component { this.controls_ = bool; if (this.usingNativeControls()) { - this.techCall('setControls', bool); + this.techCall_('setControls', bool); } if (bool) { @@ -1895,7 +1933,7 @@ class Player extends Component { this.trigger('controlsenabled'); if (!this.usingNativeControls()) { - this.addTechControlsListeners(); + this.addTechControlsListeners_(); } } else { this.removeClass('vjs-controls-enabled'); @@ -1903,7 +1941,7 @@ class Player extends Component { this.trigger('controlsdisabled'); if (!this.usingNativeControls()) { - this.removeTechControlsListeners(); + this.removeTechControlsListeners_(); } } } @@ -2007,7 +2045,7 @@ class Player extends Component { * @return {Boolean} True if the player is in the ended state, false if not. * @method ended */ - ended() { return this.techGet('ended'); } + ended() { return this.techGet_('ended'); } /** * Returns whether or not the player is in the "seeking" state. @@ -2015,7 +2053,7 @@ class Player extends Component { * @return {Boolean} True if the player is in the seeking state, false if not. * @method seeking */ - seeking() { return this.techGet('seeking'); } + seeking() { return this.techGet_('seeking'); } /** * Returns the TimeRanges of the media that are currently available @@ -2024,7 +2062,7 @@ class Player extends Component { * @return {TimeRanges} the seekable intervals of the media timeline * @method seekable */ - seekable() { return this.techGet('seekable'); } + seekable() { return this.techGet_('seekable'); } /** * Report user activity @@ -2068,8 +2106,8 @@ class Player extends Component { // // When this gets resolved in ALL browsers it can be removed // https://code.google.com/p/chromium/issues/detail?id=103041 - if(this.tech) { - this.tech.one('mousemove', function(e){ + if(this.tech_) { + this.tech_.one('mousemove', function(e){ e.stopPropagation(); e.preventDefault(); }); @@ -2088,9 +2126,10 @@ class Player extends Component { /** * Listen for user activity based on timeout value * - * @method listenForUserActivity + * @private + * @method listenForUserActivity_ */ - listenForUserActivity() { + listenForUserActivity_() { let mouseInProgress, lastMoveX, lastMoveY; let handleActivity = Fn.bind(this, this.reportUserActivity); @@ -2181,12 +2220,12 @@ class Player extends Component { */ playbackRate(rate) { if (rate !== undefined) { - this.techCall('setPlaybackRate', rate); + this.techCall_('setPlaybackRate', rate); return this; } - if (this.tech && this.tech['featuresPlaybackRate']) { - return this.techGet('playbackRate'); + if (this.tech_ && this.tech_['featuresPlaybackRate']) { + return this.techGet_('playbackRate'); } else { return 1.0; } @@ -2231,7 +2270,7 @@ class Player extends Component { * @method networkState */ networkState() { - return this.techGet('networkState'); + return this.techGet_('networkState'); } /** @@ -2258,7 +2297,7 @@ class Player extends Component { * @method readyState */ readyState() { - return this.techGet('readyState'); + return this.techGet_('readyState'); } /* @@ -2277,9 +2316,9 @@ class Player extends Component { * @method textTracks */ textTracks() { - // cannot use techGet directly because it checks to see whether the tech is ready. + // cannot use techGet_ directly because it checks to see whether the tech is ready. // Flash is unlikely to be ready in time but textTracks should still work. - return this.tech && this.tech['textTracks'](); + return this.tech_ && this.tech_['textTracks'](); } /** @@ -2289,7 +2328,7 @@ class Player extends Component { * @method remoteTextTracks */ remoteTextTracks() { - return this.tech && this.tech['remoteTextTracks'](); + return this.tech_ && this.tech_['remoteTextTracks'](); } /** @@ -2303,7 +2342,7 @@ class Player extends Component { * @method addTextTrack */ addTextTrack(kind, label, language) { - return this.tech && this.tech['addTextTrack'](kind, label, language); + return this.tech_ && this.tech_['addTextTrack'](kind, label, language); } /** @@ -2313,7 +2352,7 @@ class Player extends Component { * @method addRemoteTextTrack */ addRemoteTextTrack(options) { - return this.tech && this.tech['addRemoteTextTrack'](options); + return this.tech_ && this.tech_['addRemoteTextTrack'](options); } /** @@ -2323,7 +2362,7 @@ class Player extends Component { * @method removeRemoteTextTrack */ removeRemoteTextTrack(track) { - this.tech && this.tech['removeRemoteTextTrack'](track); + this.tech_ && this.tech_['removeRemoteTextTrack'](track); } /** @@ -2333,7 +2372,7 @@ class Player extends Component { * @method videoWidth */ videoWidth() { - return this.tech && this.tech.videoWidth && this.tech.videoWidth() || 0; + return this.tech_ && this.tech_.videoWidth && this.tech_.videoWidth() || 0; } /** @@ -2343,20 +2382,20 @@ class Player extends Component { * @method videoHeight */ videoHeight() { - return this.tech && this.tech.videoHeight && this.tech.videoHeight() || 0; + return this.tech_ && this.tech_.videoHeight && this.tech_.videoHeight() || 0; } // Methods to add support for - // initialTime: function(){ return this.techCall('initialTime'); }, - // startOffsetTime: function(){ return this.techCall('startOffsetTime'); }, - // played: function(){ return this.techCall('played'); }, - // seekable: function(){ return this.techCall('seekable'); }, - // videoTracks: function(){ return this.techCall('videoTracks'); }, - // audioTracks: function(){ return this.techCall('audioTracks'); }, - // defaultPlaybackRate: function(){ return this.techCall('defaultPlaybackRate'); }, - // mediaGroup: function(){ return this.techCall('mediaGroup'); }, - // controller: function(){ return this.techCall('controller'); }, - // defaultMuted: function(){ return this.techCall('defaultMuted'); } + // initialTime: function(){ return this.techCall_('initialTime'); }, + // startOffsetTime: function(){ return this.techCall_('startOffsetTime'); }, + // played: function(){ return this.techCall_('played'); }, + // seekable: function(){ return this.techCall_('seekable'); }, + // videoTracks: function(){ return this.techCall_('videoTracks'); }, + // audioTracks: function(){ return this.techCall_('audioTracks'); }, + // defaultPlaybackRate: function(){ return this.techCall_('defaultPlaybackRate'); }, + // mediaGroup: function(){ return this.techCall_('mediaGroup'); }, + // controller: function(){ return this.techCall_('controller'); }, + // defaultMuted: function(){ return this.techCall_('defaultMuted'); } // TODO // currentSrcList: the array of sources including other formats and bitrates @@ -2530,14 +2569,14 @@ Player.prototype.options_ = { * * @event loadedmetadata */ -Player.prototype.handleLoadedMetaData; +Player.prototype.handleLoadedMetaData_; /** * Fired when the player has downloaded data at the current playback position * * @event loadeddata */ -Player.prototype.handleLoadedData; +Player.prototype.handleLoadedData_; /** * Fired when the player has finished downloading the source data @@ -2551,14 +2590,14 @@ Player.prototype.handleLoadedAllData; * * @event useractive */ -Player.prototype.handleUserActive; +Player.prototype.handleUserActive_; /** * Fired when the user is inactive, e.g. a short delay after the last mouse move or control interaction * * @event userinactive */ -Player.prototype.handleUserInactive; +Player.prototype.handleUserInactive_; /** * Fired when the current playback position has changed * @@ -2567,21 +2606,21 @@ Player.prototype.handleUserInactive; * * @event timeupdate */ -Player.prototype.handleTimeUpdate; +Player.prototype.handleTimeUpdate_; /** * Fired when the volume changes * * @event volumechange */ -Player.prototype.handleVolumeChange; +Player.prototype.handleVolumeChange_; /** * Fired when an error occurs * * @event error */ -Player.prototype.handleError; +Player.prototype.handleError_; Player.prototype.flexNotSupported_ = function() { var elem = document.createElement('i'); diff --git a/src/js/tech/loader.js b/src/js/tech/loader.js index 63eb7c9cb1..63bb8ebe2e 100644 --- a/src/js/tech/loader.js +++ b/src/js/tech/loader.js @@ -30,7 +30,7 @@ class MediaLoader extends Component { // Check if the browser supports this technology if (tech && tech.isSupported()) { - player.loadTech(techName); + player.loadTech_(techName); break; } } diff --git a/src/js/tracks/text-track-display.js b/src/js/tracks/text-track-display.js index 35f8b65666..0426dad666 100644 --- a/src/js/tracks/text-track-display.js +++ b/src/js/tracks/text-track-display.js @@ -46,7 +46,7 @@ class TextTrackDisplay extends Component { // Should probably be moved to an external track loader when we support // tracks that don't need a display. player.ready(Fn.bind(this, function() { - if (player.tech && player.tech['featuresNativeTextTracks']) { + if (player.tech_ && player.tech_['featuresNativeTextTracks']) { this.hide(); return; } @@ -62,12 +62,12 @@ class TextTrackDisplay extends Component { } /** - * Toggle display texttracks + * Toggle display texttracks * * @method toggleDisplay */ toggleDisplay() { - if (this.player_.tech && this.player_.tech['featuresNativeTextTracks']) { + if (this.player_.tech_ && this.player_.tech_['featuresNativeTextTracks']) { this.hide(); } else { this.show(); @@ -87,7 +87,7 @@ class TextTrackDisplay extends Component { } /** - * Clear display texttracks + * Clear display texttracks * * @method clearDisplay */ @@ -98,7 +98,7 @@ class TextTrackDisplay extends Component { } /** - * Update display texttracks + * Update display texttracks * * @method updateDisplay */ @@ -120,7 +120,7 @@ class TextTrackDisplay extends Component { } /** - * Add texttrack to texttrack list + * Add texttrack to texttrack list * * @param {TextTrackObject} track Texttrack object to be added to list * @method updateForTrack @@ -226,7 +226,7 @@ function constructColor(color, opacity) { * @method tryUpdateStyle */ function tryUpdateStyle(el, style, rule) { - // + // try { el.style[style] = rule; } catch (e) {} diff --git a/test/unit/controls.test.js b/test/unit/controls.test.js index de1dffbc84..d57e45e437 100644 --- a/test/unit/controls.test.js +++ b/test/unit/controls.test.js @@ -16,7 +16,7 @@ test('should hide volume control if it\'s not supported', function(){ id: noop, on: noop, ready: noop, - tech: { + tech_: { 'featuresVolumeControl': false }, volume: function(){}, @@ -50,7 +50,7 @@ test('should test and toggle volume control on `loadstart`', function(){ muted: function(){ return false; }, - tech: { + tech_: { 'featuresVolumeControl': true }, reportUserActivity: function(){} @@ -62,7 +62,7 @@ test('should test and toggle volume control on `loadstart`', function(){ equal(volumeControl.hasClass('vjs-hidden'), false, 'volumeControl is hidden initially'); equal(muteToggle.hasClass('vjs-hidden'), false, 'muteToggle is hidden initially'); - player.tech['featuresVolumeControl'] = false; + player.tech_['featuresVolumeControl'] = false; for (i = 0; i < listeners.length; i++) { listeners[i](); } @@ -70,7 +70,7 @@ test('should test and toggle volume control on `loadstart`', function(){ equal(volumeControl.hasClass('vjs-hidden'), true, 'volumeControl does not hide itself'); equal(muteToggle.hasClass('vjs-hidden'), true, 'muteToggle does not hide itself'); - player.tech['featuresVolumeControl'] = true; + player.tech_['featuresVolumeControl'] = true; for (i = 0; i < listeners.length; i++) { listeners[i](); } diff --git a/test/unit/player.test.js b/test/unit/player.test.js index 6a91caf089..0e858a0399 100644 --- a/test/unit/player.test.js +++ b/test/unit/player.test.js @@ -253,7 +253,7 @@ test('should hide the poster when play is called', function() { player.play(); equal(player.hasStarted(), true, 'the show poster flag is false after play'); - player.tech.trigger('loadstart'); + player.tech_.trigger('loadstart'); equal(player.hasStarted(), false, 'the resource selection algorithm sets the show poster flag to true'); @@ -419,7 +419,7 @@ test('make sure that controls listeners do not get added too many times', functi var player = TestHelpers.makePlayer({}); var listeners = 0; - player.addTechControlsListeners = function() { + player.addTechControlsListeners_ = function() { listeners++; }; @@ -430,13 +430,13 @@ test('make sure that controls listeners do not get added too many times', functi player.controls(true); - equal(listeners, 0, 'addTechControlsListeners should not have gotten called yet'); + equal(listeners, 0, 'addTechControlsListeners_ should not have gotten called yet'); player.usingNativeControls(false); player.controls(false); player.controls(true); - equal(listeners, 1, 'addTechControlsListeners should have gotten called once'); + equal(listeners, 1, 'addTechControlsListeners_ should have gotten called once'); player.dispose(); }); @@ -488,9 +488,9 @@ test('should not add multiple first play events despite subsequent loads', funct }); // Checking to make sure onLoadStart removes first play listener before adding a new one. - player.tech.trigger('loadstart'); - player.tech.trigger('loadstart'); - player.tech.trigger('play'); + player.tech_.trigger('loadstart'); + player.tech_.trigger('loadstart'); + player.tech_.trigger('play'); }); test('should fire firstplay after resetting the player', function() { @@ -502,23 +502,23 @@ test('should fire firstplay after resetting the player', function() { }); // init firstplay listeners - player.tech.trigger('loadstart'); - player.tech.trigger('play'); + player.tech_.trigger('loadstart'); + player.tech_.trigger('play'); ok(fpFired, 'First firstplay fired'); // reset the player - player.tech.trigger('loadstart'); + player.tech_.trigger('loadstart'); fpFired = false; - player.tech.trigger('play'); + player.tech_.trigger('play'); ok(fpFired, 'Second firstplay fired'); // the play event can fire before the loadstart event. // in that case we still want the firstplay even to fire. - player.tech.paused = function(){ return false; }; + player.tech_.paused = function(){ return false; }; fpFired = false; // reset the player - player.tech.trigger('loadstart'); - // player.tech.trigger('play'); + player.tech_.trigger('loadstart'); + // player.tech_.trigger('play'); ok(fpFired, 'Third firstplay fired'); }); @@ -527,14 +527,14 @@ test('should remove vjs-has-started class', function(){ var player = TestHelpers.makePlayer({}); - player.tech.trigger('loadstart'); - player.tech.trigger('play'); + player.tech_.trigger('loadstart'); + player.tech_.trigger('play'); ok(player.el().className.indexOf('vjs-has-started') !== -1, 'vjs-has-started class added'); - player.tech.trigger('loadstart'); + player.tech_.trigger('loadstart'); ok(player.el().className.indexOf('vjs-has-started') === -1, 'vjs-has-started class removed'); - player.tech.trigger('play'); + player.tech_.trigger('play'); ok(player.el().className.indexOf('vjs-has-started') !== -1, 'vjs-has-started class added again'); }); @@ -543,18 +543,18 @@ test('should add and remove vjs-ended class', function() { var player = TestHelpers.makePlayer({}); - player.tech.trigger('loadstart'); - player.tech.trigger('play'); - player.tech.trigger('ended'); + player.tech_.trigger('loadstart'); + player.tech_.trigger('play'); + player.tech_.trigger('ended'); ok(player.el().className.indexOf('vjs-ended') !== -1, 'vjs-ended class added'); - player.tech.trigger('play'); + player.tech_.trigger('play'); ok(player.el().className.indexOf('vjs-ended') === -1, 'vjs-ended class removed'); - player.tech.trigger('ended'); + player.tech_.trigger('ended'); ok(player.el().className.indexOf('vjs-ended') !== -1, 'vjs-ended class re-added'); - player.tech.trigger('loadstart'); + player.tech_.trigger('loadstart'); ok(player.el().className.indexOf('vjs-ended') === -1, 'vjs-ended class removed'); }); @@ -721,7 +721,7 @@ test('pause is called when player ended event is fired and player is not paused' player.pause = function() { pauses++; }; - player.tech.trigger('ended'); + player.tech_.trigger('ended'); equal(pauses, 1, 'pause was called'); }); @@ -735,7 +735,7 @@ test('pause is not called if the player is paused and ended is fired', function( player.pause = function() { pauses++; }; - player.tech.trigger('ended'); + player.tech_.trigger('ended'); equal(pauses, 0, 'pause was not called when ended fired'); }); diff --git a/test/unit/tracks/text-track.test.js b/test/unit/tracks/text-track.test.js index 0610e297d0..fc59cf97d9 100644 --- a/test/unit/tracks/text-track.test.js +++ b/test/unit/tracks/text-track.test.js @@ -224,7 +224,7 @@ test('fires cuechange when cues become active and inactive', function() { changes = 0, cuechangeHandler, tt = new TextTrack({ - tech: player.tech, + tech: player.tech_, mode: 'showing' }); @@ -241,19 +241,19 @@ test('fires cuechange when cues become active and inactive', function() { tt.oncuechange = cuechangeHandler; tt.addEventListener('cuechange', cuechangeHandler); - player.tech.currentTime = function() { + player.tech_.currentTime = function() { return 2; }; - player.tech.trigger('timeupdate'); + player.tech_.trigger('timeupdate'); equal(changes, 2, 'a cuechange event trigger addEventListener and oncuechange'); - player.tech.currentTime = function() { + player.tech_.currentTime = function() { return 7; }; - player.tech.trigger('timeupdate'); + player.tech_.trigger('timeupdate'); equal(changes, 4, 'a cuechange event trigger addEventListener and oncuechange'); diff --git a/test/unit/tracks/tracks.test.js b/test/unit/tracks/tracks.test.js index 80da870119..4a86744e24 100644 --- a/test/unit/tracks/tracks.test.js +++ b/test/unit/tracks/tracks.test.js @@ -44,10 +44,10 @@ test('Player track methods call the tech', function() { player = TestHelpers.makePlayer(); - player.tech.textTracks = function() { + player.tech_.textTracks = function() { calls++; }; - player.tech.addTextTrack = function() { + player.tech_.addTextTrack = function() { calls++; }; @@ -289,10 +289,10 @@ test('html5 tech supports native text tracks if the video supports it, unless it test('when switching techs, we should not get a new text track', function() { let player = TestHelpers.makePlayer(); - player.loadTech('TechFaker'); + player.loadTech_('TechFaker'); let firstTracks = player.textTracks(); - player.loadTech('TechFaker'); + player.loadTech_('TechFaker'); let secondTracks = player.textTracks(); ok(firstTracks === secondTracks, 'the tracks are equal');