@bendyline/squisq-editor-react 2.4.0 → 2.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,407 +1,7 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { MediaProvider } from '@bendyline/squisq/schemas';
3
- import { ContentContainer } from '@bendyline/squisq/storage';
4
- import { CSSProperties, RefObject } from 'react';
5
-
6
- /**
7
- * Format probing for MediaRecorder.
8
- *
9
- * Different browsers expose different container/codec combinations. Chrome
10
- * and Firefox produce WebM (VP8/VP9 + Opus); Safari produces MP4 (H.264 +
11
- * AAC). We probe at runtime via `MediaRecorder.isTypeSupported()` and pick
12
- * the best supported option, falling back to whatever the browser hands
13
- * back when no probe succeeds.
14
- */
15
- /** What the recorded stream is intended to capture. */
16
- type CaptureKind = 'audio' | 'video';
17
- /** A probed format choice — what to pass to `MediaRecorder` and where to write it. */
18
- interface ResolvedFormat {
19
- /** MIME type to pass to `new MediaRecorder(stream, { mimeType })`. Empty string means "let the browser pick". */
20
- mimeType: string;
21
- /** File extension to use when writing to the container, including the leading dot. */
22
- extension: string;
23
- /** Container directory inside the `ContentContainer` (no trailing slash). */
24
- directory: 'audio' | 'video';
25
- }
26
- /**
27
- * Resolve the format the recorder will use for a given capture kind. If a
28
- * `preferred` MIME type is supported, it wins; otherwise we fall through
29
- * the priority list. When nothing matches (extremely old browser), we
30
- * return an empty `mimeType` — `MediaRecorder` will pick a default and we
31
- * tag the file with `.webm` as a best guess.
32
- */
33
- declare function resolveFormat(kind: CaptureKind, preferred?: string): ResolvedFormat;
34
- /**
35
- * `MediaRecorder` support probe. Returns false when running in a
36
- * non-browser environment (e.g. SSR) or on a browser that doesn't
37
- * implement the API at all.
38
- */
39
- declare function supportsMediaRecorder(): boolean;
40
- /**
41
- * `getUserMedia` support probe (for mic / camera capture).
42
- */
43
- declare function supportsUserMedia(): boolean;
44
- /**
45
- * `getDisplayMedia` support probe (for screen capture). Browsers may
46
- * implement `mediaDevices` without `getDisplayMedia` (Firefox on Android
47
- * being the long-standing example), so this is its own probe.
48
- */
49
- declare function supportsDisplayMedia(): boolean;
50
- /**
51
- * Build a default filename for a recording. `basename` is a hint
52
- * (e.g. user-typed name); when omitted, a sortable timestamp is used so
53
- * concurrent recordings don't collide.
54
- */
55
- declare function buildFilename(kind: CaptureKind, extension: string, basename?: string): string;
56
-
57
- /**
58
- * useMediaRecorder
59
- *
60
- * React wrapper around `MediaRecorder` that handles stream acquisition,
61
- * the recorder lifecycle, and produces a single `Blob` on stop. Selects
62
- * a browser-supported MIME type via {@link resolveFormat}.
63
- *
64
- * Mirrors the shape of `useVideoExport` in `@bendyline/squisq-video-react`
65
- * (request → start → stop → blob), inverted for capture rather than
66
- * export.
67
- */
68
-
69
- /** Which capture source to use. `screen+mic` mixes the microphone into the screen stream. */
70
- type RecorderSource = 'mic' | 'camera' | 'screen' | 'screen+mic';
71
- /** Discriminated state describing what the recorder is currently doing. */
72
- type RecorderState = 'idle' | 'requesting' | 'ready' | 'recording' | 'stopping' | 'stopped' | 'error';
73
- interface UseMediaRecorderOptions {
74
- /** Which capture pipeline to use (default: `'mic'`). */
75
- source?: RecorderSource;
76
- /**
77
- * Preferred MIME type override. When the browser supports it, this
78
- * wins over the default candidate list. When unset (or unsupported),
79
- * the hook probes a built-in priority list.
80
- */
81
- mimeType?: string;
82
- /** Video track constraints for camera / screen sources. */
83
- videoConstraints?: MediaTrackConstraints | boolean;
84
- /** Audio track constraints for mic / camera / screen+mic sources. */
85
- audioConstraints?: MediaTrackConstraints | boolean;
86
- /**
87
- * Bits-per-second hint passed to `MediaRecorder`. Most browsers cap to
88
- * reasonable defaults internally; leaving this undefined is usually
89
- * fine.
90
- */
91
- bitsPerSecond?: number;
92
- /**
93
- * Whether to attempt to capture system audio when `source === 'screen'`
94
- * or `'screen+mic'`. Browser support is limited (desktop Chromium
95
- * only); when unsupported the resulting stream simply omits it.
96
- */
97
- systemAudio?: boolean;
98
- /**
99
- * For `source === 'camera'`, whether to include the microphone track.
100
- * Defaults to `true` (camera + mic). Set `false` to capture silent
101
- * video. Ignored for other sources, whose mic handling is encoded in
102
- * the source itself (`'mic'`, `'screen+mic'`).
103
- */
104
- includeMicrophone?: boolean;
105
- }
106
- interface UseMediaRecorderResult {
107
- /** Current recorder state. */
108
- state: RecorderState;
109
- /** Live `MediaStream` after `request()` succeeds; useful for preview. */
110
- stream: MediaStream | null;
111
- /** Final `Blob` after `stop()` resolves, or `null` while recording. */
112
- blob: Blob | null;
113
- /** MIME type the recorder actually used (after `request()`). */
114
- mimeType: string | null;
115
- /** File extension matching `mimeType` (e.g. `.webm`). */
116
- extension: string | null;
117
- /** Suggested container directory (`'audio'` for mic, `'video'` for camera/screen). */
118
- directory: 'audio' | 'video' | null;
119
- /** Milliseconds elapsed since `start()` was called. Updates ~10× per second while recording. */
120
- durationMs: number;
121
- /** Most recent error, if any. */
122
- error: Error | null;
123
- /**
124
- * Acquire the stream and prepare a `MediaRecorder`. After this resolves
125
- * the hook is in `'ready'` state and a `<video>`/`<audio>` element can
126
- * preview `stream`. Call `start()` to begin recording.
127
- */
128
- request: () => Promise<void>;
129
- /** Start recording. Must be called from `'ready'`. */
130
- start: () => void;
131
- /**
132
- * Stop recording and resolve with the resulting `Blob`. Safe to call
133
- * from `'recording'`; a no-op from any other state (resolves with the
134
- * existing `blob`, or `null`).
135
- */
136
- stop: () => Promise<Blob | null>;
137
- /**
138
- * Tear everything down — stops the recorder if running, releases all
139
- * tracks, disposes the AudioContext mixer (if any), and returns to
140
- * `'idle'`. Always safe to call.
141
- */
142
- cancel: () => void;
143
- /** Reset state without releasing the stream. Useful for re-recording. */
144
- reset: () => void;
145
- }
146
- /**
147
- * Returns the kind of capture that the given source produces. Exposed
148
- * separately from {@link useMediaRecorder} so non-React callers
149
- * (e.g. headless tests) can resolve a format up front.
150
- */
151
- declare function getCaptureKind(source: RecorderSource): CaptureKind;
152
- declare function useMediaRecorder(options?: UseMediaRecorderOptions): UseMediaRecorderResult;
153
-
154
- type RecorderColorScheme = 'light' | 'dark';
155
- interface RecorderModalProps {
156
- /** Required — recordings are written here. */
157
- mediaProvider: MediaProvider;
158
- /**
159
- * Optional — when provided, narration-mode recordings drop a
160
- * `.timing.json` sidecar at the matching container path so
161
- * `resolveAudioMapping()` can auto-link them. Without it, only the
162
- * raw recording is saved.
163
- */
164
- container?: ContentContainer | null;
165
- /** Initial capture source. Defaults to `'mic'` (narration). */
166
- initialMode?: RecorderSource;
167
- /** Light/dark chrome scheme. Defaults to `'light'`. */
168
- colorScheme?: RecorderColorScheme;
169
- /** Called after the modal is dismissed (save or cancel). */
170
- onClose: () => void;
171
- /**
172
- * Fired after a successful save. Hosts typically use this to insert a
173
- * markdown reference at the cursor — see {@link RecorderSaveResult}
174
- * for the fields a host needs to build that reference.
175
- */
176
- onSave?: (result: RecorderSaveResult) => void;
177
- }
178
- /** Payload handed to {@link RecorderModalProps.onSave} on a successful save. */
179
- interface RecorderSaveResult {
180
- /** Path returned by `mediaProvider.addMedia()` — what the doc should reference. */
181
- relativePath: string;
182
- /** Filename the modal chose (e.g. `narration-20260516-091200.webm`). */
183
- filename: string;
184
- /** Capture source the user picked. */
185
- source: RecorderSource;
186
- /** MIME type of the saved blob. */
187
- mimeType: string;
188
- /** Recording length in seconds. */
189
- duration: number;
190
- /** Whether a narration sidecar was written. Always `false` for video sources. */
191
- hasTimingSidecar: boolean;
192
- /** Script text the user typed (narration only). */
193
- sourceText?: string;
194
- }
195
- declare function RecorderModal({ mediaProvider, container, initialMode, colorScheme, onClose, onSave, }: RecorderModalProps): react_jsx_runtime.JSX.Element;
196
-
197
- interface RecorderButtonProps {
198
- /** Where to write the resulting recording. Required. */
199
- mediaProvider: MediaProvider;
200
- /** Optional container for narration `.timing.json` sidecar writes. */
201
- container?: ContentContainer | null;
202
- /** Initial capture source. Defaults to `'mic'`. */
203
- initialMode?: RecorderSource;
204
- /** Light/dark chrome scheme copied onto the portaled modal. */
205
- colorScheme?: RecorderColorScheme;
206
- /** Fired after a successful save. */
207
- onSave?: (result: RecorderSaveResult) => void;
208
- /** Button label. Defaults to `'Record'`. */
209
- label?: string;
210
- /** Optional inline button styles. */
211
- style?: CSSProperties;
212
- /** Whether the button is disabled. */
213
- disabled?: boolean;
214
- }
215
- declare function RecorderButton({ mediaProvider, container, initialMode, colorScheme, onSave, label, style, disabled, }: RecorderButtonProps): react_jsx_runtime.JSX.Element;
216
-
217
- interface RecorderPanelProps {
218
- mediaProvider: MediaProvider;
219
- container?: ContentContainer | null;
220
- initialMode?: RecorderSource;
221
- /** Light/dark chrome scheme copied onto the portaled modal. */
222
- colorScheme?: RecorderColorScheme;
223
- onSave?: (result: RecorderSaveResult) => void;
224
- /** ARIA / tooltip label. Defaults to `'Record media'`. */
225
- tooltip?: string;
226
- /** Optional className for the trigger button. */
227
- className?: string;
228
- /** Controlled modal state. Omit to let the panel manage its own state. */
229
- open?: boolean;
230
- /** Called whenever the trigger or modal requests an open-state change. */
231
- onOpenChange?: (open: boolean) => void;
232
- /** Render the built-in trigger button. Defaults to true. */
233
- showTrigger?: boolean;
234
- }
235
- declare function RecorderPanel({ mediaProvider, container, initialMode, colorScheme, onSave, tooltip, className, open: controlledOpen, onOpenChange, showTrigger, }: RecorderPanelProps): react_jsx_runtime.JSX.Element;
236
-
237
- /**
238
- * useStreamPreview — binds a `MediaStream` to a `<video>` element's
239
- * `srcObject`. Decouples the preview surface from `useMediaRecorder`,
240
- * letting hosts compose the preview element however they like.
241
- */
242
-
243
- /**
244
- * Assign `stream` to `<video>.srcObject` whenever either changes; clears
245
- * it on unmount or when `stream` is `null`. The element is set to
246
- * `playsInline` + `muted` automatically because previewing your own
247
- * microphone with audio playthrough creates a feedback loop.
248
- *
249
- * @example
250
- * ```tsx
251
- * const videoRef = useRef<HTMLVideoElement>(null);
252
- * const { stream } = useMediaRecorder({ source: 'camera' });
253
- * useStreamPreview(videoRef, stream);
254
- * return <video ref={videoRef} autoPlay />;
255
- * ```
256
- */
257
- declare function useStreamPreview(ref: RefObject<HTMLVideoElement | null>, stream: MediaStream | null): void;
258
-
259
- /**
260
- * Microphone-only capture via `getUserMedia({ audio: true })`.
261
- */
262
- /**
263
- * Request a microphone-only `MediaStream`. Caller owns the stream and
264
- * must stop its tracks when done.
265
- *
266
- * @param constraints - Optional audio constraints (sample rate, device
267
- * id, echo cancellation, etc.). Defaults to `true` — let the browser
268
- * pick.
269
- * @throws When `mediaDevices` is unavailable, or when the user denies
270
- * permission (the underlying `getUserMedia` rejection propagates).
271
- */
272
- declare function requestMicStream(constraints?: MediaTrackConstraints): Promise<MediaStream>;
273
-
274
- /**
275
- * Camera + microphone capture via `getUserMedia({ video, audio })`.
276
- */
277
- interface CameraStreamOptions {
278
- /** Video track constraints (resolution, facing mode, frame rate). Pass `true` for browser default, or `false` to omit video. */
279
- video?: boolean | MediaTrackConstraints;
280
- /** Audio track constraints. Pass `true` for browser default, or `false` to omit audio. */
281
- audio?: boolean | MediaTrackConstraints;
282
- }
283
- /**
284
- * Request a camera + mic `MediaStream`. Caller owns the stream and must
285
- * stop its tracks when done.
286
- *
287
- * Both tracks are requested by default. To capture video only, pass
288
- * `audio: false`; to capture audio only use {@link requestMicStream}
289
- * instead.
290
- *
291
- * @throws When `mediaDevices` is unavailable, or when the user denies
292
- * permission.
293
- */
294
- declare function requestCameraStream(options?: CameraStreamOptions): Promise<MediaStream>;
295
-
296
- /**
297
- * Screen capture via `getDisplayMedia`, with optional microphone mixing.
298
- *
299
- * The browser-native `getDisplayMedia({ audio: true })` flag only
300
- * captures *system* audio (and only on Chromium on desktop). For
301
- * narrated screencasts, hosts usually want the speaker's voice too —
302
- * we provide an opt-in "include mic" path that pulls a parallel
303
- * `getUserMedia` audio track and mixes it into the screen stream via
304
- * `AudioContext`, so the resulting `MediaStream` carries a single audio
305
- * track and a single video track.
306
- */
307
- interface ScreenStreamOptions {
308
- /** Video constraints for the screen surface. Pass `true` for browser default. */
309
- video?: boolean | MediaTrackConstraints;
310
- /**
311
- * Whether to attempt to capture the system audio (tab / window / monitor
312
- * audio). Browser support is limited (desktop Chromium only); when the
313
- * platform doesn't honor this flag, the resulting stream simply omits
314
- * the system audio track.
315
- */
316
- systemAudio?: boolean;
317
- /**
318
- * Whether to also pull the microphone via `getUserMedia` and mix it
319
- * into the resulting stream's audio track. When both `systemAudio` and
320
- * `includeMicrophone` produce tracks, they're combined via
321
- * `AudioContext` into a single output track.
322
- */
323
- includeMicrophone?: boolean;
324
- /** Microphone track constraints, when `includeMicrophone` is true. */
325
- microphoneConstraints?: MediaTrackConstraints;
326
- }
327
- /**
328
- * Handle returned by {@link requestScreenStream}. The `stream` is what
329
- * gets handed to `MediaRecorder`; the `dispose()` callback shuts down
330
- * any auxiliary resources (the mic-mix `AudioContext` plus the raw
331
- * source tracks feeding it). Callers must also stop the stream's tracks
332
- * via `stream.getTracks().forEach(t => t.stop())` when done —
333
- * `dispose()` cleans up everything that isn't the stream itself.
334
- *
335
- * IMPORTANT for callers: when the microphone is mixed in, the raw
336
- * system-audio / mic tracks are deliberately NOT members of `stream`
337
- * (only the single mixed output track is). So stopping `stream`'s tracks
338
- * alone leaves those captures live — `dispose()` is what releases them,
339
- * and it must always be called alongside the stream teardown or the
340
- * screen-share indicator stays lit.
341
- */
342
- interface ScreenStreamHandle {
343
- stream: MediaStream;
344
- /** Auxiliary cleanup beyond the stream tracks. Safe to call multiple times. */
345
- dispose: () => void;
346
- }
347
- /**
348
- * Request a screen-capture `MediaStream`, optionally with a mixed-in
349
- * microphone track. Caller owns the resulting stream.
350
- *
351
- * @throws When `getDisplayMedia` isn't available, or when the user
352
- * cancels the picker / denies permission.
353
- */
354
- declare function requestScreenStream(options?: ScreenStreamOptions): Promise<ScreenStreamHandle>;
355
-
356
- /**
357
- * Build the `.timing.json` sidecar that pairs with a narration recording.
358
- *
359
- * The shape matches what `resolveAudioMapping()` in
360
- * `@bendyline/squisq` reads at runtime: `sourceText`, `duration`, and
361
- * `bookmarks[]`. Sidecars are stored at `<audio-path>.timing.json`
362
- * inside the same `ContentContainer`, so the recorder can drop them
363
- * alongside its audio file and have the existing audio-mapping pipeline
364
- * pick them up with no schema changes.
365
- */
366
- /**
367
- * Word-level timing bookmark — same shape as `AudioBookmark` in
368
- * `@bendyline/squisq`. Recorder output produces an empty `bookmarks`
369
- * array; word-level timing is the domain of TTS pipelines, not
370
- * browser-side dictation.
371
- */
372
- interface RecordedBookmark {
373
- id: string;
374
- time: number;
375
- charOffset: number;
376
- textFragment?: string;
377
- }
378
- interface TimingJson {
379
- /** Plain text the user said (or intended to say) during the recording. */
380
- sourceText: string;
381
- /** Recording length in seconds. */
382
- duration: number;
383
- /** Word-level timing data. Empty by default — populated only when a downstream tool aligns the audio. */
384
- bookmarks: RecordedBookmark[];
385
- }
386
- /**
387
- * Build a `TimingJson` payload from a user-typed script and the
388
- * recording's measured duration. Both fields are required by the
389
- * downstream `parseTimingJson()` validator; missing them produces a
390
- * sidecar that gets silently dropped by the audio-mapping pipeline.
391
- */
392
- declare function buildTimingJson(sourceText: string, durationSec: number): TimingJson;
393
- /**
394
- * Serialize a `TimingJson` payload to a `Uint8Array` ready to hand to
395
- * `ContentContainer.writeFile()`. Pretty-printed so authors can hand-
396
- * edit the sidecar if they ever want to.
397
- */
398
- declare function encodeTimingJson(timing: TimingJson): Uint8Array;
399
- /**
400
- * The container path convention `resolveAudioMapping()` expects:
401
- * `<audio-path>.timing.json`. Pass the audio file's relative path
402
- * (e.g. `'audio/narration-001.webm'`) and the matching sidecar path is
403
- * returned (`'audio/narration-001.webm.timing.json'`).
404
- */
405
- declare function timingPathFor(audioRelativePath: string): string;
406
-
407
- export { type CameraStreamOptions, type CaptureKind, type RecordedBookmark, RecorderButton, type RecorderButtonProps, type RecorderColorScheme, RecorderModal, type RecorderModalProps, RecorderPanel, type RecorderPanelProps, type RecorderSaveResult, type RecorderSource, type RecorderState, type ResolvedFormat, type ScreenStreamHandle, type ScreenStreamOptions, type TimingJson, type UseMediaRecorderOptions, type UseMediaRecorderResult, buildFilename, buildTimingJson, encodeTimingJson, getCaptureKind, requestCameraStream, requestMicStream, requestScreenStream, resolveFormat, supportsDisplayMedia, supportsMediaRecorder, supportsUserMedia, timingPathFor, useMediaRecorder, useStreamPreview };
1
+ export { C as CameraStreamOptions, a as CaptureKind, R as RecordedBookmark, b as RecorderButton, c as RecorderButtonProps, d as RecorderCameraLane, e as RecorderCameraSaveResult, f as RecorderColorScheme, g as RecorderModal, h as RecorderModalProps, j as RecorderPanel, k as RecorderPanelProps, l as RecorderSaveResult, m as RecorderSource, n as RecorderState, o as ResolvedFormat, S as ScreenStreamHandle, p as ScreenStreamOptions, T as TimingJson, U as UseMediaRecorderOptions, q as UseMediaRecorderResult, r as buildFilename, s as buildTimingJson, t as encodeTimingJson, u as getCaptureKind, v as requestCameraStream, w as requestMicStream, x as requestScreenStream, y as resolveFormat, z as supportsDisplayMedia, A as supportsMediaRecorder, B as supportsUserMedia, D as timingPathFor, E as useMediaRecorder, F as useStreamPreview } from '../recorder-C0Tkyu5W.js';
2
+ import 'react/jsx-runtime';
3
+ import '@bendyline/squisq/schemas';
4
+ import '@bendyline/squisq/storage';
5
+ import '../useNarrationStage-Bqo18PBw.js';
6
+ import 'react';
7
+ import '@bendyline/squisq/narration';
@@ -1,13 +1,13 @@
1
1
  import {
2
2
  RecorderButton
3
- } from "../chunk-VNUGP7NG.js";
3
+ } from "../chunk-PEI5EBEN.js";
4
4
  import {
5
5
  RecorderModal,
6
6
  RecorderPanel,
7
7
  getCaptureKind,
8
8
  requestScreenStream,
9
9
  useMediaRecorder
10
- } from "../chunk-F4NBECWR.js";
10
+ } from "../chunk-PKGBWNUQ.js";
11
11
  import "../chunk-GS7QWYFT.js";
12
12
  import {
13
13
  buildFilename,
@@ -21,7 +21,7 @@ import {
21
21
  supportsUserMedia,
22
22
  timingPathFor,
23
23
  useStreamPreview
24
- } from "../chunk-5Q4JN4I5.js";
24
+ } from "../chunk-PDCKJCOS.js";
25
25
  export {
26
26
  RecorderButton,
27
27
  RecorderModal,