feat: disable high power consumption without charger (#14281)

Co-authored-by: DarkSky <darksky2048@gmail.com>

packages/frontend/apps/electron-renderer/src/app/app.tsx

@@ -6,10 +6,10 @@ import { I18nProvider } from '@affine/core/modules/i18n';
 import createEmotionCache from '@affine/core/utils/create-emotion-cache';
 import { CacheProvider } from '@emotion/react';
 import { FrameworkRoot, getCurrentStore } from '@toeverything/infra';
-import { Suspense } from 'react';
+import { Suspense, useEffect } from 'react';
 import { RouterProvider } from 'react-router-dom';
 
-import { setupEffects } from './effects';
+import { setupEffects, useIsOnBattery } from './effects';
 import { DesktopLanguageSync } from './language-sync';
 import { DesktopThemeSync } from './theme-sync';
 
@@ -40,6 +40,15 @@ const future = {
 } as const;
 
 export function App() {
+  const isOnBattery = useIsOnBattery();
+
+  useEffect(() => {
+    document.body.classList.toggle('on-battery', isOnBattery);
+    return () => {
+      document.body.classList.remove('on-battery');
+    };
+  }, [isOnBattery]);
+
   return (
     <Suspense>
       <FrameworkRoot framework={frameworkProvider}>

packages/frontend/apps/electron-renderer/src/app/effects/index.ts

@@ -1,10 +1,14 @@
 import { setupEvents } from './events';
 import { setupModules } from './modules';
+import { setupPowerSourceStore } from './power';
 import { setupStoreManager } from './store-manager';
 
 export function setupEffects() {
   const { framework, frameworkProvider } = setupModules();
   setupStoreManager(framework);
   setupEvents(frameworkProvider);
+  setupPowerSourceStore();
   return { framework, frameworkProvider };
 }
+
+export { useIsOnBattery } from './power';

packages/frontend/apps/electron-renderer/src/app/effects/power.ts

@@ -0,0 +1,54 @@
+import { useSyncExternalStore } from 'react';
+
+type Listener = () => void;
+
+let snapshot = false;
+let teardown: (() => void) | null = null;
+const listeners = new Set<Listener>();
+
+function emitChange() {
+  listeners.forEach(listener => listener());
+}
+
+function handlePowerSourceChange(isOnBattery: boolean) {
+  if (snapshot === isOnBattery) return;
+  snapshot = isOnBattery;
+  emitChange();
+}
+
+function ensureSubscribed() {
+  if (teardown) return;
+  if (typeof window === 'undefined') return;
+
+  const subscribePowerSource = window.__apis?.events?.power?.['power-source'];
+  if (typeof subscribePowerSource !== 'function') return;
+
+  const unsubscribe = subscribePowerSource(handlePowerSourceChange);
+  teardown = typeof unsubscribe === 'function' ? unsubscribe : null;
+}
+
+function subscribe(listener: Listener) {
+  listeners.add(listener);
+  if (listeners.size === 1) {
+    ensureSubscribed();
+  }
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0) {
+      teardown?.();
+      teardown = null;
+    }
+  };
+}
+
+export function setupPowerSourceStore() {
+  ensureSubscribed();
+}
+
+export function getIsOnBatterySnapshot() {
+  return snapshot;
+}
+
+export function useIsOnBattery() {
+  return useSyncExternalStore(subscribe, getIsOnBatterySnapshot, () => false);
+}

packages/frontend/apps/electron-renderer/src/app/global.css

@@ -23,3 +23,12 @@ html[data-active='true']:has([data-translucent='true']) {
   opacity: 1;
   transition: opacity 0.2s;
 }
+
+/**
+ * Disable animations and transitions when on battery.
+ * We use :not(.playwright-test) to ensure tests (which rely on animations) don't break.
+ */
+body.on-battery:not(.playwright-test) * {
+  animation-duration: 0ms !important;
+  transition-duration: 0ms !important;
+}

packages/frontend/apps/electron-renderer/src/global.d.ts

@@ -0,0 +1,16 @@
+import type { apis, events } from '@affine/electron-api';
+
+/**
+ * Extends the global Window interface to include AFFiNE's 
+ * Electron bridge APIs and event emitters.
+ */
+declare global {
+  interface Window {
+    __apis?: {
+      apis: typeof apis;
+      events: typeof events;
+    };
+  }
+}
+
+export {};