@exode-team/react-recorder 1.1.7 → 1.1.8

package/dist/components/AudioRecorder.d.ts

@@ -12,7 +12,7 @@ interface Props extends Partial<RecorderOptionOverrides> {
     uploadId?: string;
     className?: string;
     onUploadError?: (error: unknown) => void;
-    onUploaded?: (file: Partial<StorageFileEntity>) => void | Promise<void>;
+    onUploaded?: (file: Partial<StorageFileEntity>, duration: number) => void | Promise<void>;
 }
 declare const AudioRecorder: (props: Props) => any;
 export { AudioRecorder };

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

@@ -1 +1 @@
-{"version":3,"file":"AudioRecorder.d.ts","sourceRoot":"","sources":["../../src/components/AudioRecorder.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAWH,OAAO,EAAiB,KAAK,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAErF,OAAO,EACH,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,uBAAuB,EAC/B,MAAM,UAAU,CAAC;AAGlB,KAAK,uBAAuB,GAAG,IAAI,CAC/B,uBAAuB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,EACnD,UAAU,GAAG,YAAY,GAAG,UAAU,CACzC,CAAC;AAEF,UAAU,KAAM,SAAQ,OAAO,CAAC,uBAAuB,CAAC;IACpD,QAAQ,EAAE,cAAc,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC3E;AAGD,QAAA,MAAM,aAAa,GAAI,OAAO,KAAK,QAsHlC,CAAC;AAGF,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"AudioRecorder.d.ts","sourceRoot":"","sources":["../../src/components/AudioRecorder.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAWH,OAAO,EAAiB,KAAK,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAErF,OAAO,EACH,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,uBAAuB,EAC/B,MAAM,UAAU,CAAC;AAGlB,KAAK,uBAAuB,GAAG,IAAI,CAC/B,uBAAuB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,EACnD,UAAU,GAAG,YAAY,GAAG,UAAU,CACzC,CAAC;AAEF,UAAU,KAAM,SAAQ,OAAO,CAAC,uBAAuB,CAAC;IACpD,QAAQ,EAAE,cAAc,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7F;AAGD,QAAA,MAAM,aAAa,GAAI,OAAO,KAAK,QAwHlC,CAAC;AAGF,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

@@ -8,6 +8,7 @@ interface Props {
     isPaused: boolean;
     hasRecording: boolean;
     isPlaying: boolean;
+    lastDuration: number;
     recordingTime: number;
     playbackTime: number;
     playbackDuration: number;

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;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"}
+{"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,YAAY,EAAE,MAAM,CAAC;IACrB,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,QA+JnC,CAAC;AAGF,OAAO,EAAE,cAAc,EAAE,CAAC"}

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

@@ -8,8 +8,6 @@ export declare const CancelButton: any;
 export declare const Track: any;
 export declare const CircleButton: any;
 export declare const Waveform: any;
-export declare const Bars: any;
-export declare const Bar: any;
 export declare const Timer: any;
 export declare const SendButton: any;
 export declare const SpinnerSlot: any;

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,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"}
+{"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,KAAK,KAKjB,CAAC;AAEF,eAAO,MAAM,UAAU,KAyBtB,CAAC;AAEF,eAAO,MAAM,WAAW,KAMvB,CAAC;AAEF,eAAO,MAAM,OAAO,KAoBnB,CAAC"}

package/dist/components/WaveformBars/WaveformBars.d.ts

@@ -8,11 +8,15 @@ interface Props {
     scale?: number;
     divider?: number;
     values: number[];
+    progress?: number;
     minHeight?: number;
     styleInterpolator?: (context: {
         normalized: number;
         height: number;
         index: number;
+        progress: number;
+        barProgress: number;
+        isPlayed: boolean;
     }) => React.CSSProperties;
 }
 declare const WaveformBars: (props: Props) => any;

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

@@ -1 +1 @@
-{"version":3,"file":"WaveformBars.d.ts","sourceRoot":"","sources":["../../../src/components/WaveformBars/WaveformBars.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,UAAU,KAAK;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE;QAC1B,UAAU,EAAE,MAAM,CAAC;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;KACjB,KAAK,KAAK,CAAC,aAAa,CAAC;CAC7B;AAGD,QAAA,MAAM,YAAY,GAAI,OAAO,KAAK,QA0BjC,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"WaveformBars.d.ts","sourceRoot":"","sources":["../../../src/components/WaveformBars/WaveformBars.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,UAAU,KAAK;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE;QAC1B,UAAU,EAAE,MAAM,CAAC;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,WAAW,EAAE,MAAM,CAAC;QACpB,QAAQ,EAAE,OAAO,CAAC;KACrB,KAAK,KAAK,CAAC,aAAa,CAAC;CAC7B;AAGD,QAAA,MAAM,YAAY,GAAI,OAAO,KAAK,QAoCjC,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/WaveformBars/WaveformBars.styled.d.ts

@@ -0,0 +1,3 @@
+export declare const Bars: any;
+export declare const Bar: any;
+//# sourceMappingURL=WaveformBars.styled.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WaveformBars.styled.d.ts","sourceRoot":"","sources":["../../../src/components/WaveformBars/WaveformBars.styled.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI,KAMhB,CAAC;AAEF,eAAO,MAAM,GAAG,KAOf,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"useAudioRecorderHandlers.d.ts","sourceRoot":"","sources":["../../src/hooks/useAudioRecorderHandlers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAG7E,UAAU,+BAA+B;IACrC,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C;AAGD,QAAA,MAAM,wBAAwB,GAAI,SAAS,+BAA+B;;;;;;CA2KzE,CAAC;AAGF,OAAO,EAAE,wBAAwB,EAAE,CAAC"}
+{"version":3,"file":"useAudioRecorderHandlers.d.ts","sourceRoot":"","sources":["../../src/hooks/useAudioRecorderHandlers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAG7E,UAAU,+BAA+B;IACrC,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C;AAGD,QAAA,MAAM,wBAAwB,GAAI,SAAS,+BAA+B;;;;;;CAuKzE,CAAC;AAGF,OAAO,EAAE,wBAAwB,EAAE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"useMediaRecorder.d.ts","sourceRoot":"","sources":["../../src/hooks/useMediaRecorder.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAGvD,UAAU,sBAAsB;IAC5B,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,aAAa,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,QAAA,MAAM,gBAAgB,GAAI,WAAW,sBAAsB,KAAG,sBAkI7D,CAAC;AAGF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"useMediaRecorder.d.ts","sourceRoot":"","sources":["../../src/hooks/useMediaRecorder.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAGvD,UAAU,sBAAsB;IAC5B,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,aAAa,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,QAAA,MAAM,gBAAgB,GAAI,WAAW,sBAAsB,KAAG,sBAsI7D,CAAC;AAGF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/hooks/useRecordingSender.d.ts

@@ -9,8 +9,9 @@ interface UseRecordingSenderOptions<TFile> {
     mimeType: string;
     audioBlob: Blob | null;
     uploadId: string;
+    getDurationMs: () => number;
     uploader?: UploadStrategy<TFile>;
-    onUploaded: (file: TFile) => void | Promise<void>;
+    onUploaded: (file: TFile, duration: number) => void | Promise<void>;
     deleteRecording: () => void;
     autoResetAfterUpload: boolean;
     onRecordingError?: (error: unknown) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"useRecordingSender.d.ts","sourceRoot":"","sources":["../../src/hooks/useRecordingSender.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG/C,UAAU,yBAAyB,CAAC,KAAK;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IACjC,UAAU,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C;AAGD,QAAA,MAAM,kBAAkB,GAAI,KAAK,GAAG,OAAO,EAAE,SAAS,yBAAyB,CAAC,KAAK,CAAC;;CA0DrF,CAAC;AAGF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"useRecordingSender.d.ts","sourceRoot":"","sources":["../../src/hooks/useRecordingSender.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG/C,UAAU,yBAAyB,CAAC,KAAK;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IACjC,UAAU,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpE,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C;AAGD,QAAA,MAAM,kBAAkB,GAAI,KAAK,GAAG,OAAO,EAAE,SAAS,yBAAyB,CAAC,KAAK,CAAC;;CA+DrF,CAAC;AAGF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/hooks/useRecordingTiming.d.ts

@@ -5,6 +5,8 @@
  */
 interface UseRecordingTimingResult {
     recordingTime: number;
+    lastDuration: number;
+    getElapsedMs: () => number;
     pauseSession: () => void;
     resetSession: () => void;
     resumeSession: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"useRecordingTiming.d.ts","sourceRoot":"","sources":["../../src/hooks/useRecordingTiming.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,UAAU,wBAAwB;IAC9B,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,QAAA,MAAM,kBAAkB,QAAO,wBAgF9B,CAAC;AAGF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"useRecordingTiming.d.ts","sourceRoot":"","sources":["../../src/hooks/useRecordingTiming.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,UAAU,wBAAwB;IAC9B,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,MAAM,CAAC;IAC3B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,QAAA,MAAM,kBAAkB,QAAO,wBAwG9B,CAAC;AAGF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"useVoiceRecorder.d.ts","sourceRoot":"","sources":["../../src/hooks/useVoiceRecorder.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAWH,OAAO,KAAK,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAGhF,iBAAS,gBAAgB,CAAC,KAAK,GAAG,OAAO,EAAE,KAAK,EAAE,uBAAuB,CAAC,KAAK,CAAC,GAAG,sBAAsB,CAuMxG;AAGD,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"useVoiceRecorder.d.ts","sourceRoot":"","sources":["../../src/hooks/useVoiceRecorder.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAWH,OAAO,KAAK,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAGhF,iBAAS,gBAAgB,CAAC,KAAK,GAAG,OAAO,EAAE,KAAK,EAAE,uBAAuB,CAAC,KAAK,CAAC,GAAG,sBAAsB,CA2MxG;AAGD,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/hooks/useVoiceRecorderInput.d.ts

@@ -6,7 +6,7 @@
 import type { UploadStrategy } from '../types';
 interface UseVoiceRecorderInputOptions {
     uploader?: UploadStrategy<unknown>;
-    onUploaded?: (file: unknown) => void | Promise<void>;
+    onUploaded?: (file: unknown, duration: number) => void | Promise<void>;
     onSend?: (file: File, duration: number) => void | Promise<void>;
     onError?: (error: unknown) => void;
     onCancel?: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"useVoiceRecorderInput.d.ts","sourceRoot":"","sources":["../../src/hooks/useVoiceRecorderInput.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG/C,UAAU,4BAA4B;IAClC,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,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,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,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;CACrB;AAGD,QAAA,MAAM,qBAAqB,GAAI,SAAS,4BAA4B;;;;;;;;;;CA6MnE,CAAC;AAGF,OAAO,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"useVoiceRecorderInput.d.ts","sourceRoot":"","sources":["../../src/hooks/useVoiceRecorderInput.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG/C,UAAU,4BAA4B;IAClC,QAAQ,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvE,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,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,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;CACrB;AAGD,QAAA,MAAM,qBAAqB,GAAI,SAAS,4BAA4B;;;;;;;;;;CA6MnE,CAAC;AAGF,OAAO,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/index.cjs

@@ -276,6 +276,9 @@ const useMediaRecorder = (callbacks) => {
         if (!mediaRecorderRef.current || !isRecording) {
             return;
         }
+        if (mediaRecorderRef.current.state === 'paused') {
+            mediaRecorderRef.current.resume();
+        }
         mediaRecorderRef.current.stop();
     }, [isRecording]);
     const cancelRecording = React.useCallback(() => {
@@ -434,6 +437,7 @@ const useAudioPlayback = () => {
  * @author: exode <hello@exode.ru>
  */
 const useRecordingTiming = () => {
+    const [lastDuration, setLastDuration] = React.useState(0);
     const [recordingTime, setRecordingTime] = React.useState(0);
     const timerRef = React.useRef(null);
     const recordingStartRef = React.useRef(null);
@@ -461,6 +465,7 @@ const useRecordingTiming = () => {
     const startNewSession = React.useCallback(() => {
         recordingAccumulatedRef.current = 0;
         setRecordingTime(0);
+        setLastDuration(0);
         recordingStartRef.current = performance.now();
         startTicker();
     }, [startTicker]);
@@ -478,7 +483,21 @@ const useRecordingTiming = () => {
         setRecordingTime(roundTo(recordingAccumulatedRef.current));
         stopTicker();
     }, [stopTicker]);
+    const getElapsedMs = React.useCallback(() => {
+        const accumulated = recordingAccumulatedRef.current;
+        const elapsed = recordingStartRef.current !== null
+            ? (performance.now() - recordingStartRef.current) / 1000 + accumulated
+            : accumulated;
+        return Math.round(elapsed * 1000);
+    }, []);
     const resetSession = React.useCallback(() => {
+        const accumulated = recordingAccumulatedRef.current;
+        const elapsed = recordingStartRef.current !== null
+            ? (performance.now() - recordingStartRef.current) / 1000 + accumulated
+            : accumulated;
+        if (elapsed > 0) {
+            setLastDuration(roundTo(elapsed));
+        }
         stopTicker();
         recordingStartRef.current = null;
         recordingAccumulatedRef.current = 0;
@@ -490,6 +509,8 @@ const useRecordingTiming = () => {
         };
     }, [stopTicker]);
     return {
+        lastDuration,
+        getElapsedMs,
         pauseSession,
         resetSession,
         recordingTime,
@@ -591,7 +612,7 @@ const useRecorderVisualization = () => {
  * @author: exode <hello@exode.ru>
  */
 const useRecordingSender = (options) => {
-    const { uploader, fileName, mimeType, uploadId, audioBlob, onUploaded, onRecordingError, deleteRecording, autoResetAfterUpload, } = options;
+    const { uploader, fileName, mimeType, uploadId, audioBlob, onUploaded, getDurationMs, onRecordingError, deleteRecording, autoResetAfterUpload, } = options;
     const sendRecording = React.useCallback(async () => {
         if (!audioBlob) {
             const error = new Error('Voice recording is not available');
@@ -604,11 +625,13 @@ const useRecordingSender = (options) => {
             throw error;
         }
         try {
+            const durationMs = getDurationMs();
+            const durationSec = durationMs / 1000;
             const file = new File([audioBlob], fileName, {
                 type: audioBlob.type || mimeType,
             });
             const uploaded = await uploader(file, { uploadId });
-            await onUploaded(uploaded);
+            await onUploaded(uploaded, durationSec);
             if (autoResetAfterUpload) {
                 deleteRecording();
             }
@@ -624,8 +647,9 @@ const useRecordingSender = (options) => {
         audioBlob,
         mimeType,
         onUploaded,
-        onRecordingError,
+        getDurationMs,
         deleteRecording,
+        onRecordingError,
         autoResetAfterUpload,
     ]);
     return { sendRecording };
@@ -641,7 +665,7 @@ function useVoiceRecorder(props) {
     const [audioBlob, setAudioBlob] = React.useState(null);
     const { audioURL, isPlaying, mountBlob, playbackTime, stopPlayback, resetPlayback, togglePlayback: _togglePlayback, playbackDuration, } = useAudioPlayback();
     const { audioLevels, previewLevels, resetAudioLevels, stopVisualization, resetPreviewLevels, resumeVisualization, cleanupVisualization, generatePreviewLevels, initializeVisualization, } = useRecorderVisualization();
-    const { recordingTime, pauseSession, resetSession, resumeSession, startNewSession, } = useRecordingTiming();
+    const { lastDuration, getElapsedMs, recordingTime, pauseSession, resetSession, resumeSession, startNewSession, } = useRecordingTiming();
     const resetCurrentRecording = React.useCallback((opts) => {
         var _a;
         setAudioBlob(null);
@@ -669,10 +693,11 @@ function useVoiceRecorder(props) {
         mimeType,
         uploadId,
         uploader,
-        autoResetAfterUpload,
         onUploaded,
-        onRecordingError,
         deleteRecording,
+        onRecordingError,
+        autoResetAfterUpload,
+        getDurationMs: getElapsedMs,
     });
     const mountRecordingBlob = React.useCallback((blob) => {
         setAudioBlob(blob);
@@ -755,6 +780,7 @@ function useVoiceRecorder(props) {
         isPlaying,
         isRecording,
         audioLevels,
+        lastDuration,
         playbackTime,
         recordingTime,
         previewLevels,
@@ -1101,9 +1127,6 @@ const useAudioRecorderHandlers = (options) => {
         toggleRecordingPause,
     ]);
     const handleSend = React.useCallback(async () => {
-        if (isSending) {
-            return;
-        }
         shouldSendAfterStopRef.current = false;
         setIsSending(true);
         try {
@@ -1120,7 +1143,6 @@ const useAudioRecorderHandlers = (options) => {
             setIsSending(false);
         }
     }, [
-        isSending,
         stopPlayback,
         onUploadError,
         sendRecording,
@@ -1131,6 +1153,7 @@ const useAudioRecorderHandlers = (options) => {
             return;
         }
         if (isRecording) {
+            setIsSending(true);
             shouldSendAfterStopRef.current = true;
             stopRecording();
             return;
@@ -1268,6 +1291,44 @@ const IdleControl = (props) => {
     return (jsxRuntime.jsxs(IdleWrapper, { children: [jsxRuntime.jsxs(IdleButton, { type: "button", onClick: onClick, "aria-label": startAriaLabel, children: [jsxRuntime.jsx(IdleButtonOutline, { "aria-hidden": true }), jsxRuntime.jsx(IdleButtonGlow, { "aria-hidden": true }), jsxRuntime.jsx(icons.Icon32Microphone, { height: 48, width: 48 })] }), jsxRuntime.jsx(IdleInstruction, { children: instruction })] }));
 };
 
+const Bars = styled.div `
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: flex-end;
+    gap: 3px;
+`;
+const Bar = styled.div `
+    flex: 1;
+    min-width: 2px;
+    border-radius: 9999px;
+    background: var(--white, #ffffff);
+    opacity: 0.6;
+    transition: height 120ms ease, opacity 120ms ease;
+`;
+
+const WaveformBars = (props) => {
+    const { values, progress, styleInterpolator, scale = 40, minHeight = 6, divider = 100, } = props;
+    return (jsxRuntime.jsx(Bars, { children: values.map((value, index) => {
+            const normalized = clampValue(value);
+            const height = Math.max(minHeight, (normalized / divider) * scale);
+            const barProgress = values.length > 1 ? index / (values.length - 1) : 0;
+            const isPlayed = (progress !== null && progress !== void 0 ? progress : 0) > 0 && barProgress <= (progress !== null && progress !== void 0 ? progress : 0);
+            const interpolated = styleInterpolator === null || styleInterpolator === void 0 ? void 0 : styleInterpolator({
+                normalized,
+                height,
+                index,
+                progress: progress !== null && progress !== void 0 ? progress : 0,
+                barProgress,
+                isPlayed,
+            });
+            return (jsxRuntime.jsx(Bar, { style: {
+                    height: `${height}px`,
+                    ...interpolated,
+                } }, index));
+        }) }));
+};
+
 /**
  * RecordingShell styles
  *
@@ -1362,21 +1423,6 @@ const Waveform = styled.div `
     align-items: center;
     overflow: hidden;
 `;
-const Bars = styled.div `
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: flex-end;
-    gap: 3px;
-`;
-const Bar = styled.div `
-    flex: 1;
-    min-width: 2px;
-    border-radius: 9999px;
-    background: var(--white, #ffffff);
-    opacity: 0.6;
-    transition: height 120ms ease, opacity 120ms ease;
-`;
 const Timer$1 = styled.span `
     text-align: right;
     font-size: 13px;
@@ -1438,31 +1484,33 @@ const Spinner = styled.span `
     }
 `;
 
-const WaveformBars = (props) => {
-    const { values, styleInterpolator, scale = 40, minHeight = 6, divider = 100, } = props;
-    return (jsxRuntime.jsx(Bars, { children: values.map((value, index) => {
-            const normalized = clampValue(value);
-            const height = Math.max(minHeight, (normalized / divider) * scale);
-            const interpolated = styleInterpolator === null || styleInterpolator === void 0 ? void 0 : styleInterpolator({ normalized, height, index });
-            return (jsxRuntime.jsx(Bar, { style: {
-                    height: `${height}px`,
-                    ...interpolated,
-                } }, index));
-        }) }));
-};
-
 const RecordingShell = (props) => {
     const { isPaused, isPlaying, isSending, isRecording, audioLevels, hasRecording, playbackTime, previewLevels, recordingTime, stopAriaLabel, playAriaLabel, sendAriaLabel, startAriaLabel, cancelAriaLabel, playbackDuration, pausePlaybackAriaLabel, pauseRecordingAriaLabel, resumeRecordingAriaLabel, onSend, onCancel, formatTime, onRecordToggle, onTogglePlayback, } = props;
+    const { lastDuration } = props;
+    const isPreview = !isRecording || isPaused;
     const waveformValues = isRecording ? audioLevels : (hasRecording ? previewLevels : audioLevels);
+    const effectiveDuration = recordingTime
+        || playbackDuration
+        || lastDuration
+        || 1;
+    const progress = (isPreview && isPlaying)
+        ? Math.min(1, playbackTime / effectiveDuration)
+        : 0;
     const displayTime = React.useMemo(() => {
-        if (isRecording) {
+        if (isPlaying) {
+            return formatTime(playbackTime);
+        }
+        if (isRecording && !isPaused) {
+            return formatTime(recordingTime);
+        }
+        if (isRecording && isPaused) {
             return formatTime(recordingTime);
         }
+        if (lastDuration > 0) {
+            return formatTime(lastDuration);
+        }
         if (hasRecording) {
-            if (isPlaying) {
-                return formatTime(playbackTime);
-            }
-            if (playbackDuration > 0) {
+            if (playbackDuration > 0.5) {
                 return formatTime(playbackDuration);
             }
             if (recordingTime > 0) {
@@ -1470,7 +1518,17 @@ const RecordingShell = (props) => {
             }
         }
         return formatTime(0);
-    }, [formatTime, hasRecording, isPlaying, playbackDuration, playbackTime, recordingTime]);
+    }, [
+        isPaused,
+        isPlaying,
+        formatTime,
+        isRecording,
+        lastDuration,
+        hasRecording,
+        playbackTime,
+        recordingTime,
+        playbackDuration,
+    ]);
     const recordButtonDisabled = isSending;
     const recordButtonIcon = !isRecording || isPaused
         ? jsxRuntime.jsx(icons.Icon16Microphone, { width: 24, height: 24 })
@@ -1488,10 +1546,13 @@ const RecordingShell = (props) => {
         : 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.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 }) => ({
+    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, { scale: 42, minHeight: 6, divider: 100, progress: progress, values: waveformValues, styleInterpolator: ({ normalized, isPlayed, progress: p }) => ({
                                 height: `${12 + normalized / 2}px`,
                                 maxHeight: '34px',
-                                opacity: 0.38 + Math.min(0.5, normalized / 120),
+                                opacity: p > 0
+                                    ? (isPlayed ? 0.80 : 0.22)
+                                    : 0.38 + Math.min(0.5, normalized / 120),
+                                transition: 'opacity 80ms ease',
                             }) }) }), 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 })) })] }));
 };
 
@@ -1574,9 +1635,9 @@ const AudioRecorder = (props) => {
         messages,
         onUploadError,
     });
-    const { isPaused, isPlaying, formatTime, audioLevels, isRecording, playbackTime, hasRecording, previewLevels, recordingTime, playbackDuration, } = recorder;
-    const showRecorderBar = isRecording || hasRecording;
-    return (jsxRuntime.jsx(Container, { className: className, children: showRecorderBar ? (jsxRuntime.jsx(RecordingShell, { isPaused: isPaused, isSending: isSending, isPlaying: isPlaying, formatTime: formatTime, onCancel: handleCancel, isRecording: isRecording, audioLevels: audioLevels, onSend: handleSendRequest, playbackTime: playbackTime, hasRecording: hasRecording, previewLevels: previewLevels, recordingTime: recordingTime, playbackDuration: playbackDuration, onRecordToggle: handleRecordToggle, sendAriaLabel: messages.buttons.send, onTogglePlayback: handlePlaybackToggle, cancelAriaLabel: messages.buttons.cancel, playAriaLabel: messages.aria.playRecording, stopAriaLabel: messages.aria.stopRecording, startAriaLabel: messages.aria.startRecording, pauseRecordingAriaLabel: messages.aria.pauseRecording, resumeRecordingAriaLabel: messages.aria.resumeRecording, pausePlaybackAriaLabel: messages.aria.pausePlayback })) : (jsxRuntime.jsx(IdleControl, { onClick: handleRecordToggle, startAriaLabel: messages.aria.startRecording, instruction: messages.instruction })) }));
+    const { isPaused, isPlaying, formatTime, audioLevels, isRecording, lastDuration, playbackTime, hasRecording, previewLevels, recordingTime, playbackDuration, } = recorder;
+    const showRecorderBar = isRecording || hasRecording || isSending;
+    return (jsxRuntime.jsx(Container, { className: className, children: showRecorderBar ? (jsxRuntime.jsx(RecordingShell, { isPaused: isPaused, isSending: isSending, isPlaying: isPlaying, formatTime: formatTime, onCancel: handleCancel, isRecording: isRecording, audioLevels: audioLevels, onSend: handleSendRequest, playbackTime: playbackTime, lastDuration: lastDuration, hasRecording: hasRecording, previewLevels: previewLevels, recordingTime: recordingTime, playbackDuration: playbackDuration, onRecordToggle: handleRecordToggle, sendAriaLabel: messages.buttons.send, onTogglePlayback: handlePlaybackToggle, cancelAriaLabel: messages.buttons.cancel, playAriaLabel: messages.aria.playRecording, stopAriaLabel: messages.aria.stopRecording, startAriaLabel: messages.aria.startRecording, pauseRecordingAriaLabel: messages.aria.pauseRecording, resumeRecordingAriaLabel: messages.aria.resumeRecording, pausePlaybackAriaLabel: messages.aria.pausePlayback })) : (jsxRuntime.jsx(IdleControl, { onClick: handleRecordToggle, startAriaLabel: messages.aria.startRecording, instruction: messages.instruction })) }));
 };
 
 /**
@@ -2215,7 +2276,7 @@ const VoiceMessagePlayer = React.forwardRef((props, ref) => {
             observer.disconnect();
         };
     }, []);
-    const displayTime = isPlaying
+    const displayTime = (isPlaying || currentTime > 0)
         ? formatTime(currentTime)
         : formatTime(resolvedDuration);
     const handleTrackClick = React.useCallback((e) => {