From 72f4f0d00c2f44cdfe9810c892fb83ba575c0402 Mon Sep 17 00:00:00 2001
From: gmnsii <github.gmnsii@pm.me>
Date: Sun, 4 Dec 2022 15:19:24 -0800
Subject: [PATCH 1/2] 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 | 25 ++++++++++++++++++++++++-
 src/components/WatchVideo.vue |  2 ++
 src/locales/en.json           |  3 ++-
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/components/ShareModal.vue b/src/components/ShareModal.vue
index 10b6c74d..cf23a438 100644
--- a/src/components/ShareModal.vue
+++ b/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;
         },
     },
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index e436d4f0..6b8d989d 100644
--- a/src/components/WatchVideo.vue
+++ b/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">
diff --git a/src/locales/en.json b/src/locales/en.json
index 8d3782a1..318f1bcf 100644
--- a/src/locales/en.json
+++ b/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}",

From edd65825f851b12e362221e02d524f01ab2784bd Mon Sep 17 00:00:00 2001
From: gmnsii <github.gmnsii@pm.me>
Date: Thu, 15 Dec 2022 15:26:42 -0800
Subject: [PATCH 2/2] ShareModal - visual changes and improved component
 reusability

Time code text field no longer appears when sharing without time code.
Time code text field now appears under 'share with time code' checkbox.
'playlistId' and 'playlistIndex' are no longer required props.
---
 src/components/ShareModal.vue | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/ShareModal.vue b/src/components/ShareModal.vue
index cf23a438..3a7b1218 100644
--- a/src/components/ShareModal.vue
+++ b/src/components/ShareModal.vue
@@ -1,10 +1,6 @@
 <template>
     <ModalComponent>
         <h2 v-t="'actions.share'" />
-        <div class="flex justify-between mt-4">
-            <label v-t="'actions.with_timecode'" for="withTimeCode" />
-            <input id="withTimeCode" type="checkbox" v-model="withTimeCode" @change="onChange" />
-        </div>
         <div class="flex justify-between">
             <label v-t="'actions.piped_link'" />
             <input type="checkbox" v-model="pipedLink" @change="onChange" />
@@ -13,7 +9,11 @@
             <label v-t="'actions.with_playlist'" />
             <input type="checkbox" v-model="withPlaylist" @change="onChange" />
         </div>
-        <div class="flex justify-between mt-2">
+        <div class="flex justify-between">
+            <label v-t="'actions.with_timecode'" for="withTimeCode" />
+            <input id="withTimeCode" type="checkbox" v-model="withTimeCode" @change="onChange" />
+        </div>
+        <div v-if="this.withTimeCode" class="flex justify-between mt-2">
             <label v-t="'actions.time_code'" />
             <input class="input w-12" type="text" v-model="timeStamp" />
         </div>
@@ -42,11 +42,9 @@ export default {
         },
         playlistId: {
             type: String,
-            required: true,
         },
         playlistIndex: {
             type: Number,
-            required: true,
         },
     },
     components: {