fix: Show play buttons when touchscreen is detected

Author: marcelveldt

src/components/HomeWidgetRow.vue

@@ -35,6 +35,7 @@
               item.media_type,
             )
           "
+          :is-available="itemIsAvailable(item)"
           @menu="onMenu"
           @click="onClick"
           @play="onPlayClick"

src/components/ItemsListing.vue

@@ -54,6 +54,7 @@
               :is-selected="isSelected(item)"
               :show-checkboxes="showCheckboxes"
               :show-actions="['tracks', 'albums'].includes(itemtype)"
+              :is-available="itemIsAvailable(item)"
               @select="onSelect"
               @menu="onMenu"
               @click="onClick"
@@ -74,6 +75,7 @@
               :item="item"
               :is-selected="isSelected(item)"
               :show-checkboxes="showCheckboxes"
+              :is-available="itemIsAvailable(item)"
               @select="onSelect"
               @menu="onMenu"
               @click="onClick"
@@ -102,6 +104,7 @@
               :show-album="showAlbum"
               :show-checkboxes="showCheckboxes"
               :is-selected="isSelected(item)"
+              :is-available="itemIsAvailable(item)"
               :show-details="itemtype.includes('versions')"
               @select="onSelect"
               @menu="onMenu"

src/components/ListviewItem.vue

@@ -3,7 +3,7 @@
   <ListItem
     link
     :show-menu-btn="showMenu"
-    :class="{ unavailable: !itemIsAvailable(item) }"
+    :class="{ unavailable: !isAvailable }"
     @click.stop="onClick"
     @menu.stop="onMenu"
   >
@@ -198,7 +198,6 @@ import { useI18n } from "vue-i18n";
 import { getBreakpointValue } from "@/plugins/breakpoint";
 import ListItem from "@/components/mods/ListItem.vue";
 import FavouriteButton from "@/components/FavoriteButton.vue";
