feat(ui): add premium PluriWave redesign
This commit is contained in:
@@ -1,11 +1,15 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
import '../estado/estado_radio.dart';
|
||||
import '../pantallas/pantalla_reproductor.dart';
|
||||
import '../servicios/servicio_audio.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.
|
||||
class MiniReproductor extends StatelessWidget {
|
||||
const MiniReproductor({super.key});
|
||||
@@ -17,107 +21,136 @@ class MiniReproductor extends StatelessWidget {
|
||||
|
||||
if (emisora == null) return const SizedBox.shrink();
|
||||
|
||||
final theme = Theme.of(context);
|
||||
final t = context.pluriTokens;
|
||||
|
||||
return GestureDetector(
|
||||
onTap: () => PantallaReproductor.abrir(context, emisora),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: theme.colorScheme.surfaceContainer,
|
||||
border: Border(
|
||||
top: BorderSide(
|
||||
color: theme.colorScheme.outlineVariant, width: 0.5)),
|
||||
),
|
||||
child: SafeArea(
|
||||
top: false,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
child: Row(
|
||||
children: [
|
||||
// Indicador de reproducción (mini visualizador)
|
||||
SizedBox(
|
||||
width: 40,
|
||||
height: 40,
|
||||
child: Center(
|
||||
child: IndicadorReproduccion(
|
||||
estadoStream: estado.estadoStream,
|
||||
color: theme.colorScheme.primary,
|
||||
size: 20,
|
||||
return SafeArea(
|
||||
top: false,
|
||||
child: Padding(
|
||||
padding: EdgeInsets.fromLTRB(t.spacingMd, t.spacingSm, t.spacingMd, t.spacingSm),
|
||||
child: PluriGlassSurface(
|
||||
padding: EdgeInsets.symmetric(horizontal: t.spacingSm, vertical: t.spacingXs),
|
||||
borderRadius: BorderRadius.circular(999),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Semantics(
|
||||
button: true,
|
||||
label: 'Abrir reproductor de ${emisora.nombre}',
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
borderRadius: BorderRadius.circular(999),
|
||||
onTap: () => PantallaReproductor.abrir(context, emisora),
|
||||
child: Padding(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: t.spacingXs,
|
||||
vertical: t.spacingXs,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 40,
|
||||
height: 40,
|
||||
child: Center(
|
||||
child: IndicadorReproduccion(
|
||||
estadoStream: estado.estadoStream,
|
||||
color: t.electricMagenta,
|
||||
size: 20,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(width: t.spacingSm),
|
||||
Expanded(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
emisora.nombre,
|
||||
style: Theme.of(context).textTheme.titleSmall?.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
StreamBuilder<EstadoReproduccion>(
|
||||
stream: estado.estadoStream,
|
||||
builder: (context, snapshot) {
|
||||
final s = snapshot.data ?? EstadoReproduccion.detenido;
|
||||
final activo = s == EstadoReproduccion.reproduciendo;
|
||||
return Text(
|
||||
_labelEstado(s),
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: activo
|
||||
? t.warmCoral
|
||||
: Theme.of(context)
|
||||
.colorScheme
|
||||
.onSurface
|
||||
.withValues(alpha: 0.7),
|
||||
fontWeight: activo ? FontWeight.w600 : FontWeight.w400,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
PluriIcon(
|
||||
glyph: PluriIconGlyph.player,
|
||||
variant: PluriIconVariant.activeGlow,
|
||||
size: 18,
|
||||
semanticLabel: 'Reproductor',
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
// Nombre y estado
|
||||
Expanded(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
emisora.nombre,
|
||||
style: theme.textTheme.bodyMedium
|
||||
?.copyWith(fontWeight: FontWeight.w600),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
StreamBuilder<EstadoReproduccion>(
|
||||
stream: estado.estadoStream,
|
||||
builder: (context, snapshot) {
|
||||
final s = snapshot.data ?? EstadoReproduccion.detenido;
|
||||
if (s == EstadoReproduccion.cargando) {
|
||||
return const SizedBox(
|
||||
width: 48,
|
||||
height: 48,
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(12),
|
||||
child: CircularProgressIndicator(strokeWidth: 2),
|
||||
),
|
||||
StreamBuilder<EstadoReproduccion>(
|
||||
stream: estado.estadoStream,
|
||||
builder: (context, snapshot) {
|
||||
final s = snapshot.data ??
|
||||
EstadoReproduccion.detenido;
|
||||
return Text(
|
||||
_labelEstado(s),
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// Botón play/pause
|
||||
StreamBuilder<EstadoReproduccion>(
|
||||
stream: estado.estadoStream,
|
||||
builder: (context, snapshot) {
|
||||
final s =
|
||||
snapshot.data ?? EstadoReproduccion.detenido;
|
||||
if (s == EstadoReproduccion.cargando) {
|
||||
return const SizedBox(
|
||||
width: 40,
|
||||
height: 40,
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(10),
|
||||
child: CircularProgressIndicator(strokeWidth: 2),
|
||||
),
|
||||
);
|
||||
}
|
||||
// En estado error: mostrar icono de reintento
|
||||
if (s == EstadoReproduccion.error) {
|
||||
final emisora = estado.emisoraActual;
|
||||
return IconButton(
|
||||
icon: const Icon(Icons.refresh_rounded),
|
||||
tooltip: 'Reintentar',
|
||||
onPressed: emisora != null
|
||||
? () => estado.reproducir(emisora)
|
||||
: null,
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
if (s == EstadoReproduccion.error) {
|
||||
final emisoraActual = estado.emisoraActual;
|
||||
return IconButton(
|
||||
tooltip: 'Reintentar',
|
||||
icon: const Icon(Icons.refresh_rounded),
|
||||
onPressed: emisoraActual != null ? () => estado.reproducir(emisoraActual) : null,
|
||||
constraints: const BoxConstraints.tightFor(width: 48, height: 48),
|
||||
);
|
||||
}
|
||||
|
||||
return Semantics(
|
||||
button: true,
|
||||
label: s == EstadoReproduccion.reproduciendo ? 'Pausar' : 'Reproducir',
|
||||
child: IconButton(
|
||||
tooltip: s == EstadoReproduccion.reproduciendo ? 'Pausar' : 'Reproducir',
|
||||
icon: Icon(
|
||||
s == EstadoReproduccion.reproduciendo
|
||||
? Icons.pause_rounded
|
||||
: Icons.play_arrow_rounded,
|
||||
? Icons.pause_circle_filled_rounded
|
||||
: Icons.play_circle_fill_rounded,
|
||||
color: t.electricMagenta,
|
||||
),
|
||||
onPressed: () {
|
||||
// Evitar que el tap en el botón abra el reproductor
|
||||
estado.togglePlay();
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
onPressed: estado.togglePlay,
|
||||
constraints: const BoxConstraints.tightFor(width: 48, height: 48),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -127,9 +160,9 @@ class MiniReproductor extends StatelessWidget {
|
||||
String _labelEstado(EstadoReproduccion estado) {
|
||||
return switch (estado) {
|
||||
EstadoReproduccion.cargando => 'Conectando...',
|
||||
EstadoReproduccion.reproduciendo => 'En directo ●',
|
||||
EstadoReproduccion.reproduciendo => 'En directo',
|
||||
EstadoReproduccion.pausado => 'Pausado',
|
||||
EstadoReproduccion.error => 'Error de conexión',
|
||||
EstadoReproduccion.error => 'Error de conexión',
|
||||
EstadoReproduccion.detenido => 'Detenido',
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user