diff --git a/front/src/components/audio/ArtistEntries.vue b/front/src/components/audio/ArtistEntries.vue
index 720f7deec83bb075015469c8b402f2051d1d1bd2..7f4540a0dddb0f2559799c26a36bb2a0de781852 100644
--- a/front/src/components/audio/ArtistEntries.vue
+++ b/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,12 +55,18 @@
<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"
@click.prevent.exact="pausePlayback"
>
- <i class="pause icon" />
+ <i class="pause icon" />
</button>
<button
v-else-if="currentTrack && !isPlaying && track.id === currentTrack.id && track.hover"
@@ -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>
diff --git a/front/src/components/library/ArtistDetail.vue b/front/src/components/library/ArtistDetail.vue
index 222a75e86938024c660e4a6177cf1cb4e27c7dce..26206a9bec99c0abd7d5a2cc91c760ca9fdd6f54 100644
--- a/front/src/components/library/ArtistDetail.vue
+++ b/front/src/components/library/ArtistDetail.vue
@@ -15,11 +15,14 @@
</div>
</div>
<section v-if="tracks.length > 0" class="ui vertical stripe segment">
- <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>
+ <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>
+ </template>
+ </artist-entries>
</section>
<section v-if="isLoadingAlbums" class="ui vertical stripe segment">
<div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
diff --git a/front/src/style/_vars.scss b/front/src/style/_vars.scss
index 1683ca9f3bd98aa2f462416e1856b67b41007228..5201985ebf92dec2d582f00125fe7b5aca35ed5f 100644
--- a/front/src/style/_vars.scss
+++ b/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;
diff --git a/front/src/style/globals/_channels.scss b/front/src/style/globals/_channels.scss
index e553f2febf33fa71ea26dee02d5a1467db992e8e..5f364184ea3b5d49c249a4d0ee64d0c976fa94f9 100644
--- a/front/src/style/globals/_channels.scss
+++ b/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;
}