Added reload button in favorites tab

This commit is contained in:
RemixDev 2020-06-10 18:45:59 +02:00
parent a0204c4953
commit 9cdad5d13d
7 changed files with 29796 additions and 9 deletions

File diff suppressed because one or more lines are too long

1
public/css/style.css.map Normal file

File diff suppressed because one or more lines are too long

View File

@ -472,7 +472,11 @@ <h1>Favorites</h1>
<button class="favorites_tablinks" id="favorites_album_tab">Albums</button>
<button class="favorites_tablinks" id="favorites_artist_tab">Artists</button>
<button class="favorites_tablinks" id="favorites_track_tab">Tracks</button>
<div @click="reloadTabs" role="button" aria-label="reload" ref="reloadButton" class="right clickable reload-button">
<i class="material-icons">sync</i>
</div>
</div>
<div id="playlist_favorites" class="favorites_tabcontent">
<div v-if="playlists.length == 0">
<h1>No Playlists found</h1>

File diff suppressed because one or more lines are too long

1
public/js/bundle.js.map Normal file

File diff suppressed because one or more lines are too long

View File

@ -47,18 +47,27 @@ const FavoritesTab = new Vue({
updated_userTracks(data) {
this.tracks = data
},
initFavorites(data) {
reloadTabs(){
this.$refs.reloadButton.classList.add("spin")
socket.emit('update_userFavorites')
if (localStorage.getItem('spotifyUser')) socket.emit('update_userSpotifyPlaylists', localStorage.getItem('spotifyUser'))
},
updated_userFavorites(data){
const { tracks, albums, artists, playlists } = data
this.tracks = tracks
this.albums = albums
this.artists = artists
this.playlists = playlists
this.$refs.reloadButton.classList.remove("spin")
},
initFavorites(data) {
this.updated_userFavorites(data)
document.getElementById('favorites_playlist_tab').click()
}
},
mounted() {
socket.on('init_favorites', this.initFavorites)
socket.on('updated_userFavorites', this.updated_userFavorites)
socket.on('updated_userSpotifyPlaylists', this.updated_userSpotifyPlaylists)
socket.on('updated_userPlaylists', this.updated_userPlaylists)
socket.on('updated_userAlbums', this.updated_userAlbums)

View File

@ -1,3 +1,27 @@
.favorites_tablinks.active {
color: var(--accent-text);
}
div.reload-button {
width: 36px;
height: 36px;
}
div.reload-button i{
padding: 6px;
}
div.reload-button.spin {
animation-name: spin;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}