UI fixes: remove center play button from Native player, align EPG/controls in Live TV, match background colors

This commit is contained in:
Michael committed 2026-01-02 08:59:52 +01:00
1 parent 409878e173
commit f6d5ae7764
2 files changed
+24 -48

No files matched your search

+14 -41
View File
@@ -421,19 +421,20 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
), ),
), ),
// Bottom Controls - styled like EPG // Bottom Controls - styled like Native player
AnimatedPositioned( AnimatedPositioned(
duration: const Duration(milliseconds: 200), duration: const Duration(milliseconds: 200),
bottom: _showControls ? 16 : -100, bottom: _showControls ? 24 : -100,
left: 24, left: 0,
right: 24, right: 0,
child: Center( child: Center(
child: Container( child: Container(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 24, vertical: 12), horizontal: 24, vertical: 12),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.black.withOpacity(0.5), color:
borderRadius: BorderRadius.circular(12), const Color(0xFF1A1A2E).withOpacity(0.85),
borderRadius: BorderRadius.circular(24),
border: Border.all( border: Border.all(
color: Colors.white.withOpacity(0.1)), color: Colors.white.withOpacity(0.1)),
), ),
@@ -493,9 +494,9 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
if (widget.streamType == StreamType.live) if (widget.streamType == StreamType.live)
AnimatedPositioned( AnimatedPositioned(
duration: const Duration(milliseconds: 200), duration: const Duration(milliseconds: 200),
bottom: _showControls ? 100 : -140, bottom: _showControls ? 24 : -140,
left: 24, left: 24,
right: 24, right: 0,
child: PointerInterceptor( child: PointerInterceptor(
child: EpgOverlay( child: EpgOverlay(
playlist: widget.playlist, playlist: widget.playlist,
@@ -578,39 +579,11 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
), ),
), ),
// Center Play/Pause // Center Loading Indicator (only show when loading)
Center( if (_isLoading)
child: _isLoading const Center(
? const CircularProgressIndicator( child: CircularProgressIndicator(
color: AppColors.primary) color: AppColors.primary,
: TvFocusableCard(
onTap: _togglePlayPause,
borderRadius: 100,
scaleFactor: 1.2,
focusColor: AppColors.primary,
child: Container(
width: 80,
height: 80,
decoration: BoxDecoration(
gradient: AppColors.primaryGradient,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color:
AppColors.primary.withOpacity(0.5),
blurRadius: 30,
spreadRadius: 5,
),
],
),
child: Icon(
_isPlaying
? Icons.pause_rounded
: Icons.play_arrow_rounded,
color: Colors.white,
size: 40,
),
),
), ),
), ),
+10 -7
View File
@@ -3,7 +3,6 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/models/playlist_config.dart'; import '../../../core/models/playlist_config.dart';
import '../providers/xtream_provider.dart'; import '../providers/xtream_provider.dart';
/// Minimal EPG overlay - shows program title and info /// Minimal EPG overlay - shows program title and info
class EpgOverlay extends ConsumerWidget { class EpgOverlay extends ConsumerWidget {
final String streamId; final String streamId;
@@ -17,9 +16,11 @@ class EpgOverlay extends ConsumerWidget {
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
final epgAsync = ref.watch(epgByPlaylistProvider( final epgAsync = ref.watch(
epgByPlaylistProvider(
EpgRequestKey(playlist: playlist, streamId: streamId), EpgRequestKey(playlist: playlist, streamId: streamId),
),); ),
);
return epgAsync.when( return epgAsync.when(
data: (epgEntries) { data: (epgEntries) {
@@ -42,18 +43,20 @@ class EpgOverlay extends ConsumerWidget {
return Align( return Align(
alignment: Alignment.bottomLeft, // Align to bottom left near controls alignment: Alignment.bottomLeft, // Align to bottom left near controls
child: Container( child: Container(
margin: const EdgeInsets.fromLTRB(24, 0, 24, 24), margin: const EdgeInsets.fromLTRB(0, 0, 24, 0),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12), padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.black.withOpacity(0.5), // Semi-transparent backing for readability color: const Color(0xFF1A1A2E)
borderRadius: BorderRadius.circular(12), .withOpacity(0.85), // Match Native player controls
borderRadius: BorderRadius.circular(24),
border: Border.all(color: Colors.white.withOpacity(0.1)), border: Border.all(color: Colors.white.withOpacity(0.1)),
), ),
child: Row( child: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Container( Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), padding:
const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.red, color: Colors.red,
borderRadius: BorderRadius.circular(4), borderRadius: BorderRadius.circular(4),