Add icons to page headers + subscription tabs (#6669)

* Add icons to page headers * fix most popular page * Add icon to search page, hide settings icon on mobile * use icon for hashtag as well * Fix getting invidious hashtag Co-authored-by: absidue <[email protected]> * fix bug when fetching more hashtag in invidious, use hashtag ref instead of a paremeter --------- Co-authored-by: absidue <[email protected]>
FreeTubeApp · Feb 23, 2025 · 2f53c9d · 2f53c9d
1 parent 8983ff5
commit 2f53c9d
Show file tree

Hide file tree

Showing 19 changed files with 148 additions and 48 deletions.
diff --git a/src/renderer/components/FtSettingsMenu/FtSettingsMenu.css b/src/renderer/components/FtSettingsMenu/FtSettingsMenu.css
@@ -14,6 +14,10 @@
   margin-block: 0 10px;
 }
 
+.headingIcon {
+  color: var(--primary-color);
+}
+
 .title {
   text-decoration: none;
   color: var(--tertiary-text-color);
@@ -104,6 +108,11 @@
   .header {
     font-size: 32px;
   }
+
+  /* hide the settings icon on mobile to avoid confusion */
+  .headingIcon {
+    display: none;
+  }
 }
 
 /* small height or width mobile breakpoint; intermediary text */

diff --git a/src/renderer/components/FtSettingsMenu/FtSettingsMenu.vue b/src/renderer/components/FtSettingsMenu/FtSettingsMenu.vue
@@ -3,6 +3,11 @@
     class="settingsMenu"
   >
     <h2 class="header">
+      <FontAwesomeIcon
+        :icon="['fas', 'sliders-h']"
+        class="headingIcon"
+        fixed-width
+      />
       {{ $t('Settings.Settings') }}
     </h2>
     <a

