edison/chanora
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui,ios,android): audio output route picker + collapse voice controls into single modal

Browse Source 
Two user-reported issues addressed:

  1. 'on supported devices such as iphone or android user should be
     able to select audio device such as speaker or airpods or phone'
  2. 'the bottom folder is duplicated with the app bar settings'

Issue 1 \u2014 audio output route picker:

Added the audio_router 1.1.1 plugin (MIT, supports iOS + Android)
which renders the platform-native picker:

  * iOS: Apple AVRoutePickerView system sheet \u2014 the same UI as
    Control Center's audio chooser. Lists Speaker / iPhone receiver /
    AirPods / connected Bluetooth devices / AirPlay / CarPlay.
    System manages the device list; we don't have to track route
    changes manually.

  * Android (post-rc.8 when we wire the platform): Material Design 3
    dialog backed by AudioManager.setCommunicationDevice() with
    SCO Bluetooth + USB headsets filtered for VoIP.

The picker prerequisite documented by the plugin (audio session
must be playAndRecord/voiceChat before the picker fires) is already
satisfied by our AppDelegate.swift configuration from commit 0466000.

The new _AudioOutputTile widget in voice_compact.dart subscribes to
AudioRouter.currentDeviceStream so the row label + icon auto-update
when the user plugs in headphones, connects AirPods, etc. \u2014 no
manual KVO observation needed.

Tile is mobile-only (Platform.isIOS || Platform.isAndroid). Desktop
hosts continue to use the system mixer; the tile is hidden.

Plugin caveat: the published enum AudioSourceType has no .usb
variant (despite README mentioning USB support). We map only the
seven real enum cases: builtinSpeaker / builtinReceiver / bluetooth /
wiredHeadset / carAudio / airplay / unknown.

Issue 2 \u2014 collapse voice controls into the single modal sheet:

The AppBar gear icon (Icons.tune) that opened VoiceSettingsDialog
was removed. It duplicated the configuration entry point that the
status chip \u2192 modal-sheet path already provides, and the user found
that duplication confusing on a phone-narrow screen where AppBar
real estate is precious.

The voice modal sheet (showVoiceDetailsSheet) is now the **single**
voice-controls surface on mobile, with layout (top to bottom):

  1. Audio output route picker tile (iOS / Android only) \u2014 new.
  2. Mode + bind / release-tail recap (display only).
  3. 'Adjust mode & release tail' OutlinedButton that closes the
     sheet and opens the same VoiceSettingsDialog the gear icon
     used to open. One config form, not two.
  4. Mic level meter.
  5. TX / RX frame counts + mic state.
  6. PTT capability badge (desktop only).

Sheet title renamed from 'Voice settings' (which collided with the
gear-icon tooltip) to 'Voice'. New l10n keys: voiceSheetTitle,
voiceAdjustSettings, audioOutputLabel, audioRoute{Speaker,Receiver,
Bluetooth,WiredHeadset,CarAudio,Airplay,Unknown}. en + zh translated.

