Commit 0b967cee authored by Agate's avatar Agate 💬

Added more options on big play buttons, see #8

parent 44ac55b7
......@@ -89,18 +89,27 @@ class Queue {
}
cache.set('volume', newValue)
}
append (track) {
this.tracks.push(track)
append (track, index) {
index = index || this.tracks.length - 1
if (index > this.tracks.length - 1) {
// we simply push to the end
this.tracks.push(track)
} else {
// we insert the track at given position
this.tracks.splice(index, 0, track)
}
if (this.currentIndex < 0) {
this.play(0)
}
this.cache()
}
appendMany (tracks) {
appendMany (tracks, index) {
let self = this
index = index || this.tracks.length - 1
tracks.forEach((t) => {
self.append(t)
self.append(t, index)
index += 1
})
}
......
<template>
<div :class="['ui', {'teal': !discrete}, {'tiny': discrete}, 'buttons']">
<button title="Add to current queue" @click="add" :class="['ui', {'mini': discrete}, 'icon', {'labeled': !discrete}, 'button']">
<i class="ui play icon"></i>
<template v-if="!discrete"><slot>Play</slot></template>
</button>
<div v-if="!discrete" class="ui floating dropdown icon button">
<i class="dropdown icon"></i>
<div class="menu">
<div class="item"@click="add"><i class="plus icon"></i> Add to queue</div>
<div class="item"@click="addNext()"><i class="step forward icon"></i> Play next</div>
<div class="item"@click="addNext(true)"><i class="arrow down icon"></i> Play now</div>
</div>
</div>
</div>
</template>
<script>
import logger from '@/logging'
import queue from '@/audio/queue'
import jQuery from 'jquery'
export default {
props: {
// we can either have a single or multiple tracks to play when clicked
tracks: {type: Array, required: false},
track: {type: Object, required: false},
discrete: {type: Boolean, default: false}
},
created () {
if (!this.track & !this.tracks) {
logger.default.error('You have to provide eigher a track or tracks property')
}
},
mounted () {
if (!this.discrete) {
jQuery(this.$el).find('.ui.dropdown').dropdown()
}
},
methods: {
add () {
if (this.track) {
queue.append(this.track)
} else {
queue.appendMany(this.tracks)
}
},
addNext (next) {
if (this.track) {
queue.append(this.track, queue.currentIndex + 1)
} else {
queue.appendMany(this.tracks, queue.currentIndex + 1)
}
if (next) {
queue.next()
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
i {
cursor: pointer;
}
</style>
......@@ -16,9 +16,7 @@
<tbody>
<tr v-for="track in tracks">
<td>
<button @click="queue.append(track)" class="ui tiny icon button">
<i class="play icon"></i>
</button>
<play-button :track="track" :discrete="true"></play-button>
</td>
<td colspan="6">{{ track.title }}</td>
<td>
......@@ -34,10 +32,7 @@
</div>
</div>
<div class="extra content">
<button @click="queue.appendMany(album.tracks)" class="ui mini icon right floated teal labeled button">
<i class="ui play icon"></i>
Play
</button>
<play-button class="mini right floated" :tracks="album.tracks">Play all</play-button>
<span>
<i class="music icon"></i>
{{ album.tracks.length }} tracks
......@@ -50,6 +45,7 @@
import queue from '@/audio/queue'
import backend from '@/audio/backend'
import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
import PlayButton from '@/components/audio/PlayButton'
export default {
props: {
......@@ -57,7 +53,8 @@ export default {
mode: {type: String, default: 'rich'}
},
components: {
TrackFavoriteIcon
TrackFavoriteIcon,
PlayButton
},
data () {
return {
......
......@@ -9,7 +9,7 @@
<div class="description">
<table class="ui compact very basic fixed single line table">
<tbody>
<tr v-for="album in artist.albums.slice(0, 3)">
<tr v-for="album in albums">
<td>
<img class="ui mini image" v-if="album.cover" :src="backend.absoluteUrl(album.cover)">
<img class="ui mini image" v-else src="../../../assets/audio/default-cover.png">
......@@ -19,19 +19,19 @@
{{ album.tracks.length }} tracks
</td>
<td>
<button @click="queue.appendMany(album.tracks)" class="ui mini icon right floated teal button">
<i class="ui play icon"></i>
</button>
<play-button class="right floated" :discrete="true" :tracks="album.tracks"></play-button>
</td>
</tr>
</tbody>
</table>
<div class="center aligned segment" v-if="artist.albums.length > initialAlbums">
<em v-if="!showAllAlbums" @click="showAllAlbums = true" class="expand">Show {{ artist.albums.length - initialAlbums }} more albums</em>
<em v-else @click="showAllAlbums = false" class="expand">Collapse</em>
</div>
</div>
</div>
<div class="extra content">
<!-- <button @click="queue.appendMany(artist.tracks)" class="ui right floated button">
Play
</button> -->
<play-button class="mini right floated" :tracks="tracks">Play all</play-button>
<span>
<i class="sound icon"></i>
{{ artist.albums.length }} albums
......@@ -41,15 +41,36 @@
</template>
<script>
import queue from '@/audio/queue'
import backend from '@/audio/backend'
import PlayButton from '@/components/audio/PlayButton'
export default {
props: ['artist'],
components: {
PlayButton
},
data () {
return {
backend: backend,
queue: queue
initialAlbums: 3,
showAllAlbums: false
}
},
computed: {
albums () {
if (this.showAllAlbums) {
return this.artist.albums
}
return this.artist.albums.slice(0, this.initialAlbums)
},
allTracks () {
let tracks = []
this.artist.albums.forEach(album => {
album.tracks.forEach(track => {
tracks.push(track)
})
})
return tracks
}
}
}
......
......@@ -13,9 +13,7 @@
<tbody>
<tr v-for="track in tracks">
<td>
<button @click="queue.append(track)" class="ui tiny icon button">
<i class="play icon"></i>
</button>
<play-button :discrete="true" :track="track"></play-button>
</td>
<td>
<img class="ui mini image" v-if="track.album.cover" :src="backend.absoluteUrl(track.album.cover)">
......@@ -39,19 +37,19 @@
</template>
<script>
import queue from '@/audio/queue'
import backend from '@/audio/backend'
import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
import PlayButton from '@/components/audio/PlayButton'
export default {
props: ['tracks'],
components: {
TrackFavoriteIcon
TrackFavoriteIcon,
PlayButton
},
data () {
return {
backend: backend,
queue: queue
backend: backend
}
}
}
......
......@@ -11,10 +11,8 @@
<div class="ui hidden divider"></div>
<radio-button type="artist" :object-id="artist.id"></radio-button>
</button>
<button class="ui labeled teal icon button" @click="playAllALbums">
<i class="play icon"></i>
Play all albums
</button>
<play-button :tracks="allTracks">Play all albums</play-button>
<a :href="wikipediaUrl" target="_blank" class="ui labeled icon button">
<i class="wikipedia icon"></i>
Search on wikipedia
......@@ -41,6 +39,7 @@ import backend from '@/audio/backend'
import queue from '@/audio/queue'
import AlbumCard from '@/components/audio/album/Card'
import RadioButton from '@/components/radios/Button'
import PlayButton from '@/components/audio/PlayButton'
import config from '@/config'
const FETCH_URL = config.API_URL + 'artists/'
......@@ -49,7 +48,8 @@ export default {
props: ['id'],
components: {
AlbumCard,
RadioButton
RadioButton,
PlayButton
},
data () {
return {
......@@ -94,6 +94,15 @@ export default {
},
musicbrainzUrl () {
return 'https://musicbrainz.org/artist/' + this.artist.mbid
},
allTracks () {
let tracks = []
this.albums.forEach(album => {
album.tracks.forEach(track => {
tracks.push(track)
})
})
return tracks
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment