clone playlist from youtube

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>

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 />

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')}:`" />

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",

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";