Build: flutter build ios --release --no-codesign clean, 50.5 s,
Runner.app 30.2 MB (+200 KB from audio_router). flutter analyze
clean (6 pre-existing Radio.groupValue deprecation infos in
voice_settings.dart, unchanged).
This commit is contained in:
EdisonJwa
2026-05-16 18:18:43 +08:00
parent fa94b9438f
commit b8e9c8549e
7 changed files with 258 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/chanora_flutter/lib/widgets/voice_compact.dart
+188 -76
View File
@@ -2,24 +2,19 @@
// AppBar mutes + status chip with 2-line live readout + wide bottom-
// anchored PTT button + modal sheet for non-essential controls).
//
// Wide-mode (>= 840 dp) keeps the existing [VoiceBar] widget; this
// file is only invoked from `main.dart` when the body is narrow.
//
// Layout in narrow mode (in voice channel, PTT mode):
//
// [ AppBar with #channel chip + 🎤 mic 🎧 headset ⚙ settings ... ]
// [ ============= channel tree (Expanded) ============== ]
// [ chip: 'PTT · Hold the button' ↑ ]
// [ '200 ms tail · Mic on' ]
// [ ┌──────────────────────────────────────────────────┐]
// [ │ 🎤 PUSH TO TALK │] PTT button
// [ └──────────────────────────────────────────────────┘]
//
// Tapping the chip opens a [showModalBottomSheet] that surfaces the
// mode radio, release-tail slider, level meter, stats, and the
// (currently rare) capability badge. The mute buttons live in the
// AppBar so they remain visible without expanding the sheet.
// rc.8 follow-up (post-iPhone-test feedback): the AppBar gear icon
// was removed; the modal sheet is now the **single** voice-controls
// surface on mobile. Mode + release-tail are reached via an
// "Adjust mode & release tail" button inside the modal that opens
// the existing [VoiceSettingsDialog]. Audio output route picker is
// new — driven by the `audio_router` plugin, which renders the
// native AVRoutePickerView on iOS and a Material 3 device list on
// Android.
import 'dart:io' show Platform;
import 'package:audio_router/audio_router.dart';
import 'package:flutter/foundation.dart' show kIsWeb;
import 'package:flutter/material.dart';
import '../l10n/generated/app_localizations.dart';
@@ -27,10 +22,7 @@ import '../main.dart' show PttCapabilityBadge;
import '../src/rust/api.dart' as rust;
/// Two-line status chip that summarises the current voice state.
/// Tap to open the [_VoiceDetailsSheet] modal.
///
/// Line 1: mode + bound key (or "Hold the button" on mobile)
/// Line 2: release tail + mic state
/// Tap to open the voice details modal.
class VoiceStatusChip extends StatelessWidget {
/// Construct a status chip.
const VoiceStatusChip({
@@ -43,24 +35,22 @@ class VoiceStatusChip extends StatelessWidget {
required this.onTap,
});
/// Current transmit mode (PTT / Continuous / VoiceActivity).
/// Current transmit mode.
final rust.BridgeTransmitMode transmitMode;
/// Release-tail in milliseconds.
final int releaseTailMs;
/// Bound key label (empty on touch-only hosts where no hardware
/// key is bound — the chip's line 1 then says "Hold the button").
/// Bound key label (empty on touch-only hosts).
final String pttBoundKeyLabel;
/// Current audio stats; null while audio engine not running.
final rust.BridgeAudioStats? audioStats;
/// True on iOS / iPadOS / Android. Used so the chip's line 1
/// can say "Hold the button" rather than naming a hardware key.
/// True on iOS / iPadOS / Android.
final bool isTouchOnly;
/// Open the [_VoiceDetailsSheet] modal.
/// Open the voice details modal.
final VoidCallback onTap;
@override
@@ -81,12 +71,10 @@ class VoiceStatusChip extends StatelessWidget {
String line1;
if (transmitMode == rust.BridgeTransmitMode.ptt) {
if (isTouchOnly) {
// Touch-only hosts have no bound key; describe the
// on-screen button instead.
line1 = '$modeLabel · ${l10n.voicePttHoldHint}';
line1 = '$modeLabel \u00b7 ${l10n.voicePttHoldHint}';
} else {
// Desktop: name the bound key.
line1 = '$modeLabel · ${pttBoundKeyLabel.isEmpty ? "—" : pttBoundKeyLabel}';
line1 =
'$modeLabel \u00b7 ${pttBoundKeyLabel.isEmpty ? "\u2014" : pttBoundKeyLabel}';
}
} else {
line1 = modeLabel;
@@ -96,7 +84,7 @@ class VoiceStatusChip extends StatelessWidget {
? '$releaseTailMs${l10n.voiceReleaseTailHint} ${l10n.voiceReleaseTailLabel.toLowerCase()}'
: null;
final micText = micOn ? l10n.voiceMicOn : l10n.voiceMicOff;
final line2 = tailText == null ? micText : '$tailText · $micText';
final line2 = tailText == null ? micText : '$tailText \u00b7 $micText';
return Material(
type: MaterialType.transparency,
@@ -115,10 +103,10 @@ class VoiceStatusChip extends StatelessWidget {
),
child: Row(
children: [
// Mic state dot — solid + primary while transmitting,
// outlined while idle.
Icon(
micOn ? Icons.fiber_manual_record : Icons.fiber_manual_record_outlined,
micOn
? Icons.fiber_manual_record
: Icons.fiber_manual_record_outlined,
size: 12,
color: micOn
? theme.colorScheme.primary
@@ -163,15 +151,7 @@ class VoiceStatusChip extends StatelessWidget {
}
}
/// Wide, bottom-anchored push-to-talk button. Touch-and-hold drives
/// the engine via `onHeldChanged`; the bridge's release-tail timer
/// handles the trailing tail (SDD-096) so the user sees the same
/// behaviour as a hardware-key host.
///
/// Visually: filled primary-container chip at rest, filled primary
/// (with a soft outer glow) while held. 56 dp tall by spec, matching
/// the Material 3 extended-FAB height; horizontal margin is the
/// caller's responsibility so the button matches sibling content.
/// Wide, bottom-anchored push-to-talk button.
class VoicePttButton extends StatefulWidget {
/// Construct a PTT button.
const VoicePttButton({
@@ -180,13 +160,10 @@ class VoicePttButton extends StatefulWidget {
required this.onHeldChanged,
});
/// True while the engine reports the gate open (mirrors the level
/// meter's active flag). Drives the held-style visuals so the
/// user gets feedback that holding actually engaged the mic.
/// True while the engine reports the gate open.
final bool active;
/// Called with `true` on finger-down, `false` on finger-up or
/// gesture cancel. Map to `setPtt(active: held)` on the caller.
/// Called with `true` on finger-down, `false` on finger-up or cancel.
final ValueChanged<bool> onHeldChanged;
@override
@@ -265,22 +242,15 @@ class _VoicePttButtonState extends State<VoicePttButton> {
}
}
/// Show the voice details modal sheet. Returns when the user
/// dismisses (taps outside / swipes down / hits the close button).
///
/// Surfaces the non-essential controls + live readouts that don't
/// fit in the AppBar or the status chip:
/// * Mic level meter
/// * TX / RX frame counts + mic state line
/// * PTT capability badge (only on desktop; touch-only hosts hide
/// this because the capability story is always "L0 Focused via
/// on-screen button" and the on-screen button is itself the
/// evidence)
///
/// Mode + release-tail + bind-key are intentionally NOT duplicated
/// here — those still live in `VoiceSettingsDialog` reachable from
/// the AppBar's settings icon, so there's exactly one configuration
/// surface.
/// Show the voice controls modal sheet — the single voice-controls
/// surface on mobile. Tiles:
/// 1. Audio output route picker (iOS native AVRoutePickerView /
/// Android Material 3 list). Mobile only.
/// 2. Mode + bind / tail recap (display).
/// 3. "Adjust mode & release tail" button → [VoiceSettingsDialog].
/// 4. Mic level meter.
/// 5. TX / RX frame counts.
/// 6. PTT capability badge (desktop only).
Future<void> showVoiceDetailsSheet(
BuildContext context, {
required rust.BridgeAudioStats? audioStats,
@@ -291,10 +261,12 @@ Future<void> showVoiceDetailsSheet(
required String pttBackendId,
required String pttBoundInputClass,
required bool isTouchOnly,
required VoidCallback onAdjustVoiceSettings,
}) async {
await showModalBottomSheet<void>(
context: context,
showDragHandle: true,
isScrollControlled: true,
builder: (ctx) {
final theme = Theme.of(ctx);
final l10n = AppL10n.of(ctx);
@@ -309,19 +281,36 @@ Future<void> showVoiceDetailsSheet(
'${l10n.voiceModeVoiceActivity} (${l10n.voiceModeComingSoon})',
};
// Route picker only meaningful on iOS + Android where the OS
// owns audio routing. Desktop hosts skip the tile entirely.
final showRoutePicker =
!kIsWeb && (Platform.isIOS || Platform.isAndroid);
return SafeArea(
child: Padding(
child: SingleChildScrollView(
padding: const EdgeInsets.fromLTRB(20, 8, 20, 24),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
l10n.voiceSettingsTitle,
l10n.voiceSheetTitle,
style: theme.textTheme.titleLarge,
),
const SizedBox(height: 16),
// Mode + (PTT-only) bind / release-tail recap line.
// 1) Audio output route picker tile (mobile only).
if (showRoutePicker) ...[
const _AudioOutputTile(),
const SizedBox(height: 12),
Divider(
height: 1,
color: theme.colorScheme.outlineVariant,
),
const SizedBox(height: 12),
],
// 2) Mode + bind / tail recap (display only).
Row(
children: [
Icon(
@@ -346,18 +335,32 @@ Future<void> showVoiceDetailsSheet(
padding: const EdgeInsets.only(left: 26),
child: Text(
isTouchOnly
? '${l10n.voicePttHoldHint} · ${l10n.voiceReleaseTailLabel}: $releaseTailMs${l10n.voiceReleaseTailHint}'
? '${l10n.voicePttHoldHint} \u00b7 ${l10n.voiceReleaseTailLabel}: $releaseTailMs${l10n.voiceReleaseTailHint}'
: '${l10n.voiceModePtt}: '
'${pttBoundKeyLabel.isEmpty ? "—" : pttBoundKeyLabel}'
' · ${l10n.voiceReleaseTailLabel}: $releaseTailMs${l10n.voiceReleaseTailHint}',
'${pttBoundKeyLabel.isEmpty ? "\u2014" : pttBoundKeyLabel}'
' \u00b7 ${l10n.voiceReleaseTailLabel}: $releaseTailMs${l10n.voiceReleaseTailHint}',
style: theme.textTheme.bodySmall?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
),
),
),
],
const SizedBox(height: 12),
// 3) Adjust button — opens VoiceSettingsDialog. One
// config form for mode + tail (+ bind on desktop),
// not two.
OutlinedButton.icon(
onPressed: () {
Navigator.of(ctx).pop();
onAdjustVoiceSettings();
},
icon: const Icon(Icons.tune),
label: Text(l10n.voiceAdjustSettings),
),
const SizedBox(height: 16),
// Level meter.
// 4) Level meter.
_LevelMeter(active: levelActive),
const SizedBox(height: 6),
if (stats != null)
@@ -369,9 +372,8 @@ Future<void> showVoiceDetailsSheet(
),
style: theme.textTheme.bodySmall,
),
// PTT capability badge — desktop-only (the touch-only
// story is "L0 Focused via on-screen button" which is
// already visually obvious from the PTT button).
// 5) PTT capability badge — desktop-only.
if (isPtt && !isTouchOnly) ...[
const SizedBox(height: 12),
PttCapabilityBadge(
@@ -388,6 +390,116 @@ Future<void> showVoiceDetailsSheet(
);
}
/// Tile that displays the current audio output route + opens the
/// native picker on tap. Subscribes to `currentDeviceStream` so the
/// row auto-updates when the user plugs in headphones, connects
/// AirPods, etc.
class _AudioOutputTile extends StatefulWidget {
const _AudioOutputTile();
@override
State<_AudioOutputTile> createState() => _AudioOutputTileState();
}
class _AudioOutputTileState extends State<_AudioOutputTile> {
final AudioRouter _router = AudioRouter();
AudioDevice? _device;
@override
void initState() {
super.initState();
_router.currentDeviceStream.listen((dev) {
if (!mounted) return;
setState(() => _device = dev);
});
}
String _deviceLabel(AudioSourceType? type, AppL10n l10n) {
switch (type) {
case AudioSourceType.builtinSpeaker:
return l10n.audioRouteSpeaker;
case AudioSourceType.builtinReceiver:
return l10n.audioRouteReceiver;
case AudioSourceType.bluetooth:
return l10n.audioRouteBluetooth;
case AudioSourceType.wiredHeadset:
return l10n.audioRouteWiredHeadset;
case AudioSourceType.carAudio:
return l10n.audioRouteCarAudio;
case AudioSourceType.airplay:
return l10n.audioRouteAirplay;
case AudioSourceType.unknown:
case null:
return l10n.audioRouteUnknown;
}
}
IconData _deviceIcon(AudioSourceType? type) {
switch (type) {
case AudioSourceType.builtinSpeaker:
return Icons.volume_up;
case AudioSourceType.builtinReceiver:
return Icons.phone_in_talk;
case AudioSourceType.bluetooth:
return Icons.bluetooth_audio;
case AudioSourceType.wiredHeadset:
return Icons.headset;
case AudioSourceType.carAudio:
return Icons.directions_car;
case AudioSourceType.airplay:
return Icons.airplay;
case AudioSourceType.unknown:
case null:
return Icons.speaker;
}
}
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final l10n = AppL10n.of(context);
return InkWell(
onTap: () => _router.showAudioRoutePicker(context),
borderRadius: BorderRadius.circular(12),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 4),
child: Row(
children: [
Icon(
_deviceIcon(_device?.type),
color: theme.colorScheme.primary,
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
l10n.audioOutputLabel,
style: theme.textTheme.bodySmall?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
),
),
Text(
_deviceLabel(_device?.type, l10n),
style: theme.textTheme.bodyLarge?.copyWith(
fontWeight: FontWeight.w500,
),
),
],
),
),
Icon(
Icons.chevron_right,
color: theme.colorScheme.onSurfaceVariant,
),
],
),
),
);
}
}
class _LevelMeter extends StatelessWidget {
const _LevelMeter({required this.active});