From f425e95e7ea3f91abac676c31123d553b0a5432f Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Mon, 13 Nov 2023 02:25:46 +0100
Subject: [PATCH] [media UI] Show track image if available on desktop+ size.

---
 .../webapp/src/components/Media/Controls.vue  | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/Media/Controls.vue b/platypush/backend/http/webapp/src/components/Media/Controls.vue
index 2692f4714..6f75d2921 100644
--- a/platypush/backend/http/webapp/src/components/Media/Controls.vue
+++ b/platypush/backend/http/webapp/src/components/Media/Controls.vue
@@ -43,6 +43,7 @@
 
     <div class="track-container col-s-9 col-m-9 col-l-3">
       <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'">
           <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>
@@ -268,8 +269,7 @@ button {
 
   .track-container {
     display: flex;
-    flex-direction: column;
-    justify-content: center;
+    align-items: center;
     margin-left: 0;
 
     @include until($tablet) {
@@ -301,6 +301,29 @@ button {
       letter-spacing: .05em;
       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 {