Add media partial informations to gallery heading and set cursor to t…

…he start position and consider duration while playing
markusweigelt · Feb 22, 2024 · 61874fb · 61874fb
1 parent 77d296e
commit 61874fb
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 16 deletions.
diff --git a/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/GalleryMediaContent.java b/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/GalleryMediaContent.java
@@ -24,8 +24,10 @@
 
 import org.apache.logging.log4j.LogManager;
 import org.apache.logging.log4j.Logger;
+import org.kitodo.api.dataformat.MediaPartial;
 import org.kitodo.api.dataformat.View;
 import org.kitodo.production.enums.MediaContentType;
+import org.kitodo.production.helper.metadata.MediaPartialHelper;
 import org.kitodo.production.services.ServiceManager;
 import org.primefaces.model.DefaultStreamedContent;
 import org.primefaces.model.StreamedContent;
@@ -215,6 +217,16 @@ public boolean isMediaPartial() {
                 .hasMediaPartial();
     }
 
+    /**
+     * @return
+     */
+    public MediaPartial getMediaPartial() {
+        if (isMediaPartial()) {
+            return view.getPhysicalDivision().getMediaPartial();
+        }
+        return null;
+    }
+
     /**
      * Returns the type of gallery media content object.
      *

diff --git a/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/MediaPartialsPanel.java b/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/MediaPartialsPanel.java
@@ -70,6 +70,14 @@ public Map<LogicalDivision, MediaPartial> getMediaPartialDivisions() {
         return mediaPartialDivisions;
     }
 
+    public boolean isSelectedMediaPartialDivision(Map.Entry<LogicalDivision, MediaPartial> mediaPartialDivision) {
+        mediaSelection = dataEditor.getGalleryPanel().getLastSelection();
+        if (Objects.nonNull(mediaPartialDivision) && Objects.nonNull(mediaSelection)) {
+            return mediaSelection.getValue().equals(mediaPartialDivision.getKey());
+        }
+        return false;
+    }
+
     /**
      * Validate the duration of the media.
      *

diff --git a/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css b/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css
@@ -2526,6 +2526,18 @@ form#metadata div label,
     color: var(--medium-gray);
 }
 
+.columnHeadingWrapper .columnHeading {
+    color: var(--medium-gray);
+}
+
+.columnHeadingWrapper .columnHeading.icon-media-partial {
+    margin-right: 5px;
+}
+
+.columnHeadingWrapper .columnHeading.mediaPartialHeading {
+    margin-left: 5px;
+}
+
 .collapsibleWrapper > .columnExpandButton + .columnHeadingWrapper .columnHeading {
     color: var(--carbon-blue);
 }
@@ -3180,13 +3192,20 @@ Column content
     color: white;
 }
 
+
 #imagePreviewForm\:mediaDetailMediaPartialsContainer {
     position: relative;
     flex: 0 0 auto;
     height: 100%;
     min-width: 60px;
 }
 
+#imagePreviewForm\:mediaDetailMediaPartial .icon-media-partial {
+    top: 50px;
+    left: 10px;
+    position: absolute;
+}
+
 #imagePreviewForm\:mediaPartialList {
     height: 100%;
     overflow-y: scroll;
@@ -3463,25 +3482,28 @@ Column content
     width: 100%;
 }
 
-
-.thumbnail-container .icon-media-partial {
-    top: 5px;
-    color: var(--carbon-blue);
-    left: 5px;
-    position: absolute;
-    background: rgb(from var(--pure-white) r g b / 0.8);
+.icon-media-partial {
     width: 18px;
-    display: block;
     text-align: center;
     padding: 3px;
-    border-radius: 18px;
+
 }
 
-.thumbnail-container .icon-media-partial::before {
+.icon-media-partial::before {
     content: "\f08d";
     font-family: FontAwesome;
 }
 
+.thumbnail-container .icon-media-partial {
+    color: var(--carbon-blue);
+    top: 5px;
+    left: 5px;
+    position: absolute;
+    display: block;
+    border-radius: 18px;
+    background: rgb(from var(--pure-white) r g b / 0.8);
+}
+
 .thumbnail-container .assigned-several-times {
     bottom: 5px;
     color: var(--pure-white);

diff --git a/Kitodo/src/main/webapp/WEB-INF/resources/js/modules/media_detail_media_partial.js b/Kitodo/src/main/webapp/WEB-INF/resources/js/modules/media_detail_media_partial.js
@@ -0,0 +1,43 @@
+/**
+ * (c) Kitodo. Key to digital objects e. V. <[email protected]>
+ *
+ * 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.
+ */
+/* globals metadataEditor */
+
+let initMediaPartial = function () {
+    let mediaElement = document.querySelector('#imagePreviewForm\\:mediaDetailMediaContainer video, #imagePreviewForm\\:mediaDetailMediaContainer audio');
+    let mediaPartial = document.querySelector('#metadataEditorWrapper .columnHeading.mediaPartialHeading');
+    if (mediaElement && mediaPartial) {
+        let durationTime = metadataEditor.gallery.mediaPartial.convertFormattedTimeToMilliseconds(mediaPartial.dataset.mediaPartialDuration);
+        let startTime = metadataEditor.gallery.mediaPartial.convertFormattedTimeToMilliseconds(mediaPartial.dataset.mediaPartialStart);
+        let stopTime = (startTime + durationTime) / 1000;
+
+        mediaElement.addEventListener("timeupdate", function () {
+            if (mediaElement.currentTime >= stopTime) {
+                mediaElement.currentTime = stopTime;
+                mediaElement.pause();
+            }
+        });
+
+        let onCanPlay = function () {
+            mediaElement.currentTime = startTime / 1000;
+        }
+
+        mediaElement.addEventListener("play", function () {
+            mediaElement.removeEventListener("canplay", onCanPlay)
+            mediaElement.currentTime = startTime / 1000;
+        });
+
+        mediaElement.addEventListener("canplay", onCanPlay);
+    }
+};
+
+initMediaPartial();
+
+document.addEventListener("kitodo-metadataditor-mediaview-update", initMediaPartial);
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,7 +26,7 @@
         <ui:fragment
                 rendered="#{mediaProvider.hasMediaViewVariant(selectedGalleryMediaContent) and (fn:startsWith(selectedGalleryMediaContent.mediaViewMimeType, 'video') or fn:startsWith(selectedGalleryMediaContent.mediaViewMimeType, 'audio'))}">
 
