File size: 4,262 Bytes
2854e12 43f84cb 2854e12 43f84cb 2854e12 43f84cb 2854e12 43f84cb 2854e12 43f84cb 2854e12 43f84cb 2854e12 43f84cb 2854e12 43f84cb 2854e12 43f84cb 2854e12 43f84cb 2854e12 43f84cb 2854e12 43f84cb 2854e12 43f84cb 2854e12 43f84cb 2854e12 43f84cb 2854e12 43f84cb 2854e12 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
{% 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 %} |