Add minVolume, defaultVolume and muteControl to audios an videos

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

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>

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() {

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;

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;

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;

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:

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

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",