@vidtreo/recorder-vue 1.8.0 → 1.10.0

package/README.md

@@ -19,7 +19,7 @@ npm install @vidtreo/recorder-vue @vidtreo/recorder
 ```
 
 **Peer dependencies**:
-- `@vidtreo/recorder >=1.8.0`
+- `@vidtreo/recorder >=1.9.0`
 - `vue >=3.0.0`
 
 Don't forget the stylesheet — either import it once in your entry, or rely on the built-in CSS injection (added to `<head>` automatically when the package loads).
@@ -89,6 +89,7 @@ The component accepts a single `recorder-props` object so the discriminated unio
 | `tabVisibilityOverlayText` | `string` | No | localized default | Custom message for the tab-visibility overlay. |
 | `mobileMode` | `"embed" \| "overlay" \| "native"` | No | `"overlay"` | Mobile experience. `"embed"` = same as desktop, `"overlay"` = fullscreen modal, `"native"` = device's native camera (file input). |
 | `nativeCamera` | `boolean` | No | – | **Deprecated** — use `mobileMode: "native"` instead. |
+| `audioOnly` | `boolean` | No | `false` | Record audio only with the microphone (no camera). Requires audio recording enabled for the environment in the backend. See [Audio-only recording](#audio-only-recording). |
 | `maxFileSize` | `number` | No | – | Maximum file size in MB (native camera mode). |
 | `lang` | `string` | No | `"en"` | Language code (`"en"` or `"es"`). |
 | `texts` | `PartialTranslations` | No | – | Per-key text overrides. |
@@ -214,9 +215,13 @@ type RecordingUploadResult = {
   transferredAt: string | null;
   r2DeleteAfter: string | null;
   r2DeletedAt: string | null;
+  mediaType?: "audio";           // set for audio-only recordings
+  audioId?: string;              // same value as id, set for audio-only recordings
 };
 ```
 
+For audio-only recordings (`audioOnly: true`) the payload also has `mediaType: "audio"` and `audioId`.
+
 ### Upload errors
 
 When an upload fails with a known cause, the component shows a dialog (`role="alertdialog"`) after recording and processing finish, and `upload-error` receives an error with a code:
