playlist

frontend/components/playlist/Song.vue

@@ -1,12 +1,17 @@
 <template>
   <div class="song-container">
-    <div class="song-voteable-container" @click="clickedSong" @contextmenu="$emit('contextmenu', $event, id)">
+    <div
+      class="song-voteable-container"
+      @click="clickedSong"
+      @contextmenu="$emit('contextmenu', $event, id)"
+    >
       <div class="song-thumbnail">
         <img :src="thumbnail" :alt="title" />
+        <span class="song-duration">{{ durationInString }}</span>
       </div>
       <div class="song-info">
         <div class="song-title">{{ title }}</div>
-        <div class="song-votes">{{ votes }} vote{{votes > 1 ? "s" : null }}</div>
+        <div class="song-votes">{{ votes }} vote{{votes > 1 || votes == 0 ? "s" : null }}</div>
       </div>
     </div>
   </div>
@@ -41,8 +46,12 @@ export default {
       type: String
     },
     type: {
-        required: true,
-        type: String
+      required: true,
+      type: String
+    },
+    duration: {
+      required: true,
+      type: Number
     }
   },
   data() {
@@ -52,11 +61,20 @@ export default {
       mouseY: 0
     };
   },
+  computed: {
+    durationInString: function() {
+      let time = this.duration;
+      let minutes = Math.floor(time / 60);
+      time = time - minutes * 60;
+      let minutesString = (minutes + "").padStart(2, "0");
+      let secondString = (time + "").padStart(2, "0");
+      return `${minutesString}:${secondString}`;
+    }
+  },
   methods: {
     clickedSong: function() {
       console.log("Clicked on song with info", this.title, this.id);
-    },
-
+    }
   }
 };
 </script>
@@ -65,19 +83,38 @@ export default {
 .song-container {
   display: flex;
   flex-direction: row;
+  color: white;
 
   .song-voteable-container {
     width: 75%;
     display: flex;
 
+    & .song-votes {
+        color: lightgrey;
+    }
+
     & .song-thumbnail {
       width: 25%;
+      position: relative;
 
       & img {
         width: 100%;
+        height: 100%;
         border-top-left-radius: 7.5px;
         border-bottom-left-radius: 7.5px;
       }
+
+      & .song-duration {
+        position: absolute;
+        bottom: 5px;
+        left: 0px;
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+        border-bottom-left-radius: 5px;
+        padding: 0 5px;
+        background: #000000A0;
+        color:white;
+      }
     }
 
     & .song-info {