Psion-fanatic/platypush
1
0
Fork 0
forked from platypush/platypush
Code Pull requests Activity

[media UI] Show track image if available on desktop+ size.

Browse source
This commit is contained in:
Fabio Manganiello 2023-11-13 02:25:46 +01:00
parent 60fb7bba5f
commit f425e95e7e
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
1 changed files with 25 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
platypush/backend/http/webapp/src/components/Media/Controls.vue
View file

@ -43,6 +43,7 @@
<div class="track-container col-s-9 col-m-9 col-l-3"> <div class="track-container col-s-9 col-m-9 col-l-3">
<div class="track-info" v-if="track && status?.state !== 'stop'"> <div class="track-info" v-if="track && status?.state !== 'stop'">
<img class="image from desktop" :src="track.image" :alt="track.title" v-if="track.image">
<div class="title" v-if="status.state === 'play' || status.state === 'pause'"> <div class="title" v-if="status.state === 'play' || status.state === 'pause'">
<a :href="$route.fullPath" v-text="track.title?.length ? track.title : '[No Title]'" <a :href="$route.fullPath" v-text="track.title?.length ? track.title : '[No Title]'"
@click.prevent="$emit('search', {artist: track.artist, album: track.album})" v-if="track.album"></a> @click.prevent="$emit('search', {artist: track.artist, album: track.album})" v-if="track.album"></a>
@ -268,8 +269,7 @@ button {
.track-container { .track-container {
display: flex; display: flex;
flex-direction: column; align-items: center;
justify-content: center;
margin-left: 0; margin-left: 0;
@include until($tablet) { @include until($tablet) {
@ -301,6 +301,29 @@ button {
letter-spacing: .05em; letter-spacing: .05em;
margin-bottom: .25em; margin-bottom: .25em;
} }
.image {
width: 5em;
max-height: 100%;
display: inline-flex;
}
}
.track-info {
display: flex;
@include until($desktop) {
flex-direction: column;
}
@include from($desktop) {
flex-direction: row;
align-items: center;
.image {
margin-right: 0.75em;
}
}
} }
.playback-controls { .playback-controls {