From 2b15faf4e8c3927a4b8bdc638f304e97976cdaf6 Mon Sep 17 00:00:00 2001 From: Piotr 'pwh' Hanusiak Date: Tue, 10 May 2022 13:16:37 +0200 Subject: [PATCH] make sure we subscribe to stores after estabilishing connection --- front/src/Connexion/RoomConnection.ts | 1 - front/src/Phaser/Game/GameScene.ts | 182 +++++++++++++------------- 2 files changed, 93 insertions(+), 90 deletions(-) diff --git a/front/src/Connexion/RoomConnection.ts b/front/src/Connexion/RoomConnection.ts index b220cd16..e6faa69b 100644 --- a/front/src/Connexion/RoomConnection.ts +++ b/front/src/Connexion/RoomConnection.ts @@ -562,7 +562,6 @@ export class RoomConnection implements RoomConnection { outlineColor: color, }); } - const bytes = ClientToServerMessageTsProto.encode({ message: { $case: "setPlayerDetailsMessage", diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 16f34977..489ae52b 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -173,17 +173,17 @@ export class GameScene extends DirtyScene { // A promise that will resolve when the "create" method is called (signaling loading is ended) private createPromiseDeferred: Deferred; private iframeSubscriptionList!: Array; - private peerStoreUnsubscribe!: Unsubscriber; - private emoteUnsubscribe!: Unsubscriber; - private emoteMenuUnsubscribe!: Unsubscriber; + private peerStoreUnsubscriber!: Unsubscriber; + private emoteUnsubscriber!: Unsubscriber; + private emoteMenuUnsubscriber!: Unsubscriber; private localVolumeStoreUnsubscriber: Unsubscriber | undefined; - private followUsersColorStoreUnsubscribe!: Unsubscriber; + private followUsersColorStoreUnsubscriber!: Unsubscriber; private userIsJitsiDominantSpeakerStoreUnsubscriber!: Unsubscriber; private jitsiParticipantsCountStoreUnsubscriber!: Unsubscriber; private availabilityStatusStoreUnsubscriber!: Unsubscriber; - private biggestAvailableAreaStoreUnsubscribe!: () => void; + private biggestAvailableAreaStoreUnsubscriber!: () => void; MapUrlFile: string; roomUrl: string; @@ -644,11 +644,6 @@ export class GameScene extends DirtyScene { this.reposition(); - // From now, this game scene will be notified of reposition events - this.biggestAvailableAreaStoreUnsubscribe = biggestAvailableAreaStore.subscribe((box) => - this.cameraManager.updateCameraOffset(box) - ); - new GameMapPropertiesListener(this, this.gameMap).register(); if (!this.room.isDisconnected()) { @@ -656,80 +651,6 @@ export class GameScene extends DirtyScene { this.connect(); } - const talkIconVolumeTreshold = 10; - let oldPeersNumber = 0; - this.peerStoreUnsubscribe = peerStore.subscribe((peers) => { - const newPeerNumber = peers.size; - if (newPeerNumber > oldPeersNumber) { - this.playSound("audio-webrtc-in"); - } else if (newPeerNumber < oldPeersNumber) { - this.playSound("audio-webrtc-out"); - } - if (newPeerNumber > 0) { - if (!this.localVolumeStoreUnsubscriber) { - this.localVolumeStoreUnsubscriber = localVolumeStore.subscribe((volume) => { - if (volume === undefined) { - return; - } - this.tryChangeShowVoiceIndicatorState(volume > talkIconVolumeTreshold); - }); - } - } else { - this.CurrentPlayer.showTalkIcon(false, true); - this.connection?.emitPlayerShowVoiceIndicator(false); - this.showVoiceIndicatorChangeMessageSent = false; - this.MapPlayersByKey.forEach((remotePlayer) => remotePlayer.showTalkIcon(false, true)); - if (this.localVolumeStoreUnsubscriber) { - this.localVolumeStoreUnsubscriber(); - this.localVolumeStoreUnsubscriber = undefined; - } - } - oldPeersNumber = peers.size; - }); - - this.userIsJitsiDominantSpeakerStoreUnsubscriber = userIsJitsiDominantSpeakerStore.subscribe( - (dominantSpeaker) => { - this.jitsiDominantSpeaker = dominantSpeaker; - this.tryChangeShowVoiceIndicatorState(this.jitsiDominantSpeaker && this.jitsiParticipantsCount > 1); - } - ); - - this.jitsiParticipantsCountStoreUnsubscriber = jitsiParticipantsCountStore.subscribe((participantsCount) => { - this.jitsiParticipantsCount = participantsCount; - this.tryChangeShowVoiceIndicatorState(this.jitsiDominantSpeaker && this.jitsiParticipantsCount > 1); - }); - - this.availabilityStatusStoreUnsubscriber = availabilityStatusStore.subscribe((status) => { - this.connection?.emitPlayerStatusChange(status); - this.CurrentPlayer.setStatus(status); - }); - - this.emoteUnsubscribe = emoteStore.subscribe((emote) => { - if (emote) { - this.CurrentPlayer?.playEmote(emote.url); - this.connection?.emitEmoteEvent(emote.url); - emoteStore.set(null); - } - }); - - this.emoteMenuUnsubscribe = emoteMenuStore.subscribe((emoteMenu) => { - if (emoteMenu) { - this.userInputManager.disableControls(); - } else { - this.userInputManager.restoreControls(); - } - }); - - this.followUsersColorStoreUnsubscribe = followUsersColorStore.subscribe((color) => { - if (color !== undefined) { - this.CurrentPlayer.setFollowOutlineColor(color); - this.connection?.emitPlayerOutlineColor(color); - } else { - this.CurrentPlayer.removeFollowOutlineColor(); - this.connection?.emitPlayerOutlineColor(null); - } - }); - Promise.all([ this.connectionAnswerPromiseDeferred.promise as Promise, ...scriptPromises, @@ -771,6 +692,8 @@ export class GameScene extends DirtyScene { .then((onConnect: OnConnectInterface) => { this.connection = onConnect.connection; + this.subscribeToStores(); + lazyLoadPlayerCharacterTextures(this.superLoad, onConnect.room.characterLayers) .then((layers) => { this.currentPlayerTexturesResolve(layers); @@ -953,6 +876,87 @@ export class GameScene extends DirtyScene { .catch((e) => console.error(e)); } + private subscribeToStores(): void { + this.userIsJitsiDominantSpeakerStoreUnsubscriber = userIsJitsiDominantSpeakerStore.subscribe( + (dominantSpeaker) => { + this.jitsiDominantSpeaker = dominantSpeaker; + this.tryChangeShowVoiceIndicatorState(this.jitsiDominantSpeaker && this.jitsiParticipantsCount > 1); + } + ); + + this.jitsiParticipantsCountStoreUnsubscriber = jitsiParticipantsCountStore.subscribe((participantsCount) => { + this.jitsiParticipantsCount = participantsCount; + this.tryChangeShowVoiceIndicatorState(this.jitsiDominantSpeaker && this.jitsiParticipantsCount > 1); + }); + + this.availabilityStatusStoreUnsubscriber = availabilityStatusStore.subscribe((status) => { + this.connection?.emitPlayerStatusChange(status); + this.CurrentPlayer.setStatus(status); + }); + + this.emoteUnsubscriber = emoteStore.subscribe((emote) => { + if (emote) { + this.CurrentPlayer?.playEmote(emote.url); + this.connection?.emitEmoteEvent(emote.url); + emoteStore.set(null); + } + }); + + this.emoteMenuUnsubscriber = emoteMenuStore.subscribe((emoteMenu) => { + if (emoteMenu) { + this.userInputManager.disableControls(); + } else { + this.userInputManager.restoreControls(); + } + }); + + this.followUsersColorStoreUnsubscriber = followUsersColorStore.subscribe((color) => { + if (color !== undefined) { + this.CurrentPlayer.setFollowOutlineColor(color); + this.connection?.emitPlayerOutlineColor(color); + } else { + this.CurrentPlayer.removeFollowOutlineColor(); + this.connection?.emitPlayerOutlineColor(null); + } + }); + + // From now, this game scene will be notified of reposition events + this.biggestAvailableAreaStoreUnsubscriber = biggestAvailableAreaStore.subscribe((box) => + this.cameraManager.updateCameraOffset(box) + ); + + const talkIconVolumeTreshold = 10; + let oldPeersNumber = 0; + this.peerStoreUnsubscriber = peerStore.subscribe((peers) => { + const newPeerNumber = peers.size; + if (newPeerNumber > oldPeersNumber) { + this.playSound("audio-webrtc-in"); + } else if (newPeerNumber < oldPeersNumber) { + this.playSound("audio-webrtc-out"); + } + if (newPeerNumber > 0) { + if (!this.localVolumeStoreUnsubscriber) { + this.localVolumeStoreUnsubscriber = localVolumeStore.subscribe((volume) => { + if (volume === undefined) { + return; + } + this.tryChangeShowVoiceIndicatorState(volume > talkIconVolumeTreshold); + }); + } + } else { + this.CurrentPlayer.showTalkIcon(false, true); + this.connection?.emitPlayerShowVoiceIndicator(false); + this.showVoiceIndicatorChangeMessageSent = false; + this.MapPlayersByKey.forEach((remotePlayer) => remotePlayer.showTalkIcon(false, true)); + if (this.localVolumeStoreUnsubscriber) { + this.localVolumeStoreUnsubscriber(); + this.localVolumeStoreUnsubscriber = undefined; + } + } + oldPeersNumber = peers.size; + }); + } + //todo: into dedicated classes private initCirclesCanvas(): void { // Let's generate the circle for the group delimiter @@ -1609,11 +1613,11 @@ ${escapedMessage} this.pinchManager?.destroy(); this.emoteManager?.destroy(); this.cameraManager.destroy(); - this.peerStoreUnsubscribe(); - this.emoteUnsubscribe(); - this.emoteMenuUnsubscribe(); - this.followUsersColorStoreUnsubscribe(); - this.biggestAvailableAreaStoreUnsubscribe(); + this.peerStoreUnsubscriber(); + this.emoteUnsubscriber(); + this.emoteMenuUnsubscriber(); + this.followUsersColorStoreUnsubscriber(); + this.biggestAvailableAreaStoreUnsubscriber(); this.userIsJitsiDominantSpeakerStoreUnsubscriber(); this.jitsiParticipantsCountStoreUnsubscriber(); this.availabilityStatusStoreUnsubscriber();