#167 save space for player in layout

cast/static/cast/css/bootstrap4/cast.css

@@ -202,3 +202,15 @@
     */
     display: block;
 }
+
+.podlove-player-container {
+  width: 936px;  /* Desktop width */
+  height: 300px; /* Desktop height */
+}
+
+@media (max-width: 768px) {
+  .podlove-player-container {
+    width: 366px;  /* Mobile width */
+    height: 500px; /* Mobile height */
+  }
+}

cast/templates/cast/audio/audio.html

@@ -1,6 +1,7 @@
 {% if page.pk %}
   <div
     id="audio_{{ value.pk }}"
+    class="podlove-player-container"
     data-variant="xl"
     data-url="{% url 'cast:api:audio_podlove_detail' pk=value.pk post_id=page.pk %}"
   >

cast/templates/cast/bootstrap4/blog_list_of_posts.html

@@ -113,7 +113,7 @@ <h5 class="mb-0">
       }
 
       function initializePodlovePlayers() {
-        document.querySelectorAll('section.block-audio div[id^="audio_"]').forEach(div => {
+        document.querySelectorAll('.podlove-player-container').forEach(div => {
           initializePodlovePlayerWhenVisible(div);
         });
       }

docs/releases/0.2.40.rst

@@ -4,3 +4,4 @@
 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
+- #167 Save space for the player in the layout, even if it's not visible