diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json index 84d4e08c..59d9e50e 100644 --- a/src/assets/locales/en.json +++ b/src/assets/locales/en.json @@ -508,6 +508,8 @@ "explainer": "Using the browser extension, you can get the best streams we have to offer. With just a simple install.", "explainerIos": "Unfortunately, the browser extension is not supported on IOS, Press Go back to choose another option.", "extensionHelp": "If you've installed the extension but it's not detected. Open the extension through your browsers extension menu and follow the steps on screen.", + "notDetecting": "Installed on chrome but not showing up? Try reloading the page!", + "notDetectingAction": "Reload page", "linkChrome": "Install Chrome extension", "linkFirefox": "Install Firefox extension", "back": "Go back", diff --git a/src/pages/onboarding/OnboardingExtension.tsx b/src/pages/onboarding/OnboardingExtension.tsx index c6ab3db4..a0fa035d 100644 --- a/src/pages/onboarding/OnboardingExtension.tsx +++ b/src/pages/onboarding/OnboardingExtension.tsx @@ -1,4 +1,4 @@ -import { ReactNode, useMemo } from "react"; +import { ReactNode, useCallback, useEffect, useMemo, useState } from "react"; import { Trans, useTranslation } from "react-i18next"; import { useAsyncFn, useInterval } from "react-use"; @@ -41,12 +41,33 @@ async function getExtensionState(): Promise { return "success"; // no problems } +function RefreshBar() { + const { t } = useTranslation(); + const reload = useCallback(() => { + window.location.reload(); + }, []); + return ( + +
+

{t("onboarding.extension.notDetecting")}

+ +
+
+ ); +} + export function ExtensionStatus(props: { status: ExtensionStatus; loading: boolean; showHelp?: boolean; }) { const { t } = useTranslation(); + const [lastKnownStatus, setLastKnownStatus] = useState(props.status); + useEffect(() => { + if (!props.loading) setLastKnownStatus(props.status); + }, [props.status, props.loading]); let content: ReactNode = null; if (props.loading || props.status === "unknown") @@ -93,6 +114,7 @@ export function ExtensionStatus(props: { {content} + {lastKnownStatus === "unknown" ? : null} {props.showHelp ? (