Acrylic Streamer/DAC Web Controller

Built by: Dean Cacioppo

        } else {             connectionStatusEl.textContent = `Failed to connect to ${deviceIp}. Check IP and network.`;             connectionStatusEl.className = ‘text-sm mt-2 text-red-500’;             mainControlsDiv.classList.add(‘hidden’);         }     });     // Generic API buttons     document.querySelectorAll(‘.api-button’).forEach(button => {         button.classList.add(‘text-white’, ‘font-semibold’, ‘py-2’, ‘px-3′, ’rounded-md’, ‘shadow-sm’, ‘transition’, ‘duration-150’, ‘ease-in-out’, ‘text-sm’);         // Specific styling for these buttons is already in their class list (bg-color, hover:bg-color)         const command = button.dataset.command;         if (command) { // Ensure it’s a command button             button.addEventListener(‘click’, () => sendApiRequest(command));         }     });     refreshStatusBtn.addEventListener(‘click’, async () => {         const status = await sendApiRequest(‘getPlayerStatus’);         if (status) updatePlayerStatusUI(status);     });     volumeSlider.addEventListener(‘change’, () => { // ‘input’ for live update, ‘change’ for on release         const volume = volumeSlider.value;         volumeValueEl.textContent = volume;         sendApiRequest(`setPlayerCmd:vol:${volume}`);     });     volumeSlider.addEventListener(‘input’, () => { // Update display while sliding         volumeValueEl.textContent = volumeSlider.value;     });     muteToggleBtn.addEventListener(‘click’, () => {         if (!currentPlayerStatus) {             logMessage(‘Player status not available to toggle mute.’, ‘warn’);             return;         }         const command = currentPlayerStatus.mute === 1 ? ‘setPlayerCmd:mute:0’ : ‘setPlayerCmd:mute:1’;         sendApiRequest(command);     });     setInputSourceBtn.addEventListener(‘click’, () => {         const selectedSource = inputSourceSelect.value;         if (selectedSource) {             sendApiRequest(`setPlayerCmd:switchmode:${selectedSource}`);         } else {             logMessage(‘No input source selected.’, ‘warn’);         }     });     playUrlBtn.addEventListener(‘click’, () => {         const urlToPlay = playUrlInput.value.trim();         if (urlToPlay) {             // The API doc shows the URL directly in the command string.             // If URLs have special chars, they might need encoding, but API might handle it.             // Let’s assume direct for now as per doc: setPlayerCmd:play:http://…             sendApiRequest(`setPlayerCmd:play:${urlToPlay}`);         } else {             logMessage(‘Please enter a URL to play.’, ‘warn’);         }     });     setPlayModeBtn.addEventListener(‘click’, () => {         const selectedMode = playModeSelect.value;         sendApiRequest(`setPlayerCmd:playmode:${selectedMode}`);     });     clearResponseBtn.addEventListener(‘click’, () => {         jsonResponseEl.textContent = ”;     });     clearLogBtn.addEventListener(‘click’, () => {         logMessagesEl.innerHTML = ”;     });     // Initial state     logMessage(‘Arylic Controller GUI initialized. Enter device IP and connect.’);     // Try to load IP from localStorage if previously set     const savedIp = localStorage.getItem(‘arylicDeviceIp’);     if (savedIp) {         deviceIpInput.value = savedIp;         logMessage(`Loaded saved IP: ${savedIp}`);     }     // Save IP on successful connect     connectDeviceBtn.addEventListener(‘click’, () => {         if (deviceIp) { // deviceIp is set on successful connection attempt             localStorage.setItem(‘arylicDeviceIp’, deviceIp);         }     });