build android to r2

.github/workflows/build.yml

@@ -23,26 +23,45 @@ jobs:
           OP_SERVICE_ACCOUNT_TOKEN: ${{ secrets.OP_SERVICE_ACCOUNT_TOKEN }}
           AWS_KEY_ID: "op://DevOps/cloudflare-r2-token/access-key-id"
           AWS_SECRET_ACCESS_KEY: "op://DevOps/cloudflare-r2-token/secret-access-key"
+          RELEASE_KEYSTORE: "op://DevOps/btt-android-keystore-key/base64-encoded-jks"
+          RELEASE_KEYSTORE_PASSWORD: "op://DevOps/btt-android-keystore-key/keystore-password"
           ENDPOINT: "op://DevOps/cloudflare-r2-token/endpoint"
       - name:
           Install JS dependencies and build
           # ADD YOUR CUSTOM DEPENDENCY UPGRADE COMMANDS BELOW
         run: |
-          npm ci && npm run build-ios
+          npm ci && npm run build-ios && npm run build-android
         env:
           VITE_POLICY_KEY: ${{ secrets.VITE_POLICY_KEY }}
           VITE_BC_ACCOUNT_ID: ${{ secrets.VITE_BC_ACCOUNT_ID }}
       - name: Get current date
         id: date
         run: echo "date=$(date +'%Y-%m-%d')"  >> "$GITHUB_OUTPUT"
-      - name: zip the built folder
-        run: mkdir ./dottmp && zip -r ./dottmp/${{steps.date.outputs.date}}-dotapp ./ios
-      - name: Upload IOS to R2
+      - name: Build app bundle
+        run: cd android && ./gradlew bundle
+      - name: Extract Android signing key from env
+        run: |
+          echo "${{ secrets.RELEASE_KEYSTORE }}" > android/release.jks.base64
+          base64 -d android/release.jks.base64 > android/release.decrypted.jks
+      - name: Sign dev build
+        run: jarsigner -keystore android/release.decrypted.jks -storepass "${{ secrets.RELEASE_KEYSTORE_PASSWORD }}" -signedjar ./android/app/build/outputs/bundle/release/app-release-signed.aab ./android/app/build/outputs/bundle/release/app-release.aab release
+      - name: Upload Android to R2
         uses: shallwefootball/s3-upload-action@master
         with:
           aws_key_id: ${{ env.AWS_KEY_ID }}
           aws_secret_access_key: ${{ env.AWS_SECRET_ACCESS_KEY}}
           aws_bucket: dot-mobile
-          source_dir: "./dottmp"
-          destination_dir: "ios"
+          source_dir: "./android/app/build/outputs/bundle/release"
+          destination_dir: "android/${{steps.date.outputs.date}}"
           endpoint: ${{ env.ENDPOINT }}
+      # - name: zip the built folder
+      #   run: mkdir ./dottmp && zip -r ./dottmp/${{steps.date.outputs.date}}-dotapp ./ios
+      # - name: Upload IOS to R2
+      #   uses: shallwefootball/s3-upload-action@master
+      #   with:
+      #     aws_key_id: ${{ env.AWS_KEY_ID }}
+      #     aws_secret_access_key: ${{ env.AWS_SECRET_ACCESS_KEY}}
+      #     aws_bucket: dot-mobile
+      #     source_dir: "./dottmp"
+      #     destination_dir: "ios"
+      #     endpoint: ${{ env.ENDPOINT }}

android/app/src/main/AndroidManifest.xml

@@ -1,39 +1,14 @@
-<?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:largeHeap="true"
-    android:roundIcon="@mipmap/ic_launcher_round"
-    android:supportsRtl="true"
-    android:theme="@style/AppTheme"
-    android:usesCleartextTraffic="true"
-  >
-        <activity
-      android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
-      android:exported="true"
-      android:label="@string/title_activity_main"
-      android:launchMode="singleTask"
-      android:name=".MainActivity"
-      android:theme="@style/AppTheme.NoActionBarLaunch"
-      android:screenOrientation="fullUser"
-    >
+    <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:largeHeap="true" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme" android:usesCleartextTraffic="true">
+        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode" android:exported="true" android:label="@string/title_activity_main" android:launchMode="singleTask" android:name=".MainActivity" android:screenOrientation="fullUser" android:supportsPictureInPicture="true" android:theme="@style/AppTheme.NoActionBarLaunch">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
                 <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
         </activity>
