alfresco-ng2-components/ng2-components/ng2-alfresco-viewer/src/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">
        <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"
                        mat-icon-button
                        matTooltip="{{ 'ADF_VIEWER.ACTIONS.BACK' | translate }}"
                        (click)="onBackButtonClick()">
                        <mat-icon>arrow_back</mat-icon>
                    </button>
                    <img class="adf-viewer__mimeicon" [src]="mimeType | adfMimeTypeIcon">
                    <span>{{ displayName }}</span>
                </adf-toolbar-title>

                <ng-container *ngIf="allowOpenWith">
                    <button mat-button [matMenuTriggerFor]="mnuOpenWith">
                        <span>{{ 'ADF_VIEWER.ACTIONS.OPEN_WITH' | translate }}</span>
                        <mat-icon>arrow_drop_down</mat-icon>
                    </button>
                    <mat-menu #mnuOpenWith="matMenu" [overlapTrigger]="false">
                        <button mat-menu-item>
                            <mat-icon>dialpad</mat-icon>
                            <span>Option 1</span>
                        </button>
                        <button mat-menu-item disabled>
                            <mat-icon>voicemail</mat-icon>
                            <span>Option 2</span>
                        </button>
                        <button mat-menu-item>
                            <mat-icon>notifications_off</mat-icon>
                            <span>Option 3</span>
                        </button>
                    </mat-menu>
                </ng-container>

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

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

                <button *ngIf="allowPrint" mat-icon-button matTooltip="{{ 'ADF_VIEWER.ACTIONS.PRINT' | translate }}">
                    <mat-icon>print</mat-icon>
                </button>

                <button *ngIf="allowShare" mat-icon-button matTooltip="{{ 'ADF_VIEWER.ACTIONS.SHARE' | translate }}">
                    <mat-icon>share</mat-icon>
                </button>

                <ng-container *ngIf="allowMoreActions">
                    <button mat-icon-button [matMenuTriggerFor]="mnuMoreActions" matTooltip="{{ 'ADF_VIEWER.ACTIONS.MORE_ACTIONS' | translate }}">
                        <mat-icon>more_vert</mat-icon>
                    </button>
                    <mat-menu #mnuMoreActions="matMenu">
                        <button mat-menu-item>
                            <mat-icon>dialpad</mat-icon>
                            <span>Action One</span>
                        </button>
                        <button mat-menu-item disabled>
                            <mat-icon>voicemail</mat-icon>
                            <span>Action Two</span>
                        </button>
                        <button mat-menu-item>
                            <mat-icon>notifications_off</mat-icon>
                            <span>Action Three</span>
                        </button>
                    </mat-menu>
                </ng-container>

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

                    <button mat-icon-button matTooltip="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
                        [color]="showInfoDrawer ? 'accent' : 'default'"
                        (click)="showInfoDrawer = !showInfoDrawer">
                        <mat-icon>info_outline</mat-icon>
                    </button>
                </ng-container>

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

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

        <div *ngIf="!isLoading" class="adf-viewer-layout">
            <div class="adf-viewer-layout-content">
                <div class="adf-viewer-content-container" [ngSwitch]="viewerType">

                    <ng-container *ngSwitchCase="'pdf'">
                        <adf-pdf-viewer [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 *ngFor="let extensionTemplate of extensionTemplates">
                            <ng-template
                                *ngIf="extensionTemplate.isVisible"
                                [ngTemplateOutlet]="extensionTemplate.template"
                                [ngOutletContext]="{ urlFileContent: urlFileContent, extension:extension }">
                            </ng-template>
                        </span>
                    </ng-container>

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

                </div>
            </div>

            <ng-container *ngIf="showInfoDrawer">
                <div class="adf-viewer__info-drawer">
                    <ng-content select="adf-viewer-info-drawer"></ng-content>
                    <ng-container *ngIf="!infoDrawer">
                        <!-- todo: default info drawer -->
                    </ng-container>
                </div>
            </ng-container>
        </div>
    </div>
</div>