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

@@ -399,7 +399,8 @@ export default Vue.extend({
       'grabHistory',
       'grabAllPlaylists',
       'getRegionData',
-      'getYoutubeUrlInfo'
+      'getYoutubeUrlInfo',
+      'getLocale'
     ]),
 
     ...mapMutations([

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

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

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

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>

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"