Convert seconds to Hours:Minutes:Seconds in HabPanel?

Hi All

The following displays the duration of a movie, it displays the seconds fine but wont display in the correct format.

Clearly ive got something wrong in my code? Can someone please suggest a fix?

         <div class="music">
                <div class="cover" style="width:175px; height:175px; float:none; margin-left: auto"
                     ng-style="{'background-image': 'url(' + itemValue('myKodi_fanart') + ')'}"></div>
                <div class="playback" style="width:50%; float:none">
                    <div class="playbackTime">{{itemValue('myKodi_currenttime')}}
                    </div>
                    <div class="playbackBar">
                        <div class="playbackBarDone"
                             ng-style="{'width': itemValue('myKodi_currenttime')}"></div>
                    </div>
                    <div class="playbackTime">{{itemValue('myKodi_duration')}}
                    </div>
                

Thank you

What happens when you use the Angular timedate formatting? I’m not sure this will do the conversion you may need to add a filter to do the conversion.

Try something like this…

&lt;div class="playbackTime"&gt;{{itemValue('myKodi_duration')| date:'HH:mm:ss'}}

Reference information here…

https://docs.angularjs.org/api/ng/filter/date

No joy im afraid. I tried it before as the spotify widget used this.

I was afraid that might be the case. Take a look at the filter proposed here:

Good Luck.

Thanks, i can give that a go. Where would that JS code go?

app.filter('secondsToDateTime', function() {
    return function(seconds) {
        var d = new Date(0,0,0,0,0,0,0);
        d.setSeconds(seconds);
        return d;
    };
});
<b>{{seconds | secondsToDateTime | date:'HH:mm:ss'}}</b>

Hi @dastrix80,

Have you managed to figure out where to put the function code?
I actually want to implement the same thing in my habpanel :slight_smile:

Yes, you need to write a custom java script.

Here is the script I had written, call this in your widget with this:

<div oc-lazy-load="['/static/time.js']">

(function () {

  'use strict';
  angular
    .module('app', [])
    .controller('ngclickCtrl', ['$scope', function ($scope) {

      $scope.clkcount = 0;
      $scope.getdetails = function (timeSec) {
        if(timeSec){
        console.log("i am here, got time - " + timeSec);
        // $scope.clkcount = cntr + 1;
        var date = new Date(null);
        var length = timeSec.length - 2;
        var seconds = +timeSec.substr(0,length);
        console.log("Time without Seconds suffix - " + seconds);
        date.setSeconds(seconds);
        var result = date.toISOString().substr(11, 8);
        console.log("Converted Time  - " + result);
        return result;
        } else
        return 0;
      }
    }]);
})();

Perfect! With a few modifications I got it to work :slight_smile:
Thanks!

1 Like

Hey there,
I’m just coding a kodi widget for myself and after a looong while I figured out an easier way to convert the duration time.

{{((itemValue('mykodi_duration').split(' ')[0])*1000) | date:'HH:mm:ss':'UTC'}}

It splits off the unit " s" and multiplies it to milliseconds. Now the date function can work with it. In my case it was important to tell date the timezone (UTC) because the default (localtime) adds an hour here in Germany.

I’m not sure if all the brackets are needed or if it’s elegant but it works.