Show physical page number below thumbnails

Kitodo-DataManagement/src/main/java/org/kitodo/data/database/beans/User.java

@@ -114,6 +114,9 @@ public class User extends BaseBean {
     @Column(name = "paginate_from_first_page_by_default")
     private boolean paginateFromFirstPageByDefault;
 
+    @Column(name = "show_physical_page_number_below_thumbnail")
+    private boolean showPhysicalPageNumberBelowThumbnail;
+
     /**
      * Constructor for User Entity.
      */
@@ -151,30 +154,12 @@ public User(User user) {
         this.showPaginationByDefault = user.showPaginationByDefault;
         this.paginateFromFirstPageByDefault = user.paginateFromFirstPageByDefault;
         this.defaultGalleryViewMode = user.defaultGalleryViewMode;
+        this.showPhysicalPageNumberBelowThumbnail = user.showPhysicalPageNumberBelowThumbnail;
 
-        if (user.roles != null) {
-            this.roles = user.roles;
-        } else {
-            this.roles = new ArrayList<>();
-        }
-
-        if (Objects.isNull(user.projects)) {
-            this.projects = new ArrayList<>();
-        } else {
-            this.projects = user.projects;
-        }
-
-        if (Objects.isNull(user.clients)) {
-            this.clients = new ArrayList<>();
-        } else {
-            this.clients = user.clients;
-        }
-
-        if (Objects.isNull(user.filters)) {
-            this.filters = new ArrayList<>();
-        } else {
-            this.filters = user.filters;
-        }
+        this.roles = Objects.isNull(user.roles) ? new ArrayList<>() : user.roles;
+        this.projects = Objects.isNull(user.projects) ? new ArrayList<>() : user.projects;
+        this.clients = Objects.isNull(user.clients) ? new ArrayList<>() : user.clients;
+        this.filters = Objects.isNull(user.filters) ? new ArrayList<>() : user.filters;
 
         if (Objects.nonNull(user.tableSize)) {
             this.tableSize = user.tableSize;
@@ -514,6 +499,24 @@ public void setPaginateFromFirstPageByDefault(boolean paginateFromFirstPageByDef
         this.paginateFromFirstPageByDefault = paginateFromFirstPageByDefault;
     }
 
+    /**
+     * Get showPhysicalPageNumberBelowThumbnail.
+     * 
+     * @return value of showPhysicalPageNumberBelowThumbnail
+     */
+    public boolean isShowPhysicalPageNumberBelowThumbnail() {
+        return showPhysicalPageNumberBelowThumbnail;
+    }
+
+    /**
+     * Set showPhysicalPageNumberBelowThumbnail.
+     * 
+     * @param showPhysicalPageNumberBelowThumbnail as boolean
+     */
+    public void setShowPhysicalPageNumberBelowThumbnail(boolean showPhysicalPageNumberBelowThumbnail) {
+        this.showPhysicalPageNumberBelowThumbnail = showPhysicalPageNumberBelowThumbnail;
+    }
+
     /**
      * Removes a user from the environment. Since the
      * user ID may still be referenced somewhere, the user is not hard deleted from

Kitodo-DataManagement/src/main/resources/db/migration/V2_133__Add_user_metadata_editor_setting_thumbnail_overlay.sql

@@ -0,0 +1,13 @@
+--
+-- (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.
+--
+
+-- Add column "show_physical_page_number_below_thumbnail" to "user" table
+ALTER TABLE user ADD show_physical_page_number_below_thumbnail TINYINT(1) DEFAULT 0;

Kitodo/src/main/resources/messages/messages_de.properties

@@ -1180,6 +1180,7 @@ userEdit.metadataEditorSettings.defaultGalleryView = Standardansicht Galerie
 userEdit.metadataEditorSettings.paginateFromFirstPageByDefault = Standardm\u00E4ssig ab erster markierten Seite paginieren
 userEdit.metadataEditorSettings.showCommentsByDefault = Kommentare standardm\u00E4ssig einblenden
 userEdit.metadataEditorSettings.showPaginationByDefault = Paginierung standardm\u00E4ssig einblenden
+userEdit.metadataEditorSettings.showPhysicalPageNumberBelowThumbnail = Physische Seitennummer unter Thumbnails anzeigen
 userInstruction=Bedienungshinweise
 userInstructionText=Sie finden Bedienungshinweise f\u00FCr Kitodo.Production 3.x in der
 userList=Benutzerliste

Kitodo/src/main/resources/messages/messages_en.properties

@@ -1181,6 +1181,7 @@ userEdit.metadataEditorSettings.defaultGalleryView = Default gallery view
 userEdit.metadataEditorSettings.paginateFromFirstPageByDefault = By default paginate from first selected page
 userEdit.metadataEditorSettings.showCommentsByDefault = Show comments by default
 userEdit.metadataEditorSettings.showPaginationByDefault = Show pagination by default
+userEdit.metadataEditorSettings.showPhysicalPageNumberBelowThumbnail = Show physical page number below thumbnails
 userInstruction=User instructions
 userInstructionText=You will find instructions for Kitodo.Production 3.x in the
 userList=User list

Kitodo/src/main/resources/messages/messages_es.properties

@@ -1180,6 +1180,8 @@ userEdit.metadataEditorSettings.defaultGalleryView = Vista predetermina de la ga
 userEdit.metadataEditorSettings.paginateFromFirstPageByDefault = Paginación predeterminada desde la primera página seleccionada
 userEdit.metadataEditorSettings.showCommentsByDefault = Mostrar comentarios predeterminados
 userEdit.metadataEditorSettings.showPaginationByDefault = Mostrar páginación predeterminada
+# please check google translation below and remove comment if translation is acceptable
+userEdit.metadataEditorSettings.showPhysicalPageNumberBelowThumbnail = Mostrar el número de página física debajo de la miniatura
 userInstruction=Instrucciones de uso
 userInstructionText=Encontrará instrucciones para Kitodo.Production 3.x en el
 userList=Lista de usuarios

Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css

@@ -3392,27 +3392,9 @@ Column content
 
 .thumbnail-parent {
     display: block;
-    height: 104px;
-    width: 75px;
     position: relative;
 }
 
-.thumbnail-parent.media-type-video {
-    width: 185px;
-    height: auto;
-}
-
-.thumbnail-parent.media-type-audio {
-    width: 120px;
-    height: auto;
-}
-
-#imagePreviewForm\:thumbnailStripe .thumbnail-parent.media-type-audio,
-#imagePreviewForm\:thumbnailStripe .thumbnail-parent.media-type-video {
-    width: 90px;
-    height: auto;
-}
-
 .thumbnail-parent audio,
 .thumbnail-parent video {
     width: 100%;
@@ -3421,6 +3403,8 @@ Column content
 
 .thumbnail-parent video {
     height: auto;
+    vertical-align: bottom;
+    box-sizing: border-box;
 }
 
 .thumbnail {
@@ -3468,13 +3452,27 @@ Column content
     border-style: solid;
 }
 
-
-
 .thumbnail-container {
     display: inline-block;
-    height: 100%;
     position: relative;
-    width: 100%;
+    height: 104px;
+    width: 75px;
+}
+
+.thumbnail-container.media-type-video {
+    width: 185px;
+    height: auto;
+}
+
+.thumbnail-container.media-type-audio {
+    width: 120px;
+    height: auto;
+}
+
+#imagePreviewForm\:thumbnailStripe .thumbnail-container.media-type-audio,
+#imagePreviewForm\:thumbnailStripe .thumbnail-container.media-type-video {
+    width: 90px;
+    height: auto;
 }
 
 .thumbnail-container > .ui-widget-content {
@@ -3580,6 +3578,13 @@ Column content
     opacity: .7;
 }
 
+.thumbnail-parent .thumbnail-banner {
+    word-break: break-word;
+    color: var(--pure-white);
+    font-size: smaller;
+    text-align: center;
+}
+
 #imagePreviewForm {
     height: 100%;
     overflow: hidden;

Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-list.xhtml

@@ -20,7 +20,7 @@
         xmlns:p="http://primefaces.org/ui"
         xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
 
-    <p:outputPanel styleClass="thumbnail-parent #{fn:startsWith(media.previewMimeType, 'video') ? 'media-type-video' : ''}#{fn:startsWith(media.previewMimeType, 'audio') ? 'media-type-audio' : ''}" >
+    <p:outputPanel styleClass="thumbnail-parent" >
         <c:choose>
             <c:when test="#{uiParamStripeIndex eq '0' || uiParamStripeIndex eq 0}">
                 <c:set var="thumbnailStyleClass"
@@ -33,7 +33,7 @@
         </c:choose>
         <p:outputPanel
                 styleClass="thumbnail #{DataEditorForm.consecutivePagesSelected() ? '' : 'discontinuous'} #{thumbnailStyleClass}"/>
-        <p:outputPanel styleClass="thumbnail-container"
+        <p:outputPanel styleClass="thumbnail-container #{fn:startsWith(media.previewMimeType, 'video') ? 'media-type-video' : ''}#{fn:startsWith(media.previewMimeType, 'audio') ? 'media-type-audio' : ''}"
                        a:data-order="#{media.order}"
                        a:data-stripe="#{uiParamStripeIndex}"
                        a:data-logicalTreeNodeId="#{media.logicalTreeNodeId}">
@@ -95,6 +95,20 @@
             <ui:include src="media-list-content.xhtml"/>
 
         </p:outputPanel>
+
+        <ui:fragment rendered="#{LoginForm.loggedUser.isShowPhysicalPageNumberBelowThumbnail()}">
+            <p:outputPanel class="thumbnail-banner">
+                <h:outputText rendered="#{media.type eq 'VIDEO'}">
+                    #{msgs.video} #{media.shortId}
+                </h:outputText>
+                <h:outputText rendered="#{media.type eq 'AUDIO'}">
+                    #{msgs.audio} #{media.shortId}
+                </h:outputText>
+                <h:outputText rendered="#{media.type eq 'IMAGE'}">
+                    #{msgs.image} #{media.shortId}
+                </h:outputText>
+            </p:outputPanel>
+        </ui:fragment>
     </p:outputPanel>
 
 </ui:composition>

Kitodo/src/main/webapp/WEB-INF/templates/includes/userEdit/metadataEditorSettings.xhtml

@@ -86,6 +86,15 @@
                                          value="#{UserForm.userObject.paginateFromFirstPageByDefault}"
                                          onchange="toggleSave()"/>
             </div>
+            <div>
+                <p:outputLabel for="showPhysicalPageNumberBelowThumbnail"
+                               value="#{msgs['userEdit.metadataEditorSettings.showPhysicalPageNumberBelowThumbnail']}"/>
+                <p:selectBooleanCheckbox id="showPhysicalPageNumberBelowThumbnail"
+                                         styleClass="switch input"
+                                         disabled="#{isViewMode}"
+                                         value="#{UserForm.userObject.showPhysicalPageNumberBelowThumbnail}"
+                                         onchange="toggleSave()"/>
+            </div>
         </p:row>
     </p:panelGrid>
 </ui:composition>

Kitodo/src/test/java/org/kitodo/selenium/MetadataST.java

@@ -330,6 +330,29 @@ public void createStructureElementTest() throws Exception {
         assertEquals(structureType, firstChild.getText(), "Added structure element has wrong type!");
     }
 
+    /**
+     * Verifies that turning the "show physical page number below thumbnail switch" on in the user settings
+     * results in thumbnail banner being displayed in the gallery of the metadata editor.
+     */
+    @Test
+    public void showPhysicalPageNumberBelowThumbnailTest() throws Exception {
+        login("kowal");
+
+        // open the metadata editor
+        Pages.getProcessesPage().goTo().editMetadata(MockDatabase.MEDIA_RENAMING_TEST_PROCESS_TITLE);
+
+        // verify that physical page number is not shown below thumbnail by default
+        assertEquals(0, Browser.getDriver().findElements(By.cssSelector(".thumbnail-banner")).size());
+
+        // change user setting
+        Pages.getMetadataEditorPage().closeEditor();
+        Pages.getUserEditPage().toggleShowPhysicalPageNumberBelowThumbnail();
+        Pages.getProcessesPage().goTo().editMetadata(MockDatabase.MEDIA_RENAMING_TEST_PROCESS_TITLE);
+
+        // verify physical page number is now shown below thumbnail
+        assertFalse(Browser.getDriver().findElements(By.cssSelector(".thumbnail-banner")).isEmpty());
+    }
+
     /**
      * Close metadata editor and logout after every test.
      * @throws Exception when page navigation fails

Kitodo/src/test/java/org/kitodo/selenium/testframework/pages/UserEditPage.java

@@ -119,6 +119,9 @@ public class UserEditPage extends EditPage<UserEditPage> {
     @FindBy(id = "editForm:userTabView:showPaginationPanelByDefault")
     private WebElement showPaginationByDefaultSwitch;
 
+    @FindBy(id = "editForm:userTabView:showPhysicalPageNumberBelowThumbnail")
+    private WebElement showPhysicalPageNumberBelowThumbnailSwitch;
+
     public UserEditPage() {
         super("pages/userEdit.jsf");
     }
@@ -201,6 +204,18 @@ public void setPaginationToShowByDefault() throws Exception {
         save();
     }
 
+    /**
+     * Toggle user setting that controls whether the physical page number is shown below a thumbnail in 
+     * the metadata editor.
+     */
+    public void toggleShowPhysicalPageNumberBelowThumbnail() throws Exception {
+        openUserConfig();
+        switchToTabByIndex(TabIndex.USER_METADATA_EDITOR_SETTINGS.getIndex());
+        WebElement checkBox = showPhysicalPageNumberBelowThumbnailSwitch.findElement(By.className("ui-chkbox-box"));
+        checkBox.click();
+        save();
+    }
+
     private void openUserConfig() {
         await("Wait for visible user menu button").atMost(20, TimeUnit.SECONDS).ignoreExceptions()
                 .until(() -> userMenuButton.isDisplayed());