ui: show bg badge for mobile

frontend/app/components/Session/Player/MobilePlayer/PerfWarnings.tsx

@@ -13,7 +13,8 @@ type warningsType =
   | 'memoryWarning'
   | 'lowDiskSpace'
   | 'isLowPowerModeEnabled'
-  | 'batteryLevel';
+  | 'batteryLevel'
+  | 'background';
 
 const elements = {
   thermalState: {
@@ -36,12 +37,16 @@ const elements = {
     title: 'Low Battery',
     icon: 'battery',
   },
+  background: {
+    title: 'In Background',
+    icon: 'eye-slash'
+  },
 } as const;
 
 function PerfWarnings({ userDevice }: { userDevice: string }) {
   const { store } = React.useContext(MobilePlayerContext);
   const { uiPlayerStore } = useStore();
-  const { scale, performanceListNow, performanceList } = store.get()
+  const { scale, performanceListNow, performanceList, inBackground } = store.get()
   const bottomBlock = uiPlayerStore.bottomBlock;
   const allElements = Object.keys(elements) as warningsType[];
   const list = React.useMemo(() => allElements
@@ -65,7 +70,7 @@ function PerfWarnings({ userDevice }: { userDevice: string }) {
 
   const activeWarnings = React.useMemo(() => {
     const warnings: warningsType[] = []
-    performanceListNow.forEach((warn: IosPerformanceEvent & { techName: warningsType }) => {
+    performanceListNow.forEach((warn: MobilePerformanceEvent & { techName: warningsType }) => {
       switch (warn.techName) {
         case 'thermalState':
           if (warn.value > 1) warnings.push(warn.techName) // 2 = serious 3 = overheating
@@ -84,13 +89,22 @@ function PerfWarnings({ userDevice }: { userDevice: string }) {
           break;
       }
     })
-
     return warnings
   }, [performanceListNow.length]);
   if (bottomBlock !== NONE) return null;
-
   return (
     <div style={contStyles}>
+      {inBackground ? (
+        <div
+          className={cn(
+            'transition-all flex items-center gap-1 bg-white border rounded px-2 py-1',
+            'opacity-100',
+          )}
+        >
+          <Icon name={elements.background.icon} size={16} />
+          <span>{elements.background.title}</span>
+        </div>
+      ) : null}
       {list.map((w) => (
         <div
           className={cn(

frontend/app/player/mobile/IOSMessageManager.ts

@@ -12,6 +12,7 @@ import Lists, {
   INITIAL_STATE as LISTS_INITIAL_STATE,
   State as ListsState,
 } from './IOSLists';
+import ListWalker from '../common/ListWalker';
 import IOSPerformanceTrackManager, {
   PerformanceChartPoint,
 } from 'Player/mobile/managers/IOSPerformanceTrackManager';
@@ -75,6 +76,7 @@ export interface State extends ScreenState, ListsState {
   eventCount: number;
   updateWarnings: number;
   currentSnapshot: TarFile | null;
+  inBackground: boolean;
 }
 
 const userEvents = [
@@ -100,6 +102,7 @@ export default class IOSMessageManager implements IMessageManager {
     messagesProcessed: false,
     messagesLoading: false,
     currentSnapshot: null,
+    inBackground: false,
   };
 
   private activityManager: ActivityManager | null = null;
@@ -110,6 +113,7 @@ export default class IOSMessageManager implements IMessageManager {
   private touchManager: TouchManager;
   private lists: Lists;
   public snapshotManager: SnapshotManager;
+  private appFocusTracker = new ListWalker<{tp: 102, time: number, timestamp: number, value: number, name: string}>();
 
   constructor(
     private readonly session: Record<string, any>,
@@ -198,11 +202,18 @@ export default class IOSMessageManager implements IMessageManager {
     const stateToUpdate: Record<string, any> = {};
 
     const lastPerformanceTrackMessage = this.performanceManager.moveGetLast(t);
+    const lastAppFocusMessage = this.appFocusTracker.moveGetLast(t);
     if (lastPerformanceTrackMessage) {
       Object.assign(stateToUpdate, {
         performanceChartTime: lastPerformanceTrackMessage.time,
       });
     }
+    if (lastAppFocusMessage) {
+      console.log(lastAppFocusMessage)
+      Object.assign(stateToUpdate, {
+        inBackground: lastAppFocusMessage.value === 1,
+      });
+    }
 
     this.touchManager.move(t);
     if (
@@ -237,6 +248,9 @@ export default class IOSMessageManager implements IMessageManager {
         const performanceStats = ['background', 'memoryUsage', 'mainThreadCPU'];
         if (performanceStats.includes(msg.name)) {
           this.performanceManager.append(msg);
+          if (msg.name === 'background') {
+            this.appFocusTracker.append(msg);
+          }
         }
         if (performanceWarnings.includes(msg.name)) {
           // @ts-ignore