updated rollup plugin node-resolve; improved favorites refresh animation

This commit is contained in:
Roberto Tonino 2020-06-18 18:29:38 +02:00
parent 7682e85b87
commit 7484bf75cf
11 changed files with 79 additions and 53 deletions

26
package-lock.json generated
View File

@ -53,14 +53,16 @@
}
},
"@rollup/plugin-node-resolve": {
"version": "7.1.3",
"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz",
"integrity": "sha512-RxtSL3XmdTAE2byxekYLnx+98kEUOrPHF/KRVjLH+DEIHy6kjIw7YINQzn+NXiH/NTrQLAwYs0GWB+csWygA9Q==",
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-8.0.1.tgz",
"integrity": "sha512-KIeAmueDDaYMqMBnUngLVVZhURwxA12nq/YB6nGm5/JpVyOMwI1fCVU3oL/dAnnLBG7oiPXntO5LHOiMrfNXCA==",
"dev": true,
"requires": {
"@rollup/pluginutils": "^3.0.8",
"@types/resolve": "0.0.8",
"builtin-modules": "^3.1.0",
"deep-freeze": "^0.0.1",
"deepmerge": "^4.2.2",
"is-module": "^1.0.0",
"resolve": "^1.14.2"
}
@ -93,9 +95,9 @@
"dev": true
},
"@types/node": {
"version": "13.13.5",
"resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.5.tgz",
"integrity": "sha512-3ySmiBYJPqgjiHA7oEaIo2Rzz0HrOZ7yrNO5HWyaE5q0lQ3BppDZ3N53Miz8bw2I7gh1/zir2MGVZBvpb1zq9g==",
"version": "14.0.13",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.13.tgz",
"integrity": "sha512-rouEWBImiRaSJsVA+ITTFM6ZxibuAlTuNOCyxVbwreu6k6+ujs7DfnU9o+PShFhET78pMBl3eH+AGSI5eOTkPA==",
"dev": true
},
"@types/resolve": {
@ -236,6 +238,18 @@
"which": "^1.2.9"
}
},
"deep-freeze": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/deep-freeze/-/deep-freeze-0.0.1.tgz",
"integrity": "sha1-OgsABd4YZygZ39OM0x+RF5yJPoQ=",
"dev": true
},
"deepmerge": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
"integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
"dev": true
},
"define-properties": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",

View File

@ -25,7 +25,7 @@
"devDependencies": {
"@rollup/plugin-alias": "^3.1.0",
"@rollup/plugin-commonjs": "^11.0.2",
"@rollup/plugin-node-resolve": "^7.0.0",
"@rollup/plugin-node-resolve": "^8.0.1",
"@rollup/plugin-replace": "^2.3.2",
"npm-run-all": "^4.1.5",
"rimraf": "^3.0.2",

File diff suppressed because one or more lines are too long

View File

@ -466,16 +466,19 @@ <h2 class="page_heading">Charts</h2>
</div>
<div id="favorites_tab" class="main_tabcontent">
<h2 class="page_heading">Favorites</h2>
<h2 class="page_heading">
Favorites
<div @click="reloadTabs" class="clickable reload-button reload-button--inline" ref="reloadButton"
role="button" aria-label="reload">
<i class="material-icons">sync</i>
</div>
</h2>
<div class="section-tabs">
<div class="section-tabs__tab favorites_tablinks" id="favorites_playlist_tab">Playlists</div>
<div class="section-tabs__tab favorites_tablinks" id="favorites_album_tab">Albums</div>
<div class="section-tabs__tab favorites_tablinks" id="favorites_artist_tab">Artists</div>
<div class="section-tabs__tab favorites_tablinks" id="favorites_track_tab">Tracks</div>
<div @click="reloadTabs" class="right clickable reload-button" style="margin-left: auto;"
ref="reloadButton" role="button" aria-label="reload">
<i class="material-icons">sync</i>
</div>
</div>
<div id="playlist_favorites" class="favorites_tabcontent">

File diff suppressed because one or more lines are too long

View File

@ -146,11 +146,11 @@ socket.on('finishAddingArtist', function (data) {
})
socket.on('startConvertingSpotifyPlaylist', function (id) {
toast("Converting spotify tracks to deezer tracks", 'loading', false, 'spotifyplaylist_'+id)
toast('Converting spotify tracks to deezer tracks', 'loading', false, 'spotifyplaylist_' + id)
})
socket.on('finishConvertingSpotifyPlaylist', function (id) {
toast("Spotify playlist converted", 'done', true, 'spotifyplaylist_'+id)
toast('Spotify playlist converted', 'done', true, 'spotifyplaylist_' + id)
})
socket.on('errorMessage', function (error) {

View File

@ -5,6 +5,7 @@ import Downloads from '../downloads.js'
import QualityModal from '../quality-modal.js'
import TrackPreview from '../track-preview.js'
import Utils from '../utils.js'
import { toast } from '../toasts'
const FavoritesTab = new Vue({
data() {
@ -48,9 +49,10 @@ const FavoritesTab = new Vue({
this.tracks = data
},
reloadTabs() {
this.$refs.reloadButton.classList.add("spin")
this.$refs.reloadButton.classList.add('spin')
socket.emit('update_userFavorites')
if (localStorage.getItem('spotifyUser')) socket.emit('update_userSpotifyPlaylists', localStorage.getItem('spotifyUser'))
if (localStorage.getItem('spotifyUser'))
socket.emit('update_userSpotifyPlaylists', localStorage.getItem('spotifyUser'))
},
updated_userFavorites(data) {
const { tracks, albums, artists, playlists } = data
@ -58,7 +60,17 @@ const FavoritesTab = new Vue({
this.albums = albums
this.artists = artists
this.playlists = playlists
this.$refs.reloadButton.classList.remove("spin")
// Removing animation class only when the animation has completed an iteration
// Prevents animation ugly stutter
this.$refs.reloadButton.addEventListener(
'animationiteration',
() => {
this.$refs.reloadButton.classList.remove('spin')
toast('Refresh completed!', 'done', true, 'favorites-refresh-toast')
},
{ once: true }
)
},
initFavorites(data) {
this.updated_userFavorites(data)

View File

@ -0,0 +1,9 @@
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

View File

@ -1,6 +1,7 @@
@import './base/base';
@import './base/normalize';
@import './base/mixins';
@import './base/animations';
@import './globals/globals';
@import './globals/tables';

View File

@ -2,26 +2,14 @@
color: var(--accent-text);
}
div.reload-button {
width: 36px;
height: 36px;
}
div.reload-button i{
padding: 6px;
.reload-button {
&.reload-button--inline {
display: inline-block;
}
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);
&.spin {
i {
animation: spin 500ms infinite ease-out reverse;
}
}
}

View File

@ -9,7 +9,7 @@
}
.tab button {
background-color: var(--primary-background);
background-color: var(--main-background);
color: var(--foreground);
}
@ -42,8 +42,7 @@
&__tab {
flex: 1;
font-size: 1.2rem;
// width: 10rem;
padding: 1em;
padding: .8em;
border-top: 3px solid var(--foreground);
text-align: center;