Merge pull request #13610 from nextcloud/backport/13608/stable30

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,33 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { register } from 'extendable-media-recorder'
+import { connect } from 'extendable-media-recorder-wav-encoder'
+import { readonly, ref } from 'vue'
+import type { Ref, DeepReadonly } from 'vue'
+
+let requiresInit = true
+const encoderReady = ref(false)
+
+/**
+ * Initialize the audio encoder
+ */
+async function initAudioEncoder() {
+	requiresInit = false
+	await register(await connect())
+	encoderReady.value = true
+}
+
+/**
+ * Composable to use audio encoder for voice messages feature
+ * @return {DeepReadonly<Ref<boolean>>} - whether the encoder is ready
+ */
+export function useAudioEncoder(): DeepReadonly<Ref<boolean>> {
+	if (requiresInit) {
+		initAudioEncoder()
+	}
+
+	return readonly(encoderReady)
+}

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,