radio & library playback
This commit is contained in:
parent
cacb360ec2
commit
7911e1b2ad
2 changed files with 62 additions and 17 deletions
|
@ -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`}"
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
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()
|
MusicKit.getInstance().play()
|
||||||
})
|
})
|
||||||
|
}
|
||||||
},
|
},
|
||||||
searchQuery() {
|
searchQuery() {
|
||||||
let self = this
|
let self = this
|
||||||
|
@ -265,18 +273,55 @@ const app = new Vue({
|
||||||
if(!this.mkReady()) {
|
if(!this.mkReady()) {
|
||||||
return ""
|
return ""
|
||||||
}
|
}
|
||||||
|
try{
|
||||||
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
|
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
|
||||||
return `${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}`;
|
return `${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}`;
|
||||||
} else {
|
} else {
|
||||||
return "";
|
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) {
|
||||||
|
try{
|
||||||
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
|
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
|
||||||
return `url("${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}")`;
|
return `url(${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)})`;
|
||||||
} else {
|
} else {
|
||||||
return "";
|
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) {
|
||||||
let self = this
|
let self = this
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue