Skip to content
Snippets Groups Projects
Commit 06aff359 authored by Nicolas Pomepuy's avatar Nicolas Pomepuy
Browse files

Add a play item to the browsable audio items

parent 41fc4cc3
No related branches found
No related tags found
1 merge request!1848Remote access:dark theme
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M8 6.82v10.36c0 .79.87 1.27 1.54.84l8.14-5.18c.62-.39.62-1.29 0-1.69L9.54 5.98C8.87 5.55 8 6.03 8 6.82z"/></svg>
\ No newline at end of file
......@@ -14,6 +14,9 @@
<div class="card-progress full"></div>
<div class="card-progress" v-bind:style="(getProgressStyle())"></div>
</div>
<div class="item-play" v-show="isPlayable()" v-on:click.stop="$play(media, this.mediaType, false, false)">
<img class="image-button-image" :src="(`./icons/play_item.svg`)" :title="$t('PLAY')"/>
</div>
</div>
<div class="d-flex align-items-end">
......@@ -105,6 +108,9 @@ export default {
isBrowse() {
return (this.mediaType == 'folder' || this.mediaType == 'network' || this.mediaType == 'stream' || this.mediaType == 'new-stream')
},
isPlayable() {
return (this.mediaType == 'album' || this.mediaType == 'artist')
},
isOpenable() {
return ['video-group', 'video-folder', 'artist', 'album'].includes(this.mediaType)
},
......@@ -182,6 +188,26 @@ export default {
float: left;
}
.item-play {
position: absolute;
bottom: 0px;
right: 0px;
top: auto;
left: auto;
margin-bottom: 8px;
margin-right: 8px;
width: 32px;
height: 32px;
background-color: white;
border-radius: 50%;
padding: 4px;
display: flex;
}
.item-play:hover {
background-color: $primary-color;
}
/* animation */
@keyframes slide {
......
......@@ -211,10 +211,9 @@ body {
border: none;
}
//medias
//medias
.media-overlay {
visibility: hidden;
opacity: 0;
position: absolute;
top: 0;
......@@ -265,8 +264,7 @@ body {
}
.media-img-list-tr:hover .media-overlay,
.audio-img-container:hover .media-overlay {
visibility: visible;
.media-overlay:hover {
opacity: 1;
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment