feat: Keep screen awake (#3066)

packages/neuron-ui/src/components/GeneralSetting/generalSetting.module.scss

@@ -4,22 +4,27 @@ $action-button-width: 11.25rem;
 
 .container {
   display: flex;
+  flex-wrap: wrap;
   width: 100%;
+  gap: 16px;
 
   .content {
     width: 176px;
     padding: 16px;
     background: var(--input-disabled-color);
     border-radius: 8px;
-    margin-right: 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex-shrink: 0;
 
     p {
       font-size: 14px;
       line-height: 20px;
       margin: 0 0 12px;
       color: var(--main-text-color);
     }
-    button {
+    button[data-button-type='text'] {
       font-size: 14px;
       line-height: 20px;
       border: none;

packages/neuron-ui/src/components/GeneralSetting/index.tsx

@@ -8,8 +8,10 @@ import { ReactComponent as VersionLogo } from 'widgets/Icons/VersionLogo.svg'
 import { ReactComponent as ArrowNext } from 'widgets/Icons/ArrowNext.svg'
 import { ReactComponent as Update } from 'widgets/Icons/Update.svg'
 import { cancelCheckUpdates, downloadUpdate, installUpdate, getVersion } from 'services/remote'
-import { uniformTimeFormatter, bytesFormatter, clsx } from 'utils'
+import { uniformTimeFormatter, bytesFormatter, clsx, wakeScreen, releaseWakeLock } from 'utils'
 import { LanguageSelect } from 'widgets/Icons/icon'
+import Switch from 'widgets/Switch'
+import { keepScreenAwake } from 'services/localCache'
 import styles from './generalSetting.module.scss'
 import { useCheckUpdate, useUpdateDownloadStatus } from './hooks'
 
@@ -173,13 +175,29 @@ const GeneralSetting = ({ updater }: GeneralSettingProps) => {
     }
   }, [updater.errorMsg, setErrorMsg])
 
+  const [isScreenKeepAwake, setIsScreenKeepAwake] = useState(keepScreenAwake.get())
+  const onChangeScreenKeepAwake = useCallback((v: boolean) => {
+    keepScreenAwake.save(v)
+    setIsScreenKeepAwake(v)
+    if (v) {
+      wakeScreen()
+    } else {
+      releaseWakeLock()
+    }
+  }, [])
+
   return (
     <div className={styles.container}>
       <div className={clsx(styles.content, `${newVersion ? styles.showVersion : ''}`)} data-new-version-tip="New">
         <p>
           {t('settings.general.version')} v{newVersion || currentVersion}
         </p>
-        <button type="button" onClick={newVersion ? openShowUpdateDownloadStatus : onCheckUpdate} data-method="check">
+        <button
+          type="button"
+          data-button-type="text"
+          onClick={newVersion ? openShowUpdateDownloadStatus : onCheckUpdate}
+          data-method="check"
+        >
           <Update />
           {t(newVersion ? 'updates.install-update' : 'updates.check-updates')} <ArrowNext />
         </button>
@@ -189,6 +207,7 @@ const GeneralSetting = ({ updater }: GeneralSettingProps) => {
         <p>{t('settings.general.language')}</p>
         <button
           type="button"
+          data-button-type="text"
           onClick={() => {
             setShowLangDialog(true)
           }}
@@ -197,6 +216,10 @@ const GeneralSetting = ({ updater }: GeneralSettingProps) => {
           {t(`settings.locale.${i18n.language}`)}
         </button>
       </div>
+      <div className={clsx(styles.content, styles.lockWindow)}>
+        <p>{t('settings.general.keep-awake')}</p>
+        <Switch checked={isScreenKeepAwake} onChange={onChangeScreenKeepAwake} />
+      </div>
 
       <AlertDialog
         show={!!errorMsg}

packages/neuron-ui/src/components/Settings/settings.module.scss

@@ -18,7 +18,7 @@
     }
 
     .content {
-      width: 100%;
+      width: calc(100% - 68px);
       padding-bottom: 24px;
       border-bottom: 1px solid var(--input-border-color);
     }

packages/neuron-ui/src/containers/Main/index.tsx

@@ -1,8 +1,8 @@
-import React, { useCallback, useMemo } from 'react'
+import React, { useCallback, useMemo, useEffect } from 'react'
 import { useNavigate, useLocation, Outlet } from 'react-router-dom'
 import { Trans, useTranslation } from 'react-i18next'
 import { useState as useGlobalState, useDispatch, dismissGlobalAlertDialog } from 'states'
-import { useMigrate, useOnDefaultContextMenu, useOnLocaleChange } from 'utils'
+import { useMigrate, useOnDefaultContextMenu, useOnLocaleChange, wakeScreen } from 'utils'
 import AlertDialog from 'widgets/AlertDialog'
 import Dialog from 'widgets/Dialog'
 import Button from 'widgets/Button'
@@ -12,6 +12,7 @@ import { AddSimple } from 'widgets/Icons/icon'
 import DataPathDialog from 'widgets/DataPathDialog'
 import NoDiskSpaceWarn from 'widgets/Icons/NoDiskSpaceWarn.png'
 import MigrateCkbDataDialog from 'widgets/MigrateCkbDataDialog'
+import { keepScreenAwake } from 'services/localCache'
 import styles from './main.module.scss'
 import { useSubscription, useSyncChainData, useOnCurrentWalletChange, useCheckNode, useNoDiskSpace } from './hooks'
 
@@ -87,6 +88,12 @@ const MainContent = () => {
   } = useNoDiskSpace(navigate)
   const needConfirm = newCkbDataPath && newCkbDataPath !== oldCkbDataPath
 
+  useEffect(() => {
+    if (keepScreenAwake.get()) {
+      wakeScreen()
+    }
+  }, [])
+
   return (
     <div onContextMenu={onContextMenu}>
       <Outlet />

packages/neuron-ui/src/locales/en.json

@@ -394,7 +394,8 @@
         "version": "Version",
         "language": "Language",
         "select-language": "Select Language",
-        "apply": "Apply"
+        "apply": "Apply",
+        "keep-awake": "Keep the screen awake during synchronization"
       },
       "wallet-manager": {
         "edit-wallet": {

packages/neuron-ui/src/locales/es.json

@@ -386,7 +386,8 @@
         "version": "Versión",
         "language": "Idioma",
         "select-language": "Seleccionar Idioma",
-        "apply": "Aplicar"
+        "apply": "Aplicar",
+        "keep-awake": "Mantener la pantalla encendida durante la sincronización"
       },
       "wallet-manager": {
         "edit-wallet": {

packages/neuron-ui/src/locales/fr.json

@@ -393,7 +393,8 @@
         "version": "Version",
         "language": "Langue",
         "select-language": "Sélectionner la langue",
-        "apply": "Appliquer"
+        "apply": "Appliquer",
+        "keep-awake": "Maintenir l'écran allumé pendant la synchronisation"
       },
       "wallet-manager": {
         "edit-wallet": {

packages/neuron-ui/src/locales/zh-tw.json

@@ -389,7 +389,8 @@
         "version": "版本",
         "language": "語言",
         "select-language": "選擇語言",
-        "apply": "應用"
+        "apply": "應用",
+        "keep-awake": "同步期間保持屏幕喚醒"
       },
       "wallet-manager": {
         "edit-wallet": {

packages/neuron-ui/src/locales/zh.json

@@ -387,7 +387,8 @@
         "version": "版本",
         "language": "系统语言",
         "select-language": "选择语言",
-        "apply": "应用"
+        "apply": "应用",
+        "keep-awake": "同步期间保持屏幕唤醒"
       },
       "wallet-manager": {
         "edit-wallet": {

packages/neuron-ui/src/services/localCache.ts

@@ -11,6 +11,7 @@ export enum LocalCacheKey {
   LoadedWalletIDs = 'loadedWalletIDs',
   ImportedWallet = 'ImportedWallet',
   ShownNodeId = 'ShownNodeId',
+  ScreenAwake = 'ScreenAwake',
 }
 
 export const addresses = {
@@ -165,3 +166,13 @@ export const lastShowInternalNodeIds = {
     window.localStorage.setItem(`${type}_${LocalCacheKey.ShownNodeId}`, id)
   },
 }
+
+export const keepScreenAwake = {
+  get: () => {
+    const value = window.localStorage.getItem(LocalCacheKey.ScreenAwake)
+    return !!value && value === 'true'
+  },
+  save: (value: boolean) => {
+    window.localStorage.setItem(LocalCacheKey.ScreenAwake, value.toString())
+  },
+}

packages/neuron-ui/src/utils/index.ts

@@ -28,5 +28,6 @@ export * from './multisig'
 export * from './getNetworkLabel'
 export * from './calculateUsedCapacity'
 export * from './outPointTransform'
+export * from './wakeScreen'
 
 export { CONSTANTS }

packages/neuron-ui/src/utils/wakeScreen.ts

@@ -0,0 +1,28 @@
+let wakeLock: WakeLockSentinel | undefined
+
+async function reAwake() {
+  if (document.visibilityState === 'visible') {
+    wakeLock = await navigator.wakeLock.request('screen')
+  } else {
+    wakeLock?.release()
+    wakeLock = undefined
+  }
+}
+
+export async function wakeScreen() {
+  if (wakeLock) return
+  try {
+    wakeLock = await navigator.wakeLock.request('screen')
+    document.addEventListener('visibilitychange', reAwake)
+  } catch (err) {
+    // do nothing here
+  }
+}
+
+export async function releaseWakeLock() {
+  if (wakeLock) {
+    await wakeLock.release()
+    document.removeEventListener('visibilitychange', reAwake)
+    wakeLock = undefined
+  }
+}