koel/resources/assets/js/components/main-wrapper/main-content/favorites.vue

97 lines
3.1 KiB
Vue
Raw Normal View History

2015-12-13 04:42:28 +00:00
<template>
<section id="favoritesWrapper">
2015-12-13 04:42:28 +00:00
<h1 class="heading">
<span>Songs You Love
<i class="fa fa-chevron-down toggler"
v-show="isPhone && !showingControls"
@click="showingControls = true"></i>
<i class="fa fa-chevron-up toggler"
v-show="isPhone && showingControls"
@click.prevent="showingControls = false"></i>
</span>
<div class="buttons" v-show="!isPhone || showingControls">
<button class="play-shuffle"
@click.prevent="shuffle"
2015-12-14 04:25:42 +00:00
v-if="state.songs.length && selectedSongs.length < 2"
2015-12-13 04:42:28 +00:00
>
<i class="fa fa-random"></i> All
</button>
2015-12-14 04:25:42 +00:00
<button class="play-shuffle" @click.prevent="shuffleSelected" v-if="selectedSongs.length > 1">
<i class="fa fa-random"></i> Selected
</button>
<button class="add-to" @click.prevent="showingAddToMenu = !showingAddToMenu" v-if="selectedSongs.length">
{{ showingAddToMenu ? 'Cancel' : 'Add To…' }}
</button>
<add-to-menu
:songs="selectedSongs"
:showing.sync="showingAddToMenu"
:settings="{ canLike: false }">
</add-to-menu>
2015-12-13 04:42:28 +00:00
</div>
</h1>
2015-12-14 04:25:42 +00:00
<song-list :items="state.songs" :selected-songs.sync="selectedSongs" type="favorites"></song-list>
2015-12-13 04:42:28 +00:00
</section>
</template>
<script>
import isMobile from 'ismobilejs';
import songList from '../../shared/song-list.vue';
import addToMenu from '../../shared/add-to-menu.vue';
2015-12-13 04:42:28 +00:00
import favoriteStore from '../../../stores/favorite';
import playback from '../../../services/playback';
2015-12-14 04:25:42 +00:00
import shuffleSelectedMixin from '../../../mixins/shuffle-selected';
2015-12-13 04:42:28 +00:00
export default {
2015-12-14 04:25:42 +00:00
mixins: [shuffleSelectedMixin],
components: { songList, addToMenu },
2015-12-13 04:42:28 +00:00
data () {
return {
state: favoriteStore.state,
isPhone: isMobile.phone,
showingControls: false,
showingAddToMenu: false,
2015-12-13 04:42:28 +00:00
};
},
methods: {
/**
* Shuffle the current favorite songs.
*/
shuffle() {
playback.queueAndPlay(this.state.songs, true);
},
},
watch: {
/**
* Watch the number of favorite songs.
* If we don't have any, the "Add To..." menu shouldn't be left open.
*/
'state.songs': function () {
if (!this.state.songs.length) {
this.showingAddToMenu = false;
}
},
},
2015-12-13 04:42:28 +00:00
};
</script>
<style lang="sass">
@import "resources/assets/sass/partials/_vars.scss";
@import "resources/assets/sass/partials/_mixins.scss";
#favoritesWrapper {
2015-12-13 04:42:28 +00:00
button.play-shuffle, button.del {
i {
margin-right: 0 !important;
}
}
}
</style>