Update rail only if controls are visible.

[vivekannan]

'timeupdate' eventListener calls the updateCurrent and updateDuration methods even if the controls are hidden. This is unnecessary as tons of CPU cycles are wasted which results in bad battery life. So make the eventListener check controlsAreVisible.

[rafa8626]

@vivekannan Thanks for pointing this. We are preparing a PR to solve this issue

[vivekannan]

Actually, its seem that the timeupdate event is assured to be called at least once every 250ms in Chrome and other browsers. In Firefox its even worse (or better), for every frame!!! I am working on an app that uses this player as a base where battery life is important. So I re-wrote the code so that the callback itself is removed after the controls are hidden and reapplied when they are visible. Makes a reallllly big difference in battery life when you are watching hours of videos.

[rafa8626]

@vivekannan I see. Check the PR linked to this issue and let me know if that works for you

[vivekannan]

In my app, I have changed it into something like this,

function showControls() {
    //show controls code
   this.media.addEventListener('timeupdate', this.timeUpdateCallback);
}

function hideControls() {
    //hide controls code
   this.media.removeEventListener('timeupdate', this.timeUpdateCallback);
}

function timeUpdateCallback() {
   // notice the this.player reference as 'this' refers to the media DOM element here as this function
   // is called with the media element as context
   this.player.updateDuration();
   this.player.updateCurrent();
}

[rafa8626]

Thanks for sharing your answer. Did you by any chance tested the PR linked to this issue? Just to verify that it solves your issue as well from the core

[vivekannan]

Yeah, this should work. This was my initial solution. Shall I close the issue?

[rafa8626]

@vivekannan You can close this one once it's merged into the master branch. I'll let you know when this happens