Localize "duration" or "time remaining" from milliseconds

Question

Let me preface this by saying that I have a "working" solution, taken in part from this previous thread:

How to convert time milliseconds to hours, min, sec format in JavaScript?

My goal is to take a time duration in milliseconds and convert it to human-readable, using localization/internationalization technologies. The input value is in milliseconds and is a moving target because it is an ETA (estimated time of arrival) rather than a firm time of arrival. It is constantly recalculated.

What I came up with works. What I am looking for is something that might leverage momentjs (because it has a localization system already). It doesn't have to be momentjs in particular, but I want something that has more elegant options, particularly when it comes to localization. I also use and therefore have access to anything provided by i18next.

Here's a reduced version of the current solution (it's inside an object literal of utility functions):

function duration (millis) {
  // in actual code, a function "i18n.t(key)" would return a properly
  // localized string. Instead, I'll just store English strings in an object
  var mockTranslation = {
    hoursLabel: "hr",
    minutesLabel: "min",
    secondsLabel: "s"
  }

  millis = parseInt(millis);

  function msToTime(duration) {
    var milliseconds = parseInt((duration%1000)/100)
        , seconds = parseInt((duration/1000)%60)
        , minutes = parseInt((duration/(1000*60))%60)
        , hours = parseInt((duration/(1000*60*60))%24);

    hours = (hours < 10) ? "0" + hours : hours;
    minutes = (minutes < 10) ? "0" + minutes : minutes;
    seconds = (seconds < 10) ? "0" + seconds : seconds;

    return {
      hours : hours,
      minutes: minutes,
      seconds: seconds,
      milliseconds: milliseconds
    }
  }
  var converted = msToTime(millis);
  var final = "" + converted.hours + " " + mockTranslation.hoursLabel
          + " " + converted.minutes +  " " + mockTranslation.minutesLabel
          + " " + converted.seconds + " " + mockTranslation.secondsLabel;
  return final;
}

// test with a sample input of 416000 ms.
console.log(duration(416000)); // 00 hr 06 min 56 s

In this case I take a similar approach as the original thread, but I return a usable object instead of automatically converting to a string. In my real-world code I have some other conditionals I pass through and some options that will return a value that's not localized. But here we see that I take the object and concatenate it with some language entries provided by i18next. That's where the localization happens.

Yet it seems to me that time durations have more to them than swapping in units of measurement.

Using momentjs seems like overkill, but despite that, I just don't see any duration functions. All date-related functions.

Since I feel that my solution isn't very flexible and that localization is somewhat second-class, does anybody know of a better approach?

Answer 1

There is a possibility to display duration in milliseconds using moment.js in human readable way:

moment.duration(416000).humanize();

The above code returns: 7 minutes. Is it what you need?

Of course you can use i18n from moment.js. You just need to call:

moment.locale('es');
moment.duration(416000).humanize();

to get duration in Spanish localization (7 minutos).

If you need more detailed result (6 minutes 56 seconds) take a look at this library: https://github.com/EvanHahn/HumanizeDuration.js