From 309762f19617d5ffc63c119f3311a9ea525a0e22 Mon Sep 17 00:00:00 2001
From: Borewit <Borewit@users.noreply.github.com>
Date: Thu, 17 Jul 2025 15:54:27 +0200
Subject: [PATCH] Use more verbose queue track names

In addition to the track title, include:
- track number
- artist

If the title is not defined, use the file path
---
 src/index.js   | 18 +++++++++++++++++-
 src/styles.css |  4 ++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/index.js b/src/index.js
index 86a90f9..354404a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1171,13 +1171,25 @@ function addBatchToPlayQueue( files, autoplay = false ) {
 	});
 }
 
+function extractFileNameFromPath(path) {
+	if (typeof path !== 'string') return '';
+
+	const lastSlashIndex = path.lastIndexOf('/');
+	const lastDotIndex = path.lastIndexOf('.');
+
+	const start = lastSlashIndex >= 0 ? lastSlashIndex + 1 : 0;
+	const end = lastDotIndex > start ? lastDotIndex : path.length;
+
+	return path.substring(start, end);
+}
+
 /**
  * Add audio metadata to a playlist item or audio element
  */
 function addMetadata( metadata, target ) {
 	const trackData  = target.dataset,
 		  sourceData = metadata.dataset,
-		  { album, artist, picture, title, year } = metadata.common || {},
+		  { album, artist, picture, title, year, track } = metadata.common || {},
 		  { bitrate, bitsPerSample, codec, codecProfile, container,
 		    duration, lossless, numberOfChannels, sampleRate } = metadata.format || {};
 
@@ -1189,6 +1201,10 @@ function addMetadata( metadata, target ) {
 		trackData.title  = title || trackData.title;
 		trackData.album  = album ? album + ( year ? ' (' + year + ')' : '' ) : trackData.album;
 		trackData.codec  = codec || container ? ( codec || container ) + ' (' + numberOfChannels + 'ch)' : trackData.codec;
+		trackData.trackNumber = track.no || trackData.trackNumber;
+		trackData.fullTrackName = trackData._title && trackData.title.length > 0 ?
+			`${trackData.trackNumber ? (trackData.trackNumber + ': ') : ''} ${trackData.title} ${trackData.title} - ${trackData.artist}` :
+			extractFileNameFromPath(trackData.file);
 
 		const khz = sampleRate ? Math.round( sampleRate / 1000 ) + 'kHz' : '';
 
diff --git a/src/styles.css b/src/styles.css
index 75b6eef..7d8bd7e 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1178,7 +1178,7 @@ kbd.wide {
 	position: relative;
 }
 #playlist li::before {
-	content: attr(data-title);
+	content: attr(data-full-track-name);
 	display: inline-block;
 	overflow: hidden;
 	vertical-align: text-bottom;
@@ -1193,7 +1193,7 @@ kbd.wide {
 	padding-left: .25em;
 }
 #playlist li.current::before {
-	content: "\25b8"" " attr(data-title);
+	content: "\25b8"" " attr(data-full-track-name);
 }
 
 #console .error {