feat(groupchat): screen mute/unmute fix

Satellite-im · May 3, 2022 · 68cbba2 · 68cbba2
1 parent 4c5e314
commit 68cbba2
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 45 deletions.
diff --git a/components/ui/Global/Global.vue b/components/ui/Global/Global.vue
@@ -117,7 +117,6 @@ export default Vue.extend({
      * @example
      */
     denyCall() {
-      console.info('global deny')
       this.$store.commit('webrtc/setIncomingCall', undefined)
       this.$store.commit('ui/fullscreen', false)
       this.$store.dispatch('webrtc/denyCall')
@@ -128,7 +127,6 @@ export default Vue.extend({
      * @example
      */
     hangUp() {
-      console.info('global hangup')
       this.$store.commit('webrtc/setIncomingCall', undefined, { root: true })
       this.$store.commit('ui/fullscreen', false)
       this.$store.dispatch('webrtc/hangUp')

diff --git a/components/views/media/actions/Actions.vue b/components/views/media/actions/Actions.vue
@@ -60,7 +60,6 @@ export default Vue.extend({
           video.stop()
           video.classList.remove('loaded')
         })
-      console.info('toggling mute', kind)
       this.$store.dispatch(
         'webrtc/toggleMute',
         { kind, peerId: p2p.id },

diff --git a/components/views/media/user/User.html b/components/views/media/user/User.html
@@ -26,7 +26,7 @@
       type="random"
       :seed="user.address"
       :size="$device.isMobile ? 35 : 65"
-      :class="`${!audioStream && !videoStream && !screenStream ? 'calling' : ''}`"
+      :class="`${!audioStream ? 'calling' : ''}`"
       :source="user.profilePicture"
     />
     <TypographyTag :text="user.name" inverted />

diff --git a/components/views/media/user/User.vue b/components/views/media/user/User.vue
@@ -58,33 +58,30 @@ export default Vue.extend({
         this.user?.peerId &&
         !this.webrtc.streamMuted[this.user.peerId]?.video &&
         this.webrtc.streamMuted[this.user.peerId]?.screen &&
-        this.webrtc.activeCall &&
-        this.webrtc.activeCall.callId &&
-        $WebRTC
-          .getCall(this.webrtc.activeCall.callId)
-          ?.getPeerStream(this.user?.peerId, 'video')
+        this.webrtc.activeCall?.callId &&
+        $WebRTC.getCall(this.webrtc.activeCall.callId)?.streams[
+          this.user.peerId
+        ].video
       )
     },
     audioStream() {
       return (
         this.user?.peerId &&
         !this.webrtc.streamMuted[this.user.peerId]?.audio &&
-        this.webrtc.activeCall &&
-        this.webrtc.activeCall.callId &&
-        $WebRTC
-          .getCall(this.webrtc.activeCall.callId)
-          ?.getPeerStream(this.user?.peerId, 'audio')
+        this.webrtc.activeCall?.callId &&
+        $WebRTC.getCall(this.webrtc.activeCall.callId)?.streams[
+          this.user.peerId
+        ]?.audio
       )
     },
     screenStream() {
       return (
         this.user?.peerId &&
         !this.webrtc.streamMuted[this.user.peerId]?.screen &&
-        this.webrtc.activeCall &&
-        this.webrtc.activeCall.callId &&
-        $WebRTC
-          .getCall(this.webrtc.activeCall.callId)
-          ?.getPeerStream(this.user?.peerId, 'screen')
+        this.webrtc.activeCall?.callId &&
+        $WebRTC.getCall(this.webrtc.activeCall.callId)?.streams[
+          this.user.peerId
+        ]?.screen
       )
     },
   },

diff --git a/components/views/navigation/sidebar/live/Live.vue b/components/views/navigation/sidebar/live/Live.vue
@@ -26,7 +26,6 @@ export default Vue.extend({
   },
   methods: {
     hangUp() {
-      console.info('live hangup')
       if (!this.webrtc.activeCall) return
       this.$store.dispatch('webrtc/hangUp')
     },

diff --git a/libraries/WebRTC/Call.ts b/libraries/WebRTC/Call.ts
@@ -305,15 +305,6 @@ export class Call extends Emitter<CallEventListeners> {
     const screenTrack = screenStream.getVideoTracks()[0]
     screenTrack.enabled = true
 
-    this.streams[this.localId].screen = screenStream
-    this.tracks[this.localId].add(screenTrack)
-
-    this.emit('LOCAL_TRACK_CREATED', {
-      track: screenTrack,
-      kind: 'screen',
-      stream: screenStream,
-    })
-
     await Promise.all(
       Object.values(this.peers).map(async (peer) => {
         await this.p2p.sendMessage(
@@ -333,6 +324,15 @@ export class Call extends Emitter<CallEventListeners> {
         } catch (_) {}
       }),
     )
+
+    this.streams[this.localId].screen = screenStream
+    this.tracks[this.localId].add(screenTrack)
+
+    this.emit('LOCAL_TRACK_CREATED', {
+      track: screenTrack,
+      kind: 'screen',
+      stream: screenStream,
+    })
   }
 
   /**
@@ -475,7 +475,6 @@ export class Call extends Emitter<CallEventListeners> {
    * @example call.hangUp()
    */
   async hangUp() {
-    console.info('call.hangUp')
     this.deny()
     this.emit('HANG_UP', {
       callId: this.callId,
@@ -506,7 +505,6 @@ export class Call extends Emitter<CallEventListeners> {
    * @example call.destroy()
    */
   destroy() {
-    console.info('call.destroy')
     this.hangUp()
     this._unbindBusListeners()
     Object.values(this.peers).forEach((peer) => {
@@ -557,7 +555,6 @@ export class Call extends Emitter<CallEventListeners> {
     if (peerId === this.localId) {
       await Promise.all(
         Object.values(this.peers).map(async (peer) => {
-          console.info('asking peer to mute track', peer.id, track.id, kind)
           await this.p2p.sendMessage(
             {
               type: 'peer:mute',
@@ -573,7 +570,6 @@ export class Call extends Emitter<CallEventListeners> {
         }),
       )
 
-      console.info('muted local track', track, kind, stream)
       this.emit('LOCAL_TRACK_REMOVED', {
         track,
         kind,
@@ -620,7 +616,25 @@ export class Call extends Emitter<CallEventListeners> {
     }
     track.enabled = true
 
+    // tell all of the peers that we unmuted the track
     if (peerId === this.localId) {
+      await Promise.all(
+        Object.values(this.peers).map(async (peer) => {
+          await this.p2p.sendMessage(
+            {
+              type: 'peer:unmute',
+              payload: {
+                callId: this.callId,
+                trackId: track.id,
+                kind,
+              },
+              sentAt: Date.now().valueOf(),
+            },
+            peer.id,
+          )
+        }),
+      )
+
       this.emit('LOCAL_TRACK_CREATED', {
         track,
         kind,
@@ -757,6 +771,7 @@ export class Call extends Emitter<CallEventListeners> {
         peerId: peer.id,
         track,
         stream,
+        kind: this.screenStreams[peer.id] === stream.id ? 'screen' : track.kind,
       })
     }
 
@@ -772,6 +787,7 @@ export class Call extends Emitter<CallEventListeners> {
       peerId: peer.id,
       track,
       stream,
+      kind: this.screenStreams[peer.id] === stream.id ? 'screen' : track.kind,
     })
   }
 
@@ -885,8 +901,12 @@ export class Call extends Emitter<CallEventListeners> {
     payload: { streamId: string }
   }) {
     const peer = this.peers[peerId.toB58String()]
-    console.info('[Call] Screenshare', peerId, streamId)
     if (peer) {
+      // if the stream has already been stored as video, move it to screen
+      if (this.streams[peer.id]?.video?.id === streamId) {
+        this.streams[peer.id].screen = this.streams[peer.id].video
+        delete this.streams[peer.id].video
+      }
       this.screenStreams[peerId.toB58String()] = streamId
     }
   }

diff --git a/libraries/WebRTC/WebRTC.ts b/libraries/WebRTC/WebRTC.ts
@@ -95,7 +95,6 @@ export default class WebRTC extends Emitter<WebRTCEventListeners> {
       return call
     }
 
-    console.info('creating call', callId, peerIds)
     call = new Call(callId, peerIds, peerSignals)
     this.calls.set(callId, call)
     return call

diff --git a/store/conversation/actions.ts b/store/conversation/actions.ts
@@ -45,14 +45,6 @@ const actions = {
       ).toB58String()
     }
 
-    console.info('updating participant', {
-      address,
-      peerId,
-      textilePubkey: friend?.textilePubkey || participant?.textilePubkey,
-      name: friend?.name || participant?.name,
-      profilePicture: participant?.profilePicture,
-    })
-
     commit(participant ? 'updateParticipant' : 'addParticipant', {
       address,
       peerId,

diff --git a/store/webrtc/actions.ts b/store/webrtc/actions.ts
@@ -305,6 +305,32 @@ const webRTCActions = {
       })
     })
 
+    call.on('REMOTE_TRACK_RECEIVED', ({ track, peerId, kind }) => {
+      $Logger.log(
+        'webrtc',
+        `remote track received: ${track.kind}#${track.id} from ${peerId}`,
+      )
+      commit('setMuted', {
+        callId: call.callId,
+        peerId,
+        kind,
+        muted: false,
+      })
+    })
+
+    call.on('REMOTE_TRACK_REMOVED', ({ track, peerId, kind }) => {
+      $Logger.log(
+        'webrtc',
+        `remote track removed: ${track.kind}#${track.id} from ${peerId}`,
+      )
+      commit('setMuted', {
+        callId: call.callId,
+        peerId,
+        kind,
+        muted: true,
+      })
+    })
+
     call.on('LOCAL_TRACK_REMOVED', ({ track, kind }) => {
       $Logger.log('webrtc', `local track removed: ${kind}#${track.id}`)
       commit('setMuted', {
@@ -316,7 +342,7 @@ const webRTCActions = {
     })
 
     call.on('STREAM', ({ peerId, kind }) => {
-      // commit('setMuted', { peerId, kind, muted: false })
+      commit('setMuted', { peerId, kind, muted: false })
     })
 
     call.on('ANSWERED', ({ peerId }) => {

diff --git a/store/webrtc/mutations.ts b/store/webrtc/mutations.ts
@@ -42,7 +42,6 @@ const mutations = {
     state: WebRTCState,
     { peerId, kind, muted }: { peerId: string; kind: string; muted: boolean },
   ) {
-    console.info('streamMuted', { peerId, kind, muted })
     state.streamMuted = {
       ...state.streamMuted,
       [peerId]: { ...state.streamMuted[peerId], [kind]: muted },