improvements selecting media view and comments in media audio waveform

markusweigelt · Oct 5, 2023 · 6b5bf50 · 6b5bf50
1 parent 3b70d39
commit 6b5bf50
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 15 deletions.
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
@@ -25,28 +25,33 @@ class AudioWaveform {
     init() {
         let self = this
         this.#audioElement = document.querySelector('audio.mediaPreviewItem')
-        if (this.#audioElement.getAttribute("data-audio-waveform") != "initialized") {
+        if (this.#audioElement && this.#audioElement.getAttribute("data-audio-waveform") != "initialized") {
             this.#audioElement.setAttribute("data-audio-waveform", "initialized")
 
+            // add a loader to visualize loading process
+            this.#loader = document.createElement("div");
+            this.#loader.innerHTML = '<i class="fa fa-spinner fa-spin"/>'
+            this.#loader.classList.add('loader')
+            this.#audioElement.parentNode.insertBefore(this.#loader, this.#audioElement);
+
+            // when the user agent can play the media
             this.#audioElement && this.#audioElement.addEventListener("canplay", () => {
-               clearTimeout(this.#buildTimeout );
+                // Prevent browser crashes during audio decoding when multiple rapid clicks, such as double-clicking, occur.
+                clearTimeout(this.#buildTimeout);
                self.#buildTimeout = setTimeout(function() {
                     self.#build();
                }, 500)
             }, {once: true});
 
-            this.#loader = document.createElement("div");
-            this.#loader.innerHTML = '<i class="fa fa-spinner fa-spin"/>'
-            this.#loader.classList.add('loader')
-            this.#audioElement.parentNode.insertBefore(this.#loader, this.#audioElement);
-
         }
     }
 
     #build() {
         let self = this
+        // wavesurfer uses the 'src' attribute of the audio element, and we add this attribute based on the browser's current source selection
         this.#audioElement.src = this.#audioElement.currentSrc;
 
+        // get the media id from the source parameter
         const urlParams = new URLSearchParams(this.#audioElement.src);
         let mediaId = urlParams.get('mediaId')
 
@@ -70,15 +75,12 @@ class AudioWaveform {
             peaks: this.#peaksCache[mediaId]
         });
 
-        console.log("add ready handler");
-
-        // cache peaks after when audio has been decoded
         this.#wavesurfer.on("decode", function () {
+            // cache peaks after when audio has been decoded
             self.#peaksCache[mediaId] = self.#wavesurfer.getDecodedData().getChannelData(0)
         });
 
         this.#wavesurfer.on("ready", function () {
-            console.log("run ready handler");
             waveContainer.style.display = "block";
             self.#loader.style.display = "none";
 
@@ -114,10 +116,8 @@ class AudioWaveform {
 
 }
 
-console.log("first initialisation");
 const audioWaveform= new AudioWaveform()
 
 document.addEventListener("kitodo-metadataditor-mediaview-update", function () {
-    console.log("update media view");
     audioWaveform.init();
 });
diff --git a/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/dialogs/pagination.xhtml b/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/dialogs/pagination.xhtml
@@ -47,7 +47,7 @@
                                               showCheckbox="true">
                                 <f:selectItems value="#{DataEditorForm.paginationPanel.paginationSelectionItems}"/>
                                 <p:ajax event="change"
-                                        oncomplete="changeToMapView();scrollToSelectedThumbnail();scrollToSelectedTreeNode();"
+                                        oncomplete="changeToMapView();metadataEditor.gallery.mediaView.update();scrollToSelectedThumbnail();scrollToSelectedTreeNode();"
                                         update="galleryHeadingWrapper,imagePreviewForm:mediaDetail,metadataAccordion:logicalMetadataWrapperPanel"/>
                             </p:selectManyMenu>
                         </div>

diff --git a/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/gallery.xhtml b/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/gallery.xhtml
@@ -65,7 +65,7 @@
                     <p:commandButton id="previewButton"
                                      update="imagePreviewForm galleryHeadingWrapper"
                                      icon="fa fa-file"
-                                     oncomplete="metadataEditor.shortcuts.updateViews();scrollToSelectedPreviewThumbnail();changeToMapView()"
+                                     oncomplete="metadataEditor.shortcuts.updateViews();scrollToSelectedPreviewThumbnail();changeToMapView();metadataEditor.gallery.mediaView.update();"
                                      title="#{msgs['dataEditor.galleryDetailView']}"
                                      styleClass="#{DataEditorForm.galleryPanel.galleryViewMode eq 'preview' ? 'active' : 'inactive'}">
                         <f:setPropertyActionListener value="preview" target="#{DataEditorForm.galleryPanel.galleryViewMode}"/>