Update play icon for tracks and for home page (#1149)

Author: stvncode

src/components/ListviewItem.vue

@@ -31,10 +31,15 @@
         v-if="!showCheckboxes && item.is_playable"
         :class="{ hidden: !showPlayBtn }"
         icon="mdi-play"
-        color="primary"
-        fab
+        variant="text"
         size="small"
-        style="position: absolute; left: 12px; bottom: 12px"
+        style="
+          position: absolute;
+          left: 14px;
+          bottom: 12px;
+          color: white;
+          font-size: 18px;
+        "
         @click.stop="onPlayClick"
         @mouseenter="showPlayBtn = true"
         @mouseleave="showPlayBtn = false"

src/components/PanelviewItemCompact.vue

@@ -27,31 +27,32 @@
           :model-value="isSelected"
         />
       </v-overlay>
-      <MediaItemThumb :item="isAvailable ? item : undefined" />
-      <!-- Now Playing Badge -->
-      <NowPlayingBadge
-        v-if="isPlaying"
-        icon-style="position: absolute; right: 5px; bottom: 5px"
-        :show-badge="false"
-      />
-      <!-- play button -->
-      <v-btn
-        v-if="
-          (isHovering || store.isTouchscreen) && isAvailable && item.is_playable
-        "
-        icon="mdi-play"
-        color="white"
-        fab
-        size="small"
-        style="
-          position: absolute;
-          left: 50%;
-          top: 40%;
-          transform: translate(-50%, -50%);
-          opacity: 0.8;
-        "
-        @click.stop="onPlayClick"
-      />
+      <div class="thumb-container">
+        <MediaItemThumb :item="isAvailable ? item : undefined" />
+        <!-- Now Playing Badge -->
+        <NowPlayingBadge
+          v-if="isPlaying"
+          icon-style="position: absolute; right: 5px; bottom: 5px"
+          :show-badge="false"
+        />
+        <!-- play button -->
+        <div
+          v-if="
+            (isHovering || store.isTouchscreen) &&
+            isAvailable &&
+            item.is_playable
+          "
+          class="play-button-overlay"
+        >
+          <v-btn
+            icon="mdi-play"
+            color="white"
+            fab
+            style="opacity: 0.6; font-size: 20px"
+            @click.stop="onPlayClick"
+          />
+        </div>
+      </div>
       <v-list-item
         variant="text"
         slim
@@ -109,22 +110,22 @@
 </template>
 
 <script setup lang="ts">
-import MediaItemThumb from "./MediaItemThumb.vue";
-import {
-  BrowseFolder,
-  ItemMapping,
-  type MediaItemType,
-  MediaType,
-} from "@/plugins/api/interfaces";
+import NowPlayingBadge from "@/components/NowPlayingBadge.vue";
 import {
   getArtistsString,
   getBrowseFolderName,
   handleMediaItemClick,
   handleMenuBtnClick,
   handlePlayBtnClick,
 } from "@/helpers/utils";
+import {
+  BrowseFolder,
+  ItemMapping,
+  type MediaItemType,
+  MediaType,
+} from "@/plugins/api/interfaces";
 import { store } from "@/plugins/store";
-import NowPlayingBadge from "@/components/NowPlayingBadge.vue";
+import MediaItemThumb from "./MediaItemThumb.vue";
 
 // properties
 export interface Props {
@@ -184,6 +185,28 @@ const onPlayClick = function (evt: PointerEvent) {
 </script>
 
 <style scoped>
+.thumb-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.play-button-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+
+  .v-btn {
+    pointer-events: all;
+  }
+}
 .v-card {
   background-color: rgb(var(--v-theme-panel));
   transition: opacity 0.4s ease-in-out;

src/layouts/default/Footer.vue

@@ -12,8 +12,8 @@
     `"
   ></div>
   <BottomNavigation
-    :height="bottomNavHeight"
     v-if="getBreakpointValue({ breakpoint: 'tablet' })"
+    :height="bottomNavHeight"
   />
   <v-footer
     app