Automatically pause media when content tabs are hidden

material/base.html

@@ -240,7 +240,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.fac441b0.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.c2be25ad.min.js' | url }}"></script>
       {% for path in config.extra_javascript %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

src/assets/javascripts/components/content/tabs/index.ts

@@ -244,6 +244,13 @@ export function mountContentTabs(
           }
         })
 
+    /* Pause media (audio, video) on switch - see https://bit.ly/3Bk6cel */
+    push$.pipe(takeUntil(done$))
+      .subscribe(() => {
+        for (const media of getElements<HTMLAudioElement>("audio, video", el))
+          media.pause()
+      })
+
     /* Create and return component */
     return watchContentTabs(el)
       .pipe(