Merge branch 'release/0.2.3'

front/src/components/library/Home.vue

@@ -8,7 +8,7 @@
         <div class="column">
           <h2 class="ui header">Latest artists</h2>
           <div :class="['ui', {'active': isLoadingArtists}, 'inline', 'loader']"></div>
-          <div v-if="artists.length > 0" v-for="artist in artists.slice(0, 3)" :key="artist" class="ui cards">
+          <div v-if="artists.length > 0" v-for="artist in artists.slice(0, 3)" :key="artist.id" class="ui cards">
             <artist-card :artist="artist"></artist-card>
           </div>
         </div>

front/src/components/library/Library.vue

@@ -2,9 +2,12 @@
   <div class="main library pusher">
     <div class="ui secondary pointing menu">
       <router-link class="ui item" to="/library" exact>Browse</router-link>
+      <router-link class="ui item" to="/library/artists" exact>Artists</router-link>
+      <div class="ui secondary right menu">
         <router-link v-if="auth.user.availablePermissions['import.launch']" class="ui item" to="/library/import/launch" exact>Import</router-link>
         <router-link v-if="auth.user.availablePermissions['import.launch']" class="ui item" to="/library/import/batches">Import batches</router-link>
       </div>
+    </div>
     <router-view></router-view>
   </div>
 </template>

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/components/utils/global-events.vue

+<script>
+import $ from 'jquery'
+
+const modifiersRE = /^[~!&]*/
+const nonEventNameCharsRE = /\W+/
+const names = {
+  '!': 'capture',
+  '~': 'once',
+  '&': 'passive'
+}
+
+function extractEventOptions (eventDescriptor) {
+  const [modifiers] = eventDescriptor.match(modifiersRE)
+  return modifiers.split('').reduce((options, modifier) => {
+    options[names[modifier]] = true
+    return options
+  }, {})
+}
+
+export default {
+  render: h => h(),
+
+  mounted () {
+    this._listeners = Object.create(null)
+    Object.keys(this.$listeners).forEach(event => {
+      const handler = this.$listeners[event]
+      let wrapper = function (event) {
+        // we check here the event is not triggered from an input
+        // to avoid collisions
+        if (!$(event.target).is(':input, [contenteditable]')) {
+          handler(event)
+        }
+      }
+      document.addEventListener(
+        event.replace(nonEventNameCharsRE, ''),
+        wrapper,
+        extractEventOptions(event)
+      )
+      this._listeners[event] = handler
+    })
+  },
+
+  beforeDestroy () {
+    for (const event in this._listeners) {
+      document.removeEventListener(
+        event.replace(nonEventNameCharsRE, ''),
+        this._listeners[event]
+      )
+    }
+  }
+}
+</script>

front/src/main.js

@@ -10,6 +10,7 @@ import App from './App'
 import router from './router'
 import VueResource from 'vue-resource'
 import auth from './auth'
+import VueLazyload from 'vue-lazyload'
 
 window.$ = window.jQuery = require('jquery')
 
@@ -19,6 +20,7 @@ window.$ = window.jQuery = require('jquery')
 require('semantic-ui-css/semantic.js')
 
 Vue.use(VueResource)
+Vue.use(VueLazyload)
 Vue.config.productionTip = false
 
 Vue.http.interceptors.push(function (request, next) {

front/src/router/index.js

@@ -7,6 +7,7 @@ import Logout from '@/components/auth/Logout'
 import Library from '@/components/library/Library'
 import LibraryHome from '@/components/library/Home'
 import LibraryArtist from '@/components/library/Artist'
+import LibraryArtists from '@/components/library/Artists'
 import LibraryAlbum from '@/components/library/Album'
 import LibraryTrack from '@/components/library/Track'
 import LibraryImport from '@/components/library/import/Main'
@@ -51,9 +52,10 @@ 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/', name: 'library.artists.browse', component: LibraryArtists },
+        { 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',