Added duration to songs

public/css/style.css

@@ -17,6 +17,16 @@
   flex-direction: column;
 }
 
+.card-duration{
+  border-top-left-radius: 4px;
+  position: absolute;
+  bottom: 0px;
+  right: 0px;
+  background: rgba(0,0,0,.7);
+  color: white;
+  padding: 0 5px;
+}
+
 .width25{
   width: 25% !important;
 }

public/js/helpers.js

@@ -154,6 +154,13 @@ var Helper = {
       return Math.floor(Math.random() * (max - min)) + min;
     },
 
+    secondsToOther: function(seconds){
+        var time = seconds;
+        var minutes = Math.floor(time/60);
+        time = time - (minutes * 60);
+        return [minutes, time];
+    },
+
     rgbToHsl: function(arr, light){
     	r = arr[0];
         g = arr[1];

public/js/list.js

@@ -843,6 +843,9 @@ var List = {
             }
             attr     = ".vote-container";
             del_attr = "del";
+
+            var _temp_duration = Helper.secondsToOther(_song_info.duration);
+            song.find(".card-duration").text(Helper.pad(_temp_duration[0]) + ":" + Helper.pad(_temp_duration[1]));
         }else if(!list){
             song.find(".vote-text").text(_song_info.duration);
 

public/php/channel.php

@@ -216,7 +216,11 @@
                         <div id="list-song" class="card left-align list-song">
                             <div class="clickable vote-container" title="Vote!">
                                 <a class="clickable center-align votebg">
-                                    <span class="lazy card-image cardbg list-image" style="background-image:url('/public/images/loading.png');"></span>
+                                    <span class="lazy card-image cardbg list-image" style="background-image:url('/public/images/loading.png');">
+                                      <span class="card-duration">
+                                        01:00
+                                      </span>
+                                    </span>
                                 </a>
                                 <span class="card-content">
                                     <span class="flow-text truncate list-title"></span>