openlp/web-remote
1
0
Fork 0
mirror of https://gitlab.com/openlp/web-remote.git synced 2024-12-22 03:22:48 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Change display of buttons.

See merge request openlp/web-remote!81
This commit is contained in:
Chris Witterholt 2024-04-08 14:32:29 +00:00
commit 4104033b4b
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