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

added vue transitions, added recent radio stations

Browse source
This commit is contained in:
booploops 2021-12-03 14:01:10 -08:00
parent 56b20e7080
commit 9e8f972e93
3 changed files with 110 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -31,7 +31,8 @@
<div class="app-title"></div>
</div>
<div class="app-chrome-item">
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0" @click="mk.shuffleMode = 1"></button>
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
@click="mk.shuffleMode = 1"></button>
<button class="playback-button--small shuffle active" v-else @click="mk.shuffleMode = 0"></button>
</div>
<div class="app-chrome-item">
@ -45,9 +46,12 @@
<button class="playback-button next" @click="mk.skipToNextItem()"></button>
</div>
<div class="app-chrome-item">
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0" @click="mk.repeatMode = 1"></button>
<button class="playback-button--small repeat active" @click="mk.repeatMode = 2" v-else-if="mk.repeatMode == 1"></button>
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 0" v-else-if="mk.repeatMode == 2"></button>
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
@click="mk.repeatMode = 1"></button>
<button class="playback-button--small repeat active" @click="mk.repeatMode = 2"
v-else-if="mk.repeatMode == 1"></button>
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 0"
v-else-if="mk.repeatMode == 2"></button>
</div>
</div>
<div class="app-chrome--center">
@ -126,7 +130,7 @@
</div>
<sidebar-library-item name="Listen Now" page="listen_now"></sidebar-library-item>
<sidebar-library-item name="Browse" page="browse"></sidebar-library-item>
<sidebar-library-item name="Radio" page="Radio"></sidebar-library-item>
<sidebar-library-item name="Radio" page="radio"></sidebar-library-item>
<div class="app-sidebar-header-text">
Library
</div>
@ -153,9 +157,14 @@
</div>
<div id="app-content">
<!-- Browse -->
<transition name="wpfade">
<template v-if="page == 'browse'">
<button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start MusicKit</button>
<button id="apple-music-unauthorize" class="md-btn md-btn-primary" @click="unauthorize()">Stop MusicKit</button>
<div class="content-inner">
<button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start MusicKit
</button>
<button id="apple-music-unauthorize" class="md-btn md-btn-primary" @click="unauthorize()">Stop
MusicKit
</button>
<br>
<template v-if="mk.nowPlayingItem">
currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
@ -186,29 +195,57 @@
<button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button>
<button class="md-btn">Button</button>
<button class="md-btn md-btn-primary">Button</button>
</div>
</template>
</transition>
<!-- Listen Now -->
<transition name="wpfade">
<template v-if="page == 'listen_now'">
<div class="content-inner">
</div>
</template>
</transition>
<!-- Radio -->
<transition v-on:enter="getRadioStations()" name="wpfade">
<template v-if="page == 'radio'" @created="console.log('radio')">
<div class="content-inner">
<h1 class="header-text">Radio</h1>
<h3>Recent Stations</h3>
<mediaitem-square :item="item" v-for="item in radio.personal"></mediaitem-square>
</div>
</template>
</transition>
<!-- Search -->
<transition name="wpfade">
<template v-if="page == 'search'">
<div class="content-inner">
<h1 class="header-text">{{ search.term }}</h1>
<template v-if="search.results['meta']">
<template v-if="search.results.songs">
<h3>Artists</h3>
<mediaitem-square :item="item" v-for="item in search.results.artists.data"></mediaitem-square>
<mediaitem-square :item="item"
v-for="item in search.results.artists.data"></mediaitem-square>
</template>
<template v-if="search.results.songs">
<h3>Songs</h3>
<mediaitem-list-item :item="item" v-for="item in search.results.songs.data"></mediaitem-list-item>
<mediaitem-list-item :item="item"
v-for="item in search.results.songs.data"></mediaitem-list-item>
</template>
<template v-if="search.results.songs">
<h3>Albums</h3>
<mediaitem-square :item="item" v-for="item in search.results.albums.data"></mediaitem-square>
<mediaitem-square :item="item"
v-for="item in search.results.albums.data"></mediaitem-square>
</template>
<template v-if="search.results.songs">
<h3>Playlists</h3>
<mediaitem-square :item="item" v-for="item in search.results.playlists.data"></mediaitem-square>
<mediaitem-square :item="item"
v-for="item in search.results.playlists.data"></mediaitem-square>
</template>
</template>
</div>
</template>
</transition>
</div>
<div class="app-drawer" v-if="drawertest">
@ -221,7 +258,8 @@
<script type="text/x-template" id="sidebar-library-item">
<button class="app-sidebar-item"
:class="$parent.getSidebarItemClass(page)"
@click="$parent.page = page">{{ name }}</button>
@click="$parent.page = page">{{ name }}
</button>
</script>
<script type="text/x-template" id="mediaitem-list-item">

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

@ -1,6 +1,6 @@
Vue.component('sidebar-library-item', {
template: '#sidebar-library-item',
props: ['name', 'page'],
props: ['name', 'page', 'cd-click'],
methods: {}
});
@ -46,6 +46,9 @@ const app = new Vue({
playerLCD: {
playbackDuration: 0
},
radio: {
personal: []
},
playlists: {
listing: [],
details: {}
@ -74,6 +77,13 @@ const app = new Vue({
return []
}
},
async getRadioStations() {
this.radio.personal = await this.mk.api.recentRadioStations("",
{
"platform": "web",
"art[url]": "f"
});
},
unauthorize() {
this.mk.unauthorize()
},

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

@ -153,13 +153,20 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
background-color: var(--color2);
height: 100%;
width: 100%;
padding: 32px;
overflow-y: scroll;
overflow-y: overlay;
overflow-x: hidden;
border-radius: 10px 0px;
border-left: 1px solid rgb(0 0 0 / 25%);
border-top: 1px solid rgb(0 0 0 / 25%);
position:relative;
}
.content-inner {
position: absolute;
top: 0;
left: 0;
padding: 32px;
}