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

Added full editorial notes for playlist

Browse source
This commit is contained in:
booploops 2021-12-08 00:45:51 -08:00
parent e22232c6ac
commit 6a59de9b16
2 changed files with 71 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

28
resources/cider-ui-tests/style.css
View file

@ -1470,6 +1470,34 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
text-transform: uppercase;
}
.playlist-display .playlist-info .playlist-desc-expanded {
box-sizing: border-box;
font-size: 14px;
position: relative;
}
.playlist-display .playlist-info .playlist-desc-expanded .more-btn {
appearance: none;
position: absolute;
right: 0;
bottom: 0;
padding: 0 5px;
font-size: 14px;
color: var(--keyColor);
background-color: transparent;
border: 0px;
cursor: pointer;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
justify-content: flex-end;
align-items: flex-end;
font-weight: 600;
font-family: inherit;
text-transform: uppercase;
}
.playlist-time {
font-size: 0.9em;
margin: 6px;

41
resources/cider-ui-tests/views/pages/cider-playlist.ejs
View file

@ -16,18 +16,40 @@
</div>
</div>
<div class="col playlist-info">
<div class="playlist-name">{{data.attributes ? (data.attributes.name ?? (data.attributes.title ?? '') ?? '') : ''}}</div>
<div class="playlist-artist" v-if="data.attributes && data.attributes.artistName">{{data.attributes ? (data.attributes.artistName ?? '') :''}}
<template v-if="!editorialNotesExpanded">
<div>
<div class="playlist-name">{{data.attributes ? (data.attributes.name ??
(data.attributes.title ?? '') ?? '') : ''}}
</div>
<div class="playlist-artist" v-if="data.attributes && data.attributes.artistName">
{{data.attributes ? (data.attributes.artistName ?? '') :''}}
</div>
<div class="playlist-desc" v-if="data.attributes.editorialNotes">
<div class="content" v-html="((data.attributes.editorialNotes) ? (data.attributes.editorialNotes.standard ?? (data.attributes.editorialNotes.short ?? '') ) : (data.attributes.description ? (data.attributes.description.standard ?? (data.attributes.description.short ?? '')) : ''))"></div>
<button class="more-btn">More</button>
<div class="content"
v-html="((data.attributes.editorialNotes) ? (data.attributes.editorialNotes.standard ?? (data.attributes.editorialNotes.short ?? '') ) : (data.attributes.description ? (data.attributes.description.standard ?? (data.attributes.description.short ?? '')) : ''))"></div>
<button class="more-btn" @click="editorialNotesExpanded = !editorialNotesExpanded">
More
</button>
</div>
</div>
</template>
<template v-if="editorialNotesExpanded">
<div class="playlist-desc-expanded">
<div class="content"
v-html="((data.attributes.editorialNotes) ? (data.attributes.editorialNotes.standard ?? (data.attributes.editorialNotes.short ?? '') ) : (data.attributes.description ? (data.attributes.description.standard ?? (data.attributes.description.short ?? '')) : ''))"></div>
<button class="more-btn" @click="editorialNotesExpanded = !editorialNotesExpanded">Less
</button>
</div>
</template>
<div class="playlist-controls">
<button class="wr-btn" style="min-width: 120px;"
@click="app.mk.shuffleMode = 0;app.playMediaItemById(data.attributes.playParams.id ?? data.id, data.attributes.playParams.kind ?? data.type, data.attributes.playParams.isLibrary ?? false, data.attributes.url)">Play</button>
@click="app.mk.shuffleMode = 0;app.playMediaItemById(data.attributes.playParams.id ?? data.id, data.attributes.playParams.kind ?? data.type, data.attributes.playParams.isLibrary ?? false, data.attributes.url)">
Play
</button>
<button class="wr-btn" style="min-width: 120px;"
@click="app.mk.shuffleMode = 1;app.playMediaItemById(data.attributes.playParams.id ?? data.id, data.attributes.playParams.kind ?? data.type, data.attributes.playParams.isLibrary ?? false, data.attributes.url)">Shuffle</button>
@click="app.mk.shuffleMode = 1;app.playMediaItemById(data.attributes.playParams.id ?? data.id, data.attributes.playParams.kind ?? data.type, data.attributes.playParams.isLibrary ?? false, data.attributes.url)">
Shuffle
</button>
</div>
</div>
</div>
@ -45,6 +67,11 @@
<script>
Vue.component('cider-playlist', {
template: "#cider-playlist",
props: ["data"]
props: ["data"],
data: function () {
return {
editorialNotesExpanded: false,
}
}
})
</script>