From 9bce5dc4db0822d2038761443fdd72369bee06c0 Mon Sep 17 00:00:00 2001
From: Justus Tumacder <JustusFT@gmail.com>
Date: Thu, 19 Jan 2023 15:20:25 +0800
Subject: [PATCH] Prevent mobile browsers from sleeping during transfer (#125)

We use nosleep.js to provide sleep prevention by playing a video offscreen.
Its activation is tied with user interaction events to work around browsers that
block autoplay.
---
 client/package-lock.json                              | 11 +++++++++++
 client/package.json                                   |  1 +
 client/src/app/NoSleep.ts                             |  3 +++
 client/src/app/components/Dropzone.tsx                |  6 +++++-
 .../src/app/components/providers/WormholeProvider.tsx |  7 +++++++
 .../components/screens/receive/ReceiveBeginScreen.tsx | 10 +++++++++-
 .../screens/receive/ReceiveConsentScreen.tsx          |  2 ++
 .../app/components/screens/send/SendBeginScreen.tsx   |  5 +++++
 client/src/app/index.development.tsx                  |  1 +
 client/src/app/index.production.tsx                   |  1 +
 10 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 client/src/app/NoSleep.ts

diff --git a/client/package-lock.json b/client/package-lock.json
index 9b01a8bf..4e68d28f 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -18,6 +18,7 @@
         "bowser": "^2.11.0",
         "classnames": "^2.3.1",
         "fastest-levenshtein": "^1.0.12",
+        "nosleep.js": "^0.12.0",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
         "react-dropzone": "^14.2.1",
@@ -21337,6 +21338,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/nosleep.js": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/nosleep.js/-/nosleep.js-0.12.0.tgz",
+      "integrity": "sha512-9d1HbpKLh3sdWlhXMhU6MMH+wQzKkrgfRkYV0EBdvt99YJfj0ilCJrWRDYG2130Tm4GXbEoTCx5b34JSaP+HhA=="
+    },
     "node_modules/now-and-later": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/now-and-later/-/now-and-later-2.0.1.tgz",
@@ -44076,6 +44082,11 @@
       "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
       "dev": true
     },
+    "nosleep.js": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/nosleep.js/-/nosleep.js-0.12.0.tgz",
+      "integrity": "sha512-9d1HbpKLh3sdWlhXMhU6MMH+wQzKkrgfRkYV0EBdvt99YJfj0ilCJrWRDYG2130Tm4GXbEoTCx5b34JSaP+HhA=="
+    },
     "now-and-later": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/now-and-later/-/now-and-later-2.0.1.tgz",
diff --git a/client/package.json b/client/package.json
index ee4dc300..4d274ed2 100644
--- a/client/package.json
+++ b/client/package.json
@@ -20,6 +20,7 @@
     "bowser": "^2.11.0",
     "classnames": "^2.3.1",
     "fastest-levenshtein": "^1.0.12",
+    "nosleep.js": "^0.12.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-dropzone": "^14.2.1",
diff --git a/client/src/app/NoSleep.ts b/client/src/app/NoSleep.ts
new file mode 100644
index 00000000..64ec2f34
--- /dev/null
+++ b/client/src/app/NoSleep.ts
@@ -0,0 +1,3 @@
+import nosleep from "nosleep.js";
+
+export const NoSleep = new nosleep();
diff --git a/client/src/app/components/Dropzone.tsx b/client/src/app/components/Dropzone.tsx
index f2a3cf9a..1e510395 100644
--- a/client/src/app/components/Dropzone.tsx
+++ b/client/src/app/components/Dropzone.tsx
@@ -13,6 +13,7 @@ import classNames from "classnames";
 import React from "react";
 import { FileRejection, useDropzone } from "react-dropzone";
 import { Plus } from "tabler-icons-react";
