feat(UX-1461): Voice Memo component #377

thelukewalton · 2025-08-13T16:23:25Z

chore: Add animation duration to ZetaProgressIndicator / Circle and added center component to ZetaProgressCircle

github-actions · 2025-08-13T16:30:18Z

PR Checks complete

✅ - Linting / Formatting
✅ - Static analysis passed
✅ - All tests passed
✅ - Branch is not behind

📈 - Code coverage: 50.48%

See details

File Name	%	Passing?
packages/zeta_flutter/lib/src/components/accordion/accordion.dart	82.2%	✅
packages/zeta_flutter/lib/src/components/accordion/accordion_item.dart	6.5%	⛔️
packages/zeta_flutter/lib/src/components/accordion/accordion_item_ui.dart	88%	✅
packages/zeta_flutter/lib/src/components/avatar_rail/avatar_rail.dart	53.7%	⛔️
packages/zeta_flutter/lib/src/components/avatars/avatar.dart	94.6%	✅
packages/zeta_flutter/lib/src/components/badges/indicator.dart	100%	✅
packages/zeta_flutter/lib/src/components/badges/label.dart	100%	✅
packages/zeta_flutter/lib/src/components/badges/priority_pill.dart	96.8%	✅
packages/zeta_flutter/lib/src/components/badges/status_label.dart	100%	✅
packages/zeta_flutter/lib/src/components/badges/tag.dart	98.6%	✅
packages/zeta_flutter/lib/src/components/bottom sheets/bottom_sheet.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/bottom sheets/menu_items.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/breadcrumb/breadcrumb.dart	86.3%	✅
packages/zeta_flutter/lib/src/components/button_group/button_group.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/buttons/button.dart	94.3%	✅
packages/zeta_flutter/lib/src/components/buttons/button_style.dart	96.8%	✅
packages/zeta_flutter/lib/src/components/buttons/icon_button.dart	51.2%	⛔️
packages/zeta_flutter/lib/src/components/buttons/input_icon_button.dart	72.7%	⛔️
packages/zeta_flutter/lib/src/components/buttons/tile_button.dart	69%	⛔️
packages/zeta_flutter/lib/src/components/card/card_container.dart	88.5%	✅
packages/zeta_flutter/lib/src/components/chat_item/chat_item.dart	98.2%	✅
packages/zeta_flutter/lib/src/components/chat_item/contact_item.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/checkbox/checkbox.dart	99%	✅
packages/zeta_flutter/lib/src/components/chips/assist_chip.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/chips/chip.dart	81.7%	✅
packages/zeta_flutter/lib/src/components/chips/filter_chip.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/chips/input_chip.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/chips/status_chip.dart	90.9%	✅
packages/zeta_flutter/lib/src/components/comms_button/comms_button.dart	82%	✅
packages/zeta_flutter/lib/src/components/date_input/date_input.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/dial_pad/dial_pad.dart	100%	✅
packages/zeta_flutter/lib/src/components/dialog/dialog.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/dropdown/dropdown.dart	35.8%	⛔️
packages/zeta_flutter/lib/src/components/empty_state/empty_state.dart	100%	✅
packages/zeta_flutter/lib/src/components/fabs/fab.dart	100%	✅
packages/zeta_flutter/lib/src/components/filter_selection/filter_selection.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/global_header/global_header.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/global_header/header_tab_item.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/icon/icon.dart	100%	✅
packages/zeta_flutter/lib/src/components/in_page_banner/in_page_banner.dart	98.6%	✅
packages/zeta_flutter/lib/src/components/list_item/dropdown_list_item.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/list_item/list_item.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/list_item/list_scope.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/list_item/notification_list_item.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/navigation bar/navigation_bar.dart	94.5%	✅
packages/zeta_flutter/lib/src/components/navigation_rail/navigation_rail.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/pagination/pagination.dart	0.6%	⛔️
packages/zeta_flutter/lib/src/components/password/password_input.dart	100%	✅
packages/zeta_flutter/lib/src/components/phone_input/phone_input.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/progress/progress.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/progress/progress_bar.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/progress/progress_circle.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/radio/radio.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/range_selector/range_selector.dart	84.5%	✅
packages/zeta_flutter/lib/src/components/screen_header_bar/screen_header_bar.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/search_bar/search_bar.dart	98.3%	✅
packages/zeta_flutter/lib/src/components/segmented_control/segmented_control.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/select_input/select_input.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/slider/slider.dart	82.3%	✅
packages/zeta_flutter/lib/src/components/snack_bar/snack_bar.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/stepper/stepper.dart	95.1%	✅
packages/zeta_flutter/lib/src/components/stepper_input/stepper_input.dart	71.9%	⛔️
packages/zeta_flutter/lib/src/components/switch/material_switch.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/switch/zeta_switch.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/system_banner/system_banner.dart	85.4%	✅
packages/zeta_flutter/lib/src/components/tabs/tab.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/tabs/tab_bar.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/text_input/hint_text.dart	75.9%	⛔️
packages/zeta_flutter/lib/src/components/text_input/input_label.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/text_input/internal_text_input.dart	73.1%	⛔️
packages/zeta_flutter/lib/src/components/text_input/text_input.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/time_input/time_input.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/tooltip/tooltip.dart	98.9%	✅
packages/zeta_flutter/lib/src/components/top_app_bar/extended_top_app_bar.dart	93.9%	✅
packages/zeta_flutter/lib/src/components/top_app_bar/search_top_app_bar.dart	86.6%	✅
packages/zeta_flutter/lib/src/components/top_app_bar/top_app_bar.dart	98.1%	✅
packages/zeta_flutter/lib/src/components/voice_memo/state/playback_state.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/voice_memo/state/recording_state.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/voice_memo/state/wav_amplitude_decoder.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/voice_memo/state/wav_header.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/voice_memo/ui/audio_visualizer.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/voice_memo/ui/play_button.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/voice_memo/ui/recording_control.dart	4.2%	⛔️
packages/zeta_flutter/lib/src/components/voice_memo/ui/voice_memo.dart	0%	⛔️
packages/zeta_flutter/lib/src/components/voice_memo/ui/waveform.dart	0%	⛔️
packages/zeta_flutter/lib/src/interfaces/audio_decoder.dart	0%	⛔️
packages/zeta_flutter/lib/src/interfaces/countries.dart	10%	⛔️
packages/zeta_flutter/lib/src/interfaces/form_field.dart	81.4%	✅
packages/zeta_flutter/lib/src/interfaces/phone_number.dart	0%	⛔️
packages/zeta_flutter/lib/src/utils/enums.dart	100%	✅
packages/zeta_flutter/lib/src/utils/widget.dart	100%	✅
packages/zeta_flutter_theme/lib/src/breakpoints.dart	81.8%	✅
packages/zeta_flutter_theme/lib/src/color_extensions.dart	86.1%	✅
packages/zeta_flutter_theme/lib/src/color_swatch.dart	57.3%	⛔️
packages/zeta_flutter_theme/lib/src/contrast.dart	50%	⛔️
packages/zeta_flutter_theme/lib/src/custom_theme.dart	55.6%	⛔️
packages/zeta_flutter_theme/lib/src/generated/tokens/primitives.g.dart	64.5%	⛔️
packages/zeta_flutter_theme/lib/src/generated/tokens/semantics.g.dart	90.5%	✅
packages/zeta_flutter_theme/lib/src/rounded.dart	83.3%	✅
packages/zeta_flutter_theme/lib/src/theme_service.dart	17.9%	⛔️
packages/zeta_flutter_theme/lib/src/tokens.dart	100%	✅
packages/zeta_flutter_theme/lib/src/typography.dart	84.6%	✅
packages/zeta_flutter_theme/lib/src/zeta.dart	97.5%	✅
packages/zeta_flutter_theme/lib/src/zeta_provider.dart	93%	✅
packages/zeta_flutter_utils/lib/src/debounce.dart	100%	✅
packages/zeta_flutter_utils/lib/src/extensions.dart	79.1%	⛔️
packages/zeta_flutter_utils/lib/src/nothing.dart	50%	⛔️
packages/zeta_flutter_utils/lib/src/platform/platform_is.dart	0%	⛔️
packages/zeta_flutter_utils/lib/src/platform/universal_platform_vm.dart	7.1%	⛔️
packages/zeta_icons/lib/src/illustrations.dart	0%	⛔️

