Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-10 06:34:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

Make user avatar reactive

Browse source
This commit is contained in:
An Phan 2016-02-07 11:23:12 +07:00
parent 82b7564472
commit 0441c45bb2
2 changed files with 172 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

152
resources/assets/js/components/main-wrapper/main-content/home.vue Normal file
View file

@ -0,0 +1,152 @@
<template>
<section id="homeWrapper">
<h1 class="heading">
<span>{{ greeting }}</span>
</h1>
<div class="main-scroll-wrap">
<section class="recent">
<h1>Recently Played</h1>
<song-list
v-show="songState.recent.length"
:items="songState.recent"
:sortable="false">
</song-list>
<p class="none" v-show="!songState.recent.length">No songs played yet. What ya waiting for?</p>
</section>
<section v-show="topSongs.length">
<h1>Most Played Songs</h1>
<song-list :items="topSongs" :sortable="false"></song-list>
</section>
<section class="top-artists" v-show="topArtists.length">
<h1>Top Artists</h1>
<div class="wrapper">
<artist-item v-for="artist in topArtists" :artist="artist"></artist-item>
<span class="item"></span>
</div>
</section>
<section class="top-albums" v-show="topAlbums.length">
<h1>Top Albums</h1>
<div class="wrapper">
<album-item v-for="album in topAlbums" :album="album"></album-item>
<span class="item"></span>
</div>
</section>
</div>
</section>
</template>
<script>
import _ from 'lodash';
import isMobile from 'ismobilejs';
import playback from '../../../services/playback';
import songStore from '../../../stores/song';
import albumStore from '../../../stores/album';
import artistStore from '../../../stores/artist';
import userStore from '../../../stores/user';
import albumItem from '../../shared/album-item.vue';
import artistItem from '../../shared/artist-item.vue';
import hasSongList from '../../../mixins/has-song-list';
export default {
mixins: [hasSongList],
components: { albumItem, artistItem },
data () {
return {
isPhone: isMobile.phone,
songState: songStore.state,
greetings: [
'Oh hai!',
'Hey, %s!',
'Howdy, %s!',
'Yo!',
'How’s it going, %s?',
'Sup, %s?',
'How’s life, %s?',
'How’s your day, %s?',
'How have you been, %s?',
],
};
},
computed: {
greeting() {
return _.sample(this.greetings).replace('%s', userStore.current().name);
},
topSongs() {
return songStore.getMostPlayed();
},
topAlbums() {
return albumStore.getMostPlayed();
},
topArtists() {
return artistStore.getMostPlayed();
},
},
methods: {
},
events: {
'song:played': function (song) {
},
},
};
</script>
<style lang="sass">
@import "resources/assets/sass/partials/_vars.scss";
@import "resources/assets/sass/partials/_mixins.scss";
#homeWrapper {
button.play-shuffle, button.del {
i {
margin-right: 0 !important;
}
}
.song-list-wrap {
padding: 0 !important;
}
.none {
color: $color2ndText;
padding: 0;
a {
color: $colorHighlight;
}
}
.top-artists .wrapper, .top-albums .wrapper {
@include artist-album-wrapper();
}
.main-scroll-wrap {
section {
margin-bottom: 48px;
}
h1 {
font-size: 18px;
margin: 0 0 24px;
font-weight: $fontWeight_UltraThin;
}
}
}
</style>

40
resources/assets/js/stores/user.js
View file

@ -25,15 +25,15 @@ export default {
// Set the avatar for each of the users…
_.each(this.state.users, this.setAvatar);
// …and the current user as well.
this.setAvatar();
},
/**
* Get all users.
*
* @return {Array.<Object>}
*
* @return {Array.<Object>}
*/
all() {
return this.state.users;
@ -41,9 +41,9 @@ export default {
/**
* Get a user by his ID
*
*
* @param {Integer} id
*
*
* @return {Object}
*/
byId(id) {
@ -67,7 +67,7 @@ export default {
/**
* Set a user's avatar using Gravatar's service.
*
*
* @param {?Object} user The user. If null, the current user.
*/
setAvatar(user = null) {
@ -75,13 +75,13 @@ export default {
user = this.current();
}
user.avatar = `https://www.gravatar.com/avatar/${md5(user.email)}?s=256`;
Vue.set(user, 'avatar', `https://www.gravatar.com/avatar/${md5(user.email)}?s=256`);
},
/**
* Log a user in.
*
* @param {String} email
*
* @param {String} email
* @param {String} password
* @param {?Function} successCb
* @param {?Function} errorCb
@ -92,29 +92,29 @@ export default {
/**
* Log the current user out.
*
*
* @param {Function} cb The callback.
*/
logout(cb = null) {
http.delete('me', {}, () => {
if (cb) {
cb();
}
}
});
},
/**
* Update the current user's profile.
*
*
* @param {string} password Can be an empty string if the user is not changing his password.
* @param {?Function} successCb
* @param {?Function} errorCb
*/
updateProfile(password = null, cb = null) {
http.put('me', {
http.put('me', {
password,
name: this.current().name,
email: this.current().email
name: this.current().name,
email: this.current().email
}, () => {
this.setAvatar();
@ -127,7 +127,7 @@ export default {
/**
* Stores a new user into the database.
*
*
* @param {string} name
* @param {string} email
* @param {string} password
@ -136,7 +136,7 @@ export default {
store(name, email, password, cb = null) {
http.post('user', { name, email, password }, response => {
var user = response.data;
this.setAvatar(user);
this.state.users.push(user);
@ -148,7 +148,7 @@ export default {
/**
* Update a user's profile.
*
*
* @param {Object} user
* @param {String} name
* @param {String} email
@ -168,7 +168,7 @@ export default {
/**
* Delete a user.
*
*
* @param {Object} user
* @param {?Function} cb
*/
@ -185,7 +185,7 @@ export default {
// Didn't mean to make you cry
// If I'm not back again this time tomorrow
// Carry on, carry on, as if nothing really matters
//
//
// Too late, my time has come
// Sends shivers down my spine
// Body's aching all the time