@vidtreo/recorder-vue 1.6.0

package/dist/types/index.d.ts

@@ -0,0 +1,128 @@
+import type { AudioWarning, RecorderController, RecordingState, SourceType } from "@vidtreo/recorder";
+import type { Ref, ShallowRef } from "vue";
+import type { PartialTranslations } from "../i18n/translations";
+export type MobileMode = "embed" | "overlay" | "native";
+type BaseRecorderProps = {
+    backendUrl?: string;
+    countdownDuration?: number;
+    minTimeRecord?: number;
+    maxRecordingTime?: number;
+    maxFileSize?: number;
+    userMetadata?: Record<string, unknown>;
+    enableSourceSwitching?: boolean;
+    enableMute?: boolean;
+    enablePause?: boolean;
+    enableDeviceChange?: boolean;
+    enableTabVisibilityOverlay?: boolean;
+    tabVisibilityOverlayText?: string;
+    lang?: string;
+    texts?: PartialTranslations;
+    /** @deprecated Use mobileMode instead */
+    nativeCamera?: boolean;
+    mobileMode?: MobileMode;
+};
+type DemoModeProps = BaseRecorderProps & {
+    demo: true;
+    apiKey?: string;
+};
+type ProductionModeProps = BaseRecorderProps & {
+    demo?: false;
+    apiKey: string;
+};
+export type VidtreoRecorderProps = DemoModeProps | ProductionModeProps;
+export type VidtreoRecorderEmits = {
+    recordingStart: [];
+    recordingStop: [];
+    uploadComplete: [result: {
+        recordingId: string;
+        uploadUrl: string;
+    }];
+    uploadProgress: [progress: number];
+    uploadError: [error: Error];
+    transcodingProgress: [progress: number];
+    error: [error: Error];
+};
+export type UseVidtreoRecorderConfig = {
+    apiKey: string;
+    backendUrl?: string;
+    countdownDuration?: number;
+    minTimeRecord?: number;
+    maxRecordingTime?: number;
+    maxFileSize?: number;
+    userMetadata?: Record<string, unknown>;
+    enableSourceSwitching?: boolean;
+    enableMute?: boolean;
+    enablePause?: boolean;
+    enableDeviceChange?: boolean;
+    enableTabVisibilityOverlay?: boolean;
+    tabVisibilityOverlayText?: string;
+    proxyEndpoint?: string;
+    demo?: boolean;
+    /** @deprecated Use mobileMode instead */
+    nativeCamera?: boolean;
+    mobileMode?: MobileMode;
+    lang?: string;
+    texts?: PartialTranslations;
+    onUploadComplete?: (result: {
+        recordingId: string;
+        uploadUrl: string;
+    }) => void;
+    onUploadProgress?: (progress: number) => void;
+    onUploadError?: (error: Error) => void;
+    onRecordingStart?: () => void;
+    onRecordingStop?: () => void;
+    onError?: (error: Error) => void;
+    onTranscodingProgress?: (progress: number) => void;
+};
+export type VidtreoRecorderState = {
+    recordingState: RecordingState;
+    stream: MediaStream | null;
+    isMuted: boolean;
+    isPaused: boolean;
+    isAudioReady: boolean;
+    hasAudioFailed: boolean;
+    error: string | null;
+    errorCode: string | null;
+    browserName: string | null;
+    browserVersion: string | null;
+    countdown: number | null;
+    timer: string;
+    uploadProgress: number | null;
+    transitionMessage: string | null;
+    isInitialized: boolean;
+    recordedBlob: Blob | null;
+    audioWarning: AudioWarning | null;
+    audioRecovered: boolean;
+    devices: {
+        cameras: MediaDeviceInfo[];
+        microphones: MediaDeviceInfo[];
+        selectedCamera: string | null;
+        selectedMic: string | null;
+    };
+};
+export type VidtreoRecorderActions = {
+    startRecording: (sourceType?: SourceType) => Promise<void>;
+    stopRecording: () => Promise<RecordingStopResult>;
+    pauseRecording: () => void;
+    resumeRecording: () => void;
+    toggleMute: () => void;
+    switchSource: (sourceType: SourceType) => Promise<void>;
+    changeCamera: (deviceId: string) => Promise<void>;
+    changeMic: (deviceId: string) => Promise<void>;
+    startPreview: (sourceType?: SourceType) => Promise<void>;
+    stopPreview: () => void;
+    downloadVideo: () => void;
+    cleanup: () => void;
+};
+export type RecordingStopResult = {
+    recordingId: string;
+    uploadUrl: string;
+    blob: Blob;
+};
+export type UseVidtreoRecorderReturn = {
+    state: VidtreoRecorderState;
+    actions: VidtreoRecorderActions;
+    audioLevel: Ref<number>;
+    controller: ShallowRef<RecorderController | null>;
+};
+export type { AudioWarning, RecordingState, SourceType, } from "@vidtreo/recorder";

package/dist/utils/button-visibility.d.ts

@@ -0,0 +1,18 @@
+export type ButtonVisibility = {
+    showSettingsButton: boolean;
+    showMuteButton: boolean;
+    showPauseButton: boolean;
+    showResumeButton: boolean;
+    showStopButton: boolean;
+    showSwitchSourceButton: boolean;
+    showDownloadButton?: boolean;
+};
+type ButtonVisibilityConfig = {
+    enableDeviceChange?: boolean;
+    enableMute?: boolean;
+    enablePause?: boolean;
+    enableSourceSwitching?: boolean;
+    isMobile?: boolean;
+};
+export declare function calculateButtonVisibility(isRecording: boolean, recordingState: string, isPaused: boolean, config: ButtonVisibilityConfig): ButtonVisibility;
+export {};