+import { NoSleep } from "../NoSleep";
 import Link from "./Link";
 
 const useStyles = createStyles((theme) => ({
@@ -96,7 +97,10 @@ export default function Dropzone(props: Props) {
   const button = (
     <Group position="center">
       <Button
-        onClick={open}
+        onClick={() => {
+          NoSleep.enable();
+          open();
+        }}
         className={classNames(classes.dropzoneButton)}
         color="tertiary"
       >
diff --git a/client/src/app/components/providers/WormholeProvider.tsx b/client/src/app/components/providers/WormholeProvider.tsx
index edf0effc..1b252ce4 100644
--- a/client/src/app/components/providers/WormholeProvider.tsx
+++ b/client/src/app/components/providers/WormholeProvider.tsx
@@ -2,6 +2,7 @@ import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
 import { useCodeInput } from "../../hooks/useCodeInput";
 import { useError } from "../../hooks/useError";
 import { useRateLimitedState } from "../../hooks/useRateLimitedState";
+import { NoSleep } from "../../NoSleep";
 import { PROGRESS_BAR_MS_PER_UPDATES } from "../../util/constants";
 import { detectErrorType, ErrorTypes } from "../../util/errors";
 import ClientWorker from "../../wormhole/client_worker";
@@ -181,6 +182,12 @@ export default function WormholeProvider(props: Props) {
     );
   }, []);
 
+  useEffect(() => {
+    if (!fileMeta || done) {
+      NoSleep.disable();
+    }
+  }, [fileMeta, done]);
+
   async function sendFile(
     file: File,
     opts?: TransferOptions
diff --git a/client/src/app/components/screens/receive/ReceiveBeginScreen.tsx b/client/src/app/components/screens/receive/ReceiveBeginScreen.tsx
index b9247e00..bf1a7c5b 100644
--- a/client/src/app/components/screens/receive/ReceiveBeginScreen.tsx
+++ b/client/src/app/components/screens/receive/ReceiveBeginScreen.tsx
@@ -1,10 +1,11 @@
 import { Modal, Space, Text } from "@mantine/core";
-import React from "react";
+import React, { useEffect } from "react";
 import { useCancelModal } from "../../../hooks/useCancelModal";
 import { useCodeInput } from "../../../hooks/useCodeInput";
 import { useCommonStyles } from "../../../hooks/useCommonStyles";
 import { useError } from "../../../hooks/useError";
 import { useWormhole } from "../../../hooks/useWormhole";
+import { NoSleep } from "../../../NoSleep";
 import { detectErrorType } from "../../../util/errors";
 import CodeInput from "../../CodeInput";
 import Content from "../../Content";
@@ -58,11 +59,18 @@ export default function ReceiveBeginScreen({}: Props) {
   const error = useError();
   const codeInput = useCodeInput();
 
+  useEffect(() => {
+    if (error?.error) {
+      NoSleep.disable();
+    }
+  }, [error]);
+
   return (
     <ReceiveBeginScreenContent
       cancelModalOpen={cancelModal}
       onCancelModalClose={() => setCancelModal(false)}
       onSubmit={(code) => {
+        NoSleep.enable();
         if (wormhole) {
           codeInput?.setSubmitting(true);
           wormhole
diff --git a/client/src/app/components/screens/receive/ReceiveConsentScreen.tsx b/client/src/app/components/screens/receive/ReceiveConsentScreen.tsx
index 7b206ec6..949545ce 100644
--- a/client/src/app/components/screens/receive/ReceiveConsentScreen.tsx
+++ b/client/src/app/components/screens/receive/ReceiveConsentScreen.tsx
@@ -6,6 +6,7 @@ import { useError } from "../../../hooks/useError";
 import { useNavigate } from "../../../hooks/useNavigate";
 import { onTabExit, useTabExitWarning } from "../../../hooks/useTabExitWarning";
 import { useWormhole } from "../../../hooks/useWormhole";
+import { NoSleep } from "../../../NoSleep";
 import { detectErrorType } from "../../../util/errors";
 import Content from "../../Content";
 import FileLabel from "../../FileLabel";
@@ -75,6 +76,7 @@ export default function ReceiveConsentScreen({}: Props) {
     <ReceiveConsentScreenContent
       submitting={submitting}
       onAccept={() => {
+        NoSleep.enable();
         setSubmitting(true);
         wormhole?.fileMeta
           ?.accept()
diff --git a/client/src/app/components/screens/send/SendBeginScreen.tsx b/client/src/app/components/screens/send/SendBeginScreen.tsx
index 12f835a6..5d947d3f 100644
--- a/client/src/app/components/screens/send/SendBeginScreen.tsx
+++ b/client/src/app/components/screens/send/SendBeginScreen.tsx
@@ -4,6 +4,7 @@ import { FileRejection } from "react-dropzone";
 import { useCancelModal } from "../../../hooks/useCancelModal";
 import { useCommonStyles } from "../../../hooks/useCommonStyles";
 import { useWormhole } from "../../../hooks/useWormhole";
+import { NoSleep } from "../../../NoSleep";
 import Content from "../../Content";
 import Dropzone from "../../Dropzone";
 import Link from "../../Link";
@@ -139,6 +140,10 @@ export default function SendBeginScreen(props: Props) {
         wormhole?.sendFile(files[0]);
       }}
       onReject={(rejections) => {
+        if (rejections.length) {
+          NoSleep.disable();
+        }
+
         if (rejections.length > 1) {
           setModalState("DIRECTORIES_NOT_SUPPORTED");
         } else if (rejections.length == 1) {
diff --git a/client/src/app/index.development.tsx b/client/src/app/index.development.tsx
index f10506f4..c89bd308 100644
--- a/client/src/app/index.development.tsx
+++ b/client/src/app/index.development.tsx
@@ -15,6 +15,7 @@ import CodeInputProvider from "./components/providers/CodeInputProvider";
 import ErrorProvider from "./components/providers/ErrorProvider";
 import ThemeProvider from "./components/providers/ThemeProvider";
 import WormholeProvider from "./components/providers/WormholeProvider";
+import "./NoSleep";
 
 Sentry.init({
   dsn: process.env["SENTRY_DSN"],
diff --git a/client/src/app/index.production.tsx b/client/src/app/index.production.tsx
index ec05735e..732835ff 100644
--- a/client/src/app/index.production.tsx
+++ b/client/src/app/index.production.tsx
@@ -7,6 +7,7 @@ import CodeInputProvider from "./components/providers/CodeInputProvider";
 import ErrorProvider from "./components/providers/ErrorProvider";
 import ThemeProvider from "./components/providers/ThemeProvider";
 import WormholeProvider from "./components/providers/WormholeProvider";
+import "./NoSleep";
 
 ReactDOM.render(
   <CodeInputProvider>