-import { itemIsAvailable } from "@/plugins/api/helpers";
 
 // properties
 export interface Props {
@@ -213,6 +212,7 @@ export interface Props {
   showDuration?: boolean;
   isSelected: boolean;
   isDisabled?: boolean;
+  isAvailable?: boolean;
   showCheckboxes?: boolean;
   showDetails?: boolean;
 }
@@ -231,6 +231,7 @@ const compProps = withDefaults(defineProps<Props>(), {
   showDuration: true,
   showCheckboxes: false,
   isDisabled: false,
+  isAvailable: true,
 });
 
 // computed properties

src/components/PanelviewItem.vue

@@ -6,7 +6,7 @@
       tile
       hover
       class="panel-item"
-      :class="{ unavailable: !itemIsAvailable(item) }"
+      :class="{ unavailable: !isAvailable }"
       @click="onClick"
       @click.right.prevent="onMenu"
     >
@@ -67,7 +67,7 @@
 
       <!-- play button -->
       <v-btn
-        v-if="(isHovering || $vuetify.display.mobile) && itemIsAvailable(item)"
+        v-if="(isHovering || store.isTouchscreen) && isAvailable"
         icon="mdi-play"
         color="primary"
         fab
@@ -138,10 +138,10 @@ import {
   getBrowseFolderName,
   parseBool,
 } from "@/helpers/utils";
-import { itemIsAvailable } from "@/plugins/api/helpers";
 import { iconHiRes } from "./QualityDetailsBtn.vue";
 import { getBreakpointValue } from "@/plugins/breakpoint";
 import FavouriteButton from "@/components/FavoriteButton.vue";
+import { store } from "@/plugins/store";
 
 // properties
 export interface Props {
@@ -151,12 +151,14 @@ export interface Props {
   showCheckboxes?: boolean;
   showMediaType?: boolean;
   showActions?: boolean;
+  isAvailable?: boolean;
 }
 const compProps = withDefaults(defineProps<Props>(), {
   size: 200,
   showCheckboxes: false,
   showActions: false,
   showMediaType: false,
+  isAvailable: true,
 });
 
 // computed properties

src/components/PanelviewItemCompact.vue

@@ -3,7 +3,7 @@
     <v-card
       v-hold="onMenu"
       v-bind="props"
-      :class="{ 'on-hover': isHovering, unavailable: !itemIsAvailable(item) }"
+      :class="{ 'on-hover': isHovering, unavailable: !isAvailable }"
       :elevation="isHovering ? 3 : 0"
       @click="onClick"
       @click.right.prevent="onMenu"
@@ -65,7 +65,7 @@
       </div>
       <!-- play button -->
       <v-btn
-        v-if="isHovering || $vuetify.display.mobile"
+        v-if="(isHovering || store.isTouchscreen) && isAvailable"
         icon="mdi-play"
         color="primary"
         fab
@@ -85,7 +85,7 @@ import {
   MediaType,
 } from "@/plugins/api/interfaces";
 import { getArtistsString, getBrowseFolderName } from "@/helpers/utils";
-import { itemIsAvailable } from "@/plugins/api/helpers";
+import { store } from "@/plugins/store";
 
 // properties
 export interface Props {
@@ -94,12 +94,14 @@ export interface Props {
   isSelected?: boolean;
   showCheckboxes?: boolean;
   permanentOverlay?: boolean;
+  isAvailable?: boolean;
 }
 const compProps = withDefaults(defineProps<Props>(), {
   size: 200,
   isSelected: false,
   showCheckboxes: false,
   permanentOverlay: false,
+  isAvailable: true,
 });
 
 // emits

src/helpers/utils.ts

@@ -458,3 +458,23 @@ export const panelViewItemResponsive = function (displaySize: number) {
     return 0;
   }
 };
+
+export function isTouchscreenDevice() {
+  // detect if device/browser is touch enabled
+  let result = false;
+  if (window.PointerEvent && "maxTouchPoints" in navigator) {
+    if (navigator.maxTouchPoints > 0) {
+      result = true;
+    }
+  } else {
+    if (
+      window.matchMedia &&
+      window.matchMedia("(any-pointer:coarse)").matches
+    ) {
+      result = true;
+    } else if (window.TouchEvent || "ontouchstart" in window) {
+      result = true;
+    }
+  }
+  return result;
+}

src/plugins/api/helpers.ts

@@ -3,13 +3,15 @@
 import api from ".";
 import { MediaItemType, ItemMapping, MediaType } from "./interfaces";
 
-export const itemIsAvailable = function (item: MediaItemType | ItemMapping) {
+export const itemIsAvailable = function (
+  item: MediaItemType | ItemMapping,
+): boolean {
   if (item.media_type == MediaType.FOLDER) return true;
   if ("provider_mappings" in item) {
     for (const x of item.provider_mappings) {
       if (x.available && api.providers[x.provider_instance]?.available)
         return true;
     }
-  } else if ("available" in item) return item.available;
+  } else if ("available" in item) return item.available as boolean;
   return false;
 };

src/plugins/store.ts

@@ -3,6 +3,7 @@ import { Player, PlayerQueue, QueueItem } from "./api/interfaces";
 
 import api from "./api";
 import { StoredState } from "@/components/ItemsListing.vue";
+import { isTouchscreenDevice } from "@/helpers/utils";
 
 export enum AlertType {
   ERROR = "error",
@@ -40,6 +41,7 @@ interface Store {
   libraryPlaylistsCount?: number;
   libraryRadiosCount?: number;
   connected?: boolean;
+  isTouchscreen: boolean;
 }
 
 export const store: Store = reactive({
@@ -87,4 +89,5 @@ export const store: Store = reactive({
   libraryPlaylistsCount: undefined,
   libraryRadiosCount: undefined,
   connected: false,
+  isTouchscreen: isTouchscreenDevice(),
 });