Radioplayer-with-Presets/script.js

document.addEventListener('DOMContentLoaded', function() {
    const presetContainer = document.getElementById('preset-container');
    const addNewPresetButton = document.getElementById('add-new-preset');
    const newPresetNameInput = document.getElementById('new-preset-name');
    const newPresetUrlInput = document.getElementById('new-preset-url');
    let currentPlayingItem = null; // Variable zum Speichern des aktuell spielenden Elements

    const exportButton = document.getElementById('export-button');
    const importButton = document.getElementById('import-button');
    exportButton.addEventListener('click', exportPresets);
    importButton.addEventListener('click', importPresets);

    loadExistingPresets();

    new Sortable(presetContainer, {
        animation: 250,
        ghostClass: 'ghost',
        onEnd: () => {
            savePresetOrder();
        }
    });

    addNewPresetButton.addEventListener('click', () => {
        const presetName = newPresetNameInput.value.trim();
        const presetUrl = newPresetUrlInput.value.trim();

        if (presetName && presetUrl) {
            addNewPreset(presetName, presetUrl);
            savePresetToLocalStorage(presetName, presetUrl);
            newPresetNameInput.value = '';
            newPresetUrlInput.value = '';
        } else {
            alert("Bitte geben Sie einen Namen und eine URL ein.");
        }
    });

    function loadExistingPresets() {
        const presets = JSON.parse(localStorage.getItem('presets')) || [];
        presets.forEach(preset => {
            addNewPreset(preset.name, preset.url);
        });
    }

    function addNewPreset(name, url) {
        const presetItem = document.createElement('div');
        presetItem.classList.add('preset-item');
        presetItem.dataset.streamUrl = url;

        presetItem.innerHTML = `
            <h3>${name}</h3>
            <div class="button-container">
              <button class="edit-button">Bearbeiten</button>
              <button class="delete-button">Löschen</button>
            </div>
        `;

        presetItem.querySelector('.edit-button').addEventListener('click', (event) => {
            event.stopPropagation();
            editPreset(presetItem, name, url);
        });

        presetItem.querySelector('.delete-button').addEventListener('click', (event) => {
            event.stopPropagation();
            deletePreset(presetItem);
        });

        presetItem.addEventListener('click', (event) => {
            if (event.target !== presetItem.querySelector('.edit-button') && event.target !== presetItem.querySelector('.delete-button')) {
                playStream(url, presetItem); // Übergabe des presetItem
            }
        });

        presetContainer.appendChild(presetItem);
    }

    function editPreset(item, currentName, currentUrl) {
        const newName = prompt("Neuer Name:", currentName);
        const newUrl = prompt("Neue URL:", currentUrl);

        if (newName !== null && newUrl !== null) {
            item.querySelector('h3').textContent = newName;
            item.dataset.streamUrl = newUrl;
            savePresetOrder();
        }
    }

    function deletePreset(item) {
        if (confirm("Möchten Sie diesen Sender wirklich löschen?")) {
            presetContainer.removeChild(item);
            savePresetOrder();
        }
    }

    function savePresetToLocalStorage(name, url) {
        const presets = JSON.parse(localStorage.getItem('presets')) || [];
        presets.push({ name, url });
        localStorage.setItem('presets', JSON.stringify(presets));
    }

    function savePresetOrder() {
        const presetItems = Array.from(presetContainer.children);
        const presets = presetItems.map(item => ({
            name: item.querySelector('h3').textContent,
            url: item.dataset.streamUrl
        }));
        localStorage.setItem('presets', JSON.stringify(presets));
    }

    function playStream(url, item) {
      // Stoppe den aktuell laufenden Stream (falls vorhanden)
        if (currentPlayingItem) {
            const currentAudio = currentPlayingItem.querySelector('audio');
            if (currentAudio) {
                currentAudio.pause();
                currentAudio.remove();
            }
            currentPlayingItem.classList.remove('playing');
        }

        const audioElement = new Audio(url);
        audioElement.autoplay = true;
        audioElement.loop = true;
        audioElement.volume = 0.5;
        audioElement.onerror = function() {
            alert('Fehler beim Laden des Streams: ' + url);
        };
        item.appendChild(audioElement); // Füge das Audio-Element zum Preset-Item hinzu
        item.classList.add('playing');
		
        currentPlayingItem = item; // Aktualisiere das aktuell spielende Element
		currentStationName.textContent = item.querySelector('h3').textContent;
    }

    function exportPresets() {
        const presets = JSON.parse(localStorage.getItem('presets')) || [];
        const json = JSON.stringify(presets, null, 2);

        const blob = new Blob([json], { type: 'application/json' });
        const url = URL.createObjectURL(blob);

        const a = document.createElement('a');
        a.href = url;
        a.download = 'webradio_presets.json';
        a.click();

        URL.revokeObjectURL(url);
    }
    
    function importPresets() {
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = '.json';
        input.onchange = (event) => {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    try {
                        const importedPresets = JSON.parse(e.target.result);
                        if (Array.isArray(importedPresets)) {
                            localStorage.setItem('presets', JSON.stringify(importedPresets));
                            presetContainer.innerHTML = '';
                            importedPresets.forEach(preset => addNewPreset(preset.name, preset.url));
                            alert("Presets erfolgreich importiert.");
                        } else {
                            alert("Ungültiges Dateiformat. Bitte eine JSON-Datei importieren.");
                        }
                    } catch (error) {
                        alert("Fehler beim Importieren der Presets: " + error);
                    }
                };
                reader.readAsText(file);
            }
        };
        input.click();
    }
    
	const stopButton = document.querySelector('.stop-button');
    const progressBar = document.getElementById('progress-bar');
    const currentStationName = document.getElementById('current-station-name');

	stopButton.addEventListener('click', () => {
	    // Stoppe den aktuellen Stream und setze currentPlayingItem zurück
	    if (currentPlayingItem) {
	        const audioElement = currentPlayingItem.querySelector('audio');
	        audioElement.pause();
	        audioElement.currentTime = 0;
	        currentPlayingItem.classList.remove('playing');
	        currentPlayingItem = null;
	        currentStationName.textContent = 'Kein Sender ausgewählt.';
	    }
	});

});