playlist

frontend/components/playlist/ContextMenu.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="context-menu-container" :style="'top:' + mouseY + 'px;left:' + mouseX + 'px;'">
     <ul>
-      <li>Copy link</li>
+      <li @click="copyLink">Copy link</li>
-      <li>Find similar</li>
+      <li @click="findSimilar">Find similar</li>
-      <li>Added by {{ addedBy }}</li>
+      <li class="addedBy">Added by {{ addedBy }}</li>
       <hr />
-      <li>Delete</li>
+      <li @click="deleteSong" :disabled="loggedIn">Delete</li>
     </ul>
     <div class="context-menu-background" @mouseout="closeSelf" @click="closeSelf"></div>
   </div>
@@ -35,6 +35,11 @@ export default {
       type: Number
     }
   },
+  computed: {
+    loggedIn: function() {
+        return false;
+    }  
+  },
   methods: {
     closeSelf: function(e) {
       if (e.toElement == null || e.toElement.nodeName == null) {
@@ -44,6 +49,15 @@ export default {
         return;
       }
       this.$emit("closeContextMenu");
+    },
+    copyLink: function() {
+      console.log("copy link of", this.id);
+    },
+    findSimilar: function() {
+      console.log("find similar of", this.id);
+    },
+    deleteSong: function() {
+      console.log("delete song of", this.id);
     }
   }
 };
@@ -81,9 +95,13 @@ export default {
       cursor: pointer;
       padding: 5px 15px;
 
-      &:hover {
+      &:hover:not(.addedBy) {
         background-color: #ffffff15;
       }
+
+      &.addedBy {
+          cursor: initial;
+      }
     }
 
     & hr {

frontend/components/playlist/Playlist.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="playlist-conatiner">
-    <div class="song-container" v-for="(song, i) in paginatedList" :key="i">
+    <div class="playlist-element" v-for="(song, i) in paginatedList" :key="i">
       <Song
         class="song"
         :title="song.title"
@@ -9,9 +9,10 @@
         :addedBy="song.added_by"
         :id="song.id"
         :type="song.type"
+        :duration="song.duration"
         @contextmenu="moreInfo"
       />
-      <div class="song-context-button" @click="moreInfo($event, song.id)">more</div>
+      <div class="song-context-button" @click="moreInfo($event, song.id)">. . .</div>
     </div>
     <div class="pagination-buttons">
       <button @click="firstPage" :disabled="disabledPrev" class="first"><</button>
@@ -59,15 +60,19 @@ export default {
     }
   },
   async beforeMount() {
-    const request = await fetch("https://zoff.me/api/list/summér", {
+    try {
-      method: "POST"
+      const request = await fetch("https://zoff.me/api/list/summér", {
-    });
+        method: "POST"
-    const playlist = await request.json();
+      });
-    if (this.playlist.error == true) {
+      const playlist = await request.json();
-      console.error(this.playlist.error);
+      if (this.playlist.error == true) {
-      return;
+        console.error(this.playlist.error);
+        return;
+      }
+      this.playlist = playlist.results;
+    } catch (e) {
+      alert("TIMEOUT");
     }
-    this.playlist = playlist.results;
   },
   methods: {
     moreInfo: function(e, id) {
@@ -113,31 +118,63 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.song-container {
+.playlist-conatiner {
-  display: flex;
+  background-color: #2d2d2d;
-  flex-direction: row;
+  padding-top: 5px;
-  & .song {
+
-    width: 75%;
+  & .playlist-element {
-  }
-  & .song-context-button {
-    width: 25%;
     display: flex;
-    justify-content: center;
+    flex-direction: row;
-    align-items: center;
+    box-shadow: 0px 0px 2px #000000;
-  }
+    border-radius: 5px;
-}
+    background: #2d2d2d;
+    color: white;
+    margin: 5px 5px;
+    cursor: pointer;
 
-.pagination-buttons {
+    &:hover {
-  display: flex;
+      box-shadow: 0px 0px 3px #000000;
-  justify-content: space-between;
+    }
 
-  & button {
+    &:active {
-    width: 35%;
+      background: #000000;
-    height: 30px;
+    }
 
-    &.first,
+    & .song {
-    &.last {
+      width: 90%;
+    }
+    & .song-context-button {
       width: 10%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-left: 1px solid black;
+    }
+  }
+
+  .pagination-buttons {
+    display: flex;
+    justify-content: space-between;
+    color: white;
+    padding: 10px 0;
+
+    & span {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    & button {
+      width: 35%;
+      height: 30px;
+      background: transparent;
+      color: white;
+      border: none;
+
+      &.first,
+      &.last {
+        width: 10%;
+      }
     }
   }
 }

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,
+      required: true,
-        type: String
+      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 {

frontend/styles/normalize.scss

@@ -2,4 +2,5 @@
 body {
   margin: 0;
   padding: 0;
+  font-family: sans-serif;
 }

package-lock.json

@@ -13385,6 +13385,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuex": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.2.tgz",
+      "integrity": "sha512-ha3jNLJqNhhrAemDXcmMJMKf1Zu4sybMPr9KxJIuOpVcsDQlTBYLLladav2U+g1AvdYDG5Gs0xBTb0M5pXXYFQ=="
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

package.json

@@ -54,6 +54,7 @@
   },
   "homepage": "https://github.com/zoff-music/zoff#readme",
   "dependencies": {
+    "@babel/polyfill": "~7.2",
     "bad-words": "^1.6.5",
     "bcrypt-nodejs": "0.0.3",
     "body-parser": "^1.18.3",
@@ -66,6 +67,7 @@
     "express-handlebars": "^3.0.2",
     "express-recaptcha": "^3.0.1",
     "express-session": "^1.15.6",
+    "extract-text-webpack-plugin": "^3.0.2",
     "farmhash": "^3.0.0",
     "feature-policy": "^0.2.0",
     "gulp-clean-css": "^4.2.0",
@@ -88,9 +90,8 @@
     "socket.io-redis": "^5.2.0",
     "sticky-session": "^1.1.2",
     "uniqid": "5.0.3",
-    "@babel/polyfill": "~7.2",
-    "extract-text-webpack-plugin": "^3.0.2",
     "vue": "~2.6",
-    "vue-router": "~3.0"
+    "vue-router": "~3.0",
+    "vuex": "^3.1.2"
   }
 }