Display favorites in player

src/components/Sidebar.vue

@@ -42,6 +42,11 @@
               <strong>{{ track.title }}</strong><br />
               {{ track.artist.name }}
             </td>
+            <td>
+              <template v-if="favoriteTracks.objects[track.id]">
+                <i @click.stop="queue.cleanTrack(index)" class="pink heart icon"></i>
+              </template
+            </td>
             <td>
               <i @click.stop="queue.cleanTrack(index)" class="circular trash icon"></i>
             </td>
@@ -58,6 +63,7 @@
 
 <script>
 import Player from '@/components/audio/Player'
+import favoriteTracks from '@/favorites/tracks'
 import auth from '@/auth'
 import queue from '@/audio/queue'
 import backend from '@/audio/backend'
@@ -70,7 +76,8 @@ export default {
     return {
       auth: auth,
       backend: backend,
-      queue: queue
+      queue: queue,
+      favoriteTracks
     }
   },
   mounted () {

src/components/audio/Player.vue

@@ -24,6 +24,9 @@
         <div class="left floated four wide column">
           <p class="timer start" @click="queue.audio.setTime(0)">{{queue.audio.state.currentTimeFormat}}</p>
         </div>
+        <div class=" actions eight wide column">
+          <track-favorite-icon v-if="queue.currentTrack" :track="queue.currentTrack"></track-favorite-icon>
+        </div>
 
         <div class="right floated four wide column">
           <p class="timer total">{{queue.audio.state.durationTimerFormat}}</p>
@@ -57,9 +60,13 @@
 <script>
 import queue from '@/audio/queue'
 import Track from '@/audio/track'
+import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
 
 export default {
   name: 'player',
+  components: {
+    TrackFavoriteIcon
+  },
   data () {
     return {
       queue: queue,
@@ -143,6 +150,9 @@ export default {
 .secondary.icon {
   font-size: 1.5em;
 }
+.progress-area .actions {
+  text-align: center;
+}
 .volume-control {
   position: relative;
   .icon {

src/components/favorites/TrackFavoriteIcon.vue

 <template>
-  <i @click="favoriteTracks.set(track.id, !isFavorite)" :class="['circular', 'heart', {'pink': isFavorite}, 'icon']" :title="title"></i>
+  <i @click="favoriteTracks.set(track.id, !isFavorite)" :class="['heart', {'pink': isFavorite}, 'icon']" :title="title"></i>
 </template>
 
 <script>