next-ucap-messenger/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html

<div class="ucap-image-viewer-container">
  <mat-toolbar class="ucap-image-viewer-header bg-primary-dark">
    <!--<mat-icon class="ucap-image-viewer-icon">image</mat-icon>-->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="21"
      height="21"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="butt"
      stroke-linejoin="round"
      class="ucap-image-viewer-icon"
    >
      <rect x="3" y="3" width="18" height="18" rx="2" />
      <circle cx="8.5" cy="8.5" r="1.5" />
      <path d="M20.4 14.5L16 10 4 20" />
    </svg>
    <span class="ucap-image-viewer-title">{{ fileInfo.fileName }}</span>
    <span class="ucap-image-viewer-spacer"></span>

    <button
      mat-icon-button
      class="ucap-image-viewer-action"
      matTooltip="{{ 'common.messages.zoomReset' | translate }}"
      matTooltipPosition="below"
      aria-label=""
      (click)="onClickZoomReset()"
    >
      <!--<mat-icon>settings_overscan</mat-icon>-->

      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="21"
        height="21"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="butt"
        stroke-linejoin="round"
      >
        <path
          d="M3.8 3.8l16.4 16.4M20.2 3.8L3.8 20.2M15 3h6v6M9 3H3v6M15 21h6v-6M9 21H3v-6"
        />
      </svg>
    </button>
    <button
      mat-icon-button
      class="ucap-image-viewer-action"
      matTooltip="{{ 'common.messages.zoomOut' | translate }}"
      matTooltipPosition="below"
      aria-label=""
      (click)="onClickZoomOut()"
    >
      <!--<mat-icon>zoom_out</mat-icon>-->
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="21"
        height="21"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="butt"
        stroke-linejoin="round"
      >
        <circle cx="11" cy="11" r="8"></circle>
        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        <line x1="8" y1="11" x2="14" y2="11"></line>
      </svg>
    </button>
    <button
      mat-icon-button
      class="ucap-image-viewer-action"
      matTooltip="{{ 'common.messages.zoomIn' | translate }}"
      matTooltipPosition="below"
      aria-label=""
      (click)="onClickZoomIn()"
    >
      <!--<mat-icon>zoom_in</mat-icon>-->
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="21"
        height="21"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="butt"
        stroke-linejoin="round"
      >
        <circle cx="11" cy="11" r="8"></circle>
        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        <line x1="11" y1="8" x2="11" y2="14"></line>
        <line x1="8" y1="11" x2="14" y2="11"></line>
      </svg>
    </button>
    <button
      mat-icon-button
      class="ucap-image-viewer-action"
      matTooltip="{{ 'common.file.download' | translate }}"
      matTooltipPosition="below"
      aria-label=""
      (click)="onClickDownload()"
    >
      <!--<mat-icon>get_app</mat-icon>-->
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="21"
        height="21"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="butt"
        stroke-linejoin="round"
      >
        <path
          d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"
        />
      </svg>
    </button>
    <span class="stroke-bar"></span>
    <button
      mat-icon-button
      color="warn"
      class="ucap-image-viewer-action btn-close"
      matTooltip="{{ 'common.messages.close' | translate }}"
      (click)="onClickClose()"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="21"
        height="21"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="butt"
        stroke-linejoin="round"
      >
        <line x1="18" y1="6" x2="6" y2="18"></line>
        <line x1="6" y1="6" x2="18" y2="18"></line>
      </svg>
    </button>
  </mat-toolbar>
  <div style="position: relative;">
    <div
      *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
      style="position: absolute; width: 100%;"
    >
      <mat-progress-bar
        mode="determinate"
        [value]="fileDownloadItem.downloadingProgress$ | async"
      ></mat-progress-bar>
    </div>
  </div>
  <div class="ucap-image-viewer-body">
    <div
      class="ucap-image-viewer-image-wrapper"
      fxLayout="row"
      fxLayout.xs="column"
      fxFlexFill
      fxLayoutAlign="center center"
    >
      <img
        #downloadImage
        *ngIf="fileDownloadUrl"
        [src]="fileDownloadUrl"
        [style.width]="(zoomRatio / 100) * naturalWidth + 'px'"
        [style.height]="'auto'"
        (load)="onLoadFileDownloadUrl(downloadImage)"
      />
    </div>
  </div>
</div>