Video title filter / blacklist

src/renderer/components/distraction-settings/distraction-settings.js

@@ -120,13 +120,16 @@ export default defineComponent({
         return ch
       })
     },
+    forbiddenTitles: function() {
+      return JSON.parse(this.$store.getters.getForbiddenTitles)
+    },
     hideSubscriptionsLiveTooltip: function () {
       return this.$t('Tooltips.Distraction Free Settings.Hide Subscriptions Live', {
         appWideSetting: this.$t('Settings.Distraction Free Settings.Hide Live Streams'),
         subsection: this.$t('Settings.Distraction Free Settings.Sections.General'),
         settingsSection: this.$t('Settings.Distraction Free Settings.Distraction Free Settings')
       })
-    }
+    },
   },
   mounted: function () {
     this.verifyChannelsHidden()
@@ -148,6 +151,9 @@ export default defineComponent({
     handleChannelsHidden: function (value) {
       this.updateChannelsHidden(JSON.stringify(value))
     },
+    handleForbiddenTitles: function (value) {
+      this.updateForbiddenTitles(JSON.stringify(value))
+    },
     handleChannelsExists: function () {
       showToast(this.$t('Settings.Distraction Free Settings.Hide Channels Already Exists'))
     },
@@ -206,6 +212,7 @@ export default defineComponent({
       'updateHideSharingActions',
       'updateHideChapters',
       'updateChannelsHidden',
+      'updateForbiddenTitles',
       'updateShowDistractionFreeTitles',
       'updateHideFeaturedChannels',
       'updateHideChannelShorts',

src/renderer/components/distraction-settings/distraction-settings.vue

@@ -239,12 +239,24 @@
         :tooltip="$t('Tooltips.Distraction Free Settings.Hide Channels')"
         :validate-tag-name="validateChannelId"
         :find-tag-info="findChannelTagInfo"
+        :are-channel-tags="true"
         @invalid-name="handleInvalidChannel"
         @error-find-tag-info="handleChannelAPIError"
         @change="handleChannelsHidden"
         @already-exists="handleChannelsExists"
       />
     </ft-flex-box>
+    <ft-flex-box>
+      <ft-input-tags
+        :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"
+        :tag-list="forbiddenTitles"
+        :min-input-length="3"
+        :tooltip="$t('Tooltips.Distraction Free Settings.Hide Videos and Playlists Containing Text')"
+        @change="handleForbiddenTitles"
+      />
+    </ft-flex-box>
   </ft-settings-section>
 </template>
 

src/renderer/components/ft-community-post/ft-community-post.js

@@ -25,6 +25,10 @@ export default defineComponent({
     appearance: {
       type: String,
       required: true
+    },
+    hideForbiddenTitles: {
+      type: Boolean,
+      default: true
     }
   },
   data: function () {
@@ -44,6 +48,15 @@ export default defineComponent({
   computed: {
     listType: function () {
       return this.$store.getters.getListType
+    },
+
+    forbiddenTitles() {
+      if (!this.hideForbiddenTitles) { return [] }
+      return JSON.parse(this.$store.getters.getForbiddenTitles)
+    },
+
+    hideVideo() {
+      return this.forbiddenTitles.some((text) => this.data.postContent.content.title?.toLowerCase().includes(text.toLowerCase()))
     }
   },
   created: function () {

src/renderer/components/ft-community-post/ft-community-post.scss

@@ -13,6 +13,12 @@
   box-sizing: border-box;
 }
 
+.hiddenVideo {
+  font-style: italic;
+  opacity: 0.85;
+  text-align: center;
+}
+
 .communityImage {
   block-size: 100%;
   inline-size: 100%;

src/renderer/components/ft-community-post/ft-community-post.vue

@@ -90,9 +90,16 @@
       v-if="type === 'video'"
     >
       <ft-list-video
+        v-if="!hideVideo"
         :data="data.postContent.content"
         appearance=""
       />
+      <p
+        v-else
+        class="hiddenVideo"
+      >
+        {{ '[' + $t('Channel.Community.Video hidden by FreeTube') + ']' }}
+      </p>
     </div>
     <div
       v-if="type === 'poll' || type === 'quiz'"

src/renderer/components/ft-element-list/ft-element-list.js

@@ -30,6 +30,10 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    hideForbiddenTitles: {
+      type: Boolean,
+      default: true
+    }
   },
   computed: {
     listType: function () {

src/renderer/components/ft-element-list/ft-element-list.vue

@@ -12,6 +12,7 @@
       :layout="displayValue"
       :show-video-with-last-viewed-playlist="showVideoWithLastViewedPlaylist"
       :use-channels-hidden-preference="useChannelsHiddenPreference"
+      :hide-forbidden-titles="hideForbiddenTitles"
     />
   </ft-auto-grid>
 </template>

src/renderer/components/ft-input-tags/ft-input-tags.js

@@ -1,12 +1,17 @@
 import { defineComponent } from 'vue'
 import FtInput from '../ft-input/ft-input.vue'
+import { showToast } from '../../helpers/utils'
 
 export default defineComponent({
   name: 'FtInputTags',
   components: {
     'ft-input': FtInput,
   },
   props: {
+    areChannelTags: {
+      type: Boolean,
+      default: false
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -23,6 +28,10 @@ export default defineComponent({
       type: String,
       required: true
     },
+    minInputLength: {
+      type: Number,
+      default: 1
+    },
     showActionButton: {
       type: Boolean,
       default: true
@@ -46,6 +55,30 @@ export default defineComponent({
   },
   methods: {
     updateTags: async function (text, _e) {
+      if (this.areChannelTags) {
+        await this.updateChannelTags(text, _e)
+        return
+      }
+      // add tag and update tag list
+      const trimmedText = text.trim()
+
+      if (this.minInputLength > trimmedText.length) {
+        showToast(this.$tc('Trimmed input must be at least N characters long', this.minInputLength, { length: this.minInputLength }))
+        return
+      }
+
+      if (this.tagList.includes(trimmedText)) {
+        showToast(this.$t('Tag already exists', { tagName: trimmedText }))
+        return
+      }
+
+      const newList = this.tagList.slice(0)
+      newList.push(trimmedText)
+      this.$emit('change', newList)
+      // clear input box
+      this.$refs.tagNameInput.handleClearTextClick()
+    },
+    updateChannelTags: async function (text, _e) {
       // get text without spaces after last '/' in url, if any
       const name = text.split('/').pop().trim()
 
@@ -73,6 +106,20 @@ export default defineComponent({
       this.$refs.tagNameInput.handleClearTextClick()
     },
     removeTag: function (tag) {
+      if (this.areChannelTags) {
+        this.removeChannelTag(tag)
+        return
+      }
+      // Remove tag from list
+      const tagName = tag.trim()
+      if (this.tagList.includes(tagName)) {
+        const newList = this.tagList.slice(0)
+        const index = newList.indexOf(tagName)
+        newList.splice(index, 1)
+        this.$emit('change', newList)
+      }
+    },
+    removeChannelTag: function (tag) {
       // Remove tag from list
       if (this.tagList.some((tmpTag) => tmpTag.name === tag.name)) {
         const newList = this.tagList.filter((tmpTag) => tmpTag.name !== tag.name)

src/renderer/components/ft-input-tags/ft-input-tags.vue

@@ -13,6 +13,7 @@
       :disabled="disabled"
       :placeholder="tagNamePlaceholder"
       :label="label"
+      :min-input-length="minInputLength"
       :show-label="true"
       :tooltip="tooltip"
       :show-action-button="showActionButton"
@@ -26,18 +27,21 @@
           v-for="tag in tagList"
           :key="tag.id"
         >
-          <router-link
-            v-if="tag.icon"
-            :to="tag.iconHref ?? ''"
-            class="tag-icon-link"
-          >
-            <img
-              :src="tag.icon"
-              alt=""
-              class="tag-icon"
+          <template v-if="areChannelTags">
+            <router-link
+              v-if="tag.icon"
+              :to="tag.iconHref ?? ''"
+              class="tag-icon-link"
             >
-          </router-link>
-          <span>{{ (tag.preferredName) ? tag.preferredName : tag.name }}</span>
+              <img
+                :src="tag.icon"
+                alt=""
+                class="tag-icon"
+              >
+            </router-link>
+            <span>{{ (tag.preferredName) ? tag.preferredName : tag.name }}</span>
+          </template>
+          <span v-else>{{ tag }}</span>
           <font-awesome-icon
             v-if="!disabled"
             :icon="['fas', 'fa-times']"

src/renderer/components/ft-input/ft-input.js

@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue'
-import FtTooltip from '../ft-tooltip/ft-tooltip.vue'
 import { mapActions } from 'vuex'
+
+import FtTooltip from '../ft-tooltip/ft-tooltip.vue'
 import { isKeyboardEventKeyPrintableChar, isNullOrEmpty } from '../../helpers/strings'
 
 export default defineComponent({
@@ -143,7 +144,9 @@ export default defineComponent({
   methods: {
     handleClick: function (e) {
       // No action if no input text
-      if (!this.inputDataPresent) { return }
+      if (!this.inputDataPresent) {
+        return
+      }
 
       this.searchState.showOptions = false
       this.searchState.selectedOption = -1

src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js

@@ -43,6 +43,10 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    hideForbiddenTitles: {
+      type: Boolean,
+      default: true
+    },
   },
   data: function () {
     return {
@@ -65,6 +69,10 @@ export default defineComponent({
         return ch
       })
     },
+    forbiddenTitles: function() {
+      if (!this.hideForbiddenTitles) { return [] }
+      return JSON.parse(this.$store.getters.getForbiddenTitles)
+    },
     hideUpcomingPremieres: function () {
       return this.$store.getters.getHideUpcomingPremieres
     },
@@ -102,6 +110,9 @@ export default defineComponent({
           // hide videos by author
           return false
         }
+        if (this.forbiddenTitles.some((text) => this.data.title?.toLowerCase().includes(text.toLowerCase()))) {
+          return false
+        }
       } else if (dataType === 'channel') {
         const attrsToCheck = [
           // Local API
@@ -117,6 +128,9 @@ export default defineComponent({
           return false
         }
       } else if (dataType === 'playlist') {
+        if (this.forbiddenTitles.some((text) => this.data.title?.toLowerCase().includes(text.toLowerCase()))) {
+          return false
+        }
         const attrsToCheck = [
           // Local API
           data.channelId,

src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue

@@ -31,6 +31,7 @@
       />
       <ft-community-post
         v-else-if="finalDataType === 'community'"
+        :hide-forbidden-titles="hideForbiddenTitles"
         :appearance="appearance"
         :data="data"
       />

src/renderer/components/ft-list-video-lazy/ft-list-video-lazy.js

@@ -71,10 +71,15 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    hideForbiddenTitles: {
+      type: Boolean,
+      default: true
+    }
   },
   data: function () {
     return {
-      visible: false
+      visible: false,
+      display: 'block'
     }
   },
   computed: {
@@ -91,9 +96,15 @@ export default defineComponent({
       })
     },
 
+    forbiddenTitles() {
+      if (!this.hideForbiddenTitles) { return [] }
+      return JSON.parse(this.$store.getters.getForbiddenTitles)
+    },
+
     shouldBeVisible() {
       return !(this.channelsHidden.some(ch => ch.name === this.data.authorId) ||
-        this.channelsHidden.some(ch => ch.name === this.data.author))
+        this.channelsHidden.some(ch => ch.name === this.data.author) ||
+        this.forbiddenTitles.some((text) => this.data.title?.toLowerCase().includes(text.toLowerCase())))
     }
   },
   created() {
@@ -103,6 +114,8 @@ export default defineComponent({
     onVisibilityChanged: function (visible) {
       if (visible && this.shouldBeVisible) {
         this.visible = visible
+      } else if (visible) {
+        this.display = 'none'
       }
     }
   }

src/renderer/components/ft-list-video-lazy/ft-list-video-lazy.vue

@@ -4,6 +4,7 @@
       callback: onVisibilityChanged,
       once: true,
     }"
+    :style="{ display }"
   >
     <ft-list-video
       v-if="visible"

src/renderer/components/watch-video-playlist/watch-video-playlist.vue

@@ -144,6 +144,7 @@
             :playlist-reverse="reversePlaylist"
             :playlist-shuffle="shuffleEnabled"
             :playlist-loop="loopEnabled"
+            :hide-forbidden-titles="false"
             appearance="watchPlaylistItem"
             force-list-type="list"
             :initial-visible-state="index < (currentVideoIndexZeroBased + 4) && index > (currentVideoIndexZeroBased - 4)"

src/renderer/store/modules/settings.js

@@ -205,6 +205,7 @@ const state = {
   hideComments: false,
   hideFeaturedChannels: false,
   channelsHidden: '[]',
+  forbiddenTitles: '[]',
   hideVideoDescription: false,
   hideLiveChat: false,
   hideLiveStreams: false,