feat: play/pause button in the RFID tab for the highlighted file

Add a play/pause button next to the file-tree controls in the RFID tab.
It is enabled when a playable node (audio file, playlist or folder) is
highlighted and plays it via /exploreraudio (folder -> playmode 5,
playlist -> 11, single file -> 1), so a file can be played with one
click instead of the right-click context menu. While playback is running
the button mirrors the live play/pause state and toggles pause/resume.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: fhirschmann

README.md

@@ -68,6 +68,7 @@ neon logo that doubles as the SVG favicon ([`8d9725c`](../../commit/8d9725c)):
 | Full backup: export/import of all settings + RFID assignments as JSON, WiFi credentials optional | [`7f2e4ae`](../../commit/7f2e4ae) |
 | Equalizer profiles: dropdown presets (Flat / Music / Audiobook-Speech / Deep voices / Custom) on top of the 3-band tone control; speech presets cut bass and lift mids/highs so deep narrator voices stay intelligible, persisted in NVS. Profiles can also be assigned per file or directory (right-click in the file browser) — e.g. set the speech profile for all Bibi Blocksberg episodes at once. The active profile can be cycled with the bindable command **154** (button/RFID modifier) and set/reported via the MQTT topic `equalizer` (`flat`/`music`/`speech`/`voiceBoost`) | [`300b9dd`](../../commit/300b9dd) |
 | Blinking "OK" indicator next to the battery replaces the generic "action successful" toast | [`0870ccc`](../../commit/0870ccc) |
+| Play/pause button in the RFID tab plays the highlighted file/folder (and pauses running playback) | [`8d3d196`](../../commit/8d3d196) |
 | SD card cleanup: removes macOS metadata (`.DS_Store`, `._*`, Spotlight/Trashes) with one click | [`5f38a51`](../../commit/5f38a51) |
 | Live log: the log dialog refreshes every 2 s and follows the end of the log | [`d326faa`](../../commit/d326faa) |
 | Drag & drop: upload files by dropping them from the file manager onto the file tree | [`e4972fe`](../../commit/e4972fe) |

html/management.html

@@ -1521,6 +1521,9 @@ <h5 class="modal-title" data-i18n="tools.nvs.erase.title"></h5>
 								style="height:38px; width: 200px; border-bottom-left-radius: 0; border-top-left-radius: 0;"
 								id="filetreesearch" data-i18n="[placeholder]files.search.placeholder"
 								onsearch="searchFiles($(this).val())" onkeyup="searchFiles($(this).val())">
+							<button id="rfidPlayBtn" class="btn btn-primary float-end" onclick="playSelectedNode()"
+								disabled data-i18n="[title]files.context.play"><span id="rfidPlayIcon"
+									class="fas fa-play"></span></button>
 							<button id="cleansd" class="btn btn-warning float-end" data-bs-toggle="modal"
 								data-bs-target="#cleanSdModal" data-i18n="[title]files.clean.button"><span
 									class="fas fa-broom"></span></button>
@@ -2609,6 +2612,53 @@ <h5 class="modal-title" data-i18n="tools.nvs.erase.title"></h5>
 		}
 		/* File Explorer functions begin*/
 		var lastSelectedNodePath = "";
+		// currently highlighted playable node in the file tree (for the RFID-tab play button)
+		var rfidSelectedNode = null;
+		// mirror of the live playback state (false = paused/idle, true = playing)
+		var rfidIsPlaying = false;
+		// path that was last started via the RFID-tab play button
+		var rfidPlayingPath = null;
+
+		// True when the highlighted node is exactly the file that was started here.
+		function rfidSelectionIsCurrent() {
+			return rfidSelectedNode && rfidPlayingPath && rfidSelectedNode.path === rfidPlayingPath;
+		}
+
+		// The button is a play button by default; it only turns into a pause button
+		// while the highlighted file is the one actually playing. Selecting another
+		// file turns it back into a play button.
+		function updateRfidPlayButton() {
+			var btn = document.getElementById('rfidPlayBtn');
+			if (!btn) return;
+			var icon = document.getElementById('rfidPlayIcon');
+			if (rfidSelectionIsCurrent() && rfidIsPlaying) {
+				icon.className = 'fas fa-pause';
+				btn.disabled = false;
+			} else {
+				icon.className = 'fas fa-play';
+				btn.disabled = !rfidSelectedNode;
+			}
+		}
+
+		// Click handler for the RFID-tab play button: when the highlighted file is the
+		// current one, toggle pause/resume; otherwise start playback of the highlighted
+		// file/folder/playlist.
+		function playSelectedNode() {
+			if (!rfidSelectedNode) return;
+			if (rfidSelectionIsCurrent()) {
+				sendControl(170); // toggle pause/resume of the running playback
+				return;
+			}
+			var playMode = 1;
+			if (rfidSelectedNode.directory) {
+				playMode = 5;
+			} else if ((/\.(m3u|m3u8|asx|pls)$/i).test(rfidSelectedNode.path)) {
+				playMode = 11;
+			}
+			postData("http://" + host + "/exploreraudio?path=" + encodeURIComponent(rfidSelectedNode.path) + "&playmode=" + playMode);
+			rfidPlayingPath = rfidSelectedNode.path;
+		}
+
 		$('#explorerTree').on('select_node.jstree', function (e, data) {
 			$('input[name=fileOrUrl]').val(data.node.data.path);
 			if (ActiveSubTab !== 'rfid-music-tab') {
@@ -2624,6 +2674,13 @@ <h5 class="modal-title" data-i18n="tools.nvs.erase.title"></h5>
 				$('.option-folder').hide();
 				$('#playMode option').removeAttr('selected').filter('[value=1]').attr('selected', true);
 			}
+			// remember the highlighted node so the RFID-tab play button can play it
+			if (["folder", "audio", "playlist"].includes(data.node.type)) {
+				rfidSelectedNode = { path: data.node.data.path, directory: data.node.data.directory, type: data.node.type };
+			} else {
+				rfidSelectedNode = null;
+			}
+			updateRfidPlayButton();
 			if (lastSelectedNodePath != data.node.data.path) {
 				if (data.node.data.directory) {
 					var ref = $('#explorerTree').jstree(true),
@@ -3408,6 +3465,9 @@ <h5 class="modal-title" data-i18n="tools.nvs.erase.title"></h5>
 					} else {
 						btnTrackPlayPause.innerHTML = '<i id="ico-play-pause" class="fas fa-lg fa-pause"></i>';
 					}
+					// mirror playback state onto the RFID-tab play/pause button
+					rfidIsPlaying = !socketMsg.trackinfo.pausePlay;
+					updateRfidPlayButton();
 					var btnTrackFirst = document.getElementById('nav-btn-first');
 					var btnTrackPrev = document.getElementById('nav-btn-prev');
 					if (socketMsg.trackinfo.currentTrackNumber <= 1) {