Updated library routes to handle both detail and browse views

front/src/components/audio/Player.vue

@@ -7,14 +7,14 @@
           <img v-else src="../../assets/audio/default-cover.png">
         </div>
         <div class="middle aligned content">
-          <router-link class="small header discrete link track" :to="{name: 'library.track', params: {id: queue.currentTrack.id }}">
+          <router-link class="small header discrete link track" :to="{name: 'library.tracks.detail', params: {id: queue.currentTrack.id }}">
             {{ queue.currentTrack.title }}
           </router-link>
           <div class="meta">
-            <router-link class="artist" :to="{name: 'library.artist', params: {id: queue.currentTrack.artist.id }}">
+            <router-link class="artist" :to="{name: 'library.artists.detail', params: {id: queue.currentTrack.artist.id }}">
               {{ queue.currentTrack.artist.name }}
             </router-link> /
-            <router-link class="album" :to="{name: 'library.album', params: {id: queue.currentTrack.album.id }}">
+            <router-link class="album" :to="{name: 'library.albums.detail', params: {id: queue.currentTrack.album.id }}">
               {{ queue.currentTrack.album.title }}
             </router-link>
           </div>

front/src/components/audio/SearchBar.vue

@@ -35,7 +35,7 @@ export default {
           let categories = [
             {
               code: 'artists',
-              route: 'library.artist',
+              route: 'library.artists.detail',
               name: 'Artist',
               getTitle (r) {
                 return r.name
@@ -46,7 +46,7 @@ export default {
             },
             {
               code: 'albums',
-              route: 'library.album',
+              route: 'library.albums.detail',
               name: 'Album',
               getTitle (r) {
                 return r.title
@@ -57,7 +57,7 @@ export default {
             },
             {
               code: 'tracks',
-              route: 'library.track',
+              route: 'library.tracks.detail',
               name: 'Track',
               getTitle (r) {
                 return r.title

front/src/components/audio/album/Card.vue

@@ -6,10 +6,10 @@
           <img v-else src="../../../assets/audio/default-cover.png">
         </div>
         <div class="header">
-          <router-link class="discrete link" :to="{name: 'library.album', params: {id: album.id }}">{{ album.title }}</router-link>
+          <router-link class="discrete link" :to="{name: 'library.albums.detail', params: {id: album.id }}">{{ album.title }}</router-link>
         </div>
         <div class="meta">
-          By <router-link :to="{name: 'library.artist', params: {id: album.artist.id }}">
+          By <router-link :to="{name: 'library.artists.detail', params: {id: album.artist.id }}">
             {{ album.artist.name }}
           </router-link>
         </div>
@@ -21,7 +21,7 @@
                   <play-button class="basic icon" :track="track" :discrete="true"></play-button>
                 </td>
                 <td colspan="6">
-                  <router-link class="track discrete link" :to="{name: 'library.track', params: {id: track.id }}">
+                  <router-link class="track discrete link" :to="{name: 'library.tracks.detail', params: {id: track.id }}">
                     <template v-if="track.position">
                       {{ track.position }}.
                     </template>

front/src/components/audio/artist/Card.vue

@@ -2,7 +2,7 @@
   <div class="ui card">
     <div class="content">
         <div class="header">
-          <router-link class="discrete link" :to="{name: 'library.artist', params: {id: artist.id }}">
+          <router-link class="discrete link" :to="{name: 'library.artists.detail', params: {id: artist.id }}">
             {{ artist.name }}
           </router-link>
         </div>
@@ -15,7 +15,7 @@
                   <img class="ui mini image" v-else src="../../../assets/audio/default-cover.png">
                 </td>
                 <td colspan="4">
-                  <router-link class="discrete link":to="{name: 'library.album', params: {id: album.id }}">
+                  <router-link class="discrete link":to="{name: 'library.albums.detail', params: {id: album.id }}">
                     <strong>{{ album.title }}</strong>
                   </router-link><br />
                   {{ album.tracks.length }} tracks

front/src/components/audio/track/Table.vue

@@ -20,7 +20,7 @@
           <img class="ui mini image" v-else src="../../..//assets/audio/default-cover.png">
         </td>
         <td colspan="6">
-          <router-link class="track" :to="{name: 'library.track', params: {id: track.id }}">
+          <router-link class="track" :to="{name: 'library.tracks.detail', params: {id: track.id }}">
             <template v-if="displayPosition && track.position">
               {{ track.position }}.
             </template>
@@ -28,12 +28,12 @@
           </router-link>
         </td>
         <td colspan="6">
-          <router-link class="artist discrete link" :to="{name: 'library.artist', params: {id: track.artist.id }}">
+          <router-link class="artist discrete link" :to="{name: 'library.artists.detail', params: {id: track.artist.id }}">
             {{ track.artist.name }}
           </router-link>
         </td>
         <td colspan="6">
-          <router-link class="album discrete link" :to="{name: 'library.album', params: {id: track.album.id }}">
+          <router-link class="album discrete link" :to="{name: 'library.albums.detail', params: {id: track.album.id }}">
             {{ track.album.title }}
           </router-link>
         </td>

front/src/components/library/Album.vue

@@ -12,7 +12,7 @@
               {{ album.title }}
               <div class="sub header">
                 Album containing {{ album.tracks.length }} tracks,
-                by <router-link :to="{name: 'library.artist', params: {id: album.artist.id }}">
+                by <router-link :to="{name: 'library.artists.detail', params: {id: album.artist.id }}">
                   {{ album.artist.name }}
                 </router-link>
               </div>

front/src/components/library/Track.vue

@@ -12,10 +12,10 @@
               {{ track.title }}
               <div class="sub header">
                 From album
-                <router-link :to="{name: 'library.album', params: {id: track.album.id }}">
+                <router-link :to="{name: 'library.albums.detail', params: {id: track.album.id }}">
                   {{ track.album.title }}
                 </router-link>
-                by <router-link :to="{name: 'library.artist', params: {id: track.artist.id }}">
+                by <router-link :to="{name: 'library.artists.detail', params: {id: track.artist.id }}">
                   {{ track.artist.name }}
                 </router-link>
               </div>

front/src/router/index.js

@@ -51,9 +51,9 @@ export default new Router({
       component: Library,
       children: [
         { path: '', component: LibraryHome },
-        { path: 'artist/:id', name: 'library.artist', component: LibraryArtist, props: true },
-        { path: 'album/:id', name: 'library.album', component: LibraryAlbum, props: true },
-        { path: 'track/:id', name: 'library.track', component: LibraryTrack, props: true },
+        { path: 'artists/:id', name: 'library.artists.detail', component: LibraryArtist, props: true },
+        { path: 'albums/:id', name: 'library.albums.detail', component: LibraryAlbum, props: true },
+        { path: 'tracks/:id', name: 'library.tracks.detail', component: LibraryTrack, props: true },
         {
           path: 'import/launch',
           name: 'library.import.launch',