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.

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

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>

projects/common/element-components/control-bar/control-bar.component.ts

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

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>