@exode-team/react-recorder 1.1.1 → 1.1.3

package/README.md

@@ -144,6 +144,7 @@ const Messages = () => {
 | `src`           | `string`                       | ✅          | —            | URL аудиофайла.                                                                             |
 | `chainId`       | `number`                       | —          | —            | ID для последовательного воспроизведения. При окончании автоматически запускает следующий.    |
 | `duration`      | `number`                       | —          | —            | Длительность в секундах (отображается до загрузки аудио).                                   |
+| `autoPreload`   | `boolean`                      | —          | `true`       | Автозагрузка аудио при попадании в viewport (IntersectionObserver).                          |
 | `waveformData`  | `number[]`                     | —          | —            | Предварительно вычисленные уровни waveform.                                                 |
 | `preloadedBlob` | `Blob \| null`                 | —          | —            | Blob для мгновенного воспроизведения без сетевого запроса.                                   |
 | `onEnded`       | `() => void`                   | —          | —            | Колбэк окончания воспроизведения.                                                           |
@@ -153,6 +154,7 @@ const Messages = () => {
 **Ref API (`VoiceMessagePlayerRef`):**
 
 - `play()` — программный запуск воспроизведения.
+- `prefetch()` — загрузка аудио без воспроизведения (fetch + decode waveform).
 
 #### `VoicePlaybackChain`
 

package/dist/components/AudioRecorder.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AudioRecorder.styled.d.ts","sourceRoot":"","sources":["../../src/components/AudioRecorder.styled.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,eAAO,MAAM,SAAS,KAMrB,CAAC"}
+{"version":3,"file":"AudioRecorder.styled.d.ts","sourceRoot":"","sources":["../../src/components/AudioRecorder.styled.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,eAAO,MAAM,SAAS,KAKrB,CAAC"}

package/dist/components/RecordingShell/RecordingShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RecordingShell.d.ts","sourceRoot":"","sources":["../../../src/components/RecordingShell/RecordingShell.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AA4BH,UAAU,KAAK;IACX,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,uBAAuB,EAAE,MAAM,CAAC;IAChC,wBAAwB,EAAE,MAAM,CAAC;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;CAC3C;AAGD,QAAA,MAAM,cAAc,GAAI,OAAO,KAAK,QAyHnC,CAAC;AAGF,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"RecordingShell.d.ts","sourceRoot":"","sources":["../../../src/components/RecordingShell/RecordingShell.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AA2BH,UAAU,KAAK;IACX,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,uBAAuB,EAAE,MAAM,CAAC;IAChC,wBAAwB,EAAE,MAAM,CAAC;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;CAC3C;AAGD,QAAA,MAAM,cAAc,GAAI,OAAO,KAAK,QA6HnC,CAAC;AAGF,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/RecordingShell/RecordingShell.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RecordingShell.styled.d.ts","sourceRoot":"","sources":["../../../src/components/RecordingShell/RecordingShell.styled.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,eAAO,MAAM,OAAO,KAQnB,CAAC;AAEF,eAAO,MAAM,YAAY,KAqBxB,CAAC;AAEF,eAAO,MAAM,KAAK,KAQjB,CAAC;AAEF,eAAO,MAAM,YAAY,KA2CxB,CAAC;AAEF,eAAO,MAAM,QAAQ,KAOpB,CAAC;AAEF,eAAO,MAAM,IAAI,KAMhB,CAAC;AAEF,eAAO,MAAM,GAAG,KAOf,CAAC;AAEF,eAAO,MAAM,KAAK,KAKjB,CAAC;AAEF,eAAO,MAAM,UAAU,KAyBtB,CAAC;AAEF,eAAO,MAAM,WAAW,KAMvB,CAAC;AAEF,eAAO,MAAM,OAAO,KAoBnB,CAAC"}
+{"version":3,"file":"RecordingShell.styled.d.ts","sourceRoot":"","sources":["../../../src/components/RecordingShell/RecordingShell.styled.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,eAAO,MAAM,OAAO,KAOnB,CAAC;AAEF,eAAO,MAAM,YAAY,KAqBxB,CAAC;AAEF,eAAO,MAAM,KAAK,KAQjB,CAAC;AAEF,eAAO,MAAM,YAAY,KA2CxB,CAAC;AAEF,eAAO,MAAM,QAAQ,KAOpB,CAAC;AAEF,eAAO,MAAM,IAAI,KAMhB,CAAC;AAEF,eAAO,MAAM,GAAG,KAOf,CAAC;AAEF,eAAO,MAAM,KAAK,KAKjB,CAAC;AAEF,eAAO,MAAM,UAAU,KAyBtB,CAAC;AAEF,eAAO,MAAM,WAAW,KAMvB,CAAC;AAEF,eAAO,MAAM,OAAO,KAoBnB,CAAC"}

package/dist/components/VoiceMessagePlayer/VoiceMessagePlayer.d.ts

@@ -5,6 +5,7 @@
  */
 export interface VoiceMessagePlayerRef {
     play: () => void;
+    prefetch: () => void;
 }
 declare const VoiceMessagePlayer: any;
 export { VoiceMessagePlayer };

package/dist/components/VoiceMessagePlayer/VoiceMessagePlayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VoiceMessagePlayer.d.ts","sourceRoot":"","sources":["../../../src/components/VoiceMessagePlayer/VoiceMessagePlayer.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AA0BH,MAAM,WAAW,qBAAqB;IAClC,IAAI,EAAE,MAAM,IAAI,CAAC;CACpB;AAcD,QAAA,MAAM,kBAAkB,KAmJtB,CAAC;AAGH,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"VoiceMessagePlayer.d.ts","sourceRoot":"","sources":["../../../src/components/VoiceMessagePlayer/VoiceMessagePlayer.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AA0BH,MAAM,WAAW,qBAAqB;IAClC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAeD,QAAA,MAAM,kBAAkB,KA8MtB,CAAC;AAGH,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/VoiceRecorderInput/PreviewBars.d.ts

@@ -10,7 +10,7 @@ interface PreviewBarsProps {
     recordingTime: number;
     previewLevels: number[];
     timelineLevels: number[];
-    getVisibleBarsCount: () => number;
+    visibleBarsCount: number;
 }
 declare const PreviewBars: (props: PreviewBarsProps) => any;
 export { PreviewBars };

package/dist/components/VoiceRecorderInput/PreviewBars.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewBars.d.ts","sourceRoot":"","sources":["../../../src/components/VoiceRecorderInput/PreviewBars.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,UAAU,gBAAgB;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,mBAAmB,EAAE,MAAM,MAAM,CAAC;CACrC;AAGD,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,QA0E3C,CAAC;AAGF,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"PreviewBars.d.ts","sourceRoot":"","sources":["../../../src/components/VoiceRecorderInput/PreviewBars.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,UAAU,gBAAgB;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;CAC5B;AAGD,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,QA0E3C,CAAC;AAGF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/VoiceRecorderInput/TimelineBars.d.ts

@@ -5,7 +5,7 @@
  */
 interface TimelineBarsProps {
     timelineLevels: number[];
-    getVisibleBarsCount: () => number;
+    visibleBarsCount: number;
 }
 declare const TimelineBars: (props: TimelineBarsProps) => any;
 export { TimelineBars };

package/dist/components/VoiceRecorderInput/TimelineBars.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineBars.d.ts","sourceRoot":"","sources":["../../../src/components/VoiceRecorderInput/TimelineBars.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,UAAU,iBAAiB;IACvB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,mBAAmB,EAAE,MAAM,MAAM,CAAC;CACrC;AAGD,QAAA,MAAM,YAAY,GAAI,OAAO,iBAAiB,QAkC7C,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"TimelineBars.d.ts","sourceRoot":"","sources":["../../../src/components/VoiceRecorderInput/TimelineBars.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,UAAU,iBAAiB;IACvB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;CAC5B;AAGD,QAAA,MAAM,YAAY,GAAI,OAAO,iBAAiB,QAkC7C,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/VoiceRecorderInput/VoiceRecorderInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VoiceRecorderInput.d.ts","sourceRoot":"","sources":["../../../src/components/VoiceRecorderInput/VoiceRecorderInput.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAaH,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAuBrE,UAAU,KAAK;IACX,QAAQ,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAGD,QAAA,MAAM,kBAAkB,GAAI,OAAO,KAAK,QAsGvC,CAAC;AAGF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"VoiceRecorderInput.d.ts","sourceRoot":"","sources":["../../../src/components/VoiceRecorderInput/VoiceRecorderInput.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAuBrE,UAAU,KAAK;IACX,QAAQ,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAGD,QAAA,MAAM,kBAAkB,GAAI,OAAO,KAAK,QAmIvC,CAAC;AAGF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/VoiceRecorderInput/VoiceRecorderInput.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VoiceRecorderInput.styled.d.ts","sourceRoot":"","sources":["../../../src/components/VoiceRecorderInput/VoiceRecorderInput.styled.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,eAAO,MAAM,OAAO,KAOnB,CAAC;AAEF,eAAO,MAAM,YAAY,KAkBxB,CAAC;AAEF,eAAO,MAAM,WAAW,KASvB,CAAC;AAEF,iEAAiE;AACjE,eAAO,MAAM,UAAU,KAKtB,CAAC;AAEF,eAAO,MAAM,UAAU,KA0BtB,CAAC;AAEF,eAAO,MAAM,YAAY,KAUxB,CAAC;AAEF,eAAO,MAAM,KAAK,KAMjB,CAAC;AAEF,eAAO,MAAM,UAAU,KAuBtB,CAAC;AAEF,eAAO,MAAM,YAAY,KAqBxB,CAAC;AAEF,eAAO,MAAM,eAAe,KAqB3B,CAAC;AAEF,eAAO,MAAM,WAAW,KAcvB,CAAC"}
+{"version":3,"file":"VoiceRecorderInput.styled.d.ts","sourceRoot":"","sources":["../../../src/components/VoiceRecorderInput/VoiceRecorderInput.styled.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,eAAO,MAAM,OAAO,KAOnB,CAAC;AAEF,eAAO,MAAM,YAAY,KAcxB,CAAC;AAEF,eAAO,MAAM,WAAW,KASvB,CAAC;AAEF,iEAAiE;AACjE,eAAO,MAAM,UAAU,KAMtB,CAAC;AAEF,eAAO,MAAM,UAAU,KA0BtB,CAAC;AAEF,eAAO,MAAM,YAAY,KAUxB,CAAC;AAEF,eAAO,MAAM,KAAK,KAMjB,CAAC;AAEF,eAAO,MAAM,UAAU,KAuBtB,CAAC;AAEF,eAAO,MAAM,YAAY,KAqBxB,CAAC;AAEF,eAAO,MAAM,eAAe,KAqB3B,CAAC;AAEF,eAAO,MAAM,WAAW,KAcvB,CAAC"}

package/dist/hooks/useAudioBlobLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAudioBlobLoader.d.ts","sourceRoot":"","sources":["../../src/hooks/useAudioBlobLoader.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAYrD,UAAU,yBAAyB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC5B,iBAAiB,EAAE,iBAAiB,CAAC;CACxC;AAED,UAAU,wBAAwB;IAC9B,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC1D,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1C;AAED,QAAA,MAAM,kBAAkB,GAAI,SAAS,yBAAyB,KAAG,wBAgIhE,CAAC;AAGF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"useAudioBlobLoader.d.ts","sourceRoot":"","sources":["../../src/hooks/useAudioBlobLoader.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAYrD,UAAU,yBAAyB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC5B,iBAAiB,EAAE,iBAAiB,CAAC;CACxC;AAED,UAAU,wBAAwB;IAC9B,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC1D,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1C;AAED,QAAA,MAAM,kBAAkB,GAAI,SAAS,yBAAyB,KAAG,wBAoIhE,CAAC;AAGF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/hooks/useVoiceMessagePlayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useVoiceMessagePlayer.d.ts","sourceRoot":"","sources":["../../src/hooks/useVoiceMessagePlayer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AASH,OAAO,KAAK,EAAE,4BAA4B,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAG1F,QAAA,MAAM,qBAAqB,GAAI,SAAS,4BAA4B,KAAG,2BAmJtE,CAAC;AAGF,OAAO,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"useVoiceMessagePlayer.d.ts","sourceRoot":"","sources":["../../src/hooks/useVoiceMessagePlayer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AASH,OAAO,KAAK,EAAE,4BAA4B,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAG1F,QAAA,MAAM,qBAAqB,GAAI,SAAS,4BAA4B,KAAG,2BA6JtE,CAAC;AAGF,OAAO,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/index.cjs

@@ -784,6 +784,7 @@ const useAudioBlobLoader = (options) => {
     const audioRef = React.useRef(null);
     const objectUrlRef = React.useRef(null);
     const abortControllerRef = React.useRef(null);
+    const failedSrcRef = React.useRef(null);
     const callbacksRef = React.useRef(playbackCallbacks);
     callbacksRef.current = playbackCallbacks;
     const createAudioFromBlob = React.useCallback((blob) => {
@@ -820,7 +821,7 @@ const useAudioBlobLoader = (options) => {
     }, [waveformData, createAudioFromBlob]);
     const ensureAudioLoaded = React.useCallback(async () => {
         var _a;
-        if (audioRef.current) {
+        if (audioRef.current || failedSrcRef.current === src) {
             return;
         }
         if (preloadedBlob) {
@@ -851,6 +852,7 @@ const useAudioBlobLoader = (options) => {
             if (error instanceof DOMException && error.name === 'AbortError') {
                 return;
             }
+            failedSrcRef.current = src;
             console.warn('[voice-player] Failed to load audio', error);
         }
         finally {
@@ -861,6 +863,7 @@ const useAudioBlobLoader = (options) => {
     }, [src, waveformData, preloadedBlob, mountFromBlob, createAudioFromBlob]);
     /** Cleanup on src change or unmount */
     React.useEffect(() => {
+        failedSrcRef.current = null;
         return () => {
             var _a;
             (_a = abortControllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
@@ -962,6 +965,13 @@ const useVoiceMessagePlayer = (options) => {
             },
         },
     });
+    /** Pre-fetch audio without playing (for viewport preloading) */
+    const prefetch = React.useCallback(() => {
+        if (isLoading || audioRef.current) {
+            return;
+        }
+        void ensureAudioLoaded();
+    }, [isLoading, ensureAudioLoaded]);
     /** Load audio and auto-play after loaded */
     const preload = React.useCallback(() => {
         if (isLoading || audioRef.current) {
@@ -1032,6 +1042,7 @@ const useVoiceMessagePlayer = (options) => {
         currentTime,
         waveformLevels,
         seekTo,
+        prefetch,
         preload,
         formatTime,
         togglePlayback,
@@ -1182,7 +1193,6 @@ const useAudioRecorderHandlers = (options) => {
 const Container = styled.div `
     position: relative;
     width: 100%;
-    padding: 16px;
     transition: color 200ms ease, background-color 200ms ease;
     color: var(--text_primary, #0a0a0a);
 `;
@@ -1267,29 +1277,28 @@ const Wrapper$1 = styled.div `
     gap: 12px;
     padding: 10px 14px;
     border-radius: 9999px;
-    background: var(--background_content, #ffffff);
-    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text_primary, #0a0a0a) 6%, transparent);
+    background: var(--background_hover, color-mix(in srgb, var(--text_primary, #0a0a0a) 6%, transparent));
 `;
 const CancelButton$1 = styled.button `
-    width: 36px;
-    height: 36px;
+    width: 38px;
+    height: 38px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: 18px;
-    background: transparent;
+    border-radius: 19px;
+    background: color-mix(in srgb, var(--exode_red) 10%, transparent);
     border: 0;
+    flex-shrink: 0;
     color: color-mix(in srgb, var(--text_primary, #0a0a0a) 54%, transparent);
     cursor: pointer;
-    transition: color 160ms ease, background-color 160ms ease;
+    transition: transform 160ms ease;
 
-    &:hover {
-        background-color: color-mix(in srgb, var(--text_primary, #0a0a0a) 12%, transparent);
-        color: color-mix(in srgb, var(--text_primary, #0a0a0a) 76%, transparent);
+    &:hover:not(:disabled) {
+        transform: translateY(-1px);
     }
 
-    &:active {
-        background-color: color-mix(in srgb, var(--text_primary, #0a0a0a) 18%, transparent);
+    &:active:not(:disabled) {
+        transform: translateY(0);
     }
 `;
 const Track = styled.div `
@@ -1297,7 +1306,7 @@ const Track = styled.div `
     display: flex;
     align-items: center;
     gap: 12px;
-    padding: 8px 12px;
+    padding: 8px 10px;
     border-radius: 9999px;
     background: color-mix(in srgb, var(--text_primary, #0a0a0a) 10%, transparent);
 `;
@@ -1461,7 +1470,9 @@ const RecordingShell = (props) => {
         return formatTime(0);
     }, [formatTime, hasRecording, isPlaying, playbackDuration, playbackTime, recordingTime]);
     const recordButtonDisabled = isSending;
-    const recordButtonIcon = !isRecording || isPaused ? jsxRuntime.jsx(icons.Icon16Microphone, {}) : jsxRuntime.jsx(icons.Icon16Square, {});
+    const recordButtonIcon = !isRecording || isPaused
+        ? jsxRuntime.jsx(icons.Icon16Microphone, { width: 24, height: 24 })
+        : jsxRuntime.jsx(icons.Icon16Pause, { width: 24, height: 24 });
     const recordButtonVariant = !isRecording || isPaused ? 'resume' : 'record';
     const recordButtonAria = !isRecording
         ? startAriaLabel
@@ -1470,14 +1481,16 @@ const RecordingShell = (props) => {
             : pauseRecordingAriaLabel || stopAriaLabel;
     const canShowPlayback = !isRecording || isPaused;
     const playbackDisabled = !hasRecording && !isRecording;
-    const playbackIcon = isPlaying ? jsxRuntime.jsx(icons.Icon16Pause, {}) : jsxRuntime.jsx(icons.Icon16Play, {});
+    const playbackIcon = isPlaying
+        ? jsxRuntime.jsx(icons.Icon16Pause, { width: 24, height: 24 })
+        : jsxRuntime.jsx(icons.Icon16Play, { width: 24, height: 24 });
     const playbackAria = isPlaying ? pausePlaybackAriaLabel : playAriaLabel;
     const sendDisabled = isSending || (!hasRecording && !isRecording);
-    return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsx(CancelButton$1, { type: "button", onClick: onCancel, "aria-label": cancelAriaLabel, children: jsxRuntime.jsx(icons.Icon28CancelOutline, { width: 20, height: 20 }) }), jsxRuntime.jsxs(Track, { children: [jsxRuntime.jsx(CircleButton, { type: "button", "$variant": recordButtonVariant, onClick: onRecordToggle, "aria-label": recordButtonAria, disabled: recordButtonDisabled, children: recordButtonIcon }), !canShowPlayback ? null : (jsxRuntime.jsx(CircleButton, { type: "button", "$variant": "play", onClick: onTogglePlayback, "aria-label": playbackAria, disabled: playbackDisabled, children: playbackIcon })), jsxRuntime.jsx(Waveform, { "$expanded": canShowPlayback, children: jsxRuntime.jsx(WaveformBars, { values: waveformValues, divider: 100, scale: 42, minHeight: 6, styleInterpolator: ({ normalized }) => ({
+    return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsx(CancelButton$1, { type: "button", onClick: onCancel, "aria-label": cancelAriaLabel, children: jsxRuntime.jsx(icons.Icon28DeleteOutlineAndroid, { fill: "var(--exode_red)", width: 24, height: 24, style: { minWidth: 24 } }) }), jsxRuntime.jsxs(Track, { children: [jsxRuntime.jsx(CircleButton, { type: "button", "$variant": recordButtonVariant, onClick: onRecordToggle, "aria-label": recordButtonAria, disabled: recordButtonDisabled, children: recordButtonIcon }), !canShowPlayback ? null : (jsxRuntime.jsx(CircleButton, { type: "button", "$variant": "play", onClick: onTogglePlayback, "aria-label": playbackAria, disabled: playbackDisabled, children: playbackIcon })), jsxRuntime.jsx(Waveform, { "$expanded": canShowPlayback, children: jsxRuntime.jsx(WaveformBars, { values: waveformValues, divider: 100, scale: 42, minHeight: 6, styleInterpolator: ({ normalized }) => ({
                                 height: `${12 + normalized / 2}px`,
                                 maxHeight: '34px',
                                 opacity: 0.38 + Math.min(0.5, normalized / 120),
-                            }) }) }), jsxRuntime.jsx(Timer$1, { children: displayTime })] }), jsxRuntime.jsx(SendButton$1, { type: "button", onClick: onSend, disabled: sendDisabled, "aria-label": sendAriaLabel, children: isSending ? (jsxRuntime.jsx(SpinnerSlot, { children: jsxRuntime.jsx(Spinner, {}) })) : (jsxRuntime.jsx(icons.Icon28SendOutline, { width: 20, height: 20 })) })] }));
+                            }) }) }), jsxRuntime.jsx(Timer$1, { children: displayTime })] }), jsxRuntime.jsx(SendButton$1, { type: "button", onClick: onSend, disabled: sendDisabled, "aria-label": sendAriaLabel, children: isSending ? (jsxRuntime.jsx(SpinnerSlot, { children: jsxRuntime.jsx(Spinner, {}) })) : (jsxRuntime.jsx(icons.Icon28SendOutline, { width: 24, height: 24 })) })] }));
 };
 
 /**
@@ -1737,8 +1750,8 @@ const useVoiceRecorderInput = (options) => {
 
 const PreviewBars = (props) => {
     var _a, _b;
-    const { isPlaying, playbackTime, lastDuration, previewLevels, recordingTime, timelineLevels, getVisibleBarsCount, } = props;
-    const maxBars = getVisibleBarsCount();
+    const { isPlaying, playbackTime, lastDuration, previewLevels, recordingTime, timelineLevels, visibleBarsCount, } = props;
+    const maxBars = visibleBarsCount;
     const sourceLevels = timelineLevels.length > 0
         ? timelineLevels
         : previewLevels;
@@ -1782,8 +1795,8 @@ const PreviewBars = (props) => {
 };
 
 const TimelineBars = (props) => {
-    const { timelineLevels, getVisibleBarsCount } = props;
-    const maxBars = getVisibleBarsCount();
+    const { timelineLevels, visibleBarsCount } = props;
+    const maxBars = visibleBarsCount;
     const visible = timelineLevels.slice(-maxBars);
     const padded = [
         ...visible,
@@ -1828,15 +1841,11 @@ const CancelButton = styled.button `
     border-radius: 16px;
     background: transparent;
     border: 0;
+    margin-right: 4px;
     flex-shrink: 0;
     color: color-mix(in srgb, var(--text_primary, #0a0a0a) 45%, transparent);
     cursor: pointer;
     transition: color 160ms ease, background-color 160ms ease;
-
-    &:hover {
-        background-color: color-mix(in srgb, var(--text_primary, #0a0a0a) 8%, transparent);
-        color: color-mix(in srgb, var(--text_primary, #0a0a0a) 72%, transparent);
-    }
 `;
 const RecordTrack = styled.div `
     flex: 1;
@@ -1852,7 +1861,8 @@ const RecordTrack = styled.div `
 const ButtonSlot = styled.div `
     display: flex;
     align-items: center;
-    gap: 2px;
+    gap: 4px;
+    padding: 2px;
     flex-shrink: 0;
 `;
 const StopButton = styled.button `
@@ -1989,19 +1999,39 @@ const VoiceRecorderInput = (props) => {
     const waveformRef = React.useRef(null);
     const { recorder, isSending, isPreview, timelineLevels, lastDurationRef, handleResume, handlePause, handleCancel, handleSendRequest, } = useVoiceRecorderInput(inputOptions);
     const { isPlaying, isRecording, recordingTime, hasRecording, previewLevels, playbackTime, formatTime, togglePlayback, } = recorder;
-    const getVisibleBarsCount = React.useCallback(() => {
+    const [visibleBarsCount, setVisibleBarsCount] = React.useState(0);
+    const measureBars = () => {
         const el = waveformRef.current;
         if (!el) {
-            return 60;
+            return;
         }
-        return Math.floor(el.clientWidth / (TIMELINE_BAR_WIDTH + TIMELINE_BAR_GAP));
+        setVisibleBarsCount(Math.floor(el.clientWidth / (TIMELINE_BAR_WIDTH + TIMELINE_BAR_GAP)));
+    };
+    /** Sync recalc before paint — catches layout shifts from button changes */
+    React.useLayoutEffect(measureBars);
+    /** ResizeObserver for external size changes (window resize, container resize) */
+    React.useEffect(() => {
+        const el = waveformRef.current;
+        if (!el) {
+            return;
+        }
+        let rafId = 0;
+        const observer = new ResizeObserver(() => {
+            cancelAnimationFrame(rafId);
+            rafId = requestAnimationFrame(measureBars);
+        });
+        observer.observe(el);
+        return () => {
+            cancelAnimationFrame(rafId);
+            observer.disconnect();
+        };
     }, []);
     const displayTime = (isPreview && isPlaying)
         ? formatTime(playbackTime)
         : formatTime(recordingTime || lastDurationRef.current);
-    return (jsxRuntime.jsxs(Wrapper, { className: className, children: [jsxRuntime.jsx(CancelButton, { type: "button", onClick: handleCancel, "aria-label": "Cancel", children: jsxRuntime.jsx(icons.Icon28CancelOutline, { width: 20, height: 20 }) }), jsxRuntime.jsxs(RecordTrack, { children: [jsxRuntime.jsx(ButtonSlot, { children: isPreview ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MicIndicator, { type: "button", onClick: handleResume, "aria-label": "Resume recording", children: jsxRuntime.jsx(icons.Icon20VoiceOutline, { width: 14, height: 14 }) }), jsxRuntime.jsx(PlayPauseButton, { type: "button", onClick: togglePlayback, "aria-label": isPlaying ? 'Pause' : 'Play', children: isPlaying
+    return (jsxRuntime.jsxs(Wrapper, { className: className, children: [jsxRuntime.jsx(CancelButton, { type: "button", onClick: handleCancel, "aria-label": "Cancel", children: jsxRuntime.jsx(icons.Icon28DeleteOutlineAndroid, { fill: "var(--exode_red)", width: 28, height: 28, style: { minWidth: 28 } }) }), jsxRuntime.jsxs(RecordTrack, { children: [jsxRuntime.jsx(ButtonSlot, { children: isPreview ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MicIndicator, { type: "button", onClick: handleResume, "aria-label": "Resume recording", children: jsxRuntime.jsx(icons.Icon20Voice, { width: 14, height: 14 }) }), jsxRuntime.jsx(PlayPauseButton, { type: "button", onClick: togglePlayback, "aria-label": isPlaying ? 'Pause' : 'Play', children: isPlaying
                                         ? jsxRuntime.jsx(icons.Icon16Pause, { width: 14, height: 14 })
-                                        : jsxRuntime.jsx(icons.Icon16Play, { width: 14, height: 14 }) })] })) : (jsxRuntime.jsx(StopButton, { type: "button", onClick: handlePause, "aria-label": "Pause recording", children: jsxRuntime.jsx(icons.Icon16Square, { width: 12, height: 12 }) })) }), jsxRuntime.jsx(WaveformArea, { ref: waveformRef, children: isPreview ? (jsxRuntime.jsx(PreviewBars, { timelineLevels: timelineLevels, previewLevels: previewLevels, isPlaying: isPlaying, playbackTime: playbackTime, recordingTime: recordingTime, lastDuration: lastDurationRef.current, getVisibleBarsCount: getVisibleBarsCount })) : (jsxRuntime.jsx(TimelineBars, { timelineLevels: timelineLevels, getVisibleBarsCount: getVisibleBarsCount })) }), jsxRuntime.jsx(Timer, { children: displayTime })] }), jsxRuntime.jsx(SendButton, { type: "button", onClick: handleSendRequest, disabled: isSending || (!hasRecording && !isRecording), "aria-label": "Send", children: isSending ? (jsxRuntime.jsx(SpinnerIcon, {})) : (jsxRuntime.jsx(icons.Icon28SendOutline, {})) })] }));
+                                        : jsxRuntime.jsx(icons.Icon16Play, { width: 14, height: 14 }) })] })) : (jsxRuntime.jsx(StopButton, { type: "button", onClick: handlePause, "aria-label": "Pause recording", children: jsxRuntime.jsx(icons.Icon16Pause, { width: 14, height: 14 }) })) }), jsxRuntime.jsx(WaveformArea, { ref: waveformRef, children: isPreview ? (jsxRuntime.jsx(PreviewBars, { timelineLevels: timelineLevels, previewLevels: previewLevels, isPlaying: isPlaying, playbackTime: playbackTime, recordingTime: recordingTime, lastDuration: lastDurationRef.current, visibleBarsCount: visibleBarsCount })) : (jsxRuntime.jsx(TimelineBars, { timelineLevels: timelineLevels, visibleBarsCount: visibleBarsCount })) }), jsxRuntime.jsx(Timer, { children: displayTime })] }), jsxRuntime.jsx(SendButton, { type: "button", onClick: handleSendRequest, disabled: isSending || (!hasRecording && !isRecording), "aria-label": "Send", children: isSending ? (jsxRuntime.jsx(SpinnerIcon, {})) : (jsxRuntime.jsx(icons.Icon28SendOutline, {})) })] }));
 };
 
 /**
@@ -2130,8 +2160,9 @@ const BAR_GAP = 2;
 const BAR_MIN_HEIGHT = 2;
 const BAR_MAX_HEIGHT = 24;
 const VoiceMessagePlayer = React.forwardRef((props, ref) => {
-    const { src, onClick, onEnded, chainId, duration, className, waveformData, } = props;
+    const { src, onClick, onEnded, chainId, duration, className, waveformData, autoPreload = true, } = props;
     const trackRef = React.useRef(null);
+    const wrapperRef = React.useRef(null);
     const [trackWidth, setTrackWidth] = React.useState(0);
     const handleEnded = React.useCallback(() => {
         onEnded === null || onEnded === void 0 ? void 0 : onEnded();
@@ -2139,25 +2170,66 @@ const VoiceMessagePlayer = React.forwardRef((props, ref) => {
             VoicePlaybackChain.playNext(chainId);
         }
     }, [onEnded, chainId]);
-    const { play, progress, isLoaded, isPlaying, isLoading, currentTime, waveformLevels, seekTo, preload, formatTime, togglePlayback, duration: resolvedDuration, } = useVoiceMessagePlayer({
+    const { play, progress, isLoaded, isPlaying, isLoading, currentTime, waveformLevels, seekTo, prefetch, preload, formatTime, togglePlayback, duration: resolvedDuration, } = useVoiceMessagePlayer({
         src,
         duration,
         waveformData,
         preloadedBlob: props.preloadedBlob,
         onEnded: handleEnded,
     });
-    React.useImperativeHandle(ref, () => ({ play }), [play]);
+    React.useImperativeHandle(ref, () => ({ play, prefetch }), [play, prefetch]);
+    /** Auto-preload audio when player enters viewport */
+    React.useEffect(() => {
+        if (!autoPreload || isLoaded || isLoading) {
+            return;
+        }
+        const el = wrapperRef.current;
+        if (!el) {
+            return;
+        }
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                prefetch();
+                observer.disconnect();
+            }
+        }, { threshold: 0.1 });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [
+        isLoaded,
+        prefetch,
+        isLoading,
+        autoPreload,
+    ]);
     /** Register in playback chain for sequential playback */
     React.useEffect(() => {
         if (chainId != null) {
             return VoicePlaybackChain.register(chainId, () => play());
         }
     }, [chainId, play]);
-    /** Measure track width once after mount */
-    React.useLayoutEffect(() => {
+    const measureTrackWidth = () => {
         if (trackRef.current) {
             setTrackWidth(trackRef.current.clientWidth);
         }
+    };
+    /** Sync recalc before paint — catches layout shifts */
+    React.useLayoutEffect(measureTrackWidth);
+    /** ResizeObserver for external size changes (window resize, container resize) */
+    React.useEffect(() => {
+        const el = trackRef.current;
+        if (!el) {
+            return;
+        }
+        let rafId = 0;
+        const observer = new ResizeObserver(() => {
+            cancelAnimationFrame(rafId);
+            rafId = requestAnimationFrame(measureTrackWidth);
+        });
+        observer.observe(el);
+        return () => {
+            cancelAnimationFrame(rafId);
+            observer.disconnect();
+        };
     }, []);
     const displayTime = isPlaying
         ? formatTime(currentTime)
@@ -2193,7 +2265,7 @@ const VoiceMessagePlayer = React.forwardRef((props, ref) => {
         const peak = Math.max(...raw, 1);
         return raw.map((v) => (v / peak) * 100);
     }, [waveformLevels, trackWidth]);
-    return (jsxRuntime.jsxs(PlayerWrapper, { onClick: onClick, className: className, children: [jsxRuntime.jsx(PlayButton, { type: "button", disabled: isLoading || (!src && !props.preloadedBlob), onClick: isLoaded ? togglePlayback : preload, "aria-label": isPlaying ? 'Pause' : 'Play', children: isLoading ? (jsxRuntime.jsx(LoadingSpinner, {})) : isPlaying ? (jsxRuntime.jsx(icons.Icon24Pause, {})) : (jsxRuntime.jsx(icons.Icon24Play, {})) }), jsxRuntime.jsxs(ContentColumn, { children: [jsxRuntime.jsx(WaveformTrack, { ref: trackRef, onClick: handleTrackClick, children: interpolatedBars.map((level, i) => {
+    return (jsxRuntime.jsxs(PlayerWrapper, { ref: wrapperRef, onClick: onClick, className: className, children: [jsxRuntime.jsx(PlayButton, { type: "button", disabled: isLoading || (!src && !props.preloadedBlob), onClick: isLoaded ? togglePlayback : preload, "aria-label": isPlaying ? 'Pause' : 'Play', children: isLoading ? (jsxRuntime.jsx(LoadingSpinner, {})) : isPlaying ? (jsxRuntime.jsx(icons.Icon24Pause, {})) : (jsxRuntime.jsx(icons.Icon24Play, {})) }), jsxRuntime.jsxs(ContentColumn, { children: [jsxRuntime.jsx(WaveformTrack, { ref: trackRef, onClick: handleTrackClick, children: interpolatedBars.map((level, i) => {
                             const normalized = Math.min(100, level);
                             const height = BAR_MIN_HEIGHT + (normalized / 100) * (BAR_MAX_HEIGHT - BAR_MIN_HEIGHT);
                             const barProgress = interpolatedBars.length > 0