filter vis

js/audioplayer.js

@@ -0,0 +1,75 @@
+(function (Drupal, once) {
+
+  async function getAudioSourceFromNode(url) {
+    const res = await fetch(url, {
+      headers: { 'X-Requested-With': 'XMLHttpRequest' }
+    });
+
+    const html = await res.text();
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+
+    const source = doc.querySelector(
+      'audio[data-able-player] source[type="audio/mpeg"]'
+    );
+
+    const title =
+      doc.querySelector(
+        'h1.title.page-title span[property="dcterms:title"]'
+      )?.textContent.trim()
+      ||
+      doc.querySelector('meta[property="og:title"]')?.content
+      ||
+      doc.querySelector('title')?.textContent
+      ||
+      '';
+
+    return { src: source?.src, title };
+  }
+
+  function playAbleAudio(src) {
+    const audio = document.getElementById('global-able-player');
+    if (!audio) return;
+
+    const source = audio.querySelector('source');
+    source.src = src;
+
+    audio.load();
+
+    if (audio.ablePlayer) {
+      audio.ablePlayer.refreshControls();
+      audio.ablePlayer.playMedia();
+    } else {
+      audio.play();
+    }
+
+    document.getElementById('global-audio-wrapper')
+      ?.classList.remove('is-hidden');
+  }
+
+  Drupal.behaviors.ablePlayerRemoteLoad = {
+    attach(context) {
+      once('able-player-fetch', '.js-play-audio-from-node', context)
+        .forEach(link => {
+
+          link.addEventListener('click', async e => {
+            e.preventDefault();
+
+            const { src, title } = await getAudioSourceFromNode(link.href);
+
+            if (!src) {
+              console.warn('No Able Player audio found on page');
+              return;
+            }
+
+            playAbleAudio(src);
+
+            const titleEl = document.getElementById('global-audio-title');
+            if (titleEl && title) {
+              titleEl.textContent = title;
+            }
+          });
+        });
+    }
+  };
+
+})(Drupal, once);

js/custom.js

@@ -34,23 +34,66 @@
     }
   };
 })(Drupal);
-//(function ($) {
-
-    //Drupal.behaviors.LangSwitchBehavior = {
-        //attach: function (context, settings) {
-            //$("#text-fr").hide();
-
-            //$( "#show-text-en" , context).click(function(e) {
-                //e.preventDefault();
-                //$("#text-en").show();
-                //$("#text-fr").hide();
-            //});
-            //$( "#show-text-fr" , context).click(function(e) {
-                //e.preventDefault();
-                //$("#text-en").hide();
-                //$("#text-fr").show();
-            //});
-        //}
-    //};
-
-//}(jQuery));
+
+//(function (Drupal, once) {
+
+  //async function getAudioSourceFromNode(url) {
+    //const res = await fetch(url, {
+      //headers: { 'X-Requested-With': 'XMLHttpRequest' }
+    //});
+
+    //const html = await res.text();
+    //const doc = new DOMParser().parseFromString(html, 'text/html');
+
+    //// EXACT match for your markup
+    //const source = doc.querySelector(
+      //'audio[data-able-player] source[type="audio/mpeg"]'
+    //);
+
+    //return source?.src;
+  //}
+
+  //function playAbleAudio(src) {
+    //const audio = document.getElementById('global-able-player');
+    //if (!audio) return;
+
+    //const source = audio.querySelector('source');
+    //source.src = src;
+
+    //audio.load();
+
+    //// Access Able Player instance safely
+    //if (audio.ablePlayer) {
+      //audio.ablePlayer.refreshControls();
+      //audio.ablePlayer.playMedia();
+    //} else {
+      //audio.play();
+    //}
+
+    //document.getElementById('global-audio-wrapper')
+      //?.classList.remove('is-hidden');
+  //}
+
+  //Drupal.behaviors.ablePlayerRemoteLoad = {
+    //attach(context) {
+      //once('able-player-fetch', '.js-play-audio-from-node', context)
+        //.forEach(link => {
+
+          //link.addEventListener('click', async e => {
+            //e.preventDefault();
+
+            //const src = await getAudioSourceFromNode(link.href);
+
+            //if (!src) {
+              //console.warn('No Able Player audio found on page');
+              //return;
+            //}
+
+            //playAbleAudio(src);
+          //});
+        //});
+    //}
+  //};
+
+//})(Drupal, once);
+

olivesbdh.libraries.yml

@@ -58,6 +58,7 @@ global-styling:
   js:
     js/checkbox.js: {}
     js/custom.js: {}
+    js/audioplayer.js: {}
   dependencies:
     - core/drupal
     - core/once