Add Parental Control toggle to disable channel link from videos

src/renderer/components/CommentSection/CommentSection.vue

@@ -59,7 +59,8 @@
         :key="comment.id"
         class="comment"
       >
-        <router-link
+        <component
+          :is="enableChannelLinks ? 'router-link' : 'div'"
           :to="`/channel/${comment.authorLink}`"
           tabindex="-1"
         >
@@ -77,7 +78,7 @@
             alt=""
             class="commentThumbnail"
           >
-        </router-link>
+        </component>
         <p
           v-if="comment.isPinned"
           class="commentPinned"
@@ -90,7 +91,8 @@
         <p
           class="commentAuthorWrapper"
         >
-          <router-link
+          <component
+            :is="enableChannelLinks ? 'router-link' : 'span'"
             class="commentAuthor"
             dir="auto"
             :class="{
@@ -99,7 +101,7 @@
             :to="`/channel/${comment.authorLink}`"
           >
             {{ comment.author }}
-          </router-link>
+          </component>
           <img
             v-if="comment.isMember"
             :src="comment.memberIconUrl"
@@ -177,7 +179,8 @@
             :key="replyIndex"
             class="comment"
           >
-            <router-link
+            <component
+              :is="enableChannelLinks ? 'router-link' : 'div'"
               :to="`/channel/${reply.authorLink}`"
               tabindex="-1"
             >
@@ -195,9 +198,10 @@
                 alt=""
                 class="commentThumbnail"
               >
-            </router-link>
+            </component>
             <p class="commentAuthorWrapper">
-              <router-link
+              <component
+                :is="enableChannelLinks ? 'router-link' : 'span'"
                 class="commentAuthor"
                 dir="auto"
                 :class="{
@@ -206,7 +210,7 @@
                 :to="`/channel/${reply.authorLink}`"
               >
                 {{ reply.author }}
-              </router-link>
+              </component>
               <img
                 v-if="reply.isMember"
                 :src="reply.memberIconUrl"
@@ -472,6 +476,8 @@ function handleSortChange() {
 
 const emit = defineEmits(['timestamp-event'])
 
+const enableChannelLinks = computed(() => !store.getters.getDisableChannelLinks)
+
 /**
  * @param {number} timestamp
  */

src/renderer/components/FtCommunityPost/FtCommunityPost.vue

@@ -10,7 +10,8 @@
       <template
         v-if="authorThumbnails.length > 0"
       >
-        <router-link
+        <component
+          :is="enableChannelLinks ? 'router-link' : 'div'"
           v-if="authorId"
           :to="`/channel/${authorId}`"
           tabindex="-1"
@@ -21,7 +22,7 @@
             class="communityThumbnail"
             alt=""
           >
-        </router-link>
+        </component>
         <img
           v-else
           :src="getBestQualityImage(authorThumbnails)"
@@ -34,7 +35,7 @@
         dir="auto"
       >
         <router-link
-          v-if="authorId"
+          v-if="authorId && enableChannelLinks"
           :to="`/channel/${authorId}`"
           class="authorNameLink"
         >
@@ -343,6 +344,8 @@ if (postType === 'multiImage' && postContent.content.length > 0) {
     swiperContainerRef.value.initialize()
   })
 }
+
+const enableChannelLinks = computed(() => !store.getters.getDisableChannelLinks)
 </script>
 
 <style scoped src="./FtCommunityPost.scss" lang="scss" />

src/renderer/components/FtListChannel/FtListChannel.vue

@@ -8,7 +8,8 @@
     }"
   >
     <div class="channelThumbnail">
-      <router-link
+      <component
+        :is="enableChannelLinks ? 'router-link' : 'div'"
         :to="`/channel/${id}`"
         class="channelThumbnailLink"
         tabindex="-1"
@@ -19,11 +20,12 @@
           :class="!isGame ? 'channelImage' : 'gameImage'"
           alt=""
         >
-      </router-link>
+      </component>
     </div>
     <div class="infoAndSubscribe">
       <div class="info">
