[player] Combine the events mediaPlay and mediaPause

projects/common/element-components/audio.component.ts

@@ -8,8 +8,8 @@ import { MediaPlayerElementComponent } from '../media-player-element-component.d
     <div [style.width.%]="100"
          [style.height.%]="100">
       <audio #player
-             (playing)="mediaPlay.emit(this.elementModel.id)"
-             (pause)="mediaPause.emit(this.elementModel.id)"
+             (playing)="mediaPlayStatusChanged.emit(this.elementModel.id)"
+             (pause)="mediaPlayStatusChanged.emit(null)"
              [style.width.%]="100"
              [src]="elementModel.src | safeResourceUrl">
       </audio>

projects/common/element-components/video.component.ts

@@ -13,6 +13,8 @@ import { MediaPlayerElementComponent } from '../media-player-element-component.d
              [src]="elementModel.src | safeResourceUrl">
       </video>
       <app-control-bar class="correct-position"
+                       (playing)="mediaPlayStatusChanged.emit(this.elementModel.id)"
+                       (pause)="mediaPlayStatusChanged.emit(null)"
                        [player]="player"
                        [elementModel]="elementModel"
                        (elementValueChanged)="elementValueChanged.emit($event)">

projects/common/media-player-element-component.directive.ts

@@ -5,8 +5,7 @@ import { ElementComponent } from './element-component.directive';
 @Directive()
 export abstract class MediaPlayerElementComponent extends ElementComponent {
   @Output() elementValueChanged = new EventEmitter<ValueChangeElement>();
-  @Output() mediaPlay = new EventEmitter<string>();
-  @Output() mediaPause = new EventEmitter<string>();
+  @Output() mediaPlayStatusChanged = new EventEmitter<string | null>();
 
   active: boolean = true;
 

projects/player/src/app/components/element-container/element-container.component.ts

@@ -102,19 +102,11 @@ export class ElementContainerComponent implements OnInit {
         });
     }
 
-    if (elementComponent.mediaPause) {
-      elementComponent.mediaPause
+    if (elementComponent.mediaPlayStatusChanged) {
+      elementComponent.mediaPlayStatusChanged
         .pipe(takeUntil(this.ngUnsubscribe))
-        .subscribe(() => {
-          this.mediaPlayerService.broadCastPlayChanges(null);
-        });
-    }
-
-    if (elementComponent.mediaPlay) {
-      elementComponent.mediaPlay
-        .pipe(takeUntil(this.ngUnsubscribe))
-        .subscribe((playId: string) => {
-          this.mediaPlayerService.broadCastPlayChanges(playId);
+        .subscribe((playStatus: string | null) => {
+          this.mediaPlayerService.broadCastPlayChanges(playStatus);
         });
     }