Add status bar icon for sharing.

Also adds participant views to the rootView

src/packages/collaboration/lib/collaboration.coffee

@@ -1,29 +1,33 @@
-GuestView = require './guest-view'
-HostView = require './host-view'
 Session = require './session'
 JoinPromptView = require './join-prompt-view'
+HostStatusBar = require './host-status-bar'
+GuestStatusBar = require './guest-status-bar'
+ParticipantView = require './participant-view'
 {getSessionUrl} = require './session-utils'
 
 module.exports =
   activate: ->
     hostView = null
+    loadedParticipants = {}
 
     if atom.getLoadSettings().sessionId
-      new GuestView(atom.guestSession)
+      session = atom.guestSession
     else
-      hostSession = new Session(site: window.site)
+      session = new Session(site: window.site)
 
-      copySession = ->
-        sessionId = hostSession.getId()
+      copySessionId = ->
+        console.log 'copy'
+        sessionId = session.getId()
         pasteboard.write(getSessionUrl(sessionId)) if sessionId
 
       rootView.command 'collaboration:copy-session-id', copySession
-
       rootView.command 'collaboration:start-session', ->
         hostView ?= new HostView(hostSession)
         hostSession.start()
         copySession()
 
+      rootView.command 'collaboration:copy-session-id', copySessionId
+      rootView.command 'collaboration:start-session', -> session.start()
       rootView.command 'collaboration:join-session', ->
         new JoinPromptView (id) ->
           return unless id
@@ -32,3 +36,21 @@ module.exports =
             resourcePath: window.resourcePath
             sessionId: id
           atom.openWindow(windowSettings)
+
+    session.on 'listening', copySessionId
+    session.on 'participants-changed', (participants) =>
+      console.log 'participant', participants
+      for participant in participants
+        continue if participant.id == session.getId()
+        continue if participant.id of loadedParticipants
+        console.log 'adding', participant.id, participant
+        loadedParticipants[participant.id] = new ParticipantView(session, participant)
+        loadedParticipants[participant.id].attach()
+
+    rootView.eachPane (pane) ->
+      setTimeout ->
+        buttons = if session.isHost() then new HostStatusBar(session) else new GuestStatusBar(session)
+        buttons.insertAfter(pane.find('.git-branch'))
+      , 0
+
+    window.sess = session

src/packages/collaboration/lib/guest-status-bar.coffee

@@ -0,0 +1,14 @@
+{$$, View} = require 'space-pen'
+
+module.exports =
+class HostStatusBar extends View
+  @content: ->
+    @div class: 'collaboration-status', =>
+      @span outlet: 'status', type: 'button', class: 'status guest'
+
+  initialize: (@session) ->
+    @session.on 'started stopped', @update
+    @update()
+
+  update: ->
+    # do stuff

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

@@ -1,38 +0,0 @@
-{$$, View} = require 'space-pen'
-ParticipantView = require './participant-view'
-
-module.exports =
-class GuestView extends View
-  @content: ->
-    @div class: 'collaboration', tabindex: -1, =>
-      @div class: 'guest'
-      @video autoplay: true, outlet: 'video'
-      @div outlet: 'participants'
-
-  guestSession: null
-
-  initialize: (@guestSession) ->
-    @guestSession.on 'participant-entered participant-exited', =>
-      @updateParticipants()
-
-    @guestSession.waitForStream (stream) =>
-      @video[0].src = URL.createObjectURL(stream)
-
-    @updateParticipants()
-
-    @attach()
-
-  updateParticipants: ->
-    @participants.empty()
-    for participant in @guestSession.getOtherParticipants()
-      @participants.append(new ParticipantView(participant))
-
-  toggle: ->
-    if @hasParent()
-      @detach()
-    else
-      @attach()
-
-  attach: ->
-    rootView.horizontal.append(this)
-    @focus()

src/packages/collaboration/lib/host-status-bar.coffee

@@ -0,0 +1,30 @@
+{$$, View} = require 'space-pen'
+
+module.exports =
+class HostStatusBar extends View
+  @content: ->
+    @div class: 'collaboration-status', =>
+      @span outlet: 'status', type: 'button', class: 'status share'
+      @span outlet: 'connections', class: 'connections'
+
+  initialize: (@session) ->
+    @status.on 'click', =>
+      if @session.isSharing()
+        @session.stop()
+      else
+        @session.start()
+
+    @session.on 'listening started stopped', @update
+    @update()
+
+    #@hostSession.waitForStream (stream) =>
+    #  @video[0].src = URL.createObjectURL(stream)
+
+  update: =>
+    console.log 'updating', this
+    if @session.isListening()
+      @status.addClass('running')
+      @connections.show().text(@session.participants.length)
+    else
+      @status.removeClass('running')
+      @connections.hide()

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

