koel/resources/assets/js/components/shared/add-to-playlist.vue
2016-01-03 19:48:19 +08:00

169 lines
4.6 KiB
Vue

<template>
<div class="add-to-playlist" v-show="showing">
<p>Add {{ songs.length }} song{{ songs.length > 1 ? 's' : '' }} into</p>
<ul>
<li @click="addSongsToFavorite">Favorites</li>
<li v-for="playlist in playlistState.playlists" @click="addSongsToExisting(playlist)">{{ playlist.name }}</li>
</ul>
<p>or create a new playlist</p>
<form class="form-save form-simple" @submit.prevent="createNewFromSongs">
<input type="text"
@keyup.esc.prevent="showing = false"
v-model="newPlaylistName"
v-koel-focus="showing"
placeholder="Playlist name"
required>
<button type="submit"><i class="fa fa-save"></i></button>
</form>
</div>
</template>
<script>
import playlistStore from '../../stores/playlist';
import favoriteStore from '../../stores/favorite';
export default {
props: ['songs', 'showing'],
data() {
return {
newPlaylistName: '',
playlistState: playlistStore.state,
}
},
watch: {
songs() {
if (!this.songs.length) {
this.showing = false;
}
},
},
methods: {
/**
* Add the selected songs into Favorite.
*/
addSongsToFavorite() {
this.showing = false;
favoriteStore.like(this.songs, () => {
// Nothing much now.
});
},
/**
* Add the selected songs into the chosen playlist.
*
* @param {Object} playlist The playlist.
*/
addSongsToExisting(playlist) {
this.showing = false;
playlistStore.addSongs(playlist, this.songs, () => {
// Nothing much now.
});
},
/**
* Save the selected songs as a playlist.
* As of current we don't have selective save.
*/
createNewFromSongs() {
this.newPlaylistName = this.newPlaylistName.trim();
if (!this.newPlaylistName) {
return;
}
this.showing = false;
playlistStore.store(this.newPlaylistName, this.songs, () => {
this.newPlaylistName = '';
});
},
},
};
</script>
<style lang="sass" scoped>
@import "resources/assets/sass/partials/_vars.scss";
@import "resources/assets/sass/partials/_mixins.scss";
.add-to-playlist {
@include context-menu();
position: absolute;
top: 36px;
left: 0;
width: 100%;
p {
margin: 4px 0;
font-size: 90%;
&::first-of-type {
margin-top: 0;
}
}
$itemHeight: 28px;
$itemMargin: 2px;
ul {
max-height: 5 * ($itemHeight + $itemMargin);
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
li {
cursor: pointer;
background: rgba(255, 255, 255, .2);
height: $itemHeight;
line-height: $itemHeight;
padding: 0 8px;
margin: $itemMargin 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 3px;
background: #fff;
&:hover {
background: $colorHighlight;
color: #fff;
}
}
&::before {
display: block;
content: " ";
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid rgb(232, 232, 232);
position: absolute;
top: -7px;
left: calc(50% - 10px);
}
form {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
input[type="text"] {
width: 100%;
border-radius: 5px 0 0 5px;
height: 28px;
}
button[type="submit"] {
margin-top: 0;
border-radius: 0 5px 5px 0 !important;
height: 28px;
margin-left: -2px !important;
}
}
}
</style>