Skip to content

feat(AudioRecorder): count-up timer and hide waveform/time when idle#248

Open
abroa01 wants to merge 1 commit into
mainfrom
feat/audio-recorder-timer-idle
Open

feat(AudioRecorder): count-up timer and hide waveform/time when idle#248
abroa01 wants to merge 1 commit into
mainfrom
feat/audio-recorder-timer-idle

Conversation

@abroa01

@abroa01 abroa01 commented Jun 2, 2026

Copy link
Copy Markdown

Summary

Refines the AudioRecorder component to match the production beta.ozwell.ai recording UX.

Changes

  • Count-up timer only — during recording, TimeDisplay shows only the elapsed time (e.g. 0:07). The / <max> portion is no longer rendered while recording, removing the implied hard cap.
  • Hide waveform + time when idle — the waveform and the time row now render only when state !== 'idle', so the component is clean before recording starts.

Notes

  • Consumed by mieweb/ozwell-workspace (chat home page). A companion PR there bumps the submodule pointer and wires up the recorder state.

Related: mieweb/ozwell-workspace#99

Show only elapsed time during recording (no max-duration slash) and render the waveform + time row only when not idle.
Copilot AI review requested due to automatic review settings June 2, 2026 19:59
@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying ui with  Cloudflare Pages  Cloudflare Pages

Latest commit: 130db7e
Status: ✅  Deploy successful!
Preview URL: https://58dd471d.ui-6d0.pages.dev
Branch Preview URL: https://feat-audio-recorder-timer-id.ui-6d0.pages.dev

View logs

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Refines AudioRecorder’s UI to better match the recording UX used in production (beta.ozwell.ai), specifically simplifying the in-recording time display and reducing visual clutter before recording starts.

Changes:

  • Update TimeDisplay to show only the elapsed time while recording/paused (no trailing / … segment).
  • Hide the waveform visualizer and time row when the recorder is in the idle state.
Comments suppressed due to low confidence (1)

src/components/AudioRecorder/AudioRecorder.tsx:857

  • The showMax prop name is now misleading: when showMax is true the component hides the trailing / … portion entirely (it no longer "shows max"). Renaming this prop (and the corresponding condition) would reduce the chance of future regressions when adjusting the time display behavior.
          <TimeDisplay
            currentTime={currentTime}
            duration={duration}
            maxDuration={maxDuration}
            showMax={isRecording || isPaused}
          />

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +318 to +322
{!showMax && (
<>
<span>/</span>
<span>{formatTime(duration)}</span>
</>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants