|
|
@@ -61,156 +61,156 @@ class _VolumeCardState extends State<VolumeCard> {
|
|
|
return SurfaceCard(
|
|
|
padding: EdgeInsets.all(compact ? 20 : 26),
|
|
|
radius: 30,
|
|
|
- child: Row(
|
|
|
- crossAxisAlignment: CrossAxisAlignment.center,
|
|
|
+ child: Column(
|
|
|
+ mainAxisSize: MainAxisSize.min,
|
|
|
+ crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
|
children: [
|
|
|
- Pressable(
|
|
|
- onTap: widget.onPlayPause,
|
|
|
- semanticLabel: widget.isMusicPlaying ? 'Pause music' : 'Play music',
|
|
|
- pressedScale: 0.94,
|
|
|
- child: _VolumeRing(
|
|
|
- progress: widget.media.progress,
|
|
|
- isPlaying: widget.isMusicPlaying,
|
|
|
- size: compact ? 78 : 92,
|
|
|
- ),
|
|
|
- ),
|
|
|
- SizedBox(width: compact ? 18 : 24),
|
|
|
- Expanded(
|
|
|
- child: Column(
|
|
|
- mainAxisSize: MainAxisSize.min,
|
|
|
- crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
- children: [
|
|
|
- Row(
|
|
|
+ Row(
|
|
|
+ crossAxisAlignment: CrossAxisAlignment.center,
|
|
|
+ children: [
|
|
|
+ Pressable(
|
|
|
+ onTap: widget.onPlayPause,
|
|
|
+ semanticLabel: widget.isMusicPlaying
|
|
|
+ ? 'Pause music'
|
|
|
+ : 'Play music',
|
|
|
+ pressedScale: 0.94,
|
|
|
+ child: _VolumeRing(
|
|
|
+ progress: widget.media.progress,
|
|
|
+ isPlaying: widget.isMusicPlaying,
|
|
|
+ size: compact ? 78 : 92,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ SizedBox(width: compact ? 18 : 24),
|
|
|
+ Expanded(
|
|
|
+ child: Column(
|
|
|
+ mainAxisSize: MainAxisSize.min,
|
|
|
+ crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
children: [
|
|
|
- Text(
|
|
|
- 'Media volume',
|
|
|
- style: theme.textTheme.labelLarge?.copyWith(
|
|
|
- color: colors.inkMuted,
|
|
|
- fontSize: compact ? 12 : 13,
|
|
|
- ),
|
|
|
+ Row(
|
|
|
+ children: [
|
|
|
+ Text(
|
|
|
+ 'Media volume',
|
|
|
+ style: theme.textTheme.labelLarge?.copyWith(
|
|
|
+ color: colors.inkMuted,
|
|
|
+ fontSize: compact ? 12 : 13,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ const Spacer(),
|
|
|
+ Text(
|
|
|
+ '$_percent%',
|
|
|
+ style: theme.textTheme.headlineMedium?.copyWith(
|
|
|
+ fontSize: compact ? 24 : 28,
|
|
|
+ fontFeatures: const [FontFeature.tabularFigures()],
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
),
|
|
|
- const Spacer(),
|
|
|
- Text(
|
|
|
- '$_percent%',
|
|
|
- style: theme.textTheme.headlineMedium?.copyWith(
|
|
|
- fontSize: compact ? 24 : 28,
|
|
|
- fontFeatures: const [FontFeature.tabularFigures()],
|
|
|
+ const SizedBox(height: 2),
|
|
|
+ SliderTheme(
|
|
|
+ data: SliderTheme.of(context).copyWith(
|
|
|
+ trackHeight: compact ? 5 : 6,
|
|
|
+ thumbShape: RoundSliderThumbShape(
|
|
|
+ enabledThumbRadius: compact ? 9 : 10,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ child: Slider(
|
|
|
+ value: displayValue,
|
|
|
+ min: 0,
|
|
|
+ max: _max.toDouble(),
|
|
|
+ divisions: _max <= 30 ? _max : null,
|
|
|
+ onChanged: (next) {
|
|
|
+ setState(() => _dragValue = next);
|
|
|
+ widget.onSetVolume(next.round());
|
|
|
+ },
|
|
|
+ onChangeEnd: (_) => setState(() => _dragValue = null),
|
|
|
+ semanticFormatterCallback: (value) =>
|
|
|
+ '${(value / _max * 100).round()} percent',
|
|
|
),
|
|
|
),
|
|
|
- ],
|
|
|
- ),
|
|
|
- const SizedBox(height: 2),
|
|
|
- SliderTheme(
|
|
|
- data: SliderTheme.of(context).copyWith(
|
|
|
- trackHeight: compact ? 5 : 6,
|
|
|
- thumbShape: RoundSliderThumbShape(
|
|
|
- enabledThumbRadius: compact ? 9 : 10,
|
|
|
- ),
|
|
|
- ),
|
|
|
- child: Slider(
|
|
|
- value: displayValue,
|
|
|
- min: 0,
|
|
|
- max: _max.toDouble(),
|
|
|
- divisions: _max <= 30 ? _max : null,
|
|
|
- onChanged: (next) {
|
|
|
- setState(() => _dragValue = next);
|
|
|
- widget.onSetVolume(next.round());
|
|
|
- },
|
|
|
- onChangeEnd: (_) => setState(() => _dragValue = null),
|
|
|
- semanticFormatterCallback: (value) =>
|
|
|
- '${(value / _max * 100).round()} percent',
|
|
|
- ),
|
|
|
- ),
|
|
|
- SizedBox(height: compact ? 4 : 8),
|
|
|
- Row(
|
|
|
- children: [
|
|
|
- _StepButton(
|
|
|
- icon: Icons.remove_rounded,
|
|
|
- semanticLabel: 'Volume down',
|
|
|
- onTap: () => widget.onSetVolume(_value - 1),
|
|
|
- compact: compact,
|
|
|
- ),
|
|
|
- SizedBox(width: compact ? 8 : 10),
|
|
|
- Expanded(
|
|
|
- child: Pressable(
|
|
|
- onTap: widget.onToggleMute,
|
|
|
- semanticLabel: _muted ? 'Unmute' : 'Mute',
|
|
|
- pressedScale: 0.97,
|
|
|
- child: Container(
|
|
|
- height: compact ? 36 : 40,
|
|
|
- decoration: BoxDecoration(
|
|
|
- color: _muted
|
|
|
- ? colors.accentSoft
|
|
|
- : colors.surfaceStrong,
|
|
|
- borderRadius: BorderRadius.circular(999),
|
|
|
- border: Border.all(
|
|
|
- color: _muted
|
|
|
- ? colors.accent.withValues(alpha: 0.25)
|
|
|
- : colors.border,
|
|
|
- ),
|
|
|
- ),
|
|
|
- child: Row(
|
|
|
- mainAxisAlignment: MainAxisAlignment.center,
|
|
|
- children: [
|
|
|
- AppIcon(
|
|
|
- _muted
|
|
|
- ? 'assets/icons/volume-x.svg'
|
|
|
- : 'assets/icons/volume-2.svg',
|
|
|
- size: compact ? 16 : 18,
|
|
|
- color: _muted ? colors.accent : colors.inkMuted,
|
|
|
- ),
|
|
|
- const SizedBox(width: 8),
|
|
|
- Text(
|
|
|
- _muted ? 'Unmute' : 'Mute',
|
|
|
- style: theme.textTheme.labelMedium?.copyWith(
|
|
|
+ SizedBox(height: compact ? 4 : 8),
|
|
|
+ Row(
|
|
|
+ children: [
|
|
|
+ _StepButton(
|
|
|
+ icon: Icons.remove_rounded,
|
|
|
+ semanticLabel: 'Volume down',
|
|
|
+ onTap: () => widget.onSetVolume(_value - 1),
|
|
|
+ compact: compact,
|
|
|
+ ),
|
|
|
+ SizedBox(width: compact ? 8 : 10),
|
|
|
+ Expanded(
|
|
|
+ child: Pressable(
|
|
|
+ onTap: widget.onToggleMute,
|
|
|
+ semanticLabel: _muted ? 'Unmute' : 'Mute',
|
|
|
+ pressedScale: 0.97,
|
|
|
+ child: Container(
|
|
|
+ height: compact ? 36 : 40,
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ color: _muted
|
|
|
+ ? colors.accentSoft
|
|
|
+ : colors.surfaceStrong,
|
|
|
+ borderRadius: BorderRadius.circular(999),
|
|
|
+ border: Border.all(
|
|
|
color: _muted
|
|
|
- ? colors.accent
|
|
|
- : colors.inkMuted,
|
|
|
+ ? colors.accent.withValues(alpha: 0.25)
|
|
|
+ : colors.border,
|
|
|
),
|
|
|
),
|
|
|
- ],
|
|
|
+ child: Row(
|
|
|
+ mainAxisAlignment: MainAxisAlignment.center,
|
|
|
+ children: [
|
|
|
+ AppIcon(
|
|
|
+ _muted
|
|
|
+ ? 'assets/icons/volume-x.svg'
|
|
|
+ : 'assets/icons/volume-2.svg',
|
|
|
+ size: compact ? 16 : 18,
|
|
|
+ color: _muted
|
|
|
+ ? colors.accent
|
|
|
+ : colors.inkMuted,
|
|
|
+ ),
|
|
|
+ const SizedBox(width: 8),
|
|
|
+ Text(
|
|
|
+ _muted ? 'Unmute' : 'Mute',
|
|
|
+ style: theme.textTheme.labelMedium
|
|
|
+ ?.copyWith(
|
|
|
+ color: _muted
|
|
|
+ ? colors.accent
|
|
|
+ : colors.inkMuted,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ),
|
|
|
),
|
|
|
),
|
|
|
- ),
|
|
|
- ),
|
|
|
- SizedBox(width: compact ? 8 : 10),
|
|
|
- _StepButton(
|
|
|
- icon: Icons.add_rounded,
|
|
|
- semanticLabel: 'Volume up',
|
|
|
- onTap: () => widget.onSetVolume(_value + 1),
|
|
|
- compact: compact,
|
|
|
+ SizedBox(width: compact ? 8 : 10),
|
|
|
+ _StepButton(
|
|
|
+ icon: Icons.add_rounded,
|
|
|
+ semanticLabel: 'Volume up',
|
|
|
+ onTap: () => widget.onSetVolume(_value + 1),
|
|
|
+ compact: compact,
|
|
|
+ ),
|
|
|
+ ],
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
- SizedBox(height: compact ? 8 : 10),
|
|
|
- SizedBox(
|
|
|
- height: compact ? 18 : 20,
|
|
|
- child: Row(
|
|
|
- children: [
|
|
|
- Icon(
|
|
|
- Icons.music_note_rounded,
|
|
|
- size: compact ? 14 : 15,
|
|
|
- color: colors.inkMuted,
|
|
|
- ),
|
|
|
- const SizedBox(width: 6),
|
|
|
- Expanded(
|
|
|
- child: MarqueeText(
|
|
|
- text: _nowPlayingLabel,
|
|
|
- animate:
|
|
|
- widget.isMusicPlaying &&
|
|
|
- widget.media.displayTitle != null,
|
|
|
- style: theme.textTheme.bodySmall?.copyWith(
|
|
|
- color: widget.media.displayTitle == null
|
|
|
- ? colors.inkMuted
|
|
|
- : colors.ink,
|
|
|
- fontSize: compact ? 11 : 12,
|
|
|
- ),
|
|
|
- ),
|
|
|
- ),
|
|
|
- ],
|
|
|
- ),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ SizedBox(height: compact ? 8 : 10),
|
|
|
+ SizedBox(
|
|
|
+ height: compact ? 18 : 20,
|
|
|
+ child: Center(
|
|
|
+ child: MarqueeText(
|
|
|
+ text: _nowPlayingLabel,
|
|
|
+ animate:
|
|
|
+ widget.isMusicPlaying && widget.media.displayTitle != null,
|
|
|
+ style: theme.textTheme.bodySmall?.copyWith(
|
|
|
+ color: widget.media.displayTitle == null
|
|
|
+ ? colors.inkMuted
|
|
|
+ : colors.ink,
|
|
|
+ fontSize: compact ? 11 : 12,
|
|
|
),
|
|
|
- ],
|
|
|
+ ),
|
|
|
),
|
|
|
),
|
|
|
],
|
