From 5d6c7533c2faf500ead7382ec1a8d4e79da43600 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Tue, 23 Nov 2021 16:24:41 +0100
Subject: [PATCH] Add minVolume, defaultVolume and muteControl to audios an
videos
---
docs/release-notes-player.txt | 3 +++
.../control-bar/control-bar.component.html | 6 ++++--
.../control-bar/control-bar.component.ts | 16 +++++++++-------
.../common/interfaces/UIElementInterfaces.ts | 3 +++
projects/common/models/audio-element.ts | 3 +++
projects/common/models/video-element.ts | 3 +++
.../common/util/unit-interface-initializer.ts | 3 +++
.../dialogs/player-edit-dialog.component.ts | 16 ++++++++++++++++
projects/editor/src/assets/i18n/de.json | 3 +++
9 files changed, 47 insertions(+), 9 deletions(-)
diff --git a/docs/release-notes-player.txt b/docs/release-notes-player.txt
index f6d549939..c55c0d15f 100644
--- a/docs/release-notes-player.txt
+++ b/docs/release-notes-player.txt
@@ -7,6 +7,9 @@ Player
- Fix problem with truncated text in text components when using large font sizes
- Hide audio and video control bar when no control is marked for display
- Add the floating variant of the virtual keyboard for numbers and numbers + operators
+ - Hide mute control if wanted
+ - Use minimum volume value (value between 0 and 1)
+ - Use default volume value (value between 0 and 1)
1.5.0
- Show the magnifier only when the mouse is over the image
diff --git a/projects/common/element-components/control-bar/control-bar.component.html b/projects/common/element-components/control-bar/control-bar.component.html
index d4e076af0..b6c4a786c 100644
--- a/projects/common/element-components/control-bar/control-bar.component.html
+++ b/projects/common/element-components/control-bar/control-bar.component.html
@@ -57,7 +57,7 @@
-{{currentRestTime | playerTimeFormat}}
</div>
</ng-container>
- <ng-container *ngIf="elementModel.volumeControl">
+ <ng-container *ngIf="elementModel.muteControl">
<button mat-button
type="button"
class="control-button enabled-control"
@@ -65,10 +65,12 @@
<mat-icon *ngIf="!player.muted">volume_up</mat-icon>
<mat-icon *ngIf="player.muted">volume_off</mat-icon>
</button>
+ </ng-container>
+ <ng-container *ngIf="elementModel.volumeControl">
<mat-slider class="volume"
min="0"
step="0.01"
- [max]="1"
+ max="1"
[value]="player.volume"
(input)="onVolumeChange($event)">
</mat-slider>
diff --git a/projects/common/element-components/control-bar/control-bar.component.ts b/projects/common/element-components/control-bar/control-bar.component.ts
index 8971a1ffa..510f87f98 100644
--- a/projects/common/element-components/control-bar/control-bar.component.ts
+++ b/projects/common/element-components/control-bar/control-bar.component.ts
@@ -69,7 +69,7 @@ export class ControlBarComponent implements OnInit, OnChanges, OnDestroy {
this.player.onvolumechange = () => {
this.player.muted = !this.player.volume;
};
- this.player.volume = 0.8;
+ this.player.volume = this.elementModel.defaultVolume;
this.lastVolume = this.player.volume;
}
@@ -93,7 +93,8 @@ export class ControlBarComponent implements OnInit, OnChanges, OnDestroy {
}
onVolumeChange(event: MatSliderChange): void {
- this.player.volume = event.value ? event.value : 0;
+ event.source.value = event.value && event.value > this.elementModel.minVolume ?
+ event.value : this.elementModel.minVolume;
}
toggleTime(): void {
@@ -101,9 +102,9 @@ export class ControlBarComponent implements OnInit, OnChanges, OnDestroy {
}
toggleVolume(): void {
- if (this.player.volume) {
+ if (this.player.volume > this.elementModel.minVolume) {
this.lastVolume = this.player.volume;
- this.player.volume = 0;
+ this.player.volume = this.elementModel.minVolume;
} else {
this.player.volume = this.lastVolume;
}
@@ -143,9 +144,10 @@ export class ControlBarComponent implements OnInit, OnChanges, OnDestroy {
}
private _play(): void {
- this.player.play().then(() => {},
- // eslint-disable-next-line no-console
- () => console.error('player: cannot play this media file'));
+ this.player.play().then(() => {
+ },
+ // eslint-disable-next-line no-console
+ () => console.error('player: cannot play this media file'));
}
private sendPlaybackTimeChanged() {
diff --git a/projects/common/interfaces/UIElementInterfaces.ts b/projects/common/interfaces/UIElementInterfaces.ts
index aee4e675d..5f7c42a7f 100644
--- a/projects/common/interfaces/UIElementInterfaces.ts
+++ b/projects/common/interfaces/UIElementInterfaces.ts
@@ -23,6 +23,9 @@ export interface PlayerElement {
progressBar: boolean;
interactiveProgressbar: boolean;
volumeControl: boolean;
+ defaultVolume: number;
+ minVolume: number;
+ muteControl: boolean;
hintLabel: string;
hintLabelDelay: number;
uninterruptible: boolean;
diff --git a/projects/common/models/audio-element.ts b/projects/common/models/audio-element.ts
index 70bc57d96..9bfab2aa2 100644
--- a/projects/common/models/audio-element.ts
+++ b/projects/common/models/audio-element.ts
@@ -13,6 +13,9 @@ export class AudioElement extends UIElement implements PlayerElement {
progressBar: boolean = true;
interactiveProgressbar: boolean = false;
volumeControl: boolean = true;
+ defaultVolume: number = 0.8;
+ minVolume: number = 0;
+ muteControl: boolean = true;
hintLabel: string = '';
hintLabelDelay: number = 0;
uninterruptible: boolean = false;
diff --git a/projects/common/models/video-element.ts b/projects/common/models/video-element.ts
index f96047378..987fea472 100644
--- a/projects/common/models/video-element.ts
+++ b/projects/common/models/video-element.ts
@@ -13,6 +13,9 @@ export class VideoElement extends UIElement implements PlayerElement {
progressBar: boolean = true;
interactiveProgressbar: boolean = false;
volumeControl: boolean = true;
+ defaultVolume: number = 0.8;
+ minVolume: number = 0;
+ muteControl: boolean = true;
hintLabel: string = '';
hintLabelDelay: number = 0;
uninterruptible: boolean = false;
diff --git a/projects/common/util/unit-interface-initializer.ts b/projects/common/util/unit-interface-initializer.ts
index c2850463c..4b5d5ca7e 100644
--- a/projects/common/util/unit-interface-initializer.ts
+++ b/projects/common/util/unit-interface-initializer.ts
@@ -28,6 +28,9 @@ export function initPlayerElement(serializedElement: UIElement): PlayerElement {
interactiveProgressbar: serializedElement.interactiveProgressbar !== undefined ?
serializedElement.interactiveProgressbar as boolean : false,
volumeControl: serializedElement.volumeControl !== undefined ? serializedElement.volumeControl as boolean : true,
+ defaultVolume: serializedElement.defaultVolume !== undefined ? serializedElement.defaultVolume as number : 0.8,
+ minVolume: serializedElement.minVolume !== undefined ? serializedElement.minVolume as number : 0,
+ muteControl: serializedElement.muteControl !== undefined ? serializedElement.muteControl as boolean : true,
hintLabel: serializedElement.hintLabel as string || '',
hintLabelDelay: serializedElement.hintLabelDelay !== undefined ? serializedElement.hintLabelDelay as number : 0,
uninterruptible:
diff --git a/projects/editor/src/app/components/dialogs/player-edit-dialog.component.ts b/projects/editor/src/app/components/dialogs/player-edit-dialog.component.ts
index a79fc6859..c74ea895a 100644
--- a/projects/editor/src/app/components/dialogs/player-edit-dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/player-edit-dialog.component.ts
@@ -29,6 +29,22 @@ import { PlayerElement } from '../../../../../common/interfaces/UIElementInterfa
(change)="newPlayerConfig.volumeControl = $event.checked">
{{ 'player.volumeControl' | translate }}
</mat-checkbox>
+ <mat-form-field appearance="fill">
+ <mat-label>{{ 'player.defaultVolume' | translate }}</mat-label>
+ <input matInput type="number" min="0" max="1" step="0.1"
+ [ngModel]="newPlayerConfig.defaultVolume || data.player.defaultVolume"
+ (ngModelChange)="newPlayerConfig.defaultVolume = $event">
+ </mat-form-field>
+ <mat-form-field appearance="fill">
+ <mat-label>{{ 'player.minVolume' | translate }}</mat-label>
+ <input matInput type="number" min="0" max="1" step="0.1"
+ [ngModel]="newPlayerConfig.minVolume || data.player.minVolume"
+ (ngModelChange)="newPlayerConfig.minVolume = $event">
+ </mat-form-field>
+ <mat-checkbox [checked]="newPlayerConfig.muteControl || data.player.muteControl"
+ (change)="newPlayerConfig.muteControl = $event.checked">
+ {{ 'player.muteControl' | translate }}
+ </mat-checkbox>
<mat-checkbox [checked]="newPlayerConfig.showRestTime || data.player.showRestTime"
(change)="newPlayerConfig.showRestTime = $event.checked">
{{ 'player.showRestTime' | translate }}
diff --git a/projects/editor/src/assets/i18n/de.json b/projects/editor/src/assets/i18n/de.json
index 237c76f48..408f8486d 100644
--- a/projects/editor/src/assets/i18n/de.json
+++ b/projects/editor/src/assets/i18n/de.json
@@ -129,6 +129,9 @@
"progressBar": "Fortschrittsbalken",
"interactiveProgressbar": "Fortschrittsbalken (steuerbar)",
"volumeControl": "Lautstärkeregelung",
+ "muteControl": "Stummschaltung",
+ "minVolume": "Minimale Lautstärke",
+ "defaultVolume": "Voreingestellte Lautstärke",
"uninterruptible": "Unterbrechen verbieten",
"hideOtherPages": "Weitere Seiten verbergen",
"showRestTime": "Verbleibende Zeit anzeigen",
--
GitLab