openlp
/
web-remote
mirror of https://gitlab.com/openlp/web-remote.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Change display of buttons.

This commit is contained in:
Chris Witterholt 2024-04-08 14:32:29 +00:00
parent bdfd1c1ab1
commit dff8c49a81
11 changed files with 595 additions and 478 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
package.json
View File

@ -24,16 +24,16 @@
"supportedBrowsers": "(echo module.exports = && browserslist-useragent-regexp --allowHigherVersions) > src/assets/supportedBrowsers.js"
},
"dependencies": {
"@angular/animations": "^17.3.2",
"@angular/cdk": "^17.3.2",
"@angular/common": "^17.3.2",
"@angular/compiler": "^17.3.2",
"@angular/core": "^17.3.2",
"@angular/forms": "^17.3.2",
"@angular/material": "^17.3.2",
"@angular/platform-browser": "^17.3.2",
"@angular/platform-browser-dynamic": "^17.3.2",
"@angular/router": "^17.3.2",
"@angular/animations": "^17.3.3",
"@angular/cdk": "^17.3.3",
"@angular/common": "^17.3.3",
"@angular/compiler": "^17.3.3",
"@angular/core": "^17.3.3",
"@angular/forms": "^17.3.3",
"@angular/material": "^17.3.3",
"@angular/platform-browser": "^17.3.3",
"@angular/platform-browser-dynamic": "^17.3.3",
"@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/compiler-cli": "^17.3.2",
"@angular/language-service": "^17.3.2",
"@angular/cli": "~17.3.3",
"@angular/compiler-cli": "^17.3.3",
"@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",
"@typescript-eslint/eslint-plugin": "7.4.0",
"@typescript-eslint/parser": "7.4.0",
"@types/node": "~20.12.5",
"@typescript-eslint/eslint-plugin": "7.5.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
}

48
src/app/app.component.html
View File

@ -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>

2
src/app/app.component.scss
View File

@ -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;
}

10
src/app/app.component.ts
View File

@ -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();}

93
src/app/components/display-mode-selector/display-mode-selector.component.html
View File

@ -1,19 +1,84 @@
<mat-action-list>
<button mat-list-item (click)="setMode(DisplayMode.Blank)" class="display-button" [disabled]="displayMode === DisplayMode.Blank">
<mat-icon>videocam_off</mat-icon>
Show black
<mat-action-list *ngIf="!display.bigDisplayButtons">
<button mat-list-item
aria-labelledby="caption-blank"
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">
<mat-icon>wallpaper</mat-icon>
Show background
<button mat-list-item
aria-labelledby="caption-theme"
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">
<mat-icon>desktop_windows</mat-icon>
Show Desktop
<button mat-list-item
aria-labelledby="caption-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">
<mat-icon>videocam</mat-icon>
Show Presentation
<button mat-list-item
aria-labelledby="caption-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>

10
src/app/components/display-mode-selector/display-mode-selector.component.scss
View File

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

11
src/app/components/display-mode-selector/display-mode-selector.component.ts
View File

@ -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>,
@Inject(MAT_BOTTOM_SHEET_DATA) public displayMode: DisplayMode) {}
constructor(
private bottomSheetRef: MatBottomSheetRef<DisplayModeSelectorComponent>,
@Inject(MAT_BOTTOM_SHEET_DATA) public display: Display) {}
setMode(mode: DisplayMode): void {
this.bottomSheetRef.dismiss(mode);
event.preventDefault();
}
}

11
src/app/components/settings/settings.component.html
View File

@ -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>

5
src/app/responses.ts
View File

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

1
src/app/settings.service.ts
View File

@ -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]> {

842
yarn.lock
View File

File diff suppressed because it is too large Load Diff