ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-testapp: toggle video zoom

dependabot/npm_and_yarn/openvidu-testapp/elliptic-6.6.0
pabloFuente 2024-10-24 11:36:52 +02:00
parent 897404b54b
commit 57d92873da
5 changed files with 24 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
openvidu-testapp/src/app/components/dialogs/room-api-dialog/room-api-dialog.component.ts
View File

@ -72,10 +72,10 @@ export class RoomApiDialogComponent {
this.localParticipant = data.localParticipant; this.localParticipant = data.localParticipant;
this.apiRoomName = this.room?.name; this.apiRoomName = this.room?.name;
this.apiParticipantIdentity = this.localParticipant?.identity; 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.egressRoomName = this.room?.name;
this.audioTrackId = this.localParticipant?.audioTrackPublications.values().next().value?.trackSid; this.audioTrackId = this.localParticipant?.audioTrackPublications.values().next().value?.trackSid!;
this.videoTrackId = this.localParticipant?.videoTrackPublications.values().next().value?.trackSid; this.videoTrackId = this.localParticipant?.videoTrackPublications.values().next().value?.trackSid!;
this.ingressRoomName = this.room?.name; this.ingressRoomName = this.room?.name;
} }

1
openvidu-testapp/src/app/components/track/track.component.ts
View File

@ -14,7 +14,6 @@ import {
LocalTrack, LocalTrack,
RemoteTrack, RemoteTrack,
TrackEventCallbacks, TrackEventCallbacks,
LocalTrackPublication,
RemoteTrackPublication, RemoteTrackPublication,
AudioTrack, AudioTrack,
VideoTrack, VideoTrack,

7
openvidu-testapp/src/app/components/video-track/video-track.component.css
View File

@ -1,5 +1,4 @@
video { video {
height: 90px;
width: 120px; width: 120px;
} }
@ -18,6 +17,12 @@ video {
bottom: 0; bottom: 0;
} }
.top-right-div {
position: absolute;
top: 0;
right: 0;
}
.video-btn { .video-btn {
border: none; border: none;
background: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.75);

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

@ -36,4 +36,11 @@
aria-hidden="true">{{blurIcon}}</mat-icon> aria-hidden="true">{{blurIcon}}</mat-icon>
</button>--> </button>-->
</div> </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> </div>

8
openvidu-testapp/src/app/components/video-track/video-track.component.ts
View File

@ -20,6 +20,8 @@ export class VideoTrackComponent extends TrackComponent {
blurIcon: string = 'blur_on'; blurIcon: string = 'blur_on';
maxVideoQuality: string; maxVideoQuality: string;
videoZoom = false;
constructor( constructor(
protected override testFeedService: TestFeedService, protected override testFeedService: TestFeedService,
private dialog: MatDialog private dialog: MatDialog
@ -96,4 +98,10 @@ export class VideoTrackComponent extends TrackComponent {
this.blurIcon = 'blur_on'; this.blurIcon = 'blur_on';
} }
} }
toggleVideoZoom() {
this.videoZoom = !this.videoZoom;
let newWidth = this.videoZoom ? '720px' : '120px';
this.elementRef.nativeElement.style.width = newWidth;
}
} }