Initial screen/tab casting implementation

ext/src/popup/index.css

@@ -5,6 +5,17 @@ body {
     font: message-box;
 }
 
+.media-select {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+    margin: 0 1em;
+    padding: 0.75em 0;
+}
+
+.media-select-dropdown {
+    display: inline-block;
+    margin: 0 0.5em;
+}
+
 .receivers {
     list-style: none;
     margin: initial;
@@ -18,10 +29,10 @@ body {
     grid-template-rows: min-content min-content 1fr;
     grid-template-areas:
         "name connect"
-        "address connect"
-        ". connect";
+        "address connect";
     justify-content: center;
-    padding: 0.75em 1em;
+    margin: 0 1em;
+    padding: 0.75em 0;
     position: relative;
 }
 
@@ -46,7 +57,9 @@ body {
     grid-area: address;
 }
 .receiver-connect {
+    align-self: center;
     grid-area: connect;
     justify-self: end;
     min-width: 100px;
+    height: 32px;
 }

ext/src/popup/index.js

@@ -18,6 +18,7 @@ class App extends Component {
 
         this.state = {
             receivers: []
+          , selectedMedia: "app"
           , isLoading: false
         };
 
@@ -38,7 +39,8 @@ class App extends Component {
             switch (message.subject) {
                 case "popup:populate":
                     this.setState({
-                        receivers: message.data
+                        receivers: message.data.receivers
+                      , selectedMedia: message.data.selectedMedia
                     });
 
                     winHeight = document.body.clientHeight + frameHeight;
@@ -63,21 +65,45 @@ class App extends Component {
 
         browser.runtime.sendMessage({
             subject: "shim:selectReceiver"
-          , data: receiver
+          , data: {
+                receiver
+              , selectedMedia: this.state.selectedMedia
+            }
+        });
+    }
+
+    onSelectChange (ev) {
+        this.setState({
+            selectedMedia: ev.target.value
         });
     }
 
     render () {
+        const shareMedia =
+                this.state.selectedMedia === "tab"
+             || this.state.selectedMedia === "screen";
+
         return (
-            <ul className="receivers">
-                { this.state.receivers.map(receiver => {
-                    return (
-                       <Receiver receiver={receiver}
-                                 onCast={this.onCast.bind(this)}
-                                 isLoading={this.state.isLoading} />
-                    );
-                })}
-            </ul>
+            <div>
+                <div className="media-select">
+                    Cast
+                    <select value={this.state.selectedMedia} onChange={this.onSelectChange.bind(this)} className="media-select-dropdown">
+                        <option value="app" disabled={shareMedia}>this site's app</option>
+                        <option value="tab" disabled={!shareMedia}>Tab</option>
+                        <option value="screen" disabled={!shareMedia}>Screen</option>
+                    </select>
+                    to:
+                </div>
+                <ul className="receivers">
+                    { this.state.receivers.map(receiver => {
+                        return (
+                           <Receiver receiver={receiver}
+                                     onCast={this.onCast.bind(this)}
+                                     isLoading={this.state.isLoading} />
+                        );
+                    })}
+                </ul>
+            </div>
         );
     }
 }