diff --git a/src/renderer/components/distraction-settings/distraction-settings.js b/src/renderer/components/distraction-settings/distraction-settings.js
index cdb0f4f0159b6..59ad5d9d2e82b 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.js
+++ b/src/renderer/components/distraction-settings/distraction-settings.js
@@ -111,6 +111,12 @@ export default defineComponent({
showDistractionFreeTitles: function () {
return this.$store.getters.getShowDistractionFreeTitles
},
+ showAddedChannelsHidden: function () {
+ return this.$store.getters.getShowAddedChannelsHidden
+ },
+ showAddedForbiddenTitles: function () {
+ return this.$store.getters.getShowAddedForbiddenTitles
+ },
channelsHidden: function () {
return JSON.parse(this.$store.getters.getChannelsHidden).map((ch) => {
// Legacy support
@@ -157,6 +163,12 @@ export default defineComponent({
handleChannelsExists: function () {
showToast(this.$t('Settings.Distraction Free Settings.Hide Channels Already Exists'))
},
+ handleAddedChannelsHidden: function () {
+ this.updateShowAddedChannelsHidden(!this.showAddedChannelsHidden)
+ },
+ handleAddedForbiddenTitles: function () {
+ this.updateShowAddedForbiddenTitles(!this.showAddedForbiddenTitles)
+ },
validateChannelId: function (text) {
return checkYoutubeChannelId(text)
},
@@ -224,6 +236,8 @@ export default defineComponent({
'updateHideSubscriptionsShorts',
'updateHideSubscriptionsLive',
'updateHideSubscriptionsCommunity',
+ 'updateShowAddedChannelsHidden',
+ 'updateShowAddedForbiddenTitles',
])
}
})
diff --git a/src/renderer/components/distraction-settings/distraction-settings.vue b/src/renderer/components/distraction-settings/distraction-settings.vue
index 40fc7a6e7e494..2dfcb323e6b08 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.vue
+++ b/src/renderer/components/distraction-settings/distraction-settings.vue
@@ -240,10 +240,12 @@
:validate-tag-name="validateChannelId"
:find-tag-info="findChannelTagInfo"
:are-channel-tags="true"
+ :show-tags="showAddedChannelsHidden"
@invalid-name="handleInvalidChannel"
@error-find-tag-info="handleChannelAPIError"
@change="handleChannelsHidden"
@already-exists="handleChannelsExists"
+ @toggle-show-tags="handleAddedChannelsHidden"
/>
@@ -251,10 +253,12 @@
:label="$t('Settings.Distraction Free Settings.Hide Videos and Playlists Containing Text')"
:tag-name-placeholder="$t('Settings.Distraction Free Settings.Hide Videos and Playlists Containing Text Placeholder')"
:show-action-button="true"
+ :show-tags="showAddedForbiddenTitles"
:tag-list="forbiddenTitles"
:min-input-length="3"
:tooltip="$t('Tooltips.Distraction Free Settings.Hide Videos and Playlists Containing Text')"
@change="handleForbiddenTitles"
+ @toggle-show-tags="handleAddedForbiddenTitles"
/>
diff --git a/src/renderer/components/ft-input-tags/ft-input-tags.css b/src/renderer/components/ft-input-tags/ft-input-tags.css
index 6d8a667689a33..9a26873ceb021 100644
--- a/src/renderer/components/ft-input-tags/ft-input-tags.css
+++ b/src/renderer/components/ft-input-tags/ft-input-tags.css
@@ -38,6 +38,13 @@
user-select: text;
}
+.checkbox-container {
+ display: flex;
+ align-items: center;
+ font-size: 12px;
+ accent-color: var(--accent-color);
+}
+
.tag-icon {
border-radius: 50%;
vertical-align: middle;
diff --git a/src/renderer/components/ft-input-tags/ft-input-tags.js b/src/renderer/components/ft-input-tags/ft-input-tags.js
index 281b3517171e8..2f3225ac81499 100644
--- a/src/renderer/components/ft-input-tags/ft-input-tags.js
+++ b/src/renderer/components/ft-input-tags/ft-input-tags.js
@@ -1,6 +1,7 @@
import { defineComponent } from 'vue'
import FtInput from '../ft-input/ft-input.vue'
import { showToast } from '../../helpers/utils'
+import { sanitizeForHtmlId } from '../../helpers/accessibility'
export default defineComponent({
name: 'FtInputTags',
@@ -36,6 +37,10 @@ export default defineComponent({
type: Boolean,
default: true
},
+ showTags: {
+ type: Boolean,
+ default: true
+ },
tagList: {
type: Array,
default: () => { return [] }
@@ -53,7 +58,12 @@ export default defineComponent({
default: (_) => ({ preferredName: '', icon: '' }),
}
},
- emits: ['already-exists', 'change', 'error-find-tag-info', 'invalid-name'],
+ emits: ['already-exists', 'change', 'error-find-tag-info', 'invalid-name', 'toggle-show-tags'],
+ computed: {
+ sanitizedId: function() {
+ return sanitizeForHtmlId(`checkbox-${this.label}`)
+ },
+ },
methods: {
updateTags: async function (text, _e) {
if (this.areChannelTags) {
@@ -126,6 +136,9 @@ export default defineComponent({
const newList = this.tagList.filter((tmpTag) => tmpTag.name !== tag.name)
this.$emit('change', newList)
}
- }
+ },
+ toggleShowTags: function () {
+ this.$emit('toggle-show-tags')
+ },
}
})
diff --git a/src/renderer/components/ft-input-tags/ft-input-tags.vue b/src/renderer/components/ft-input-tags/ft-input-tags.vue
index 4c387589e189f..d27eecf18e640 100644
--- a/src/renderer/components/ft-input-tags/ft-input-tags.vue
+++ b/src/renderer/components/ft-input-tags/ft-input-tags.vue
@@ -21,7 +21,24 @@
:force-action-button-icon-name="['fas', 'arrow-right']"
@click="updateTags"
/>
-
+
+
+
+
+