add feature to change playlist description

This commit is contained in:
Jason Chen 2022-05-28 17:07:28 -07:00
parent 80f408a7aa
commit 60506dc47a
2 changed files with 41 additions and 5 deletions

View file

@ -667,8 +667,6 @@
.nameEdit { .nameEdit {
font-weight : 700; font-weight : 700;
font-size : 1.6rem; font-size : 1.6rem;
margin-bottom: 6px;
margin-right : 6px;
flex-shrink : unset; flex-shrink : unset;
background : transparent; background : transparent;
border : 0px; border : 0px;
@ -676,6 +674,16 @@
font-family : inherit; font-family : inherit;
} }
.descriptionEdit {
font-size : 14px;
flex-shrink : unset;
background : transparent;
border : 0px;
color : inherit;
font-family : inherit;
width : 60vw;
}
.playlist-artist { .playlist-artist {
font-size : 20px; font-size : 20px;
margin-bottom: 6px; margin-bottom: 6px;

View file

@ -54,9 +54,16 @@
class="content" class="content"
v-html="data.attributes.description?.short ?? data.attributes.editorialNotes?.short" v-html="data.attributes.description?.short ?? data.attributes.editorialNotes?.short"
@click="openInfoModal()"></div> @click="openInfoModal()"></div>
<div v-else-if="(data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard) != null" <div v-else-if="((data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard) != null) && (descriptionEditing == false)"
class="content" @mouseover="minClass(false)" @click="editPlaylistDescription()">{{data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard}}</div>
v-html="data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard"></div> <div v-else-if="((data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard) != null) && (descriptionEditing)"
@mouseover="minClass(false)"><input type="text"
spellcheck="false"
class="descriptionEdit"
v-model="data.attributes.description.standard"
@blur="editPlaylist"
@change="editPlaylist"
@keydown.enter="editPlaylist"/></div>
<!-- <button v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short ) != null" class="more-btn" <!-- <button v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short ) != null" class="more-btn"
@click="editorialNotesExpanded = !editorialNotesExpanded"> @click="editorialNotesExpanded = !editorialNotesExpanded">
{{app.getLz('term.showMore')}} {{app.getLz('term.showMore')}}
@ -265,6 +272,7 @@
editorialNotesExpanded: false, editorialNotesExpanded: false,
drag: false, drag: false,
nameEditing: false, nameEditing: false,
descriptionEditing: false,
inLibrary: null, inLibrary: null,
confirm: false, confirm: false,
app: this.$root, app: this.$root,
@ -412,12 +420,24 @@
}, },
editPlaylist() { editPlaylist() {
this.app.editPlaylist(this.data.id, this.data.attributes.name); this.app.editPlaylist(this.data.id, this.data.attributes.name);
this.app.editPlaylistDescription(this.data.id, this.data.attributes.description.standard);
this.app.playlists.listing.forEach(playlist => { this.app.playlists.listing.forEach(playlist => {
if (playlist.id === this.data.id) { if (playlist.id === this.data.id) {
playlist.attributes.name = this.data.attributes.name playlist.attributes.name = this.data.attributes.name
playlist.attributes.description = this.data.attributes.description.standard
} }
}) })
this.nameEditing = false this.nameEditing = false
this.descriptionEditing = false
},
editPlaylistDescription() {
this.app.editPlaylistDescription(this.data.id, this.data.attributes.description.standard);
this.app.playlists.listing.forEach(playlist => {
if (playlist.id === this.data.id) {
playlist.attributes.description = this.data.attributes.description.standard
}
})
this.descriptionEditing = false
}, },
addToLibrary(id) { addToLibrary(id) {
app.mk.addToLibrary(id) app.mk.addToLibrary(id)
@ -450,6 +470,14 @@
}, 100) }, 100)
} }
}, },
editPlaylistDescription() {
if (this.data.attributes.canEdit && this.data.type === "library-playlists") {
this.descriptionEditing = true
setTimeout(() => {
document.querySelector(".descriptionEdit").focus()
}, 100)
}
},
buildContextMenu(index) { buildContextMenu(index) {
let self = this let self = this
if (!this.data.attributes.canEdit) { if (!this.data.attributes.canEdit) {