77 lines
2.6 KiB
TypeScript
77 lines
2.6 KiB
TypeScript
 
|
import React, { useMemo } from 'react';
|
|||
|
|
import { Box, Button, Icon, Icons, Text, color } from 'folds';
|
|||
|
|
import { useClientConfig } from '../../hooks/useClientConfig';
|
|||
|
|
import { isTauri } from '../../hooks/useTauri';
|
|||
|
|
import { webRTCSupported } from '../../utils/rtc';
|
|||
|
|
import { getCallInBrowserUrl, resolveWebAppUrl } from '../../utils/callInBrowser';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* [cinny-desktop: Linux calls] The desktop app on Linux runs on WebKitGTK,
|
|||
|
|
* which ships without WebRTC (disabled in 2.54; a libwebrtc backend is due
|
|||
|
|
* around 2.56). Where calls can't work here, send the user to the room in the
|
|||
|
|
* web app instead of a dead end. Only in the desktop app, and only when
|
|||
|
|
* config.json sets `webAppUrl`.
|
|||
|
|
*/
|
|||
|
|
export const useCallInBrowserUrl = (roomId: string): string | undefined => {
|
|||
|
|
const { webAppUrl } = useClientConfig();
|
|||
|
|
return useMemo(
|
|||
|
|
() =>
|
|||
|
|
isTauri() && !webRTCSupported()
|
|||
|
|
? getCallInBrowserUrl(resolveWebAppUrl(webAppUrl), roomId)
|
|||
|
|
: undefined,
|
|||
|
|
[webAppUrl, roomId],
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/** Opens through the desktop's new-window handler → the system browser. */
|
|||
|
|
export const openCallInBrowser = (url: string): void => {
|
|||
|
|
window.open(url, '_blank', 'noopener,noreferrer');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const desktopUnavailableText = (): string =>
|
|||
|
|
typeof navigator !== 'undefined' && /Linux/i.test(navigator.userAgent)
|
|||
|
|
? 'Calls aren’t available in the desktop app on Linux yet: its web engine has no WebRTC.'
|
|||
|
|
: 'Calls aren’t available in this desktop app: its web engine has no WebRTC.';
|
|||
|
|
|
|||
|
|
type CallsUnavailableMessageProps = {
|
|||
|
|
roomId: string;
|
|||
|
|
/** Button label, e.g. "Answer in browser" for an incoming call. */
|
|||
|
|
actionLabel?: string;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export function CallsUnavailableMessage({
|
|||
|
|
roomId,
|
|||
|
|
actionLabel = 'Open in browser',
|
|||
|
|
}: CallsUnavailableMessageProps) {
|
|||
|
|
const url = useCallInBrowserUrl(roomId);
|
|||
|
|
|
|||
|
|
if (!isTauri()) {
|
|||
|
|
return (
|
|||
|
|
<Text style={{ margin: 'auto', color: color.Critical.Main }} size="L400" align="Center">
|
|||
|
|
Your browser does not support WebRTC, which is required for calling.
|
|||
|
|
</Text>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Box direction="Column" alignItems="Center" gap="200" style={{ margin: 'auto' }}>
|
|||
|
|
<Text style={{ color: color.Warning.Main }} size="L400" align="Center">
|
|||
|
|
{desktopUnavailableText()}
|
|||
|
|
{url ? ' You can join from the web app in your browser.' : ''}
|
|||
|
|
</Text>
|
|||
|
|
{url && (
|
|||
|
|
<Button
|
|||
|
|
size="300"
|
|||
|
|
variant="Secondary"
|
|||
|
|
fill="Soft"
|
|||
|
|
radii="300"
|
|||
|
|
before={<Icon size="100" src={Icons.External} />}
|
|||
|
|
onClick={() => openCallInBrowser(url)}
|
|||
|
|
>
|
|||
|
|
<Text size="B300">{actionLabel}</Text>
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
</Box>
|
|||
|
|
);
|
|||
|
|
}
|