Cache-bust MP3 content

src/html/main/surah-stream.html.erb

@@ -23,7 +23,8 @@
     <%= erb("_postman.html.erb", {locale: context.locale, dir: context.dir}) %>
     <div class="app mount root"
          data-surah-id="<%= context.surah.id %>"
-         data-audio-base-url="<%= audio_base_url %>">
+         data-audio-base-url="<%= audio_base_url %>"
+         data-commit-id="<%= commit %>">
     </div>
     <script src="/js/loaders/surah-stream-loader.js?v=<%= commit %>"></script>
   </body>

src/js/components/AudioControl.tsx

@@ -23,6 +23,7 @@ export function AudioControl({
   const [enabled, setEnabled] = useState<boolean>(false);
   const [audioStatus, setAudioStatus] = useState<Maybe<TAudioStatus>>(null);
   const [audioBaseUrl, setAudioBaseUrl] = useState<Maybe<string>>(null);
+  const [commitId, setCommitId] = useState<Maybe<string>>(null);
   const play = (audio: HTMLAudioElement) => audio.play().catch(() => null);
   const pause = (audio: HTMLAudioElement) => audio.pause();
 
@@ -31,7 +32,7 @@ export function AudioControl({
       return;
     }
     if (enabled) {
-      audio.src = [audioBaseUrl, surah.id, `${ayah.id}.mp3`].join("/");
+      audio.src = [audioBaseUrl, surah.id, `${ayah.id}.mp3?v=${commitId}`].join("/");
       play(audio);
     }
   }, [hidden, enabled, ayah?.id, audioBaseUrl]);
@@ -41,8 +42,10 @@ export function AudioControl({
       "[data-audio-base-url]",
     );
     const url = el?.dataset?.audioBaseUrl;
+    const commit = el?.dataset?.commitId
     if (url?.length) {
       setAudioBaseUrl(url);
+      setCommitId(commit);
     } else {
       console.warn("audio.base_url is not set");
     }