Fixed numbers in playlist

cmd/frontend/src/components/items/playlistHistory.vue

@@ -1,216 +1,191 @@
 <template>
-   <div class="playlistHistoryDiv">
-      <div @click="toggleDisplay" class="playlistHistoryTitle">
-         <h1>Playlist history</h1>
-         <img v-if="display" src="keyboard_arrow_up-black-36dp.svg" alt="" />
-         <img v-else src="keyboard_arrow_down-black-36dp.svg" alt="" />
-      </div>
-      <transition-group
-         tag="div"
-         v-if="display"
-         name="playlistHistory"
-         class="playlistHistory"
-         ref="playlistHistory"
-      >
-         <div
-            class="track"
-            v-for="track in playlistHistory"
-            :key="track.SongNo"
-            @click="playSelectedTrack(track, $event)"
-         >
-            <p
-               v-if="checkIfHidden(track, playlistHistory)"
-               :class="{ activeTrack: track.CurrentlyPlaying }"
+    <div class="playlistHistoryDiv">
+        <div @click="toggleDisplay" class="playlistHistoryTitle">
+            <h1>Playlist history</h1>
+            <img v-if="display" src="keyboard_arrow_up-black-36dp.svg" alt="" />
+            <img v-else src="keyboard_arrow_down-black-36dp.svg" alt="" />
+        </div>
+        <transition-group
+            tag="div"
+            v-if="display"
+            name="playlistHistory"
+            class="playlistHistory"
+            ref="playlistHistory"
+        >
+            <div
+                class="track"
+                v-for="track in playlistHistory"
+                :key="track.SongNo"
+                @click="playSelectedTrack(track, $event)"
             >
-               ??? - ???
-            </p>
-            <p v-else-if="track.Game != ''" :class="{ activeTrack: track.CurrentlyPlaying }">
-               {{ track.SongNo }}. {{ track.Game }} -
-               {{ displayTrack(track.Song) }}
-            </p>
-            <span v-if="currentlyLoadingTrack === track.SongNo" class="loadingTrack">
+                <p
+                    v-if="checkIfHidden(track, playlistHistory)"
+                    :class="{ activeTrack: track.CurrentlyPlaying }"
+                >
+                    ??? - ???
+                </p>
+                <p v-else-if="track.Game !== ''" :class="{ activeTrack: track.CurrentlyPlaying }">
+                    {{ track.SongNo + 1 }}. {{ track.Game }} -
+                    {{ displayTrack(track.Song) }}
+                </p>
+                <span v-if="currentlyLoadingTrack === track.SongNo" class="loadingTrack">
                -- Loading --
             </span>
-         </div>
-      </transition-group>
-   </div>
+            </div>
+        </transition-group>
+    </div>
 </template>
 
 <script>
 import { mapState } from "vuex";
 export default {
-   data() {
-      return {
-         display: true,
-      };
-   },
-   computed: {
-      ...mapState(["playlistHistory", "currentTrackHidden", "currentlyLoadingTrack"]),
-   },
-   methods: {
-      checkIfHidden(track, playlistHistory) {
-         if (track.SongNo == playlistHistory.length - 1 && this.currentTrackHidden) {
-            return true;
-         } else {
-            false;
-         }
-      },
-      checkIfLoading() {
-         return true;
-      },
-      displayTrack(trackName) {
-         /* Todo: Is this if-check necessary? */
-         if (trackName === undefined) {
-            return "";
-         } else {
-            return trackName.replace(".mp3", "");
-         }
-      },
-      playSelectedTrack(track, event) {
-         console.log(event.path);
-         this.$store.dispatch("setCurrentlyLoadingTrack", track.SongNo);
-         this.$emit("play-selected-track", track);
-      },
-      scrollToBottom() {
-         if (this.display) {
-            this.$nextTick(() => {
-               this.$refs.playlistHistory.$el.scrollTop = this.$refs.playlistHistory.$el.scrollHeight;
-            });
-         }
-      },
-      toggleDisplay() {
-         if (window.innerWidth < 600) {
-            this.display = !this.display;
-         }
-      },
-   },
-   created() {
-      if (window.innerWidth < 600) {
-         this.display = false;
-      }
-   },
+    data() {
+        return {
+            display: true,
+        };
+    },
+    computed: {
+        ...mapState(["playlistHistory", "currentTrackHidden", "currentlyLoadingTrack"]),
+    },
+    methods: {
+        checkIfHidden(track, playlistHistory) {
+            return track.SongNo === playlistHistory.length - 1 && this.currentTrackHidden;
+        },
+        displayTrack(trackName) {
+            /* Todo: Is this if-check necessary? */
+            if (trackName === undefined) {
+                return "";
+            } else {
+                return trackName.replace(".mp3", "");
+            }
+        },
+        playSelectedTrack(track, event) {
+            console.log(event.path);
+            this.$store.dispatch("setCurrentlyLoadingTrack", track.SongNo);
+            this.$emit("play-selected-track", track);
+        },
+        scrollToBottom() {
+            if (this.display) {
+                this.$nextTick(() => {
+                    this.$refs.playlistHistory.$el.scrollTop = this.$refs.playlistHistory.$el.scrollHeight;
+                });
+            }
+        },
+        toggleDisplay() {
+            if (window.innerWidth < 600) {
+                this.display = !this.display;
+            }
+        },
+    },
+    created() {
+        if (window.innerWidth < 600) {
+            this.display = false;
+        }
+    },
 };
 </script>
 
 <style scoped>
