Activate waveform at the project

markusweigelt · Sep 21, 2023 · 3d4e7ba · 3d4e7ba
1 parent 316a31e
commit 3d4e7ba
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 25 deletions.
diff --git a/Kitodo-DataManagement/src/main/java/org/kitodo/data/database/beans/Project.java b/Kitodo-DataManagement/src/main/java/org/kitodo/data/database/beans/Project.java
@@ -141,8 +141,11 @@ public class Project extends BaseIndexedBean implements Comparable<Project> {
     @JoinColumn(name = "mediaView_audio_folder_id", foreignKey = @ForeignKey(name = "FK_project_mediaView_audio_folder_id"))
     private Folder audioMediaView;
 
+    /**
+     * Field to define the status of the audio media view waveform.
+     */
     @Column(name = "mediaView_audio_waveform")
-    private Boolean audioMediaViewWaveform = true;
+    private Boolean audioMediaViewWaveform = false;
 
     /**
      * Folder with media to use for the video preview.
@@ -555,10 +558,20 @@ public void setAudioMediaView(Folder audioMediaView) {
         this.audioMediaView = audioMediaView;
     }
 
+    /**
+     * Get the status of the audio media view waveform.
+     *
+     * @return True if is active
+     */
     public boolean isAudioMediaViewWaveform() {
         return audioMediaViewWaveform;
     }
 
+    /**
+     * Set the status of the audio media view waveform.
+     *
+     * @param audioMediaViewWaveform True if is active
+     */
     public void setAudioMediaViewWaveform(boolean audioMediaViewWaveform) {
         this.audioMediaViewWaveform = audioMediaViewWaveform;
     }

diff --git a/...ment/src/main/resources/db/migration/V2_125__Add_audio_media_view_waveform_to_project.sql b/...ment/src/main/resources/db/migration/V2_125__Add_audio_media_view_waveform_to_project.sql
@@ -11,4 +11,4 @@
 
 --
 -- Migration: Add column for state of audio waveform in media view to project table.
-ALTER TABLE project ADD mediaView_audio_waveform TINYINT(1) NOT NULL DEFAULT 1
+ALTER TABLE project ADD mediaView_audio_waveform TINYINT(1) NOT NULL DEFAULT 0
diff --git a/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/GalleryPanel.java b/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/GalleryPanel.java
@@ -228,6 +228,13 @@ public void onPageDrop() {
         }
     }
 
