Convert seconds to Hours:Minutes:Seconds in HabPanel?

Apps & Services HABPanel
1

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

2

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

3

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

4

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

Good Luck.

5

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>
6

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:

7

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;
      }
    }]);
})();
8

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

1 Like