From 47dc2a5744d269ba27bc0932fc42fe92338402d2 Mon Sep 17 00:00:00 2001
From: Phan An <me@phanan.net>
Date: Sun, 17 Jul 2022 10:58:05 +0200
Subject: [PATCH] feat: better screen header

---
 .../js/components/screens/AlbumScreen.vue       |  2 +-
 .../js/components/screens/AllSongsScreen.vue    |  2 +-
 .../js/components/screens/ArtistScreen.vue      |  2 +-
 .../js/components/screens/FavoritesScreen.vue   |  2 +-
 .../js/components/screens/PlaylistScreen.vue    |  2 +-
 .../js/components/screens/QueueScreen.vue       |  3 +--
 .../components/screens/RecentlyPlayedScreen.vue |  2 +-
 .../screens/search/SearchSongResultsScreen.vue  |  2 +-
 .../assets/js/components/ui/ScreenHeader.vue    | 17 +++++------------
 9 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/resources/assets/js/components/screens/AlbumScreen.vue b/resources/assets/js/components/screens/AlbumScreen.vue
index 161d8f34..c32785e5 100644
--- a/resources/assets/js/components/screens/AlbumScreen.vue
+++ b/resources/assets/js/components/screens/AlbumScreen.vue
@@ -1,6 +1,6 @@
 <template>
   <section id="albumWrapper">
-    <ScreenHeader :layout="headerLayout" has-thumbnail>
+    <ScreenHeader :layout="songs.length === 0 ? 'collapsed' : headerLayout">
       {{ album.name }}
       <ControlsToggle :showing-controls="showingControls" @toggleControls="toggleControls"/>
 
diff --git a/resources/assets/js/components/screens/AllSongsScreen.vue b/resources/assets/js/components/screens/AllSongsScreen.vue
index 67a5bd0f..e56e4fb5 100644
--- a/resources/assets/js/components/screens/AllSongsScreen.vue
+++ b/resources/assets/js/components/screens/AllSongsScreen.vue
@@ -1,6 +1,6 @@
 <template>
   <section id="songsWrapper">
-    <ScreenHeader :layout="headerLayout" has-thumbnail>
+    <ScreenHeader :layout="headerLayout">
       All Songs
       <ControlsToggle :showing-controls="showingControls" @toggleControls="toggleControls"/>
 
diff --git a/resources/assets/js/components/screens/ArtistScreen.vue b/resources/assets/js/components/screens/ArtistScreen.vue
index abd5c8f1..2e19b91f 100644
--- a/resources/assets/js/components/screens/ArtistScreen.vue
+++ b/resources/assets/js/components/screens/ArtistScreen.vue
@@ -1,6 +1,6 @@
 <template>
   <section id="artistWrapper">
-    <ScreenHeader :layout="headerLayout" has-thumbnail>
+    <ScreenHeader :layout="songs.length === 0 ? 'collapsed' : headerLayout">
       {{ artist.name }}
       <ControlsToggle :showing-controls="showingControls" @toggleControls="toggleControls"/>
 
diff --git a/resources/assets/js/components/screens/FavoritesScreen.vue b/resources/assets/js/components/screens/FavoritesScreen.vue
index 4d9ae51c..5decf0d8 100644
--- a/resources/assets/js/components/screens/FavoritesScreen.vue
+++ b/resources/assets/js/components/screens/FavoritesScreen.vue
@@ -1,6 +1,6 @@
 <template>
   <section id="favoritesWrapper">
-    <ScreenHeader :layout="headerLayout" has-thumbnail>
+    <ScreenHeader :layout="songs.length === 0 ? 'collapsed' : headerLayout">
       Songs You Love
       <ControlsToggle :showing-controls="showingControls" @toggleControls="toggleControls"/>
 
diff --git a/resources/assets/js/components/screens/PlaylistScreen.vue b/resources/assets/js/components/screens/PlaylistScreen.vue
index 561b11c3..2d911b2e 100644
--- a/resources/assets/js/components/screens/PlaylistScreen.vue
+++ b/resources/assets/js/components/screens/PlaylistScreen.vue
@@ -1,6 +1,6 @@
 <template>
   <section id="playlistWrapper" v-if="playlist">
-    <ScreenHeader :layout="headerLayout" has-thumbnail>
+    <ScreenHeader :layout="songs.length === 0 ? 'collapsed' : headerLayout">
       {{ playlist.name }}
       <ControlsToggle v-if="songs.length" :showing-controls="showingControls" @toggleControls="toggleControls"/>
 
