forked from Simnation/Main
Update script.js
This commit is contained in:
Nordi98
parent
d6480dfebd
commit
ab48cbdd05
1 changed files with 18 additions and 271 deletions
|
|
@ -1679,289 +1679,36 @@ function stopAllAudioAndCloseInterface() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function showDJInterface() {
|
||||||
|
console.log('DJ System: Showing interface');
|
||||||
|
|
||||||
// Playlist-Verwaltung
|
const djInterfaceElement = document.getElementById('dj-interface');
|
||||||
let playlists = [];
|
if (!djInterfaceElement) {
|
||||||
let currentPlaylist = null;
|
console.error('DJ System: Interface element not found!');
|
||||||
let currentPlaylistIndex = 0;
|
notifyFiveM('error', {error: 'Interface element not found'});
|
||||||
|
|
||||||
// Playlist laden
|
|
||||||
function loadPlaylists() {
|
|
||||||
// Lade Playlists vom Server
|
|
||||||
notifyFiveM('getPlaylists', {}, function(response) {
|
|
||||||
if (response.success && response.playlists) {
|
|
||||||
playlists = response.playlists;
|
|
||||||
updatePlaylistDisplay();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Playlist-Anzeige aktualisieren
|
|
||||||
function updatePlaylistDisplay() {
|
|
||||||
const playlistContainer = document.getElementById('playlist-container');
|
|
||||||
if (!playlistContainer) return;
|
|
||||||
|
|
||||||
playlistContainer.innerHTML = '';
|
|
||||||
|
|
||||||
if (playlists.length === 0) {
|
|
||||||
playlistContainer.innerHTML = '<div class="no-playlists">Keine Playlists gefunden</div>';
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Erstelle Playlist-Elemente
|
// Entferne hidden-Klasse
|
||||||
playlists.forEach((playlist, index) => {
|
djInterfaceElement.classList.remove('hidden');
|
||||||
const playlistElement = document.createElement('div');
|
|
||||||
playlistElement.className = 'playlist-item';
|
|
||||||
if (currentPlaylist && currentPlaylist.id === playlist.id) {
|
|
||||||
playlistElement.classList.add('active');
|
|
||||||
}
|
|
||||||
|
|
||||||
playlistElement.innerHTML = `
|
// Position weiter rechts und unten, falls keine gespeicherte Position
|
||||||
<div class="playlist-header">
|
if (!localStorage.getItem('djInterfacePosition')) {
|
||||||
<span class="playlist-name">${playlist.name}</span>
|
interfacePosition = {
|
||||||
<span class="playlist-count">${playlist.songs.length} Songs</span>
|
x: (window.innerWidth - interfaceSize.width) / 2,
|
||||||
</div>
|
y: (window.innerHeight - interfaceSize.height) / 2
|
||||||
<div class="playlist-actions">
|
};
|
||||||
<button class="playlist-play-btn" title="Play"><i class="fas fa-play"></i></button>
|
|
||||||
<button class="playlist-edit-btn" title="Edit"><i class="fas fa-edit"></i></button>
|
|
||||||
${playlist.isOwner ? '<button class="playlist-delete-btn" title="Delete"><i class="fas fa-trash"></i></button>' : ''}
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
// Event-Listener für Playlist-Aktionen
|
|
||||||
const playBtn = playlistElement.querySelector('.playlist-play-btn');
|
|
||||||
if (playBtn) {
|
|
||||||
playBtn.addEventListener('click', () => playPlaylist(playlist));
|
|
||||||
}
|
|
||||||
|
|
||||||
const editBtn = playlistElement.querySelector('.playlist-edit-btn');
|
|
||||||
if (editBtn) {
|
|
||||||
editBtn.addEventListener('click', () => editPlaylist(playlist));
|
|
||||||
}
|
|
||||||
|
|
||||||
const deleteBtn = playlistElement.querySelector('.playlist-delete-btn');
|
|
||||||
if (deleteBtn) {
|
|
||||||
deleteBtn.addEventListener('click', () => deletePlaylist(playlist));
|
|
||||||
}
|
|
||||||
|
|
||||||
playlistContainer.appendChild(playlistElement);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Playlist abspielen
|
|
||||||
function playPlaylist(playlist) {
|
|
||||||
if (!playlist || !playlist.songs || playlist.songs.length === 0) {
|
|
||||||
showNotification('Diese Playlist enthält keine Songs', 'warning');
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
currentPlaylist = playlist;
|
// Wende gespeicherte Einstellungen an
|
||||||
currentPlaylistIndex = 0;
|
applyInterfaceSettings();
|
||||||
|
|
||||||
// Ersten Song abspielen
|
console.log('DJ System: Interface shown');
|
||||||
playPlaylistSong(currentPlaylistIndex);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Playlist-Song abspielen
|
|
||||||
function playPlaylistSong(index) {
|
|
||||||
if (!currentPlaylist || !currentPlaylist.songs || index >= currentPlaylist.songs.length) {
|
|
||||||
showNotification('Playlist beendet', 'info');
|
|
||||||
currentPlaylist = null;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const song = currentPlaylist.songs[index];
|
|
||||||
|
|
||||||
// Lade Song in Deck A
|
|
||||||
const trackData = {
|
|
||||||
title: song.title,
|
|
||||||
artist: song.artist || '',
|
|
||||||
url: song.url
|
|
||||||
};
|
|
||||||
|
|
||||||
loadTrackToPlayer('A', trackData);
|
|
||||||
|
|
||||||
// Starte Wiedergabe
|
|
||||||
if (!djInterface.decks.A.isPlaying) {
|
|
||||||
togglePlay('A');
|
|
||||||
}
|
|
||||||
|
|
||||||
showNotification(`Playlist: ${currentPlaylist.name} - Song ${index + 1}/${currentPlaylist.songs.length}`, 'info');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Nächster Song in Playlist
|
|
||||||
function playNextSong() {
|
|
||||||
if (!currentPlaylist) return;
|
|
||||||
|
|
||||||
currentPlaylistIndex++;
|
|
||||||
if (currentPlaylistIndex < currentPlaylist.songs.length) {
|
|
||||||
playPlaylistSong(currentPlaylistIndex);
|
|
||||||
} else {
|
|
||||||
showNotification('Playlist beendet', 'info');
|
|
||||||
currentPlaylist = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Playlist bearbeiten
|
|
||||||
function editPlaylist(playlist) {
|
|
||||||
openPlaylistEditor(playlist);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Playlist löschen
|
|
||||||
function deletePlaylist(playlist) {
|
|
||||||
if (confirm(`Möchtest du die Playlist "${playlist.name}" wirklich löschen?`)) {
|
|
||||||
notifyFiveM('deletePlaylist', { playlistId: playlist.id }, function(response) {
|
|
||||||
if (response.success) {
|
|
||||||
showNotification('Playlist gelöscht', 'success');
|
|
||||||
loadPlaylists(); // Playlists neu laden
|
|
||||||
} else {
|
|
||||||
showNotification('Fehler beim Löschen der Playlist', 'error');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Neue Playlist erstellen
|
|
||||||
function createNewPlaylist() {
|
|
||||||
const playlistName = prompt('Name der neuen Playlist:');
|
|
||||||
if (!playlistName) return;
|
|
||||||
|
|
||||||
notifyFiveM('createPlaylist', {
|
|
||||||
name: playlistName,
|
|
||||||
isPublic: confirm('Soll die Playlist öffentlich sein?')
|
|
||||||
}, function(response) {
|
|
||||||
if (response.success) {
|
|
||||||
showNotification('Playlist erstellt', 'success');
|
|
||||||
loadPlaylists(); // Playlists neu laden
|
|
||||||
} else {
|
|
||||||
showNotification('Fehler beim Erstellen der Playlist', 'error');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Song zu Playlist hinzufügen
|
|
||||||
function addSongToPlaylist(song, playlistId) {
|
|
||||||
notifyFiveM('addToPlaylist', {
|
|
||||||
playlistId: playlistId,
|
|
||||||
track: song
|
|
||||||
}, function(response) {
|
|
||||||
if (response.success) {
|
|
||||||
showNotification('Song zur Playlist hinzugefügt', 'success');
|
|
||||||
loadPlaylists(); // Playlists neu laden
|
|
||||||
} else {
|
|
||||||
showNotification('Fehler beim Hinzufügen des Songs', 'error');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Playlist-Editor öffnen
|
|
||||||
function openPlaylistEditor(playlist) {
|
|
||||||
// Implementiere einen Playlist-Editor
|
|
||||||
// Dies könnte ein Modal sein, in dem Songs hinzugefügt/entfernt werden können
|
|
||||||
console.log('Playlist Editor für:', playlist);
|
|
||||||
|
|
||||||
// Beispiel für ein einfaches Modal
|
|
||||||
const modal = document.createElement('div');
|
|
||||||
modal.className = 'modal';
|
|
||||||
modal.innerHTML = `
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h3>Playlist bearbeiten: ${playlist.name}</h3>
|
|
||||||
<button class="close-modal">×</button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<div class="playlist-songs">
|
|
||||||
${playlist.songs.map((song, idx) => `
|
|
||||||
<div class="playlist-song">
|
|
||||||
<span>${idx + 1}. ${song.title}</span>
|
|
||||||
<button class="remove-song" data-index="${idx}">
|
|
||||||
<i class="fas fa-times"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
`).join('')}
|
|
||||||
</div>
|
|
||||||
<div class="add-song-form">
|
|
||||||
<h4>Song hinzufügen</h4>
|
|
||||||
<div class="input-group">
|
|
||||||
<input type="text" id="song-title" placeholder="Titel">
|
|
||||||
</div>
|
|
||||||
<div class="input-group">
|
|
||||||
<input type="text" id="song-artist" placeholder="Künstler (optional)">
|
|
||||||
</div>
|
|
||||||
<div class="input-group">
|
|
||||||
<input type="text" id="song-url" placeholder="URL (YouTube oder direkt)">
|
|
||||||
</div>
|
|
||||||
<button id="add-song-btn">Song hinzufügen</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
document.body.appendChild(modal);
|
|
||||||
|
|
||||||
// Event-Listener für Modal
|
|
||||||
const closeBtn = modal.querySelector('.close-modal');
|
|
||||||
if (closeBtn) {
|
|
||||||
closeBtn.addEventListener('click', () => {
|
|
||||||
document.body.removeChild(modal);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Event-Listener für Song-Entfernung
|
|
||||||
const removeBtns = modal.querySelectorAll('.remove-song');
|
|
||||||
removeBtns.forEach(btn => {
|
|
||||||
btn.addEventListener('click', () => {
|
|
||||||
const index = parseInt(btn.dataset.index);
|
|
||||||
removeSongFromPlaylist(playlist.id, playlist.songs[index].id);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Event-Listener für Song-Hinzufügung
|
|
||||||
const addBtn = modal.querySelector('#add-song-btn');
|
|
||||||
if (addBtn) {
|
|
||||||
addBtn.addEventListener('click', () => {
|
|
||||||
const title = modal.querySelector('#song-title').value;
|
|
||||||
const artist = modal.querySelector('#song-artist').value;
|
|
||||||
const url = modal.querySelector('#song-url').value;
|
|
||||||
|
|
||||||
if (!title || !url) {
|
|
||||||
showNotification('Titel und URL sind erforderlich', 'error');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
addSongToPlaylist({
|
|
||||||
title: title,
|
|
||||||
artist: artist,
|
|
||||||
url: url
|
|
||||||
}, playlist.id);
|
|
||||||
|
|
||||||
// Modal schließen
|
|
||||||
document.body.removeChild(modal);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Song aus Playlist entfernen
|
|
||||||
function removeSongFromPlaylist(playlistId, songId) {
|
|
||||||
notifyFiveM('removeSongFromPlaylist', {
|
|
||||||
playlistId: playlistId,
|
|
||||||
songId: songId
|
|
||||||
}, function(response) {
|
|
||||||
if (response.success) {
|
|
||||||
showNotification('Song aus Playlist entfernt', 'success');
|
|
||||||
loadPlaylists(); // Playlists neu laden
|
|
||||||
} else {
|
|
||||||
showNotification('Fehler beim Entfernen des Songs', 'error');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Event-Listener für Song-Ende (für Playlist-Fortsetzung)
|
|
||||||
function setupPlaylistEventListeners() {
|
|
||||||
// Wenn ein Song endet, spiele den nächsten in der Playlist
|
|
||||||
document.addEventListener('songEnded', function(e) {
|
|
||||||
if (currentPlaylist) {
|
|
||||||
playNextSong();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue