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

fix for artwork on playlists/albums, put some wip code for navigation events for history navigation

Browse source
This commit is contained in:
booploops 2021-12-06 20:43:10 -08:00
parent a892305c09
commit 22194be526
4 changed files with 56 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

25
resources/cider-ui-tests/index.js
View file

@ -30,11 +30,6 @@ Vue.component('cider-listen-now', {
props: ["data"]
})
Vue.component('cider-playlist', {
template: "#cider-playlist",
props: ["data"]
})
const MusicKitTools = {
getHeader() {
return new Headers({
@ -57,6 +52,18 @@ function msToMinSec(ms) {
return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
}
class NavigationEvent {
constructor(page, onnavigate, scrollPosition) {
this.page = page;
this.onnavigate = onnavigate;
this.scrollPosition = scrollPosition;
}
navigate() {
this.onnavigate();
document.querySelector("#app-content").scrollTop = this.scrollPosition;
}
}
const app = new Vue({
el: "#app",
data: {
@ -116,7 +123,8 @@ const app = new Vue({
drawerOpened: false,
drawerState: "queue"
},
page: "artist-page"
page: "artist-page",
pageHistory: [],
},
methods: {
async init() {
@ -242,6 +250,11 @@ const app = new Vue({
app.getTypeFromID((kind),(id), (isLibrary));} else {
app.playMediaItemById((id),(kind), (isLibrary), item.attributes.url ?? '')
}
document.querySelector("#app-content").scrollTop = 0
},
pushNavigationEvent(item){
let self = this
},
getArtistInfo(id, isLibrary){
var query = {"omit[resource]": "autos",

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

@ -1845,7 +1845,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
}
.playlist-display .playlist-info .playlist-desc {
box-sizing: border-box;
font-size: 1.1rem;
font-size: 1em;
flex-shrink: unset;
margin-right: 5px;
}

29
resources/cider-ui-tests/views/main.ejs
View file

@ -365,33 +365,8 @@
</div>
</script>
<!-- Album / Playlist View -->
<script type="text/x-template" id="cider-playlist">
<div class="content-inner">
<template v-if="data != [] && data.attributes != []">
<div class="playlist-display row">
<div class="col-auto">
<mediaitem-artwork
:url="(data.attributes != null && data.attributes.artwork != null) ? data.attributes.artwork.url : (data.relationships.tracks.data.length > 0 ? data.relationships.tracks.data[0].attributes.artwork.url ?? '':'')"
size="200"
></mediaitem-artwork>
</div>
<div class="col playlist-info">
<div class="playlist-name">{{data.attributes.name ?? (data.attributes.title ?? '') ?? ''}}</div>
<div class="playlist-artist" v-if="data.attributes.artistName">{{data.attributes.artistName ??
''}}
</div>
<div class="playlist-desc"
v-html="((data.attributes.editorialNotes) ? (data.attributes.editorialNotes.short ?? (data.attributes.editorialNotes.standard ?? '') ) : (data.attributes.description ? (data.attributes.description.short ?? (data.attributes.description.standard ?? '')) : ''))"></div>
</div>
</div>
<mediaitem-list-item :item="item"
v-for="item in data.relationships.tracks.data"></mediaitem-list-item>
<div class="playlist-time">{{app.getTotalTime()}}</div>
</template>
</div>
</script>
<!-- Playlists / Albums -->
<%- include('pages/cider-playlist') %>
<!-- Search -->
<script type="text/x-template" id="cider-search">

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

@ -0,0 +1,34 @@
<script type="text/x-template" id="cider-playlist">
<div class="content-inner">
<template v-if="data != [] && data.attributes != []">
<div class="playlist-display row">
<div class="col-auto flex-center">
<div style="width: 200px;height:200px;">
<mediaitem-artwork
:url="(data.attributes != null && data.attributes.artwork != null) ? data.attributes.artwork.url : (data.relationships.tracks.data.length > 0 ? data.relationships.tracks.data[0].attributes.artwork.url ?? '':'')"
size="200"
></mediaitem-artwork>
</div>
</div>
<div class="col playlist-info">
<div class="playlist-name">{{data.attributes.name ?? (data.attributes.title ?? '') ?? ''}}</div>
<div class="playlist-artist" v-if="data.attributes.artistName">{{data.attributes.artistName ??
''}}
</div>
<div class="playlist-desc"
v-html="((data.attributes.editorialNotes) ? (data.attributes.editorialNotes.short ?? (data.attributes.editorialNotes.standard ?? '') ) : (data.attributes.description ? (data.attributes.description.short ?? (data.attributes.description.standard ?? '')) : ''))"></div>
</div>
</div>
<mediaitem-list-item :item="item"
v-for="item in data.relationships.tracks.data"></mediaitem-list-item>
<div class="playlist-time">{{app.getTotalTime()}}</div>
</template>
</div>
</script>
<script>
Vue.component('cider-playlist', {
template: "#cider-playlist",
props: ["data"]
})
</script>