-        <provider
-      android:authorities="${applicationId}.fileprovider"
-      android:exported="false"
-      android:grantUriPermissions="true"
-      android:name="androidx.core.content.FileProvider"
-    >
-            <meta-data
-        android:name="android.support.FILE_PROVIDER_PATHS"
-        android:resource="@xml/file_paths"
-      />
+        <provider android:authorities="${applicationId}.fileprovider" android:exported="false" android:grantUriPermissions="true" android:name="androidx.core.content.FileProvider">
+            <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths" />
         </provider>
     </application>
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

android/app/src/main/java/com/slbible/MainActivity.java

@@ -2,4 +2,7 @@
 
 import com.getcapacitor.BridgeActivity;
 
-public class MainActivity extends BridgeActivity {}
+public class MainActivity extends BridgeActivity {
+
+}
+

package.json

@@ -11,6 +11,7 @@
     "test.unit": "vitest",
     "lint": "biome check --apply --verbose  src/**/* src/",
     "build-ios": "ionic capacitor build ios --release --prod --no-open",
+    "build-android": "ionic capacitor build android --release --prod --no-open",
     "ios": "npm run build && npm run sync && npx cap run ios",
     "android": "npm run build && npx cap run android",
     "sync": "cap sync",

src/components/Player.tsx

@@ -1,11 +1,8 @@
 import { Capacitor } from "@capacitor/core";
+import { useIonViewWillLeave } from "@ionic/react";
 import { Dispatch, SetStateAction, useEffect, useRef } from "react";
 import { VideoJsPlayer } from "video.js";
-import {
-	IVidWithCustom,
-	changePlayerSrcParams,
-	chapterMarkers,
-} from "../customTypes/types";
+import { IVidWithCustom, chapterMarkers } from "../customTypes/types";
 import { handleVideoJsTaps, playerCustomHotKeys } from "../lib/Ui";
 import { getSavedAppPreferences } from "../lib/storage";
 type Iplayer = {
@@ -71,6 +68,7 @@ export function VidJsPlayer({
 				fullscreen: {
 					navigationUI: "show",
 				},
+				enableDocumentPictureInPicture: true,
 				sources: firstVidSrces,
 				poster: firstPoster,
 				nativeControlsForTouch: true,

src/lib/Ui.tsx

@@ -81,6 +81,7 @@ export async function fetchRemoteChaptersFile(src: string) {
 }
 export function cleanUpOldChapters() {
 	const elements = document.querySelectorAll('[data-role="chapterMarker"]');
+
 	for (const element of elements) {
 		element.remove();
 	}

src/pages/Playlist.tsx

@@ -1,3 +1,4 @@
+import { Capacitor } from "@capacitor/core";
 import { Preferences } from "@capacitor/preferences";
 import {
 	IonAlert,
@@ -8,6 +9,7 @@ import {
 	IonToolbar,
 	useIonViewWillEnter,
 } from "@ionic/react";
+import { useIonViewWillLeave } from "@ionic/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router";
@@ -359,11 +361,35 @@ function Playlist() {
 	}
 
 	/*// #=============== END PAGE FUNCTIONS   =============   */
+	async function requestPip() {
+		console.log("REQUESTING PIP");
+		if (vidJsPlayer) {
+			// vidJsPlayer.pic
+			// const pip = await vidJsPlayer.requestPictureInPicture();
+			// console.log({pip});
+			const videoEl = document.querySelector(
+				"#vidJsPlayerContainer video",
+			) as HTMLVideoElement;
+			console.log(!!videoEl);
+
+			try {
+				await videoEl.requestPictureInPicture();
+			} catch (error) {
+				console.error(error);
+				// TODO: Show error message to user.
+			}
+		}
+		// if (Capacitor.getPlatform() === "android" && vidJsPlayer) {
+		//   alert("going to ask pip");
+		//   await existingPlayer.requestPictureInPicture();
+		//   console.log("LEAVING");
+		// }
+	}
 
 	useIonViewWillEnter(() => {
 		fetchAndSetup();
 	}, []);
-
+	// useIonViewWillLeave(() => {}, [vidJsPlayer]);
 	// MANAGE EFFECTS FOR HEN PLAYER CHANGES
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: <biome not aware enough of code deps here to say>
@@ -450,6 +476,13 @@ function Playlist() {
 									setShapedPlaylist={setShapedPlaylist}
 									setCurrentBook={setCurrentBook}
 								/>
+								<button
+									className="m-4 bg-blue-700 text-white p-3 font-bold"
+									type="button"
+									onClick={requestPip}
+								>
+									Pip me
+								</button>
 								{currentBook && (
 									<ChapterSelector
 										showChapSliderButtons={showChapSliderButtons}

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
+    "target": "es5",
+    "downlevelIteration": true,
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,