diff --git a/docs/config.md b/docs/config.md index f93b3448e4..27b4797f0c 100644 --- a/docs/config.md +++ b/docs/config.md @@ -116,6 +116,16 @@ 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. + 1. `ios`: The URL to the iOS build. If `null`, it will be assumed to be not available. + If not set, the default element.io builds will be used. + 1. `android`: The URL to the Android build. If `null`, it will be assumed to be not available. + If not set, the default element.io builds will be used. + 1. `fdroid`: The URL to the FDroid build. If `null`, it will be assumed to be not available. + If not set, the default element.io builds will be used. 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..d8b5f0be8d 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.", diff --git a/src/vector/mobile_guide/index.html b/src/vector/mobile_guide/index.html index da49907f9c..3960c43912 100644 --- a/src/vector/mobile_guide/index.html +++ b/src/vector/mobile_guide/index.html @@ -152,7 +152,7 @@ body { - +

Set up Element on iOS or Android

@@ -260,6 +260,7 @@ body { + Get it on F-Droid.