Merge branch 'larger-display-buttons' into 'master'

Change display of buttons.

See merge request openlp/web-remote!81

package.json

@@ -24,16 +24,16 @@
     "supportedBrowsers": "(echo module.exports = && browserslist-useragent-regexp --allowHigherVersions) > src/assets/supportedBrowsers.js"
   },
   "dependencies": {
-    "@angular/animations": "^17.3.2",
+    "@angular/animations": "^17.3.3",
-    "@angular/cdk": "^17.3.2",
+    "@angular/cdk": "^17.3.3",
-    "@angular/common": "^17.3.2",
+    "@angular/common": "^17.3.3",
-    "@angular/compiler": "^17.3.2",
+    "@angular/compiler": "^17.3.3",
-    "@angular/core": "^17.3.2",
+    "@angular/core": "^17.3.3",
-    "@angular/forms": "^17.3.2",
+    "@angular/forms": "^17.3.3",
-    "@angular/material": "^17.3.2",
+    "@angular/material": "^17.3.3",
-    "@angular/platform-browser": "^17.3.2",
+    "@angular/platform-browser": "^17.3.3",
-    "@angular/platform-browser-dynamic": "^17.3.2",
+    "@angular/platform-browser-dynamic": "^17.3.3",
-    "@angular/router": "^17.3.2",
+    "@angular/router": "^17.3.3",
     "@fontsource/roboto": "^5.0.12",
     "core-js": "^3.36.1",
     "hammerjs": "^2.0.8",
@@ -42,26 +42,26 @@
     "zone.js": "^0.14.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.3.2",
+    "@angular-devkit/build-angular": "^17.3.3",
     "@angular-eslint/builder": "^17.3.0",
     "@angular-eslint/eslint-plugin": "^17.3.0",
     "@angular-eslint/eslint-plugin-template": "^17.3.0",
     "@angular-eslint/schematics": "^17.3.0",
     "@angular-eslint/template-parser": "^17.3.0",
-    "@angular/cli": "~17.3.2",
+    "@angular/cli": "~17.3.3",
-    "@angular/compiler-cli": "^17.3.2",
+    "@angular/compiler-cli": "^17.3.3",
-    "@angular/language-service": "^17.3.2",
+    "@angular/language-service": "^17.3.3",
     "@chiragrupani/karma-chromium-edge-launcher": "^2.3.1",
     "@types/jasmine": "~5.1.4",
     "@types/jasminewd2": "~2.0.13",
-    "@types/node": "~20.12.2",
+    "@types/node": "~20.12.5",
-    "@typescript-eslint/eslint-plugin": "7.4.0",
+    "@typescript-eslint/eslint-plugin": "7.5.0",
-    "@typescript-eslint/parser": "7.4.0",
+    "@typescript-eslint/parser": "7.5.0",
     "browserslist": "^4.23.0",
-    "browserslist-useragent-regexp": "^4.1.1",
+    "browserslist-useragent-regexp": "^4.1.2",
     "eslint": "^8.57.0",
     "eslint-plugin-import": "~2.29.1",
-    "eslint-plugin-jsdoc": "~48.2.2",
+    "eslint-plugin-jsdoc": "~48.2.3",
     "eslint-plugin-prefer-arrow": "~1.2.3",
     "jasmine-core": "~5.1.2",
     "jasmine-spec-reporter": "~7.0.0",
@@ -71,7 +71,7 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
     "ts-node": "~10.9.2",
-    "typescript": "~5.4.3"
+    "typescript": "~5.4.4"
   },
   "private": true
 }

src/app/app.component.html

@@ -55,34 +55,64 @@
     <mat-toolbar *ngIf="fastSwitching" class="toolbar-padding"></mat-toolbar>
     <footer>
       <mat-toolbar class="footer">
-        <button mat-icon-button (click)="previousItem()" matTooltip="Previous item" matTooltipPosition="above">
+        <button *ngIf="bigDisplayButtons" mat-fab color="primary" (click)="previousItem()" matTooltip="Previous item" matTooltipPosition="above">
           <mat-icon>first_page</mat-icon>
         </button>
-        <button mat-icon-button (click)="nextItem()" matTooltip="Next item" matTooltipPosition="above">
+        <button *ngIf="!bigDisplayButtons" mat-icon-button (click)="previousItem()" matTooltip="Previous item" matTooltipPosition="above">
+          <mat-icon>first_page</mat-icon>
+        </button>
+        <button *ngIf="bigDisplayButtons" mat-fab color="primary" (click)="nextItem()" matTooltip="Next item" matTooltipPosition="above">
           <mat-icon>last_page</mat-icon>
         </button>
