radio & library playback

This commit is contained in:
vapormusic 2021-12-04 18:17:42 +07:00
parent cacb360ec2
commit 7911e1b2ad
2 changed files with 62 additions and 17 deletions

View file

@ -410,7 +410,7 @@
<script type="text/x-template" id="mediaitem-list-item"> <script type="text/x-template" id="mediaitem-list-item">
<template> <template>
<div @click="app.playMediaItemById(item.id, item.type)" <div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
class="cd-mediaitem-list-item"> class="cd-mediaitem-list-item">
<div class="artwork" <div class="artwork"
:class="{'round': item.type == 'artists'}" :class="{'round': item.type == 'artists'}"
@ -438,7 +438,7 @@
<script type="text/x-template" id="mediaitem-hrect"> <script type="text/x-template" id="mediaitem-hrect">
<template> <template>
<div @click="app.playMediaItemById(item.id, item.type)" <div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
class="cd-mediaitem-hrect"> class="cd-mediaitem-hrect">
<div class="artwork" <div class="artwork"
:class="{'round': item.type == 'artists'}" :class="{'round': item.type == 'artists'}"
@ -461,7 +461,7 @@
<script type="text/x-template" id="mediaitem-square"> <script type="text/x-template" id="mediaitem-square">
<template> <template>
<div @click="app.playMediaItemById(item.id, item.type)" <div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
class="cd-mediaitem-square"> class="cd-mediaitem-square">
<div class="artwork" <div class="artwork"
:class="{'round': item.type == 'artists'}" :class="{'round': item.type == 'artists'}"
@ -478,7 +478,7 @@
<script type="text/x-template" id="mediaitem-square-large"> <script type="text/x-template" id="mediaitem-square-large">
<template> <template>
<div @click="app.playMediaItemById(item.id, item.type)" <div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
class="cd-mediaitem-square-large"> class="cd-mediaitem-square-large">
<div class="artwork" <div class="artwork"
:class="{'round': item.type == 'artists'}" :class="{'round': item.type == 'artists'}"
@ -495,7 +495,7 @@
<script type="text/x-template" id="mediaitem-square-sp"> <script type="text/x-template" id="mediaitem-square-sp">
<template> <template>
<div @click="app.playMediaItemById(item.id, item.type)" <div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
class="cd-mediaitem-square-sp" class="cd-mediaitem-square-sp"
:style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}" :style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}"

View file

@ -236,10 +236,18 @@ const app = new Vue({
showSearch() { showSearch() {
this.page = "search" this.page = "search"
}, },
playMediaItemById(id, kind) { playMediaItemById(id, kind, isLibrary, raurl = "") {
this.mk.setQueue({[kind]: [id]}).then(function (queue) { var truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
MusicKit.getInstance().play() console.log(id, truekind, isLibrary)
}) if (truekind == "radioStations") {
this.mk.setStationQueue({url: raurl}).then(function (queue) {
MusicKit.getInstance().play()
});
} else {
this.mk.setQueue({[truekind]: [id]}).then(function (queue) {
MusicKit.getInstance().play()
})
}
}, },
searchQuery() { searchQuery() {
let self = this let self = this
@ -265,17 +273,54 @@ const app = new Vue({
if(!this.mkReady()) { if(!this.mkReady()) {
return "" return ""
} }
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) { try{
return `${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}`; if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
} else { return `${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}`;
return ""; } else {
return "";
}
}
catch (e){
return ""
// Does not work
// this.mk.api.library.song(this.mk.nowPlayingItem.id).then((data) => {
// try {
// if (data != null && data !== "") {
// //document.getElementsByClassName("bg-artwork")[0].setAttribute('src', `${data["attributes"]["artwork"]["url"]}`)
// return `${data["attributes"]["artwork"]["url"]}`;
// } else {
// return "https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg";
// }
// } catch (e) {
// return "https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg";
// }
// });
} }
}, },
getNowPlayingArtwork(size = 600) { getNowPlayingArtwork(size = 600) {
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) { try{
return `url("${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}")`; if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
} else { return `url(${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)})`;
return ""; } else {
return "";
}
}
catch (e){
return ""
// Does not work
// this.mk.api.library.song(this.mk.nowPlayingItem.id).then((data) => {
// try {
// if (data != null && data !== "") {
// return `url(${data["attributes"]["artwork"]["url"]})`;
// } else {
// return "url(https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg)";
// }
// } catch (e) {
// return "url(https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg)";
// }
// });
} }
}, },
quickPlay(query) { quickPlay(query) {