diff --git a/ext/src/background/background.ts b/ext/src/background/background.ts index bbc0017..7480c03 100755 --- a/ext/src/background/background.ts +++ b/ext/src/background/background.ts @@ -5,7 +5,7 @@ import loadSender from "../lib/loadSender"; import logger from "../lib/logger"; import messaging from "../messaging"; import options from "../lib/options"; -import bridge from "../lib/bridge"; +import bridge, { BridgeInfo } from "../lib/bridge"; import { getChromeUserAgent } from "../lib/userAgents"; import { getMediaTypesForPageUrl, stringify } from "../lib/utils"; @@ -656,7 +656,13 @@ async function initMediaOverlay () { async function checkBridgeCompat () { logger.info("checking for bridge..."); - const info = await bridge.getInfo(); + let info: BridgeInfo; + try { + info = await bridge.getInfo(); + } catch (err) { + logger.info("... bridge issue!"); + return; + } if (info.isVersionCompatible) { logger.info("... bridge compatible!"); diff --git a/ext/src/ui/options/Bridge.tsx b/ext/src/ui/options/Bridge.tsx index badaabc..a900373 100644 --- a/ext/src/ui/options/Bridge.tsx +++ b/ext/src/ui/options/Bridge.tsx @@ -62,6 +62,7 @@ const BridgeStats = (props: BridgeStatsProps) => ( interface BridgeProps { info?: BridgeInfo; loading: boolean; + loadingTimedOut: boolean; options?: Options; onChange: (ev: React.ChangeEvent) => void; } @@ -177,15 +178,20 @@ export default class Bridge extends Component { } private renderStatus () { - const infoClasses = `bridge__info ${this.props.info - ? "bridge__info--found" - : "bridge__info--not-found"}`; + const infoClasses = `bridge__info ${!this.props.info + ? this.props.loadingTimedOut + ? "bridge__info--timed-out" + : "bridge__info--not-found" + : "bridge__info--found"}`; let statusIcon: string; let statusTitle: string; - let statusText: (string | null); + let statusText: (string | null) = null; - if (!this.props.info) { + if (this.props.loadingTimedOut) { + statusIcon = "assets/icons8-warn-120.png"; + statusTitle = _("optionsBridgeIssueStatusTitle"); + } else if (!this.props.info) { statusIcon = "assets/icons8-cancel-120.png"; statusTitle = _("optionsBridgeNotFoundStatusTitle"); statusText = _("optionsBridgeNotFoundStatusText"); @@ -197,8 +203,6 @@ export default class Bridge extends Component { statusIcon = "assets/icons8-warn-120.png"; statusTitle = _("optionsBridgeIssueStatusTitle"); } - - statusText = null; } return ( diff --git a/ext/src/ui/options/index.tsx b/ext/src/ui/options/index.tsx index bef4ab6..e8adae5 100644 --- a/ext/src/ui/options/index.tsx +++ b/ext/src/ui/options/index.tsx @@ -106,6 +106,7 @@ function getInputValue (input: HTMLInputElement) { interface OptionsAppState { hasLoaded: boolean; bridgeLoading: boolean; + bridgeLoadingTimedOut: boolean; isFormValid: boolean; hasSaved: boolean; @@ -123,6 +124,7 @@ class OptionsApp extends Component<{}, OptionsAppState> { this.state = { hasLoaded: false , bridgeLoading: true + , bridgeLoadingTimedOut: false , isFormValid: true , hasSaved: false }; @@ -147,6 +149,13 @@ class OptionsApp extends Component<{}, OptionsAppState> { , platform: (await browser.runtime.getPlatformInfo()).os }); + const bridgeTimeoutId = setTimeout(() => { + this.setState({ + bridgeLoading: false + , bridgeLoadingTimedOut: true + }); + }, 500); + try { const bridgeInfo = await bridge.getInfo(); @@ -161,6 +170,8 @@ class OptionsApp extends Component<{}, OptionsAppState> { bridgeLoading: false }); } + + clearTimeout(bridgeTimeoutId); } public render () { @@ -176,6 +187,7 @@ class OptionsApp extends Component<{}, OptionsAppState> { diff --git a/ext/src/ui/options/styles/index.css b/ext/src/ui/options/styles/index.css index dbd0c7e..2f45b9b 100644 --- a/ext/src/ui/options/styles/index.css +++ b/ext/src/ui/options/styles/index.css @@ -130,6 +130,12 @@ button.ghost:not(:hover) { padding-inline-end: 25px; } +.bridge__info--timed-out .bridge__status { + display: flex; + flex-direction: row; + gap: 20px; +} + .bridge__status-title { margin: initial; font-weight: 600; @@ -141,7 +147,6 @@ button.ghost:not(:hover) { margin: initial; margin-top: 5px; font-size: 1.15em; - font-weight: 300; text-align: center; } @@ -162,7 +167,6 @@ button.ghost:not(:hover) { } .bridge__info--not-found .bridge__status-title { grid-area: status-title; - font-weight: normal; white-space: normal; } .bridge__info--not-found .bridge__status-text {