[ 1.0.29 ] * This release requires the SpotifyPlus Integration v1.0.85+ release; please make sure you update the SpotifyPlus integration prior to updating this SpotifyPlus Card release.

  * Modified `isTouchDevice` method to better detect touchscreen support for dual-monitor setups.

Author: thlucas1

CHANGELOG.md

@@ -6,6 +6,11 @@ Change are listed in reverse chronological order (newest to oldest).
 
 <span class="changelog">
 
+###### [ 1.0.29 ] - 2025/01/11
+
+  * This release requires the SpotifyPlus Integration v1.0.85+ release; please make sure you update the SpotifyPlus integration prior to updating this SpotifyPlus Card release.
+  * Modified `isTouchDevice` method to better detect touchscreen support for dual-monitor setups.
+
 ###### [ 1.0.28 ] - 2025/01/09
 
   * This release requires the SpotifyPlus Integration v1.0.85+ release; please make sure you update the SpotifyPlus integration prior to updating this SpotifyPlus Card release.

src/constants.ts

@@ -1,7 +1,7 @@
 import { css } from 'lit';
 
 /** current version of the card. */
-export const CARD_VERSION = '1.0.28';
+export const CARD_VERSION = '1.0.29';
 
 /** SpotifyPlus integration domain identifier. */
 export const DOMAIN_SPOTIFYPLUS = 'spotifyplus';

src/utils/utils.ts

@@ -455,15 +455,27 @@ export function closestElement(selector: string, base: Element) {
  * Determine if the current device supports touch events.
  * 
  * @returns true if touch events are supported; otherwise, false.
- * 
- * examples:
- * - find element by it's `id=` value:
- *   const container = this.closestElement('#spcPlayer');
- * - find element by it's html tag name (e.g. `<spc-player>`):
- *   const container = this.closestElement('spc-player');
  */
 export function isTouchDevice(): boolean {
-  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+  //return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+
+  let result = false;
+  if (window.PointerEvent && ('maxTouchPoints' in navigator)) {
+    // if Pointer Events are supported, just check maxTouchPoints
+    if (navigator.maxTouchPoints > 0) {
+      result = true;
+    }
+  } else {
+    // no Pointer Events...
+    if (window.matchMedia && window.matchMedia("(any-pointer:coarse)").matches) {
+      // check for any-pointer:coarse which mostly means touchscreen
+      result = true;
+    } else if (window.TouchEvent || ('ontouchstart' in window)) {
+      // last resort - check for exposed touch events API / event handler
+      result = true;
+    }
+  }
+  return result;
 }