Merge pull request DSpace#2149 from alexandrevryghem/media-viewer-thumbnail-width_contribute-main

Media viewer thumbnails don't take viewport width into account

Author: tdonohue

src/app/item-page/media-viewer/media-viewer-image/media-viewer-image.component.scss

@@ -1,6 +1,20 @@
-.ngx-gallery {
-  display: inline-block;
-  margin-bottom: 20px;
-  width: 340px !important;
-  height: 279px !important;
+:host ::ng-deep {
+  .ngx-gallery {
+    width: unset !important;
+    height: unset !important;
+  }
+
+  ngx-gallery-image {
+    max-width: 340px !important;
+
+    .ngx-gallery-image {
+      background-position: left;
+    }
+  }
+
+  ngx-gallery-image:after {
+    padding-top: 75%;
+    display: block;
+    content: '';
+  }
 }

src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.scss

@@ -1,4 +1,10 @@
 video {
-  width: 340px;
-  height: 279px;
+  width: 100%;
+  height: auto;
+  max-width: 340px;
+}
+
+.buttons {
+  display: flex;
+  gap: .25rem;
 }

src/app/item-page/simple/item-types/publication/publication.component.html

@@ -20,9 +20,9 @@
         <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
       </ds-metadata-field-wrapper>
     </ng-container>
-    <ng-container *ngIf="mediaViewer.image">
+    <div *ngIf="mediaViewer.image" class="mb-2">
       <ds-themed-media-viewer [item]="object" [videoOptions]="mediaViewer.video"></ds-themed-media-viewer>
-    </ng-container>
+    </div>
     <ds-themed-item-page-file-section [item]="object"></ds-themed-item-page-file-section>
     <ds-item-page-date-field [item]="object"></ds-item-page-date-field>
     <ds-themed-metadata-representation-list class="ds-item-page-mixed-author-field"

src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html

@@ -21,9 +21,9 @@
         <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
       </ds-metadata-field-wrapper>
     </ng-container>
-    <ng-container *ngIf="mediaViewer.image">
+    <div *ngIf="mediaViewer.image" class="mb-2">
       <ds-themed-media-viewer [item]="object" [videoOptions]="mediaViewer.video"></ds-themed-media-viewer>
-    </ng-container>
+    </div>
     <ds-themed-item-page-file-section [item]="object"></ds-themed-item-page-file-section>
     <ds-item-page-date-field [item]="object"></ds-item-page-date-field>
     <ds-themed-metadata-representation-list class="ds-item-page-mixed-author-field"