From 2010af373b5ef4efae4e5d3695adc703a4050a4a Mon Sep 17 00:00:00 2001
From: hensm <m@matt.tf>
Date: Sun, 25 Apr 2021 08:36:39 +0100
Subject: [PATCH] Use typed messaging for popup message port

---
 .../receiverSelector/PopupReceiverSelector.ts |   2 +-
 ext/src/ui/popup/index.tsx                    | 127 +++++++++---------
 2 files changed, 65 insertions(+), 64 deletions(-)

diff --git a/ext/src/background/receiverSelector/PopupReceiverSelector.ts b/ext/src/background/receiverSelector/PopupReceiverSelector.ts
index 0167754..d37a291 100644
--- a/ext/src/background/receiverSelector/PopupReceiverSelector.ts
+++ b/ext/src/background/receiverSelector/PopupReceiverSelector.ts
@@ -88,7 +88,7 @@ export default class PopupReceiverSelector extends ReceiverSelector {
 
         const popup = await browser.windows.create({
             url: POPUP_URL
-          , type: "detached_panel"
+          , type: "popup"
           , ...centeredProps
         });
 
diff --git a/ext/src/ui/popup/index.tsx b/ext/src/ui/popup/index.tsx
index d15fa72..b9c52a8 100755
--- a/ext/src/ui/popup/index.tsx
+++ b/ext/src/ui/popup/index.tsx
@@ -7,11 +7,12 @@ import ReactDOM from "react-dom";
 import knownApps from "../../lib/knownApps";
 import options from "../../lib/options";
 
-import { Message } from "../../messaging";
+import messaging, { Message, Port } from "../../messaging";
 import { getNextEllipsis } from "../../lib/utils";
 import { Receiver } from "../../types";
 
-import { ReceiverSelectorMediaType } from "../../background/receiverSelector";
+import { ReceiverSelectionActionType
+       , ReceiverSelectorMediaType } from "../../background/receiverSelector";
 
 
 const _ = browser.i18n.getMessage;
@@ -41,7 +42,7 @@ interface PopupAppState {
 }
 
 class PopupApp extends Component<{}, PopupAppState> {
-    private port?: browser.runtime.Port;
+    private port?: Port;
     private win?: browser.windows.Window;
     private defaultMediaType?: ReceiverSelectorMediaType;
 
@@ -67,9 +68,7 @@ class PopupApp extends Component<{}, PopupAppState> {
     }
 
     public async componentDidMount () {
-        this.port = browser.runtime.connect({
-            name: "popup"
-        });
+        this.port = messaging.connect({ name: "popup" });
 
         this.port.onMessage.addListener((message: Message) => {
             switch (message.subject) {
@@ -152,63 +151,61 @@ class PopupApp extends Component<{}, PopupAppState> {
         const isAppMediaTypeAvailable = !!(this.state.availableMediaTypes
                 & ReceiverSelectorMediaType.App);
 
-        return (
-            <div>
-                <div className="media-select">
-                    <div className="media-select__label-cast">
-                        { _("popupMediaSelectCastLabel") }
-                    </div>
-                    <div className="select-wrapper">
-                        <select onChange={ this.onSelectChange }
-                                className="media-select__dropdown"
-                                disabled={ this.state.availableMediaTypes === 0 }>
-
-                            <option value={ ReceiverSelectorMediaType.App }
-                                    selected={ isAppMediaTypeSelected }
-                                    disabled={ !isAppMediaTypeAvailable }>
-                                { (this.state.requestedAppId && knownApps[this.state.requestedAppId]?.name)
-                                            ?? isAppMediaTypeAvailable
-                                                ? _("popupMediaTypeApp")
-                                                : _("popupMediaTypeAppNotFound") }
-                            </option>
-
-                            { this.state.mirroringEnabled &&
-                                <>
-                                    <option value={ ReceiverSelectorMediaType.Tab }
-                                            selected={ isTabMediaTypeSelected }
-                                            disabled={ !(this.state.availableMediaTypes
-                                                    & ReceiverSelectorMediaType.Tab) }>
-                                        { _("popupMediaTypeTab") }
-                                    </option>
-                                    <option value={ ReceiverSelectorMediaType.Screen }
-                                            selected={ isScreenMediaTypeSelected }
-                                            disabled={ !(this.state.availableMediaTypes
-                                                    & ReceiverSelectorMediaType.Screen) }>
-                                        { _("popupMediaTypeScreen") }
-                                    </option>
-                                </> }
-                        </select>
-                    </div>
-                    <div className="media-select__label-to">
-                        { _("popupMediaSelectToLabel") }
-                    </div>
+        return <>
+            <div className="media-select">
+                <div className="media-select__label-cast">
+                    { _("popupMediaSelectCastLabel") }
+                </div>
+                <div className="select-wrapper">
+                    <select onChange={ this.onSelectChange }
+                            className="media-select__dropdown"
+                            disabled={ this.state.availableMediaTypes === 0 }>
+
+                        <option value={ ReceiverSelectorMediaType.App }
+                                selected={ isAppMediaTypeSelected }
+                                disabled={ !isAppMediaTypeAvailable }>
+                            { (this.state.requestedAppId && knownApps[this.state.requestedAppId]?.name)
+                                        ?? isAppMediaTypeAvailable
+                                            ? _("popupMediaTypeApp")
+                                            : _("popupMediaTypeAppNotFound") }
+                        </option>
+
+                        { this.state.mirroringEnabled &&
+                            <>
+                                <option value={ ReceiverSelectorMediaType.Tab }
+                                        selected={ isTabMediaTypeSelected }
+                                        disabled={ !(this.state.availableMediaTypes
+                                                & ReceiverSelectorMediaType.Tab) }>
+                                    { _("popupMediaTypeTab") }
+                                </option>
+                                <option value={ ReceiverSelectorMediaType.Screen }
+                                        selected={ isScreenMediaTypeSelected }
+                                        disabled={ !(this.state.availableMediaTypes
+                                                & ReceiverSelectorMediaType.Screen) }>
+                                    { _("popupMediaTypeScreen") }
+                                </option>
+                            </> }
+                    </select>
+                </div>
+                <div className="media-select__label-to">
+                    { _("popupMediaSelectToLabel") }
                 </div>
-                <ul className="receivers">
-                    { this.state.receivers && this.state.receivers.length
-                        ? this.state.receivers.map((receiver, i) => (
-                            <ReceiverEntry receiver={ receiver }
-                                           onCast={ this.onCast }
-                                           onStop={ this.onStop }
-                                           isLoading={ this.state.isLoading }
-                                           canCast={ isSelectedMediaTypeAvailable }
-                                           key={ i } /> ))
-                        : (
-                            <div className="receivers__not-found">
-                                { _("popupNoReceiversFound") }
-                            </div> )}
-                </ul>
             </div>
-        );
+            <ul className="receivers">
+                { this.state.receivers && this.state.receivers.length
+                    ? this.state.receivers.map((receiver, i) => (
+                        <ReceiverEntry receiver={ receiver }
+                                       onCast={ this.onCast }
+                                       onStop={ this.onStop }
+                                       isLoading={ this.state.isLoading }
+                                       canCast={ isSelectedMediaTypeAvailable }
+                                       key={ i } /> ))
+                    : (
+                        <div className="receivers__not-found">
+                            { _("popupNoReceiversFound") }
+                        </div> )}
+            </ul>
+        </>;
     }
 
     private onCast (receiver: Receiver) {
@@ -219,7 +216,8 @@ class PopupApp extends Component<{}, PopupAppState> {
         this.port?.postMessage({
             subject: "receiverSelector:selected"
           , data: {
-                receiver
+                actionType: ReceiverSelectionActionType.Cast
+              , receiver
               , mediaType: this.state.mediaType
               , filePath: this.state.filePath
             }
@@ -229,7 +227,10 @@ class PopupApp extends Component<{}, PopupAppState> {
     private onStop (receiver: Receiver) {
         this.port?.postMessage({
             subject: "receiverSelector:stop"
-          , data: { receiver }
+          , data: {
+                actionType: ReceiverSelectionActionType.Stop
+              , receiver
+            }
         });
     }