Improve now playing screen phone (#1543)

* optimize album art and font size

* Center text vertically

* Tweak cutoff values for album title and player button for Galaxy S8+ screens

* Give quality icon a bit more breathing room

* Feedback

* Slightly increase the font-size

* Gradient + tiny bump fontsize

* Gradient from -25% till +25%

* Fix queue overlap and add padding to art

Author: MarvinSchenkel

src/layouts/default/PlayerOSD/PlayerFullscreen.vue

@@ -7,7 +7,7 @@
     z-index="9999"
     persistent
   >
-    <v-card :color="backgroundColor">
+    <v-card :style="{ background: backgroundColor }">
       <v-toolbar class="v-toolbar-default" color="transparent">
         <template #prepend>
           <Button icon @click="store.showFullscreenPlayer = false">
@@ -69,7 +69,7 @@
                 store.activePlayer?.powered != false &&
                 store.activePlayer?.current_media?.image_url
               "
-              style="max-width: 100%; width: auto; border-radius: 4px"
+              style="max-width: 100%; width: auto"
               :src="
                 getMediaImageUrl(store.activePlayer.current_media.image_url)
               "
@@ -128,7 +128,7 @@
 
             <!-- subtitle: album -->
             <v-card-subtitle
-              v-else-if="store.activePlayer?.current_media?.album"
+              v-else-if="store.activePlayer?.current_media?.album && showAlbumSubtitle"
               :style="`font-size: ${subTitleFontSize};cursor:pointer;`"
               @click="onAlbumClick"
             >
@@ -177,7 +177,7 @@
                 store.activePlayer?.powered != false &&
                 store.curQueueItem?.streamdetails
               "
-              style="margin: auto; padding-top: 20px"
+              style="margin: auto; padding-top: min(20px, 2vh)"
             >
               <QualityDetailsBtn />
             </div>
@@ -379,7 +379,7 @@
           <div class="main-media-details-image main-media-details-image-alt">
             <v-img
               v-if="store.activePlayer?.current_media?.image_url"
-              style="max-width: 100%; width: auto; border-radius: 4px"
+              style="max-width: 100%; width: auto"
               :src="
                 getMediaImageUrl(store.activePlayer.current_media.image_url)
               "
@@ -575,6 +575,11 @@ import computeElapsedTime from "@/helpers/elapsed";
 
 const { name } = useDisplay();
 
+const MIN_HEIGHT_SHOW_FULL_DETAILS = 750;
+const showAlbumSubtitle = computed(
+  () => vuetify.display.height.value > MIN_HEIGHT_SHOW_FULL_DETAILS,
+);
+
 interface Props {
   colorPalette: ImageColorPalette;
 }
@@ -734,7 +739,7 @@ const titleFontSize = computed(() => {
     case "xs":
       return "1.2em";
     case "sm":
-      return "1.6em";
+      return "1.4em";
     case "md":
       return "2em";
     case "lg":
@@ -751,9 +756,9 @@ const titleFontSize = computed(() => {
 const subTitleFontSize = computed(() => {
   switch (name.value) {
     case "xs":
-      return "1.0em";
+      return "1.05em";
     case "sm":
-      return "1.2em";
+      return "1.15em";
     case "md":
       return "1.7em";
     case "lg":
@@ -768,7 +773,7 @@ const subTitleFontSize = computed(() => {
 });
 
 const showExpandedPlayerSelectButton = computed(() => {
-  return vuetify.display.height.value > 700;
+  return vuetify.display.height.value > MIN_HEIGHT_SHOW_FULL_DETAILS;
 });
 
 // methods
@@ -1453,16 +1458,21 @@ watchEffect(() => {
   // Also, this text color has a better contrast than the automatically selected one
   document.documentElement.style.setProperty("--text-color", textColor.hex());
   sliderColor.value = textColor.hex();
-  backgroundColor.value = bgColor.hex();
+  const topColor = bgColor.lighten(0.25);
+  const bottomColor = bgColor.darken(0.25);
+  backgroundColor.value = `linear-gradient(to bottom, ${topColor.hex()}, ${bottomColor.hex()})`;
 });
 </script>
 
 <style scoped>
+
 .main {
+  --main-height: 57%;
+  --main-max-height: 65%;
   display: flex;
   min-height: 50% !important;
-  height: 50% !important;
-  max-height: 65% !important;
+  height: var(--main-height) !important;
+  max-height: var(--main-max-height) !important;
   padding-bottom: 5px;
 }
 
@@ -1497,8 +1507,10 @@ watchEffect(() => {
   padding-left: 20px;
   padding-right: 20px;
 }
-.main-media-details-image.v-img {
+.main-media-details-image .v-img {
   width: auto;
+  border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
 }
 
 .main-media-details-image-alt {
@@ -1653,7 +1665,7 @@ button {
   aspect-ratio: 1;
   max-width: 400px;
   margin: 0 auto;
-  border-radius: 4px;
+  border-radius: 10px;
   background-color: rgba(var(--v-theme-on-surface), 0.08);
   display: flex;
   align-items: center;
@@ -1675,4 +1687,24 @@ button {
   color: var(--badge-color);
   margin-right: 0.5rem;
 }
+
+@media (max-width: 540px) {
+  .main:has(.main-media-details) {
+    --main-height: 70%;
+    --main-max-height: 75%;
+  }
+
+  .main-media-details-image {
+    height: 75%;
+    max-height: 85%;
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  .main-media-details-track-info {
+    padding: 8px;
+    height: 25%;
+  }
+}
+
 </style>