openvidu-testapp: toggle video zoom

OpenVidu · Oct 24, 2024 · 57d9287 · 57d9287
1 parent 897404b
commit 57d9287
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 5 deletions.
diff --git a/openvidu-testapp/src/app/components/dialogs/room-api-dialog/room-api-dialog.component.ts b/openvidu-testapp/src/app/components/dialogs/room-api-dialog/room-api-dialog.component.ts
@@ -72,10 +72,10 @@ export class RoomApiDialogComponent {
         this.localParticipant = data.localParticipant;
         this.apiRoomName = this.room?.name;
         this.apiParticipantIdentity = this.localParticipant?.identity;
-        this.apiTrackSid = this.localParticipant?.videoTrackPublications.values().next().value?.trackSid;
+        this.apiTrackSid = this.localParticipant?.videoTrackPublications.values().next().value?.trackSid!;
         this.egressRoomName = this.room?.name;
-        this.audioTrackId = this.localParticipant?.audioTrackPublications.values().next().value?.trackSid;
-        this.videoTrackId = this.localParticipant?.videoTrackPublications.values().next().value?.trackSid;
+        this.audioTrackId = this.localParticipant?.audioTrackPublications.values().next().value?.trackSid!;
+        this.videoTrackId = this.localParticipant?.videoTrackPublications.values().next().value?.trackSid!;
         this.ingressRoomName = this.room?.name;
     }
 

diff --git a/openvidu-testapp/src/app/components/track/track.component.ts b/openvidu-testapp/src/app/components/track/track.component.ts
@@ -14,7 +14,6 @@ import {
   LocalTrack,
   RemoteTrack,
   TrackEventCallbacks,
-  LocalTrackPublication,
   RemoteTrackPublication,
   AudioTrack,
   VideoTrack,

diff --git a/openvidu-testapp/src/app/components/video-track/video-track.component.css b/openvidu-testapp/src/app/components/video-track/video-track.component.css
@@ -1,5 +1,4 @@
 video {
-  height: 90px;
   width: 120px;
 }
 
@@ -18,6 +17,12 @@ video {
   bottom: 0;
 }
 
+.top-right-div {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
 .video-btn {
   border: none;
   background: rgba(255, 255, 255, 0.75);

diff --git a/openvidu-testapp/src/app/components/video-track/video-track.component.html b/openvidu-testapp/src/app/components/video-track/video-track.component.html
@@ -36,4 +36,11 @@
                 aria-hidden="true">{{blurIcon}}</mat-icon>
         </button>-->
     </div>
+    <div class="top-right-div">
+        <button *ngIf="!localParticipant" (click)="toggleVideoZoom()" class="video-btn toggle-video-zoom" matTooltip="Toggle video zoom"
+            matTooltipClass="custom-tooltip">
+            <mat-icon aria-label="Toggle video zoom" class="mat-icon material-icons" role="img"
+                aria-hidden="true">{{videoZoom ? 'zoom_out' : 'zoom_in'}}</mat-icon>
+        </button>
+    </div>
 </div>
diff --git a/openvidu-testapp/src/app/components/video-track/video-track.component.ts b/openvidu-testapp/src/app/components/video-track/video-track.component.ts
@@ -20,6 +20,8 @@ export class VideoTrackComponent extends TrackComponent {
   blurIcon: string = 'blur_on';
   maxVideoQuality: string;
 
+  videoZoom = false;
+
   constructor(
     protected override testFeedService: TestFeedService,
     private dialog: MatDialog
@@ -96,4 +98,10 @@ export class VideoTrackComponent extends TrackComponent {
       this.blurIcon = 'blur_on';
     }
   }
+
+  toggleVideoZoom() {
+    this.videoZoom = !this.videoZoom;
+    let newWidth = this.videoZoom ? '720px' : '120px';
+    this.elementRef.nativeElement.style.width = newWidth;
+  }
 }