starting off session broadcast feature with the files needed are been added

web/app/assets/javascripts/react-components/PopupSessionBroadcast.js.jsx.coffee

@@ -0,0 +1,38 @@
+context = window
+logger = context.JK.logger
+
+mixins = []
+
+@PopupSessionBroadcast = React.createClass({
+  render: () ->
+    `<div>
+      <div className="dialog-tabs">
+        <a className="selected tab-configure-audio">Inputs &amp; Outputs</a>
+        <a className="tab-configure-voice">Voice Chat</a>
+      </div>
+      <div className="tab no-selection-range" data-tab-id="music-audio">tab1</div>
+      <div className="tab" data-tab-id="voice-chat">tab2</div>
+    </div>`
+
+  componentDidUpdate: () ->
+    @resizeWindow()
+
+  resizeWindow: () =>
+    $container = $('#minimal-container')
+    width = $container.width()
+    height = $container.height()
+
+    # there is 20px or so of unused space at the top of the page.   can't figure out why it's there. (above #minimal-container)
+    mysteryTopMargin = 20
+
+    # deal with chrome in real browsers
+    offset = (window.outerHeight - window.innerHeight) + mysteryTopMargin
+
+    # handle native client chrome that the above outer-inner doesn't catch
+    #if navigator.userAgent.indexOf('JamKazam') > -1
+
+    #offset += 25
+
+    window.resizeTo(width, height + offset)
+})
+

web/app/assets/javascripts/react-components/SessionBroadcastBtn.js.jsx.coffee

@@ -0,0 +1,24 @@
+context = window
+
+@SessionBroadcastBtn = React.createClass({
+
+  mixins: [Reflux.listenTo(@AppStore,"onAppInit")]
+
+  onClickBroadcast: (e) ->
+    e.preventDefault()
+    @popupBroadcastWindow()
+    
+  popupBroadcastWindow: () ->
+    @broadcastWindow = window.open("/popups/broadcast-controls", 'Broadcast', 'scrollbars=yes,toolbar=no,status=no,height=640,width=800')
+    #@recordingWindow.ParentRecordingStore = context.RecordingStore
+    #@recordingWindow.ParentIsRecording = @recordingModel.isRecording()
+
+  render: () ->
+    `<a className="session-share button-grey left" onClick={this.onClickBroadcast}>
+      <img src="/assets/content/icon_share.png" align="texttop" height="14" width="14"/>
+      BROADCAST
+    </a>`
+
+  onAppInit: (app) ->
+    @app = app
+})

web/app/assets/javascripts/react-components/SessionScreen.js.jsx.coffee

@@ -26,7 +26,7 @@ SessionActions = @SessionActions
       <div className="in-session-controls">
         <SessionSettingsBtn />
         <SessionVolumeSettingsBtn />
-        <SessionShareBtn />
+        <SessionBroadcastBtn />
         <SessionRecordBtn />
         {videoBtn}
         {filesBtn}

web/app/assets/stylesheets/client/react-components/sessionBroadcastDialog.scss

@@ -0,0 +1,138 @@
+@import "client/common.scss";
+@charset "UTF-8";
+
+#session-broadcast-dialog {
+  width:800px;
+
+  &[current-screen="account/audio"] {
+    .btn-add-new-audio-gear {
+      display:none;
+    }
+  }
+
+  .sub-header {
+    color:white;
+    margin-bottom:10px;
+  }
+  .certified-audio-profile-section {
+
+    height:53px;
+
+    .easydropdown {
+      width:120px;
+    }
+
+    .easydropdown-wrapper {
+      width:120px;
+    }
+
+    .dropdown-container {
+      min-width:138px;
+    }
+  }
+
+  .column {
+    position:relative;
+    float:left;
+    vertical-align:top;
+    @include border_box_sizing;
+    padding: 0 20px 0 0;
+  }
+
+  .sub-column {
+    position:relative;
+    float:left;
+    vertical-align:top;
+    @include border_box_sizing;
+  }
+
+  .ftue-box.chat-inputs {
+    height:224px;
+    width:90%;
+    @include border_box_sizing;
+  }
+
+  .vu-meter {
+    width:10%;
+    height:224px;
+    padding: 0 3px;
+
+    .ftue-controls {
+      height: 224px;
+    }
+  }
+
+  .tab {
+    padding-top:20px;
+  }
+  .tab[data-tab-id="music-audio"] {
+    .column {
+      &:nth-of-type(1) {
+        width: 30%;
+      }
+
+      &:nth-of-type(2) {
+        width:  70%;
+      }
+    }
+
+    .sub-column {
+      &:nth-of-type(1) {
+        width: 80%;
+      }
+
+      &:nth-of-type(2) {
+        width:  20%;
+      }
+    }
+  }
+
+  .tab[data-tab-id="voice-chat"] {
+    .column {
+      &:nth-of-type(1) {
+        width: 50%;
+      }
+
+      &:nth-of-type(2) {
+        width:  50%;
+      }
+    }
+  }
+
+  .unused-audio-inputs-section {
+    margin-top:20px;
+    height:270px;
+  }
+
+  .unused-audio-outputs-section {
+    margin-top:20px;
+    height:80px;
+  }
+
+  .input-tracks-section {
+    height:363px;
+  }
+
+  .output-channels-section {
+    height:80px;
+  }
+
+  .buttons {
+    position:static;
+    margin-top:20px;
+    text-align:center;
+  }
+
+  .btn-add-new-audio-gear {
+    position:absolute;
+    left:20px;
+  }
+
+  .btn-cancel {
+
+  }
+
+  .btn-update-settings {
+
+  }
+}

web/app/controllers/popups_controller.rb

@@ -6,6 +6,10 @@ class PopupsController < ApplicationController
     render :layout => "minimal"
   end
 
+  def broadcast_controls
+    render :layout => "minimal"
+  end
+
   def media_controls
     render :layout => "minimal"
   end

web/app/views/popups/broadcast_controls.html.haml

@@ -0,0 +1,9 @@
+- provide(:page_name, 'broadcast-popup popup')
+- provide(:title, 'Broadcast Controls')
+=# render 'dialogs/sessionBroadcastDialog'
+.dialog.session-broadcast{id: 'session-broadcast-dialog'}
+  .content-head
+    = image_tag "content/icon_add.png", {:width => 19, :height => 19, :class => 'content-icon' }
+    %h1 Broadcast
+  .dialog-inner
+    = react_component 'PopupSessionBroadcast', {}

web/config/routes.rb

@@ -204,6 +204,7 @@ Rails.application.routes.draw do
 
   scope '/popups' do
     get '/recording-controls',  to: 'popups#recording_controls'
+    get '/broadcast-controls',   to: 'popups#broadcast_controls'
     get '/media-controls',      to: 'popups#media_controls'
     get '/youtube/player',      to: 'popups#youtube_player'
     get '/how-to-use-video',    to: 'popups#how_to_use_video'