Page title binding

Fix #1

front/src/main.js

@@ -30,6 +30,10 @@ require('masonry-layout')
 Vue.use(VueMasonryPlugin)
 Vue.use(VueLazyload)
 Vue.config.productionTip = false
+Vue.directive('title', {
+  inserted: (el, binding) => { console.log(binding.value); document.title = binding.value + ' - Funkwhale' },
+  updated: (el, binding) => { document.title = binding.value + ' - Funkwhale' }
+})
 
 axios.defaults.baseURL = config.API_URL
 axios.interceptors.request.use(function (config) {

front/src/views/instance/Timeline.vue

 <template>
-  <div class="main pusher">
+  <div class="main pusher" v-title="'Instance Timeline'">
     <div class="ui vertical center aligned stripe segment">
       <div v-if="isLoading" :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']">
         <div class="ui text loader">Loading timeline...</div>

front/src/views/playlists/Detail.vue

 <template>
   <div>
-    <div v-if="isLoading" class="ui vertical segment">
+    <div v-if="isLoading" class="ui vertical segment" v-title="'Playlist'">
       <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
     </div>
-    <div v-if="!isLoading && playlist" class="ui head vertical center aligned stripe segment">
+    <div v-if="!isLoading && playlist" class="ui head vertical center aligned stripe segment" v-title="playlist.name">
       <div class="segment-content">
         <h2 class="ui center aligned icon header">
           <i class="circular inverted list yellow icon"></i>

front/src/views/playlists/List.vue

 <template>
-  <div>
+  <div v-title="'Playlists'">
     <div class="ui vertical stripe segment">
       <h2 class="ui header">Browsing playlists</h2>
       <div :class="['ui', {'loading': isLoading}, 'form']">