@@ -246,7 +251,7 @@ function onUploadError(error: Error) {
 
 | Code | Meaning |
 |------|---------|
-| `upload.insufficient-credits` | The account has no credits left (HTTP 402). The upload is not retried. |
+| `upload.insufficient-credits` | The account has no credits left (HTTP 402). The upload stays queued and is retried every 5 minutes; `onUploadError` fires on each rejected attempt. The first rejection of each queued upload per page session also sets the built-in dialog and `uploadErrorCode`; repeated rejections only call `onUploadError` (no `onError`, no state change). |
 
 `getUploadErrorCode` returns `null` for other errors. Network errors are retried automatically before they are reported; while a retry is in progress the progress bar shows the `retryingUpload` label.
 
@@ -335,15 +340,15 @@ const { state, actions, audioLevel, controller } = useVidtreoRecorder({
 
 | Action | Signature | What it does |
 |--------|-----------|--------------|
-| `startRecording` | `(sourceType?: "camera" \| "screen") => Promise<void>` | Begin recording (after countdown if configured). |
-| `stopRecording` | `() => Promise<RecordingStopResult>` | Stop and trigger upload. |
+| `startRecording` | `(sourceType?: "camera" \| "screen" \| "audio") => Promise<void>` | Begin recording (after countdown if configured). Defaults to `"audio"` when `audioOnly` is set, otherwise `"camera"`. |
+| `stopRecording` | `() => Promise<RecordingStopResult>` | Stop and trigger upload. The result has `blob` and `mediaType` (`"audio"` or `"video"`). |
 | `pauseRecording` | `() => void` | Pause an active recording. |
 | `resumeRecording` | `() => void` | Resume from pause. |
 | `toggleMute` | `() => void` | Toggle the audio mute state. |
 | `switchSource` | `(sourceType: "camera" \| "screen") => Promise<void>` | Swap between camera and screen during preview/recording. |
 | `changeCamera` | `(deviceId: string) => Promise<void>` | Switch to a different camera. |
 | `changeMic` | `(deviceId: string) => Promise<void>` | Switch to a different microphone. |
-| `startPreview` | `(sourceType?: "camera" \| "screen") => Promise<void>` | Open the stream without recording. |
+| `startPreview` | `(sourceType?: "camera" \| "screen" \| "audio") => Promise<void>` | Open the stream without recording. `"audio"` opens a microphone-only stream. |
 | `stopPreview` | `() => void` | Tear the preview stream down. |
 | `downloadVideo` | `() => void` | Download the last `recordedBlob` (demo mode). |
 | `clearUploadError` | `() => void` | Clear `uploadErrorCode` after the user dismisses the upload error. |
@@ -578,6 +583,23 @@ Every key is identical (name and default copy) across `@vidtreo/recorder-react`,
 | `permissionFlowRecoveryTitle` | Allow access to continue | Permite el acceso para continuar |
 | `permissionFlowRecoveryInstructions` | Open your browser settings and allow camera and microphone access, then try again. | Abre la configuración de tu navegador y permite el acceso a la cámara y micrófono, luego intenta de nuevo. |
 | `permissionFlowConnecting` | Setting up... | Preparando... |
+| `initializingMicrophone` | Initializing microphone... | Iniciando micrófono... |
+| `grantMicrophonePermission` | Grant microphone permission when prompted | Concede el permiso de micrófono cuando se te solicite |
+| `retryMicrophone` | Retry Microphone | Reintentar micrófono |
+| `audioOnlyReady` | Ready to record | Listo para grabar |
+| `audioOnlyRecording` | Recording | Grabando |
+| `audioOnlyPaused` | Paused | En pausa |
+| `audioOnlyUploading` | Uploading {progress}% | Subiendo {progress}% |
+| `audioOnlyUploaded` | Upload complete | Subida completada |
+| `audioOnlyElapsedTime` | Elapsed time | Tiempo transcurrido |
+| `audioOnlyNoMicrophones` | No microphones available | No hay micrófonos disponibles |
+| `audioRecordingDisabledTitle` | Audio recording unavailable | Grabación de audio no disponible |
+| `audioRecordingDisabled` | Audio recording is not enabled for this environment | La grabación de audio no está habilitada para este entorno |
+| `permissionFlowMicrophoneOnlyTitle` | Microphone | Micrófono |
+| `permissionFlowMicrophoneOnlyLabel` | We need access to your microphone to start recording | Necesitamos acceso a tu micrófono para comenzar a grabar |
+| `permissionFlowMicrophoneOnlyRecoveryInstructions` | Open your browser settings and allow microphone access, then try again. | Abre la configuración de tu navegador y permite el acceso al micrófono, luego intenta de nuevo. |
+| `mobileOpenMicrophoneTitle` | Microphone | Micrófono |
+| `mobileOpenMicrophoneDescription` | We need access to your microphone to start recording | Necesitamos acceso a tu micrófono para comenzar a grabar |
 
 `TranslationKeys` lists every available key. The full key list lives in [`src/i18n/translations.ts`](./src/i18n/translations.ts) — there's a key for every visible string, including the permission flow recovery guide.
 
@@ -593,6 +615,24 @@ Every key is identical (name and default copy) across `@vidtreo/recorder-react`,
 
 The `<VidtreoRecorder>` component probes browser capabilities on mobile and falls back gracefully when `WebCodecs` isn't available.
 
+## Audio-only recording
+
+Set `audioOnly: true` to record audio with the microphone only:
+
+```vue
+<template>
+  <VidtreoRecorder :recorder-props="{ apiKey: 'your-api-key', audioOnly: true }" />
+</template>
+```
+
+- Audio recording must be enabled for the environment in the backend. The environment's audio settings (format, bitrate, max duration) apply, and the max duration is shown next to the timer (for example `00:12 / 10:00`).
+- Only microphone permission is requested. The recorder renders as a compact voice-note pill (about 56px high, at most 20rem wide, light and dark aware): a red record/stop button, a live 18-bar waveform, the timer with the max duration (for example `00:12 / 10:00`) and a microphone button that opens a menu. The menu lists microphones when idle and holds pause/resume and mute/unmute while recording. Status text, permission prompts, errors and the upload-complete message appear on a caption line below the pill, and upload progress runs along the pill; there is no video area. The camera selector, source switching and the tab visibility overlay are not used.
+- On mobile, `mobileMode: "native"` (and `nativeCamera`) is not used; the recorder falls back to `"overlay"`.
+- `upload-complete` receives `mediaType: "audio"` and `audioId`.
+- Demo mode has no environment audio config, so audio-only recording is unavailable there.
+
+If audio recording is disabled for the environment, starting the recorder fails with the error code `recording.audio-disabled` (`ERROR_AUDIO_RECORDING_DISABLED` in `@vidtreo/recorder`). The bar shows the `audioRecordingDisabled` message without a retry button, and `error` is emitted with the original error.
+
 ## SSR (Nuxt, Astro-Vue, etc.)
 
 Every browser API is gated to `onMounted`/`if (typeof window !== "undefined")`. If you're on Nuxt 3, the cleanest path is the [`@vidtreo/recorder-nuxt`](../recorder-nuxt) module — it registers the component as `client`-only and injects the CSS for you.

package/dist/components/ui/AudioBar.vue.d.ts

@@ -0,0 +1,40 @@
+import { type PermissionFlowStep } from "@vidtreo/recorder";
+import type { TranslationKeys } from "../../i18n/translations";
+import type { VidtreoRecorderState } from "../../types";
+type __VLS_Props = {
+    state: VidtreoRecorderState;
+    audioLevel: number;
+    translations: TranslationKeys;
+    isStopLocked: boolean;
+    isRetrying: boolean;
+    permissionStep: PermissionFlowStep | null;
+    canRetryPermission: boolean;
+    enablePause?: boolean;
+    enableMute?: boolean;
+    enableDeviceChange?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    record: () => any;
+    stop: () => any;
+    pause: () => any;
+    resume: () => any;
+    retry: () => any;
+    toggleMute: () => any;
+    micChange: (deviceId: string) => any;
+    closeUploadError: () => any;
+    requestPermission: () => any;
+    retryPermission: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRecord?: (() => any) | undefined;
+    onStop?: (() => any) | undefined;
+    onPause?: (() => any) | undefined;
+    onResume?: (() => any) | undefined;
+    onRetry?: (() => any) | undefined;
+    onToggleMute?: (() => any) | undefined;
+    onMicChange?: ((deviceId: string) => any) | undefined;
+    onCloseUploadError?: (() => any) | undefined;
+    onRequestPermission?: (() => any) | undefined;
+    onRetryPermission?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/ui/DeviceSelector.vue.d.ts

@@ -8,11 +8,11 @@ type DeviceProps = {
     enabled: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<DeviceProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    cameraChange: (deviceId: string) => any;
     micChange: (deviceId: string) => any;
+    cameraChange: (deviceId: string) => any;
 }, string, import("vue").PublicProps, Readonly<DeviceProps> & Readonly<{
-    onCameraChange?: ((deviceId: string) => any) | undefined;
     onMicChange?: ((deviceId: string) => any) | undefined;
+    onCameraChange?: ((deviceId: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/ui/PermissionFlowSteps.vue.d.ts

@@ -27,6 +27,7 @@ type __VLS_Props = {
     recoveryData: PermissionFlowState["recoveryData"] | undefined;
     canRetry: boolean;
     translations: PermissionFlowStepsTranslations;
+    audioOnly?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     requestPermission: () => any;

package/dist/components/ui/PermissionRecoveryGuide.vue.d.ts

@@ -1,5 +1,5 @@
 type __VLS_Props = {
-    cameraLabel: string;
+    cameraLabel?: string;
     microphoneLabel: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/ui/PreviewContent.vue.d.ts

@@ -55,20 +55,20 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     resume: () => any;
     switchSource: () => any;
     download: () => any;
+    toggleMute: () => any;
     toggleSettings: () => any;
     startRecording: () => any;
     stopRecording: () => any;
-    toggleMute: () => any;
     loadedChange: (loaded: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onPause?: (() => any) | undefined;
     onResume?: (() => any) | undefined;
     onSwitchSource?: (() => any) | undefined;
     onDownload?: (() => any) | undefined;
+    onToggleMute?: (() => any) | undefined;
     onToggleSettings?: (() => any) | undefined;
     onStartRecording?: (() => any) | undefined;
     onStopRecording?: (() => any) | undefined;
-    onToggleMute?: (() => any) | undefined;
     onLoadedChange?: ((loaded: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/ui/RecordingControlsButtons.vue.d.ts

@@ -39,10 +39,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
     resume: () => any;
     switchSource: () => any;
     download: () => any;
+    toggleMute: () => any;
     toggleSettings: () => any;
     startRecording: () => any;
     stopRecording: () => any;
-    toggleMute: () => any;
 }, string, import("vue").PublicProps, Readonly<{
     buttonVisibility: {
         showSettingsButton: boolean;
@@ -66,10 +66,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
     onResume?: (() => any) | undefined;
     onSwitchSource?: (() => any) | undefined;
     onDownload?: (() => any) | undefined;
+    onToggleMute?: (() => any) | undefined;
     onToggleSettings?: (() => any) | undefined;
     onStartRecording?: (() => any) | undefined;
     onStopRecording?: (() => any) | undefined;
-    onToggleMute?: (() => any) | undefined;
 }>, {
     translations: RecordingControlsButtonsTranslations;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/ui/SettingsPanel.vue.d.ts

@@ -15,9 +15,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
         selectedMic: string | null;
     };
     translations?: SettingsPanelTranslations;
+    audioOnly?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    cameraChange: (value: string) => any;
     micChange: (value: string) => any;
+    cameraChange: (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<{
     devices: {
         cameras: MediaDeviceInfo[];
@@ -26,9 +27,11 @@ declare const __VLS_export: import("vue").DefineComponent<{
         selectedMic: string | null;
     };
     translations?: SettingsPanelTranslations;
+    audioOnly?: boolean;
 }> & Readonly<{
-    onCameraChange?: ((value: string) => any) | undefined;
     onMicChange?: ((value: string) => any) | undefined;
+    onCameraChange?: ((value: string) => any) | undefined;
 }>, {
     translations: SettingsPanelTranslations;
+    audioOnly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/composables/use-permission-flow.d.ts

@@ -1,4 +1,4 @@
-import type { PermissionFlowChangeReason, PermissionFlowLanguage, PermissionFlowState, PermissionFlowStep } from "@vidtreo/recorder";
+import type { PermissionFlowChangeReason, PermissionFlowLanguage, PermissionFlowMediaType, PermissionFlowState, PermissionFlowStep } from "@vidtreo/recorder";
 import { type ComputedRef, type MaybeRefOrGetter } from "vue";
 export type PermissionStepStatus = PermissionFlowState["permissions"]["camera"];
 export type PermissionFlowStepInfo = {
@@ -7,6 +7,7 @@ export type PermissionFlowStepInfo = {
 };
 export type UsePermissionFlowOptions = {
     language?: MaybeRefOrGetter<PermissionFlowLanguage | undefined>;
+    mediaType?: PermissionFlowMediaType;
     onComplete?: (state: PermissionFlowState) => void;
     onChange?: (state: PermissionFlowState, reason: PermissionFlowChangeReason) => void;
 };

package/dist/i18n/translations.d.ts

@@ -122,6 +122,23 @@ export type TranslationKeys = {
     permissionFlowRecoveryTitle: string;
     permissionFlowRecoveryInstructions: string;
     permissionFlowConnecting: string;
+    initializingMicrophone: string;
+    grantMicrophonePermission: string;
+    retryMicrophone: string;
+    audioOnlyReady: string;
+    audioOnlyRecording: string;
+    audioOnlyPaused: string;
+    audioOnlyUploading: string;
+    audioOnlyUploaded: string;
+    audioOnlyElapsedTime: string;
+    audioOnlyNoMicrophones: string;
+    audioRecordingDisabledTitle: string;
+    audioRecordingDisabled: string;
+    permissionFlowMicrophoneOnlyTitle: string;
+    permissionFlowMicrophoneOnlyLabel: string;
+    permissionFlowMicrophoneOnlyRecoveryInstructions: string;
+    mobileOpenMicrophoneTitle: string;
+    mobileOpenMicrophoneDescription: string;
 };
 export declare const defaultTranslations: Record<string, TranslationKeys>;
 export type PartialTranslations = Partial<TranslationKeys>;

package/dist/index.d.ts

@@ -14,4 +14,4 @@ export type { ButtonTranslations, PreviewTranslations, RecorderTranslations, Set
 export { useRecorderTranslations } from "./composables/use-recorder-translations";
 export { useVidtreoRecorder } from "./composables/use-vidtreo-recorder";
 export { defaultTranslations, getTranslations, type PartialTranslations, type TranslationKeys, } from "./i18n/translations";
-export type { AccessTokenProvider, AudioWarning, MobileMode, RecordingPrompt, RecordingPromptCountdown, RecordingPromptCountdownPlacement, RecordingState, RecordingStopResult, RecordingUploadResult, SourceType, UploadErrorCode, UploadProgressPhase, UseVidtreoRecorderConfig, UseVidtreoRecorderReturn, VidtreoRecorderActions, VidtreoRecorderEmits, VidtreoRecorderProps, VidtreoRecorderState, } from "./types";
+export type { AccessTokenProvider, AudioWarning, MediaType, MobileMode, RecordingPrompt, RecordingPromptCountdown, RecordingPromptCountdownPlacement, RecordingState, RecordingStopResult, RecordingUploadResult, SourceType, UploadErrorCode, UploadProgressPhase, UseVidtreoRecorderConfig, UseVidtreoRecorderReturn, VidtreoRecorderActions, VidtreoRecorderEmits, VidtreoRecorderProps, VidtreoRecorderState, } from "./types";