Start to implement #985

Uppercase DTLS fingerprints to prevent some issues with Firefox

app/widgets/Visio/Visio.php

@@ -4,6 +4,8 @@ use Moxl\Xec\Action\Jingle\SessionPropose;
 use Moxl\Xec\Action\Jingle\SessionAccept;
 use Moxl\Xec\Action\Jingle\SessionInitiate;
 use Moxl\Xec\Action\Jingle\SessionTerminate;
+use Moxl\Xec\Action\Jingle\SessionMute;
+use Moxl\Xec\Action\Jingle\SessionUnmute;
 
 use Movim\Widget\Base;
 use Movim\Session;
@@ -30,6 +32,8 @@ class Visio extends Base
         $this->registerEvent('jingle_sessionaccept', 'onAcceptSDP');
         $this->registerEvent('jingle_transportinfo', 'onCandidate');
         $this->registerEvent('jingle_sessionterminate', 'onTerminate');
+        $this->registerEvent('jingle_sessionmute', 'onMute');
+        $this->registerEvent('jingle_sessionunmute', 'onUnmute');
         $this->registerEvent('externalservices_get_handle', 'onExternalServices');
         $this->registerEvent('externalservices_get_error', 'onExternalServicesError');
     }
@@ -165,6 +169,16 @@ class Visio extends Base
         $this->rpc('Visio.onTerminate', $reason);
     }
 
+    public function onMute($name)
+    {
+        $this->rpc('Visio.onMute', $name);
+    }
+
+    public function onUnmute($name)
+    {
+        $this->rpc('Visio.onUnmute', $name);
+    }
+
     public function ajaxPropose($to, $id, $withVideo = false)
     {
         $p = new SessionPropose;
@@ -182,6 +196,24 @@ class Visio extends Base
           ->request();
     }
 
