feat: replace audioRecorderStore with composable

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

src/components/NewMessage/NewMessageAudioRecorder.vue

@@ -54,6 +54,7 @@ import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
+import { useAudioEncoder } from '../../composables/useAudioEncoder.ts'
 import { mediaDevicesManager } from '../../utils/webrtc/index.js'
 
 export default {
@@ -75,6 +76,13 @@ export default {
 
 	emits: ['recording', 'audio-file'],
 
+	setup() {
+		const encoderReady = useAudioEncoder()
+		return {
+			encoderReady,
+		}
+	},
+
 	data() {
 		return {
 			// The audio stream object
@@ -125,10 +133,6 @@ export default {
 			return t('spreed', 'Dismiss recording')
 		},
 
-		encoderReady() {
-			return this.$store.getters.encoderReady
-		},
-
 		canStartRecording() {
 			if (this.disabled) {
 				return false
@@ -139,16 +143,11 @@ export default {
 	},
 
 	watch: {
-
 		isRecording(newValue) {
 			console.debug('isRecording', newValue)
 		},
 	},
 
-	mounted() {
-		this.$store.dispatch('initializeAudioEncoder')
-	},
-
 	beforeDestroy() {
 		this.killStreams()
 	},

src/composables/useAudioEncoder.ts

@@ -0,0 +1,35 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { createSharedComposable } from '@vueuse/core'
+import { register } from 'extendable-media-recorder'
+import { connect } from 'extendable-media-recorder-wav-encoder'
+import { onBeforeMount, readonly, ref } from 'vue'
+import type { Ref, DeepReadonly } from 'vue'
+
+const encoderReady = ref<boolean>(false)
+
+/**
+ * Composable to use audio encoder for voice messages feature
+ * @return {DeepReadonly<Ref<boolean>>} - whether the encoder is ready
+ */
+function useAudioEncoderComposable(): DeepReadonly<Ref<boolean>> {
+	onBeforeMount(async () => {
+		if (encoderReady.value) {
+			return
+		}
+		// Initialize an audio encoder
+		await register(await connect())
+		encoderReady.value = true
+	})
+
+	return readonly(encoderReady)
+}
+
+/**
+ * Shared composable to use audio encoder for voice messages feature
+ * @return {DeepReadonly<Ref<boolean>>} - whether the encoder is ready
+ */
+export const useAudioEncoder = createSharedComposable(useAudioEncoderComposable)

src/store/storeConfig.js

@@ -4,7 +4,6 @@
  */
 
 import actorStore from './actorStore.js'
-import audioRecorderStore from './audioRecorderStore.js'
 import conversationsStore from './conversationsStore.js'
 import fileUploadStore from './fileUploadStore.js'
 import messagesStore from './messagesStore.js'
@@ -14,7 +13,6 @@ import tokenStore from './tokenStore.js'
 export default {
 	modules: {
 		actorStore,
-		audioRecorderStore,
 		conversationsStore,
 		fileUploadStore,
 		messagesStore,