Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-28 19:51:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add a reload page prompt for extension

Browse Source
This commit is contained in:
mrjvs 2024-01-24 15:05:22 +01:00
parent 825a28502d
commit 392c60a9f9
2 changed files with 25 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/locales/en.json
View File

@ -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 <bold>Go back</bold> to choose another option.",
"extensionHelp": "If you've installed the extension but it's not detected. <bold>Open the extension through your browsers extension menu</bold> 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",

24
src/pages/onboarding/OnboardingExtension.tsx
View File

@ -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<ExtensionStatus> {
return "success"; // no problems
}
function RefreshBar() {
const { t } = useTranslation();
const reload = useCallback(() => {
window.location.reload();
}, []);
return (
<Card className="mt-4">
<div className="flex items-center space-x-7">
<p className="flex-1">{t("onboarding.extension.notDetecting")}</p>
<Button theme="secondary" onClick={reload}>
{t("onboarding.extension.notDetectingAction")}
</Button>
</div>
</Card>
);
}
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}
</div>
</Card>
{lastKnownStatus === "unknown" ? <RefreshBar /> : null}
{props.showHelp ? (
<Card className="mt-4">
<div className="flex items-center space-x-7">