From 40aae25e11f0785d99523bd593aaf44cd32439bb Mon Sep 17 00:00:00 2001 From: Hanusiak Piotr Date: Thu, 3 Feb 2022 13:43:20 +0100 Subject: [PATCH] listen to local volume change only if in bubble conversation --- front/src/Phaser/Game/GameScene.ts | 29 +++++++++++++--------- front/src/Stores/MediaStore.ts | 39 +++++++++++++++--------------- front/src/WebRtc/VideoPeer.ts | 37 +++++++++++++--------------- 3 files changed, 54 insertions(+), 51 deletions(-) diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index bdcf976a..bf762fec 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -169,7 +169,9 @@ export class GameScene extends DirtyScene { private peerStoreUnsubscribe!: Unsubscriber; private emoteUnsubscribe!: Unsubscriber; private emoteMenuUnsubscribe!: Unsubscriber; - private volumeStoreUnsubscribes: Map = new Map(); + + private volumeStoreUnsubscribers: Map = new Map(); + private localVolumeStoreUnsubscriber: Unsubscriber | undefined; private followUsersColorStoreUnsubscribe!: Unsubscriber; private biggestAvailableAreaStoreUnsubscribe!: () => void; @@ -637,20 +639,13 @@ export class GameScene extends DirtyScene { this.connect(); } - localVolumeStore.subscribe((volume) => { - if (volume) { - this.CurrentPlayer.showIconTalk(volume > 5); - this.markDirty(); // should be dirty from animation - } - }); - let oldPeerNumber = 0; this.peerStoreUnsubscribe = peerStore.subscribe((peers) => { - this.volumeStoreUnsubscribes.forEach(unsubscribe => unsubscribe()); - this.volumeStoreUnsubscribes.clear(); + this.volumeStoreUnsubscribers.forEach(unsubscribe => unsubscribe()); + this.volumeStoreUnsubscribers.clear(); for (const [key, videoStream] of peers) { - this.volumeStoreUnsubscribes.set(key, videoStream.volumeStore.subscribe((volume) => { + this.volumeStoreUnsubscribers.set(key, videoStream.volumeStore.subscribe((volume) => { if (volume) { console.log(`${key}: ${volume}`); this.MapPlayersByKey.get(key)?.showIconTalk(volume > 5); @@ -665,6 +660,18 @@ export class GameScene extends DirtyScene { } else if (newPeerNumber < oldPeerNumber) { this.playSound("audio-webrtc-out"); } + if (newPeerNumber > 0) { + this.localVolumeStoreUnsubscriber = localVolumeStore.subscribe((volume) => { + if (volume) { + this.CurrentPlayer.showIconTalk(volume > 5); + this.markDirty(); // should be dirty from animation + } + }); + } else { + if (this.localVolumeStoreUnsubscriber) { + this.localVolumeStoreUnsubscriber(); + } + } oldPeerNumber = newPeerNumber; }); diff --git a/front/src/Stores/MediaStore.ts b/front/src/Stores/MediaStore.ts index fe83d41a..df275e39 100644 --- a/front/src/Stores/MediaStore.ts +++ b/front/src/Stores/MediaStore.ts @@ -546,36 +546,35 @@ export const obtainedMediaConstraintStore = derived(null, (set) => { let timeout: ReturnType; const unsubscribe = localStreamStore.subscribe((localStreamStoreValue) => { - console.log('LOCAL VOLUME STORE SUBSCRIBE TO LOCAL STREAM STORE'); + clearInterval(timeout); if (localStreamStoreValue.type === "error") { - console.log('D1'); set(null); return; } const soundMeter = new SoundMeter(); const mediaStream = localStreamStoreValue.stream; - if (mediaStream !== null && mediaStream.getAudioTracks().length > 0) { - console.log('D3'); - console.log(localStreamStoreValue); - soundMeter.connectToSource(mediaStream, new AudioContext()); - let error = false; - - timeout = setInterval(() => { - console.log('local time interval'); - try { - set(soundMeter.getVolume()); - } catch (err) { - if (!error) { - console.error(err); - error = true; - } - } - }, 100); + + if (mediaStream === null || mediaStream.getAudioTracks().length <= 0) { + set(null); + return; } + + soundMeter.connectToSource(mediaStream, new AudioContext()); + let error = false; + + timeout = setInterval(() => { + try { + set(soundMeter.getVolume()); + } catch (err) { + if (!error) { + console.error(err); + error = true; + } + } + }, 100); }); return () => { - console.log('UNSUBSCRIBE FROM LOCAL STREAM STORE'); unsubscribe(); clearInterval(timeout); } diff --git a/front/src/WebRtc/VideoPeer.ts b/front/src/WebRtc/VideoPeer.ts index ca808365..a955f32c 100644 --- a/front/src/WebRtc/VideoPeer.ts +++ b/front/src/WebRtc/VideoPeer.ts @@ -62,7 +62,6 @@ export class VideoPeer extends Peer { this.uniqueId = "video_" + this.userId; this.streamStore = readable(null, (set) => { - console.log('STREAM STORE INITIALIZE'); const onStream = (stream: MediaStream | null) => { set(stream); }; @@ -74,32 +73,30 @@ export class VideoPeer extends Peer { }; }); - console.log('CREATE VOLUME STORE'); - this.volumeStore = readable(null, (set) => { let timeout: ReturnType; - console.log('VOLUME STORE INITIALIZE'); const unsubscribe = this.streamStore.subscribe((mediaStream) => { - if (mediaStream !== null && mediaStream.getAudioTracks().length > 0) { - const soundMeter = new SoundMeter(); - soundMeter.connectToSource(mediaStream, new AudioContext()); - let error = false; - - timeout = setInterval(() => { - try { - set(soundMeter.getVolume()); - } catch (err) { - if (!error) { - console.error(err); - error = true; - } - } - }, 100); + if (mediaStream === null || mediaStream.getAudioTracks().length <= 0) { + set(null); + return; } + const soundMeter = new SoundMeter(); + soundMeter.connectToSource(mediaStream, new AudioContext()); + let error = false; + + timeout = setInterval(() => { + try { + set(soundMeter.getVolume()); + } catch (err) { + if (!error) { + console.error(err); + error = true; + } + } + }, 100); }); return () => { - console.log('UNSUBSCRIBE'); unsubscribe(); clearInterval(timeout); }