-            <p:outputPanel id="mediaDetailMediaContainer">
+            <p:outputPanel id="mediaDetailMediaContainer" >
 
                 <ui:include
                         src="/WEB-INF/templates/includes/metadataEditor/partials/media-detail-audio-waveform-tools.xhtml">
@@ -53,7 +53,7 @@
                                 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()}"/>
-
+                <h:outputScript a:type="module" name="js/modules/media_detail_media_partial.js" rendered="#{selectedGalleryMediaContent.isMediaPartial()}"/>
             </p:outputPanel>
 
             <ui:include src="/WEB-INF/templates/includes/metadataEditor/partials/media-detail-media-partial-list.xhtml"/>

diff --git a/Kitodo/src/main/webapp/pages/metadataEditor.xhtml b/Kitodo/src/main/webapp/pages/metadataEditor.xhtml
@@ -208,23 +208,34 @@
                                     <h:outputText styleClass="columnHeading" value="#{msgs.gallery}"/>
                                 </ui:fragment>
                                 <ui:fragment rendered="#{DataEditorForm.galleryPanel.galleryViewMode eq 'preview'}">
+                                    <ui:param name="selectedGalleryMediaContent"
+                                              value="#{DataEditorForm.galleryPanel.getGalleryMediaContent(DataEditorForm.galleryPanel.lastSelection.key)}"/>
+                                    <h:outputText styleClass="columnHeading icon-media-partial"
+                                                  rendered="#{selectedGalleryMediaContent.isMediaPartial()}"/>
                                     <h:outputText styleClass="columnHeading"
                                                   rendered="#{DataEditorForm.galleryPanel.hasMediaViewMimeTypePrefix('audio')}"
                                                   value="#{msgs.audio}
-                                                  #{DataEditorForm.galleryPanel.getGalleryMediaContent(DataEditorForm.galleryPanel.lastSelection.key).shortId}"/>
+                                                  #{selectedGalleryMediaContent.shortId}"/>
                                     <h:outputText styleClass="columnHeading"
                                                   rendered="#{DataEditorForm.galleryPanel.hasMediaViewMimeTypePrefix('video')}"
                                                   value="#{msgs.video}
-                                                  #{DataEditorForm.galleryPanel.getGalleryMediaContent(DataEditorForm.galleryPanel.lastSelection.key).shortId}"/>
+                                                  #{selectedGalleryMediaContent.shortId}"/>
                                     <h:outputText styleClass="columnHeading"
                                                   rendered="#{DataEditorForm.galleryPanel.hasMediaViewMimeTypePrefix('image')}"
                                                   value="#{msgs.image}
-                                                 #{DataEditorForm.galleryPanel.getGalleryMediaContent(DataEditorForm.galleryPanel.lastSelection.key).shortId},
+                                                 #{selectedGalleryMediaContent.shortId},
                                                  #{msgs.page}
-                                                 #{DataEditorForm.galleryPanel.getGalleryMediaContent(DataEditorForm.galleryPanel.lastSelection.key).orderlabel}"/>
+                                                 #{selectedGalleryMediaContent.orderlabel}"/>
                                     <h:outputText styleClass="columnHeading"
                                                   rendered="#{DataEditorForm.galleryPanel.lastSelection eq null}"
                                                   value="#{msgs.notSelected}"/>
+                                    <ui:param name="mediaPartial"
+                                              value="#{selectedGalleryMediaContent.getMediaPartial()}"/>
+                                    <h:outputText styleClass="columnHeading mediaPartialHeading"
+                                                  value="(#{msgs.start}:#{mediaPartial.begin}, #{msgs.duration}:#{mediaPartial.extent})"
+                                                  rendered="#{selectedGalleryMediaContent.isMediaPartial()}"
+                                                  a:data-media-partial-start="#{mediaPartial.begin}"
+                                                  a:data-media-partial-duration="#{mediaPartial.extent}"/>
                                 </ui:fragment>
                             </h:panelGroup>
                         </div>