124 lines
3.7 KiB
TypeScript
124 lines
3.7 KiB
TypeScript
/*
|
|
* Copyright (C) 2026 Fluxer Contributors
|
|
*
|
|
* This file is part of Fluxer.
|
|
*
|
|
* Fluxer is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* Fluxer is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with Fluxer. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
import styles from '@app/components/auth/DesktopDeepLinkPrompt.module.css';
|
|
import {Button} from '@app/components/uikit/button/Button';
|
|
import {Platform} from '@app/lib/Platform';
|
|
import {Routes} from '@app/Routes';
|
|
import {buildAppProtocolUrl} from '@app/utils/AppProtocol';
|
|
import {checkDesktopAvailable, navigateInDesktop} from '@app/utils/DesktopRpcClient';
|
|
import {isDesktop, openExternalUrl} from '@app/utils/NativeUtils';
|
|
import {Trans} from '@lingui/react/macro';
|
|
import {ArrowSquareOutIcon} from '@phosphor-icons/react';
|
|
import type React from 'react';
|
|
import {useEffect, useState} from 'react';
|
|
|
|
interface DesktopDeepLinkPromptProps {
|
|
code: string;
|
|
kind: 'invite' | 'gift' | 'theme';
|
|
preferLogin?: boolean;
|
|
}
|
|
|
|
export const DesktopDeepLinkPrompt: React.FC<DesktopDeepLinkPromptProps> = ({code, kind, preferLogin = false}) => {
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [desktopAvailable, setDesktopAvailable] = useState<boolean | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const isMobileBrowser = Platform.isMobileBrowser;
|
|
const useProtocolLaunch = kind === 'invite';
|
|
const shouldProbeDesktopAvailability = !useProtocolLaunch;
|
|
|
|
useEffect(() => {
|
|
if (isDesktop() || !shouldProbeDesktopAvailability) return;
|
|
|
|
let cancelled = false;
|
|
checkDesktopAvailable().then(({available}) => {
|
|
if (!cancelled) {
|
|
setDesktopAvailable(available);
|
|
}
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [shouldProbeDesktopAvailability]);
|
|
|
|
if (isDesktop() || isMobileBrowser) return null;
|
|
|
|
if (shouldProbeDesktopAvailability && desktopAvailable !== true) return null;
|
|
|
|
const getPath = (): string => {
|
|
switch (kind) {
|
|
case 'invite':
|
|
return preferLogin ? Routes.inviteLogin(code) : Routes.inviteRegister(code);
|
|
case 'gift':
|
|
return preferLogin ? Routes.giftLogin(code) : Routes.giftRegister(code);
|
|
case 'theme':
|
|
return preferLogin ? Routes.themeLogin(code) : Routes.themeRegister(code);
|
|
}
|
|
};
|
|
|
|
const path = getPath();
|
|
|
|
const handleOpen = async () => {
|
|
setIsLoading(true);
|
|
setError(null);
|
|
|
|
if (useProtocolLaunch) {
|
|
try {
|
|
await openExternalUrl(buildAppProtocolUrl(path));
|
|
} catch {
|
|
setError('Failed to open in desktop app');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
return;
|
|
}
|
|
|
|
const result = await navigateInDesktop(path);
|
|
|
|
setIsLoading(false);
|
|
|
|
if (!result.success) {
|
|
setError(result.error ?? 'Failed to open in desktop app');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={styles.banner}>
|
|
<div className={styles.copy}>
|
|
<p className={styles.title}>
|
|
<Trans>Open in Fluxer for desktop</Trans>
|
|
</p>
|
|
{error ? (
|
|
<p className={styles.notInstalled}>{error}</p>
|
|
) : (
|
|
<p className={styles.body}>
|
|
<Trans>Jump straight to the app to continue.</Trans>
|
|
</p>
|
|
)}
|
|
</div>
|
|
<Button variant="primary" onClick={handleOpen} className={styles.cta} submitting={isLoading}>
|
|
<ArrowSquareOutIcon size={18} weight="fill" />
|
|
<span>
|
|
<Trans>Open Fluxer</Trans>
|
|
</span>
|
|
</Button>
|
|
</div>
|
|
);
|
|
};
|