From 70aa159bb8d42760e707d0cb7a706bd2a659f053 Mon Sep 17 00:00:00 2001
From: PikachuEXE <pikachuexe@gmail.com>
Date: Wed, 26 May 2021 01:39:34 +0800
Subject: [PATCH] Update "Open Link" button to include playlist ID (#1258)

* ! Fix app unable to load due to missing `getLocale` in `mapActions`

* $ Update a function's name with incorrect name casing

* Update "open youtube link" button to open with playlist when playing a video with an active playlist
---
 src/renderer/App.js                           |  3 ++-
 .../ft-share-button/ft-share-button.js        | 27 ++++++++++++++++---
 .../ft-share-button/ft-share-button.vue       |  2 +-
 .../watch-video-info/watch-video-info.js      |  4 +++
 .../watch-video-info/watch-video-info.vue     |  1 +
 src/renderer/views/Watch/Watch.vue            |  1 +
 6 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/renderer/App.js b/src/renderer/App.js
index 0d58afbf..1488536e 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -399,7 +399,8 @@ export default Vue.extend({
       'grabHistory',
       'grabAllPlaylists',
       'getRegionData',
-      'getYoutubeUrlInfo'
+      'getYoutubeUrlInfo',
+      'getLocale'
     ]),
 
     ...mapMutations([
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 f2745597..4f4d35f9 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.js
+++ b/src/renderer/components/ft-share-button/ft-share-button.js
@@ -19,6 +19,10 @@ export default Vue.extend({
       type: String,
       required: true
     },
+    playlistId: {
+      type: String,
+      required: true
+    },
     getTimestamp: {
       type: Function,
       required: true
@@ -35,7 +39,13 @@ export default Vue.extend({
     },
 
     invidiousURL() {
-      return `${this.invidiousInstance}/watch?v=${this.id}`
+      let videoUrl = `${this.invidiousInstance}/watch?v=${this.id}`
+      // `playlistId` can be undefined
+      if (this.playlistId && this.playlistId.length !== 0) {
+        // `index` seems can be ignored
+        videoUrl += `&list=${this.playlistId}`
+      }
+      return videoUrl
     },
 
     invidiousEmbedURL() {
@@ -43,10 +53,21 @@ export default Vue.extend({
     },
 
     youtubeURL() {
-      return `https://www.youtube.com/watch?v=${this.id}`
+      let videoUrl = `https://www.youtube.com/watch?v=${this.id}`
+      // `playlistId` can be undefined
+      if (this.playlistId && this.playlistId.length !== 0) {
+        // `index` seems can be ignored
+        videoUrl += `&list=${this.playlistId}`
+      }
+      return videoUrl
     },
 
     youtubeShareURL() {
+      // `playlistId` can be undefined
+      if (this.playlistId && this.playlistId.length !== 0) {
+        // `index` seems can be ignored
+        return `https://www.youtube.com/watch?v=${this.id}&list=${this.playlistId}`
+      }
       return `https://youtu.be/${this.id}`
     },
 
@@ -111,7 +132,7 @@ export default Vue.extend({
       this.$refs.iconButton.focusOut()
     },
 
-    updateincludeTimestamp() {
+    updateIncludeTimestamp() {
       this.includeTimestamp = !this.includeTimestamp
     },
 
diff --git a/src/renderer/components/ft-share-button/ft-share-button.vue b/src/renderer/components/ft-share-button/ft-share-button.vue
index c87e5ed2..4f6ce564 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.vue
+++ b/src/renderer/components/ft-share-button/ft-share-button.vue
@@ -12,7 +12,7 @@
         :label="$t('Share.Include Timestamp')"
         :compact="true"
         :default-value="includeTimestamp"
-        @change="updateincludeTimestamp"
+        @change="updateIncludeTimestamp"
       />
     </ft-flex-box>
     <div class="shareLinks">
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 a7c9b751..fd14fd93 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.js
+++ b/src/renderer/components/watch-video-info/watch-video-info.js
@@ -82,6 +82,10 @@ export default Vue.extend({
       type: Boolean,
       required: true
     },
+    playlistId: {
+      type: String,
+      required: true
+    },
     theatrePossible: {
       type: Boolean,
       required: true
diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
index 2d446b32..303f17ac 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/src/renderer/components/watch-video-info/watch-video-info.vue
@@ -101,6 +101,7 @@
         <ft-share-button
           :id="id"
           :get-timestamp="getTimestamp"
+          :playlist-id="playlistId"
           class="option"
         />
       </div>
diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
index 449caaae..8424841e 100644
--- a/src/renderer/views/Watch/Watch.vue
+++ b/src/renderer/views/Watch/Watch.vue
@@ -83,6 +83,7 @@
         :is-upcoming="isUpcoming"
         :download-links="downloadLinks"
         :watching-playlist="watchingPlaylist"
+        :playlist-id="playlistId"
         :theatre-possible="theatrePossible"
         :length-seconds="videoLengthSeconds"
         :video-thumbnail="thumbnail"