+    public function ajaxMute($to, $id, $name)
+    {
+        $p = new SessionMute;
+        $p->setTo($to)
+          ->setId($id)
+          ->setName($name)
+          ->request();
+    }
+
+    public function ajaxUnmute($to, $id, $name)
+    {
+        $p = new SessionUnmute;
+        $p->setTo($to)
+          ->setId($id)
+          ->setName($name)
+          ->request();
+    }
+
     public function ajaxSessionInitiate($sdp, $to, $id)
     {
         $stj = new SDPtoJingle(

app/widgets/Visio/visio.css

@@ -97,6 +97,28 @@ body {
     animation: Rotate 2000ms infinite;
 }
 
+#visio #remote_state {
+    position: absolute;
+    bottom: 1rem;
+    left: 1rem;
+}
+
+#visio #remote_state i {
+    font-size: 2rem;
+    margin-right: 1rem;
+    opacity: 0.5;
+}
+
+#visio #video,
+#visio #remote_video {
+    transition: opacity 0.5s ease-in-out;
+}
+
+#visio #video.muted,
+#visio #remote_video.muted {
+    opacity: 0;
+}
+
 @-webkit-keyframes Rotate {
     0% {-webkit-transform:rotate(0deg);}
     4% {-webkit-transform:rotate(-22.5deg);}

app/widgets/Visio/visio.js

@@ -23,6 +23,8 @@ var Visio = {
 
     services: [],
 
+    tracksTypes: [],
+
     init: function() {
         Visio.from = MovimUtils.urlParts().params[0];
 
@@ -57,6 +59,9 @@ var Visio = {
                     }
                     Visio.inboundStream.addTrack(event.track);
                 }
+
+                VisioUtils.setRemoteAudioState('mic');
+                VisioUtils.setRemoteVideoState('videocam');
             } else {
                 if (event.streams && event.streams[0]) {
                     Visio.remoteAudio.srcObject = event.streams[0];
@@ -68,7 +73,10 @@ var Visio = {
                     Visio.inboundStream.addTrack(event.track);
                 }
                 VisioUtils.handleRemoteAudio();
+                VisioUtils.setRemoteAudioState('mic');
             }
+
+            Visio.tracksTypes['mid'+event.transceiver.mid] = event.track.kind;
         };
 
         Visio.pc.onicecandidate = event => {
@@ -98,6 +106,32 @@ var Visio = {
         Visio.gotStream();
     },
 
+    onMute: function(name) {
+        if (Visio.tracksTypes[name]) {
+            if (Visio.tracksTypes[name] == 'audio') {
+                VisioUtils.setRemoteAudioState('mic_off');
+            }
+
+            if (Visio.tracksTypes[name] == 'video') {
+                document.querySelector('#remote_video').classList.add('muted');
+                VisioUtils.setRemoteVideoState('videocam_off');
+            }
+        }
+    },
+
+    onUnmute: function(name) {
+        if (Visio.tracksTypes[name]) {
+            if (Visio.tracksTypes[name] == 'audio') {
+                VisioUtils.setRemoteAudioState('mic');
+            }
+
+            if (Visio.tracksTypes[name] == 'video') {
+                document.querySelector('#remote_video').classList.remove('muted');
+                VisioUtils.setRemoteVideoState('videocam');
+            }
+        }
+    },
+
     setServices: function(services) {
         Visio.services = services;
     },

app/widgets/Visio/visio.tpl

@@ -55,6 +55,13 @@
         <video id="video" autoplay muted poster="/theme/img/empty.png"></video>
     {/if}
 
+    <span id="remote_state">
+        <i class="voice material-icons"></i>
+        {if="$withvideo"}
+            <i class="webcam material-icons"></i>
+        {/if}
+    </span>
+
     <div class="controls">
         <a id="main" class="button action color gray">
             <i class="material-icons">phone</i>

app/widgets/Visio/visio_utils.js

@@ -113,9 +113,11 @@ var VisioUtils = {
         if (rtc && rtc.track.enabled == 1) {
             rtc.track.enabled = 0;
             button.innerText = 'mic_off';
+            Visio_ajaxUnmute(Visio.from, Visio.id, 'voice');
         } else if (rtc) {
             rtc.track.enabled = 1;
             button.innerText = 'mic';
+            Visio_ajaxMute(Visio.from, Visio.id, 'voice');
         }
     },
 
@@ -127,13 +129,27 @@ var VisioUtils = {
             if (rtc.track.enabled == 1) {
                 rtc.track.enabled = 0;
                 button.innerText = 'videocam_off';
+                document.querySelector('#video').classList.add('muted');
+                Visio_ajaxUnmute(Visio.from, Visio.id, 'webcam');
             } else {
                 rtc.track.enabled = 1;
                 button.innerText = 'videocam';
+                document.querySelector('#video').classList.remove('muted');
+                Visio_ajaxMute(Visio.from, Visio.id, 'webcam');
             }
         }
     },
 
+    setRemoteAudioState: function(icon) {
+        var voice = document.querySelector('#remote_state i.voice');
+        voice.innerHTML = icon;
+    },
+
+    setRemoteVideoState: function(icon) {
+        var webcam = document.querySelector('#remote_state i.webcam');
+        webcam.innerHTML = icon;
+    },
+
     toggleMainButton: function() {
         button = document.getElementById('main');
         state = document.querySelector('p.state');

lib/JingletoSDP.php

@@ -259,7 +259,7 @@ class JingletoSDP
                                 "\r\na=fingerprint:".
                                 $content->transport->fingerprint->attributes()->hash.
                                 ' '.
-                                $content->transport->fingerprint;
+                                strtoupper($content->transport->fingerprint);
                         }
 
                         if (isset($content->transport->fingerprint->attributes()->setup)) {

lib/moxl/src/Stanza/Jingle.php

@@ -94,6 +94,46 @@ class Jingle
         \Moxl\API::request($xml);
     }
 
+    public static function sessionMute($to, $sid, $name = false)
+    {
+        $dom = new \DOMDocument('1.0', 'UTF-8');
+        $jingle = $dom->createElementNS('urn:xmpp:jingle:1', 'jingle');
+        $jingle->setAttribute('action', 'session-info');
+        $jingle->setAttribute('sid', $sid);
+
+        $mute = $dom->createElement('mute');
+        $mute->setAttribute('xmlns', 'urn:xmpp:jingle:apps:rtp:info:1');
+
+        if ($name) {
+            $mute->setAttribute('name', $name);
+        }
+
+        $jingle->appendChild($mute);
+
+        $xml = \Moxl\API::iqWrapper($jingle, $to, 'set');
+        \Moxl\API::request($xml);
+    }
+
+    public static function sessionUnmute($to, $sid, $name = false)
+    {
+        $dom = new \DOMDocument('1.0', 'UTF-8');
+        $jingle = $dom->createElementNS('urn:xmpp:jingle:1', 'jingle');
+        $jingle->setAttribute('action', 'session-info');
+        $jingle->setAttribute('sid', $sid);
+
+        $mute = $dom->createElement('unmute');
+        $mute->setAttribute('xmlns', 'urn:xmpp:jingle:apps:rtp:info:1');
+
+        if ($name) {
+            $mute->setAttribute('name', $name);
+        }
+
+        $jingle->appendChild($mute);
+
+        $xml = \Moxl\API::iqWrapper($jingle, $to, 'set');
+        \Moxl\API::request($xml);
+    }
+
     public static function unknownSession($to, $id)
     {
         $dom = new \DOMDocument('1.0', 'UTF-8');

lib/moxl/src/Xec/Action/Jingle/SessionMute.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace Moxl\Xec\Action\Jingle;
+
+use Moxl\Xec\Action;
+use Moxl\Stanza\Jingle;
+
+class SessionMute extends Action
+{
+    protected $_to;
+    protected $_id;
+    protected $_name = false;
+
+    public function request()
+    {
+        $this->store();
+        Jingle::sessionUnmute($this->_to, $this->_id, $this->_name);
+    }
+}

lib/moxl/src/Xec/Action/Jingle/SessionUnmute.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace Moxl\Xec\Action\Jingle;
+
+use Moxl\Xec\Action;
+use Moxl\Stanza\Jingle;
+
+class SessionUnmute extends Action
+{
+    protected $_to;
+    protected $_id;
+    protected $_name = false;
+
+    public function request()
+    {
+        $this->store();
+        Jingle::sessionMute($this->_to, $this->_id, $this->_name);
+    }
+}

lib/moxl/src/Xec/Payload/Jingle.php

@@ -59,6 +59,14 @@ class Jingle extends Payload
                     $message->save();
                     $this->event('jingle_sessioninitiate', [$stanza, $from]);
                     break;
+                case 'session-info':
+                    if ($stanza->mute) {
+                        $this->event('jingle_sessionmute', 'mid'.(string)$stanza->mute->attributes()->name);
+                    }
+                    if ($stanza->unmute) {
+                        $this->event('jingle_sessionunmute', 'mid'.(string)$stanza->unmute->attributes()->name);
+                    }
+                    break;
                 case 'transport-info':
                     $this->event('jingle_transportinfo', $stanza);
                     break;