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

78 lines
2.6 KiB
Vue
Raw Normal View History

2015-12-13 04:42:28 +00:00
<template>
<section id="songsWrapper">
<h1 class="heading">
<span>All Songs
2016-02-19 07:20:34 +00:00
<i class="fa fa-angle-down toggler"
v-show="isPhone && !showingControls"
2015-12-13 04:42:28 +00:00
@click="showingControls = true"></i>
2016-02-19 07:20:34 +00:00
<i class="fa fa-angle-up toggler"
v-show="isPhone && showingControls"
2015-12-13 04:42:28 +00:00
@click.prevent="showingControls = false"></i>
2016-01-14 08:02:59 +00:00
<span class="meta" v-show="meta.songCount">
2016-01-15 10:05:54 +00:00
{{ meta.songCount }} {{ meta.songCount | pluralize 'song' }}
2016-02-19 07:20:34 +00:00
2016-01-14 08:02:59 +00:00
{{ meta.totalLength }}
</span>
2015-12-13 04:42:28 +00:00
</span>
2016-02-19 07:20:34 +00:00
2015-12-13 04:42:28 +00:00
<div class="buttons" v-show="!isPhone || showingControls">
2016-02-19 07:20:34 +00:00
<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>
2016-01-03 10:24:12 +00:00
2016-02-19 07:20:34 +00:00
<button class="add-to" @click.prevent.stop="showingAddToMenu = !showingAddToMenu" v-if="selectedSongs.length">
{{ showingAddToMenu ? 'Cancel' : 'Add To…' }}
2016-01-03 10:24:12 +00:00
</button>
2016-01-16 18:11:24 +00:00
<add-to-menu :songs="selectedSongs" :showing="showingAddToMenu"><add-to-menu>
2015-12-13 04:42:28 +00:00
</div>
</h1>
2016-01-16 18:11:24 +00:00
<song-list :items="state.songs" :selected-songs.sync="selectedSongs" type="allSongs"></song-list>
2015-12-13 04:42:28 +00:00
</section>
</template>
<script>
import isMobile from 'ismobilejs';
import songStore from '../../../stores/song';
import playback from '../../../services/playback';
2016-01-14 08:02:59 +00:00
import hasSongList from '../../../mixins/has-song-list';
2015-12-13 04:42:28 +00:00
export default {
2016-01-14 08:02:59 +00:00
mixins: [hasSongList],
2015-12-13 04:42:28 +00:00
data() {
return {
state: songStore.state,
isPhone: isMobile.phone,
showingControls: false,
};
},
methods: {
/**
* Shuffle all songs.
*/
shuffle() {
// A null here tells the method to shuffle all songs, which is what we want.
playback.queueAndPlay(null, true);
},
},
};
</script>
<style lang="sass">
@import "resources/assets/sass/partials/_vars.scss";
@import "resources/assets/sass/partials/_mixins.scss";
</style>