Add initial status bridge implementation

ext/src/main.ts

@@ -7,7 +7,11 @@ import messageRouter from "./lib/messageRouter";
 import { getChromeUserAgent } from "./lib/userAgents";
 import { getWindowCenteredProps } from "./lib/utils";
 
-import { Message } from "./types";
+import { Message, Receiver } from "./types";
+
+import { ReceiverStatusMessage
+       , ServiceDownMessage
+       , ServiceUpMessage } from "./messageTypes";
 
 import semver from "semver";
 
@@ -540,13 +544,45 @@ browser.runtime.onConnect.addListener(port => {
 
 
 const statusBridge = browser.runtime.connectNative(APPLICATION_NAME);
-const receiverStatusMap = new Map<string, any>();
+const statusBridgeReceivers = new Map<string, Receiver>();
 
 statusBridge.onMessage.addListener((message: Message)  => {
     switch (message.subject) {
-        case "main:/receiverStatusUpdate": {
-            const { id, status } = message.data;
-            receiverStatusMap.set(id, status);
+
+        case "shim:/serviceUp": {
+            const serviceUpMessage = message as ServiceUpMessage;
+            const receiver = serviceUpMessage.data;
+
+            statusBridgeReceivers.set(receiver.id, receiver);
+
+            break;
+        }
+
+        case "shim:/serviceDown": {
+            const serviceDownMessage = (message as ServiceDownMessage);
+            const { id } = serviceDownMessage.data;
+
+            if (statusBridgeReceivers.has(id)) {
+                statusBridgeReceivers.delete(id);
+            }
+
+            break;
+        }
+
+        case "receiverStatus": {
+            const receiverStatusMessage = message as ReceiverStatusMessage;
+            const { id, status } = receiverStatusMessage.data;
+
+            const receiver = statusBridgeReceivers.get(id);
+
+            // Merge new status with old status
+            statusBridgeReceivers.set(id, {
+                ...receiver
+              , status: {
+                    ...receiver.status
+                  , ...status
+                }
+            });
 
             break;
         }

ext/src/messageTypes.ts

@@ -0,0 +1,25 @@
+"use strict";
+
+import { Message, Receiver, ReceiverStatus } from "./types";
+
+
+export interface ReceiverStatusMessage extends Message {
+    subject: "receiverStatus";
+    data: {
+        id: string;
+        status: ReceiverStatus;
+    }
+}
+
+export interface ServiceDownMessage extends Message {
+    subject: "shim:/serviceDown";
+    data: {
+        id: string;
+    };
+}
+
+export interface ServiceUpMessage extends Message {
+    subject: "shim:/serviceUp";
+    data: Receiver;
+}
+

ext/src/shim/cast/index.ts

@@ -235,7 +235,7 @@ onMessage(message => {
                     message.data.receiver.id
                   , message.data.receiver.friendlyName);
 
-            (selectedReceiver as any)._address = message.data.receiver.address;
+            (selectedReceiver as any)._address = message.data.receiver.host;
             (selectedReceiver as any)._port = message.data.receiver.port;
 
             function createSession () {

ext/src/types.ts

@@ -7,11 +7,24 @@ export interface Message {
 }
 
 export interface Receiver {
-    address: string;
-    currentApp: string;
+    host: string;
     friendlyName: string;
     id: string;
     port: number;
+    status?: ReceiverStatus;
+}
+
+export interface ReceiverStatus {
+    application: {
+        displayName: string;
+        isIdleScreen: string;
+        statusText: string;
+    };
+    id: string;
+    volume: {
+        level: number;
+        muted: boolean
+    };
 }
 
 export interface DownloadDelta {

ext/src/ui/popup/index.tsx

@@ -5,7 +5,7 @@ import React, { Component } from "react";
 import ReactDOM from "react-dom";
 
 import { getNextEllipsis } from "../../lib/utils";
-import * as types from "../../types";
+import { Message, Receiver } from "../../types";
 
 const _ = browser.i18n.getMessage;
 
@@ -29,7 +29,7 @@ let frameWidth: number;
 
 
 interface PopupAppState {
-    receivers: types.Receiver[];
+    receivers: Receiver[];
     selectedMedia: string;
     isLoading: boolean;
 }
@@ -63,7 +63,7 @@ class PopupApp extends Component<{}, PopupAppState> {
             name: "popup"
         });
 
-        backgroundPort.onMessage.addListener((message: types.Message) => {
+        backgroundPort.onMessage.addListener((message: Message) => {
             if (message.subject === "popup:/assignShim") {
                 this.setPort(message.data.tabId
                            , message.data.frameId);
@@ -92,10 +92,10 @@ class PopupApp extends Component<{}, PopupAppState> {
                 <ul className="receivers">
                     { this.state.receivers.map((receiver, i) => {
                         return (
-                           <Receiver receiver={ receiver }
-                                     onCast={ this.onCast }
-                                     isLoading={ this.state.isLoading }
-                                     key={ i }/>
+                           <ReceiverEntry receiver={ receiver }
+                                          onCast={ this.onCast }
+                                          isLoading={ this.state.isLoading }
+                                          key={ i }/>
                         );
                     })}
                 </ul>
@@ -117,7 +117,7 @@ class PopupApp extends Component<{}, PopupAppState> {
             subject: "shim:/popupReady"
         });
 
-        this.port.onMessage.addListener((message: types.Message) => {
+        this.port.onMessage.addListener((message: Message) => {
             switch (message.subject) {
                 case "popup:/populateReceiverList": {
                     this.setState({
@@ -145,7 +145,7 @@ class PopupApp extends Component<{}, PopupAppState> {
         });
     }
 
-    private onCast (receiver: types.Receiver) {
+    private onCast (receiver: Receiver) {
         this.setState({
             isLoading: true
         });
@@ -168,19 +168,19 @@ class PopupApp extends Component<{}, PopupAppState> {
 }
 
 
-interface ReceiverProps {
-    receiver: types.Receiver;
+interface ReceiverEntryProps {
+    receiver: Receiver;
     isLoading: boolean;
-    onCast (receiver: types.Receiver): void;
+    onCast (receiver: Receiver): void;
 }
 
-interface ReceiverState {
+interface ReceiverEntryState {
     ellipsis: string;
     isLoading: boolean;
 }
 
-class Receiver extends Component<ReceiverProps, ReceiverState> {
-    constructor (props: ReceiverProps) {
+class ReceiverEntry extends Component<ReceiverEntryProps, ReceiverEntryState> {
+    constructor (props: ReceiverEntryProps) {
         super(props);
 
         this.state = {
@@ -198,12 +198,9 @@ class Receiver extends Component<ReceiverProps, ReceiverState> {
                     { this.props.receiver.friendlyName }
                 </div>
                 <div className="receiver-address">
-                    { `${this.props.receiver.address}:${this.props.receiver.port}` }
-                </div>
-                <div className="receiver-status">
-                    { this.props.receiver.currentApp &&
-                        `- ${this.props.receiver.currentApp}` }
+                    { `${this.props.receiver.host}:${this.props.receiver.port}` }
                 </div>
+                <div className="receiver-status"></div>
                 <button className="receiver-connect"
                         onClick={ this.handleCast }
                         disabled={this.props.isLoading}>