package/dist/utils/config-builder.d.ts

@@ -0,0 +1,4 @@
+import type { RecorderConfig } from "@vidtreo/recorder";
+import type { VidtreoRecorderProps } from "../types";
+export declare function normalizeBackendUrl(url: string | null | undefined): string;
+export declare function buildRecorderConfig(props: VidtreoRecorderProps, apiKey: string): RecorderConfig;

package/dist/utils/device-error-overlay-mapper.d.ts

@@ -0,0 +1,29 @@
+import type { DeviceErrorResult } from "@vidtreo/recorder";
+export type DeviceErrorOverlayTranslations = {
+    audioErrorTitle: string;
+    audioErrorMessage: string;
+    audioErrorRetry: string;
+    audioMissingTitle: string;
+    audioMissingMessage: string;
+    audioSilentTitle: string;
+    audioSilentMessage: string;
+    audioProcessingErrorTitle: string;
+    audioProcessingErrorMessage: string;
+    audioMissingRetry: string;
+    cameraErrorTitle: string;
+    cameraErrorMessage: string;
+    browserErrorTitle: string;
+    browserErrorMessage: string;
+    genericErrorTitle: string;
+    genericErrorMessage: string;
+    errorRetry: string;
+};
+export type DeviceErrorOverlayData = {
+    visible: boolean;
+    variant: "camera" | "audio" | "browser" | "generic";
+    title: string;
+    message: string;
+    retryLabel?: string;
+    canRetry: boolean;
+};
+export declare function mapDeviceErrorToOverlay(result: DeviceErrorResult, translations: DeviceErrorOverlayTranslations, errorMessage?: string | null, errorCode?: string | null): DeviceErrorOverlayData;

package/dist/utils/download-file.d.ts

@@ -0,0 +1 @@
+export declare function downloadBlob(blob: Blob, filename: string): void;

package/dist/utils/env-utils.d.ts

@@ -0,0 +1 @@
+export declare function getApiKey(propKey?: string, demo?: boolean): string;

package/dist/utils/min-time-record.d.ts

@@ -0,0 +1,9 @@
+export declare const MIN_TIME_RECORD_ERROR_CODE = "recording.minimum-time-not-reached";
+export declare const MIN_TIME_RECORD_ERROR_MESSAGE = "Minimum recording time has not been reached yet";
+type MinTimeRecordError = Error & {
+    code: string;
+};
+export declare function parseTimerToMilliseconds(timer: string): number;
+export declare function isStopBlockedByMinTime(minTimeRecord: number | null | undefined, timer: string, isRecordingActive: boolean): boolean;
+export declare function createMinimumTimeRecordError(): MinTimeRecordError;
+export {};

package/dist/utils/recorder-constants.d.ts

@@ -0,0 +1,12 @@
+import type { SourceType } from "@vidtreo/recorder";
+declare const DEFAULT_LANGUAGE = "en";
+declare const EMPTY_TEXTS: Record<string, string>;
+declare const START_PREVIEW_DELAY_MILLISECONDS = 100;
+declare const PROGRESS_PERCENT_MULTIPLIER = 100;
+declare const SOURCE_TYPE_CAMERA: SourceType;
+declare const SOURCE_TYPE_SCREEN: SourceType;
+declare const RECORDING_STATE_COUNTDOWN = "countdown";
+declare const RECORDING_STATE_IDLE = "idle";
+declare const RECORDING_STATE_RECORDING = "recording";
+declare const ERROR_CODE_BROWSER_UNSUPPORTED = "browser.unsupported";
+export { DEFAULT_LANGUAGE, EMPTY_TEXTS, START_PREVIEW_DELAY_MILLISECONDS, PROGRESS_PERCENT_MULTIPLIER, SOURCE_TYPE_CAMERA, SOURCE_TYPE_SCREEN, RECORDING_STATE_COUNTDOWN, RECORDING_STATE_IDLE, RECORDING_STATE_RECORDING, ERROR_CODE_BROWSER_UNSUPPORTED, };

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@vidtreo/recorder-vue",
+  "version": "1.6.0",
+  "type": "module",
+  "description": "Vue 3 components and composables for @vidtreo/recorder - video recording SDK",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./ssr": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles.css": "./dist/recorder-vue.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "./dist/index.js"
+  ],
+  "scripts": {
+    "build": "tsdown && vue-tsc --project tsconfig.build.json && bun scripts/rename-css.ts && bun scripts/inject-css.ts",
+    "build:dev": "tsdown --watch",
+    "dev": "vite --config demo/vite.config.ts",
+    "demo": "vite --config demo/vite.config.ts",
+    "prepublishOnly": "npm run build"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "keywords": [
+    "video",
+    "recording",
+    "vue",
+    "vue3",
+    "composables",
+    "components"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "@vidtreo/recorder": ">=1.6.0",
+    "vue": ">=3.0.0"
+  },
+  "devDependencies": {
+    "@vidtreo/recorder": "workspace:*",
+    "@vidtreo/ui-styles": "workspace:*",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@phosphor-icons/vue": "^2.2.1",
+    "@vue/test-utils": "^2.4.6",
+    "happy-dom": "^15.11.7",
+    "tsdown": "^0.20.3",
+    "@types/node": "^25.2.3",
+    "typescript": "^5.9.3",
+    "unplugin-vue": "^7.2.0",
+    "vite": "^7.3.1",
+    "vue": "^3.5.13",
+    "vue-tsc": "^3.2.9"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}