117 lines
No EOL
4.2 KiB
JavaScript
117 lines
No EOL
4.2 KiB
JavaScript
// main.js
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const presetContainer = document.getElementById('preset-container');
|
|
const stopButton = document.querySelector('.stop-button');
|
|
const currentStationName = document.getElementById('current-station-name');
|
|
let currentSound = null;
|
|
|
|
// --- INITIALISIERUNG ---
|
|
window.UI.initializeFooter();
|
|
|
|
// Wichtig: Hier wird die Stop-Funktion an den Timer übergeben
|
|
if (window.SleepTimer) {
|
|
window.SleepTimer.init(() => stopPlayback());
|
|
}
|
|
|
|
window.PresetManager.load((presets) => {
|
|
displayPresets(presets);
|
|
initSortable();
|
|
});
|
|
|
|
// --- EVENT LISTENER (HAUPTSEITE) ---
|
|
if (stopButton) stopButton.onclick = stopPlayback;
|
|
|
|
document.getElementById('edit-presets-button').onclick = () => {
|
|
window.UI.openModal('preset-modal');
|
|
window.PresetUI.renderTable();
|
|
};
|
|
|
|
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.setTimer(minutes);
|
|
window.UI.closeModal('sleep-timer-modal');
|
|
}
|
|
};
|
|
});
|
|
|
|
document.getElementById('off-sleep-timer-modal').onclick = () => {
|
|
if (window.SleepTimer) {
|
|
window.SleepTimer.clear();
|
|
window.UI.closeModal('sleep-timer-modal');
|
|
}
|
|
};
|
|
|
|
document.getElementById('close-sleep-timer-modal').onclick = () => {
|
|
window.UI.closeModal('sleep-timer-modal');
|
|
};
|
|
|
|
// --- PLAYER FUNKTIONEN ---
|
|
function playStream(url, name) {
|
|
stopPlayback();
|
|
currentSound = new Howl({
|
|
src: [url],
|
|
html5: true,
|
|
volume: 0.5,
|
|
onplay: () => {
|
|
stopButton.classList.remove('hidden');
|
|
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);
|
|
}
|
|
});
|
|
currentSound.play();
|
|
}
|
|
|
|
function stopPlayback() {
|
|
if (currentSound) { currentSound.stop(); currentSound = null; }
|
|
stopButton.classList.add('hidden');
|
|
currentStationName.innerHTML = '<i class="fa-solid fa-radio" style="opacity:0.5"></i> Wähle einen Sender aus';
|
|
window.UI.updateDocumentTitle('');
|
|
if (window.MetaHandler) window.MetaHandler.stop();
|
|
}
|
|
|
|
// --- UI RENDERING ---
|
|
function displayPresets(presets) {
|
|
presetContainer.innerHTML = '';
|
|
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 initSortable() {
|
|
const el = document.getElementById('sortable-tbody');
|
|
if (!el) return;
|
|
new Sortable(el, {
|
|
handle: '.drag-handle',
|
|
animation: 150,
|
|
onEnd: () => {
|
|
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();
|
|
}); |