Fix various layout issues

front/src/components/audio/ArtistEntries.vue

@@ -4,6 +4,10 @@
     <inline-search-bar v-model="query" v-if="search" @search="additionalTracks = []; fetchData()"></inline-search-bar>
     <div class="ui hidden divider"></div>
 
+    <!-- Add a header if needed -->
+
+    <slot name="header"></slot>
+
     <!-- Show a message if no tracks are available -->
 
     <slot v-if="!isLoading && allTracks.length === 0" name="empty-state">
@@ -17,7 +21,10 @@
         <div class="ui loader"></div>
       </div>
       <div class="artist-entries row">
-        <div class="actions left floated column"></div>
+        <div v-if="showPosition" class="actions left floated column">
+          <i class="hashtag icon"></i>
+        </div>
+        <div v-else class="actions left floated column"></div>
         <div v-if="showArt" class="image left floated column"></div>
         <div class="content ellipsis left floated column">
           <b>{{ labels.title }}</b>
@@ -28,9 +35,9 @@
         <div v-if="showArtist" class="content ellipsis left floated column">
           <b>{{ labels.artist }}</b>
         </div>
-        <div class="meta right floated column"></div>
+        <div v-if="$store.state.auth.authenticated" class="meta right floated column"></div>
         <div class="meta right floated column">
-          <i class="clock icon" style="padding: 0.5rem;" />
+          <i class="clock outline icon" style="padding: 0.5rem;" />
         </div>
         <div v-if="displayActions" class="right floated column"></div>
       </div>
@@ -48,6 +55,12 @@
           <play-indicator
             v-if="!$store.state.player.isLoadingAudio && currentTrack && isPlaying && track.id === currentTrack.id && !track.hover">
           </play-indicator>
+          <button
+            v-else-if="currentTrack && !isPlaying && track.id === currentTrack.id && !track.hover"
+            class="ui really tiny basic icon button play-button paused"
+          >
+            <i class="pause icon" />
+          </button>
           <button
             v-else-if="currentTrack && isPlaying && track.id === currentTrack.id && track.hover"
             class="ui really tiny basic icon button play-button"
@@ -78,7 +91,24 @@
           <img alt="" class="ui artist-track mini image" v-else src="../../assets/audio/default-cover.png">
         </div>
         <div class="content ellipsis left floated column">
-          <router-link :to="{name: 'library.tracks.detail', params: {id: track.id }}">{{ track.title }}</router-link>
+          <a 
+            v-if="currentTrack && !isPlaying && track.id === currentTrack.id" 
+            @click="resumePlayback"
+          >
+            {{ track.title }}
+          </a>
+          <a 
+            v-else-if="currentTrack && isPlaying && track.id === currentTrack.id" 
+            @click="pausePlayback"
+          >
+            {{ track.title }}
+          </a>
+          <a 
+            v-else
+            @click.prevent.exact="replacePlay(allTracks, index)"
+          >
+            {{ track.title }}
+          </a>
         </div>
         <div v-if="showAlbum" class="content ellipsis left floated column">
           <router-link :to="{name: 'library.albums.detail', params: {id: track.album.id }}">{{ track.album.title }}</router-link>
@@ -86,14 +116,14 @@
         <div v-if="showArtist" class="content ellipsis left floated column">
           <router-link class="artist link" :to="{name: 'library.artists.detail', params: {id: track.artist.id }}">{{ track.artist.name }}</router-link>
         </div>
-        <div class="meta right floated column">
+        <div v-if="$store.state.auth.authenticated" class="meta right floated column">
           <track-favorite-icon class="tiny" :border="false" :track="track"></track-favorite-icon>
         </div>
         <div class="meta right floated column">
           <human-duration v-if="track.uploads[0] && track.uploads[0].duration" :duration="track.uploads[0].duration"></human-duration>
         </div>
         <div v-if="displayActions" class="right floated column">
-          <play-button id="playmenu" class="play-button basic icon" :dropdown-only="true" :is-playable="track.is_playable_by_actor" :dropdown-icon-classes="['ellipsis', 'vertical', 'large really discrete']" :track="track"></play-button>
+          <play-button id="playmenu" class="play-button basic icon" :dropdown-only="true" :is-playable="track.is_playable" :dropdown-icon-classes="['ellipsis', 'vertical', 'large really discrete']" :track="track"></play-button>
         </div>
       </div>
     </div>

front/src/components/library/ArtistDetail.vue

@@ -15,11 +15,14 @@
       </div>
     </div>
     <section v-if="tracks.length > 0" class="ui vertical stripe segment">
+      <artist-entries :show-position="false" :track-only="true" :tracks="tracks.slice(0,5)">
+        <template slot="header">
           <h2>
             <translate translate-context="Content/Artist/Title">New tracks by this artist</translate>
           </h2>
           <div class="ui hidden divider"></div>
-      <artist-entries :show-position="false" :track-only="true" :tracks="tracks.slice(0,5)"></artist-entries>
+        </template>
+      </artist-entries>
     </section>
     <section v-if="isLoadingAlbums" class="ui vertical stripe segment">
       <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>

front/src/style/_vars.scss

@@ -117,3 +117,5 @@ $card-box-shadow: 0 1px 3px 0 #D4D4D5, 0 0 0 1px #D4D4D5 !default;
 
 $dimmer-background: rgba(255, 255, 255, 0.85) !default;
 $dimmer-color: var(--text-color) !default;
+
+$border-color: rgba(34, 36, 38, 0.15) !default;

front/src/style/globals/_channels.scss

@@ -88,6 +88,13 @@
   .ui.really.tiny.button.play-button {
     visibility: hidden;
   }
+  .ui.icon.really.tiny.button.play-button.paused {
+    color: var(--main-color);
+    visibility: visible;
+    display: contents;
+    left: auto;
+    right: auto;
+  }
   .ui.floating.dropdown {
     visibility: hidden;
   }