diff --git a/src/renderer/main.js b/src/renderer/main.js
@@ -76,6 +76,7 @@ import {
   faList,
   faLocationDot,
   faLock,
+  faMessage,
   faMoneyCheckDollar,
   faMusic,
   faNetworkWired,
@@ -107,15 +108,17 @@ import {
   faThumbtack,
   faTimes,
   faTimesCircle,
+  faTowerBroadcast,
   faTrash,
   faUserCheck,
   faUserLock,
   faUsers,
   faUsersSlash,
-  faWifi,
+  faVideo,
   faVolumeHigh,
   faVolumeLow,
   faVolumeMute,
+  faWifi,
   faXmark
 } from '@fortawesome/free-solid-svg-icons'
 import {
@@ -200,6 +203,7 @@ library.add(
   faList,
   faLocationDot,
   faLock,
+  faMessage,
   faMoneyCheckDollar,
   faMusic,
   faNetworkWired,
@@ -231,15 +235,17 @@ library.add(
   faThumbtack,
   faTimes,
   faTimesCircle,
+  faTowerBroadcast,
   faTrash,
   faUserCheck,
   faUserLock,
   faUsers,
   faUsersSlash,
-  faWifi,
+  faVideo,
   faVolumeHigh,
   faVolumeLow,
   faVolumeMute,
+  faWifi,
   faXmark,
 
   // solid icons

diff --git a/src/renderer/views/About/About.css b/src/renderer/views/About/About.css
@@ -55,6 +55,10 @@
   grid-area: content;
 }
 
+.headingIcon {
+  color: var(--primary-color);
+}
+
 @media only screen and (width <=650px) {
   .about-chunks {
     grid-template-columns: 1fr;

diff --git a/src/renderer/views/About/About.vue b/src/renderer/views/About/About.vue
@@ -1,9 +1,14 @@
 <template>
   <div>
     <FtCard class="card">
-      <h1>
+      <h2>
+        <FontAwesomeIcon
+          :icon="['fas', 'info-circle']"
+          class="headingIcon"
+          fixed-width
+        />
         {{ $t("About.About") }}
-      </h1>
+      </h2>
       <section class="brand">
         <FtLogoFull class="logo" />
         <div class="version">

diff --git a/src/renderer/views/Hashtag/Hashtag.css b/src/renderer/views/Hashtag/Hashtag.css
@@ -20,6 +20,10 @@
   inline-size: 85%;
 }
 
+.headingIcon {
+  color: var(--primary-color);
+}
+
 @media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;

diff --git a/src/renderer/views/Hashtag/Hashtag.vue b/src/renderer/views/Hashtag/Hashtag.vue
@@ -8,7 +8,15 @@
       v-else
       class="card"
     >
-      <h2>{{ hashtag }}</h2>
+      <h2>
+        <font-awesome-icon
+          :icon="['fas', 'hashtag']"
+          aria-hidden="false"
+          class="headingIcon"
+          fixed-width
+        />
+        {{ hashtag }}
+      </h2>
       <FtElementList
         v-if="videos.length > 0"
         :data="videos"
@@ -102,23 +110,21 @@ function resetData() {
 }
 
 async function getHashtag() {
-  const hashtagInRoute = decodeURIComponent(route.params.hashtag)
+  hashtag.value = decodeURIComponent(route.params.hashtag)
   if (process.env.SUPPORTS_LOCAL_API && backendPreference.value === 'local') {
-    await getLocalHashtag(hashtagInRoute)
+    await getLocalHashtag()
   } else {
-    await getInvidiousHashtag(hashtagInRoute)
+    await getInvidiousHashtag()
   }
-  store.commit('setAppTitle', `${hashtag.value} - ${packageDetails.productName}`)
+  store.commit('setAppTitle', `#${hashtag.value} - ${packageDetails.productName}`)
 }
 
 /**
- * @param {string} hashtagInRoute
  * @param {number} page
  */
-async function getInvidiousHashtag(hashtagInRoute, page) {
+async function getInvidiousHashtag(page = 1) {
   try {
-    const fetchedVideos = await getHashtagInvidious(hashtagInRoute, page)
-    hashtag.value = '#' + hashtagInRoute
+    const fetchedVideos = await getHashtagInvidious(hashtag.value, page)
     isLoading.value = false
     apiUsed.value = 'invidious'
     videos.value = videos.value.concat(fetchedVideos)
@@ -132,38 +138,16 @@ async function getInvidiousHashtag(hashtagInRoute, page) {
     if (process.env.SUPPORTS_LOCAL_API && backendPreference.value === 'invidious' && backendFallback.value) {
       showToast(t('Falling back to Local API'))
       resetData()
-      getLocalHashtag(hashtag)
+      getLocalHashtag()
     } else {
       isLoading.value = false
     }
   }
 }
 
-/**
- * @param {string} hashtagInRoute
- */
-async function getLocalHashtag(hashtagInRoute) {
+async function getLocalHashtag() {
   try {
-    const hashtagData = await getHashtagLocal(hashtagInRoute)
-
-    const header = hashtagData.header
-    if (header) {
-      switch (header.type) {
-        case 'HashtagHeader':
-          hashtag.value = header.hashtag.toString()
-          break
-        case 'PageHeader':
-          hashtag.value = header.content.title.text
-          break
-        default:
-          console.error(`Unknown hashtag header type: ${header.type}, falling back to query parameter.`)
-          hashtag.value = `#${hashtagInRoute}`
-      }
-    } else {
-      console.error(' Hashtag header missing, probably a layout change, falling back to query parameter.')
-      hashtag.value = `#${hashtagInRoute}`
-    }
-
+    const hashtagData = await getHashtagLocal(hashtag.value)
     videos.value = hashtagData.videos.map(parseLocalListVideo)
     apiUsed.value = 'local'
     hashtagContinuationData.value = hashtagData.has_continuation ? hashtagData : null
@@ -177,7 +161,7 @@ async function getLocalHashtag(hashtagInRoute) {
     if (backendPreference.value === 'local' && backendFallback.value) {
       showToast(t('Falling back to Invidious API'))
       resetData()
-      getInvidiousHashtag(hashtag)
+      getInvidiousHashtag()
     } else {
       isLoading.value = false
     }
@@ -198,9 +182,8 @@ async function getLocalHashtagMore() {
     })
     if (backendPreference.value === 'local' && backendFallback.value) {
       showToast(t('Falling back to Invidious API'))
-      const hashtagWithoutSymbol = hashtag.value.substring(1)
       resetData()
-      getInvidiousHashtag(hashtagWithoutSymbol)
+      getInvidiousHashtag()
     } else {
       isLoading.value = false
     }
@@ -211,7 +194,7 @@ function handleFetchMore() {
   if (process.env.SUPPORTS_LOCAL_API && apiUsed.value === 'local') {
     getLocalHashtagMore()
   } else if (apiUsed.value === 'invidious') {
-    getInvidiousHashtag(hashtag.value.substring(1), pageNumber.value)
+    getInvidiousHashtag(pageNumber.value)
   }
 }
 </script>

diff --git a/src/renderer/views/History/History.css b/src/renderer/views/History/History.css
@@ -8,6 +8,10 @@
   color: var(--tertiary-text-color);
 }
 
+.headingIcon {
+  color: var(--primary-color);
+}
+
 @media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;

diff --git a/src/renderer/views/History/History.vue b/src/renderer/views/History/History.vue
@@ -8,7 +8,14 @@
       v-show="!isLoading"
       class="card"
     >
-      <h2>{{ $t("History.History") }}</h2>
+      <h2>
+        <FontAwesomeIcon
+          :icon="['fas', 'history']"
+          class="headingIcon"
+          fixed-width
+        />
+        {{ $t("History.History") }}
+      </h2>
       <ft-input
         v-show="fullData.length > 0"
         ref="searchBar"

diff --git a/src/renderer/views/Popular/Popular.css b/src/renderer/views/Popular/Popular.css
@@ -4,6 +4,10 @@
   margin-inline: auto;
 }
 
+.headingIcon {
+  color: var(--primary-color);
+}
+
 @media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;

diff --git a/src/renderer/views/Popular/Popular.vue b/src/renderer/views/Popular/Popular.vue
@@ -8,7 +8,14 @@
       v-else
       class="card"
     >
-      <h2>{{ $t("Most Popular") }}</h2>
+      <h2>
+        <FontAwesomeIcon
+          :icon="['fas', 'users']"
+          class="headingIcon"
+          fixed-width
+        />
+        {{ $t("Most Popular") }}
+      </h2>
       <ft-element-list
         :data="shownResults"
       />

diff --git a/src/renderer/views/Search/Search.css b/src/renderer/views/Search/Search.css
@@ -20,6 +20,10 @@
   margin-inline: auto;
 }
 
+.headingIcon {
+  color: var(--primary-color);
+}
+
 @media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;

diff --git a/src/renderer/views/Search/Search.vue b/src/renderer/views/Search/Search.vue
@@ -8,7 +8,14 @@
       v-else
       class="card"
     >
-      <h2>{{ $t("Search Filters.Search Results") }}</h2>
+      <h2>
+        <font-awesome-icon
+          :icon="['fas', 'search']"
+          class="headingIcon"
+          fixed-width
+        />
+        {{ $t("Search Filters.Search Results") }}
+      </h2>
       <ft-element-list
         :data="shownResults"
       />

diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.css b/src/renderer/views/SubscribedChannels/SubscribedChannels.css
@@ -68,6 +68,10 @@
   block-size: 80%;
 }
 
+.headingIcon {
+  color: var(--primary-color);
+}
+
 @media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;

diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.vue b/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
@@ -1,7 +1,14 @@
 <template>
   <div>
     <ft-card class="card">
-      <h2>{{ $t('Channels.Title') }}</h2>
+      <h2>
+        <FontAwesomeIcon
+          :icon="['fas', 'user-check']"
+          class="headingIcon"
+          fixed-width
+        />
+        {{ $t('Channels.Title') }}
+      </h2>
       <ft-input
         v-show="subscribedChannels.length > 0"
         ref="searchBarChannels"

diff --git a/src/renderer/views/Subscriptions/Subscriptions.css b/src/renderer/views/Subscriptions/Subscriptions.css
@@ -25,7 +25,7 @@
 .tab {
   text-align: center;
   padding: 15px;
-  font-size: 15px;
+  font-size: 1.1em;
   cursor: pointer;
   align-self: flex-end;
   text-transform: uppercase;
@@ -35,6 +35,10 @@
   font-weight: bold;
 }
 
+.subscriptionIcon {
+  color: var(--primary-color);
+}
+
 @media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;