Merge pull request #169 from supportingami/updates/2024-09-4

Updates/2024 09 4

TODO.md

@@ -10,15 +10,14 @@
 - [x] capacitor
 - [x] yarn
 - [x] misc deps
-- [ ] nx
 
 **Content**
 
 - [x] control flow migration
 - [x] signals
 - [x] mat components
 - [x] Weekly problem
-- [ ] route subscriptions signals
+- [x] route subscriptions signals
 
 **Actions**
 
@@ -41,18 +40,21 @@
 - [x] scroll restoration
 - [x] markdown (katex)
 - [x] web
-- [ ] android
+- [x] android
 - [ ] ios
 
 **Android**
 
 - [ ] Splash screen
 - [ ] Notch
 - [ ] Deep Links
+- [ ] Add crashlytics
 
 **IOS**
 
 - [ ] Configure plist for status bar: https://capacitorjs.com/docs/apis/status-bar#ios-note
+- [ ] Notch
+- [ ] Analytics
 - [ ] Enable push notification https://capacitorjs.com/docs/apis/push-notifications#ios
 - [ ] Check all other plugin notes
 - [ ] Splash screen
@@ -68,9 +70,15 @@
 - [ ] Lint rules (enforce control-flow, ordered imports)
 - [ ] Run prettier (write) `yarn prettier --write "**/*.{ts}"`
 - [ ] problems standalone repo (?)
+- [ ] Add nx
+- [ ] Add esbuild
 
 **Misc**
 
 - [x] Improve typography
 - [x] Fix mat-card shadow
-- [ ] notch fixes and layout
+- [x] notch fixes and layout
+
+**Content**
+
+- [ ] Separate out into standalone git repo and add as submodule to app repo

maths-club-app/README.md

@@ -47,6 +47,25 @@ yarn build
 Finally open Android studio in the generated folder `maths-club-app/android`
 You should be able to build and run the app directly from android studio.
 
+**Use Live-Reload**
+Follow guide at: https://capacitorjs.com/docs/guides/live-reload#using-with-framework-clis
+
+Example change to `capacitor.config.ts`
+
+```ts
+server: {
+    url: "http://192.168.50.67:4200",
+    cleartext: true,
+  }
+```
+
+Example (windows) command to serve with host binding
+
+```sh
+cd maths-club-app
+yarn ng serve --host=0.0.0.0
+```
+
 ## Running on IOS
 
 TODO

maths-club-app/android/.gitignore

@@ -61,8 +61,6 @@ captures/
 .externalNativeBuild
 .cxx/
 
-# Google Services (e.g. APIs or Firebase)
-# google-services.json
 
 # Freeline
 freeline.py

maths-club-app/android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "io.c2dev.samimathsclub"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 3000000
-        versionName "3.0.0"
+        versionCode 3000003
+        versionName "3.0.3"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
@@ -48,6 +48,7 @@ try {
     def servicesJSON = file('google-services.json')
     if (servicesJSON.text) {
         apply plugin: 'com.google.gms.google-services'
+        apply plugin: 'com.google.firebase.crashlytics'
     }
 } catch(Exception e) {
     logger.info("google-services.json not found, google-services plugin not applied. Push Notifications won't work")

maths-club-app/android/app/capacitor.build.gradle

@@ -9,8 +9,11 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
-    implementation project(':capacitor-community-firebase-analytics')
+    implementation project(':capacitor-community-safe-area')
+    implementation project(':capacitor-firebase-analytics')
+    implementation project(':capacitor-firebase-crashlytics')
     implementation project(':capacitor-app')
+    implementation project(':capacitor-device')
     implementation project(':capacitor-dialog')
     implementation project(':capacitor-push-notifications')
     implementation project(':capacitor-share')

maths-club-app/android/app/src/main/AndroidManifest.xml

@@ -1,10 +1,7 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8" ?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
-
     <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme">
-
         <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode" android:name=".MainActivity" android:label="@string/title_activity_main" android:theme="@style/AppTheme.NoActionBarLaunch" android:launchMode="singleTask" android:exported="true">
-
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
                 <category android:name="android.intent.category.LAUNCHER" />
@@ -16,11 +13,10 @@
                 <category android:name="android.intent.category.BROWSABLE" />
                 <data android:scheme="https" android:host="mathsclub.samicharity.co.uk" />
             </intent-filter>
-
         </activity>
 
         <provider android:name="androidx.core.content.FileProvider" android:authorities="${applicationId}.fileprovider" android:exported="false" android:grantUriPermissions="true">
-            <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths"></meta-data>
+            <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths" />
         </provider>
     </application>
 

maths-club-app/android/app/src/main/java/io/c2dev/samimathsclub/MainActivity.java

@@ -1,5 +1,30 @@
 package io.c2dev.samimathsclub;
 
+import android.os.Bundle;
+import android.util.Log;
+import android.view.View;
+
 import com.getcapacitor.BridgeActivity;
 
-public class MainActivity extends BridgeActivity {}
+import androidx.annotation.Nullable;
+
+
+public class MainActivity extends BridgeActivity {
+  @Override
+ protected void onCreate(@Nullable Bundle savedInstanceState) {
+    // Track how long app startup takes to adjust how long to keep splash screen displayed
+    long START_TIME = System.currentTimeMillis();
+
+    super.onCreate(savedInstanceState);
+    final View content = findViewById(android.R.id.content);
+
+    // Ensure splash is displayed for at least 800ms (default dismisses on first draw)
+    long SPLASH_MIN_DURATION = 800;
+    long END_TIME = System.currentTimeMillis();
+    long TIME_ELAPSED = END_TIME - START_TIME;
+    long SPLASH_DELAY = SPLASH_MIN_DURATION - TIME_ELAPSED;
+    if(SPLASH_DELAY > 0){
+        new SplashDelay().run(SPLASH_DELAY, content);
+    }
+  }
+}

maths-club-app/android/app/src/main/java/io/c2dev/samimathsclub/SplashDelay.java

@@ -0,0 +1,49 @@
+package io.c2dev.samimathsclub;
+
+import android.os.Handler;
+import android.util.Log;
+import android.view.View;
+import android.view.ViewTreeObserver;
+
+/**
+ * Delay the splash screen dismiss for a fixed period of time
+ * 
+ * Adapted from
+ * https://stackoverflow.com/a/76099488
+ * https://developer.android.com/develop/ui/views/launch/splash-screen#suspend-drawing
+ * https://github.com/ionic-team/capacitor-plugins/blob/main/splash-screen/android/src/main/java/com/capacitorjs/plugins/splashscreen/SplashScreen.java
+ * 
+ * Could potentially be replaced by integrating more closely with capacitor splashscreen plugin
+ * although unclear whether different assets for android 31+ supported
+ */
+public class SplashDelay  {
+
+  private boolean isVisible = false;
+  private ViewTreeObserver.OnPreDrawListener onPreDrawListener;
+
+  public void run(long DELAY, View content) {
+      // Set up an OnPreDrawListener to the root view.
+      this.onPreDrawListener =  new ViewTreeObserver.OnPreDrawListener() {
+        @Override
+        public boolean onPreDraw() {
+          // Start Timer On First Run
+          if (!isVisible) {
+            isVisible = true;
+
+            new Handler().postDelayed(() -> {
+                  // Splash screen is done... start drawing content.
+                  isVisible = false;
+                  content.getViewTreeObserver().removeOnPreDrawListener(this);
+                },
+                DELAY
+              );
+          }
+          // Not ready to dismiss splash screen
+          return false;
+        }
+      };
+
+      content.getViewTreeObserver().addOnPreDrawListener(this.onPreDrawListener);
+  }
+
+  }

maths-club-app/android/app/src/main/res/drawable-v31/splash_animated.xml

@@ -0,0 +1,25 @@
+<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt">
+    <aapt:attr name="android:drawable">
+        <vector android:name="vector" android:width="192dp" android:height="192dp" android:viewportWidth="192" android:viewportHeight="192">
+            <group android:name="group" android:pivotX="96" android:pivotY="96" android:scaleX="0" android:scaleY="0">
+                <path android:name="path" android:pathData="M 99.615 66.596 C 99.039 66.021 98.244 65.689 97.427 65.689 C 96.613 65.689 95.815 66.02 95.239 66.596 C 94.664 67.172 94.332 67.97 94.332 68.784 C 94.332 69.598 94.663 70.397 95.239 70.972 C 95.815 71.548 96.613 71.879 97.427 71.879 C 98.244 71.879 99.039 71.548 99.615 70.972 C 100.19 70.397 100.522 69.598 100.522 68.784 C 100.522 67.97 100.191 67.172 99.615 66.596 Z" android:fillColor="#ffffff" android:strokeWidth="1"/>
+                <path android:name="path_1" android:pathData="M 146.505 82.957 C 146.418 77.805 145.619 72.719 144.13 67.842 C 143.739 66.562 142.578 65.691 141.265 65.691 L 108.966 65.691 C 107.308 65.691 105.964 67.062 105.964 68.752 C 105.964 70.443 107.309 71.814 108.966 71.814 L 139.001 71.814 C 139.934 75.471 140.438 79.245 140.502 83.061 C 140.679 93.7 137.374 106.028 131.876 115.235 C 126.571 124.116 124.233 134.689 125.293 145.006 L 127.901 170.4 L 88.846 170.4 L 88.846 161.85 C 88.846 156.991 86.987 152.426 83.611 148.998 C 80.254 145.588 75.803 143.713 71.069 143.713 C 71.016 143.713 70.963 143.714 70.909 143.714 C 66.113 143.714 61.608 141.807 58.219 138.34 C 54.81 134.854 52.952 130.222 52.987 125.299 L 53.057 115.331 C 53.063 114.515 52.749 113.731 52.186 113.152 C 51.622 112.573 50.855 112.247 50.055 112.247 L 39.718 112.247 C 42.815 104.512 47.595 90.711 47.595 83.886 C 47.595 79.79 48.107 75.74 49.119 71.813 L 86.003 71.813 C 87.661 71.813 89.005 70.442 89.005 68.751 C 89.005 67.061 87.661 65.689 86.003 65.689 L 46.861 65.689 C 45.55 65.689 44.39 66.558 43.998 67.834 C 42.401 73.017 41.592 78.417 41.592 83.886 C 41.592 90.573 35.233 108.069 32.437 113.978 C 31.988 114.927 32.049 116.044 32.598 116.937 C 33.147 117.829 34.107 118.371 35.14 118.371 L 47.032 118.371 L 46.984 125.254 C 46.938 131.827 49.418 138.01 53.968 142.664 C 58.492 147.292 64.504 149.837 70.908 149.837 C 70.962 149.837 71.014 149.836 71.068 149.836 C 74.203 149.836 77.152 151.078 79.376 153.336 C 81.612 155.607 82.843 158.631 82.843 161.849 L 82.843 173.462 C 82.843 175.153 84.187 176.523 85.845 176.523 L 131.234 176.523 C 132.085 176.523 132.895 176.155 133.464 175.511 C 134.034 174.866 134.308 174.005 134.219 173.143 L 131.263 144.367 C 130.34 135.378 132.379 126.162 137.003 118.42 C 143.15 108.126 146.703 94.868 146.505 82.957 Z" android:fillColor="#ffffff" android:strokeWidth="1"/>
+                <path android:name="path_2" android:pathData="M 133.102 52.12 C 132.563 51.127 131.633 50.383 130.557 50.075 C 129.479 49.766 128.296 49.906 127.314 50.462 C 126.329 51.024 125.584 51.97 125.269 53.07 C 124.955 54.166 125.085 55.367 125.624 56.36 C 126.164 57.353 127.092 58.102 128.169 58.41 C 129.246 58.719 130.425 58.574 131.413 58.018 C 132.396 57.461 133.143 56.511 133.456 55.415 C 133.772 54.315 133.64 53.118 133.102 52.12 Z" android:fillColor="#ffffff" android:strokeWidth="1"/>
+                <path android:name="path_3" android:pathData="M 131.862 83.119 C 131.834 81.459 130.52 80.132 128.915 80.132 C 128.899 80.132 128.882 80.132 128.865 80.133 C 127.237 80.162 125.94 81.545 125.968 83.222 C 126.08 89.998 124.4 97.655 121.11 105.368 C 120.455 106.904 121.132 108.697 122.622 109.372 C 123.008 109.547 123.411 109.63 123.807 109.63 C 124.94 109.63 126.021 108.952 126.507 107.814 C 130.136 99.304 131.988 90.765 131.862 83.119 Z M 117.134 115.657 C 115.742 114.771 113.93 115.238 113.086 116.7 L 113.034 116.789 C 112.191 118.251 112.635 120.154 114.027 121.04 C 114.505 121.344 115.031 121.488 115.552 121.488 C 116.549 121.488 117.521 120.958 118.075 119.997 L 118.127 119.908 C 118.971 118.446 118.526 116.543 117.134 115.657 Z" android:fillColor="#ffffff" android:strokeWidth="1"/>
+                <path android:name="path_4" android:pathData="M 58.361 59.823 C 57.794 59.971 57.19 59.884 56.682 59.574 C 54.947 58.525 39.661 49.068 37.494 40.77 C 35.189 31.939 39.988 23.014 48.192 20.872 C 56.397 18.73 64.946 24.17 67.251 33 C 69.418 41.299 60.706 57.02 59.705 58.785 C 59.413 59.303 58.929 59.675 58.361 59.823 Z M 49.321 25.2 C 43.461 26.73 40.063 33.217 41.745 39.66 C 42.9 44.081 51.016 50.62 56.974 54.517 C 59.774 49.119 64.264 38.949 63.001 34.11 C 61.318 27.668 55.182 23.67 49.321 25.2 Z" android:fillColor="#ffffff" android:strokeWidth="1"/>
+                <path android:name="path_5" android:pathData="M 58.113 41.402 L 49.611 43.622 C 48.438 43.928 47.233 43.208 46.92 42.012 L 44.66 33.356 C 44.348 32.159 45.048 30.944 46.221 30.638 L 54.723 28.418 C 55.896 28.112 57.101 28.83 57.414 30.027 L 59.674 38.682 C 59.986 39.879 59.286 41.095 58.113 41.402 Z M 50.607 38.739 L 54.858 37.629 L 53.728 33.301 L 49.477 34.411 Z" android:fillColor="#ffffff" android:strokeWidth="1"/>
+                <path android:name="path_6" android:pathData="M 139.953 17.263 C 132.937 15.254 125.566 19.43 123.52 26.572 C 122.861 28.874 124.159 31.265 126.419 31.912 C 128.68 32.559 131.047 31.218 131.706 28.917 C 132.436 26.37 135.064 24.882 137.565 25.598 C 140.066 26.314 141.508 28.969 140.779 31.515 C 140.049 34.061 137.421 35.551 134.92 34.834 C 132.659 34.187 130.292 35.528 129.633 37.829 L 128.876 40.47 C 128.217 42.772 129.516 45.163 131.776 45.81 C 133.744 46.374 135.792 45.431 136.725 43.659 C 142.274 43.396 147.328 39.579 148.966 33.86 C 151.012 26.718 146.968 19.272 139.953 17.263 Z" android:fillColor="#ffffff" android:strokeWidth="1"/>
+                <path android:name="path_7" android:pathData="M 106.447 46.308 L 83.923 46.308 C 81.943 46.308 80.332 44.655 80.332 42.624 C 80.332 40.593 81.943 38.94 83.923 38.94 L 99.591 38.94 C 100.852 38.94 101.876 37.889 101.876 36.596 C 101.876 35.304 100.852 34.252 99.591 34.252 L 79.353 34.252 C 77.373 34.252 75.762 32.599 75.762 30.568 C 75.762 28.538 77.373 26.885 79.353 26.885 L 111.669 26.885 C 112.929 26.885 113.954 25.833 113.954 24.541 C 113.954 23.248 112.929 22.196 111.669 22.196 L 87.84 22.196 C 85.86 22.196 84.249 20.544 84.249 18.513 C 84.249 16.482 85.86 14.829 87.84 14.829 L 105.467 14.829 C 106.727 14.829 107.752 13.777 107.752 12.485 C 107.752 11.192 106.727 10.141 105.467 10.141 L 88.82 10.141 C 88.459 10.141 88.167 9.841 88.167 9.471 C 88.167 9.1 88.459 8.801 88.82 8.801 L 105.467 8.801 C 107.447 8.801 109.058 10.454 109.058 12.485 C 109.058 14.515 107.447 16.168 105.467 16.168 L 87.84 16.168 C 86.58 16.168 85.555 17.22 85.555 18.513 C 85.555 19.805 86.58 20.857 87.84 20.857 L 111.669 20.857 C 113.649 20.857 115.26 22.51 115.26 24.541 C 115.26 26.571 113.649 28.224 111.669 28.224 L 79.353 28.224 C 78.093 28.224 77.068 29.276 77.068 30.568 C 77.068 31.861 78.093 32.913 79.353 32.913 L 99.591 32.913 C 101.571 32.913 103.182 34.566 103.182 36.596 C 103.182 38.627 101.571 40.28 99.591 40.28 L 83.923 40.28 C 82.663 40.28 81.638 41.332 81.638 42.624 C 81.638 43.917 82.663 44.968 83.923 44.968 L 106.447 44.968 C 106.807 44.968 107.099 45.268 107.099 45.638 C 107.099 46.008 106.807 46.308 106.447 46.308 Z" android:fillColor="#ffffff" android:strokeWidth="1"/>
+            </group>
+        </vector>
+    </aapt:attr>
+    <target android:name="group">
+        <aapt:attr name="android:animation">
+            <set>
+                <objectAnimator android:propertyName="scaleX" android:startOffset="200" android:duration="600" android:valueFrom="0" android:valueTo="0.6" android:valueType="floatType" android:interpolator="@android:anim/overshoot_interpolator"/>
+                <objectAnimator android:propertyName="scaleY" android:startOffset="200" android:duration="600" android:valueFrom="0" android:valueTo="0.6" android:valueType="floatType" android:interpolator="@android:anim/overshoot_interpolator"/>
+            </set>
+        </aapt:attr>
+    </target>
+</animated-vector>