Add action bar to video.

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

@@ -5,7 +5,12 @@ module.exports =
 class ParticipantView extends View
   @content: ->
   	@div class: 'collaboration-participant overlay floating large', =>
-      @video autoplay: true, outlet: 'video'
+  	  @div class: 'video-container', =>
+  	    @video autoplay: true, outlet: 'video'
+  	    @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'
+  	      @a href: '#', class: 'toggle-audio', type: 'button', outlet: 'toggleAudioButton', title: 'Toggle audio on/off'
       @div class: 'volume-container', outlet: 'volumeContainer', =>
       	@div class: 'volume', outlet: 'volume'
 
@@ -16,10 +21,20 @@ class ParticipantView extends View
     @video.click =>
       @toggleClass('large')
 
-    @attr('title', email)
+    @removeButton.click @onClickRemove
+    @toggleVideoButton.click @onClickToggleVideo
+    @toggleAudioButton.click @onClickToggleAudio
 
+    # @attr('title', email)
     # emailMd5 = crypto.createHash('md5').update(email).digest('hex')
     # @avatar.attr('src', "http://www.gravatar.com/avatar/#{emailMd5}?s=32")
 
   attach: ->
     rootView.append(this)
+
+  onClickRemove: =>
+  	false
+  onClickToggleVideo: =>
+  	false
+  onClickToggleAudio: =>
+  	false

src/packages/collaboration/stylesheets/collaboration.less

@@ -58,13 +58,23 @@
     }
   }
 
+  .actions {
+    display: none;
+  }
+
   &.large {
     padding: @video-padding;
     width: @large-width + @video-padding*2 + 2px;
 
+    .video-container {
+      overflow: hidden;
+      position: relative;
+    }
+
     video {
       width: @large-width;
       border-radius: 2px 2px 0 0;
+      cursor: pointer;
     }
     .volume-container { 
       width: @large-width;
@@ -74,6 +84,49 @@
         height: 5px;
       }
     }
+
+    .actions {
+      position: absolute;
+      display: block;
+
+      width: @large-width;
+      height: 24px;
+      line-height: 24px;
+
+      bottom: -24px;
+
+      background: rgba(0, 0, 0, 0.6);
+
+      transition: bottom .15s;
+
+      .remove{
+        float: right;
+        margin-right: 5px;
+        .mini-icon(remove-close);
+      }
+
+      .toggle-video{
+        margin-left: 5px;
+        .mini-icon(arr-right);
+      }
+      .toggle-audio{
+        margin-left: 5px;
+        .mini-icon(arr-up);
+      }
+
+      .remove:before, .toggle-audio:before, .toggle-video:before {
+        color: rgba(255, 255, 255, 0.8);
+      }
+      .remove:hover:before, .toggle-audio:hover:before, .toggle-video:hover:before {
+        color: #fff;
+      }
+    }
+
+    &:hover{
+      .actions{
+        bottom: 0px;
+      }
+    }
   }
 }