Skip to content

Commit

Permalink
refactory js modules, add milliseconds selection and fix tiny bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
markusweigelt committed Dec 5, 2023
1 parent e4f0425 commit ce1be47
Show file tree
Hide file tree
Showing 8 changed files with 106 additions and 63 deletions.
6 changes: 3 additions & 3 deletions Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css
Original file line number Diff line number Diff line change
Expand Up @@ -3125,7 +3125,7 @@ Column content
color: var(--cloudy-gray);
}

#imagePreviewForm\:mediaDetail #audioWaveformTools,
#imagePreviewForm\:audioWaveformTools,
#imagePreviewForm\:mediaDetailMediaFormattedTime {
display: flex;
gap: 10px;
Expand All @@ -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;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -145,7 +145,6 @@ metadataEditor.gallery = {
mediaElement.addEventListener("mediaPartialStopPlay", onMediaPartialStopPlay);
mediaElement.addEventListener("pause", onMediaPartialStopPlay);
mediaElement.dataset.mediaPartialTimeBegin = formattedTimeBegin;

mediaElement.play();
}
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!--
*
* (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.
*
-->

<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>
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!--
*
* (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.
*
-->

<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>
Original file line number Diff line number Diff line change
Expand Up @@ -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'}"
Expand All @@ -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>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'}">
Expand Down

0 comments on commit ce1be47

Please sign in to comment.