Add ParticipantViewContainer

makes the stacking of participant views waaay better

src/packages/collaboration/lib/collaboration.coffee

@@ -2,30 +2,26 @@ Session = require './session'
 JoinPromptView = require './join-prompt-view'
 HostStatusBar = require './host-status-bar'
 GuestStatusBar = require './guest-status-bar'
-ParticipantView = require './participant-view'
-_ = require 'underscore'
+{ParticipantView, ParticipantViewContainer} = require './participant-view'
 
 module.exports =
   activate: ->
     hostView = null
-    participantViews = {}
+    participantViews = new ParticipantViewContainer().attach()
 
     if atom.getLoadSettings().sessionId
       session = atom.guestSession
       for participant in session.getOtherParticipants()
-        participantViews[participant.clientId] = @createParticipant(session, participant, _.size(participantViews))
+        participantViews.add(session, participant)
     else
       session = new Session(site: window.site)
       @handleEvents(session)
 
     session.on 'participant-entered', (participant) =>
-      index = _.size(participantViews)
-      view = @createParticipant(session, participant, index)
-      participantViews[participant.clientId] = view
+      participantViews.add(session, participant)
 
     session.on 'participant-exited', (participant) =>
-      view = participantViews[participant.clientId]
-      view.detach()
+      participantViews.remove(participant)
 
     rootView.eachPane (pane) ->
       setTimeout ->
@@ -33,11 +29,6 @@ module.exports =
         buttons.insertAfter(pane.find('.git-branch'))
       , 0
 
-  createParticipant: (session, participant, index) ->
-    view = new ParticipantView(session, participant, index)
-    view.attach()
-    view
-
   handleEvents: (session) ->
     rootView.command 'collaboration:copy-session-id', ->
       session.copySessionId()

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

@@ -1,7 +1,6 @@
 crypto = require 'crypto'
 {View} = require 'space-pen'
 
-module.exports =
 class ParticipantView extends View
   @content: ->
     @div class: 'collaboration-participant overlay floating large', =>
@@ -15,7 +14,7 @@ class ParticipantView extends View
       @div class: 'volume-container lighter', outlet: 'volumeContainer', =>
         @div class: 'volume', outlet: 'volume'
 
-  initialize: (@session, @participant, index) ->
+  initialize: (@session, @participant) ->
     @participant.getMediaConnection().getInboundStreamPromise().done (stream) =>
       @video[0].src = URL.createObjectURL(stream)
 
@@ -29,8 +28,6 @@ class ParticipantView extends View
     @toggleVideoButton.click @onClickToggleVideo
     @toggleAudioButton.click @onClickToggleAudio
 
-    @css(bottom: "#{(142 * index + 36)}px")
-
     map = @session.getClientIdToSiteIdMap()
     @setSiteId(map.get(@participant.clientId))
     map.on 'changed', ({key}={}) =>
@@ -41,9 +38,6 @@ class ParticipantView extends View
     @volumeContainer.addClass("site-#{siteId}")
     @volume.addClass("site-#{siteId}")
 
-  attach: ->
-    rootView.append(this)
-
   onClickRemove: =>
     false
   onClickToggleVideo: =>
@@ -55,3 +49,24 @@ class ParticipantView extends View
     @toggleAudioButton.toggleClass('disabled')
     @toggleClass('hide-audio')
     false
+
+class ParticipantViewContainer extends View
+  @content: ->
+    @div class: 'collaboration-participant-container'
+
+  initialize: ->
+    @participantViews = {}
+
+  add: (session, participant) ->
+    view = new ParticipantView(session, participant)
+    @participantViews[participant.clientId] = view
+    @append(view)
+
+  remove: (participant) ->
+    @participantViews[participant.clientId].remove()
+
+  attach: ->
+    rootView.append(this)
+    this
+
+module.exports = {ParticipantView, ParticipantViewContainer}

src/packages/collaboration/stylesheets/collaboration.less

@@ -32,6 +32,13 @@
   }
 }
 
+.collaboration-participant-container {
+  position: absolute;
+  bottom: 36px;
+  right: 10px;
+  width: 10px;
+}
+
 .collaboration-participant.hide-video {
   video {
     display: none;
@@ -58,8 +65,10 @@
 }
 
 .collaboration-participant {
-  bottom: 36px;
-  right: 10px;
+  position: relative;
+  top: auto; left: auto; bottom: auto; right: auto;
+  margin: 10px 0 0 0;
+  float: right;
 
   padding: @video-padding;
   width: @small-width + @video-padding*2 + 2px;
@@ -122,7 +131,7 @@
 
       background: rgba(0, 0, 0, 0.6);
 
-      transition: bottom .15s;
+      transition: bottom .05s;
 
       .remove{
         float: right;