[Spotify Player] Hide artist's name in menu bar player

extensions/spotify-player/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Spotify Player Changelog
 
+## [Artist Name Visibility Option] - 2025-02-07
+
+- Added the option to hide the artist's name in the Menu Bar Player.
+
 ## [Fix Your Library] - 2025-02-04
 
 - Fix a possibly null issue from `getMeAlbums` API.

extensions/spotify-player/package.json

@@ -30,7 +30,8 @@
     "thomaslombart",
     "rhesamu",
     "themitpatel",
-    "litomore"
+    "litomore",
+    "enneemme"
   ],
   "pastContributors": [
     "bkeys818"
@@ -48,10 +49,9 @@
   "preferences": [
     {
       "name": "closeWindowOnAction",
-      "title": "Close window on action",
-      "description": "Close the Raycast window after performing an action",
+      "description": "If enabled, the Raycast window will be closed after performing an action",
       "type": "checkbox",
-      "label": "Enabled",
+      "label": "Close window on action",
       "default": false,
       "required": false
     }
@@ -173,20 +173,36 @@
       "mode": "menu-bar",
       "interval": "10s",
       "preferences": [
+        {
+          "name": "hideIconWhenIdle",
+          "description": "If enabled, the icon in the Menu Bar will be hidden when Spotify is not running or when nothing is playing",
+          "type": "checkbox",
+          "label": "Hide icon when idle",
+          "default": false,
+          "required": false
+        },
+        {
+          "name": "hideArtistName",
+          "description": "If enabled, the artist's name will be hidden in the Menu Bar",
+          "type": "checkbox",
+          "label": "Hide artist's name",
+          "default": false,
+          "required": false
+        },
         {
           "name": "maxTextLength",
-          "title": "Maximum text length",
-          "description": "Maximum number of characters to show. If left empty, it defaults to 30",
+          "title": "Now Playing Text Length",
+          "description": "Maximum number of characters to show for the currently playing track in the menu bar. Leave empty to use default (30 characters)",
           "type": "textfield",
-          "default": "20",
+          "default": "30",
           "required": false
         },
         {
           "name": "iconType",
-          "title": "Icon type",
-          "description": "Choose between the default Spotify icon, or the cover image of the current track or episode",
+          "title": "Menu Bar Icon",
+          "description": "Choose between the default Spotify icon, or the cover image of the current track or episode.",
           "type": "dropdown",
-          "default": "spotify",
+          "default": "spotify-icon",
           "data": [
             {
               "title": "Spotify Icon",
@@ -198,15 +214,6 @@
             }
           ],
           "required": false
-        },
-        {
-          "name": "hideIconWhenIdle",
-          "title": "Hide icon when idle",
-          "description": "Hide the icon in the Menu Bar when Spotify is not running or when nothing is playing",
-          "type": "checkbox",
-          "label": "Enabled",
-          "default": false,
-          "required": false
         }
       ]
     },
@@ -449,7 +456,7 @@
     "@types/node": "20.14.10",
     "@types/react": "^18.3.3",
     "eslint": "^8.53.0",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.2",
     "typescript": "^5.5.3"
   },
   "scripts": {

extensions/spotify-player/src/helpers/formatTitle.ts

@@ -1,11 +1,26 @@
-export function formatTitle(title: string, max: number, showEllipsis = true) {
+type FormatTitleParams = {
+  name?: string;
+  artistName?: string;
+  hideArtistName?: boolean;
+  maxTextLength?: string;
+};
+
+export function formatTitle({ name, artistName, hideArtistName, maxTextLength }: FormatTitleParams) {
+  const max = maxTextLength ? Number(maxTextLength) : 30;
+
   if (max === 0) {
     return "";
   }
 
+  if (!name || !artistName) {
+    return "";
+  }
+
+  const title = hideArtistName ? name : `${name} · ${artistName}`;
+
   if (title.length <= max) {
     return title;
   }
 
-  return title.substring(0, max).trim() + (showEllipsis ? "…" : "");
+  return title.substring(0, max).trim() + "…";
 }

extensions/spotify-player/src/nowPlayingMenuBar.tsx

@@ -37,7 +37,7 @@ import { getErrorMessage } from "./helpers/getError";
 import { useSpotifyAppData } from "./hooks/useSpotifyAppData";
 
 function NowPlayingMenuBarCommand({ launchType }: LaunchProps) {
-  const preferences = getPreferenceValues<Preferences.NowPlayingMenuBar>();
+  const { hideArtistName, maxTextLength, iconType } = getPreferenceValues<Preferences.NowPlayingMenuBar>();
 
   const [uriFromSpotify, setUriFromSpotify] = useCachedState<string | undefined>("currentlyPlayingUri", undefined);
   const shouldExecute = React.useRef<boolean>(false);
@@ -102,7 +102,7 @@ function NowPlayingMenuBarCommand({ launchType }: LaunchProps) {
     const { artists, id: trackId, album } = item as TrackObject;
     const artistName = artists?.[0]?.name;
     const artistId = artists?.[0]?.id;
-    title = `${name} · ${artistName}`;
+    title = formatTitle({ name, artistName, hideArtistName, maxTextLength });
     // Get the image with the lowest resolution
     coverImageUrl = album?.images.slice(-1)[0]?.url || "";
 
@@ -188,22 +188,19 @@ function NowPlayingMenuBarCommand({ launchType }: LaunchProps) {
   } else {
     const { show } = item as EpisodeObject;
     const showName = show.name;
-    title = `${name} · ${showName}`;
+    title = formatTitle({ name, artistName: showName, hideArtistName, maxTextLength });
     coverImageUrl = show.images.slice(-1)[0]?.url || "";
   }
 
   return (
     <MenuBarExtra
       isLoading={spotifyAppDataIsLoading || currentlyPlayingIsLoading || currentlyPlayingIsLoading}
       icon={
-        preferences.iconType === "cover-image" && coverImageUrl
-          ? {
-              source: coverImageUrl,
-              mask: Image.Mask.RoundedRectangle,
-            }
+        iconType === "cover-image" && coverImageUrl
+          ? { source: coverImageUrl, mask: Image.Mask.RoundedRectangle }
           : { source: { dark: "menu-icon-dark.svg", light: "menu-icon-light.svg" } }
       }
-      title={formatTitle(title, Number(preferences.maxTextLength))}
+      title={title}
       tooltip={title}
     >
       {isPlaying && (