WS events - muted notifier

public/css/call-minimal.css

@@ -58,3 +58,14 @@
         padding: 0;
     }
 }
+.muted-icon {
+    z-index: 2;
+    position: absolute;
+    top: 4px;
+    left: 6px;
+    font-size: 14px;
+    display: none;
+}
+[participant-muted] .muted-icon {
+    display: block;
+}

resources/views/app/video/call-minimal.blade.php

@@ -53,7 +53,9 @@
 
     <div id="video-container" class="container d-none">
         <div class="main-view mx-auto">
-            <div id="self-view" class="video-view" data-user-id=""></div>
+            <div id="self-view" class="video-view" data-user-id="">
+                <i class="fa fa-volume-mute text-white muted-icon"></i>
+            </div>
         </div>
     </div>
 
@@ -203,7 +205,6 @@
                 let socket = new SockJS(this.backendWsURL);
                 this.socketClient = Stomp.over(socket);
                 this.socketClient.connect({}, (frame) => {
-                    // this.initSocketListeners();
                     this.socketClient.send("/app/register", {},
                         JSON.stringify({
                             sessionKey: '{{$performer->session_key}}'
@@ -214,7 +215,47 @@
                             JSON.stringify({sessionKey: '{{ request()->cookie('sessionKey') }}'})
                         );
                     }, 5000);
+
+                    this.initSocketEvents();
+                });
+            },
+
+            // on pro side, handle all events
+            initSocketEvents: function() {
+
+                this.socketClient.subscribe("/user/topic/myMicrophoneIsOn", (message) => {
+                    this.log("WSE myMicrophoneIsOn received: " + message.body);
+                    this.handleParticipantMicrophoneMutedChangeWSEvent(message, true);
                 });
+
+                this.socketClient.subscribe("/user/topic/myMicrophoneIsOff", (message) => {
+                    this.log("WSE myMicrophoneIsOff received:" + message.body);
+                    this.handleParticipantMicrophoneMutedChangeWSEvent(message, false);
+                });
+
+                this.log("Initialized WS event handlers")
+
+            },
+
+            handleParticipantMicrophoneMutedChangeWSEvent: function(_event, _value) {
+                if(_event && _event.body) {
+                    let eventData = JSON.parse(_event.body);
+                    if(eventData.performer !== '{{ $session->uid  }}' && eventData.data) {
+                        for (let i = 0; i < this.meetingData.otherParticipants.length; i++) {
+                            if(this.meetingData.otherParticipants[i].uid === eventData.performer) {
+                                this.meetingData.otherParticipants[i].media.isMicrophoneOn = _value;
+                                if(!_value) {
+                                    $('.video-view[data-user-id="' + this.meetingData.otherParticipants[i].mediaServiceIdentifier + '"]')
+                                        .attr('participant-muted', 1);
+                                }
+                                else {
+                                    $('.video-view[data-user-id="' + this.meetingData.otherParticipants[i].mediaServiceIdentifier + '"]')
+                                        .removeAttr('participant-muted');
+                                }
+                            }
+                        }
+                    }
+                }
             },
 
             // join meeting
@@ -477,6 +518,7 @@
                                 if (participant) {
                                     element.find('.name-bar').remove();
                                     element.append($('<div class="name-bar"></div>').text(participant.displayName));
+                                    element.append('<i class="fa fa-volume-mute text-white muted-icon"></i>');
                                 }
                             });
 
@@ -563,6 +605,7 @@
                     );
                     this.$btnMuteAudio.addClass('d-none');
                     this.$btnUnmuteAudio.removeClass('d-none');
+                    this.$selfView.attr('participant-muted', 1);
                     // TODO log
                 } catch (e) {
                     this.log('could not mute audio! - ' + e.toString(), 'error');
@@ -577,6 +620,7 @@
                     );
                     this.$btnUnmuteAudio.addClass('d-none');
                     this.$btnMuteAudio.removeClass('d-none');
+                    this.$selfView.removeAttr('participant-muted');
                     // TODO log
                 } catch (e) {
                     this.log('could not unmute audio! ' + e.toString(), 'error');