feat: allow stopping when paused

Author: OrbisK

changelog.config.ts

@@ -1,5 +1,5 @@
 import type { ChangelogConfig } from 'changelogen'
 
 export default {
-  excludeAuthors: ['robin.kehl@singular-it.de']
-} satisfies ChangelogConfig
+  excludeAuthors: ['robin.kehl@singular-it.de'],
+} satisfies ChangelogConfig

src/index.ts

@@ -5,4 +5,4 @@
 export { useMediaRecorder } from './useMediaRecorder'
 
 // Types
-// export * from './types'
+// export * from './types'

src/plugin/index.ts

@@ -2,12 +2,11 @@ import type { App } from 'vue'
 import type { MediaRecorderPluginOptions } from '../types'
 
 export const MediaRecorderPlugin = {
-  install(app: App, _options?: MediaRecorderPluginOptions) {
+  install(_app: App, _options?: MediaRecorderPluginOptions) {
     // app.provide(EXAMPLE, options?.example)
 
     // Add auto imports
 
-
     // app.component('Toggle', ToggleComponent)
   },
 }

src/useMediaRecorder.ts

@@ -1,9 +1,9 @@
-import { shallowRef, ref, toValue, computed, watch } from 'vue'
-import type { MaybeRef } from 'vue'
 import type { ConfigurableNavigator } from '@vueuse/core'
+import type { MaybeRef } from 'vue'
 import { useSupported } from '@vueuse/core'
-import { defu } from 'defu'
 import { tryOnScopeDispose } from '@vueuse/shared'
+import { defu } from 'defu'
+import { computed, ref, shallowRef, toValue, watch } from 'vue'
 
 export { MediaRecorderPlugin } from './plugin'
 
@@ -20,7 +20,7 @@ interface UseMediaRecorderOptions extends ConfigurableNavigator {
 
 const defaultOptions: UseMediaRecorderOptions = {
   constraints: { audio: false, video: false },
-  mediaRecorderOptions: {}
+  mediaRecorderOptions: {},
 }
 
 export function useMediaRecorder(options: UseMediaRecorderOptions = {}) {
@@ -29,7 +29,7 @@ export function useMediaRecorder(options: UseMediaRecorderOptions = {}) {
   const stream = shallowRef<MediaStream>()
 
   const isMimeTypeSupported = computed(() => {
-    return !!toValue(options.mediaRecorderOptions)?.mimeType ? MediaRecorder.isTypeSupported(toValue(options.mediaRecorderOptions)?.mimeType ?? '') : true
+    return toValue(options.mediaRecorderOptions)?.mimeType ? MediaRecorder.isTypeSupported(toValue(options.mediaRecorderOptions)?.mimeType ?? '') : true
   })
   const isSupported = useSupported(() => {
     return !!navigator?.mediaDevices?.getUserMedia && isMimeTypeSupported.value
@@ -45,7 +45,7 @@ export function useMediaRecorder(options: UseMediaRecorderOptions = {}) {
 
   const {
     mediaRecorderOptions,
-    constraints
+    constraints,
   } = defu(options, defaultOptions)
 
   const start = async (timeslice: number | undefined = undefined) => {
@@ -65,7 +65,7 @@ export function useMediaRecorder(options: UseMediaRecorderOptions = {}) {
   }
 
   const stop = () => {
-    if (state.value !== 'recording')
+    if (!state.value || state.value === 'inactive')
       return // todo warning?
     reset()
     updateStates()
@@ -112,8 +112,8 @@ export function useMediaRecorder(options: UseMediaRecorderOptions = {}) {
     isSupported,
     isMimeTypeSupported,
     mimeType,
-    mediaRecorder: computed(() => mediaRecorder.value)
+    mediaRecorder: computed(() => mediaRecorder.value),
   }
 }
 
-export type UseMediaRecorderReturn = ReturnType<typeof useMediaRecorder>
+export type UseMediaRecorderReturn = ReturnType<typeof useMediaRecorder>

tests/index.spec.ts

@@ -36,7 +36,6 @@ describe('useMediaRecorder', () => {
     expect(data.value?.length).toBe(0)
     await start(10)
     await new Promise(resolve => setTimeout(resolve, 100))
-    console.log(data.value)
     expect(data.value?.length).toBeGreaterThan(0)
   })
 
@@ -88,27 +87,59 @@ describe('useMediaRecorder', () => {
   it('mime type should be defined after recording', async () => {
     const {
       start,
-      mimeType
+      mimeType,
     } = useMediaRecorder({ constraints: { audio: true } })
     expect(mimeType.value).toBeUndefined()
     await start(10)
     await new Promise(resolve => setTimeout(resolve, 200))
     expect(mimeType.value).toBeDefined()
   })
 
-  it('should be supported',()=>{
+  it('should be supported', () => {
     const {
-      isSupported
+      isSupported,
     } = useMediaRecorder({ constraints: { audio: true } })
     expect(isSupported.value).toBe(true)
   })
 
-  it('should not support unsupported mime type',()=>{
+  it('should not support unsupported mime type', () => {
     const {
       isSupported,
-      isMimeTypeSupported
+      isMimeTypeSupported,
     } = useMediaRecorder({ constraints: { audio: true, video: true }, mediaRecorderOptions: { mimeType: 'video/does-not-exist' } })
     expect(isSupported.value).toBe(false)
     expect(isMimeTypeSupported.value).toBe(false)
   })
+
+  it('should be possible to stop recording when paused', async () => {
+    const {
+      start,
+      pause,
+      stop,
+      state,
+    } = useMediaRecorder({ constraints: { audio: true } })
+
+    await start()
+    expect(state.value).toBe('recording')
+    await pause()
+    expect(state.value).toBe('paused')
+    await stop()
+    expect(state.value).toBe('inactive')
+  })
+
+  it('data should exist when stoping from pause', async () => {
+    const {
+      start,
+      pause,
+      stop,
+      data,
+    } = useMediaRecorder({ constraints: { audio: true } })
+
+    expect(data.value).toHaveLength(0)
+    await start(10)
+    await new Promise(resolve => setTimeout(resolve, 100))
+    await pause()
+    await stop()
+    expect(data.value.length).toBeGreaterThan(0)
+  })
 })

vitest.config.ts

@@ -1,11 +1,11 @@
-import { defineConfig } from 'vitest/config'
-import vue from '@vitejs/plugin-vue'
 import { resolve } from 'node:path'
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
   root: __dirname,
   plugins: [
-    vue()
+    vue(),
   ],
   define: {
     dev: JSON.stringify(false),
@@ -24,4 +24,4 @@ export default defineConfig({
       },
     ],
   },
-})
+})

vitest.workspace.js

@@ -14,18 +14,18 @@ export default defineWorkspace([
           context: {
             permissions: [
               'microphone',
-              'camera'
-            ]
+              'camera',
+            ],
           },
           launch: {
             args: [
               '--disable-web-security',
               '--use-fake-ui-for-media-stream',
-              '--use-fake-device-for-media-stream'
-            ]
-          }
-        }
-      }
-    }
-  }
+              '--use-fake-device-for-media-stream',
+            ],
+          },
+        },
+      },
+    },
+  },
 ])