#167 new podlove-player web component

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

@@ -202,15 +202,3 @@
     */
     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/static/cast/vite/manifest.json

@@ -1,4 +1,10 @@
 {
+  "src/audio/podlove-player.ts": {
+    "file": "podlovePlayer-CCBWa9eP.js",
+    "name": "podlovePlayer",
+    "src": "src/audio/podlove-player.ts",
+    "isEntry": true
+  },
   "src/gallery/image-gallery-bs4.ts": {
     "file": "main-CCUgFhRa.js",
     "name": "main",

cast/static/cast/vite/podlovePlayer-CCBWa9eP.js

@@ -0,0 +1,19 @@
+class c extends HTMLElement{constructor(){super(),this.observer=null,this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.renderPlaceholder(),this.observeElement()}disconnectedCallback(){this.observer&&this.observer.disconnect()}renderPlaceholder(){const e=document.createElement("div");e.classList.add("podlove-player-container");const t=document.createElement("style");t.textContent=`
+      .podlove-player-container {
+        width: 100%;
+        max-width: 936px;
+        height: 300px;
+        margin: 0 auto;
+      }
+      @media (max-width: 768px) {
+        .podlove-player-container {
+          max-width: 366px;
+          height: 500px;
+        }
+      }
+      .podlove-player-container iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+      }
+    `,this.shadow.appendChild(t),this.shadow.appendChild(e)}observeElement(){this.observer=new IntersectionObserver((e,t)=>{e.forEach(i=>{i.isIntersecting&&(this.initializePlayer(),t.unobserve(this))})}),this.observer.observe(this)}initializePlayer(){const e=this.shadow.querySelector(".podlove-player-container"),t=this.getAttribute("id")||`podlove-player-${Date.now()}`,i=this.getAttribute("data-url"),n=this.getAttribute("data-config")||"/api/audios/player_config/";let o=this.getAttribute("data-embed")||"https://cdn.podlove.org/web-player/5.x/embed.js";const{protocol:d,hostname:a,port:s}=window.location;console.log("protocol, hostname, port: ",d,a,s);const l=document.createElement("div");l.id=t,e.appendChild(l),typeof podlovePlayer=="function"?(console.log("embed url: ",o),console.log("starting podlove player with: ",l,i,n),podlovePlayer(l,i,n)):(a==="localhost"&&o.startsWith("/")&&(o=`http://localhost:${s}${o}`),console.log("importing embed via url: ",o),import(o).then(()=>{const r=document.createElement("div");r.id=t,e.appendChild(r),podlovePlayer(r,i,n)}))}}console.log("Registering podlove-player!");customElements.define("podlove-player",c);

cast/templates/cast/audio/audio.html

@@ -2,7 +2,6 @@
 {% if page.pk %}
   <podlove-player
     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 %}"
     data-embed="{% static 'cast/js/web-player/embed.5.js' %}"

cast/templates/cast/bootstrap4/blog_list_of_posts.html

@@ -94,42 +94,6 @@ <h5 class="mb-0">
 
   {% vite_hmr_client app="cast" %}
   {% vite_asset 'src/gallery/image-gallery-bs4.ts' app="cast" %}
+  {% vite_asset 'src/audio/podlove-player.ts' app="cast" %}
 
-  {% 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('.podlove-player-container').forEach(div => {
-          initializePodlovePlayerWhenVisible(div);
-        });
-      }
-
-      document.body.addEventListener('htmx:afterSettle', (event) => {
-        if (event.detail.target.id === 'paging-area') {
-          setTimeout(() => {
-            initializePodlovePlayers();
-          }, 1500); // Adjust the delay as needed -> wait to finish scrolling up
-        }
-      });
-
-      // Attach to the load event to ensure the page has fully loaded
-      window.addEventListener('load', function() {
-        initializePodlovePlayers();
-      });
-    </script>
-  {% endif %}
 {% endblock javascript %}

cast/templates/cast/bootstrap4/post.html

@@ -58,17 +58,9 @@
   {{ block.super }}
   {% vite_hmr_client app="cast" %}
   {% vite_asset 'src/gallery/image-gallery-bs4.ts' app="cast" %}
+  {% vite_asset 'src/audio/podlove-player.ts' app="cast" %}
 
   <!-- full query is needed for comments -->
   <script defer src="{% static 'cast/js/jquery/jquery-3.7.1.min.js' %}"></script>
   <script defer type="text/javascript" src="{% static 'fluent_comments/js/ajaxcomments.js' %}"></script>
-  {% if has_audio %}
-    <script src="{% static 'cast/js/web-player/embed.5.js' %}"></script>
-    {% for pk, audio in audio_items %}
-      <script>
-        podlovePlayer("#audio_{{ audio.pk }}", "{% url 'cast:api:audio_podlove_detail' pk=audio.pk post_id=page.pk %}", "{% url 'cast:api:player_config' %}");
-      </script>
-    {% endfor %}
-  {% endif %}
-
 {% endblock javascript %}