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

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

@ -31,7 +31,8 @@
<div class="app-title"></div> <div class="app-title"></div>
</div> </div>
<div class="app-chrome-item"> <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> <button class="playback-button--small shuffle active" v-else @click="mk.shuffleMode = 0"></button>
</div> </div>
<div class="app-chrome-item"> <div class="app-chrome-item">
@ -45,9 +46,12 @@
<button class="playback-button next" @click="mk.skipToNextItem()"></button> <button class="playback-button next" @click="mk.skipToNextItem()"></button>
</div> </div>
<div class="app-chrome-item"> <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" v-if="mk.repeatMode == 0"
<button class="playback-button--small repeat active" @click="mk.repeatMode = 2" v-else-if="mk.repeatMode == 1"></button> @click="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 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> </div>
<div class="app-chrome--center"> <div class="app-chrome--center">
@ -126,7 +130,7 @@
</div> </div>
<sidebar-library-item name="Listen Now" page="listen_now"></sidebar-library-item> <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="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"> <div class="app-sidebar-header-text">
Library Library
</div> </div>
@ -153,62 +157,95 @@
</div> </div>
<div id="app-content"> <div id="app-content">
<!-- Browse --> <!-- Browse -->
<transition name="wpfade">
<template v-if="page == 'browse'"> <template v-if="page == 'browse'">
<button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start MusicKit</button> <div class="content-inner">
<button id="apple-music-unauthorize" class="md-btn md-btn-primary" @click="unauthorize()">Stop MusicKit</button> <button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start MusicKit
<br> </button>
<template v-if="mk.nowPlayingItem"> <button id="apple-music-unauthorize" class="md-btn md-btn-primary" @click="unauthorize()">Stop
currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }} MusicKit
</button>
<br> <br>
currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }} <template v-if="mk.nowPlayingItem">
</template> currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
<div><input type="text" v-model="quickPlayQuery"> <br>
<button @click="quickPlay(quickPlayQuery)">Play</button> currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }}
</div> </template>
<h1 class="header-text">Browse</h1> <div><input type="text" v-model="quickPlayQuery">
<p> <button @click="quickPlay(quickPlayQuery)">Play</button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt </div>
consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi. <h1 class="header-text">Browse</h1>
</p> <p>
<div class="media-item--small"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt
<div class="artwork"> consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi.
</p>
<div class="media-item--small">
<div class="artwork">
</div>
<div class="text">
Text
</div>
<div class="subtext">
Subtext
</div>
</div> </div>
<div class="text"> <br>
Text <br>
</div> <button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button>
<div class="subtext"> <button class="md-btn">Button</button>
Subtext <button class="md-btn md-btn-primary">Button</button>
</div>
</div> </div>
<br>
<br>
<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>
</template> </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 --> <!-- Search -->
<transition name="wpfade">
<template v-if="page == 'search'"> <template v-if="page == 'search'">
<h1 class="header-text">{{ search.term }}</h1> <div class="content-inner">
<template v-if="search.results['meta']"> <h1 class="header-text">{{ search.term }}</h1>
<template v-if="search.results.songs"> <template v-if="search.results['meta']">
<h3>Artists</h3> <template v-if="search.results.songs">
<mediaitem-square :item="item" v-for="item in search.results.artists.data"></mediaitem-square> <h3>Artists</h3>
<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>
</template>
<template v-if="search.results.songs">
<h3>Albums</h3>
<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>
</template>
</template> </template>
<template v-if="search.results.songs"> </div>
<h3>Songs</h3>
<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>
</template>
<template v-if="search.results.songs">
<h3>Playlists</h3>
<mediaitem-square :item="item" v-for="item in search.results.playlists.data"></mediaitem-square>
</template>
</template>
</template> </template>
</transition>
</div> </div>
<div class="app-drawer" v-if="drawertest"> <div class="app-drawer" v-if="drawertest">
@ -221,7 +258,8 @@
<script type="text/x-template" id="sidebar-library-item"> <script type="text/x-template" id="sidebar-library-item">
<button class="app-sidebar-item" <button class="app-sidebar-item"
:class="$parent.getSidebarItemClass(page)" :class="$parent.getSidebarItemClass(page)"
@click="$parent.page = page">{{ name }}</button> @click="$parent.page = page">{{ name }}
</button>
</script> </script>
<script type="text/x-template" id="mediaitem-list-item"> <script type="text/x-template" id="mediaitem-list-item">
@ -275,7 +313,7 @@
<script type="text/x-template" id="mediaitem-square"> <script type="text/x-template" id="mediaitem-square">
<template> <template>
<div @click="$parent.playMediaItemById(item.id, item.type)" <div @click="$parent.playMediaItemById(item.id, item.type)"
class="cd-mediaitem-square"> class="cd-mediaitem-square">
<div class="artwork" <div class="artwork"
:class="{'round': item.type == 'artists'}" :class="{'round': item.type == 'artists'}"
:style="{'--artwork': $parent.getMediaItemArtwork(item.attributes.artwork.url, 128)}"></div> :style="{'--artwork': $parent.getMediaItemArtwork(item.attributes.artwork.url, 128)}"></div>

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

@ -1,6 +1,6 @@
Vue.component('sidebar-library-item', { Vue.component('sidebar-library-item', {
template: '#sidebar-library-item', template: '#sidebar-library-item',
props: ['name', 'page'], props: ['name', 'page', 'cd-click'],
methods: {} methods: {}
}); });
@ -46,6 +46,9 @@ const app = new Vue({
playerLCD: { playerLCD: {
playbackDuration: 0 playbackDuration: 0
}, },
radio: {
personal: []
},
playlists: { playlists: {
listing: [], listing: [],
details: {} details: {}
@ -74,6 +77,13 @@ const app = new Vue({
return [] return []
} }
}, },
async getRadioStations() {
this.radio.personal = await this.mk.api.recentRadioStations("",
{
"platform": "web",
"art[url]": "f"
});
},
unauthorize() { unauthorize() {
this.mk.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); background-color: var(--color2);
height: 100%; height: 100%;
width: 100%; width: 100%;
padding: 32px;
overflow-y: scroll; overflow-y: scroll;
overflow-y: overlay; overflow-y: overlay;
overflow-x: hidden; overflow-x: hidden;
border-radius: 10px 0px; border-radius: 10px 0px;
border-left: 1px solid rgb(0 0 0 / 25%); border-left: 1px solid rgb(0 0 0 / 25%);
border-top: 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;
} }