Play all MP3s button, refs #2

Author: simonw

datasette_mp3_audio/__init__.py

@@ -2,6 +2,15 @@
 from markupsafe import Markup, escape
 
 
+@hookimpl
+def extra_js_urls(columns, datasette):
+    if not columns:
+        return None
+    return [
+        datasette.urls.static_plugins("datasette-mp3-audio", "datasette-mp3-audio.js")
+    ]
+
+
 @hookimpl
 def render_cell(value):
     if not isinstance(value, str):

datasette_mp3_audio/static/datasette-mp3-audio.js

@@ -0,0 +1,54 @@
+document.addEventListener("DOMContentLoaded", () => {
+  let currentlyPlaying = null;
+  function playAllAudios() {
+    let audios = Array.from(document.querySelectorAll('audio'));
+    function playNext() {
+        if (!audios.length) {
+            return;
+        }
+        currentlyPlaying = audios.shift();
+        let listener = () => { playNext(); }
+        currentlyPlaying.endedListener = listener;
+        currentlyPlaying.addEventListener('ended', listener);
+        currentlyPlaying.play();
+    }
+    playNext();
+  }
+
+  const audios = document.querySelectorAll('audio');
+  if (audios.length < 2) {
+    // Not enough audio elements
+    return;
+  }
+  // Add a button to play all
+  const button = document.createElement('button');
+  button.setAttribute('type', 'button');
+  // Datasette button CSS looks for form button[type=button]
+  const form = document.createElement('form');
+  form.style.marginBottom = '1em';
+  form.appendChild(button);
+  button.innerText = `Play all ${audios.length} MP3s`;
+  let isPlaying = false;
+  button.addEventListener('click', () => {
+    if (!isPlaying) {
+      // First clean up any previous endedListener
+      audios.forEach(el => {
+        el.currentTime = 0;
+        if (el.endedListener) {
+          el.removeEventListener('ended', el.endedListener);
+        }
+      });
+      playAllAudios();
+      isPlaying = true;
+      button.innerText = `Playing all ${audios.length} MP3s - Stop`;
+    } else {
+      if (currentlyPlaying) {
+        currentlyPlaying.pause();
+      }
+      isPlaying = false;
+      button.innerText = `Play all ${audios.length} MP3s`;
+    }
+  });
+  const tableWrapper = document.querySelector('.table-wrapper');
+  tableWrapper.parentNode.insertBefore(form, tableWrapper);
+});

setup.py

@@ -34,5 +34,10 @@ def get_long_description():
     entry_points={"datasette": ["mp3_audio = datasette_mp3_audio"]},
     install_requires=["datasette"],
     extras_require={"test": ["pytest", "pytest-asyncio", "sqlite-utils"]},
+    package_data={
+        "datasette_mp3_audio": [
+            "static/*.js",
+        ],
+    },
     python_requires=">=3.7",
 )