simon/Radioplayer-with-Presets
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

script.js aktualisiert

Browse source 
Icon hinzugefügt, Verschiebbarkeit auf Icon reduziert.
This commit is contained in:
simonpipe 2024-12-20 13:19:22 +00:00
parent 8dcfeeb708
commit e498ba8b08
1 changed files with 37 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
script.js
View file

@ -12,9 +12,11 @@ document.addEventListener('DOMContentLoaded', function() {
loadExistingPresets(); loadExistingPresets();
// Initialisierung von Sortable für den gesamten Container und das Verschieben mit dem Verschieben-Symbol
new Sortable(presetContainer, { new Sortable(presetContainer, {
animation: 250, animation: 250,
ghostClass: 'ghost', ghostClass: 'ghost',
handle: '.move-button', // Nur das Verschieben-Symbol erlaubt das Verschieben
onEnd: () => { onEnd: () => {
savePresetOrder(); savePresetOrder();
} }
@ -49,8 +51,15 @@ document.addEventListener('DOMContentLoaded', function() {
presetItem.innerHTML = ` presetItem.innerHTML = `
<h3>${name}</h3> <h3>${name}</h3>
<div class="button-container"> <div class="button-container">
<button class="edit-button">Bearbeiten</button> <button class="move-button">
<button class="delete-button">Löschen</button> <i class="fas fa-arrows-alt"></i> <!-- Verschieben-Symbol -->
</button>
<button class="edit-button">
<i class="fas fa-edit"></i> <!-- Stift-Symbol für Bearbeiten -->
</button>
<button class="delete-button">
<i class="fas fa-trash-alt"></i> <!-- Papierkorb-Symbol für Löschen -->
</button>
</div> </div>
`; `;
@ -64,9 +73,15 @@ document.addEventListener('DOMContentLoaded', function() {
deletePreset(presetItem); deletePreset(presetItem);
}); });
presetItem.querySelector('.move-button').addEventListener('click', (event) => {
event.stopPropagation(); // Verhindert, dass das Verschieben-Symbol das gesamte Preset aktiviert
});
presetItem.addEventListener('click', (event) => { presetItem.addEventListener('click', (event) => {
if (event.target !== presetItem.querySelector('.edit-button') && event.target !== presetItem.querySelector('.delete-button')) { if (event.target !== presetItem.querySelector('.edit-button') &&
playStream(url, presetItem); // Übergabe des presetItem event.target !== presetItem.querySelector('.delete-button') &&
event.target !== presetItem.querySelector('.move-button')) {
playStream(url, presetItem);
} }
}); });
@ -107,7 +122,7 @@ document.addEventListener('DOMContentLoaded', function() {
} }
function playStream(url, item) { function playStream(url, item) {
// Stoppe den aktuell laufenden Stream (falls vorhanden) // Stoppe den aktuell laufenden Stream (falls vorhanden)
if (currentPlayingItem) { if (currentPlayingItem) {
const currentAudio = currentPlayingItem.querySelector('audio'); const currentAudio = currentPlayingItem.querySelector('audio');
if (currentAudio) { if (currentAudio) {
@ -128,7 +143,7 @@ document.addEventListener('DOMContentLoaded', function() {
item.classList.add('playing'); item.classList.add('playing');
currentPlayingItem = item; // Aktualisiere das aktuell spielende Element currentPlayingItem = item; // Aktualisiere das aktuell spielende Element
currentStationName.textContent = item.querySelector('h3').textContent; currentStationName.textContent = item.querySelector('h3').textContent;
} }
function exportPresets() { function exportPresets() {
@ -175,20 +190,20 @@ document.addEventListener('DOMContentLoaded', function() {
input.click(); input.click();
} }
const stopButton = document.querySelector('.stop-button'); const stopButton = document.querySelector('.stop-button');
const progressBar = document.getElementById('progress-bar'); const progressBar = document.getElementById('progress-bar');
const currentStationName = document.getElementById('current-station-name'); const currentStationName = document.getElementById('current-station-name');
stopButton.addEventListener('click', () => { stopButton.addEventListener('click', () => {
// Stoppe den aktuellen Stream und setze currentPlayingItem zurück // Stoppe den aktuellen Stream und setze currentPlayingItem zurück
if (currentPlayingItem) { if (currentPlayingItem) {
const audioElement = currentPlayingItem.querySelector('audio'); const audioElement = currentPlayingItem.querySelector('audio');
audioElement.pause(); audioElement.pause();
audioElement.currentTime = 0; audioElement.currentTime = 0;
currentPlayingItem.classList.remove('playing'); currentPlayingItem.classList.remove('playing');
currentPlayingItem = null; currentPlayingItem = null;
currentStationName.textContent = 'Kein Sender ausgewählt.'; currentStationName.textContent = 'Kein Sender ausgewählt.';
} }
}); });
}); });