-        <button mat-icon-button (click)="previousSlide()" matTooltip="Previous slide" matTooltipPosition="above">
+        <button *ngIf="!bigDisplayButtons" mat-icon-button (click)="nextItem()" matTooltip="Next item" matTooltipPosition="above">
+          <mat-icon>last_page</mat-icon>
+        </button>
+        <button *ngIf="bigDisplayButtons" mat-fab color="primary" (click)="previousSlide()" matTooltip="Previous slide" matTooltipPosition="above">
           <mat-icon>navigate_before</mat-icon>
         </button>
-        <button mat-icon-button (click)="nextSlide()" matTooltip="Next slide" matTooltipPosition="above">
+        <button *ngIf="!bigDisplayButtons" mat-icon-button (click)="previousSlide()" matTooltip="Previous slide" matTooltipPosition="above">
+          <mat-icon>navigate_before</mat-icon>
+        </button>
+        <button *ngIf="bigDisplayButtons" mat-fab color="primary" (click)="nextSlide()" matTooltip="Next slide" matTooltipPosition="above">
           <mat-icon>navigate_next</mat-icon>
         </button>
-        <button mat-icon-button #squashedDisplayButton (click)="openDisplayModeSelector()" class="squashed-display-button" matTooltip="Change Display Mode" matTooltipPosition="above">
+        <button *ngIf="!bigDisplayButtons" mat-icon-button (click)="nextSlide()" matTooltip="Next slide" 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" 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 mat-icon-button (click)="blankDisplay()" class="displayButton" [class.active]="state.blank" [disabled]="state.blank" matTooltip="Show black" matTooltipPosition="above">
+        <button *ngIf="!bigDisplayButtons" mat-icon-button #squashedDisplayButton (click)="openDisplayModeSelector()" class="squashed-display-button" matTooltip="Change Display Mode" 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" matTooltipPosition="above">
           <mat-icon>videocam_off</mat-icon>
         </button>
-        <button mat-icon-button (click)="themeDisplay()" class="displayButton" [class.active]="state.theme" [disabled]="state.theme" matTooltip="Show background" matTooltipPosition="above">
+        <button *ngIf="!bigDisplayButtons" mat-icon-button (click)="blankDisplay()" class="displayButton" [class.active]="state.blank" [disabled]="state.blank" matTooltip="Show black" 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" matTooltipPosition="above">
           <mat-icon>wallpaper</mat-icon>
         </button>
-        <button mat-icon-button (click)="desktopDisplay()" class="displayButton" [class.active]="state.display" [disabled]="state.display" matTooltip="Show Desktop" matTooltipPosition="above">
+        <button *ngIf="!bigDisplayButtons" mat-icon-button (click)="themeDisplay()" class="displayButton" [class.active]="state.theme" [disabled]="state.theme" matTooltip="Show background" 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" matTooltipPosition="above">
           <mat-icon>desktop_windows</mat-icon>
         </button>
-        <button mat-icon-button (click)="showDisplay()" class="displayButton" [class.active]="state.display" [disabled]="state.live()" matTooltip="Show Presentation" matTooltipPosition="above">
+        <button *ngIf="!bigDisplayButtons" mat-icon-button (click)="desktopDisplay()" class="displayButton" [class.active]="state.display" [disabled]="state.display" matTooltip="Show Desktop" 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" 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" matTooltipPosition="above">
           <mat-icon>videocam</mat-icon>
         </button>
       </mat-toolbar>

src/app/app.component.scss

@@ -13,7 +13,7 @@ mat-toolbar {
   top: 0;
   z-index: 1020;
 
-  /* Fix icon button alignment on some firefox configurations */
+  /* Fix icon button alignment on some Firefox configurations */
   [mat-icon-button] {
     line-height: 1;
   }

src/app/app.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatBottomSheet } from '@angular/material/bottom-sheet';
 
-import { State, DisplayMode } from './responses';
+import { State, Display, DisplayMode } from './responses';
 import { OpenLPService, WebSocketStatus } from './openlp.service';
 import { WindowRef } from './window-ref.service';
 import { PageTitleService } from './page-title.service';
