updated rollup plugin node-resolve; improved favorites refresh animation

package-lock.json

@@ -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",

package.json

@@ -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",

public/index.html

@@ -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">

src/js/app.js

@@ -60,11 +60,11 @@ socket.on('logging_in', function () {
 socket.on('init_autologin', function () {
 	let arl = localStorage.getItem('arl')
 	let accountNum = localStorage.getItem('accountNum')
-	if (arl){
+	if (arl) {
 		arl = arl.trim()
-		if (accountNum != 0){
+		if (accountNum != 0) {
 			socket.emit('login', arl, true, accountNum)
-		}else{
+		} else {
 			socket.emit('login', arl)
 		}
 	}
@@ -130,27 +130,27 @@ socket.on('logged_out', function () {
 })
 
 socket.on('cancellingCurrentItem', function (uuid) {
-	toast('Cancelling current item.', 'loading', false, 'cancelling_'+uuid)
+	toast('Cancelling current item.', 'loading', false, 'cancelling_' + uuid)
 })
 
 socket.on('currentItemCancelled', function (uuid) {
-	toast('Current item cancelled.', 'done', true, 'cancelling_'+uuid)
+	toast('Current item cancelled.', 'done', true, 'cancelling_' + uuid)
 })
 
 socket.on('startAddingArtist', function (data) {
-	toast(`Adding ${data.name} albums to queue`, 'loading', false, 'artist_'+data.id)
+	toast(`Adding ${data.name} albums to queue`, 'loading', false, 'artist_' + data.id)
 })
 
 socket.on('finishAddingArtist', function (data) {
-	toast(`Added ${data.name} albums to queue`, 'done', true, 'artist_'+data.id)
+	toast(`Added ${data.name} albums to queue`, 'done', true, 'artist_' + data.id)
 })
 
 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) {

src/js/modules/components/favorites-tab.js

@@ -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() {
@@ -47,18 +48,29 @@ const FavoritesTab = new Vue({
 		updated_userTracks(data) {
 			this.tracks = data
 		},
-		reloadTabs(){
-			this.$refs.reloadButton.classList.add("spin")
+		reloadTabs() {
+			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){
+		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")
+
+			// 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)

src/styles/scss/base/_animations.scss

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

src/styles/scss/style.scss

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

src/styles/scss/tabs/_favorites-tab.scss

@@ -2,26 +2,14 @@
 	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);
+.reload-button {
+	&.reload-button--inline {
+		display: inline-block;
+	}
+
+	&.spin {
+		i {
+			animation: spin 500ms infinite ease-out reverse;
 		}
-    to {
-        transform:rotate(360deg);
 	}
 }

src/styles/scss/tabs/_tabs.scss

@@ -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;