Unify subscription handling across the codebase

src/components/SubscriptionButton.vue

@@ -0,0 +1,60 @@
+<template>
+  <v-btn
+    v-if="showButtons" outlined color="primary" @click="subscribeHandler"
+    class="ml-2"
+  >
+    {{ subscribed ? 'Unsubscribe' : 'Subscribe' }}
+  </v-btn>
+</template>
+
+<script>
+export default {
+  props: ['channelId'],
+  data: () => ({
+    showButtons: false,
+    subscribed: false
+  }),
+
+  methods: {
+    async checkStatus () {
+      this.showButtons = false
+      if (!(this.channelId && this.isAuthenticated)) {
+        return
+      }
+
+      const resp = await this.$store.dispatch('auth/makeRequest', {
+        path: '/subscribed',
+        params: {
+          channelId: this.channelId
+        }
+      })
+
+      this.subscribed = resp.subscribed
+      this.showButtons = true
+    },
+
+    async subscribeHandler () {
+      await this.$store.dispatch('auth/makeRequest', {
+        method: 'POST',
+        path: (this.subscribed ? '/unsubscribe' : '/subscribe'),
+        data: {
+          channelId: this.channelId
+        }
+      })
+      this.subscribed = !this.subscribed
+    }
+  },
+  computed: {
+    isAuthenticated () {
+      return this.$store.getters['auth/isCurrentlyAuthenticated']
+    }
+  },
+  mounted () {
+    this.checkStatus()
+  },
+  watch: {
+    channelId: 'checkStatus',
+    isAuthenticated: 'checkStatus'
+  }
+}
+</script>

src/routes/Channel.vue

@@ -11,12 +11,7 @@
           <div class="text-h5 ml-4">
             {{ channel.name }}
           </div>
-          <v-btn
-            v-if="subscribed != null" outlined color="primary" @click="subscribeHandler"
-            class="ml-2"
-          >
-            {{ subscribed ? 'Unsubscribe' : 'Subscribe' }}
-          </v-btn>
+          <SubscriptionButton :channel-id="this.channel.id" />
         </div>
         <v-card-text>
           <div v-html="renderedDescription" />
@@ -42,14 +37,14 @@ import { chunk as _chunk } from 'lodash-es'
 
 import ErrorHandler from '@/components/ErrorHandler'
 import VideoItem from '@/components/VideoItem.vue'
