From d025c0aae505b908f1a76bf74bbeb93ee655ed15 Mon Sep 17 00:00:00 2001
From: Thomas Amland <thomas.amland@gmail.com>
Date: Fri, 25 Sep 2020 19:37:24 +0200
Subject: [PATCH] hide player when queue is empty

---
 src/app/App.vue       | 12 ++----------
 src/player/Player.vue | 16 ++++++++++++++--
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 38e07fc..86f28d0 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -8,9 +8,7 @@
       </main>
     </div>
     <ErrorBar />
-    <footer class="footer elevated">
-      <Player />
-    </footer>
+    <Player />
   </div>
 </template>
 <style lang="scss">
@@ -18,13 +16,7 @@
     margin-bottom: 80px;
     overflow-x: hidden;
   }
-  .footer {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 80px;
-  }
+
 </style>
 <script lang="ts">
   import ErrorBar from './ErrorBar.vue'
diff --git a/src/player/Player.vue b/src/player/Player.vue
index d8a5034..9c98365 100644
--- a/src/player/Player.vue
+++ b/src/player/Player.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex player">
+  <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">
@@ -49,6 +49,17 @@
   .progress2 {
     cursor: pointer;
   }
+  .player {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 0;
+    transition: 0.5s
+  }
+  .visible {
+    height: 80px;
+  }
 </style>
 <script lang="ts">
   import Vue from 'vue'
@@ -65,6 +76,7 @@
         isPlaying: (state: any) => state.isPlaying,
         currentTime: (state: any) => state.currentTime,
         duration: (state: any) => state.duration,
+        visible: (state: any) => state.queue.length > 0,
       }),
       ...mapGetters('player', [
         'track',
@@ -83,7 +95,7 @@
           const value = event.offsetX / width
           return this.$store.dispatch('player/seek', value)
         }
-      }
+      },
     }
   })
 </script>