From 7911e1b2ad8c1315c2abde86eddda873156f2898 Mon Sep 17 00:00:00 2001
From: vapormusic <vietanhfat@gmail.com>
Date: Sat, 4 Dec 2021 18:17:42 +0700
Subject: [PATCH] radio & library playback

---
 resources/cider-ui-tests/index.html | 10 ++---
 resources/cider-ui-tests/index.js   | 69 ++++++++++++++++++++++++-----
 2 files changed, 62 insertions(+), 17 deletions(-)

diff --git a/resources/cider-ui-tests/index.html b/resources/cider-ui-tests/index.html
index 425a60d3..c73e1ab0 100644
--- a/resources/cider-ui-tests/index.html
+++ b/resources/cider-ui-tests/index.html
@@ -410,7 +410,7 @@
 
 <script type="text/x-template" id="mediaitem-list-item">
     <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">
             <div class="artwork"
                  :class="{'round': item.type == 'artists'}"
@@ -438,7 +438,7 @@
 
 <script type="text/x-template" id="mediaitem-hrect">
     <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">
             <div class="artwork"
                  :class="{'round': item.type == 'artists'}"
@@ -461,7 +461,7 @@
 
 <script type="text/x-template" id="mediaitem-square">
     <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">
             <div class="artwork"
                  :class="{'round': item.type == 'artists'}"
@@ -478,7 +478,7 @@
 
 <script type="text/x-template" id="mediaitem-square-large">
     <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">
             <div class="artwork"
                  :class="{'round': item.type == 'artists'}"
@@ -495,7 +495,7 @@
 
 <script type="text/x-template" id="mediaitem-square-sp">
     <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"
              :style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}"
              
diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index 34836e4e..3101d557 100644
--- a/resources/cider-ui-tests/index.js
+++ b/resources/cider-ui-tests/index.js
@@ -236,10 +236,18 @@ const app = new Vue({
         showSearch() {
             this.page = "search"
         },
-        playMediaItemById(id, kind) {
-            this.mk.setQueue({[kind]: [id]}).then(function (queue) {
-                MusicKit.getInstance().play()
-            })
+        playMediaItemById(id, kind, isLibrary, raurl = "") {
+            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()
+                })
+            }
         },
         searchQuery() {
             let self = this
@@ -265,17 +273,54 @@ const app = new Vue({
             if(!this.mkReady()) {
                 return ""
             }
-            if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
-                return `${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}`;
-            } else {
-                return "";
+            try{
+                if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
+                    return `${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}`;
+                } 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) {
-            if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
-                return `url("${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}")`;
-            } else {
-                return "";
+            try{
+                if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
+                    return `url(${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)})`;
+                } 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) {