diff --git a/ext/src/_locales/en/messages.json b/ext/src/_locales/en/messages.json
index f39fe64..f741622 100755
--- a/ext/src/_locales/en/messages.json
+++ b/ext/src/_locales/en/messages.json
@@ -396,6 +396,14 @@
"message": "Auto-expand media controls for connected devices",
"description": "Receiver selector expand active checkbox label."
},
+ "optionsReceiverSelectorShowMediaImages": {
+ "message": "Show media images",
+ "description": "Receiver selector show media images checkbox label."
+ },
+ "optionsReceiverSelectorShowMediaImagesDescription": {
+ "message": "Loads media thumbnail/branding images from remote servers.",
+ "description": "Receiver selector show media images option description."
+ },
"optionsSiteWhitelistCategoryName": {
"message": "Site whitelist",
diff --git a/ext/src/defaultOptions.ts b/ext/src/defaultOptions.ts
index 0696d87..5e09007 100644
--- a/ext/src/defaultOptions.ts
+++ b/ext/src/defaultOptions.ts
@@ -58,6 +58,8 @@ export interface Options {
receiverSelectorWaitForConnection: boolean;
/** Auto-expand active sessions managed by the extension. */
receiverSelectorExpandActive: boolean;
+ /** Show media images in receiver selector. */
+ receiverSelectorShowMediaImages: boolean;
/** User agent replacement whitelist enabled. */
siteWhitelistEnabled: boolean;
@@ -97,6 +99,7 @@ export default {
receiverSelectorCloseIfFocusLost: true,
receiverSelectorWaitForConnection: true,
receiverSelectorExpandActive: true,
+ receiverSelectorShowMediaImages: false,
siteWhitelistEnabled: true,
siteWhitelist: [{ pattern: "https://www.netflix.com/*", isEnabled: true }],
diff --git a/ext/src/ui/options/Options.svelte b/ext/src/ui/options/Options.svelte
index 6a44a42..ae58e9e 100644
--- a/ext/src/ui/options/Options.svelte
+++ b/ext/src/ui/options/Options.svelte
@@ -362,22 +362,6 @@
-->
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ {_("optionsReceiverSelectorShowMediaImagesDescription")}
+
+
+
+
+
+
+
+
+
{/if}
diff --git a/ext/src/ui/popup/Receiver.svelte b/ext/src/ui/popup/Receiver.svelte
index 7dc6bcd..bf16b62 100644
--- a/ext/src/ui/popup/Receiver.svelte
+++ b/ext/src/ui/popup/Receiver.svelte
@@ -467,6 +467,7 @@
handleMediaPlayPause()}
diff --git a/ext/src/ui/popup/ReceiverMedia.svelte b/ext/src/ui/popup/ReceiverMedia.svelte
index aa7b2cb..80d1795 100644
--- a/ext/src/ui/popup/ReceiverMedia.svelte
+++ b/ext/src/ui/popup/ReceiverMedia.svelte
@@ -4,7 +4,7 @@
import type { ReceiverDevice } from "../../types";
import { MediaStatus, _MediaCommand } from "../../cast/sdk/types";
- import type { Image, Volume } from "../../cast/sdk/classes";
+ import type { Volume } from "../../cast/sdk/classes";
import {
MetadataType,
PlayerState,
@@ -27,6 +27,7 @@
export let status: MediaStatus;
export let device: ReceiverDevice;
export let textTracks: Track[] = [];
+ export let showImage = false;
$: isPlayingOrPaused =
status.playerState === PlayerState.PLAYING ||
@@ -38,14 +39,13 @@
let mediaTitle: Optional;
let mediaSubtitle: Optional;
- let mediaImage: Optional;
+ let mediaImageSet: Optional;
// Choose subset of metadata depending on metadata type
$: {
const metadata = status?.media?.metadata;
mediaTitle = metadata?.title;
- mediaImage = metadata?.images?.[0];
mediaSubtitle = undefined;
if (metadata) {
@@ -71,6 +71,18 @@
mediaSubtitle = metadata.subtitle;
}
}
+
+ if (showImage && metadata?.images?.length) {
+ let imageSet: string[] = [];
+ for (const image of metadata.images) {
+ let sizeString = image.url;
+ if (image.width) sizeString += ` ${image.width}w`;
+ imageSet.push(sizeString);
+ }
+ mediaImageSet = imageSet.join(",");
+ } else {
+ mediaImageSet = undefined;
+ }
}
// Keep track of update times for currentTime estimations
@@ -155,17 +167,22 @@
}
-