Commit 4c4671f1 authored by Agate's avatar Agate 💬

Added favorites and artist radio, as well as controls

parent 34e38491
import logger from '@/logging'
import Audio from '@/audio'
import backend from '@/audio/backend'
import radios from '@/radios'
class Queue {
constructor (options = {}) {
......@@ -46,6 +47,19 @@ class Queue {
})
}
populateFromRadio () {
if (!radios.running) {
return
}
var self = this
radios.fetch().then((response) => {
logger.default.info('Adding track to queue from radio')
self.append(response.data.track)
}, (response) => {
logger.default.error('Error while adding track to queue from radio')
})
}
clean () {
this.stop()
this.tracks = []
......@@ -86,6 +100,9 @@ class Queue {
volume: this.state.volume,
onEnded: this.handleAudioEnded.bind(this)
})
if (this.currentIndex === this.tracks.length - 1) {
this.populateFromRadio()
}
}
handleAudioEnded (e) {
......
......@@ -7,7 +7,7 @@
<div class="ui compact fluid two item inverted menu">
<a class="active item" data-tab="browse">Browse</a>
<a class="item" data-tab="queue">
Queue
Queue &nbsp;
<div class="ui tiny orange label">
<template v-if="queue.tracks.length === 0">
0
......@@ -67,6 +67,7 @@ import favoriteTracks from '@/favorites/tracks'
import auth from '@/auth'
import queue from '@/audio/queue'
import backend from '@/audio/backend'
import $ from 'jquery'
export default {
......
......@@ -26,6 +26,7 @@
</div>
<div class=" actions eight wide column">
<track-favorite-icon v-if="queue.currentTrack" :track="queue.currentTrack"></track-favorite-icon>
<i @click="radios.stop()" title="You have a radio playing" v-if="radios.running" class="ui blue inverted feed icon"></i>
</div>
<div class="right floated four wide column">
......@@ -61,6 +62,7 @@
import queue from '@/audio/queue'
import Track from '@/audio/track'
import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
import radios from '@/radios'
export default {
name: 'player',
......@@ -70,7 +72,8 @@ export default {
data () {
return {
queue: queue,
Track: Track
Track: Track,
radios
}
},
......
......@@ -9,9 +9,7 @@
</h2>
<p><i class="ui sound icon"></i> {{ totalTracks }} tracks in {{ albums.length }} albums</p>
<div class="ui hidden divider"></div>
<button class="ui labeled blue icon button">
<i class="play icon"></i>
Start radio
<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>
......@@ -42,6 +40,7 @@ import logger from '@/logging'
import backend from '@/audio/backend'
import queue from '@/audio/queue'
import AlbumCard from '@/components/audio/album/Card'
import RadioButton from '@/components/radios/Button'
import config from '@/config'
const FETCH_URL = config.API_URL + 'artists/'
......@@ -49,7 +48,8 @@ const FETCH_URL = config.API_URL + 'artists/'
export default {
props: ['id'],
components: {
AlbumCard
AlbumCard,
RadioButton
},
data () {
return {
......
......@@ -8,6 +8,8 @@
<i class="circular inverted heart pink icon"></i>
{{ favoriteTracks.count }} favorites
</h2>
<radio-button type="favorites"></radio-button>
</div>
<div class="ui vertical stripe segment">
<button class="ui left floated labeled icon button" @click="fetchFavorites(previousLink)" :disabled="!previousLink"><i class="left arrow icon"></i> Previous</button>
......@@ -25,12 +27,14 @@ import logger from '@/logging'
import config from '@/config'
import favoriteTracks from '@/favorites/tracks'
import TrackTable from '@/components/audio/track/Table'
import RadioButton from '@/components/radios/Button'
const FAVORITES_URL = config.API_URL + 'tracks/'
export default {
components: {
TrackTable
TrackTable,
RadioButton
},
data () {
return {
......
<template>
<button @click="toggleRadio" :class="['ui', 'blue', 'labeled', {'inverted': running}, 'icon', 'button']">
<i class="ui feed icon"></i>
<template v-if="running">Stop</template>
<template v-else>Start</template>
radio
</button>
</template>
<script>
import radios from '@/radios'
export default {
props: {
type: {type: String, required: true},
objectId: {type: Number, default: null}
},
data () {
return {
radios
}
},
methods: {
toggleRadio () {
if (this.running) {
radios.stop()
} else {
radios.start(this.type, this.objectId)
}
}
},
computed: {
running () {
if (!radios.running) {
return false
} else {
return radios.current.type === this.type & radios.current.objectId === this.objectId
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
i {
cursor: pointer;
}
</style>
import Vue from 'vue'
import config from '@/config'
import logger from '@/logging'
import queue from '@/audio/queue'
const CREATE_RADIO_URL = config.API_URL + 'radios/sessions/'
const GET_TRACK_URL = config.API_URL + 'radios/tracks/'
var radios = {
start (type, objectId) {
this.current.type = type
this.current.objectId = objectId
this.running = true
let resource = Vue.resource(CREATE_RADIO_URL)
var self = this
var params = {
radio_type: type,
related_object_id: objectId
}
resource.save({}, params).then((response) => {
logger.default.info('Successfully started radio ', type)
self.current.session = response.data.id
queue.populateFromRadio()
}, (response) => {
logger.default.error('Error while starting radio', type)
})
},
stop () {
this.current.type = null
this.current.objectId = null
this.running = false
this.session = null
},
fetch () {
let resource = Vue.resource(GET_TRACK_URL)
var self = this
var params = {
session: self.current.session
}
return resource.save({}, params)
}
}
Vue.set(radios, 'running', false)
Vue.set(radios, 'current', {})
Vue.set(radios.current, 'objectId', null)
Vue.set(radios.current, 'type', null)
Vue.set(radios.current, 'session', null)
export default radios
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