@@ -30,6 +30,7 @@ export class AppComponent implements OnInit {
   appVersion = '0.0';
   webSocketOpen = false;
   fastSwitching = false;
+  bigDisplayButtons = false;
   useShortcutsFromOpenlp = false;
 
   constructor(private pageTitleService: PageTitleService, private openlpService: OpenLPService,
@@ -60,6 +61,8 @@ export class AppComponent implements OnInit {
     );
     this.fastSwitching = this.settingsService.get('fastSwitching');
     this.settingsService.onPropertyChanged('fastSwitching').subscribe(value => this.fastSwitching = value);
+    this.bigDisplayButtons = this.settingsService.get('bigDisplayButtons');
+    this.settingsService.onPropertyChanged('bigDisplayButtons').subscribe(value => this.bigDisplayButtons = value);
   }
 
   addShortcuts(shortcuts: Shortcuts): void {
@@ -109,7 +112,10 @@ export class AppComponent implements OnInit {
   }
 
   openDisplayModeSelector(): void {
-    const selectorRef = this.bottomSheet.open(DisplayModeSelectorComponent, {data: this.state.displayMode});
+    const display = new Display();
+    display.displayMode = this.state.displayMode;
+    display.bigDisplayButtons = this.bigDisplayButtons;
+    const selectorRef = this.bottomSheet.open(DisplayModeSelectorComponent, {data: display});
     selectorRef.afterDismissed().subscribe(result => {
       if (result === DisplayMode.Blank) {this.blankDisplay();}
       else if (result === DisplayMode.Desktop) {this.desktopDisplay();}

src/app/components/display-mode-selector/display-mode-selector.component.html

@@ -1,19 +1,84 @@
-<mat-action-list>
+<mat-action-list *ngIf="!display.bigDisplayButtons">
-  <button mat-list-item (click)="setMode(DisplayMode.Blank)" class="display-button" [disabled]="displayMode === DisplayMode.Blank">
+  <button mat-list-item
-    <mat-icon>videocam_off</mat-icon>
+    aria-labelledby="caption-blank"
-    Show black
+    class="display-button"
+    (click)="setMode(DisplayMode.Blank)"
+    [disabled]="displayMode === DisplayMode.Blank">
+    <mat-icon class="small-icon">videocam_off</mat-icon>
+    <span id="caption-blank" class="caption">Show Black</span>
   </button>
-  <button mat-list-item (click)="setMode(DisplayMode.Theme)" class="display-button" [disabled]="displayMode === DisplayMode.Theme">
+  <button mat-list-item
-    <mat-icon>wallpaper</mat-icon>
+    aria-labelledby="caption-theme"
-    Show background
+    class="display-button"
+    (click)="setMode(DisplayMode.Theme)"
+    [disabled]="displayMode === DisplayMode.Theme">
+    <mat-icon class="small-icon">wallpaper</mat-icon>
+    <span id="caption-theme" class="caption">Show Background</span>
   </button>
-  <button mat-list-item (click)="setMode(DisplayMode.Desktop)" class="display-button" [disabled]="displayMode === DisplayMode.Desktop">
+  <button mat-list-item
-    <mat-icon>desktop_windows</mat-icon>
+    aria-labelledby="caption-desktop"
-    Show Desktop
+    class="display-button"
+    (click)="setMode(DisplayMode.Desktop)"
+    [disabled]="displayMode === DisplayMode.Desktop">
+    <mat-icon class="small-icon">desktop_windows</mat-icon>
+    <span id="caption-desktop" class="caption">Show Desktop</span>
   </button>
-  <button mat-list-item (click)="setMode(DisplayMode.Presentation)" class="display-button" [disabled]="displayMode === DisplayMode.Presentation">
+  <button mat-list-item
-    <mat-icon>videocam</mat-icon>
+    aria-labelledby="caption-presentation"
-    Show Presentation
+    class="display-button"
+    (click)="setMode(DisplayMode.Presentation)"
+    [disabled]="displayMode === DisplayMode.Presentation">
+    <mat-icon class="small-icon">videocam</mat-icon>
+    <span id="caption-presentation" class="caption">Show Presentation</span>
   </button>
 </mat-action-list>
-  
+<mat-grid-list *ngIf="display.bigDisplayButtons" cols="2" rowHeight="2:1">
+  <mat-grid-tile>
+    <button mat-fab color="primary"
+      aria-labelledby="caption-blank"
+      class="display-button"
+      (click)="setMode(DisplayMode.Blank)"
+      [disabled]="displayMode === DisplayMode.Blank">
+      <mat-icon class="big-icon">videocam_off</mat-icon>
+    </button>
+  </mat-grid-tile>
+  <mat-grid-tile>
+    <div id="caption-blank" class="caption">Show Black</div>
+  </mat-grid-tile>
+  <mat-grid-tile>
+    <button mat-fab color="primary"
+      aria-labelledby="caption-theme"
+      class="display-button"
+      (click)="setMode(DisplayMode.Theme)"
+      [disabled]="displayMode === DisplayMode.Theme">
+      <mat-icon class="big-icon">wallpaper</mat-icon>
+    </button>
+  </mat-grid-tile>
+  <mat-grid-tile>
+    <div id="caption-theme" class="caption">Show Background</div>
+  </mat-grid-tile>
+  <mat-grid-tile>
+    <button mat-fab color="primary"
+      aria-labelledby="caption-desktop"
+      class="display-button"
+      (click)="setMode(DisplayMode.Desktop)"
+      [disabled]="displayMode === DisplayMode.Desktop">
+      <mat-icon class="big-icon">desktop_windows</mat-icon>
+    </button>
+  </mat-grid-tile>
+  <mat-grid-tile>
+    <div id="caption-desktop" class="caption">Show Desktop</div>
+  </mat-grid-tile>
+  <mat-grid-tile>
+    <button mat-fab color="primary"
+      aria-labelledby="caption-presentation"
+      class="display-button"
+      (click)="setMode(DisplayMode.Presentation)"
+      [disabled]="displayMode === DisplayMode.Presentation">
+      <mat-icon class="big-icon">videocam</mat-icon>
+    </button>
+  </mat-grid-tile>
+  <mat-grid-tile>
+    <div id="caption-presentation" class="caption">Show Presentation</div>
+  </mat-grid-tile>
+</mat-grid-list>

src/app/components/display-mode-selector/display-mode-selector.component.scss

@@ -1,4 +1,12 @@
 .mat-icon {
     vertical-align: text-top;
+}
+
+.small-icon {
     padding-right: 10px;
-}
+}
+
+div.caption {
+    font-size: 20px;
+    font-weight: bolder;
+}

src/app/components/display-mode-selector/display-mode-selector.component.ts

@@ -1,7 +1,6 @@
 import { Component, Inject } from '@angular/core';
 import { MatBottomSheetRef, MAT_BOTTOM_SHEET_DATA } from '@angular/material/bottom-sheet';
-import { DisplayMode } from 'src/app/responses';
+import { Display, DisplayMode } from 'src/app/responses';
-
 
 @Component({
     selector: 'openlp-display-mode-sheet',
@@ -9,14 +8,14 @@ import { DisplayMode } from 'src/app/responses';
     styleUrls: ['./display-mode-selector.component.scss']
   })
   export class DisplayModeSelectorComponent {
-    // Make DisplayMode enum visible to html code
+    // Make DisplayMode enum visible in HTML template.
     DisplayMode = DisplayMode;
 
-    constructor(private bottomSheetRef: MatBottomSheetRef<DisplayModeSelectorComponent>,
+    constructor(
-        @Inject(MAT_BOTTOM_SHEET_DATA) public displayMode: DisplayMode) {}
+      private bottomSheetRef: MatBottomSheetRef<DisplayModeSelectorComponent>,
+      @Inject(MAT_BOTTOM_SHEET_DATA) public display: Display) {}
 
     setMode(mode: DisplayMode): void {
       this.bottomSheetRef.dismiss(mode);
-      event.preventDefault();
     }
   }

src/app/components/settings/settings.component.html

@@ -10,7 +10,16 @@
                     [checked]="settings.fastSwitching"
                     (change)="setSetting('fastSwitching', $event.checked)"
                 >
-                    Enable Fast Switching panel
+                    Enable Fast Switching Panel
+                </mat-slide-toggle>
+            </div>
+            <div class="settings-item">
+                <mat-slide-toggle
+                    color="primary"
+                    [checked]="settings.bigDisplayButtons"
+                    (change)="setSetting('bigDisplayButtons', $event.checked)"
+                >
+                    Enable Big Display Buttons
                 </mat-slide-toggle>
             </div>
         </mat-card-content>

src/app/responses.ts

@@ -29,6 +29,11 @@ export class State {
   }
 }
 
+export class Display {
+  displayMode: DisplayMode;
+  bigDisplayButtons: boolean;
+}
+
 export enum DisplayMode {
   Blank,
   Theme,

src/app/settings.service.ts

@@ -5,6 +5,7 @@ export class SettingsProperties {
     fastSwitching = false;
     stageFontScale = 100;
     chordsFontScale = 100;
+    bigDisplayButtons = false;
 }
 
 export interface SettingsPropertiesItem<SP extends keyof SettingsProperties, SV = SettingsProperties[SP]> {