Display playlist duration in card, removed too much color

front/src/components/common/Duration.vue

+<template>
+  <span>
+    <translate
+      v-if="durationData.hours > 0"
+      :translate-params="{minutes: durationData.minutes, hours: durationData.hours}">%{ hours }h %{ minutes } min</translate>
+    <translate
+      v-else
+      :translate-params="{minutes: durationData.minutes}">%{ minutes } min</translate>
+  </span>
+</template>
+<script>
+import {secondsToObject} from '@/filters'
+
+export default {
+  props: ['seconds'],
+  computed: {
+    durationData () {
+      return secondsToObject(this.seconds)
+    }
+  }
+}
+</script>

front/src/components/globals.js

@@ -12,6 +12,10 @@ import UserLink from '@/components/common/UserLink'
 
 Vue.component('user-link', UserLink)
 
+import Duration from '@/components/common/Duration'
+
+Vue.component('duration', Duration)
+
 import DangerousButton from '@/components/common/DangerousButton'
 
 Vue.component('dangerous-button', DangerousButton)

front/src/components/playlists/Card.vue

@@ -12,6 +12,9 @@
       <div class="meta">
         <human-date :date="playlist.modification_date" />
       </div>
+      <div class="meta">
+        <duration :seconds="playlist.duration" />
+      </div>
     </div>
     <div class="extra content">
       <user-link :user="playlist.user" class="left floated" />
@@ -30,7 +33,6 @@
 
 <script>
 import PlayButton from '@/components/audio/PlayButton'
-import {hashCode, intToRGB} from '@/utils/color'
 
 export default {
   props: ['playlist'],
@@ -44,11 +46,8 @@ export default {
         url = self.$store.getters['instance/absoluteUrl'](url)
         return `url("${url}")`
       }).slice(0, 4)
-      let bgColor = intToRGB(hashCode(this.playlist.name + this.playlist.user.username))
-
       return {
-        'background-image': urls.join(', '),
-        'background-color': `#${bgColor}`
+        'background-image': urls.join(', ')
       }
     }
   }
@@ -59,6 +58,7 @@ export default {
 <style scoped>
 
 .attached.button {
+  background-color: rgb(243, 244, 245);
   background-size: 25% ;
   background-repeat: no-repeat;
   background-origin: border-box;

front/src/filters.js

@@ -28,6 +28,16 @@ export function ago (date) {
 
 Vue.filter('ago', ago)
 
+export function secondsToObject (seconds) {
+  let m = moment.duration(seconds, 'seconds')
+  return {
+    minutes: m.minutes(),
+    hours: parseInt(m.asHours())
+  }
+}
+
+Vue.filter('secondsToObject', secondsToObject)
+
 export function momentFormat (date, format) {
   format = format || 'lll'
   return moment(date).format(format)

front/src/views/playlists/Detail.vue

@@ -9,14 +9,15 @@
           <i class="circular inverted list yellow icon"></i>
           <div class="content">
             {{ playlist.name }}
+            <div class="sub header">
               <translate
-              tag="div"
-              class="sub header"
                 translate-plural="Playlist containing %{ count } tracks, by %{ username }"
                 :translate-n="playlistTracks.length"
                 :translate-params="{count: playlistTracks.length, username: playlist.user.username}">
                 Playlist containing %{ count } track, by %{ username }
-            </translate>
+              </translate><br>
+              <duration :seconds="playlist.duration" />
+            </div>
           </div>
         </h2>
         <div class="ui hidden divider"></div>