major feat: default keep stream open, user can close it with cancel b…

…uton

apps/app/src/lib/services/MediaRecorderService.ts → apps/app/src/lib/services/MediaRecorderService.svelte.ts

@@ -5,7 +5,7 @@ import { Data, Effect, Either } from 'effect';
 import { nanoid } from 'nanoid/non-secure';
 import { ToastService } from './ToastService.js';
 
-const enumerateRecordingDevices = Effect.tryPromise({
+export const enumerateRecordingDevices = Effect.tryPromise({
 	try: async () => {
 		const allAudioDevicesStream = await navigator.mediaDevices.getUserMedia({ audio: true });
 		const devices = await navigator.mediaDevices.enumerateDevices();
@@ -20,6 +20,7 @@ const enumerateRecordingDevices = Effect.tryPromise({
 			error: error,
 		}),
 });
+
 class GetStreamError extends Data.TaggedError('GetStreamError')<{
 	recordingDeviceId: string;
 }> {}
@@ -28,14 +29,12 @@ class TryResuseStreamError extends Data.TaggedError('TryResuseStreamError') {}
 
 export const MediaRecorderService = Effect.gen(function* () {
 	const { toast } = yield* ToastService;
-	const mediaStreamService = yield* MediaStreamService;
 	let mediaRecorder: MediaRecorder | null = null;
 	const recordedChunks: Blob[] = [];
 
 	const resetRecorder = () => {
 		recordedChunks.length = 0;
 		mediaRecorder = null;
-		mediaStreamService.destroy();
 	};
 
 	return {
@@ -52,7 +51,7 @@ export const MediaRecorderService = Effect.gen(function* () {
 					title: 'Connecting to audio input device...',
 					description: 'Please allow access to your microphone if prompted.',
 				});
-				const maybeResusedStream = yield* mediaStreamService.init({
+				const maybeResusedStream = yield* mediaStream.init({
 					shouldReuseStream: true,
 					preferredRecordingDeviceId,
 				});
@@ -84,7 +83,7 @@ export const MediaRecorderService = Effect.gen(function* () {
 								title: 'Error initializing media recorder with preferred device',
 								description: 'Trying to find another available audio input device...',
 							});
-							const stream = yield* mediaStreamService.init({ shouldReuseStream: false });
+							const stream = yield* mediaStream.init({ shouldReuseStream: false });
 							return new AudioRecorder(stream, {
 								mimeType: 'audio/webm;codecs=opus',
 								sampleRate: 16000,
@@ -137,8 +136,8 @@ export const MediaRecorderService = Effect.gen(function* () {
 	};
 });
 
-export const MediaStreamService = Effect.gen(function* () {
-	let internalStream: MediaStream | null = null;
+export const mediaStream = Effect.gen(function* () {
+	let internalStream = $state<MediaStream | null>(null);
 
 	const getStreamForDeviceId = (recordingDeviceId: string) =>
 		Effect.tryPromise({
@@ -216,4 +215,4 @@ export const MediaStreamService = Effect.gen(function* () {
 		},
 		enumerateRecordingDevices,
 	};
-});
+}).pipe(Effect.runSync);

apps/app/src/lib/stores/recorder.svelte.ts

@@ -1,5 +1,8 @@
 import { sendMessageToExtension } from '$lib/sendMessageToExtension';
-import { MediaRecorderService, MediaStreamService } from '$lib/services/MediaRecorderService';
+import {
+	MediaRecorderService,
+	enumerateRecordingDevices,
+} from '$lib/services/MediaRecorderService.svelte';
 import { NotificationServiceDesktopLive } from '$lib/services/NotificationServiceDesktopLive';
 import { NotificationServiceWebLive } from '$lib/services/NotificationServiceWebLive';
 import { SetTrayIconService } from '$lib/services/SetTrayIconService';
@@ -46,15 +49,14 @@ const IS_RECORDING_NOTIFICATION_ID = 'WHISPERING_RECORDING_NOTIFICATION';
 
 export const recorder = Effect.gen(function* () {
 	const mediaRecorderService = yield* MediaRecorderService;
-	const mediaStreamService = yield* MediaStreamService;
 	const { notify } = yield* NotificationService;
 
 	return {
 		get recorderState() {
 			return recorderState.value;
 		},
 		enumerateRecordingDevices: () =>
-			mediaStreamService.enumerateRecordingDevices.pipe(
+			enumerateRecordingDevices.pipe(
 				Effect.catchAll((error) => {
 					renderErrorAsToast(error);
 					return Effect.succeed([] as MediaDeviceInfo[]);

apps/app/src/routes/(app)/+page.svelte

@@ -4,6 +4,7 @@
 	import { ClipboardIcon } from '$lib/components/icons';
 	import { Input } from '$lib/components/ui/input';
 	import { Label } from '$lib/components/ui/label';
+	import { mediaStream } from '$lib/services/MediaRecorderService.svelte';
 	import { recorder, recordings, settings } from '$lib/stores';
 	import { createRecordingViewTransitionName } from '$lib/utils/createRecordingViewTransitionName';
 
@@ -65,10 +66,21 @@
 				onclick={() => recorder.cancelRecording(settings)}
 				variant="ghost"
 				size="icon"
-				class="absolute -right-16 bottom-1.5 transform text-2xl hover:scale-110 focus:scale-110"
+				class="absolute -right-14 bottom-0 transform text-2xl hover:scale-110 focus:scale-110"
 			>
 				🚫
 			</WhisperingButton>
+		{:else if mediaStream.isStreamOpen}
+			<!-- Reusing media stream for faster rerecording. Click to close stream (tab will also no longer show that it's recording) -->
+			<WhisperingButton
+				tooltipText="Quick re-record enabled. Click to end stream."
+				onclick={mediaStream.destroy}
+				variant="ghost"
+				size="icon"
+				class="absolute -right-14 bottom-0 transform text-2xl hover:scale-110 focus:scale-110"
+			>
+				🔴
+			</WhisperingButton>
 		{/if}
 	</div>