feat: permit to play Funkwhale songs

2025-10-17 21:23:44 +04:00
parent 95de788114
commit b3ee9d9837
4 changed files with 233 additions and 13 deletions
@@ -0,0 +1,132 @@
+/**
+ * Lecteur audio intégré pour Funkwhale
+ * Permet de lire les morceaux directement dans la page
+ */
+
+(function() {
+    'use strict';
+
+    let currentlyPlayingTrack = null;
+    let currentAudioElement = null;
+
+    /**
+     * Arrête le morceau en cours de lecture
+     */
+    function stopCurrentTrack() {
+        if (currentAudioElement) {
+            currentAudioElement.pause();
+            currentAudioElement.currentTime = 0;
+        }
+        if (currentlyPlayingTrack) {
+            currentlyPlayingTrack.classList.remove('playing');
+            currentlyPlayingTrack = null;
+        }
+    }
+
+    /**
+     * Démarre la lecture d'un morceau
+     */
+    function playTrack(trackItem, audioElement) {
+        // Arrêter le morceau actuel s'il y en a un
+        if (currentlyPlayingTrack && currentlyPlayingTrack !== trackItem) {
+            stopCurrentTrack();
+        }
+
+        currentlyPlayingTrack = trackItem;
+        currentAudioElement = audioElement;
+
+        // Marquer comme en cours de lecture
+        trackItem.classList.add('playing');
+
+        // Démarrer la lecture
+        audioElement.play().catch(function(error) {
+            console.error('Erreur lors de la lecture:', error);
+            stopCurrentTrack();
+        });
+    }
+
+    /**
+     * Met en pause le morceau
+     */
+    function pauseTrack(trackItem, audioElement) {
+        audioElement.pause();
+        trackItem.classList.remove('playing');
+    }
+
+    /**
+     * Initialise les contrôles du lecteur
+     */
+    function initPlayer() {
+        const trackItems = document.querySelectorAll('.funkwhale-track-item');
+
+        trackItems.forEach(function(trackItem) {
+            const playButton = trackItem.querySelector('.funkwhale-play-btn');
+            const audioElement = trackItem.querySelector('audio');
+
+            if (!playButton || !audioElement) {
+                return;
+            }
+
+            // Gestion du clic sur le bouton play/pause
+            playButton.addEventListener('click', function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+
+                if (trackItem.classList.contains('playing')) {
+                    pauseTrack(trackItem, audioElement);
+                } else {
+                    playTrack(trackItem, audioElement);
+                }
+            });
+
+            // Gérer la fin de la lecture
+            audioElement.addEventListener('ended', function() {
+                trackItem.classList.remove('playing');
+
+                // Passer automatiquement au morceau suivant
+                const nextTrack = trackItem.nextElementSibling;
+                if (nextTrack && nextTrack.classList.contains('funkwhale-track-item')) {
+                    const nextAudio = nextTrack.querySelector('audio');
+                    if (nextAudio) {
+                        playTrack(nextTrack, nextAudio);
+                    }
+                } else {
+                    // Réinitialiser si c'était le dernier morceau
+                    currentlyPlayingTrack = null;
+                    currentAudioElement = null;
+                }
+            });
+
+            // Gérer les erreurs de chargement
+            audioElement.addEventListener('error', function(e) {
+                console.error('Erreur de chargement audio:', e);
+                trackItem.classList.remove('playing');
+
+                // Afficher un message d'erreur temporaire
+                const trackTitle = trackItem.querySelector('.funkwhale-track-title');
+                if (trackTitle) {
+                    const originalText = trackTitle.textContent;
+                    trackTitle.textContent = 'Erreur de lecture';
+                    trackTitle.style.color = '#ff0000';
+
+                    setTimeout(function() {
+                        trackTitle.textContent = originalText;
+                        trackTitle.style.color = '';
+                    }, 3000);
+                }
+            });
+        });
+    }
+
+    // Initialiser le lecteur quand le DOM est prêt
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initPlayer);
+    } else {
+        initPlayer();
+    }
+
+    // Nettoyer à la fermeture de la page
+    window.addEventListener('beforeunload', function() {
+        stopCurrentTrack();
+    });
+})();