Add distraction free setting to hide channel shorts (#3569)

* Add distraction free setting to hide channel shorts

* Add support for channel shorts URLs

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

@@ -65,6 +65,9 @@ export default defineComponent({
     hideFeaturedChannels: function() {
       return this.$store.getters.getHideFeaturedChannels
     },
+    hideChannelShorts: function() {
+      return this.$store.getters.getHideChannelShorts
+    },
     hideChannelPlaylists: function() {
       return this.$store.getters.getHideChannelPlaylists
     },
@@ -112,6 +115,7 @@ export default defineComponent({
       'updateChannelsHidden',
       'updateShowDistractionFreeTitles',
       'updateHideFeaturedChannels',
+      'updateHideChannelShorts',
       'updateHideChannelPlaylists',
       'updateHideChannelCommunity'
     ])

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

@@ -64,6 +64,12 @@
           :default-value="hideChannelPlaylists"
           @change="updateHideChannelPlaylists"
         />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Channel Shorts')"
+          :compact="true"
+          :default-value="hideChannelShorts"
+          @change="updateHideChannelShorts"
+        />
       </div>
       <div class="switchColumn">
         <ft-toggle-switch

src/renderer/store/modules/settings.js

@@ -194,6 +194,7 @@ const state = {
   hideActiveSubscriptions: false,
   hideChannelCommunity: false,
   hideChannelPlaylists: false,
+  hideChannelShorts: false,
   hideChannelSubscriptions: false,
   hideCommentLikes: false,
   hideComments: false,

src/renderer/store/modules/utils.js

@@ -315,7 +315,7 @@ const actions = {
     let urlType = 'unknown'
 
     const channelPattern =
-      /^\/(?:(?:channel|user|c)\/)?(?<channelId>[^/]+)(?:\/(?<tab>join|featured|videos|live|streams|playlists|about|community|channels))?\/?$/
+      /^\/(?:(?:channel|user|c)\/)?(?<channelId>[^/]+)(?:\/(?<tab>join|featured|videos|shorts|live|streams|playlists|about|community|channels))?\/?$/
 
     const hashtagPattern = /^\/hashtag\/(?<tag>[^#&/?]+)$/
 
@@ -427,6 +427,9 @@ const actions = {
 
         let subPath = null
         switch (match.groups.tab) {
+          case 'shorts':
+            subPath = 'shorts'
+            break
           case 'live':
           case 'streams':
             subPath = 'live'

src/renderer/views/Channel/Channel.js

@@ -184,6 +184,10 @@ export default defineComponent({
       return this.$store.getters.getHideSharingActions
     },
 
+    hideChannelShorts: function () {
+      return this.$store.getters.getHideChannelShorts
+    },
+
     hideLiveStreams: function () {
       return this.$store.getters.getHideLiveStreams
     },
@@ -207,6 +211,11 @@ export default defineComponent({
       ]
 
       // remove tabs from the array based on user settings
+      if (this.hideChannelShorts) {
+        const index = values.indexOf('shorts')
+        values.splice(index, 1)
+      }
+
       if (this.hideLiveStreams) {
         const index = values.indexOf('live')
         values.splice(index, 1)
@@ -264,6 +273,10 @@ export default defineComponent({
       this.showLiveSortBy = true
       this.showPlaylistSortBy = true
 
+      if (this.hideChannelShorts && currentTab === 'shorts') {
+        currentTab = 'videos'
+      }
+
       if (this.hideLiveStreams && currentTab === 'live') {
         currentTab = 'videos'
       }
@@ -367,6 +380,10 @@ export default defineComponent({
 
     let currentTab = this.$route.params.currentTab ?? 'videos'
 
+    if (this.hideChannelShorts && currentTab === 'shorts') {
+      currentTab = 'videos'
+    }
+
     if (this.hideLiveStreams && currentTab === 'live') {
       currentTab = 'videos'
     }
@@ -591,7 +608,7 @@ export default defineComponent({
           this.getChannelVideosLocal()
         }
 
-        if (channel.has_shorts) {
+        if (!this.hideChannelShorts && channel.has_shorts) {
           this.getChannelShortsLocal()
         }
 
@@ -883,7 +900,7 @@ export default defineComponent({
           this.channelInvidiousVideos()
         }
 
-        if (response.tabs.includes('shorts')) {
+        if (!this.hideChannelShorts && response.tabs.includes('shorts')) {
           this.channelInvidiousShorts()
         }
 

src/renderer/views/Channel/Channel.vue

@@ -99,6 +99,7 @@
               {{ $t("Channel.Videos.Videos").toUpperCase() }}
             </div>
             <div
+              v-if="!hideChannelShorts"
               id="shortsTab"
               class="tab"
               :class="(currentTab==='shorts')?'selectedTab':''"
@@ -203,7 +204,7 @@
         @change="videoSortBy = $event"
       />
       <ft-select
-        v-if="showShortSortBy"
+        v-if="!hideChannelShorts && showShortSortBy"
         v-show="currentTab === 'shorts' && latestShorts.length > 0"
         class="sortSelect"
         :value="videoShortLiveSelectValues[0]"
@@ -254,14 +255,14 @@
           </p>
         </ft-flex-box>
         <ft-element-list
-          v-if="currentTab === 'shorts'"
+          v-if="!hideChannelShorts && currentTab === 'shorts'"
           id="shortPanel"
           :data="latestShorts"
           role="tabpanel"
           aria-labelledby="shortsTab"
         />
         <ft-flex-box
-          v-if="currentTab === 'shorts' && latestShorts.length === 0"
+          v-if="!hideChannelShorts && currentTab === 'shorts' && latestShorts.length === 0"
         >
           <p class="message">
             {{ $t("Channel.Shorts.This channel does not currently have any shorts") }}