diff --git a/Kitodo/src/main/webapp/WEB-INF/resources/js/media_detail_audio_waveform.js b/Kitodo/src/main/webapp/WEB-INF/resources/js/media_detail_audio_waveform.js index dd8d71bc195..ab7ca7d4119 100644 --- a/Kitodo/src/main/webapp/WEB-INF/resources/js/media_detail_audio_waveform.js +++ b/Kitodo/src/main/webapp/WEB-INF/resources/js/media_detail_audio_waveform.js @@ -14,23 +14,32 @@ import WaveSurfer from './libs/wavesurfer/wavesurfer.esm.js.jsf' class AudioWaveform { #audioElement; #wavesurfer; + #buildTimeout; + #loader; + #peaksCache = []; constructor() { this.init(); } init() { + let self = this this.#audioElement = document.querySelector('audio.mediaPreviewItem') if (this.#audioElement.getAttribute("data-audio-waveform") != "initialized") { this.#audioElement.setAttribute("data-audio-waveform", "initialized") - this.#build(); - /* - console.log("add can play handler"); this.#audioElement && this.#audioElement.addEventListener("canplay", () => { - console.log("handle can play once"); + clearTimeout(this.#buildTimeout ); + self.#buildTimeout = setTimeout(function() { + self.#build(); + }, 500) + }, {once: true}); + + this.#loader = document.createElement("div"); + this.#loader.innerHTML = '' + this.#loader.classList.add('loader') + this.#audioElement.parentNode.insertBefore(this.#loader, this.#audioElement); - }, {once: true});*/ } } @@ -38,10 +47,8 @@ class AudioWaveform { let self = this this.#audioElement.src = this.#audioElement.currentSrc; - let loader = document.createElement("div"); - loader.innerHTML = '' - loader.classList.add('loader') - this.#audioElement.parentNode.insertBefore(loader, this.#audioElement); + const urlParams = new URLSearchParams(this.#audioElement.src); + let mediaId = urlParams.get('mediaId') let waveContainer = document.createElement("div"); waveContainer.setAttribute("id", "wave-container"); @@ -60,25 +67,32 @@ class AudioWaveform { cursorColor: "#ffffff", media: this.#audioElement, minPxPerSec: 0, + peaks: this.#peaksCache[mediaId] }); console.log("add ready handler"); + + // cache peaks after when audio has been decoded + this.#wavesurfer.on("decode", function () { + self.#peaksCache[mediaId] = self.#wavesurfer.getDecodedData().getChannelData(0) + }); + this.#wavesurfer.on("ready", function () { console.log("run ready handler"); waveContainer.style.display = "block"; - loader.style.display = "none"; + self.#loader.style.display = "none"; let waveToolsContainer = document.getElementById("waveTools") const waveToolsSlider = waveToolsContainer.querySelector('input[type="range"]') waveToolsSlider.addEventListener('input', (e) => { const minPxPerSec = e.target.valueAsNumber - this.#wavesurfer.zoom(minPxPerSec) + self.#wavesurfer.zoom(minPxPerSec) }) waveToolsContainer.querySelectorAll('input[type="checkbox"]').forEach((input) => { input.onchange = (e) => { - this.#wavesurfer.setOptions({ + self.#wavesurfer.setOptions({ [input.value]: e.target.checked, }) } @@ -88,7 +102,7 @@ class AudioWaveform { jumpButton.addEventListener('click', function (event) { event.stopPropagation(); let jumpSeconds = parseInt(this.getAttribute("data-audio-waveform-jump-seconds")); - this.#wavesurfer.setTime(this.#wavesurfer.getCurrentTime() + jumpSeconds) + self.#wavesurfer.setTime(self.#wavesurfer.getCurrentTime() + jumpSeconds) }); }); }); @@ -100,13 +114,10 @@ class AudioWaveform { } -const audioWaveform= new AudioWaveform() console.log("first initialisation"); -let timeout; +const audioWaveform= new AudioWaveform() + document.addEventListener("kitodo-metadataditor-mediaview-update", function () { console.log("update media view"); - clearTimeout(timeout); - timeout = setTimeout(function() { - audioWaveform.init(); - }, 2000) + audioWaveform.init(); });