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

pretty usable ngl

Browse source
This commit is contained in:
vapormusic 2021-12-06 22:55:15 +07:00
parent 4eece88979
commit 5c94430d20
3 changed files with 30 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

24
resources/cider-ui-tests/index.html
View file

@ -199,7 +199,7 @@
</div>
</div>
<div id="app-content">
<!-- Playlist page-->
<!-- Playlist / Album page-->
<transition name="wpfade" >
<template v-if="page.includes('playlist_')" >
<cider-playlist :data="showingPlaylist"></cider-playlist>
@ -210,6 +210,7 @@
<cider-playlist :data="showingPlaylist"></cider-playlist>
</template>
</transition>
</transition>
<!-- Browse -->
<transition name="wpfade">
<template v-if="page == 'browse'">
@ -382,11 +383,12 @@
</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 artwork"
<div class="col playlist-artwork"
:style="{'--artwork': app.getMediaItemArtwork((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 ?? '':''), 300)}
"></div>
<div class="playlist-info">
@ -408,7 +410,7 @@
<div class="col-sm" style="width: auto;" v-if="getTopResult()">
<template>
<h3>Top Result</h3>
<mediaitem-square :item="getTopResult()"></mediaitem-square>
<mediaitem-square-large :item="getTopResult()"></mediaitem-square>
</template>
</div>
<div class="col" v-if="search.results.songs">
@ -437,8 +439,8 @@
<button class="cd-btn-seeall">See All</button>
</div>
</div>
<mediaitem-scroller-horizontal
:items="search.results.albums.data.limit(10)"></mediaitem-scroller-horizontal>
<mediaitem-scroller-horizontal-large
:items="search.results.albums.data.limit(10)"></mediaitem-scroller-horizontal-large>
</template>
<template v-if="search.results.artists">
<div class="row">
@ -461,8 +463,8 @@
<button class="cd-btn-seeall">See All</button>
</div>
</div>
<mediaitem-square :item="item"
v-for="item in search.results.playlists.data.limit(10)"></mediaitem-square>
<mediaitem-square-large :item="item"
v-for="item in search.results.playlists.data.limit(10)"></mediaitem-square-large>
</template>
</template>
</div>
@ -600,7 +602,7 @@
<div class="button" style = "
border-radius: 50%;
background: rgba(50,50,50,0.7);"
:style = "[((item.attributes.playParams.kind ?? item.type) != 'radioStation') ? {'margin': '140px',
:style = "[(!(item.attributes.playParams.kind ?? item.type).includes('radioStation') && !(item.attributes.playParams.kind ?? item.type).includes('song')) ? {'margin': '140px',
width: '40px',
height: '40px',} :
{margin: '35px',
@ -621,7 +623,7 @@
<div class="button" style = "
border-radius: 50%;
background: rgba(50,50,50,0.7);"
:style = "[((item.attributes.playParams.kind ?? item.type) != 'radioStation') ? {'margin': '140px',
:style = "[(!(item.attributes.playParams.kind ?? item.type).includes('radioStation') && !(item.attributes.playParams.kind ?? item.type).includes('song')) ? {'margin': '140px',
width: '40px',
height: '40px',} :
{margin: '35px',
@ -648,7 +650,7 @@
<div class="button" style = "
border-radius: 50%;
background: rgba(50,50,50,0.7);"
:style = "[((item.attributes.playParams.kind ?? item.type) != 'radioStation') ? {'margin': '140px',
:style = "[(!(item.attributes.playParams.kind ?? item.type).includes('radioStation') && !(item.attributes.playParams.kind ?? item.type).includes('song')) ? {'margin': '140px',
width: '40px',
height: '40px',} :
{margin: '35px',
@ -674,7 +676,7 @@
<div class="button" style = "
border-radius: 50%;
background: rgba(50,50,50,0.7);"
:style = "[((item.attributes.playParams.kind ?? item.type) != 'radioStation') ? {'margin': '140px',
:style = "[(!(item.attributes.playParams.kind ?? item.type).includes('radioStation') && !(item.attributes.playParams.kind ?? item.type).includes('song')) ? {'margin': '140px',
width: '40px',
height: '40px',} :
{margin: '35px',

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

@ -253,10 +253,12 @@ const app = new Vue({
let id = item.attributes.playParams.id ?? item.id;
let isLibrary = item.attributes.playParams.isLibrary ?? false;
console.log(kind, id, isLibrary)
if(kind.toString() !== "radioStation")
if(!kind.toString().includes("radioStation") && !kind.toString().includes("song"))
{app.page = (kind) + "_"+ (id);
console.log("oks");
app.getTypeFromID((kind),(id), (isLibrary));}
app.getTypeFromID((kind),(id), (isLibrary));} else {
app.playMediaItemById((kind),(id), (isLibrary), item.attributes.url ?? '')
}
},
async getTypeFromID(kind,id, isLibrary = false){

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

@ -721,6 +721,19 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 30%);
}
.playlist-artwork {
height: 190px;
width: 190px;
background: blue;
border-radius: 6px;
background: var(--artwork);
background-size: cover;
box-shadow: var(--mediaItemShadow);
flex: 0 0 auto;
margin: 6px;
margin-top: 0px;
}
.media-item--small .text {
font-weight: 600;
font-size: 0.90em;