diff --git a/ext/src/_locales/en/messages.json b/ext/src/_locales/en/messages.json index 3ee725f..29910aa 100755 --- a/ext/src/_locales/en/messages.json +++ b/ext/src/_locales/en/messages.json @@ -8,6 +8,14 @@ "description": "Description of the extension shown in the add-ons manager." }, + "popupBridgeErrorBanner": { + "message": "There is a problem with the bridge!", + "description": "Bridge error banner message." + }, + "popupBridgeErrorBannerOptions": { + "message": "More Information", + "description": "Bridge error banner button label." + }, "popupWhitelistNotWhitelisted": { "message": "$appName$ is not whitelisted", "description": "Receiver selector whitelist suggestion banner label.", diff --git a/ext/src/background/ReceiverSelector.ts b/ext/src/background/ReceiverSelector.ts index 1345c3f..1e6805a 100644 --- a/ext/src/background/ReceiverSelector.ts +++ b/ext/src/background/ReceiverSelector.ts @@ -59,7 +59,7 @@ export default class ReceiverSelector extends TypedEventTarget { private receiverDevices = new Map(); private bridgePort?: Port; + private bridgeInfo?: BridgeInfo; async init() { if (!this.bridgePort) { await this.refresh(); @@ -48,17 +49,28 @@ export default new (class extends TypedEventTarget { this.bridgePort?.disconnect(); this.receiverDevices.clear(); - this.bridgePort = await bridge.connect(); - this.bridgePort.onMessage.addListener(this.onBridgeMessage); - this.bridgePort.onDisconnect.addListener(this.onBridgeDisconnect); + try { + this.bridgeInfo = await bridge.getInfo(); + // eslint-disable-next-line no-empty + } catch {} - this.bridgePort.postMessage({ - subject: "bridge:startDiscovery", - data: { - // Also send back status messages - shouldWatchStatus: true - } - }); + if (this.bridgeInfo?.isVersionCompatible) { + this.bridgePort = await bridge.connect(); + this.bridgePort.onMessage.addListener(this.onBridgeMessage); + this.bridgePort.onDisconnect.addListener(this.onBridgeDisconnect); + + this.bridgePort.postMessage({ + subject: "bridge:startDiscovery", + data: { + // Also send back status messages + shouldWatchStatus: true + } + }); + } + } + + getBridgeInfo() { + return this.bridgeInfo; } /** Gets a list of receiver devices. */ diff --git a/ext/src/messaging.ts b/ext/src/messaging.ts index f85ed48..0a2b81d 100644 --- a/ext/src/messaging.ts +++ b/ext/src/messaging.ts @@ -46,6 +46,7 @@ type ExtMessageDefinitions = { "popup:init": { appInfo?: ReceiverSelectorAppInfo; pageInfo?: ReceiverSelectorPageInfo; + isBridgeCompatible: boolean; }; /** Updates selector popup with new data. */ "popup:update": { diff --git a/ext/src/ui/popup/photon_info.svg b/ext/src/ui/assets/photon_info.svg similarity index 61% rename from ext/src/ui/popup/photon_info.svg rename to ext/src/ui/assets/photon_info.svg index d28c472..b294851 100644 --- a/ext/src/ui/popup/photon_info.svg +++ b/ext/src/ui/assets/photon_info.svg @@ -3,11 +3,14 @@ - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> - - + + \ No newline at end of file diff --git a/ext/src/ui/assets/photon_warning.svg b/ext/src/ui/assets/photon_warning.svg new file mode 100644 index 0000000..923e502 --- /dev/null +++ b/ext/src/ui/assets/photon_warning.svg @@ -0,0 +1,16 @@ + + + + + \ No newline at end of file diff --git a/ext/src/ui/popup/Popup.svelte b/ext/src/ui/popup/Popup.svelte index 11e75ec..4560f87 100644 --- a/ext/src/ui/popup/Popup.svelte +++ b/ext/src/ui/popup/Popup.svelte @@ -27,6 +27,9 @@ /** Media types available to select. */ let availableMediaTypes = ReceiverSelectorMediaType.App; + /** Whether to show bridge warning banner. */ + let isBridgeCompatible = true; + /** Devices to display. */ let devices: ReceiverDevice[] = []; /** IDs of sessions connected by this extension. */ @@ -171,6 +174,7 @@ case "popup:init": appInfo = message.data.appInfo; pageInfo = message.data.pageInfo; + isBridgeCompatible = message.data.isBridgeCompatible; break; case "popup:update": { @@ -319,18 +323,32 @@ } - +{#if !isBridgeCompatible} + +{/if} + +{#if shouldSuggestWhitelist} + +{/if} {#if availableMediaTypes !== ReceiverSelectorMediaType.None}
diff --git a/ext/src/ui/popup/Receiver.svelte b/ext/src/ui/popup/Receiver.svelte index a830902..2ca9385 100644 --- a/ext/src/ui/popup/Receiver.svelte +++ b/ext/src/ui/popup/Receiver.svelte @@ -91,13 +91,13 @@ isExpanded = false; } else if ( // If app is running - application?.appId && + application && // And user hasn't manually changed the expanded state !isExpandedUserModified && // And auto-expansion is enabled opts?.receiverSelectorExpandActive ) { - isExpanded = connectedSessionIds.includes(application?.transportId); + isExpanded = connectedSessionIds.includes(application.transportId); } /** Whether a session request is in progress for this receiver.. */ diff --git a/ext/src/ui/popup/styles/index.css b/ext/src/ui/popup/styles/index.css index 5caf35a..af264d9 100755 --- a/ext/src/ui/popup/styles/index.css +++ b/ext/src/ui/popup/styles/index.css @@ -1,3 +1,12 @@ +#root { + height: 100%; +} + +#root { + display: flex; + flex-direction: column; +} + body { --font-size: 13px; background: var(--box-background); @@ -12,7 +21,7 @@ body { display: none !important; } -.whitelist-banner { +.banner { align-items: center; background-color: var(--blue-50-a30); border-bottom: 1px solid rgba(0, 0, 0, 0.25); @@ -21,18 +30,34 @@ body { gap: 0.5em; padding: 0.5em 0.75em; } -.whitelist-banner > button { +.banner > button { --button-background: hsla(0, 0%, 50%, 0.3); --button-background-hover: hsla(0, 0%, 30%, 0.3); --button-background-active: hsla(0, 0%, 10%, 0.3); margin-left: auto; } +.banner--warn { + background-color: var(--red-60-a30); +} + +.banner::before { + content: ""; + height: 16px; + width: 16px; +} +.banner--info::before { + background-image: url("../../assets/photon_info.svg"); +} +.banner--warn::before { + background-image: url("../../assets/photon_warning.svg"); +} + @media (prefers-color-scheme: dark) { - .whitelist-banner { + .banner { border-bottom: 1px solid rgba(255, 255, 255, 0.25); } - .whitelist-banner > button { + .banner > button { --button-background: hsla(0, 0%, 50%, 0.3); --button-background-hover: hsla(0, 0%, 70%, 0.3); --button-background-active: hsla(0, 0%, 90%, 0.3);