Merge pull request #1851 from gmnsii/playlist-integration-with-share

Add playlist integration for share button

src/components/ShareModal.vue

@@ -1,19 +1,25 @@
 <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" />
         </div>
-        <div class="flex justify-between mt-2">
+        <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">
+            <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>
-        <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,12 @@ export default {
             type: Number,
             required: true,
         },
+        playlistId: {
+            type: String,
+        },
+        playlistIndex: {
+            type: Number,
+        },
     },
     components: {
         ModalComponent,
@@ -42,13 +54,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 +84,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 +94,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}",