diff --git a/resources/assets/js/components/screens/QueueScreen.vue b/resources/assets/js/components/screens/QueueScreen.vue
index 5a3e9d33..045b17ae 100644
--- a/resources/assets/js/components/screens/QueueScreen.vue
+++ b/resources/assets/js/components/screens/QueueScreen.vue
@@ -1,6 +1,6 @@
 <template>
   <section id="queueWrapper">
-    <ScreenHeader :layout="headerLayout" :has-thumbnail="shouldDisplayThumbnails">
+    <ScreenHeader :layout="songs.length === 0 ? 'collapsed' : headerLayout">
       Current Queue
       <ControlsToggle :showing-controls="showingControls" @toggleControls="toggleControls"/>
 
@@ -79,7 +79,6 @@ const {
 } = useSongList(toRef(queueStore.state, 'songs'), 'queue', { sortable: false })
 
 const libraryNotEmpty = computed(() => commonStore.state.song_count > 0)
-const shouldDisplayThumbnails = computed(() => songs.value.length > 0)
 
 const playAll = (shuffle = true) => playbackService.queueAndPlay(songs.value, shuffle)
 
diff --git a/resources/assets/js/components/screens/RecentlyPlayedScreen.vue b/resources/assets/js/components/screens/RecentlyPlayedScreen.vue
index f098aebb..9b41516e 100644
--- a/resources/assets/js/components/screens/RecentlyPlayedScreen.vue
+++ b/resources/assets/js/components/screens/RecentlyPlayedScreen.vue
@@ -1,6 +1,6 @@
 <template>
   <section id="recentlyPlayedWrapper">
-    <ScreenHeader :layout="headerLayout" has-thumbnail>
+    <ScreenHeader :layout="songs.length === 0 ? 'collapsed' : headerLayout">
       Recently Played
       <ControlsToggle :showing-controls="showingControls" @toggleControls="toggleControls"/>
 
diff --git a/resources/assets/js/components/screens/search/SearchSongResultsScreen.vue b/resources/assets/js/components/screens/search/SearchSongResultsScreen.vue
index 618c4d88..ebd9ef60 100644
--- a/resources/assets/js/components/screens/search/SearchSongResultsScreen.vue
+++ b/resources/assets/js/components/screens/search/SearchSongResultsScreen.vue
@@ -1,6 +1,6 @@
 <template>
   <section id="songResultsWrapper">
-    <ScreenHeader :layout="headerLayout" has-thumbnail>
+    <ScreenHeader :layout="songs.length === 0 ? 'collapsed' : headerLayout">
       Songs for <span class="text-thin">{{ decodedQ }}</span>
       <ControlsToggle :showing-controls="showingControls" @toggleControls="toggleControls"/>
 
diff --git a/resources/assets/js/components/ui/ScreenHeader.vue b/resources/assets/js/components/ui/ScreenHeader.vue
index 7eead84d..8ac7fe36 100644
--- a/resources/assets/js/components/ui/ScreenHeader.vue
+++ b/resources/assets/js/components/ui/ScreenHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <header class="screen-header" :class="layout">
-    <div class="thumbnail-wrapper" :class="{ 'non-empty': hasThumbnail }">
+    <div class="thumbnail-wrapper">
       <slot name="thumbnail"></slot>
     </div>
 
@@ -20,14 +20,7 @@
 </template>
 
 <script lang="ts" setup>
-import { toRefs } from 'vue'
-
-const props = withDefaults(defineProps<{ hasThumbnail?: boolean, layout?: 'expanded' | 'collapsed' }>(), {
-  hasThumbnail: false,
-  layout: 'expanded'
-})
-
-const { hasThumbnail } = toRefs(props)
+const props = withDefaults(defineProps<{ layout?: 'expanded' | 'collapsed' }>(), { layout: 'expanded' })
 </script>
 
 <style lang="scss">
@@ -68,7 +61,7 @@ header.screen-header {
 
   .thumbnail-wrapper {
     overflow: hidden;
-    display: none;
+    display: block;
     width: 0;
     transition: width var(--transition-duration);
     box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.3);
@@ -80,8 +73,8 @@ header.screen-header {
       transition: transform var(--transition-duration), width var(--transition-duration);
     }
 
-    &.non-empty {
-      display: block;
+    &:empty {
+      display: none;
     }
   }