[web-src] Add radio page listing all radio streams

web-src/src/components/NavbarTop.vue

@@ -49,6 +49,7 @@
             <navbar-item-link to="/music/artists"><span class="fd-navbar-item-level2">Artists</span></navbar-item-link>
             <navbar-item-link to="/music/albums"><span class="fd-navbar-item-level2">Albums</span></navbar-item-link>
             <navbar-item-link to="/music/genres"><span class="fd-navbar-item-level2">Genres</span></navbar-item-link>
+            <navbar-item-link to="/music/radio"><span class="fd-navbar-item-level2">Radio</span></navbar-item-link>
             <navbar-item-link to="/music/spotify" v-if="spotify_enabled"><span class="fd-navbar-item-level2">Spotify</span></navbar-item-link>
             <navbar-item-link to="/podcasts"><span class="icon"><i class="mdi mdi-microphone"></i></span> <b>Podcasts</b></navbar-item-link>
             <navbar-item-link to="/audiobooks"><span class="icon"><i class="mdi mdi-book-open-variant"></i></span> <b>Audiobooks</b></navbar-item-link>

web-src/src/components/TabsMusic.vue

@@ -29,6 +29,12 @@
                   <span class="">Genres</span>
                 </a>
               </router-link>
+              <router-link tag="li" to="/music/radio" active-class="is-active">
+                <a>
+                  <span class="icon is-small"><i class="mdi mdi-radio"></i></span>
+                  <span class="">Radio</span>
+                </a>
+              </router-link>
               <router-link tag="li" to="/music/spotify" v-if="spotify_enabled" active-class="is-active">
                 <a>
                   <span class="icon is-small"><i class="mdi mdi-spotify"></i></span>

web-src/src/pages/PageRadioStreams.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <tabs-music></tabs-music>
+
+    <content-with-heading>
+      <template slot="heading-left">
+        <p class="title is-4">Radio</p>
+      </template>
+      <template slot="content">
+        <p class="heading has-text-centered-mobile">{{ tracks.total }} tracks</p>
+        <list-item-track v-for="track in tracks.items" :key="track.id" :track="track" @click="play_track(track)">
+          <template slot="actions">
+            <a @click="open_dialog(track)">
+              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+            </a>
+          </template>
+        </list-item-track>
+        <modal-dialog-track :show="show_details_modal" :track="selected_track" @close="show_details_modal = false" />
+      </template>
+    </content-with-heading>
+  </div>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import TabsMusic from '@/components/TabsMusic'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import ListItemTrack from '@/components/ListItemTrack'
+import ModalDialogTrack from '@/components/ModalDialogTrack'
+import webapi from '@/webapi'
+
+const streamsData = {
+  load: function (to) {
+    return webapi.library_radio_streams()
+  },
+
+  set: function (vm, response) {
+    vm.tracks = response.data.tracks
+  }
+}
+
+export default {
+  name: 'PageRadioStreams',
+  mixins: [LoadDataBeforeEnterMixin(streamsData)],
+  components: { TabsMusic, ContentWithHeading, ListItemTrack, ModalDialogTrack },
+
+  data () {
+    return {
+      tracks: { items: [] },
+
+      show_details_modal: false,
+      selected_track: {}
+    }
+  },
+
+  methods: {
+    play_track: function (track) {
+      webapi.player_play_uri(track.uri, false)
+    },
+
+    open_dialog: function (track) {
+      this.selected_track = track
+      this.show_details_modal = true
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/router/index.js

@@ -22,6 +22,7 @@ import PageAudiobook from '@/pages/PageAudiobook'
 import PagePlaylists from '@/pages/PagePlaylists'
 import PagePlaylist from '@/pages/PagePlaylist'
 import PageFiles from '@/pages/PageFiles'
+import PageRadioStreams from '@/pages/PageRadioStreams'
 import PageSearch from '@/pages/PageSearch'
 import PageAbout from '@/pages/PageAbout'
 import SpotifyPageBrowse from '@/pages/SpotifyPageBrowse'
@@ -125,6 +126,12 @@ export const router = new VueRouter({
       component: PageGenreTracks,
       meta: { show_progress: true, has_index: true }
     },
+    {
+      path: '/music/radio',
+      name: 'Radio',
+      component: PageRadioStreams,
+      meta: { show_progress: true, has_tabs: true }
+    },
     {
       path: '/podcasts',
       name: 'Podcasts',

web-src/src/webapi/index.js

@@ -255,6 +255,17 @@ export default {
     })
   },
 
+  library_radio_streams () {
+    var params = {
+      type: 'tracks',
+      media_kind: 'music',
+      expression: 'data_kind is url and song_length = 0'
+    }
+    return axios.get('/api/search', {
+      params: params
+    })
+  },
+
   library_artist_tracks (artist) {
     if (artist) {
       var artistParams = {