Add 'share with playlist' option for share button

When the option is used (true by default) links generated by the share button will redirect to the same video in the same playlist.
Support for various locales still need to be added.

src/components/ShareModal.vue

@@ -9,11 +9,17 @@
             <label v-t="'actions.piped_link'" />
             <input type="checkbox" v-model="pipedLink" @change="onChange" />
         </div>
+        <div v-if="this.hasPlaylist" class="flex justify-between">
+            <label v-t="'actions.with_playlist'" />
+            <input type="checkbox" v-model="withPlaylist" @change="onChange" />
+        </div>
         <div class="flex justify-between mt-2">
             <label v-t="'actions.time_code'" />
             <input class="input w-12" type="text" v-model="timeStamp" />
         </div>
-        <a :href="generatedLink" target="_blank"><h3 class="mt-4" v-text="generatedLink" /></a>
+        <a :href="generatedLink" target="_blank">
+            <h3 class="mt-4" v-text="generatedLink" />
+        </a>
         <div class="flex justify-end mt-4">
             <button class="btn" v-t="'actions.follow_link'" @click="followLink()" />
             <button class="btn ml-3" v-t="'actions.copy_link'" @click="copyLink()" />
@@ -34,6 +40,14 @@ export default {
             type: Number,
             required: true,
         },
+        playlistId: {
+            type: String,
+            required: true,
+        },
+        playlistIndex: {
+            type: Number,
+            required: true,
+        },
     },
     components: {
         ModalComponent,
@@ -42,13 +56,17 @@ export default {
         return {
             withTimeCode: true,
             pipedLink: true,
+            withPlaylist: true,
             timeStamp: null,
+            hasPlaylist: false,
         };
     },
     mounted() {
         this.timeStamp = parseInt(this.currentTime);
         this.withTimeCode = this.getPreferenceBoolean("shareWithTimeCode", true);
         this.pipedLink = this.getPreferenceBoolean("shareAsPipedLink", true);
+        this.withPlaylist = this.getPreferenceBoolean("shareWithPlaylist", true);
+        this.hasPlaylist = this.playlistId != undefined && !isNaN(this.playlistIndex);
     },
     methods: {
         followLink() {
@@ -68,6 +86,7 @@ export default {
         onChange() {
             this.setPreference("shareWithTimeCode", this.withTimeCode, true);
             this.setPreference("shareAsPipedLink", this.pipedLink, true);
+            this.setPreference("shareWithPlaylist", this.withPlaylist, true);
         },
     },
     computed: {
@@ -77,6 +96,10 @@ export default {
                 : "https://youtu.be/" + this.videoId;
             var url = new URL(baseUrl);
             if (this.withTimeCode && this.timeStamp > 0) url.searchParams.append("t", this.timeStamp);
+            if (this.hasPlaylist && this.withPlaylist) {
+                url.searchParams.append("list", this.playlistId);
+                url.searchParams.append("index", this.playlistIndex);
+            }
             return url.href;
         },
     },

src/components/WatchVideo.vue

@@ -92,6 +92,8 @@
                     v-if="showShareModal"
                     :video-id="getVideoId()"
                     :current-time="currentTime"
+                    :playlist-id="playlistId"
+                    :playlist-index="index"
                     @close="showShareModal = !showShareModal"
                 />
                 <div class="flex">

src/locales/en.json

@@ -119,7 +119,8 @@
         "source_code": "Source code",
         "instance_donations": "Instance donations",
         "reply_count": "{count} replies",
-        "no_valid_playlists": "The file doesn't contain valid playlists!"
+        "no_valid_playlists": "The file doesn't contain valid playlists!",
+        "with_playlist": "Share with playlist"
     },
     "comment": {
         "pinned_by": "Pinned by {author}",