From 8c9f3f28816e6ae0689936ab58c006432c0f9526 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Wed, 14 Jun 2017 03:55:32 +0200
Subject: [PATCH] Added radio card and lit of radios on browse home
---
src/components/browse/Home.vue | 10 ++++++++-
src/components/radios/Card.vue | 37 ++++++++++++++++++++++++++++++++++
src/radios/index.js | 14 +++++++++++++
3 files changed, 60 insertions(+), 1 deletion(-)
create mode 100644 src/components/radios/Card.vue
diff --git a/src/components/browse/Home.vue b/src/components/browse/Home.vue
index 7599029..ef736a0 100644
--- a/src/components/browse/Home.vue
+++ b/src/components/browse/Home.vue
@@ -12,6 +12,12 @@
<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>
</template>
@@ -22,6 +28,7 @@ import backend from '@/audio/backend'
import logger from '@/logging'
import ArtistCard from '@/components/audio/artist/Card'
import config from '@/config'
+import RadioCard from '@/components/radios/Card'
const ARTISTS_URL = config.API_URL + 'artists/'
@@ -29,7 +36,8 @@ export default {
name: 'browse',
components: {
Search,
- ArtistCard
+ ArtistCard,
+ RadioCard
},
data () {
return {
diff --git a/src/components/radios/Card.vue b/src/components/radios/Card.vue
new file mode 100644
index 0000000..1e49632
--- /dev/null
+++ b/src/components/radios/Card.vue
@@ -0,0 +1,37 @@
+<template>
+ <div class="ui card">
+ <div class="content">
+ <div class="header">Radio : {{ radio.name }}</div>
+ <div class="description">
+ {{ radio.description }}
+ </div>
+ </div>
+ <div class="extra content">
+ <radio-button class="right floated button" :type="type"></radio-button>
+ </div>
+ </div>
+</template>
+
+<script>
+import radios from '@/radios'
+import RadioButton from './Button'
+
+export default {
+ props: {
+ type: {type: String, required: true}
+ },
+ components: {
+ RadioButton
+ },
+ computed: {
+ radio () {
+ return radios.types[this.type]
+ }
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+</style>
diff --git a/src/radios/index.js b/src/radios/index.js
index a35741c..b468830 100644
--- a/src/radios/index.js
+++ b/src/radios/index.js
@@ -7,6 +7,20 @@ const CREATE_RADIO_URL = config.API_URL + 'radios/sessions/'
const GET_TRACK_URL = config.API_URL + 'radios/tracks/'
var radios = {
+ types: {
+ random: {
+ name: 'Random',
+ description: "Totally random picks, maybe you'll discover new things?"
+ },
+ favorites: {
+ name: 'Favorites',
+ description: 'Play your favorites tunes in a never-ending happiness loop.'
+ },
+ 'less-listened': {
+ name: 'Less listened',
+ description: "Listen to tracks you usually don't. It's time to restore some balance."
+ }
+ },
start (type, objectId) {
this.current.type = type
this.current.objectId = objectId
--
GitLab