Recognize more channel links (#1455)

* Update channelPattern regex

* redirect to relevant sub page

* Simplify regex

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>

* fix regression

- fix regression from commit 76f0d7512a11d57598bda6fd0142767aec6218af
- add comment to explain regex

Co-authored-by: Preston <freetubeapp@protonmail.com>
Co-authored-by: PikachuEXE <pikachuexe@gmail.com>

src/renderer/App.js

@@ -398,10 +398,10 @@ export default Vue.extend({
           }
 
           case 'channel': {
-            const { channelId } = result
+            const { channelId, subPath } = result
 
             this.$router.push({
-              path: `/channel/${channelId}`
+              path: `/channel/${channelId}/${subPath}`
             })
             break
           }

src/renderer/components/top-nav/top-nav.js

@@ -161,10 +161,10 @@ export default Vue.extend({
           }
 
           case 'channel': {
-            const { channelId } = result
+            const { channelId, subPath } = result
 
             this.$router.push({
-              path: `/channel/${channelId}`
+              path: `/channel/${channelId}/${subPath}`
             })
             break
           }

src/renderer/router/index.js

@@ -126,7 +126,7 @@ const router = new Router({
       component: Playlist
     },
     {
-      path: '/channel/:id',
+      path: '/channel/:id/:currentTab?',
       meta: {
         title: 'Channel',
         icon: 'fa-user'

src/renderer/store/modules/utils.js

@@ -375,7 +375,7 @@ const actions = {
     let urlType = 'unknown'
 
     const channelPattern =
-      /^\/(?:c\/|channel\/|user\/)?([^/]+)(?:\/join)?\/?$/
+      /^\/(?:(c|channel|user)\/)?(?<channelId>[^/]+)(?:\/(join|featured|videos|playlists|about|community|channels))?\/?$/
 
     const typePatterns = new Map([
       ['playlist', /^\/playlist\/?$/],
@@ -445,16 +445,57 @@ const actions = {
           urlType: 'hashtag'
         }
       }
+      /*
+      Using RegExp named capture groups from ES2018
+      To avoid access to specific captured value broken
 
+      Channel URL (ID-based)
+      https://www.youtube.com/channel/UCfMJ2MchTSW2kWaT0kK94Yw
+      https://www.youtube.com/channel/UCfMJ2MchTSW2kWaT0kK94Yw/about
+      https://www.youtube.com/channel/UCfMJ2MchTSW2kWaT0kK94Yw/channels
+      https://www.youtube.com/channel/UCfMJ2MchTSW2kWaT0kK94Yw/community
+      https://www.youtube.com/channel/UCfMJ2MchTSW2kWaT0kK94Yw/featured
+      https://www.youtube.com/channel/UCfMJ2MchTSW2kWaT0kK94Yw/join
+      https://www.youtube.com/channel/UCfMJ2MchTSW2kWaT0kK94Yw/playlists
+      https://www.youtube.com/channel/UCfMJ2MchTSW2kWaT0kK94Yw/videos
+
+      Custom URL
+
+      https://www.youtube.com/c/YouTubeCreators
+      https://www.youtube.com/c/YouTubeCreators/about
+      etc.
+
+      Legacy Username URL
+
+      https://www.youtube.com/user/ufoludek
+      https://www.youtube.com/user/ufoludek/about
+      etc.
+
+      */
       case 'channel': {
-        const channelId = url.pathname.match(channelPattern)[1]
+        const channelId = url.pathname.match(channelPattern).groups.channelId
         if (!channelId) {
           throw new Error('Channel: could not extract id')
         }
 
+        let subPath = null
+        switch (url.pathname.split('/').filter(i => i)[2]) {
+          case 'playlists':
+            subPath = 'playlists'
+            break
+          case 'channels':
+          case 'about':
+            subPath = 'about'
+            break
+          case 'community':
+          default:
+            subPath = 'videos'
+            break
+        }
         return {
           urlType: 'channel',
-          channelId
+          channelId,
+          subPath
         }
       }
 

src/renderer/views/Channel/Channel.js

@@ -160,7 +160,7 @@ export default Vue.extend({
     $route() {
       // react to route changes...
       this.id = this.$route.params.id
-      this.currentTab = 'videos'
+      this.currentTab = this.$route.params.currentTab ?? 'videos'
       this.latestVideosPage = 2
       this.searchPage = 2
       this.relatedChannels = []
@@ -222,6 +222,7 @@ export default Vue.extend({
   },
   mounted: function () {
     this.id = this.$route.params.id
+    this.currentTab = this.$route.params.currentTab ?? 'videos'
     this.isLoading = true
 
     if (!this.usingElectron) {