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

59
script.js
View file

@ -12,9 +12,11 @@ document.addEventListener('DOMContentLoaded', function() {
loadExistingPresets();
// Initialisierung von Sortable für den gesamten Container und das Verschieben mit dem Verschieben-Symbol
new Sortable(presetContainer, {
animation: 250,
ghostClass: 'ghost',
handle: '.move-button', // Nur das Verschieben-Symbol erlaubt das Verschieben
onEnd: () => {
savePresetOrder();
}
@ -49,8 +51,15 @@ document.addEventListener('DOMContentLoaded', function() {
presetItem.innerHTML = `
<h3>${name}</h3>
<div class="button-container">
<button class="edit-button">Bearbeiten</button>
<button class="delete-button">Löschen</button>
<button class="move-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>
`;
@ -64,9 +73,15 @@ document.addEventListener('DOMContentLoaded', function() {
deletePreset(presetItem);
});
presetItem.querySelector('.move-button').addEventListener('click', (event) => {
event.stopPropagation(); // Verhindert, dass das Verschieben-Symbol das gesamte Preset aktiviert
});
presetItem.addEventListener('click', (event) => {
if (event.target !== presetItem.querySelector('.edit-button') && event.target !== presetItem.querySelector('.delete-button')) {
playStream(url, presetItem); // Übergabe des presetItem
if (event.target !== presetItem.querySelector('.edit-button') &&
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) {
// Stoppe den aktuell laufenden Stream (falls vorhanden)
// Stoppe den aktuell laufenden Stream (falls vorhanden)
if (currentPlayingItem) {
const currentAudio = currentPlayingItem.querySelector('audio');
if (currentAudio) {
@ -126,9 +141,9 @@ document.addEventListener('DOMContentLoaded', function() {
};
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;
currentStationName.textContent = item.querySelector('h3').textContent;
}
function exportPresets() {
@ -145,7 +160,7 @@ document.addEventListener('DOMContentLoaded', function() {
URL.revokeObjectURL(url);
}
function importPresets() {
const input = document.createElement('input');
input.type = 'file';
@ -174,21 +189,21 @@ document.addEventListener('DOMContentLoaded', function() {
};
input.click();
}
const stopButton = document.querySelector('.stop-button');
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.';
}
});
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.';
}
});
});
});