Skip to content

Commit

Permalink
hande mute and select buttons based on user role
Browse files Browse the repository at this point in the history
  • Loading branch information
@EnricoSchw
EnricoSchw committed Jan 18, 2024
1 parent 4203a01 commit 9b01425
Show file tree
Hide file tree
Showing 8 changed files with 53 additions and 32 deletions.
7 changes: 6 additions & 1 deletion projects/core/assets/scss/lobby.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -319,11 +319,16 @@ canvasOne {
position: relative;
}

.stream-video canvas {
.stream-video canvas,
.stream-video video
{
width: 100%;
height: 100%;
object-fit: cover;
}
.stream-video video {
background-color: transparent;
}

/*==================== Control elements ====================*/
.name-tag {
Expand Down
7 changes: 5 additions & 2 deletions projects/core/src/lib/component/guest-list/guest-list.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export class GuestListComponent implements OnInit {
@Output() activateLobbyMediaStreamEvent = new EventEmitter<LobbyMediaStream>();
@Output() deactivateLobbyMediaStreamEvent = new EventEmitter<LobbyMediaStream>();
@Input() localGuest$!: Observable<any>;
@Input() istHost: boolean = false;

@ViewChild(GuestListDirective, {static: true}) shigGuestList!: GuestListDirective;
public readonly cmpRefMap = new Map<string, ComponentRef<GuestComponent>>();
Expand Down Expand Up @@ -57,7 +58,7 @@ export class GuestListComponent implements OnInit {
ngOnInit() {
this.localGuest$.subscribe((local) => {
if (local !== undefined) {
this.upsertGuest(local);
this.upsertGuest(local, true);
}
});
}
Expand All @@ -66,13 +67,15 @@ export class GuestListComponent implements OnInit {
return this.cmpRefMap.has(guestId);
}

private upsertGuest(lobbyMediaStream: LobbyMediaStream): void {
private upsertGuest(lobbyMediaStream: LobbyMediaStream, isLocal: boolean = false): void {
if (this.hasGuest(lobbyMediaStream.streamId)) {
this.cmpRefMap.get(lobbyMediaStream.streamId)?.instance.updateGuest(lobbyMediaStream);
return;
}
const componentRef = this.shigGuestList.viewContainerRef.createComponent<GuestComponent>(GuestComponent);
componentRef.instance.media = lobbyMediaStream;
componentRef.instance.isLocal = isLocal
componentRef.instance.onHost = this.istHost;
componentRef.instance.activateGuestStreamCbk = (g: LobbyMediaStream) => this.activateLobbyMediaStreamEvent.emit(g);
componentRef.instance.deactivateGuestStreamCbk = (g: LobbyMediaStream) => this.deactivateLobbyMediaStreamEvent.emit(g);
this.cmpRefMap.set(lobbyMediaStream.streamId, componentRef);
Expand Down
6 changes: 3 additions & 3 deletions projects/core/src/lib/component/guest/guest.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="participant-action">
<button class="btn-mic-off"></button>
<button class="btn-camera-off"></button>
<md-switch id="switch-{{ media?.streamId}}" icons class="active-video"
<button class="btn-mic-off" *ngIf="onHost || isLocal"></button>
<button class="btn-camera-off" *ngIf="onHost || isLocal"></button>
<md-switch id="switch-{{ media?.streamId}}" icons class="active-video" *ngIf="onHost"
(click)="toggleActive()"></md-switch>
</div>
<a href="#" class="name-tag">{{ media?.name }}</a>
Expand Down
19 changes: 14 additions & 5 deletions projects/core/src/lib/component/guest/guest.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,17 +25,19 @@ export class GuestComponent implements AfterViewInit, OnDestroy {
@Input() activateGuestStreamCbk!: (g: LobbyMediaStream) => void;
@Input() deactivateGuestStreamCbk!: (g: LobbyMediaStream) => void;
@Input('media') media!: LobbyMediaStream;
@Input('onHost') onHost!: boolean;
@Input('isLocal') isLocal!: boolean;

ngAfterViewInit() {
if(this.media && this.media.stream) {
if (this.media && this.media.stream) {
this.getVideoElement().srcObject = this.media.stream;
}
}

public updateGuest(media: LobbyMediaStream): void {
const oldMedia = this.media;
this.media = media;
if(this.media.stream) {
if (this.media.stream) {
this.getVideoElement().srcObject = this.media.stream;
}
if (oldMedia.streamId !== this.media.streamId) {
Expand All @@ -46,14 +48,16 @@ export class GuestComponent implements AfterViewInit, OnDestroy {
}

ngOnDestroy(): void {
const isSelected = this.isSelected();
if (isSelected) {
this.deactivateGuestStreamCbk(this.media);
}
this.getVideoElement().srcObject = null;
this.media.stopStream();
}

toggleActive() {
const shadowRoot = document.getElementById(`switch-${this.media.streamId}`)?.shadowRoot;
const isSelected = !shadowRoot?.querySelector('div')?.classList.contains('selected');

const isSelected = this.isSelected();
if (isSelected) {
this.activateGuestStreamCbk(this.media);
} else {
Expand All @@ -64,5 +68,10 @@ export class GuestComponent implements AfterViewInit, OnDestroy {
private getVideoElement(): HTMLVideoElement {
return this.videoRef.nativeElement;
}

private isSelected(): boolean {
const shadowRoot = document.getElementById(`switch-${this.media.streamId}`)?.shadowRoot;
return !shadowRoot?.querySelector('div')?.classList.contains('selected');
}
}

6 changes: 3 additions & 3 deletions projects/core/src/lib/component/lobby/lobby.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,15 +65,14 @@
<!--// Video Stream -->
<div class="video-call-wrapper">
<div id="lobby-stream-video" class="stream-video canvas-logo">
<canvas id="canvasOne">
<canvas id="canvasOne" *ngIf="isHost">
Your browser does not support HTML5 Canvas.
</canvas>
<video id="video-stream" #videoStreamElement muted autoplay *ngIf="!isHost"></video>
</div>
<video id="video-stream" #videoStreamElement muted autoplay *ngIf="!isHost"></video>
</div>
</div>


<!-- Right Side -->
<div class="right-side">
<div class="guest-container">
Expand All @@ -82,6 +81,7 @@
</div>
<shig-guest-list
[localGuest$]="localGuest$"
[istHost]="isHost"
(activateLobbyMediaStreamEvent)="addLobbyMediaStream($event)"
(deactivateLobbyMediaStreamEvent)="removeLobbyMediaStream($event)"
></shig-guest-list>
Expand Down
2 changes: 1 addition & 1 deletion projects/core/src/lib/provider/lobby.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export class LobbyService {
if (event.type === 'add') {
let stream = event.stream;
if (stream !== undefined) {
console.log('###### Add track:stream', event.media.kind, event.media.trackId, stream?.id);
console.log('###### Add track:stream', event.media.kind, event.media.trackId, event.media.streamId);
this.add$.next({media: event.media, stream});
}
}
Expand Down
2 changes: 1 addition & 1 deletion projects/core/src/lib/provider/sdp-parser.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export class SdpParser {

private static readDescription(description: string | undefined): { purpose: LobbyMediaPurpose, info: string } {
let purpose: LobbyMediaPurpose = LobbyMediaPurpose.GUEST;
let info: string = '';
let info: string = 'Guest';
if (description !== undefined) {
purpose = getMediaStreamTypeByNumber(Number(description));
}
Expand Down
36 changes: 20 additions & 16 deletions projects/core/src/lib/provider/webrtc-connection.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,6 @@ export class WebrtcConnection extends EventEmitter<LobbyMediaEvent> {
.then(() => aw);
}


public close(): Promise<void> {
this.pc.ontrack = null;
this.pc.oniceconnectionstatechange = null;
Expand All @@ -91,7 +90,6 @@ export class WebrtcConnection extends EventEmitter<LobbyMediaEvent> {
private onReceiveChannelMessageCallback(me: MessageEvent<any>): void {
const msg = JSON.parse(new TextDecoder().decode(me.data as ArrayBuffer)) as ChannelMsg;
if (msg?.type === ChannelMsgType.OfferMsg) {

}
}

Expand All @@ -107,13 +105,11 @@ export class WebrtcConnection extends EventEmitter<LobbyMediaEvent> {
const track = ev.track;
const stream = ev.streams[0];
if (media !== undefined) {
media.streamId = stream.id;
media.trackId = track.id;
this.remoteMedia.set(media.mediaIndex, media);
this.emit({type: 'add', media, track, stream});
}
if (media === undefined) {
console.log('#### Misst!', ev.transceiver.mid, this.remoteMedia);
console.log('error! an transceiver without a media should not exits', ev.transceiver.mid, this.remoteMedia);
}
}

Expand All @@ -128,16 +124,24 @@ export class WebrtcConnection extends EventEmitter<LobbyMediaEvent> {
const mediaLines = SdpParser.getSdpMediaLine(sdp);
mediaLines.forEach((line) => {
const media = this.remoteMedia.get(line.mid);
if (!media) {
this.remoteMedia.set(line.mid, {
mediaIndex: line.mid,
purpose: line.purpose,
info: line.info,
kind: line.kind,
muted: true,
trackId: line.trackId,
streamId: line.streamId,
});
const updateMedia: LobbyMedia = {
mediaIndex: line.mid,
purpose: line.purpose,
info: line.info,
kind: line.kind,
muted: true,
trackId: line.trackId,
streamId: line.streamId,
}

if ((line.direction === 'inactive' || line.direction === 'recvonly') && !!media) {
updateMedia.trackId = media.trackId
updateMedia.streamId = media.streamId
this.remoteMedia.set(line.mid, updateMedia)
}

if (line.direction !== 'inactive' && line.direction !== 'recvonly') {
this.remoteMedia.set(line.mid, updateMedia)
}
});
}
Expand All @@ -147,8 +151,8 @@ export class WebrtcConnection extends EventEmitter<LobbyMediaEvent> {
mediaLines.forEach((line) => {
const media = this.remoteMedia.get(line.mid);
if ((line.direction === 'inactive' || line.direction === 'recvonly') && !!media) {
this.emit({type: 'remove', media});
this.remoteMedia.delete(line.mid);
this.emit({type: 'remove', media});
}
});
}
Expand Down

0 comments on commit 9b01425

Please sign in to comment.