diff --git a/modules/islandora_audio/js/audio.js b/modules/islandora_audio/js/audio.js
index 72907a79c..606835a29 100644
--- a/modules/islandora_audio/js/audio.js
+++ b/modules/islandora_audio/js/audio.js
@@ -50,43 +50,69 @@
return cues;
}
- const vtt_source = element.querySelector("track[kind='captions'], track[kind='subtitles']")?.getAttribute('src');
- if (!vtt_source) { return; }
- fetch(vtt_source).then(response => {
- if (!response.ok) {
- throw new Error(`HTTP error! status: ${response.status}`);
+ element.textTracks.addEventListener('change', function(e) {
+ // Which track is showing?
+ element.setAttribute('data-showing', false);
+ for (let i = 0; i < this.length; i++) {
+ if (this[i].mode === 'showing') {
+ // Build cues for this track, now we know the index.
+ // @todo: Make this work with multiple audio elements.
+ var src = document.querySelectorAll("track[kind='captions'], track[kind='subtitles']")[i].getAttribute('src');
+ bindVttSource(src);
+ element.setAttribute('data-showing', true);
+ }
}
- return response.text();
- }).then(text => {
- const cues = parseWebVTT(text);
+ });
- // Create a Custom Event attached to the timeupdate event to pass cues along.
- element.addEventListener('timeupdate', (e) => {
- const captionEvent = new CustomEvent('updateCaptions', { detail: cues })
- e.target.dispatchEvent(captionEvent);
- });
- element.addEventListener('updateCaptions', (e) => {
- if (!e.detail) {
- return;
- }
+ // Invoke change event to get started.
+ const changeEvent = new Event('change');
+ element.textTracks.dispatchEvent(changeEvent);
- // Grab the caption for the current time.
- const currentTime = e.target.currentTime;
- let cue = e.detail.find(
- (cue) =>
- currentTime >= cue.start &&
- currentTime <= cue.end
- );
+ function bindVttSource(vtt_source) {
- // Update the caption box.
- let captionsBox = e.target.parentElement.querySelector('div.audioTrack')
- if (cue?.text) {
- captionsBox.innerHTML = cue.text.replace(/\n/g, "
");
- } else {
- captionsBox.innerHTML = '';
+ fetch(vtt_source).then(response => {
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
}
+ return response.text();
+ }).then(text => {
+ const cues = parseWebVTT(text);
+
+ // Create a Custom Event attached to the timeupdate event to pass cues along.
+ element.addEventListener('timeupdate', (e) => {
+ const captionEvent = new CustomEvent('updateCaptions', { detail: cues })
+ e.target.dispatchEvent(captionEvent);
+ });
+ element.addEventListener('updateCaptions', (e) => {
+ if (!e.detail) {
+ return;
+ }
+ // Check if a track is showing.
+ var showing = e.target.getAttribute('data-showing');
+ // Update the caption box.
+ let captionsBox = e.target.parentElement.querySelector('div.audioTrack');
+ if (showing === 'true') {
+ // Grab the caption for the current time.
+ const currentTime = e.target.currentTime;
+ let cue = e.detail.find(
+ (cue) =>
+ cue !== null &&
+ currentTime >= cue.start &&
+ currentTime <= cue.end
+ );
+ if (cue?.text) {
+ captionsBox.innerHTML = cue.text.replace(/\n/g, "
");
+ }
+ else {
+ captionsBox.innerHTML = '';
+ }
+ }
+ else {
+ captionsBox.innerHTML = '';
+ }
+ });
});
- });
+ }
})
}
}