add to SubscribedChannel page

FreeTubeApp · Jan 26, 2023 · 226153a · 226153a
1 parent 3e4d72b
commit 226153a
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 83 deletions.
diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js
@@ -28,14 +28,16 @@ export default Vue.extend({
       type: Boolean,
       required: true
     },
-    subscribedText: {
+    subscriptionCountText: {
+      default: '',
       type: String,
-      required: true
+      required: false
     }
   },
   data: function () {
     return {
-      showProfiles: false
+      showProfiles: false,
+      subscribedText: ''
     }
   },
   computed: {
@@ -79,6 +81,13 @@ export default Vue.extend({
       })
     }
   },
+  mounted: function() {
+    let subscribedValue = (this.isSubscribed ? this.$t('Channel.Unsubscribe') : this.$t('Channel.Subscribe')).toUpperCase()
+    if (this.subscriptionCountText !== '') {
+      subscribedValue += ' ' + this.subscriptionCountText
+    }
+    this.subscribedText = subscribedValue
+  },
   methods: {
     subscribe: function (profile, subscribe = true, event) {
       if (event instanceof KeyboardEvent) {

diff --git a/src/renderer/components/watch-video-info/watch-video-info.js b/src/renderer/components/watch-video-info/watch-video-info.js
@@ -255,14 +255,6 @@ export default defineComponent({
       }
     },
 
-    subscribedText: function () {
-      if (this.isSubscribed) {
-        return `${this.$t('Channel.Unsubscribe').toUpperCase()} ${this.subscriptionCountText}`
-      } else {
-        return `${this.$t('Channel.Subscribe').toUpperCase()} ${this.subscriptionCountText}`
-      }
-    },
-
     dateString() {
       const date = new Date(this.published)
       const localeDateString = new Intl.DateTimeFormat([this.currentLocale, 'en'], { dateStyle: 'medium' }).format(date)

diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
@@ -36,7 +36,7 @@
               :channel-name="channelName"
               :channel-thumbnail="channelThumbnail"
               :is-subscribed="isSubscribed"
-              :subscribed-text="subscribedText"
+              :subscription-count-text="subscriptionCountText"
             />
           </div>
         </div>

diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js
@@ -120,14 +120,6 @@ export default defineComponent({
       return this.subscriptionInfo !== null
     },
 
-    subscribedText: function () {
-      if (this.isSubscribed) {
-        return this.$t('Channel.Unsubscribe').toUpperCase()
-      } else {
-        return this.$t('Channel.Subscribe').toUpperCase()
-      }
-    },
-
     videoSelectNames: function () {
       return [
         this.$t('Channel.Videos.Sort Types.Newest'),

diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue
@@ -66,7 +66,6 @@
               :channel-name="channelName"
               :channel-thumbnail="thumbnailUrl"
               :is-subscribed="isSubscribed"
-              :subscribed-text="subscribedText"
             />
           </div>
         </div>

diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.css b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
@@ -15,7 +15,7 @@
 .channels {
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr) );
+  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
   gap: 2.5rem;
   margin-top: 2rem;
 }

diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.js b/src/renderer/views/SubscribedChannels/SubscribedChannels.js
@@ -5,8 +5,8 @@ import FtCard from '../../components/ft-card/ft-card.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import FtInput from '../../components/ft-input/ft-input.vue'
 import FtPrompt from '../../components/ft-prompt/ft-prompt.vue'
+import FtSubscribeButton from '../../components/ft-subscribe-button/ft-subscribe-button.vue'
 import ytch from 'yt-channel-info'
-import { showToast } from '../../helpers/utils'
 import { invidiousGetChannelInfo, youtubeImageUrlToInvidious, invidiousImageUrlToInvidious } from '../../helpers/api/invidious'
 
 export default defineComponent({
@@ -16,7 +16,8 @@ export default defineComponent({
     'ft-card': FtCard,
     'ft-flex-box': FtFlexBox,
     'ft-input': FtInput,
-    'ft-prompt': FtPrompt
+    'ft-prompt': FtPrompt,
+    'ft-subscribe-button': FtSubscribeButton
   },
   data: function () {
     return {
@@ -121,45 +122,6 @@ export default defineComponent({
       })
     },
 
-    handleUnsubscribeButtonClick: function(channel) {
-      this.channelToUnsubscribe = channel
-      this.showUnsubscribePrompt = true
-    },
-
-    handleUnsubscribePromptClick: function(value) {
-      this.showUnsubscribePrompt = false
-      if (value !== 'yes') {
-        this.channelToUnsubscribe = null
-        return
-      }
-      this.unsubscribeChannel()
-    },
-
-    unsubscribeChannel: function () {
-      const currentProfile = JSON.parse(JSON.stringify(this.activeProfile))
-      let index = currentProfile.subscriptions.findIndex(channel => {
-        return channel.id === this.channelToUnsubscribe.id
-      })
-      currentProfile.subscriptions.splice(index, 1)
-
-      this.updateProfile(currentProfile)
-      showToast(this.$t('Channels.Unsubscribed', { channelName: this.channelToUnsubscribe.name }))
-
-      index = this.subscribedChannels.findIndex(channel => {
-        return channel.id === this.channelToUnsubscribe.id
-      })
-      this.subscribedChannels.splice(index, 1)
-
-      index = this.filteredChannels.findIndex(channel => {
-        return channel.id === this.channelToUnsubscribe.id
-      })
-      if (index !== -1) {
-        this.filteredChannels.splice(index, 1)
-      }
-
-      this.channelToUnsubscribe = null
-    },
-
     thumbnailURL: function(originalURL) {
       let newURL = originalURL
       if (new URL(originalURL).hostname === 'yt3.ggpht.com') {
@@ -184,7 +146,7 @@ export default defineComponent({
         setTimeout(() => {
           ytch.getChannelInfo({ channelId: channel.id }).then(response => {
             this.updateSubscriptionDetails({
-              channelThumbnailUrl: this.thumbnailURL(response.authorThumbnails[0].url),
+              channelThumbnailUrl: response.authorThumbnails[0].url,
               channelName: channel.name,
               channelId: channel.id
             })
@@ -194,7 +156,7 @@ export default defineComponent({
         setTimeout(() => {
           invidiousGetChannelInfo(channel.id).then(response => {
             this.updateSubscriptionDetails({
-              channelThumbnailUrl: this.thumbnailURL(response.authorThumbnails[0].url),
+              channelThumbnailUrl: response.authorThumbnails[0].url,
               channelName: channel.name,
               channelId: channel.id
             })
@@ -204,7 +166,6 @@ export default defineComponent({
     },
 
     ...mapActions([
-      'updateProfile',
       'updateSubscriptionDetails',
     ])
   }

diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.vue b/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
@@ -48,28 +48,17 @@
             >
               {{ channel.name }}
             </router-link>
-            <div
+            <ft-subscribe-button
               v-if="!hideUnsubscribeButton"
-              class="unsubscribeContainer"
-            >
-              <ft-button
-                :label="$t('Channels.Unsubscribe')"
-                background-color="var(--search-bar-color)"
-                text-color="var(--secondary-text-color)"
-                @click="handleUnsubscribeButtonClick(channel)"
-              />
-            </div>
+              :channel-id="channel.id"
+              :channel-name="channel.name"
+              :channel-thumbnail="channel.thumbnail"
+              :is-subscribed="true"
+            />
           </div>
         </ft-flex-box>
       </template>
     </ft-card>
-    <ft-prompt
-      v-if="showUnsubscribePrompt"
-      :label="$t('Channels.Unsubscribe Prompt', { channelName: channelToUnsubscribe.name })"
-      :option-names="unsubscribePromptNames"
-      :option-values="unsubscribePromptValues"
-      @click="handleUnsubscribePromptClick"
-    />
   </div>
 </template>