Use typed messaging for popup message port

This commit is contained in:
hensm
2021-04-25 08:36:39 +01:00
parent 2fa49298ee
commit 2010af373b
2 changed files with 65 additions and 64 deletions

View File

@@ -88,7 +88,7 @@ export default class PopupReceiverSelector extends ReceiverSelector {
const popup = await browser.windows.create({ const popup = await browser.windows.create({
url: POPUP_URL url: POPUP_URL
, type: "detached_panel" , type: "popup"
, ...centeredProps , ...centeredProps
}); });

View File

@@ -7,11 +7,12 @@ import ReactDOM from "react-dom";
import knownApps from "../../lib/knownApps"; import knownApps from "../../lib/knownApps";
import options from "../../lib/options"; import options from "../../lib/options";
import { Message } from "../../messaging"; import messaging, { Message, Port } from "../../messaging";
import { getNextEllipsis } from "../../lib/utils"; import { getNextEllipsis } from "../../lib/utils";
import { Receiver } from "../../types"; import { Receiver } from "../../types";
import { ReceiverSelectorMediaType } from "../../background/receiverSelector"; import { ReceiverSelectionActionType
, ReceiverSelectorMediaType } from "../../background/receiverSelector";
const _ = browser.i18n.getMessage; const _ = browser.i18n.getMessage;
@@ -41,7 +42,7 @@ interface PopupAppState {
} }
class PopupApp extends Component<{}, PopupAppState> { class PopupApp extends Component<{}, PopupAppState> {
private port?: browser.runtime.Port; private port?: Port;
private win?: browser.windows.Window; private win?: browser.windows.Window;
private defaultMediaType?: ReceiverSelectorMediaType; private defaultMediaType?: ReceiverSelectorMediaType;
@@ -67,9 +68,7 @@ class PopupApp extends Component<{}, PopupAppState> {
} }
public async componentDidMount () { public async componentDidMount () {
this.port = browser.runtime.connect({ this.port = messaging.connect({ name: "popup" });
name: "popup"
});
this.port.onMessage.addListener((message: Message) => { this.port.onMessage.addListener((message: Message) => {
switch (message.subject) { switch (message.subject) {
@@ -152,8 +151,7 @@ class PopupApp extends Component<{}, PopupAppState> {
const isAppMediaTypeAvailable = !!(this.state.availableMediaTypes const isAppMediaTypeAvailable = !!(this.state.availableMediaTypes
& ReceiverSelectorMediaType.App); & ReceiverSelectorMediaType.App);
return ( return <>
<div>
<div className="media-select"> <div className="media-select">
<div className="media-select__label-cast"> <div className="media-select__label-cast">
{ _("popupMediaSelectCastLabel") } { _("popupMediaSelectCastLabel") }
@@ -207,8 +205,7 @@ class PopupApp extends Component<{}, PopupAppState> {
{ _("popupNoReceiversFound") } { _("popupNoReceiversFound") }
</div> )} </div> )}
</ul> </ul>
</div> </>;
);
} }
private onCast (receiver: Receiver) { private onCast (receiver: Receiver) {
@@ -219,7 +216,8 @@ class PopupApp extends Component<{}, PopupAppState> {
this.port?.postMessage({ this.port?.postMessage({
subject: "receiverSelector:selected" subject: "receiverSelector:selected"
, data: { , data: {
receiver actionType: ReceiverSelectionActionType.Cast
, receiver
, mediaType: this.state.mediaType , mediaType: this.state.mediaType
, filePath: this.state.filePath , filePath: this.state.filePath
} }
@@ -229,7 +227,10 @@ class PopupApp extends Component<{}, PopupAppState> {
private onStop (receiver: Receiver) { private onStop (receiver: Receiver) {
this.port?.postMessage({ this.port?.postMessage({
subject: "receiverSelector:stop" subject: "receiverSelector:stop"
, data: { receiver } , data: {
actionType: ReceiverSelectionActionType.Stop
, receiver
}
}); });
} }