Push updates to open receiver selectors

ext/src/background/StatusManager.ts

@@ -80,11 +80,9 @@ export default new class StatusManager
                 const { data: receiver } = message;
                 this.receivers.set(receiver.id, receiver);
 
-                const serviceUpEvent = new CustomEvent("serviceUp", {
+                this.dispatchEvent(new CustomEvent("serviceUp", {
                     detail: receiver
-                });
-
-                this.dispatchEvent(serviceUpEvent);
+                }));
 
                 break;
             }
@@ -96,11 +94,9 @@ export default new class StatusManager
                     this.receivers.delete(id);
                 }
 
-                const serviceDownEvent = new CustomEvent("serviceDown", {
+                this.dispatchEvent(new CustomEvent("serviceDown", {
                     detail: { id }
-                });
-
-                this.dispatchEvent(serviceDownEvent);
+                }));
 
                 break;
             }
@@ -121,6 +117,10 @@ export default new class StatusManager
                       , ...status
                     }
                 });
+
+                this.dispatchEvent(new CustomEvent("statusUpdate", {
+                    detail: { id, status }
+                }));
             }
         }
     }

ext/src/background/receiverSelector/NativeReceiverSelector.ts

@@ -85,6 +85,8 @@ export default class NativeReceiverSelector extends ReceiverSelector {
         this._isOpen = true;
     }
 
+    public update (): void {}
+
     public close (): void {
         if (this.bridgePort) {
             this.bridgePort.postMessage({

ext/src/background/receiverSelector/PopupReceiverSelector.ts

@@ -115,6 +115,16 @@ export default class PopupReceiverSelector extends ReceiverSelector {
         }
     }
 
+    public update (receivers: Receiver[]) {
+        this.receivers = receivers;
+        this.messagePort?.postMessage({
+            subject: "popup:/populateReceiverList"
+          , data: {
+                receivers: this.receivers
+            }
+        });
+    }
+
     public async close (): Promise<void> {
         if (this.windowId) {
             await browser.windows.remove(this.windowId);

ext/src/background/receiverSelector/ReceiverSelector.ts

@@ -42,10 +42,13 @@ export default abstract class ReceiverSelector
 
     abstract readonly isOpen: boolean;
 
-    abstract open (receivers: Receiver[]
-        , defaultMediaType: ReceiverSelectorMediaType
-        , availableMediaTypes: ReceiverSelectorMediaType
-        , requestedAppId?: string): void;
+    abstract open (
+            receivers: Receiver[]
+          , defaultMediaType: ReceiverSelectorMediaType
+          , availableMediaTypes: ReceiverSelectorMediaType
+          , requestedAppId?: string): void;
+
+    abstract update (receivers: Receiver[]): void;
 
     abstract close (): void;
 }

ext/src/background/receiverSelector/ReceiverSelectorManager.ts

@@ -124,6 +124,15 @@ async function getSelection (
         sharedSelector = await createSelector();
 
 
+        function onReceiverChange () {
+            sharedSelector.update(Array.from(StatusManager.getReceivers()));
+        }
+
+        StatusManager.addEventListener("serviceUp", onReceiverChange);
+        StatusManager.addEventListener("serviceDown", onReceiverChange);
+        StatusManager.addEventListener("statusUpdate", onReceiverChange);
+
+
         let onSelected: any;
         let onCancelled: any;
         let onError: any;
@@ -151,6 +160,10 @@ async function getSelection (
             sharedSelector.removeEventListener("cancelled", onCancelled);
             sharedSelector.removeEventListener("error", onError);
             sharedSelector.removeEventListener("stop", onStop);
+
+            StatusManager.removeEventListener("serviceUp", onReceiverChange);
+            StatusManager.removeEventListener("serviceDown", onReceiverChange);
+            StatusManager.removeEventListener("statusUpdate", onReceiverChange);
         }
 
         sharedSelector.addEventListener("selected"

ext/src/lib/messaging.ts

@@ -25,8 +25,8 @@ export type Messages = [
         subject: "popup:/populateReceiverList"
       , data: {
             receivers: Receiver[]
-          , defaultMediaType: ReceiverSelectorMediaType
-          , availableMediaTypes: ReceiverSelectorMediaType
+          , defaultMediaType?: ReceiverSelectorMediaType
+          , availableMediaTypes?: ReceiverSelectorMediaType
         }
     }
   , {

ext/src/ui/popup/index.tsx

@@ -84,11 +84,14 @@ class PopupApp extends Component<{}, PopupAppState> {
 
                     this.defaultMediaType = defaultMediaType;
 
-                    this.setState({
-                        receivers: message.data.receivers
-                      , mediaType: this.defaultMediaType
-                      , availableMediaTypes: message.data.availableMediaTypes
-                    });
+                    this.setState({ receivers });
+
+                    if (availableMediaTypes && defaultMediaType) {
+                        this.setState({
+                            availableMediaTypes: availableMediaTypes
+                          , mediaType: defaultMediaType
+                        });
+                    }
 
                     break;
                 }