Appendix of:
Kiss, Tamás, and Zoltán Kanász-Nagy. 2020. “Record Page Media Player in DSpace 7”. Digitális Bölcsészet / Digital Humanities 3, L:3-L:17. https://doi.org/10.31400/dh-hun.2020.3.1475.

*

The development methodology we used for displaying image, audio and video content on the record page of DSpace 7 and the resultant code snippets are as follows:

1.	Preparing record page media display: analyzing the descriptive records of all of the bitstreams associated with the DSpace record, we create an object of the type mediaViewerItem, that is, we map the bitstream resource descriptor to mediaViewerItem:

Src\app\+item-page\media-viewer\media-viewer.component.ts

/**
   * This method loads all the Bitstreams and Thumbnails and converts them to media item
   */
  ngOnInit(): void {
    this.mediaList$ = new BehaviorSubject([]);
    this.isLoading = true;
    this.loadRemoteData('ORIGINAL').subscribe((bitstreamsRD) => {
      if (bitstreamsRD.payload.page.length === 0) {
        this.isLoading = false;
        this.mediaList$.next([]);
      } else {
        this.loadRemoteData('THUMBNAIL').subscribe((thumbnailsRD) => {
          for (
            let index = 0;
            index < bitstreamsRD.payload.page.length;
            index++
          ) {
            bitstreamsRD.payload.page[index].format
              .pipe(getFirstSucceededRemoteDataPayload())
              .subscribe((format) => {
                const current = this.mediaList$.getValue();
                const mediaItem = this.createMediaViewerItem(
                  bitstreamsRD.payload.page[index],
                  format,
                  thumbnailsRD.payload && thumbnailsRD.payload.page[index]
                );
                this.mediaList$.next([...current, mediaItem]);
              });
          }
          this.isLoading = false;
        });
      }
    });
  }

2.	We use the Ngx-gallery module modified by Kolkov (https://www.npmjs.com/package/@kolkov/ngx-gallery) to display images.  For the gallery to work, one needs to define three different image versions for each image file: a small and a medium-sized thumbnail, and a large image – for the latter, we use the originally uploaded image file. The code block below demonstrates that if a thumbnail was uploaded together with the original image file, it will be used by the media viewer. However, the media viewer will use a thumbnail generated by DSpace, if one is available. In the absence of any thumbnail, we provide a general-purpose thumbnail (replacement_image.svg).

src\app\+item-page\media-viewer\media-viewer-image\media-viewer-image.component.ts

/**
   * This method convert an array of MediaViewerItem into NgxGalleryImage array
   * @param medias input NgxGalleryImage array
   */
  convertToGalleryImage(medias: MediaViewerItem[]): NgxGalleryImage[] {
    const mappadImages = [];
    for (const image of medias) {
      if (image.format === 'image') {
        mappadImages.push({
          small: image.thumbnail
            ? image.thumbnail
            : './assets/images/replacement_image.svg',
          medium: image.thumbnail
            ? image.thumbnail
            : './assets/images/replacement_image.svg',
          big: image.bitstream._links.content.href,
        });
      }
    }
    return mappadImages;
  }

3.	Then we display the resulting image list with the aforementioned Kolkov Ngx-gallery module:

src\app\+item-page\media-viewer\media-viewer-image\media-viewer-image.component.html

<div [class.change-gallery]="isAuthenticated$ | async">
  <ngx-gallery
    class="ngx-gallery"
    [options]="galleryOptions"
    [images]="galleryImages"
  ></ngx-gallery>
</div>

4.	When displaying audio or video content, the default HTML5 video player is used, which we supplemented with some extra features, such as a functionality that skips to the next or previous audio or video file and another one displaying the relevant playlist. The following code snippet contains the initialization of the audiovisual component at the module level:

src\app\+item-page\media-viewer\media-viewer-video\media-viewer-video.component.ts

ngOnInit() {
    this.isCollapsed = false;
    this.filteredMedias = this.medias.filter(
      (media) => media.format === 'audio' || media.format === 'video'
    );
  }

5.	The HTML initialization of the component displaying audio or video files mentioned in the previous section is contained in the following code snippet:

src\app\+item-page\media-viewer\media-viewer-video\media-viewer-video.component.html

<video
  #media
  [src]="filteredMedias[currentIndex].bitstream._links.content.href"
  id="singleVideo"
  [poster]="
    filteredMedias[currentIndex].thumbnail ||
    replacements[filteredMedias[currentIndex].format]
  "
  preload="none"
  controls
></video>
<div class="buttons" *ngIf="filteredMedias?.length > 1">
  <button
    class="btn btn-primary previous"
    [disabled]="currentIndex === 0"
    (click)="prevMedia()"
  >
    {{ "media-viewer.previous" | translate }}
  </button>

  <button
    class="btn btn-primary next"
    [disabled]="currentIndex === filteredMedias.length - 1"
    (click)="nextMedia()"
  >
    {{ "media-viewer.next" | translate }}
  </button>
  <div ngbDropdown class="d-inline-block">
    <button
      class="btn btn-outline-primary playlist"
      id="dropdownBasic1"
      ngbDropdownToggle
    >
      {{ "media-viewer.playlist" | translate }}
    </button>
    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
      <button
        ngbDropdownItem
        *ngFor="let item of filteredMedias; let i = index"
        class="list-element"
        (click)="selectedMedia(i)"
      >
        {{ item.bitstream.name }}
      </button>
    </div>
  </div>
</div>


6.	Our developments related to the media viewer need to be enabled in the DSpace 7 frontend project (i.e. DSpace-Angular project) in order to become activated. Our developments can be enabled separately for image and audiovisual contents in the settings of media viewer in the environment.common.ts file.

	Enabling the code from the environment.common.ts file:

mediaViewer: {
	image: false | true,
	video: false | true
}

In order to enable the media viewer one needs to set the relevant value(s) to true. In case one intends to fully or partially deactivate the media viewer, they need to set the relevant value(s) as false. As the developers of DSpace see serious added value in the media viewer, the module is likely to be available as activated by default in future versions of the software.