From 3ed73a2e16afc7721ca37ee82ca4b59dd19dd885 Mon Sep 17 00:00:00 2001
From: Thomas Amland <thomas.amland@gmail.com>
Date: Sat, 26 Sep 2020 18:16:48 +0200
Subject: [PATCH] player: show image and reduce size of sm version

---
 src/player/Player.vue | 35 +++++++++++++++++++++--------------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/player/Player.vue b/src/player/Player.vue
index 2508da8..329d616 100644
--- a/src/player/Player.vue
+++ b/src/player/Player.vue
@@ -1,25 +1,32 @@
 <template>
   <div :class="{'visible': visible}" class="player elevated d-flex">
-    <div v-if="track" class="d-none d-sm-block">
-      <router-link :to="track.albumId ? {name: 'album', params: {id: track.albumId}} : ''">
-        <img v-if="track.image" width="80px" height="80px" :src="track.image">
-        <img v-else width="80px" height="80px" src="@/shared/assets/fallback.svg">
-      </router-link>
-    </div>
     <div class="flex-fill">
       <!-- Progress --->
       <div class="progress2" @click="seek">
         <b-progress :value="progress" :max="100" height="4px" />
       </div>
-      <div class="row align-items-center m-0" style="height: 100%">
+      <div class="row align-items-center m-0">
         <!-- Track info --->
-        <div class="col p-0 pl-3" style="min-width: 0; width: 0;">
+        <div class="col p-0 d-flex flex-nowrap align-items-center justify-content-start" style="width: 0; min-width: 0">
           <template v-if="track">
-            <div class="text-truncate">
-              {{ track.title }}
-            </div>
-            <div class="text-truncate">
-              {{ track.artist }}
+            <router-link :to="track.albumId ? {name: 'album', params: {id: track.albumId}} : ''">
+              <template v-if="track.image">
+                <img class="d-sm-none" width="64px" height="64px" :src="track.image">
+                <img class="d-none d-sm-inline-block" width="74px" height="74px" :src="track.image">
+              </template>
+              <template v-else>
+                <img class="d-sm-none" width="64px" height="64px" src="@/shared/assets/fallback.svg">
+                <img class="d-none d-sm-inline-block" width="74px" height="74px" src="@/shared/assets/fallback.svg">
+              </template>
+            </router-link>
+
+            <div class="pl-3" style="min-width: 0">
+              <div class="text-truncate">
+                {{ track.title }}
+              </div>
+              <div class="text-truncate text-muted">
+                {{ track.artist }}
+              </div>
             </div>
           </template>
         </div>
@@ -60,7 +67,7 @@
     transition: 0.5s
   }
   .visible {
-    height: 80px;
+    height: auto;
   }
 </style>
 <script lang="ts">