Merge pull request #16890 from vector-im/travis/custom-mobile-apps

Add mobile download link configuration

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.

src/async-components/structures/CompatibilityView.tsx

@@ -27,7 +27,55 @@ interface IProps {
 }
 
 const CompatibilityView: React.FC<IProps> = ({ 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 = <>
+            <p><strong>iOS</strong> (iPhone or iPad)</p>
+            <a
+                href={iosCustomUrl || "https://apps.apple.com/app/vector/id1083446067"}
+                target="_blank"
+                className="mx_ClearDecoration"
+            >
+                <img height="48" src="themes/element/img/download/apple.svg" alt="Apple App Store" />
+            </a>
+        </>;
+    }
+
+    let android = [<p className="mx_Spacer" key="header"><strong>Android</strong></p>];
+    const andCustomUrl = mobileBuilds?.android;
+    const fdroidCustomUrl = mobileBuilds?.fdroid;
+    if (andCustomUrl !== null) { // undefined or string
+        android.push(<a
+            href={andCustomUrl || "https://play.google.com/store/apps/details?id=im.vector.app"}
+            target="_blank"
+            className="mx_ClearDecoration"
+            key="android"
+        >
+            <img height="48" src="themes/element/img/download/google.svg" alt="Google Play Store" />
+        </a>);
+    }
+    if (fdroidCustomUrl !== null) { // undefined or string
+        android.push(<a
+            href={fdroidCustomUrl || "https://f-droid.org/repository/browse/?fdid=im.vector.app"}
+            target="_blank"
+            className="mx_ClearDecoration"
+            key="fdroid"
+        >
+            <img height="48" src="themes/element/img/download/fdroid.svg" alt="F-Droid" />
+        </a>);
+    }
+    if (android.length === 1) { // just a header, meaning no links
+        android = [];
+    }
+
+    let mobileHeader = <h2 id="step2_heading">{_t("Use %(brand)s on mobile", {brand})}</h2>;
+    if (!android.length && !ios) {
+        mobileHeader = null;
+    }
+
     return <div className="mx_ErrorView">
         <div className="mx_ErrorView_container">
             <div className="mx_HomePage_header">
@@ -76,30 +124,9 @@ const CompatibilityView: React.FC<IProps> = ({ onAccept }) => {
             <div className="mx_HomePage_col">
                 <div className="mx_HomePage_row">
                     <div>
-                        <h2 id="step2_heading">Use Element on mobile</h2>
-                        <p><strong>iOS</strong> (iPhone or iPad)</p>
-                        <a
-                            href="https://apps.apple.com/app/vector/id1083446067"
-                            target="_blank"
-                            className="mx_ClearDecoration"
-                        >
-                            <img height="48" src="themes/element/img/download/apple.svg" alt="Apple App Store" />
-                        </a>
-                        <p className="mx_Spacer"><strong>Android</strong></p>
-                        <a
-                            href="https://play.google.com/store/apps/details?id=im.vector.app"
-                            target="_blank"
-                            className="mx_ClearDecoration"
-                        >
-                            <img height="48" src="themes/element/img/download/google.svg" alt="Google Play Store" />
-                        </a>
-                        <a
-                            href="https://f-droid.org/repository/browse/?fdid=im.vector.app"
-                            target="_blank"
-                            className="mx_ClearDecoration"
-                        >
-                            <img height="48" src="themes/element/img/download/fdroid.svg" alt="F-Droid" />
-                        </a>
+                        {mobileHeader}
+                        {ios}
+                        {android}
                     </div>
                 </div>
             </div>

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.",

src/vector/mobile_guide/index.html

@@ -152,7 +152,7 @@ body {
                 <path fill-rule="evenodd" clip-rule="evenodd" d="M20.92 33.32C20.92 34.2478 20.1679 35 19.24 35C13.0544 35 8.04001 29.9856 8.04001 23.8C8.04001 22.8722 8.79217 22.12 9.72001 22.12C10.6478 22.12 11.4 22.8722 11.4 23.8C11.4 28.1299 14.9101 31.64 19.24 31.64C20.1679 31.64 20.92 32.3922 20.92 33.32Z" fill="#0DBD8B"/>
                 <path fill-rule="evenodd" clip-rule="evenodd" d="M4.68 24.9199C3.75216 24.9199 3 24.1678 3 23.2399C3 17.0543 8.01441 12.0399 14.2 12.0399C15.1278 12.0399 15.88 12.7921 15.88 13.7199C15.88 14.6478 15.1278 15.3999 14.2 15.3999C9.87009 15.3999 6.36 18.91 6.36 23.2399C6.36 24.1678 5.60784 24.9199 4.68 24.9199Z" fill="#0DBD8B"/>
                 <path fill-rule="evenodd" clip-rule="evenodd" d="M29.32 17.0801C30.2478 17.0801 31 17.8322 31 18.7601C31 24.9457 25.9856 29.9601 19.8 29.9601C18.8722 29.9601 18.12 29.2079 18.12 28.2801C18.12 27.3522 18.8722 26.6001 19.8 26.6001C24.1299 26.6001 27.64 23.09 27.64 18.7601C27.64 17.8322 28.3922 17.0801 29.32 17.0801Z" fill="#0DBD8B"/>
-            </svg>    
+            </svg>
           </span>
           <p>Set up Element on iOS or Android</p>
       </div>
@@ -260,6 +260,7 @@ body {
                         </g>
                     </g>
                 </svg>
+              </a>
               <a href="https://f-droid.org/repository/browse/?fdid=im.vector.app" target="_blank" class="mx_ClearDecoration">
                 <svg width="164px" height="48px" viewBox="0 0 157 46" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                     <desc>Get it on F-Droid.</desc>