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

Add auto-expansion of media controls for devices with connected sessions

Browse Source
This commit is contained in:
hensm
2022-09-02 16:11:23 +01:00
parent 1cb4f2eecb
commit d3d83eb1c3
8 changed files with 93 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ext/src/_locales/en/messages.json
View File

@@ -388,6 +388,10 @@
"message": "Close after losing focus",
"description": "Receiver selector close if focus lost option checkbox label."
},
"optionsReceiverSelectorExpandActive": {
"message": "Expand media controls for connected devices",
"description": "Receiver selector expand active checkbox label."
},
"optionsSiteWhitelistCategoryName": {
"message": "Site whitelist",

20
ext/src/background/ReceiverSelector.ts
View File

@@ -14,7 +14,7 @@ import type {
const POPUP_URL = browser.runtime.getURL("ui/popup/index.html");
export interface ReceiverSelection {
receiverDevice: ReceiverDevice;
device: ReceiverDevice;
mediaType: ReceiverSelectorMediaType;
}
@@ -49,7 +49,7 @@ export default class ReceiverSelector extends TypedEventTarget<ReceiverSelectorE
private messagePort?: Port;
private messagePortDisconnected?: boolean;
private receiverDevices?: ReceiverDevice[];
private devices?: ReceiverDevice[];
private defaultMediaType?: ReceiverSelectorMediaType;
private availableMediaTypes?: ReceiverSelectorMediaType;
@@ -86,7 +86,7 @@ export default class ReceiverSelector extends TypedEventTarget<ReceiverSelectorE
* Creates and opens a receiver selector window.
*/
public async open(opts: {
receiverDevices: ReceiverDevice[];
devices: ReceiverDevice[];
defaultMediaType: ReceiverSelectorMediaType;
availableMediaTypes: ReceiverSelectorMediaType;
appInfo?: ReceiverSelectorAppInfo;
@@ -100,7 +100,7 @@ export default class ReceiverSelector extends TypedEventTarget<ReceiverSelectorE
await browser.windows.remove(this.windowId);
}
this.receiverDevices = opts.receiverDevices;
this.devices = opts.devices;
this.defaultMediaType = opts.defaultMediaType;
this.availableMediaTypes = opts.availableMediaTypes;
@@ -149,13 +149,11 @@ export default class ReceiverSelector extends TypedEventTarget<ReceiverSelectorE
}
/** Updates receiver devices displayed in the receiver selector. */
public update(receiverDevices: ReceiverDevice[]) {
this.receiverDevices = receiverDevices;
public update(devices: ReceiverDevice[], connectedSessionIds: string[]) {
this.devices = devices;
this.messagePort?.postMessage({
subject: "popup:update",
data: {
receiverDevices: this.receiverDevices
}
data: { devices, connectedSessionIds }
});
}
@@ -191,7 +189,7 @@ export default class ReceiverSelector extends TypedEventTarget<ReceiverSelectorE
});
if (
this.receiverDevices === undefined ||
this.devices === undefined ||
this.defaultMediaType === undefined ||
this.availableMediaTypes === undefined
) {
@@ -214,7 +212,7 @@ export default class ReceiverSelector extends TypedEventTarget<ReceiverSelectorE
this.messagePort.postMessage({
subject: "popup:update",
data: {
receiverDevices: this.receiverDevices,
devices: this.devices,
defaultMediaType: this.defaultMediaType,
availableMediaTypes: this.availableMediaTypes
}

43
ext/src/background/castManager.ts
View File

@@ -108,10 +108,10 @@ function isSameContext(ctx1?: ContentContext, ctx2?: ContentContext) {
let baseConfig: BaseConfig;
let receiverSelector: Optional<ReceiverSelector>;
const activeInstances = new Set<CastInstance>();
/** Keeps track of cast API instances and provides bridge messaging. */
const castManager = new (class {
private activeInstances = new Set<CastInstance>();
async init() {
// Handle incoming instance connections
messaging.onConnect.addListener(async port => {
@@ -127,7 +127,7 @@ const castManager = new (class {
const updateReceiverAvailability = () => {
const isAvailable = deviceManager.getDevices().length > 0;
for (const instance of this.activeInstances) {
for (const instance of activeInstances) {
instance.contentPort.postMessage({
subject: "cast:receiverAvailabilityUpdated",
data: { isAvailable }
@@ -146,7 +146,7 @@ const castManager = new (class {
* Finds a cast instance at the given tab (and optionally frame) ID.
*/
getInstanceAt(tabId: number, frameId?: number) {
for (const instance of this.activeInstances) {
for (const instance of activeInstances) {
if (instance.contentContext?.tabId === tabId) {
// If frame ID doesn't match go to next instance
if (frameId && instance.contentContext.frameId !== frameId) {
@@ -159,7 +159,7 @@ const castManager = new (class {
}
getInstanceByDeviceId(deviceId: string) {
for (const instance of this.activeInstances) {
for (const instance of activeInstances) {
if (instance.session?.deviceId === deviceId) return instance;
}
}
@@ -177,7 +177,7 @@ const castManager = new (class {
? this.createInstanceFromBackground(port, contentContext)
: this.createInstanceFromContent(port, isTrusted));
this.activeInstances.add(instance);
activeInstances.add(instance);
instance.contentPort.postMessage({
subject: "cast:instanceCreated",
@@ -201,10 +201,10 @@ const castManager = new (class {
// Ensure only one instance per context
if (contentContext) {
for (const instance of this.activeInstances) {
for (const instance of activeInstances) {
if (isSameContext(instance.contentContext, contentContext)) {
instance.bridgePort.disconnect();
this.activeInstances.delete(instance);
activeInstances.delete(instance);
break;
}
}
@@ -212,7 +212,7 @@ const castManager = new (class {
instance.bridgePort.onDisconnect.addListener(() => {
contentPort.close();
this.activeInstances.delete(instance);
activeInstances.delete(instance);
});
// bridge -> cast instance
@@ -246,7 +246,7 @@ const castManager = new (class {
}
// Ensure only one instance per context
for (const instance of this.activeInstances) {
for (const instance of activeInstances) {
if (
isSameContext(
instance.contentContext,
@@ -277,7 +277,7 @@ const castManager = new (class {
instance.bridgePort.disconnect();
contentPort.disconnect();
this.activeInstances.delete(instance);
activeInstances.delete(instance);
};
instance.bridgePort.onDisconnect.addListener(onDisconnect);
@@ -433,7 +433,7 @@ const castManager = new (class {
subject: "bridge:createCastSession",
data: {
appId: sessionRequest.appId,
receiverDevice: selection.receiverDevice
receiverDevice: selection.device
}
});
} catch (err) {
@@ -498,7 +498,7 @@ const castManager = new (class {
instance.contentPort.postMessage({
subject: "cast:receiverAction",
data: {
receiver: createReceiver(selection.receiverDevice),
receiver: createReceiver(selection.device),
action: ReceiverAction.CAST
}
});
@@ -507,7 +507,7 @@ const castManager = new (class {
subject: "bridge:createCastSession",
data: {
appId: instance.apiConfig?.sessionRequest.appId,
receiverDevice: selection.receiverDevice
receiverDevice: selection.device
}
});
@@ -519,7 +519,7 @@ const castManager = new (class {
await browser.tabs.executeScript(contentContext.tabId, {
code: stringify`
window.mirroringMediaType = ${selection.mediaType};
window.receiverDevice = ${selection.receiverDevice};
window.receiverDevice = ${selection.device};
window.contextTabId = ${contentContext.tabId};
`,
frameId: contentContext.frameId
@@ -695,7 +695,7 @@ async function getReceiverSelection(selectionOpts: {
);
receiverSelector.open({
receiverDevices: deviceManager.getDevices(),
devices: deviceManager.getDevices(),
defaultMediaType,
availableMediaTypes,
appInfo,
@@ -751,7 +751,16 @@ function createSelector() {
selector.addEventListener("mediaMessage", onMediaMessage);
// Update selector data whenever devices change/update
const onDeviceChange = () => selector.update(deviceManager.getDevices());
const onDeviceChange = () => {
const connectedSessionIds: string[] = [];
for (const instance of activeInstances) {
if (instance.session) {
connectedSessionIds.push(instance.session.sessionId);
}
}
selector.update(deviceManager.getDevices(), connectedSessionIds);
};
deviceManager.addEventListener("deviceUp", onDeviceChange);
deviceManager.addEventListener("deviceDown", onDeviceChange);

2
ext/src/defaultOptions.ts
View File

@@ -16,6 +16,7 @@ export interface Options {
mirroringAppId: string;
receiverSelectorCloseIfFocusLost: boolean;
receiverSelectorWaitForConnection: boolean;
receiverSelectorExpandActive: boolean;
siteWhitelistEnabled: boolean;
siteWhitelist: WhitelistItemData[];
siteWhitelistCustomUserAgent: string;
@@ -40,6 +41,7 @@ export default {
mirroringAppId: MIRRORING_APP_ID,
receiverSelectorCloseIfFocusLost: true,
receiverSelectorWaitForConnection: true,
receiverSelectorExpandActive: true,
siteWhitelistEnabled: true,
siteWhitelist: [{ pattern: "https://www.netflix.com/*", isEnabled: true }],
siteWhitelistCustomUserAgent: "",

3
ext/src/messaging.ts
View File

@@ -49,7 +49,8 @@ type ExtMessageDefinitions = {
};
/** Updates selector popup with new data. */
"popup:update": {
receiverDevices: ReceiverDevice[];
devices: ReceiverDevice[];
connectedSessionIds?: string[];
defaultMediaType?: ReceiverSelectorMediaType;
availableMediaTypes?: ReceiverSelectorMediaType;
};

16
ext/src/ui/options/Options.svelte
View File

@@ -259,6 +259,22 @@
{_("optionsReceiverSelectorCloseIfFocusLost")}
</label>
</div>
<div class="option option--inline">
<div class="option__control">
<input
id="receiverSelectorExpandActive"
type="checkbox"
bind:checked={opts.receiverSelectorExpandActive}
/>
</div>
<label
class="option__label"
for="receiverSelectorExpandActive"
>
{_("optionsReceiverSelectorExpandActive")}
</label>
</div>
</fieldset>
{/if}

25
ext/src/ui/popup/Popup.svelte
View File

@@ -29,6 +29,8 @@
/** Devices to display. */
let devices: ReceiverDevice[] = [];
/** IDs of sessions connected by this extension. */
let connectedSessionIds: string[] = [];
/** Sender app info (if available). */
let appInfo: Optional<ReceiverSelectorAppInfo>;
@@ -172,6 +174,8 @@
break;
case "popup:update": {
updateKnownApp();
if (
message.data.availableMediaTypes !== undefined &&
message.data.defaultMediaType !== undefined
@@ -183,9 +187,11 @@
}
}
updateKnownApp();
devices = message.data.devices;
devices = message.data.receiverDevices;
if (message.data.connectedSessionIds) {
connectedSessionIds = message.data.connectedSessionIds;
}
break;
}
@@ -288,30 +294,27 @@
}
}
function onReceiverCast(receiverDevice: ReceiverDevice) {
function onReceiverCast(device: ReceiverDevice) {
isConnecting = true;
port?.postMessage({
subject: "main:receiverSelected",
data: {
receiverDevice,
mediaType
}
data: { device, mediaType }
});
}
function onReceiverStop(receiverDevice: ReceiverDevice) {
function onReceiverStop(device: ReceiverDevice) {
port?.postMessage({
subject: "main:sendReceiverMessage",
data: {
deviceId: receiverDevice.id,
deviceId: device.id,
message: { requestId: 0, type: "STOP" }
}
});
port?.postMessage({
subject: "main:receiverStopped",
data: { deviceId: receiverDevice.id }
data: { deviceId: device.id }
});
}
</script>
@@ -378,8 +381,10 @@
{:else}
{#each devices as device}
<Receiver
{opts}
{port}
{device}
{connectedSessionIds}
{isMediaTypeAvailable}
isAnyMediaTypeAvailable={availableMediaTypes !==
ReceiverSelectorMediaType.None &&

20
ext/src/ui/popup/Receiver.svelte
View File

@@ -1,6 +1,8 @@
<script lang="ts">
import { createEventDispatcher, onMount } from "svelte";
import type { Options } from "../../lib/options";
import { ReceiverDevice, ReceiverDeviceCapabilities } from "../../types";
import type { Port } from "../../messaging";
@@ -33,8 +35,11 @@
/** Whether any media types are available for this receiver. */
export let isAnyMediaTypeAvailable: boolean;
/** Receiver device to display. */
/** Device to display. */
export let device: ReceiverDevice;
export let connectedSessionIds: string[];
export let opts: Nullable<Options>;
/** Current receiver application (if available) */
$: application = device.status?.applications?.[0];
@@ -79,8 +84,20 @@
/** Whether media controls are shown. */
let isExpanded = false;
let isExpandedUserModified = false;
// Unexpand if media status disappears
$: if (!device.mediaStatus) {
isExpanded = false;
} else if (
// If app is running
application?.appId &&
// And user hasn't manually changed the expanded state
!isExpandedUserModified &&
// And auto-expansion is enabled
opts?.receiverSelectorExpandActive
) {
isExpanded = connectedSessionIds.includes(application?.transportId);
}
/** Whether a session request is in progress for this receiver.. */
@@ -429,6 +446,7 @@
disabled={!mediaStatus}
on:click={() => {
isExpanded = !isExpanded;
isExpandedUserModified = true;
}}
/>