diff --git a/docs/config.md b/docs/config.md index f93b3448e4..3694ec00b1 100644 --- a/docs/config.md +++ b/docs/config.md @@ -116,6 +116,13 @@ For a good example, see https://develop.element.io/config.json. 1. `logo`: An HTTP URL to the avatar for the desktop build. Should be 24x24, ideally an SVG. 1. `url`: An HTTP URL for where to send the user to download the desktop build. +1. `mobileBuilds`: Used to alter promotional links to the mobile app. By default the + builds are considered available and accessible from https://element.io. This config + option is typically used in a context of encouraging the user to try the mobile app + instead of a mobile/incompatible browser. There are 3 possible fields for this config + option: `ios`, `android`, `fdroid`. For all 3, when set to a string then that URL will + be used. When not defined, the default element.io apps will be used. When explicitly + set to `null`, that platform will be considered unavailable. 1. `mobileGuideToast`: Whether to show a toast a startup which nudges users on iOS and Android towards the native mobile apps. The toast redirects to the mobile guide if they accept. Defaults to false. diff --git a/src/async-components/structures/CompatibilityView.tsx b/src/async-components/structures/CompatibilityView.tsx index 05a09c6b89..b836080741 100644 --- a/src/async-components/structures/CompatibilityView.tsx +++ b/src/async-components/structures/CompatibilityView.tsx @@ -27,7 +27,55 @@ interface IProps { } const CompatibilityView: React.FC = ({ onAccept }) => { - const brand = SdkConfig.get().brand; + const {brand, mobileBuilds} = SdkConfig.get(); + + let ios = null; + const iosCustomUrl = mobileBuilds?.ios; + if (iosCustomUrl !== null) { // could be undefined or a string + ios = <> +

iOS (iPhone or iPad)

+ + Apple App Store + + ; + } + + let android = [

Android

]; + const andCustomUrl = mobileBuilds?.android; + const fdroidCustomUrl = mobileBuilds?.fdroid; + if (andCustomUrl !== null) { // undefined or string + android.push( + Google Play Store + ); + } + if (fdroidCustomUrl !== null) { // undefined or string + android.push( + F-Droid + ); + } + if (android.length === 1) { // just a header, meaning no links + android = []; + } + + let mobileHeader =

{_t("Use %(brand)s on mobile", {brand})}

; + if (!android.length && !ios) { + mobileHeader = null; + } + return
@@ -76,30 +124,9 @@ const CompatibilityView: React.FC = ({ onAccept }) => {
-

Use Element on mobile

-

iOS (iPhone or iPad)

- - Apple App Store - -

Android

- - Google Play Store - - - F-Droid - + {mobileHeader} + {ios} + {android}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 9c71b85849..892ab66cad 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -19,6 +19,7 @@ "%(appName)s (%(browserName)s, %(osName)s)": "%(appName)s (%(browserName)s, %(osName)s)", "You need to be using HTTPS to place a screen-sharing call.": "You need to be using HTTPS to place a screen-sharing call.", "Powered by Matrix": "Powered by Matrix", + "Use %(brand)s on mobile": "Use %(brand)s on mobile", "Unsupported browser": "Unsupported browser", "Your browser can't run %(brand)s": "Your browser can't run %(brand)s", "%(brand)s uses advanced browser features which aren't supported by your current browser.": "%(brand)s uses advanced browser features which aren't supported by your current browser.",