Video.js: Add an option to override format-time util

[adamtal3]

There are many places in the code calling _utilsFormatTimeJs2['default']. Why is this util private? In v4 it was possible to override the time display format. In order to change it now. I have to override the prototype functions of 6 different components instead of just overriding format-time.

This is the override I've came up with:

    videojs.getComponent('PlayProgressBar').prototype.updateDataAttr = function (seconds) {
        var time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
        this.el_.setAttribute('data-current-time', myCustomTimeFormat(time));
    }
    videojs.getComponent('CurrentTimeDisplay').prototype.updateContent = function updateContent() {
        // Allows for smooth scrubbing, when player can't keep up.
        var time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
        var localizedText = this.localize('Current Time');
        var formattedTime = myCustomTimeFormat(time);
        this.contentEl_.innerHTML = '<span class="vjs-control-text">' + localizedText + '</span> ' + formattedTime;
    };
    videojs.getComponent('DurationDisplay').prototype.updateContent = function updateContent() {
        var duration = this.player_.duration();
        if (duration) {
            var localizedText = this.localize('Duration Time');
            var formattedTime = myCustomTimeFormat(duration);
            this.contentEl_.innerHTML = '<span class="vjs-control-text">' + localizedText + '</span> ' + formattedTime; // label the duration time for screen reader users
        }
    };
    videojs.getComponent('RemainingTimeDisplay').prototype.updateContent = function updateContent() {
        if (this.player_.duration()) {
            var localizedText = this.localize('Remaining Time');
            var formattedTime = myCustomTimeFormat(this.player_.remainingTime());
            this.contentEl_.innerHTML = '<span class="vjs-control-text">' + localizedText + '</span> -' + formattedTime;
        }
    };
    videojs.getComponent('MouseTimeDisplay').prototype.update = function update(newTime, position) {
        var time = myCustomTimeFormat(newTime);
        this.el().style.left = position + 'px';
        this.el().setAttribute('data-current-time', time);
    };
    videojs.getComponent('SeekBar').prototype.updateARIAAttributes = function updateARIAAttributes() {
        // Allows for smooth scrubbing, when player can't keep up.
        var time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
        this.el_.setAttribute('aria-valuenow', (this.getPercent() * 100).toFixed(2)); // machine readable value of progress bar (percentage complete)
        this.el_.setAttribute('aria-valuetext', myCustomTimeFormat(time)); // human readable value of progress bar (time complete)
    };

myCustomTimeFormat - formats time value with frames segment.
This this is how it looks:

There must be a simplier way to override this in a single location (I have no access to _utilsFormatTimeJs2['default']).

[gkatsev]

formatTime is still public for usage. In previous versions, it was available for overriding purely as a coincidence. Doing this kind of overriding is generally not recommended either.
However, you bring up a good point, it totally makes sense to have a setTimeFormat on the function player to change the time format. This could either take a string or it could take a custom formatter function. Not certain which direction would be best. Taking a custom formatter function is probably easiest but not sure what would be best yet.

[adamtal3]

Taking a function will definitely work better than taking a string for a few reasons:

• Replacing the formatTime function it-self with an override is much easier than implementing a string formatter.
• You can never know what format the user is going to need. For intance, in my case - the last segment is not milliseconds but frames that are calculated by a frame rate defined in my app which the user can change. Someone else might want to show the time around a certain point in the video (T+1:02, T-0:01) or something similar. There is no need to limit the users.
• It can be backward compatible (allow the user to just override the videojs.formatTime and overrides from 4.x will continue working).

I also think that the simpliest (might not be the cleverest) solution is to keep this change to format-time.js only (so we don't have to change 6 different places in the core code), And the simpliest way of doing that is to check at the start of the formatTime funciton for an override:

    if (typeof videojs.formatTime)
        return videojs.formatTime.apply(this, arguments); 

If you agree with this simple solution I can do it, test it and make a PR.

[ultamatt]

I fully agree with @adamtal3 here and support him in making a solution with PR. I'm working on this use condition right now.

[cedricve]

Any update on this?

[petergeneric]

Also interested in this! Anyone working on it?

[halibegic]

Any update?

[misteroneill]

There are no updates. If someone wants to take on this issue and open a PR, that would be very helpful!

[twosmalltrees]

Thoughts on the changes above? If it looks like a good solution to you I'll add some tests and open a PR.

[gkatsev]

Thanks to @twosmalltrees, we should have the solution for this in the next minor release.