+    /**
+     * Check if audio media view waveform is activated in project.
+     */
+    public boolean isAudioMediaViewWaveform() {
+        return dataEditor.getProcess().getProject().isAudioMediaViewWaveform();
+    }
+
     private boolean dragStripeIndexMatches(String dragId) {
         Matcher dragStripeImageMatcher = DRAG_STRIPE_IMAGE.matcher(dragId);
         Matcher dragUnstructuredMediaMatcher = DRAG_UNSTRUCTURED_MEDIA.matcher(dragId);

diff --git a/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css b/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css
@@ -3966,6 +3966,16 @@ footer {
     max-width: 300px;
 }
 
+.loader {
+    width: 30px;
+    height: 30px;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+}
+
 /*----------------------------------------------------------------------
 min 700px
 ----------------------------------------------------------------------*/

diff --git a/Kitodo/src/main/webapp/WEB-INF/resources/js/media_detail_audio.js b/Kitodo/src/main/webapp/WEB-INF/resources/js/media_detail_audio.js
@@ -16,10 +16,16 @@ let audios = document.querySelectorAll('audio.mediaPreviewItem');
 let audio = audios[0];
 audio.src = audio.currentSrc;
 
+let loader = document.createElement("div");
+loader.innerHTML = '<i class="fa fa-spinner fa-spin"/>'
+loader.classList.add('loader')
+audio.parentNode.insertBefore(loader, audio);
+
 let waveContainer = document.createElement("div");
 waveContainer.setAttribute("id", "wave-container");
 waveContainer.onclick = function(){wavesurfer.playPause()}
 waveContainer.style.width = "90%";
+waveContainer.style.display = "none";
 audio.parentNode.insertBefore(waveContainer, audio);
 
 const wavesurfer = WaveSurfer.create({
@@ -32,6 +38,11 @@ const wavesurfer = WaveSurfer.create({
     minPxPerSec: 0,
 });
 
+wavesurfer.on("ready", function () {
+    waveContainer.style.display = "block";
+    loader.style.display = "none";
+});
+
 wavesurfer.once('decode', () => {
     let waveToolsContainer = document.getElementById("waveTools")
     const waveToolsSlider = waveToolsContainer.querySelector('input[type="range"]')
@@ -54,3 +65,4 @@ wavesurfer.once('decode', () => {
 wavesurfer.on("error", function (e) {
     console.warn(e);
 });
+
diff --git a/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-detail.xhtml b/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-detail.xhtml
@@ -26,28 +26,30 @@
         <ui:fragment
                 rendered="#{mediaProvider.hasMediaViewVariant(selectedGalleryMediaContent) and (fn:startsWith(selectedGalleryMediaContent.mediaViewMimeType, 'video') or fn:startsWith(selectedGalleryMediaContent.mediaViewMimeType, 'audio'))}">
 
-            <div id="waveTools" >
-                <div>
-                    <label>Zoom: <input type="range" min="0" max="1000" value="0"/></label>
+            <p:outputPanel rendered="#{fn:startsWith(selectedGalleryMediaContent.mediaViewMimeType, 'audio') and DataEditorForm.galleryPanel.isAudioMediaViewWaveform()}">
+                <div id="waveTools" >
+                    <div>
+                        <label>Zoom: <input type="range" min="0" max="1000" value="0"/></label>
+                    </div>
+                    <div>
+                        <label>Auto Center: <input type="checkbox" checked="" value="autoCenter"/></label>
+                    </div>
+                    <div>
+                        <p:commandButton title="5 Sekunden zurückspringen"
+                                         icon="fa fa-angle-double-left"
+                                         styleClass="secondary"/>
+                        <p:commandButton title="1 Sekunde zurückspringen"
+                                         icon="fa fa-angle-left"
+                                         styleClass="secondary"/>
+                        <p:commandButton title="1 Sekunde zurückspringen"
+                                         icon="fa fa-angle-right"
+                                         styleClass="secondary"/>
+                        <p:commandButton title="5 Sekunden zurückspringen"
+                                         icon="fa fa-angle-double-right"
+                                         styleClass="secondary"/>
+                    </div>
                 </div>
-                <div>
-                    <label>Auto Center: <input type="checkbox" checked="" value="autoCenter"/></label>
-                </div>
-                <div>
-                    <p:commandButton title="5 Sekunden zurückspringen"
-                                     icon="fa fa-angle-double-left"
-                                     styleClass="secondary"/>
-                    <p:commandButton title="1 Sekunde zurückspringen"
-                                     icon="fa fa-angle-left"
-                                     styleClass="secondary"/>
-                    <p:commandButton title="1 Sekunde zurückspringen"
-                                     icon="fa fa-angle-right"
-                                     styleClass="secondary"/>
-                    <p:commandButton title="5 Sekunden zurückspringen"
-                                     icon="fa fa-angle-double-right"
-                                     styleClass="secondary"/>
-                </div>
-            </div>
+            </p:outputPanel>
 
             <p:media styleClass="mediaPreviewItem" value="#{mediaProvider.mediaView}"
                      player="#{fn:startsWith(selectedGalleryMediaContent.mediaViewMimeType, 'video') ? 'html-video' : 'html-audio'}"
@@ -61,8 +63,10 @@
                 <f:param name="type" value="#{selectedGalleryMediaContent.mediaViewMimeType}"/>
                 <f:param name="krsc" value="true"/>
             </p:media>
-            <h:outputScript a:type="module" name="js/libs/wavesurfer/wavesurfer.esm.js" rendered="#{fn:startsWith(selectedGalleryMediaContent.mediaViewMimeType, 'audio')}" />
-            <h:outputScript a:type="module" name="js/media_detail_audio.js" rendered="#{fn:startsWith(selectedGalleryMediaContent.mediaViewMimeType, 'audio')}" />
+
+            <h:outputScript a:type="module" name="js/libs/wavesurfer/wavesurfer.esm.js" rendered="#{fn:startsWith(selectedGalleryMediaContent.mediaViewMimeType, 'audio') and DataEditorForm.galleryPanel.isAudioMediaViewWaveform()}"  />
+            <h:outputScript a:type="module" name="js/media_detail_audio.js" rendered="#{fn:startsWith(selectedGalleryMediaContent.mediaViewMimeType, 'audio') and DataEditorForm.galleryPanel.isAudioMediaViewWaveform()}" />
+
         </ui:fragment>
 
         <ui:fragment

diff --git a/Kitodo/src/main/webapp/WEB-INF/templates/includes/projectEdit/projectEditMets.xhtml b/Kitodo/src/main/webapp/WEB-INF/templates/includes/projectEdit/projectEditMets.xhtml
@@ -212,6 +212,7 @@
     <p:selectBooleanCheckbox id="audioMediaViewWaveform" styleClass="switch input so-folder-use"
                              value="#{ProjectForm.audioMediaViewWaveform}" disabled="#{ProjectForm.locked}"
                              rendered="#{ProjectForm.hasAudioFolder()}">
+        <p:ajax event="change" oncomplete="toggleSave()"/>
     </p:selectBooleanCheckbox>
 
     <!-- folder for video preview -->