ngx-rendering-service-lib 0.0.0 → 0.0.2

package/fesm2022/ngx-rendering-service-lib.mjs

@@ -1,26 +1,26 @@
 import * as i0 from '@angular/core';
-import { NgModule, signal, Component, Input, HostListener, ViewChild, ViewEncapsulation } from '@angular/core';
-import * as i2 from '@angular/common';
+import { NgModule, signal, Component, Input, HostListener, ViewChild, ViewEncapsulation, Injectable } from '@angular/core';
+import * as i3 from '@angular/common';
 import { CommonModule, NgOptimizedImage } from '@angular/common';
 import * as i1 from 'ngx-edu-sharing-api';
 import { EduSharingApiModule } from 'ngx-edu-sharing-api';
-import * as i3 from '@angular/material/icon';
+import * as i3$1 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
-import * as i2$1 from '@angular/material/button';
+import * as i2 from '@angular/material/button';
 import { MatButtonModule, MatIconButton } from '@angular/material/button';
 import { MatSelect, MatOption } from '@angular/material/select';
 import { FormsModule } from '@angular/forms';
 import { MatMenu, MatMenuTrigger, MatMenuItem } from '@angular/material/menu';
-import * as i3$1 from 'ng2-pdfjs-viewer';
+import * as i3$2 from 'ng2-pdfjs-viewer';
 import { PdfJsViewerModule } from 'ng2-pdfjs-viewer';
 import * as i1$1 from 'ngx-rendering-service-api';
 import { RenderingServiceApiModule } from 'ngx-rendering-service-api';
 import { YouTubePlayer } from '@angular/youtube-player';
 import * as i1$2 from '@angular/platform-browser';
-import { BehaviorSubject, Subject, firstValueFrom, interval, takeUntil, switchMap } from 'rxjs';
-import * as i3$2 from '@angular/material/progress-spinner';
+import { firstValueFrom, BehaviorSubject, Subject, interval, takeUntil, switchMap } from 'rxjs';
+import * as i4 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i4 from '@angular/material/progress-bar';
+import * as i5 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 
 const environment = {
@@ -73,7 +73,7 @@ class ImageComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: ImageComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: ImageComponent, isStandalone: true, selector: "rs-module-image", inputs: { data: "data", node: "node" }, host: { listeners: { "document:fullscreenchange": "loadOptimalSize()" } }, ngImport: i0, template: "<div class=\"image-wrapper\"\n  *ngIf=\"activeObject()\"\n>\n  <img\n    #image\n    [src]=\"activeObject()?.link\"\n    [alt]=\"node?.title\"\n  >\n  <button mat-icon-button (click)=\"toggleFullscreen()\"><mat-icon>fullscreen</mat-icon></button>\n</div>\n", styles: [":host{position:relative;display:flex;align-items:center}.image-wrapper{width:100%}.image-wrapper img{width:100%;position:relative}.image-wrapper button{position:absolute;right:0;color:#fff;background-color:#00000080}\n"], dependencies: [{ kind: "ngmodule", type: RenderingModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: ImageComponent, isStandalone: true, selector: "rs-module-image", inputs: { data: "data", node: "node" }, host: { listeners: { "document:fullscreenchange": "loadOptimalSize()" } }, ngImport: i0, template: "<div class=\"image-wrapper\"\n  *ngIf=\"activeObject()\"\n>\n  <img\n    #image\n    [src]=\"activeObject()?.link\"\n    [alt]=\"node?.title\"\n  >\n  <button mat-icon-button (click)=\"toggleFullscreen()\"><mat-icon>fullscreen</mat-icon></button>\n</div>\n", styles: [":host{position:relative;display:flex;align-items:center}.image-wrapper{width:100%}.image-wrapper img{width:100%;position:relative}.image-wrapper button{position:absolute;right:0;color:#fff;background-color:#00000080}\n"], dependencies: [{ kind: "ngmodule", type: RenderingModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: ImageComponent, decorators: [{
             type: Component,
@@ -124,7 +124,7 @@ class VideoComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: VideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: VideoComponent, isStandalone: true, selector: "rs-module-video", inputs: { data: "data", node: "node" }, viewQueries: [{ propertyName: "videoRef", first: true, predicate: ["video"], descendants: true }], ngImport: i0, template: "<div class=\"video-wrapper\" *ngIf=\"activeObject()\">\n  <video\n    controls\n    #video\n  >\n    <source [src]=\"activeObject()?.link\" />\n  </video>\n  <button\n    mat-icon-button\n    [matMenuTriggerFor]=\"resolutionMenu\"\n  >\n    <mat-icon>settings</mat-icon>\n  </button>\n  <mat-menu\n    #resolutionMenu=\"matMenu\"\n    xPosition=\"before\"\n  >\n    <button\n      mat-menu-item\n      *ngFor=\"let item of data?.items\"\n      [disabled]=\"item.link === ''\"\n      (click)=\"item.height !== activeObject()?.height && switchResolution(item)\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"item.link !== '' ? ready : loading\"\n        [ngTemplateOutletContext]=\"{item:item}\"\n      >\n      </ng-container>\n    </button>\n\n  </mat-menu>\n</div>\n\n<ng-template #ready let-item='item'>\n  <div style=\"display: flex; justify-content: space-between\">\n    <mat-icon *ngIf=\"item.height === activeObject()?.height\">\n      done\n    </mat-icon>\n    <div *ngIf=\"item.height !== activeObject()?.height\"></div>\n    <div>\n      {{item.height}}p\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #loading let-item='item'>\n  <div style=\"display: flex; justify-content: space-between\">\n    <div>\n      {{item.progress >= 0 ? \"Converting: \" + item.progress + \"%\" : \"Queue position: \" + -item.progress}}\n    </div>\n    <div style=\"padding-left: .5em\">\n      {{item.height}}p\n    </div>\n  </div>\n</ng-template>\n", styles: [".video-wrapper{width:100%;position:relative}.video-wrapper video{width:100%;display:block}.video-wrapper button{position:absolute;right:0;top:0;color:#fff;background-color:#00000080}\n"], dependencies: [{ kind: "ngmodule", type: RenderingModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: VideoComponent, isStandalone: true, selector: "rs-module-video", inputs: { data: "data", node: "node" }, viewQueries: [{ propertyName: "videoRef", first: true, predicate: ["video"], descendants: true }], ngImport: i0, template: "<div class=\"video-wrapper\" *ngIf=\"activeObject()\">\n  <video\n    controls\n    #video\n  >\n    <source [src]=\"activeObject()?.link\" />\n  </video>\n  <button\n    mat-icon-button\n    [matMenuTriggerFor]=\"resolutionMenu\"\n  >\n    <mat-icon>settings</mat-icon>\n  </button>\n  <mat-menu\n    #resolutionMenu=\"matMenu\"\n    xPosition=\"before\"\n  >\n    <button\n      mat-menu-item\n      *ngFor=\"let item of data?.items\"\n      [disabled]=\"item.link === ''\"\n      (click)=\"item.height !== activeObject()?.height && switchResolution(item)\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"item.link !== '' ? ready : loading\"\n        [ngTemplateOutletContext]=\"{item:item}\"\n      >\n      </ng-container>\n    </button>\n\n  </mat-menu>\n</div>\n\n<ng-template #ready let-item='item'>\n  <div style=\"display: flex; justify-content: space-between\">\n    <mat-icon *ngIf=\"item.height === activeObject()?.height\">\n      done\n    </mat-icon>\n    <div *ngIf=\"item.height !== activeObject()?.height\"></div>\n    <div>\n      {{item.height}}p\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #loading let-item='item'>\n  <div style=\"display: flex; justify-content: space-between\">\n    <div>\n      {{item.progress >= 0 ? \"Converting: \" + item.progress + \"%\" : \"Queue position: \" + -item.progress}}\n    </div>\n    <div style=\"padding-left: .5em\">\n      {{item.height}}p\n    </div>\n  </div>\n</ng-template>\n", styles: [".video-wrapper{width:100%;position:relative}.video-wrapper video{width:100%;display:block}.video-wrapper button{position:absolute;right:0;top:0;color:#fff;background-color:#00000080}\n"], dependencies: [{ kind: "ngmodule", type: RenderingModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: VideoComponent, decorators: [{
             type: Component,
@@ -206,7 +206,7 @@ class PdfComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: PdfComponent, deps: [{ token: i1$1.AssetControllerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: PdfComponent, isStandalone: true, selector: "rs-module-pdf", inputs: { data: "data", node: "node" }, viewQueries: [{ propertyName: "viewerRef", first: true, predicate: ["pdfViewer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"pdf-wrapper\" *ngIf=\"fileData !== undefined\">\n  <ng2-pdfjs-viewer\n    #pdfViewer\n    [pdfSrc]=\"fileData\"\n    [print]=\"!restrictedView\"\n    [download]=\"!restrictedView\"\n    (onDocumentLoad)=\"onDocumentLoad()\"\n  >\n  </ng2-pdfjs-viewer>\n</div>\n", styles: [":host{position:relative;display:flex;align-items:center;width:100%}.pdf-wrapper{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: RenderingModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: PdfJsViewerModule }, { kind: "component", type: i3$1.PdfJsViewerComponent, selector: "ng2-pdfjs-viewer", inputs: ["viewerId", "viewerFolder", "externalWindow", "target", "showSpinner", "downloadFileName", "openFile", "download", "startDownload", "viewBookmark", "print", "startPrint", "fullScreen", "find", "zoom", "nameddest", "pagemode", "lastPage", "rotatecw", "rotateccw", "cursor", "scroll", "spread", "locale", "useOnlyCssZoom", "errorOverride", "errorAppend", "errorMessage", "diagnosticLogs", "externalWindowOptions", "page", "pdfSrc"], outputs: ["onBeforePrint", "onAfterPrint", "onDocumentLoad", "onPageChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: PdfComponent, isStandalone: true, selector: "rs-module-pdf", inputs: { data: "data", node: "node" }, viewQueries: [{ propertyName: "viewerRef", first: true, predicate: ["pdfViewer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"pdf-wrapper\" *ngIf=\"fileData !== undefined\">\n  <ng2-pdfjs-viewer\n    #pdfViewer\n    [pdfSrc]=\"fileData\"\n    [print]=\"!restrictedView\"\n    [download]=\"!restrictedView\"\n    (onDocumentLoad)=\"onDocumentLoad()\"\n  >\n  </ng2-pdfjs-viewer>\n</div>\n", styles: [":host{position:relative;display:flex;align-items:center;width:100%}.pdf-wrapper{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: RenderingModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: PdfJsViewerModule }, { kind: "component", type: i3$2.PdfJsViewerComponent, selector: "ng2-pdfjs-viewer", inputs: ["viewerId", "viewerFolder", "externalWindow", "target", "showSpinner", "downloadFileName", "openFile", "download", "startDownload", "viewBookmark", "print", "startPrint", "fullScreen", "find", "zoom", "nameddest", "pagemode", "lastPage", "rotatecw", "rotateccw", "cursor", "scroll", "spread", "locale", "useOnlyCssZoom", "errorOverride", "errorAppend", "errorMessage", "diagnosticLogs", "externalWindowOptions", "page", "pdfSrc"], outputs: ["onBeforePrint", "onAfterPrint", "onDocumentLoad", "onPageChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: PdfComponent, decorators: [{
             type: Component,
@@ -241,7 +241,7 @@ class UrlComponent {
         this.isRemoteRepoResource = false;
     }
     ngOnChanges(changes) {
-        this.url = this.node?.properties !== undefined ? this.node.properties["ccm:wwwurl"][0] : "";
+        this.url = this.node?.properties?.["ccm:wwwurl"]?.[0] || '';
         this.setEmbeddingType();
     }
     isProtected() {
@@ -295,7 +295,7 @@ class UrlComponent {
         return this.sanitizer.bypassSecurityTrustResourceUrl(url);
     }
     detectImage() {
-        if (this.node?.properties !== undefined && this.node.properties["ccm:remoterepositorytype"][0] === "DDB") {
+        if (this.node?.properties?.["ccm:remoterepositorytype"]?.[0] === "DDB") {
             return false;
         }
         if (this.node?.mediatype === 'file-image') {
@@ -321,7 +321,7 @@ class UrlComponent {
         return (["mp4", "webm"].includes(this.url.split(".").pop() ?? ""));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: UrlComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: UrlComponent, isStandalone: true, selector: "rs-module-url", inputs: { data: "data", node: "node" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"url-wrapper\">\n  <div *ngIf=\"gdprOk\">\n    <ng-container *ngIf=\"embedding === 'youtube' && externalId !== ''\">\n      <youtube-player\n        [videoId]=\"externalId ?? ''\"\n        [disableCookies]=\"true\"\n      ></youtube-player>\n    </ng-container>\n    <ng-container *ngIf=\"embedding === 'vimeo' && externalId !== ''\">\n      <iframe [src]=\"getVimeoUri()\"></iframe>\n    </ng-container>\n    <ng-container *ngIf=\"embedding === 'audio' &&  url !== ''\" >\n      <div class=\"audio-wrapper\">\n        <video\n          controls\n          style=\"max-width: 100%\"\n          [src]=\"url\"\n          poster=\"assets/img/audio.svg\"\n        >\n        </video>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"embedding === 'image' && url !== ''\">\n      <div class=\"image-wrapper\">\n        <img\n          [ngSrc]=\"url\"\n          [alt]=\"node?.title ?? 'Edu-Sharing image'\"\n          [title]=\"node?.title ?? 'Edu-Sharing image'\"\n          width=\"100%\"\n          height=\"auto\"\n        >\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"embedding === 'video' && url !== ''\">\n      <div class=\"video-wrapper\">\n        <video\n          controls\n          [src]=\"url\"\n        >\n        </video>\n      </div>\n    </ng-container>\n  </div>\n  <div *ngIf=\"!gdprOk\">\n    Halt! Stop!\n    <button mat-button (click)=\"consentToGdprWarning()\">Weiter!</button>\n  </div>\n</div>\n", styles: [":host{position:relative;display:flex;align-items:center}.url-wrapper{width:100%}.url-wrapper .audio-wrapper video[poster]{object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: RenderingModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: YouTubePlayer, selector: "youtube-player", inputs: ["videoId", "height", "width", "startSeconds", "endSeconds", "suggestedQuality", "playerVars", "disableCookies", "loadApi", "disablePlaceholder", "showBeforeIframeApiLoads", "placeholderButtonLabel", "placeholderImageQuality"], outputs: ["ready", "stateChange", "error", "apiChange", "playbackQualityChange", "playbackRateChange"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: UrlComponent, isStandalone: true, selector: "rs-module-url", inputs: { data: "data", node: "node" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"url-wrapper\">\n  <div *ngIf=\"gdprOk\">\n    <ng-container *ngIf=\"embedding === 'youtube' && externalId !== ''\">\n      <youtube-player\n        [videoId]=\"externalId ?? ''\"\n        [disableCookies]=\"true\"\n      ></youtube-player>\n    </ng-container>\n    <ng-container *ngIf=\"embedding === 'vimeo' && externalId !== ''\">\n      <iframe [src]=\"getVimeoUri()\"></iframe>\n    </ng-container>\n    <ng-container *ngIf=\"embedding === 'audio' &&  url !== ''\" >\n      <div class=\"audio-wrapper\">\n        <video\n          controls\n          style=\"max-width: 100%\"\n          [src]=\"url\"\n          poster=\"assets/img/audio.svg\"\n        >\n        </video>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"embedding === 'image' && url !== ''\">\n      <div class=\"image-wrapper\">\n        <img\n          [ngSrc]=\"url\"\n          [alt]=\"node?.title ?? 'Edu-Sharing image'\"\n          [title]=\"node?.title ?? 'Edu-Sharing image'\"\n          width=\"100%\"\n          height=\"auto\"\n        >\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"embedding === 'video' && url !== ''\">\n      <div class=\"video-wrapper\">\n        <video\n          controls\n          [src]=\"url\"\n        >\n        </video>\n      </div>\n    </ng-container>\n  </div>\n  <div *ngIf=\"!gdprOk\">\n    Halt! Stop!\n    <button mat-button (click)=\"consentToGdprWarning()\">Weiter!</button>\n  </div>\n</div>\n", styles: [":host{position:relative;display:flex;align-items:center}.url-wrapper{width:100%}.url-wrapper .audio-wrapper video[poster]{object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: RenderingModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: YouTubePlayer, selector: "youtube-player", inputs: ["videoId", "height", "width", "startSeconds", "endSeconds", "suggestedQuality", "playerVars", "disableCookies", "loadApi", "disablePlaceholder", "showBeforeIframeApiLoads", "placeholderButtonLabel", "placeholderImageQuality"], outputs: ["ready", "stateChange", "error", "apiChange", "playbackQualityChange", "playbackRateChange"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: UrlComponent, decorators: [{
             type: Component,
@@ -349,13 +349,17 @@ class EduHtmlComponent {
     }
     getSafeUri() {
         if (this.data?.items !== undefined && this.data.items[0].link) {
-            return this.sanitizer.bypassSecurityTrustResourceUrl(this.data.items[0].link);
+            const uri = new URL(this.data.items[0].link);
+            if (uri.hostname.includes("nip.io")) {
+                uri.hostname = "localhost";
+            }
+            return this.sanitizer.bypassSecurityTrustResourceUrl(uri.toString());
         }
         return new class {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: EduHtmlComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: EduHtmlComponent, isStandalone: true, selector: "rs-module-eduHtml", inputs: { data: "data", node: "node" }, ngImport: i0, template: "<div class=\"eduHtml-wrapper\" *ngIf=\"data?.items !== undefined\">\n  <iframe [src]=\"getSafeUri()\"></iframe>\n</div>\n", styles: [":host{position:relative;display:flex;align-items:center;width:100%}.eduHtml-wrapper{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: RenderingModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: EduHtmlComponent, isStandalone: true, selector: "rs-module-eduHtml", inputs: { data: "data", node: "node" }, ngImport: i0, template: "<div class=\"eduHtml-wrapper\" *ngIf=\"data?.items !== undefined\">\n  <iframe class=\"frame\" [src]=\"getSafeUri()\"></iframe>\n</div>\n", styles: [":host{position:relative;display:flex;align-items:center;width:100%}.eduHtml-wrapper{width:100%;height:500px}.eduHtml-wrapper .frame{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: RenderingModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: EduHtmlComponent, decorators: [{
             type: Component,
@@ -363,7 +367,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
                         RenderingModule,
                         MatButtonModule,
                         MatIconModule
-                    ], template: "<div class=\"eduHtml-wrapper\" *ngIf=\"data?.items !== undefined\">\n  <iframe [src]=\"getSafeUri()\"></iframe>\n</div>\n", styles: [":host{position:relative;display:flex;align-items:center;width:100%}.eduHtml-wrapper{width:100%}\n"] }]
+                    ], template: "<div class=\"eduHtml-wrapper\" *ngIf=\"data?.items !== undefined\">\n  <iframe class=\"frame\" [src]=\"getSafeUri()\"></iframe>\n</div>\n", styles: [":host{position:relative;display:flex;align-items:center;width:100%}.eduHtml-wrapper{width:100%;height:500px}.eduHtml-wrapper .frame{width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.DomSanitizer }], propDecorators: { data: [{
                 type: Input
             }], node: [{
@@ -439,10 +443,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
                 }]
         }] });
 
+class ModuleInfoService {
+    constructor(service) {
+        this.service = service;
+        this.availableMediaTypes = [];
+        this.availableMimeTypes = [];
+        this.availableMimeTypePrefixes = [];
+    }
+    async isAvailableBackendObject(node) {
+        if (!this.isInitialized()) {
+            const result = await firstValueFrom(this.service.getModulesInfo());
+            result.forEach(info => {
+                if (info.typeMapping.type !== undefined && info.typeMapping.type !== null) {
+                    this.availableMediaTypes.push(info.typeMapping.type);
+                }
+                else if (info.typeMapping.mimeTypeSuffix !== undefined
+                    && info.typeMapping.mimeTypeSuffix !== null
+                    && info.typeMapping.mimeTypePrefix !== undefined
+                    && info.typeMapping.mimeTypePrefix !== null) {
+                    this.availableMimeTypes.push(`${info.typeMapping.mimeTypePrefix}/${info.typeMapping.mimeTypeSuffix}`);
+                }
+                else if (info.typeMapping.mimeTypePrefix !== undefined && info.typeMapping.mimeTypePrefix !== null) {
+                    this.availableMimeTypePrefixes.push(info.typeMapping.mimeTypePrefix);
+                }
+            });
+        }
+        const mimeTypePrefix = (node.mimetype ?? '').split('/', 2)[0];
+        return this.availableMediaTypes.includes(node.mediatype ?? "") ||
+            this.availableMimeTypes.includes(node.mimetype ?? "") ||
+            this.availableMimeTypePrefixes.includes(mimeTypePrefix);
+    }
+    isInitialized() {
+        return this.availableMediaTypes.length
+            + this.availableMimeTypes.length
+            + this.availableMimeTypePrefixes.length !== 0;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: ModuleInfoService, deps: [{ token: i1$1.ModuleInfoControllerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: ModuleInfoService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: ModuleInfoService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }], ctorParameters: () => [{ type: i1$1.ModuleInfoControllerService }] });
+
 class RenderComponent {
-    constructor(renderControllerService, jobInfoControllerService) {
+    constructor(renderControllerService, jobInfoControllerService, moduleInfoService) {
         this.renderControllerService = renderControllerService;
         this.jobInfoControllerService = jobInfoControllerService;
+        this.moduleInfoService = moduleInfoService;
         this.renderData$ = new BehaviorSubject(null);
         this.finished = new Subject();
         this.someButNotAllFinished = new Subject();
@@ -450,7 +498,7 @@ class RenderComponent {
         this.useUrlModule = false;
     }
     async ngOnChanges(changes) {
-        if (this.node === undefined || !this.checkIfBackendModule()) {
+        if (this.node !== undefined && !await this.moduleInfoService.isAvailableBackendObject(this.node)) {
             return;
         }
         const renderResponseData = (await firstValueFrom(this.renderControllerService.getRenderData({
@@ -469,14 +517,14 @@ class RenderComponent {
                 return assetItem;
             });
             const data = {
-                module: renderResponseData.module,
+                module: renderResponseData.module ?? '',
                 items: items
             };
             renderResponseData.objectLinks !== undefined && this.renderData$.next(data);
             this.finished.next();
         }
         else {
-            this.progress$.next({ module: renderResponseData.module });
+            this.progress$.next({ module: renderResponseData.module ?? '' });
             interval(500).pipe(takeUntil(this.finished), switchMap(() => this.jobInfoControllerService.getJobInfo({ jobId: renderResponseData.jobId }).pipe())).subscribe(async (status) => {
                 // Some, but not all, jobs are finished ->
                 if (status.jobs.some(j => j.status === 'FINISHED') && status.status !== 'FINISHED') {
@@ -490,7 +538,7 @@ class RenderComponent {
                         return assetItem;
                     });
                     const data = {
-                        module: renderResponseData.module,
+                        module: renderResponseData.module ?? '',
                         items: items
                     };
                     this.renderData$.next(data);
@@ -508,7 +556,7 @@ class RenderComponent {
                         return assetItem;
                     });
                     const data = {
-                        module: renderResponseData.module,
+                        module: renderResponseData.module ?? '',
                         items: items
                     };
                     this.renderData$.next(data);
@@ -525,33 +573,15 @@ class RenderComponent {
                         progress = -(Math.min(...status.jobs.map(j => j.progress + 1)));
                     }
                     this.progress$.next({
-                        module: status.module,
+                        module: status.module ?? '',
                         progress: progress
                     });
                 }
             });
         }
     }
-    checkIfBackendModule() {
-        if (["youtube", "pixabay"].includes((this.node?.remote?.repository?.repositoryType ?? "").toLowerCase())) {
-            this.useUrlModule = true;
-            return false;
-        }
-        if (this.node?.properties === undefined) {
-            return true;
-        }
-        if (this.node?.properties["ccm:replicationsource"] !== undefined && (this.node.properties["ccm:replicationsource"][0] ?? "") === "oai:dmglib.org") {
-            this.useUrlModule = true;
-            return false;
-        }
-        if (this.node?.properties["ccm:wwwurl"].length > 0) {
-            this.useUrlModule = true;
-            return false;
-        }
-        return true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: RenderComponent, deps: [{ token: i1$1.RenderControllerService }, { token: i1$1.JobInfoControllerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: RenderComponent, isStandalone: true, selector: "rs-root", inputs: { request: "request", node: "node" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"module\">\n  <ng-container *ngIf=\"renderData$ | async as data\">\n    @defer (when data?.module === 'IMAGE'){\n      <rs-module-image [data]=\"data\" [node]=\"node\"></rs-module-image>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'VIDEO' || data?.module === 'AUDIO'){\n      <rs-module-video [data]=\"data\" [node]=\"node\"></rs-module-video>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'PDF' || data?.module === 'DOCUMENT') {\n      <rs-module-pdf [data]=\"data\" [node]=\"node\"></rs-module-pdf>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'EDUHTML') {\n      <rs-module-eduHtml [data]=\"data\" [node]=\"node\"></rs-module-eduHtml>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'SPREADSHEET') {\n      <rs-module-spreadsheet [data]=\"data\" [node]=\"node\"></rs-module-spreadsheet>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n  </ng-container>\n  <ng-container *ngIf=\"useUrlModule\">\n  @defer (when useUrlModule) {\n    <rs-module-url [node]=\"node\"></rs-module-url>\n  }\n  </ng-container>\n  <div class=\"progress\" *ngIf=\"(renderData$ | async) === null;\">\n    <ng-container *ngIf=\"progress$ | async as progress\">\n      <ng-container [ngSwitch]=\"['VIDEO', 'AUDIO'].includes(progress.module) ? 'bar' : 'spinner'\">\n        <ng-container *ngSwitchCase=\"'bar'\">\n          <div *ngIf=\"(progress.progress ?? 0) < 0\">Queue position: {{-(progress.progress ?? 0)}}</div>\n          <mat-progress-bar [value]=\"(progress.progress ?? 0)\" *ngIf=\"(progress.progress ?? 0) >= 0\"></mat-progress-bar>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'spinner'\">\n          <div *ngIf=\"(progress.progress ?? 0) < 0\">Queue position: {{-(progress.progress ?? 0)}</div>\n          <mat-spinner [diameter]=\"50\" *ngIf=\"(progress.progress ?? 0) >= 0\"></mat-spinner>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #loading>\n  <div class=\"progress\">\n    <mat-spinner></mat-spinner>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;gap:20px;padding:10px 30px}.module{overflow:auto;display:flex;flex-grow:1;height:auto;border:1px solid #aaa;padding:20px}.module rs-module-image,.module rs-module-video{width:100%}.module .progress{display:flex;justify-content:center;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: RenderingApiModule }, { kind: "ngmodule", type: RenderingModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], deferBlockDependencies: [() => [Promise.resolve().then(function () { return image_component; }).then(m => m.ImageComponent)], () => [Promise.resolve().then(function () { return video_component; }).then(m => m.VideoComponent)], () => [Promise.resolve().then(function () { return pdf_component; }).then(m => m.PdfComponent)], () => [Promise.resolve().then(function () { return eduHtml_component; }).then(m => m.EduHtmlComponent)], () => [Promise.resolve().then(function () { return spreadsheet_component; }).then(m => m.SpreadsheetComponent)], () => [Promise.resolve().then(function () { return url_component; }).then(m => m.UrlComponent)]] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: RenderComponent, deps: [{ token: i1$1.RenderControllerService }, { token: i1$1.JobInfoControllerService }, { token: ModuleInfoService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: RenderComponent, isStandalone: true, selector: "rs-root", inputs: { request: "request", node: "node" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"module\">\n  <ng-container *ngIf=\"renderData$ | async as data\">\n    @defer (when data?.module === 'IMAGE'){\n      <rs-module-image [data]=\"data\" [node]=\"node\"></rs-module-image>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'VIDEO' || data?.module === 'AUDIO'){\n      <rs-module-video [data]=\"data\" [node]=\"node\"></rs-module-video>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'PDF' || data?.module === 'DOCUMENT') {\n      <rs-module-pdf [data]=\"data\" [node]=\"node\"></rs-module-pdf>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'EDUHTML' || data?.module === 'H5P' || data?.module === 'JUPYTER') {\n      <rs-module-eduHtml [data]=\"data\" [node]=\"node\"></rs-module-eduHtml>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'SPREADSHEET') {\n      <rs-module-spreadsheet [data]=\"data\" [node]=\"node\"></rs-module-spreadsheet>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n  </ng-container>\n  <ng-container *ngIf=\"useUrlModule\">\n  @defer (when useUrlModule) {\n    <rs-module-url [node]=\"node\"></rs-module-url>\n  }\n  </ng-container>\n  <div class=\"progress\" *ngIf=\"(renderData$ | async) === null;\">\n    <ng-container *ngIf=\"progress$ | async as progress\">\n      <ng-container [ngSwitch]=\"['VIDEO', 'AUDIO'].includes(progress.module) ? 'bar' : 'spinner'\">\n        <ng-container *ngSwitchCase=\"'bar'\">\n          <div *ngIf=\"(progress.progress ?? 0) < 0\">Queue position: {{-(progress.progress ?? 0)}}</div>\n          <mat-progress-bar [value]=\"(progress.progress ?? 0)\" *ngIf=\"(progress.progress ?? 0) >= 0\"></mat-progress-bar>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'spinner'\">\n          <div *ngIf=\"(progress.progress ?? 0) < 0\">Queue position: {{-(progress.progress ?? 0)}</div>\n          <mat-spinner [diameter]=\"50\" *ngIf=\"(progress.progress ?? 0) >= 0\"></mat-spinner>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #loading>\n  <div class=\"progress\">\n    <mat-spinner></mat-spinner>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;gap:20px;padding:10px 30px}.module{overflow:auto;display:flex;flex-grow:1;height:auto;border:1px solid #aaa;padding:20px}.module rs-module-image,.module rs-module-video{width:100%}.module .progress{display:flex;justify-content:center;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: RenderingApiModule }, { kind: "ngmodule", type: RenderingModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], deferBlockDependencies: [() => [Promise.resolve().then(function () { return image_component; }).then(m => m.ImageComponent)], () => [Promise.resolve().then(function () { return video_component; }).then(m => m.VideoComponent)], () => [Promise.resolve().then(function () { return pdf_component; }).then(m => m.PdfComponent)], () => [Promise.resolve().then(function () { return eduHtml_component; }).then(m => m.EduHtmlComponent)], () => [Promise.resolve().then(function () { return spreadsheet_component; }).then(m => m.SpreadsheetComponent)], () => [Promise.resolve().then(function () { return url_component; }).then(m => m.UrlComponent)]] }); }
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.2.6", ngImport: i0, type: RenderComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return image_component; }).then(m => m.ImageComponent), Promise.resolve().then(function () { return video_component; }).then(m => m.VideoComponent), Promise.resolve().then(function () { return pdf_component; }).then(m => m.PdfComponent), Promise.resolve().then(function () { return eduHtml_component; }).then(m => m.EduHtmlComponent), Promise.resolve().then(function () { return spreadsheet_component; }).then(m => m.SpreadsheetComponent), Promise.resolve().then(function () { return url_component; }).then(m => m.UrlComponent)], resolveMetadata: (ImageComponent, VideoComponent, PdfComponent, EduHtmlComponent, SpreadsheetComponent, UrlComponent) => ({ decorators: [{
                 type: Component,
@@ -566,8 +596,8 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.2.6", ng
                             UrlComponent,
                             EduHtmlComponent,
                             SpreadsheetComponent,
-                        ], template: "<div class=\"module\">\n  <ng-container *ngIf=\"renderData$ | async as data\">\n    @defer (when data?.module === 'IMAGE'){\n      <rs-module-image [data]=\"data\" [node]=\"node\"></rs-module-image>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'VIDEO' || data?.module === 'AUDIO'){\n      <rs-module-video [data]=\"data\" [node]=\"node\"></rs-module-video>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'PDF' || data?.module === 'DOCUMENT') {\n      <rs-module-pdf [data]=\"data\" [node]=\"node\"></rs-module-pdf>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'EDUHTML') {\n      <rs-module-eduHtml [data]=\"data\" [node]=\"node\"></rs-module-eduHtml>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'SPREADSHEET') {\n      <rs-module-spreadsheet [data]=\"data\" [node]=\"node\"></rs-module-spreadsheet>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n  </ng-container>\n  <ng-container *ngIf=\"useUrlModule\">\n  @defer (when useUrlModule) {\n    <rs-module-url [node]=\"node\"></rs-module-url>\n  }\n  </ng-container>\n  <div class=\"progress\" *ngIf=\"(renderData$ | async) === null;\">\n    <ng-container *ngIf=\"progress$ | async as progress\">\n      <ng-container [ngSwitch]=\"['VIDEO', 'AUDIO'].includes(progress.module) ? 'bar' : 'spinner'\">\n        <ng-container *ngSwitchCase=\"'bar'\">\n          <div *ngIf=\"(progress.progress ?? 0) < 0\">Queue position: {{-(progress.progress ?? 0)}}</div>\n          <mat-progress-bar [value]=\"(progress.progress ?? 0)\" *ngIf=\"(progress.progress ?? 0) >= 0\"></mat-progress-bar>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'spinner'\">\n          <div *ngIf=\"(progress.progress ?? 0) < 0\">Queue position: {{-(progress.progress ?? 0)}</div>\n          <mat-spinner [diameter]=\"50\" *ngIf=\"(progress.progress ?? 0) >= 0\"></mat-spinner>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #loading>\n  <div class=\"progress\">\n    <mat-spinner></mat-spinner>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;gap:20px;padding:10px 30px}.module{overflow:auto;display:flex;flex-grow:1;height:auto;border:1px solid #aaa;padding:20px}.module rs-module-image,.module rs-module-video{width:100%}.module .progress{display:flex;justify-content:center;flex-grow:1}\n"] }]
-            }], ctorParameters: () => [{ type: i1$1.RenderControllerService }, { type: i1$1.JobInfoControllerService }], propDecorators: { request: [{
+                        ], template: "<div class=\"module\">\n  <ng-container *ngIf=\"renderData$ | async as data\">\n    @defer (when data?.module === 'IMAGE'){\n      <rs-module-image [data]=\"data\" [node]=\"node\"></rs-module-image>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'VIDEO' || data?.module === 'AUDIO'){\n      <rs-module-video [data]=\"data\" [node]=\"node\"></rs-module-video>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'PDF' || data?.module === 'DOCUMENT') {\n      <rs-module-pdf [data]=\"data\" [node]=\"node\"></rs-module-pdf>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'EDUHTML' || data?.module === 'H5P' || data?.module === 'JUPYTER') {\n      <rs-module-eduHtml [data]=\"data\" [node]=\"node\"></rs-module-eduHtml>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'SPREADSHEET') {\n      <rs-module-spreadsheet [data]=\"data\" [node]=\"node\"></rs-module-spreadsheet>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n  </ng-container>\n  <ng-container *ngIf=\"useUrlModule\">\n  @defer (when useUrlModule) {\n    <rs-module-url [node]=\"node\"></rs-module-url>\n  }\n  </ng-container>\n  <div class=\"progress\" *ngIf=\"(renderData$ | async) === null;\">\n    <ng-container *ngIf=\"progress$ | async as progress\">\n      <ng-container [ngSwitch]=\"['VIDEO', 'AUDIO'].includes(progress.module) ? 'bar' : 'spinner'\">\n        <ng-container *ngSwitchCase=\"'bar'\">\n          <div *ngIf=\"(progress.progress ?? 0) < 0\">Queue position: {{-(progress.progress ?? 0)}}</div>\n          <mat-progress-bar [value]=\"(progress.progress ?? 0)\" *ngIf=\"(progress.progress ?? 0) >= 0\"></mat-progress-bar>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'spinner'\">\n          <div *ngIf=\"(progress.progress ?? 0) < 0\">Queue position: {{-(progress.progress ?? 0)}</div>\n          <mat-spinner [diameter]=\"50\" *ngIf=\"(progress.progress ?? 0) >= 0\"></mat-spinner>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #loading>\n  <div class=\"progress\">\n    <mat-spinner></mat-spinner>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;gap:20px;padding:10px 30px}.module{overflow:auto;display:flex;flex-grow:1;height:auto;border:1px solid #aaa;padding:20px}.module rs-module-image,.module rs-module-video{width:100%}.module .progress{display:flex;justify-content:center;flex-grow:1}\n"] }]
+            }], ctorParameters: () => [{ type: i1$1.RenderControllerService }, { type: i1$1.JobInfoControllerService }, { type: ModuleInfoService }], propDecorators: { request: [{
                     type: Input
                 }], node: [{
                     type: Input