From cad2aa760d73556d862429e87492fdc23fd79593 Mon Sep 17 00:00:00 2001 From: Bruno Windels <274386+bwindels@users.noreply.github.com> Date: Mon, 21 Mar 2022 16:30:13 +0100 Subject: [PATCH] some fixes --- src/domain/session/room/CallViewModel.ts | 20 ++++++++++++++++---- src/domain/session/room/RoomViewModel.js | 8 +++++--- src/matrix/calls/CallHandler.ts | 1 + src/matrix/calls/LocalMedia.ts | 8 +++++++- src/matrix/room/Room.js | 15 ++++++--------- src/platform/web/ui/session/room/CallView.ts | 10 +++++++--- src/platform/web/ui/session/room/RoomView.js | 4 +--- 7 files changed, 43 insertions(+), 23 deletions(-) diff --git a/src/domain/session/room/CallViewModel.ts b/src/domain/session/room/CallViewModel.ts index 0c5f28d2..95d9b188 100644 --- a/src/domain/session/room/CallViewModel.ts +++ b/src/domain/session/room/CallViewModel.ts @@ -30,24 +30,36 @@ export class CallViewModel extends ViewModel { super(options); this.memberViewModels = this.getOption("call").members .mapValues(member => new CallMemberViewModel(this.childOptions({member}))) - .sortValues((a, b) => { - - }); + .sortValues((a, b) => a.compare(b)); } get name(): string { return this.getOption("call").name; } + get id(): string { + return this.getOption("call").id; + } + get localTracks(): Track[] { + console.log("localTracks", this.getOption("call").localMedia); return this.getOption("call").localMedia?.tracks ?? []; } } type MemberOptions = BaseOptions & {member: Member}; -class CallMemberViewModel extends ViewModel { +export class CallMemberViewModel extends ViewModel { get tracks(): Track[] { return this.getOption("member").remoteTracks; } + + compare(other: CallMemberViewModel): number { + const myUserId = this.getOption("member").member.userId; + const otherUserId = other.getOption("member").member.userId; + if(myUserId === otherUserId) { + return 0; + } + return myUserId < otherUserId ? -1 : 1; + } } diff --git a/src/domain/session/room/RoomViewModel.js b/src/domain/session/room/RoomViewModel.js index f79be3c0..1d4bca42 100644 --- a/src/domain/session/room/RoomViewModel.js +++ b/src/domain/session/room/RoomViewModel.js @@ -48,7 +48,7 @@ export class RoomViewModel extends ViewModel { _setupCallViewModel() { // pick call for this room with lowest key - this._callObservable = new PickMapObservableValue(session.callHandler.calls.filterValues(c => c.roomId === this.roomId)); + this._callObservable = new PickMapObservableValue(this.getOption("session").callHandler.calls.filterValues(c => c.roomId === this._room.id)); this._callViewModel = undefined; this.track(this._callObservable.subscribe(call => { this._callViewModel = this.disposeTracked(this._callViewModel); @@ -347,10 +347,12 @@ export class RoomViewModel extends ViewModel { } async startCall() { + const session = this.getOption("session"); const mediaTracks = await this.platform.mediaDevices.getMediaTracks(true, true); - const localMedia = LocalMedia.fromTracks(mediaTracks); + const localMedia = new LocalMedia().withTracks(mediaTracks); + console.log("localMedia", localMedia.tracks); // this will set the callViewModel above as a call will be added to callHandler.calls - await this.session.callHandler.createCall(this.roomId, localMedia, "A call " + Math.round(this.platform.random() * 100)); + await session.callHandler.createCall(this._room.id, localMedia, "A call " + Math.round(this.platform.random() * 100)); } } diff --git a/src/matrix/calls/CallHandler.ts b/src/matrix/calls/CallHandler.ts index a36b17f6..a9b59f4f 100644 --- a/src/matrix/calls/CallHandler.ts +++ b/src/matrix/calls/CallHandler.ts @@ -52,6 +52,7 @@ export class CallHandler { async createCall(roomId: string, localMedia: LocalMedia, name: string): Promise { const call = new GroupCall(undefined, undefined, roomId, this.groupCallOptions); + console.log("created call with id", call.id); this._calls.set(call.id, call); try { await call.create(localMedia, name); diff --git a/src/matrix/calls/LocalMedia.ts b/src/matrix/calls/LocalMedia.ts index 4f5d3b7a..1fd4aad6 100644 --- a/src/matrix/calls/LocalMedia.ts +++ b/src/matrix/calls/LocalMedia.ts @@ -35,7 +35,13 @@ export class LocalMedia { return new LocalMedia(cameraTrack, screenShareTrack, microphoneTrack as AudioTrack); } - get tracks(): Track[] { return []; } + get tracks(): Track[] { + const tracks: Track[] = []; + if (this.cameraTrack) { tracks.push(this.cameraTrack); } + if (this.screenShareTrack) { tracks.push(this.screenShareTrack); } + if (this.microphoneTrack) { tracks.push(this.microphoneTrack); } + return tracks; + } getSDPMetadata(): SDPStreamMetadata { const metadata = {}; diff --git a/src/matrix/room/Room.js b/src/matrix/room/Room.js index d0fcbc84..ca11cdd8 100644 --- a/src/matrix/room/Room.js +++ b/src/matrix/room/Room.js @@ -93,7 +93,7 @@ export class Room extends BaseRoom { } } - this._updateCallHandler(roomResponse); + this._updateCallHandler(roomResponse, log); return { roomEncryption, @@ -448,20 +448,17 @@ export class Room extends BaseRoom { return this._sendQueue.pendingEvents; } - _updateCallHandler(roomResponse) { + _updateCallHandler(roomResponse, log) { if (this._callHandler) { const stateEvents = roomResponse.state?.events; if (stateEvents) { - for (const e of stateEvents) { - this._callHandler.handleRoomState(this, e); - } + this._callHandler.handleRoomState(this, stateEvents, log); } let timelineEvents = roomResponse.timeline?.events; if (timelineEvents) { - for (const e of timelineEvents) { - if (typeof e.state_key === "string") { - this._callHandler.handleRoomState(this, e); - } + const timelineStateEvents = timelineEvents.filter(e => typeof e.state_key === "string"); + if (timelineEvents.length !== 0) { + this._callHandler.handleRoomState(this, timelineStateEvents, log); } } } diff --git a/src/platform/web/ui/session/room/CallView.ts b/src/platform/web/ui/session/room/CallView.ts index 2c10f82f..29d4eee9 100644 --- a/src/platform/web/ui/session/room/CallView.ts +++ b/src/platform/web/ui/session/room/CallView.ts @@ -15,29 +15,33 @@ limitations under the License. */ import {TemplateView, TemplateBuilder} from "../../general/TemplateView"; +import {ListView} from "../../general/ListView"; import {Track, TrackType} from "../../../../types/MediaDevices"; import type {TrackWrapper} from "../../../dom/MediaDevices"; -import type {CallViewModel} from "../../../../../domain/session/room/CallViewModel"; +import type {CallViewModel, CallMemberViewModel} from "../../../../../domain/session/room/CallViewModel"; function bindVideoTracks(t: TemplateBuilder, video: HTMLVideoElement, propSelector: (vm: T) => Track[]) { t.mapSideEffect(propSelector, tracks => { + console.log("tracks", tracks); if (tracks.length) { video.srcObject = (tracks[0] as TrackWrapper).stream; } }); + return video; } export class CallView extends TemplateView { render(t: TemplateBuilder, vm: CallViewModel): HTMLElement { return t.div({class: "CallView"}, [ + t.p(`Call ${vm.name} (${vm.id})`), t.div({class: "CallView_me"}, bindVideoTracks(t, t.video(), vm => vm.localTracks)), - t.view(new ListView(vm.memberViewModels, vm => new MemberView(vm))) + t.view(new ListView({list: vm.memberViewModels}, vm => new MemberView(vm))) ]); } } class MemberView extends TemplateView { - render(t, vm) { + render(t: TemplateBuilder, vm: CallMemberViewModel) { return bindVideoTracks(t, t.video(), vm => vm.tracks); } } diff --git a/src/platform/web/ui/session/room/RoomView.js b/src/platform/web/ui/session/room/RoomView.js index 4d010a7c..2936adf3 100644 --- a/src/platform/web/ui/session/room/RoomView.js +++ b/src/platform/web/ui/session/room/RoomView.js @@ -53,9 +53,7 @@ export class RoomView extends TemplateView { ]), t.div({className: "RoomView_body"}, [ t.div({className: "RoomView_error"}, vm => vm.error), - t.mapView(vm => vm.callViewModel, callViewModel => { - return new CallView(callViewModel); - }), + t.mapView(vm => vm.callViewModel, callViewModel => callViewModel ? new CallView(callViewModel) : null), t.mapView(vm => vm.timelineViewModel, timelineViewModel => { return timelineViewModel ? new TimelineView(timelineViewModel) :