From ce1be479ca668a9e57be0e36ec3fbf5b01b6d8b5 Mon Sep 17 00:00:00 2001
From: Markus Weigelt <markus.weigelt@slub-dresden.de>
Date: Tue, 5 Dec 2023 17:06:31 +0100
Subject: [PATCH] refactory js modules, add milliseconds selection and fix tiny
 bugs

---
 .../webapp/WEB-INF/resources/css/kitodo.css   |  6 +-
 .../WEB-INF/resources/js/metadata_editor.js   |  3 +-
 .../media_detail_audio_waveform.js            |  4 +-
 .../media_detail_media_formatted_time.js      |  2 +-
 .../media-detail-audio-waveform-tools.xhtml   | 26 ++++++++
 .../media-detail-media-formatted-time.xhtml   | 64 +++++++++++++++++++
 .../partials/media-detail.xhtml               | 62 +++---------------
 .../metadataEditor/partials/media-list.xhtml  |  2 +-
 8 files changed, 106 insertions(+), 63 deletions(-)
 rename Kitodo/src/main/webapp/WEB-INF/resources/js/{ => modules}/media_detail_audio_waveform.js (96%)
 rename Kitodo/src/main/webapp/WEB-INF/resources/js/{ => modules}/media_detail_media_formatted_time.js (93%)
 create mode 100644 Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-detail-audio-waveform-tools.xhtml
 create mode 100644 Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-detail-media-formatted-time.xhtml

diff --git a/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css b/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css
index 0a4d9885807..19ed93ecc85 100644
--- a/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css
+++ b/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css
@@ -3125,7 +3125,7 @@ Column content
     color: var(--cloudy-gray);
 }
 
-#imagePreviewForm\:mediaDetail #audioWaveformTools,
+#imagePreviewForm\:audioWaveformTools,
 #imagePreviewForm\:mediaDetailMediaFormattedTime {
     display: flex;
     gap: 10px;
@@ -3136,11 +3136,11 @@ Column content
     border-radius: 3px;
 }
 
-#imagePreviewForm\:mediaDetail #audioWaveformTools > div > button:first-child {
+#imagePreviewForm\:audioWaveformTools > div > button:first-child {
     margin-left: 0;
 }
 
-#imagePreviewForm\:mediaDetail #audioWaveformTools > div > button {
+#imagePreviewForm\:audioWaveformTools > div > button {
     margin-left: 10px;
 }
 
diff --git a/Kitodo/src/main/webapp/WEB-INF/resources/js/metadata_editor.js b/Kitodo/src/main/webapp/WEB-INF/resources/js/metadata_editor.js
index bc0e264948d..f608a5d1934 100644
--- a/Kitodo/src/main/webapp/WEB-INF/resources/js/metadata_editor.js
+++ b/Kitodo/src/main/webapp/WEB-INF/resources/js/metadata_editor.js
@@ -72,7 +72,7 @@ metadataEditor.gallery = {
             return Math.trunc(number * Math.pow(10, decimal)) / Math.pow(10, decimal)
         },
         convertSecondsToFormattedTime(seconds) {
-            let hours = parseInt(seconds / 3600); // 3,600 seconds in 1 hour
+            let hours = parseInt(parseInt(seconds) / 3600); // 3,600 seconds in 1 hour
             seconds = seconds % 3600; // seconds remaining after extracting hours
             let minutes = parseInt(seconds / 60); // 60 seconds in 1 minute
             seconds = seconds % 60;
@@ -145,7 +145,6 @@ metadataEditor.gallery = {
                 mediaElement.addEventListener("mediaPartialStopPlay", onMediaPartialStopPlay);
                 mediaElement.addEventListener("pause", onMediaPartialStopPlay);
                 mediaElement.dataset.mediaPartialTimeBegin = formattedTimeBegin;
-
                 mediaElement.play();
             }
         },
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/modules/media_detail_audio_waveform.js
similarity index 96%
rename from Kitodo/src/main/webapp/WEB-INF/resources/js/media_detail_audio_waveform.js
rename to Kitodo/src/main/webapp/WEB-INF/resources/js/modules/media_detail_audio_waveform.js
index c03d5eea393..aad70ee388e 100644
--- a/Kitodo/src/main/webapp/WEB-INF/resources/js/media_detail_audio_waveform.js
+++ b/Kitodo/src/main/webapp/WEB-INF/resources/js/modules/media_detail_audio_waveform.js
@@ -9,7 +9,7 @@
  * GPL3-License.txt file that was distributed with this source code.
  */
 
