diff --git a/README.md b/README.md index 5f4f3c6..d99478a 100644 --- a/README.md +++ b/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 " * 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) \ No newline at end of file diff --git a/src/assets/sounds/record_stop.mp3 b/src/assets/sounds/record_stop.mp3 new file mode 100644 index 0000000..3c937aa Binary files /dev/null and b/src/assets/sounds/record_stop.mp3 differ diff --git a/src/components/VoiceRecorder.vue b/src/components/VoiceRecorder.vue index 48879ba..746c161 100644 --- a/src/components/VoiceRecorder.vue +++ b/src/components/VoiceRecorder.vue @@ -2,10 +2,10 @@
- + @@ -71,7 +71,7 @@ {{ recordingTime }}
- +
<< {{ $t("voice_recorder.swipe_to_cancel") }}
@@ -146,7 +146,7 @@ @@ -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() {