toggle classes added to participant view

src/packages/collaboration/lib/participant-view.coffee

@@ -7,6 +7,7 @@ class ParticipantView extends View
     @div class: 'collaboration-participant overlay floating large', =>
       @div class: 'video-container', =>
         @video autoplay: true, outlet: 'video'
+        @div class: 'avatar', outlet: 'avatar'
         @div class: 'actions', =>
           @a href: '#', class: 'remove', type: 'button', outlet: 'removeButton', title: 'Remove this person'
           @a href: '#', class: 'toggle-video', type: 'button', outlet: 'toggleVideoButton', title: 'Toggle video on/off'
@@ -21,6 +22,9 @@ class ParticipantView extends View
     @video.click =>
       @toggleClass('large')
 
+    emailMd5 = crypto.createHash('md5').update(@participant.email).digest('hex')
+    @avatar.css('background-image': "http://www.gravatar.com/avatar/#{emailMd5}?s=160")
+
     @removeButton.click @onClickRemove
     @toggleVideoButton.click @onClickToggleVideo
     @toggleAudioButton.click @onClickToggleAudio
@@ -42,7 +46,10 @@ class ParticipantView extends View
     false
   onClickToggleVideo: =>
     @toggleVideoButton.toggleClass('disabled')
+    @toggleClass('hide-video')
     false
+
   onClickToggleAudio: =>
     @toggleAudioButton.toggleClass('disabled')
+    @toggleClass('hide-audio')
     false

src/packages/collaboration/stylesheets/collaboration.less

@@ -32,7 +32,32 @@
   }
 }
 
-.collaboration-participant{
+.collaboration-participant.hide-video {
+  video {
+    display: none;
+  }
+  .avatar {
+    display: block;
+    width: @small-width;
+    height: @small-width;
+    background-size: cover;
+  }
+
+  &.large {
+    .avatar {
+      width: @large-width;
+      height: @large-width;
+    }
+  }
+}
+
+.collaboration-participant.hide-audio {
+  .volume-container {
+    display: none;
+  }
+}
+
+.collaboration-participant {
   bottom: 36px;
   right: 10px;
 
@@ -43,6 +68,9 @@
     width: @small-width;
     display: block;
   }
+  .avatar {
+    display: none;
+  }
   .volume-container { 
     position: relative;