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

@@ -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
           }

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,

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
           }

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,

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
       }
     }