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

View File

@ -25,7 +25,7 @@
"devDependencies": { "devDependencies": {
"@rollup/plugin-alias": "^3.1.0", "@rollup/plugin-alias": "^3.1.0",
"@rollup/plugin-commonjs": "^11.0.2", "@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", "@rollup/plugin-replace": "^2.3.2",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"rimraf": "^3.0.2", "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>
<div id="favorites_tab" class="main_tabcontent"> <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">
<div class="section-tabs__tab favorites_tablinks" id="favorites_playlist_tab">Playlists</div> <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_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_artist_tab">Artists</div>
<div class="section-tabs__tab favorites_tablinks" id="favorites_track_tab">Tracks</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>
<div id="playlist_favorites" class="favorites_tabcontent"> <div id="playlist_favorites" class="favorites_tabcontent">
@ -1473,4 +1476,4 @@ <h1>Errors for {{ title }}</h1>
<script src="/public/js/bundle.js"></script> <script src="/public/js/bundle.js"></script>
</html> </html>

File diff suppressed because one or more lines are too long

View File

@ -60,11 +60,11 @@ socket.on('logging_in', function () {
socket.on('init_autologin', function () { socket.on('init_autologin', function () {
let arl = localStorage.getItem('arl') let arl = localStorage.getItem('arl')
let accountNum = localStorage.getItem('accountNum') let accountNum = localStorage.getItem('accountNum')
if (arl){ if (arl) {
arl = arl.trim() arl = arl.trim()
if (accountNum != 0){ if (accountNum != 0) {
socket.emit('login', arl, true, accountNum) socket.emit('login', arl, true, accountNum)
}else{ } else {
socket.emit('login', arl) socket.emit('login', arl)
} }
} }
@ -130,27 +130,27 @@ socket.on('logged_out', function () {
}) })
socket.on('cancellingCurrentItem', function (uuid) { 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) { 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) { 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) { 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) { 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) { 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) { socket.on('errorMessage', function (error) {

View File

@ -5,6 +5,7 @@ import Downloads from '../downloads.js'
import QualityModal from '../quality-modal.js' import QualityModal from '../quality-modal.js'
import TrackPreview from '../track-preview.js' import TrackPreview from '../track-preview.js'
import Utils from '../utils.js' import Utils from '../utils.js'
import { toast } from '../toasts'
const FavoritesTab = new Vue({ const FavoritesTab = new Vue({
data() { data() {
@ -47,18 +48,29 @@ const FavoritesTab = new Vue({
updated_userTracks(data) { updated_userTracks(data) {
this.tracks = data this.tracks = data
}, },
reloadTabs(){ reloadTabs() {
this.$refs.reloadButton.classList.add("spin") this.$refs.reloadButton.classList.add('spin')
socket.emit('update_userFavorites') 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 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")
// 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) { initFavorites(data) {
this.updated_userFavorites(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/base';
@import './base/normalize'; @import './base/normalize';
@import './base/mixins'; @import './base/mixins';
@import './base/animations';
@import './globals/globals'; @import './globals/globals';
@import './globals/tables'; @import './globals/tables';

View File

@ -2,26 +2,14 @@
color: var(--accent-text); color: var(--accent-text);
} }
div.reload-button { .reload-button {
width: 36px; &.reload-button--inline {
height: 36px; display: inline-block;
} }
div.reload-button i{
padding: 6px;
}
div.reload-button.spin { &.spin {
animation-name: spin; i {
animation-duration: 0.5s; animation: spin 500ms infinite ease-out reverse;
animation-iteration-count: infinite; }
animation-timing-function: ease-out; }
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
} }

View File

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