Artist page changes, explicit marking, bug fixes

This commit is contained in:
exttex 2020-08-30 20:07:04 +02:00
parent b94234c8e7
commit 736fa01161
7 changed files with 106 additions and 11 deletions

8
.gitignore vendored Normal file
View File

@ -0,0 +1,8 @@
dist/
node_modules/
app/node_modules/
app/dist/
app/client/dist/
app/client/node_modules/
electron_dist/
freezer-*.tgz

23
app/client/.gitignore vendored Normal file
View File

@ -0,0 +1,23 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

View File

@ -13,7 +13,9 @@
</v-hover> </v-hover>
<v-list-item-content> <v-list-item-content>
<v-list-item-title>{{album.title}}</v-list-item-title> <v-list-item-title>
{{album.title}}<span v-if='album.explicit' class='red--text text-overline pl-2'>E</span>
</v-list-item-title>
<v-list-item-subtitle>{{album.artistString}}</v-list-item-subtitle> <v-list-item-subtitle>{{album.artistString}}</v-list-item-subtitle>
</v-list-item-content> </v-list-item-content>
<v-list-item-action> <v-list-item-action>

View File

@ -6,7 +6,7 @@
<v-list-item-content> <v-list-item-content>
<v-list-item-title <v-list-item-title
:class='{"primary--text": track.id == ($root.track ? $root.track : {id: null}).id}' :class='{"primary--text": track.id == ($root.track ? $root.track : {id: null}).id}'
>{{track.title}}</v-list-item-title> >{{track.title}}<span v-if='track.explicit' class='red--text text-overline pl-2'>E</span></v-list-item-title>
<v-list-item-subtitle>{{track.artistString}}</v-list-item-subtitle> <v-list-item-subtitle>{{track.artistString}}</v-list-item-subtitle>
</v-list-item-content> </v-list-item-content>
<v-list-item-action> <v-list-item-action>

View File

@ -53,19 +53,56 @@
</v-list> </v-list>
<!-- Normal albums -->
<h1 class='my-2'>Albums</h1> <h1 class='my-2'>Albums</h1>
<v-list class='overflow-y-auto' style='max-height: 500px' @scroll.native="scroll"> <v-list class='overflow-y-auto' style='max-height: 400px' @scroll.native="scroll">
<div
v-for='(album, index) in artist.albums'
:key='"n" + album.id'>
<AlbumTile <AlbumTile
v-for='album in artist.albums' v-if='(index < 3 || (index >= 3 && allAlbums)) && album.type == "album"'
:key='album.id'
:album='album' :album='album'
></AlbumTile> ></AlbumTile>
<div class='text-center my-2' v-if='loadingMore'> <!-- Show all albums -->
<v-list-item v-if='!allAlbums && index == 3' @click='allAlbums = true'>
<v-list-item-title>Show all albums</v-list-item-title>
</v-list-item>
</div>
<!-- Loading -->
<div class='text-center my-2' v-if='loadingMore && allAlbums'>
<v-progress-circular indeterminate></v-progress-circular> <v-progress-circular indeterminate></v-progress-circular>
</div> </div>
</v-list> </v-list>
<!-- Singles -->
<h1 class='my-2'>Singles</h1>
<v-list class='overflow-y-auto' style='max-height: 400px' @scroll.native="scroll">
<div
v-for='(album, index) in artist.albums'
:key='"n" + album.id'>
<AlbumTile
v-if='(index < 3 || (index >= 3 && allSingles)) && album.type == "single"'
:album='album'
></AlbumTile>
<!-- Show all albums -->
<v-list-item v-if='!allSingles && index == 3' @click='showAllSingles'>
<v-list-item-title>Show all singles</v-list-item-title>
</v-list-item>
</div>
<!-- Loading -->
<div class='text-center my-2' v-if='loadingMore && allSingles'>
<v-progress-circular indeterminate></v-progress-circular>
</div>
</v-list>
<!-- TODO: Featured in -->
</div> </div>
</template> </template>
@ -85,7 +122,9 @@ export default {
loading: false, loading: false,
libraryLoading: false, libraryLoading: false,
allTopTracks: false, allTopTracks: false,
loadingMore: false loadingMore: false,
allAlbums: false,
allSingles: false
} }
}, },
props: { props: {
@ -120,6 +159,9 @@ export default {
} }
this.loading = false; this.loading = false;
} }
//Load page on background
this.loadMoreAlbums();
}, },
async loadMoreAlbums() { async loadMoreAlbums() {
if (this.artist.albumCount <= this.artist.albums.length) return; if (this.artist.albumCount <= this.artist.albums.length) return;
@ -133,8 +175,14 @@ export default {
this.loadingMore = false; this.loadingMore = false;
}, },
showAllSingles() {
this.allSingles = true;
this.loadMoreAlbums();
},
//On scroll load more albums //On scroll load more albums
scroll(event) { scroll(event) {
if (!this.allAlbums && !this.allSingles) return;
let loadOffset = event.target.scrollHeight - event.target.offsetHeight - 150; let loadOffset = event.target.scrollHeight - event.target.offsetHeight - 150;
if (event.target.scrollTop > loadOffset) { if (event.target.scrollTop > loadOffset) {
if (!this.loadingMore && !this.loading) this.loadMoreAlbums(); if (!this.loadingMore && !this.loading) this.loadMoreAlbums();

View File

@ -1,7 +1,7 @@
{ {
"name": "freezer", "name": "freezer",
"private": true, "private": true,
"version": "1.0.0", "version": "1.0.1",
"description": "", "description": "",
"main": "background.js", "main": "background.js",
"scripts": { "scripts": {

View File

@ -51,6 +51,20 @@ class Album {
this.tracks = tracksJson.data.map((t) => new Track(t)); this.tracks = tracksJson.data.map((t) => new Track(t));
this.artists = (json.ARTISTS ? json.ARTISTS : [json]).map((a) => new Artist(a)); this.artists = (json.ARTISTS ? json.ARTISTS : [json]).map((a) => new Artist(a));
this.releaseDate = json.DIGITAL_RELEASE_DATE; this.releaseDate = json.DIGITAL_RELEASE_DATE;
//Explicit
this.explicit = false;
if (json.EXPLICIT_LYRICS && json.EXPLICIT_LYRICS.toString() == "1") this.explicit = true;
if (json.EXPLICIT_ALBUM_CONTENT) {
if (json.EXPLICIT_ALBUM_CONTENT.EXPLICIT_LYRICS_STATUS == 4) this.explicit = true;
if (json.EXPLICIT_ALBUM_CONTENT.EXPLICIT_LYRICS_STATUS == 1) this.explicit = true;
}
//Type
this.type = 'album';
if (json.TYPE && json.TYPE.toString() == "0") this.type = 'single';
if (!json.ARTISTS_ALBUMS_IS_OFFICIAL) this.type = 'featured';
//Helpers //Helpers
this.artistString = this.artists.map((a) => a.name).join(', '); this.artistString = this.artists.map((a) => a.name).join(', ');
} }