Acquire wake lock while recording audio

README.md

@@ -58,3 +58,6 @@ The app loads runtime configutation from the server at "./config.json" and merge
 * Run the "create sticker config" script using "npm run create-sticker-config <path-to-sticker-packs>"
 * Insert the resulting config blob into the "shortCodeStickers" value of the config file (assets/config.json)
 * Rearrange order of sticker packs by editing the config blob above.
+
+### Attributions
+Sounds from [Notification Sounds](https://notificationsounds.com)

src/components/VoiceRecorder.vue

@@ -2,10 +2,10 @@
   <transition name="grow" mode="out-in">
     <div
       v-show="show"
-      :class="{ 'voice-recorder': true, ptt: ptt, row: !ptt }"
+      :class="{ 'voice-recorder': true, ptt: usePTT, row: !usePTT }"
       ref="vrroot"
     >
-      <v-container v-if="!ptt" fluid fill-height>
+      <v-container v-if="!usePTT" fluid fill-height>
         <v-row align="center" class="mt-3">
           <v-col cols="4" align="center">
             <v-btn v-show="state == states.RECORDED" icon @click.stop="redo">
@@ -71,7 +71,7 @@
               {{ recordingTime }}
             </div>
           </v-col>
-          <v-col cols="6" v-if="ptt">
+          <v-col cols="6" v-if="usePTT">
             <div class="swipe-info">
               &lt;&lt; {{ $t("voice_recorder.swipe_to_cancel") }}
             </div>
@@ -146,7 +146,7 @@
       </div>
 
       <VoiceRecorderLock
-        v-show="state == states.RECORDING && ptt"
+        v-show="state == states.RECORDING && usePTT"
         :style="lockButtonStyle"
         :isLocked="recordingLocked"
       />
@@ -209,6 +209,9 @@ export default {
       errorMessage: null,
       recorder: null,
       previewPlayer: null,
+      wakeLock: null,
+      maxRecordingLength: 120, // In seconds
+      forceNonPTTMode: false,
     };
   },
   watch: {
@@ -244,13 +247,14 @@ export default {
       }
     },
     show(val) {
+      this.forceNonPTTMode = false;
       if (val) {
         // Add listeners
         this.state = State.INITIAL;
         this.errorMessage = null;
         this.recordedFile = null;
         this.recordingTime = String.fromCharCode(160);
-        if (this.ptt) {
+        if (this.usePTT) {
           document.addEventListener("mouseup", this.mouseUp, false);
           document.addEventListener("mousemove", this.mouseMove, false);
           document.addEventListener("touchend", this.mouseUp, false);
@@ -288,6 +292,9 @@ export default {
     }
   },
   computed: {
+    usePTT() {
+      return this.ptt && !this.forceNonPTTMode;
+    },
     lockButtonStyle() {
       /**
         Calculate where to show the lock button (it should be at the same X-coord as the)
@@ -366,6 +373,9 @@ export default {
           this.recordStartedAt = Date.now();
           this.startRecordTimer();
         })
+        .then(async () => {
+          this.aquireWakeLock();
+        })
         .catch((e) => {
           console.error(e);
           if (e && e.name == "NotAllowedError") {
@@ -374,25 +384,65 @@ export default {
           this.state = State.ERROR;
         });
     },
+    screenLocked() {
+      if (document.visibilityState === "hidden" && this.state == State.RECORDING) { 
+        this.pauseRecording();
+      }
+    },
+    playRecordedSound() {
+      const audio = new Audio(require("@/assets/sounds/record_stop.mp3"));
+      audio.play();
+    },
+    aquireWakeLock() {
+      document.addEventListener("visibilitychange", this.screenLocked);
+      try {
+        if (navigator.wakeLock && !this.wakeLock) {
+          navigator.wakeLock.request('screen').then((lock) => this.wakeLock = lock);
+        }
+      }
+      catch(err) { console.error(err)}
+    },
+    releaseWakeLock() {
+      document.removeEventListener("visibilitychange", this.screenLocked);
+      if (this.wakeLock) {
+        this.wakeLock.release().then(() => {
+          this.wakeLock = null;
+        });
+      }
+    },
     cancelRecording() {
       if(this.recorder) {
         this.recorder.stop();
         this.recorder = null;
       }
+      this.releaseWakeLock();
       this.state = State.INITIAL;
       this.close();
     },
     pauseRecording() {
+      // Remove PTT mode. We can get here in PTT if screen is locked or if max time is reached.
+      if (this.ptt) {
+        this.forceNonPTTMode = true;
+        this.recordingLocked = false;
+        document.removeEventListener("mouseup", this.mouseUp, false);
+        document.removeEventListener("mousemove", this.mouseMove, false);
+        document.removeEventListener("touchend", this.mouseUp, false);
+        document.removeEventListener("touchmove", this.mouseMove, false);
+      }
       this.state = State.RECORDED;
       this.stopRecordTimer();
+      this.releaseWakeLock();
       this.getFile(false);
+      this.playRecordedSound();
     },
     stopRecording() {
       this.state = State.RECORDED;
       this.stopRecordTimer();
+      this.releaseWakeLock();
       this.recordingTime = String.fromCharCode(160); // nbsp;
       this.close();
       this.getFile(true);
+      this.playRecordedSound();
     },
     redo() {
       this.state = State.INITIAL;
@@ -431,6 +481,10 @@ export default {
         this.recordingTime = util.formatRecordDuration(
           now - this.recordStartedAt
         );
+        // Auto-stop?
+        if ((now - this.recordStartedAt) >= (1000 * this.maxRecordingLength) && this.state == State.RECORDING) {
+          this.pauseRecording();
+        }
       }, 500);
     },
     stopRecordTimer() {