Send audio message in 2-clicks on desktop to avoid holding down mic button

This commit is contained in:
Debanjum Singh Solanky
2024-01-20 21:28:20 +05:30
parent f0daa45ae0
commit ec3b837d00
3 changed files with 12 additions and 12 deletions

View File

@@ -749,14 +749,14 @@
}; };
// Toggle recording // Toggle recording
if (!mediaRecorder || mediaRecorder.state === 'inactive') { if (!mediaRecorder || mediaRecorder.state === 'inactive' || event.type === 'touchstart') {
navigator.mediaDevices navigator.mediaDevices
.getUserMedia({ audio: true }) ?.getUserMedia({ audio: true })
.then(handleRecording) .then(handleRecording)
.catch((e) => { .catch((e) => {
flashStatusInChatInput("⛔️ Failed to access microphone"); flashStatusInChatInput("⛔️ Failed to access microphone");
}); });
} else if (mediaRecorder.state === 'recording') { } else if (mediaRecorder.state === 'recording' || event.type === 'touchend' || event.type === 'touchcancel') {
mediaRecorder.stop(); mediaRecorder.stop();
mediaRecorder.stream.getTracks().forEach(track => track.stop()); mediaRecorder.stream.getTracks().forEach(track => track.stop());
mediaRecorder = null; mediaRecorder = null;
@@ -815,7 +815,7 @@
</button> </button>
<textarea id="chat-input" class="option" oninput="onChatInput()" onkeydown=incrementalChat(event) autofocus="autofocus" placeholder="Message"></textarea> <textarea id="chat-input" class="option" oninput="onChatInput()" onkeydown=incrementalChat(event) autofocus="autofocus" placeholder="Message"></textarea>
<button id="speak-button" class="input-row-button" <button id="speak-button" class="input-row-button"
ontouchstart="speechToText(event)" ontouchend="speechToText(event)" onmousedown="speechToText(event)" onmouseup="speechToText(event)"> ontouchstart="speechToText(event)" ontouchend="speechToText(event)" ontouchcancel="speechToText(event)" onmousedown="speechToText(event)">
<svg id="speak-button-img" class="input-row-button-img" alt="Transcribe" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <svg id="speak-button-img" class="input-row-button-img" alt="Transcribe" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"/> <path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"/>
<path d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0v5zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3z"/> <path d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0v5zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3z"/>

View File

@@ -78,9 +78,9 @@ export class KhojChatModal extends Modal {
}, },
}) })
transcribe.addEventListener('mousedown', async (event) => { await this.speechToText(event) }); transcribe.addEventListener('mousedown', async (event) => { await this.speechToText(event) });
transcribe.addEventListener('mouseup', async (event) => { await this.speechToText(event) });
transcribe.addEventListener('touchstart', async (event) => { await this.speechToText(event) }); transcribe.addEventListener('touchstart', async (event) => { await this.speechToText(event) });
transcribe.addEventListener('touchend', async (event) => { await this.speechToText(event) }); transcribe.addEventListener('touchend', async (event) => { await this.speechToText(event) });
transcribe.addEventListener('touchcancel', async (event) => { await this.speechToText(event) });
setIcon(transcribe, "mic"); setIcon(transcribe, "mic");
let send = inputRow.createEl("button", { let send = inputRow.createEl("button", {
@@ -512,14 +512,14 @@ export class KhojChatModal extends Modal {
}; };
// Toggle recording // Toggle recording
if (!this.mediaRecorder || this.mediaRecorder.state === 'inactive') { if (!this.mediaRecorder || this.mediaRecorder.state === 'inactive' || event.type === 'touchstart') {
navigator.mediaDevices navigator.mediaDevices
.getUserMedia({ audio: true }) .getUserMedia({ audio: true })
.then(handleRecording) ?.then(handleRecording)
.catch((e) => { .catch((e) => {
this.flashStatusInChatInput("⛔️ Failed to access microphone"); this.flashStatusInChatInput("⛔️ Failed to access microphone");
}); });
} else if (this.mediaRecorder.state === 'recording') { } else if (this.mediaRecorder.state === 'recording' || event.type === 'touchend' || event.type === 'touchcancel') {
this.mediaRecorder.stop(); this.mediaRecorder.stop();
this.mediaRecorder.stream.getTracks().forEach(track => track.stop()); this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
this.mediaRecorder = undefined; this.mediaRecorder = undefined;

View File

@@ -712,14 +712,14 @@ To get started, just start typing below. You can also type / to see a list of co
}; };
// Toggle recording // Toggle recording
if (!mediaRecorder || mediaRecorder.state === 'inactive') { if (!mediaRecorder || mediaRecorder.state === 'inactive' || event.type === 'touchstart') {
navigator.mediaDevices navigator.mediaDevices
.getUserMedia({ audio: true }) ?.getUserMedia({ audio: true })
.then(handleRecording) .then(handleRecording)
.catch((e) => { .catch((e) => {
flashStatusInChatInput("⛔️ Failed to access microphone"); flashStatusInChatInput("⛔️ Failed to access microphone");
}); });
} else if (mediaRecorder.state === 'recording') { } else if (mediaRecorder.state === 'recording' || event.type === 'touchend' || event.type === 'touchcancel') {
mediaRecorder.stop(); mediaRecorder.stop();
mediaRecorder.stream.getTracks().forEach(track => track.stop()); mediaRecorder.stream.getTracks().forEach(track => track.stop());
mediaRecorder = null; mediaRecorder = null;
@@ -770,7 +770,7 @@ To get started, just start typing below. You can also type / to see a list of co
</button> </button>
<textarea id="chat-input" class="option" oninput="onChatInput()" onkeydown=incrementalChat(event) autofocus="autofocus" placeholder="Message"></textarea> <textarea id="chat-input" class="option" oninput="onChatInput()" onkeydown=incrementalChat(event) autofocus="autofocus" placeholder="Message"></textarea>
<button id="speak-button" class="input-row-button" <button id="speak-button" class="input-row-button"
ontouchstart="speechToText(event)" ontouchend="speechToText(event)" onmousedown="speechToText(event)" onmouseup="speechToText(event)"> ontouchstart="speechToText(event)" ontouchend="speechToText(event)" ontouchcancel="speechToText(event)" onmousedown="speechToText(event)">
<svg id="speak-button-img" class="input-row-button-img" alt="Transcribe" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <svg id="speak-button-img" class="input-row-button-img" alt="Transcribe" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"/> <path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"/>
<path d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0v5zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3z"/> <path d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0v5zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3z"/>