-.playlistHistory-enter-from {
-   opacity: 0;
-}
-.playlistHistory-enter-to {
-   opacity: 1;
-}
-.playlistHistory-enter-active {
-   transition: all 0.5s ease-out;
-}
-.playlistHistory-move {
-   transition: 0.25s;
-   transition-property: transform, opacity;
-}
-/* End of Animation block */
 
 /* Scroll */
 
 .playlistHistory::-webkit-scrollbar {
-   width: 17px;
+    width: 17px;
 }
 .playlistHistory {
-   scrollbar-color: #4f5253c2;
+    scrollbar-color: #4f5253c2;
 }
 .playlistHistory::-webkit-scrollbar-track {
-   background: #393c4179;
-   border-radius: 5px;
+    background: #393c4179;
+    border-radius: 5px;
 }
 .playlistHistory::-webkit-scrollbar-thumb {
-   background-color: #6d7679c2;
-   border-radius: 5px;
-   border: 2px solid #3c434e79;
+    background-color: #6d7679c2;
+    border-radius: 5px;
+    border: 2px solid #3c434e79;
 }
 
 /* End of Scroll */
 
 .playlistHistoryDiv {
-   display: inline-block;
-   width: 60vw;
-   color: white;
-   margin-right: 0.5vw;
+    display: inline-block;
+    width: 60vw;
+    color: white;
+    margin-right: 0.5vw;
 }
 
 .playlistHistoryTitle {
-   display: flex;
-   background-color: #333;
-   height: 5vh;
-   justify-content: center;
-   align-items: center;
+    display: flex;
+    background-color: #333;
+    height: 5vh;
+    justify-content: center;
+    align-items: center;
 }
 .playlistHistoryTitle img {
-   display: none;
+    display: none;
 }
 .playlistHistory {
-   background-color: rgb(66, 66, 66);
-   width: 60vw;
-   height: 37vh;
-   overflow-x: hidden;
-   overflow-y: scroll;
+    background-color: rgb(66, 66, 66);
+    width: 60vw;
+    height: 37vh;
+    overflow-x: hidden;
+    overflow-y: scroll;
 }
 .playlistHistory .track {
-   display: flex;
-   flex-wrap: nowrap;
-   justify-content: flex-start;
-   width: 57vw;
-   height: auto;
-   min-height: 30px;
-   line-height: 1.5;
-   font-size: 1.1rem;
-   align-items: center;
-   padding: 0.3vh 0.6vh;
-   cursor: pointer;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    width: 57vw;
+    height: auto;
+    min-height: 30px;
+    line-height: 1.5;
+    font-size: 1.1rem;
+    align-items: center;
+    padding: 0.3vh 0.6vh;
+    cursor: pointer;
 }
 .playlistHistory .track:nth-child(even) {
-   background-color: #4e4e4e;
+    background-color: #4e4e4e;
 }
 .playlistHistory .activeTrack {
-   color: yellow;
-}
-.tracklistEmptyDiv {
-   cursor: default;
+    color: yellow;
 }
 .loadingTrack {
-   color: #ff9c00;
-   margin-left: 20px;
+    color: #ff9c00;
+    margin-left: 20px;
 }
 
 @media only screen and (max-width: 1000px) {
-   .playlistHistory::-webkit-scrollbar {
-      width: 5px;
-   }
-   .playlistHistoryDiv {
-      width: 100%;
-      margin: 0;
-      margin-bottom: 0.3vw;
-   }
+    .playlistHistory::-webkit-scrollbar {
+        width: 5px;
+    }
+    .playlistHistoryDiv {
+        width: 100%;
+        margin: 0 0 0.3vw;
+    }
 
-   .playlistHistoryTitle {
-      height: 10vw;
-      font-size: 0.8rem;
-   }
-   .playlistHistoryTitle img {
-      display: block;
-      position: absolute;
-      max-height: 100%;
-      left: 0;
-      filter: invert(77%) sepia(8%) saturate(6%) hue-rotate(317deg) brightness(95%) contrast(87%);
-   }
-   .playlistHistory {
-      width: 100vw;
-      height: 56vw;
-   }
-   .playlistHistory .track {
-      width: 98vw;
-      font-size: 0.8rem;
-      padding: 1.5vw 1vw;
-   }
-   .loadingTrack {
-      display: none;
-   }
+    .playlistHistoryTitle {
+        height: 10vw;
+        font-size: 0.8rem;
+    }
+    .playlistHistoryTitle img {
+        display: block;
+        position: absolute;
+        max-height: 100%;
+        left: 0;
+        filter: invert(77%) sepia(8%) saturate(6%) hue-rotate(317deg) brightness(95%) contrast(87%);
+    }
+    .playlistHistory {
+        width: 100vw;
+        height: 56vw;
+    }
+    .playlistHistory .track {
+        width: 98vw;
+        font-size: 0.8rem;
+        padding: 1.5vw 1vw;
+    }
+    .loadingTrack {
+        display: none;
+    }
 }
 </style>