web-remote/src/app/app.component.html

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <button mat-icon-button (click)="menu.toggle()"><mat-icon>menu</mat-icon></button>
    <span class="page-title">{{ pageTitle | translate }}</span>
    <span class="spacer"></span>
    <button *ngIf="showLogin" mat-button (click)="login()">{{ 'LOGIN' | translate }}</button>
    <button *ngIf="webSocketOpen"
      mat-icon-button
      (click)="forceWebSocketReconnection()"
      class="connection-status"
      matTooltip="{{ 'CONNECTED_TO_OPENLP' | translate }}">
      <mat-icon *ngIf="webSocketOpen">link</mat-icon>
    </button>
    <button *ngIf="!webSocketOpen"
      mat-icon-button
      (click)="forceWebSocketReconnection()"
      class="connection-status"
      matTooltip="{{ 'DISCONNECTED' | translate }}">
      <mat-icon *ngIf="!webSocketOpen">link_off</mat-icon>
    </button>
    <span class="app-version">v{{appVersion}}</span>
  </mat-toolbar-row>
</mat-toolbar>
<mat-sidenav-container>
  <mat-sidenav #menu mode="over">
    <mat-nav-list>
      <a mat-list-item
        (click)="menu.close()"
        routerLink="/service"
        routerLinkActive #serviceRoute="routerLinkActive"
        [activated]="serviceRoute.isActive">
        <mat-icon>list</mat-icon>  {{ 'SERVICE' | translate }}
      </a>
      <a mat-list-item
        (click)="menu.close()"
        routerLink="/slides"
        routerLinkActive #slidesRoute="routerLinkActive"
        [activated]="slidesRoute.isActive">
        <mat-icon>collections</mat-icon>  {{ 'SLIDES' | translate }}
      </a>
      <a mat-list-item
        (click)="menu.close()"
        routerLink="/alerts"
        routerLinkActive #alertsRoute="routerLinkActive"
        [activated]="alertsRoute.isActive">
        <mat-icon>error</mat-icon>  {{ 'ALERTS' | translate }}
      </a>
      <a mat-list-item
        (click)="menu.close()"
        routerLink="/search"
        routerLinkActive #searchRoute="routerLinkActive"
        [activated]="searchRoute.isActive">
        <mat-icon>search</mat-icon>  {{ 'SEARCH' | translate }}
      </a>
      <a mat-list-item
        (click)="menu.close()"
        routerLink="/themes"
        routerLinkActive #themesRoute="routerLinkActive"
        [activated]="themesRoute.isActive">
        <mat-icon>image</mat-icon>  {{ 'THEMES' | translate }}
      </a>
      <mat-divider></mat-divider>
      <a mat-list-item
        (click)="menu.close()"
        routerLink="/main">
        {{ 'MAIN_VIEW' | translate }}
      </a>
      <a mat-list-item
        (click)="menu.close()"
        routerLink="/stage">
        {{ 'STAGE_VIEW' | translate }}
      </a>
      <a mat-list-item
        (click)="menu.close()"
        routerLink="/chords">
        {{ 'CHORD_VIEW' | translate }}
      </a>
      <mat-divider></mat-divider>
      <a mat-list-item (click)="menu.close()"
        routerLink="/settings"
        routerLinkActive #settingsRoute="routerLinkActive"
        [activated]="settingsRoute.isActive">
        <mat-icon>settings</mat-icon>  {{ 'SETTINGS' | translate }}
      </a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <main class="content">
      <mat-tab-nav-panel #tabPanel>
        <router-outlet></router-outlet>
      </mat-tab-nav-panel>
    </main>
    <!-- These two toolbars are for padding the content so the real toolbars do not block content when scrolled down -->
    <mat-toolbar class="toolbar-padding"></mat-toolbar>
    <mat-toolbar *ngIf="fastSwitching" class="toolbar-padding"></mat-toolbar>
    <footer>
      <mat-toolbar class="footer">
        <button *ngIf="bigDisplayButtons"
          mat-fab color="primary"
          (click)="previousItem()"
          matTooltip="{{ 'PREVIOUS_ITEM' | translate }}"
          matTooltipPosition="above">
          <mat-icon>first_page</mat-icon>
        </button>
        <button *ngIf="!bigDisplayButtons"
          mat-icon-button (click)="previousItem()"
          matTooltip="{{ 'PREVIOUS_ITEM' | translate }}"
          matTooltipPosition="above">
          <mat-icon>first_page</mat-icon>
        </button>
        <button *ngIf="bigDisplayButtons"
          mat-fab color="primary"
          (click)="nextItem()"
          matTooltip="{{ 'NEXT_ITEM' | translate }}"
          matTooltipPosition="above">
          <mat-icon>last_page</mat-icon>
        </button>
        <button *ngIf="!bigDisplayButtons"
          mat-icon-button (click)="nextItem()"
          matTooltip="{{ 'NEXT_ITEM' | translate }}"
          matTooltipPosition="above">
          <mat-icon>last_page</mat-icon>
        </button>
        <button *ngIf="bigDisplayButtons"
          mat-fab color="primary"
          (click)="previousSlide()"
          matTooltip="{{ 'PREVIOUS_SLIDE' | translate }}"
          matTooltipPosition="above">
          <mat-icon>navigate_before</mat-icon>
        </button>
        <button *ngIf="!bigDisplayButtons"
          mat-icon-button (click)="previousSlide()"
          matTooltip="{{ 'PREVIOUS_SLIDE' | translate }}"
          matTooltipPosition="above">
          <mat-icon>navigate_before</mat-icon>
        </button>
        <button *ngIf="bigDisplayButtons"
          mat-fab color="primary"
          (click)="nextSlide()"
          matTooltip="{{ 'NEXT_SLIDE' | translate }}"
          matTooltipPosition="above">
          <mat-icon>navigate_next</mat-icon>
        </button>
        <button *ngIf="!bigDisplayButtons"
          mat-icon-button (click)="nextSlide()"
          matTooltip="{{ 'NEXT_SLIDE' | translate }}"
          matTooltipPosition="above">
          <mat-icon>navigate_next</mat-icon>
        </button>
        <button *ngIf="bigDisplayButtons"
          mat-fab color="primary"
          #squashedDisplayButton
          (click)="openDisplayModeSelector()"
          class="squashed-display-button"
          matTooltip="{{ 'CHANGE_DISPLAY_MODE' | translate }}"
          matTooltipPosition="above">
          <mat-icon *ngIf="state.blank">videocam_off</mat-icon>
          <mat-icon *ngIf="state.theme">wallpaper</mat-icon>
          <mat-icon *ngIf="state.display">desktop_windows</mat-icon>
          <mat-icon *ngIf="state.live()">videocam</mat-icon>
        </button>
        <button *ngIf="!bigDisplayButtons"
          mat-icon-button
          #squashedDisplayButton
          (click)="openDisplayModeSelector()"
          class="squashed-display-button"
          matTooltip="{{ 'CHANGE_DISPLAY_MODE' | translate }}"
          matTooltipPosition="above">
          <mat-icon *ngIf="state.blank">videocam_off</mat-icon>
          <mat-icon *ngIf="state.theme">wallpaper</mat-icon>
          <mat-icon *ngIf="state.display">desktop_windows</mat-icon>
          <mat-icon *ngIf="state.live()">videocam</mat-icon>
        </button>
        <button *ngIf="bigDisplayButtons"
          mat-fab color="primary"
          (click)="blankDisplay()"
          class="displayButton"
          [class.active]="state.blank"
          [disabled]="state.blank"
          matTooltip="{{ 'SHOW_BLACK' | translate }}"
          matTooltipPosition="above">
          <mat-icon>videocam_off</mat-icon>
        </button>
        <button *ngIf="!bigDisplayButtons"
          mat-icon-button (click)="blankDisplay()"
          class="displayButton"
          [class.active]="state.blank"
          [disabled]="state.blank"
          matTooltip="{{ 'SHOW_BLACK' | translate }}"
          matTooltipPosition="above">
          <mat-icon>videocam_off</mat-icon>
        </button>
        <button *ngIf="bigDisplayButtons"
          mat-fab color="primary"
          (click)="themeDisplay()"
          class="displayButton"
          [class.active]="state.theme"
          [disabled]="state.theme"
          matTooltip="{{ 'SHOW_BACKGROUND' | translate }}"
          matTooltipPosition="above">
          <mat-icon>wallpaper</mat-icon>
        </button>
        <button *ngIf="!bigDisplayButtons"
          mat-icon-button
          (click)="themeDisplay()"
          class="displayButton"
          [class.active]="state.theme"
          [disabled]="state.theme"
          matTooltip="{{ 'SHOW_BACKGROUND' | translate }}"
          matTooltipPosition="above">
          <mat-icon>wallpaper</mat-icon>
        </button>
        <button *ngIf="bigDisplayButtons"
          mat-fab color="primary"
          (click)="desktopDisplay()"
          class="displayButton"
          [class.active]="state.display"
          [disabled]="state.display"
          matTooltip="{{ 'SHOW_DESKTOP' | translate }}"
          matTooltipPosition="above">
          <mat-icon>desktop_windows</mat-icon>
        </button>
        <button *ngIf="!bigDisplayButtons"
          mat-icon-button (click)="desktopDisplay()"
          class="displayButton"
          [class.active]="state.display"
          [disabled]="state.display"
          matTooltip="{{ 'SHOW_DESKTOP' | translate }}"
          matTooltipPosition="above">
          <mat-icon>desktop_windows</mat-icon>
        </button>
        <button *ngIf="bigDisplayButtons"
          mat-fab color="primary"
          (click)="showDisplay()"
          class="displayButton"
          [class.active]="state.display"
          [disabled]="state.live()"
          matTooltip="{{ 'SHOW_PRESENTATION' | translate }}"
          matTooltipPosition="above">
          <mat-icon>videocam</mat-icon>
        </button>
        <button *ngIf="!bigDisplayButtons"
          mat-icon-button (click)="showDisplay()"
          class="displayButton"
          [class.active]="state.display"
          [disabled]="state.live()"
          matTooltip="{{ 'SHOW_PRESENTATION' | translate }}"
          matTooltipPosition="above">
          <mat-icon>videocam</mat-icon>
        </button>
      </mat-toolbar>
      <nav *ngIf="fastSwitching"
        mat-tab-nav-bar mat-stretch-tabs
        class="fast-switcher"
        [tabPanel]="tabPanel">
        <a mat-tab-link
          routerLink="/service"
          routerLinkActive #serviceRoute="routerLinkActive"
          [active]="serviceRoute.isActive"><mat-icon>list</mat-icon></a>
        <a mat-tab-link
          routerLink="/slides"
          routerLinkActive #slidesRoute="routerLinkActive"
          [active]="slidesRoute.isActive"><mat-icon>collections</mat-icon></a>
        <a mat-tab-link
          routerLink="/alerts"
          routerLinkActive #alertsRoute="routerLinkActive"
          [active]="alertsRoute.isActive"><mat-icon>error</mat-icon></a>
        <a mat-tab-link
          routerLink="/search"
          routerLinkActive #searchRoute="routerLinkActive"
          [active]="searchRoute.isActive"><mat-icon>search</mat-icon></a>
        <a mat-tab-link
          routerLink="/themes"
          routerLinkActive #themesRoute="routerLinkActive"
          [active]="themesRoute.isActive"><mat-icon>image</mat-icon></a>
      </nav>
    </footer>
  </mat-sidenav-content>
</mat-sidenav-container>