#167 improve performance by switching to load event and using interse…

…ction observer to defer initialization

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>

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>

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