okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Edit Song Description (#1088)

Browse source 
* 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 2022-05-31 14:54:02 -07:00 • committed by GitHub
parent 7458fb944f
commit ccd94f0702
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 105 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/renderer/views/components/queue.ejs
View file

@ -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;
}
}
});

34
src/renderer/views/pages/cider-playlist.ejs
View file

@ -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) {