evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added reload button in favorites tab

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1544
public/css/style.css
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

6
public/index.html
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_album_tab">Albums</button>
<button class="favorites_tablinks" id="favorites_artist_tab">Artists</button> <button class="favorites_tablinks" id="favorites_artist_tab">Artists</button>
<button class="favorites_tablinks" id="favorites_track_tab">Tracks</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>
<div id="playlist_favorites" class="favorites_tabcontent"> <div id="playlist_favorites" class="favorites_tabcontent">
<div v-if="playlists.length == 0"> <div v-if="playlists.length == 0">
<h1>No Playlists found</h1> <h1>No Playlists found</h1>
@ -1415,4 +1419,4 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
<script src="/public/js/bundle.js"></script> <script src="/public/js/bundle.js"></script>
</html> </html>

28216
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

13
src/js/modules/components/favorites-tab.js
View File

@ -47,18 +47,27 @@ const FavoritesTab = new Vue({
updated_userTracks(data) { updated_userTracks(data) {
this.tracks = 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 const { tracks, albums, artists, playlists } = data
this.tracks = tracks this.tracks = tracks
this.albums = albums this.albums = albums
this.artists = artists this.artists = artists
this.playlists = playlists this.playlists = playlists
this.$refs.reloadButton.classList.remove("spin")
},
initFavorites(data) {
this.updated_userFavorites(data)
document.getElementById('favorites_playlist_tab').click() document.getElementById('favorites_playlist_tab').click()
} }
}, },
mounted() { mounted() {
socket.on('init_favorites', this.initFavorites) socket.on('init_favorites', this.initFavorites)
socket.on('updated_userFavorites', this.updated_userFavorites)
socket.on('updated_userSpotifyPlaylists', this.updated_userSpotifyPlaylists) socket.on('updated_userSpotifyPlaylists', this.updated_userSpotifyPlaylists)
socket.on('updated_userPlaylists', this.updated_userPlaylists) socket.on('updated_userPlaylists', this.updated_userPlaylists)
socket.on('updated_userAlbums', this.updated_userAlbums) socket.on('updated_userAlbums', this.updated_userAlbums)

24
src/styles/scss/tabs/_favorites-tab.scss
View File

@ -1,3 +1,27 @@
.favorites_tablinks.active { .favorites_tablinks.active {
color: var(--accent-text); 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);
}
}