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