diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Channel.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Channel.vue index 94d9ffa926..f07cd3facf 100644 --- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Channel.vue +++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Channel.vue @@ -11,15 +11,27 @@
- -
- -
-
+ + +
+ + +
+ {{ channel.subscribers }} subscribers +
+
@@ -70,6 +82,7 @@ export default { loading: false, loadingNextPage: false, selectedResult: null, + subscribed: false, } }, @@ -87,6 +100,7 @@ export default { this.loading = true try { this.channel = await this.request('youtube.get_channel', {id: this.id}) + this.subscribed = await this.request('youtube.is_subscribed', {channel_id: this.id}) } finally { this.loading = false } @@ -110,6 +124,12 @@ export default { } }, + async toggleSubscription() { + const action = this.subscribed ? 'unsubscribe' : 'subscribe' + await this.request(`youtube.${action}`, {channel_id: this.id}) + this.subscribed = !this.subscribed + }, + onScroll(e) { const el = e.target if (!el) @@ -139,5 +159,32 @@ export default { .channel { height: 100%; } + + .header { + .title-container { + flex: 1; + } + + .actions { + display: flex; + flex-direction: column; + align-items: center; + + button { + background: $default-bg-7; + padding: 0.5em 1em; + border-radius: 0.5em; + cursor: pointer; + + &:hover { + background: $hover-bg; + } + } + } + + .subscribers { + font-size: 0.8em; + } + } }