mirror of https://github.com/FreeTubeApp/FreeTube
83 lines
2.4 KiB
JavaScript
83 lines
2.4 KiB
JavaScript
import { defineComponent, nextTick } from 'vue'
|
|
import { mapActions } from 'vuex'
|
|
import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
|
|
import FtPrompt from '../ft-prompt/ft-prompt.vue'
|
|
import FtButton from '../ft-button/ft-button.vue'
|
|
import FtInput from '../ft-input/ft-input.vue'
|
|
import FtPlaylistSelector from '../ft-playlist-selector/ft-playlist-selector.vue'
|
|
import {
|
|
showToast,
|
|
} from '../../helpers/utils'
|
|
|
|
export default defineComponent({
|
|
name: 'FtCreatePlaylistPrompt',
|
|
components: {
|
|
FtFlexBox,
|
|
FtPrompt,
|
|
FtButton,
|
|
FtInput,
|
|
FtPlaylistSelector
|
|
},
|
|
data: function () {
|
|
return {
|
|
playlistName: '',
|
|
}
|
|
},
|
|
computed: {
|
|
title: function () {
|
|
return this.$t('User Playlists.CreatePlaylistPrompt.New Playlist Name')
|
|
},
|
|
allPlaylists: function () {
|
|
return this.$store.getters.getAllPlaylists
|
|
},
|
|
newPlaylistVideoObject: function () {
|
|
return this.$store.getters.getNewPlaylistVideoObject
|
|
},
|
|
},
|
|
mounted: function () {
|
|
this.playlistName = this.newPlaylistVideoObject.title
|
|
// Faster to input required playlist name
|
|
nextTick(() => this.$refs.playlistNameInput.focus())
|
|
},
|
|
methods: {
|
|
createNewPlaylist: function () {
|
|
if (this.playlistName === '') {
|
|
showToast(this.$t('User Playlists.SinglePlaylistView.Toast["Playlist name cannot be empty. Please input a name."]'))
|
|
return
|
|
}
|
|
|
|
const nameExists = this.allPlaylists.findIndex((playlist) => {
|
|
return playlist.playlistName === this.playlistName
|
|
})
|
|
if (nameExists !== -1) {
|
|
showToast(this.$t('User Playlists.CreatePlaylistPrompt.Toast["There is already a playlist with this name. Please pick a different name."]'))
|
|
return
|
|
}
|
|
|
|
const playlistObject = {
|
|
playlistName: this.playlistName,
|
|
protected: false,
|
|
description: '',
|
|
videos: [],
|
|
}
|
|
|
|
try {
|
|
this.addPlaylist(playlistObject)
|
|
showToast(this.$t('User Playlists.CreatePlaylistPrompt.Toast["Playlist {playlistName} has been successfully created."]', {
|
|
playlistName: this.playlistName,
|
|
}))
|
|
} catch (e) {
|
|
showToast(this.$t('User Playlists.CreatePlaylistPrompt.Toast["There was an issue with creating the playlist."]'))
|
|
console.error(e)
|
|
} finally {
|
|
this.hideCreatePlaylistPrompt()
|
|
}
|
|
},
|
|
|
|
...mapActions([
|
|
'addPlaylist',
|
|
'hideCreatePlaylistPrompt',
|
|
])
|
|
}
|
|
})
|