fix(chrome): rebuild MiniReproductor as a full-bleed opaque bar with art
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:
@@ -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)',
|
||||
);
|
||||
});
|
||||
}
|
||||
@@ -194,16 +194,12 @@ void main() {
|
||||
semantics.dispose();
|
||||
});
|
||||
|
||||
testWidgets('every tab meets the 48x48dp minimum tap target', (
|
||||
tester,
|
||||
) async {
|
||||
testWidgets('every tab meets the 48x48dp minimum tap target', (tester) async {
|
||||
await tester.pumpWidget(hostFor(0));
|
||||
await tester.pump();
|
||||
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
final size = tester.getSize(
|
||||
find.byKey(PluriBottomNavigation.itemKey(i)),
|
||||
);
|
||||
final size = tester.getSize(find.byKey(PluriBottomNavigation.itemKey(i)));
|
||||
expect(size.width, greaterThanOrEqualTo(48));
|
||||
expect(size.height, greaterThanOrEqualTo(48));
|
||||
}
|
||||
@@ -248,22 +244,23 @@ void main() {
|
||||
bottomNavigationBar: SafeArea(
|
||||
key: chromeKey,
|
||||
top: false,
|
||||
minimum: const EdgeInsets.only(
|
||||
bottom: PluriLayout.compactGap,
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const MiniReproductor(),
|
||||
PluriBottomNavigation(
|
||||
minimum: const EdgeInsets.only(bottom: PluriLayout.compactGap),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// Mirrors app.dart's real composition: item 22 / audit
|
||||
// 3.6 made MiniReproductor full-bleed, so only
|
||||
// PluriBottomNavigation keeps the 8px side margin.
|
||||
const MiniReproductor(),
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
|
||||
child: PluriBottomNavigation(
|
||||
items: items,
|
||||
selectedIndex: 0,
|
||||
onSelected: (_) {},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user