Commit 640e1e8e authored by Agate's avatar Agate 💬

Added album detail view

parent 6bfbfdfd
......@@ -24,7 +24,7 @@ export default {
.main.pusher {
margin-left: 350px !important;
transform: none !important;
padding: 1.5rem;
padding: 1.5rem 0;
}
.ui.stripe.segment {
......
......@@ -9,12 +9,12 @@
<div class="middle aligned content">
<a class="header">{{ queue.currentTrack.title }}</a>
<div class="meta">
<p>
<router-link class="artist" :to="{name: 'browse.artist', params: {id: queue.currentTrack.artist.id }}">
<i class="users tiny icon"></i> {{ queue.currentTrack.artist.name }}
</router-link>
</p>
<p><a v-if="queue.currentTrack.album" class="album"><i class="sound tiny icon"></i> {{ queue.currentTrack.album.title }}</a></p>
<router-link class="artist" :to="{name: 'browse.artist', params: {id: queue.currentTrack.artist.id }}">
<i class="users tiny icon"></i> {{ queue.currentTrack.artist.name }}
</router-link>
<router-link class="album" :to="{name: 'browse.album', params: {id: queue.currentTrack.album.id }}">
<i class="sound icon"></i> {{ queue.currentTrack.album.title }}
</router-link>
</div>
</div>
</div>
......@@ -129,6 +129,12 @@ export default {
.track-area {
.header, .meta, .artist, .album {
color: white !important;
},
.artist, .album {
display: block;
}
.artist {
margin-bottom: 0.3rem;
}
}
......
......@@ -5,7 +5,9 @@
<img v-if="album.cover" :src="backend.absoluteUrl(album.cover)">
<img v-else src="../../../assets/audio/default-cover.png">
</div>
<div class="header">{{ album.title }}</div>
<div class="header">
<router-link :to="{name: 'browse.album', params: {id: album.id }}">{{ album.title }}</router-link>
</div>
<div class="meta">
By <router-link :to="{name: 'browse.artist', params: {id: album.artist.id }}">
{{ album.artist.name }}
......
......@@ -15,7 +15,9 @@
<img class="ui mini image" v-else src="../../../assets/audio/default-cover.png">
</td>
<td colspan="4">
<strong>{{ album.title }}</strong><br />
<router-link :to="{name: 'browse.album', params: {id: album.id }}">
<strong>{{ album.title }}</strong>
</router-link><br />
{{ album.tracks.length }} tracks
</td>
<td>
......
......@@ -28,7 +28,9 @@
</router-link>
</td>
<td colspan="6">
{{ track.album.title }}
<router-link class="album" :to="{name: 'browse.album', params: {id: track.album.id }}">
{{ track.album.title }}
</router-link>
</td>
<td><track-favorite-icon :track="track"></track-favorite-icon></td>
</tr>
......
<template>
<div>
<div :class="['ui', 'centered', {'active': isLoading}, 'inline', 'loader']"></div>
<template v-if="album">
<div class="ui vertical center aligned stripe segment">
<h2 class="ui center aligned icon header">
<i class="circular inverted sound yellow icon"></i>
{{ album.title }}
</h2>
<p>
Album containing {{ album.tracks.length }} tracks,
by <router-link :to="{name: 'browse.artist', params: {id: album.artist.id }}">
{{ album.artist.name }}
</router-link>
</p>
<div class="ui hidden divider"></div>
</button>
<play-button :tracks="album.tracks">Play all</play-button>
<a :href="wikipediaUrl" target="_blank" class="ui labeled icon button">
<i class="wikipedia icon"></i>
Search on wikipedia
</a>
<a :href="musicbrainzUrl" target="_blank" class="ui labeled icon button">
<i class="external icon"></i>
View on MusicBrainz
</a>
</div>
<div class="ui vertical stripe segment">
<h2>Tracks</h2>
<track-table v-if="album" :tracks="album.tracks"></track-table>
</div>
</template>
</div>
</template>
<script>
import logger from '@/logging'
import backend from '@/audio/backend'
import PlayButton from '@/components/audio/PlayButton'
import TrackTable from '@/components/audio/track/Table'
import config from '@/config'
const FETCH_URL = config.API_URL + 'albums/'
export default {
props: ['id'],
components: {
PlayButton,
TrackTable
},
data () {
return {
isLoading: true,
album: null
}
},
created () {
this.fetchData()
},
methods: {
fetchData () {
var self = this
this.isLoading = true
let url = FETCH_URL + this.id + '/'
logger.default.debug('Fetching album "' + this.id + '"')
this.$http.get(url).then((response) => {
self.album = backend.Album.clean(response.data)
self.isLoading = false
})
}
},
computed: {
wikipediaUrl () {
return 'https://en.wikipedia.org/w/index.php?search=' + this.album.title + ' ' + this.album.artist.name
},
musicbrainzUrl () {
return 'https://musicbrainz.org/release/' + this.album.mbid
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
......@@ -22,10 +22,12 @@
View on MusicBrainz
</a>
</div>
<h2>Albums by this artist</h2>
<div class="ui stackable three column grid">
<div class="column" :key="album.id" v-for="album in albums">
<album-card :mode="'rich'" class="fluid" :album="album"></album-card>
<div class="ui vertical stripe segment">
<h2>Albums by this artist</h2>
<div class="ui stackable three column grid">
<div class="column" :key="album.id" v-for="album in albums">
<album-card :mode="'rich'" class="fluid" :album="album"></album-card>
</div>
</div>
</div>
</template>
......@@ -36,7 +38,6 @@
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 PlayButton from '@/components/audio/PlayButton'
......@@ -74,11 +75,6 @@ export default {
})
self.isLoading = false
})
},
playAllALbums () {
this.albums.forEach((album) => {
queue.appendMany(album.tracks)
})
}
},
computed: {
......
<template>
<div class="main pusher">
<div class="ui container">
<div class="ui secondary pointing menu">
<router-link class="ui item" to="/browse">Browse</router-link>
</div>
<router-view>
Y'a quelqu'un ?
</router-view>
<div class="ui secondary pointing menu">
<router-link class="ui item" to="/browse">Browse</router-link>
</div>
<router-view>
Y'a quelqu'un ?
</router-view>
</div>
</template>
......@@ -20,4 +18,7 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.pusher > .ui.secondary.menu {
margin: 0 2.5rem;
}
</style>
......@@ -3,20 +3,21 @@
<div class="ui vertical center aligned stripe segment">
<search :autofocus="true"></search>
</div>
<div class="ui hidden divider"></div>
<div class="ui stackable two column grid">
<div class="column">
<h2 class="ui header">Latest artists</h2>
<div :class="['ui', {'active': isLoadingArtists}, 'inline', 'loader']"></div>
<div v-if="artists.length > 0" v-for="artist in artists.slice(0, 3)" :key="artist" class="ui cards">
<artist-card :artist="artist"></artist-card>
<div class="ui vertical stripe segment">
<div class="ui stackable two column grid">
<div class="column">
<h2 class="ui header">Latest artists</h2>
<div :class="['ui', {'active': isLoadingArtists}, 'inline', 'loader']"></div>
<div v-if="artists.length > 0" v-for="artist in artists.slice(0, 3)" :key="artist" class="ui cards">
<artist-card :artist="artist"></artist-card>
</div>
</div>
<div class="column">
<h2 class="ui header">Radios</h2>
<radio-card :type="'favorites'"></radio-card>
<radio-card :type="'random'"></radio-card>
<radio-card :type="'less-listened'"></radio-card>
</div>
</div>
<div class="column">
<h2 class="ui header">Radios</h2>
<radio-card :type="'favorites'"></radio-card>
<radio-card :type="'random'"></radio-card>
<radio-card :type="'less-listened'"></radio-card>
</div>
</div>
</div>
......
......@@ -6,6 +6,7 @@ import Logout from '@/components/auth/Logout'
import Browse from '@/components/browse/Browse'
import BrowseHome from '@/components/browse/Home'
import BrowseArtist from '@/components/browse/Artist'
import BrowseAlbum from '@/components/browse/Album'
import Favorites from '@/components/favorites/List'
Vue.use(Router)
......@@ -38,7 +39,8 @@ export default new Router({
component: Browse,
children: [
{ path: '', component: BrowseHome },
{ path: 'artist/:id', name: 'browse.artist', component: BrowseArtist, props: true }
{ path: 'artist/:id', name: 'browse.artist', component: BrowseArtist, props: true },
{ path: 'album/:id', name: 'browse.album', component: BrowseAlbum, props: true }
]
}
......
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