2022-04-07 02:33:25 +00:00
|
|
|
<template>
|
2022-08-28 17:40:35 +00:00
|
|
|
<ModalComponent>
|
2022-09-08 20:56:24 +00:00
|
|
|
<span class="text-2xl w-max inline-block" v-t="'actions.select_playlist'" />
|
2022-08-28 17:40:35 +00:00
|
|
|
<select class="select w-full mt-3" v-model="selectedPlaylist">
|
|
|
|
<option v-for="playlist in playlists" :value="playlist.id" :key="playlist.id" v-text="playlist.name" />
|
|
|
|
</select>
|
2023-07-05 11:04:50 +00:00
|
|
|
<div class="flex justify-between w-full mt-3">
|
|
|
|
<button class="btn" @click="onCreatePlaylist" ref="addButton" v-t="'actions.create_playlist'" />
|
2022-08-28 17:40:35 +00:00
|
|
|
<button
|
|
|
|
class="btn"
|
|
|
|
@click="handleClick(selectedPlaylist)"
|
|
|
|
ref="addButton"
|
|
|
|
v-t="'actions.add_to_playlist'"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</ModalComponent>
|
2022-04-07 02:33:25 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2022-08-28 17:40:35 +00:00
|
|
|
import ModalComponent from "./ModalComponent.vue";
|
|
|
|
|
2022-04-07 02:33:25 +00:00
|
|
|
export default {
|
2022-08-28 17:40:35 +00:00
|
|
|
components: {
|
|
|
|
ModalComponent,
|
|
|
|
},
|
2022-04-07 02:33:25 +00:00
|
|
|
props: {
|
2023-06-15 15:32:32 +00:00
|
|
|
videoInfo: {
|
|
|
|
type: Object,
|
|
|
|
required: true,
|
|
|
|
},
|
2022-04-07 02:33:25 +00:00
|
|
|
videoId: {
|
2023-06-15 20:41:26 +00:00
|
|
|
type: String,
|
2022-04-07 02:33:25 +00:00
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
playlists: [],
|
|
|
|
selectedPlaylist: null,
|
2022-04-09 07:45:25 +00:00
|
|
|
processing: false,
|
2022-04-07 02:33:25 +00:00
|
|
|
};
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.fetchPlaylists();
|
2022-07-21 04:04:57 +00:00
|
|
|
this.selectedPlaylist = this.getPreferenceString("selectedPlaylist" + this.hashCode(this.authApiUrl()));
|
2022-04-09 07:45:25 +00:00
|
|
|
window.addEventListener("keydown", this.handleKeyDown);
|
|
|
|
window.blur();
|
|
|
|
},
|
|
|
|
unmounted() {
|
|
|
|
window.removeEventListener("keydown", this.handleKeyDown);
|
2022-04-07 02:33:25 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2022-04-09 07:45:25 +00:00
|
|
|
handleKeyDown(event) {
|
2022-08-28 17:40:35 +00:00
|
|
|
if (event.code === "Enter") {
|
2022-04-09 07:45:25 +00:00
|
|
|
this.handleClick(this.selectedPlaylist);
|
2022-08-28 17:40:35 +00:00
|
|
|
event.preventDefault();
|
|
|
|
}
|
2022-04-09 07:45:25 +00:00
|
|
|
},
|
2022-04-07 02:33:25 +00:00
|
|
|
handleClick(playlistId) {
|
|
|
|
if (!playlistId) {
|
|
|
|
alert(this.$t("actions.please_select_playlist"));
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2022-04-09 07:45:25 +00:00
|
|
|
if (this.processing) return;
|
|
|
|
|
2022-04-07 02:33:25 +00:00
|
|
|
this.$refs.addButton.disabled = true;
|
2022-04-09 07:45:25 +00:00
|
|
|
this.processing = true;
|
2022-04-07 02:33:25 +00:00
|
|
|
|
2023-06-15 15:32:32 +00:00
|
|
|
this.addVideosToPlaylist(playlistId, [this.videoId], [this.videoInfo]).then(json => {
|
2022-07-21 04:04:57 +00:00
|
|
|
this.setPreference("selectedPlaylist" + this.hashCode(this.authApiUrl()), playlistId);
|
2022-04-07 02:33:25 +00:00
|
|
|
this.$emit("close");
|
|
|
|
if (json.error) alert(json.error);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
async fetchPlaylists() {
|
2023-06-15 15:32:32 +00:00
|
|
|
this.getPlaylists().then(json => {
|
2022-04-07 02:33:25 +00:00
|
|
|
this.playlists = json;
|
|
|
|
});
|
|
|
|
},
|
2023-07-05 11:04:50 +00:00
|
|
|
onCreatePlaylist() {
|
|
|
|
const name = prompt(this.$t("actions.create_playlist"));
|
|
|
|
if (!name) return;
|
|
|
|
this.createPlaylist(name).then(json => {
|
|
|
|
if (json.error) alert(json.error);
|
|
|
|
else this.fetchPlaylists();
|
|
|
|
});
|
|
|
|
},
|
2022-04-07 02:33:25 +00:00
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|