diff --git a/web/app/assets/javascripts/react-components/PopupSessionBroadcast.js.jsx.coffee b/web/app/assets/javascripts/react-components/PopupSessionBroadcast.js.jsx.coffee
new file mode 100644
index 000000000..f3cfb7c89
--- /dev/null
+++ b/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: () ->
+ ``
+
+ 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)
+})
+
diff --git a/web/app/assets/javascripts/react-components/SessionBroadcastBtn.js.jsx.coffee b/web/app/assets/javascripts/react-components/SessionBroadcastBtn.js.jsx.coffee
new file mode 100644
index 000000000..623d21707
--- /dev/null
+++ b/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: () ->
+ `
+ 
+ BROADCAST
+ `
+
+ onAppInit: (app) ->
+ @app = app
+})
\ No newline at end of file
diff --git a/web/app/assets/javascripts/react-components/SessionScreen.js.jsx.coffee b/web/app/assets/javascripts/react-components/SessionScreen.js.jsx.coffee
index 207d5379b..ac814093f 100644
--- a/web/app/assets/javascripts/react-components/SessionScreen.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/SessionScreen.js.jsx.coffee
@@ -26,7 +26,7 @@ SessionActions = @SessionActions
-
+
{videoBtn}
{filesBtn}
diff --git a/web/app/assets/stylesheets/client/react-components/sessionBroadcastDialog.scss b/web/app/assets/stylesheets/client/react-components/sessionBroadcastDialog.scss
new file mode 100644
index 000000000..e47dfbe54
--- /dev/null
+++ b/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 {
+
+ }
+}
\ No newline at end of file
diff --git a/web/app/controllers/popups_controller.rb b/web/app/controllers/popups_controller.rb
index 6fef5b327..9515e1854 100644
--- a/web/app/controllers/popups_controller.rb
+++ b/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
diff --git a/web/app/views/popups/broadcast_controls.html.haml b/web/app/views/popups/broadcast_controls.html.haml
new file mode 100644
index 000000000..25bb01e17
--- /dev/null
+++ b/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', {}
\ No newline at end of file
diff --git a/web/config/routes.rb b/web/config/routes.rb
index f968c8135..1104c5c39 100644
--- a/web/config/routes.rb
+++ b/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'