From e381dbd387f39ec4026229b1f3f6fcb6a6732d64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jochen=20Wersd=C3=B6rfer?= <jochen@wersdoerfer.de>
Date: Wed, 30 Oct 2024 14:36:38 +0100
Subject: [PATCH] #167 improve performance by switching to load event and using
 intersection observer to defer initialization

---
 .../_list_of_posts_and_paging_controls.html   |  7 ------
 .../cast/bootstrap4/blog_list_of_posts.html   | 22 ++++++++++++++-----
 docs/releases/0.2.40.rst                      |  6 +++++
 3 files changed, 23 insertions(+), 12 deletions(-)
 create mode 100644 docs/releases/0.2.40.rst

diff --git a/cast/templates/cast/bootstrap4/_list_of_posts_and_paging_controls.html b/cast/templates/cast/bootstrap4/_list_of_posts_and_paging_controls.html
index f59bff20..f8354af2 100644
--- a/cast/templates/cast/bootstrap4/_list_of_posts_and_paging_controls.html
+++ b/cast/templates/cast/bootstrap4/_list_of_posts_and_paging_controls.html
@@ -13,13 +13,6 @@
       setModalImage($(e.target))
     });
   </script>
-  {% if use_audio_player %}
-    {% for post in posts %}
-      {% for pk, audio in post.media_lookup.audio.items %}
-        <script>podlovePlayer("#audio_{{ audio.pk }}", "{{ audio.podlove_url }}");</script>
-      {% endfor %}
-    {% endfor %}
-  {% endif %}
 </main>
 
 <footer>
diff --git a/cast/templates/cast/bootstrap4/blog_list_of_posts.html b/cast/templates/cast/bootstrap4/blog_list_of_posts.html
index 3daf4576..739f2722 100644
--- a/cast/templates/cast/bootstrap4/blog_list_of_posts.html
+++ b/cast/templates/cast/bootstrap4/blog_list_of_posts.html
@@ -98,11 +98,23 @@ <h5 class="mb-0">
   {% if use_audio_player %}
     <script defer src={% static 'cast/js/web-player/embed.5.js' %}></script>
     <script>
+      function initializePodlovePlayerWhenVisible(div) {
+        const observer = new IntersectionObserver((entries, observer) => {
+          entries.forEach(entry => {
+            if (entry.isIntersecting) {
+              const audioId = div.id;
+              const url = div.getAttribute('data-url');
+              podlovePlayer(`#${audioId}`, url, "/api/audios/player_config/");
+              observer.unobserve(div); // Stop observing since we don't need to initialize again
+            }
+          });
+        });
+        observer.observe(div);
+      }
+
       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/");
+          initializePodlovePlayerWhenVisible(div);
         });
       }
 
@@ -112,8 +124,8 @@ <h5 class="mb-0">
         }
       });
 
-      // Call the function on initial load
-      document.addEventListener('DOMContentLoaded', (event) => {
+      // Attach to the load event to ensure the page has fully loaded
+      window.addEventListener('load', function() {
         initializePodlovePlayers();
       });
     </script>
diff --git a/docs/releases/0.2.40.rst b/docs/releases/0.2.40.rst
new file mode 100644
index 00000000..924862d8
--- /dev/null
+++ b/docs/releases/0.2.40.rst
@@ -0,0 +1,6 @@
+0.2.40 (2024-11-03)
+-------------------
+
+Improved the performance of the web player by
+- #167 Waiting for the load event before initializing the player (instead of using DOMContentLoaded)
+- #167 Only initializing the player once the player is visible in the viewport