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

added search and play from search

Browse source
This commit is contained in:
booploops 2021-12-02 22:24:58 -08:00
parent 56a475d904
commit 60f9f83c09
2 changed files with 102 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -106,7 +106,12 @@
<div class="app-sidebar-header"> <div class="app-sidebar-header">
<div class="search-input-container"> <div class="search-input-container">
<div class="search-input--icon"></div> <div class="search-input--icon"></div>
<input type="search" placeholder="Search..." class="search-input"> <input type="search"
@click="showSearch()"
@change="showSearch();searchQuery()"
placeholder="Search..."
v-model="search.term"
class="search-input">
</div> </div>
</div> </div>
<div class="app-sidebar-content"> <div class="app-sidebar-content">
@ -142,36 +147,81 @@
</div> </div>
</div> </div>
<div id="app-content"> <div id="app-content">
<button class="md-btn md-btn-primary" @click="init()">Start MusicKit</button> <!-- Browse -->
<br> <template v-if="page == 'browse'">
<template v-if="mk.nowPlayingItem"> <button class="md-btn md-btn-primary" @click="init()">Start MusicKit</button>
currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
<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></div> currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }}
<h1 class="header-text">Browse</h1> </template>
<p> <div><input type="text" v-model="quickPlayQuery">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt <button @click="quickPlay(quickPlayQuery)">Play</button></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> </template>
</div> <!-- Search -->
<br> <template v-if="page == 'search'">
<br> <h1 class="header-text">{{ search.term }}</h1>
<button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button> <template v-if="search.results['meta']">
<button class="md-btn">Button</button> <template v-if="search.results.songs">
<button class="md-btn md-btn-primary">Button</button> <h3>Songs</h3>
<button
@click="playMediaItemById(item.id, item.type)"
v-for="item in search.results.songs.data">
<b>{{ item.attributes.name }}</b>
<br>
{{ item.attributes.artistName }}
</button>
</template>
<template v-if="search.results.songs">
<h3>Albums</h3>
<button
@click="playMediaItemById(item.id, item.type)"
v-for="item in search.results.albums.data">
<b>{{ item.attributes.name }}</b>
<br>
{{ item.attributes.artistName }}
</button>
</template>
<template v-if="search.results.songs">
<h3>Artists</h3>
<button
@click="playMediaItemById(item.id, item.type)"
v-for="item in search.results.artists.data">
{{ item.attributes.name }}
</button>
</template>
<template v-if="search.results.songs">
<h3>Playlists</h3>
<button
@click="playMediaItemById(item.id, item.type)"
v-for="item in search.results.playlists.data">
{{ item.attributes.name }}
</button>
</template>
</template>
</template>
</div> </div>
<div class="app-drawer" v-if="drawertest"> <div class="app-drawer" v-if="drawertest">

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

@ -3,7 +3,12 @@ var app = new Vue({
data: { data: {
drawertest: false, drawertest: false,
mk: {}, mk: {},
quickPlayQuery: "" quickPlayQuery: "",
search: {
term: "",
results: {}
},
page: "browse"
}, },
methods: { methods: {
init() { init() {
@ -11,6 +16,24 @@ var app = new Vue({
this.mk.authorize() this.mk.authorize()
this.$forceUpdate() this.$forceUpdate()
}, },
showSearch() {
this.page = "search"
},
playMediaItemById(id, kind) {
this.mk.setQueue({ [kind]: [id] }).then(function (queue) {
MusicKit.getInstance().play()
})
},
searchQuery() {
let self = this
this.mk.api.search(this.search.term,
{
types: "songs,artists,albums,playlists",
limit: 32
}).then(function(results) {
self.search.results = results
})
},
mkReady() { mkReady() {
if(this.mk["nowPlayingItem"]) { if(this.mk["nowPlayingItem"]) {
return true return true