Radio improvement, needs optimisation.

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') %>');

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" 

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>

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>