mirror of https://github.com/OpenVidu/openvidu.git
openvidu-testapp: toggle video zoom
parent
897404b54b
commit
57d92873da
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -14,7 +14,6 @@ import {
|
|||
LocalTrack,
|
||||
RemoteTrack,
|
||||
TrackEventCallbacks,
|
||||
LocalTrackPublication,
|
||||
RemoteTrackPublication,
|
||||
AudioTrack,
|
||||
VideoTrack,
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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>
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue