sam_oneal/fx_cast
1
0
Fork 0
mirror of https://github.com/hensm/fx_cast.git synced 2026-06-10 17:49:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove native receiver selector

Browse Source
This commit is contained in:
hensm
2021-05-26 17:39:12 +01:00
parent 6d80e258a9
commit ab00bcdd6a
30 changed files with 294 additions and 1704 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
ext/src/background/receiverSelector/NativeReceiverSelector.ts
View File

@@ -1,145 +0,0 @@
"use strict";
import bridge from "../../lib/bridge";
import knownApps from "../../lib/knownApps";
import logger from "../../lib/logger";
import { Message, Port } from "../../messaging";
import options from "../../lib/options";
import { TypedEventTarget } from "../../lib/TypedEventTarget";
import { getWindowCenteredProps } from "../../lib/utils";
import { ReceiverDevice } from "../../types";
import ReceiverSelector, {
ReceiverSelection
, ReceiverSelectorMediaType } from "./ReceiverSelector";
const _ = browser.i18n.getMessage;
// TODO: Figure out lifetime properly
export default class NativeReceiverSelector extends ReceiverSelector {
private bridgePort: (Port | null) = null;
private wasReceiverSelected = false;
#isOpen = false;
constructor() {
super();
this.onBridgePortMessage = this.onBridgePortMessage.bind(this);
}
get isOpen() {
return this.#isOpen;
}
public async open(
receivers: ReceiverDevice[]
, defaultMediaType: ReceiverSelectorMediaType
, availableMediaTypes: ReceiverSelectorMediaType
, appId?: string): Promise<void> {
this.bridgePort = await bridge.connect();
this.bridgePort.onMessage.addListener(this.onBridgePortMessage);
this.bridgePort.onDisconnect.addListener(() => {
this.bridgePort = null;
this.wasReceiverSelected = false;
this.#isOpen = false;
});
// Current window to base centered position on
const openerWindow = await browser.windows.getCurrent();
const centeredProps = getWindowCenteredProps(openerWindow, 350, 0);
const closeIfFocusLost = await options.get(
"receiverSelectorCloseIfFocusLost");
this.bridgePort.postMessage({
subject: "bridge:openReceiverSelector"
, data: JSON.stringify({
receivers
, defaultMediaType
, availableMediaTypes
, closeIfFocusLost
, windowPositionX: centeredProps.left
, windowPositionY: centeredProps.top
, i18n_extensionName: _("extensionName")
, i18n_castButtonTitle: _("popupCastButtonTitle")
, i18n_stopButtonTitle: _("popupStopButtonTitle")
, i18n_mediaTypeApp:
(appId && knownApps[appId]?.name)
?? _("popupMediaTypeApp")
, i18n_mediaTypeTab: _("popupMediaTypeTab")
, i18n_mediaTypeScreen: _("popupMediaTypeScreen")
, i18n_mediaTypeFile: _("popupMediaTypeFile")
, i18n_mediaSelectCastLabel: _("popupMediaSelectCastLabel")
, i18n_mediaSelectToLabel: _("popupMediaSelectToLabel")
, i18n_noReceiversFound: _("popupNoReceiversFound")
})
});
this.#isOpen = true;
}
public update(): void {
// TODO: Implement this
}
public close(): void {
if (this.bridgePort) {
this.bridgePort.postMessage({
subject: "bridge:closeReceiverSelector"
});
}
this.#isOpen = false;
}
private async onBridgePortMessage(message: Message) {
switch (message.subject) {
case "main:receiverSelector/selected": {
this.wasReceiverSelected = true;
this.dispatchEvent(new CustomEvent("selected", {
detail: message.data
}));
if (!(await options.get("receiverSelectorWaitForConnection"))) {
this.close();
}
break;
}
case "main:receiverSelector/cancelled": {
if (!this.wasReceiverSelected) {
this.dispatchEvent(new CustomEvent("cancelled"));
}
if (this.bridgePort) {
this.bridgePort.disconnect();
}
this.bridgePort = null;
this.wasReceiverSelected = false;
this.#isOpen = false;
break;
}
case "main:receiverSelector/stopped": {
this.dispatchEvent(new CustomEvent("stop", {
detail: message.data
}));
break;
}
case "main:receiverSelector/error": {
logger.error("Native receiver selector error", message.data);
this.dispatchEvent(new CustomEvent("error"));
break;
}
}
}
}

250
ext/src/background/receiverSelector/PopupReceiverSelector.ts
View File

@@ -1,250 +0,0 @@
"use strict";
import ReceiverSelector, {
ReceiverSelectorMediaType } from "./ReceiverSelector";
import logger from "../../lib/logger";
import messaging, { Port, Message } from "../../messaging";
import options from "../../lib/options";
import { TypedEventTarget } from "../../lib/TypedEventTarget";
import { getWindowCenteredProps, WindowCenteredProps } from "../../lib/utils";
import { ReceiverDevice } from "../../types";
const POPUP_URL = browser.runtime.getURL("ui/popup/index.html");
export default class PopupReceiverSelector extends ReceiverSelector {
private windowId?: number;
private messagePort?: Port;
private messagePortDisconnected?: boolean;
private receivers?: ReceiverDevice[];
private defaultMediaType?: ReceiverSelectorMediaType;
private availableMediaTypes?: ReceiverSelectorMediaType;
private wasReceiverSelected = false;
private appId?: string;
#isOpen = false;
constructor() {
super();
// Bind methods to pass to addListener
this.onConnect = this.onConnect.bind(this);
this.onPopupMessage = this.onPopupMessage.bind(this);
this.onWindowsRemoved = this.onWindowsRemoved.bind(this);
this.onWindowsFocusChanged = this.onWindowsFocusChanged.bind(this);
browser.windows.onRemoved.addListener(this.onWindowsRemoved);
/**
* Handle incoming message channel connection from popup
* window script.
*/
messaging.onConnect.addListener(this.onConnect);
}
get isOpen() {
return this.#isOpen;
}
public async open(
receivers: ReceiverDevice[]
, defaultMediaType: ReceiverSelectorMediaType
, availableMediaTypes: ReceiverSelectorMediaType
, appId?: string): Promise<void> {
this.appId = appId;
// If popup already exists, close it
if (this.windowId) {
await browser.windows.remove(this.windowId);
}
this.receivers = receivers;
this.defaultMediaType = defaultMediaType;
this.availableMediaTypes = availableMediaTypes;
let centeredProps: WindowCenteredProps = {
left: 100
, top: 100
, width: 350
, height: 200
};
try {
// Calculate centered size/position based on current window
centeredProps = getWindowCenteredProps(
await browser.windows.getCurrent()
, centeredProps.width, centeredProps.height);
} catch {
// Shouldn't ever hit this, but defaults are provided in case
}
const popup = await browser.windows.create({
url: POPUP_URL
, type: "popup"
, ...centeredProps
});
if (popup?.id === undefined) {
throw logger.error("Failed to create receiver selector popup.");
}
this.#isOpen = true;
this.windowId = popup.id;
// Size/position not set correctly on creation (bug?)
await browser.windows.update(this.windowId, {
...centeredProps
});
const closeIfFocusLost = await options.get(
"receiverSelectorCloseIfFocusLost");
if (closeIfFocusLost) {
// Add focus listener
browser.windows.onFocusChanged.addListener(
this.onWindowsFocusChanged);
}
}
public update(receivers: ReceiverDevice[]) {
this.receivers = receivers;
this.messagePort?.postMessage({
subject: "popup:update"
, data: {
receivers: this.receivers
}
});
}
public async close(): Promise<void> {
if (this.windowId) {
await browser.windows.remove(this.windowId);
}
this.#isOpen = false;
this.appId = undefined;
if (this.messagePort && !this.messagePortDisconnected) {
this.messagePort.disconnect();
}
}
private onConnect(port: Port) {
browser.history.deleteUrl({ url: POPUP_URL });
if (port.name !== "popup") {
return;
}
if (this.messagePort) {
this.messagePort.disconnect();
}
this.messagePort = port;
this.messagePort.onMessage.addListener(this.onPopupMessage);
this.messagePort.onDisconnect.addListener(() => {
this.messagePortDisconnected = true;
});
if (!this.receivers
|| !this.defaultMediaType
|| !this.availableMediaTypes) {
throw logger.error("Popup receiver data not found.");
}
this.messagePort.postMessage({
subject: "popup:init"
, data: { appId: this.appId }
});
this.messagePort.postMessage({
subject: "popup:update"
, data: {
receivers: this.receivers
, defaultMediaType: this.defaultMediaType
, availableMediaTypes: this.availableMediaTypes
}
});
messaging.onConnect.removeListener(this.onConnect);
}
/**
* Handles popup messages.
*/
private onPopupMessage(message: Message) {
switch (message.subject) {
case "receiverSelector:selected": {
this.wasReceiverSelected = true;
this.dispatchEvent(new CustomEvent("selected", {
detail: message.data
}));
break;
}
case "receiverSelector:stop": {
this.dispatchEvent(new CustomEvent("stop", {
detail: message.data
}));
break;
}
}
}
/**
* Handles cancellation state where the popup window is closed
* before a receiver is selected.
*/
private onWindowsRemoved(windowId: number) {
// Only care about popup window
if (windowId !== this.windowId) {
return;
}
browser.windows.onRemoved.removeListener(this.onWindowsRemoved);
browser.windows.onFocusChanged.removeListener(
this.onWindowsFocusChanged);
if (!this.wasReceiverSelected) {
this.dispatchEvent(new CustomEvent("cancelled"));
}
// Cleanup
this.windowId = undefined;
this.messagePort = undefined;
this.receivers = undefined;
this.defaultMediaType = undefined;
this.availableMediaTypes = undefined;
this.wasReceiverSelected = false;
}
/**
* Closes popup window if another browser window is brought
* into focus. Doesn't apply if no window is focused
* `WINDOW_ID_NONE` or if the popup window is re-focused.
*/
private onWindowsFocusChanged(windowId: number) {
if (windowId !== browser.windows.WINDOW_ID_NONE
&& windowId !== this.windowId) {
// Only run once
browser.windows.onFocusChanged.removeListener(
this.onWindowsFocusChanged);
if (this.windowId) {
browser.windows.remove(this.windowId);
}
}
}
}

264
ext/src/background/receiverSelector/ReceiverSelector.ts
View File

@@ -1,33 +1,20 @@
"use strict";
import logger from "../../lib/logger";
import messaging, { Port, Message } from "../../messaging";
import options from "../../lib/options";
import { TypedEventTarget } from "../../lib/TypedEventTarget";
import { getWindowCenteredProps, WindowCenteredProps } from "../../lib/utils";
import { ReceiverDevice } from "../../types";
import { ReceiverSelectionCast
, ReceiverSelectionStop
, ReceiverSelectorMediaType } from "./index";
export enum ReceiverSelectorMediaType {
App = 1
, Tab = 2
, Screen = 4
, File = 8
}
export enum ReceiverSelectionActionType {
Cast = 1
, Stop = 2
}
export interface ReceiverSelectionCast {
actionType: ReceiverSelectionActionType.Cast;
receiver: ReceiverDevice;
mediaType: ReceiverSelectorMediaType;
filePath?: string;
}
export interface ReceiverSelectionStop {
actionType: ReceiverSelectionActionType.Stop;
receiver: ReceiverDevice;
}
export type ReceiverSelection = ReceiverSelectionCast | ReceiverSelectionStop;
const POPUP_URL = browser.runtime.getURL("ui/popup/index.html");
interface ReceiverSelectorEvents {
@@ -37,18 +24,239 @@ interface ReceiverSelectorEvents {
"stop": ReceiverSelectionStop;
}
export default abstract class ReceiverSelector
export default class ReceiverSelector
extends TypedEventTarget<ReceiverSelectorEvents> {
abstract readonly isOpen: boolean;
private windowId?: number;
abstract open (
private messagePort?: Port;
private messagePortDisconnected?: boolean;
private receivers?: ReceiverDevice[];
private defaultMediaType?: ReceiverSelectorMediaType;
private availableMediaTypes?: ReceiverSelectorMediaType;
private wasReceiverSelected = false;
private appId?: string;
#isOpen = false;
constructor() {
super();
// Bind methods to pass to addListener
this.onConnect = this.onConnect.bind(this);
this.onPopupMessage = this.onPopupMessage.bind(this);
this.onWindowsRemoved = this.onWindowsRemoved.bind(this);
this.onWindowsFocusChanged = this.onWindowsFocusChanged.bind(this);
browser.windows.onRemoved.addListener(this.onWindowsRemoved);
/**
* Handle incoming message channel connection from popup
* window script.
*/
messaging.onConnect.addListener(this.onConnect);
}
get isOpen() {
return this.#isOpen;
}
public async open(
receivers: ReceiverDevice[]
, defaultMediaType: ReceiverSelectorMediaType
, availableMediaTypes: ReceiverSelectorMediaType
, appId?: string): void;
, appId?: string): Promise<void> {
abstract update (receivers: ReceiverDevice[]): void;
this.appId = appId;
abstract close (): void;
// If popup already exists, close it
if (this.windowId) {
await browser.windows.remove(this.windowId);
}
this.receivers = receivers;
this.defaultMediaType = defaultMediaType;
this.availableMediaTypes = availableMediaTypes;
let centeredProps: WindowCenteredProps = {
left: 100
, top: 100
, width: 350
, height: 200
};
try {
// Calculate centered size/position based on current window
centeredProps = getWindowCenteredProps(
await browser.windows.getCurrent()
, centeredProps.width, centeredProps.height);
} catch {
// Shouldn't ever hit this, but defaults are provided in case
}
const popup = await browser.windows.create({
url: POPUP_URL
, type: "popup"
, ...centeredProps
});
if (popup?.id === undefined) {
throw logger.error("Failed to create receiver selector popup.");
}
this.#isOpen = true;
this.windowId = popup.id;
// Size/position not set correctly on creation (bug?)
await browser.windows.update(this.windowId, {
...centeredProps
});
const closeIfFocusLost = await options.get(
"receiverSelectorCloseIfFocusLost");
if (closeIfFocusLost) {
// Add focus listener
browser.windows.onFocusChanged.addListener(
this.onWindowsFocusChanged);
}
}
public update(receivers: ReceiverDevice[]) {
this.receivers = receivers;
this.messagePort?.postMessage({
subject: "popup:update"
, data: {
receivers: this.receivers
}
});
}
public async close(): Promise<void> {
if (this.windowId) {
await browser.windows.remove(this.windowId);
}
this.#isOpen = false;
this.appId = undefined;
if (this.messagePort && !this.messagePortDisconnected) {
this.messagePort.disconnect();
}
}
private onConnect(port: Port) {
browser.history.deleteUrl({ url: POPUP_URL });
if (port.name !== "popup") {
return;
}
if (this.messagePort) {
this.messagePort.disconnect();
}
this.messagePort = port;
this.messagePort.onMessage.addListener(this.onPopupMessage);
this.messagePort.onDisconnect.addListener(() => {
this.messagePortDisconnected = true;
});
if (!this.receivers
|| !this.defaultMediaType
|| !this.availableMediaTypes) {
throw logger.error("Popup receiver data not found.");
}
this.messagePort.postMessage({
subject: "popup:init"
, data: { appId: this.appId }
});
this.messagePort.postMessage({
subject: "popup:update"
, data: {
receivers: this.receivers
, defaultMediaType: this.defaultMediaType
, availableMediaTypes: this.availableMediaTypes
}
});
messaging.onConnect.removeListener(this.onConnect);
}
/**
* Handles popup messages.
*/
private onPopupMessage(message: Message) {
switch (message.subject) {
case "receiverSelector:selected": {
this.wasReceiverSelected = true;
this.dispatchEvent(new CustomEvent("selected", {
detail: message.data
}));
break;
}
case "receiverSelector:stop": {
this.dispatchEvent(new CustomEvent("stop", {
detail: message.data
}));
break;
}
}
}
/**
* Handles cancellation state where the popup window is closed
* before a receiver is selected.
*/
private onWindowsRemoved(windowId: number) {
// Only care about popup window
if (windowId !== this.windowId) {
return;
}
browser.windows.onRemoved.removeListener(this.onWindowsRemoved);
browser.windows.onFocusChanged.removeListener(
this.onWindowsFocusChanged);
if (!this.wasReceiverSelected) {
this.dispatchEvent(new CustomEvent("cancelled"));
}
// Cleanup
this.windowId = undefined;
this.messagePort = undefined;
this.receivers = undefined;
this.defaultMediaType = undefined;
this.availableMediaTypes = undefined;
this.wasReceiverSelected = false;
}
/**
* Closes popup window if another browser window is brought
* into focus. Doesn't apply if no window is focused
* `WINDOW_ID_NONE` or if the popup window is re-focused.
*/
private onWindowsFocusChanged(windowId: number) {
if (windowId !== browser.windows.WINDOW_ID_NONE
&& windowId !== this.windowId) {
// Only run once
browser.windows.onFocusChanged.removeListener(
this.onWindowsFocusChanged);
if (this.windowId) {
browser.windows.remove(this.windowId);
}
}
}
}

17
ext/src/background/receiverSelector/ReceiverSelectorManager.ts
View File

@@ -8,26 +8,15 @@ import receiverDevices from "../receiverDevices";
import { getMediaTypesForPageUrl } from "../../lib/utils";
import { ReceiverSelector
, ReceiverSelectorType } from "./";
import { ReceiverSelection
, ReceiverSelectionActionType
, ReceiverSelectorMediaType } from "./ReceiverSelector";
, ReceiverSelectorMediaType } from "./index";
import NativeReceiverSelector from "./NativeReceiverSelector";
import PopupReceiverSelector from "./PopupReceiverSelector";
import ReceiverSelector from "./ReceiverSelector";
async function createSelector() {
const type = await options.get("receiverSelectorType");
const platformInfo = await browser.runtime.getPlatformInfo();
if (platformInfo.os === "mac"
&& type === ReceiverSelectorType.Native) {
return new NativeReceiverSelector();
}
return new PopupReceiverSelector();
return new ReceiverSelector();
}

