templates/index.html

{% extends "base.html" %}

{% block title %}Accueil - Podcasts{% endblock %}

{% block content %}
    <h2>Podcasts Disponibles</h2>

    <div class="search-bar">
        <input type="text" id="searchInput" onkeyup="filterPodcasts()" placeholder="Rechercher par nom ou matière...">
    </div>

    <div id="podcastList">
        {% if podcasts %}
            {% for podcast in podcasts %}
            <div class="podcast-item" data-name="{{ podcast.name.lower() }}" data-subject="{{ podcast.subject.lower() }}">
                <h3>{{ podcast.name }}</h3>
                <p><strong>Matière :</strong> {{ podcast.subject }}</p>
                <button onclick="playPodcast('{{ podcast.id }}', this)">Écouter</button>
                <div id="player-{{ podcast.id }}"></div>
            </div>
            {% endfor %}
        {% else %}
            <p>Aucun podcast disponible. Ajoutez-en depuis la page de <a href="{{ url_for('gestion') }}">gestion</a>.</p>
        {% endif %}
    </div>
{% endblock %}

{% block scripts %}
<script>
    function filterPodcasts() {
        let input = document.getElementById('searchInput');
        let filter = input.value.toLowerCase();
        let podcastList = document.getElementById('podcastList');
        let items = podcastList.getElementsByClassName('podcast-item');

        for (let i = 0; i < items.length; i++) {
            let name = items[i].getAttribute('data-name');
            let subject = items[i].getAttribute('data-subject');
            if (name.includes(filter) || subject.includes(filter)) {
                items[i].style.display = "";
            } else {
                items[i].style.display = "none";
            }
        }
    }

    function playPodcast(podcastId, buttonElement) {
        // Désactiver tous les autres boutons "Écouter" et réinitialiser leur texte
        document.querySelectorAll('.podcast-item button').forEach(btn => {
            if (btn !== buttonElement) {
                btn.disabled = false;
                btn.textContent = 'Écouter';
            }
        });
         // Vider les autres lecteurs audio
        document.querySelectorAll('div[id^="player-"]').forEach(playerDiv => {
            if (playerDiv.id !== `player-${podcastId}`) {
                playerDiv.innerHTML = '';
            }
        });


        let playerDiv = document.getElementById('player-' + podcastId);
        
        // Si le lecteur est déjà là, on le supprime (pour "arrêter")
        if (playerDiv.querySelector('audio')) {
            playerDiv.innerHTML = '';
            buttonElement.textContent = 'Écouter';
            buttonElement.disabled = false;
            return;
        }

        // Afficher "Chargement..." et désactiver le bouton
        buttonElement.textContent = 'Chargement...';
        buttonElement.disabled = true;

        fetch(`/play/${podcastId}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`Erreur HTTP: ${response.status}`);
                }
                // Le serveur envoie l'URL du fichier audio mis en cache
                return response.json(); 
            })
            .then(data => {
                if (data.audio_url) {
                    playerDiv.innerHTML = `<audio controls autoplay src="${data.audio_url}">Votre navigateur ne supporte pas l'élément audio.</audio>`;
                    buttonElement.textContent = 'Arrêter'; // Ou "Lecture en cours"
                    buttonElement.disabled = false; // Réactiver pour permettre d'arrêter
                } else if (data.error) {
                    playerDiv.innerHTML = `<p style="color: red;">Erreur: ${data.error}</p>`;
                    buttonElement.textContent = 'Écouter'; // Réinitialiser
                    buttonElement.disabled = false;
                }
            })
            .catch(error => {
                console.error('Erreur lors de la lecture du podcast:', error);
                playerDiv.innerHTML = `<p style="color: red;">Impossible de charger le podcast. Vérifiez la console.</p>`;
                buttonElement.textContent = 'Écouter'; // Réinitialiser
                buttonElement.disabled = false;
            });
    }
</script>
{% endblock %}