Audio System Refactor: Playback Stability, Background Service, Sync Optimisation, UI enhancement & Testing Improvements

.gitignore

@@ -41,12 +41,12 @@ android/node
 node_modules/
 npm-debug.log
 yarn-error.log
-
 # BUCK
 buck-out/
 \.buckd/
 *.keystore
 !debug.keystore
+*.jks
 
 # fastlane
 #
@@ -63,6 +63,7 @@ buck-out/
 # Bundle artifact
 *.jsbundle
 
+
 # Ruby / CocoaPods
 **/Pods/
 /vendor/bundle/
@@ -79,4 +80,6 @@ buck-out/
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions
+
+android/app/release/app-release/

README.md

@@ -193,6 +193,31 @@ Run tests with:
 yarn test
 ```
 
+## 🎵 Audio Assets (M4A)
+
+All audio files used in this app are in **M4A format** (AAC 128kbps inside an MP4 container). M4A is required over MP3 because ExoPlayer on Android can seek accurately within M4A files using the container's built-in index — this is what makes sync scroll work correctly on Android. MP3 seeking is estimate-based and causes progressive drift.
+
+### Creating M4A Files
+
+To convert a source audio file to the correct M4A format:
+
+```bash
+ffmpeg -y -i input.mp3 -codec:a aac -b:a 128k -map_metadata 0 -movflags +faststart output.m4a
+```
+
+- `-codec:a aac` — encodes audio as AAC inside an MP4 container
+- `-b:a 128k` — 128kbps constant bitrate
+- `-movflags +faststart` — moves the MP4 index (`moov` atom) to the front of the file so ExoPlayer can begin streaming instantly with a single HTTP request. **This flag is mandatory** — without it, streaming triggers multiple network round-trips before playback can start
+- `-map_metadata 0` — preserves original metadata tags
+
+### Important Notes
+
+- **Never use MP3** — ExoPlayer's inaccurate seeking on MP3 breaks sync scroll on Android
+- **Always include `-movflags +faststart`** — skipping it will cause buffering on stream seek
+- **File naming**: Use PascalCase (e.g. `JapjiSahib.m4a`, not `japji-sahib.m4a`)
+
+---
+
 ## 🤝 Contributing
 
 Contributions are welcome! Please feel free to submit a Pull Request.
@@ -239,4 +264,4 @@ For information, suggestions, or help, visit:
   <a href="https://www.banidb.com/">
     <img src="images/banidb-logo-full.png" alt="BaniDB" width="200" style="border-radius: 10px; margin: 10px;" />
   </a>
-</div>
+</div>

android/app/build.gradle

@@ -3,7 +3,10 @@ apply plugin: "org.jetbrains.kotlin.android"
 apply plugin: "com.facebook.react"
 apply plugin: "com.google.gms.google-services"
 apply plugin: "com.google.firebase.crashlytics"
-apply plugin: "com.google.firebase.firebase-perf"
+// firebase-perf plugin removed: the firebase-perf library and @react-native-firebase/perf
+// package are not in the project dependencies. The plugin rewrites OkHttp bytecode to inject
+// FirebasePerfOkHttpClient, which causes a NoClassDefFoundError crash at startup when the
+// library is absent. Re-add both the library and this plugin together if perf monitoring is needed.
 
 
 /**

android/app/src/main/AndroidManifest.xml

@@ -26,6 +26,7 @@
         </activity>
 
         <service android:name="com.doublesymmetry.trackplayer.service.MusicService"
+            android:label="@string/app_name"
             android:foregroundServiceType="mediaPlayback"
             android:exported="true"
             tools:replace="android:exported" />

android/app/src/main/java/com/WahegurooNetwork/SundarGutka/MainActivity.kt

@@ -10,6 +10,9 @@ import android.view.KeyEvent
 import android.content.Intent
 import android.content.pm.PackageManager
 import android.os.Build
+import androidx.core.view.WindowCompat
+import androidx.core.view.WindowInsetsCompat
+import androidx.core.view.WindowInsetsControllerCompat
 
 class MainActivity : ReactActivity() {
 
@@ -21,8 +24,33 @@ class MainActivity : ReactActivity() {
 
   override fun onCreate(savedInstanceState: Bundle?) {
       SplashScreen.show(this)
-      super.onCreate(null);
-    }
+      super.onCreate(null)
+      // Lay out content edge-to-edge so the window draws behind system bars.
+      WindowCompat.setDecorFitsSystemWindows(window, false)
+  }
+
+  /**
+   * Called every time the window regains/loses focus. We re-apply sticky-immersive
+   * flags here so they survive notification shade pulls, lock/unlock cycles, etc.
+   */
+  override fun onWindowFocusChanged(hasFocus: Boolean) {
+      super.onWindowFocusChanged(hasFocus)
+      if (hasFocus) {
+          hideSystemBars()
+      }
+  }
+
+  /**
+   * Set BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE so the system bars (status bar +
+   * gesture navigation bar) are hidden by default and reappear transiently when
+   * the user swipes from an edge, then auto-hide again without any app interaction.
+   */
+  private fun hideSystemBars() {
+      val controller = WindowInsetsControllerCompat(window, window.decorView)
+      controller.systemBarsBehavior =
+          WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
+      controller.hide(WindowInsetsCompat.Type.systemBars())
+  }
 
   /**
    * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]

android/app/src/main/res/values/colors.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="primary_dark">#2a3381</color>
+    <color name="primary_dark">#113979</color>
     <color name="primary_variant">#171d47dd</color>
     <color name="primary_accent">#5195ea</color>
 </resources>

android/app/src/main/res/values/styles.xml

@@ -7,6 +7,11 @@
         <item name="colorPrimaryDark">@color/primary_variant</item>
         <item name="colorAccent">@color/primary_accent</item>
         <item name="android:scrollbarThumbVertical">@drawable/scrollbar_vertical_thumb</item>
+        <!-- Edge-to-edge: draw content behind display cutouts (notches/punch-holes) -->
+        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
+        <!-- Make navigation bar and status bar transparent so app draws underneath -->
+        <item name="android:navigationBarColor">@android:color/transparent</item>
+        <item name="android:statusBarColor">@android:color/transparent</item>
     </style>
 
     <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">

app.js

@@ -1,37 +1,69 @@
 import React, { useEffect } from "react";
+import { AppState } from "react-native";
 import ErrorBoundary from "react-native-error-boundary";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import SplashScreen from "react-native-splash-screen";
 import Toast from "react-native-toast-message";
+import toastConfig from "./src/common/toastConfig";
 import { Provider } from "react-redux";
 import notifee, { EventType } from "@notifee/react-native";
 import { PersistGate } from "redux-persist/integration/react";
 import {
   createStore,
+  STRINGS,
   logError,
   initializeCrashlytics,
   FallBack,
   resetBadgeCount,
   navigateTo,
-  initializePerformanceMonitoring,
 } from "@common";
 import ThemeProvider from "./src/common/context/ThemeProvider";
 import { TrackPlayerSetup } from "./src/common/TrackPlayerUtils";
 import Navigation from "./src/navigation";
 
 const { store, persistor } = createStore();
+
+/**
+ * After redux-persist rehydrates the store, sync the localization library
+ * with the persisted language. Without this, STRINGS stays on the default
+ * locale (English) because redux-persist's REHYDRATE action does not
+ * trigger the setLanguage action creator where STRINGS.setLanguage() lives.
+ */
+const handleBeforeLift = () => {
+  const { language } = store.getState();
+  if (language) {
+    STRINGS.setLanguage(language);
+  }
+};
+
 const App = () => {
   useEffect(() => {
     // Code to run on component mount
     SplashScreen.hide(); // Hide the splash screen once everything is loaded
   }, []); // The empty array causes this effect to only run on mount
 
   useEffect(() => {
-    (async () => {
-      await initializePerformanceMonitoring();
+    const runSetup = async () => {
       await initializeCrashlytics();
       await TrackPlayerSetup();
-    })();
+    };
+
+    // Guard against OS-initiated background cold starts (service revival, FCM,
+    // Bluetooth events). startForeground() is blocked in background-restricted
+    // states on Android 12+, so we must not call setupPlayer() until the app is
+    // actually in the foreground. On a normal launcher tap AppState is already
+    // 'active' and we run immediately with no overhead.
+    if (AppState.currentState !== "active") {
+      const sub = AppState.addEventListener("change", (state) => {
+        if (state === "active") {
+          sub.remove();
+          runSetup().catch(logError);
+        }
+      });
+      return () => sub.remove();
+    }
+
+    runSetup().catch(logError);
   }, []);
 
   useEffect(() => {
@@ -51,12 +83,12 @@ const App = () => {
 
   return (
     <Provider store={store}>
-      <PersistGate loading={null} persistor={persistor}>
+      <PersistGate loading={null} persistor={persistor} onBeforeLift={handleBeforeLift}>
         <ThemeProvider>
           <ErrorBoundary onError={logError} FallbackComponent={FallBack}>
             <SafeAreaProvider>
               <Navigation />
-              <Toast />
+              <Toast config={toastConfig} />
             </SafeAreaProvider>
           </ErrorBoundary>
         </ThemeProvider>