From d7078133b216fd79b69c3a51a3f4229f154f3bec Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Fri, 12 Nov 2021 13:12:56 +0100
Subject: [PATCH] Use the project property of ElementComponent in
ControlBarComponent
In ControlBarComponent the property project replaces the property
isAspectPlayer. It ensures that delays are used only in the player
and hints are always visible in the editor.
---
.../common/element-components/audio.component.ts | 1 +
.../control-bar/control-bar.component.html | 2 +-
.../control-bar/control-bar.component.ts | 12 +++++-------
.../common/element-components/video.component.ts | 1 +
4 files changed, 8 insertions(+), 8 deletions(-)
diff --git a/projects/common/element-components/audio.component.ts b/projects/common/element-components/audio.component.ts
index 11bc080c1..93147b3a3 100644
--- a/projects/common/element-components/audio.component.ts
+++ b/projects/common/element-components/audio.component.ts
@@ -14,6 +14,7 @@ import { MediaPlayerElementComponent } from '../media-player-element-component.d
[src]="elementModel.src | safeResourceUrl">
</audio>
<app-control-bar [player]="player"
+ [project]="project"
[elementModel]="elementModel"
[active]="active"
(elementValueChanged)="elementValueChanged.emit($event)">
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 0a475b307..89fc247b8 100644
--- a/projects/common/element-components/control-bar/control-bar.component.html
+++ b/projects/common/element-components/control-bar/control-bar.component.html
@@ -65,7 +65,7 @@
</mat-slider>
</ng-container>
</div>
-<div *ngIf="showHint || !isAspectPlayer"
+<div *ngIf="showHint || project === 'editor'"
class="status-bar mat-typography">
{{elementModel.hintLabel}}
</div>
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 6fc737d6a..363b5fd20 100644
--- a/projects/common/element-components/control-bar/control-bar.component.ts
+++ b/projects/common/element-components/control-bar/control-bar.component.ts
@@ -1,5 +1,5 @@
import {
- OnInit, AfterContentInit, OnDestroy, Component, EventEmitter, Input, Output
+ OnInit, OnChanges, SimpleChanges, OnDestroy, Component, EventEmitter, Input, Output
} from '@angular/core';
import { MatSliderChange } from '@angular/material/slider';
import { AudioElement } from '../../models/audio-element';
@@ -11,9 +11,10 @@ import { ValueChangeElement } from '../../models/uI-element';
templateUrl: './control-bar.component.html',
styleUrls: ['./control-bar.component.css']
})
-export class ControlBarComponent implements OnInit, AfterContentInit, OnDestroy {
+export class ControlBarComponent implements OnInit, OnChanges, OnDestroy {
@Input() player!: HTMLVideoElement | HTMLAudioElement;
@Input() elementModel!: AudioElement | VideoElement;
+ @Input() project!: 'player' | 'editor';
@Input() active!: boolean;
@Output() elementValueChanged = new EventEmitter<ValueChangeElement>();
duration!: number;
@@ -27,7 +28,6 @@ export class ControlBarComponent implements OnInit, AfterContentInit, OnDestroy
restTimeMode: boolean = true;
showHint!: boolean;
disabled!: boolean;
- isAspectPlayer!: boolean;
playbackTime!: number;
// TODO:
@@ -68,10 +68,8 @@ export class ControlBarComponent implements OnInit, AfterContentInit, OnDestroy
this.lastVolume = this.player.volume;
}
- ngAfterContentInit(): void {
- // player-aspect should work, but doesn't in production
- this.isAspectPlayer = !!this.player.closest('app-element-container');
- if (this.isAspectPlayer) {
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes.project && changes.project.currentValue === 'player') {
this.initAutostart();
this.initHint();
}
diff --git a/projects/common/element-components/video.component.ts b/projects/common/element-components/video.component.ts
index 8fc2c43c1..68b51dd8d 100644
--- a/projects/common/element-components/video.component.ts
+++ b/projects/common/element-components/video.component.ts
@@ -16,6 +16,7 @@ import { MediaPlayerElementComponent } from '../media-player-element-component.d
(playing)="onMediaPlayStatusChanged.emit(this.elementModel.id)"
(pause)="onMediaPlayStatusChanged.emit(null)"
[player]="player"
+ [project]="project"
[elementModel]="elementModel"
(elementValueChanged)="elementValueChanged.emit($event)">
</app-control-bar>
--
GitLab