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 @@ } -
+
{#if mediaTitle} {/if} diff --git a/ext/src/ui/popup/styles/index.css b/ext/src/ui/popup/styles/index.css index 44c8172..f1a819b 100755 --- a/ext/src/ui/popup/styles/index.css +++ b/ext/src/ui/popup/styles/index.css @@ -163,10 +163,24 @@ body { .media__metadata, .media__controls { - padding: 5px 10px; + padding: 5px; } .media__metadata { + display: flex; + gap: 10px; +} + +.media__image { + align-self: start; + border: 1px solid var(--border-color); + border-radius: 4px; + flex-grow: 0; + max-height: 70px; + max-width: 120px; +} + +.media__metadata-text { display: flex; flex-direction: column; } @@ -177,7 +191,6 @@ body { .media__subtitle { color: var(--secondary-color); } -.media__title, .media__subtitle { overflow: hidden; text-overflow: ellipsis;