From 61874fbd8a831a1e992ebcdfbaba6a31fbbd7a03 Mon Sep 17 00:00:00 2001 From: Markus Weigelt Date: Thu, 22 Feb 2024 18:48:42 +0100 Subject: [PATCH] Add media partial informations to gallery heading and set cursor to the start position and consider duration while playing --- .../forms/dataeditor/GalleryMediaContent.java | 12 ++++++ .../forms/dataeditor/MediaPartialsPanel.java | 8 ++++ .../webapp/WEB-INF/resources/css/kitodo.css | 42 +++++++++++++----- .../js/modules/media_detail_media_partial.js | 43 +++++++++++++++++++ .../partials/media-detail.xhtml | 4 +- .../main/webapp/pages/metadataEditor.xhtml | 19 ++++++-- 6 files changed, 112 insertions(+), 16 deletions(-) create mode 100644 Kitodo/src/main/webapp/WEB-INF/resources/js/modules/media_detail_media_partial.js 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 index 2b6a83062bb..59dc8cd7736 100644 --- 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 index e4c3b368a77..ea637e25362 100644 --- 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 getMediaPartialDivisions() { return mediaPartialDivisions; } + public boolean isSelectedMediaPartialDivision(Map.Entry 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 index c2b91936512..dc4b5607485 100644 --- 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,6 +3192,7 @@ Column content color: white; } + #imagePreviewForm\:mediaDetailMediaPartialsContainer { position: relative; flex: 0 0 auto; @@ -3187,6 +3200,12 @@ Column content 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 new file mode 100644 index 00000000000..0dcefe1e05e --- /dev/null +++ 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. + * + * 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 index dce58e2ad7d..6f67a93f15d 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 @@ -26,7 +26,7 @@ - + @@ -53,7 +53,7 @@ rendered="#{fn:startsWith(selectedGalleryMediaContent.mediaViewMimeType, 'audio') and DataEditorForm.galleryPanel.isAudioMediaViewWaveform()}"/> - + diff --git a/Kitodo/src/main/webapp/pages/metadataEditor.xhtml b/Kitodo/src/main/webapp/pages/metadataEditor.xhtml index 980a75fd3b9..ebf22b86046 100644 --- a/Kitodo/src/main/webapp/pages/metadataEditor.xhtml +++ b/Kitodo/src/main/webapp/pages/metadataEditor.xhtml @@ -208,23 +208,34 @@ + + + #{selectedGalleryMediaContent.shortId}"/> + #{selectedGalleryMediaContent.shortId}"/> + #{selectedGalleryMediaContent.orderlabel}"/> + +