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

Author: Borewit

src/index.js

@@ -1170,13 +1170,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 || {};
 
@@ -1188,6 +1200,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' : '';
 

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 {