Melléklete ennek:
Kiss, Tamás, és Zoltán Kanász-Nagy. 2020. Rekordoldali médiamegjelenítés a DSpace 7-ben. Digitális Bölcsészet 3, L:3-L:17. https://doi.org/10.31400/dh-hun.2020.3.1475.

*

A DSpace 7-ben a képi, hang-, illetve videotartalmak rekordoldali megjelenítésének általunk használt fejlesztési módszertana és az ezekből származó kódrészletek fejlesztési fázisokra bontása a következő:

1.	Rekordoldali médiamegjelenítés előkészítése: a DSpace-rekordhoz kapcsolódó összes bitstream leíró rekordját elemezve egy-egy mediaViewerItem típusú objektumot hozzunk létre, azaz a bitstream resource descriptort átmappeljük mediaViewerItemmé: 

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.	Képek megjelenítésére a Kolkov által javított Ngx-gallery modult (https://www.npmjs.com/package/@kolkov/ngx-gallery) használjuk.  A galéria működéséhez minden egyes képfájl esetén szükség van három különböző képi változat meghatározására: egy kis és egy közepes méretű thumbnailre, illetve egy nagy méretű képre – ez utóbbi céljára az eredetileg feltöltött képfájlt használjuk. Az alábbi kódrészben látható, hogy bélyegképként az eredeti képfájlhoz kapcsolódóan feltöltésre került thumbnail vagy, ha ilyen nem létezik, az eredeti képfájlból a DSpace által generált thumbnail kerül felhasználásra. Konkrét bélyegkép hiányában a fejlesztés biztosít egy általános felhasználású thumbnailt (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.	Webes környezetben (Angular framework) a galéria komponens inicializálása, felhasználva a fent említett, Kolkov-féle Ngx-gallery modult:

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.	Hang-, illetve videotartalmak megjelenítése esetén az alapértelmezett HTML 5-ös videolejátszó kerül felhasználásra, melyet kiegészítettünk néhány extra funkcióval, például a következő, illetve előző hang- vagy videofájlra történő léptetés funkciójával és a lejátszási lista megjelenítésével. Az alábbi kódrészlet az audiovizuális komponens inicializációját tartalmazza, modul szintjén:

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.	Az előző pontban említett audio-, illetve videofájlokat megjelenítő komponens HTML-kódban történő inicializálását az alábbi kódrészlet tartalmazza:

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.	A médiamegjelenítővel kapcsolatos fejlesztéseket, aktiválásukhoz, a DSpace 7 front-end projektjében (DSpace-Angular projekt) engedélyezni kell. Ehhez a lépéshez az environment.common.ts fájlban a mediaViewerhez kapcsolódó beállításoknál képhez és audiovizuális tartalmakhoz külön-külön engedélyezhető az általunk készített kiegészítő.

Kódrészlet engedélyezése az environment.common.ts fájlból:

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

Az engedélyezéshez a true érték megadása szükséges, inaktiválás esetén használjuk a false értéket.

Mivel a DSpace fejlesztői fontos hozzáadott értékként tekintenek az általunk fejlesztett médiamegjelenítőre, a soron következő DSpace-verziókban a modul már valószínűleg alapértelmezetten is „bekapcsolt” állapotban fog rendelkezésre állni.