clone playlist from youtube

This commit is contained in:
Bnyro 2022-07-21 22:51:41 +02:00
parent 4a4e28007f
commit 6c3eb2304d
5 changed files with 32 additions and 5 deletions

View file

@ -2,7 +2,7 @@
<ErrorHandler v-if="playlist && playlist.error" :message="playlist.message" :error="playlist.error" /> <ErrorHandler v-if="playlist && playlist.error" :message="playlist.message" :error="playlist.error" />
<div v-if="playlist" v-show="!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 class="grid grid-cols-2">
<div> <div>
@ -15,7 +15,10 @@
<div class="right-2vw absolute"> <div class="right-2vw absolute">
<strong v-text="`${playlist.videos} ${$t('video.videos')}`" /> <strong v-text="`${playlist.videos} ${$t('video.videos')}`" />
<br /> <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" /> <font-awesome-icon icon="rss" />
</a> </a>
</div> </div>
@ -59,6 +62,10 @@ export default {
getRssUrl: _this => { getRssUrl: _this => {
return _this.authApiUrl() + "/rss/playlists/" + _this.$route.query.list; 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() { mounted() {
this.getPlaylistData(); this.getPlaylistData();
@ -109,6 +116,22 @@ export default {
removeVideo(index) { removeVideo(index) {
this.playlist.relatedStreams.splice(index, 1); 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> </script>

View file

@ -244,7 +244,7 @@
class="input w-auto" class="input w-auto"
type="password" 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 /> <br />
</div> </div>
<br /> <br />

View file

@ -1,5 +1,5 @@
<template> <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"> <label for="ddlSearchFilters">
<strong v-text="`${$t('actions.filter')}:`" /> <strong v-text="`${$t('actions.filter')}:`" />

View file

@ -86,7 +86,9 @@
"minimize_recommendations_default": "Minimize Recommendations by default", "minimize_recommendations_default": "Minimize Recommendations by default",
"invalidate_session": "Logout all devices", "invalidate_session": "Logout all devices",
"different_auth_instance": "Use a different instance for authentication", "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": { "comment": {
"pinned_by": "Pinned by", "pinned_by": "Pinned by",

View file

@ -17,6 +17,7 @@ import {
faCirclePlus, faCirclePlus,
faCircleMinus, faCircleMinus,
faXmark, faXmark,
faClone,
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
import { faGithub, faBitcoin, faYoutube } from "@fortawesome/free-brands-svg-icons"; import { faGithub, faBitcoin, faYoutube } from "@fortawesome/free-brands-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@ -40,6 +41,7 @@ library.add(
faCirclePlus, faCirclePlus,
faCircleMinus, faCircleMinus,
faXmark, faXmark,
faClone,
); );
import router from "@/router/router.js"; import router from "@/router/router.js";