sam_oneal/fx_cast
1
0
Fork 0
mirror of https://github.com/hensm/fx_cast.git synced 2026-06-12 02:29:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use typed messaging for popup message port

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
ext/src/background/receiverSelector/PopupReceiverSelector.ts
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
}); });

127
ext/src/ui/popup/index.tsx
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,63 +151,61 @@ 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") } </div>
</div> <div className="select-wrapper">
<div className="select-wrapper"> <select onChange={ this.onSelectChange }
<select onChange={ this.onSelectChange } className="media-select__dropdown"
className="media-select__dropdown" disabled={ this.state.availableMediaTypes === 0 }>
disabled={ this.state.availableMediaTypes === 0 }>
<option value={ ReceiverSelectorMediaType.App }
<option value={ ReceiverSelectorMediaType.App } selected={ isAppMediaTypeSelected }
selected={ isAppMediaTypeSelected } disabled={ !isAppMediaTypeAvailable }>
disabled={ !isAppMediaTypeAvailable }> { (this.state.requestedAppId && knownApps[this.state.requestedAppId]?.name)
{ (this.state.requestedAppId && knownApps[this.state.requestedAppId]?.name) ?? isAppMediaTypeAvailable
?? isAppMediaTypeAvailable ? _("popupMediaTypeApp")
? _("popupMediaTypeApp") : _("popupMediaTypeAppNotFound") }
: _("popupMediaTypeAppNotFound") } </option>
</option>
{ this.state.mirroringEnabled &&
{ this.state.mirroringEnabled && <>
<> <option value={ ReceiverSelectorMediaType.Tab }
<option value={ ReceiverSelectorMediaType.Tab } selected={ isTabMediaTypeSelected }
selected={ isTabMediaTypeSelected } disabled={ !(this.state.availableMediaTypes
disabled={ !(this.state.availableMediaTypes & ReceiverSelectorMediaType.Tab) }>
& ReceiverSelectorMediaType.Tab) }> { _("popupMediaTypeTab") }
{ _("popupMediaTypeTab") } </option>
</option> <option value={ ReceiverSelectorMediaType.Screen }
<option value={ ReceiverSelectorMediaType.Screen } selected={ isScreenMediaTypeSelected }
selected={ isScreenMediaTypeSelected } disabled={ !(this.state.availableMediaTypes
disabled={ !(this.state.availableMediaTypes & ReceiverSelectorMediaType.Screen) }>
& ReceiverSelectorMediaType.Screen) }> { _("popupMediaTypeScreen") }
{ _("popupMediaTypeScreen") } </option>
</option> </> }
</> } </select>
</select> </div>
</div> <div className="media-select__label-to">
<div className="media-select__label-to"> { _("popupMediaSelectToLabel") }
{ _("popupMediaSelectToLabel") }
</div>
</div> </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> </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) { 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
}
}); });
} }