Edit Song Description (#1088)
* add editPlayListDescription * add feature to change playlist description * add queue history styling * add queue features * replay styling update * change queue and history headers * fixed the duration css not working
This commit is contained in:
Jason Chen
GitHub
parent
7458fb944f
commit
ccd94f0702
6 changed files with 105 additions and 12 deletions
1
src/renderer/less/bootstrap.less
vendored
1
src/renderer/less/bootstrap.less
vendored
|
|
@ -845,6 +845,7 @@
|
|||
padding : 0.5rem 1rem;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
border-top : 1px solid rgba(0, 0, 0, 0.125);
|
||||
text-align : center;
|
||||
}
|
||||
|
||||
.card-footer:last-child {
|
||||
|
|
|
|||
|
|
@ -291,8 +291,10 @@
|
|||
|
||||
/* queue item */
|
||||
.cd-queue-item {
|
||||
border-bottom: 1px solid rgb(200 200 200 / 10%);
|
||||
padding: 8px;
|
||||
border-bottom: 0px solid rgb(200 200 200 / 10%);
|
||||
padding: 1px;
|
||||
padding-bottom: 9px;
|
||||
padding-top: 9px;
|
||||
|
||||
.row,
|
||||
.col {
|
||||
|
|
@ -301,8 +303,8 @@
|
|||
}
|
||||
|
||||
.artwork {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
|
|
@ -320,18 +322,46 @@
|
|||
}
|
||||
|
||||
.queue-info {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
||||
.queue-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.queue-subtitle {
|
||||
font-size: 13px;
|
||||
opacity: 0.85;
|
||||
font-size: 0.7em;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.queue-duration-info {
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.queue-duration {
|
||||
font-size: 14px;
|
||||
justify-content: center;
|
||||
min-width: 60px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.queue-explicit-icon {
|
||||
display: flex;
|
||||
width: 24px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.explicit-icon {
|
||||
background-image: url("./assets/explicit.svg");
|
||||
height: 12px;
|
||||
width: 36px;
|
||||
filter: contrast(0);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
/* horizontal media scroller */
|
||||
|
|
|
|||
|
|
@ -667,8 +667,6 @@
|
|||
.nameEdit {
|
||||
font-weight : 700;
|
||||
font-size : 1.6rem;
|
||||
margin-bottom: 6px;
|
||||
margin-right : 6px;
|
||||
flex-shrink : unset;
|
||||
background : transparent;
|
||||
border : 0px;
|
||||
|
|
@ -676,6 +674,16 @@
|
|||
font-family : inherit;
|
||||
}
|
||||
|
||||
.descriptionEdit {
|
||||
font-size : 14px;
|
||||
flex-shrink : unset;
|
||||
background : transparent;
|
||||
border : 0px;
|
||||
color : inherit;
|
||||
font-family : inherit;
|
||||
width : 60vw;
|
||||
}
|
||||
|
||||
.playlist-artist {
|
||||
font-size : 20px;
|
||||
margin-bottom: 6px;
|
||||
|
|
|
|||
|
|
@ -1350,6 +1350,21 @@ const app = new Vue({
|
|||
self.refreshPlaylists(false, false)
|
||||
})
|
||||
},
|
||||
async editPlaylistDescription(id, name = app.getLz('term.newPlaylist')) {
|
||||
let self = this
|
||||
this.mk.api.v3.music(
|
||||
`/v1/me/library/playlists/${id}`, {}, {
|
||||
fetchOptions: {
|
||||
method: "PATCH",
|
||||
body: JSON.stringify({
|
||||
attributes: { description: name }
|
||||
})
|
||||
}
|
||||
}
|
||||
).then(res => {
|
||||
self.refreshPlaylists(false, false)
|
||||
})
|
||||
},
|
||||
copyToClipboard(str) {
|
||||
// if (navigator.userAgent.includes('Darwin') || navigator.appVersion.indexOf("Mac") != -1) {
|
||||
// this.darwinShare(str)
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
<div class="queue-panel">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3 class="queue-header-text">{{app.getLz('term.queue')}}</h3>
|
||||
<h3 class="queue-header-text" v-if="page == 'queue'">{{app.getLz('term.queue')}}</h3>
|
||||
<h3 class="queue-header-text" v-if="page == 'history'">{{app.getLz('term.history')}}</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center">
|
||||
<button class="autoplay" :style="{'background': app.mk.autoplayEnabled ? 'var(--keyColor)' : ''}"
|
||||
|
|
@ -33,6 +34,12 @@
|
|||
<div class="queue-title text-overflow-elipsis">{{ queueItem.item.attributes.name }}</div>
|
||||
<div class="queue-subtitle text-overflow-elipsis">{{ queueItem.item.attributes.artistName }} — {{ queueItem.item.attributes.albumName }}</div>
|
||||
</div>
|
||||
<div class="queue-explicit-icon flex-center" v-if="queueItem.item.attributes.contentRating == 'explicit'">
|
||||
<div class="explicit-icon"></div>
|
||||
</div>
|
||||
<div class="col queue-duration-info">
|
||||
<div class="queue-duration flex-center">{{convertTimeToString(queueItem.item.attributes.durationInMillis)}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -167,6 +174,10 @@
|
|||
this.selected = -1
|
||||
app.mk.queue._queueItems = this.queueItems;
|
||||
app.mk.queue._reindex()
|
||||
},
|
||||
convertTimeToString(timeInMilliseconds) {
|
||||
var seconds = ((timeInMilliseconds % 60000) / 1000).toFixed(0);
|
||||
return Math.floor(timeInMilliseconds/60000) + ":" + (seconds < 10 ? '0' : '') + seconds;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -54,9 +54,16 @@
|
|||
class="content"
|
||||
v-html="data.attributes.description?.short ?? data.attributes.editorialNotes?.short"
|
||||
@click="openInfoModal()"></div>
|
||||
<div v-else-if="(data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard) != null"
|
||||
class="content"
|
||||
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 == false)"
|
||||
@mouseover="minClass(false)" @click="editPlaylistDescription()">{{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"
|
||||
@click="editorialNotesExpanded = !editorialNotesExpanded">
|
||||
{{app.getLz('term.showMore')}}
|
||||
|
|
@ -265,6 +272,7 @@
|
|||
editorialNotesExpanded: false,
|
||||
drag: false,
|
||||
nameEditing: false,
|
||||
descriptionEditing: false,
|
||||
inLibrary: null,
|
||||
confirm: false,
|
||||
app: this.$root,
|
||||
|
|
@ -412,12 +420,24 @@
|
|||
},
|
||||
editPlaylist() {
|
||||
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 => {
|
||||
if (playlist.id === this.data.id) {
|
||||
playlist.attributes.name = this.data.attributes.name
|
||||
playlist.attributes.description = this.data.attributes.description.standard
|
||||
}
|
||||
})
|
||||
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) {
|
||||
app.mk.addToLibrary(id)
|
||||
|
|
@ -450,6 +470,14 @@
|
|||
}, 100)
|
||||
}
|
||||
},
|
||||
editPlaylistDescription() {
|
||||
if (this.data.attributes.canEdit && this.data.type === "library-playlists") {
|
||||
this.descriptionEditing = true
|
||||
setTimeout(() => {
|
||||
document.querySelector(".descriptionEdit").focus()
|
||||
}, 100)
|
||||
}
|
||||
},
|
||||
buildContextMenu(index) {
|
||||
let self = this
|
||||
if (!this.data.attributes.canEdit) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue