alfresco-ng2-components/lib/core/viewer/components/viewer.component.html

<div *ngIf="showViewer"
    class="adf-viewer-container"
    [class.adf-viewer-overlay-container]="overlayMode"
    [class.adf-viewer-inline-container]="!overlayMode">

    <div class="adf-viewer-content" fxLayout="column">
        <ng-content select="adf-viewer-toolbar"></ng-content>
        <ng-container *ngIf="showToolbar && !toolbar">
            <adf-toolbar color="default" class="adf-viewer-toolbar">

                <adf-toolbar-title>
                    <button *ngIf="allowGoBack"
                        class="adf-viewer-close-button"
                        data-automation-id="toolbar-back"
                        mat-icon-button
                        matTooltip="{{ 'ADF_VIEWER.ACTIONS.CLOSE' | translate }}"
                        (click)="onBackButtonClick()">
                        <mat-icon>close</mat-icon>
                    </button>
                </adf-toolbar-title>

                <div fxFlex="1 1 auto">
                    <button
                        *ngIf="allowNavigate && canNavigateBefore"
                        data-automation-id="toolbar-pref-file"
                        mat-icon-button
                        matTooltip="{{ 'ADF_VIEWER.ACTIONS.PREV_FILE' | translate }}"
                        (click)="onNavigateBeforeClick()">
                        <mat-icon>navigate_before</mat-icon>
                    </button>
                    <img class="adf-viewer__mimeicon" [src]="mimeType | adfMimeTypeIcon">
                    <span class="adf-viewer__display-name" id="adf-viewer-display-name">{{ displayName }}</span>
                    <button
                        *ngIf="allowNavigate && canNavigateNext"
                        data-automation-id="toolbar-next-file"
                        mat-icon-button
                        matTooltip="{{ 'ADF_VIEWER.ACTIONS.NEXT_FILE' | translate }}"
                        (click)="onNavigateNextClick()">
                        <mat-icon>navigate_next</mat-icon>
                    </button>
                </div>

                <ng-container *ngIf="mnuOpenWith">
                    <button
                        mat-button
                        [matMenuTriggerFor]="mnuOpenWith"
                        data-automation-id="toolbar-open-with">
                        <span>{{ 'ADF_VIEWER.ACTIONS.OPEN_WITH' | translate }}</span>
                        <mat-icon>arrow_drop_down</mat-icon>
                    </button>
                    <mat-menu #mnuOpenWith="matMenu" [overlapTrigger]="false">
                        <ng-content select="adf-viewer-open-with"></ng-content>
                    </mat-menu>
                </ng-container>

                <adf-toolbar-divider></adf-toolbar-divider>

                <button
                    *ngIf="allowDownload"
                    mat-icon-button
                    matTooltip="{{ 'ADF_VIEWER.ACTIONS.DOWNLOAD' | translate }}"
                    data-automation-id="toolbar-download"
                    (click)="downloadContent()">
                    <mat-icon>file_download</mat-icon>
                </button>

                <button
                    *ngIf="allowPrint"
                    mat-icon-button
                    matTooltip="{{ 'ADF_VIEWER.ACTIONS.PRINT' | translate }}"
                    data-automation-id="toolbar-print"
                    (click)="printContent()">
                    <mat-icon>print</mat-icon>
                </button>

                <button
                    *ngIf="allowShare"
                    mat-icon-button
                    matTooltip="{{ 'ADF_VIEWER.ACTIONS.SHARE' | translate }}"
                    data-automation-id="toolbar-share"
                    (click)="shareContent()">
                    <mat-icon>share</mat-icon>
                </button>

                <button
                    *ngIf="allowFullScreen"
                    mat-icon-button
                    matTooltip="{{ 'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate }}"
                    data-automation-id="toolbar-fullscreen"
                    (click)="enterFullScreen()">
                    <mat-icon>fullscreen</mat-icon>
                </button>

                <ng-container *ngIf="mnuMoreActions">
                    <button
                        mat-icon-button
                        [matMenuTriggerFor]="mnuMoreActions"
                        matTooltip="{{ 'ADF_VIEWER.ACTIONS.MORE_ACTIONS' | translate }}"
                        data-automation-id="toolbar-more-actions">
                        <mat-icon>more_vert</mat-icon>
                    </button>
                    <mat-menu #mnuMoreActions="matMenu" [overlapTrigger]="false">
                        <ng-content select="adf-viewer-more-actions"></ng-content>
                    </mat-menu>
                </ng-container>

                <ng-container *ngIf="allowSidebar">
                    <adf-toolbar-divider></adf-toolbar-divider>

                    <button
                        mat-icon-button
                        matTooltip="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
                        data-automation-id="toolbar-sidebar"
                        [color]="showSidebar ? 'accent' : 'default'"
                        (click)="toggleSidebar($event)">
                        <mat-icon>info_outline</mat-icon>
                    </button>
                </ng-container>

            </adf-toolbar>
        </ng-container>

        <ng-container *ngIf="isLoading">
            <div class="adf-viewer__loading-screen" fxFlex="1 1 auto">
                <h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
                <div>
                    <mat-spinner></mat-spinner>
                </div>
            </div>
        </ng-container>

        <div *ngIf="!isLoading" fxLayout="row" fxFlex="1 1 auto">

            <ng-container *ngIf="allowSidebar && showSidebar">
                <div class="adf-viewer__sidebar" fxFlexOrder="{{sidebarPosition === 'left'? 1 : 4 }}">
                    <ng-container *ngIf="sidebarTemplate">
                        <ng-container *ngTemplateOutlet="sidebarTemplate;context:sidebarTemplateContext"></ng-container>
                    </ng-container>
                    <ng-content *ngIf="!sidebarTemplate" select="adf-viewer-sidebar"></ng-content>
                </div>
            </ng-container>

            <div class="adf-viewer-main" fxFlexOrder="{{sidebarPosition !== 'left'? 1 : 4}}" fxFlex="1 1 auto">
                <div class="adf-viewer-layout-content adf-viewer__fullscreen-container">
                    <div class="adf-viewer-content-container" [ngSwitch]="viewerType">
                        <ng-container *ngSwitchCase="'pdf'">
                            <adf-pdf-viewer [thumbnailsTemplate]="thumbnailsTemplate" [allowThumbnails]="allowThumbnails" [blobFile]="blobFile" [urlFile]="urlFileContent" [nameFile]="displayName"></adf-pdf-viewer>
                        </ng-container>

                        <ng-container *ngSwitchCase="'image'">
                            <adf-img-viewer [urlFile]="urlFileContent" [nameFile]="displayName" [blobFile]="blobFile"></adf-img-viewer>
                        </ng-container>

                        <ng-container *ngSwitchCase="'media'">
                            <adf-media-player [urlFile]="urlFileContent" [mimeType]="mimeType" [blobFile]="blobFile" [nameFile]="displayName"></adf-media-player>
                        </ng-container>

                        <ng-container *ngSwitchCase="'text'">
                            <adf-txt-viewer [urlFile]="urlFileContent" [blobFile]="blobFile"></adf-txt-viewer>
                        </ng-container>

                        <ng-container *ngSwitchCase="'custom'">
                            <span class="adf-viewer-custom-content" *ngFor="let extensionTemplate of extensionTemplates">
                                <ng-template *ngIf="extensionTemplate.isVisible" [ngTemplateOutlet]="extensionTemplate.template" [ngTemplateOutletContext]="{ urlFileContent: urlFileContent, extension:extension }">
                                </ng-template>
                            </span>
                        </ng-container>

                        <ng-container *ngSwitchDefault>
                            <adf-viewer-unknown-format></adf-viewer-unknown-format>
                        </ng-container>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>