_{Created with Flutter code quality action}

github-actions · 2025-08-13T16:32:15Z

Visit the preview URL for this PR (updated for commit 121d1fe):

https://zeta-flutter-main--pr-377-ux-1461-4dk6mo27.web.app

_{(expires Thu, 28 Aug 2025 18:35:07 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 5ca681de0a0ad9185b252304c113355d5ee04ca6}

fix: widgetbook for voice memo TODO: Fix url for web

DE7924

If you play a recording for a second time. It doesn't highlight the sound wave bars.

Strange artifact:

Copilot

Pull Request Overview

This PR introduces a new Voice Memo component to the Zeta Flutter design system. The implementation includes both a recording component (ZetaVoiceMemo) and an audio visualizer component (ZetaAudioVisualizer) with comprehensive audio waveform visualization capabilities.

Adds complete voice recording and playback functionality with audio visualizations
Implements WAV audio processing for waveform generation
Updates progress components with animation duration support and center widget capability

Reviewed Changes

Copilot reviewed 54 out of 62 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/zeta_flutter/lib/src/components/voice_memo/	New voice memo component implementation with recording controls, audio visualization, and state management
packages/zeta_flutter/lib/src/interfaces/audio_decoder.dart	Audio amplitude decoder interface for waveform generation
packages/zeta_flutter/lib/src/components/progress/progress_circle.dart	Enhanced progress circle with center widget support and animation duration
packages/zeta_flutter_utils/lib/src/extensions.dart	New duration formatting and list utility extensions
widgetbook/	Widgetbook integration and platform-specific audio plugin configurations
example/	Example implementation and platform audio permissions setup

Files not reviewed (1)

widgetbook/ios/Runner.xcworkspace/contents.xcworkspacedata: Language not supported

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

packages/zeta_flutter/lib/src/components/voice_memo/ui/waveform.dart

packages/zeta_flutter/lib/src/components/voice_memo/state/playback_state.dart

packages/zeta_flutter/lib/src/components/voice_memo/state/wav_amplitude_decoder.dart

…m.dart Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…amplitude_decoder.dart Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

aygurs · 2025-08-22T09:22:50Z

'Can Record' Widgetbook prop is intermittent. The message 'Recording not allowed' flashes up but then dissapears and user is able to record even if 'Can Record' is false.

Nitpick items (Purely UI/Cosmetic & not essential):

During audio playback, the voice playback does not line up with the volume increases on the wave forms (so voice and waveform are slightly out of track on playback).
When pressing the record button whilst recording audio to stop recording, the waveform jumps back to the beginning (I assume) rather than staying in place, but this could be intended functionality.
The delete, restart and send icons could potentially become smaller on smaller screen sizes (for example screen size None and iPhone 13 have the same size icons).
During playback, waveform does not scroll with sound playback and stays static.

DE7924

Just the can record prop bug

thelukewalton requested a review from Copilot August 13, 2025 16:23

This comment was marked as outdated.

Sign in to view

thelukewalton force-pushed the UX-1461 branch 2 times, most recently from 656f603 to 4cded56 Compare August 15, 2025 09:05

thelukewalton marked this pull request as ready for review August 15, 2025 13:14

thelukewalton requested a review from a team as a code owner August 15, 2025 13:14

thelukewalton and others added 22 commits August 19, 2025 17:51

many audio parts in here

e4488f5

wav only support working

885dc98

basic wav working

86095cc

refactor

1222b68

add tap / drag geestures

053fe9e

add color overrides for voice memo in chat bubble

2c574c9

add ui for voice memo. no functionality tho

2b444ed

reduce number of redraws

1b70f61

starting record

b1752da

basic recording

3ffff26

listen back to recordings

a47f33c

fix labels

61f7991

recording better

5614dad

make better

918c077

organize files

5488269

updates - test

2d6acff

ensure tokens are used and fix comments from copilot

3f8f1d3

fix: web asset support

5bf6aef

fix: widgetbook for voice memo TODO: Fix url for web

chore(automated): Lint commit and format

9fc7c94

fix: Audio recording on web

541c786

fix: fix file helpers

7ed06d9

docs: widgetbook

6181c3f

thelukewalton force-pushed the UX-1461 branch from ac020bb to cf825a5 Compare August 20, 2025 08:42

thelukewalton and others added 10 commits August 20, 2025 14:21

min provider

04fce01

fix second play bug

14651a7

fix under by 1 error

e9f9826

extract amplitude decoder interface

8603c12

tidy up

71b6e67

more tidy up

90032fc

remove duplicate config

a91e8ef

tidier

ef35ed3

copilots best refactor

9f714fc

chore(automated): Lint commit and format

af58eb2

thelukewalton requested a review from Copilot August 21, 2025 06:52

This comment was marked as outdated.

Sign in to view

DE7924 reviewed Aug 21, 2025

View reviewed changes

github review fixes

b444316

thelukewalton force-pushed the main branch 4 times, most recently from 2875bd3 to f58ba58 Compare August 21, 2025 16:34

Merge branch 'main' into UX-1461

adc5533

thelukewalton requested review from DE7924 and Copilot August 21, 2025 18:18

Copilot AI reviewed Aug 21, 2025

View reviewed changes

thelukewalton and others added 2 commits August 21, 2025 19:22

Update packages/zeta_flutter/lib/src/components/voice_memo/ui/wavefor…

591193a

…m.dart Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update packages/zeta_flutter/lib/src/components/voice_memo/state/wav_…

121d1fe

…amplitude_decoder.dart Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

thelukewalton force-pushed the UX-1461 branch from 1098c96 to 121d1fe Compare August 21, 2025 18:25

thelukewalton requested a review from aygurs August 22, 2025 09:00

DE7924 approved these changes Aug 22, 2025

View reviewed changes

DE7924 requested changes Aug 22, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(UX-1461): Voice Memo component #377

feat(UX-1461): Voice Memo component #377

Uh oh!

thelukewalton commented Aug 13, 2025 •

edited

Loading

Uh oh!

This comment was marked as outdated.

Uh oh!

github-actions bot commented Aug 13, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Aug 13, 2025 •

edited

Loading

Uh oh!

This comment was marked as outdated.

Uh oh!

DE7924 left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

aygurs commented Aug 22, 2025

Uh oh!

DE7924 left a comment

Uh oh!

Uh oh!

feat(UX-1461): Voice Memo component #377

Are you sure you want to change the base?

feat(UX-1461): Voice Memo component #377

Uh oh!

Conversation

thelukewalton commented Aug 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

github-actions bot commented Aug 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Checks complete

Uh oh!

github-actions bot commented Aug 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

DE7924 left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

aygurs commented Aug 22, 2025

Uh oh!

DE7924 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

thelukewalton commented Aug 13, 2025 •

edited

Loading

github-actions bot commented Aug 13, 2025 •

edited

Loading

github-actions bot commented Aug 13, 2025 •

edited

Loading