From 833355bbbd4f0cb57139f20ef02a45729c0f9c8b Mon Sep 17 00:00:00 2001 From: msagr Date: Mon, 8 Apr 2024 01:11:52 +0530 Subject: [PATCH 1/5] Add confirmation popup before unsubscribing --- .../components/ft-subscribe-button/ft-subscribe-button.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js index 806310857a6a..067be3ed2f6d 100644 --- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js +++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js @@ -105,6 +105,10 @@ export default defineComponent({ const currentProfile = deepCopy(profile) if (this.isProfileSubscribed(profile)) { + // confirmation pop-up + if (!confirm('Are you sure you want to unsubscribe?')) { + return + } currentProfile.subscriptions = currentProfile.subscriptions.filter((channel) => { return channel.id !== this.channelId }) From 4bbece374e99b9669625bae514c834d51c3c52ba Mon Sep 17 00:00:00 2001 From: msagr Date: Mon, 8 Apr 2024 05:03:46 +0530 Subject: [PATCH 2/5] Added translation to confirmation popup --- .../components/ft-subscribe-button/ft-subscribe-button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js index 067be3ed2f6d..3ac0a1a5f9f1 100644 --- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js +++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js @@ -106,7 +106,7 @@ export default defineComponent({ if (this.isProfileSubscribed(profile)) { // confirmation pop-up - if (!confirm('Are you sure you want to unsubscribe?')) { + if (!confirm(this.$t('Channels.Unsubscribe Prompt', { channelName: this.channelName }))) { return } currentProfile.subscriptions = currentProfile.subscriptions.filter((channel) => { From 82411291518e0b7f32cd316d2b7f57cdd9e594da Mon Sep 17 00:00:00 2001 From: msagr Date: Sat, 13 Apr 2024 13:51:17 +0530 Subject: [PATCH 3/5] Add accidental popup setting --- .../ft-subscribe-button.js | 80 +++++++++++-------- .../ft-subscribe-button.vue | 8 ++ .../subscription-settings.js | 6 +- .../subscription-settings.vue | 8 ++ src/renderer/store/modules/settings.js | 1 + static/locales/en-US.yaml | 1 + 6 files changed, 70 insertions(+), 34 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 index 3ac0a1a5f9f1..cffcb787e9b7 100644 --- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js +++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js @@ -3,6 +3,7 @@ import { defineComponent } from 'vue' import { mapActions } from 'vuex' import FtButton from '../../components/ft-button/ft-button.vue' +import FtPrompt from '../../components/ft-prompt/ft-prompt.vue' import { MAIN_PROFILE_ID } from '../../../constants' import { deepCopy, showToast } from '../../helpers/utils' @@ -10,7 +11,8 @@ import { deepCopy, showToast } from '../../helpers/utils' export default defineComponent({ name: 'FtSubscribeButton', components: { - 'ft-button': FtButton + 'ft-button': FtButton, + 'ft-prompt': FtPrompt }, props: { channelId: { @@ -41,7 +43,8 @@ export default defineComponent({ }, data: function () { return { - isProfileDropdownOpen: false + isProfileDropdownOpen: false, + showUnsubscribePopup: false } }, computed: { @@ -97,43 +100,19 @@ export default defineComponent({ }, methods: { - handleSubscription: function (profile = this.activeProfile) { + handleSubscription: function (option, profile = this.activeProfile) { if (this.channelId === '') { return } - const currentProfile = deepCopy(profile) - if (this.isProfileSubscribed(profile)) { - // confirmation pop-up - if (!confirm(this.$t('Channels.Unsubscribe Prompt', { channelName: this.channelName }))) { - return - } - currentProfile.subscriptions = currentProfile.subscriptions.filter((channel) => { - return channel.id !== this.channelId - }) - - this.updateProfile(currentProfile) - showToast(this.$t('Channel.Channel has been removed from your subscriptions')) - - if (profile._id === MAIN_PROFILE_ID) { - // Check if a subscription exists in a different profile. - // Remove from there as well. - let duplicateSubscriptions = 0 - - this.profileList.forEach((profileInList) => { - if (profileInList._id === MAIN_PROFILE_ID) { - return - } - duplicateSubscriptions += this.unsubscribe(profileInList, this.channelId) - }) - - if (duplicateSubscriptions > 0) { - const message = this.$t('Channel.Removed subscription from {count} other channel(s)', { count: duplicateSubscriptions }) - showToast(message) - } + if (this.$store.getters.getUnsubscriptionPopupStatus) { + this.showUnsubscribePopup = true + } else { + this.handleUnsubscription() } } else { + const currentProfile = deepCopy(profile) const subscription = { id: this.channelId, name: this.channelName, @@ -171,10 +150,45 @@ export default defineComponent({ } }, - toggleProfileDropdown: function() { + toggleProfileDropdown: function () { this.isProfileDropdownOpen = !this.isProfileDropdownOpen }, + handleUnsubscribeConfirmation: async function (value) { + this.showUnsubscribePopup = false + if (value === 'yes') { + this.handleUnsubscription() + } + }, + + handleUnsubscription: function (profile = this.activeProfile) { + const currentProfile = deepCopy(profile) + currentProfile.subscriptions = currentProfile.subscriptions.filter((channel) => { + return channel.id !== this.channelId + }) + + this.updateProfile(currentProfile) + showToast(this.$t('Channel.Channel has been removed from your subscriptions')) + + if (profile._id === MAIN_PROFILE_ID) { + // Check if a subscription exists in a different profile. + // Remove from there as well. + let duplicateSubscriptions = 0 + + this.profileList.forEach((profileInList) => { + if (profileInList._id === MAIN_PROFILE_ID) { + return + } + duplicateSubscriptions += this.unsubscribe(profileInList, this.channelId) + }) + + if (duplicateSubscriptions > 0) { + const message = this.$t('Channel.Removed subscription from {count} other channel(s)', { count: duplicateSubscriptions }) + showToast(message) + } + } + }, + isActiveProfile: function (profile) { return profile._id === this.activeProfile._id }, diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue index 7aded099d7e8..f87ff1a33fd1 100644 --- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue +++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue @@ -17,6 +17,14 @@ text-color="var(--text-with-main-color)" @click="handleSubscription" /> + +
+ +
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js index e510dbea0b59..b4098d0b7b43 100644 --- a/src/renderer/store/modules/settings.js +++ b/src/renderer/store/modules/settings.js @@ -226,6 +226,7 @@ const state = { hideVideoLikesAndDislikes: false, hideVideoViews: false, hideWatchedSubs: false, + unsubscriptionPopupStatus: false, hideLabelsSideBar: false, hideChapters: false, showDistractionFreeTitles: false, diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml index 60f91e35637c..6447ca38acb6 100644 --- a/static/locales/en-US.yaml +++ b/static/locales/en-US.yaml @@ -436,6 +436,7 @@ Settings: Manage Subscriptions: Manage Subscriptions Fetch Automatically: Fetch Feed Automatically Only Show Latest Video for Each Channel: Only Show Latest Video for Each Channel + Avoid Accidental Unsubscription: Avoid Accidental Unsubscription Distraction Free Settings: Distraction Free Settings: Distraction Free Settings Sections: From a36c62b63b77a7ab76aaaf1920ee37f5d2edf983 Mon Sep 17 00:00:00 2001 From: msagr Date: Sat, 13 Apr 2024 14:25:08 +0530 Subject: [PATCH 4/5] Remove extra parameter from handleSubscription function --- .../components/ft-subscribe-button/ft-subscribe-button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js index cffcb787e9b7..971efc42dc0c 100644 --- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js +++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js @@ -100,7 +100,7 @@ export default defineComponent({ }, methods: { - handleSubscription: function (option, profile = this.activeProfile) { + handleSubscription: function (profile = this.activeProfile) { if (this.channelId === '') { return } From a47666a5ef5bda603ed44a10049c9d9b77413170 Mon Sep 17 00:00:00 2001 From: msagr Date: Mon, 15 Apr 2024 15:49:01 +0530 Subject: [PATCH 5/5] Resolve unsubscription problem in case of mutiple profiles --- .../ft-subscribe-button/ft-subscribe-button.js | 13 +++++++------ .../ft-subscribe-button/ft-subscribe-button.vue | 2 +- 2 files changed, 8 insertions(+), 7 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 index 971efc42dc0c..115b75846ab3 100644 --- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js +++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js @@ -44,7 +44,7 @@ export default defineComponent({ data: function () { return { isProfileDropdownOpen: false, - showUnsubscribePopup: false + showUnsubscribePopupForProfile: null } }, computed: { @@ -107,9 +107,9 @@ export default defineComponent({ if (this.isProfileSubscribed(profile)) { if (this.$store.getters.getUnsubscriptionPopupStatus) { - this.showUnsubscribePopup = true + this.showUnsubscribePopupForProfile = profile } else { - this.handleUnsubscription() + this.handleUnsubscription(profile) } } else { const currentProfile = deepCopy(profile) @@ -155,13 +155,14 @@ export default defineComponent({ }, handleUnsubscribeConfirmation: async function (value) { - this.showUnsubscribePopup = false + const profile = this.showUnsubscribePopupForProfile + this.showUnsubscribePopupForProfile = null if (value === 'yes') { - this.handleUnsubscription() + this.handleUnsubscription(profile) } }, - handleUnsubscription: function (profile = this.activeProfile) { + handleUnsubscription: function (profile) { const currentProfile = deepCopy(profile) currentProfile.subscriptions = currentProfile.subscriptions.filter((channel) => { return channel.id !== this.channelId diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue index f87ff1a33fd1..096fe4a6c928 100644 --- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue +++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue @@ -18,7 +18,7 @@ @click="handleSubscription" />