openvidu-testapp: refactor TrackComponent

openvidu-testapp/src/app/components/audio-track/audio-track.component.html

@@ -1,5 +1,5 @@
 <div class="parent-div">
-    <audio #audioElement [id]="elementRefId" [ngClass]="getTrackOrigin()"></audio>
+    <audio #mediaElement [id]="finalElementRefId" [ngClass]="getTrackOrigin()"></audio>
     <span>{{trackPublication.source}}</span>
     <div class="bottom-div">
         <button *ngIf="localParticipant" (click)="muteUnmuteAudio()" class="audio-btn" matTooltip="Mute/Unmute audio"

openvidu-testapp/src/app/components/audio-track/audio-track.component.ts

@@ -1,60 +1,22 @@
-import { Component, ElementRef, Input, ViewChild } from '@angular/core';
-import { LocalTrack, AudioTrack, AudioCaptureOptions } from 'livekit-client';
+import { Component } from '@angular/core';
+import { LocalTrack } from 'livekit-client';
 import { TrackComponent } from '../track/track.component';
 
 @Component({
   selector: 'app-audio-track',
   templateUrl: './audio-track.component.html',
-  styleUrls: ['./audio-track.component.css']
+  styleUrls: ['./audio-track.component.css'],
 })
 export class AudioTrackComponent extends TrackComponent {
-
-  @ViewChild('audioElement') elementRef: ElementRef;
-  elementRefId: string = '';
-
   muteAudioIcon: string = 'mic';
 
-  private _audioTrack: AudioTrack | undefined;
-
-  private audioCaptureOptions: AudioCaptureOptions;
-
-  @Input() set audioTrack(audioTrack: AudioTrack | undefined) {
-    this._audioTrack = audioTrack;
-    this.track = this._audioTrack;
-
-    this.setupTrackEventListeners();
-
-    let id = '';
-    id = `${this.getTrackOrigin()}--audio--${this._audioTrack?.source}--${this._audioTrack?.sid}`;
-    if (this._audioTrack?.sid !== this._audioTrack?.mediaStreamID) {
-      id += `--${this._audioTrack?.mediaStreamID}`;
-    }
-    id = id.replace(/[^0-9a-z-A-Z_-]+/g, '');
-    this.elementRefId = id;
-
-    if (this.elementRef && !this.localParticipant) {
-      this._audioTrack?.attach(this.elementRef.nativeElement);
-    }
-  }
-
-  ngAfterViewInit() {
-    if (!this.localParticipant) {
-      this._audioTrack?.attach(this.elementRef.nativeElement);
-    }
-  }
-
-  ngOnDestroy() {
-    this._audioTrack?.detach(this.elementRef.nativeElement);
-  }
-
   async muteUnmuteAudio() {
-    if (this._audioTrack?.isMuted) {
+    if (this._track?.isMuted) {
       this.muteAudioIcon = 'mic';
-      await (this._audioTrack as LocalTrack).unmute();
+      await (this._track as LocalTrack).unmute();
     } else {
       this.muteAudioIcon = 'mic_off';
-      await (this._audioTrack as LocalTrack).mute();
+      await (this._track as LocalTrack).mute();
     }
   }
-
 }

openvidu-testapp/src/app/components/participant/participant.component.html

@@ -51,13 +51,11 @@
         </div>
         <div class="audio-tracks-container">
             <app-audio-track *ngFor="let trackPublication of participant.audioTrackPublications| keyvalue"
-                [trackPublication]="trackPublication.value" [audioTrack]="trackPublication.value.audioTrack"
-                [localParticipant]="localParticipant" [index]="index"
-                (newTrackEvent)="events.push($event)"></app-audio-track>
+                [index]="index" [trackPublication]="trackPublication.value" [track]="trackPublication.value.audioTrack"
+                [localParticipant]="localParticipant" (newTrackEvent)="events.push($event)"></app-audio-track>
         </div>
-        <app-video-track *ngFor="let trackPublication of participant.videoTrackPublications | keyvalue ; index as i"
-            [trackPublication]="trackPublication.value" [videoTrack]="trackPublication.value.videoTrack"
-            [localParticipant]="localParticipant" [index]="index"
-            (newTrackEvent)="events.push($event)" [attr.id]="'user-' + index + '-' + participant.identity + '-video-' + i"></app-video-track>
+        <app-video-track *ngFor="let trackPublication of participant.videoTrackPublications | keyvalue"
+            [index]="index" [trackPublication]="trackPublication.value" [track]="trackPublication.value.videoTrack"
+            [localParticipant]="localParticipant" (newTrackEvent)="events.push($event)"></app-video-track>
     </div>
 </div>

openvidu-testapp/src/app/components/track/track.component.ts

@@ -1,4 +1,11 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core';
 import {
   TrackPublication,
   LocalParticipant,
@@ -9,6 +16,8 @@ import {
   TrackEventCallbacks,
   LocalTrackPublication,
   RemoteTrackPublication,
+  AudioTrack,
+  VideoTrack,
 } from 'livekit-client';
 import {
   TestAppEvent,
@@ -35,18 +44,62 @@ export class TrackComponent {
   @Input()
   localParticipant: LocalParticipant | undefined;
 
-  @Input()
-  index: number;
+  protected finalElementRefId: string = '';
+  private indexId: string;
+  private trackId: string;
 
-  protected track: Track | undefined;
+  protected _track: Track | undefined;
+  @ViewChild('mediaElement') protected elementRef: ElementRef;
 
   trackSubscribed: boolean = true;
   trackEnabled: boolean = true;
 
   constructor(protected testFeedService: TestFeedService) {}
 
+  @Input() set index(index: number) {
+    this.indexId = index.toString();
+    this.finalElementRefId = `participant-${this.indexId}-${this.trackId}`;
+  }
+
+  @Input() set track(track: AudioTrack | VideoTrack | undefined) {
+    this._track = track;
+
+    this.setupTrackEventListeners();
+
+    this.trackId = `-${this.getTrackOrigin()}--${this._track?.kind}--${
+      this._track?.source
+    }--${this._track?.sid}`;
+    if (this._track?.sid !== this._track?.mediaStreamID) {
+      this.trackId += `--${this._track?.mediaStreamID}`;
+    }
+    this.trackId = this.trackId.replace(/[^0-9a-z-A-Z_-]+/g, '');
+    this.finalElementRefId = `participant-${this.indexId}-${this.trackId}`;
+
+    this.attachTrack();
+  }
+
+  ngAfterViewInit() {
+    this.attachTrack();
+  }
+
+  ngOnDestroy() {
+    if (this.elementRef) {
+      this._track?.detach(this.elementRef.nativeElement);
+    }
+  }
+
+  private attachTrack() {
+    if (
+      this.elementRef &&
+      (this._track?.kind === Track.Kind.Video ||
+        (this._track?.kind === Track.Kind.Audio && !this.localParticipant))
+    ) {
+      this._track.attach(this.elementRef.nativeElement);
+    }
+  }
+
   protected async unpublishTrack() {
-    await this.localParticipant?.unpublishTrack(this.track as LocalTrack);
+    await this.localParticipant?.unpublishTrack(this._track as LocalTrack);
   }
 
   protected async toggleSubscribeTrack() {
@@ -68,69 +121,69 @@ export class TrackComponent {
     let callbacks: TrackEventCallbacks;
     let events: TrackEvent;
 
-    this.track
+    this._track
       ?.on(TrackEvent.Message, () => {
         this.newTrackEvent.emit({
           eventType: TrackEvent.Message,
           eventCategory: 'TrackEvent',
           eventContent: {},
-          eventDescription: this.track!.source,
+          eventDescription: this._track!.source,
         });
       })
       .on(TrackEvent.Muted, () => {
         this.newTrackEvent.emit({
           eventType: TrackEvent.Muted,
           eventCategory: 'TrackEvent',
           eventContent: {},
-          eventDescription: this.track!.source,
+          eventDescription: this._track!.source,
         });
       })
       .on(TrackEvent.Unmuted, () => {
         this.newTrackEvent.emit({
           eventType: TrackEvent.Unmuted,
           eventCategory: 'TrackEvent',
           eventContent: {},
-          eventDescription: this.track!.source,
+          eventDescription: this._track!.source,
         });
       })
       .on(TrackEvent.AudioSilenceDetected, () => {
         this.newTrackEvent.emit({
           eventType: TrackEvent.AudioSilenceDetected,
           eventCategory: 'TrackEvent',
           eventContent: {},
-          eventDescription: this.track!.source,
+          eventDescription: this._track!.source,
         });
       })
       .on(TrackEvent.Restarted, () => {
         this.newTrackEvent.emit({
           eventType: TrackEvent.Restarted,
           eventCategory: 'TrackEvent',
           eventContent: {},
-          eventDescription: this.track!.source,
+          eventDescription: this._track!.source,
         });
       })
       .on(TrackEvent.Ended, () => {
         this.newTrackEvent.emit({
           eventType: TrackEvent.Ended,
           eventCategory: 'TrackEvent',
           eventContent: {},
-          eventDescription: this.track!.source,
+          eventDescription: this._track!.source,
         });
       })
       .on(TrackEvent.VisibilityChanged, (visible: boolean) => {
         this.newTrackEvent.emit({
           eventType: TrackEvent.VisibilityChanged,
           eventCategory: 'TrackEvent',
-          eventContent: { visible, track: this.track },
-          eventDescription: `${this.track!.source} is visible: ${visible}`,
+          eventContent: { visible, track: this._track },
+          eventDescription: `${this._track!.source} is visible: ${visible}`,
         });
       })
       .on(TrackEvent.VideoDimensionsChanged, (dimensions: Track.Dimensions) => {
         this.newTrackEvent.emit({
           eventType: TrackEvent.VideoDimensionsChanged,
           eventCategory: 'TrackEvent',
-          eventContent: { dimensions, track: this.track },
-          eventDescription: `${this.track?.source} ${JSON.stringify(
+          eventContent: { dimensions, track: this._track },
+          eventDescription: `${this._track?.source} ${JSON.stringify(
             dimensions
           )}`,
         });
@@ -140,24 +193,24 @@ export class TrackComponent {
           eventType: TrackEvent.UpstreamPaused,
           eventCategory: 'TrackEvent',
           eventContent: {},
-          eventDescription: this.track!.source,
+          eventDescription: this._track!.source,
         });
       })
       .on(TrackEvent.UpstreamResumed, () => {
         this.newTrackEvent.emit({
           eventType: TrackEvent.UpstreamResumed,
           eventCategory: 'TrackEvent',
           eventContent: {},
-          eventDescription: this.track!.source,
+          eventDescription: this._track!.source,
         });
       });
   }
 
   protected getTrackOrigin(): string {
     let origin: string;
-    if (this.track instanceof RemoteTrack) {
+    if (this._track instanceof RemoteTrack) {
       origin = 'remote';
-    } else if (this.track instanceof LocalTrack) {
+    } else if (this._track instanceof LocalTrack) {
       origin = 'local';
     } else {
       origin = 'unknown';

openvidu-testapp/src/app/components/users-table/table-video.component.ts

@@ -10,7 +10,7 @@ import { AudioTrack, VideoTrack } from 'livekit-client';
 @Component({
   selector: 'app-table-video',
   template: `
-    <video #videoElement [id]="videoId" autoplay playsinline></video>
+    <video #mediaElement [id]="videoId" autoplay playsinline></video>
   `,
   styles: [
     `
@@ -21,7 +21,7 @@ import { AudioTrack, VideoTrack } from 'livekit-client';
   ],
 })
 export class TableVideoComponent implements AfterViewInit {
-  @ViewChild('videoElement') elementRef: ElementRef;
+  @ViewChild('mediaElement') elementRef: ElementRef;
 
   @Input() videoId: string;
 

openvidu-testapp/src/app/components/video-track/video-track.component.html

@@ -1,5 +1,5 @@
 <div class="parent-div">
-    <video #videoElement [id]="elementRefId" [ngClass]="getTrackOrigin()"></video>
+    <video #mediaElement [id]="finalElementRefId" [ngClass]="getTrackOrigin()"></video>
     <div class="bottom-div">
         <button *ngIf="localParticipant" (click)="muteUnmuteVideo()" class="video-btn mute-unmute-video" matTooltip="Mute/Unmute video"
             matTooltipClass="custom-tooltip">