+import SubscriptionButton from '@/components/SubscriptionButton'
 
 import { LibPiped } from '@/tools/libpiped'
 
 export default {
   data () {
     return {
-      channel: null,
-      subscribed: null
+      channel: null
     }
   },
   metaInfo () {
@@ -99,7 +94,10 @@ export default {
   },
 
   mounted () {
-    this.getChannelData()
+    this.fetchChannel()
+  },
+  watch: {
+    '$route.params.channelId': 'fetchChannel'
   },
   methods: {
     async fetchChannel () {
@@ -108,40 +106,6 @@ export default {
       })
     },
 
-    async fetchSubscribedStatus () {
-      const { channelId } = this.$route.params
-      if (!(channelId && this.$store.getters['auth/isCurrentlyAuthenticated'])) {
-        return
-      }
-
-      const resp = await this.$store.dispatch('auth/makeRequest', {
-        path: '/subscribed',
-        params: {
-          channelId
-        }
-      })
-
-      this.subscribed = resp.subscribed
-    },
-
-    async subscribeHandler () {
-      await this.$store.dispatch('auth/makeRequest', {
-        method: 'POST',
-        path: (this.subscribed ? '/unsubscribe' : '/subscribe'),
-        data: {
-          channelId: this.channelId
-        }
-      })
-      this.subscribed = !this.subscribed
-    },
-
-    async getChannelData () {
-      return Promise.all([
-        this.fetchChannel(),
-        this.fetchSubscribedStatus()
-      ])
-    },
-
     onRelatedStreamsEndIntersect (entries) {
       if (entries[0].isIntersecting) {
         this.fetchMoreVideos()
@@ -172,6 +136,7 @@ export default {
     }
   },
   components: {
+    SubscriptionButton,
     ErrorHandler,
     VideoItem
   }

src/routes/Subscriptions.vue

@@ -8,12 +8,7 @@
           <v-card-title>{{ channel.name }}</v-card-title>
           <v-card-actions>
             <!-- Encapsulate into own item -->
-            <v-btn
-             outlined color="primary" @click.prevent="channel.subOrUnsub"
-             class="ml-2"
-            >
-              {{ channel.subscribed ? 'Unsubscribe' : 'Subscribe' }}
-            </v-btn>
+            <SubscriptionButton :channel-id="channel.id" />
           </v-card-actions>
         </v-card>
       </v-col>
@@ -24,8 +19,12 @@
 <script>
 import { chunk as _chunk } from 'lodash-es'
 
+import SubscriptionButton from '@/components/SubscriptionButton'
+import { LibPiped } from '@/tools/libpiped'
+
 export default {
   name: 'Subscriptions',
+  components: { SubscriptionButton },
   data: () => ({
     loaded: false,
     data: null
@@ -43,20 +42,9 @@ export default {
         path: '/subscriptions'
       })
       this.loaded = true
-      this.data = _chunk(resp.map(itm => {
-        itm.subscribed = true
-        itm.subOrUnsub = async () => {
-          await this.$store.dispatch('auth/makeRequest', {
-            method: 'POST',
-            path: (itm.subscribed ? '/unsubscribe' : '/subscribe'),
-            data: {
-              // this is horrible
-              channelId: itm.url.split('/')[2]
-            }
-          })
-          itm.subscribed = !itm.subscribed
-        }
-        return itm
+      this.data = _chunk(resp.map(r => {
+        r.id = LibPiped.determineVideoIdFromChannelURL(r.url)
+        return r
       }), 6)
     }
   },

src/routes/WatchVideo.vue

@@ -52,14 +52,7 @@
                   {{ video.uploader }}
                 </a>
                 <div class="ml-4">
-                  <v-btn
-                    v-if="$store.getters['auth/isCurrentlyAuthenticated'] && subscribed != null"
-                    @click.prevent="subscribeHandler"
-                    color="primary"
-                    outlined
-                  >
-                    {{ subscribed ? "Unsubscribe" : "Subscribe" }}
-                  </v-btn>
+                  <SubscriptionButton :channel-id="channelId" />
                 </div>
               </div>
             </router-link>
@@ -100,6 +93,7 @@ import VideoItem from '@/components/VideoItem.vue'
 import ErrorHandler from '@/components/ErrorHandler.vue'
 import VideoComment from '@/components/VideoComment'
 import { addWatchedVideo } from '@/store/watched-videos-db'
+import SubscriptionButton from '@/components/SubscriptionButton'
 
 export default {
   name: 'WatchVideo',
@@ -113,7 +107,6 @@ export default {
       selectedAutoLoop: false,
       showDesc: true,
       comments: null,
-      subscribed: null,
       channelId: null
     }
   },
@@ -277,7 +270,6 @@ export default {
       )
 
       await Promise.all([
-        this.fetchSubscribedStatus(),
         addWatchedVideo(this.video)
       ])
     },
@@ -288,29 +280,6 @@ export default {
       this.fetchComments().then(data => (this.comments = data))
     },
 
-    async fetchSubscribedStatus () {
-      if (!this.channelId || !this.$store.getters['auth/isCurrentlyAuthenticated']) return
-
-      this.$store.dispatch('auth/makeRequest', {
-        path: '/subscribed',
-        params: {
-          channelId: this.channelId
-        }
-      }).then(json => {
-        this.subscribed = json.subscribed
-      })
-    },
-    async subscribeHandler () {
-      await this.$store.dispatch('auth/makeRequest', {
-        method: 'POST',
-        path: (this.subscribed ? '/unsubscribe' : '/subscribe'),
-        data: {
-          channelId: this.channelId
-        }
-      })
-      this.subscribed = !this.subscribed
-    },
-
     getVideoId () {
       return this.$route.query.v || this.$route.params.v
     }
@@ -321,6 +290,7 @@ export default {
     }
   },
   components: {
+    SubscriptionButton,
     VideoComment,
     Player,
     VideoItem,

src/tools/libpiped.js

@@ -70,6 +70,11 @@ class LibPiped {
     const loc = new URL(path, 'http://localhost')
     return loc.searchParams.get('v')
   }
+
+  determineVideoIdFromChannelURL (path) {
+    const pathParts = path.split('/')
+    return pathParts[2]
+  }
 }
 
 const lp = new LibPiped()