diff --git a/front/src/components/activity/Like.vue b/front/src/components/activity/Like.vue new file mode 100644 index 0000000000000000000000000000000000000000..ffb8312787fa366490e0172a0f71dcdbffbfc77d --- /dev/null +++ b/front/src/components/activity/Like.vue @@ -0,0 +1,35 @@ +<template> + <div class="event"> + <div class="label"> + <i class="pink heart icon"></i> + </div> + <div class="content"> + <div class="summary"> + <slot name="user"></slot> + favorited a track + <slot name="date"></slot> + </div> + <div class="extra text"> + <router-link :to="{name: 'library.tracks.detail', params: {id: event.object.local_id }}">{{ event.object.name }}</router-link> + <template v-if="event.object.album">from album {{ event.object.album }}, by <em>{{ event.object.artist }}</em> + </template> + <template v-else>, by <em>{{ event.object.artist }}</em> + </template> + + </div> + </div> + </div> + +</template> + +<script> + +export default { + props: ['event'] +} +</script> + +<!-- Add "scoped" attribute to limit CSS to this component only --> +<style scoped lang="scss"> + +</style> diff --git a/front/src/components/activity/Listen.vue b/front/src/components/activity/Listen.vue new file mode 100644 index 0000000000000000000000000000000000000000..7c8ee8a69e30666b7fc09e1264e75e6b49ade867 --- /dev/null +++ b/front/src/components/activity/Listen.vue @@ -0,0 +1,35 @@ +<template> + <div class="event"> + <div class="label"> + <i class="orange sound icon"></i> + </div> + <div class="content"> + <div class="summary"> + <slot name="user"></slot> + listened to a track + <slot name="date"></slot> + </div> + <div class="extra text"> + <router-link :to="{name: 'library.tracks.detail', params: {id: event.object.local_id }}">{{ event.object.name }}</router-link> + <template v-if="event.object.album">from album {{ event.object.album }}, by <em>{{ event.object.artist }}</em> + </template> + <template v-else>, by <em>{{ event.object.artist }}</em> + </template> + + </div> + </div> + </div> + +</template> + +<script> + +export default { + props: ['event'] +} +</script> + +<!-- Add "scoped" attribute to limit CSS to this component only --> +<style scoped lang="scss"> + +</style>