Jouer les fichiers sons sur le site

beesgospel/models.py

@@ -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"))

beesgospel/static/css/main.css

@@ -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; }

beesgospel/static/js/main.js

@@ -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))
 })

templates/membres/liste_chants.html

@@ -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 %}