35
ext/src/background/receiverSelector/index.ts
View File

@@ -1,18 +1,31 @@
"use strict";
import NativeReceiverSelector from "./NativeReceiverSelector";
import PopupReceiverSelector from "./PopupReceiverSelector";
export type ReceiverSelector =
NativeReceiverSelector
| PopupReceiverSelector;
export enum ReceiverSelectorType {
Popup
, Native
}
export { ReceiverSelection
, ReceiverSelectionActionType
, ReceiverSelectorMediaType } from "./ReceiverSelector";
export enum ReceiverSelectorMediaType {
App = 1
, Tab = 2
, Screen = 4
, File = 8
}
export enum ReceiverSelectionActionType {
Cast = 1
, Stop = 2
}
export interface ReceiverSelectionCast {
actionType: ReceiverSelectionActionType.Cast;
receiver: ReceiverDevice;
mediaType: ReceiverSelectorMediaType;
filePath?: string;
}
export interface ReceiverSelectionStop {
actionType: ReceiverSelectionActionType.Stop;
receiver: ReceiverDevice;
}
export type ReceiverSelection = ReceiverSelectionCast | ReceiverSelectionStop;

1
ext/src/defaultOptions.ts
View File

@@ -17,7 +17,6 @@ export default {
, localMediaServerPort: 9555
, mirroringEnabled: false
, mirroringAppId: MIRRORING_APP_ID
, receiverSelectorType: ReceiverSelectorType.Popup
, receiverSelectorCloseIfFocusLost: true
, receiverSelectorWaitForConnection: true
, userAgentWhitelistEnabled: true

1
ext/src/lib/options.ts
View File

@@ -26,7 +26,6 @@ export interface Options {
localMediaServerPort: number;
mirroringEnabled: boolean;
mirroringAppId: string;
receiverSelectorType: ReceiverSelectorType;
receiverSelectorCloseIfFocusLost: boolean;
receiverSelectorWaitForConnection: boolean;
userAgentWhitelistEnabled: boolean;

3
ext/src/messaging.ts
View File

@@ -6,8 +6,7 @@ import { BridgeInfo } from "./lib/bridge";
import { ReceiverSelectorMediaType } from "./background/receiverSelector";
import { ReceiverSelection
, ReceiverSelectionCast
, ReceiverSelectionStop }
from "./background/receiverSelector/ReceiverSelector";
, ReceiverSelectionStop } from "./background/receiverSelector";
import { CastSessionCreated
, CastSessionUpdated

15
ext/src/ui/options/index.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../photon-colors.css">
<link rel="stylesheet" href="../photon-widgets.css">
<link rel="stylesheet" href="styles/index.css">
<script src="index.js" defer></script>
</head>
<body>
<div id="root"></div>
</body>
</html>

39
ext/src/ui/options/index.tsx
View File

@@ -14,8 +14,6 @@ import logger from "../../lib/logger";
import options, { Options } from "../../lib/options";
import { REMOTE_MATCH_PATTERN_REGEX } from "../../lib/utils";
import { ReceiverSelectorType } from "../../background/receiverSelector";
const _ = browser.i18n.getMessage;
@@ -86,9 +84,6 @@ class OptionsApp extends Component<
this.handleInputChange = this.handleInputChange.bind(this);
this.handleWhitelistChange = this.handleWhitelistChange.bind(this);
this.handleReceiverSelectorTypeChange =
this.handleReceiverSelectorTypeChange.bind(this);
this.getWhitelistItemPatternError =
this.getWhitelistItemPatternError.bind(this);
}
@@ -287,27 +282,6 @@ class OptionsApp extends Component<
{ _("optionsReceiverSelectorCategoryDescription") }
</p>
{ this.state.platform === "mac" &&
<label className="option">
<div className="option__label">
{ _("optionsReceiverSelectorType") }
</div>
<div className="option__control">
<div className="select-wrapper">
<select name="receiverSelectorType"
value={ this.state.options?.receiverSelectorType }
onChange={ this.handleReceiverSelectorTypeChange }>
<option value={ ReceiverSelectorType.Popup }>
{ _("optionsReceiverSelectorTypeBrowser") }
</option>
<option value={ ReceiverSelectorType.Native }>
{ _("optionsReceiverSelectorTypeNative") }
</option>
</select>
</div>
</div>
</label> }
<label className="option option--inline">
<div className="option__control">
<input name="receiverSelectorWaitForConnection"
@@ -463,19 +437,6 @@ class OptionsApp extends Component<
});
}
private handleReceiverSelectorTypeChange(
ev: React.ChangeEvent<HTMLSelectElement>) {
this.setState(currentState => {
if (currentState.options) {
currentState.options[ev.target.name] =
parseInt(ev.target.value);
}
return currentState;
});
}
private handleWhitelistChange(whitelist: string[]) {
this.setState(currentState => {
if (currentState.options) {

15
ext/src/ui/popup/index.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../photon-colors.css">
<link rel="stylesheet" href="../photon-widgets.css">
<link rel="stylesheet" href="styles/index.css">
<script src="index.js" defer></script>
</head>
<body>
<div id="root"></div>
</body>
</html>