81 lines
1.9 KiB
Vue
81 lines
1.9 KiB
Vue
<template>
|
|
<button
|
|
v-if="$store.state.auth.authenticated"
|
|
:class="['ui', 'pink', {'inverted': isSubscribed}, {'favorited': isSubscribed}, 'icon', 'labeled', 'button']"
|
|
@click.stop="toggle"
|
|
>
|
|
<i class="heart icon" />
|
|
<translate
|
|
v-if="isSubscribed"
|
|
translate-context="Content/Track/Button.Message"
|
|
>
|
|
Unsubscribe
|
|
</translate>
|
|
<translate
|
|
v-else
|
|
translate-context="Content/Track/*/Verb"
|
|
>
|
|
Subscribe
|
|
</translate>
|
|
</button>
|
|
<button
|
|
v-else
|
|
:class="['ui', 'pink', 'icon', 'labeled', 'button']"
|
|
@click="$refs.loginModal.show = true"
|
|
>
|
|
<i class="heart icon" />
|
|
<translate translate-context="Content/Track/*/Verb">
|
|
Subscribe
|
|
</translate>
|
|
<login-modal
|
|
ref="loginModal"
|
|
class="small"
|
|
:next-route="$route.fullPath"
|
|
:message="message.authMessage"
|
|
:cover="channel.artist.cover"
|
|
@created="$refs.loginModal.show = false;"
|
|
/>
|
|
</button>
|
|
</template>
|
|
|
|
<script>
|
|
import LoginModal from '@/components/common/LoginModal.vue'
|
|
|
|
export default {
|
|
components: {
|
|
LoginModal
|
|
},
|
|
props: {
|
|
channel: { type: Object, required: true }
|
|
},
|
|
computed: {
|
|
title () {
|
|
if (this.isSubscribed) {
|
|
return this.$pgettext('Content/Channel/Button/Verb', 'Subscribe')
|
|
} else {
|
|
return this.$pgettext('Content/Channel/Button/Verb', 'Unsubscribe')
|
|
}
|
|
},
|
|
isSubscribed () {
|
|
return this.$store.getters['channels/isSubscribed'](this.channel.uuid)
|
|
},
|
|
message () {
|
|
return {
|
|
authMessage: this.$pgettext('Popup/Message/Paragraph', 'You need to be logged in to subscribe to this channel')
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
toggle () {
|
|
if (this.isSubscribed) {
|
|
this.$emit('unsubscribed')
|
|
} else {
|
|
this.$emit('subscribed')
|
|
}
|
|
this.$store.dispatch('channels/toggle', this.channel.uuid)
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|