try to detect users system and offer a download button

bcc-code · Feb 26, 2024 · cb2d97b · cb2d97b
1 parent e9dfe83
commit cb2d97b
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 6 deletions.
diff --git a/client/app/scripts/controllers/download.js b/client/app/scripts/controllers/download.js
@@ -15,6 +15,33 @@ angular.module('bmmApp')
     $scope.data = null;
     $scope.load = true;
 
+    $scope.arch = null;
+
+    //ToDo: doesn't work on a lot of devices
+    if (navigator.userAgentData){
+      navigator.userAgentData.getHighEntropyValues(['architecture']).then(function(result){
+        console.log("result", result);
+        $scope.arch = result;
+      });
+    }
+
+    $scope.linkForArchitecture = function(){
+      if ($scope.arch) {
+        if ($scope.arch.platform == "macOS"){
+          if ($scope.arch.architecture == "arm")
+            return $scope.data.mac_arm;
+          return $scope.data.mac_intel;
+        }
+        if ($scope.arch.mobile){
+          if ($scope.arch.platform == "iOS")
+            return $scope.data.ios;
+          return $scope.data.android;
+        }
+      }
+      // Windows seems like a reasonable default value
+      return $scope.data.windows;
+    }
+
     _api.getDownloadLinks().done(function(data){
       $scope.data = data;
       $scope.load = false;

diff --git a/client/app/views/pages/download.html b/client/app/views/pages/download.html
@@ -3,11 +3,13 @@
 </div>
 
 <div ng-hide="load">
-  <p>
-    <h1>Download the BMM app</h1>
-  </p>
+  <h1 style="">Download the BMM app</h1>
 
-  <h2 style="font-size: 32px; margin-bottom: 16px">Mobile</h2>
+  <div style="text-align: center">
+    <a ng-href="{{linkForArchitecture()}}" class="download-button"><span>Download</span></a>
+  </div>
+
+  <h2 style="font-size: 26px; margin-bottom: 16px">Mobile</h2>
   <a ng-href="{{data.ios || data.i_os}}" target="_blank">
     <img src="images/common/svg/appstore_en.svg" height="63">
   </a>
@@ -16,7 +18,7 @@ <h2 style="font-size: 32px; margin-bottom: 16px">Mobile</h2>
     <img src="images/common/svg/google-play-badge.png" width="240">
   </a>
 
-  <h2 style="font-size: 32px; margin-bottom: 16px">Desktop</h2>
+  <h2 style="font-size: 26px; margin-bottom: 16px">Desktop</h2>
 
   <div class="download-links">
     <a ng-href="{{data.windows}}">Windows</a>

diff --git a/common/app/styles/partials/_navigator.scss b/common/app/styles/partials/_navigator.scss
@@ -126,6 +126,31 @@
   }
 }
 
+
+.download-button {
+  background-color: transparent;
+  padding: .5em 0;
+  text-align: left;
+  span {
+    @include bmm-transition(all, .2s);
+    font-weight: bold;
+    background-color: #03d67f;
+    background-size: .8em .8em;
+    background-position: .75em .8em;
+    background-repeat: no-repeat;
+    display: inline-block;
+    margin-top: 1em;
+    padding: .5em 1.5em;
+    border-radius: 2em;
+    cursor: pointer;
+    color: #fff;//$colorForeground;
+    border: .2em solid transparent;
+  }
+  span:hover {
+    background-color: #0AB66F;
+  }
+}
+
 .playlists-private {
   margin: 0 0 1em 0;
   padding: 0;
@@ -360,4 +385,4 @@ screen and (max-height: $maxHeight) and (max-width: $mobileWidth) {
     background-image: url(../images/common/svg/toggle.svg);
     margin-left: $navigationWidth;
   }
-}
+}