MusicFrontend/src/components/items/playlistHistory.vue

<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 }"
                >
                    ??? - ???
                </p>
                <p v-else-if="track.Soundtrack !== ''" :class="{ activeTrack: track.CurrentlyPlaying }">
                    {{ track.SongNo + 1 }}. {{ track.Soundtrack }} -
                    {{ displayTrack(track.Song) }}
                </p>
                <span v-if="currentlyLoadingTrack === track.SongNo" class="loadingTrack">
               -- Loading --
            </span>
            </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) {
            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>

/* Scroll */

.playlistHistory::-webkit-scrollbar {
    width: 17px;
}
.playlistHistory {
    scrollbar-color: #4f5253c2;
}
.playlistHistory::-webkit-scrollbar-track {
    background: #393c4179;
    border-radius: 5px;
}
.playlistHistory::-webkit-scrollbar-thumb {
    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;
}

.playlistHistoryTitle {
    display: flex;
    background-color: #333;
    height: 5vh;
    justify-content: center;
    align-items: center;
}
.playlistHistoryTitle img {
    display: none;
}
.playlistHistory {
    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;
}
.playlistHistory .track:nth-child(even) {
    background-color: #4e4e4e;
}
.playlistHistory .activeTrack {
    color: yellow;
}
.loadingTrack {
    color: #ff9c00;
    margin-left: 20px;
}

@media only screen and (max-width: 1000px) {
    .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;
    }
}
</style>