From 8ffaa6ecd261ecb18fae21bb335a05a4de2ec8fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jochen=20Wersd=C3=B6rfer?= <jochen@wersdoerfer.de>
Date: Tue, 11 Jun 2024 22:45:40 +0200
Subject: [PATCH] #147 fix broken podlovePlayer after htmx pagination by
 embedding the api url into audio element and listening for after:swap
 pagination area

---
 cast/templates/cast/audio/audio.html          |  7 ++++-
 .../cast/bootstrap4/blog_list_of_posts.html   | 27 ++++++++++++++-----
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/cast/templates/cast/audio/audio.html b/cast/templates/cast/audio/audio.html
index d0b3ab18..a69a6058 100644
--- a/cast/templates/cast/audio/audio.html
+++ b/cast/templates/cast/audio/audio.html
@@ -1 +1,6 @@
-<div id="audio_{{  value.pk }}" data-variant="xl"></div>
+<div
+  id="audio_{{ value.pk }}"
+  data-variant="xl"
+  data-url="{% url 'cast:api:audio_podlove_detail' pk=value.pk post_id=page.pk %}"
+>
+</div>
diff --git a/cast/templates/cast/bootstrap4/blog_list_of_posts.html b/cast/templates/cast/bootstrap4/blog_list_of_posts.html
index b7e7ab83..f423a671 100644
--- a/cast/templates/cast/bootstrap4/blog_list_of_posts.html
+++ b/cast/templates/cast/bootstrap4/blog_list_of_posts.html
@@ -96,12 +96,25 @@ <h5 class="mb-0">
 
   {% if use_audio_player %}
     <script src={% static 'cast/js/web-player/embed.5.js' %}></script>
-    {% for post in posts %}
-      {% for pk, audio in post.media_lookup.audio.items %}
-        <script>
-          podlovePlayer("#audio_{{ audio.pk }}", "{% url 'cast:api:audio_podlove_detail' pk=audio.pk post_id=post.pk %}", "{% url 'cast:api:player_config' %}");
-        </script>
-      {% endfor %}
-    {% endfor %}
+    <script>
+      function initializePodlovePlayers() {
+        document.querySelectorAll('section.block-audio div[id^="audio_"]').forEach(div => {
+          const audioId = div.id;
+          const url = div.getAttribute('data-url');
+          podlovePlayer(`#${audioId}`, url, "/api/audios/player_config/");
+        });
+      }
+
+      document.body.addEventListener('htmx:afterSwap', (event) => {
+        if (event.detail.target.id === 'paging-area') {
+          initializePodlovePlayers();
+        }
+      });
+
+      // Call the function on initial load
+      document.addEventListener('DOMContentLoaded', (event) => {
+        initializePodlovePlayers();
+      });
+    </script>
   {% endif %}
 {% endblock javascript %}