Merge branch 'development' into sabr-pr

* development:
  Change clear filter button from text to icon (FreeTubeApp#8205)
  Feat clickable playlist progress bar (FreeTubeApp#7782)
  Add Hide channels based on text (FreeTubeApp#7948)
  Clean up defunct shaka-player types patching (FreeTubeApp#8224)

Author: PikachuEXE

_scripts/patchShaka.mjs

@@ -1,60 +1,12 @@
-// This script fixes shaka not exporting its type definitions and referencing the Roboto font on google fonts in its CSS
-// by adding an export line to the type definitions and updating the CSS to point to the local Roboto font
+// This script fixes shaka-player referencing the Roboto font on google fonts in its CSS
+// by updating the CSS to point to the local Roboto font
 // this script only makes changes if they are needed, so running it multiple times doesn't cause any problems
 
-import { appendFileSync, closeSync, ftruncateSync, openSync, readFileSync, writeSync } from 'fs'
+import { closeSync, ftruncateSync, openSync, readFileSync, writeSync } from 'fs'
 import { resolve } from 'path'
 
 const SHAKA_DIST_DIR = resolve(import.meta.dirname, '../node_modules/shaka-player/dist')
 
-function fixTypes() {
-  let fixedTypes = false
-
-  let fileHandleNormal
-  try {
-    fileHandleNormal = openSync(`${SHAKA_DIST_DIR}/shaka-player.ui.d.ts`, 'a+')
-
-    const contents = readFileSync(fileHandleNormal, 'utf-8')
-
-    // This script is run after every `yarn install`, even if shaka-player wasn't updated
-    // So we want to check first, if we actually need to make any changes
-    // or if the ones from the previous run are still intact
-    if (!contents.includes('export default shaka')) {
-      appendFileSync(fileHandleNormal, 'export default shaka;\n')
-
-      fixedTypes = true
-    }
-  } finally {
-    if (typeof fileHandleNormal !== 'undefined') {
-      closeSync(fileHandleNormal)
-    }
-  }
-
-  let fileHandleDebug
-  try {
-    fileHandleDebug = openSync(`${SHAKA_DIST_DIR}/shaka-player.ui.debug.d.ts`, 'a+')
-
-    const contents = readFileSync(fileHandleDebug, 'utf-8')
-
-    // This script is run after every `yarn install`, even if shaka-player wasn't updated
-    // So we want to check first, if we actually need to make any changes
-    // or if the ones from the previous run are still intact
-    if (!contents.includes('export default shaka')) {
-      appendFileSync(fileHandleDebug, 'export default shaka;\n')
-
-      fixedTypes = true
-    }
-  } finally {
-    if (typeof fileHandleDebug !== 'undefined') {
-      closeSync(fileHandleDebug)
-    }
-  }
-
-  if (fixedTypes) {
-    console.log('Fixed shaka-player types')
-  }
-}
-
 function removeRobotoFont() {
   let cssFileHandle
   try {
@@ -72,11 +24,10 @@ function removeRobotoFont() {
       console.log('Removed shaka-player Roboto font, so it uses ours')
     }
   } finally {
-    if (typeof cssFileHandle !== 'undefined') {
+    if (cssFileHandle !== undefined) {
       closeSync(cssFileHandle)
     }
   }
 }
 
-fixTypes()
 removeRobotoFont()

src/renderer/components/DistractionSettings/DistractionSettings.vue

@@ -78,12 +78,12 @@
     </FtFlexBox>
     <FtFlexBox class="containingTextFlexBox">
       <FtInputTags
-        :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')"
+        :label="t('Settings.Distraction Free Settings.Hide Videos, Playlists and Channels Containing Text')"
+        :tag-name-placeholder="t('Settings.Distraction Free Settings.Hide Videos, Playlists and Channels Containing Text Placeholder')"
         :show-tags="showAddedForbiddenTitles"
         :tag-list="forbiddenTitles"
         :min-input-length="1"
-        :tooltip="t('Tooltips.Distraction Free Settings.Hide Videos and Playlists Containing Text')"
+        :tooltip="t('Tooltips.Distraction Free Settings.Hide Videos, Playlists and Channels Containing Text')"
         @change="handleForbiddenTitles"
         @toggle-show-tags="handleAddedForbiddenTitles"
       />

src/renderer/components/FtListLazyWrapper/FtListLazyWrapper.vue

@@ -172,7 +172,7 @@ const channelsHidden = computed(() => {
 /** @type {string[]} */
 const forbiddenTitles = computed(() => {
   if (!props.hideForbiddenTitles) { return [] }
-  return JSON.parse(store.getters.getForbiddenTitles)
+  return JSON.parse(store.getters.getForbiddenTitles.toLowerCase())
 })
 
 const showResult = computed(() => {
@@ -203,13 +203,16 @@ const showResult = computed(() => {
       return false
     }
 
-    if (channelsHidden.value.some(ch => ch.name === props.data.authorId) || channelsHidden.value.some(ch => ch.name === props.data.author)) {
+    const lowerCaseAuthor = props.data.author?.toLowerCase()
+
+    if (channelsHidden.value.some(ch => ch.name === props.data.authorId) || channelsHidden.value.some(ch => ch.name === props.data.author) || (forbiddenTitles.value.some((text) => lowerCaseAuthor.includes(text)))) {
       // hide videos by author
       return false
     }
 
     const lowerCaseTitle = props.data.title?.toLowerCase()
-    if (forbiddenTitles.value.some((text) => lowerCaseTitle.includes(text.toLowerCase()))) {
+
+    if (forbiddenTitles.value.some((text) => lowerCaseTitle.includes(text))) {
       return false
     }
   } else if (dataType === 'channel') {
@@ -223,14 +226,19 @@ const showResult = computed(() => {
       props.data.authorId,
     ]
 
-    if (attrsToCheck.some(a => a != null && channelsHidden.value.some(ch => ch.name === a))) {
+    const lowerCaseName = props.data.name?.toLowerCase()
+
+    if ((attrsToCheck.some(a => a != null && channelsHidden.value.some(ch => ch.name === a))) ||
+      (forbiddenTitles.value.some((text) => lowerCaseName.includes(text)))) {
       // hide channels by author
       return false
     }
   } else if (dataType === 'playlist') {
     const lowerCaseTitle = props.data.title?.toLowerCase()
+    const lowerCaseChannelName = props.data.channelName?.toLowerCase()
 
-    if (forbiddenTitles.value.some((text) => lowerCaseTitle.includes(text.toLowerCase()))) {
+    if ((forbiddenTitles.value.some((text) => lowerCaseTitle.includes(text))) ||
+      (forbiddenTitles.value.some((text) => lowerCaseChannelName.includes(text)))) {
       return false
     }
 

src/renderer/components/FtListVideoLazy.vue

@@ -130,15 +130,21 @@ const channelsHidden = computed(() => {
 
 const forbiddenTitles = computed(() => {
   if (!props.hideForbiddenTitles) { return [] }
-  return JSON.parse(store.getters.getForbiddenTitles)
+  return JSON.parse(store.getters.getForbiddenTitles.toLowerCase())
+})
+
+const hideChannelsBasedOnText = computed(() => {
+  return store.getters.getHideChannelsBasedOnText
 })
 
 const shouldBeVisible = computed(() => {
   const lowerCaseTitle = props.data.title?.toLowerCase()
+  const lowerCaseAuthor = props.data.author?.toLowerCase()
 
   return !(channelsHidden.value.some(ch => ch.name === props.data.authorId) ||
     channelsHidden.value.some(ch => ch.name === props.data.author) ||
-    (lowerCaseTitle && forbiddenTitles.value.some((text) => lowerCaseTitle.includes(text.toLowerCase()))))
+    (lowerCaseTitle && forbiddenTitles.value.some((text) => lowerCaseTitle.includes(text))) ||
+    (hideChannelsBasedOnText.value && lowerCaseAuthor && forbiddenTitles.value.some((text) => lowerCaseAuthor.includes(text))))
 })
 
 /**

src/renderer/components/FtSearchFilters/FtSearchFilters.css

@@ -1,5 +1,5 @@
 .center {
-  margin-block: 5px 10px;
+  margin-block-start: 10px;
   text-align: center;
   user-select: none;
 }
@@ -18,6 +18,42 @@
   justify-content: center;
 }
 
+.titleContainer {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 0.5rem;
+  block-size: inherit;
+}
+
+.clearFilterButton {
+  border-radius: 50%;
+  border-style: none;
+  background-color: transparent;
+  color: var(--primary-text-color);
+  cursor: pointer;
+  font-size: 20px;
+  line-height: 1em;
+  padding: 10px;
+  transition: background 0.2s ease-out;
+
+  &:hover {
+    background-color: var(--side-nav-hover-color);
+    color: var(--side-nav-hover-text-color);
+    transition: background 0.2s ease-in;
+  }
+
+  &:active {
+    background-color: var(--tertiary-text-color);
+    color: var(--side-nav-active-text-color);
+    transition: background 0.2s ease-in;
+  }
+}
+
+.clearFilterIcon {
+  vertical-align: -0.25em;
+}
+
 @media only screen and (width <= 680px) {
   .searchRadio {
     border-inline-end: 0;

src/renderer/components/FtSearchFilters/FtSearchFilters.vue

@@ -4,12 +4,25 @@
     @click="hideSearchFilters"
   >
     <template #label="{ labelId }">
-      <h2
-        :id="labelId"
-        class="center"
-      >
-        {{ title }}
-      </h2>
+      <div class="titleContainer">
+        <h2
+          :id="labelId"
+          class="center"
+        >
+          {{ title }}
+        </h2>
+        <button
+          class="clearFilterButton"
+          :title="$t('Search Filters.Clear Filters')"
+          :style="{visibility: (searchFilterValueChanged ? 'visible' : 'hidden')}"
+          @click="clearFilters"
+        >
+          <FontAwesomeIcon
+            class="clearFilterIcon"
+            :icon="['fas', 'filter-circle-xmark']"
+          />
+        </button>
+      </div>
     </template>
 
     <FtFlexBox class="radioFlexBox">
@@ -50,12 +63,6 @@
       />
     </FtFlexBox>
     <div class="searchFilterCloseButtonContainer">
-      <FtButton
-        :label="$t('Search Filters.Clear Filters')"
-        background-color="var(--accent-color)"
-        text-color="var(--text-with-accent-color)"
-        @click="clearFilters"
-      />
       <FtButton
         :label="$t('Close')"
         background-color="null"

src/renderer/components/SubscriptionsPosts.vue

@@ -155,6 +155,11 @@ function loadPostsFromCacheSometimes() {
   isLoading.value = false
 }
 
+/** @type {import('vue').ComputedRef<string[]>} */
+const forbiddenTitles = computed(() => {
+  return JSON.parse(store.getters.getForbiddenTitles.toLowerCase())
+})
+
 function loadPostsFromCacheForAllActiveProfileChannels() {
   const postList_ = cacheEntriesForAllActiveProfileChannels.value.flatMap((cacheEntry) => {
     return cacheEntry.posts
@@ -164,7 +169,7 @@ function loadPostsFromCacheForAllActiveProfileChannels() {
     return b.publishedTime - a.publishedTime
   })
 
-  postList.value = postList_
+  postList.value = postList_.filter(post => !forbiddenTitles.value.some(text => post.author.toLowerCase().includes(text)))
   isLoading.value = false
 }
 
@@ -224,6 +229,7 @@ async function loadPostsForSubscriptionsFromRemote() {
       }
     }
 
+    posts = posts.filter(post => !forbiddenTitles.value.some(text => post.author.toLowerCase().includes(text)))
     return posts
   }))).flat()