-import WaveSurfer from './libs/wavesurfer/wavesurfer.esm.js.jsf';
+import WaveSurfer from './../libs/wavesurfer/wavesurfer.esm.js.jsf';
 
 class AudioWaveform {
     #audioElement;
@@ -87,7 +87,7 @@ class AudioWaveform {
             waveContainer.style.display = "block";
             self.#loader.style.display = "none";
 
-            let waveToolsContainer = document.getElementById("audioWaveformTools");
+            let waveToolsContainer = document.getElementById("imagePreviewForm:audioWaveformTools");
             const waveToolsSlider = waveToolsContainer.querySelector('input[type="range"]');
 
             waveToolsSlider.addEventListener('input', (e) => {
diff --git a/Kitodo/src/main/webapp/WEB-INF/resources/js/media_detail_media_formatted_time.js b/Kitodo/src/main/webapp/WEB-INF/resources/js/modules/media_detail_media_formatted_time.js
similarity index 93%
rename from Kitodo/src/main/webapp/WEB-INF/resources/js/media_detail_media_formatted_time.js
rename to Kitodo/src/main/webapp/WEB-INF/resources/js/modules/media_detail_media_formatted_time.js
index 1285e56093d..5312706aa4e 100644
--- a/Kitodo/src/main/webapp/WEB-INF/resources/js/media_detail_media_formatted_time.js
+++ b/Kitodo/src/main/webapp/WEB-INF/resources/js/modules/media_detail_media_formatted_time.js
@@ -25,7 +25,7 @@ Array.from(jumpButtons).forEach(function (jumpButton) {
     jumpButton.addEventListener('click', function () {
         mediaElement.pause()
         let jumpMilliseconds = parseInt(this.getAttribute("data-media-formatted-time-jump-milliseconds"));
-        mediaElement.currentTime = mediaElement.currentTime + jumpMilliseconds / 1000
+        mediaElement.currentTime = ((mediaElement.currentTime * 1000) + jumpMilliseconds) / 1000
         formattedTime.innerHTML = metadataEditor.gallery.mediaPartial.convertSecondsToFormattedTime(mediaElement.currentTime);
     });
 });
diff --git a/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-detail-audio-waveform-tools.xhtml b/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-detail-audio-waveform-tools.xhtml
new file mode 100644
index 00000000000..db165ff49ad
--- /dev/null
+++ b/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-detail-audio-waveform-tools.xhtml
@@ -0,0 +1,26 @@
+<!--
+ *
+ * (c) Kitodo. Key to digital objects e. V. <contact@kitodo.org>
+ *
+ * This file is part of the Kitodo project.
+ *
+ * It is licensed under GNU General Public License version 3 or later.
+ *
+ * For the full copyright and license information, please read the
+ * GPL3-License.txt file that was distributed with this source code.
+ *
+-->
+
+<ui:composition
+        xmlns:h="http://xmlns.jcp.org/jsf/html"
+        xmlns:p="http://primefaces.org/ui"
+        xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
+    <p:outputPanel id="audioWaveformTools" rendered="#{fn:startsWith(selectedGalleryMediaContent.mediaViewMimeType, 'audio') and DataEditorForm.galleryPanel.isAudioMediaViewWaveform()}">
+        <div>
+            <label><h:outputText value="#{msgs.audioWaveformToolsZoom}"/>: <input type="range" min="0" max="250" value="0"/></label>
+        </div>
+        <div>
+            <label><h:outputText value="#{msgs.audioWaveformToolsCenteredCursor}"/>: <input type="checkbox" checked="" value="autoCenter"/></label>
+        </div>
+    </p:outputPanel>
+</ui:composition>
diff --git a/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-detail-media-formatted-time.xhtml b/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-detail-media-formatted-time.xhtml
new file mode 100644
index 00000000000..296a13a6fc9
--- /dev/null
+++ b/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-detail-media-formatted-time.xhtml
@@ -0,0 +1,64 @@
+<!--
+ *
+ * (c) Kitodo. Key to digital objects e. V. <contact@kitodo.org>
+ *
+ * This file is part of the Kitodo project.
+ *
+ * It is licensed under GNU General Public License version 3 or later.
+ *
+ * For the full copyright and license information, please read the
+ * GPL3-License.txt file that was distributed with this source code.
+ *
+-->
+
+<ui:composition
+        xmlns:h="http://xmlns.jcp.org/jsf/html"
+        xmlns:p="http://primefaces.org/ui"
+        xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+        xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
+
+    <p:outputPanel id="mediaDetailMediaFormattedTime" rendered="#{DataEditorForm.galleryPanel.mediaPartialsPanel.enabled}" >
+        <p:commandButton title="#{msgs.jumpBackwardOnSecond}"
+                         type="button"
+                         icon="fa fa-step-backward"
+                         styleClass="secondary"
+                         a:data-media-formatted-time-jump-milliseconds="-1000"/>
+        <p:commandButton title="#{msgs.jumpBackwardOnHundredMilliseconds}"
+                         type="button"
+                         icon="fa fa-chevron-left"
+                         styleClass="media-formatted-time-jump-button secondary"
+                         a:data-media-formatted-time-jump-milliseconds="-100"/>
+        <p:commandButton title="#{msgs.jumpBackwardTenMilliseconds}"
+                         type="button"
+                         icon="fa fa-angle-double-left"
+                         styleClass="media-formatted-time-jump-button secondary"
+                         a:data-media-formatted-time-jump-milliseconds="-10"/>
+        <p:commandButton title="#{msgs.jumpBackwardOneMillisecond}"
+                         type="button"
+                         icon="fa fa-angle-left"
+                         styleClass="media-formatted-time-jump-button secondary"
+                         a:data-media-formatted-time-jump-milliseconds="-1"/>
+        <p:commandButton title="#{msgs.jumpForwardOneMillisecond}"
+                         type="button"
+                         icon="fa fa-angle-right"
+                         styleClass="media-formatted-time-jump-button secondary"
+                         a:data-media-formatted-time-jump-milliseconds="1"/>
+        <p:commandButton title="#{msgs.jumpForwardTenMilliseconds}"
+                         type="button"
+                         icon="fa fa-angle-double-right"
+                         styleClass="media-formatted-time-jump-button secondary"
+                         a:data-media-formatted-time-jump-milliseconds="10"/>
+        <p:commandButton title="#{msgs.jumpForwardOnHundredMilliseconds}"
+                         type="button"
+                         icon="fa fa-chevron-right"
+                         styleClass="media-formatted-time-jump-button secondary"
+                         a:data-media-formatted-time-jump-milliseconds="100"/>
+        <p:commandButton title="#{msgs.jumpForwardOneSecond}"
+                         type="button"
+                         icon="fa fa-step-forward"
+                         styleClass="media-formatted-time-jump-button secondary"
+                         a:data-media-formatted-time-jump-milliseconds="1000"/>
+    </p:outputPanel>
+    <h:outputScript a:type="module" name="js/modules/media_detail_media_formatted_time.js" rendered="#{DataEditorForm.galleryPanel.mediaPartialsPanel.enabled}" />
+
+</ui:composition>
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
index 5b796a9bc59..dce58e2ad7d 100644
--- 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
@@ -28,16 +28,10 @@
 
             <p:outputPanel id="mediaDetailMediaContainer">
 
-                <p:outputPanel rendered="#{fn:startsWith(selectedGalleryMediaContent.mediaViewMimeType, 'audio') and DataEditorForm.galleryPanel.isAudioMediaViewWaveform()}">
-                  <div id="audioWaveformTools" >
-                      <div>
-                          <label><h:outputText value="#{msgs.audioWaveformToolsZoom}"/>: <input type="range" min="0" max="250" value="0"/></label>
-                      </div>
-                      <div>
-                          <label><h:outputText value="#{msgs.audioWaveformToolsCenteredCursor}"/>: <input type="checkbox" checked="" value="autoCenter"/></label>
-                      </div>
-                  </div>
-                </p:outputPanel>
+                <ui:include
+                        src="/WEB-INF/templates/includes/metadataEditor/partials/media-detail-audio-waveform-tools.xhtml">
+                    <ui:param name="selectedGalleryMediaContent" value="#{selectedGalleryMediaContent}"/>
+                </ui:include>
 
                 <p:media styleClass="mediaPreviewItem" value="#{mediaProvider.mediaView}"
                        player="#{fn:startsWith(selectedGalleryMediaContent.mediaViewMimeType, 'video') ? 'html-video' : 'html-audio'}"
@@ -52,53 +46,13 @@
                   <f:param name="krsc" value="true"/>
                 </p:media>
 
-                <p:outputPanel id="mediaDetailMediaFormattedTime">
-                    <p:commandButton title="#{msgs.jumpBackwardOnSecond}"
-                                     type="button"
-                                     icon="fa fa-step-backward"
-                                     styleClass="secondary"
-                                     a:data-media-formatted-time-jump-milliseconds="-1000"/>
-                    <p:commandButton title="#{msgs.jumpBackwardOnHundredMilliseconds}"
-                                     type="button"
-                                     icon="fa fa-chevron-left"
-                                     styleClass="media-formatted-time-jump-button secondary"
-                                     a:data-media-formatted-time-jump-milliseconds="-100"/>
-                    <p:commandButton title="#{msgs.jumpBackwardTenMilliseconds}"
-                                     type="button"
-                                     icon="fa fa-angle-double-left"
-                                     styleClass="media-formatted-time-jump-button secondary"
-                                     a:data-media-formatted-time-jump-milliseconds="-10"/>
-                    <p:commandButton title="#{msgs.jumpBackwardOneMillisecond}"
-                                     type="button"
-                                     icon="fa fa-angle-left"
-                                     styleClass="media-formatted-time-jump-button secondary"
-                                     a:data-media-formatted-time-jump-milliseconds="-1"/>
-                    <p:commandButton title="#{msgs.jumpForwardOneMillisecond}"
-                                     type="button"
-                                     icon="fa fa-angle-right"
-                                     styleClass="media-formatted-time-jump-button secondary"
-                                     a:data-media-formatted-time-jump-milliseconds="1"/>
-                    <p:commandButton title="#{msgs.jumpForwardTenMilliseconds}"
-                                     type="button"
-                                     icon="fa fa-angle-double-right"
-                                     styleClass="media-formatted-time-jump-button secondary"
-                                     a:data-media-formatted-time-jump-milliseconds="10"/>
-                    <p:commandButton title="#{msgs.jumpForwardOnHundredMilliseconds}"
-                                     type="button"
-                                     icon="fa fa-chevron-right"
-                                     styleClass="media-formatted-time-jump-button secondary"
-                                     a:data-media-formatted-time-jump-milliseconds="100"/>
-                    <p:commandButton title="#{msgs.jumpForwardOneSecond}"
-                                     type="button"
-                                     icon="fa fa-step-forward"
-                                     styleClass="media-formatted-time-jump-button secondary"
-                                     a:data-media-formatted-time-jump-milliseconds="1000"/>
-                </p:outputPanel>
-                <h:outputScript a:type="module" name="js/media_detail_media_formatted_time.js"/>
+                <ui:include
+                        src="/WEB-INF/templates/includes/metadataEditor/partials/media-detail-media-formatted-time.xhtml"/>
 
                 <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_waveform.js" rendered="#{fn:startsWith(selectedGalleryMediaContent.mediaViewMimeType, 'audio') and DataEditorForm.galleryPanel.isAudioMediaViewWaveform()}" />
+                <h:outputScript a:type="module" name="js/modules/media_detail_audio_waveform.js"
+                                rendered="#{fn:startsWith(selectedGalleryMediaContent.mediaViewMimeType, 'audio') and DataEditorForm.galleryPanel.isAudioMediaViewWaveform()}"/>
 
             </p:outputPanel>
 
diff --git a/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-list.xhtml b/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-list.xhtml
index ac551c0ea7f..6b0419ac6a5 100644
--- a/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-list.xhtml
+++ b/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-list.xhtml
@@ -82,7 +82,7 @@
                     <h:panelGroup rendered="#{media.type eq 'VIDEO'}">
                         <i class="fa fa-file-video-o"/>
                     </h:panelGroup>
-                    <h:panelGroup rendered="#{media.type eq 'AUDIO'}">
+                    <h:panelGroup rendered="#{amedia.type eq 'AUDIO'}">
                         <i class="fa fa-file-audio-o"/>
                     </h:panelGroup>
                     <h:panelGroup rendered="#{media.type eq 'IMAGE'}">