From c0c12bc2bad242bbf41636f06b48ff79c64d1f2c Mon Sep 17 00:00:00 2001
From: Core <64542347+coredev-uk@users.noreply.github.com>
Date: Sat, 7 May 2022 05:24:55 +0100
Subject: [PATCH] Radio improvement, needs optimisation.

---
 src/i18n/README.md                            |  4 ++-
 src/i18n/en_US.json                           |  2 ++
 src/i18n/source/en_US.json                    |  2 ++
 src/main/base/browserwindow.ts                |  7 ++++
 src/renderer/main/vueapp.js                   | 33 +++++++++++++++++--
 src/renderer/views/app/app-content.ejs        |  9 -----
 src/renderer/views/app/sidebar.ejs            |  4 +--
 src/renderer/views/components/radio-child.ejs | 31 +++++++++++++++++
 src/renderer/views/pages/radio.ejs            | 23 +++++++++++++
 9 files changed, 100 insertions(+), 15 deletions(-)
 create mode 100644 src/renderer/views/components/radio-child.ejs

diff --git a/src/i18n/README.md b/src/i18n/README.md
index 4246957d..4be8ed71 100644
--- a/src/i18n/README.md
+++ b/src/i18n/README.md
@@ -298,4 +298,6 @@ Update 28/04/2022 21:45 UTC
 * `settings.option.general.resumetabs.dynamic`: Added for `en_US`
 * `settings.option.general.resumetabs.dynamic.description`: Added for `en_US`
 
-
+Update 07/05/2022 04:00 UTC
+* `term.personalStations`: Added for `en_US`
+  `term.amLive`: Added for `en_US`
diff --git a/src/i18n/en_US.json b/src/i18n/en_US.json
index 7d85fa35..faf2275f 100644
--- a/src/i18n/en_US.json
+++ b/src/i18n/en_US.json
@@ -121,6 +121,8 @@
   "term.audioControls": "Volume Controls",
   "term.clearAll": "Clear All",
   "term.recentStations": "Recent Stations",
+  "term.personalStations": "Personal Stations",
+  "term.amLive": "Apple Music Live",
   "term.language": "Language",
   "term.funLanguages": "Fun",
   "term.noLyrics": "Loading... / Lyrics not found./ Instrumental.",
diff --git a/src/i18n/source/en_US.json b/src/i18n/source/en_US.json
index 7d85fa35..faf2275f 100644
--- a/src/i18n/source/en_US.json
+++ b/src/i18n/source/en_US.json
@@ -121,6 +121,8 @@
   "term.audioControls": "Volume Controls",
   "term.clearAll": "Clear All",
   "term.recentStations": "Recent Stations",
+  "term.personalStations": "Personal Stations",
+  "term.amLive": "Apple Music Live",
   "term.language": "Language",
   "term.funLanguages": "Fun",
   "term.noLyrics": "Loading... / Lyrics not found./ Instrumental.",
