From fe4c477da613b4bb4dac1a32bd0891fd89313da3 Mon Sep 17 00:00:00 2001 From: Steve Heffernan Date: Tue, 11 Feb 2014 17:20:07 -0800 Subject: [PATCH] Switch this.content references to use the standard this.contentEl_ Also cleaned up some comments and formatting. --- src/js/control-bar/progress-control.js | 21 ++++++++++---------- src/js/control-bar/time-display.js | 27 +++++++++++++++----------- src/js/media/flash.js | 2 ++ src/js/player.js | 9 ++++++--- 4 files changed, 34 insertions(+), 25 deletions(-) diff --git a/src/js/control-bar/progress-control.js b/src/js/control-bar/progress-control.js index 318fe505c..7c0dee699 100644 --- a/src/js/control-bar/progress-control.js +++ b/src/js/control-bar/progress-control.js @@ -165,10 +165,10 @@ vjs.PlayProgressBar.prototype.createEl = function(){ * @constructor */ vjs.SeekHandle = vjs.SliderHandle.extend({ - init: function(player, options) { - vjs.SliderHandle.call(this, player, options); - player.on('timeupdate', vjs.bind(this, this.updateContent)); - } + init: function(player, options) { + vjs.SliderHandle.call(this, player, options); + player.on('timeupdate', vjs.bind(this, this.updateContent)); + } }); /** @@ -181,14 +181,13 @@ vjs.SeekHandle.prototype.defaultValue = '00:00'; /** @inheritDoc */ vjs.SeekHandle.prototype.createEl = function() { - return this.content = vjs.SliderHandle.prototype.createEl.call(this, 'div', { - className: 'vjs-seek-handle' - }); + return vjs.SliderHandle.prototype.createEl.call(this, 'div', { + className: 'vjs-seek-handle', + 'aria-live': 'off' + }); }; vjs.SeekHandle.prototype.updateContent = function() { - - // Allows for smooth scrubbing, when player can't keep up. - var time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime(); - this.content.innerHTML = '' + vjs.formatTime(time, this.player_.duration()) + ''; + var time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime(); + this.el_.innerHTML = '' + vjs.formatTime(time, this.player_.duration()) + ''; }; diff --git a/src/js/control-bar/time-display.js b/src/js/control-bar/time-display.js index 0ebacb76c..dbbb7e5c9 100644 --- a/src/js/control-bar/time-display.js +++ b/src/js/control-bar/time-display.js @@ -18,20 +18,20 @@ vjs.CurrentTimeDisplay.prototype.createEl = function(){ className: 'vjs-current-time vjs-time-controls vjs-control' }); - this.content = vjs.createEl('div', { + this.contentEl_ = vjs.createEl('div', { className: 'vjs-current-time-display', innerHTML: 'Current Time ' + '0:00', // label the current time for screen reader users 'aria-live': 'off' // tell screen readers not to automatically read the time as it changes }); - el.appendChild(vjs.createEl('div').appendChild(this.content)); + el.appendChild(this.contentEl_); return el; }; vjs.CurrentTimeDisplay.prototype.updateContent = function(){ // Allows for smooth scrubbing, when player can't keep up. var time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime(); - this.content.innerHTML = 'Current Time ' + vjs.formatTime(time, this.player_.duration()); + this.contentEl_.innerHTML = 'Current Time ' + vjs.formatTime(time, this.player_.duration()); }; /** @@ -45,7 +45,12 @@ vjs.DurationDisplay = vjs.Component.extend({ init: function(player, options){ vjs.Component.call(this, player, options); - player.on('timeupdate', vjs.bind(this, this.updateContent)); // this might need to be changes to 'durationchange' instead of 'timeupdate' eventually, however the durationchange event fires before this.player_.duration() is set, so the value cannot be written out using this method. Once the order of durationchange and this.player_.duration() being set is figured out, this can be updated. + // this might need to be changed to 'durationchange' instead of 'timeupdate' eventually, + // however the durationchange event fires before this.player_.duration() is set, + // so the value cannot be written out using this method. + // Once the order of durationchange and this.player_.duration() being set is figured out, + // this can be updated. + player.on('timeupdate', vjs.bind(this, this.updateContent)); } }); @@ -54,20 +59,20 @@ vjs.DurationDisplay.prototype.createEl = function(){ className: 'vjs-duration vjs-time-controls vjs-control' }); - this.content = vjs.createEl('div', { + this.contentEl_ = vjs.createEl('div', { className: 'vjs-duration-display', innerHTML: 'Duration Time ' + '0:00', // label the duration time for screen reader users 'aria-live': 'off' // tell screen readers not to automatically read the time as it changes }); - el.appendChild(vjs.createEl('div').appendChild(this.content)); + el.appendChild(this.contentEl_); return el; }; vjs.DurationDisplay.prototype.updateContent = function(){ var duration = this.player_.duration(); if (duration) { - this.content.innerHTML = 'Duration Time ' + vjs.formatTime(duration); // label the duration time for screen reader users + this.contentEl_.innerHTML = 'Duration Time ' + vjs.formatTime(duration); // label the duration time for screen reader users } }; @@ -114,22 +119,22 @@ vjs.RemainingTimeDisplay.prototype.createEl = function(){ className: 'vjs-remaining-time vjs-time-controls vjs-control' }); - this.content = vjs.createEl('div', { + this.contentEl_ = vjs.createEl('div', { className: 'vjs-remaining-time-display', innerHTML: 'Remaining Time ' + '-0:00', // label the remaining time for screen reader users 'aria-live': 'off' // tell screen readers not to automatically read the time as it changes }); - el.appendChild(vjs.createEl('div').appendChild(this.content)); + el.appendChild(this.contentEl_); return el; }; vjs.RemainingTimeDisplay.prototype.updateContent = function(){ if (this.player_.duration()) { - this.content.innerHTML = 'Remaining Time ' + '-'+ vjs.formatTime(this.player_.remainingTime()); + this.contentEl_.innerHTML = 'Remaining Time ' + '-'+ vjs.formatTime(this.player_.remainingTime()); } // Allows for smooth scrubbing, when player can't keep up. // var time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime(); - // this.content.innerHTML = vjs.formatTime(time, this.player_.duration()); + // this.contentEl_.innerHTML = vjs.formatTime(time, this.player_.duration()); }; diff --git a/src/js/media/flash.js b/src/js/media/flash.js index 9862903bd..926d67281 100644 --- a/src/js/media/flash.js +++ b/src/js/media/flash.js @@ -82,6 +82,8 @@ vjs.Flash = vjs.MediaTechController.extend({ this.el_.vjs_setProperty('currentTime', time); }; this['currentTime'] = function(time){ + // when seeking make the reported time keep up with the requested time + // by reading the time we're seeking to if (this.seeking()) { return lastSeekTarget; } diff --git a/src/js/player.js b/src/js/player.js index 781de66da..5d0bf574a 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -658,8 +658,12 @@ vjs.Player.prototype.currentTime = function(seconds){ return this; } - // cache last currentTime and return - // default to 0 seconds + // cache last currentTime and return. default to 0 seconds + // + // Caching the currentTime is meant to prevent a massive amount of reads on the tech's + // currentTime when scrubbing, but may not provide much performace 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); }; @@ -1357,7 +1361,6 @@ vjs.Player.prototype.listenForUserActivity = function(){ // Methods to add support for // networkState: function(){ return this.techCall('networkState'); }, // readyState: function(){ return this.techCall('readyState'); }, -// seeking: function(){ return this.techCall('seeking'); }, // initialTime: function(){ return this.techCall('initialTime'); }, // startOffsetTime: function(){ return this.techCall('startOffsetTime'); }, // played: function(){ return this.techCall('played'); },