-        <router-link
+        <component
+          :is="enableChannelLinks ? 'router-link' : 'span'"
           class="title"
           :to="`/channel/${id}`"
         >
@@ -33,16 +35,17 @@
           >
             {{ name }}
           </h3>
-        </router-link>
+        </component>
         <div class="infoLine">
-          <router-link
+          <component
+            :is="enableChannelLinks ? 'router-link' : 'span'"
             v-if="handle !== null"
             class="handle"
             dir="auto"
             :to="`/channel/${id}`"
           >
             {{ handle }}
-          </router-link>
+          </component>
           <span
             v-if="subscriberCount !== null && !hideChannelSubscriptions"
             class="subscriberCount"
@@ -118,6 +121,8 @@ const hideUnsubscribeButton = computed(() => {
   return store.getters.getHideUnsubscribeButton
 })
 
+const enableChannelLinks = computed(() => !store.getters.getDisableChannelLinks)
+
 let id = ''
 let thumbnail = ''
 let name = ''

src/renderer/components/FtListPlaylist/FtListPlaylist.vue

@@ -47,7 +47,7 @@
       </RouterLink>
       <div class="infoLine">
         <RouterLink
-          v-if="channelId"
+          v-if="channelId && enableChannelLinks"
           class="channelName"
           dir="auto"
           :to="`/channel/${channelId}`"
@@ -268,6 +268,8 @@ const externalPlayer = computed(() => store.getters.getExternalPlayer)
 /** @type {import('vue').ComputedRef<number>} */
 const defaultPlayback = computed(() => store.getters.getDefaultPlayback)
 
