zapstore-mirror/io.freetubeapp.freetube
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Create Subscribe Button reusable component (#3468)

Browse Source 
* Create Subscribe Button component

Co-Authored-By: Minh Hang Nguyen (Jenny) <55411709+minhhang107@users.noreply.github.com>

* use defineComponent, remove unused prop

Co-Authored-By: absidue <48293849+absidue@users.noreply.github.com>

* readd unsubscribe method

* add comment

* Fix typo

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>

* remove unused code

* move json serialization

---------

Co-authored-by: Minh Hang Nguyen (Jenny) <55411709+minhhang107@users.noreply.github.com>
Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
Co-authored-by: PikachuEXE <pikachuexe@gmail.com>
This commit is contained in:
ChunkyProgrammer
2023-05-07 14:06:23 +02:00
committed by GitHub
co-authored by Minh Hang Nguyen absidue PikachuEXE
parent 2345752308
commit a9fa327c9b
11 changed files with 188 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/ft-subscribe-button/ft-subscribe-button.js
+146
View File
@@ -0,0 +1,146 @@
import { defineComponent } from 'vue'
import { mapActions } from 'vuex'
import FtButton from '../../components/ft-button/ft-button.vue'
import { MAIN_PROFILE_ID } from '../../../constants'
import { showToast } from '../../helpers/utils'
export default defineComponent({
name: 'FtSubscribeButton',
components: {
'ft-button': FtButton
},
props: {
channelId: {
type: String,
required: true
},
channelName: {
type: String,
required: true
},
channelThumbnail: {
type: String,
required: true
},
subscriptionCountText: {
default: '',
type: String,
required: false
}
},
computed: {
profileList: function () {
return this.$store.getters.getProfileList
},
activeProfile: function () {
return this.$store.getters.getActiveProfile
},
subscriptionInfo: function () {
return this.activeProfile.subscriptions.find((channel) => {
return channel.id === this.channelId
}) ?? null
},
isSubscribed: function () {
return this.subscriptionInfo !== null
},
subscribedText: function () {
let subscribedValue = (this.isSubscribed ? this.$t('Channel.Unsubscribe') : this.$t('Channel.Subscribe')).toUpperCase()
if (this.subscriptionCountText !== '') {
subscribedValue += ' ' + this.subscriptionCountText
}
return subscribedValue
}
},
methods: {
handleSubscription: function () {
if (this.channelId === '') {
return
}
const currentProfile = JSON.parse(JSON.stringify(this.activeProfile))
if (this.isSubscribed) {
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 (this.activeProfile._id === MAIN_PROFILE_ID) {
// Check if a subscription exists in a different profile.
// Remove from there as well.
let duplicateSubscriptions = 0
this.profileList.forEach((profile) => {
if (profile._id === MAIN_PROFILE_ID) {
return
}
duplicateSubscriptions += this.unsubscribe(profile, this.channelId)
})
if (duplicateSubscriptions > 0) {
const message = this.$t('Channel.Removed subscription from {count} other channel(s)', { count: duplicateSubscriptions })
showToast(message)
}
}
} else {
const subscription = {
id: this.channelId,
name: this.channelName,
thumbnail: this.channelThumbnail
}
currentProfile.subscriptions.push(subscription)
this.updateProfile(currentProfile)
showToast(this.$t('Channel.Added channel to your subscriptions'))
if (this.activeProfile._id !== MAIN_PROFILE_ID) {
const primaryProfile = JSON.parse(JSON.stringify(this.profileList.find(prof => {
return prof._id === MAIN_PROFILE_ID
})))
const index = primaryProfile.subscriptions.findIndex((channel) => {
return channel.id === this.channelId
})
if (index === -1) {
primaryProfile.subscriptions.push(subscription)
this.updateProfile(primaryProfile)
}
}
}
},
unsubscribe: function(profile, channelId) {
const parsedProfile = JSON.parse(JSON.stringify(profile))
const index = parsedProfile.subscriptions.findIndex((channel) => {
return channel.id === channelId
})
if (index !== -1) {
// use filter instead of splice in case the subscription appears multiple times
// https://github.com/FreeTubeApp/FreeTube/pull/3468#discussion_r1179290877
parsedProfile.subscriptions = parsedProfile.subscriptions.filter((x) => {
return x.id !== channelId
})
this.updateProfile(parsedProfile)
return 1
}
return 0
},
...mapActions([
'updateProfile'
])
}
})
src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss
+6
View File
@@ -0,0 +1,6 @@
.subscribeButton {
align-self: center;
height: 50%;
margin-bottom: 10px;
min-width: 150px;
}
src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue
+12
View File
@@ -0,0 +1,12 @@
<template>
<ft-button
:label="subscribedText"
class="subscribeButton"
background-color="var(--primary-color)"
text-color="var(--text-with-main-color)"
@click="handleSubscription"
/>
</template>
<script src="./ft-subscribe-button.js" />
<style scoped src="./ft-subscribe-button.scss" lang="scss" />
src/renderer/components/watch-video-info/watch-video-info.js
+3 -103
View File
@@ -1,19 +1,18 @@
import { defineComponent } from 'vue'
import { mapActions } from 'vuex'
import FtCard from '../ft-card/ft-card.vue'
import FtButton from '../ft-button/ft-button.vue'
import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
import FtShareButton from '../ft-share-button/ft-share-button.vue'
import { MAIN_PROFILE_ID } from '../../../constants'
import FtSubscribeButton from '../ft-subscribe-button/ft-subscribe-button.vue'
import { formatNumber, openExternalLink, showToast } from '../../helpers/utils'
export default defineComponent({
name: 'WatchVideoInfo',
components: {
'ft-card': FtCard,
'ft-button': FtButton,
'ft-icon-button': FtIconButton,
'ft-share-button': FtShareButton
'ft-share-button': FtShareButton,
'ft-subscribe-button': FtSubscribeButton
},
props: {
id: {
@@ -118,14 +117,6 @@ export default defineComponent({
return this.$i18n.locale.replace('_', '-')
},
profileList: function () {
return this.$store.getters.getProfileList
},
activeProfile: function () {
return this.$store.getters.getActiveProfile
},
hideVideoLikesAndDislikes: function () {
return this.$store.getters.getHideVideoLikesAndDislikes
},
@@ -211,26 +202,6 @@ export default defineComponent({
return formatNumber(this.viewCount) + ` ${this.$t('Video.Views').toLowerCase()}`
},
isSubscribed: function () {
const subIndex = this.activeProfile.subscriptions.findIndex((channel) => {
return channel.id === this.channelId
})
if (subIndex === -1) {
return false
} else {
return true
}
},
subscribedText: function () {
if (this.isSubscribed) {
return `${this.$t('Channel.Unsubscribe').toUpperCase()} ${this.subscriptionCountText}`
} else {
return `${this.$t('Channel.Subscribe').toUpperCase()} ${this.subscriptionCountText}`
}
},
dateString: function () {
const date = new Date(this.published)
const localeDateString = new Intl.DateTimeFormat([this.currentLocale, 'en'], { dateStyle: 'medium' }).format(date)
@@ -308,76 +279,6 @@ export default defineComponent({
}
},
handleSubscription: function () {
if (this.channelId === '') {
return
}
const currentProfile = JSON.parse(JSON.stringify(this.activeProfile))
const primaryProfile = JSON.parse(JSON.stringify(this.profileList[0]))
if (this.isSubscribed) {
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 (this.activeProfile._id === MAIN_PROFILE_ID) {
// Check if a subscription exists in a different profile.
// Remove from there as well.
let duplicateSubscriptions = 0
this.profileList.forEach((profile) => {
if (profile._id === MAIN_PROFILE_ID) {
return
}
const parsedProfile = JSON.parse(JSON.stringify(profile))
const index = parsedProfile.subscriptions.findIndex((channel) => {
return channel.id === this.channelId
})
if (index !== -1) {
duplicateSubscriptions++
parsedProfile.subscriptions = parsedProfile.subscriptions.filter((x) => {
return x.id !== this.channelId
})
this.updateProfile(parsedProfile)
}
})
if (duplicateSubscriptions > 0) {
const message = this.$t('Channel.Removed subscription from {count} other channel(s)', { count: duplicateSubscriptions })
showToast(message)
}
}
} else {
const subscription = {
id: this.channelId,
name: this.channelName,
thumbnail: this.channelThumbnail
}
currentProfile.subscriptions.push(subscription)
this.updateProfile(currentProfile)
showToast(this.$t('Channel.Added channel to your subscriptions'))
if (this.activeProfile._id !== MAIN_PROFILE_ID) {
const index = primaryProfile.subscriptions.findIndex((channel) => {
return channel.id === this.channelId
})
if (index === -1) {
primaryProfile.subscriptions.push(subscription)
this.updateProfile(primaryProfile)
}
}
}
},
handleFormatChange: function (format) {
switch (format) {
case 'dash':
@@ -457,7 +358,6 @@ export default defineComponent({
...mapActions([
'openInExternalPlayer',
'updateProfile',
'addVideo',
'removeVideo',
'downloadMedia'
src/renderer/components/watch-video-info/watch-video-info.vue
+5 -6
View File
@@ -30,13 +30,12 @@
>
{{ channelName }}
</router-link>
<ft-button
<ft-subscribe-button
v-if="!hideUnsubscribeButton"
:label="subscribedText"
class="subscribeButton"
background-color="var(--primary-color)"
text-color="var(--text-with-main-color)"
@click="handleSubscription"
:channel-id="channelId"
:channel-name="channelName"
:channel-thumbnail="channelThumbnail"
:subscription-count-text="subscriptionCountText"
/>
</div>
</div>
src/renderer/views/Channel/Channel.css
-7
View File
@@ -69,13 +69,6 @@
justify-content: space-between;
}
.subscribeButton {
height: 50px;
min-width: 150px;
align-self: center;
margin-bottom: 10px;
}
.shareIcon {
align-self: center;
}
src/renderer/views/Channel/Channel.js
+3 -83
View File
@@ -1,7 +1,6 @@
import { defineComponent } from 'vue'
import { mapActions } from 'vuex'
import FtCard from '../../components/ft-card/ft-card.vue'
import FtButton from '../../components/ft-button/ft-button.vue'
import FtInput from '../../components/ft-input/ft-input.vue'
import FtSelect from '../../components/ft-select/ft-select.vue'
import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
@@ -10,9 +9,9 @@ import FtLoader from '../../components/ft-loader/ft-loader.vue'
import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
import FtAgeRestricted from '../../components/ft-age-restricted/ft-age-restricted.vue'
import FtShareButton from '../../components/ft-share-button/ft-share-button.vue'
import FtSubscribeButton from '../../components/ft-subscribe-button/ft-subscribe-button.vue'
import autolinker from 'autolinker'
import { MAIN_PROFILE_ID } from '../../../constants'
import { copyToClipboard, extractNumberFromString, formatNumber, isNullOrEmpty, showToast } from '../../helpers/utils'
import packageDetails from '../../../../package.json'
import {
@@ -36,7 +35,6 @@ export default defineComponent({
name: 'Channel',
components: {
'ft-card': FtCard,
'ft-button': FtButton,
'ft-input': FtInput,
'ft-select': FtSelect,
'ft-flex-box': FtFlexBox,
@@ -44,7 +42,8 @@ export default defineComponent({
'ft-loader': FtLoader,
'ft-element-list': FtElementList,
'ft-age-restricted': FtAgeRestricted,
'ft-share-button': FtShareButton
'ft-share-button': FtShareButton,
'ft-subscribe-button': FtSubscribeButton
},
data: function () {
return {
@@ -122,10 +121,6 @@ export default defineComponent({
return this.$i18n.locale.replace('_', '-')
},
profileList: function () {
return this.$store.getters.getProfileList
},
activeProfile: function () {
return this.$store.getters.getActiveProfile
},
@@ -140,14 +135,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()
}
},
videoShortLiveSelectNames: function () {
return [
this.$t('Channel.Videos.Sort Types.Newest'),
@@ -1182,72 +1169,6 @@ export default defineComponent({
})
},
handleSubscription: function () {
const currentProfile = JSON.parse(JSON.stringify(this.activeProfile))
const primaryProfile = JSON.parse(JSON.stringify(this.profileList[0]))
if (this.isSubscribed) {
currentProfile.subscriptions = currentProfile.subscriptions.filter((channel) => {
return channel.id !== this.id
})
this.updateProfile(currentProfile)
showToast(this.$t('Channel.Channel has been removed from your subscriptions'))
if (this.activeProfile._id === MAIN_PROFILE_ID) {
// Check if a subscription exists in a different profile.
// Remove from there as well.
let duplicateSubscriptions = 0
this.profileList.forEach((profile) => {
if (profile._id === MAIN_PROFILE_ID) {
return
}
const parsedProfile = JSON.parse(JSON.stringify(profile))
const index = parsedProfile.subscriptions.findIndex((channel) => {
return channel.id === this.id
})
if (index !== -1) {
duplicateSubscriptions++
parsedProfile.subscriptions = parsedProfile.subscriptions.filter((x) => {
return x.id !== this.id
})
this.updateProfile(parsedProfile)
}
})
if (duplicateSubscriptions > 0) {
const message = this.$t('Channel.Removed subscription from {count} other channel(s)', { count: duplicateSubscriptions })
showToast(message)
}
}
} else {
const subscription = {
id: this.id,
name: this.channelName,
thumbnail: this.thumbnailUrl
}
currentProfile.subscriptions.push(subscription)
this.updateProfile(currentProfile)
showToast(this.$t('Channel.Added channel to your subscriptions'))
if (this.activeProfile._id !== MAIN_PROFILE_ID) {
const index = primaryProfile.subscriptions.findIndex((channel) => {
return channel.id === this.id
})
if (index === -1) {
primaryProfile.subscriptions.push(subscription)
this.updateProfile(primaryProfile)
}
}
}
},
setErrorMessage: function (errorMessage, responseHasNameAndThumbnail = false) {
this.isLoading = false
this.errorMessage = errorMessage
@@ -1455,7 +1376,6 @@ export default defineComponent({
},
...mapActions([
'updateProfile',
'updateSubscriptionDetails'
])
}
src/renderer/views/Channel/Channel.vue
+4 -6
View File
@@ -67,13 +67,11 @@
class="shareIcon"
/>
<ft-button
<ft-subscribe-button
v-if="!hideUnsubscribeButton && (!errorMessage || isSubscribed)"
:label="subscribedText"
background-color="var(--primary-color)"
text-color="var(--text-with-main-color)"
class="subscribeButton"
@click="handleSubscription"
:channel-id="id"
:channel-name="channelName"
:channel-thumbnail="thumbnailUrl"
/>
</div>
</div>
src/renderer/views/SubscribedChannels/SubscribedChannels.css
+1 -1
View File
@@ -62,7 +62,7 @@
}
.unsubscribeContainer .btn {
padding: 5px 10px;
height: 80%;
}
@media only screen and (max-width: 680px) {
src/renderer/views/SubscribedChannels/SubscribedChannels.js
+3 -59
View File
@@ -1,22 +1,19 @@
import { defineComponent } from 'vue'
import { mapActions } from 'vuex'
import FtButton from '../../components/ft-button/ft-button.vue'
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 { showToast } from '../../helpers/utils'
import FtSubscribeButton from '../../components/ft-subscribe-button/ft-subscribe-button.vue'
import { invidiousGetChannelInfo, youtubeImageUrlToInvidious, invidiousImageUrlToInvidious } from '../../helpers/api/invidious'
import { getLocalChannel } from '../../helpers/api/local'
export default defineComponent({
name: 'SubscribedChannels',
components: {
'ft-button': FtButton,
'ft-card': FtCard,
'ft-flex-box': FtFlexBox,
'ft-input': FtInput,
'ft-prompt': FtPrompt
'ft-subscribe-button': FtSubscribeButton
},
data: function () {
return {
@@ -29,12 +26,6 @@ export default defineComponent({
},
thumbnailSize: 176,
ytBaseURL: 'https://yt3.ggpht.com',
showUnsubscribePrompt: false,
unsubscribePromptValues: [
'yes',
'no'
],
channelToUnsubscribe: null,
errorCount: 0
}
},
@@ -73,13 +64,6 @@ export default defineComponent({
currentInvidiousInstance: function () {
return this.$store.getters.getCurrentInvidiousInstance
},
unsubscribePromptNames: function () {
return [
this.$t('Yes'),
this.$t('No')
]
}
},
watch: {
@@ -121,45 +105,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
// Sometimes relative protocol URLs are passed in
@@ -211,8 +156,7 @@ export default defineComponent({
},
...mapActions([
'updateProfile',
'updateSubscriptionDetails',
'updateSubscriptionDetails'
])
}
})
src/renderer/views/SubscribedChannels/SubscribedChannels.vue
+5 -12
View File
@@ -52,24 +52,17 @@
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)"
<ft-subscribe-button
class="btn"
:channel-id="channel.id"
:channel-name="channel.name"
:channel-thumbnail="channel.thumbnail"
/>
</div>
</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>