owntone-server/web-src/src/components/ModalDialogDirectory.vue

66 lines
2.3 KiB
Vue
Raw Normal View History

2018-12-23 04:34:46 -05:00
<template>
<div>
<transition name="fade">
<div class="modal is-active" v-if="show">
<div class="modal-background" @click="$emit('close')"></div>
<div class="modal-content fd-modal-card">
<div class="card">
<div class="card-content">
<p class="title is-4">
{{ directory.path }}
</p>
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"><i class="mdi mdi-playlist-plus"></i></span> <span class="is-size-7">Add</span>
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<span class="icon"><i class="mdi mdi-playlist-play"></i></span> <span class="is-size-7">Add Next</span>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<span class="icon"><i class="mdi mdi-play"></i></span> <span class="is-size-7">Play</span>
</a>
</footer>
</div>
</div>
<button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
</div>
</transition>
</div>
</template>
<script>
import webapi from '@/webapi'
export default {
name: 'ModalDialogDirectory',
props: [ 'show', 'directory' ],
methods: {
play: function () {
this.$emit('close')
webapi.search({ 'type': 'tracks', 'expression': 'path starts with "' + this.directory.path + '" order by path asc' }).then(({ data }) => {
webapi.player_play_uri(data.tracks.items.map(a => a.uri).join(','), false)
})
},
queue_add: function () {
this.$emit('close')
webapi.search({ 'type': 'tracks', 'expression': 'path starts with "' + this.directory.path + '" order by path asc' }).then(({ data }) => {
webapi.queue_add(data.tracks.items.map(a => a.uri).join(','))
})
},
queue_add_next: function () {
this.$emit('close')
webapi.search({ 'type': 'tracks', 'expression': 'path starts with "' + this.directory.path + '" order by path asc' }).then(({ data }) => {
webapi.queue_add_next(data.tracks.items.map(a => a.uri).join(','))
})
}
}
}
</script>
<style>
</style>