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

153 lines
4.7 KiB
Vue
Raw Normal View History

2015-12-13 04:42:28 +00:00
<template>
2016-01-06 10:57:45 +00:00
<section id="queueWrapper">
2015-12-13 04:42:28 +00:00
<h1 class="heading">
<span title="That's a freaking lot of U's and E's">Current Queue
<i class="fa fa-angle-down toggler"
v-show="isPhone && !showingControls"
2015-12-13 04:42:28 +00:00
@click="showingControls = true"></i>
<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-01-14 08:02:59 +00:00
{{ meta.totalLength }}
</span>
2015-12-13 04:42:28 +00:00
</span>
<div class="buttons" v-show="!isPhone || showingControls">
<button
2016-02-21 11:04:57 +00:00
class="play-shuffle btn btn-orange"
@click.prevent="shuffle"
2015-12-14 04:25:42 +00:00
v-if="state.songs.length > 1 && selectedSongs.length < 2"
>
2015-12-13 04:42:28 +00:00
<i class="fa fa-random"></i> All
</button>
2016-02-21 11:04:57 +00:00
<button class="play-shuffle btn btn-orange" @click.prevent="shuffleSelected" v-if="selectedSongs.length > 1">
2015-12-14 04:25:42 +00:00
<i class="fa fa-random"></i> Selected
</button>
2016-02-21 11:04:57 +00:00
<button class="btn btn-green" @click.prevent.stop="showingAddToMenu = !showingAddToMenu" v-if="state.songs.length > 1">
{{ showingAddToMenu ? 'Cancel' : 'Add To…' }}
2015-12-13 04:42:28 +00:00
</button>
2016-02-21 11:04:57 +00:00
<button class="btn btn-red" @click.prevent="clear" v-if="state.songs.length">Clear</button>
2015-12-13 04:42:28 +00:00
<add-to-menu
:songs="songsToAddTo"
:showing="showingAddToMenu && state.songs.length"
:settings="{ canQueue: false }">
</add-to-menu>
2015-12-13 04:42:28 +00:00
</div>
</h1>
<song-list
v-show="state.songs.length"
:items="state.songs"
:selected-songs.sync="selectedSongs"
:sortable="false"
2016-01-06 07:12:36 +00:00
type="queue">
</song-list>
2016-01-06 09:21:38 +00:00
<div v-show="!state.songs.length" class="none">
2016-01-06 07:12:36 +00:00
<p>Empty spaces. Abandoned places.</p>
<p v-if="showShufflingAllOption">How about
2016-01-06 07:12:36 +00:00
<a class="start" @click.prevent="shuffleAll">shuffling all songs</a>?
</p>
</div>
2016-01-06 10:57:45 +00:00
</section>
2015-12-13 04:42:28 +00:00
</template>
<script>
import isMobile from 'ismobilejs';
2015-12-13 04:42:28 +00:00
import queueStore from '../../../stores/queue';
2016-01-06 07:12:36 +00:00
import songStore from '../../../stores/song';
2015-12-13 04:42:28 +00:00
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: queueStore.state,
showingAddToMenu: false,
2015-12-13 04:42:28 +00:00
playlistName: '',
isPhone: isMobile.phone,
showingControls: false,
};
},
2016-01-03 10:24:12 +00:00
computed: {
/**
* If no songs are selected, we provide all queued songs as a tribute to playlist god.
*
2016-01-03 10:24:12 +00:00
* @return {Array} The songs to add into a (new) playlist
*/
songsToAddTo() {
2016-01-03 10:24:12 +00:00
return this.selectedSongs.length ? this.selectedSongs : queueStore.all();
},
2015-12-13 04:42:28 +00:00
/**
2016-01-06 07:12:36 +00:00
* Determine if we should display a "Shuffling All" link.
* This should be true if:
* - The current list is queue, and
* - We have songs to shuffle.
2015-12-13 04:42:28 +00:00
*/
2016-01-06 07:12:36 +00:00
showShufflingAllOption() {
return songStore.all().length;
2015-12-13 04:42:28 +00:00
},
},
methods: {
/**
* Shuffle the current queue.
*/
shuffle() {
playback.queueAndPlay(queueStore.shuffle());
},
2016-01-06 07:12:36 +00:00
/**
* Shuffle all songs we have.
*/
shuffleAll() {
playback.queueAndPlay(songStore.all(), true);
},
2015-12-13 04:42:28 +00:00
/**
* Clear the queue.
*/
clear() {
queueStore.clear();
},
},
};
</script>
<style lang="sass">
2016-03-13 17:00:32 +00:00
@import "../../../../sass/partials/_vars.scss";
@import "../../../../sass/partials/_mixins.scss";
2015-12-13 04:42:28 +00:00
#queueWrapper {
.none {
color: $color2ndText;
2016-01-06 07:12:36 +00:00
padding: 16px 24px;
a {
color: $colorHighlight;
}
2015-12-13 04:42:28 +00:00
}
button.play-shuffle {
i {
margin-right: 0 !important;
}
}
@media only screen and (max-width : 667px) {
2015-12-13 04:42:28 +00:00
}
}
</style>