diff --git a/projects/common/element-components/audio.component.ts b/projects/common/element-components/audio.component.ts index 11bc080c1ef01d2989928735c38cd012dfd56fa3..93147b3a3783b74126a718b5322bc7102144124d 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 0a475b307f90384d7614e75081ab0c342e4e822a..89fc247b8ea294f7502aee641cb5b6fb92814c65 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 6fc737d6ada96669e2c616a98c71af9643ec4ec3..363b5fd2045f70b2ff27ba146f41d6f29bdf900a 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 8fc2c43c18981e24e443139d83c4f312938a0877..68b51dd8d4670fb3c342beba6da4438a21a0ddd6 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>