From 6a05acf93996603d4aa0836f6694aac154224bbb Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Thu, 7 Apr 2022 16:48:03 +0100
Subject: [PATCH] Add button to add to playlist when watching.

---
 src/components/WatchVideo.vue | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 5f657e39..ff75d788 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -73,15 +73,21 @@
                     />
                     <font-awesome-icon class="ml-1" v-if="video.uploaderVerified" icon="check" />
                 </div>
-                <button
-                    v-if="authenticated"
-                    class="btn relative ml-auto"
-                    @click="subscribeHandler"
-                    v-t="{
-                        path: `actions.${subscribed ? 'unsubscribe' : 'subscribe'}`,
-                        args: { count: numberFormat(video.uploaderSubscriberCount) },
-                    }"
-                />
+                <div class="relative ml-auto children:mx-2">
+                    <button class="btn" v-if="authenticated" @click="showModal = !showModal">
+                        {{ $t("actions.add_to_playlist") }}<font-awesome-icon class="ml-1" icon="circle-plus" />
+                    </button>
+                    <button
+                        class="btn"
+                        v-if="authenticated"
+                        @click="subscribeHandler"
+                        v-t="{
+                            path: `actions.${subscribed ? 'unsubscribe' : 'subscribe'}`,
+                            args: { count: numberFormat(video.uploaderSubscriberCount) },
+                        }"
+                    />
+                </div>
+                <PlaylistAddModal v-if="showModal" :video-id="getVideoId()" @close="showModal = !showModal" />
             </div>
 
             <hr />
@@ -149,6 +155,7 @@ import VideoItem from "@/components/VideoItem.vue";
 import ErrorHandler from "@/components/ErrorHandler.vue";
 import CommentItem from "@/components/CommentItem.vue";
 import Chapters from "@/components/Chapters.vue";
+import PlaylistAddModal from "./PlaylistAddModal.vue";
 
 export default {
     name: "App",
@@ -158,6 +165,7 @@ export default {
         ErrorHandler,
         CommentItem,
         Chapters,
+        PlaylistAddModal,
     },
     data() {
         const smallViewQuery = window.matchMedia("(max-width: 640px)");
@@ -176,6 +184,7 @@ export default {
             active: true,
             smallViewQuery: smallViewQuery,
             smallView: smallViewQuery.matches,
+            showModal: false,
         };
     },
     computed: {