#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

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

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