Add current app to receiver popup

app/src/main.js

@@ -171,6 +171,7 @@ browser.on("serviceUp", service => {
           , port: service.port
           , id: service.txt.id
           , friendlyName: service.txt.fn
+          , currentApp: service.txt.rs
         }
     });
 });
@@ -179,10 +180,7 @@ browser.on("serviceDown", service => {
     transforms.encode.write({
         subject:"shim:serviceDown"
       , data: {
-            address: service.addresses[0]
+            id: service.txt.id
-          , port: service.port
-          , id: service.txt.id
-          , friendlyName: service.txt.fn
         }
     });
 });

ext/src/popup/index.jsx

@@ -160,7 +160,14 @@ class Receiver extends Component {
                     { this.props.receiver.friendlyName }
                 </div>
                 <div className="receiver-address">
-                    { `${this.props.receiver._address}:${this.props.receiver._port}` }
+                    { `${this.props.receiver.address}:${this.props.receiver.port}` }
+                </div>
+                <div className="receiver-status">
+                    { do {
+                        if (this.props.receiver.currentApp) {
+                            `- ${this.props.receiver.currentApp}`
+                        }
+                    }}
                 </div>
                 <button className="receiver-connect"
                         onClick={this.onClick.bind(this)}

ext/src/popup/styles/index.css

@@ -25,11 +25,11 @@ body {
     column-gap: 0.75em;
     display: grid;
     flex-direction: column;
-    grid-template-columns: 1fr min-content;
+    grid-template-columns: min-content 1fr min-content;
     grid-template-rows: min-content min-content 1fr;
     grid-template-areas:
-        "name connect"
+        "name name connect"
-        "address connect";
+        "address status connect";
     justify-content: center;
     margin: 0 1em;
     padding: 0.75em 0;
@@ -56,6 +56,9 @@ body {
     color: GrayText;
     grid-area: address;
 }
+.receiver-status {
+    grid-area: status;
+}
 .receiver-connect {
     align-self: center;
     grid-area: connect;

ext/src/popup/styles/mac.css

@@ -12,7 +12,8 @@ button:not([disabled]):hover:active {
     color: -moz-mac-buttonactivetext;
 }
 
-.receiver-address {
+.receiver-address,
+.receiver-status {
     font: message-box;
 }
 

ext/src/shim/cast/index.js

@@ -176,14 +176,11 @@ onMessage(message => {
          * property and call the page event function (__onGCastApiAvailable).
          */
         case "shim:serviceUp": {
-            const receiver = new Receiver(
+            const receiver = message.data;
-                    message.data.id
-                  , message.data.friendlyName);
 
-            receiver._address = message.data.address;
+            console.log(receiver);
-            receiver._port = message.data.port;
 
-            if (state.receiverList.find(r => r.label === receiver.label)) {
+            if (state.receiverList.find(r => r.id === receiver.id)) {
                 break;
             }
 
@@ -201,7 +198,7 @@ onMessage(message => {
          */
         case "shim:serviceDown": {
             state.receiverList = state.receiverList.filter(
-                    receiver => receiver.label !== message.data.id);
+                    receiver => receiver.id !== message.data.id);
 
             if (state.receiverList.length === 0) {
                 state.apiConfig.receiverListener(
@@ -213,7 +210,13 @@ onMessage(message => {
 
         case "shim:selectReceiver": {
             console.info("Caster (Debug): Selected receiver");
-            const selectedReceiver = message.data.receiver;
+
+            const selectedReceiver = new Receiver(
+                    message.data.receiver.id
+                  , message.data.receiver.friendlyName);
+
+            selectedReceiver._address = message.data.receiver.address;
+            selectedReceiver._port = message.data.receiver.port;
 
             const sessionConstructorArgs = [
                 state.sessionList.length             // sessionId