From 21ac87394a7062c12a20ebc5d356916effa330ac Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sat, 13 Jul 2024 00:40:29 +0200
Subject: [PATCH] [YouTube UI] Added channel subscribe/unsubscribe buttons.

---
 .../Media/Providers/YouTube/Channel.vue       | 63 ++++++++++++++++---
 1 file changed, 55 insertions(+), 8 deletions(-)

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 @@
         <div class="row info-container">
           <div class="info">
             <div class="row">
-              <a :href="channel.url" target="_blank" rel="noopener noreferrer" v-if="channel?.image?.length">
-                <div class="image">
-                  <img :src="channel.image" />
-                </div>
-              </a>
+              <div class="title-container">
+                <a :href="channel.url" target="_blank" rel="noopener noreferrer" v-if="channel?.image?.length">
+                  <div class="image">
+                    <img :src="channel.image" />
+                  </div>
+                </a>
 
-              <a class="title" :href="channel.url" target="_blank" rel="noopener noreferrer">
-                {{ channel?.name }}
-              </a>
+                <a class="title" :href="channel.url" target="_blank" rel="noopener noreferrer">
+                  {{ channel?.name }}
+                </a>
+              </div>
+
+              <div class="actions">
+                <button :title="subscribed ? 'Unsubscribe' : 'Subscribe'" @click="toggleSubscription">
+                  {{ subscribed ? 'Unsubscribe' : 'Subscribe' }}
+                </button>
+
+                <div class="subscribers" v-if="channel.subscribers != null && (channel.subscribers || 0) >= 0">
+                  {{ channel.subscribers }} subscribers
+                </div>
+              </div>
             </div>
 
             <div class="description" v-if="channel?.description">
@@ -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;
+    }
+  }
 }
 </style>