@@ -1,41 +0,0 @@
-{$$, View} = require 'space-pen'
-ParticipantView = require './participant-view'
-
-module.exports =
-class HostView extends View
-  @content: ->
-    @div class: 'collaboration', tabindex: -1, =>
-      @div outlet: 'share', type: 'button', class: 'share'
-      @video autoplay: true, outlet: 'video'
-      @div outlet: 'participants'
-
-  hostSession: null
-
-  initialize: (@hostSession) ->
-    @hostSession.on 'started stopped', =>
-      @share.toggleClass('running').enable()
-
-    @hostSession.on 'participant-entered participant-exited', =>
-      @updateParticipants()
-
-    @hostSession.one 'started', =>
-      @updateParticipants()
-      @hostSession.waitForStream (stream) =>
-        @video[0].src = URL.createObjectURL(stream)
-
-    @attach()
-
-  updateParticipants: ->
-    @participants.empty()
-    for participant in @hostSession.getOtherParticipants()
-      @participants.append(new ParticipantView(participant))
-
-  toggle: ->
-    if @hasParent()
-      @detach()
-    else
-      @attach()
-
-  attach: ->
-    rootView.horizontal.append(this)
-    @focus()

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

@@ -4,8 +4,17 @@ crypto = require 'crypto'
 module.exports =
 class ParticipantView extends View
   @content: ->
-    @div class: 'participant', =>
-      @img class: 'avatar', outlet: 'avatar'
+  	@div class: 'collaboration-participant overlay large', =>
+      @video autoplay: true, outlet: 'video'
+      @div class: 'volume-container', outlet: 'volumeContainer', =>
+      	@div class: 'volume', outlet: 'volume'
 
-  initialize: ({id, avatar_url}) ->
-    @avatar.attr('src', avatar_url)
+  initialize: (@session, {id, email}) ->
+  	@session.waitForStream (stream) =>
+      @video[0].src = URL.createObjectURL(stream)
+
+    # emailMd5 = crypto.createHash('md5').update(email).digest('hex')
+    # @avatar.attr('src', "http://www.gravatar.com/avatar/#{emailMd5}?s=32")
+
+  attach: ->
+    rootView.append(this)

src/packages/collaboration/stylesheets/collaboration.less

@@ -3,12 +3,10 @@
 
 @avatar-width: 32px;
 
-.collaboration {
-  @item-line-height: @line-height-base * 1.25;
-  padding: 10px;
-  -webkit-user-select: none;
+.collaboration-status{
+  float: right;
 
-  .share {
+  .status.share {
     cursor: pointer;
     .mini-icon(notifications);
     position: relative;
@@ -16,13 +14,27 @@
     margin-bottom: 5px;
   }
 
-  .guest {
+  .status.guest {
     .mini-icon(watchers);
     position: relative;
     right: -2px;
     margin-bottom: 5px;
   }
 
+  /* is there a way to specify this 14px is a more general way? or remove the
+  .mini-icon mixin and use classes so we can use the status bar icon sizes.*/
+  .status.guest:before, .status.share:before {
+    font-size: 14px;
+    width: 14px;
+    height: 14px;
+  }
+}
+
+.collaboration {
+  @item-line-height: @line-height-base * 1.25;
+  padding: 10px;
+  -webkit-user-select: none;
+
   .avatar {
     border-radius: 3px;
     height: @avatar-width;

themes/atom-dark-ui/collaboration.less

@@ -1,11 +1,6 @@
 @runningColor: #99CC99;
 
-.collaboration {
-  background: #1b1c1e;
-  box-shadow:
-    1px 0 0 #131516,
-    inset -1px 0 0 rgba(255, 255, 255, 0.02),
-    1px 0 3px rgba(0, 0, 0, 0.2);
+.collaboration-status{
 
   .guest {
     color: #96CBFE;
@@ -19,3 +14,11 @@
     }
   }
 }
+
+.collaboration {
+  background: #1b1c1e;
+  box-shadow:
+    1px 0 0 #131516,
+    inset -1px 0 0 rgba(255, 255, 255, 0.02),
+    1px 0 3px rgba(0, 0, 0, 0.2);
+}