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