diff --git a/src/renderer/components/ft-profile-all-channels-list/ft-profile-all-channels-list.css b/src/renderer/components/ft-profile-all-channels-list/ft-profile-all-channels-list.css deleted file mode 100644 index c08a84b0..00000000 --- a/src/renderer/components/ft-profile-all-channels-list/ft-profile-all-channels-list.css +++ /dev/null @@ -1,5 +0,0 @@ -.card { - width: 85%; - margin: 0 auto; - margin-bottom: 30px; -} diff --git a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css new file mode 100644 index 00000000..8364deb4 --- /dev/null +++ b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css @@ -0,0 +1,17 @@ +.card { + width: 85%; + margin: 0 auto; + margin-bottom: 30px; +} + +.selected { + text-align: center; +} + +::v-deep .select-label { + width: 95%; +} + +::v-deep .select { + text-align-last: center; +} diff --git a/src/renderer/components/ft-profile-all-channels-list/ft-profile-all-channels-list.js b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js similarity index 85% rename from src/renderer/components/ft-profile-all-channels-list/ft-profile-all-channels-list.js rename to src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js index b5bbcf04..6ab9fdba 100644 --- a/src/renderer/components/ft-profile-all-channels-list/ft-profile-all-channels-list.js +++ b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js @@ -6,15 +6,17 @@ import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue' import FtChannelBubble from '../../components/ft-channel-bubble/ft-channel-bubble.vue' import FtButton from '../../components/ft-button/ft-button.vue' import FtPrompt from '../../components/ft-prompt/ft-prompt.vue' +import FtSelect from '../ft-select/ft-select.vue' export default Vue.extend({ - name: 'FtProfileAllChannelsList', + name: 'FtProfileFilterChannelsList', components: { 'ft-card': FtCard, 'ft-flex-box': FtFlexBox, 'ft-channel-bubble': FtChannelBubble, 'ft-button': FtButton, - 'ft-prompt': FtPrompt + 'ft-prompt': FtPrompt, + 'ft-select': FtSelect }, props: { profile: { @@ -25,7 +27,8 @@ export default Vue.extend({ data: function () { return { channels: [], - selectedLength: 0 + selectedLength: 0, + filteredProfileIndex: 0 } }, computed: { @@ -38,44 +41,21 @@ export default Vue.extend({ profileList: function () { return this.$store.getters.getProfileList }, + profileNameList: function () { + return this.profileList.flatMap((profile) => profile.name !== this.profile.name ? [profile.name] : []) + }, selectedText: function () { const localeText = this.$t('Profile.$ selected') return localeText.replace('$', this.selectedLength) - }, - primaryProfile: function () { - return JSON.parse(JSON.stringify(this.profileList[0])) } }, watch: { - profile: function () { - this.channels = JSON.parse(JSON.stringify(this.primaryProfile.subscriptions)).sort((a, b) => { - const nameA = a.name.toLowerCase() - const nameB = b.name.toLowerCase() - if (nameA < nameB) { - return -1 - } - if (nameA > nameB) { - return 1 - } - return 0 - }).filter((channel) => { - const index = this.profile.subscriptions.findIndex((sub) => { - return sub.id === channel.id - }) - - return index === -1 - }).map((channel) => { - if (this.backendPreference === 'invidious') { - channel.thumbnail = channel.thumbnail.replace('https://yt3.ggpht.com', `${this.invidiousInstance}/ggpht/`) - } - channel.selected = false - return channel - }) - } + profile: 'updateChannelList', + filteredProfileIndex: 'updateChannelList' }, mounted: function () { if (typeof this.profile.subscriptions !== 'undefined') { - this.channels = JSON.parse(JSON.stringify(this.profileList[0].subscriptions)).sort((a, b) => { + this.channels = JSON.parse(JSON.stringify(this.profileList[this.filteredProfileIndex].subscriptions)).sort((a, b) => { const nameA = a.name.toLowerCase() const nameB = b.name.toLowerCase() if (nameA < nameB) { @@ -101,6 +81,32 @@ export default Vue.extend({ } }, methods: { + updateChannelList () { + this.channels = JSON.parse(JSON.stringify(this.profileList[this.filteredProfileIndex].subscriptions)).sort((a, b) => { + const nameA = a.name.toLowerCase() + const nameB = b.name.toLowerCase() + if (nameA < nameB) { + return -1 + } + if (nameA > nameB) { + return 1 + } + return 0 + }).filter((channel) => { + const index = this.profile.subscriptions.findIndex((sub) => { + return sub.id === channel.id + }) + + return index === -1 + }).map((channel) => { + if (this.backendPreference === 'invidious') { + channel.thumbnail = channel.thumbnail.replace('https://yt3.ggpht.com', `${this.invidiousInstance}/ggpht/`) + } + channel.selected = false + return channel + }) + }, + handleChannelClick: function (index) { this.channels[index].selected = !this.channels[index].selected this.selectedLength = this.channels.filter((channel) => { @@ -108,6 +114,10 @@ export default Vue.extend({ }).length }, + handleProfileFilterChange: function (change) { + this.filteredProfileIndex = this.profileList.findIndex(profile => profile.name === change) + }, + addChannelToProfile: function () { if (this.selectedLength === 0) { this.showToast({ diff --git a/src/renderer/components/ft-profile-all-channels-list/ft-profile-all-channels-list.vue b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue similarity index 70% rename from src/renderer/components/ft-profile-all-channels-list/ft-profile-all-channels-list.vue rename to src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue index 4e59fc62..9965050a 100644 --- a/src/renderer/components/ft-profile-all-channels-list/ft-profile-all-channels-list.vue +++ b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue @@ -4,7 +4,16 @@

{{ $t("Profile.Other Channels") }}

-

+ + + +

{{ selectedText }}

@@ -38,5 +47,5 @@ -