koel/resources/assets/js/components/main-wrapper/main-content/songs.vue
2016-11-17 15:07:12 +08:00

52 lines
1.3 KiB
Vue

<template>
<section id="songsWrapper">
<h1 class="heading">
<span>All Songs
<i class="fa fa-angle-down toggler" v-show="isPhone && !showingControls" @click="showingControls = true"/>
<i class="fa fa-angle-up toggler" v-show="isPhone && showingControls" @click.prevent="showingControls = false"/>
<span class="meta" v-show="meta.songCount">
{{ meta.songCount | pluralize('song') }}
{{ meta.totalLength }}
</span>
</span>
<song-list-controls
@shuffleAll="shuffleAll"
@shuffleSelected="shuffleSelected"
:config="songListControlConfig"
:selectedSongs="selectedSongs"
/>
</h1>
<song-list :items="state.songs" type="allSongs"/>
</section>
</template>
<script>
import isMobile from 'ismobilejs';
import { pluralize } from '../../../utils';
import { songStore } from '../../../stores';
import { playback } from '../../../services';
import hasSongList from '../../../mixins/has-song-list';
export default {
name: 'main-wrapper--main-content--songs',
mixins: [hasSongList],
filters: { pluralize },
data() {
return {
state: songStore.state
};
},
};
</script>
<style lang="sass">
@import "../../../../sass/partials/_vars.scss";
@import "../../../../sass/partials/_mixins.scss";
</style>