added vue transitions, added recent radio stations
This commit is contained in:
booploops
parent
56b20e7080
commit
9e8f972e93
3 changed files with 110 additions and 55 deletions
|
|
@ -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,62 +157,95 @@
|
|||
</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>
|
||||
<br>
|
||||
<template v-if="mk.nowPlayingItem">
|
||||
currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
|
||||
<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>
|
||||
currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }}
|
||||
</template>
|
||||
<div><input type="text" v-model="quickPlayQuery">
|
||||
<button @click="quickPlay(quickPlayQuery)">Play</button>
|
||||
</div>
|
||||
<h1 class="header-text">Browse</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt
|
||||
consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi.
|
||||
</p>
|
||||
<div class="media-item--small">
|
||||
<div class="artwork">
|
||||
<template v-if="mk.nowPlayingItem">
|
||||
currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
|
||||
<br>
|
||||
currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }}
|
||||
</template>
|
||||
<div><input type="text" v-model="quickPlayQuery">
|
||||
<button @click="quickPlay(quickPlayQuery)">Play</button>
|
||||
</div>
|
||||
<h1 class="header-text">Browse</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt
|
||||
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 class="text">
|
||||
Text
|
||||
</div>
|
||||
<div class="subtext">
|
||||
Subtext
|
||||
</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>
|
||||
</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>
|
||||
</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'">
|
||||
<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>
|
||||
<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>
|
||||
</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 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>
|
||||
</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">
|
||||
|
|
@ -275,7 +313,7 @@
|
|||
<script type="text/x-template" id="mediaitem-square">
|
||||
<template>
|
||||
<div @click="$parent.playMediaItemById(item.id, item.type)"
|
||||
class="cd-mediaitem-square">
|
||||
class="cd-mediaitem-square">
|
||||
<div class="artwork"
|
||||
:class="{'round': item.type == 'artists'}"
|
||||
:style="{'--artwork': $parent.getMediaItemArtwork(item.attributes.artwork.url, 128)}"></div>
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue