FreeTLab/pluriwave
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(chrome): rebuild MiniReproductor as a full-bleed opaque bar with art

Browse Source 
Item 22 / audit 3.6 (t4:184-188): the mini player was a floating
999-radius glass pill with no artwork. Replace it with a 60px opaque
bar (listSurface at .97 alpha), full-bleed edge to edge, showing the
station's square 42x42 artwork instead of the abstract playing-bars
indicator. app.dart no longer wraps the bar in the balloon nav's own
8px side margin, so it now spans the full width.

MiniReproductor.altura is re-measured (72 -> 60) now that the bar's
content height is fixed by construction; PluriLayout.bottomChromeInset
derives from it as before. Both the S3-R3 configurarLocalizaciones
guard and the altura measurement test still pass unmodified.
This commit is contained in:
FreeTLab
2026-07-30 10:38:59 +02:00
parent 2b28c4daed
commit 4537497e83
4 changed files with 386 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/app.dart
+16 -13
View File
@@ -243,23 +243,26 @@ class _PaginaPrincipalState extends State<_PaginaPrincipal>
bottomNavigationBar: SafeArea( bottomNavigationBar: SafeArea(
top: false, top: false,
minimum: const EdgeInsets.only(bottom: PluriLayout.compactGap), minimum: const EdgeInsets.only(bottom: PluriLayout.compactGap),
child: Padding( child: Column(
padding: const EdgeInsets.fromLTRB(8, 0, 8, 0), mainAxisSize: MainAxisSize.min,
child: Column( children: [
mainAxisSize: MainAxisSize.min, // Item 22 / audit 3.6 (t4:185 left:0;right:0): the mini player
children: [ // is full-bleed — it does NOT share the balloon bar's 8px side
// ADR-7(b): hidden on Escuchar (index 0) only — its embedded // margin below. ADR-7(b): hidden on Escuchar (index 0) only —
// hero already shows the same station. Stays mounted (visible: // its embedded hero already shows the same station. Stays
// false renders SizedBox.shrink(), not tree removal) so its // mounted (visible: false renders SizedBox.shrink(), not tree
// didChangeDependencies side effect (S3-R3) keeps running. // removal) so its didChangeDependencies side effect (S3-R3)
MiniReproductor(visible: indice != RaizPluriWave.escuchar.index), // keeps running.
PluriBottomNavigation( MiniReproductor(visible: indice != RaizPluriWave.escuchar.index),
Padding(
padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
child: PluriBottomNavigation(
items: _navItems(l10n), items: _navItems(l10n),
selectedIndex: indice, selectedIndex: indice,
onSelected: (i) => navegacion.irA(RaizPluriWave.values[i]), onSelected: (i) => navegacion.irA(RaizPluriWave.values[i]),
), ),
], ),
), ],
), ),
), ),
); );
lib/widgets/mini_reproductor.dart
+214 -139
View File
@@ -1,18 +1,22 @@
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'package:shimmer/shimmer.dart' as shimmer;
import '../estado/estado_radio.dart'; import '../estado/estado_radio.dart';
import '../l10n/display_names.dart'; import '../l10n/display_names.dart';
import '../l10n/gen/app_localizations.dart'; import '../l10n/gen/app_localizations.dart';
import '../modelos/emisora.dart';
import '../pantallas/pantalla_reproductor.dart'; import '../pantallas/pantalla_reproductor.dart';
import '../servicios/servicio_audio.dart'; import '../servicios/servicio_audio.dart';
import '../tema/pluriwave_theme.dart'; import '../tema/pluriwave_theme.dart';
import 'pluri_glass_surface.dart';
import 'pluri_icon.dart';
import 'visualizador_audio.dart';
/// Barra inferior persistente con controles básicos de reproducción. /// Barra inferior persistente con controles básicos de reproducción.
/// Toca la barra para abrir PantallaReproductor completa. /// Toca la barra para abrir PantallaReproductor completa.
///
/// Item 22 / audit 3.6 (t4:184-188): a 60px full-bleed opaque bar with
/// station artwork -- replacing the former floating 999-radius glass pill,
/// which had no artwork at all.
class MiniReproductor extends StatefulWidget { class MiniReproductor extends StatefulWidget {
const MiniReproductor({super.key, this.visible = true}); const MiniReproductor({super.key, this.visible = true});
@@ -24,11 +28,12 @@ class MiniReproductor extends StatefulWidget {
/// running on every locale change regardless of which tab is active. /// running on every locale change regardless of which tab is active.
final bool visible; final bool visible;
/// Measured (not guessed) from this widget's actual laid-out height with a /// Measured (not guessed) from this widget's actual laid-out height — see
/// representative station name, default text scale and theme — see
/// `mini_reproductor_configurar_test.dart`'s measurement assertion. Backs /// `mini_reproductor_configurar_test.dart`'s measurement assertion. Backs
/// `PluriLayout.escucharBottomChromeInset` (ADR-7(b)). /// `PluriLayout.escucharBottomChromeInset` (ADR-7(b)). Item 22 fixes this
static const double altura = 72; /// bar's content to a t4:184 `height:60px` container, so the measured
/// height is deterministic regardless of station-name text metrics.
static const double altura = 60;
@override @override
State<MiniReproductor> createState() => _MiniReproductorState(); State<MiniReproductor> createState() => _MiniReproductorState();
@@ -62,53 +67,39 @@ class _MiniReproductorState extends State<MiniReproductor> {
final t = context.pluriTokens; final t = context.pluriTokens;
final stationName = localizedStationName(l10n, emisora.nombre); final stationName = localizedStationName(l10n, emisora.nombre);
return SafeArea( // Item 22 / audit 3.6 (t4:184-188): a 60px, full-bleed, OPAQUE bar
top: false, // (rgba(16,37,50,.97) == listSurface at .97 alpha) with a top hairline —
child: Padding( // no BackdropFilter, no side margins, no pill radius. `app.dart` no
padding: EdgeInsets.fromLTRB( // longer wraps this widget in its own horizontal padding either (see
t.spacingMd, // its `bottomNavigationBar` composition).
t.spacingSm, return DecoratedBox(
t.spacingMd, key: const ValueKey('mini-reproductor-superficie'),
t.spacingSm, decoration: BoxDecoration(
color: t.listSurface.withValues(alpha: 0.97),
border: Border(
top: BorderSide(color: Colors.white.withValues(alpha: 0.07)),
), ),
child: PluriGlassSurface( ),
// S3 (Tier 1 visual fidelity): chrome — one of the system rule's child: SafeArea(
// two named exceptions to the opaque list-surface default. top: false,
glass: true, child: SizedBox(
padding: EdgeInsets.symmetric( height: 60,
horizontal: t.spacingSm, child: Padding(
vertical: t.spacingXs, padding: const EdgeInsets.symmetric(horizontal: 12),
), child: Row(
borderRadius: BorderRadius.circular(999), children: [
child: Row( Expanded(
children: [ child: Semantics(
Expanded( button: true,
child: Semantics( label: l10n.miniPlayerOpenLabel(stationName),
button: true, child: Material(
label: l10n.miniPlayerOpenLabel(stationName), color: Colors.transparent,
child: Material( child: InkWell(
color: Colors.transparent, onTap:
child: InkWell( () => PantallaReproductor.abrir(context, emisora),
borderRadius: BorderRadius.circular(999),
onTap: () => PantallaReproductor.abrir(context, emisora),
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: t.spacingXs,
vertical: t.spacingXs,
),
child: Row( child: Row(
children: [ children: [
SizedBox( _ArteMiniReproductor(emisora: emisora),
width: 40,
height: 40,
child: Center(
child: IndicadorReproduccion(
estadoStream: estado.estadoStream,
color: t.electricMagenta,
size: 20,
),
),
),
SizedBox(width: t.spacingSm), SizedBox(width: t.spacingSm),
Expanded( Expanded(
child: Column( child: Column(
@@ -141,113 +132,147 @@ class _MiniReproductorState extends State<MiniReproductor> {
s == s ==
EstadoReproduccion.reconectando || EstadoReproduccion.reconectando ||
s == EstadoReproduccion.error; s == EstadoReproduccion.error;
return Text( return Row(
_labelEstado(l10n, s), mainAxisSize: MainAxisSize.min,
style: Theme.of( children: [
context, // t4:187: a live station gets a
).textTheme.bodySmall?.copyWith( // small teal dot before its label
color: // ("En directo"). Static, not the
conexionEnProblema // prototype's `pw-pulse` animation
? t.offlineAccent // — an infinite AnimationController
: activo // here would hang every existing
? t.warmCoral // `pumpAndSettle()` call in this
: Theme.of(context) // widget's own test suite that
.colorScheme // exercises a playing station.
.onSurface if (activo) ...[
.withValues(alpha: 0.7), Container(
fontWeight: width: 6,
(activo || conexionEnProblema) height: 6,
? FontWeight.w600 margin: const EdgeInsets.only(
: FontWeight.w400, right: 5,
), ),
decoration: BoxDecoration(
color: t.liveGreen,
shape: BoxShape.circle,
),
),
],
Flexible(
child: Text(
_labelEstado(l10n, s),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: Theme.of(
context,
).textTheme.bodySmall?.copyWith(
color:
conexionEnProblema
? t.offlineAccent
: activo
? t.liveGreen
: Theme.of(context)
.colorScheme
.onSurface
.withValues(
alpha: 0.7,
),
fontWeight:
(activo ||
conexionEnProblema)
? FontWeight.w600
: FontWeight.w400,
),
),
),
],
); );
}, },
), ),
], ],
), ),
), ),
PluriIcon(
glyph: PluriIconGlyph.player,
variant: PluriIconVariant.activeGlow,
size: 18,
semanticLabel: l10n.playerIconLabel,
),
], ],
), ),
), ),
), ),
), ),
), ),
), StreamBuilder<EstadoReproduccion>(
StreamBuilder<EstadoReproduccion>( stream: estado.estadoStream,
stream: estado.estadoStream, builder: (context, snapshot) {
builder: (context, snapshot) { final s = snapshot.data ?? EstadoReproduccion.detenido;
final s = snapshot.data ?? EstadoReproduccion.detenido; // S7-R3: reconectando is a transient stall — render it
// S7-R3: reconectando is a transient stall — render it like // like cargando (spinner), never as the error/retry
// cargando (spinner), never as the error/retry affordance. // affordance.
if (s == EstadoReproduccion.cargando || if (s == EstadoReproduccion.cargando ||
s == EstadoReproduccion.reconectando) { s == EstadoReproduccion.reconectando) {
// WU16: only the reconectando sub-state gets the offline // WU16: only the reconectando sub-state gets the
// accent — plain cargando (e.g. the very first play) // offline accent — plain cargando (e.g. the very first
// keeps the default spinner colour, since it is not a // play) keeps the default spinner colour, since it is
// connectivity problem. // not a connectivity problem.
final reconectando = s == EstadoReproduccion.reconectando; final reconectando = s == EstadoReproduccion.reconectando;
return SizedBox( return SizedBox(
width: 48,
height: 48,
child: Padding(
padding: const EdgeInsets.all(12),
child: CircularProgressIndicator(
strokeWidth: 2,
color: reconectando ? t.offlineAccent : null,
),
),
);
}
if (s == EstadoReproduccion.error) {
final emisoraActual = estado.emisoraActual;
return IconButton(
tooltip: l10n.retryAction,
icon: Icon(Icons.refresh_rounded, color: t.offlineAccent),
onPressed:
emisoraActual != null
? () => estado.reproducir(emisoraActual)
: null,
constraints: const BoxConstraints.tightFor(
width: 48, width: 48,
height: 48, height: 48,
), child: Padding(
); padding: const EdgeInsets.all(12),
} child: CircularProgressIndicator(
strokeWidth: 2,
color: reconectando ? t.offlineAccent : null,
),
),
);
}
return Semantics( if (s == EstadoReproduccion.error) {
button: true, final emisoraActual = estado.emisoraActual;
label: return IconButton(
s == EstadoReproduccion.reproduciendo tooltip: l10n.retryAction,
? l10n.pauseAction icon: Icon(
: l10n.playAction, Icons.refresh_rounded,
child: IconButton( color: t.offlineAccent,
tooltip: ),
onPressed:
emisoraActual != null
? () => estado.reproducir(emisoraActual)
: null,
constraints: const BoxConstraints.tightFor(
width: 48,
height: 48,
),
);
}
return Semantics(
button: true,
label:
s == EstadoReproduccion.reproduciendo s == EstadoReproduccion.reproduciendo
? l10n.pauseAction ? l10n.pauseAction
: l10n.playAction, : l10n.playAction,
icon: Icon( child: IconButton(
s == EstadoReproduccion.reproduciendo tooltip:
? Icons.pause_circle_filled_rounded s == EstadoReproduccion.reproduciendo
: Icons.play_circle_fill_rounded, ? l10n.pauseAction
color: t.electricMagenta, : l10n.playAction,
// t4:188: pause_circle at 30px.
icon: Icon(
s == EstadoReproduccion.reproduciendo
? Icons.pause_circle_filled_rounded
: Icons.play_circle_fill_rounded,
size: 30,
color: t.electricMagenta,
),
onPressed: estado.togglePlay,
constraints: const BoxConstraints.tightFor(
width: 48,
height: 48,
),
), ),
onPressed: estado.togglePlay, );
constraints: const BoxConstraints.tightFor( },
width: 48, ),
height: 48, ],
), ),
),
);
},
),
],
), ),
), ),
), ),
@@ -265,3 +290,53 @@ class _MiniReproductorState extends State<MiniReproductor> {
}; };
} }
} }
/// Item 22 / audit 3.6 (t4:186): square station artwork, 42x42, radius 11 —
/// the element the former glass pill never rendered at all. Mirrors the
/// CachedNetworkImage/shimmer/fallback pattern already established by
/// `TarjetaEmisora` and `_ArteEscuchar`, sized for this bar specifically.
class _ArteMiniReproductor extends StatelessWidget {
const _ArteMiniReproductor({required this.emisora});
final Emisora emisora;
static const _lado = 42.0;
static const _radio = 11.0;
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return ClipRRect(
key: const ValueKey('mini-reproductor-arte'),
borderRadius: BorderRadius.circular(_radio),
child: SizedBox(
width: _lado,
height: _lado,
child:
(emisora.favicon != null && emisora.favicon!.isNotEmpty)
? CachedNetworkImage(
imageUrl: emisora.favicon!,
fit: BoxFit.cover,
placeholder: (_, __) => _shimmer(theme),
errorWidget: (_, __, ___) => _iconoFallback(theme),
)
: _iconoFallback(theme),
),
);
}
Widget _shimmer(ThemeData theme) => shimmer.Shimmer.fromColors(
baseColor: theme.colorScheme.surfaceContainerHighest,
highlightColor: theme.colorScheme.surface,
child: Container(color: theme.colorScheme.surfaceContainerHighest),
);
Widget _iconoFallback(ThemeData theme) => Container(
color: theme.colorScheme.primaryContainer,
child: Icon(
Icons.radio_rounded,
size: 20,
color: theme.colorScheme.onPrimaryContainer,
),
);
}
test/widgets/mini_reproductor_barra_test.dart
+141
View File
@@ -0,0 +1,141 @@
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:pluriwave/estado/estado_radio.dart';
import 'package:pluriwave/l10n/gen/app_localizations.dart';
import 'package:pluriwave/tema/pluriwave_theme.dart';
import 'package:pluriwave/tema/pluriwave_tokens.dart';
import 'package:pluriwave/widgets/mini_reproductor.dart';
import 'package:pluriwave/widgets/visualizador_audio.dart';
import 'package:provider/provider.dart';
import '../helpers/fakes.dart';
import '../helpers/fakes_alarmas.dart';
EstadoRadio _estadoConEmisora() {
return EstadoRadio(
audio: FakeServicioAudio(),
favoritos: FakeServicioFavoritos(),
radio: FakeServicioRadio(),
servicioEcualizador: FakeServicioEcualizador(),
servicioGrabacion: FakeServicioGrabacionRadioInactiva(),
iniciarAutomaticamente: false,
);
}
Widget _hostFor(EstadoRadio estado, {double width = 390}) {
return ChangeNotifierProvider<EstadoRadio>.value(
value: estado,
child: MaterialApp(
theme: PluriWaveTheme.dark(),
locale: const Locale('es'),
localizationsDelegates: AppLocalizations.localizationsDelegates,
supportedLocales: AppLocalizations.supportedLocales,
home: Scaffold(
body: SizedBox(width: width, child: const MiniReproductor()),
),
),
);
}
/// Item 22 / audit 3.6 (t4:184-188): the mini player becomes a 60px
/// full-bleed opaque bar with station artwork, replacing the floating
/// 999-radius glass pill with no artwork.
void main() {
testWidgets(
'shows the station artwork (42x42, radius 11) instead of the playing-'
'bars indicator',
(tester) async {
final estado = _estadoConEmisora();
addTearDown(estado.dispose);
await estado.reproducir(emisoraDemo(uuid: 'a', nombre: 'Station A'));
await tester.pumpWidget(_hostFor(estado));
await tester.pump();
expect(
find.byType(IndicadorReproduccion),
findsNothing,
reason: 't4:186 replaces the playing-bars indicator with artwork',
);
final arte = find.byKey(const ValueKey('mini-reproductor-arte'));
expect(arte, findsOneWidget);
expect(
tester.getSize(arte),
const Size(42, 42),
reason: 't4:186 art is 42x42',
);
final clip = tester.widget<ClipRRect>(arte);
expect(
(clip.borderRadius as BorderRadius).topLeft,
const Radius.circular(11),
reason: 't4:186 art corner radius is 11',
);
},
);
testWidgets(
'is opaque -- no BackdropFilter -- unlike the former glass pill',
(tester) async {
final estado = _estadoConEmisora();
addTearDown(estado.dispose);
await estado.reproducir(emisoraDemo(uuid: 'a', nombre: 'Station A'));
await tester.pumpWidget(_hostFor(estado));
await tester.pump();
expect(
find.descendant(
of: find.byType(MiniReproductor),
matching: find.byType(BackdropFilter),
),
findsNothing,
reason:
't4:185 the bar is opaque rgba(16,37,50,.97), not blurred glass',
);
},
);
testWidgets(
'fill colour is listSurface at .97 alpha (t4:185 rgba(16,37,50,.97))',
(tester) async {
final estado = _estadoConEmisora();
addTearDown(estado.dispose);
await estado.reproducir(emisoraDemo(uuid: 'a', nombre: 'Station A'));
await tester.pumpWidget(_hostFor(estado));
await tester.pump();
final decorado = tester.widget<DecoratedBox>(
find.byKey(const ValueKey('mini-reproductor-superficie')),
);
final decoration = decorado.decoration as BoxDecoration;
expect(
decoration.color,
PluriWaveTokens.dark.listSurface.withValues(alpha: 0.97),
);
},
);
testWidgets('the opaque surface spans the full given width -- no internal '
'horizontal margin (t4:185 left:0;right:0)', (tester) async {
final estado = _estadoConEmisora();
addTearDown(estado.dispose);
await estado.reproducir(emisoraDemo(uuid: 'a', nombre: 'Station A'));
await tester.pumpWidget(_hostFor(estado, width: 390));
await tester.pump();
expect(
tester
.getSize(find.byKey(const ValueKey('mini-reproductor-superficie')))
.width,
390,
reason:
't4:185 the bar is full-bleed, not a margined floating pill -- '
'the OLD implementation wrapped this in 24px of horizontal '
'padding per side (8 from app.dart + 16 internal)',
);
});
}
test/widgets/pluri_bottom_navigation_test.dart
+15 -18
View File
@@ -194,16 +194,12 @@ void main() {
semantics.dispose(); semantics.dispose();
}); });
testWidgets('every tab meets the 48x48dp minimum tap target', ( testWidgets('every tab meets the 48x48dp minimum tap target', (tester) async {
tester,
) async {
await tester.pumpWidget(hostFor(0)); await tester.pumpWidget(hostFor(0));
await tester.pump(); await tester.pump();
for (var i = 0; i < items.length; i++) { for (var i = 0; i < items.length; i++) {
final size = tester.getSize( final size = tester.getSize(find.byKey(PluriBottomNavigation.itemKey(i)));
find.byKey(PluriBottomNavigation.itemKey(i)),
);
expect(size.width, greaterThanOrEqualTo(48)); expect(size.width, greaterThanOrEqualTo(48));
expect(size.height, greaterThanOrEqualTo(48)); expect(size.height, greaterThanOrEqualTo(48));
} }
@@ -248,22 +244,23 @@ void main() {
bottomNavigationBar: SafeArea( bottomNavigationBar: SafeArea(
key: chromeKey, key: chromeKey,
top: false, top: false,
minimum: const EdgeInsets.only( minimum: const EdgeInsets.only(bottom: PluriLayout.compactGap),
bottom: PluriLayout.compactGap, child: Column(
), mainAxisSize: MainAxisSize.min,
child: Padding( children: [
padding: const EdgeInsets.fromLTRB(8, 0, 8, 0), // Mirrors app.dart's real composition: item 22 / audit
child: Column( // 3.6 made MiniReproductor full-bleed, so only
mainAxisSize: MainAxisSize.min, // PluriBottomNavigation keeps the 8px side margin.
children: [ const MiniReproductor(),
const MiniReproductor(), Padding(
PluriBottomNavigation( padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
child: PluriBottomNavigation(
items: items, items: items,
selectedIndex: 0, selectedIndex: 0,
onSelected: (_) {}, onSelected: (_) {},
), ),
], ),
), ],
), ),
), ),
), ),