diff --git a/src/main/base/browserwindow.ts b/src/main/base/browserwindow.ts
index 99300827..680f176d 100644
--- a/src/main/base/browserwindow.ts
+++ b/src/main/base/browserwindow.ts
@@ -59,6 +59,7 @@ export class BrowserWindow {
                 "pages/settings",
                 "pages/installed-themes",
                 "pages/listen_now",
+                "pages/radio",
                 "pages/home",
                 "pages/artist-feed",
                 "pages/cider-playlist",
@@ -112,6 +113,7 @@ export class BrowserWindow {
                 "components/artist-chip",
                 "components/hello-world",
                 "components/inline-collection-list",
+                "components/radio-child",
             ],
             appRoutes: [
                 {
@@ -186,6 +188,11 @@ export class BrowserWindow {
                     component: `<cider-listen-now :data="listennow"></cider-listen-now>`,
                     condition: `page == 'listen_now'`,
                     onEnter: ``
+                }, {
+                    page: "radio",
+                    component: `<cider-radio :data="radio"></cider-radio>`,
+                    condition: `page == 'radio'`,
+                    onEnter: ``
                 }, {
                     page: "settings",
                     component: `<cider-settings></cider-settings>`,
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index 3b39a419..a99b0b44 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -42,7 +42,9 @@ const app = new Vue({
         listennow: [],
         madeforyou: [],
         radio: {
-            personal: []
+            personal: {},
+            recent: {},
+            amlive: {},
         },
         mklang: 'en',
         webview: {
@@ -321,6 +323,7 @@ const app = new Vue({
             try {
                 this.listennow.timestamp = 0;
                 this.browsepage.timestamp = 0;
+                this.radio.timestamp = 0;
             } catch (e) { }
         },
         /**
@@ -2531,15 +2534,39 @@ const app = new Vue({
             }
         },
         async getRadioStations(attempt = 0) {
+            if (this.radio.timestamp > Date.now() - 120000) {
+                return
+            }
             if (attempt > 3) {
                 return
             }
             try {
-                this.radio.personal = (await app.mk.api.v3.music(`/v1/me/recent/radio-stations`, {
+                this.radio.personal.title = app.getLz('term.personal')
+                this.radio.recent.title = app.getLz('term.recentStations')
+                this.radio.amlive.title = app.getLz('term.amLive')
+
+                app.mk.api.v3.music(`/v1/catalog/${app.mk.api.v3.storefrontId}/stations`, {
+                    "filter[identity]": "personal",
+                }).then(res => {
+                     this.radio.personal.data = res.data.data
+                })
+
+                app.mk.api.v3.music(`/v1/me/recent/radio-stations`, {
                     "platform": "web",
                     "art[url]": "f",
                     l: this.mklang
-                })).data.data;
+                }).then(res => {
+                    this.radio.recent.data = res.data.data
+                })
+
+                app.mk.api.v3.music(`/v1/catalog/${app.mk.api.v3.storefrontId}/stations`, {
+                    "filter[featured]": "apple-music-live-radio",
+                }).then(res => {
+                    this.radio.amlive.data = res.data.data
+                })
+
+                this.radio.timestamp = Date.now()
+                console.debug(this.radio)
             } catch (e) {
                 console.log(e)
                 this.getRadioStations(attempt + 1)
diff --git a/src/renderer/views/app/app-content.ejs b/src/renderer/views/app/app-content.ejs
index dfa1cb33..1134fe9f 100644
--- a/src/renderer/views/app/app-content.ejs
+++ b/src/renderer/views/app/app-content.ejs
@@ -25,15 +25,6 @@
         </transition>
     <% } %>
 
-    <transition v-on:enter="getRadioStations()" :name="chrome.desiredPageTransition">
-        <template v-if="page == 'radio'" @created="console.log('radio')">
-            <div class="content-inner">
-                <h1 class="header-text">{{$root.getLz('term.radio')}}</h1>
-                <h3>{{$root.getLz('term.recentStations')}}</h3>
-                <mediaitem-square :item="item" v-for="item in radio.personal"></mediaitem-square>
-            </div>
-        </template>
-    </transition>
     <!-- Library - Recently Added -->
     <transition :name="chrome.desiredPageTransition" v-on:enter="getLibraryAlbumsFull(null, 0); searchLibraryAlbums(0);">
         <%- include('../pages/library-recentlyadded') %>');
diff --git a/src/renderer/views/app/sidebar.ejs b/src/renderer/views/app/sidebar.ejs
index 17fe8fc1..44355433 100644
--- a/src/renderer/views/app/sidebar.ejs
+++ b/src/renderer/views/app/sidebar.ejs
@@ -39,8 +39,8 @@
             <sidebar-library-item :name="$root.getLz('term.browse')" svg-icon="./assets/feather/globe.svg"
                 page="browse">
             </sidebar-library-item>
-            <sidebar-library-item :name="$root.getLz('term.radio')" svg-icon="./assets/feather/radio.svg" page="radio">
-            </sidebar-library-item>
+            <sidebar-library-item :name="$root.getLz('term.radio')" svg-icon="./assets/feather/radio.svg"
+                page="radio"></sidebar-library-item>
         </template>
 
         <div class="app-sidebar-header-text" 
diff --git a/src/renderer/views/components/radio-child.ejs b/src/renderer/views/components/radio-child.ejs
new file mode 100644
index 00000000..3fa7d9b0
--- /dev/null
+++ b/src/renderer/views/components/radio-child.ejs
@@ -0,0 +1,31 @@
+<script type="text/x-template" id="radio-child">
+    <div>
+        <div class="row">
+            <div class="col">
+                <h3>{{ item.title }}</h3>
+            </div>
+        </div>
+        <mediaitem-square :item="station" v-for="station in item.data"></mediaitem-square>
+
+        <!--        <mediaitem-scroller-horizontal-sp-->
+        <!--                :withReason="index==0"-->
+        <!--                :items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-sp>-->
+    </div>
+</script>
+<script>
+	Vue.component('radio-child', {
+		template: "#radio-child",
+		props: ["item"],
+		data: function () {
+			return {
+				isVisible: true,
+				app: this.$root
+			}
+		},
+		methods: {
+			visibilityChanged: function (isVisible, entry) {
+				// this.isVisible = isVisible
+			},
+		}
+	})
+</script>
\ No newline at end of file
diff --git a/src/renderer/views/pages/radio.ejs b/src/renderer/views/pages/radio.ejs
index e69de29b..f993f117 100644
--- a/src/renderer/views/pages/radio.ejs
+++ b/src/renderer/views/pages/radio.ejs
@@ -0,0 +1,23 @@
+<script type="text/x-template" id="cider-radio">
+    <div class="content-inner">
+        <h1 class="header-text">{{app.getLz('term.radio')}}</h1>
+        <template v-for="item in data">
+            <radio-child :item="item"></radio-child>
+        </template>
+    </div>
+</script>
+
+<script>
+	Vue.component('cider-radio', {
+		template: "#cider-radio",
+		props: ["data"],
+		data: function () {
+			return {
+				app: this.$root
+			}
+		},
+		mounted() {
+			this.$root.getRadioStations()
+		}
+	})
+</script>
\ No newline at end of file