+const enableChannelLinks = computed(() => !store.getters.getDisableChannelLinks)
+
 function handleExternalPlayer() {
   if (process.env.IS_ELECTRON) {
     window.ftElectron.openInExternalPlayer({

src/renderer/components/ParentalControlSettings.vue

@@ -16,6 +16,12 @@
           :default-value="showFamilyFriendlyOnly"
           @change="updateShowFamilyFriendlyOnly"
         />
+        <FtToggleSwitch
+          :label="$t('Settings.Parental Control Settings.Disable Channel Links')"
+          compact
+          :default-value="disableChannelLinks"
+          @change="updateDisableChannelLinks"
+        />
       </div>
       <div class="switchColumn">
         <FtToggleSwitch
@@ -59,6 +65,10 @@ const showFamilyFriendlyOnly = computed(() => {
   return store.getters.getShowFamilyFriendlyOnly
 })
 
+const disableChannelLinks = computed(() => {
+  return store.getters.getDisableChannelLinks
+})
+
 /**
  * @param {boolean} value
  */
@@ -86,4 +96,11 @@ function updateHideUploader(value) {
 function updateShowFamilyFriendlyOnly(value) {
   store.dispatch('updateShowFamilyFriendlyOnly', value)
 }
+
+/**
+ * @param {boolean} value
+ */
+function updateDisableChannelLinks(value) {
+  store.dispatch('updateDisableChannelLinks', value)
+}
 </script>

src/renderer/components/PlaylistInfo/PlaylistInfo.scss

@@ -79,6 +79,10 @@
   grid-template-columns: auto minmax(min-content, 1fr);
 }
 
+.channelShareWrapper > :only-child {
+  grid-column: 1 / -1;
+}
+
 .playlistOptions {
   display: grid;
   grid-auto-flow: column;

src/renderer/components/PlaylistInfo/PlaylistInfo.vue

@@ -108,12 +108,14 @@
     <div
       class="channelShareWrapper"
     >
-      <router-link
+      <component
+        :is="enableChannelLinks ? 'router-link' : 'div'"
         v-if="!isUserPlaylist && channelId"
         class="playlistChannel"
         :to="`/channel/${channelId}`"
       >
         <img
+          v-if="channelThumbnail"
           class="channelThumbnail"
           :src="channelThumbnail"
           alt=""
@@ -124,18 +126,7 @@
         >
           {{ channelName }}
         </h3>
-      </router-link>
-      <div
-        v-else
-        class="playlistChannel"
-      >
-        <h3
-          class="channelName"
-          dir="auto"
-        >
-          {{ channelName }}
-        </h3>
-      </div>
+      </component>
 
       <div class="playlistOptionsAndSearch">
         <div class="playlistOptions">
@@ -957,6 +948,8 @@ onMounted(() => {
 onBeforeUnmount(() => {
   document.removeEventListener('keydown', keyboardShortcutHandler)
 })
+
+const enableChannelLinks = computed(() => !store.getters.getDisableChannelLinks)
 </script>
 
 <style scoped lang="scss" src="./PlaylistInfo.scss" />

src/renderer/components/WatchVideoInfo/WatchVideoInfo.css

@@ -97,6 +97,10 @@
   gap: 4px;
 }
 
+.initialCursor {
+  cursor: initial;
+}
+
 @media screen and (width <= 730px) {
   .videoButtons {
     flex-direction: column;

src/renderer/components/WatchVideoInfo/WatchVideoInfo.vue

@@ -41,27 +41,30 @@
         <div
           v-if="!hideUploader"
         >
-          <RouterLink
+          <component
+            :is="enableChannelLinks ? 'RouterLink' : 'div'"
             :to="`/channel/${channelId}`"
           >
             <img
               :src="channelThumbnail"
               class="channelThumbnail"
               alt=""
             >
-          </RouterLink>
+          </component>
         </div>
         <div>
           <div
             v-if="!hideUploader"
           >
-            <RouterLink
+            <component
+              :is="enableChannelLinks ? 'RouterLink' : 'span'"
               :to="`/channel/${channelId}`"
+              :class="enableChannelLinks ? '' : 'initialCursor'"
               class="channelName"
               dir="auto"
             >
               {{ channelName }}
-            </RouterLink>
+            </component>
           </div>
           <FtSubscribeButton
             v-if="!hideUnsubscribeButton"
@@ -503,6 +506,8 @@ function removeFromQuickBookmarkPlaylist() {
   // TODO: Maybe show playlist name
   showToast(t('Video.Video has been removed from your saved list'))
 }
+
+const enableChannelLinks = computed(() => !store.getters.getDisableChannelLinks)
 </script>
 
 <style scoped src="./WatchVideoInfo.css" />

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

@@ -550,6 +550,10 @@ export default defineComponent({
     deArrowCache: function () {
       return this.$store.getters.getDeArrowCache[this.id]
     },
+
+    disableChannelLinks: function () {
+      return this.$store.getters.getDisableChannelLinks
+    },
   },
   watch: {
     showAddToPlaylistPrompt(value) {

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

@@ -123,17 +123,15 @@
         </h3>
       </router-link>
       <div class="infoLine">
-        <router-link
+        <component
+          :is="disableChannelLinks ? 'span' : 'router-link'"
           v-if="channelId !== null"
           class="channelName"
           dir="auto"
           :to="`/channel/${channelId}`"
         >
           {{ channelName }}
-        </router-link>
-        <bdi v-else-if="channelName !== null">
-          {{ channelName }}
-        </bdi>
+        </component>
         <span
           v-if="!isLive && !isUpcoming && !isPremium && !hideViews && viewCount != null"
           class="viewCount"

src/renderer/store/modules/settings.js

@@ -169,6 +169,7 @@ const state = {
   defaultViewingMode: 'default',
   defaultVideoFormat: 'dash',
   disableSmoothScrolling: false,
+  disableChannelLinks: false,
   displayVideoPlayButton: false,
   enableSearchSuggestions: true,
   enableSubtitlesByDefault: false,

static/locales/en-US.yaml

@@ -671,6 +671,7 @@ Settings:
     Hide Uploader on Watch page: Hide Uploader on Watch page
     Show Family Friendly Only: Show Family Friendly Only
     Hide Search Bar: Hide Search Bar
+    Disable Channel Links: Disable Channel Links
   Experimental Settings:
     Experimental Settings: Experimental
     Warning: These settings are experimental, they may cause crashes while enabled. Making backups is highly recommended. Use at your own risk!