diff --git a/package.json b/package.json index 67721c86f4..a6e86cc2b3 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "android": "expo run:android", "ios": "expo run:ios", "web": "expo start --web", - "build-web": "expo export:web && node ./scripts/post-web-build.js && cp --verbose ./web-build/static/js/*.* ./bskyweb/static/js/", + "build-web": "expo export:web && node ./scripts/post-web-build.js && cp -v ./web-build/static/js/*.* ./bskyweb/static/js/", "build-all": "yarn intl:build && eas build --platform all", "start": "expo start --dev-client", "start:prod": "expo start --dev-client --no-dev --minify", @@ -113,6 +113,7 @@ "expo-system-ui": "~2.9.2", "expo-task-manager": "~11.7.0", "expo-updates": "~0.24.5", + "expo-web-browser": "^12.5.0", "fast-text-encoding": "^1.0.6", "history": "^5.3.0", "js-sha256": "^0.9.0", @@ -148,7 +149,6 @@ "react-native-get-random-values": "~1.8.0", "react-native-haptic-feedback": "^1.14.0", "react-native-image-crop-picker": "^0.38.1", - "react-native-inappbrowser-reborn": "^3.6.3", "react-native-ios-context-menu": "^1.15.3", "react-native-linear-gradient": "^2.6.2", "react-native-pager-view": "6.2.2", diff --git a/src/locale/helpers.ts b/src/locale/helpers.ts index 433dbaec60..8b3bf5f3d8 100644 --- a/src/locale/helpers.ts +++ b/src/locale/helpers.ts @@ -22,6 +22,14 @@ export function code3ToCode2(lang: string): string { return lang } +export function code3ToCode2Strict(lang: string): string | undefined { + if (lang.length === 3) { + return LANGUAGES_MAP_CODE3[lang]?.code2 + } + + return undefined +} + export function codeToLanguageName(lang: string): string { const lang2 = code3ToCode2(lang) return LANGUAGES_MAP_CODE2[lang2]?.name || lang diff --git a/src/locale/i18n.web.ts b/src/locale/i18n.web.ts index 819f58eb75..a6f0e158d1 100644 --- a/src/locale/i18n.web.ts +++ b/src/locale/i18n.web.ts @@ -62,6 +62,9 @@ export async function dynamicActivate(locale: AppLanguage) { export async function useLocaleLanguage() { const {appLanguage} = useLanguagePrefs() useEffect(() => { - dynamicActivate(sanitizeAppLanguageSetting(appLanguage)) + const sanitizedLanguage = sanitizeAppLanguageSetting(appLanguage) + + document.documentElement.lang = sanitizedLanguage + dynamicActivate(sanitizedLanguage) }, [appLanguage]) } diff --git a/src/state/modals/index.tsx b/src/state/modals/index.tsx index 8c32c472a6..45856e1084 100644 --- a/src/state/modals/index.tsx +++ b/src/state/modals/index.tsx @@ -187,6 +187,11 @@ export interface EmbedConsentModal { onAccept: () => void } +export interface InAppBrowserConsentModal { + name: 'in-app-browser-consent' + href: string +} + export type Modal = // Account | AddAppPasswordModal @@ -231,6 +236,7 @@ export type Modal = | ConfirmModal | LinkWarningModal | EmbedConsentModal + | InAppBrowserConsentModal const ModalContext = React.createContext<{ isModalActive: boolean diff --git a/src/state/persisted/schema.ts b/src/state/persisted/schema.ts index 6a26cedae5..a6f2ea06a6 100644 --- a/src/state/persisted/schema.ts +++ b/src/state/persisted/schema.ts @@ -53,6 +53,7 @@ export const schema = z.object({ step: z.string(), }), hiddenPosts: z.array(z.string()).optional(), // should move to server + useInAppBrowser: z.boolean().optional(), }) export type Schema = z.infer @@ -84,4 +85,5 @@ export const defaults: Schema = { step: 'Home', }, hiddenPosts: [], + useInAppBrowser: undefined, } diff --git a/src/state/preferences/in-app-browser.tsx b/src/state/preferences/in-app-browser.tsx new file mode 100644 index 0000000000..628663af49 --- /dev/null +++ b/src/state/preferences/in-app-browser.tsx @@ -0,0 +1,79 @@ +import React from 'react' +import * as persisted from '#/state/persisted' +import {Linking} from 'react-native' +import * as WebBrowser from 'expo-web-browser' +import {isNative} from '#/platform/detection' +import {useModalControls} from '../modals' + +type StateContext = persisted.Schema['useInAppBrowser'] +type SetContext = (v: persisted.Schema['useInAppBrowser']) => void + +const stateContext = React.createContext( + persisted.defaults.useInAppBrowser, +) +const setContext = React.createContext( + (_: persisted.Schema['useInAppBrowser']) => {}, +) + +export function Provider({children}: React.PropsWithChildren<{}>) { + const [state, setState] = React.useState(persisted.get('useInAppBrowser')) + + const setStateWrapped = React.useCallback( + (inAppBrowser: persisted.Schema['useInAppBrowser']) => { + setState(inAppBrowser) + persisted.write('useInAppBrowser', inAppBrowser) + }, + [setState], + ) + + React.useEffect(() => { + return persisted.onUpdate(() => { + setState(persisted.get('useInAppBrowser')) + }) + }, [setStateWrapped]) + + return ( + + + {children} + + + ) +} + +export function useInAppBrowser() { + return React.useContext(stateContext) +} + +export function useSetInAppBrowser() { + return React.useContext(setContext) +} + +export function useOpenLink() { + const {openModal} = useModalControls() + const enabled = useInAppBrowser() + + const openLink = React.useCallback( + (url: string, override?: boolean) => { + if (isNative && !url.startsWith('mailto:')) { + if (override === undefined && enabled === undefined) { + openModal({ + name: 'in-app-browser-consent', + href: url, + }) + return + } else if (override ?? enabled) { + WebBrowser.openBrowserAsync(url, { + presentationStyle: + WebBrowser.WebBrowserPresentationStyle.FULL_SCREEN, + }) + return + } + } + Linking.openURL(url) + }, + [enabled, openModal], + ) + + return openLink +} diff --git a/src/state/preferences/index.tsx b/src/state/preferences/index.tsx index cc2d9244c3..a442b763ad 100644 --- a/src/state/preferences/index.tsx +++ b/src/state/preferences/index.tsx @@ -3,6 +3,7 @@ import {Provider as LanguagesProvider} from './languages' import {Provider as AltTextRequiredProvider} from '../preferences/alt-text-required' import {Provider as HiddenPostsProvider} from '../preferences/hidden-posts' import {Provider as ExternalEmbedsProvider} from './external-embeds-prefs' +import {Provider as InAppBrowserProvider} from './in-app-browser' export {useLanguagePrefs, useLanguagePrefsApi} from './languages' export { @@ -20,7 +21,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) { - {children} + + {children} + diff --git a/src/state/session/index.tsx b/src/state/session/index.tsx index 65cb12b469..f707c1598d 100644 --- a/src/state/session/index.tsx +++ b/src/state/session/index.tsx @@ -193,11 +193,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) { ) const clearCurrentAccount = React.useCallback(() => { - logger.debug( - `session: clear current account`, - {}, - logger.DebugContext.session, - ) + logger.warn(`session: clear current account`) __globalAgent = PUBLIC_BSKY_AGENT queryClient.clear() setStateAndPersist(s => ({ @@ -322,8 +318,8 @@ export function Provider({children}: React.PropsWithChildren<{}>) { ) const logout = React.useCallback(async () => { + logger.info(`session: logout`) clearCurrentAccount() - logger.debug(`session: logout`, {}, logger.DebugContext.session) setStateAndPersist(s => { return { ...s, @@ -551,30 +547,36 @@ export function Provider({children}: React.PropsWithChildren<{}>) { return persisted.onUpdate(() => { const session = persisted.get('session') - logger.debug(`session: onUpdate`, {}, logger.DebugContext.session) + logger.info(`session: persisted onUpdate`, {}) - if (session.currentAccount) { + if (session.currentAccount && session.currentAccount.refreshJwt) { if (session.currentAccount?.did !== state.currentAccount?.did) { - logger.debug( - `session: switching account`, - { - from: { - did: state.currentAccount?.did, - handle: state.currentAccount?.handle, - }, - to: { - did: session.currentAccount.did, - handle: session.currentAccount.handle, - }, + logger.info(`session: persisted onUpdate, switching accounts`, { + from: { + did: state.currentAccount?.did, + handle: state.currentAccount?.handle, }, - logger.DebugContext.session, - ) + to: { + did: session.currentAccount.did, + handle: session.currentAccount.handle, + }, + }) initSession(session.currentAccount) + } else { + logger.info(`session: persisted onUpdate, updating session`, {}) + + /* + * Use updated session in this tab's agent. Do not call + * upsertAccount, since that will only persist the session that's + * already persisted, and we'll get a loop between tabs. + */ + // @ts-ignore we checked for `refreshJwt` above + __globalAgent.session = session.currentAccount } } else if (!session.currentAccount && state.currentAccount) { logger.debug( - `session: logging out`, + `session: persisted onUpdate, logging out`, { did: state.currentAccount?.did, handle: state.currentAccount?.handle, @@ -582,10 +584,22 @@ export function Provider({children}: React.PropsWithChildren<{}>) { logger.DebugContext.session, ) + /* + * No need to do a hard logout here. If we reach this, tokens for this + * account have already been cleared either by an `expired` event + * handled by `persistSession` (which nukes this accounts tokens only), + * or by a `logout` call which nukes all accounts tokens) + */ clearCurrentAccount() } + + setState(s => ({ + ...s, + accounts: session.accounts, + currentAccount: session.currentAccount, + })) }) - }, [state, clearCurrentAccount, initSession]) + }, [state, setState, clearCurrentAccount, initSession]) const stateContext = React.useMemo( () => ({ diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index e24fdcf3e1..1c2e126c81 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -45,6 +45,7 @@ import {Gallery} from './photos/Gallery' import {MAX_GRAPHEME_LENGTH} from 'lib/constants' import {LabelsBtn} from './labels/LabelsBtn' import {SelectLangBtn} from './select-language/SelectLangBtn' +import {SuggestedLanguage} from './select-language/SuggestedLanguage' import {insertMentionAt} from 'lib/strings/mention-manip' import {Trans, msg} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -454,6 +455,7 @@ export const ComposePost = observer(function ComposePost({ ))} ) : null} + {canSelectImages ? ( <> diff --git a/src/view/com/composer/select-language/SuggestedLanguage.tsx b/src/view/com/composer/select-language/SuggestedLanguage.tsx new file mode 100644 index 0000000000..987d89d360 --- /dev/null +++ b/src/view/com/composer/select-language/SuggestedLanguage.tsx @@ -0,0 +1,101 @@ +import React, {useEffect, useState} from 'react' +import {StyleSheet, View} from 'react-native' +import lande from 'lande' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {Text} from '../../util/text/Text' +import {Button} from '../../util/forms/Button' +import {code3ToCode2Strict, codeToLanguageName} from '#/locale/helpers' +import { + toPostLanguages, + useLanguagePrefs, + useLanguagePrefsApi, +} from '#/state/preferences/languages' +import {usePalette} from '#/lib/hooks/usePalette' +import {s} from '#/lib/styles' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' + +// fallbacks for safari +const onIdle = globalThis.requestIdleCallback || (cb => setTimeout(cb, 1)) +const cancelIdle = globalThis.cancelIdleCallback || clearTimeout + +export function SuggestedLanguage({text}: {text: string}) { + const [suggestedLanguage, setSuggestedLanguage] = useState() + const langPrefs = useLanguagePrefs() + const setLangPrefs = useLanguagePrefsApi() + const pal = usePalette('default') + const {_} = useLingui() + + useEffect(() => { + const textTrimmed = text.trim() + + // Don't run the language model on small posts, the results are likely + // to be inaccurate anyway. + if (textTrimmed.length < 40) { + setSuggestedLanguage(undefined) + return + } + + const idle = onIdle(() => { + // Only select languages that have a high confidence and convert to code2 + const result = lande(textTrimmed).filter( + ([lang, value]) => value >= 0.97 && code3ToCode2Strict(lang), + ) + + setSuggestedLanguage( + result.length > 0 ? code3ToCode2Strict(result[0][0]) : undefined, + ) + }) + + return () => cancelIdle(idle) + }, [text]) + + return suggestedLanguage && + !toPostLanguages(langPrefs.postLanguage).includes(suggestedLanguage) ? ( + + + + + Are you writing in{' '} + + {codeToLanguageName(suggestedLanguage)} + + ? + + + + + + ) : null +} + +const styles = StyleSheet.create({ + infoBar: { + flexDirection: 'row', + alignItems: 'center', + gap: 10, + borderWidth: 1, + borderRadius: 6, + paddingHorizontal: 16, + paddingVertical: 12, + marginHorizontal: 10, + marginBottom: 10, + }, +}) diff --git a/src/view/com/modals/InAppBrowserConsent.tsx b/src/view/com/modals/InAppBrowserConsent.tsx new file mode 100644 index 0000000000..86bb46ca81 --- /dev/null +++ b/src/view/com/modals/InAppBrowserConsent.tsx @@ -0,0 +1,102 @@ +import React from 'react' +import {StyleSheet, View} from 'react-native' + +import {s} from 'lib/styles' +import {Text} from '../util/text/Text' +import {Button} from '../util/forms/Button' +import {ScrollView} from './util' +import {usePalette} from 'lib/hooks/usePalette' + +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useModalControls} from '#/state/modals' +import { + useOpenLink, + useSetInAppBrowser, +} from '#/state/preferences/in-app-browser' + +export const snapPoints = [350] + +export function Component({href}: {href: string}) { + const pal = usePalette('default') + const {closeModal} = useModalControls() + const {_} = useLingui() + const setInAppBrowser = useSetInAppBrowser() + const openLink = useOpenLink() + + const onUseIAB = React.useCallback(() => { + setInAppBrowser(true) + closeModal() + openLink(href, true) + }, [closeModal, setInAppBrowser, href, openLink]) + + const onUseLinking = React.useCallback(() => { + setInAppBrowser(false) + closeModal() + openLink(href, false) + }, [closeModal, setInAppBrowser, href, openLink]) + + return ( + + + How should we open this link? + + + + Your choice will be saved, but can be changed later in settings. + + + +