From a3cf210fcab9d5e7af4524ebb1286fd08fd5017d Mon Sep 17 00:00:00 2001
From: PikachuEXE <pikachuexe@gmail.com>
Date: Mon, 31 May 2021 19:23:35 +0800
Subject: [PATCH] Update Youtube URL handling to recongnize playlist ID in URL
 (#1260)

* * Update Youtube URL handling to recongnize playlist ID in URL

Only for format of `https://www.youtube.com/watch?v=vid&list=lid`

* ! Fix vue component prop declaration

A prop where the value can be undefined cannot be declared "required"
---
 src/renderer/App.js                                   | 11 +++++++++--
 .../components/ft-share-button/ft-share-button.js     |  2 +-
 src/renderer/components/top-nav/top-nav.js            | 11 +++++++++--
 .../components/watch-video-info/watch-video-info.js   |  2 +-
 src/renderer/store/modules/utils.js                   |  6 ++++--
 5 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/renderer/App.js b/src/renderer/App.js
index 1488536e..f2a934b5 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -304,11 +304,18 @@ export default Vue.extend({
       this.getYoutubeUrlInfo(href).then((result) => {
         switch (result.urlType) {
           case 'video': {
-            const { videoId, timestamp } = result
+            const { videoId, timestamp, playlistId } = result
 
+            const query = {}
+            if (timestamp) {
+              query.timestamp = timestamp
+            }
+            if (playlistId && playlistId.length > 0) {
+              query.playlistId = playlistId
+            }
             this.$router.push({
               path: `/watch/${videoId}`,
-              query: timestamp ? { timestamp } : {}
+              query: query
             })
             break
           }
diff --git a/src/renderer/components/ft-share-button/ft-share-button.js b/src/renderer/components/ft-share-button/ft-share-button.js
index 4f4d35f9..8ca4700c 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.js
+++ b/src/renderer/components/ft-share-button/ft-share-button.js
@@ -21,7 +21,7 @@ export default Vue.extend({
     },
     playlistId: {
       type: String,
-      required: true
+      default: ''
     },
     getTimestamp: {
       type: Function,
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 34c384dc..380ebfe2 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -109,11 +109,18 @@ export default Vue.extend({
       this.getYoutubeUrlInfo(query).then((result) => {
         switch (result.urlType) {
           case 'video': {
-            const { videoId, timestamp } = result
+            const { videoId, timestamp, playlistId } = result
 
+            const query = {}
+            if (timestamp) {
+              query.timestamp = timestamp
+            }
+            if (playlistId && playlistId.length > 0) {
+              query.playlistId = playlistId
+            }
             this.$router.push({
               path: `/watch/${videoId}`,
-              query: timestamp ? { timestamp } : {}
+              query: query
             })
             break
           }
diff --git a/src/renderer/components/watch-video-info/watch-video-info.js b/src/renderer/components/watch-video-info/watch-video-info.js
index fd14fd93..b5756a29 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.js
+++ b/src/renderer/components/watch-video-info/watch-video-info.js
@@ -84,7 +84,7 @@ export default Vue.extend({
     },
     playlistId: {
       type: String,
-      required: true
+      default: ''
     },
     theatrePossible: {
       type: Boolean,
diff --git a/src/renderer/store/modules/utils.js b/src/renderer/store/modules/utils.js
index 4ba5d787..c6ebc962 100644
--- a/src/renderer/store/modules/utils.js
+++ b/src/renderer/store/modules/utils.js
@@ -253,7 +253,7 @@ const actions = {
   getVideoParamsFromUrl (_, url) {
     /** @type {URL} */
     let urlObject
-    const paramsObject = { videoId: null, timestamp: null }
+    const paramsObject = { videoId: null, timestamp: null, playlistId: null }
     try {
       urlObject = new URL(url)
     } catch (e) {
@@ -270,6 +270,7 @@ const actions = {
       function() {
         if (urlObject.pathname === '/watch' && urlObject.searchParams.has('v')) {
           extractParams(urlObject.searchParams.get('v'))
+          paramsObject.playlistId = urlObject.searchParams.get('list')
           return paramsObject
         }
       },
@@ -326,11 +327,12 @@ const actions = {
     //
     // If `urlType` is "invalid_url"
     // Nothing else
-    const { videoId, timestamp } = actions.getVideoParamsFromUrl(null, urlStr)
+    const { videoId, timestamp, playlistId } = actions.getVideoParamsFromUrl(null, urlStr)
     if (videoId) {
       return {
         urlType: 'video',
         videoId,
+        playlistId,
         timestamp
       }
     }