Update main.js
This commit is contained in:
simonpipe
parent
e90268670d
commit
a9fe23cf5e
1 changed files with 76 additions and 210 deletions
262
main.js
262
main.js
|
|
@ -1,251 +1,117 @@
|
|||
// Public Domain - Hauptlogik des Radioplayers (Schaltzentrale)
|
||||
|
||||
// main.js
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// --- UI ELEMENTE ---
|
||||
const presetContainer = document.getElementById('preset-container');
|
||||
const stopButton = document.querySelector('.stop-button');
|
||||
const currentStationName = document.getElementById('current-station-name');
|
||||
const presetModal = document.getElementById('preset-modal');
|
||||
const tableBody = document.querySelector('#sortable-tbody');
|
||||
|
||||
let currentSound = null;
|
||||
|
||||
// --- INITIALISIERUNG ---
|
||||
if (window.UI) window.UI.initializeFooter();
|
||||
initializeEventListeners();
|
||||
window.UI.initializeFooter();
|
||||
|
||||
// Manager verknüpfen
|
||||
// Wichtig: Hier wird die Stop-Funktion an den Timer übergeben
|
||||
if (window.SleepTimer) {
|
||||
window.SleepTimer.init(() => stopPlayback());
|
||||
}
|
||||
|
||||
if (window.PresetManager) {
|
||||
window.PresetManager.load((loadedPresets) => {
|
||||
displayPresets(loadedPresets);
|
||||
window.PresetManager.load((presets) => {
|
||||
displayPresets(presets);
|
||||
initSortable();
|
||||
});
|
||||
}
|
||||
|
||||
// --- EVENT LISTENER ---
|
||||
function initializeEventListeners() {
|
||||
// Stop Button
|
||||
if (stopButton) {
|
||||
stopButton.onclick = stopPlayback;
|
||||
}
|
||||
// --- EVENT LISTENER (HAUPTSEITE) ---
|
||||
if (stopButton) stopButton.onclick = stopPlayback;
|
||||
|
||||
// Preset Modal öffnen
|
||||
const editBtn = document.getElementById('edit-presets-button');
|
||||
if (editBtn) {
|
||||
editBtn.onclick = openPresetModal;
|
||||
}
|
||||
|
||||
// Sleep Timer Modal öffnen
|
||||
const sleepBtn = document.getElementById('open-sleep-timer-modal');
|
||||
if (sleepBtn) {
|
||||
sleepBtn.onclick = openSleepModal;
|
||||
}
|
||||
|
||||
// Sleep Timer Modal schließen (X-Button)
|
||||
const closeSleepBtn = document.getElementById('close-sleep-timer-modal');
|
||||
if (closeSleepBtn) {
|
||||
closeSleepBtn.onclick = () => {
|
||||
const sm = document.getElementById('sleep-timer-modal');
|
||||
sm.classList.add('hidden');
|
||||
sm.style.display = 'none';
|
||||
document.getElementById('edit-presets-button').onclick = () => {
|
||||
window.UI.openModal('preset-modal');
|
||||
window.PresetUI.renderTable();
|
||||
};
|
||||
}
|
||||
|
||||
// Sleep Timer wirklich ausschalten
|
||||
const offSleepBtn = document.getElementById('off-sleep-timer-modal');
|
||||
if (offSleepBtn) {
|
||||
offSleepBtn.onclick = () => {
|
||||
document.getElementById('open-sleep-timer-modal').onclick = () => {
|
||||
window.UI.openModal('sleep-timer-modal');
|
||||
if (window.SleepTimer) window.SleepTimer.updateButtonUI();
|
||||
};
|
||||
|
||||
// --- SLEEPTIMER LOGIK IM MODAL ---
|
||||
document.querySelectorAll('.time-option').forEach(button => {
|
||||
button.onclick = () => {
|
||||
const ms = parseInt(button.getAttribute('data-time'));
|
||||
const minutes = ms / 60000;
|
||||
if (window.SleepTimer) {
|
||||
window.SleepTimer.clear(); // Stoppt den Timeout und resettet die UI
|
||||
window.SleepTimer.setTimer(minutes);
|
||||
window.UI.closeModal('sleep-timer-modal');
|
||||
}
|
||||
const sm = document.getElementById('sleep-timer-modal');
|
||||
if (sm) {
|
||||
sm.classList.add('hidden');
|
||||
sm.style.display = 'none';
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Zeit-Optionen im Sleep Timer
|
||||
document.querySelectorAll('.time-option').forEach(btn => {
|
||||
btn.onclick = () => {
|
||||
const minutes = parseInt(btn.getAttribute('data-time')) / 60000;
|
||||
window.SleepTimer.start(minutes);
|
||||
const sm = document.getElementById('sleep-timer-modal');
|
||||
sm.classList.add('hidden');
|
||||
sm.style.display = 'none';
|
||||
};
|
||||
});
|
||||
|
||||
document.getElementById('off-sleep-timer-modal').onclick = () => {
|
||||
if (window.SleepTimer) {
|
||||
window.SleepTimer.clear();
|
||||
window.UI.closeModal('sleep-timer-modal');
|
||||
}
|
||||
};
|
||||
|
||||
// --- PLAYER LOGIK ---
|
||||
function playStream(url, item) {
|
||||
document.getElementById('close-sleep-timer-modal').onclick = () => {
|
||||
window.UI.closeModal('sleep-timer-modal');
|
||||
};
|
||||
|
||||
// --- PLAYER FUNKTIONEN ---
|
||||
function playStream(url, name) {
|
||||
stopPlayback();
|
||||
if (window.MetaHandler) window.MetaHandler.stop();
|
||||
|
||||
currentSound = new Howl({
|
||||
src: [url],
|
||||
html5: true,
|
||||
volume: 0.5,
|
||||
// In der playStream Funktion innerhalb von onplay:
|
||||
onplay: () => {
|
||||
stopButton.classList.remove('hidden');
|
||||
const stationName = item.querySelector('h3').textContent;
|
||||
if (window.UI) window.UI.updateDocumentTitle(stationName);
|
||||
|
||||
// Wir setzen das Icon für den Sender
|
||||
currentStationName.innerHTML = `<i class="fa-solid fa-tower-broadcast"></i> ${stationName}`;
|
||||
|
||||
window.UI.updateDocumentTitle(name);
|
||||
const iconHtml = '<i class="fa-solid fa-broadcast-tower"></i> ';
|
||||
currentStationName.innerHTML = iconHtml + name;
|
||||
if (window.MetaHandler) window.MetaHandler.start(url);
|
||||
},
|
||||
onstop: () => {
|
||||
stopButton.classList.add('hidden');
|
||||
currentStationName.textContent = 'Wähle einen Sender aus';
|
||||
if (window.UI) window.UI.updateDocumentTitle('');
|
||||
if (window.MetaHandler) window.MetaHandler.stop();
|
||||
}
|
||||
});
|
||||
currentSound.play();
|
||||
}
|
||||
|
||||
function stopPlayback() {
|
||||
if (currentSound) {
|
||||
currentSound.stop();
|
||||
currentSound = null;
|
||||
}
|
||||
if (currentSound) { currentSound.stop(); currentSound = null; }
|
||||
stopButton.classList.add('hidden');
|
||||
currentStationName.innerHTML = 'Wähle einen Sender aus';
|
||||
window.UI.updateDocumentTitle('');
|
||||
if (window.MetaHandler) window.MetaHandler.stop();
|
||||
}
|
||||
|
||||
// --- PRESET UI ---
|
||||
// --- UI RENDERING ---
|
||||
function displayPresets(presets) {
|
||||
presetContainer.innerHTML = '';
|
||||
presets.forEach(preset => {
|
||||
const presetItem = document.createElement('div');
|
||||
presetItem.classList.add('preset-item');
|
||||
presetItem.innerHTML = `<h3>${preset.name}</h3>`;
|
||||
presetItem.onclick = () => playStream(preset.url, presetItem);
|
||||
presetContainer.appendChild(presetItem);
|
||||
if (!presets || presets.length === 0) {
|
||||
presetContainer.innerHTML = '<div style="grid-column: 1/-1; padding: 40px; color: #888; border: 2px dashed #ddd; border-radius: 10px;"><p>Keine Sender vorhanden.</p></div>';
|
||||
return;
|
||||
}
|
||||
presets.forEach(p => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'preset-item';
|
||||
div.innerHTML = `<h3>${p.name}</h3>`;
|
||||
div.onclick = () => playStream(p.url, p.name);
|
||||
presetContainer.appendChild(div);
|
||||
});
|
||||
}
|
||||
|
||||
function renderPresetsTable() {
|
||||
if (!tableBody) return;
|
||||
tableBody.innerHTML = '';
|
||||
window.PresetManager.presets.forEach((preset, index) => {
|
||||
const row = document.createElement('tr');
|
||||
row.setAttribute('data-index', index);
|
||||
row.innerHTML = `
|
||||
<td class="drag-handle">☰</td>
|
||||
<td><input type="text" value="${preset.name}" onchange="changeName(${index}, this.value)"></td>
|
||||
<td><input type="text" value="${preset.url}" onchange="changeURL(${index}, this.value)"></td>
|
||||
<td><button class="delete-btn" onclick="deletePreset(${index})"><i class="fas fa-trash-alt"></i></button></td>
|
||||
`;
|
||||
tableBody.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
// --- MODAL WRAPPER ---
|
||||
function openPresetModal() {
|
||||
if (!presetModal) return;
|
||||
presetModal.classList.remove('hidden');
|
||||
presetModal.style.display = 'block';
|
||||
renderPresetsTable();
|
||||
if (window.PresetManager) window.PresetManager.generateExportCode();
|
||||
}
|
||||
|
||||
function openSleepModal() {
|
||||
const sm = document.getElementById('sleep-timer-modal');
|
||||
if (sm) {
|
||||
sm.classList.remove('hidden');
|
||||
sm.style.display = 'block';
|
||||
if (window.SleepTimer) window.SleepTimer.updateButtonUI();
|
||||
}
|
||||
}
|
||||
|
||||
// --- GLOBALE HELFER (für HTML onclicks & Manager) ---
|
||||
window.closeModal = () => {
|
||||
if (presetModal) {
|
||||
presetModal.classList.add('hidden');
|
||||
presetModal.style.display = 'none';
|
||||
}
|
||||
};
|
||||
|
||||
window.addPreset = () => {
|
||||
window.PresetManager.presets.push({ name: 'Neuer Sender', url: '' });
|
||||
renderPresetsTable();
|
||||
};
|
||||
|
||||
window.deletePreset = (index) => {
|
||||
window.UI.showConfirm("Löschen", "Sender wirklich entfernen?", (conf) => {
|
||||
if (conf) {
|
||||
window.PresetManager.presets.splice(index, 1);
|
||||
renderPresetsTable();
|
||||
window.PresetManager.generateExportCode();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
window.saveAndClose = () => {
|
||||
window.PresetManager.save();
|
||||
location.reload();
|
||||
};
|
||||
|
||||
window.changeName = (i, v) => {
|
||||
window.PresetManager.presets[i].name = v;
|
||||
window.PresetManager.generateExportCode();
|
||||
};
|
||||
|
||||
window.changeURL = (i, v) => {
|
||||
window.PresetManager.presets[i].url = v;
|
||||
window.PresetManager.generateExportCode();
|
||||
};
|
||||
|
||||
window.exportPreset = () => window.PresetManager.exportToFile();
|
||||
|
||||
window.importPreset = () => {
|
||||
window.UI.showConfirm("Vorsicht", "Alle Sender werden überschrieben!", (conf) => {
|
||||
if (conf) {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = 'application/json';
|
||||
input.onchange = e => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = ev => {
|
||||
try {
|
||||
window.PresetManager.presets = JSON.parse(ev.target.result);
|
||||
window.PresetManager.save();
|
||||
location.reload();
|
||||
} catch (err) { window.UI.showAlert("Fehler", "Ungültige Datei."); }
|
||||
};
|
||||
reader.readAsText(e.target.files[0]);
|
||||
};
|
||||
input.click();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
window.importFromString = () => {
|
||||
const field = document.getElementById('import-string-field');
|
||||
const code = field ? field.value.trim() : "";
|
||||
if (!code) return window.UI.showAlert("Fehler", "Bitte Code einfügen.");
|
||||
window.UI.showConfirm("Vorsicht", "Alle Sender werden überschrieben!", (conf) => {
|
||||
if (conf) window.PresetManager.importFromString(code);
|
||||
});
|
||||
};
|
||||
|
||||
function initSortable() {
|
||||
if (!tableBody) return;
|
||||
new Sortable(tableBody, {
|
||||
const el = document.getElementById('sortable-tbody');
|
||||
if (!el) return;
|
||||
new Sortable(el, {
|
||||
handle: '.drag-handle',
|
||||
animation: 150,
|
||||
onEnd: () => {
|
||||
const newOrder = Array.from(tableBody.children).map(row => parseInt(row.getAttribute('data-index')));
|
||||
window.PresetManager.presets = newOrder.map(index => window.PresetManager.presets[index]);
|
||||
window.PresetManager.generateExportCode();
|
||||
const rows = Array.from(el.children);
|
||||
window.PresetManager.presets = rows.map(r => window.PresetManager.presets[parseInt(r.getAttribute('data-index'))]);
|
||||
window.PresetUI.renderTable();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// --- GLOBALE EXPORTE ---
|
||||
window.closeModal = () => window.UI.closeModal('preset-modal');
|
||||
window.saveAndClose = () => { window.PresetManager.save(); location.reload(); };
|
||||
window.exportJSON = () => window.PresetManager.exportToFile();
|
||||
});
|
||||
Loading…
Reference in a new issue