claudep/beesgospel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Jouer les fichiers sons sur le site

Browse source
This commit is contained in:
Claude Paroz 2025-11-07 18:25:24 +01:00
parent d1be126537
commit 5b77299f71
4 changed files with 47 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

4
beesgospel/models.py
View file

@ -122,3 +122,7 @@ class ChantDoc(models.Model):
def __str__(self):
return f"Document {self.titre} pour le chant {self.chant}"
@property
def fichier_son(self):
return self.fichier and self.fichier.name.endswith((".m4a", ".mp3", ".wav"))

5
beesgospel/static/css/main.css
View file

@ -127,3 +127,8 @@ tr.editable:hover .edit-button, tr.editable:hover .delete-button { display: inli
height: 100%;
}
table.table-chants th.boutons { width: 3em; }
#modal_sound .modal-content {
background-color: #333;
color: white;
}
img.fichier_son { cursor: pointer; }

14
beesgospel/static/js/main.js
View file

@ -11,7 +11,19 @@ window.addEventListener('DOMContentLoaded', () => {
let resp = confirm("Voulez-vous vraiment supprimer cette ligne ?");
if (!resp) { ev.preventDefault(); ev.stopImmediatePropagation(); }
});
attachHandlerSelector(document, 'img.fichier_son', 'click', (ev) => {
const soundModal = document.getElementById('modal_sound');
soundModal.querySelector("audio").src = ev.target.dataset.path;
soundModal.querySelector("#download-link").href = ev.target.dataset.path;
const myModal = new bootstrap.Modal(soundModal);
myModal.show();
});
attachHandlerSelector(document, '#modal_sound', 'hidden.bs.modal', (ev) => {
const audio = ev.target.querySelector("audio");
audio.pause(); // Stop playing
audio.currentTime = 0;
audio.src = "";
})
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
})

26
templates/membres/liste_chants.html
View file

@ -10,7 +10,9 @@
<tr class="editable">
<td>{{ chant.titre }}</td>
<td>{% for doc in chant.chantdoc_set.all %}
{% if doc.fichier %}
{% if doc.fichier_son %}
<img src="{{ doc.fichier.path|icon_url }}" title="{{ doc.titre }}" class="icon fichier_son" data-bs-toggle="tooltip" data-path="{{ doc.fichier.url }}">
{% elif doc.fichier %}
<a href="{{ doc.fichier.url }}">
<img src="{{ doc.fichier.path|icon_url }}" title="{{ doc.titre }}" class="icon" data-bs-toggle="tooltip">
</a>
@ -38,4 +40,26 @@
{% if perms.beesgospel.add_chant %}
<div class="mt-3"><a class="btn btn-outline-primary" href="{% url 'chant-add' %}">Ajouter un chant</a></div>
{% endif %}
<div id="modal_sound" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Écouter un fichier audio</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="homeaudio" class="d-flex justify-content-center mt-5">
<div class="text-start">
<audio controls src=""></audio>
</div>
</div>
<div class="text-end fst-italic"><a id="download-link" href="" download>Télécharger</a></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
</div>
</div>
</div>
</div>
{% endblock %}