add music track names to info block close #100

server/scripts/modules/media.mjs

@@ -79,6 +79,7 @@ const startMedia = async () => {
 	} else {
 		try {
 			await player.play();
+			setTrackName(playlist.availableFiles[currentTrack]);
 		} catch (e) {
 			// report the error
 			console.error('Couldn\'t play music');
@@ -86,6 +87,7 @@ const startMedia = async () => {
 			// set state back to not playing for good UI experience
 			mediaPlaying.value = false;
 			stateChanged();
+			setTrackName('Not playing');
 		}
 	}
 };
@@ -93,6 +95,7 @@ const startMedia = async () => {
 const stopMedia = () => {
 	if (!player) return;
 	player.pause();
+	setTrackName('Not playing');
 };
 
 const stateChanged = () => {
@@ -140,6 +143,7 @@ const initializePlayer = () => {
 
 	// get the first file
 	player.src = `music/${playlist.availableFiles[currentTrack]}`;
+	setTrackName(playlist.availableFiles[currentTrack]);
 	player.type = 'audio/mpeg';
 };
 
@@ -160,6 +164,12 @@ const playerEnded = () => {
 	}
 	// update the player source
 	player.src = `music/${playlist.availableFiles[currentTrack]}`;
+	setTrackName(playlist.availableFiles[currentTrack]);
+};
+
+const setTrackName = (fileName) => {
+	const trackName = fileName.replace(/\.mp3/gi, '').replace(/(_-)/gi, '');
+	document.getElementById('musicTrack').innerHTML = trackName;
 };
 
 export {

views/index.ejs

@@ -186,6 +186,7 @@
 		Station Id: <span id="spanStationId"></span><br />
 		Radar Id: <span id="spanRadarId"></span><br />
 		Zone Id: <span id="spanZoneId"></span><br />
+		Music: <span id="musicTrack">Not playing</span><br />
 		Ws4kp Version: <span><%- version %></span>
 	</div>