mirror of
https://github.com/koel/koel
synced 2025-01-09 19:28:44 +00:00
52 lines
1.3 KiB
Vue
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>
|
|
|