From 6c3eb2304d8d0993bc7849275c10d0d71f2e8f6b Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Thu, 21 Jul 2022 22:51:41 +0200
Subject: [PATCH 1/3] clone playlist from youtube

---
 src/components/PlaylistPage.vue    | 27 +++++++++++++++++++++++++--
 src/components/PreferencesPage.vue |  2 +-
 src/components/SearchResults.vue   |  2 +-
 src/locales/en.json                |  4 +++-
 src/main.js                        |  2 ++
 5 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/components/PlaylistPage.vue b/src/components/PlaylistPage.vue
index d54d63da..4cddd1fe 100644
--- a/src/components/PlaylistPage.vue
+++ b/src/components/PlaylistPage.vue
@@ -2,7 +2,7 @@
     <ErrorHandler v-if="playlist && playlist.error" :message="playlist.message" :error="playlist.error" />
 
     <div v-if="playlist" v-show="!playlist.error">
-        <h1 class="text-center" v-text="playlist.name" />
+        <h1 class="text-center my-4" v-text="playlist.name" />
 
         <div class="grid grid-cols-2">
             <div>
@@ -15,7 +15,10 @@
                 <div class="right-2vw absolute">
                     <strong v-text="`${playlist.videos} ${$t('video.videos')}`" />
                     <br />
-                    <a :href="getRssUrl">
+                    <button class="btn mr-1" v-if="authenticated && !isPipedPlaylist" @click="clonePlaylist">
+                        {{ $t("actions.clone_playlist") }}<font-awesome-icon class="ml-3" icon="clone" />
+                    </button>
+                    <a class="btn" :href="getRssUrl">
                         <font-awesome-icon icon="rss" />
                     </a>
                 </div>
@@ -59,6 +62,10 @@ export default {
         getRssUrl: _this => {
             return _this.authApiUrl() + "/rss/playlists/" + _this.$route.query.list;
         },
+        isPipedPlaylist() {
+            // FIXME: this checks whether it's a YouTube or a Piped playlist
+            return this.$route.query.list.includes("-");
+        },
     },
     mounted() {
         this.getPlaylistData();
@@ -109,6 +116,22 @@ export default {
         removeVideo(index) {
             this.playlist.relatedStreams.splice(index, 1);
         },
+        async clonePlaylist() {
+            const playlistId = this.$route.query.list;
+            this.fetchJson(this.authApiUrl() + "/import/playlist", null, {
+                method: "POST",
+                headers: {
+                    Authorization: this.getAuthToken(),
+                },
+                body: JSON.stringify({
+                    playlistId: playlistId,
+                }),
+            }).then(resp => {
+                if (!resp.error) {
+                    alert(this.$t("actions.clone_playlist_success"));
+                } else alert(resp.error);
+            });
+        },
     },
 };
 </script>
diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
index 7dc68ae8..a797a2ff 100644
--- a/src/components/PreferencesPage.vue
+++ b/src/components/PreferencesPage.vue
@@ -244,7 +244,7 @@
                 class="input w-auto"
                 type="password"
             />
-            <a class="btn w-auto" style="margin-left: 0.5em" @click="deleteAccount" v-t="'actions.delete_account'" />
+            <a class="btn w-auto ml-2" @click="deleteAccount" v-t="'actions.delete_account'" />
             <br />
         </div>
         <br />
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 7cc1c08a..0e16f69a 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -1,5 +1,5 @@
 <template>
-    <h1 class="text-center" v-text="$route.query.search_query" />
+    <h1 class="text-center my-2" v-text="$route.query.search_query" />
 
     <label for="ddlSearchFilters">
         <strong v-text="`${$t('actions.filter')}:`" />
diff --git a/src/locales/en.json b/src/locales/en.json
index c21d496f..3d905114 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -86,7 +86,9 @@
         "minimize_recommendations_default": "Minimize Recommendations by default",
         "invalidate_session": "Logout all devices",
         "different_auth_instance": "Use a different instance for authentication",
-        "instance_auth_selection": "Autentication Instance Selection"
+        "instance_auth_selection": "Autentication Instance Selection",
+        "clone_playlist": "Clone Playlist",
+        "clone_playlist_success": "Successfully cloned!"
     },
     "comment": {
         "pinned_by": "Pinned by",
diff --git a/src/main.js b/src/main.js
index 1cfce4a7..7e64637b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -17,6 +17,7 @@ import {
     faCirclePlus,
     faCircleMinus,
     faXmark,
+    faClone,
 } from "@fortawesome/free-solid-svg-icons";
 import { faGithub, faBitcoin, faYoutube } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -40,6 +41,7 @@ library.add(
     faCirclePlus,
     faCircleMinus,
     faXmark,
+    faClone,
 );
 
 import router from "@/router/router.js";

From c92eb10a86dd1d0866ce2fcf3fb1f0b6a59967ad Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Fri, 22 Jul 2022 13:39:49 +0200
Subject: [PATCH 2/3] use regex

---
 src/components/PlaylistPage.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/PlaylistPage.vue b/src/components/PlaylistPage.vue
index 4cddd1fe..0e69015a 100644
--- a/src/components/PlaylistPage.vue
+++ b/src/components/PlaylistPage.vue
@@ -62,9 +62,10 @@ export default {
         getRssUrl: _this => {
             return _this.authApiUrl() + "/rss/playlists/" + _this.$route.query.list;
         },
-        isPipedPlaylist() {
-            // FIXME: this checks whether it's a YouTube or a Piped playlist
-            return this.$route.query.list.includes("-");
+        isPipedPlaylist: _this => {
+            // regex to determine whether it's a Piped plalylist
+            const regex = new RegExp("[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}");
+            return regex.test(_this.$route.query.list);
         },
     },
     mounted() {
@@ -117,14 +118,13 @@ export default {
             this.playlist.relatedStreams.splice(index, 1);
         },
         async clonePlaylist() {
-            const playlistId = this.$route.query.list;
             this.fetchJson(this.authApiUrl() + "/import/playlist", null, {
                 method: "POST",
                 headers: {
                     Authorization: this.getAuthToken(),
                 },
                 body: JSON.stringify({
-                    playlistId: playlistId,
+                    playlistId: this.$route.query.list,
                 }),
             }).then(resp => {
                 if (!resp.error) {

From 69787ded3b1fcb50833d2d1936536aa49f079c58 Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Fri, 22 Jul 2022 18:57:51 +0530
Subject: [PATCH 3/3] Use more conventional regex format.

---
 src/components/PlaylistPage.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/PlaylistPage.vue b/src/components/PlaylistPage.vue
index 0e69015a..67e5e9a7 100644
--- a/src/components/PlaylistPage.vue
+++ b/src/components/PlaylistPage.vue
@@ -64,8 +64,9 @@ export default {
         },
         isPipedPlaylist: _this => {
             // regex to determine whether it's a Piped plalylist
-            const regex = new RegExp("[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}");
-            return regex.test(_this.$route.query.list);
+            return /[\da-fA-F]{8}-[\da-fA-F]{4}-[\da-fA-F]{4}-[\da-fA-F]{4}-[\da-fA-F]{12}/.test(
+                _this.$route.query.list,
+            );
         },
     },
     mounted() {